/* ==========================================================================
   EVAL · home.css — the Home page: assistant panel, Today's tasks,
   Follow-ups, the seven-summary rail. Owner: home agent.
   Only tokens from tokens.css and primitives from components.css; everything
   below is layout (or a home-only piece the concept asks for), never a second
   copy of a primitive.
   iPad  (>= 1000px): one screen, no scroll — panel left, two cards right,
                      rail across the bottom (Sales pace double wide).
   Phone (<  1000px): the same content stacked and scrollable; the assistant
                      lives on the Ask page, so Home carries a greeting strip
                      and the ask pill that opens it.
   ========================================================================== */

/* ---------- the page shell ---------------------------------------------- */
.home { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }

@media (min-width: 1000px) {
  .home { height: 100%; }
  .home-main {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr); gap: 14px;
  }
  /* the explicit 1fr column matters: an auto track would size to the longest
     task line and push the card past the viewport at 1024px */
  .home-right {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr;
    gap: var(--gap); min-height: 0; min-width: 0;
  }
  .home-rail {
    flex: 0 0 auto; display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 72px; gap: 10px;
  }
}

@media (max-width: 999px) {
  .home { padding-top: 2px; }
  .home-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* a narrow card always reads the same way: label, figure, pill on its own
     line — a grid instead of a wrap, so neighbouring cards line up */
  .home-rail .sum { min-height: 92px; }
  .home-rail .sum .s1 b { font-size: var(--fs-sub); letter-spacing: -.2px; }
  .home-rail .sum:not(.wide) .s2 {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline; row-gap: 8px; column-gap: 8px;
  }
  /* the status sits under the figure it judges, on the card's own left edge:
     pushed to the right it left a third of the card empty beside it, and at
     175px there is no room to put it up beside the label without clipping
     "Gross month to date" to make way */
  .home-rail .sum:not(.wide) .s2 .pill { grid-column: 1 / -1; justify-self: start; align-self: center; margin-left: 0; }
  /* ONE CARD SPECIES ON THE PHONE. The lead card spans both columns here because the
     rail's seventh summary would otherwise be stranded alone on a fourth row — but
     spanning is the only thing about it that changes. It used to keep the iPad's
     one-line "15 of 40 new [Behind]" while all six cards under it stacked their pill on
     its own line, and stretch to ~130px against their 92px, which opened a ~60px hole
     between its label and its figure: one card in seven with a different internal
     layout and a void in the middle of it. It reads exactly like its siblings now, in
     the same box, twice as wide. */
  .home-rail .sum.wide { min-height: 92px; }
  .home-rail .sum.wide .s2 {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline; row-gap: 8px; column-gap: 8px;
  }
  .home-rail .sum.wide .s2 .pill { grid-column: 1 / -1; justify-self: start; align-self: center; margin-left: 0; }
}

.home-rail .sum.wide { grid-column: span 2; }
/* the three pace gauges on the lead card: rings in a row, the lane word under each,
   the status pill at the end; on the phone the pill wraps under the rings */
.home-rail .sum.gauges .s2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-rail .sum.gauges .gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.home-rail .sum.gauges .gauge .ring-num { font-size: 15px; }
.home-rail .sum.gauges .gauge .gl { font-size: var(--fs-pill); font-weight: 700; color: var(--muted); }
.home-rail .sum.gauges .gauge .gnone { font-size: 11px; font-weight: 600; color: var(--muted2); }
.home-rail .sum.gauges .s2 .pill { margin-left: auto; }

/* ---------- the assistant panel (iPad) ----------------------------------
   The ask module mounts its own surface inside #ask-home, so the host is a
   bare flex column and the mounted surface fills it. Without the ask module
   the host takes the panel chassis itself (.assistant.card) and draws the
   greeting, the chips and the input below. */
