/* ===========================================================================
   CSMC prototype design system
   Lifted from Moonshot/designs/design-language.html so spike prototypes look
   like the real product without anyone re-deciding colour or spacing.

   This is deliberately a SUBSET — the parts you need to make a screen look
   plausible in five minutes. If you need something that isn't here, write it
   inline in your prototype. Do not grow this file to be "complete"; the point
   is that nobody has to read it.
   =========================================================================== */

:root {
  /* Brand */
  --navy: #1b3a5b;
  --navy-deep: #102844;
  --navy-hover: #22466b;
  --bronze: #b08a46;
  --bronze-soft: #f6efe0;

  /* Text + surfaces */
  --ink: #1a2332;
  --muted: #5a6678;
  --faint: #9aa6b4;
  --line: #dfe4ea;
  --bg: #f4f6f9;
  --card: #ffffff;

  /* Status */
  --green: #2f8a5b;  --green-bg: #e7f4ed;
  --amber: #c77f00;  --amber-bg: #fbf1de;
  --red:   #c0392b;  --red-bg:   #fbeae8;
  --slate: #5a6b82;  --slate-bg: #eef1f5;
  --blue:  #2a6fb0;  --blue-bg:  #e8f1fa;

  /* Radii + elevation */
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-pill: 20px;
  --sh-1: 0 1px 2px rgba(16,40,68,.04);
  --sh-2: 0 4px 14px rgba(16,40,68,.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
}

/* ---- Layout -------------------------------------------------------------- */
.app       { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.sidebar   { background: var(--navy-deep); color: #aebfd2; padding: 26px 20px; }
.sidebar .brand   { color: #fff; font-weight: 700; letter-spacing: .05em; font-size: .9rem; }
.sidebar .brand b { color: var(--bronze); }
.sidebar .sub     { font-size: .66rem; color: #7e93ab; letter-spacing: .12em;
                    text-transform: uppercase; margin: 3px 0 22px; }
.sidebar a        { display: block; color: #aebfd2; font-size: .82rem; padding: 6px 10px;
                    border-radius: 6px; text-decoration: none; cursor: pointer; }
.sidebar a:hover,
.sidebar a.active { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .grp     { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
                    color: #647e9c; margin: 16px 0 4px 10px; }

.main   { padding: 32px 40px 80px; max-width: 1200px; }
.row    { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grid   { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Type ---------------------------------------------------------------- */
h1 { font-size: 1.7rem; color: var(--navy); margin: 0 0 4px; }
h2 { font-size: 1.25rem; color: var(--navy); margin: 32px 0 10px; }
h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.lede  { color: var(--muted); font-size: 1rem; max-width: 680px; }
.micro { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
         color: var(--muted); font-weight: 700; }
.num   { font-variant-numeric: tabular-nums; font-weight: 600; }
.small { font-size: .82rem; color: var(--muted); }

/* ---- Surfaces ------------------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
        box-shadow: var(--sh-1); padding: 22px; }
.card.accent { border-top: 3px solid var(--bronze); }

.kpi   { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
         padding: 16px 18px; box-shadow: var(--sh-1); }
.kpi .k { font-size: .74rem; color: var(--muted); }
.kpi .v { font-size: 1.7rem; font-weight: 700; margin-top: 5px; line-height: 1;
          font-variant-numeric: tabular-nums; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { border: none; border-radius: 8px; padding: 9px 16px; font-size: .84rem;
       font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
       gap: 7px; font-family: inherit; }
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-hover); }
.btn.go    { background: var(--green); color: #fff; }
.btn.warn  { background: #fff; color: var(--amber); border: 1px solid #e8c98f; }
.btn.ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Pills / tags -------------------------------------------------------- */
.pill { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
        display: inline-flex; align-items: center; gap: 5px; }
.pill .d { width: 7px; height: 7px; border-radius: 50%; }
.pill.ok   { background: var(--green-bg); color: var(--green); } .pill.ok .d   { background: var(--green); }
.pill.flag { background: var(--amber-bg); color: var(--amber); } .pill.flag .d { background: var(--amber); }
.pill.prob { background: var(--red-bg);   color: var(--red);   } .pill.prob .d { background: var(--red); }
.pill.proc { background: var(--slate-bg); color: var(--slate); } .pill.proc .d { background: var(--slate); }

.typetag { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 5px;
           background: var(--blue-bg); color: var(--blue); }
.autotag { font-size: .64rem; font-weight: 700; color: var(--bronze); background: var(--bronze-soft);
           padding: 1px 6px; border-radius: 4px; letter-spacing: .04em; text-transform: uppercase; }

/* ---- Tables -------------------------------------------------------------- */
table.t { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 10px 0; }
table.t th { background: #fafbfc; text-align: left; font-size: .68rem; letter-spacing: .05em;
             text-transform: uppercase; color: var(--muted); padding: 10px 12px;
             border-bottom: 1px solid var(--line); }
table.t td { padding: 11px 12px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
table.t tr:last-child td { border-bottom: none; }
table.t td.n, table.t th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.t tbody tr:hover { background: #fafbfc; }

/* ---- Forms --------------------------------------------------------------- */
label { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: .9rem; color: var(--ink); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.field { margin-bottom: 14px; }

/* ---- Confidence bar (AI-derived values) ---------------------------------- */
.conf { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.bar  { width: 54px; height: 6px; border-radius: 3px; background: #e3e8ee; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); }

/* ---- Alpine cloak -------------------------------------------------------- */
[x-cloak] { display: none !important; }