@cahyo-dimas/freeday 1.53.0 → 2.0.0

package/dist/freeday.css

@@ -1,5 +1,5 @@
-/* Freeday components — GENERATED by tokens/build.mjs. Do not edit by hand. */
-/* Freeday base layer — reset ringan + default via token */
+/* Freeday components. GENERATED by tokens/build.mjs. Do not edit by hand. */
+/* Freeday base layer: reset ringan + default via token */
 *, *::before, *::after { box-sizing: border-box; }
 html { -webkit-text-size-adjust: 100%; }
 body {
@@ -17,21 +17,21 @@ a { color: var(--color-primary); }
 :where(button, input, select, textarea) { font: inherit; }
 /* Hidden from sight, kept for assistive tech. `clip` hides PAINTING, not LAYOUT: the box still
  * has a position, and because it is position:absolute its containing block is the nearest
- * POSITIONED ancestor — with none, the initial containing block (the document itself).
+ * POSITIONED ancestor, and with none, the initial containing block (the document itself).
  *
  * That matters, because `overflow` only clips a descendant whose containing block is inside the
  * overflow box. So a hidden span in a horizontally scrolling table (the kit's own recommended way
- * to name an icon button) parks at its static position — possibly thousands of px to the right —
+ * to name an icon button) parks at its static position, possibly thousands of px to the right —
  * and drags the whole DOCUMENT sideways: invisible, and immune to `overflow-x:hidden` on every
  * wrapper. Measured before the fix: 1351px of phantom page scroll from 11 spans.
  *
- * The fix is not here — it is on the containers: every clipping/scrolling container in the kit
+ * The fix is not here but on the containers: every clipping/scrolling container in the kit
  * that holds consumer markup declares `position:relative` so it becomes the containing block for
  * its own out-of-flow content (see test/css.test.mjs, which will not let a new one skip it).
- * Note the measurement trap: documentElement.scrollWidth sees it, body.scrollWidth does not —
+ * Note the measurement trap: documentElement.scrollWidth sees it, body.scrollWidth does not,
  * the honest check is `window.scrollTo(9999, 0)` then reading `window.scrollX`. */
 .fdy-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-/* Opt-in list reset. base.css is intentionally a *light* reset — it does NOT strip list/paragraph
+/* Opt-in list reset. base.css is intentionally a *light* reset: it does NOT strip list/paragraph
  * margins (see the kit's own list components, which each reset themselves). If you run a utility
  * framework with its preflight OFF (the recommended pairing), a semantic <ul>/<ol> keeps native
  * bullets + a 40px indent; add this class (or a Freeday list component) to normalise it. */
@@ -40,10 +40,10 @@ a { color: var(--color-primary); }
   *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
 }
 
-/* Freeday — Accordion (native <details>/<summary>, zero-JS) */
-/* position:relative — containing block for out-of-flow panel content (see base.css). NOT redundant
+/* Freeday. Accordion (native <details>/<summary>, zero-JS) */
+/* position:relative, containing block for out-of-flow panel content (see base.css). NOT redundant
    with the panel's reveal animation: that animation gives the panel a transform (which happens to
-   make it a containing block too), but it lives behind prefers-reduced-motion:no-preference — so
+   make it a containing block too), but it lives behind prefers-reduced-motion:no-preference, so
    without this line the escape bug appears ONLY for readers who asked for reduced motion. */
 .fdy-accordion{position:relative;border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
 .fdy-accordion__item + .fdy-accordion__item{border-top:var(--bw) solid var(--color-border);}
@@ -55,10 +55,10 @@ a { color: var(--color-primary); }
 .fdy-accordion__item > summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 .fdy-accordion__panel{padding:0 var(--space-4) var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal);}
 /* Content reveal on open (fade + rise). Native <details> can't animate its own height cross-
- * browser without JS, so we animate the revealed panel instead — cheap, safe, reduced-motion gated. */
+ * browser without JS, so we animate the revealed panel instead, cheap, safe, reduced-motion gated. */
 @media (prefers-reduced-motion:no-preference){.fdy-accordion__item[open] > .fdy-accordion__panel{animation:fdy-combo-in var(--dur-base) var(--ease-standard);}}
 
-/* Freeday — Alert (inline) */
+/* Freeday. Alert (inline) */
 .fdy-alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:var(--bw) solid var(--color-border);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-2);}
 .fdy-alert__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-top:.05rem;}
 .fdy-alert__icon svg{width:100%;height:100%;}
@@ -77,17 +77,17 @@ a { color: var(--color-primary); }
 .fdy-alert--danger{background:var(--color-danger-soft);border-color:color-mix(in srgb,var(--color-danger) 26%,transparent);}
 .fdy-alert--danger .fdy-alert__title,.fdy-alert--danger .fdy-alert__icon{color:var(--color-danger-strong);}
 
-/* Freeday — App Shell.
+/* Freeday. App Shell.
  * Natural document scroll: the shell grows with content and the PAGE scrolls,
  * while the sidebar and topbar are position:sticky so they stay in view. No
  * fixed-height / internal-scroll trickery (that leaves a white gap if the host
  * page can still scroll). Structure: .fdy-app > (.fdy-app__sidebar, .fdy-app__content
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
- * topbar a tall containing block so it can travel — a bare grid cell can't. */
+ * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
 .fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
 .fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
-/* Brand is a fixed header — same height as the topbar so they align, and only
+/* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
  * display line via the rules on .fdy-app__brand itself. For a mark + two-line
  * title/subtitle, add structured children mirroring .fdy-appbar__brand:
@@ -103,10 +103,10 @@ a { color: var(--color-primary); }
 .fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-6);}
-/* Horizontal variant — the SAME nav links laid out as a row, for a top-nav application (one that
+/* Horizontal variant, the SAME nav links laid out as a row, for a top-nav application (one that
  * puts its primary navigation in `.fdy-appbar` / `.fdy-app__topbar` and has no sidebar). Deliberately
  * a modifier and not a new block: the item, its states and `aria-current="page"` are unchanged. That
- * is the point — a navigation link is a link marked `aria-current`, never `aria-selected` (invalid
+ * is the point, a navigation link is a link marked `aria-current`, never `aria-selected` (invalid
  * ARIA on an anchor) and never a tab role, so borrowing `.fdy-tabs` for routes half-adopts a contract
  * (roving tabindex, a panel per tab) that route links do not honour. position:relative because the
  * row scrolls; see base.css on why a scroller must be a containing block. */
@@ -118,7 +118,7 @@ a { color: var(--color-primary); }
 .fdy-nav__item[aria-current="page"]{background:var(--color-primary-soft);color:var(--color-primary-strong);font-weight:var(--weight-semibold);}
 .fdy-nav__item:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 /* Sidebar-menu extras: per-node icon (leading), count badge (trailing), and a
- * text label that truncates. Any of these are optional — a bare text item works. */
+ * text label that truncates. Any of these are optional, a bare text item works. */
 .fdy-nav__icon{flex:none;display:inline-flex;width:1.15rem;height:1.15rem;}
 .fdy-nav__icon svg{display:block;width:100%;height:100%;}
 .fdy-nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -128,7 +128,7 @@ a { color: var(--color-primary); }
 .fdy-nav__group{margin:0;}
 .fdy-nav__group + .fdy-nav__group,.fdy-nav__item + .fdy-nav__group{border-top:var(--bw) solid var(--color-border-muted);margin-top:var(--space-1);padding-top:var(--space-1);}
 /* Prose, and a control name: this is the <summary> of a nav group, at --text-xs uppercase. It is
-   the second class found spending the decorative ink on type (after .fdy-eyebrow) — and it was
+   the second class found spending the decorative ink on type (after .fdy-eyebrow), and it was
    already brightening to --color-text-muted on hover, which is the rule admitting its resting
    state was too faint to read. */
 .fdy-nav__grouplabel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
@@ -137,7 +137,7 @@ a { color: var(--color-primary); }
 .fdy-nav__grouplabel:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 .fdy-nav__grouplabel::after{content:"";flex:none;width:.45rem;height:.45rem;margin-right:var(--space-1);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard);opacity:.7;}
 .fdy-nav__group[open] > .fdy-nav__grouplabel::after{transform:rotate(45deg);}
-/* --flat: calmer, non-collapsible grouped nav — hide the caret, drop the
+/* --flat: calmer, non-collapsible grouped nav, hide the caret, drop the
  * inter-group divider and the collapse cursor. Works on native <details> groups
  * (caret just hidden) and on static <div>/<p> groups (never collapsible). */
 .fdy-nav--flat .fdy-nav__grouplabel::after{display:none;}
@@ -150,7 +150,7 @@ a { color: var(--color-primary); }
 .fdy-nav__tree > summary .fdy-nav__caret{flex:none;margin-left:auto;width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard);opacity:.6;}
 .fdy-nav__tree[open] > summary .fdy-nav__caret{transform:rotate(45deg);}
 .fdy-nav__sub{display:flex;flex-direction:column;gap:2px;padding-left:calc(var(--space-3) + 1.15rem);margin-top:2px;}
-/* Collapse toggle (hamburger) — sits in the topbar; collapses the sidebar. */
+/* Collapse toggle (hamburger), sits in the topbar; collapses the sidebar. */
 .fdy-app__navtoggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;flex:none;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
 .fdy-app__navtoggle:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-app__navtoggle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-primary);}
@@ -163,7 +163,7 @@ a { color: var(--color-primary); }
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
 .fdy-skip:focus{transform:translateY(0);}
-/* --static: for a bounded/embedded shell (a demo box, not the whole page) —
+/* --static: for a bounded/embedded shell (a demo box, not the whole page),
  * drop sticky so nothing escapes the box; sidebar stretches to fill it. */
 .fdy-app--static .fdy-app__sidebar{position:static;height:auto;align-self:stretch;}
 .fdy-app--static .fdy-app__topbar{position:static;}
@@ -179,7 +179,7 @@ a { color: var(--color-primary); }
 }
 @media (prefers-reduced-motion:reduce){.fdy-app__sidebar{transition:none;}}
 
