/* ==========================================================================
   openlabels.no — design system (open-base)
   Ultra-minimal: light neutral background, white borderless surfaces, pills,
   near-monochrome. Geist for content, Geist Mono for numbers and micro labels.
   The accent color is reserved for alarm/critical states only.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-3: #e9e9e6;
  --text: #171717;
  --text-2: #666666;
  --text-3: #6f6f6f;
  --border: rgba(0, 0, 0, 0.05);
  --border-strong: rgba(0, 0, 0, 0.1);

  --accent: #d92d20;
  --accent-soft: rgba(217, 45, 32, 0.08);

  --ok: #157f3d;

  --inverse-bg: #171717;
  --inverse-text: #fafafa;

  --ring: rgba(0, 0, 0, 0.1);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.1);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --surface: #191919;
  --surface-2: #0e0e0e;
  --surface-3: #262626;
  --text: #ededed;
  --text-2: #a3a3a3;
  --text-3: #9a9a9a;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --accent: #f4645a;
  --accent-soft: rgba(244, 100, 90, 0.12);

  --ok: #6ccb8b;

  --inverse-bg: #fafafa;
  --inverse-text: #171717;

  --ring: rgba(255, 255, 255, 0.16);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* System dark mode applies unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e;
    --surface: #191919;
    --surface-2: #0e0e0e;
    --surface-3: #262626;
    --text: #ededed;
    --text-2: #a3a3a3;
    --text-3: #9a9a9a;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.14);

    --accent: #f4645a;
    --accent-soft: rgba(244, 100, 90, 0.12);

    --ok: #6ccb8b;

    --inverse-bg: #fafafa;
    --inverse-text: #171717;

    --ring: rgba(255, 255, 255, 0.16);
    --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

    --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Numbers and data: mono with tabular digits so nothing jumps */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--surface-3); }

/* UI chrome must not be text-selectable (iOS long-press etc.).
   Real content/data the user may want to copy stays selectable. */
button, .site-header, .site-footer, .menu, .toast {
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header { background: transparent; }

.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-tld { color: var(--text-3); font-weight: 500; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) { .icon-btn:hover { background: var(--surface-3); } }
.icon-btn:active { transform: scale(0.94); }

.icon-btn.open { background: var(--inverse-bg); color: var(--inverse-text); }

/* Toggle buttons (on/off states) invert when active */
.toggle-btn.on { background: var(--inverse-bg); color: var(--inverse-text); }
@media (hover: hover) { .toggle-btn.on:hover { opacity: 0.85; background: var(--inverse-bg); } }

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, opacity 0.15s ease;
}

.pill-btn:active { transform: scale(0.97); }

.pill-btn.primary { background: var(--inverse-bg); color: var(--inverse-text); }
@media (hover: hover) { .pill-btn.primary:hover { opacity: 0.85; } }

.pill-btn.ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

@media (hover: hover) { .pill-btn.ghost:hover { background: var(--surface-2); } }
.pill-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Settings menu
   -------------------------------------------------------------------------- */

.settings-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 296px;
  max-height: min(560px, calc(100dvh - 90px));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-overlay);
  padding: 20px;
  z-index: 60;
  transform-origin: top right;
  animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.menu-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Options share the row evenly when they fit; locales with long words
   («Pantalla completa», «Бегущая строка») wrap to their own row rather
   than wrapping inside the button. gap applies both ways, so the spacing
   between wrapped rows equals the spacing within a row */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu-grid .opt-btn { flex: 1 1 auto; white-space: nowrap; }

.menu-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background-color: var(--surface-2);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  border: none;
  border-radius: 12px;
  padding: 11px 44px 11px 14px;
  cursor: pointer;
}

.opt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  color: var(--text-2);
  transition: background-color 0.13s ease, color 0.13s ease, transform 0.13s ease;
}

.opt-btn .icon { width: 14px; height: 14px; }

@media (hover: hover) { .opt-btn:hover { background: var(--surface-3); color: var(--text); } }
.opt-btn:active { transform: scale(0.97); }

.opt-btn.active {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-weight: 600;
}

.opt-btn.wide { width: 100%; }
.opt-btn.copied { background: var(--ok); color: #fff; }

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 18px -20px;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  transition: background-color 0.18s ease;
  margin: 0;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}

.switch:checked { background: var(--inverse-bg); }
.switch:checked::after { transform: translateX(17px); background: var(--inverse-text); }

.menu-info {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-3);
}

.menu-info a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .menu-info a:hover { text-decoration: underline; } }

.menu-year { margin-top: 6px; }

/* --------------------------------------------------------------------------
   THE TOOL — choices and content on the left, the printed sheets on the right
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  flex: 1;
}

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 20px;
  align-items: start;
  margin: clamp(4px, 2vh, 16px) 0 24px;
}

.editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.card {
  background: var(--surface);
  border-radius: 24px;
  padding: 22px;
  transition: background-color 0.25s ease;
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.content-card { animation-delay: 0.05s; }

/* 0.01, never 0 (LCP), and opacity only — a transform would leave each card
   a stacking context */
@keyframes rise {
  from { opacity: 0.01; }
  to { opacity: 1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-3);
}

.self-start { align-self: flex-start; }

/* Segmented pills: the kind (on the page background) and the mode (inside
   the content card) */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
}

.seg .opt-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  background: transparent;
  white-space: nowrap;
}

.seg .opt-btn.active { background: var(--inverse-bg); color: var(--inverse-text); }
.seg .opt-btn .icon { width: 17px; height: 17px; }
.kind-seg .opt-btn { height: 46px; font-size: 14.5px; }
.mode-seg { background: var(--surface-2); }

@media (hover: hover) {
  .seg .opt-btn:hover { background: var(--surface-3); }
  .mode-seg .opt-btn:hover { background: var(--surface); }
  .seg .opt-btn.active:hover { background: var(--inverse-bg); }
}

/* Designs: live thumbnails of the first label, drawn by the same code as
   the PDF. The paper is always white — it previews paper, not the theme. */
.designs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 12px;
}

.design {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  text-align: left;
  border-radius: 12px;
}

.design:focus-visible { outline-offset: 4px; }

.thumb {
  display: block;
  aspect-ratio: 5 / 3;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--border-strong);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.thumb svg { display: block; width: 100%; height: 100%; }
.design[aria-checked="true"] .thumb { box-shadow: 0 0 0 2px var(--text); }
@media (hover: hover) { .design:hover .thumb { transform: translateY(-1px); } }
.design:active .thumb { transform: scale(0.98); }

.design-name {
  padding-left: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}

.design[aria-checked="true"] .design-name { color: var(--text); font-weight: 600; }

.style-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 20px;
}

.swatches {
  display: flex;
  gap: 9px;
  height: 44px;
  align-items: center;
  padding-left: 2px;
}

.swatch {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c, #161616);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 0.13s ease;
}

.swatch::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.13s ease;
}

.swatch[aria-checked="true"]::after { box-shadow: 0 0 0 2px var(--text); }

/* The black ink would vanish on the dark card without an edge */
:root[data-theme="dark"] .swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
}
.swatch:active { transform: scale(0.92); }
.swatch:focus-visible { outline-offset: 5px; border-radius: 50%; }

/* Image: a quiet button first, then a chip with the thumbnail */
.drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.drop-zone .icon { width: 18px; height: 18px; }
@media (hover: hover) { .drop-zone:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--text); } }
.drop-zone.over, .card.over .drop-zone { background: var(--surface-2); border-color: var(--text-3); border-style: solid; color: var(--text); }

.image-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 44px;
  padding: 4px 4px 4px 8px;
  border-radius: 12px;
  background: var(--surface-2);
}

.image-thumb {
  display: block;
  max-width: 120px;
  max-height: 32px;
  object-fit: contain;
  border-radius: 4px;
}

.pill-btn.small { height: 36px; padding: 0 14px; font-size: 13px; }
.pill-btn .icon { width: 16px; height: 16px; }

/* Content */
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-top: 18px;
}

.field.wide { grid-column: 1 / -1; }

.text-input {
  width: 100%;
  height: 44px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  background: var(--surface-2);
  border: none;
  border-radius: 12px;
  padding: 0 14px;
  transition: background-color 0.25s ease, box-shadow 0.13s ease;
}

.text-input::placeholder { color: var(--text-3); opacity: 0.8; }
.text-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

.textarea {
  height: auto;
  min-height: 176px;
  padding: 12px 14px;
  line-height: 1.55;
  resize: vertical;
}

#giftList { margin-top: 20px; }

.list-head {
  display: flex;
  justify-content: space-between;
  padding: 0 58px 0 2px;
}

.rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* One recipient: name, count and remove on the first line; the sender
   (inherits the Fra field above, shown as its placeholder) under it */
.grow {
  padding: 4px 4px 4px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  transition: box-shadow 0.13s ease;
  animation: row-in 0.22s ease backwards;
}

@keyframes row-in {
  from { opacity: 0.01; }
  to { opacity: 1; }
}

.grow:focus-within { box-shadow: 0 0 0 2px var(--ring); }

.grow-main { display: flex; align-items: center; gap: 6px; }

.grow input {
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  color: var(--text);
}

.grow input:focus { outline: none; }
.grow input::placeholder { color: var(--text-3); opacity: 0.8; }
.grow-to { flex: 1; height: 40px; font-size: 15px; font-weight: 500; }

.grow-from {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px;
}

.grow-from span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.grow-from input { flex: 1; height: 26px; font-size: 13.5px; color: var(--text-2); }

.stepper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 36px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface);
}

.step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: background-color 0.13s ease, color 0.13s ease;
}

