:root{--w-callen:url("/static/wall/callen.jpg");}
:root{--w-renly:url("/static/wall/renly.jpg");}
:root{--w-rachel:url("/static/wall/rachel.jpg");}
:root{--w-micah:url("/static/wall/micah.jpg");}
:root{--w-ops:url("/static/wall/ops.jpg");}
:root{--w-archive:url("/static/wall/archive.jpg");}



:root{
  --void:#070B14;
  --ink:#ECEAE2; --ink-2:#A6AEC0; --ink-3:#6E7789;

  /* Academy livery — brass on navy */
  --brass:#C9A227; --brass-2:#8C7016; --navy:#0D1526;

  /* Division tints, matched to each section's wallpaper */
  --div-ops:#D9A62E; --div-sci:#4BA8DC; --div-cmd:#B57BD4; --div-flag:#E08A63;

  --ok:#5CC98A; --warn:#E5B33C; --crit:#D6584F;

  --accent:var(--div-ops);
  --accent-rgb:217,166,46;

  --glass:rgba(9,15,30,.60);
  --glass-2:rgba(11,19,38,.74);
  --sheen:rgba(255,255,255,.05);
  --rule:rgba(201,162,39,.26);
  --rule-hi:rgba(201,162,39,.62);
  --blur:blur(17px) saturate(1.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--void); color:var(--ink); min-height:100vh;
  font-family:"Titillium Web",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15.5px; line-height:1.58; -webkit-font-smoothing:antialiased;
}
#wall{position:fixed; inset:0; z-index:0; background-size:cover;
  background-position:center; background-attachment:fixed;
  transition:background-image .55s ease; opacity:.72}
#mesh{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.15) 0%, transparent 58%),
    radial-gradient(ellipse at 12% 92%, rgba(var(--accent-rgb),.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(7,11,20,.20) 0%, rgba(7,11,20,.48) 55%, rgba(7,11,20,.66) 100%);
  transition:background .55s ease}
#stars{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.85;
  mix-blend-mode:screen}
.shell{position:relative; z-index:3; max-width:1180px; margin:0 auto;
  padding:22px 16px 90px}

/* ================= ACADEMY MASTHEAD ================= */
.academy{display:flex; align-items:center; gap:18px; padding:16px 22px;
  margin-bottom:14px; position:sticky; top:10px; z-index:12;
  background:var(--glass-2); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--rule); border-radius:2px;
  box-shadow:0 14px 46px -22px #000, inset 0 1px 0 var(--sheen)}
.academy::before,.academy::after{content:""; position:absolute; width:12px; height:12px;
  border:1px solid var(--rule-hi)}
.academy::before{left:6px; top:6px; border-right:none; border-bottom:none}
.academy::after{right:6px; bottom:6px; border-left:none; border-top:none}
.crest{width:52px; height:52px; flex:none}
.crest svg{width:100%; height:100%; display:block}
.titles{flex:1; min-width:0}
.wordmark{font-family:Cinzel,Georgia,serif; font-weight:700;
  font-size:clamp(1.25rem,3.4vw,1.85rem); letter-spacing:.15em; line-height:1.05;
  text-transform:uppercase; margin:0; color:var(--ink)}
.motto{font-family:Cinzel,Georgia,serif; font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--brass); margin:4px 0 0; font-weight:400}
.motto em{font-style:normal; color:var(--ink-3); letter-spacing:.14em}
.stardate{font-family:"JetBrains Mono",monospace; font-size:.68rem; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase; text-align:right; flex:none}
.stardate b{display:block; color:var(--brass); font-weight:600; font-size:.78rem}
@media(max-width:620px){.stardate{display:none}}

.deck{display:grid; grid-template-columns:210px 1fr; gap:14px; align-items:start}
@media(max-width:800px){.deck{grid-template-columns:1fr}}

/* ================= ROSTER RAIL ================= */
.rail{position:sticky; top:112px; background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--rule); border-radius:2px; padding:6px}
@media(max-width:800px){.rail{position:static; display:flex; flex-wrap:wrap; gap:4px}}
.rail-label{font-family:Cinzel,serif; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--brass-2); padding:12px 12px 6px;
  border-bottom:1px solid rgba(201,162,39,.15); margin-bottom:5px}
