/* Graphite theme (TODO F-5) — Windows 2000's layout and mechanics in neutral greys (js/theme.js). Every rule is scoped
   to <html data-theme="graphite">; win2k (css/tokens.css) stays the base, so what this file does not set is win2k's.
   Flat caption, controls set apart from the surface they sit on — darker in light, lighter in dark (user, 2026-10-09) —
   control parts (buttons, caption, task and scroll bar buttons, headers) with a flat 1px edge, frames with 2px; 3D edges
   at half win2k's distance from the surface
   (ButtonHilight +43 → +21, ButtonShadow −84 → −42, DkShadow −148 → −74; still 2px — the layout does not change).
   Palettes chosen by the user on 2026-10-09: light "Jasny neutralny" (B), dark "Grafit niebieskawy" (C). */

/* Light — "Jasny neutralny": a light neutral surface with darker controls, near-black caption, blue accent. */
:root[data-theme="graphite"] {
  --sys-btn-face: #E1E1E1;               /* 3D Objects: the surface */
  --color-surface: #E1E1E1;
  --color-control-face: #D2D2D2;         /* buttons a step darker than the surface */
  --sys-btn-hilight: #F6F6F6;
  --sys-btn-light: #E1E1E1;             /* 3D Light = the surface (frames, client edges); on a button a faint inner light */
  --sys-btn-shadow: #B7B7B7;
  --sys-btn-dk-shadow: #979797;
  --sys-scrollbar: #E1E1E1;
  --sys-menu: #E1E1E1;
  --sys-active-border: #E1E1E1;
  --sys-inactive-border: #E1E1E1;
  --sys-background: #5A646E;
  --sys-app-workspace: #9A9A9A;
  /* Flat caption: both ends one colour (js/wm.js paints from --caption-left/right-color). */
  --sys-active-title: #2B2B2B;
  --sys-gradient-active-title: #2B2B2B;
  --sys-inactive-title: #B4B4B4;
  --sys-gradient-inactive-title: #B4B4B4;
  --sys-inactive-title-text: #F2F2F2;
  --sys-hilight: #2F6DB5;
  --sys-hot-tracking: #2F6DB5;
  --sys-info-window: #F7F7F7;
  /* UI text in SF Pro Text 11px instead of the pixel Tahoma / MS Sans Serif — bold as Semibold (user, 2026-10-09: tested
     against Tahoma — 11px keeps win2k's widths, 12px overflowed); win2k's 13px line, so the layout stays. */
  --font-family-ui: "Graphite SF Text", "W2K Tahoma";
  --font-family-dialog: "Graphite SF Text", "W2K MS Sans Serif";
  /* SF Pro Text runs ~8% wider than Tahoma: the fixed-width Start menu gets 9px more, so "Windows Update" (88px) fits. */
  --metric-startmenu-text-max: 90px;
  --metric-startmenu-width: 185px;
  /* Window titles in SF Pro Display Bold 11px (user, 2026-10-09; 11px instead of 12px — user, 2026-10-10; font:
     assets/SOURCES.md), on win2k's 13px line. */
  --font-caption: 700 11px / var(--line-height-ui) "SF Pro Display", var(--font-family-ui);
  --metric-caption-icon-left: 1px;   /* the caption icon 1px from the left as from the top and bottom (user, 2026-10-10) */
  /* Control parts draw a flat 1px edge, as Business Manager's menu-band hover (user, 2026-10-09); frames keep 2px. */
  --edge-control: inset -1px -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight);
  /* Window frames: a 1px edge in place of the 2px raised one — ButtonHilight top-left, ButtonDkShadow bottom-right
     against the desktop (user, 2026-10-09); the frame keeps its width. */
  --edge-window: inset -1px -1px var(--sys-btn-dk-shadow), inset 1px 1px var(--sys-btn-hilight);
  /* The sizable frame 3px (user, 2026-10-10): the 1px edge and 2px of face, as the dialog frame — the face between the
     edge and the client as wide as every other divider (2px), not 3. */
  --metric-frame-width: 3px;
  --metric-window-edge: 1px;   /* a maximized window shows its 2px of face round the client (user) */
  --edge-control-raised: inset -1px -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight);
  /* Push buttons (user, 2026-10-09): every one framed — a 1px DkShadow line round the flat edge; the default (and the
     focused) one stands out with a much darker frame; pressed, the frame stays and a ButtonShadow line sinks inside it
     at the top and left (a light bottom-right line had made it look 1px larger). */
  --edge-push: inset 0 0 0 1px var(--sys-btn-dk-shadow), inset -2px -2px var(--sys-btn-shadow), inset 2px 2px var(--sys-btn-hilight);
  --edge-control-default: inset 0 0 0 1px var(--color-button-default-frame), inset -2px -2px var(--sys-btn-shadow), inset 2px 2px var(--sys-btn-hilight);
  --edge-control-pressed: inset 0 0 0 1px var(--sys-btn-dk-shadow), inset 2px 2px var(--sys-btn-shadow);
  --color-button-default-frame: #3C3C3C;
  /* Pressed Start and task buttons: the raised edge reversed — ButtonShadow top-left, ButtonHilight bottom-right (user). */
  --edge-control-sunken: inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow);
  --edge-control-filler: inset 0 -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight);
  /* Client edges — edits, lists, combo boxes, list and tree views, check boxes, app client areas: 1px sunken instead of
     win2k's 2px (user, 2026-10-09); their padding stays, so the content keeps its place. */
  --edge-sunken: inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow);
  --metric-drop-button-grow: 1px;   /* drop buttons fill the field right inside its 1px edge (user) */
  --metric-tree-inset: 2px;   /* trees' items 2px inside the client edge, as in the side panes (user, 2026-10-10) */
  --metric-client-edge: 1px;   /* scroll areas (trees, list boxes, list views, grids, multi-line edits) pad by the 1px edge, so
                                  their bars and headers sit right inside it (user) */
  --edge-control-task-checked: inset -1px -1px var(--sys-btn-hilight), inset 1px 1px var(--sys-btn-shadow);   /* no Hilight row */
  --inset-task-checked: 1px;
  /* Status-bar text 3px clear of the panel's 1px edge (user, 2026-10-10: the texts sat too close to the left edge);
     win2k: 2px from the panel's side (measured). Panel icons move with it. */
  --metric-statusbar-text-left: 4px;
}

