/* ============================================================================
   Emeriti Solutions — DAR Client Portal (external)
   Brand tokens mirror the internal console (site/dar/static/style.css):
   navy/blue + Cinzel (display) / IBM Plex Sans (UI) / IBM Plex Mono (mono).
   NO gold — gold belongs to Emeriti Law, the separate sister entity.

   NOTE: this scaffold uses Cinzel/IBM Plex via system fallbacks. At deploy,
   vendor the brand woff2 files into this Pages project (or @font-face them)
   exactly as the internal console does, to match the wordmark precisely.
   ========================================================================== */

:root {
  --navy-900:#0f1422; --navy-800:#1a2033; --navy-700:#252c40; --navy-600:#323a52;
  --blue-700:#1f4ea8; --blue-600:#2f6fd6; --blue-600-hover:#27529e;
  --blue-500:#5f93e6; --blue-300:#8fb4ee; --blue-200:#cfe0ff;
  --blue-100:#e8f0fe; --blue-050:#f3f7fe;
  --ink-900:#161c28; --ink-800:#26303f; --ink-700:#3a4252; --ink-500:#6b7486;
  --ink-400:#8b93a3; --ink-300:#aab1bf; --ink-200:#cdd3dd;
  --line:#e8ebf1; --line-soft:#eef1f6;
  --paper:#ffffff; --bg:#f6f8fb;
  --error:#c0392f; --error-bg:#fbe9e7; --error-border:#f0c2bc;
  /* navy/blue "warn" accents (NO gold) — pills, callouts */
  --warn-bg:#e8f0fe; --warn-fg:#1f4ea8; --warn-border:#bcd2f2; --warn-accent:#2f6fd6;
  --shadow-sm:0 1px 2px rgba(22,28,40,.06), 0 1px 1px rgba(22,28,40,.04);
  --shadow-md:0 2px 6px rgba(22,28,40,.08), 0 1px 2px rgba(22,28,40,.05);
  --shadow-focus:0 0 0 3px rgba(47,111,214,.32);
  --r:12px; --r-lg:16px; --r-sm:6px;

  /* Cinzel is the brand display face; fall back to a serif until the woff2
     is vendored into this project at deploy. */
  --display:'Cinzel', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; }
body {
  font-family:var(--sans); color:var(--ink-900); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}
::selection { background:var(--blue-200); }

/* ---- top bar ---- */
.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:20px;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:0 26px; height:60px; flex:0 0 auto;
}
.brand { display:flex; align-items:center; gap:11px; cursor:pointer; text-decoration:none; }
.brand-mark { width:34px; height:auto; display:block; }
.brand-name {
  font-family:var(--display); font-weight:600; font-size:16px;
  letter-spacing:.14em; color:var(--navy-900); white-space:nowrap; line-height:1;
}
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.pill {
  font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.pill-warn { background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-border); }

/* ---- main / layout ---- */
.main { flex:1 1 auto; }
.wrap { max-width:980px; margin:0 auto; padding:0 28px; }
.section-pad { padding-top:30px; }
.muted { color:var(--ink-500); font-size:14px; padding:8px 0; }
.is-error { color:var(--error); font-size:14px; }

/* ---- hero ---- */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 360px at 78% -40%, rgba(47,111,214,.18), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff; padding:60px 0 64px; border-bottom:3px solid var(--blue-600);
}
.hero .wrap { position:relative; }
.hero-eyebrow {
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--blue-500); font-weight:600; margin-bottom:12px;
}
.hero-title {
  font-family:var(--serif); font-weight:600; font-size:40px; line-height:1.08;
  margin:0 0 14px; letter-spacing:.3px; max-width:680px;
}
.hero-sub { font-size:15.5px; line-height:1.6; color:#aebbcf; max-width:600px; margin:0 0 26px; }
.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-note { font-size:13px; color:#8aa0c2; margin:18px 0 0; max-width:560px; }

/* ---- buttons ---- */
.btn { font-family:var(--sans); border:none; cursor:pointer; border-radius:var(--r-sm);
  background:var(--line-soft); color:var(--navy-900); font-size:14px;
  transition:background .12s, transform .05s; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--blue-600); color:#fff; padding:12px 24px; font-weight:600;
  box-shadow:0 1px 2px rgba(47,111,214,.4); }
.btn-primary:hover:not(:disabled) { background:var(--blue-600-hover); }
.btn-ghost { background:transparent; color:#cfe0ff; border:1px solid rgba(207,224,255,.4);
  padding:11px 18px; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; }
.btn-ghost:hover { background:rgba(207,224,255,.1); }
.btn-sm { padding:6px 12px; font-size:12.5px; }
.topbar-right .btn-ghost { color:var(--ink-700); border-color:var(--line); }
.topbar-right .btn-ghost:hover { background:var(--line-soft); }

/* ---- section heading ---- */
.section-head { display:flex; align-items:baseline; gap:12px; margin:40px 0 16px; }
.section-head h2 {
  font-family:var(--serif); font-weight:600; font-size:21px; color:var(--ink-900); margin:0;
}
.section-rule { height:1px; background:var(--line); flex:1 1 auto; align-self:center; }
.view-lead { font-size:13.5px; color:var(--ink-700); margin:-4px 0 18px; max-width:680px; line-height:1.55; }

/* ---- how it works ---- */
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.step { background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 20px; box-shadow:var(--shadow-sm); }
.step-n { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:500; font-size:14px; color:#fff;
  background:linear-gradient(135deg,var(--navy-600),var(--blue-600)); margin-bottom:11px; }
.step-t { font-weight:600; font-size:14.5px; color:var(--ink-900); margin-bottom:5px; }
.step-d { font-size:13px; line-height:1.55; color:var(--ink-700); }

/* ---- callout (mock-only note) ---- */
.callout { margin-top:18px; padding:18px 20px; border-radius:var(--r);
  background:var(--warn-bg); border:1px solid var(--warn-border);
  border-left:3px solid var(--warn-accent); }
.callout-title { font-weight:700; color:var(--warn-fg); font-size:13px; letter-spacing:.3px;
  text-transform:uppercase; margin-bottom:6px; }
.callout p { margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-700); }

