*,*::before,*::after{box-sizing:border-box}

/* ==========================================================================
   Brand tokens — brand.legacytraditional.org
   PRIMARY    Legacy Red #CF102D (PMS 186C) · Legacy Navy #011E41 (PMS 282C)
   SECONDARY  Deep Red #7F1718 · Almost Navy #123F6D · Soft Blue #4D7DBF
   NEUTRAL    Black and white (the guide calls for these, not a cream ground)
   TYPE       Display: Georgia — the guide's named fallback, used here because
              Gelica needs an Adobe CC licence and Fraunces was not wanted
              Body: Figtree / Arial
   Legacy Red is specified as the DOMINANT colour, so it carries the rail, the
   primary action, selection, focus and the hero emphasis.
   P1-P2 take the red family, P3-P5 the blue family — which also mirrors the
   plan's split between the 24x7 clock and the business-hours clock.
   ========================================================================== */
:root{
  --bg:#FFFFFF; --bg-2:#FFFFFF; --bg-3:#F2F5F9;
  --line:#E3E9F0; --line-2:#C6D2DF;
  --txt:#011E41; --txt-2:#3D5878; --txt-3:#60748B;
  --accent:#CF102D; --accent-ink:#CF102D; --accent-deep:#7F1718;
  --accent-dim:rgba(207,16,45,.07); --accent-line:rgba(207,16,45,.32); --on-accent:#FFFFFF;
  --blue:#4D7DBF; --blue-dim:rgba(77,125,191,.16);
  --logo-a:#CF102D; --logo-b:#011E41;
  --focus:#123F6D;
  --p1:#CF102D; --p2:#7F1718; --p3:#123F6D; --p4:#4D7DBF; --p5:#76899F;
  --ok:#146B46;
  --shine:rgba(207,16,45,.08);
  --blob-1:rgba(77,125,191,.34); --blob-2:rgba(207,16,45,.2); --blob-3:rgba(18,63,109,.12);
  --grain:.035;
  --shadow:0 20px 50px -30px rgba(1,30,65,.4);
  --shadow-lift:0 1px 2px rgba(1,30,65,.05), 0 12px 28px -18px rgba(1,30,65,.3);
  --ff-display:Georgia,"Times New Roman","Nimbus Roman",serif;
  --ff-sans:"Figtree",Arial,"Helvetica Neue",sans-serif;
  --ff-mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--ff-sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100svh;
}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}

/* ---------- atmosphere ---------- */
.aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aurora i{position:absolute; display:block; border-radius:50%; filter:blur(60px); will-change:transform,opacity; transform:translateZ(0); backface-visibility:hidden; contain:strict}
.aurora .b1{width:46vw; height:46vw; min-width:22rem; min-height:22rem; top:-14vh; right:-8vw; background:var(--blob-1)}
.aurora .b2{width:38vw; height:38vw; min-width:18rem; min-height:18rem; bottom:-16vh; left:-10vw; background:var(--blob-2)}
.aurora .b3{width:30vw; height:30vw; min-width:16rem; min-height:16rem; top:48%; right:22%; background:var(--blob-3)}
@media (prefers-reduced-motion:no-preference){
  .aurora .b1{animation:drift1 26s ease-in-out infinite}
  .aurora .b2{animation:drift2 32s ease-in-out infinite}
  .aurora .b3{animation:drift3 38s ease-in-out infinite}
}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0); opacity:.85}50%{transform:translate3d(-5vw,6vh,0); opacity:1}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0); opacity:1}50%{transform:translate3d(7vw,-5vh,0); opacity:.8}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0); opacity:.75}50%{transform:translate3d(-8vw,-7vh,0); opacity:1}}
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- chrome ---------- */
.rail{position:fixed; top:0; left:0; right:0; height:3px; background:var(--line); z-index:40}
.rail i{
  display:block; height:100%; width:0; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--accent-ink),var(--accent) 65%,var(--blue));
  box-shadow:0 0 14px var(--accent-line); transition:width .55s cubic-bezier(.3,.9,.3,1);
}

.brandbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1.1rem,4vw,2.6rem);
}
.brand{display:flex; align-items:center; gap:.85rem; min-width:0}
.logo{height:46px; width:auto; flex:none; display:block}
.brand .sep{width:1px; height:30px; background:var(--line-2); flex:none}
.brand .desk{
  font-family:var(--ff-sans); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt-3); white-space:nowrap;
}
@media (max-width:520px){.brand .sep,.brand .desk{display:none}}

