/* Atlantic staff portal — one theme system, two skins.
   Dark is the working default; [data-theme=light] swaps the variables. */
@import url('./colors_and_type.css');

*{box-sizing:border-box}
:root{
--sp-zoom:1;
--sp-bg:#0D1216;--sp-bg2:#0E141A;--sp-panel:rgba(255,255,255,.055);--sp-panel-solid:#121A21;--sp-raise:rgba(255,255,255,.085);
--sp-line:rgba(255,255,255,.1);--sp-line2:rgba(255,255,255,.18);
--sp-ink:#EDF2F5;--sp-head:#fff;--sp-dim:#9BAAB5;--sp-dim2:#687986;
--sp-shell:rgba(255,255,255,.045);--sp-shell-blur:blur(26px);--sp-sheet:rgba(14,20,26,.86);--sp-sheen:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
--sp-blur:blur(20px);--sp-glow:radial-gradient(900px 520px at 12% -6%,rgba(237,31,54,.30),transparent 62%),radial-gradient(760px 480px at 92% 8%,rgba(161,17,25,.26),transparent 60%),radial-gradient(700px 500px at 62% 108%,rgba(46,111,190,.14),transparent 62%);
--sp-field:rgba(255,255,255,.045);--sp-stub:rgba(255,255,255,.06);
--sp-red:#FF6274;--sp-info:#7FB2EE;--sp-gold:#EFC067;--sp-warn:#EFAE63;--sp-ok:#54CC96;
--sp-shadow:0 24px 60px -26px rgba(0,0,0,.85);
}
[data-theme=light]{
--sp-bg:#FFFFFF;--sp-bg2:#fff;--sp-panel:#fff;--sp-panel-solid:#fff;--sp-raise:#F4F0EA;
--sp-line:#E7E3DD;--sp-line2:#D8D2CA;
--sp-ink:#45525B;--sp-head:#232C32;--sp-dim:#647079;--sp-dim2:#8A949B;
--sp-shell:rgba(255,255,255,.74);--sp-shell-blur:blur(18px);--sp-sheet:#fff;--sp-sheen:linear-gradient(90deg,transparent,var(--sp-line2),transparent);
--sp-blur:none;--sp-glow:radial-gradient(900px 520px at 8% -10%,rgba(225,18,38,.09),transparent 62%),radial-gradient(700px 420px at 96% 0%,rgba(224,160,48,.08),transparent 60%),radial-gradient(680px 520px at 58% 112%,rgba(46,111,190,.06),transparent 62%);
--sp-field:#FBFAF8;--sp-stub:#F4F0EA;
--sp-red:#C7101F;--sp-info:#2E6FBE;--sp-gold:#9A6C14;--sp-warn:#B4700F;--sp-ok:#12704A;
--sp-shadow:0 18px 44px -22px rgba(35,44,50,.3);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sp-bg);color:var(--sp-ink);font-family:var(--att-font-body);font-size:14px;-webkit-font-smoothing:antialiased;transition:background .3s var(--att-ease),color .3s var(--att-ease)}
body::before{content:"";position:fixed;inset:0;background:var(--sp-glow);pointer-events:none;z-index:0}
a{color:var(--sp-red)}
#root{position:relative;z-index:1}
/* overall portal scale — every px value below is authored at 1x and scaled here */
@media(min-width:900px){:root{--sp-zoom:1.12}#root{zoom:var(--sp-zoom)}}
@media(min-width:1900px){:root{--sp-zoom:1.2}}
:root{color-scheme:dark}
[data-theme=light]{color-scheme:light}
::selection{background:rgba(225,18,38,.3)}
input,select,textarea,button{font-family:inherit}

/* ---------- shell ---------- */
.sp-app{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:calc(100vh / var(--sp-zoom))}
.sp-rail{width:252px;border-right:1px solid var(--sp-line);background:var(--sp-shell);backdrop-filter:var(--sp-shell-blur);-webkit-backdrop-filter:var(--sp-shell-blur);display:flex;flex-direction:column;gap:4px;padding:16px 12px 14px;position:sticky;top:0;height:calc(100vh / var(--sp-zoom));overflow:auto;transition:width .25s var(--att-ease)}
.sp-rail.mini{width:80px;align-items:center;padding:16px 8px 14px}
.sp-brand{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 4px 18px;flex:none}
.sp-brand .lockup{width:196px;height:auto;object-fit:contain;display:none}
.sp-brand .lockup.w{display:block}
.sp-brand .mark{display:none}
[data-theme=light] .sp-brand .lockup{display:block}
[data-theme=light] .sp-brand .lockup.w{display:none}
.sp-brand .mark{width:40px;height:40px;object-fit:contain}
.sp-brand .wm{font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--sp-red)}
.sp-rail.mini .sp-brand{padding:2px 0 12px;width:100%;align-items:center;justify-content:center;cursor:pointer}
.sp-rail.mini .sp-brand .lockup,.sp-rail.mini .sp-brand .wm{display:none}
.sp-rail.mini .sp-brand .mark{display:block;width:46px;height:46px;margin:0 auto}
.sp-rail.mini .sp-nav{width:48px;height:46px;justify-content:center;padding:0;margin:0 auto}
.sp-rail.mini .sp-nav .sp-chev{display:none}
.sp-rail.mini .sp-nav .dot{position:absolute;top:7px;right:7px;margin:0}
.sp-rail.mini .sp-nav svg{margin:0}
.sp-expand{all:unset;cursor:pointer;width:48px;height:40px;flex:none;margin:0 auto 8px;border-radius:12px;display:grid;place-items:center;color:var(--sp-red);border:1px dashed var(--sp-line2);transition:all .16s}
.sp-expand:hover{background:var(--sp-raise);border-style:solid;border-color:var(--att-red);color:var(--sp-head)}
.sp-rail.mini .sp-railfoot{justify-content:center;flex-direction:column;gap:8px}.sp-collapse{all:unset;cursor:pointer;position:absolute;top:0;right:0;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--sp-dim2)}
.sp-collapse:hover{background:var(--sp-raise);color:var(--sp-head)}
.sp-rail.mini .sp-collapse{display:none}
.sp-grp{font-size:9.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--sp-dim2);padding:16px 10px 7px;margin:0;flex:none;display:flex;align-items:center;gap:9px}
.sp-grp::after{content:"";flex:1;height:1px;background:var(--sp-line)}
.sp-rail.mini .sp-grp{display:none}
.sp-rail.mini .sp-grpdot{display:block;width:18px;height:1px;background:var(--sp-line);margin:9px auto}
.sp-grpdot{display:none}
/* nested nav */
.sp-kids{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--att-ease)}
.sp-kids.open{grid-template-rows:1fr}
.sp-kids>div{overflow:hidden}
.sp-kidwrap{display:flex;flex-direction:column;gap:1px;margin:3px 0 6px;padding-left:19px;position:relative}
.sp-kidwrap::before{content:"";position:absolute;left:9px;top:4px;bottom:4px;width:1px;background:var(--sp-line)}
.sp-kid{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--sp-dim2);transition:all .16s;position:relative}
.sp-kid:hover{color:var(--sp-head);background:var(--sp-raise)}
.sp-kid.on{color:var(--sp-head);font-weight:700;background:var(--sp-raise)}
.sp-kid.on::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--att-red)}
.sp-kid .n{margin-left:auto;font-family:var(--att-font-mono);font-size:10px;color:var(--sp-dim2)}
.sp-kid .dot{width:5px;height:5px;border-radius:50%;background:var(--att-red);margin-left:auto}
.sp-rail.mini .sp-kids{display:none}
.sp-chev{width:13px;height:13px;margin-left:auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s var(--att-ease);opacity:.6}
.sp-chev.open{transform:rotate(90deg)}
.sp-nav.parent.active{color:var(--sp-head);background:var(--sp-raise)}
.sp-deskswitch{margin:2px 0 6px;flex:none;display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--sp-field);border:1px solid var(--sp-line)}
.sp-deskswitch button{all:unset;cursor:pointer;flex:1;text-align:center;padding:6px 4px;border-radius:8px;font-size:11px;font-weight:700;color:var(--sp-dim2);transition:all .16s}
.sp-deskswitch button.on{background:var(--sp-raise);color:var(--sp-head)}
[data-theme=light] .sp-deskswitch button.on{background:var(--att-ink-900);color:#fff}
.sp-rail.mini .sp-deskswitch{display:none}
.sp-signout{all:unset;cursor:pointer;font-size:11px;font-weight:700;color:var(--sp-red);margin-left:auto}
.sp-signout:hover{text-decoration:underline}
.sp-nav{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--sp-dim);position:relative;transition:background .16s,color .16s;width:100%;flex:none;box-sizing:border-box}
.sp-rail.mini .sp-nav{width:46px;height:44px;justify-content:center;padding:0;margin:0 auto}
.sp-nav:hover{background:var(--sp-raise);color:var(--sp-head)}
.sp-nav.on{color:#fff;background:var(--att-gradient);box-shadow:0 10px 24px -12px rgba(225,18,38,.9)}
.sp-nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp-nav .n{margin-left:auto;font-family:var(--att-font-mono);font-size:10.5px;opacity:.8}
.sp-nav .dot{width:6px;height:6px;border-radius:50%;background:var(--att-red);margin-left:auto;flex:none}
.sp-rail.mini .sp-nav .lbl,.sp-rail.mini .sp-nav .n{display:none}
.sp-rail.mini .sp-grpdot{display:block;width:22px;height:1px;background:var(--sp-line);margin:11px auto}
.sp-nav .tip{display:none}
.sp-rail.mini .sp-nav:hover .tip{display:block;position:absolute;left:58px;white-space:nowrap;background:var(--sp-panel-solid);border:1px solid var(--sp-line2);color:var(--sp-head);padding:5px 10px;border-radius:7px;font-size:11.5px;z-index:40;box-shadow:var(--sp-shadow)}
.sp-railfoot{margin-top:auto;flex:none;padding-top:12px;border-top:1px solid var(--sp-line);display:flex;flex-direction:column;gap:2px}
.sp-rail.mini .sp-railfoot{justify-content:center}
.sp-rail.mini .sp-railfoot .who{display:none}
.sp-railfoot .who i{font-style:normal;display:block;font-size:12.5px;font-weight:700;color:var(--sp-head);line-height:1.3}
.sp-railfoot .who small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sp-dim2)}

