/* ============================================================
   paper.css — StayIn handmade-paper visual language, site-wide.

   The same language as home-paper.css (Home), for every other
   user-facing page and shared component. Opt-in per page: a page gets
   it by loading this file and adding `paper` to <body class>.

   SCOPING: every rule is under
     :root:not([data-theme="dark"]) body.paper
   so dark theme is never touched (pages without the theme toggle have
   no data-theme at all and count as light). Visual-only: surfaces,
   colors, borders, radii, shadows, text treatment and decorative
   pseudo-elements — never width/height/padding/margin/display/position
   of existing boxes. Some shared/injected styles use !important or
   inline style attributes; the matching overrides use !important too.

   Texture is inline SVG noise (no image assets). Print is excluded:
   the whole file sits inside @media screen.

   This file is GENERATED from tools/paper/paper.src.css (§ = the scope selector):
     node tools/build-paper-css.mjs
   ============================================================ */
@media screen {

/* ---------------- Tokens ---------------- */
:root:not([data-theme="dark"]) body.paper {
  --hp-desk:       #E6D3BB;
  --hp-sheet:      #F4EADB;
  --hp-stock:      #FAF4E9;
  --hp-stock-2:    #F2E6D4;
  --hp-ink:        #1F4430;
  --hp-ink-2:      #34543F;
  --hp-muted:      #56675A;
  --hp-clay:       #9A4C2E;
  --hp-clay-fill:  #A9573A;
  --hp-sage:       #3F6E4C;
  --hp-edge:       rgba(120, 88, 52, 0.17);
  --hp-rule:       rgba(120, 88, 52, 0.16);

  --hp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .14 .16 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --hp-fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .22' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .18 .3 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --hp-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .009' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .26 .1 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --hp-window: linear-gradient(118deg,
      rgba(255, 247, 232, 0) 0%, rgba(255, 247, 232, 0.55) 7%, rgba(255, 247, 232, 0) 15%,
      rgba(110, 70, 30, 0) 20%, rgba(110, 70, 30, 0.075) 24%, rgba(110, 70, 30, 0.075) 30%, rgba(110, 70, 30, 0) 34%,
      rgba(255, 247, 232, 0) 38%, rgba(255, 247, 232, 0.35) 43%, rgba(255, 247, 232, 0) 48%,
      rgba(110, 70, 30, 0) 52%, rgba(110, 70, 30, 0.06) 56%, rgba(110, 70, 30, 0.06) 61%, rgba(110, 70, 30, 0) 65%);
  --hp-deckle-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12'%3E%3Cfilter id='d' x='-.1' y='-1' width='1.2' height='3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .6' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Crect x='-20' y='5' width='280' height='20' filter='url(%23d)'/%3E%3C/svg%3E");
  --hp-deckle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12'%3E%3Cfilter id='d' x='-.1' y='-1' width='1.2' height='3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .6' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Crect x='-20' y='-13' width='280' height='20' filter='url(%23d)'/%3E%3C/svg%3E");
  --hp-deckle-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='240'%3E%3Cfilter id='d' x='-1' y='-.1' width='3' height='1.2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .09' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Crect x='5' y='-20' width='20' height='280' filter='url(%23d)'/%3E%3C/svg%3E");
  --hp-deckle-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='240'%3E%3Cfilter id='d' x='-1' y='-.1' width='3' height='1.2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .09' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Crect x='-13' y='-20' width='20' height='280' filter='url(%23d)'/%3E%3C/svg%3E");
  --hp-grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .08 .14 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --hp-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .9 .2 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --hp-btn-grain: var(--hp-grain-light), var(--hp-grain-soft);
  --hp-stroke-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2 C 18 3.4, 34 6.2, 52 4.6 S 88 3.2, 119 4.4' fill='none' stroke='%233F6E4C' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");

  --hp-card-bg:
    var(--hp-grain),
    linear-gradient(165deg, var(--hp-stock) 0%, var(--hp-stock-2) 100%);
  --hp-sheet-bg:
    var(--hp-grain),
    var(--hp-fibers),
    var(--hp-mottle),
    var(--hp-window),
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(255, 250, 238, 0.85), transparent 65%),
    linear-gradient(180deg, #F6EEE1 0%, #F1E5D2 100%);
  --hp-lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(120, 88, 52, 0.07),
    0 1px 1px rgba(80, 50, 20, 0.08),
    2px 8px 16px -8px rgba(80, 50, 20, 0.3),
    5px 22px 34px -22px rgba(80, 50, 20, 0.38);
  --hp-lift-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(120, 88, 52, 0.07),
    0 1px 1px rgba(80, 50, 20, 0.09),
    3px 11px 20px -8px rgba(80, 50, 20, 0.34),
    6px 28px 40px -22px rgba(80, 50, 20, 0.42);
  --hp-lift-big:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 3px rgba(80, 50, 20, 0.1),
    4px 18px 34px -14px rgba(80, 50, 20, 0.36),
    10px 40px 60px -40px rgba(80, 50, 20, 0.42);
  --hp-press:
    inset 0 1.5px 3px rgba(80, 50, 20, 0.16),
    inset 0 0 0 1px rgba(120, 88, 52, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8);
  --hp-letterpress: 0 1px 0 rgba(255, 255, 255, 0.75);
  --hp-btn-green: var(--hp-btn-grain), linear-gradient(180deg, #2C5A3E 0%, #1F4430 100%);
  --hp-btn-clay:  var(--hp-btn-grain), linear-gradient(180deg, #B6633F 0%, #A9573A 100%);
  --hp-btn-sage:  var(--hp-btn-grain), linear-gradient(180deg, #4A7C59 0%, #3F6E4C 100%);
  --hp-btn-lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 1px rgba(40, 25, 10, 0.22),
    3px 9px 18px -8px rgba(40, 25, 10, 0.45);

  /* The desk */
  background-color: var(--hp-desk) !important;
  background-image:
    var(--hp-grain),
    var(--hp-mottle),
    var(--hp-window),
    radial-gradient(ellipse 80% 55% at 8% -5%, rgba(255, 244, 222, 0.95), transparent 62%),
    linear-gradient(180deg, #EBDBC5 0%, #E3CDB1 100%) !important;
}
/* Where :has() is supported the desk moves to the root, so it fills the
   whole window even when the body is shorter than the viewport (no seam);
   the body itself then stays transparent. Older browsers keep the body desk. */
:root:not([data-theme="dark"]):has(> body.paper) {
  --hp-grain-root: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .14 .16 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-color: #E6D3BB !important;
  background-image:
    var(--hp-grain-root),
    radial-gradient(ellipse 80% 55% at 8% -5%, rgba(255, 244, 222, 0.95), transparent 62%),
    linear-gradient(118deg,
      rgba(255, 247, 232, 0) 0%, rgba(255, 247, 232, 0.55) 7%, rgba(255, 247, 232, 0) 15%,
      rgba(110, 70, 30, 0) 20%, rgba(110, 70, 30, 0.075) 24%, rgba(110, 70, 30, 0.075) 30%, rgba(110, 70, 30, 0) 34%,
      rgba(255, 247, 232, 0) 38%, rgba(255, 247, 232, 0.35) 43%, rgba(255, 247, 232, 0) 48%,
      rgba(110, 70, 30, 0) 52%, rgba(110, 70, 30, 0.06) 56%, rgba(110, 70, 30, 0.06) 61%, rgba(110, 70, 30, 0) 65%),
    linear-gradient(180deg, #EBDBC5 0%, #E3CDB1 100%) !important;
}
:root:not([data-theme="dark"]):has(> body.paper) > body.paper {
  background: transparent !important;
}

/* ---------------- The sheet (deckled page) ----------------
   .page / .page-shell are position:relative + overflow:hidden
   (theme-botanical.css): ::before (the old butter glow) becomes the
   sheet's shadow, ::after the paper. isolation makes .page its own
   stacking context, so both layers can sit at z-index -1: behind every
   child, positioned or not (some pages override the theme-botanical
   .page > * positioning). Pages without such a container keep the desk. */
:root:not([data-theme="dark"]) body.paper :is(.page, .page-shell) { isolation: isolate; }
:root:not([data-theme="dark"]) body.paper :is(.page, .page-shell)::before {
  top: 10px; right: 8px; bottom: 34px; left: 8px;
  width: auto; height: auto;
  background: none;
  opacity: 1;
  z-index: -1;
  border-radius: 6px;
  /* Kept within ~28px below the sheet: .page clips at its bottom edge
     (overflow:hidden), and the sheet ends 30px above it. */
  box-shadow:
    0 2px 3px rgba(80, 50, 20, 0.12),
    4px 13px 24px -10px rgba(80, 50, 20, 0.36),
    8px 20px 30px -22px rgba(80, 50, 20, 0.4);
}
:root:not([data-theme="dark"]) body.paper :is(.page, .page-shell)::after {
  content: "";
  position: absolute;
  top: 6px; right: 4px; bottom: 30px; left: 4px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--hp-sheet);
  background-image: var(--hp-sheet-bg);
  -webkit-mask:
    var(--hp-deckle-t) top left / 240px 12px repeat-x,
    var(--hp-deckle-b) bottom left / 240px 12px repeat-x,
    var(--hp-deckle-l) top left / 12px 240px repeat-y,
    var(--hp-deckle-r) top right / 12px 240px repeat-y,
    linear-gradient(#000, #000) center / calc(100% - 20px) calc(100% - 20px) no-repeat;
          mask:
    var(--hp-deckle-t) top left / 240px 12px repeat-x,
    var(--hp-deckle-b) bottom left / 240px 12px repeat-x,
    var(--hp-deckle-l) top left / 12px 240px repeat-y,
    var(--hp-deckle-r) top right / 12px 240px repeat-y,
    linear-gradient(#000, #000) center / calc(100% - 20px) calc(100% - 20px) no-repeat;
}

/* ---------------- Focus ---------------- */
:root:not([data-theme="dark"]) body.paper :is(button, a, [role="button"], input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--hp-clay-fill);
  outline-offset: 3px;
}

/* ---------------- Type accents ---------------- */
:root:not([data-theme="dark"]) body.paper :is(h1, h2, h3) { color: var(--hp-ink); }
/* App pages only (.page/.page-shell): marketing heroes keep their own type. */
:root:not([data-theme="dark"]) body.paper :is(.page, .page-shell) .hero h1,
:root:not([data-theme="dark"]) body.paper .page-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Hand-drawn green stroke instead of the flat coral rule. */
:root:not([data-theme="dark"]) body.paper :is(.page .hero h1, .page-shell .hero h1, .page-title, .onb-question)::after {
  width: 96px;
  max-width: 40%;
  height: 7px;
  bottom: -2px;
  background: var(--hp-stroke-green) center / 100% 100% no-repeat;
}
:root:not([data-theme="dark"]) body.paper .section-title,
:root:not([data-theme="dark"]) body.paper .eyebrow,
:root:not([data-theme="dark"]) body.paper .progress-section-title {
  color: var(--hp-clay);
  text-shadow: var(--hp-letterpress);
}
:root:not([data-theme="dark"]) body.paper .brand-tagline em { color: var(--hp-clay); }

/* ---------------- Topbar ---------------- */
:root:not([data-theme="dark"]) body.paper .topbar {
  border-bottom-color: var(--hp-rule);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
:root:not([data-theme="dark"]) body.paper .topbar-title {
  color: var(--hp-ink);
  text-shadow: var(--hp-letterpress);
}
:root:not([data-theme="dark"]) body.paper .topbar-btn {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .topbar-btn:hover {
  border-color: rgba(169, 87, 58, 0.4);
  box-shadow: var(--hp-lift-hover);
}
:root:not([data-theme="dark"]) body.paper .theme-toggle {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .theme-toggle button { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .theme-toggle button:not(.active):hover { color: var(--hp-clay); }
:root:not([data-theme="dark"]) body.paper .theme-toggle button.active {
  background: var(--hp-btn-clay);
  color: #FFF8EE;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(80, 40, 15, 0.3);
}

/* ---------------- App nav (desktop tiles + mobile bar/drawer) ---------------- */
:root:not([data-theme="dark"]) body.paper .app-nav-item {
  color: var(--hp-ink-2);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .app-nav-item:hover { color: var(--hp-ink); box-shadow: var(--hp-lift-hover); }
:root:not([data-theme="dark"]) body.paper .app-nav-ico {
  background: linear-gradient(180deg, #EFE3D0, #F6EDE0);
  box-shadow: var(--hp-press);
}
:root:not([data-theme="dark"]) body.paper .app-nav-item.is-active {
  color: var(--hp-ink);
  border-color: rgba(169, 87, 58, 0.34);
  background: var(--hp-grain), linear-gradient(165deg, #F7DDCB 0%, #EDC3A7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 228, 0.9),
    0 1px 1px rgba(80, 40, 15, 0.1),
    2px 9px 18px -8px rgba(150, 70, 35, 0.4),
    5px 22px 34px -22px rgba(120, 60, 25, 0.45);
}
:root:not([data-theme="dark"]) body.paper .app-nav-item.is-active .app-nav-ico {
  background: rgba(255, 246, 236, 0.7);
  color: var(--hp-clay-fill);
  box-shadow: inset 0 1px 2px rgba(120, 50, 20, 0.16), 0 1px 0 rgba(255, 240, 228, 0.7);
}
:root:not([data-theme="dark"]) body.paper .app-nav-item.is-active::after { background: var(--hp-clay-fill); }
:root:not([data-theme="dark"]) body.paper .app-nav-item .app-nav-beta {
  background: rgba(255, 250, 242, 0.8);
  box-shadow: 0 1px 1px rgba(80, 50, 20, 0.12);
}
:root:not([data-theme="dark"]) body.paper .app-nav-burger {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .app-nav-wordmark { color: var(--hp-ink); text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper .app-nav-drawer {
  background-color: var(--hp-sheet);
  background-image: var(--hp-grain), var(--hp-fibers), linear-gradient(180deg, #F6EEE1, #F1E5D2);
  border-right-color: var(--hp-edge);
}
:root:not([data-theme="dark"]) body.paper .app-nav-drawer-item.is-active { background: rgba(169, 87, 58, 0.1); }

/* ---------------- Buttons ---------------- */
:root:not([data-theme="dark"]) body.paper .btn-primary {
  color: #FFF8EE;
  background: var(--hp-btn-green);
  border-color: #193A28;
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .btn-primary:hover {
  background: var(--hp-btn-grain), linear-gradient(180deg, #306244 0%, #224A34 100%);
  border-color: #193A28;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 1px rgba(40, 25, 10, 0.22), 4px 13px 22px -9px rgba(40, 25, 10, 0.5);
}
:root:not([data-theme="dark"]) body.paper :is(.btn-ghost, .btn-secondary, .btn-outline) {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.btn-ghost, .btn-secondary, .btn-outline):hover {
  border-color: rgba(169, 87, 58, 0.42);
  box-shadow: var(--hp-lift-hover);
}

/* ---------------- Generic cards (help, privacy, terms…) ---------------- */
:root:not([data-theme="dark"]) body.paper .card {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .card:hover {
  border-color: rgba(169, 87, 58, 0.4);
  box-shadow: var(--hp-lift-hover);
}
:root:not([data-theme="dark"]) body.paper .card-accent { border-color: rgba(169, 87, 58, 0.45); }

/* ---------------- Progress dashboard (Account) ----------------
   "What we're noticing" (.insight-hero) keeps its plum treatment. */
:root:not([data-theme="dark"]) body.paper .stat-tile {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .stat-num {
  font-family: "Playfair Display", Georgia, serif;
  font-variant-numeric: lining-nums;
  color: var(--hp-ink);
  text-shadow: var(--hp-letterpress);
}
:root:not([data-theme="dark"]) body.paper .stat-label { color: var(--hp-muted); }
:root:not([data-theme="dark"]) body.paper .growth-title { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .growth-phrase { color: var(--hp-muted); }
:root:not([data-theme="dark"]) body.paper .growth-row .theme-chip {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
    color-mix(in srgb, var(--theme-color, var(--hp-clay-fill)) 16%, var(--hp-stock));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 1px rgba(80, 50, 20, 0.1), 1px 4px 8px -3px rgba(80, 50, 20, 0.28);
}
:root:not([data-theme="dark"]) body.paper .growth-wash {
  background: color-mix(in srgb, var(--theme-color, var(--hp-clay-fill)) 10%, #E9DCC8);
  box-shadow: var(--hp-press);
}
:root:not([data-theme="dark"]) body.paper .growth-wash > span {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--theme-color, var(--hp-clay-fill)) 55%, #F6EEE1) 0%,
    color-mix(in srgb, var(--theme-color, var(--hp-clay-fill)) 85%, #3a2a1a) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root:not([data-theme="dark"]) body.paper .history-item { border-bottom-color: var(--hp-rule); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
:root:not([data-theme="dark"]) body.paper .history-item:last-child { box-shadow: none; }
:root:not([data-theme="dark"]) body.paper .history-title { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .history-meta, :root:not([data-theme="dark"]) body.paper .progress-empty, :root:not([data-theme="dark"]) body.paper .progress-status { color: var(--hp-muted); }
:root:not([data-theme="dark"]) body.paper .history-mode {
  background: rgba(169, 87, 58, 0.12);
  color: var(--hp-clay);
  box-shadow: inset 0 0 0 1px rgba(169, 87, 58, 0.18);
}
:root:not([data-theme="dark"]) body.paper .progress-intro h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
:root:not([data-theme="dark"]) body.paper .progress-id-avatar { border-color: var(--hp-edge); box-shadow: var(--hp-lift); }
:root:not([data-theme="dark"]) body.paper .progress-id-greeting { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .module-chip {
  color: var(--hp-ink-2);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}

/* ---------------- Scenario picker (.ss-*, practice.html + Home) ---------------- */
:root:not([data-theme="dark"]) body.paper .ss-root {
  --ss-text:        #1F4430;
  --ss-text-muted:  #56675A;
  --ss-text-faint:  #6E7464;
  --ss-card-bg:     #F8F0E3;
  --ss-card-border: rgba(120, 88, 52, 0.17);
  --ss-card-shadow: var(--hp-lift);
  --ss-guided:      #B8694A;
  --ss-guided-b:    #A9573A;
  --ss-guided-soft: rgba(196, 128, 96, 0.16);
  --ss-live:        #5E8E70;
  --ss-live-b:      #3F6E4C;
  --ss-live-soft:   rgba(122, 169, 140, 0.2);
}
:root:not([data-theme="dark"]) body.paper .ss-module {
  background-image: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 color-mix(in srgb, var(--tint) 32%, rgba(120, 88, 52, 0.25)),
    2px 9px 18px -8px rgba(80, 50, 20, 0.3),
    5px 22px 34px -22px rgba(80, 50, 20, 0.36);
}
:root:not([data-theme="dark"]) body.paper .ss-module:hover:not(.is-active) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 5px 0 color-mix(in srgb, var(--tint) 38%, rgba(120, 88, 52, 0.25)),
    3px 13px 22px -8px rgba(80, 50, 20, 0.34),
    6px 28px 40px -22px rgba(80, 50, 20, 0.4);
}
:root:not([data-theme="dark"]) body.paper .ss-module.is-active {
  background:
    var(--hp-grain),
    linear-gradient(to top, color-mix(in srgb, var(--tint) 18%, transparent) 0%, color-mix(in srgb, var(--tint) 5%, transparent) 55%, transparent 100%),
    linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    2px 10px 22px -8px color-mix(in srgb, var(--tint) 45%, rgba(80, 50, 20, 0.4)),
    5px 24px 36px -22px rgba(80, 50, 20, 0.36);
}
:root:not([data-theme="dark"]) body.paper .ss-module-title, :root:not([data-theme="dark"]) body.paper .ss-panel-title { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .ss-module-desc { color: var(--hp-muted); }
:root:not([data-theme="dark"]) body.paper .ss-panel-icon, :root:not([data-theme="dark"]) body.paper .ss-module.is-active .ss-module-icon {
  background-image: var(--hp-btn-grain);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 1px rgba(40, 25, 10, 0.2), 1px 4px 8px -3px rgba(40, 25, 10, 0.35);
}
:root:not([data-theme="dark"]) body.paper .ss-module-icon { box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper .ss-dot { background: rgba(120, 88, 52, 0.25); box-shadow: inset 0 1px 1px rgba(80, 50, 20, 0.15); }
:root:not([data-theme="dark"]) body.paper .ss-scenario {
  border-radius: 14px;
  border-color: var(--hp-edge);
  background-image: var(--hp-grain), var(--hp-fibers), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
}
:root:not([data-theme="dark"]) body.paper .ss-scenario-media { position: relative; }
:root:not([data-theme="dark"]) body.paper .ss-scenario-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--hp-grain), linear-gradient(180deg, rgba(244, 228, 205, 0.18), rgba(244, 228, 205, 0));
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(120, 88, 52, 0.12), inset 0 -10px 18px -12px rgba(80, 50, 20, 0.3);
}
:root:not([data-theme="dark"]) body.paper .ss-side { background-image: var(--hp-grain); }
:root:not([data-theme="dark"]) body.paper .ss-side-btn {
  border-radius: 999px;
  border-color: rgba(40, 20, 8, 0.22);
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .ss-side-guided .ss-side-btn { background: var(--hp-btn-clay); }
:root:not([data-theme="dark"]) body.paper .ss-side-live .ss-side-btn { background: var(--hp-btn-sage); }
:root:not([data-theme="dark"]) body.paper .ss-side-title { text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper .ss-scenario-skill {
  background: rgba(255, 250, 242, 0.75);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 28%, transparent), 0 1px 1px rgba(80, 50, 20, 0.08);
}
:root:not([data-theme="dark"]) body.paper .ss-scenario-practiced { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 28%, transparent); }
:root:not([data-theme="dark"]) body.paper .picker-intro { color: var(--hp-ink-2); }
/* Desktop: the open module's scenario list sits in a tinted panel. */
@media (min-width: 768px) {
  :root:not([data-theme="dark"]) body.paper .ss-panel {
    background-image: var(--hp-grain), var(--hp-fibers);
    box-shadow: var(--hp-press);
  }
}

/* ---------------- Learn (learn.html) ---------------- */
:root:not([data-theme="dark"]) body.paper :is(.learn-hero, .practice-panel) {
  background: var(--hp-grain), var(--hp-fibers), radial-gradient(ellipse 60% 80% at 0% 0%, rgba(255, 250, 238, 0.85), transparent 65%), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift-big);
}
:root:not([data-theme="dark"]) body.paper .learn-hero h1, :root:not([data-theme="dark"]) body.paper .practice-panel-header h2 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--hp-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root:not([data-theme="dark"]) body.paper .learn-hero-em { color: var(--hp-sage); }
:root:not([data-theme="dark"]) body.paper .learn-section-sub, :root:not([data-theme="dark"]) body.paper .learn-hero p, :root:not([data-theme="dark"]) body.paper .practice-panel-header p { color: var(--hp-ink-2); }
:root:not([data-theme="dark"]) body.paper :is(.framework-card, .article-card, .worksheet-card, .practice-card) {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.framework-card, .article-card, .worksheet-card, .practice-card):hover {
  box-shadow: var(--hp-lift-hover);
}
/* Colored spines / tops stay — they carry each phase's / tone's color. */
:root:not([data-theme="dark"]) body.paper .framework-card { border-top-color: var(--phase); }
:root:not([data-theme="dark"]) body.paper :is(.framework-icon, .worksheet-icon, .practice-card-icon) { box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper :is(.framework-title, .article-title, .worksheet-title, .practice-card-title) {
  color: var(--hp-ink);
  font-family: "Playfair Display", Georgia, serif;
}
:root:not([data-theme="dark"]) body.paper :is(.framework-purpose, .article-desc, .worksheet-desc, .practice-card-desc, .framework-bullets) { color: var(--hp-ink-2); }
:root:not([data-theme="dark"]) body.paper .framework-cta { border-top-color: var(--hp-rule); }
:root:not([data-theme="dark"]) body.paper .worksheet-preview {
  background: color-mix(in srgb, var(--tone) 7%, #EFE4D2);
  box-shadow: var(--hp-press);
}
:root:not([data-theme="dark"]) body.paper .learn-arrow {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .learn-arrow:hover { border-color: rgba(169, 87, 58, 0.42); box-shadow: var(--hp-lift-hover); }
:root:not([data-theme="dark"]) body.paper .learn-arrow[disabled] { box-shadow: none; }
:root:not([data-theme="dark"]) body.paper .coming-soon { background: rgba(120, 88, 52, 0.1); box-shadow: var(--hp-press); }

/* ---------------- Custom Practice setup (custom-practice-onboarding.html) ----------------
   The page already has its own notebook sheet + scenery; it gets the
   desk, grain on the sheet, and raised paper controls. */
/* The pinned footer fades into --bg so scrolled text hides under it;
   pointing --bg at the desk tone keeps that fade seamless. */
:root:not([data-theme="dark"]) body.paper .cpo { --bg: #E4D0B5; }
:root:not([data-theme="dark"]) body.paper .cpo .sheet {
  background-color: var(--sheet);
  background-image: var(--hp-grain), var(--hp-fibers);
}
:root:not([data-theme="dark"]) body.paper .cpo :is(.starters button, .choices button, .levels button, .focus-options button) {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .cpo :is(.starters button, .choices button, .levels button, .focus-options button):hover {
  border-color: rgba(169, 87, 58, 0.42);
  box-shadow: var(--hp-lift-hover);
}
:root:not([data-theme="dark"]) body.paper .cpo :is(.choices button, .focus-options button)[aria-pressed="true"] {
  background: var(--hp-grain), linear-gradient(165deg, #F7DDCB 0%, #EDC3A7 100%);
  border-color: rgba(169, 87, 58, 0.45);
}
:root:not([data-theme="dark"]) body.paper .cpo .levels button[aria-pressed="true"] {
  color: #FFF8EE;
  background: var(--hp-btn-green);
  border-color: #193A28;
}
:root:not([data-theme="dark"]) body.paper .cpo .primary {
  background: var(--hp-btn-green);
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .cpo .primary:disabled { box-shadow: none; }
:root:not([data-theme="dark"]) body.paper .cpo .m-back {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .cpo h1 { color: var(--hp-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
:root:not([data-theme="dark"]) body.paper .cpo .write-label { color: var(--hp-clay); }
:root:not([data-theme="dark"]) body.paper .cpo .edit-panel :is(input, textarea) { background: #FFFCF6; box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper .cpo .expect { box-shadow: var(--hp-press); }

/* ================================================================
   Practice screens — Guided scenarios (23 pages), and the parts they
   share with Live (live-chat.html) and Custom (arch2-live.html):
   skill banner, panels, relationship state, chat bubbles, choices,
   end screen. Several shared scenario rules use !important.
   ================================================================ */
:root:not([data-theme="dark"]) body.paper :is(.scenario-back, .scenario-home) {
  background: var(--hp-card-bg) !important;
  border-color: var(--hp-edge) !important;
  color: var(--hp-ink) !important;
  box-shadow: var(--hp-lift) !important;
}
/* Skill banner: a paper strip with a green spine (replaces the rainbow ring). */
:root:not([data-theme="dark"]) body.paper .skill-banner {
  background:
    var(--hp-grain) padding-box,
    radial-gradient(ellipse 40% 140% at 100% 50%, rgba(122, 169, 140, 0.18), transparent 70%) padding-box,
    linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2)) padding-box,
    linear-gradient(var(--hp-edge), var(--hp-edge)) border-box !important;
  box-shadow: inset 5px 0 0 var(--hp-sage), var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .skill-eyebrow { color: var(--hp-clay); text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper .skill-text { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .scenario-context-btn { background: var(--hp-card-bg); box-shadow: var(--hp-lift); }
:root:not([data-theme="dark"]) body.paper .scenario-context-label { color: var(--hp-muted); }

/* Panels: heavy card stock. Tension still tints the edge + shadow. */
:root:not([data-theme="dark"]) body.paper .panel {
  background: var(--hp-card-bg) !important;
  border-color: var(--hp-edge) !important;
  box-shadow: var(--hp-lift-big) !important;
}
:root:not([data-theme="dark"]) body.paper .right-panel.mid-tension {
  border-color: rgba(180, 120, 60, 0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 3px rgba(80, 50, 20, 0.1),
              4px 18px 34px -14px rgba(170, 110, 50, 0.42) !important;
}
:root:not([data-theme="dark"]) body.paper .right-panel.high-tension {
  border-color: rgba(164, 80, 60, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 3px rgba(80, 50, 20, 0.1),
              4px 18px 34px -14px rgba(164, 70, 50, 0.48) !important;
}
:root:not([data-theme="dark"]) body.paper .label-row .badge { color: var(--hp-clay); text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper .turn-progress-label, :root:not([data-theme="dark"]) body.paper .progress-label { color: var(--hp-muted); }
:root:not([data-theme="dark"]) body.paper .turn-dot { background: rgba(120, 88, 52, 0.22); box-shadow: inset 0 1px 1px rgba(80, 50, 20, 0.15); }
:root:not([data-theme="dark"]) body.paper .turn-dot.done { background: var(--hp-clay-fill); opacity: 0.55; }
:root:not([data-theme="dark"]) body.paper .turn-dot.active { background: var(--hp-clay-fill); }
:root:not([data-theme="dark"]) body.paper .left-panel .title {
  position: relative;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--hp-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root:not([data-theme="dark"]) body.paper .left-panel .title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 92px;
  height: 7px;
  background: var(--hp-stroke-green) center / 100% 100% no-repeat;
}
:root:not([data-theme="dark"]) body.paper .scenario-subtitle { color: var(--hp-clay); }
:root:not([data-theme="dark"]) body.paper .character-tag { color: var(--hp-muted); }
:root:not([data-theme="dark"]) body.paper .scene-hook { color: var(--hp-ink-2); }

/* Relationship state: a pressed well with inked bars. */
:root:not([data-theme="dark"]) body.paper .state-card {
  background: linear-gradient(180deg, rgba(236, 224, 205, 0.55), rgba(246, 238, 225, 0.7)) !important;
  border-color: var(--hp-edge) !important;
  box-shadow: var(--hp-press) !important;
}
:root:not([data-theme="dark"]) body.paper .state-card-label { color: var(--hp-clay); text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper .state-pip-label { color: var(--hp-ink-2); }
:root:not([data-theme="dark"]) body.paper .state-pip-value { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .state-pip-track { background: #E6D8C3 !important; box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper .state-pip-fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
:root:not([data-theme="dark"]) body.paper .fill-tension  { background: linear-gradient(90deg, #C77A58, #A9573A) !important; }
:root:not([data-theme="dark"]) body.paper .fill-openness { background: linear-gradient(90deg, #7FA3C2, #4F7BA0) !important; }
:root:not([data-theme="dark"]) body.paper .fill-trust    { background: linear-gradient(90deg, #7FA88A, #3F6E4C) !important; }

/* Conversation */
:root:not([data-theme="dark"]) body.paper .chat-bubble.other {
  background: var(--hp-grain), linear-gradient(170deg, #FDF9F1, #F5ECDD) !important;
  color: var(--hp-ink) !important;
  border-color: var(--hp-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(80, 50, 20, 0.1), 2px 7px 14px -7px rgba(80, 50, 20, 0.35);
}
:root:not([data-theme="dark"]) body.paper .chat-bubble.other .bubble-name { color: var(--hp-clay); opacity: 1; }
:root:not([data-theme="dark"]) body.paper .chat-bubble.you {
  background: var(--hp-grain), linear-gradient(170deg, #B9643F, var(--hp-clay-fill)) !important;
  color: #FFF8EE !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(80, 40, 15, 0.15), 2px 7px 14px -7px rgba(120, 50, 20, 0.45);
}
:root:not([data-theme="dark"]) body.paper .chat-bubble.you .bubble-name { color: rgba(255, 244, 232, 0.9); opacity: 1; }
:root:not([data-theme="dark"]) body.paper .chat-narration { color: var(--hp-ink-2); text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper .chat-prompt { color: var(--hp-clay); text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper .typing-indicator {
  background: var(--hp-grain), linear-gradient(170deg, #FDF9F1, #F5ECDD) !important;
  border-color: var(--hp-edge) !important;
  box-shadow: 0 1px 1px rgba(80, 50, 20, 0.1), 2px 7px 14px -7px rgba(80, 50, 20, 0.3);
}
:root:not([data-theme="dark"]) body.paper .chat-coach {
  background: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-left-color: var(--hp-sage);
  box-shadow: 0 1px 1px rgba(80, 50, 20, 0.08), 2px 7px 14px -8px rgba(80, 50, 20, 0.3);
}
:root:not([data-theme="dark"]) body.paper .chat-coach .coach-tag { color: var(--hp-clay); }
:root:not([data-theme="dark"]) body.paper .chat-coach .coach-micro { color: var(--hp-ink-2); }
:root:not([data-theme="dark"]) body.paper .chat-coach .coach-text { color: var(--hp-ink); }

/* Choices: raised paper pills; the picked one turns peach. */
:root:not([data-theme="dark"]) body.paper .choice-btn {
  background: var(--hp-grain), linear-gradient(170deg, #FCF7EE, #F3E8D7) !important;
  border-color: var(--hp-edge) !important;
  color: var(--hp-ink) !important;
  box-shadow: var(--hp-lift);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
:root:not([data-theme="dark"]) body.paper .choice-btn:hover:not(:disabled) {
  border-color: rgba(169, 87, 58, 0.42) !important;
  box-shadow: var(--hp-lift-hover);
}
:root:not([data-theme="dark"]) body.paper .choice-letter {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--hp-clay) !important;
}
:root:not([data-theme="dark"]) body.paper .choice-btn.selected {
  background: var(--hp-grain), linear-gradient(165deg, #F7DDCB, #EDC3A7) !important;
  border-color: rgba(169, 87, 58, 0.4) !important;
}

/* End screen */
:root:not([data-theme="dark"]) body.paper .end-panel {
  background: var(--hp-grain), var(--hp-fibers), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2)) !important;
  border-color: var(--hp-edge) !important;
  box-shadow: var(--hp-lift-big) !important;
}
:root:not([data-theme="dark"]) body.paper :is(.end-eyebrow, .end-state-label, .end-skill-label, .end-alignment-label, .end-takeaway-label, .end-reflection-label) {
  color: var(--hp-clay);
  text-shadow: var(--hp-letterpress);
}
:root:not([data-theme="dark"]) body.paper :is(.end-title, .end-skill-name, .end-takeaway-text) {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--hp-ink);
}
:root:not([data-theme="dark"]) body.paper .end-summary { color: var(--hp-ink-2); }
/* "Same situation, different mode" card (scenario-mobile-fix.js, inline-styled) */
:root:not([data-theme="dark"]) body.paper .end-cross-mode {
  background: var(--hp-grain), linear-gradient(165deg, #F7E3D4, #F0D3BE) !important;
  border-color: rgba(169, 87, 58, 0.3) !important;
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .end-try-live {
  background: var(--hp-btn-sage) !important;
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .end-state-item {
  background: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2)) !important;
  border-color: var(--hp-edge) !important;
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .end-state-val {
  font-family: "Playfair Display", Georgia, serif;
  font-variant-numeric: lining-nums;
  color: var(--hp-ink);
}
:root:not([data-theme="dark"]) body.paper .end-alignment-list li { border-left-color: rgba(169, 87, 58, 0.35); }
:root:not([data-theme="dark"]) body.paper :is(.end-skill-recap, .end-alignment, .end-takeaway) { border-bottom-color: var(--hp-rule); }

/* ================================================================
   Live (live-chat.html) + Custom (arch2-live.html) chat screens.
   Full-height app pages: the sheet runs to the bottom edge so the
   composer sits on it.
   ================================================================ */
:root:not([data-theme="dark"]) body.paper .page:has(#inputField)::before { bottom: 8px; }
:root:not([data-theme="dark"]) body.paper .page:has(#inputField)::after { bottom: 4px; }

:root:not([data-theme="dark"]) body.paper #inputField {
  background: #FFFCF6;
  border-color: var(--hp-edge);
  box-shadow: var(--hp-press);
}
:root:not([data-theme="dark"]) body.paper #inputField:focus {
  border-color: var(--hp-sage);
  box-shadow: var(--hp-press), 0 0 0 3px rgba(63, 110, 76, 0.14);
}
:root:not([data-theme="dark"]) body.paper #sendBtn {
  color: #FFF8EE;
  background: var(--hp-btn-green);
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper #sendBtn:disabled { box-shadow: none; }
:root:not([data-theme="dark"]) body.paper #micBtn {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper #micBtn.recording { background: var(--hp-btn-clay); color: #FFF8EE; }
:root:not([data-theme="dark"]) body.paper .suggestions-toggle {
  color: var(--hp-clay);
  background: var(--hp-grain), linear-gradient(165deg, #F7E3D4, #F0D3BE);
  border-color: rgba(169, 87, 58, 0.32);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .suggestions-toggle[aria-pressed="false"] {
  color: var(--hp-muted);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
}
:root:not([data-theme="dark"]) body.paper :is(.live-mode-tag, .custom-badge, .meta-chip) {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(80, 50, 20, 0.12);
}
:root:not([data-theme="dark"]) body.paper .live-mode-tag, :root:not([data-theme="dark"]) body.paper .meta-chip { color: var(--hp-ink-2); }
:root:not([data-theme="dark"]) body.paper .custom-badge { color: var(--hp-clay); }
:root:not([data-theme="dark"]) body.paper .scene-note { color: var(--hp-ink-2); }
:root:not([data-theme="dark"]) body.paper .progress-hint, :root:not([data-theme="dark"]) body.paper .empty-chat-hint { color: var(--hp-muted); }
:root:not([data-theme="dark"]) body.paper .progress-dot { box-shadow: inset 0 1px 1px rgba(80, 50, 20, 0.15); }
:root:not([data-theme="dark"]) body.paper .opening-card {
  background: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-color: rgba(120, 88, 52, 0.3);
  color: var(--hp-ink-2);
  box-shadow: var(--hp-press);
}
:root:not([data-theme="dark"]) body.paper .end-session-btn {
  color: var(--hp-ink-2);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .end-session-btn:hover { border-color: rgba(169, 87, 58, 0.42); }
:root:not([data-theme="dark"]) body.paper .coach-line {
  background: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-color: var(--hp-edge);
  border-left-color: var(--hp-sage);
  box-shadow: 0 1px 1px rgba(80, 50, 20, 0.08), 2px 7px 14px -8px rgba(80, 50, 20, 0.3);
}
:root:not([data-theme="dark"]) body.paper .coach-line .coach-tag { color: var(--hp-clay); }
:root:not([data-theme="dark"]) body.paper .space-beat-btn {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .retry-btn { box-shadow: var(--hp-lift); }

/* Session summaries (Live .session-summary, Custom .a2-summary-panel) */
:root:not([data-theme="dark"]) body.paper :is(.session-summary, .a2-summary-panel) {
  background: var(--hp-grain), var(--hp-fibers), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-color: var(--hp-edge);
  border-left-color: var(--hp-sage);
  box-shadow: var(--hp-lift-big);
}
:root:not([data-theme="dark"]) body.paper :is(.summary-eyebrow, .a2-summary-label) { color: var(--hp-clay); text-shadow: var(--hp-letterpress); }
:root:not([data-theme="dark"]) body.paper :is(.summary-title, .summary-takeaway) { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .summary-list li { border-left-color: rgba(169, 87, 58, 0.35); }
:root:not([data-theme="dark"]) body.paper :is(.summary-loading, .a2-summary-loading) {
  background: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.end-banner, .a2-signin-card) {
  background: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .safety-card { box-shadow: var(--hp-lift); }

/* ================================================================
   Content pages: articles (learn/*), About, Help, Privacy, Terms,
   Refunds, worksheets (screen only — print is outside @media screen).
   ================================================================ */
:root:not([data-theme="dark"]) body.paper :is(.article-cta-panel, .article-scenario-note, .article-faq-item) {
  background: var(--hp-grain), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .article-cta-btn-primary {
  background-image: var(--hp-btn-grain);
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .article-cta-btn-secondary {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.article-body, .article-coda) { color: var(--hp-ink-2); }
:root:not([data-theme="dark"]) body.paper .article-body :is(h2, h3) { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .article-meta, :root:not([data-theme="dark"]) body.paper .article-byline { color: var(--hp-muted); }

/* About (and the marketing pages that share its components) */
:root:not([data-theme="dark"]) body.paper :is(.value-card, .boundaries, .about-intro-card) {
  background: var(--hp-grain), var(--hp-fibers), linear-gradient(165deg, var(--hp-stock), var(--hp-stock-2));
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.section-eyebrow, .about-intro-eyebrow, .boundaries-eyebrow) {
  color: var(--hp-clay);
  text-shadow: var(--hp-letterpress);
}
:root:not([data-theme="dark"]) body.paper .value-card-mark { box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper :is(.about-hero h1, .section h2, .closing h2, .value-card h3) {
  color: var(--hp-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root:not([data-theme="dark"]) body.paper .why-list li::before { background: var(--hp-clay-fill); }
:root:not([data-theme="dark"]) body.paper .site-footer { border-top-color: var(--hp-rule); }

/* Worksheets: the A4 preview sheet gets fine grain on screen (print is
   outside @media screen, so the printed page stays clean). */
:root:not([data-theme="dark"]) body.paper .sheet:has(.wk-head) {
  background-image: var(--hp-grain), var(--hp-fibers);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(80, 50, 20, 0.1), 6px 24px 44px -20px rgba(80, 50, 20, 0.42);
}
:root:not([data-theme="dark"]) body.paper .dl-btn {
  background: var(--hp-btn-green);
  box-shadow: var(--hp-btn-lift);
}

/* Help / Privacy / Terms / Refunds */
:root:not([data-theme="dark"]) body.paper .privacy-section { border-color: var(--hp-rule); }

/* ================================================================
   Marketing pages: landing.html (/landing), landing-b.html,
   landing-c.html. Cream bands become strips of paper, deep-green bands
   get a light ink grain, cards become stock. The plum growth card
   (.cg-hero) keeps its own treatment, like Home.
   ================================================================ */
:root:not([data-theme="dark"]) body.paper :is(.la2-bridge, .la2-demo-section, .la2-faq, .la2-final, .la2-modes-section) {
  background-color: var(--hp-sheet);
  background-image: var(--hp-grain), var(--hp-fibers), var(--hp-mottle), linear-gradient(180deg, #F6EEE1 0%, #F1E5D2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(120, 88, 52, 0.1);
}
:root:not([data-theme="dark"]) body.paper :is(.la2-pain, .la2-trust, .la2-pain-cell, .cta-card, .demo-card) {
  background-image: var(--hp-grain-light), var(--hp-grain-soft);
}
:root:not([data-theme="dark"]) body.paper :is(.cta-card, .demo-card) { box-shadow: var(--hp-lift-big); }
:root:not([data-theme="dark"]) body.paper :is(.skill-card, .moments-grid > .skill-card.moment-card, .la2-mode-card, .cg-card, .demo-scene, .demo-card-inner, .la2-faq-item) {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.skill-card, .la2-mode-card):hover { box-shadow: var(--hp-lift-hover); }
:root:not([data-theme="dark"]) body.paper .demo-choice {
  background: var(--hp-grain), linear-gradient(170deg, #FCF7EE, #F3E8D7);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .demo-choice.is-picked { background: var(--hp-grain), linear-gradient(165deg, #F7DDCB, #EDC3A7); }
:root:not([data-theme="dark"]) body.paper :is(.la2-hero-tag, .eyebrow-pill, .hero-chip, .situation-pill, .module-pill) {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(80, 50, 20, 0.12);
}
:root:not([data-theme="dark"]) body.paper :is(.btn-light, .btn-outline) {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.hero-cta-primary, .demo-cta-primary, .btn-primary.cta-direct) { box-shadow: var(--hp-btn-lift); }
:root:not([data-theme="dark"]) body.paper .demo-cta-primary { background: var(--hp-btn-green); }
:root:not([data-theme="dark"]) body.paper :is(.skill-icon, .moment-card .moment-icon) { box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper .bubble-other {
  background: var(--hp-grain), linear-gradient(170deg, #FDF9F1, #F5ECDD);
  box-shadow: 0 1px 1px rgba(80, 50, 20, 0.1), 2px 7px 14px -7px rgba(80, 50, 20, 0.3);
}
:root:not([data-theme="dark"]) body.paper .bubble-self { background: var(--hp-btn-green); }
:root:not([data-theme="dark"]) body.paper .coach-note { background: var(--hp-grain), linear-gradient(165deg, #EAF0E6, #DFE8DA); box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper .state-bar-track { box-shadow: var(--hp-press); }
/* landing-b.html: colored bands keep their color, gain paper grain */
:root:not([data-theme="dark"]) body.paper :is(.sec--cream, .sec--sky, .sec--soft) {
  background-image: var(--hp-grain), var(--hp-fibers), var(--hp-mottle);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(120, 88, 52, 0.1);
}
:root:not([data-theme="dark"]) body.paper .sec--cream { background-color: var(--hp-sheet); }
:root:not([data-theme="dark"]) body.paper :is(.creator, .mode-card, .preview-card, .facts, .hero-eyebrow) {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .btn-cta { background: var(--hp-btn-green); box-shadow: var(--hp-btn-lift); }
:root:not([data-theme="dark"]) body.paper .pb-other {
  background: var(--hp-grain), linear-gradient(170deg, #FDF9F1, #F5ECDD);
  box-shadow: 0 1px 1px rgba(80, 50, 20, 0.1), 2px 7px 14px -7px rgba(80, 50, 20, 0.3);
}
:root:not([data-theme="dark"]) body.paper .pb-self { background: var(--hp-btn-green); }
:root:not([data-theme="dark"]) body.paper .preview-coach { background: var(--hp-grain), linear-gradient(165deg, #EAF0E6, #DFE8DA); box-shadow: var(--hp-press); }

/* Email signup (assets/css/email-signup.css) */
:root:not([data-theme="dark"]) body.paper .email-signup { background-image: var(--hp-grain), var(--hp-fibers); box-shadow: var(--hp-lift-big); }
:root:not([data-theme="dark"]) body.paper .email-signup-input { background: #FFFCF6; border-color: var(--hp-edge); box-shadow: var(--hp-press); }
:root:not([data-theme="dark"]) body.paper .email-signup-submit { background: var(--hp-btn-green); box-shadow: var(--hp-btn-lift); }

/* ---------------- Practice Note (tutorial-bubbles.js) ---------------- */
:root:not([data-theme="dark"]) body.paper .stayin-tut {
  background:
    var(--hp-grain) padding-box,
    linear-gradient(170deg, rgba(252, 247, 238, 0.96), rgba(244, 234, 219, 0.96)) padding-box,
    linear-gradient(135deg, rgba(169, 87, 58, 0.42), rgba(120, 88, 52, 0.22) 50%, rgba(63, 110, 76, 0.38)) border-box;
  color: var(--hp-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 1px rgba(80, 50, 20, 0.08),
    3px 12px 24px -10px rgba(80, 50, 20, 0.32),
    6px 26px 40px -26px rgba(80, 50, 20, 0.36);
  animation: stayinTutIn 1.8s cubic-bezier(.22, .96, .36, 1) both;
}
:root:not([data-theme="dark"]) body.paper .stayin-tut-eyebrow { color: var(--hp-clay); }
:root:not([data-theme="dark"]) body.paper .stayin-tut-text { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .stayin-tut-arrow { color: var(--hp-clay-fill); }
:root:not([data-theme="dark"]) body.paper .stayin-tut-close { background: var(--hp-btn-grain), var(--accent-b, #D97F5C); }
:root:not([data-theme="dark"]) body.paper .stayin-tut-close:hover { background: var(--hp-btn-grain), var(--accent, #E89B7B); }

/* ---------------- Sign-in card (scenario-mobile-fix.js, inline-styled) ---------------- */
:root:not([data-theme="dark"]) body.paper [data-stayin-auth-card] {
  background: var(--hp-grain), var(--hp-fibers), linear-gradient(170deg, #FBF6EC, #F3E8D7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(60, 35, 15, 0.12), 4px 22px 50px -12px rgba(60, 35, 15, 0.45) !important;
}
:root:not([data-theme="dark"]) body.paper [data-stayin-auth-card] > div:first-child { color: var(--hp-ink) !important; }
:root:not([data-theme="dark"]) body.paper .sac-input {
  background: #FFFCF6;
  border-color: var(--hp-edge);
  box-shadow: var(--hp-press);
}
:root:not([data-theme="dark"]) body.paper .sac-input:focus { border-color: var(--hp-sage); box-shadow: var(--hp-press), 0 0 0 3px rgba(63, 110, 76, 0.14); }
:root:not([data-theme="dark"]) body.paper .sac-email-btn {
  background: var(--hp-btn-green);
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .sac-label { color: var(--hp-ink-2); }

/* ---------------- Feedback sheet (feedback-widget.js) ---------------- */
:root:not([data-theme="dark"]) body.paper .fb-sheet {
  background: var(--hp-grain), var(--hp-fibers), linear-gradient(170deg, #FBF6EC, #F3E8D7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 -2px 6px rgba(60, 35, 15, 0.08), 4px 22px 50px -12px rgba(60, 35, 15, 0.42);
}
:root:not([data-theme="dark"]) body.paper .fb-sheet textarea, :root:not([data-theme="dark"]) body.paper .fb-sheet input[type="text"], :root:not([data-theme="dark"]) body.paper .fb-sheet input:not([type]) {
  background: #FFFCF6 !important;
  box-shadow: var(--hp-press);
}

/* Inline-styled buttons in the feedback sheet and sign-in card (matched
   on the browser-serialized style attribute, e.g. "background: rgb(…)"): only
   grain + lift are layered on, so their own (inline) colors and
   selected states stay in charge. */
:root:not([data-theme="dark"]) body.paper .fb-sheet button[style*="background: rgb(61, 148, 103)"] {
  background-image: var(--hp-btn-grain) !important;
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .fb-sheet button[data-type] {
  background-image: var(--hp-grain) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(80, 50, 20, 0.14);
}
:root:not([data-theme="dark"]) body.paper [data-stayin-auth-card] button[style*="background: rgb(255, 255, 255)"] {
  background-image: var(--hp-grain), linear-gradient(170deg, #FFFDF8, #F7EFE2) !important;
  box-shadow: var(--hp-lift);
}

/* Save-progress sheet (save-progress-card.js) — inline-styled controls
   get grain + lift; their own colors stay in charge. */
:root:not([data-theme="dark"]) body.paper .sp-sheet {
  background: var(--hp-grain), var(--hp-fibers), linear-gradient(170deg, #FBF6EC, #F3E8D7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 -2px 6px rgba(60, 35, 15, 0.08), 4px 22px 50px -12px rgba(60, 35, 15, 0.42);
}
:root:not([data-theme="dark"]) body.paper .sp-sheet button[style*="background: rgb(255, 255, 255)"] {
  background-image: var(--hp-grain), linear-gradient(170deg, #FFFDF8, #F7EFE2) !important;
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper :is(.sp-sheet button[data-sp-email], .sp-sheet .sp-alt, .sp-pill) {
  background: var(--hp-card-bg) !important;
  border-color: var(--hp-edge) !important;
  box-shadow: var(--hp-lift);
}

/* ---------------- Billing UI (billing-ui.js) ---------------- */
:root:not([data-theme="dark"]) body.paper .sb-panel, :root:not([data-theme="dark"]) body.paper .sb-pack {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
:root:not([data-theme="dark"]) body.paper .sb-sheet {
  background: var(--hp-grain), var(--hp-fibers), linear-gradient(170deg, #FBF6EC, #F3E8D7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(60, 35, 15, 0.12), 4px 22px 50px -12px rgba(60, 35, 15, 0.45);
}
:root:not([data-theme="dark"]) body.paper .sb-sheet h2, :root:not([data-theme="dark"]) body.paper .sb-title { color: var(--hp-ink); }
:root:not([data-theme="dark"]) body.paper .sb-btn:not(.sb-ghost) {
  background: var(--hp-btn-clay);
  box-shadow: var(--hp-btn-lift);
}
:root:not([data-theme="dark"]) body.paper .sb-btn.sb-ghost {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}

} /* @media screen */