/* Saga — Reidify house style: black, white, blue, gray. Light theme (white bg,
   near-black ink, single blue accent). The brand logos live ONLY on black: a black
   header band + black gate card. Monospace chrome, editorial type, hairline structure,
   motion-light (a daily tool — keep it instant). Single accent = blue #1668FF. */
:root{
  /* surfaces */
  --bg:#FFFFFF; --bg-2:#F4F5F7; --surface:#FFFFFF; --surface-2:#FAFAFB;
  --black:#0B0B0C; --black-2:#161618;
  /* ink (on white) */
  --ink:#0B0B0C; --ink-2:#3C3F44; --muted:#6B7075; --faint:#9AA0A7;
  /* ink (on black header / gate) */
  --ink-inv:#F4F5F7; --muted-inv:#A7ADB5; --faint-inv:#6E747C;
  /* hairlines */
  --line:rgba(11,11,12,.10); --line-2:rgba(11,11,12,.18); --line-inv:rgba(244,245,247,.14);
  /* blue — the single accent (state steps of one hue) */
  --blue:#1668FF; --blue-hi:#3D82FF; --blue-deep:#0B4ED8; --blue-dim:rgba(22,104,255,.10);
  /* status (tuned for white) */
  --green:#1E9E57; --amber:#B9770E; --red:#D2402F;
  --green-dim:rgba(30,158,87,.12); --amber-dim:rgba(185,119,14,.13); --red-dim:rgba(210,64,47,.12);
  --r:5px; --r-lg:9px;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);line-height:1.5;letter-spacing:-.011em;background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none!important}
a{color:var(--blue);text-decoration:none}
::selection{background:var(--blue);color:#fff}

/* ---------- motion: one load fade; transform/opacity only ---------- */
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fu{opacity:0;animation:up .66s var(--ease) forwards}
.fu.d1{animation-delay:.04s}.fu.d2{animation-delay:.10s}.fu.d3{animation-delay:.16s}
.fu.d4{animation-delay:.22s}.fu.d5{animation-delay:.28s}.fu.d6{animation-delay:.34s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .fu{animation:none;opacity:1;transform:none}
  .cdot{animation:none!important}
  .barrow .fill{animation:none}
  .skel{animation:none}
}

/* ---------- black header band (the only home for the logos) ---------- */
.header{background:var(--black);color:var(--ink-inv)}

/* monospace status ticker (signature) */
.ticker{position:sticky;top:0;z-index:30;display:flex;align-items:stretch;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-inv);
  background:var(--black);border-bottom:1px solid var(--line-inv)}
