/* ==========================================================================
   Luwy app layer (2026-10-05)
   Makes Luwy feel like an app, not a website. Loads LAST, so it overrides the
   older layers without deleting them. Tokens come from lwy.css, so dark mode
   keeps working.

   Rules:
   - One recommended action per screen, then rows. Boxes only for a real object.
   - Bottom tab bar with five tabs: Home, Simulate, Practice, Progress, Me.
   - Hairline rows, 44px+ touch targets, quiet header.
   ========================================================================== */

:root { --app-row-ico: color-mix(in srgb, var(--sprinkle) 70%, var(--paper)); --hair: color-mix(in srgb, var(--line) 38%, transparent); }
html[data-theme="dark"] { --app-row-ico: color-mix(in srgb, var(--cocoa) 22%, var(--paper)); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 860px) {

  /* header: wordmark, friends, plan. Theme lives in Me, help lives in Me. */
  .topbar { border-bottom: 0; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; height: calc(56px + env(safe-area-inset-top, 0px)); }
  .topbar .brand { font-size: 26px; }
  #themeToggle, .topbar-tools a.iconbtn[href="/faq.html"] { display: none !important; }
  .topbar-tools .pill { background: var(--app-row-ico); }

  /* bottom tab bar */
  .tabbar {
    grid-template-columns: repeat(5, 1fr);
    background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-top: 1px solid var(--hair); padding: 8px 4px calc(10px + var(--safe-b));
  }
  .tabbar button { position: relative; gap: 4px; padding: 0; min-height: 52px; color: var(--muted); font: 600 11px/1.1 var(--sans); letter-spacing: 0; }
  .tabbar button svg { width: 22px; height: 22px; padding: 4px 17px; box-sizing: content-box; border-radius: 15px; transition: background .18s ease; }
  .tabbar button.active { color: var(--cocoa); }
  .tabbar button.active svg { background: var(--sprinkle); stroke-width: 2; }
  html[data-theme="dark"] .tabbar button.active svg { background: color-mix(in srgb, var(--cocoa) 24%, var(--paper)); }
  .tabbar button.active::before { content: none; }

  /* page frame */
  .page { padding: 6px var(--gutter) calc(110px + var(--safe-b)); }
  .page-head { margin-bottom: 18px; }
  .page-head .eyebrow { display: none; }
  .page-head h1, .page > h1 { font-size: 28px; line-height: 1.15; margin: 4px 0 8px; }
  .page-head .lead, .lead { font-size: 15px; line-height: 1.5; }
  .section { margin-top: 26px; }
  .section-head h2, .section > h2 { font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

  /* buttons: one solid shape, 16px radius, easy to hit */
  .btn.primary, .btn-primary { border-radius: 16px; min-height: 52px; font-size: 16px; box-shadow: none; }
  .btn.primary:hover { transform: none; }
  .btn.lg { min-height: 54px; }

  /* inputs */
  .field, .select, input[type=text], input[type=email], input[type=password], input[type=number], textarea {
    border: 1.5px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 14px; background: var(--white); min-height: 52px;
  }

  /* lists are rows, not boxes */
  .item { padding: 14px 0; border-bottom: 1px solid var(--hair); border-radius: 0; min-height: 60px; }
  button.item:hover, a.item:hover { padding-left: 0; padding-right: 0; background: transparent; }
  .item .t b { font-size: 16px; }
  .item .go { color: var(--muted); }

  /* tabs inside a page (Practice, Social): quiet underline */
  .tabs { border-bottom: 1px solid var(--hair); }
  .tab { padding: 14px 12px; font-size: 14px; }

  /* ---------------------------------------------------------- Home */
  .page.page-home { padding-top: 6px; }
  .home-hero { display: flex; flex-direction: column; gap: 18px; }
  .home-hero .home-next { order: -1; }
  .home-next {
    width: 100%; max-width: none; min-width: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 22px 20px 20px;
    border-radius: 24px; box-shadow: none; position: relative;
  }
  .home-next:hover, .home-next:active { transform: none; box-shadow: none; }
  .home-next .nx-ico { display: none; }
  .home-next .nx-t { gap: 8px; }
  .home-next .nx-k { font: 700 12px/1 var(--sans); letter-spacing: .08em; opacity: .85; }
  .home-next .nx-b { font: 500 26px/1.15 var(--serif); white-space: normal; overflow: visible; text-overflow: clip; }
  .home-next .nx-s { font-size: 14px; line-height: 1.4; opacity: .88; white-space: normal; overflow: visible; }
  .home-next .nx-go {
    margin-top: 18px; display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 16px;
    background: var(--mug); color: var(--cocoa-deep); font: 600 17px/1 var(--sans);
  }
  .home-next .nx-go::after { content: "Start"; }
  .home-next .nx-go { font-size: 0; }
  .home-next .nx-go::after { font-size: 17px; }
  html[data-theme="dark"] .home-next .nx-go { color: #2A1D14; }

  .hh-main { padding: 0; border: 0; background: transparent; border-radius: 0; gap: 8px; box-shadow: none; }
  .hh-main:hover { transform: none; box-shadow: none; }
  .hh-main .eyebrow { display: block; font-size: 12px; letter-spacing: .08em; opacity: 1; color: var(--muted); }
  .hh-title { font: 500 22px/1.2 var(--serif); }
  .hh-level b { font-size: 15px; }
  .hh-stats { grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .hh-stat { background: transparent; border-radius: 0; padding: 12px 4px; text-align: left; }
  .hh-stat b { font-size: 20px; }
  .hh-go { color: var(--muted); font-weight: 600; line-height: 1.45; display: block; }
  .home-hero { margin-bottom: 4px; }
  .home-week { margin-top: 10px; }
  .home-xp .xp, .xp { height: 6px; border-radius: 3px; }

  .home-week { display: flex; justify-content: space-between; padding: 2px 4px 0; }
  .home-week .hw { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); color: var(--muted); }
  .home-week .hw i { width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--line) 70%, transparent); display: grid; place-items: center; }
  .home-week .hw.done i { background: var(--cocoa); border-color: var(--cocoa); color: var(--paper); }
  .home-week .hw.done i::after { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
  .home-week .hw.today { color: var(--cocoa); }
  .home-week .hw.today:not(.done) i { border: 2px solid var(--mug); }
  html[data-theme="dark"] .home-week .hw.done i { color: #2A1D14; }

  .home-grid { display: block; margin-top: 20px; border: 0; border-radius: 0; background: transparent; overflow: visible; padding: 0; }
  .home-grid::before { content: "Keep going"; display: block; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .tile {
    width: 100%; display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0;
    border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
  }
  .tile:hover, .tile:active { transform: none; box-shadow: none; border-color: var(--hair); background: transparent; }
  .tile .ti-ico { width: 44px; height: 44px; margin: 0; border-radius: 14px; background: var(--app-row-ico); flex: none; }
  .tile:hover .ti-ico { transform: none; background: var(--app-row-ico); }
  .tile .ti-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .tile b { font: 600 16px/1.25 var(--sans); }
  .tile small { font-size: 14px; line-height: 1.35; }
  .tile .ti-chip { position: static; order: 3; margin-left: auto; background: transparent; padding: 0; color: var(--muted); font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; box-shadow: none; }
  .tile .ti-chip.hot { background: var(--sprinkle); color: var(--cocoa-deep); padding: 5px 10px; border-radius: 12px; }
  .home-grid .tile { padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .home-grid .tile:last-child { border-bottom: 0; }
  .home-grid .tile::after, .tile::after { content: "\203A"; flex: none; order: 4; margin-left: 4px; width: auto; height: auto; border: 0; transform: none; font: 400 24px/1 var(--sans); color: var(--muted); }
  .tile.is-next { border-color: var(--hair); }

  /* ------------------------------------------------------ Practice */
  .practice-hub { display: block; margin-top: 4px; }
  .practice-card {
    width: 100%; min-height: 64px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 12px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 1px; align-items: center; padding: 12px 0; text-align: left;
    border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none;
  }
  .practice-card:hover { transform: none; box-shadow: none; border-color: var(--hair); }
  .practice-card .pc-icon { grid-row: 1 / span 2; grid-column: 1; width: 44px; height: 44px; margin: 0; flex: none; background: var(--app-row-ico); border-radius: 14px; }
  .practice-card b { grid-column: 2; grid-row: 1; align-self: end; font: 600 16px/1.25 var(--sans); }
  .practice-card small { grid-column: 2; grid-row: 2; align-self: start; max-width: none; margin-top: 0; font-size: 14px; }
  .practice-card::after { content: "\203A" !important; display: block !important; grid-column: 3; grid-row: 1 / span 2; font: 400 24px/1 var(--sans); color: var(--muted); }

  /* ------------------------------------------------------ Simulate */
  .sim-actions { gap: 4px 14px; margin: 14px 0 0; }
  .sim-actions .btn.primary { flex: 1 1 100%; }
  .sim-actions .btn.quiet { background-image: none; padding: 0 6px; }
  .sc-grid { display: block; }
  .sc-grid .item.sc, .item.sc {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 64px; padding: 14px 0; gap: 12px;
    border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; box-shadow: none;
  }
  .item.sc:hover { background: transparent; padding-left: 0; padding-right: 0; transform: none; box-shadow: none; }
  .item.sc .go { font-size: 0; }
  .item.sc .go::after { content: "\203A"; font: 400 24px/1 var(--sans); color: var(--muted); }
  #scRec h2, #scDue h2, #scHabit h2, .sc-cat, #scRec h3, #scDue h3 { font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 4px; }
  .sc-sub { margin: 0 0 4px; font-size: 13px; }
  .scene-card { border: 0; background: transparent; padding: 0; border-radius: 0; }

  /* ----------------------------------------------- Settings, plans */
  .st-group { margin-top: 24px; }
  .st-group > h2 { font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .st-card { border: 0; background: transparent; padding: 0; border-radius: 0; }
  .st-row { padding: 14px 0; }

  /* segmented controls become pill chips */
  .seg button { min-height: 44px; }
  .toast { border-radius: 14px; }
}

/* --------------------------------------------- app screens, any width */
.btn.primary, .btn-primary { background-image: none; }

@media (max-width: 860px) {
  .sc-grid .item.sc .go { font-size: 0; }
  .sc-grid .item.sc .go::after { content: "\203A"; font: 400 24px/1 var(--sans); color: var(--muted); }
  /* Progress: evidence as rows, not boxes */
  .xp-hero { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 4px 0 18px; border-bottom: 1px solid var(--hair); }
  .xp-hero .eyebrow { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .xp-number { font-size: 44px; line-height: 1.05; margin: 4px 0 8px; }
  .xp-target { font-size: 14px; color: var(--muted); }
  .xp { height: 6px; border-radius: 3px; }
  .stats { gap: 0; border: 0; }
  .stat { border: 0; border-bottom: 1px solid var(--hair); background: none; padding: 14px 0; }
  .stat b { font-size: 26px; }
  .skill-row { border: 0; border-bottom: 1px solid var(--hair); background: none; box-shadow: none; border-radius: 0; padding: 14px 0; }
  .insight, .bench-top { background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
}

@media (max-width: 860px) {
  body:has(.lwy-back.floating) .setup-top { padding-top: 54px; }
  .lwy-back { background: transparent; border-color: transparent; box-shadow: none; min-width: 44px; min-height: 44px; justify-content: center; }
  .lwy-back.floating { box-shadow: none; }
}


/* ---- Review / outcome / Prove it: rows, not boxes ---- */
@media (max-width: 860px) {
  .outcome-card, .moment, .cmp, .cmp-col, .result, .score-hero, .insight, .section.bench, .timeline, .writing, .better, .room-check {
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .outcome-card { padding: 4px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
  .insight, .tl-row, .m-row, .bench-list > * { border-bottom: 1px solid var(--hair); padding: 14px 0; }
  .insight { padding-left: 0; padding-right: 0; }
  .insight.next-step { background: var(--paper-2); border: 0; border-radius: 16px; padding: 16px; }
  .score-hero { padding: 6px 0 16px; }
  .score-hero b, .bench-num b { font-family: var(--serif); }
  .section-head { margin-top: 22px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .result-actions { display: grid; gap: 8px; position: static; background: none; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--hair); }
  .result-actions .btn.quiet { min-height: 46px; background: transparent; border: 1.5px solid var(--hair); color: var(--ink); }
  .result-actions .btn { width: 100%; }
  .better { border-left: 3px solid #E19C4E; padding-left: 12px; border-radius: 0; }
  .bbar { height: 6px; border-radius: 3px; }
  .hook { border-left-color: #E19C4E; }
  .role-card { background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding: 12px 0; }
  .role-card.you, .role-card.them { border-left: 0; }
}
@media (max-width: 860px) {
}

/* ---- Marketing pages: rows instead of boxed cards ---- */
@media (max-width: 860px) {
  .map-wrap { border: 0; background: none; box-shadow: none; border-radius: 0; }
  .map tr, .map tbody tr { background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding: 16px 0; margin: 0; }
  .map td, .map th { border: 0; }
  .evc { background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
  .band .col-item, .quote-row { background: none; border-radius: 0; box-shadow: none; }
  .band.dark { border-radius: 0; }
  .proof .pill, .band .chip { background: var(--paper-3); color: var(--ink); border: 0; }
  .hero { padding-top: 8px; }
  details.ev-drop { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; }
}

/* ---- Drills and quiz: rows ---- */
@media (max-width: 860px) {
  .drill-grid { display: block; }
  .drill-card { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding: 14px 0; min-height: 56px; }
  .drill-card.rec { background: var(--paper-2); border-radius: 16px; border: 0; padding: 14px 16px; margin: 6px 0; }
  .drill-card b { font: 600 17px/1.3 var(--sans); }
  .drill-rule, .drill-meta, .drill-ruleline { font-size: 14px; color: var(--muted); }
  .drill-scene { background: none; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; }
  .topic.pr-topic, .topic { background: none; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
}
@media (max-width: 860px) {
  .drill-card > * { display: block; }
  .drill-card .drill-rule { display: inline-block; margin-top: 4px; }
  .seg { background: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .seg button { border: 1.5px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 999px; padding: 0 16px; background: transparent; color: var(--ink); min-height: 44px; }
  .seg button.on, .seg button[aria-pressed="true"], .seg button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
@media (max-width: 860px) {
  .pr-field, .pr-quick, .pr-ai, .pr-coach, .pr-pron-score, html[data-theme="dark"] .pr-field { background: none; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
}

/* ---- Laptop (>860px): same language, wider canvas ---- */
@media (min-width: 861px) {
  .home-week { display: flex; gap: 14px; margin: 14px 0 6px; padding: 0 2px; }
  .home-week .hw { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); color: var(--muted); }
  .home-week .hw i { width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--line) 70%, transparent); display: grid; place-items: center; }
  .home-week .hw.done i { background: var(--cocoa); border-color: var(--cocoa); color: var(--paper); }
  .home-week .hw.done i::after { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
  .home-week .hw.today { color: var(--cocoa); }
  .home-week .hw.today:not(.done) i { border: 2px solid var(--mug); }
}
@media (max-width: 560px) {
  details.ev-drop > summary { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  details.ev-drop > summary small { display: block; }
}

/* ---- Forms: one label style everywhere ---- */
.lbl, .k.lbl, label.lbl { display: grid; gap: 6px; font: 600 14px/1.3 var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; }
.k.lbl { display: block; margin-bottom: 6px; opacity: 1; }
.lbl .field, label.lbl textarea { font-weight: 400; }
textarea.field { min-height: 96px; resize: vertical; }
@media (max-width: 860px) { textarea.field { min-height: 88px; } }
@media (max-width: 860px) { #mSit, #eSit { min-height: 124px; } }

/* ---- Logo mark beside the wordmark ---- */
.brand { display: inline-flex; align-items: center; white-space: nowrap; }
.brand::before { content: ""; flex: none; margin-right: 8px; width: 30px; height: 30px; background: url(/icons/icon-64.png) center / cover no-repeat; border-radius: 22.5%; }
.sidebar .brand::before, .brand.big::before { width: 34px; height: 34px; }
@media (min-width: 861px) { .site-nav a { white-space: nowrap; } .site-nav .wrap { gap: 18px; } }
@media (min-width: 861px) and (max-width: 1140px) {
  #navLinks { gap: 14px; }
  #navLinks a[href$="#proof"], #navLinks a[href="/evidence.html"] { display: none; }
  .site-nav .actions { gap: 8px; }
}

/* ======================================================================
   Dark theme, on brand: "Cocoa Night".
   Deep Cocoa Powder as the ground, Sprinkles for text, Favourite Mug for
   action and progress, Cosy Blanket sage for success. No charcoal or black.
   ====================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #2B1A12; --paper-2: #3A241A; --paper-3: #4B3022;
  --white: #351F16; --cream: #3A241A;
  --line: #5C3F30; --hair: color-mix(in srgb, #7A5744 55%, transparent);
  --ink: #FCE9D0; --muted: #D6BC9F; --faint: #C2A58A;
  --cocoa: #E19C4E; --cocoa-hover: #EDB26E; --cocoa-deep: #241510;
  --mug: #E19C4E; --sprinkle: #FCD8A2; --caramel: #E19C4E;
  --good: #A9AE8E; --alert: #F2A98C; --teal: #A9AE8E;
  --accent-ink: #2B1A12;
  --app-row-ico: color-mix(in srgb, #E19C4E 20%, #2B1A12);
}
html[data-theme="dark"] body { background: var(--paper); }
html[data-theme="dark"] .topbar, html[data-theme="dark"] .tabbar { background: rgba(43, 26, 18, .96); }
html[data-theme="dark"] .side { background: #241510; }
/* The "Next up" card stays Cocoa Powder with a Mug button, like light mode. */
html[data-theme="dark"] .home-next { background: #613627; color: #FCE9D0; box-shadow: none; }
html[data-theme="dark"] .home-next .nx-ico { background: rgba(252, 216, 162, .18); }
@media (max-width: 860px) { html[data-theme="dark"] .home-next .nx-go { background: #E19C4E; color: #2B1A12; } }
@media (min-width: 861px) { html[data-theme="dark"] .home-next .nx-go { background: none; color: #FCD8A2; } }
html[data-theme="dark"] .home-next .eyebrow, html[data-theme="dark"] .home-next small { color: #FCD8A2; }
html[data-theme="dark"] .item, html[data-theme="dark"] .tile, html[data-theme="dark"] .practice-card { background: transparent; }
html[data-theme="dark"] .item.sc:hover { background: transparent; }
html[data-theme="dark"] .tabbar button.active svg { background: #E19C4E; color: #2B1A12; }
html[data-theme="dark"] .pill, html[data-theme="dark"] .topbar .plan-pill { background: #4B3022; color: #FCD8A2; }
html[data-theme="dark"] .btn.primary { color: #2B1A12; }
html[data-theme="dark"] .field, html[data-theme="dark"] select.field, html[data-theme="dark"] textarea.field { background: #351F16; border-color: #5C3F30; color: #FCE9D0; }

/* ===== App shell v2: native-feel layer ===== */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
.tabbar, .topbar, .tile, .btn, button, .iconbtn, .item { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button, .btn, .item, .tile, .home-next, .hh-main { transition: transform .12s ease, background-color .18s ease, opacity .18s ease; touch-action: manipulation; }
button:active:not(:disabled), .btn:active, .item:active, .tile:active, .home-next:active, .hh-main:active { transform: scale(.97); }
@keyframes lwy-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page { animation: lwy-page-in .26s ease-out both; }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } button:active:not(:disabled), .btn:active, .item:active, .tile:active { transform: none; } }

/* ===== App shell v3: tactile, game-like, native ===== */
.top-streak { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 10px; border: 0; border-radius: 18px; background: var(--sprinkle); color: var(--cocoa-deep); font: 700 15px/1 var(--sans);  }
.top-streak svg { width: 18px; height: 18px; fill: var(--mug); stroke: var(--cocoa); stroke-width: 1.4; stroke-linejoin: round; }
.top-streak.cold svg { fill: none; opacity: .6; }

html[data-theme="dark"] .top-streak { background: #4B3022; color: #FCE9D0;  }


/* ===== Reference design (Claude Design): flat, calm, one big action ===== */
@media (max-width: 860px) {
  .topbar-tools .pill { display: none; }
  .topbar .brand { font-size: 26px; }
  .main, .stage, #view { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .page-head h1, .page > h1 { font: 600 32px/1.1 var(--serif); letter-spacing: -.01em; margin: 2px 0 4px; }
  .page-head .lead { color: var(--muted); font-size: 15px; margin-top: 2px; }
  .page-head { margin-bottom: 14px; }

  /* Home = header, one flight card, week, three rows. Nothing else. */
  .page-home .hh-main, .page-home .home-xp { display: none; }
  .page-home .home-hero { gap: 0; }
  .page-home .home-hero::before { content: "Next up"; font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
  .home-next { border-radius: 24px; padding: 22px 20px 20px; box-shadow: none; }
  .home-next::before, .home-next::after { content: none; }
  .home-next .nx-k { display: none; }
  .home-next .nx-b { font: 500 26px/1.15 var(--serif); max-width: none; }
  .home-next .nx-s { font-size: 14px; margin-top: 8px; }
  .home-next .nx-go { height: 54px; border-radius: 16px; box-shadow: none; margin-top: 20px; }
  .home-next .nx-go::before { content: ""; width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-right: 8px; }
  .home-next .nx-go:active { transform: none; opacity: .8; }
  .home-week { margin-top: 22px; }

  /* rows, not tiles */
  .home-grid { display: block; margin-top: 22px; }
  .home-grid::before { content: "Keep going"; font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
  .home-grid .tile { display: flex; min-height: 44px; background: transparent !important; box-shadow: none !important; border-radius: 0; color: var(--cocoa); }
  .home-grid .tile:active { transform: none; opacity: .7; }
  .home-grid .tile:nth-child(n) { grid-column: auto; min-height: 0; }
  .home-grid .tile[data-k="impromptu"], .home-grid .tile[data-k="pron"], .home-grid .tile[data-k="friends"] { display: none; }
  .home-grid .tile .ti-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--sprinkle); color: var(--cocoa); }
  .home-grid .tile .ti-ico svg { width: 22px; height: 22px; }
  .home-grid .tile small { opacity: 1; color: var(--muted); font-size: 14px; }
  .home-grid .tile .ti-chip { position: static; background: transparent; color: var(--muted); }
  .home-grid .tile .ti-chip.hot { background: var(--sprinkle); color: var(--cocoa-deep); }
  .home-grid .tile::after { content: "\203A"; }

  /* tab bar: flat, pill on the active icon */
  .tabbar { left: 0; right: 0; bottom: 0; border-radius: 0; border: 0; border-top: 1px solid var(--hair); box-shadow: none; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabbar button.active svg { background: var(--sprinkle); color: var(--cocoa); stroke: currentColor; }
  html[data-theme="dark"] .tabbar { background: rgba(43, 26, 18, .96); }
  html[data-theme="dark"] .tabbar button.active svg { background: #E19C4E; color: #2B1A12; }
  html[data-theme="dark"] .home-grid .tile .ti-ico { background: #4B3022; color: #FCD8A2; }
  html[data-theme="dark"] .home-next { background: #613627; }
}
:root:not([data-theme="dark"]) { --paper: #FBF6EE; --paper-2: #F3E9DA; }
@media (max-width: 860px) { .page-home .home-hero::before { order: -2; } }
.pr-spot { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; border-radius: 20px; padding: 16px 16px 16px 18px; background: var(--sprinkle); color: var(--cocoa-deep); margin: 0 0 18px; cursor: pointer; }
.pr-spot .ps-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pr-spot small { font: 700 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.pr-spot b { font: 600 22px/1.15 var(--serif); }
.pr-spot .ps-t > span { font-size: 14px; line-height: 1.35; }
.pr-spot .ps-go { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--cocoa); position: relative; }
.pr-spot .ps-go::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 15px solid var(--paper); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.pr-label { font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
html[data-theme="dark"] .pr-spot { background: #4B3022; color: #FCE9D0; }
html[data-theme="dark"] .pr-spot .ps-go { background: #E19C4E; } html[data-theme="dark"] .pr-spot .ps-go::after { border-left-color: #2B1A12; }
/* dark: row text stays cream (Mug is for accents), flat rows, visible switches */
html[data-theme="dark"] .home-grid .tile, html[data-theme="dark"] .home-grid .tile b { color: #FCE9D0; }
html[data-theme="dark"] .home-grid .tile small { color: #D6BC9F; }
html[data-theme="dark"] .practice-card, html[data-theme="dark"] .practice-card:hover, html[data-theme="dark"] .practice-card:active { box-shadow: none; background: transparent; }
html[data-theme="dark"] input[type=checkbox]:not(.consent input):not(.ack input):checked { background: #E19C4E; }
html[data-theme="dark"] input[type=checkbox]:not(.consent input):not(.ack input):checked::after { background: #2B1A12; }
html[data-theme="dark"] input[type=checkbox]:not(.consent input):not(.ack input):not(:checked) { background: #5C3F30; }
html[data-theme="dark"] input[type=checkbox]:not(.consent input):not(.ack input):not(:checked)::after { background: #D6BC9F; }
html[data-theme="dark"] .tgl input:checked + i { background: #E19C4E; }
html[data-theme="dark"] .tgl input:checked + i::after { background: #2B1A12; }
html[data-theme="dark"] .tgl input:not(:checked) + i { background: #5C3F30; }
html[data-theme="dark"] .tgl input:not(:checked) + i::after { background: #D6BC9F; }
html[data-theme="dark"] .practice-card .pc-icon { background: #4B3022; border-radius: 14px; }
/* Reference pass: Progress, Me, Plans */
@media (max-width: 860px) {
  details.fold > summary { font: 600 16px/1.3 var(--sans); letter-spacing: 0; color: var(--cocoa); border-bottom: 1px solid var(--hair); }
  details.fold { border-top: 0; margin-top: 0; }
  .xp-number { font: 600 44px/1.05 var(--serif); letter-spacing: -.01em; }
  .xp-hero .eyebrow { font-weight: 600; }
  .hero h1, .band h1 { font: 600 32px/1.12 var(--serif); letter-spacing: -.01em; }
  .hero .lead { font-size: 16px; line-height: 1.5; color: var(--muted); }
  .hero .eyebrow { font-size: 12px; }
  .billing-toggle { display: flex; width: 100%; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--cocoa) 8%, var(--paper)); }
  .billing-toggle button { flex: 1; min-height: 44px; border-radius: 11px; font: 600 15px/1.2 var(--sans); }
  .billing-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--cocoa); box-shadow: 0 1px 2px rgba(97,54,39,.15); }
}

@media (max-width: 860px) {
  .home-grid .tile[data-k="simulate"] .ti-ico { background: var(--cocoa); color: var(--sprinkle); }
  .home-grid .tile[data-k="simulate"] b { font-size: 17px; }
  html[data-theme="dark"] .home-grid .tile[data-k="simulate"] .ti-ico { background: #E19C4E; color: #2B1A12; }
}

/* ===== Tidy pass: Simulate entry, usage meters, benchmark ===== */
.sim-actions { display: grid; gap: 10px; }
.sim-actions .btn.primary, .sim-actions .sc-all { width: 100%; flex: none; }
.sim-actions .sc-all { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px; border: 2px solid var(--cocoa); border-radius: 16px; background: transparent; color: var(--cocoa); font: 700 16px/1.2 var(--sans); text-decoration: none; }
.sim-actions .sc-all i { font-style: normal; font-size: 26px; line-height: 1; font-weight: 400; }
.sim-actions .sc-all:hover { background: color-mix(in srgb, var(--cocoa) 8%, transparent); }
.sim-more { display: flex; gap: 20px; padding: 0 2px; }
.sim-more .text-link { font: 600 15px/1.2 var(--sans); color: var(--muted); }

.usebar { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.usebar .row.between { align-items: baseline; font: 500 15px/1.3 var(--sans); }
.usebar .small { color: var(--muted); font-size: 14px; }
.usebar .mprog { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--cocoa) 12%, transparent); margin-top: 8px; overflow: hidden; }
.usebar .mprog i { display: block; height: 100%; border-radius: 3px; background: var(--mug); }
.usebar:last-child { border-bottom: 0; }

.bench-top { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.bench-num { flex: none; width: 92px; padding: 12px 0; border-radius: 18px; text-align: center; background: var(--sprinkle); color: var(--cocoa-deep); }
.bench-num b { display: block; font: 600 38px/1 var(--serif); }
.bench-num span { font: 600 11px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.bench-band { font: 600 22px/1.15 var(--serif); }
.bench-top .small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.insight .eyebrow { font: 700 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.insight b { font-weight: 600; }
.insight .small { color: var(--muted); }
html[data-theme="dark"] .bench-num { background: #4B3022; color: #FCE9D0; }

/* Pronunciation and other chip pickers: one scrolling row, not a wrapped cloud */
@media (max-width: 860px) {
  .practice-detail-head { top: calc(56px + env(safe-area-inset-top, 0px)); background: var(--paper); z-index: 20; }
}

/* Pronunciation picker: category row, then that category's sets */
.pr-pick-l { margin: 16px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #7A5C4E); }
.chips.pr-cats, .chips.pr-sets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.chips.pr-cats .chip, .chips.pr-sets .chip { min-height: 40px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.pr-all .pr-items { max-height: 340px; overflow-y: auto; }

/* Progress: clean numbers */
.dh-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 2px; }
.dh-pair { display: flex; align-items: baseline; gap: 10px; font: 600 40px/1 var(--serif); font-variant-numeric: tabular-nums; }
.dh-pair .now { color: var(--cocoa, #613627); }
.dh-pair span:first-child { color: var(--muted); }
.dh-pair i { font: 400 22px var(--sans); color: var(--muted); font-style: normal; }
.dh-pair small { font: 500 13px var(--sans); color: var(--muted); margin-left: 4px; }
.dh-delta, .hl-row .d { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 30px; padding: 0 10px; border-radius: 15px; font: 700 14px var(--sans); font-variant-numeric: tabular-nums; flex: none; }
.dh-delta.up, .hl-row .d.up { background: #E3EEDF; color: #2F6B45; }
.dh-delta.down, .hl-row .d.down { background: #F6DFDA; color: #A53D31; }
.dh-delta.flat, .hl-row .d.flat { background: var(--paper-2); color: var(--muted); }
.dh-cap { margin: 6px 0 4px; color: var(--muted); }
.hl-note { margin: 0 0 6px; color: var(--muted); }
.hl-row { grid-template-columns: 1fr auto auto !important; gap: 12px !important; align-items: center !important; padding: 12px 0 !important; }
.hl-row .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hl-row .nm small { grid-column: auto; font-size: 12.5px; color: var(--muted); }
.hl-row .n { font-size: 14px; white-space: nowrap; }
.hl-row .n i { font-style: normal; opacity: .6; }
.hl-row .d { height: 26px; min-width: 48px; font-size: 13px; }
.mv-group + .mv-group { margin-top: 12px; }
.mv-t { font: 600 15px var(--sans); margin-bottom: 4px; }
.mv-list { list-style: none; margin: 0; padding: 0; }
.mv-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.mv-list li:last-child { border-bottom: 0; }
.mv-list b { min-width: 44px; text-align: center; padding: 3px 10px; border-radius: 13px; font: 700 13px var(--sans); font-variant-numeric: tabular-nums; }
.mv-list b.up { background: #E3EEDF; color: #2F6B45; }
.mv-list b.down { background: #F6DFDA; color: #A53D31; }
.mv-group + .small, .mv-list + .small { margin-top: 10px; }
.rs-top { display: flex; align-items: baseline; gap: 8px; }
.rs-n { font: 600 38px/1 var(--serif); font-variant-numeric: tabular-nums; }
.rs-top span { font-size: 14px; color: var(--muted); }
.rs-runs { display: flex; align-items: flex-end; gap: 10px; height: 78px; margin: 12px 0 6px; }
.rs-runs span { flex: 1; max-width: 44px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.rs-runs i { display: block; width: 100%; border-radius: 6px; background: var(--mug, #E19C4E); }
.rs-runs small { font: 600 12px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .dh-delta.up, html[data-theme="dark"] .hl-row .d.up, html[data-theme="dark"] .mv-list b.up { background: #24382B; color: #9AD3AE; }
html[data-theme="dark"] .dh-delta.down, html[data-theme="dark"] .hl-row .d.down, html[data-theme="dark"] .mv-list b.down { background: #46241F; color: #F0A59B; }

/* Fewer things at once: folded "more" lists */
#ss-gym .ss-more { grid-column: 1 / -1; }
#ss-gym .ss-more > summary { cursor: pointer; list-style: none; padding: 12px 0; font: 600 14px var(--sans); color: var(--cocoa, #613627); text-align: center; border-radius: 12px; }
#ss-gym .ss-more > summary::-webkit-details-marker { display: none; }
#ss-gym .ss-more[open] > summary { display: none; }
#ss-gym .ss-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.mm-more > summary { cursor: pointer; padding: 6px 0; }

/* Homepage on phones: the hero already shows a first take, so the section shows only the retry */
@media (max-width: 720px) {
  .sim-demo > .preview:first-child, .sim-demo > .sim-step { display: none; }
  #problems .quote-row:nth-child(n+4) { display: none; }
}

.pr-custom { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pr-custom[hidden] { display: none; }
.pr-custom .field { width: 96px; min-height: 44px; }
.pr-field .seg { flex-wrap: wrap; }

.pr-step { margin: 18px 0 8px; font: 700 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 16px; border: 1px solid var(--hair); border-radius: 18px; background: var(--paper-2); }
.pr-cell { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pr-cell .k { font: 600 12px var(--sans); color: var(--muted); }
.pr-cell select.field { min-height: 44px; width: 100%; max-width: none; }
.pr-wide { grid-column: 1 / -1; }
.pr-custom { display: flex; align-items: center; gap: 8px; }
.pr-custom[hidden] { display: none; }
.pr-custom .field { width: 80px; min-height: 44px; }
.pr-setup .pr-go { margin-top: 18px; }
.pr-setup .pr-go .btn { width: 100%; }

/* In-conversation (phone): solid control bar, no dead space, last bubble never hidden */
@media (max-width: 860px) {
  body.in-sim .stage.sim { min-height: 0; }
  body.in-sim .stage.sim .dock { background: var(--cocoa-deep, #3A2218); border-top: 1px solid rgba(255,255,255,.08); padding: 10px 0 calc(10px + var(--safe-b, 0px)); }
  body.in-sim .stage.sim .convo { padding-bottom: 12px; }
}
.pr-card.pr-one { grid-template-columns: 1fr; }
.pr-foot { margin-top: 14px; color: var(--muted); }
@media (max-width: 860px) { .pr-go .btn.lg { width: 100%; } }

/* Pricing: the one line on Starter that says what it does not include. */
.plan li.not-in{color:var(--muted,#7A5C4E);font-weight:600}
.plan li.not-in::before{border:0;width:auto;height:auto;top:0;left:3px;content:"\00d7";color:var(--muted,#7A5C4E);transform:none;font-size:16px;line-height:1.5}

/* Locked habit scenes (Pro): same look as the open ones, clearly marked. */
a.habit-row{text-decoration:none;color:inherit}
.habit-row.locked .pill{margin-left:6px;vertical-align:1px}

/* Boss battle button and the Then and now columns. */
.boss-row{margin-top:10px}
.boss-row .btn{width:100%}
.boss-row .pill{margin-left:6px}
.tn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.tn-col{min-width:0}
.tn-col p{margin:6px 0 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
@media(max-width:560px){.tn{grid-template-columns:1fr}}

/* Pricing cards: one short line for what is in, one for what is not. */
.plan .inc,.plan .exc{margin:0 0 12px;font-size:15px;line-height:1.5}
.plan .inc b,.plan .exc b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#7A5C4E);margin-bottom:3px}
.plan .exc{color:var(--muted,#7A5C4E)}
details.trial-note summary{cursor:pointer}

/* Pricing comparison table: four columns, wraps on phones, no sideways scroll. */
.cmp-wrap{margin-top:14px;border:1px solid var(--line,#EADFCF);border-radius:16px;overflow:hidden}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.4}
.cmp th,.cmp td{padding:10px 8px;text-align:left;vertical-align:top;border-top:1px solid var(--line,#EADFCF);overflow-wrap:break-word;word-break:normal;hyphens:manual}
.cmp thead th{border-top:0;background:var(--paper-2,#fff);font-weight:700}
.cmp th[scope=row]{font-weight:600;width:42%}
.cmp th[scope=row] small{display:block;font-weight:400;color:var(--muted,#7A5C4E);margin-top:2px}
.cmp td{width:19.3%}
.cmp tr.grp th{background:var(--sprinkles,#FCD8A2);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cocoa,#613627)}
.cmp td:last-child{background:rgba(252,216,162,.28)}
@media(max-width:560px){.cmp{font-size:12.5px}.cmp th,.cmp td{padding:9px 5px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp thead th:first-child{width:42%}
.cmp thead th:not(:first-child){width:19.3%}

.plan .inc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.plan .inc-list li{font-size:15px;line-height:1.5}.plan .inc-list li span{font-weight:600;color:var(--cocoa,#613627)}.plan .inc-list li span:after{content:":"}