/* ---------- top bar ---------- */
.sp-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;height:58px;padding:0 22px;border-bottom:1px solid var(--sp-line);background:var(--sp-shell);backdrop-filter:var(--sp-shell-blur);-webkit-backdrop-filter:var(--sp-shell-blur);position:sticky;top:0;z-index:30}
.sp-topr{display:flex;align-items:center;gap:10px;justify-content:flex-end;min-width:0}.sp-top::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--sp-sheen);pointer-events:none}
.sp-clocks{display:flex;gap:16px;align-items:center}
.sp-clock{display:flex;align-items:center;gap:7px;font-family:var(--att-font-mono);font-size:12.5px;color:var(--sp-head);white-space:nowrap}
.sp-clock i{font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--sp-dim2)}
.sp-clock.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sp-ok);box-shadow:0 0 9px var(--sp-ok)}
.sp-search{position:relative;width:min(420px,44vw);justify-self:center}
.sp-search .mk{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;object-fit:contain;pointer-events:none;opacity:.95}
.sp-search input{width:100%;padding:9px 16px 9px 42px;border-radius:var(--att-r-pill);border:1px solid var(--sp-line);background:var(--sp-field);color:var(--sp-ink);font-size:12.5px;outline:none;transition:all .18s}
.sp-search input::placeholder{color:var(--sp-dim2)}
.sp-search input:focus{border-color:var(--att-red-300);background:var(--sp-raise)}
.sp-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--sp-dim2);fill:none;stroke-width:1.8}
.sp-iconbtn{all:unset;cursor:pointer;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--sp-dim);position:relative;transition:all .16s}
.sp-iconbtn:hover{background:var(--sp-raise);color:var(--sp-head)}
.sp-iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp-iconbtn .bdg{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--att-red);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--sp-bg)}
.sp-bellbtn{width:40px;height:40px}
.sp-bellbtn svg{width:22px;height:22px;stroke-width:1.55}
.sp-bellbtn .bdg{top:3px;right:2px;min-width:13px;height:13px;padding:0 3px;border-radius:7px;font-size:8.5px;font-weight:800;border:1.5px solid var(--sp-shell)}
.sp-themesw{display:flex;gap:2px;padding:3px;border-radius:var(--att-r-pill);background:var(--sp-field);border:1px solid var(--sp-line)}
.sp-themesw button{all:unset;cursor:pointer;width:30px;height:26px;border-radius:var(--att-r-pill);display:grid;place-items:center;color:var(--sp-dim2);transition:all .18s}
.sp-themesw button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.sp-themesw button.on{background:var(--sp-raise);color:var(--sp-head)}
[data-theme=light] .sp-themesw button.on{background:var(--att-ink-900);color:#fff}
.sp-avmenu{display:flex;align-items:center;gap:7px;cursor:pointer;padding-left:12px;border-left:1px solid var(--sp-line);color:var(--sp-dim)}
.sp-avmenu.on{color:var(--sp-head)}

/* top bar popovers */
.sp-popwrap{position:relative;display:flex;align-items:center}
.sp-iconbtn.on{background:var(--sp-raise);color:var(--sp-head)}
.sp-pop{position:absolute;top:calc(100% + 12px);right:0;width:290px;border-radius:var(--att-r-lg);background:var(--sp-sheet);backdrop-filter:var(--sp-shell-blur);-webkit-backdrop-filter:var(--sp-shell-blur);border:1px solid var(--sp-line2);box-shadow:var(--sp-shadow);z-index:70;overflow:hidden;transform-origin:top right;animation:spPop .16s var(--att-ease-out)}
.sp-pop.wide{width:360px}
@keyframes spPop{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.sp-pophd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--sp-line)}
.sp-popwho{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--sp-line)}
.sp-popwho span{display:grid;gap:2px;min-width:0}
.sp-popwho b{font-family:var(--att-font-display);font-size:15px;font-weight:700;color:var(--sp-head);letter-spacing:-.01em}
.sp-popwho small{font-family:var(--att-font-mono);font-size:11px;color:var(--sp-dim2);overflow:hidden;text-overflow:ellipsis}
.sp-popwho i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-red);margin-top:3px}
.sp-poplist{list-style:none;margin:0;padding:6px}
.sp-poplist button{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--sp-dim);transition:all .14s}
.sp-poplist button:hover{background:var(--sp-raise);color:var(--sp-head)}
.sp-poplist .cnt{margin-left:auto;font-family:var(--att-font-mono);font-size:10.5px;font-weight:800;color:#fff;background:var(--att-red);border-radius:var(--att-r-pill);padding:2px 7px}
.sp-poplist:not(.tight) button{align-items:flex-start;padding:11px}
.sp-poplist .ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center}
.sp-poplist .ic.red{color:var(--sp-red);background:rgba(225,18,38,.14)}
.sp-poplist .ic.ok{color:var(--sp-ok);background:rgba(31,157,99,.14)}
.sp-poplist .ic.gold{color:var(--sp-gold);background:rgba(224,160,48,.14)}
.sp-poplist .ic.info{color:var(--sp-info);background:rgba(46,111,190,.14)}
.sp-poplist .ic.mute{color:var(--sp-dim2);background:var(--sp-field)}
.sp-poplist .tx{display:grid;gap:2px;min-width:0;text-align:left}
.sp-poplist .tx b{font-size:12.5px;font-weight:600;color:var(--sp-head);line-height:1.35}
.sp-poplist .tx small{font-size:11.5px;color:var(--sp-dim);line-height:1.45}
.sp-poplist .tx i{font-style:normal;font-size:10.5px;color:var(--sp-dim2);margin-top:2px}
.sp-poplist .unread{width:7px;height:7px;border-radius:50%;background:var(--att-red);flex:none;margin-top:6px}
.sp-popft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-top:1px solid var(--sp-line)}

/* ---------- avatar / upload ---------- */
.sp-av{border-radius:50%;overflow:hidden;background:var(--sp-raise);display:grid;place-items:center;font-family:var(--att-font-display);font-weight:700;color:var(--sp-red);flex:none;position:relative}
.sp-av img{width:100%;height:100%;object-fit:cover;display:none}
.sp-av.has img{display:block}
.sp-av.has b{display:none}
.sp-up{position:relative;cursor:pointer;overflow:hidden;background:var(--sp-raise)}
.sp-up img{width:100%;height:100%;object-fit:cover;display:none}
.sp-up.has img{display:block}
.sp-up.has .sp-up-ph{display:none}
.sp-up-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px}
.sp-up-ph b{font-family:var(--att-font-display);font-size:34px;font-weight:700;color:var(--sp-red);line-height:1}
.sp-up-ph small{font-size:11px;line-height:1.5;color:var(--sp-dim);max-width:22ch}
.sp-up-ov{position:absolute;inset:0;background:rgba(6,10,13,.68);display:grid;place-items:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .16s}
.sp-up:hover .sp-up-ov{opacity:1}
.sp-up.drag{outline:2px dashed var(--att-red);outline-offset:-4px}

/* ---------- page furniture ---------- */
.sp-page{padding:30px clamp(20px,2.2vw,54px) 80px;max-width:none;width:100%}
.sp-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.sp-eb{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sp-red);margin:0 0 11px}
.sp-eb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--att-red);box-shadow:0 0 10px var(--att-red)}
.sp-h1{font-family:var(--att-font-display);font-size:clamp(32px,4vw,48px);font-weight:700;letter-spacing:-.032em;line-height:1;margin:0;color:var(--sp-head)}
.sp-sub{margin:11px 0 0;font-size:14px;color:var(--sp-dim);max-width:58ch;line-height:1.55}
.sp-h2{font-family:var(--att-font-display);font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--sp-head);margin:0}
.sp-h3{font-family:var(--att-font-display);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--sp-head);margin:0}
.sp-label{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-mono{font-family:var(--att-font-mono);letter-spacing:.04em}

.sp-panel{border-radius:var(--att-r-lg);background:var(--sp-panel);border:1px solid var(--sp-line);backdrop-filter:var(--sp-blur);-webkit-backdrop-filter:var(--sp-blur);overflow:hidden;position:relative}
.sp-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--sp-sheen);pointer-events:none;z-index:1}
.sp-panel.flat{border-radius:var(--att-r-md)}
.sp-panelhd{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--sp-line)}
.sp-panelhd .sp-label{margin-right:auto}
.sp-pad{padding:20px}

.sp-mets{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.sp-met{padding:17px 19px;border-radius:var(--att-r-md);background:var(--sp-panel);border:1px solid var(--sp-line);backdrop-filter:var(--sp-blur);-webkit-backdrop-filter:var(--sp-blur);position:relative;overflow:hidden}
.sp-met::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--sp-line2),transparent)}
.sp-met span{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-dim2);margin-bottom:8px}
.sp-met b{display:block;font-family:var(--att-font-display);font-size:31px;font-weight:700;color:var(--sp-head);line-height:1;letter-spacing:-.025em}
.sp-met em{font-style:normal;display:block;margin-top:6px;font-size:11.5px;color:var(--sp-dim)}