.assistant { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.assistant:not(.card) > * { flex: 1 1 auto; min-height: 0; }

.h-phead { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
/* the mark itself is .gmark in components.css — one shape for every surface
   the assistant heads; this file only says where it sits */
.h-greeting {
  flex: 1; min-width: 0;
  font-family: var(--font-head); font-size: var(--fs-h1); font-weight: 800;
  letter-spacing: var(--ls-tight); color: var(--ink);
}
.h-datechip {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 12px; font-size: var(--fs-sub); font-weight: 600; color: var(--ink2);
}
.h-datechip > i { display: block; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--pur); }

/* the opening lines: the only place on Home with prose, so it is the one
   thing allowed to scroll inside the panel when the store has a lot to say */
.h-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 15px; }
.h-bubble {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r) var(--r) var(--r) var(--r-xs);
  padding: 15px 17px; box-shadow: var(--shadow);
}
.h-bubble p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink2); font-weight: 450; }
.h-bubble p + p { margin-top: 9px; }

.h-chips { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; padding-top: 14px; }

.assistant .inputpill, .home > .inputpill { margin-top: 14px; }
.h-askopen {
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; text-align: left;
}
.h-askopen .ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-askopen .ph.h-typed { color: var(--ink); font-weight: 600; }

/* ---------- what Home asks of the mounted assistant (iPad) --------------
   ask.css owns the assistant's own composition; these are Home's terms for the
   one place it is a PANEL rather than a page: 566px of height at the design
   size, shared with four suggestion rows and the input. Layout only — no colour,
   no type, no second copy of anything in components.css. */
@media (min-width: 1000px) {
  /* the briefing is the single most important block of copy in the product and
     at 1180x820 it was 28px taller than the box it had, so the foot fade cut
     the last line through the middle of its letters. The panel gives that
     height back out of its own padding and its chip rows — 45px still clears
     the law's 44px hit box — and the opening lines land whole. */
  .home .assistant > .ask { padding: 16px; }
  .home .assistant .ask-head { gap: 10px; }
  .home .assistant .ask-thread { padding-top: 12px; }
  .home .assistant .ask-foot { padding-top: 10px; gap: 10px; }
  .home .assistant .ask-chips { gap: 7px; }
  .home .assistant .ask-chips .chip { height: 45px; }

  /* TWO suggestion rows on the panel, not four. Four rows took 201px of a
     566px panel and left the conversation 167px — the answer Quinn calls his
     favourite surface died mid-sentence ("…or take Base…") with its tiles, its
     action row and its "Read from" line entirely off-screen, while the things
     you might ask INSTEAD owned more of the window than the thing you did ask.
     The input under them takes any question, the phone's Ask page still shows
     the full set, and the panel's thread roughly doubles. */
  .home .assistant .ask-chips .chip:nth-child(n+3) { display: none; }

  /* the GM's own name is never the thing that gets cut: at 1024 the greeting was
     one pixel short of "Good morning, Quinn." and ellipsised it. It wraps first. */
  .home .assistant .ask-head h1 { white-space: normal; text-overflow: clip; }

  /* the panel's spare height belongs to the conversation, not to a gap in front
     of the chips: the briefing settles inside the thread, and both auto margins
     collapse to zero the moment there is more to read than the box can show —
     which is exactly when the fade below is the thing that matters. */
  .home .assistant .ask-thread > :first-child { margin-top: auto; }
  .home .assistant .ask-thread > :last-child { margin-bottom: auto; }

  /* and when there IS more: the fade has to swallow the part-line rather than
     slice it at half ink. A cut can land anywhere inside a 22.4px line, so the
     foot is fully clear for the deeper part of one and only reaches full ink two
     lines up: whatever is cut reads as a trace, never as broken rendering.

     These used to be two whole gradients restated here, which is how the panel
     kept a 20px TOP ramp after ask.css raised it to 38 — the depth was a literal
     in four places and the fourth was this one. ask.css owns the mask's shape
     now and the panel sets the two numbers it actually wants deeper; the top
     comes with it (round-2 app/css fix pass). */
  .home .assistant .ask-thread { --askFadeFoot: 54px; --askFadeFootFlat: 13px; }
}

/* below the design width the head gives the name the date pill's 112px rather
   than let a longer one wrap: the top bar carries "Tue Sep 22" two inches above
   it, and ask.css already drops this second copy on the phone for that reason. */
