/* CampusPulse — core styles
   Palette: warm paper + ink navy + ember accent. Serif display, grotesk UI. */

:root{
  --paper:#f4f1ea; --card:#fffdf9; --card-2:#efeae0; --line:#e0d9cc; --line-2:#d2c9b8;
  --ink:#171a20; --ink-2:#4b5361; --ink-3:#7c8595;
  --ember:#b4531f; --ember-soft:#f2e2d6; --pine:#1d6b5b; --pine-soft:#dceae5;
  --sky:#28618f; --sky-soft:#dee9f3; --rust:#a32c2c; --gold:#a67a12;
  --ring:0 0 0 3px rgba(180,83,31,.22);
  --lift:0 1px 1px rgba(23,26,32,.04), 0 10px 26px -14px rgba(23,26,32,.30);
  --lift-2:0 24px 60px -28px rgba(23,26,32,.45);
  --r:12px; --r-lg:18px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
[data-theme="dark"]{
  --paper:#0f1116; --card:#171a21; --card-2:#1f232c; --line:#282d38; --line-2:#333a47;
  --ink:#eef0f4; --ink-2:#a7b0bf; --ink-3:#798393;
  --ember:#e2814a; --ember-soft:#33231a; --pine:#5fbfa5; --pine-soft:#14251f;
  --sky:#79aede; --sky-soft:#16222f; --rust:#e07777; --gold:#d7ac4a;
  --lift:0 1px 1px rgba(0,0,0,.5), 0 14px 32px -18px rgba(0,0,0,.85);
  --lift-2:0 30px 70px -30px rgba(0,0,0,.9);
  --ring:0 0 0 3px rgba(226,129,74,.26);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.015em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--ember)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05}
.mono{font-family:var(--mono);font-size:.86em}
.dotsep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;display:inline-block}

/* ---------------- Boot ---------------- */
/* The hidden attribute must always win over the display rules below, or the
   boot curtain and gate can never be dismissed from script. */
[hidden]{display:none!important}

/* ---- author credit footer ---- */
.credit{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.4px;color:var(--ink-3)}
.credit__by strong{color:var(--ink-2);font-weight:600;letter-spacing:.01em}
.credit__links{display:inline-flex;align-items:center;gap:10px}
.credit__links a{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--ink-3);border:1px solid transparent;transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease}
.credit__links a:hover{color:var(--ember);border-color:var(--line-2);background:var(--card-2);transform:translateY(-1px)}
.credit__links svg{width:15px;height:15px;fill:currentColor;stroke:none}
.credit--app{margin:auto 26px 18px;padding-top:16px}
@media (max-width:640px){.credit{justify-content:center;text-align:center}.credit--app{margin-inline:18px}}

.boot{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--paper)}
.boot__mark{position:relative;width:54px;height:54px;display:grid;place-items:center}
.boot__ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ember)}
.boot__dot{width:10px;height:10px;border-radius:50%;background:var(--ember)}
.boot__word{font-family:var(--serif);font-size:19px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------------- Wordmark ---------------- */
.wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:19px;letter-spacing:-.01em}
.wordmark i{width:11px;height:11px;border-radius:50% 50% 50% 2px;background:var(--ember);display:block;transform:rotate(-8deg)}
.wordmark--sm{font-size:17px}

