/* ============================================================
   GreenNode KB Authoring — Component styles (vanilla).
   Depends on design tokens in styles/tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* The `hidden` HTML attribute sets display:none in the UA stylesheet, but any
   component CSS that sets display: flex/grid/inline-* overrides it (CSS wins
   over UA). Force it back here so `hidden` always hides — otherwise an empty
   `.note[hidden]` shows up as a stray colored box, etc. */
[hidden] { display: none !important; }

/* UI chrome (nav, toolbar, rail, table headers, buttons, badges, chips, eyebrows,
   meta dt) is not selectable text — disable user-select + force default cursor
   so clicking these doesn't drop a blinking text caret (the OS I-beam + caret
   appearing on every click was reported as visually distracting). Real content
   surfaces (.zoho article render, table cell content, markdown editor, source
   block, modal body, form inputs) keep their default selectable behavior. */
.nav,
.toolbar, .toolbar-title,
.rail, .rail-head,
.h1, .eyebrow,
.btn, .chip, .badge, .badge-combo, .pinned-tag, .tag-soft, .status-pill, .count-pill,
.tool-btn,
.table thead th,
.meta-row dt,
.label, .hint, .save-gate, .empty-title, .empty-hint,
.bulk-bar, .bulk-progress li .b-state,
.modal-header h2 {
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
/* Re-enable text caret on actual inputs/clickable elements that override the above. */
.btn, .chip, .tool-btn, .rail-item { cursor: pointer; }
.btn:disabled { cursor: not-allowed; }
input, textarea, select, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- App shell ----
   .app needs a fixed height (not min-height) so the inner flex (.app-body → .content
   → .scroll) actually has a constrained box to overflow inside. With min-height the
   table region would push the whole page to scroll instead of scrolling internally,
   and the toolbar / rail would scroll out of view on long lists. Use 100dvh so the
   mobile viewport (which shrinks on URL-bar collapse) doesn't clip. */
.app { display: flex; flex-direction: column; height: 100dvh; }
.app-body { display: flex; flex: 1; min-height: 0; }
.content { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.scroll { flex: 1; overflow: auto; min-height: 0; }
.spacer { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--color-muted); }
.dim { color: var(--color-dim); }
.mono { font-family: var(--font-mono); }

/* ---- Nav / header ---- */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  height: 60px; padding: 0 var(--space-6); flex-shrink: 0;
  background: var(--color-nav);
  border-bottom: 1px solid var(--color-border);
  min-width: 0; /* allow inner flex children to shrink instead of pushing siblings off-screen */
}
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: 0 0 auto; }
.nav-logo { height: 22px; width: auto; display: block; }
.nav-sep { width: 1px; height: 20px; background: var(--color-border); flex: 0 0 auto; }
.nav-sub { font-size: var(--text-sm); color: var(--color-muted); font-weight: var(--weight-medium); }
/* nav-right: shrink-friendly + horizontal scroll fallback. With 7+ buttons
   (email, status, AI pill, log, help, settings, lang, theme), narrow screens
   would push buttons off-screen. min-width:0 + overflow-x:auto on the
   container lets it scroll horizontally as a last resort if the responsive
   hide rules below (which drop user-email, status-pill, etc.) still aren't
   enough. flex:1 1 auto + justify-content:flex-end keeps it right-aligned. */
.nav-right { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; max-width: 100%; }
.user-email { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; flex-shrink: 1; min-width: 0; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-accent-tint); color: var(--color-accent-text);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.02em;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* ---- Headings ---- */
.h1 { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-heading); margin: 0; }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-dim); }
.accent-text { color: var(--color-accent-text); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold);
  cursor: pointer; white-space: nowrap;
  text-decoration: none; /* normalize <a class="btn"> — browser default underline */
  transition: background .14s, border-color .14s, color .14s, transform .14s, box-shadow .14s;
}
.btn:hover { background: var(--color-accent-tint); color: var(--color-accent-text); border-color: var(--color-accent-tint); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .ti { font-size: var(--text-lg); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; box-shadow: 0 2px 8px rgba(13,177,75,0.22); }
.btn-primary:hover { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; box-shadow: 0 3px 10px rgba(13,177,75,0.28); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-muted); }
.btn-ghost:hover { background: var(--color-accent-tint); color: var(--color-accent-text); border-color: transparent; }
.btn-danger { background: transparent; border-color: var(--color-border); color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-tint); border-color: var(--color-danger-tint); color: var(--color-danger); }
.btn-sm { height: 30px; padding: 0 11px; font-size: var(--text-sm); }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-block { width: 100%; }

/* Soft-red pulse to nudge the user to set their Author ID (Settings gear). Stops
   once they Save an id (the `needs-author` class is dropped on re-render).
   2026-06-03 — see main.js renderNavRight. */
@keyframes needs-author-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-danger-tint); background: transparent; }
  50%      { box-shadow: 0 0 0 5px var(--color-danger-tint); background: var(--color-danger-tint); }
}
.btn.needs-author {
  color: var(--color-danger);
  border-color: var(--color-danger);
  animation: needs-author-pulse 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  /* No flashing for motion-sensitive users — keep a static soft-red ring instead. */
  .btn.needs-author { animation: none; box-shadow: 0 0 0 2px var(--color-danger-tint); }
}

/* ---- Form ---- */
.label { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.label .req { color: var(--color-danger); margin-left: 2px; }
.label .opt { color: var(--color-dim); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.field { margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--text-base); outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.input { height: 38px; padding: 0 12px; }
/* Small variant — pair with .input-sm / .select-sm for compact form rows
   (matches .btn-sm proportions; used in toolbar-secondary on Legacy view). */
.input-sm, .select-sm { height: 30px; padding: 0 10px; font-size: var(--text-sm); }
.select.select-sm { padding-right: 28px; background-position: right 8px center; }
.textarea { padding: 12px; line-height: var(--leading-relaxed); resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); }
.input::placeholder, .textarea::placeholder { color: var(--color-dim); }
.input.mono, .textarea.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.hint { font-size: var(--text-xs); color: var(--color-dim); margin-top: 4px; line-height: 1.45; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 38px; }
.input-suffix { position: absolute; right: 5px; width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent; color: var(--color-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.input-suffix:hover { color: var(--color-accent-text); background: var(--color-accent-tint); }
.select { height: 38px; padding: 0 32px 0 12px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E8480' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.section-head { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-dim); margin: var(--space-5) 0 var(--space-3); padding-bottom: 6px; border-bottom: 1px dashed var(--color-border); }
.section-head:first-child { margin-top: 0; }
.section-head .opt { text-transform: none; letter-spacing: 0; color: var(--color-dim); font-weight: var(--weight-medium); }

/* Switch */
.switch { appearance: none; width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--color-border); position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto; }
.switch:checked { background: var(--color-accent); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch:checked::after { transform: translateX(14px); }

/* Checkbox */
.check { appearance: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--color-border); background: var(--color-surface); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; transition: all .12s; position: relative; flex: 0 0 auto; }
.check:hover { border-color: var(--color-accent); }
.check:checked { background: var(--color-accent); border-color: transparent; }
.check:checked::after { content: ''; width: 8px; height: 4px; border-left: 2px solid var(--color-on-accent); border-bottom: 2px solid var(--color-on-accent); transform: rotate(-45deg) translate(.5px,-1px); }

/* ---- Card ---- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); }
.card-flat { background: var(--color-surface-2); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); }

/* ---- Note ---- */
.note { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--text-base); line-height: 1.45; border: 1px solid transparent; }
.note .ti { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.note-success { background: var(--color-accent-tint); border-color: var(--color-accent-tint); }
.note-success .ti { color: var(--color-accent-text); }
.note-warning { background: var(--color-warning-tint); border-color: var(--color-warning-border); }
.note-warning .ti { color: var(--color-warning); }
.note-danger { background: var(--color-danger-tint); border-color: var(--color-danger-tint); }
.note-danger .ti { color: var(--color-danger); }
.note-info { background: var(--color-info-tint); border-color: var(--color-info); }
.note-info .ti { color: var(--color-info); }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; border: 1px solid transparent; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-published { background: var(--color-accent-tint); color: var(--color-accent-text); }
.badge-success { background: var(--color-accent-tint); color: var(--color-accent-text); }
.badge-draft { background: var(--color-info-tint); color: var(--color-info); }
.badge-muted { background: var(--color-surface-2); color: var(--color-muted); border-color: var(--color-border); }
.badge-warning { background: var(--color-warning-tint); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-tint); color: var(--color-danger); }
.badge-legacy { background: var(--color-warning-tint); color: var(--color-warning); }
.badge-neutral { background: var(--color-surface-2); color: var(--color-muted); border-color: var(--color-border); }
.badge-combo { display: inline-flex; align-items: center; height: 22px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; overflow: hidden; }
.badge-combo .bucket { height: 100%; padding: 0 8px; display: inline-flex; align-items: center; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; font-weight: var(--weight-bold); }
.badge-combo .bucket-legacy { background: var(--color-warning-tint); color: var(--color-warning); }
.badge-combo .bucket-standard { background: var(--color-accent-tint); color: var(--color-accent-text); }
.badge-combo .b-status { padding: 0 9px; color: var(--color-muted); display: inline-flex; align-items: center; gap: 5px; }
.badge-combo .b-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge-combo .b-status.pub { color: var(--color-accent-text); }
.badge-combo .b-status.pub::before { background: var(--color-accent); }
.badge-combo .b-status.draft { color: var(--color-info); }
.badge-combo .b-status.draft::before { background: var(--color-info); }

/* ---- Chip / segmented / pinned tag ---- */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: transparent; color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; font-family: var(--font-sans); transition: all .14s; }
.chip:hover { color: var(--color-text); border-color: var(--color-dim); }
.chip.active { background: var(--color-accent-tint); color: var(--color-accent-text); border-color: var(--color-accent); }
.pinned-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--color-accent-tint); color: var(--color-accent-text); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.tag-soft { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.lang-toggle { display: inline-flex; gap: 2px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 3px; }
.lang-toggle button { height: 28px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
.lang-toggle button[aria-selected="true"] { background: var(--color-surface); color: var(--color-accent-text); box-shadow: var(--shadow-sm); }

/* ---- Search ---- */
.search { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 140px; max-width: 360px; }
.search .ti { position: absolute; left: 12px; color: var(--color-dim); font-size: var(--text-lg); pointer-events: none; }
.search input { width: 100%; height: 36px; padding: 0 12px 0 36px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); outline: none; transition: all .14s; }
.search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); }
.search input::placeholder { color: var(--color-dim); }

