/* Poster generator — page-specific layout. Shares tokens & control classes
   (.slider-group, .mini-btn, .pill-btn, .select-group, .export-btn, .swatch,
   .toast, .panel-label …) with styles.css. */

/* ------------------------------------------------------- a11y foundations
   Poster-only copies so this page holds up whatever styles.css ships. */
/* Any `display` rule (.pgrid2 is a grid) would otherwise beat [hidden]. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
/* styles.css sets `outline: none` on ranges at higher specificity */
input[type="range"]:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Skip links: the .visually-hidden pattern until focused, then a pinned chip. */
.skip-link.visually-hidden:focus,
.skip-link.visually-hidden:focus-visible {
  position: fixed !important; top: 8px; left: 8px; z-index: 300;
  width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
  padding: 9px 14px; background: var(--hi); color: var(--hi-ink); text-decoration: none;
  font-family: var(--mono); font-size: var(--fs-s); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; outline: 2px solid var(--fg); outline-offset: 2px;
}
/* where a skip link lands: focus moves here, the next Tab reaches the controls */
.skip-target:focus { outline: none; }
.skip-target:focus-visible { outline: 1px dashed var(--edge); outline-offset: 6px; }

/* Interactive edges use --edge (>= 3:1 on the panels); hover goes brighter
   still, never darker than the resting edge. */
:root { --p-edge-hover: #8f8f8f; }
.mini-btn:hover, .pill-btn:hover:not(.active) { border-color: var(--p-edge-hover); }

/* the page title is a plain label here, not the Font tool's name field */
.topbar .fontname-input { width: auto; white-space: nowrap; }
/* the segment pills are real <button>s now; keep them looking like the old divs */
button.pill-btn { margin: 0; line-height: normal; -webkit-appearance: none; appearance: none; }

.poster-workspace { flex: 1; min-height: 0; display: flex; overflow: hidden; }

.poster-sidebar {
  width: 348px; min-width: 348px;
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 16px; display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto;
}

.pgroup { display: flex; flex-direction: column; gap: 9px; }
.pgroup-title {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0;
  border-top: 1px solid var(--line-soft); padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.phint { margin: 0; }
.phint a { color: var(--muted); text-decoration: underline; }
.phint a { transition: color var(--t-fast), text-underline-offset var(--t-fast) var(--ease); }
.phint a:hover { color: var(--fg); text-underline-offset: 3px; }
.pgroup-title .mini-btn { padding: 3px 8px; font-size: var(--fs-xs); }
.pgroup:first-child .pgroup-title { border-top: none; padding-top: 0; }

.pfield { display: flex; flex-direction: column; gap: 5px; }
.pfield label, .pfield-label {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between;
}
.pfield label b, .pfield-label b { color: var(--fg); font-weight: 600; }

.ptext, .ptextarea, .pselect, .pnum {
  font-family: var(--sans); font-size: 13px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--edge); border-radius: 2px;
  padding: 8px 9px; width: 100%; resize: vertical;
}
.ptextarea { font-family: var(--mono); font-size: var(--fs-s); line-height: 1.5; min-height: 48px; }
.ptext:focus, .ptextarea:focus, .pselect:focus, .pnum:focus { outline: 1px solid var(--hi); outline-offset: -1px; }
.pselect { cursor: pointer; }
.ptext:hover, .ptextarea:hover, .pselect:hover, .pnum:hover { border-color: var(--p-edge-hover); }
.pselect.compact, .ptext.compact { padding: 6px 7px; font-size: 12px; }

.prow { display: flex; gap: 8px; }
.prow > * { flex: 1; min-width: 0; }
.prow.prow-baseline { align-items: center; }
.prow.prow-baseline > * { flex: 0 0 auto; }
.prow .spacer { flex: 1 1 auto; }
.prow-baseline .phint b { color: var(--fg); }

.pgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pgrid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

.seg-row { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-row .pill-btn { flex: 1; min-width: 0; padding: 8px 4px; font-size: var(--fs-xs); }

.dropzone {
  display: block; position: relative;
  border: 1px dashed var(--edge); border-radius: 3px; background: var(--surface);
  padding: 14px 10px; text-align: center; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
}
.dropzone { transition: border-color var(--t-fast), color var(--t-fast); }
.dropzone:hover { border-color: var(--hi); color: var(--fg); }
.dropzone.has-font { border-style: solid; border-color: var(--hi); color: var(--fg); }
/* a restored poster waiting for its font file to be uploaded again: the
   dashed edge breathes until it gets one */
.dropzone.needs-font { border-color: var(--hi); color: var(--fg); animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { border-color: var(--edge); } }

/* Reset poster: the first press arms it (inverted), the second resets */
.reset-btn.armed { background-size: 100% 100%; color: var(--hi-ink); border-color: var(--hi); }
/* the file input is visually hidden but focusable: ring the whole zone */
.dropzone:focus-within { outline: 2px solid var(--hi); outline-offset: 2px; color: var(--fg); }

#glyphControls { display: flex; flex-direction: column; gap: 9px; }

/* Font-tool project link */
.project-box {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 9px;
}
.project-box .check-row { white-space: normal; line-height: 1.35; }
.project-box .check-sub { padding-left: 18px; }
.project-box .check-row.is-disabled { opacity: 0.45; cursor: default; }

.phint {
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--muted);
}

/* ------------------------------------------------------------- item cards */
.card-list { display: flex; flex-direction: column; gap: 8px; }

.item-card {
  border: 1px solid var(--edge); border-radius: 3px; background: var(--surface);
  padding: 9px; display: flex; flex-direction: column; gap: 7px;
  cursor: pointer; position: relative;
  transition: border-color var(--t-fast), background-color var(--t) var(--ease);
}
.item-card:hover { border-color: var(--p-edge-hover); }
.item-card.selected { border-color: var(--hi); background-color: #161616; cursor: default; }
/* the open card gets a white spine that runs down its edge */
.item-card::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  background: var(--hi); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t) var(--ease); pointer-events: none;
}
.item-card.selected::before { transform: scaleY(1); }

