/* UI kit · kit.css
   Base element styles + components. Load after tokens.css.
   Everything is inside kit.* cascade layers, so project CSS without a layer always wins. */

@layer kit.reset, kit.tokens, kit.skins, kit.base, kit.components, kit.utilities;

/* ── Reset ─────────────────────────────────────────────── */
@layer kit.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  img, video, canvas { max-width: 100%; height: auto; }
  svg { flex-shrink: 0; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  :where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }
  [hidden] { display: none !important; }
}

/* ── Base elements ─────────────────────────────────────── */
@layer kit.base {
  html {
    font-family: var(--font-body);
    line-height: var(--leading);
    color: var(--text);
    background: var(--page);
    overflow-wrap: break-word;
  }
  :lang(ko) { word-break: keep-all; }
  body { font-size: var(--step-0); }
  [data-mode], [data-skin] { color: var(--text); }
  [data-mode]:not(html) { background: var(--page); }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    line-height: var(--leading-tight);
    text-wrap: balance;
    margin: 0 0 0.5em;
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  h5, h6 { font-size: var(--step-0); }
  p { margin: 0 0 1em; text-wrap: pretty; }
  ul, ol { margin: 0 0 1em; padding-inline-start: 1.25em; }
  li + li { margin-top: 0.25em; }

  a {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-color: var(--link-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  a:hover { text-decoration-thickness: 2px; }

  small { font-size: var(--step--1); }
  strong, b { font-weight: 700; }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
  :not(pre) > code {
    background: var(--gray-3);
    padding: 0.1em 0.35em;
    border-radius: 4px;
  }
  pre {
    margin: 0 0 1em;
    padding: var(--space-4);
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    overflow-x: auto;
    line-height: 1.5;
  }
  kbd {
    padding: 0 0.35em;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-size: 0.85em;
  }
  hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
  ::selection { background: var(--accent-5); color: var(--text); }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* Form controls are styled without classes. */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
    [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
  select,
  textarea {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    padding: 0 var(--space-3);
    font-size: max(16px, var(--control-text)); /* 16px stops iOS zooming in */
    background: var(--page);
    border: var(--border-w) solid var(--border-control);
    border-radius: var(--radius-control);
    transition: border-color var(--dur-fast) var(--ease);
  }
  textarea { min-height: 6rem; padding-block: var(--space-2); resize: vertical; line-height: 1.5; }
  select {
    appearance: none;
    padding-inline-end: var(--space-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23878d96' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
  }
  ::placeholder { color: var(--text-faint); opacity: 1; }
  :is(input, select, textarea):hover:not(:disabled, :focus) { border-color: var(--text-muted); }
  :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
  :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger-9); }
  :is(input, select, textarea, button):disabled { opacity: 0.55; cursor: not-allowed; }

  input[type="checkbox"], input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--indicator);
    flex-shrink: 0;
  }
  input[type="range"] { width: 100%; accent-color: var(--indicator); }

  progress {
    appearance: none;
    width: 100%;
    height: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--gray-4);
    overflow: hidden;
  }
  progress::-webkit-progress-bar { background: var(--gray-4); }
  progress::-webkit-progress-value { background: var(--indicator); border-radius: 999px; }
  progress::-moz-progress-bar { background: var(--indicator); border-radius: 999px; }

  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; margin-bottom: var(--space-2); font-weight: 700; }
  label { cursor: default; }
}

