/* terminal-shell.css, P04-S08-PH01. The new shell: header, tabs, status strip, phone bottom bar, footer.
   Built from JADE's signed design set (S07 PH01 shell.css, hash 46e8d78b426dc1e4) and TOKENS.txt.
   Every selector is prefixed ts- so the old page styles cannot collide with it, and the tokens are declared
   on .ts-scope (not :root) because ten pages already define their own --danger and one defines --amber. */

.ts-scope{
  --bg-0:#060a10;
  --bg-1:#0a1019;
  --bg-2:#0f1722;
  --bg-3:#16202e;
  --line:#1e2a3b;
  --line-strong:#33445c;
  --edge:#5f7391;
  --text-1:#e9eff7;
  --text-2:#aab8ca;
  --text-3:#8797ad;
  --teal:#4ecdc4;
  --teal-bright:#7be0d8;
  --teal-ink:#04151a;
  --amber:#f2b955;
  --danger:#ff9b8f;
  --focus:#ffd84d;
  --heat-1:#0f1a27;
  --heat-2:#12303a;
  --heat-3:#17414b;
  --heat-4:#1a525b;
  --heat-5:#1d636b;
  --tint-new:rgba(78,205,196,.18);
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,'JetBrains Mono','Cascadia Mono',Consolas,Menlo,monospace;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-base:.9375rem;
  --fs-lg:1.125rem;
  --fs-xl:1.5rem;
  --fs-h1:clamp(1.75rem,1.3rem + 2vw,2.75rem);
  --lh:1.5;
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:3rem;
  --r-1:4px;
  --r-2:8px;
  --tap:44px;
  --header-h:56px;
  --strip-h:44px;
  --wrap:80rem;
  --gutter:1rem;
  --motion-enter:180ms;
  --motion-tint:600ms;
  --motion-stale:160ms;
  --motion-shimmer:1.6s;
  --motion-fade:300ms;
  --motion-notice:160ms;
}
@media (min-width:768px){.ts-scope{--gutter:1.5rem}}
@media (min-width:1024px){.ts-scope{--gutter:2rem}}

.ts-scope,.ts-scope *,.ts-scope *::before,.ts-scope *::after{box-sizing:border-box}
.ts-scope :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ts-scope h1,.ts-scope h2,.ts-scope p,.ts-scope ul,.ts-scope li,.ts-scope dl,.ts-scope dd{margin:0}
.ts-scope a{color:var(--teal)}
.ts-scope a:hover{color:var(--teal-bright)}
.ts-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}

