/* GradeKind — styles
   Palette: white cards on a very light neutral background, deep navy
   text, restrained teal accents. Readable sans-serif type. Subtle
   borders, modest corner rounding, minimal shadow. No decorative motion. */

:root {
  --color-bg: #f5f6f4;
  --color-card: #ffffff;
  --color-border: #dde1e0;
  --color-navy: #1c2b3a;
  --color-navy-soft: #48586a;
  --color-teal: #1f7a72;
  --color-teal-dark: #16564f;
  --color-teal-tint: #e6f2f0;
  --color-error: #9c3b2e;
  --color-error-tint: #fbecea;
  --color-focus: #0f5c9c;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 1px 2px rgba(28, 43, 58, 0.06), 0 1px 1px rgba(28, 43, 58, 0.04);

  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --content-max: 1080px;
}

@media (prefers-reduced-motion: no-preference) {
  :root { --transition-fast: 120ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-navy);
  line-height: 1.5;
  font-size: 16px;
}

a { color: var(--color-teal-dark); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- Header / nav ---------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card);
}

.nav-bar {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-navy);
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  gap: 4px;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-navy-soft);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-teal-dark);
  background: var(--color-teal-tint);
}

/* ---- Layout ------------------------------------------------------------ */

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.hero {
  text-align: left;
  margin-bottom: 24px;
  max-width: 62ch;
}

.hero h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 10px;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.hero p {
  margin: 0;
  color: var(--color-navy-soft);
  font-size: 1.05rem;
}

.hero .tagline {
  margin-top: 6px;
  color: var(--color-teal-dark);
  font-weight: 600;
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .calculator-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.card h2 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--color-navy);
}

/* ---- Mode toggle --------------------------------------------------- */

.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  background: var(--color-bg);
  margin-bottom: 18px;
}

.mode-toggle button {
  border: none;
  background: transparent;
  padding: 10px 18px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-navy-soft);
  cursor: pointer;
  min-height: 44px;
}

.mode-toggle button[aria-pressed="true"] {
  background: var(--color-teal);
  color: #fff;
}

/* ---- Form elements --------------------------------------------------- */

.field {
  margin-bottom: 18px;
}

.field label,
.field legend {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-navy);
  font-size: 0.95rem;
  padding: 0;
}

.field input[type="text"],
.field input[type="number"] {
  width: 100%;
  font-size: 1.05rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 44px;
  background: #fff;
  color: var(--color-navy);
}

.field input.has-error {
  border-color: var(--color-error);
  background: var(--color-error-tint);
}

.field-hint {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-navy-soft);
}

.field-error {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--color-error);
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-error);
  color: #fff;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 1px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}

.toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.toggle-group label {
  margin: 0;
}

.toggle-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-group span {
  display: block;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-navy-soft);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--color-border);
}

.toggle-group label:last-child span {
  border-right: none;
}

.toggle-group input[type="radio"]:checked + span {
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
}

.toggle-group input[type="radio"]:focus-visible + span {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-teal);
  color: #fff;
}
.btn-primary:hover { background: var(--color-teal-dark); }

.btn-secondary {
  background: #fff;
  color: var(--color-navy);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg); }

.btn-text {
  background: transparent;
  color: var(--color-teal-dark);
  border: none;
  padding: 10px 6px;
  text-decoration: underline;
}

/* ---- Result card --------------------------------------------------- */

.result-percentage {
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
  margin: 6px 0 4px;
}

.result-grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 6px 16px;
  border-radius: 999px;
  margin: 8px 0 16px;
}

.result-earned {
  color: var(--color-navy-soft);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.result-scale-note {
  font-size: 0.9rem;
  color: var(--color-navy-soft);
  margin-bottom: 16px;
}

.result-empty {
  color: var(--color-navy-soft);
  font-style: normal;
  padding: 20px 0;
}

details.explain {
  margin-top: 14px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

details.explain summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-teal-dark);
  min-height: 44px;
  display: flex;
  align-items: center;
}

details.explain[open] summary { margin-bottom: 8px; }

.explain-body {
  font-size: 0.92rem;
  color: var(--color-navy-soft);
}
.explain-body code {
  background: var(--color-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- Grading scale editor ------------------------------------------ */

.scale-section {
  margin-top: 24px;
}

.scale-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.scale-row:last-of-type { border-bottom: none; }

.scale-grade-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scale-row.current {
  background: var(--color-teal-tint);
  border-radius: var(--radius-sm);
  padding-left: 8px;
  padding-right: 8px;
}

.scale-threshold-input {
  width: 100px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  min-height: 44px;
}

.scale-error {
  color: var(--color-error);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 10px;
}

.scale-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ---- Chart ----------------------------------------------------------- */

.chart-section { margin-top: 24px; }

.chart-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}

.chart-controls .field { margin-bottom: 0; }

.chart-note {
  font-size: 0.88rem;
  color: var(--color-navy-soft);
  margin-bottom: 12px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

table.grade-chart {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 480px;
}

table.grade-chart caption {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--color-navy-soft);
}

table.grade-chart th,
table.grade-chart td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

table.grade-chart th {
  background: var(--color-bg);
  font-weight: 700;
  color: var(--color-navy);
}

table.grade-chart tr.current-row {
  background: var(--color-teal-tint);
  font-weight: 700;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ---- Content pages / sections ---------------------------------------- */

.content-section {
  margin-top: 40px;
  max-width: 72ch;
}

.content-section h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.content-section h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--color-navy);
}

