/* ============================================================
   home-paper.css — Home only (index.html), light theme only.
   Handmade-paper / editorial visual language, derived from the
   StayIn handmade-paper mockups: a deckled paper sheet resting on a
   sunlit sand desk, soft window-light bands, raised card stock,
   serif ink headings, terracotta letterspaced labels, pill buttons.

   SCOPING: every rule is under `[data-theme="light"] body.home-paper`
   (the class is set on index.html's <body> only), so no other page can
   match, and the extra specificity beats the shared sheets
   (global.css, theme-botanical.css, app-nav.css, progress-dashboard.css,
   scenario-selector.css) without editing them. Dark theme is untouched.

   Only surfaces, colors, borders, radii, shadows, typography and
   decorative pseudo-elements change — no width/height/padding/margin/
   display/position of existing boxes, so nothing reflows. All texture
   is inline SVG (no image assets).
   ============================================================ */

[data-theme="light"] body.home-paper {
  /* ---- Palette (new names only, nothing shared picks them up) ---- */
  --hp-desk:       #E6D3BB;  /* sunlit sand surface under the sheet */
  --hp-sheet:      #F4EADB;  /* the big handmade sheet */
  --hp-stock:      #FAF4E9;  /* card stock, top */
  --hp-stock-2:    #F2E6D4;  /* card stock, lower edge */
  --hp-ink:        #1F4430;  /* deep botanical green — 9.2:1 on sheet */
  --hp-ink-2:      #34543F;
  --hp-muted:      #56675A;  /* 5.1:1 on sheet */
  --hp-clay:       #9A4C2E;  /* terracotta text — 5.1:1 on sheet */
  --hp-clay-fill:  #A9573A;  /* terracotta fills — 5.1:1 with white */
  --hp-sage:       #3F6E4C;  /* green fills / spines */
  --hp-edge:       rgba(120, 88, 52, 0.17);
  --hp-rule:       rgba(120, 88, 52, 0.16);

  /* ---- Textures ---- */
  --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");
  /* Window light: a bright sun patch, then soft diagonal mullion shadows. */
  --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%);
  /* Deckled edge strips (mask tiles): a rough black band, transparent outside. */
  --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");
  /* Subtle button grain: faint dark flecks + faint light flecks, so it
     reads on both pale and dark (green / terracotta) button fills. */
  --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);
  /* Hand-drawn underline stroke. */
  --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");

  /* ---- Surfaces ---- */
  --hp-card-bg:
    var(--hp-grain),
    linear-gradient(165deg, var(--hp-stock) 0%, var(--hp-stock-2) 100%);
  /* Raised card stock: top highlight, warm directional shadow
     (light from the upper left, as in the mockups). */
  --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-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);

  /* The desk */
  background-color: var(--hp-desk);
  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%);
  color: var(--hp-ink);
}
[data-theme="light"]:has(> body.home-paper) { background-color: #E6D3BB; }

/* ============================================================
   The sheet — a deckled handmade page behind all Home
   content. .page is already position:relative + overflow:hidden and
   its children sit at z-index 1 (theme-botanical.css), so two
   absolutely-positioned pseudo-elements at z-index 0 add the paper
   without touching layout. ::before (the shared butter glow) is
   repurposed as the sheet's shadow; ::after is the paper itself.
   ============================================================ */
[data-theme="light"] body.home-paper .page::before {
  top: 10px; right: 8px; bottom: 34px; left: 8px;
  width: auto; height: auto;
  background: none;
  opacity: 1;
  border-radius: 6px;
  box-shadow:
    0 2px 3px rgba(80, 50, 20, 0.12),
    4px 18px 34px -14px rgba(80, 50, 20, 0.38),
    10px 40px 60px -40px rgba(80, 50, 20, 0.4);
}
[data-theme="light"] body.home-paper .page::after {
  content: "";
  position: absolute;
  top: 6px; right: 4px; bottom: 30px; left: 4px;
  z-index: 0;
  pointer-events: none;
  background-color: var(--hp-sheet);
  background-image:
    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%);
  -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;
}

/* Shared focus ring for every control restyled below. */
[data-theme="light"] body.home-paper .theme-toggle button:focus-visible,
[data-theme="light"] body.home-paper .topbar-btn:focus-visible,
[data-theme="light"] body.home-paper .reshuffle-btn:focus-visible,
[data-theme="light"] body.home-paper main .btn:focus-visible,
[data-theme="light"] body.home-paper .coaching-id-signin:focus-visible,
[data-theme="light"] body.home-paper .text-link-btn:focus-visible,
[data-theme="light"] body.home-paper .app-nav-item:focus-visible,
[data-theme="light"] body.home-paper .app-nav-burger:focus-visible {
  outline: 2px solid var(--hp-clay-fill);
  outline-offset: 3px;
}

