/* The app: the same desk as the front page, set up for work. The green mat is the ground, the rail down the left holds
   your plans, and the work sits on cream paper panels: no tilts, no lamp, the motion kept to what shows progress.
   Paper takes ink and green; the mat takes cream and brass; brass marks the one thing to do next. */
:root {
  --mat: #164a3c; --mat-deep: #0f372c; --mat-glow: #1c5848; --cream: #f4efe2; --brass: #e0b45a; --ink: #10241e;
  --paper: #f7f4ee; --print: #0b1c17; --green: #1e5e4b; --brass-ink: #9c6c1e; --muted: rgba(16, 36, 30, 0.62);
  --grid-major: rgba(255, 255, 255, 0.04); --grid-minor: rgba(255, 255, 255, 0.014);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.27 0 0 0 0 0.2 0.26 0 0 0 -0.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --display: 'Geist', system-ui, sans-serif; --body: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
  --accent: 'Fraunces', Georgia, serif; --accent-weight: 600; --accent-axes: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  --rail: 300px;
}
/* the page itself doesn't scroll: the main area does (below), so its background runs under its scrollbar */
html, body { height: 100%; overflow: hidden; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); color: var(--cream); font: 400 1rem/1.5 var(--body); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Buttons, as on the front page: a brass pill for the next step, a hairline ghost for the rest */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 0.9375rem/1 var(--body); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; color: var(--ink);
  background: linear-gradient(180deg, #edc678, #dcae52);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.65), inset 0 -1px 0 rgba(120, 82, 20, 0.25), 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 24px -12px rgba(224, 180, 90, 0.55);
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s, background 0.2s; }
.btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #f3d189, #e3b75d); }
.btn:active { transform: none; box-shadow: inset 0 1px 2px rgba(120, 82, 20, 0.35); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn small { font: 500 0.6875rem/1 var(--mono); opacity: 0.7; }
.btn .arr { transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.btn.ghost { color: var(--cream); background: rgba(244, 239, 226, 0.03); box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.42); }
.btn.ghost:hover { background: rgba(244, 239, 226, 0.08); box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.75); }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn.wide { width: 100%; min-height: 54px; font-size: 1rem; }
/* on paper, the actions inside a panel are ink: filled for sending, a hairline for the rest */
.btn.ink { color: var(--cream); background: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.btn.ink:hover { background: #1c3a31; }
.btn.line { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.4); }
.btn.line:hover { background: rgba(16, 36, 30, 0.05); box-shadow: inset 0 0 0 1px var(--ink); }
.linkish { padding: 0; border: 0; background: none; cursor: pointer; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }

/* Labels: small mono capitals, as on a drawing's title block */
.p-label { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.p-label.on-mat { color: rgba(244, 239, 226, 0.6); }
.p-label .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.25px solid currentColor; font-size: 0.625rem; letter-spacing: 0; color: var(--ink); }
.p-label .left { margin-left: auto; letter-spacing: 0.08em; color: var(--green); }
.fine { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted); }
.checks { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.checks li { position: relative; padding-left: 24px; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* ── The rail ── */
.rail { height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 22px 16px 18px; border-right: 1px solid rgba(244, 239, 226, 0.08);
  /* lit from the top like the front page's bar over its hero, settling into the deep green */
  background: radial-gradient(ellipse 120% 45% at 30% 0%, rgba(28, 88, 72, 0.75), transparent 70%), linear-gradient(180deg, #113f31, var(--mat-deep) 60%); }
.rail .wordmark { padding: 4px 8px 6px; }
.rail .new { width: 100%; }
.rail .new span { font-size: 1.125rem; font-weight: 500; }
/* the homes: the rail's only scroll, its edges fading under the button and over the foot */
.rail-list { flex: 1 1 auto; min-height: 140px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; margin: 0 -16px; padding: 8px 16px;
  scrollbar-width: thin; scrollbar-color: rgba(244, 239, 226, 0.18) transparent;
  mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent); }
.rail-label { margin: 8px 8px -8px; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 239, 226, 0.45); }
.projects { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.proj { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; transition: background 0.15s; }
.proj:hover { background: rgba(244, 239, 226, 0.05); }
.proj[aria-current='true'] { background: rgba(244, 239, 226, 0.1); }
/* the thumbnail: the home from above, in a print's dark frame; a plan (before the first pictures) on paper */
.proj .th { width: 62px; height: 44px; overflow: hidden; border-radius: 3px; background: var(--paper); padding: 3px; }
.proj .th img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.proj .th.render { padding: 2px; background: #f6f3ee; box-shadow: 0 0 0 1px rgba(244, 239, 226, 0.12); }
.proj .th.render img { object-fit: cover; mix-blend-mode: normal; }
.proj .th.pdf { display: grid; place-items: center; font: 600 0.625rem/1 var(--mono); color: var(--muted); }
.proj-txt { display: grid; gap: 3px; min-width: 0; }
.proj b { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 0.9rem; font-weight: 500; }
.proj b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj .demo { flex: none; font: 500 0.5625rem/1 var(--mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 239, 226, 0.5); padding: 2px 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.22); }
.proj small { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font: italic var(--accent-weight) 0.875rem/1.2 var(--accent); font-variation-settings: var(--accent-axes); color: rgba(224, 180, 90, 0.85); }
.proj small span { overflow: hidden; text-overflow: ellipsis; }
.proj:not([data-status='ready']) small { font: 500 0.6875rem/1.2 var(--mono); letter-spacing: 0.04em; color: rgba(244, 239, 226, 0.55); }
/* a home being made: a pale mat green, cool beside the brass of the rest */
.proj[data-status='making'] small { color: #9fd3bf; }
.proj[data-status='making'] small::before { content: ''; flex: none; width: 0.85em; height: 0.85em; border-radius: 50%; border: 1.5px solid rgba(159, 211, 191, 0.25); border-top-color: #9fd3bf; animation: spin 0.9s linear infinite; }
@keyframes pulse { to { opacity: 0.3; } }
.rail-foot { flex: none; margin-top: auto; padding-top: 6px; }
.rail-foot .lang { color: rgba(244, 239, 226, 0.7); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
/* the account: a card on the mat, who above, the credits below */
.acct-card { display: grid; gap: 12px; padding: 12px; border-radius: 8px; background: rgba(244, 239, 226, 0.04); box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.09); }
.acct { display: flex; gap: 10px; align-items: center; min-width: 0; }
.acct .av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--cream); font: 600 0.8125rem/1 var(--display); }
.acct .who { display: grid; min-width: 0; }
.acct b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; }
.acct small { color: rgba(244, 239, 226, 0.5); font-size: 0.75rem; }
.icon-btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(244, 239, 226, 0.55); cursor: pointer; transition: color 0.15s, background 0.15s; }
.icon-btn:hover { color: var(--cream); background: rgba(244, 239, 226, 0.08); }
.bal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(244, 239, 226, 0.08); }
.bal-n { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.bal-n b { font: 600 1.375rem/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bal-n span { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 239, 226, 0.55); }
.bal-guest { margin: 0; font-size: 0.75rem; line-height: 1.35; color: rgba(244, 239, 226, 0.6); }
.bal .btn { flex: none; min-height: 34px; padding: 0 14px; font-size: 0.8125rem; }
.scrim { display: none; }

/* ── The work area: the mat, its grid, a bar along the top ── */
.main { min-width: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column;
  /* room for the scrollbar is always kept, so nothing shifts when it appears; a thin pale thumb on no track */
  scrollbar-gutter: stable; scrollbar-color: rgba(244, 239, 226, 0.28) transparent;
  /* the desk: the grid over the front page's glow; it stays put while the content scrolls over it */
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse 75% 65% at 58% 32%, var(--mat-glow), var(--mat) 48%, var(--mat-deep));
  background-color: var(--mat-deep); }
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 0 clamp(16px, 3vw, 40px);
  background: rgba(20, 68, 55, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(244, 239, 226, 0.08); }
