fertig 1.0.0

package/fertig.css

@@ -0,0 +1,887 @@
+/*! fertig.css v1.0.0 — a classless CSS stylesheet. MIT */
+
+/* Opinions, so you don't have to have them:
+   system type · one accent · one measure · a window on a desktop.
+   Structure is classic (title bar, sunken fields, raised buttons); the finish
+   is macOS (vibrancy, hairlines, soft radii, the blue focus ring).
+   Override the tokens marked "yours"; the rest is the point of view. */
+
+/* typed so they interpolate; untyped custom properties cannot animate */
+@property --a1 { syntax: "<number>"; inherits: true; initial-value: .08 }
+@property --a2 { syntax: "<number>"; inherits: true; initial-value: .06 }
+
+/* Two layers, in this order. Your own unlayered CSS wins over both regardless
+   of specificity, so overriding never needs !important — and neither does this
+   sheet: fertig-a11y comes last, which is how the forced-colors block below
+   beats a .card's box-shadow without one.
+   @property stays outside — registrations are global, not layered. */
+@layer fertig, fertig-a11y;
+
+@layer fertig {
+
+/* ---- tokens ------------------------------------------------- */
+:root {
+  color-scheme: light dark;              /* powers light-dark() below */
+  accent-color: var(--ac);
+  caret-color: var(--ac);
+
+  --f: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+       Roboto, "Helvetica Neue", Arial, sans-serif;                  /* yours */
+  --fm: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+        "Liberation Mono", monospace;                                /* code */
+  --w: 38rem;                            /* ~70 characters — yours */
+  --r: 6px;                              /* control radius */
+  --rw: 10px;                            /* window radius */
+
+  /* ---- palette ------------------------------------------------
+     Low chroma on purpose. Vivid palettes shout; these are meant to sit
+     under text all day. OKLCH, so a step means the same thing in every hue. */
+  --stone-100: oklch(97.5% .004 75); --stone-300: oklch(91% .006 75);
+  --stone-500: oklch(72% .008 75);   --stone-700: oklch(47% .009 75);
+  --stone-900: oklch(26% .008 75);
+
+  --sage-100: oklch(96% .022 155); --sage-300: oklch(87% .042 155);
+  --sage-500: oklch(66% .058 155); --sage-700: oklch(47% .055 155);
+  --sage-900: oklch(29% .038 155);
+
+  --sky-100: oklch(96% .022 240); --sky-300: oklch(87% .045 240);
+  --sky-500: oklch(64% .085 245); --sky-700: oklch(48% .095 250);
+  --sky-900: oklch(30% .06 250);
+
+  --clay-100: oklch(96% .022 45); --clay-300: oklch(88% .045 45);
+  --clay-500: oklch(68% .085 45); --clay-700: oklch(50% .09 40);
+  --clay-900: oklch(31% .055 40);
+
+  --plum-100: oklch(96% .02 320); --plum-300: oklch(88% .038 320);
+  --plum-500: oklch(66% .06 320); --plum-700: oklch(47% .065 320);
+  --plum-900: oklch(29% .042 320);
+
+  --gold-100: oklch(96.5% .028 90); --gold-300: oklch(89% .055 88);
+  --gold-500: oklch(74% .085 85);   --gold-700: oklch(55% .085 80);
+  --gold-900: oklch(33% .05 80);
+
+  /* ---- semantic ----------------------------------------------- */
+  --bg:  light-dark(oklch(93.5% .006 75), oklch(16% .006 75));  /* desktop */
+  --el:  light-dark(oklch(99.4% .002 75), oklch(21% .006 75));  /* paper */
+  --face:light-dark(oklch(97.2% .005 75), oklch(25% .007 75));  /* chrome */
+  --fg:  light-dark(oklch(22% .008 75),   oklch(95% .004 75));
+  --mut: light-dark(oklch(50% .009 75),   oklch(70% .008 75));
+  --bd:  light-dark(oklch(22% .008 75 / .13), oklch(95% .004 75 / .13));
+  --tb:  light-dark(oklch(97.2% .005 75 / .85), oklch(25% .007 75 / .85));
+  --ac:  light-dark(var(--sky-700), oklch(78% .085 245));       /* yours */
+  --on-ac: light-dark(#fff, #06121f);    /* text on the accent, both themes */
+
+  /* depth: hairline + soft shadow, macOS weight.
+     --sh is an ordinary colour — override it with any notation you like;
+     the alphas come off it through relative colour syntax. */
+  --sh:  oklch(23.1% .007 286);
+  --a1: .08; --a2: .06;
+  --sh1: oklch(from var(--sh) l c h / var(--a1));
+  --sh2: oklch(from var(--sh) l c h / var(--a2));
+  --up:  0 1px 1px var(--sh1);
+  --up2: 0 1px 2px var(--sh1), 0 6px 16px -6px var(--sh2);
+  --dn:  inset 0 1px 2px oklch(from var(--sh) l c h / .08);
+  --caps: .74em/1.4 var(--f);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme=light]) { --a1: .5; --a2: .45 }
+}
+@supports (color: contrast-color(red)) {
+  :root { --on-ac: contrast-color(var(--ac)) }   /* survives any --ac override */
+}
+[data-theme=light] { color-scheme: light; --a1: .08; --a2: .06 }
+[data-theme=dark]  { color-scheme: dark;  --a1: .5;  --a2: .45 }
+
+/* ---- base --------------------------------------------------- */
+*, ::before, ::after { box-sizing: border-box }
+/* three prefixed/legacy-looking declarations survive in this sheet, and only
+   because no engine ships an alternative today: this one (Safari has no
+   unprefixed text-size-adjust), the autofill repaint below, and the progress
+   pseudo-elements. Everything else here is unprefixed modern CSS. */
+html { font: 16px/1.65 var(--f); -webkit-text-size-adjust: 100%; tab-size: 2 }
+body {
+  margin: 0; background: var(--bg); color: var(--fg);
+  overflow-wrap: break-word;                  /* a pasted URL cannot widen the page */
+  font-variant-numeric: slashed-zero tabular-nums;
+}
+::selection { background: color-mix(in srgb, var(--ac) 28%, transparent) }
+:focus-visible {                          /* the macOS ring */
+  outline: 3px solid color-mix(in srgb, var(--ac) 45%, transparent);
+  outline-offset: 1px; border-radius: var(--r);
+}
+img, svg, video, iframe { display: block; max-width: 100%; height: auto }
+img, video { border-radius: var(--r); box-shadow: var(--up2) }
+
+/* ---- layout: a window on a desktop --------------------------- */
+body > * { max-width: var(--w); margin-inline: auto; padding-inline: 1.9rem }
+body > header, body > main, body > footer {
+  background: var(--el); border-inline: 1px solid var(--bd);
+}
+body > header { padding-block: 2.4rem .8rem }
+body > main { padding-bottom: 2.8rem }
+body > footer {
+  padding-block: 1.2rem 2rem; color: var(--mut); font-size: .85em;
+  border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
+  border-radius: 0 0 var(--rw) var(--rw); margin-bottom: 2.5rem;
+  box-shadow: 0 18px 30px -22px oklch(from var(--sh) l c h / .5);
+}
+/* nav = unified toolbar: full-bleed, vibrant, contents on the measure */
+body > nav {
+  position: sticky; top: 0; z-index: 9; max-width: none;
+  padding-inline: max(1.9rem, calc(50% - var(--w) / 2 + 1.9rem),
+                  env(safe-area-inset-left), env(safe-area-inset-right));
+  display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center;
+  padding-block: calc(.6rem + env(safe-area-inset-top, 0px)) .6rem;
+  background: var(--tb); color: var(--fg);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1px solid var(--bd); font-size: .92em;
+}
+body > nav a { color: var(--fg); text-decoration: none; opacity: .75 }
+body > nav a:hover { opacity: 1 }
+body > nav :is(strong, b) a { opacity: 1 }        /* the wordmark is not a link among links */
+body > nav ul {
+  display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; padding: 0; margin: 0;
+  flex: 1;                       /* takes the slack, so a trailing control sits at the end */
+}
+
+/* ---- type --------------------------------------------------- */
+h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin: 1.4rem 0 .7rem; text-wrap: balance }
+h1 { font-size: 1.55rem; letter-spacing: -.015em }
+h2 { font-size: 1.25rem; letter-spacing: -.01em; margin-top: 2.4rem }
+h3 { font-size: 1.08rem; margin-top: 1.9rem }
+h4 { font-size: 1rem }
+h5, h6 { font: 700 var(--caps); text-transform: uppercase; letter-spacing: .1em; color: var(--mut) }
+:is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0 }
+@supports (text-box: trim-both cap alphabetic) {
+  h1, h2, h3, h4 { text-box: trim-both cap alphabetic }   /* optical, not metric */
+}
+/* …but a new section still needs air above its heading */
+:is(section, article) + :is(section, article) { margin-top: 2.8rem }
+
+p, ul, ol, dl, pre, blockquote, table, figure, details, fieldset, hr { margin: 1.1rem 0 }
+p { text-wrap: pretty }
+a { color: var(--ac); text-underline-offset: 3px; text-decoration-thickness: 1px }
+a:hover { text-decoration-thickness: 2px }   /* quiet — no invert mid-paragraph */
+small { font-size: .85em; color: var(--mut) }
+hr { border: 0; border-top: 1px solid var(--bd); margin: 2.2rem 0 }
+mark { background: light-dark(#ffe58f, #5c4a15); color: inherit; border-radius: 3px; padding: 0 .15em }
+abbr[title] { text-decoration: underline dotted; cursor: help }
+blockquote {
+  border-inline-start: 2px solid var(--bd);
+  padding-block: .15rem; padding-inline: 1.2rem 0; color: var(--mut);
+}
+ul, ol { padding-inline-start: 1.5rem }
+li::marker { color: var(--mut) }
+dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem }
+dt { color: var(--mut) }
+dd { margin: 0 }
+figcaption { font-size: .85em; color: var(--mut); text-align: center }
+
+/* ---- code --------------------------------------------------- */
+code, kbd, samp, pre { font-family: var(--fm); font-size: .9em }
+:not(pre) > code, samp {
+  background: var(--face); border: 1px solid var(--bd);
+  border-radius: var(--r); padding: .08em .35em;
+}
+kbd {
+  background: var(--face); border: 1px solid var(--bd); border-bottom-width: 2px;
+  border-radius: var(--r); padding: .08em .4em; box-shadow: var(--up);
+}
+pre {
+  background: var(--face); border: 1px solid var(--bd); border-radius: var(--r);
+  padding: 1rem; overflow-x: auto;
+}
+pre code { background: none; border: 0; padding: 0; font-size: 1em }
+
+/* Syntax theme. The sheet ships no highlighter — bring highlight.js or Prism
+   and the tokens land in this palette, in both themes. */
+:root {
+  --syn-comment: light-dark(#6b7280, #8b949e);
+  --syn-key:     light-dark(#7c3aed, #c4a7fb);
+  --syn-str:     light-dark(#15803d, #7ee787);
+  --syn-num:     light-dark(#b45309, #f0b866);
+  --syn-fn:      light-dark(#1d4ed8, #93c5fd);
+  --syn-attr:    light-dark(#b91c1c, #ff9492);
+}
+:is(.hljs-comment, .hljs-quote, .token.comment, .token.prolog, .token.doctype) {
+  color: var(--syn-comment); font-style: italic;
+}
+:is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type, .hljs-built_in,
+    .token.keyword, .token.atrule, .token.rule, .token.important, .token.selector) {
+  color: var(--syn-key);
+}
+:is(.hljs-string, .hljs-meta-string, .token.string, .token.attr-value, .token.char) {
+  color: var(--syn-str);
+}
+:is(.hljs-number, .hljs-symbol, .hljs-bullet, .token.number, .token.boolean,
+    .token.constant, .token.unit) {
+  color: var(--syn-num);
+}
+:is(.hljs-title, .hljs-name, .hljs-section, .hljs-function,
+    .token.tag, .token.function, .token.class-name) {
+  color: var(--syn-fn);
+}
+:is(.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable,
+    .token.attr-name, .token.property, .token.variable) {
+  color: var(--syn-attr);
+}
+:is(.hljs-punctuation, .hljs-operator, .token.punctuation, .token.operator) {
+  color: var(--mut);
+}
+:is(.hljs-emphasis, .token.italic) { font-style: italic }
+:is(.hljs-strong, .token.bold) { font-weight: 700 }
+:is(.hljs-deletion, .token.deleted) { color: light-dark(#c0392b, #ff6b6b) }
+:is(.hljs-addition, .token.inserted) { color: light-dark(#15803d, #7ee787) }
+
+/* ---- table -------------------------------------------------- */
+table { width: 100%; border-collapse: collapse; font-size: .92em }
+th, td {
+  border-bottom: 1px solid var(--bd); padding-block: .55rem;
+  padding-inline: 0 .7rem; text-align: start;
+}
+th:last-child, td:last-child { padding-inline-end: 0 }
+thead th {
+  border-bottom: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
+  font: 700 var(--caps); text-transform: uppercase; letter-spacing: .09em; color: var(--mut);
+  padding-bottom: .4rem;
+}
+tbody tr:last-child td { border-bottom: 0 }
+/* a totals row is not just another row */
+tfoot td { font-weight: 700; border-top: 1px solid var(--bd); border-bottom: 0 }
+/* our text-align was overriding HTML own alignment; honour it for numbers */
+:is(th, td)[align=right]  { text-align: right }
+:is(th, td)[align=center] { text-align: center }
+tbody tr:hover { background: var(--face) }
+@media (width <= 40rem) {
+  table { display: block; overflow-x: auto; overscroll-behavior-x: contain }
+}
+caption { text-align: start; color: var(--mut); font-size: .85em; padding-bottom: .35rem }
+
+/* ---- forms: fields sink, buttons rise ------------------------ */
+button, input, select, textarea { font: inherit; color: inherit }
+label { display: block; font-size: .85em; color: var(--mut) }
+label:has(input) { font-size: 1rem; color: var(--fg) }
+/* a label following a field belongs to the next one: give it air, except in a
+   .row, where the toolbar is horizontal and the margin would knock it askew */
+:is(input, select, textarea) + label { margin-top: .9rem }
+textarea { width: 100%; min-height: 5rem; resize: vertical }
+@supports (field-sizing: content) {
+  textarea { field-sizing: content; max-height: 24rem }
+}
+input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset]),
+select, textarea {
+  display: block; width: 100%; padding: .4em .6em; background: var(--el);
+  border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--dn);
+}
+select {
+  appearance: none; padding-inline-end: 2.2rem;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+                    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 17px) 55%, calc(100% - 12.5px) 55%;
+  background-size: 5px 5px; background-repeat: no-repeat;
+}
+select:dir(rtl) { background-position: 12.5px 55%, 17px 55% }
+select[multiple] { background-image: none; padding-inline-end: .6em }
+
+/* a <select> whose dropdown can finally be styled like the rest of the sheet */
+@supports (appearance: base-select) {
+  select, ::picker(select) { appearance: base-select }
+  select {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: .6em; background-image: none; padding-inline-end: .7em;
+  }
+  select::picker-icon {
+    content: ""; inline-size: .45em; block-size: .45em; flex: none;
+    border: solid currentColor; border-width: 0 1px 1px 0;
+    rotate: 45deg; translate: 0 -.15em; opacity: .7;
+    transition: rotate .15s ease, translate .15s ease;
+  }
+  select:open::picker-icon { rotate: 225deg; translate: 0 .1em }
+  ::picker(select) {
+    min-width: anchor-size(width);            /* never narrower than the field */
+    border: 1px solid var(--bd); border-radius: var(--r); padding: .3rem;
+    background: var(--el); margin-block-start: .35rem;
+    box-shadow: var(--up2), 0 20px 40px -14px oklch(from var(--sh) l c h / .4);
+  }
+  option {
+    display: flex; align-items: center; gap: .5em; padding: .4em .6em;
+    border-radius: calc(var(--r) - 2px);
+  }
+  option:hover { background: var(--face) }
+  option:checked { background: var(--ac); color: var(--on-ac) }
+  option::checkmark { order: 1; margin-inline-start: auto; content: "✓" }
+}
+:is(input,select,textarea):hover:not(:disabled) { border-color: color-mix(in srgb, var(--fg) 25%, transparent) }
+:is(input,select,textarea):focus-visible { border-color: var(--ac) }
+input[type=checkbox], input[type=radio] {
+  width: 1.15em; height: 1.15em; margin: 0 .45em 0 0; vertical-align: -.18em;
+}
+label:has(input[type=checkbox]), label:has(input[type=radio]) { line-height: 1.9 }
+input[type=range] { width: 100%; height: 1.15em }
+::placeholder { color: var(--mut) }
+@supports selector(::spelling-error) {
+  ::spelling-error { text-decoration: wavy underline light-dark(#c0392b, #ff6b6b) }
+  ::grammar-error  { text-decoration: wavy underline light-dark(#9a6700, #d29922) }
+}
+:is(input, textarea):read-only:not(:disabled) { background: var(--face); cursor: default }
+label:has(+ :required)::after, label:has(:required)::after {
+  content: " *"; color: var(--ac);            /* mark what is actually required */
+}
+/* the browser paints autofilled fields yellow; repaint them ourselves */
+input:autofill, input:autofill:hover, input:autofill:focus {
+  -webkit-text-fill-color: var(--fg);
+  box-shadow: var(--dn), inset 0 0 0 100px var(--el);
+  caret-color: var(--ac);
+}
+:disabled { color: var(--mut); cursor: not-allowed; box-shadow: none }
+/* No notched border: the legend becomes the panel title. The float is not
+   nostalgia — a legend keeps its magic placement under block, grid and flex
+   fieldsets alike, and floating it is still the only way out. */
+fieldset {
+  border: 1px solid var(--bd); border-radius: var(--r); padding: .9rem 1rem 1rem;
+  background: var(--face);
+}
+fieldset:focus-within { border-color: color-mix(in srgb, var(--ac) 45%, var(--bd)) }
+legend {
+  float: left; width: 100%; margin-bottom: .8rem; padding: 0 0 .6rem;
+  border-bottom: 1px solid var(--bd);
+  font-size: .95em; font-weight: 700; color: var(--fg);
+}
+legend + * { clear: left }
+
+button, [type=submit], [type=button], [type=reset],
+:where(a.primary, a[role=button]), ::file-selector-button {
+  display: inline-block; text-decoration: none; text-align: center;
+  padding: .38em 1.1em; background: var(--el); color: var(--fg); cursor: pointer;
+  border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--up);
+  font: inherit; min-width: 5rem;
+}
+:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled) { background: var(--face) }
+:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled) {
+  box-shadow: var(--dn); translate: 0 .5px;
+}
+[type=submit], .primary { background: var(--ac); border-color: transparent; color: var(--on-ac) }
+:is([type=submit], .primary, a.primary):hover:not(:disabled) {
+  background: oklch(from var(--ac) calc(l + .05) c h);
+}
+
+/* button detail: sizes, variants, toggles, icon and block forms */
+[data-size=sm] { padding: .2em .7em; font-size: .85em; min-width: 0 }
+[data-size=lg] { padding: .55em 1.5em; font-size: 1.05em }
+button[data-icon] { min-width: 0; padding: .38em .62em; line-height: 1 }
+[data-block] { display: block; width: 100%; min-width: 0 }
+[data-variant=ghost] { background: none; border-color: transparent; box-shadow: none }
+[data-variant=ghost]:hover:not(:disabled) { background: var(--face); border-color: var(--bd) }
+[data-variant=link] {
+  background: none; border: 0; box-shadow: none; min-width: 0; padding-inline: .2em;
+  color: var(--ac); text-decoration: underline; text-underline-offset: 3px;
+}
+[data-variant=link]:hover:not(:disabled) { background: none; text-decoration-thickness: 2px }
+button[aria-pressed=true] { background: var(--face); color: var(--ac); font-weight: 700 }
+button[aria-pressed=true]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--fg) 7%, var(--face));
+}
+/* filled buttons get a lit top edge, the way a real control does */
+:is([type=submit], .primary) { box-shadow: var(--up), inset 0 1px 0 light-dark(#ffffff33, #ffffff26) }
+:is([type=submit], .primary):active:not(:disabled) { box-shadow: inset 0 1px 3px #0006 }
+
+@supports (corner-shape: squircle) {
+  * { corner-shape: squircle }        /* inert wherever the radius is 0 */
+}
+
+/* ---- disclosure / misc -------------------------------------- */
+details {
+  border: 1px solid var(--bd); border-radius: var(--r);
+  padding: .7rem 1.1rem; background: var(--el);
+}
+summary { cursor: pointer; font-weight: 700; list-style: none }
+summary::before { content: "▸ "; color: var(--mut) }
+details[open] > summary::before { content: "▾ " }
+details[open] > summary { margin-bottom: .6rem }
+dialog {
+  background: var(--el); color: var(--fg); border: 1px solid var(--bd);
+  border-radius: var(--rw); padding: 1.4rem; max-width: min(30rem, 92dvw);
+  box-shadow: 0 32px 64px -16px oklch(from var(--sh) l c h / .45);
+}
+dialog > :last-child:not(footer) { margin-bottom: 0 }
+dialog, [popover] { overscroll-behavior: contain }
+dialog::backdrop { background: oklch(from var(--sh) l c h / .35); backdrop-filter: blur(3px) }
+
+/* dialog anatomy: an optional header and footer, pinned while the body scrolls.
+   Sticky rather than a grid, because a classless sheet has no wrapper around
+   the loose middle children to make a grid row out of. */
+dialog:has(> :is(header, footer)) { max-block-size: min(44rem, 85dvh); overflow: auto }
+dialog > :is(header, footer) {
+  position: sticky; z-index: 1;
+  margin-inline: -1.4rem; padding: .7rem 1.4rem;
+  background: var(--el);          /* the dialog's own surface, so it reads as one sheet */
+}
+dialog > header {
+  inset-block-start: -1.4rem; margin-block: -1.4rem 1rem;
+  font-weight: 700; border-bottom: 1px solid var(--bd);
+  border-radius: var(--rw) var(--rw) 0 0;
+}
+/* the title carries the header's weight; it does not need its own margins */
+dialog > header > :is(h1, h2, h3, h4, p) { margin: 0; font-size: 1.05rem }
+dialog > footer {
+  inset-block-end: -1.4rem; margin-block: 1rem -1.4rem;
+  border-top: 1px solid var(--bd); border-radius: 0 0 var(--rw) var(--rw);
+  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
+  justify-content: flex-end;                  /* actions sit at the end edge */
+}
+/* a note beside the buttons pushes them over, rather than sitting under them */
+dialog > footer > :is(p, span):first-child { margin: 0; margin-inline-end: auto; color: var(--mut) }
+/* sheets come up, they do not appear */
+@media (prefers-reduced-motion: no-preference) and (update: fast) {
+  dialog, dialog::backdrop {
+    transition: opacity .2s, translate .2s, display .2s allow-discrete, overlay .2s allow-discrete;
+  }
+  dialog { opacity: 0; translate: 0 10px }
+  dialog[open] { opacity: 1; translate: 0 }
+  dialog::backdrop { opacity: 0 }
+  dialog[open]::backdrop { opacity: 1 }
+  @starting-style { dialog[open] { opacity: 0; translate: 0 10px } }
+  @starting-style { dialog[open]::backdrop { opacity: 0 } }
+  [popover] {
+    opacity: 0; translate: 0 -4px;
+    transition: opacity .13s, translate .13s, display .13s allow-discrete, overlay .13s allow-discrete;
+  }
+  [popover]:popover-open { opacity: 1; translate: 0 }
+  @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -4px } }
+}
+search { display: block }
+::target-text { background: color-mix(in srgb, var(--ac) 28%, transparent) }
+aside {
+  border: 1px solid var(--bd); border-inline-start: 3px solid var(--ac);
+  border-radius: var(--r); border-start-start-radius: 0; border-end-start-radius: 0;
+  background: var(--el); padding: .7rem 1.1rem;
+}
+progress { width: 100%; height: .5rem; border: 0; border-radius: calc(infinity * 1px); background: var(--face) }
+progress::-webkit-progress-bar { background: var(--face); border-radius: calc(infinity * 1px) }
+progress::-webkit-progress-value { background: var(--ac); border-radius: calc(infinity * 1px) }
+progress::-moz-progress-bar { background: var(--ac); border-radius: calc(infinity * 1px) }
+
+/* details can only animate to auto height once keywords interpolate */
+@supports selector(::details-content) {
+  @media (prefers-reduced-motion: no-preference) and (update: fast) {
+    :root { interpolate-size: allow-keywords }
+    details::details-content {
+      block-size: 0; overflow: clip;
+      transition: block-size .28s ease, content-visibility .28s allow-discrete;
+    }
+    details[open]::details-content { block-size: auto }
+  }
+}
+
+/* #core-omit-start */
+/* ---- components, addressed by ARIA rather than by class ----- */
+
+/* segmented control: <div role=group> of buttons */
+[role=group] { display: inline-flex; vertical-align: middle }
+[role=group] > * { border-radius: 0; margin-inline-start: -1px; box-shadow: none; min-width: 0 }
+[role=group] > :first-child {
+  margin-inline-start: 0;
+  border-start-start-radius: var(--r); border-end-start-radius: var(--r);
+}
+[role=group] > :last-child {
+  border-start-end-radius: var(--r); border-end-end-radius: var(--r);
+}
+[role=group] > [aria-pressed=true] { background: var(--face); color: var(--ac); font-weight: 700 }
+
+/* tabs: <div role=tablist> of <button role=tab aria-selected> */
+[role=tablist] { display: flex; gap: .1rem; border-bottom: 1px solid var(--bd); margin: 1.1rem 0 }
+[role=tab] {
+  background: none; border: 0; box-shadow: none; min-width: 0; color: var(--mut);
+  padding: .45em .9em; border-radius: var(--r) var(--r) 0 0; margin-bottom: -1px;
+}
+[role=tab]:hover:not(:disabled) { background: var(--face); color: var(--fg) }
+[role=tab][aria-selected=true] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--ac) }
+
+/* switch: <input type=checkbox role=switch> */
+input[type=checkbox][switch],
+input[type=checkbox][role=switch] {
+  appearance: none; width: 2.2em; height: 1.3em; border-radius: calc(infinity * 1px); border: 0;
+  background: color-mix(in srgb, var(--fg) 20%, transparent);
+  position: relative; cursor: pointer; vertical-align: -.3em; margin-inline-end: .5em;
+}
+input[switch]::after, input[role=switch]::after {
+  content: ""; position: absolute; inset-block-start: .14em; inset-inline-start: .14em;
+  width: 1.02em; height: 1.02em; border-radius: 50%; background: #fff; box-shadow: var(--up);
+  transition: translate .16s ease;
+}
+input[switch]:checked, input[role=switch]:checked { background: var(--ac) }
+/* translate is physical, so the knob is told which way to travel */
+input[switch]:checked::after, input[role=switch]:checked::after { translate: .9em 0 }
+:is(input[switch], input[role=switch]):checked:dir(rtl)::after { translate: -.9em 0 }
+
+/* menu: any [popover] */
+[popover] {
+  background: var(--el); color: var(--fg); border: 1px solid var(--bd);
+  border-radius: var(--r); padding: .3rem; min-width: 12rem;
+  max-block-size: 60dvh; overflow: auto; font-size: .95em;
+  box-shadow: var(--up2), 0 20px 40px -14px oklch(from var(--sh) l c h / .4);
+}
+/* anchor to the invoking button; without support it centres, which is fine */
+@supports (position-area: block-end span-inline-end) {
+  [popover]:popover-open {
+    position: fixed;
+    inset: auto;                           /* clear the UA inset:0 centring */
+    position-anchor: auto;                 /* the button that opened it */
+    position-area: block-end span-inline-end;   /* keywords must share an axis */
+    position-try-fallbacks: flip-block, flip-inline;
+    margin: .35rem 0 0;
+  }
+  @supports (min-width: anchor-size(width)) {
+    [popover]:popover-open {
+      min-width: max(12rem, anchor-size(width));
+      position-visibility: anchors-visible;   /* hide with its anchor */
+    }
+  }
+}
+[popover] :is(ul, menu) { list-style: none; padding: 0; margin: 0 }
+/* specificity has to clear the generic button rule (0,3,0) — hence :not(:disabled) */
+[popover] :is(a, button):not(:disabled) {
+  display: block; width: 100%; text-align: start; background: none; border: 0;
+  box-shadow: none; min-width: 0; padding: .4em .6em; text-decoration: none;
+  color: inherit; border-radius: calc(var(--r) - 2px); font-weight: 400;
+}
+[popover] :is(a, button):hover:not(:disabled) { background: var(--ac); color: var(--on-ac) }
+[popover] hr { margin: .3rem 0 }
+
+/* breadcrumbs: <nav aria-label="Breadcrumb"><ol> */
+nav[aria-label] ol { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; padding: 0; font-size: .9em }
+nav[aria-label] li + li::before { content: "/"; margin-inline-end: .5em; color: var(--mut) }
+
+/* busy: [aria-busy=true] */
+[aria-busy=true] { cursor: progress }
+[aria-busy=true]::before {
+  content: ""; display: inline-block; width: .85em; height: .85em; margin-inline-end: .55em;
+  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
+  vertical-align: -.1em;
+}
+@media (prefers-reduced-motion: no-preference) and (update: fast) {
+  [aria-busy=true]::before { animation: fertig-spin .6s linear infinite }
+}
+@keyframes fertig-spin { to { rotate: 360deg } }
+
+/* tooltip: [data-tooltip] */
+[data-tooltip] { position: relative }
+[data-tooltip]:is(:hover, :focus-visible)::after {
+  content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%;
+  translate: -50% -.45em; z-index: 10; white-space: nowrap; pointer-events: none;
+  background: light-dark(#1d1d1f, #3a3a40); color: #fff; font-size: .8em;
+  padding: .25em .55em; border-radius: var(--r); box-shadow: var(--up2);
+}
+
+/* tones: retint any component by redefining its accent */
+[data-tone=ok]   { --ac: light-dark(var(--sage-700), oklch(76% .085 155)) }
+[data-tone=warn] { --ac: light-dark(var(--gold-700), oklch(80% .095 85)) }
+[data-tone=err]  { --ac: light-dark(var(--clay-700), oklch(75% .105 35)) }
+[data-tone] .badge, .badge[data-tone] { color: var(--ac); border-color: var(--ac) }
+
+/* ---- parity with the component libraries --------------------- */
+
+/* avatar: works on an <img> or on initials in a <span> */
+[data-avatar] {
+  display: inline-grid; place-items: center; flex: none; overflow: hidden;
+  inline-size: 2.5rem; aspect-ratio: 1; border-radius: 50%;
+  background: var(--face); border: 1px solid var(--bd);
+  font-size: .8em; font-weight: 700; color: var(--mut); object-fit: cover;
+}
+[data-avatar=sm] { inline-size: 1.75rem; font-size: .7em }
+[data-avatar=lg] { inline-size: 3.5rem; font-size: 1em }
+
+/* skeleton: put it on the element that is still loading */
+[data-skeleton] {
+  color: transparent; border-radius: var(--r); pointer-events: none;
+  user-select: none; min-height: 1em;
+  background: linear-gradient(90deg, var(--face),
+              color-mix(in srgb, var(--fg) 9%, var(--face)), var(--face));
+  background-size: 200% 100%;
+}
+[data-skeleton] * { visibility: hidden }
+@media (prefers-reduced-motion: no-preference) and (update: fast) {
+  [data-skeleton] { animation: fertig-shimmer 1.4s linear infinite }
+  @keyframes fertig-shimmer { to { background-position: -200% 0 } }
+}
+
+/* sheet / drawer: the same <dialog>, docked to an edge */
+dialog[data-side] { max-width: none; margin: 0; border-radius: 0; padding: 1.4rem }
+dialog[data-side=right] {
+  inset: 0 0 0 auto; block-size: 100dvh; inline-size: min(28rem, 92dvw);
+  border-block: 0; border-inline-end: 0;
+}
+dialog[data-side=left] {
+  inset: 0 auto 0 0; block-size: 100dvh; inline-size: min(28rem, 92dvw);
+  border-block: 0; border-inline-start: 0;
+}
+dialog[data-side=bottom] {
+  inset: auto 0 0 0; inline-size: 100%; max-block-size: 85dvh;
+  border-radius: var(--rw) var(--rw) 0 0; border-bottom: 0;
+}
+@media (prefers-reduced-motion: no-preference) and (update: fast) {
+  dialog[data-side=right] { translate: 100% 0 }
+  dialog[data-side=left]  { translate: -100% 0 }
+  dialog[data-side=bottom]{ translate: 0 100% }
+  dialog[data-side][open] { translate: 0 0 }
+  @starting-style {
+    dialog[data-side=right][open] { translate: 100% 0 }
+    dialog[data-side=left][open]  { translate: -100% 0 }
+    dialog[data-side=bottom][open]{ translate: 0 100% }
+  }
+}
+
+/* toast: a non-modal popover parked in a corner */
+[popover][data-toast] {
+  position: fixed; inset: auto 1rem 1rem auto; margin: 0;
+  min-width: 16rem; max-width: min(24rem, 92dvw); padding: .8rem 1rem;
+}
+@supports (position-area: block-end span-inline-end) {
+  [popover][data-toast]:popover-open {
+    position-area: none; inset: auto 1rem 1rem auto; min-width: 16rem;
+  }
+}
+
+/* list group: a plain <menu> outside a popover is a bordered list */
+menu {
+  list-style: none; padding: 0; margin: 1.1rem 0;
+  border: 1px solid var(--bd); border-radius: var(--r); background: var(--el);
+}
+menu > li { padding: .55rem .85rem }
+menu > li + li { border-top: 1px solid var(--bd) }
+[popover] menu { border: 0; padding: 0; margin: 0; background: none }
+[popover] menu > li { padding: 0 }
+[popover] menu > li + li { border-top: 0 }
+
+/* app layout: a sticky sidebar beside the content */
+[data-layout=sidebar] { display: grid; gap: 1.5rem; align-items: start }
+@media (width >= 56rem) {
+  [data-layout=sidebar] { grid-template-columns: 15rem minmax(0, 1fr) }
+  [data-layout=sidebar] > :first-child { position: sticky; top: 4.5rem }
+}
+[data-layout=sidebar] > * { min-width: 0 }
+
+/* carousel: scroll snapping, with real scroll buttons where they exist */
+[data-carousel] {
+  display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem;
+  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
+}
+[data-carousel] > * { scroll-snap-align: start; flex: 0 0 min(20rem, 82%) }
+
+/* #core-omit-end */
+
+/* ---- the only classes (all optional) ------------------------ */
+.muted  { color: var(--mut) }
+.center { text-align: center }
+.wide   { max-width: 66rem }
+.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center }
+/* Form controls are full-width blocks by default, which is right in a form and
+   wrong in a toolbar. Inside a .row they size to the row instead. */
+.row :is(input:not([type=checkbox],[type=radio]), textarea) {
+  width: auto; flex: 1 1 10rem; min-width: 0;
+}
+.row select { width: auto; flex: 0 1 auto; min-width: 0 }
+.row :is(progress, meter) { width: auto; flex: 1 1 6rem }
+.row > label { flex: none; margin-top: 0 }
+.grid   { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)) }
+.card {
+  container-type: inline-size;                 /* query it: @container (min-width: …) */
+  border: 1px solid var(--bd); border-radius: var(--r); padding: .9rem;
+  background: var(--el); box-shadow: var(--up2);
+  display: flex; flex-direction: column;      /* so footers line up across a row */
+  gap: .85rem;                                /* spacing is the container's job */
+}
+.card > * { margin-block: 0 }
+
+/* ---- layout utilities --------------------------------------
+   Names borrowed from Tailwind on purpose: if you know them there, they mean
+   the same thing here, so muscle memory carries over and nothing new has to
+   be learned. Layout and width only — there is no colour or type scale, and
+   no responsive variants, because those want a build step and this file does
+   not have one. The margins are flow-relative (ms/me, not
+   ml/mr), so a toolbar still works in Persian or Arabic. */
+.flex { display: flex }
+/* .grid is already above: auto-fit columns. Adding grid-cols-N pins the count. */
+.flex-col { flex-direction: column }
+.flex-wrap { flex-wrap: wrap }
+.flex-1 { flex: 1; min-width: 0 }      /* min-width, or a <pre> inside blows the row open */
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
+.items-start { align-items: start }
+.items-center { align-items: center }
+.items-end { align-items: end }
+.justify-start { justify-content: start }
+.justify-center { justify-content: center }
+.justify-end { justify-content: end }
+.justify-between { justify-content: space-between }
+.gap-0 { gap: 0 }
+.gap-1 { gap: .25rem }
+.gap-2 { gap: .5rem }
+.gap-3 { gap: .75rem }
+.gap-4 { gap: 1rem }
+.gap-6 { gap: 1.5rem }
+.mx-auto { margin-inline: auto }
+.ms-auto { margin-inline-start: auto }
+.me-auto { margin-inline-end: auto }
+.w-full { width: 100% }
+/* max-inline-size, not max-width, so the scale still means "along the text" in
+   a vertical writing mode. The whole Tailwind scale, because a half-scale
+   where .max-w-2xl works and .max-w-3xl silently does not is worse than none.
+   These outrank the `body > *` measure (0,1,0 beats 0,0,1), so they retarget
+   a page container as readily as anything inside one. */
+.max-w-xs   { max-inline-size: 20rem }
+.max-w-sm   { max-inline-size: 24rem }
+.max-w-md   { max-inline-size: 28rem }
+.max-w-lg   { max-inline-size: 32rem }
+.max-w-xl   { max-inline-size: 36rem }
+.max-w-2xl  { max-inline-size: 42rem }
+.max-w-3xl  { max-inline-size: 48rem }
+.max-w-4xl  { max-inline-size: 56rem }
+.max-w-5xl  { max-inline-size: 64rem }
+.max-w-6xl  { max-inline-size: 72rem }
+.max-w-7xl  { max-inline-size: 80rem }
+.max-w-full { max-inline-size: 100% }
+.max-w-none { max-inline-size: none }
+/* the measure the sheet already sets prose on, as a class you can reach for */
+.max-w-prose { max-inline-size: var(--w) }
+.hidden { display: none }
+
+.badge {
+  border: 1px solid var(--bd); border-radius: calc(infinity * 1px); background: var(--face);
+  padding: .1em .6em; font: 700 var(--caps); color: var(--mut);
+}
+
+/* card anatomy: an optional header, footer, and full-bleed media */
+.card > :is(header, footer) {
+  margin-inline: -.9rem; padding: .55rem .9rem; background: var(--face);
+}
+.card > header {
+  margin-top: -.9rem; font-weight: 700;
+  border-bottom: 1px solid var(--bd); border-radius: var(--r) var(--r) 0 0;
+}
+.card > footer {
+  margin-top: auto; margin-bottom: -.9rem;    /* pinned to the bottom edge */
+  color: var(--mut); font-size: .85em;
+  border-top: 1px solid var(--bd); border-radius: 0 0 var(--r) var(--r);
+}
+.card > :is(img, video):first-child {
+  align-self: stretch; width: auto; max-width: none; margin: -.9rem -.9rem 0;
+  aspect-ratio: 16 / 9; object-fit: cover;
+  border: 0; border-radius: var(--r) var(--r) 0 0; box-shadow: none;
+}
+/* inset, not a border, so a tone never shifts the card geometry */
+.card[data-tone] { box-shadow: var(--up2), inset 0 2px 0 var(--ac) }
+/* a header paints over the card inset, so it carries the rule itself */
+.card[data-tone] > header:first-child { box-shadow: inset 0 2px 0 var(--ac) }
+/* a card that is itself a link or button reacts like one */
+:is(a, button).card {
+  display: flex; width: 100%;                 /* keep the column from .card */
+  text-align: start; color: inherit;
+  text-decoration: none; font: inherit;
+}
+:is(a, button).card:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--ac) 45%, var(--bd));
+  box-shadow: var(--up2), 0 12px 26px -14px oklch(from var(--sh) l c h / .4);
+  translate: 0 -2px;
+}
+:is(a, button).card:active:not(:disabled) { translate: 0 0 }
+
+/* ---- details ------------------------------------------------ */
+/* beats .card/.row's display without !important, which a layer would let
+   win over your own sheet; hidden=until-found must stay findable */
+[hidden]:not([hidden=until-found]) { display: none }
+@media (prefers-reduced-motion: no-preference) and (update: fast) { html { scroll-behavior: smooth } }
+:target { scroll-margin-top: 4rem }                 /* clears the toolbar */
+:is(h1,h2,h3,h4):target { background: color-mix(in srgb, var(--ac) 12%, transparent) }
+a[target=_blank]::after { content: " ↗"; font-size: .85em; opacity: .6 }
+a:has(> img), a:has(> code) { text-decoration: none }
+sup, sub { line-height: 0; font-size: .75em }       /* stop them stretching lines */
+q { quotes: "“" "”" "‘" "’" }
+dfn { font-style: normal; font-weight: 700 }
+ins { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--ac) }
+del { color: var(--mut) }
+address { font-style: normal; color: var(--mut) }
+hgroup > * { margin: 0 }
+hgroup > p { color: var(--mut) }
+output { font-weight: 700 }
+meter { width: 100%; height: .5rem }
+optgroup { font-weight: 700; color: var(--mut) }
+::file-selector-button { margin-inline-end: .8em }
+::file-selector-button:hover { background: var(--face) }
+input:user-invalid, textarea:user-invalid { border-color: light-dark(#c0392b, #ff6b6b) }
+input:user-invalid + small { color: light-dark(#c0392b, #ff6b6b) }
+summary:hover { color: var(--ac) }
+/* thin scrollbars, macOS weight */
+* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 25%, transparent) transparent }
+
+@page { margin: 2cm }
+@media print {
+  :root { --bg: #fff; --el: #fff; --fg: #000; --bd: #999 }
+  body > nav, body > footer { display: none }
+  body > * { border: 0; max-width: none }
+  p, blockquote, li { orphans: 3; widows: 3 }   /* no stranded single lines */
+  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555 }
+  pre, table, figure, details, tr, img { break-inside: avoid }
+  h1, h2, h3, h4 { break-after: avoid }
+}
+
+/* WCAG 2.5.8: give touch pointers a real target */
+@media (pointer: coarse) {
+  button, [type=submit], [type=button], [type=reset],
+  :where(a.primary, a[role=button]), select, summary,
+  input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]) {
+    min-height: 44px;
+  }
+  input[type=checkbox], input[type=radio] { width: 1.4em; height: 1.4em }
+}
+
+/* the OS is already inverting; stop images being inverted twice */
+@media (inverted-colors: inverted) {
+  img, video, iframe { filter: invert(1) hue-rotate(180deg) }
+}
+
+/* a wider gamut can hold a cleaner accent than sRGB can */
+@media (color-gamut: p3) {
+  @supports (color: oklch(60% .2 250)) {
+    :root { --ac: light-dark(oklch(52% .21 258), oklch(76% .15 258)) }
+  }
+}
+
+/* CJK text wants punctuation and Latin spacing handled */
+:root { text-spacing-trim: trim-start; text-autospace: normal }
+
+/* translucency is decorative; drop it when it is unwanted */
+@media (prefers-reduced-transparency: reduce) {
+  body > nav { background: var(--face); backdrop-filter: none }
+  dialog::backdrop { backdrop-filter: none }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --bd:  light-dark(#00000059, #ffffff6b);
+    --mut: light-dark(#45454a,   #c6c6ce);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) and (update: fast) {
+  a, button, input, select, textarea, summary, tr,
+  [type=submit], [type=button], [type=reset] {
+    transition: box-shadow .15s, background-color .15s, border-color .15s, translate .08s;
+  }
+}
+
+}
+
+/* Windows High Contrast: the OS supplies the palette, so get out of the way.
+   A later layer, so `*` beats every shadow in the sheet on layer order alone. */
+@layer fertig-a11y {
+  @media (forced-colors: active) {
+    * { box-shadow: none }
+    button, [type=submit], [type=button], [type=reset], input, select, textarea,
+    .card, .badge, details, dialog, [popover], fieldset, table {
+      border: 1px solid CanvasText;
+    }
+    [role=tab][aria-selected=true], button[aria-pressed=true] { border-color: Highlight }
+  }
+}