/* TOWN 360 — LIGHT TWIN (house light-themes lane, Nov 6 2026).
 * Built in a COPY of the v62 tree while the business-map fix crew works
 * the canonical tree — staged, not deployed (see light-themes
 * PROGRESS.md). Same layout/density/features as the black face; only
 * the palette flips. Town's cards were already white — the twin flips
 * the ground, panels and chrome around them. Keys on
 * html[data-theme="light"] from js/theme.js (auto = OS default, the
 * toggle's choice is remembered per device/account). */

html[data-theme="light"]{
  --bg:#f2f6f0; --panel:#ffffff; --panel2:#edf2ea; --panel3:#e2eae0;
  --line:rgba(9,32,16,.14); --line-soft:rgba(9,32,16,.08);
  --ink:#0b120c; --ink2:#43503f; --ink3:#57654F;
  --green:#3DDC4E; --green-hi:#55E668; --green-deep:#1d9e33;
}
html[data-theme="light"]{background:#e7eee3}
html[data-theme="light"] body{background:#e7eee3;color:var(--ink)}
html[data-theme="light"] #phone{background:var(--bg)}

/* ---------- chrome: top bar / chip rail / tab bar / sheets ---------- */
html[data-theme="light"] .tb,html[data-theme="light"] #topbar,
html[data-theme="light"] .topbar{ background:rgba(255,255,255,.94) }
html[data-theme="light"] .tb-word{color:#0b120c}
html[data-theme="light"] .tb-btn{color:#0b120c}
html[data-theme="light"] .tb-badge{border-color:#fff}
html[data-theme="light"] #tabbar{background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
html[data-theme="light"] .tab-btn{color:#57654F}
html[data-theme="light"] .tab-btn.is-active{color:#0B6B22}
html[data-theme="light"] .tab-post{color:#57654F}
html[data-theme="light"] .tab-post>span:first-child{color:#0B6B22}
/* boot-hold splash (town-boot-bar, Nov 6 2026): light twin — pale
 * ground, dark wordmark; the green pulse ring carries over. */
html[data-theme="light"].boot-hold #boot-splash{background:#e7eee3}
html[data-theme="light"] .boot-mark{color:#0b120c}
html[data-theme="light"] .boot-mark b{color:#1D9E33}
html[data-theme="light"] .pill{background:#e6ece3;color:#242b24}
html[data-theme="light"] .pill.is-active{background:var(--green);color:var(--green-ink)}
html[data-theme="light"] .sheet{background:var(--panel);color:var(--ink)}
html[data-theme="light"] .sheet select option,html[data-theme="light"] #phone select option{background:#fff;color:#0b120c}
html[data-theme="light"] #backdrop{background:rgba(20,32,22,.45)}
html[data-theme="light"] #toast{background:#0B6B22;color:#fff}

/* ---------- surfaces + text ---------- */
html[data-theme="light"] .card,html[data-theme="light"] .biz-card,
html[data-theme="light"] .dir-card,html[data-theme="light"] .panel{
  background:#fff;border-color:var(--line);color:var(--ink)}
html[data-theme="light"] .link-card{background:#fff;border-color:#dfe6dc}
html[data-theme="light"] .lc-host{color:#57654F}
html[data-theme="light"] .lc-title{color:#101418}
html[data-theme="light"] .lc-note{color:#177A33}
html[data-theme="light"] .ring-divider{color:#177A33}
html[data-theme="light"] .tb-word b{color:#1D9E33}
html[data-theme="light"] input,html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#fff;color:#0b120c;border-color:rgba(9,32,16,.22)}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#8b9885}
html[data-theme="light"] .btn-ghost{color:#0b120c;border-color:rgba(9,32,16,.25);background:#fff}
html[data-theme="light"] .btn-ghost.is-on{border-color:var(--green-deep);color:#0B6B22;background:#EFFBEF}
html[data-theme="light"] .btn-house-aa{background:#fff;color:#8a6410;border-color:#e0243c}
html[data-theme="light"] .secttl,html[data-theme="light"] .muted{color:var(--ink2)}
html[data-theme="light"] .search-inline input,html[data-theme="light"] .search-box input{color:#0b120c}

/* post media + map stay themselves (content surfaces);
 * the dark video frame ground becomes a light well */
html[data-theme="light"] .post-video{background:#0b120c}
html[data-theme="light"] .short-card{border-color:#dfe6dc}

/* ---------- welcome = photo hero (media surface): text stays white
 * over the photo in BOTH themes; only the app chrome behind it flips */
html[data-theme="light"] #view-welcome{
  --ink:#FFFFFF; --ink2:#E6EBE6; --ink3:#B9BDB9;
}
html[data-theme="light"] #view-welcome .tb-word,
html[data-theme="light"] #view-welcome .w-head,
html[data-theme="light"] #view-welcome .w-tag,
html[data-theme="light"] #view-welcome .w-browse,
html[data-theme="light"] #view-welcome .w-foot,
html[data-theme="light"] #view-welcome .w-tile{color:#fff}
html[data-theme="light"] #view-welcome .w-sub{color:#E6EBE6}
html[data-theme="light"] #view-welcome .w-signin{color:#fff;border-color:rgba(255,255,255,.85);background:transparent}
html[data-theme="light"] #welcomeLogo{color:#fff}

/* ---------- hardcoded-white text on flipped surfaces ----------
 * The base face pins some text to literal #fff (it assumed the black
 * ground). Their surfaces flip via tokens, so without these the text
 * stays white on white — found by looking at the v64 light render:
 * the first-open terms sheet's menu-row titles were unreadable. */
html[data-theme="light"] .menu-row{color:var(--ink)}
html[data-theme="light"] .menu-row.danger{color:#C0272D}
html[data-theme="light"] .empty .e-title{color:var(--ink)}
html[data-theme="light"] .sheet .sh-sub b{color:var(--ink)}
html[data-theme="light"] .sheet .grab{background:rgba(9,32,16,.25)}
html[data-theme="light"] .chip{color:var(--ink)}
html[data-theme="light"] .back-btn{color:var(--ink)}

/* ---------- door header band (Pair-1 clone pass, Nov 6 2026) ----------
 * Base .door-head pins a literal near-black band (it assumed the dark
 * ground). In light the door title (dark ink via tokens) sat on that
 * black band and vanished — proven on the live Messages door frame.
 * Flip the band to the light glass the rest of the light chrome uses. */
html[data-theme="light"] .door-head{background:rgba(255,255,255,.92)}

/* ---------- drive card (maps-fix-all, Nov 6 2026) ----------
 * face.css hardcodes color:#fff for the drive card's name, route
 * summary, preview chip and arrived title — correct on the dark
 * panel, INVISIBLE on the light panel (white on white). The route
 * line a driver actually needs ("Getting the route…", "9 min ·
 * 2.1 mi", the no-route fallback) never rendered in light mode,
 * which reads as a Directions button that does nothing. The nav
 * banner keeps its own dark-green bg in both themes, so its white
 * text stays as-is. */
html[data-theme="light"] .dc-name{color:#0b120c}
html[data-theme="light"] .dc-sum{color:#0b120c}
html[data-theme="light"] .dc-chip{color:#0b120c}
html[data-theme="light"] .dc-arrived{color:#0b120c}
html[data-theme="light"] .dc-x{color:#43503f}
html[data-theme="light"] #hoodline.is-off{color:#B9C4B9}

/* ---------- business hero head (living-backgrounds close-out, Nov 6 2026) ----------
 * face.css hardcodes color:#fff for the biz hero name, stat-tile
 * numbers and the Message/Call/Share pills — correct on the dark
 * panel, washed out on the light panel2/panel3 tiles (proof frames:
 * biz name + "7 / 4.5 / 2" + action pills near-invisible in light).
 * Same defect class as the drive-card fix above; flip to ink. */
html[data-theme="light"] .biz-name2{color:#0b120c}
html[data-theme="light"] .stat-tile b{color:#0b120c}
html[data-theme="light"] .act-pill{color:#0b120c}

/* ---------- form fields + notes (readability-forms, Nov 6 2026) ----------
 * face.css pins every #phone text field to color:#fff (it assumed the
 * dark panel2 ground). Its ID specificity beats this file's generic
 * light input rule, so in light mode every form field — sell, composer,
 * claim, portal, auth, safety — rendered WHITE text on the pale
 * panel2 (#edf2ea) = 1.14:1, and select values ("Everything",
 * "Ships + local pickup") were invisible (owner screenshot, Nov 6:
 * "Can't read the words"). Flip the fields to white ground + dark
 * ink here, with the specificity to actually win. The two base
 * exceptions keep their own design: the comment pill (own light
 * rule already) and the transparent search-bar field (its pill
 * flips via --panel2, its text goes dark-ink-on-pale instead). */
html[data-theme="light"] #phone input[type="text"],
html[data-theme="light"] #phone input[type="email"],
html[data-theme="light"] #phone input[type="password"],
html[data-theme="light"] #phone input[type="number"],
html[data-theme="light"] #phone input[type="tel"],
html[data-theme="light"] #phone input[type="url"],
html[data-theme="light"] #phone input[type="search"],
html[data-theme="light"] #phone input[type="date"],
html[data-theme="light"] #phone input[type="time"],
html[data-theme="light"] #phone textarea,
html[data-theme="light"] #phone select{
  background:#fff;color:#0b120c;color-scheme:light}
html[data-theme="light"] #phone .comment-form input{
  background:#F7F8F7;color:#101418;color-scheme:light}
html[data-theme="light"] #phone .search-bar input{
  background:none;color:#0b120c;color-scheme:light}
/* note-box: base text #DFF5E2 on a translucent green tint over the
 * flipped white panel = 1.0:1 — every form's helper/note line was
 * unreadable in light (the Sell form's photo note, the market info
 * boxes, the auth sign-in note). Dark green ink on a slightly
 * <MASKED_USER_ID_001>onger tint of the same box. */
html[data-theme="light"] .note-box{
  color:#0B6B22;background:rgba(29,158,51,.10);border-color:rgba(29,158,51,.38)}
html[data-theme="light"] .note-box b{color:#0b120c}
/* the market search field sits on a dark band that does NOT flip in
 * light (typed text stays #fff at 18:1); only its placeholder
 * inherited the flipped --ink3 (#57654F) and fell to 2.95:1 on the
 * dark ground. Give the placeholder the dark band's own pale ink. */
html[data-theme="light"] #marketQ::placeholder{color:#B9BDB9;opacity:1}
/* ...and the field itself keeps its designed treatment: the market
 * view's search is a DARK field in both themes (face.css
 * #view-market input — #12160F ground, white text). The generic
 * pale-field flip above must not paint it white. */
html[data-theme="light"] #phone input#marketQ{
  background:#12160F;color:#fff;border-color:#2A332A;color-scheme:dark}