/* ---- Left rail ---- */
.rail { width: 224px; flex: 0 0 224px; border-right: 1px solid var(--color-border); background: var(--color-surface); overflow: auto; }
.rail-inner { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.rail-head { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-dim); padding: 0 10px 8px; margin: 0; }
.rail-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-item { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 10px; border-radius: var(--radius-md); border: 0; background: transparent; color: var(--color-muted); font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-medium); text-align: left; cursor: pointer; transition: all .12s; }
.rail-item:hover { background: var(--color-row-hover); color: var(--color-text); }
.rail-item[aria-current="true"] { background: var(--color-accent-tint); color: var(--color-accent-text); font-weight: var(--weight-bold); box-shadow: inset 0 0 0 1px var(--color-accent); }
.rail-item .ti { font-size: var(--text-lg); flex: 0 0 auto; }
.rail-item .count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-dim); font-weight: var(--weight-medium); }
.rail-item[aria-current="true"] .count { color: var(--color-accent-text); }
.rail-sub { list-style: none; margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 2px; }
.rail-sub .rail-item { font-size: var(--text-sm); height: 28px; }
.rail-group { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }

/* ---- Toolbar ---- */
/* flex-wrap allows items to overflow to a 2nd row on narrow viewports instead
   of pushing trailing buttons (Refresh, Write new KB) off-screen. row-gap
   ensures wrapped rows breathe. min-width:0 on title lets it shrink. */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); row-gap: var(--space-2); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.toolbar-title { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-light); color: var(--color-heading); margin: 0; min-width: 0; flex-shrink: 1; }