/* ---------- stage ---------- */
.stage{
  position:relative; z-index:1;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:7.4rem clamp(1.25rem,6vw,4rem) 7.5rem;
}
.stage.top{align-items:flex-start}
.screen{width:100%; max-width:46rem; margin:0 auto; will-change:transform,opacity}
.screen.wide{max-width:54rem}
@media (prefers-reduced-motion:no-preference){
  .screen{animation:rise .5s cubic-bezier(.19,.86,.28,1) both}
  .screen.back{animation-name:fall}
  .screen.leaving{animation:leave .19s cubic-bezier(.5,0,.75,0) both}
  .screen.leaving.back{animation-name:leaveBack}
  .screen > *{animation:fade .55s cubic-bezier(.19,.86,.28,1) both; animation-delay:calc(var(--i,0) * 52ms + 30ms)}
  .screen.leaving > *{animation:none}
}
@keyframes rise{from{opacity:0; transform:translate3d(0,24px,0)}to{opacity:1; transform:translate3d(0,0,0)}}
@keyframes fall{from{opacity:0; transform:translate3d(0,-20px,0)}to{opacity:1; transform:translate3d(0,0,0)}}
@keyframes leave{to{opacity:0; transform:translate3d(0,-16px,0)}}
@keyframes leaveBack{to{opacity:0; transform:translate3d(0,16px,0)}}
@keyframes fade{from{opacity:0; transform:translate3d(0,9px,0)}to{opacity:1; transform:translate3d(0,0,0)}}

.eyebrow{
  font-family:var(--ff-sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-ink); display:flex; align-items:center; gap:.65rem; margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:.42rem; height:.42rem; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 3px var(--accent-dim);
}
.eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--accent-line),transparent); max-width:9rem}

h1.q{
  font-family:var(--ff-display); font-weight:400;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  font-size:clamp(1.6rem,4.1vw,2.6rem); line-height:1.16; letter-spacing:-.012em;
  margin:0 0 .7rem; text-wrap:balance;
}
p.help{margin:0 0 1.9rem; color:var(--txt-2); font-size:1.02rem; max-width:46ch}
p.help b{color:var(--txt); font-weight:600}

/* ---------- inputs ---------- */
.field{display:flex; flex-direction:column; gap:.5rem}
.wrap{position:relative}
.wrap::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .38s cubic-bezier(.19,.86,.28,1);
}
.wrap:focus-within::after{transform:scaleX(1)}
input[type=text],input[type=email],textarea{
  width:100%; background:transparent; color:var(--txt);
  font-family:var(--ff-sans); font-size:clamp(1.12rem,2.3vw,1.45rem); font-weight:400;
  border:none; border-bottom:2px solid var(--line-2); border-radius:0;
  padding:.5rem .1rem .65rem; transition:border-color .2s;
}
textarea{
  font-size:1.05rem; line-height:1.6; border:1px solid var(--line-2); border-radius:12px;
  background:var(--bg-2); padding:1rem 1.05rem; min-height:9.5rem; resize:vertical;
  box-shadow:var(--shadow-lift); transition:border-color .2s, box-shadow .2s;
}
input:focus,textarea:focus{outline:none}
textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-dim)}
input::placeholder,textarea::placeholder{color:var(--txt-3); opacity:1}
.counter{font:500 .74rem/1 var(--ff-sans); color:var(--txt-3); align-self:flex-end; letter-spacing:.06em}
.counter.warn{color:var(--p2)}

.duo{display:grid; gap:1.6rem; grid-template-columns:1fr}
@media (min-width:720px){.duo{grid-template-columns:1fr 1fr; gap:1.8rem}}
.duo label{
  display:block; font:600 .68rem/1 var(--ff-sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3); margin-bottom:.55rem;
}
.duo input{font-size:clamp(1.02rem,2vw,1.2rem)}

.err{
  display:flex; gap:.5rem; align-items:center; color:var(--p1);
  font-size:.9rem; margin-top:.9rem; min-height:1.3rem;
}
.err:empty{margin:0; min-height:0}
.err::before{content:"!"; font-family:var(--ff-sans); font-weight:500; width:1.15rem; height:1.15rem; flex:none;
  border:1.5px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:.72rem; line-height:1}
