/* ============================================================
   PASSAGE by Khoshà — onboard.css
   The invitation modal, the Onboarding worklist, the per-dossier
   "Awaiting client" banner and the teaching empty states.
   Reuses the house tokens/vocabulary (--gold, --ink, .btn, .chip,
   .pill, .panel, .fld, .m-*, .empty) — no new colours.
   ============================================================ */

/* ---------- invitation modal ---------- */
.ob-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ob-chip-fixed{display:inline-flex;align-items:center;gap:6px;cursor:default}
.ob-chip-fixed svg{width:13px;height:13px}
.ob-optional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-faint);font-size:10.5px;margin-left:4px}

.ob-preview{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft);
  background:var(--bone);border-radius:12px;padding:10px 14px;margin:2px 0 14px}
.ob-preview svg{width:15px;height:15px;color:var(--gold-deep);flex:0 0 15px}
.ob-preview b{color:var(--ink);font-weight:700}

.ob-error{background:rgba(140,59,46,.08);color:var(--red);border-radius:12px;padding:10px 14px;
  font-size:12.5px;line-height:1.5;margin-bottom:12px}
.ob-error[hidden]{display:none}

.ob-manual{margin:0 0 6px;text-align:center}
.ob-manual a{font-size:12.5px;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.ob-manual a:hover{color:var(--gold-deep)}

.ob-busy{opacity:.55;pointer-events:none;transition:opacity .2s}
.obl-acts .btn:disabled,
.ob-banner-actions .btn:disabled,
.m-foot .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.ob-linkbox{display:flex;gap:8px;margin:8px 0 4px}
.ob-linkbox input{flex:1;min-width:0;border:1px solid var(--stroke);border-radius:12px;padding:9px 13px;
  background:var(--bone);font-size:16px;color:var(--ink-soft);font-family:var(--body)}
.ob-note{font-size:12.5px;color:var(--ink-faint);background:var(--bone);border-radius:12px;padding:11px 14px;margin:8px 0 4px;line-height:1.5}

/* ---------- teaching empty states ---------- */
.ob-empty .btn{margin-top:16px}

/* ---------- dossier banner ---------- */
.ob-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:rgba(169,130,76,.10);border:1px solid rgba(169,130,76,.28);border-radius:var(--r-md);
  padding:12px 16px;margin-bottom:14px}
.ob-banner-txt{font-size:13px;color:var(--gold-deep);line-height:1.5}
.ob-banner-txt b{font-weight:700}
.ob-banner-actions{display:flex;gap:8px;flex:0 0 auto}

/* ---------- Onboarding worklist ----------
   The list itself is ListView (listview.css owns the toolbar, table, cards,
   and phone layout). These rules only add what this page has on top: the
   hero, the state tiles, and the cells the table and cards share. */
.ob-livenote{display:inline-block;font-size:12px;color:var(--ink-faint);background:var(--bone);
  border-radius:10px;padding:7px 13px;margin:0 8px 14px 0}

.obl-hero{padding-bottom:12px}
.obl-hero h1{font-size:26px}

/* State tiles — the dashboard's .kpi, as buttons that filter the list. */
.kpis.obl-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.obl-kpi{font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;
  padding:14px 16px;border-radius:var(--r-lg)}
