/* The DIY tool at /tool (spec 2026-09-26), ported from the approved mockup.
   Phone-first: one column at 390 px; photo left, controls right from 900 px; from
   1000 px the photo takes the width and the controls sit in a 23rem side panel.
   Classes carry a t- prefix so components.css's .btn / .chip / .card never bleed
   in. Colours are tokens (tokens.css); the mockup's light values ARE the
   [data-surface="light"] tokens.
   The tool is on the shared kit (tool/_base.html sets ui = 2): the components it
   shares with the kit (buttons, chips, swatches, packs, notes, toasts, sheets, the
   split layout, drawings) live in ui2.css as aliases (".pp-btn, .t-btn"). This file
   keeps only what is the tool's own, and loads after ui2.css. */

/* base.html's skip link parks above the page with a shadow that the app topbar hides;
   the tool's header does not, so it keeps no shadow until it is focused. */
.skip-link:not(:focus) { box-shadow: none; }
.tool-top { padding-inline: max(16px, env(safe-area-inset-left)); background: var(--bg-card); border-bottom: 1px solid var(--line); }
.tool-top-in { max-width: 1100px; margin: 0 auto; min-height: 60px; display: flex; align-items: center; gap: 8px; }
.tool-top .wordmark { flex: none; }
.tool-top .wordmark-logo { height: 32px; width: auto; max-width: none; flex: none; }
.tool-top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.t-chip-bal { position: relative; font-size: 13.5px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft);
  border-radius: 999px; padding: 5px 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* short words for a narrow phone (below): "2 free", "Buy" */
.t-chip-short, .t-buy-short { display: none; }
.t-chip-bal.zero { color: var(--review); background: var(--review-bg); }
/* "Buy photos" beside the balance, on every signed-in screen (Warwick 2026-09-30): a
   real button, a full 44px tall, not a tappable chip. */
.t-buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; white-space: nowrap;
  text-decoration: none; }
