/* AiReviewOS — Telio *OS design language.
   Tokens lifted verbatim from ContractorOS / SalesOS globals.css, and the
   COMPONENT COMPOSITION reproduced from their Dashboard/ManagerShell files so
   the three apps read as one product family: 2xl panels with a tinted header
   band, PageHeader, segmented controls, uppercase tracked column heads,
   tabular numerals, quiet sign-out link. No Tailwind build (spec §13). */

:root {
  --bg: #f4f6fb; --bg-2: #e9edf6; --panel: #ffffff; --panel-2: #f7f9fd;
  --line: #d7dded; --line-soft: #e4e9f4;
  --ink: #141f4e; --muted: #4d5a85; --faint: #67718f;
  --primary: #2c63f2; --primary-hover: #1d4fd7; --primary-ink: #ffffff;
  --periwinkle: #a9c4f5;
  --good: #178a5f; --good-bg: #e3f2ec; --warn: #a9750f; --warn-bg: #f7efdd;
  --bad: #b3352c; --bad-bg: #f8e7e5; --neutral-bg: #eaeef7;
  --logo-navy: #141f4e; --logo-blue: #2c63f2;
  --chart-good: #178a5f; --chart-warn: #c08a00; --chart-bad: #9c2a21;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1233; --bg-2: #101940; --panel: #16204d; --panel-2: #1a2557;
    --line: #2c3768; --line-soft: #232e5e;
    --ink: #e9ecf6; --muted: #a0aaca; --faint: #8c96b8;
    --primary: #6f96f7; --primary-hover: #8caaf9; --primary-ink: #0b1233;
    --periwinkle: #a9c4f5;
    --good: #4cc499; --good-bg: #123340; --warn: #e0b25d; --warn-bg: #332a10;
    --bad: #e8867e; --bad-bg: #3a1b18; --neutral-bg: #1e2a5e;
    --logo-navy: #a9c4f5; --logo-blue: #6f96f7;
    --chart-good: #2aa876; --chart-warn: #bb8a13; --chart-bad: #cf3d33;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body {
  margin: 0; min-height: 100dvh;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-feature-settings: "tnum";               /* siblings: body-wide tabular nums */
  -webkit-font-smoothing: antialiased;
  font-size: 15px; line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* ---- shell: mx-auto max-w-6xl px-5 pb-16 pt-8 lg:px-8 ---- */
.shell { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
@media (min-width: 1024px) { .shell { padding-left: 2rem; padding-right: 2rem; } }

/* ---- top bar: wordmark left, quiet identity right ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.wordmark { display: inline-flex; align-items: center; gap: .5rem;
            font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.wordmark .os { color: var(--primary); }
.topbar-user { display: flex; align-items: center; gap: .9rem; font-size: .875rem; }
.topbar-user .who { font-weight: 600; color: var(--muted); }
.link-quiet { font-size: .875rem; font-weight: 500; color: var(--faint); text-underline-offset: 4px; }
.link-quiet:hover { color: var(--primary); text-decoration: underline; }
.nav-pill { font-size: .8rem; font-weight: 700; color: var(--primary);
            background: color-mix(in srgb, var(--primary) 12%, transparent);
            border-radius: 999px; padding: .25rem .7rem; }

/* ---- PageHeader: mb-6 flex items-end justify-between ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end;
             justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.page-head .sub { margin-top: .125rem; font-size: .875rem; font-weight: 500; color: var(--muted); }
.page-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ---- stat tiles: rounded-2xl border bg-panel px-5 py-4 ---- */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
              gap: .75rem; margin-bottom: 1.5rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
        padding: 1rem 1.25rem; }
.stat .k { font-size: .75rem; font-weight: 700; text-transform: uppercase;
           letter-spacing: .04em; color: var(--muted); }
.stat .v { margin-top: .25rem; font-size: 1.5rem; font-weight: 800; }
.stat .v small { font-size: .875rem; font-weight: 600; color: var(--muted); }
.tone-good { color: var(--good); } .tone-warn { color: var(--warn); } .tone-bad { color: var(--bad); }

/* ---- panel: overflow-hidden rounded-2xl border bg-panel + tinted band ---- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
         overflow: hidden; margin-bottom: 1rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
              padding: .75rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: .875rem; font-weight: 800; }
.panel-head .meta { font-size: .8rem; font-weight: 600; color: var(--muted); }
.panel-body { padding: 1.25rem; }
.panel-body > :first-child { margin-top: 0; }
.panel-grid-2 { display: grid; gap: .75rem; }
@media (min-width: 1024px) { .panel-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---- tables: uppercase tracked heads, soft row lines, right-aligned nums ---- */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead tr { border-bottom: 1px solid var(--line-soft); }
th { text-align: left; font-size: .75rem; font-weight: 700; text-transform: uppercase;
     letter-spacing: .04em; color: var(--faint); padding: .625rem 1.25rem; }
td { padding: .625rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }
th.num, td.num { text-align: right; }
td.strong { font-weight: 600; }
.row-link { color: var(--primary); font-weight: 600; }
.table-scroll { max-height: 40rem; overflow: auto; }
.table-scroll th { position: sticky; top: 0; z-index: 1; background: var(--panel); }

/* ---- buttons: rounded-xl, bold, primary/panel/danger ---- */
.btn { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
       border-radius: .75rem; border: 1px solid var(--line); background: var(--panel);
       padding: .625rem 1rem; font-size: .875rem; font-weight: 700; color: var(--ink);
       font-family: inherit; transition: border-color .12s, background .12s, color .12s; }
.btn:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-good { background: var(--good); border-color: var(--good); color: #fff; }
.btn-danger-quiet { color: var(--muted); }
.btn-danger-quiet:hover { border-color: var(--bad); color: var(--bad); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; }

/* ---- segmented control (preset toggles) ---- */
.seg { display: inline-flex; overflow: hidden; border-radius: .75rem;
       border: 1px solid var(--line); background: var(--panel); }
.seg > button, .seg > a { padding: .625rem .875rem; font-size: .875rem; font-weight: 700;
       color: var(--muted); background: transparent; border: 0; cursor: pointer; font-family: inherit;
       transition: background .12s, color .12s; }
.seg > [data-on="true"] { background: var(--primary); color: var(--primary-ink); }

/* ---- pills / status ---- */
.pill { display: inline-block; border-radius: 999px; padding: .15rem .6rem;
        font-size: .75rem; font-weight: 700; background: var(--neutral-bg);
        color: var(--muted); white-space: nowrap; }
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad  { background: var(--bad-bg); color: var(--bad); }
.pill-primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* ---- notices: rounded-xl bg-*-bg px-4 py-2.5 text-sm font-semibold ---- */
.notice { border-radius: .75rem; padding: .625rem 1rem; font-size: .875rem; font-weight: 600;
          margin-bottom: 1rem; }
.notice-neutral { background: var(--neutral-bg); color: var(--muted); }
.notice-good { background: var(--good-bg); color: var(--good); }
.notice-warn { background: var(--warn-bg); color: var(--warn); }
.notice-bad  { background: var(--bad-bg); color: var(--bad); }

/* ---- forms ---- */
label { display: block; font-size: .8rem; font-weight: 700; margin: 1rem 0 .35rem; }
label .hint { font-weight: 500; color: var(--faint); }
input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: .75rem;
  background: var(--panel); color: var(--ink); padding: .6rem .8rem;
  font-size: .9rem; font-weight: 500; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--periwinkle);
  outline-offset: 0; border-color: var(--primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
.form-actions { margin-top: 1.5rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ---- score visuals ---- */
.score-big { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.score-big small { font-size: 1rem; color: var(--faint); font-weight: 600; }
.meterline { height: 8px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; margin-top: .5rem; }
.meterline > div { height: 100%; border-radius: 999px; }
.log { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: .75rem;
       padding: .8rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       font-size: .78rem; color: var(--muted); white-space: pre-wrap; max-height: 16rem; overflow-y: auto; }

/* ---- sign-in (sibling: max-w-md centered, big Google button rounded-2xl py-4 shadow-sm) ---- */
.auth-wrap { max-width: 28rem; margin: 0 auto; min-height: 70dvh; display: flex;
             flex-direction: column; justify-content: center; }
.auth-title { font-size: 1.5rem; font-weight: 800; margin: 1.5rem 0 0; letter-spacing: -.02em; }
.auth-sub { margin-top: .75rem; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.btn-google { display: flex; width: 100%; align-items: center; justify-content: center; gap: .75rem;
              border-radius: 1rem; border: 1px solid var(--line); background: var(--panel);
              padding: 1rem; font-size: 1.125rem; font-weight: 700; color: var(--ink);
              box-shadow: 0 1px 2px rgba(20,31,78,.06); cursor: pointer; font-family: inherit;
              transition: border-color .12s; }
.btn-google:hover { border-color: var(--primary); }
.footer-note { font-size: .78rem; color: var(--faint); margin-top: 2.5rem; }

/* =====================================================================
   Enterprise UX layer (docs/UX_CRITIQUE.md) — nav, states, a11y, utilities
   ===================================================================== */

/* ---- focus: visible ring on every interactive, keyboard-only ---- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: .5rem; }
.btn:focus-visible, .seg > *:focus-visible, .sidenav a:focus-visible, .topnav-m a:focus-visible { outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- app nav: persistent, sticky, active state ---- */
}

/* ---- breadcrumb ---- */
.crumbs { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--faint); margin-bottom: .5rem; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--primary); }
.crumbs .sep { opacity: .5; }

/* ---- empty state ---- */
.empty { text-align: center; padding: 3rem 1.5rem; }
.empty .glyph { width: 3rem; height: 3rem; border-radius: 1rem; background: var(--neutral-bg); margin: 0 auto 1rem;
                display: flex; align-items: center; justify-content: center; color: var(--primary); }
.empty h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; }
.empty p { margin: 0 auto 1.25rem; max-width: 28rem; font-size: .875rem; color: var(--muted); }

/* ---- skeleton loading ---- */
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.skeleton { display: block; height: .9rem; border-radius: .4rem;
            background: linear-gradient(90deg, var(--neutral-bg) 25%, var(--bg-2) 50%, var(--neutral-bg) 75%);
            background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---- stepper (run progress) ---- */
.stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; padding: 1rem 1.25rem; }
.step { display: flex; flex-direction: column; gap: .5rem; }
.step .bar { height: 4px; border-radius: 999px; background: var(--neutral-bg); }
.step .lbl { font-size: .72rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.step[data-state="done"] .bar { background: var(--good); }
.step[data-state="active"] .bar { background: var(--primary); animation: pulse 1.6s ease-in-out infinite; }
.step[data-state="active"] .lbl, .step[data-state="done"] .lbl { color: var(--ink); }
.step[data-state="failed"] .bar { background: var(--bad); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .step[data-state="active"] .bar { animation: none; } }
@media (max-width: 640px) { .stepper { grid-template-columns: repeat(3, 1fr); } }

/* ---- guided flow ---- */
.flow-steps { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.flow-step { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--faint); }
.flow-step .n { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
                font-size: .75rem; background: var(--neutral-bg); color: var(--muted); }
.flow-step[data-state="active"] { color: var(--ink); } .flow-step[data-state="active"] .n { background: var(--primary); color: var(--primary-ink); }
.flow-step[data-state="done"] .n { background: var(--good-bg); color: var(--good); }
.flow-step + .flow-step::before { content: ""; width: 1.5rem; height: 1px; background: var(--line); margin-right: .5rem; }
.selected-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                 border: 1px solid var(--line); border-radius: .9rem; padding: .85rem 1rem; background: var(--panel-2); }
.selected-card .t { font-weight: 700; } .selected-card .s { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.field-help { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
.field-error { font-size: .8rem; color: var(--bad); margin-top: .35rem; font-weight: 600; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); }
.review-list { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem 1rem; font-size: .875rem; }
.review-list dt { color: var(--muted); font-weight: 600; } .review-list dd { margin: 0; font-weight: 600; }

/* ---- modal ---- */
dialog.modal { border: 0; border-radius: 1rem; padding: 0; max-width: 32rem; width: calc(100% - 2rem);
               background: var(--panel); color: var(--ink); box-shadow: 0 24px 64px rgba(20,31,78,.22); }
dialog.modal::backdrop { background: rgba(20,31,78,.45); backdrop-filter: blur(2px); }
.modal-head { padding: 1.1rem 1.25rem .5rem; } .modal-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.modal-body { padding: .25rem 1.25rem 1rem; font-size: .9rem; color: var(--muted); }
.modal-body label.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .875rem; font-weight: 600;
                          color: var(--ink); margin: .75rem 0 0; cursor: pointer; }
.modal-body label.check input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: var(--primary); }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .75rem 1.25rem 1.1rem; border-top: 1px solid var(--line-soft); }