/* Progressive disclosure: an unselected card shows only its identity, so a
   six-row title stays scannable instead of becoming a wall of sliders. */
.item-card-body { display: none; flex-direction: column; gap: 7px; }
.item-card.selected .item-card-body { display: flex; }

.item-card-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.item-card.selected .item-card-head { color: var(--fg); }
.item-card-head .spacer { flex: 1; }
.item-card-head .meta {
  font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--muted); text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.item-card.selected .item-card-head .meta { color: var(--muted); }
/* overflow note next to the row meta ("▲ wider than poster"); never squeezed
   out by the meta, which ellipsizes first */
.item-card-head > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.item-card-head .row-warn {
  flex: 0 0 auto; white-space: nowrap;
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: none; color: var(--fg); font-weight: 600;
  cursor: help;
}
.item-card-head .meta { flex: 0 1 auto; }
.icon-btn {
  border: 1px solid var(--edge); background-color: var(--panel); color: var(--muted);
  font-family: var(--mono); font-size: var(--fs-s); line-height: 1;
  width: 20px; height: 20px; border-radius: 2px; cursor: pointer; padding: 0;
  /* the same ink wipe as the shared controls (styles.css) */
  background-image: linear-gradient(var(--hi), var(--hi));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t-fast) linear;
}
.icon-btn:hover { color: var(--fg); border-color: var(--p-edge-hover); }
.icon-btn.danger:hover { background-size: 100% 100%; color: var(--hi-ink); border-color: var(--hi); }
.icon-btn[disabled] { opacity: 0.3; cursor: default; }
.icon-btn[disabled]:hover { color: var(--muted); border-color: var(--edge); background-size: 0% 100%; }

.mini-slider { display: flex; align-items: center; gap: 7px; }
.mini-slider > span {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); width: 30px; flex: 0 0 30px;
}
.mini-slider input[type=range] { flex: 1; min-width: 0; }
.mini-slider b {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg); font-weight: 600;
  width: 46px; flex: 0 0 46px; text-align: right;
}

/* ---------------------------------------------------------------- palette */
.swatch-grid {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px;
}
.swatch-grid .sw {
  aspect-ratio: 1; border: 1px solid var(--edge); border-radius: 2px; cursor: pointer; padding: 0;
  transition: transform var(--t-fast) var(--ease);
}
.swatch-grid .sw:hover { transform: scale(1.16); border-color: var(--fg); }
.swatch-grid .sw.active { outline: 2px solid var(--hi); outline-offset: 1px; border-color: var(--hi); }
/* active already has the solid ring, so focus gets a dashed one further out */
.swatch-grid .sw:focus-visible { outline: 2px dashed var(--fg); outline-offset: 3px; }

.pair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pair-btn {
  border: 1px solid var(--edge); border-radius: 2px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; padding: 0; background: none;
}
.pair-btn { transition: border-color var(--t-fast); }
.pair-btn:hover { border-color: var(--p-edge-hover); }
.pair-btn.active { border-color: var(--hi); outline: 1px solid var(--hi); }
.pair-chip { height: 30px; display: flex; align-items: center; justify-content: center; }
.pair-chip span { font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1; }
.pair-name {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 4px 2px; background: var(--surface); text-align: center;
}
.pair-btn.active .pair-name { color: var(--fg); }

.color-row { display: flex; gap: 8px; align-items: center; }
.color-row input[type=color] {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--edge); border-radius: 50%;
  background: none; cursor: pointer; overflow: hidden; flex: 0 0 22px;
}
.color-row input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-row input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }

.swatch-pick {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.swatch-pick:hover { color: var(--fg); }
.swatch-pick input[type=color] {
  width: 18px; height: 18px; padding: 0; border: 1px solid var(--edge); border-radius: 3px;
  background: none; cursor: pointer; overflow: hidden; flex: 0 0 18px;
}
.swatch-pick input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch-pick input[type=color]::-webkit-color-swatch { border: none; border-radius: 2px; }

.check-row {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); user-select: none; white-space: nowrap;
}
.check-row input { accent-color: var(--hi); width: 12px; height: 12px; cursor: pointer; }
.check-row:hover { color: var(--fg); }

/* --------------------------------------------------------------- canvas area */
.poster-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: #050505; }

.stage-bar {
  display: flex; align-items: center; gap: 14px; position: relative;
  height: 40px; min-height: 40px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.stage-meta {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.stage-spacer { flex: 1; }
/* the size readout gives way first when the bar runs out of room */
.stage-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.history-cluster, .zoom-cluster, .demo-btn { flex: 0 0 auto; }
@media (max-width: 1100px) {
  .hist-label { display: none; }   /* icons only; the buttons keep aria-label */
}
.history-cluster { display: flex; align-items: center; gap: 6px; padding-right: 14px; border-right: 1px solid var(--line); }
.hist-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; color: var(--fg); }
.hist-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
/* aria-disabled, not [disabled]: the button keeps focus when its stack runs out */
.hist-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.hist-btn[aria-disabled="true"]:hover { color: var(--fg); border-color: var(--edge); }
.zoom-cluster { display: flex; align-items: center; gap: 8px; }
.zoom-cluster input[type=range] { width: 108px; }
.zoom-cluster .mini-btn { padding: 4px 8px; min-width: 26px; }
.zoom-val {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg); font-weight: 600;
  width: 40px; text-align: right;
}

/* the scroll area plus anything drawn over it (the empty-state prompt) */
.stage-view { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.stage-scroll {
  flex: 1; min-height: 0; overflow: auto; padding: 30px;
  display: flex; align-items: flex-start; justify-content: center;
  background:
    linear-gradient(45deg, #0d0d0d 25%, transparent 25%) -11px 0/22px 22px,
    linear-gradient(-45deg, #0d0d0d 25%, transparent 25%) -11px 0/22px 22px,
    linear-gradient(45deg, transparent 75%, #0d0d0d 75%) -11px 0/22px 22px,
    linear-gradient(-45deg, transparent 75%, #0d0d0d 75%) -11px 0/22px 22px,
    #050505;
}
.stage-scroll.panning { cursor: grabbing; }
.stage-view.drop-ready .stage-scroll { outline: 2px dashed var(--hi); outline-offset: -10px; }

/* Empty / edge states, laid over the visible stage (not the poster bitmap, so
   it can never end up in an export). Only the card takes the pointer. */
.stage-empty {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.stage-empty-card {
  pointer-events: auto; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 18px 20px; background: rgba(11, 11, 11, 0.94); border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.stage-empty-msg {
  margin: 0; font-family: var(--mono); font-size: var(--fs-m); line-height: 1.5; color: var(--fg);
  letter-spacing: 0.02em;
}
.stage-empty-btn { color: var(--fg); }

.canvas-holder { position: relative; flex: 0 0 auto; margin: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.canvas-holder canvas { display: block; position: absolute; top: 0; left: 0; }
.canvas-holder #posterCanvas { position: relative; }
.canvas-holder #overlayCanvas { pointer-events: auto; cursor: default; }
.canvas-holder #overlayCanvas.grabbing { cursor: grabbing; }
.canvas-holder #overlayCanvas.movable { cursor: grab; }
.canvas-holder #overlayCanvas.resizing { cursor: nwse-resize; }
.canvas-holder #overlayCanvas.rotating { cursor: crosshair; }

/* Hint strip under the stage: part of the column's flow (the scroll area
   shrinks to make room), so the poster is never drawn underneath it. Each
   control is one list item and wraps as a whole, never mid-phrase. */
.stage-foot {
  padding: 7px 16px 8px;
  border-top: 1px solid var(--line); background: var(--surface);
}
/* Briefly covers the size readout at the left of the stage bar: it takes no
   room from the zoom controls and never lands on the poster. */
.stage-loading {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
  display: flex; align-items: center; padding: 0 14px 0 16px; background: var(--surface);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; color: var(--fg);
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 0.15s;
  pointer-events: none; white-space: nowrap;
}
/* a block cursor blinks in front of the message while the type re-pours */
.stage-loading::before {
  content: ''; width: 6px; height: 10px; margin-right: 8px; background: currentColor;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.stage-loading.show { opacity: 1; }
.stage-meta { transition: opacity 0.15s; }
.stage-bar:has(.stage-loading.show) .stage-meta { opacity: 0; }
.stage-hint {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 2px 16px;
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; color: var(--muted);
  letter-spacing: 0.04em;
}
.stage-hint > li { white-space: nowrap; }
.stage-hint kbd {
  font-family: var(--mono); font-size: inherit; color: var(--fg);
  border: 1px solid var(--line); border-radius: 2px; padding: 0 2px;
  background: var(--panel);
}

.export-scale-select { min-width: 64px; }

/* Narrow screens: stage on top at 60vh, the sidebar flows underneath it and
   the page scrolls; the export bar stays pinned to the bottom edge. */
@media (max-width: 900px) {
  html { height: auto; overflow-x: hidden; overflow-y: auto; }
  body { height: auto; overflow: visible; }
  #app { height: auto; min-height: 100vh; width: 100%; }
  .topbar { overflow-x: auto; overflow-y: hidden; gap: 12px; padding: 0 16px; scrollbar-width: thin; }
  .topbar > * { flex-shrink: 0; }
  .poster-workspace { flex: none; flex-direction: column; overflow: visible; }
  .poster-stage { order: -1; flex: none; height: 60vh; min-height: 60vh; overflow: hidden; }
  .stage-bar { overflow-x: auto; gap: 10px; padding: 0 12px; }
  .stage-scroll { padding: 16px; }
  .poster-sidebar {
    width: 100%; min-width: 0; overflow: visible;
    border-right: none; border-top: 1px solid var(--line);
  }
  .control-bar { position: sticky; bottom: 0; z-index: 5; padding: 10px 16px; }
  /* the pinned bar must never cover what has focus (see also the focusin
     guard in poster-engine.js); anchors and skip links land clear of it */
  html { scroll-padding-bottom: 84px; }
}
@media (max-width: 600px) {
  /* touch screens: no keyboard or scroll wheel for the hint strip to describe */
  .stage-meta, .stage-foot { display: none; }
  .zoom-cluster input[type=range] { width: 60px; }
  .zoom-cluster { gap: 6px; }
  .history-cluster { padding-right: 10px; }
  .hist-label { display: none; }   /* icons only; the buttons keep aria-label */
  .stage-empty-card { padding: 14px 16px; }
}
@media (max-width: 400px) {
  /* the smallest phones: history + zoom still fit without scrolling the bar */
  .stage-bar { gap: 8px; }
  .history-cluster { gap: 4px; padding-right: 8px; }
  .zoom-cluster { gap: 5px; }
  .zoom-cluster input[type=range] { width: 46px; }
  .zoom-cluster .mini-btn, .hist-btn { padding: 4px 6px; }
}

.field-label {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}