[hidden]{display:none !important}
/* The board's fonts (F-053), embedded in the firmware and named by their
   role (tools/web_fonts.py): Space Grotesk for headings and numbers, IBM
   Plex Sans for text, IBM Plex Mono for labels. */
@font-face{font-family:"McpVue Display";src:url(/fonts/display-700.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"McpVue Sans";src:url(/fonts/sans-400.woff2) format("woff2");font-weight:300 450;font-display:swap}
@font-face{font-family:"McpVue Sans";src:url(/fonts/sans-600.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"McpVue Mono";src:url(/fonts/mono-500.woff2) format("woff2");font-weight:300 800;font-display:swap}
/* The board's colors (face_tokens.h), dark as on the board; light when the
   system asks for it (F-053). The bar at the top stays dark in both. */
:root{color-scheme:dark;
  --bg:#0B0E13;--bg-top:#121620;--card:#13171F;--raised:#1C1F25;--raised-hi:#272B32;--field:#0F1217;--inset:#0E1116;
  --border:#2C3037;--line:#22262D;--ink:#EEF1F5;--soft:#C9D0D9;--muted:#9AA4B2;--faint:#78818E;
  --amber:#FFB547;--amber-hi:#FFC66F;--on-amber:#13151A;--amber-text:#FFB547;
  --blue:#6CC4FF;--red:#FF6B5E;--green:#7FE0B0;--purple:#B79CFF;--orange:#FF9F5A;--on-tone:#13151A;
  --tint-blue:#223140;--tint-amber:#3B301F;--tint-grey:#2C3038;--tint-green:#1E3A31;--tint-purple:#302A45;--tint-red:#402222;--tint-orange:#3D2B1F;
  --focus:#FFB547;--shadow:none;--r:8px;--r-s:5px;
  --sans:"McpVue Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"McpVue Display",var(--sans);
  --mono:"McpVue Mono",ui-monospace,Menlo,Consolas,monospace;
  font:15px/1.5 var(--sans);color:var(--ink);background:var(--bg)}
/* Light: by the system's setting (Auto), or chosen on the Settings page for
   this browser (data-theme on <html>, kept in localStorage). */
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light;
  --bg:#F1F3F6;--bg-top:#F8F9FB;--card:#FFFFFF;--raised:#F2F4F7;--raised-hi:#E6E9EE;--field:#FFFFFF;--inset:#F5F6F8;
  --border:#D5D9E0;--line:#E3E6EB;--ink:#14171C;--soft:#363C46;--muted:#5D6572;--faint:#858C98;
  --amber-text:#975700;--blue:#1F6FCC;--red:#D0392D;--green:#11845A;--purple:#6C4BC6;--orange:#BC5813;--on-tone:#FFFFFF;
  --tint-blue:#E3EFFC;--tint-amber:#FFF0D9;--tint-grey:#EDEFF2;--tint-green:#DFF3E9;--tint-purple:#EEE9FB;--tint-red:#FCE7E5;--tint-orange:#FDEBDC;
  --focus:#D98A0B}}
:root[data-theme=light]{color-scheme:light;
  --bg:#F1F3F6;--bg-top:#F8F9FB;--card:#FFFFFF;--raised:#F2F4F7;--raised-hi:#E6E9EE;--field:#FFFFFF;--inset:#F5F6F8;
  --border:#D5D9E0;--line:#E3E6EB;--ink:#14171C;--soft:#363C46;--muted:#5D6572;--faint:#858C98;
  --amber-text:#975700;--blue:#1F6FCC;--red:#D0392D;--green:#11845A;--purple:#6C4BC6;--orange:#BC5813;--on-tone:#FFFFFF;
  --tint-blue:#E3EFFC;--tint-amber:#FFF0D9;--tint-grey:#EDEFF2;--tint-green:#DFF3E9;--tint-purple:#EEE9FB;--tint-red:#FCE7E5;--tint-orange:#FDEBDC;
  --focus:#D98A0B}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--amber);color:var(--on-amber)}

/* The bar: the logo and the navigation (F-050), each page with its icon. */
.bar{position:sticky;top:10px;z-index:5;width:min(1000px,calc(100% - 24px));margin:10px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 5px 5px 12px;min-height:54px;background:#12161E;color:#EEF1F5;border:1px solid #262A31;border-radius:var(--r)}
.mark{display:inline-block;font:700 22px/32px var(--display);letter-spacing:-.02em;text-decoration:none;color:#EEF1F5;white-space:nowrap}
.mark::before{content:"";display:inline-block;vertical-align:top;width:32px;height:32px;margin-right:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 6 50 50'%3E%3Cpath d='M24 21 18.5 12.5M40 21l5.5-8.5' stroke='%23FFB547' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='12' r='3.6' fill='%23FFB547'/%3E%3Ccircle cx='46' cy='12' r='4' fill='%23FFB547'/%3E%3Crect x='9' y='20' width='46' height='33' rx='10' fill='%23FFB547'/%3E%3Crect x='14' y='25' width='29' height='23' rx='6.5' fill='%230D1117'/%3E%3Cpath d='M28.5 29.5Q28.5 36.5 35.5 36.5 28.5 36.5 28.5 43.5 28.5 36.5 21.5 36.5 28.5 36.5 28.5 29.5Z' fill='%236CC4FF'/%3E%3Ccircle cx='49' cy='30.5' r='2.7' fill='%230D1117'/%3E%3Ccircle cx='49' cy='41' r='2.7' fill='%230D1117'/%3E%3C/svg%3E") center/contain no-repeat}
.mark .v{color:#FFB547}.mark .u,.mark .e{color:#6CC4FF}
.bar nav{display:flex;gap:2px}
.bar nav a{display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--r-s);color:#C9D0D9;text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.bar nav a::before{content:"";flex:none;width:17px;height:17px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.bar nav a:hover{color:#fff;background:#1C1F25}
.bar nav a[aria-current=page]{background:#FFB547;color:#13151A;font-weight:600}
/* Sign out as an icon while the names share one row. */
@media (min-width:981px){.bar nav a.signout{gap:0;font-size:0;padding:10px}
/* While the counts are folded into the bar, the pages are icons alone. */
.bar.compact nav a{gap:0;font-size:0;padding:10px}}
.bar nav a[href="/"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5l2 2 3.5-4M3.5 15.5l2 2 3.5-4M12 7.5h8.5M12 16.5h8.5'/%3E%3C/svg%3E")}
.bar nav a[href="/messages"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E")}
.bar nav a[href="/notes"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM15 3v4h4M9 12h7M9 16h7'/%3E%3C/svg%3E")}
.bar nav a[href="/calendar"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.bar nav a[href="/archive"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v11h14V9M10 13h4'/%3E%3C/svg%3E")}
.bar nav a[href="/screen"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E")}
.bar nav a[href="/settings"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E")}
.bar nav a.signout{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E")}

/* Page layout and type. */
main{width:min(1000px,calc(100% - 32px));margin:30px auto 64px}
h1{font:700 clamp(26px,4vw,32px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:18px;font-weight:600;letter-spacing:-.005em;line-height:1.3;margin:0 0 4px}
h3{font-size:16px;font-weight:600;margin:0 0 6px}
b,strong{font-weight:600}
.lead{color:var(--muted);font-size:15px;margin:0 0 22px;line-height:1.55;max-width:62em}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-bottom:18px}
.head>div:first-child{flex:1 1 420px;min-width:0}
.head .lead{margin:0}
.head .row{flex:none}
/* A small label in capitals, as on the board (WI-FI, CATEGORIES). */
.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.mono{font-family:var(--mono)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:12px}
/* A list: rows with a line between, in one box, instead of a card each. */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.list>*{margin:0;border:0;border-radius:0;background:none}
.list>*+*{border-top:1px solid var(--line)}
/* Separate cards with a small gap (Messages, Tasks, Notes, Archive). */
.list.gapped{display:grid;gap:8px;background:none;border:0;border-radius:0;overflow:visible}
.list.gapped>*{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.spread{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.hint{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.count{font-size:12px;color:var(--muted);text-align:right;margin-top:4px;font-family:var(--mono)}
.empty{text-align:center;color:var(--muted);padding:44px 10px}
.error{color:var(--red);font-size:14px;margin:10px 0 12px;min-height:1em}
.ok{color:var(--green);font-size:14px;margin:10px 0 12px}

/* Buttons: amber for the main action, quiet ones, and red outlines for deleting. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border:1px solid var(--amber);border-radius:var(--r-s);background:var(--amber);color:var(--on-amber);font-weight:600;line-height:1.25;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--amber-hi);border-color:var(--amber-hi)}
.btn:disabled{opacity:.45;cursor:default}
.btn.line{background:var(--raised);color:var(--ink);border-color:var(--border)}
.btn.line:hover:not(:disabled){background:var(--raised-hi)}
.btn.danger{background:transparent;color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,transparent)}
.btn.danger:hover:not(:disabled){background:var(--tint-red);border-color:var(--red)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:var(--on-tone)}
.btn.blue:hover:not(:disabled){filter:brightness(1.08)}
.btn.small{padding:5px 11px;font-size:13.5px}

/* Fields. */
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=time],input[type=date],select,textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--field);color:var(--ink)}
select{appearance:none;padding-right:34px;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA4B2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat;cursor:pointer}
textarea{min-height:120px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
input:disabled,select:disabled{opacity:.5}
input[type=checkbox],input[type=radio]{accent-color:var(--amber)}
.choice{display:flex;gap:10px;align-items:flex-start;margin:10px 0;color:var(--ink);font-size:15px;cursor:pointer}
.choice input{margin-top:4px}
.choice small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* Segmented choice: buttons (aria-pressed) or radio labels in a well; the
   chosen one amber, or raised in a quiet filter. */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;background:var(--field);border:1px solid var(--border);border-radius:var(--r);max-width:100%}
.seg>button,.seg>label{position:relative;display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 12px;border:0;border-radius:var(--r-s);background:none;color:var(--soft);font-size:14px;font-weight:500;line-height:1.35;cursor:pointer;white-space:nowrap}
.seg>button:hover,.seg>label:hover{color:var(--ink);background:var(--raised)}
.seg [aria-pressed=true],.seg [aria-checked=true],.seg>label:has(input:checked){background:var(--amber);color:var(--on-amber);font-weight:600}
.seg.quiet [aria-pressed=true]{background:var(--raised-hi);color:var(--ink)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg>label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.seg .n{font:500 11.5px var(--mono);color:var(--muted)}
.seg [aria-pressed=true] .n{color:inherit;opacity:.75}
.seg svg{width:17px;height:17px}

/* A switch, green when on, as on the board. */
input.switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:13px;background:var(--raised-hi);border:1px solid var(--border);cursor:pointer;transition:background .2s,border-color .2s}
input.switch::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
input.switch:checked{background:var(--green);border-color:var(--green)}
input.switch:checked::before{transform:translateX(18px)}
input.switch:disabled{opacity:.45;cursor:default}

/* A slider filled up to its value (common.js sets --fill), amber or blue. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:none;cursor:pointer;--fill:50%;--tone:var(--amber)}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--tone) var(--fill),var(--raised-hi) var(--fill))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--raised-hi)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--tone)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid var(--tone);box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--tone);box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type=range]:disabled{opacity:.45;cursor:default}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
input[type=range].blue{--tone:var(--blue)}

/* Tones: the board's accents with their tints, for icons, tags and edges. */
.tone-blue{--tone:var(--blue);--tint:var(--tint-blue)}.tone-amber{--tone:var(--amber-text);--tint:var(--tint-amber)}
.tone-green{--tone:var(--green);--tint:var(--tint-green)}.tone-red{--tone:var(--red);--tint:var(--tint-red)}
.tone-purple{--tone:var(--purple);--tint:var(--tint-purple)}.tone-orange{--tone:var(--orange);--tint:var(--tint-orange)}
.tone-grey{--tone:var(--muted);--tint:var(--tint-grey)}
/* An icon in a tinted square (senders, kinds, categories). */
.avatar{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-s);background:var(--tint,var(--tint-grey));color:var(--tone,var(--muted))}
.avatar.ring{box-shadow:inset 0 0 0 1.5px var(--tone)}
.avatar svg{width:21px;height:21px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:4px;background:var(--raised);border:1px solid var(--border);font-size:12.5px;line-height:1.5;color:var(--soft);white-space:nowrap}
.pill.id{font-family:var(--mono);font-size:12px}
.pill.tag{background:var(--tint);border-color:color-mix(in srgb,var(--tone) 45%,transparent);color:var(--tone)}
.pill.solid{background:var(--tone);border-color:var(--tone);color:var(--on-tone);font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}
.meta .hint{margin:0}
.check{flex:none;color:var(--blue);vertical-align:-3px}
/* The board's color markup in text: {white} {blue} {green} {red}, and the
   notes' {green} {amber} {red}. */
.c-white{color:var(--ink)}.c-blue{color:var(--blue)}.c-green,.t-green{color:var(--green)}.c-red,.t-red{color:var(--red)}.t-amber{color:var(--amber-text)}
.text{white-space:pre-wrap;word-break:break-word;line-height:1.6;color:var(--soft)}
.text a{color:var(--blue)}
.text.large{font-size:20px;line-height:1.45}
/* Message text in a well with a colored edge, in the board's mono font. */
.inset{margin:12px 0 0;padding:10px 14px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-s);font:14px/1.75 var(--mono)}
.inset.large{font-size:18px;line-height:1.6}

.note{padding:12px 14px;border-left:3px solid var(--blue);background:var(--tint-blue);border-radius:0 var(--r-s) var(--r-s) 0;font-size:14px;line-height:1.5;margin:14px 0;color:var(--soft)}
.note.warn{border-color:var(--amber-text);background:var(--tint-amber)}
.welcome{border-left:3px solid var(--amber)}
.welcome p{margin:6px 0 12px;line-height:1.55;color:var(--soft)}
.welcome a{color:var(--amber-text)}
.card.flash{cursor:pointer;border-left:3px solid var(--amber)}

/* A card of settings in rows: the name and a line about it on the left, the
   control on the right; Save at the bottom. */
.card.rows{padding:0;overflow:hidden}
.rows>header{padding:16px 20px 14px}
.rows>header .hint{margin-top:2px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin:0;padding:12px 20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
label.setting{cursor:pointer}
.setting .what{flex:1 1 260px;min-width:0;margin:0;font-size:15px;color:var(--ink)}
.setting .what>b{display:block;font-weight:600}
.setting .what>small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.45}
.setting>select{flex:0 1 280px;width:280px}
.setting>input[type=text],.setting>input[type=password],.setting>input[type=time],.setting>input[type=number]{flex:0 1 280px;width:280px}
.setting .slider{flex:0 1 460px;display:flex;align-items:center;gap:16px}
.setting .slider output{min-width:46px;text-align:right;font:600 14px var(--mono)}
.rows>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 14px;padding:12px 20px;border-top:1px solid var(--line)}
.rows>footer .error,.rows>footer .ok{margin:0 auto 0 0}
.rows>.body{padding:14px 20px;border-top:1px solid var(--line)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 28px;font-size:14px;margin:0;align-items:center}
.facts dt{color:var(--muted)}.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.facts .mono{font-size:13.5px}

@media (max-width:640px){
  .grid2{grid-template-columns:1fr}
  main{margin-top:26px}
  .setting{flex-wrap:wrap;padding:14px 16px}
  .setting:has(>input.switch){flex-wrap:nowrap}
  .setting>select,.setting>input[type=text],.setting>input[type=password],.setting>input[type=time],.setting>input[type=number],.setting .slider{flex:1 1 100%;width:100%}
  .rows>header,.rows>footer,.rows>.body{padding-left:16px;padding-right:16px}
  .card{padding:14px 16px}
}
/* Narrower than one row of names (F-050): the logo above, the pages below as
   tabs with the icon over the name, all on screen; four a row on phones.
   The taller bar no longer stays at the top while scrolling. */
@media (max-width:980px){
  .bar{position:static;flex-wrap:wrap;gap:6px;padding:8px}
  .mark{padding:4px 6px}
  .bar nav{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:4px}
  .bar nav a{flex-direction:column;justify-content:center;gap:5px;padding:9px 2px 8px;font-size:12px;text-align:center}
  .bar nav a::before{width:20px;height:20px}
}
@media (max-width:560px){.bar nav{grid-template-columns:repeat(4,minmax(0,1fr))}.mark{font-size:20px}}

/* Status under the bar (F-020, F-054): the lists as tiles that open their
   pages, the board's health as chips that open their details. */
.status{width:min(1000px,calc(100% - 24px));margin:10px auto 0;display:grid;gap:6px;transition:opacity .3s}
.status.stale{opacity:.6}
.status .lists{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.status .health{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.status .tile{position:relative;display:flex;align-items:center;gap:12px;min-width:0;margin:0;padding:11px 14px 17px;border:0;border-left:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.status .lists .tile:first-child{border-left:0}
.status .health .tile{flex:1 1 0;padding:7px 12px;gap:9px;min-width:0}
.status .health .tile:first-child,.status .health:has(.tile:first-child[hidden]) .tile:nth-child(2){border-left:0}
.status .tile:hover{background:var(--raised)}
.status .tile[aria-current=page]{box-shadow:inset 0 2px 0 var(--amber)}
.status .tile[aria-expanded=true]{background:var(--raised)}
.status .icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s);background:var(--tint-grey);color:var(--muted)}
.status .health .icon{width:28px;height:28px;background:none}
.status .icon svg{width:18px;height:18px}.status .battery .icon svg{width:26px}
.status .text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.status .label{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.status .value{font:700 19px/1.2 var(--display);margin:2px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.status .health .value{font-size:14px;font-family:var(--sans);font-weight:600;margin:0}
.status .sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status .health .sub{font-size:11.5px}
/* Needs doing: the sub line in red with a dot before it. */
.status .alert .sub{color:var(--red)}
.status .lists .alert .sub::before{content:"";display:inline-block;width:6px;height:6px;margin:0 5px 1px 0;border-radius:50%;background:var(--red)}
.status .health .alert .icon{color:var(--red)}
.status .pulse .icon{animation:pulse .9s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.status .meter{position:absolute;left:14px;right:14px;bottom:8px;height:3px;border-radius:2px;background:var(--raised-hi);overflow:hidden}
.status .meter i{display:block;height:100%;width:0;border-radius:2px;background:var(--blue);transition:width .6s}
.status .level{fill:var(--green);transition:width .6s}
.status .bolt{fill:#fff;stroke:#13151A;stroke-width:.8;stroke-linejoin:round;display:none}
.status [data-level=mid] .level{fill:var(--amber)}.status [data-level=low] .level{fill:var(--red)}
.status [data-level=usb] .level{fill:var(--blue)}.status [data-level=usb] .bolt{display:block}
.status [data-level=usb] .icon,.status [data-level=high] .icon{color:var(--ink)}
.status .wifi rect{fill:var(--border);transition:fill .4s}
.status [data-bars="1"] .b1,.status [data-bars="2"] :is(.b1,.b2),.status [data-bars="3"] :is(.b1,.b2,.b3),.status [data-bars="4"] rect{fill:var(--green)}
.status [data-bars="1"] .b1{fill:var(--red)}.status [data-bars="2"] :is(.b1,.b2){fill:var(--amber)}
/* Messages red, Tasks blue, as the board shows them (F-038). */
.status .tasks .icon{color:var(--blue);background:var(--tint-blue)}
.status .messages .icon{color:var(--red);background:var(--tint-red)}.status .messages .meter i{background:var(--red)}
.status .notes .icon{color:var(--purple);background:var(--tint-purple)}.status .notes .meter i{background:var(--purple)}
.status .archive .meter i{background:var(--muted)}
.status .space .icon{color:var(--green)}
.status .full .meter i{background:var(--red)}
.status .near .meter i{background:var(--amber)}
.status .full .sub,.status .near .sub{color:var(--amber-text)}.status .full .sub{color:var(--red)}
.status .uptime .icon svg path{transform-origin:8px 8px;animation:hand 60s linear infinite}
@keyframes hand{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.status .uptime .icon svg path{animation:none}.status .pulse .icon{animation:none}}
/* A chip's details under the strip: name and value rows. */
.status-detail{width:min(1000px,calc(100% - 24px));margin:6px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 24px;padding:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:13.5px}
.status-detail>div{display:flex;gap:10px;align-items:baseline;min-width:0;padding:4px 0}
.status-detail .k{flex:none;width:9em;color:var(--muted)}
.status-detail .v{min-width:0;overflow-wrap:anywhere}
.status-detail .v .btn{margin-left:6px;vertical-align:1px}
/* The Remote chip's details (F-056): a state line with a health dot, the
   addresses in full rows with Copy, then the figures as small blocks. */
.status-detail.remote{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 18px;padding:10px 14px 12px}
.status-detail.remote>div{flex-direction:column;align-items:stretch;gap:1px;padding:5px 0}
.status-detail.remote .k{width:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.status-detail.remote .v{font-weight:600;font-size:14.5px}
.status-detail.remote>div.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:6px 0 8px}
.status-detail.remote>div.wide .k{width:9.5em;flex:none}
.status-detail.remote>div.wide .v{font-weight:500;font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status-detail.remote>div.wide .v .btn{margin:0}
.status-detail.remote .health{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px;background:var(--muted)}
.status-detail.remote .health.ok{background:var(--green)}
.status-detail.remote .health.busy{background:var(--amber)}
.status-detail.remote .health.bad{background:var(--red)}
/* Folded into the bar when scrolled past (wide screens): icon and number. */
.bar .folded{display:flex;gap:4px;margin-left:auto;order:1}
.bar .folded .fold{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:var(--r-s);color:#C9D0D9;font:600 12.5px var(--display);text-decoration:none;white-space:nowrap}
.bar .folded a.fold:hover{background:#1C1F25;color:#fff}
.bar .folded .fold.alert{color:#FF6B5E}
.bar .folded .icon{display:inline-flex}
.bar .folded .icon svg{width:15px;height:15px}.bar .folded .battery .icon svg{width:22px}
.bar .folded .tasks{color:#6CC4FF}.bar .folded .messages{color:#FF6B5E}.bar .folded .notes{color:#B79CFF}
.bar .folded .wifi rect{fill:#2C3037}.bar .folded .level{fill:#7FE0B0}.bar .folded .bolt{display:none}
.bar nav{order:0}
@media (max-width:980px){.bar .folded{display:none}}
/* Phones: one strip to scroll sideways, each tile a chip. */
@media (max-width:640px){
  .status{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .status::-webkit-scrollbar{display:none}
  .status .lists,.status .health{display:contents}
  .status .health .tile{flex:none}
  .status .tile{flex:none;scroll-snap-align:start;gap:8px;padding:7px 11px 7px 8px !important;border:1px solid var(--line) !important;border-radius:var(--r);background:var(--card)}
  .status .tile[aria-current=page]{box-shadow:none;border-color:var(--amber) !important}
  .status .lists .icon{width:28px;height:28px}
  .status .icon svg{width:16px;height:16px}
  .status .value{font-size:15px;margin:0}
  .status .health .value{font-size:13px}
  .status .sub{font-size:11.5px}
  .status .meter{display:none}
  .status-detail{padding:6px 12px;grid-template-columns:1fr}
  .status-detail .k{width:7em}
}