/* ==========================================================================
   LOOKS (look.js). Parry, 21 Oct: "can we have all ten and let the user
   choose which they want to use?"

   Every rule below except the first block is scoped under a body class
   (lay-thumb, lay-magazine, lay-tabs), so Classic, which adds no class, is
   drawn exactly as before. A look changes only how things are drawn: the same
   buttons, in the same order, doing the same things. Tap targets stay 44px or
   more, and text stays at the contrast the app was built to (4.5:1 or better).

   The add-ons (followup, requests, siteleads, seller, sample) paint with the
   app's custom properties, so a look that redefines them on <body> repaints
   those boxes too.
   ========================================================================== */

/* ---- the choice on the profile screen (every look, Classic included) ---- */
.looks{display:grid;gap:.5rem;margin:.2rem 0 1.5rem}
.lookopt{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;
  min-height:2.75rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-family:var(--ui);font-size:var(--t-md);
  text-align:left;cursor:pointer}
.lookopt b{font-weight:600;line-height:1.3}
.lookopt span{font-size:var(--t-sm);color:var(--ink-3);line-height:1.45}
.lookopt[aria-pressed="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);
  background:var(--brand-soft)}
.lookopt[aria-pressed="true"] b:after{content:"  \2713";color:var(--brand-ink)}
.lookopt[disabled]{cursor:default;opacity:.6}
.lookopt:not([disabled]):active{background:var(--sunk)}
.laytabs{display:none}


/* ==========================================================================
   7. THUMB ZONE: dark, one hand, outdoors.
   Near-black ground, lime for the one action that matters, big buttons, and
   the list pushed down to where a thumb reaches.
   ========================================================================== */
body.lay-thumb{
  --bg:#0a0a0a; --surface:#171717; --sunk:#262626; --line:#333333; --line-2:#242424;
  --ink:#fafafa; --ink-2:#d4d4d4; --ink-3:#a3a3a3;
  --brand:#bef264; --brand-ink:#d9f99d; --brand-soft:#1d2a09; --on-brand:#0a0a0a;
  --amber:#fb923c; --amber-soft:#2a1709; --live:#f87171;
  --shadow:none; --shadow-lg:0 -10px 30px rgba(0,0,0,.6);
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --ui:"Archivo",system-ui,-apple-system,sans-serif;
  --r-sm:16px; --r-md:20px;
  color-scheme:dark;
}
body.lay-thumb .app{padding-bottom:8rem}
body.lay-thumb .bar{border-bottom:0;margin-bottom:.6rem}
body.lay-thumb .wordmark{font-weight:900}
body.lay-thumb .back{color:var(--brand);font-weight:800;font-size:var(--t-lg)}
body.lay-thumb .iconbtn{width:3rem;height:3rem;border:0;background:var(--sunk);color:var(--ink)}
body.lay-thumb h1{font-weight:900;letter-spacing:-.02em;font-size:2rem;line-height:1.02}
body.lay-thumb[data-screen="HomeView"] #view>h1{font-size:3.6rem;line-height:.92;color:var(--brand)}
body.lay-thumb .sub{color:var(--ink-3);font-size:var(--t-md)}
body.lay-thumb .label{color:var(--ink-3);font-weight:800;font-size:var(--t-sm);margin-top:.4rem}

/* The list sits low, where the thumb is: the space between the heading and
   the first card grows, so on a short list the cards rest just above the big
   button. A long list scrolls as before. */
body.lay-thumb[data-screen="HomeView"] #view,
body.lay-thumb[data-screen="TourView"] #view{display:flex;flex-direction:column;
  min-height:calc(100vh - 13.5rem)}
body.lay-thumb[data-screen="HomeView"] #view>.sub,
body.lay-thumb[data-screen="TourView"] #view>.field{margin-bottom:auto;padding-bottom:1.5rem}

body.lay-thumb .btn{min-height:4rem;border-radius:20px;font-weight:800;font-size:1.0625rem}
body.lay-thumb .btn.sm{min-height:3rem;border-radius:14px}
body.lay-thumb .btn.ghost{background:var(--sunk);border:0;color:var(--ink)}
body.lay-thumb .btn.quiet{min-height:3rem;color:var(--ink-3)}
body.lay-thumb .btn.danger{border-color:var(--line)}
body.lay-thumb .btn[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-thumb .fab{min-height:4.75rem;font-size:1.25rem;font-weight:900;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px))}

