/* ============================================================================
   Grade Calculator — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — amber-orange (school-ledger warm tone), measured against base.css
   surfaces (WCAG relative luminance):
     dark  #fdba74  11.21:1 on --bg   10.34:1 on --surface   11.61:1 on --bg-sunk
     light #9a3412   7.00:1 on --bg    7.31:1 on --surface    6.42:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #fdba74; --accent-dim: rgba(253, 186, 116, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #9a3412; --accent-dim: rgba(154, 52, 18, 0.10); }
}

/* base has no visually-hidden helper; per-row cell labels need one so a
   sighted user reads the column header while a screen reader still gets a
   real <label for> tied to each input. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* ---------------------------------------------------------------- panels -- */
/* Both calculators sit in their own .panel; .tool-bay (base.css) supplies the
   bottom margin that separates the pair from the reference content below. */

.calc-panel > h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
}
.calc-panel .hint {
  font-size: 0.9375rem;
  color: var(--text-dim);
  max-width: 60ch;
  margin: 0 0 1.1rem;
}
.calc-panel + .calc-panel { margin-top: 1.5rem; }

/* ------------------------------------------------------------ grade table -- */

.grade-table { width: 100%; }
.grade-table th.num, .grade-table td.num { width: 8.5rem; }
.grade-table td { vertical-align: middle; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.grade-table input[type="text"],
.grade-table input[type="number"] {
  font-size: 0.9375rem;
  padding: 0.4rem 0.55rem;
}
.row-remove-cell { width: 2.75rem; text-align: right; padding-right: 0 !important; }
.row-remove {
  padding: 0.4rem 0.6rem;
  line-height: 1;
  font-size: 1rem;
}

/* ------------------------------------------------------------------ result -- */

.calc-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.calc-result .stat { flex: 0 0 auto; }

/* ------------------------------------------------------------------ fields -- */

.fields-inline {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-bottom: 1.1rem;
}

/* ------------------------------------------------------------------- scale -- */

.scale-table td.num, .scale-table th.num { font-family: var(--mono); }

/* --------------------------------------------------------------- pagelinks -- */

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

/* ----------------------------------------------------------------- noscript -- */

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}