/* Theme "Record": digital paper (canvas boards 2 and 3; the older flat white look is archive/themes/skin-record-flat.css).
   Matte paper, one ink, no colour, shadow or glow; square boxes, hairlines; Geist for words, Space Grotesk for names, Geist Mono for figures.
   Bars are see-through ink, so layers stack by themselves: in light each layer in is darker on silver, in dark lighter on
   graphite. The same rules serve both modes: dark swaps only the palette below, where a solid tile (--solid) is a lifted graphite that keeps its words light.
   Sliders: Settings → Theme → Experimental → Paper (js/settings.js). Light is :root[data-skin] (0,2,0); dark adds the
   theme attribute (0,3,0), so it wins over light in dark mode. */
:root[data-skin="record"] {
  /* palette, light: board 2 */
  --ink: 12 14 16; --rev: #eceef0; --depth-base: .3;
  --gs0: #b8bbbf; --gs1: #b6babe; --gs2: #aeb5bb; --gs3: #9ca7af; --gs4: #8a959e; --ground-far: #56626c;
  --ink-3: #23272b;
  --grain-def: 100;   /* how much paper grain, before the sliders (css/grain.css) */
  --grain-per-mode: 1;   /* dark keeps its own grain sliders (js/settings.js) */

  /* the ground: the palette's stops under the Background sliders (js/settings.js). At their mid values this is the design exactly.
     --bg-flat mixes every stop toward the top, --bg-far runs them toward --ground-far (lower stops more), the tint lightens or darkens */
  --gs-top: color-mix(in srgb, var(--gs0), var(--bg-tint, #fff) var(--bg-tint-a, 0%));
  --ground-top: var(--gs-top);
  --gs-1: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--gs1), var(--ground-far) calc(var(--bg-far, 0%) * .1)), var(--gs0) var(--bg-flat, 0%)), var(--bg-tint, #fff) var(--bg-tint-a, 0%));
  --gs-2: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--gs2), var(--ground-far) calc(var(--bg-far, 0%) * .3)), var(--gs0) var(--bg-flat, 0%)), var(--bg-tint, #fff) var(--bg-tint-a, 0%));
  --gs-3: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--gs3), var(--ground-far) calc(var(--bg-far, 0%) * .7)), var(--gs0) var(--bg-flat, 0%)), var(--bg-tint, #fff) var(--bg-tint-a, 0%));
  --gs-4: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--gs4), var(--ground-far) var(--bg-far, 0%)), var(--gs0) var(--bg-flat, 0%)), var(--bg-tint, #fff) var(--bg-tint-a, 0%));
  /* the corner light: over the gradient, from the window's top left, lighter or darker (Corner lightness, Corner reach) */
  --ground-corner: radial-gradient(ellipse farthest-corner at 0 0, color-mix(in srgb, var(--bg-c-tint, #fff) var(--bg-c-a, 0%), transparent) 0%, color-mix(in srgb, var(--bg-c-tint, #fff) calc(var(--bg-c-a, 0%) * .4), transparent) calc(var(--bg-reach, 60%) * .45), transparent var(--bg-reach, 60%));
  --ground: var(--ground-corner), linear-gradient(var(--bg-angle, 180deg), var(--gs-top) 0%, var(--gs-1) calc(34% + var(--bg-turn, 0%)), var(--gs-2) calc(42% + var(--bg-turn, 0%)), var(--gs-3) calc(70% + var(--bg-turn, 0%)), var(--gs-4) 100%);

  /* every sheet is the ground's own colour, so panels follow the Background sliders too; a hairline parts them from the window */
  --sheet: var(--gs-top); --sheet-2: var(--gs-1);

  /* everything else follows from it */
  --g0: var(--sheet); --g1: var(--sheet-2); --g2: rgb(var(--ink) / .3); --g3: rgb(var(--ink) / .55); --g4: rgb(var(--ink));
  --depth: calc(var(--depth-base) * var(--depth-k, 1));
  --i-period: rgb(var(--ink) / calc(.1 * var(--depth))); --i-person: rgb(var(--ink) / calc(.17 * var(--depth)));
  --font-ui: "Geist", system-ui, sans-serif; --font-head: var(--font-ui); --font-caps: var(--font-ui);
  --font-date: "Geist Mono", ui-monospace, monospace; --font-num: var(--font-date);
  --font-name: "Space Grotesk", system-ui, sans-serif; --font-title: var(--font-name);
  --accent-light: var(--g4); --accent-dark: var(--g4);
  --ic-1: var(--g4); --ic-2: rgb(var(--ink) / .75); --ic-3: rgb(var(--ink) / .55);   /* category icons (style.css): one ink */
  --bl-color: rgb(var(--ink) / .62);   /* bead lines: the one ink too (the shared default is a pale orange) */
  --shadow-chip: none; --shadow-pop: 0 0 0 var(--hair) var(--g4); --shadow-drawer: 0 0 0 var(--hair) var(--g4);
  --r-rec: 0px; --r-ui: 0px; --r-bar: 2px;   /* every box is square; only a bar's far end keeps a small corner */
  --icon-w: .8; --icon-cap: square; --icon-join: miter;

  color-scheme: light;
  --back: var(--ground);
  --bg: var(--ground-top); --surface: var(--sheet); --surface-2: var(--sheet-2);
  --text: var(--g4); --muted: var(--ink-3); --faint: var(--ink-3);
  --line: var(--g2); --line-strong: var(--g3); --cap-ring: rgb(var(--ink) / .8);
  --accent: var(--g4); --hover-ink: var(--g4); --on-accent: var(--rev); --solid: var(--g4);
  --shadow: none; --pic-bg: var(--sheet);
  --bar-tint0: 0%; --bar-tint-hover: 0%;
  --seal-ink: var(--g4);   /* symbols too: no colour of their own */
  --cat-mono: rgb(var(--ink) / .8);   /* no category colours anywhere: rows, sidebar, search, card (js/colors.js) */
  --top-bg: var(--menu-bg, transparent); --top-bd: var(--hair) solid rgb(var(--ink) / .85); --side-bd: var(--hair) solid rgb(var(--ink) / .85);
  --rail-w: 56px; --rail-pad: 5px;   /* the 46px row (icon slot + 8px each side) stands in the middle of the rail */
  --label-case: none;

  /* for the canvas (js/draw/look.js) */
  --gl-see-edge: 1; --frame-handle: 5px; --sel-brackets: 9px;
  --grid-cross: 9px; --grid-cross-ink: rgb(var(--ink) / .62);
  --pic-tone: var(--pic-sat, .1); --pic-con: 1.06;
  --pic-filter: grayscale(calc(1 - var(--pic-sat, .1))) contrast(1.06);
  --pop: 1; --pop-nudge: 0px; --press: 1; --press-ico: 1;   /* flat: nothing grows or sinks, hover only turns black */
}
:root[data-skin="record"][data-theme="dark"] {
  color-scheme: dark;   /* palette, dark: designed on its own, not light turned over (STYLE-GUIDE.md → Record's dark mode) */
  --ink: 176 181 187; --rev: #eff1f2; --depth-base: .85;
  --gs0: #24272b; --gs1: #23262a; --gs2: #202327; --gs3: #1b1e21; --gs4: #17191c; --ground-far: #0e1012;
  --ink-3: #a6abb1; --text: #e2e4e6; --solid: #4d5259; --knob: #b4b9be; --grain-def: 15; --bl-color: #9a9fa5;
  --sheet: color-mix(in srgb, var(--gs-top), #fff 3%); --sheet-2: var(--gs-top);
  --pic-con: 1; --pic-dim: .86; --pic-filter: grayscale(calc(1 - var(--pic-sat, .1))) brightness(.92);
  --tie-close: #969ba1; --tie-conflict: #6a7077; --tie-tag-close: var(--solid); --tie-tag-close-ink: var(--rev); --tie-tag-conflict: #0d0e10; --tie-tag-conflict-ink: #c9ccd0;
  --tie-close-mark: var(--rev); --tie-conflict-mark: #c9ccd0;
  --tie-hot-close: #c9ccd0; --tie-hot-close-ink: #15171a; --tie-halo-close: #c9ccd0; --tie-hot-conflict: #c9ccd0; --tie-hot-conflict-ink: #15171a; --tie-halo-conflict: #c9ccd0;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="record"]:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: 176 181 187; --rev: #eff1f2; --depth-base: .85;
    --gs0: #24272b; --gs1: #23262a; --gs2: #202327; --gs3: #1b1e21; --gs4: #17191c; --ground-far: #0e1012;
    --ink-3: #a6abb1; --text: #e2e4e6; --solid: #4d5259; --knob: #b4b9be; --grain-def: 15; --bl-color: #9a9fa5;
    --sheet: color-mix(in srgb, var(--gs-top), #fff 3%); --sheet-2: var(--gs-top);
    --pic-con: 1; --pic-dim: .86; --pic-filter: grayscale(calc(1 - var(--pic-sat, .1))) brightness(.92);
    --tie-close: #969ba1; --tie-conflict: #6a7077; --tie-tag-close: var(--solid); --tie-tag-close-ink: var(--rev); --tie-tag-conflict: #0d0e10; --tie-tag-conflict-ink: #c9ccd0;
    --tie-close-mark: var(--rev); --tie-conflict-mark: #c9ccd0;
    --tie-hot-close: #c9ccd0; --tie-hot-close-ink: #15171a; --tie-halo-close: #c9ccd0; --tie-hot-conflict: #c9ccd0; --tie-hot-conflict-ink: #15171a; --tie-halo-conflict: #c9ccd0;
  }
}

/* ---------- The ground: one gradient over the whole window; grain on it from css/grain.css ---------- */
[data-skin="record"] .stage { background: none; }
html[data-skin="record"] { background-color: var(--ground-top); }
/* the sidebar is the same ground, not a sheet of its own: opened over the rows it hides them, and still can't be told from the window.
   It is pinned to the window (fixed) */
[data-skin="record"] .side { background: linear-gradient(var(--menu-bg, transparent) 0 0), var(--ground); background-attachment: fixed; }
@media (max-width: 760px) { [data-skin="record"] .side { background-attachment: scroll; } }   /* a drawer slides as one piece: its ground needs no pinning, which keeps the slide light */

/* ---------- Bars: see-through ink on the ground, so stacking does the layers ---------- */
[data-skin="record"] :is(.item, .frame) {
  --hover-glow: none; --hover-edge: var(--g4);
  --bar-fill: var(--i-period); --bar-edge: rgb(var(--ink) / calc(var(--paper-edge, .25) * var(--edge-k, 1)));
}
[data-skin="record"] .lanes { --period-fill: var(--i-period); }
[data-skin="record"] .item:is(.person, .guest) { --bar-fill: var(--i-person); }
[data-skin="record"] .item { border-top-right-radius: var(--r-bar); border-bottom-right-radius: var(--r-bar); }
[data-skin="record"] .item:not(.has-av, .has-photo) { border-top-left-radius: var(--r-bar); border-bottom-left-radius: var(--r-bar); }
/* an opened entry: its heading has no bar of its own, the box wears the fill, a dashed edge and square handles */
[data-skin="record"] .item.open-parent { --bar-fill: transparent; --bar-edge: transparent; }
[data-skin="record"] .frame, [data-skin="record"] .frame:is(.lifted, .lit, .flash) { --bar-fill: var(--i-period); --bar-edge: rgb(var(--ink) / .62); --box-r: 0px; }
[data-skin="record"] :is(.frame, .frame:is(.lifted, .lit, .flash))::before { border-style: dashed; }
[data-skin="record"] .frame:is(.lifted, .lit, .flash) { --bar-edge: var(--g4); }
/* the selected bar: solid ink, words reversed; the canvas adds corner brackets (--sel-brackets) */
[data-skin="record"] .item.sel:not(.open-parent) { --bar-fill: var(--solid); --bar-edge: var(--solid); --q-ink: var(--on-accent); --sel-ring: none; box-shadow: none; }
[data-skin="record"] .item.sel:not(.open-parent) .lbl, [data-skin="record"] .item.sel:not(.open-parent) .lbl .nest-ct { color: var(--on-accent); }
[data-skin="record"] .item.sel:not(.open-parent) .lbl .nest-tg { color: var(--on-accent); }
[data-skin="record"] .item.sel:not(.open-parent) .av { --ring: var(--on-accent); }
[data-skin="record"] .av { --ring: var(--g4); }
[data-skin="record"] { --pic-shape-only: 0; }   /* the user's call: Record keeps its older picture drawing (STYLE-GUIDE.md, Pictures on bars) */
/* pictures in greyscale, everywhere (Picture colour); on the rows the canvas does this itself */
[data-skin="record"] :is(.av img, .gs-pic img, .detail .portrait img, .detail .g-slide img, .tie-av img) { filter: var(--pic-filter); }

/* ---------- Grid and rows: hairlines; each row closed by a dashed rule ---------- */
[data-skin="record"] .gl { border-left-color: rgb(var(--ink) / .14); opacity: 1; }
[data-skin="record"] .gl.zero { border-left-color: rgb(var(--ink) / .4); }
[data-skin="record"] .gl.now, [data-skin="record"] .cur-line { border-left-color: var(--g4); opacity: 1; }
[data-skin="record"] .seg-pill { box-shadow: none; }
/* arriving at a row from the sidebar: the selected bar's brackets close on its title, a line runs across the row with a registration cross at its tip (the canvas, js/draw/webgl.js, reads --found-brackets) */
[data-skin="record"] { --found-brackets: var(--sel-brackets); }
@keyframes lane-found-frame { 0%, 20% { outline-color: transparent; outline-offset: 14px; } 42% { outline-color: var(--g4); outline-offset: 3px; } 75% { outline-color: var(--g4); outline-offset: 3px; } 100% { outline-color: transparent; outline-offset: 3px; } }
[data-skin="record"] .lane.found .lane-h .lane-name { outline: var(--hair) solid transparent; animation: lane-found-frame 1.4s linear; }   /* the page's own drawing, without a canvas */
[data-skin="record"] .lane {
  --hd-fill: transparent; --hd-halo: transparent; --hd-ink: var(--g4); --hd-edge: none; --hd-stuck: var(--ground-top); --hd-stuck-fade: inset 0 calc(-1 * var(--hair)) 0 rgb(var(--ink) / .32); --hd-h: 32px;
  --lane-edge: none; --lane-bd: var(--hair) dashed rgb(var(--ink) / .32); --rail-show: none;
  --rule-show: none; --rule-show-2: none;
  --hd-gap: 9px; --hd-pad-l: 12px; --ic-k: .72; --ic-g: 1.1;
  --hd-plate: var(--solid); --hd-plate-h: 24px;   /* a category title is one black box: white icon, white name (the canvas reads these) */
  margin-bottom: 0; border-bottom: var(--lane-bd);
}
[data-skin="record"] .lane-h .lane-ic { width: 30px; height: 24px; margin: 0; background: var(--solid); color: var(--on-accent); clip-path: none; border-radius: 0; }
[data-skin="record"] .lane-h .lane-ic > svg { translate: 0 0; }
[data-skin="record"] .lane-h .lane-name { background: var(--solid); color: var(--on-accent); padding-right: 10px; line-height: 24px; }
[data-skin="record"] .lane-h :is(.lane-tools, .nest-pill) { margin-left: 0; }
[data-skin="record"] .lane-h .lane-note { background: none; box-shadow: none; }
[data-skin="record"] .lane-h .lane-ct { padding: 0; background: none; color: var(--muted); --wash: transparent; font: 400 11.5px var(--font-date); }
/* a people tag: a filled mono label */
[data-skin="record"] .lane-h .nest-pill { --wash: transparent; background: var(--solid); box-shadow: none; }
[data-skin="record"] .lane-h .nest-pill-name { font-weight: 400; color: var(--on-accent); font-family: var(--font-date); }
[data-skin="record"] .lane-h .nest-pill-name b { font: 500 11.5px var(--font-date); color: var(--on-accent); background: none; }
[data-skin="record"] .lane-h .nest-pill button { color: var(--on-accent); }
[data-skin="record"] .lanes {
  --title-case: none; --title-weight: 700; --title-ls: 0; --title-size: 14px;
  --period-case: none; --period-weight: 600; --period-ls: 0; --period-style: normal;
  --period-ink-2: var(--text); --period-ink-3: var(--text);
}
/* On a bar the age (with its death mark) is a box tinted in the label's own ink, the dates a fainter outlined one: one ink, so they turn over with the bar by themselves */
[data-skin="record"] { --lbl-tint: 0%; --years-tint: currentColor; --years-fill-a: 13%; --ink-date-gap: 16%; }   /* the years' box takes some of their ink: the date slider stops further under them */
:root[data-skin="record"][data-theme="dark"] { --years-fill-a: 6%; }   /* a light box on dark paper takes more of the years' ink than a dark one on light */
@media (prefers-color-scheme: dark) { :root[data-skin="record"]:not([data-theme="light"]) { --years-fill-a: 6%; } }
[data-skin="record"] .lbl .d { border-radius: var(--r-ui); }

/* ---------- The time map: one hairline, the part in view a thick stroke ---------- */
[data-skin="record"] .overview { background: none; border-top: 0; }
[data-skin="record"] .ov-track { top: 50%; bottom: auto; height: var(--hair); background: var(--g4); overflow: visible; }
[data-skin="record"] .ov-seg { display: none; }
[data-skin="record"] .ov-win { top: calc(50% - 1.75px); bottom: auto; height: 3.5px; border: 0; background: var(--g4); }

/* ---------- Every control is a box: a hairline, square corners; the chosen tile is solid ink. One look for the header,
   the region button, search, Settings, the map, the card and the Data view. ---------- */
@media (min-width: 761px) { [data-skin="record"] .top { gap: 16px; } }
[data-skin="record"] .brand h1 { font-weight: 700; letter-spacing: .01em; }
[data-skin="record"] .h-long { display: none; }
[data-skin="record"] .h-short { display: inline; }
[data-skin="record"] .brand > .seg { margin-left: 16px; }
@media (min-width: 761px) {
  /* the mark stands in its own cell above the icon rail, the rail's rule running up through the header */
  [data-skin="record"] body.side-auto .top { padding-left: 0; position: relative; }
  [data-skin="record"] body.side-auto .brand h1 { width: calc(var(--rail-w) + var(--edge)); text-align: center; }
  [data-skin="record"] body.side-auto .brand > .seg { margin-left: 16px; }
  [data-skin="record"] body.side-auto .top::before { content: ""; position: absolute; left: calc(var(--rail-w) + var(--edge) - var(--hair)); top: 0; bottom: 0; border-left: var(--side-bd); pointer-events: none; }
}
[data-skin="record"] :is(.seg, .hdr-cap, .hdr-btn, .rmap-btn, .gsearch, .btn, .search, .settings-again, .nest-btn) {
  background: transparent; background-image: none; box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); border-radius: 0;
}
[data-skin="record"] :is(.seg, .hdr-cap) { gap: 0; }
[data-skin="record"] :is(.seg button, .hdr-cap > button) { color: var(--text); font-weight: 500; }
[data-skin="record"] :is(.seg button + button, .hdr-cap > button + button, .hdr-cap > .hdr-sep + button, .hdr-cap > .hdr-sep + .seg) { box-shadow: inset var(--hair) 0 0 var(--cap-ring); }
[data-skin="record"] .hdr-sep { display: none; }
[data-skin="record"] :is(.top, .side-brand, .settings-pop, .rmap-panel, .mapview, .relview, .cmp, .dx) .seg-pill { background: var(--solid); box-shadow: none; }
[data-skin="record"] .seg button[aria-checked="true"], [data-skin="record"] .settings-pop .seg button[aria-checked="true"], [data-skin="record"] .seg button[aria-checked="true"]:hover { color: var(--on-accent); }
[data-skin="record"] .settings-pop .seg { --chosen-fill: var(--solid); --chosen-edge: var(--solid); }
[data-skin="record"] .settings-pop .seg:not(.has-pill) button[aria-checked="true"] { background: var(--solid); box-shadow: none; }
/* hover: solid ink with reversed words, as on the chosen tile (style.css → Solid hover) */
[data-skin="record"] #settingsBtn[aria-expanded="true"], [data-skin="record"] .rmap-btn[aria-expanded="true"] { background: var(--solid); color: var(--on-accent); }
[data-skin="record"] .rmap-btn { color: var(--text); padding-left: 10px; font-weight: 500; }
[data-skin="record"] .rmap .rmap-btn[aria-expanded="true"] :is(.rmap-ico, .rmap-cur) { color: var(--on-accent); }
[data-skin="record"] .rmap.chosen .rmap-btn, [data-skin="record"] .rmap.chosen .rmap-btn:hover { box-shadow: inset 0 0 0 var(--hair) var(--g4); }
[data-skin="record"] :is(.rmap-ico, .rmap.chosen .rmap-cur) { color: var(--text); }
[data-skin="record"] .gsearch { color: var(--text); }
[data-skin="record"] .gsearch:focus-within { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--g4); }
[data-skin="record"] .gsearch input { color: var(--text); }
[data-skin="record"] .gsearch input::placeholder { color: var(--muted); }
[data-skin="record"] .gsearch :is(kbd, .kbd) { color: var(--text); background: none; border: var(--hair) solid var(--g3); border-radius: 0; box-shadow: none; font-family: var(--font-date); }
[data-skin="record"] .range { font-family: var(--font-date); }
[data-skin="record"] .sh-span { background: none; box-shadow: none; }

/* switches, ticks and sliders: square, solid ink when on */
[data-skin="record"] .switch span, [data-skin="record"] .switch span::after, [data-skin="record"] input[type="checkbox"]:not(.switch input) { border-radius: 0; }
[data-skin="record"] .switch span { background: transparent; box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); }
[data-skin="record"] .switch span::after { background: var(--g4); }
[data-skin="record"] .switch input:checked + span { background: var(--solid); box-shadow: none; }
[data-skin="record"] .switch input:checked + span::after { background: var(--knob, var(--on-accent)); }
[data-skin="record"] .switch:hover input + span { box-shadow: inset 0 0 0 var(--hair) var(--g4); }
[data-skin="record"] input[type="checkbox"]:not(.switch input) { --chosen-fill: var(--solid); --chosen-edge: var(--solid); }
[data-skin="record"] input[type="checkbox"]:not(.switch input)::after { border-color: var(--on-accent); }
[data-skin="record"] .settings-pop input[type="range"]::-webkit-slider-thumb { border-radius: 0; box-shadow: none; }
[data-skin="record"] .settings-pop input[type="range"]::-moz-range-thumb { border-radius: 0; box-shadow: none; }
[data-skin="record"] .settings-pop input[type="range"]::-webkit-slider-runnable-track { border-radius: 0; }

/* panels are sheets of paper: solid, one hairline, no shadow */
[data-skin="record"] :is(.settings-pop, .rmap-panel, .gsearch-list, .detail, .d-tip, .keys-pop) { background: var(--surface); border: 0; border-radius: 0; box-shadow: var(--shadow-pop); }
[data-skin="record"] { --scroll-thumb: rgb(var(--ink) / .62); }   /* the scrollbars: a square strip of the one ink */
[data-skin="record"] .settings-tabs { box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--g3); }
[data-skin="record"] .settings-lab { border-radius: 0; }

