/* Shared console design layer for the admin console and the users' portal: direction A tokens (light and dark),
   base, buttons, status marks, notices, panels, menus, forms, dialogs, touch and phone rules, and the Web Awesome
   mapping. Loaded after style.css and before admin.css (admin) or portal.css (portal). Section numbers are the
   original admin.css ones. */
/* 1. tokens: light, then dark under [data-theme=dark] (set by theme.js before first paint) */
:root{color-scheme:light;
 --page:#F4F1EA;--sidebar-bg:#E9E5DB;--nav-active:#D7DBD0;--raised:#FBF9F4;--sunken:#EBE7E0;--rule:#D8D3C7;
 --border-control:#8E8A80;--ink:#1B1D1F;--muted:#646862;--accent:#0F5C45;--accent-on:#FFFFFF;
 --blocked:#B93A26;--attention:#8F570E;--blocked-tint:rgba(185,58,38,.07);--attention-tint:rgba(143,87,14,.10);
 --accent-tint:rgba(15,92,69,.12);--scrim:rgba(27,29,31,.7);--disabled:#9DAEA6;--disabled-ink:#F4F1EA;
 --focus:#247cc0;--shadow:0 8px 24px rgba(27,29,31,.12);--band:#F1EDE2;--neutral:#8A8681;
 --f-serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",SimSun,serif;
 --f-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
 --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
 /* legacy names used by style.css */
 --green:var(--accent);--warn:var(--attention);--danger:var(--blocked);--border-hairline:var(--rule);
 --bg:var(--page);--surface:var(--raised);--sidebar:var(--sidebar-bg);--focus-ring:var(--focus);--focus-ring-on-dark:var(--focus);
 --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--row-h:36px;--th-h:32px;--hit:32px;
 font-family:var(--f-sans);font-size:13px;line-height:1.5;color:var(--ink);background:var(--page)}
[data-theme=dark]{color-scheme:dark;
 --page:#0B0F14;--sidebar-bg:#10151C;--nav-active:#1B2A33;--raised:#121821;--sunken:#18212C;--rule:rgba(255,255,255,.08);
 --border-control:#6E7A89;--ink:#E8ECF1;--muted:#8A94A3;--accent:#5EE0B0;--accent-on:#0B0F14;
 --blocked:#FF7A66;--attention:#F2B84B;--blocked-tint:rgba(255,122,102,.12);--attention-tint:rgba(242,184,75,.12);
 --accent-tint:rgba(94,224,176,.14);--scrim:rgba(0,0,0,.6);--disabled:#2E4A41;--disabled-ink:#7F8B96;
 --focus:#7FB8E6;--shadow:0 8px 24px rgba(0,0,0,.4);--band:#151C25;--neutral:#6E7A89}
@media(pointer:coarse){:root{--hit:44px}}

/* 2. base: the document scrolls; the sidebar is sticky (no fixed workspace) */
body{overflow:visible;background:var(--page);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus)}
h1,h2,h3{color:var(--ink)}
.muted{color:var(--muted)}
.skip-link{background:var(--raised);color:var(--ink);border-color:var(--focus);min-height:44px;display:inline-flex;align-items:center}
button:disabled{color:var(--muted);background:var(--sunken);border-color:var(--rule)}
input::placeholder,textarea::placeholder{color:var(--muted)}

/* 5. account menu (个人中心) under the avatar: who is signed in and how, appearance, versions, logout. Pages show no
   title any more; each keeps an h1 for screen readers, and the top bar names the page. */