-/* Freeday — App bar (standalone top bar: brand · actions · spacer).
+/* Freeday. App bar (standalone top bar: brand · actions · spacer).
  * Distinct from .fdy-app__topbar (which is bound to the shell grid). Use anywhere;
  * sticky / elevated / dense / coloured via modifiers. Pure CSS. */
 .fdy-appbar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-16);padding:0 var(--space-4);background:var(--color-surface);color:var(--color-text);border-bottom:var(--bw) solid var(--color-border);}
@@ -192,19 +192,19 @@ a { color: var(--color-primary); }
 .fdy-appbar__spacer{flex:1;}
 .fdy-appbar__actions{display:inline-flex;align-items:center;gap:var(--space-1);}
 /* Primary navigation inside the bar: `<nav class="fdy-nav fdy-nav--horizontal">` with
-   `.fdy-nav__item` links (see app-shell.css). The bar ships no link class of its own — a nav link
+   `.fdy-nav__item` links (see app-shell.css). The bar ships no link class of its own, a nav link
    is the same component whether the nav is a sidebar column or a top row. */
 /* Controls on a coloured app bar go on-colour (icons stay legible, hover is a light wash) */
 .fdy-appbar--primary .fdy-btn--ghost{background:transparent;border-color:transparent;color:var(--color-on-primary);box-shadow:none;}
 .fdy-appbar--primary .fdy-btn--ghost:hover{background:color-mix(in srgb,var(--color-on-primary) 16%,transparent);color:var(--color-on-primary);transform:none;}
 /* Nav links on a coloured bar: full on-colour ink in every state (a dimmed variant would trade away
    the contrast the bar's own token pair guarantees). The current page is carried by the background
-   wash plus the semibold weight the base rule already applies — and by `aria-current` itself. */
+   wash plus the semibold weight the base rule already applies, and by `aria-current` itself. */
 .fdy-appbar--primary .fdy-nav__item{color:var(--color-on-primary);}
 .fdy-appbar--primary .fdy-nav__item:hover{background:color-mix(in srgb,var(--color-on-primary) 16%,transparent);color:var(--color-on-primary);}
 .fdy-appbar--primary .fdy-nav__item[aria-current="page"]{background:color-mix(in srgb,var(--color-on-primary) 24%,transparent);color:var(--color-on-primary);}
 
-/* Freeday — Autocomplete (text input + filtered suggestion listbox, APG editable combobox).
+/* Freeday. Autocomplete (text input + filtered suggestion listbox, APG editable combobox).
  * Enhanced by freeday-autocomplete.js. */
 .fdy-autocomplete{position:relative;display:block;max-width:22rem;}
 .fdy-autocomplete__listbox{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:120;min-width:100%;max-height:16rem;overflow-y:auto;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
@@ -217,20 +217,20 @@ a { color: var(--color-primary); }
 .fdy-autocomplete__empty[hidden]{display:none;}
 @media (prefers-reduced-motion:no-preference){.fdy-autocomplete__listbox:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
-/* Freeday — Avatar */
+/* Freeday. Avatar */
 .fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
 .fdy-avatar img{width:100%;height:100%;object-fit:cover;}
 /* --xs exists for an avatar INSIDE a control: `.fdy-btn--sm` is exactly 2rem tall, which is also
    `--sm`'s size, so a small avatar in a small button fills it edge to edge and the ghost border
    crosses the circle. 1.5rem leaves the same ~4px breathing room the kit's controls give their
-   icons. Uses `--text-xs` (the smallest type token the kit has — there is no `2xs`). */
+   icons. Uses `--text-xs` (the smallest type token the kit has, there is no `2xs`). */
 .fdy-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--text-xs);}
 .fdy-avatar--sm{width:2rem;height:2rem;font-size:var(--text-xs);}
 .fdy-avatar--lg{width:3.5rem;height:3.5rem;font-size:var(--text-lg);}
 .fdy-avatar-group{display:inline-flex;}
 .fdy-avatar-group .fdy-avatar{border:2px solid var(--color-surface);margin-left:calc(var(--space-2)*-1);}
 .fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}
-/* Decorative identity tones — a soft tint of a categorical chart colour with a theme-aware,
+/* Decorative identity tones, a soft tint of a categorical chart colour with a theme-aware,
  * text-leaning foreground so initials keep WCAG AA (verified >=4.5:1 in light & dark by
  * test/contrast.test.mjs). Use to disambiguate same-initial avatars (e.g. many "PT …" names):
  * hash a stable 1..8 index off the FULL name in your app, then apply .fdy-avatar--tone-<n>. */
@@ -244,7 +244,7 @@ a { color: var(--color-primary); }
 .fdy-avatar--tone-7{--_fdy-avatar-tone:var(--tone-7);}
 .fdy-avatar--tone-8{--_fdy-avatar-tone:var(--tone-8);}
 
-/* Freeday — Badge */
+/* Freeday. Badge */
 .fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
 .fdy-badge--success{color:var(--color-success-strong);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 26%,transparent);}
 .fdy-badge--warning{color:var(--color-warning-strong);background:var(--color-warning-soft);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent);}
@@ -252,12 +252,12 @@ a { color: var(--color-primary); }
 .fdy-badge--info{color:var(--color-info-strong);background:var(--color-info-soft);border-color:color-mix(in srgb,var(--color-info) 26%,transparent);}
 .fdy-badge--outline{background:transparent;border-color:var(--color-border-strong);color:var(--color-text-muted);box-shadow:none;}
 
-/* Categorical tone badges — a status vocabulary larger than the semantic palette, from the
+/* Categorical tone badges, a status vocabulary larger than the semantic palette, from the
  * general --tone-1..8 tokens. Same validated AA formula as .fdy-avatar--tone-* and
  * .fdy-chip--tone-* (text >=4.5:1 both themes, gated by test/contrast.test.mjs).
  *
  * Semantics come first: a state that IS good, bad or waiting takes --success / --danger /
- * --warning. These are for the rest — the states a workflow distinguishes but a palette of five
+ * --warning. These are for the rest, the states a workflow distinguishes but a palette of five
  * cannot. A back-office document list carrying Draft, Submitted, Approved, Completed, Settled,
  * Closed, Transferred, InDeclaration, Open and Rejected in ONE column collapsed to three colours,
  * which is the report this shipped for. */
@@ -271,7 +271,7 @@ a { color: var(--color-primary); }
 .fdy-badge--tone-7{--_fdy-badge-tone:var(--tone-7);}
 .fdy-badge--tone-8{--_fdy-badge-tone:var(--tone-8);}
 
-/* Overlay badge — anchors a small count/dot/icon badge to a corner of any element
+/* Overlay badge, anchors a small count/dot/icon badge to a corner of any element
  * (icon, button, text). Wrap the content in .fdy-badge-wrap; add .fdy-badge-ov as a
  * sibling. Default is a solid neutral pill; colour + dot + position via modifiers. */
 .fdy-badge-wrap{position:relative;display:inline-flex;vertical-align:middle;}
@@ -281,7 +281,7 @@ a { color: var(--color-primary); }
 /* Solid colours safe for count/text (on-* tokens, AA in light & dark) */
 .fdy-badge-ov--primary{background:var(--color-primary);color:var(--color-on-primary);}
 .fdy-badge-ov--danger{background:var(--color-danger-btn);color:var(--color-on-danger);}
-/* Dot-oriented accents (for dots — plain text on these is not guaranteed AA) */
+/* Dot-oriented accents (for dots, plain text on these is not guaranteed AA) */
 .fdy-badge-ov--accent{background:var(--color-accent);}
 .fdy-badge-ov--info{background:var(--color-info);}
 .fdy-badge-ov--success{background:var(--color-success);}
@@ -291,7 +291,7 @@ a { color: var(--color-primary); }
 .fdy-badge-ov--bottom-right{top:auto;bottom:0;transform:translate(50%,50%);}
 .fdy-badge-ov--bottom-left{top:auto;bottom:0;right:auto;left:0;transform:translate(-50%,50%);}
 
-/* Freeday — Breadcrumb */
+/* Freeday. Breadcrumb */
 .fdy-breadcrumb{font-size:var(--text-sm);}
 .fdy-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);list-style:none;margin:0;padding:0;}
 .fdy-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);}
@@ -301,23 +301,23 @@ a { color: var(--color-primary); }
 .fdy-breadcrumb__item[aria-current="page"]{color:var(--color-text);font-weight:var(--weight-medium);}
 .fdy-breadcrumb__sep{color:var(--color-text-subtle);user-select:none;}
 
-/* Freeday — Responsive display utilities (pairs with freeday-breakpoint.js).
+/* Freeday. Responsive display utilities (pairs with freeday-breakpoint.js).
  * Breakpoint scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920.
- * NOTE: media-query breakpoints must be literal — CSS can't read custom properties
+ * NOTE: media-query breakpoints must be literal. CSS can't read custom properties
  * inside @media, so these px are structural, not stray magic numbers. */
 .fdy-hidden{display:none !important;}
 
-/* hide-below-X — hidden when the viewport is narrower than X (content shows at X and up) */
+/* hide-below-X, hidden when the viewport is narrower than X (content shows at X and up) */
 @media (max-width:599.98px){.fdy-hide-below-sm{display:none !important;}}
 @media (max-width:959.98px){.fdy-hide-below-md{display:none !important;}}
 @media (max-width:1279.98px){.fdy-hide-below-lg{display:none !important;}}
 
-/* hide-above-X — hidden when the viewport is X and wider (content shows below X) */
+/* hide-above-X, hidden when the viewport is X and wider (content shows below X) */
 @media (min-width:600px){.fdy-hide-above-sm{display:none !important;}}
 @media (min-width:960px){.fdy-hide-above-md{display:none !important;}}
 @media (min-width:1280px){.fdy-hide-above-lg{display:none !important;}}
 
-/* Freeday — Button */
+/* Freeday. Button */
 .fdy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
   height:var(--control-h);padding:0 var(--space-4);
   font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);