@media(max-width:800px){.rail-label{display:none}}
.navbtn{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font-family:"Titillium Web",sans-serif; font-size:.92rem; letter-spacing:.07em;
  text-transform:uppercase; font-weight:600; padding:9px 12px; border:none;
  background:transparent; color:var(--ink-2); cursor:pointer; border-radius:2px;
  border-left:2px solid transparent; transition:.18s}
@media(max-width:800px){.navbtn{width:auto; flex:1 1 auto; justify-content:center;
  font-size:.76rem; padding:8px 10px}}
.navbtn:hover{background:rgba(255,255,255,.05); color:var(--ink)}
.navbtn:focus-visible{outline:2px solid var(--brass); outline-offset:-2px}
.navbtn .pips{display:flex; gap:2.5px; flex:none}
@media(max-width:800px){.navbtn .pips{display:none}}
.pip{width:6px; height:6px; border-radius:50%; border:1px solid var(--ink-3)}
.pip.f{background:var(--ink-3); border-color:var(--ink-3)}
.navbtn[aria-selected="true"]{color:var(--ink); background:rgba(255,255,255,.07);
  border-left-color:var(--btn-c,var(--brass))}
.navbtn[aria-selected="true"] .pip{border-color:var(--btn-c,var(--brass))}
.navbtn[aria-selected="true"] .pip.f{background:var(--btn-c,var(--brass))}
.n-callen{--btn-c:#D9A62E} .n-renly{--btn-c:#4BA8DC}
.n-rachel{--btn-c:#B57BD4} .n-micah{--btn-c:#E08A63}
.n-ops,.n-archive,.n-crew,.n-eng{--btn-c:var(--brass)}

/* ================= PLAQUES ================= */
.view{display:none; animation:rise .4s ease both} .view.on{display:block}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.view{animation:none}}
.card{position:relative; background:var(--glass); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur); border:1px solid var(--rule);
  border-radius:2px; padding:22px 24px; margin-bottom:12px; overflow:hidden;
  box-shadow:0 12px 40px -22px #000, inset 0 1px 0 var(--sheen)}
.card::before,.card::after{content:""; position:absolute; width:11px; height:11px;
  border:1px solid var(--rule-hi); opacity:.75}
.card::before{left:7px; top:7px; border-right:none; border-bottom:none}
.card::after{right:7px; bottom:7px; border-left:none; border-top:none}
.card > *{position:relative}
.card h2{font-family:Cinzel,Georgia,serif; font-weight:600; font-size:1.02rem;
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 3px; color:var(--accent);
  padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.09)}
.card .hint{color:var(--ink-3); font-size:.86rem; margin:9px 0 14px}
.card h3{font-family:Cinzel,serif; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin:18px 0 9px; font-weight:600}
.card h3:first-of-type{margin-top:4px}
.grid2{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:860px){.grid2{grid-template-columns:1fr 1fr}}

/* ================= CONDITION ================= */
.alertbar{display:flex; align-items:center; gap:13px; padding:12px 20px;
  border-radius:2px; margin-bottom:12px; border:1px solid;
  font-family:Cinzel,serif; letter-spacing:.19em; text-transform:uppercase;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.alertbar .lamp{width:11px; height:11px; border-radius:50%; flex:none}
.alertbar .label{font-size:.82rem; font-weight:600}
.alertbar .why{font-family:"Titillium Web",sans-serif; letter-spacing:0;
  text-transform:none; font-size:.86rem; color:var(--ink-2); margin-left:auto;
  text-align:right}
.alertbar.green{background:rgba(16,46,30,.5); border-color:rgba(92,201,138,.3); color:var(--ok)}
.alertbar.green .lamp{background:var(--ok); box-shadow:0 0 15px var(--ok)}
.alertbar.yellow{background:rgba(54,44,14,.5); border-color:rgba(229,179,60,.3); color:var(--warn)}
.alertbar.yellow .lamp{background:var(--warn); box-shadow:0 0 15px var(--warn)}
.alertbar.red{background:rgba(56,20,18,.55); border-color:rgba(214,88,79,.36); color:var(--crit)}
.alertbar.red .lamp{background:var(--crit); box-shadow:0 0 17px var(--crit);
  animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
@media(prefers-reduced-motion:reduce){.alertbar.red .lamp{animation:none}}

/* ================= HERO ================= */
.hero{position:relative; border-radius:2px; overflow:hidden; margin-bottom:12px;
  min-height:264px; display:flex; align-items:flex-end; border:1px solid var(--rule)}
.hero .img{position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.02)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,20,.02) 0%,rgba(7,11,20,.5) 44%,rgba(7,11,20,.95) 100%)}
.hero-in{position:relative; z-index:2; padding:30px 26px 22px; width:100%}
.eyebrow{font-family:Cinzel,serif; font-size:.64rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--accent); margin:0 0 8px; font-weight:600}
.hero h2{font-family:Cinzel,Georgia,serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,2.9rem); line-height:1; letter-spacing:.09em;
  margin:0 0 6px; text-shadow:0 4px 32px rgba(0,0,0,.9)}
.hero .sub{color:var(--ink-2); margin:0; font-size:.94rem}
.statstrip{display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; padding-top:15px;
  border-top:1px solid rgba(201,162,39,.3)}
.stat .n{font-family:Cinzel,serif; font-size:1.5rem; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums}
.stat .l{font-family:"JetBrains Mono",monospace; font-size:.59rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-top:5px}

/* ================= CONTROLS ================= */
.checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.chk{display:flex; align-items:flex-start; gap:12px; padding:11px 13px;
  background:var(--sheen); border:1px solid rgba(255,255,255,.07);
  border-radius:2px; cursor:pointer; transition:.16s}
.chk:hover{border-color:var(--rule-hi); background:rgba(255,255,255,.09)}
.chk input{appearance:none; width:18px; height:18px; flex:none; margin-top:3px;
  border:1px solid var(--ink-3); border-radius:1px; cursor:pointer; position:relative;
  background:transparent; transition:.15s}
.chk input:checked{background:var(--ok); border-color:var(--ok);
  box-shadow:0 0 13px rgba(92,201,138,.55)}
.chk input:checked::after{content:"✓"; position:absolute; inset:0; color:#04180C;
  font-size:13px; font-weight:700; display:grid; place-items:center}
.chk input:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.chk-body{flex:1; min-width:0}
.chk-title{font-weight:600}
.chk input:checked ~ .chk-body .chk-title{text-decoration:line-through; color:var(--ink-3)}
.chk-meta{font-size:.79rem; color:var(--ink-3); display:flex; gap:11px;
  flex-wrap:wrap; margin-top:2px}
.chk-meta a{color:var(--div-sci); text-decoration:none;
  border-bottom:1px dotted currentColor}
.chk-meta a:hover{color:var(--ink)}
.chk.is-critical{border-color:rgba(214,88,79,.35); background:rgba(56,20,18,.34)}
.chk.is-critical .chk-title::after{content:"MANDATORY"; font-family:Cinzel,serif;
  font-size:.56rem; letter-spacing:.18em; color:var(--crit); margin-left:10px;
  vertical-align:1px}

.pill{font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; padding:2px 7px; border-radius:1px; white-space:nowrap;
  font-weight:600}
.p-ok{background:rgba(92,201,138,.15); color:var(--ok)}
.p-warn{background:rgba(229,179,60,.15); color:var(--warn)}
.p-crit{background:rgba(214,88,79,.15); color:var(--crit)}
.p-info{background:rgba(75,168,220,.15); color:var(--div-sci)}
.p-mute{background:rgba(255,255,255,.07); color:var(--ink-3)}
.rows{display:flex; flex-direction:column; gap:3px}
.row{display:flex; align-items:center; gap:12px; padding:10px 13px;
  background:var(--sheen); border-radius:2px; flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.05)}
.row .k{flex:1; min-width:130px}
.row .k small{display:block; color:var(--ink-3); font-size:.78rem}
.row .v{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums;
  font-weight:600}
.row a.v{color:var(--div-sci); text-decoration:none}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.btn{font-family:Cinzel,serif; letter-spacing:.14em; text-transform:uppercase;
  font-size:.72rem; font-weight:600; padding:10px 18px; border-radius:1px;
  border:1px solid rgba(201,162,39,.35); background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px); color:var(--ink); cursor:pointer; text-decoration:none;
  display:inline-block; transition:.16s}
.btn:hover{background:rgba(201,162,39,.15); border-color:var(--rule-hi)}
.btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.btn-go{background:var(--brass); color:#0B0F18; border-color:var(--brass);
  box-shadow:0 0 22px rgba(201,162,39,.35)}