/* ---------- The region map: the same paper. Flat: no relief, land a flat tint of the one ink, hairline borders, square tags, the timeline's marks on top ---------- */
[data-skin="record"] .rmap-panel { padding: 8px 3px 3px; --accent: var(--g4); }
[data-skin="record"] .rmap-panel * { --c: var(--g4) !important; }
[data-skin="record"] .rmap-stage { border-radius: 0; box-shadow: inset 0 0 0 var(--hair) var(--g3); }
[data-skin="record"] .rmap-relief { display: none; }
/* the survey sheet (js/mapsheet.js): the timeline's grid, crosses, zero lines, cursor and brackets on the map */
:where([data-skin="record"]) .rmap-sheet { display: block; }   /* no stronger than the shared rule that folds the fine print away on small maps */
[data-skin="record"] .rmap-stage { --map-grid: rgb(var(--ink) / .13); --map-edge: rgb(var(--ink) / .5); }
[data-skin="record"] .rmap-map { --edge: var(--g4); }
/* land deepens one step at a time: resting, its region lit, the country under the pointer, picked (solid like every chosen tile). Left out: bare paper, only its outline */
[data-skin="record"] .rmap-map path { fill-opacity: .1; stroke: rgb(var(--ink) / .4); stroke-width: var(--hair); }
[data-skin="record"] .rmap-map path.sea-land { fill: rgb(var(--ink)); fill-opacity: .1; }
[data-skin="record"] .rmap-map path.reg, [data-skin="record"] .rmap-map.lit path.reg { fill-opacity: .24; stroke: rgb(var(--ink) / .4); stroke-width: var(--hair); }
[data-skin="record"] .rmap-map path.hot { fill-opacity: .55; stroke: var(--g4); stroke-width: var(--hair); }
:root[data-skin="record"] .rmap-map path:is(.on, .on.hot, .on.reg, .lit .on.reg) { fill: var(--solid); fill-opacity: 1; stroke: var(--sheet-2); }
:root[data-skin="record"] .rmap-map path:is(.out, .out.hot, .out.reg, .lit .out.reg) { fill: none; stroke: var(--g4); stroke-dasharray: 3 2; }
/* a region's label reads like a bar: its picture, a solid chip with its count in mono (a bar's age), its name */
[data-skin="record"] .rmap-n { display: block; flex: none; min-width: 18px; padding: 2px 3px; background: var(--solid); color: var(--on-accent); font: 500 var(--t-tiny)/1 var(--font-date); font-style: normal; text-align: center; }
[data-skin="record"] .rmap-tag:is(.on, :hover, .hot) .rmap-n { background: var(--on-accent); color: var(--solid); }
@container (max-width: 640px) { [data-skin="record"] .rmap-n { display: none; } }
[data-skin="record"] .rmap-tag { background: var(--surface); color: var(--text); border-radius: 0; box-shadow: 0 0 0 var(--hair) var(--g3); font-weight: 500; scale: none; }
[data-skin="record"] .rmap-tag:not(.on):is(:hover, .hot) { scale: none; }
[data-skin="record"] .rmap-tag span, [data-skin="record"] .rmap-tag .ico { color: inherit; }
[data-skin="record"] .rmap-tag.on { background: var(--solid); color: var(--on-accent); box-shadow: 0 0 0 var(--hair) var(--solid); }
[data-skin="record"] :is(.rmap-g, .rmap-chip, .rmap-tip, .rmap-rail, .rmap-k) { border-radius: 0; }
[data-skin="record"] .rmap-g.on { box-shadow: inset 0 0 0 var(--hair) var(--solid); background: var(--solid); color: var(--on-accent); }
[data-skin="record"] .rmap-g.part { box-shadow: inset 0 0 0 var(--hair) var(--g3); }
[data-skin="record"] .rmap-chip { background: transparent; box-shadow: inset 0 0 0 var(--hair) var(--g3); color: var(--text); }
[data-skin="record"] .rmap-tip { background: var(--surface); box-shadow: 0 0 0 var(--hair) var(--g4); color: var(--text); }
[data-skin="record"] .rmap-k { background: var(--solid); color: var(--on-accent); }
[data-skin="record"] .rmap-g:is(:hover, .hot) .ico { filter: none; }