/* ---------- Brand ---------- */
[data-theme="light"] body.home-paper .brand-name {
  color: var(--hp-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 -1px 0 rgba(31, 68, 48, 0.16);
}
[data-theme="light"] body.home-paper .brand-tagline { color: var(--hp-muted); }
[data-theme="light"] body.home-paper .brand-tagline em { color: var(--hp-clay); }

/* ---------- Topbar ---------- */
[data-theme="light"] body.home-paper .topbar {
  border-bottom-color: var(--hp-rule);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
[data-theme="light"] body.home-paper .topbar-title {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: 0.12em;
  color: var(--hp-ink);
  text-shadow: var(--hp-letterpress);
}
[data-theme="light"] body.home-paper .theme-toggle {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper .theme-toggle button { color: var(--hp-ink); }
[data-theme="light"] body.home-paper .theme-toggle button:not(.active):hover { color: var(--hp-clay); }
[data-theme="light"] body.home-paper .theme-toggle button.active {
  background: var(--hp-btn-grain), linear-gradient(180deg, #B6633F 0%, var(--hp-clay-fill) 100%);
  color: #FFF8EE;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(80, 40, 15, 0.3);
}
[data-theme="light"] body.home-paper .feedback-topbar-btn {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper .feedback-topbar-btn:hover {
  border-color: rgba(169, 87, 58, 0.4);
  box-shadow: var(--hp-lift-hover);
}

/* ---------- App nav: raised paper tiles, peach "selected" tile ---------- */
[data-theme="light"] body.home-paper .app-nav-item {
  color: var(--hp-ink-2);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper .app-nav-item:hover {
  color: var(--hp-ink);
  box-shadow: var(--hp-lift-hover);
}
[data-theme="light"] body.home-paper .app-nav-ico {
  background: linear-gradient(180deg, #EFE3D0, #F6EDE0);
  box-shadow: var(--hp-press);
}
[data-theme="light"] body.home-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);
}
[data-theme="light"] body.home-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);
}
[data-theme="light"] body.home-paper .app-nav-item.is-active::after { background: var(--hp-clay-fill); }
[data-theme="light"] body.home-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);
}

[data-theme="light"] body.home-paper .app-nav-burger {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper .app-nav-wordmark {
  color: var(--hp-ink);
  text-shadow: var(--hp-letterpress);
}
[data-theme="light"] body.home-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);
}

/* ---------- Welcome / guest hero ---------- */
[data-theme="light"] body.home-paper .welcome-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hp-clay);
  text-shadow: var(--hp-letterpress);
}
[data-theme="light"] body.home-paper .hero h1.welcome-headline {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  color: var(--hp-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Short hand-drawn green stroke instead of the flat coral rule. */
[data-theme="light"] body.home-paper .hero h1::after {
  width: 96px;
  max-width: 40%;
  height: 7px;
  bottom: -2px;
  background: var(--hp-stroke-green) center / 100% 100% no-repeat;
}
[data-theme="light"] body.home-paper .welcome-sub { color: var(--hp-ink-2); }
[data-theme="light"] body.home-paper .guest-reassurance { color: var(--hp-muted); }

[data-theme="light"] body.home-paper main .btn-primary {
  color: #FFF8EE;
  background: var(--hp-btn-grain), linear-gradient(180deg, #2C5A3E 0%, var(--hp-ink) 100%);
  border-color: #193A28;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 1px rgba(20, 40, 25, 0.25),
    3px 10px 18px -8px rgba(20, 50, 30, 0.55);
}
[data-theme="light"] body.home-paper main .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(20, 40, 25, 0.25),
    4px 14px 24px -10px rgba(20, 50, 30, 0.6);
}
[data-theme="light"] body.home-paper main .btn-ghost {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper main .btn-ghost:hover {
  border-color: rgba(169, 87, 58, 0.42);
  box-shadow: var(--hp-lift-hover);
}

/* "What we're noticing" intentionally keeps its original deep plum
   treatment (progress-dashboard.css) — no override here. */

/* ---------- Stats ---------- */
[data-theme="light"] body.home-paper .stat-tile {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper .stat-num {
  font-family: "Playfair Display", Georgia, serif;
  font-variant-numeric: lining-nums;
  color: var(--hp-ink);
  text-shadow: var(--hp-letterpress);
}
[data-theme="light"] body.home-paper .stat-label { color: var(--hp-muted); }

/* ---------- Sign-in nudge ---------- */
[data-theme="light"] body.home-paper .home-signin-nudge {
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper .home-signin-nudge .home-signin-text { color: var(--hp-ink-2); }
[data-theme="light"] body.home-paper .coaching-id-signin { color: var(--hp-clay); }
[data-theme="light"] body.home-paper .coaching-id-signin:hover { color: var(--hp-ink); }

/* ---------- Section labels: letterspaced terracotta ---------- */
[data-theme="light"] body.home-paper .progress-section-title,
[data-theme="light"] body.home-paper .section-title {
  color: var(--hp-clay);
  letter-spacing: 0.16em;
  text-shadow: var(--hp-letterpress);
}

/* ---------- Where you're growing ---------- */
[data-theme="light"] body.home-paper .growth-title { color: var(--hp-ink); }
[data-theme="light"] body.home-paper .growth-phrase { color: var(--hp-muted); }
[data-theme="light"] body.home-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);
}
/* Thick-feeling pressed groove with an inked fill. */
[data-theme="light"] body.home-paper .growth-wash {
  background: color-mix(in srgb, var(--theme-color, var(--hp-clay-fill)) 10%, #E9DCC8);
  box-shadow: var(--hp-press);
}
[data-theme="light"] body.home-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);
}

/* ---------- Recent practice: ruled-notebook rows ---------- */
[data-theme="light"] body.home-paper .history-item {
  border-bottom-color: var(--hp-rule);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] body.home-paper .history-item:last-child { box-shadow: none; }
[data-theme="light"] body.home-paper .history-title { color: var(--hp-ink); }
[data-theme="light"] body.home-paper .history-meta { color: var(--hp-muted); }
[data-theme="light"] body.home-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);
}
[data-theme="light"] body.home-paper .progress-empty { color: var(--hp-muted); }

