/* ============================================================
   Family Ticket Tracker — Material 3 theme
   All assets local: Roboto (vendored woff2) + Material Symbols sprite.
   ============================================================ */

/* ---------- Roboto (local) ---------- */
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/roboto/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../vendor/roboto/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../vendor/roboto/roboto-latin-700-normal.woff2") format("woff2");
}

/* ---------- Design tokens (Material 3 baseline) ---------- */
:root {
  --md-primary: #0b57d0;
  --md-on-primary: #ffffff;
  --md-primary-container: #d6e3ff;
  --md-on-primary-container: #001b3f;
  --md-secondary-container: #dae2f9;
  --md-on-secondary-container: #141c2b;
  --md-tertiary-container: #c6e7ff;
  --md-on-tertiary-container: #001e30;
  /* page background: very light cream; cards sit on top in white */
  --md-surface: #faf9f4;
  --md-surface-container-low: #ffffff;
  --md-surface-container: #f4f3ec;
  --md-surface-container-high: #eeede5;
  --md-surface-container-highest: #e8e7df;
  --md-on-surface: #1a1c1e;
  --md-on-surface-variant: #44474e;
  --md-outline: #74777f;
  --md-outline-variant: #c5c6cf;
  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-success: #2e6b3e;
  --md-success-container: #b6f2c4;
  --md-on-success-container: #072711;
  --md-warning-container: #ffdea8;
  --md-on-warning-container: #2a1800;
  --md-warning: #b26a00;
  --md-inverse-surface: #2f3033;
  --md-inverse-on-surface: #f1f0ec;

  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-full: 999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: 64px;
  --navbar-h: 80px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #a8c7fa;
    --md-on-primary: #062e6f;
    --md-primary-container: #284777;
    --md-on-primary-container: #d6e3ff;
    --md-secondary-container: #3b4858;
    --md-on-secondary-container: #dae2f9;
    --md-tertiary-container: #0e4a63;
    --md-on-tertiary-container: #c6e7ff;
    --md-surface: #121316;
    --md-surface-container-low: #1b1b1f;
    --md-surface-container: #1f1f23;
    --md-surface-container-high: #2a2a2e;
    --md-surface-container-highest: #353438;
    --md-on-surface: #e3e2e6;
    --md-on-surface-variant: #c5c6cf;
    --md-outline: #8e9099;
    --md-outline-variant: #44474e;
    --md-error: #f2b8b5;
    --md-on-error: #601410;
    --md-error-container: #8c1d18;
    --md-on-error-container: #f9dedc;
    --md-success: #8fd89f;
    --md-success-container: #1f4a2c;
    --md-on-success-container: #b6f2c4;
    --md-warning-container: #5c4200;
    --md-on-warning-container: #ffdea8;
    --md-warning: #f2b872;
    --md-inverse-surface: #e6e0e9;
    --md-inverse-on-surface: #322f35;
    --md-elev-1: 0 1px 3px rgba(0,0,0,.6);
    --md-elev-2: 0 2px 6px rgba(0,0,0,.6);
    --md-elev-3: 0 4px 10px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--md-surface); color: var(--md-on-surface);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Material icons (local sprite) ---------- */
.mi { width: 24px; height: 24px; fill: currentColor; display: inline-block; vertical-align: middle; flex: none; }
.mi-18 { width: 18px; height: 18px; }
.mi-20 { width: 20px; height: 20px; }

/* ---------- Ripple ---------- */
.ripple-ink {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: currentColor; opacity: .22; pointer-events: none;
  animation: ripple .5s linear; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Top app bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) 8px 0 16px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--md-on-surface); font-weight: 500; font-size: 1.25rem; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--md-primary); color: var(--md-on-primary); }
.brand-mark .mi { width: 22px; height: 22px; }
.topbar-actions { display: flex; align-items: center; gap: 4px; }

.iconbtn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: transparent; border: none; color: var(--md-on-surface-variant);
  cursor: pointer; transition: background .15s; }
.iconbtn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); text-decoration: none; }

.badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full); background: var(--md-error); color: var(--md-on-error);
  font-size: 11px; font-weight: 500; line-height: 16px; text-align: center; }
.badge.hidden { display: none; }
/* The `hidden` attribute must always win, even over components that set their
   own `display` (e.g. .btn). Without this, a server-rendered `hidden` control
   like the "show more" toggle would show as an empty button until JS runs. */
[hidden] { display: none !important; }

.menu { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: 52px; min-width: 220px; padding: 8px;
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  border-radius: var(--r-md); box-shadow: var(--md-elev-2);
  display: flex; flex-direction: column; gap: 2px; z-index: 40; }
.menu-panel[hidden] { display: none; }
.menu-panel a, .menu-panel .linklike {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: var(--r-sm);
  color: var(--md-on-surface); background: none; border: none; text-align: left;
  font: inherit; width: 100%; cursor: pointer; }
.menu-panel a:hover, .menu-panel .linklike:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); text-decoration: none; }
.menu-panel .mi { color: var(--md-on-surface-variant); }
.menu-panel form { margin: 0; }

/* ---------- Language (flag) switcher ---------- */
.lang-switch { display: inline-flex; gap: 2px; margin: 0; }
.lang {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 6px 7px; border-radius: var(--r-full);
  opacity: 0.4; filter: grayscale(0.5); transition: opacity .15s, background .15s, filter .15s;
}
.lang:hover { opacity: 0.85; background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.lang.active { opacity: 1; filter: none; }

/* ---------- Layout ---------- */
.container {
  max-width: 840px; margin: 0 auto;
  padding: 20px 16px calc(var(--navbar-h) + var(--safe-bottom) + 96px); }
@media (min-width: 768px) { .container { padding-bottom: 48px; } }

h1 { font-size: 1.5rem; font-weight: 400; margin: 4px 0 20px; letter-spacing: 0; }
h2 { font-size: 1.125rem; font-weight: 500; margin: 28px 0 12px; }

/* ---------- Cards (elevated) ---------- */
.card {
  background: var(--md-surface-container-low); border-radius: var(--r-md);
  box-shadow: var(--md-elev-1); padding: 20px; margin-bottom: 16px; }

/* ---------- Ticket rows (as list items in a card feel) ---------- */
.ticket-row {
  position: relative; overflow: hidden; display: block;
  background: var(--md-surface-container-low); border-radius: var(--r-md);
  box-shadow: var(--md-elev-1); padding: 16px 18px; margin-bottom: 12px;
  color: var(--md-on-surface); transition: box-shadow .15s; }
.ticket-row:hover { text-decoration: none; box-shadow: var(--md-elev-2); }
.ticket-row .row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-title { font-weight: 500; flex: 1 1 auto; min-width: 0; }
.ticket-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--md-on-surface-variant); font-size: 0.85rem; margin-top: 8px; align-items: center; }
.ticket-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ticket-meta .mi { width: 16px; height: 16px; }
.ticket-meta .overdue { color: var(--md-error); font-weight: 500; }
.ticket-meta .due-soon { color: var(--md-warning); font-weight: 500; }
.ticket-row.row-overdue {
  border-left: 4px solid var(--md-error);
  background: var(--md-error-container);
  background: color-mix(in srgb, var(--md-error-container) 45%, var(--md-surface-container-low));
}
.ticket-row.row-due-soon {
  border-left: 4px solid var(--md-warning);
  background: var(--md-warning-container);
  background: color-mix(in srgb, var(--md-warning-container) 45%, var(--md-surface-container-low));
}
.chip.due-overdue { background: var(--md-error-container); color: var(--md-on-error-container); }
.chip.due-soon { background: var(--md-warning-container); color: var(--md-on-warning-container); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-sm);
  font-size: 0.75rem; font-weight: 500; white-space: nowrap; line-height: 1.2;
  background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.chip.status-open { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.chip.status-in_progress { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.chip.status-blocked { background: var(--md-error-container); color: var(--md-on-error-container); }
.chip.status-done { background: var(--md-success-container); color: var(--md-on-success-container); }
.chip.prio-urgent { background: var(--md-error-container); color: var(--md-on-error-container); }
.chip.prio-high { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.chip.prio-normal, .chip.prio-low { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.chip.source-email { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* ---------- Text fields (outlined) ---------- */
label { display: block; font-weight: 500; font-size: 0.875rem; margin-bottom: 6px; color: var(--md-on-surface-variant); }
input, textarea, select {
  width: 100%; padding: 14px 16px;
  background: var(--md-surface); color: var(--md-on-surface);
  border: 1px solid var(--md-outline); border-radius: var(--r-sm);
  font: inherit; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary); }
input[type="file"] { padding: 10px 12px; border-style: dashed; }
input[type="checkbox"] { width: auto; accent-color: var(--md-primary); }
.field { margin-bottom: 18px; }
.field .help { color: var(--md-on-surface-variant); font-size: 0.8rem; margin-top: 6px; }
.field.checkbox { display: flex; align-items: center; gap: 10px; }
.field.checkbox label { margin: 0; color: var(--md-on-surface); }
.errorlist { color: var(--md-error); font-size: 0.85rem; list-style: none; padding: 0; margin: 6px 0 0; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 24px; border-radius: var(--r-full);
  border: 1px solid var(--md-outline); background: transparent; color: var(--md-primary);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; letter-spacing: .01em;
  transition: background .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.btn .mi { width: 18px; height: 18px; }
.btn-sm { min-height: 32px; padding: 0 16px; font-size: 0.8rem; }
.btn-primary { background: var(--md-primary); color: var(--md-on-primary); border-color: transparent; }
.btn-primary:hover { background: var(--md-primary); box-shadow: var(--md-elev-1); }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.btn-tonal:hover { background: var(--md-secondary-container); box-shadow: var(--md-elev-1); }
.btn-danger { background: var(--md-error); color: var(--md-on-error); border-color: transparent; }
.btn-danger:hover { background: var(--md-error); box-shadow: var(--md-elev-1); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.btn-row select, .btn-row input { width: auto; }

/* ---------- FAB (speed dial) ---------- */
.fab-group {
  position: fixed; right: 16px; z-index: 25;
  bottom: calc(var(--navbar-h) + var(--safe-bottom) + 16px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (min-width: 768px) { .fab-group { bottom: 32px; right: 32px; } }

.fab {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; border: none; border-radius: var(--r-lg);
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  box-shadow: var(--md-elev-3); cursor: pointer; }
.fab:hover { text-decoration: none; filter: brightness(1.03); }
.fab .mi { width: 24px; height: 24px; transition: transform .2s ease; }
.fab-group.open .fab .mi { transform: rotate(45deg); }

.fab-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.fab-actions[hidden] { display: none; }
.fab-action { display: flex; align-items: center; gap: 12px; color: var(--md-on-surface); }
.fab-action:hover { text-decoration: none; }
.fab-action-label {
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  padding: 6px 12px; border-radius: var(--r-sm); box-shadow: var(--md-elev-1);
  font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.fab-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  box-shadow: var(--md-elev-2); }
.fab-mini .mi { width: 22px; height: 22px; }

/* ---------- Snackbar-style messages ---------- */
.messages { margin-bottom: 16px; }
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-md); margin-bottom: 10px;
  background: var(--md-surface-container-high); color: var(--md-on-surface); word-break: break-word; }
.alert-success { background: var(--md-success-container); color: var(--md-on-success-container); }
.alert-error { background: var(--md-error-container); color: var(--md-on-error-container); }
.alert-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters select, .filters input { width: auto; flex: 1 1 auto; min-width: 130px; }

/* ---------- Timeline / comments / reminders ---------- */
/* ---------- Status transition buttons (detail view) ---------- */
.status-now { margin: 12px 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Detail top bar: Back | (centred transition buttons) | Edit/Delete.
   Mobile: Back + Edit/Delete share the top row, transitions centred below. */
.detail-topbar { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 10px; margin-bottom: 16px; }
.detail-topbar .topbar-back { grid-area: 1 / 1; justify-self: start; }
.detail-topbar .topbar-actions { grid-area: 1 / 2; justify-self: end; }
.detail-topbar .topbar-center { grid-area: 2 / 1 / 3 / 3; justify-content: center; }
@media (min-width: 768px) {
  .detail-topbar { grid-template-columns: 1fr auto 1fr; }
  .detail-topbar .topbar-back,
  .detail-topbar .topbar-actions { grid-area: auto; }
  .detail-topbar .topbar-center { grid-area: auto; justify-self: center; }
}
.status-btn.status-open { --sb-bg: var(--md-secondary-container); --sb-fg: var(--md-on-secondary-container); }
.status-btn.status-in_progress { --sb-bg: var(--md-warning-container); --sb-fg: var(--md-on-warning-container); }
.status-btn.status-blocked { --sb-bg: var(--md-error-container); --sb-fg: var(--md-on-error-container); }
.status-btn.status-done { --sb-bg: var(--md-success-container); --sb-fg: var(--md-on-success-container); }
.status-btn { background: var(--sb-bg); color: var(--sb-fg); border-color: transparent; }
.status-btn:hover { background: var(--sb-bg); box-shadow: var(--md-elev-1); }

.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.comment .comment-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; color: var(--md-on-surface-variant); font-size: 0.82rem; }
.comment .comment-head .comment-author { font-weight: 600; color: var(--md-on-surface); }
.comment .comment-body { margin-top: 6px; }
.comment.system { background: transparent; border-style: dashed; }
.comment.system .comment-body { color: var(--md-on-surface-variant); font-style: italic; }
/* Each reminder / attachment / history row is its own bordered box inside the
   card ("box in a box") for clearer visual separation. */
.reminder-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-md);
}
.reminder-item:last-child { margin-bottom: 0; }
.reminder-item.sent { color: var(--md-on-surface-variant); opacity: 0.8; }

.description { white-space: pre-wrap; word-break: break-word; }
.muted { color: var(--md-on-surface-variant); }
.small { font-size: 0.85rem; }
.stack > * + * { margin-top: 14px; }
.inline-form { display: inline; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.empty { text-align: center; color: var(--md-on-surface-variant); padding: 56px 16px; }

/* Top-of-page navigation/back row: consistent 16px gap to the content that
   follows. When a header row (.spread with an <h1>) comes next, drop the h1's
   own top margin so the gap stays 16px instead of stacking to ~20px. */
.page-nav { margin-bottom: 16px; }
.page-nav + .spread h1 { margin-top: 0; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.pagination [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.pagination .muted { margin: 0 4px; }

/* ---------- Navigation bar (bottom, mobile) ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-around; align-items: flex-start;
  height: calc(var(--navbar-h) + var(--safe-bottom));
  padding: 12px 0 var(--safe-bottom);
  background: var(--md-surface-container); }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1; color: var(--md-on-surface-variant); font-size: 0.7rem; font-weight: 500; }
.tab:hover { text-decoration: none; }
.tab .tab-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 32px; border-radius: var(--r-lg); transition: background .2s; }
.tab.active { color: var(--md-on-surface); }
.tab.active .tab-icon { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.tab .badge { top: -2px; right: 12px; }
@media (min-width: 768px) { .tabbar { display: none; } }

/* ---------- Rendered rich text (descriptions) ---------- */
.richtext { line-height: 1.6; word-break: break-word; }
.richtext > *:first-child { margin-top: 0; }
.richtext > *:last-child { margin-bottom: 0; }
.richtext p { margin: 0 0 10px; }
.richtext h1 { font-size: 1.3rem; margin: 14px 0 8px; }
.richtext h2 { font-size: 1.15rem; margin: 14px 0 8px; }
.richtext h3 { font-size: 1.02rem; margin: 12px 0 6px; }
.richtext ul, .richtext ol { margin: 0 0 10px; padding-left: 1.5em; }
.richtext ol { counter-reset: ql-list; }
.richtext ol li[data-list] { list-style: none; position: relative; }
.richtext ol li[data-list="bullet"]::before { content: "•"; position: absolute; left: -1.1em; }
.richtext ol li[data-list="ordered"] { counter-increment: ql-list; }
.richtext ol li[data-list="ordered"]::before { content: counter(ql-list) "."; position: absolute; left: -1.5em; }
.richtext .ql-ui { display: none; }
.richtext .ql-code-block-container {
  background: var(--md-surface-container-high); border-radius: var(--r-sm);
  padding: 10px 12px; margin: 0 0 10px; overflow-x: auto; }
.richtext .ql-code-block { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.richtext blockquote {
  margin: 0 0 10px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--md-outline-variant); color: var(--md-on-surface-variant); }
.richtext pre { background: var(--md-surface-container-high); border-radius: var(--r-sm); padding: 10px 12px; overflow-x: auto; margin: 0 0 10px; }
.richtext code { background: var(--md-surface-container-high); border-radius: 6px; padding: 1px 5px; font-size: 0.9em; }

/* ---------- Expandable ("show more") description ---------- */
.richtext.clamped {
  max-height: 260px;   /* keep in sync with CLAMP_MAX_PX in app.js */
  overflow: hidden;
  position: relative;
}
.richtext.clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em;
  background: linear-gradient(transparent, var(--md-surface-container-low));
  pointer-events: none;
}
.btn-clamp { margin-top: 8px; }

/* ---------- Collapsible section (<details>) ---------- */
.collapsible { margin: 28px 0 0; }
.collapsible > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 1.125rem; font-weight: 500;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary .collapse-caret { transition: transform .15s; color: var(--md-on-surface-variant); }
.collapsible[open] > summary .collapse-caret { transform: rotate(90deg); }
.collapsible[open] > summary .count-badge { display: none; }
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full);
  background: var(--md-primary); color: var(--md-on-primary);
  font-size: 0.78rem; font-weight: 600; line-height: 1;
}
.richtext pre code { background: none; padding: 0; }
.richtext a { text-decoration: underline; }

/* ---------- Quill editor ---------- */
.quill-wrapper { margin-bottom: 6px; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--md-outline-variant); }
.ql-toolbar.ql-snow { border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--md-surface-container); }
.ql-container.ql-snow { border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--md-surface); }
.ql-editor { min-height: 160px; font-size: 1rem; color: var(--md-on-surface); }
.ql-editor.ql-blank::before { color: var(--md-on-surface-variant); }
.ql-snow .ql-stroke { stroke: var(--md-on-surface-variant); }
.ql-snow .ql-fill { fill: var(--md-on-surface-variant); }
.ql-snow .ql-picker { color: var(--md-on-surface-variant); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--md-primary); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--md-primary); }
@media (prefers-color-scheme: dark) {
  .ql-snow .ql-picker-options { background: var(--md-surface-container-high); border-color: var(--md-outline-variant); }
}