/* ---------- Sidebar: the rail's icons in ink; the category in view a solid tile ---------- */
[data-skin="record"] .side {
  --sw-rest: transparent;
}
/* above html.no-side-shapes: this theme's lit icon is reversed on the row's solid tile, with no shape behind it */
:root[data-skin="record"] .side { --cat-current-bg: var(--solid); --cat-hover-bg: var(--solid); --nm-current: var(--on-accent); --sw-hi-fg: var(--on-accent); --sw-hi-bg: transparent; }
[data-skin="record"] .cat .sw::before { display: none; }
[data-skin="record"] :is(.cat .sw, .cat-tag-ic) > svg { translate: var(--ix, 0px) var(--iy, 0px); }
[data-skin="record"] .cats li.current .cat :is(.nm, .ct) { color: var(--on-accent); }
[data-skin="record"] .cat .ct { background: none; }
/* its hover tag on the rail: the same solid tile running out of the row */
[data-skin="record"] .cat-tag { --tint: var(--solid); --cat-tag-r: 0px; color: var(--on-accent); filter: none; }
:root[data-skin="record"] .side ~ .cat-tag, :root[data-skin="record"] .cat-tag { --sw: 30px; --sh: 24px; --sr: 0px; --clip: none; --pad: 7px; --dy: 0px; }   /* one tile for every category, the row's height */
[data-skin="record"] .cat-tag-cap { clip-path: none; border-radius: 0; }
[data-skin="record"] .cat-tag-ic { clip-path: none; border-radius: 0; background: none; color: var(--on-accent); }   /* bare and reversed, as on a lit row */
[data-skin="record"] .cat-tag-ct { background: none; color: var(--on-accent); font-family: var(--font-date); }
/* flags and region icons are in the one ink too: no colour anywhere */
[data-skin="record"] .flag { filter: var(--pic-filter); }

