/*
 * Editor styles. Only token variables from tokens.css are used for colour, type, spacing
 * and radius, so restyling starts in tokens.css. Sections: base, header, panel, options,
 * stage, poster, review, phone.
 */

/* ---- Base ------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:lang(ja) { letter-spacing: .04em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  height: 52px; padding: 0 var(--space-5); border: 1px solid var(--line-control); border-radius: var(--radius-lg);
  background: transparent; color: var(--ink); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
}
.btn:hover { background: var(--surface); }
.btn-next { background: var(--surface); font-weight: 700; }
.btn-primary { background: var(--shu); border-color: var(--shu); color: var(--on-shu); font-weight: 700; }
.btn-primary:hover { background: var(--shu-strong); border-color: var(--shu-strong); }
.btn-wide { width: 100%; height: 56px; font-size: var(--text-body); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-quiet {
  min-height: 44px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--ink); font-size: var(--text-body-sm); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.btn-quiet:hover { background: var(--surface-sunk); }
.icon-btn {
  position: relative; width: 44px; height: 44px; flex: none; border: 1px solid var(--line-control);
  border-radius: var(--radius-md); background: transparent; display: inline-flex; align-items: center; justify-content: center;
}
.count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--shu); color: var(--on-shu);
  font-size: var(--text-caption); font-weight: 700; line-height: 20px; text-align: center;
}

/* ---- Header ------------------------------------------------------------------------ */
.topbar {
  height: var(--header-h); flex: none; padding: 0 var(--space-7);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.wordmark {
  justify-self: start; font-family: var(--font-wordmark); font-weight: 800; font-size: var(--text-wordmark);
  letter-spacing: -.02em; text-transform: lowercase; color: var(--ink); text-decoration: none;
}
.topbar-end { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); }
.price { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax { font-size: var(--text-caption); font-weight: 400; color: var(--ink-muted); margin-left: 2px; }

.steps { display: flex; gap: var(--space-2); }
.step {
  width: 96px; padding: var(--space-2) 0; border: 0; background: transparent; text-align: left;
  display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink-muted);
}
.step-label { font-size: var(--text-caption); font-weight: 600; letter-spacing: .04em; line-height: 16px; }
.step-bar { display: block; height: 3px; border-radius: var(--radius-pill); background: var(--line); }
.step[data-state="done"], .step[aria-current="step"] { color: var(--ink); }
.step[data-state="done"] .step-bar { background: var(--ink); }
.step[aria-current="step"] .step-bar { background: var(--shu); }
.review-mode .steps { visibility: hidden; }

/* ---- Editor panel ------------------------------------------------------------------ */
.editor { flex: 1; min-height: 0; display: flex; }
.panel { width: var(--panel-w); flex: none; display: flex; flex-direction: column; min-height: 0; }
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-6) 56px 0 var(--space-8); }
.eyebrow {
  display: block; font-size: var(--text-label); line-height: 16px; font-weight: 700; letter-spacing: .14em;
  color: var(--shu); text-transform: uppercase;
}
.eyebrow:lang(ja) { text-transform: none; letter-spacing: .08em; }
.question {
  margin: 14px 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-display-xl);
  font-weight: 700; line-height: 1.02; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.question:lang(ja) { letter-spacing: 0; line-height: 1.3; font-size: calc(var(--text-display-xl) * .8); }
.intro { margin: 0 0 var(--space-5); color: var(--ink-muted); line-height: 1.5; }
.step-body { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); }
.panel-actions { flex: none; display: flex; gap: var(--space-3); padding: var(--space-4) 56px var(--space-7) var(--space-8); }
.panel-actions .btn-back[disabled] { opacity: .4; }

/* ---- Options (place results, moods, sizes, fonts, frames) ------------------------- */
.options { display: flex; flex-direction: column; gap: var(--space-1); }
.option {
  min-height: 54px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--line-control); border-radius: var(--radius-lg); background: transparent; color: var(--ink);
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
}
.options-quiet .option { border-color: transparent; }
.option:hover { background: var(--surface); }
.option[aria-checked="true"] {
  background: var(--surface); border: 2px solid var(--ink);
  padding: calc(var(--space-2) - 1px) calc(var(--space-4) - 1px) calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}
.option-icon { flex: none; color: var(--ink-muted); }
.option-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.option-inline { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.option-title { font-size: var(--text-body); font-weight: 600; line-height: 22px; }
.option-detail { font-size: var(--text-label); line-height: 18px; color: var(--ink-muted); }
.option-price { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.option-size { width: 112px; flex: none; font-weight: 600; white-space: nowrap; }
.tick { flex: none; color: var(--shu); visibility: hidden; }
.option[aria-checked="true"] .tick { visibility: visible; }
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm);
  background: var(--shu-soft); color: var(--shu-strong); font-size: var(--text-caption); font-weight: 700; white-space: nowrap;
}
.swatches { display: flex; flex: none; }
.swatches span {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 2px var(--paper);
}
.swatches span + span { margin-left: -6px; }
.status-line { font-size: var(--text-body-sm); color: var(--ink-muted); margin: var(--space-1) 0; }

.search {
  height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4);
  border: 1px solid var(--line-control); border-radius: var(--radius-xl); background: var(--surface); color: var(--ink-muted);
}
.search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.search input { flex: 1; min-width: 0; height: 50px; border: 0; outline: none; background: transparent; color: var(--ink); font-size: var(--text-body); }
.search input::placeholder { color: var(--ink-muted); }
.locate { align-self: flex-start; }
.locate svg { color: var(--shu); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: var(--text-label); font-weight: 600; color: var(--ink-muted); }
.input {
  height: 52px; padding: 0 14px; border: 1px solid var(--line-control); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); font-size: var(--text-body); min-width: 0; width: 100%;
}
.input-mono { font-family: var(--font-mono); }
.help { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-caption); color: var(--ink-muted); }
.field[data-invalid] .input { border: 2px solid var(--danger); padding: 0 13px; }
.field[data-invalid] .help { color: var(--danger); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }

.tile {
  height: 92px; padding: 0 var(--space-3); border: 1px solid var(--line-control); border-radius: var(--radius-lg);
  background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 6px; text-align: left; min-width: 0;
}
.tile[aria-checked="true"] { background: var(--surface); border: 2px solid var(--ink); padding: 0 calc(var(--space-3) - 1px); }
.tile-sample { font-size: 20px; font-weight: 600; line-height: 1.5; padding-right: .15em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-name { font-size: var(--text-caption); color: var(--ink-muted); }
.tile-frame { height: 72px; align-items: center; }
.tile-frame .tile-name { color: var(--ink); font-weight: 600; font-size: var(--text-label); }
.frame-swatch { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.label { font-size: var(--text-label); font-weight: 600; color: var(--ink-muted); }

.switch {
  height: 52px; padding: 0 var(--space-1); border: 0; background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 15px; font-weight: 500; text-align: left;
}
.switch-track { position: relative; width: 44px; height: 26px; flex: none; border-radius: var(--radius-pill); background: var(--line-control); transition: background .15s; }
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); transition: left .15s;
}
.switch[aria-checked="true"] .switch-track { background: var(--shu); }
.switch[aria-checked="true"] .switch-track::after { left: 21px; }
.switch:disabled { color: var(--ink-muted); cursor: default; }
.switch:disabled .switch-track { opacity: .45; background: var(--line-control); }