/* the two pages this phase builds from nothing (community and the three tab shells) own their body */
.ts-body{margin:0;background:var(--bg-0);color:var(--text-2);font:400 var(--fs-base)/var(--lh) var(--font-text);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
html:has(.ts-body){color-scheme:dark}

/* skip link */
.ts-skip{position:absolute;left:var(--sp-3);top:-4rem;z-index:50;background:var(--bg-3);color:var(--text-1) !important;border:1px solid var(--focus);padding:var(--sp-3) var(--sp-4);min-height:var(--tap)}
.ts-skip:focus{top:var(--sp-2)}

/* header */
.ts-hdr{padding:0;text-align:left;background:var(--bg-1);border-bottom:1px solid var(--line);font:400 var(--fs-base)/var(--lh) var(--font-text);position:relative;z-index:40}
.ts-hdr-in{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--header-h)}
.ts-brand{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--text-1) !important;font:700 1.0625rem var(--font-mono);letter-spacing:.14em;text-decoration:none}
.ts-brand::before{content:"";width:10px;height:10px;margin-right:10px;background:var(--teal);clip-path:polygon(50% 0,100% 100%,0 100%)}
.ts-tabs{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.ts-tabs a{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);color:var(--text-2);text-decoration:none;font-weight:600;border-bottom:3px solid transparent}
.ts-tabs a:hover{color:var(--text-1);background:var(--bg-2)}
.ts-tabs a[aria-current="page"]{color:var(--text-1);border-bottom-color:var(--teal);background:var(--bg-2)}
.ts-tabs a[aria-current="page"]::before{content:"";width:8px;height:8px;background:var(--teal)}
.ts-sep{width:1px;align-self:stretch;margin:var(--sp-3) var(--sp-1);background:var(--line-strong)}
.ts-top-links{display:flex;align-items:center;gap:var(--sp-1);margin:0;padding:0;list-style:none}
.ts-top-links.ts-acct{margin-left:auto}
.ts-brand,.ts-tabs a,.ts-top-links a{white-space:nowrap}
.ts-top-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);color:var(--text-2);text-decoration:none;font-weight:600}
.ts-top-links a:hover{color:var(--text-1)}
.ts-top-links a.ts-led{color:var(--text-1);border-bottom:3px solid transparent}
.ts-top-links a.ts-led[aria-current="page"]{border-bottom-color:var(--teal);background:var(--bg-2)}
.ts-top-links a.ts-led[aria-current="page"]::before{content:"";width:8px;height:8px;margin-right:var(--sp-2);background:var(--teal)}
.ts-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-2);font:700 var(--fs-base)/1.2 var(--font-text);text-decoration:none;text-align:center;border:1px solid transparent;cursor:pointer}
.ts-btn-primary{background:var(--teal);color:var(--teal-ink) !important}
.ts-btn-primary:hover{background:var(--teal-bright);color:var(--teal-ink) !important}
.ts-btn-secondary{background:transparent;color:var(--teal);border-color:var(--edge)}
.ts-btn-secondary:hover{background:var(--bg-2);color:var(--teal-bright)}
.ts-menu{position:relative}
.ts-menu>summary{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);padding:0 var(--sp-3);list-style:none;cursor:pointer;color:var(--text-1);border:1px solid var(--edge);border-radius:var(--r-2);font-weight:600}
.ts-menu>summary::-webkit-details-marker{display:none}
.ts-menu-list{position:absolute;right:0;top:calc(100% + 4px);min-width:12rem;z-index:60;list-style:none;margin:0;padding:var(--sp-2);background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r-2)}
.ts-menu-list a{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);color:var(--text-1);text-decoration:none}
.ts-menu-list a:hover{background:var(--bg-2)}
.ts-acct-phone{display:none}

/* status strip */
.ts-stat{background:var(--bg-0);border-bottom:1px solid var(--line);font:400 var(--fs-base)/var(--lh) var(--font-text)}
.ts-stat-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);min-height:var(--strip-h);padding-block:var(--sp-2)}
.ts-figs{display:contents}
.ts-fig{display:flex;align-items:baseline;gap:var(--sp-2)}
.ts-fig dt{font:600 var(--fs-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ts-fig dd{font:700 var(--fs-base) var(--font-mono);color:var(--text-1);min-width:3ch}
.ts-fig dd:empty::after{content:"";display:inline-block;width:3.5rem;height:.6rem;background:var(--bg-3);border-radius:2px}
.ts-stat-src{margin-left:auto;font-size:var(--fs-xs);color:var(--text-3)}
.ts-stat-msg{color:var(--text-1);font-size:var(--fs-sm)}
.ts-stat-stale dd{color:var(--amber)}
.ts-stat-error .ts-figs,.ts-stat-error .ts-stat-src{display:none}
.ts-stat-msg[hidden],.ts-stat-src[hidden]{display:none}
.ts-stat-stale .ts-stat-msg{flex-basis:100%}

/* phone bottom bar */
.ts-bar{display:none;font:400 var(--fs-base)/var(--lh) var(--font-text)}
.ts-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1 1 0;min-height:var(--tap);min-width:var(--tap);padding:var(--sp-2) 2px;color:var(--text-2);text-decoration:none;font:600 .75rem var(--font-text);border-top:3px solid transparent}
.ts-bar a[aria-current="page"]{color:var(--text-1);border-top-color:var(--teal);background:var(--bg-2)}
.ts-bar a.ts-led{border-left:1px solid var(--line-strong)}
.ts-bar svg{width:18px;height:18px}

/* footer */
.ts-ftr{padding:0;text-align:left;color:var(--text-2);margin-top:var(--sp-7);background:var(--bg-1);border-top:1px solid var(--line);font:400 var(--fs-base)/var(--lh) var(--font-text);position:relative;z-index:1}
.ts-ftr-in{padding-block:var(--sp-5);display:grid;gap:var(--sp-4)}
.ts-ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--sp-4)}
.ts-ftr a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);justify-content:center;color:var(--text-2)}
.ts-ftr a:hover{color:var(--text-1)}
.ts-ftr .ts-disc{font-size:var(--fs-sm);color:var(--text-2);max-width:48rem}
.ts-ftr .ts-co{font-size:var(--fs-sm);color:var(--text-3)}

