/* /try: "See your business as a website". Loaded after style.css + pages.css.
   Two worlds on one page:
   1. The studio page (Ivory & Ember tokens from style.css).
   2. The sample site inside the phone (.site). Its colours and type come ONLY from the
      --s-* tokens set per look below, so a look is one block of variables, nothing else.
   The phone is laid out at a fixed 320 x 640 and scaled to fit by js/try.js (--s). */

/* ---------- Page ---------- */
.tr { padding-top: clamp(28px, 4vw, 56px); }
.tr-h1 { font-size: clamp(34px, 4.6vw, 64px); max-width: 11em; }
.tr-lede { margin-top: 12px; }

.tr-grid {
  display: grid; column-gap: 16px; row-gap: 14px; align-items: start;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  /* Phones: the 8 business chips get the full width (4 x 2), the phone sits beside look + name */
  grid-template-areas: "head head" "biz biz" "phone look" "phone name" "btn btn";
}
.tr-head { grid-area: head; margin-bottom: 8px; }
.tr-form { display: contents; }
.tr-phone-wrap { grid-area: phone; }
.tr-f--biz { grid-area: biz; }
.tr-f--look { grid-area: look; }
.tr-f--name { grid-area: name; }
.tr-build { grid-area: btn; width: 100%; }
.tr-after { grid-area: after; }

@media (min-width: 860px) {
  .tr-grid {
    column-gap: clamp(48px, 7vw, 120px); row-gap: 24px;
    grid-template-columns: minmax(0, 460px) auto; justify-content: start;
    grid-template-areas: "head phone" "biz phone" "look phone" "name phone" "btn phone" ". phone";
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  .tr-head { margin-bottom: 4px; }
  .tr-grid .tr-phone-wrap { width: min(320px, calc((100svh - 150px) / 2)); }
  .tr-build { width: auto; justify-self: start; }
}

/* Building / built: the controls step aside, the phone takes the stage */
.tr:not([data-state="choose"]) .tr-f--biz,
.tr:not([data-state="choose"]) .tr-f--look,
.tr:not([data-state="choose"]) .tr-f--name { display: none; }
.tr[data-state="built"] .tr-build { display: none; }
.tr[data-state="building"] .tr-build { background: transparent; color: var(--ink-text); box-shadow: inset 0 0 0 1px var(--ink-text); }
@media (max-width: 859px) {
  .tr:not([data-state="choose"]) .tr-lede { display: none; }
  .tr:not([data-state="choose"]) .tr-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "phone" "btn" "after"; }
  .tr:not([data-state="choose"]) .tr-grid .tr-phone-wrap { width: min(290px, 76vw, calc((100svh - 230px) / 2)); justify-self: center; }
}
@media (min-width: 860px) {
  .tr:not([data-state="choose"]) .tr-grid { grid-template-areas: "head phone" "after phone" "btn phone" ". phone"; grid-template-rows: auto auto auto 1fr; }
}

/* ---------- Controls ---------- */
.tr-f { min-width: 0; }
.tr-legend { display: block; margin-bottom: 8px; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--ink-text); }
.tr-opt { font-family: var(--font-ui); font-weight: 300; font-size: 13px; color: var(--secondary-ivory); }

.tr-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 860px) { .tr-chips { gap: 8px; } }
.tr-chip { position: relative; display: block; }
.tr-chip input, .sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tr-chip span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px;
  border-radius: 2px; box-shadow: inset 0 0 0 1px var(--hairline-ivory); background: var(--paper);
  font-family: var(--font-ui); font-weight: 400; font-size: 13px; line-height: 1.15; text-align: center;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-ui);
}
.tr-chip input:checked + span { background: var(--ink-text); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--ink-text); }
.tr-chip input:active + span { transform: scale(0.97); }
.tr-chip input:focus-visible + span, .sw input:focus-visible ~ .sw__chip { outline: 2px solid var(--ember); outline-offset: 2px; }

