/* ================================================================
   WO Audit Styles — Additive CSS Patch
   Version: 1.0.0  |  2026-02-24
   Appended to wo-styles.css.
   
   Changes:
   1) Breadcrumb strip styles
   2) Minor readability boosts (line-height, word-spacing on body text)
   3) Stale-data badge
   4) Focus-visible improvements
   5) Skip-link for keyboard nav
   ================================================================ */

/* ── 1) Breadcrumb strip ──────────────────────────────────────── */
#wo-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--muted);
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.6);
  letter-spacing: 0.02em;
  user-select: none;
  min-height: 28px;
  /* Don't grow; sits between topbar and content */
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 9;   /* below topbar's z-index:10 */
}
#wo-bc-section {
  color: rgba(var(--overlay-rgb), 0.45);
  font-weight: 500;
}
#wo-bc-sep {
  color: rgba(var(--overlay-rgb), 0.25);
  margin: 0 2px;
}
#wo-bc-view {
  color: rgba(var(--overlay-rgb), 0.72);
  font-weight: 700;
}
/* RL theme override */
:root.rl-theme #wo-breadcrumb {
  background: rgba(0,0,0,0.22);
  border-bottom-color: rgba(181,154,91,0.14);
}
:root.rl-theme #wo-bc-view {
  color: rgba(230,226,216,0.80);
}
/* Navy theme override */
:root.navy-theme #wo-breadcrumb {
  background: rgba(240,242,245,0.72);
  border-bottom-color: var(--wo-border);
  color: var(--wo-text-secondary);
}
:root.navy-theme #wo-bc-view  { color: var(--wo-panel); }
:root.navy-theme #wo-bc-section { color: var(--wo-text-secondary); }

/* ── 2) Readability tweaks — body text ───────────────────────── */
/* Slightly loosen word-spacing for dense info density */
body {
  word-spacing: 0.01em;
}
.card p,
.card .muted,
.muted {
  line-height: 1.6;   /* was 1.4–1.55 in some places */
}
/* Small label text under cards shouldn't be so condensed */
.card .small,
.small {
  line-height: 1.5;
}

/* ── 3) Stale-data badge ─────────────────────────────────────── */
.wo-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin: 8px 16px 0;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--warn);
  background: rgba(var(--warn-rgb), 0.08);
  border: 1px solid rgba(var(--warn-rgb), 0.22);
  border-radius: 8px;
  letter-spacing: 0.01em;
  /* Appears at top of content area, not blocking main content */
  position: sticky;
  top: 28px;   /* below breadcrumb bar */
  z-index: 8;
}

/* ── 4) Focus-visible ring consistency ───────────────────────── */
/* Ensure every interactive element has a visible ring on keyboard nav */
:root:not(.rl-theme):not(.navy-theme)
  :where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.85);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.16);
}
:root.rl-theme
  :where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(181, 154, 91, 0.80);
  outline-offset: 2px;
}
:root.navy-theme
  :where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wo-accent);
  outline-offset: 2px;
}

/* ── 5) Skip-to-content link (keyboard a11y) ─────────────────── */
.wo-skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 9999;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.15s;
}
.wo-skip-link:focus {
  top: 8px;
}



/* ── 6) Header / Topbar hardening (no redesign) ───────────────── */
/* Remove legacy injected Present button (Batch 20) */
#b20_present_btn{ display:none !important; }

/* Make the topbar more predictable: wrap instead of overflow */
.topbar .searchwrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.topbar .search{
  min-width: 220px;
  flex: 1 1 320px;
}
.topbar .righttools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.topbar .qabar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Tighten button sizing slightly so pills fit without jamming */
.topbar .btn.small{
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.1;
}

/* Mobile: hide the entire topbar as requested (sidebar + content remain) */
@media (max-width: 820px){
  .topbar{ display:none !important; }
  #wo-breadcrumb{ top: 0; }
}

/* ── 6) Auth modal: password field description ───────────────── */
/* Make sure the auth form password field has adequate spacing */
#authModal .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#authModal .field label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* ── 7) Print mode: hide breadcrumb ──────────────────────────── */
@media print {
  #wo-breadcrumb,
  .wo-stale-badge,
  .wo-skip-link {
    display: none !important;
  }
}
body.print-mode #wo-breadcrumb,
body.print-mode .wo-stale-badge {
  display: none !important;
}