/* ==========================================================================
   dp-home.css — the one look of the two homes of doPhysics.in.

   /understand (the book's home, drawn by 62_doPhysics_book: renderHostHome) and
   /challenge (the question bank's home, drawn by components/challenge/SetList.tsx)
   are twins. The owner's rule (2026-10-02): toggling between them must feel as
   if nothing changed but the words. So both pages are built from the same
   markup, class for class, and both link this one file. A change here changes
   both; nothing about the look of a home lives anywhere else.

   Everything is scoped under .dph and sets its own values in full, because the
   two hosts bring different base styles (the book's ui.css, the site's Tailwind).
   The tokens are the book's (ui.css :root, components.css themes and accents).

   The page furniture of each host is hidden while a home is on the page: the
   book's own bar, notebook button and drawers (their shadows show at the foot
   of a phone's screen), the site's header, footer and grid.
   ========================================================================== */

body:has(.dph) > .bar,
body:has(.dph) > .readline,
body:has(.dph) > .nb-fab,
body:has(.dph) > .ground,
body:has(.dph) > .scrim,
body:has(.dph) > .drawer,
body:has(.dph) [data-site-chrome],
body:has(.dph) [data-dp-site-header] { display: none !important; }
body:has(.dph) main#view { max-width: none; padding: 0; margin: 0; }