/* ---------- The sidebar as a ledger: the timeline's ruled rows carried across. Each row closed by the lanes' dashed rule, edge to edge;
   each group by a solid one with a registration cross above the icon column; a lit row a solid tile from edge to edge. The rail is
   the same ledger with its names folded away, so opening it only reveals what was there. ---------- */
[data-skin="record"] .side { --rail-ink: 1; --group-mark-open: 1; }
[data-skin="record"] .cats { gap: 0; --bleed: 24px; }
@media (max-width: 760px) { [data-skin="record"] .side-brand .brand > .seg { margin-left: 0; } [data-skin="record"] .cats { --bleed: 12px; } [data-skin="record"] .side { overflow-x: hidden; } }   /* a lit row's fill runs past the drawer: never a sideways scroll */
@media (min-width: 761px) {
  /* the rows' scroll area runs past the sidebar's padding so the rules reach both edges; the rows stay where they were */
  [data-skin="record"] .side > .side-rows { margin-inline: -24px; padding-inline: 24px; }
  [data-skin="record"] body.side-auto .side > .side-rows { width: calc(var(--side-w, 248px) + 24px); }
  [data-skin="record"] body.side-glide .side > .side-rows { width: calc(var(--side-w, 248px) + 23px); }
}
[data-skin="record"] .cats li[data-cat]::after { content: ""; position: absolute; left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); bottom: 0; border-bottom: var(--lane-rule); pointer-events: none; }
[data-skin="record"] .side { --lane-rule: var(--hair) dashed rgb(var(--ink) / .32); }
/* a lit row: its fill runs to both edges (no change to the row's box, so its hit area and motion stay) */
[data-skin="record"] .cat { border-radius: 0; }
[data-skin="record"] .cat::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--bleed) - 60px); z-index: -1; background: inherit; pointer-events: none; }
[data-skin="record"] .cats :is(.eye, .grip) { z-index: 1; }
[data-skin="record"] .cats .eye { position: relative; border-radius: 0; }
[data-skin="record"] .cats li[data-cat]:is(.current, :hover, .swept):not(.off) :is(.eye, .eye:hover) { color: var(--on-accent); }
:root[data-skin="record"] .cats li[data-cat]:is(.current, :hover, .swept):not(.off) .eye:hover { background: var(--on-accent); color: var(--solid); }
/* group headings: the axis's caps in mono, in the names' column, closed by a solid rule; the cross stands over the icons, open or on the rail */
[data-skin="record"] .side .cats .cat-group { padding-left: calc(var(--gut) + 48px); font: 500 10px/1.3 var(--font-small); text-transform: uppercase; letter-spacing: .08em; }
/* one mark holds the rule and the cross, so both run past the row; it stands on the heading's foot, open or folded to a band on the rail */
:root[data-skin="record"] body .side .cats .cat-group { overflow: visible; }
:root[data-skin="record"] body .side .cats .cat-group::after, :root[data-skin="record"] body .side .cats .cat-group:first-child::after {
  --cross-x: calc(var(--bleed) + var(--gut) + 23px);
  content: ""; display: block; position: absolute; left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); bottom: 0; top: auto; width: auto; height: 13px; border-radius: 0; pointer-events: none;
  background:
    linear-gradient(rgb(var(--ink) / .85) 0 0) left 0 bottom 0 / 100% var(--hair) no-repeat,
    linear-gradient(var(--g4) 0 0) left calc(var(--cross-x) - var(--grid-cross) / 2) bottom 6px / var(--grid-cross) var(--hair) no-repeat,
    linear-gradient(var(--g4) 0 0) left var(--cross-x) bottom 2px / var(--hair) var(--grid-cross) no-repeat;
  transition: background-position .24s cubic-bezier(.2,.8,.2,1) .2s;
}
/* each icon in the full ink, bare on the paper. On a lit row, itself solid, it stays bare and reverses with the row's words; a hidden category keeps a dashed outline, like a left-out country on the map */
[data-skin="record"] .side .cat .sw { color: var(--g4); }
:root[data-skin="record"] .side .cats li:not(.off):is(.current, :hover, .swept) .cat .sw { background: none; color: var(--on-accent); box-shadow: none; }
:root[data-skin="record"] .side .cats li.off .cat .sw { background: none; color: var(--g4); outline: var(--hair) dashed var(--g4); outline-offset: calc(-1 * var(--hair)); }
:root[data-skin="record"] .side .cats li.off:is(:hover, .swept) .cat .sw { color: var(--on-accent); outline-color: var(--on-accent); }
/* people's boxes match the others in the column, only the icon inside smaller */
[data-skin="record"] .cats li.sub .sw { height: 22px; }
:root[data-skin="record"] body.side-auto .side .cats :is(li.sub .sw, .sw.portrait), :root[data-skin="record"] body .side .cats li .sw.portrait { transform: none; }
[data-skin="record"] .side .cats :is(li.sub .sw, .sw.portrait) > svg { scale: .85; }
/* handles and joins: square, as everywhere */
/* A drag in the ledger: the row pulled out is a solid tile, edge to edge, exactly a lit row: no lift, no shadow, its icon bare and reversed. Its people come as
   plain ruled slips under it. Where it will land stays open in the ledger: a blank line between two heavier dashed rules, with a registration cross at each end.
   The group it would join is tinted across, so its heading reads as the target. Motion and behaviour: style.css, js/app.js */
[data-skin="record"] .cats {
  --drag-fill: var(--solid); --drag-ink: var(--on-accent); --drag-edge: 0 0 transparent; --drag-glow: 0 0 transparent; --drag-scale: 1; --drag-r: 0px;
  --stack-fill: var(--surface); --stack-edge: inset 0 0 0 var(--hair) var(--g4);
  --slot-fill: transparent; --slot-edge: 0 0 transparent; --slot-r: 0px; --slot-bleed: calc(var(--bleed) + var(--gut)); --slot-end: 0px;
  --slot-x: calc(var(--bleed) + var(--gut) + 23px);
  --slot-pic:
    linear-gradient(var(--g4) 0 0) left calc(var(--slot-x) - var(--grid-cross) / 2) center / var(--grid-cross) var(--hair) no-repeat,
    linear-gradient(var(--g4) 0 0) left var(--slot-x) center / var(--hair) var(--grid-cross) no-repeat,
    linear-gradient(var(--g4) 0 0) right calc(var(--slot-x) - var(--grid-cross) / 2) center / var(--grid-cross) var(--hair) no-repeat,
    linear-gradient(var(--g4) 0 0) right var(--slot-x) center / var(--hair) var(--grid-cross) no-repeat;
}
[data-skin="record"] .cats.reordering::before { border-block: var(--hair) dashed var(--g4); box-sizing: border-box; }
:root[data-skin="record"] .side .cats li.dragging:not(.stacked, .off) .cat :is(.sw, .nm, .ct) { background: none; color: var(--on-accent); box-shadow: none; }
:root[data-skin="record"] .side .cats li.off.dragging:not(.stacked) .cat :is(.nm, .ct) { color: var(--on-accent); }
:root[data-skin="record"] .side .cats li.off.dragging:not(.stacked) .cat .sw { color: var(--on-accent); outline-color: var(--on-accent); }
[data-skin="record"] .cats li.dragging:not(.stacked) { --muted: var(--on-accent); }
[data-skin="record"] .cats li.dragging:not(.stacked) .eye { color: var(--on-accent); }
[data-skin="record"] .cats li.stacked::after, [data-skin="record"] .cats li.stacked .cat::before { display: none; }
[data-skin="record"] .cats li.dragging.sub::before { border-color: var(--on-accent); }
/* a heading pulled out: the same tile, its cross reversed; the group's words stay in the names' column */
[data-skin="record"] .cats li.cat-group:is(.dragging, .settling)::before, [data-skin="record"] .cats li.cat-group.drop-home::before { inset: 8px calc(-1 * var(--bleed)) 0; }
[data-skin="record"] .cats li.cat-group:first-child:is(.dragging, .settling)::before, [data-skin="record"] .cats li.cat-group.drop-home:first-child::before { top: -4px; }
[data-skin="record"] .cats li.cat-group.dragging { --g4: var(--on-accent); }
[data-skin="record"] .cats li.cat-group.settling { color: var(--group-ink); transition: color .3s; }
[data-skin="record"] .cats li.cat-group.drop-home::before { content: ""; position: absolute; z-index: -1; background: rgb(var(--ink) / .1); }
[data-skin="record"] .cats .grip { width: 7px; height: 12px; background: repeating-linear-gradient(var(--muted) 0 2px, transparent 2px 5px); -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 5px); mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 5px); }
[data-skin="record"] .cats li[data-cat] .grip { margin-top: -6px; }
[data-skin="record"] .cats li[data-cat]:is(.current, :hover, .swept):not(.off) .grip { --muted: var(--on-accent); }
[data-skin="record"] .cats li.sub::before { z-index: 1; border-radius: 0; border-color: rgb(var(--ink) / .62); border-width: 0 0 var(--hair) var(--hair); }
[data-skin="record"] .cats li.sub:is(.current, :hover, .swept)::before { border-color: var(--on-accent); }
/* the heading and its button, like the header's boxes */
[data-skin="record"] .side-h { font: 500 10px/1.3 var(--font-small); text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
[data-skin="record"] .side-h button { padding: 3px 6px; border-radius: 0; box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); font: 500 10px/1.3 var(--font-small); text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
/* the count: plain mono, as beside a title on the timeline */
[data-skin="record"] .cat .ct { padding: 0; min-width: 0; font: 400 11.5px var(--font-date); color: var(--muted); }
/* the expand button is the ledger's foot: a solid rule above it, its hover running edge to edge like a row */
[data-skin="record"] .side > .side-lock.side-lock { position: relative; isolation: isolate; border-radius: 0; }
[data-skin="record"] .side-lock::before { content: ""; position: absolute; left: -300px; right: -300px; top: 0; border-top: var(--hair) solid rgb(var(--ink) / .85); pointer-events: none; }
[data-skin="record"] .side-lock::after { content: ""; position: absolute; inset: 0 -300px; z-index: -1; background: inherit; pointer-events: none; }
[data-skin="record"] .side-lock rect { rx: 0; ry: 0; }

/* Raise the timeline (style.css): the sheet keeps the ground, with a hairline */
:root.raised[data-skin="record"] { --gap: var(--section-gap); --panel-bd: var(--hair) solid rgb(var(--ink) / .85); }

/* the ruler sits on the ground too */
[data-skin="record"] .axis { background: none; border-color: rgb(var(--ink) / .32); }
[data-skin="record"] .axis-tag { background: none; color: var(--muted); }
[data-skin="record"] .tick { border-color: rgb(var(--ink) / .14); }

/* a picture's ring is one hairline of ink */
[data-skin="record"] .av { box-shadow: 0 0 0 1px var(--ring); }
[data-skin="record"] :is(.settings-rollup, .settings-rollup summary, .settings-labgrp, .tune-role) { border-radius: 0; }
@media (max-width: 760px) { [data-skin="record"] .rmap-btn { padding-left: 7px; } }
[data-skin="record"] .btn.primary { background: var(--solid); color: var(--on-accent); box-shadow: none; }
[data-skin="record"] .btn.primary:hover { background: var(--solid); filter: none; }
[data-skin="record"] :is(.gs-add, .gs-go, .gs-x, .gs-clear, .cur-pill, .zoomsel span, .sh-badge, .settings-tab) { border-radius: 0; }
[data-skin="record"] .cur-pill { box-shadow: none; }
/* a bar's open/close toggle: a hairline box (style.css → Solid hover fills it) */
[data-skin="record"] .nest-tg { background: transparent; color: var(--g4); box-shadow: inset 0 0 0 var(--hair) var(--g3); }
/* the last few surfaces onto the same square paper (tools/ui-audit.js themeAudit). Named exceptions: people's round pictures */
[data-skin="record"] .rmap-stage { background: var(--sheet-2); }
[data-skin="record"] :is(.ov-win, .vbar, .gs-ic, .sh-span, .table th) { border-radius: 0; }
[data-skin="record"] .gs-row.place .gs-ic { border-radius: 0; background: none; }
/* search results are a ledger too: each entry closed by the sidebar's dashed rule; the solid line above them closes the filters, as it closes a group */
[data-skin="record"] .gs-row:not(.place, :last-child)::after { content: ""; position: absolute; inset: auto 8px 0; border-bottom: var(--hair) dashed rgb(var(--ink) / .32); pointer-events: none; }
/* the card's facts box, close button, gallery arrows and dots: square like everything else */
[data-skin="record"] :is(.d-facts, .detail .cl, .g-nav, .g-dots, .g-dots *) { border-radius: 0; }
/* the Data view's tabs: a hairline box, the chosen one solid like every chosen tile */
[data-skin="record"] .sheet-tab .dot { background: none; color: inherit; border-radius: 0; }
[data-skin="record"] .sheet-tab .ct { color: inherit; }
[data-skin="record"] .sheet-tab { color: var(--text); box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); }
[data-skin="record"] .sheet-tab[aria-selected="true"], [data-skin="record"] .sheet-tab[aria-selected="true"]:hover { background: var(--solid); color: var(--on-accent); box-shadow: none; }
/* the rail's tag at the right edge */
[data-skin="record"] .srail-tag { background: var(--surface); color: var(--text); box-shadow: 0 0 0 var(--hair) var(--g4); }
/* a fold's heading: the same hairline box as every control, not a thick bar down one side */
[data-skin="record"] :is(.settings-rollup, .settings-labgrp) > summary { border-left: 0; box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); }