/* Dark — "Grafit niebieskawy": blue-grey slate, teal accent. */
:root[data-theme="graphite"][data-variant="dark"] {
  color-scheme: dark;
  --sys-btn-face: #343A40;
  --color-surface: #343A40;
  --color-control-face: #424A52;
  --sys-btn-hilight: #4E565E;
  --sys-btn-light: #424A52;
  --sys-btn-shadow: #23282D;
  --sys-btn-dk-shadow: #181C20;
  --sys-scrollbar: #343A40;
  --sys-menu: #343A40;
  --sys-active-border: #343A40;
  --sys-inactive-border: #343A40;
  --sys-background: #1B2229;
  --sys-app-workspace: #2A3036;
  --sys-window: #22272C;
  --sys-window-frame: #0E0F10;
  --sys-window-text: #E8EAED;
  --sys-menu-text: #E8EAED;
  --sys-btn-text: #E8EAED;
  --sys-gray-text: #7C8288;
  --sys-active-title: #1F252B;
  --sys-gradient-active-title: #1F252B;
  --sys-inactive-title: #424A52;
  --sys-gradient-inactive-title: #424A52;
  --sys-inactive-title-text: #8C9298;
  --sys-hilight: #3C7F8F;
  --sys-hot-tracking: #6FB3C2;
  --sys-info-window: #424A52;
  --sys-info-text: #E8EAED;
  --color-focus-dot: #E8EAED;
  --color-tooltip-border: #0E0F10;
  --color-grid-line: #474F57;
  --color-button-default-frame: #646669;   /* the default button's frame: light on the dark surface, at half brightness (user) */
  /* Coloured text, lightened for the dark surface (user, 2026-10-09): blues (approved documents, links, unread counts)
     and reds (overdue, invalid entries). */
  --color-erp-approved: #8AB4F8;
  --color-link: #8AB4F8;
  --color-unread-count: #8AB4F8;
  --color-erp-overdue: #FF8A80;
  --color-input-invalid: #FF8A80;
}

/* Caption buttons 1px apart: with Graphite's flat 1px edges, minimize and maximize (adjacent in win2k) read as one
   (user, 2026-10-09). */
:root[data-theme="graphite"] .w2k-caption-button { margin-right: 1px; }

/* Popup menus: a flat 1px edge instead of win2k's 2px raised one (user, 2026-10-09); the frame's padding stays, so the
   items keep their places. Light: ButtonHilight top-left (continuing the pressed menu-bar item's bottom-right line),
   ButtonShadow bottom-right. Dark: ButtonHilight all round, as the shadow would melt into the windows behind. */
:root[data-theme="graphite"] .w2k-menu { box-shadow: inset -1px -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight); }
:root[data-theme="graphite"][data-variant="dark"] .w2k-menu { box-shadow: inset 0 0 0 1px var(--sys-btn-hilight); }

/* Start menu icons: Graphite's SVGs fill their 32px box edge to edge (win2k's art leaves a margin), so they are drawn
   smaller, centred in the 32px cell — the text keeps its place (user, 2026-10-09: 60–75% of the row height). */
:root[data-theme="graphite"] { --menu32-icon-size: 24px; }
:root[data-theme="graphite"] .w2k-menu[data-icons="32"] .w2k-menu__icon {
  width: var(--menu32-icon-size);
  height: var(--menu32-icon-size);
  top: calc((var(--item-h) - var(--menu32-icon-size)) / 2);
  left: calc(var(--metric-menu-icon-left) + (32px - var(--menu32-icon-size)) / 2);
}

/* Start button: the WebDesk logo for the Windows flag and the logo font for "Start" (user, 2026-10-09; files from
   sys-wd-core — assets/SOURCES.md). CSS only: `content` replaces the flag image the taskbar puts in. */
@font-face { font-family: "WebDesk Logo"; src: url("../../assets/fonts/logo-font.otf") format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-weight: 700; src: url("../../assets/fonts/SF-Pro-Display-Bold.otf") format("opentype"); }
@font-face { font-family: "Graphite SF Text"; font-weight: 400; src: url("../../assets/fonts/SF-Pro-Text-Regular.otf") format("opentype"); }
@font-face { font-family: "Graphite SF Text"; font-weight: 700; src: url("../../assets/fonts/SF-Pro-Text-Semibold.otf") format("opentype"); }
@font-face { font-family: "Graphite SF Mono"; font-weight: 400; src: url("../../assets/fonts/SF-Mono-Regular.otf") format("opentype"); }
@font-face { font-family: "Graphite SF Mono"; font-weight: 700; src: url("../../assets/fonts/SF-Mono-Semibold.otf") format("opentype"); }
:root[data-theme="graphite"] .w2k-start-button > img { content: url("../../assets/branding/webdesk-logo.svg"); image-rendering: auto; }
:root[data-theme="graphite"] .w2k-start-button > span { font-family: "WebDesk Logo", var(--font-family-ui); font-weight: normal; font-style: normal; }