button.avatar{padding:0;background:var(--raised);font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
button.avatar:hover{background:var(--sunken)}
.account-menu::part(menu){min-width:240px;padding:6px 0}
.account-head{display:grid;gap:2px;padding:8px 14px 6px;font-size:12px;line-height:1.5;color:var(--muted)}
.account-head strong{font-size:14px;font-weight:600;color:var(--ink)}
.menu-sep{height:1px;margin:6px 0;background:var(--rule)}
.menu-group{margin:0;padding:2px 14px 4px;font-family:var(--f-sans);font-size:12px;font-weight:600;color:var(--muted)}
.account-menu .release-info{padding:0 14px 4px;line-height:1.6}

/* 6. buttons: one solid primary per screen, outlined row actions */
.button{min-height:var(--hit);padding:0 12px;border-radius:4px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:13px;font-weight:500}
.button.subtle{background:transparent;border-color:var(--accent);color:var(--accent)}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.button:hover:not(:disabled){filter:none;background:var(--accent-tint)}
.button.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.1)}
.button:disabled,.button.subtle:disabled{background:transparent;border-color:var(--rule);color:var(--muted)}
.button.primary:disabled{background:var(--disabled);border-color:var(--disabled);color:var(--disabled-ink)}
.text-button{color:var(--accent);font-size:13px}
.icon-button{color:var(--muted);border-radius:4px}
.icon-button:hover:not(:disabled){background:var(--sunken);color:var(--ink)}
.icon-button:disabled{color:var(--neutral)}
.danger{color:var(--blocked)}

/* 7. stat strip and overview metrics: ruled columns, Songti figures */
.stats-grid,.overview-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;background:transparent;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;margin-bottom:20px}
.stats-grid article,.metric-card{display:block;padding:10px 16px 12px;border:0;border-left:1px solid var(--rule);border-radius:0;background:transparent}
.stats-grid article:first-child{border-left:0;padding-left:0}
.stats-grid article>span,.metric-label{display:block;font-size:12px;color:var(--muted)}
.stats-grid strong,.metric-value{display:block;margin:2px 0;font-family:var(--f-serif);font-size:22px;font-weight:400;line-height:1.2;font-variant-numeric:tabular-nums}
.stats-grid strong small{font-family:var(--f-sans);font-size:12px}
.stats-grid p,.metric-note{font-size:12px;color:var(--muted);white-space:normal}
.cost-unpriced{color:var(--attention)}
/* The overview has 9-10 cards that wrap: every card draws its own top and left rule, and the strip clips the outer ones,
   so the grid lines stay even whatever the count and the row break. */