/* ---------- Relationship lines: one ink too. A positive tie is white, a negative one black, in light and dark: thin lines, no
   outline. Tags and the Data view's kind chips are solid, in the same two. ---------- */
[data-skin="record"] { --tie-close: #fff; --tie-conflict: #000; --tie-close-mark: #0c0e10; --tie-conflict-mark: #fff;
  /* hot: just turns black (white ink on the tag), no edge, for either kind */
  --tie-hot-close: #000; --tie-hot-close-ink: #fff; --tie-halo-close: #000;
  --tie-hot-conflict: #000; --tie-hot-conflict-ink: #fff; --tie-halo-conflict: #000;
  --tie-hot-w: 1.25px; --tie-halo-w: 0px; --tie-halo-soft: 0;
  /* the bow as a plain ruled line: even width, no paper around it, a line with an open head, a small square for the pointer; reversed where it crosses the hovered bar, like the bar's words */
  --bow-w: 1.25px; --bow-taper: 0; --bow-case: 0px; --bow-head: 0; --bow-dot: 2px; --bow-dot-edge: 0px; --bow-dot-round: 0; --bow-rev: var(--on-accent); }
[data-skin="record"] .tie-tag:not(.hot, .away:hover:not(.touch-input *)) { background: var(--tie-tag-close, #fff); color: var(--tie-tag-close-ink, #0c0e10); --tie-name: var(--tie-tag-close-ink, #0c0e10); }
[data-skin="record"] .tie-tag.conflict:not(.hot, .away:hover:not(.touch-input *)) { background: var(--tie-tag-conflict, #000); color: var(--tie-tag-conflict-ink, #fff); --tie-name: var(--tie-tag-conflict-ink, #fff); }
[data-skin="record"] .tie-tag { box-shadow: none; --tag-arrow-w: 1.25px; --tag-edge: 1px; font-weight: 500; letter-spacing: 0; }   /* a ruled label; its mark drawn like the bow: an even line, an open head */
[data-skin="record"] .tie-kind { background: var(--tie-close); box-shadow: none; }
[data-skin="record"] .tie-kind.conflict { background: var(--tie-conflict); }

/* ---------- The card as a record sheet: the timeline's own marks on one sheet of paper. A black title tile as on a row, the timeline
   in small with the entry's selected bar (js/cardspan.js), pictures mounted in the selected bar's corner brackets, the facts as a ledger
   with registration crosses and date chips, ruled headings, and the mini map as a survey sheet (js/minimap.js). ---------- */
[data-skin="record"] .detail {
  --hero-fade: none; --side-fade: none;
  --span-grid: rgb(var(--ink) / .14);
  --sheet-rule: var(--hair) solid rgb(var(--ink) / .85); --sheet-dash: var(--hair) dashed rgb(var(--ink) / .32);
  --plate-gap: 7px; --sb: var(--sel-brackets); --si: var(--g4);
  /* the selected bar's corner brackets, as backgrounds, so a box wears them outside its own picture */
  --brackets:
    linear-gradient(180deg, var(--si) var(--hair), #0000 0) 0 0 / var(--sb) var(--sb) no-repeat, linear-gradient(90deg, var(--si) var(--hair), #0000 0) 0 0 / var(--sb) var(--sb) no-repeat,
    linear-gradient(180deg, var(--si) var(--hair), #0000 0) 100% 0 / var(--sb) var(--sb) no-repeat, linear-gradient(270deg, var(--si) var(--hair), #0000 0) 100% 0 / var(--sb) var(--sb) no-repeat,
    linear-gradient(0deg, var(--si) var(--hair), #0000 0) 0 100% / var(--sb) var(--sb) no-repeat, linear-gradient(90deg, var(--si) var(--hair), #0000 0) 0 100% / var(--sb) var(--sb) no-repeat,
    linear-gradient(0deg, var(--si) var(--hair), #0000 0) 100% 100% / var(--sb) var(--sb) no-repeat, linear-gradient(270deg, var(--si) var(--hair), #0000 0) 100% 100% / var(--sb) var(--sb) no-repeat;
  /* a registration cross in the text's ink, for any box to place */
  --cross: linear-gradient(currentColor 0 0) center / 100% var(--hair) no-repeat, linear-gradient(currentColor 0 0) center / var(--hair) 100% no-repeat;
}
:root[data-skin="record"] .detail.moving { box-shadow: var(--shadow-pop); }

/* the header: a row's title tile in the corner, the group in the axis's caps, the close button a cell of its own; the ruler under them */
[data-skin="record"] .d-head { flex-wrap: wrap; height: auto; padding: 0; gap: 0; border-bottom: var(--sheet-rule); }
[data-skin="record"] .d-cat { flex: 1 1 0; gap: 0; height: 36px; }
[data-skin="record"] .d-cat-ic { order: 0; width: 34px; height: 36px; place-items: center; background: var(--solid); color: var(--on-accent); }
[data-skin="record"] .d-catname { order: 1; height: 36px; padding-right: 11px; background: var(--solid); color: var(--on-accent); font: 700 var(--t-meta)/36px var(--font-head); letter-spacing: 0; }
[data-skin="record"] .d-group { order: 2; padding-left: 10px; font: 500 10px/1.3 var(--font-small); text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
[data-skin="record"] .d-group::after { content: none; }
[data-skin="record"] .detail .cl { width: 36px; height: 36px; opacity: 1; color: var(--text); box-shadow: inset var(--hair) 0 0 var(--cap-ring); }
[data-skin="record"] .detail .cl path { stroke-linecap: square; stroke-width: 1.25; }
[data-skin="record"] .d-span { display: block; order: 3; border-top: var(--sheet-dash); }
[data-skin="record"] .d-spanbar::before {
  content: ""; position: absolute; inset: -3px; pointer-events: none; --sb: 5px; background: var(--brackets);
}
[data-skin="record"] .d-tick::after {
  content: ""; position: absolute; left: calc(var(--hair) / -2 - 3.5px); bottom: -4px; width: 7px; height: 7px; color: var(--grid-cross-ink); background: var(--cross);
}
@media (max-height: 500px) { [data-skin="record"] .d-span { display: none; } }   /* a short screen keeps its room for the reading */
/* the handle a phone drags: the time map's thick stroke; a mouse has the whole header */
[data-skin="record"] .detail .grip::before { border-radius: 0; height: 3.5px; background: var(--g4); }
@media (min-width: 761px) { [data-skin="record"] .detail .grip::before { display: none; } }

/* pictures: a print on the sheet, hard-edged and greyscale, its text's width, the brackets standing in the gutter just outside it.
   Bare mount where a picture is narrower than its frame, never a blurred copy */
[data-skin="record"] .detail .portrait, [data-skin="record"] .gallery.hero .g-track, [data-skin="record"] .gallery:not(.hero) .g-track {
  box-sizing: content-box; border: var(--plate-gap) solid transparent; box-shadow: none; border-radius: 0;
  background: var(--brackets), linear-gradient(var(--sheet-2) 0 0);
  background-origin: border-box;
  background-clip: border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, padding-box;
}
[data-skin="record"] .detail .portrait { width: 100%; height: var(--hero-h); margin: -7px -7px 0; }
[data-skin="record"] .detail .portrait::before, [data-skin="record"] .g-slide.fit::before { display: none; }
[data-skin="record"] .detail .portrait img { left: calc(clamp(min(0px, 100cqw - var(--w)), 50cqw - var(--fx, .5) * var(--w), 0px) + max(0px, (100cqw - var(--w)) / 2)); }
@media (max-height: 500px) { [data-skin="record"] .detail { --hero-h: 150px; } [data-skin="record"] .detail .portrait.seal { height: 110px; } [data-skin="record"] .detail .portrait.seal .seal { width: 72px; height: 72px; } }
[data-skin="record"] .detail .g-slide { background: none; }
[data-skin="record"] .detail :is(.portrait, .g-slide) img, [data-skin="record"] .peek-pic img { filter: var(--pic-filter) var(--pic-filter); }   /* a print: the card's pictures are a step greyer than the rows' small ones, where a little tone helps tell them apart */
[data-skin="record"] .detail .gallery.hero { margin: -7px -7px 0; }
[data-skin="record"] .detail .gallery:not(.hero) { margin-inline: -7px; }
[data-skin="record"] .detail .portrait.seal { height: 150px; align-content: center; padding: 0; background: var(--brackets), linear-gradient(var(--sheet-2) 0 0); }
:root[data-skin="record"] .detail :is(.portrait, .portrait.seal, .gallery.hero) + h2 { margin-top: 16px; text-shadow: none; }
[data-skin="record"] .detail h2 { font-weight: 700; letter-spacing: 0; }
/* what it belongs to: joined to the name by a nested row's elbow, in fine print */
[data-skin="record"] .d-sub { position: relative; margin: -2px 0 0; padding-left: 15px; font: 400 11.5px/1.35 var(--font-date); color: var(--text); }
[data-skin="record"] .d-sub::before { content: ""; position: absolute; left: 3px; top: -2px; width: 8px; height: 10px; border: solid rgb(var(--ink) / .62); border-width: 0 0 var(--hair) var(--hair); }
/* captions and photo marks: a selected bar's solid ink, and the time map's stroke for where you are in the photos */
[data-skin="record"] .g-slide figcaption { padding: 4px 8px; background: var(--solid); color: var(--on-accent); font-size: var(--t-meta); }
[data-skin="record"] .g-nav { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 0 0 var(--hair) var(--g4); }
[data-skin="record"] .g-nav path { stroke-width: 1.25; stroke-linecap: square; stroke-linejoin: miter; }
[data-skin="record"] .g-dots { gap: 0; align-items: center; width: 84px; height: 9px; margin: 6px auto 0; background: linear-gradient(var(--g4) 0 0) center / 100% var(--hair) no-repeat; }
[data-skin="record"] .g-dots i { flex: 1 1 0; width: auto; height: 0; background: none; border-radius: 0; }
[data-skin="record"] .g-dots i.on { width: auto; height: 3.5px; background: var(--g4); }
:root[data-skin="record"] .detail .gallery.hero .g-dots { position: absolute; top: auto; left: auto; right: 15px; bottom: 15px; margin: 0; padding: 0 5px; width: 72px; height: 15px; background-color: var(--surface); box-shadow: 0 0 0 var(--hair) var(--g4); background-size: calc(100% - 10px) var(--hair); }

/* the facts: a ledger, edge to edge. Solid rules above and below, dashed between cells, a registration cross where they meet; a date in the outlined chip it wears on a bar */
[data-skin="record"] .d-facts { margin: 16px -18px 0; padding: 0; background: none; box-shadow: none; border-block: var(--sheet-rule); }
[data-skin="record"] .detail dl { gap: 0; }
[data-skin="record"] .detail dl > div { position: relative; gap: 4px; padding: 10px 18px 11px; }
[data-skin="record"] .detail dl > div:nth-child(even):not(.d-place) { border-left: var(--sheet-dash); }
[data-skin="record"] .detail dl > div:nth-child(n+3) { border-top: var(--sheet-dash); }
[data-skin="record"] .detail dl > div:nth-child(2)::before, [data-skin="record"] .d-place::before {
  content: ""; position: absolute; left: calc(var(--grid-cross) / -2); top: calc(var(--grid-cross) / -2 - var(--hair)); width: var(--grid-cross); height: var(--grid-cross); color: var(--grid-cross-ink); background: var(--cross);
}
[data-skin="record"] .detail dl > .d-place::before { left: calc(50% - var(--grid-cross) / 2); top: calc(var(--grid-cross) / -2); }
[data-skin="record"] .detail dt { font: 500 10px/1.3 var(--font-small); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
[data-skin="record"] .detail dl > div:not(.d-place) dd { justify-self: start; padding: 1px 6px; font: 400 var(--t-ui)/1.4 var(--font-date); box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); }
[data-skin="record"] .detail dl small { font: 400 11px/1.35 var(--font-date); }
/* the place: a row of the ledger; hover turns it solid like any row, and its map comes up. Its mark is the map's crosshair */
[data-skin="record"] .d-place { margin: 0; border-radius: 0; }
[data-skin="record"] .d-place:is(:hover:not(.touch-input *), :focus-visible) { background: var(--solid); color: var(--on-accent); box-shadow: none; }
[data-skin="record"] .d-place:is(:hover:not(.touch-input *), :focus-visible) :is(dt, small) { color: var(--on-accent); }
[data-skin="record"] .d-place::before { transition: none; }
[data-skin="record"] .d-pin { width: 11px; height: 11px; margin-top: 4px; background: var(--cross); }
[data-skin="record"] .d-pin > * { display: none; }
:root[data-skin="record"] .d-place:is(:hover, :focus-visible) .d-pin { color: var(--on-accent); }
[data-skin="record"] .d-place small { padding-left: 17px; }
/* notes: a ruled heading as in the sidebar's groups, then reading text */
[data-skin="record"] .d-about h3 { display: flex; align-items: center; gap: 8px; font: 500 10px/1.3 var(--font-small); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
[data-skin="record"] .d-about h3::after { content: ""; flex: 1; border-top: var(--sheet-rule); }
[data-skin="record"] .detail p { margin-top: 8px; color: var(--text); letter-spacing: 0; }

/* the wide form: the same sheet in three columns. The ruler runs on from the title tile in one row, as a row's title does along the axis; the facts stay ruled */
[data-skin="record"] .detail { --wide-h: 310px; }
[data-skin="record"] .detail.wide .d-head { flex-wrap: nowrap; }
[data-skin="record"] .detail.wide .d-cat { flex: none; max-width: 52%; height: 42px; }
[data-skin="record"] .detail.wide :is(.d-cat-ic, .d-catname) { height: 42px; line-height: 42px; }
[data-skin="record"] .detail.wide .d-group { max-width: 130px; padding-right: 10px; }
[data-skin="record"] .detail.wide .d-span { flex: 1 1 0; order: 0; min-width: 0; border-top: 0; box-shadow: inset var(--hair) 0 0 rgb(var(--ink) / .32); }
[data-skin="record"] .detail.wide .cl { order: 1; height: 42px; margin-left: auto; }   /* with no ruler (dated only in years ago) it still stands at the far end */
[data-skin="record"] .detail.wide .d-pic { width: auto; max-height: calc(var(--wide-h) - 62px); margin: -7px 0 -7px -7px; grid-template-rows: minmax(0, 1fr); }
[data-skin="record"] .detail.wide .d-pic .portrait, [data-skin="record"] .detail.wide .d-pic .portrait.seal { box-sizing: border-box; width: 184px; height: 100%; min-height: 186px; margin: 0; }
[data-skin="record"] .detail.wide .d-pic .portrait.seal { background: var(--brackets), linear-gradient(var(--sheet-2) 0 0); }
[data-skin="record"] .detail.wide .d-pic .gallery.hero { margin: 0; width: 184px; }
[data-skin="record"] .detail.wide .d-pic .gallery.hero .g-track { box-sizing: border-box; width: 184px; height: 100%; min-height: 186px; }
[data-skin="record"] .detail.wide .d-pic .gallery.hero .g-slide { height: auto; min-height: 0; }
[data-skin="record"] .detail.wide .d-media { width: 264px; margin: -7px -7px -7px 0; }
[data-skin="record"] .detail.wide .d-media > .gallery { margin: 0; }
:root[data-skin="record"] .detail.wide .d-facts { margin: 12px 0 0; padding: 0; border-inline: 0; border-block: var(--sheet-rule); border-radius: 0; container-type: inline-size; }
[data-skin="record"] .detail.wide dl { gap: 0; }
[data-skin="record"] .detail.wide dl > div { padding: 8px 10px 9px; border-top: 0; border-left: 0; }
[data-skin="record"] .detail.wide dl > div:first-child { padding-left: 0; }
[data-skin="record"] .detail.wide dl > div + div { border-left: var(--sheet-dash); }
[data-skin="record"] .detail.wide dl > div + div::before { content: ""; position: absolute; left: calc(var(--grid-cross) / -2); top: calc(var(--grid-cross) / -2 - var(--hair)); width: var(--grid-cross); height: var(--grid-cross); color: var(--grid-cross-ink); background: var(--cross); }
/* a narrow text column: what doesn't fit starts a row of its own, under a dashed rule, the place always across the whole row */
@container (max-width: 480px) {
  [data-skin="record"] .detail.wide dl > .d-place { grid-column: 1 / -1; margin-inline: 0; padding-left: 0; border-left: 0; border-top: var(--sheet-dash); }
  [data-skin="record"] .detail.wide dl > .d-place::before { left: calc(50% - var(--grid-cross) / 2); top: calc(var(--grid-cross) / -2); }
  [data-skin="record"] .detail.wide .d-place:is(:hover:not(.touch-input *), :focus-visible) { padding-left: 8px; margin-left: -8px; }
  [data-skin="record"] .detail.wide dl:has(> :nth-child(4)) > .d-place::before { display: none; }
}
@container (max-width: 330px) {
  [data-skin="record"] .detail.wide dl > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: var(--sheet-dash); }
  [data-skin="record"] .detail.wide dl > div:nth-child(3):not(.d-place)::before { left: calc(100% - var(--grid-cross) / 2); top: calc(var(--grid-cross) / -2); }
}

/* the place's map: a survey sheet, the region map's marks in small */
[data-skin="record"] .d-map { border-radius: 0; box-shadow: var(--shadow-pop); }
[data-skin="record"] .minimap svg { border-radius: 0; background: var(--sheet-2); box-shadow: none; }
[data-skin="record"] .minimap path { stroke-width: var(--hair); }
[data-skin="record"] .mm-sheet { display: block; }
[data-skin="record"] .mm-land { fill: rgb(var(--ink) / .1); stroke: rgb(var(--ink) / .4); }
[data-skin="record"] .mm-area { fill: rgb(var(--ink) / .55); stroke: var(--g4); }
[data-skin="record"] .mm-grid { fill: none; stroke: rgb(var(--ink) / .13); }
[data-skin="record"] .mm-zero { fill: none; stroke: rgb(var(--ink) / .5); stroke-dasharray: 3 3; }
[data-skin="record"] .mm-aim { fill: none; stroke: var(--g4); }
[data-skin="record"] .mm-pin circle { display: none; }
[data-skin="record"] .mm-brackets { fill: none; stroke: var(--g4); vector-effect: non-scaling-stroke; }
[data-skin="record"] .mm-handle { fill: var(--g4); }
[data-skin="record"] .mm-read { position: absolute; left: 6px; bottom: 6px; padding: 1px 4px; font: 500 var(--t-tiny)/1.3 var(--font-date); color: var(--on-accent); background: var(--solid); }

/* the first-time tip and the next card's peek: the same paper, no glass */
[data-skin="record"] .d-tip { backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--text); }
[data-skin="record"] .d-tip kbd { border-radius: 0; color: var(--text); background: none; box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); font-family: var(--font-date); }
[data-skin="record"] .d-tip-swipe { color: var(--text); }
[data-skin="record"] .d-tip .d-tip-x { border-radius: 0; color: var(--text); }
[data-skin="record"] .peek-card { border-radius: 0; box-shadow: var(--shadow-pop); }
[data-skin="record"] .peek-pic { background: var(--sheet-2); }
[data-skin="record"] .peek-card b { font-weight: 700; letter-spacing: 0; }
/* tooltips: a small sheet too */
[data-skin="record"] .tip { border-radius: 0; box-shadow: var(--shadow-pop); }
[data-skin="record"] .tip kbd { border-radius: 0; color: var(--text); background: none; box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); font-family: var(--font-date); }
/* the Experimental band: one ink, so a lighter wash of it keeps its words readable in light and dark */
[data-skin="record"] .settings-lab > .settings-h { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }

/* ---------- Fonts: sans-serif only (ink on paper, futuristic), three fonts, each with one job (STYLE-GUIDE.md → Typography) ----------
   Roles: --font-ui (Geist) words, menus and category titles; --font-date (Geist Mono) dates, numbers and the small capitals over groups and card fields (--font-small);
   --font-name and --font-title (Space Grotesk) names on bars, sub-bars, tags, the card and search; --font-prose the card's text. The canvas reads them from the page (js/draw/look.js). */
:root[data-skin="record"] { --period-font: var(--font-name); --font-prose: var(--font-ui); --font-small: var(--font-date); }
[data-skin="record"] :is(.item.person .lbl .n, .tune-sample.s-p, .tie-tag, .peek-card b) { font-family: var(--font-name); }
[data-skin="record"] :is(.detail p, .sh-text p) { font-family: var(--font-prose); }
/* Map view (css/map.css): the globe as a chart on the same paper, in the one ink: land the sheet, sea a wash of ink, realms
   as greys, no halo or light, wars pulse in ink */
[data-skin="record"] .mapview {
  --map-land: var(--sheet); --map-sea: color-mix(in oklab, var(--text) 11%, var(--sheet));
  --map-coast: var(--text); --map-coast-a: .75; --map-border: var(--text); --map-border-a: .35; --map-grid: var(--text); --map-grid-a: .1; --map-pic-mono: 1;
  --map-halo-a: 0; --map-limb: var(--text); --map-shade: 0; --map-sea-grad: 0;
  --map-war: var(--text); --map-hot: var(--text); --map-edge: var(--text); --map-icon: var(--on-accent);
  --map-realm-1: color-mix(in oklab, var(--text) 16%, var(--sheet)); --map-realm-2: color-mix(in oklab, var(--text) 30%, var(--sheet)); --map-realm-3: color-mix(in oklab, var(--text) 22%, var(--sheet));
  --map-realm-4: color-mix(in oklab, var(--text) 36%, var(--sheet)); --map-realm-5: color-mix(in oklab, var(--text) 12%, var(--sheet)); --map-realm-6: color-mix(in oklab, var(--text) 26%, var(--sheet));
  --map-realm-a: .9; --map-sheet: var(--sheet);
}

/* ---------- Compare strip (css/compare.css): ink on paper like the rows, square corners, no shadow ---------- */
[data-skin="record"] .cmp { --cmp-bar-k: 0%; --cmp-bar-r: 0; --cmp-ov: rgb(var(--ink) / .07); --cmp-ov-edge: rgb(var(--ink) / .55); box-shadow: 0 var(--hair, 1px) 0 var(--line-strong); }
[data-skin="record"] :is(.cmp-note, .cmp-x, .cmp-tick) { border-radius: 0; }
/* Ties view (css/rel.css): ink on paper, in the relationship-line language: positive ties white, rivals black,
   names on the tags Record's tie tags wear (white with ink, black with white), the person in the middle on the black
   plate the category titles use; one ink for every kind's mark */
[data-skin="record"] .relview {
  --rel-k-family: var(--tie-close); --rel-k-teachers: var(--tie-close); --rel-k-students: var(--tie-close); --rel-k-influences: var(--tie-close);
  --rel-k-influenced: var(--tie-close); --rel-k-friends: var(--tie-close); --rel-k-patrons: var(--tie-close); --rel-k-rivals: var(--tie-conflict);
  --rel-k-era: color-mix(in srgb, var(--text) 40%, transparent);
  --rel-chord: var(--text); --rel-chord-a: .28; --rel-ring: var(--text); --rel-ring-a: .16; --rel-bead: var(--text);
  --rel-pic-ring: var(--text); --rel-ego-ring: var(--text); --rel-sheet: var(--sheet);
  --rel-tag: var(--tie-tag-close, #fff); --rel-tag-ink: var(--tie-tag-close-ink, #0c0e10); --rel-tag-sub: color-mix(in srgb, var(--rel-tag-ink) 62%, var(--rel-tag));
  --rel-conflict-tag: var(--tie-tag-conflict, #000); --rel-conflict-ink: var(--tie-tag-conflict-ink, #fff);
  --rel-ego-tag: var(--solid); --rel-ego-ink: var(--on-accent);
  --rel-pop: 1; --rel-pop-glow: transparent;   /* flat (Hover → Solid, no depth): a hovered person turns black, never grows */
}
:root[data-skin="record"] :is(.rel-sector, .rel-chip, .rel-group, .rel-life) { --k: var(--text); }   /* above the kinds in css/rel.css (loaded later) */
[data-skin="record"] .rel-life[data-kind="rivals"] .rel-bar { background: none; box-shadow: inset 0 0 0 var(--hair) var(--text); }