/* ---- callback / sign-in status ---- */
.cb-status { font-size:15px; color:var(--ink-700); padding:40px 0; }
.cb-status.is-error { color:var(--error); }

/* ---- hearings list ---- */
.hearings-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.hearing-card { position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow .14s, transform .14s, border-color .14s; }
.hearing-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--blue-600); opacity:0; transition:opacity .14s; }
.hearing-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--ink-200); }
.hearing-card:hover::before { opacity:1; }
.hearing-name { font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink-900); line-height:1.2; }
.hearing-meta { font-family:var(--mono); font-size:12px; color:var(--ink-500); margin:6px 0 14px; }
.hearing-link { font-size:13.5px; color:var(--blue-600); font-weight:600; text-decoration:none; }
.hearing-link:hover { color:var(--blue-700); text-decoration:underline; }
.hearing-link[aria-disabled="true"] { color:var(--ink-300); cursor:default; }
.hearing-link[aria-disabled="true"]:hover { text-decoration:none; }

/* ---- page footer ---- */
.pagefoot { max-width:980px; margin:48px auto 0; padding:14px 28px 26px;
  border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-400);
  font-family:var(--mono); letter-spacing:.2px; }
.pagefoot-entity { font-family:var(--sans); font-size:12px; color:var(--ink-700);
  letter-spacing:0; margin-bottom:6px; }
.pagefoot-entity strong { color:var(--navy-900); font-weight:600; }

/* ---- phones ---- */
@media (max-width: 720px) {
  .wrap { padding:0 16px; }
  .topbar { padding:0 14px; gap:10px; height:54px; }
  .brand { gap:8px; }
  .brand-mark { width:26px; }
  .brand-name { font-size:12.5px; letter-spacing:.12em; }
  .hero { padding:36px 0 40px; }
  .hero-title { font-size:28px; }
  .hero-sub { font-size:14px; }
  .section-head h2 { font-size:19px; }
  .pagefoot { padding:12px 16px 22px; font-size:10.5px; }
}

/* ==========================================================================
   Dashboard + viewer additions (account, hearings, submit, transcript)
   Same navy/blue brand tokens. NO gold. Role accents are blue/red/teal/indigo.
   ========================================================================== */

/* role accent colors (speaker labels, turn borders, legend dots) */
:root {
  --role-ij:#1f4ea8; --role-dhs:#9a3b34; --role-rcounsel:#1f7a6b;
  --role-respondent:#5b4bb0; --role-interpreter:#6b7486; --role-other:#3a4252;
}

/* topbar identity */
.signed-as { font-size:12.5px; color:var(--ink-500); }
.signed-as strong { color:var(--ink-800); font-weight:600; }

/* banners */
.banner { border-radius:var(--r-sm); padding:10px 14px; font-size:13.5px; margin:14px 0; line-height:1.5; }
.banner-error { background:var(--error-bg); border:1px solid var(--error-border); color:var(--error); }
.banner-ok { background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-fg); }

