/* =====================================================================
   Dashboard chrome. The printed page has its own stylesheet
   (print.css) and this file must never try to imitate it — the preview
   is an iframe, so there is exactly one A4 layout in the codebase.
   ===================================================================== */

/* The palette is the one sampled from the client's logo in print.css — the
   dashboard and the printed sheet are the same brand, so they share values
   rather than approximating each other.

   --gold is the logo tan. It measures 5.50:1 on the near-black bar and only
   3.09:1 on a light ground, so on paper-coloured surfaces it is allowed to
   carry rules, rails and fills but never small type: that takes --gold-ink
   (4.99:1 on white). --accent is near-black, which is why the topbar's
   primary button is gold and not accent — accent on --bar measures 1.00:1,
   i.e. invisible. */
:root {
  --accent:    #241814;
  --accent-up: #3A2A22;   /* hover, lifted off near-black */
  --gold:      #AC8C64;
  --gold-up:   #C2A279;
  --gold-ink:  #8A6A3E;
  --cream:     #FBF3E6;
  --ink:    #241F1B;
  --soft:   #5B524A;
  --muted:  #857A6E;
  --line:   #E2DAD0;
  --paper:  #FAF7F2;
  --card:   #FFFFFF;
  --bar:    #241814;
  --ok:     #2E7D5B;
  --warn:   #B57A16;
  --bad:    #C1440E;
  --serif:  "Playfair Display", Georgia, serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r:      10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.mm-boot { padding: 60px; text-align: center; color: var(--muted); }

/* ---------------------- login / plain pages ----------------------- */
body.mm-plain { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.mm-card {
  width: 100%; max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 28px 32px;
  box-shadow: 0 18px 40px -28px rgba(36,31,27,.4);
}
.mm-card h1 { margin: 4px 0 18px; font: 600 24px/1.2 var(--serif); }
.mm-eyebrow { margin: 0; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.mm-card label { display: block; margin-bottom: 14px; font-size: 12px; color: var(--soft); }
.mm-card input {
  width: 100%; margin-top: 5px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  font: 400 15px var(--sans); background: #fff; color: var(--ink);
}
.mm-card input:focus { outline: 2px solid var(--gold-ink); outline-offset: -1px; border-color: var(--gold-ink); }
.mm-card button {
  width: 100%; margin-top: 6px; padding: 12px;
  border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  font: 600 14px var(--sans); letter-spacing: .02em; cursor: pointer;
}
.mm-card button:hover { background: var(--accent-up); }
.mm-error { margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; background: #FDEDE7; color: var(--bad); font-size: 13px; }
.mm-card a { color: var(--gold-ink); }

/* ------------------------------ shell ----------------------------- */
.mm { display: flex; flex-direction: column; height: 100vh; }

.top {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: var(--bar); color: #F2EAE0;
  border-bottom: 1px solid #000;
}
.top-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* A raster of the cream knockout mark, not a glyph: the bar is near-black,
   and ◆ was a placeholder that shipped twice. */
.top-l .logo { flex: 0 0 auto; width: 26px; height: 26px; display: block; }
.top-l b { display: block; font: 600 15px/1.2 var(--serif); }
.top-l span { display: block; font-size: 11px; color: #9C9086; text-transform: capitalize; }
.top-c { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; font-size: 12px; }
.top-c .save { color: var(--gold); }
.top-c .muted { color: #8C8177; }
.top-r { display: flex; align-items: center; gap: 6px; }

.pill {
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  background: rgba(255,255,255,.08); color: #C9BFB4;
}
.pill.ok   { background: rgba(46,125,91,.22);  color: #7FD3AC; }
.pill.warn { background: rgba(181,122,22,.22); color: #E9C069; }
.pill.bad  { background: rgba(193,68,14,.24);  color: #F0A183; }

/* buttons */
.b {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
  background: rgba(255,255,255,.06); color: inherit;
  font: 500 12.5px var(--sans); text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.b:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.b:disabled { opacity: .35; cursor: default; }
/* On the bar, "primary" is the gold fill: --accent is the bar's own colour. */
.b.primary { background: var(--gold); border-color: var(--gold); color: var(--accent); font-weight: 600; }
.b.primary:hover:not(:disabled) { background: var(--gold-up); border-color: var(--gold-up); }
.b.danger:hover { background: rgba(193,68,14,.3); border-color: rgba(193,68,14,.5); }

/* the editor pane sits on paper, so its buttons need the light treatment */
.editor .b, .modal .b, .preview-bar .b {
  border-color: var(--line); background: #fff; color: var(--soft);
}
.editor .b:hover:not(:disabled), .modal .b:hover:not(:disabled) { background: #F3EEE7; }
/* On paper, accent is the darkest thing available and reads as the primary. */
.editor .b.primary, .modal .b.primary { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.editor .b.primary:hover:not(:disabled), .modal .b.primary:hover:not(:disabled) { background: var(--accent-up); border-color: var(--accent-up); }
.editor .b.add { border-style: dashed; color: var(--gold-ink); }
.editor .b:focus-visible, .modal .b:focus-visible, .preview-bar .b:focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 1px;
}
.top .b:focus-visible, .tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.editor .b.wide { width: 100%; margin: 4px 0 14px; padding: 9px; }

/* --------------------------- main layout -------------------------- */
.main { flex: 1; display: grid; grid-template-columns: minmax(380px, 46%) 1fr; min-height: 0; }
.editor { overflow-y: auto; padding: 16px 16px 60px; border-right: 1px solid var(--line); }
.previewpane { min-height: 0; background: #E8E3DB; }

.tabs { display: none; }

/* ------------------------------ cards ----------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 10px;
}
.card.sec { border-left: 3px solid var(--gold); }   /* decorative rail, 3.14:1 — never carries type */
.card.item { border-left: 3px solid var(--line); background: #FCFAF7; }
.card.item.is-off { opacity: .72; }
.card-h { display: flex; align-items: center; gap: 8px; padding: 9px 11px; }
.card-grip {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 12px; padding: 2px 4px;
}
.card-t { flex: 1; min-width: 0; cursor: pointer; }
.card-t b { display: block; font: 600 14px/1.3 var(--serif); }
.card-t span { display: block; font-size: 11.5px; color: var(--muted); }
.card-t .warn { color: var(--bad); font-style: normal; font-weight: 600; }
.card-tools { display: flex; gap: 3px; }
.card-tools .b { min-height: 26px; padding: 3px 7px; }
.card-b { padding: 4px 12px 14px; border-top: 1px solid var(--line); }

.avail {
  flex: 0 0 auto; min-width: 46px;
  border: 1px solid var(--line); border-radius: 20px;
  padding: 4px 10px; cursor: pointer;
  background: #FDEDE7; color: var(--bad);
  font: 600 11.5px var(--sans);
}
.avail.on { background: #E8F5EE; color: var(--ok); border-color: #C6E5D5; }

.card.brand { padding: 0; }
.card.brand > summary {
  padding: 11px 13px; cursor: pointer;
  font: 600 13px var(--sans); color: var(--soft);
}
.more { margin-top: 8px; }
.more > summary { cursor: pointer; font-size: 12.5px; color: var(--gold-ink); padding: 6px 0; }

.items { margin: 8px 0 4px; }
.ro { margin: 8px 0; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* ------------------------------ fields ---------------------------- */
.fx { display: block; margin: 10px 0; }
.fx-l { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.fx-h { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); font-style: normal; }
.fx input, .fx textarea, .pair input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px;
  font: 400 13.5px/1.45 var(--sans); color: var(--ink); background: #fff;
}
.fx textarea { resize: vertical; }
.fx input:focus, .fx textarea:focus, .pair input:focus {
  outline: 2px solid var(--gold-ink); outline-offset: -1px; border-color: var(--gold-ink);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.pairs { margin: 12px 0; }
.pairs-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pair { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.pair-label { flex: 1 1 auto; min-width: 0; }
.pair-amt { display: flex; align-items: center; gap: 4px; flex: 0 0 118px; }
.pair-amt span { font-size: 10.5px; color: var(--muted); }
.pair-amt input { text-align: right; font-variant-numeric: tabular-nums; }
.pair-tools { display: flex; gap: 2px; }
.pair-tools .b { min-height: 26px; padding: 3px 6px; }

.chips { margin: 12px 0; }
.chips-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  border: 1px solid var(--line); border-radius: 20px;
  padding: 4px 9px; background: #fff;
  font: 500 11.5px var(--sans); cursor: pointer; color: var(--muted);
}
.chip.on { color: #fff; }

.notice {
  margin: 12px 0; padding: 12px 14px;
  border-left: 3px solid var(--bad); border-radius: 6px;
  background: #FDEDE7;
}
.notice b { display: block; font-size: 13px; margin-bottom: 3px; }
.notice span { font-size: 12.5px; color: var(--soft); }

/* ----------------------------- preview ---------------------------- */
.preview { display: flex; flex-direction: column; height: 100%; }
.preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 12px; background: #DDD6CC; border-bottom: 1px solid #CFC6BA;
}
.preview-bar .tagline { font-size: 11.5px; color: #6B6157; }
.zoom { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #6B6157; }
.zoom .b { min-height: 24px; padding: 2px 8px; }
.preview-scroll { flex: 1; min-height: 0; overflow: hidden; }
.preview-scroll iframe { border: 0; transform-origin: top left; display: block; }

/* ------------------------------ modals ---------------------------- */
.veil {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(24,20,17,.55);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  width: 100%; max-width: 460px; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--card); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.5);
}
.modal.wide { max-width: 700px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-h h2 { margin: 0; font: 600 17px var(--serif); }
.modal-b { padding: 16px 18px; overflow-y: auto; }
.modal-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--line); background: #FBF8F4; }
.muted { color: var(--muted); font-size: 12.5px; }

.difflist { list-style: none; margin: 10px 0; padding: 0; }
.difflist li {
  display: grid; grid-template-columns: 82px 1fr auto; gap: 4px 10px;
  align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line);
}
.difflist b { font-size: 13px; }
.difflist em { grid-column: 2; font-size: 12.5px; color: var(--soft); font-style: normal; font-variant-numeric: tabular-nums; }
.difflist .muted { grid-column: 3; grid-row: 1; }
.dk {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: #EFEAE3; color: var(--soft); text-align: center;
}
.dk-price { background: #FFF3D6; color: var(--gold-ink); }
.dk-added, .dk-section-added { background: #E4F4EA; color: #256B4C; }
.dk-removed, .dk-section-removed { background: #FDEDE7; color: var(--bad); }

.revs { width: 100%; border-collapse: collapse; font-size: 13px; }
.revs td { padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.revs tr.live td { background: #FBF8F1; }
.revs .right { text-align: right; white-space: nowrap; }
.revs .right .b, .revs .right a { margin-left: 4px; }
.revs em { color: var(--muted); font-style: normal; }
.revs .pill { background: #E4F4EA; color: #256B4C; }

.qr { display: grid; place-items: center; padding: 6px 0 10px; }
.qr svg { width: 220px; height: 220px; }
.qr-url { word-break: break-all; text-align: center; }

/* ---------------------------- responsive -------------------------- */
@media (max-width: 900px) {
  .top { flex-wrap: wrap; }
  .top-c { order: 3; width: 100%; justify-content: flex-start; }
  .tabs { display: flex; background: var(--bar); padding: 0 10px 8px; gap: 6px; }
  .tabs button {
    flex: 1; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
    background: rgba(255,255,255,.06); color: #E7DED4; font: 500 13px var(--sans);
  }
  .tabs button.on { background: var(--gold); border-color: var(--gold); color: var(--accent); font-weight: 600; }
  .main { grid-template-columns: 1fr; }
  .editor, .previewpane { display: none; border-right: 0; }
  .editor.show, .previewpane.show { display: block; }
  .previewpane.show { display: flex; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =====================================================================
   The photograph block in the section editor.

   One upload has to serve two very different frames — a full-bleed band on
   A4 and a square card on a phone — so the manager is shown the whole
   photograph with both crop windows drawn on it, and then the two crops as
   they will actually appear. Guessing is the failure mode this replaces.
   ===================================================================== */
.photo { margin: 14px 0 4px; }
.photo-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* empty state */
.photo-drop {
  margin-top: 6px; padding: 16px 14px;
  border: 1px dashed var(--line); border-radius: var(--r);
  background: #FCFAF7; text-align: center;
}
.photo-drop b { display: block; font: 600 13px var(--sans); }
.photo-drop span { display: block; margin: 3px auto 10px; max-width: 34em; font-size: 12px; color: var(--muted); }
.photo-drop.over { border-color: var(--gold-ink); background: #F8F2E8; }

/* The whole photograph, with the two crop windows drawn on it.

   The frame hugs the picture rather than letterboxing it: a click has to land
   where the manager aimed, and a black margin around a portrait shot is a
   place to aim by mistake. width:auto + both maxima let the browser's own
   replaced-element sizing keep the aspect ratio exact, so the element box and
   the pixels are the same rectangle. */
.photo-focal-wrap { margin-top: 8px; text-align: center; }
.photo-focal {
  position: relative; display: inline-block; vertical-align: top;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  line-height: 0; background: #2A2320;
  cursor: crosshair; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.photo-focal img { display: block; width: auto; height: auto; max-width: 100%; max-height: 280px; }
.photo-focal:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

.focal-win {
  position: absolute; pointer-events: none;
  border: 1px dashed rgba(251,243,230,.85);
  box-shadow: 0 0 0 9999px rgba(20,14,11,.34);   /* darkens everything outside */
}
.focal-win.square { border-style: solid; border-color: var(--gold); box-shadow: none; }
.focal-win b {
  position: absolute; top: 2px; left: 3px;
  font: 600 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.focal-win.square b { color: var(--gold); top: auto; bottom: 2px; }   /* opposite corner to the band's, so the two labels never collide */

.focal-dot {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 2px solid #fff;
  background: rgba(172,140,100,.75);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.4);
  pointer-events: none;
}
.focal-dot::after {
  content: ''; position: absolute; inset: 7px;
  border-radius: 50%; background: #fff;
}

/* the two crops, as they will land */
.photo-crops { display: grid; grid-template-columns: 1fr 128px; gap: 10px; margin-top: 10px; align-items: start; }
.photo-crops figure { margin: 0; }
.photo-crops .frame {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #F3EEE7;
}
.photo-crops .band  .frame { aspect-ratio: 5 / 3; }
.photo-crops .card  .frame { aspect-ratio: 1 / 1; }
.photo-crops img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-crops figcaption { margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.photo-crops figcaption b { display: block; color: var(--soft); font-weight: 600; }
@supports not (aspect-ratio: 1) {
  .photo-crops .band .frame { height: 108px; }
  .photo-crops .card .frame { height: 126px; }
}

.photo-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.photo-tools .spacer { flex: 1 1 auto; }
.photo-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* progress */
.photo-bar { margin-top: 10px; }
.photo-bar .track { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.photo-bar .fill  { height: 100%; background: var(--gold-ink); transition: width .15s linear; }
.photo-bar span   { display: block; margin-top: 4px; font-size: 11.5px; color: var(--soft); }

/* The server's own sentence, verbatim. A pipeline that tells a manager
   "this photo is 900px wide, printing needs at least 1500" has done the
   hard part; paraphrasing it as "Upload failed" throws that away. */
.photo-err {
  margin-top: 10px; padding: 10px 12px;
  border-left: 3px solid var(--bad); border-radius: 6px;
  background: #FDEDE7; color: #7C2A0A;
  font-size: 12.5px; line-height: 1.45; white-space: pre-wrap;
}
.photo-err b { display: block; margin-bottom: 2px; font-size: 12px; }
.photo-err .b { margin-top: 8px; }

.photo-note { margin: 8px 0 0; }

/* Removal asks in the page rather than in a browser dialog: it has to offer
   the file-deletion choice, and window.confirm cannot hold a checkbox — nor
   is a native dialog pleasant on the phone this gets used on. */
.photo-ask {
  margin-top: 10px; padding: 11px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--bad);
  border-radius: 6px; background: #FFFBF8;
}
.photo-ask > b { display: block; font-size: 13px; }
.photo-ask > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--soft); }
.photo-check { display: flex; gap: 7px; margin-top: 9px; align-items: flex-start; font-size: 12.5px; }
.photo-check input { margin: 2px 0 0; }
.photo-check em { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); font-style: normal; }
.photo-ask .photo-tools { justify-content: flex-end; }

.photo-adv { margin-top: 10px; }
.photo-adv > summary { cursor: pointer; font-size: 11.5px; color: var(--muted); }
.photo-paths { list-style: none; margin: 6px 0 0; padding: 0; }
.photo-paths li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 3px 0; align-items: baseline; }
.photo-paths span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.photo-paths code {
  font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--soft); word-break: break-all;
}

/* ------------------------- logo picker ---------------------------- */
.logos { margin: 12px 0 4px; }
.logo-row {
  display: grid; grid-template-columns: 46px 1fr; gap: 10px;
  align-items: center; padding: 7px 0; border-top: 1px solid var(--line);
}
.logo-chip {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 7px; background: #FCFAF7;
  overflow: hidden;
}
.logo-chip.dark { background: var(--accent); border-color: var(--accent); }
.logo-chip img { max-width: 38px; max-height: 38px; display: block; }
.logo-chip em { font-size: 9.5px; color: var(--muted); font-style: normal; }
.logo-row select {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px;
  font: 400 12.5px var(--sans); color: var(--ink); background: #fff;
}
.logo-row select:focus { outline: 2px solid var(--gold-ink); outline-offset: -1px; }
.logo-row .fx-l { margin-bottom: 3px; }
.logo-row .fx-h { margin-top: 3px; }

@media (max-width: 560px) {
  .photo-crops { grid-template-columns: 1fr; }
  .photo-crops .card .frame { max-width: 168px; }
  .photo-focal img { max-height: 240px; }
}