/* ============================================================
   TOLU NAOMI — CONTENT HUB · "Document Mode"
   Same design language as the Brand Guides (Vol I & II)
   ============================================================ */
@page { size: A4; margin: 0; }
:root {
  --cream:#FAF5EE; --paper:#FFFDF9; --ink:#22281F;
  --green:#1C3A2D; --green-soft:#2E5040; --green-ghost:#EAF0EA;
  --terra:#C2552B; --terra-ghost:#F9ECE7;
  --gold:#C39A4A; --gold-ghost:#F5EFE3;
  --line:#E4DCCC; --muted:#6E6A5E; --red:#A33E3E;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-print-color-adjust:exact; print-color-adjust:exact; scroll-behavior:smooth; }
body {
  background:#E9E2D6; color:var(--ink);
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10.4pt; line-height:1.62;
}
h1,h2,h3,h4 { font-family:'Fraunces',Georgia,serif; color:var(--green); font-weight:600; }
a { color:var(--terra); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; cursor:pointer; }

/* The page sits on an A4-width sheet, like the guides */
.wrap { width:210mm; max-width:100%; margin:0 auto; padding:0 20mm; }
@media screen and (max-width:820px){ .wrap { padding:0 18px; } }
.topnav .wrap { display:block; padding-top:2mm; padding-bottom:2mm; }
.brand { order:1; }
.brand { font-family:'Fraunces',serif; font-size:16pt; font-weight:600; color:#F4EFE4; letter-spacing:.02em; white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand em { color:#E8B98A; font-style:normal; }
.navlinks a.active { background:var(--terra); color:#fff; }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(120mm 120mm at 112% -20%, #2E5040 0%, transparent 60%),
    var(--green);
  color:#F1ECDD; padding:20mm 0 16mm; margin-bottom:2mm;
}
.hero .kicker { color:var(--gold); letter-spacing:.35em; font-size:8pt; text-transform:uppercase; font-weight:700; }
.hero h1 { color:#F4EFE4; font-size:32pt; line-height:1.08; margin:5mm 0 3mm; }
.hero h1 em { color:#E8B98A; }
.hero p.sub { color:#B9C7BB; max-width:130mm; font-size:10.5pt; }
.searchbar { margin-top:9mm; max-width:150mm; position:relative; }
.searchbar input {
  width:100%; padding:4mm 5mm 4mm 12mm; font-size:11pt; font-family:inherit;
  border-radius:8px; border:none; background:#FDFBF6; color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.searchbar input:focus { outline:2px solid var(--gold); }
.searchbar .icon { position:absolute; left:4.5mm; top:50%; transform:translateY(-50%); font-size:12pt; }

/* search results */
.results { margin-top:6mm; max-width:170mm; }
.results:empty { display:none; }
.result-item {
  display:block; background:rgba(255,253,249,.97); color:var(--ink);
  border-radius:8px; padding:3mm 4.5mm; margin-bottom:2mm;
  border-left:3px solid var(--terra); font-size:9.4pt;
}
.result-item:hover { text-decoration:none; background:#fff; }
.result-item .rt { font-size:7.4pt; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); font-weight:700; }
.result-item .rt b { color:var(--green-soft); }
.result-item p { margin-top:1mm; }
mark { background:#F3E3B8; padding:0 2px; border-radius:2px; }

/* ---------- sections & territory cards ---------- */
.section { padding:10mm 0 4mm; }
.section .eyebrow { color:var(--terra); letter-spacing:.3em; font-size:8pt; text-transform:uppercase; font-weight:700; }
.section h2 { font-size:19pt; margin:2mm 0 1.5mm; }
.section .lede { color:var(--muted); max-width:140mm; margin-bottom:6mm; font-size:9.6pt; }
.tcards { display:grid; grid-template-columns:1fr 1fr; gap:4mm; }
@media screen and (max-width:700px){ .tcards { grid-template-columns:1fr; } }
.tcard {
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:5mm 6mm;
  display:flex; flex-direction:column; gap:2mm; transition:box-shadow .15s;
}
.tcard:hover { box-shadow:0 10px 26px rgba(30,40,30,.12); text-decoration:none; }
.tcard .tnum { font-family:'Fraunces',serif; color:var(--terra); font-size:8.4pt; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.tcard h3 { font-size:14pt; }
.tcard p.tag { color:var(--muted); font-size:9pt; flex:1; }
.tstats { display:flex; gap:5mm; font-size:8.6pt; color:var(--muted); }
.tstats b { color:var(--green); font-size:10pt; }
.progress { height:2.4mm; background:var(--gold-ghost); border-radius:3px; overflow:hidden; margin-top:1.5mm; }
.progress i { display:block; height:100%; background:var(--terra); border-radius:3px; }
.tgo { font-size:8.4pt; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-top:1mm; }

/* ---------- generator ---------- */
.genwrap { background:var(--gold-ghost); border:1px solid var(--line); border-radius:12px; padding:9mm 8mm; text-align:center; }
.genwrap h2 { font-size:17pt; }
.genwrap .lede { margin:2mm auto 0; text-align:center; }
.genbtn {
  background:var(--terra); color:#fff; border:none; font-size:11pt; font-weight:700;
  padding:3.6mm 9mm; border-radius:22px; letter-spacing:.04em; margin-top:5mm;
  box-shadow:0 6px 16px rgba(194,85,43,.3);
}
.genbtn:hover { background:#A8431F; }
.gen-out { margin-top:5mm; }
.gen-card {
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:5mm 6mm; text-align:left; max-width:130mm; margin:0 auto;
}
.gen-card .gt { font-size:8pt; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); font-weight:700; }
.gen-card h4 { font-size:13pt; margin:2mm 0; font-style:italic; }
.gen-card p { font-size:9.6pt; color:#3A4038; }
.gen-card .glink { display:inline-block; margin-top:3mm; font-weight:700; font-size:9.4pt; }

/* ---------- formula & rules ---------- */
.formula {
  background:var(--green); color:#F1ECDD; border-radius:10px; padding:6mm 8mm;
  display:flex; flex-wrap:wrap; gap:3mm; align-items:center; justify-content:center;
}
.formula span { font-family:'Fraunces',serif; font-size:11pt; }
.formula .sep { color:var(--gold); font-family:'Inter'; font-size:9pt; }
.rules { display:grid; grid-template-columns:repeat(3,1fr); gap:4mm; margin-top:5mm; }
@media screen and (max-width:700px){ .rules { grid-template-columns:1fr; } }
.rule { background:var(--paper); border-left:3px solid var(--terra); border-radius:0 8px 8px 0; padding:4mm 5mm; }
.rule h4 { font-size:11pt; margin-bottom:1.5mm; }
.rule p { font-size:9.2pt; color:var(--muted); }
.rule.gold { border-left-color:var(--gold); background:var(--gold-ghost); }

/* ---------- guide cards ---------- */
.gcards { display:grid; grid-template-columns:1fr 1fr; gap:4mm; }
@media screen and (max-width:700px){ .gcards { grid-template-columns:1fr; } }
.gcard {
  background:var(--green); color:#F1ECDD; border-radius:10px; padding:7mm 6mm;
  display:flex; flex-direction:column; gap:2.5mm;
}
.gcard:hover { text-decoration:none; box-shadow:0 12px 28px rgba(30,40,30,.25); }
.gcard .gk { color:var(--gold); font-size:8pt; letter-spacing:.25em; text-transform:uppercase; font-weight:700; }
.gcard h3 { color:#F4EFE4; font-size:15pt; }
.gcard p { color:#B9C7BB; font-size:9.4pt; flex:1; }
.gcard .ggo { color:#E8B98A; font-weight:700; font-size:8.6pt; letter-spacing:.12em; text-transform:uppercase; }

/* ---------- territory page ---------- */
.pagetitle { padding:12mm 0 2mm; }
.pagetitle .crumb { font-size:8pt; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.pagetitle h1 { font-size:26pt; margin:2mm 0 1.5mm; }
.pagetitle .ptag { color:var(--muted); max-width:140mm; font-size:9.6pt; }
.pagestats { display:flex; gap:9mm; margin:5mm 0 2mm; flex-wrap:wrap; }
.pstat { font-size:8.8pt; color:var(--muted); }
.pstat b { display:block; font-family:'Fraunces',serif; font-size:17pt; color:var(--green); }

.filters { display:flex; gap:2mm; flex-wrap:wrap; margin:4mm 0 2mm; align-items:center; }
.fbtn {
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:1.8mm 4.5mm; font-size:8.6pt; font-weight:600; color:var(--muted);
}
.fbtn.on { background:var(--green); color:#fff; border-color:var(--green); }
.fsearch {
  margin-left:auto; padding:2mm 4mm; border:1px solid var(--line); border-radius:16px;
  font-family:inherit; font-size:9pt; background:var(--paper); min-width:44mm;
}
.fsearch:focus { outline:2px solid var(--gold); }

/* problem cards — guide-style boxes */
.pcard {
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:6mm 7mm; margin:5mm 0;
}
.pcard.done { opacity:.7; }
.pcard-head { display:flex; gap:4mm; align-items:flex-start; }
.pnum {
  min-width:8mm; height:8mm; border-radius:50%; background:var(--terra); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10pt;
  font-family:'Fraunces',serif; flex-shrink:0;
}
.pcard-head h3 { font-size:13.5pt; flex:1; line-height:1.35; font-style:italic; }
.statussel {
  border:1px solid var(--line); border-radius:6px; padding:1.6mm 2.5mm; font-family:inherit;
  font-size:8.6pt; background:var(--cream); color:var(--ink); flex-shrink:0;
}
.badge { display:inline-block; font-size:7.4pt; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; padding:1mm 3mm; border-radius:10px; margin-top:2mm; }
.badge.draft { background:#EEE9DD; color:var(--muted); }
.badge.ready { background:#E3EDF5; color:#2C567F; }
.badge.posted { background:#E2EFE2; color:#2F6B3A; }
.badge.rejected { background:var(--terra-ghost); color:var(--red); }

.blocklabel { font-size:8pt; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--gold); margin:5mm 0 2mm; display:flex; align-items:center; gap:3mm; }
.blocklabel:after { content:""; flex:1; height:1px; background:var(--line); }
.idea { background:var(--gold-ghost); border-radius:8px; padding:3.5mm 5mm; font-size:9.8pt; }
.idea b { color:var(--green); }

ul.lines { list-style:none; }
ul.lines li {
  display:flex; align-items:baseline; gap:3mm; padding:2mm 1mm;
  border-bottom:1px dashed var(--line); font-size:9.8pt;
}
ul.lines li:last-child { border-bottom:none; }
ul.lines li .txt { flex:1; }
ul.lines li .strike-btn {
  background:none; border:none; color:#B9B2A2; font-size:11pt; padding:.5mm 1.5mm; border-radius:4px;
}
ul.lines li .strike-btn:hover { background:var(--terra-ghost); color:var(--red); }

.chip { display:inline-block; font-size:7.4pt; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; padding:1mm 3mm; border-radius:10px; background:var(--green-ghost);
  color:var(--green-soft); white-space:nowrap; flex-shrink:0; }
.chip.fmt-stop { background:var(--terra-ghost); color:var(--terra); }

details.blog { margin-top:4mm; border:1px solid var(--line); border-radius:8px; background:#fff; }
details.blog summary {
  cursor:pointer; padding:3mm 5mm; font-weight:700; font-size:9.6pt; color:var(--green);
  list-style:none; display:flex; align-items:center; gap:3mm;
}
details.blog summary:before { content:"+"; font-family:'Fraunces',serif; font-size:13pt; color:var(--terra); }
details.blog[open] summary:before { content:"–"; }
details.blog .blogbody { padding:0 5mm 4mm; font-size:9.8pt; color:#3A4038; }

/* footer */
footer { border-top:2px solid var(--green); margin-top:12mm; padding:6mm 0 8mm;
  font-size:8.6pt; color:var(--muted); }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:3mm; align-items:center; }
footer b { color:var(--green); font-family:'Fraunces',serif; font-size:11pt; }

.empty { color:var(--muted); font-style:italic; padding:4mm 0; }

/* ---------- print: same A4 standard as the guides ---------- */
@media print {
  body { background:#fff; }
  .topnav, .filters, .nav-right, footer, .strike-btn, .genbtn { display:none; }
  .wrap { width:auto; max-width:none; padding:0 14mm; }
  .hero { padding:10mm 0 8mm; }
  .pcard, .tcard, .gen-card, .rule, .gcard { break-inside:avoid; }
  .pcard { border:none; border-top:1px solid var(--line); border-radius:0; }
}
.aibtn {
  background:var(--green); color:#fff; border:none; font-size:9pt; font-weight:700;
  padding:2.2mm 5mm; border-radius:16px; letter-spacing:.03em;
}
.aibtn:hover { background:var(--green-soft); }
.aihint { font-size:8.6pt; color:var(--muted); }
.gsub { font-size:9.6pt; margin-top:2mm; }
.gsub b { color:var(--terra); }
.aiform { display:flex; gap:3mm; align-items:center; flex-wrap:wrap; }
.aiform select { padding:2.6mm 4mm; border:1px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:10pt; background:var(--paper); color:var(--ink); }

.modal-ov { position:fixed; inset:0; background:rgba(20,30,22,.55); z-index:200;
  display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px; overflow-y:auto; }
.modal { background:var(--paper); border-radius:12px; width:100%; max-width:150mm;
  box-shadow:0 24px 60px rgba(0,0,0,.35); }
.modal-head { display:flex; justify-content:space-between; align-items:center;
  padding:4mm 6mm; border-bottom:1px solid var(--line); }
.modal-head h3 { font-size:14pt; }
.modal-x { background:none; border:none; font-size:12pt; color:var(--muted); padding:1mm 2mm; }
.modal-x:hover { color:var(--red); }
.modal-body { padding:5mm 6mm; max-height:72vh; overflow-y:auto; }

.slidebox { border:1px solid var(--line); border-radius:8px; padding:3.5mm 4.5mm;
  margin-bottom:3mm; background:#fff; }
.slidenum { font-size:7.6pt; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra); font-weight:700; margin-bottom:1.5mm; }
.slidetext { font-size:10pt; white-space:pre-wrap; }
.copybtn { margin-top:2mm; background:var(--green-ghost); border:1px solid var(--line);
  color:var(--green-soft); border-radius:12px; padding:1mm 4mm; font-size:8.4pt; font-weight:700; }
.copybtn:hover { background:#DCE8DC; }
.rawout { background:#F4F1E8; padding:3mm; border-radius:6px; font-size:8.6pt;
  white-space:pre-wrap; max-height:40vh; overflow:auto; }
.aisetup label { display:block; font-size:9pt; font-weight:700; color:var(--green); margin:3mm 0 1mm; }
.aisetup input { width:100%; padding:2.5mm 4mm; border:1px solid var(--line);
  border-radius:6px; font-family:inherit; font-size:10pt; }
.gen-preview h4 { font-size:12pt; font-style:italic; margin:2mm 0; }
.gen-preview ul { margin:1mm 0 3mm 5mm; font-size:9.4pt; }
.gen-preview li { margin-bottom:1mm; }

/* gate: page hidden until unlocked */
.pre-gate body > *:not(.modal-ov) { visibility:hidden !important; }
/* active nav state */
.topnav .navlinks a.active { background:var(--terra) !important; color:#fff !important; }

/* ---------- video lab ---------- */
.badge.idea { background:#EEE9DD; color:var(--muted); }
.badge.scripted { background:#E3EDF5; color:#2C567F; }
.vidcard { background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:5mm 6mm; margin:4mm 0; }
.vidcard.done { opacity:.7; }

/* ---------- this week board ---------- */
.weekgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:3mm; margin:4mm 0 8mm; }
@media screen and (max-width:900px){ .weekgrid { grid-template-columns:repeat(2,1fr); } }
.daycol { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:3mm; min-height:42mm; display:flex; flex-direction:column; }
.daycol.over { outline:2px dashed var(--terra); }
.dayhead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2mm; }
.dayhead h4 { font-size:11pt; }
.daycount { font-size:8.4pt; color:var(--muted); }
.daybody { flex:1; display:flex; flex-direction:column; gap:2mm; }
.dayadd { background:var(--gold-ghost); border:1px dashed var(--line); border-radius:8px; padding:1.8mm; font-size:8.6pt; color:var(--muted); margin-top:2mm; font-family:inherit; }
.dayadd:hover { color:var(--terra); border-color:var(--terra); }
.witem { background:#fff; border:1px solid var(--line); border-left:3px solid var(--terra); border-radius:6px; padding:2mm 5mm 2mm 2.5mm; position:relative; cursor:grab; }
.witem.video { border-left-color:var(--gold); }
.wtitle { font-size:8.8pt; font-weight:600; color:var(--green); line-height:1.35; }
.wtitle:hover { text-decoration:underline; cursor:pointer; }
.wmeta { display:flex; gap:2mm; flex-wrap:wrap; font-size:7.4pt; color:var(--muted); margin-top:1mm; }
.wpdone { color:#2F6B3A; font-weight:700; }
.wremove { position:absolute; top:1mm; right:1mm; background:none; border:none; color:#B9B2A2; font-size:9pt; padding:0 1mm; }
.wremove:hover { color:var(--red); }
.wkrow { display:flex; align-items:baseline; gap:2.5mm; padding:2mm 1mm; border-bottom:1px dashed var(--line); cursor:pointer; }
.wkrow:hover { background:var(--gold-ghost); }
.wkt { flex:1; font-size:9.2pt; }
.wks { font-size:8pt; color:var(--muted); }

/* ---------- workflow v2: line layout & action rows ---------- */
ul.lines li.line2 { flex-direction:column; align-items:stretch; gap:1.2mm; }
.linerow { display:flex; align-items:center; gap:2mm; }
.linerow .spacer { flex:1; }
li.line2 .txt { font-size:9.9pt; line-height:1.5; }
.btnrow { display:flex; gap:2mm; flex-wrap:wrap; margin-top:3mm; }
.viewbtn {
  background:var(--paper); border:1px solid var(--line); color:var(--green-soft);
  font-size:8.8pt; font-weight:700; padding:1.8mm 4mm; border-radius:14px; font-family:inherit;
}
.viewbtn:hover { background:var(--green-ghost); }
.viewbtn:disabled { opacity:.5; cursor:not-allowed; }

/* card header: number/status row on top, title full-width below */
.pcard-head { flex-direction:column; align-items:stretch; gap:1.5mm; }

/* ---------- dropdown nav ---------- */
.nl-active { background:var(--terra) !important; color:#fff !important; }
.nl-wrap { position:relative; }
.nl-btn { background:none; border:none; color:#C9D4C9; font-family:inherit; font-size:8.2pt;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:1.2mm 2.6mm;
  border-radius:5px; cursor:pointer; white-space:nowrap; }
.nl-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.nldrop { display:none; position:absolute; top:100%; left:0; z-index:9999;
  background:var(--green); border:1px solid rgba(244,239,228,.25); border-radius:0 0 8px 8px;
  min-width:46mm; flex-direction:column; padding:1mm 0; box-shadow:0 14px 30px rgba(0,0,0,.35); }
.nl-wrap.open .nldrop { display:flex; }
.nldrop a { display:block; padding:1.7mm 4mm !important; border-radius:0 !important; white-space:nowrap; }
.nldrop a:hover { background:rgba(255,255,255,.12); }
@media screen and (max-width:520px){
  .navlinks { flex-wrap:wrap; }
  .nl-wrap { flex-basis:100%; }
  .nldrop { position:static; box-shadow:none; border:none; border-left:2px solid rgba(244,239,228,.2); margin-left:4mm; }
}
/* ---------- workflow v2: line layout & action rows ---------- */
ul.lines li.line2 { flex-direction:column; align-items:stretch; gap:1.2mm; }
.linerow { display:flex; align-items:center; gap:2mm; }
.linerow .spacer { flex:1; }
li.line2 .txt { font-size:9.9pt; line-height:1.5; }
.btnrow { display:flex; gap:2mm; flex-wrap:wrap; margin-top:3mm; }
.viewbtn {
  background:var(--paper); border:1px solid var(--line); color:var(--green-soft);
  font-size:8.8pt; font-weight:700; padding:1.8mm 4mm; border-radius:14px; font-family:inherit;
}
.viewbtn:hover { background:var(--green-ghost); }
.viewbtn:disabled { opacity:.5; cursor:not-allowed; }

/* card header: number/status row on top, title full-width below */
.pcard-head { flex-direction:column; align-items:stretch; gap:1.5mm; }

/* ---------- dropdown nav ---------- */
.nl-active { background:var(--terra) !important; color:#fff !important; }
.nl-wrap { position:relative; }
.nldrop { display:none; position:absolute; top:100%; left:0; z-index:60;
  background:var(--green); border:1px solid rgba(244,239,228,.25); border-radius:0 0 8px 8px;
  min-width:46mm; flex-direction:column; padding:1mm 0; box-shadow:0 14px 30px rgba(0,0,0,.3); }
.nldrop a { display:block; padding:1.7mm 4mm !important; border-radius:0 !important; white-space:nowrap; }
.nldrop a:hover { background:rgba(255,255,255,.12); }
@media screen and (max-width:700px){
  .navlinks { flex-wrap:wrap; overflow:visible; }
  .nl-wrap { flex-basis:100%; }
  .nldrop { position:static; box-shadow:none; border:none; border-left:2px solid rgba(244,239,228,.2); margin-left:4mm; }
}