/* AI Policy Lab pages: reading layer.
   Loaded last on ai-policy-lab.html and ai-policy-workbook.html.
   Goals: body text at 17px or larger, every text color at 7:1 or better on white,
   no uppercase tracked labels, no colored rules under headings, no card grids.
   Red is kept for links, the primary button, focus, and the active page. */

:root {
  --pl-text: #1F1F1F;      /* 16.5:1 on white */
  --pl-muted: #4D4D4D;     /* 8.4:1 on white */
  --pl-rule: #D9D9D9;
  --pl-panel: #F6F6F6;
  --pl-measure: 68ch;
}

[hidden] { display: none !important; }

/* ── Shared reading type ── */
.pl-page,
.wb-main {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--pl-text);
}
.pl-page p,
.wb-main p { color: var(--pl-text); }
.pl-page h2,
.wb-main h2 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.75rem; color: var(--pl-text); }
.pl-page h3,
.wb-main h3 { font-size: 1.25rem; line-height: 1.3; margin: 2.25rem 0 0.5rem; color: var(--pl-text); }
.wb-main h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--pl-text); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ════════════════════════════════════════════
   POLICY LAB PAGE
   ════════════════════════════════════════════ */
.pl-page { max-width: 1100px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }
.pl-page > * { max-width: var(--pl-measure); }
.pl-page .pl-title { font-size: 2.6rem; line-height: 1.15; margin: 0 0 1rem; }
.pl-page .pl-lede { font-size: 1.25rem; line-height: 1.55; color: var(--pl-text); margin: 0 0 2rem; }
.pl-page section { margin-top: 3.25rem; }
.pl-page p { margin: 0 0 1.1rem; }

/* At a glance: a definition list, read top to bottom */
.pl-facts { display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem 1.5rem; margin: 0; padding: 1.25rem 0; border-top: 1px solid var(--pl-rule); border-bottom: 1px solid var(--pl-rule); }
.pl-facts dt { font-weight: 600; color: var(--pl-text); }
.pl-facts dd { margin: 0; color: var(--pl-text); }

/* Materials: a plain list with one line each */
.pl-materials { list-style: none; margin: 1rem 0 0; padding: 0; }
.pl-materials li { padding: 0.9rem 0; border-bottom: 1px solid var(--pl-rule); }
.pl-materials li:first-child { border-top: 1px solid var(--pl-rule); }
.pl-materials a { font-weight: 600; font-size: 1.1rem; }
.pl-materials span.pl-desc { display: block; color: var(--pl-muted); margin-top: 0.15rem; }

.pl-talks { list-style: none; margin: 1rem 0 0; padding: 0; }
.pl-talks li { margin: 0 0 1.25rem; }
.pl-talks strong { display: block; }
.pl-page .pl-note { color: var(--pl-muted); }

@media (max-width: 640px) {
  .pl-facts { grid-template-columns: 1fr; gap: 0.15rem; }
  .pl-facts dd { margin-bottom: 0.75rem; }
  .pl-page .pl-title { font-size: 2.1rem; }
}

/* ════════════════════════════════════════════
   WORKBOOK
   ════════════════════════════════════════════ */
.workbook-wrap { grid-template-columns: 250px 1fr; }
.wb-main { padding: 3.5rem 3.5rem 5rem; max-width: 860px; }
.wb-main p { margin-bottom: 1.05rem; }

