/* Single visual source of truth: /design.md. Shared by public pages and admin. */
:root{
 --site-background:url('assets/site-background.webp');
 --color-canvas:#090909;--color-text:#e5fff1;--color-muted:#b9ccc1;--color-border:#325245;
 --color-primary:#064bf4;--color-primary-hover:#003bca;--color-on-primary:#fff;--color-accent:#b9fbe0;
 --color-surface:#e5f7ed;--color-input:#fbfffc;--color-surface-text:#101514;--color-surface-muted:#53635f;
 --color-surface-border:#a9beb0;--color-control-border:#6d8478;--color-surface-link:#0645bf;--color-success:#17603b;--color-danger:#a32222;
 --page-gutter:32px;--page-width:min(1180px,calc(100% - 2 * var(--page-gutter)));--page-top:40px;--page-bottom:64px;--section-gap:48px;--grid-gap:24px;--card-padding:24px;
 --font-h1:2rem;--font-h2:1.5rem;--font-h3:1.25rem;--font-body:1rem;--font-label:.875rem;--font-meta:.75rem;
 --text:var(--color-text);--muted:var(--color-muted);--line:var(--color-border);--link:var(--color-accent);
 --blue:var(--color-primary);--ink:var(--color-surface-text);--soft:var(--color-surface);--cyan:var(--color-accent);--lime:var(--color-accent);
}
body{min-height:100vh;background:var(--color-canvas) var(--site-background) center top/100% auto no-repeat;color:var(--text);font:400 var(--font-body)/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body:has(.selected-home){background-position:center min(0px,calc(200px - 30vw))}
/* Crop excess blue on inner pages; keep the full diagonal within the first screen. */
body:not(:has(.selected-home)){background-position:center min(0px,calc(80svh - 68.23vw))}
header,footer{padding:12px max(var(--page-gutter),calc((100% - 1180px)/2));background:transparent;border-color:var(--color-border)}
header{position:relative;z-index:1;min-height:72px;border-bottom:1px solid var(--color-border)}footer{min-height:72px;border-top:1px solid var(--color-border);font-size:var(--font-meta);color:var(--color-muted)}
.brand img{filter:brightness(0) invert(1)}.brand span{border-color:var(--color-border)}
nav a{font-size:var(--font-label);color:var(--color-muted)}nav a:hover,nav a[aria-current]{color:var(--color-accent)}nav a[aria-current]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}
.wrap,.studio{width:var(--page-width);padding:var(--page-top) 0 var(--page-bottom)}
h1{font-size:var(--font-h1);font-weight:700;line-height:1.25;margin-bottom:16px}
h2{font-size:var(--font-h2);font-weight:700;line-height:1.35;margin-bottom:16px}
h3{font-size:var(--font-h3);font-weight:600;line-height:1.4;margin-bottom:12px}
p{font-size:var(--font-body);color:var(--muted);margin-bottom:16px}
small,.small,.meta,.eyebrow{font-size:var(--font-meta);line-height:1.5;color:var(--muted)}
label,.link:not(button),.route-bar,.muted,.selected-note-link,.timeline-heading>span{font-size:var(--font-label);line-height:1.5}
label{color:var(--text)}.link,.route-bar{color:var(--link)}.eyebrow{display:inline-block;margin-bottom:12px;font-weight:600}
.section{margin-top:var(--section-gap)}
/* Scoped surface tokens keep nested text and links readable without selector overrides. */
:where(.account-login,.account-section,.note,.selected-note,.filterbar,.form,.panel,.item,.stat,.team-choice,.callout,.preview-note,.aside,.comment-form,.participation-hint,.connection .card,.bubble,.chat-form,.artifact,dialog){
 --text:var(--color-surface-text);--muted:var(--color-surface-muted);--line:var(--color-surface-border);--link:var(--color-surface-link);
 background:var(--color-surface);color:var(--text);border:1px solid var(--line);border-radius:8px;
}
:where(.account-login,.account-section,.note,.selected-note,.form,.panel,.item,.team-choice,.callout,.preview-note,.aside,.comment-form,.participation-hint,.connection .card,dialog){padding:var(--card-padding)}
:where(.form .form){padding:0;border:0}
input,select,textarea{font-size:var(--font-body);line-height:1.5;min-height:max(44px,calc(1.5em + 22px));height:auto;padding:10px 12px;border:1px solid var(--color-control-border);border-radius:6px;background:var(--color-input);color:var(--color-surface-text);accent-color:var(--color-primary)}
input::placeholder,textarea::placeholder{color:var(--color-surface-muted);opacity:1}
textarea{min-height:128px}
input:is([type=checkbox],[type=radio]){width:20px;height:20px;min-height:20px;padding:0;flex-shrink:0}
button,.btn,.outline,.secondary{min-height:max(44px,calc(1.5em + 22px));height:auto;padding:10px 20px;font-size:var(--font-body);line-height:1.5;font-weight:600;border:1px solid var(--color-control-border);border-radius:6px;background:var(--color-surface);color:var(--color-surface-text);transition:background 150ms;max-width:100%;overflow-wrap:anywhere}
.btn,button.primary,.kind.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.btn{box-shadow:3px 3px 0 #a7c9ba}
.btn:hover,button.primary:hover,.kind.active:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.outline:hover,.secondary:hover{background:var(--color-accent)}
button.link{background:transparent;color:var(--link);border-color:transparent;box-shadow:none}
button:disabled,input:disabled,select:disabled{opacity:.55;cursor:default}
:focus-visible{outline:3px solid var(--link);outline-offset:4px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:var(--color-surface-link)}
.check,label:has(>input[type=checkbox]),label:has(>input[type=radio]){min-height:44px}
.comment,.notification,.receipt,.article-block,.list-row,.note .owner{border-color:var(--line)}
.avatar{width:32px;height:32px;border-radius:8px;background:var(--color-accent);color:var(--color-surface-text)}
.badge,.demo-badge{font-size:var(--font-meta);line-height:1.5;padding:4px 8px;border-radius:999px;background:#e2eaff;color:var(--color-surface-link)}
.demo-badge{border:1px dashed currentColor}.green{background:var(--color-accent);color:var(--color-success)}
.note,.selected-note{box-shadow:4px 4px 0 #032581;min-height:240px;background:#effbf4}
.idea-card:nth-child(3n+2),.selected-note.note-1{background:#e2eaff}.idea-card:nth-child(3n),.selected-note.note-2{background:#d9f4e5}
.compose-note{background:var(--color-surface)}.compose-body h2{font-size:var(--font-h3)}
.empty{padding:24px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}.toast{padding:16px 24px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-canvas);color:var(--color-text)}
.form-feedback:not(:empty),#account-action-feedback:not(:empty),#like-feedback:not(:empty),#passkey-feedback:not(:empty),[data-pk-feedback]:not(:empty),#message:not(:empty),#dialog-feedback:not(:empty){padding:12px;border-radius:6px;background:var(--color-surface);color:var(--color-danger)}
.form-feedback.ok,#message.ok{color:var(--color-success)}
dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto}
dialog::backdrop{background:#030b08aa}dialog .close{min-width:44px;min-height:44px;padding:8px;font-size:1.25rem}
summary{min-height:44px;padding-block:10px}
.site-notice{padding:8px 16px;text-align:center;font-size:var(--font-meta);background:var(--color-surface);color:var(--color-surface-text)}
.timeline-path li{padding:var(--card-padding);border:1px solid var(--color-border);border-radius:8px;background:var(--color-canvas)}
.timeline-status{font-size:var(--font-meta);line-height:1.5;color:var(--muted)}
.timeline-path time,.timeline-date{font-size:var(--font-label);color:var(--link)}
.timeline-path .timeline-current{--text:var(--color-surface-text);--muted:var(--color-surface-muted);--link:var(--color-surface-link);color:var(--text);background:#d6f8e5;border-color:#d6f8e5}
.timeline-current .timeline-status{font-weight:600}
.selected-cta{background:var(--color-primary);color:var(--color-on-primary);padding:var(--card-padding);border-radius:8px;--muted:var(--color-on-primary);--link:var(--color-on-primary)}
.selected-cta .btn{background:var(--color-surface);color:var(--color-surface-link);border-color:var(--color-surface)}
@media(max-width:1000px){:root{--page-gutter:24px;--page-top:32px;--page-bottom:48px;--section-gap:32px}}
@media(max-width:600px){body:has(.selected-home){background-position:center top}:root{--site-background:url('assets/site-background-small.webp');--page-gutter:16px;--page-top:24px;--page-bottom:32px;--grid-gap:16px;--card-padding:16px;--font-h1:1.75rem;--font-h2:1.375rem}header{min-height:64px;padding-block:8px}.brand{font-size:var(--font-meta)}header>.outline{padding-inline:12px}.note,.selected-note{min-height:0}.compose-note{padding:0}.timeline-path li{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Keep discovery controls secondary to the idea wall. */
.wall-page .wall-heading{align-items:center;flex-wrap:wrap;gap:8px 24px;margin-bottom:16px}
.wall-page .wall-heading h1{margin:0}
.wall-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.wall-tools #wall-count{color:var(--color-muted);white-space:nowrap}
.wall-tools select{width:auto;margin:0;padding:8px 28px 8px 8px;border:0;background:transparent;color:var(--color-muted);font-size:var(--font-body)}
.wall-tools select option{background:var(--color-canvas);color:var(--color-text)}
.wall-search-toggle{position:relative;color:var(--color-muted);font-size:var(--font-body)}
.wall-search-toggle summary{cursor:pointer;min-width:44px}
.wall-search-toggle input{position:absolute;top:100%;right:0;z-index:2;width:200px;margin:0;box-shadow:0 4px 16px #0006}
@media(max-width:600px){.wall-page .wall-heading{align-items:flex-start;gap:4px}.wall-tools{gap:8px 12px}.wall-search-toggle input{left:0;right:auto;width:min(200px,60vw)}}

/* Give the account overview more blue space above the diagonal. */
body:has(.participation-columns){background-position:center min(0px,calc(110svh - 68.23vw))}