/* ============================================================================
   GPA 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: the course table, the weighting toggle, the cumulative
   panel and the result readouts.

   Accent — teal, measured against base.css surfaces (WCAG relative luminance):
     dark  #5eead4  12.78:1 on --bg   11.79:1 on --surface   13.23:1 on --bg-sunk
     light #0c7063   5.73:1 on --bg    5.98:1 on --surface    5.25:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root {
  --accent: #5eead4;
  --accent-dim: rgba(94, 234, 212, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --accent: #0c7063;
    --accent-dim: rgba(12, 112, 99, 0.10);
  }
}

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

/* base has no visually-hidden helper; the table caption needs one */
.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;
}

/* ============================================================================
   The tool bay
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.toolbar-top { margin-bottom: 0.9rem; }

/* ---------------------------------------------------------- weighted note -- */

#weighted-note {
  margin: 0 0 1.1rem;
  color: var(--text-dim);
}

/* ------------------------------------------------------------ course table -- */

#course-table th, #course-table td {
  padding: 0.5rem 0.55rem 0.5rem 0;
  vertical-align: top;
}
#course-table th:first-child, #course-table td:first-child { padding-left: 0; }

#course-table .course-name { min-width: 9rem; }
#course-table .course-credits { width: 5.5rem; min-width: 4.5rem; }
#course-table .course-grade { min-width: 7rem; }
#course-table .course-type { min-width: 9.5rem; }

/* the type column only matters in weighted mode; hide it entirely rather
   than disabling it, so an unweighted table reads as simpler, not broken */
#course-table.mode-unweighted .type-cell { display: none; }

td.remove-cell { width: 2.25rem; text-align: center; }
.row-remove {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------ cumulative -- */

.cumulative-panel {
  margin-top: 1.5rem;
}
.cumulative-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  cursor: pointer;
}
.cumulative-toggle-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.cumulative-fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-top: 1rem;
}

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

.result {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2.25rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.stat-label {
  display: block;
  margin-bottom: 0.2rem;
}

#rows-note {
  margin: 1rem 0 0;
}

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.formula, .callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
}
.formula {
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}
.callout {
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.example {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  margin: 0 0 1rem;
}
.example h3 { margin-top: 0; }
.example p:last-child { margin-bottom: 0; }

.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; }

.tag-pass { color: var(--ok);  font-weight: 600; }
td .mono, th .mono { white-space: nowrap; }

.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;
}