@hadoku/task-ui-components 0.0.0-stage → 4.20.3

package/dist/task-ui-components.css

@@ -0,0 +1,1866 @@
+/* Tooltip styles for @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/tooltip.css'
+ *
+ * `inverse` paints body text colour as the surface and the page background
+ * as the text — the same pair as body copy, flipped, so its contrast is the
+ * theme's own text contrast in every theme.
+ */
+
+.hdk-tooltip {
+  --_tip-bg: var(--color-text);
+  --_tip-fg: var(--color-bg);
+  --_tip-border: transparent;
+  /* Overwritten inline once placed: where the anchor's centre falls. */
+  --hdk-tooltip-arrow: 50%;
+
+  position: fixed;
+  z-index: 1100;
+  max-width: min(280px, calc(100vw - 16px));
+  padding: 6px 10px;
+  font-size: var(--hdk-text-xs);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.4;
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: break-word;
+  color: var(--_tip-fg);
+  background-color: var(--_tip-bg);
+  border: 1px solid var(--_tip-border);
+  border-radius: var(--hdk-radius);
+  box-shadow: var(--hdk-shadow-md);
+  /* A fade, never a slide: a transform puts the bubble on its own layer, so
+   * its 1px border smears across rows mid-slide and visibly snaps back into
+   * place when the transition ends. */
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.hdk-tooltip--visible {
+  opacity: 1;
+}
+
+.hdk-tooltip--card {
+  --_tip-bg: var(--color-bg-card);
+  --_tip-fg: var(--color-text);
+  --_tip-border: var(--color-border);
+
+  box-shadow: var(--hdk-shadow-lg);
+}
+
+/* A `title=` string from installTitleTooltips: plain text, and its line
+ * breaks are real (a native title shows them too). */
+.hdk-tooltip--plain {
+  white-space: pre-line;
+}
+
+.hdk-tooltip--primary {
+  --_tip-bg: var(--color-primary);
+  --_tip-fg: var(--color-on-primary);
+}
+
+/* ── arrow ────────────────────────────────────────────────────────────── */
+
+/* A rotated square sharing the bubble's fill and border; only its two outer
+ * edges carry the border, so it reads as one shape with the bubble. */
+.hdk-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--_tip-bg);
+  border: 1px solid var(--_tip-border);
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+
+.hdk-tooltip--top::after {
+  top: 100%;
+  left: var(--hdk-tooltip-arrow);
+  translate: -50% -50%;
+  rotate: 45deg;
+}
+
+.hdk-tooltip--bottom::after {
+  bottom: 100%;
+  left: var(--hdk-tooltip-arrow);
+  translate: -50% 50%;
+  rotate: -135deg;
+}
+
+.hdk-tooltip--left::after {
+  left: 100%;
+  top: var(--hdk-tooltip-arrow);
+  translate: -50% -50%;
+  rotate: -45deg;
+}
+
+.hdk-tooltip--right::after {
+  right: 100%;
+  top: var(--hdk-tooltip-arrow);
+  translate: 50% -50%;
+  rotate: 135deg;
+}
+/**
+ * ThemePicker Component Styles
+ * Beautiful theme picker with light/dark pill design
+ *
+ * Required CSS Variables (should be defined by @wolffm/themes):
+ * --color-text
+ * --color-primary
+ * --color-primary-hover
+ * --color-primary-bg
+ * --color-bg-card
+ * --color-text-secondary
+ * --hdk-shadow-focus-sm
+ * --hdk-shadow-md
+ * --hdk-shadow-lg
+ * --transition-fast (e.g., 0.15s ease)
+ * --hdk-space-sm (e.g., 8px)
+ * --hdk-space-md (e.g., 12px)
+ * --hdk-space-lg (e.g., 16px)
+ * --hdk-text-lg (e.g., 18px)
+ * --font-weight-semibold (e.g., 600)
+ */
+
+/* The round 32px icon button on the AppHeader bar — the theme picker trigger,
+ * the settings gear, and any link an app puts in the actions row.
+ *
+ * Defined ONCE. The picker and the gear each used to carry their own copy and
+ * the two had already drifted (padding 8px vs --hdk-space-sm, a ring on every
+ * mouse click vs on :focus-visible, a min-size on one only). `.theme-toggle-btn`
+ * and `.settings-toggle-btn` survive as hooks with no values of their own.
+ *
+ * Lives in its own file because ThemePicker renders outside the header too
+ * (HadokuThemePicker on a video overlay), so its trigger cannot depend on
+ * app-header.css. The chain is app-header.css -> theme-picker.css -> this.
+ *
+ * Works on an <a>: child apps ship without a preflight, so a bare anchor would
+ * render UA blue, visited purple and underlined. */
+
+.app-header__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--hdk-text-lg);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background-color var(--transition-fast),
+    opacity var(--transition-fast);
+}
+
+/* Same colour visited or not, and no hover recolour from a host stylesheet's
+ * `a:hover` — the hover signal is the background below. */
+
+.app-header__icon-btn:link,
+.app-header__icon-btn:visited,
+.app-header__icon-btn:hover,
+.app-header__icon-btn:active {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.app-header__icon-btn:hover {
+  background-color: var(--color-primary-hover);
+  opacity: 1;
+}
+
+/* :focus-visible, not :focus — :focus rings on every mouse click. Full
+ * opacity too, so a keyboard user never lands on the dimmed resting state. */
+
+.app-header__icon-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.theme-picker {
+  position: relative;
+}
+
+/* Theme toggle button: styled by the shared .app-header__icon-btn
+ * (icon-btn.css). `.theme-toggle-btn` stays on the element as a hook only —
+ * giving it values again would be the second copy that drifts. */
+
+/* Theme picker overlay - covers entire viewport for click-outside detection */
+
+.theme-picker__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background: transparent;
+}
+
+/* Theme picker dropdown - positioned relative to picker button */
+
+.theme-picker__dropdown {
+  position: absolute;
+  top: 0;
+  left: calc(100% + var(--hdk-space-md));
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--hdk-space-sm);
+}
+
+/* Inner row: pill tower + settings icon side-by-side */
+
+.theme-picker__main {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hdk-space-md);
+}
+
+/* Open-left modifier: dropdown opens to the left of the toggle */
+
+.theme-picker--open-left .theme-picker__dropdown {
+  left: auto;
+  right: calc(100% + var(--hdk-space-md));
+}
+
+.theme-picker--open-left .theme-picker__main {
+  flex-direction: row-reverse;
+}
+
+/* Theme pill tower - has the shadow */
+
+.theme-picker__pills {
+  display: flex;
+  flex-direction: column;
+  gap: 0; /* No gap - pancake stack */
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--hdk-shadow-lg); /* Shadow on pill tower only */
+}
+
+/* Theme pill - contains light and dark buttons */
+
+.theme-pill {
+  display: flex;
+  gap: 0;
+  background: transparent;
+  border: none;
+  transition: all var(--transition-fast, 0.15s ease);
+}
+
+/* Separator line between pills */
+
+.theme-pill:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Theme pill buttons */
+
+.theme-pill__btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--hdk-space-lg) * 1.2); /* 20% bigger total (10% + 10%) */
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--transition-fast, 0.15s ease);
+  position: relative;
+  overflow: visible; /* Allow border to show */
+}
+
+/* The light/dark pills are the mode toggle itself: they must always LOOK light
+   and dark so the control reads correctly whichever theme is active. These
+   literals are deliberate and are the one place theme tokens must not be used. */
+
+/* Light button default style */
+
+.theme-pill__btn--light {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  color: #1e293b;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Dark button default style - more cyber with darker background and blue tint */
+
+.theme-pill__btn--dark {
+  background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+  color: #64748b;
+  border-left: 1px solid rgba(100, 116, 139, 0.1);
+}
+
+/* First pill top-left corner rounding - rounded corner instead of full circle */
+
+.theme-pill:first-child .theme-pill__btn--light {
+  border-top-left-radius: 12px;
+}
+
+/* First pill top-right corner rounding */
+
+.theme-pill:first-child .theme-pill__btn--dark {
+  border-top-right-radius: 12px;
+}
+
+/* Last pill bottom-left corner rounding */
+
+.theme-pill:last-child .theme-pill__btn--light {
+  border-bottom-left-radius: 12px;
+}
+
+/* Last pill bottom-right corner rounding */
+
+.theme-pill:last-child .theme-pill__btn--dark {
+  border-bottom-right-radius: 12px;
+}
+
+.theme-pill__btn--light:hover {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  color: var(--color-primary);
+}
+
+.theme-pill__btn--dark:hover {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  color: #cbd5e1;
+}
+
+/* Active states - with proper border radius that doesn't clip, 10% bigger border */
+
+.theme-pill__btn--light.active {
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+  color: var(--color-primary);
+  box-shadow: inset 0 0 0 2.2px var(--color-primary); /* Uses theme primary color */
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+.theme-pill__btn--dark.active {
+  background: linear-gradient(135deg, #020617 0%, #000000 100%);
+  color: var(--color-primary); /* Use theme primary color */
+  box-shadow: inset 0 0 0 2.2px var(--color-primary); /* Use theme primary color */
+  font-weight: var(--font-weight-semibold, 600);
+  /* Add glow effect for cyber look */
+  filter: brightness(1.1);
+}
+
+/* Icon container - reduced by ~15% (24px -> 20px) */
+
+.theme-pill__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.theme-pill__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Settings icon button - circular, separate from pill tower */
+
+.theme-picker__settings-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  background: var(--color-bg-card);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast, 0.15s ease);
+  border-radius: 50%; /* Circular */
+  box-shadow: var(--hdk-shadow-md);
+  flex-shrink: 0;
+}
+
+.theme-picker__settings-icon:hover {
+  background: var(--color-primary-bg);
+  color: var(--color-on-primary-bg);
+  transform: rotate(45deg);
+  box-shadow: var(--hdk-shadow-lg);
+}
+
+.theme-picker__settings-icon svg {
+  width: 20px;
+  height: 20px;
+}
+/* AppHeader + ConnectedSettings styles for @wolffm/task-ui-components.
+ *
+ * All colors come from @wolffm/themes semantic tokens so the header themes with
+ * everything else. One import is all an app needs:
+ *   import '@wolffm/task-ui-components/app-header.css'
+ *
+ * This used to say "import alongside theme-picker.css", and that convention
+ * failed exactly the way conventions do. AppHeader renders the theme picker
+ * unconditionally now — it is not a prop — so an app that loads this file
+ * without the picker's gets the right component with none of its styling. The
+ * command station shipped like that after its old wrapper (the only importer of
+ * theme-picker.css on that site) was deleted: correct markup, no CSS.
+ *
+ * Pulling it in here makes the pair inseparable, which is the same reason the
+ * component itself stopped being a prop. */
+/**
+ * ThemePicker Component Styles
+ * Beautiful theme picker with light/dark pill design
+ *
+ * Required CSS Variables (should be defined by @wolffm/themes):
+ * --color-text
+ * --color-primary
+ * --color-primary-hover
+ * --color-primary-bg
+ * --color-bg-card
+ * --color-text-secondary
+ * --hdk-shadow-focus-sm
+ * --hdk-shadow-md
+ * --hdk-shadow-lg
+ * --transition-fast (e.g., 0.15s ease)
+ * --hdk-space-sm (e.g., 8px)
+ * --hdk-space-md (e.g., 12px)
+ * --hdk-space-lg (e.g., 16px)
+ * --hdk-text-lg (e.g., 18px)
+ * --font-weight-semibold (e.g., 600)
+ */
+/* The round 32px icon button on the AppHeader bar — the theme picker trigger,
+ * the settings gear, and any link an app puts in the actions row.
+ *
+ * Defined ONCE. The picker and the gear each used to carry their own copy and
+ * the two had already drifted (padding 8px vs --hdk-space-sm, a ring on every
+ * mouse click vs on :focus-visible, a min-size on one only). `.theme-toggle-btn`
+ * and `.settings-toggle-btn` survive as hooks with no values of their own.
+ *
+ * Lives in its own file because ThemePicker renders outside the header too
+ * (HadokuThemePicker on a video overlay), so its trigger cannot depend on
+ * app-header.css. The chain is app-header.css -> theme-picker.css -> this.
+ *
+ * Works on an <a>: child apps ship without a preflight, so a bare anchor would
+ * render UA blue, visited purple and underlined. */
+.app-header__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--hdk-text-lg);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background-color var(--transition-fast),
+    opacity var(--transition-fast);
+}
+/* Same colour visited or not, and no hover recolour from a host stylesheet's
+ * `a:hover` — the hover signal is the background below. */
+.app-header__icon-btn:link,
+.app-header__icon-btn:visited,
+.app-header__icon-btn:hover,
+.app-header__icon-btn:active {
+  color: var(--color-text);
+  text-decoration: none;
+}
+.app-header__icon-btn:hover {
+  background-color: var(--color-primary-hover);
+  opacity: 1;
+}
+/* :focus-visible, not :focus — :focus rings on every mouse click. Full
+ * opacity too, so a keyboard user never lands on the dimmed resting state. */
+.app-header__icon-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+.theme-picker {
+  position: relative;
+}
+/* Theme toggle button: styled by the shared .app-header__icon-btn
+ * (icon-btn.css). `.theme-toggle-btn` stays on the element as a hook only —
+ * giving it values again would be the second copy that drifts. */
+/* Theme picker overlay - covers entire viewport for click-outside detection */
+.theme-picker__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background: transparent;
+}
+/* Theme picker dropdown - positioned relative to picker button */
+.theme-picker__dropdown {
+  position: absolute;
+  top: 0;
+  left: calc(100% + var(--hdk-space-md));
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--hdk-space-sm);
+}
+/* Inner row: pill tower + settings icon side-by-side */
+.theme-picker__main {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hdk-space-md);
+}
+/* Open-left modifier: dropdown opens to the left of the toggle */
+.theme-picker--open-left .theme-picker__dropdown {
+  left: auto;
+  right: calc(100% + var(--hdk-space-md));
+}
+.theme-picker--open-left .theme-picker__main {
+  flex-direction: row-reverse;
+}
+/* Theme pill tower - has the shadow */
+.theme-picker__pills {
+  display: flex;
+  flex-direction: column;
+  gap: 0; /* No gap - pancake stack */
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--hdk-shadow-lg); /* Shadow on pill tower only */
+}
+/* Theme pill - contains light and dark buttons */
+.theme-pill {
+  display: flex;
+  gap: 0;
+  background: transparent;
+  border: none;
+  transition: all var(--transition-fast, 0.15s ease);
+}
+/* Separator line between pills */
+.theme-pill:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+/* Theme pill buttons */
+.theme-pill__btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--hdk-space-lg) * 1.2); /* 20% bigger total (10% + 10%) */
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--transition-fast, 0.15s ease);
+  position: relative;
+  overflow: visible; /* Allow border to show */
+}
+/* The light/dark pills are the mode toggle itself: they must always LOOK light
+   and dark so the control reads correctly whichever theme is active. These
+   literals are deliberate and are the one place theme tokens must not be used. */
+/* Light button default style */
+.theme-pill__btn--light {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  color: #1e293b;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+/* Dark button default style - more cyber with darker background and blue tint */
+.theme-pill__btn--dark {
+  background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+  color: #64748b;
+  border-left: 1px solid rgba(100, 116, 139, 0.1);
+}
+/* First pill top-left corner rounding - rounded corner instead of full circle */
+.theme-pill:first-child .theme-pill__btn--light {
+  border-top-left-radius: 12px;
+}
+/* First pill top-right corner rounding */
+.theme-pill:first-child .theme-pill__btn--dark {
+  border-top-right-radius: 12px;
+}
+/* Last pill bottom-left corner rounding */
+.theme-pill:last-child .theme-pill__btn--light {
+  border-bottom-left-radius: 12px;
+}
+/* Last pill bottom-right corner rounding */
+.theme-pill:last-child .theme-pill__btn--dark {
+  border-bottom-right-radius: 12px;
+}
+.theme-pill__btn--light:hover {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  color: var(--color-primary);
+}
+.theme-pill__btn--dark:hover {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  color: #cbd5e1;
+}
+/* Active states - with proper border radius that doesn't clip, 10% bigger border */
+.theme-pill__btn--light.active {
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+  color: var(--color-primary);
+  box-shadow: inset 0 0 0 2.2px var(--color-primary); /* Uses theme primary color */
+  font-weight: var(--font-weight-semibold, 600);
+}
+.theme-pill__btn--dark.active {
+  background: linear-gradient(135deg, #020617 0%, #000000 100%);
+  color: var(--color-primary); /* Use theme primary color */
+  box-shadow: inset 0 0 0 2.2px var(--color-primary); /* Use theme primary color */
+  font-weight: var(--font-weight-semibold, 600);
+  /* Add glow effect for cyber look */
+  filter: brightness(1.1);
+}
+/* Icon container - reduced by ~15% (24px -> 20px) */
+.theme-pill__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+.theme-pill__icon svg {
+  width: 100%;
+  height: 100%;
+}
+/* Settings icon button - circular, separate from pill tower */
+.theme-picker__settings-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  background: var(--color-bg-card);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast, 0.15s ease);
+  border-radius: 50%; /* Circular */
+  box-shadow: var(--hdk-shadow-md);
+  flex-shrink: 0;
+}
+.theme-picker__settings-icon:hover {
+  background: var(--color-primary-bg);
+  color: var(--color-on-primary-bg);
+  transform: rotate(45deg);
+  box-shadow: var(--hdk-shadow-lg);
+}
+.theme-picker__settings-icon svg {
+  width: 20px;
+  height: 20px;
+}
+/* ── Header layout ─────────────────────────────────────────────────────────
+ * Title left, action bar right, vertically centered. Full width of whatever
+ * column the app places it in. */
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+/* Body text, NOT --color-primary. `primary` is a fill colour: sanctioned only
+ * under --color-on-primary. As bare text on --color-bg it clears the 3:1
+ * large-text floor in just 12 of 18 themes (izakaya-light 1.92, nature-light
+ * 2.15, ocean-light 2.28, lavender-light 2.53, pink-light 2.56,
+ * strawberry-light 2.61). --color-text clears it everywhere at 8.87–17.58.
+ * The brand accent lives in the border-bottom instead. */
+.app-header__title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--hdk-text-lg);
+  font-weight: 700;
+  line-height: 1.2;
+  /* A flex item floors at its min-content width, so without `min-width: 0` a
+   * long title pushed the actions off a 320px screen instead of giving way. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Never shrinks: the controls keep their 32px hit areas and the title is what
+ * gives way. 0.5rem is enough between icons — the round hit areas already
+ * space them visually. */
+.app-header__actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.5rem;
+}
+/* In the header the theme picker sits directly left of the settings gear, and
+ * the base ThemePicker opens its dropdown SIDEWAYS (which suits a vertical /
+ * sidebar placement). Here that would cover the gear — so scope it to drop
+ * straight DOWN, right-aligned, opening into the header away from the gear. */
+.app-header .theme-picker__dropdown,
+.app-header .theme-picker--open-left .theme-picker__dropdown {
+  top: calc(100% + 8px);
+  left: auto;
+  right: 0;
+}
+/* ── ConnectedSettings: gear toggle ────────────────────────────────────────
+ * The gear itself is a .app-header__icon-btn (icon-btn.css, via
+ * theme-picker.css), the same rules as the picker trigger beside it. */
+.settings-popout {
+  position: relative;
+  display: inline-flex;
+}
+/* Full-viewport click-catcher, same trick ThemePicker uses. */
+.settings-popout__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+  background: transparent;
+}
+.settings-popout__panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 100;
+  /* These apps ship without a Tailwind preflight, so box-sizing is content-box
+   * unless a rule says otherwise: without this, `width: 300px` renders 334px
+   * (+32 padding +2 border) and `max-width` clamps the CONTENT box, leaving the
+   * popout 2px wider than a 320px viewport. */
+  box-sizing: border-box;
+  width: 300px;
+  max-width: calc(100vw - 32px);
+  /* Cap height so an app that adds its own preferences section stays on screen;
+   * the popout scrolls rather than overflowing the viewport. */
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+  color: var(--color-text);
+}
+/* Divider above the optional app-specific settings section. */
+.settings-popout__app {
+  border-top: 1px solid var(--color-border);
+  padding-top: 12px;
+}
+.settings-popout__header {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--color-text);
+}
+.settings-popout__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.settings-popout__row--stack {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+.settings-popout__label {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+.settings-popout__value {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text);
+}
+/* Label + control pair on the right of a row. `min-width: 0` is load-bearing:
+ * as a flex item of __row it otherwise floors at its own min-content width, and
+ * that includes the input's default `size=20` intrinsic width (195px in Chrome).
+ * Pair + gap + Save came to 251.4px against a 300px row that also has to hold
+ * the label — so the name row overflowed the panel the moment Edit was clicked,
+ * and __panel's `overflow-y: auto` computes overflow-x to `auto`, turning that
+ * into a horizontal scrollbar rather than a clip. */
+.settings-popout__inline {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  /* Claim the row's free space rather than shrink-wrapping, so the input below
+   * has something to grow into now that its basis is 0. */
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.settings-popout__tier {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--color-bg-alt);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.settings-popout__tier--admin {
+  background: var(--color-primary-bg);
+  color: var(--color-on-primary-bg);
+  border-color: var(--color-primary);
+}
+.settings-popout__input {
+  /* `1 1 0` + `width: 0`, not `1 1 auto`: the basis must not come from the
+   * input's `size`-derived intrinsic width, or the row cannot shrink below it. */
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+  box-sizing: border-box;
+  font-size: 0.85rem;
+  padding: 5px 8px;
+  border-radius: 7px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+.settings-popout__input:focus-visible {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-bg);
+}
+.settings-popout__btn {
+  font-size: 0.78rem;
+  padding: 4px 10px;
+  border-radius: 7px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+.settings-popout__btn:hover:not(:disabled) {
+  background: var(--color-bg-alt);
+}
+.settings-popout__btn--primary {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.settings-popout__btn--primary:hover:not(:disabled) {
+  background: var(--color-primary-dark);
+}
+.settings-popout__btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+/* Content pill — a chunked "volume slider": segments 1..maxLevel, everything
+ * up to and including the selected level reads as filled. */
+.settings-popout__pill {
+  display: flex;
+  gap: 3px;
+  width: 100%;
+}
+.settings-popout__seg {
+  flex: 1 1 0;
+  padding: 7px 0;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-alt);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
+.settings-popout__seg:first-child {
+  border-radius: 8px 0 0 8px;
+}
+.settings-popout__seg:last-child {
+  border-radius: 0 8px 8px 0;
+}
+.settings-popout__seg--filled {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-on-primary);
+}
+.settings-popout__seg:disabled {
+  cursor: default;
+}
+/* Inline sign-in: label above, input + submit on one line, error below. */
+.settings-popout__key-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+.settings-popout__error {
+  font-size: 0.75rem;
+  line-height: 1.35;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--color-danger-bg);
+  color: var(--color-on-danger-bg);
+}
+.settings-popout__hint {
+  font-size: 0.72rem;
+  line-height: 1.35;
+  color: var(--color-text-tertiary);
+}
+/**
+ * Toast Notification Styles
+ */
+
+.toast-container {
+  position: fixed;
+  z-index: 10000;
+  display: flex;
+  gap: 12px;
+  pointer-events: none;
+  max-width: 500px;
+}
+
+/* Position variants */
+.toast-container--top-left {
+  top: 20px;
+  left: 20px;
+  flex-direction: column;
+}
+
+.toast-container--top-center {
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column;
+  width: calc(100% - 40px);
+}
+
+.toast-container--top-right {
+  top: 20px;
+  right: 20px;
+  flex-direction: column;
+}
+
+.toast-container--bottom-left {
+  bottom: 20px;
+  left: 20px;
+  flex-direction: column-reverse;
+}
+
+.toast-container--bottom-center {
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+  width: calc(100% - 40px);
+}
+
+.toast-container--bottom-right {
+  bottom: 20px;
+  right: 20px;
+  flex-direction: column-reverse;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--hdk-radius-lg);
+  box-shadow: var(--hdk-shadow-md);
+  min-width: 280px;
+  max-width: 100%;
+  opacity: 0;
+  transform: translateY(30px) scale(0.9);
+  transition:
+    opacity 0.5s ease-out,
+    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 0.3s ease;
+  pointer-events: auto;
+}
+
+.toast--visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.toast__icon {
+  flex-shrink: 0;
+}
+
+.toast__message {
+  flex: 1;
+  font-size: 14px;
+  color: var(--color-text);
+  line-height: 1.4;
+}
+
+/* Toast type variants - using colored shadows for subtle emphasis */
+.toast--success {
+  box-shadow:
+    0 0 0 1px var(--success-color, #10b981),
+    0 4px 12px rgba(16, 185, 129, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--success .toast__icon {
+  color: var(--success-color, #10b981);
+}
+
+.toast--error {
+  box-shadow:
+    0 0 0 1px var(--error-color, #ef4444),
+    0 4px 12px rgba(239, 68, 68, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--error .toast__icon {
+  color: var(--error-color, #ef4444);
+}
+
+.toast--warning {
+  box-shadow:
+    0 0 0 1px var(--warning-color, #f59e0b),
+    0 4px 12px rgba(245, 158, 11, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--warning .toast__icon {
+  color: var(--warning-color, #f59e0b);
+}
+
+.toast--info {
+  box-shadow:
+    0 0 0 1px var(--info-color, var(--accent-color, #3b82f6)),
+    0 4px 12px rgba(59, 130, 246, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--info .toast__icon {
+  color: var(--info-color, var(--accent-color, #3b82f6));
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .toast-container {
+    max-width: none;
+  }
+
+  .toast-container--top-left,
+  .toast-container--top-right,
+  .toast-container--bottom-left,
+  .toast-container--bottom-right {
+    left: 10px;
+    right: 10px;
+  }
+
+  .toast-container--top-center,
+  .toast-container--bottom-center {
+    width: calc(100% - 20px);
+  }
+
+  .toast {
+    min-width: unset;
+    padding: 12px 16px;
+  }
+}
+/**
+ * ContextMenu Component Styles
+ * Generic context menu with dynamic positioning
+ */
+
+.context-menu {
+  position: fixed;
+  left: var(--context-menu-x, 0);
+  top: var(--context-menu-y, 0);
+  z-index: var(--context-menu-z-index, 1000);
+}
+/* Select / dropdown styles for @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/select.css'
+ *   import '@wolffm/task-ui-components/scrollbar.css'   (the open list uses it)
+ *
+ * The trigger variants differ only in their resting surface; the open list
+ * is one look everywhere, so a page mixing variants still has one menu.
+ */
+
+.hdk-select {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  vertical-align: middle;
+}
+
+.hdk-select__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  font: inherit;
+  color: var(--color-text);
+  text-align: left;
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--hdk-radius);
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.hdk-select__trigger:hover:not(:disabled) {
+  border-color: var(--color-text-muted);
+}
+
+.hdk-select__trigger:focus-visible,
+.hdk-select--open .hdk-select__trigger {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: var(--hdk-shadow-focus-sm);
+}
+
+.hdk-select__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.hdk-select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hdk-select__value--placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.hdk-select__chevron {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  transition: transform var(--transition-fast);
+}
+
+.hdk-select--open .hdk-select__chevron {
+  transform: rotate(180deg);
+}
+
+/* ── trigger variants ─────────────────────────────────────────────────── */
+
+.hdk-select--filled .hdk-select__trigger {
+  background-color: var(--color-bg-hover);
+  border-color: transparent;
+}
+
+.hdk-select--filled .hdk-select__trigger:hover:not(:disabled) {
+  border-color: var(--color-border);
+}
+
+.hdk-select--ghost .hdk-select__trigger {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.hdk-select--ghost .hdk-select__trigger:hover:not(:disabled) {
+  background-color: var(--color-bg-hover);
+  border-color: transparent;
+}
+
+.hdk-select--underline .hdk-select__trigger {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: var(--color-border);
+  border-radius: 0;
+}
+
+.hdk-select--underline .hdk-select__trigger:focus-visible,
+.hdk-select--underline.hdk-select--open .hdk-select__trigger {
+  border-color: transparent;
+  border-bottom-color: var(--color-primary);
+  box-shadow: 0 1px 0 0 var(--color-primary);
+}
+
+/* ── sizes ────────────────────────────────────────────────────────────── */
+
+.hdk-select--sm .hdk-select__trigger {
+  font-size: var(--hdk-text-xs);
+  padding: 4px 8px;
+  min-height: 28px;
+}
+
+.hdk-select--md .hdk-select__trigger {
+  font-size: var(--hdk-text-sm);
+  padding: 7px 10px;
+  min-height: 34px;
+}
+
+.hdk-select--lg .hdk-select__trigger {
+  font-size: var(--hdk-text-base);
+  padding: 10px 12px;
+  min-height: 42px;
+}
+
+/* ── open list ────────────────────────────────────────────────────────── */
+
+.hdk-select__menu {
+  position: fixed;
+  z-index: 1000;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  overflow-y: auto;
+  max-width: min(420px, calc(100vw - 16px));
+  background-color: var(--color-bg-card);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: var(--hdk-radius-lg);
+  box-shadow: var(--hdk-shadow-lg);
+}
+
+.hdk-select__menu:focus {
+  outline: none;
+}
+
+.hdk-select--sm .hdk-select__menu {
+  font-size: var(--hdk-text-xs);
+}
+
+.hdk-select--md .hdk-select__menu {
+  font-size: var(--hdk-text-sm);
+}
+
+.hdk-select--lg .hdk-select__menu {
+  font-size: var(--hdk-text-base);
+}
+
+.hdk-select__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: var(--hdk-radius);
+  cursor: pointer;
+}
+
+.hdk-select__option--active {
+  background-color: var(--color-bg-hover);
+}
+
+.hdk-select__option--selected {
+  background-color: var(--color-primary-bg);
+  color: var(--color-on-primary-bg);
+}
+
+.hdk-select__option--selected.hdk-select__option--active {
+  box-shadow: inset 0 0 0 1px var(--color-primary);
+}
+
+/* An <optgroup> label in a list installSelectMenus builds from a native select. */
+.hdk-select__group {
+  padding: 8px 10px 2px;
+  font-size: 0.85em;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  cursor: default;
+}
+
+.hdk-select__option[aria-disabled='true'] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.hdk-select__option-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.hdk-select__option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hdk-select__option-desc {
+  font-size: 0.85em;
+  color: var(--color-text-tertiary);
+}
+
+.hdk-select__option--selected .hdk-select__option-desc {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.hdk-select__check {
+  flex-shrink: 0;
+}
+
+/* ── native ───────────────────────────────────────────────────────────── */
+
+/* Doubled class so the room for the chevron beats each size's `padding`
+ * shorthand above, which would otherwise draw the chevron over the text. */
+.hdk-select__trigger.hdk-select__native {
+  appearance: none;
+  padding-right: 32px;
+}
+
+.hdk-select--sm .hdk-select__trigger.hdk-select__native {
+  padding-right: 26px;
+}
+
+.hdk-select__chevron--native {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  translate: 0 -50%;
+  pointer-events: none;
+}
+
+/* The OS popup takes option colours from the <select>; without these, a dark
+ * theme can render dark-on-dark options in Chromium on Windows. */
+.hdk-select__native option {
+  background-color: var(--color-bg-card);
+  color: var(--color-text);
+}
+/* Themed scrollbars for @wolffm/task-ui-components.
+ *
+ * Without this, every scroller renders the platform's bar: a grey Windows
+ * gutter on a coffee or cyberpunk surface. `color-scheme` (set per theme in
+ * @wolffm/themes) only gets the bar to the right light/dark mode, not the
+ * theme's colours.
+ *
+ *   import '@wolffm/task-ui-components/scrollbar.css'
+ *   <div className="task-app-container hdk-scroll">…</div>
+ *
+ * `.hdk-scroll` styles the element it is on AND every scroller inside it, so
+ * one class on an app's root covers the whole app — hadoku_site puts it on
+ * <html>, which covers every micro-frontend at once. The thumb is the theme's
+ * primary colour.
+ *
+ * Every selector is wrapped in `:where()`, so all of this has ZERO
+ * specificity: it is a fallback for scrollers nobody styled. Any rule an app
+ * writes for a scroller — `scrollbar-width: none` on a carousel, its own
+ * `::-webkit-scrollbar` thumb — wins, whatever order the sheets load in.
+ * Modifiers sit on the same element:
+ *
+ *   --subtle    neutral thumb instead of the accent
+ *   --thin      narrower bar (WebKit/Chromium only; see Firefox below)
+ *   --rail      visible track, so the scroll extent reads at a glance
+ *   --autohide  thumb appears only while that scroller is hovered or focused
+ *
+ * The colours are declared on EVERY element under the root (`.hdk-scroll *`),
+ * not once on it. A custom property inherits its RESOLVED value, so a thumb
+ * colour set only on the root would carry the root's theme down into a nested
+ * `[data-theme]` scope: a cyberpunk preview inside a coffee app would scroll
+ * with coffee's accent. Declared per element, each scroller resolves the
+ * tokens of the theme it actually sits in. Sizes are theme-independent and
+ * simply inherit.
+ *
+ * Two engines, two mechanisms. Firefox only knows the standard
+ * `scrollbar-color`/`scrollbar-width`, and only ever gets `auto` width —
+ * `--thin` included. Under overlay scrollbars (GTK's default on Linux)
+ * `thin` draws the idle thumb as a ~1px hairline that antialiases
+ * unevenly along its length and only widens on hover; `auto` idles at a solid
+ * 2px and hovers at 6px, and with classic scrollbars it is a 6px thumb, the
+ * same as the WebKit default below. Chromium and Safari support the
+ * `::-webkit-scrollbar` pseudo-elements, which are the only way to get a
+ * rounded, inset thumb — but Chromium 121+ IGNORES them whenever
+ * `scrollbar-color` or `scrollbar-width` is non-auto, and `scrollbar-color`
+ * inherits. So the WebKit branch resets both to `auto`, or a host page that
+ * sets `scrollbar-color` on <html> would silently switch all of this off.
+ *
+ * Everything sits in `@layer hdk-fallbacks`. A rule in a cascade layer loses
+ * to every unlayered rule and to every layer declared after it — whatever
+ * either's specificity — and Tailwind ships its utilities in layers. Unlayered,
+ * even a zero-specificity rule here would beat `bg-primary`. The page must
+ * declare the layer FIRST, before any other, so it ranks lowest:
+ *
+ *   @layer hdk-fallbacks, base, theme, utilities;
+ *
+ * hadoku_site's global.css does that. A sheet that never names it just gets
+ * these rules below its own unlayered ones, which is also correct.
+ */
+
+@layer hdk-fallbacks {
+  :where(.hdk-scroll) {
+    --hdk-scrollbar-size: 10px;
+    --hdk-scrollbar-pad: 2px;
+  }
+
+  :where(.hdk-scroll),
+  :where(.hdk-scroll *) {
+    --hdk-scrollbar-thumb: var(--color-primary);
+    --hdk-scrollbar-thumb-hover: var(--color-primary-dark);
+    --hdk-scrollbar-track: transparent;
+  }
+
+  :where(.hdk-scroll--thin) {
+    --hdk-scrollbar-size: 6px;
+    --hdk-scrollbar-pad: 1px;
+  }
+
+  :where(.hdk-scroll--subtle),
+  :where(.hdk-scroll--subtle *) {
+    --hdk-scrollbar-thumb: var(--color-border);
+    --hdk-scrollbar-thumb-hover: var(--color-text-muted);
+  }
+
+  :where(.hdk-scroll--rail) {
+    --hdk-scrollbar-size: 12px;
+    --hdk-scrollbar-pad: 3px;
+  }
+
+  :where(.hdk-scroll--rail),
+  :where(.hdk-scroll--rail *) {
+    --hdk-scrollbar-track: var(--color-bg-hover);
+  }
+
+  :where(.hdk-scroll--autohide),
+  :where(.hdk-scroll--autohide *) {
+    --hdk-scrollbar-thumb: transparent;
+  }
+
+  /* On the hovered/focused element itself, so only that scroller's thumb shows —
+   * not every scroller inside an autohide root at once. */
+  :where(.hdk-scroll--autohide:hover),
+  :where(.hdk-scroll--autohide:focus-within),
+  :where(.hdk-scroll--autohide :hover),
+  :where(.hdk-scroll--autohide :focus-within) {
+    --hdk-scrollbar-thumb: var(--color-primary);
+  }
+
+  @supports not selector(::-webkit-scrollbar) {
+    :where(.hdk-scroll),
+    :where(.hdk-scroll *) {
+      scrollbar-width: auto;
+      scrollbar-color: var(--hdk-scrollbar-thumb) var(--hdk-scrollbar-track);
+    }
+  }
+
+  @supports selector(::-webkit-scrollbar) {
+    :where(.hdk-scroll),
+    :where(.hdk-scroll *) {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar,
+    :where(.hdk-scroll *)::-webkit-scrollbar {
+      width: var(--hdk-scrollbar-size);
+      height: var(--hdk-scrollbar-size);
+      background-color: var(--hdk-scrollbar-track);
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-track,
+    :where(.hdk-scroll *)::-webkit-scrollbar-track {
+      background-color: var(--hdk-scrollbar-track);
+      border-radius: 999px;
+    }
+
+    /* The transparent border plus padding-box clip is what insets the thumb
+     * from the track edge — a margin does nothing on a scrollbar part. */
+    :where(.hdk-scroll)::-webkit-scrollbar-thumb,
+    :where(.hdk-scroll *)::-webkit-scrollbar-thumb {
+      background-color: var(--hdk-scrollbar-thumb);
+      background-clip: padding-box;
+      border: var(--hdk-scrollbar-pad) solid transparent;
+      border-radius: 999px;
+      min-height: 32px;
+      min-width: 32px;
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-thumb:hover,
+    :where(.hdk-scroll *)::-webkit-scrollbar-thumb:hover,
+    :where(.hdk-scroll)::-webkit-scrollbar-thumb:active,
+    :where(.hdk-scroll *)::-webkit-scrollbar-thumb:active {
+      background-color: var(--hdk-scrollbar-thumb-hover);
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-corner,
+    :where(.hdk-scroll *)::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
+    :where(.hdk-scroll)::-webkit-scrollbar-button,
+    :where(.hdk-scroll *)::-webkit-scrollbar-button {
+      display: none;
+    }
+  }
+}
+/* Button styles for @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/button.css'
+ *
+ * Each family modifier maps its six theme tokens onto private `--_btn-*`
+ * properties, and each variant paints from those. That keeps the matrix at
+ * 5 + 5 rules instead of 25, and every pairing below is a sanctioned one:
+ * `on-<f>` over `<f>`, `on-<f>-bg` over `<f>-bg` (THEME_USAGE_GUIDE.md).
+ */
+
+.hdk-btn {
+  --_btn-c: var(--color-primary);
+  --_btn-c-dark: var(--color-primary-dark);
+  --_btn-on: var(--color-on-primary);
+  --_btn-tint: var(--color-primary-bg);
+  --_btn-on-tint: var(--color-on-primary-bg);
+  --_btn-hover: var(--color-primary-hover);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.2;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: var(--hdk-radius);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.hdk-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--hdk-shadow-focus);
+}
+
+.hdk-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.hdk-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* A loading button is disabled for clicks but is not "unavailable", so it
+ * keeps full opacity — the spinner is the signal. */
+.hdk-btn--loading:disabled {
+  opacity: 1;
+  cursor: progress;
+}
+
+/* ── families ─────────────────────────────────────────────────────────── */
+
+.hdk-btn--success {
+  --_btn-c: var(--color-success);
+  --_btn-c-dark: var(--color-success-dark);
+  --_btn-on: var(--color-on-success);
+  --_btn-tint: var(--color-success-bg);
+  --_btn-on-tint: var(--color-on-success-bg);
+  --_btn-hover: var(--color-success-hover);
+}
+
+.hdk-btn--warning {
+  --_btn-c: var(--color-warning);
+  --_btn-c-dark: var(--color-warning-dark);
+  --_btn-on: var(--color-on-warning);
+  --_btn-tint: var(--color-warning-bg);
+  --_btn-on-tint: var(--color-on-warning-bg);
+  --_btn-hover: var(--color-warning-hover);
+}
+
+.hdk-btn--danger {
+  --_btn-c: var(--color-danger);
+  --_btn-c-dark: var(--color-danger-dark);
+  --_btn-on: var(--color-on-danger);
+  --_btn-tint: var(--color-danger-bg);
+  --_btn-on-tint: var(--color-on-danger-bg);
+  --_btn-hover: var(--color-danger-hover);
+}
+
+.hdk-btn--neutral {
+  --_btn-c: var(--color-neutral);
+  --_btn-c-dark: var(--color-neutral-dark);
+  --_btn-on: var(--color-on-neutral);
+  --_btn-tint: var(--color-neutral-bg);
+  --_btn-on-tint: var(--color-on-neutral-bg);
+  --_btn-hover: var(--color-neutral-hover);
+}
+
+/* ── variants ─────────────────────────────────────────────────────────── */
+
+.hdk-btn--solid {
+  background-color: var(--_btn-c);
+  color: var(--_btn-on);
+}
+
+.hdk-btn--solid:hover:not(:disabled) {
+  background-color: var(--_btn-c-dark);
+}
+
+/* The task app's own `.pill-btn--active` look, as a reusable treatment. */
+.hdk-btn--gradient {
+  background: linear-gradient(180deg, var(--_btn-c) 0%, var(--_btn-c-dark) 100%);
+  color: var(--_btn-on);
+  box-shadow: var(--hdk-shadow-sm);
+}
+
+.hdk-btn--gradient:hover:not(:disabled) {
+  box-shadow: var(--hdk-shadow-md);
+}
+
+.hdk-btn--soft {
+  background-color: var(--_btn-tint);
+  color: var(--_btn-on-tint);
+}
+
+.hdk-btn--soft:hover:not(:disabled) {
+  border-color: var(--_btn-c);
+}
+
+.hdk-btn--outline {
+  background-color: transparent;
+  border-color: var(--_btn-c);
+  color: var(--color-text);
+}
+
+.hdk-btn--outline:hover:not(:disabled) {
+  background-color: var(--_btn-tint);
+  color: var(--_btn-on-tint);
+}
+
+.hdk-btn--ghost {
+  background-color: transparent;
+  color: var(--color-text-secondary);
+}
+
+.hdk-btn--ghost:hover:not(:disabled) {
+  background-color: var(--_btn-tint);
+  color: var(--_btn-on-tint);
+}
+
+/* ── sizes ────────────────────────────────────────────────────────────── */
+
+.hdk-btn--sm {
+  font-size: var(--hdk-text-xs);
+  padding: 4px 10px;
+  min-height: 28px;
+}
+
+.hdk-btn--md {
+  font-size: var(--hdk-text-sm);
+  padding: 7px 14px;
+  min-height: 34px;
+}
+
+.hdk-btn--lg {
+  font-size: var(--hdk-text-base);
+  padding: 10px 18px;
+  min-height: 42px;
+}
+
+.hdk-btn--icon-only {
+  padding: 0;
+  aspect-ratio: 1;
+}
+
+.hdk-btn--icon-only.hdk-btn--sm {
+  width: 28px;
+}
+
+.hdk-btn--icon-only.hdk-btn--md {
+  width: 34px;
+}
+
+.hdk-btn--icon-only.hdk-btn--lg {
+  width: 42px;
+}
+
+/* ── shapes ───────────────────────────────────────────────────────────── */
+
+.hdk-btn--pill {
+  border-radius: 999px;
+}
+
+.hdk-btn--square {
+  border-radius: var(--hdk-radius-sm);
+}
+
+.hdk-btn--block {
+  display: flex;
+  width: 100%;
+}
+
+/* ── loading ──────────────────────────────────────────────────────────── */
+
+.hdk-btn__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: hdk-btn-spin 0.7s linear infinite;
+}
+
+@keyframes hdk-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hdk-btn__spinner {
+    animation-duration: 2s;
+  }
+
+  .hdk-btn:active:not(:disabled) {
+    transform: none;
+  }
+}
+/* NumberInput styles for @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/number-input.css'
+ *
+ * One bordered box holding the field and a stacked up/down stepper, so the
+ * focus ring and the border belong to the whole control, as on <Select>.
+ */
+
+.hdk-number {
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+  vertical-align: middle;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--hdk-radius);
+  overflow: hidden;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.hdk-number:hover:not(.hdk-number--disabled) {
+  border-color: var(--color-text-muted);
+}
+
+.hdk-number:focus-within {
+  border-color: var(--color-primary);
+  box-shadow: var(--hdk-shadow-focus-sm);
+}
+
+.hdk-number--disabled {
+  opacity: 0.5;
+}
+
+.hdk-number__input {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  appearance: textfield;
+}
+
+.hdk-number__input:focus {
+  outline: none;
+}
+
+.hdk-number__input::-webkit-inner-spin-button,
+.hdk-number__input::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.hdk-number__steps {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+}
+
+.hdk-number__step {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.hdk-number__step + .hdk-number__step {
+  border-top: 1px solid var(--color-border);
+}
+
+.hdk-number__step:hover:not(:disabled) {
+  color: var(--color-on-primary-bg);
+  background-color: var(--color-primary-bg);
+}
+
+.hdk-number__step:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.hdk-number--sm {
+  font-size: var(--hdk-text-xs);
+  min-height: 28px;
+}
+
+.hdk-number--sm .hdk-number__input {
+  padding: 4px 8px;
+}
+
+.hdk-number--sm .hdk-number__step {
+  width: 18px;
+}
+
+.hdk-number--md {
+  font-size: var(--hdk-text-sm);
+  min-height: 34px;
+}
+
+.hdk-number--md .hdk-number__input {
+  padding: 7px 10px;
+}
+
+.hdk-number--md .hdk-number__step {
+  width: 22px;
+}
+
+.hdk-number--lg {
+  font-size: var(--hdk-text-base);
+  min-height: 42px;
+}
+
+.hdk-number--lg .hdk-number__input {
+  padding: 10px 12px;
+}
+
+.hdk-number--lg .hdk-number__step {
+  width: 26px;
+}