/* ============================================================
   Charisma Workspace — shared lesson stylesheet
   Tufte-influenced: generous measure, sidenotes, restrained
   palette, prints cleanly on A4/Letter.
   Linked by every lesson and reference document.
   ============================================================ */

@media screen {
  :root {
    --ink:        #16150f;
    --ink-soft:   #55524a;
    --ink-faint:  #8a8880;
    --paper:      #fffef9;
    --rule:       #ddd9cc;
    --rule-soft:  #ebe7db;
    --accent:     #9a2b1e;   /* drill / action */
    --accent-2:   #2b5c74;   /* evidence / citation */
    --wash:       #f5f2e8;
    --wash-warn:  #fdf3ef;
    --wash-cool:  #eef3f6;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --ink:        #e8e4d8;
    --ink-soft:   #a8a49a;
    --ink-faint:  #78756d;
    --paper:      #16150f;
    --rule:       #38362e;
    --rule-soft:  #2a2822;
    --accent:     #e5745f;
    --accent-2:   #7fb3cc;
    --wash:       #1e1d16;
    --wash-warn:  #251c18;
    --wash-cool:  #172026;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0 auto;
  padding: 4rem 2rem 8rem;
  max-width: 46rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  font-kerning: normal;
  font-variant-numeric: oldstyle-num;
  text-rendering: optimizeLegibility;
}

/* ---------- Site nav ------------------------------------- */

.sitenav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variant-numeric: normal;
  color: var(--ink-faint);
  padding-bottom: 0.9rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--rule-soft);
}

.sitenav a {
  color: var(--ink-faint);
  border-bottom: none;
}
.sitenav a:hover { color: var(--accent-2); background: none; }

.sitenav .home {
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.sitenav .home::before { content: "\2190\00a0\00a0"; }

.sitenav .here {
  color: var(--ink);
  margin-right: auto;
}

/* ---------- Prev / next pager ---------------------------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 2rem 0 0;
}

.pager a {
  display: block;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 0.75rem 0.95rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.3;
}
.pager a:hover { background: var(--wash); border-color: var(--rule); }

.pager .dir {
  display: block;
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: normal;
  margin-bottom: 0.25rem;
}

.pager .next { grid-column: 2; text-align: right; }
.pager .prev { grid-column: 1; }

@media (max-width: 34rem) {
  .pager { grid-template-columns: 1fr; }
  .pager .next, .pager .prev { grid-column: 1; text-align: left; }
}

/* ---------- Index hub ------------------------------------ */

.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 1.4rem 0 2.4rem;
}

.hub-card {
  display: block;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.2rem 1.1rem;
  color: var(--ink);
}
.hub-card:hover { background: var(--wash); border-left-color: var(--accent); }

.hub-card .kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: normal;
  margin-bottom: 0.45rem;
}