/* ---- Stage ------------------------------------------------------------------------- */
.stage {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  margin: 0 var(--space-5) var(--space-5) 0; border-radius: var(--radius-stage); background: var(--surface-sunk);
}
.stage-hint {
  position: absolute; top: 20px; right: var(--space-5); display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-label); color: var(--ink-muted); z-index: 2;
}
.stage-poster { position: absolute; left: 0; right: 0; top: 0; bottom: 40px; display: flex; align-items: center; justify-content: center; }
.zoom {
  position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2;
}
.zoom-box {
  display: flex; flex-direction: column; align-items: center; padding: var(--space-1);
  border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--shadow-pop);
}
.zoom-btn { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; }
.zoom-btn[disabled] { opacity: .35; cursor: default; }
.zoom-dots { display: flex; flex-direction: column-reverse; gap: 3px; padding: 2px 0 4px; }
.zoom-dots i { display: block; width: 14px; height: 3px; border-radius: 2px; background: var(--line); }
.zoom-dots i.on { background: var(--ink); }
.zoom-name { font-size: var(--text-micro); font-weight: 700; color: var(--ink-muted); }

/* Size step: the poster to scale above a sofa silhouette. */
.sofa, .scale-note { display: none; }
.is-scale .zoom { display: none; }
.is-scale .stage-poster { align-items: flex-end; bottom: calc(var(--sofa-h, 240px) + 56px + 30px); }
.is-scale .sofa { display: block; position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); width: var(--sofa-w, 600px); height: var(--sofa-h, 240px); opacity: .3; }
.sofa i { position: absolute; display: block; background: #000; }
.sofa i:nth-child(1) { left: 7%; right: 7%; top: 0; height: 62%; border-radius: 30px 30px 10px 10px; }
.sofa i:nth-child(2) { left: 12%; right: 12%; bottom: 11%; height: 35%; border-radius: 14px; background: #161616; }
.sofa i:nth-child(3) { left: 0; bottom: 11%; width: 13%; height: 58%; border-radius: 26px 26px 12px 12px; }
.sofa i:nth-child(4) { right: 0; bottom: 11%; width: 13%; height: 58%; border-radius: 26px 26px 12px 12px; }
.sofa i:nth-child(5) { left: 12%; right: 12%; bottom: 11%; height: 9%; }
.sofa i:nth-child(6) { left: 7%; bottom: 0; width: 2%; height: 11%; }
.sofa i:nth-child(7) { right: 7%; bottom: 0; width: 2%; height: 11%; }
.is-scale .scale-note { display: block; position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; font-size: var(--text-label); color: var(--ink-muted); }
/* With the wall photo (scenes.js SIZE_WALL): the room is a photo and the poster is placed on it. */
.stage-photo { display: none; position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none; }
.is-scale.has-wall .stage-photo { display: block; }
.is-scale.has-wall .sofa { display: none; }
.is-scale.has-wall .stage-poster { inset: 0; display: block; }
.is-scale.has-wall .poster-frame { position: absolute; box-shadow: 0 3px 8px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .12); }
.is-scale.has-wall .scale-note { left: 50%; right: auto; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); white-space: nowrap; }

/* ---- Poster (the printed product) ------------------------------------------------- */
.poster-frame { position: relative; padding: var(--frame-pad, 0); background: var(--frame-color, transparent); box-shadow: var(--shadow-poster); flex: none; }
.poster-frame[data-frame="black"] { --frame-color: var(--frame-black); --grain-h: var(--frame-grain-fine-h); --grain-v: var(--frame-grain-fine-v); --sheen: .1; }
.poster-frame[data-frame="oak"] { --frame-color: var(--frame-oak); --grain-h: var(--frame-grain-oak-h); --grain-v: var(--frame-grain-oak-v); --sheen: .16; }
.poster-frame[data-frame="white"] { --frame-color: var(--frame-white); --grain-h: var(--frame-grain-fine-h); --grain-v: var(--frame-grain-fine-v); --sheen: .22; }
/* A moulding, not a flat band: wood grain along each side, mitred at the corners (the sides are
   their own pieces, poster.js), light from above (top lit, bottom in shade, left a touch lighter
   than right), a rounded profile across each side, a fine arris on the outer edge, the lip's
   shadow on the paper and a faint reflection on the glass. */
.poster-frame:not([data-frame="none"]) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, var(--sheen)), rgba(255, 255, 255, 0) var(--frame-pad), rgba(0, 0, 0, 0) calc(100% - var(--frame-pad)), rgba(0, 0, 0, .2)),
    var(--grain-h);
  background-size: 100% 100%, 320px 80px;
}
.poster-frame-side { display: none; position: absolute; top: 0; bottom: 0; width: var(--frame-pad); pointer-events: none; background-color: var(--frame-color); background-size: 100% 100%, 80px 320px; }
.poster-frame:not([data-frame="none"]) .poster-frame-side { display: block; }
.poster-frame-side[data-side="l"] {
  left: 0; clip-path: polygon(0 0, 100% var(--frame-pad), 100% calc(100% - var(--frame-pad)), 0 100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, calc(var(--sheen) * .8)), rgba(0, 0, 0, .04)), var(--grain-v);
}
.poster-frame-side[data-side="r"] {
  right: 0; clip-path: polygon(0 var(--frame-pad), 100% 0, 100% 100%, 0 calc(100% - var(--frame-pad)));
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .16)), var(--grain-v);
}
.poster-frame:not([data-frame="none"])::before, .poster-frame:not([data-frame="none"])::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
.poster-frame:not([data-frame="none"])::before { inset: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--sheen) * 1.5)), inset 0 0 0 1px rgba(0, 0, 0, .16); }
.poster-frame:not([data-frame="none"])::after {
  inset: var(--frame-pad);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 1px 3px rgba(0, 0, 0, .3), inset 1px 0 2px rgba(0, 0, 0, .12);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .07) 46%, rgba(255, 255, 255, .02) 54%, rgba(255, 255, 255, 0) 62%);
}
.poster {
  /* The least room between any line of text and the poster's edge, on every layout (and about
     as much inside a layout's own frame line). fitText shrinks a line that would come closer. */
  --text-safe: 7%;
  --pw: 400px; --p-paper: var(--map-toner-lite-paper); --p-ink: var(--map-toner-lite-ink);
  position: relative; margin: 0; width: var(--pw); height: var(--ph, 560px); overflow: hidden;
  background: var(--p-paper); color: var(--p-ink); border-radius: var(--radius-none);
  display: flex; flex-direction: column; font-family: var(--font-poster-modern);
}
.poster[data-mood="toner-lite"] { --p-paper: var(--map-toner-lite-paper); --p-ink: var(--map-toner-lite-ink); }
.poster[data-mood="toner"] { --p-paper: var(--map-toner-paper); --p-ink: var(--map-toner-ink); }
.poster[data-mood="smooth"] { --p-paper: var(--map-smooth-paper); --p-ink: var(--map-smooth-ink); }
.poster[data-mood="smooth-dark"] { --p-paper: var(--map-smooth-dark-paper); --p-ink: var(--map-smooth-dark-ink); }
.poster[data-mood="outdoors"] { --p-paper: var(--map-outdoors-paper); --p-ink: var(--map-outdoors-ink); }
.poster[data-mood="terrain"] { --p-paper: var(--map-terrain-paper); --p-ink: var(--map-terrain-ink); }
.poster[data-mood="sumi"] { --p-paper: var(--map-sumi-paper); --p-ink: var(--map-sumi-ink); }
.poster[data-mood="kintsugi"] { --p-paper: var(--map-kintsugi-paper); --p-ink: var(--map-kintsugi-ink); }
.poster[data-mood="neon"] { --p-paper: var(--map-neon-paper); --p-ink: var(--map-neon-ink); }
.poster[data-mood="blueprint"] { --p-paper: var(--map-blueprint-paper); --p-ink: var(--map-blueprint-ink); }
.poster[data-mood="handdrawn"] { --p-paper: var(--map-handdrawn-paper); --p-ink: var(--map-handdrawn-ink); }
.poster[data-mood="edo"] { --p-paper: var(--map-edo-paper); --p-ink: var(--map-edo-ink); }
.poster[data-mood="watercolor"] { --p-paper: var(--map-watercolor-paper); --p-ink: var(--map-watercolor-ink); }

.poster-map { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.poster-map .map { position: absolute; inset: 0; }
/* The marker lies on top of everything on the poster; main.js places its point (placePin) and
   sets --map-w, the width of the map it marks. */
.poster-pin { position: absolute; left: 50%; top: 50%; width: calc(var(--map-w, var(--pw)) * .075); transform: translate(-50%, -90%); color: var(--marker); pointer-events: none; z-index: 8; }
/* While the map can be moved, the marker can be dragged to another spot (design.markerAt). */
.poster[data-map-live] .poster-pin { pointer-events: auto; cursor: grab; touch-action: none; }
.poster[data-map-live] .poster-pin:active { cursor: grabbing; }
/* The words and the seal lie on the map on many layouts (Box, Headline, Inset, the photo
   posters) but don't hold it: a drag on them moves the map. */
.poster-text, .poster-seal { pointer-events: none; }
.poster-text { flex: none; text-align: center; padding: 4.5% var(--text-safe) var(--text-safe); display: flex; flex-direction: column; align-items: center; }
/* Clipped sideways only (fitText shrinks a line that is too wide), so descenders (y, g, p) and
   accents that reach past the line box still show. */
.poster-title, .poster-sub, .poster-small { max-width: 100%; white-space: nowrap; overflow-x: clip; overflow-y: visible; }
.poster-title { font-size: calc(var(--pw) * .085 * var(--fit, 1)); font-weight: 600; letter-spacing: .25em; text-transform: uppercase; line-height: 1.1; padding-left: .25em; }
.poster-rule { width: 12%; height: 1px; background: currentColor; margin: 3.5% auto; opacity: .6; }
.poster-sub { font-size: calc(var(--pw) * .032 * var(--fit, 1)); letter-spacing: .3em; text-transform: uppercase; opacity: .85; padding-left: .3em; }
.poster-small { font-size: calc(var(--pw) * .024 * var(--fit, 1)); letter-spacing: .2em; margin-top: 2%; opacity: .6; }
.poster[data-font="elegant"] { font-family: var(--font-poster-elegant); }
.poster[data-font="elegant"] .poster-title { text-transform: none; letter-spacing: .04em; font-weight: 500; padding-left: 0; }
.poster[data-font="mincho"] { font-family: var(--font-poster-mincho); }
.poster[data-font="mincho"] .poster-title { text-transform: none; letter-spacing: .2em; padding-left: .2em; }
.poster[data-font="soft"] { font-family: var(--font-poster-soft); }
.poster[data-font="soft"] .poster-title { text-transform: none; font-weight: 700; letter-spacing: .12em; }
.poster[data-font="condensed"] { font-family: var(--font-poster-condensed); }
.poster[data-font="condensed"] .poster-title { letter-spacing: .08em; padding-left: .08em; }
.poster[data-font="airy"] { font-family: var(--font-poster-airy); }
.poster[data-font="airy"] .poster-title { letter-spacing: .3em; padding-left: .3em; }
.poster[data-font="roman"] { font-family: var(--font-poster-roman); }
.poster[data-font="roman"] .poster-title { letter-spacing: .18em; padding-left: .18em; }
.poster[data-font="rounded"] { font-family: var(--font-poster-rounded); }
.poster[data-font="rounded"] .poster-title { text-transform: none; letter-spacing: .02em; padding-left: 0; }
.poster[data-font="bold"] { font-family: var(--font-poster-bold); }
.poster[data-font="bold"] .poster-title { letter-spacing: .04em; padding-left: .04em; }
.poster[data-font="slab"] { font-family: var(--font-poster-slab); }
.poster[data-font="slab"] .poster-title { letter-spacing: .1em; padding-left: .1em; }
.poster[data-font="typewriter"] { font-family: var(--font-poster-typewriter); }
.poster[data-font="typewriter"] .poster-title { text-transform: none; letter-spacing: .08em; padding-left: .08em; }
/* Script only writes the name by hand; the place and the small line stay in Modern. Its title
   rules come after the layouts' (below), as a joined-up hand can't take their letter spacing. */
.poster[data-layout="framed"] { padding: 5%; }
.poster[data-layout="framed"] .poster-text { padding-bottom: 2%; }
/* Circle: a round map whose edge fades softly into the paper. CIRCLE_FADE in print.js matches. */
.poster[data-layout="circle"] .poster-map {
  flex: none; width: 88%; height: auto; aspect-ratio: 1; margin: 6% auto 0;
  -webkit-mask: radial-gradient(circle closest-side, #000 62%, rgba(0, 0, 0, .5) 82%, transparent 100%);
  mask: radial-gradient(circle closest-side, #000 62%, rgba(0, 0, 0, .5) 82%, transparent 100%);
}
.poster[data-layout="circle"] .poster-text { flex: 1; justify-content: center; }

/* Decorations used by some layouts; hidden unless a layout turns them on. */
.poster-fade, .poster-border { display: none; position: absolute; pointer-events: none; }
.poster-text { position: relative; z-index: 1; }

.poster[data-layout="border"] { padding: 7% 7% 0; }
.poster[data-layout="border"] .poster-border {
  display: block; inset: 3.2%; border: max(1px, calc(var(--pw) * .0025)) solid currentColor; opacity: .85;
}
.poster[data-layout="border"] .poster-text { padding-bottom: 11%; }

/* Nordic: a thin paper margin, a heavy rule under the map (the poster's own rule, moved up and
   stretched) and the text set left below it, small and widely spaced. */
.poster[data-layout="nordic"] { padding: 4.5% 4.5% 0; }
.poster[data-layout="nordic"] .poster-text { align-items: flex-start; text-align: left; padding: 0 1.5% 7.5%; }
.poster[data-layout="nordic"] .poster-rule {
  order: -1; align-self: stretch; width: auto; height: max(2px, calc(var(--pw) * .008));
  margin: 0 -1.5% 6.5%; opacity: 1;
}
.poster[data-layout="nordic"] .poster-title { font-size: calc(var(--pw) * .042 * var(--fit, 1)); font-weight: 700; letter-spacing: .22em; padding-left: 0; }
.poster[data-layout="nordic"] .poster-sub { font-size: calc(var(--pw) * .022 * var(--fit, 1)); letter-spacing: .3em; margin-top: 2.6%; padding-left: 0; opacity: 1; }
.poster[data-layout="nordic"] .poster-small { font-size: calc(var(--pw) * .018 * var(--fit, 1)); letter-spacing: .1em; margin-top: 2.6%; opacity: .55; }

.poster[data-layout="box"] .poster-map,
.poster[data-layout="fade"] .poster-map { position: absolute; inset: 0; }
.poster[data-layout="box"] .poster-text {
  position: absolute; left: 13%; right: 13%; bottom: 7%;
  padding: 5.5% 6.5% 5%; background: var(--p-paper);
}
.poster[data-layout="box"] .poster-rule { margin: 3% auto; }
.poster[data-layout="box-small"] .poster-map { position: absolute; inset: 0; }
.poster[data-layout="box-small"] .poster-text {
  position: absolute; left: 27%; right: 27%; bottom: 6%;
  padding: 3.6% 3.5% 3.2%; background: var(--p-paper);
}
.poster[data-layout="box-small"] .poster-title { font-size: calc(var(--pw) * .05 * var(--fit, 1)); }
.poster[data-layout="box-small"] .poster-sub { font-size: calc(var(--pw) * .021 * var(--fit, 1)); }
.poster[data-layout="box-small"] .poster-small { font-size: calc(var(--pw) * .016 * var(--fit, 1)); }
.poster[data-layout="box-small"] .poster-rule { margin: 2% auto; }
.poster[data-layout="fade"] .poster-fade {
  display: block; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to bottom, transparent, var(--p-paper) 62%);
}
.poster[data-layout="fade"] .poster-text { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 9%; }

/* Band: the map to the top and sides, then a paper band: the name large on the left, the place
   and the small line stacked on the right. */
.poster[data-layout="band"] .poster-text {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 5%; align-items: center; text-align: left; padding: 4.5% var(--text-safe) 6.5%;
}
.poster[data-layout="band"] .poster-rule { display: none; }
.poster[data-layout="band"] .poster-title {
  grid-row: 1 / 3; justify-self: start; font-size: calc(var(--pw) * .072 * var(--fit, 1));
  font-weight: 700; letter-spacing: .01em; text-transform: none; padding-left: 0;
}
.poster[data-layout="band"] :is(.poster-sub, .poster-small) { grid-column: 2; justify-self: end; max-width: calc(var(--pw) * .42); padding-left: 0; }
.poster[data-layout="band"] .poster-sub { align-self: end; font-size: calc(var(--pw) * .02 * var(--fit, 1)); font-weight: 700; letter-spacing: .14em; opacity: 1; }
.poster[data-layout="band"] .poster-small { align-self: start; font-size: calc(var(--pw) * .018 * var(--fit, 1)); letter-spacing: .08em; margin-top: .5em; opacity: .75; }

/* Headline: the map edge to edge, the name in huge letters over its bottom (condensed in the
   Modern typeface), the place and the small line under it. */
.poster[data-layout="headline"] .poster-map { position: absolute; inset: 0; }
.poster[data-layout="headline"] .poster-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--text-safe) var(--text-safe); }
.poster[data-layout="headline"] .poster-rule { display: none; }
.poster[data-layout="headline"] .poster-title { font-size: calc(var(--pw) * .17 * var(--fit, 1)); font-weight: 700; letter-spacing: .01em; line-height: 1; padding-left: 0; }
.poster[data-layout="headline"][data-font="modern"] .poster-title { font-family: var(--font-poster-condensed); font-weight: 600; }
.poster[data-layout="headline"] .poster-sub { font-size: calc(var(--pw) * .024 * var(--fit, 1)); font-weight: 600; margin-top: 3.5%; opacity: 1; }
.poster[data-layout="headline"] .poster-small { font-size: calc(var(--pw) * .018 * var(--fit, 1)); margin-top: 1.2%; opacity: .75; }