/* Sidebar: larger, plain section names */
.wb-sidebar { background: #FAFAFA; }
.wb-sidebar nav a { font-size: 0.975rem; color: var(--pl-text); padding: 0.45rem 1.5rem; }
.wb-sidebar nav a.active { color: var(--pl-text); background: #fff; border-left-color: var(--red); }
.wb-sidebar .sidebar-part { font-size: 0.9rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pl-text); padding: 1.4rem 1.5rem 0.3rem; }
.sidebar-status { font-size: 0.875rem; color: var(--pl-muted); }
.btn-sidebar { font-family: inherit; font-size: 0.95rem; color: var(--pl-text); }
.wb-sidebar nav a.submit-link { color: var(--pl-text); }

/* Part headers: a small part number, then the title, no rule */
.part-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.25rem; }
.part-eyebrow,
p.part-eyebrow { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pl-muted); margin: 0 0 0.25rem; }
.part-header h2 { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.wb-title { font-size: 2.4rem; line-height: 1.15; margin: 0 0 0.5rem; font-weight: 700; }
.wb-sub { color: var(--pl-muted) !important; margin-bottom: 1.75rem !important; }
.wb-main hr { border: 0; border-top: 1px solid var(--pl-rule); margin: 3.5rem 0; }

/* Notes: a light panel, no colored edge */
.callout,
.data-notice { background: var(--pl-panel); border: 0; border-radius: 4px; padding: 1.1rem 1.35rem; }
.callout p,
.data-notice { font-size: 1rem; color: var(--pl-text); }
.callout p + p { margin-top: 0.75rem; }

/* Parts list on the intro */
.wb-parts { margin: 1rem 0 1.5rem; padding-left: 0; list-style: none; counter-reset: none; }
.wb-parts li { padding: 0.5rem 0; border-bottom: 1px solid var(--pl-rule); }
.wb-parts li:first-child { border-top: 1px solid var(--pl-rule); }
.wb-parts a { font-weight: 600; }
.wb-cite { font-size: 0.95rem; color: var(--pl-muted) !important; }

/* Four-step procedure: a numbered sequence in one column */
.step-grid { display: block; margin: 1rem 0 1.5rem; }
.step-card { border: 0; border-top: 1px solid var(--pl-rule); border-radius: 0; padding: 1rem 0 1rem 2.75rem; position: relative; background: transparent; }
.step-card:last-child { border-bottom: 1px solid var(--pl-rule); }
.step-card .step-num-badge { position: absolute; left: 0; top: 1.05rem; width: auto; height: auto; background: none; color: var(--pl-text); border-radius: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; margin: 0; }
.step-card p { font-size: 1.0625rem; color: var(--pl-text); }

/* Three levels: keep the level colors as a side mark, larger text, no capitals */
.level-grid { grid-template-columns: 1fr; gap: 0.75rem; }
.level-card { border: 0 !important; border-left: 6px solid transparent !important; border-radius: 0; padding: 0.6rem 0 0.6rem 1.1rem; background: transparent !important; }
.level-card.conceptual { border-left-color: #FAC800 !important; }
.level-card.structural { border-left-color: #D14905 !important; }
.level-card.operative  { border-left-color: #CC0000 !important; }
.level-card h4 { font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--pl-text) !important; }
.level-card p { font-size: 1.0625rem; }

/* Corpus entries */
.corpus-section-label { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pl-text); margin: 2.75rem 0 0.75rem; }
.entry { border-color: var(--pl-rule); }
.entry-toggle { padding: 1.1rem 1.35rem; }
.entry-inst { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pl-muted); }
.entry-title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; }
.entry-tags { font-size: 0.95rem; color: var(--pl-muted); margin-top: 0.35rem; }
.entry-arrow { color: var(--pl-text); }
.entry-body { padding: 0.25rem 1.35rem 1.5rem; }
.entry-quote { font-size: 1.0625rem; font-style: normal; color: var(--pl-text); background: var(--pl-panel); border-radius: 4px; }
.analysis-label { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pl-text); margin: 1.75rem 0 0.5rem; font-family: var(--serif); }
.four-step { display: block; margin: 0.5rem 0 1rem; }
.step-row { padding: 0.6rem 0; }
.step-badge { background: none; color: var(--pl-text); font-family: var(--serif); font-size: 1.1rem; width: 1.5rem; height: auto; border-radius: 0; justify-content: flex-start; margin-top: 0; }
.step-content h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.1rem; }
.step-content p { font-size: 1.0625rem; color: var(--pl-text); }
.three-level { display: block; }
.level-box { background: transparent !important; border-left: 6px solid transparent; border-radius: 0; padding: 0.4rem 0 0.4rem 1rem; margin: 0.5rem 0; }
.level-box.c { border-left-color: #FAC800; }
.level-box.s { border-left-color: #D14905; }
.level-box.o { border-left-color: #CC0000; }
.level-box h3 { font-family: var(--sans); font-size: 1.0625rem; text-transform: none; letter-spacing: 0; color: var(--pl-text) !important; margin: 0 0 0.1rem; }
.level-box p { font-size: 1.0625rem; }
.discussion-box { background: var(--pl-panel); color: var(--pl-text); font-size: 1.0625rem; line-height: 1.7; padding: 1.1rem 1.35rem; }

/* Templates and drafts */
.save-indicator,
.p4-save-hint,
.field-hint { font-size: 0.95rem; color: var(--pl-muted); }
.save-indicator.saved { color: #1F5C3F; }
.template-card-header { background: var(--pl-panel); color: var(--pl-text); border-bottom: 1px solid var(--pl-rule); }
.template-card-header h3 { font-size: 1.15rem; color: var(--pl-text); }
.template-card-header button { color: var(--pl-text); border-color: #8C8C8C; font-size: 0.95rem; }
.template-card-header button:hover { background: #fff; color: var(--pl-text); }
.meta-field label,
.field-label { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pl-text) !important; }
.meta-field input,
.meta-field select,
textarea { font-size: 1.0625rem; border-color: #8C8C8C; color: var(--pl-text); }
.step-fields,
.level-fields { grid-template-columns: 1fr; }
.step-badge-sm { background: none; color: var(--pl-text); width: auto; font-family: var(--serif); font-size: 1.05rem; }
.policy-template-header { background: var(--pl-panel); }
.policy-level-badge { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pl-text); }
.policy-draft-area { font-size: 1.0625rem; color: var(--pl-text); }
.policy-template .rationale { font-size: 1rem; color: var(--pl-text); background: #FAFAFA; }
.copy-btn,
.btn-examples,
.btn-print { font-size: 0.95rem; color: var(--pl-text); border-color: #8C8C8C; }
.btn-download { font-size: 0.95rem; }
.btn-download-all { font-size: 1rem; padding: 0.65rem 1.4rem; }
.btn-download-all:disabled { background: #767676; }
.req { font-size: 0.9rem; text-transform: none; letter-spacing: 0; }
.check-row { font-size: 1.0625rem; color: var(--pl-text); }
.submit-status { font-size: 1rem; color: var(--pl-muted); }

/* Examples dialog */
.modal-eyebrow { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pl-muted); }
.modal-title { font-family: var(--serif); font-size: 1.3rem; }
.modal-tab { font-size: 0.95rem; color: var(--pl-muted); }
.modal-close { color: var(--pl-text); }
.sample-tag { font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
.sample-text { font-size: 1rem; color: var(--pl-text); }
.modal-footer-hint { font-size: 0.9rem; color: var(--pl-muted); }

/* Census record table */
.corpus-table { font-size: 0.95rem; }
.corpus-table th { background: var(--pl-panel); color: var(--pl-text); font-size: 0.95rem; letter-spacing: 0; text-transform: none; border-bottom: 2px solid var(--pl-text); }
.corpus-table td { color: var(--pl-text); }
.corpus-table tr:hover td { background: #F2F2F2; }

@media (max-width: 800px) {
  .workbook-wrap { grid-template-columns: 1fr; }
  .wb-main { padding: 2rem 1.25rem 4rem; }
  .wb-title { font-size: 2rem; }
}
.step-row { padding: 0.45rem 0; }
.step-badge { line-height: 1.55; }

/* Three-level literacy model: one color per level, carried everywhere the levels appear.
   Conceptual = Hunt Yellow, Structural = Pyroman Flame, Operative = Wolfpack Red (site palette).
   Each level is also named in text, so color is never the only cue. */
.pl-levels { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; }
.pl-levels li, .level-field-c, .level-field-s, .level-field-o { border-left: 6px solid; padding: 0.35rem 0 0.35rem 1rem; margin: 0 0 0.75rem; }
.pl-levels .lv-c, .level-fields .level-field-c { border-left-color: #FAC800; }
.pl-levels .lv-s, .level-fields .level-field-s { border-left-color: #D14905; }
.pl-levels .lv-o, .level-fields .level-field-o { border-left-color: #CC0000; }