@sethmakes/css 0.0.0

package/index.css

@@ -0,0 +1,34 @@
+/*
+ * @sethmakes/css
+ *
+ * Class-based styles for native HTML. Zero JS. References semantic tokens
+ * only (see @sethmakes/tokens). All rules live in cascade layers so
+ * consumer styles win without specificity wars.
+ *
+ * One file per component under src/; this index is the public entry.
+ *
+ * CONSUMPTION CONTRACT: this package defines no tokens — import
+ * @sethmakes/tokens (and optionally its fonts.css) BEFORE this file, or
+ * every var(--mk-*) resolves to nothing. Kept separate on purpose so
+ * tokens-only consumption stays possible.
+ */
+
+/* mk.utilities is declared-but-empty: reserved so adding utilities later
+   can't reorder the cascade. */
+@layer mk.reset, mk.base, mk.components, mk.utilities;
+
+@import "./src/reset.css";
+@import "./src/base.css";
+@import "./src/prose.css";
+@import "./src/button.css";
+@import "./src/badge.css";
+@import "./src/forms.css";
+@import "./src/card.css";
+@import "./src/table.css";
+@import "./src/divider.css";
+@import "./src/disclosure.css";
+@import "./src/alert.css";
+@import "./src/spinner.css";
+@import "./src/progress.css";
+@import "./src/media.css";
+@import "./src/empty.css";

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@sethmakes/css",
+  "version": "0.0.0",
+  "description": "Class-based styles for native HTML in the sethmakes design language.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./index.css",
+    "./index.css": "./index.css"
+  },
+  "files": [
+    "index.css",
+    "src"
+  ],
+  "dependencies": {
+    "@sethmakes/tokens": "0.0.0"
+  },
+  "keywords": [
+    "css",
+    "design-system"
+  ]
+}

package/src/alert.css

@@ -0,0 +1,46 @@
+@layer mk.components {
+  /*
+   * Alert — a subtle filled status block. No border (none exist anywhere);
+   * the tinted background carries the meaning. Info uses the moss accent in
+   * its subtle role; success/warning/danger use the functional status hues.
+   * On-color text comes from the matching -subtle pairing.
+   */
+  .mk-alert {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mk-space-1);
+    border-radius: var(--mk-radius-surface);
+    padding: var(--mk-space-3) var(--mk-space-4);
+    background: var(--mk-color-accent-subtle);
+    color: var(--mk-color-on-accent-subtle);
+    font-size: var(--mk-text-sm);
+    line-height: var(--mk-leading-normal);
+  }
+
+  /* Bold lead line — terse, sits above the body copy */
+  .mk-alert__title {
+    font-weight: var(--mk-weight-bold);
+    line-height: var(--mk-leading-tight);
+  }
+
+  /* Info — the default; accent-subtle. Listed for explicit opt-in. */
+  .mk-alert--info {
+    background: var(--mk-color-accent-subtle);
+    color: var(--mk-color-on-accent-subtle);
+  }
+
+  .mk-alert--success {
+    background: var(--mk-color-success-subtle);
+    color: var(--mk-color-success);
+  }
+
+  .mk-alert--warning {
+    background: var(--mk-color-warning-subtle);
+    color: var(--mk-color-warning);
+  }
+
+  .mk-alert--danger {
+    background: var(--mk-color-danger-subtle);
+    color: var(--mk-color-danger);
+  }
+}

package/src/badge.css

@@ -0,0 +1,44 @@
+@layer mk.components {
+  /* Badge — tonal */
+  .mk-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mk-space-2);
+    border-radius: var(--mk-radius-pill);
+    background: var(--mk-color-surface-3);
+    color: var(--mk-color-text-muted);
+    font-size: var(--mk-text-xs);
+    font-weight: var(--mk-weight-medium);
+    padding: 0.25em 0.9em;
+  }
+
+  .mk-badge--accent {
+    background: var(--mk-color-accent-subtle);
+    color: var(--mk-color-on-accent-subtle);
+  }
+
+  .mk-badge--success {
+    background: var(--mk-color-success-subtle);
+    color: var(--mk-color-success);
+  }
+
+  .mk-badge--warning {
+    background: var(--mk-color-warning-subtle);
+    color: var(--mk-color-warning);
+  }
+
+  .mk-badge--danger {
+    background: var(--mk-color-danger-subtle);
+    color: var(--mk-color-danger);
+  }
+
+  /* Status dot — leading indicator in currentColor */
+  .mk-badge--dot::before {
+    content: "";
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: var(--mk-radius-pill);
+    background: currentColor;
+    flex: none;
+  }
+}