.err:empty::before{display:none}
@media (prefers-reduced-motion:no-preference){.err:not(:empty){animation:nudge .32s ease}}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- options ---------- */
.opts{display:flex; flex-direction:column; gap:.6rem}
.opts.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); gap:.55rem}
.opt{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  background:var(--bg-2); color:var(--txt); cursor:pointer;
  border:1px solid var(--line-2); border-radius:12px;
  padding:.95rem 1.05rem; font-family:inherit; font-size:1rem;
  box-shadow:var(--shadow-lift);
  transition:border-color .18s, transform .18s cubic-bezier(.19,.86,.28,1), box-shadow .18s;
}
.opt::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,var(--shine) 50%,transparent 68%);
  transform:translateX(-120%); transition:transform .75s cubic-bezier(.3,.8,.3,1);
}
.opt:hover{border-color:var(--accent-line); transform:translateX(4px); box-shadow:0 2px 4px rgba(0,0,0,.04), 0 16px 32px -20px var(--accent-line)}
.opt:hover::after{transform:translateX(120%)}
.opts.grid .opt{padding:.82rem .9rem; font-size:.95rem}
.opts.grid .opt:hover{transform:translateY(-3px)}
.opt .key{
  position:relative; flex:none; width:1.7rem; height:1.7rem; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:6px; color:var(--txt-3);
  font:600 .75rem/1 var(--ff-sans); transition:.2s;
}
.opt .key::after{
  content:"\2713"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-sans); font-size:.95rem; font-weight:700; color:var(--on-accent);
  opacity:0; transform:scale(.4) rotate(-20deg); transition:.22s cubic-bezier(.2,1.5,.4,1);
}
.opt:hover .key{border-color:var(--accent); color:var(--accent-ink)}
.opt .lab{flex:1; min-width:0}
.opt .lab b{display:block; font-weight:600; letter-spacing:-.005em}
.opt .lab span{display:block; color:var(--txt-2); font-size:.85rem; line-height:1.45; margin-top:.12rem; font-weight:400}
.opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-dim); box-shadow:0 0 0 3px var(--accent-dim)}
.opt[aria-pressed="true"] .key{background:var(--accent); border-color:var(--accent); color:transparent}
.opt[aria-pressed="true"] .key::after{opacity:1; transform:none}

/* combobox */
.combo-list{
  list-style:none; margin:.8rem 0 0; padding:.35rem; max-height:16rem; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow);
}
.combo-list:empty{display:none; border:none}
.combo-list li{
  padding:.55rem .75rem; border-radius:8px; cursor:pointer; font-size:.97rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline; transition:.14s;
}
.combo-list li em{font-style:normal; font-family:var(--ff-sans); font-size:.7rem; color:var(--txt-3); letter-spacing:.1em; flex:none}
.combo-list li[aria-selected="true"]{background:var(--accent-dim); color:var(--accent-ink)}
.combo-list li[aria-selected="true"] em{color:var(--accent-ink)}

/* ---------- statement ---------- */
.notice{
  position:relative; overflow:hidden;
  border:1px solid var(--accent-line); background:var(--accent-dim);
  border-radius:14px; padding:1.2rem 1.35rem; display:flex; gap:.95rem; align-items:flex-start;
  margin:0 0 1.9rem;
}
.notice::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.notice .ico{
  flex:none; width:1.95rem; height:1.95rem; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font:700 1rem/1 var(--ff-display);
  box-shadow:0 0 0 5px var(--accent-dim);
}
.notice p{margin:0; font-size:.97rem; color:var(--txt-2)}
.notice p b{color:var(--txt); font-weight:600}
.notice p + p{margin-top:.5rem}