.btn-go:hover{background:var(--brass); filter:brightness(1.14)}
.btn-yes{background:rgba(92,201,138,.14); color:var(--ok); border-color:rgba(92,201,138,.35)}
.btn-no{background:rgba(214,88,79,.13); color:var(--crit); border-color:rgba(214,88,79,.32)}
.btn-ask{background:rgba(75,168,220,.13); color:var(--div-sci); border-color:rgba(75,168,220,.32)}
.mission{background:var(--sheen); border:1px solid rgba(255,255,255,.07);
  border-radius:2px; padding:15px 17px; margin-bottom:7px}
.mission-head{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  flex-wrap:wrap; margin-bottom:5px}
.mission-name{font-family:Cinzel,serif; font-size:.86rem; letter-spacing:.13em;
  text-transform:uppercase; font-weight:600}
.mission p{margin:0; font-size:.88rem; color:var(--ink-2)}
.relay{display:flex; flex-direction:column; margin-top:8px}
.step{display:flex; gap:13px; padding:0 0 15px; position:relative}
.step:not(:last-child)::before{content:""; position:absolute; left:8px; top:20px;
  bottom:0; width:1px; background:rgba(201,162,39,.28)}
.dot{width:17px; height:17px; flex:none; border-radius:50%;
  border:1px solid rgba(201,162,39,.4); background:rgba(0,0,0,.45); display:grid;
  place-items:center; font-family:"JetBrains Mono",monospace; font-size:.55rem;
  color:var(--ink-3)}
.step.done .dot{background:var(--ok); border-color:var(--ok); color:#04180C}
.step.now .dot{background:var(--warn); border-color:var(--warn); color:#1E1704;
  box-shadow:0 0 15px rgba(229,179,60,.5)}
.step-body{padding-top:0; font-size:.89rem}
.step-body b{display:block; font-family:Cinzel,serif; letter-spacing:.16em;
  text-transform:uppercase; font-size:.66rem; color:var(--ink-2); font-weight:600;
  margin-bottom:1px}
.step.done .step-body b{color:var(--ok)} .step.now .step-body b{color:var(--warn)}

/* ---- ribbons / commendations ---- */
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.badge{display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:1px;
  background:var(--sheen); border:1px solid rgba(255,255,255,.07); font-size:.84rem;
  border-left:3px solid rgba(255,255,255,.12)}
.badge.earned{border-color:var(--rule); border-left-color:var(--brass);
  background:rgba(201,162,39,.09); box-shadow:0 0 20px -8px rgba(201,162,39,.6)}
.badge .g{width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:.62rem; background:rgba(255,255,255,.07); color:var(--ink-3); flex:none;
  border:1px solid rgba(255,255,255,.1)}
.badge.earned .g{background:var(--brass); color:#0B0F18; font-weight:700;
  border-color:var(--brass)}
.badge small{display:block; color:var(--ink-3); font-size:.73rem}

.links{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(218px,1fr))}
.link{display:block; padding:14px 16px; background:var(--sheen);
  border:1px solid rgba(255,255,255,.07); border-radius:2px; text-decoration:none;
  color:var(--ink); transition:.16s}
.link:hover{border-color:var(--rule-hi); background:rgba(201,162,39,.1);
  transform:translateY(-2px)}
.link b{display:block; font-family:Cinzel,serif; letter-spacing:.11em;
  text-transform:uppercase; font-size:.78rem; font-weight:600; margin-bottom:3px}
.link span{font-size:.79rem; color:var(--ink-3)}
.note{background:rgba(75,168,220,.07); border-left:2px solid var(--div-sci);
  padding:12px 15px; border-radius:0 2px 2px 0; font-size:.87rem; color:var(--ink-2);
  margin-top:14px}
.note b{color:var(--ink)}
textarea{width:100%; background:rgba(0,0,0,.34); border:1px solid rgba(201,162,39,.25);
  border-radius:2px; color:var(--ink); font-family:"Titillium Web",sans-serif;
  font-size:.92rem; padding:11px 13px; resize:vertical; min-height:76px}
