/* ==========================================================================
   opensignature.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;
}

.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); }
.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); }
.pill-btn.primary:hover { opacity: 0.85; }

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

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

.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; }
.menu-info a:hover { text-decoration: underline; }

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

/* --------------------------------------------------------------------------
   THE TOOL — fields and style on the left, the live signature on the right
   -------------------------------------------------------------------------- */

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

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

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

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

.style-card { animation-delay: 0.06s; }
.preview-card { animation-delay: 0.1s; }

/* starts at 0.01, never 0: an element at exactly 0 is never painted and
   Lighthouse charges the whole fade to LCP. Opacity only — a transform here
   would make each card a stacking context while it runs and trap the colour
   popover under the preview card. */
@keyframes rise {
  from { opacity: 0.01; }
  to { opacity: 1; }
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
}

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

.field.wide { grid-column: 1 / -1; }
.card > .field { margin-top: 18px; }

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

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

/* Data (addresses, numbers, URLs) is mono per the design system */
.text-input.mono { font-family: var(--font-mono); font-size: 13.5px; }
.text-input::placeholder { color: var(--text-3); opacity: 0.8; }
.text-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* Browser autofill paints its own yellow/blue; keep the surface ours */
.text-input:-webkit-autofill,
.text-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}

.text-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 2px var(--ring), 0 0 0 1000px var(--surface-2) inset;
}

.text-input:autofill { background: var(--surface-2); }

/* type=email/tel/url exist for autofill and keyboards, not validation:
   "lunde.io" is a fine website here. Firefox would otherwise glow red. */
.text-input:-moz-ui-invalid { box-shadow: none; }
.text-input:user-invalid { box-shadow: none; }

.link-row { display: flex; gap: 8px; position: relative; transition: transform 0.15s ease; }
.link-row .text-input { flex: 1; min-width: 0; }
.link-row.dragging { z-index: 2; transition: none; }
.link-row.dragging .text-input, .link-row.dragging .type-select { box-shadow: var(--shadow-overlay); }

/* The grip reorders links: drag, or arrow keys when focused */
.grip {
  flex: 0 0 20px;
  width: 20px;
  height: 44px;
  margin-left: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: grab;
  touch-action: none;
  border-radius: 8px;
}
.grip:hover { color: var(--text-2); }
.grip:active { cursor: grabbing; }
.grip .icon { width: 16px; height: 16px; }

/* Images: a drop zone first, the link field as the quiet alternative */
.logo-row { display: flex; flex-direction: column; gap: 8px; }

.drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

.chip-meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-chip .chip-btn { width: 36px; height: 36px; border-radius: 10px; }

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

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

.logo-thumb {
  display: block;
  max-height: 28px;
  max-width: 150px;
  object-fit: contain;
}

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

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

.icon-btn.square {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
  flex-shrink: 0;
}

.icon-btn.square:hover { background: var(--surface-3); color: var(--text); }

.style-card { display: flex; flex-direction: column; gap: 16px; }
.style-row { display: flex; flex-direction: column; gap: 8px; }

.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg .opt-btn { flex: 1 1 auto; white-space: nowrap; }

.opt-btn.font-serif { font-family: Georgia, "Times New Roman", serif; }
.opt-btn.font-mono { font-family: var(--font-mono); font-size: 12.5px; }

.opt-btn .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.opt-btn.active .dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.dot.auto { background: linear-gradient(135deg, #ffffff 50%, #171717 50%); }

/* Phone: calling code beside the national number */

.phone-row { display: flex; gap: 8px; }
.phone-row .text-input { flex: 1; min-width: 0; }

.code-select {
  flex: 0 0 auto;
  width: 204px;
  height: 44px;
  padding: 0 34px 0 12px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  background-position: right 12px center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-select:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* Link rows: platform beside the handle */
.type-select {
  flex: 0 0 auto;
  width: 128px;
  height: 44px;
  padding: 0 34px 0 14px;
  font-size: 14px;
  background-position: right 12px center;
}

.type-select:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

.photo-thumb {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.photo-thumb.square { border-radius: 4px; }

/* Address: street + line 2, then postcode / city / country */

.addr-row2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 12px;
}


.addr-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr 1fr;
  gap: 16px 12px;
}

/* «Mer»: the address block and the sign-off fold away until wanted */

.more-btn {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-2);
}

.more-btn .icon { width: 14px; height: 14px; transition: transform 0.18s ease; }
.more-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }

.more-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
}

/* Locked company template */

.lock-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}

.opt-btn:disabled, .chip:disabled, .drop-zone:disabled, .pill-btn:disabled { opacity: 0.45; pointer-events: none; }
.text-input:disabled, .menu-select:disabled { opacity: 0.5; }

/* Saved signatures in the menu */

.saved-list { display: flex; flex-direction: column; gap: 6px; }

.saved-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.saved-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.13s ease;
}

.saved-open:hover { background: var(--surface-3); }
.saved-open.current { background: var(--inverse-bg); color: var(--inverse-text); }
.saved-row .icon-btn { width: 34px; height: 34px; background: var(--surface-2); }
.saved-row .icon-btn .icon { width: 15px; height: 15px; }

/* Toast with an action */

.toast-btn {
  margin-left: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--inverse-text) 16%, transparent);
  color: inherit;
  font-weight: 600;
}

/* Mobile: one tap to the result */

/* fixed + left:50% shrinks the box to the right half; keep it one line */
.jump-btn {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  width: max-content;
  white-space: nowrap;
  box-shadow: var(--shadow-overlay);
  gap: 6px;
}

.jump-btn .icon { width: 16px; height: 16px; }

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

/* Sign-off suggestions */

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

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

/* Colour picker: a small sheet under the swatches, no native input */

.color-row-wrap { position: relative; }

/* Lives in the top layer (popover), so no stacking context — a sticky
   column, an entrance animation — can ever cover it; the script places it
   under the «Egen» swatch and follows scrolling */
.color-pop {
  position: fixed;
  inset: auto;
  left: 0;
  top: 0;
  margin: 0;
  z-index: 70;
  width: 252px;
  max-width: calc(100vw - 16px);
  padding: 14px;
  overflow: visible;
  /* an author display beats the UA's display:none for closed popovers, so
     the box must only get its display while it is actually open */
  display: none;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-overlay);
  transform-origin: top left;
}

.color-pop:popover-open { display: flex; animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1); }
.color-pop::backdrop { background: transparent; }
/* fallback for browsers without the Popover API: a plain shown/hidden box */
.color-pop.fallback.open { display: flex; }

.color-pad {
  --hue: hsl(210, 100%, 50%);
  position: relative;
  height: 150px;
  border-radius: 12px;
  background:
    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
    linear-gradient(to right, #fff, var(--hue));
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.color-hue {
  position: relative;
  height: 12px;
  margin: 4px 6px 0;
  border-radius: 999px;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  cursor: pointer;
  touch-action: none;
}

.color-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-hue .color-thumb { top: 50%; }

.color-pad:focus-visible, .color-hue:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.color-line { display: flex; align-items: center; gap: 8px; }

.color-swatch {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.color-hex {
  height: 36px;
  border-radius: 10px;
  text-transform: uppercase;
}

.color-contrast {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -2px;
}

.contrast-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.contrast-val.bad { color: var(--accent); font-weight: 600; }
.color-contrast { flex-wrap: wrap; }
.fix-chip {
  font-size: 11.5px;
  padding: 5px 12px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.preview-fix { margin: 6px 4px 0; display: block; }
.size-line { margin: 10px 4px 0; }

/* Which client the copy is shaped for; Auto = the universal output */
.client-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
}

.client-row .seg.mini { flex-wrap: wrap; }
.size-line.warn { color: var(--accent); }
.client-note { margin: 8px 4px 0; }

/* Register search: one field, results drop down under it */
.reg-wrap { position: relative; }

.reg-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-overlay);
  max-height: min(320px, 50vh);
  overflow-y: auto;
}

.reg-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.reg-item:hover, .reg-item[aria-selected="true"] { background: var(--surface-2); }
.reg-name { font-size: 14.5px; font-weight: 500; }

.reg-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.reg-note {
  padding: 12px;
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
}

.reg-hint { margin-top: 8px; }
.reg-chips { margin-top: 8px; }
.reg-chips:empty { display: none; }
.preview-note.warn { color: var(--accent); }

.color-presets {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.preset-dot {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}

.preset-dot:hover { transform: scale(1.12); }
.preset-dot.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }

/* Preview */

.preview-col {
  position: sticky;
  top: 16px;
  min-width: 0;
  z-index: 1;
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.preview-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.seg.mini .opt-btn .icon { width: 13px; height: 13px; }

/* Narrow like a phone's mail client: the signature wraps as it will there */
.paper.mobile {
  width: 340px;
  max-width: 100%;
  margin: 0; /* stays on the left edge like the desktop paper (owner call) */
  padding: 22px 20px;
  border-radius: 22px;
}

.seg.mini {
  flex-wrap: nowrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 999px;
}

.seg.mini .opt-btn {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 12.5px;
  background: transparent;
}

.seg.mini .opt-btn.active { background: var(--inverse-bg); color: var(--inverse-text); }

/* The paper is deliberately NOT themed with the page: it shows what a
   light client and a dark client render, whichever theme the page has */
.paper {
  background: #ffffff;
  color: #1d1d1f;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 28px;
  min-height: 150px;
  overflow-x: auto;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.paper.dark {
  background: #1c1c1e;
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.12);
}

/* The Outlook flavour gives links an explicit near-black (Outlook ignores
   inherit); real Outlook lightens dark text itself in dark mode, so the
   dark preview does the same instead of showing black on black */
.paper.dark a[style*="#1d1d1f"] { color: inherit !important; }

.paper.example { opacity: 0.5; }
.paper a { cursor: pointer; }
.paper img { max-width: none; }

.preview-note {
  margin: 12px 4px 0;
  min-height: 18px;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.actions .pill-btn { flex: 1; padding: 0 12px; }

.actions .pill-btn.icon-only {
  flex: 0 0 44px;
  width: 44px;
  padding: 0;
}

.preview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
}

.link-btn {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: color 0.13s ease;
}

.link-btn:hover { color: var(--text); }

.code {
  margin: 14px 0 0;
  padding: 14px;
  max-height: 260px;
  overflow: auto;
  background: var(--surface-2);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
  -webkit-user-select: text;
  user-select: text;
}

/* Install guide (sheet) */

.sheet {
  border: 0;
  border-radius: 24px;
  padding: 24px;
  width: min(500px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
}

.sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
.sheet[open] { animation: menu-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sheet-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sheet .seg + .seg { margin-top: 8px; }

.steps {
  margin: 18px 0 0;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.steps li { padding-left: 4px; }

.steps li::marker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

.sheet-actions { margin-top: 18px; display: flex; }
.sheet-actions .pill-btn { padding: 0 18px; }
.sheet-actions .icon { width: 16px; height: 16px; }
.sheet .hint { margin-top: 18px; }

/* Settings menu additions */

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.menu-actions .menu-info { margin: -2px 0 4px; }

/* Drop overlay (images → logo, saved files → the form) */

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.drop-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.drop-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
}

.drop-targets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Only the targets that make sense for what is being dragged are shown */
.drop-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 172px;
  height: 116px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 18px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}

.drop-target .icon { width: 20px; height: 20px; color: var(--text-2); }
.drop-target.over { border-style: solid; border-color: var(--text); background: var(--surface-2); transform: scale(1.03); }
.drop-overlay.images #dropFile { display: none; }
.drop-overlay.doc #dropLogo, .drop-overlay.doc #dropPhoto { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .preview-col { position: static; }
}

@media (max-width: 480px) {
  .fields { grid-template-columns: 1fr; }
  .more-fields { grid-template-columns: 1fr; }
  .addr-row { grid-template-columns: 1fr 1fr; }
  .addr-row .field:last-child { grid-column: 1 / -1; }
  .card { padding: 20px; border-radius: 20px; }
  .paper { padding: 20px; }
  .actions { flex-wrap: wrap; }
  .actions .pill-btn.primary { flex-basis: 100%; }
  /* phone rows carry a button now: the calling code takes its own line,
     the number keeps the width it needs */
  .phone-row { flex-wrap: wrap; }
  .code-select { flex: 1 1 100%; width: 100%; }
  .chip-meta .dims { display: none; }
  /* the image rows are columns now: size along the cross axis, never flex-basis */
  .logo-row .text-input { flex: 0 0 auto; width: 100%; height: 44px; }
  .link-row { flex-wrap: wrap; }
  .link-row .type-select { flex: 1 1 auto; }
  .link-row .text-input { flex-basis: 100%; order: 3; }
}

/* --------------------------------------------------------------------------
   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; }
.site-footer a:hover { text-decoration: underline; }

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

@media (max-width: 600px) {
  .menu { width: min(296px, calc(100vw - 32px)); }
}