/* tablet: the header takes two rows, the name and account controls above, the tabs, Ledger and Pricing below */
@media (min-width:768px) and (max-width:1023px){
  .ts-hdr-in{flex-wrap:wrap;gap:0 var(--sp-3);padding-top:var(--sp-1)}
  .ts-hdr-in nav{order:3}
  .ts-hdr-in .ts-sep{order:4;align-self:center;height:1.5rem;margin:0 var(--sp-1)}
  .ts-hdr-in .ts-top-links:not(.ts-acct){order:5}
  .ts-hdr-in .ts-brand{order:1}
  .ts-hdr-in .ts-acct{order:2}
  .ts-hdr-in::after{content:"";order:2;flex-basis:100%;height:0}
}
/* phone: the name and one Menu button above, the tabs and Ledger in the bottom bar */
@media (max-width:767px){
  .ts-tabs,.ts-sep,.ts-top-links{display:none}
  .ts-hdr-in{justify-content:space-between}
  .ts-acct-phone{display:block}
  .ts-bar{display:flex;position:sticky;bottom:0;z-index:30;background:var(--bg-1);border-top:1px solid var(--line-strong)}
  .ts-stat-src{margin-left:0;flex-basis:100%}
  .ts-stat-in{gap:var(--sp-1) var(--sp-4)}
  .ts-ftr-in .ts-btn{width:100%}
}
@media print{.ts-bar,.ts-skip{display:none}}

/* loading shimmer: three passes of 1.6 s and then still (TOKENS.txt, the cap applied to the shell's copy) */
.ts-skel{display:grid;gap:0}
.ts-skel i{display:block;height:2.75rem;margin:0;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2));background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){
  .ts-skel i{animation:ts-sh var(--motion-shimmer) linear 3}
  @keyframes ts-sh{to{background-position:-200% 0}}
}

/* old terminal pages keep their fixed sidebar. The new header sticks to the top and the sidebar starts under it.
   terminal-shell.js writes the measured header height into --ts-hdr-h. No page markup changes. */
body:has(.term-sidebar) .ts-hdr{position:sticky;top:0;z-index:100}
@media (min-width:821px){
  body:has(.term-sidebar) .ts-stat{position:sticky;top:var(--ts-hdr-h,56px);z-index:99}
  body:has(.term-sidebar) .term-sidebar{top:calc(var(--ts-hdr-h,56px) + var(--ts-stat-h,0px))}
}
@media (max-width:820px){
  body:has(.term-sidebar) .term-sidebar{top:var(--ts-hdr-h,56px)}
}
body:has(.term-sidebar) .term-main{margin-top:0}
body:has(.term-sidebar) .ts-ftr{margin-left:var(--sidebar-w,230px)}
body:has(.term-sidebar) .ts-bar{position:sticky;bottom:0}

/* page pieces for the pages this phase creates */
.ts-pgb{padding-bottom:var(--sp-5)}
.ts-ph{padding:var(--sp-6) 0 var(--sp-4)}
.ts-ph h1{font:800 var(--fs-h1)/1.1 var(--font-text);letter-spacing:-.02em;color:var(--text-1)}
.ts-ph .ts-lede{margin-top:var(--sp-3);font-size:var(--fs-lg);line-height:1.55;color:var(--text-1);max-width:40rem}
.ts-cards{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);margin-top:var(--sp-5);max-width:40rem}
.ts-card{background:var(--bg-1);border:1px solid var(--line-strong);border-radius:var(--r-2);padding:var(--sp-5);display:grid;gap:var(--sp-3);align-content:start}
.ts-card .ts-btn{width:auto}
.ts-panels{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);margin-top:var(--sp-5)}
@media (min-width:1024px){.ts-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-panel-primary{grid-column:1 / -1}}
.ts-panel{background:var(--bg-1);border:1px solid var(--line-strong);border-radius:var(--r-2);padding:var(--sp-4);min-height:8rem}
.ts-panel h2{font:700 var(--fs-lg)/1.2 var(--font-text);color:var(--text-1)}