@media (min-width: 1000px) and (max-width: 1179px) {
  .home .assistant .ask-date { display: none; }
}

/* A taller iPad has to read richer, not emptier. At 1024 tall the composition
   used to pin everything to the top and bottom edges and stretch the middle, so
   200 extra pixels arrived as a hole above the chips and another under the
   verdict rule. They go into the things that grow well instead — the seven
   summaries (label at the top, figure at the foot), the suggestion rows, the
   first-walk figures — and what is still left becomes the conversation's own
   foot, so the briefing settles high in the panel with the greeting instead of
   floating in the middle of it. Declared after the block above: same
   specificity, so this one has to come last to win. */
@media (min-width: 1000px) and (min-height: 900px) {
  /* 96px rows put a 32px band between a card's label and its figure, which is
     a card stretched rather than a card filled: 88 is the height the same
     content reads at, and the 8px a row gives back goes to the panel beside
     it, where the conversation is still the smallest region on the page. */
  .home-rail { grid-auto-rows: 88px; }
  .home .assistant .ask-foot { gap: 14px; }
  .home .assistant .ask-chips { gap: 10px; }
  .home .assistant .ask-chips .chip { height: 60px; }
  .home .assistant .ask-thread { padding-bottom: 84px; }
  .h-ftiles .tile { min-height: 96px; justify-content: space-between; }
}

/* ---------- the narrow iPad (1000-1119px) -------------------------------
   1024x768 is a frame SPEC §2 names, and it is 156px narrower and 52px shorter
   than the design size: everything on Home is one line from being cut there. */
@media (min-width: 1000px) and (max-width: 1119px) {
  /* "12.8% store vs 16%" came out "store vs 1…", and a comparison that loses
     its second term reads as a different number. The card finds the eight
     pixels in its own gutters rather than cutting the figure. */
  .home-rail .sum { padding-left: 11px; padding-right: 11px; }
  .home-rail .sum .s2 { gap: 6px; }
  /* Four task rows and the follow-ups used to split this column exactly in half,
     which on a 768-tall screen gave a task row 47px for 53px of content: each
     row's evidence line sat level with the row above it and the card read as one
     dense block instead of four tasks. The walk takes the larger share — it is
     the half of this column the morning is for — and Follow-ups gives up 28px it
     was already dissolving the foot of. */
  .home-right { grid-template-rows: 1.25fr 1fr; }
}

/* ---------- phone greeting strip --------------------------------------- */
.home-greet { display: flex; align-items: center; gap: 11px; padding: 4px 2px 0; }
@media (max-width: 999px) {
  .home > .inputpill { margin-top: 12px; }
  .home-greet .h-greeting { font-size: var(--fs-h1); letter-spacing: -.5px; }
  /* "Ask Val anything about your store" is the first sentence the product says
     about its own assistant, and at 393px it cleared the mic by three pixels.
     The pill finds nine more in its own gutter so the last word — "store" —
     is never the one an ellipsis takes. */
  .home > .inputpill { padding-left: 15px; gap: 8px; }
}

