/* ==========================================================================
   NITRATE — QUICK SEARCH.  The masthead field and its panel.
   Tokens only (tokens.css).  ⛔ Nothing here defines a colour of its own, so
   the vault and the light table both get it for free.

   ⭐ SAFETY ORANGE APPEARS EXACTLY ONCE: on the matched characters.  That is
   the token's stated meaning — "this is what you sorted by" — and a search
   result is the purest case of it on the site.  The rest is the same warm grey
   scale as every other surface, because a search box that glows is a streaming
   app and this is a film lab.
   ========================================================================== */

.qs {
  position: relative;
  align-self: center;            /* the masthead row is baseline-aligned */
  /* ⚠️ 0 0 auto, NOT 0 1 auto.  Inside .brand a shrinkable box is shrunk to
     nothing: the sweep found the trigger at 0px wide from 1024px down and again
     at 390 — present, focusable, and invisible.  The masthead's shock absorber
     is .slug, which ellipses; this control is a target and has no useful
     smaller size, so it declines to shrink and lets the slug give way. */
  flex: 0 0 auto;
  min-width: 0;
}

/* 🔴 IT YIELDS, AND IT NEVER PUSHES.  Measured at 1440px before this rule: the
   masthead had exactly 214px of slack, the field took all of it, and #whoami
   shrank 11px past its content — wrapping "Ash Moviez / SIGN OUT" onto two
   lines and making the masthead 13px taller on EVERY page of the site, to fit a
   box that is empty most of the time.  So the field is the thing that gives way
   (flex-shrink + min-width), and it does NOT grow on focus: a field that widens
   when clicked re-lays-out the nav beside it on every single click.  The room a
   search needs is in the PANEL, which is 440px and floats over the page.

   ---- the field ---------------------------------------------------------- */
.qs-field {
  display: flex; align-items: center; gap: 6px;
  width: 154px; min-width: 0;
  height: 28px; padding: 0 8px;
  background: var(--ground);
  border: var(--hair) solid var(--rule);
  border-radius: 2px;
  transition: border-color .12s ease;
}
.qs.is-open .qs-field,
.qs-field:focus-within { border-color: var(--accent); }

.qs-glass {
  display: flex; align-items: center;
  color: var(--muted);
  flex: 0 0 auto;
}
.qs-field:focus-within .qs-glass { color: var(--accent); }

.qs-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: transparent; outline: 0; padding: 0;
  font-family: var(--font-ui); font-size: 12.5px;
  color: var(--ink);
}
.qs-input::placeholder { color: var(--muted); }
/* the browser's own clear button is a blue circle in one engine and a grey X
   in another — neither belongs here, and Escape already clears the field */
.qs-input::-webkit-search-cancel-button,
.qs-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* the "/" affordance.  Hidden the moment there is text, because by then it is
   describing something the reader has already done. */
.qs-hint {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  color: var(--muted);
  padding: 2px 4px 1px;
  border: var(--hair) solid var(--rule); border-radius: 2px;
}
.qs-field:focus-within .qs-hint { display: none; }

/* Both are phone controls; on a desktop the dropdown has Escape and
   click-outside, so neither the trigger nor a Cancel button has a job. */
.qs-trigger, .qs-cancel { display: none; }

/* ---- WHERE THE FIELD IS AFFORDABLE, MEASURED ---------------------------
   Swept 1920 → 360 with the element present and again with it removed.  The
   masthead already wraps #whoami onto two lines from 1180px down — that is
   PRE-EXISTING and is not this file's to fix — but at 1366 and 1280 the row is
   52px until a 154px field is put in it, and then it is 65px.  So the inline
   field is only shown where the measurement says it fits, and everything below
   gets the same trigger the phone gets, at mouse size rather than thumb size.
   ⚠️ 1400px is not a taste breakpoint; it is where the slack ran out. */
@media (max-width: 1399px) {
  .qs-field { display: none; }
  .qs-hint { display: none; }
  .qs-trigger {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 28px; flex: none; padding: 0;
    background: transparent; border: 0;
    color: var(--ink-2);
    cursor: pointer;
  }
  .qs-trigger:hover { color: var(--accent); }
  /* expanded, it becomes the field again — in place, over the row it came from,
     so nothing beside it moves */
  .qs.is-expanded .qs-trigger { display: none; }
  .qs.is-expanded .qs-field {
    display: flex;
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
    width: 300px; z-index: 61;
  }
}

/* ---- the panel ---------------------------------------------------------- */
.qs-panel {
  position: absolute; z-index: 60;
  top: calc(100% + 6px); left: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  border-radius: 2px;
  /* a sheet of paper laid on the page, not a floating card: one flat drop, no
     blur bloom, no translucency */
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
}

