/* ============================================================================
   CHOOSER SCREENS — the two halves, and the workspaces inside one
   ----------------------------------------------------------------------------
   One vertical rhythm for both screens: bar, then a page-intro block, then a
   labelled section, then the grid. Spacing is expressed as multiples of the
   scale rather than ad-hoc values, so the two screens line up with each other
   and with the app behind them.
   ============================================================================ */

.wpick{min-height:100vh;display:flex;flex-direction:column;align-items:stretch;
  background:
    radial-gradient(1200px 640px at 50% -14%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 64%),
    var(--bg)}

/* ---------- top bar ---------- */
.wpick-bar{flex-shrink:0;height:68px;border-bottom:1px solid var(--bdr);
  background:color-mix(in srgb,var(--card) 55%,transparent)}
.wpick-bar-in{max-width:1060px;margin:0 auto;height:100%;padding:0 var(--sp5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4)}
.wpick-bar .who{display:flex;align-items:center;gap:var(--sp3)}

/* ---------- page body ----------
   A narrower measure than the app behind these screens. Each is a single
   decision, and at 1120px two cards sat stranded at the left with dead space
   beside them, which reads as "more are coming" rather than "these are the
   two". The bar shares the measure so the lockup and the content align. */
.wpick-main{flex:1;width:100%;max-width:1060px;margin:0 auto;
  padding:var(--sp7) var(--sp5) var(--sp6)}
/* The workspace list holds up to three across, so it gets a wider measure than
   the halves screen, which only ever needs room for two. The modifier sits on
   the root because the bar is a SIBLING of the body, not a child of it — a
   descendant selector here silently does nothing and leaves the bar on the
   narrower measure, so its edge no longer lines up with the content. */
.wpick--wide .wpick-main,
.wpick--wide .wpick-bar-in{max-width:1120px}
/* The bar is NOT a flex container. It holds an inner band that centres on the
   same measure as the content and does the flexing; making the bar itself
   flex turns that band into a flex item, which shrink-wraps to its contents
   and strands the lockup in the middle of the screen. A second stylesheet did
   exactly that for a while. */

/* Intro block. The margin below it is the single biggest spacing decision on
   these screens — without it the cards collide with the sentence above. */
.wpick-intro{margin-bottom:var(--sp7)}
.wpick-eyebrow{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;
  font-size:13.5px;color:var(--txd);margin-bottom:var(--sp2)}
.wpick-h{font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.15}
.wpick-sub{font-size:15px;color:var(--txm);line-height:1.7;margin-top:var(--sp3);
  max-width:66ch}

/* Section label above a grid, with a rule running to the right. */
.wpick-sec{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp4)}
.wpick-sec .t{font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--txd);white-space:nowrap}
.wpick-sec .rule{flex:1;height:1px;background:var(--bdr)}

/* ---------- grids ----------
   The two halves are exactly two, permanently — a fixed 50/50 split, each card
   taking half the measure with nothing left over.

   Workspaces are open-ended, so that rule does not fit. The grid shrink-wraps
   its cards and centres itself: the leftover space splits equally on both
   sides, and narrows on its own as workspaces are added. Two cards sit with a
   wide even margin, three with a narrow one, and a fourth wraps to a centred
   second row. Stretching cards to fill instead would give an even margin of
   zero at every count. */
.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp5)}

.wgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp4);
  width:fit-content;max-width:100%;margin-inline:auto}
.wgrid > .wcard{flex:0 0 320px;max-width:100%}

@media(max-width:720px){
  .hgrid{grid-template-columns:1fr}
  .wgrid{width:auto}
  .wgrid > .wcard{flex:1 1 100%}
}

/* ---------- shared card shell ---------- */
.hcard,.wcard{position:relative;display:flex;flex-direction:column;
  text-align:left;cursor:pointer;color:var(--tx);
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);
  padding:var(--sp5);overflow:hidden;min-height:100%;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.hcard::before,.wcard::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--wm,var(--accent)),transparent 78%)}
.hcard:hover,.wcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb,var(--wm,var(--accent)) 45%,transparent)}
.hcard:hover .hc-go,.wcard:hover .wc-go{transform:translateX(3px)}

/* mark */
.hcard{padding:var(--sp6)}
.hc-i{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  color:var(--wm);
  background:color-mix(in srgb,var(--wm) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--wm) 28%,transparent)}

/* title block — same shape on both cards so rows align */
.hc-n,.wc-n{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;
  margin-top:var(--sp4)}
.hc-t,.wc-t{font-size:13px;font-weight:500;color:var(--wm,var(--accent));
  margin-top:var(--sp1);line-height:1.4}
.hc-d,.wc-d{font-size:13.5px;color:var(--txm);line-height:1.65;
  margin-top:var(--sp3);flex:1}

/* footer — pinned to the bottom so every card in a row ends level */
.hc-f,.wc-f{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp3);margin-top:var(--sp5);padding-top:var(--sp4);
  border-top:1px solid var(--bdr)}
.hc-ws,.wc-role{font-size:12.5px;color:var(--txd);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-go,.wc-go{font-size:13px;font-weight:600;color:var(--wm,var(--accent));
  white-space:nowrap;transition:transform .18s}

/* A workspace that is not switched on is dimmed rather than hidden away in a
   separate list — it is still real, just not ready. */
.wcard.pending{opacity:.66}
.wcard.pending:hover{opacity:1}
.dotlive{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-right:7px;vertical-align:middle;
  box-shadow:0 0 6px var(--green)}

.wpick-foot{flex-shrink:0;padding:var(--sp5);text-align:center;
  font-size:12px;color:var(--txd);border-top:1px solid var(--bdr)}

@media(max-width:760px){
  .wpick-main{padding:var(--sp6) var(--sp4)}
  .wpick-h{font-size:27px}
  .wpick-intro{margin-bottom:var(--sp6)}
}

/* A half with no workspaces in it. Shown, because the choice is between two
   halves of the application and hiding one makes the screen look like it was
   never a choice — but it does not open onto nothing. */
.hcard.pending{opacity:.45;cursor:default}
.hcard.pending:hover{transform:none;border-color:var(--bdr)}
.hcard.pending .hc-go{color:var(--txd)}


/* ============================================================================
   THE HOME CHOOSER, REFINED
   Card head is one row (mark, name + tagline, arrow) so the two cards line up
   edge for edge; the description is two short lines; the footer names how
   many focuses a side holds and shows them as chips instead of a sentence cut
   off mid-word.
   ============================================================================ */
.wpick-main{padding-top:64px}
.wpick-intro{margin-bottom:36px}
.wpick-eyebrow{font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.01em}
.wpick-h{font-size:34px;letter-spacing:-.03em;text-wrap:balance}
.wpick-sub b{color:var(--tx);font-weight:600}
.hgrid{gap:20px}
.hcard{padding:28px;gap:0;border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--wm) 5%,var(--card)),var(--card) 46%)}
.hcard::before{height:3px;background:linear-gradient(90deg,var(--wm),transparent 85%)}
.hc-head{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center}
.hc-i{width:48px;height:48px;border-radius:12px}
.hc-titles{display:flex;flex-direction:column;min-width:0}
.hc-n{margin-top:0;font-size:20px}
.hc-t{margin-top:2px}
.hc-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  color:var(--wm);border:1px solid color-mix(in srgb,var(--wm) 30%,transparent);
  transition:transform .18s,background .18s}
.hcard:hover .hc-arrow{transform:translateX(3px);background:color-mix(in srgb,var(--wm) 12%,transparent)}
.hc-d{margin-top:20px;font-size:14px;line-height:1.65;max-width:52ch}
.hc-f{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:24px;padding-top:18px}
.hc-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txd)}
.hc-chips{display:flex;flex-wrap:wrap;gap:6px}
.hc-chip{font-size:12.5px;padding:4px 10px;border-radius:99px;color:var(--txm);
  background:color-mix(in srgb,var(--tx) 4%,transparent);border:1px solid var(--bdr);white-space:nowrap}
.hc-chip.hc-on{color:var(--tx);border-color:color-mix(in srgb,var(--wm) 35%,var(--bdr))}
.hc-chip.more{color:var(--txd)}
.hcard.pending .hc-arrow{display:none}
.wpick-foot{border-top:none;padding-bottom:28px}
@media(max-width:760px){.wpick-main{padding-top:40px}.wpick-h{font-size:28px}.hcard{padding:22px}}
.wpick-sub{max-width:72ch}
.hc-chips{flex-wrap:nowrap;overflow:hidden;max-width:100%}
.hc-chip{line-height:18px;flex-shrink:0}
.hc-chips{align-items:center;height:28px}.hc-chip{height:28px;display:inline-flex;align-items:center}

/* Text sizes on Home, one scale: 36 heading, 16 lead, 22 card name,
   14.5 tagline, 15 description, 13 chips, 11.5 labels. */
.wpick-eyebrow{font-size:14px}
.wpick-h{font-size:36px}
.wpick-sub{font-size:16px}
.hc-n{font-size:22px}
.hc-t{font-size:14.5px}
.hc-d{font-size:15px;line-height:1.65}
.hc-lbl{font-size:11.5px}
.hc-chip{font-size:13px;height:30px;padding:0 12px}
.hc-chips{height:30px}
.hcard{padding:30px}
.hc-chip{line-height:1}