@@ -330,7 +330,7 @@ a { color: var(--color-primary); }
 .fdy-btn:active{transform:translateY(1px);box-shadow:0 1px 4px -1px color-mix(in srgb,var(--color-primary) 46%,transparent);}
 .fdy-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
 /* Pressed / toggle. `aria-pressed` is already the right attribute for a toggle button, so this adds
-   no class and no new markup contract — and it is what makes .fdy-btn-group a complete segmented
+   no class and no new markup contract, and it is what makes .fdy-btn-group a complete segmented
    control: the group joins the borders, this says which segment you are on. Each fill variant
    defines its OWN pressed look below; a single shared rule cannot work, because a gradient is a
    background-IMAGE and would blank the ghost variant's background-color. Solid: invert the gradient
@@ -342,12 +342,12 @@ a { color: var(--color-primary); }
 .fdy-btn--ghost:hover{transform:none;background:var(--color-primary-soft);border-color:var(--color-primary-border);box-shadow:var(--shadow-1);}
 .fdy-btn--ghost:active{transform:translateY(1px);}
 
-/* --danger used to be the SOLID treatment and nothing else, so `fdy-btn--ghost fdy-btn--danger` —
-   which every reader parses as "quiet destructive" — rendered a second SOLID button beside Save.
+/* --danger used to be the SOLID treatment and nothing else, so `fdy-btn--ghost fdy-btn--danger`,
+   which every reader parses as "quiet destructive", rendered a second SOLID button beside Save.
    That is a hierarchy defect, not a cosmetic one: the base class is already the one primary per
    screen. `.fdy-menu__item--danger` has always modelled the quiet form (red text, not a red block);
    the pairing rules below bring it to the button. They are more specific than this one and come
-   after it, so this rule needs no :not() guard of its own — one mechanism, not two. */
+   after it, so this rule needs no :not() guard of its own, one mechanism, not two. */
 .fdy-btn--danger{background:linear-gradient(180deg,var(--color-danger-btn),color-mix(in srgb,#000 12%,var(--color-danger-btn)));color:var(--color-on-danger);box-shadow:0 2px 9px -1px color-mix(in srgb,var(--color-danger-btn) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:hover{transform:translateY(-1px);box-shadow:0 6px 18px -2px color-mix(in srgb,var(--color-danger-btn) 54%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:active{transform:translateY(1px);}
@@ -361,21 +361,21 @@ a { color: var(--color-primary); }
 .fdy-btn--sm{height:calc(var(--control-h) - var(--space-2));padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm);}
 .fdy-btn--lg{height:calc(var(--control-h) + var(--space-2));padding:0 var(--space-6);font-size:var(--text-base);border-radius:var(--radius-lg);}
 
-/* Icon inside a button — scales with the button's font size (works for text+icon & icon-only) */
+/* Icon inside a button, scales with the button's font size (works for text+icon & icon-only) */
 .fdy-btn__icon{display:inline-flex;flex:none;}
 .fdy-btn__icon svg{display:block;width:1.15em;height:1.15em;}
 
-/* Text button — lowest emphasis (no fill/border), colored label, subtle hover tint */
+/* Text button, lowest emphasis (no fill/border), colored label, subtle hover tint */
 .fdy-btn--text{background:none;color:var(--color-primary-strong);border-color:transparent;box-shadow:none;}
 .fdy-btn--text:hover{transform:none;background:var(--color-primary-soft);box-shadow:none;}
 .fdy-btn--text:active{transform:translateY(1px);box-shadow:none;}
-/* Ghost/text pressed: the kit's selected-surface pair (soft fill + strong ink) — the same pairing
+/* Ghost/text pressed: the kit's selected-surface pair (soft fill + strong ink), the same pairing
    .fdy-nav__item uses for the current page, and one the AA contrast gate already covers. This is
    the realistic segmented control: a row of --ghost buttons with exactly one aria-pressed. */
 .fdy-btn--ghost[aria-pressed="true"],.fdy-btn--text[aria-pressed="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);border-color:var(--color-primary-border);box-shadow:none;}
 .fdy-btn--ghost[aria-pressed="true"]:hover,.fdy-btn--text[aria-pressed="true"]:hover{background:var(--color-primary-soft);transform:none;box-shadow:none;}
 
-/* Stretched hit area (#007) — spread this button's click target over its nearest positioned
+/* Stretched hit area (#007), spread this button's click target over its nearest positioned
  * ancestor, so "one card, one primary action, one escape hatch" needs no click handler on the
  * <article>: the real control stays a real <button>/<a> and keeps its keyboard semantics.
  * `.fdy-card` is already position:relative, so it is the anchor.
@@ -384,19 +384,19 @@ a { color: var(--color-primary); }
  * a transformed element becomes the containing block for its own absolutely-positioned descendants,
  * so `inset:0` re-anchors from the card to the button's own box the moment the button is hovered or
  * pressed. Measured: mousedown lands on the button, the overlay collapses under the pointer, mouseup
- * lands on some other element, and the browser fires `click` on their common ancestor — the button
+ * lands on some other element, and the browser fires `click` on their common ancestor, the button
  * never gets one. It demos fine on hover for --text/--ghost (their hover is already transform:none)
  * and only a real press reveals it; the default and --danger fills break one step earlier, on hover.
  * Press feedback moves to the card, which is the object actually being pressed (see card.css). */
 .fdy-btn--stretch::after{content:'';position:absolute;inset:0;}
 .fdy-btn--stretch:hover,.fdy-btn--stretch:active{transform:none;}
 
-/* Icon-only — square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
+/* Icon-only, square; combine with --ghost/--text/--sm/--lg. Requires aria-label. */
 .fdy-btn--icon{width:var(--control-h);padding:0;}
 .fdy-btn--icon.fdy-btn--sm{width:calc(var(--control-h) - var(--space-2));}
 .fdy-btn--icon.fdy-btn--lg{width:calc(var(--control-h) + var(--space-2));}
 
-/* Button group — segmented, joined borders, rounded only at the ends */
+/* Button group, segmented, joined borders, rounded only at the ends */
 .fdy-btn-group{display:inline-flex;}
 .fdy-btn-group .fdy-btn{border-radius:0;}
 .fdy-btn-group .fdy-btn:not(:first-child){margin-left:calc(var(--bw) * -1);}
@@ -404,7 +404,7 @@ a { color: var(--color-primary); }
 .fdy-btn-group .fdy-btn:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md);}
 .fdy-btn-group .fdy-btn:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);}
 