textarea:focus{outline:none; border-color:var(--brass)}
.fab{position:fixed; right:20px; bottom:20px; z-index:20; width:50px; height:50px;
  border-radius:50%; border:1px solid var(--brass); background:var(--navy);
  color:var(--brass); font-size:1.1rem; cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.7), 0 0 26px rgba(201,162,39,.3);
  display:grid; place-items:center; transition:.16s}
.fab:hover{transform:scale(1.09); background:var(--brass); color:var(--navy)}
.fab:focus-visible{outline:3px solid #fff; outline-offset:3px}
footer{margin-top:26px; padding-top:16px; border-top:1px solid rgba(201,162,39,.18);
  font-size:.74rem; color:var(--ink-3); font-family:Cinzel,serif; letter-spacing:.14em;
  text-transform:uppercase; text-align:center}

/* ================= CADET FEEDBACK (Renly's view) =================
   Every one of these fires on something the kid actually did. None fires on
   a schedule, and none nags. Reward, never remind. */

/* --- transporter shimmer when an item is cleared --- */
@keyframes beam{
  0%{opacity:0; transform:scaleY(.15)}
  15%{opacity:1}
  70%{opacity:.85; transform:scaleY(1)}
  100%{opacity:0; transform:scaleY(1)}
}
.chk.beaming::after{
  content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:2px;
  background:linear-gradient(180deg,
    transparent 0%, rgba(120,220,255,.55) 18%, rgba(255,255,255,.85) 50%,
    rgba(120,220,255,.55) 82%, transparent 100%);
  mix-blend-mode:screen; animation:beam .75s ease-out forwards}
.chk{position:relative}
@media(prefers-reduced-motion:reduce){.chk.beaming::after{animation:none; opacity:0}}

/* --- warp core: charges as the day's list clears --- */
.core{margin-top:16px; padding:15px 17px; border-radius:2px;
  background:var(--sheen); border:1px solid rgba(255,255,255,.08)}
.core-head{display:flex; justify-content:space-between; align-items:baseline;
  font-family:Cinzel,serif; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:9px}
.core-head b{color:var(--accent); font-variant-numeric:tabular-nums}
.core-track{height:15px; border-radius:2px; background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1); overflow:hidden; position:relative}
.core-fill{height:100%; width:0%; border-radius:1px; transition:width .65s cubic-bezier(.2,.9,.25,1);
  background:linear-gradient(90deg,#1B6FA8 0%,#40C4FF 55%,#BFF0FF 100%);
  box-shadow:0 0 22px rgba(64,196,255,.75); position:relative}
.core-fill::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sweep 2.1s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.core-fill::after{animation:none}}
.core.full .core-fill{background:linear-gradient(90deg,#C9A227 0%,#FFE9A3 60%,#FFFFFF 100%);
  box-shadow:0 0 34px rgba(255,220,120,.9)}
.core-note{margin:9px 0 0; font-size:.83rem; color:var(--ink-3)}
.core.full .core-note{color:var(--brass)}

/* --- commendation materialising --- */
@keyframes materialise{
  0%{opacity:0; transform:translateY(7px) scale(.9); filter:blur(6px)}
  55%{opacity:1; filter:blur(0)}
  70%{transform:translateY(0) scale(1.07)}
  100%{transform:translateY(0) scale(1)}
}
.badge.just-earned{animation:materialise .85s ease-out both}
@media(prefers-reduced-motion:reduce){.badge.just-earned{animation:none}}

/* --- warp burst: the whole list is clear --- */
#warp{position:fixed; inset:0; z-index:60; pointer-events:none; display:none}
#warp.on{display:block}
#warp canvas{position:absolute; inset:0; width:100%; height:100%}
.warp-word{position:fixed; inset:0; z-index:61; display:none; place-items:center;
  pointer-events:none}
.warp-word.on{display:grid}
.warp-word span{font-family:Cinzel,serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.3em; font-size:clamp(1.5rem,6vw,3rem); color:#FFF3D0;
  text-shadow:0 0 40px rgba(255,220,120,.95), 0 0 90px rgba(64,196,255,.6);
  animation:warpword 2.4s ease-out both; text-align:center; padding:0 20px}
@keyframes warpword{
  0%{opacity:0; transform:scale(.8)}
  20%{opacity:1; transform:scale(1)}
  75%{opacity:1}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .warp-word span{animation:none; opacity:1}
  #warp{display:none !important}
}