/* Inset: the map edge to edge with a thin line just inside its edge; the small line and the place
   side by side at the top inside it, the name in spaced capitals at the bottom. */
.poster[data-layout="inset"] .poster-map { position: absolute; inset: 0; }
.poster[data-layout="inset"] .poster-border { display: block; inset: 3%; border: max(1px, calc(var(--pw) * .003)) solid currentColor; }
.poster[data-layout="inset"] .poster-text {
  position: absolute; inset: 3%; flex-flow: row wrap; justify-content: center; align-content: space-between;
  column-gap: 4%; padding: 4.5% 5% 6%;
}
.poster[data-layout="inset"] .poster-rule { display: none; }
.poster[data-layout="inset"] :is(.poster-sub, .poster-small):empty { display: none; }
.poster[data-layout="inset"] :is(.poster-sub, .poster-small) { max-width: 48%; }
.poster[data-layout="inset"] .poster-small { order: 1; margin: 0; font-size: calc(var(--pw) * .021 * var(--fit, 1)); font-weight: 600; letter-spacing: .16em; opacity: 1; }
.poster[data-layout="inset"] .poster-sub { order: 2; font-size: calc(var(--pw) * .021 * var(--fit, 1)); font-weight: 600; letter-spacing: .16em; padding-left: 0; opacity: 1; }
.poster[data-layout="inset"] .poster-title { order: 3; flex: none; width: 100%; text-align: center; font-size: calc(var(--pw) * .055 * var(--fit, 1)); font-weight: 600; letter-spacing: .3em; padding-left: .3em; }

