/* ── Learning Loop banner ──
   Simulation → Review → Improved → Reflection, with a loop-back arrow from
   Review to Simulation, under the tagline "Learn faster, memorize longer".

   ONE definition for all three placements — the Live Sandbox Test Form, the
   student's Roadmap To Success and the teacher's read-only view of it. The
   markup itself is generated by /static/js/learning_loop_banner.js rather than
   copied into each page: static/student.html is a static file and cannot
   {% include %} a Jinja partial, so a shared renderer is the only way the
   three placements are guaranteed identical instead of three copies that drift.
   Same reasoning static/css/review_walkthrough.css records for the Live Sandbox
   review screen.

   Colours are the student dashboard's own palette (#38bdf8 sky, #10b981
   emerald, #0f172a ground), which templates/teacher_layout.html shares, so the
   banner inherits the surrounding page rather than importing a second theme.
   Type is `font: inherit` for the same reason — 'Segoe UI' on both. */

.llb {
    background: linear-gradient(135deg, #10203a 0%, #112a38 100%);
    border: 1px solid #1e3a55;
    border-radius: 14px;
    padding: 16px 24px 22px;
    margin-bottom: 24px;
    font-family: inherit;
    overflow: hidden;   /* the loop curve is tucked below its own row; keep it inside the card */
}

.llb-grid {
    display: grid;
    /* 4 boxes at equal width, each pair separated by a fixed connector column.
       minmax(0,1fr) rather than 1fr so a long label cannot push the row wider
       than its container and force the page to scroll sideways. */
    grid-template-columns:
        minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
}

/* ── Row 1: the loop-back from Review to Simulation ──
   Spans the first two boxes ONLY (columns 1-3) — this is deliberately not a
   four-stage ring. The loop says "these two repeat", which is the claim the
   caption makes; a full ring would say the whole sequence cycles, which is a
   different and weaker claim. Tucked downward with a negative margin so the
   arrowhead lands just above Simulation instead of floating a row away; it
   overhangs into the tagline row, whose first two columns are empty. */
.llb-loop {
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: end;
    margin-bottom: -20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.llb-loop-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #7dd3fc;
    white-space: nowrap;
}

/* ── Row 2: the tagline ──
   Columns 3-7: above Review, Improved and Reflection, never above Simulation.
   It is the headline of the composition, so it outweighs every box label. */
.llb-tagline {
    grid-column: 3 / 8;
    grid-row: 2;
    align-self: end;
    /* Clears the loop curve's rising tail, which is tucked down into this row by
       .llb-loop's negative margin. The overlap is a CONSTANT 68px and does not
       vary with the stage width: the loop is a fixed 176px centred across
       columns 1-3, so its left edge is at (2W+40-176)/2 = W-68 and its right
       edge at W+108, while column 3 begins at W+40 -- the W cancels. 78px is
       that 68 plus clearance. Pinned by test_learning_loop_banner_ui.js; if the
       loop's width or span changes, recompute it rather than nudging it. */
    padding-left: 78px;
    color: #f8fafc;
    font-size: clamp(16px, 1.9vw, 21px);
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.25;
    margin: 0 0 10px;
    min-width: 0;
}

/* ── Row 3: the four stages ──
   Two colour treatments, not four: Simulation and Review are sky, Improved and
   Reflection are emerald. The shift lands between Review and Improved because
   that is where the sequence stops being work the student does and starts being
   what the work produced. */
.llb-box {
    grid-row: 3;
    align-self: stretch;
    border-radius: 10px;
    border: 1px solid;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.llb-box-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.llb-box-sub {
    font-size: 12px;
    line-height: 1.3;
}

.llb-sky {
    background: rgba(56, 189, 248, 0.12);
    border-color: #0ea5e9;
}
.llb-sky .llb-box-title { color: #e0f2fe; }
.llb-sky .llb-box-sub   { color: #7dd3fc; }

.llb-teal {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10b981;
}
.llb-teal .llb-box-title { color: #ecfdf5; }
.llb-teal .llb-box-sub   { color: #6ee7b7; }

.llb-conn {
    grid-row: 3;
    align-self: center;
    justify-self: center;
    display: block;
    line-height: 0;
}

.llb-b1 { grid-column: 1; }
.llb-c1 { grid-column: 2; }
.llb-b2 { grid-column: 3; }
.llb-c2 { grid-column: 4; }
.llb-b3 { grid-column: 5; }
.llb-c3 { grid-column: 6; }
.llb-b4 { grid-column: 7; }

/* ── The connectors themselves ──
   Every stroke is a real SVG path so the dash flow below is one mechanism, not
   a border trick per orientation. Arrowheads are stroked chevrons rather than
   filled polygons so they keep the line's own weight at any scale. */
.llb-flow-line,
.llb-head {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.llb-loop-svg .llb-flow-line,
.llb-loop-svg .llb-head,
.llb-c1 .llb-flow-line,
.llb-c1 .llb-head { stroke: #38bdf8; }

/* The Review → Improved connector already carries the colour shift the boxes
   make, so the eye reads the change before it reaches the box. */
.llb-c2 .llb-flow-line,
.llb-c2 .llb-head,
.llb-c3 .llb-flow-line,
.llb-c3 .llb-head { stroke: #10b981; }

/* ── Dash and flow are two separate decisions ──
   THE DASH IS THE DESIGN, NOT THE MOTION. Every connector is dashed in the
   approved reference, so the dash is unconditional: a reader who has asked
   their OS for reduced motion gets the drawing as designed, standing still,
   rather than a solid-line variant nobody approved. Only the travel is gated.
   (This was the wrong way round at first -- the dasharray sat inside the media
   query with the animation, which quietly turned the arrows solid for exactly
   the readers least able to tell it was not the intended look.) */
.llb-flow-line { stroke-dasharray: 6 7; }

/* Opt-OUT by default. Every line shares one keyframe, one duration and one
   start -- they are all inserted in the same tick -- so the four connectors
   travel together rather than drifting out of phase. */
@media (prefers-reduced-motion: no-preference) {
    .llb-flow-line { animation: llb-flow 1.1s linear infinite; }
}

@keyframes llb-flow {
    to { stroke-dashoffset: -13; }   /* one full dash + gap, so the loop is seamless */
}

/* ── Phone ──
   A 2x2 snake rather than a four-across squeeze or a flat stack: it keeps
   Simulation and Review side by side on the top row, which is the one
   adjacency the loop-back curve depends on, so the curve stays the same
   horizontal shape it has on desktop instead of needing a second geometry.
   Flow order stays 1→2→3→4; only the painting changes.

       [ Simulation ] → [ Review   ]
                             |
       [ Reflection ] ← [ Improved ]

   DOM order is untouched, so the reading order a screen reader follows is
   still Simulation, Review, Improved, Reflection. */
@media (max-width: 700px) {
    .llb { padding: 14px 16px 18px; margin-bottom: 16px; }

    .llb-grid { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); }

    /* The two swap rows on a phone. The tagline becomes a full-width centred
       headline at the top, which puts the loop DIRECTLY above the stages with
       its arrowhead landing on Simulation -- and removes the desktop overlap
       entirely rather than indenting around it, so the indent is reset here. */
    .llb-tagline { grid-column: 1 / 4; grid-row: 1; text-align: center;
                   padding-left: 0; margin-bottom: 12px; }
    /* No negative tuck here, unlike desktop: the loop now sits directly on the
       stage row, and its arrowhead already ends only ~4px above the svg's own
       bottom edge. Pulling it further would drive the arrow through the tops of
       the Simulation and Review boxes. */
    .llb-loop    { grid-column: 1 / 4; grid-row: 2; margin-bottom: 0; }

    .llb-b1 { grid-column: 1; grid-row: 3; }
    .llb-c1 { grid-column: 2; grid-row: 3; }
    .llb-b2 { grid-column: 3; grid-row: 3; }

    /* Rotated in place: one connector definition, three directions. The margin
       is what buys the row the height the rotated box does not reserve — a
       rotation does not change the layout box, so without it the arrow would
       overlap the boxes above and below. */
    .llb-c2 { grid-column: 3; grid-row: 4; transform: rotate(90deg); margin: 13px 0; }
    .llb-b3 { grid-column: 3; grid-row: 5; }
    .llb-c3 { grid-column: 2; grid-row: 5; transform: rotate(180deg); }
    .llb-b4 { grid-column: 1; grid-row: 5; }

    .llb-box { padding: 10px 8px; }
    .llb-box-title { font-size: 14px; }
    .llb-box-sub   { font-size: 11px; }
    /* width alone would fight the svg's own height attribute and squash the
       curve; height:auto hands the scaling to the viewBox. */
    .llb-loop-svg  { width: 150px; height: auto; }
}