/* ============================================================================
   THE HOME (HOME_SPEC.md) and the header menu it needs. Tokens only, from
   ui/theme.css — no new colours, no new dependencies. Structure, not decoration:
   this file adds no box ui/board.css does not already draw (.attention, .fold,
   .primary, .linkish are all reused as-is for the band, the rest-of-mine fold,
   and every button here).
   ============================================================================ */

/* ---------- hidden on the home view: the whole-board furniture the home replaces ----------
   Toggled by ui/views.js's setView() via document.body.dataset.view — never by touching the
   elements' own "hide" class, which ui/attention.js and ui/mission.js keep managing on every
   render() regardless of which view is showing. #view-nav is deliberately NOT in this list any
   more (redesign item 5a): it is the one navigation now, shown on every view including this one,
   not a whole-board-only tab row the home used to hide and re-draw a copy of at its own foot. */
body[data-view="home"] #mission,
body[data-view="home"] #needs-person,
body[data-view="home"] #team-attention,
body[data-view="home"] #unconfirmed,
body[data-view="home"] #changed,
body[data-view="home"] #handovers,
body[data-view="home"] #locks,
body[data-view="home"] #signals,
body[data-view="home"] #stats,
body[data-view="home"] .folds {
  display: none;
}

/* ---------- the one navigation: same place on every view and every width ----------
   board.css's own narrow-screen reorder (a file this session does not own) puts the attention
   bands ahead of the tabs below 641px, so a person scrolling a phone met the band before the
   nav. Overridden here, in the stylesheet loaded last, so the nav ties with the attention bands'
   own order and wins the tie by sitting first in the document (index.html) — directly under the
   masthead on every width, same as it already is at and above 641px. */
@media (max-width: 640px) {
  .tabs { order: 2; }
}
/* "Something isn't working" sits at the row's far end, quiet — the shape-legend fold already
   used to sit there (`margin-left: auto`) but is hidden now that the header menu holds it too. */
.tabs .raise { margin-left: auto; font-size: var(--text-sm); color: var(--graphite); }
.tabs .raise:hover { color: var(--ink); }

/* ---------- the home column: left-aligned with the title, never full width ---------- */
.homewrap { margin-top: var(--s4); }
.home { display: grid; gap: var(--s4); max-width: 42rem; margin: 0; }
/* Add something / waiting / keep in mind share one wrapper (ui/home.js). On a phone it is not a box
   at all, so its blocks stay in the single column's read order. */
.home-side { display: contents; }

.home-subhead {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-track);
  text-transform: uppercase; color: var(--graphite);
}

/* ---------- Delivery readiness: the outcome overview (package C, dashboard evaluator handoff
   2026-09-22) — above every other Home section, its own block, not part of the two-column grid
   below (it sits before `.home` in the DOM, not inside it, so it never has to fight that grid's
   explicit row/column placement). Reuses .flagbox-adjacent tokens (surface, hairline, radius) that
   the rest of the page already uses for a bordered card row. ---------- */
.outcome-overview { display: grid; gap: var(--s3); max-width: 42rem; margin: 0 0 var(--s2); }
.outcome-row {
  border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--radius);
  padding: var(--s3); display: grid; gap: .3rem;
}
.outcome-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.outcome-name { font-weight: 700; font-size: var(--text-base); }
.outcome-readiness { font-size: var(--text-sm); color: var(--graphite); }
.outcome-note { font-size: var(--text-sm); color: var(--graphite); font-style: italic; overflow-wrap: anywhere; }
.outcome-next { font-size: var(--text-sm); overflow-wrap: anywhere; }
.outcome-next .home-title-btn { font-weight: 600; }
.outcome-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.outcome-chip {
  font-size: var(--text-xs); padding: .18rem .55rem; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: pointer; max-width: 12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.outcome-chip:hover { border-color: var(--ink); }
/* --faint (tertiary text) reads under 3:1 on --surface in light mode (ui_contrast.mjs, light:
   2.99 on "not on this board") — --graphite is the theme's own "secondary but still readable"
   token, the same one the readiness line and note already use, so this chip stays legible. */
.outcome-chip:disabled, .outcome-chip.missing { color: var(--graphite); border-style: dashed; cursor: default; }
.outcome-map { font-size: var(--text-xs); white-space: nowrap; }
.outcome-picker { display: grid; gap: .1rem; max-height: 16rem; overflow-y: auto; border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--s2); }
.outcome-pick-row { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); padding: .25rem 0; overflow-wrap: anywhere; }