/* ---------- footer ---------- */
.bar{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1.1rem,4vw,2.6rem) 1.25rem;
  background:linear-gradient(to top,var(--bg) 55%,transparent);
}
.bar.hide{display:none}
.navgrp{display:flex; align-items:center; gap:.7rem; min-width:0}
.ghost{
  background:none; border:1px solid var(--line-2); color:var(--txt-2); cursor:pointer;
  border-radius:9px; padding:.54rem .9rem; font:500 .85rem/1 var(--ff-sans); transition:.18s;
  display:inline-flex; align-items:center; gap:.45rem;
}
.ghost:hover:not(:disabled){border-color:var(--txt-3); color:var(--txt); transform:translateY(-1px)}
.ghost:disabled{opacity:.3; cursor:not-allowed}
.count{font:500 .75rem/1 var(--ff-sans); color:var(--txt-3); letter-spacing:.1em; white-space:nowrap}
.count b{color:var(--txt-2); font-weight:500}
@media (max-width:560px){.count{display:none}}
.cta{
  position:relative; overflow:hidden;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); cursor:pointer;
  border-radius:9px; padding:.75rem 1.35rem; font:600 .98rem/1 var(--ff-sans);
  display:inline-flex; align-items:center; gap:.6rem;
  box-shadow:0 2px 6px -1px var(--accent-line), 0 10px 24px -14px var(--accent);
  transition:transform .18s cubic-bezier(.19,.86,.28,1), box-shadow .18s, background .18s, border-color .18s;
}
.cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .7s cubic-bezier(.3,.8,.3,1);
}
.cta:hover{background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-2px); box-shadow:0 4px 10px -2px var(--accent-line), 0 18px 34px -16px var(--accent)}
.cta:hover::after{transform:translateX(120%)}
.cta:active{transform:translateY(0)}
.cta.quiet{background:none; color:var(--txt); border-color:var(--line-2); box-shadow:none}
.cta.quiet:hover{border-color:var(--accent); color:var(--accent-ink); background:none; box-shadow:var(--shadow-lift)}
kbd{
  font:600 .72rem/1 var(--ff-sans); border:1px solid currentColor; border-radius:4px;
  padding:.24rem .36rem; opacity:.6;
}
.hint{font:500 .77rem/1.3 var(--ff-sans); color:var(--txt-3); letter-spacing:.03em; text-align:right}
@media (max-width:700px){.hint{display:none}}

/* ---------- result ticket ---------- */
.ticket{
  position:relative; background:var(--bg-2); border:1px solid var(--line-2); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow); margin:0 0 1.6rem;
}
.ticket-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.35rem; border-bottom:1px solid var(--line); background:var(--bg-3);
}
.ticket-head .id{font:500 .78rem/1 var(--ff-mono); letter-spacing:.12em; color:var(--txt-2)}
.ticket-head .tag{
  font:600 .65rem/1 var(--ff-sans); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--txt-3); border-radius:999px; padding:.34rem .72rem;
}

.pbox{
  display:flex; gap:1.5rem; align-items:center; padding:1.9rem 1.45rem; flex-wrap:wrap;
  background:radial-gradient(26rem 15rem at 4rem 50%, color-mix(in srgb, var(--pc) 11%, transparent), transparent 72%);
}
.pchip{
  position:relative; flex:none; width:6.4rem; height:6.4rem; border-radius:18px;
  display:grid; place-items:center; align-content:center;
  border:1.5px solid var(--line-2); color:var(--txt-3); background:var(--bg-3);
  transition:color .5s ease, border-color .5s ease, background .5s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
}
.pchip b{
  font-family:var(--ff-sans); font-weight:800; font-size:2.5rem; line-height:1; letter-spacing:-.045em;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1, "tnum" 1;
  transition:opacity .45s ease, filter .45s ease, transform .45s cubic-bezier(.2,1.4,.4,1);
}
.pchip span{font:600 .6rem/1 var(--ff-sans); letter-spacing:.18em; text-transform:uppercase; margin-top:.4rem; color:var(--txt-3)}
.pchip.pending b{opacity:.18; filter:blur(5px); transform:scale(.88)}
.pchip.lit{
  color:var(--pc); border-color:var(--pc); transform:scale(1.03);
  background:color-mix(in srgb, var(--pc) 13%, transparent);
}
.pchip.lit b{opacity:1; filter:none; transform:none}
.pchip.lit::after{
  content:""; position:absolute; inset:-2px; border-radius:20px; border:2px solid var(--pc); pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .pchip.lit::after{animation:ring .85s cubic-bezier(.2,.8,.3,1) both}
}
@keyframes ring{from{opacity:.85; transform:scale(1)}to{opacity:0; transform:scale(1.35)}}
.pmeta{min-width:12rem; flex:1}
.pmeta h2{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(1.22rem,2.9vw,1.65rem);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  margin:0 0 .4rem; line-height:1.18; letter-spacing:-.016em; color:var(--pc);
  transition:color .5s ease;
}
.pmeta p{margin:0; color:var(--txt-2); font-size:.95rem; max-width:48ch}

