/* =====================================================================
   styles.v2.css, additive overrides for Main Viewer v2.
   Hooks into .shell.cerulean-v2 so v1 styling is untouched.

   This file is loaded AFTER styles.css and only adds three things:

     1. Header, collapse to a single row; tighten alignment.
     2. Left panel ("Navigator"), segmented Documents / Results
        toggle in a unified header. Search-results list styling.
     3. Document-column in-page match bar, quiet pill above toolbar.

   Tokens come straight from colors_and_type.css.
   ===================================================================== */

/* =====================================================================
   HEADER, single row, no snippet strip
   ===================================================================== */

/* v2 ditches the snippet row entirely. The workspace grid still has
   row 2 reserved for it in kit.css, we shrink that row to zero. */
.shell.cerulean-v2 .snippet-row { display: none !important; }
.shell.cerulean-v2 .workspace { grid-template-rows: auto 0 1fr !important; }

/* The header reaches all the way across; columns line up with the
   new left-panel width and the right rail. */
.shell.cerulean-v2 .header-bar.v2 {
  grid-template-columns: 380px minmax(620px, 1fr) 120px 32px;
  align-items: center;
}

/* Search field: focus ring stays subtle but the field grows a little
   visual weight on focus. Kbd hint sits at the right edge. */
.shell.cerulean-v2 .search-field.v2 {
  position: relative;
}
.shell.cerulean-v2 .search-field.v2 .kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--muted);
  flex-shrink: 0;
}
.shell.cerulean-v2 .search-field.v2:focus-within .kbd {
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease);
}

/* --- Recent searches dropdown ---------------------------------- */
.shell.cerulean-v2 .recent-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(26, 31, 43, 0.06);
  z-index: 30;
  padding: 8px 0 10px;
}
.shell.cerulean-v2 .recent-head {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  padding: 6px 14px 8px;
}
.shell.cerulean-v2 .recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shell.cerulean-v2 .recent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--dur-state) var(--ease);
}
.shell.cerulean-v2 .recent-row:hover { background: var(--bg); }
.shell.cerulean-v2 .recent-q {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.shell.cerulean-v2 .recent-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}

/* =====================================================================
   LEFT NAVIGATOR, dual-mode (Documents / Results)
   ===================================================================== */

.shell.cerulean-v2 .navigator.v2 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The shared header above the tree / results, replaces both
   Tree's own .tree-header and any results-list header. */
.shell.cerulean-v2 .nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  /* Hairline rule under the header, provides anchor for the
     active-tab indicator without drawing a border on the row. */
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 10px;
}
.shell.cerulean-v2 .nav-tabs {
  display: flex;
  gap: 24px;
  position: relative;
}
.shell.cerulean-v2 .nav-tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0 0 11px;
  margin-bottom: -11px; /* let underline meet the header rule */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-state) var(--ease);
}
.shell.cerulean-v2 .nav-tab:hover:not(.is-disabled) { color: var(--ink); }
.shell.cerulean-v2 .nav-tab.is-active { color: var(--ink); }
.shell.cerulean-v2 .nav-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
}
.shell.cerulean-v2 .nav-tab.is-disabled {
  color: var(--ink-30);
  cursor: default;
}
.shell.cerulean-v2 .nav-tab-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  text-transform: none;
  margin-left: 2px;
}
.shell.cerulean-v2 .nav-tab.is-active .nav-tab-count { color: var(--accent); }

.shell.cerulean-v2 .nav-actions {
  display: flex;
  gap: 2px;
}

/* When nested inside the v2 navigator, Tree's own header is hidden
   because NavigatorHeader replaces it. */
.shell.cerulean-v2 .navigator.v2 .tree-wrap .tree-header {
  display: none;
}
/* Tree row paddings inside v2 are unchanged from v1. */

/* --- Filter button active state --------------------------------- */
.shell.cerulean-v2 .nav-actions .filter-toggle {
  position: relative;
}
.shell.cerulean-v2 .nav-actions .filter-toggle.is-open {
  color: var(--ink);
  background: #FFFFFF;
}
.shell.cerulean-v2 .nav-actions .filter-toggle.has-active {
  color: var(--accent);
}
.shell.cerulean-v2 .nav-actions .filter-toggle .filter-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

/* --- Filter sheet (docked drawer below nav-header) -------------- */
.shell.cerulean-v2 .filter-sheet {
  margin: -8px 0 14px;
  padding: 12px 4px 12px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shell.cerulean-v2 .filter-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.shell.cerulean-v2 .filter-sheet-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}
.shell.cerulean-v2 .filter-sheet-actions {
  display: inline-flex;
  gap: 14px;
}
.shell.cerulean-v2 .filter-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-state) var(--ease);
}
.shell.cerulean-v2 .filter-link:hover { color: var(--ink); }
.shell.cerulean-v2 .filter-link:focus { outline: none; }
.shell.cerulean-v2 .filter-link.filter-close { color: var(--ink); }

/* --- Chip group ------------------------------------------------- */
.shell.cerulean-v2 .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shell.cerulean-v2 .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-state) var(--ease),
              background var(--dur-state) var(--ease),
              color var(--dur-state) var(--ease);
}
.shell.cerulean-v2 .filter-chip:hover { border-color: var(--ink-30); }
.shell.cerulean-v2 .filter-chip:focus { outline: none; }
.shell.cerulean-v2 .filter-chip .fc-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0;
}
.shell.cerulean-v2 .filter-chip.is-on {
  background: var(--accent-tint);
  border-color: transparent;
  color: var(--ink);
}
.shell.cerulean-v2 .filter-chip.is-on .fc-count { color: var(--accent); }

