/* ============================================================================
 * BOX BOX - public/hunt.css
 * ----------------------------------------------------------------------------
 * "Кого дальше". A slate is read the way a shortlist is read: skim the centre
 * sentences, notice the register spread, stop on one. So the centre sentence is
 * the largest thing in a row and everything else is quiet around it.
 * ==========================================================================*/

/* IT HAS TO SCROLL, AND IT HAS TO FILL THE PANE.

   This was a fixed-width block with no height and no overflow, dropped into
   .rview - which is a flex column with overflow:hidden. So anything past the
   fold was clipped and unreachable (Ethan: "stuff down below the page that is
   cut and cropped out of scene"), and the block itself sat as a narrow strip
   at the top of a wide pane rather than looking like a screen ("why is it
   just some weird little thing sitting there").

   flex:1 + min-height:0 + overflow-y makes it the scrolling body of the pane,
   and the gutter is --doc-col so it lines up with every other screen. */
.hunt-view {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 28px max(24px, (100% - var(--doc-col)) / 2) 64px;
}
.hunt-view > * { max-width: 780px; margin-left: auto; margin-right: auto; }

.hunt-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.hunt-sub {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* -- the ask ---------------------------------------------------------------
   Not a search box. She is asking a question she does not have the answer to,
   and the optional direction field is a nudge, not a query - so it sits inside
   a panel with the examples that say what it is for, and shrinks to a single
   button once there is a slate on the page worth more attention than it. */

.hunt-ask {
  border: 1px solid var(--line-3, var(--line));
  border-radius: 14px;
  background: var(--surface, transparent);
  padding: 20px 20px 16px;
  margin-bottom: 26px;
}

.hunt-ask.is-compact {
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 18px;
}

.hunt-ask-label {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.hunt-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hunt-form .hunt-input {
  flex: 1 1 300px;
  font-size: 15px;
  padding: 11px 14px;
}

.hunt-go { flex: 0 0 auto; padding-left: 20px; padding-right: 20px; }

/* One tap runs the whole thing. Same shape as the examples under Настройка,
   deliberately - two panels that ask her to say something in her own words
   should not teach two different gestures. */
.hunt-examples {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hunt-example {
  border: 1px solid var(--line-3, var(--line));
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 6px 12px;
  min-height: var(--tap);
  cursor: pointer;
}

.hunt-example:hover { border-color: var(--accent); color: var(--text); }

.hunt-working {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--accent-text, var(--accent));
}

.hunt-note,
.hunt-empty {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.hunt-error {
  font-size: 13px;
  color: #c0392b;
  margin: 8px 0 12px;
}

/* -- previous slates ------------------------------------------------------ */

.hunt-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.hunt-tab {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 11px/1.3 var(--mono, ui-monospace, monospace);
  cursor: pointer;
}

.hunt-tab:hover { border-color: var(--accent); color: var(--text); }
.hunt-tab.on { border-color: var(--accent); color: var(--accent); }

/* -- the register balance ------------------------------------------------- */

.hunt-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

/* -- a candidate ---------------------------------------------------------- */

.hunt-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hunt-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px 14px;
  background: var(--card, transparent);
}

.hunt-row.is-done { opacity: 0.55; }

.hunt-row-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.hunt-rank {
  font: 600 11px/1 var(--mono, ui-monospace, monospace);
  color: var(--accent);
  min-width: 15px;
}

.hunt-name {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.hunt-alt {
  font: 400 12px/1 var(--mono, ui-monospace, monospace);
  color: var(--muted);
}

/* The sentence that decides. Deliberately the biggest thing in the row. */
.hunt-centre {
  margin: 9px 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.hunt-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hunt-chip {
  font: 500 11px/1 var(--mono, ui-monospace, monospace);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
}

/* The registers are colour-coded because the spread across a slate is the
   thing worth seeing at a glance: nine of one colour is nine of one video. */
.hunt-chip.reg { border-color: currentColor; }
.reg-a { color: #b4553a; }
.reg-b { color: #4a6fa5; }
.reg-c { color: #a07a1e; }
.reg-d { color: #4b8256; }
.reg-e { color: #7a5ba6; }

.hunt-chip.mat-thin { color: #b4553a; border-color: currentColor; }

.hunt-line {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.hunt-label {
  font: 600 10px/1 var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  opacity: 0.75;
}

.hunt-row-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.hunt-done {
  font-size: 12px;
  color: var(--muted);
}

.hunt-searched,
.hunt-full {
  font-size: 12px;
  color: var(--muted);
}

.hunt-searched summary,
.hunt-full summary {
  cursor: pointer;
  color: var(--muted);
}

.hunt-searched ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.hunt-searched li {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.7;
}

.hunt-full {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.hunt-foot {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .hunt-view { padding: 20px 16px 56px; }
  .hunt-centre { font-size: 14px; }
}

/* The model's own notes about the hunt. Folded, and quiet when open: it is
   housekeeping - a spelling to check before it goes on a slide - not part of
   the slate she came here to read. */
.hunt-notes { margin: 0 0 18px; }
.hunt-notes > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
  padding: 8px 0; min-height: var(--tap);
  display: flex; align-items: center; gap: 8px;
}
.hunt-notes > summary::-webkit-details-marker { display: none; }
.hunt-notes > summary::before { content: "›"; transition: transform .16s; }
.hunt-notes[open] > summary::before { transform: rotate(90deg); }
.hunt-notes > summary:hover { color: var(--text); }