body.lay-thumb .card{border:0;background:var(--surface);border-radius:20px}
body.lay-thumb .card.tap{min-height:5.5rem;padding:.75rem .9rem;margin-bottom:.6rem}
body.lay-thumb .card.tap:active{background:var(--sunk)}
body.lay-thumb .card .ttl{font-weight:800}
body.lay-thumb .card.tap img{width:4rem !important;height:4rem !important;border-radius:14px !important}
body.lay-thumb .card.tap:has(.gap){box-shadow:inset 0 0 0 3px var(--amber)}
body.lay-thumb .gap{color:var(--amber);font-size:var(--t-sm)}
body.lay-thumb .chev{color:var(--ink-3);font-size:var(--t-xl)}
body.lay-thumb .pill,body.lay-thumb .pill.samplepill{background:var(--brand);color:#0a0a0a;font-weight:800}
body.lay-thumb .empty{border:2px dashed var(--line);border-radius:20px;color:var(--ink-3)}

body.lay-thumb input[type=text],body.lay-thumb input[type=tel],body.lay-thumb input[type=email],
body.lay-thumb input[type=number],body.lay-thumb input[type=date],body.lay-thumb input[type=time],
body.lay-thumb textarea,body.lay-thumb select{background:var(--surface);border:1px solid var(--line);
  border-radius:14px;min-height:3.5rem}
body.lay-thumb textarea{min-height:7rem}
body.lay-thumb input.ro{background:transparent}

/* Capture: big Sheet and Photo, and the recorder as one wide button. */
body.lay-thumb .shoot{background:var(--surface);border:2px dashed #525252;border-radius:20px;
  min-height:4.5rem;padding:.9rem 1rem}
body.lay-thumb .shoot .t{font-weight:800;font-size:var(--t-lg)}
body.lay-thumb .shoot .ic{width:3rem;height:3rem;border-radius:14px}
body.lay-thumb .shoot.done{border:2px solid var(--brand);background:var(--brand-soft)}
body.lay-thumb .thumb{border-radius:12px}
body.lay-thumb .rec{width:100%;height:8.75rem;border-radius:28px;background:var(--brand);color:#0a0a0a;
  font-size:1.5rem;font-weight:900;flex-direction:row;gap:.8rem;box-shadow:none}
body.lay-thumb .rec .dot{background:#0a0a0a;width:1.4rem;height:1.4rem}
body.lay-thumb .rec.on{background:#f87171;animation:lay-thumb-on 1.15s ease-in-out infinite}
@keyframes lay-thumb-on{50%{box-shadow:0 0 0 6px rgba(248,113,113,.35)}}
@media (prefers-reduced-motion:reduce){body.lay-thumb .rec.on{animation:none}}
body.lay-thumb .rec-time{color:var(--ink);font-size:var(--t-xl);font-weight:800}
body.lay-thumb .rec-hint{color:var(--ink-3)}
body.lay-thumb .chip{border:2px solid var(--line);background:transparent;color:var(--ink);font-weight:700;
  min-height:3rem}
body.lay-thumb .chip.up{border-color:var(--brand);color:var(--brand);background:transparent}
body.lay-thumb .chip.down{border-color:var(--amber);color:var(--amber);background:transparent}
body.lay-thumb .chip.up:before{content:"+ "}
body.lay-thumb .chip.down:before{content:"\2212  "}
body.lay-thumb .note{background:var(--amber-soft);border-left-color:var(--amber);color:var(--ink-2);
  border-radius:0 14px 14px 0}
body.lay-thumb .fold{border:0;border-radius:20px}
body.lay-thumb .fold>summary{min-height:3.5rem;font-weight:800;color:var(--ink)}
body.lay-thumb .sp-row{border:0;border-radius:16px}
body.lay-thumb .sp-open,body.lay-thumb .sv-foot .sv-back{color:#0a0a0a;font-weight:800}
body.lay-thumb .sw{box-shadow:inset 0 0 0 1px #525252}
body.lay-thumb .sw[aria-pressed="true"]{border-color:var(--brand)}
body.lay-thumb .coach{border:0;border-radius:20px}
body.lay-thumb .samplelink{border:0;border-radius:16px}
body.lay-thumb .lookopt{border:0;border-radius:16px;min-height:3.5rem}
body.lay-thumb .lookopt[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--brand)}
body.lay-thumb #toast{bottom:7.5rem;background:#fafafa;color:#0a0a0a;font-weight:700}


/* ==========================================================================
   6. MAGAZINE: the app looks like the recap.
   Paper, ink, a serif for anything a client would read, hairline rules
   instead of boxes, numbered homes. Always light: it is paper.
   ========================================================================== */
body.lay-magazine{
  --bg:#fbfaf7; --surface:#fbfaf7; --sunk:#f1ede5; --line:#d6d3d1; --line-2:#e7e5e4;
  --ink:#1c1917; --ink-2:#44403c; --ink-3:#57534e;
  --brand:#1c1917; --brand-ink:#1c1917; --brand-soft:#efe9dd; --on-brand:#fbfaf7;
  --amber:#b45309; --amber-soft:#f8eddc; --live:#b45309;
  --shadow:none; --shadow-lg:0 2px 10px rgba(28,25,23,.12);
  --display:"Fraunces",Georgia,serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --r-sm:4px; --r-md:4px;
  color-scheme:light;
}
body.lay-magazine .bar{border-bottom:1px solid var(--ink)}
body.lay-magazine .wordmark{font-family:var(--display);font-weight:700;font-style:italic;letter-spacing:-.01em}
body.lay-magazine .wordmark span{color:var(--amber)}
body.lay-magazine .back{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
body.lay-magazine .iconbtn{background:transparent;border-color:var(--ink);color:var(--ink)}
body.lay-magazine h1{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:2.4rem;line-height:1.02}
body.lay-magazine[data-screen="HomeView"] #view>h1{font-size:3.25rem;line-height:.95}
body.lay-magazine h2{font-family:var(--display);font-weight:700}
body.lay-magazine .sub{font-family:var(--display);font-style:italic;font-size:1.0625rem;color:var(--ink-3);
  border-bottom:1px solid var(--ink);padding-bottom:1rem}
body.lay-magazine .label{text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem;
  font-weight:600;color:var(--ink);margin-top:.6rem}
body.lay-magazine .label span{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}

body.lay-magazine .btn{border-radius:4px;min-height:3rem;font-weight:600}
body.lay-magazine .btn.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
body.lay-magazine .btn.quiet{text-decoration:underline;text-underline-offset:3px;min-height:2.75rem}
body.lay-magazine .btn.danger{border-color:var(--ink)}
body.lay-magazine .btn[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-magazine .fab{box-shadow:none;min-height:3.25rem}

/* Lists are rows on the page, not boxes. */
body.lay-magazine .card{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:1rem 0}
body.lay-magazine .card.tap{margin:0;align-items:flex-start;gap:1rem;min-height:2.75rem}
body.lay-magazine .card.tap:active{background:var(--sunk)}
body.lay-magazine .card .ttl{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.2}
body.lay-magazine .card .meta{font-size:var(--t-sm);color:var(--ink-3)}
body.lay-magazine .card.tap>div{flex:1}
body.lay-magazine .chev{align-self:center}
body.lay-magazine .pill{background:transparent;border:1px solid var(--ink);color:var(--ink);border-radius:2px;
  text-transform:uppercase;letter-spacing:.08em;align-self:center}
body.lay-magazine .gap{color:var(--amber);font-size:var(--t-sm)}
body.lay-magazine .empty{border:0;border-bottom:1px solid var(--line);border-radius:0;font-family:var(--display);
  font-style:italic;color:var(--ink-3)}

/* The tour: homes numbered in driving order, photo on the right. */
body.lay-magazine[data-screen="TourView"] #view{counter-reset:laymag}
body.lay-magazine[data-screen="TourView"] #view>button.card.tap{counter-increment:laymag}
body.lay-magazine[data-screen="TourView"] #view>button.card.tap:before{content:counter(laymag);
  font-family:var(--display);font-weight:700;font-size:2.75rem;line-height:1;flex:0 0 2.1rem;color:var(--ink)}
body.lay-magazine[data-screen="TourView"] #view>button.card.tap:has(.gap):before{color:var(--amber)}
body.lay-magazine[data-screen="TourView"] #view>button.card.tap>img{order:2;width:4.4rem !important;
  height:4.4rem !important;border-radius:0 !important;align-self:center}
body.lay-magazine[data-screen="TourView"] #view>button.card.tap>.chev{order:3}
body.lay-magazine[data-screen="TourView"] #view>button.card.tap>.shoot-ic{display:none}

body.lay-magazine input[type=text],body.lay-magazine input[type=tel],body.lay-magazine input[type=email],
body.lay-magazine input[type=number],body.lay-magazine input[type=date],body.lay-magazine input[type=time],
body.lay-magazine select{background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  padding:.7rem .1rem;min-height:2.75rem}
body.lay-magazine textarea{background:#fff;border:1px solid var(--line);border-radius:0;
  font-family:var(--display);font-size:1.0625rem;line-height:1.6}
body.lay-magazine input.ro{border-bottom-color:var(--line)}

body.lay-magazine .shoot{border:1px solid var(--line);border-radius:0;background:#fff}
body.lay-magazine .shoot .t{font-family:var(--display);font-weight:700;font-size:var(--t-lg)}
body.lay-magazine .shoot .ic{border-radius:2px}
body.lay-magazine .shoot.done{border-color:var(--ink);background:var(--brand-soft)}
body.lay-magazine .shoot.done .s{color:var(--ink-2)}
body.lay-magazine .thumb{border-radius:0}
body.lay-magazine .rec{width:100%;height:3.75rem;border-radius:4px;background:var(--amber);flex-direction:row;
  gap:.6rem;font-size:var(--t-md);box-shadow:none}
body.lay-magazine .rec .dot{width:1rem;height:1rem}
body.lay-magazine .rec.on{animation:lay-mag-on 1.4s ease-in-out infinite}
@keyframes lay-mag-on{50%{opacity:.78}}
@media (prefers-reduced-motion:reduce){body.lay-magazine .rec.on{animation:none}}
body.lay-magazine .rec-time{font-family:var(--display);color:var(--ink)}
body.lay-magazine .said-live{font-family:var(--display);font-style:italic;background:transparent;
  border-left:2px solid var(--ink);border-radius:0}
body.lay-magazine .chip{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:.6rem .2rem;color:var(--ink)}
body.lay-magazine .chip.up{background:transparent;color:var(--ink)}
body.lay-magazine .chip.down{background:transparent;color:var(--amber)}
body.lay-magazine .chip.up:before{content:"+ "}
body.lay-magazine .chip.down:before{content:"\2212  "}
body.lay-magazine .note{background:transparent;border-left:2px solid var(--amber);border-radius:0;color:var(--ink-2)}
body.lay-magazine .fold{border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);border-radius:0;
  background:transparent}
body.lay-magazine .fold>summary{color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem}
body.lay-magazine .sp-row{border-radius:0;box-shadow:none;border-color:var(--ink)}
body.lay-magazine .sp-thumb{border-radius:0}
body.lay-magazine .sp-open{border-radius:4px;background:var(--ink)}
body.lay-magazine .coach{border-radius:0;border:0;border-left:2px solid var(--ink)}
body.lay-magazine .samplelink{border-radius:0;border-color:var(--ink)}
body.lay-magazine .samplelink b{font-family:var(--display)}
body.lay-magazine .fuw,body.lay-magazine .trw,body.lay-magazine .spw,body.lay-magazine .slw{background:transparent;
  border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0;box-shadow:none;
  padding-left:0;padding-right:0}
body.lay-magazine .avatar{border-color:var(--ink)}
body.lay-magazine .lookopt{border-radius:0;background:transparent}
body.lay-magazine .lookopt b{font-family:var(--display);font-weight:700;font-size:var(--t-lg)}
body.lay-magazine .lookopt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}


/* ==========================================================================
   8. TABS: Today, Tours, New, Inbox, Card.
   A bottom tab bar (look.js adds it) over a clean white app. Always light.
   ========================================================================== */
body.lay-tabs{
  --bg:#ffffff; --surface:#f9fafb; --sunk:#f3f4f6; --line:#e5e7eb; --line-2:#f3f4f6;
  --ink:#111827; --ink-2:#374151; --ink-3:#5b6472;
  --brand:#be123c; --brand-ink:#9f1239; --brand-soft:#fff1f2; --on-brand:#ffffff;
  --amber:#b45309; --amber-soft:#fff7ed; --live:#be123c;
  --shadow:0 1px 2px rgba(17,24,39,.05); --shadow-lg:0 6px 16px rgba(190,18,60,.28);
  --display:"Manrope",system-ui,-apple-system,sans-serif;
  --ui:"Manrope",system-ui,-apple-system,sans-serif;
  --r-sm:14px; --r-md:14px;
  --tabs-h:calc(4.75rem + env(safe-area-inset-bottom,0px));
  color-scheme:light;
}
body.lay-tabs .app{padding-bottom:calc(7rem + var(--tabs-h))}
body.lay-tabs .bar{border-bottom:0;margin-bottom:.4rem}
body.lay-tabs .iconbtn{border:0;background:var(--sunk);border-radius:50%}
body.lay-tabs .iconbtn img{border-radius:50%}
body.lay-tabs .back{color:var(--ink);font-weight:800;background:var(--sunk);border-radius:14px;padding:0 .9rem}
body.lay-tabs h1{font-weight:800;letter-spacing:-.02em}
body.lay-tabs h2{font-weight:800}
body.lay-tabs .label{font-weight:800;color:var(--ink-3);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
body.lay-tabs .label span{text-transform:none;letter-spacing:0;font-weight:600}
body.lay-tabs .btn{font-weight:800;border-radius:14px;min-height:3rem}
body.lay-tabs .btn.ghost{background:var(--sunk);border:0}
body.lay-tabs .fab{bottom:calc(var(--tabs-h) + .75rem)}
body.lay-tabs .card{border:0;background:var(--surface)}
body.lay-tabs .card.tap{padding:.75rem;min-height:4.5rem}
body.lay-tabs .card .ttl{font-weight:800;font-size:var(--t-md)}
body.lay-tabs .card.tap img{width:3.9rem !important;height:3.9rem !important;border-radius:12px !important}
body.lay-tabs .card.tap:has(.gap){background:var(--amber-soft)}
body.lay-tabs .gap{font-weight:800;color:var(--amber)}
body.lay-tabs .pill{font-weight:800}
body.lay-tabs input[type=text],body.lay-tabs input[type=tel],body.lay-tabs input[type=email],
body.lay-tabs input[type=number],body.lay-tabs input[type=date],body.lay-tabs input[type=time],
body.lay-tabs textarea,body.lay-tabs select{background:var(--sunk);border-color:transparent;border-radius:12px}
body.lay-tabs input.ro{background:transparent;border-color:var(--line)}
body.lay-tabs .shoot{border:2px dashed #d1d5db;background:var(--surface)}
body.lay-tabs .shoot.done{border:2px solid var(--brand)}
body.lay-tabs .shoot .t{font-weight:800}
body.lay-tabs .rec{background:var(--brand);font-weight:800;box-shadow:var(--shadow-lg)}
body.lay-tabs .chip{border:0;background:var(--sunk);font-weight:600}
body.lay-tabs .note{border-radius:0 12px 12px 0}
body.lay-tabs .fold{border:0;background:var(--surface)}
body.lay-tabs .fold>summary{font-weight:800;color:var(--ink)}
body.lay-tabs .sp-row{border:0;box-shadow:none;background:var(--surface)}
body.lay-tabs .fuw,body.lay-tabs .trw,body.lay-tabs .spw,body.lay-tabs .slw{border:0;box-shadow:none;
  background:var(--surface)}
body.lay-tabs #fuBox,body.lay-tabs #trBox,body.lay-tabs #spBox,body.lay-tabs #slBox{scroll-margin-top:5rem}
body.lay-tabs .lookopt{border:0;background:var(--surface)}
body.lay-tabs #toast{bottom:calc(var(--tabs-h) + 5rem)}

body.lay-tabs .laytabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;background:#fff;
  border-top:1px solid var(--line);
  padding:.35rem max(.5rem,env(safe-area-inset-right,0px),calc((100vw - 560px)/2))
          calc(.4rem + env(safe-area-inset-bottom,0px))
          max(.5rem,env(safe-area-inset-left,0px),calc((100vw - 560px)/2))}
body.lay-tabs .laytab{min-height:3.5rem;border:0;background:none;padding:.2rem 0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  font-family:var(--ui);font-size:.75rem;font-weight:700;color:#4b5563;
  -webkit-tap-highlight-color:transparent}
body.lay-tabs .laytab svg{display:block}
body.lay-tabs .laytab[aria-current="page"]{color:var(--brand)}
body.lay-tabs .laytab:active{color:var(--brand-ink)}
body.lay-tabs .laytab-pl{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-top:-1.4rem;box-shadow:var(--shadow-lg)}
body.lay-tabs .laytab-pl svg{width:28px;height:28px}
body.lay-tabs .laytab.plus .laytab-l{color:#4b5563}
body.lay-tabs .laytab.plus[aria-current="page"] .laytab-l{color:var(--brand)}


/* ==========================================================================
   Look-only pieces (look.js DECOR). A stand-in replaces an app node on
   screen; the node it stands for is hidden, never removed.
   ========================================================================== */
body.lay-bento .lay-hid,body.lay-board .lay-hid,body.lay-rings .lay-hid,body.lay-deck .lay-hid,
body.lay-timeline .lay-hid,body.lay-route .lay-hid,body.lay-thread .lay-hid{display:none !important}


/* ==========================================================================
   4. BENTO: everything on one screen, in tiles.
   A grey ground and rounded tiles. On the home screen the newest tour is the
   big violet tile and the rest sit two to a row; boxes the add-ons put there
   (answers, requests, sellers) are full-width tiles. CSS only.
   ========================================================================== */
body.lay-bento{
  --bg:#f4f4f5; --surface:#ffffff; --sunk:#e4e4e7; --line:#e4e4e7; --line-2:#f4f4f5;
  --ink:#18181b; --ink-2:#3f3f46; --ink-3:#52525b;
  --brand:#5b21b6; --brand-ink:#4c1d95; --brand-soft:#ede9fe; --on-brand:#ffffff;
  --amber:#c2410c; --amber-soft:#fff7ed; --live:#dc2626;
  --shadow:none; --shadow-lg:0 8px 22px rgba(24,24,27,.22);
  --display:"Outfit",system-ui,-apple-system,sans-serif;
  --ui:"Outfit",system-ui,-apple-system,sans-serif;
  --r-sm:16px; --r-md:22px;
  color-scheme:light;
}
body.lay-bento .bar{border-bottom:0;margin-bottom:.4rem}
body.lay-bento .iconbtn{border:0;border-radius:50%;background:#18181b;color:#fff}
body.lay-bento .iconbtn img{border-radius:50%}
body.lay-bento .back{background:#fff;border-radius:22px;padding:0 1rem;color:var(--ink);font-weight:800}
body.lay-bento h1{font-weight:800;letter-spacing:-.02em}
body.lay-bento .label{font-weight:600;color:var(--ink-3);font-size:.8125rem}
body.lay-bento .btn{border-radius:16px;font-weight:800;min-height:3rem}
body.lay-bento .btn.ghost{background:#fff;border:0;color:var(--ink)}
body.lay-bento .btn.quiet{color:var(--ink-3)}
body.lay-bento .fab{background:#18181b;color:#fff;box-shadow:var(--shadow-lg);min-height:3.4rem}
body.lay-bento .fab[disabled]{background:var(--sunk);color:var(--ink-3)}

/* Home: a grid of tiles. */
body.lay-bento[data-screen="HomeView"] #view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;align-content:start}
body.lay-bento[data-screen="HomeView"] #view>*{grid-column:1/-1;margin-top:0;margin-bottom:0}
body.lay-bento[data-screen="HomeView"] #view>h1{margin-bottom:-.4rem}
body.lay-bento[data-screen="HomeView"] #view>.sub{margin-bottom:.2rem}
body.lay-bento[data-screen="HomeView"] #view>button.card.tap{grid-column:auto;position:relative;
  flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.5rem;
  min-height:7.5rem;padding:.9rem 1rem;border:0;border-radius:22px;background:#fff}
body.lay-bento[data-screen="HomeView"] #view>button.card.tap .ttl{font-weight:800;font-size:1.15rem;line-height:1.15}
body.lay-bento[data-screen="HomeView"] #view>button.card.tap .chev{position:absolute;top:.7rem;right:.9rem}
body.lay-bento[data-screen="HomeView"] #view>button.card.tap>div{padding-right:1rem}
body.lay-bento[data-screen="HomeView"] #view>:not(button.card.tap)+button.card.tap{grid-column:1/-1;
  min-height:11rem;background:var(--brand);color:#fff;padding:1.1rem 1.2rem}
body.lay-bento[data-screen="HomeView"] #view>:not(button.card.tap)+button.card.tap .ttl{font-size:1.9rem;line-height:1.05}
body.lay-bento[data-screen="HomeView"] #view>:not(button.card.tap)+button.card.tap .meta,
body.lay-bento[data-screen="HomeView"] #view>:not(button.card.tap)+button.card.tap .chev{color:#ede9fe}
body.lay-bento[data-screen="HomeView"] #view>:not(button.card.tap)+button.card.tap .pill{background:#fff;color:var(--brand)}
body.lay-bento .card.tap:active{background:var(--sunk)}
body.lay-bento[data-screen="HomeView"] #view>:not(button.card.tap)+button.card.tap:active{background:var(--brand-ink)}
body.lay-bento .pill{font-weight:800;background:var(--brand-soft);color:var(--brand-ink)}
body.lay-bento .empty{border:2px dashed #d4d4d8;border-radius:22px;background:transparent}
body.lay-bento .nagline{background:#fff;border-radius:16px;padding:.6rem 1rem;color:var(--brand-ink)}
body.lay-bento .coach{border:0;border-radius:22px;background:#fde68a}
body.lay-bento .coach span{color:#3f3f46}
body.lay-bento .samplelink{border:0;border-radius:22px;background:#fff}
body.lay-bento .fuw{background:#fde68a;border:0;border-radius:22px;box-shadow:none}
body.lay-bento .fuw h3,body.lay-bento .trw h3,body.lay-bento .spw h3,body.lay-bento .slw h3,body.lay-bento .pxw h3{
  letter-spacing:0;text-transform:none;font-size:.8125rem;color:#3f3f46}
body.lay-bento .fuw .furow{border-top-color:rgba(24,24,27,.12)}
body.lay-bento .fuw .fusub{color:#27272a}
body.lay-bento .trw,body.lay-bento .spw{background:#fff;border:0;border-radius:22px;box-shadow:none}
body.lay-bento .slw{background:#d1fae5;border:0;border-radius:22px;box-shadow:none}
body.lay-bento .pxw{background:#fff;border:0;border-radius:22px;box-shadow:none}

/* Tour: each home a tile with a big picture; a home with nothing on it is
   dashed orange, like the mock-up. */
body.lay-bento[data-screen="TourView"] #view>button.card.tap{border:0;border-radius:22px;padding:.7rem;
  min-height:6.2rem;gap:1rem;margin-bottom:.65rem}
body.lay-bento[data-screen="TourView"] #view>button.card.tap>img{width:5.2rem !important;height:5.2rem !important;
  border-radius:16px !important}
body.lay-bento[data-screen="TourView"] #view>button.card.tap>.shoot-ic{width:5.2rem;height:5.2rem;border-radius:16px;
  background:#ddd6fe;flex:0 0 auto}
body.lay-bento[data-screen="TourView"] #view>button.card.tap .ttl{font-weight:800}
body.lay-bento[data-screen="TourView"] #view>button.card.tap:has(.gap){background:var(--amber-soft);
  box-shadow:inset 0 0 0 2px #fb923c}
body.lay-bento .gap{color:var(--amber);font-weight:800}
body.lay-bento[data-screen="TourView"] #view>button.card.tap:has(+.pxrow){margin-bottom:0;
  border-bottom-left-radius:0;border-bottom-right-radius:0}
body.lay-bento .pxrow{background:#fff;border-radius:0 0 22px 22px;margin:0 0 .65rem;padding:0 1rem}
body.lay-bento[data-screen="TourView"] #view>button.card.tap:has(.gap)+.pxrow{background:var(--amber-soft)}

/* Capture: every part a tile. */
body.lay-bento input[type=text],body.lay-bento input[type=tel],body.lay-bento input[type=email],
body.lay-bento input[type=number],body.lay-bento input[type=date],body.lay-bento input[type=time],
body.lay-bento textarea,body.lay-bento select{background:#fff;border:0;border-radius:16px}
body.lay-bento input.ro{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
body.lay-bento .shoot{border:0;border-radius:22px;background:#fff;min-height:4.5rem}
body.lay-bento .shoot .ic{background:#ede9fe;color:var(--brand);border-radius:14px}
body.lay-bento .shoot .t{font-weight:800}
body.lay-bento .shoot.done{background:#ede9fe;border:0}
body.lay-bento .shoot.done .ic{background:var(--brand);color:#fff}
body.lay-bento .shoot.done .s{color:var(--brand-ink)}
body.lay-bento .thumb{border-radius:14px}
body.lay-bento .rec-wrap{background:#fff;border-radius:22px;padding:1rem}
body.lay-bento .rec{width:100%;height:3.6rem;border-radius:16px;background:var(--brand);flex-direction:row;gap:.6rem;
  font-size:var(--t-md);font-weight:800;box-shadow:none}
body.lay-bento .rec .dot{width:1rem;height:1rem}
body.lay-bento .rec.on{background:#dc2626}
body.lay-bento .chip{border:0;background:#fff;font-weight:600}
body.lay-bento .chips .chip.up{background:#d1fae5;color:#065f46}
body.lay-bento .chip.down{background:#ffedd5;color:#9a3412}
body.lay-bento .chip.up:before{content:"+ "}
body.lay-bento .chip.down:before{content:"\2212  "}
body.lay-bento .note{border-radius:16px;border-left:0;background:#fff7ed}
body.lay-bento .fold{border:0;border-radius:22px;background:#fff}
body.lay-bento .fold>summary{font-weight:800;color:var(--ink)}
body.lay-bento .sp-row{border:0;border-radius:16px;box-shadow:none}
body.lay-bento .sheetpin{background:var(--bg)}
body.lay-bento .lookopt{border:0;border-radius:16px;background:#fff}


/* ---- the sideways row look.js draws (Board columns, Deck cards) ---- */
body.lay-board .laysnap,body.lay-deck .laysnap{margin:0 -1.1rem .9rem}
body.lay-board .laysnap-row,body.lay-deck .laysnap-row{display:flex;gap:.7rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding:0 1.1rem;padding:.2rem 1.1rem .4rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
body.lay-board .laysnap-row::-webkit-scrollbar,body.lay-deck .laysnap-row::-webkit-scrollbar{display:none}
body.lay-board .laysnap-row>*,body.lay-deck .laysnap-row>*{scroll-snap-align:start;flex:0 0 86%;min-width:0}
body.lay-board .laysnap-dots,body.lay-deck .laysnap-dots{display:flex;justify-content:center;gap:.35rem;margin-top:.5rem}
body.lay-board .laysnap-dots i,body.lay-deck .laysnap-dots i{width:.45rem;height:.45rem;border-radius:99px;
  background:var(--line);transition:width .2s}
body.lay-board .laysnap-dots i.on,body.lay-deck .laysnap-dots i.on{width:1.4rem;background:var(--brand)}
body.lay-board .laysnap-cap,body.lay-deck .laysnap-cap{text-align:center;font-size:var(--t-sm);color:var(--ink-3);
  margin:.35rem 0 0}
@media (prefers-reduced-motion:reduce){body.lay-board .laysnap-dots i,body.lay-deck .laysnap-dots i{transition:none}}


/* ==========================================================================
   10. BOARD: tours move left to right as they progress.
   Mint and deep green. On the home screen the tours sit in three columns,
   Today, Sent and Answered, one column wide on a phone, swiped sideways
   (look.js draws the board out of stand-ins for the tour rows).
   ========================================================================== */
body.lay-board{
  --bg:#f0fdf4; --surface:#ffffff; --sunk:#dcfce7; --line:#bbf7d0; --line-2:#dcfce7;
  --ink:#022c22; --ink-2:#14532d; --ink-3:#3f6b55;
  --brand:#047857; --brand-ink:#065f46; --brand-soft:#d1fae5; --on-brand:#ffffff;
  --amber:#b45309; --amber-soft:#fef3c7; --live:#dc2626;
  --shadow:none; --shadow-lg:0 8px 20px rgba(2,44,34,.25);
  --display:"Noto Sans",system-ui,-apple-system,sans-serif;
  --ui:"Noto Sans",system-ui,-apple-system,sans-serif;
  --r-sm:12px; --r-md:16px;
  color-scheme:light;
}
body.lay-board .bar{border-bottom:0;margin-bottom:.3rem}
body.lay-board .iconbtn{border:0;border-radius:50%;background:#fff;color:var(--ink)}
body.lay-board .iconbtn img{border-radius:50%}
body.lay-board .back{background:#fff;border-radius:12px;padding:0 .9rem;color:var(--ink);font-weight:800}
body.lay-board h1{font-weight:800;letter-spacing:-.02em}
body.lay-board .label{font-weight:800;color:var(--brand-ink);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
body.lay-board .label span{text-transform:none;letter-spacing:0;font-weight:600}
body.lay-board .btn{border-radius:12px;font-weight:800;min-height:3rem}
body.lay-board .btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
body.lay-board .btn.quiet{color:var(--ink-3)}
body.lay-board .fab{background:var(--ink);color:#fff}
body.lay-board .fab[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-board .card{border:0;background:#fff}
body.lay-board .card.tap,body.lay-board .laytap{min-height:3.75rem}
body.lay-board .card .ttl{font-weight:800}
body.lay-board .card.tap:has(.gap){box-shadow:inset 0 0 0 2px #f59e0b;background:#fffbeb}
body.lay-board .gap{color:var(--amber);font-weight:800}
body.lay-board .pill{font-weight:800;background:var(--brand-soft);color:var(--brand-ink)}
body.lay-board .empty{border:2px dashed var(--line);border-radius:16px}
body.lay-board .coach{border:0;border-radius:16px;background:#fff}
body.lay-board .nagline{color:var(--brand-ink)}
body.lay-board .fuw,body.lay-board .trw,body.lay-board .spw,body.lay-board .slw,body.lay-board .pxw{border:0;
  box-shadow:none;background:#fff;border-radius:16px}

/* The columns. */
body.lay-board .laycol{background:#d1fae5;border-radius:18px;padding:.75rem .7rem .4rem;min-height:14rem}
body.lay-board .laycol-answered{background:#a7f3d0}
body.lay-board .laycol-h{display:flex;justify-content:space-between;align-items:center;margin:0 .2rem .6rem;
  font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
body.lay-board .laycol-h span{font-variant-numeric:tabular-nums}
body.lay-board .laycol-none{margin:.2rem;padding:.8rem;border-radius:12px;background:rgba(255,255,255,.6);
  color:var(--ink-2);font-size:var(--t-sm)}
body.lay-board .laycol .laytap{cursor:pointer;display:flex;align-items:center;gap:.6rem;text-align:left;width:100%;
  font-family:var(--ui);font-size:var(--t-md);color:var(--ink);background:#fff;border:0;border-radius:14px;
  padding:.65rem .8rem;margin:0 0 .5rem;flex-wrap:wrap}
body.lay-board .laycol .laytap:active{background:var(--sunk)}
body.lay-board .laycol .laytap>div{flex:1 1 8rem}
body.lay-board .laycol .laytap .ttl{font-size:1rem;line-height:1.25}
body.lay-board .laycol .laytap .meta{font-size:var(--t-sm);color:var(--ink-3)}

/* Tour and capture. */
body.lay-board[data-screen="TourView"] #view>button.card.tap{padding:.7rem .8rem}
body.lay-board[data-screen="TourView"] #view>button.card.tap>img{border-radius:10px !important}
body.lay-board[data-screen="TourView"] #view>button.card.tap>.shoot-ic{width:3.2rem;height:3.2rem;border-radius:10px;
  background:#047857;flex:0 0 auto;opacity:.85}
body.lay-board input[type=text],body.lay-board input[type=tel],body.lay-board input[type=email],
body.lay-board input[type=number],body.lay-board input[type=date],body.lay-board input[type=time],
body.lay-board textarea,body.lay-board select{background:#fff;border:1px solid var(--line);border-radius:12px}
body.lay-board[data-screen="HomeEditView"] .bar{background:#064e3b;margin:0 -1.1rem;padding-left:1.1rem;
  padding-right:1.1rem}
body.lay-board[data-screen="HomeEditView"] .bar .back{background:rgba(255,255,255,.14);color:#fff}
body.lay-board[data-screen="HomeEditView"] .bar .iconbtn{background:rgba(255,255,255,.14);color:#fff}
body.lay-board[data-screen="HomeEditView"] #view>h1:first-child{background:#064e3b;color:#fff;margin:0 -1.1rem;
  padding:.6rem 1.1rem .4rem}
body.lay-board[data-screen="HomeEditView"] #view>h1:first-child+.sub{background:#064e3b;color:#a7f3d0;
  margin:0 -1.1rem 1.2rem;padding:0 1.1rem 1.2rem;border-radius:0 0 20px 20px}
body.lay-board .shoot{border:2px dashed #6ee7b7;background:#fff;border-radius:16px}
body.lay-board .shoot .t{font-weight:800}
body.lay-board .shoot .ic{background:var(--brand-soft);color:var(--brand)}
body.lay-board .shoot.done{border:2px solid var(--brand);background:var(--brand-soft)}
body.lay-board .rec{background:var(--brand);box-shadow:0 8px 20px rgba(4,120,87,.3)}
body.lay-board .rec.on{background:#dc2626}
body.lay-board .chip{border:0;background:#fff;font-weight:600}
body.lay-board .chips .chip.up{background:#d1fae5;color:#065f46}
body.lay-board .chip.down{background:#fee2e2;color:#991b1b}
body.lay-board .chip.up:before{content:"+ "}
body.lay-board .chip.down:before{content:"\2212  "}
body.lay-board .note{border-radius:0 12px 12px 0}
body.lay-board .fold{border:0;background:#fff;border-radius:16px}
body.lay-board .fold>summary{font-weight:800;color:var(--ink)}
body.lay-board .sp-row{border:0;box-shadow:none}
body.lay-board .lookopt{border:0;background:#fff}


/* ==========================================================================
   9. RINGS: every home shows what is left to capture.
   Periwinkle ground, indigo and pink. look.js draws the rings: four parts a
   home (sheet, photos, voice or note, chips), one part a home for a tour.
   ========================================================================== */
body.lay-rings{
  --bg:#eef2ff; --surface:#ffffff; --sunk:#e0e7ff; --line:#c7d2fe; --line-2:#e0e7ff;
  --ink:#1e1b4b; --ink-2:#312e81; --ink-3:#4c4f8a;
  --brand:#4f46e5; --brand-ink:#3730a3; --brand-soft:#e0e7ff; --on-brand:#ffffff;
  --amber:#be185d; --amber-soft:#fce7f3; --live:#db2777;
  --shadow:none; --shadow-lg:0 8px 22px rgba(30,27,75,.25);
  --display:"Sora",system-ui,-apple-system,sans-serif;
  --ui:"Sora",system-ui,-apple-system,sans-serif;
  --r-sm:16px; --r-md:20px;
  color-scheme:light;
}
body.lay-rings .bar{border-bottom:0;margin-bottom:.3rem}
body.lay-rings .iconbtn{border:0;border-radius:50%;background:#fff;color:var(--ink)}
body.lay-rings .iconbtn img{border-radius:50%}
body.lay-rings .back{background:#fff;border-radius:22px;padding:0 1rem;color:var(--ink);font-weight:800}
body.lay-rings h1{font-weight:800;letter-spacing:-.02em}
body.lay-rings .label{font-weight:600;color:var(--ink-3)}
body.lay-rings .btn{border-radius:999px;font-weight:800;min-height:3rem}
body.lay-rings .btn.ghost{background:#fff;border:0;color:var(--ink)}
body.lay-rings .btn.quiet{color:var(--ink-3)}
body.lay-rings .fab{background:var(--ink);color:#fff}
body.lay-rings .fab[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-rings #buildRecap{background:var(--brand)}
body.lay-rings .card{border:0;background:#fff;border-radius:20px}
body.lay-rings .card.tap{min-height:4.5rem;padding:.75rem .9rem}
body.lay-rings .card .ttl{font-weight:800}
body.lay-rings .card .meta{color:var(--brand)}
body.lay-rings .card.tap:has(.layring.low){box-shadow:inset 0 0 0 2px #f472b6}
body.lay-rings .gap{color:var(--amber);font-weight:600}
body.lay-rings .pill{font-weight:800;background:var(--brand-soft);color:var(--brand-ink)}
body.lay-rings .empty{border:2px dashed #a5b4fc;border-radius:20px}
body.lay-rings .coach,body.lay-rings .samplelink{border:0;border-radius:20px;background:#fff}
body.lay-rings .nagline{color:var(--brand-ink)}
body.lay-rings .fuw,body.lay-rings .trw,body.lay-rings .spw,body.lay-rings .slw,body.lay-rings .pxw{border:0;
  box-shadow:none;background:#fff;border-radius:20px}
/* The ring takes the thumbnail's place; the photo is on the home itself. */
body.lay-rings[data-screen="TourView"] #view>button.card.tap:has(.layring)>img,
body.lay-rings[data-screen="TourView"] #view>button.card.tap:has(.layring)>.shoot-ic{display:none}

/* The rings. */
body.lay-rings .layring{flex:0 0 auto;display:block;line-height:0}
body.lay-rings .layring svg,body.lay-rings .layring-hero svg,body.lay-rings .layring-cap svg{display:block;overflow:visible}
body.lay-rings .layring circle.off,body.lay-rings .layring-hero circle.off,body.lay-rings .layring-cap circle.off{stroke:#c7d2fe}
body.lay-rings .layring circle.on,body.lay-rings .layring-hero circle.on,body.lay-rings .layring-cap circle.on{stroke:var(--brand)}
body.lay-rings .layring.low circle.on{stroke:#db2777}
body.lay-rings .layring text,body.lay-rings .layring-hero text,body.lay-rings .layring-cap text{fill:var(--ink);
  font-family:var(--ui);font-weight:800;font-size:10px}
body.lay-rings .layring-hero text{font-size:9px}
body.lay-rings .layring-key{margin:-1rem 0 1.2rem;color:var(--brand-ink);font-size:var(--t-sm)}
body.lay-rings .layring-hero{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:0 0 1.2rem;
  padding:1rem;background:#fff;border-radius:24px}
body.lay-rings .layring-hl{text-align:center;color:var(--ink-3);font-size:var(--t-sm)}
body.lay-rings .layring-hl b{display:block;color:var(--ink);font-size:var(--t-lg)}
body.lay-rings .layring-cap{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;padding:.8rem 1rem;
  background:#fff;border-radius:24px}
body.lay-rings .layring-parts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
body.lay-rings .layring-parts li{padding:.3rem .65rem;border-radius:999px;background:var(--sunk);color:var(--ink-2);
  font-size:var(--t-sm);font-weight:600}
body.lay-rings .layring-parts li.on{background:var(--brand);color:#fff}

/* Capture. */
body.lay-rings input[type=text],body.lay-rings input[type=tel],body.lay-rings input[type=email],
body.lay-rings input[type=number],body.lay-rings input[type=date],body.lay-rings input[type=time],
body.lay-rings textarea,body.lay-rings select{background:#fff;border:1px solid var(--line);border-radius:16px}
body.lay-rings .shoot{border:2px dashed #a5b4fc;background:#fff;border-radius:20px}
body.lay-rings .shoot .t{font-weight:800}
body.lay-rings .shoot .ic{background:var(--brand-soft);color:var(--brand);border-radius:50%}
body.lay-rings .shoot.done{border:2px solid var(--brand);background:var(--brand-soft)}
body.lay-rings .rec{background:#be185d;width:9rem;height:9rem;box-shadow:0 10px 24px rgba(236,72,153,.35);font-weight:800}
body.lay-rings .rec.on{background:#831843}
body.lay-rings .chip{border:0;background:#fff;font-weight:600}
body.lay-rings .chips .chip.up{background:var(--brand-soft);color:var(--brand-ink)}
body.lay-rings .chip.down{background:#fce7f3;color:#9d174d}
body.lay-rings .chip.up:before{content:"+ "}
body.lay-rings .chip.down:before{content:"\2212  "}
body.lay-rings .note{border-radius:0 16px 16px 0}
body.lay-rings .fold{border:0;background:#fff;border-radius:20px}
body.lay-rings .fold>summary{font-weight:800;color:var(--ink)}
body.lay-rings .sp-row{border:0;box-shadow:none}
body.lay-rings .lookopt{border:0;background:#fff}


/* ==========================================================================
   2. DECK: one big card at a time.
   Warm paper and rust. Tours, and a tour's homes, are big cards swiped
   sideways (look.js); everything else is the app's own, in this dress.
   ========================================================================== */
body.lay-deck{
  --bg:#f5efe6; --surface:#ffffff; --sunk:#ebe2d4; --line:#e2d6c4; --line-2:#efe6d8;
  --ink:#241a14; --ink-2:#4a3a2f; --ink-3:#6b5a4e;
  --brand:#7c2d12; --brand-ink:#7c2d12; --brand-soft:#f6e3d6; --on-brand:#ffffff;
  --amber:#b45309; --amber-soft:#fdf0dc; --live:#b91c1c;
  --shadow:none; --shadow-lg:0 10px 26px rgba(36,26,20,.22);
  --display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --ui:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --r-sm:16px; --r-md:24px;
  color-scheme:light;
}
body.lay-deck .bar{border-bottom:0;margin-bottom:.3rem}
body.lay-deck .iconbtn{border:0;border-radius:50%;background:var(--ink);color:#fff}
body.lay-deck .iconbtn img{border-radius:50%}
body.lay-deck .back{background:#fff;border-radius:22px;padding:0 1rem;color:var(--ink);font-weight:800}
body.lay-deck h1{font-weight:800;letter-spacing:-.025em}
body.lay-deck .label{font-weight:600;color:var(--ink-3)}
body.lay-deck .btn{border-radius:16px;font-weight:800;min-height:3rem}
body.lay-deck .btn.ghost{background:#fff;border:0;color:var(--ink)}
body.lay-deck .btn.quiet{color:var(--ink-3)}
body.lay-deck .fab{background:var(--ink);color:#fff}
body.lay-deck .fab[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-deck .card{border:0;background:#fff;border-radius:24px}
body.lay-deck .card .ttl{font-weight:800}
body.lay-deck .gap{color:var(--amber);font-weight:700}
body.lay-deck .pill{font-weight:800}
body.lay-deck .empty{border:2px dashed #d6c7b2;border-radius:24px}
body.lay-deck .coach,body.lay-deck .samplelink{border:0;border-radius:24px;background:#fff}
body.lay-deck .nagline{color:var(--brand-ink)}
body.lay-deck .fuw,body.lay-deck .trw,body.lay-deck .spw,body.lay-deck .slw,body.lay-deck .pxw{border:0;
  box-shadow:none;background:#fff;border-radius:24px}
body.lay-deck .laysnap-row>*{flex-basis:84%}
body.lay-deck .laysnap-row{padding-bottom:2rem}
body.lay-deck .laysnap-dots{margin-top:-.6rem}

/* A tour card. */
body.lay-deck .laydeckcard{cursor:pointer;width:100%;min-height:19rem;border:0;border-radius:28px;
  background:var(--brand);color:#fff;padding:1.3rem 1.3rem 1.2rem;margin:0;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;font-family:var(--ui);
  box-shadow:0 14px 28px rgba(124,45,18,.28)}
body.lay-deck .laydeckcard:active{background:#5c210d}
body.lay-deck .laydeckcard>div{flex:1}
body.lay-deck .laydeckcard .ttl{font-size:2.1rem;line-height:1.02;font-weight:800;letter-spacing:-.02em;color:#fff}
body.lay-deck .laydeckcard .meta{color:#fde3d3;font-size:var(--t-md);margin-top:.45rem}
body.lay-deck .laydeckcard .pill{background:#fff;color:var(--brand)}
body.lay-deck .laydeckcard .chev{display:none}
body.lay-deck .laydeck-open{align-self:stretch;text-align:center;background:#fff;color:var(--brand);
  border-radius:16px;padding:.8rem;font-weight:800;min-height:3rem;display:flex;align-items:center;justify-content:center}

/* A home card. */
body.lay-deck .laydeck-n{display:block;font-size:var(--t-sm);color:var(--ink-3);margin:0 .3rem .35rem}
body.lay-deck .laydeckhome{cursor:pointer;width:100%;border:0;border-radius:26px;background:#fff;margin:0;
  padding:0 0 1.1rem;text-align:left;display:flex;flex-direction:column;align-items:stretch;gap:.8rem;
  overflow:hidden;font-family:var(--ui);color:var(--ink);box-shadow:0 10px 24px rgba(36,26,20,.12)}
body.lay-deck .laydeckhome:active{background:var(--sunk)}
body.lay-deck .laydeckhome>img{width:100% !important;height:12rem !important;border-radius:0 !important;object-fit:cover}
body.lay-deck .laydeckhome>.shoot-ic{width:100%;height:12rem;background:#c9b29a}
body.lay-deck .laydeckhome>div{padding:0 1.1rem}
body.lay-deck .laydeckhome .ttl{font-size:1.35rem;line-height:1.15}
body.lay-deck .laydeckhome .meta{color:var(--ink-3)}
body.lay-deck .laydeckhome .chev{display:none}
body.lay-deck .laydeck-slide .pxrow{margin:.3rem .4rem 0}
body.lay-deck .laydeck-flip{display:flex;margin:0 0 .6rem auto;width:auto;background:#fff}

/* Capture: each part a card on the paper. */
body.lay-deck input[type=text],body.lay-deck input[type=tel],body.lay-deck input[type=email],
body.lay-deck input[type=number],body.lay-deck input[type=date],body.lay-deck input[type=time],
body.lay-deck textarea,body.lay-deck select{background:#fff;border:1px solid var(--line);border-radius:14px}
body.lay-deck .shoot{border:0;background:#fff;border-radius:24px;min-height:4.5rem}
body.lay-deck .shoot .t{font-weight:800}
body.lay-deck .shoot .ic{background:var(--brand-soft);color:var(--brand)}
body.lay-deck .shoot.done{background:var(--brand-soft)}
body.lay-deck .rec-wrap{background:#fff;border-radius:28px;padding:1.4rem 1rem 1rem}
body.lay-deck .rec{background:var(--brand);width:9rem;height:9rem;font-weight:800;box-shadow:none}
body.lay-deck .rec.on{background:#b91c1c}
body.lay-deck .chip{border:0;background:#fff;font-weight:600}
body.lay-deck .chips .chip.up{background:#e3f1e5;color:#1f5130}
body.lay-deck .chip.down{background:#f9e0d6;color:#8a2c0d}
body.lay-deck .note{border-radius:0 16px 16px 0}
body.lay-deck .fold{border:0;background:#fff;border-radius:24px}
body.lay-deck .fold>summary{font-weight:800;color:var(--ink)}
body.lay-deck .sp-row{border:0;box-shadow:none}
body.lay-deck .lookopt{border:0;background:#fff}


/* ==========================================================================
   3. DAY TIMELINE: your morning by the clock.
   Slate and blue, times in a monospace column. look.js lays timed tours on
   the axis and the rest under "Any time"; a tour's homes are stops on a rail.
   ========================================================================== */
body.lay-timeline{
  --bg:#f8fafc; --surface:#ffffff; --sunk:#e2e8f0; --line:#e2e8f0; --line-2:#f1f5f9;
  --ink:#0f172a; --ink-2:#334155; --ink-3:#475569;
  --brand:#1d4ed8; --brand-ink:#1e40af; --brand-soft:#dbeafe; --on-brand:#ffffff;
  --amber:#b45309; --amber-soft:#fff7ed; --live:#dc2626;
  --shadow:none; --shadow-lg:0 8px 20px rgba(15,23,42,.22);
  --display:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --ui:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:10px; --r-md:14px;
  color-scheme:light;
}
body.lay-timeline .bar{border-bottom:0;margin-bottom:.3rem}
body.lay-timeline .iconbtn{border:0;border-radius:50%;background:var(--sunk);color:var(--ink)}
body.lay-timeline .iconbtn img{border-radius:50%}
body.lay-timeline .back{background:var(--sunk);border-radius:10px;padding:0 .9rem;color:var(--ink);font-weight:700}
body.lay-timeline h1{font-weight:700;letter-spacing:-.02em}
body.lay-timeline .label{font-weight:600;color:var(--ink-3)}
body.lay-timeline .btn{border-radius:10px;font-weight:700;min-height:3rem}
body.lay-timeline .btn.ghost{background:var(--sunk);border:0;color:var(--ink)}
body.lay-timeline .btn.quiet{color:var(--ink-3)}
body.lay-timeline .fab{background:var(--ink);color:#fff}
body.lay-timeline .fab[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-timeline #buildRecap{background:var(--brand)}
body.lay-timeline .card{border:1px solid var(--line);background:#fff;border-radius:14px}
body.lay-timeline .card .ttl{font-weight:700}
body.lay-timeline .gap{color:var(--amber);font-weight:700}
body.lay-timeline .pill{font-weight:700;border-radius:8px}
body.lay-timeline .empty{border:2px dashed #94a3b8;border-radius:14px}
body.lay-timeline .coach,body.lay-timeline .samplelink{border:1px solid var(--line);border-radius:14px;background:#fff}
body.lay-timeline .nagline{color:var(--brand-ink)}
body.lay-timeline .fuw,body.lay-timeline .trw,body.lay-timeline .spw,body.lay-timeline .slw,body.lay-timeline .pxw{
  box-shadow:none;border-left:3px solid #f59e0b;border-radius:0 14px 14px 0}

/* The axis. */
body.lay-timeline .laytl{margin:0 0 1rem}
body.lay-timeline .laytl-day{margin:0 0 1rem}
body.lay-timeline .laytl-h{margin:0 0 .5rem;padding-bottom:.35rem;border-bottom:1px solid var(--line);
  font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
body.lay-timeline .laytl-row{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.6rem;align-items:start;
  margin-bottom:.55rem}
body.lay-timeline .laytl-time{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);padding-top:.85rem;
  text-align:right;line-height:1.3}
body.lay-timeline .laytl-time small{display:block;color:var(--ink-3);font-size:.75rem}
body.lay-timeline .laytl-none{color:var(--ink-3)}
body.lay-timeline .laytl-card{cursor:pointer;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;width:100%;
  text-align:left;font-family:var(--ui);font-size:var(--t-md);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem;margin:0;min-height:3.5rem}
body.lay-timeline .laytl-card>div{flex:1 1 8rem}
body.lay-timeline .laytl-card:active{background:var(--sunk)}
body.lay-timeline .laytl-day:not(.laytl-any) .laytl-card{background:var(--brand);border-color:var(--brand);color:#fff}
body.lay-timeline .laytl-day:not(.laytl-any) .laytl-card .meta,
body.lay-timeline .laytl-day:not(.laytl-any) .laytl-card .chev{color:#dbeafe}
body.lay-timeline .laytl-day:not(.laytl-any) .laytl-card .pill{background:rgba(255,255,255,.2);color:#fff}
body.lay-timeline .laytl-day:not(.laytl-any) .laytl-card:active{background:var(--brand-ink)}

/* The tour: homes as stops on a rail. */
body.lay-timeline[data-screen="TourView"] #view{counter-reset:laytl}
body.lay-timeline[data-screen="TourView"] #view>button.card.tap{counter-increment:laytl;position:relative;
  margin-left:3rem;width:calc(100% - 3rem);overflow:visible}
body.lay-timeline[data-screen="TourView"] #view>button.card.tap:before{content:counter(laytl);position:absolute;
  left:-2.85rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border-radius:50%;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:.875rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;z-index:1}
body.lay-timeline[data-screen="TourView"] #view>button.card.tap:after{content:"";position:absolute;left:-1.9rem;
  top:-1rem;bottom:-1.6rem;border-left:2px dotted #94a3b8}
body.lay-timeline[data-screen="TourView"] #view>button.card.tap:has(.gap){background:var(--amber-soft);border-color:#fdba74}
body.lay-timeline[data-screen="TourView"] #view>button.card.tap:has(.gap):before{background:var(--amber)}
body.lay-timeline[data-screen="TourView"] #view>.pxrow{margin-left:3rem}

/* Capture: the home's name on a dark band, like a stop on the clock. */
body.lay-timeline[data-screen="HomeEditView"] #view>h1:first-child{background:var(--ink);color:#fff;
  border-radius:14px 14px 0 0;padding:.9rem 1rem .3rem;margin:0}
body.lay-timeline[data-screen="HomeEditView"] #view>h1:first-child+.sub{background:var(--ink);color:#cbd5e1;
  border-radius:0 0 14px 14px;padding:0 1rem .9rem;margin-bottom:1.2rem;font-size:var(--t-sm)}
body.lay-timeline input[type=text],body.lay-timeline input[type=tel],body.lay-timeline input[type=email],
body.lay-timeline input[type=number],body.lay-timeline input[type=date],body.lay-timeline input[type=time],
body.lay-timeline textarea,body.lay-timeline select{background:#fff;border:1px solid #cbd5e1;border-radius:10px}
body.lay-timeline .shoot{border:1px dashed #94a3b8;background:#fff;border-radius:14px}
body.lay-timeline .shoot .t{font-weight:700}
body.lay-timeline .shoot .ic{background:var(--brand-soft);color:var(--brand)}
body.lay-timeline .shoot.done{border:1px solid var(--brand);background:var(--brand-soft)}
body.lay-timeline .rec{background:var(--brand);width:100%;height:3.6rem;border-radius:12px;flex-direction:row;gap:.6rem;
  font-size:var(--t-md);font-weight:700;box-shadow:none}
body.lay-timeline .rec .dot{width:1rem;height:1rem}
body.lay-timeline .rec.on{background:#dc2626}
body.lay-timeline .rec-time{font-family:var(--mono)}
body.lay-timeline .chip{border:0;background:var(--sunk);font-weight:600}
body.lay-timeline .chips .chip.up{background:#dcfce7;color:#166534}
body.lay-timeline .chip.down{background:#ffedd5;color:#9a3412}
body.lay-timeline .chip.up:before{content:"+ "}
body.lay-timeline .chip.down:before{content:"\2212  "}
body.lay-timeline .fold{border:1px solid var(--line);background:#fff;border-radius:14px}
body.lay-timeline .fold>summary{font-weight:700;color:var(--ink)}
body.lay-timeline .sp-row{box-shadow:none}
body.lay-timeline .lookopt{background:#fff}


/* ==========================================================================
   1. ROUTE: the map is the app.
   Sage and forest green with an orange action. look.js puts the route on
   top (the recap's own map once a tour has been sent, a schematic before);
   the tour sits under it like a sheet. The capture screen goes dark, for the
   driveway in daylight.
   ========================================================================== */
body.lay-route{
  --bg:#ffffff; --surface:#ffffff; --sunk:#e8ede9; --line:#dfe6e1; --line-2:#eef2ef;
  --ink:#13201b; --ink-2:#2e3d36; --ink-3:#52615a;
  --brand:#0f5c4a; --brand-ink:#0f5c4a; --brand-soft:#e3efe9; --on-brand:#ffffff;
  --amber:#b8410c; --amber-soft:#fdebe1; --live:#c2410c;
  --shadow:none; --shadow-lg:0 8px 22px rgba(19,32,27,.22);
  --display:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --ui:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --r-sm:12px; --r-md:16px;
  color-scheme:light;
}
body.lay-route .bar{border-bottom:0;margin-bottom:.3rem}
body.lay-route .iconbtn{border:0;border-radius:50%;background:var(--sunk);color:var(--ink)}
body.lay-route .iconbtn img{border-radius:50%}
body.lay-route .back{background:var(--sunk);border-radius:22px;padding:0 1rem;color:var(--ink);font-weight:700}
body.lay-route h1{font-weight:700;letter-spacing:-.02em}
body.lay-route .label{font-weight:600;color:var(--ink-3)}
body.lay-route .btn{border-radius:12px;font-weight:700;min-height:3rem}
body.lay-route .btn.ghost{background:var(--sunk);border:0;color:var(--ink)}
body.lay-route .btn.quiet{color:var(--ink-3)}
body.lay-route .fab{background:#c2410c;color:#fff}
body.lay-route .fab[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-route #buildRecap{background:var(--brand)}
/* Lists are rows on the sheet, not boxes. */
body.lay-route .card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
body.lay-route .card.tap{padding:.8rem .2rem;margin:0;min-height:3.5rem}
body.lay-route .card.tap:active{background:var(--sunk)}
body.lay-route .card .ttl{font-weight:700}
body.lay-route .card.tap>img{border-radius:10px !important;width:3.6rem !important;height:3.6rem !important}
body.lay-route .card.tap>.shoot-ic{width:3.6rem;height:3.6rem;border-radius:10px;background:#c8d5cd;flex:0 0 auto}
body.lay-route .card.tap:has(.gap)>.shoot-ic{background:transparent;border:2px dashed #c2410c}
body.lay-route .gap{color:var(--amber);font-weight:700}
body.lay-route .pill{font-weight:700;background:var(--brand-soft);color:var(--brand-ink)}
body.lay-route .pxrow{margin:.2rem 0 .3rem}
body.lay-route .empty{border:2px dashed #b9c8bf;border-radius:16px}
body.lay-route .coach,body.lay-route .samplelink{border:0;border-radius:16px;background:var(--sunk)}
body.lay-route .nagline{color:var(--brand-ink)}
body.lay-route .fuw,body.lay-route .trw,body.lay-route .spw,body.lay-route .slw,body.lay-route .pxw{border:0;
  box-shadow:none;background:var(--sunk);border-radius:16px}

/* The map, and the sheet edge under it. */
body.lay-route .layroute-map{position:relative;margin:0 -1.1rem 0;background:#e6ece7;overflow:hidden;
  border-radius:0 0 28px 28px;min-height:11rem;display:flex;flex-direction:column;justify-content:center}
body.lay-route .layroute-map:after{content:"";display:block;height:1.6rem}
body.lay-route .layroute-map svg{display:block;width:100%;height:auto;max-height:15rem}
body.lay-route .layroute-map img{display:block;width:100%;height:13rem;object-fit:cover}
body.lay-route .layroute-map .st{stroke:#fff;stroke-width:9;fill:none}
body.lay-route .layroute-map .rt{stroke:#0f5c4a;stroke-width:3;stroke-dasharray:7 6;fill:none;stroke-linecap:round}
body.lay-route .layroute-map .pin path{fill:#0f5c4a}
body.lay-route .layroute-map .pin.gap path{fill:#c2410c}
body.lay-route .layroute-map .pin text{fill:#fff;font-family:var(--ui);font-size:12px;font-weight:700}
body.lay-route .layroute-note{position:absolute;right:1.1rem;bottom:.35rem;font-size:.75rem;color:var(--ink-2)}
body.lay-route .layroute-tag{position:absolute;left:1.1rem;top:.7rem;background:#fff;border-radius:999px;
  padding:.35rem .8rem;font-size:var(--t-sm);font-weight:700;color:var(--ink);box-shadow:0 2px 8px rgba(19,32,27,.12)}
body.lay-route .layroute-map+h1{margin-top:1.1rem}

/* Capture: dark, like the mock-up's driveway screen. */
body.lay-route[data-screen="HomeEditView"]{
  --bg:#111a17; --surface:#1d2925; --sunk:#2a3833; --line:#33433d; --line-2:#26332e;
  --ink:#f2f7f4; --ink-2:#d2ddd7; --ink-3:#a9b8b0;
  --brand:#6ee7b7; --brand-ink:#a7f3d0; --brand-soft:#16352b; --on-brand:#0b1512;
  --amber:#fdba74; --amber-soft:#3a2416;
  color-scheme:dark;
}
body.lay-route[data-screen="HomeEditView"] .fab{background:#fff;color:#111a17}
body.lay-route[data-screen="HomeEditView"] .pill{color:var(--brand-ink)}
body.lay-route input[type=text],body.lay-route input[type=tel],body.lay-route input[type=email],
body.lay-route input[type=number],body.lay-route input[type=date],body.lay-route input[type=time],
body.lay-route textarea,body.lay-route select{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  color:var(--ink)}
body.lay-route .shoot{border:1px solid var(--line);background:var(--surface);border-radius:16px}
body.lay-route .shoot .t{font-weight:700}
body.lay-route .shoot .ic{background:var(--sunk);color:var(--ink)}
body.lay-route .shoot.done{border-color:var(--brand);background:var(--brand-soft)}
body.lay-route .rec{background:#c2410c;width:8rem;height:8rem;font-weight:700}
body.lay-route .rec.on{background:#dc2626}
body.lay-route .chip{border:0;background:var(--sunk);color:var(--ink);font-weight:600}
body.lay-route .chips .chip.up{background:#d1fae5;color:#064e3b}
body.lay-route .chip.down{background:#fed7aa;color:#7c2d12}
body.lay-route .chip.up:before{content:"+ "}
body.lay-route .chip.down:before{content:"\2212  "}
body.lay-route .note{border-radius:0 12px 12px 0}
body.lay-route .fold{border:1px solid var(--line);background:var(--surface);border-radius:16px}
body.lay-route .fold>summary{font-weight:700;color:var(--ink)}
body.lay-route .sp-row{box-shadow:none}
body.lay-route .lookopt{background:var(--surface)}


/* ==========================================================================
   5. THREAD: talk to Pulse like a text.
   White and teal. Tours read as conversations (look.js adds the initials);
   on the tour and capture screens, what the app asks sits on the left as
   Pulse's bubble and what the agent does sits on the right as theirs. Every
   control is the app's own, in place.
   ========================================================================== */
body.lay-thread{
  --bg:#ffffff; --surface:#f1f5f9; --sunk:#e2e8f0; --line:#e2e8f0; --line-2:#f1f5f9;
  --ink:#0f172a; --ink-2:#334155; --ink-3:#526071;
  --brand:#0e7490; --brand-ink:#155e75; --brand-soft:#ecfeff; --on-brand:#ffffff;
  --amber:#b45309; --amber-soft:#fff7ed; --live:#dc2626;
  --shadow:none; --shadow-lg:0 8px 22px rgba(14,116,144,.3);
  --display:"Inter",system-ui,-apple-system,sans-serif;
  --ui:"Inter",system-ui,-apple-system,sans-serif;
  --r-sm:18px; --r-md:20px;
  color-scheme:light;
}
body.lay-thread .bar{border-bottom:1px solid var(--line);margin-bottom:.9rem}
body.lay-thread .iconbtn{border:0;border-radius:50%;background:var(--surface);color:var(--ink)}
body.lay-thread .iconbtn img{border-radius:50%}
body.lay-thread .back{background:var(--surface);border-radius:22px;padding:0 1rem;color:var(--ink);font-weight:700}
body.lay-thread h1{font-weight:800;letter-spacing:-.02em}
body.lay-thread .btn{border-radius:999px;font-weight:700;min-height:3rem}
body.lay-thread .btn.ghost{background:var(--brand-soft);border:1px solid #a5f3fc;color:var(--brand-ink)}
body.lay-thread .btn.quiet{color:var(--ink-3)}
body.lay-thread .fab{background:var(--brand);color:#fff;box-shadow:var(--shadow-lg)}
body.lay-thread .fab[disabled]{background:var(--sunk);color:var(--ink-3)}
body.lay-thread .pill{font-weight:700;background:var(--brand-soft);color:var(--brand-ink)}
body.lay-thread .gap{color:var(--amber);font-weight:600}
body.lay-thread .empty{border:0;background:var(--surface);border-radius:20px 20px 20px 6px;text-align:left}
body.lay-thread .coach{border:0;background:var(--surface);border-radius:20px 20px 20px 6px}
body.lay-thread .samplelink{border:0;background:var(--surface);border-radius:20px}
body.lay-thread .nagline{color:var(--brand-ink)}
body.lay-thread .fuw,body.lay-thread .trw,body.lay-thread .spw,body.lay-thread .slw,body.lay-thread .pxw{border:0;
  box-shadow:none;background:var(--surface);border-radius:20px}

/* Home: conversations. */
body.lay-thread[data-screen="HomeView"] #view>button.card.tap{border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;margin:0;padding:.85rem .1rem;min-height:4.25rem}
body.lay-thread[data-screen="HomeView"] #view>button.card.tap:active{background:var(--surface)}
body.lay-thread .laythread-ava{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;letter-spacing:.02em}
body.lay-thread .card .ttl{font-weight:700}

/* Tour: each home is Pulse telling you about it. */
body.lay-thread[data-screen="TourView"] #view>button.card.tap{border:0;background:var(--surface);
  border-radius:20px 20px 20px 6px;width:auto;max-width:92%;margin-bottom:.5rem;padding:.7rem .9rem}
body.lay-thread[data-screen="TourView"] #view>button.card.tap:active{background:var(--sunk)}
body.lay-thread[data-screen="TourView"] #view>button.card.tap:has(.gap){background:var(--amber-soft)}
body.lay-thread[data-screen="TourView"] #view>button.card.tap>img{border-radius:14px !important}
body.lay-thread[data-screen="TourView"] #view>button.card.tap>.shoot-ic{width:3.2rem;height:3.2rem;border-radius:14px;
  background:#a5f3fc;flex:0 0 auto}
body.lay-thread .pxrow{max-width:92%}

/* Capture: Pulse asks (the section labels), the agent answers (the controls). */
body.lay-thread[data-screen="HomeEditView"] #view>span.label{display:block;width:fit-content;max-width:85%;
  background:var(--surface);color:var(--ink);font-size:var(--t-md);font-weight:500;
  border-radius:20px 20px 20px 6px;padding:.55rem .9rem .6rem;margin:1rem 0 .55rem}
body.lay-thread[data-screen="HomeEditView"] #view>span.label:before{content:"Pulse";display:block;
  font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
body.lay-thread .shoot{border:0;background:var(--brand);color:#fff;border-radius:20px 20px 6px 20px;
  width:auto;max-width:88%;margin-left:auto}
body.lay-thread .shoot .s{color:#cffafe}
body.lay-thread .shoot .ic{background:rgba(255,255,255,.18);color:#fff}
body.lay-thread .shoot.done{background:#155e75}
body.lay-thread .shoot.done .s{color:#cffafe}
body.lay-thread .shoot.done .ic{background:#fff;color:var(--brand)}
body.lay-thread .thumbs{width:fit-content;max-width:88%;margin-left:auto;background:var(--brand);padding:.3rem;
  border-radius:18px 18px 6px 18px}
body.lay-thread .thumbs:empty{display:none}
body.lay-thread .rec-wrap{text-align:right}
body.lay-thread .rec{background:var(--brand);font-weight:700;box-shadow:var(--shadow-lg)}
body.lay-thread .rec.on{background:#dc2626}
body.lay-thread .said-live{border-radius:20px 20px 6px 20px;background:#cffafe;color:var(--ink);font-style:italic}
body.lay-thread .chips{justify-content:flex-end}
body.lay-thread .chip{border:0;background:var(--surface);font-weight:600}
body.lay-thread .chips .chip.up{background:#cffafe;color:#155e75}
body.lay-thread .chip.down{background:#ffedd5;color:#9a3412}
body.lay-thread .chip.up:before{content:"+ "}
body.lay-thread .chip.down:before{content:"\2212  "}
body.lay-thread .note{border-left:0;border-radius:20px 20px 20px 6px}
body.lay-thread input[type=text],body.lay-thread input[type=tel],body.lay-thread input[type=email],
body.lay-thread input[type=number],body.lay-thread input[type=date],body.lay-thread input[type=time],
body.lay-thread select{background:var(--surface);border:0;border-radius:999px;padding-left:1.1rem}
body.lay-thread textarea{background:var(--surface);border:0;border-radius:20px 20px 6px 20px}
body.lay-thread input.ro{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
body.lay-thread .fold{border:0;background:var(--surface);border-radius:20px}
body.lay-thread .fold>summary{font-weight:700;color:var(--ink)}
body.lay-thread .sp-row{border:0;box-shadow:none}
body.lay-thread .lookopt{border:0;background:var(--surface)}


/* ==========================================================================
   0. SHOWLY — the default since 25 Oct (Parry: "I like the new look mockups.
   lets add that"; /preview/app.html). The home page's and the recap's look:
   a dark header lit in the agent's own colour (--brand, from their card),
   Bricolage headings, cards, and one "Do this now" card with one button.
   ========================================================================== */
body.lay-showly{
  --night:#12150F; --bg:#F6F5F2; --surface:#FFFFFF; --sunk:#EFEEEA; --line:#E4E3DE; --line-2:#EEEDE8;
  --r-sm:12px; --r-md:16px;
  --display:"Bricolage Grotesque",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  body.lay-showly:not([data-theme="light"]){ --bg:#101210; --surface:#191C18; --sunk:#141714; --line:#2A2E28; --line-2:#212520; }
}
/* The header and the screen's title sit on one dark band, edge to edge. */
body.lay-showly .bar{background:var(--night);border-bottom:0;margin:0 -1.1rem;padding:1rem 1.1rem .8rem}
body.lay-showly .bar .wordmark{color:#fff}
body.lay-showly .bar .back{color:rgba(255,255,255,.82)}
body.lay-showly .bar .iconbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
body.lay-showly .bar .sxauthbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
body.lay-showly #view>h1:first-child{background:var(--night);color:#fff;margin:0 -1.1rem;padding:.5rem 1.1rem .25rem;
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
body.lay-showly #view>h1:first-child+.sub{background:var(--night);color:rgba(255,255,255,.72);margin:0 -1.1rem;
  padding:.1rem 1.1rem 1.4rem}
body.lay-showly #view>h1:first-child+.sub+.nowcard{margin-top:-.9rem}
body.lay-showly h1,body.lay-showly h2{font-family:var(--display)}

/* Where the tour stands: Before you go, At the houses, After the tour. */
body.lay-showly .tstrip{display:flex;gap:6px;background:var(--night);margin:0 -1.1rem;padding:0 1.1rem 1.5rem}
body.lay-showly .tstrip div{flex:1;border-radius:10px;padding:7px 9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);font-size:var(--t-xs);line-height:1.25;color:rgba(255,255,255,.6)}
body.lay-showly .tstrip b{display:block;font-size:var(--t-sm);color:rgba(255,255,255,.88)}
body.lay-showly .tstrip .done b:before{content:"\2713  ";color:#7CD39A}
body.lay-showly .tstrip .now{background:var(--brand);border-color:var(--brand);color:var(--on-brand,#fff)}
body.lay-showly .tstrip .now b{color:var(--on-brand,#fff)}

/* The one thing to do now. */
body.lay-showly .nowcard{display:block;position:relative;z-index:1;margin:-.7rem 0 1.2rem;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:1rem 1rem .9rem;box-shadow:0 14px 30px -14px rgba(18,21,15,.35)}
body.lay-showly .nowcard .nk{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink,var(--brand))}
body.lay-showly .nowcard .nt{font-family:var(--display);font-weight:800;font-size:var(--t-xl);line-height:1.12;color:var(--ink);margin:.2rem 0 .3rem}
body.lay-showly .nowcard p{margin:0 0 .8rem;font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
body.lay-showly .nowcard .btn{width:100%}
body.lay-showly .nowcard .btn.quiet{margin-top:.2rem}
/* With the card at the top, the long three-step box says the same thing twice. */
body.lay-showly #tourSteps{display:none}

/* Cards and buttons, rounder and lifted, like the recap. */
body.lay-showly .card{border-radius:16px;box-shadow:0 1px 2px rgba(18,21,15,.04),0 10px 26px -18px rgba(18,21,15,.3)}
body.lay-showly .btn{border-radius:12px}
body.lay-showly .fab{border-radius:14px}
body.lay-showly .pill{border-radius:999px}