.t-buy:hover { background: var(--accent-strong); color: var(--on-accent); text-decoration: none; }
.t-buy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tool-top-mark { display: none; }
.t-link { white-space: nowrap; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600;
  cursor: pointer; min-height: 48px; padding: 0 8px; font-size: 15px; display: inline-flex; align-items: center;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.t-link.t-inline { padding: 0; }
/* From 720 px the site topbar shows and this header is a slim strip under it (the logo
   and the phone menu belong to the phone bar). Under 720 px the site topbar gives way,
   as the done-for-you app bar does. */
.tool-top-due { flex-basis: 100%; margin: 0; padding: 0 0 6px; display: flex; justify-content: center; }
.t-menu { display: none; }
/* Signed out on the front door and the sample (public_chrome) the site topbar carries
   Log in and, on a phone, the site menu; this strip held nothing else: hide it at
   every width (launch surface review S4). */
.tool-top-public { display: none; }
@media (min-width: 720px) {
  .tool-top-logo, .tool-top-due { display: none; }
  .tool-top-in { min-height: 48px; }
  .tool-top .t-link { min-height: 44px; }
}
@media (max-width: 719px) {
  body.tool-app .topbar:not(.lp-topbar) { display: none; }
  .tool-top { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
    padding-right: max(16px, env(safe-area-inset-right)); }
  .tool-top-in { flex-wrap: wrap; }
  .tool-top .t-photos-link { display: none; }
  .t-menu { display: block; position: relative; }
  .t-menu > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 12px; color: var(--ink); cursor: pointer; font-size: 20px; font-weight: 700; letter-spacing: 1px; }
  .t-menu > summary::-webkit-details-marker { display: none; }
  .t-menu > summary:focus-visible, .t-menu-in a:focus-visible, .t-menu-in button:focus-visible {
    outline: none; box-shadow: var(--focus-ring); }
  .t-menu-in { position: absolute; right: 0; top: 48px; z-index: 30; min-width: 180px; display: grid; gap: 2px;
    padding: 6px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
  .t-menu-in a, .t-menu-in button { display: block; width: 100%; min-height: 44px; padding: 10px 12px;
    text-align: left; color: var(--ink); text-decoration: none; font: inherit; border-radius: 8px; }
  .t-menu-in .logout-form { margin: 0; }
}
@media (max-width: 420px) {
  .t-chip-bal { padding: 5px 10px; font-size: 13px; }
  .tool-top .wordmark-logo { height: 26px; }
  .tool-top-right .t-link { padding: 0 2px; font-size: 14.5px; }
}
/* signed in: the logo, Your photos and the balance are enough of a way out */
@media (max-width: 499px) {
  .tool-top-right .t-restart-in { display: none; }
}
/* With Buy photos in the phone bar, one row from 320px to 719px whatever the balance
   says: Start again gives way first, then the wordmark gives way to its house mark,
   then the chip shows its short words ("2 free", "None left") and last the button
   says "Buy". Screen readers keep the full words: the chip's are visually hidden,
   not removed, and the button is labelled "Buy photos". */
@media (max-width: 659px) {
  .tool-top-buy .tool-top-right .t-restart-in { display: none; }
}
@media (max-width: 539px) {
  .tool-top-buy .tool-top-logo .wordmark { display: none; }
  .tool-top-buy .tool-top-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -6px; }
  .tool-top-buy .tool-top-mark img { display: block; width: 32px; height: 32px; }
  .tool-top-buy .t-buy { padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 399px) {
  .t-chip-short { display: inline; }
  .t-chip-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 339px) {
  .tool-top-buy .t-buy-short { display: inline; }
  .tool-top-buy .t-buy-long { display: none; }
}
/* the sample preview: only under html.t-demo (set before first paint), never otherwise */
html:not(.t-demo) .t-screen [data-demo] { display: none; }
html.t-demo .t-screen [data-demo-result] { display: none; }

main.tool { padding: 20px 16px 48px; max-width: none; font-size: 16px; line-height: 1.5; }
/* `hidden` must win over the display of .t-stack, .t-note, .t-tag and the rest. */
.t-screen [hidden], .tool-top [hidden] { display: none !important; }
.t-screen { max-width: 1100px; margin: 0 auto; }
.t-screen h1 { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.t-screen h1.t-h-sm { font-size: 1.35rem; }
.t-screen h2 { margin: 0; font-size: 1.2rem; font-weight: 650; line-height: 1.2; }
.t-screen p { margin: 0; }
.t-screen form { margin: 0; }
.t-row { display: flex; gap: 12px; align-items: center; }
.t-col { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  main.tool { padding-block: 36px 64px; }
  .t-screen h1 { font-size: 1.9rem; }
  .t-phone-only { display: none !important; }
}
@media (max-width: 899px) { .t-desk-only { display: none !important; } }
/* A laptop or desktop: the photo large on the left, the controls in a fixed side panel,
   not the phone layout stretched. The landing page keeps its hero proportions. */
@media (min-width: 1000px) {
  .t-screen, .tool-top-in { max-width: 1360px; }
  .t-split.t-split-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; }
  .t-photo img { max-height: calc(100vh - 150px); }
  /* A portrait result sits in a box its own shape, not pillarboxed across the column. */
  .t-photo:has(> img[data-result-photo]) { width: fit-content; max-width: 100%; margin-inline: auto; }
  .t-photo img[data-result-photo] { width: auto; max-width: 100%; }
  .t-col:has(img[data-result-photo]) > .t-toggle { align-self: center; }
}
.t-muted { color: var(--ink-soft); }
.t-small { font-size: 14px; color: var(--ink-soft); }
.t-center { text-align: center; }
.t-center-link { align-self: center; }
.t-h2-gap { margin-top: 6px !important; }

.t-undo { display: inline-flex; align-items: center; gap: 6px; margin-top: -12px; color: var(--ink-soft); }
.t-screen :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* photos (real photos keep their own shape; drawn samples are 3:2) */
.t-photo { position: relative; width: 100%; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--bg-inset); box-shadow: var(--shadow-card); }
.t-photo img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
/* The result on a phone: leave room for the heading and Download under the photo, so a
   portrait (3:4) photo never pushes Download below the first screen (spec §3.3). */
