/* ==========================================================================
   Textbook: the third theme, data-theme="textbook".
   A printed page. Book white, ink type, Newsreader headlines, and the product
   shown as numbered figures straight on the page, with no box behind them. Tadpole green is the spot color: the
   logo, the button and the key words. No props, no paper motif, no dark band.

   Linked from every page right after site.css. Everything here is scoped to
   [data-theme="textbook"] except section 0, the two hooks every theme shares.
   Desk and Notebook rules live in site.css and are never edited from here.
   Rules and the page contract: ../../DESIGN.md.

   Sections:
   0. Shared hooks (all themes)
   1. Fallback font and tokens
   2. Page, type and controls
   3. Surfaces: sections, cards, paper, the band
   4. Figures: no plate behind the product
   5. Figure numbers and captions
   6. Home page
   7. Product pages and contact
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shared hooks (all themes)
   -------------------------------------------------------------------------- */
/* Figure numbers and captions belong to the Textbook only. */
:root:not([data-theme="textbook"]) .only-textbook { display: none !important; }
/* A plain wrapper around a widget slot, an ordinary block in every theme. */
.fig-plate { position: relative; min-width: 0; }

/* --------------------------------------------------------------------------
   1. Fallback font and tokens
   -------------------------------------------------------------------------- */
/* Metric-matched to Newsreader, so headlines take the same space before and
   after the web font arrives. */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 100.3%; ascent-override: 73.8%; descent-override: 25.9%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic"); size-adjust: 89%; ascent-override: 83.1%; descent-override: 29.2%; line-gap-override: 0%; }

[data-theme="textbook"] {
  color-scheme: light;
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-hand: "Newsreader", "Newsreader Fallback", Georgia, serif;   /* no handwriting in this theme */
  --display-weight: 400;
  --display-track: -0.018em;
  --display-italic: italic;

  --bg: #FBFAF7;               /* book white */
  --bg-2: #F5F3EE;
  --bg-3: #EFECE5;
  --bg-deep: #E6F2EA;          /* the band is a pale green plate, never a dark slab */
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --surface-edge: #E7E3DA;
  --text: #16191E;             /* ink */
  --text-2: #4A505B;
  --text-3: #62686F;           /* 5.4:1 on book white */
  --ink: #16191E;
  --ink-2: #4A505B;
  --ink-3: #62686F;
  --line: rgba(22, 25, 30, .09);
  --line-strong: rgba(22, 25, 30, .17);
  --line-paper: #ECE8DF;
  --accent: #00C56B;           /* Tadpole green, with ink text */
  --on-accent: #05291B;        /* 6.9:1 on --accent */
  --accent-hover: #12D27A;
  --accent-text: #007A45;      /* 5.2:1 on book white */
  --accent-paper: #007A45;
  --hl: #FFE173;
  --hl-ink: #2D2A22;
  --header-bg: rgba(251, 250, 247, .86);
  --menu-bg: #FFFFFF;
  --menu-tint: #F7F5F0;

  --radius-btn: 999px;
  --radius-card: 14px;
  --radius-paper: 16px;
  --radius-window: 10px;

  --shadow-1: 0 1px 2px rgba(22, 25, 30, .06), 0 3px 8px -4px rgba(22, 25, 30, .10);
  --shadow-2: 0 0 0 1px rgba(22, 25, 30, .05), 0 2px 4px rgba(22, 25, 30, .04), 0 14px 30px -14px rgba(22, 25, 30, .20);
  --shadow-3: 0 0 0 1px rgba(22, 25, 30, .07), 0 2px 4px rgba(22, 25, 30, .04), 0 22px 44px -22px rgba(22, 25, 30, .28);
  --focus: 0 0 0 3px rgba(0, 122, 69, .3);
}
/* The widget frame keeps its plain window, with the theme's window shadow.
   (html[...] outranks the :root default in ui.css, which loads later.) */
html[data-theme="textbook"] { --tp-frame-shadow: var(--shadow-3); }

/* --------------------------------------------------------------------------
   2. Page, type and controls
   -------------------------------------------------------------------------- */
[data-theme="textbook"] body::before { background: var(--bg); }
/* No props, notes or marks from the other themes. */
[data-theme="textbook"] :is(.only-desk, .only-notebook, .hp-todo, .prop, .prop-sticky, .prop-index, .prop-receipt, .prop-stamp, .prop-pencil) { display: none !important; }

[data-theme="textbook"] :is(.display, .h1, .h2) { font-variation-settings: "opsz" 72; }
[data-theme="textbook"] .display { line-height: 1; letter-spacing: -0.024em; }
[data-theme="textbook"] :is(.display, .h1, .h2) em { color: var(--accent-text); font-weight: 400; }
[data-theme="textbook"] .h2 { letter-spacing: -0.02em; }
[data-theme="textbook"] .tile__title {
  font-variation-settings: "opsz" 36; font-weight: 450; letter-spacing: -0.012em;
  font-size: clamp(1.5rem, 1.3rem + .5vw, 1.75rem);
}
/* Display numbers and dates set in Newsreader at text sizes. */
[data-theme="textbook"] :is(.proof__item b, .stat b, .pp-steps b, .pp-band-stat b) { font-variation-settings: "opsz" 48; }

/* A printed annotation: Newsreader italic in the spot green, never handwriting. */
[data-theme="textbook"] .note-hand { font: italic 500 var(--fs-4)/1.2 var(--font-display); color: var(--accent-paper); }
[data-theme="textbook"] .mark path { --mark-color: #00A85B; }

[data-theme="textbook"] .theme-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
[data-theme="textbook"] .btn--solid { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 80, 40, .18), 0 8px 18px -10px rgba(0, 150, 80, .55); }
[data-theme="textbook"] .btn--ghost,
[data-theme="textbook"] .paper .btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="textbook"] .btn--ghost:hover,
[data-theme="textbook"] .paper .btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--text-3); }
[data-theme="textbook"] .nav__new { background: var(--accent); }