.sws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sws--row, .tr:not([data-state="choose"]) .sws { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 860px) { .sws { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
.sw { position: relative; display: flex; flex-direction: column; gap: 4px; }
.sw__chip {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 10px;
  background: var(--sw-bg); color: var(--sw-fg); border-radius: var(--sw-r);
  box-shadow: inset 0 0 0 1px rgba(26, 25, 23, 0.14);
  transition: box-shadow 160ms ease, transform 160ms var(--ease-ui);
}
.sw input:checked ~ .sw__chip { box-shadow: inset 0 0 0 1px rgba(26, 25, 23, 0.14), 0 0 0 2px var(--ivory), 0 0 0 3px var(--ink-text); }
.sw input:active ~ .sw__chip { transform: scale(0.97); }
.sw__aa { font-family: var(--sw-font); font-style: var(--sw-style, normal); font-weight: 500; font-size: 17px; line-height: 1; text-transform: var(--sw-case, none); }
.sw__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sw-ac); }
.sw__name { font-family: var(--font-ui); font-weight: 400; font-size: 12px; line-height: 1.2; color: var(--body-ivory); text-align: center; }
.sw input:checked ~ .sw__name { color: var(--ink-text); font-weight: 500; }
.sw--warm  { --sw-bg: #F6E9C9; --sw-fg: #3B2A1E; --sw-ac: #5E7F3A; --sw-r: 10px; --sw-font: var(--font-display); --sw-style: italic; }
.sw--clean { --sw-bg: #FFFFFF; --sw-fg: #15171A; --sw-ac: #2F5BEA; --sw-r: 4px;  --sw-font: var(--font-ui); }
.sw--bold  { --sw-bg: #FFD23F; --sw-fg: #1B1B1B; --sw-ac: #D0296B; --sw-r: 18px; --sw-font: var(--font-ui); --sw-case: uppercase; }
.sw--moody { --sw-bg: #1E1520; --sw-fg: #EFE6DA; --sw-ac: #D9A85B; --sw-r: 0;    --sw-font: var(--font-display); }

.tr-input {
  width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--hairline-ivory); background: var(--paper); color: var(--ink-text);
  font-family: var(--font-ui); font-weight: 400; font-size: 16px;
}
.tr-input::placeholder { color: #8E887E; }
.tr-input:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.tr-after { display: flex; flex-direction: column; gap: 14px; }
.tr-after:not([hidden]) { animation: tr-in 280ms var(--ease-enter) both; }
@keyframes tr-in { from { opacity: 0; transform: translateY(8px); } }
.tr-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tr-link { min-height: 44px; font-family: var(--font-ui); font-weight: 500; font-size: 15px; text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tr-fine { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--secondary-ivory); max-width: 34ch; }
.tr-ns { margin-top: 24px; font-size: 16px; }
.tr-ns a { text-decoration-color: var(--ember); }
.tr-cta { margin-top: clamp(48px, 8vw, 104px); }
.tr-cta .band__line { max-width: 46ch; }

/* ---------- Phone ---------- */
.tr-phone-wrap { position: relative; width: 100%; aspect-ratio: 320 / 640; transform-origin: 0 0; }
.tr-phone {
  position: absolute; left: 0; top: 0; width: 320px; height: 640px; padding: 10px;
  border-radius: 46px; background: #1A1917;
  box-shadow: 0 0 0 1px rgba(26, 25, 23, 0.4), 0 36px 60px -36px var(--shadow);
  transform-origin: 0 0; transform: scale(var(--s, 0.5));
}
.tr-screen { position: relative; width: 300px; height: 620px; border-radius: 36px; overflow: hidden; background: #FBF9F4; isolation: isolate; }
.tr-screen.no-anim * { transition: none !important; }

.thumb {
  position: absolute; left: 0; top: 0; z-index: 30; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1.5px rgba(26, 25, 23, 0.55), 0 8px 18px rgba(18, 17, 16, 0.22);
  opacity: 0; pointer-events: none; transform: translate(250px, 660px);
}

/* ---------- The sample site ---------- */
.site {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--s-bg); color: var(--s-fg);
  font-family: var(--font-ui); font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}
.site[hidden] { display: none; }
.s-scroll { position: absolute; inset: 32px 0 0; overflow: hidden; padding-bottom: 84px; overscroll-behavior: contain; }
.site.is-live .s-scroll { overflow-y: auto; scrollbar-width: none; }
.site.is-live .s-scroll::-webkit-scrollbar { display: none; }
.site button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.site button:focus-visible { outline: 2px solid var(--s-ac); outline-offset: 2px; }

/* Looks. --s-ac is the accent, --s-on what sits on it, --s-card a raised surface. */
.site[data-mode="wire"] {
  --s-bg: #FBF9F4; --s-fg: #1A1917; --s-mu: #8C867C; --s-ac: #E6E0D5; --s-on: transparent; --s-card: #F4F0E8; --s-line: #E3DDD1; --s-bar: #E6E0D5; --s-bar-fg: transparent;
  --s-r: 6px; --s-rs: 4px; --s-br: 6px; --s-bw: 0px;
  --s-hf: var(--font-display); --s-hw: 500; --s-hs: normal; --s-hc: none; --s-ht: 0;
}
.site[data-mode="mono"] {
  --s-bg: #FBF9F4; --s-fg: #1A1917; --s-mu: #6B665E; --s-ac: #1A1917; --s-on: #F4F0E8; --s-card: #F1ECE2; --s-line: #DCD5C8; --s-bar: #1A1917; --s-bar-fg: #F4F0E8;
  --s-r: 2px; --s-rs: 2px; --s-br: 2px; --s-bw: 0px;
  --s-hf: var(--font-display); --s-hw: 500; --s-hs: normal; --s-hc: none; --s-ht: 0;
}
.site[data-mode="warm"] {
  --s-bg: #F6E9C9; --s-fg: #3B2A1E; --s-mu: #6E5A47; --s-ac: #5E7F3A; --s-on: #FFFDF6; --s-card: #FBF3DF; --s-line: #E6D5AF; --s-bar: #3B2A1E; --s-bar-fg: #F6E9C9;
  --s-r: 18px; --s-rs: 12px; --s-br: 14px; --s-bw: 0px;
  --s-hf: var(--font-display); --s-hw: 500; --s-hs: italic; --s-hc: none; --s-ht: 0;
}
.site[data-mode="clean"] {
  --s-bg: #FFFFFF; --s-fg: #15171A; --s-mu: #5B6068; --s-ac: #2F5BEA; --s-on: #FFFFFF; --s-card: #F4F6F9; --s-line: #E5E8ED; --s-bar: #15171A; --s-bar-fg: #FFFFFF;
  --s-r: 6px; --s-rs: 4px; --s-br: 6px; --s-bw: 0px;
  --s-hf: var(--font-ui); --s-hw: 500; --s-hs: normal; --s-hc: none; --s-ht: -0.01em;
}
.site[data-mode="bold"] {
  --s-bg: #FFD23F; --s-fg: #1B1B1B; --s-mu: #3D3416; --s-ac: #D0296B; --s-on: #FFFFFF; --s-card: #FFE48A; --s-line: #1B1B1B; --s-bar: #1B1B1B; --s-bar-fg: #FFD23F;
  --s-r: 14px; --s-rs: 999px; --s-br: 999px; --s-bw: 2px;
  --s-hf: var(--font-ui); --s-hw: 500; --s-hs: normal; --s-hc: uppercase; --s-ht: 0.02em;
}
.site[data-mode="moody"] {
  --s-bg: #1E1520; --s-fg: #EFE6DA; --s-mu: #B9AC9E; --s-ac: #D9A85B; --s-on: #1E1520; --s-card: #2A1F2D; --s-line: #3D2F40; --s-bar: #EFE6DA; --s-bar-fg: #1E1520;
  --s-r: 0px; --s-rs: 0px; --s-br: 0px; --s-bw: 0px;
  --s-hf: var(--font-display); --s-hw: 500; --s-hs: normal; --s-hc: none; --s-ht: 0.01em;
}

/* Wireframe: text becomes bars the size of the words, except the name being typed */
.site[data-mode="wire"] .t:not(.t--keep) { color: transparent; background: #E6E0D5; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.site[data-mode="wire"] .s-hero,
.site[data-mode="wire"] .s-pad,
.site[data-mode="wire"] .s-slot { box-shadow: inset 0 0 0 1px #D9D2C4; }
.site[data-mode="wire"] .s-hero { background: transparent; }
.site[data-mode="wire"] .s-price, .site[data-mode="wire"] .s-dot { background: #E6E0D5; }
.site[data-mode="wire"] .s-pad__art, .site[data-mode="wire"] .s-pad__hint { opacity: 0; }
.site[data-mode="wire"] .s-mark { color: transparent; }
.site[data-mode="wire"] .s-tag { color: transparent; background: #E6E0D5; }

.s-status { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 32px; padding: 6px 26px 0; font-size: 11px; font-weight: 500; }
.s-tag { padding: 2px 8px; border-radius: 99px; background: var(--s-fg); color: var(--s-bg); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }

.s-head { display: flex; align-items: center; gap: 10px; padding: 8px 18px 10px; }
.s-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--s-rs); background: var(--s-ac); color: var(--s-on); font-family: var(--s-hf); font-weight: 500; font-size: 16px; line-height: 1; text-transform: uppercase; }
.s-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--s-hf); font-weight: var(--s-hw); font-style: var(--s-hs); text-transform: var(--s-hc); letter-spacing: var(--s-ht); font-size: 19px; line-height: 1.2; }
.s-burger { flex: none; width: 18px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: 0.8; }

.s-hero { margin: 4px 14px 0; padding: 18px 16px 16px; border-radius: var(--s-r); background: var(--s-card); box-shadow: inset 0 0 0 var(--s-bw) var(--s-line); }
.s-hero__line { font-family: var(--s-hf); font-weight: var(--s-hw); font-style: var(--s-hs); text-transform: var(--s-hc); letter-spacing: var(--s-ht); font-size: 25px; line-height: 1.1; }
.site[data-mode="clean"] .s-hero__line { font-size: 22px; line-height: 1.12; }
.site[data-mode="bold"] .s-hero__line { font-size: 19px; line-height: 1.12; }
.s-open { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--s-mu); }
.s-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--s-ac); }

.s-sec { padding: 14px 18px 0; }
.s-h { margin-bottom: 4px; font-family: var(--s-hf); font-weight: var(--s-hw); font-style: var(--s-hs); text-transform: var(--s-hc); letter-spacing: var(--s-ht); font-size: 17px; line-height: 1.25; }
.site[data-mode="bold"] .s-h, .site[data-mode="clean"] .s-h { font-size: 14px; }

.s-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--s-line); }
.s-item:first-child { border-top: 0; }
.s-item--pick { padding: 0; }
.s-item__txt { flex: 1; min-width: 0; text-align: left; }
.s-item__n { font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.s-item__d { margin-top: 1px; font-size: 11px; font-weight: 300; line-height: 1.3; color: var(--s-mu); }
.site[data-mode="moody"] .s-item__n { font-family: var(--font-display); font-size: 16px; }
.s-price { flex: none; width: 30px; height: 8px; border-radius: 4px; background: var(--s-line); }
.site[data-mode="bold"] .s-price { background: rgba(27, 27, 27, 0.18); }
.s-item.is-out .s-item__n, .s-item.is-out .s-item__d { opacity: 0.55; }
.s-out { flex: none; width: 66px; font-size: 10px; font-weight: 500; text-align: right; color: var(--s-mu); letter-spacing: 0.04em; }
/* "Just changed" tint for a row; js/try.js fades its opacity (opacity only, no repaint) */
.s-item { position: relative; }
.s-item::after { content: ""; position: absolute; inset: 0 -8px; border-radius: 6px; background: var(--s-ac); opacity: 0; pointer-events: none; }
.s-item:not(.is-out) .s-out, .s-item.is-out .s-ctl, .s-item:not(.is-out) .s-d-out, .s-item.is-out .s-d-in { display: none; }

.s-ctl { flex: none; width: 66px; display: flex; justify-content: flex-end; }
.s-add { min-width: 54px; height: 30px; padding: 0 10px; border-radius: var(--s-br); background: var(--s-ac); color: var(--s-on) !important; font-size: 12px !important; font-weight: 500 !important; box-shadow: inset 0 0 0 var(--s-bw) var(--s-line); transition: transform 140ms var(--ease-ui); }
.site[data-mode="wire"] .s-add { color: transparent !important; }
.s-add:active, .s-pm:active, .s-slot:active, .s-bar__btn:active, .s-pick:active { transform: scale(0.95); }
.s-step { display: none; align-items: center; gap: 2px; }
.s-item[data-q] .s-add { display: none; }
.s-item[data-q] .s-step { display: flex; }
.s-pm { position: relative; width: 24px; height: 28px; border-radius: var(--s-br); background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); }
.s-pm::before, .s-pm--inc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -0.75px 0 0 -4.5px; background: currentColor; }
.s-pm--inc::after { transform: rotate(90deg); }
.s-q { min-width: 14px; font-size: 13px; font-weight: 500; text-align: center; }