/* ---------- Today's tasks ---------------------------------------------- */
.home-tasks .list { flex: 1 1 auto; min-height: 0; margin-top: 2px; }
.home-tasks .row { padding: 6px 0; }
.home-tasks .row .t1 { gap: 8px; }
/* the owner is one chip, so the avatar and the name never separate */
.h-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.h-owner .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1000px) {
  /* four rows share the card exactly, so the card never spills */
  .home-tasks .row { flex: 1 1 0; min-height: 0; }
  /* the owner is a COLUMN, not a right-aligned tail: four names of four lengths
     put four avatars at four different x, which reads as four different rows.
     150px is the design width (and the one the Tasks page uses, so the two pages
     line up); below 1180 it gives width back rather than let the column push the
     task title into an ellipsis — the title is the instruction, the owner is not. */
  .h-owner { flex: 0 0 clamp(128px, 12.72vw, 150px); width: auto; }
}
@media (max-width: 999px) {
  /* a GM has to be able to read the whole task, so the title wraps instead of
     ellipsing at 393px; the detail line below it still gets one line */
  .home-tasks .row .t1 { align-items: flex-start; }
  .home-tasks .row .t1 .tt {
    white-space: normal; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* the evidence IS the row's content: at 393px it was sharing one line with
     the proof mark and came out as "App window at 81.4%…". The fact takes the
     width (two lines if it needs them), and the owner and the mark share the
     line beneath it — the name stays on the row, it never drops to an orphan
     pair of initials. */
  /* the rank belongs to the title, so it rides at the top of a tall row
     instead of floating beside the middle of the evidence */
  .home-tasks .row .rank { align-self: flex-start; margin-top: 2px; }
  .home-tasks .row .t2 .det {
    white-space: normal; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* the meta line is the row's own footer: it wraps under the rank and the done
     box and takes the full width, so "Nana Prempeh" is never clipped to "Nana
     Premp…" to leave room for the report chip */
  .home-tasks .row { flex-wrap: wrap; row-gap: 9px; }
  .home-tasks .row .h-meta { flex: 1 0 100%; flex-wrap: nowrap; }
  .home-tasks .row .h-meta .h-vmark { margin-left: auto; }
}

/* the proof mark: which report will prove this task tomorrow (tap = the proof).
   It IS the family's tappable pill (.pill.lav.tapin) — look, tone, chevron and
   hit box all come from components.css; the row only says it must not shrink.
   Lavender, not green: green belongs to a follow-up that actually verified. */
.h-vmark { flex: 0 0 auto; }

/* the number inside the static "n of 4 done" pill */
/* the whole count is one flex item inside the pill, so the pill's gap cannot
   fall between the number and the word after it (see js/home.js) */
.h-donet { display: inline; }
.h-donen { font-weight: 800; }

/* ---------- Follow-ups ------------------------------------------------- */
/* the filler under a card head: an empty state, or the follow-up rows */
.h-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding-top: 8px; }
.home-fu .list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.home-fu .row .h-cv { display: flex; flex: 0 0 auto; color: var(--muted2); opacity: .8; }

/* the first walk: the two real figures today produced, then the three verdicts
   one of them will earn tomorrow. Tiles and pills, no wireframe. */
/* the headline keeps its own height: the figures below it may take the slack,
   the honest line itself is never the thing that gets squeezed */
.home-fu .h-fill > .empty { flex: 0 0 auto; }
/* the block TAKES the slack rather than leaving it under itself: on a 1024-tall
   iPad the card used to end with 150px of nothing below the verdict rule, which
   read as a card that had failed to finish drawing. It now sits centred in the
   room it is given, so extra height is air around the figures, not a hole. */
.h-first { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.h-ftiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.h-fverdict { margin-top: 0; flex-wrap: wrap; row-gap: 8px; }
.h-fverdict .ln { min-width: 12px; }
.h-fpills { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* a real follow-up row: before -> after, the status pill, the owner */
.home-fu .row .t2 .det { font-variant-numeric: tabular-nums; }

/* ---------- the rail --------------------------------------------------
   Sales pace leads the rail at double width (seven cards in a four-column
   grid need one of them to span two) and is composed exactly like the other
   six: label, one headline figure, one status pill. The primitive draws all
   of that; the card only claims its two columns, above.

   The one thing two columns changes is where the status lands. `.sum .s2 .pill`
   is `margin-left: auto` so a reading always sits on the card's right edge —
   right for a 280px card, an accident on a 569px one, where "15 of 40 new" sat
   at the far left and "Behind" at the far right with 457px of nothing between
   them (550px at 1366). Until the card carries the month spark the data
   contract already publishes (`EVAL.data.summary('pace').spark`), its figure,
   its unit and its reading read as ONE group at the card's own left edge — the
   same three things in the same order as on every narrow card beside it.
   On the phone the same card is 361px against its neighbours' 176px and keeps
   its three things on one line, so it takes the same treatment there: every
   narrow card beside it already puts its status on the card's own left edge. */
.home-rail .sum.wide .s2 .pill { margin-left: 0; }