.overview-cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));overflow:hidden}
.overview-cards .metric-card{margin:-1px 0 0 -1px;padding:10px 16px 12px;border:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.overview-cards .metric-value{font-size:20px}

/* 8. panels become ruled sections; toolbars carry a Songti section title */
.panel{background:transparent;border:0;border-radius:0}
.panel-toolbar{min-height:44px;padding:6px 0;gap:8px 12px;border-bottom:1px solid var(--rule)}
.panel-toolbar strong{font-family:var(--f-serif);font-size:16px;font-weight:700}
.panel-toolbar .muted{font-size:12px}
.panel-tabs b{background:var(--sunken);color:var(--ink);font-size:12px;border-radius:3px;padding:0 5px}
.table-tools{gap:6px}
.table-tools>select,.pager-size select{min-height:var(--hit);max-width:160px;padding:0 8px;border:1px solid var(--border-control);border-radius:4px;background:var(--raised);color:var(--ink);font-size:13px}
.search{height:var(--hit);padding:0 10px;border:1px solid var(--border-control);border-radius:4px;background:var(--raised);color:var(--muted)}
.search:focus-within{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.search>input:not([type=checkbox]){width:180px;font-size:13px;color:var(--ink)}
.panel-footer{padding:8px 0;font-size:12px;color:var(--muted);border-top:1px solid var(--rule)}
.footnote{font-size:12px;color:var(--muted);margin-top:12px}
.overview-grid{gap:0 32px;margin:24px 0 0}

/* 9. status: shape + colour + label, never colour alone (block square, attention diamond, in progress ring, healthy dot) */
.tag{background:var(--sunken);color:var(--ink);font-size:12px;font-weight:500;border-radius:3px;padding:0 5px}
.tag.ready{background:var(--accent-tint);color:var(--accent)}
.tag.warn{background:var(--attention-tint);color:var(--attention)}
.tag.error{background:var(--blocked-tint);color:var(--blocked)}
.state-mark,.state-mark.ready,.state-mark.warn,.state-mark.error{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;font-size:13px;font-weight:500;color:var(--muted)}
.state-mark::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--neutral)}
.state-mark.ready{color:var(--ink)}.state-mark.ready::before{background:var(--accent)}
.state-mark.error{color:var(--blocked)}.state-mark.error::before{border-radius:0;background:var(--blocked)}
.state-mark.warn{color:var(--attention)}.state-mark.warn::before{width:7px;height:7px;border-radius:0;background:var(--attention);transform:rotate(45deg)}
.state-mark[data-state=running]::before{width:7px;height:7px;border-radius:50%;background:none;border:2px solid var(--attention);transform:none}
.status-cards{gap:0}
.status-card{min-height:var(--hit);padding:0 10px;border:0;border-radius:0;background:var(--sunken);color:var(--ink);font-size:12px}
.status-card:first-child{border-radius:4px 0 0 4px}.status-card:last-child{border-radius:0 4px 4px 0}
.status-card.error{color:var(--blocked)}.status-card.warn{color:var(--attention)}
.status-card.active{background:var(--accent);color:var(--accent-on);box-shadow:none;font-weight:500}
.pool-dot{background:var(--neutral)}.pool-dot.ready{background:var(--accent)}.pool-dot.warn{background:var(--attention);border-radius:0;transform:rotate(45deg)}
.pool-dot.error{background:var(--blocked);border-radius:0}.pool-dot.muted,.pool-dot.off{background:var(--neutral)}
/* segmented windows (overview, share duration): style.css hard-codes their colours, so both themes are set here */
.segmented{border:0;border-radius:4px;background:var(--sunken);overflow:hidden}
.segment{border:0;background:transparent;color:var(--ink);font-size:12px;padding:0 10px;min-height:var(--hit)}
.segment[aria-pressed=true]{background:var(--accent);color:var(--accent-on);font-weight:500}
.segment:hover:not([aria-pressed=true]){background:var(--rule)}

/* 10. notices and the lead alert are Web Awesome callouts: the variant picks the tint (brand; warning, which means
   it needs you; danger), drawn as a 3px bar in its colour on the start edge with compact padding. A notice stays
   below the sticky top bar while the page scrolls; on narrow screens it is a toast at the bottom, clear of the
   sticky navigation. Then the bulk bar. */
wa-callout.notice,wa-callout.lead-alert{display:flex;align-items:center;padding:6px 12px;margin-bottom:12px;border:0;border-inline-start:3px solid var(--wa-color-on-quiet);border-radius:4px;background:var(--wa-color-fill-quiet);font-size:13px}
wa-callout.notice::part(message),wa-callout.lead-alert::part(message){display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
wa-callout.notice{color:var(--ink)}
wa-callout.notice[variant=danger],wa-callout.lead-alert{color:var(--wa-color-on-quiet)}
/* a notice floats over the content while it sticks (or as the toast), so its tint sits on the opaque page colour */
wa-callout.notice,wa-callout.notice.error{background:linear-gradient(var(--wa-color-fill-quiet),var(--wa-color-fill-quiet)),var(--page)}
.lead-alert .text-button{color:inherit}
@media(min-width:900px){wa-callout.notice{top:52px}}
.bulk-toolbar{border:1px solid var(--rule);border-radius:6px;background:var(--raised);box-shadow:var(--shadow);padding:6px 12px;gap:8px}
.combine-hint{padding:4px 0;font-size:12px;color:var(--attention)}

/* 12. API entries, members, jobs, invites, users, leads */
.pool-item{padding:12px 0;gap:12px;border-bottom:1px solid var(--rule)}
.pool-item strong,.pool-info>strong{font-family:var(--f-serif);font-size:16px}
.pool-info p,.pool-info code{font-size:12px;color:var(--muted)}
.pool-info code{font-family:var(--f-mono);color:var(--ink)}
.pool-icon{color:var(--accent);font-size:16px}
.pool-item.pool-focus{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent)}
.pool-member{border:1px solid var(--rule);background:var(--raised);color:var(--ink);font-size:12px}
.pool-member:hover{background:var(--sunken)}
.pool-usage{font-size:12px}
.pool-member-list{border-color:var(--rule)}
.pool-member-row+.pool-member-row{border-top-color:var(--rule)}
.job-list{padding:0}
.job-item{padding:10px 0;border-bottom:1px solid var(--rule);font-size:13px}
.job-item p,.job-item time{font-size:12px;color:var(--muted)}
.job-item .error-note{color:var(--blocked)}
.batch-group{border-bottom-color:var(--rule)}
.invite-form{padding:12px 0;gap:8px 12px}
.invite-form label{margin-top:0}
.quota-input{min-height:var(--hit);border-color:var(--border-control);background:var(--raised);font-size:13px}
.lead-card{border:1px solid var(--rule);border-radius:6px;background:var(--raised);padding:12px}
.lead-heading h2{font-family:var(--f-serif);font-size:15px}
.lead-heading p{font-size:12px}
.lead-list{padding:12px 0;gap:12px}
.lead-note{padding:6px 0;font-size:12px}

