/* designer-pro-in-order.css — In Order workspace-only tweaks, on top of
   /css/main.css (never edited) and /css/designer-pro-core.css (shared Pro
   chrome). Kept intentionally small — this workspace reuses almost all of
   the Free Designer's own layout classes (.designer-grid/.goal-card/etc.),
   read-only, exactly like js/builder.js reuses share-widget.js. */

.row-sticker-btn {
  box-shadow: var(--shadow-card);
}

/* ---- Editing-card compact header (Visual Cleanup V2, 2026-09-18, spec P1
   "Editing card compact header") — the collapsed row already covers
   title/count/Edit; the same visual language, reused for the Done button
   that replaces Edit while editing (a fresh class, not `.goal-edit-btn`
   itself, so it never gets wired to the "start editing" click handler). ---- */
.goal-done-btn-top {
  border: 1px solid var(--color-line); border-radius: 8px; background: transparent;
  cursor: pointer; color: var(--color-muted); font-family: inherit; font-size: 13px; padding: 7px 10px;
}
.goal-done-btn-top:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---- Header color, compact (spec P1 "Header color compact UI") ----
   Reuses Free Designer's own .header-color-swatch button look (main.css)
   unchanged -- only the new wrapper/Custom-toggle/mini-swatch here are new. */
.header-color-compact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.header-color-custom-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-line);
  cursor: pointer; padding: 0; font-size: 0; color: transparent; overflow: hidden;
  background-image: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.header-color-custom-btn.is-active { border-color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-bg-alt); }
/* The native color input stays in the DOM (needed so .click() can open the
   OS picker) but is visually collapsed to nothing -- NOT `hidden`, since a
   display:none input can't be opened programmatically in most browsers.
   Scoped to this page's own stylesheet only, so Any Order's unrelated
   .goal-header-color-input (still normally-sized, via main.css) is unaffected. */
.goal-header-color-input {
  width: 0; height: 0; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; overflow: hidden;
}
.mini-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--color-line); vertical-align: -1px;
}
.mini-swatch.is-default { background: var(--color-bg-alt); }

/* ---- Appearance <details> (spec P1 "Editor hierarchy" / "Advanced
   Appearance section") -- Header color + Visual Mark + Width, collapsed by
   default so a first-time user meets Title -> Type -> Items first. ---- */
.pro-appearance {
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-bg-alt); margin: 14px 0; overflow: hidden;
}
.pro-appearance summary {
  padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--color-muted); list-style: none; display: flex; align-items: center; gap: 4px;
}
.pro-appearance summary::-webkit-details-marker { display: none; }
.pro-appearance summary::before { content: "▸"; font-size: 11px; }
.pro-appearance[open] summary::before { content: "▾"; }
.pro-appearance-body { padding: 4px 14px 14px; display: grid; gap: 14px; }

/* ---- Preview header row + Fit design / Full page switch (spec P0
   "Preview needs screen zoom") ---- */
.preview-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.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; }

/* The zoomed SVG is scaled via an inline CSS transform (in-order-designer.js
   applyPreviewZoom) -- this wrapper frames/crops that visually enlarged
   content to a comfortable on-screen viewport without touching the SVG's
   own mm geometry, viewBox, or export output at all. */
.board-preview.is-zoomed {
  height: min(58vh, 520px); overflow: hidden; border-radius: 8px;
  /* main.css's .board-preview is a flex container with the browser default
     align-items:stretch -- without overriding that here, giving this a
     fixed height stretches the svg child's height:auto to fill it, which
     breaks the SVG's own aspect-ratio-preserving sizing (the intrinsic
     210:297 ratio) and silently desyncs applyPreviewZoom()'s width-based
     scale math from the actual rendered height (2026-09-18, found via
     getScreenCTM() during testing: width and height were scaling by two
     different factors). flex-start keeps the svg at its natural,
     aspect-correct size so it can be scrolled/clipped by overflow instead. */
  align-items: flex-start;
}
.board-preview.is-zoomed svg { box-shadow: none; }

@media print {
  /* Print always shows the true full page regardless of on-screen zoom
     state -- these two rules win over any inline style/class set above
     via !important, matching the exact pattern css/main.css's own
     `.board-preview svg { width:auto!important... }` print override
     already uses for this same print-isolation purpose. */
  .board-preview.is-zoomed { height: auto !important; overflow: visible !important; }
  .board-preview svg { transform: none !important; }
}

@media (max-width: 480px) {
  .preview-zoom-btn { padding: 4px 8px; font-size: 11px; }
}

/* main.css's .designer-grid has NO explicit grid-template-columns below its
   900px breakpoint -- the single implicit column then auto-sizes to the
   MAX-CONTENT width of whichever child needs the most room, instead of
   filling/shrinking to the grid's own definite (viewport) width. That's
   normally masked because nothing inside was wide enough to matter, but
   this round's new content (Appearance section, free-import hint) pushed
   some child's max-content width past the viewport while editing, forcing
   the whole column -- editor AND preview both -- to 357px on a 360px-wide
   screen (found via mobile regression testing, 2026-09-18). Explicit
   minmax(0,1fr) makes the column fill/shrink to the real available width
   instead, the standard fix for this CSS Grid sizing pattern. */
@media (max-width: 899px) {
  .designer-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Same pattern, one level deeper: main.css's .goal-list is also
   `display:grid` with no grid-template-columns, so its single implicit
   column can ALSO auto-size to a goal-card's max-content width instead of
   filling .designer-editor's real (now-fixed) width. Not width-gated like
   the fix above -- this is a correctness fix, not a breakpoint-specific one. */
.goal-list { grid-template-columns: minmax(0, 1fr); }

/* main.css's .editor-settings is `display:grid; grid-template-columns:1fr 1fr`
   (Paper/Orientation/Action/Row border) -- grid items default to
   min-width:auto, so a <select>'s own min-content width (its longest option
   text) can keep a `1fr` track from shrinking below it, overflowing at
   narrow widths. Pre-existing (unrelated to this round's own changes), but
   only actually triggers a horizontal scrollbar once the page is tall
   enough for a vertical scrollbar to shave a few px off the viewport width
   -- which the new Appearance section/import hint below made common enough
   during editing to need fixing now (found via mobile regression testing,
   2026-09-18). Scoped here rather than in main.css. */
.editor-settings .field-inline select { min-width: 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: styled strips
   printed 2 pages). Remove everything but the preview from layout. */
@media print {
  body > :not(main) { display: none !important; }
  main > :not(.designer-grid) { display: none !important; }
  .designer-grid > :not(.designer-preview) { display: none !important; }
  .designer-preview > :not(.board-preview) { display: none !important; }
}