/* ---------- Then this ---------- */
.home-then { display: grid; gap: var(--s3); }
.home-row {
  border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--radius);
  padding: var(--s3); display: grid; gap: .3rem;
}
.home-row-do { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.home-row-why { font-size: var(--text-sm); color: var(--graphite); }
.home-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: .2rem; }
.home-row-actions .primary, .home-row-actions .home-quiet-main { min-height: 44px; padding: .5rem 1.1rem; }
.home-row-actions .linkish { font-size: var(--text-sm); }

/* ---------- Waiting, not on you ---------- */
.home-waiting { display: grid; gap: .2rem; }
.home-waiting-row {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--hairline); padding: .4rem 0; font-size: var(--text-sm);
  color: var(--graphite); cursor: pointer;
}
.home-waiting-row:first-of-type { border-top: 0; }
.home-waiting-row:hover { color: var(--ink); }

/* ---------- The rest of mine (folded) ---------- */
.home-rest { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.home-rest > summary { padding: var(--s3) 0; }
.home-rest .home-subhead { margin: var(--s2) 0 .2rem; }
.home-rest-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: .4rem 0; border-top: 1px solid var(--hairline); font-size: var(--text-sm);
}
.home-rest-row:first-of-type { border-top: 0; }
.home-rest-title { min-width: 0; overflow-wrap: anywhere; }
.home-rest-row .linkish { white-space: nowrap; }

/* ---------- Add something: always visible, one line ---------- */
.home-add { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.home-add input {
  flex: 1 1 16rem; min-width: 0; padding: .55rem .7rem; min-height: 44px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  font-size: var(--text-base);
}
.home-add-more { white-space: nowrap; }
/* The "change lane" control: a plain <select>, styled quiet like a linkish button — the browser's
   own dropdown is the whole widget, so there is no custom open/close state to build or maintain. */
.home-add-lane {
  background: none; border: 0; color: var(--ink); font-size: var(--text-sm); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; max-width: 10rem;
}

/* ---------- "<name> asked you": a question put to you by name, with its answer box (first on Home, above the overview and the grid) ---------- */
.home-asked { display: grid; gap: var(--s3); max-width: 42rem; margin: 0 0 var(--s4); }
.home-asked-row { display: grid; gap: .4rem; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--hairline); border-left: 4px solid var(--ink); border-radius: var(--radius); }
.home-asked-q { margin: 0; font-size: var(--text-lg); line-height: 1.3; overflow-wrap: anywhere; }
.home-asked-q b { font-weight: 800; }
.home-asked-on { justify-self: start; min-height: 44px; padding: 0; font-size: var(--text-sm); color: var(--graphite); text-align: left; }
.home-asked-form { display: flex; flex-wrap: wrap; gap: var(--s2); }
.home-asked-form input { flex: 1 1 16rem; min-width: 0; min-height: 44px; box-sizing: border-box; padding: .4rem .6rem; font: inherit; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.home-asked-form button { min-height: 44px; padding: .4rem 1.2rem; font: inherit; font-weight: 650; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer; }
.home-asked-form button:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) { .home-asked { max-width: none; } .home-asked-form button { flex: 1 1 100%; } }

/* ---------- Answered: questions you asked that someone else has decided ---------- */
.home-answered { display: grid; gap: .2rem; }
.home-answered-row { padding: .4rem 0; border-top: 1px solid var(--hairline); display: grid; gap: .15rem; }
.home-answered-row:first-of-type { border-top: 0; }
.home-answered-line { font-size: var(--text-sm); color: var(--graphite); }