/* derivation band inside the ticket */
.derive{padding:1.3rem 1.45rem 1.5rem; border-top:1px solid var(--line); background:var(--bg-2)}
.derive > h4{
  font:600 .66rem/1 var(--ff-sans); letter-spacing:.17em; text-transform:uppercase; color:var(--txt-3);
  margin:0 0 1rem; display:flex; align-items:center; gap:.6rem;
}
.derive > h4::after{content:""; flex:1; height:1px; background:var(--line)}
.derive .note{margin:1rem 0 0; font-size:.9rem; color:var(--txt-2)}
.derive .note b{color:var(--txt); font-weight:600}

/* perforated stub edge */
.perf{position:relative; height:0; border-top:2px dashed var(--line-2); margin:0 1.1rem}
.perf::before,.perf::after{
  content:""; position:absolute; top:-12px; width:22px; height:22px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line-2);
}
.perf::before{left:calc(-1.1rem - 11px)} .perf::after{right:calc(-1.1rem - 11px)}

.slas{display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1px; background:var(--line)}
.slas div{background:var(--bg-2); padding:1.1rem 1.35rem}
@media (prefers-reduced-motion:no-preference){
  .slas div{animation:fade .5s cubic-bezier(.19,.86,.28,1) both}
  .slas div:nth-child(1){animation-delay:var(--sd,1.4s)}
  .slas div:nth-child(2){animation-delay:calc(var(--sd,1.4s) + 110ms)}
  .slas div:nth-child(3){animation-delay:calc(var(--sd,1.4s) + 220ms)}
}
.slas dt{font:600 .64rem/1 var(--ff-sans); letter-spacing:.15em; text-transform:uppercase; color:var(--txt-3); margin:0 0 .55rem}
.slas dd{margin:0; font-size:1.08rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.slas dd small{display:block; font-size:.75rem; font-weight:400; color:var(--txt-3); margin-top:.28rem; letter-spacing:.02em}

/* ---------- result sections ---------- */
.sec{margin:0 0 1.6rem}
.sec > h3{
  font:600 .7rem/1 var(--ff-sans); letter-spacing:.17em; text-transform:uppercase; color:var(--txt-3);
  margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem;
}
.sec > h3::after{content:""; flex:1; height:1px; background:var(--line)}
.sec.lead > h3{
  font-family:var(--ff-display); font-weight:400; font-size:clamp(1.18rem,2.5vw,1.45rem);
  letter-spacing:-.012em; text-transform:none; color:var(--txt); margin-bottom:1.05rem;
}
.sec.lead > h3::after{background:var(--line-2)}

.matrix{width:100%; border-collapse:separate; border-spacing:2px; font-size:.84rem; min-width:29rem}
.matrix th,.matrix td{padding:.6rem .5rem; text-align:center; border-radius:7px}
.matrix thead th{
  font:600 .64rem/1.4 var(--ff-sans); letter-spacing:.08em; color:var(--txt-3); text-transform:uppercase;
  transition:background .45s ease, color .45s ease;
}
.matrix th[scope=row]{
  text-align:left; text-transform:none; font-size:.8rem; letter-spacing:0; color:var(--txt-2);
  font-family:var(--ff-sans); font-weight:500; padding-right:.9rem; white-space:nowrap;
  transition:background .45s ease, color .45s ease;
}
.matrix td{
  font-family:var(--ff-sans); font-weight:600; color:var(--txt-3); font-size:.84rem; font-variant-numeric:tabular-nums;
  background:var(--bg-3); transition:background .4s ease, color .4s ease, transform .45s cubic-bezier(.2,1.5,.4,1), box-shadow .4s ease;
}
.matrix.s1 th[scope=row].rh-on{background:var(--accent-dim); color:var(--accent-ink)}
.matrix.s2 thead th.ch-on{background:var(--accent-dim); color:var(--accent-ink)}
.matrix.s3 td.cell-on{
  background:var(--accent); color:var(--on-accent); transform:scale(1.1);
  box-shadow:0 0 0 3px var(--accent-dim), 0 8px 18px -8px var(--accent);
}
.scrollx{overflow-x:auto; margin:0 -.2rem; padding:.2rem}

.rules{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem}
.rules li{font-size:.93rem; border-left:2px solid var(--accent-line); padding:.15rem 0 .15rem .95rem}
.rules li b{display:block; font-weight:600; margin-bottom:.18rem}
.rules li span{color:var(--txt-2); font-size:.88rem; line-height:1.5; display:block}

.kv{display:grid; grid-template-columns:minmax(8rem,auto) 1fr auto; gap:.1rem 1.2rem; align-items:baseline}
.kv dt{
  font:600 .66rem/1.6 var(--ff-sans); letter-spacing:.13em; text-transform:uppercase; color:var(--txt-3);
  padding:.72rem 0; border-top:1px solid var(--line);
}
.kv dd{margin:0; padding:.72rem 0; border-top:1px solid var(--line); font-size:.96rem; overflow-wrap:anywhere; white-space:pre-wrap}
.kv .edit{
  border:none; border-top:1px solid var(--line); padding:.72rem 0; background:none;
  color:var(--txt-3); cursor:pointer; font:600 .7rem/1.6 var(--ff-sans); letter-spacing:.11em; text-transform:uppercase;
  transition:color .16s;
}
.kv .edit:hover{color:var(--accent-ink)}
@media (max-width:620px){
  .kv{grid-template-columns:1fr auto}
  .kv dt{border-top:1px solid var(--line); padding-bottom:0}
  .kv dd{border-top:none; padding-top:.2rem; grid-column:1/-1}
  .kv .edit{border-top:1px solid var(--line)}
}

.kb{
  position:relative; overflow:hidden;
  border:1px solid var(--ok); border-radius:14px; padding:1.2rem 1.35rem;
  background:color-mix(in srgb, var(--ok) 8%, transparent);
}
.kb::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ok)}
.kb h4{margin:0 0 .55rem; font-size:.95rem; font-weight:600; display:flex; align-items:center; gap:.55rem; color:var(--ok)}
.kb h4 i{font-style:normal; font-family:var(--ff-sans); font-size:.72rem; letter-spacing:.1em;
  border:1px solid currentColor; border-radius:4px; padding:.16rem .32rem}