/* ---------------- Gate (auth) ---------------- */
.gate{min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr}
.gate__story{
  position:relative;overflow:hidden;padding:34px 44px;display:flex;flex-direction:column;
  background:#12151c;color:#efece6;
}
.gate__brand{position:relative;z-index:2;color:#efece6}
.gate__brand .wordmark i{background:var(--ember)}
.gate__pitch{position:relative;z-index:2;margin:auto 0;max-width:520px}
.gate__pitch .display{font-size:clamp(38px,5vw,62px);color:#fbf8f2}
.lede{margin-top:18px;color:#b9b3a8;max-width:44ch;font-size:15.5px}
.gate__foot{position:relative;z-index:2;display:flex;align-items:center;gap:10px;color:#8d8779;font-size:12.5px}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.orb--a{width:440px;height:440px;background:radial-gradient(circle,#b4531f,transparent 62%);top:-120px;right:-90px}
.orb--b{width:520px;height:520px;background:radial-gradient(circle,#1d6b5b,transparent 62%);bottom:-200px;left:-140px}
.grain{position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:3px 3px}

.ticker{margin-top:34px;height:56px;overflow:hidden;border-left:2px solid rgba(255,255,255,.16);padding-left:16px}
.ticker__item{height:56px;display:flex;flex-direction:column;justify-content:center}
.ticker__item strong{font-family:var(--serif);font-size:26px;color:#fbf8f2;font-weight:400}
.ticker__item span{font-size:12.5px;color:#9b9488;letter-spacing:.02em}

.gate__panel{display:grid;place-items:center;padding:30px 22px;background:var(--paper)}
.panel{width:min(430px,100%)}
.panel__head{margin:22px 0 20px}
.panel__head h2{font-family:var(--serif);font-weight:400;font-size:28px}
.panel__head p{color:var(--ink-2);font-size:14px;margin-top:5px}
.panel__swap{margin-top:18px;font-size:13.5px;color:var(--ink-2);text-align:center}
.panel__swap button{color:var(--ember);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;background:var(--card-2);border:1px solid var(--line);border-radius:12px}
.seg__glide{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc((100% - 8px)/3);background:var(--card);
  border-radius:9px;box-shadow:var(--lift);transition:transform .38s cubic-bezier(.65,.05,.15,1)}
.seg__btn{position:relative;z-index:1;padding:9px 4px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-3);transition:color .22s}
.seg__btn.is-on{color:var(--ink)}

.stack{display:grid;gap:13px}
.f{display:grid;gap:6px}
.f > label{font-size:12px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.inp{
  width:100%;padding:11px 13px;background:var(--card);border:1px solid var(--line);border-radius:11px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.inp::placeholder{color:var(--ink-3);opacity:.75}
.inp:hover{border-color:var(--line-2)}
.inp:focus{outline:none;border-color:var(--ember);box-shadow:var(--ring)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
textarea.inp{min-height:96px;resize:vertical}
.f .warn{font-size:12.5px;color:var(--rust);display:none}
/* Persistent form-level error banner. Unlike a toast it stays until the next
   attempt, so a rejected sign-up cannot be missed. */
.formerr{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:11px;font-size:13.4px;line-height:1.45;
  color:var(--rust);background:color-mix(in srgb,var(--rust) 9%,var(--card));
  border:1px solid color-mix(in srgb,var(--rust) 34%,var(--line))}
.formerr__i{flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:var(--paper);background:var(--rust)}
.formerr__go{flex:none;margin-left:auto;align-self:center;font-weight:650;font-size:12.8px;color:var(--rust);
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.formerr__go:hover{opacity:.75}
.f.bad .inp{border-color:var(--rust)}
.f.bad .warn{display:block}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.check input{width:16px;height:16px;accent-color:var(--ember)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 17px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);font-weight:600;font-size:14px;
  transition:transform .16s cubic-bezier(.3,1.4,.5,1),box-shadow .18s,background .18s,border-color .18s;
}
.btn:hover{transform:translateY(-1.5px);box-shadow:var(--lift)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
[data-theme="dark"] .btn--solid{background:var(--ember);border-color:var(--ember);color:#14100c}
.btn--ember{background:var(--ember);border-color:var(--ember);color:#fff}
.btn--wide{width:100%}
.btn--sm{padding:7px 11px;font-size:13px;border-radius:9px}
.btn--danger{color:var(--rust);border-color:color-mix(in srgb,var(--rust) 32%,var(--line))}
.btn--quiet{background:transparent}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn .spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent}


/* ---------------- Shell ---------------- */
.shell{display:grid;grid-template-columns:246px 1fr;min-height:100dvh}
.rail{
  position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:6px;padding:20px 14px;
  background:var(--card);border-right:1px solid var(--line);z-index:40;
}
.rail__top{padding:4px 8px 16px}
.rail__nav{display:grid;gap:3px}
.navgrp{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:15px 10px 6px}
.navlink{
  position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  color:var(--ink-2);font-weight:550;font-size:14px;text-align:left;width:100%;
  transition:background .18s,color .18s,transform .18s;
}
.navlink:hover{background:var(--card-2);color:var(--ink);transform:translateX(2px)}
.navlink.is-on{background:var(--card-2);color:var(--ink);font-weight:650}
.navlink.is-on::before{content:"";position:absolute;left:-14px;top:50%;translate:0 -50%;width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--ember)}
.navlink .tally{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;background:var(--paper);border:1px solid var(--line);padding:1px 7px;border-radius:99px;color:var(--ink-3)}
.rail__foot{margin-top:auto;display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.who{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px;width:100%;text-align:left;transition:background .18s}
.who:hover{background:var(--card-2)}
.who__txt{display:grid;min-width:0}
.who__txt b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who__txt small{font-size:11.5px;color:var(--ink-3);text-transform:capitalize}
.ghostbtn{font-size:12.5px;color:var(--ink-3);padding:7px 9px;border-radius:9px;text-align:left;transition:color .18s,background .18s}
.ghostbtn:hover{color:var(--rust);background:var(--card-2)}
.pip{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;flex:none;letter-spacing:.02em}

.frame{display:flex;flex-direction:column;min-width:0}
.bar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:13px 26px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar__title h2{font-size:17.5px}
.bar__title p{font-size:12.5px;color:var(--ink-3)}
.bar__tools{margin-left:auto;display:flex;align-items:center;gap:9px}
.finder{position:relative;display:flex;align-items:center}
.finder svg{position:absolute;left:11px;color:var(--ink-3);width:16px;height:16px}
.finder input{width:250px;padding:9px 44px 9px 34px;border-radius:11px;border:1px solid var(--line);background:var(--card);transition:border-color .18s,box-shadow .18s,width .25s}
.finder input:focus{outline:none;border-color:var(--ember);box-shadow:var(--ring);width:300px}
.finder kbd{position:absolute;right:9px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px}
.iconbtn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--card);transition:transform .18s,background .18s}
.iconbtn:hover{background:var(--card-2);transform:translateY(-1px)}
.cta{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;background:var(--ink);color:var(--paper);font-weight:600;font-size:13.5px;transition:transform .18s,box-shadow .2s,filter .2s}
[data-theme="dark"] .cta{background:var(--ember);color:#14100c}
.cta:hover{transform:translateY(-1.5px);box-shadow:var(--lift)}
.cta svg{width:16px;height:16px}
.only-sm{display:none}
body[data-role="student"] .only-student{display:inline-flex}
.only-student{display:none}

.page{padding:24px 26px 60px;display:grid;gap:18px;align-content:start;max-width:1320px;width:100%}

/* ---------------- Surfaces ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift)}
.card__h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card__h h3{font-size:15px}
.card__h p{font-size:12.5px;color:var(--ink-3)}
.card__b{padding:20px}
.card__f{padding:12px 20px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.spread{margin-left:auto}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(208px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.stat{position:relative;overflow:hidden;padding:18px 20px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--lift)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ember)}
.stat.k-pine::before{background:var(--pine)} .stat.k-sky::before{background:var(--sky)} .stat.k-gold::before{background:var(--gold)}
.stat__k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.stat__v{font-family:var(--serif);font-size:34px;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.stat__n{font-size:12.5px;color:var(--ink-3);margin-top:2px}

.meter{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:12px;padding:6px 0}
.meter__l{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter__t{height:8px;border-radius:99px;background:var(--card-2);overflow:hidden}
.meter__t i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--ember),var(--gold))}
.meter.m-pine .meter__t i{background:linear-gradient(90deg,var(--pine),#6fc0aa)}
.meter.m-sky .meter__t i{background:linear-gradient(90deg,var(--sky),#7fb3e0)}
.meter__v{text-align:right;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------------- Table ---------------- */
.tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.tools .inp{width:auto;min-width:140px;padding:8px 12px;font-size:13.5px}
.tools select.inp{padding-right:34px}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 20px;background:var(--card-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
tbody tr{cursor:pointer;transition:background .15s}
tbody tr:hover{background:var(--card-2)}
tbody tr:last-child td{border-bottom:0}
.t1{font-weight:600}
.t2{font-size:12.4px;color:var(--ink-3);margin-top:2px}
.acts{display:flex;gap:6px;justify-content:flex-end}
.who-cell{display:flex;align-items:center;gap:10px}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:3px 10px;border-radius:99px;white-space:nowrap;
  background:var(--card-2);color:var(--ink-2)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.s-submitted{background:var(--sky-soft);color:var(--sky)}
.tag.s-acknowledged{background:var(--ember-soft);color:var(--ember)}
.tag.s-in-progress{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.tag.s-resolved{background:var(--pine-soft);color:var(--pine)}
.tag.s-closed{background:var(--card-2);color:var(--ink-3)}
.tag.r-student{background:var(--sky-soft);color:var(--sky)}
.tag.r-official{background:var(--pine-soft);color:var(--pine)}
.tag.r-admin{background:var(--ember-soft);color:var(--ember)}
.tag.st-active{background:var(--pine-soft);color:var(--pine)}
.tag.st-suspended{background:color-mix(in srgb,var(--rust) 14%,transparent);color:var(--rust)}
.pri{font-size:12.5px;font-weight:650}
.pri.p-low{color:var(--ink-3)} .pri.p-medium{color:var(--sky)} .pri.p-high{color:var(--gold)} .pri.p-critical{color:var(--rust)}
.stars{color:var(--gold);letter-spacing:1.5px;font-size:13.5px;white-space:nowrap}
.stars .no{color:var(--line-2)}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}

.blank{text-align:center;padding:56px 22px;color:var(--ink-3)}
.blank__ico{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;background:var(--card-2);color:var(--ink-3)}
.blank__ico svg{width:24px;height:24px}
.blank h4{color:var(--ink);font-size:15.5px;margin-bottom:4px}

/* ---------------- Rating ---------------- */
.rate{display:flex;gap:6px}
.rate button{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink-3);font-size:17px;transition:transform .18s cubic-bezier(.3,1.5,.5,1),background .18s,color .18s,border-color .18s}
.rate button:hover{transform:translateY(-3px) rotate(-6deg)}
.rate button.on{background:color-mix(in srgb,var(--gold) 15%,transparent);border-color:var(--gold);color:var(--gold)}

/* ---------------- Drawer / modal ---------------- */
.veil{position:fixed;inset:0;z-index:70;background:rgba(14,16,21,.5);backdrop-filter:blur(3px)}
.veil--center{display:grid;place-items:center;padding:20px}
.drawer{position:absolute;top:0;right:0;height:100%;width:min(560px,100%);background:var(--paper);border-left:1px solid var(--line);
  box-shadow:var(--lift-2);display:flex;flex-direction:column;overflow:hidden}
.drawer__h{padding:20px 22px;border-bottom:1px solid var(--line);background:var(--card)}
.drawer__b{padding:22px;overflow-y:auto;display:grid;gap:18px;align-content:start}
.drawer__f{margin-top:auto;padding:14px 22px;border-top:1px solid var(--line);background:var(--card);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.sheet{width:min(520px,100%);max-height:88vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift-2);overflow:hidden}
.sheet__h{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sheet__b{padding:20px;overflow-y:auto}
.sheet__f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end}

.thread{display:grid;gap:0;position:relative;padding-left:22px}
.thread::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.beat{position:relative;padding:0 0 16px}
.beat:last-child{padding-bottom:0}
.beat::before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--line-2)}
.beat.is-now::before{border-color:var(--ember);background:var(--ember)}
.beat b{font-size:13.6px}
.beat span{display:block;font-size:12.4px;color:var(--ink-3)}

.kv{display:grid;grid-template-columns:120px 1fr;gap:9px 14px;font-size:13.8px}
.kv dt{color:var(--ink-3);font-size:12.5px;padding-top:1px}
.kv dd{margin:0}

/* ---------------- Toasts ---------------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;gap:10px;justify-items:end}
.toast{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--pine);
  padding:12px 16px;border-radius:12px;box-shadow:var(--lift-2);font-size:14px;max-width:340px}
.toast.t-bad{border-left-color:var(--rust)}
.toast.t-info{border-left-color:var(--sky)}
.toast i{font-style:normal;font-size:15px}

/* ---------------- Responsive ---------------- */
@media (max-width:1020px){
  .gate{grid-template-columns:1fr}
  .gate__story{display:none}
  .gate__panel{padding:34px 20px}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;width:246px;transform:translateX(-104%);transition:transform .3s cubic-bezier(.65,.05,.15,1)}
  .rail.is-open{transform:none;box-shadow:var(--lift-2)}
  .only-sm{display:grid}
  .finder input{width:150px}
  .finder input:focus{width:190px}
  .bar{padding:12px 16px}
  .page{padding:18px 16px 56px}
  .f-row{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv dt{padding-top:6px}
}
@media print{.rail,.bar__tools,.toasts{display:none}}