/* ---------- Keep in mind ---------- */
.home-mind { display: grid; gap: .2rem; }
.home-mind-row { padding: .4rem 0; border-top: 1px solid var(--hairline); display: grid; gap: .15rem; }
.home-mind-row:first-of-type { border-top: 0; }
.home-mind-label { font-size: var(--text-xs); font-weight: 700; color: var(--graphite); }
.home-mind-text { font-size: var(--text-sm); }
.home-mind-row pre {
  margin: 0; padding: .5rem .6rem; background: var(--sunk); border: 1px solid var(--hairline);
  border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--text-sm);
  white-space: pre-wrap; word-break: break-word;
}
/* The one urgent kind — carrying most of the work, or the clock running out — reads bolder, not
   louder: no new colour, just the same weight a heading already carries. */
.home-mind-row.urgent .home-mind-text { font-weight: 700; color: var(--ink); }

/* ---------- a title that opens the card: styled as text, underlined only on hover/focus,
   never a permanent underline (item 7 — it replaces the separate "open the card" link) ---------- */
.home-title-btn {
  background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
}
.home-title-btn:hover, .home-title-btn:focus-visible {
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}

/* ---------- nobody named yet ---------- */
.home-noname { display: grid; gap: var(--s2); }
.home-noname form { display: flex; gap: var(--s2); flex-wrap: wrap; }
.home-noname input {
  flex: 1 1 12rem; min-width: 0; padding: .5rem .7rem; min-height: 44px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  font-size: var(--text-base);
}
.home-noname .primary { min-height: 44px; }

/* ---------- the header menu (ui/keys.js) ---------- */
.home-menu-toggle {
  font-weight: 600; padding: .3rem .2rem; text-decoration: none;
}
.home-menu-toggle:hover { text-decoration: underline; text-decoration-color: var(--rule); }
/* #keys-box (the containing block, ui/keys.js sets position:relative on it) is only as wide as
   its own button — sized to fit "<name> ▾" — so `right: 0` here means "flush with THAT button's
   right edge", which is also the header's own right edge, not "flush with the viewport". A width
   comes from min-width/max-width, never from also setting `left: 0` (that would mean the
   button's own LEFT edge, collapsing the popover to the button's width — seen live on a phone). */
.home-menu-popover {
  position: absolute; top: 100%; right: 0; margin-top: .3rem; z-index: 21;
  min-width: 13rem; max-width: calc(100vw - 2 * var(--s4));
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: .3rem; display: grid; gap: .1rem;
}
.home-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-radius: var(--radius); padding: .5rem .6rem; font-size: var(--text-sm);
  color: var(--ink); cursor: pointer;
}
.home-menu-item:hover, .home-menu-item:focus-visible { background: var(--band); }
.home-menu-name {
  display: flex; align-items: center; gap: .35rem; padding: .4rem .5rem .5rem;
  border-bottom: 1px solid var(--hairline); margin-bottom: .2rem; font-size: var(--text-sm); color: var(--graphite);
}
.home-menu-name input {
  flex: 1 1 auto; min-width: 0; padding: .3rem .45rem; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--text-sm); color: var(--ink);
}
.home-menu-name .linkish { white-space: nowrap; }

/* ---------- phone: full-width main buttons, at least 44px tall, no horizontal scroll ---------- */
@media (max-width: 640px) {
  .home { max-width: none; }
  .outcome-overview { max-width: none; }
  .home-row-actions { gap: var(--s2); }
  .home-row-actions { flex-wrap: nowrap; }
  .home-row-actions .primary, .home-row-actions .home-quiet-main { flex: 1 1 auto; }
  .home-add input { flex-basis: 100%; }
  /* flex-basis applies to the MAIN axis — column here, so height, not width. Reset it, or the
     name field (flex: 1 1 12rem in the row layout above) inflates to ~12rem tall. */
  .home-noname form { flex-direction: column; align-items: stretch; }
  .home-noname input { flex: 0 1 auto; }
  /* board.css's own narrow-screen rule (.mast-top .spacer{flex:1 0 100%}) wraps everything after
     the spacer — #keys-box included — onto its own line, where it sits at the LEFT edge, not the
     right (confirmed live: keys-box.x was 16px, not the right edge). The desktop popover opens
     from the button's right edge because the button IS the header's right edge there; on mobile
     that same `right: 0` stretches the popover leftward off-screen instead. Open it from the
     button's LEFT edge here instead, extending rightward into the room that is actually free. */
  .home-menu-popover { left: 0; right: auto; min-width: min(13rem, calc(100vw - 2 * var(--s4))); }
}