.poster[data-layout="heart"] .poster-map {
  flex: none; width: 86%; height: auto; aspect-ratio: 1; margin: 8% auto 0;
  -webkit-mask: var(--heart-mask) center / 100% 100% no-repeat; mask: var(--heart-mask) center / 100% 100% no-repeat;
}
.poster[data-layout="heart"] .poster-text { flex: 1; justify-content: center; }
.poster { --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 94C24 76 3 58 3 32 3 15 15 4 29 4c10 0 17 5 21 13C54 9 61 4 71 4c14 0 26 11 26 28 0 26-21 44-47 62z'/%3E%3C/svg%3E"); }

/* Typeface details that hold on every layout, after the layouts' own title rules: Script's hand
   is joined up (no spacing, no capitals) and has tall loops and tails, so its lines are a little taller;
   Airy and Roman keep their light weights. */
.poster[data-font="script"] .poster-title {
  font-family: var(--font-poster-script); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.3;
  padding: 0 .2em 0 0; /* its slanted last letter reaches past its width */
}
/* Written top to bottom its loops run along the column, so the column needs no extra width. */
.poster[data-font="script"]:is([data-layout="tategaki"], [data-layout="kakejiku"]) .poster-title { line-height: 1.1; }
.poster[data-font="airy"] .poster-title { font-weight: 300; }
.poster[data-font="roman"] .poster-title { font-weight: 500; }

/* The hanko seal (seal.js draws it), bottom right on every layout. */
.poster-seal { display: none; position: absolute; right: 5%; bottom: 4.5%; width: calc(var(--pw) * .1); height: auto; aspect-ratio: 1; color: var(--seal); z-index: 2; }
.poster[data-seal="on"] .poster-seal { display: block; }
/* Keep the text clear of the seal: equal side room, so it stays centred. */
.poster[data-seal="on"]:not([data-layout="tategaki"]) .poster-text { padding-left: 17%; padding-right: 17%; }
.poster[data-seal="on"][data-layout="nordic"] .poster-text { padding-left: 1.5%; padding-right: 1.5%; }
.poster[data-seal="on"][data-layout="nordic"] :is(.poster-title, .poster-sub, .poster-small) { max-width: 78%; }

/* Tategaki: the map on the left, the text written top to bottom in columns on the right (the
   title nearest the edge, as in Japanese), the seal at its foot. */
.poster[data-layout="tategaki"] { flex-direction: row; padding: 6% 0 6% 6%; }
.poster[data-layout="tategaki"] .poster-map { flex: 1; min-width: 0; }
.poster[data-layout="tategaki"] .poster-text {
  writing-mode: vertical-rl; flex: none; width: auto; padding: 0 var(--text-safe) 0 4%; max-height: 72%; align-items: flex-start;
}
.poster[data-layout="tategaki"] :is(.poster-title, .poster-sub, .poster-small) { max-width: none; max-height: 100%; }
.poster[data-layout="tategaki"] .poster-title { padding: .25em 0 0; }
.poster[data-layout="tategaki"] .poster-sub { padding: .3em 0 0; }
.poster[data-layout="tategaki"] .poster-small { margin: 0 3% 0 0; }
.poster[data-layout="tategaki"] .poster-rule { width: max(1px, calc(var(--pw) * .0025)); height: 8%; margin: .4em 4% 0; }

/* Star maps: the chart (src/sky/) takes the map's place; the hidden map keeps its size. */
.poster-sky { display: none; position: absolute; inset: 0; pointer-events: none; }
.poster-sky svg { display: block; width: 100%; height: 100%; }
.poster[data-product="star"] .poster-sky { display: block; }
.poster[data-product="star"] .poster-map .map { visibility: hidden; }
.poster[data-product="star"] .poster-pin { display: none; }
/* Circle: the chart has its own crisp horizon ring, so no soft fade. */
.poster[data-product="star"][data-layout="circle"] .poster-map { -webkit-mask: none; mask: none; }
.poster[data-product="star"][data-sky="midnight"] { --p-paper: var(--sky-midnight-paper); --p-ink: var(--sky-midnight-ink); }
.poster[data-product="star"][data-sky="indigo"] { --p-paper: var(--sky-indigo-paper); --p-ink: var(--sky-indigo-ink); }
.poster[data-product="star"][data-sky="noir"] { --p-paper: var(--sky-noir-paper); --p-ink: var(--sky-noir-ink); }
.poster[data-product="star"][data-sky="kintsugi"] { --p-paper: var(--sky-kintsugi-paper); --p-ink: var(--sky-kintsugi-ink); }
.poster[data-product="star"][data-sky="sumi"] { --p-paper: var(--sky-sumi-paper); --p-ink: var(--sky-sumi-ink); }
.poster[data-product="star"][data-sky="kinari"] { --p-paper: var(--sky-kinari-paper); --p-ink: var(--sky-kinari-ink); }
.is-sky .zoom, .is-sky .stage-hint svg { display: none; }

/* ---- Photo + map posters (product 'photo', PHOTO_LAYOUTS in catalog.js) ----------------
   The map (.poster-map) and the photo (.poster-photo) are boxes placed by each layout. Layouts
   that let the two trade places put them in slots: "a" is the photo's own place, "b" the map's.
   The print file (print.js) draws every box from these rules: its place, --rot, the masks named
   in --print-mask, border, box-shadow, opacity and mix-blend-mode. Keep the two in step:
   --print-mask is "y <at> <alpha> ..." for a top-to-bottom fade, "spot" for the double
   exposure's soft ellipse, "heart" for the heart. Lengths are in poster widths (--pw). */
.poster-photo, .poster-ring, .poster-tack, .poster-pass { display: none; position: absolute; pointer-events: none; }
.poster[data-product="photo"] :is(.poster-map, .poster-photo) { position: absolute; flex: none; transform: rotate(var(--rot, 0deg)); }
.poster[data-product="photo"] .poster-map { background: var(--p-paper); }
.poster[data-product="photo"] .poster-photo { display: block; overflow: hidden; z-index: 1; pointer-events: auto; cursor: grab; touch-action: none; background: var(--p-paper); }
.poster[data-product="photo"] .poster-photo:active { cursor: grabbing; }
.poster[data-product="photo"] .poster-photo[data-empty] { cursor: default; }
.input-upper { text-transform: uppercase; }
.tile-cabin { height: 48px; justify-content: center; }
.poster-photo img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; pointer-events: none; }
.poster-photo-empty { display: none; position: absolute; inset: 0; }
.poster-photo[data-empty] .poster-photo-empty { display: flex; align-items: center; justify-content: center; }
.poster-photo-empty svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster-photo-add {
  position: relative; padding: .5em 1em; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #2A2A2E;
  font: 600 max(9px, calc(var(--pw) * .028)) var(--font-sans); white-space: nowrap;
}
.poster-caption { display: none; }
.poster[data-product="photo"] .poster-text { position: absolute; left: 0; right: 0; padding: 0 var(--text-safe); justify-content: center; z-index: 5; }
.poster[data-product="photo"] .poster-seal { z-index: 6; }
.poster[data-product="photo"] .poster-tack { z-index: 3; color: var(--marker); }
.poster[data-product="photo"] .poster-pin { width: calc(var(--pw) * .06); }
/* In the double exposure the photo is framed on the Photo step (data-photo-step). */
.poster[data-photo-step] .poster-map { pointer-events: none; }

/* Fade: the photo above, the map below, both melting into a band of plain paper that holds the
   text, so the words never sit on the photo or the map. */
