/* The shared portal shell (P0-06 / P0-07 / P1.6) — one grouped journey rail,
   one active tool, for worker, employer and nonprofit alike.
   Tokens verified against static/weave.css. Inventing a token name fails
   SILENTLY (the property just does not apply), which is how an off-brand page
   ships looking fine to whoever wrote it.

   The module-grid, module-card, county-KPI-row and category-tab selector
   families are GONE, not commented out: they are the interaction model this
   rebuild retired (PORTAL-EXPERIENCE-REDESIGN.md P0). Do not reintroduce
   them — tests/test_portal_rebuild.py greps this file for their names. */

/* ---------- minimal chrome kept for standalone tool subpages ---------- */
.dash{max-width:var(--alex-page-max,1400px);margin:0 auto;padding:0 var(--alex-page-gutter,24px)}
.dash-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:32px;flex-wrap:wrap;padding:26px 0 18px;border-bottom:1px solid var(--line)}
.dash-eyebrow{font-family:var(--font-display),sans-serif;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--alex-purple)}
.dash-title{font-family:var(--font-display),sans-serif;font-size:30px;
  line-height:1.15;margin:6px 0 4px;color:var(--ink)}
.dash-sub{font-family:var(--font-body),serif;font-size:15px;color:var(--charcoal);
  margin:0;max-width:62ch}
.dash-scope__select{width:100%;max-width:340px;padding:9px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px}
.dash-scope__go{border:0;background:var(--alex-purple);color:#fff;
  border-radius:var(--radius-sm);padding:9px 14px;font-size:13px}

/* ---------- account strip (only on /portal) ---------- */
/* Carries what the retired employer_home / nonprofit_home tile grids carried:
   who you are signed in as, what you are paying for, and the way back to the
   guided challenge picker. */
.dash-account{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;padding:14px 16px;margin:0 0 18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md)}
.dash-account__org{font-size:1.25rem;margin:.15rem 0 0}
.dash-account__who{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dash-account__who a{color:var(--alex-purple);font-weight:600}
@media (max-width:640px){.dash-account{flex-direction:column;align-items:flex-start}}

/* ---------- the portal shell: grouped rail + one working surface ----------
   Structure lifted from hamilton-county-government/templates/_sidebar.html and
   its .app-shell grid — the city/county portal pattern the redesign names as
   the reference architecture. */
.wshell{display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:0;max-width:var(--alex-page-max,1400px);margin:0 auto;
  padding:0 var(--alex-page-gutter,24px);align-items:start}

.wside{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);
  overflow-y:auto;padding:20px 20px 20px 0;border-right:1px solid var(--line)}
.wside__drawer{display:block}
/* The disclosure control exists for narrow viewports only; on desktop the
   rail is always open and the summary is not rendered visible. */
.wside__summary{display:none}
.wside__top{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.wside__eyebrow{display:block;font-family:var(--font-display),sans-serif;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--alex-purple)}
.wside__tag{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.wside__tier{display:inline-block;margin-top:8px;background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:2px 10px;font-size:11px;font-weight:700;color:var(--charcoal);
  font-family:var(--font-display),sans-serif}
.wside__section{margin-bottom:18px}
.wside__section-title{font-family:var(--font-display),sans-serif;font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:6px}
.wside__list{list-style:none;padding:0;margin:0}
.wside__list li{margin-bottom:2px}
.wside__link{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 10px;font-size:13.5px;line-height:1.35;color:var(--ink);
  text-decoration:none;border-radius:var(--radius-sm)}
.wside__link:hover{background:var(--canvas);color:var(--alex-purple)}
.wside__link--on{background:var(--canvas);color:var(--alex-purple);font-weight:600;
  box-shadow:inset 2px 0 0 var(--alex-purple)}
.wside__lock{flex:0 0 auto;color:var(--muted);display:inline-flex}
/* "Built with Alex": this row is a REQUEST the team answers, not a screen.
   Deliberately quiet, a small outlined chip rather than a coloured pill, so it
   reads as a property of the item and does not compete with the lock icon or
   the active state beside it. Marked on eleven capabilities; the other
   thirty-seven carry nothing, because a badge on everything is a badge on
   nothing. */
.wside__kind{flex:0 0 auto;margin-left:6px;padding:1px 6px;border:1px solid var(--line-strong,rgba(32,32,52,.18));border-radius:999px;font-family:var(--font-display);font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.wside__foot{font-size:11.5px;color:var(--muted);line-height:1.5;
  border-top:1px solid var(--line);padding-top:12px;margin:8px 0 0}
/* Keyboard visibility: the rail is the page's primary navigation, so focus
   must be unmistakable, including on the disclosure control. */
.wside__link:focus-visible,.wside__summary:focus-visible{
  outline:2px solid var(--alex-purple);outline-offset:2px}

.wmain{padding:26px 0 40px 32px;min-width:0}
.wmain__head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.wmain__eyebrow{font-family:var(--font-display),sans-serif;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--alex-purple)}
.wmain__title{font-family:var(--font-display),sans-serif;font-size:28px;
  line-height:1.15;margin:6px 0 6px;color:var(--ink)}
.wmain__blurb{font-family:var(--font-body),serif;font-size:15.5px;line-height:1.55;
  color:var(--charcoal);margin:0 0 10px;max-width:70ch}
.wmain__evidence{font-size:12.5px;line-height:1.5;color:var(--charcoal);margin:0 0 4px;max-width:78ch}
.wmain__key{font-family:var(--font-display),sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--alex-purple);margin-right:5px}
.wmain__depth{font-size:12px;color:var(--muted);margin:0;line-height:1.45;max-width:78ch}
.wmain__tierline{font-size:13px;color:var(--charcoal);margin:0 0 16px}
.wmain__tierline a{color:var(--alex-purple);font-weight:600}
.wmain__panel{margin:4px 0 14px}
.wmain__inbuild{font-size:12.5px;color:var(--muted);margin:0 0 12px;
  padding-left:11px;border-left:2px solid var(--line-strong);line-height:1.5}
