/* ── 4. Browse tabs ────────────────────────────────────────────────────── */

.browse-tabs {
  border-bottom: 1px solid var(--edt-line);
  background: var(--edt-bg);
  padding: 0 8px;
  gap: 2px;
}
.browse-tab {
  color: var(--edt-fg-muted);
  font-size: 0.84em;
  letter-spacing: var(--edt-tracking-snug);
  padding: 11px 10px 12px;
  border-radius: 0;
  margin-bottom: -1px;
}
.browse-tab:hover {
  background: transparent;
  color: var(--edt-fg);
}
.browse-tab.active {
  color: var(--edt-accent);
  border-bottom-color: var(--edt-accent);
}

/* ── 5. Browse toolbar (search / sort / filter / add) ─────────────────── */

.browse-toolbar {
  border-bottom: 1px solid var(--edt-line);
  background: var(--edt-bg);
  gap: 10px;
  padding: 12px 14px;
}
.browse-search {
  background: var(--edt-bg-elev-1);
  border-color: var(--edt-line-strong);
  border-radius: var(--edt-r-md);
  color: var(--edt-fg);
  padding: 8px 12px;
}
.browse-search::placeholder { color: var(--edt-fg-faint); }
.browse-search:focus {
  border-color: var(--edt-accent);
  background: var(--edt-bg);
  box-shadow: 0 0 0 3px var(--edt-accent-ring);
}
.browse-filter-toggle {
  background: var(--edt-bg-chip);
  color: var(--edt-fg-muted);
  border-radius: var(--edt-r-md);
}
.browse-filter-toggle:hover {
  background: var(--edt-bg-elev-2);
  color: var(--edt-fg);
}
.browse-filter-toggle.expanded,
.browse-filter-toggle.has-filters {
  background: var(--edt-accent-soft);
  color: var(--edt-accent);
}
.filter-badge { background: var(--edt-accent); }

.browse-sort-toggle {
  background: var(--edt-bg-chip);
  color: var(--edt-fg-muted);
  border-radius: var(--edt-r-md);
  font-size: 0.82em;
}
.browse-sort-toggle:hover { background: var(--edt-bg-elev-2); color: var(--edt-fg); }
.browse-sort-toggle.expanded { background: var(--edt-accent-soft); }
.browse-sort-toggle .sort-current { color: var(--edt-accent); }
.browse-sort-toggle .filter-chevron { color: var(--edt-fg-faint); }