.toolbar-title .sub { color: var(--color-dim); font-weight: var(--weight-medium); font-size: var(--text-sm); margin-left: 8px; }
.toolbar.bulk { background: var(--color-accent-tint); }
.count-pill { background: var(--color-accent); color: var(--color-on-accent); height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-bold); display: inline-flex; align-items: center; box-shadow: 0 2px 6px rgba(13,177,75,0.30); }
.filters { display: flex; gap: 6px; }

/* ---- Table ---- */
/* overflow-x:auto: enables horizontal scroll when columns can't fit (cap min-width
   on cols + 7+ columns total = needs scroll under ~720px). The rounded corners
   are preserved by the border-radius+border combo. */
.table-wrap { border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
table.table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--text-base); }
.table thead th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-dim); font-weight: var(--weight-bold); padding: 12px 14px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); }
.table tbody td { padding: 14px; border-bottom: 1px solid var(--color-border-soft); vertical-align: middle; color: var(--color-text); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--color-row-hover); }
.table tbody tr[aria-selected="true"],
.table tbody tr.row-selected { background: var(--color-row-selected); }
.table .col-check { width: 40px; }
/* Bucket column: lock min-width to the widest possible state (the STANDARD+Draft
   badge-combo) so enrichment transitions LOADING → STANDARD don't reflow the
   table — pre-refactor all bucket badges were similar narrow widths so this
   wasn't needed; the new badge-combo is wider. */
.table .col-bucket { width: 160px; min-width: 160px; white-space: nowrap; }
.table .col-title a { color: var(--color-text); text-decoration: none; font-weight: var(--weight-semibold); }
.table .col-title a:hover { color: var(--color-accent-text); }
/* Modified column: reserve enough width for the longest relative-time string in
   either language ("a few seconds ago" / "vài giây trước" / "5 minutes ago" /
   "5 phút trước") so switching EN↔VN doesn't reflow the Title column. */
.table .col-modified { width: 150px; min-width: 150px; white-space: nowrap; }
.table .mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }

/* ---- Bulk bar (selection summary in the toolbar area) ---- */
/* flex-wrap so action buttons (Rewrite/Publish, Clear) drop to a 2nd row on
   narrow viewports instead of being clipped. */
.bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; row-gap: 8px; padding: 10px 14px; background: var(--color-accent-tint); border: 1px solid var(--color-accent); border-radius: var(--radius-md); font-size: var(--text-base); margin: 0 var(--space-6) var(--space-4); }
.bulk-bar .bulk-count { font-weight: var(--weight-bold); color: var(--color-accent-text); }
.bulk-bar .bulk-tpl { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-accent-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); border: 1px solid var(--color-border); }
.bulk-progress { margin: 0 var(--space-6) var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.bulk-counters { display: flex; gap: 16px; padding: 4px 8px 12px; border-bottom: 1px solid var(--color-border-soft); margin-bottom: 10px; font-size: var(--text-sm); color: var(--color-muted); flex-wrap: wrap; }
.bulk-counters .bcnt { display: inline-flex; align-items: baseline; gap: 4px; }
.bulk-counters .bcnt b { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }
.bulk-counters .bcnt-fail b { color: var(--color-danger); }
.bulk-counters .bcnt-total { margin-left: auto; }

/* "Has local draft" inline badge on Legacy KB rows — small green pill that
   doubles as a link to /kb/drafts. Distinguished from bucket badges by the
   bookmark icon. Sits next to the title (RULE-LIST-002 visual marker). */
.badge.badge-draft-mark { display: inline-flex; align-items: center; gap: 4px; background: var(--color-accent-tint); color: var(--color-accent-text); border: 1px solid var(--color-accent); font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.badge.badge-draft-mark:hover { background: var(--color-accent); color: var(--color-surface); }
.badge.badge-draft-mark .ti { font-size: 13px; }

/* Secondary toolbar row — same flex layout as main toolbar but with reduced
   vertical padding so it visually attaches to the row above. */
.toolbar-secondary { border-top: 0; padding-top: var(--space-3); padding-bottom: var(--space-3); gap: 10px; }
.bulk-progress ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bulk-progress li { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.bulk-progress li .b-state { width: 18px; text-align: center; }
.bulk-progress li.is-running { background: var(--color-row-hover); }
.bulk-progress li.is-done { color: var(--color-accent-text); }
.bulk-progress li.is-done-warn { color: var(--color-warning); }
.bulk-progress li.is-failed { color: var(--color-danger); }
.bulk-progress .bulk-summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-muted); }

/* ---- Empty state ---- */
.empty { text-align: center; padding: 64px 24px; color: var(--color-dim); }
.empty .ti { font-size: 40px; color: var(--color-accent); }
.empty-title { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-xl); color: var(--color-heading); margin: 10px 0 4px; }
.empty-hint { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: 12px; }