-/* FAB — circular elevated action button (icon), optional extended pill with label */
+/* FAB, circular elevated action button (icon), optional extended pill with label */
 .fdy-fab{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:3.5rem;height:3.5rem;padding:0;border:var(--bw) solid transparent;border-radius:var(--radius-full);cursor:pointer;color:var(--color-on-primary);background:linear-gradient(180deg,var(--color-primary),color-mix(in srgb,#000 10%,var(--color-primary)));box-shadow:var(--shadow-3);transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-fab:hover{transform:translateY(-1px);box-shadow:var(--shadow-4);}
 .fdy-fab:active{transform:translateY(1px);}
@@ -417,35 +417,35 @@ a { color: var(--color-primary); }
 .fdy-fab--danger{background:linear-gradient(180deg,var(--color-danger-btn),color-mix(in srgb,#000 12%,var(--color-danger-btn)));color:var(--color-on-danger);}
 .fdy-fab--accent{background:linear-gradient(180deg,var(--color-accent),color-mix(in srgb,#000 10%,var(--color-accent)));color:var(--color-on-accent);}
 
-/* Freeday — Card */
-/* position:relative — containing block for out-of-flow card content (see base.css); it also gives
+/* Freeday. Card */
+/* position:relative, containing block for out-of-flow card content (see base.css); it also gives
    consumers the anchor a corner ribbon/badge needs. */
 .fdy-card{position:relative;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
-/* Pressing a stretched target (see .fdy-btn--stretch) is pressing the CARD — the button's own
+/* Pressing a stretched target (see .fdy-btn--stretch) is pressing the CARD, the button's own
    nudge had to go, and the object under the pointer is the card. Ordered before the reduced-motion
    block and the disabled rules so both still win at equal specificity. */
 .fdy-card--interactive:has(.fdy-btn--stretch:active){transform:translateY(-1px);}
 /* The global reduced-motion reset kills the ANIMATION; drop the -3px shift too so the card
  * doesn't jump. The shadow still communicates the affordance. */
 @media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover,.fdy-card--interactive:has(.fdy-btn--stretch:active){transform:none;}}
-/* When the whole card IS the control — a real <button> so the row is keyboard-reachable and
- * announced — reset the UA button box. Note: it does NOT reset background/border, because
+/* When the whole card IS the control, a real <button> so the row is keyboard-reachable and
+ * announced, reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
 .fdy-card--button{display:block;width:100%;text-align:inherit;color:inherit;appearance:none;-webkit-appearance:none;}
-/* Disabled card-as-control — same contract as .fdy-list__row--button: dim + not-allowed, and the
+/* Disabled card-as-control, same contract as .fdy-list__row--button: dim + not-allowed, and the
    --interactive lift is withdrawn so a refusing control stops answering the pointer. */
 .fdy-card--button:disabled,.fdy-card--button[aria-disabled="true"],.fdy-card--interactive[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
 .fdy-card--interactive:disabled:hover,.fdy-card--interactive[aria-disabled="true"]:hover{box-shadow:var(--shadow-lift);transform:none;}
-/* Escape hatches stay clickable above a stretched target — automatic, not a documented convention,
+/* Escape hatches stay clickable above a stretched target, automatic, not a documented convention,
    because forgetting it fails SILENTLY: the secondary control looks and hovers exactly as before and
    simply never receives the click, which is the very symptom the pattern exists to cure. Matched by
    shape (anything focusable) so a control the kit does not ship yet is covered too. */
 :is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch){z-index:1;}
 /* The position is a DEFAULT, not an override: z-index needs a positioned box (or a flex/grid item),
-   but an app that deliberately pins a control inside the card — a corner dismiss, a favourite star —
+   but an app that deliberately pins a control inside the card, a corner dismiss, a favourite star,
    must keep its own `position:absolute`. Wrapped in :where() so this whole selector weighs nothing
    and ANY app rule wins it; measured, because at normal specificity the kit silently dragged an
    absolutely positioned dismiss button back into the flow. Do not merge these two rules. */
@@ -455,9 +455,9 @@ a { color: var(--color-primary); }
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}
 .fdy-card__footer{padding:var(--space-3) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));display:flex;gap:var(--space-2);justify-content:flex-end;}
 
-/* Freeday — Carousel (scroll-snap track + arrows + dots). Enhanced by freeday-carousel.js. */
+/* Freeday. Carousel (scroll-snap track + arrows + dots). Enhanced by freeday-carousel.js. */
 .fdy-carousel{position:relative;}
-/* position:relative — the arrows are positioned against .fdy-carousel (the parent), so this only
+/* position:relative means the arrows are positioned against .fdy-carousel (the parent), so this only
    catches out-of-flow content inside the SLIDES, which would otherwise escape the viewport
    entirely and scroll the page by one slide-offset per slide (see base.css). */
 .fdy-carousel__viewport{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--radius-lg);scrollbar-width:none;-ms-overflow-style:none;}
@@ -476,10 +476,10 @@ a { color: var(--color-primary); }
 .fdy-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 40%,transparent);}
 @media (prefers-reduced-motion:reduce){.fdy-carousel__viewport{scroll-behavior:auto;}}
 
-/* Freeday — Cascade select (hierarchical drill-down picker).
+/* Freeday. Cascade select (hierarchical drill-down picker).
  * Built by freeday-cascade.js from a [data-fdy-cascade] wrapper whose hidden
  * nested <ul> is the data model: a <li> with a child <ul> is a branch, one
- * without is a selectable leaf. The popover shows one level at a time — branches
+ * without is a selectable leaf. The popover shows one level at a time, branches
  * drill in, a back control ascends, a leaf selects (value = full path).
  * Trigger visual matches the combo / date / time control family. */
 .fdy-cascade{position:relative;display:inline-block;width:100%;max-width:22rem;}
@@ -516,16 +516,16 @@ a { color: var(--color-primary); }
 .fdy-cascade__opt-arrow{flex:none;width:.45rem;height:.45rem;border-right:2px solid var(--color-text-subtle);border-bottom:2px solid var(--color-text-subtle);transform:rotate(-45deg);}
 @media (prefers-reduced-motion:no-preference){.fdy-cascade__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
-/* Freeday — Choose-from-list dialog (searchable master-data picker).
+/* Freeday. Choose-from-list dialog (searchable master-data picker).
  * Built on .fdy-modal: header + search + scrollable results table + footer.
  * Backs a choose-from-list field (readonly input + .fdy-input-group__btn magnifier). */
 .fdy-modal--cfl{width:min(46rem,calc(100vw - var(--space-8)));}
 .fdy-modal--cfl .fdy-modal__body{padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
 
-/* Search bar — single leading-icon field; Enter/typing filters the results. */
+/* Search bar, single leading-icon field; Enter/typing filters the results. */
 .fdy-cfl__search{flex:none;padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 
-/* Results — dense rows, sticky header, its own scroll region. */
+/* Results, dense rows, sticky header, its own scroll region. */
 .fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
 .fdy-cfl__row{cursor:pointer;}
@@ -540,12 +540,12 @@ a { color: var(--color-primary); }
 .fdy-cfl__empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);margin:0;}
 .fdy-cfl__empty[hidden]{display:none;}
 
-/* Footer — selection count (multi) sits left, actions right. */
+/* Footer, selection count (multi) sits left, actions right. */
 .fdy-modal--cfl .fdy-modal__footer{justify-content:space-between;}
 .fdy-cfl__count{font-size:var(--text-sm);color:var(--color-text-muted);}
 .fdy-cfl__actions{display:flex;gap:var(--space-2);}
 
-/* Freeday — Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).
+/* Freeday. Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).
  * Colour comes from --fdy-chart (a token, set inline by the renderer from data-fdy-color). */
 
 /* Sparkline / trend line (SVG) */
@@ -565,7 +565,7 @@ a { color: var(--color-primary); }
 /* Hover emphasis: dim all bars while the chart is hovered, keep the hovered one lit. */
 @media (hover:hover){.fdy-bars:hover .fdy-bars__bar{opacity:.4;}.fdy-bars__col:hover .fdy-bars__bar{opacity:1;}}
 
-/* Interactive tooltip (shared by bar + donut) — Chart.js-style hover readout. */
+/* Interactive tooltip (shared by bar + donut). Chart.js-style hover readout. */
 .fdy-chart__tip{position:absolute;z-index:5;left:0;top:0;pointer-events:none;transform:translate(-50%,calc(-100% - 8px));background:var(--color-inverse-surface);color:var(--color-inverse-text);font-size:var(--text-xs);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-2);opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);}
 .fdy-chart__tip.is-visible{opacity:1;}
 
@@ -586,7 +586,7 @@ a { color: var(--color-primary); }
 /* Horizontal legend for cartesian charts (legend sits above the plot). */
 .fdy-chart__legend--row{flex-direction:row;flex-wrap:wrap;gap:var(--space-2) var(--space-4);}
 
-/* Cartesian charts (line / area / multi-series & stacked bar) — SVG with themed axes.
+/* Cartesian charts (line / area / multi-series & stacked bar). SVG with themed axes.
  * Axis colour comes from --chart-grid / --chart-tick (both theme-aware); series colours are
  * set inline by the renderer from --chart-1..8, so the whole chart recolours on data-theme. */
 .fdy-chart-xy{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:100%;--fdy-chart-tick-size:var(--text-xs);}
@@ -601,10 +601,10 @@ a { color: var(--color-primary); }
 .fdy-chart-xy__bar{transition:opacity var(--dur-fast) var(--ease-standard);}
 .fdy-chart-xy__band{fill:transparent;cursor:pointer;}
 
-/* Freeday — Chip (tag / removable filter) */
+/* Freeday. Chip (tag / removable filter) */
 .fdy-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:1.75rem;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text);background:var(--color-surface-3);border:var(--bw) solid var(--color-border);}
 .fdy-chip--primary{color:var(--color-primary-strong);background:var(--color-primary-soft);border-color:color-mix(in srgb,var(--color-primary) 22%,transparent);}
-/* Categorical tone chips — non-semantic category tags / legend swatches, from the general
+/* Categorical tone chips, non-semantic category tags / legend swatches, from the general
  * --tone-1..8 palette. Same validated AA formula as .fdy-avatar--tone-* (text >=4.5:1 both themes,
  * gated by test/contrast.test.mjs). */
 .fdy-chip--tone-1,.fdy-chip--tone-2,.fdy-chip--tone-3,.fdy-chip--tone-4,.fdy-chip--tone-5,.fdy-chip--tone-6,.fdy-chip--tone-7,.fdy-chip--tone-8{background:color-mix(in srgb,var(--_fdy-chip-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-chip-tone) 50%,var(--color-text));border-color:color-mix(in srgb,var(--_fdy-chip-tone) 30%,var(--color-border));}
@@ -632,14 +632,14 @@ a { color: var(--color-primary); }
 .fdy-chip__check svg{display:block;width:100%;height:100%;}
 .fdy-chip--filter[aria-pressed="true"] .fdy-chip__check{display:inline-flex;}
 
-/* Freeday — Combobox (custom styled select, WAI-ARIA APG select-only) */
+/* Freeday. Combobox (custom styled select, WAI-ARIA APG select-only) */
 .fdy-combo{position:relative;display:block;max-width:22rem;}
 .fdy-combo__button{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;height:var(--control-h);padding:0 var(--space-3);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-combo__button:hover{border-color:var(--color-text-muted);}
 .fdy-combo__button:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button:disabled,.fdy-combo__button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
-/* Read-only: stays focusable & shows its value at full contrast but can't open — muted surface,
+/* Read-only: stays focusable & shows its value at full contrast but can't open, muted surface,
    softened border, default cursor, no focus-ring escalation (matches input[readonly], #39). */
 .fdy-combo__button[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
 .fdy-combo__button[aria-readonly="true"]:hover{border-color:var(--color-border);}
@@ -663,7 +663,7 @@ a { color: var(--color-primary); }
 .fdy-combo__option.is-highlighted[aria-selected="true"]{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary) 55%,transparent);}
 /* The tick is CSS, not content (#004 §2). Inside role="option" it joined the option's ACCESSIBLE
    NAME, so the selected option announced "✓August" while every other announced "August": the state
-   was read twice — once as aria-selected, once as decoration — and a test asking for an option by
+   was read twice, once as aria-selected, once as decoration, and a test asking for an option by
    its own label stopped matching the one that was selected. The `/ ""` is alt text: the glyph is
    painted, the accessibility tree gets nothing. Same reasoning as .fdy-label--required (1.29.0).
    The empty box still reserves its width, so labels stay aligned whether selected or not. */
@@ -672,11 +672,11 @@ a { color: var(--color-primary); }
 @media (prefers-reduced-motion:no-preference){.fdy-combo__listbox:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 @keyframes fdy-combo-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
 
-/* Freeday — Page composition & type roles.
+/* Freeday. Page composition & type roles.
  *
  * The kit stops at the component; these primitives encode *how a page is assembled* so screens
  * built by different people cohere. They carry the usage doctrine (see USAGE.md) in markup: a
- * named type role gets used, a doc gets skimmed. Everything here is token-driven layout — no new
+ * named type role gets used, a doc gets skimmed. Everything here is token-driven layout, no new
  * colours, no new shadows. Pair with .fdy-app (the shell) and the components inside.
  */
 
@@ -685,7 +685,7 @@ a { color: var(--color-primary); }
  * page title (the mistake that collapses three levels into one grey mush). */
 /* --color-text-muted, not -subtle: an eyebrow is a small label naming the thing below it, i.e.
    prose. -subtle is gated at 3.0 on purpose (placeholders, separators, decorative glyphs) and
-   measures 4.41 on the page ground — axe reports it as a serious color-contrast failure. Same
+   measures 4.41 on the page ground, axe reports it as a serious color-contrast failure. Same
    argument, same ink, same 4.41 as .fdy-stat__label in 1.30.0. */
 .fdy-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);margin:0;}
 .fdy-title-page{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:var(--leading-tight);color:var(--color-text);margin:0;text-wrap:balance;}