@media (prefers-reduced-motion: reduce) {
  .home-menu-popover { transition: none; }
}

/* ---------- laptop: the empty right half becomes a second column (item 5c) ----------
   Below this width the DOM order IS the read order (item 5b): band, then this, add something,
   waiting, keep in mind, N more of yours — home.js builds it in exactly that sequence, so
   nothing here needs an `order` property for the phone case. At and above it, two explicit
   columns: left carries the funnel (needs you, then this, the rest of mine), right carries
   everything else, top to bottom in the order HOME_SPEC gives it (add something, waiting, keep
   in mind) — each column its own three rows, so one column's tall block does not shove the
   other column's next item down with it. */
@media (min-width: 1000px) {
  .home {
    max-width: none; grid-template-columns: 1fr 22rem; column-gap: var(--s5); row-gap: var(--s4);
    /* The right column spans all three rows. When it is the taller side its extra height must go to
       the LAST row, or an empty first row (no decisions waiting) opens a hole above the next steps. */
    grid-template-rows: auto auto 1fr;
  }
  .home-band { grid-column: 1; grid-row: 1; }
  .home-then { grid-column: 1; grid-row: 2; }
  .home-rest { grid-column: 1; grid-row: 3; align-self: start; }
  /* The right column is ONE grid item spanning the left column's rows and stacking on its own, so a
     tall block on the left never opens a hole between the blocks on the right. */
  .home-side { display: grid; gap: var(--s4); grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .home > .home-add { grid-column: 2; grid-row: 1; align-self: start; }
}

/* The second and third steps: an outline, so the screen has ONE filled button (the first step's). */
.home-row .home-quiet-main, .home-then > .home-quiet-main {
  background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius);
  font-weight: 600; cursor: pointer;
}
.home-row .home-quiet-main:hover, .home-row .home-quiet-main:focus-visible, .home-then > .home-quiet-main:hover, .home-then > .home-quiet-main:focus-visible { background: var(--ink); color: var(--paper); }

/* On the home, the decision's Answer is the screen's one filled button: it is the first thing on the
   path. (Seen in the first merged screenshot: a filled Start below an outlined Answer pulled the eye
   past the decision.) Once the form is open its own Decide button carries the emphasis instead. */
#home-needs-you .att-act > button { background: var(--ink); color: var(--paper); border-color: var(--ink); min-height: 44px; }
#home-needs-you .att-act > button:hover { background: var(--ink); color: var(--paper); }
.home-then > .home-quiet-main { min-height: 44px; padding: .5rem 1.1rem; margin-top: var(--s2); }

/* ---------- a card's ID on Home's lines (Alex, 2026-10-06): the same small mark as everywhere (ui/rows.css .card-id) ---------- */
.home-row > .card-id { justify-self: start; }              /* above a next step's title, like the board's card */
.home-rest-row .card-id { flex: none; }                     /* leads a "rest of mine" line */
.home-rest-title { flex: 1 1 auto; }                        /* the title takes the line, so the ID, Done and Start keep their places */
.home-waiting-row .card-id { margin-right: .5rem; }         /* ahead of the waiting sentence */
/* Done skips the check, and it sits beside a main button: under a finger it gets a real target of its own, so a press meant for Start is never a Done */
@media (pointer: coarse) { .home-done { min-height: 44px; padding: 0 .75rem; } }
/* every other Home line that opens a card: the ID above its title (grid rows), inline in the delivery readiness "Next:" line, and ahead of a chip's title */
.home-asked-row > .card-id, .home-answered-row > .card-id { justify-self: start; }
.outcome-next .card-id { margin: 0 .3rem; }
.outcome-chip .card-id { margin-right: .3rem; }