.kb p{margin:0; font-size:.95rem; white-space:pre-wrap; overflow-wrap:anywhere}
.kb .fine{margin-top:.75rem; font-size:.82rem; color:var(--txt-2)}

details.json{border:1px solid var(--line-2); border-radius:14px; background:var(--bg-2); overflow:hidden}
details.json summary{
  cursor:pointer; padding:.9rem 1.25rem; font:500 .8rem/1 var(--ff-mono); letter-spacing:.06em;
  color:var(--txt-2); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:color .16s;
}
details.json summary::-webkit-details-marker{display:none}
details.json summary::after{content:"+"; font-size:1.15rem; color:var(--txt-3)}
details.json[open] summary::after{content:"\2212"}
details.json summary:hover{color:var(--accent-ink)}
details.json pre{
  margin:0; padding:1.1rem 1.25rem; border-top:1px solid var(--line); overflow-x:auto;
  font:400 .79rem/1.65 var(--ff-mono); color:var(--txt-2); background:var(--bg);
}

/* ---------- people ---------- */
.path{display:flex; flex-direction:column}
.person{
  display:flex; align-items:flex-start; gap:.95rem;
  padding:1.05rem 1.15rem; border:1px solid var(--line-2); border-radius:14px;
  background:var(--bg-2); box-shadow:var(--shadow-lift);
}
@media (prefers-reduced-motion:no-preference){
  .path > *{animation:fade .55s cubic-bezier(.19,.86,.28,1) both}
  .path > *:nth-child(1){animation-delay:1.65s}
  .path > *:nth-child(2){animation-delay:1.78s}
  .path > *:nth-child(3){animation-delay:1.88s}
  .path > *:nth-child(4){animation-delay:2.0s}
  .path > *:nth-child(5){animation-delay:2.1s}
}
.av{
  width:3rem; height:3rem; border-radius:50%; flex:none;
  display:grid; place-items:center; object-fit:cover; overflow:hidden;
  font:700 .95rem/1 var(--ff-sans); letter-spacing:.04em;
  margin-top:.1rem;
}
.av.tech{background:var(--bg-3); color:var(--txt); border:2px solid var(--blue)}
.av.mgr{background:var(--accent-dim); color:var(--accent-ink); border:2px solid var(--accent)}
.person .who{min-width:0; flex:1}
.whohead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem; margin-bottom:.15rem;
}
.whohead > b{font-weight:700; font-size:1.02rem; letter-spacing:-.01em; min-width:0}
.person .who .role{
  display:block; font:600 .67rem/1.35 var(--ff-sans); letter-spacing:.11em;
  text-transform:uppercase; color:var(--txt-3); margin:0 0 .5rem;
}
.person .who .when{display:block; font-size:.87rem; color:var(--txt-2); line-height:1.5}
.person .who .when b{color:var(--txt); font-weight:700}
.badge{
  flex:none; white-space:nowrap;
  font:600 .58rem/1 var(--ff-sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-accent); background:var(--accent); border-radius:999px; padding:.32rem .58rem;
}
.badge.quiet{background:none; color:var(--txt-3); border:1px solid var(--line-2)}
@media (max-width:420px){
  .whohead{flex-direction:column; align-items:flex-start; gap:.35rem}
}
.fineprint{margin:.95rem 0 0; font-size:.85rem; color:var(--txt-3); line-height:1.5; max-width:62ch}

