/* poster — layered on top of pixart's chrome.css + theme-tokens.css.
   Only adds the bits pixart's chrome doesn't cover: masthead, input strip,
   diptych, trace, edit strip, control panel internals. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700;800&family=Archivo+Black&display=swap');

/* poster runs a vertical scrollable stage (pixart is single-canvas fixed).
   Override the chrome's fixed-stage behaviour for this app only. */
body.poster-app{
  overflow:auto !important;
  height:auto !important;
}
/* Footer is fixed in pixart; on poster's scrolling page, anchor it to the
   document flow so it never overlaps the posters. */
body.poster-app .wa-bottom{
  position:static !important;
  margin-top:24px;
}
body.poster-app .wa-stage{
  position:static !important;
  height:auto !important;
  padding: calc(var(--wa-top-h, 44px) + 12px) 0 calc(var(--wa-bottom-h, 32px) + 12px) 0;
  background:var(--bg);
  overflow:visible;
}
body.poster-app:not(.panel-collapsed) .wa-stage{
  right:0 !important;
}
@media (min-width:641px){
  body.poster-app:not(.panel-collapsed) .wa-stage{ padding-right:320px !important; }
}

/* Masthead — typeset, two hairlines. */
.masthead{ max-width:1480px; margin:0 auto; padding:0 24px; }
.masthead-rule{ height:1px; background:var(--text); opacity:.85; }
.masthead-lede{ padding:18px 0 8px; display:flex; flex-direction:column; gap:4px;
  border-bottom:1px solid var(--bar-border); margin-bottom:12px;
}
.masthead-title{
  margin:0; font-family:var(--kami-font-display); font-weight:700;
  font-size:clamp(22px, 3.0vw, 36px); letter-spacing:-0.02em; line-height:1.05;
  color:var(--text);
}
.masthead-sub{
  margin:0; color:var(--text); opacity:.65; font-size:14px; font-family:var(--kami-font-body);
}

/* Input strip */
.input-strip{
  padding:18px 24px 8px; display:flex; gap:12px; align-items:flex-start;
  max-width:1480px; margin:0 auto; width:100%;
}
.input-cta{ display:flex; flex-direction:column; gap:8px; align-self:stretch; }
#phrase{
  flex:1; min-height:64px; resize:vertical;
  padding:14px 16px; font-family:var(--kami-font-display); font-size:18px;
  background:var(--bar-bg); color:var(--text);
  border:1px solid var(--bar-border); border-radius:12px;
}
#phrase:focus{ outline:none; border-color:var(--text); }
#go{
  align-self:stretch; padding:0 22px; min-width:120px;
  font:inherit; font-weight:600; font-size:15px;
  background:var(--text); color:var(--bg);
  border:none; border-radius:10px; cursor:pointer;
}
#go:hover{ opacity:.88; }
.tb{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; background:transparent; border:1px solid var(--bar-border);
  border-radius:8px; color:var(--text); cursor:pointer;
  font:inherit; font-size:13px;
}
.tb:hover{ border-color:var(--text); }

#status{
  padding:0 24px 8px; color:var(--text); opacity:.6;
  font-family:var(--kami-font-mono); font-size:12px;
  max-width:1480px; margin:0 auto; width:100%;
}

/* Diptych */
.diptych{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding:8px 24px 36px; max-width:1480px; margin:0 auto; width:100%;
}
@media (max-width:980px){ .diptych{ grid-template-columns:1fr; } }

.poster-card{
  background:var(--bar-bg); border:1px solid var(--bar-border); border-radius:4px;
  overflow:visible; display:flex; flex-direction:column;
  position:relative;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 26px -18px rgba(0,0,0,.18);
}
/* Registration ticks */
.poster-card::before, .poster-card::after{
  content:''; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--text); opacity:.32;
}
.poster-card::before{ top:-1px; left:-1px; border-top:1px solid; border-left:1px solid; }
.poster-card::after { bottom:-1px; right:-1px; border-bottom:1px solid; border-right:1px solid; }

