/* ==========================================================================
   Vendula & Marek — vlastní vzhled pro Git Hitched
   Načítá se až PO wedding.css (viz layouts/application.html.erb), takže
   přebíjí původní téma. Nic z toho nevyžaduje rebuild image.
   ========================================================================== */

/* ---------- Písma (self-hosted, bez Google Fonts) ---------- */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/custom/fonts/cormorant-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/custom/fonts/cormorant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/custom/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/custom/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/custom/fonts/pinyon-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/custom/fonts/pinyon-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Paleta z návrhu ---------- */
:root {
  --vm-bg:        #F7F1E8;
  --vm-card:      #FFFDF9;
  --vm-warm:      #EFE4D6;
  --vm-ink:       #3B2A22;
  --vm-ink-soft:  #6E5440;
  --vm-accent:    #A6502F;
  --vm-accent-d:  #7A3622;
  --vm-link:      #9E4A30;
  --vm-olive:     #6B6B45;
  --vm-terracotta:#B5573A;
  --vm-powder:    #C98B7E;
  --vm-blush:     #E3B9AA;
  --vm-sand:      #DCC3A5;
  --vm-sage:      #CDBF9E;
  --vm-line:      #E6D9C6;
  --vm-field:     #D6C6B0;
  --vm-dark-line: #5A4639;
  --vm-dark-text: #D9CBB8;

  --vm-sans:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vm-serif:   "Cormorant Garamond", Georgia, serif;
  --vm-script:  "Pinyon Script", cursive;

  /* přemapování proměnných původního tématu (Git Hitched) na naši paletu */
  --color-bg-primary:       var(--vm-bg);
  --color-bg-secondary:     var(--vm-card);
  --color-bg-tertiary:      var(--vm-warm);
  --color-bg-input:         #FFFFFF;
  --color-text-primary:     var(--vm-ink);
  --color-text-secondary:   var(--vm-ink-soft);
  --color-text-accent:      var(--vm-accent);
  --color-text-muted:       #8A7565;
  --color-text-highlight:   var(--vm-ink);
  --color-border:           var(--vm-field);
  --color-border-focus:     var(--vm-accent);
  --color-border-light:     var(--vm-line);
  --color-accent:           var(--vm-accent);
  --color-accent-hover:     var(--vm-accent-d);
  --color-accent-pressed:   #8E4426;
  --color-highlight:        var(--vm-accent);
  --color-highlight-hover:  var(--vm-accent-d);
  --color-highlight-pressed:#8E4426;
  --color-success:          var(--vm-olive);
  --color-error:            #A04040;
  --font-script:            var(--vm-script);
  --font-serif:             var(--vm-sans);
  --radius-sm:              10px;
  --radius-md:              16px;
}

/* ---------- Základ ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--vm-bg);
  color: var(--vm-ink);
  font-family: var(--vm-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
}
h1, h2, h3, .type-serif-heading { font-family: var(--vm-serif); font-weight: 500; color: var(--vm-ink); letter-spacing: 0; }
p { margin: 0 0 1em; }

a { color: var(--vm-link); text-decoration: underline; text-underline-offset: 3px; border-bottom: 0; }
a:hover { color: var(--vm-accent-d); border-bottom: 0; }

.btn, .vm-btn, .vm-nav a, .vm-nav button, .vm-card-link { text-decoration: none; }

/* ---------- Tlačítka (pilulky jako v návrhu) ---------- */
.btn {
  font-family: var(--vm-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  border-radius: 999px;
  padding: 15px 28px;
  line-height: 1.2;
  min-height: 48px;
}
.btn-lg { padding: 16px 34px; font-size: 14px; min-height: 54px; }
.btn-sm { padding: 10px 18px; font-size: 12px; min-height: 40px; }
.btn-highlight, .btn-primary { background: var(--vm-accent); color: #fff; }
.btn-highlight:hover, .btn-primary:hover { background: var(--vm-accent-d); color: #fff; box-shadow: none; }
.btn-outline { background: transparent; color: var(--vm-ink); border: 1px solid var(--vm-ink); }
.btn-outline:hover { background: var(--vm-ink); color: var(--vm-bg); border-color: var(--vm-ink); }
.btn:focus-visible, .vm-btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 3px; }

/* ---------- Formuláře ---------- */
.form-label, .vm-label {
  display: block;
  font-family: var(--vm-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vm-ink);
  margin-bottom: 8px;
}
.form-input, .form-select, .form-textarea, .vm-input {
  min-height: 48px;
  border: 1px solid var(--vm-field);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--vm-sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--vm-ink);
  background-color: #fff;
}
.form-input::placeholder, .form-textarea::placeholder { font-style: normal; color: #9A8574; }
.form-input:focus, .form-select:focus, .form-textarea:focus, .vm-input:focus {
  border-color: var(--vm-accent);
  box-shadow: 0 0 0 3px rgba(166, 80, 47, 0.18);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233B2A22' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}
.form-check-label { font-weight: 300; }
.form-check input[type="radio"]:checked, .form-check input[type="checkbox"]:checked { background-color: var(--vm-accent); border-color: var(--vm-accent); }

/* ---------- Karty, přepínač, hlášky ---------- */
.card {
  background: var(--vm-card);
  border: 1px solid var(--vm-line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: none;
}
.card:hover { box-shadow: none; transform: none; }
.toggle-switch { background: var(--vm-card); border: 1px solid var(--vm-line); border-radius: 16px; }
.toggle-label { font-family: var(--vm-serif); font-size: 24px; font-weight: 600; color: #9A8574; }
.toggle-label-active { color: var(--vm-ink); font-weight: 600; }
.notice { border-left-color: var(--vm-accent); background: rgba(166, 80, 47, 0.07); font-style: normal; color: var(--vm-ink); border-radius: 0 10px 10px 0; }
.notice-error { background: rgba(160, 64, 64, 0.08); font-style: normal; border-radius: 0 10px 10px 0; }

/* ==========================================================================
   Navigace
   ========================================================================== */
.vm-nav { position: sticky; top: 0; z-index: 30; background: rgba(247, 241, 232, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--vm-line); }
.vm-nav__in { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.vm-nav__brand { font-family: var(--vm-script); font-size: 30px; line-height: 1.3; color: var(--vm-ink); }
.vm-nav__brand:hover { color: var(--vm-ink); }
.vm-nav__links { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.vm-nav__links a { color: var(--vm-link); padding: 10px 0; }
.vm-nav__links a:hover { color: var(--vm-accent-d); }
.vm-nav__cta { background: var(--vm-accent); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.vm-nav__cta:hover { background: var(--vm-accent-d); color: #fff; }
.vm-burger { display: none; width: 48px; height: 48px; border: 1px solid var(--vm-field); border-radius: 999px; background: transparent; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.vm-burger .i-close { display: none; }
.vm-nav.is-open .vm-burger .i-close { display: block; }
.vm-nav.is-open .vm-burger .i-open { display: none; }
.vm-mobile { display: none; flex-direction: column; padding: 8px 24px 28px; gap: 4px; border-top: 1px solid var(--vm-line); font-family: var(--vm-serif); font-size: 26px; }
.vm-mobile a { color: var(--vm-ink); padding: 10px 0; border-bottom: 1px solid var(--vm-line); }
.vm-mobile a.vm-mobile__cta { margin-top: 16px; background: var(--vm-accent); color: #fff; padding: 15px 22px; border-radius: 999px; border: 0; font-family: var(--vm-sans); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; text-align: center; }
@media (max-width: 860px) {
  .vm-nav__links, .vm-nav__cta { display: none; }
  .vm-burger { display: flex; }
  .vm-nav.is-open .vm-mobile { display: flex; }
}

/* ==========================================================================
   Společné prvky sekcí
   ========================================================================== */
.vm-sec { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.vm-sec--narrow { max-width: 760px; }
.vm-sec--mid { max-width: 860px; }
.vm-sec--col { display: flex; flex-direction: column; gap: 40px; }
.vm-sec--row { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.vm-head { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.vm-head p { margin: 0; }
.vm-script { font-family: var(--vm-script); font-size: 40px; line-height: 1; color: var(--vm-accent); }
.vm-h2 { margin: 0; font-family: var(--vm-serif); font-weight: 500; font-size: 48px; line-height: 1.1; }
.vm-head .vm-h2 { line-height: inherit; } /* jako v návrhu: nadpisy sekcí s hlavičkou mají řádkování 1.65 */
.vm-eyebrow { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vm-olive); font-weight: 400; }
.vm-dark { background: var(--vm-ink); color: var(--vm-bg); }
.vm-dark .vm-script { color: var(--vm-blush); }
.vm-dark .vm-h2 { color: var(--vm-bg); }
.vm-dark .vm-muted { color: var(--vm-dark-text); }
.vm-pill { display: inline-block; border-radius: 999px; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }

/* ---------- Hero ---------- */
.vm-hero { max-width: 1200px; margin: 0 auto; padding: 72px 24px 40px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.vm-hero__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.vm-hero__names { margin: 0; font-family: var(--vm-serif); font-weight: 500; font-size: 96px; line-height: 0.95; color: var(--vm-ink); }
.vm-hero__names .amp { font-family: var(--vm-script); font-weight: 400; font-size: 0.7em; color: var(--vm-accent); }
.vm-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: var(--vm-serif); font-size: 28px; }
.vm-hero__meta a { color: var(--vm-ink); text-decoration-color: var(--vm-powder); text-underline-offset: 6px; }
.vm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vm-powder); display: inline-block; }
.vm-hero__lead { margin: 0; max-width: 480px; font-size: 18px; }
.vm-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.vm-btn { display: inline-block; padding: 15px 28px; border-radius: 999px; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; line-height: 1.4; }
.vm-btn--solid { background: var(--vm-ink); color: var(--vm-bg); }
.vm-btn--solid:hover { background: #2a1d17; color: var(--vm-bg); }
.vm-btn--ghost { border: 1px solid var(--vm-ink); color: var(--vm-ink); padding: 14px 28px; }
.vm-btn--ghost:hover { background: var(--vm-ink); color: var(--vm-bg); }
.vm-hero__photos { flex: 1 1 420px; min-width: 0; display: flex; gap: 16px; align-items: flex-end; }
.vm-arch-a { flex: 3; min-width: 0; height: 560px; border-radius: 280px 280px 12px 12px; background: var(--vm-sand); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.vm-arch-a img { display: block; width: 100%; height: calc(100% - 40px); object-fit: cover; object-position: 50% 0%; }
.vm-arch-b { flex: 2; min-width: 0; height: 360px; border-radius: 12px 12px 180px 180px; background: var(--vm-blush); overflow: hidden; }
.vm-arch-b img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- Odpočet ---------- */
.vm-count { max-width: 1200px; margin: 0 auto; padding: 24px 24px 40px; }
.vm-count__in { border-top: 1px solid var(--vm-line); border-bottom: 1px solid var(--vm-line); padding: 28px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 12px 40px; text-align: center; }
.vm-count__label { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--vm-olive); font-weight: 400; }
.vm-count__num { font-family: var(--vm-serif); font-size: 64px; line-height: 1; color: var(--vm-accent); }
.vm-count__unit { font-family: var(--vm-serif); font-size: 28px; }

/* ---------- Příběh ---------- */
.vm-story__photo { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.vm-story__frame { position: relative; width: 100%; max-width: 380px; padding: 0 28px 28px 0; }
.vm-story__frame::before { content: ""; position: absolute; top: 28px; left: 28px; right: 0; bottom: 0; border-radius: 12px; background: var(--vm-sage); }
.vm-story__frame img { position: relative; display: block; width: 100%; height: 440px; border-radius: 12px; object-fit: cover; object-position: 50% 60%; }
.vm-story__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vm-story__text p { margin: 0; }

/* ---------- Program ---------- */
.vm-program { max-width: 1000px; }
.vm-note { border: 1px solid var(--vm-dark-line); border-radius: 16px; padding: 28px; text-align: center; color: var(--vm-dark-text); }
.vm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vm-timeline li { display: flex; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--vm-dark-line); }
.vm-timeline li:last-child { border-bottom: 0; }
.vm-timeline time { flex: 0 0 90px; font-family: var(--vm-serif); font-size: 28px; color: var(--vm-blush); }
.vm-timeline strong { font-weight: 500; font-size: 19px; }

/* ---------- Místo ---------- */
.vm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.vm-place { background: var(--vm-card); border: 1px solid var(--vm-line); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.vm-place svg { stroke: var(--vm-link); }
.vm-place h3 { margin: 0; font-family: var(--vm-serif); font-weight: 600; font-size: 28px; }
.vm-place p { margin: 0; }
.vm-place a.more { margin-top: auto; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 0; }

/* ---------- Dress code ---------- */
.vm-warm { background: var(--vm-warm); }
.vm-dress__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vm-dress__text p { margin: 0; }
.vm-swatches { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.vm-swatch { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vm-swatch i { width: 100%; aspect-ratio: 1; border-radius: 50%; display: block; }
.vm-swatch span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }

/* ---------- RSVP na úvodní stránce ---------- */
.vm-rsvp-card { background: var(--vm-card); border: 1px solid var(--vm-line); border-radius: 20px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.vm-field { display: flex; flex-direction: column; gap: 8px; }
.vm-submit { height: 54px; border: 0; border-radius: 999px; background: var(--vm-accent); color: #fff; font-family: var(--vm-sans); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.vm-submit:hover { background: var(--vm-accent-d); }
.vm-hint { font-size: 15px; color: var(--vm-ink-soft); margin: 0; text-align: center; }

/* ---------- Dary ---------- */
.vm-gifts { max-width: 760px; margin: 0 auto; padding: 96px 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.vm-gifts h2 { margin: 0; font-family: var(--vm-serif); font-weight: 500; font-size: 44px; line-height: 1.15; color: var(--vm-bg); }
.vm-gifts p { margin: 0; max-width: 560px; }

/* ---------- FAQ ---------- */
.vm-faq { display: flex; flex-direction: column; }
.vm-faq details { border-bottom: 1px solid var(--vm-line); padding: 18px 0; }
.vm-faq summary { cursor: pointer; font-family: var(--vm-serif); font-size: 24px; font-weight: 600; min-height: 32px; }
.vm-faq details p { margin: 10px 0 0; }

/* ---------- Patička ---------- */
.vm-foot { border-top: 1px solid var(--vm-line); padding: 56px 24px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.vm-foot__name { font-family: var(--vm-script); font-size: 48px; line-height: 1; color: var(--vm-ink); }
.vm-foot__meta { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--vm-olive); font-weight: 400; }
.vm-foot a { font-size: 14px; padding: 10px; }

/* ==========================================================================
   Ostatní stránky (brána, RSVP kroky)
   ========================================================================== */
.vm-wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
.vm-wrap > h1, .vm-wrap h1.vm-title { font-family: var(--vm-serif); font-weight: 500; font-size: 48px; line-height: 1.1; margin: 0 0 8px; }
.vm-wrap .lead { color: var(--vm-ink-soft); }
.vm-wrap .type-serif-heading { font-size: 44px !important; line-height: 1.1; }

/* Popisek odesílacího tlačítka se mění podle přepínače (CSS místo JS) */
.rsvp-form .when-decline { display: none; }
.rsvp-form:has(.toggle-input:not(:checked)) .when-accept { display: none; }
.rsvp-form:has(.toggle-input:not(:checked)) .when-decline { display: inline; }

/* tabulka odpovědí podle akcí */
.vm-rsvp-table { display: grid; grid-template-columns: minmax(110px, 1.3fr) 1fr 1fr; align-items: center; gap: 0; }
.vm-rsvp-table .h { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A7565; text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--vm-line); }
.vm-rsvp-table .n { padding: 12px 4px; font-weight: 400; }
.vm-rsvp-table .c { display: flex; justify-content: center; padding: 12px 4px; }
.vm-rsvp-table input[type="radio"] { width: 22px; height: 22px; accent-color: var(--vm-accent); }

/* ==========================================================================
   Mobil
   ========================================================================== */
@media (max-width: 720px) {
  .vm-hero__names { font-size: 56px; }
  .vm-sec, .vm-gifts { padding: 72px 20px; }
  .vm-hero { padding-top: 40px; }
  .vm-hero__meta { font-size: 24px; }
  .vm-arch-a { height: 440px; border-radius: 200px 200px 12px 12px; }
  .vm-arch-b { height: 280px; border-radius: 12px 12px 120px 120px; }
  .vm-h2 { font-size: 38px; }
  .vm-gifts h2 { font-size: 36px; }
  .vm-rsvp-card { padding: 24px; }
  .vm-timeline li { gap: 16px; }
  .vm-timeline time { flex-basis: 72px; font-size: 24px; }
  .vm-count__num { font-size: 52px; }
  .vm-wrap { padding: 36px 20px 72px; }
  .vm-wrap .type-serif-heading { font-size: 34px !important; }
  .toggle-label { font-size: 20px; }
}

/* drobné opravy */
.form-check input[type="checkbox"] { border-radius: 6px; }
.card .btn-sm:not(.btn-outline):not(.btn-highlight) { background: transparent; border: 1px solid var(--vm-line); color: var(--vm-ink-soft); }