/* ==========================================================================
   opencards.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 — the editor on the left, the sheets on the right
   -------------------------------------------------------------------------- */

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

.app {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 18px;
  align-items: start;
  padding-top: 6px;
}

.editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes rise {
  from { opacity: 0.01; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  background: var(--surface);
  border-radius: 24px;
  padding: 22px;
}

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

.field-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);
}

.hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* Segmented pills: the kind (on the page background) and the place-card
   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: 16px; height: 16px; }
/* Four kinds with long names («Gratulasjonskort»): a 2 × 2 quad, always */
.kind-seg { flex-wrap: wrap; border-radius: 24px; }
.kind-seg .opt-btn { height: 44px; font-size: 13.5px; flex: 1 1 calc(50% - 4px); }
.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); }
}

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

/* Templates: live thumbnails 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(4, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 12px;
}

.designs.tall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.designs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }

.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;
  background: #fff;
  border-radius: 8px;
  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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.color-field { margin-top: 18px; }

.swatches {
  position: relative;
  display: flex;
  gap: 9px;
  height: 36px;
  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%; }

/* «Egen farge»: a rainbow ring, the chosen colour inside it; the native
   picker sits invisibly beside it so the system dialog opens right there */
.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;
}

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

.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); }

/* Autofill must not glow yellow/red in a card-styled form */
.text-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset;
  -webkit-text-fill-color: var(--text);
}

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

.textarea-mid { min-height: 128px; }
.textarea-tall { min-height: 264px; }

.sheets-field { margin-top: 4px; }
.sheets-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

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

.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; }

/* Cover sections inside the content card */
.cover-sep {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cover-sep .menu-toggle { font-weight: 500; }

.fields-sub {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
}

@media (max-width: 600px) {
  .fields-sub { grid-template-columns: minmax(0, 1fr); }
}

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

.img-seg { background: var(--surface-2); align-self: start; }
.img-seg .opt-btn { flex: 0 0 auto; height: 32px; font-size: 12.5px; padding: 0 16px; }
@media (hover: hover) { .img-seg .opt-btn:hover { background: var(--surface); } }

/* Motif choices, and the one-tap way to an own graphic */
.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; } }

/* 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); } }

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

.image-thumb {
  display: block;
  max-width: 140px;
  max-height: 34px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}

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

/* First visit: the example says so, with a one-tap way out */
.example-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 14px;
  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;
}

/* 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);
}

.preview-actions { display: flex; gap: 8px; }

.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 { width: 16px; height: 16px; 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, .view-page text, .view-face text { white-space: pre; }

.fold-note, .more-note { text-align: center; margin: 0; }

.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; }
}

/* Landing pages (/visittkort, /julekort, …): 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; }

/* --------------------------------------------------------------------------
   The digital card: the front full size, a tap opens it like paper
   -------------------------------------------------------------------------- */

.view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 26px 0 40px;
}

.view-stage {
  display: flex;
  justify-content: center;
  width: 100%;
  perspective: 1700px;
}

/* The closed card's footprint. Opening swings the cover to the left, so
   the wrap slides half a card right to keep the spread centred. */
.view-wrap {
  position: relative;
  width: min(44vw, calc(min(62vh, 540px) * 0.70707), 384px);
  aspect-ratio: 105 / 148.5;
  border-radius: 0;
  transform: translateX(0);
  transition: transform 1.7s cubic-bezier(0.34, 0.65, 0.12, 1);
  transform-style: preserve-3d;
  cursor: pointer;
  animation: view-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes view-in {
  from { opacity: 0.01; transform: translateY(14px); }
  to { opacity: 1; }
}

.view.open .view-wrap { transform: translateX(50%); }

.view-page, .view-face {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.view-page svg, .view-face svg { display: block; width: 100%; height: 100%; }

.view-right { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 50px rgba(0, 0, 0, 0.18); }

.view-flipper {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 1.7s cubic-bezier(0.34, 0.65, 0.12, 1);
  transform-style: preserve-3d;
}

.view.open .view-flipper { transform: rotateY(-180deg); }

.view-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.view-front { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 50px rgba(0, 0, 0, 0.18); }

.view-back {
  transform: rotateY(180deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 50px rgba(0, 0, 0, 0.18);
}

/* A soft centre crease on the opened spread */
.view-back::after, .view-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  pointer-events: none;
}

.view-back::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.07), transparent); }
.view-right::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent); }

.view-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.view-actions .pill-btn { text-decoration: none; }
.view.open #viewOpenBtn { display: none; }

@media (max-width: 600px) {
  .view-wrap { width: min(46vw, calc(min(58vh, 460px) * 0.70707)); }
}

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

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

@media (max-width: 600px) {
  .card { padding: 18px; border-radius: 22px; }
  .designs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .designs.tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .kind-seg .opt-btn { flex: 1 1 calc(50% - 4px); font-size: 13.5px; }
  /* Summary over full-width buttons: 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-actions { flex-direction: column; }
  .preview-actions .pill-btn { height: 48px; }
  /* Room under the footer for the docked download button */
  .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   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: 600px) {
  .menu { width: min(296px, calc(100vw - 32px)); }
}