/* Labels view (label maker) and DYMO LabelWriter 450 Turbo label printing.
   Every selector is scoped under .label-maker, .label-frame, .wine-label,
   #labelPrintRoot or html/body.printing-label, so nothing here touches other
   views or their normal printing. The @page size for labels is injected by
   views/labels.js only while a label prints (a global @page rule here would
   change every printed page). */

/* ---------- editor ---------- */
.label-maker .label-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start;
}
.label-maker .label-editor > h3,
.label-maker .label-preview-head h3 { margin: 0 0 12px; }
.label-maker .label-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.label-maker .label-pick-select { flex: 1 1 220px; min-width: 0; }
.label-maker .label-pick .btn { flex: 0 0 auto; }
.label-maker .label-status {
  display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 14px;
  font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--muted);
}
.label-maker .label-status::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: .3em; border-radius: 50%; background: currentColor;
}
.label-maker .label-status.is-dirty { color: var(--gold); }
.label-maker .label-status.is-saved { color: var(--green); }
.label-maker .label-group-title { margin: 0 0 5px; font-size: 12px; font-weight: 800; color: var(--muted); }
.label-maker .label-template-buttons {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px;
}
.label-maker .label-template {
  min-height: 42px; padding: 9px 6px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 13px; line-height: 1.2;
}
.label-maker .label-template:hover { border-color: #9c978c; }
.label-maker .label-template[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.label-maker .label-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.label-maker .label-dymo { margin: 14px 0 0; }
.label-maker .label-dymo p { margin: 0; }
.label-maker .label-dymo ul { margin: 6px 0 8px; padding-left: 20px; }
.label-maker .label-dymo li { margin: 3px 0; }

/* ---------- preview: a neutral stage and shell around the label ---------- */
.label-maker .label-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.label-maker .label-preview-head h3 { margin: 0; }
.label-maker .label-stage {
  display: flex; justify-content: center; padding: 22px 12px; border-radius: 14px;
  background: radial-gradient(circle at 50% 45%, #fff 0, #f4f1eb 42%, #e7e2d9 100%);
}
.label-maker .label-shell {
  width: min(100%, 424px); padding: 12px; border-radius: 14px;
  background: #d7d2c8; box-shadow: 0 20px 55px rgba(24, 26, 25, .13);
}
.label-maker .label-screen-note { margin: 10px 0 0; text-align: center; }

@media (max-width: 760px) {
  .label-maker .label-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 430px) {
  .label-maker .label-template-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .label-maker .label-actions { grid-template-columns: minmax(0, 1fr); }
  .label-maker .label-stage { padding: 14px 6px; }
  .label-maker .label-shell { padding: 8px; }
}

/* ---------- label artwork (shared by the preview and the print clone) ----------
   .label-frame is the size container and every length inside .wine-label is in
   cqw of it, so the on-screen preview and the 2 in print have identical
   proportions. Values are the standalone maker's, converted from its 440 px
   preview: px → px ÷ 4.4 cqw (hairlines keep ≥ 1px). Its child sizes were cqw
   of the label's content box, so they are multiplied by --k = content width ÷
   label width (heritage 384/440, modern 1, bookplate 405.6/440, simple 0.84).
   --fit (set by views/labels.js, default 1) shrinks only the wording and its
   spacing when the standalone sizes would overflow the label. */
.label-frame {
  container-type: inline-size;
  display: block; position: relative; width: 100%; max-width: 100%;
  margin: 0; padding: 0; border: 0; background: #fff;
}
.wine-label {
  --k: .872727;
  --fit: 1;
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; aspect-ratio: 2 / 2.34;
  margin: 0; padding: 6.3636cqw;
  overflow: hidden;
  background: #fff; color: #0b0b0b;
  border: 0; border-radius: 0; box-shadow: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400; font-style: normal; line-height: normal; letter-spacing: normal; word-spacing: normal;
  text-align: center; text-transform: none; text-decoration: none; text-shadow: none;
  overflow-wrap: break-word;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.wine-label *, .wine-label::before, .wine-label::after { box-sizing: border-box; }
.wine-label .label-content > * { flex-shrink: 0; }
.wine-label .label-brand { width: 100%; }
.wine-label .brand-main {
  font-family: Georgia, "Times New Roman", serif; font-size: calc(13cqw * var(--k));
  font-weight: 700; line-height: .92; letter-spacing: .09em;
}
.wine-label .brand-sub { font-size: calc(5.6cqw * var(--k)); font-weight: 800; letter-spacing: .22em; margin-top: calc(2.6cqw * var(--k)); }
.wine-label .rule { height: max(1px, .4545cqw); width: 78%; margin: calc(7cqw * var(--k) * var(--fit)) auto; background: #111; }
.wine-label .mead-name {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1.02;
  font-size: calc(11.5cqw * var(--k) * var(--fit));
}
.wine-label .mead-name.long { font-size: calc(9.2cqw * var(--k) * var(--fit)); }
.wine-label .mead-name.xlong { font-size: calc(7.8cqw * var(--k) * var(--fit)); }
.wine-label .mead-subtitle {
  font-family: Georgia, "Times New Roman", serif; letter-spacing: .12em; text-transform: uppercase;
  font-size: calc(6.2cqw * var(--k) * var(--fit)); margin-top: calc(4cqw * var(--k) * var(--fit));
}
.wine-label .mead-type {
  font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  font-size: calc(4.5cqw * var(--k) * var(--fit)); margin-top: calc(4cqw * var(--k) * var(--fit));
}
.wine-label .details-block { margin-top: auto; width: 100%; }
.wine-label .detail-primary { font-family: Georgia, "Times New Roman", serif; font-size: calc(4.5cqw * var(--k) * var(--fit)); }
.wine-label .detail-secondary {
  font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  font-size: calc(3.5cqw * var(--k) * var(--fit)); margin-top: calc(4cqw * var(--k) * var(--fit));
}
.wine-label .location {
  letter-spacing: .22em; text-transform: uppercase;
  font-size: calc(2.9cqw * var(--k) * var(--fit)); margin-top: calc(5cqw * var(--k) * var(--fit));
}

/* Modern: black brand band, sans headings. The rule under the band is not drawn —
   the standalone squeezed it to nothing (its content overflowed) and its SVG has none. */
.wine-label.modern { --k: 1; padding: 0; }
.wine-label.modern .label-brand {
  display: flex; flex-direction: column; justify-content: center;
  flex: 0 0 30%; width: 100%; height: 30%; background: #111; color: #fff;
}
.wine-label.modern .brand-main { font-family: Arial, sans-serif; font-size: calc(10cqw * var(--k)); }
.wine-label.modern .brand-sub { font-size: calc(4.8cqw * var(--k)); }
.wine-label.modern .label-content {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%; padding: 0 calc(7cqw * var(--k)) calc(7cqw * var(--k));
}
.wine-label.modern .label-content > .rule { display: none; }
.wine-label.modern .mead-name { font-size: calc(12cqw * var(--k) * var(--fit)); margin-top: calc(8cqw * var(--k) * var(--fit)); }
.wine-label.modern .mead-name.long { font-size: calc(9.4cqw * var(--k) * var(--fit)); }
.wine-label.modern .mead-name.xlong { font-size: calc(8cqw * var(--k) * var(--fit)); }
.wine-label.modern .mead-subtitle { font-family: Arial, sans-serif; font-weight: 800; font-size: calc(5.4cqw * var(--k) * var(--fit)); }
.wine-label.modern .mead-type { font-size: calc(5cqw * var(--k) * var(--fit)); }
.wine-label.modern .rule { height: max(1px, .6818cqw); margin: calc(6cqw * var(--k) * var(--fit)) auto; }
.wine-label.modern .details-block { padding: 0 calc(2cqw * var(--k)); }

/* Bookplate: heavy outer border with a fine inner frame. */
.wine-label.bookplate { --k: .921818; border: max(1px, .9091cqw) solid #111; padding: 3cqw; }
.wine-label.bookplate::before {
  content: ""; position: absolute; inset: calc(2.5cqw * var(--k));
  border: max(1px, .4545cqw) solid #111; pointer-events: none;
}
.wine-label.bookplate .label-content {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%; padding: calc(6cqw * var(--k)) calc(5cqw * var(--k)) calc(4cqw * var(--k));
}
.wine-label.bookplate .brand-main { font-size: calc(11cqw * var(--k)); }
.wine-label.bookplate .mead-name { font-size: calc(11cqw * var(--k) * var(--fit)); }
.wine-label.bookplate .mead-name.long { font-size: calc(8.8cqw * var(--k) * var(--fit)); }
.wine-label.bookplate .mead-name.xlong { font-size: calc(7.4cqw * var(--k) * var(--fit)); }
.wine-label.bookplate .rule { width: 72%; margin: calc(5.5cqw * var(--k) * var(--fit)) auto; }
.wine-label.bookplate .mead-type { font-size: calc(4cqw * var(--k) * var(--fit)); }

/* Simple: generous margins, sans brand, heavier rules. */
.wine-label.simple { --k: .84; padding: 10cqw 8cqw; }
.wine-label.simple .brand-main { font-family: Arial, sans-serif; font-size: calc(10cqw * var(--k)); }
.wine-label.simple .brand-sub { font-size: calc(5cqw * var(--k)); }
.wine-label.simple .rule { height: max(1px, .6818cqw); width: 86%; margin: calc(8cqw * var(--k) * var(--fit)) auto; }
.wine-label.simple .mead-name { font-size: calc(12cqw * var(--k) * var(--fit)); }
.wine-label.simple .mead-name.long { font-size: calc(9.3cqw * var(--k) * var(--fit)); }
.wine-label.simple .mead-name.xlong { font-size: calc(7.8cqw * var(--k) * var(--fit)); }
.wine-label.simple .mead-subtitle { font-family: Arial, sans-serif; font-weight: 800; font-size: calc(5.2cqw * var(--k) * var(--fit)); }

/* Off-screen probe used to compute --fit at the printed size (2 in wide) with a
   0.04 in safety margin at the bottom. */
.label-maker .label-fit-host {
  position: absolute; left: -10000px; top: 0; width: 2in; visibility: hidden; pointer-events: none;
}
.label-frame.label-fit-probe { width: 2in; max-width: none; }
.label-frame.label-fit-probe .wine-label { aspect-ratio: 2 / 2.3; }

/* ---------- label print mode ---------- */
/* The clone that gets printed is never visible on screen or in normal printing. */
#labelPrintRoot { display: none; }

@media print {
  html:not(.printing-label) #labelPrintRoot { display: none !important; }

  html.printing-label,
  body.printing-label {
    width: 2in !important; height: 2.34in !important;
    min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: #fff !important; overflow: hidden !important;
  }
  body.printing-label { display: block !important; position: static !important; transform: none !important; }
  body.printing-label > *:not(#labelPrintRoot) { display: none !important; }

  html.printing-label #labelPrintRoot {
    display: block !important; position: absolute !important; top: 0 !important; left: 0 !important;
    right: auto !important; bottom: auto !important; z-index: auto !important;
    width: 2in !important; height: 2.34in !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: #fff !important; overflow: hidden !important; transform: none !important;
  }
  #labelPrintRoot .label-frame {
    width: 2in !important; height: 2.34in !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: #fff !important;
  }
  #labelPrintRoot .wine-label {
    width: 2in !important; height: 2.34in !important; aspect-ratio: auto !important;
    margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  #labelPrintRoot, #labelPrintRoot *, #labelPrintRoot *::before, #labelPrintRoot *::after {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
}