/* Edit strip — only when body.edit-mode is on. */
.edit-strip{
  display:none;
  align-items:flex-start; gap:8px;
  padding:10px 12px; background:var(--bg);
  border-bottom:1px solid var(--bar-border);
}
body.edit-mode .edit-strip{ display:flex; }
.edit-strip .edit-lbl{
  font-family:var(--kami-font-mono); font-size:10px; color:var(--text); opacity:.55;
  letter-spacing:.04em; text-transform:uppercase;
  margin-top:6px; flex:0 0 auto; min-width:42px;
}
.edit-strip .edit-copy{
  flex:1; min-height:38px; padding:6px 8px;
  font-family:var(--kami-font-display); font-size:13px;
  background:var(--bar-bg); color:var(--text);
  border:1px solid var(--bar-border); border-radius:6px; resize:vertical;
}
.edit-strip .edit-copy:focus{ outline:none; border-color:var(--text); }
.edit-strip .edit-revert{
  flex:0 0 auto; padding:6px 10px;
  background:transparent; border:1px solid var(--bar-border); border-radius:6px;
  cursor:pointer; font:inherit; font-size:13px;
}
.edit-strip .edit-revert:hover{ border-color:var(--text); }
body.edit-mode #edit-toggle{ background:var(--text); color:var(--bg); }

.poster-card canvas{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  background:#fff; border-bottom:1px solid var(--bar-border);
}
.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; gap:8px;
}
.dl{
  padding:6px 12px; font:inherit; font-size:12px; font-weight:600;
  background:var(--text); color:var(--bg); border:none; border-radius:8px; cursor:pointer;
}

/* Trace */
.trace{
  padding:12px 14px 16px; background:var(--bar-bg); border-top:1px solid var(--bar-border);
  font-family:var(--kami-font-mono); font-size:11px; line-height:1.55;
  max-height:240px; overflow:auto; color:var(--text);
}
.trace-conceit{
  display:grid; grid-template-columns:auto auto 1fr; column-gap:10px; align-items:baseline;
  margin:0 0 10px; padding:8px 10px; border-left:3px solid var(--text);
  background:rgba(0,0,0,0.04); border-radius:0 4px 4px 0;
}
html[data-theme="terminal"] .trace-conceit{ background:rgba(255,255,255,0.04); }
.trace-conceit-tag{ font-size:9px; letter-spacing:.08em; color:var(--text); opacity:.55; }
.trace-conceit-val{ font-family:var(--kami-font-display); font-weight:700; font-size:13px; }
.trace-conceit-desc{ color:var(--text); opacity:.65; font-family:var(--kami-font-body); font-size:11px; }
.trace-head{ font-family:var(--kami-font-display); font-size:13px; margin-bottom:8px;
  display:flex; align-items:center; gap:6px; }
.arch-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; border:1px solid var(--bar-border); }
.trace-template{ color:var(--text); opacity:.55; font-weight:400; }
.trace-row{ display:grid; grid-template-columns:80px 1fr; column-gap:10px; padding:3px 0;
  border-top:1px dashed var(--bar-border); }
.trace-row:first-of-type{ border-top:none; }
.trace-step{ color:var(--text); opacity:.55; text-transform:uppercase; letter-spacing:.04em; font-size:10px; }
.trace-value{ color:var(--text); font-weight:600; }
.trace-reason{ grid-column:2; color:var(--text); opacity:.65; font-family:var(--kami-font-body); font-size:11px; }

/* Override #control panel from old layout — now lives inside .wg from chrome.css.
   The control-body is the wg-body; reuse pixart's collapsible mechanics. */
#control-body{ padding:14px; overflow:auto; flex:1; }
.cust-sect{
  border:1px solid var(--bar-border); border-radius:12px; padding:12px;
  margin-bottom:14px;
}
.cust-sect h3{ margin:0 0 10px; font-size:13px; }
.cust-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0;
  font-size:12px; }
.cust-row > span{ color:var(--text); opacity:.55; text-transform:uppercase; letter-spacing:.04em; font-size:10px; }
.cust-sel{
  flex:1; padding:6px 8px; background:var(--bg); color:var(--text);
  border:1px solid var(--bar-border); border-radius:8px; font:inherit; font-size:12px;
}
.cust-pal{ display:flex; gap:6px; }
.sw{ width:24px; height:24px; border-radius:6px; border:1px solid var(--bar-border); cursor:pointer; padding:0; }
.cust-tokens{ display:flex; flex-direction:column; gap:4px; width:100%; margin-top:6px; max-height:160px; overflow:auto; }
.cust-token-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--kami-font-mono); font-size:10px; }
.cust-token-w{ font-family:var(--kami-font-mono); color:var(--text); opacity:.55; flex:1; }
.cust-dl{
  width:100%; margin-top:8px; padding:8px 12px;
  background:var(--text); color:var(--bg); border:none; border-radius:8px;
  cursor:pointer; font:inherit; font-weight:600; font-size:12px;
}