/* ---- Spinner ---- */
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-accent); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 0.8s linear infinite; display: inline-block; transform-origin: 50% 50%; }

/* ---- Skeleton cell (loading rows) ---- */
.skeleton-cell { display: inline-block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-row-hover) 50%, var(--color-surface-2) 100%); background-size: 200% 100%; animation: skel 1.2s linear infinite; vertical-align: middle; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Detail / editor scaffolding ---- */
.page { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-7); }
.page-wide { max-width: 1240px; }
.detail-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-4); }
.detail-head .h1 { font-size: var(--text-2xl); }
.detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-5); align-items: flex-start; }
.meta-row { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.meta-row dt { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-dim); }
.meta-row dd { margin: 0; font-size: var(--text-base); color: var(--color-text); }

.editor-shell { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-5); align-items: flex-start; }
.editor-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.editor-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.block { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-md); }
.block-head { padding: 12px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.block-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-heading); }
.block-title .ti { color: var(--color-accent-text); font-size: var(--text-lg); }
.block-pad { padding: 16px; }

.tpl-mode { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.tpl-mode-row { display: flex; align-items: center; gap: 9px; font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer; }

.editor-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.tool-btn { min-width: 32px; height: 32px; padding: 0 6px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--color-muted); cursor: pointer; display: inline-grid; place-items: center; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.tool-btn:hover { background: var(--color-row-hover); color: var(--color-text); }
.tool-sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 4px; }
.word-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-dim); }
.word-count.over { color: var(--color-danger); }

.editor-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; }
.md-textarea { border: 0; border-right: 1px solid var(--color-border); resize: none; outline: none; background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-base); line-height: var(--leading-relaxed); padding: 16px; }
.md-preview { overflow: auto; padding: 0; background: var(--color-surface-2); }
.source-editable { min-height: 120px; padding: 16px; background: var(--color-surface-2); outline: none; }

.validation { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.validation-head { padding: 8px 12px; font-size: var(--text-xs); font-weight: var(--weight-bold); display: flex; align-items: center; gap: 6px; }
.validation-head.warn { background: var(--color-warning-tint); color: var(--color-warning); }
.validation-head.err  { background: var(--color-danger-tint); color: var(--color-danger); }
.validation ul { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.validation li { display: flex; gap: 8px; font-size: var(--text-sm); line-height: 1.4; color: var(--color-text); }
.validation li .ti { flex: 0 0 auto; margin-top: 1px; }
.validation li.warn .ti { color: var(--color-warning); }
.validation li.err .ti  { color: var(--color-danger); }
.validation code { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-surface-2); padding: 1px 5px; border-radius: 3px; }

.save-gate { display: flex; gap: 9px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); }
.save-gate .ti { flex: 0 0 auto; margin-top: 1px; color: var(--color-dim); }
.save-stack { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.restore-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-warning-tint); border: 1px solid var(--color-warning-border); font-size: var(--text-base); margin-bottom: var(--space-4); }
.restore-banner .ti { color: var(--color-warning); font-size: var(--text-xl); }

/* Verify summary (free-mode optional check) */
.verify-summary { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-info-tint); border: 1px solid var(--color-info); font-size: var(--text-sm); }
.verify-summary-head { font-weight: var(--weight-bold); color: var(--color-info); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.verify-summary-body { color: var(--color-text); line-height: 1.45; }
.verify-ok { color: var(--color-accent-text); }
.verify-pending { color: var(--color-muted); }

/* details / summary */
.details { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.details > summary { padding: 10px 14px; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; color: var(--color-heading); }
.details > summary::-webkit-details-marker { display: none; }
.details > summary::before { content: '\203A'; font-size: var(--text-lg); color: var(--color-dim); transition: transform .15s; display: inline-block; }
.details[open] > summary::before { transform: rotate(90deg); }
.details > .details-body { padding: 0 14px 14px; }

/* ============================================================
   Zoho published-page render — ALWAYS white paper (theme-independent)
   ============================================================ */
.zoho { background: #FFFFFF; color: #1A1A1A; font-family: var(--font-sans); border: 1px solid #E0E0E0; border-radius: var(--radius-md); padding: 34px 40px; }
.zoho.flush { border: 0; border-radius: 0; }
.zoho .z-eyebrow { font-size: var(--text-xs); color: #666; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semibold); }
.zoho h1 { color: #0E9F4A; font-size: 26px; font-weight: var(--weight-bold); margin: 6px 0 4px; line-height: var(--leading-tight); }
.zoho .z-subtitle { color: #666; font-style: italic; font-size: var(--text-lg); }
.zoho hr { border: 0; border-top: 1px solid #E0E0E0; margin: 14px 0; }
.zoho h2 { color: #0CB04B; font-size: 18px; font-weight: var(--weight-bold); border-bottom: 1px solid #E0E0E0; padding-bottom: 5px; margin: 26px 0 10px; }
.zoho p { font-size: var(--text-lg); line-height: 1.6; color: #1A1A1A; margin: 0 0 12px; }
.zoho ul, .zoho ol { font-size: var(--text-lg); line-height: 1.6; color: #1A1A1A; margin: 0 0 12px; padding-left: 22px; }
.zoho li { margin-bottom: 5px; }
.zoho a { color: #0563C1; }
.zoho pre { background: #F5F5F5; padding: 12px 14px; border-radius: 4px; font-family: var(--font-mono); font-size: var(--text-base); color: #1A1A1A; overflow: auto; margin: 0 0 12px; }
.zoho code { font-family: var(--font-mono); font-size: var(--text-base); }
.zoho .z-note { background: #FFF8E1; border-left: 3px solid #F9A825; padding: 10px 14px; margin: 0 0 12px; font-size: var(--text-md); color: #1A1A1A; }

/* Theme toggle button keeps icon legible */
.theme-toggle .ti { font-size: var(--text-lg); }

/* Logo variant swap (pure CSS, follows [data-theme]) */
.nav-logo.logo-light { display: none; }
[data-theme="light"] .nav-logo.logo-dark { display: none; }
[data-theme="light"] .nav-logo.logo-light { display: block; }

/* ============================================================
   Modal overlay
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 9, 40, 0.55);
  display: grid; place-items: center;
  padding: var(--space-6);
  animation: modal-fade .15s ease-out;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%; max-width: 520px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--space-12));
}
.modal-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-heading); }
.modal-body { padding: var(--space-5); overflow: auto; color: var(--color-text); font-size: var(--text-base); line-height: var(--leading-normal); }
.modal-body p { margin: 0 0 var(--space-3); }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body code { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-surface-2); padding: 1px 5px; border-radius: 3px; }
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--color-border); }

/* ============================================================
   Toast stack
   ============================================================ */
.toast-stack {
  position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.toast {
  display: inline-flex; align-items: flex-start; gap: var(--space-2);
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-base);
  color: var(--color-text);
  pointer-events: auto;
  max-width: 420px;
  animation: toast-in .18s ease-out;
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast .ti { font-size: var(--text-lg); flex: 0 0 auto; margin-top: 1px; }
.toast .toast-msg { flex: 1; line-height: 1.4; }
.toast .toast-close { border: 0; background: transparent; color: var(--color-dim); font-size: 16px; cursor: pointer; padding: 0 4px; }
.toast .toast-close:hover { color: var(--color-text); }
.toast-success .ti { color: var(--color-accent-text); }
.toast-info .ti { color: var(--color-info); }
.toast-warning .ti { color: var(--color-warning); }
.toast-error .ti { color: var(--color-danger); }