.wmain__soon{background:var(--canvas);border-radius:var(--radius-md);padding:18px 20px;max-width:70ch}
.wmain__soon p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--charcoal)}
.wmain__preview{color:var(--ink)}
.wmain__foot{border-top:1px solid var(--line);margin-top:30px;padding:16px 0 10px}
.wmain__foot p{font-size:12px;color:var(--muted);margin:0;line-height:1.55;max-width:90ch}

/* ---------- locked: the concise availability state (P1.6 step 4) ----------
   The honest sentence in the correct journey position. Never a greyed copy of
   the real controls, never a nag: what the tool is, what already comes free,
   and what unlocks the rest. */
.wmain__avail{background:var(--canvas);border:1px dashed var(--line-strong);
  border-radius:var(--radius-md);padding:18px 20px;max-width:70ch}
.wmain__avail-state{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 10px}
.wmain__avail-key{font-family:var(--font-display),sans-serif;font-size:10.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--alex-purple);margin:0 0 4px}
.wmain__avail-scope{margin:0 0 10px;padding-left:20px;font-size:13.5px;line-height:1.6}
.wmain__avail-note{font-size:13px;color:var(--charcoal);margin:0 0 10px;line-height:1.5}
.wmain__avail-act{font-size:13px;margin:0}
.wmain__avail-act a{color:var(--alex-purple);font-weight:600}
.mod__ask{font-size:12.5px;color:var(--alex-purple);font-weight:600}

/* ---------- compact context bar (P1.1) ---------- */
.ctxbar{border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);padding:12px 16px;margin:0 0 18px}
.ctxbar__label{display:block;font-family:var(--font-display),sans-serif;
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 8px 0 0}
.ctxbar__note{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.ctxbar__scope{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ctxbar__stats{font-size:12.5px;color:var(--charcoal);margin:8px 0 0;
  display:flex;flex-wrap:wrap;gap:6px 18px}
.ctxbar__stat b{color:var(--alex-purple)}
.ctxbar__stat em{color:var(--muted);font-style:normal;font-size:11px}

/* ---------- role set (the employer's context control) ---------- */
.roles__add{display:flex;gap:6px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.roles__q{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px}
.roles__n{width:62px;padding:9px 8px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);
  font-size:14px;text-align:center}
.roles__go{border:0;background:var(--alex-purple);color:#fff;
  border-radius:var(--radius-sm);padding:9px 16px;font-size:13.5px;font-weight:600}
.roles__chips{list-style:none;margin:0 0 8px;padding:0;display:flex;
  flex-wrap:wrap;gap:6px}
.roles__chip{display:inline-flex;align-items:center;gap:6px;background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:4px 6px 4px 4px;font-size:12.5px;color:var(--ink)}
.roles__chip-n{background:var(--alex-purple);color:#fff;border-radius:var(--radius-pill);
  min-width:20px;text-align:center;padding:1px 6px;font-size:11px;font-weight:700}
.roles__chip-alt{color:var(--muted);font-style:italic}
.roles__chip form{display:inline}
.roles__x{border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px}

/* The panels' own grid helper needs real width to resolve to two columns. */
.wmain__panel .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.wmain__panel .grid.g2{grid-template-columns:1fr}}

/* ---------- narrow viewports ----------
   The rail collapses to an accessible disclosure: a 264px column beside a
   wage table is unreadable at 390px, and a full page of rail above the tool
   buries the tool (P1.6: at 390px the working tool appears before the
   expanded journey list). Native <details>, so the toggle is keyboard
   reachable with no script; the script in portal.html only sets the default
   open state per width. */
@media (max-width:860px){
  .wshell{grid-template-columns:1fr}
  .wside{position:static;max-height:none;border-right:0;
    border-bottom:1px solid var(--line);padding:14px 0}
  .wmain{padding:20px 0 40px}
  .wside__summary{display:flex;justify-content:space-between;align-items:center;
    gap:10px;cursor:pointer;padding:10px 14px;border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);background:var(--surface);
    font-family:var(--font-display),sans-serif;font-size:13.5px;font-weight:600;
    color:var(--ink);list-style:none}
  .wside__summary::-webkit-details-marker{display:none}
  .wside__summary-label::after{content:" ▾";color:var(--muted)}
  .wside__drawer[open] .wside__summary-label::after{content:" ▴"}
  .wside__summary-now{font-weight:400;color:var(--muted);font-size:12.5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wside__nav{padding-top:12px}
  .dash-top{flex-direction:column;gap:18px}
  .dash-title{font-size:24px}
}