@layer components {
  /* ── buttons: every button is a pill ── */
  .pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 40px; padding: 9px 18px; border-radius: var(--r-pill);
    border: 1px solid transparent; background: transparent; color: var(--fg);
    font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
    &:active:not(:disabled) { transform: scale(.98); }
    &:disabled { opacity: .5; cursor: not-allowed; }
    &.pri { background: var(--btn-bg); color: var(--btn-fg); }
    &.pri:hover:not(:disabled) { background: color-mix(in oklch, var(--btn-bg) 88%, var(--grad-b)); }
    &.gh { border-color: var(--line-2); }
    &.gh:hover:not(:disabled) { background: var(--surface-2); }
    &.danger { border-color: color-mix(in oklch, var(--wrong) 50%, var(--line-2)); color: var(--wrong); }
    &.danger:hover:not(:disabled) { background: color-mix(in oklch, var(--wrong) 10%, transparent); }
    &.sm { min-height: 32px; padding: 5px 13px; font-size: 13px; }
    &.block { width: 100%; }
    & kbd { background: transparent; border-color: color-mix(in oklch, currentColor 30%, transparent); color: inherit; opacity: .7; }
    & svg { width: 16px; height: 16px; flex: none; }
  }
  .link-btn {
    border: 0; background: none; padding: 0; color: var(--fg); font-weight: 600;
    text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
    &:hover { text-decoration-color: currentColor; }
  }

  kbd, .kbd {
    font-family: var(--mono); font-size: 11px; line-height: 1; font-weight: 500;
    padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); background: var(--surface);
  }

  .chip {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 11px;
    font-size: 13px; font-weight: 600; color: var(--fg-2);
  }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
  .dot.known { background: var(--known); } .dot.learning { background: var(--learning); }
  .dot.due { background: var(--due); } .dot.right { background: var(--right); } .dot.wrong { background: var(--wrong); }
  .dot.ready { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg); }
  .dot.new { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }

  .card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 22px; }

  .eyebrow { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .h-page { font-size: var(--fs-3xl); letter-spacing: -0.05em; line-height: 1.02; }
  .h-page .dim, .h-sec .dim { color: var(--muted); }
  .h-sec { font-size: var(--fs-xl); letter-spacing: -0.035em; }
  .lede { color: var(--fg-2); font-size: var(--fs-lg); max-width: 60ch; }

  /* ── form fields ── */
  .field { display: grid; gap: 7px; }
  .field > label { font-size: 13px; font-weight: 700; color: var(--fg); }
  .field .hint { font-size: 12.5px; color: var(--muted); }
  .field .err { font-size: 12.5px; color: var(--wrong); font-weight: 600; }
  .input {
    width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-input);
    border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); font-size: 15px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    &::placeholder { color: var(--faint); }
    &:hover { border-color: color-mix(in oklch, var(--fg) 25%, var(--line-2)); }
    &:focus-visible {
      outline: none; border-color: color-mix(in oklch, var(--fg) 45%, transparent);
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--grad-b) 20%, transparent);
    }
    &[aria-invalid="true"] { border-color: var(--wrong); }
  }
  .form { display: grid; gap: 16px; }
  .form > .pill:not(.block) { justify-self: start; }
  .form-error {
    padding: 10px 14px; border-radius: var(--r-input); font-size: 13.5px; font-weight: 600;
    color: var(--wrong); background: color-mix(in oklch, var(--wrong) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--wrong) 30%, transparent);
  }
  .form-note {
    padding: 10px 14px; border-radius: var(--r-input); font-size: 13.5px;
    background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line);
    overflow-wrap: anywhere;
  }

  /* segmented control */
  .seg { display: inline-flex; width: fit-content; padding: 3px; gap: 2px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); }
  .seg button {
    border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px;
    padding: 6px 14px; border-radius: var(--r-pill); transition: background var(--t-fast), color var(--t-fast);
    &:hover { color: var(--fg); }
    &[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
  }

  /* banner: one line, one action */
  .banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 12px 16px; border-radius: var(--r-tile); border: 1px solid var(--line); background: var(--surface);
    font-size: 14px;
    & .dot { margin-right: -4px; }
    & .banner-text { flex: 1 1 260px; }
  }

  /* spinner */
  .spin {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    border: 1.8px solid color-mix(in oklch, currentColor 25%, transparent); border-top-color: currentColor;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

  /* sidebar */
  .sb-logo { font-weight: 800; font-size: 20px; letter-spacing: -0.05em; color: var(--fg); padding: 2px 10px 16px; text-decoration: none; }
  .sb-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px;
    color: var(--muted); font-weight: 600; font-size: 13.5px; text-decoration: none; border: 0; background: none; text-align: left; width: 100%;
    & svg { width: 16px; height: 16px; flex: none; }
    &:hover { color: var(--fg); background: var(--surface); }
    &[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
  }
  .sb-label { font-family: var(--mono); font-size: 10.5px; color: var(--faint); padding: 18px 10px 6px; letter-spacing: .06em; }
  .sb-empty { padding: 2px 10px 6px; font-size: 12.5px; color: var(--faint); }
  .sb-subject { color: var(--fg-2); }
  .sb-subject-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-count { font-family: var(--mono); font-size: 11.5px; color: var(--due); }
  .sb-foot { margin-top: auto; display: grid; gap: 6px; }
  .sb-search {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
    color: var(--muted); font-size: 12.5px; text-align: left;
    &:hover { color: var(--fg); border-color: var(--line-2); }
  }
  .avatar {
    width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none;
    font-size: 11px; font-weight: 800; color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--line-2);
  }

  /* toasts */
  .toasts {
    position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    translate: -50% 0; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none;
  }
  .toast {
    pointer-events: auto; display: flex; align-items: center; gap: 12px;
    padding: 11px 14px 11px 16px; border-radius: var(--r-tile);
    background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-float);
    animation: toast-in var(--t) var(--ease-spring);
    & .dot { background: var(--bg); }
    &[data-tone="error"] .dot { background: var(--wrong); }
    &[data-tone="success"] .dot { background: var(--right); }
    & .toast-msg { flex: 1; }
    & button { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  }
  @keyframes toast-in { from { opacity: 0; translate: 0 8px; } }

  /* dialogs */
  dialog.modal {
    width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-card);
    background: var(--surface); color: var(--fg-2); box-shadow: var(--shadow-float);
    &::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); }
    &[open] { animation: pop var(--t) var(--ease-liquid); }
    & .modal-body { padding: 22px 22px 18px; display: grid; gap: 10px; }
    & h2 { font-size: 20px; }
    & .modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; flex-wrap: wrap; }
  }
  @keyframes pop { from { opacity: 0; scale: .97; } }

  /* command palette */
  dialog.palette {
    width: min(560px, calc(100vw - 32px)); margin-top: 12vh; padding: 0;
    border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); color: var(--fg-2);
    box-shadow: var(--shadow-float);
    &::backdrop { background: rgb(0 0 0 / .4); }
    & input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 16px 18px; font-size: 16px; color: var(--fg); }
    & input:focus-visible { outline: none; }
    & ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
    & li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
    & li[aria-selected="true"] { background: var(--surface-2); color: var(--fg); }
    & li .hint { font-weight: 400; font-size: 12.5px; color: var(--muted); }
    & .palette-empty { padding: 14px 18px; color: var(--muted); font-size: 14px; }
  }

  /* rows: label/value lists */
  .rows { display: grid; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
  .row { display: flex; align-items: center; gap: 12px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .row:last-child { border-bottom: 0; }
  .row .row-main { flex: 1 1 240px; min-width: 0; }
  .row .row-title { color: var(--fg); font-weight: 700; font-size: 14.5px; }
  .row .row-sub { color: var(--muted); font-size: 13px; }

  /* meter */
  .meter { position: relative; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
  .meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--known); width: var(--v, 0%); transition: width var(--t) var(--ease-liquid); }
  .meter.due > i { background: var(--due); }

  /* rich text from markdown (sanitized) */
  .rich { overflow-wrap: anywhere; }
  .rich > * + * { margin-top: .75em; }
  .rich pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--r-input); background: var(--surface-2); }
  .rich code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
  .rich pre code { background: none; padding: 0; }
  .rich .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
}