.dph {
  --paper: #FAF8F3; --paper-2: #F2EFE7; --card: #FFFFFF;
  --ink: #15171C; --ink-2: #4A5060; --ink-3: #8B91A1;
  --line: rgba(21, 23, 28, .10); --line-2: rgba(21, 23, 28, .18);
  --accent: #2563EB; --accent-2: #7C3AED; --accent-rgb: 37, 99, 235; --accent2-rgb: 124, 58, 237;
  --good: #059669; --brand: #D0021B;
  --dph-display: var(--font-book-display, "Fraunces"), "Iowan Old Style", Georgia, serif;
  --dph-ui: var(--font-book-ui, "Space Grotesk"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --dph-body: var(--font-question-bookman, "Bookman Old Style"), "URW Bookman", Bookman, "Libre Baskerville", Georgia, serif;
  --dph-script: var(--font-brand-script, "Dancing Script"), cursive;
  --dph-serif: var(--font-brand-serif, "Lora"), Georgia, serif;
  --dph-gutter: 16px;

  position: relative; min-height: 100vh; margin: 0; padding: 0 0 72px;
  color: var(--ink); font-family: var(--dph-body); font-size: 17px; line-height: 1.65; text-align: left;
  -webkit-font-smoothing: antialiased;
  /* paper, a faint grid like graph paper, and two soft lights at the top */
  background-color: var(--paper);
  background-image:
    radial-gradient(60vw 40vh at 85% -5%, rgba(var(--accent2-rgb), .10), transparent 60%),
    radial-gradient(70vw 50vh at -10% 20%, rgba(var(--accent-rgb), .10), transparent 60%),
    linear-gradient(to right, rgba(21, 23, 28, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21, 23, 28, .028) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
.dph[data-theme="snow"]  { --paper: #FFFFFF; --paper-2: #F3F4F6; --card: #FFFFFF; --ink: #111827; --ink-2: #4B5563; --ink-3: #9CA3AF; --line: rgba(17, 24, 39, .09); --line-2: rgba(17, 24, 39, .16); }
.dph[data-theme="sepia"] { --paper: #F6EFE3; --paper-2: #ECE2D0; --card: #FDF9F1; --ink: #2B2118; --ink-2: #5E4F40; --ink-3: #9A8A78; --line: rgba(43, 33, 24, .12); --line-2: rgba(43, 33, 24, .22); }
.dph[data-theme="mist"]  { --paper: #F3F6FA; --paper-2: #E6EBF2; --card: #FFFFFF; --ink: #0F1A2B; --ink-2: #465468; --ink-3: #8A97AB; --line: rgba(15, 26, 43, .10); --line-2: rgba(15, 26, 43, .18); }
.dph[data-accent="violet"]  { --accent: #7C3AED; --accent-2: #DB2777; --accent-rgb: 124, 58, 237; --accent2-rgb: 219, 39, 119; }
.dph[data-accent="green"]   { --accent: #059669; --accent-2: #0891B2; --accent-rgb: 5, 150, 105; --accent2-rgb: 8, 145, 178; }
.dph[data-accent="crimson"] { --accent: #D0021B; --accent-2: #EA580C; --accent-rgb: 208, 2, 27; --accent2-rgb: 234, 88, 12; }
.dph[data-accent="teal"]    { --accent: #0D9488; --accent-2: #2563EB; --accent-rgb: 13, 148, 136; --accent2-rgb: 37, 99, 235; }

.dph *, .dph *::before, .dph *::after { box-sizing: border-box; }
.dph [hidden] { display: none !important; }
.dph a { text-decoration: none; }
.dph button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.dph :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- the bar: the menu button and the mark, nothing else ---------- */
.dph-bar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  height: 56px; margin: 0; padding: 0 var(--dph-gutter);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line); font-family: var(--dph-ui);
}
.dph-icon { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); transition: background .2s, color .2s; }
.dph .dph-icon:hover { background: rgba(var(--accent-rgb), .08); color: var(--accent); }
.dph-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dph-brand { display: inline-flex; align-items: baseline; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.dph-brand__do { font-family: var(--dph-script); font-weight: 700; font-size: 1.55rem; margin-right: 1px; }
.dph-brand__ph { font-family: var(--dph-serif); font-weight: 700; font-size: 1.2rem; }
.dph-brand__in { font-family: var(--dph-serif); font-weight: 700; font-size: 1rem; color: var(--brand); }
/* A teacher's (or an admin's) way to the Teacher Dashboard, at the right end of the bar where it is
   seen at once (the owner, 2026-10-03). Drawn by HomeShell.tsx on /challenge and by the book's
   home-menu.js on /understand, only for an account that is a teacher. */
.dph-teach {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 12px;
  border-radius: 999px; font-family: var(--dph-ui); font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .75); transition: transform .15s, box-shadow .15s;
}
.dph .dph-teach:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(var(--accent-rgb), .85); }
.dph-teach svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 360px) { .dph-teach__more { display: none; } }
@media (prefers-reduced-motion: reduce) { .dph-teach { transition: none; } .dph .dph-teach:hover { transform: none; } }

/* ---------- the menu: who is reading, their progress, the look of the page ---------- */
.dph-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(21, 23, 28, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.dph-menu {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(320px, 86vw); display: flex; flex-direction: column;
  background: var(--paper); border-right: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(21, 23, 28, .5);
  transform: translateX(-102%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s;
  font-family: var(--dph-ui); font-size: 14.5px; line-height: 1.4; color: var(--ink);
}
.dph.is-menu .dph-scrim { opacity: 1; pointer-events: auto; }
.dph.is-menu .dph-menu { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.dph-menu__head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 var(--dph-gutter); border-bottom: 1px solid var(--line); flex: none; }
.dph-menu__body { flex: 1; overflow-y: auto; padding: 14px var(--dph-gutter) 24px; }
.dph-acct { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.dph-acct__dot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 16px; text-transform: uppercase; }
.dph-acct__b { min-width: 0; }
.dph-acct__name { display: block; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dph-acct__sub { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dph-menu__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 2px; border-top: 1px solid var(--line); font-family: var(--dph-ui); font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: left; }
.dph .dph-menu__row:hover { color: var(--accent); }
.dph-menu__row > span:last-child { color: var(--ink-3); font-weight: 500; }
.dph-menu__sec { padding: 14px 2px 8px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dph-seg { display: flex; gap: 2px; padding: 3px; margin: 0 0 14px; border-radius: 999px; background: var(--paper-2); }
.dph .dph-seg button { flex: 1; padding: 6px 4px; border-radius: 999px; font-family: var(--dph-ui); font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-transform: capitalize; }
.dph .dph-seg button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 23, 28, .05), 0 4px 16px -8px rgba(21, 23, 28, .12); }
.dph-dots { display: flex; gap: 10px; padding: 0 2px 14px; }
.dph .dph-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: inset 0 0 0 2px var(--paper); }
.dph .dph-dot.is-on { border-color: var(--ink); }

/* ---------- the page ---------- */
.dph-main { max-width: 980px; margin: 0 auto; padding: 22px var(--dph-gutter) 0; }

/* the two halves of the site as one toggle: the half the student is in is lit */
.dph-sides { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font-family: var(--dph-ui); }
.dph-side { padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ink-2); transition: color .15s, background .15s; }
.dph .dph-side:hover { color: var(--ink); }
.dph .dph-side.is-on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

.dph-h1 { margin: 14px 0 10px; font-family: var(--dph-display); font-variation-settings: "opsz" 144; font-weight: 600; font-size: clamp(34px, 9vw, 54px); line-height: 1.02; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.dph-lede { max-width: 46ch; margin: 0 0 18px; font-family: var(--dph-body); font-size: 18px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.dph-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.dph-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; font-family: var(--dph-ui); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: left; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 30px 70px -30px rgba(var(--accent-rgb), .35); transition: transform .15s; }
.dph .dph-btn:hover { transform: translateY(-1px); color: #fff; }
.dph-btn small { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; opacity: .85; }

/* the search box */
.dph-find { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 18px 0 0; padding: 11px 16px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); cursor: text; }
.dph-find:focus-within { border-color: var(--accent); }
.dph-find svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.dph .dph-find input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: none; font-family: var(--dph-ui); font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.dph .dph-find input::placeholder { color: var(--ink-3); opacity: 1; }
.dph-none { margin: 12px 4px 0; font-family: var(--dph-ui); font-size: 14px; color: var(--ink-2); }

/* ---------- the list: a unit opens its chapters, a chapter opens what is inside it ---------- */
.dph-units { margin: 20px 0 0; border-top: 1px solid var(--line); }
.dph-unit { display: block; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; overflow: visible; scroll-margin-top: 76px; }
.dph-unit > summary, .dph-ch > summary { list-style: none; cursor: pointer; user-select: none; }
.dph-unit > summary::-webkit-details-marker, .dph-ch > summary::-webkit-details-marker { display: none; }
.dph-unit > summary::before, .dph-ch > summary::before { content: none; display: none; }
.dph-unit__h { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 14px 2px; font-family: var(--dph-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.dph-unit__n { flex: none; min-width: 58px; font-family: var(--dph-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.dph-unit__t { flex: 1; min-width: 0; }
.dph-unit__c { font-family: var(--dph-ui); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.dph-unit[open] > summary .dph-unit__t { color: var(--accent); }
.dph-chev { flex: none; align-self: center; width: 8px; height: 8px; margin: -4px 4px 0 2px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.dph details[open] > summary > .dph-chev { transform: rotate(-135deg); margin-top: 4px; }
.dph-unit__in { padding: 2px 0 18px; }
.dph-chs { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.dph-box { margin: 14px 0 8px; font-family: var(--dph-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dph-box small { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.dph-ch { display: block; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.dph-ch:hover, .dph-ch[open] { border-color: var(--ink); }
.dph-ch.is-started { border-color: var(--accent); }
.dph-ch__sum { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; font-weight: 400; color: var(--ink); }
.dph-ch__t { display: block; font-family: var(--dph-display); font-weight: 600; font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.dph-ch__s { display: block; margin-top: 2px; font-family: var(--dph-ui); font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--ink-3); }
.dph-ring { position: relative; display: grid; place-items: center; width: 40px; height: 40px; font-family: var(--dph-ui); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.dph-ring svg { position: absolute; inset: 0; width: 40px; height: 40px; transform: rotate(-90deg); }
.dph-ring circle { fill: none; stroke-width: 3; }
.dph-ring .t { stroke: var(--paper-2); }
/* the dash is as long as the progress, so a ring that stands at zero draws nothing at all (a round cap, or an offset
   dash, leaves a dot at the top) */
.dph-ring .b { stroke: var(--accent); stroke-linecap: butt; stroke-dasharray: var(--p, 0) 100; transition: stroke-dasharray .6s; }

/* what a chapter opens: its lessons in the book, its problems in the Challenge */
.dph-ls { padding: 4px 0; border-top: 1px solid var(--line); }
.dph-l { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 10px; padding: 9px 14px 9px 18px; font-family: var(--dph-ui); font-size: 14.5px; font-weight: 400; line-height: 1.35; color: var(--ink); }
.dph .dph-l:hover { background: var(--paper-2); color: var(--ink); }
.dph-l__n { font-size: 12px; font-weight: 700; color: var(--ink-3); text-align: center; }
.dph-l__m { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.dph-l.is-started .dph-l__n { color: var(--accent); }
.dph-l.is-done .dph-l__n { font-size: 0; }
.dph-l.is-done .dph-l__n::before { content: "✓"; font-size: 13px; color: var(--good); }
.dph-l.is-here .dph-l__t { font-weight: 600; }
/* under the lessons of a chapter: "Workbook" and "Glossary", two plain links side by side */
.dph-more { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 4px; padding: 10px 14px 9px 18px; border-top: 1px dashed var(--line); font-family: var(--dph-ui); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.dph .dph-more a { color: var(--accent); }
.dph .dph-more a:hover { text-decoration: underline; }
.dph-more a::after { content: " →"; font-weight: 500; }

/* --- Challenge only: a chapter is one card that starts its problems ------------------------------
   (components/challenge/SetList.tsx; the owner, 2026-10-03). The book's chapters stay accordions
   (.dph-ch above), so these rules have classes of their own and change nothing on /understand. */
.dph-go {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  align-self: stretch; /* the cards of one row stand equally tall */
  padding: 14px 14px 14px 16px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 23, 28, .04);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.dph .dph-go:hover {
  color: var(--ink); border-color: rgba(var(--accent-rgb), .55); transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(var(--accent-rgb), .55), 0 2px 6px rgba(21, 23, 28, .06);
}
.dph .dph-go:active { transform: translateY(0); }
.dph-go.is-started { border-color: rgba(var(--accent-rgb), .40); }
.dph-go .dph-ring, .dph-go .dph-ring svg { width: 44px; height: 44px; }
.dph-go__b { min-width: 0; }
.dph-go__t { display: block; font-family: var(--dph-display); font-weight: 600; font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.dph-go__s { display: block; margin-top: 3px; font-family: var(--dph-ui); font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.dph-go__cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 14px; border-radius: 999px;
  font-family: var(--dph-ui); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--accent); background: rgba(var(--accent-rgb), .09);
  transition: color .18s, background .18s, box-shadow .18s;
}
.dph-go__arrow { display: inline-block; transition: transform .18s; }
/* a chapter in progress invites, and every card lights up under the pointer */
.dph-go.is-started .dph-go__cta, .dph .dph-go:hover .dph-go__cta {
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb), .6);
}
.dph .dph-go:hover .dph-go__arrow { transform: translateX(3px); }
.dph-go.is-done { border-color: rgba(5, 150, 105, .35); }
.dph-go.is-done .dph-ring .b { stroke: var(--good); }
.dph-go.is-done .dph-go__cta { color: var(--good); background: rgba(5, 150, 105, .10); box-shadow: none; }
.dph .dph-go.is-done:hover .dph-go__cta { color: #fff; background: var(--good); }
.dph .dph-go.is-done:hover .dph-go__arrow { transform: none; }
@media (max-width: 380px) {
  .dph-go { gap: 10px; padding: 12px; }
  .dph-go__cta { padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .dph-go, .dph-go__arrow { transition: none; }
  .dph .dph-go:hover, .dph .dph-go:hover .dph-go__arrow { transform: none; }
}

@media (min-width: 760px) {
  .dph { --dph-gutter: 24px; }
  .dph-chs { grid-template-columns: 1fr 1fr; }
}