/* GlirOS design tokens (phase D1).
   One source of truth for colour, glass, type, spacing and motion, shared by
   the desktop app, LAN browsers and (later) the gliros.com web app. Dark is
   the default; light follows the system, or data-theme on <html> forces one.
   The values come from the gliros-web layout pass. See docs/DESIGN.md. */

:root {
  /* colour */
  --bg: #0e1719;               /* page base; also the window frame colour */
  --surface: rgba(18, 28, 30, 0.86);       /* cards, menus, assistant messages */
  --surface-solid: #142023;
  --glass: rgba(16, 26, 28, 0.55);         /* frosted panels (sidebar, output) */
  --glass-strong: rgba(14, 23, 25, 0.76);  /* composer, overlays on narrow screens */
  --glass-border: rgba(210, 235, 225, 0.10);
  --inset: rgba(8, 15, 17, 0.55);          /* inputs, code blocks */
  --border: rgba(190, 225, 210, 0.12);
  --text: #e3ece7;
  --text-dim: #9db2a9;
  --text-faint: #7a8f86;
  /* 0.1.81zzz31: the design chat's chart colours (claude/gliros-portal-b25-reply.md §2.4), shared with office */
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-6: #6b7a73;
  --accent: #8cc4a3;
  --accent-hover: #a1d3b5;
  --accent-soft: rgba(140, 196, 163, 0.16);
  --on-accent: #0c1a14;
  --on-danger: #2a0e0e;        /* 0.1.49: text on a danger fill, 6.7:1 (white was 2.7:1) */
  --user-bg: rgba(94, 150, 120, 0.30);
  --user-border: rgba(140, 196, 163, 0.35);
  --good: #6fd3a0;
  --warn: #e2b35e;
  --danger: #ef7b7b;
  --danger-soft: rgba(239, 123, 123, 0.14);
  --tint: linear-gradient(180deg, rgba(5, 10, 12, 0.40) 0%, rgba(5, 10, 12, 0.62) 100%);
  --tint-top: rgba(5, 10, 12, 0.40);       /* what the window frame colour is mixed with */
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.14);
  --focus: 0 0 0 2px rgba(140, 196, 163, 0.55);
  /* code: see-through dark panels and colours that sit with the green accent */
  --code-bg: rgba(4, 10, 12, 0.42);
  --hl-keyword: #7fcfa4;
  --hl-string: #e2c28a;
  --hl-number: #e6a57a;
  --hl-comment: #6f857c;
  --hl-title: #9fd0e6;
  --hl-attr: #b7c6f0;
  --hl-builtin: #c7b4ef;
  --hl-meta: #d7a8c8;
  --hl-deleted: rgba(239, 123, 123, 0.16);
  --hl-added: rgba(111, 211, 160, 0.14);

  /* glass */
  --blur: 18px;
  --bg-blur: 22px;

  /* type */
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --text-2xs: 0.68rem;          /* DESIGN-1 B: badges, tags and the timeline's dense labels */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 0.94rem;
  --text-lg: 1.15rem;
  --text-xl: 1.6rem;
  --line: 1.6;

  /* space and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* layout */
  --sidebar-w: 272px;
  --rail-w: 64px;
  --output-w: 460px;
  --chat-max-w: 820px;
  --topbar-h: 56px;

  /* motion */
  --fast: 0.15s ease;
  --medium: 0.22s ease;
  --bg-fade: 2.8s ease;
  --pulse: 1.2s;         /* 0.1.81zzz37: the sidebar's "writing" mark */

  color-scheme: dark;
}

/* Light: same names, light values. Kept in two blocks (system setting, or
   forced with data-theme="light") because CSS can't share one block. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef3ef;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-solid: #ffffff;
    --glass: rgba(248, 251, 249, 0.58);
    --glass-strong: rgba(250, 252, 251, 0.80);
    --glass-border: rgba(255, 255, 255, 0.65);
    --inset: rgba(240, 245, 242, 0.75);
    --border: rgba(40, 70, 58, 0.14);
    --text: #1c2a25;
    --text-dim: #56675f;
    --text-faint: #627069;
    /* the chart colours, light */
    --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #9aa5a0;
    --accent: #3f6f56;
    --accent-hover: #335d48;
    --accent-soft: rgba(63, 111, 86, 0.13);
    --on-accent: #ffffff;
    --on-danger: #ffffff;
    --user-bg: rgba(63, 111, 86, 0.16);
    --user-border: rgba(63, 111, 86, 0.28);
    --good: #287a52;      /* 0.1.49: small text 4.7:1 on bg (was 3.8) */
    --warn: #8a5f12;      /* 0.1.49: 5.0:1 (was 3.3) */
    --danger: #b23c3c;    /* 0.1.49: 5.2:1 (was 4.4) */
    --danger-soft: rgba(178, 60, 60, 0.10);
    --tint: linear-gradient(180deg, rgba(240, 245, 242, 0.50) 0%, rgba(232, 239, 235, 0.68) 100%);
    --tint-top: rgba(240, 245, 242, 0.50);
    --shadow: 0 10px 34px rgba(30, 50, 40, 0.14);
    --shadow-soft: 0 4px 16px rgba(30, 50, 40, 0.08);
    --focus: 0 0 0 2px rgba(63, 111, 86, 0.45);
    --code-bg: rgba(255, 255, 255, 0.55);
    --hl-keyword: #2f7a54;
    --hl-string: #9a6212;
    --hl-number: #b0521f;
    --hl-comment: #627069;  /* 0.1.49: 5.0:1 on code-bg (was 3.3) */
    --hl-title: #1f6f8b;
    --hl-attr: #4a5bb0;
    --hl-builtin: #7a4fb3;
    --hl-meta: #a0457a;
    --hl-deleted: rgba(192, 72, 72, 0.12);
    --hl-added: rgba(47, 138, 94, 0.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #eef3ef;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --glass: rgba(248, 251, 249, 0.58);
  --glass-strong: rgba(250, 252, 251, 0.80);
  --glass-border: rgba(255, 255, 255, 0.65);
  --inset: rgba(240, 245, 242, 0.75);
  --border: rgba(40, 70, 58, 0.14);
  --text: #1c2a25;
  --text-dim: #56675f;
  --text-faint: #627069;
  /* the chart colours, light */
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #9aa5a0;
  --accent: #3f6f56;
  --accent-hover: #335d48;
  --accent-soft: rgba(63, 111, 86, 0.13);
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --user-bg: rgba(63, 111, 86, 0.16);
  --user-border: rgba(63, 111, 86, 0.28);
  --good: #287a52;      /* 0.1.49: small text 4.7:1 on bg (was 3.8) */
  --warn: #8a5f12;      /* 0.1.49: 5.0:1 (was 3.3) */
  --danger: #b23c3c;    /* 0.1.49: 5.2:1 (was 4.4) */
  --danger-soft: rgba(178, 60, 60, 0.10);
  --tint: linear-gradient(180deg, rgba(240, 245, 242, 0.50) 0%, rgba(232, 239, 235, 0.68) 100%);
  --tint-top: rgba(240, 245, 242, 0.50);
  --shadow: 0 10px 34px rgba(30, 50, 40, 0.14);
  --shadow-soft: 0 4px 16px rgba(30, 50, 40, 0.08);
  --focus: 0 0 0 2px rgba(63, 111, 86, 0.45);
  --code-bg: rgba(255, 255, 255, 0.55);
  --hl-keyword: #2f7a54;
  --hl-string: #9a6212;
  --hl-number: #b0521f;
  --hl-comment: #627069;  /* 0.1.49: 5.0:1 on code-bg (was 3.3) */
  --hl-title: #1f6f8b;
  --hl-attr: #4a5bb0;
  --hl-builtin: #7a4fb3;
  --hl-meta: #a0457a;
  --hl-deleted: rgba(192, 72, 72, 0.12);
  --hl-added: rgba(47, 138, 94, 0.12);
  color-scheme: light;
}
/* GlirOS portal pages, in the app's own look (gliros-web/app/css/app.css, gliros-desktop/docs/DESIGN.md).
   tools/build.php puts tokens.css (the app's tokens, copied as they are) in front of this file and serves the pair as
   /gliros.css on every site (and as /front/portal/gliros.css on www's legal pages; its pictures are referred to
   relatively, so they are found next to it). Only tokens are used here: no colour, size, radius or time of its own.
   Sections: 1 base · 2 background · 3 shell (side panel, top bar, content) · 4 buttons and fields · 5 cards and lists
   · 6 reading (documents, markdown) · 7 forum · 8 narrow screens · 9 reduced motion */

/* ---------- 1. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: var(--text-md) / var(--line) var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
::selection { background: var(--accent-soft); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.3; margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); font-weight: 600; }
p { margin: 0 0 var(--space-3); }
img { max-width: 100%; height: auto; }
.ico { flex: none; display: block; }
.dim { color: var(--text-dim); }
.meta { color: var(--text-dim); font-size: var(--text-sm); }
        /* dates, counts, authors (--text-dim: AA on glass) */
.mono { font-family: var(--mono); font-size: 0.86em; }
.skip { position: absolute; left: -9999px; top: var(--space-2); z-index: 60; padding: var(--space-2) var(--space-3);
  background: var(--surface-solid); border-radius: var(--radius); }
.skip:focus { left: var(--space-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.actions.center { justify-content: center; }
.content > header > :last-child { margin-bottom: 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.head-row h1 { margin: 0; }
.content > header .crumbs { margin-bottom: var(--space-2); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ---------- 2. background: one calm surface ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg-img { position: absolute; inset: -60px; background: url("bg-dark.svg") center / cover no-repeat;
  filter: blur(var(--bg-blur)) saturate(1.05); transform: scale(1.04); }
.bg-tint { position: absolute; inset: 0; background: var(--tint); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bg-img { background-image: url("bg-light.svg"); } }
:root[data-theme="light"] .bg-img { background-image: url("bg-light.svg"); }

.glass { background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2); backdrop-filter: blur(var(--blur)) saturate(1.2); box-shadow: var(--shadow-soft); }

/* ---------- 3. the shell: a side panel like the app's sidebar, the content centred beside it ---------- */
.shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--space-3); padding: var(--space-3); }
.side { position: sticky; top: var(--space-3); align-self: start; max-height: calc(100vh - 2 * var(--space-3)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-2); }
.brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0 var(--space-2) var(--space-2); color: var(--text); }
.brand:hover { text-decoration: none; color: var(--text); }
.logo { width: 28px; height: 28px; flex: none; background: var(--accent);
  -webkit-mask: url("mark.svg") center / contain no-repeat; mask: url("mark.svg") center / contain no-repeat; }
.brand-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 650; letter-spacing: 0.01em; }
.brand-site { color: var(--text-dim); font-size: var(--text-sm); }
.nav-group { margin: var(--space-3) 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 0.5rem 0.7rem; border: 1px solid transparent;
  border-radius: var(--radius); color: var(--text); font-size: var(--text-sm); transition: background var(--fast); }
.nav-item .ico { color: var(--text-dim); }
.nav-item:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.nav-item.on { background: var(--accent-soft); border-color: var(--user-border); }
.nav-item.on .ico { color: var(--accent); }
.nav-item.sub { padding: 0.3rem 0.7rem 0.3rem 2.6rem; font-size: var(--text-xs); color: var(--text-dim); }
.nav-item.sub.on { color: var(--text); }
.side-foot { margin-top: auto; padding: var(--space-3) var(--space-2) var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  font-size: var(--text-xs); color: var(--text-dim); }
.side-foot b { color: var(--text); font-weight: 600; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-h); padding: 0 var(--space-2); }
.topbar .grow { flex: 1; }
.topbar .quiet { color: var(--text-dim); font-size: var(--text-sm); }
.topbar .quiet:hover { color: var(--text); }
button.quiet { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.topbar form.inline { display: inline-flex; }
.top-brand { display: none; }
.drawer { display: none; }
.content { width: 100%; max-width: var(--chat-max-w); margin: 0 auto; padding: var(--space-2) var(--space-4) var(--space-6); flex: 1; }
.content.wide { max-width: 1120px; }                  /* the office's tables */
.content.narrow { max-width: 540px; }                 /* a form on its own: sign-in, sign-up, errors */
/* a page without a side panel (status, sign-in, errors): one column, the mark in the header */
.shell.solo { grid-template-columns: minmax(0, 1fr); }
.shell.solo .top-brand { display: flex; padding: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.topbar-right > span, .topbar-right > a:not(.btn) { color: var(--on-bg-dim); font-size: var(--text-sm); }
.topbar-right > a:not(.btn):hover { color: var(--text); }
.topbar-right form { display: inline-flex; margin: 0; }
.content > * + * { margin-top: var(--space-5); }
.foot { padding: var(--space-4) var(--space-4) var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--text-dim); }  /* text-sm: readable (hand-over 0116, 2.6) */
.foot a { color: var(--text-dim); }
.foot a:hover { color: var(--text); }
.foot .sep { display: inline-block; width: 1px; height: 1em; margin: 0 var(--space-3); vertical-align: -0.15em; background: var(--border); }   /* the legal links | the language (round 243) */
.foot .langs { margin-top: 0; }
.foot .langs b { color: var(--text); font-weight: 500; }
@media (max-width: 600px) { .foot .sep { display: none; } .foot .langs { display: block; margin-top: var(--space-2); } }   /* its own line on a phone */

/* ---------- 4. buttons and fields (the app's) ---------- */
/* .btn is the quiet pill; .btn.primary is the one accent button of a view (.secondary is kept as a plain synonym) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.5rem 1.1rem;
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill); background: var(--glass); color: var(--text);
  font: inherit; font-weight: 500; font-size: var(--text-sm); line-height: 1.4; cursor: pointer; text-decoration: none;
  transition: background var(--fast), border-color var(--fast); }
.btn:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
/* the danger colour mixed toward the text colour: the light theme's --danger alone is under 4.5:1 as small text on glass */
.btn.danger { background: transparent; color: color-mix(in srgb, var(--danger) 72%, var(--text)); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.btn.small { padding: 0.3rem 0.8rem; font-size: var(--text-xs); }
.btn.block { display: flex; width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--text-dim); cursor: pointer;
  transition: background var(--fast), color var(--fast); }
.icon-btn:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
form.inline { display: inline; margin: 0; }
label { display: block; font-size: var(--text-sm); color: var(--text-dim); margin: 0 0 var(--space-1); }
input[type=text], input[type=email], input[type=url], input[type=search], input[type=password], input[type=number], input[type=date], input:not([type]), select, textarea {
  width: 100%; padding: 0.55rem 0.8rem; color: var(--text); background: var(--inset); border: 1px solid var(--border);
  border-radius: var(--radius); font: inherit; transition: border-color var(--fast); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--user-border); box-shadow: var(--focus); }
/* an open list draws its options with the system's colours: a see-through select gave white options with near-white
   text in the dark theme on Windows (the owner, 2026-11-02; the design chat's site review §3.9) */
select option, select optgroup { background-color: var(--surface-solid); color: var(--text); }
textarea { resize: vertical; line-height: 1.5; }
.field { margin-bottom: var(--space-4); }
.hint { color: var(--text-dim); font-size: var(--text-xs); margin-top: var(--space-1); }
.fpr { color: var(--text-dim); font-size: var(--text-sm); }   /* app's Open: the PC's key fingerprint (round 243) */
.fpr b { color: var(--text); font-weight: 500; }
.fpr code { font-size: var(--text-sm); color: var(--text); overflow-wrap: anywhere; }
/* one notice (the design chat's site review §3.4, round 231): a calm card with a status dot and words; never a red or
   amber box. .alert, the older name, draws the same */
.notice, .alert { display: block; position: relative; padding: 0.55rem 0.9rem 0.55rem 2rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); font-size: var(--text-sm); }
.notice::before, .alert::before { content: ""; position: absolute; left: 0.9rem; top: calc(0.55rem + 0.75em - 4px); width: 8px; height: 8px;
  border-radius: 50%; background: var(--text-dim); }
.notice.ok::before, .notice.good::before, .notice.sent::before, .alert.ok::before { background: var(--good); }
.notice.warn::before, .alert.warn::before { background: var(--warn); }
.notice.error::before, .notice.danger::before, .alert.error::before, .alert.danger::before { background: var(--danger); }
.card .notice, .card .alert { box-shadow: none; margin: var(--space-3) 0; }
.center .notice, .center .alert, .notice.center { text-align: left; }   /* the words beside their dot, even in a centred card */
/* a danger zone's confirm step (the site review §3.5, the design chat's step-1 line): the one filled danger button
   (round 222's kit rule, now for every site) */
/* a row's action in a list (the site review §3.5): a quiet word in --text-dim; with .danger it turns danger on hover */
.btn.quiet { background: none; border-color: transparent; color: var(--text-dim); }
.btn.quiet:hover, .btn.quiet:focus-visible { color: var(--text); background: var(--accent-soft); }
.btn.quiet.danger { color: var(--text-dim); border-color: transparent; }
.btn.quiet.danger:hover, .btn.quiet.danger:focus-visible { color: color-mix(in srgb, var(--danger) 72%, var(--text)); background: var(--danger-soft); }
.btn.danger.solid { background: var(--danger); border-color: var(--danger); color: var(--on-danger); font-weight: 600; }
.btn.danger.solid:hover, .btn.danger.solid:focus-visible { background: color-mix(in srgb, var(--danger) 85%, var(--text)); color: var(--on-danger); }
/* the page head (§3.1): every page's own name, one plain sentence, at most one action; then the tabs, then the cards */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.page-head > .ph-text { flex: 1 1 24rem; min-width: 0; }
.page-head .crumbs { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.page-head h1 { margin: 0; font-size: var(--text-xl); overflow-wrap: anywhere; }
.page-head .ph-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.page-head .ph-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-head p { margin: var(--space-1) 0 0; max-width: 72ch; color: var(--on-bg-dim); font-size: var(--text-sm); }
.page-head > .ph-act { flex: none; }
.badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--radius-pill); font-size: var(--text-xs); line-height: 1.5;
  border: 1px solid var(--border); color: var(--text-dim); vertical-align: 1px; white-space: nowrap; }