@@ -719,19 +719,19 @@ a { color: var(--color-primary); }
 .fdy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-5);}
 .fdy-stat{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;}
 /* --color-text-muted, not -subtle: this is a LABEL, i.e. text, and -subtle is deliberately gated at
-   3.0 (placeholders, dividers, decorative glyphs). On surface-2 -subtle measures 4.41 — under AA
+   3.0 (placeholders, dividers, decorative glyphs). On surface-2 -subtle measures 4.41, under AA
    for text, and a stat label is often the only thing naming the number above it. */
 .fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);}
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
-/* A stat value is display type sized for a COUNT — "1,284" — and a back office puts money in it.
+/* A stat value is display type sized for a COUNT, "1,284", and a back office puts money in it.
    "IDR 300,000.00" needs 224px at --text-3xl and the grid's own track is 11rem, so it wrapped
    between the currency and the number: two lines of 31px where the design says one. Measured, not
    guessed (#020).
    The value shrinks only when its own column is too narrow to hold it, so a wide dashboard keeps
    exactly the type it has today. Scoped to a stat INSIDE .fdy-stats, where the width comes from the
-   grid track — `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
+   grid track, `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
    own content. The unconditional rule above stays as the fallback wherever @container is missing. */
 @supports (container-type:inline-size){
   .fdy-stats>.fdy-stat{container-type:inline-size;}
@@ -744,7 +744,7 @@ a { color: var(--color-primary); }
 /* Icon box (#001 §4). The kit ships no icons on purpose, but every icon slot it DOES ship
    (.fdy-btn__icon, .fdy-nav__icon, .fdy-state__icon) assumes something sensible inside, so a
    standalone icon had no contract and every app invented one. 1em keeps the glyph matched to the
-   text beside it at every scale — bring your own paths, use our box. Works on the <svg> itself or
+   text beside it at every scale, bring your own paths, use our box. Works on the <svg> itself or
    on a wrapper around it. */
 .fdy-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-0.125em;}
 .fdy-icon>svg{display:block;width:100%;height:100%;}
@@ -757,13 +757,13 @@ a { color: var(--color-primary); }
 .fdy-text-warning{color:var(--color-warning-strong);}
 .fdy-text-danger{color:var(--color-danger-strong);}
 
-/* Freeday — Date picker (input-styled trigger + calendar popover).
+/* Freeday. Date picker (input-styled trigger + calendar popover).
  * Built by freeday-datepicker.js from an empty [data-fdy-datepicker] wrapper. */
 .fdy-datepicker{position:relative;display:inline-block;width:100%;max-width:14rem;}
 /* Inside a labelled field, a picker fills the field like every other control.
    The 14rem/11rem caps above suit a picker standing on its own; in a form grid
-   they leave the date box visibly short of the combo beside it — 224px against
-   319px in a two-column layout — and the row reads as ragged. The field's own
+   they leave the date box visibly short of the combo beside it. 224px against
+   319px in a two-column layout, and the row reads as ragged. The field's own
    max-width is what should govern there. */
 .fdy-field>.fdy-datepicker,.fdy-field>.fdy-timepicker,.fdy-field>.fdy-daterange{max-width:none;}
 .fdy-datepicker__trigger{display:inline-flex;align-items:center;gap:var(--space-2);width:100%;height:var(--control-h);padding:0 var(--space-3);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
@@ -809,12 +809,12 @@ a { color: var(--color-primary); }
 .fdy-cal__nav:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-cal__nav:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cal__grid{display:grid;grid-template-columns:repeat(7,2rem);gap:2px;}
-/* Month grid — 3×4 over the same track width as the 7-column day grid, so the panel does not resize
+/* Month grid. 3×4 over the same track width as the 7-column day grid, so the panel does not resize
    when you drill and the pointer does not have to travel.
 
    AFTER `.fdy-cal__grid`, and that is the whole rule: the element carries both classes, they weigh
    the same, so source order decides. Declared earlier, the modifier lost to the base it modifies and
-   twelve months rendered seven across — the layout the comment above described, never once applied. */
+   twelve months rendered seven across, the layout the comment above described, never once applied. */
 .fdy-cal__grid--months,.fdy-cal__grid--years{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__dow{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:capitalize;}
 .fdy-cal__day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;}
@@ -832,14 +832,14 @@ a { color: var(--color-primary); }
 /* Responsive: each picker may shrink (min-width:0) & wrap so the range never overflows a
    narrow row/phone; inline-flex still hugs to ~23rem at wider widths (look unchanged). */
 .fdy-daterange{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
-/* Each picker shrinks from an 11rem basis but not below ~7rem — enough for "dd/mm/yyyy" + the icon,
+/* Each picker shrinks from an 11rem basis but not below ~7rem, enough for "dd/mm/yyyy" + the icon,
    so a squeezed range compresses gracefully (and wraps) instead of clipping the date. */
 .fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:7rem;}
 .fdy-daterange__sep{flex:none;color:var(--color-text-subtle);}
 
 @media (prefers-reduced-motion:no-preference){.fdy-datepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
-/* Freeday — Datetime picker (composed: date picker + time picker → one value).
+/* Freeday. Datetime picker (composed: date picker + time picker → one value).
  * A thin composer (freeday-datetime.js) links a child [data-fdy-datepicker] and
  * [data-fdy-timepicker] and emits a single combined event. Icon variants come from
  * the child pickers (data-fdy-no-icon / <template data-fdy-icon>). */
@@ -848,18 +848,18 @@ a { color: var(--color-primary); }
 .fdy-datetimepicker .fdy-datepicker{width:12rem;max-width:none;}
 .fdy-datetimepicker .fdy-timepicker{width:8.5rem;max-width:none;}
 
-/* Freeday — Description list (key-value detail view) */
+/* Freeday. Description list (key-value detail view) */
 .fdy-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-5);margin:0;}
 .fdy-dl dt{color:var(--color-text-muted);font-size:var(--text-sm);}
 .fdy-dl dd{margin:0;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);}
 .fdy-dl--rows{grid-template-columns:1fr;gap:var(--space-1);}
 .fdy-dl--rows dt{margin-top:var(--space-2);}
 
-/* Freeday — Divider */
+/* Freeday. Divider */
 .fdy-divider{border:0;border-top:var(--bw) solid var(--color-border);margin:var(--space-4) 0;}
 .fdy-divider--vertical{border-top:0;border-left:var(--bw) solid var(--color-border);margin:0 var(--space-4);align-self:stretch;}
 
-/* Freeday — Drawer (temporary side panel on native <dialog>: focus-trap / Esc /
+/* Freeday. Drawer (temporary side panel on native <dialog>: focus-trap / Esc /
  * backdrop / return-focus are free). Anchors left (default) or right.
  * Enhanced by freeday-drawer.js (open trigger + backdrop-click close). */
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
@@ -886,7 +886,7 @@ a { color: var(--color-primary); }
   .fdy-drawer[open]::backdrop{opacity:0;}
 }
 
-/* Freeday — File upload (drop target + explicit per-file states).
+/* Freeday. File upload (drop target + explicit per-file states).
  * Enhanced by freeday-upload.js; states: idle · drag-over · uploading · done · error. */
 .fdy-dropzone{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6);text-align:center;border:2px dashed var(--color-control-border);border-radius:var(--radius-lg);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
 .fdy-dropzone:hover{border-color:var(--color-text-muted);}
@@ -898,17 +898,17 @@ a { color: var(--color-primary); }
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}
 .fdy-dropzone__title{font-size:inherit;font-weight:var(--weight-medium);color:var(--color-text);margin:0;}
 .fdy-dropzone__hint{font-size:var(--text-xs);}
-/* Wide (horizontal) layout — icon beside the copy instead of stacked, for full-width
+/* Wide (horizontal) layout, icon beside the copy instead of stacked, for full-width
  * sections. Wrap the title + hint in .fdy-dropzone__text. */
 .fdy-dropzone--row{flex-direction:row;align-items:center;justify-content:center;text-align:left;gap:var(--space-4);}
 .fdy-dropzone__text{display:flex;flex-direction:column;gap:var(--space-1);}
 
 /* File rows (list of added/uploaded/rejected files) */
-/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it —
-   an "Add files" button, in every upload UI there is — sat flush against the last row: measured
+/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it,
+   an "Add files" button, in every upload UI there is, sat flush against the last row: measured
    0px. A block that claims space on one side only is not spacing, it is a lean. */
 .fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);}
-/* Nothing after it, nothing to separate from — so the room is not spent. */
+/* Nothing after it, nothing to separate from, so the room is not spent. */
 .fdy-filelist:last-child{margin-bottom:0;}
 /* Side-by-side rows on wide screens (reflow to one column when narrow). */
 .fdy-filelist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
@@ -927,7 +927,7 @@ a { color: var(--color-primary); }
 .fdy-file--error .fdy-file__icon{color:var(--color-danger);}
 .fdy-file--error .fdy-file__sub{color:var(--color-danger-strong);}
 
-/* Freeday — Filter bar (a consistent row of filters: search + selects + actions).
+/* Freeday. Filter bar (a consistent row of filters: search + selects + actions).
  * Solves the "ragged filter row": apps improvised flex rows with ad-hoc
  * flex/min-width, so grow fields ballooned while selects stayed tiny and no two
  * screens matched. Here every field snaps to a shared width rhythm; one field may
@@ -936,7 +936,7 @@ a { color: var(--color-primary); }
 .fdy-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);}
 /* Composed with a table toolbar (one element, both classes): the fields decide the alignment.
  * `.fdy-table-toolbar` sets align-items:center (right for bare buttons) at equal specificity, and
- * being later in the bundle it would otherwise win — floating labelled fields' neighbours out of line.
+ * being later in the bundle it would otherwise win, floating labelled fields' neighbours out of line.
  * This 2-class selector (0,2,0) settles it toward the filterbar's flex-end regardless of source order. */
 .fdy-table-toolbar.fdy-filterbar{align-items:flex-end;}
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
@@ -944,7 +944,7 @@ a { color: var(--color-primary); }
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
 /* Controls fill their field's column (drop the standalone input-group/combo caps). */
 .fdy-filterbar>.fdy-field .fdy-input-group,.fdy-filterbar>.fdy-field .fdy-combo{max-width:none;width:100%;}
-/* Column-width rhythm — pick one per field so bars across the app line up. */
+/* Column-width rhythm, pick one per field so bars across the app line up. */
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}
 .fdy-filterbar>.fdy-field--w-xl{width:18rem;}
@@ -954,11 +954,11 @@ a { color: var(--color-primary); }
 .fdy-filterbar>.fdy-field--w-grow{flex:1 1 16rem;width:auto;min-width:12rem;}
 /* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline.
  * Wrap note: a wrapped bar breaks flex lines on each item's *flex-basis* (the grow field's
- * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
+ * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width, so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
-/* A control that carries NO label of its own — a checkbox, a switch, a lone
-   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+/* A control that carries NO label of its own, a checkbox, a switch, a lone
+   button, in a bar whose `align-items:flex-end` exists to line up LABELLED
    fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
    20px checkbox sits well below the 32px input's centre line and reads as
    dropped. Giving it the height of a control lands its box exactly where an
@@ -966,7 +966,7 @@ a { color: var(--color-primary); }
    line. Raised from IDU_EMATE_APPL_WEB (#014). */
 .fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
-/* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
+/* Opt-in: sit the actions inline right after the last field instead of at the far edge, so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
 .fdy-filterbar--actions-inline .fdy-filterbar__actions{margin-left:0;}
 /* Stack on narrow screens so nothing overflows the row. */
@@ -975,16 +975,16 @@ a { color: var(--color-primary); }
   .fdy-filterbar__actions{width:100%;margin-left:0;}
 }
 
-/* Freeday — Form grid (document/header fields laid out in aligned columns).
+/* Freeday. Form grid (document/header fields laid out in aligned columns).
  * The two-dimensional counterpart to the single-column .fdy-field stack and the
  * one-row .fdy-filterbar: related fields sit in columns that reflow to one on narrow
  * screens. Fields are the standard .fdy-field; a field with --full spans the whole row
- * (e.g. an address or note). Zero JS — pure layout over .fdy-field. */
+ * (e.g. an address or note). Zero JS, pure layout over .fdy-field. */
 .fdy-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--space-4) var(--space-5);}
 .fdy-form-grid>.fdy-field{max-width:none;}
 .fdy-form-grid>.fdy-field--full{grid-column:1/-1;}
 
-/* Freeday — Input group (prefix/suffix addons, e.g. Rp / % / icon) */
+/* Freeday. Input group (prefix/suffix addons, e.g. Rp / % / icon) */
 .fdy-input-group{display:flex;align-items:stretch;height:var(--control-h);max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input-group:hover{border-color:var(--color-text-muted);}
 .fdy-input-group:focus-within{border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -997,34 +997,34 @@ a { color: var(--color-primary); }
 .fdy-input-group .fdy-input:focus{box-shadow:none;}
 .fdy-input-group__addon{display:inline-flex;align-items:center;padding:0 var(--space-3);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;border-right:var(--bw) solid var(--color-border);}
 .fdy-input-group__addon:last-child{border-right:0;border-left:var(--bw) solid var(--color-border);}
-/* Borderless leading icon (e.g. search magnifier) — self-contained like __btn so it
+/* Borderless leading icon (e.g. search magnifier), self-contained like __btn so it
    centers standalone (no base .fdy-input-group__addon required). */
 .fdy-input-group__addon--icon{display:inline-flex;align-items:center;background:transparent;border:0;padding:0 0 0 var(--space-3);color:var(--color-text-subtle);}
 .fdy-input-group__addon--icon svg{display:block;width:1rem;height:1rem;}
-/* The leading icon already provides the left inset — don't let the input add its full left padding on top. */
+/* The leading icon already provides the left inset, don't let the input add its full left padding on top. */
 .fdy-input-group__addon--icon + .fdy-input{padding-left:var(--space-2);}
-/* Trailing action button (e.g. choose-from-list magnifier) — a real, focusable control. */
+/* Trailing action button (e.g. choose-from-list magnifier), a real, focusable control. */
 .fdy-input-group__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--control-h);align-self:stretch;border:0;border-left:var(--bw) solid var(--color-border);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
 .fdy-input-group__btn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-input-group__btn:focus-visible{outline:none;color:var(--color-text);box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-input-group__btn svg{display:block;width:1.1rem;height:1.1rem;}
 /* Leading action button (the "−" of a number stepper): the divider belongs on the other side. */
 .fdy-input-group__btn:first-child{border-left:0;border-right:var(--bw) solid var(--color-border);}
-/* At a bound, or on a disabled/read-only field, the button must look as inert as it acts — same dim
+/* At a bound, or on a disabled/read-only field, the button must look as inert as it acts, same dim
    + not-allowed as .fdy-input:disabled. :hover still matches a disabled button, so it is withdrawn. */
 .fdy-input-group__btn:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-input-group__btn:disabled:hover{background:var(--color-surface-2);color:var(--color-text-muted);}
-/* Error state must win over the neutralizing rules above — promote to the wrapper. */
+/* Error state must win over the neutralizing rules above, promote to the wrapper. */
 .fdy-input-group:has(.fdy-input--error),.fdy-input-group:has(.fdy-combo--error),.fdy-input-group:has([aria-invalid="true"]){border-color:var(--color-danger);}
 .fdy-input-group:has(.fdy-input--error):focus-within,.fdy-input-group:has(.fdy-combo--error):focus-within,.fdy-input-group:has([aria-invalid="true"]):focus-within{border-color:var(--color-danger);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 
-/* Freeday — Field & Input */
+/* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
-/* A grouped field is legitimately a <fieldset> (it needs a <legend>) — e.g. a radio/checkbox group.
+/* A grouped field is legitimately a <fieldset> (it needs a <legend>), e.g. a radio/checkbox group.
    Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
    <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */
 fieldset.fdy-field{border:0;margin:0;padding:0;min-inline-size:0;}
-/* The rendered legend is laid out outside the fieldset's flex flow, so `gap` never reaches it —
+/* The rendered legend is laid out outside the fieldset's flex flow, so `gap` never reaches it,
    measured 0px between legend and first control. This is the spacing contract a grouped field
    needs; it matches .fdy-field's own gap so the group reads as one rhythm. */
 fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
@@ -1042,40 +1042,40 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
 .fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 /* Numbers (#44): the user agent draws its own spin buttons inside the field, in OS widget colours no
-   theme reaches — on a dark surface they read as a light-grey artefact glued to a themed field, and
+   theme reaches, on a dark surface they read as a light-grey artefact glued to a themed field, and
    it is the only unthemed control on the page. Removed so .fdy-input looks the same whatever its
    type. `appearance:textfield` is the Firefox half, the pseudo-element the Blink/WebKit half; both
-   are needed. This trades away the mouse-only increment — arrow keys on a focused number input still
+   are needed. This trades away the mouse-only increment, arrow keys on a focused number input still
    work, and [data-fdy-number] gives the affordance back on the kit's terms. */
 .fdy-input[type="number"]{appearance:textfield;-webkit-appearance:textfield;}
 .fdy-input[type="number"]::-webkit-outer-spin-button,.fdy-input[type="number"]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 /* Required marker. The control already carries `required`, so the asterisk is decoration: the
-   `/ ""` is CSS alt text — the glyph is painted but exposes NOTHING to the accessibility tree, so a
+   `/ ""` is CSS alt text, the glyph is painted but exposes NOTHING to the accessibility tree, so a
    screen reader does not read "star" after every label. That is stricter than a <span> an app has to
    remember to mark aria-hidden, and it cannot be forgotten. */
 .fdy-label--required::after{content:"*" / "";margin-left:var(--space-1);color:var(--color-danger);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}
 .fdy-help--error{color:var(--color-danger);}
 
-/* Freeday — Keyboard key */
+/* Freeday. Keyboard key */
 .fdy-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text);background:var(--color-surface-2);border:var(--bw) solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);}
 
-/* Freeday — List: the FLAT row container.
+/* Freeday. List: the FLAT row container.
  *
  * USAGE.md §3 puts list rows among the surfaces that should be flat, but until now the only
- * container the kit shipped was .fdy-card — which carries --shadow-lift (a real 34px lift). A
+ * container the kit shipped was .fdy-card, which carries --shadow-lift (a real 34px lift). A
  * responsive table that becomes a list below `md` therefore had to choose between a stack of
  * shadowed cards (against the doctrine) or a hand-built box, which needs a colour and so escapes
  * the token system. This is that missing container: one flat surface, hairline dividers, no shadow.
  *
  * Not to be confused with .fdy-list-reset (base.css), which only strips UA bullets/indent.
  * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
-/* position:relative — containing block for out-of-flow row content (see base.css). */
+/* position:relative, containing block for out-of-flow row content (see base.css). */
 .fdy-list{position:relative;list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
 /* A row that hosts a stretched target has to be the anchor itself (#008 §1). Without this the
-   overlay resolves against .fdy-list — which IS positioned — so EVERY row's target covers the whole
+   overlay resolves against .fdy-list, which IS positioned, so EVERY row's target covers the whole
    list and the last one in the DOM wins: measured, a click on row one opens row two, under row one's
    name, which looks exactly like working software. Opt-in via :has(), so a row that doesn't use the
    pattern is untouched and nothing an app absolutely positions inside a plain row starts resolving
@@ -1084,7 +1084,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
 /* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
  * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the
- * <li>s — a bare `.fdy-list__row + .fdy-list__row` silently matches nothing there). */
+ * <li>s, a bare `.fdy-list__row + .fdy-list__row` silently matches nothing there). */
 .fdy-list__row + .fdy-list__row,
 .fdy-list > * + * > .fdy-list__row{border-top:var(--bw) solid var(--color-border-muted);}
 /* A row that is itself the control: render it as <button>/<a> and the UA box is reset without
@@ -1093,7 +1093,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-list__row--button:hover,.fdy-list__row--interactive:hover{background:var(--color-surface-2);}
 .fdy-list__row--button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-list__row--interactive{cursor:pointer;}
-/* Disabled row. The reset above adopts the UA button box, but not its disabled state — so a row
+/* Disabled row. The reset above adopts the UA button box, but not its disabled state, so a row
    disabled mid-flight (a redirect in progress, say) kept lighting up and kept a pointer cursor:
    a control answering the pointer while refusing input. Same contract as every other disabled
    control in the kit (dim + not-allowed), hover withdrawn, both the native and the aria- form. */
