/* Know Your City: shared lesson styles. Every lesson fills exactly one screen at any size. */
:root{
  --blue:#0B1D4A; --blue-2:#2f5fd0; --blue-soft:#e7ecf7;
  --orange:#E8650E; --orange-soft:#fdebdc;
  --ink:#151a2b; --muted:#5d6475; --line:#e3ded3; --bg:#FFFDF8; --card:#fff;
  --head:"Fraunces",Georgia,serif; --num:"DM Sans",system-ui,sans-serif;
  --red:#c0392b; --red-soft:#fbe5e2; --green:#1e8a4c; --green-soft:#e3f4ea;
  --gap:clamp(6px,1.3dvh,12px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--num);font-size:16px;line-height:1.4;overflow:hidden}
button{font:inherit}

/* ---------- Page frame ---------- */
.lesson{
  max-width:1040px;margin:0 auto;height:100vh;height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"title" "top" "stage" "cap" "ctl" "note";
  gap:var(--gap);
  padding:clamp(8px,2dvh,22px) clamp(8px,2.2vw,20px) calc(clamp(6px,1.4dvh,14px) + env(safe-area-inset-bottom));
}
.titleblock{grid-area:title}
.titleblock h1{font:700 clamp(19px,3.4vw,34px)/1.12 var(--head);color:var(--blue);margin:0}
.titleblock .sub{margin:2px 0 0;color:var(--muted);font-size:clamp(13px,1.6vw,16px)}
html.embed .titleblock{display:none}

.topline{grid-area:top;display:flex;align-items:center;gap:10px}
.progress{flex:1;display:flex;gap:4px;min-width:0}
.progress button{flex:1;height:7px;border:0;border-radius:4px;background:var(--line);cursor:pointer;padding:0}
.progress button.on{background:var(--orange)} .progress button.done{background:var(--blue-2)}

.viewtoggle{flex:none;display:flex;background:#e8ebf3;border-radius:999px;padding:3px}
.viewtoggle button{border:0;background:none;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.viewtoggle button[aria-pressed="true"]{background:var(--blue);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}

.stagearea{grid-area:stage;min-height:0;display:flex;flex-direction:column;gap:var(--gap)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(8px,1.6dvh,16px) clamp(9px,1.6vw,16px)}
.card h3{margin:0;font:700 clamp(10.5px,1.3dvh,14px) var(--num);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

.caption{grid-area:cap;max-height:36dvh;overflow-y:auto}
.step-tag{font:700 clamp(10.5px,1.3dvh,12.5px) var(--num);letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.caption h2{font:700 clamp(15px,2.3dvh,22px)/1.2 var(--head);margin:1px 0 4px;color:var(--blue)}
.caption p{margin:0;font-size:clamp(14px,2.05dvh,18px);line-height:1.42}
.caption p.fade{opacity:0;transition:opacity .3s} .caption p.fade.in{opacity:1}
.est{display:inline-block;font:700 10.5px var(--num);letter-spacing:.03em;text-transform:uppercase;color:#a8500c;background:var(--orange-soft);border-radius:5px;padding:0 5px;vertical-align:2px}

.controls{grid-area:ctl;display:flex;gap:8px;align-items:center}
.btn{font-weight:600;font-size:clamp(14px,1.9dvh,16px);border:0;border-radius:10px;padding:clamp(7px,1.3dvh,11px) 18px;cursor:pointer;background:var(--blue);color:#fff}
.btn.alt{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.btn:disabled{opacity:.4;cursor:default}
.count{margin-left:auto;color:var(--muted);font-size:14px}

details.note{grid-area:note;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:6px}
details.note summary{cursor:pointer;font-weight:600;color:var(--blue)}
details.note p{margin:6px 0 0}
details.note[open]{max-height:28dvh;overflow-y:auto}

.short{display:none}

/* ---------- Narrow screens (phones held upright) ---------- */
@media (max-width:600px){
  .short{display:inline} .long{display:none}
  .btn{flex:1;padding-left:8px;padding-right:8px}
  .count{display:none}
  .viewtoggle button{padding:4px 10px;font-size:12.5px}
  .card{border-radius:12px}
}
/* ---------- Short screens ---------- */
@media (max-height:640px){
  .titleblock .sub{display:none}
  .step-tag{display:none}
}
@media (max-height:540px) and (max-width:900px){
  .titleblock{display:none}
}
/* ---------- Wide and short (phone on its side, small laptop window) ---------- */
@media (min-aspect-ratio:4/3) and (max-height:620px){
  .lesson{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"top top" "stage cap" "stage ctl" "stage note";
    padding-top:8px;
  }
  .titleblock{display:none}
  .caption{max-height:none}
  .caption p{font-size:clamp(13px,3.6dvh,17px)}
  .caption h2{font-size:clamp(14px,4.2dvh,20px)}
  .short{display:inline} .long{display:none}
  .count{display:none}
  .btn{flex:1;padding-left:8px;padding-right:8px}
}