/* 13. overview charts and tables */
.overview-timeline{padding:12px 0}
.timeline-chart{height:120px}
.timeline-chart text{fill:var(--muted)}
.timeline-bar{fill:var(--accent)}.timeline-bar.is-failed{fill:var(--blocked)}
.overview-table,.data-table{font-size:13px}
.overview-table th,.data-table th{padding:6px 8px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;border-bottom:1px solid var(--rule)}
.overview-table td,.data-table td{padding:6px 8px;font-size:12px;border-bottom:1px solid var(--rule)}
.overview-table th:first-child,.overview-table td:first-child,.data-table th:first-child,.data-table td:first-child{padding-left:0}
.overview-warn td{background:var(--attention-tint);color:var(--attention)}
.overview-sort:hover,.overview-link{color:var(--accent)}
.overview-failures,.overview-coverage{padding:8px 0}
.overview-failure,.overview-coverage-line{padding:5px 0;font-size:12px;border-bottom:1px solid var(--rule)}
.overview-missing{color:var(--blocked);font-size:12px}
.overview-empty{padding:12px 0;font-size:12px}

/* 14. menus, pager, skeleton */
/* the row menu stays our own (reasons on disabled items, kept open across repaints) but matches the account menu */
.menu{padding:6px 0;border:1px solid var(--rule);border-radius:4px;background:var(--raised);box-shadow:var(--shadow);color:var(--ink);font-size:13px}
.menu [role=menuitem]{min-height:var(--hit);padding:0 12px;font-size:13px}
.menu [role=menuitem]:hover:not(:disabled),.menu [role=menuitem]:focus-visible{background:var(--sunken)}
.menu [role=menuitem]:disabled,.menu [role=menuitem][aria-disabled=true],.menu [role=menuitem][aria-disabled=true].danger{color:var(--muted)}
.menu [role=menuitem].danger,.menu [role=menuitem][data-danger]{color:var(--blocked)}
.menu [role=menuitem].danger:hover:not(:disabled){background:var(--blocked-tint)}
.menu hr,.menu-separator{background:var(--rule)}
.pager{padding:8px 0;font-size:12px;color:var(--muted);border-top:1px solid var(--rule)}
.pager-page{min-height:var(--hit);border-color:var(--border-control);background:var(--raised);color:var(--ink);font-size:12px}
.pager [aria-current=page]{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.pager [aria-disabled=true],.pager [aria-disabled=true]:hover{color:var(--muted);background:var(--sunken)}
.skeleton-row{background:linear-gradient(90deg,var(--sunken),var(--rule),var(--sunken));background-size:200% 100%}
@media(prefers-reduced-motion:reduce){.skeleton-row{background:var(--sunken)}}

/* 15. forms: labels above, raised fields */
label{font-size:12px;font-weight:600;color:var(--ink);margin-top:12px}
label>input:not([type=checkbox]),label>select,label>textarea{min-height:var(--hit);padding:0 10px;margin-top:4px;border:1px solid var(--border-control);border-radius:4px;background:var(--raised);color:var(--ink);font-size:13px;font-weight:400}
label>textarea{padding:8px 10px;font-family:var(--f-mono);font-size:12px;max-height:none}
.checkbox-label{font-size:13px;font-weight:400;gap:8px;min-height:var(--hit)}
input[type=checkbox]{width:16px;height:16px;min-width:16px;border:1.5px solid var(--border-control);border-radius:3px;background:var(--raised)}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{color:var(--accent-on);font-size:12px}
input[type=checkbox]:disabled{border-color:var(--rule);background:var(--sunken)}
.form-error{color:var(--blocked);font-size:12px}
.form-note{color:var(--muted);font-size:12px}
.fingerprint-box{border:0;border-radius:4px;background:var(--sunken);padding:10px 14px}
.fingerprint-box>p{font-size:12px}
.fingerprint-box code,.import-table code{font-family:var(--f-mono);font-size:12px;color:var(--ink)}
.copy-value{border:0;border-radius:4px;background:var(--sunken);color:var(--ink);font-family:var(--f-mono);font-size:12px;padding:8px 10px}
.confirmation-text{color:var(--ink);font-size:13px}
pre.confirmation-text:not(:empty){background:var(--sunken);border-radius:4px;padding:10px 14px;white-space:pre-wrap}
.checks{font-size:12px}
.check-name{color:var(--muted)}.check-value{color:var(--ink)}
.check-ok,.check-ok .check-icon{color:var(--accent)}
.check-fail,.check-fail .check-value,.check-fail .check-icon{color:var(--blocked)}
.split-option{border-color:var(--rule);background:var(--raised);font-size:12px}
.split-facts li{border-bottom-color:var(--rule)}
.split-blockers{color:var(--blocked)}
.split-warning{border:0;border-left:3px solid var(--attention);background:var(--attention-tint);color:var(--attention);font-size:12px}

/* 16. dialogs and the right-side detail drawer are wa-dialog / wa-drawer: our raised surface and shadow on the dialog
   part at the old widths; titles take the Songti rule in section 23, the scrim comes from --wa-color-overlay-modal */
wa-dialog{--width:560px;--spacing:24px}
wa-drawer{--size:520px;--spacing:24px}
wa-dialog::part(dialog),wa-drawer::part(dialog){background:var(--raised);color:var(--ink);box-shadow:var(--shadow)}
wa-drawer::part(header){border-bottom:1px solid var(--rule)}
/* style.css picks the user and auth row as the third div of the form, which counted the old heading; match the row
   by its content instead */
#serverForm>.field-row:has([name=auth]){grid-template-columns:1fr 1fr}
wa-dialog .muted{font-size:13px;line-height:1.55}
.eyebrow{display:block;margin-bottom:2px;font-family:var(--f-sans);font-size:12px;font-weight:400;letter-spacing:1px;color:var(--muted)}
.dialog-actions{gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--rule)}
#serverDialog{width:720px}
#importDialog{width:900px}
.import-table{font-size:12px}
.import-table th{color:var(--muted);font-weight:500}
.import-table td,.import-table th{padding:6px 8px;border-bottom-color:var(--rule)}
.drawer-section{padding:14px 0;border-bottom:1px solid var(--rule)}
.drawer-section>h3{font-family:var(--f-serif);font-size:15px;font-weight:700;margin-bottom:6px}
.drawer-section p{font-size:13px}
.timeline li{border-left-color:var(--rule);font-size:12px}
.step-failed{color:var(--blocked)}.step-running{color:var(--accent)}
.history-line{font-size:12px}

