/* Inside Basecoat's base layer: Basecoat's components (buttons, cards, badges, dialogs…) win any collision with these
   older site rules, while unlayered files (tokens, page stylesheets) still override both. */
@layer base{
/* Site shell: sticky header, footer, sign-in page, forms and dashboard account controls. Loaded last. */
body{background:radial-gradient(1100px 520px at 88% -120px,var(--purple-soft) 0,transparent 70%),radial-gradient(700px 380px at -10% 10%,var(--glow-gold) 0,transparent 70%),var(--paper);background-repeat:no-repeat;min-height:100vh;display:flex;flex-direction:column}
#app{flex:1;display:flex;flex-direction:column}#app>main{flex:1;width:100%}
.site-header{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom-color:color-mix(in srgb,var(--line) 80%,transparent)}
.header-actions{gap:14px}
/* Cards lift gently on hover */
a.space-card,.brand-value{transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
a.space-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px #6608740f}
a.space-card .card-arrow{transition:transform .2s}a.space-card:hover .card-arrow{transform:translateX(4px)}
.brand-value:hover{box-shadow:inset 0 0 0 1px var(--purple-line)}
.hero-art{box-shadow:0 24px 60px -28px #66087433}
/* Footer */
.site-footer{margin-top:24px;padding:26px 0 30px;background:color-mix(in srgb,var(--surface) 50%,transparent)}
.footer-inner{align-items:center;flex-wrap:wrap}
.footer-mark{width:24px;height:24px;display:inline-block}.footer-mark svg{width:100%;height:100%}
/* Sign-in */
.auth-shell{display:flex;align-items:center;justify-content:center;padding-top:64px;padding-bottom:72px}
.auth-card{width:min(920px,100%);display:grid;grid-template-columns:1fr 1.08fr;border:1px solid var(--line);border-radius:26px;background:var(--white);overflow:hidden;box-shadow:0 30px 80px -40px #6608743d}
.auth-art{position:relative;background:var(--purple-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:48px 32px;text-align:center;border-right:1px solid var(--purple-line);overflow:hidden}
.auth-art:before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);background-size:22px 22px;opacity:.35;mask-image:radial-gradient(circle at 50% 45%,black,transparent 75%)}
.auth-art>*{position:relative;z-index:1}
.auth-art-mark{width:112px;height:112px;padding:20px;border-radius:30px;background:var(--white);box-shadow:0 18px 40px #6608741f}.auth-art-mark svg{width:100%;height:100%}
.auth-art-word .brand-wordmark{font-size:30px}
.auth-body{padding:52px 50px 44px}
.auth-body h1{font-size:34px;letter-spacing:-1px;font-weight:620;margin:20px 0 10px}
.auth-intro{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:28px}
.auth-note{display:flex;align-items:center;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
/* Forms */
.form{display:flex;flex-direction:column;gap:16px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.field input{width:100%;min-height:46px;border:1px solid var(--purple-line);border-radius:10px;background:var(--surface);padding:11px 14px;font-size:15px;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
.field input:hover{border-color:var(--line-strong)}
.field input:focus{outline:none;border-color:var(--purple);background:var(--white);box-shadow:0 0 0 4px #66087418}
.form-error{font-size:12px;line-height:1.6;color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-line);border-radius:9px;padding:10px 12px}
.form-error[hidden]{display:none}
/* Dashboard account controls */
.identity-embed .brand-philosophy{border-top:0;padding-top:4px}
@media(max-width:760px){
  .header-actions>[data-action=logout]{display:inline-flex}
  .auth-shell{padding-top:28px;padding-bottom:40px}
  .auth-card{grid-template-columns:1fr;border-radius:22px}
  .auth-art{flex-direction:row;justify-content:flex-start;gap:14px;padding:22px 24px;border-right:0;border-bottom:1px solid var(--purple-line);text-align:left}
  .auth-art:before{display:none}
  .auth-art-mark{width:56px;height:56px;padding:10px;border-radius:16px}
  .auth-art-word .brand-wordmark{font-size:22px}
  .auth-body{padding:28px 24px 26px}
  .auth-body h1{font-size:28px}
  .footer-inner{justify-content:center;text-align:center;gap:12px}}
@media(max-width:440px){.header-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){a.space-card:hover{transform:none}}
/* Type: apply the fluid scale from tokens.css (overrides the fixed sizes in the base sheets) */
.top-nav{font-size:var(--fs-sm)}.language button{font-size:var(--fs-2xs)}
.eyebrow{font-size:var(--fs-2xs)}.link-button{font-size:var(--fs-sm)}
.brand-wordmark{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.hero h1,html[lang] .hero h1{font-size:var(--fs-display)}html[lang=en] .hero h1{line-height:1.12;letter-spacing:-.03em}
.hero p{font-size:var(--fs-base);line-height:1.9;max-width:32em}
.brand-philosophy h2{font-size:var(--fs-2xl)}.brand-philosophy .section-head p{font-size:var(--fs-sm)}
.brand-value h3{font-size:var(--fs-md)}.value-meaning{font-size:var(--fs-xs);margin-top:5px}.brand-value p{font-size:var(--fs-sm);line-height:1.8;max-width:none}
.section-head h2{font-size:var(--fs-2xl)}.section-head p{font-size:var(--fs-sm)}
.space-card h3{font-size:var(--fs-lg)}.space-card p{font-size:var(--fs-sm);max-width:28em}
.site-footer{font-size:var(--fs-xs)}.model-name{font-size:var(--fs-sm)}.model-description{font-size:var(--fs-xs)}
.section-caption,.help-text{font-size:var(--fs-xs)}.endpoint code{font-size:var(--fs-xs)}
.key-banner strong{font-size:var(--fs-sm)}.key-banner p{font-size:var(--fs-xs)}.key-code{font-size:var(--fs-md)}
.detail-label{font-size:var(--fs-2xs)}.detail-value{font-size:var(--fs-sm)}
.security-row h3{font-size:var(--fs-sm)}.security-row p{font-size:var(--fs-xs)}.security-value{font-size:var(--fs-sm)}
.account-profile h2{font-size:var(--fs-lg)}.account-profile p{font-size:var(--fs-xs)}
.field label{font-size:var(--fs-sm)}.field input{font-size:max(16px,var(--fs-base))}.form-error{font-size:var(--fs-sm)}
.auth-body h1{font-size:var(--fs-2xl)}.auth-intro{font-size:var(--fs-sm)}.auth-note{font-size:var(--fs-xs)}
/* Line breaking: even out short blocks and headings, avoid a lone word or character on the last line of longer text */
h1,h2,h3,.eyebrow,.auth-intro,.auth-note,.section-head p,.security-row p,.space-card p,.brand-value p,.form-error,.help-text,.section-caption{text-wrap:balance}
p,li,td,dd{text-wrap:pretty}
.hero p{text-wrap:balance}
.nowrap{white-space:nowrap}
/* Chinese short text: break at punctuation rather than inside a word; fall back to anywhere if a phrase is too long */
html[lang=zh-CN] :is(h1,h2,h3,.auth-intro,.section-head p,.security-row p,.space-card p,.form-error,.help-text,.section-caption,.hero p){word-break:keep-all;overflow-wrap:anywhere}
/* Concept card text breaks at punctuation in Chinese */
html[lang=zh-CN] .brand-value p{word-break:keep-all;overflow-wrap:anywhere}
/* Phones: concept cards in one column, art above the text at a generous size */
@media(max-width:560px){
  .identity-cards{grid-template-columns:1fr}
  .identity-card .identity-card-art{width:min(100%,200px);margin:0 0 var(--sp-3)}}
/* Tablets: concept cards two by two until there is room for four */
@media(min-width:561px) and (max-width:1100px){.identity-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* L · U · Si · C heading: tight, even spacing */
.brand-philosophy h2{letter-spacing:0;word-spacing:-.12em}
.brand-philosophy h2>span{padding:0 .08em}
/* Positive notice in forms (e.g. a device added from a one-time link) */
.form-ok{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-sm);line-height:1.6;color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);border-radius:9px;padding:10px 12px;text-wrap:pretty}
.form-ok svg{margin-top:4px}
/* Logo and wordmark strokes follow the theme (the SVGs carry the official colours as attributes) */
svg [stroke="#660874" i]{stroke:var(--logo-si)}svg [fill="#660874" i]{fill:var(--logo-si)}
svg [stroke="#7D438C" i]{stroke:var(--logo-l)}svg [fill="#7D438C" i]{fill:var(--logo-l)}
svg [stroke="#753584" i]{stroke:var(--logo-u)}svg [fill="#753584" i]{fill:var(--logo-u)}
svg [stroke="#926B18" i]{stroke:var(--logo-gold)}svg [fill="#926B18" i]{fill:var(--logo-gold)}
/* Language menu: one button with the current language; the choices open in a small menu */
.lang-menu{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-size:var(--fs-xs);cursor:pointer}
.lang-btn svg{fill:none;stroke:currentColor;stroke-width:1.6;color:var(--purple)}
.lang-btn:hover,.lang-btn[aria-expanded=true]{border-color:var(--purple-line);background:var(--purple-soft)}
.lang-list{position:absolute;right:0;top:calc(100% + 6px);min-width:9.5rem;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-2);z-index:40}
.lang-list button{display:flex;align-items:center;min-height:40px;padding:8px 12px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font-size:var(--fs-sm);text-align:left;cursor:pointer}
.lang-list button:hover{background:var(--surface-2)}
.lang-list button[aria-checked=true]{color:var(--purple);background:var(--purple-soft);font-weight:600}
.lang-list button[aria-checked=true]::after{content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.lang-list[hidden]{display:none}
@media(pointer:coarse){.lang-btn{min-height:40px}}
/* Sign-in: the Lusic account first, older ways in folded below */
.auth-sub{margin:var(--sp-3) 0 0;text-align:center}
.auth-alt{margin-top:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.auth-alt>summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:var(--sp-2);list-style:none}
.auth-alt>summary::-webkit-details-marker{display:none}
.auth-alt>.help-text{margin:var(--sp-2) 0 var(--sp-3)}
.auth-body>.form-error{margin-bottom:var(--sp-4)}
/* Basecoat dialog bodies (core.js openDialog) */
.dialog section>p{font-size:var(--fs-sm);line-height:1.8;color:var(--muted);text-wrap:balance}
.dialog section .form{margin-top:var(--sp-4)}
.dialog section pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--purple-soft);padding:var(--sp-4);border-radius:var(--radius-sm);font-size:var(--fs-xs);line-height:1.9;color:var(--purple)}
}