.menu { display: none; }
.crumbs { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; font-size: 0.9375rem; }
.crumbs span { color: rgba(244, 239, 226, 0.5); white-space: nowrap; }
.crumbs span::after { content: '/'; margin-left: 10px; opacity: 0.6; }
.crumbs b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 239, 226, 0.4); }
.steps li { display: flex; align-items: center; gap: 7px; }
.steps li + li::before { content: ''; width: 22px; height: 1px; margin-right: 1px; background: rgba(244, 239, 226, 0.2); }
.steps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-style: normal; letter-spacing: 0; }
.steps li.done { color: rgba(244, 239, 226, 0.72); }
.steps li.done i { border-color: transparent; background: rgba(244, 239, 226, 0.14); font-size: 0; }
.steps li.done i::before { content: '✓'; font-size: 0.6875rem; }
.steps li.now { color: var(--brass); }
.steps li.now i { background: var(--brass); border-color: var(--brass); color: var(--ink); }
/* the rail's top: the logo, and Help beside it */
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 0.8125rem; color: rgba(244, 239, 226, 0.7); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.18); transition: color 0.15s, box-shadow 0.15s; }
.help:hover { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.5); }
.help[aria-current='page'] { color: var(--brass); box-shadow: inset 0 0 0 1px rgba(224, 180, 90, 0.6); }
/* admins only: the Coupons screen, in the admin's purple */
.help.admin-link { color: #c7a8ec; box-shadow: inset 0 0 0 1px rgba(199, 168, 236, 0.35); }
.help.admin-link[hidden] { display: none; }
/* the bar on a wide screen: only the steps while a home is being made; on a home's page and on Help, none (the page
   says where you are); on a narrow one it keeps the button to the rail and the page's name */
@media (min-width: 901px) {
  .crumbs { display: none; }
  body.bar-off .bar { display: none; }
}
.stage { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(24px, 3.5vw, 44px) clamp(16px, 3vw, 40px) 72px; }
.state { animation: arrive 0.45s ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
.st-head { display: grid; gap: 6px; margin-bottom: 26px; }
.st-head h1, .pack-head h1 { margin: 0; font: 600 clamp(1.75rem, 2.8vw, 2.4rem)/1.05 var(--display); letter-spacing: -0.04em; }
.st-head p { margin: 0; max-width: 46em; color: rgba(244, 239, 226, 0.72); }

/* Panels: cream paper on the mat */
.panel { position: relative; border-radius: 4px; color: var(--ink); background: var(--grain), var(--paper); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
.panel :focus-visible { outline-color: var(--green); }

/* ── 1 · New plan ── */
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: stretch; }
.drop { position: relative; display: grid; place-content: center; justify-items: center; gap: 12px; min-height: clamp(280px, 42vh, 400px); border-radius: 4px; cursor: pointer; text-align: center;
  border: 1.5px dashed rgba(244, 239, 226, 0.38); background: rgba(8, 30, 24, 0.22); transition: background 0.25s, border-color 0.25s; }
.drop svg { color: var(--brass); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.drop strong { font: italic var(--accent-weight) clamp(1.5rem, 2.2vw, 1.9rem)/1.1 var(--accent); font-variation-settings: var(--accent-axes); }
.drop .hint { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.05em; color: rgba(244, 239, 226, 0.6); }
.crop { position: absolute; width: 24px; height: 24px; border: 0 solid var(--brass); }
.crop.tl { left: -12px; top: -12px; border-top-width: 2px; border-left-width: 2px; }
.crop.tr { right: -12px; top: -12px; border-top-width: 2px; border-right-width: 2px; }
.crop.bl { left: -12px; bottom: -12px; border-bottom-width: 2px; border-left-width: 2px; }
.crop.br { right: -12px; bottom: -12px; border-bottom-width: 2px; border-right-width: 2px; }
.tips { align-self: start; padding: 22px 22px 24px; }
.samples { margin-top: 36px; }
.sample-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sample { display: grid; grid-template-rows: 220px auto; padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer; text-align: left; color: var(--ink); background: var(--grain), var(--paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 18px 34px -24px rgba(0, 0, 0, 0.6); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s; }
.sample:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--brass), 0 22px 40px -24px rgba(0, 0, 0, 0.7); }
.sample img { width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.sample span { display: grid; gap: 2px; padding: 10px 14px 12px; border-top: 1px solid rgba(16, 36, 30, 0.2); font-size: 0.875rem; font-weight: 600; }
.sample span small { font: 500 0.6875rem/1.2 var(--mono); letter-spacing: 0.04em; color: var(--muted); }

/* ── 2 · Setup: the sheet on the left, the order on the right ── */
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 22px; align-items: start; }
.sheet { padding: 14px; position: sticky; top: 86px; }
/* the plan whole, never cut: the sheet is at least 4 : 3.2 and grows with a taller plan */
.sheet-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3.2; background: #fff; }
.sheet-img > img { display: block; width: 100%; height: auto; padding: 18px; mix-blend-mode: multiply; }
.pdf-placeholder { display: grid; gap: 6px; justify-items: center; text-align: center; color: var(--muted); font-size: 0.9375rem; }
.pdf-placeholder b { font: 600 2.5rem/1 var(--mono); color: rgba(16, 36, 30, 0.25); }
.tblock { display: grid; grid-template-columns: 1.3fr 0.9fr 0.9fr 0.8fr; margin-top: 12px; border: 1px solid rgba(16, 36, 30, 0.55); }
/* on top of the plan (making) */
.tblock:first-child { margin: 0 0 12px; }
.tblock.slim { grid-template-columns: 1.3fr 0.9fr 0.9fr 0.8fr; }
.tb { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 7px 10px 8px; border-left: 1px solid rgba(16, 36, 30, 0.3); }
/* Making's block: the home's name across the top, its rooms and style under it */
.tblock.slim .tb-full { grid-column: 1 / -1; border-left: 0; }
.tblock.slim .tb:nth-child(2) { border-left: 0; }
.tblock.slim .tb:nth-child(4) { border-left: 1px solid rgba(16, 36, 30, 0.3); }
.tblock.slim .tb:nth-child(n + 2) { border-top: 1px solid rgba(16, 36, 30, 0.3); }
/* a fact the plan agent hasn't read yet */
.progress .fine .mail { display: block; color: var(--brass-ink); }
.tb b.reading { color: var(--muted); font-weight: 500; animation: pulse 0.9s infinite alternate; }
.tb b, .tb input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1rem/1.2 var(--display); letter-spacing: -0.02em; }
.tb input { width: 100%; margin: -2px -4px; padding: 2px 4px; border: 0; border-radius: 2px; background: transparent; color: var(--ink); }
.tb input:hover { background: rgba(16, 36, 30, 0.05); }
.tb input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1px var(--green); }
.tb-end { align-content: center; justify-items: end; }
/* a small pill on the title block (Replace), like the front page's Replay */
.pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink);
  font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #f1ece1); box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.22), 0 1px 2px rgba(0, 0, 0, 0.12); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.pill svg { transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.pill:hover { color: var(--cream); background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 0 4px 10px -3px rgba(0, 0, 0, 0.35); }
.pill:hover svg { transform: translateY(-2px); }

.order { padding: 24px; }
/* what the start makes, one line above the button */
.gets { margin: 26px 0 16px; padding-top: 18px; border-top: 1px solid rgba(16, 36, 30, 0.14); font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.o-sec + .o-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(16, 36, 30, 0.14); }
/* Style cards: a print of the style's living room on a white card, its name and what it's made of. Picking one rings
   it in brass and sets a brass seal with a tick on the picture's corner. Your own is the same card, empty and dashed. */
.styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.style-opt { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 5px; cursor: pointer; background: #fffdf8;
  box-shadow: 0 0 0 1px rgba(16, 36, 30, 0.16), 0 1px 2px rgba(16, 36, 30, 0.06); transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s, background 0.2s; }
.style-opt:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(16, 36, 30, 0.38), 0 14px 24px -16px rgba(16, 36, 30, 0.5); }
.style-opt input { position: absolute; opacity: 0; }
.style-opt img, .style-opt .art { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.style-opt .txt { display: grid; align-content: start; gap: 3px; padding: 8px 10px 10px; }
.style-opt .nm { font: 600 0.8125rem/1.2 var(--body); letter-spacing: -0.01em; }
.style-opt .note { font-size: 0.6875rem; line-height: 1.3; color: var(--muted); }
.style-opt::after { content: ''; position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%; transform: scale(0); transition: transform 0.28s cubic-bezier(.2, 1.5, .4, 1);
  background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 L5 8.6 L9.4 3.6' fill='none' stroke='%2310241e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 0 0 2px #fffdf8, 0 4px 10px -2px rgba(0, 0, 0, 0.45); }
.style-opt:has(input:checked) { background: #fff6e2; box-shadow: 0 0 0 2px var(--brass-ink), 0 14px 24px -16px rgba(156, 108, 30, 0.7); }
.style-opt:has(input:checked)::after { transform: scale(1); }
.style-opt:has(input:checked) .nm { color: var(--brass-ink); }
.style-opt:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.style-opt:has(input:disabled) { cursor: not-allowed; opacity: 0.5; }
.style-opt:has(input:disabled):hover { transform: none; box-shadow: 0 0 0 1px rgba(16, 36, 30, 0.16); }
.style-opt:has(input:disabled) img { filter: grayscale(0.7); }
/* in Another style, a disabled card is a style the home already has: shown as done, in green */
.dlg .style-opt:has(input:disabled), .dlg .style-opt:has(input:disabled):hover { cursor: default; opacity: 1; background: #eef5f1; box-shadow: 0 0 0 1.5px var(--green); }
.dlg .style-opt:has(input:disabled) img { filter: none; }
.dlg .style-opt:has(input:disabled)::after { transform: scale(1); background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 L5 8.6 L9.4 3.6' fill='none' stroke='%23fffdf8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dlg .style-opt:has(input:disabled) .nm, .dlg .style-opt:has(input:disabled) .note { color: var(--green); }
.dlg .style-opt:has(input:focus-visible) { outline-color: var(--brass-ink); }
/* a switch under the styles: the knob slides over, the track turns green */
.toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 18px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .sw { position: relative; width: 36px; height: 20px; margin-top: 1px; border-radius: 999px; background: rgba(16, 36, 30, 0.2); transition: background 0.25s; }
.toggle .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.toggle input:checked + .sw { background: var(--green); }
.toggle input:checked + .sw::after { transform: translateX(16px); }
.toggle input:focus-visible + .sw { outline: 2px solid var(--green); outline-offset: 2px; }
.toggle b { display: block; font-size: 0.9375rem; font-weight: 600; }
.toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.toggle:has(input:disabled) { cursor: default; opacity: 0.6; }
/* until a style is picked: a brass note by the heading */
.p-label .nudge { color: var(--brass-ink); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { opacity: 0.45; } }
/* Your own's fields open out of the cards when it's picked: the row grows from nothing as they fade in */
.own { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(.2, .8, .2, 1), margin-top 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.3s ease; }
.own.open { grid-template-rows: 1fr; margin-top: 16px; opacity: 1; transition-delay: 0s, 0s, 0.08s; }
.own-in { display: grid; gap: 10px; min-height: 0; overflow: hidden; padding: 2px; margin: -2px; }
.sub-label { font-size: 0.875rem; font-weight: 600; }
.own textarea, .fix textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; resize: vertical; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.25); font-size: 0.9375rem; }
.own textarea:focus, .fix textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--green); }
.refs-drop { position: relative; display: block; padding: 11px 13px; border: 1.25px dashed rgba(16, 36, 30, 0.35); border-radius: 3px; cursor: pointer; font-size: 0.8125rem; color: var(--muted); }
.refs-drop:hover { border-color: var(--green); }
.refs-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.refs-drop b { color: var(--green); }
.ref-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ref-list img { width: 52px; height: 52px; border-radius: 2px; object-fit: cover; }
.ref-list button { padding: 0; border: 0; background: none; cursor: pointer; }
.ref-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; }