.hub-card .name {
  font-size: 1.16rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.hub-card .blurb {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.hub-card.lead-card { border-left-color: var(--accent); background: var(--wash-warn); }
.hub-card.expiring .kicker { color: var(--accent); }

/* Compact single-column list for the workspace documents. */
.hub.hub-plain { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hub-plain .hub-card { padding: 0.8rem 1rem 0.9rem; }
.hub-plain .name { font-size: 1.02rem; }

/* ---------- Masthead ------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
}

.eyebrow {
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: normal;
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.eyebrow .sep { color: var(--rule); }

h1 {
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}

.dek {
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

h2 {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.85rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule-soft);
}

h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 2rem 0 0.6rem;
  letter-spacing: 0.005em;
}

h4 {
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  font-variant-numeric: normal;
  margin: 1.5rem 0 0.5rem;
}

p { margin: 0 0 1.1rem; }
p.lead { font-size: 1.1rem; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-2);
  padding-bottom: 0.5px;
}
a:hover { background: var(--wash-cool); }

em { font-style: italic; }
strong { font-weight: 600; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.45rem; }
li > ul, li > ol { margin-top: 0.45rem; margin-bottom: 0.3rem; }

hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 2.5rem 0;
}

code, kbd, .mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 0.86em;
  font-variant-numeric: normal;
}

/* ---------- Citations & sidenotes ------------------------ */

.cite {
  font-size: 0.83em;
  color: var(--accent-2);
  border-bottom: none;
  white-space: nowrap;
}
.cite:hover { background: var(--wash-cool); }

.sidenote {
  font-family: ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 1.4rem 0;
}

@media screen and (min-width: 1180px) {
  .sidenote {
    float: right;
    clear: right;
    width: 14rem;
    margin-right: -17rem;
    margin-top: 0.3rem;
    border-left: none;
    border-top: 1px solid var(--rule);
    padding: 0.6rem 0 0;
  }
}

/* ---------- Callout blocks ------------------------------- */

.box {
  background: var(--wash);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
}
.box > :last-child { margin-bottom: 0; }
.box > h4:first-child { margin-top: 0; }

.box-drill  { background: var(--wash-warn); border-left: 3px solid var(--accent); }
.box-key    { background: var(--wash-cool); border-left: 3px solid var(--accent-2); }
.box-warn   { background: var(--wash-warn); border-left: 3px solid var(--accent); }

.rule-card {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: var(--paper);
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
  border-radius: 3px;
}
.rule-card .rule-name {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.rule-card .rule-body {
  font-size: 1.22rem;
  line-height: 1.4;
}

/* ---------- Tables --------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: 0.94rem;
}
th {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  text-align: left;
  padding: 0.4rem 0.7rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
  font-variant-numeric: normal;
}
td {
  padding: 0.55rem 0.7rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
td:last-child, th:last-child { padding-right: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-scroll { overflow-x: auto; margin: 1.6rem 0; }
.table-scroll table { margin: 0; }

/* ---------- Tally / counting widget ---------------------- */

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 1rem;
}
.tally button {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-faint);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
}
.tally button:hover { border-color: var(--accent); }
.tally button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffef9;
}

/* ---------- Quiz component ------------------------------- */

.quiz { margin: 1.8rem 0; }

.q {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.1rem;
  background: var(--paper);
}
.q .stem { font-weight: 600; margin-bottom: 0.9rem; }
.q .opts { display: flex; flex-direction: column; gap: 0.4rem; }

.q .opt {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.96rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.q .opt:hover:not(:disabled) { background: var(--wash); }
.q .opt:disabled { cursor: default; opacity: 0.75; }
.q .opt.correct {
  border-color: #4a7c59;
  background: rgba(74, 124, 89, 0.13);
  opacity: 1;
}
.q .opt.wrong {
  border-color: var(--accent);
  background: rgba(154, 43, 30, 0.11);
  opacity: 1;
}

.q .why {
  display: none;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.q .why.show { display: block; }

.quiz-score {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-align: right;
  margin-top: 0.6rem;
}

/* ---------- Recall prompt (free retrieval) --------------- */

.recall {
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
  background: transparent;
}
.recall textarea {
  width: 100%;
  min-height: 5rem;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.recall .reveal-btn {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  margin-top: 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 3px;
  cursor: pointer;
}
.recall .reveal-btn:hover { border-color: var(--accent); color: var(--accent); }
.recall .answer { display: none; margin-top: 1rem; font-size: 0.95rem; }
.recall .answer.show { display: block; }

/* ---------- Footer --------------------------------------- */

.footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footer h4 { margin-top: 0; }

.source {
  background: var(--wash-cool);
  border-left: 3px solid var(--accent-2);
  padding: 1.1rem 1.3rem;
  margin: 2rem 0;
  border-radius: 3px;
  font-size: 0.95rem;
}
.source > :last-child { margin-bottom: 0; }

.ask-teacher {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.navlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.82rem;
  margin-top: 1.2rem;
}

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

@media print {
  :root {
    --ink: #000; --ink-soft: #333; --ink-faint: #555;
    --paper: #fff; --rule: #999; --rule-soft: #ccc;
    --accent: #000; --accent-2: #000;
    --wash: #f4f4f4; --wash-warn: #f4f4f4; --wash-cool: #f4f4f4;
  }
  body { padding: 0; max-width: none; font-size: 10.5pt; line-height: 1.45; }
  h1 { font-size: 20pt; }
  h2 { font-size: 13pt; margin-top: 18pt; }
  h2, h3, h4 { page-break-after: avoid; }
  .box, .rule-card, .q, table, .source, .recall { page-break-inside: avoid; }
  .sidenote { float: none; width: auto; margin: 10pt 0; }
  a { border-bottom: none; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 7.5pt;
    color: #666;
    word-break: break-all;
  }
  .cite::after { content: none !important; }
  .no-print, .tally, .recall textarea, .recall .reveal-btn,
  .sitenav, .pager { display: none !important; }
  .hub { display: block; }
  .hub-card { border: none; border-left: 2px solid #999; page-break-inside: avoid; }
  .recall .answer, .q .why { display: block !important; }
}

/* ---------- Self-assessment scale ------------------------ */

.scale {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.3rem 1.5rem;
  margin: 1.8rem 0;
}

.scale-legend {
  display: flex;
  justify-content: space-between;
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
}

.scale-item {
  margin-bottom: 1.1rem;
  font-size: 0.97rem;
  line-height: 1.4;
}
.scale-item:last-of-type { margin-bottom: 0.5rem; }

.scale-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.scale-dot {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-faint);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.12s;
}
.scale-dot:hover { border-color: var(--accent-2); }
.scale-dot.on {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fffef9;
}

.scale-out {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
}

.scale-current {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.scale-history {
  margin-top: 0.9rem;
  font-size: 0.88rem;
}
.scale-history th { font-size: 0.62rem; }

.scale-save {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  margin-top: 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 3px;
  cursor: pointer;
}
.scale-save:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-2); }
.scale-save:disabled { opacity: 0.45; cursor: default; }

@media print {
  .scale-dot { border-color: #000; }
  .scale-save { display: none !important; }
}