/* ── Components ────────────────────────────────────────── */
@layer kit.components {

  /* Button */
  .btn {
    --btn-bg: var(--gray-3);
    --btn-bg-hover: var(--gray-4);
    --btn-fg: var(--text);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    font-size: var(--control-text);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: var(--border-w) solid var(--btn-border);
    border-radius: var(--radius-control);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
      translate var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .btn:hover { background: var(--btn-bg-hover); }
  .btn:active:not(:disabled, [aria-disabled="true"]) {
    translate: 0 var(--btn-press);
    box-shadow: var(--btn-shadow-pressed);
  }
  .btn.primary { --btn-bg: var(--accent-9); --btn-bg-hover: var(--accent-10); --btn-fg: var(--on-accent); }
  .btn.danger { --btn-bg: var(--danger-9); --btn-bg-hover: var(--danger-10); --btn-fg: oklch(1 0 0); }
  .btn.outline { --btn-bg: transparent; --btn-bg-hover: var(--gray-3); --btn-border: var(--btn-outline-border, var(--border-strong)); }
  .btn.ghost { --btn-bg: transparent; --btn-bg-hover: var(--gray-3); --btn-border: transparent; box-shadow: none; }
  .btn.ghost:active { box-shadow: none; translate: none; }
  .btn.small { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--step--1); }
  .btn.large { min-height: var(--control-h-lg); padding: 0 var(--space-5); font-size: var(--step-0); }
  .btn.block { display: flex; width: 100%; }
  .btn.square { width: var(--control-h); padding: 0; }
  .btn.small.square { width: var(--control-h-sm); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
  .btn[aria-busy="true"] { color: transparent; pointer-events: none; }
  .btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border: 2px solid var(--btn-fg);
    border-right-color: transparent;
    border-radius: 50%;
    animation: kit-spin 0.7s linear infinite;
  }
  .btn svg { width: 1.125em; height: 1.125em; }

  /* Field: label + control + hint/error */
  .field { display: grid; gap: var(--space-2); }
  .field > * { margin: 0; }
  .field > .label, .field > label:first-child { font-size: var(--control-text); font-weight: 700; }
  .field .hint { font-size: var(--step--1); color: var(--text-muted); }
  .field .error { font-size: var(--step--1); color: var(--danger-11); font-weight: 700; }
  .field .optional { font-weight: 400; color: var(--text-muted); }

  .check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
  }
  .check > input { margin-top: calc((1lh - 1.125rem) / 2); }
  .check > input.switch { margin-top: calc((1lh - 1.375rem) / 2); }

  /* Switch: <input type="checkbox" class="switch" role="switch"> */
  input[type="checkbox"].switch {
    appearance: none;
    position: relative;
    width: 2.375rem;
    height: 1.375rem;
    border-radius: 999px;
    background: var(--gray-7);
    border: var(--border-w) solid transparent;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
  }
  input[type="checkbox"].switch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: oklch(1 0 0);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
    translate: 0 -50%;
    transition: translate var(--dur) var(--ease);
  }
  input[type="checkbox"].switch:checked { background: var(--indicator); }
  input[type="checkbox"].switch:checked::before { translate: calc(2.375rem - 1rem - 4px - 2 * var(--border-w)) -50%; }

  /* Segmented choice (one of a few): radios inside labels */
  .segmented {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--sunken);
    border: var(--border-w) solid var(--border-control);
    border-radius: var(--radius-control);
  }
  .segmented > label {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--control-h) - 4px - 2 * var(--border-w));
    padding: 0 var(--space-3);
    font-size: var(--control-text);
    font-weight: 700;
    text-align: center;
    color: var(--text-muted);
    border-radius: max(2px, calc(var(--radius-control) - 2px));
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .segmented > label:hover { color: var(--text); }
  .segmented > label:has(:checked) { color: var(--on-indicator); background: var(--indicator); }

  /* Chips (pick several): checkboxes inside labels; data-max="3" limits picks (kit.js) */
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .chips > label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h-sm);
    padding: 0 var(--space-3);
    font-size: var(--control-text);
    background: var(--page);
    border: var(--border-w) solid var(--border-control);
    border-radius: var(--radius-control);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .chips > label:hover { border-color: var(--text-muted); }
  .chips > label:has(:checked) { color: var(--on-indicator); background: var(--indicator); border-color: var(--indicator); }
  .chips > label:has(:disabled) { opacity: 0.45; cursor: not-allowed; }

  :is(.segmented, .chips) input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  :is(.segmented, .chips) > label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  :is(.segmented, .chips)[aria-invalid="true"],
  .chips[aria-invalid="true"] > label { border-color: var(--danger-9); }

  /* Card: flat, bordered. Use for things that really are separate objects. */
  .card {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-surface);
    padding: var(--space-5);
  }
  .card > :last-child { margin-bottom: 0; }
  .card.sunken { background: var(--sunken); border-color: transparent; }
  a.card { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
  a.card:hover { border-color: var(--border-strong); }

  /* List rows: the default for collections. */
  .list { list-style: none; margin: 0 0 1em; padding: 0; }
  .list > li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
  }
  .list > li:last-child { border-bottom: 1px solid var(--border); }
  .list > li > a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-2));
    padding: var(--space-3) var(--space-2);
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-control);
  }
  .list > li > a:hover { background: var(--gray-2); }
  .list .grow { flex: 1; min-width: 0; }
  .list .title { display: block; font-weight: 700; }
  .list .meta { display: block; font-size: var(--step--1); color: var(--text-muted); }
  .list .end { margin-inline-start: auto; flex-shrink: 0; }

  /* Table */
  .table-wrap { overflow-x: auto; margin: 0 0 1em; }
  .table { width: 100%; border-collapse: collapse; font-size: var(--control-text); }
  .table th, .table td { padding: var(--space-2) var(--space-3); text-align: start; vertical-align: top; }
  .table th:first-child, .table td:first-child { padding-inline-start: 0; }
  .table th:last-child, .table td:last-child { padding-inline-end: 0; }
  .table thead th {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
  }
  .table tbody td { border-bottom: 1px solid var(--border); }
  .table .num, .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* Dialog: <dialog class="dialog"> opened with command="show-modal" */
  .dialog {
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: var(--space-5);
    color: var(--text);
    background: var(--float);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-float);
    box-shadow: var(--shadow-float);
    overflow-y: auto;
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease),
      overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
  }
  .dialog:not([open]) { opacity: 0; translate: 0 6px; }
  @starting-style { .dialog[open] { opacity: 0; translate: 0 6px; } }
  .dialog::backdrop {
    background: oklch(0.18 0.01 250 / 0.5);
    transition: opacity var(--dur) var(--ease), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
  }
  .dialog:not([open])::backdrop { opacity: 0; }
  @starting-style { .dialog[open]::backdrop { opacity: 0; } }
  .dialog > :first-child { margin-top: 0; }
  .dialog h2 { font-size: var(--step-2); }
  .dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

  /* Menu: <div popover class="menu"> opened by a button with commandfor */
  .menu {
    inset: auto;
    margin: var(--space-1) 0;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
    min-width: 12rem;
    padding: var(--space-1);
    color: var(--text);
    background: var(--float);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-float);
    box-shadow: var(--shadow-float);
  }
  .menu > :is(button, a) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--control-text);
    text-align: start;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: max(2px, calc(var(--radius-float) - var(--space-1)));
  }
  .menu > :is(button, a):is(:hover, :focus-visible) { background: var(--gray-3); outline: none; }
  .menu > .danger { color: var(--danger-11); }
  .menu > hr { margin: var(--space-1) 0; }
  .menu > .menu-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--step--1); color: var(--text-muted); }

  /* Tabs: see index.html for markup; kit.js wires the keys. */
  .tabs [role="tablist"] {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs [role="tab"] {
    padding: var(--space-2) var(--space-3);
    margin-bottom: -1px;
    font-size: var(--control-text);
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
  }
  .tabs [role="tab"]:hover { color: var(--text); }
  .tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--indicator); }
  .tabs [role="tab"]:focus-visible { outline-offset: -2px; border-radius: 4px; }
  .tabs [role="tabpanel"] { padding-top: var(--space-4); }
  .tabs [role="tabpanel"]:focus-visible { outline-offset: 4px; }

  /* Toast: kit.toast("Saved") */
  .toasts {
    position: fixed;
    inset: auto var(--space-4) var(--space-4) auto;
    width: min(22rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    background: none;
    border: 0;
    overflow: visible;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--control-text);
    color: var(--gray-1);
    background: var(--gray-12);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
  }
  @starting-style { .toast { opacity: 0; translate: 0 8px; } }
  .toast.leaving { opacity: 0; translate: 0 8px; }
  .toast.danger { color: oklch(1 0 0); background: var(--danger-9); }
  .toast > .grow { flex: 1; }
  .toast button {
    padding: var(--space-1) var(--space-2);
    font-weight: 700;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Badge */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.125rem 0.5rem;
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--text-muted);
    background: var(--gray-3);
    border-radius: var(--radius-control);
    vertical-align: middle;
  }
  .badge.accent { color: var(--accent-11); background: var(--accent-3); }
  .badge.success { color: var(--success-11); background: var(--success-3); }
  .badge.warning { color: var(--warning-11); background: var(--warning-3); }
  .badge.danger { color: var(--danger-11); background: var(--danger-3); }
  .badge.solid { color: var(--on-accent); background: var(--accent-9); }

  /* Callout: tinted box, no side stripe */
  .callout {
    padding: var(--space-3) var(--space-4);
    margin: 0 0 1em;
    background: var(--gray-3);
    border-radius: var(--radius-control);
  }
  .callout > :last-child { margin-bottom: 0; }
  .callout > strong:first-child { display: block; margin-bottom: var(--space-1); }
  .callout.accent { background: var(--accent-3); }
  .callout.accent > strong:first-child { color: var(--accent-11); }
  .callout.success { background: var(--success-3); }
  .callout.success > strong:first-child { color: var(--success-11); }
  .callout.warning { background: var(--warning-3); }
  .callout.warning > strong:first-child { color: var(--warning-11); }
  .callout.danger { background: var(--danger-3); }
  .callout.danger > strong:first-child { color: var(--danger-11); }

  /* Empty state */
  .empty {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    border: var(--border-w) dashed var(--border-strong);
    border-radius: var(--radius-surface);
  }
  .empty > h3, .empty > h2 { font-size: var(--step-1); margin-bottom: var(--space-2); }
  .empty > p { max-width: 42ch; margin-inline: auto; color: var(--text-muted); }
  .empty > :last-child { margin-bottom: 0; }

  /* Accordion: <div class="accordion"><details name="faq">… */
  .accordion { border-top: 1px solid var(--border); margin: 0 0 1em; }
  .accordion > details { border-bottom: 1px solid var(--border); }
  .accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.25rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    rotate: 45deg;
    translate: 0 -25%;
    transition: rotate var(--dur) var(--ease);
    flex-shrink: 0;
  }
  .accordion details[open] > summary::after { rotate: 225deg; translate: 0 25%; }
  .accordion details > :not(summary) { margin-top: 0; }
  .accordion details > :last-child:not(summary) { padding-bottom: var(--space-3); margin-bottom: 0; }

  /* Spinner */
  .spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kit-spin 0.7s linear infinite;
    vertical-align: -0.125em;
  }

  /* Tooltip: <button data-tip="Copy link" aria-label="Copy link"> */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    translate: -50% 2px;
    z-index: 10;
    padding: var(--space-1) var(--space-2);
    font-size: var(--step--1);
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--gray-1);
    background: var(--gray-12);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
  }
  [data-tip]:is(:hover, :focus-visible)::after { opacity: 1; translate: -50% 0; transition-delay: 300ms; }

  @keyframes kit-spin { to { rotate: 1turn; } }
}