package/src/base.css

@@ -0,0 +1,68 @@
+@layer mk.base {
+  body {
+    background: var(--mk-color-bg);
+    color: var(--mk-color-text);
+    font-family: var(--mk-font-body);
+    font-size: var(--mk-text-md);
+    font-weight: var(--mk-weight-regular);
+    line-height: var(--mk-leading-normal);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-weight: var(--mk-weight-bold);
+    line-height: var(--mk-leading-tight);
+    margin-block: 0 var(--mk-space-3);
+  }
+
+  h1 {
+    font-size: var(--mk-text-3xl);
+  }
+
+  h2 {
+    font-size: var(--mk-text-2xl);
+  }
+
+  h3 {
+    font-size: var(--mk-text-xl);
+  }
+
+  h4 {
+    font-size: var(--mk-text-lg);
+  }
+
+  a {
+    color: var(--mk-color-accent);
+    text-decoration: none;
+    transition: color var(--mk-motion-quick) var(--mk-ease-out);
+  }
+
+  a:hover {
+    color: var(--mk-color-accent-hover);
+    text-decoration: underline;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--mk-color-focus);
+    outline-offset: 2px;
+  }
+
+  /*
+   * Global reduced-motion guard. Motion is "quietly alive" by default, but
+   * honor the user's OS-level request to cut it: collapse every transition
+   * and animation site-wide rather than relying on each component to remember.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/src/button.css

@@ -0,0 +1,122 @@
+@layer mk.components {
+  /* Button — tonal by default, accent-filled for primary */
+  .mk-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mk-space-2);
+    border: 0;
+    border-radius: var(--mk-radius-pill);
+    background: var(--mk-color-surface-3);
+    color: var(--mk-color-text);
+    font: inherit;
+    font-size: var(--mk-text-sm);
+    font-weight: var(--mk-weight-medium);
+    padding: 0.6em 1.3em;
+    min-height: 44px;
+    cursor: pointer;
+    transition:
+      background var(--mk-motion-quick) var(--mk-ease-out),
+      transform var(--mk-motion-quick) var(--mk-ease-spring);
+  }
+
+  .mk-btn:hover {
+    background: color-mix(in oklch, var(--mk-color-surface-3), var(--mk-color-text) 8%);
+  }
+
+  .mk-btn:active {
+    transform: scale(0.97);
+  }
+
+  .mk-btn--primary {
+    background: var(--mk-color-accent);
+    color: var(--mk-color-accent-contrast);
+  }
+
+  .mk-btn--primary:hover {
+    background: var(--mk-color-accent-hover);
+  }
+
+  .mk-btn--ghost {
+    background: transparent;
+  }
+
+  .mk-btn--ghost:hover {
+    background: var(--mk-color-surface-2);
+  }
+
+  /* Danger — destructive fill; contrast text reads on the saturated fill */
+  .mk-btn--danger {
+    background: var(--mk-color-danger);
+    color: var(--mk-color-accent-contrast);
+  }
+
+  .mk-btn--danger:hover {
+    background: color-mix(in oklch, var(--mk-color-danger), var(--mk-color-text) 12%);
+  }
+
+  /* Sizes */
+  .mk-btn--sm {
+    font-size: var(--mk-text-xs);
+    padding: 0.45em 1.1em;
+    min-height: 36px;
+  }
+
+  .mk-btn--lg {
+    font-size: var(--mk-text-md);
+    padding: 0.7em 1.6em;
+    min-height: 52px;
+  }
+
+  /* Full-width block */
+  .mk-btn--block {
+    display: flex;
+    width: 100%;
+  }
+
+  /* Icon-only — square, single glyph/svg */
+  .mk-btn--icon {
+    padding: 0;
+    width: 44px;
+    min-width: 44px;
+    height: 44px;
+    min-height: 44px;
+  }
+
+  .mk-btn--icon svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* Disabled — dim, no hover lift, default cursor */
+  .mk-btn:disabled,
+  .mk-btn[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .mk-btn:disabled:hover,
+  .mk-btn[aria-disabled="true"]:hover {
+    background: var(--mk-color-surface-3);
+  }
+
+  .mk-btn--primary:disabled:hover,
+  .mk-btn--primary[aria-disabled="true"]:hover {
+    background: var(--mk-color-accent);
+  }
+
+  .mk-btn--ghost:disabled:hover,
+  .mk-btn--ghost[aria-disabled="true"]:hover {
+    background: transparent;
+  }
+
+  .mk-btn--danger:disabled:hover,
+  .mk-btn--danger[aria-disabled="true"]:hover {
+    background: var(--mk-color-danger);
+  }
+
+  .mk-btn:disabled:active,
+  .mk-btn[aria-disabled="true"]:active {
+    transform: none;
+  }
+}