.badge.accent { border-color: var(--accent); color: var(--accent); }
.badge.good, .pill.good { border-color: var(--good); color: var(--text); }
.badge.warn, .pill.warn { border-color: var(--warn); color: var(--text); }
.badge.good::before, .badge.warn::before, .pill.good::before, .pill.warn::before, .pill.bad::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: currentColor; }
.badge.good::before, .pill.good::before { background: var(--good); }
.badge.warn::before, .pill.warn::before { background: var(--warn); }
.pill.bad::before { background: var(--danger); }

/* the one search / message box: a soft pill like the app's composer */
.pill-box { display: flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.4rem 0.35rem 1rem; border-radius: var(--radius-xl);
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); transition: border-color var(--fast); }
.pill-box:focus-within { border-color: var(--user-border); }
.pill-box > .ico { color: var(--text-dim); }
.pill-box input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0.45rem 0; box-shadow: none; }
.pill-box input:focus { box-shadow: none; }
.round-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: none;
  border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background var(--fast); }
.round-btn:hover { background: var(--accent-hover); }

/* ---------- 5. cards and lists ---------- */
.card { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-soft); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.card.flush { padding: var(--space-2); }
.group-title { margin: 0 0 var(--space-3); padding: 0 var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); font-family: var(--font); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tile { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); color: var(--text);
  transition: border-color var(--fast), background var(--fast); }
.tile:hover { text-decoration: none; color: var(--text); border-color: var(--user-border); }
.tile b { display: block; font-weight: 500; }
.tile .grow > span { display: block; color: var(--text-dim); font-size: var(--text-sm); margin-top: 2px; }
.tile b { color: var(--text); }
.ico-circle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); }
.ico-circle.big { width: 52px; height: 52px; margin-bottom: var(--space-3); }
.tile .grow { flex: 1; min-width: 0; padding-top: 2px; }
.tile .grow > .meta { margin-top: var(--space-2); font-size: var(--text-xs); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--border); }
.row-link { display: flex; align-items: center; gap: var(--space-3); padding: 0.65rem 0.8rem; border-radius: var(--radius); color: var(--text); }
.row-link:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.row-link .grow { flex: 1; min-width: 0; }
.row-link .ico { color: var(--text-dim); }
.row-link .snippet { display: block; color: var(--text-dim); font-size: var(--text-sm); margin-top: 0.15rem; overflow-wrap: anywhere; }
.row-link .snippet mark { background: var(--accent-soft); color: var(--text); border-radius: 3px; padding: 0 2px; }
.fold { border-radius: var(--radius); }
.fold + .fold { border-top: 1px solid var(--border); border-radius: 0; }
.fold summary { display: flex; align-items: center; gap: var(--space-3); padding: 0.75rem 0.8rem; cursor: pointer; list-style: none; border-radius: var(--radius); }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { background: var(--accent-soft); }
.fold summary .ico { color: var(--text-dim); margin-left: auto; transition: transform var(--medium); }
.fold[open] summary .ico { transform: rotate(180deg); }
.fold .answer { padding: 0 0.8rem var(--space-3); color: var(--text-dim); }
.card-foot { margin: 0; padding: 0.6rem 0.8rem 0.3rem; font-size: var(--text-sm); color: var(--text-dim); }
.pager { display: flex; justify-content: center; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }

/* ---------- 6. reading: documents and markdown (the app's .md) ---------- */
.doc { padding: var(--space-6); }
.doc .lead { font-size: 1.02rem; color: var(--text-dim); }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: 0.55em 0; }
.md h2 { margin: 1.4em 0 0.4em; font-size: var(--text-lg); scroll-margin-top: var(--space-5); }
.md h3 { margin: 1.1em 0 0.3em; }
.md ul, .md ol { padding-left: 1.4em; }
.md li { margin: 0.2em 0; }
.md blockquote { margin-left: 0; padding: 0.1em 0 0.1em 0.9em; border-left: 3px solid var(--user-border); color: var(--text-dim); }
.md code { font-family: var(--mono); font-size: 0.86em; background: var(--inset); border: 1px solid var(--border); border-radius: 6px; padding: 0.05em 0.35em; overflow-wrap: anywhere; }
.md pre { background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); overflow-x: auto; }
.md pre code { background: none; border: none; padding: 0; }
.md strong { color: var(--text); }
.frame { margin: var(--space-5) 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); }
.frame img { display: block; width: 100%; }
.media { margin: var(--space-5) 0; }
.media video, .media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); background: #0d141a; }
.media.tall video, .media.tall img { width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; }
.media figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); text-align: center; }
/* a screen guide's chapters under its video (support, round 174): a quiet transcript, each time a small button */
.vchap { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-dim); }
.vchap summary { cursor: pointer; color: var(--text); font-weight: 600; }
.vchap ol { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.vchap li { display: flex; gap: var(--space-2); align-items: baseline; }
.vchap .vt { flex: none; font: inherit; font-variant-numeric: tabular-nums; min-width: 3.4em; padding: 2px 8px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--inset); color: var(--accent-ink, var(--text)); cursor: pointer; }
.vchap .vt:hover, .vchap .vt:focus-visible { border-color: var(--accent); }
.media-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.crumbs { font-size: var(--text-sm); color: var(--text-dim); }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--text); }
.note { padding: 0.5rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--warn); color: var(--text); font-size: var(--text-sm); }
.quote { margin: var(--space-3) 0; padding: 0.1em 0 0.1em 0.9em; border-left: 3px solid var(--user-border); color: var(--text-dim); }

/* ---------- 6b. articles: guides and "how it works" read like a calm magazine page (round 89, docs/ARTICLES.md) ----------
   One text column of about 70 characters in the middle of the card, with room around it; pictures may use the card's
   full width. Headings in the display font with a short accent line, a larger lead, quoted phrases as soft chips (what
   you would type in the chat), menu paths with quiet chevrons. */