.step .icon { width: 15px; height: 15px; }
@media (hover: hover) { .step:hover { background: var(--surface-3); color: var(--text); } }
.step:active { transform: scale(0.92); }
.step[disabled] { opacity: 0.35; pointer-events: none; }

.stepper .count {
  width: 30px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 14px;
  color: var(--text);
}

.stepper .count:focus { outline: none; }

.grow-del {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
  transition: background-color 0.13s ease, color 0.13s ease;
}

.grow-del .icon { width: 16px; height: 16px; }
@media (hover: hover) { .grow-del:hover { background: var(--surface-3); color: var(--text); } }

#addRow { margin-top: 4px; }

#sheetsField { margin-top: 18px; }
.sheets-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sheets-row .stepper { background: var(--surface-2); }
.sheets-row .step:hover { background: var(--surface-3); }

/* Preview: the sheets exactly as the PDF prints them */
.preview {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
}

.preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  background: var(--surface);
}

.summary {
  margin: 0;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-btn .icon { flex-shrink: 0; }
.preview-bar .pill-btn { white-space: nowrap; }
.pill-btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

.sheets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100dvh - 104px);
  overflow-y: auto;
  padding: 2px;
  border-radius: 10px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.sheet {
  flex-shrink: 0;
  aspect-ratio: 210 / 297;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
}

.sheet svg { display: block; width: 100%; height: 100%; }

/* Glyph positions come from the layout engine, one x per character, so the
   browser must keep every space */
.sheet text, .thumb text { white-space: pre; }

.more-note { text-align: center; }

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
}

.dock .pill-btn { height: 48px; padding: 0 24px; box-shadow: var(--shadow-overlay); white-space: nowrap; }

@media (min-width: 861px) {
  .dock { display: none !important; }
}

/* Greeting suggestions, in the label language */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.13s ease, color 0.13s ease, transform 0.13s ease;
}

@media (hover: hover) { .chip:hover { background: var(--surface-3); color: var(--text); } }
.chip:active { transform: scale(0.97); }
.chip.active { background: var(--inverse-bg); color: var(--inverse-text); }
@media (hover: hover) { .chip.active:hover { background: var(--inverse-bg); color: var(--inverse-text); opacity: 0.85; } }

/* «Egen farge»: a rainbow ring, the chosen colour inside it; the native
   picker sits invisibly beside it so the system dialog opens right there */
.swatches { position: relative; }

.swatch-custom {
  background: conic-gradient(from 90deg, #e5484d, #f5a524, #30a46c, #0090ff, #8e4ec6, #e5484d);
}

.swatch-custom.has-color {
  background:
    radial-gradient(circle, var(--c) 0 50%, transparent 52%),
    conic-gradient(from 90deg, #e5484d, #f5a524, #30a46c, #0090ff, #8e4ec6, #e5484d);
}

.color-input {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.img-seg { margin-top: 8px; background: var(--surface-2); }
.img-seg .opt-btn { height: 32px; font-size: 12.5px; }
@media (hover: hover) { .img-seg .opt-btn:hover { background: var(--surface); } }

/* First visit: the example list says so, with a one-tap way out */
.example-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

.link-btn {
  font-size: inherit;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Characters no font can print: they would silently vanish otherwise */
.warn {
  margin: 0;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  line-height: 1.45;
}

/* Landing pages (/pakkelapper, /navneskilt): one line of what it does */
.tool-intro {
  max-width: 640px;
  margin: 2px auto 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Settings menu additions */
.menu-note { margin-top: 10px; }
.menu-toggle-next { margin-top: 14px; }
.menu-toggle.disabled { opacity: 0.45; cursor: default; }
.menu-action { margin-top: 12px; }

.offset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.offset-row + .offset-row { margin-top: 8px; }
.menu .stepper { background: var(--surface-2); }
@media (hover: hover) { .menu .step:hover { background: var(--surface-3); } }

.offset-value {
  min-width: 70px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  inset: auto; /* resets popover UA styling (inset: 0) */
  margin: 0;
  border: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 16px);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 100;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { text-decoration: underline; } }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
  .sheets { max-height: none; overflow: visible; }
}

@media (max-width: 600px) {
  .menu { width: min(296px, calc(100vw - 32px)); }
  .card { padding: 18px; border-radius: 22px; }
  .designs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .kind-seg .opt-btn { font-size: 14px; }
  .list-head { padding-right: 56px; }
  /* Summary over a full-width button: both stay whole on a phone */
  .preview-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 12px 12px; border-radius: 22px; }
  .summary { text-align: center; white-space: normal; }
  .preview-bar .pill-btn { height: 48px; }
  /* Room under the footer for the docked download button */
  .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Long labels («Geschenkanhänger») keep one line on the smallest phones */
@media (max-width: 400px) {
  .kind-seg .opt-btn { font-size: 13.5px; gap: 6px; padding: 0 6px; }
}

.seg .opt-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }