/* Taurene · ride poster maker. Tokens, fonts and buttons come from tokens.css.
   Layout: a pill header, the poster preview on the left, a rail of soft cards on the right; stacks on phones. */

body{font-size:16px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 32px}

.top{max-width:1240px;margin:16px auto var(--space-8);padding:10px 20px;border-radius:var(--radius-round);box-shadow:var(--shadow-card),0 0 0 1px var(--rule);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
@media (max-width:700px){.top{border-radius:var(--radius-img);padding:12px 18px;gap:2px}}

.app{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-8);max-width:1240px;margin:0 auto;align-items:start}
@media (max-width:880px){.app{grid-template-columns:minmax(0,1fr)}}
.stage{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;position:sticky;top:16px}
@media (max-width:880px){.stage{position:static}}
.poster{width:min(100%,680px);border-radius:2px;max-width:100%;box-shadow:0 24px 48px -24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.12);line-height:0}
.poster svg{width:100%;height:auto;display:block}

/* below the poster: the poster framed in a few rooms (preview only) */
.walls{width:min(100%,680px);min-width:0;margin-top:var(--space-8);padding:var(--space-6);background:var(--sheet);border-radius:var(--radius-card)}
.walls h2{font-weight:600;font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--signal);margin:0 0 var(--space-3)}
.wall-thumb .scene{border-radius:10px;overflow:hidden}
.walls-row{display:flex;gap:10px;align-items:flex-start}
.wall-thumb{flex:var(--a) 1 0;min-width:0;cursor:zoom-in;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-muted);line-height:1.3}
.wall-thumb .scene{transition:transform .15s}
.wall-thumb:hover .scene{transform:translateY(-2px)}
@media (max-width:600px){
  .walls-row{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .wall-thumb{flex:none;width:calc(190px * var(--a));scroll-snap-align:start}
}
.wall-note{margin:var(--space-3) 0 0;font-size:14px;color:var(--ink-muted);line-height:1.45}
.wall-big{border:0;padding:0;background:transparent;width:fit-content;max-width:none;overflow:visible}
.wall-big::backdrop{background:rgba(13,17,27,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wall-big .scene{border-radius:var(--radius-img);overflow:hidden}
.wall-big .scene{width:min(94vw,1200px,calc(90vh * var(--a)))}
.wall-close{position:absolute;top:8px;right:8px;z-index:5;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}

.rail{min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.card{background:var(--sheet);border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
h1{font-weight:600;font-size:32px;margin:0;line-height:1.2;letter-spacing:var(--track-display);text-wrap:balance}
.lead{margin:0;color:var(--ink-muted);font-size:15px}
label,.lbl{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:14px;color:var(--ink)}
input[type=text],select{font-family:var(--font-sans);font-weight:500;font-size:16px;letter-spacing:var(--track-body);padding:11px 14px;border:var(--neat) solid var(--neatline);background:var(--paper);color:var(--ink);min-width:0;width:100%;border-radius:var(--radius-1)}
input[type=text]:focus,select:focus{border-color:var(--signal);outline:0;box-shadow:0 0 0 3px rgba(0,152,242,.18)}
input::placeholder{color:var(--ink-faint)}

.drop{border:1.5px dashed var(--neatline);border-radius:var(--radius-card);background:var(--paper);padding:var(--space-6) var(--space-4);text-align:center;cursor:pointer;font-size:15px;color:var(--ink-muted)}
.drop.over{border-color:var(--signal);border-style:solid;color:var(--ink)}
.drop strong{color:var(--ink);display:block;font-weight:600;font-size:16px;margin-bottom:2px}
.drop input{display:none}
.status{font-size:14px;color:var(--ink-muted);margin:0}
.status b{color:var(--ink);font-weight:600}
.status.err b{color:#d6293e}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--relief);border-radius:var(--radius-round)}
.seg button{position:relative;font-family:var(--font-sans);font-weight:500;font-size:14px;letter-spacing:var(--track-body);min-height:38px;padding:6px 10px;border:0;border-radius:var(--radius-round);background:transparent;color:var(--ink-muted);cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:var(--shadow-card),0 0 0 1px var(--rule)}
.seg button:focus-visible{outline-offset:-3px}
.seg.grid2{grid-auto-flow:row;grid-template-columns:1fr 1fr;border-radius:22px}
.seg.grid2 button:last-child:nth-child(odd){grid-column:span 2}

.rail .btn{width:100%}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--neatline)}
.btn.ghost:hover{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink-faint)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.note{font-size:14px;color:var(--ink-muted);margin:0}
.note:empty{display:none}
details{font-size:15px;color:var(--ink-muted)}
details summary{cursor:pointer;color:var(--ink);font-weight:500}
details ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

footer{max-width:1240px;margin:var(--space-12) auto 0;padding-top:var(--space-4);border-top:var(--hairline) solid var(--rule);display:flex;gap:var(--space-6);flex-wrap:wrap;font-size:14px;color:var(--ink-faint)}

/* legal pages */
.legal{max-width:68ch;margin:0 auto}
.legal h1{margin:var(--space-3) 0 var(--space-6)}
.legal h2{font-size:20px;font-weight:600;letter-spacing:var(--track-display);margin:var(--space-6) 0 var(--space-2)}
.legal p,.legal li{color:var(--ink)}
.todo{background:var(--water-tint);padding:0 4px;border-radius:4px}