/* ---- filters / toolbar ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.toolbar input[type=search] { max-width: 20rem; border: 1px solid var(--line); border-radius: .75rem; padding: .55rem .8rem;
                              background: var(--panel); font: inherit; font-size: .875rem; }
.toolbar .count { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--muted); }
th[aria-sort] { cursor: pointer; user-select: none; } th[aria-sort]:hover { color: var(--ink); }
th[aria-sort="ascending"]::after { content: " ↑"; } th[aria-sort="descending"]::after { content: " ↓"; }

/* ---- utilities replacing inline styles ---- */
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .m-0 { margin: 0 !important; }
.w-full { width: 100%; } .center { justify-content: center; }
.maxw-46 { max-width: 46rem; } .maxw-md { max-width: 28rem; }
.text-right { text-align: right; } .nowrap { white-space: nowrap; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.row { display: flex; align-items: center; gap: .6rem; } .row-wrap { flex-wrap: wrap; }
.stat .v small.of { font-weight: 600; }
.badge-lock { font-size: .72rem; color: var(--faint); font-weight: 600; }
.pill-lg { font-size: .85rem; padding: .3rem .9rem; }
.contrast-fix th { color: var(--muted); }   /* 12px uppercase heads need > 4.5:1 */
th { color: var(--muted); }

/* ---- responsive refinements ---- */
@media (max-width: 640px) {
  .review-list { grid-template-columns: 1fr; gap: .15rem; }
  .review-list dt { margin-top: .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
  .review-list dd { overflow-wrap: anywhere; }
  .flow-step + .flow-step::before { display: none; }
  .flow-steps { gap: .75rem 1rem; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
}
.review-list dd { overflow-wrap: anywhere; }
/* score tiles: 3-up so the pillar + 5 components fill two even rows */
.grid-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 640px) { .grid-scores { grid-template-columns: repeat(2, 1fr); } }


/* ---- polish pass (UX_CRITIQUE closeout): no inline styles, AA contrast, 44px targets ---- */
/* contrast: 12px uppercase heads and captions use --muted (≥7:1), --faint reserved for ≥14px */
th, .stat .k, .form-note, .field-help, .footer-note { color: var(--muted); }
/* touch targets: table controls + segmented tabs meet 44px hit area */
.btn-sm { min-height: 2.25rem; }
.seg > button, .seg > a { min-height: 2.75rem; }
input.input-sm, input[type="text"].input-sm { width: 4.5rem; padding: .45rem .5rem; text-align: right; min-height: 2.25rem; }
.form-inline { display: inline-flex; gap: .4rem; margin: 0; align-items: center; }
/* footer: compact one-liner with methodology link */
.footer-note { margin-top: 3rem;
               padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: .78rem; }
.footer-note a { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
.footer-note a:hover { text-decoration: underline; }
/* utilities replacing inline styles */
.m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; } .mt-8 { margin-top: 2rem; } .mb-2 { margin-bottom: .5rem; }
.pt-0 { padding-top: 0 !important; }
.ta-right { text-align: right; } .nowrap { white-space: nowrap; }
.gap-4 { gap: 1rem; }
.w-38 { width: 38%; } .w-22 { width: 22%; } .w-18 { width: 18%; }
.strong-ink { font-weight: 600; color: var(--ink); }
.wordmark-lg { font-size: 1.35rem; }
.mark { flex-shrink: 0; }
.details-toggle > summary { cursor: pointer; margin: 0; }
.btn-block { width: 100%; justify-content: center; padding: .85rem; }
.table-scroll-sm { max-height: 22rem; }
.viewer-frame { display: block; width: 100%; height: 78vh; border: 0; background: var(--bg-2); }
.meterline > .fill-primary { background: var(--primary); } .meterline > .fill-bad { background: var(--bad); }
.meterline > .fill-good { background: var(--chart-good); } .meterline > .fill-warn { background: var(--chart-warn); }
.prose p, .prose ul { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.65; color: var(--muted); max-width: 64ch; }
.prose li { margin-bottom: .35rem; } .prose code { font-size: .85em; background: var(--bg-2); padding: .1rem .35rem; border-radius: .35rem; }
.prose > :last-child { margin-bottom: 0; }


/* ---- dashboard + proposals + pricing ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-2 > .panel { margin-bottom: 1rem; }
.align-start { align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.funnel li { display: grid; grid-template-columns: 7.5rem 1fr 3rem; align-items: center; gap: .75rem; font-size: .875rem; }
.funnel-k { font-weight: 600; color: var(--muted); }
.funnel-bar { height: .625rem; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; }
.funnel-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.funnel-v { text-align: right; font-weight: 800; }
.needs { list-style: none; margin: 0; padding: 0; }
.needs li { border-bottom: 1px solid var(--line-soft); } .needs li:last-child { border-bottom: 0; }
.needs a { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: .75rem; padding: .8rem 1.25rem; font-size: .875rem; font-weight: 600; }
.needs a:hover { background: var(--panel-2); }
.needs-n { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; border-radius: .6rem;
           background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); font-weight: 800; }
.needs-go { color: var(--faint); }
.empty-sm { padding: 1.5rem; } .empty-sm .glyph { font-size: 1.5rem; }
.stat-rec { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.pkg-pick { display: grid; grid-template-columns: auto 1fr auto; gap: .875rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--line);
            border-radius: .875rem; margin: 0 0 .625rem; cursor: pointer; font-weight: 500; }
.pkg-pick:has(input[type=checkbox]:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.pkg-pick-body { display: grid; gap: .15rem; } .pkg-pick-top { display: flex; justify-content: space-between; gap: 1rem; }
.pkg-pick-price { font-weight: 800; } .pkg-pick-tag { font-size: .8rem; color: var(--muted); }
.pkg-pick-rec { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.pkg-pick input[type=checkbox], .pkg-pick input[type=radio] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--primary); }
.grid-pkgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 860px) { .grid-pkgs { grid-template-columns: 1fr; } }
.pkg-edit { border: 1px solid var(--line); border-radius: .875rem; padding: .25rem 1rem 1rem; margin: 0; min-width: 0; }
.pkg-edit legend { font-size: .8rem; font-weight: 800; padding: 0 .35rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

/* ---- ManagerShell parity: persistent sidebar (desktop) / slim top bar + pill nav (mobile) ---- */
.app { min-height: 100dvh; }
.app-main { min-width: 0; flex: 1; }
.sidebar { display: none; }
.topbar-m { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line);
            background: color-mix(in srgb, var(--panel) 95%, transparent); backdrop-filter: blur(8px); }
.topbar-m-row { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem 0; }
.topbar-m .wordmark { font-size: 1rem; }
.topnav-m { display: flex; gap: .25rem; overflow-x: auto; padding: .5rem .75rem; scrollbar-width: none; }
.topnav-m a { white-space: nowrap; border-radius: 999px; padding: .375rem .875rem; font-size: .875rem; font-weight: 700; color: var(--muted); }
.topnav-m a:hover { background: var(--neutral-bg); }
.topnav-m a[data-on="true"] { background: var(--primary); color: var(--primary-ink); }
@media (min-width: 1024px) {
  .app { display: flex; }
  .topbar-m { display: none; }
  .sidebar { position: sticky; top: 0; height: 100dvh; width: 15rem; flex-shrink: 0; display: flex; flex-direction: column;
             border-right: 1px solid var(--line); background: var(--panel); padding: 1.25rem 1rem; }
  .sidebar-brand { padding: 0 .5rem; font-size: 1.125rem; }
  .sidenav { margin-top: 1.5rem; display: flex; flex: 1; flex-direction: column; gap: 1.25rem; overflow-y: auto; }
  .sidenav-label { margin: 0 0 .375rem; padding: 0 .75rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); }
  .sidenav-group { display: flex; flex-direction: column; gap: .125rem; }
  .sidenav a { display: flex; align-items: center; gap: .625rem; border-radius: .75rem; padding: .5rem .75rem; font-size: .875rem; font-weight: 700; color: var(--muted); }
  .sidenav a:hover { background: var(--neutral-bg); color: var(--ink); }
  .sidenav a[aria-current="page"] { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
  .sidenav .ico { font-size: 1rem; line-height: 1; opacity: .6; width: 1rem; text-align: center; }
  .sidenav a[aria-current="page"] .ico { opacity: 1; }
  .sidebar-foot { margin-top: 1rem; border-top: 1px solid var(--line); padding: .75rem .5rem 0; }
  .sidebar-foot .who { margin: 0; font-size: .75rem; font-weight: 600; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-foot .role { margin: .1rem 0 .35rem; font-size: .7rem; color: var(--faint); }
  .shell { padding-top: 2rem; }
}

/* Autocomplete dropdown (metro/city suggestions) — mirrors the resolve list */
.menu { display: flex; flex-direction: column; background: var(--panel);
        border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }
.menu-item { display: flex; align-items: center; gap: .5rem; width: 100%;
             padding: .5rem .75rem; text-align: left; font-family: inherit; font-size: .9rem;
             color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.menu-item + .menu-item { border-top: 1px solid var(--line-soft); }
.menu-item:hover, .menu-item:focus { background: var(--panel-2); color: var(--primary); outline: none; }
.menu-item .ti { color: var(--faint); }

/* Configure step — grouped sections + local-context sub-panel */
.cfg-legend { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
              color: var(--faint); margin: 0 0 .5rem; }
.cfg-context { border: 1px solid var(--line-soft); background: var(--panel-2);
               border-radius: 14px; padding: 16px 18px; }
.cfg-context .field-help b { color: var(--ink); }
.htmx-indicator { opacity: 0; font-weight: 600; color: var(--primary); transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }