/* Control chrome — the parts of a sidebar control added for dual-literacy:
   the technical name beside a label, the on-demand explanation, the live
   readout, and the search field above the panels.

   Deliberately NOT part of scaffolds.css. That file is a design-token system
   being introduced separately; this is behaviour-bearing markup that four tool
   pages need today. It is written entirely against variables those pages
   already define (--ink, --ink-mid, --ink-soft, --line, --line-soft), so it
   works under each page's current :root block and will keep working unchanged
   once those pages move onto a scaffold. Folding it into the scaffold system
   later is a file move, not a rewrite.

   One shared file rather than the same sixty lines pasted into four HTML heads,
   which is the pattern that let the existing pages drift apart. */


/* ------------------------------------------------------ technical name

   Sits beside the plain label, quieter than it. A print professional reads
   this and ignores the rest; someone on their first visit reads the plain
   words and never notices this is here. Both are served without a mode
   switch, and without either being condescended to. */

.lbl-tech {
  font-style: normal;
  margin-left: 6px;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}

.toggle .txt .lbl-tech { text-transform: uppercase; font-size: 8.5px; }


/* --------------------------------------------------------- explanation

   Two levels of help, not one. `hint` is one line and always visible; this is
   the two-or-three-sentence version, and it stays shut until asked for so the
   panel doesn't become an essay. */

.explain-btn {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-transform: none;
}

.explain-btn:hover { color: var(--ink); }

.explain {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--line);
  background: var(--line-soft);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-mid);
  text-transform: none;
}


/* ------------------------------------------------------------ readout

   Ground truth from the document, under the control that changes it — real
   output dimensions rather than a proxy number the user has to interpret. */

.readout {
  margin: 5px 0 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.readout:empty { display: none; }


/* ------------------------------------------------------------- search */

.ctl-search {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.ctl-search input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.ctl-search input::placeholder { color: var(--ink-soft); }
.ctl-search input:focus { outline: none; border-color: var(--ink); }

/* Safari draws its own clear button on search inputs; the tools have their own
   visual language and it doesn't belong to it. */
.ctl-search input::-webkit-search-decoration,
.ctl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ctl-search.active input { border-color: var(--ink); }

.ctl-search-note {
  margin: 6px 0 0;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--ink-soft);
  text-transform: none;
}

.ctl-search-note.empty { color: var(--ink-mid); }


/* ------------------------------------------------------------ transport

   The clip player under the stage. Reads as an instrument strip rather than a
   media player: these are effects tools and the video is material, not
   content. */

.transport {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.transport[hidden] { display: none; }

.transport button {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-mid);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 6px 9px;
  cursor: pointer;
}

.transport button:hover { border-color: var(--ink); color: var(--ink); }
.transport button.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.tp-play { min-width: 34px; }
.tp-step { min-width: 26px; }

.tp-track { position: relative; flex: 1; display: flex; align-items: center; }

/* The marked range sits behind the scrub bar, on the same axis, because they
   describe the same thing and splitting them makes the relation guesswork. */
.tp-range {
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: transparent;
  pointer-events: none;
}

.tp-range.on { background: var(--ink); opacity: 0.22; }

.tp-scrub { width: 100%; margin: 0; position: relative; }

.tp-time {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tp-mark { font-variant-numeric: tabular-nums; min-width: 26px; }
.tp-mark-clear[hidden] { display: none; }

.tp-loop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}

.tp-loop input { display: none; }

/* The transport ships its own checkbox indicator rather than borrowing each
   page's `.toggle .box`, which it does not match — without this the Loop control
   is a word with nothing beside it. */
.tp-loop .box {
  width: 11px; height: 11px; flex: none;
  border: 1px solid var(--line);
}
.tp-loop input:checked + .box { background: var(--ink); border-color: var(--ink); }
.tp-loop input:checked ~ span { color: var(--ink); }

.tp-note {
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-mid);
  background: var(--line-soft);
}

.tp-note[hidden] { display: none; }
.tp-note.warn { color: var(--ink); }


/* ------------------------------------------------------- export progress

   An offline render can take a minute. It says which frame it is on and how
   long is left, and it can be stopped — a progress bar with no cancel is just
   a spinner with extra steps. */

.vx { display: grid; gap: 6px; }

.vx-formats { display: grid; gap: 4px; }

.vx-format {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
}

.vx-format:hover:not(:disabled) { border-color: var(--ink); }
.vx-format.on { border-color: var(--ink); }
.vx-format:disabled { opacity: 0.45; cursor: not-allowed; }

.vx-format b {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.vx-format span {
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0.01em;
}

.vx-size {
  font-size: 9.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.vx-bar {
  height: 3px;
  background: var(--line);
  overflow: hidden;
}

.vx-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 120ms linear;
}

.vx-status {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9.5px;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------- tool switcher

   Every tool, one row, in the sidebar header. See ui/tool-switcher.js for why
   this wraps instead of scrolling or overflowing: it's the fix for the old
   per-page picker bleeding out past the sidebar and under the canvas. */

.tool-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}

.tool-switcher a {
  padding: 4px 9px;
  border: 1px solid var(--line);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.tool-switcher a:hover { color: var(--ink); border-color: var(--ink); }
.tool-switcher a.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.tool-switcher a.all-tools {
  border: 0;
  padding: 4px 2px;
  align-self: center;
  color: var(--ink-soft);
}
.tool-switcher a.all-tools:hover { color: var(--ink); }

/* Separated from "All tools" so the two don't read as one phrase. Both stay
   borderless — they navigate away from the tool rather than between tools, and
   giving them the chips' outline would put them in the same visual class as
   the eight things this row is actually for. */
.tool-switcher a.all-tools.account { margin-left: 10px; }