/* Top-bar action buttons */
.wa-action-btn{
  font:inherit; font-size:13px;
  padding:6px 12px; border-radius:8px;
  background:transparent; border:1px solid var(--bar-border);
  color:var(--text); cursor:pointer;
}
.wa-action-btn:hover{ border-color:var(--text); }
.wa-action-btn[aria-pressed="true"]{ background:var(--text); color:var(--bg); }

/* ---------- MOBILE (<= 640px) ---------- */
@media (max-width:640px){
  body.poster-app .wa-stage{
    padding: calc(var(--wa-top-h, 44px) + 8px) 0 24px 0;
  }
  body.poster-app:not(.panel-collapsed) .wa-stage{ padding-right:0 !important; }
  /* Hide the bottom-sheet peek entirely on mobile. The top-bar "control"
     button is the only affordance — clean and unambiguous. When collapsed,
     the panel sits fully off-screen. */
  body.poster-app #panel{
    transform: translateY(100%) !important;
    bottom: 0 !important;
    border-top: 1px solid var(--bar-border) !important;
  }
  body.poster-app #panel.collapsed{
    transform: translateY(0) !important;
  }
  body.poster-app #panel .wg-collapse{ display:none !important; }
  /* Canvas: cap at ~64vh so two posters + traces fit in roughly one viewport
     and the page scrolls predictably. Touch-action:pan-y guarantees vertical
     swipe always passes through to the document, even if a future render
     hooks pointer events. */
  .poster-card canvas{
    max-height: 64vh; object-fit: contain;
    touch-action: pan-y;
  }
  .poster-card{ touch-action: pan-y; }
  body.poster-app{ touch-action: pan-y; }
  .masthead{ padding:0 16px; margin-top:8px; }
  .masthead-lede{ padding:12px 0 6px; }
  .masthead-title{ font-size:24px; line-height:1.1; }
  .masthead-sub{ font-size:13px; }
  .input-strip{
    flex-direction:column; gap:10px; padding:14px 16px 8px;
  }
  .input-cta{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  #go{ flex:1; min-width:0; padding:10px 18px; min-height:42px; }
  .input-cta .tb{ flex:1; padding:10px 14px; min-height:42px; }
  #phrase{ min-height:84px; font-size:16px; }
  #status{ padding:0 16px 8px; }
  .diptych{
    grid-template-columns:1fr !important;
    gap:16px; padding:8px 16px 24px;
  }
  .poster-card canvas{ aspect-ratio:4/5; }
  .trace{ font-size:11px; max-height:200px; }
  .trace-conceit{ grid-template-columns:auto 1fr; }
  .trace-conceit-desc{ grid-column:1 / span 2; }
  .trace-row{ grid-template-columns:64px 1fr; column-gap:8px; }
  /* Footer: single-row with smaller text on mobile. */
  body.poster-app .wa-bottom{ padding:10px 12px; font-size:11px; flex-wrap:wrap; gap:6px 12px; }
  body.poster-app .wa-bottom .row{ flex-wrap:wrap; }
  /* Top-bar buttons: shrink labels to fit. */
  .wa-action-btn{ padding:5px 10px; font-size:12px; }
  /* Edit strip: compact. */
  .edit-strip{ padding:8px 10px; gap:6px; flex-wrap:wrap; }
  .edit-strip .edit-lbl{ font-size:9px; min-width:auto; flex:0 0 100%; margin-top:0; }
  .edit-strip .edit-copy{ font-size:13px; min-height:32px; }
}

/* Paper-grain background — workshop, not chrome. Light themes only. */
html:not([data-theme="terminal"]):not([data-theme="dark"]) body.poster-app .wa-stage{
  background-image:
    radial-gradient(rgba(0,0,0,.022) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.016) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}