@media(max-width:899px){
 wa-dialog,wa-drawer{--spacing:16px}
 wa-drawer{--size:100%}
}
/* 17. login keeps its layout; it only takes the palette and the Songti heading */
.login-shell{background:var(--page)}
.login-card{background:var(--raised);border-color:var(--rule);border-radius:6px}
.login-card h1{font-family:var(--f-serif);color:var(--ink)}
/* style.css hard-codes the rest of the shell for a light page. Tokens keep the mark, the background network, focus,
   the primary hover and disabled states and the code countdown readable in both themes. */
.mark-c{stroke:var(--ink)}
.mark-dot{fill:var(--accent)}
.login-net .link{stroke:color-mix(in srgb,var(--accent) 30%,var(--page))}
.login-net .node rect{fill:var(--raised);stroke:var(--rule)}
.login-net .node path{stroke:var(--rule)}
.login-net .led{fill:var(--accent)}
.login-shell ::selection{background:var(--accent-tint);color:var(--ink)}
.login-shell :focus-visible{outline-color:var(--focus)}
.login-card input{caret-color:var(--accent)}
.login-card input:focus{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.login-card .button.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 86%,#000)}
.login-card .button.primary:disabled{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.login-card .code-row>.button.counting{color:var(--muted);background:linear-gradient(var(--accent-tint),var(--accent-tint)) no-repeat left/100% 100% var(--raised)}

/* 18. touch: inline links and chips keep their look but get a 44px hit area */
@media(pointer:coarse){
 .overview-link,.overview-sort,.pool-tag,.pool-member,.text-button.server-name,input[type=checkbox]{position:relative}
 .overview-link::before,.overview-sort::before,.pool-tag::before,.pool-member::before,.text-button.server-name::before,input[type=checkbox]::before{content:"";position:absolute;left:50%;top:50%;width:max(44px,100%);height:max(44px,100%);transform:translate(-50%,-50%)}
 .segment{min-width:44px}
}

/* 21. phones: lines people read are 14px; timestamps, footers, table headings, tags and hosts stay 12px helper text;
   form fields are 16px so iOS does not zoom the page when one is focused */
@media(max-width:767px){
 :root{font-size:14px}
 .panel-toolbar .muted,.lead-note,.footnote,.form-note,.form-error,.pool-info p,.pool-info code,.job-item,.overview-empty,
 .invite-spent summary,.overview-missing,.overview-coverage-line,.overview-failure,.overview-failure-label,
 .combine-hint,.check-value,.timeline li,.timeline strong,.overview-table td,.data-table td,.pool-member,.pool-member-name,
 .confirmation-text,wa-dialog .muted,.drawer-section p,.metric-label,.stats-grid article>span,.segment,.status-card,.text-button,.button,.state-mark,.notice,.lead-alert,.job-item p,.skip-link,.topbar-title,.checkbox-label{font-size:14px}
 wa-callout.notice,wa-callout.lead-alert{font-size:14px}
 label>input:not([type=checkbox]),label>select,label>textarea,.search>input:not([type=checkbox]),.table-tools>select,.pager-size select,.quota-input{font-size:16px}
}

/* 22. Web Awesome (vendor/webawesome): its theme tokens follow ours in both themes and at the compact scale. The
   library's own rules sit in cascade layers, so these unlayered declarations win without extra specificity; sizes left
   alone scale with the 13px root (14px on phones). */
:root{
 --wa-font-family-body:var(--f-sans);--wa-font-family-longform:var(--f-sans);--wa-font-family-heading:var(--f-serif);--wa-font-family-code:var(--f-mono);
 --wa-font-weight-action:500;--wa-form-control-label-font-weight:600;
 --wa-border-radius-s:3px;--wa-border-radius-m:4px;--wa-border-radius-l:6px;--wa-panel-border-radius:6px;
 --wa-form-control-height:var(--hit);--wa-form-control-padding-inline:10px;--wa-form-control-border-radius:4px;--wa-form-control-toggle-size:16px;
 --wa-form-control-background-color:var(--raised);--wa-form-control-border-color:var(--border-control);--wa-form-control-value-color:var(--ink);
 --wa-form-control-placeholder-color:var(--muted);--wa-form-control-label-color:var(--ink);--wa-form-control-hint-color:var(--muted);
 --wa-form-control-activated-color:var(--accent);
 --wa-color-surface-default:var(--page);--wa-color-surface-raised:var(--raised);--wa-color-surface-lowered:var(--sunken);--wa-color-surface-border:var(--rule);
 --wa-color-text-normal:var(--ink);--wa-color-text-quiet:var(--muted);--wa-color-text-link:var(--accent);
 --wa-color-focus:var(--focus);--wa-color-overlay-modal:var(--scrim);--wa-shadow-m:var(--shadow);--wa-shadow-l:var(--shadow);
 --wa-tooltip-background-color:var(--ink);--wa-tooltip-content-color:var(--page);--wa-tooltip-font-size:12px;
 --wa-color-brand-fill-loud:var(--accent);--wa-color-brand-on-loud:var(--accent-on);--wa-color-brand-border-loud:var(--accent);
 --wa-color-brand-fill-normal:var(--accent-tint);--wa-color-brand-on-normal:var(--accent);--wa-color-brand-border-normal:var(--accent);
 --wa-color-brand-fill-quiet:var(--accent-tint);--wa-color-brand-on-quiet:var(--accent);--wa-color-brand-border-quiet:var(--accent-tint);
 --wa-color-success-fill-loud:var(--accent);--wa-color-success-on-loud:var(--accent-on);--wa-color-success-border-loud:var(--accent);
 --wa-color-success-fill-normal:var(--accent-tint);--wa-color-success-on-normal:var(--accent);--wa-color-success-border-normal:var(--accent);
 --wa-color-success-fill-quiet:var(--accent-tint);--wa-color-success-on-quiet:var(--accent);--wa-color-success-border-quiet:var(--accent-tint);
 --wa-color-warning-fill-loud:var(--attention);--wa-color-warning-on-loud:var(--accent-on);--wa-color-warning-border-loud:var(--attention);
 --wa-color-warning-fill-normal:var(--attention-tint);--wa-color-warning-on-normal:var(--attention);--wa-color-warning-border-normal:var(--attention);
 --wa-color-warning-fill-quiet:var(--attention-tint);--wa-color-warning-on-quiet:var(--attention);--wa-color-warning-border-quiet:var(--attention-tint);
 --wa-color-danger-fill-loud:var(--blocked);--wa-color-danger-on-loud:var(--accent-on);--wa-color-danger-border-loud:var(--blocked);
 --wa-color-danger-fill-normal:var(--blocked-tint);--wa-color-danger-on-normal:var(--blocked);--wa-color-danger-border-normal:var(--blocked);
 --wa-color-danger-fill-quiet:var(--blocked-tint);--wa-color-danger-on-quiet:var(--blocked);--wa-color-danger-border-quiet:var(--blocked-tint);
 --wa-color-neutral-fill-loud:var(--ink);--wa-color-neutral-on-loud:var(--page);--wa-color-neutral-border-loud:var(--ink);
 --wa-color-neutral-fill-normal:var(--sunken);--wa-color-neutral-on-normal:var(--ink);--wa-color-neutral-border-normal:var(--border-control);
 --wa-color-neutral-fill-quiet:var(--sunken);--wa-color-neutral-on-quiet:var(--ink);--wa-color-neutral-border-quiet:var(--rule)}

/* 23. Web Awesome hosts: elements that keep the old .button classes (for hooks and tests) take no box styling of their
   own, so the component alone draws the button. Dialog and drawer titles use the Songti heading of the native dialogs. */
wa-button.button,wa-button.button.primary,wa-button.button.subtle,wa-button.button:hover:not(:disabled),
wa-button.button.primary:hover:not(:disabled),wa-button.button:disabled,wa-button.button.primary:disabled,
.row-actions wa-button.next-button.primary,.row-actions wa-button.next-button.primary:hover:not(:disabled){display:inline-block;min-height:0;padding:0;border:0;background:none;filter:none}
wa-dialog::part(title),wa-drawer::part(title){font-family:var(--f-serif);font-size:20px;font-weight:700}

/* 24. Web Awesome form controls: labels above the field as before (12px, semibold), the old 12px rhythm between fields,
   visually hidden labels where a toolbar shows none (the control keeps its name), widths for the toolbar, search, pager
   and inline number fields, no legacy box styles on hosts that kept their old classes, 16px text on phones (no iOS zoom). */
wa-input::part(form-control-label),wa-number-input::part(form-control-label),wa-textarea::part(form-control-label),
wa-select::part(form-control-label){font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px}
.label-hidden::part(form-control-label),.label-hidden::part(label){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
form wa-input,form wa-number-input,form wa-textarea,form wa-select,#fingerprintBox wa-checkbox{margin-top:12px}
.invite-form>wa-input,.invite-form>wa-number-input,.invite-form>wa-select{margin-top:0}
.invite-form>wa-number-input{width:96px}
#promoForm>wa-input[name=name]{width:160px}
#importInput>wa-textarea[name=lines]{grid-column:2;grid-row:2/5}
.table-tools>wa-select,.panel-toolbar>wa-select{display:inline-block;width:auto;min-width:120px;max-width:200px;margin:0}
wa-input.search-field{display:inline-block;width:220px;margin:0}
.pager-size>wa-select{display:inline-block;width:76px;margin:0 0 0 6px}
wa-number-input.quota-input{display:inline-block;width:80px;min-height:0;padding:0;border:0;background:none}
wa-input.share-url{display:block;margin:8px 0;padding:0;border:0;background:none}
/* WA's :host of wa-checkbox is a column flex, so align-items:center centred the box horizontally and left only a 16px
   strip of its label clickable. A row whose label part fills it keeps the whole row clickable, as the native label was. */
wa-checkbox.checkbox-label{display:flex;flex-direction:row;align-items:stretch;min-height:var(--hit)}
wa-checkbox.checkbox-label::part(base){flex:1 1 auto;align-items:center}
/* style.css paints .install-progress with the old native bar's fill; on the wa-progress-bar host it showed past the
   pill ends in dark. */
wa-progress-bar.install-progress{background:none}
.pool-member-row>wa-checkbox{flex:1;min-width:0}
@media(max-width:899px){wa-input.search-field{flex:1 1 100%;order:-1;width:auto}}
@media(max-width:767px){wa-input::part(input),wa-number-input::part(input),wa-textarea::part(textarea),wa-select::part(display-input){font-size:16px}}
/* Touch: the label part is what toggles a wa-checkbox, so it grows to a 44px target around the 16px box without moving
   the layout, as the native checkboxes did with an overlay. */
@media(pointer:coarse){wa-checkbox::part(base){padding:14px;margin:-14px}}
/* The Docker node guide (docker.html), opened from both consoles: one readable column, commands kept on their lines. */
.doc-main{max-width:820px;margin:0 auto;padding:24px 16px 48px;font-size:14px;line-height:1.7}
.doc-main h1{margin:0 0 12px;font-family:var(--f-serif);font-size:22px}
.doc-main h2{margin:28px 0 8px;font-size:16px}
.doc-main pre{margin:8px 0;padding:10px 12px;overflow-x:auto;border:1px solid var(--rule);border-radius:4px;background:var(--sunken);color:var(--ink);font-family:var(--f-mono);font-size:12px;line-height:1.6;white-space:pre}
.doc-main code{font-family:var(--f-mono);font-size:.92em}
.doc-main pre code{font-size:inherit}
.doc-main .doc-note{padding:10px 12px;border-left:3px solid var(--accent);background:var(--raised)}
/* Links inside notes and guides: the accent colour and an underline, so they read as clickable in both themes. */
a.text-link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;font-weight:500}
a.text-link:hover{text-decoration-thickness:2px}