.browse-add-btn {
  background: var(--edt-accent);
  color: var(--edt-accent-contrast, #fff);
  border-color: var(--edt-accent);
  border-radius: var(--edt-r-md);
  padding: 7px 12px;
  box-shadow: var(--edt-shadow-1);
}
.browse-add-btn:hover {
  background: var(--edt-accent-hover);
  border-color: var(--edt-accent-hover);
  color: var(--edt-accent-contrast, #fff);
}
.browse-bulk-toggle,
.browse-favorites-toggle {
  background: var(--edt-bg-chip);
  color: var(--edt-fg-muted);
  border-color: transparent;
  border-radius: var(--edt-r-md);
}
.browse-bulk-toggle:hover,
.browse-favorites-toggle:hover {
  background: var(--edt-bg-elev-2);
  color: var(--edt-fg);
}
.browse-bulk-toggle.active,
.browse-favorites-toggle.active {
  background: var(--edt-accent-soft);
  border-color: var(--edt-accent-border);
  color: var(--edt-accent);
}
.bulk-action-bar {
  background: var(--edt-bg);
  border-top: 1px solid var(--edt-line);
  padding-top: 10px;
}
.bulk-status {
  color: var(--edt-fg-muted);
}
.bulk-save-btn {
  background: var(--edt-accent);
  border-color: var(--edt-accent);
}
.bulk-cancel-btn {
  background: var(--edt-bg-chip);
  border-color: transparent;
  color: var(--edt-fg);
}
.bulk-grid-wrap {
  background: var(--edt-bg);
}
.bulk-place-grid th,
.bulk-place-grid td {
  border-bottom-color: var(--edt-line);
}
.bulk-place-grid th {
  background: var(--edt-bg);
  color: var(--edt-fg-muted);
}
.bulk-place-grid input,
.bulk-place-grid select,
.bulk-place-grid textarea {
  background: var(--edt-bg-elev-1);
  border: 1px solid var(--edt-line-strong);
  border-radius: var(--edt-r-sm);
  color: var(--edt-fg);
  padding: 6px 8px;
}
.bulk-place-grid input:focus,
.bulk-place-grid select:focus,
.bulk-place-grid textarea:focus {
  border-color: var(--edt-accent);
  box-shadow: 0 0 0 2px var(--edt-accent-ring);
  outline: none;
}
.bulk-row.has-error {
  background: var(--edt-danger-soft);
}
.bulk-row-error {
  color: var(--edt-danger);
}
.bulk-image-btn,
.bulk-move-btn,
.bulk-delete-btn {
  background: var(--edt-bg-elev-1);
  border-color: var(--edt-line-strong);
  color: var(--edt-fg-muted);
}
.bulk-image-btn:hover,
.bulk-move-btn:hover {
  background: var(--edt-bg-hover);
  color: var(--edt-fg);
}
.bulk-delete-btn {
  color: var(--edt-danger);
}
.bulk-delete-btn:hover {
  background: var(--edt-danger-soft);
  border-color: var(--edt-danger);
}

.filter-chip {
  background: var(--edt-bg-chip);
  color: var(--edt-fg-muted);
  border-radius: var(--edt-r-pill);
}
.filter-chip:hover { background: var(--edt-bg-elev-2); color: var(--edt-fg); }
.filter-chip.active {
  background: var(--edt-accent);
  border-color: var(--edt-accent);
}
.browse-drill-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 0;
  font-size: 0.8em;
}
.browse-drill-caption { color: var(--edt-fg-muted); }
.browse-drill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--edt-accent-soft);
  color: var(--edt-accent);
  padding: 3px 5px 3px 10px;
  border-radius: var(--edt-r-pill);
  font-weight: 600;
}
.browse-drill-clear {
  background: none;
  border: none;
  padding: 2px 4px;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.browse-drill-clear:hover { background: var(--edt-accent-soft-2); }
.filter-row-label { color: var(--edt-fg-muted); }

/* ── 6. List rows (places / locales / areas / regions / jurisdictions) ── */

.place-row,
.locale-row,
.area-row,
.region-row,
.jurisdiction-row,
.tag-row,
.path-browse-row {
  padding: 11px 16px;
  border-bottom: 1px solid var(--edt-line);
  gap: 10px;
  background: transparent;
}
.path-browse-row { transition: background var(--edt-dur-1); }
.place-row:hover,
.locale-row:hover,
.area-row:hover,
.region-row:hover,
.jurisdiction-row:hover,
.tag-row:hover,
.path-browse-row:hover {
  background: var(--edt-bg-hover);
}
.row-name {
  font-size: 0.94em;
  font-weight: 600;
  letter-spacing: var(--edt-tracking-snug);
  color: var(--edt-fg);
}
.row-meta {
  font-size: 0.78em;
  color: var(--edt-fg-muted);
  gap: 10px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.row-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.locale-row .row-count,
.area-row .row-count,
.region-row .row-count,
.jurisdiction-row .row-count,
.tag-row .row-count {
  background: var(--edt-bg-chip);
  color: var(--edt-fg-muted);
  font-family: var(--edt-font-mono);
  font-size: 0.7em;
  letter-spacing: 0.04em;
  padding: 3px 8px;
}

/* ── 7. Type chip — soft-fill refresh ─────────────────────────────────── */
/* Existing rules paint a solid color. We swap to a soft tinted pill where
   the background is a low-alpha tint and the text + a leading dot carry the
   hue. Higher legibility, calmer panels, badges read as data instead of UI. */

.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--edt-r-sm);
  line-height: 1.5;
  background: var(--type-soft, var(--edt-bg-chip));
  color: var(--type-ink, var(--edt-fg-muted));
}
.type-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--type-dot, currentColor);
  flex: 0 0 auto;
}

/* ── Colorblind-safe palette ──────────────────────────────────────────────
   Activates when <html> has data-palette="cb" (set by JS, persisted to
   localStorage via the Legend toggle). Uses an Okabe-Ito-derived palette,
   the de facto CVD-safe standard.
   Light vs dark variants follow the same pattern as the atlas palette:
   --type-dot stays the same; --type-soft/ink swap intensity to fit the bg. */
[data-palette="cb"] .type-landmark      { --type-dot: #0072B2; --type-soft: color-mix(in oklab, #0072B2 16%, #fff); --type-ink: color-mix(in oklab, #0072B2 80%, #000); }
[data-palette="cb"] .type-cafe          { --type-dot: #D55E00; --type-soft: color-mix(in oklab, #D55E00 16%, #fff); --type-ink: color-mix(in oklab, #D55E00 80%, #000); }
[data-palette="cb"] .type-entertainment { --type-dot: #CC79A7; --type-soft: color-mix(in oklab, #CC79A7 16%, #fff); --type-ink: color-mix(in oklab, #CC79A7 75%, #000); }
[data-palette="cb"] .type-store         { --type-dot: #E69F00; --type-soft: color-mix(in oklab, #E69F00 16%, #fff); --type-ink: color-mix(in oklab, #E69F00 80%, #000); }
[data-palette="cb"] .type-restaurant    { --type-dot: #882255; --type-soft: color-mix(in oklab, #882255 16%, #fff); --type-ink: color-mix(in oklab, #882255 75%, #000); }
[data-palette="cb"] .type-attraction    { --type-dot: #56B4E9; --type-soft: color-mix(in oklab, #56B4E9 18%, #fff); --type-ink: color-mix(in oklab, #56B4E9 80%, #000); }
[data-palette="cb"] .type-park          { --type-dot: #009E73; --type-soft: color-mix(in oklab, #009E73 16%, #fff); --type-ink: color-mix(in oklab, #009E73 80%, #000); }
[data-palette="cb"] .type-transit       { --type-dot: #555555; --type-soft: color-mix(in oklab, #555555 18%, #fff); --type-ink: color-mix(in oklab, #555555 80%, #000); }
[data-palette="cb"] .type-lodging       { --type-dot: #44AA99; --type-soft: color-mix(in oklab, #44AA99 18%, #fff); --type-ink: color-mix(in oklab, #44AA99 82%, #000); }
[data-palette="cb"] .type-special       { --type-dot: #F0E442; --type-soft: color-mix(in oklab, #F0E442 22%, #fff); --type-ink: color-mix(in oklab, #F0E442 70%, #000); }
/* Okabe-Ito is exhausted by the ten judged categories, so Grapevine leans on a
   neutral grey — its ring shape is what disambiguates it, not hue. */
[data-palette="cb"] .type-grapevine,
[data-palette="cb"] .type-event { --type-dot: #9A9A9A; --type-soft: color-mix(in oklab, #9A9A9A 18%, #fff); --type-ink: color-mix(in oklab, #9A9A9A 80%, #000); }

[data-theme="dark"][data-palette="cb"] .type-landmark      { --type-soft: color-mix(in oklab, #0072B2 28%, #1a1a1a); --type-ink: color-mix(in oklab, #0072B2 35%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-cafe          { --type-soft: color-mix(in oklab, #D55E00 26%, #1a1a1a); --type-ink: color-mix(in oklab, #D55E00 40%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-entertainment { --type-soft: color-mix(in oklab, #CC79A7 28%, #1a1a1a); --type-ink: color-mix(in oklab, #CC79A7 40%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-store         { --type-soft: color-mix(in oklab, #E69F00 26%, #1a1a1a); --type-ink: color-mix(in oklab, #E69F00 45%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-restaurant    { --type-soft: color-mix(in oklab, #882255 32%, #1a1a1a); --type-ink: color-mix(in oklab, #882255 30%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-attraction    { --type-soft: color-mix(in oklab, #56B4E9 26%, #1a1a1a); --type-ink: color-mix(in oklab, #56B4E9 50%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-park          { --type-soft: color-mix(in oklab, #009E73 28%, #1a1a1a); --type-ink: color-mix(in oklab, #009E73 45%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-transit       { --type-soft: color-mix(in oklab, #888888 28%, #1a1a1a); --type-ink: color-mix(in oklab, #888888 40%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-lodging       { --type-soft: color-mix(in oklab, #44AA99 28%, #1a1a1a); --type-ink: color-mix(in oklab, #44AA99 45%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-special       { --type-soft: color-mix(in oklab, #F0E442 28%, #1a1a1a); --type-ink: color-mix(in oklab, #F0E442 35%, #fff); }
[data-theme="dark"][data-palette="cb"] .type-grapevine,
[data-theme="dark"][data-palette="cb"] .type-event { --type-soft: color-mix(in oklab, #9A9A9A 28%, #1a1a1a); --type-ink: color-mix(in oklab, #9A9A9A 40%, #fff); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-palette="cb"] .type-landmark      { --type-soft: color-mix(in oklab, #0072B2 28%, #1a1a1a); --type-ink: color-mix(in oklab, #0072B2 35%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-cafe          { --type-soft: color-mix(in oklab, #D55E00 26%, #1a1a1a); --type-ink: color-mix(in oklab, #D55E00 40%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-entertainment { --type-soft: color-mix(in oklab, #CC79A7 28%, #1a1a1a); --type-ink: color-mix(in oklab, #CC79A7 40%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-store         { --type-soft: color-mix(in oklab, #E69F00 26%, #1a1a1a); --type-ink: color-mix(in oklab, #E69F00 45%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-restaurant    { --type-soft: color-mix(in oklab, #882255 32%, #1a1a1a); --type-ink: color-mix(in oklab, #882255 30%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-attraction    { --type-soft: color-mix(in oklab, #56B4E9 26%, #1a1a1a); --type-ink: color-mix(in oklab, #56B4E9 50%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-park          { --type-soft: color-mix(in oklab, #009E73 28%, #1a1a1a); --type-ink: color-mix(in oklab, #009E73 45%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-transit       { --type-soft: color-mix(in oklab, #888888 28%, #1a1a1a); --type-ink: color-mix(in oklab, #888888 40%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-lodging       { --type-soft: color-mix(in oklab, #44AA99 28%, #1a1a1a); --type-ink: color-mix(in oklab, #44AA99 45%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-special       { --type-soft: color-mix(in oklab, #F0E442 28%, #1a1a1a); --type-ink: color-mix(in oklab, #F0E442 35%, #fff); }
  :root:not([data-theme="light"])[data-palette="cb"] .type-grapevine,
  :root:not([data-theme="light"])[data-palette="cb"] .type-event { --type-soft: color-mix(in oklab, #9A9A9A 28%, #1a1a1a); --type-ink: color-mix(in oklab, #9A9A9A 40%, #fff); }
}

/* ── 8. Stars + price + skip-it ──────────────────────────────────────── */

.skip-it-badge {
  color: var(--edt-danger);
  font-size: 0.92em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Stars and dollar signs picked up from the existing helpers — tighten
   their typography so they read as data, not text. */
.row-meta span { font-feature-settings: "tnum"; }

/* ── 8b. Language tag ─────────────────────────────────────────────────────
   Read-side badge for editor-authored prose written in a non-default
   language (English renders nothing — see languageBadgeHtml). Calm chip so
   it reads as metadata, not a control. */
.lang-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 8px;
  border-radius: var(--edt-r-pill);
  background: var(--edt-accent-soft);
  color: var(--edt-accent-strong);
  border: 1px solid var(--edt-accent-border);
}
.view-lang { margin-top: 6px; }
.comment-lang { margin-left: 6px; font-size: 0.65em; }

/* Compact language picker inside the comment form (the entity forms reuse
   the standard .form-label / select styling). */
.comment-language-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78em;
  color: var(--edt-fg-muted);
  margin: 4px 0;
}

/* ── 10. Segmented control refresh ─────────────────────────────────────── */

.seg .seg-label {
  color: var(--edt-fg-muted);
  font-size: 0.75em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.seg .seg-buttons {
  background: var(--edt-bg-chip);
  padding: 3px;
  border-radius: var(--edt-r-md);
}
.seg span {
  color: var(--edt-fg-muted);
  font-size: 0.86em;
  padding: 4px 8px;
  border-radius: var(--edt-r-sm);
}
.seg input:checked + span {
  background: var(--edt-bg);
  color: var(--edt-accent);
  box-shadow: var(--edt-shadow-1);
}
.seg input:focus-visible + span {
  box-shadow: 0 0 0 2.5px var(--edt-accent-ring);
}