/* =====================================================================
   RESULTS LIST
   ===================================================================== */

.shell.cerulean-v2 .results-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 200px);
}

.shell.cerulean-v2 .results-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
}
.shell.cerulean-v2 .results-q-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}
.shell.cerulean-v2 .results-q {
  background: var(--accent-tint);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 2px;
}
.shell.cerulean-v2 .results-q-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}

.shell.cerulean-v2 .results-list {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-30) transparent;
  padding-bottom: 16px;
  margin-right: -8px; /* let scrollbar sit at far edge */
  padding-right: 4px;
}
.shell.cerulean-v2 .results-list::-webkit-scrollbar { width: 6px; }
.shell.cerulean-v2 .results-list::-webkit-scrollbar-thumb {
  background: var(--ink-30); border-radius: 3px;
}

/* --- a group = a document with N hits ------------------------------- */
.shell.cerulean-v2 .result-group {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--hairline);
}
.shell.cerulean-v2 .result-group:first-child { padding-top: 4px; }
.shell.cerulean-v2 .result-group:last-child  { border-bottom: 0; }

.shell.cerulean-v2 .result-group-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 0 4px 8px 4px;
}
.shell.cerulean-v2 .rgh-ser {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}
.shell.cerulean-v2 .rgh-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  /* truncate long doc titles to one line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell.cerulean-v2 .rgh-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}

.shell.cerulean-v2 .result-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* --- one hit row ---------------------------------------------------- */
.shell.cerulean-v2 .result-row {
  position: relative;
  padding: 8px 10px 8px 12px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background var(--dur-state) var(--ease);
}
.shell.cerulean-v2 .result-row:hover { background: #FFFFFF; }
.shell.cerulean-v2 .result-row.is-active {
  background: #FFFFFF;
}
.shell.cerulean-v2 .result-row.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--accent);
}

.shell.cerulean-v2 .result-meta {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}
.shell.cerulean-v2 .result-row.is-active .result-pref { color: var(--accent); }

.shell.cerulean-v2 .result-body {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.shell.cerulean-v2 .result-body .match {
  background: var(--accent-tint);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 1px;
}

/* "Load N more", quiet ghost button at end of list */
.shell.cerulean-v2 .results-more {
  margin: 8px auto 0;
  display: block;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-state) var(--ease);
}
.shell.cerulean-v2 .results-more:hover { border-color: var(--ink-30); }

/* Empty state */
.shell.cerulean-v2 .results-empty {
  padding: 24px 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
}
.shell.cerulean-v2 .results-empty em {
  font-style: normal;
  color: var(--ink);
}

/* =====================================================================
   IN-DOCUMENT MATCH BAR (above the toolbar pill)
   ===================================================================== */

.shell.cerulean-v2 .pane-center {
  position: relative;
}

/* The bar lives inside .viewer-stage as a sticky sibling of the
   toolbar dock (portaled there by InDocMatchBar). Sticky at
   bottom: 60 parks it just above the toolbar pill (which is sticky
   at bottom: 12 and ~40px tall). z-index keeps it above page-bottom
   content; the toolbar dock has z-index: 5, we sit at 4 so the
   toolbar still wins if they overlap horizontally. */
.shell.cerulean-v2 .viewer-stage .indoc-match-bar {
  position: sticky;
  bottom: 60px;
  z-index: 4;
  align-self: center;
  margin-top: -36px;       /* float over page-bottom area like the toolbar */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 14px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(26, 31, 43, 0.04);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  width: max-content;
  max-width: 90%;
  pointer-events: auto;
}

.shell.cerulean-v2 .indoc-match-bar .imb-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}
.shell.cerulean-v2 .indoc-match-bar .imb-sep { color: var(--ink-30); }
.shell.cerulean-v2 .indoc-match-bar .imb-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
}
.shell.cerulean-v2 .indoc-match-bar .imb-cur   { color: var(--accent); font-weight: 500; }
.shell.cerulean-v2 .indoc-match-bar .imb-of    { color: var(--muted); }
.shell.cerulean-v2 .indoc-match-bar .imb-total { color: var(--ink); }
.shell.cerulean-v2 .indoc-match-bar .imb-here  {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
}
.shell.cerulean-v2 .indoc-match-bar .imb-spacer { width: 4px; }
.shell.cerulean-v2 .indoc-match-bar .imb-btn {
  width: 22px; height: 22px;
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-70);
  cursor: pointer;
  border-radius: 3px;
  transition: color var(--dur-state) var(--ease),
              background var(--dur-state) var(--ease);
}
.shell.cerulean-v2 .indoc-match-bar .imb-btn:hover {
  color: var(--ink);
  background: #FFFFFF;
}
.shell.cerulean-v2 .indoc-match-bar .imb-btn:focus { outline: none; }
.shell.cerulean-v2 .indoc-match-bar .imb-close {
  margin-left: 4px;
  color: var(--muted);
}

/* =====================================================================
   The pane-center is a flex column, InDocMatchBar is rendered AFTER
   DocumentViewer in JSX. To anchor it above the sticky toolbar, the
   centre pane needs flex column layout where the bar floats over the
   viewer-stage's bottom edge. Easiest: pane-center already aligns
   items vertically, we let the bar position itself sticky.
   ===================================================================== */