/*##############################################################################
# Script:        teach.css    (Teach It Forward; project version in aiacolyte.py)
# Created by:    Matthew Boucher
# Start date:    2026-10-18
# Location:      <project root>/teachitforward/css/teach.css   (published copy: <project root>/frontend/teachitforward/css/teach.css)
# Description:   The class tabs and document cards, the upload box, the staff's Manage panel, the page reader (with the PDF's
#                headings, pictures and small print) and its Contents and Glossary pages, and the CliffyNotes page, in the Forward look.
# Reads:         the colour variables of style.css and brand.css.
# Writes:        nothing.
##############################################################################*/
.teach-tabs { margin-top:34px; }
.teach-tablist { display:flex; flex-wrap:wrap; gap:8px; border-bottom:2px solid var(--accent); }
.teach-tablist [role="tab"] { font:inherit; font-size:.82rem; font-weight:650; padding:11px 18px; border:1px solid var(--line); border-bottom:0; background:#fcf6ec; color:var(--ink); cursor:pointer; border-radius:8px 8px 0 0; }
.teach-tablist [role="tab"][aria-selected="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.teach-tablist [role="tab"]:hover:not([aria-selected="true"]) { background:var(--cream); }
.teach-tablist .teach-tag { margin-left:8px; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.teach-panel { border:1px solid var(--line); border-top:0; background:#fff9ee; padding:30px 32px; }
.teach-panel[hidden] { display:none; }
.teach-panel h3 { font-size:1.5rem; margin:4px 0 12px; }
.teach-panel > p { max-width:760px; color:var(--muted); }
.teach-panel .hero-actions { margin-top:20px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.teach-panel .text-link { color:var(--accent); font-weight:650; }
.teach-panel-chapters { margin-top:22px; columns:2 260px; column-gap:28px; padding:0; list-style:none; font-size:.86rem; }
.teach-panel-chapters li { break-inside:avoid; padding:4px 0; }
.teach-panel-chapters a { color:var(--ink); }
.teach-panel-chapters a:hover { color:var(--accent); }
.teach-upload { margin-top:22px; border:1px solid #5d6650; background:#171c10; padding:22px 24px; border-radius:6px; }
.teach-upload form { display:grid; gap:12px; }
.teach-upload label { font-weight:650; color:var(--cream); }
.teach-upload input[type="file"] { color:var(--cream); font:inherit; font-size:.85rem; }
.teach-upload a { color:var(--accent-light); }
.teach-upload .form-status { color:var(--accent-light); min-height:1.2em; }
.teach-upload .teach-muted { color:#d4c8b6; }
.teach-upload button,.teach-controls button,[data-cliffy-write],.teach-jump button { font:inherit; font-size:.8rem; font-weight:700; padding:11px 18px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; border-radius:4px; }
.teach-upload button { background:var(--accent-bright); border-color:var(--accent-bright); color:#111719; justify-self:start; }
.teach-upload button:disabled,.teach-controls button:disabled { opacity:.6; cursor:wait; }
.teach-danger { background:transparent !important; color:#9b352d !important; border-color:#9b352d !important; }
.teach-muted { color:var(--muted); font-size:.82rem; }
.teach-credit { margin-top:18px; font-size:.74rem; color:var(--muted); }
.teach-credit a { color:var(--accent); }
.teach-flag { margin-top:14px; padding:10px 14px; border-left:3px solid var(--accent); background:var(--cream); font-size:.84rem; }

/* the subpages (document overview, reader, CliffyNotes) */
.teach-main { padding-block:34px 70px; max-width:900px; }
.teach-crumbs { font-size:.78rem; color:var(--muted); margin-bottom:22px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.teach-crumbs a { color:var(--accent); }
.teach-page-head h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.12; margin:6px 0 14px; }
.teach-lead { font-size:1.02rem; color:var(--muted); max-width:720px; }
.teach-jump { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; font-size:.84rem; }
.teach-jump input { width:90px; padding:9px 10px; font:inherit; border:1px solid var(--line); }
.teach-jump button { padding:9px 14px; }
.teach-controls { margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.teach-chapters { margin-top:40px; border-top:2px solid var(--accent); padding-top:20px; }
.teach-chapters h2 { font-size:1.2rem; margin-bottom:12px; }
.teach-chapters ol { list-style:none; padding:0; margin:0; }
.teach-chapters li { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.teach-chapters li a { color:var(--ink); }
.teach-chapters li a:hover { color:var(--accent); }
.teach-chapters li span { color:var(--muted); font-size:.78rem; white-space:nowrap; }
.teach-pager { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:20px 0; padding:12px 0; border-block:1px solid var(--line); font-size:.85rem; }
.teach-pager a { color:var(--accent); font-weight:650; }
.teach-count { color:var(--muted); font-size:.78rem; }
.teach-page { background:#fffdf9; border:1px solid var(--line); padding:28px 32px; font-size:1rem; line-height:1.8; overflow-wrap:anywhere; }
.teach-page p + p { margin-top:14px; }
.teach-cliffy-link { margin-top:28px; display:flex; justify-content:space-between; align-items:center; gap:22px; padding:22px 26px; background:var(--shade); color:var(--cream); border-left:4px solid var(--accent-bright); }
.teach-cliffy-link .eyebrow { color:var(--accent-light); }
.teach-cliffy-link p:not(.eyebrow) { color:#ded5c8; font-size:.88rem; margin-top:6px; }
.teach-cliffy-link .button { background:var(--accent-bright); color:#111719; flex-shrink:0; }
.teach-note { background:#fffdf9; border:1px solid var(--line); border-top:3px solid var(--accent); padding:28px 32px; }
.teach-note h2 { font-size:1.05rem; margin:24px 0 10px; color:var(--accent); }
.teach-note ul { padding-left:20px; }
.teach-note li + li { margin-top:6px; }
.teach-note dl { display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:8px 18px; }
.teach-note dt { font-weight:700; }
.teach-note dd { margin:0; color:var(--muted); }
.teach-summary { font-size:1.04rem; line-height:1.8; }
.teach-question { padding:12px 16px; background:var(--cream); border-left:3px solid var(--accent); }
.teach-note .form-status { margin-top:12px; color:var(--accent); }
.teach-back { margin-top:24px; }
@media (max-width:640px) {
  .teach-panel,.teach-page,.teach-note { padding:20px 18px; }
  .teach-cliffy-link { flex-direction:column; align-items:flex-start; }
  .teach-note dl { grid-template-columns:1fr; }
  .teach-tablist [role="tab"] { flex:1 1 auto; }
}
/* the class shelves: one card per document */
.teach-shelf-note { color:var(--muted); margin-bottom:18px; max-width:760px; }
.teach-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.teach-card { background:#fffdf9; border:1px solid var(--line); border-top:3px solid var(--accent); padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.teach-card h3 { font-size:1.15rem; margin:0; }
.teach-card h3 a { color:var(--ink); }
.teach-card h3 a:hover { color:var(--accent); }
.teach-card > p:not(.eyebrow):not(.book-kind):not(.teach-muted):not(.teach-credit) { color:var(--muted); font-size:.88rem; }
.teach-card .hero-actions { margin-top:6px; display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.teach-card .text-link { color:var(--accent); font-weight:650; font-size:.84rem; }
.teach-card details summary { cursor:pointer; font-size:.84rem; font-weight:650; color:var(--accent); }
.teach-upload select { font:inherit; font-size:.85rem; padding:8px 10px; border:1px solid var(--line); background:#fffdf9; color:var(--ink); justify-self:start; max-width:100%; }

/* the staff's Manage panel */
.teach-manage[hidden] { display:none; }
.teach-manage-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin-top:28px; }
.teach-manage-box { border:1px solid var(--line); background:#fff9ee; padding:22px 24px; }
.teach-manage-box h3 { font-size:1.15rem; margin-bottom:12px; }
.teach-manage-box form { display:grid; gap:8px; }
.teach-manage-box label { font-weight:650; font-size:.84rem; }
.teach-manage-box input { font:inherit; padding:9px 10px; border:1px solid var(--line); background:#fffdf9; }
.teach-manage-box button,.teach-rows button { font:inherit; font-size:.78rem; font-weight:700; padding:9px 14px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; justify-self:start; }
.teach-manage-box .form-status { color:var(--accent); min-height:1.2em; font-size:.84rem; }
.teach-rows { list-style:none; padding:0; margin:14px 0 0; }
.teach-rows li { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:.88rem; overflow-wrap:anywhere; }
.teach-row-actions { display:flex; flex-wrap:wrap; gap:8px; }
.teach-rows button { padding:7px 11px; }
.teach-class-pick { display:flex; align-items:center; gap:8px; font-size:.84rem; font-weight:650; }
.teach-class-pick select { font:inherit; padding:9px 10px; border:1px solid var(--line); background:#fffdf9; }

/* page 1: the Contents; the last page: the Glossary */
.teach-toc ol { list-style:none; padding:0; margin:0; }
.teach-toc li { display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px dotted var(--line); }
.teach-toc li span { color:var(--muted); font-size:.82rem; white-space:nowrap; }
.teach-toc a { color:var(--ink); }
.teach-toc a:hover { color:var(--accent); }
.teach-toc-1 { font-weight:700; margin-top:10px; }
.teach-toc-2 { padding-left:20px !important; font-size:.92rem; }
.teach-letters { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 6px; }
.teach-letters a { min-width:30px; text-align:center; padding:4px 6px; border:1px solid var(--line); color:var(--accent); font-weight:700; font-size:.82rem; }
.teach-glossary h2 { border-bottom:2px solid var(--accent); padding-bottom:4px; }
.teach-glossary dd a { color:var(--accent); font-size:.8rem; white-space:nowrap; }
@media (max-width:640px) {
  .teach-card,.teach-manage-box { padding:16px; }
  .teach-toc-2 { padding-left:10px !important; }
}
.teach-card,.teach-note,.teach-page-head { overflow-wrap:anywhere; }   /* long titles and terms wrap on a phone */
/* a book page with the PDF's own styling: headings, small print and pictures (sizes and colours come from the document's fonts.css) */
.teach-styled h2,.teach-styled h3,.teach-styled h4 { line-height:1.25; margin:22px 0 10px; overflow-wrap:anywhere; }
.teach-styled > :first-child { margin-top:0; }
.teach-styled .teach-small { font-size:.86rem; color:var(--muted); }
.teach-figure { margin:18px 0; text-align:center; }
.teach-figure img { display:block; margin:0 auto; max-width:100%; height:auto; border:1px solid var(--line); background:#fff; }
.teach-styled em { font-style:italic; font-weight:inherit; color:inherit; letter-spacing:normal; }
.teach-styled strong { font-weight:700; }
/* the page editor (the uploader and the admin class) */
.teach-editbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 14px; }
.teach-editbar button,.teach-edit-tools button,.teach-edit-actions button { font:inherit; font-size:.8rem; font-weight:700; padding:8px 14px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
.teach-editbar .form-status { font-size:.84rem; color:var(--accent); margin:0; }
.teach-editor { border:1px solid var(--line); background:#fffdf9; padding:18px; }
.teach-edit-row { border-bottom:1px dashed var(--line); padding:12px 0; display:grid; gap:8px; }
.teach-edit-row textarea { width:100%; font:inherit; font-size:.95rem; line-height:1.6; padding:8px 10px; border:1px solid var(--line); resize:vertical; }
.teach-edit-tools { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.teach-edit-tools select { font:inherit; font-size:.84rem; padding:6px 8px; border:1px solid var(--line); }
.teach-edit-tools button { padding:6px 10px; background:#fff; color:var(--accent); }
.teach-edit-file { font-size:.84rem; font-weight:650; display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.teach-edit-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px; }
.teach-edit-actions button:not(.teach-edit-save) { background:#fff; color:var(--accent); }
/* "About this page" above a page, and its fields and the page history in the editor (grill-me 2026-10-19 Q16, Q17) */
.teach-intro { margin:6px 0 22px; background:#fffdf9; border:1px solid var(--line); border-top:3px solid var(--accent); }
.teach-intro-figure { margin:0; }
.teach-intro-figure img { display:block; width:100%; height:auto; }
.teach-intro-figure figcaption { padding:8px 18px 0; font-size:.74rem; color:var(--muted); }
.teach-intro-text { padding:18px 26px 22px; }
.teach-intro-text .eyebrow { color:var(--accent); margin-bottom:8px; }
.teach-intro-text p + p { margin-top:12px; }
.teach-edit-about,.teach-edit-history { margin-top:18px; padding:16px 18px; border:1px solid var(--line); background:#fffdf9; display:grid; gap:10px; }
.teach-edit-about h3,.teach-edit-history h3 { font-size:.95rem; margin:0; }
.teach-edit-about textarea,.teach-edit-about input[type="text"] { font:inherit; width:100%; padding:8px 10px; border:1px solid var(--line); }
.teach-edit-about img { max-width:260px; height:auto; border:1px solid var(--line); }
.teach-edit-history ol { margin:0; padding-left:20px; display:grid; gap:6px; font-size:.85rem; }
.teach-edit-history button { margin-left:10px; }
@media (max-width:640px) { .teach-intro-text { padding:14px 16px 18px; } }
/*##############################################################################
# End of teach.css
##############################################################################*/