package/src/card.css

@@ -0,0 +1,19 @@
+@layer mk.components {
+  /* Card — raised tonal surface */
+  .mk-card {
+    background: var(--mk-color-surface-1);
+    border-radius: var(--mk-radius-surface);
+    padding: var(--mk-space-5);
+  }
+
+  /* Sunken — recedes to surface-2 for nesting inside a card */
+  .mk-card--sunken {
+    background: var(--mk-color-surface-2);
+  }
+
+  /* Flush — no padding, for media that bleeds to the edge */
+  .mk-card--flush {
+    padding: 0;
+    overflow: hidden;
+  }
+}

package/src/disclosure.css

@@ -0,0 +1,64 @@
+@layer mk.components {
+  /* Disclosure — native details/summary, styled tonal */
+  .mk-disclosure {
+    background: var(--mk-color-surface-1);
+    border-radius: var(--mk-radius-surface);
+  }
+
+  .mk-disclosure > summary {
+    display: flex;
+    align-items: center;
+    gap: var(--mk-space-3);
+    min-height: 44px;
+    padding: var(--mk-space-3) var(--mk-space-4);
+    color: var(--mk-color-text);
+    font-weight: var(--mk-weight-medium);
+    cursor: pointer;
+    list-style: none;
+    transition: background var(--mk-motion-quick) var(--mk-ease-out);
+  }
+
+  /* Strip the native marker in every engine */
+  .mk-disclosure > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .mk-disclosure > summary:hover {
+    background: var(--mk-color-surface-2);
+  }
+
+  /*
+   * Custom marker — a chevron that rotates open. Drawn with a currentColor
+   * background SVG (no border-*, matching the select caret technique) so the
+   * zero-border rule holds uniformly for decorative glyphs.
+   */
+  .mk-disclosure > summary::before {
+    content: "";
+    flex: none;
+    width: 0.7em;
+    height: 0.7em;
+    color: var(--mk-color-text-muted);
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")
+      center / contain no-repeat;
+    transform-origin: center;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .mk-disclosure > summary::before {
+      transition: transform var(--mk-motion-standard) var(--mk-ease-out);
+    }
+  }
+
+  .mk-disclosure[open] > summary::before {
+    transform: rotate(90deg);
+  }
+
+  /* Content body — tonal recess under the summary */
+  .mk-disclosure__body {
+    padding: var(--mk-space-2) var(--mk-space-4) var(--mk-space-4);
+    color: var(--mk-color-text-muted);
+    font-size: var(--mk-text-sm);
+    line-height: var(--mk-leading-normal);
+  }
+}

package/src/divider.css

@@ -0,0 +1,29 @@
+@layer mk.components {
+  /* Divider — a 1px tonal line drawn as a background shift, not a border */
+  .mk-divider {
+    height: 1px;
+    border: 0;
+    margin: var(--mk-space-5) 0;
+    background: var(--mk-color-surface-3);
+  }
+
+  /* Labelled variant — centered text flanked by tonal rules */
+  .mk-divider--label {
+    height: auto;
+    background: none;
+    display: flex;
+    align-items: center;
+    gap: var(--mk-space-3);
+    color: var(--mk-color-text-muted);
+    font-size: var(--mk-text-xs);
+    font-weight: var(--mk-weight-medium);
+  }
+
+  .mk-divider--label::before,
+  .mk-divider--label::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--mk-color-surface-3);
+  }
+}