@media (max-width: 899px) {
  .t-photo:has(> img[data-result-photo]) { width: fit-content; max-width: 100%; margin-inline: auto; }
  .t-photo img[data-result-photo] { width: auto; max-width: 100%;
    max-height: max(220px, calc(100vh - 330px)); max-height: max(220px, calc(100svh - 330px)); }
}
.t-photo.t-drawn { aspect-ratio: 16 / 9; }  /* the real sample photos are 16:9; a crop would clip the Virtually Staged mark */
.t-photo.t-drawn img { position: absolute; inset: 0; height: 100%; max-height: none; object-fit: cover; }
.t-photo picture { display: contents; }  /* AVIF/WebP wrapper: no box, the img rules apply as before */
.t-compact { max-width: 100%; }  /* full width on a phone too, as the approved screenshots */
.t-cmp-after { clip-path: inset(0 30% 0 0); }  /* staged LEFT of the handle: moving right reveals it */
.t-cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; }
.t-cmp-handle { position: absolute; top: 0; bottom: 0; left: 70%; width: 0; pointer-events: none; }
.t-cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px;
  background: var(--bg-card); box-shadow: 0 0 6px rgb(0 0 0 / .35); }
.t-cmp-knob { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 44px; height: 44px;
  border-radius: 50%; background: var(--bg-card); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
.t-cmp-range:focus-visible + .t-tag + .t-tag + .t-cmp-handle .t-cmp-knob,
.t-cmp-range:focus-visible ~ .t-cmp-handle .t-cmp-knob { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 6px var(--accent-bright); }
.t-caption { font-size: 13.5px; color: var(--ink-faint); margin-top: 8px !important; display: flex; gap: 6px; align-items: center; }

/* allowance */
.t-allow { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 15px; color: var(--ink-soft); }
.t-dots { display: inline-flex; gap: 4px; }
.t-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: block; }
.t-dots i.used { background: var(--line); }

/* add a photo */
.t-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.t-file:focus-visible + label { box-shadow: var(--focus-ring); }
.t-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.t-tips li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.t-drop { border: 2px dashed var(--accent-tint-row-line); border-radius: var(--radius-xl); background: var(--bg-card);
  padding: 28px 16px; display: grid; place-items: center; gap: 10px; text-align: center; color: var(--ink-soft); cursor: pointer; }
.t-drop-big { width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; }

/* room chips and style cards (radio inputs styled as the mockup's buttons) */
/* "Other space" (2026-09-27): its name box shows only while its chip is ticked, in CSS
   so it works without JS. */
.t-other { display: none; flex-direction: column; gap: 8px; }
[data-room-form]:has(input[name="room"][value="other"]:checked) .t-other { display: flex; }

/* the tool's home: the balance, and Buy more beside it */
.t-have { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px;
  padding: 8px 8px 8px 14px; border-radius: var(--r-ctl); background: var(--accent-soft); }
.t-have p { font-weight: 600; }
.t-screen .t-have .t-btn { width: auto; flex: none; padding: 0 18px; }

/* working */
.t-work-photo img { filter: saturate(0.5) brightness(1.02); }
.t-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .35) 50%, transparent 80%);
  background-size: 250% 100%; animation: t-sweep 1.8s linear infinite; }
@keyframes t-sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.t-indet { height: 8px; border-radius: 99px; background: var(--bg-inset); overflow: hidden; position: relative; }
.t-indet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 99px; background: var(--accent);
  animation: t-slide 1.4s ease-in-out infinite; }
@keyframes t-slide { from { left: -35%; } to { left: 100%; } }
/* the sample preview's bar: tool.js sets each step's width and time */
.t-prog { height: 8px; border-radius: 99px; background: var(--bg-inset); overflow: hidden; }
.t-prog > span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent);
  transition-property: width; transition-timing-function: linear; transition-duration: 0s; }
.t-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent-tint-row-line); border-top-color: var(--accent);
  animation: t-rot .9s linear infinite; flex: none; }
@keyframes t-rot { to { transform: rotate(360deg); } }

/* the fix sheets: a bottom sheet on a phone, the right-hand column on a laptop */
.t-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-card); cursor: pointer; font: inherit;
  font-size: 16px; font-weight: 500; text-align: left; color: var(--ink); text-decoration: none; }
.t-opt:hover { border-color: var(--accent-tint-row-line); background: var(--accent-soft); text-decoration: none; }
.t-opt .t-ic { width: 34px; height: 34px; border-radius: 9px; }
.t-chev { margin-left: auto; color: var(--ink-faint); flex: none; }
.t-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.t-tx b { font-weight: 600; }
.t-tx span { font-size: 14px; color: var(--ink-soft); font-weight: 400; }
.t-why { min-height: 64px; padding-block: 12px; }
.t-dim { opacity: .55; }

/* tap to remove */
.t-tapzone { cursor: crosshair; }
.t-ring { position: absolute; width: 36px; height: 36px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 3px solid var(--bg-card); box-shadow: 0 0 0 3px var(--accent-bright), 0 0 12px rgb(0 0 0 / .4); pointer-events: none; }
.t-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--bg-card); }
.t-hl { position: absolute; border: 2.5px dashed var(--bg-card); border-radius: 10px; box-shadow: 0 0 0 9999px rgb(0 0 0 / .28);
  pointer-events: none; }

/* typed words: "No, it's…", "Can't tap it?", "Something else" */
.t-input { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg-card); color: var(--ink); font: inherit; font-size: 17px; }
.t-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.t-more > summary { list-style: none; cursor: pointer; }
.t-more > summary::-webkit-details-marker { display: none; }
.t-more > summary.t-link { min-height: 48px; }
.t-more[open] > summary.t-btn { display: none; }
/* .t-stack.t-more-in, not .t-more-in: the form is also a .t-stack, whose gap now comes
   from ui2.css at two classes' weight. */
.t-stack.t-more-in { gap: 10px; padding-top: 4px; }
.t-step { display: flex; gap: 10px; align-items: center; font-size: 15.5px; font-weight: 600; }
.t-step .t-num { width: 28px; height: 28px; font-size: 15px; flex: none; }
.t-step-done { color: var(--pass); }
.t-step-done .t-num { background: var(--pass-bg); color: var(--pass); }

/* "Try it on one of our rooms" */
.t-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-room-card .t-nm { font-size: 15px; }
.t-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); }
a.t-chip { color: var(--ink); text-decoration: none; }
a.t-chip:hover { border-color: var(--accent-tint-row-line); background: var(--accent-soft); text-decoration: none; }
noscript .t-toggle, a.t-toggle { text-decoration: none; }

/* the drawn "no people" picture on the refusal (never a photo of a person) */

/* your photos */
.t-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .t-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.t-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.t-card .t-photo { border-radius: 0; box-shadow: none; aspect-ratio: 3 / 2; }
.t-card .t-photo img { height: 100%; object-fit: cover; }
.t-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.t-meta b { font-size: 15px; }
.t-meta span { font-size: 13px; color: var(--ink-faint); }
.t-meta .t-btn { min-height: 48px; font-size: 15px; margin-top: auto; }
.t-wait { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); min-height: 48px; margin-top: auto !important; }
.t-intro { max-width: 640px; }
.t-add-cta { max-width: 320px; }

/* buy photos */
.t-upsell { border-radius: 16px; padding: 18px; background: var(--upsell-bg); color: var(--band-body); display: flex; flex-direction: column; gap: 10px; }
.t-upsell h2 { color: var(--on-accent); }
.t-upsell .t-from { color: var(--band-eyebrow); font-size: 14px; }
.t-upsell .t-btn { background: var(--bg-card); color: var(--upsell-bg); }
.t-upsell .t-btn:hover { background: var(--accent-soft); }
.t-angles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.t-angles img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; }

/* landing */
.t-hero { align-self: center; }
.t-how { list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 16px; }
@media (min-width: 700px) { .t-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; } }
.t-how li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 2px; }
.t-num { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
  display: grid; place-items: center; font-weight: 600; font-size: 17px; }
.t-how b { font-size: 16px; }
.t-how li > span:last-child { color: var(--ink-soft); font-size: 15px; }
.t-proof { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-soft); }
.t-proof span { display: inline-flex; gap: 6px; align-items: center; }
.t-proof svg { color: var(--accent); }
.t-fileline { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  margin-top: 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg-card); font: inherit;
  font-size: 15.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.t-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-tint-row-line); color: var(--accent-strong); }
.t-mark { display: grid; gap: 4px; }
.t-mark-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.t-mark-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .t-screen *, .t-screen *::before, .t-screen *::after { animation: none !important; transition: none !important; }
  .t-indet::after { left: 0; width: 100%; opacity: .5; }
}