@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/lora-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/lora-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/lora-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/lora-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/fonts/worksans-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/fonts/worksans-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/fonts/jetbrainsmono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(/fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--s1: 2px;
--s2: 4px;
--s3: 6px;
--s4: 8px;
--s5: 10px;
--s6: 12px;
--s7: 14px;
--s8: 16px;
--s9: 20px;
--s10: 24px;
--s11: 32px;
--s12: 40px;
--s13: 48px;
--t1: 9px;
--t2: 10px;
--t3: 11px;
--t4: 12.5px;
--t5: 13.5px;
--t6: 15px;
--t7: 17px;
--t8: 20px;
--t9: 24px;
--t10: 30px;
--t11: 40px;
/* Small text is read in bulk and wants air; a heading is one line and a
loose one reads as two. */
--lh1: 1.4;
--lh2: 1.4;
--lh3: 1.45;
--lh4: 1.5;
--lh5: 1.55;
--lh6: 1.6;
--lh7: 1.5;
--lh8: 1.35;
--lh9: 1.25;
--lh10: 1.2;
--lh11: 1.1;
--r1: 2px;
--r2: 4px;
--r3: 6px;
--r4: 8px;
--r5: 10px;
--r6: 12px;
--r7: 16px;
--r-pill: 999px;
/* How long a state takes to arrive. Fifty-three rules across the sheets
spelled twenty-two different durations for the one thing a hover does,
and a screen where two neighbours settle at different moments reads as
two screens. Long enough to be seen, short enough not to be waited for. */
--quick: .15s ease;
/* The three measures every product has and each had named for itself —
`--k-page`/`--k-prose`/`--k-gutter` in the portal, a literal 1240 in nine
of the portal's rules and in the front page's wrapper, `container` and
`container-narrow` in the console's. They are *measures* and not steps
(UI-42), which is why they are lengths here and not rungs; what they are
not is one product's, so they are named once and a product that wants a
different page retunes the name rather than inventing one.
`--measure` and not `--page`: `--page` is the ground a page is painted
on, and a width called the same thing as a colour is an hour lost the
first time somebody reaches for the wrong one. */
--measure: 1240px;
--prose: 62ch;
--gutter: clamp(16px, 2.4vw, 44px);
}
:root {
color-scheme: light dark;
--page: oklch(0.95 0.008 85);
--surface: oklch(0.99 0.004 85);
--mid: oklch(0.975 0.005 85);
--rail: oklch(0.965 0.006 85);
--field: oklch(0.96 0.006 85);
--hover: oklch(0.955 0.006 85);
--chip: oklch(0.93 0.006 85);
--line: oklch(0.91 0.006 85);
--line2: oklch(0.88 0.006 85);
--hair: oklch(0.93 0.006 85);
--edge: oklch(0.82 0.006 85);
--ring: oklch(0.78 0.01 85);
--ink: oklch(0.22 0.01 85);
--ink2: oklch(0.28 0.01 85);
--ink3: oklch(0.46 0.01 85);
--mute: oklch(0.58 0.01 85);
--faint: oklch(0.62 0.01 85);
--idle: oklch(0.72 0.01 85);
--rail-ink: oklch(0.55 0.012 85);
--accent: oklch(0.52 0.14 265);
--accent-down: oklch(0.46 0.14 265);
--accent-idle: oklch(0.82 0.03 265);
--accent-ink: oklch(0.99 0.004 265);
--accent-text: oklch(0.38 0.1 265);
--chip-ink: oklch(0.33 0.09 265);
--wash: oklch(0.52 0.14 265 / 0.09);
--wash-faint: oklch(0.52 0.14 265 / 0.05);
--accent-soft: oklch(0.52 0.14 265 / 0.12);
--accent-line: oklch(0.52 0.14 265 / 0.4);
/* The two colours in here that are not the design's, and must not be. A QR
is read by a camera, not by a person, and the standard it is read against
assumes black modules on white paper — a near-white page and a near-black
ink are close enough to look right and far enough to cost somebody a scan
on a dim phone. They do not swap with the scheme, and nothing but a QR may
use them. */
--qr-paper: oklch(1 0 0);
--qr-ink: oklch(0 0 0);
--star: oklch(0.58 0.14 145);
--star-soft: oklch(0.94 0.05 145);
--star-ink: oklch(0.4 0.09 145);
--ok-bg: oklch(0.55 0.12 145 / 0.12);
--ok-ink: oklch(0.42 0.1 145);
/* The one red. It is spent on deleting and on a deadline that has actually
passed, and nowhere else — which is what makes it mean anything. */
--danger: oklch(0.5 0.16 25);
--danger-fill: oklch(0.52 0.17 25);
--danger-down: oklch(0.45 0.17 25);
--danger-line: oklch(0.88 0.02 25);
--danger-soft: oklch(0.96 0.03 25);
--danger-wash: oklch(0.95 0.05 25);
--danger-deep: oklch(0.45 0.13 25);
--bad-bg: oklch(0.55 0.18 25 / 0.1);
--flag-line: oklch(0.55 0.18 25 / 0.35);
--flag-bg: oklch(0.55 0.18 25 / 0.06);
--flag-ink: oklch(0.42 0.14 25);
/* Neither the accent nor a warning: the tone a note about the product wears
when it is neither good news nor bad. */
--alert: oklch(0.58 0.16 35);
--info: oklch(0.5 0.13 285);
--info-soft: oklch(0.96 0.025 285);
/* An answer written and not sent is amber: asking to be finished, neither
the accent nor the attention sand. */
--draft-line: oklch(0.88 0.03 60);
--draft-bg: oklch(0.985 0.008 60);
--draft-edge: oklch(0.7 0.08 60);
--draft-ink: oklch(0.58 0.03 60);
--draft-tag: oklch(0.55 0.09 60);
--draft-tag-line: oklch(0.82 0.06 60);
/* The accent-tinted machine text of the manual's tables and code. */
--doc-key: oklch(0.3 0.06 265);
--doc-code: oklch(0.32 0.03 265);
/* The attention tone: sand at hue 75, one lightness tinted at five
strengths. Waiting, Block all, an overdue count and every warning wear it,
because none of them is an error — they are things asking to be looked at,
and colouring them red would spend the delete colour on a first-time
sender. They are not re-answered in the dark: a translucent tint of one
mid lightness holds under either ground. */
--attn-h: 75;
--attn-c: 0.06;
--attn-fill: oklch(0.68 var(--attn-c) var(--attn-h) / 0.168);
--warn-bg: oklch(0.68 var(--attn-c) var(--attn-h) / 0.224);
--warn-line: oklch(0.68 var(--attn-c) var(--attn-h) / 0.448);
--badge-bg: oklch(0.68 var(--attn-c) var(--attn-h) / 0.56);
--attn-line: oklch(0.68 var(--attn-c) var(--attn-h) / 0.7);
--badge-line: oklch(0.68 var(--attn-c) var(--attn-h) / 0.84);
--warn-ink: oklch(0.44 0.066 75);
--warn-dot: oklch(0.66 0.096 75);
--solid: oklch(0.22 0.006 85);
--solid-ink: oklch(0.95 0.004 85);
/* An avatar's hue comes from the address, so one person is one colour
everywhere, for everyone. Only the lightness and chroma change with the
scheme — the hue is the identity and must not move. */
--av-bg: 0.87 0.05;
--av-fg: 0.38 0.075;
--radius: 10px;
--serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
--sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Shadows are for what floats. Nothing in a column has one. */
--desk: 0 1px 2px oklch(0.2 0.01 85 / 0.06), 0 24px 60px oklch(0.2 0.01 85 / 0.10);
--lift: 0 1px 3px oklch(0.2 0.01 85 / 0.12);
--card: 0 10px 32px oklch(0.2 0.01 85 / 0.08);
--tip: 0 12px 30px oklch(0.2 0.01 85 / 0.24);
--tip-sm: 0 8px 20px oklch(0.2 0.01 85 / 0.25);
--float: 0 10px 28px oklch(0.2 0.01 85 / 0.12);
--knob: 0 1px 3px oklch(0.2 0.01 85 / 0.25);
--pop: 0 14px 36px oklch(0.2 0.01 85 / 0.18);
--sheet: 0 24px 60px oklch(0.2 0.01 85 / 0.3);
--slide: -18px 0 44px oklch(0.2 0.01 85 / 0.14);
--shadow: 0 1px 2px oklch(0.2 0.01 85 / 0.06), 0 20px 50px oklch(0.2 0.01 85 / 0.09);
--scrim: oklch(0.25 0.01 85 / 0.45);
--veil: oklch(0.2 0.01 85 / 0.16);
/* The stage a picture fills the screen on (UIC-20): a warm near-black in
both schemes — the picture is the light there, so the dark scheme has
nothing to invert — its controls a veil of the ground over the picture,
their hairline a veil of the ink. And the paper a drawing is contained
on: white in both schemes, because white is what it was drawn on. */
--stage: oklch(0.13 0.01 85);
--stage-ink: oklch(0.98 0.005 85);
--stage-veil: oklch(0.1 0.01 85 / 0.5);
--stage-line: oklch(0.98 0.005 85 / 0.28);
--paper: oklch(0.99 0.003 85);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--page: oklch(0.155 0.006 85);
--surface: oklch(0.195 0.006 85);
--mid: oklch(0.185 0.006 85);
--rail: oklch(0.17 0.006 85);
--field: oklch(0.22 0.006 85);
--hover: oklch(0.235 0.006 85);
--chip: oklch(0.25 0.006 85);
--line: oklch(0.27 0.006 85);
--line2: oklch(0.31 0.006 85);
--hair: oklch(0.25 0.006 85);
--edge: oklch(0.38 0.006 85);
--ring: oklch(0.44 0.01 85);
--ink: oklch(0.94 0.004 85);
--ink2: oklch(0.88 0.004 85);
--ink3: oklch(0.72 0.008 85);
--mute: oklch(0.58 0.008 85);
--faint: oklch(0.55 0.008 85);
--idle: oklch(0.45 0.008 85);
--rail-ink: oklch(0.62 0.01 85);
--accent: oklch(0.72 0.08 265);
--accent-down: oklch(0.78 0.09 265);
--accent-idle: oklch(0.38 0.04 265);
--accent-ink: oklch(0.18 0.01 265);
--accent-text: oklch(0.8 0.09 265);
--chip-ink: oklch(0.82 0.08 265);
--wash: oklch(0.72 0.08 265 / 0.17);
--wash-faint: oklch(0.72 0.08 265 / 0.1);
--accent-soft: oklch(0.72 0.08 265 / 0.24);
--accent-line: oklch(0.72 0.08 265 / 0.45);
--star: oklch(0.76 0.13 145);
--star-soft: oklch(0.27 0.04 145);
--star-ink: oklch(0.84 0.1 145);
--ok-bg: oklch(0.7 0.12 145 / 0.16);
--ok-ink: oklch(0.8 0.1 145);
--danger: oklch(0.72 0.14 25);
--danger-fill: oklch(0.68 0.16 25);
--danger-down: oklch(0.74 0.16 25);
--danger-line: oklch(0.4 0.08 25);
--danger-soft: oklch(0.28 0.05 25);
--danger-wash: oklch(0.3 0.07 25);
--danger-deep: oklch(0.78 0.12 25);
--bad-bg: oklch(0.65 0.18 25 / 0.16);
--flag-line: oklch(0.65 0.16 25 / 0.45);
--flag-bg: oklch(0.65 0.16 25 / 0.12);
--flag-ink: oklch(0.8 0.12 25);
--alert: oklch(0.62 0.16 35);
--info: oklch(0.76 0.11 285);
--info-soft: oklch(0.28 0.05 285);
--draft-line: oklch(0.35 0.05 60);
--draft-bg: oklch(0.22 0.02 60);
--draft-edge: oklch(0.55 0.08 60);
--draft-ink: oklch(0.7 0.05 60);
--draft-tag: oklch(0.75 0.09 60);
--draft-tag-line: oklch(0.45 0.07 60);
--doc-key: oklch(0.82 0.07 265);
--doc-code: oklch(0.8 0.04 265);
--warn-ink: oklch(0.85 0.07 75);
--warn-dot: oklch(0.74 0.1 75);
--solid: oklch(0.94 0.004 85);
--solid-ink: oklch(0.2 0.006 85);
--av-bg: 0.36 0.06;
--av-fg: 0.85 0.06;
--desk: 0 1px 2px oklch(0.05 0.01 85 / 0.3), 0 24px 60px oklch(0.05 0.01 85 / 0.4);
--lift: 0 1px 3px oklch(0.05 0.01 85 / 0.4);
--card: 0 10px 32px oklch(0.05 0.01 85 / 0.3);
--tip: 0 12px 30px oklch(0.05 0.01 85 / 0.5);
--tip-sm: 0 8px 20px oklch(0.05 0.01 85 / 0.5);
--float: 0 10px 28px oklch(0.05 0.01 85 / 0.4);
--knob: 0 1px 3px oklch(0.05 0.01 85 / 0.5);
--pop: 0 14px 36px oklch(0.05 0.01 85 / 0.5);
--sheet: 0 24px 60px oklch(0.05 0.01 85 / 0.6);
--slide: -18px 0 44px oklch(0.05 0.01 85 / 0.45);
--shadow: 0 1px 2px oklch(0.05 0.01 85 / 0.3), 0 20px 50px oklch(0.05 0.01 85 / 0.3);
--scrim: oklch(0.05 0.01 85 / 0.6);
--veil: oklch(0.05 0.01 85 / 0.35);
--stage: oklch(0.13 0.01 85);
--stage-ink: oklch(0.98 0.005 85);
--stage-veil: oklch(0.1 0.01 85 / 0.5);
--stage-line: oklch(0.98 0.005 85 / 0.28);
--paper: oklch(0.99 0.003 85);
}
}
:root[data-theme="dark"] {
--page: oklch(0.155 0.006 85);
--surface: oklch(0.195 0.006 85);
--mid: oklch(0.185 0.006 85);
--rail: oklch(0.17 0.006 85);
--field: oklch(0.22 0.006 85);
--hover: oklch(0.235 0.006 85);
--chip: oklch(0.25 0.006 85);
--line: oklch(0.27 0.006 85);
--line2: oklch(0.31 0.006 85);
--hair: oklch(0.25 0.006 85);
--edge: oklch(0.38 0.006 85);
--ring: oklch(0.44 0.01 85);
--ink: oklch(0.94 0.004 85);
--ink2: oklch(0.88 0.004 85);
--ink3: oklch(0.72 0.008 85);
--mute: oklch(0.58 0.008 85);
--faint: oklch(0.55 0.008 85);
--idle: oklch(0.45 0.008 85);
--rail-ink: oklch(0.62 0.01 85);
--accent: oklch(0.72 0.08 265);
--accent-down: oklch(0.78 0.09 265);
--accent-idle: oklch(0.38 0.04 265);
--accent-ink: oklch(0.18 0.01 265);
--accent-text: oklch(0.8 0.09 265);
--chip-ink: oklch(0.82 0.08 265);
--wash: oklch(0.72 0.08 265 / 0.17);
--wash-faint: oklch(0.72 0.08 265 / 0.1);
--accent-soft: oklch(0.72 0.08 265 / 0.24);
--accent-line: oklch(0.72 0.08 265 / 0.45);
--star: oklch(0.76 0.13 145);
--star-soft: oklch(0.27 0.04 145);
--star-ink: oklch(0.84 0.1 145);
--ok-bg: oklch(0.7 0.12 145 / 0.16);
--ok-ink: oklch(0.8 0.1 145);
--danger: oklch(0.72 0.14 25);
--danger-fill: oklch(0.68 0.16 25);
--danger-down: oklch(0.74 0.16 25);
--danger-line: oklch(0.4 0.08 25);
--danger-soft: oklch(0.28 0.05 25);
--danger-wash: oklch(0.3 0.07 25);
--danger-deep: oklch(0.78 0.12 25);
--bad-bg: oklch(0.65 0.18 25 / 0.16);
--flag-line: oklch(0.65 0.16 25 / 0.45);
--flag-bg: oklch(0.65 0.16 25 / 0.12);
--flag-ink: oklch(0.8 0.12 25);
--alert: oklch(0.62 0.16 35);
--info: oklch(0.76 0.11 285);
--info-soft: oklch(0.28 0.05 285);
--draft-line: oklch(0.35 0.05 60);
--draft-bg: oklch(0.22 0.02 60);
--draft-edge: oklch(0.55 0.08 60);
--draft-ink: oklch(0.7 0.05 60);
--draft-tag: oklch(0.75 0.09 60);
--draft-tag-line: oklch(0.45 0.07 60);
--doc-key: oklch(0.82 0.07 265);
--doc-code: oklch(0.8 0.04 265);
--warn-ink: oklch(0.85 0.07 75);
--warn-dot: oklch(0.74 0.1 75);
--solid: oklch(0.94 0.004 85);
--solid-ink: oklch(0.2 0.006 85);
--av-bg: 0.36 0.06;
--av-fg: 0.85 0.06;
--desk: 0 1px 2px oklch(0.05 0.01 85 / 0.3), 0 24px 60px oklch(0.05 0.01 85 / 0.4);
--lift: 0 1px 3px oklch(0.05 0.01 85 / 0.4);
--card: 0 10px 32px oklch(0.05 0.01 85 / 0.3);
--tip: 0 12px 30px oklch(0.05 0.01 85 / 0.5);
--tip-sm: 0 8px 20px oklch(0.05 0.01 85 / 0.5);
--float: 0 10px 28px oklch(0.05 0.01 85 / 0.4);
--knob: 0 1px 3px oklch(0.05 0.01 85 / 0.5);
--pop: 0 14px 36px oklch(0.05 0.01 85 / 0.5);
--sheet: 0 24px 60px oklch(0.05 0.01 85 / 0.6);
--slide: -18px 0 44px oklch(0.05 0.01 85 / 0.45);
--shadow: 0 1px 2px oklch(0.05 0.01 85 / 0.3), 0 20px 50px oklch(0.05 0.01 85 / 0.3);
--scrim: oklch(0.05 0.01 85 / 0.6);
--veil: oklch(0.05 0.01 85 / 0.35);
--stage: oklch(0.13 0.01 85);
--stage-ink: oklch(0.98 0.005 85);
--stage-veil: oklch(0.1 0.01 85 / 0.5);
--stage-line: oklch(0.98 0.005 85 / 0.28);
--paper: oklch(0.99 0.003 85);
}
@media (prefers-color-scheme: dark) and (max-width: 640px) {
:root:not([data-theme="light"]) {
--page: oklch(0.1 0.004 85);
--surface: oklch(0.125 0.005 85);
--mid: oklch(0.115 0.005 85);
--rail: oklch(0.11 0.004 85);
--field: oklch(0.16 0.005 85);
--hover: oklch(0.175 0.005 85);
--chip: oklch(0.19 0.005 85);
--line: oklch(0.3 0.006 85);
--line2: oklch(0.34 0.006 85);
--hair: oklch(0.28 0.006 85);
--ink: oklch(0.985 0.002 85);
--ink2: oklch(0.94 0.003 85);
--ink3: oklch(0.82 0.006 85);
--mute: oklch(0.7 0.008 85);
--faint: oklch(0.64 0.008 85);
}
}
@media (max-width: 640px) {
:root[data-theme="dark"] {
--page: oklch(0.1 0.004 85);
--surface: oklch(0.125 0.005 85);
--mid: oklch(0.115 0.005 85);
--rail: oklch(0.11 0.004 85);
--field: oklch(0.16 0.005 85);
--hover: oklch(0.175 0.005 85);
--chip: oklch(0.19 0.005 85);
--line: oklch(0.3 0.006 85);
--line2: oklch(0.34 0.006 85);
--hair: oklch(0.28 0.006 85);
--ink: oklch(0.985 0.002 85);
--ink2: oklch(0.94 0.003 85);
--ink3: oklch(0.82 0.006 85);
--mute: oklch(0.7 0.008 85);
--faint: oklch(0.64 0.008 85);
}
}
/* One look for every control on every surface (UIC-8), on the house tokens.
Nothing here defines a colour or a length of its own: the tokens come first
(`tokens::preamble`) and the application's own sheet comes after, and may
add to a control but never redraws one.
The shape is the mailbox's, which is the one in this product worth copying:
the label above the box and quiet, the box a clean rounded rectangle on the
surface, and the accent spent on focus rather than on decoration.
**One name per thing** (UIC-10). The `.field`/`.input`/`.k-field`/`.k-input`
aliases this file carried are gone: there is one control in the tier now, it
spells one class, and an application's sheet that wants to add to it spells
the same one. */
/* ── a field: a label, a box, a hint ─────────────────────────────────────── */
.ui-field {
display: flex;
flex-direction: column;
gap: var(--s3);
margin: 0;
position: static;
}
.ui-label {
display: block;
position: static;
margin: 0;
font-family: inherit;
font-size: var(--t4);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ink3);
pointer-events: auto;
}
.ui-hint {
margin: 0;
font-size: var(--t4);
color: var(--mute);
text-wrap: pretty;
}
.ui-input {
width: 100%;
box-sizing: border-box;
height: 38px;
padding: 0 var(--s6);
border: 1px solid var(--line);
border-radius: var(--r3);
/* On the surface, not on `--field`. UIC-8 says so in words — "the box is a
clean rounded rectangle on the surface" — and the mailbox it was taken
from draws it that way; the sheet had it a shade grey, which is the rule
and the rendering disagreeing. */
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--t5);
outline: none;
transition: border-color 0.15s;
}
/* A price or a size reads in the figures' face: a column of them lines up. */
.ui-input.mono {
font-family: var(--mono);
}
textarea.ui-input {
height: auto;
min-height: 5rem;
padding: var(--s5) var(--s6);
line-height: 1.5;
resize: vertical;
}
select.ui-input {
height: 38px;
padding: 0 var(--s5);
}
.ui-input:focus {
border-color: var(--accent-line, var(--accent));
}
.ui-input:disabled {
background: var(--chip);
color: var(--mute);
}
/* A leading glyph, and the room the box makes for it. Measured from the top
because a field with a hint is taller, and from the bottom the glyph lands
in the hint instead of in the box. */
.ui-field-icon {
position: absolute;
left: var(--s6);
top: 27px;
color: var(--mute);
pointer-events: none;
line-height: 1;
}
.ui-field.has-icon {
position: relative;
}
.ui-field.has-icon .ui-input {
padding-left: calc(var(--s10) + var(--s2));
}
/* A refused field, marked where it is (UI-29): the problem script hangs its
sentence off the field itself. */
.is-invalid .ui-input,
.is-invalid .sel {
border-color: var(--danger);
}
.ui-field-error {
margin: 0;
font-size: var(--t4);
font-weight: 600;
color: var(--danger);
text-wrap: pretty;
}
/* A box you tick reads along its label rather than above it. */
.ui-field-check {
flex-direction: row;
align-items: center;
gap: var(--s5);
}
.ui-field-check > .ui-label {
order: 2;
color: var(--ink2);
}
.ui-field-check .ui-checkbox {
order: 1;
width: auto;
height: auto;
flex: none;
}
/* UI-37: a price is one box — the amount stretches, the currency sits at its
right edge. */
.ui-field.money {
flex-direction: row;
flex-wrap: wrap;
gap: var(--s5);
}
.ui-field.money > .ui-label {
flex-basis: 100%;
}
.ui-field.money .money-amount {
flex: 1 1 8rem;
}
.ui-field.money .money-cur {
flex: 0 0 auto;
width: auto;
min-width: 5.2rem;
}
.ui-field.money .money-cur:disabled {
color: var(--mute);
}
.ui-field.money > .ui-hint {
flex-basis: 100%;
}
/* The media library's field is a strip of pictures, not a box (GAP-216). */
.ui-field.media-field > .ui-label {
font-size: var(--t4);
}
/* ── a rectangular press: a form's, or a page's ──────────────────────────── */
.ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
border-radius: var(--radius-btn, calc(var(--radius) - 3px));
padding: .55rem .9rem;
font-size: .8rem;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: opacity .15s, background-color .15s, border-color .15s;
background: none;
}
.ui-btn.is-primary {
background: var(--btn-fill, var(--solid));
color: var(--btn-ink, var(--solid-ink));
border-color: var(--btn-line, transparent);
}
.ui-btn.is-primary:hover { opacity: .82; }
.ui-btn.is-plain { border-color: var(--line); color: var(--ink); }
.ui-btn.is-plain:hover { background: var(--field); }
.ui-btn.is-danger { border-color: var(--line); color: var(--danger); }
.ui-btn.is-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.ui-btn.is-block { width: 100%; }
.ui-btn.is-small { padding: .3rem .6rem; font-size: .72rem; }
.ui-btn .ui-btn-icon { margin-right: .5rem; }
/* ── a round press whose label unfurls (UI-25) ───────────────────────────── */
/* At rest it is a *circle*, not an oval: `--ui-round-size` is both the height
and the minimum width, and the horizontal padding is set so that a single
1em icon lands exactly on that width. Padding alone cannot do it — the old
`.55rem .7rem` made the box 2.4rem wide and 2.1rem tall, so every icon
button in the product was subtly egg-shaped. */
.ui-round {
/* A knob, not a token: it is this control's own size, and an application
turns it down for a dense row (`.row .ui-round`). Its default is a step
off the ladder like everything else. */
--ui-round-size: var(--s12);
/* Minus the 1px border on each side: `min-width` is a floor, so a content
box even slightly wider than it wins, and forgetting the border left
every one of these two pixels wider than it was tall. */
--ui-round-pad: calc((var(--ui-round-size) - 1rem - 2px) / 2);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
height: var(--ui-round-size);
min-width: var(--ui-round-size);
padding-inline: var(--ui-round-pad);
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--ink);
cursor: pointer;
font-size: .8rem;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.ui-round:hover,
.ui-round:focus-visible {
border-color: var(--ink);
box-shadow: 0 2px 10px rgb(0 0 0 / 0.07);
}
.ui-round .ui-btn-icon { font-size: 1rem; }
/* The scheme press (UIC-18). A ring with a glyph in it, the same object
whether it is a link the server answers or a button a script does — which
is the only difference between the two surfaces that wear it, and not a
difference anybody looking at it can see.
Its own size and not `.ui-round`'s: this one sits in a masthead beside
words rather than in a row of controls, and it is drawn at the height of
the text it stands next to. */
.ui-theme {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--s11);
height: var(--s11);
border: 1px solid var(--line2);
border-radius: var(--r-pill);
background: none;
color: var(--ink);
font-size: var(--t5);
line-height: 1;
cursor: pointer;
}
.ui-theme:hover { border-color: var(--ink); }
/* The label unfurls rather than appearing: `max-width` is what a transition
can actually animate, and the margin keeps it off the icon as it opens. */
.ui-round .ui-btn-label {
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: max-width .35s cubic-bezier(.4, 0, .2, 1),
margin-left .35s cubic-bezier(.4, 0, .2, 1);
margin-left: 0;
}
.ui-round:hover .ui-btn-label,
.ui-round:focus-visible .ui-btn-label,
.ui-round.is-open .ui-btn-label { max-width: 14rem; margin-left: .5rem; }
.ui-round.is-closed .ui-btn-label { max-width: 0; margin-left: 0; }
/* One that always shows its label is a pill, not a circle, so it gets the
breathing room a circle does not need. */
.ui-round.is-open { padding-inline: calc(var(--ui-round-pad) + .15rem); }
.ui-round.is-primary {
background: var(--ink);
color: var(--surface);
border-color: var(--ink);
}
.ui-round.is-primary:hover { box-shadow: 0 2px 12px rgb(0 0 0 / 0.16); }
.ui-round.is-danger { color: var(--danger); border-color: var(--danger); }
.ui-round.is-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
/* One that cannot be pressed has to look it. A primary that is off keeps the
ink of a live button otherwise, which is a button lying about itself — and
the lie is loudest exactly where it matters, on a Save with nothing to save. */
.ui-round:disabled { opacity: .4; cursor: default; }
.ui-round:disabled:hover { border-color: var(--line); box-shadow: none; }
.ui-round.is-danger:disabled:hover { background: none; border-color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
.ui-round, .ui-round .ui-btn-label { transition: none; }
}
/* ── a pill: small, outlined, inline ─────────────────────────────────────── */
.ui-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s3);
height: 34px;
padding: 0 var(--s7);
border: 1px solid var(--line2);
border-radius: var(--r5);
background: var(--surface);
color: var(--ink2);
font-size: var(--t5);
font-weight: 600;
white-space: nowrap;
}
.ui-pill:hover {
border-color: var(--accent);
color: var(--accent);
}
.ui-pill svg {
width: 15px;
height: 15px;
flex: none;
}
.ui-pill-n {
font-family: var(--mono);
font-size: var(--t3);
font-weight: 500;
color: var(--mute);
}
.ui-pill:hover .ui-pill-n {
color: inherit;
}
.ui-pill.is-primary {
border-color: var(--accent);
background: var(--accent);
color: var(--accent-ink);
}
.ui-pill.is-primary:hover {
color: var(--accent-ink);
}
.ui-pill.is-primary .ui-pill-n {
color: inherit;
}
/* A lozenge: an action on a document rather than a filter in a bar. */
.ui-pill.is-small {
height: 34px;
padding: 0 var(--s8);
border-radius: var(--r-pill);
font-size: var(--t5);
}
/* ── the press that finishes a form ──────────────────────────────────────── */
.ui-submit {
display: flex;
align-items: center;
gap: var(--s5);
margin-left: auto;
padding: var(--s6) var(--s9);
border-radius: var(--r6);
background: var(--accent);
color: var(--accent-ink);
font-size: var(--t6);
font-weight: 600;
}
.ui-submit:hover {
background: var(--accent-down);
}
/* The second way of doing the same thing, offered beside the first: the same
button, not filled. Two filled buttons on one card is two primary actions,
which is none. */
.ui-submit.is-plain {
background: var(--surface);
border: 1px solid var(--line2);
color: var(--ink2);
font-weight: 500;
}
.ui-submit.is-plain:hover {
background: var(--chip);
border-color: var(--accent);
color: var(--accent);
}
.ui-submit svg {
width: 17px;
height: 17px;
flex: none;
}
.ui-submit.is-block {
justify-content: center;
margin-left: 0;
width: 100%;
}
/* ── a modal's committing action (KODU-25) ───────────────────────────────── */
.ui-modal {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s4);
min-height: 40px;
padding: 0 var(--s9);
border: 1px solid var(--line2);
border-radius: var(--r5);
background: var(--surface);
color: var(--ink2);
font-family: inherit;
font-size: var(--t5);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.ui-modal:hover {
border-color: var(--accent);
color: var(--accent);
}
.ui-modal.is-primary {
border-color: var(--accent);
background: var(--accent);
color: var(--accent-ink);
}
.ui-modal.is-primary:hover {
background: var(--accent-down);
border-color: var(--accent-down);
color: var(--accent-ink);
}
/* ── words alone ─────────────────────────────────────────────────────────── */
.ui-text-btn {
color: var(--accent);
font-size: var(--t5);
}
.ui-text-btn:hover {
text-decoration: underline;
}
/* The surfaces a screen is made of (UIC-11), on the house tokens and defining
nothing of its own.
These are the shapes all three applications drew for themselves and each
named separately — `k-quiet`/`pb-note`/`cn-note`, `k-group`/`cn-set`,
`k-card`, `k-panel`/`pb-modal` — which is why a screen was still a
`format!` template: there was nothing here to call. Each rule below is the
union of the three, taking the mailbox's measure where they disagreed. */
/* ── what the screen says for itself ─────────────────────────────────────── */
.ui-note {
margin: 0;
font-size: var(--t4);
line-height: var(--lh4);
color: var(--mute);
text-wrap: pretty;
}
/* News, in a box, in one of three weathers. Amber is the commonest and the
one worth spelling out: nothing was lost, the form came back with what was
typed still in it, and red would say otherwise. */
.ui-say {
margin: 0;
padding: var(--s5) var(--s7);
border: 1px solid transparent;
border-radius: var(--r5);
font-size: var(--t5);
line-height: var(--lh5);
text-wrap: pretty;
}
.ui-say.is-warn {
border-color: var(--warn-line);
background: var(--warn-bg);
color: var(--warn-ink);
}
.ui-say.is-wrong {
border-color: var(--danger-line);
background: var(--danger-soft);
color: var(--danger);
}
.ui-say.is-done {
border-color: var(--star-soft);
background: var(--ok-bg);
color: var(--ok-ink);
}
/* ── what the screen says at its foot (UIC-24) ───────────────────────────── */
/* Where the notices stand: fixed at the foot wherever the page drew them,
clear of a phone's safe area, over every surface (the overlay is 110, the
drawer 130). The strip takes the pointer; the space around it does not. */
.ui-notices {
position: fixed; left: 0; right: 0; z-index: 140;
bottom: max(var(--s9), calc(env(safe-area-inset-bottom) + var(--s9)));
display: flex; flex-direction: column; align-items: center; gap: var(--s4);
padding: 0 var(--gutter);
pointer-events: none;
}
/* The mailbox's strip (PBOX-25), now everybody's: the dark solid rather than
the red, because it is a thing that happened and not a thing to fix here —
the thing to fix is marked where it is. The dot says which weather. */
.ui-notice {
pointer-events: auto;
display: flex; align-items: flex-start; gap: var(--s6);
width: min(560px, 100%);
padding: var(--s6) var(--s6) var(--s6) var(--s8);
border-radius: var(--r5);
background: var(--solid);
color: var(--solid-ink);
box-shadow: var(--sheet);
animation: ui-notice-in .22s ease-out;
}
.ui-notice.is-leaving { animation: ui-notice-out .2s ease-in forwards; }
.ui-notice-dot {
flex: none; width: var(--s5); height: var(--s5); border-radius: 50%;
transform: translateY(var(--s3));
background: var(--solid-ink); opacity: .45;
}
.ui-notice.is-wrong .ui-notice-dot { background: var(--danger-fill); opacity: 1; }
.ui-notice.is-warn .ui-notice-dot { background: var(--warn-dot); opacity: 1; }
.ui-notice.is-done .ui-notice-dot { background: var(--star); opacity: 1; }
.ui-notice-body { flex: 1; min-width: 0; }
.ui-notice-said, .ui-notice-more {
margin: 0;
font-size: var(--t5);
line-height: var(--lh5);
text-wrap: pretty;
}
.ui-notice-said { font-weight: 600; }
.ui-notice-more { opacity: .78; }
.ui-notice-close {
flex: none; width: var(--s10); height: var(--s10); padding: 0; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%; background: none;
color: inherit; font: inherit; font-size: var(--t7); line-height: 1;
opacity: .7; cursor: pointer;
transform: translateY(calc(var(--s1) * -1));
}
.ui-notice-close:hover { opacity: 1; }
.ui-notice-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes ui-notice-in {
from { opacity: 0; transform: translateY(var(--s4)); }
to { opacity: 1; transform: none; }
}
@keyframes ui-notice-out {
to { opacity: 0; transform: translateY(var(--s3)); }
}
@media (prefers-reduced-motion: reduce) {
.ui-notice, .ui-notice.is-leaving { animation: none; }
}
/* ── one word about the thing beside it ──────────────────────────────────── */
.ui-chip {
display: inline-flex;
align-items: center;
gap: var(--s3);
padding: var(--s1) var(--s4);
border-radius: var(--r4);
background: var(--chip);
color: var(--ink3);
font-size: var(--t3);
font-weight: 600;
white-space: nowrap;
}
.ui-chip.is-live { background: var(--ok-bg); color: var(--ok-ink); }
.ui-chip.is-held { background: var(--chip); color: var(--mute); }
.ui-chip.is-owed { background: var(--warn-bg); color: var(--warn-ink); }
/* ── a run of controls under one label ───────────────────────────────────── */
/* A column, because a form is filled in in order, and a measure rather than
the full width, because a line of text nobody can follow to the end is not
a form anybody finishes. */
.ui-group {
display: flex;
flex-direction: column;
gap: var(--s8);
max-width: 560px;
}
.ui-group > .ui-label {
margin: 0;
}
/* ── a surface ───────────────────────────────────────────────────────────── */
.ui-card {
padding: clamp(var(--s8), 1.4vw, var(--s9));
border: 1px solid var(--line);
border-radius: var(--r7);
background: var(--surface);
}
/* ── the surface a whole job sits on ─────────────────────────────────────── */
/* UI-14: `ui::overlay`. The lightbox is one of these too — it adds a stage
and a zoom, not a way of covering the page. Here in the tier and not in
any one application's sheet, because the components that wear it are the
tier's: until 2026-09-08 these rules lived in Platform's theme sheet,
which only the console loads, and the question `ui::confirm` asks stood
unstyled at the foot of the mailbox's document, off the screen — a press
that did nothing anybody could see (LLM-32). */
.overlay {
position: fixed; inset: 0; z-index: 110;
background: var(--surface);
overflow-y: auto;
overscroll-behavior: contain;
}
.overlay-head {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: 1rem;
padding: 1rem 1.5rem;
background: var(--surface); border-bottom: 1px solid var(--line);
}
.overlay-body { padding: 1.5rem; }
/* One scrollbar, one wheel: the page behind stays where it was. */
body.overlay-open { overflow: hidden; }
/* UI-22: the question a destructive press asks. A card over a dimmed page
rather than the whole surface — the page behind is the thing being decided
about, and covering it would take the answer away with it. */
.overlay.ask {
/* Over the drawer's 120 and the dock's 60: it is a question about whatever
is on screen, and one of the things it is asked about is a drawer being
closed. */
z-index: 130;
display: grid; place-items: center; padding: 1.5rem;
background: color-mix(in oklab, var(--ink) 55%, transparent);
}
.overlay.ask > .overlay-body {
width: min(28rem, 100%);
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: 0 12px 32px rgb(0 0 0 / .22);
}
.ask-says { margin-top: .5rem; font-size: .875rem; color: var(--ink3); }
.ask-acts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
/* ── the card a whole screen is filled in on ─────────────────────────────── */
/* `nowrap` is load-bearing: the moment a sheet gives this a height, a
wrapping column folds its tail off the right-hand edge. */
.ui-form {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: var(--s9);
margin: 0 auto;
padding: clamp(var(--s8), 1.4vw, var(--s9));
border: 1px solid var(--line);
border-radius: var(--r7);
background: var(--surface);
}
.ui-form-head {
display: flex;
align-items: center;
gap: var(--s6);
}
/* The heading takes the room and the way out is pushed to the far edge. */
.ui-form-head > .ui-h2 { flex: 1; min-width: 0; }
/* The press stands on a line of its own under a rule, with whatever the form
has to say about itself opposite it. */
.ui-form-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s6);
padding-top: var(--s8);
border-top: 1px solid var(--hair);
}
.ui-form-aside {
font-size: var(--t4);
color: var(--mute);
text-wrap: pretty;
}
/* Two or three fields that belong to one fact, sharing a line and going back
under each other where there is no room. */
.ui-field-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--s5);
}
/* `min-width: 0` is not decoration: without it one long unbreakable value —
a pasted URL, an IBAN — sets the field's floor and pushes its neighbour off
the row. Kodu's `.k-row` learned this the hard way and the tier inherits
the lesson. */
.ui-field-row > .ui-field { flex: 1 1 12rem; min-width: 0; }
/* ── headings, at the house sizes ────────────────────────────────────────── */
.ui-h1 {
margin: 0;
font-family: var(--serif);
font-size: var(--t8);
line-height: var(--lh8);
font-weight: 500;
color: var(--ink);
}
.ui-h2 {
margin: 0;
font-family: var(--serif);
font-size: var(--t7);
line-height: var(--lh7);
font-weight: 500;
color: var(--ink);
}
/* The arrangements (UIC-6, UI-18), on the house tokens and defining no colour
and no length of its own.
The frame fills the browser and does not scroll: `html` and `body` stay put
and each column scrolls itself. That is the one thing the mailbox, the
console and the portal already agreed on and each had written out
separately.
**The widths are the application's.** The mailbox wants 84px of rail and
296 of list, the console wants 56 and a fourth column for a section's
properties, the portal wants two columns and no list — so a frame wears the
application's own class beside `ui-frame` and the application's sheet writes
`grid-template-columns` on that, per `data-depth`. A tier that decided the
widths would be deciding what a screen is about. */
/* The page is the container (UIC-23): every question about width — an
application's own queries, the layer's `d-` twins — is asked of the
body's own width and not the window's, so a page narrowed by the dock
(UIC-13) is a phone to everything on it. */
body { container-type: inline-size; }
.ui-frame {
display: grid;
width: 100%;
height: 100dvh;
min-height: 0;
overflow: hidden;
position: relative;
background: var(--surface);
}
/* Every column is a flex column that can shrink: without the two `min-*`
zeroes a long word in one of them widens the track and pushes the others
off the screen, which is the bug every one of these three surfaces has had
at least once. */
.ui-col {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.ui-rail {
background: var(--rail);
border-right: 1px solid var(--line);
/* Visible, not hidden: a rail holds popovers that must be allowed out of
it, and it is narrow enough never to need to scroll sideways. */
overflow: visible;
}
.ui-list {
background: var(--surface);
border-right: 1px solid var(--line);
overflow-y: auto;
}
.ui-pane {
background: var(--surface);
overflow-y: auto;
}
/* The fourth column: what is chosen inside the pane, when that is a different
thing from what the pane is about. On the far side, so the reading goes
rail → list → the thing → the part of it. */
.ui-props {
background: var(--surface);
border-left: 1px solid var(--line);
overflow-y: auto;
}
/* The manual, inside the thing it documents.
Three applications drew this surface and named it three ways — `pb-doc-*`,
`k-doc*`, `cn-doc-*` — over one arrangement. Each rule below is the union of
the three, taking the mailbox's measure where they disagreed (UIC-8). What
is *not* here is where the surface sits in a given frame: the head's padding
and the body's measure are the application's, hung on its own class beside
the tier's. */
/* ── the head: what you are reading, and the books ───────────────────────── */
.ui-doc-head {
flex: none;
display: flex;
flex-direction: column;
gap: var(--s8);
padding: var(--s8) clamp(var(--s8), 3vw, var(--s11)) 0;
border-bottom: 1px solid var(--line);
}
.ui-doc-titlerow {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s9);
flex-wrap: wrap;
}
.ui-doc-titled {
display: flex;
align-items: baseline;
gap: var(--s7);
flex-wrap: wrap;
min-width: 0;
}
.ui-doc-title {
margin: 0;
font-family: var(--serif);
font-size: clamp(var(--t9), 3vw, var(--t10));
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
}
/* Where the file lives, printed as it is spelled: a path put through
`text-transform` is a path nobody can type. It stands beside the title,
because it is what the title is *of*. */
.ui-doc-where {
margin: 0;
font-family: var(--mono);
font-size: var(--t2);
letter-spacing: 0.05em;
color: var(--mute);
overflow-wrap: anywhere;
}
.ui-doc-acts {
display: flex;
align-items: center;
gap: var(--s4);
flex-wrap: wrap;
min-width: 0;
}
/* A book is a word with a line under it when it is the one you are reading —
no box, no tint. */
.ui-doc-tabs { display: flex; gap: clamp(var(--s7), 2vw, var(--s10)); flex-wrap: wrap; }
.ui-doc-tab {
padding: 0 0 var(--s6);
font-size: var(--t5);
color: var(--ink3);
white-space: nowrap;
box-shadow: inset 0 -2px 0 transparent;
}
.ui-doc-tab:hover { color: var(--ink); }
.ui-doc-tab.is-on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
/* ── the document, read two ways ─────────────────────────────────────────── */
.ui-doc-body { display: flex; flex-direction: column; }
.ui-doc-md, .ui-doc-raw { max-width: 880px; }
/* A class that sets `display` outranks the browser's own rule for `hidden`,
so everything here that is shut says so again. */
.ui-doc-raw[hidden], .ui-doc-md[hidden], .ui-doc-acts .ui-pill[hidden] { display: none; }
.ui-doc-raw {
margin: 0;
padding: var(--s9) var(--s10);
border: 1px solid var(--hair);
border-radius: var(--r4);
background: var(--mid);
font-family: var(--mono);
font-size: var(--t4);
line-height: 1.7;
color: var(--ink2);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ui-doc-md h1 {
margin: 0 0 var(--s7);
font-family: var(--serif);
font-size: var(--t9);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
}
.ui-doc-md h2 {
margin: var(--s11) 0 var(--s6);
font-family: var(--serif);
font-size: var(--t8);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
}
.ui-doc-md h3 {
margin: var(--s9) 0 var(--s5);
font-family: var(--serif);
font-size: var(--t6);
font-weight: 500;
color: var(--ink);
}
.ui-doc-md p { margin: 0 0 var(--s6); font-size: var(--t5); line-height: 1.65; color: var(--ink3); }
.ui-doc-md ul, .ui-doc-md ol { margin: 0 0 var(--s7); padding-left: var(--s9); }
.ui-doc-md li { margin-bottom: var(--s3); font-size: var(--t5); line-height: 1.65; color: var(--ink3); }
.ui-doc-md strong { color: var(--ink2); font-weight: 600; }
.ui-doc-md a { color: var(--accent); }
.ui-doc-md a:hover { text-decoration: underline; }
.ui-doc-md hr { margin: var(--s9) 0; border: 0; border-top: 1px solid var(--hair); }
.ui-doc-md > :last-child { margin-bottom: 0; }
.ui-doc-md blockquote {
margin: 0 0 var(--s7);
padding: var(--s6) var(--s8);
border-left: 2px solid var(--accent-line);
background: var(--wash);
font-size: var(--t5);
line-height: 1.65;
color: var(--ink2);
}
.ui-doc-md .code, .ui-doc-md code {
padding: var(--s1) var(--s2);
border-radius: var(--r2);
background: var(--hover);
font-family: var(--mono);
font-size: var(--t3);
color: var(--ink2);
}
.ui-doc-md .md-code {
margin: 0 0 var(--s8);
padding: var(--s6) var(--s8);
border: 1px solid var(--hair);
border-radius: var(--r4);
background: var(--mid);
font-family: var(--mono);
font-size: var(--t3);
line-height: 1.75;
color: var(--doc-code);
overflow-x: auto;
}
.ui-doc-md .md-code code { padding: 0; background: none; font-size: inherit; }
/* A two-column reference table is rows of key and description, baseline
aligned, the mono column at a fixed minimum width. A wider one stays a
table. The width is on the element because the Markdown reader is what
knows it, and the sheet is what draws it. */
.ui-doc-md .md-table {
width: 100%;
margin: 0 0 var(--s8);
border: 1px solid var(--hair);
border-radius: var(--r4);
border-collapse: collapse;
overflow: hidden;
text-align: left;
}
.ui-doc-md .md-table th, .ui-doc-md .md-table td {
padding: var(--s5) var(--s7);
border-bottom: 1px solid var(--hair);
vertical-align: baseline;
font-size: var(--t4);
line-height: 1.5;
color: var(--ink3);
}
.ui-doc-md .md-table th {
font-family: var(--mono);
font-size: var(--t1);
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mute);
}
.ui-doc-md .md-table tr:last-child td { border-bottom: 0; }
.ui-doc-md .md-table[data-cols="2"],
.ui-doc-md .md-table[data-cols="2"] thead,
.ui-doc-md .md-table[data-cols="2"] tbody { display: block; }
.ui-doc-md .md-table[data-cols="2"] tr {
display: flex;
align-items: baseline;
gap: var(--s8);
padding: var(--s5) var(--s7);
border-bottom: 1px solid var(--hair);
}
.ui-doc-md .md-table[data-cols="2"] tr:last-child { border-bottom: 0; }
.ui-doc-md .md-table[data-cols="2"] th,
.ui-doc-md .md-table[data-cols="2"] td { padding: 0; border-bottom: 0; }
.ui-doc-md .md-table[data-cols="2"] th:first-child,
.ui-doc-md .md-table[data-cols="2"] td:first-child { flex: none; min-width: 246px; }
.ui-doc-md .md-table[data-cols="2"] td:first-child {
font-family: var(--mono);
font-size: var(--t3);
color: var(--doc-key);
}
.ui-doc-md .md-table[data-cols="2"] th:last-child,
.ui-doc-md .md-table[data-cols="2"] td:last-child { flex: 1; min-width: 0; }
/* ── the pages of a book ─────────────────────────────────────────────────── */
.ui-doc-pills {
display: flex;
align-items: center;
gap: var(--s4);
flex-wrap: wrap;
margin-bottom: var(--s7);
}
/* A page is a place, not a link: outlined until it is the open one. */
.ui-doc-pill {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 var(--s6);
border: 1px solid var(--line);
border-radius: var(--r-pill);
font-size: var(--t4);
color: var(--ink3);
white-space: nowrap;
}
.ui-doc-pill:hover { border-color: var(--accent); color: var(--accent); }
.ui-doc-pill.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.ui-doc-section {
margin: var(--s4) 0 var(--s8);
padding-bottom: var(--s3);
border-bottom: 1px solid var(--hair);
font-family: var(--mono);
font-size: var(--t2);
letter-spacing: 0.12em;
color: var(--mute);
}
/* ── the Test panel ──────────────────────────────────────────────────────── */
.ui-doc-test { max-width: 880px; margin-bottom: var(--s10); }
.ui-doc-strip {
height: 36px;
padding: 0 var(--s8);
border: 1px dashed var(--line2);
border-radius: var(--r-pill);
background: var(--surface);
display: inline-flex;
align-items: center;
gap: var(--s4);
align-self: flex-start;
cursor: pointer;
color: var(--ink3);
font-family: var(--sans);
font-size: var(--t4);
}
.ui-doc-strip:hover { border-color: var(--accent); color: var(--accent); }
.ui-doc-strip[hidden], .ui-doc-card[hidden], .ui-doc-x-body[hidden] { display: none; }
.ui-doc-card {
border: 1px solid var(--line);
border-radius: var(--r6);
background: var(--surface);
box-shadow: var(--card);
display: flex;
flex-direction: column;
overflow: hidden;
}
.ui-doc-card-head {
flex: none;
padding: var(--s5) var(--s6) var(--s5) var(--s8);
border-bottom: 1px solid var(--hair);
display: flex;
align-items: center;
gap: var(--s6);
flex-wrap: wrap;
}
.ui-doc-card-head p {
margin: 0;
flex: 1;
min-width: 0;
font-size: var(--t4);
line-height: 1.45;
color: var(--ink3);
}
.ui-doc-card-body { display: flex; gap: var(--s9); padding: var(--s8); flex-wrap: wrap; }
.ui-doc-ask {
flex: none;
width: 320px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: var(--s7);
}
.ui-doc-said { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--s3); }
.ui-doc-field { display: flex; flex-direction: column; gap: var(--s3); }
.ui-doc-in {
width: 100%;
height: 36px;
padding: 0 var(--s5);
border: 1px solid var(--line2);
border-radius: var(--r4);
background: var(--surface);
color: var(--ink);
font-family: var(--mono);
font-size: var(--t4);
}
.ui-doc-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea.ui-doc-in { height: auto; padding: var(--s5); line-height: 1.6; resize: vertical; }
/* The label a reference wears over a box: a word, in the mono face, quiet. */
.ui-doc-label {
font-family: var(--mono);
font-size: var(--t2);
letter-spacing: 0.08em;
color: var(--mute);
text-transform: uppercase;
}
.ui-doc-empty { margin: 0; padding: var(--s3) 0; font-size: var(--t4); color: var(--mute); }
/* ── one exchange: what was asked, and what came back ────────────────────── */
.ui-doc-xs { display: flex; flex-direction: column; gap: var(--s4); }
.ui-doc-x { border: 1px solid var(--hair); border-radius: var(--r4); overflow: hidden; }
.ui-doc-x-head {
width: 100%;
display: flex;
align-items: center;
gap: var(--s4);
padding: var(--s4) var(--s5);
border: 0;
background: var(--rail);
cursor: pointer;
text-align: left;
font-family: var(--sans);
}
.ui-doc-x-head:hover { background: var(--hover); }
.ui-doc-x-chev { font-family: var(--mono); font-size: var(--t2); color: var(--mute); }
.ui-doc-x-title {
font-family: var(--mono);
font-size: var(--t3);
color: var(--doc-key);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-doc-x-part { padding: var(--s4) var(--s5); border-top: 1px solid var(--hair); }
.ui-doc-x-part.is-in { background: var(--mid); }
.ui-doc-x-tag { font-family: var(--mono); font-size: var(--t1); letter-spacing: 0.1em; padding-bottom: var(--s2); }
.ui-doc-x-tag.is-out { color: var(--accent-down); }
.ui-doc-x-tag.is-in { color: var(--ok-ink); }
.ui-doc-x-text {
margin: 0;
font-family: var(--mono);
font-size: var(--t3);
line-height: 1.6;
color: var(--doc-code);
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 320px;
overflow: auto;
}
/* The one row the panel adds after a gated write: the way to the form,
offered rather than opened — a window after an await is a popup. */
.ui-doc-x-part .ui-doc-x-open { margin-top: var(--s1); }
/* ── on a phone ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* A reference row stacks: 246px of mono key beside a description on a 360px
screen leaves the description a column of single words. */
.ui-doc-md .md-table[data-cols="2"] tr { display: block; }
.ui-doc-md .md-table[data-cols="2"] th:first-child,
.ui-doc-md .md-table[data-cols="2"] td:first-child { min-width: 0; padding-bottom: var(--s2); }
/* A wider table is the one thing in the manual that cannot reflow, so it
scrolls inside itself rather than widening the page. */
.ui-doc-md .md-table { display: block; overflow-x: auto; }
.ui-doc-ask { width: 100%; }
/* A 28px pill and a 24px tab are a pointer's targets, not a finger's. The
tab keeps its underline at the bottom of the box, so the height it gains
goes above the word. */
.ui-doc-acts .ui-pill, .ui-doc-ask .ui-pill, .ui-doc-pill { min-height: 44px; }
.ui-doc-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
padding: var(--s6) var(--s2);
}
}
/* The dock (UIC-13, UIC-14): a surface that opens beside the page rather than
over it, on the house tokens and defining nothing of its own but its width.
On a desk the page moves aside and both are readable at once — which is the
point of asking something while looking at the thing you are asking about.
On a phone there is no beside, so it takes the screen.
Three shares, not open and shut (UIC-14): the page, half each, and the
whole screen. The whole contract with the page is one attribute on ``,
which carries which share it is. A surface's own sheet can join in —
narrowing a map, moving a sticky bar — by matching `[data-dock="half"]`
without knowing the dock's script exists. */
:root {
/* A knob, not a token: how wide the dock is at the share it is on, which a
surface may turn down. The script writes this one as pixels when the
reader has dragged the boundary (UIC-15). */
--ui-dock-w: 0px;
/* Neither side goes below this. A column narrower than this is one nobody
reads — the drag stops here rather than squeezing a half out of use, and
a window with no room for two of them is not draggable at all. */
--ui-dock-min: 420px;
}
/* Beside the page the dock opens at the floor — a column, not half the
window — and the reader drags it wider from there (UIC-15); a dragged
width is written over this one as pixels. Full is the screen. */
[data-dock="half"] { --ui-dock-w: var(--ui-dock-min); }
[data-dock="full"] { --ui-dock-w: 100%; }
/* ── the handle on the rim the panel comes out of ────────────────────────── */
/* A tab against the right edge, not a button floating in the corner: an arrow
pointing the way the panel will travel and the two letters saying what is
behind it. Small and quiet — everything it covers is something somebody
came for. It sits below the header band every surface keeps its own face
in, which is the knob a surface turns if its own is taller. */
.ui-dock-handle {
position: fixed;
top: var(--ui-dock-handle-top, 76px);
right: 0;
z-index: 61;
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: var(--s3) var(--s4) var(--s3) var(--s3);
border: 1px solid var(--line);
border-right: 0;
border-radius: var(--r4) 0 0 var(--r4);
background: var(--surface);
color: var(--mute);
font-family: var(--mono);
font-size: var(--t2);
font-weight: 600;
letter-spacing: .06em;
cursor: pointer;
box-shadow: var(--float);
transition: color .2s, background .2s, padding-right .2s;
}
.ui-dock-handle:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
padding-right: var(--s6);
}
.ui-dock-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-dock-handle[hidden] { display: none; }
.ui-dock-handle-arrow { flex: none; }
.ui-dock-handle-word { line-height: 1; }
/* ── and the same again as a row in the surface's own menu ───────────────── */
/* Nothing floats over the page. The dock is reached from wherever that
surface already keeps "Assistant", so the control sits among the menu's
other rows and inherits their shape: the class the surface passes does the
dressing, and these rules only lay the row out and place the share on the
right of it, where a value belongs in a list of settings. */
.ui-dock-toggle {
display: flex;
align-items: center;
gap: var(--s5);
width: 100%;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.ui-dock-toggle-word { flex: 1; min-width: 0; }
/* ── the panel ───────────────────────────────────────────────────────────── */
.ui-dock {
position: fixed;
top: 0;
right: 0;
z-index: 60;
width: var(--ui-dock-w);
height: 100dvh;
display: flex;
flex-direction: column;
min-height: 0;
background: var(--surface);
/* The hairline is the edge; no shadow (2026-09-07: *"dont use drop shadow
for the assistant"*) — the dock is a column beside the page, not a
sheet lying on it. */
border-left: 1px solid var(--line);
}
/* Only once the share has settled, and never under a hand (UIC-15): a page
that draws itself already open would otherwise slide out on every
navigation, and an animated width chases a dragging pointer rather than
following it. */
[data-dock-ready]:not([data-dock-drag]) .ui-dock {
transition: width .28s cubic-bezier(.4, 0, .2, 1);
}
/* ── the boundary, dragged ──────────────────────────────────────────────── */
/* The line itself, on the panel's own edge: a hit area wide enough for a
hand, drawn as nothing until it is reached for. The two arrows in the head
move the same boundary in steps; this is it dragged. */
.ui-dock-grip {
position: absolute;
top: 0;
/* Twelve pixels, half of them over the page: a boundary somebody has to
aim at is one they miss, and a hand is not a pixel. */
left: -6px;
width: 12px;
height: 100%;
z-index: 1;
cursor: col-resize;
touch-action: none;
background: none;
}
.ui-dock-grip:hover, .ui-dock-grip:focus-visible {
background: var(--accent);
outline: none;
}
/* Nothing to drag when the panel is the screen, or when the screen has no
room for two readable halves. */
[data-dock="full"] .ui-dock-grip { display: none; }
@media (max-width: 839px) {
.ui-dock-grip { display: none; }
}
/* A shut dock is shut. `display: flex` above is an author rule and the
browser's own `[hidden] { display: none }` is not, so without this line the
panel stays on the screen with the attribute set — covering the page it is
supposed to sit beside. */
.ui-dock[hidden] { display: none; }
.ui-dock-head {
flex: none;
display: flex;
align-items: flex-start;
gap: var(--s5);
padding: var(--s8) var(--s8) var(--s6);
border-bottom: 1px solid var(--hair);
}
.ui-dock-titled { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
/* The name, and whatever small thing the filling keeps beside it. A row, so
the two sit on one line; the name may shrink and the small thing may not,
because a picker that has lost its own width is one nobody can read. */
.ui-dock-name { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.ui-dock-title { margin: 0; font-size: var(--t6); font-weight: 600; color: var(--ink); }
.ui-dock-said { margin: 0; font-size: var(--t4); line-height: var(--lh4); color: var(--mute); }
/* The boundary, with a hand on each side of it. Two small arrows, together,
so the pair reads as one control with two directions rather than as two
unrelated buttons that happen to sit next to each other. */
.ui-dock-edge { flex: none; display: flex; align-items: center; gap: var(--s1); }
/* The two presses in the corner (UIC-21): the whole screen, and shut. The
first is a switch and shows it — pressed, it is the way back beside the
page. */
.ui-dock-full,
.ui-dock-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--s11);
height: var(--s11);
border: 0;
border-radius: var(--r3);
background: none;
color: var(--mute);
cursor: pointer;
}
.ui-dock-full svg, .ui-dock-close svg { width: 16px; height: 16px; }
.ui-dock-full:hover,
.ui-dock-close:hover { background: var(--hover); color: var(--ink); }
.ui-dock-full[aria-pressed="true"] { background: var(--hover); color: var(--ink); }
/* A press the filling keeps beside its own name wears the head's manner,
like the two in the corner (2026-09-09): their size, no ring and no ground
until the hand is on it, and centred on the name rather than hung from
its baseline — a ringed circle beside a title read as a badge, not as a
press. */
.ui-dock-name .ui-round {
--ui-round-size: var(--s11);
align-self: center;
border-color: transparent;
background: none;
color: var(--mute);
box-shadow: none;
}
.ui-dock-name .ui-round:hover,
.ui-dock-name .ui-round:focus-visible {
border-color: transparent;
background: var(--hover);
color: var(--ink);
box-shadow: none;
}
/* ── what was said before ────────────────────────────────────────────────── */
/* Top left, where a list of what there is belongs — the same corner the
console, the mailbox and the portal all keep their rail in. */
.ui-dock-past-open {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--s11);
height: var(--s11);
margin-top: calc(var(--s1) * -1);
border: 0;
border-radius: var(--r3);
background: none;
color: var(--mute);
cursor: pointer;
}
.ui-dock-past-open:hover { background: var(--hover); color: var(--ink); }
.ui-dock-past-open[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
/* The filling's own press beside it (UIC-21): the same quiet square, so the
corner reads as one row of two — the list, and a fresh one. */
.ui-dock-fresh {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--s11);
height: var(--s11);
margin-top: calc(var(--s1) * -1);
border: 0;
border-radius: var(--r3);
background: none;
color: var(--mute);
cursor: pointer;
}
.ui-dock-fresh:hover { background: var(--hover); color: var(--ink); }
.ui-dock-fresh .icon { width: var(--s5); height: var(--s5); }
/* Bounded, and the conversation keeps the rest: a list that pushed the
composer off the bottom is one nobody opens twice. */
.ui-dock-past {
flex: none;
max-height: 50dvh;
overflow-y: auto;
padding: var(--s5) var(--s8) var(--s6);
background: var(--page);
border-bottom: 1px solid var(--line);
}
.ui-dock-past[hidden] { display: none; }
.ui-dock-past-head {
margin: 0 0 var(--s4);
font-size: var(--t3);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--faint);
}
.ui-dock-past-body { display: flex; flex-direction: column; gap: var(--s1); }
.ui-dock-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s8); }
.ui-dock-foot { flex: none; padding: var(--s6) var(--s8) var(--s8); border-top: 1px solid var(--hair); }
/* ── the page moves aside ────────────────────────────────────────────────── */
/* On the padding rather than on a transform: a transform would move the page
without resizing it, so a column that scrolls would keep the width it had
and hide its right-hand edge under the dock. The frame is `width: 100%`, so
padding on the body is what narrows it.
Nothing is done to the body while the dock is shut, and that is deliberate:
a `scrollbar-gutter` here would have been a quiet fifteen pixels off the
width of every page of every surface, dock or no dock, which is the sort of
thing a shared sheet must not do. */
[data-dock="half"] body { padding-right: var(--ui-dock-w); }
/* At full there is nothing to narrow: padding the body by its own width would
collapse the page rather than move it, so the panel simply covers it and
the page underneath stops scrolling. */
[data-dock="full"] body { overflow: hidden; }
/* Armed one frame after the dock settles, and dropped while the boundary is
under a hand: a page that arrives already narrowed has not *moved*, and
animating it on arrival is the twitch on every navigation and every redraw
(UIC-15). */
@media (prefers-reduced-motion: no-preference) {
[data-dock-ready]:not([data-dock-drag]) body {
transition: padding-right .28s cubic-bezier(.4, 0, .2, 1);
}
}
/* ── a phone has no beside ───────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Both open shares are the screen: half of a phone is not a column anybody
can read. */
[data-dock="half"] { --ui-dock-w: 100%; }
.ui-dock { border-left: 0; }
/* Nothing moves: the dock is the screen, and padding the body would leave
the page scrolled sideways underneath it. */
[data-dock="half"] body { padding-right: 0; overflow: hidden; }
}
/* ── the dock as the page (UIC-22) ───────────────────────────────────────── */
/* Where the dock *is* the page (`ai.`) it stands in the flow instead of
fixed beside it: nothing to move aside, no share to walk. The head, the
fold, the body and the foot are the same four things, laid out as columns
where the window has room — the fold on the left as the list of what there
is, the foot on the right as what the assistant can reach — and stacked on
a phone, the fold covering the conversation when it is asked for, as it
does in the panel. The page hands it the height it has to fill. */
[data-dock="page"] body { padding-right: 0; }
.ui-dock.is-page {
position: relative;
top: auto;
right: auto;
z-index: auto;
width: 100%;
height: 100%;
min-height: 0;
border-left: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas: "head" "body" "foot";
}
.ui-dock.is-page > .ui-dock-head { grid-area: head; }
.ui-dock.is-page > .ui-dock-body { grid-area: body; }
.ui-dock.is-page > .ui-dock-foot { grid-area: foot; }
/* The fold covers the conversation from the head down until a row is chosen
— the same cover it is in the panel, drawn over the body's area. */
.ui-dock.is-page > .ui-dock-past {
grid-area: body;
z-index: 2;
align-self: start;
max-height: 100%;
border-bottom: 1px solid var(--line);
}
@media (min-width: 840px) {
/* Two columns: the fold stands as the list on the left, always, and the
press that opened it as a cover is put away. A dock with nothing behind
it keeps the one column. */
.ui-dock.is-page:has(> .ui-dock-past) {
grid-template-columns: 280px minmax(0, 1fr);
grid-template-areas: "past head" "past body" "past foot";
}
.ui-dock.is-page > .ui-dock-past,
.ui-dock.is-page > .ui-dock-past[hidden] {
display: block;
grid-area: past;
z-index: auto;
align-self: stretch;
max-height: none;
overflow-y: auto;
border-bottom: 0;
border-right: 1px solid var(--line);
}
.ui-dock.is-page > .ui-dock-head > .ui-dock-past-open { display: none; }
}
@media (min-width: 1200px) {
/* Three: and the foot — what the assistant can reach — as a column on the
right, beside the conversation rather than under it. */
.ui-dock.is-page {
grid-template-columns: minmax(0, 1fr) 320px;
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas: "head foot" "body foot";
}
.ui-dock.is-page:has(> .ui-dock-past) {
grid-template-columns: 280px minmax(0, 1fr) 320px;
grid-template-areas: "past head foot" "past body foot";
}
.ui-dock.is-page > .ui-dock-foot {
border-top: 0;
border-left: 1px solid var(--line);
overflow-y: auto;
}
}
/* The gallery (UIC-20, out of KODU-69): one strip that snaps a picture at a
time, the arrows and the count over it, the thumbnails and the captions
under it, and the same strip filling the screen in a