package/src/empty.css

@@ -0,0 +1,37 @@
+@layer mk.components {
+  /*
+   * Empty state — a centered tonal block for "nothing here yet". Surface-2
+   * sets it apart from the page without a border; muted text keeps it quiet,
+   * and the optional action sits below with comfortable spacing.
+   */
+  .mk-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--mk-space-3);
+    border-radius: var(--mk-radius-surface);
+    padding: var(--mk-space-7) var(--mk-space-5);
+    background: var(--mk-color-surface-2);
+    color: var(--mk-color-text-muted);
+    text-align: center;
+  }
+
+  /* Optional bold lead line above the muted message */
+  .mk-empty__title {
+    color: var(--mk-color-text);
+    font-weight: var(--mk-weight-bold);
+    font-size: var(--mk-text-lg);
+    line-height: var(--mk-leading-tight);
+  }
+
+  .mk-empty__message {
+    font-size: var(--mk-text-sm);
+    line-height: var(--mk-leading-normal);
+    max-width: 32ch;
+  }
+
+  /* Action slot — extra breathing room above the CTA */
+  .mk-empty__action {
+    margin-top: var(--mk-space-2);
+  }
+}

package/src/forms.css

@@ -0,0 +1,279 @@
+@layer mk.components {
+  /* Form controls — filled (zero-border consequence) */
+  .mk-input,
+  .mk-select,
+  .mk-textarea {
+    border: 0;
+    border-radius: var(--mk-radius-control);
+    background: var(--mk-color-field);
+    color: var(--mk-color-text);
+    font: inherit;
+    font-size: max(16px, 1em); /* prevent iOS zoom */
+    padding: 0.6em 0.9em;
+    min-height: 44px;
+    width: 100%;
+    transition: background var(--mk-motion-quick) var(--mk-ease-out);
+  }
+
+  .mk-input::placeholder,
+  .mk-textarea::placeholder {
+    color: var(--mk-color-text-faint);
+  }
+
+  .mk-input:hover,
+  .mk-select:hover,
+  .mk-textarea:hover {
+    background: color-mix(in oklch, var(--mk-color-field), var(--mk-color-text) 4%);
+  }
+
+  /*
+   * Select — drop the native chrome and paint a caret with a background
+   * data-URI. The glyph is stroked in currentColor so it tracks the text
+   * color across light/dark with no extra tokens. Extra inline-end padding
+   * keeps long option text clear of the caret.
+   */
+  .mk-select {
+    appearance: none;
+    padding-inline-end: var(--mk-space-7);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--mk-space-4) center;
+    background-size: 1.1em;
+  }
+
+  /* Textarea — taller default, vertical resize only */
+  .mk-textarea {
+    min-height: 7rem;
+    resize: vertical;
+    line-height: var(--mk-leading-normal);
+  }
+
+  /* Field scaffolding */
+  .mk-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mk-space-1);
+  }
+
+  .mk-field > label {
+    font-size: var(--mk-text-sm);
+    font-weight: var(--mk-weight-medium);
+  }
+
+  .mk-field__help {
+    font-size: var(--mk-text-xs);
+    color: var(--mk-color-text-muted);
+  }
+
+  /* Error message — danger-tinted, sits below the control */
+  .mk-field__error {
+    font-size: var(--mk-text-xs);
+    color: var(--mk-color-danger);
+  }
+
+  /*
+   * Error state — no border (there are none anywhere); the control gets a
+   * danger-tinted fill instead, mixed off the field token so it stays a
+   * surface, not a loud alert.
+   */
+  .mk-field--error .mk-input,
+  .mk-field--error .mk-select,
+  .mk-field--error .mk-textarea {
+    background: color-mix(in oklch, var(--mk-color-field), var(--mk-color-danger) 18%);
+  }
+
+  .mk-field--error .mk-input:hover,
+  .mk-field--error .mk-select:hover,
+  .mk-field--error .mk-textarea:hover {
+    background: color-mix(in oklch, var(--mk-color-field), var(--mk-color-danger) 26%);
+  }
+
+  /*
+   * Fieldset — native chrome reset; the legend reads like a field label.
+   * Groups related choices (radio sets, switch stacks).
+   */
+  .mk-fieldset {
+    border: 0; /* native-chrome reset, not a design border */
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mk-space-1);
+  }
+
+  .mk-fieldset > legend {
+    padding: 0;
+    margin-bottom: var(--mk-space-2);
+    font-size: var(--mk-text-sm);
+    font-weight: var(--mk-weight-medium);
+  }
+
+  /*
+   * Choice row — a 44px touch target wrapping a 24px control + label.
+   * Used for checkboxes and radios; the whole row is comfortably tappable.
+   */
+  .mk-choice {
+    display: flex;
+    align-items: center;
+    gap: var(--mk-space-3);
+    min-height: 44px;
+    cursor: pointer;
+  }
+
+  .mk-choice > span {
+    font-size: var(--mk-text-md);
+  }
+
+  /*
+   * Checkbox & radio — strip native chrome, paint a 24px filled tonal box.
+   * Checkbox stays sharp (zero radius); radio is a true circle because a
+   * circle is geometry, not softness.
+   *
+   * Affordance ring: field-vs-surface-1 is only ~1.1:1, so an unchecked box
+   * is nearly invisible on a card. We add an inset ring (not a border — the
+   * zero-border rule forbids border-*) in text-muted, which clears 3:1
+   * against every surface (WCAG 1.4.11 non-text contrast). The checked state
+   * drops the ring since the accent fill is its own affordance.
+   */
+  .mk-checkbox,
+  .mk-radio {
+    appearance: none;
+    flex: none;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    background: var(--mk-color-field);
+    color: var(--mk-color-accent-contrast);
+    box-shadow: inset 0 0 0 2px var(--mk-color-text-muted);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    transition:
+      background var(--mk-motion-quick) var(--mk-ease-out),
+      box-shadow var(--mk-motion-quick) var(--mk-ease-out);
+  }
+
+  .mk-checkbox {
+    border-radius: var(--mk-radius-control);
+  }
+
+  .mk-radio {
+    border-radius: 50%;
+  }
+
+  .mk-checkbox:hover,
+  .mk-radio:hover {
+    background: color-mix(in oklch, var(--mk-color-field), var(--mk-color-text) 8%);
+  }
+
+  /* Checked — accent fill with a glyph drawn via ::before; the fill is its
+     own affordance, so the inset ring is dropped. */
+  .mk-checkbox:checked,
+  .mk-radio:checked {
+    background: var(--mk-color-accent);
+    box-shadow: none;
+  }
+
+  .mk-checkbox:checked:hover,
+  .mk-radio:checked:hover {
+    background: var(--mk-color-accent-hover);
+  }
+
+  /*
+   * Checkmark — a square-cut tick. Drawn as a currentColor block clipped to
+   * a check polygon (no border-* — the zero-border rule applies to glyphs
+   * too; this mirrors the select caret using a non-border technique).
+   */
+  .mk-checkbox::before {
+    content: "";
+    width: 0.8em;
+    height: 0.8em;
+    background: currentColor;
+    clip-path: polygon(
+      14% 44%, 0% 60%, 40% 100%, 100% 18%, 84% 4%, 38% 70%
+    );
+    transform: scale(0);
+    transition: transform var(--mk-motion-quick) var(--mk-ease-spring);
+  }
+
+  .mk-checkbox:checked::before {
+    transform: scale(1);
+  }
+
+  /* Radio dot — a solid inner disc */
+  .mk-radio::before {
+    content: "";
+    width: 0.55em;
+    height: 0.55em;
+    border-radius: 50%;
+    background: currentColor;
+    transform: scale(0);
+    transition: transform var(--mk-motion-quick) var(--mk-ease-spring);
+  }
+
+  .mk-radio:checked::before {
+    transform: scale(1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mk-checkbox::before,
+    .mk-radio::before {
+      transition: none;
+    }
+  }
+
+  /*
+   * Switch — a checkbox restyled as a track + sliding thumb. Square thumb
+   * (terminal bones: no soft pills), accent track when on, motion-tokened
+   * slide. Lives in a .mk-choice row like the other choices.
+   */
+  .mk-switch {
+    appearance: none;
+    flex: none;
+    width: 44px;
+    height: 24px;
+    margin: 0;
+    padding: 3px;
+    background: var(--mk-color-surface-3);
+    border-radius: var(--mk-radius-pill);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: background var(--mk-motion-standard) var(--mk-ease-out);
+  }
+
+  .mk-switch::before {
+    content: "";
+    width: 18px;
+    height: 18px;
+    background: var(--mk-color-text-muted);
+    border-radius: var(--mk-radius-sm);
+    transition:
+      transform var(--mk-motion-standard) var(--mk-ease-out),
+      background var(--mk-motion-standard) var(--mk-ease-out);
+  }
+
+  .mk-switch:hover {
+    background: color-mix(in oklch, var(--mk-color-surface-3), var(--mk-color-text) 8%);
+  }
+
+  .mk-switch:checked {
+    background: var(--mk-color-accent);
+  }
+
+  .mk-switch:checked:hover {
+    background: var(--mk-color-accent-hover);
+  }
+
+  .mk-switch:checked::before {
+    background: var(--mk-color-accent-contrast);
+    transform: translateX(20px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mk-switch,
+    .mk-switch::before {
+      transition: none;
+    }
+  }
+}

package/src/media.css

@@ -0,0 +1,113 @@
+@layer mk.components {
+  /*
+   * Media thumb — an aspect-ratio box that crops its image to fill. Zero
+   * radius (terminal bones). Default ratio is a poster (2/3); square and
+   * video variants swap the ratio. The box itself carries a tonal surface
+   * so it reads as a slot before any image (or fallback) lands.
+   */
+  .mk-thumb {
+    display: block;
+    position: relative;
+    aspect-ratio: 2 / 3;
+    overflow: hidden;
+    background: var(--mk-color-surface-2);
+    border-radius: var(--mk-radius-surface);
+  }
+
+  .mk-thumb--square {
+    aspect-ratio: 1 / 1;
+  }
+
+  .mk-thumb--video {
+    aspect-ratio: 16 / 9;
+  }
+
+  .mk-thumb > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /*
+   * Server-rendered no-image path. tv-tracker emits this on the server when
+   * a poster is missing: it fills the box with a deeper tonal surface and
+   * centers a single large mono initial in muted text. No border, no glyph
+   * font — just type weight doing the work.
+   */
+  .mk-thumb__fallback {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-content: center;
+    background: var(--mk-color-surface-3);
+    color: var(--mk-color-text-muted);
+    font-size: var(--mk-text-3xl);
+    font-weight: var(--mk-weight-bold);
+    line-height: var(--mk-leading-tight);
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  /*
+   * Skeleton — a tonal shimmer placeholder. Animates a gradient sweep
+   * between surface-2 and surface-3; under reduced-motion (and as the
+   * no-animation fallback) it sits as a static surface-2 block. Fills a
+   * thumb when nested, or stands alone as a text-line shim.
+   */
+  .mk-skeleton {
+    background: var(--mk-color-surface-2);
+  }
+
+  .mk-thumb > .mk-skeleton {
+    position: absolute;
+    inset: 0;
+  }
+
+  /* Text-line skeleton — a single muted bar at line height. */
+  .mk-skeleton--text {
+    height: 1em;
+    line-height: var(--mk-leading-normal);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .mk-skeleton {
+      background: linear-gradient(
+        100deg,
+        var(--mk-color-surface-2) 30%,
+        var(--mk-color-surface-3) 50%,
+        var(--mk-color-surface-2) 70%
+      );
+      background-size: 200% 100%;
+      /* slow token x5 keeps the loop tokenized but readable as a sweep */
+      animation: mk-skeleton-shimmer calc(var(--mk-motion-slow) * 5) var(--mk-ease-out) infinite;
+    }
+  }
+
+  @keyframes mk-skeleton-shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  /*
+   * Figure + caption — wraps a thumb (or any media) with a muted, small
+   * caption beneath. The figure carries no chrome; the caption is the only
+   * styled part.
+   */
+  .mk-figure {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mk-space-2);
+  }
+
+  .mk-figure > figcaption {
+    font-size: var(--mk-text-sm);
+    line-height: var(--mk-leading-normal);
+    color: var(--mk-color-text-muted);
+  }
+}

package/src/progress.css

@@ -0,0 +1,77 @@
+@layer mk.components {
+  /* Progress — tonal track, accent fill */
+  .mk-progress {
+    appearance: none;
+    width: 100%;
+    height: 0.5rem;
+    border: 0;
+    border-radius: var(--mk-radius-pill);
+    background: var(--mk-color-surface-3);
+    overflow: hidden;
+  }
+
+  .mk-progress::-webkit-progress-bar {
+    background: var(--mk-color-surface-3);
+    border-radius: var(--mk-radius-pill);
+  }
+
+  .mk-progress::-webkit-progress-value {
+    background: var(--mk-color-accent);
+    border-radius: var(--mk-radius-pill);
+    transition: width var(--mk-motion-standard) var(--mk-ease-out);
+  }
+
+  .mk-progress::-moz-progress-bar {
+    background: var(--mk-color-accent);
+    border-radius: var(--mk-radius-pill);
+  }
+
+  /* Thinner variant */
+  .mk-progress--sm {
+    height: 0.25rem;
+  }
+
+  /*
+   * Indeterminate — a <progress> with no value attribute. Browsers zero out
+   * the value bar, so we paint a sliding accent segment on the track itself
+   * and let it travel. Reduced motion falls back to a static partial fill so
+   * the bar still signals "working" without movement.
+   */
+  .mk-progress:indeterminate {
+    background:
+      linear-gradient(
+        to right,
+        var(--mk-color-accent) 0%,
+        var(--mk-color-accent) 40%,
+        transparent 40%
+      )
+      var(--mk-color-surface-3);
+    background-repeat: no-repeat;
+    background-size: 40% 100%;
+    background-position: 0% 0%;
+  }
+
+  .mk-progress:indeterminate::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  .mk-progress:indeterminate::-moz-progress-bar {
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .mk-progress:indeterminate {
+      /* slow token x4 keeps the loop tokenized (~1280ms ≈ the original 1.4s). */
+      animation: mk-progress-slide calc(var(--mk-motion-slow) * 4) var(--mk-ease-out) infinite;
+    }
+  }
+
+  @keyframes mk-progress-slide {
+    from {
+      background-position: -40% 0%;
+    }
+    to {
+      background-position: 140% 0%;
+    }
+  }
+}

package/src/prose.css

@@ -0,0 +1,122 @@
+@layer mk.components {
+  /*
+   * Prose — article-style long-form content. Scoped to .mk-prose so it never
+   * leaks into app chrome. Hierarchy comes from rhythm, weight, and tonal
+   * fields — zero borders, zero radius (terminal bones).
+   */
+  .mk-prose {
+    color: var(--mk-color-text);
+    max-width: 70ch;
+  }
+
+  /* Vertical rhythm: every flow child gets top spacing, first child none. */
+  .mk-prose > * {
+    margin-block: var(--mk-space-4) 0;
+  }
+
+  .mk-prose > :first-child {
+    margin-block-start: 0;
+  }
+
+  .mk-prose p {
+    line-height: var(--mk-leading-normal);
+  }
+
+  /* Headings sit closer to the content they introduce, looser above. */
+  .mk-prose h2,
+  .mk-prose h3,
+  .mk-prose h4 {
+    margin-block: var(--mk-space-6) var(--mk-space-2);
+  }
+
+  .mk-prose h2:first-child,
+  .mk-prose h3:first-child,
+  .mk-prose h4:first-child {
+    margin-block-start: 0;
+  }
+
+  /* Lists */
+  .mk-prose ul,
+  .mk-prose ol {
+    padding-inline-start: var(--mk-space-5);
+  }
+
+  .mk-prose li {
+    margin-block: var(--mk-space-2) 0;
+  }
+
+  .mk-prose li::marker {
+    color: var(--mk-color-text-muted);
+  }
+
+  /* Nested lists tighten up. */
+  .mk-prose li > ul,
+  .mk-prose li > ol {
+    margin-block-start: var(--mk-space-2);
+  }
+
+  /* Inline code — tonal field chip, no border. */
+  .mk-prose code {
+    background: var(--mk-color-field);
+    color: var(--mk-color-text);
+    font-family: var(--mk-font-body);
+    font-size: 0.9em;
+    padding: 0.1em 0.4em;
+  }
+
+  /* Pre / fenced blocks — tonal field, horizontal scroll, no wrap. */
+  .mk-prose pre {
+    background: var(--mk-color-field);
+    color: var(--mk-color-text);
+    border-radius: var(--mk-radius-surface);
+    padding: var(--mk-space-4);
+    overflow-x: auto;
+    line-height: var(--mk-leading-normal);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Code inside pre resets the inline-chip treatment. */
+  .mk-prose pre code {
+    background: none;
+    padding: 0;
+    font-size: var(--mk-text-sm);
+  }
+
+  /* Blockquote — tonal field shift, no border-left. Indent via padding. */
+  .mk-prose blockquote {
+    margin-inline: 0;
+    padding: var(--mk-space-3) var(--mk-space-4);
+    background: var(--mk-color-surface-2);
+    color: var(--mk-color-text-muted);
+  }
+
+  .mk-prose blockquote > :first-child {
+    margin-block-start: 0;
+  }
+
+  /* kbd — raised tonal chip suggesting a physical key. */
+  .mk-prose kbd {
+    display: inline-block;
+    background: var(--mk-color-surface-3);
+    color: var(--mk-color-text);
+    font-family: var(--mk-font-body);
+    font-size: 0.85em;
+    font-weight: var(--mk-weight-medium);
+    line-height: 1;
+    padding: 0.25em 0.5em;
+    border-radius: var(--mk-radius-control);
+  }
+
+  /* Small / caption text. */
+  .mk-prose small {
+    font-size: var(--mk-text-sm);
+    color: var(--mk-color-text-muted);
+  }
+
+  /* Emphasis */
+  .mk-prose strong {
+    font-weight: var(--mk-weight-bold);
+  }
+
+  /* Links inherit base anchor styling; underline on hover only. */
+}

package/src/reset.css

@@ -0,0 +1,17 @@
+@layer mk.reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  img,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+}

package/src/spinner.css

@@ -0,0 +1,45 @@
+@layer mk.components {
+  /*
+   * Spinner — CSS-only, terminal aesthetic. A square block sweeps a conic
+   * accent wedge in discrete steps() jumps rather than a smooth circle, so
+   * it reads like a stepping machine indicator, not a polished loader.
+   * Zero radius, zero border. The accent wedge rides on a faint track built
+   * from the same accent at low mix.
+   *
+   * Static fallback under reduced motion: a half-filled, non-spinning block
+   * still reads as "busy" without animating.
+   */
+  .mk-spinner {
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--mk-radius-control);
+    background: conic-gradient(
+      var(--mk-color-accent) 0deg 90deg,
+      color-mix(in oklch, var(--mk-color-accent), transparent 80%) 90deg 360deg
+    );
+  }
+
+  .mk-spinner--sm {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .mk-spinner--md {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .mk-spinner {
+      /* slow token x3 keeps the loop tokenized (~960ms ≈ the original 1s). */
+      animation: mk-spinner-step calc(var(--mk-motion-slow) * 3) steps(8, end) infinite;
+    }
+  }
+
+  @keyframes mk-spinner-step {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}

package/src/table.css

@@ -0,0 +1,46 @@
+@layer mk.components {
+  /* Table — full width, mono-friendly, tonal header, no borders */
+  .mk-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--mk-text-sm);
+    color: var(--mk-color-text);
+  }
+
+  .mk-table th,
+  .mk-table td {
+    padding: var(--mk-space-3) var(--mk-space-4);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  /* Header row — tonal background shift, muted bold label text */
+  .mk-table thead th {
+    background: var(--mk-color-surface-2);
+    color: var(--mk-color-text-muted);
+    font-weight: var(--mk-weight-medium);
+    white-space: nowrap;
+  }
+
+  /* Hover tonal row feedback (no zebra) */
+  .mk-table tbody tr {
+    transition: background var(--mk-motion-quick) var(--mk-ease-out);
+  }
+
+  .mk-table tbody tr:hover {
+    background: var(--mk-color-surface-2);
+  }
+
+  /* Numeric cells — right-aligned, tabular */
+  .mk-table__num {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Mobile scroll container — horizontal overflow without breaking layout */
+  .mk-table-wrap {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}