/*
  HALIA Core Components — Phase A
  Canonical classes: .btn(-*), .input, .badge(-*), .avatar, .card, .alert(-*), .skeleton(-*),
  .empty-state, .toast-region/.toast, .dialog, .tabs/.tab, .menu, .pagination.
  "Compatibility" blocks map existing markup onto the same parts; selectors there use :where()
  so every canonical modifier still wins. Colors come from tokens only (no raw hex here).
*/
@layer components {

  /* ---------- Focus: one rule for every interactive element ---------- */
  :focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
  .theme-control label:has(input:focus-visible) {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  /* ---------- Typography helpers ---------- */
  .text-display { font: var(--text-display); letter-spacing: var(--tracking-display); }
  .text-h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
  .text-h2 { font: var(--text-h2); letter-spacing: var(--tracking-h2); }
  .text-h3 { font: var(--text-h3); }
  .text-body-lg { font: var(--text-body-lg); }
  .text-body { font: var(--text-body); }
  .text-body-sm { font: var(--text-body-sm); }
  .text-label { font: var(--text-label); }
  .text-caption { font: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--text-muted); }
  .text-overline { font: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-muted); }
  .text-secondary { color: var(--text-secondary); }
  .text-muted { color: var(--text-muted); }

  /* ---------- Button ---------- */
  .btn,
  :where(.community button:not(.notification-entry), .community .btn, .notification-read-all, .notification-pagination button) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-md);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font: var(--text-label);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
  }
  .btn { white-space: nowrap; }
  :where(.community .message-results button, .community .image-preview button) { white-space: normal; }

  /* Variants */
  .btn-primary, .primary, :where(.community) :where(button.primary, .btn.primary) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .btn-secondary {
    background: var(--surface);
    border-color: var(--border-default);
    color: var(--text-primary);
  }
  .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
  }
  .btn-danger, :where(.community) button[type="submit"].danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-danger);
  }
  .btn-danger-ghost, :where(.community) :where(button.danger:not([type="submit"]), .btn.danger) {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
  }
  .btn-icon {
    width: var(--control-md);
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
  }

  /* Sizes */
  .btn-sm, :where(.community .comment button, .community .editor-tools button, .community td button) {
    min-height: var(--control-sm);
    padding: 0 var(--space-3);
    font-size: 13px;
  }
  .btn-sm.btn-icon { width: var(--control-sm); padding: 0; }
  .btn-lg { min-height: var(--control-lg); padding: 0 var(--space-5); font-size: 15px; }
  .btn-lg.btn-icon { width: var(--control-lg); padding: 0; }
  .btn-block { display: flex; width: 100%; }
  /* 32px controls keep a 44px vertical hit area. */
  .btn-sm::before, :where(.community .comment button, .community .editor-tools button, .community td button)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--hit-min);
    transform: translateY(-50%);
  }

  /* Hover only for real hover devices; no lift. */
  @media (hover: hover) {
    .btn:hover, :where(.community button:not(.notification-entry), .community .btn, .notification-read-all, .notification-pagination button):hover {
      background: var(--surface-hover);
      border-color: var(--border-strong);
    }
    .btn-primary:hover, .primary:hover, :where(.community) :where(button.primary, .btn.primary):hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      color: var(--on-accent);
    }
    .btn-ghost:hover, .btn-icon:hover {
      background: var(--surface-hover);
      border-color: transparent;
      color: var(--text-primary);
    }
    .btn-danger:hover, :where(.community) button[type="submit"].danger:hover {
      background: var(--danger-hover);
      border-color: var(--danger-hover);
      color: var(--on-danger);
    }
    .btn-danger-ghost:hover, :where(.community) :where(button.danger:not([type="submit"]), .btn.danger):hover {
      background: var(--danger-subtle);
      border-color: transparent;
      color: var(--danger);
    }
  }
  .btn:active:not(:disabled):not([aria-busy="true"]),
  :where(.community button:not(.notification-entry), .community .btn):active:not(:disabled):not([aria-busy="true"]) {
    transform: scale(.98);
  }

  /* Disabled vs loading are different states. */
  .btn:disabled, .btn[aria-disabled="true"],
  :where(.community button:not(.notification-entry), .notification-read-all, .notification-pagination button):disabled {
    opacity: .45;
    cursor: not-allowed;
  }
  :where(.community button, .notification-read-all, .notification-panel button, .notification-center button, .menu-panel button):disabled {
    cursor: not-allowed;
  }
  .btn[aria-busy="true"],
  :where(.community button, .notification-read-all)[aria-busy="true"] {
    opacity: .85;
    cursor: progress;
  }
  .btn[aria-busy="true"]::after,
  :where(.community button, .notification-read-all)[aria-busy="true"]::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: halia-spin .7s linear infinite;
  }
  @keyframes halia-spin { to { transform: rotate(360deg); } }

  @media (pointer: coarse) {
    .btn, :where(.community button:not(.notification-entry), .community .btn, .notification-read-all, .notification-pagination button) {
      min-height: var(--hit-min);
    }
    .btn-sm, :where(.community .comment button, .community .editor-tools button, .community td button) {
      min-height: var(--control-sm);
    }
  }

  /* ---------- Form controls ---------- */
  .input,
  :where(.community) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    padding: 8px var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 24px;
    transition: border-color var(--dur-fast) var(--ease-standard);
  }
  /* Height: inputs/selects get the control height; textareas keep their page-specific min-heights (legacy layer). */
  input.input, select.input, :where(.community) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) { min-height: var(--control-md); }
  textarea.input { min-height: 120px; }
  :where(.community) #post-body { border-top-left-radius: 0; border-top-right-radius: 0; }
  textarea.input, :where(.community) textarea { line-height: 1.7; padding-block: 10px; }
  .input-lg { min-height: var(--control-lg); }
  .input:hover, :where(.community) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):hover {
    border-color: var(--text-muted);
  }
  .input:focus-visible, .input:focus,
  :where(.community) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
    border-color: var(--accent);
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: 1px;
    box-shadow: none;
  }
  .input[aria-invalid="true"], .input.is-invalid,
  :where(.community) :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
  }
  .input[aria-invalid="true"]:focus, :where(.community) :where(input, select, textarea)[aria-invalid="true"]:focus {
    outline-color: var(--danger);
  }
  .input:disabled, :where(.community) :where(input, select, textarea):disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
  }
  .input::placeholder, :where(.community) :where(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
  .field-error { display: block; margin-top: var(--space-1); font: var(--text-caption); color: var(--danger); }
  .field-hint { display: block; margin-top: var(--space-1); font: var(--text-caption); color: var(--text-muted); }
  .form-label { display: block; margin: 0 0 6px; font: var(--text-label); color: var(--text-primary); }

  /* Checkbox / radio */
  .checkbox, .radio,
  :where(.community) input[type="checkbox"]:not(.setting-switch) {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
  }
  /* Toggle (existing .setting-switch markup, role="switch") */
  .toggle, :where(.community) input[type="checkbox"].setting-switch {
    border-color: var(--border-strong);
    background: var(--bg-secondary);
  }
  .toggle:checked, :where(.community) input[type="checkbox"].setting-switch:checked {
    background: var(--accent);
    border-color: var(--accent);
  }
  :where(.community) .setting-switch::before { background: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
  :where(.community) .setting-switch:checked::before { background: var(--on-accent); }

  /* ---------- Badge ---------- */
  .badge, :where(.community .badge, .community .post-tags .badge) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 22px;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--accent-subtle);
    color: var(--accent);
    font: var(--text-caption);
    font-weight: 600;
    line-height: 20px;
    vertical-align: middle;
  }
  .badge-neutral { background: var(--bg-secondary); color: var(--text-secondary); }
  .badge-accent { background: var(--accent-subtle); color: var(--accent); }
  .badge-success { background: var(--success-subtle); color: var(--success); }
  .badge-warning { background: var(--warning-subtle); color: var(--warning); }
  .badge-danger { background: var(--danger-subtle); color: var(--danger); }
  .badge-info { background: var(--info-subtle); color: var(--info); }
  .badge-solid { background: var(--accent); color: var(--on-accent); }
  .badge-pill { border-radius: var(--radius-pill); }
  .notification-badge {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
  }

  /* ---------- Avatar ---------- */
  .avatar, :where(.member-avatar, .home-avatar) {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 700;
    vertical-align: middle;
  }
  .avatar { width: 32px; height: 32px; font-size: 13px; }
  .avatar img, :where(.member-avatar, .home-avatar) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .avatar-xs { width: 20px; height: 20px; font-size: 11px; }
  .avatar-sm { width: 24px; height: 24px; font-size: 12px; }
  .avatar-md { width: 32px; height: 32px; font-size: 13px; }
  .avatar-lg { width: 40px; height: 40px; font-size: 15px; }
  .avatar-xl { width: 64px; height: 64px; font-size: 22px; }

  /* ---------- Card / panel ---------- */
  .card, :where(.community .panel) {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  .card { padding: var(--space-6); }
  .card-interactive { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
  @media (hover: hover) {
    .card-interactive:hover { background: var(--surface-hover); border-color: var(--border-default); }
  }
  .card-sunken { background: var(--bg-secondary); border-color: transparent; }

  /* ---------- Inline alert ---------- */
  .alert, :where(.community .notice) {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: var(--text-body-sm);
    line-height: 1.7;
  }
  .alert-title { display: block; margin: 0 0 2px; font: var(--text-label); }
  .alert-info { background: var(--info-subtle); border-color: transparent; }
  .alert-success { background: var(--success-subtle); border-color: transparent; }
  .alert-warning { background: var(--warning-subtle); border-color: transparent; }
  .alert-danger, :where(.community .notice.error) { background: var(--danger-subtle); border-color: transparent; color: var(--text-primary); }
  .alert-info .alert-title { color: var(--info); }
  .alert-success .alert-title { color: var(--success); }
  .alert-warning .alert-title { color: var(--warning); }
  .alert-danger .alert-title { color: var(--danger); }
  :where(.community .status) { color: var(--accent); }
  :where(.community .status.error, .community .error:not(.notice)) { color: var(--danger); }
  :where(.community .danger:not(button):not(.btn)) { color: var(--danger); }

  /* ---------- Skeleton ---------- */
  .skeleton {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-shine) 50%, var(--skeleton-base) 100%) 0 0 / 200% 100%;
    animation: halia-shimmer 1.2s linear infinite;
  }
  .skeleton-text { height: 12px; margin: 6px 0; }
  .skeleton-text:last-child { width: 60%; }
  .skeleton-title { height: 20px; width: 55%; margin: 4px 0 12px; }
  .skeleton-avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); flex: none; }
  .skeleton-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
  .skeleton-row > .skeleton-lines { flex: 1; }
  .skeleton-card { padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
  @keyframes halia-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

  /* ---------- Empty state ---------- */
  .empty-state, :where(.community .empty) {
    padding: var(--space-8) var(--space-4);
    color: var(--text-secondary);
    text-align: left;
  }
  .empty-state-title, :where(.community .empty) h2 { margin: 0 0 var(--space-1); font: var(--text-h3); color: var(--text-primary); }
  .empty-state-text, :where(.community .empty) p { margin: 0; font: var(--text-body-sm); color: var(--text-secondary); }
  .empty-state-action { margin-top: var(--space-4); }
  .empty-state-page, :where(.community .board-list > .empty) { padding: var(--space-16) var(--space-4); text-align: center; }
  .empty-state-page .empty-state-action { display: flex; justify-content: center; }
  .empty-state-inline { padding: var(--space-3) 0; }
  .empty-state-inline .empty-state-title { font: var(--text-body-sm); color: var(--text-secondary); }

  /* ---------- Toast ---------- */
  .toast-region {
    position: fixed;
    z-index: var(--z-toast);
    right: var(--space-6);
    bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    width: min(380px, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
  }
  .toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-2);
    font: var(--text-body-sm);
    pointer-events: auto;
  }
  .toast-message { flex: 1; min-width: 0; padding-top: 6px; overflow-wrap: anywhere; }
  .toast-success { border-left-color: var(--success); }
  .toast-error { border-left-color: var(--danger); }
  .toast-info { border-left-color: var(--info); }
  @media (max-width: 599px) {
    .toast-region { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); width: auto; align-items: stretch; }
  }

  /* ---------- Dialog (native <dialog>) ---------- */
  .dialog, :where(.community dialog) {
    width: calc(100% - 2 * var(--space-4));
    max-width: 440px;
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-3);
  }
  .dialog::backdrop, :where(.community dialog)::backdrop { background: var(--overlay); }
  .dialog h2, :where(.community dialog) h2 { margin: 0 0 var(--space-2); font: var(--text-h2); letter-spacing: var(--tracking-h2); }
  .dialog p, :where(.community dialog) p { margin: 0 0 var(--space-5); font: var(--text-body); color: var(--text-secondary); white-space: pre-wrap; }
  .dialog-actions, :where(.community dialog) form > .row:last-child {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  :where(.community dialog) label { margin-top: 0; }
  @media (max-width: 599px) {
    .dialog-actions, :where(.community dialog) form > .row:last-child { flex-direction: column; }
    .dialog-actions > *, :where(.community dialog) form > .row:last-child > * { width: 100%; }
  }

  /* ---------- Tabs (skin for existing admin tabs and list filters) ---------- */
  .tabs, :where(.community .tabs) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
  }
  .tab, :where(.community .tabs) button {
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: var(--text-label);
  }
  .tab[aria-selected="true"], .tab.is-active, :where(.community .tabs) button:is(.active, [aria-pressed="true"]),
  :where(.community .toolbar) .btn[aria-current="page"] {
    background: var(--accent-subtle);
    border-color: transparent;
    color: var(--accent);
  }
  @media (hover: hover) {
    .tab:hover, :where(.community .tabs) button:hover { background: var(--surface-hover); border-color: transparent; color: var(--text-primary); }
    .tab[aria-selected="true"]:hover, .tab.is-active:hover, :where(.community .tabs) button:is(.active, [aria-pressed="true"]):hover { background: var(--accent-subtle); color: var(--accent); }
  }

  /* ---------- Menu / dropdown skin ---------- */
  .menu, .menu-panel {
    padding: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-2);
  }
  .menu-item, .menu-panel a, .menu-panel button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-md);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: var(--text-body-sm);
    text-align: left;
    cursor: pointer;
  }
  @media (hover: hover) {
    .menu-item:hover, .menu-panel a:hover, .menu-panel button:hover { background: var(--surface-hover); }
  }
  .menu-divider, .menu-panel .menu-divider { margin: var(--space-1) 0; border-top: 1px solid var(--border-subtle); }
  .notification-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-2);
  }
  /* Unread must not rely on a 1.1:1 background alone: add an accent bar. */
  .notification-item.is-unread { background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); }

  /* ---------- Pagination ---------- */
  .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); }
  .pagination > :where(a, button) {
    min-width: var(--control-md);
    padding: 0 var(--space-3);
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
  }
  @media (hover: hover) {
    .pagination > :where(a, button):hover { border-color: transparent; background: var(--surface-hover); color: var(--text-primary); }
  }
  .pagination > [aria-current="page"], .pagination > .current,
  .pagination > [aria-current="page"]:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .pagination > span { color: var(--text-muted); padding: 0 var(--space-1); }

  /* ---------- Phase C shared parts: chips, avatars, section heads, cards ---------- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font: var(--text-caption);
    font-weight: 700;
    white-space: nowrap;
  }
  .chip .icon { width: 14px; height: 14px; }
  .chip-green { background: var(--tone-green-bg); color: var(--tone-green-fg); }
  .chip-blue { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
  .chip-purple { background: var(--tone-purple-bg); color: var(--tone-purple-fg); }
  .chip-pink { background: var(--tone-pink-bg); color: var(--tone-pink-fg); }
  .chip-red { background: var(--tone-red-bg); color: var(--tone-red-fg); }
  .chip-orange { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
  .chip-teal { background: var(--tone-teal-bg); color: var(--tone-teal-fg); }
  .chip-gray { background: var(--tone-gray-bg); color: var(--tone-gray-fg); }
  .chip-solid-red { background: var(--danger); color: var(--on-danger); }
  .chip-solid-green { background: var(--success); color: var(--on-accent); }

  .avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-mint-strong);
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
  }
  .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .avatar-xs { width: var(--avatar-xs); height: var(--avatar-xs); font-size: 11px; }
  .avatar-sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: 12px; }
  .avatar-md { width: var(--avatar-md); height: var(--avatar-md); font-size: 14px; }
  .avatar-lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: 18px; }
  .avatar-xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: 26px; }

  .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 32px;
  }
  .section-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-section); letter-spacing: -.01em; color: var(--text-primary); }
  .section-icon { display: inline-grid; place-items: center; color: var(--accent); }
  .section-more { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; font: var(--text-caption); font-size: 13px; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
  .section-more .icon { width: 16px; height: 16px; }
  @media (hover: hover) { .section-more:hover { color: var(--accent); } }

  .surface-card {
    min-width: 0;
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }
  .list-divided > * + * { border-top: 1px solid var(--border-subtle); }
  .meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font: var(--text-body-sm); color: var(--text-muted); }
  .meta-line > * + *::before { content: "·"; margin-right: 6px; color: var(--text-muted); }
  .stat-inline { display: inline-flex; align-items: center; gap: 4px; font: var(--text-body-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .stat-inline .icon { width: 18px; height: 18px; color: var(--text-secondary); }
  .icon-tile { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--surface-mint); color: var(--accent); }
  .icon-tile .icon { width: 24px; height: 24px; }
  .toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-primary);
    font: var(--text-label);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .toggle-chip small { font: var(--text-body-sm); color: var(--text-muted); }
  .toggle-chip[aria-current="page"], .toggle-chip[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, var(--accent-strong-start), var(--accent-strong-end)); color: var(--on-accent); }
  .toggle-chip[aria-current="page"] small, .toggle-chip[aria-pressed="true"] small { color: var(--on-accent); }
  @media (hover: hover) { .toggle-chip:not([aria-current="page"]):not([aria-pressed="true"]):hover { background: var(--surface-hover); } }
}