/* ---- account panel ---- */
.account-panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:22px 24px; margin:8px 0 8px; }
.acct-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.acct-firm { font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink-900); line-height:1.15; }
.acct-sub { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.plan-badge { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg,var(--navy-600),var(--blue-600)); padding:4px 11px; border-radius:999px; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-ok { background:#1f9d63; } .status-warn { background:#c98a14; } .status-err { background:var(--error); }
.acct-status-text { font-size:12.5px; color:var(--ink-600,#4a5366); text-transform:capitalize; font-weight:600; }
.acct-note { font-size:12px; color:var(--ink-500); }

.acct-metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin-top:20px; }
.metric { background:var(--blue-050); border:1px solid var(--line-soft); border-radius:var(--r); padding:14px 16px; }
.metric-label { font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-500); font-weight:600; }
.metric-value { margin:6px 0 2px; }
.metric-num { font-family:var(--serif); font-size:28px; font-weight:600; color:var(--ink-900); }
.metric-of { font-size:16px; color:var(--ink-400); }
.metric-date { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink-900); }
.meter { height:7px; border-radius:999px; background:var(--blue-100); overflow:hidden; margin:9px 0 8px; }
.meter-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue-500),var(--blue-600)); transition:width .3s; }
.meter-fill.meter-hot { background:linear-gradient(90deg,#e0883a,var(--error)); }
.metric-foot { font-size:11.5px; color:var(--ink-500); line-height:1.45; }

/* ---- team logins ---- */
.members { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:10px; margin-bottom:8px; }
.member { display:flex; align-items:center; gap:11px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:11px 13px; box-shadow:var(--shadow-sm); }
.member-open { border-style:dashed; box-shadow:none; background:transparent; }
.avatar { width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12.5px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-600)); }
.avatar-open { background:transparent; color:var(--ink-300); border:1px dashed var(--ink-200); font-size:18px; }
.member-meta { min-width:0; flex:1 1 auto; }
.member-name { font-size:13.5px; font-weight:600; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-role { font-size:11.5px; color:var(--ink-500); }
.member-badge { display:inline-block; margin-top:4px; font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--blue-700); background:var(--blue-050); border:1px solid var(--line-soft); border-radius:999px; padding:2px 7px; }
.member-edit { flex:0 0 auto; align-self:center; background:none; border:none; cursor:pointer; font-size:11.5px; font-weight:600;
  color:var(--blue-600); padding:4px 7px; border-radius:6px; opacity:.6; transition:opacity .12s, background .12s; }
.member-edit:hover { opacity:1; background:var(--blue-050); }

/* ---- section head with right-aligned action ---- */
.section-head-actions .btn { margin-left:6px; }