.s-sizes { display: flex; gap: 4px; margin-top: 5px; }
.s-size { min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--s-rs); font-size: 10.5px !important; font-weight: 500 !important; box-shadow: inset 0 0 0 1px var(--s-line); transition: background-color 140ms ease, color 140ms ease; }
.s-size[aria-pressed="true"] { background: var(--s-fg); color: var(--s-bg) !important; box-shadow: none; }
.site[data-mode="wire"] .s-size { color: transparent !important; }

.s-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 0; }
.s-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--s-line); transition: box-shadow 160ms ease; }
.s-pick[aria-pressed="true"] .s-radio { box-shadow: inset 0 0 0 5px var(--s-ac); }
.s-radio--box { position: relative; border-radius: min(var(--s-rs), 4px); }
.s-pick[aria-pressed="true"] .s-radio--box { box-shadow: inset 0 0 0 9px var(--s-ac); }
.s-pick[aria-pressed="true"] .s-radio--box::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--s-on); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }

/* Developer / agent: plot map, tinted by status (the house tour's plot toggle) */
.s-plots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.s-plot { height: 40px; border-radius: min(var(--s-rs), 8px); background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); font-size: 12px !important; font-weight: 500 !important; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-ui); }
.s-plot:active { transform: scale(0.95); }
.s-plot[aria-pressed="true"] { background: var(--s-ac); color: var(--s-on) !important; box-shadow: none; }
.s-plot:disabled { cursor: default; }
.s-plot.is-reserved { background: repeating-linear-gradient(135deg, var(--s-card) 0 4px, var(--s-line) 4px 5px); color: var(--s-mu) !important; }
.s-plot.is-sold { background: var(--s-line); color: var(--s-mu) !important; box-shadow: none; text-decoration: line-through; opacity: 0.55; }
.site[data-mode="wire"] .s-plot { color: transparent !important; }
.s-legend { display: flex; gap: 12px; margin-top: 8px; font-size: 10.5px; color: var(--s-mu); }
.s-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.s-key { width: 10px; height: 10px; border-radius: 2px; background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); }
.s-key.is-reserved { background: repeating-linear-gradient(135deg, var(--s-card) 0 2px, var(--s-line) 2px 3px); }
.s-key.is-sold { background: var(--s-line); box-shadow: none; }

.s-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.s-slot { position: relative; height: 38px; border-radius: var(--s-rs); background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.1; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-ui); }
.site[data-mode="bold"] .s-slot { border-radius: 10px; }
.s-slot[aria-pressed="true"] { background: var(--s-ac); color: var(--s-on) !important; box-shadow: none; }
.s-slot:disabled { cursor: default; opacity: 0.5; }
.s-slot small { display: block; margin-top: 1px; font-size: 9px; font-weight: 400; letter-spacing: 0.06em; }

.s-pad { position: relative; margin-top: 4px; border-radius: var(--s-r); background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); overflow: hidden; }
.s-pad svg { display: block; width: 100%; height: auto; touch-action: none; }
.s-pad__art { stroke: var(--s-mu); stroke-width: 1.2; fill: none; opacity: 0.6; }
.s-pad__ink { stroke: var(--s-ac); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.site[data-mode="bold"] .s-pad__ink { stroke: #1B1B1B; }
.s-pad__hint { position: absolute; left: 10px; top: 8px; font-size: 10px; color: var(--s-mu); pointer-events: none; }

.s-hours { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin-top: 2px; font-size: 12px; }
.s-hours dt { color: var(--s-mu); }
.s-hours dd { margin: 0; text-align: right; }
.s-foot { padding: 18px 18px 0; font-size: 10px; color: var(--s-mu); text-align: center; }

/* Bottom action bar */
.s-bar {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 50px; padding: 6px 6px 6px 16px; border-radius: var(--s-br);
  background: var(--s-bar); color: var(--s-bar-fg);
  font-size: 12.5px; font-weight: 500;
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease;
}
.site[data-mode="moody"] .s-bar, .site[data-mode="mono"] .s-bar, .site[data-mode="wire"] .s-bar { border-radius: 2px; }
.s-bar.is-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }
.s-bar__btn { min-height: 38px; padding: 0 14px; border-radius: var(--s-br); background: var(--s-ac); color: var(--s-on) !important; font-size: 12px !important; font-weight: 500 !important; transition: opacity 160ms ease, transform 140ms var(--ease-ui); }
.site[data-mode="moody"] .s-bar__btn { border-radius: 0; }
.site[data-mode="mono"] .s-bar__btn { background: var(--s-bg); color: var(--s-fg) !important; }
.site[data-mode="wire"] .s-bar__btn { background: #F4F0E8; }
.site[data-mode="wire"] .s-bar, .site[data-mode="wire"] .s-bar__btn { color: transparent !important; }
.s-bar__btn:disabled { opacity: 0.45; cursor: default; }

/* Message sheet: what would land in the owner's chat */
.s-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(18, 17, 16, 0.38); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.s-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 10px 16px 18px; border-radius: 22px 22px 0 0;
  background: #EFEBE4; color: #1A1917; font-family: var(--font-ui);
  transform: translateY(105%); visibility: hidden;
  /* Closing snaps (240ms); opening, in the .is-sheet / .is-owner rules, takes 380ms */
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 240ms;
}
.site.is-sheet .s-scrim { opacity: 1; pointer-events: auto; }
.site.is-sheet .s-sheet:not(.s-sheet--owner) { transform: none; visibility: visible; transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; }
.s-grab { display: block; width: 36px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: rgba(26, 25, 23, 0.2); }
.s-to { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
.s-to__av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1A1917; color: #EFEBE4; font-size: 11px; text-transform: uppercase; }
.s-bubble {
  margin: 12px 0 0 auto; max-width: 92%; width: fit-content; padding: 10px 12px 8px;
  border-radius: 14px 14px 4px 14px; background: #FFFFFF; box-shadow: 0 1px 1px rgba(26, 25, 23, 0.08);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere;
}
.s-bubble svg { display: block; width: 150px; height: auto; margin-top: 8px; border-radius: 8px; background: #F4F0E8; }
.s-bubble svg .s-pad__art { stroke: #8C867C; }
.s-bubble svg .s-pad__ink { stroke: #1A1917; }
.s-note { margin-top: 10px; font-size: 11px; line-height: 1.4; color: #57524B; }
.s-close { display: block; width: 100%; min-height: 42px; margin-top: 12px; border-radius: 12px; background: #1A1917; color: #EFEBE4 !important; font-size: 12.5px !important; font-weight: 500 !important; }

/* Other endings: owner's phone, email, meeting-point map */
.site.is-owner .s-scrim { opacity: 1; pointer-events: auto; }
.site.is-owner .s-sheet--owner { transform: none; visibility: visible; transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; }
.s-sheet__title { font-size: 14px; font-weight: 500; }
.s-sheet__sub { margin-top: 1px; font-size: 11px; color: #57524B; }
.s-sheet--owner { background: #1A1917; color: #EFEBE4; }
.s-sheet--owner .s-grab { background: rgba(239, 235, 228, 0.25); }
.s-sheet--owner .s-sheet__sub, .s-sheet--owner .s-note { color: #B8B1A6; }
.s-sheet--owner .s-close { background: #EFEBE4; color: #1A1917 !important; }
.s-own { margin-top: 10px; }
.s-own li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; border-top: 1px solid rgba(239, 235, 228, 0.12); font-size: 12.5px; }
.s-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: 11px !important; color: #B8B1A6 !important; }
.s-sw__k { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #57524B; transition: background-color 200ms ease; }
.s-sw__k::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #EFEBE4; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.s-sw[aria-checked="true"] .s-sw__k { background: #5E7F3A; }
.s-sw[aria-checked="true"] .s-sw__k::after { transform: translateX(14px); }
.s-sw[aria-checked="false"] { color: #EFEBE4 !important; }

.s-sheet--mail .s-sheet__title { margin-bottom: 6px; }
.s-mail__row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #DCD5C8; font-size: 12px; }
.s-mail__k { flex: none; width: 52px; color: #6B665E; }
.s-mail__body { padding: 10px 0 2px; font-size: 12.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }

.s-day { margin-top: 4px; font-size: 12.5px; line-height: 1.45; white-space: pre-line; }
.s-map { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 10px; }
.s-go { display: flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px #1A1917; font-size: 12.5px; font-weight: 500; }

/* Developer / agent: a simple CSS 3D house in the hero. Turns slowly by itself; drag to turn it. */
.s-house { position: relative; height: 138px; margin: 4px -4px 0; perspective: 560px; perspective-origin: 50% 30%; touch-action: pan-y; cursor: grab; user-select: none; }
.s-house.is-held { cursor: grabbing; }
.h3 { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(-32deg); }
.site.is-live .s-house:not(.is-taken) .h3 { animation: house-turn 30s linear infinite; }
@keyframes house-turn { from { transform: rotateX(-16deg) rotateY(-32deg); } to { transform: rotateX(-16deg) rotateY(328deg); } }
.h3 i { position: absolute; display: block; }
.hf, .hg { background: var(--s-wall, var(--s-bg)); box-shadow: inset 0 0 0 1px var(--s-line); }
.hf--front, .hf--back { width: 110px; height: 50px; margin: -25px 0 0 -55px; }
.hf--front { transform: translateZ(40px); }
.hf--back { transform: rotateY(180deg) translateZ(40px); filter: brightness(0.86); }
.hf--left, .hf--right { width: 80px; height: 50px; margin: -25px 0 0 -40px; filter: brightness(0.93); }
.hf--left { transform: rotateY(-90deg) translateZ(55px); }
.hf--right { transform: rotateY(90deg) translateZ(55px); }
.hg { width: 80px; height: 30px; margin: -15px 0 0 -40px; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: brightness(0.93); }
.hg--left { transform: translateY(-40px) rotateY(-90deg) translateZ(55px); }
.hg--right { transform: translateY(-40px) rotateY(90deg) translateZ(55px); }
.hr { width: 122px; height: 52px; margin: -26px 0 0 -61px; background: var(--s-ac); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.hr--front { transform: translate3d(0, -40px, 20px) rotateX(53.13deg); }
.hr--back { transform: translate3d(0, -40px, -20px) rotateX(-53.13deg); filter: brightness(0.8); }
.hb { width: 190px; height: 150px; margin: -75px 0 0 -95px; transform: translateY(25px) rotateX(90deg); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.16), transparent); }
.hd { left: 47px; top: 22px; width: 16px; height: 28px; background: var(--s-fg); opacity: 0.85; }
.hw { top: 14px; width: 22px; height: 16px; background: var(--s-card); box-shadow: inset 0 0 0 1.5px var(--s-fg); opacity: 0.8; }
.hw--l { left: 14px; }
.hw--r { right: 14px; }
.s-house__cap { position: absolute; left: 6px; right: 6px; bottom: 0; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--s-mu); }
.s-house__hint { opacity: 0.8; }
.site[data-mode="wire"] .hf, .site[data-mode="wire"] .hg, .site[data-mode="wire"] .hr { background: transparent; filter: none; box-shadow: inset 0 0 0 1px #D9D2C4; }
.site[data-mode="wire"] .hd, .site[data-mode="wire"] .hw, .site[data-mode="wire"] .hb, .site[data-mode="wire"] .s-house__hint { opacity: 0; }

/* Under reduced motion the build is a cross-fade; nothing travels */
@media (prefers-reduced-motion: reduce) {
  .s-bar { transition-property: opacity, visibility; transition-duration: 200ms; }
  .s-sheet { transform: none; opacity: 0; transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .site.is-sheet .s-sheet:not(.s-sheet--owner), .site.is-owner .s-sheet--owner { transition: opacity 200ms ease, visibility 0s; }
  .site.is-sheet .s-sheet:not(.s-sheet--owner), .site.is-owner .s-sheet--owner { opacity: 1; }
  .site.is-live .s-house:not(.is-taken) .h3 { animation: none; }
  .s-bar.is-hidden { transform: none; }
  .tr-after:not([hidden]) { animation-name: tr-fade; }
  @keyframes tr-fade { from { opacity: 0; } }
}