/* ---------- More ways to practice ---------- */
[data-theme="light"] body.home-paper .reshuffle-btn {
  color: var(--hp-ink);
  background: var(--hp-card-bg);
  border-color: var(--hp-edge);
  box-shadow: var(--hp-lift);
}
[data-theme="light"] body.home-paper .reshuffle-btn:hover {
  color: var(--hp-clay);
  border-color: rgba(169, 87, 58, 0.42);
  box-shadow: var(--hp-lift-hover);
}

/* Scenario cards (shared .ss-* component) — re-pointed tokens and
   surfaces inside Home's list only; practice.html is unaffected. */
[data-theme="light"] body.home-paper #suggestedList {
  --ss-text:        #1F4430;
  --ss-text-muted:  #56675A;
  --ss-card-bg:     #F8F0E3;
  --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);
}
[data-theme="light"] body.home-paper #suggestedList .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));
}
/* Illustration printed onto the stock: paper grain multiplied over the
   image plus a faint inner edge, so it reads as ink on paper. */
[data-theme="light"] body.home-paper #suggestedList .ss-scenario-media { position: relative; }
[data-theme="light"] body.home-paper #suggestedList .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);
}
[data-theme="light"] body.home-paper #suggestedList .ss-side {
  background-image: var(--hp-grain);
}
[data-theme="light"] body.home-paper #suggestedList .ss-side-btn {
  border-radius: 999px;
  border-color: rgba(40, 20, 8, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 1px rgba(60, 30, 10, 0.2),
    2px 7px 14px -6px rgba(60, 30, 10, 0.45);
}
[data-theme="light"] body.home-paper #suggestedList .ss-side-guided .ss-side-btn {
  background: var(--hp-btn-grain), linear-gradient(180deg, #B6633F 0%, var(--hp-clay-fill) 100%);
}
[data-theme="light"] body.home-paper #suggestedList .ss-side-live .ss-side-btn {
  background: var(--hp-btn-grain), linear-gradient(180deg, #4A7C59 0%, var(--hp-sage) 100%);
}
[data-theme="light"] body.home-paper #suggestedList .ss-side-title { text-shadow: var(--hp-letterpress); }
[data-theme="light"] body.home-paper #suggestedList .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);
}

/* ---------- Practice Note (tutorial-bubbles.js) ----------
   Replaces the rotating rainbow ring with a restrained clay→sage edge
   on paper. Same 3px border width and radius, so nothing moves; the
   bubble's own fade-in stays. The spin keyframe only rotates the
   (now unused) rainbow angle, so it's switched off here. */
[data-theme="light"] body.home-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;
}
[data-theme="light"] body.home-paper .stayin-tut-eyebrow { color: var(--hp-clay); }
[data-theme="light"] body.home-paper .stayin-tut-text { color: var(--hp-ink); }
[data-theme="light"] body.home-paper .stayin-tut-arrow { color: var(--hp-clay-fill); }
[data-theme="light"] body.home-paper .stayin-tut-close {
  background: var(--hp-btn-grain), var(--accent-b, #D97F5C);
}
[data-theme="light"] body.home-paper .stayin-tut-close:hover {
  background: var(--hp-btn-grain), var(--accent, #E89B7B);
}