.poster[data-layout="stack"] [data-slot] { left: 0; width: 100%; }
.poster[data-layout="stack"] [data-slot="a"] {
  top: 0; height: 45%; --print-mask: y 0 1 .62 1 1 0;
  -webkit-mask: linear-gradient(#000 62%, transparent); mask: linear-gradient(#000 62%, transparent);
}
.poster[data-layout="stack"] [data-slot="b"] {
  top: 61%; height: 39%; --print-mask: y 0 0 .32 1;
  -webkit-mask: linear-gradient(transparent, #000 32%); mask: linear-gradient(transparent, #000 32%);
}
.poster[data-layout="stack"] .poster-text { top: 45%; bottom: 39%; }
.poster[data-layout="stack"] .poster-rule { margin: 1.6% auto 2%; }
.poster[data-layout="stack"] .poster-small { margin-top: .6%; }

/* Window: the photo in a round window on the map, a pin just below it. */
.poster[data-layout="window"] .poster-map { left: 0; top: 0; width: 100%; height: 75%; }
.poster[data-layout="window"] .poster-photo {
  left: 22.5%; top: 14.6%; width: 55%; height: auto; aspect-ratio: 1; box-sizing: border-box; border-radius: 50%;
  border: calc(var(--pw) * .015) solid var(--p-paper);
  box-shadow: 0 0 0 max(1px, calc(var(--pw) * .0025)) var(--p-ink), 0 calc(var(--pw) * .025) calc(var(--pw) * .07) rgba(0, 0, 0, .25);
}
.poster[data-layout="window"] .poster-tack { display: block; left: 47.25%; top: calc(14.6% + var(--pw) * .555); width: 5.5%; aspect-ratio: 22 / 30; }
.poster[data-layout="window"] .poster-text { top: 75%; bottom: calc(var(--pw) * .085); }

/* Polaroid: a tilted polaroid with a handwritten caption, pinned to the map. */
.poster[data-layout="polaroid"] .poster-map {
  left: 0; top: 0; width: 100%; height: 78.6%; --print-mask: y 0 1 .8 1 1 0;
  -webkit-mask: linear-gradient(#000 80%, transparent); mask: linear-gradient(#000 80%, transparent);
}
.poster[data-layout="polaroid"] .poster-photo {
  left: 23%; top: 11.8%; width: 54%; height: auto; box-sizing: border-box; --rot: -4deg;
  padding: calc(var(--pw) * .035) calc(var(--pw) * .035) 0; background: var(--polaroid);
  box-shadow: 0 calc(var(--pw) * .035) calc(var(--pw) * .075) rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
}
.poster[data-layout="polaroid"] .poster-photo img,
.poster[data-layout="polaroid"] .poster-photo-empty { position: relative; width: 100%; height: auto; aspect-ratio: 1; flex: none; }
.poster[data-layout="polaroid"] .poster-photo[data-empty] .poster-photo-empty { display: flex; }
.poster[data-layout="polaroid"] .poster-caption {
  display: block; height: calc(var(--pw) * .135); line-height: calc(var(--pw) * .135); text-align: center; white-space: nowrap; overflow: hidden;
  font: 500 calc(var(--pw) * .06 * var(--fit, 1)) var(--font-hand); color: var(--polaroid-ink);
}
.poster[data-layout="polaroid"] .poster-tack { display: block; left: 46.75%; top: 9.6%; width: 6.5%; aspect-ratio: 1; }
.poster[data-layout="polaroid"] .poster-text { top: 78.6%; bottom: calc(var(--pw) * .085); }

/* Kakejiku: photo and map hung one above the other like a scroll, the words written top to
   bottom beside them, the seal at their foot. */
.poster[data-layout="kakejiku"] [data-slot] { left: 5.5%; width: 75%; height: calc((100% - var(--pw) * .135) / 2); }
.poster[data-layout="kakejiku"] [data-slot="a"] { top: calc(var(--pw) * .055); }
.poster[data-layout="kakejiku"] [data-slot="b"] { top: calc(var(--pw) * .08 + (100% - var(--pw) * .135) / 2); }
.poster[data-layout="kakejiku"] .poster-text {
  writing-mode: vertical-rl; left: 81.5%; right: 4%; top: calc(var(--pw) * .055); bottom: calc(var(--pw) * .055);
  padding: 0; justify-content: flex-start; align-items: flex-start;
}
.poster[data-layout="kakejiku"] :is(.poster-title, .poster-sub) { flex: none; max-width: none; max-height: 56%; }
.poster[data-layout="kakejiku"] .poster-title { padding: .25em 0 0; font-size: calc(var(--pw) * .07 * var(--fit, 1)); }
.poster[data-layout="kakejiku"] .poster-sub { padding: .3em 0 0; margin-right: 2%; }
.poster[data-layout="kakejiku"] .poster-rule { display: none; }
.poster[data-layout="kakejiku"] .poster-small {
  position: absolute; left: 0; right: 0; bottom: 0; width: fit-content; max-width: none; max-height: 40%; margin: 0 auto;
}
.poster[data-layout="kakejiku"][data-seal="on"] .poster-small { bottom: calc(var(--pw) * .13); }
.poster[data-layout="kakejiku"] .poster-seal { right: 5.5%; bottom: calc(var(--pw) * .055); width: calc(var(--pw) * .085); }

/* Split: photo and map side by side. */
.poster[data-layout="split"] [data-slot] { top: calc(var(--pw) * .06); height: 69%; width: calc(44% - var(--pw) * .0075); }
.poster[data-layout="split"] [data-slot="a"] { left: 6%; }
.poster[data-layout="split"] [data-slot="b"] { left: calc(50% + var(--pw) * .0075); }
.poster[data-layout="split"] .poster-text { top: 73.3%; bottom: calc(var(--pw) * .085); }

/* Double exposure: the map shines into the photo (light moods print into it instead). */
.poster[data-layout="double"] .poster-photo { inset: 0; width: 100%; height: 100%; z-index: 0; }
.poster[data-layout="double"][data-tone="dark"] .poster-photo img { filter: saturate(.7) brightness(.75); }
.poster[data-layout="double"][data-tone="light"] .poster-photo img { filter: saturate(.85) brightness(1.08); }
.poster[data-layout="double"] .poster-map {
  left: -5%; top: 0; width: 110%; height: 82%; z-index: 1; opacity: .85; mix-blend-mode: screen; --print-mask: spot;
  -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 45%, #000 40%, transparent 100%);
  mask: radial-gradient(ellipse 60% 55% at 50% 45%, #000 40%, transparent 100%);
}
.poster[data-layout="double"][data-tone="light"] .poster-map { mix-blend-mode: multiply; }
.poster[data-layout="double"] .poster-fade { display: block; left: 0; right: 0; bottom: 0; height: 32%; z-index: 2; background: linear-gradient(to bottom, transparent, var(--p-paper) 62%); }
.poster[data-layout="double"] .poster-text { bottom: 6%; }

/* Two hearts: the map's on the left, the photo's in front on the right, cut out with a ring of
   paper. The rings are hearts a little larger than a slot: 1 and 3 an ink outline, 2 the paper. */
.poster[data-layout="hearts"] {
  --e: max(1px, calc(var(--pw) * .0025)); --gap: calc(var(--pw) * .015);
}
.poster[data-layout="hearts"] :is([data-slot], .poster-ring) {
  -webkit-mask: var(--heart-mask) center / 100% 100% no-repeat; mask: var(--heart-mask) center / 100% 100% no-repeat; --print-mask: heart;
}
.poster[data-layout="hearts"] [data-slot] { width: 53%; height: calc(var(--pw) * .51); }
.poster[data-layout="hearts"] [data-slot="b"] { left: 5.5%; top: 19.3%; --rot: -9deg; z-index: 1; }
.poster[data-layout="hearts"] [data-slot="a"] { left: 41.5%; top: 22.9%; --rot: 9deg; z-index: 4; }
.poster[data-layout="hearts"] .poster-ring { display: block; transform: rotate(var(--rot)); }
.poster[data-layout="hearts"] [data-ring="1"] {
  left: calc(5.5% - var(--e)); top: calc(19.3% - var(--e)); width: calc(53% + 2 * var(--e)); height: calc(var(--pw) * .51 + 2 * var(--e));
  --rot: -9deg; z-index: 0; background: var(--p-ink);
}
.poster[data-layout="hearts"] [data-ring="2"],
.poster[data-layout="hearts"] [data-ring="3"] { --rot: 9deg; }
.poster[data-layout="hearts"] [data-ring="2"] {
  left: calc(41.5% - var(--gap)); top: calc(22.9% - var(--gap)); width: calc(53% + 2 * var(--gap)); height: calc(var(--pw) * .51 + 2 * var(--gap));
  z-index: 2; background: var(--p-paper);
}
.poster[data-layout="hearts"] [data-ring="3"] {
  left: calc(41.5% - var(--e)); top: calc(22.9% - var(--e)); width: calc(53% + 2 * var(--e)); height: calc(var(--pw) * .51 + 2 * var(--e));
  z-index: 3; background: var(--p-ink);
}
.poster[data-layout="hearts"] .poster-text { top: 68.5%; bottom: 2%; }

/* Text places (TEXT_PLACES in catalog.js) on the layouts that offer them (Circle, Heart, Two hearts).
   Centred is each layout's own. Split: the name bottom left, the place in spaced capitals over
   the small line bottom right. Left: everything set left at the bottom. Both give the circle and the
   heart a little more room. The seal keeps its corner: the words stay clear of it on the right. */
.poster[data-layout="heart"]:is([data-place="split"], [data-place="left"]) .poster-map { width: 90%; margin-top: 10%; }
.poster[data-layout="circle"]:is([data-place="split"], [data-place="left"]) .poster-map { width: 92%; margin-top: 7%; }
.poster:is([data-place="split"], [data-place="left"]) .poster-text { justify-content: flex-end; padding: 0 var(--text-safe) 7.5%; text-align: left; }
.poster[data-product="photo"]:is([data-place="split"], [data-place="left"]) .poster-text { bottom: 0; }
.poster[data-seal="on"]:is([data-place="split"], [data-place="left"]) .poster-text { padding-left: var(--text-safe); padding-right: 17%; }
.poster[data-place="split"] .poster-text {
  display: grid; grid-template-columns: auto auto; justify-content: space-between; align-content: end; column-gap: 4%;
}
.poster[data-place="split"] .poster-rule { display: none; }
.poster[data-place="split"] .poster-title {
  grid-row: 1 / 3; align-self: end; justify-self: start; max-width: calc(var(--pw) * .5);
  font-size: calc(var(--pw) * .07 * var(--fit, 1)); padding-left: 0;
}
.poster[data-place="split"] :is(.poster-sub, .poster-small) { grid-column: 2; justify-self: end; text-align: right; max-width: calc(var(--pw) * .34); padding-left: 0; }
.poster[data-place="split"] .poster-sub { align-self: end; font-size: calc(var(--pw) * .022 * var(--fit, 1)); font-weight: 600; letter-spacing: .16em; margin-right: -.16em; opacity: 1; }
.poster[data-place="split"] .poster-small { align-self: end; font-size: calc(var(--pw) * .018 * var(--fit, 1)); letter-spacing: .06em; margin: .5em -.06em 0 0; opacity: .6; }
.poster[data-place="left"] .poster-text { align-items: flex-start; }
.poster[data-place="left"] :is(.poster-title, .poster-sub) { padding-left: 0; }
.poster[data-place="left"] .poster-title { font-size: calc(var(--pw) * .07 * var(--fit, 1)); }
.poster[data-place="left"] .poster-rule { width: 10%; margin: 3% 0; }

/* The newer typefaces' bold weights, after the layouts' and text places' own title rules. */
.poster[data-font="rounded"] .poster-title { font-weight: 800; }
.poster[data-font="bold"] .poster-title { font-weight: 800; }
.poster[data-font="slab"] .poster-title { font-weight: 700; }
.poster[data-font="typewriter"] .poster-title { font-weight: 700; }

/* Boarding pass: the map edge to edge with the pass for the trip lying on it, no other words. */
.poster[data-layout="boarding"] .poster-map { inset: 0; width: 100%; height: 100%; }
.poster[data-layout="boarding"] .poster-photo,
.poster[data-layout="boarding"] .poster-text { display: none; }
.poster[data-layout="boarding"] .poster-pass {
  display: block; left: 12.5%; top: 71.4%; width: 75%; height: calc(var(--pw) * .305); z-index: 2; --rot: -3deg; transform: rotate(var(--rot));
  border-radius: calc(var(--pw) * .015); background: #FFFFFF; box-shadow: 0 calc(var(--pw) * .025) calc(var(--pw) * .055) rgba(0, 0, 0, .3);
}

/* Map poster or star map, Place step */
.grid-products { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--space-2); }
.tile-product { height: 56px; flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--space-2); }
.tile-product svg { flex: none; color: var(--ink); }
.tile-product .tile-name { color: var(--ink); font-weight: 600; font-size: var(--text-label); }
/* Star map: what the chart shows */
.sky-switches { display: flex; flex-direction: column; }
.sky-switches .switch { height: auto; min-height: 48px; }
.switch-note { display: block; font-size: var(--text-caption); font-weight: 400; color: var(--ink-muted); }
.sky-zone { margin: calc(var(--space-2) * -1) 0 0; }

/* Seal options in the Text step */
.seal-options { display: flex; flex-direction: column; gap: var(--space-3); }
.seal-options:empty { display: none; }
.seal-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.grid-seal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.tile-seal { height: auto; padding: var(--space-2); align-items: center; gap: var(--space-1); }
.tile-seal[aria-checked="true"] { padding: calc(var(--space-2) - 1px); }
.tile-seal img { width: 44px; height: 44px; }
.tile-seal .tile-name { text-align: center; }

/* Marker icons in the Text step */
.marker-options { display: flex; flex-direction: column; gap: var(--space-2); }
.marker-options:empty { display: none; }
.grid-markers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.tile-marker { height: auto; padding: var(--space-2) var(--space-1); align-items: center; gap: var(--space-1); }
.tile-marker[aria-checked="true"] { padding: calc(var(--space-2) - 1px) calc(var(--space-1) - 1px); }
.tile-marker svg { width: 26px; height: 26px; color: var(--marker); }
.tile-marker .tile-name { text-align: center; }

/* Layout thumbnails in the Style step */
.grid-layouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.tile-layout { height: auto; padding: var(--space-3) var(--space-2); align-items: center; gap: var(--space-2); }
.tile-layout[aria-checked="true"] { padding: calc(var(--space-3) - 1px) calc(var(--space-2) - 1px); }
.tile-layout svg { width: 36px; height: 48px; color: var(--ink); }
.tile-layout .tile-name { text-align: center; }
.grid-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }

.grid-moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.tile-mood { height: auto; padding: var(--space-2); align-items: stretch; justify-content: flex-start; gap: 6px; }
.tile-mood[aria-checked="true"] { padding: calc(var(--space-2) - 1px); }
.tile-mood svg { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 4px; outline: 1px solid var(--line-control); outline-offset: -1px; }
.tile-mood .tile-name { text-align: center; line-height: 1.2; overflow-wrap: anywhere; }

/* ---- Route posters (route step, route line options) ------------------------------- */
#route-box { display: flex; flex-direction: column; gap: var(--space-3); }
.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); max-height: 360px; overflow-y: auto; }
.stop { display: flex; align-items: center; gap: var(--space-1); }
.stop .input { height: 44px; flex: 1; }
.stop .icon-btn { width: 36px; height: 36px; border-color: transparent; color: var(--ink-muted); }
.stop .icon-btn:hover { background: var(--surface-sunk); }
.stop .icon-btn[disabled] { opacity: .3; }
.stop-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--shu); color: var(--on-shu);
  font-size: var(--text-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.route-track {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 2px solid var(--ink); border-radius: var(--radius-lg); background: var(--surface);
}
.route-modes .tile { height: 52px; align-items: center; }
.route-modes .tile-name, .tile-route .tile-name { color: var(--ink); font-weight: 600; font-size: var(--text-label); text-align: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.tile-route { height: 72px; align-items: center; padding: 0 var(--space-1); }
.tile-route[aria-checked="true"] { padding: 0 calc(var(--space-1) - 1px); }
.route-swatch { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.route-width { width: 40px; height: 12px; color: var(--ink); }
.gpx-upload { align-self: flex-start; cursor: pointer; }
.gpx-upload svg { color: var(--shu); }
.gpx-upload:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.gpx-upload + .help { margin-top: calc(var(--space-3) * -1); }

/* Map data credit: always shown, small and quiet, in the bottom-right corner. */
.map-credit {
  position: absolute; right: var(--space-3); bottom: var(--space-2); z-index: 2; margin: 0; pointer-events: none;
  font-size: 10px; line-height: 1; letter-spacing: .01em; color: var(--ink-muted); opacity: .7; white-space: nowrap;
}
.poster .maplibregl-ctrl-attrib, .poster .maplibregl-ctrl-logo { display: none; }

/* ---- Review ------------------------------------------------------------------------ */
.review { flex: 1; min-height: 0; display: flex; border-top: 1px solid var(--line); }
.room { flex: 1; min-width: 0; position: relative; overflow: hidden; isolation: isolate; background: var(--room-wall); }
/* A room scene (scenes.js): the photo, the poster warped onto its frame, the photo's light on top. */
.room-photo, .room-light { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none; }
.room-light { mix-blend-mode: multiply; }
.room-poster { position: absolute; left: 0; right: 0; top: 32px; bottom: 96px; display: flex; align-items: center; justify-content: center; }
.room:not([data-room="close"]) .room-poster { inset: 0; display: block; }
.room:not([data-room="close"]) .poster-frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 2px 5px rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .12); }
.room[data-room="close"] .room-photo, .room[data-room="close"] .room-light { display: none; }
/* No frame picked: the poster sits in the photo's own frame, flat behind its glass. */
.room:not([data-room="close"]) .poster-frame[data-frame="none"] { box-shadow: none; }
.room-chips { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 2; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.room-chips::-webkit-scrollbar { display: none; }
.room-chips button { flex: none; height: 40px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--text-label); font-weight: 600; }
.room-chips button[aria-checked="true"] { background: var(--ink); color: var(--surface); }

.review-aside { width: var(--review-aside-w); flex: none; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.review-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px var(--space-6); display: flex; flex-direction: column; gap: 18px; }
.back-link { align-self: flex-start; min-height: 44px; border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: 600; color: var(--ink); }
.review-heading { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--text-display-l); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.review-heading:lang(ja) { letter-spacing: 0; }
.review .intro { margin: 0; font-size: var(--text-body-sm); }
.details { margin: 0; border-top: 1px solid var(--line); }
.details div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 42px; border-bottom: 1px solid var(--line); font-size: var(--text-body-sm); }
.details dt { color: var(--ink-muted); }
.details dd { margin: 0; font-weight: 600; text-align: right; }
.qty-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-body-sm); font-weight: 600; }
.qty { display: flex; align-items: center; border: 1px solid var(--line-control); border-radius: var(--radius-md); }
.qty button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 18px; }
.qty span { width: 32px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-sunk); border-radius: var(--radius-md); }
.summary div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-body-sm); font-variant-numeric: tabular-nums; }
.summary dd { margin: 0; }
.summary .muted { color: var(--ink-muted); }
.summary .total { border-top: 1px solid var(--line-control); padding-top: var(--space-3); margin-top: var(--space-1); font-size: var(--text-heading); font-weight: 800; align-items: baseline; }
.review-footer { flex: none; padding: 20px var(--space-6) 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }
.status { margin: 0; font-size: var(--text-body-sm); text-align: center; min-height: 0; }
.status:empty, .footnote:empty { display: none; }
.status[data-tone="ok"] { color: var(--success); }
.status[data-tone="error"] { color: var(--danger); }
.another { align-self: center; }
.footnote { margin: 0; font-size: var(--text-caption); color: var(--ink-muted); text-align: center; line-height: 1.5; }
.footnote.strong { font-size: var(--text-label); color: var(--ink); }
#download { align-self: center; }
.review-tools { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.review-tools:has(#download[hidden]) { display: none; }

/* The site's legal links (embed.js): one quiet line under the panel's buttons and at the foot of
   the review page, so they are on screen on every step without scrolling. */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--space-4); font-size: var(--text-caption); line-height: 1.6; }
.legal-links[hidden] { display: none; }
.legal-links a { color: var(--ink-muted); text-decoration: none; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--ink); text-decoration: underline; }
.panel > .legal-links { flex: none; justify-content: flex-start; padding: 0 56px var(--space-5) var(--space-8); }
.panel-actions:has(+ .legal-links:not([hidden])) { padding-bottom: var(--space-3); }

/* ---- Phone ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body { height: auto; min-height: 100%; }
  .topbar { height: 52px; padding: 0 6px 0 18px; grid-template-columns: 1fr auto; }
  .wordmark { font-size: 20px; }
  .steps {
    grid-row: 2; grid-column: 1 / -1; padding: 0 var(--space-4) var(--space-3) 2px; gap: 6px;
  }
  .topbar { grid-template-rows: 52px auto; height: auto; }
  .step { flex: 1; width: auto; padding: 0; gap: 0; }
  .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price { display: none; }
  .topbar-end { gap: var(--space-1); }
  .icon-btn { border: 0; }

  .editor { flex-direction: column; }
  .stage { order: 1; flex: none; height: var(--phone-stage-h); margin: 0 var(--space-3); border-radius: 22px; }
  .stage-hint { display: none; }
  .map-credit { right: var(--space-2); bottom: 4px; }
  .stage-poster { bottom: 12px; }
  .zoom { right: var(--space-2); }
  .is-scale .stage-poster { bottom: calc(var(--sofa-h, 120px) + 40px + 12px); }
  .is-scale .sofa { bottom: 40px; }
  .is-scale .scale-note { bottom: 10px; font-size: var(--text-caption); }

  .panel { order: 2; width: auto; flex: 1; }
  .panel-scroll { overflow: visible; padding: 18px 20px 0; }
  .question { font-size: 28px; line-height: 1.05; margin: 6px 0 var(--space-2); }
  .question:lang(ja) { font-size: 24px; }
  .intro { font-size: var(--text-body-sm); margin-bottom: var(--space-4); }
  .panel-actions {
    position: sticky; bottom: 0; padding: var(--space-3) 20px calc(var(--space-4) + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--paper) 75%, rgba(245, 244, 241, 0));
  }
  .panel-actions:has(+ .legal-links:not([hidden])) { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .panel > .legal-links { justify-content: center; padding: var(--space-1) 20px calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .panel-actions .btn { flex: 1; }
  .panel-actions .btn-back { flex: none; width: 52px; padding: 0; }
  .panel-actions .btn-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .grid-moods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-markers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-size { width: auto; }
  .sizes .option-detail { display: none; }

  .review { flex-direction: column; border-top: 0; }
  .room { flex: none; height: 440px; margin: 0 var(--space-3); border-radius: 22px; }
  .room-poster { top: 24px; bottom: 76px; }
  .room-chips { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
  .review-aside { width: auto; border-left: 0; background: var(--paper); }
  .review-scroll { overflow: visible; padding: 20px; }
  .review-footer { padding: var(--space-4) 20px var(--space-6); }
}

/* ---- Inside the website (embed.js) ---------------------------------------------------- */
/* The site header above the iframe has the wordmark, language and cart, so the editor's own
   header keeps only the steps and the price. */
body.embedded .topbar { height: 64px; border-bottom: 1px solid var(--line); }
body.embedded .wordmark, body.embedded #lang, body.embedded #cart-btn { visibility: hidden; }
body.embedded #another { display: none; }
@media (max-width: 900px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.embedded .topbar { height: auto; grid-template-rows: 0 auto; padding-top: var(--space-3); border-bottom: 0; }
  body.embedded .topbar > .wordmark, body.embedded .topbar-end { display: none; }
}