/* ============================================================================
   Aspect Ratio Calculator — tool layer over ../base.css

   base.css supplies the reset, type, header, forms, .panel, .chip, .readout,
   tables, FAQ and footer. This file sets the accent and styles only what is
   specific to this instrument: the linked field pairs, the lock toggle, the
   proportion preview and the resolution list.

   Accent — teal, measured against base.css surfaces:
     dark  #2dd4bf  10.16:1 on --bg   9.37:1 on --surface
     light #0f766e   5.21:1 on --bg   5.43:1 on --surface
   ========================================================================= */

:root {
  --accent:     #2dd4bf;
  --accent-dim: rgba(45, 212, 191, 0.14);
  --measure:    70ch;              /* reading width for the prose columns */
}

@media (prefers-color-scheme: light) {
  :root {
    --accent: #0f766e;
    /* 0.08, not 0.10: at 10% the accent-on-accent-dim pairing used by pressed
       chips and the current nav link measured 4.35:1. At 8% it is 4.65:1 on
       --bg and 4.86:1 on --surface, so small accent text on a tint clears AA. */
    --accent-dim: rgba(15, 118, 110, 0.08);
  }
}

.brand svg { color: var(--accent); }   /* the wordmark glyph is a drawn frame */

/* Prose keeps a readable measure; the instrument, tables and chip rows use the
   full width of .wrap. */
main .wrap > p, main .wrap > ul, main .wrap > ol,
main .wrap > details, main .wrap > .card, main .wrap > .callout { max-width: var(--measure); }
main .wrap > .pill-links { max-width: none; }

/* ------------------------------------------------------------ the calculator */

.calc.mini { padding: clamp(0.875rem, 2.5vw, 1.15rem); }

/* headings inside the instrument are section labels, not page headings */
.calc h2 {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
  margin: 1.5rem 0 0.1rem;
}

.presets { align-items: center; margin-bottom: 1.1rem; }
.presets-label { margin-right: 0.15rem; }

/* calc.js builds these with class="preset", so they cannot carry .chip —
   they are styled to be indistinguishable from one. */
.preset {
  font-family: var(--mono); font-size: 0.78125rem;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.7rem; cursor: pointer; white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.preset:hover { color: var(--text); border-color: var(--line-strong); }
.preset[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* the three linked fields — two labelled sub-panels, tied together by the lock */

.calc .grid { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1rem 1.25rem; }

.group { border: 0; margin: 0; padding: 0; min-width: 0; }
.group legend { padding: 0; margin-bottom: 0.4rem; }

.pair {
  display: flex; align-items: end; gap: 0.55rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.7rem 0.8rem;
}
.pair .field { flex: 1 1 0; }
.pair .sep {
  flex: 0 0 auto; font-family: var(--mono); font-size: 0.9375rem;
  color: var(--text-faint); padding-bottom: 0.45rem;
}

.calc input[type="number"] {
  font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0.01em; appearance: textfield; -moz-appearance: textfield;
}
.calc input::-webkit-outer-spin-button,
.calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc input[aria-invalid="true"] { border-color: var(--err); }

/* lock — the state is spelled out, never a matter of squinting at a checkbox */

.lock {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.9rem; padding: 0.5rem 0.65rem 0.5rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.875rem; cursor: pointer;
}
.lock input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.lock .hint { color: var(--text-dim); font-size: 0.8125rem; }
.lock::after {
  content: "off"; flex: 0 0 auto; margin-left: auto;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-faint);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.05rem 0.5rem;
}
.lock:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.lock:has(input:checked)::after { content: "on"; color: var(--accent); border-color: var(--accent); }

/* readout — the type comes from base.css; only the box and the second line here */

.readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem;
  line-height: 1.25; margin-top: 1rem; padding: 0.8rem 1rem 0.9rem;
  background: var(--bg-sunk); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: var(--radius-sm);
}
.readout::before {
  content: "Result"; flex: 0 0 100%; line-height: 1.6;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.readout .sub {
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 400;
  letter-spacing: 0; color: var(--text-dim);
}

.note { margin: 0.8rem 0 0; }
.note:empty { display: none; }

/* shape preview — calc.js sets the box size inline and reserves 32px of
   horizontal room inside the wrapper, hence the 1rem sides. The caliper
   brackets live in that padding. The box tops out at 158px tall (110px in a
   .mini calculator), so a full-width field would maroon it in empty space. */

.preview-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 13rem; max-width: 30rem; margin: 1rem auto 0;
  padding: 2rem 1rem 1.5rem;
  background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.preview-wrap.small { min-height: 10.75rem; }
.preview-wrap::before {
  content: "Proportion"; position: absolute; top: 0.55rem; left: 0.85rem;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}

.preview-box {
  position: relative; display: flex; align-items: center; justify-content: center;
  max-width: 100%; background: var(--surface);
  border: 1px solid var(--accent); border-radius: 2px;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--accent);
}
.preview-box::before {   /* width caliper, under the box */
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.5rem; height: 4px;
  border: 1px solid var(--line-strong); border-top: 0;
}
.preview-box::after {    /* height caliper, right of the box */
  content: ""; position: absolute; top: 0; bottom: 0; right: -0.5rem; width: 4px;
  border: 1px solid var(--line-strong); border-left: 0;
}

/* nearest standard resolutions — a JS-built list, styled as the shared table */

.res-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.res-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.75rem;
  margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--line);
}
.res-list li:first-child { border-top: 1px solid var(--line-strong); }
.res-list li:last-child { border-bottom: 0; }
.res-list .dim {
  flex: 0 0 auto; min-width: 8.5rem; font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1; font-size: 0.9375rem; font-weight: 600;
}
.res-list .tag { flex: 1 1 10rem; font-size: 0.8125rem; color: var(--text-dim); }
.res-list .use {
  flex: 0 0 auto; margin-left: auto;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.15rem 0.6rem; cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.res-list .use:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* ------------------------------------------------------------- page content */

.card { margin-bottom: 1rem; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

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

.pill-links { list-style: none; margin: 0 0 2rem; padding: 0; }
.pill-links li { margin: 0; }
.pill-links .chip { padding: 0.4rem 0.85rem; }

.table-scroll table { min-width: 34rem; }
.table-scroll th, .table-scroll td { vertical-align: top; }
td.num, th.num { white-space: nowrap; }

/* ------------------------------------------------------------ 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-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.card-links a:hover span { color: var(--accent); }