/* psyc-tokens.css
 * Augments cockpit.css. Drop in after it:
 *   <link rel="stylesheet" href="cockpit.css">
 *   <link rel="stylesheet" href="psyc-tokens.css">
 *
 * Dark theme only. Monospace stack inherited from cockpit.css.
 * All text-bearing tokens below hit WCAG AA (>=4.5:1) on --panel (#161a22).
 */

:root {
  /* ---- Navy scale (anchored on cockpit bg/panel/border) ---- */
  --navy-50:  #d8dee9;   /* body text (12.9:1)                 */
  --navy-100: #aeb6c4;   /* secondary text (7.7:1)             */
  --navy-200: #7d8597;   /* muted (4.6:1)                      */
  --navy-300: #5a6478;   /* hairline emphasis                  */
  --navy-400: #3a4458;   /* strong border                      */
  --navy-500: #262d3a;   /* default border                     */
  --navy-600: #1c2230;   /* raised surface (panel-2)           */
  --navy-700: #161a22;   /* panel surface                      */
  --navy-800: #0f1115;   /* app bg                             */

  /* ---- Cyan scale (anchored on --accent #1ec8ff) ---- */
  --cyan-50:  #e0f7ff;   /* highest-contrast text on panel     */
  --cyan-100: #b8eaff;
  --cyan-200: #7dd6ff;
  --cyan-300: #1ec8ff;   /* accent                             */
  --cyan-400: #0ba6db;
  --cyan-500: #0982ad;
  --cyan-600: #0a5f7d;   /* filled-badge bg                    */
  --cyan-700: #07394d;   /* deepest                            */

  /* ---- TLP (text-on-panel; AA verified) ---- */
  --tlp-red:    #ff5d5d;   /* 5.3:1  */
  --tlp-amber:  #fbbf24;   /* 11.0:1 */
  --tlp-green:  #4ade80;   /* 11.4:1 */
  --tlp-clear:  #cbd5e1;   /* 11.5:1 */
  /* paired filled-badge tokens */
  --tlp-red-bg:    #7f1d1d;  --tlp-red-fg:    #fee2e2;
  --tlp-amber-bg:  #78350f;  --tlp-amber-fg:  #fef3c7;
  --tlp-green-bg:  #14532d;  --tlp-green-fg:  #d1fae5;
  --tlp-clear-bg:  #1c2230;  --tlp-clear-fg:  #cbd5e1;

  /* ---- Severity (text-on-panel; AA verified) ---- */
  --sev-low:      #94a3b8;   /* 6.6:1  */
  --sev-medium:   #fde047;   /* 13.4:1 */
  --sev-high:     #fb923c;   /* 7.8:1  */
  --sev-critical: #ff5d5d;   /* 5.3:1, paired with glow */

  /* ---- Outcome (text-on-panel; AA verified) ---- */
  --out-submitted:    #7dd6ff;   /* 9.0:1  cyan */
  --out-acknowledged: #c4b5fd;   /* 8.4:1  violet */
  --out-rejected:     #f87171;   /* 6.0:1  red */
  --out-actioned:     #4ade80;   /* 11.4:1 green */

  /* ---- Spacing (4-step) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;

  /* ---- Type (4-step; px + weight) ---- */
  --fs-xs: 11px;  --fw-xs: 600;   /* badges, eyebrows */
  --fs-sm: 12px;  --fw-sm: 400;   /* meta, table head */
  --fs-md: 14px;  --fw-md: 400;   /* body (cockpit base) */
  --fs-lg: 18px;  --fw-lg: 600;   /* panel titles */
}

/* ===== Badges ============================================================ */
/* Shared base — overrides cockpit's .sev-badge / .tlp-badge with tokens.   */
.sev-badge,
.tlp-badge,
.outcome-badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-xs);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.6;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Severity — outlined, text-driven (works on panel or row hover) */
.sev-badge { background: var(--navy-600); color: var(--navy-100); border-color: var(--navy-500); border-radius: 10px; }
.sev-badge.sev-low,      tr.sev-low      .sev-badge { color: var(--sev-low);      border-color: var(--navy-400); }
.sev-badge.sev-medium,   tr.sev-medium   .sev-badge { color: var(--sev-medium);   border-color: color-mix(in oklab, var(--sev-medium) 40%, var(--navy-500)); }
.sev-badge.sev-high,     tr.sev-high     .sev-badge { color: var(--sev-high);     border-color: color-mix(in oklab, var(--sev-high) 50%, var(--navy-500)); }
.sev-badge.sev-critical, tr.sev-critical .sev-badge {
  color: var(--sev-critical);
  border-color: var(--sev-critical);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--sev-critical) 25%, transparent);
}

/* TLP — filled chips (FIRST.org-style emphasis) */
.tlp-badge.tlp-RED   { background: var(--tlp-red-bg);   color: var(--tlp-red-fg);   }
.tlp-badge.tlp-AMBER { background: var(--tlp-amber-bg); color: var(--tlp-amber-fg); }
.tlp-badge.tlp-GREEN { background: var(--tlp-green-bg); color: var(--tlp-green-fg); }
.tlp-badge.tlp-CLEAR { background: var(--tlp-clear-bg); color: var(--tlp-clear-fg); border-color: var(--navy-500); }