@@ -1106,7 +1106,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-list__aside{flex:none;display:flex;align-items:center;gap:var(--space-2);}
 /* Density: rows tighten with the rest of the kit (--space-* mid-range steps under compact). */
 
-/* Freeday — Menu (action popup) + Split button. Enhanced by freeday-menu.js. */
+/* Freeday. Menu (action popup) + Split button. Enhanced by freeday-menu.js. */
 .fdy-menu-wrap{position:relative;display:inline-flex;}
 .fdy-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;min-width:11rem;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
 .fdy-menu[hidden]{display:none;}
@@ -1114,7 +1114,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-menu__item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);text-align:left;cursor:pointer;white-space:nowrap;}
 .fdy-menu__item:hover,.fdy-menu__item.is-highlighted{background:var(--color-surface-3);}
 /* Focus is not hover. The enhancer moves real DOM focus (freeday-menu.js `.focus()`), so this is
-   the only thing a keyboard user has to go on — with the hover fill alone, arrowing through the
+   the only thing a keyboard user has to go on, with the hover fill alone, arrowing through the
    menu is invisible. Same ring as .fdy-nav__item, which got this right. Reported twice. */
 .fdy-menu__item:focus-visible{outline:none;background:var(--color-surface-3);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 .fdy-menu__item:disabled{opacity:.5;cursor:not-allowed;background:transparent;}
@@ -1123,7 +1123,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-menu__sep{height:0;margin:var(--space-1) 0;border:0;border-top:var(--bw) solid var(--color-border-muted);}
 @media (prefers-reduced-motion:no-preference){.fdy-menu:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
-/* Split button — main action + attached menu toggle (caret) */
+/* Split button, main action + attached menu toggle (caret) */
 .fdy-btn-split{position:relative;display:inline-flex;border-radius:var(--radius-md);transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 /* One control: the two halves must stay coplanar. Neutralize each segment's own
    lift + drop-shadow (they would misalign the seam / glow a single half); the
@@ -1138,7 +1138,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-btn-split__toggle:hover,.fdy-btn-split__toggle:focus-visible{z-index:1;}
 .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
 
-/* Freeday — Modal (native <dialog>) */
+/* Freeday. Modal (native <dialog>) */
 .fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
@@ -1161,7 +1161,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
   .fdy-modal[open]::backdrop{opacity:0;}
 }
 
-/* Freeday — Pagination */
+/* Freeday. Pagination */
 .fdy-pagination__list{display:flex;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0;}
 .fdy-pagination__link{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);background:transparent;border:var(--bw) solid transparent;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-pagination__link:hover{background:var(--color-surface-2);border-color:var(--color-border);}
@@ -1170,7 +1170,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-pagination__link[aria-disabled="true"],.fdy-pagination__link:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}
 .fdy-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--color-text-subtle);}
 
-/* Freeday — Progress */
+/* Freeday. Progress */
 .fdy-progress{height:.5rem;border-radius:var(--radius-full);background:var(--color-surface-3);overflow:hidden;}
 .fdy-progress__bar{height:100%;border-radius:inherit;background:var(--color-primary);transition:width var(--dur-base) var(--ease-standard);}
 .fdy-progress--indeterminate{position:relative;}
@@ -1178,7 +1178,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 @keyframes fdy-progress-indet{0%{margin-left:-40%;}100%{margin-left:100%;}}
 @media (prefers-reduced-motion:reduce){.fdy-progress--indeterminate .fdy-progress__bar{animation:none;width:100%;opacity:.5;}}
 
-/* Freeday — Rating (star rating). Interactive = native radio group (arrow keys, form-assoc);
+/* Freeday. Rating (star rating). Interactive = native radio group (arrow keys, form-assoc);
  * filled vs empty differ by fill-vs-outline (not colour alone). Enhanced by freeday-rating.js. */
 .fdy-rating{display:inline-flex;gap:var(--space-1);}
 .fdy-rating__star{display:inline-flex;line-height:0;cursor:pointer;}
@@ -1191,17 +1191,17 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-rating--disabled .fdy-rating__star{cursor:not-allowed;}
 .fdy-rating--disabled .fdy-rating__star svg{opacity:.5;}
 /* Invalid: tint the (outline) empty stars danger so a required-but-empty rating reads as an error,
-   paired with a help/error message — never colour alone. */
+   paired with a help/error message, never colour alone. */
 .fdy-rating--error .fdy-rating__star svg{stroke:var(--color-danger);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}
 
-/* Freeday — Selection controls */
+/* Freeday. Selection controls */
 /* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
    `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
-   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   shrinkable, so as soon as the label wrapped to a second line the box gave up horizontal space
    to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
    every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
-   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   Nothing in the declarations looked wrong, because the width was never overridden, it was
    negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
 .fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
@@ -1219,7 +1219,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
-/* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
+/* Standalone checkbox (e.g. table row/select-all), supports :indeterminate */
 .fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}
@@ -1228,7 +1228,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-checkbox:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-checkbox:disabled{opacity:.5;cursor:not-allowed;}
 
-/* Freeday — Skeleton */
+/* Freeday. Skeleton */
 .fdy-skeleton{display:block;border-radius:var(--radius-sm);background:var(--color-surface-3);background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-surface) 60%,transparent),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:fdy-skeleton 1.4s ease-in-out infinite;}
 .fdy-skeleton--text{height:.8rem;margin:.3rem 0;}
 .fdy-skeleton--title{height:1.2rem;width:40%;}
@@ -1241,7 +1241,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 @keyframes fdy-skeleton{to{background-position:-200% 0;}}
 @media (prefers-reduced-motion:reduce){.fdy-skeleton{animation:none;}}
 
-/* Freeday — Slider (native <input type="range"> themed via accent-color: keeps native
+/* Freeday. Slider (native <input type="range"> themed via accent-color: keeps native
  * keyboard + ARIA, filled track and thumb come free). Optional value output + scale.
  * freeday-slider.js just mirrors the value into an <output for="…">. */
 .fdy-slider{width:100%;max-width:22rem;height:1.5rem;accent-color:var(--color-primary);cursor:pointer;}
@@ -1254,14 +1254,14 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-slider__value{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-primary-strong);font-variant-numeric:tabular-nums;}
 .fdy-slider__scale{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums;}
 
-/* Freeday — Spinner */
+/* Freeday. Spinner */
 .fdy-spinner{display:inline-block;width:1.5rem;height:1.5rem;border:2.5px solid var(--color-border-strong);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:fdy-spin .7s linear infinite;}
 .fdy-spinner--sm{width:1rem;height:1rem;border-width:2px;}
 .fdy-spinner--lg{width:2.5rem;height:2.5rem;border-width:3px;}
 @keyframes fdy-spin{to{transform:rotate(360deg);}}
 @media (prefers-reduced-motion:reduce){.fdy-spinner{animation-duration:2s;}}
 
-/* Freeday — States (empty / loading / error placeholders) */
+/* Freeday. States (empty / loading / error placeholders) */
 .fdy-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-10) var(--space-6);}
 .fdy-state__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--color-text-subtle);}
 .fdy-state__icon svg{width:100%;height:100%;}
@@ -1270,7 +1270,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-state__actions{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;}
 .fdy-state--danger .fdy-state__icon{color:var(--color-danger-strong);}
 
-/* Freeday — Stepper / Wizard (progress header + optional panels).
+/* Freeday. Stepper / Wizard (progress header + optional panels).
  * Enhanced by freeday-stepper.js for prev/next navigation. */
 .fdy-stepper{display:flex;list-style:none;margin:0;padding:0;}
 .fdy-step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;}
@@ -1280,7 +1280,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-step__btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:0 var(--space-2);background:none;border:0;font:inherit;color:inherit;cursor:pointer;max-width:100%;}
 .fdy-step__btn:disabled{cursor:default;}
 /* The marker carries the lift itself, NOT `__btn`. The connector above is position:absolute with
-   z-index:0, and a positioned box paints after in-flow inline content in the same stacking context —
+   z-index:0, and a positioned box paints after in-flow inline content in the same stacking context,
    so a marker that is merely inline (an indicator-only stepper with no `__btn`) gets painted THROUGH
    by the connector line. Lifting the part that must always exist makes that assembly impossible;
    `__btn`'s own z-index stays, harmlessly, for the navigable case. */
@@ -1297,8 +1297,8 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-step-panels{margin-top:var(--space-5);}
 .fdy-step-nav{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-5);}
 
-/* Freeday — Table */
-/* position:relative on every scroller/clipper — it makes the box the containing block for its own
+/* Freeday. Table */
+/* position:relative on every scroller/clipper, it makes the box the containing block for its own
    absolutely positioned content (.fdy-visually-hidden above all), which `overflow` alone does NOT
    clip. Without it a hidden label in a wide table scrolls the whole page. See base.css. */
 .fdy-table-wrap{position:relative;overflow-x:auto;border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);}
@@ -1309,7 +1309,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table tbody tr:last-child td{border-bottom:0;}
 .fdy-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard);}
 .fdy-table tbody tr:hover{background:var(--color-surface-2);}
-/* Monospace data — ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
+/* Monospace data, ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
    or inline (`<span class="fdy-mono">`), not just numeric columns. */
 .fdy-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
 /* Numeric cells are mono + right-aligned. Kept self-contained (not composed from .fdy-mono)
@@ -1336,7 +1336,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table__selcol{width:1px;white-space:nowrap;}
 .fdy-table tbody tr[aria-selected="true"],.fdy-table tbody tr[aria-selected="true"]:hover{background:var(--color-primary-soft);}
 
-/* Frozen header row and/or first column — a rate matrix, a timetable, any grid read
+/* Frozen header row and/or first column, a rate matrix, a timetable, any grid read
    against two axes at once.
 
    This modifier exists because `position:sticky` alone is NOT enough. With
@@ -1350,12 +1350,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 /* Freezing the HEADER ROW is its own modifier because it needs a vertical
    scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
    scrolls with the PAGE, and `top:0` against the page sticks the header under
-   the viewport edge — over the app's own top bar — which is worse than not
+   the viewport edge, over the app's own top bar, which is worse than not
    freezing it. Ask for the axis you actually have. */
 .fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
 
 /* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
-   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   included, and give each frozen column its own `--fdy-freeze-left`. 0 for the
    first, the summed widths of the frozen columns left of it after that. One
    frozen column needs no variable at all. Mark the last one `--edge` so the
    reader can see where the frozen block ends.
@@ -1364,12 +1364,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    widths, which CSS cannot sum, and hard-coding them here would only work for
    tables whose columns are all the same width. */
 .fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
-/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+/* A frozen body cell slides OVER the data, so it must be OPAQUE, otherwise the
    cells beneath show through it. A `th` already carries the header tint from the
    base rule, and that tint is usually the whole point: it is what marks a column
    as identity rather than data. So only a `td` is given a surface here. A table
-   that wants its frozen `th` to read as a body row instead — a rate matrix, where
-   a hovered row should band unbroken across the freeze line — says so itself. */
+   that wants its frozen `th` to read as a body row instead, a rate matrix, where
+   a hovered row should band unbroken across the freeze line, says so itself. */
 .fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
 .fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
 .fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
@@ -1392,19 +1392,19 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:var(--bw) solid var(--color-border);}
 .fdy-table-footer__info{font-size:var(--text-sm);color:var(--color-text-muted);}
 /* Rows per page. `margin-left:auto` eats the free space, so the size control and the pager travel
-   together on the right while the range stays left — no wrapper element, which is what keeps the
+   together on the right while the range stays left, no wrapper element, which is what keeps the
    footer's DOM byte-identical for the tables that don't offer one (#008). The control is the kit's
    own `.fdy-combo`, never a native <select>: an OS menu is unthemeable, and on macOS it drops a
-   dark panel into a light page — which is the reason FdyCombo exists at all. Sized to its content:
+   dark panel into a light page, which is the reason FdyCombo exists at all. Sized to its content:
    `.fdy-combo` is display:block at max-width 22rem, which in a footer is a bar-wide box for two
-   digits. Its HEIGHT is left alone on purpose — `--control-h`, the same as every other control on
+   digits. Its HEIGHT is left alone on purpose, `--control-h`, the same as every other control on
    the page. It briefly carried 2.25rem to match the pager links beside it, which made the one
    combobox in a compact app 4px taller than all the others; a pager link is a nav button, and the
    thing this must agree with is the form controls. */
 .fdy-table-footer__size{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;font-size:var(--text-sm);color:var(--color-text-muted);}
 .fdy-table-footer__size .fdy-combo{width:5.5rem;}
 
-/* Column filter — funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
+/* Column filter, funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
 .fdy-table__filterwrap{display:inline-flex;align-items:center;vertical-align:middle;}
 .fdy-table__filterbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-left:var(--space-1);padding:0;vertical-align:middle;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;}
 .fdy-table__filterbtn:hover{background:var(--color-surface-3);color:var(--color-text);}
@@ -1421,7 +1421,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-filter__range .fdy-input{width:6rem;}
 .fdy-filter__foot{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-3);}
 
-/* Bulk-action bar — appears above the table body once rows are selected */
+/* Bulk-action bar, appears above the table body once rows are selected */
 .fdy-table-bulkbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-primary-soft);border-bottom:var(--bw) solid var(--color-border);color:var(--color-primary-strong);font-size:var(--text-sm);}
 .fdy-table-bulkbar[hidden]{display:none;}
 .fdy-table-bulkbar__count{font-weight:var(--weight-semibold);white-space:nowrap;}
@@ -1429,14 +1429,14 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-bulkbar__actions{display:flex;gap:var(--space-2);}
 
 /* Controls inside a data row. `.fdy-input` and friends are width:100%, which in an auto-layout
-   table means they contribute NO intrinsic width — the column shrinks to whatever the header text
+   table means they contribute NO intrinsic width, the column shrinks to whatever the header text
    needs and the control collapses with it. A NOTE column ends up a box too narrow to read what you
    typed into it. The floor is per-control rather than on the column, because the table does not
    know which of its columns hold controls. */
 .fdy-table td>.fdy-input,.fdy-table td>.fdy-textarea,.fdy-table td>.fdy-combo,.fdy-table td>.fdy-input-group,.fdy-table td>.fdy-datepicker,.fdy-table td>.fdy-timepicker{min-width:7rem;}
 
-/* Freeday — Tabs (WAI-ARIA APG) */
-/* position:relative — containing block for out-of-flow content in the tabs (see base.css). */
+/* Freeday. Tabs (WAI-ARIA APG) */
+/* position:relative, containing block for out-of-flow content in the tabs (see base.css). */
 .fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
 .fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
@@ -1444,7 +1444,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}
 /* `aria-current="page"` is honoured alongside `aria-selected="true"` so the tab look can be used for
    ROUTE-driven sub-navigation (/settings/profile · /settings/billing), where the tabs are real links.
-   A link cannot be `aria-selected` — that is invalid ARIA on an anchor; `aria-current` is the only
+   A link cannot be `aria-selected`, that is invalid ARIA on an anchor; `aria-current` is the only
    correct marker, and it is what a router sets. Use `.fdy-tabs` + `freeday-tabs.js` (roving tabindex,
    a panel per tab) for in-page tabs; use these classes on plain links for routed ones, and
    `.fdy-nav--horizontal` for an application's PRIMARY navigation. */
@@ -1455,7 +1455,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 /* Reveal the newly-shown panel on tab switch (fade + rise), reduced-motion gated. */
 @media (prefers-reduced-motion:no-preference){.fdy-tabs__panel:not([hidden]){animation:fdy-combo-in var(--dur-base) var(--ease-standard);}}
 
-/* Freeday — Timeline (vertical event feed: dot markers on a connector line). Pure CSS. */
+/* Freeday. Timeline (vertical event feed: dot markers on a connector line). Pure CSS. */
 .fdy-timeline{list-style:none;margin:0;padding:0;}
 .fdy-timeline__item{position:relative;padding:0 0 var(--space-5) var(--space-6);border-left:2px solid var(--color-border);}
 .fdy-timeline__item:last-child{border-left-color:transparent;padding-bottom:0;}
@@ -1468,7 +1468,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-timeline__title{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text);}
 .fdy-timeline__text{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-normal);}
 
-/* Freeday — Time picker (input-styled trigger + scrollable time-list popover).
+/* Freeday. Time picker (input-styled trigger + scrollable time-list popover).
  * Built by freeday-timepicker.js from an empty [data-fdy-timepicker] wrapper.
  * Trigger visual mirrors the date picker for a consistent control family. */
 .fdy-timepicker{position:relative;display:inline-block;width:100%;max-width:11rem;}
@@ -1492,14 +1492,14 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-timepicker__opt[aria-selected="true"]{background:var(--color-primary-soft);color:var(--color-primary-strong);font-weight:var(--weight-semibold);}
 @media (prefers-reduced-motion:no-preference){.fdy-timepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
-/* Freeday — Toast (transient notification) */
+/* Freeday. Toast (transient notification) */
 /* The region is a POPOVER, not merely a high z-index.
-   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER, a
    layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
    an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
    most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
    added, which puts the region in the top layer too, and last-in wins there.
-   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   Everything after `pointer-events` is undoing the UA's [popover] defaults, it arrives with
    inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
    toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
    block at z-index 200, which is exactly what it was before. */
@@ -1522,14 +1522,14 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 @media (prefers-reduced-motion:no-preference){.fdy-toast{animation:fdy-toast-in var(--dur-base) var(--ease-spring);}}
 @keyframes fdy-toast-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
 
-/* Freeday — Tooltip (CSS-only, hover/focus) */
+/* Freeday. Tooltip (CSS-only, hover/focus) */
 .fdy-tooltip-wrap{position:relative;display:inline-flex;}
 .fdy-tooltip{position:absolute;bottom:calc(100% + var(--space-2));left:50%;z-index:150;max-width:16rem;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--color-inverse-text);background:var(--color-inverse-surface);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(4px);transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);}
 .fdy-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:.3rem solid transparent;border-top-color:var(--color-inverse-surface);}
 .fdy-tooltip-wrap:hover .fdy-tooltip,.fdy-tooltip-wrap:focus-within .fdy-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
 @media (prefers-reduced-motion:reduce){.fdy-tooltip{transition:none;transform:translateX(-50%);}}
 
-/* Freeday — Tree view (hierarchy via nested native <details>: keyboard-toggle, zero-JS).
+/* Freeday. Tree view (hierarchy via nested native <details>: keyboard-toggle, zero-JS).
  * Branches expand/collapse; leaves are plain rows. Chevron + optional folder/file icons. */
 .fdy-tree{list-style:none;margin:0;padding:0;font-size:var(--text-sm);}
 .fdy-tree ul{list-style:none;margin:0;padding-left:var(--space-4);}
@@ -1546,7 +1546,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 /* Disabled row (branch summary or leaf): dimmed, no hover, not interactive. */
 .fdy-tree__leaf[aria-disabled="true"],.fdy-tree__branch[aria-disabled="true"] > summary{opacity:.5;cursor:not-allowed;pointer-events:none;}
 
-/* Checkbox variant — a selectable tree (cascading parent/child via freeday-tree.js).
+/* Checkbox variant, a selectable tree (cascading parent/child via freeday-tree.js).
  * A native <input class="fdy-checkbox"> sits at the start of every row; a partially
  * selected branch shows the native :indeterminate dash. The checkbox stops click
  * propagation, so toggling selection never expands/collapses the branch. */