/* portal-app.css — the ONE swappable stylesheet for the self-serve surfaces.
 *
 * docs/SPEC_SELF_SERVE.md UI doctrine (owner ruling 08-09): Adam's real UX
 * arrives later and swaps in by replacing THIS file (+ the templates). Nothing
 * here is generated; no view emits inline styles. The placeholder skin reuses
 * the design language of report/portal-reference.html — same tokens, so it
 * looks native next to the report. NEVER derived from the branded file. */

:root {
  --ink:#0A1628;
  --ink-soft:#132038;
  --cyan:#00C8E0;
  --azure:#0066F0;
  --gradient: linear-gradient(90deg, var(--azure), var(--cyan));
  --graphite:#2A2F3A;
  --steel:#6B7280;
  --paper:#F5F2EC;
  --white:#FFFFFF;
  --signal:#FF5B2E;
  --healthy:#10B981;
  --watch:#F59E0B;

  --line: rgba(10,22,40,.12);
  --line-soft: rgba(10,22,40,.07);
  --shadow-sm: 0 1px 2px rgba(10,22,40,.05);
  --shadow-md: 0 4px 16px rgba(10,22,40,.08);
  --r-sm:8px; --r-md:12px; --r-pill:999px;

  --font-display:'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body:'Instrument Sans', 'Segoe UI', sans-serif;
  --font-serif:'Instrument Serif', Georgia, serif;
  --font-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body {
  margin:0; font-family:var(--font-body); background:var(--paper);
  color:var(--graphite); font-size:14px; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a { color:var(--azure); }
::selection { background:rgba(0,200,224,.25); }

/* ---- top bar ---- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--ink); color:var(--paper);
}
.brand { display:flex; align-items:center; gap:10px; }
.brand .mark { color:var(--cyan); font-size:14px; }
.brand .word { font-family:var(--font-display); font-size:15.5px; letter-spacing:.2px; }
.brand .word b { font-weight:800; }
.topbar .who { font-family:var(--font-mono); font-size:11px; color:rgba(245,242,236,.6); margin-right:14px; }
.toplink { color:rgba(0,200,224,.9); text-decoration:none; font-size:12px; }
.toplink:hover { color:var(--white); }

/* ---- layout ---- */
.wrap { flex:1; width:100%; max-width:860px; margin:0 auto; padding:32px 22px; }
.foot { text-align:center; color:var(--steel); font-size:11px; padding:18px; }

.card {
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);
  padding:26px 30px; box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.card.centered { max-width:460px; margin:6vh auto 0; text-align:center; }

.crumb {
  font-family:var(--font-mono); font-size:10.5px; color:var(--steel);
  letter-spacing:1.2px; text-transform:uppercase; margin:0 0 8px;
}
h1 {
  font-family:var(--font-display); font-weight:800; font-size:26px;
  margin:0 0 4px; color:var(--ink); letter-spacing:-.2px;
}
.verdict { font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--ink); margin:8px 0 22px; }
.message { font-size:15px; color:var(--ink); margin:14px 0 22px; line-height:1.5; }

.anno {
  border-left:3px solid var(--azure); background:rgba(0,102,240,.06);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:11px 14px; font-size:12.5px;
  color:var(--graphite); margin:16px 0; line-height:1.5; text-align:left;
}
.anno.warn { border-left-color:var(--signal); background:rgba(255,91,46,.07); }
.fineprint { font-size:11px; color:var(--steel); margin-top:16px; line-height:1.5; }

/* ---- buttons ---- */
.btn {
  display:inline-block; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--white); color:var(--ink); font:inherit; font-size:13px;
  font-weight:600; padding:11px 20px; text-decoration:none; cursor:pointer;
  transition:box-shadow .12s ease, transform .12s ease;
}
.btn:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn.primary { background:var(--gradient); color:var(--white); border:0; box-shadow:var(--shadow-sm); }
.sso-list { display:flex; flex-direction:column; gap:10px; margin:20px 0 6px; }
.btn.sso { width:100%; }

/* ---- portal home: products area ---- */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; margin-top:18px; }
.product-card {
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);
  padding:18px; box-shadow:var(--shadow-sm); color:var(--ink);
  transition:box-shadow .12s ease, transform .12s ease;
}
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.product-card .product-name { font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); }
.product-card .product-tagline { font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--graphite); }
.product-card .product-status { font-family:var(--font-mono); font-size:11px; color:var(--steel); margin-top:2px; }
.product-card .product-open { font-family:var(--font-mono); font-size:11px; color:var(--azure); margin-top:6px; }
.backlink { margin-top:20px; }

/* ---- dashboard ---- */
.kpi-row { display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 22px; }
.box {
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--white);
  padding:16px; box-shadow:var(--shadow-sm);
}
.kpi { flex:1; min-width:180px; }
.kpi .lbl {
  display:block; font-family:var(--font-mono); font-size:10px; color:var(--steel);
  text-transform:uppercase; letter-spacing:.6px;
}
.kpi .val { display:block; font-family:var(--font-mono); font-size:20px; font-weight:600; color:var(--ink); margin-top:6px; }

table { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:8px; }
th, td { border-bottom:1px solid var(--line-soft); padding:11px 12px; text-align:left; font-size:12.5px; }
th { background:var(--paper); font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--steel); font-weight:600; border-bottom:1px solid var(--line); }

/* ---- agreement ---- */
.agreement-body { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); padding:16px 18px; margin:14px 0 18px; max-height:44vh; overflow-y:auto; line-height:1.55; font-size:13px; }
.agreement-body p { margin:0 0 10px; }
.accept-form { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.check { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink); }
.check input { margin-top:2px; }

@media (max-width:560px) {
  .card { padding:20px 18px; }
  .kpi-row { flex-direction:column; }
}