/* The stage belongs to the product, not the selected object's controls. */
/* A 320px viewport can have less usable width when a scrollbar is present. */
body { min-width:0; }
/* Account saves are explicit; the browser's working copy is a different status. */
#editor-workspace .editor-template-status { grid-area:template; min-width:0; }
#editor-workspace .customer-save-status { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 18px; min-height:58px; background:#fff; border-bottom:1px solid var(--line); }
.customer-save-status > span { display:grid; gap:2px; min-width:0; }
.customer-save-status b { font-size:14px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-save-status small { color:var(--muted); font-size:12px; line-height:1.3; }
.customer-save-status[data-save-state="dirty"] small { color:#885416; }
.customer-save-status[data-save-state="saved"] small { color:var(--green-dark); }
.customer-save-status button { flex:none; min-height:40px; padding:8px 14px; font-size:14px; }
.customer-template-save-dialog { width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); margin:auto; overflow:auto; padding:22px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:#fff; box-shadow:0 20px 60px #17291e33; }
.customer-template-save-dialog::backdrop { background:#182d2277; }
.customer-template-save-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.customer-template-save-dialog h2 { margin:0; font:600 23px/1.25 'Segoe UI',sans-serif; }
.customer-template-save-dialog .customer-template-save-form { display:flex; flex-direction:column; align-items:stretch; gap:14px; margin:18px 0 0; padding:0; border:0; background:transparent; }
.customer-template-save-dialog fieldset { margin:0; padding:0; border:0; display:grid; gap:8px; min-width:0; }
.customer-template-save-dialog legend { font-size:13px; margin-bottom:8px; color:var(--muted); }
.customer-template-save-dialog label { font-size:14px; line-height:1.4; }
.customer-template-save-dialog fieldset label { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.customer-template-save-dialog fieldset label:has(:checked) { border-color:#698d71; background:var(--green-soft); }
.customer-template-save-dialog fieldset input { width:18px; height:18px; min-height:0; flex:none; margin:2px 0 0; accent-color:var(--green); }
.customer-template-save-dialog fieldset label > span { display:grid; gap:3px; min-width:0; overflow-wrap:anywhere; }
.customer-template-save-dialog small { font-size:12px; font-weight:400; color:var(--muted); }
.customer-template-save-dialog #customer-template-name { min-height:44px; font-size:16px; }
.customer-template-save-dialog p { margin:0; font-size:13px; line-height:1.5; }
#customer-template-save-help { color:var(--muted); }
.customer-template-save-message:empty { display:none; }
.customer-template-save-message.error { color:var(--danger); }
.customer-template-save-dialog .customer-template-save-actions, .customer-template-save-dialog .customer-template-conflict { display:flex; flex-wrap:wrap; gap:8px; }
.customer-template-save-dialog button:not(.cart-close) { min-height:44px; font-size:14px; }
@media (max-width:900px) {
  #editor-workspace .customer-save-status { padding:6px 12px; gap:8px; }
  .customer-save-status b { font-size:13px; }
  .customer-save-status small { font-size:11px; }
  .customer-save-status button { min-height:44px; padding:8px 12px; }
  .customer-template-save-dialog { padding:18px; }
}
@media (min-width:901px) {
  #editor-workspace { grid-template-columns:220px minmax(260px,1fr) 248px; grid-template-rows:auto 152px 48px minmax(0,1fr) 28px; min-height:590px; }
  #editor-workspace .editor-ribbon { height:152px; padding:7px 16px; overflow:auto; }
  #editor-workspace .ribbon-text-tools { display:grid; grid-template-columns:160px minmax(150px,1.4fr) minmax(150px,1fr) 104px 170px; grid-template-rows:64px 64px; gap:8px 12px; max-width:1160px; }
  #editor-workspace .ribbon-controls.ribbon-text-tools > * { width:auto; min-width:0; margin:0; gap:4px; line-height:18px; }
  #editor-workspace .ribbon-text-tools .ribbon-position { grid-column:1/3; max-width:340px; }
  #editor-workspace .ribbon-text-tools .ribbon-width { grid-column:3; max-width:145px; }
  #editor-workspace .ribbon-text-tools .ribbon-curve { grid-column:4/6; }
  #editor-workspace .canvas-toolbar { height:48px; min-height:0; flex-wrap:nowrap; }
  #editor-workspace .series-preview { min-width:0; }
  #editor-workspace .series-preview b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
  #editor-workspace .canvas-hint { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
#editor-workspace .board-wrap { position:relative; }
#editor-workspace .quick-add-primary button { box-sizing:border-box; min-width:0; padding:6px 4px; min-height:58px; flex-direction:column; justify-content:center; gap:4px; text-align:center; }
#editor-workspace .quick-add-primary button span { display:block; width:100%; min-width:0; font-size:14px; line-height:1.2; white-space:nowrap; }
#editor-workspace .quick-add-primary button b { height:22px; display:grid; place-items:center; line-height:1; }
#editor-workspace .quick-add-primary #add-dxf b { height:22px; padding:2px 4px; }
#editor-workspace .ribbon-input-unit { box-sizing:border-box; min-width:0; }
#editor-workspace .ribbon-controls .ribbon-input-unit { width:100%; }
#editor-workspace .ribbon-input-unit input { appearance:textfield; -moz-appearance:textfield; }
#editor-workspace .ribbon-input-unit input::-webkit-inner-spin-button, #editor-workspace .ribbon-input-unit input::-webkit-outer-spin-button { appearance:none; margin:0; }
#editor-workspace .ribbon-input-unit em { white-space:nowrap; }
#editor-workspace .ribbon-position-fields { gap:6px; }
#editor-workspace .ribbon-curve { min-width:0; grid-template-columns:auto minmax(85px,1fr); gap:4px 8px; }
#editor-workspace .ribbon-arc-buttons { gap:4px; }
#editor-workspace .ribbon-arc-buttons button { width:38px; }
#design-board { touch-action:pan-y; }
#design-board :is(.art-object,.resize-handle) { touch-action:none; }
.art-text { white-space:pre; }
.art-text[dominant-baseline="alphabetic"] { dominant-baseline:alphabetic; }
.text-hit { fill:transparent; stroke:none; pointer-events:all; cursor:text; }
.direct-text-editor { display:contents; }
.direct-text-editor input { position:absolute; z-index:5; width:2px; height:2px; min-height:0; opacity:0; padding:0; border:0; font-size:16px; pointer-events:none; }
.inline-text-done { position:absolute; z-index:5; bottom:12px; right:16px; display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; border:1px solid #244c3b; border-radius:12px; background:#244c3b; color:#fff; font-size:15px; font-weight:650; box-shadow:0 3px 14px #182d2226; }
.inline-text-selection { pointer-events:none; }
.inline-text-highlight { fill:#1879de; fill-opacity:.28; stroke:none; }
.inline-text-caret { stroke:#123d29; stroke-width:1.8px; vector-effect:non-scaling-stroke; animation:gravurama-caret 1.1s step-end infinite; }
.editing-text .selection-caption { visibility:hidden; }
.editing-text .art-object.selected { cursor:text; }
@keyframes gravurama-caret { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .inline-text-caret { animation:none; } }
.ribbon-arc-help { font-size:12px; color:var(--muted); }
.admin-pricing-model { display:grid; gap:6px; max-width:500px; margin:12px 0; font-size:14px; }
#admin-area-pricing { padding:16px; border:1px solid var(--line); background:var(--green-soft); border-radius:8px; margin-bottom:16px; }
#admin-workspace .pricing-area-explanation { font-size:14px; line-height:1.5; }
.price-area-note { display:block; font-size:13px; line-height:1.5; color:var(--muted); margin-top:12px; }
.design-confirm-dialog { width:min(440px,calc(100vw - 32px)); padding:24px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:white; }
.design-confirm-dialog::backdrop { background:#182d2277; }
.design-confirm-dialog h2 { font:600 23px/1.2 'Segoe UI',sans-serif; margin:0 0 14px; }
.design-confirm-dialog p { font-size:16px; line-height:1.5; }
.design-confirm-dialog form { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.design-confirm-dialog button { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:7px; font-size:14px; }
@media (max-width:900px) {
  /* The canvas, navigation and price share one screen. Detailed controls live
     in a sheet instead of pushing the board and checkout down the document. */
  html[data-app-mode="editor"], html[data-app-mode="editor"] body { height:100%; overflow:hidden; overscroll-behavior:none; }
  html[data-app-mode="editor"] main { height:calc(100svh - var(--mobile-banner-height, 40px)); min-height:0; }
  html[data-app-mode="editor"] .topbar { position:static; }
  html[data-app-mode="editor"] .modebar { height:44px; min-height:44px; }
  #editor-workspace { display:grid; height:calc(100svh - var(--workspace-chrome)); min-height:0; overflow:hidden; grid-template-columns:minmax(0,1fr); grid-template-areas:"template" "insert" "info" "canvas" "mobile" "right"; grid-template-rows:auto 66px 48px minmax(100px,1fr) 58px auto; }
  #editor-workspace > .canvas-area { display:contents; }
  #editor-workspace #editor-ribbon { display:none; }
  #editor-workspace .board-wrap { height:100%; min-height:0; padding:0 12px; position:relative; align-self:stretch; background:#eef0eb; overflow:hidden; }
  #editor-workspace .canvas-toolbar { height:48px; min-height:48px; padding:0 12px; gap:6px; }
  #editor-workspace .canvas-toolbar > span:first-child { display:none; }
  #editor-workspace .canvas-toolbar .history-controls { gap:0; flex-shrink:0; order:2; }
  #editor-workspace .canvas-toolbar .history-controls button { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; background:transparent; border:0; }
  #editor-workspace .canvas-toolbar .history-controls button span { font-size:24px; }
  #editor-workspace .fit-badge { font-size:12px; line-height:1.3; padding:4px 0; background:transparent; border:0; white-space:normal; min-width:0; flex:1; overflow:hidden; max-height:40px; }
  #editor-workspace .canvas-toolbar:has(.series-preview:not([hidden])) .fit-badge.ok { display:none; }
  #editor-workspace .canvas-toolbar:has(.fit-badge.bad) .series-preview { display:none; }
  #editor-workspace .series-preview { min-width:0; }
  #editor-workspace .series-preview b { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
  #editor-workspace .series-preview button { width:44px; min-width:44px; height:44px; }
  #editor-workspace .series-preview { padding:0; gap:1px; border:0; background:transparent; }
  #editor-workspace .series-preview button { background:transparent; }
  #editor-workspace .quick-add { padding:8px 12px; }
  #editor-workspace .quick-add-primary button { min-height:48px; gap:3px; }
  #editor-workspace .quick-add-primary button span { font-size:13px; }
  #editor-workspace .editor-mobile-nav { padding:8px 12px; }
  #editor-workspace .editor-mobile-nav button { font-size:13px; min-height:44px; padding:5px; }
  #editor-workspace .right-panel { position:relative; bottom:auto; z-index:4; padding:10px 12px max(10px,env(safe-area-inset-bottom)); box-shadow:0 -3px 16px #2035250c; overflow:visible!important; }
  #editor-workspace .shop-order-card { grid-template-columns:minmax(0,1fr) minmax(144px,1.1fr); gap:4px 10px; }
  #editor-workspace .shop-order-head { grid-column:1; grid-row:1; gap:6px; }
  #editor-workspace .shop-order-head strong { font-size:23px; line-height:1.2; }
  #editor-workspace .shop-order-head > div, #editor-workspace .price-details-open { display:none; }
  #editor-workspace .quantity-field { grid-column:1; grid-row:2; gap:0; font-size:0; }
  #editor-workspace .quantity-control { width:132px; border-radius:9px; }
  #editor-workspace .quantity-control :is(input,button) { width:44px; min-width:44px; height:44px; font-size:16px; }
  #editor-workspace .quantity-field small { display:none; }
  #editor-workspace .add-cart-button { grid-column:2; grid-row:1/3; align-self:center; }
  #editor-workspace .canvas-hint { display:none; }
  #editor-workspace .direct-text-editor input { position:fixed; left:16px!important; top:calc(var(--mobile-visible-top,0px) + 100px)!important; }
  #editor-workspace .design-storage-warning { position:absolute; bottom:160px; z-index:8; }

  /* Keyboard focus gets its own smaller working viewport, once on open/close.
     Never move the invisible input with individual letters. */
  html[data-app-mode="editor"][data-mobile-keyboard="true"]:has(.editing-text) .modebar { display:none; }
  html[data-app-mode="editor"][data-mobile-keyboard="true"]:has(.editing-text) #editor-workspace { height:calc(var(--mobile-visible-height,100svh) - var(--workspace-chrome)); grid-template-areas:"template" "info" "canvas"; grid-template-rows:auto 44px minmax(100px,1fr); }
  html[data-mobile-keyboard="true"] #editor-workspace:has(.editing-text) :is(.quick-add,.editor-mobile-nav,.right-panel) { display:none; }
  html[data-mobile-keyboard="true"] #editor-workspace .editing-text { padding-bottom:48px; }

  /* Same native controls as desktop, in a keyboard-aware mobile sheet. */
  #workspace-sheet { position:fixed; inset:auto 8px auto; top:calc(var(--mobile-visible-top,0px) + var(--mobile-visible-height,100svh) - min(590px,var(--mobile-visible-height,100svh) - 18px)); width:auto; max-width:none; height:min(590px,calc(var(--mobile-visible-height,100svh) - 18px)); max-height:none; margin:0; border-radius:20px 20px 12px 12px; }
  #workspace-sheet > header { flex:none; padding:10px 16px; }
  #workspace-sheet h2 { font-size:18px; }
  #workspace-sheet .workspace-sheet-body { padding:16px; scrollbar-gutter:stable; overflow-anchor:none; }
  #workspace-sheet .ribbon-controls { gap:16px 12px; }
  #workspace-sheet .ribbon-controls > * { margin:0; }
  #workspace-sheet .ribbon-operation { order:-2; }
  #workspace-sheet .ribbon-text { order:-1; }
  #workspace-sheet .ribbon-series { order:9; }
  #workspace-sheet .ribbon-controls .ribbon-input-unit { height:46px; min-width:0; width:100%; }
  #workspace-sheet .ribbon-arc-buttons button { width:44px; height:44px; }
  #workspace-sheet .ribbon-curve { grid-template-columns:auto minmax(90px,1fr); gap:6px 10px; }
  #workspace-sheet .layer-actions { flex-wrap:wrap; }
  #workspace-sheet .layer-actions button, #workspace-sheet .layer-pagination button { min-width:44px; min-height:44px; font-size:14px; }
  #workspace-sheet .layer { min-height:60px; }
  #workspace-sheet .layer small { font-size:12px; }
  #workspace-sheet .layer-order-note { font-size:12px; }
  :is(#workspace-sheet,#account-dialog,#cart-dialog,#design-template-dialog,.photo-editor) :is(input,select,textarea) { font-size:16px!important; }
  html[data-mobile-keyboard="true"] :is(#account-dialog,#cart-dialog,#design-template-dialog,.photo-editor)[open] { top:calc(var(--mobile-visible-top,0px) + 8px); bottom:auto; margin-block:0; max-height:calc(var(--mobile-visible-height,100svh) - 16px); }
  html[data-mobile-keyboard="true"] :is(.account-shell,.design-template-shell) { max-height:calc(var(--mobile-visible-height,100svh) - 20px); }
}

/* In landscape/very short windows, scrolling is preferable to inaccessible
   controls. Keep the normal one-screen layout on portrait phones. */
@media (max-width:900px) and (max-height:520px) {
  html[data-app-mode="editor"]:not([data-mobile-keyboard="true"]), html[data-app-mode="editor"]:not([data-mobile-keyboard="true"]) body { height:auto; overflow:auto; }
  html[data-app-mode="editor"]:not([data-mobile-keyboard="true"]) main { height:auto; }
  html[data-app-mode="editor"]:not([data-mobile-keyboard="true"]) #editor-workspace { height:auto; grid-template-rows:auto 66px 48px 260px 58px auto; }
  html[data-app-mode="editor"][data-mobile-keyboard="true"]:has(.editing-text) :is(.topbar,.shop-mode-banner) { display:none; }
  html[data-app-mode="editor"][data-mobile-keyboard="true"]:has(.editing-text) #editor-workspace { height:var(--mobile-visible-height,100svh); grid-template-rows:auto 44px minmax(0,1fr); }
}

/* Mobile improvements also cover shop, authentication and upload dialogs. */
@media (max-width:640px) {
  .shop-mode-banner { min-height:36px; padding:6px 12px; gap:8px; font-size:11px; }
  .shop-mode-banner b { font-size:10px; flex:none; }
  .topbar, html[data-app-mode="editor"] .topbar { height:56px; min-height:56px; padding:6px 12px; gap:8px; }
  .top-actions, html[data-app-mode="editor"] .top-actions { gap:5px; }
  .top-actions #account-open, html[data-app-mode="editor"] .top-actions #account-open { width:auto; max-width:none; min-height:44px; padding:8px 10px; font-size:14px; }
  .account-label-full { display:none; }
  .account-label-mobile { display:inline; }
  #cart-open { min-width:58px; min-height:44px; padding:8px; gap:5px; }
  #cart-open span { display:none!important; }
  #cart-open::before { content:none; }
  #cart-open svg { width:21px; height:21px; flex:none; }
  .brand b { font-size:13px; letter-spacing:.045em; }
  .brand-mark { width:29px; height:32px; }
  .modebar { padding:3px 12px; gap:8px; }
  .modebar button { min-height:44px; }
  .shop-hero { padding:26px 20px; gap:22px; }
  .shop-hero h1 { font-size:clamp(34px,9.5vw,44px); line-height:1.06; }
  .shop-hero p, .shop-story p, .shop-process p { font-size:16px; line-height:1.6; }
  .shop-hero-actions { display:grid; grid-template-columns:1fr; gap:4px; }
  .shop-hero-actions .shop-cta { width:100%; min-height:48px; font-size:16px; }
  .shop-hero-actions .shop-link { min-height:44px; font-size:14px; }
  .shop-hero-photo figcaption { font-size:12px; line-height:1.4; }
  .shop-section, .shop-process { padding:28px 20px; }
  .shop-section-head p, .shop-product-meta { font-size:14px; line-height:1.5; }
  .shop-product-footer button { min-height:44px; font-size:14px; }
  .shop-product-badge { font-size:12px; }
  .shop-process-grid { grid-template-columns:1fr; gap:12px; }
  .shop-process-grid article { padding:18px; }
  .shop-footer { padding:24px 20px; }
  .shop-footer nav { display:flex; flex-wrap:wrap; gap:4px 16px; }
  .shop-footer a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
  #workspace-sheet :is(input,select,textarea), #account-dialog :is(input,select,textarea), #cart-dialog :is(input,select,textarea), #design-template-dialog :is(input,select,textarea), .photo-editor :is(input,select,textarea) { font-size:16px!important; }
  :is(#workspace-sheet,#account-dialog,#cart-dialog,#design-template-dialog,.photo-editor) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height:44px; }
  #account-dialog .account-auth-panel label, #account-profile-form label { font-size:14px; }
  #account-dialog .account-shell { padding:0; }
  #account-dialog .account-shell > header { padding:14px 16px; gap:8px; }
  #account-dialog .account-shell h2 { font-size:23px; line-height:1.15; margin:5px 0; }
  #account-dialog .account-shell > header p { font-size:13px; line-height:1.4; margin:6px 0 0; }
  #account-dialog .account-auth-intro { display:none; }
  #account-dialog .account-scroll { padding:0 16px 16px; }
  #account-dialog .account-auth-note { font-size:12px; }
  html[data-mobile-keyboard="true"] #account-dialog .account-shell > header :is(p,.shop-kicker) { display:none; }
  #account-dialog .account-auth-actions button { min-height:44px; }
  :is(#account-dialog,#cart-dialog,#design-template-dialog,.photo-editor) { max-height:calc(var(--mobile-visible-height,100svh) - 16px); }
  #account-dialog .account-shell, #design-template-dialog .design-template-shell { max-height:calc(var(--mobile-visible-height,100svh) - 20px); }
  .photo-editor .photo-stage { height:clamp(190px,65vw,280px); }
}
@media (max-width:470px) {
  #design-template-gallery .design-template-card { grid-template-columns:minmax(0,1fr); }
  #design-template-gallery .design-template-preview { min-height:175px; }
  #design-template-gallery .design-template-preview svg { height:165px; }
  #design-template-gallery .design-template-card-copy small { font-size:14px; }
}
.account-label-mobile { display:none; }
@media (max-width:640px) { .account-label-mobile { display:inline; } }