/* designer-pro-any-order.css — Any Order workspace-only tweaks, on top of
   /css/main.css (never edited) and /css/designer-pro-core.css (shared Pro
   chrome). This workspace's own layout (horizontal tabs, per-item width/
   sticker controls) is different enough from In Order's row-based editor
   that a few extra rules live here rather than forcing one shared stylesheet
   to cover both shapes. */

.anyorder-item-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--color-line);
}
.anyorder-item-row:last-child { border-bottom: none; }
.anyorder-item-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.anyorder-item-fields input[type="text"] {
  width: 100%; padding: 7px 9px; border: 1px solid var(--color-line); border-radius: 7px; font: inherit;
}
/* Tab Mark control (Any Order UX Rescue V1, 2026-09-19) — the mark button
   alone read as an unlabeled, near-blank square (spec item 4/10: "no
   guessing what a tiny blank square means"); this small always-visible
   caption makes its purpose obvious without spelling out implementation
   words like "Emoji"/"Twemoji"/"Sticker ID" (user-facing term is "Tab Mark"
   everywhere, matching the button's own title attribute). */
.anyorder-item-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.anyorder-item-mark-label { font-size: 10px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.item-sticker-btn { align-self: flex-start; }
.pro-item-width { margin-top: 2px; }
.pro-anyorder-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---- Large Preview Layout V2 (2026-09-18) ----
   Desktop item-row density (spec Part 3/15/16): a wide desktop can lay a
   tab's fields out horizontally instead of stacked -- Goal text gets the
   most room, short label less, mark/advanced-size/remove stay compact --
   but this is still a friendly list editor, not a spreadsheet: no table
   headers, no forced single line, wraps naturally at in-between widths
   (tablet, spec Part 18) rather than squeezing cells. */
@media (min-width: 768px) {
  .anyorder-item-fields {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  }
  .anyorder-item-fields .anyorder-text-input { flex: 3 1 220px; width: auto; }
  .anyorder-item-fields .anyorder-shortlabel-input { flex: 1.4 1 140px; width: auto; }
  .anyorder-item-mark { flex: none; align-self: center; flex-direction: row; align-items: center; gap: 6px; }
  .pro-advanced-size { flex: none; align-self: center; margin-top: 0; }
}
@media (min-width: 1024px) {
  .anyorder-item-fields .anyorder-text-input { flex-basis: 280px; }
  .anyorder-item-fields .anyorder-shortlabel-input { flex-basis: 160px; }
}

/* Advanced size (UX Cleanup V1 Part 4): a native <details> so precision
   width stays fully functional but collapsed out of the default row view. */
.pro-advanced-size { margin-top: 4px; }
.pro-advanced-size summary {
  font-size: 12px; color: var(--color-muted); cursor: pointer; list-style: none;
  display: inline-block;
}
.pro-advanced-size summary::-webkit-details-marker { display: none; }
.pro-advanced-size summary::before { content: "▸ "; }
.pro-advanced-size[open] summary::before { content: "▾ "; }
.pro-advanced-size .pro-width-mode-row { margin-top: 8px; }

/* ---- Page title / subline (Part 11) ---- */
.pro-page-title { font-size: 24px; margin: 0 0 4px; text-align: center; }
.pro-page-subline { color: var(--color-muted); font-size: 13px; margin: 4px 0 0; text-align: center; }

/* ---- Large Preview Layout V2 (2026-09-18) ----
   Any Order is a wide tear-off SHEET, not a narrow strip -- it needs
   horizontal room, not a half-screen column next to the editor. Desktop is
   stacked top (editor) / bottom (large, full-.wrap-width preview) BY
   DEFAULT here, not just at a mobile breakpoint; In Order deliberately
   keeps its own side-by-side Editor|Preview grid (a narrow strip suits
   that shape) -- shared code does not mean shared UX layout. */
.ao-editor-section { padding: 18px 20px 0; }
.ao-preview-section { padding: 20px 20px 0; }

.ao-preview-large { padding: 24px; }
@media (min-width: 640px) {
  .ao-preview-large { padding: 32px; }
}

/* ---- Preview header row + Fit board / Full page switch ----
   Same interaction pattern as In Order's own Fit design/Full page switch
   (css/designer-pro-in-order.css, not shared here since this round is
   scoped to Any Order's own files), sized for this workspace's much larger
   preview frame. */
.preview-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.preview-zoom-switch {
  display: inline-flex; border: 1px solid var(--color-line); border-radius: 999px;
  padding: 2px; gap: 2px; flex-shrink: 0;
}
.preview-zoom-btn {
  border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--color-muted); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.preview-zoom-btn.is-selected { background: var(--color-ink); color: #fff; }
@media (max-width: 480px) {
  .preview-zoom-btn { padding: 4px 8px; font-size: 11px; }
}

/* The zoomed SVG is scaled via an inline CSS transform (any-order-designer.js
   applyPreviewZoom) -- this wrapper frames/crops that visually enlarged
   content to a big, comfortable on-screen viewport without touching the
   SVG's own mm geometry, viewBox, or export output. Taller than In Order's
   own frame since this preview is meant to dominate the page (spec Part 6/20:
   "10-tab board 应该足够大，Goal labels/stickers/cut guides 能直接辨认"). */
.board-preview.is-zoomed {
  /* Preview frame (Any Order UX Rescue V1, 2026-09-19): a wide/shallow
     tear-off sheet centered in a 760px-tall frame left a lot of empty beige
     space above/below on a typical single-board page. This only trims the
     frame's own ceiling height (CSS layer) — applyPreviewZoom()'s Fit board
     math, the SVG's mm geometry/viewBox, and export/print are all untouched
     (still isolated by the `transform:none!important`/`height:auto!important`
     print override below); a page with several stacked boards still gets a
     tall frame, this only lowers the max. */
  height: min(58vh, 600px); overflow: hidden; border-radius: 8px;
  /* main.css's .board-preview is a flex container with the browser default
     align-items:stretch -- without this override, a fixed height stretches
     the svg child's height:auto and breaks its aspect-ratio preservation
     (same issue found and fixed for In Order, 2026-09-18). */
  align-items: flex-start;
}
.board-preview.is-zoomed svg { box-shadow: none; }

@media print {
  .board-preview.is-zoomed { height: auto !important; overflow: visible !important; }
  .board-preview svg { transform: none !important; }
}

/* main.css's .goal-list is `display:grid` with no grid-template-columns, so
   its single implicit column can auto-size to a goal-card's max-content
   width instead of filling the real available width (same CSS Grid sizing
   pattern found and fixed for In Order, 2026-09-18) -- relevant here too
   now that the editor spans the full .wrap width on desktop. */
.goal-list { grid-template-columns: minmax(0, 1fr); }

/* ---- "Before you hang it" precut box (Part 11) ---- */
.hint-precut-box { background: var(--color-accent-soft); border-radius: 8px; padding: 10px 14px; }
.hint-precut-title { font-weight: 700; font-size: 13px; margin: 0 0 4px; }
.hint-precut-row { display: flex; align-items: center; gap: 10px; }
.precut-diagram { font-size: 14px; letter-spacing: 3px; color: var(--color-accent); flex-shrink: 0; }
.hint-precut-text { font-size: 13px; margin: 0; }

/* Print = exactly one sheet. main.css hides the rest of the page with
   visibility only, so it still takes up height and the position:fixed
   preview repeats on every extra page (found 2026-09-29: 3 printed pages).
   Removing everything but the preview from layout keeps it to one page. */
@media print {
  body > :not(main) { display: none !important; }
  main > :not(.ao-preview-section) { display: none !important; }
  .ao-preview-section .designer-preview > :not(.board-preview) { display: none !important; }
}