.faq-item { margin-bottom: 18px; }

footer.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 48px;
  padding: 24px 20px;
  color: var(--color-navy-soft);
  font-size: 0.88rem;
}

footer.site-footer .footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer.site-footer a { color: var(--color-navy-soft); }

/* ---- Visually hidden but screen-reader accessible --------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Storage / privacy banner ---------------------------------------- */

.storage-note {
  background: var(--color-teal-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--color-teal-dark);
  margin-bottom: 20px;
  display: none;
}
.storage-note.visible { display: block; }

/* ---- Print ------------------------------------------------------------ */

@media print {
  .no-print,
  .site-header,
  .site-footer,
  .btn,
  .mode-toggle,
  .pagination,
  .chart-controls,
  nav {
    display: none !important;
  }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #999; }
  .page { padding: 0; max-width: 100%; }
  .print-only { display: block !important; }
}

.print-only { display: none; }
 .badge-controls { margin:16px 0; padding:14px; border:1px solid #51877e; border-radius:8px; }
 .badge-switch { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:600; }
 .badge-switch input { width:20px; height:20px; flex-shrink:0; }
 #badge-options label { display:block; margin:12px 0 6px; font-weight:600; }
 #badge-options input, #badge-options select { width:100%; min-width:0; min-height:44px; font:inherit; padding:8px; border:1px solid #51877e; border-radius:6px; }
 .encouragement-badge { display:flex; align-items:center; gap:14px; padding:14px; margin:16px 0; border:2px solid currentColor; border-radius:12px; color:#176c61; background:#edf8f5; break-inside:avoid; }
 .encouragement-badge span { flex-shrink:0; display:flex; }
 .encouragement-badge strong { overflow-wrap:anywhere; min-width:0; }
 @media print { .encouragement-badge { color:#000; background:#fff; } }

/* Verified responsive and hidden-state overrides. */
[hidden] { display:none !important; }
.mode-recovery { margin-top:8px; white-space:normal; text-align:left; max-width:100%; }
.field input[type="text"] {
  background:#edf8f5;
  border:2px solid #51877e;
  color:#182f34;
  min-height:56px;
  font-size:1.25rem;
  font-weight:600;
  padding:12px 14px;
  border-radius:8px;
}
.field input[type="text"]:hover { border-color:#216b60; }
.field input[type="text"]:focus {
  background:#fff;
  border-color:#12685d;
  outline:3px solid #12685d;
  outline-offset:2px;
}
.field input[type="text"].has-error {
  background:#fff1ef;
  border-color:#a33125;
}
.field input[type="text"].has-error:focus { outline-color:#a33125; }
.table-wrap { position:relative; }
.calculator-grid > *, .card, .page { min-width:0; }
.table-wrap { width:100%; max-width:100%; overflow-x:auto; }
.grade-chart caption { white-space:normal; overflow-wrap:anywhere; }
.result-scale-note, .content-section { overflow-wrap:anywhere; }
.chart-controls { flex-wrap:wrap; }
.field-error:empty { display:none; }
@media (max-width:600px) {
 table.grade-chart { min-width:0; table-layout:fixed; font-size:.8rem; }
 table.grade-chart th,table.grade-chart td { padding:8px 4px; overflow-wrap:anywhere; }
 .nav-bar { padding:8px 12px; gap:8px; }
 .main-nav a { padding:8px; font-size:.85rem; }
 .brand { font-size:1rem; gap:6px; }
 .hero p { font-size:.95rem; }
 #questions-panel, #points-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
 #questions-panel > p, #points-panel > p { grid-column:1/-1; margin:0!important; }
 #questions-panel fieldset, #points-panel fieldset { grid-column:1/-1; order:1; margin:0; }
 #questions-panel > .field, #points-panel > .field { order:2; min-width:0; }
 /* Shared label and input rows keep wrapped labels from shifting a box. */
 #questions-panel > .field > label, #points-panel > .field > label { min-height:3em; }
 @supports (grid-template-rows: subgrid) {
  #questions-panel > .field, #points-panel > .field {
   display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0;
  }
  #questions-panel > .field > label, #points-panel > .field > label { min-height:0; }
  #questions-panel > .field > input, #points-panel > .field > input { align-self:start; }
 }
 #questions-panel legend, #points-panel legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .page { padding:16px 12px; }
 .hero { margin-bottom:16px; }
 .hero h1 { font-size:1.55rem; }
 .hero .tagline { display:none; }
 .card { padding:18px; }
 .field { margin-bottom:14px; }
 .main-nav { gap:8px; }
 .scale-row { grid-template-columns:40px minmax(0,1fr); gap:8px; }
 .scale-row > :last-child:empty { display:none; }
 .result-percentage { font-size:2.8rem; }
}
@media print {
 .hero,.calculator-grid,#scale-section,.storage-note,#clear-prefs-btn { display:none!important; }
 .table-wrap { overflow:visible; }
 table.grade-chart td,table.grade-chart th { padding:5px 8px; }
 table { font-size:10pt; }
 tr { break-inside:avoid; }
 thead { display:table-header-group; }
 @page { margin:14mm; }
}