.qs-head, .qs-more, .qs-tip {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px 7px;
}
.qs-tip { text-transform: none; letter-spacing: .02em; font-size: 11px; line-height: 1.5; }
.qs-more { border-top: var(--hair) solid var(--rule); }
.qs-eg {
  font: inherit; color: var(--ink-2);
  background: transparent; border: 0; border-bottom: var(--hair) dotted var(--rule);
  padding: 0; cursor: pointer;
}
.qs-eg:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- a row -------------------------------------------------------------- */
.qs-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 10px;
  background: transparent; border: 0; border-radius: 0;
  text-align: left; cursor: pointer;
  border-top: var(--hair) solid var(--rule);
}
.qs-row:first-child { border-top: 0; }
.qs-row.is-cur, .qs-row:hover { background: var(--panel-2); }
/* the cursor is a rule down the leading edge — the same mark the view tabs use
   for "you are here", turned on its side */
.qs-row.is-cur { box-shadow: inset 2px 0 0 var(--accent); }

.qs-art {
  flex: 0 0 auto; width: 30px; height: 45px;
  background: var(--tint, var(--panel-2));
  border: var(--hair) solid var(--rule);
  overflow: hidden;
}
.qs-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-art.is-blank img { display: none; }

.qs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qs-title {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qs-mk { background: transparent; color: var(--accent); font-weight: 700; }
.qs-sub {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ==========================================================================
   THE PHONE.  The masthead row at 390px is already wordmark + DISCOVER + role
   chip + theme patch, and MOBILE_SPEC's own note on .discbtn records what
   happens when something else is squeezed in beside them.  So the field is not
   in the row here — a tap target is, and it opens the search as a full sheet.
   ⚠️ The breakpoint matches the shell's own mobile tier; do not invent another.
   ========================================================================== */
@media (max-width: 760px) {
  .qs { position: static; }

  /* ⚠️ 44 TALL, NATURAL WIDTH — the site's own phone idiom.  .lg-out and
     .discbtn both set `min-height: var(--tap)` and take the width their content
     needs (60 and 66), so a 44px SQUARE here was wider than the standard it was
     copying, on the one row with nothing to spare.  ⛔ It did NOT go to 32: at
     that width it would have been the only control in the row under 40, and
     narrowing a touch target to buy slack the frame can give instead is the
     wrong trade.  40x44 clears the same bar as everything beside it. */
  .qs-trigger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: var(--tap, 44px);
    flex: none; padding: 0;
    background: transparent; border: 0;
    color: var(--ink-2);
    cursor: pointer;
  }
  .qs-field { display: none; }

  .qs.is-expanded .qs-trigger { display: none; }
  .qs.is-expanded .qs-field {
    display: flex;
    position: fixed; z-index: 70;
    top: 0; left: 0; right: 0;
    /* ⚠️ width:auto undoes the 1399px tier's 300px.  Both media queries match a
       390px phone; left+right only decide the width once an explicit one stops
       overriding them, so without this the sheet is a 300px stub on a 390px
       screen — which is what qsprobe Q7c measured. */
    width: auto;
    /* 🔴 …and transform:none undoes that tier's translateY(-50%), which is NOT
       a property left/right can override.  Uncancelled it lifted the bar 24px
       off the top of the phone, so half the field was off-screen and the
       masthead showed through underneath it. */
    transform: none;
    height: 48px; border-radius: 0;
    border-width: 0 0 var(--hair) 0;
    background: var(--panel);
    padding: 0 max(10px, var(--safe-r)) 0 max(10px, var(--safe-l));
  }
  .qs.is-expanded .qs-input,
  .qs.is-expanded .qs-input:focus { width: auto; font-size: 16px; }  /* 16px: iOS zooms below it */
  .qs.is-expanded .qs-cancel {
    display: block; flex: none;
    padding: 0 2px 0 10px; background: transparent; border: 0;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); cursor: pointer;
    min-height: var(--tap, 44px);
  }
  .qs.is-expanded .qs-cancel:active { color: var(--accent); }
  .qs-hint { display: none; }

  .qs-panel {
    position: fixed; z-index: 70;
    top: 48px; left: 0; right: 0; bottom: 0;
    width: auto; max-height: none;
    border-width: 0; border-radius: 0;
    box-shadow: none;
    padding-bottom: var(--safe-b, 0px);
  }
  .qs-row { padding: 9px 12px; }
  .qs-art { width: 34px; height: 51px; }
}

/* the sheet owns the screen while it is open */
html.qs-lock, html.qs-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .qs-field, .qs-input { transition: none; }
}

/* WIDEINDEX_20260829: a row that arrived by a name, a keyword or a collection
   says so beside its facts, in the same ink as the facts -- it is a fact. */
.qs-via { font-weight: 600; color: var(--ink-2, inherit); }