.article { padding: var(--space-6) clamp(var(--space-4), 5%, 52px) calc(var(--space-6) + var(--space-3)); }
.article > .art-head, .article > .note, .article > .try, .article > .art-foot, .prose > :not(figure) { max-width: 40rem; margin-left: auto; margin-right: auto; }
.art-head { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.kicker { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 0.05em; }
.article h1 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.article .lead { margin: 0 0 var(--space-4); font-size: 1.16rem; line-height: 1.62; color: var(--text-dim); }
.art-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--text-dim); }
.art-meta .badge { margin: 0; }
.article > .note { margin-bottom: var(--space-5); }
.article > .frame { margin: 0 0 var(--space-6); }
.prose { font-size: 1.03rem; line-height: 1.78; }
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > pre { margin-top: 0; margin-bottom: 1.1em; }
.prose > h2 { margin-top: 2.2em; margin-bottom: 0.6em; font-family: var(--font-display); font-weight: 400; font-size: 1.42rem; line-height: 1.3; }
.prose > h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 0.75em; border-radius: 2px; background: var(--accent); }
.prose > h3 { margin-top: 1.7em; margin-bottom: 0.4em; font-size: 1.08rem; }
.prose li { margin: 0.4em 0; padding-left: 0.15em; }
.prose ol > li::marker { font-weight: 600; color: var(--text-dim); }
.prose > :first-child { margin-top: 0; }
.prose > figure, .prose > .media { margin: 2.1em 0; }
.say { padding: 0.06em 0.4em; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--text); white-space: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ui-sep { font-size: 0; }
.ui-sep::before { content: "›"; display: inline-block; margin: 0 0.32em; font-size: 1.05rem; line-height: 1; color: var(--text-dim); }
.try { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--inset); border: 1px solid var(--border); }
.try-title { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.try ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.try .say { display: inline-block; padding: 0.38em 0.85em; font-size: var(--text-md); line-height: 1.4; }
.art-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-dim); }
/* "Related" under a guide chapter, How article or tool page (docs/CONNECTIONS.md): a quiet list in the reading column */
.related { margin: var(--space-6) auto 0; max-width: 40rem; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.related h2 { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.related li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.related a { font-weight: 500; overflow-wrap: anywhere; }
.related .badge { margin: 0; font-size: var(--text-xs); }
.doc:not(.article) > .related { margin-left: 0; }
/* a forum section's own notice (community, e.g. "Models users have tested", round 102) */
.section-note { border-left: 3px solid var(--accent); }
.section-note .md > :last-child { margin-bottom: 0; }
.related + .art-foot { border-top: 0; margin-top: var(--space-4); padding-top: 0; }
/* a picture that is still to come: a quiet drawn frame, as on www (the list is docs/ILLUSTRATIONS.md) */
.ph-fig { margin: 2.1em 0; }
.ph-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, var(--accent-soft), var(--inset) 70%); box-shadow: var(--shadow-soft); }
.ph-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--glass-strong); border-bottom: 1px solid var(--border); }
.ph-art i { position: absolute; left: 8%; height: 12px; border-radius: 6px; background: var(--accent-soft); }
.ph-art i:nth-child(1) { top: 30%; width: 46%; }
.ph-art i:nth-child(2) { top: 44%; left: 22%; width: 62%; height: 30%; border-radius: var(--radius); background: var(--user-bg); }
.ph-art i:nth-child(3) { top: 82%; width: 34%; }
.ph-illustration .ph-art::before, .ph-diagram .ph-art::before { display: none; }
.ph-illustration .ph-art i:nth-child(2) { left: 30%; width: 40%; height: 46%; top: 27%; border-radius: 50%; }
.ph-diagram .ph-art i { height: 22%; width: 18%; top: 39%; border-radius: var(--radius); }
.ph-diagram .ph-art i:nth-child(1) { left: 10%; }
.ph-diagram .ph-art i:nth-child(2) { left: 41%; background: var(--user-bg); }
.ph-diagram .ph-art i:nth-child(3) { left: 72%; }
.ph-fig figcaption, .prose .media figcaption, .article > .frame + figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); text-align: center; }
@media (max-width: 640px) {
  .article { padding: var(--space-5) var(--space-4) var(--space-6); }
  .prose { font-size: 1rem; line-height: 1.72; }
  .article .lead { font-size: 1.06rem; }
  .try { padding: var(--space-3) var(--space-4); }
}

/* ---------- 7. forum: a thread reads like the chat ---------- */
.initial { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface-solid); color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.post { display: flex; flex-direction: column; gap: var(--space-1); }
.post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); min-height: 30px; padding: 0 var(--space-1); }
.post-head .who { white-space: nowrap; }
.post-head .who { font-weight: 600; font-size: var(--text-sm); }
.post-head .who.gone { font-weight: 400; font-style: italic; color: var(--text-dim); }
.initial.gone { background: var(--surface-solid); color: var(--text-dim); }
.initial .logo { width: 18px; height: 18px; }
.posts { display: flex; flex-direction: column; gap: var(--space-4); }
.post { scroll-margin-top: var(--space-5); }
.post:target .post-body { border-color: var(--user-border); }
.post-body { background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg);
  padding: 0.75rem 1.05rem; overflow-wrap: anywhere; }
.post.mine .post-body { background: var(--user-bg); border-color: var(--user-border); }
.post-body.quiet { color: var(--text-dim); font-style: italic; background: var(--glass); box-shadow: none; border-style: dashed; border-color: var(--border); }
/* community moderators (round 53): a badge with their name, their buttons under a post or a thread */
.badge.mod { display: inline-flex; align-items: center; gap: 3px; border-color: var(--good); color: var(--text); }
.badge.mod svg { color: var(--good); }
.initial.mod { box-shadow: 0 0 0 2px var(--good); }
.mod-actions { gap: var(--space-2); padding: 0 var(--space-1); }
.mod-actions form { display: inline; margin: 0; }
.mod-hidden summary { cursor: pointer; color: var(--text-dim); font-size: var(--text-sm); padding: 0 var(--space-1); }
.post-actions { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--fast); }
.post-actions .icon-btn { width: 28px; height: 28px; }
.post:hover .post-actions, .post:focus-within .post-actions { opacity: 1; }
.thread-list .row-link .meta { display: block; margin-top: 1px; }
.thread-list .row-link .title { font-weight: 500; }
.thread-list .row-link .count { display: inline-flex; align-items: center; gap: 4px; margin: 0; flex: none; }
.card.fields { padding: var(--space-4) var(--space-4) var(--space-1); margin-bottom: var(--space-3); }
.composer { display: flex; flex-direction: column; gap: var(--space-1); padding: 0.55rem 0.6rem 0.5rem 1rem; border-radius: var(--radius-xl);
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); transition: border-color var(--fast); }
.composer:focus-within { border-color: var(--user-border); }
.composer textarea { border: none; background: transparent; padding: 0.35rem 0; min-height: 3.2em; box-shadow: none; resize: vertical; }
.composer textarea:focus { box-shadow: none; }
.composer-row { display: flex; align-items: center; gap: var(--space-2); }
.composer-hint { flex: 1; font-size: var(--text-xs); color: var(--text-dim); }
.composer-hint summary { cursor: pointer; width: max-content; list-style: none; }
.composer-hint summary::-webkit-details-marker { display: none; }
.composer-hint summary:hover { color: var(--text); }
.composer-hint[open] summary { margin-bottom: var(--space-1); }

/* ---------- 7a. older page blocks (account, office, status), redrawn in the same look ---------- */
.small { font-size: var(--text-sm); }
.faint { color: var(--text-dim); }
code, kbd { font-family: var(--mono); font-size: 0.86em; background: var(--inset); border: 1px solid var(--border); border-radius: 6px; padding: 0.05em 0.35em; }
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }
.card.center { text-align: center; }
.card.center:not(.wide) { max-width: 520px; margin-left: auto; margin-right: auto; }
.card.danger { border-color: var(--danger); }
.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row.center { justify-content: center; }
.row.start { justify-content: flex-start; }
.row > h1, .row > h2, .row > h3 { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.stat { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); }
.stat b { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.stat span { color: var(--text-dim); font-size: var(--text-sm); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: 0.55rem 0.7rem; vertical-align: top; }
th { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
tbody tr + tr > * { border-top: 1px solid var(--border); }
tbody th { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 500; width: 35%; }
tbody tr:hover > * { background: var(--accent-soft); }
.grid + .hint, .grid + p { margin-top: var(--space-3); }
td form { display: inline-flex; gap: var(--space-1); margin: 0; }
td form input[type=text] { width: auto; min-width: 8rem; padding: 0.3rem 0.6rem; }
.pill { display: inline-block; padding: 0.05rem 0.55rem; border-radius: var(--radius-pill); font-size: var(--text-xs); line-height: 1.5;
  border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; vertical-align: 1px; }
.pill.bad { border-color: var(--danger); color: var(--text); }
.pill.info { border-color: var(--accent); color: var(--text); }
.code-box { font-family: var(--mono); background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3);
  overflow-wrap: anywhere; user-select: all; }
/* the filter row (the site review §3.6): a list's search and selects on one line above its table, on the backdrop, no card */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filter-row input[type="search"], .filter-row input[type="text"] { flex: 1 1 16rem; max-width: 30rem; width: auto; }
.filter-row select { flex: 0 1 auto; width: auto; }
.filter-row + * { margin-top: var(--space-3) !important; }
.content > .filter-row + .hint { margin-top: var(--space-2) !important; }
/* a fold for a long explanation (the site review, step 3: Billing's paragraph) */
details.more { font-size: var(--text-sm); color: var(--text-dim); }
details.more > summary { cursor: pointer; width: max-content; max-width: 100%; color: inherit; }
details.more > summary:hover { color: var(--text); }
details.more[open] > summary { margin-bottom: var(--space-2); }
/* a segmented filter (community's tool kinds, round 233): pill links, the chosen one marked */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.seg a { padding: 0.2rem 0.75rem; border-radius: var(--radius-pill); color: var(--text-dim); font-size: var(--text-sm); }
.seg a:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.seg a.on { background: var(--accent-soft); color: var(--text); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tabs a { padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--text-dim); font-size: var(--text-sm); }
.tabs a:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.tabs a.on { background: var(--accent-soft); border-color: var(--user-border); color: var(--text); }
/* home.gliros.com > Devices: the linking code, large, with its countdown and the app's three steps */
.code-box.big { font-family: var(--mono); font-size: 2rem; letter-spacing: 0.12em; text-align: center; padding: var(--space-4); user-select: all; }
.code-box.expired { opacity: 0.45; text-decoration: line-through; }
.countdown { text-align: center; margin-top: var(--space-2); }
.steps { margin: var(--space-4) 0 var(--space-3); padding-left: 1.4em; }
.steps li { margin: var(--space-1) 0; }
.nowrap { white-space: nowrap; }
/* Lists of PCs and sessions on app/home (table.stack): they fit their card. Wide: compact cells, the system and the
   rename under the name. When the card is narrow (a container query: the card's own width, not the window's), every row
   becomes a small card of its own, each value labelled by its data-label. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.stack-wrap { container-type: inline-size; }
table.stack th { white-space: nowrap; }
table.stack th, table.stack td { padding-left: 0.5rem; padding-right: 0.5rem; }
table.stack th:first-child, table.stack td:first-child { padding-left: 0; }
table.stack th:last-child, table.stack td:last-child { padding-right: 0; text-align: right; }
table.stack .cell-main { overflow-wrap: anywhere; min-width: 8rem; }
table.stack .dev-name { font-weight: 500; }
table.stack .cell-main .meta { display: block; font-size: var(--text-xs); }
/* a removed PC's "deleted by itself on …" goes on its own line under the status pill (the owner, 2026-10-22) */
table.devices .pill + .meta { display: block; margin-top: var(--space-1); font-size: var(--text-xs); }
table.devices .fpr { min-width: 6.2rem; }
/* office > Audit log: the time in two short lines at most (date, then time), the action on one line, an address may
   break anywhere (IPv6 is long), and the detail takes the rest and wraps anywhere (a JSON summary has no spaces). In a
   narrow card the entries stack like the PC lists, without an empty Detail line. */
table.audit th, table.audit td { padding-left: 0.5rem; padding-right: 0.5rem; }
table.audit td.when { min-width: 0; }
table.audit td.addr { overflow-wrap: anywhere; min-width: 6.5rem; }
table.audit td.detail { overflow-wrap: anywhere; min-width: 6.5rem; }
table.audit th:last-child, table.audit td:last-child { text-align: left; }
details.rename { margin-top: 2px; }
details.rename > summary { display: inline-block; list-style: none; cursor: pointer; color: var(--accent); font-size: var(--text-xs); }
details.rename > summary::-webkit-details-marker { display: none; }
details.rename > summary:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
details.rename form { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
details.rename input[type=text] { width: 11rem; max-width: 100%; min-width: 0; padding: 0.3rem 0.6rem; }
@container (max-width: 640px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
  table.stack tr + tr { margin-top: var(--space-2); }
  table.stack tbody tr + tr > * { border-top: 0; }
  table.stack tbody tr:hover > * { background: none; }
  table.stack td, table.stack td:first-child, table.stack td:last-child { padding: 0.15rem 0; text-align: left; }
  table.stack td[data-label] { display: flex; gap: var(--space-3); align-items: baseline; }
  table.stack td[data-label]::before { content: attr(data-label); flex: 0 0 7.5rem; color: var(--text-dim); font-family: var(--font); font-size: var(--text-xs); letter-spacing: 0; }
  table.stack td.cell-main { margin-bottom: var(--space-1); }
  table.stack td.cell-action:not(:empty) { margin-top: var(--space-2); }
  table.stack td.cell-action:empty { display: none; }
}
/* the audit log has six columns: its entries stack a little earlier, in a card under 760 px */
@container (max-width: 760px) {
  table.stack.audit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack.audit, table.stack.audit tbody, table.stack.audit tr, table.stack.audit td { display: block; width: 100%; }
  table.stack.audit tr { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
  table.stack.audit tr + tr { margin-top: var(--space-2); }
  table.stack.audit tbody tr + tr > * { border-top: 0; }
  table.stack.audit tbody tr:hover > * { background: none; }
  table.stack.audit td, table.stack.audit td:first-child, table.stack.audit td:last-child { padding: 0.15rem 0; text-align: left; }
  table.stack.audit td[data-label] { display: flex; gap: var(--space-3); align-items: baseline; }
  table.stack.audit td[data-label]::before { content: attr(data-label); flex: 0 0 7.5rem; color: var(--text-dim); font-family: var(--font); font-size: var(--text-xs); letter-spacing: 0; }
  table.stack.audit td:empty { display: none; }
}
.langs { margin-top: var(--space-4); }
/* community.gliros.com/tools: the search row, the install link with its Copy button, radio and check rows */
.tool-search { gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.tool-search .quiet-links { margin-left: auto; font-size: var(--text-sm); color: var(--text-dim); }
.tool-search .quiet-links a { color: var(--text-dim); }
.tool-search .quiet-links a:hover { color: var(--text); }
.tool-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.tool-head .ico-circle { width: 52px; height: 52px; margin-top: 4px; }
ul.examples { margin: var(--space-2) 0; padding-left: 1.2em; }
ul.examples li { margin: 0.25em 0; }
.doc details summary { cursor: pointer; color: var(--text-dim); font-size: var(--text-sm); margin-top: var(--space-2); }
.tool-search input[type=search] { flex: 1 1 14rem; min-width: 0; }
.tool-search select { flex: 0 1 12rem; min-width: 0; }
.copy-row { display: flex; gap: var(--space-2); align-items: stretch; flex-wrap: wrap; margin: var(--space-3) 0 var(--space-2); }
.copy-row input { flex: 1 1 16rem; min-width: 0; font-size: var(--text-xs); }
.copy-row .btn { flex: 0 0 auto; }
label.check { display: flex; gap: var(--space-2); align-items: baseline; margin: var(--space-2) 0; font-size: var(--text-sm); }
label.check input { width: auto; flex: 0 0 auto; }
/* a form with the listing check's checklist next to it (community tools); stacked when there is no room */
.with-aside { container-type: inline-size; }
.with-aside > .cols { display: grid; gap: var(--space-4); align-items: start; }
@container (min-width: 700px) { .with-aside > .cols { grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); } }
.checklist h2 { font-size: var(--text-lg); margin: 0; }
.checklist { padding: var(--space-4); }
.checks { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.checks .mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); }
.checks .mark svg { width: 13px; height: 13px; }
.checks .c-ok .mark { border: 2px solid var(--good); }
.checks .c-bad .mark { border: 2px solid var(--danger); }
.checks .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.checks .state { display: block; color: var(--text-dim); font-size: var(--text-xs); }
.kit { margin: var(--space-4) 0; }
.kit .hint { margin-top: var(--space-2); }
.content > p.hint a { text-decoration: underline; text-underline-offset: 2px; }
/* Send mail (office) and the mail subscriptions (home): docs/MAIL.md */
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 var(--space-4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.7rem 0.15rem 0.5rem; border: 1px solid var(--border);
  border-radius: var(--radius-pill); font-size: var(--text-sm); max-width: 100%; overflow-wrap: anywhere; }
.chip input { width: auto; flex: 0 0 auto; }
.mailpre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--text-xs); background: var(--inset);
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-2) 0; max-height: 32rem; overflow: auto; }
.mailpre.full { max-height: none; overflow: visible; }
tr.muted td { color: var(--text-dim); }
.rewrite { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.rewrite .field { margin: 0; }
.suggestion { margin-top: var(--space-4); }
.suggestion > .cols { display: grid; gap: var(--space-3); }
@container (min-width: 700px) { .suggestion > .cols { grid-template-columns: 1fr 1fr; } }
.mail-form > * + * { margin-top: var(--space-4); }
.tpl-save { margin-top: var(--space-3); }
.tpl-save input { flex: 1 1 12rem; min-width: 0; width: auto; }
fieldset.consent { border: 0; padding: 0; margin: var(--space-3) 0; }
fieldset.consent legend { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
details.field > summary { cursor: pointer; font-weight: 600; margin: var(--space-2) 0; }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--space-4); }
fieldset.field legend { font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-1); padding: 0; }
/* www legal pages: the "[to be filled in]" markers */
mark.todo { background: transparent; color: var(--text); border: 1px dashed var(--warn); border-radius: 4px; padding: 0 3px; }
/* status page */
.banner { display: flex; align-items: center; gap: var(--space-4); }
.banner h1 { margin: 0; }
.banner p { margin: 0; color: var(--on-bg-dim); }
.banner.operational { border-color: var(--good); }
.banner.degraded, .banner.maintenance { border-color: var(--warn); }
.banner.outage { border-color: var(--danger); }
.dot { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--text-dim); }
.banner .dot { width: 16px; height: 16px; }
.dot.operational { background: var(--good); }
.dot.degraded, .dot.maintenance { background: var(--warn); }
.dot.outage { background: var(--danger); }
/* a danger zone's heading (the site review §3.5): a neutral card, a danger dot by its heading, only the button red */
h2 > .dot, h3 > .dot { width: 8px; height: 8px; margin-right: var(--space-2); vertical-align: 0.15em; }
.dot.danger { background: var(--danger); }
.dot.warn { background: var(--warn); }
.dot.good { background: var(--good); }
.svc { padding: var(--space-3) 0; }
.svc + .svc { border-top: 1px solid var(--border); }
.svc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.services { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.svc-name { font-weight: 500; }
.svc-desc { color: var(--text-dim); font-size: var(--text-sm); }
.bars { display: flex; gap: 2px; height: 28px; margin-top: var(--space-2); }
.bars i { flex: 1; min-width: 1px; border-radius: 2px; background: var(--border); }
.bars i.ok { background: var(--good); }
.bars i.warn { background: var(--warn); }
.bars i.down { background: var(--danger); }
.bars-legend { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-dim); margin-top: var(--space-1); }
.day { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.incident { padding: var(--space-3) 0; }
.incident + .incident { border-top: 1px solid var(--border); }
.incident h3 { margin: 0; }
.upd { margin-top: var(--space-2); font-size: var(--text-sm); }
.upd p { margin: 0 0 var(--space-2); }
.upd b { text-transform: capitalize; }
/* the status page's history card can run down over the darker part of the background picture: its quiet texts (the
   services, the update times) keep full text colour there, so they never fall under AA contrast (round 54) */
.incident .faint { color: var(--text); }

/* ---------- 7b. text on the bare background ---------- */
/* Text straight on the background picture (headers, group titles, post heads, footer) is not on glass, and --text-dim
   there falls below WCAG AA over the light picture (about 3.4:1). --on-bg-dim is still a dimmed --text, made only from
   the app's tokens, and passes in both themes (the pilot checks measure it). */
:root { --on-bg-dim: color-mix(in srgb, var(--text) 45%, var(--text-dim)); }
.content > header .dim, .content > header .meta, .crumbs, .crumbs a, .group-title, .foot, .foot a, .topbar .quiet, .post-head .meta,
.post-head .who.gone, .pager .meta, .content > .meta, .content > .hint, .content > p.dim, .content > p .dim, .content > p > a:not(.btn) { color: var(--on-bg-dim); } 
/* ---------- 8. narrow screens: the side panel becomes a drawer (as in the app) ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: var(--space-2); gap: var(--space-2); }
  .shell > .side { display: none; }
  .drawer { display: block; position: relative; }
  .drawer > summary { list-style: none; }
  .drawer > summary::-webkit-details-marker { display: none; }
  /* the one side panel, opened by the menu button (a <details> without script; the page's own panel, not a copy) */
  .shell:has(.drawer[open]) > .side { display: flex; position: fixed; z-index: 30; top: var(--space-2); bottom: var(--space-2); left: var(--space-2);
    width: min(288px, 86vw); max-height: none; align-self: stretch; background: var(--glass-strong); }
  .drawer[open] > summary::after { content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(4, 10, 12, 0.4); }
  .topbar .brand { padding: 0; }
  .top-brand { display: flex; }
  .topbar { gap: var(--space-2); }
  .content { padding: var(--space-2) var(--space-2) var(--space-5); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .doc, .card { padding: var(--space-4); }
  .post-actions { opacity: 1; }                 /* no hover on touch screens */
  .bars { gap: 1px; height: 22px; }
  .banner { gap: var(--space-3); }
}

/* phones: the header keeps the mark, the site's name and what is about the visitor (sign out); the other quiet links
   are in the side panel's drawer and at the foot of the page */
@media (max-width: 560px) {
  .topbar a.quiet { display: none; }
  .topbar-right > span, .topbar-right > a:not(.btn) { display: none; }   /* who is signed in: in the side panel's pages */
  .topbar .brand-site { display: none; }
}

/* ---------- 9. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* www's legal pages: light / dark for this visit (?theme=) */
.theme-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.theme-switch a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: var(--radius-pill); color: var(--text-dim); }
.theme-switch a:hover { color: var(--text); background: var(--accent-soft); }
.theme-switch a.on { color: var(--on-accent); background: var(--accent); }
/* a long address or word in a text breaks instead of pushing the page sideways (the layout screening, 0144 §4.4) */
.content, .doc, .md, .card { overflow-wrap: break-word; }

/* two-step sign-in (round 131): the setup's QR code beside the key, and the recovery codes */
.ts-setup { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin: var(--space-3) 0; }
.ts-setup > div { flex: 1 1 16rem; min-width: 0; }
.ts-qr { margin: 0; flex: 0 0 auto; }
.ts-qr svg { display: block; width: 220px; height: 220px; max-width: 100%; border-radius: var(--radius); }
.ts-key { font-size: var(--text-lg); letter-spacing: 0.08em; word-spacing: 0.3em; overflow-wrap: anywhere; user-select: all; }
.ts-codes { columns: 2; column-gap: var(--space-5); padding-left: 2em; margin: var(--space-3) 0; font-size: var(--text-lg); }
.ts-codes li { margin: 0; padding: var(--space-1) 0; break-inside: avoid; }
details.ts-open { margin: var(--space-3) 0; }
details.ts-open > summary { list-style: none; display: inline-flex; }
details.ts-open > summary::-webkit-details-marker { display: none; }