/* --------------------------------------------------------------------------
   3. Surfaces: sections, cards, paper, the band
   -------------------------------------------------------------------------- */
[data-theme="textbook"] :is(.section--alt, .site-footer) { background: var(--bg-2); }
[data-theme="textbook"] .site-footer { border-top: 1px solid var(--line); }
[data-theme="textbook"] .card { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
[data-theme="textbook"] .paper { background: var(--surface); box-shadow: var(--shadow-2); }
[data-theme="textbook"] .paper--stack::before { display: none; }
[data-theme="textbook"] .checks li svg path { stroke: var(--accent); stroke-width: 2.6; }

/* The bold band: a pale green plate with ink type and green numbers. */
[data-theme="textbook"] .band {
  background: var(--bg-deep); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(0, 90, 50, .08);
  --text: #16191E; --text-2: #3F5A4C; --text-3: #3F5A4C; --line: rgba(0, 90, 50, .14); --line-strong: rgba(0, 90, 50, .26);
}
[data-theme="textbook"] .band .tt > span { color: #3F5A4C; }
[data-theme="textbook"] :is(.stat b, .pp-band-stat b) { color: #00663A; }
[data-theme="textbook"] .stat { border-color: rgba(0, 90, 50, .18); }
[data-theme="textbook"] .band .btn--ghost { background: var(--surface); }

/* --------------------------------------------------------------------------
   4. Figures: the product sits straight on the page, with no plate or box behind it.
   -------------------------------------------------------------------------- */
[data-theme="textbook"] :is(.tile__widget, .hero__stage, .pp-hero__stage, .fig-plate, .pp-fig) {
  position: relative; min-width: 0;
  display: grid; align-content: center; justify-items: stretch;
}
/* Product pages give their small UI details a cream plate; Textbook leaves it out. */
[data-theme="textbook"] .pp-tile__plate { background: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   5. Figure numbers and captions
   Every figure is numbered in page order by a CSS counter: never write a number.
   -------------------------------------------------------------------------- */
[data-theme="textbook"] main { counter-reset: fig; }
[data-theme="textbook"] .fig-no::before {
  counter-increment: fig; content: "Figure " counter(fig);
  font: italic 500 1rem/1 var(--font-display); letter-spacing: 0; color: var(--accent-paper);
  font-variation-settings: "opsz" 16;
}
[data-theme="textbook"] .fig-no { display: inline-block; margin-right: 10px; }
/* In an eyebrow the number takes the dot's place. */
[data-theme="textbook"] .eyebrow:has(.fig-no) .dot { display: none; }
[data-theme="textbook"] .eyebrow .fig-no { margin-right: 2px; }
/* A caption above the product (below it on phones).
   It says what the loop shows, in the third person. */
[data-theme="textbook"] .fig__cap {
  margin: 0 0 18px; max-width: 52em;
  font-size: var(--fs-6); line-height: 1.5; color: var(--ink-3); text-wrap: pretty;
}
@media (max-width: 719px) {
  [data-theme="textbook"] .fig__cap { order: 2; margin: 14px 4px 0; }
}
/* Existing figure captions (still screens on product pages) get the same number. */
[data-theme="textbook"] .pp-fig > .pp-cap { margin-top: 18px; color: var(--ink-3); }
[data-theme="textbook"] .pp-fig > .pp-cap svg { display: none; }
[data-theme="textbook"] .pp-fig > .pp-cap::before {
  counter-increment: fig; content: "Figure " counter(fig); flex: none;
  font: italic 500 1rem/1.3 var(--font-display); color: var(--accent-paper);
}

/* --------------------------------------------------------------------------
   6. Home page
   -------------------------------------------------------------------------- */
/* Hero: the layout (calendar as Figure 1 across the full width) is shared by
   every theme in index.html; Textbook adds the chip and pill styling. */
[data-theme="textbook"] .home-hero__index a { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="textbook"] .home-hero__index a:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--text-3); }
[data-theme="textbook"] .trust { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="textbook"] .trust--link:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="textbook"] .tag-new { color: #00663A; background: #E2F4E9; }

/* Payments: the statement on white, and the note printed in green italic. */
[data-theme="textbook"] .stmt .paper { box-shadow: var(--shadow-2); }
[data-theme="textbook"] .stmt__note { color: var(--accent-paper); }

/* --------------------------------------------------------------------------
   7. Product pages and contact
   -------------------------------------------------------------------------- */
/* Six tiles of small UI details: no card and no plate. */
[data-theme="textbook"] .pp-tile.paper { padding: 0; background: none; box-shadow: none; border-radius: 0; }
[data-theme="textbook"] .pp-tile__title,
[data-theme="textbook"] .pp-tile .body { padding-inline: 0; }
[data-theme="textbook"] .pp-tile__title { color: var(--text); }
[data-theme="textbook"] .pp-tile .body { color: var(--text-2); }
[data-theme="textbook"] .pp-rel__icon { background: color-mix(in srgb, var(--hue) 12%, white); }
[data-theme="textbook"] .pp-stmt .note-hand { font-size: var(--fs-4); color: var(--accent-paper); }

/* Contact: three plain cards. */
[data-theme="textbook"] .contact-card,
[data-theme="textbook"] .contact-card:nth-child(n) { transform: none; border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
[data-theme="textbook"] .contact-card__body { line-height: 1.6; }
[data-theme="textbook"] .demo-cal iframe { border-radius: 10px; }