/* ---- hearing card extras ---- */
.hearings-list { grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
.hearing-tags { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 14px; }
.tag { font-size:11px; color:var(--blue-700); background:var(--blue-100); border:1px solid var(--warn-border);
  border-radius:999px; padding:2px 9px; font-weight:600; }
.tag-soft { color:var(--ink-600,#4a5366); background:var(--line-soft); border-color:var(--line); font-weight:500; }
.hearing-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.hearing-card { display:flex; flex-direction:column; }
.access { font-family:var(--mono); font-size:11px; color:var(--ink-500); }
.access-soon { color:#b06a12; font-weight:600; }
.hearing-link.is-pending { color:var(--ink-400); font-weight:500; }
.stag { position:absolute; top:12px; right:12px; font-size:10px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.stag-ok { background:#e7f6ee; color:#1f7a4d; border:1px solid #bfe6cf; }
.stag-pend { background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-border); }
.stag-err { background:var(--error-bg); color:var(--error); border:1px solid var(--error-border); }

/* ---- modal ---- */
body.modal-open { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-scrim { position:absolute; inset:0; background:rgba(15,20,34,.55); backdrop-filter:blur(2px); }
.modal-card { position:relative; width:100%; max-width:480px; background:var(--paper); border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(15,20,34,.35); overflow:hidden; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px;
  border-bottom:1px solid var(--line); }
.modal-head h3 { margin:0; font-family:var(--serif); font-size:18px; color:var(--ink-900); }
.modal-x { border:none; background:transparent; font-size:24px; line-height:1; color:var(--ink-400); cursor:pointer; padding:0 4px; }
.modal-x:hover { color:var(--ink-700); }
.modal-body { padding:20px 22px; }
.modal-lead { font-size:13.5px; color:var(--ink-700); line-height:1.55; margin:0 0 16px; }
.field-label { display:block; font-size:12px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
  color:var(--ink-500); margin-bottom:7px; }
.text-input { display:block; width:100%; box-sizing:border-box; border:1.5px solid var(--ink-200); border-radius:var(--r);
  padding:11px 13px; font-size:14px; color:var(--ink-700); margin-bottom:16px; transition:border-color .12s; }
.text-input:focus { outline:none; border-color:var(--blue-500); }
.filepick { display:flex; align-items:center; gap:10px; border:1.5px dashed var(--ink-200); border-radius:var(--r);
  padding:14px 16px; cursor:pointer; color:var(--ink-700); font-size:13.5px; transition:border-color .12s, background .12s; }
.filepick:hover { border-color:var(--blue-500); background:var(--blue-050); }
.filepick-icon { font-size:16px; color:var(--blue-600); }
.field-hint { font-size:12px; color:var(--ink-500); margin:8px 0 16px; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--ink-700);
  background:var(--blue-050); border:1px solid var(--line-soft); border-radius:var(--r); padding:12px 14px; }
.consent input { margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--blue-600); }
.consent-placeholder { color:var(--blue-700); font-weight:600; }
.consent-note { display:block; font-size:11.5px; color:var(--ink-500); margin-top:3px; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line);
  background:var(--bg); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---- viewer: caption ---- */
.v-caption { background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--blue-600);
  border-radius:var(--r); padding:18px 22px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
.cap-court { font-size:11.5px; letter-spacing:.3px; color:var(--ink-500); text-transform:uppercase; font-weight:600; }
.cap-matter { font-family:var(--serif); font-size:23px; font-weight:600; color:var(--ink-900); margin:7px 0 8px; line-height:1.15; }
.cap-line { font-size:13.5px; color:var(--ink-700); }
.cap-sub { font-family:var(--mono); font-size:12px; color:var(--ink-500); margin-top:5px; }

/* ---- viewer: audio + downloads bar ---- */
.v-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  background:var(--navy-900); border-radius:var(--r); padding:14px 18px; margin-bottom:16px; }
.v-audio-wrap { flex:1 1 320px; min-width:260px; }
.v-audio { width:100%; height:38px; }
.v-audio-hint { font-size:11.5px; color:#8aa0c2; margin-top:6px; }
.v-downloads { display:flex; gap:8px; flex-wrap:wrap; }
.v-downloads .btn-ghost { color:#cfe0ff; border-color:rgba(207,224,255,.4); }
.v-downloads .btn-ghost:hover { background:rgba(207,224,255,.12); }

/* ---- viewer: legend ---- */
.legend { display:flex; flex-wrap:wrap; gap:14px; margin:0 2px 18px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-600,#4a5366); }
.legend-dot { width:9px; height:9px; border-radius:50%; background:var(--role-other); }
.legend-item.turn-ij .legend-dot { background:var(--role-ij); }
.legend-item.turn-dhs .legend-dot { background:var(--role-dhs); }
.legend-item.turn-rcounsel .legend-dot { background:var(--role-rcounsel); }
.legend-item.turn-respondent .legend-dot { background:var(--role-respondent); }
.legend-item.turn-interpreter .legend-dot { background:var(--role-interpreter); }

/* ---- viewer: transcript body ---- */
.v-body { background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:8px 22px 22px; }
.t-section-head { display:flex; align-items:center; gap:12px; margin:24px 0 10px; }
.t-section-title { font-family:var(--serif); font-weight:600; font-size:15px; color:var(--navy-800);
  text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; }
.turn { display:flex; gap:14px; padding:9px 10px; border-radius:var(--r-sm); border-left:3px solid transparent;
  scroll-margin-top:80px; transition:background .15s; }
.turn:hover { background:var(--blue-050); }
.turn-active { background:var(--blue-100); border-left-color:var(--blue-600); }
.turn-ts { flex:0 0 64px; font-family:var(--mono); font-size:11.5px; color:var(--blue-600); background:transparent;
  border:none; cursor:pointer; padding:1px 0; text-align:left; align-self:flex-start; }
.turn-ts:hover { color:var(--blue-700); text-decoration:underline; }
.turn-body { flex:1 1 auto; min-width:0; }
.turn-speaker { display:block; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--role-other); margin-bottom:2px; }
.turn-text { font-size:14.5px; line-height:1.6; color:var(--ink-800); }
.turn-ij { border-left-color:rgba(31,78,168,.25); } .turn-ij .turn-speaker { color:var(--role-ij); }
.turn-dhs { border-left-color:rgba(154,59,52,.25); } .turn-dhs .turn-speaker { color:var(--role-dhs); }
.turn-rcounsel { border-left-color:rgba(31,122,107,.25); } .turn-rcounsel .turn-speaker { color:var(--role-rcounsel); }
.turn-respondent { border-left-color:rgba(91,75,176,.25); } .turn-respondent .turn-speaker { color:var(--role-respondent); }
.turn-interpreter { border-left-color:rgba(107,116,134,.3); } .turn-interpreter .turn-speaker { color:var(--role-interpreter); }
.marker { font-family:var(--mono); font-size:12.5px; color:var(--ink-500); background:var(--line-soft);
  border-radius:4px; padding:0 5px; }

/* ---- responsive: dashboard + viewer ---- */
@media (max-width: 720px) {
  .acct-firm { font-size:19px; }
  .signed-as { display:none; }
  .turn { gap:9px; padding:8px 6px; }
  .turn-ts { flex-basis:54px; }
  .turn-text { font-size:14px; }
  .section-head-actions { flex-wrap:wrap; }
  .v-bar { flex-direction:column; align-items:stretch; }
}