/* ── Layout and helpers ────────────────────────────────── */
@layer kit.utilities {
  .container { width: min(100% - 2rem, var(--container, 72rem)); margin-inline: auto; }
  .container.narrow { --container: 44rem; }
  @media (min-width: 48rem) { .container { width: min(100% - 4rem, var(--container, 72rem)); } }

  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-4)); }
  .stack > * { margin-block: 0; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); }
  .cluster.between { justify-content: space-between; }
  .cluster.end { justify-content: flex-end; }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 16rem), 100%), 1fr));
    gap: var(--gap, var(--space-4));
  }
  .grid.fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr)); } /* items stretch to fill the row */
  /* minmax(0, …) stops long code or URLs from stretching columns past the screen. */
  .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap, var(--space-6)); }
  @media (min-width: 48rem) { .split { grid-template-columns: var(--split, minmax(0, 2fr) minmax(0, 1fr)); } }
  .tight { --gap: var(--space-2); }
  .loose { --gap: var(--space-6); }

  .display { font-size: var(--step-5); }
  .lead { font-size: var(--step-1); color: var(--text-muted); }
  .prose { max-width: 68ch; }
  .muted { color: var(--text-muted); }
  .small { font-size: var(--step--1); }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer kit.utilities {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .spinner, .btn[aria-busy="true"]::after { animation-duration: 1.6s; }
  }
}