.obl-kpi .k-num,.obl-kpi .k-lbl,.obl-kpi .k-sub{display:block}
.obl-kpi .k-num{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.obl-kpi .k-lbl{display:flex;align-items:center;gap:7px;font-size:11.5px;margin-top:4px;color:var(--ink)}
.obl-kpi .k-sub{font-size:11.5px;color:var(--ink-faint);margin-top:4px;line-height:1.35}
.obl-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--ink-faint)}
.obl-stalled  .obl-dot{background:#A4501A}
.obl-invited  .obl-dot{background:var(--gold-deep)}
.obl-progress .obl-dot{background:#2B4469}
.obl-notSent  .obl-dot{background:var(--ink-faint)}
.obl-complete .obl-dot{background:var(--green)}
.obl-stalled:not(.zero) .k-num{color:#A4501A}
.obl-kpi.zero .k-num{color:var(--ink-faint)}
.obl-kpi:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* The tile that is filtering the list has to look pressed, or a list that is
   hiding people looks like a list that has none. */
.obl-kpi.on{border-color:var(--gold);background:rgba(169,130,76,.10);box-shadow:0 0 0 1px var(--gold) inset}

/* Person cell */
.obl-who{display:flex;align-items:center;gap:10px;min-width:0}
.obl-who-id{min-width:0}
.obl-who-id .t-sub{overflow-wrap:anywhere}
.obl-nw{white-space:nowrap}

/* Progress: one bar (details + documents together) and the two counts */
.obl-prog{min-width:128px}
.obl-prog-bar{height:6px;background:var(--bone-2);border-radius:99px;overflow:hidden}
.obl-prog-bar span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold-deep))}
.obl-prog-txt{font-size:11.5px;color:var(--ink-faint);margin-top:5px;white-space:nowrap}
.obl-prog-txt b{color:var(--ink-soft);font-weight:700}

.obl-chase{font-size:12.5px;white-space:nowrap}
.obl-chase.muted{color:var(--ink-faint)}
.obl-chase.warn{color:#A4501A;font-weight:600}
/* .obl + .lv-link: listview.css loads after this file and its .lv-link sets
   `font: inherit`, so the size needs the extra class to stick. */
.obl .lv-link.obl-chase-sw{display:block;margin-top:3px;font-size:11.5px;color:var(--gold-deep);white-space:nowrap}
.obl .obl-c-line .lv-link.obl-chase-sw{display:inline;margin:0 0 0 8px}
.obl .lv-tbl .obl-acts{flex-wrap:nowrap}

.obl-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.obl-acts .btn{white-space:nowrap}
.lv-tbl td:last-child .obl-acts{min-width:150px}

/* Card (grid view) */
.obl-c-prog{margin-top:14px;min-height:30px}
.obl-c-prog > .muted{display:block;font-size:12px;padding-top:6px}
.obl-c-facts{margin-top:10px}
.obl-c-line{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;font-size:12px;
  line-height:1.45;color:var(--ink-soft);margin-top:3px}
.obl-c-line .k{color:var(--ink-faint)}
.obl-c-line .v{min-width:0;overflow-wrap:anywhere}
.obl-c-line .v.obl-chase{white-space:normal}
.obl-c-foot{margin-top:auto;padding-top:12px}
.obl-c-foot .obl-acts{justify-content:flex-start;padding-top:12px;border-top:1px solid var(--stroke-soft)}
.obl .lv-card{gap:0}

/* ---------- mobile ---------- */
@media (max-width:1180px){
  .kpis.obl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ob-linkbox{flex-direction:column}
  .ob-linkbox button{width:100%}
  .obl-hero h1{font-size:22px}
  /* styles.css forces every .kpis to two columns on a phone; five tiles in
     two columns is three rows of scrolling before the list. Three compact
     columns, no sub-line. */
  .kpis.obl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .obl-kpi{padding:10px 11px}
  .obl-kpi .k-num{font-size:20px}
  .obl-kpi .k-lbl{font-size:10px;letter-spacing:.03em;gap:5px}
  .obl-kpi .k-sub{display:none}
  /* In the phone's card-table every cell is a label/value pair; let the
     value side take the room it needs. */
  .obl .tbl.cardable td .obl-acts{justify-content:flex-end;min-width:0}
  .obl .tbl.cardable td .obl-prog{min-width:0;text-align:right}
  .obl .tbl.cardable td .obl-who{justify-content:flex-end;text-align:right}
  .obl .tbl.cardable td .obl-who .lv-c-ava{display:none}
}
@media (max-width:420px){
  .obl-c-foot .obl-acts .btn{flex:1 1 auto;text-align:center}
}