/* ============================================================================
   Timecode Converter — tool layer.

   base.css is loaded immediately before this file and owns everything
   structural: reset, body, links, focus rings, headings, forms, .panel,
   .btn, .chip, tables, details, header, footer, .wrap, .badge, .stat.

   This file sets the tool's accent and styles only what is specific to a
   timecode converter: the tab strip, the result lists and the arithmetic
   layout.

   Accent — orange. Measured with a WCAG relative-luminance script against
   the shared palette in base.css (public/base.css):

     dark   #fb923c on --bg      #0e1116   8.36:1
            #fb923c on --surface #161a21   7.71:1
     light  #c2410c on --bg      #fbfaf8   4.96:1
            #c2410c on --surface #ffffff   5.18:1

   Both clear the 4.5:1 text threshold against both surfaces in both themes.

   base.css's shared .tab[aria-selected="true"] rule paints accent-coloured
   text directly on --accent-dim, so that composited colour was checked too.
   At the requested alpha (0.14 dark / 0.10 light), the dark composite
   (#362b25) gives 6.07:1 — comfortably clear — but the light composite
   (#f9ece7) gives 4.483:1, a hair under 4.5 because the light accent's raw
   contrast (4.96–5.18) is lower than the dark accent's (7.71–8.36) to begin
   with. Light alpha was lowered from the requested 0.10 to 0.09 to clear
   the threshold: composited over --surface that is #faeee9, 4.555:1.
   ========================================================================= */

:root {
  --accent:     #fb923c;
  --accent-dim: rgba(251, 146, 60, 0.14);
}

@media (prefers-color-scheme: light) {
  :root {
    --accent:     #c2410c;
    --accent-dim: rgba(194, 65, 12, 0.09);
  }
}

/* --------------------------------------------------------------- utility -- */

[hidden] { display: none !important; }

main ul, main ol { padding-left: 1.25em; margin: 0 0 1.1em; }
main li { margin-bottom: 0.4em; }

/* -------------------------------------------------------- the instrument -- */

.tool { margin-bottom: 2rem; }

.tool .field { margin-bottom: 1rem; }
.tool .field:last-child { margin-bottom: 0; }

/* Every control in the tool is one box of one height, and grid rows line
   their fields up from the top. Without this, a two-column .grid stretches
   its cells to equal height and each .field's own grid (align-content:
   normal = stretch) then pushes the extra space INTO the label and input
   rows — so two identical inputs rendered at different heights and offsets.
   Pinning both axes to the start keeps controls at their natural size and
   top-aligned. */
.tool .grid { align-items: start; }
.tool .field { align-content: start; }

/* Mono inputs and selects share the same type size, so a row mixing the two
   (the arithmetic tab pairs an input with a select) matches in height. */
.tool input.mono,
.tool select {
  font-size: 1rem;
}

input.mono {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.tc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 1rem 0 1.25rem;
  padding: 0.2rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.tc-tabs .tab {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.tc-tabs .tab:hover { color: var(--text); }
.tc-tabs .tab[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

@media (max-width: 30rem) {
  .tc-tabs { border-radius: var(--radius); }
  .tc-tabs .tab { flex: 1 1 auto; text-align: center; }
}

/* -------------------------------------------------------------- results --- */

.results {
  margin: 1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.results .row {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: 0.3rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.results .row:last-child { border-bottom: 0; }
.results dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.results dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.results .row:first-child dd,
.results .row:nth-child(1) dd {
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 600;
}

@media (max-width: 30rem) {
  .results .row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------------- math controls --- */

#mathOpWrap select { font-family: var(--mono); font-weight: 600; }

/* ------------------------------------------------------------ card links -- */

.card-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.card-links li { margin: 0; }
.card-links a {
  display: block;
  height: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.card-links a:hover { border-color: var(--accent); background: var(--surface-2); }
.card-links strong { display: block; font-size: 0.9375rem; }
.card-links span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.card-links a:hover span { color: var(--accent); }

/* -------------------------------------------------------- content layer --- */

.content p, .content ul, .content ol { max-width: 68ch; }
.content .card-links { max-width: none; }
.content h2:first-child { margin-top: 0; }

.example { margin-bottom: 1rem; }
.example h3 { margin-top: 0; }
.example > :last-child { margin-bottom: 0; }
.example pre { background: var(--surface); }

details .answer > :last-child { margin-bottom: 0; }

.sources { font-size: 0.9375rem; }
.sources li { margin-bottom: 0.6em; }
.source-note { color: var(--text-dim); }

.callout {
  margin: 1.4em 0;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-dim);
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout > :last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }