/* ZoraMaker app - ZoraLister's design system (zoralister.com), phone first.
   ZM-117: three themes, as ZoraLister has them - LIGHT is the site's own palette, MEDIUM the site's deep navy (easier
   at night, still blue), DARK close to black for a dim room: the same hues at different depths. theme.js sets
   data-theme on <html> before the page draws. Labels, printouts and pictures stay white - they are paper. */
:root {
  --display:"Exo 2","Arial Narrow",Arial,sans-serif; --body:"Barlow","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",Consolas,monospace;
  --gutter:16px; --tap:48px;
  /* the same in every theme: the scanner, the toast */
  --cyan:#29C5FF; --space:#050B18; --space2:#0C1F45; --space-line:#1C3666; --chrome:#E4ECF7; --steel:#93A7C4; --check:#3FE0C5;
}
:root, :root[data-theme="light"] {
  color-scheme:light;
  --ground:#F3F8FE; --surface:#FFFFFF; --band:#E6F0FB; --line:#D3E0F0; --field:#FFFFFF;
  --ink:#0B1B3B; --ink2:#4A5E80; --on-ink:#FFFFFF;
  --azure:#0A6CFF; --azure-2:#2B9BFF; --azure-deep:#0750C4; --on-azure:#FFFFFF;
  --teal:#077866; --amber:#8F5600; --red:#C8283C;   /* AA contrast as text (ZM-122): were #0A9C86 / #B86E00 */
  --glass:rgba(243,248,254,.92); --glass-strong:rgba(243,248,254,.95); --shadow-card:0 8px 24px rgba(11,27,59,.05);
}
:root[data-theme="medium"] {
  color-scheme:dark;
  --ground:#0C1F45; --surface:#12294F; --band:#17325C; --line:#24427A; --field:#0A1B3C;
  --ink:#E4ECF7; --ink2:#A9BEDD; --on-ink:#0C1F45;
  --azure:#3B8BFF; --azure-2:#6FB4FF; --azure-deep:#8CC4FF; --on-azure:#04122C;
  --teal:#3FE0C5; --amber:#FFC46B; --red:#FF8A96;
  --glass:rgba(12,31,69,.92); --glass-strong:rgba(12,31,69,.95); --shadow-card:0 8px 24px rgba(0,0,0,.28);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ground:#050B18; --surface:#0B1526; --band:#101E33; --line:#1C3666; --field:#060E1C;
  --ink:#E7EEF9; --ink2:#93A7C4; --on-ink:#050B18;
  --azure:#29C5FF; --azure-2:#7BDCFF; --azure-deep:#7BDCFF; --on-azure:#04121F;
  --teal:#3FE0C5; --amber:#FFB020; --red:#FF6B7A;
  --glass:rgba(5,11,24,.92); --glass-strong:rgba(5,11,24,.95); --shadow-card:0 8px 24px rgba(0,0,0,.45);
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.45;
  padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
a { color:var(--azure-deep) }
button, input, select { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--azure); outline-offset:2px; border-radius:6px }
[hidden] { display:none !important }

.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top)) var(--gutter) 8px;
  background:var(--glass); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.mark { display:flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--display); font-style:italic; font-weight:900;
  font-size:1.35rem; text-transform:uppercase; color:var(--ink) }
.mark img { width:34px; height:34px; border-radius:9px; box-shadow:0 4px 10px rgba(7,40,110,.25) }
.mark b { color:var(--azure) }
.pill { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber);
  border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius:999px; padding:2px 8px }
.top .link { margin-left:auto } .top .link + .link { margin-left:0 }

main { max-width:720px; margin:0 auto; padding:14px var(--gutter) 0 }
h1, h2 { font-family:var(--display); font-style:italic; font-weight:900; text-transform:uppercase; line-height:1.05; margin:6px 0 12px }
h1 { font-size:1.6rem } h2 { font-size:1.15rem; margin-top:22px }
.muted { color:var(--ink2) } .small { font-size:.88rem }
.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow-card) }
.stack { display:flex; flex-direction:column; gap:12px }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.grow { flex:1 1 auto; min-width:0 }