/* Explorer's Web view (user, 2026-10-10; TODO X-wdzx): the folder's title in SF Pro Display Bold instead of win2k's
   Tahoma Bold 17 bitmap; a folder with an illustration (assets/illu, mapped in js/iconsets/graphite.js) shows it 128px
   (user, 2026-10-10: twice the first 64px) at the top left in place of the banner bitmap, the title and rule under it,
   and the rest of the pane 90px lower; Search Results' band above the list grows as much. */
:root[data-theme="graphite"] {
  --webview-rule-display: none;   /* the blue rule under the title: a relic (user, 2026-10-10) */
  --webview-title-font: 700 18px / 22px "SF Pro Display", var(--font-family-ui);
  --webview-art-left: 8px;
  --webview-art-top: 6px;
  --webview-art-shift: 90px;
  /* The pane keeps its 200px whatever the window's width (user, 2026-10-10): the list narrows, not the illustration;
     an Explorer bar's splitter stops 100px of view short of it. */
  --webview-width: 200px;
  --webview-min-width: 202px;   /* the pane and the view's client edges */
}

/* Start-menu banner: "WebDesk 3000 Professional" in SF Pro Display on deep red to black (user, 2026-10-09) in place of
   "Windows 2000 Professional" — built by tools/build-graphite-banner.py; bottom-aligned on the black column as win2k's. */
:root[data-theme="graphite"] .w2k-menu__banner { background-image: url("../../assets/branding/graphite-start-banner.svg"); }

/* Table headings (user, 2026-10-09 — closer to the HIG): every heading bold from the start — list-view header items and
   the grid's column and row headings; the selection's headings (the grid's active cell) shown by a darker fill, not by
   turning bold (win2k / Excel 2000 bolds them). */