.ti{display:flex;align-items:center;gap:9px;padding:9px 18px;border-right:1px solid var(--line-inv);white-space:nowrap}
.ti:last-child{border-right:none;margin-left:auto;color:var(--ink-inv)}
.ti.brandmark{color:var(--ink-inv);font-weight:600;letter-spacing:.22em}
.ti.status{color:var(--blue-hi);letter-spacing:.16em}
.cdot{width:6px;height:6px;border-radius:50%;background:var(--blue-hi);flex:0 0 auto;animation:pulse 2.6s ease-in-out infinite}
.cdot.green{background:#36C46B}.cdot.amber{background:#E0A93B}.cdot.red{background:#FF5C47}
.ti.clock{font-variant-numeric:tabular-nums;letter-spacing:.1em}
@media(max-width:760px){.ti.hideSm{display:none}.ticker{font-size:.6rem}.ti{padding:9px 13px}}

/* symbol mark (logo image on black, with text fallback until the file lands) */
.symbol-wrap{display:inline-flex;align-items:center;justify-content:center}
.symbol-wrap .sym-fb{color:var(--blue-hi);font-size:1em;line-height:1}
.brandmark .sym-img{height:13px;width:auto}

/* masthead — wordmark (main logo) on black */
.masthead{max-width:1180px;margin:0 auto;padding:24px 30px 30px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.brandblock{display:flex;flex-direction:column;gap:9px}
.wordmark-wrap{display:inline-flex;align-items:center;height:34px}
.wordmark-wrap .wm-fb{font-size:1.7rem;font-weight:300;letter-spacing:.02em;color:var(--ink-inv);line-height:1}
.wordmark-wrap .wm-fb b{color:var(--blue-hi);font-weight:400}
.wordmark-wrap .wm-img{height:34px;width:auto;display:block}
.brand-tag{font-family:var(--mono);font-size:.62rem;color:var(--muted-inv);letter-spacing:.2em;text-transform:uppercase}
.masthead .when{text-align:right}
.masthead .role{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-inv)}
.masthead .gen{font-family:var(--mono);font-size:.62rem;color:var(--faint-inv);margin-top:6px;letter-spacing:.1em}
@media(max-width:680px){.masthead{padding:18px 18px 22px}.wordmark-wrap{height:28px}.wordmark-wrap .wm-img{height:28px}.wordmark-wrap .wm-fb{font-size:1.45rem}}
.hpill,.dot,.htext,.hsub{display:none}

/* ---------- white body ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:42px 30px 80px;position:relative}
@media(max-width:680px){.wrap{padding:28px 18px 60px}}

/* rune-glyph watermark — texture only (a character, not the logo image) */
.rune-bg{position:absolute;top:24px;right:-22px;font-size:26rem;line-height:.8;color:#000;opacity:.022;
  pointer-events:none;z-index:0;user-select:none}
@media(max-width:680px){.rune-bg{font-size:14rem;top:6px;right:-12px;opacity:.03}}
.wrap>*:not(.rune-bg){position:relative;z-index:1} /* keep the watermark absolute + behind */

/* ---------- hero ---------- */
.hero{padding:4px 0 34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--blue)}
.hero .focus{font-size:clamp(2.05rem,4.9vw,3.6rem);font-weight:600;letter-spacing:-.04em;line-height:1.02;color:var(--ink);max-width:19ch}
.hero .focus.empty{color:var(--faint);font-weight:500}
.hero .detail{font-size:1.02rem;color:var(--ink-2);margin-top:15px;max-width:60ch;line-height:1.6}
.mustwin{margin-top:26px;max-width:640px}
.mustwin label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.edit{font-size:1.02rem;font-weight:500;color:var(--ink);border-left:2px solid var(--line-2);border-radius:0 var(--r) var(--r) 0;padding:9px 14px;cursor:text;transition:border-color .18s var(--ease),background .18s var(--ease);min-height:42px;background:var(--bg-2)}
.edit:hover{border-left-color:var(--blue-deep)}
.edit:focus{outline:none;background:#fff;border-left-color:var(--blue)}
.edit:empty::before{content:attr(data-ph);color:var(--faint);font-weight:400}

.chips{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.chip{padding:20px 22px;border-right:1px solid var(--line)}
.chip:last-child{border-right:none}
.chip .n{font-size:clamp(2.1rem,3.6vw,2.7rem);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.chip .l{font-family:var(--mono);font-size:.6rem;color:var(--muted);margin-top:11px;text-transform:uppercase;letter-spacing:.14em}
.chip.due .n{color:var(--amber)}.chip.won .n{color:var(--green)}.chip.att .n{color:var(--blue)}
@media(max-width:680px){
  .chips{grid-template-columns:repeat(2,1fr)}
  .chip{border-bottom:1px solid var(--line)}
  .chip:nth-child(2n){border-right:none}
  .chip:nth-child(3),.chip:last-child{border-bottom:none}
}

/* ---------- grid + cards (flat, hairline-led) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr;gap:16px}}
.panel{display:flex;flex-direction:column}
.panel.wide{grid-column:1 / -1}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{border-color:var(--line-2);box-shadow:0 1px 0 var(--line)}
.phead{display:flex;align-items:center;gap:10px;padding:17px 20px 13px;border-bottom:1px solid var(--line)}
.phead h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.phead .badge{margin-left:auto;font-family:var(--mono);font-size:.64rem;font-weight:600;color:var(--blue);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.pbody{padding:6px 20px 18px;overflow:auto}
.pbody.scroll{max-height:330px}

.ev,.row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line)}
.ev:last-child,.row:last-child{border-bottom:none}
.ev .t{font-family:var(--mono);font-size:.72rem;color:var(--muted);width:54px;letter-spacing:.06em;flex:0 0 auto}
.ev .nm,.row .nm{font-size:.94rem;font-weight:500;color:var(--ink);line-height:1.35}
.ev.now .nm{color:var(--blue)}
.ev.now .nm::after{content:"NOW";font-family:var(--mono);font-size:.54rem;font-weight:700;color:#fff;background:var(--blue);padding:2px 6px;border-radius:3px;margin-left:10px;vertical-align:middle;letter-spacing:.12em}
.row .meta{flex:1;min-width:0}
.row .sub{font-size:.8rem;color:var(--muted);margin-top:3px;line-height:1.45}
.pill{font-family:var(--mono);font-size:.58rem;font-weight:600;padding:3px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.pill.green{background:var(--green-dim);color:var(--green);border-color:transparent}
.pill.amber{background:var(--amber-dim);color:var(--amber);border-color:transparent}
.pill.blue{background:var(--blue-dim);color:var(--blue);border-color:transparent}
.pill.red{background:var(--red-dim);color:var(--red);border-color:transparent}
.tag-prio{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.tag-prio.high{background:var(--red)}.tag-prio.med{background:var(--amber)}

.stats3{display:grid;grid-template-columns:repeat(3,1fr);margin:8px 0 20px;border:1px solid var(--line);border-radius:var(--r)}
.s3{padding:15px 16px;border-right:1px solid var(--line)}
.s3:last-child{border-right:none}
.s3 .n{font-size:1.75rem;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.s3 .l{font-family:var(--mono);font-size:.58rem;color:var(--muted);margin-top:8px;text-transform:uppercase;letter-spacing:.12em}
.s3.due .n{color:var(--amber)}.s3.won .n{color:var(--green)}
.barrow{display:flex;align-items:center;gap:13px;margin:10px 0}
.barrow .k{font-size:.81rem;width:140px;color:var(--ink-2);text-transform:capitalize;flex:0 0 auto}
.barrow .track{flex:1;height:5px;background:var(--bg-2);border-radius:3px;overflow:hidden}
.barrow .fill{height:100%;border-radius:3px;background:var(--blue);transform-origin:left;animation:bar .8s var(--ease) both}
.barrow .v{font-family:var(--mono);font-size:.76rem;font-weight:600;width:30px;text-align:right;color:var(--muted);flex:0 0 auto}
@media(max-width:520px){.barrow .k{width:104px}}

.kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.kv .k{font-family:var(--mono);font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.kv .v{font-size:.88rem;font-weight:600;color:var(--ink);text-align:right}
.fleetrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.fleetrow:last-child{border-bottom:none}
.fleetrow .nm{font-size:.86rem;flex:1;min-width:0;color:var(--ink-2)}
.fleetrow .sub{font-size:.74rem;color:var(--faint);margin-top:2px;line-height:1.4}

.feeditem{padding:13px 0;border-bottom:1px solid var(--line)}
.feeditem:last-child{border-bottom:none}
.feeditem .ft{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.4}
.feeditem .fn{font-size:.81rem;color:var(--muted);margin-top:4px;line-height:1.5}

.empty{font-family:var(--mono);font-size:.72rem;color:var(--faint);padding:26px 0;text-align:center;letter-spacing:.1em;text-transform:uppercase}
.err{font-size:.82rem;color:var(--red);background:var(--red-dim);padding:11px 14px;border-radius:var(--r);margin-top:16px}
footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);text-align:center;font-family:var(--mono);font-size:.62rem;color:var(--faint);letter-spacing:.16em;text-transform:uppercase}
footer .runesm{color:var(--blue);margin-right:4px}

/* ---------- gate (black card carries the logos) ---------- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;background:var(--bg)}
.gate .box{max-width:360px;width:100%;padding:40px 34px;text-align:center;background:var(--black);color:var(--ink-inv);border:1px solid var(--line-inv);border-radius:var(--r-lg);box-shadow:0 30px 80px -42px rgba(0,0,0,.55)}
.gate .brand-lockup{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:24px}
.gate .symbol-wrap{height:76px}                 /* thin-line mark — needs size to read */
.gate .symbol-wrap .sym-fb{font-size:3.4rem;color:var(--blue-hi)}
.gate .symbol-wrap .sym-img{height:76px;width:auto}
.gate .wordmark-wrap{height:24px}
.gate .wordmark-wrap .wm-fb{font-size:1.35rem;font-weight:300;letter-spacing:.02em;color:var(--ink-inv)}
.gate .wordmark-wrap .wm-fb b{color:var(--blue-hi);font-weight:400}
.gate .wordmark-wrap .wm-img{height:24px;width:auto}
.gate p{font-family:var(--mono);font-size:.64rem;color:var(--muted-inv);margin-bottom:22px;letter-spacing:.1em;text-transform:uppercase}
.gate input{width:100%;font-size:1rem;padding:13px 15px;border:1px solid var(--line-inv);border-radius:var(--r);margin-bottom:13px;background:var(--black-2);color:var(--ink-inv);font-family:var(--sans)}
.gate input::placeholder{color:var(--faint-inv)}
.gate input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}
.gate button{width:100%;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:14px;border:none;border-radius:var(--r);cursor:pointer;color:#fff;background:var(--blue);transition:background .15s var(--ease)}
.gate button:hover{background:var(--blue-hi)}
/* Khushi: high-contrast white button (more readable on the black card) */
.gate button.readable{background:#fff;color:var(--blue-deep);font-weight:700}
.gate button.readable:hover{background:#EAF1FF;color:var(--blue-deep)}
.gate .err{background:none;font-family:var(--mono);font-size:.68rem;color:#FF6A57;min-height:18px;margin-top:13px;padding:0;letter-spacing:.08em;text-transform:uppercase}

.skel{height:11px;border-radius:3px;margin:14px 0;background:linear-gradient(90deg,var(--bg-2) 0%,#ECEEF1 50%,var(--bg-2) 100%);background-size:200% 100%;animation:sh 1.5s var(--ease) infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}