.sec.stack{display:flex; flex-direction:column; gap:.6rem}
details.json .pad{padding:1.1rem 1.25rem; border-top:1px solid var(--line)}
details.json .pad .kv > :nth-child(-n+3){border-top:none; padding-top:0}
details.json .pad .rules{padding:.1rem 0}

/* ---------- triage scan ---------- */
.scan{display:flex; gap:.5rem; align-items:center; margin:0 0 1.7rem; height:1rem}
.scan .dot{width:.6rem; height:.6rem; border-radius:50%; background:var(--accent); opacity:.28}
@media (prefers-reduced-motion:no-preference){
  .scan .dot{animation:pulse 1.1s ease-in-out infinite}
  .scan .dot:nth-child(2){animation-delay:.16s}
  .scan .dot:nth-child(3){animation-delay:.32s}
}
@keyframes pulse{0%,100%{opacity:.22; transform:scale(.82)}50%{opacity:1; transform:scale(1)}}
.scan.done .dot{animation:none; opacity:.2}

.found{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.found li{
  display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  padding:.72rem .95rem; border:1px solid var(--line); border-radius:10px; background:var(--bg-2);
}
@media (prefers-reduced-motion:no-preference){
  .found li{animation:fade .45s cubic-bezier(.19,.86,.28,1) both; animation-delay:var(--d,0ms)}
}
.found .tick{color:var(--ok); font-weight:700; flex:none; font-size:.95rem}
.found .fk{
  font:600 .67rem/1.5 var(--ff-sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-3); flex:none; min-width:5.4rem;
}
.found .fv{color:var(--txt); font-size:.95rem; flex:1; min-width:0; overflow-wrap:anywhere}

/* signed-in chip */
.signedin{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:.6rem 1.15rem .6rem .6rem; border:1px solid var(--line-2); border-radius:999px;
  background:var(--bg-2); box-shadow:var(--shadow-lift);
  font-size:.85rem; color:var(--txt-2); line-height:1.35;
}
.signedin b{color:var(--txt); font-weight:700}
.av.me{width:2.5rem; height:2.5rem; font-size:.82rem; background:var(--bg-3); color:var(--txt); border:2px solid var(--line-2)}

/* marks a field the triage pass filled in */
.aichip{
  display:inline-block; margin-left:.4rem;
  font:600 .55rem/1 var(--ff-sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); border:1px solid var(--blue); border-radius:999px; padding:.2rem .36rem;
}

/* header identity */
.barright{display:flex; align-items:center; gap:.7rem; flex:none}
.whoami{
  display:flex; align-items:center; gap:.55rem;
  padding:.3rem .8rem .3rem .3rem; border:1px solid var(--line); border-radius:999px;
  background:var(--bg-2); max-width:15rem;
}
.whoami .av{width:1.85rem; height:1.85rem; font-size:.64rem; border-width:1.5px}
.whoami .nm{
  font-size:.8rem; font-weight:600; color:var(--txt-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:760px){.whoami .nm{display:none} .whoami{padding:.3rem}}
@media (max-width:420px){.whoami{display:none}}

/* ---------- person card ---------- */
.person.warn{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.av.spec{background:var(--blue-dim); color:var(--txt); border:2px solid var(--blue)}

/* ---------- escalation path ---------- */
.path .person{width:100%}

/* the connector between two steps: a rule down from the avatar centre,
   an arrowhead into the next card, and the condition alongside it */
.rung{
  position:relative; display:flex; align-items:center;
  margin:0 0 0 2.85rem; padding:.7rem 0 .7rem 1.15rem; min-height:2.9rem;
}
.rung::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--line-2), var(--accent)); transform:translateX(-1px);
}
.rung::after{
  content:""; position:absolute; left:-5px; bottom:-2px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:7px solid var(--accent);
}
.rung span{font-size:.84rem; color:var(--txt-3); line-height:1.4}
@media (max-width:520px){
  .rung{margin-left:1.9rem}
}

/* closing facts — same hairline-cell language as the SLA row */
.notestrip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin:1.4rem 0 0;
}
.notestrip > div{background:var(--bg-2); padding:.95rem 1.1rem}
.notestrip dt{
  font:600 .63rem/1 var(--ff-sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); margin:0 0 .5rem;
}
.notestrip dd{margin:0; font-size:.95rem; font-weight:600; color:var(--txt); line-height:1.3}
.notestrip dd small{
  display:block; font-size:.78rem; font-weight:400; color:var(--txt-3);
  margin-top:.28rem; letter-spacing:.01em; line-height:1.4;
}

/* submitted state */
.cta.done{
  background:var(--ok); border-color:var(--ok); cursor:default; box-shadow:none;
  opacity:1; transform:none;
}
.cta.done::after{display:none}
.cta:disabled{cursor:default}

.pbtn{
  display:inline-block; text-align:center; text-decoration:none; white-space:nowrap;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
  border-radius:8px; padding:.6rem .95rem; font:600 .85rem/1 var(--ff-sans);
  transition:background .16s, border-color .16s;
}
.pbtn:hover{background:var(--accent-deep); border-color:var(--accent-deep)}

/* ---------- P1: major incident ---------- */
.eyebrow.alarm{color:var(--accent-ink)}
.eyebrow.alarm::before{
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim), 0 0 10px var(--accent);
}
@media (prefers-reduced-motion:no-preference){
  .eyebrow.alarm::before{animation:throb 1.6s ease-in-out infinite}
}
@keyframes throb{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.5; transform:scale(.82)}}

.declare{
  margin:0 0 1.9rem; padding:1.15rem 1.3rem;
  border:1px solid var(--accent); border-radius:14px;
  background:var(--accent-dim);
  box-shadow:0 0 0 4px var(--accent-dim);
}
.declare-head{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:.6rem}
.declare-head b{font-size:1rem; font-weight:700; color:var(--txt); flex:1; min-width:12rem}
.declare-head .stamp{
  font:600 .68rem/1 var(--ff-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3);
}
.pulse{
  width:.6rem; height:.6rem; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 var(--accent-line);
}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:ring2 1.8s cubic-bezier(.3,.7,.3,1) infinite}
}
@keyframes ring2{
  0%{box-shadow:0 0 0 0 var(--accent-line)}
  70%{box-shadow:0 0 0 .7rem rgba(207,16,45,0)}
  100%{box-shadow:0 0 0 0 rgba(207,16,45,0)}
}
.declare p{margin:0 0 .9rem; font-size:.93rem; color:var(--txt-2); line-height:1.55}
.pbtn.wide{display:block; flex:none; text-align:center}

.ticket.major{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim), var(--shadow)}
.ticket.major .ticket-head{background:var(--accent); border-bottom-color:var(--accent)}
.ticket.major .ticket-head .id{color:var(--on-accent)}
.ticket.major .ticket-head .tag{color:var(--on-accent); border-color:rgba(255,255,255,.55)}

/* the command team is a grid — everyone at once, not a sequence */
.team{display:grid; gap:.7rem; grid-template-columns:1fr}
@media (min-width:660px){.team{grid-template-columns:1fr 1fr}}
.team .person{width:100%}
@media (prefers-reduced-motion:no-preference){
  .team > *{animation:fade .5s cubic-bezier(.19,.86,.28,1) both}
  .team > *:nth-child(1){animation-delay:1.6s}
  .team > *:nth-child(2){animation-delay:1.7s}
  .team > *:nth-child(3){animation-delay:1.8s}
  .team > *:nth-child(4){animation-delay:1.9s}
}
.av.dir{background:var(--accent-dim); color:var(--accent-ink); border:2px solid var(--accent-ink)}

.actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem}
.eyebrow.filed{color:var(--ok)}
.eyebrow.filed::before{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent)}
.ticket-head .filedat{
  font:600 .65rem/1 var(--ff-sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-3); margin-right:auto;
}
.ticket.major .ticket-head .filedat{color:rgba(255,255,255,.8)}