/* Outcome — text-driven with a leading dot for scannability in dense rows */
.outcome-badge { background: var(--navy-600); border-color: var(--navy-500); border-radius: 10px; }
.outcome-badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.outcome-badge.outcome-submitted    { color: var(--out-submitted);    }
.outcome-badge.outcome-acknowledged { color: var(--out-acknowledged); }
.outcome-badge.outcome-rejected     { color: var(--out-rejected);     border-color: color-mix(in oklab, var(--out-rejected) 35%, var(--navy-500)); }
.outcome-badge.outcome-actioned     { color: var(--out-actioned);     border-color: color-mix(in oklab, var(--out-actioned) 35%, var(--navy-500)); }

/* ===== Routes ============================================================ */
/* Block-level row inside a case "Routes" panel. Markup:
   <div class="route route-allowed"><span class="route-dest">…</span>
        <span class="route-reason">…</span></div>                          */
.route-allowed,
.route-blocked {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--navy-500);
  border-left-width: 3px;
  border-radius: 4px;
  background: var(--navy-600);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-1);
}
.route-allowed { border-left-color: var(--out-actioned); }
.route-blocked { border-left-color: var(--out-rejected); }
.route-allowed .route-reason,
.route-blocked .route-reason {
  font-size: var(--fs-sm);
  color: var(--navy-200);
}
.route-allowed .route-dest::before { content: "→ "; color: var(--out-actioned); }
.route-blocked .route-dest::before { content: "⊘ "; color: var(--out-rejected); }
.route-blocked .route-dest { color: var(--navy-100); text-decoration: line-through; text-decoration-color: var(--navy-300); }

/* ===== Ledger row ======================================================= */
/* Tabular dense row for /ledger. Markup:
   <tr class="ledger-row">
     <td class="lg-ts">…</td><td class="lg-case">…</td><td class="lg-dest">…</td>
     <td class="lg-hash">…</td><td class="lg-sub">…</td>
     <td><span class="tlp-badge tlp-AMBER">AMBER</span></td>
     <td><span class="outcome-badge outcome-actioned">ACTIONED</span></td>
   </tr>                                                                    */
.ledger-row > td {
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--navy-500);
  font-size: var(--fs-sm);
  vertical-align: baseline;
}
.ledger-row:hover > td { background: var(--navy-600); }
.ledger-row .lg-ts   { color: var(--navy-200); white-space: nowrap; width: 1%; }
.ledger-row .lg-case { color: var(--cyan-200); white-space: nowrap; width: 1%; }
.ledger-row .lg-dest { color: var(--navy-50);  white-space: nowrap; }
.ledger-row .lg-hash {
  color: var(--navy-100);
  font-variant-ligatures: none;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;       /* clip the head of the hash, keep the tail */
  text-align: left;
}
.ledger-row .lg-sub   { color: var(--navy-100); white-space: nowrap; }
.ledger-row.is-rejected   > td { background: color-mix(in oklab, var(--out-rejected) 6%, transparent); }
.ledger-row.is-actioned   > td { background: color-mix(in oklab, var(--out-actioned) 5%, transparent); }

/* ===== Sealed package card =============================================== */
/* Panel/card variant for case detail + /sealed/{id}. Markup:
   <section class="sealed-package-card">
     <header class="sp-head">
       <h2>SEALED PACKAGE</h2>
       <code class="sp-id">pkg_01H…</code>
     </header>
     <dl class="sp-meta">…</dl>
     <ul class="sp-recipients">…</ul>
   </section>                                                                */
.sealed-package-card {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--cyan-700) 35%, var(--navy-700)) 0, var(--navy-700) 64px),
    var(--navy-700);
  border: 1px solid var(--navy-500);
  border-radius: 6px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.sealed-package-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-300), transparent);
  opacity: 0.7;
}
.sealed-package-card .sp-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.sealed-package-card .sp-head h2 {
  margin: 0;
  font-size: var(--fs-xs); font-weight: var(--fw-xs);
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cyan-200);
}
.sealed-package-card .sp-id {
  font-size: var(--fs-sm); color: var(--navy-50);
  background: var(--navy-600); border: 1px solid var(--navy-500);
  padding: 2px var(--sp-2); border-radius: 3px;
}
.sealed-package-card .sp-meta {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-3); font-size: var(--fs-md);
}
.sealed-package-card .sp-meta dt { color: var(--navy-200); }
.sealed-package-card .sp-meta dd { margin: 0; color: var(--navy-50); }
.sealed-package-card .sp-meta .sp-hash { font-size: var(--fs-sm); color: var(--navy-100); word-break: break-all; }
.sealed-package-card .sp-recipients {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
}
.sealed-package-card .sp-recipients > li {
  font-size: var(--fs-sm); color: var(--navy-50);
  background: var(--navy-600); border: 1px solid var(--navy-500);
  padding: 2px var(--sp-2); border-radius: 3px;
}
.sealed-package-card .sp-recipients > li .sp-size { color: var(--navy-200); margin-left: var(--sp-2); }
