/* ============================================================
   Learning Activity Estimator — page-specific styles
   Loaded after base.css and document.css.
   ------------------------------------------------------------
   This page was the Course Workload Estimator until September 14,
   2026, when it was scoped down from a per-week course workload
   calculator to an estimator for individual learning activities
   (see CLAUDE.md, "Learning Activity Estimator notes"). The
   stylesheet is the estimator's restyle of the same day, with the
   course-level pieces (the independent/contact tag, the share bar,
   the slider) removed.

   Load order:  base.css -> document.css -> this -> site_header.css

   The step cards (section.step, .step-body, .step-num, .step-lead)
   come from document.css, where they are shared with the planner and
   the credit hour planner. Only the summary readout (::after, below)
   is this page's own.
   ============================================================ */

:root {
  --content-width: 900px; /* matches the Course Content Planner */
}

.subtitle {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* The short orientation lines under the subtitle. Left-aligned body text,
   matching the planner — not a second, smaller subtitle. */
.lede {
  margin: 6px 0;
  line-height: 1.5;
}

a { color: var(--red); }

a:hover,
a:focus { color: var(--red-dark); }

/* ============================================================
   Collapsible sections  (the cards themselves are in document.css)
   ============================================================ */

/* A short right-aligned readout on the summary line, so a collapsed section
   still says what it estimates. Written by the JS into `data-sum` on the
   <summary> and drawn as generated content, NOT as a child element.

   That is deliberate. As a real <span> inside the <summary> it broke
   WCAG 2.5.3 (label in name): the float puts a space between the readout
   and the heading in the rendered label, while the summary's text content —
   which is where the accessible name comes from — has no space, so the
   visible label was not a substring of the accessible name.
   verify_css_extraction.js catches exactly this. As generated content the
   readout is outside textContent entirely, and Chrome folds it into both
   the visible label and the accessible name identically.

   Empty string when the section has nothing in it, so an untouched
   section's label is just its heading. */
.step-body > summary::after {
  content: attr(data-sum);
  float: right;
  font-size: 14px;
  font-weight: normal;
  color: var(--red-dark);
  font-variant-numeric: tabular-nums;
  margin-left: 12px;
  padding-top: 5px;
}

/* ---- guidance panel extras (the base panel is in document.css) ---- */

.guide { line-height: 1.55; }
.guide p { margin: 10px 0 4px 0; }
.guide p:first-of-type { margin-top: 4px; }

/* ============================================================
   Form controls — the planner's treatment: bordered boxes on
   white, bold labels.
   ============================================================ */

label {
  font-weight: bold;
}

input[type="number"],
input[type="text"],
select {
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--surface);
  box-sizing: border-box;
}

input[type="number"] {
  width: 110px;
}

select {
  max-width: 100%;
}

/* The focus outline itself comes from base.css; this is the wash. */
input:focus,
select:focus { background: var(--blue-light); }

/* Fields wrap across the section's width rather than running one to a
   line — the same arrangement as the planner's .basics row. The page is
   still a single column of sections. */
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  margin-bottom: 4px;
}

.fields > .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.hint {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  margin: 6px 0 0;
  line-height: 1.45;
}

.fields .hint { max-width: 32rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: 15px;
  margin-top: 12px;
}

.check input {
  margin-top: .3rem;
  accent-color: var(--red);
}

.check label {
  margin: 0;
  font-weight: normal;
}

/* The readout row under a section's inputs: the looked-up rate (where
   there is one) and the section's estimate in hours. */
.rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  background: var(--blue-light);
  border-radius: 6px;
  padding: .55rem .8rem;
  margin: 16px 0 0;
  font-size: 15px;
}

.rate strong {
  font-size: 1.05rem;
  color: var(--red-dark);
}

.rate .est {
  margin-left: auto;
}

/* ============================================================
   Results
   ============================================================ */

#h-est {
  text-align: center;
  font-size: 24px;
  margin: 32px 0 12px;
}

.results {
  background: var(--surface);
  border: 2px solid var(--red);
  border-radius: 8px;
  padding: 20px 24px;
}

.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.total {
  background: var(--blue-light);
  border-radius: 8px;
  padding: .8rem;
  text-align: center;
  margin: 0;
}

.total .num { display: block; font-size: 1.7rem; color: var(--red); font-weight: bold; line-height: 1.2; }
.total .lab { display: block; font-size: .85rem; color: var(--text); }
.total .sub { display: block; font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.total.primary { background: var(--red); }
.total.primary .num { color: var(--surface); }
.total.primary .lab { color: var(--surface); }
.total.primary .sub { color: var(--red-pale); }

/* ---- breakdown table ---- */

table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; font-size: 15px; color: var(--muted); padding-bottom: .4rem; }
th, td { padding: .4rem .45rem; text-align: left; border-bottom: 1px solid var(--blue-mid); vertical-align: top; }
thead th { background: var(--blue-light); color: var(--text); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.detail { color: var(--text-soft); font-size: 14px; }
td.empty { color: var(--muted); font-style: italic; }
tfoot td { font-weight: bold; border-top: 2px solid var(--blue); border-bottom: none; }

/* ---- callouts ---- */

.warn {
  background: var(--red-wash);
  border-left: 4px solid var(--red);
  padding: .6rem .8rem;
  margin: 0 0 .9rem;
  font-size: 15px;
}

/* ---- buttons ---- */

button {
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}

.actions button {
  padding: 8px 20px;
  font-size: 15px;
  background: var(--red);
  color: var(--surface);
  border: 2px solid var(--red);
}

.actions button:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.actions button.secondary {
  background: var(--surface);
  color: var(--blue);
  border-color: var(--blue);
}

.actions button.secondary:hover { background: var(--blue-light); }

/* ---- generated report ---- */

#reportWrap {
  background: var(--surface);
  border: 2px solid var(--red);
  border-radius: 8px;
  padding: 24px;
  margin-top: 24px;
}

#reportWrap h2 { margin-top: 0; }

#reportWrap pre {
  font-family: inherit;
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.5;
}

footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--blue-mid);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

footer a { color: var(--blue); }

/* ---- printing: show only the generated report ----
   The hide rule must target `main > :not(#reportWrap)`. An earlier
   `body > ...` selector hid <main> itself and printed a blank page. */
@media print {
  body {
    background: var(--surface);
    max-width: none;
    margin: 0;
    padding: 0;
  }

  main > :not(#reportWrap) { display: none !important; }

  #reportWrap {
    display: block !important;
    border: none;
    padding: 0;
    margin: 0;
  }

  .actions { display: none !important; }
}

@media (max-width: 640px) {
  section.step { padding: 16px 14px; }
  .fields > .field { flex: 1 1 100%; }
  select, input[type="number"] { width: 100%; }
  .rate .est { margin-left: 0; }
}