label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:.95rem }
label .hint { font-weight:400; color:var(--ink2); font-size:.85rem }
input, select { min-height:var(--tap); border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--field); color:var(--ink); width:100% }
/* :focus-within too - a date box's calendar button is inside it, and the box itself no longer counts as focused */
input:focus, select:focus, input:focus-within { border-color:var(--azure); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--azure) 45%, transparent) }   /* a ring you can see (ZM-122; was 15%) */
.check { flex-direction:row; align-items:center; gap:10px; font-weight:500 }
.check input { width:22px; min-height:22px }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); padding:10px 18px; border-radius:12px;
  border:1px solid var(--azure); background:linear-gradient(135deg,var(--azure),var(--azure-2)); color:var(--on-azure); font-family:var(--display); font-weight:800;
  font-style:italic; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; text-decoration:none }
/* a disabled button goes flat gray in every theme - half a bright blue still reads as one to press (ZoraLister ZL-263) */
.btn:disabled { background:var(--band); color:var(--ink2); border-color:var(--line); cursor:default }
.btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--line) }
.btn.big { min-height:64px; font-size:1.15rem; width:100% }
.btn.danger { background:var(--surface); color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, transparent) }
.link { background:none; border:0; color:var(--azure-deep); padding:6px; cursor:pointer; font-weight:600 }
.error { color:var(--red); font-weight:600 }

.chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none }
.chip { flex:none; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 14px; font-weight:600; font-size:.9rem; cursor:pointer }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--on-ink); border-color:var(--ink) }

.list { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none }
.item { display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  text-decoration:none; color:inherit; min-height:64px; cursor:pointer; text-align:left; width:100% }
.swatch { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--band) }
.swatch.none { background:repeating-linear-gradient(45deg,var(--band) 0 4px,var(--surface) 4px 8px) }
.item .name { font-weight:600 } .item .sub { color:var(--ink2); font-size:.86rem }
.qty { margin-left:auto; text-align:right; font-family:var(--mono); font-size:.9rem; white-space:nowrap }
.tag { display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:2px 8px;
  border:1px solid var(--line); color:var(--ink2) }
.tag.warn { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 45%, transparent) } .tag.bad { color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, transparent) }
.tag.ok { color:var(--teal); border-color:color-mix(in srgb, var(--teal) 40%, transparent) }

.hero-qty { font-family:var(--display); font-style:italic; font-weight:900; font-size:2.4rem; line-height:1 }
.seg { display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.seg button { min-height:var(--tap); border:1px solid var(--line); background:var(--surface); border-radius:10px; font-weight:700; cursor:pointer }
.seg button[aria-pressed="true"] { background:var(--ink); color:var(--on-ink); border-color:var(--ink) }
.seg.two { grid-template-columns:1fr 1fr }
.help { color:var(--ink2); font-size:.9rem } .help summary { cursor:pointer; font-weight:600; color:var(--azure-deep); min-height:var(--tap); display:flex; align-items:center }
.help p { margin:.4em 0 }
.stepper { display:grid; grid-template-columns:var(--tap) 1fr var(--tap); gap:6px; align-items:center }
.stepper button { min-height:var(--tap); border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:1.4rem; cursor:pointer }
.stepper input { text-align:center; font-size:1.2rem; font-weight:700 }

.dock { position:fixed; left:0; right:0; bottom:0; z-index:6; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background:var(--glass-strong); backdrop-filter:blur(10px); border-top:1px solid var(--line) }

.scanner { position:relative; background:var(--space); border-radius:16px; overflow:hidden; aspect-ratio:3/4; max-height:60vh }
.scanner video { width:100%; height:100%; object-fit:cover }
.scanner .frame { position:absolute; inset:28% 10%; border:3px solid var(--check); border-radius:14px; box-shadow:0 0 0 999px rgba(5,11,24,.35) }
.scanner .msg { position:absolute; left:0; right:0; bottom:10px; text-align:center; color:var(--chrome); font-size:.9rem }

.qr { display:block; width:220px; height:220px; margin:6px auto; image-rendering:pixelated; border-radius:8px }
.codes { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-family:var(--mono); font-size:1rem; padding:10px; background:var(--band); border-radius:10px }
.mono { font-family:var(--mono); word-break:break-all }

table.hist { width:100%; border-collapse:collapse; font-size:.86rem }
table.hist td { padding:8px 4px; border-bottom:1px solid var(--line); vertical-align:top }
table.hist td.num { text-align:right; font-family:var(--mono); white-space:nowrap }
table.hist th { padding:8px 4px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; font-weight:700 }
table.hist th.num { text-align:right; white-space:nowrap }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

#toast { position:fixed; left:var(--gutter); right:var(--gutter); bottom:calc(92px + env(safe-area-inset-bottom)); z-index:8; display:flex; gap:12px; align-items:center;
  background:var(--space2); color:var(--chrome); border-radius:12px; padding:12px 14px; box-shadow:0 10px 30px rgba(5,11,24,.35); max-width:688px; margin:0 auto }
#toast .link { color:var(--check); margin-left:auto }
/* ZM-171: a new version is out - offered at the top, never forced */
#new-version { position:fixed; top:calc(8px + env(safe-area-inset-top)); left:var(--gutter); right:var(--gutter); z-index:9; display:flex; gap:12px;
  align-items:center; flex-wrap:wrap; background:var(--space2); color:var(--chrome); border-radius:12px; padding:10px 14px;
  box-shadow:0 10px 30px rgba(5,11,24,.35); max-width:688px; margin:0 auto }
#new-version span { flex:1; min-width:12em }
#new-version .link { color:var(--check) }

.app-foot { text-align:center; font-size:.85rem; color:var(--ink2); padding:12px var(--gutter) calc(96px + env(safe-area-inset-bottom)) }
.app-foot a { color:var(--azure-deep) }
.shots { display:flex; gap:8px; flex-wrap:wrap } .shots img { max-width:140px; max-height:220px; border:1px solid var(--line); border-radius:8px; object-fit:contain; background:#fff }
/* admin */
.once { border-color:var(--amber) } .big-code { font-size:1.4rem; letter-spacing:.08em; margin:0 }
textarea { width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:10px; box-sizing:border-box; background:var(--field); color:var(--ink) }

/* designs */
a.segbtn { display:flex; align-items:center; justify-content:center; min-height:var(--tap); border:1px solid var(--line); background:var(--surface); border-radius:10px; font-weight:700; color:var(--ink); text-decoration:none }
a.segbtn[aria-current] { background:var(--ink); color:var(--on-ink); border-color:var(--ink) }
/* the Captain, 2026-10-12: bigger, to see the designs - 72px on a phone, 112px where there's room */
.thumb { width:72px; height:72px; flex:none; border-radius:10px; object-fit:cover; background:var(--band); border:1px solid var(--line) }
.thumb.empty { display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.72rem; color:var(--ink2) }
.hero-img { width:120px; height:120px; border-radius:14px; object-fit:cover; border:1px solid var(--line); flex:none }
li.small.ok { color:var(--teal) } li.small.error { color:var(--red) }
ul.plain { margin:4px 0; padding-left:18px }
.seg.four { grid-template-columns:repeat(4,1fr) }

/* labels: shown small on screen, printed at their real size */
#print-area { display:none }
.label-page { position:relative; background:#fff; overflow:hidden; box-sizing:border-box }
.label { box-sizing:border-box; padding:0.05in 0.08in; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#000; background:#fff; font-family:Arial, sans-serif }
.label-name { font-size:7.5pt; font-weight:700; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.label .barcode { width:100%; flex:1; min-height:0; margin:0.02in 0; fill:#000 }
.label-foot { display:flex; justify-content:space-between; font-size:7pt; line-height:1 }
.label.small { padding:0.02in 0.05in } .label.small .label-name { font-size:5.5pt } .label.small .label-foot { font-size:5.5pt }
.label-preview-page { margin:12px 0; border:1px solid var(--line); display:inline-block; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.08) }
.label-preview-page.sheet { width:min(100%, 6.2in); aspect-ratio: 8.5 / 11; overflow:hidden }
.label-preview-page.sheet .label-page { transform-origin:top left; transform:scale(0.72) }
.label-preview-page:not(.sheet) .label-page { outline:1px dashed var(--line) }
@media print {
  body.print-labels > *:not(#print-area) { display:none !important }
  html:has(body.print-labels), body.print-labels { background:#fff !important; margin:0 !important; padding:0 !important; height:auto !important; min-height:0 !important }
  #print-area .label-page { overflow:hidden }
  body.print-labels #print-area { display:block }
  #print-area .label-page { page-break-after:always; break-after:page }
  #print-area .label-page:last-child { page-break-after:auto; break-after:auto }
}
.drop.over{outline:2px dashed var(--accent, #29C5FF);outline-offset:4px}
.warn-text { color:var(--amber); margin:0 } p.ok { color:var(--teal); margin:0 }

/* 0033: a design's video, and picking an item's picture */
.video-box { margin-top:8px }
.design-video { width:100%; max-width:480px; max-height:420px; border-radius:10px; background:#000 }
.pick-picture { padding:0; border:2px solid transparent; border-radius:12px; background:none; cursor:pointer }
.pick-picture:hover, .pick-picture:focus-visible { border-color:var(--accent, currentColor) }

/* ZM-092 / ZM-093: decal picture tools */
.tool-preview { max-width:100%; max-height:420px; border-radius:10px; border:1px solid var(--line); background:#fff }
.tool-figure { margin:0; display:flex; flex-direction:column; gap:4px; align-items:center }
.tool-thumb { width:120px; height:120px; object-fit:contain; border-radius:8px; border:1px solid var(--line); background:#fff }
.pick-picture.picked { border-color:var(--accent, currentColor) }

/* a computer's wide window (the installed app on a desktop): more room, and the main lists in two columns.
   Phones and narrow windows are unchanged. */
@media (min-width: 1100px) {
  main { max-width:1080px }
  main > .list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start }
}

/* ZM-108: the left sidebar on a wide screen, Home's cards, and the line icons (masked, so they take the text color) */
.ico { display:inline-block; width:20px; height:20px; flex:none; background:currentColor; -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat }
.ico-home { --ico:url(/icons/home.svg) } .ico-materials { --ico:url(/icons/materials.svg) } .ico-designs { --ico:url(/icons/designs.svg) }
.ico-products { --ico:url(/icons/products.svg) } .ico-sell { --ico:url(/icons/sell.svg) } .ico-ideas { --ico:url(/icons/ideas.svg) }
.ico-scan { --ico:url(/icons/scan.svg) } .ico-reports { --ico:url(/icons/reports.svg) } .ico-marketplaces { --ico:url(/icons/marketplaces.svg) } .ico-equipment { --ico:url(/icons/equipment.svg) } .ico-supplies { --ico:url(/icons/supplies.svg) } .ico-edit { --ico:url(/icons/edit.svg) }
.side { display:none }
.home-grid { display:grid; grid-template-columns:1fr; gap:12px }
.home-card h2 { margin:0 }
.stat { display:flex; flex-direction:column; min-width:96px; padding:8px 12px; border-radius:12px; background:var(--band); color:var(--ink); text-decoration:none }
.stat b { font-family:var(--display); font-size:1.5rem; line-height:1.1 }
.stat span { font-size:.82rem; color:var(--ink2) }
.stat.warn b { color:var(--amber) } .stat.bad b { color:var(--red) } .stat.ok b { color:var(--teal) } .stat.go b { color:var(--azure-deep) }
ul.home-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
@media (min-width: 760px) {
  .thumb { width:112px; height:112px; border-radius:12px }
  .home-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .home-card.wide { grid-column:1 / -1 }
}
@media (min-width: 1100px) {
  body.with-side .side { display:flex; flex-direction:column; gap:4px; position:fixed; top:0; left:0; bottom:0; width:220px; padding:72px 10px 16px;
    border-right:1px solid var(--line); background:var(--surface); z-index:4; overflow-y:auto }
  .side-link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:600 }
  .side-link:hover { background:var(--band) }
  .side-link[aria-current] { background:var(--ink); color:var(--on-ink) }
  body.with-side main { max-width:none; margin-left:220px; padding-left:28px; padding-right:28px }
  body.with-side main > .seg { display:none }          /* the sidebar replaces the section tabs */
  body.with-side .home-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  body.with-side .app-foot { margin-left:220px }
}

/* ZM-117: choosing a theme (Sign-in & security) - each button shows its own colors */
.theme-pick button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; min-height:84px }
.theme-pick .dot { width:34px; height:34px; border-radius:50%; border:2px solid var(--line) }
.theme-pick .dot.light { background:linear-gradient(135deg,#F3F8FE 50%,#0A6CFF 50%) }
.theme-pick .dot.medium { background:linear-gradient(135deg,#0C1F45 50%,#3B8BFF 50%) }
.theme-pick .dot.dark { background:linear-gradient(135deg,#050B18 50%,#29C5FF 50%) }

/* ZM-011: what ZoraLister has, per marketplace - ZoraDev's pills: solid when live (a link), dashed on the way, red for a
   problem, faded when not there. Amazon green, Etsy orange, eBay blue, TikTok pink. */
.pills { display:inline-flex; gap:4px; flex-wrap:wrap; vertical-align:middle }
.mk { --mk:var(--ink2); display:inline-block; font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; line-height:1;
  padding:3px 6px; border-radius:999px; border:1px solid var(--mk); color:var(--mk); text-decoration:none; white-space:nowrap }
.mk.amazon { --mk:#1E9E4A } .mk.etsy { --mk:#E2702A } .mk.ebay { --mk:#3B82F6 } .mk.tiktok { --mk:#FE2C55 }
.mk.live { background:var(--mk); color:#FFFFFF }
.mk.sent, .mk.file, .mk.waiting { border-style:dashed }
.mk.problem { --mk:var(--red); background:var(--red); color:#FFFFFF }
.mk.none { opacity:.4 }
/* the status is the color (the Captain, 2026-10-10): green live, yellow on its way (pending, held, a draft, waiting),
   red blocked or a problem, faded when not there - the same on the products page and on marketplace tags; white text
   on each passes AA in both themes */
:root { --st-live:#177A3A; --st-wait:#8F5600; --st-bad:#B42335 }
.mk.live { --mk:var(--st-live); background:var(--st-live); color:#FFFFFF }
.mk.pending, .mk.held, .mk.sent, .mk.file, .mk.waiting { --mk:var(--st-wait); background:var(--st-wait); color:#FFFFFF; border-style:solid }
.mk.blocked, .mk.problem { --mk:var(--st-bad); background:var(--st-bad); color:#FFFFFF }
.tag.mkt { color:#FFFFFF; border-color:transparent; font-weight:700 }
.tag.mkt.live { background:var(--st-live) } .tag.mkt.pending, .tag.mkt.held { background:var(--st-wait) } .tag.mkt.blocked { background:var(--st-bad) }
.tag.mkt .link { color:#FFFFFF }

/* ZM-114: report tables scroll sideways on a phone rather than squeezing */
.table-wrap { overflow-x:auto }

/* ZM-116: the Google buttons' "G" (text, not Google's logo file - the CSP loads nothing from elsewhere) */
.g-mark { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#FFFFFF;
  color:#4285F4; font-family:Arial, sans-serif; font-style:normal; font-weight:700; font-size:.95rem; border:1px solid #DADCE0 }

/* the Drive question (link it, or load it in): two big choices, not a small dropdown */
fieldset.choices { border:0; margin:0; padding:0 }
fieldset.choices legend { font-weight:700; margin-bottom:6px }
label.choice { flex-direction:row; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-weight:400; cursor:pointer }
label.choice:has(input:checked) { border-color:var(--azure); box-shadow:0 0 0 2px color-mix(in srgb, var(--azure) 20%, transparent) }
label.choice input { width:20px; min-height:20px; margin-top:3px; flex:none }

/* ZM-122: "Skip to content" - out of sight until the keyboard reaches it; a heading focused by the page needs no ring */
.skip { position:absolute; left:8px; top:-60px; z-index:20; padding:10px 14px; border-radius:10px; background:var(--ink); color:var(--on-ink); font-weight:700; text-decoration:none }
.skip:focus { top:8px }
h1[tabindex="-1"]:focus { outline:none }
#app:focus { outline:none }

/* ZM-127: the file viewer - a 3D model or a picture, full screen */
.viewer{position:fixed;inset:0;z-index:60;background:var(--ground);display:flex;flex-direction:column;padding:12px 16px;gap:4px}
.viewer-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.viewer-head h2{margin:0;font-size:1.05rem;flex:1;min-width:0;overflow-wrap:anywhere}
.viewer-stage{flex:1;min-height:0;position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);touch-action:none}
.viewer-canvas{display:block;width:100%;height:100%}
.viewer-stage.flat{display:flex;align-items:center;justify-content:center;cursor:grab;
  background-color:#fff;background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%),linear-gradient(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%);
  background-size:20px 20px;background-position:0 0,10px 10px}
.viewer-img{max-width:100%;max-height:100%;transform-origin:center;user-select:none}
.viewer-canvas:focus-visible,.viewer-stage.flat:focus-visible{outline:3px solid var(--azure);outline-offset:-3px}

/* ZM-130: tags on designs */
.tags { display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:4px; vertical-align:middle }
.row.tags { margin-left:0 }

/* ZM-140: the design page Vehicle card - two columns of fields that fold to one on a phone */
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px }
.vehicle-card .row input { flex:1; min-width:0 }

/* hover a thumbnail: the whole picture, large, beside it (app.js) */
.thumb-zoom { position:fixed; z-index:60; pointer-events:none; padding:6px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.28) }
.thumb-zoom img { display:block; min-width:min(320px, 60vw); max-width:min(440px, 60vw); max-height:min(440px, 70vh); object-fit:contain; border-radius:8px;
  background:repeating-conic-gradient(#e7e9ee 0 25%, #fff 0 50%) 0 0 / 16px 16px }   /* see-through parts show as see-through */

/* the show-password eye (app.js): inside the box's right edge; Edge's own reveal button hidden, so there's one eye */
.pw-wrap { position:relative; display:block; width:100% }
.pw-wrap > input { width:100%; padding-right:44px }
.pw-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center;
  justify-content:center; padding:0; border:0; border-radius:8px; background:none; color:var(--ink2); cursor:pointer; min-height:0 }
.pw-eye:hover { color:var(--ink) }
.pw-eye:focus-visible { outline:2px solid var(--azure); outline-offset:1px }
input::-ms-reveal, input::-ms-clear { display:none }
/* a box the browser fills with a saved password keeps the theme's field colors - otherwise it's painted light and, in
   the dark theme, the light eye and text vanish on it (the ZoraLister session found it on theirs) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px var(--field) inset; -webkit-text-fill-color:var(--ink); caret-color:var(--ink) }

.sub.warn { color:var(--amber) }   /* a file for a printer the maker doesn't have (ZM-145) */