:root[data-theme="graphite"] { --color-heading-selected: #BDBDBD; }
/* Dark: the other way round, as buttons stand out lighter there — every table heading (list-view and lookup headers,
   the grid's) darker than controls, the selection's light. */
:root[data-theme="graphite"][data-variant="dark"] { --color-heading: #2B3036; --color-heading-selected: #424A52; }
/* Dark: trees' dotted lines and +/− box frames in a mid grey — ButtonShadow (#23282D) vanished on Window (user, 2026-10-10). */
:root[data-theme="graphite"][data-variant="dark"] { --color-tree-lines: #5F666D; }
:root[data-theme="graphite"][data-variant="dark"] :is(.w2k-header, .w2k-grid__colhead, .w2k-grid__rowhead, .w2k-grid__corner) { background: var(--color-heading); }
:root[data-theme="graphite"] :is(.w2k-header__item, .w2k-grid__colhead, .w2k-grid__rowhead) { font-weight: 700; }
:root[data-theme="graphite"] :is(.w2k-grid__colhead, .w2k-grid__rowhead)[data-sel] { background: var(--color-heading-selected); }

/* Data in SF Mono (user, 2026-10-09): numbers, dates and identifiers — grid cells of number columns and columns marked
   `mono`, list-view and lookup columns marked `mono`, fields and date pickers marked data-mono (js/components; Business
   Manager marks its codes, document numbers, dates, amounts). win2k ignores the mark. */
:root[data-theme="graphite"] { --font-family-data: "Graphite SF Mono", "Graphite SF Text"; }
:root[data-theme="graphite"] :is([data-mono], .w2k-dtp[data-mono] [data-kind]) { font-family: var(--font-family-data); }


/* Flat toolbars' 20px icons smaller (user, 2026-10-10: the Streamline icons fill the whole 20px box and look clearly
   larger than win2k's bitmaps, which leave a margin). In a rebar the image box itself is 16px × --icon-scale (14px) — no taller
   than the menu band's text (user, 2026-10-11) — and the buttons 18px from
   2px down — as tall as the band's gripper and the menu band's items (user, 2026-10-11); elsewhere (Explorer's Search
   bar) the icon is drawn at 75% inside its 20px box. Small-bitmap, raised and labels-below toolbars keep theirs. */
:root[data-theme="graphite"] { --icon-scale: 0.875; }   /* every icon at 87.5% of its box: 16px icons 14px, rebar toolbars 14px (user, 2026-10-11) */
:root[data-theme="graphite"] .w2k-rebar { --metric-toolbar-image: calc(16px * var(--icon-scale)); --metric-toolbar-button-height: 18px; --toolbar-image-gap: 2px; }
:root[data-theme="graphite"] .w2k-rebar :is(.w2k-toolbar:not([data-size="small"]), .w2k-rebar__child) > .w2k-toolbar__button > img {
  /* centred in the 18px button (the button's 1px top padding counted), and aside so that an icon-only button stays square */
  width: var(--metric-toolbar-image);
  height: var(--metric-toolbar-image);
  margin: calc((var(--metric-toolbar-button-height) - var(--metric-toolbar-image)) / 2 - 1px) max(0px, (var(--metric-toolbar-button-height) - var(--metric-toolbar-image)) / 2 - var(--metric-toolbar-pad)) 0;
}
:root[data-theme="graphite"] .w2k-toolbar:not([data-size="small"], [data-style="raised"], [data-labels="below"], .w2k-rebar *) > .w2k-toolbar__button > img {
  box-sizing: border-box; padding: calc(var(--metric-toolbar-image) * (1 - var(--icon-scale)) / 2);
}

/* The tray's volume icon by level (data-volume, demo/desktop.js; user, 2026-10-09): Volume-Control Full / Medium / Low /
   Off for 67–100, 34–66, 1–33 and 0 or muted. */
:root[data-theme="graphite"] .w2k-tray__icon[data-volume] { image-rendering: auto; }
:root[data-theme="graphite"] .w2k-tray__icon[data-volume="max"] { content: url("../../assets/icons2/Volume-Control-Full.svg"); }
:root[data-theme="graphite"] .w2k-tray__icon[data-volume="mid"] { content: url("../../assets/icons2/Volume-Control-Medium.svg"); }
:root[data-theme="graphite"] .w2k-tray__icon[data-volume="low"] { content: url("../../assets/icons2/Volume-Control-Low.svg"); }
:root[data-theme="graphite"] .w2k-tray__icon[data-volume="off"] { content: url("../../assets/icons2/Volume-Control-Off.svg"); }

/* List-view sort indicator (user, 2026-10-09): Arrow-Rectangle-Up / -Down, 12px, in place of win2k's embossed pixel
   triangle after the text — ascending up, descending down. It sits at the far edge from the title: at the column's right
   end for a left-aligned (or centred) title, at its left end for a right-aligned one; the text keeps clear of it. */
:root[data-theme="graphite"] .w2k-header__item[data-sort] > .w2k-header__text::after { content: none; }
:root[data-theme="graphite"] .w2k-header__item[data-sort] { background: right 4px center / 12px no-repeat; padding-right: calc(4px + 12px + 4px); }
:root[data-theme="graphite"] .w2k-header__item[data-sort][data-align="right"] { background-position: left 4px center; padding-right: var(--metric-header-text-pad); padding-left: calc(4px + 12px + 4px); }
:root[data-theme="graphite"] .w2k-header__item[data-sort="asc"] { background-image: url("../../assets/icons2/Arrow-Rectangle-Up.svg"); }
:root[data-theme="graphite"] .w2k-header__item[data-sort="desc"] { background-image: url("../../assets/icons2/Arrow-Rectangle-Down.svg"); }

/* Side panes' close buttons (css/components/pane.css: Explorer's bars, Business Manager's Navigator, Outlook Express's
   panes): the caption's traced close cross (assets/graphite/menu-close.svg, user 2026-10-10), ~22% smaller than in the
   caption (its 13px cell at 9.4px), centred, in ButtonText; as a maximized MDI child's buttons, a raised 1px edge on
   hover, sunken and the cross +1,+1 while pressed. */
:root[data-theme="graphite"] .w2k-pane__close::before {
  --cell: 9.4px;
  left: calc((100% - var(--cell)) / 2);
  top: calc((100% - var(--cell)) / 2);
  width: var(--cell);
  height: var(--cell);
  background: var(--sys-btn-text);
  -webkit-mask: url("../../assets/graphite/menu-close.svg") center / 100% 100% no-repeat;
  mask: url("../../assets/graphite/menu-close.svg") center / 100% 100% no-repeat;
}
:root[data-theme="graphite"] .w2k-pane__close:hover { box-shadow: var(--edge-raised-inner); }
/* The hovered cross's edge as far from the band's right as from its bottom: 3px of background (#1, WebDesk owner
   2026-10-15) — no longer over the body's scroll bar, which looks different here anyway. */
:root[data-theme="graphite"] { --metric-pane-close-right: calc(var(--metric-client-edge) + 4px); }
:root[data-theme="graphite"] .w2k-pane__close:active { box-shadow: var(--edge-sunken-outer); }
:root[data-theme="graphite"] .w2k-pane__close:active::before { transform: translate(1px, 1px); }

/* Caption buttons as bare icons (user, 2026-10-09): no face, no edge — not even pressed; +1,+1 when pressed; a disabled
   button is dimmed. Minimize, maximize, restore and close are the system menu's vectors (user, 2026-10-10: Marlett
   "0", "1", "2", "r" traced, assets/graphite/menu-*.svg) as masks in the caption's text colour — the 13px cell drawn
   at the button's height − 2 (12px in the 16×14 button), 1px down, centred: the strokes land where win2k's 10 ppem
   glyphs stand. Help stays Question-Help-Circle (user). Also the MDI child's buttons in a menu bar (ButtonText). */
:root[data-theme="graphite"] .w2k-caption-button,
:root[data-theme="graphite"] .w2k-caption-button:is([data-pressed], .is-active) { background: transparent; box-shadow: none; }
:root[data-theme="graphite"] .w2k-caption-button:is([data-action="minimize"], [data-action="maximize"], [data-action="restore"], [data-action="close"])::before {
  content: "";
  --cell: calc(var(--metric-caption-button-height) - 2px);
  left: calc((100% - var(--cell)) / 2);
  top: 1px;
  width: var(--cell);
  height: var(--cell);
  background-color: var(--caption-text, var(--sys-title-text));
  -webkit-mask: var(--glyph-svg) center / 100% 100% no-repeat;
  mask: var(--glyph-svg) center / 100% 100% no-repeat;
}
:root[data-theme="graphite"] .w2k-mdi-buttons .w2k-caption-button::before { background-color: var(--sys-btn-text); }
/* A balloon's close button sits on the tip, not a caption: InfoText (user, 2026-10-10: white on the light tip). */
:root[data-theme="graphite"] .w2k-caption-button.w2k-balloon__close[data-action]::before { background-color: var(--sys-info-text); }
:root[data-theme="graphite"] .w2k-caption-button[data-action="minimize"] { --glyph-svg: url("../../assets/graphite/menu-minimize.svg"); }
:root[data-theme="graphite"] .w2k-caption-button[data-action="maximize"] { --glyph-svg: url("../../assets/graphite/menu-maximize.svg"); }
:root[data-theme="graphite"] .w2k-caption-button[data-action="restore"] { --glyph-svg: url("../../assets/graphite/menu-restore.svg"); }
:root[data-theme="graphite"] .w2k-caption-button[data-action="close"] { --glyph-svg: url("../../assets/graphite/menu-close.svg"); }
:root[data-theme="graphite"] .w2k-caption-button[data-action="help"]::before {
  content: "";
  left: 3px;
  top: 2px;
  width: 9px;
  height: 9px;
  background: url("../../assets/icons2/Question-Help-Circle.svg") center / contain no-repeat;
}
:root[data-theme="graphite"] .w2k-caption-button:disabled::before { opacity: 0.35; }
/* In a menu bar (a maximized MDI child's buttons) they hot-track as the rebar's buttons: a raised 1px edge on hover,
   sunken while pressed. */
:root[data-theme="graphite"] .w2k-mdi-buttons .w2k-caption-button:not(:disabled):hover { box-shadow: var(--edge-raised-inner); }
:root[data-theme="graphite"] .w2k-mdi-buttons .w2k-caption-button:not(:disabled):is([data-pressed], .is-active) { box-shadow: var(--edge-sunken-outer); }

/* Caption buttons evenly spaced — every one as far from the next as the close button stands from the rest (win2k's gap
   before close, plus the 1px each keeps on its right); in a menu bar no etched band line before a maximized MDI
   child's buttons (Business Manager — user, 2026-10-09). */
:root[data-theme="graphite"] .w2k-window__buttons > .w2k-caption-button + .w2k-caption-button { margin-left: var(--metric-caption-button-gap); }
:root[data-theme="graphite"] .w2k-rebar__band:has(> .w2k-mdi-buttons)::after { display: none; }

/* Triangle arrows as SVG (user, 2026-10-09): Arrow-Button-Down/Up/Left/Right-2 in place of the Marlett triangles — in
   the palette's accent (js/palettes.js --arrow-*, user 2026-10-10; the files as the fallback) — the
   drop buttons of combo boxes, date pickers, lookups and grid cells, the scroll-bar arrows, the spin buttons; centred,
   9px (6px in spin buttons), +1,+1 when pressed as before; dimmed where disabled or inactive. */
:root[data-theme="graphite"] :is(.w2k-combo__button, .w2k-grid__drop, .w2k-scrollbar__arrow, .w2k-updown__button)::before {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/icons2/Arrow-Button-Down-2.svg") center / 9px no-repeat;
  text-shadow: none;
}
:root[data-theme="graphite"] .w2k-updown__button::before { background-size: 6px; }
:root[data-theme="graphite"] .w2k-spin[data-inside] .w2k-updown__button { flex: 1; height: auto; }   /* the two buttons touch, no middle row (user, 2026-10-10) */
:root[data-theme="graphite"] .w2k-scrollbar[aria-orientation="vertical"] > [data-part="dec"]::before,
:root[data-theme="graphite"] .w2k-updown__button[data-dir="up"]::before { background-image: url("../../assets/icons2/Arrow-Button-Up-2.svg"); }
:root[data-theme="graphite"] .w2k-scrollbar[aria-orientation="horizontal"] > [data-part="dec"]::before { background-image: url("../../assets/icons2/Arrow-Button-Left-2.svg"); }
:root[data-theme="graphite"] .w2k-scrollbar[aria-orientation="horizontal"] > [data-part="inc"]::before { background-image: url("../../assets/icons2/Arrow-Button-Right-2.svg"); }
:root[data-theme="graphite"] :is(
  .w2k-scrollbar:is([data-inactive], [aria-disabled="true"]) > .w2k-scrollbar__arrow,
  .w2k-combo:is([aria-disabled="true"], :has(> .w2k-combo__edit:disabled)) .w2k-combo__button,
  .w2k-lookupedit[data-disabled] > .w2k-lookupedit__drop,
  .w2k-spin:has(> input:disabled) .w2k-updown__button
)::before { opacity: 0.4; }


/* Tabs (user, 2026-10-09 — option A): a flat 1px bevel as the buttons' — a tab's ButtonHilight top and left, ButtonShadow
   right, no chamfer; the page ButtonHilight top-left, ButtonShadow bottom-right — and inactive tabs darker, their
   titles dimmed. The geometry (the selected tab 2px larger, covering the page's top line) stays. */
:root[data-theme="graphite"] .w2k-tab::before { inset: 1px 0 0; box-shadow: inset 1px 0 var(--sys-btn-hilight), inset -1px 0 var(--sys-btn-shadow); }
:root[data-theme="graphite"] .w2k-tab::after { height: 1px; background: linear-gradient(var(--sys-btn-hilight), var(--sys-btn-hilight)) 1px 0 / calc(100% - 2px) 1px no-repeat; }
/* Inactive tabs: a darker surface (3% in light, 25% in dark) and their titles half way to it (user). */
:root[data-theme="graphite"] .w2k-tab:not([aria-selected="true"]):not(.is-active) { background: color-mix(in srgb, var(--color-surface) 97%, #000); color: color-mix(in srgb, var(--sys-btn-text) 50%, var(--color-surface)); }
:root[data-theme="graphite"][data-variant="dark"] .w2k-tab:not([aria-selected="true"]):not(.is-active) { background: color-mix(in srgb, var(--color-surface) 75%, #000); }
:root[data-theme="graphite"] .w2k-tabpanel { box-shadow: inset -1px -1px var(--sys-btn-shadow), inset 1px 1px var(--sys-btn-hilight); }

/* Menu texts and accelerators 1px lower (user, 2026-10-10): in SF they sat clearly above the icons, marks and arrows
   on both sides; only the text moves. */
/* The Start menu and its cascades (user, 2026-10-10): the win2k line tops (10px, 4px) put SF Pro low in the 32/20px
   items; the text is centred on the item instead (floor), as the 17px items already are. */
:root[data-theme="graphite"] .w2k-menu:is([data-icons="32"], [data-icons="16"]) { --text-top: round(down, (var(--item-h) - var(--line-height-ui)) / 2, 1px); }
:root[data-theme="graphite"] :is(.w2k-menu__text, .w2k-menu__accel) { top: calc(var(--text-top) + 1px); }

/* Submenu arrows (the Start menu's and every menu's): Navigation-Right-2 (user, 2026-10-10; was Arrow-Button-Right-2),
   as the chevron row's Navigation-Down-1, 10px centred in the arrow cell; dimmed on a disabled item. */
:root[data-theme="graphite"] .w2k-menu__arrow::before { content: ""; position: absolute; inset: 0; background: url("../../assets/icons2/Navigation-Right-2.svg") center / 10px no-repeat; }
:root[data-theme="graphite"] .w2k-menu__item[aria-disabled="true"] > .w2k-menu__arrow::before { opacity: 0.4; }

/* The last font / vector arrows (user, 2026-10-09): a personalized menu's chevron row shows Navigation-Down-1 (user,
   2026-10-10; 10px, centred) in place of the 5×7 glyph; toolbar drop-down parts (Back, Forward, Views …) Arrow-Button-Down-2 (7px,
   centred) in place of the 5×3 triangle, dimmed when disabled. */
:root[data-theme="graphite"] .w2k-menu__chevron-glyph { display: none; }
:root[data-theme="graphite"] .w2k-menu__chevron::after { content: ""; position: absolute; inset: 0; background: url("../../assets/icons2/Navigation-Down-1.svg") center / 10px no-repeat; pointer-events: none; }
:root[data-theme="graphite"] .w2k-toolbar__dropdown::before { left: 0; top: 0; width: 100%; height: 100%; clip-path: none; background: url("../../assets/icons2/Arrow-Button-Down-2.svg") center / 7px no-repeat; }
:root[data-theme="graphite"] .w2k-toolbar__dropdown:disabled::before { opacity: 0.4; filter: none; }

/* Single-line edits' text centred in the edit (user, 2026-10-10: "the text is clearly too high", plain when selected):
   win2k sets the line 1px below the inner edge, 1px above where a drop-down list's centred text sits — in SF the
   selection then nearly touches the top edge. Edits, editable combos, date pickers, IP addresses and lookups alike
   (multi-line edits keep theirs). */
:root[data-theme="graphite"] :is(input.w2k-edit, .w2k-combo, .w2k-dtp, .w2k-ipaddress) {
  --metric-edit-text-top: round(down, (var(--metric-edit-height) - 4px - var(--line-height-ui)) / 2, 1px);
}

/* Radio buttons drawn in CSS (user, 2026-10-10: no pixel glyphs in Graphite): a circle with the check box's edge — 1px,
   sunken (below, gui/lean#18) — on Window, a flat 5px WindowText dot when checked (user); smooth at every scale.
   Pressed and disabled: a ButtonFace interior, the dot in GrayText (as win2k). Flat (BS_FLAT): the 1px ring. */
:root[data-theme="graphite"] .w2k-radio__glyphs { border-radius: 50%; }
:root[data-theme="graphite"] .w2k-radio__glyphs > i { display: none; }
:root[data-theme="graphite"] .w2k-radio__glyphs::before { content: ""; position: absolute; border-radius: 50%; background: var(--sys-window); }
:root[data-theme="graphite"] .w2k-radio__glyphs::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--sys-window-text); visibility: hidden; }
:root[data-theme="graphite"] .w2k-radio > input:checked + .w2k-radio__glyphs::after { visibility: visible; }
:root[data-theme="graphite"] :is(.w2k-radio[data-pressed], .w2k-radio.is-active, .w2k-radio:has(> input:disabled)) .w2k-radio__glyphs::before { background: var(--color-surface); }
:root[data-theme="graphite"] .w2k-radio > input:disabled + .w2k-radio__glyphs::after { background: var(--sys-gray-text); }

/* The check box's mark as a vector (user, 2026-10-10): Marlett "a" traced — the same 7×7 band, its arms at 45°
   (assets/graphite/check-mark.svg) — as a mask in the mark's colour (currentColor: WindowText, GrayText disabled,
   ButtonShadow indeterminate), 3px inside the box as the glyph. Smooth at every scale. */
:root[data-theme="graphite"] .w2k-check__box::after {
  content: "";
  inset: 3px;
  background-color: currentColor;
  -webkit-mask: url("../../assets/graphite/check-mark.svg") center / 100% 100% no-repeat;
  mask: url("../../assets/graphite/check-mark.svg") center / 100% 100% no-repeat;
}

/* The menus' check mark likewise (user, 2026-10-10): the same SVG in the 13px glyph cell, 3px in, in the item's colour
   (MenuText, HilightText when hot, GrayText disabled — no emboss). */
/* The radio bullet (Marlett "h") as a 6px CSS dot, like the radio buttons'. */
:root[data-theme="graphite"] .w2k-menu__check:is([data-glyph="a"], [data-glyph="h"]) { width: 13px; height: 13px; font-size: 0; text-shadow: none; }
:root[data-theme="graphite"] .w2k-menu__check[data-glyph="h"]::before { content: ""; position: absolute; inset: 3px 4px 4px 3px; border-radius: 50%; background-color: currentColor; }
:root[data-theme="graphite"] .w2k-menu__check[data-glyph="a"]::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: currentColor;
  -webkit-mask: url("../../assets/graphite/check-mark.svg") center / 100% 100% no-repeat;
  mask: url("../../assets/graphite/check-mark.svg") center / 100% 100% no-repeat;
}

/* The system menu's glyphs as vectors (user, 2026-10-10): Marlett "2" Restore, "0" Minimize, "1" Maximize, "r" Close
   traced in their 13px cell (assets/graphite/menu-*.svg), masks in the item's colour like the check mark. */
:root[data-theme="graphite"] .w2k-menu__check:is([data-glyph="2"], [data-glyph="0"], [data-glyph="1"], [data-glyph="r"]) { width: 13px; height: 13px; font-size: 0; text-shadow: none; }
:root[data-theme="graphite"] .w2k-menu__check:is([data-glyph="2"], [data-glyph="0"], [data-glyph="1"], [data-glyph="r"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--glyph-svg) center / 100% 100% no-repeat;
  mask: var(--glyph-svg) center / 100% 100% no-repeat;
}
:root[data-theme="graphite"] .w2k-menu__check[data-glyph="2"] { --glyph-svg: url("../../assets/graphite/menu-restore.svg"); }
:root[data-theme="graphite"] .w2k-menu__check[data-glyph="0"] { --glyph-svg: url("../../assets/graphite/menu-minimize.svg"); }
:root[data-theme="graphite"] .w2k-menu__check[data-glyph="1"] { --glyph-svg: url("../../assets/graphite/menu-maximize.svg"); }
:root[data-theme="graphite"] .w2k-menu__check[data-glyph="r"] { --glyph-svg: url("../../assets/graphite/menu-close.svg"); }

/* Push-button labels centred in the button (user, 2026-10-10: "the texts sit higher, not in the middle"): win2k puts
   the line 4px below the top of a 23px button (5px over, 6px under the line box) — in SF it reads clearly high. The
   line's top at half the free height, rounded up (5px in a 23px button), whatever the button's height. */
:root[data-theme="graphite"] :is(.w2k-button__label, .w2k-pushlike > .w2k-check__text) { top: round(up, (100% - var(--line-height-ui)) / 2, 1px); }

/* Start and task buttons on the taskbar's own surface, not the push buttons' darker face (user, 2026-10-10: they are
   task buttons, not ordinary buttons — a test); their 1px edges and pressed states stay. */
:root[data-theme="graphite"] :is(.w2k-start-button, .w2k-task-button:not([data-flashing])) { background: var(--color-surface); }

/* A combo box in a rebar band (Explorer's / Internet Explorer's Address) 2px lower than the band, 1px clear of its top
   and bottom (user, 2026-10-10: it filled the whole band height; 2px was a bit much) — the row keeps its height. */
:root[data-theme="graphite"] .w2k-rebar__child > .w2k-combo { height: calc(var(--metric-rebar-band-height) - 2px); margin-top: 1px; }
:root[data-theme="graphite"] .w2k-rebar__child > .w2k-combo > .w2k-combo__field { top: 1px; bottom: 1px; }   /* right inside the 1px edge */
:root[data-theme="graphite"] .w2k-rebar__child > .w2k-combo > .w2k-combo__field > .w2k-combo__icon { top: round(down, (100% - 16px) / 2, 1px); }

/* Balloon tips drawn as a smooth vector outline in place of win2k's pixel map (user, 2026-10-10: "pixelated balloon
   frame"): same size, radius and stem (js/components/balloon.js balloonPath). */
:root[data-theme="graphite"] { --balloon-shape: vector; }

/* The month calendar's month buttons with the scroll bars' and drop-downs' arrows (user, 2026-10-10): Arrow-Button-Left/
   Right-2, 9px centred, in place of the border-drawn triangles. */
:root[data-theme="graphite"] .w2k-monthcal__arrow::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: url("../../assets/icons2/Arrow-Button-Left-2.svg") center / 9px no-repeat;
}
:root[data-theme="graphite"] .w2k-monthcal__arrow[data-dir="1"]::before { left: 0; border: 0; background-image: url("../../assets/icons2/Arrow-Button-Right-2.svg"); }
/* Bare arrows, no button face or edge — not even pressed (user, 2026-10-10: a lighter interface); the arrow still moves
   +1,+1 while pressed. */
:root[data-theme="graphite"] .w2k-monthcal__arrow,
:root[data-theme="graphite"] .w2k-monthcal__arrow[data-pressed] { background: transparent; box-shadow: none; }

/* A lookup edit's browse part ("..." — the Kontrahent field on the sales order): Navigation-Menu-1, 10px centred, in
   place of the dots (user, 2026-10-09), drawn as the drop button beside it (user, 2026-10-10). */
:root[data-theme="graphite"] .w2k-lookupedit__more::before { content: ""; top: 0; height: 100%; background: url("../../assets/icons2/Navigation-Menu-1.svg") center / 10px no-repeat; text-shadow: none; }
:root[data-theme="graphite"] .w2k-lookupedit[data-disabled] > .w2k-lookupedit__more::before { opacity: 0.4; }

/* A selected desktop icon: Hilight at 50% over the icon's own shape, in place of win2k's checkerboard (ILD_BLEND50) —
   a dither reads as noise on the smooth icons (user, 2026-10-09: the icons' "podcienie"). */
:root[data-theme="graphite"] .w2k-desktop__icon[aria-selected="true"]::after {
  opacity: 0.5;
  -webkit-mask: var(--icon-mask) 0 0 / 32px 32px no-repeat;
  mask: var(--icon-mask) 0 0 / 32px 32px no-repeat;
}

/* A push button's glyph as a theme icon (Sound Recorder's transport — js/iconsets/graphite.js), dimmed when disabled. */
:root[data-theme="graphite"] :is(.w2k-button:disabled, .w2k-button[aria-disabled="true"]) .w2k-button__glyph > img { opacity: 0.35; }
/* A view's title bar (Outlook Express's — user, 2026-10-10): the icon 1px lower, the title 3px further right on a 20px
   line. */
:root[data-theme="graphite"] { --viewbar-icon-top: 4px; --viewbar-text-left: 28px; --viewbar-line-height: 20px; }

/* Compact dialogs (user, 2026-10-10: Regional Options' first group shrunk, the second grown); check-box lists' rows 19px
   with the box and the text centred. */
:root[data-theme="graphite"] { --layout-compact: 1; --metric-checklist-item-height: 19px; --checklist-valign: 0.5; }

/* Command Prompt in SF Mono (user, 2026-10-10): js/components/console.js draws its text in --console-font, centred in the
   8×12 cells, at the screen's density, in place of win2k's 8×12 raster font. */
:root[data-theme="graphite"] .w2k-console { --console-font: 400 12px "Graphite SF Mono"; --console-inset: 4px; }   /* the text 4px off the walls (user) */
:root[data-theme="graphite"] .w2k-console-client { padding: var(--metric-client-edge); }   /* inside the 1px client edge (user, 2026-10-10) */
:root[data-theme="graphite"] .w2k-console__screen { image-rendering: auto; }

/* Push-like check boxes and radio buttons at rest take the flat 1px edge of a toggle, not a push button's frame; a
   disabled colour button's arrow is greyed, not embossed (user, 2026-10-10: Display › Appearance's Bold / Italic and
   colour buttons read as 2px, unlike the rest). */
:root[data-theme="graphite"] :is(.w2k-check, .w2k-radio).w2k-pushlike:not(:has(> input:checked), .is-active) { box-shadow: var(--edge-control); }
:root[data-theme="graphite"] .w2k-colorbutton::after { left: 32px; top: 0; width: 8px; height: 100%; background: url("../../assets/icons2/Arrow-Button-Down-2.svg") center / 7px no-repeat; }   /* the toolbars' drop-down arrow (user, 2026-10-11) */
:root[data-theme="graphite"] .w2k-colorbutton[aria-disabled="true"]::after { filter: none; opacity: 0.4; }


/* The time picker's up-down as tall as its field (user, 2026-10-10: it ended 2px short at the bottom; win2k's is 18px
   by a 20px field, measured). */
:root[data-theme="graphite"] .w2k-dtp__updown { height: var(--metric-dtp-time-height); }

/* Check boxes' and radio buttons' frames (gui/lean#18, user 2026-10-22): a plain box or radio is sunken again — the
   directional 1px edge, darker at the top and left, lighter at the bottom and right — in stronger colours than the
   client edge, so all four sides show on the Window field: --color-check-edge-shadow / --color-check-edge-light.
   Light: a grey darker than DkShadow above (ButtonShadow was faint), a grey between ButtonShadow and the surface below (ButtonHilight #F6F6F6 barely showed on white — why
   gui/win2k#3 had drawn a ring instead, 2026-10-15). Dark: the window frame's near-black above (ButtonShadow is the
   Window colour there — the ring of 2026-10-10), a grey lighter than ButtonHilight below. A list item's box (Regional
   Options, Display › Web) and a cell's box likewise, not win2k's 2px WindowText frame (user, 2026-10-10). Flat ones
   (BS_FLAT) keep the uniform 1px ring --color-check-ring, so plain and flat differ (TODO X-gsvb). */
:root[data-theme="graphite"] {
  --color-check-ring: var(--sys-btn-shadow);
  --color-check-edge-shadow: #8A8A8A;
  --color-check-edge-light: #C6C6C6;
}
:root[data-theme="graphite"][data-variant="dark"] {
  --color-check-ring: color-mix(in srgb, var(--sys-btn-hilight) 75%, var(--sys-window-text));
  --color-check-edge-shadow: var(--sys-window-frame);
  --color-check-edge-light: #66707A;
}
:root[data-theme="graphite"] .w2k-check__box { box-shadow: inset -1px -1px var(--color-check-edge-light), inset 1px 1px var(--color-check-edge-shadow); }
:root[data-theme="graphite"] .w2k-flat .w2k-check__box { box-shadow: inset 0 0 0 1px var(--color-check-ring); }
/* The radio's edge: the ring's background as a diagonal split — shadow upper left, light lower right — under the 1px
   inset Window disc (::before), so the circle reads sunken like the box; flat — one colour all round. */
:root[data-theme="graphite"] .w2k-radio__glyphs { background: linear-gradient(135deg, var(--color-check-edge-shadow) 50%, var(--color-check-edge-light) 50%); }
:root[data-theme="graphite"] .w2k-flat .w2k-radio__glyphs { background: var(--color-check-ring); }
:root[data-theme="graphite"] .w2k-radio__glyphs::before { inset: 1px; }

/* Disabled text and glyphs in dark (#5, TODO F-5): flat GrayText, no emboss — the emboss's ButtonShadow shape is
   almost the surface's colour there and its ButtonHilight copy barely shows (as Graphite's menus already do). Light
   keeps win2k's emboss. */
:root[data-theme="graphite"][data-variant="dark"] { --color-disabled-text: var(--sys-gray-text); --color-disabled-emboss: transparent; }