/* buttons */
.sp-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--att-r-pill);font-size:13px;font-weight:700;color:var(--sp-dim);border:1px solid var(--sp-line2);transition:all .16s;white-space:nowrap}
.sp-btn:hover{color:var(--sp-head);background:var(--sp-raise)}
.sp-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sp-btn.p{background:var(--att-gradient);border-color:transparent;color:#fff;box-shadow:0 14px 32px -14px rgba(225,18,38,.9)}
.sp-btn.p:hover{filter:brightness(1.08);background:var(--att-gradient);color:#fff}
.sp-btn.sm{padding:7px 13px;font-size:12px}
.sp-btn.ghost{border-color:transparent}
.sp-btn.ghost:hover{border-color:var(--sp-line)}
.sp-btn[disabled]{opacity:.45;cursor:not-allowed}

/* segmented */
.sp-seg{display:flex;gap:3px;padding:3px;border-radius:var(--att-r-pill);background:var(--sp-field);border:1px solid var(--sp-line)}
.sp-seg button{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--att-r-pill);font-size:12.5px;font-weight:600;color:var(--sp-dim);transition:all .16s}
.sp-seg button:hover{color:var(--sp-head)}
.sp-seg button.on{background:var(--sp-raise);color:var(--sp-head)}
[data-theme=light] .sp-seg button.on{background:var(--att-ink-900);color:#fff}
.sp-seg svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* filter chips */
.sp-chips{display:flex;gap:7px;flex-wrap:wrap}
.sp-chips button{all:unset;cursor:pointer;padding:7px 14px;border-radius:var(--att-r-pill);border:1px solid var(--sp-line);font-size:12.5px;font-weight:600;color:var(--sp-dim);transition:all .16s}
.sp-chips button:hover{color:var(--sp-head);border-color:var(--sp-line2)}
.sp-chips button.on{background:var(--sp-head);border-color:var(--sp-head);color:var(--sp-bg)}
.sp-chips button .c{font-family:var(--att-font-mono);font-size:10.5px;opacity:.65;margin-left:5px}

/* status */
.sp-st{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:var(--att-r-pill);border:1px solid transparent;white-space:nowrap}
.sp-st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.sp-st.red{color:var(--sp-red);background:rgba(225,18,38,.13);border-color:rgba(225,18,38,.34)}
.sp-st.info{color:var(--sp-info);background:rgba(46,111,190,.13);border-color:rgba(46,111,190,.32)}
.sp-st.gold{color:var(--sp-gold);background:rgba(224,160,48,.14);border-color:rgba(224,160,48,.32)}
.sp-st.warn{color:var(--sp-warn);background:rgba(217,136,31,.13);border-color:rgba(217,136,31,.32)}
.sp-st.ok{color:var(--sp-ok);background:rgba(31,157,99,.13);border-color:rgba(31,157,99,.32)}
.sp-st.mute{color:var(--sp-dim2);background:var(--sp-field);border-color:var(--sp-line)}

/* fields */
.sp-f{display:flex;flex-direction:column;gap:7px}
.sp-f>span{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-f input,.sp-f select,.sp-f textarea{padding:11px 17px;border-radius:var(--att-r-pill);border:1px solid var(--sp-line);background:var(--sp-field);color:var(--sp-head);font-size:13.5px;outline:none;transition:all .16s;width:100%}
.sp-f input:focus,.sp-f select:focus,.sp-f textarea:focus{border-color:var(--att-red-300);background:var(--sp-raise)}
[data-theme=light] .sp-f input:focus,[data-theme=light] .sp-f select:focus,[data-theme=light] .sp-f textarea:focus{background:#fff;box-shadow:0 0 0 4px var(--att-red-50)}
.sp-f textarea{resize:vertical;min-height:80px;line-height:1.6;border-radius:20px;padding:13px 17px}
.sp-f select option{background:var(--sp-panel-solid);color:var(--sp-head)}
.sp-f small{font-size:11.5px;color:var(--sp-dim2);line-height:1.5}
.sp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.sp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.sp-w{grid-column:1/-1}

/* toggle */
.sp-tg{display:flex;align-items:center;gap:12px;cursor:pointer;padding:11px 0}
.sp-tg .sw{width:40px;height:23px;border-radius:var(--att-r-pill);background:var(--sp-field);border:1px solid var(--sp-line2);position:relative;flex:none;transition:all .2s var(--att-ease)}
.sp-tg .sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--sp-dim);transition:all .2s var(--att-ease)}
.sp-tg.on .sw{background:var(--att-red);border-color:var(--att-red)}
.sp-tg.on .sw::after{left:20px;background:#fff}
.sp-tg .tx b{display:block;font-size:13.5px;font-weight:600;color:var(--sp-head)}
.sp-tg .tx small{font-size:11.5px;color:var(--sp-dim2);line-height:1.5}

/* table */
.sp-tablewrap{overflow-x:auto;overflow-y:visible;max-width:100%}
.sp-tablewrap .sp-table{min-width:780px}
.sp-table{width:100%;border-collapse:collapse}
.sp-table thead th{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--sp-dim2);padding:11px 14px;border-bottom:1px solid var(--sp-line);white-space:nowrap;background:var(--sp-shell);backdrop-filter:var(--sp-shell-blur);-webkit-backdrop-filter:var(--sp-shell-blur)}
.sp-table thead th.r{text-align:right}
.sp-table tbody td{padding:13px 14px;border-bottom:1px solid var(--sp-line);vertical-align:middle;font-size:13px}
.sp-table tbody tr{cursor:pointer;transition:background .14s}
.sp-table tbody tr:hover{background:var(--sp-raise)}
.sp-table tbody tr:last-child td{border-bottom:0}
.sp-table td.ref{font-family:var(--att-font-mono);font-size:12.5px;color:var(--sp-red);white-space:nowrap}
.sp-table td.nm b{display:block;font-weight:600;color:var(--sp-head);font-size:13.5px}
.sp-table td.nm span{font-size:11.5px;color:var(--sp-dim2)}
.sp-table td.r{text-align:right;font-family:var(--att-font-mono);white-space:nowrap;color:var(--sp-head)}
.sp-table td.mut{color:var(--sp-dim)}
.sp-rt{display:inline-flex;align-items:center;gap:7px;font-family:var(--att-font-mono);font-size:13px;color:var(--sp-head);white-space:nowrap}
.sp-rt i{font-style:normal;color:var(--att-red);font-size:11px}
.sp-rt small{font-family:var(--att-font-body);font-size:11px;color:var(--sp-dim2);margin-left:2px}

/* dashboard · latest requests */
.sp-tablewrap .sp-lr{min-width:880px}
.sp-lr td{white-space:nowrap}
.sp-lr td.ref{font-weight:700}
.sp-lr td.nm b{white-space:nowrap;font-weight:700}
.sp-lr .sp-rt{font-weight:700}
.sp-lr .sp-st{box-sizing:border-box;min-width:132px;justify-content:center;padding:5px 12px}
.sp-lr th:nth-child(n+4),.sp-lr td:nth-child(n+4){text-align:center}
.sp-lr .mny{display:inline-flex;align-items:center;justify-content:center;min-width:124px;box-sizing:border-box;padding:9px 16px;border-radius:10px;background:var(--sp-panel-solid);border:1px solid var(--sp-line);font-family:var(--att-font-mono);font-size:13.5px;font-weight:700;color:var(--sp-head);white-space:nowrap}
.sp-lr .mny.none{font-weight:400;color:var(--sp-dim2)}
.sp-w1{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--att-font-mono)}
.sp-w1 b{font-size:16px;font-weight:700;color:var(--sp-head);letter-spacing:-.01em}
.sp-w1 u{text-decoration:none;font-family:var(--att-font-body);font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-lr .act{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:186px;min-width:186px;max-width:186px;padding:7px 12px;border-radius:9px;font-family:var(--att-font-body);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--sp-ink);border:1px solid var(--sp-line2);white-space:nowrap}
.sp-lr .act:hover{color:var(--k,var(--att-red));border-color:var(--k,var(--att-red));background:color-mix(in oklab,var(--k,var(--att-red)) 14%,transparent)}
.sp-lr .act:active{background:color-mix(in oklab,var(--k,var(--att-red)) 22%,transparent)}

/* cards view */
.sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:13px}
.sp-qc{border-radius:var(--att-r-lg);background:var(--sp-panel);border:1px solid var(--sp-line);backdrop-filter:var(--sp-blur);-webkit-backdrop-filter:var(--sp-blur);padding:19px;cursor:pointer;transition:transform .18s var(--att-ease),border-color .18s,background .18s}
.sp-qc:hover{transform:translateY(-3px);border-color:var(--sp-line2);background:var(--sp-raise);box-shadow:var(--sp-shadow)}
.sp-qc.hot{border-color:rgba(244,113,134,.45);background:linear-gradient(160deg,rgba(225,18,38,.14),var(--sp-panel))}
[data-theme=light] .sp-qc.hot{background:linear-gradient(160deg,var(--att-red-50),#fff);border-color:var(--att-red-300)}
.sp-qc .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.sp-qc .ref{font-family:var(--att-font-mono);font-size:11.5px;color:var(--sp-dim2)}
.sp-qc h3{font-family:var(--att-font-display);font-size:18px;font-weight:600;color:var(--sp-head);margin:0 0 13px;letter-spacing:-.015em}
.sp-arc{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.sp-arc b{font-family:var(--att-font-mono);font-size:16px;color:var(--sp-head)}
.sp-arc .l{flex:1;height:2px}
.sp-arc svg{width:100%;height:100%;overflow:visible}
.sp-arc path{fill:none;stroke:var(--att-red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:0.1 7;vector-effect:non-scaling-stroke}
.sp-facts{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:var(--sp-dim);line-height:1.5}
.sp-facts b{color:var(--sp-head);font-weight:700}
.sp-qc .btm{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:14px;margin-top:14px;border-top:1px solid var(--sp-line)}
.sp-val{font-family:var(--att-font-display);font-size:22px;font-weight:700;color:var(--sp-head);letter-spacing:-.02em}
.sp-val small{font-size:11px;font-weight:600;color:var(--sp-dim2);margin-right:3px}
.sp-val.none{font-size:13px;font-weight:500;color:var(--sp-dim2);font-family:var(--att-font-body)}

/* dashboard kpi cards */
.sp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:18px}
.sp-kpi{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);border-radius:var(--att-r-lg);border:1px solid var(--sp-line);background:var(--sp-panel);backdrop-filter:var(--sp-blur);-webkit-backdrop-filter:var(--sp-blur);overflow:hidden}
.sp-kpi .rail{background:var(--k);display:grid;place-items:center;color:#fff}
.sp-kpi .rail svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.sp-kpi .bd{padding:18px 18px 17px;display:grid;gap:8px;min-width:0}
.sp-kpi .lb{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--sp-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-kpi .nm{font-family:var(--att-font-display);font-size:42px;font-weight:800;letter-spacing:-.035em;color:var(--sp-head);line-height:1}
.sp-kpi .nm small{font-size:15px;font-weight:700;color:var(--sp-dim);margin-left:6px;letter-spacing:0}
.sp-kpi .ft{display:flex;align-items:center;gap:9px;min-width:0}
.sp-kpi .pill{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:color-mix(in oklab,var(--k) 22%,transparent);color:color-mix(in oklab,var(--k) 45%,white);white-space:nowrap}
.sp-kpi .sb{font-size:12px;color:var(--sp-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme=light] .sp-kpi .pill{background:color-mix(in oklab,var(--k) 14%,transparent);color:color-mix(in oklab,var(--k) 72%,black)}

/* quote row · route first */
.sp-qr{display:grid;grid-template-columns:132px minmax(240px,1fr) minmax(280px,1.05fr) 200px;border-radius:var(--att-r-md);border:1px solid var(--sp-line);background:var(--sp-panel);backdrop-filter:var(--sp-blur);-webkit-backdrop-filter:var(--sp-blur);overflow:hidden;cursor:pointer;transition:transform .16s var(--att-ease),border-color .16s,box-shadow .16s}
.sp-qr:hover{transform:translateY(-2px);border-color:var(--sp-line2);box-shadow:var(--sp-shadow)}
.sp-qr .stub{background:var(--sp-stub);padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;position:relative}
.sp-qr.hot .stub{background:var(--att-gradient)}
.sp-qr .stub .r{font-family:var(--att-font-mono);font-size:13px;color:var(--sp-head);letter-spacing:.04em}
.sp-qr.hot .stub .r{color:#fff}
.sp-qr .stub .d{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-qr.hot .stub .d{color:rgba(255,255,255,.85)}
.sp-qr .stub::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:repeating-linear-gradient(to bottom,var(--sp-line2) 0 5px,transparent 5px 10px)}
.sp-fly{padding:16px 22px;display:flex;align-items:center;gap:14px}
.sp-port{display:grid;gap:3px;text-align:center}
.sp-port b{font-family:var(--att-font-mono);font-size:26px;font-weight:500;color:var(--sp-head);line-height:1;letter-spacing:.04em}
.sp-port span{font-size:11px;color:var(--sp-dim2);white-space:nowrap}
.sp-hop{flex:1;display:grid;gap:6px;justify-items:center;min-width:56px}
.sp-hop i{width:100%;height:2px;background:radial-gradient(circle,var(--att-red) 1.2px,transparent 1.3px) repeat-x;background-size:7px 2px}
.sp-hop em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-qr .bd{padding:16px 22px;display:grid;gap:11px;align-content:center;min-width:0;border-right:1px solid var(--sp-line)}
.sp-qr .who{font-family:var(--att-font-display);font-size:19px;font-weight:700;color:var(--sp-head);letter-spacing:-.015em}
.sp-qline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--sp-head)}
.sp-qline s{text-decoration:none;color:var(--sp-dim2)}
.sp-when{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--sp-head)}
.sp-when b{font-weight:700}
.sp-when svg{width:15px;height:15px;stroke:var(--sp-dim2);fill:none;stroke-width:1.7;stroke-linecap:round}
.sp-qr .tail{padding:17px 20px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;border-left:1px solid var(--sp-line)}
@media(max-width:1100px){.sp-qr{grid-template-columns:132px minmax(0,1fr)}.sp-qr .bd{border-right:0}.sp-fly,.sp-qr .tail{grid-column:1/-1}.sp-qr .tail{flex-direction:row;align-items:center;border-left:0;border-top:1px solid var(--sp-line)}}
@media(max-width:640px){.sp-qr{grid-template-columns:1fr}.sp-qr .stub{flex-direction:row;align-items:center}.sp-qr .stub::after{display:none}.sp-fly{padding:16px}}

/* ticket stub view */
.sp-stubs{display:flex;flex-direction:column;gap:11px}
.sp-tk{display:grid;grid-template-columns:128px minmax(0,1fr) 200px;border-radius:var(--att-r-md);border:1px solid var(--sp-line);background:var(--sp-panel);backdrop-filter:var(--sp-blur);-webkit-backdrop-filter:var(--sp-blur);overflow:hidden;cursor:pointer;transition:transform .16s var(--att-ease),box-shadow .16s,border-color .16s}
.sp-tk:hover{transform:translateY(-2px);box-shadow:var(--sp-shadow);border-color:var(--sp-line2)}
.sp-tk .stub{background:var(--sp-stub);padding:15px 14px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.sp-tk.hot .stub{background:var(--att-gradient)}
.sp-tk .stub .r{font-family:var(--att-font-mono);font-size:12.5px;color:var(--sp-head)}
.sp-tk.hot .stub .r{color:#fff}
.sp-tk .stub .d{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-tk.hot .stub .d{color:rgba(255,255,255,.85)}
.sp-tk .stub::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:repeating-linear-gradient(to bottom,var(--sp-line2) 0 5px,transparent 5px 10px)}
.sp-tk .bd{padding:14px 20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sp-tk .bd .who{font-family:var(--att-font-display);font-size:16.5px;font-weight:600;color:var(--sp-head);letter-spacing:-.012em}
.sp-tk .tail{padding:14px 18px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:9px;border-left:1px solid var(--sp-line)}
.sp-age{font-size:11px;color:var(--sp-dim2)}

/* empty */
.sp-empty{padding:60px 24px;text-align:center;border:1px dashed var(--sp-line2);border-radius:var(--att-r-lg)}
.sp-empty b{display:block;font-family:var(--att-font-display);font-size:19px;color:var(--sp-head);margin-bottom:7px}
.sp-empty span{font-size:13.5px;color:var(--sp-dim)}

/* toast */
.sp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);background:var(--sp-panel-solid);border:1px solid var(--sp-line2);color:var(--sp-head);padding:12px 20px;border-radius:var(--att-r-pill);font-size:13px;font-weight:600;box-shadow:var(--sp-shadow);z-index:80;opacity:0;pointer-events:none;transition:all .25s var(--att-ease);display:flex;align-items:center;gap:9px}
.sp-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.sp-toast svg{width:16px;height:16px;stroke:var(--sp-ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* drawer */
.sp-scrim{position:fixed;inset:0;background:rgba(4,7,10,.55);backdrop-filter:blur(3px);z-index:60;opacity:0;animation:spIn .2s forwards}
@keyframes spIn{to{opacity:1}}
.sp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(660px,100%);background:var(--sp-sheet);backdrop-filter:var(--sp-shell-blur);-webkit-backdrop-filter:var(--sp-shell-blur);border-left:1px solid var(--sp-line2);z-index:61;overflow:auto;transform:translateX(22px);opacity:0;animation:spSlide .26s var(--att-ease-out) forwards;box-shadow:var(--sp-shadow)}
@keyframes spSlide{to{transform:none;opacity:1}}
.sp-drawerhd{position:sticky;top:0;background:var(--sp-sheet);backdrop-filter:var(--sp-shell-blur);-webkit-backdrop-filter:var(--sp-shell-blur);border-bottom:1px solid var(--sp-line);padding:18px 24px;display:flex;align-items:flex-start;gap:14px;z-index:2}

/* misc */
.sp-kv{display:grid;gap:10px;margin:0}
.sp-kv div{display:flex;justify-content:space-between;gap:14px;font-size:12.5px}
.sp-kv dt{color:var(--sp-dim2);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.sp-kv dd{margin:0;color:var(--sp-head);text-align:right;font-family:var(--att-font-mono);font-size:12.5px}
.sp-tl{display:grid;position:relative;margin:0;padding:0;list-style:none}
.sp-tl .it{position:relative;padding:0 0 17px 27px;min-height:26px}
.sp-tl .it::before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;background:#42131D;border:1px solid color-mix(in oklab,#42131D 70%,#fff 12%);box-sizing:content-box;z-index:1}
.sp-tl .it::after{content:"";position:absolute;left:7px;top:18px;bottom:0;width:1px;background:#42131D}
.sp-tl .it:last-child::after{display:none}
.sp-tl .it.now::before{background:var(--att-red);border-color:var(--att-red);animation:spFlash 1.5s ease-out infinite}
.sp-tl .it.now::after{background:var(--sp-line)}
.sp-tl .it.next::before{background:transparent;border:1px solid var(--sp-line2);animation:none}
.sp-tl .it.next::after{background:var(--sp-line)}
.sp-tl .it.next b{color:var(--sp-dim2)}
.sp-tl b{display:block;font-size:13px;font-weight:700;color:var(--sp-head);line-height:1.35}
.sp-tl small{font-size:11.5px;color:var(--sp-dim2)}
.sp-tl p{margin:4px 0 0;font-size:12.5px;color:var(--sp-dim);line-height:1.55}
@keyframes spFlash{0%{box-shadow:0 0 0 0 rgba(225,18,38,.6)}70%{box-shadow:0 0 0 9px rgba(225,18,38,0)}100%{box-shadow:0 0 0 0 rgba(225,18,38,0)}}
.sp-hr{height:1px;background:var(--sp-line);border:0;margin:22px 0}
.sp-stars{display:inline-flex;gap:2px}
.sp-stars svg{width:14px;height:14px;fill:var(--att-gold)}
.sp-stars svg.off{fill:var(--sp-line2)}
.sp-note{font-size:12px;line-height:1.6;color:var(--sp-dim2)}

.sp-webbar{display:grid;gap:16px;padding:22px 0 18px;margin-bottom:4px;border-bottom:1px solid var(--sp-line)}
.sp-webhd{font-family:var(--att-font-display);font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--sp-head);margin:6px 0 0}
.sp-webbar .sp-tabs{flex-wrap:wrap}

/* screen tabs */
.sp-bar2{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.sp-bar2 .sp-chips{margin-left:auto}
.sp-bar2 .sp-chips:first-child{margin-left:0}
.sp-bar2r{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
@media(max-width:900px){.sp-bar2 .sp-chips{margin-left:0}}
.sp-tabs{display:flex;gap:2px;margin:0 0 20px;border-bottom:1px solid var(--sp-line);overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tabs button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:13px;font-weight:600;color:var(--sp-dim2);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .16s}
.sp-tabs button:hover{color:var(--sp-head)}
.sp-tabs button.on{color:var(--sp-head);border-bottom-color:var(--att-red)}
.sp-tabs .c{font-family:var(--att-font-mono);font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:var(--att-r-pill);background:var(--sp-raise);color:var(--sp-dim)}
.sp-tabs button.on .c{background:var(--att-red);color:#fff}
.sp-matrix td:first-child{color:var(--sp-ink)}
.sp-matrix tbody tr:hover{background:transparent}
.sp-matrix .yes{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(31,157,99,.16);color:var(--sp-ok)}
.sp-matrix .no{color:var(--sp-dim2);opacity:.5}

/* dashboard */.sp-dashgrid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:14px;align-items:start}
.sp-act{list-style:none;margin:0;padding:0}
.sp-act .it{display:grid;grid-template-columns:16px minmax(0,1fr) 150px;grid-template-areas:"d k b" "d w b" "d nt b";gap:2px 16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--sp-line);position:relative}
.sp-act .it{--k:var(--sp-dim2)}
.sp-act .it.red{--k:var(--att-red)}
.sp-act .it.warn{--k:#A8701C}
.sp-act .it.gold{--k:#B08A2E}
.sp-act .it.info{--k:#3B7FC4}
.sp-act .it::before{content:"";grid-area:d;place-self:center;width:10px;height:10px;border-radius:50%;background:var(--k);box-shadow:0 0 0 3px color-mix(in oklab,var(--k) 22%,transparent);animation:sp-pulse 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sp-pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in oklab,var(--k) 22%,transparent);opacity:1}50%{box-shadow:0 0 0 7px color-mix(in oklab,var(--k) 6%,transparent);opacity:.72}}
@media(prefers-reduced-motion:reduce){.sp-act .it::before{animation:none}}
.sp-act .it:last-child{border-bottom:0}
.sp-act .it::marker{content:""}
.sp-act .k{grid-area:k;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--sp-dim)}
.sp-act .w{grid-area:w;font-family:var(--att-font-display);font-size:15.5px;font-weight:600;color:var(--sp-head);letter-spacing:-.01em}
.sp-act .nt{grid-area:nt;font-size:12px;color:var(--sp-dim);line-height:1.5}
.sp-act .sp-btn{grid-area:b;box-sizing:border-box;width:150px;padding:0;justify-content:center;height:30px;min-height:0;font-size:11.5px;border:1px solid color-mix(in oklab,var(--k) 55%,transparent);border-radius:999px;background:color-mix(in oklab,var(--k) 16%,transparent);color:color-mix(in oklab,var(--k) 42%,white);font-weight:700;letter-spacing:.03em}
.sp-act .sp-btn:hover{background:color-mix(in oklab,var(--k) 28%,transparent);border-color:color-mix(in oklab,var(--k) 70%,transparent);color:color-mix(in oklab,var(--k) 34%,white)}
[data-theme=light] .sp-act .sp-btn{color:color-mix(in oklab,var(--k) 78%,black);background:color-mix(in oklab,var(--k) 12%,transparent)}
[data-theme=light] .sp-act .sp-btn:hover{background:color-mix(in oklab,var(--k) 20%,transparent);color:color-mix(in oklab,var(--k) 88%,black)}
.sp-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;height:180px;align-items:end}
.sp-bars.tight{gap:5px;height:196px}
.sp-bars.tight .stack{max-width:34px;gap:3px}
.sp-bars .col{display:flex;flex-direction:column;align-items:center;gap:9px;height:100%}
.sp-bars .stack{flex:1;width:100%;max-width:46px;display:flex;align-items:flex-end;gap:4px}
.sp-bars .stack span{flex:1;border-radius:5px 5px 0 0;min-height:3px;transition:height .3s var(--att-ease)}
.sp-bars .stack .q{background:var(--sp-raise);border:1px solid var(--sp-line)}
.sp-bars .stack .i{background:var(--att-gradient)}
.sp-bars b{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-mini{list-style:none;margin:0;padding:0}
.sp-mini li{display:grid;gap:3px;padding:13px 20px;border-bottom:1px solid var(--sp-line)}
.sp-mini li:last-child{border-bottom:0}
.sp-mini b{font-size:13.5px;font-weight:600;color:var(--sp-head)}
.sp-mini span{font-size:12px;color:var(--sp-ink)}
.sp-mini small{font-size:11.5px;color:var(--sp-dim2)}
.sp-split .bar{height:10px;border-radius:var(--att-r-pill);background:var(--sp-raise);border:1px solid var(--sp-line);overflow:hidden}
.sp-split .bar span{display:block;height:100%;background:var(--att-gradient)}
.sp-split .legend{display:flex;gap:20px;margin-top:12px;font-size:12.5px;color:var(--sp-dim)}
.sp-split .legend span{display:flex;align-items:center;gap:7px}
.sp-split .legend b{color:var(--sp-head);font-family:var(--att-font-mono);font-size:12.5px}
.sp-split .legend i{width:9px;height:9px;border-radius:3px}
.sp-split .legend i.r{background:var(--att-red)}
.sp-split .legend i.k{background:var(--sp-raise);border:1px solid var(--sp-line2)}
.sp-quick{list-style:none;margin:0;padding:0}
.sp-quick li{border-bottom:1px solid var(--sp-line)}
.sp-quick li:last-child{border-bottom:0}
.sp-quick button{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;width:100%;padding:13px 20px;font-size:13px;font-weight:600;color:var(--sp-dim);transition:all .16s;box-sizing:border-box}
.sp-quick button:hover{background:var(--sp-raise);color:var(--sp-head)}
@media(max-width:1180px){.sp-dashgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.sp-act .it{grid-template-columns:16px minmax(0,1fr);grid-template-areas:"d k" "d w" "d nt" ". b";gap:5px 14px}.sp-act .sp-btn{justify-self:start;margin-top:7px}}

@media(min-width:1700px){
.sp-mets{grid-template-columns:repeat(4,1fr);gap:16px}
.sp-cards{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.sp-rail{width:264px}
.sp-table tbody td{padding:15px 18px}
.sp-table thead th{padding:12px 18px}
}
@media(min-width:2300px){
.sp-mets{grid-template-columns:repeat(4,1fr)}
.sp-page{padding-left:clamp(54px,4vw,120px);padding-right:clamp(54px,4vw,120px)}
}
@media(max-width:1180px){.sp-clocks{visibility:hidden}.sp-farecols,.sp-acccols{grid-template-columns:minmax(0,1fr) !important}.sp-farecols>div:last-child,.sp-acccols>div:first-child{position:static !important}}
@media(max-width:900px){
.sp-app{grid-template-columns:1fr}
.sp-rail{position:sticky;top:0;z-index:31;height:auto;width:100%;flex-direction:row;align-items:center;overflow-x:auto;padding:10px}
.sp-rail .sp-grp,.sp-rail .sp-railfoot,.sp-collapse{display:none}
.sp-brand{padding:0 10px 0 0}
.sp-brand .lockup{width:96px}
.sp-nav{width:auto;white-space:nowrap}
.sp-clocks,.sp-search{display:none}
.sp-mets{grid-template-columns:1fr 1fr}
.sp-grid2,.sp-grid3{grid-template-columns:1fr}
.sp-tk{grid-template-columns:110px minmax(0,1fr)}
.sp-tk .tail{grid-column:1/-1;flex-direction:row;align-items:center;border-left:0;border-top:1px solid var(--sp-line)}
.sp-page{padding:22px 16px 70px}
}
@media(max-width:640px){
.sp-pop{position:fixed;top:64px;left:10px;right:10px;width:auto}
.sp-pop.wide{width:auto}
.sp-mets{grid-template-columns:1fr}
.sp-hd{align-items:flex-start}
.sp-cards{grid-template-columns:1fr}
.sp-tk{grid-template-columns:1fr}
.sp-tk .stub::after{display:none}
.sp-page{padding:18px 13px 64px}
.sp-h1{font-size:clamp(26px,8vw,34px)}
}

/* equal-height pair in the dashboard grid */
.sp-eq{display:grid}
.sp-eq>.sp-panel{height:100%;display:flex;flex-direction:column}
.sp-eq>.sp-panel>div{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.sp-eq .sp-tablewrap{flex:1;min-height:0}

/* dashboard side cards · D spine · one connected hairline, clickable rows, pulsing dots */
.sp-spine{list-style:none;margin:0;padding:6px 16px 14px}
.sp-spine li{display:block}
.sp-spine .grp{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px}
.sp-spine .grp span+span{border-left:1px solid var(--sp-line2);padding:12px 0 6px 16px;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-spine .grp:first-child span+span{border-left-color:transparent;padding-top:4px}
.sp-spine .row{all:unset;cursor:pointer;display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;width:100%;box-sizing:border-box;font-family:var(--att-font-body,inherit)}
.sp-spine .row time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--sp-dim2);padding-top:11px;text-align:right;white-space:nowrap}
.sp-spine .b{position:relative;border-left:1px solid var(--sp-line2);padding:10px 12px 14px 16px;display:grid;gap:3px;min-width:0;border-radius:0 10px 10px 0;transition:background .16s var(--sp-ease,cubic-bezier(.4,0,.2,1))}
.sp-spine .b::before{content:"";position:absolute;left:-4.5px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--k,var(--att-red));box-shadow:0 0 0 3px var(--sp-panel-solid);z-index:2}
.sp-spine .b::after{content:"";position:absolute;left:-9.5px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--k,var(--att-red));opacity:.28;z-index:1;animation:sp-halo 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sp-halo{0%,100%{transform:scale(.5);opacity:.34}50%{transform:scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.sp-spine .b::after{animation:none;opacity:.2}}
.sp-spine .b b{font-size:13.5px;font-weight:700;color:var(--sp-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-spine .b small{font-size:11.5px;line-height:1.5;color:var(--sp-dim)}
.sp-spine .row:hover .b b{color:var(--k,var(--att-red))}
.sp-spine .row:focus-visible .b b{color:var(--k,var(--att-red));text-decoration:underline;text-underline-offset:3px}
.sp-spine li:last-child .b{border-left-color:transparent;background-image:linear-gradient(var(--sp-line2),var(--sp-line2));background-size:1px 21px;background-repeat:no-repeat;background-position:left top}

.sp-inp{width:100%;box-sizing:border-box;padding:9px 16px;border-radius:var(--att-r-pill);border:1px solid var(--sp-line);background:var(--sp-field);color:var(--sp-head);font-size:13px;line-height:1.6;outline:none;transition:border-color .16s,background .16s}
.sp-inp::placeholder{color:var(--sp-dim2)}
.sp-inp:focus{border-color:var(--att-red-300);background:var(--sp-raise)}
textarea.sp-inp{resize:vertical;min-height:64px}


/* ---------- modal shell ---------- */
.sp-modal{position:fixed;z-index:81;inset:16px;margin:auto;width:auto;max-width:min(620px,100%);height:fit-content;max-height:100%;display:flex;flex-direction:column;background:var(--sp-panel-solid);backdrop-filter:var(--sp-shell-blur);-webkit-backdrop-filter:var(--sp-shell-blur);border:1px solid var(--sp-line);border-radius:var(--att-r-lg);box-shadow:var(--sp-shadow);overflow:hidden}
.sp-modal.wide{max-width:min(1040px,100%)}
.sp-modalhd{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--sp-line)}
.sp-modalbd{flex:1 1 auto;min-height:0;padding:20px 22px;overflow:auto;display:block}
.sp-modalbd>*+*{margin-top:16px}
.sp-modalft{display:flex;align-items:center;gap:9px;justify-content:flex-end;flex-wrap:wrap;padding:15px 22px;border-top:1px solid var(--sp-line);background:var(--sp-field)}

/* ---------- the customer email preview ---------- */
.qm-stage{display:grid;gap:14px;justify-items:center}
.qm-strip{width:min(660px,100%);display:grid;gap:6px;padding:14px 18px;border-radius:var(--att-r-md);background:var(--sp-field);border:1px solid var(--sp-line)}
.qm-strip span{display:flex;gap:10px;font-size:12.5px;font-weight:600;color:var(--sp-ink);word-break:break-word}
.qm-strip b{flex:none;width:76px;white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-dim2);padding-top:2px}
.qm-mail{width:min(660px,100%);background:#fff;color:#3B4046;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.09);box-shadow:0 26px 60px -34px rgba(0,0,0,.75)}
.qm-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;border-bottom:1px solid #EDEFF1}
.qm-top img{width:120px;height:auto;display:block}
.qm-tag{text-align:right;display:grid;gap:3px}
.qm-tag b{font-family:var(--att-font-mono);font-size:11.5px;letter-spacing:.1em;color:#171A1D}
.qm-tag i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#A11119}
.qm-bd{padding:26px}
.qm-hi{margin:0 0 10px;font-size:16px;font-weight:700;color:#171A1D}
.qm-p{margin:0 0 18px;font-size:13.5px;line-height:1.7;color:#3B4046;white-space:pre-wrap}
.qm-hero{padding:22px;border-radius:13px;background:linear-gradient(135deg,#1B1114,#171A1D 46%);color:#fff;margin:0 0 18px;display:grid;gap:14px;position:relative;overflow:hidden}
.qm-hero::after{content:"";position:absolute;right:-70px;top:-70px;width:210px;height:210px;border-radius:50%;background:rgba(225,18,38,.22)}
.qm-hero .top{display:flex;align-items:flex-end;gap:18px;position:relative}
.qm-hero s{text-decoration:none;display:block;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.qm-hero .amt{display:block;font-family:var(--att-font-display);font-size:40px;font-weight:700;line-height:1;letter-spacing:-.03em;margin-top:7px}
.qm-hero .amt small{font-size:14px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.62);margin-left:8px}
.qm-hero .side{margin-left:auto;text-align:right;display:grid;gap:4px;font-size:11.5px;color:rgba(255,255,255,.8)}
.qm-hero .side em{font-style:normal;font-family:var(--att-font-mono);font-size:12.5px;color:#fff}
.qm-cap{position:relative;margin:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:11px;color:rgba(255,255,255,.66)}
.qm-sec{margin:0 0 18px;border:1px solid #E6E9EC;border-radius:13px;overflow:hidden}
.qm-sec>h5{margin:0;padding:11px 16px;background:#FAFAF8;border-bottom:1px solid #EDEFF1;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#8A9098}
.qm-leg{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;padding:15px 16px;border-bottom:1px solid #EDEFF1}
.qm-leg:last-child{border-bottom:0}
.qm-leg .al{display:grid;gap:3px}
.qm-leg .al b{font-size:11px;font-weight:800;color:#171A1D;line-height:1.3}
.qm-leg .al i{font-style:normal;font-family:var(--att-font-mono);font-size:10.5px;color:#8A9098}
.qm-leg .line{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.qm-port{display:grid;gap:2px}
.qm-port b{font-family:var(--att-font-display);font-size:22px;font-weight:700;color:#171A1D;line-height:1;letter-spacing:-.02em}
.qm-port i{font-style:normal;font-size:10.5px;color:#8A9098}
.qm-port u{text-decoration:none;font-family:var(--att-font-mono);font-size:11.5px;color:#171A1D}
.qm-arc{text-align:center;position:relative;padding:0 4px}
.qm-arc::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:repeating-linear-gradient(90deg,#D6DADE 0 4px,transparent 4px 9px)}
.qm-arc em{position:relative;background:#fff;padding:0 8px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#A11119}
.qm-arc span{display:block;margin-top:5px;font-size:10.5px;color:#8A9098}
.qm-rows{display:grid}
.qm-rows div{display:flex;justify-content:space-between;gap:14px;padding:11px 16px;border-bottom:1px solid #EDEFF1;font-size:12.5px}
.qm-rows div:last-child{border-bottom:0}
.qm-rows .k{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8A9098;padding-top:2px}
.qm-rows .v{margin:0;font-weight:600;color:#171A1D;text-align:right}
.qm-rows .tot{background:#FAFAF8}
.qm-rows .tot .k{color:#171A1D}
.qm-rows .tot .v{font-family:var(--att-font-display);font-size:16px;font-weight:700}
.qm-steps{display:grid;gap:11px;margin:0 0 18px}
.qm-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.qm-step i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#171A1D;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.qm-step b{display:block;font-size:12.5px;color:#171A1D}
.qm-step span{font-size:12px;color:#5A6169;line-height:1.55}
.qm-note{padding:12px 15px;border-left:2px solid #E11226;background:#FBF7F7;font-size:12.5px;line-height:1.6;color:#3B4046;border-radius:0 8px 8px 0}
.qm-note b{color:#171A1D}
.qm-sig{margin-top:22px;padding:20px;border:1px solid #E6E9EC;border-radius:13px;background:#FCFCFB;display:grid;gap:16px}
.qm-sigtop{display:flex;align-items:center;gap:16px}
.qm-sigtop img{width:112px;height:auto;display:block}
.qm-sigtop .bar{width:2px;align-self:stretch;background:#A11119;border-radius:2px;flex:none}
.qm-sigtop b{display:block;font-family:var(--att-font-display);font-size:16px;font-weight:700;color:#171A1D;letter-spacing:-.012em}
.qm-sigtop i{font-style:normal;display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#A11119}
.qm-sigtop s{text-decoration:none;display:block;margin-top:4px;font-size:11.5px;color:#5A6169}
.qm-sigrows{display:grid;grid-template-columns:1fr 1px 1fr;gap:10px 22px}
.qm-sigrows .rule{background:#E6E9EC;border-radius:1px}
.qm-sigrows div{display:grid;gap:2px;min-width:0}
.qm-sigrows dt{font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#8A9098}
.qm-sigrows dd{margin:0;font-size:12px;font-weight:600;color:#171A1D;word-break:break-word}
.qm-sigrows dd.red{color:#A11119;font-weight:700}
.qm-sigrows dd.sub{margin-top:2px;font-size:11px;font-weight:500;color:#5A6169;line-height:1.5}
.qm-foot{padding:16px 26px;background:#FAFAF8;border-top:1px solid #EDEFF1;font-size:10.5px;line-height:1.65;color:#9AA1A8}
@media(max-width:560px){.qm-sigrows{grid-template-columns:1fr}.qm-sigrows .rule{height:1px;width:100%}}

/* ---------- money on a quote ---------- */
.qf-money{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qf-money div{padding:14px 16px;border-radius:var(--att-r-md);background:var(--sp-field);border:1px solid var(--sp-line)}
.qf-money span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-dim2);margin-bottom:7px}
.qf-money b{display:block;font-family:var(--att-font-display);font-size:25px;font-weight:700;color:var(--sp-head);line-height:1}
.qf-money em{font-style:normal;display:block;margin-top:5px;font-size:11px;color:var(--sp-dim)}
.qf-money .ok b{color:var(--sp-ok)}
.qf-money .warn b{color:var(--sp-warn)}
.qf-bar{height:6px;border-radius:99px;background:var(--sp-field);border:1px solid var(--sp-line);overflow:hidden;margin-top:12px}
.qf-bar i{display:block;height:100%;background:var(--sp-ok);transition:width .3s}
.qf-link{display:flex;gap:13px;align-items:flex-start;padding:15px;border-radius:var(--att-r-md);background:var(--sp-field);border:1px solid var(--sp-line);flex-wrap:wrap}
.qf-link .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(31,157,99,.14);color:var(--sp-ok)}
.qf-link .tx{flex:1;min-width:200px;display:grid;gap:4px}
.qf-link .tx b{font-size:13.5px;color:var(--sp-head)}
.qf-link .tx small{font-size:11.5px;color:var(--sp-dim)}
.qf-link .tx i{font-style:normal;font-size:11.5px;color:var(--sp-red)}

/* ---------- reporting ---------- */
.rp-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:1080px){.rp-grid{grid-template-columns:1fr}}
.rp-chart{display:grid;gap:12px}
.rp-bars{display:flex;align-items:flex-end;gap:8px;height:210px}
.rp-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;min-width:0}
.rp-col .stack{flex:1;width:100%;max-width:38px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.rp-col i{display:block;border-radius:3px;min-height:2px;transition:height .3s}
.rp-col i.r{background:var(--att-red,#E11226)}
.rp-col i.k{background:var(--sp-info)}
.rp-col em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-dim2);white-space:nowrap}
.rp-legend{display:flex;gap:16px;align-items:center;padding-top:12px;border-top:1px solid var(--sp-line);font-size:11.5px;color:var(--sp-dim)}
.rp-legend span{display:flex;align-items:center;gap:7px}
.rp-legend i{width:9px;height:9px;border-radius:3px}
.rp-legend i.r{background:var(--att-red,#E11226)}
.rp-legend i.k{background:var(--sp-info)}
.rp-legend .rp-max{margin-left:auto;font-family:var(--att-font-mono);color:var(--sp-dim2)}
.rp-funnel{display:grid;gap:14px}
.rp-step{display:grid;grid-template-columns:1fr;gap:6px}
.rp-step .lb{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--sp-dim)}
.rp-step .lb b{font-family:var(--att-font-mono);color:var(--sp-head)}
.rp-step .tr{display:block;height:9px;border-radius:99px;background:var(--sp-field);border:1px solid var(--sp-line);overflow:hidden}
.rp-step .tr i{display:block;height:100%;background:var(--att-gradient,var(--att-red,#E11226))}
.rp-step .pc{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--sp-dim2)}
.rp-step .pc em{font-style:normal}
.rp-mix{display:flex;gap:22px;align-items:center;padding:20px;flex-wrap:wrap}
.rp-mix .ring{position:relative;flex:none;width:140px;height:140px;border-radius:50%;display:grid;place-items:center}
.rp-mix .ring::after{content:"";position:absolute;inset:26px;border-radius:50%;background:var(--sp-sheet)}
.rp-mix .ring i{position:relative;z-index:1;font-style:normal;display:grid;justify-items:center;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sp-dim2)}
.rp-mix .ring b{font-family:var(--att-font-display);font-size:27px;font-weight:700;color:var(--sp-head);letter-spacing:-.02em}
.rp-mix ul{flex:1;min-width:190px;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rp-mix li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--sp-ink)}
.rp-mix li i{width:9px;height:9px;border-radius:3px;flex:none}
.rp-mix li span{flex:1;min-width:0}
.rp-mix li b{font-family:var(--att-font-mono);color:var(--sp-head)}
.rp-mix li em{font-style:normal;font-size:11px;color:var(--sp-dim2);width:38px;text-align:right}
.rp-owed{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:12.5px}
.rp-owed .sp-mono{font-size:11.5px;color:var(--sp-red)}
.rp-owed b{color:var(--sp-head);flex:1;min-width:110px}
.rp-owed em{font-style:normal;font-family:var(--att-font-mono);color:var(--sp-head)}
.rp-conv{display:inline-block;width:54px;height:5px;border-radius:99px;background:var(--sp-field);border:1px solid var(--sp-line);overflow:hidden;margin-right:9px;vertical-align:middle}
.rp-conv i{display:block;height:100%;background:var(--sp-ok)}

.sp-tk.cb{grid-template-columns:128px minmax(0,1fr) 424px}
.sp-tk.cb .tail.row{display:grid;grid-template-columns:120px 84px 84px 72px;align-items:center;gap:8px;justify-content:end;padding-left:30px}
.sp-tk.cb .tail.row .sp-st{box-sizing:border-box;width:100%;justify-content:center}
.sp-tk.cb .tail.row .sp-btn{box-sizing:border-box;width:100%;justify-content:center;padding-left:0;padding-right:0}
.sp-tk.cb .tail.row .sp-age{text-align:right;white-space:nowrap;margin:0}
.sp-tk .tail.row{flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.sp-tk .tail.row .sp-age{margin-left:4px;white-space:nowrap}
@media(max-width:1100px){.sp-tk.cb{grid-template-columns:110px minmax(0,1fr)}.sp-tk.cb .tail{grid-column:1/-1;border-left:0;border-top:1px solid var(--sp-line)}.sp-tk.cb .tail.row{justify-content:start}}

/* ---------- quote popup ---------- */
.sp-modal.qd{max-width:min(1120px,100%)}
.qd-hd{display:flex;align-items:center;gap:22px;padding:20px 22px;border-bottom:1px solid var(--sp-line);flex-wrap:wrap}
.qd-who{flex:1;min-width:210px;display:grid;gap:5px}
.qd-who .sp-eb{margin:0}
.qd-contact{margin:2px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--sp-dim)}
.qd-contact s{text-decoration:none;color:var(--sp-dim2)}
.qd-route{display:flex;align-items:center;gap:14px;padding:11px 18px;border-radius:var(--att-r-md);background:var(--sp-field);border:1px solid var(--sp-line);flex:none}
.qd-route .pt{display:grid;gap:1px}
.qd-route .pt b{font-family:var(--att-font-display);font-size:21px;font-weight:700;color:var(--sp-head);line-height:1;letter-spacing:-.02em}
.qd-route .pt i{font-style:normal;font-size:10.5px;color:var(--sp-dim2)}
.qd-route .hop{position:relative;width:76px;text-align:center}
.qd-route .hop::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--sp-line2)}
.qd-route .hop em{position:relative;background:var(--sp-field);padding:0 7px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sp-red)}
.qd-val{display:grid;gap:5px;justify-items:flex-end;flex:none}
.qd-val b{display:flex;align-items:baseline;gap:6px;font-family:var(--att-font-display);font-size:23px;font-weight:700;color:var(--sp-head);letter-spacing:-.02em}
.qd-val b small{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--sp-dim2)}
.qd-val em{font-style:normal;font-size:11px;color:var(--sp-dim)}
.qd-x{flex:none;align-self:flex-start}
.qd-meta{display:flex;gap:26px;flex-wrap:wrap;padding:13px 22px;border-bottom:1px solid var(--sp-line);background:var(--sp-field)}
.qd-meta span{display:grid;gap:3px;font-size:12.5px;font-weight:600;color:var(--sp-head)}
.qd-meta i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-dim2)}
.sp-mtabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--sp-line);overflow-x:auto}
.sp-mtabs button{all:unset;cursor:pointer;padding:13px 14px;font-size:12.5px;font-weight:700;text-transform:capitalize;color:var(--sp-dim);border-bottom:2px solid transparent;white-space:nowrap;transition:color .16s}
.sp-mtabs button:hover{color:var(--sp-head)}
.sp-mtabs button.on{color:var(--sp-head);border-bottom-color:var(--att-red)}
.qd-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.qd-col{display:grid;gap:16px;align-content:start;min-width:0}
@media(max-width:900px){.qd-cols{grid-template-columns:1fr}.qd-route{order:3;width:100%;justify-content:space-between}.qd-route .hop{flex:1}}
.qd-key{width:100%;justify-content:center;padding:13px 18px;font-size:13.5px}
.qd-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}
.qd-acts .sp-btn{justify-content:flex-start;min-width:0;white-space:normal;text-align:left}
@media(max-width:560px){.qd-acts{grid-template-columns:1fr}}

.sp-modalhd,.sp-modalft,.qd-hd,.qd-meta,.sp-mtabs{flex:none}
.sp-btn,.qd-key,.qd-acts .sp-btn{box-sizing:border-box}

/* select fields match the portal in every theme, popup included */
select{color-scheme:inherit}
.sp-f select,.sp-inp select,select.sp-inp{-webkit-appearance:none;appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BAAB5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.sp-f select option,select option,select optgroup{background:var(--sp-panel-solid);color:var(--sp-head)}
[data-theme=light] .sp-f select option,[data-theme=light] select option{background:#fff;color:var(--sp-head)}

/* ---------- quote popup · departure board ---------- */
.sp-modal.qp{max-width:min(1520px,100%)}
.qp-wrap{display:grid;grid-template-columns:400px minmax(0,1fr);flex:1 1 auto;min-height:0;overflow:hidden}
.qp-side{position:relative;overflow:auto;padding:34px 32px;border-right:1px solid var(--sp-line);background:radial-gradient(520px 340px at 12% -12%,rgba(225,18,38,.40),transparent 68%),var(--sp-bg2);display:grid;gap:22px;align-content:start}
.qp-main{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.qp-id{display:grid;justify-items:start;gap:8px}
.qp-id .sp-eb{margin:0}
.qp-id .sp-st{justify-self:start}
.qp-id h2{margin:2px 0 0;font-family:var(--att-font-display);font-size:34px;font-weight:600;color:var(--sp-head);letter-spacing:-.028em;line-height:1.05}
.qp-sub{margin:0;font-size:13.5px;color:var(--sp-dim);line-height:1.6}
.qp-lad{display:grid;gap:4px;padding:16px 0 0;border-top:1px solid var(--sp-line)}
.qp-leg{display:grid;gap:3px}
.qp-leg b{font-family:var(--att-font-display);font-size:38px;font-weight:700;color:var(--sp-head);line-height:1;letter-spacing:-.02em}
.qp-leg span{font-size:12.5px;color:var(--sp-dim)}
.qp-leg .t{font-family:var(--att-font-mono);font-size:12px;color:var(--sp-red)}
.qp-stop{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:6px 0 6px 4px}
.qp-stop i{display:block;width:1px;height:26px;background:repeating-linear-gradient(var(--sp-line2) 0 3px,transparent 3px 7px)}
.qp-stop em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sp-red)}
.qp-dates{display:flex;gap:22px;flex-wrap:wrap}
.qp-dates span{display:grid;gap:3px;font-size:12.5px;font-weight:600;color:var(--sp-head)}
.qp-dates i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-dim2)}
.qp-cash{display:grid;gap:3px;padding-top:16px;border-top:1px solid var(--sp-line)}
.qp-cash b{font-family:var(--att-font-display);font-size:48px;font-weight:700;color:var(--sp-head);line-height:1;letter-spacing:-.03em}
.qp-cash em{font-style:normal;font-size:11.5px;color:var(--sp-dim)}
.qp-tabs{display:flex;gap:2px;padding:7px 22px 0;align-items:stretch;min-width:0;overflow-x:auto;border-bottom:1px solid var(--sp-line);background:var(--sp-field)}
.qp-tabs button{all:unset;box-sizing:border-box;cursor:pointer;padding:17px;font-size:13.5px;font-weight:700;color:var(--sp-dim);border-bottom:2px solid transparent;white-space:nowrap;text-transform:capitalize;transition:color .16s,background .16s}
.qp-tabs button:hover{color:var(--sp-head)}
.qp-tabs button.on{color:var(--sp-head);border-bottom-color:var(--att-red);background:var(--sp-panel-solid)}
.qp-tabs .qp-x{margin-left:auto;align-self:center;margin-bottom:7px}
.qp-bd{padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.qp-col{display:grid;grid-template-rows:auto 1fr;gap:14px;min-width:0}
.qp-c{border:1px solid var(--sp-line);border-radius:var(--att-r-md);background:linear-gradient(var(--sp-raise),transparent 44%),var(--sp-panel);overflow:hidden}
.qp-ch{display:flex;align-items:baseline;gap:12px;padding:16px 20px 13px}
.qp-t{position:relative;padding-left:13px;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--sp-head)}
.qp-t::before{content:"";position:absolute;left:0;top:4px;width:6px;height:6px;border-radius:2px;background:var(--att-red)}
.qp-cap{margin-left:auto;font-size:11px;color:var(--sp-dim2)}
.qp-link{all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;font-size:11.5px;font-weight:700;color:var(--sp-red);transition:color .16s}
.qp-link:hover{color:var(--sp-head);text-decoration:underline;text-underline-offset:3px}
.qp-b{padding:0 20px 20px;display:grid;gap:15px}
.qp-note{margin:0;font-size:11.5px;line-height:1.6;color:var(--sp-dim2)}
.qp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.qp-tile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;text-align:center;gap:6px;padding:18px 16px;border-radius:14px;border:1px solid var(--sp-line);background:var(--sp-field);min-width:0;transition:border-color .18s,transform .18s,background .18s}
.qp-tile:hover{border-color:color-mix(in oklab,var(--att-red) 54%,transparent);transform:translateY(-2px);background:color-mix(in oklab,var(--att-red) 7%,var(--sp-field))}
.qp-ti{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--att-gradient);color:#fff;margin-bottom:5px;box-shadow:0 8px 20px -12px rgba(225,18,38,.9),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.qp-tile:hover .qp-ti{transform:translateY(-3px) scale(1.08);box-shadow:0 14px 26px -12px rgba(225,18,38,1),inset 0 1px 0 rgba(255,255,255,.3)}
.qp-tile:hover .qp-ti svg{animation:qpPop .5s ease}
.qp-ti svg{width:21px;height:21px;stroke:#fff}
@keyframes qpPop{0%{transform:scale(1) rotate(0)}35%{transform:scale(.86) rotate(-7deg)}70%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.qp-tile b{font-size:13.5px;color:var(--sp-head)}
.qp-tile em{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--sp-dim2)}
.qp-quote{margin:0;padding-left:15px;border-left:2px solid var(--att-red);font-size:15px;line-height:1.65;color:var(--sp-ink)}
.qp-leads{display:grid;margin:0}
.qp-leads div{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-bottom:1px dotted var(--sp-line2)}
.qp-leads div:last-child{border-bottom:0}
.qp-leads dt{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sp-dim2);white-space:nowrap}
.qp-leads dd{margin:0 0 0 auto;font-size:13px;font-weight:600;color:var(--sp-head)}
.qp-mrow{display:flex;gap:11px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--sp-line);background:var(--sp-field);cursor:pointer;transition:border-color .16s,background .16s}
.qp-mrow:hover{border-color:var(--sp-line2);background:var(--sp-raise)}
.qp-mtx{min-width:0;display:grid;gap:3px}
.qp-mtx b{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--sp-head)}
.qp-mtx b i{width:6px;height:6px;border-radius:50%;background:var(--att-red)}
.qp-mtx em{font-style:normal;font-size:13px;color:var(--sp-dim);line-height:1.5}
.qp-mrow time{margin-left:auto;font-size:10.5px;color:var(--sp-dim2);flex:none}
.qp-face{width:30px;height:30px;border-radius:50%;background:var(--att-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;line-height:1;flex:none;box-sizing:border-box}
.qp-x{width:34px;height:34px;border-radius:10px;border:1px solid var(--sp-line);display:flex;align-items:center;justify-content:center;color:var(--sp-dim);flex:none;box-sizing:border-box;cursor:pointer;background:none;transition:border-color .16s,color .16s,background .16s,transform .16s}
.qp-x:hover{border-color:color-mix(in oklab,var(--att-red) 60%,transparent);color:var(--sp-head);background:color-mix(in oklab,var(--att-red) 14%,transparent)}
.qp-x:active{transform:scale(.94)}
@media(max-width:1180px){.qp-bd{grid-template-columns:1fr}}
@media(max-width:1080px){.qp-wrap{grid-template-columns:1fr;overflow:auto}.qp-side{overflow:visible;border-right:0;border-bottom:1px solid var(--sp-line)}.qp-main{min-height:auto;grid-template-rows:auto auto}.qp-main .sp-modalbd{overflow:visible}}
@media(max-width:620px){.qp-tiles{grid-template-columns:1fr}}

/* add a colleague */
.sp-genpass{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--att-r-md);border:1px dashed var(--sp-line2);background:var(--sp-field)}
.sp-genpass>.sp-mono{font-size:16px;font-weight:700;color:var(--sp-head);letter-spacing:.06em}
.sp-ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media(max-width:700px){.sp-ticks{grid-template-columns:1fr}}
.sp-tick{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:13px;border:1px solid var(--sp-line);background:var(--sp-field);transition:border-color .16s,background .16s,transform .16s}
.sp-tick:hover{border-color:var(--sp-line2);transform:translateY(-1px)}
.sp-tick.on{border-color:color-mix(in oklab,var(--att-red) 58%,transparent);background:color-mix(in oklab,var(--att-red) 9%,var(--sp-field))}
.sp-tick .box{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--sp-line2);display:grid;place-items:center;color:#fff;transition:background .16s,border-color .16s}
.sp-tick.on .box{background:var(--att-gradient);border-color:transparent}
.sp-tick .tx{display:grid;gap:3px;min-width:0}
.sp-tick .tx b{font-size:13.5px;color:var(--sp-head)}
.sp-tick .tx small{font-size:11.5px;line-height:1.45;color:var(--sp-dim2)}
.sp-cando{display:grid;gap:9px;padding:14px 16px;border-radius:var(--att-r-md);border:1px solid var(--sp-line);background:var(--sp-field)}
.sp-canlist{display:flex;gap:7px;flex-wrap:wrap}
.sp-canpill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--att-r-pill);background:var(--sp-raise);border:1px solid var(--sp-line);font-size:11.5px;font-weight:600;color:var(--sp-head)}
.sp-canpill svg{stroke:var(--sp-ok)}

/* KPI cards sit on their own dark surface, not a white wash */
.sp-kpi{background:#10171D;border-color:rgba(255,255,255,.09)}
[data-theme=light] .sp-kpi{background:#fff;border-color:var(--sp-line)}
.sp-kpi .bd{background:transparent}
.sp-kpi:hover{border-color:rgba(255,255,255,.16)}
[data-theme=light] .sp-kpi:hover{border-color:var(--sp-line2)}
.sp-modal.wide .qp-bd{grid-template-columns:1fr 1fr}
@media(max-width:820px){.sp-modal.wide .qp-bd{grid-template-columns:1fr}}

.sp-met{background:#10171D;border-color:rgba(255,255,255,.09)}
[data-theme=light] .sp-met{background:#fff;border-color:var(--sp-line)}
.sp-met:hover{border-color:rgba(255,255,255,.16)}
[data-theme=light] .sp-met:hover{border-color:var(--sp-line2)}

/* ---------- one field shape · pill dropdown (style 4) ---------- */
textarea.sp-inp{border-radius:18px;padding:11px 15px}
select,select.sp-inp,.sp-f select,.sp-inp select{border-radius:var(--att-r-pill)}
.sp-dd{position:relative;display:flex}
.sp-ddt{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 17px;border-radius:var(--att-r-pill);border:1px solid var(--sp-line);background:var(--sp-field);color:var(--sp-head);font-size:13.5px;font-weight:600;font-family:var(--att-font-body);transition:border-color .16s,background .16s}
.sp-ddt:hover{border-color:var(--sp-line2)}
.sp-dd.open .sp-ddt{border-color:var(--att-red-300);background:var(--sp-raise)}
.sp-ddt .cv{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .2s var(--att-ease)}
.sp-dd.open .sp-ddt .cv{transform:rotate(180deg);opacity:1}
.sp-ddt.sm{padding:8px 14px;font-size:12.5px}
.sp-ddp{position:fixed;z-index:4300;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:18px;background:var(--sp-sheet);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--sp-line2);box-shadow:0 24px 54px -18px rgba(0,0,0,.75);overflow:auto;animation:spddin .16s var(--att-ease)}
@keyframes spddin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.sp-ddo{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:10px 15px;border-radius:var(--att-r-pill);font-size:13px;font-weight:600;color:var(--sp-ink);font-family:var(--att-font-body);transition:background .14s,color .14s}
.sp-ddo:hover{background:var(--sp-raise);color:var(--sp-head)}
.sp-ddo.on{background:var(--att-gradient);color:#fff}
.sp-ddo .tk{width:14px;height:14px;margin-left:auto;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.sp-ddo.on .tk{opacity:1}
.sp-ddt.bare{width:100%;padding:2px 0;border:0;background:none;justify-content:flex-start;gap:8px;font-size:12.5px;font-weight:700;color:var(--sp-head)}
.sp-ddt.bare .cv{margin-left:auto}
.sp-dd.open .sp-ddt.bare{background:none;border:0}