/* ── 3 · Making ── */
/* the plan faded on its sheet, as on the front page, and a warm light passing over it while the home is made */
.plot-base { width: 100%; display: grid; place-items: center; }
.plot-base img { display: block; width: 100%; height: auto; padding: 18px; mix-blend-mode: multiply; filter: saturate(0.25) brightness(1.06) contrast(0.92); }
.working::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(224, 180, 90, 0.2) 50%, transparent 62%) 0 0 / 300% 100% no-repeat; animation: sheen 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.working.stopped::after { content: none; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* what's being worked on, on the sheet's corner */
.work-chip { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45); }
.work-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); animation: pulse 0.9s infinite alternate; }
.stopped .work-chip i { background: #c4553b; animation: none; }
.progress { padding: 24px; }
.cancel-line { margin-top: 14px; text-align: center; }
.cancel-line .linkish { color: rgba(244, 239, 226, 0.6); }
.cancel-line .linkish:hover { color: var(--cream); }
.issue-line { margin-top: 10px; text-align: center; }
.eta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.eta-n { display: flex; align-items: baseline; gap: 8px; margin: -6px 0 0; }
.eta-n b { font: 600 2.75rem/1 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.eta-n span { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
/* the progress bar, drawn as a dimension line with ticks at its ends */
.pbar { position: relative; height: 18px; margin: 14px 0 20px; }
.pbar::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: rgba(16, 36, 30, 0.25); }
.pbar::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) left / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) right / 1px 100% no-repeat; }
.pbar i { position: absolute; left: 0; top: 7px; height: 3px; width: 0; background: var(--green); transition: width 0.3s linear; }
.runlist { display: grid; list-style: none; margin: 0 0 22px; padding: 0; counter-reset: n; }
.runlist li { counter-increment: n; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(16, 36, 30, 0.12); color: rgba(16, 36, 30, 0.45); }
.runlist li::before { content: counter(n); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font: 500 0.6875rem/1 var(--mono); }
.runlist b { display: block; font-size: 0.9375rem; font-weight: 600; }
.runlist small { display: block; font-size: 0.8125rem; }
.runlist .st { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.runlist li.now { color: var(--ink); }
.runlist li.now::before { border-color: var(--brass-ink); background: var(--brass); color: var(--ink); animation: pulse 0.9s infinite alternate; }
.runlist li.now .st { color: var(--brass-ink); }
.runlist li.done { color: var(--ink); }
.runlist li.done::before { content: '✓'; border-color: var(--green); background: var(--green); color: var(--cream); }
.runlist li.done .st { color: var(--green); }

/* ── Help: on the mat, as the front page does: how it works across the top, the questions beside one paper card (the
   only thing to fill in), the prices under it ── */
.help-how { margin-bottom: 40px; }
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: how; }
.how li { display: grid; align-content: start; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(244, 239, 226, 0.14); counter-increment: how; }
.how li::before { content: counter(how, decimal-leading-zero); font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.12em; color: var(--brass); }
.how b { font: italic var(--accent-weight) 1.375rem/1.1 var(--accent); font-variation-settings: var(--accent-axes); color: var(--cream); }
.how span { font-size: 0.9rem; line-height: 1.5; color: rgba(244, 239, 226, 0.65); }
.help-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.help-side { display: grid; gap: 34px; min-width: 0; }
.help-main { display: grid; gap: 44px; min-width: 0; }
.help-biz { max-width: 62ch; }
.help-faq details { border-top: 1px solid rgba(244, 239, 226, 0.14); }
.help-faq details:last-of-type { border-bottom: 1px solid rgba(244, 239, 226, 0.14); }
.help-faq summary { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; cursor: pointer; list-style: none; font-weight: 500; color: var(--cream); }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary:hover { color: var(--brass); }
.help-faq summary::after { content: '+'; font: 300 1.25rem/1 var(--body); color: var(--brass); transition: transform 0.25s; }
.help-faq details[open] summary::after { transform: rotate(45deg); }
.help-faq details p { margin: -4px 0 16px; max-width: 62ch; font-size: 0.9375rem; line-height: 1.55; color: rgba(244, 239, 226, 0.65); }
.report { display: grid; gap: 10px; justify-items: start; }
.report textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; resize: vertical; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.25); font: inherit; font-size: 0.9375rem; }
.report textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--green); }
.report .pill-field { width: 100%; }
.touch-mail { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(16, 36, 30, 0.14); font-size: 0.875rem; color: var(--muted); }
.touch-mail a { font-weight: 500; color: var(--green); text-underline-offset: 3px; }
.touch-mail a:hover { color: var(--ink); }
.price-list { width: 100%; border-collapse: collapse; }
.price-list th, .price-list td { padding: 10px 0; border-bottom: 1px solid rgba(244, 239, 226, 0.14); font-size: 0.9375rem; text-align: left; color: var(--cream); }
.price-list th { font-weight: 500; }
.price-list td { text-align: right; font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.04em; color: var(--brass); font-variant-numeric: tabular-nums; }
.help-biz { padding-top: 18px; border-top: 2px solid var(--brass); }
.help-biz h3 { margin: 0 0 10px; font: 600 1.375rem/1.15 var(--display); letter-spacing: -0.02em; color: var(--cream); }
.help-biz h3 em { font: italic var(--accent-weight) 1.06em/1 var(--accent); font-variation-settings: var(--accent-axes); color: var(--brass); }
.help-biz p:not(.p-label) { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.55; color: rgba(244, 239, 226, 0.68); }
.price-note { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.5; color: rgba(244, 239, 226, 0.6); }
.price-note a { color: var(--cream); text-underline-offset: 3px; }
.price-note a:hover { color: var(--brass); }
@media (max-width: 1180px) { .help-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── 4 · The pack ── */
.demo-note { margin: 0 0 18px; padding: 10px 14px; border-radius: 4px; background: rgba(224, 180, 90, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 180, 90, 0.35); color: rgba(244, 239, 226, 0.85); font-size: 0.8125rem; }
.demo-note:empty { display: none; }
/* the plan reading's notes: on the sheet in ink, on the pack like the demo note */
.plan-notes { list-style: none; display: grid; gap: 6px; margin: 12px 0 0; padding: 0; font-size: 0.8125rem; line-height: 1.45; }
.plan-notes li { padding: 8px 10px; border: 1px solid rgba(16, 36, 30, 0.3); border-left: 3px solid var(--brass-ink); color: var(--ink); }
.plan-notes b { font-weight: 600; }
.plan-notes.on-mat { margin: 0 0 18px; }
.plan-notes.on-mat li { border: 0; border-radius: 4px; background: rgba(224, 180, 90, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 180, 90, 0.35); color: rgba(244, 239, 226, 0.85); }
.plan-notes.on-mat b { color: var(--cream); }
.pack-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 32px; margin-bottom: 24px; }
.pack-title { display: grid; gap: 8px; min-width: 0; }
.pack-title h1 { margin: 0; overflow-wrap: anywhere; }
/* the home's facts under its name, as on a drawing's title block */
.pack-facts { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 239, 226, 0.55); }
.pack-facts > span + span::before { content: '·'; margin: 0 10px; opacity: 0.6; }
.pack-facts .ok { color: #9fd3b8; }
/* a mark for how the home was asked for (reinvented, instructions); what it means in a small paper card on hover */
.pack-facts .mark { position: relative; cursor: help; color: rgba(224, 180, 90, 0.9); }
.pack-facts .mark:focus-visible { outline-offset: 2px; }
.pack-facts .mark i { font-style: normal; margin-right: 5px; }
.pack-facts .tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(340px, 80vw); display: none; gap: 4px; padding: 10px 12px; border-radius: 6px; color: var(--ink); background: var(--grain), var(--paper); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.65); font: 400 0.8125rem/1.45 var(--body); letter-spacing: 0; text-transform: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.pack-facts .tip b { font-weight: 600; }
.pack-facts .mark:hover .tip, .pack-facts .mark:focus .tip { display: grid; }
.steps[hidden] { display: none; }
.pack-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* ⋯ beside the actions: a small menu on paper */
.more { position: relative; }
.more-btn { width: 50px; padding: 0; font-size: 1.375rem; letter-spacing: 0; }
.more-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 200px; display: grid; padding: 6px; border-radius: 6px; color: var(--ink); background: var(--grain), var(--paper); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.65); }
.more-menu[hidden] { display: none; }
.more-menu button { padding: 10px 12px; border: 0; border-radius: 4px; background: none; cursor: pointer; text-align: left; font: 500 0.9rem/1.2 var(--body); color: var(--ink); }
.more-menu button:hover, .more-menu button:focus-visible { background: rgba(16, 36, 30, 0.07); }
.more-menu [data-remove] { color: #a3361f; }
.dev-tag { margin-left: 6px; padding: 1px 6px; border-radius: 3px; font: 600 0.5625rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); background: #6b3fa0; vertical-align: 1px; }
/* dev mode on: a marker over the rail, so it's never mistaken for the real thing */
.dev-mode { position: fixed; left: 0; top: 0; z-index: 60; padding: 3px 10px 4px; border-radius: 0 0 6px 0; font: 600 0.625rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); background: #6b3fa0; }
/* admin (app.js adminPanel): under the home, in dev mode's purple so it's never mistaken for the customer's view */
.admin { margin-top: 32px; padding: 20px 22px 24px; box-shadow: inset 0 3px 0 #6b3fa0, 0 1px 0 rgba(0, 0, 0, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
.admin .p-label { color: #6b3fa0; }
.admin .p-label .left { color: var(--muted); }
.admin .p-label .linkish { font: inherit; letter-spacing: 0.08em; color: #6b3fa0; }
.admin a { color: var(--green); }
.adm-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 8px; font: 500 0.8125rem/1.4 var(--mono); overflow-wrap: anywhere; }
.adm-facts small, .adm-more small { display: block; font: 500 0.625rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.adm-jobs { display: block; overflow-x: auto; font: 0.75rem/1.4 var(--mono); }
.adm-jobs td { white-space: nowrap; }
.adm-more td { padding-top: 0; white-space: normal; }
.adm-more p { margin: 0 0 8px; }
.adm-err { max-height: 220px; margin: 6px 0 10px; padding: 8px 10px; overflow: auto; border-left: 3px solid #a3361f; background: rgba(163, 54, 31, 0.06); font: 0.75rem/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-ws { margin-top: 28px; }
/* the Coupons screen (app.js drawCoupons) */
.coupons { margin-top: 0; }
.cp-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-items: end; margin-top: 14px; }
.cp-form .cp-field:first-child { grid-column: 1 / -1; }
.cp-field { display: grid; gap: 4px; }
.cp-field small, .cp-made small { font: 500 0.625rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cp-made { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 4px; background: rgba(107, 63, 160, 0.07); }
.cp-made small { flex-basis: 100%; }
.cp-made .pill-field { font: 0.8125rem var(--mono); }
.adm-stage { padding: 14px 0 6px; border-top: 1px solid rgba(16, 36, 30, 0.14); }
.adm-stage-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; font: 0.8125rem/1.4 var(--mono); }
.adm-st { color: var(--muted); }
.adm-st.ok { color: var(--green); }
.adm-st.failed { color: #a3361f; }
.adm-st.running { color: var(--brass-ink); }
.adm-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.adm-thumbs button { display: grid; gap: 4px; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.adm-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.14); }
.adm-thumbs span { font: 0.625rem/1.3 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.adm-stage details { margin: 4px 0 8px; }
.adm-stage summary { cursor: pointer; font: 500 0.75rem/1.6 var(--mono); color: var(--green); }
.adm-stage details > :not(summary) { margin-top: 10px; }
.adm-files { margin: 0; padding: 0; list-style: none; font: 0.75rem/1.7 var(--mono); }
.adm-files small { margin-left: 8px; color: var(--muted); }
.dlg.small { width: min(440px, calc(100vw - 32px)); }
.btn.danger { background: #a3361f; }
.btn.danger:hover { background: #8a2c18; }

/* the home's styles: one tab each, and one to add another */
/* the home's styles: one-line chips under its name, a mono number and the name in the accent face; the open one ringed
   in brass */
.looks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.looks:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: rgba(244, 239, 226, 0.04); color: rgba(244, 239, 226, 0.75); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.25); white-space: nowrap; transition: box-shadow 0.2s, color 0.2s, background 0.2s; }
.chip b { display: block; padding-top: 1px; font: italic var(--accent-weight) 1.0625rem/1 var(--accent); font-variation-settings: var(--accent-axes); }
.chip small { display: block; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 239, 226, 0.45); }
.chip:hover:not(:disabled) { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.6); }
.chip[aria-pressed='true'] { color: var(--brass); background: rgba(224, 180, 90, 0.1); box-shadow: inset 0 0 0 1.5px var(--brass); }
.chip[aria-pressed='true'] small { color: rgba(224, 180, 90, 0.75); }
.chip:disabled { cursor: progress; opacity: 0.7; }
.chip.yours { background: none; color: var(--brass); box-shadow: none; outline: 1px dashed rgba(224, 180, 90, 0.5); outline-offset: -1px; }
.chip.yours:hover { outline-color: var(--brass); }
.chip.yours b { font-style: normal; font: 500 0.875rem/1 var(--body); }
.chip.yours small { color: rgba(224, 180, 90, 0.7); }
.chip .plus { font: 300 1.125rem/1 var(--body); }
.pack { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.shot { margin: 0; padding: 10px 10px 0; border-radius: 4px; background: var(--print); box-shadow: 0 0 0 1px rgba(244, 239, 226, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.75); }
.shot-img { display: block; width: 100%; padding: 0; border: 0; background: #08140f; cursor: zoom-in; }
.shot-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity 0.35s; }
.shot-img img.doll { object-fit: contain; background: #f6f3ee; }
.shot figcaption { display: flex; align-items: baseline; gap: 14px; padding: 12px 4px 14px; }
.shot figcaption b { font: italic var(--accent-weight) 1.375rem/1 var(--accent); font-variation-settings: var(--accent-axes); color: var(--brass); }
.shot figcaption span { font: 500 0.75rem/1 var(--mono); color: rgba(244, 239, 226, 0.5); }
.shot figcaption a { margin-left: auto; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 239, 226, 0.75); text-underline-offset: 3px; }
.shot figcaption a:hover { color: var(--brass); }
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 12px; }
.strip button { display: grid; gap: 0; padding: 4px 4px 0; border: 0; border-radius: 3px; background: var(--print); cursor: pointer; text-align: left; color: rgba(244, 239, 226, 0.7); transition: box-shadow 0.15s, color 0.15s; }
.strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.strip img.doll { object-fit: contain; background: #f6f3ee; }
.strip span { padding: 6px 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.6875rem/1.2 var(--mono); }
.strip button:hover { color: var(--cream); }
.strip button[aria-current='true'] { color: var(--brass); box-shadow: 0 0 0 2px var(--brass); }
.inspector { display: grid; gap: 14px; }
/* under the tweak panel: report an issue with what's on show (a dialog, app.js) */
.issue-open { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 7px 12px 7px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: rgba(244, 239, 226, 0.6); font-size: 0.8125rem; box-shadow: inset 0 0 0 1px rgba(244, 239, 226, 0.14); transition: color 0.15s, box-shadow 0.15s; }
.issue-open:hover { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(224, 180, 90, 0.6); }
.issue-text { width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; resize: vertical; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.25); font: inherit; font-size: 0.9375rem; }
.issue-text:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--green); }
.ins { padding: 18px 18px 20px; }
.ins-text { margin: -4px 0 12px; font-size: 0.875rem; color: var(--muted); }
.map { position: relative; background: #f9f6ef; }
/* the Rooms panel in the dollhouse renders' own off-white, so the picture sits on it without a frame */
.ins[data-map-panel] { background: #f9f6ef; }
.map > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vpt { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  color: var(--cream); font: 600 0.75rem/1 var(--body); background: var(--mat-deep); box-shadow: 0 0 0 2px var(--cream), 0 4px 10px -2px rgba(0, 0, 0, 0.5); transition: transform 0.2s cubic-bezier(.2, 1.4, .4, 1), background 0.2s, color 0.2s; }
.vpt:hover, .vpt[aria-pressed='true'] { transform: scale(1.15); color: var(--ink); background: var(--brass); box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(224, 180, 90, 0.3); }
.share-open { display: grid; place-items: center; width: 34px; flex: none; border-radius: 50%; color: var(--green); text-decoration: none; font-size: 1.125rem; box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.25); }
.share-open:hover { box-shadow: inset 0 0 0 1.5px var(--green); }
/* the share panel: one row per place the home goes, what it's for on the left, its copy button on the right */
.share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 14px 0; border-top: 1px solid rgba(16, 36, 30, 0.1); }
.share-row:first-child { padding-top: 0; border-top: 0; }
.share-row > p { display: grid; gap: 3px; margin: 0; flex: 1 1 140px; }
.share-row b { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.share-row span { font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.share-row > .btn, .share-acts { flex: none; }
.share-acts { display: flex; gap: 8px; }
.share-link { flex: 1 1 100%; min-width: 0; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.25); color: var(--ink); font: 500 0.8125rem/1 var(--mono); }
.share-live { display: inline-flex; align-items: center; gap: 6px; }
.share-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.share-stop { margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.share-stop:hover { color: var(--ink); }
.ins > .linkish { margin-top: 12px; color: var(--green); }
.embed { margin: 10px 0 0; padding: 10px 12px; border-radius: 3px; background: var(--print); color: rgba(244, 239, 226, 0.85); font: 400 0.75rem/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.fix { display: grid; gap: 10px; justify-items: start; }
/* the pictures to go with a tweak on the left, the button on the right */
.fix-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; justify-self: stretch; }
.fix-foot .btn { margin-left: auto; }
/* a picture dragged over the tweak panel */
.ins[data-tweak-panel] { transition: box-shadow 0.15s; }
.ins[data-tweak-panel].dropping { box-shadow: inset 0 0 0 2px var(--green), 0 1px 0 rgba(0, 0, 0, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
.attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.attach-add { position: relative; color: var(--green); font-size: 0.8125rem; }
.attach-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach-list { display: flex; gap: 6px; }
.attach-list button { position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; background: none; }
.attach-list img { width: 100%; height: 100%; object-fit: cover; }
.attach-list button::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(16, 36, 30, 0.55); opacity: 0; transition: opacity 0.15s; }
.attach-list button:hover::after { opacity: 1; }
.revs { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 0.8125rem; }
.revs th { padding: 0 6px 8px; text-align: left; border-bottom: 1.5px solid var(--ink); font: 500 0.625rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.revs td { padding: 10px 6px; vertical-align: top; border-bottom: 1px solid rgba(16, 36, 30, 0.14); }
.revs td:first-child { width: 36px; }
.revs td small { display: block; margin-top: 2px; font: 500 0.625rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.delta { display: inline-grid; place-items: end center; width: 22px; height: 20px; padding-bottom: 2px; background: var(--brass); color: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); font: 600 0.625rem/1 var(--mono); }
.rv-status { white-space: nowrap; font: 500 0.625rem/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }
.rv-status.sent { color: var(--muted); }
.v-row { display: flex; gap: 10px; align-items: flex-start; }
.v-thumb { flex: none; width: 54px; height: 36px; border-radius: 2px; object-fit: cover; background: rgba(16, 36, 30, 0.08); }
.revs tr.pickable { cursor: pointer; }
.revs tr.pickable:hover td, .revs tr.pickable:focus-visible td { background: rgba(16, 36, 30, 0.05); }
.revs tr.pickable:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.revs tr.shown td { background: rgba(30, 94, 75, 0.07); }
.revs tr.shown .v-thumb { box-shadow: 0 0 0 2px var(--green); }
.rv-status.done { color: var(--green); }
.rv-status.failed { color: #a3361f; }
/* every state has a mark before the word, the same size as the turning arc: a tick, a cross, a dashed ring */
.rv-status.done::before, .rv-status.failed::before, .rv-status.sent:not(.busy)::before { content: ''; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5em; vertical-align: -0.12em; box-sizing: border-box; }
.rv-status.done::before { width: 0.85em; height: 0.45em; margin-right: 0.55em; vertical-align: 0.1em; border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(-45deg); }
.rv-status.failed::before { background: linear-gradient(45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%); }
.rv-status.sent:not(.busy)::before { border-radius: 50%; border: 1.5px dashed currentColor; }
/* something is being made: a small brass arc turning before the word */
.busy::before { content: ''; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5em; vertical-align: -0.12em; border-radius: 50%;
  border: 1.5px solid rgba(156, 108, 30, 0.22); border-top-color: var(--brass-ink); animation: spin 0.9s linear infinite; }
.rv-status.busy { color: var(--brass-ink); }
.chip.busy small::before { content: ''; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.45em; vertical-align: -0.1em; border-radius: 50%;
  border: 1.5px solid rgba(224, 180, 90, 0.25); border-top-color: var(--brass); animation: spin 0.9s linear infinite; }
.chip.busy::before { content: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* a button busy with something (Download all: Preparing…) */
.btn .spin { width: 1em; height: 1em; flex: none; border-radius: 50%; border: 2px solid rgba(16, 36, 30, 0.25); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }

/* Dialogs: a sheet of paper over the dimmed mat */
.dlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 4px; color: var(--ink); background: var(--grain), var(--paper); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
/* dialogs fade and rise in, and fade out, with their backdrop */
.dlg { opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.22s ease, transform 0.3s cubic-bezier(.2, .8, .2, 1), overlay 0.3s allow-discrete, display 0.3s allow-discrete; }
.dlg[open] { opacity: 1; transform: none; }
@starting-style { .dlg[open] { opacity: 0; transform: translateY(10px) scale(0.985); } }
.dlg::backdrop { background: rgba(5, 16, 12, 0); transition: background 0.3s ease, overlay 0.3s allow-discrete, display 0.3s allow-discrete; }
.dlg[open]::backdrop { background: rgba(5, 16, 12, 0.6); }
@starting-style { .dlg[open]::backdrop { background: rgba(5, 16, 12, 0); } }
.dlg-body { display: grid; gap: 14px; padding: 22px; }
.dlg-body .p-label, .dlg-body .ins-text { margin: 0; }
.dlg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.dlg-foot .fine { margin: 0 auto 0 0; }
.dlg .styles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dlg-body > .toggle, .dlg-body > .own.open { margin-top: 0; }
/* Another style grows with Custom style open: its buttons stay in sight while it scrolls */
[data-restyle] .dlg-foot { position: sticky; bottom: 0; margin: 0 -22px -22px; padding: 12px 22px 22px; background: var(--grain), var(--paper); }
.dlg .style-opt img, .dlg .style-opt .art { aspect-ratio: 16 / 9; }
.dlg .style-opt .txt { gap: 1px; padding: 5px 9px 7px; }
.style-opt .art.word { display: grid; place-items: center; padding: 10px; text-align: center; background: var(--mat); color: var(--brass); font: italic var(--accent-weight) 1.125rem/1.05 var(--accent); font-variation-settings: var(--accent-axes); }
.btn.google { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.3); }
.btn.google:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.or { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: rgba(16, 36, 30, 0.18); }
.signin-form { display: flex; gap: 8px; }
.pill-field { flex: 1; min-width: 0; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.25); color: var(--ink); font: inherit; font-size: 0.9375rem; }
.pill-field:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--green); }
.signin-sent { display: grid; gap: 12px; }
.pill-field.code { font: 600 1.125rem/1 var(--mono); letter-spacing: 0.2em; }
.buy-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* buying credits: the dialog itself in warm brass-olive, the packs as cream cards on it that lift on hover */
.dlg[data-buy-dlg] { background: linear-gradient(165deg, #efe1ad, #d9c07a); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(122, 82, 18, 0.35); }
.dlg[data-buy-dlg] .p-label { color: rgba(16, 36, 30, 0.7); }
.dlg[data-buy-dlg] .ins-text, .dlg[data-buy-dlg] .fine { color: rgba(16, 36, 30, 0.75); }
.dlg[data-buy-dlg] .btn.line { box-shadow: inset 0 0 0 1px rgba(16, 36, 30, 0.45); }
.buy-pack { position: relative; display: grid; justify-items: start; gap: 2px; padding: 16px 16px 14px; border: 0; border-radius: 6px; cursor: pointer; text-align: left; color: var(--ink);
  background: #fbf6e6; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 22px -14px rgba(80, 56, 12, 0.55);
  transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s; }
.buy-pack:hover, .buy-pack:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--brass-ink), 0 18px 28px -14px rgba(80, 56, 12, 0.7); outline: none; }
.buy-pack b { font: 700 2rem/1 var(--display); letter-spacing: -0.04em; }
.buy-pack span { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(16, 36, 30, 0.55); }
.buy-pack .bonus { position: absolute; top: 14px; right: 14px; padding: 4px 8px; border-radius: 999px; font: 600 0.6875rem/1 var(--mono); font-style: normal; letter-spacing: 0.06em; color: #fbf6e6; background: var(--green); }
.buy-pack i { margin-top: 12px; font: italic var(--accent-weight) 1.625rem/1 var(--accent); font-variation-settings: var(--accent-axes); color: #7a5212; }
.buy-pack small { font-size: 0.8125rem; color: rgba(16, 36, 30, 0.65); }
@media (max-width: 560px) { .buy-packs { grid-template-columns: minmax(0, 1fr); } }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px;
  color: var(--ink); background: linear-gradient(180deg, #b4ded0, #9fd3bf); font-size: 0.9rem; font-weight: 500; /* the rail's pale green */
  box-shadow: inset 0 1px 0 rgba(240, 255, 248, 0.6), inset 0 -1px 0 rgba(16, 60, 45, 0.2), 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, 140%); opacity: 0; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.3s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast .linkish { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1180px) {
  .work, .pack { grid-template-columns: minmax(0, 1fr); }
  .sheet { position: static; }
  .inspector { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .steps li:not(.now) { font-size: 0; gap: 0; }
  .steps li + li::before { width: 14px; }
}
@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; z-index: 40; left: 0; top: 0; width: min(320px, 86vw); transform: translateX(-102%); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
  body.rail-open .rail { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(5, 16, 12, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  body.rail-open .scrim { opacity: 1; pointer-events: auto; }
  .menu { display: grid; gap: 4px; flex: none; width: 40px; height: 40px; place-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 239, 226, 0.06); cursor: pointer; }
  .menu i { width: 16px; height: 1.5px; background: var(--cream); }
  .bar { gap: 12px; }
  .crumbs span { display: none; }
  .start-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .steps { display: none; }
  .styles, .dlg .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample { grid-template-rows: 120px auto; }
  .tb b, .tb input { font-size: 0.875rem; }
  .pack-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .pack-actions .btn { padding: 0 14px; }
  .pack-actions [data-zip] small { display: none; }
}

/* ── The room, full screen (base.css): the work area holds still while it's open ── */
html:has(.room-view.open) .main { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }