:root{
  color-scheme:var(--scheme);
  --scheme:dark;
  --dark:#152227;--green:#c8e6a0;--cream:#f5f1e8;--panel:#1d3036;
  --line:#718b8d;--muted:#b8c8c7;--danger:#f2b4a4;--warning:#e4dca1;
  --field:#101d22;--raised:#243c40;--border:var(--line);
  --hero:linear-gradient(155deg,#21393f 0%,#1a2d32 60%,#182a2e 100%);
  --shell-hover:#c8e6a012;--shell-active:#c8e6a022;--accent-soft:#c8e6a01a;
  --space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-5:3rem;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme="light"]{
  --scheme:light;
  --dark:#f5f3eb;--green:#315b2b;--cream:#1d3036;--panel:#fffdf7;
  --line:#7d908a;--muted:#4f6264;--danger:#993b2b;--warning:#705414;
  --field:#fffdf7;--raised:#e8eee3;
  --hero:linear-gradient(155deg,#e4eddf 0%,#eef2e7 60%,#f5f3eb 100%);
  --shell-hover:#315b2b0d;--shell-active:#315b2b14;--accent-soft:#315b2b12;
}
*,*::before,*::after{box-sizing:border-box}
[hidden],html[data-public-preview] [data-finance]{display:none!important}
body{margin:0;background:var(--dark);color:var(--cream);overflow-wrap:anywhere}
a{color:var(--green);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.container,.page-shell{width:min(1160px,calc(100% - 3rem));margin-inline:auto;min-width:0}
.page-shell{padding-block:0 var(--space-5)}
.site-header{border-bottom:1px solid var(--line);background:var(--dark)}
.site-header>.site-nav{width:min(1480px,100%);margin:auto;display:flex;align-items:center;gap:1rem;min-height:64px;padding:.5rem 1.25rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--cream);font-size:1.1rem;line-height:1.5;font-weight:750;letter-spacing:-.01em;text-decoration:none;flex-shrink:0;min-height:44px}
.site-header .brand{color:var(--cream)}
.brand img{width:34px;height:36px}
.nav-account,.actions,.hero-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.nav-account{margin-left:auto;font-size:.85rem;gap:.75rem;justify-content:flex-end}
.nav-account button{padding:.35rem .7rem}
.site-header>.site-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto}
.site-header>.site-nav>.nav-account{min-width:0;max-width:100%;flex-wrap:nowrap}
.site-header>.site-nav>.nav-account>button{flex:none;white-space:nowrap}
.site-header>.site-nav>.site-index{position:relative}
.site-header .nav-identity{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-identity{color:var(--muted)}
html:not([data-public-preview]) .site-header .header-preview{display:none}
a.nav-identity{color:var(--green)}
span.nav-identity{border:1px solid var(--line);border-radius:2rem;padding:.2rem .7rem;font-size:.8rem}
.site-header :is(span.nav-identity,.theme-toggle){display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:44px;min-height:44px;padding:.35rem .7rem;border:1px solid var(--line);border-radius:2rem;background:var(--dark);color:var(--muted);font:600 .8rem/1.5 system-ui,sans-serif;white-space:nowrap}
.site-header>.site-nav>.theme-toggle{width:80px;flex:none}
.theme-toggle .theme-to-dark{display:none}
:root[data-theme="light"] .theme-toggle .theme-to-light{display:none}
:root[data-theme="light"] .theme-toggle .theme-to-dark{display:inline}
:root[data-theme="light"] .site-header .brand img{filter:brightness(.35)}
.site-header .theme-toggle:hover{border-color:var(--green);filter:none}

/* Latent Lands alone overrides the shared Index's two-ID colour lock.
   Matching its guards plus our static header hook outranks all its states,
   even though the shared stylesheet loads later. Keep shared files intact. */
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]{width:80px!important;min-width:80px!important;color:var(--muted)!important;color-scheme:var(--scheme)!important}
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]>summary{justify-content:center!important;gap:.5rem!important;height:44px!important;min-height:44px!important;padding:.35rem .7rem!important;border:1px solid var(--line)!important;border-radius:2rem!important;background:var(--dark)!important;color:var(--muted)!important;font:600 .8rem/1.5 system-ui,sans-serif!important}
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]>summary:is(:hover,:focus-visible),
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu][open]>summary{border-color:var(--green)!important}
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]>.site-index-links{border:1px solid var(--line)!important;border-radius:1rem!important;background:var(--panel)!important;color:var(--cream)!important;box-shadow:0 8px 24px #0004!important}
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]>.site-index-links>a{color:var(--cream)!important}
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]>.site-index-links>a:hover{background:var(--shell-hover)!important}
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]>.site-index-links>a[aria-current="page"]{background:var(--shell-active)!important;color:var(--green)!important;box-shadow:inset 2px 0 var(--green)!important}
html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu] :is(summary,a):focus-visible{outline-color:var(--green)!important}
.throttle{font-size:.75rem;color:var(--muted)}
h1,h2,h3{line-height:1.15;letter-spacing:-.035em}
h1,.page-hero h1{font-size:clamp(2.5rem,6vw,4.7rem);margin:.5rem 0 1.5rem;max-width:20ch}
h1 span{color:var(--green)}
h2{font-size:1.8rem;margin:0 0 1rem}
h3{font-size:1.3rem;margin:0 0 .5rem}
p{margin:0 0 1rem}
.page-hero{padding:5rem 0 3rem;max-width:900px;border:0;background:transparent}
.page-hero .lede{font-size:1.2rem;max-width:760px;color:var(--muted);margin-bottom:1.5rem}
.eyebrow{margin:0 0 .5rem;color:var(--green);font-size:.8rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase}
.muted,.hint{color:var(--muted)}
.hint{font-size:.85rem}
.page-content{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.page-content>*{margin-block:0}
.section{margin-block:0}
.grid,.card-grid{display:grid;gap:1.5rem;min-width:0}
.card-grid,.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.panel,.post,.thread{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.5rem;min-width:0}
.card>:last-child,.panel>:last-child,.post>:last-child,.thread>:last-child{margin-bottom:0}
.card-grid>.card,.card-grid>.panel,.card-grid>article{margin:0}
.card-grid>article:not(.card):not(.panel){background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.5rem;min-width:0}
.section>h2:not(:first-child){margin-top:1.5rem}
.price,.metric{font-size:2.4rem;font-weight:750;line-height:1.2;margin:.7rem 0;color:var(--green);overflow-wrap:anywhere}
.price span{font-size:.85rem;color:var(--muted);font-weight:400}
.metric.small{font-size:1.5rem}
button,.button{display:inline-block;max-width:100%;border:1px solid var(--green);border-radius:.65rem;padding:.65rem 1rem;background:transparent;color:var(--green);font:inherit;font-weight:650;text-decoration:none;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-align:center;min-height:44px}
button.primary,.button.primary{background:var(--green);color:var(--dark)}
button:disabled{opacity:.6;cursor:default}
button:hover,.button:hover{filter:brightness(1.08)}
.button.secondary,button.secondary{background:transparent;color:var(--green)}
.login-panel{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.form-stack,form{min-width:0}
form>*+*{margin-top:1rem}
form form,form:not(.card) form{margin-top:1.5rem}
label{display:block;font-weight:650;margin-bottom:.5rem}
label+label{margin-top:1rem}
button,input,select,textarea{font:inherit}
input:not([type="checkbox"]):not([type="radio"]),textarea,select{display:block;width:100%;max-width:100%;border:1px solid var(--line);border-radius:.5rem;padding:.7rem;background:var(--field);color:var(--cream)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
label :is(input,select,textarea){margin-top:.5rem}
textarea{min-height:8rem;resize:vertical}
input[type="checkbox"],input[type="radio"]{accent-color:var(--green);width:1.2rem;height:1.2rem;vertical-align:middle}
.check{display:flex;align-items:center;gap:.65rem;margin-block:1rem}
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{font-weight:650;padding:0;margin-bottom:.5rem}
summary{cursor:pointer;font-weight:650}
details[open]>summary{margin-bottom:1rem}
.empty-state,.card-grid>p:only-child{padding:1.5rem;border:1px dashed var(--line);border-radius:.65rem;background:var(--dark);color:var(--muted)}
.empty-state:empty,.card-grid>p:only-child:empty{display:none}
.empty-state p:last-child{margin-bottom:0}
.empty-state,.card-grid>p:only-child{width:100%;grid-column:1/-1}
.card-grid:empty{display:none}
.form-stack{display:grid;gap:1rem;align-content:start}
.form-stack>*{margin-block:0}
.form-stack>button,.form-stack>.button,fieldset>button{justify-self:start;width:auto}
.form-stack fieldset>*+*{margin-top:1rem}
.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.filter-grid>h2,.filter-grid>.actions{grid-column:1/-1}
.filter-grid>label{margin:0}
.stack{display:grid;gap:1rem;min-width:0}
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.card-grid>article>h3 a{color:var(--cream);text-decoration:none}
#projects .badge{margin-bottom:1rem}
#projects article>p{margin-bottom:.75rem}
.metadata{display:flex;flex-wrap:wrap;gap:.5rem;color:var(--muted);font-size:.9rem}
.metadata>span{border:1px solid var(--line);border-radius:2rem;padding:.25rem .65rem}
.plan-card{display:flex;flex-direction:column;gap:.75rem}
.plan-card>:last-child{margin-top:auto}
.plan-card .price{margin:0}
.plan-card .badge{align-self:start}
.plan-card h3{margin:0}
.plan-card .hint{margin:0}
.section-header{display:flex;justify-content:space-between;gap:1rem;align-items:start;flex-wrap:wrap}
.section-header h2{margin-bottom:0}
.empty-list{list-style:none;padding:0;margin:1rem 0 0}
.empty-list.empty-state{padding:1.5rem}
.empty-list:has(>li:only-child:not(:has(a,button,h3))){padding:1.5rem;border:1px dashed var(--line);border-radius:.65rem;background:var(--dark);color:var(--muted)}
.empty-list>li+li{margin-top:1rem}
.empty-list:empty::after{content:attr(data-empty);display:block;padding:1.5rem;border:1px dashed var(--line);border-radius:.65rem;background:var(--dark);color:var(--muted)}
.account-state:has(+ #workspace:not([hidden]))>.empty-state{display:none}
.signed-out-state:has(+ form fieldset:not(:disabled)){display:none}
form:has(>fieldset:disabled).available-form{display:none}
.replay-controls{display:none}
.replay-controls:has(button:not(:disabled)){display:grid;gap:1rem}
.team-page form>button{justify-self:start;width:auto}
.team-page #opt-out:disabled,.team-page #opt-in:disabled{display:none}
.result-stack{display:grid;gap:1rem}
.result-stack>p:only-child{width:100%;margin:0;padding:1.5rem;border:1px dashed var(--line);border-radius:.65rem;background:var(--dark);color:var(--muted)}
.result-stack>p.empty-state{border:1px dashed var(--line)}
.chat-layout #rooms{margin-bottom:1rem}
.chat-layout #rooms:empty::after{content:"No rooms yet. Start the first conversation."}
.chat-layout #rooms:not(:has(button)){padding:1.5rem;border:1px dashed var(--line);border-radius:.65rem;background:var(--dark);color:var(--muted)}
.chat-layout #create{display:grid;gap:1rem}
.chat-layout #create>*{margin:0}
.chat-layout #create>button{justify-self:start}
.legal .page-content{max-width:880px;margin-inline:auto}
.legal article>section{margin-inline:0;padding-top:2rem;border-top:1px solid var(--line)}
.legal article>h2{margin-inline:0}
.legal .contents-list{display:grid;gap:.5rem;padding-left:1.25rem}
.owner-placeholder{display:inline-block;padding:.1rem .4rem;border:1px dashed var(--green);border-radius:.3rem;color:var(--green);text-decoration:none}
@media(max-width:900px){.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.filter-grid,.split-grid{grid-template-columns:minmax(0,1fr)}}
.table-wrap,.table-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain}
.table-wrap:focus-visible,.table-scroll:focus-visible{outline-offset:-3px}
table{width:100%;border-collapse:collapse;text-align:left}
.table-wrap>table,.table-scroll>table{min-width:640px}
caption{text-align:left;color:var(--muted);padding-bottom:1rem}
th,td{padding:.75rem;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
th{font-weight:650}
.table-wrap th,.table-scroll th{white-space:nowrap;overflow-wrap:normal}
.model-comparison .comparison-note{display:block;max-width:min(100%,calc(100vw - 5rem));white-space:normal;overflow-wrap:anywhere}
.model-comparison{display:block;max-width:100%;overflow-x:auto;scrollbar-gutter:stable}
.model-comparison>table{min-width:960px}
.page-content,.chat-layout,.split-grid>*{min-width:0}
#projects .project-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:1.6;max-height:4.8em;overflow:hidden}
#projects .project-read-more{display:inline-block;margin-bottom:.75rem;font-size:.85rem}
.notice,.preview-document{border-left:3px solid var(--green);padding:1rem;background:var(--panel)}
.error,[role="alert"]{color:var(--danger)}
[role="status"]:empty,[role="alert"]:empty{display:none}
img,video,canvas,svg{max-width:100%}
pre,output{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.body,.message-body{white-space:pre-wrap;overflow-wrap:anywhere}
#followed{display:flex;flex-wrap:wrap;gap:1rem}
#projects .badge,.badge{display:inline-block;padding:.2rem .6rem;border-radius:.5rem;background:var(--green);color:var(--dark);font-weight:650}
#bot-topics label{display:inline-block;margin-right:1rem}
#member,#workspace{display:grid;gap:1.5rem}
#project-depth>*+*,.thread>.post{margin-top:1.5rem}
.legal article{max-width:100%}
.legal article>section{margin-top:2rem}
.legal article h2{margin-top:0}
.preview-document{border:1px solid var(--line);border-radius:1rem;padding:1.5rem}
.owner-placeholder{font-weight:700;text-decoration:underline dotted}
dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(460px,100%);height:100%;max-height:100%;border:0;border-left:1px solid var(--line);background:var(--dark);color:var(--cream);padding:2rem}
dialog::backdrop{background:#0009}
.drawer-close{float:right;margin-bottom:1rem}
dialog h2{clear:both}
.chart{overflow-x:auto}
.chart svg{display:block;width:100%;height:auto;min-width:500px}
.chart text{font:12px system-ui,sans-serif;fill:var(--cream)}
.chart .bar{fill:var(--green)}
.chart .negative{fill:var(--danger)}
.chart .axis{stroke:var(--muted);stroke-width:1}
.site-footer{border-top:1px solid var(--line);padding-block:2rem;font-size:.85rem;color:var(--muted)}
.site-footer p:last-child{margin-bottom:0}
.skip-link{position:fixed;left:1rem;top:-5rem;padding:.5rem;background:var(--cream);color:var(--dark);z-index:10}
.skip-link:focus{top:1rem}
.live-chat-content{min-width:0}
.live-chat-panel{background:var(--panel);border-left:1px solid var(--line);padding:1rem;min-width:0;font-size:.9rem}
.live-chat-room{display:flex;flex-direction:column;gap:.65rem;height:100%;min-height:0}
.live-chat-heading,.live-chat-intro,.live-chat-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.live-chat-heading h2{font-size:1.3rem;margin:0}
.live-chat-intro{font-size:.8rem;flex-wrap:wrap}
.live-chat-online,.live-chat-meta time{color:var(--muted);font-size:.75rem}
.live-chat-messages{flex:1;min-height:3rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:.25rem}
.live-chat-message{border-bottom:1px solid var(--line);padding:.65rem 0}
.live-chat-message p{margin:.25rem 0}
.live-chat-meta{align-items:baseline}
.live-chat-meta strong{min-width:0}
.live-chat-meta time{flex-shrink:0}
.live-chat-report{border:0;padding:.1rem 0;min-height:28px;font-size:.75rem;text-decoration:underline;text-align:left}
.live-chat-status{margin:0;max-height:5rem;overflow:auto;flex-shrink:0}
.live-chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;flex-shrink:0}
.live-chat-form>*{margin:0}
.live-chat-form label{font-size:.8rem;grid-column:1/-1}
.live-chat-form input,.live-chat-form textarea{padding:.4rem;min-height:0}
.live-chat-form textarea{height:4rem;max-height:8rem;resize:vertical}
.live-chat-form label :is(input,textarea){margin-top:.2rem}
.live-chat-form .hint{font-size:.75rem;grid-column:1/-1}
.live-chat-form button{grid-column:2}
.live-chat-toggle{font-size:.75rem;min-height:32px;padding:.25rem .5rem;margin-bottom:.65rem}
.live-chat-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;text-align:left}
.live-chat-bar-online{font-size:.75rem;white-space:nowrap}
@media(min-width:1100px){
  .has-live-chat>.site-header{position:sticky;top:0;z-index:20;background:var(--dark)}
  .live-chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .live-chat-layout.chat-collapsed{grid-template-columns:minmax(0,1fr) 62px}
  .live-chat-layout .live-chat-panel{position:sticky;top:var(--live-chat-header-height,88px);height:calc(100dvh - var(--live-chat-header-height,88px));display:flex;flex-direction:column}
  .live-chat-panel .live-chat-room{flex:1}
  .chat-collapsed .live-chat-panel{padding:.5rem}
  .live-chat-toggle{align-self:flex-end}
  .live-chat-bar,.live-chat-close{display:none}
  .live-chat-content :is(.container,.page-shell){margin-inline:auto}
}
@media(max-width:1099px){
  .has-live-chat{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .live-chat-toggle{display:none}
  .live-chat-bar{position:fixed;z-index:30;bottom:0;left:0;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;border-radius:0;border:0;border-top:1px solid var(--line);background:var(--panel);padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));min-height:64px}
  .live-chat-layout .live-chat-panel{position:fixed;z-index:31;bottom:0;right:0;width:min(520px,100%);height:min(85dvh,760px);padding-bottom:calc(1rem + env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:1rem 1rem 0 0;box-shadow:0 -12px 48px #0006;transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  .live-chat-layout .live-chat-panel.live-chat-open{transform:translateY(0);visibility:visible}
  .live-chat-close{padding:.35rem .6rem;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){.live-chat-panel{transition:none}}
@media(max-width:900px){
  .card-grid,.grid.three,.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero{padding-top:3rem}
}
@media(max-width:600px){
  .container,.page-shell{width:calc(100% - 2rem)}
  .site-header>.site-nav{padding:.5rem 1rem;gap:.5rem}
  .nav-account{gap:.5rem}
  .card-grid,.grid.three,.grid.four,.login-panel{grid-template-columns:minmax(0,1fr)}
  .page-hero{padding:2rem 0}
  .page-hero h1{font-size:2.25rem}
  .page-hero .lede{font-size:1.125rem}
  .hero-actions{align-items:stretch;gap:1rem}
  .hero-actions>.primary{width:100%}
  .card,.panel,.post,.thread,.preview-document,.card-grid>article:not(.card):not(.panel){padding:1rem}
  .actions{gap:.5rem}
  .table-wrap>table,.table-scroll>table{min-width:640px}
}

/* App shell (docs/design/layout-plan.md): slim header, left navigation,
   centre content column and, on Lobby pages, the right community column. */
:root{--shell-header:65px;--shell-left:240px;--shell-right:320px;--shell-centre:760px;--shell-tab:64px}
html{scrollbar-gutter:stable}
body>header[data-nav]{min-height:65px;border-bottom:1px solid var(--line)}
/* The HTML frame reserves the final columns even before modules execute. */
.shell-frame{--shell-centre:880px}
html[data-public-preview] .shell-frame:not(.shell-chat-page){--shell-centre:760px;grid-template-columns:var(--shell-left) minmax(0,1fr) var(--shell-right)}
.shell-frame>.app-centre{grid-column:2}
.has-shell>.site-header{position:sticky;top:0;z-index:40;background:var(--dark)}
.app-shell{display:grid;grid-template-columns:var(--shell-left) minmax(0,1fr);align-items:start;width:min(1480px,100%);margin-inline:auto}
.app-shell.has-right{grid-template-columns:var(--shell-left) minmax(0,1fr) var(--shell-right)}
.app-shell:not(.has-right){--shell-centre:880px}
.app-left,.app-right{position:sticky;top:var(--shell-header);max-height:calc(100dvh - var(--shell-header));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.app-left{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem .75rem 2rem}
.app-right{display:flex;flex-direction:column;gap:1rem;height:calc(100dvh - var(--shell-header));padding:1.25rem 1rem 1.5rem}
.app-left :focus-visible,.app-right :focus-visible,.app-bottom-nav :focus-visible{outline-offset:-3px}

/* Centre: each page's own <main> and footer, centred at a readable width. */
.app-centre{min-width:0;padding:1.5rem 1.5rem 0}
.app-centre>*{max-width:var(--shell-centre);margin-inline:auto}
.app-centre>.container,.app-centre>.page-shell,.app-centre>.site-footer{width:100%}
.app-centre>main{container:centre/inline-size}
.app-centre>aside[role="status"]{margin-bottom:1.5rem}
.app-centre>aside[role="status"]{background:var(--green)!important;color:var(--dark)!important}
.app-centre .card-grid.balanced-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#usage-summary .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.recent-tasks{grid-column:1/-1}
@media(min-width:1100px){
  .app-shell.has-right .usage-well{display:none}
  .usage-info:has(>.usage-well){grid-template-columns:minmax(0,1fr)}
}
.app-centre .page-hero{max-width:none;margin-bottom:1.5rem;padding:2rem;border:1px solid var(--line);border-radius:1.25rem;background:var(--hero)}
.app-centre .page-hero h1{font-size:2.5rem;font-size:clamp(2rem,6.5cqi,3rem);max-width:22ch;margin:.25rem 0 1rem}
.app-centre .page-hero .lede{font-size:1.1rem;margin-bottom:1.25rem}
.app-centre .page-hero>:last-child{margin-bottom:0}
.app-centre>.site-footer{margin-top:.5rem;padding-bottom:2rem}
@container centre (max-width:780px){
  .app-centre :is(.card-grid,.grid.three,.grid.four){grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-centre .card-grid.balanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-centre .balanced-grid>:last-child:nth-child(odd){grid-column:1/-1}
  .app-centre .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container centre (min-width:661px){
  .app-centre #projects.balanced-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-centre #projects.balanced-grid>article{padding:1rem;grid-column:auto}
}
@container centre (max-width:540px){
  .app-centre :is(.card-grid,.grid.three,.grid.four,.filter-grid,.split-grid,.login-panel){grid-template-columns:minmax(0,1fr)}
  #usage-summary .card-grid{grid-template-columns:minmax(0,1fr)}
}
@container centre (max-width:660px){
  .app-centre .card-grid.balanced-grid{grid-template-columns:minmax(0,1fr)}
}

/* Left navigation */
.shell-nav-list,.shell-more-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.shell-link{display:flex;align-items:center;gap:.8rem;min-height:44px;padding:.55rem .8rem;border-radius:.75rem;color:var(--cream);font-weight:600;text-decoration:none;transition:background-color .15s ease}
.shell-link:hover{background:var(--shell-hover)}
.shell-link[aria-current="page"]{background:var(--shell-active);color:var(--green);box-shadow:inset 3px 0 0 var(--green)}
.shell-icon{display:inline-block;flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.shell-link .shell-icon{color:var(--muted)}
.shell-link:hover .shell-icon,.shell-link[aria-current="page"] .shell-icon{color:var(--green)}
.shell-personal{display:grid;gap:1.25rem}
.shell-group{display:grid;gap:.25rem;padding-top:1rem;border-top:1px solid var(--line)}
.shell-heading{margin:0 0 .25rem;padding:0 .8rem;color:var(--muted);font-size:.72rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.shell-note{margin:0;padding:0 .8rem;color:var(--muted);font-size:.85rem;line-height:1.5}
.shell-sublink{display:flex;align-items:center;min-height:40px;padding:.3rem .8rem;border-radius:.6rem;color:var(--muted);font-size:.88rem;text-decoration:none}
.shell-sublink:hover{color:var(--cream);background:var(--shell-hover)}
.shell-sublink[aria-current="page"]{color:var(--green);background:var(--shell-active)}
.shell-text-button{justify-self:start;border:0;min-height:40px;padding:.3rem .8rem;font-size:.85rem;font-weight:600;text-decoration:underline;text-underline-offset:.2em;text-align:left}
.shell-rail-more,.app-bottom-nav,.shell-backdrop,.shell-chat-button{display:none}

/* Header Chat button (tablet) and unread dot shared with the phone tab */
.shell-chat-button{position:relative;align-items:center;gap:.45rem;padding:.35rem .85rem}
.shell-chat-button .shell-icon{width:18px;height:18px}
.shell-chat-trigger.has-unread::after{content:"";position:absolute;top:.4rem;right:.45rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--dark)}

/* Right column: Lobby chat, Who's online and the Well */
.shell-chat-slot{display:flex;flex-direction:column;flex:none;min-height:0}
.shell-chat-slot>.live-chat-panel{position:relative;flex:none;display:flex;flex-direction:column;min-height:0;max-height:min(640px,calc(100dvh - var(--shell-header) - 3rem));padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel)}
.shell-chat-slot>.live-chat-panel .live-chat-room{flex:0 1 auto;height:auto;min-height:0;overflow:hidden}
.shell-chat-slot .live-chat-messages{flex:0 1 auto;min-height:3rem;max-height:16rem;overflow-y:auto}
.shell-chat-slot>.live-chat-panel.live-chat-collapsed{flex:none;min-height:0;padding:.5rem}
.shell-chat-slot .live-chat-toggle{position:absolute;top:.85rem;right:1rem;margin:0}
.shell-chat-slot .live-chat-collapsed .live-chat-toggle{position:static;width:100%}
.shell-card{flex:none;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel);font-size:.9rem}
.shell-card h2{font-size:1rem;letter-spacing:-.01em;margin:0 0 .5rem}
.shell-card p{margin:0 0 .5rem}
.shell-card>:last-child{margin-bottom:0}
.shell-card .hint{font-size:.78rem}
.shell-online-count{display:flex;align-items:center;gap:.6rem;color:var(--green);font-size:1.15rem;font-weight:750}
.shell-online-count::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--accent-soft)}

/* Icons are CSS masks, so they follow the text colour. */
.icon-feed{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19.1 4.9a10 10 0 0 1 0 14.2M4.9 19.1a10 10 0 0 1 0-14.2'/></svg>")}
.icon-projects{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2.5h7.5A2.5 2.5 0 0 1 21 10v7.5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z'/></svg>")}
.icon-benchmark{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20h18M6.5 16.5v-5M12 16.5V5M17.5 16.5v-8'/></svg>")}
.icon-awards{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='5.5'/><path d='M8.6 13.4 7.5 21l4.5-2.5 4.5 2.5-1.1-7.6'/></svg>")}
.icon-garden{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21v-8.5M12 12.5C12 8.4 9.2 5.5 4.5 5.5c0 4.1 2.9 7 7.5 7zM12 14.5c0-4.1 2.9-7 7.5-7 0 4.1-2.8 7-7.5 7z'/></svg>")}
.icon-forum{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5a2 2 0 0 1-2 2H8l-4 3.5V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zM8 9h8M8 12.5h5'/></svg>")}
.icon-teams{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20v-.5a6.5 6.5 0 0 1 13 0v.5M16 4.6a3.5 3.5 0 0 1 0 6.8M21.5 20v-.5a6.5 6.5 0 0 0-3.7-5.9'/></svg>")}
.icon-chat{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 21l1.4-4.6A8.5 8.5 0 1 1 20.5 12z'/></svg>")}
.icon-more{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>")}

/* Tablet: icon rail on the left; the right column becomes a drawer behind Chat. */
@media(min-width:768px) and (max-width:1099px){
  html[data-public-preview] .shell-frame:not(.shell-chat-page){grid-template-columns:84px minmax(0,1fr)}
  .app-shell,.app-shell.has-right{grid-template-columns:84px minmax(0,1fr)}
  .app-left{align-items:center;gap:.75rem;padding:1rem .5rem 1.5rem;border-right:1px solid var(--line)}
  .app-left .shell-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .app-left .shell-link{justify-content:center;width:52px;height:52px;padding:0}
  .app-left .shell-link[aria-current="page"]{box-shadow:none}
  .app-left .shell-personal,.app-left .shell-more{display:none}
  .shell-rail-more{display:flex;align-items:center;justify-content:center;gap:.8rem;width:52px;height:52px;padding:0;border-color:transparent;color:var(--muted)}
  .shell-rail-more:hover{color:var(--green);background:var(--shell-hover)}
  .shell-chat-button{display:inline-flex}
  .app-right{position:fixed;z-index:50;top:0;right:0;bottom:0;width:min(400px,100%);height:100dvh;max-height:none;background:var(--dark);border-left:1px solid var(--line);box-shadow:-16px 0 48px #0007;transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility .22s}
  .shell-chat-open .app-right{transform:none;visibility:visible}
  /* More opens the rail as a labelled panel over the page. */
  .shell-more-open .app-left{position:fixed;z-index:50;top:var(--shell-header);left:0;bottom:0;width:280px;max-height:none;align-items:stretch;padding:1rem .75rem 2rem;background:var(--dark);box-shadow:16px 0 48px #0007}
  .shell-more-open .app-left .shell-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
  .shell-more-open .app-left :is(.shell-link,.shell-rail-more){justify-content:flex-start;width:auto;height:auto;min-height:44px;padding:.55rem .8rem}
  .shell-more-open .app-left :is(.shell-personal,.shell-more){display:grid}
}

/* Phone: header on top, bottom navigation, chat and More slide up as sheets. */
@media(max-width:767px){
  /* Reserve both rows before hydration: brand above a left-aligned controls row. */
  :root{--shell-header:113px}
  .site-header>.site-nav{position:relative;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:44px minmax(44px,auto);gap:.5rem;padding:.5rem 1rem}
  .site-header>.site-nav>.brand{grid-column:1/-1;grid-row:1;min-width:0;gap:.4rem;font-size:1rem}
  .site-header>.site-nav>.brand img{flex:none}
  .site-header>.site-nav>.nav-account{grid-column:1;grid-row:2;justify-content:flex-start;justify-self:stretch;margin:0}
  .site-header>.site-nav>.theme-toggle{grid-column:2;grid-row:2}
  .site-header>.site-nav>.site-index{position:static;grid-column:3;grid-row:2;justify-self:start}
  html:root:not(#oddsprig-si-lock-a):not(#oddsprig-si-lock-b) body>.site-header[data-nav] details.site-index[data-site-index-menu]>.site-index-links{position:absolute!important;inset:calc(100% + .5rem) 1rem auto auto!important;max-height:min(360px,calc(100dvh - var(--shell-header) - 1rem))!important}
  html[data-public-preview] .shell-frame:not(.shell-chat-page){grid-template-columns:minmax(0,1fr)}
  .shell-frame>.app-centre{grid-column:1}
  body.has-shell{padding-bottom:calc(var(--shell-tab) + env(safe-area-inset-bottom) + 1px + 2rem)}
  .app-shell,.app-shell.has-right{grid-template-columns:minmax(0,1fr)}
  .app-centre{padding:1rem 1rem 0}
  body.has-shell .app-centre>main,body.has-shell .app-centre>.site-footer{padding-bottom:calc(var(--shell-tab) + env(safe-area-inset-bottom) + 1px + 24px)}
  .app-centre .card-grid.balanced-grid{grid-template-columns:minmax(0,1fr)}
  .app-centre .page-hero{padding:1.25rem;border-radius:1rem}
  .app-left{display:none}
  .app-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:55;left:0;right:0;bottom:0;padding:0 .25rem env(safe-area-inset-bottom);background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -8px 24px #0004}
  .shell-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:var(--shell-tab);padding:.35rem .2rem;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:.72rem;font-weight:650;line-height:1.2;text-decoration:none}
  .shell-tab[aria-current="page"],.shell-tab[aria-expanded="true"]{color:var(--green)}
  .shell-tab[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--green)}
  .shell-tab.has-unread::after{top:.5rem;right:calc(50% - 1.1rem)}
  .app-right,.shell-more-open .app-left{position:fixed;z-index:50;left:0;right:0;top:auto;bottom:calc(var(--shell-tab) + env(safe-area-inset-bottom));width:100%;max-height:none;background:var(--dark);border:1px solid var(--line);border-bottom:0;border-radius:1.25rem 1.25rem 0 0;box-shadow:0 -16px 48px #0008}
  .app-right{height:min(82dvh,720px);padding:.75rem 1rem 1rem;transform:translateY(calc(100% + var(--shell-tab) + 2rem));visibility:hidden;transition:transform .22s ease,visibility .22s}
  .shell-chat-open .app-right{transform:none;visibility:visible}
  .shell-more-open .app-left{display:flex;height:auto;max-height:min(78dvh,680px);padding:.75rem 1rem 1.5rem}
  .app-right::before,.shell-more-open .app-left::before{content:"";flex:none;align-self:center;width:40px;height:4px;border-radius:2px;background:var(--line)}
  .shell-more-open .app-left .shell-nav-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shell-rail-more{display:none}
  .shell-chat-slot>.live-chat-panel{min-height:0}
}
@media(max-width:1099px){
  .shell-backdrop{display:block;position:fixed;inset:0;z-index:45;background:#0a1215b8;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
  .shell-chat-open .shell-backdrop,.shell-more-open .shell-backdrop{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.app-right,.app-left,.shell-backdrop,.shell-link{transition:none}}

/* Full document navigation keeps each page's own scripts and browser history.
   Supporting browsers retain separate shell snapshots while the centre fades. */
@view-transition{navigation:auto}
:root{view-transition-name:none}
.site-header{view-transition-name:shell-header}
.app-left{view-transition-name:shell-left}
.app-right{view-transition-name:shell-right}
.app-bottom-nav{view-transition-name:shell-bottom}
.app-centre{view-transition-name:page-centre}
::view-transition-group(shell-header),::view-transition-group(shell-left),::view-transition-group(shell-right),::view-transition-group(shell-bottom){animation:none}
::view-transition-old(shell-header),::view-transition-new(shell-header),::view-transition-old(shell-left),::view-transition-new(shell-left),::view-transition-old(shell-right),::view-transition-new(shell-right),::view-transition-old(shell-bottom),::view-transition-new(shell-bottom){animation:none;mix-blend-mode:normal}
/* Shell surfaces switch atomically. In particular, an outgoing-only right
   column must disappear before the wider chat centre is revealed. */
::view-transition-old(shell-header),::view-transition-old(shell-left),::view-transition-old(shell-right),::view-transition-old(shell-bottom){display:none}
::view-transition-new(shell-header),::view-transition-new(shell-left),::view-transition-new(shell-right),::view-transition-new(shell-bottom){opacity:1}
/* Chat changes the centre's width. Use the incoming bounds immediately and
   clip the outgoing centre so it cannot extend into an incoming right column. */
::view-transition-group(page-centre){animation:none;overflow:clip}
::view-transition-old(page-centre){animation:centre-out .12s ease-out both}
::view-transition-new(page-centre){animation:centre-in .12s ease-in both}
@keyframes centre-out{to{opacity:0}}
@keyframes centre-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}