/* A board in the Your Voices Matter look (YVM-49): the brand bible's tokens only. action, action-hover, brand and
   band are the owner's, set after this file by /<slug>/colours.css (checked by the admin); everything else is
   fixed. No font or image from anywhere else: the bible's families, falling back to the system's. */
/* YVM-79: board templates. This :root is the default template's (Classic) tokens, as config/templates.php lists them;
   another template's tokens come in its board's /<slug>/colours.css after this file. Every colour and type choice
   below reads a token, so a template is only its tokens. */
/* The bible's fonts, served from /fonts (as on the homepage, YVM-61), and the templates' (all SIL OFL, licences beside them). */
@font-face{font-family:"Bitter";font-weight:100 900;font-display:swap;src:url("/fonts/bitter.woff2?v=61f3f067de") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans.woff2?v=561da85450") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:100 900;font-display:swap;src:url("/fonts/public-sans.woff2?v=fd76a14fbb") format("woff2")}
@font-face{font-family:"Unbounded";font-weight:200 900;font-display:swap;src:url("/fonts/unbounded.woff2?v=7df26fbde4") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-600-latin.woff2?v=11682a0554") 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:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-600-latin-ext.woff2?v=99bdac7ad0") 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/atkinson-hyperlegible-400-latin.woff2?v=3201099022") 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:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/atkinson-hyperlegible-400-latin-ext.woff2?v=3a54aad037") 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/atkinson-hyperlegible-700-latin.woff2?v=05dadf003f") 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:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/atkinson-hyperlegible-700-latin-ext.woff2?v=97dbf56ced") 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/caveat-500-latin.woff2?v=6ea773f758") 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:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/caveat-500-latin-ext.woff2?v=61cf14c4b0") 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* YVM-210: the role fonts' library (config/look.php), Latin subsets from google/fonts, licences beside them. */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/dm-serif-display-400-latin.woff2?v=2bbcc48b75") 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:"Pacifico";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/pacifico-400-latin.woff2?v=1fde2706f0") 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:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/poppins-800-latin.woff2?v=bed22115ac") 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:"Patrick Hand";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/patrick-hand-400-latin.woff2?v=7731e02b3e") 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}
:root{
  --ink:#1C2733;--text:#2B3642;--muted:#56626F;--canvas:#F7F6F2;--paper:#FFFFFF;--line:#D5DCE1;--control:#7A8591;
  --focus:#1A4FC4;--exit:#B42318;--exit-hover:#8F1C13;--danger:#A3201A;--danger-bg:#FDEDEC;--note-ink:#1C2733;
  --action:#1D5C6E;--action-hover:#154655;--brand:#1D5C6E;--band:#E8EEF0;
  --note-fold:color-mix(in srgb,#F6E27A 75%,#1C2733);--note-yellow:#F6E27A;--note-blue:#CFE4F0;--note-coral:#F2AE96;--note-green:#A6E2C8;--note-lilac:#CBB6E6;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --space-step-1:.25rem;--space-step-2:.5rem;--space-step-3:.75rem;--space-step-4:1rem;--space-step-5:1.5rem;
  --space-step-6:2rem;--space-step-7:2.5rem;--space-step-8:3.5rem;--gutter:1rem;--content:72rem;--measure:40rem;
  --radius-note:2px;--radius-control:12px;--radius-card:16px;--radius-pill:999px;--target:3rem;
  --on-exit:#FFFFFF;--on-action:#FFFFFF;--top-bg:#FFFFFF;--top-ink:#1C2733;--top-link:#1D5C6E;--top-muted:#56626F;
  --safebar-bg:#1C2733;--safebar-ink:#FFFFFF;--hero-bg:#F7F6F2;--note-ground:#FFFFFF;
  --display:"Fraunces",Georgia,"Times New Roman",serif;--display-weight:600;--display-tracking:0;--note-weight:500;--note-size:1.625rem;
  --tilt:1;--note-fill:100%;--note-edge:0px;--top-rule:4px;--note-shadow:0 18px 22px -14px rgba(28,39,51,.40),0 3px 6px rgba(28,39,51,.10);
  --note-glow:0 0 0 0;--card-shadow:none;--btn-shadow:none;--texture:none;--texture-size:auto;
}
*,*::before,*::after{box-sizing:border-box}
body.vm{margin:0;background-color:var(--canvas);background-image:var(--texture);background-size:var(--texture-size);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word}
.vm a{color:var(--action);text-decoration:underline}
.vm a:hover{color:var(--action-hover)}
.vm a:focus-visible,.vm button:focus-visible,.vm input:focus-visible,.vm textarea:focus-visible,.vm [tabindex="-1"]:focus{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}
.vm-wrap{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
.vm-sec{padding:var(--space-step-7) 0}
.vm-skip{position:absolute;left:-10000px;top:0;background:var(--paper);padding:var(--space-step-2) var(--space-step-3);z-index:40}
.vm-skip:focus{left:var(--space-step-2);top:var(--space-step-2)}
.vm .vm-exit{position:fixed;right:12px;bottom:12px;z-index:30;min-height:var(--target);display:inline-flex;align-items:center;gap:var(--space-step-2);box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 35%,transparent);background:var(--exit);color:var(--on-exit);font-weight:700;text-decoration:none;padding:var(--space-step-3) var(--space-step-5);border-radius:var(--radius-pill)}
.vm .vm-exit:hover{background:var(--exit-hover);color:var(--on-exit)}
.vm-safebar b{white-space:nowrap}
.vm-safebar{margin:0;background:var(--safebar-bg);color:var(--safebar-ink);font-size:.9375rem;line-height:1.5;text-align:center;padding:var(--space-step-2) var(--gutter)}
.vm .vm-safebar a{color:var(--safebar-ink)}
.vm-top{background:var(--top-bg);border-top:var(--top-rule) solid var(--brand);border-bottom:1px solid color-mix(in srgb,var(--top-ink) 8%,transparent)}
.vm .vm-nav a:not(.vm-btn){color:var(--top-link)}
.vm-top-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-step-4);padding-top:var(--space-step-4);padding-bottom:var(--space-step-4)}
.vm .vm-brand{color:var(--top-ink);text-decoration:none;font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:1.25rem;line-height:1.2}
.vm-nav{display:flex;flex-wrap:wrap;gap:var(--space-step-4);align-items:center}
.vm-btn,.vm a.vm-btn{display:inline-flex;align-items:center;min-height:var(--target);padding:var(--space-step-3) var(--space-step-5);border:0;border-radius:var(--radius-pill);background:var(--action);color:var(--on-action);box-shadow:var(--btn-shadow);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.vm-btn:hover,.vm a.vm-btn:hover{background:var(--action-hover);color:var(--on-action)}
.vm-btn[disabled]{opacity:.6;cursor:not-allowed}
.vm a.vm-btn-quiet,.vm a.vm-btn-teal,.vm a.vm-btn-pink{background:var(--paper);color:var(--action);box-shadow:inset 0 0 0 2px var(--action)}
.vm-btn-wide{width:100%;justify-content:center}
.vm-hero{padding:var(--space-step-7) 0 var(--space-step-6);overflow:hidden;background:var(--hero-bg)}
.vm-hero-grid{display:grid;gap:var(--space-step-6);align-items:center}
.vm-eyebrow{margin:0 0 var(--space-step-2);color:var(--brand);font-weight:700;font-size:.9375rem;line-height:1.4;letter-spacing:.04em;text-transform:uppercase}
.vm-hero .vm-lede{font-size:1.1875rem;margin:0 0 var(--space-step-5)}
/* YVM-79: the hero's notes flow in a grid and grow with their words: never cut short, never on top of each other. */
.vm-hero-notes{position:relative;max-width:30rem;width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-step-5) var(--space-step-4);align-items:start;padding:var(--space-step-2)}
.vm-hero-note{position:relative;width:auto;margin:0;padding:var(--space-step-4) var(--space-step-4) var(--space-step-5);border-radius:var(--radius-note);color:var(--note-ink);font-family:var(--hand);font-weight:var(--note-weight);font-size:calc(var(--note-size) * .85);line-height:1.15;overflow-wrap:anywhere}
.vm-hero-note-text{display:block}
.vm-hero-note-1{transform:rotate(calc(-3deg * var(--tilt)))}
.vm-hero-note-2{margin-top:var(--space-step-5);transform:rotate(calc(2.5deg * var(--tilt)))}
.vm-hero-note-3{grid-column:1 / -1;justify-self:center;width:min(100%,15rem);transform:rotate(calc(-1.5deg * var(--tilt)))}
.vm-hero-tag{grid-column:1 / -1;margin:0;text-align:right;color:var(--muted);font-size:.8125rem}
/* YVM-208: the owner's hero image right of the hero; the why-points then a compact strip under it. */
.vm-hero-figure{margin:0 auto;max-width:min(100%,900px);width:100%}
.vm-hero-img{display:block;width:100%;height:auto;max-height:36rem;object-fit:contain;border-radius:var(--radius-card)}
.vm-band-strip{padding:var(--space-step-4) 0}
.vm-band-strip .vm-points{font-size:.9375rem}
.vm-title{margin:0 0 var(--space-step-4);overflow-wrap:break-word;font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:clamp(2.25rem,7vw,3.5rem);line-height:1.05;color:var(--ink)}
.vm-lede{max-width:var(--measure)}
.vm-ctas{display:flex;flex-wrap:wrap;gap:var(--space-step-3)}
.vm-h2{margin:0 0 var(--space-step-4);font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:1.625rem;line-height:1.2;color:var(--ink)}
.vm-h1-small{margin:0 0 var(--space-step-4);font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:clamp(1.75rem,4.5vw,2.25rem);line-height:1.15;color:var(--ink)}
.vm h3{font-size:1.1875rem;line-height:1.3;font-weight:700;color:var(--ink)}
.vm-band,.vm-how{background:var(--band);color:var(--ink);padding:var(--space-step-6) 0}
.vm-points,.vm-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-step-4)}
.vm-points b,.vm-steps b{display:block;color:var(--ink)}
.vm-wrap.vm-points{margin:0 auto;padding:0 var(--gutter)}
.vm-points li{padding-bottom:var(--space-step-3);border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.vm-points li:last-child{border-bottom:0;padding-bottom:0}
.vm-step-n{display:inline-flex;justify-content:center;align-items:center;width:var(--target);height:var(--target);margin-right:var(--space-step-3);border-radius:var(--radius-note);color:var(--note-ink);font-weight:700}
.vm-share{padding:var(--space-step-7) 0}
.vm-share-grid{display:grid;gap:var(--space-step-6)}
.vm-card,.vm-safety{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-step-5);box-shadow:var(--card-shadow)}
.vm-form-card{border-top:4px solid var(--brand)}
.vm-not-watched{background:var(--band);color:var(--ink);border-radius:var(--radius-control);padding:var(--space-step-3)}
.vm-label{display:block;font-weight:700;line-height:1.4;color:var(--ink)}
.vm-hint,.vm-count,.vm-small,.vm-board-count{color:var(--muted);font-size:.9375rem;line-height:1.5}
.vm-field{margin:0 0 var(--space-step-5);border:0;padding:0}
.vm-preview-fields{border:0;margin:0;padding:0;min-width:0}
.vm textarea{width:100%;font:inherit;color:var(--text);background:var(--paper);border:2px solid var(--control);border-radius:var(--radius-control);padding:var(--space-step-3)}
.vm-swatches{display:flex;flex-wrap:wrap;gap:var(--space-step-2)}
.vm-swatch{display:inline-flex;align-items:center;gap:var(--space-step-2);min-height:var(--target);padding:0 var(--space-step-3);border-radius:var(--radius-control);color:var(--note-ink)}
.vm-swatch input{accent-color:var(--ink)}
.vm-errors{background:var(--danger-bg);border:2px solid var(--danger);border-radius:var(--radius-control);padding:var(--space-step-4);margin:0 0 var(--space-step-5)}
.vm-paused{background:var(--band,#f4f4f4);border:2px solid var(--muted);border-radius:var(--radius-control);padding:var(--space-step-4);margin:0 0 var(--space-step-5)}
.vm-field-error{color:var(--danger);font-weight:700}
.vm-field-bad textarea{border-color:var(--danger)}
.vm-guard{display:none}
.vm-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vm-board{padding:var(--space-step-7) 0}
.vm-board-head .vm-h2{display:inline-block;border-bottom:4px solid var(--brand)}
.vm-notes{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-step-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}
.vm-postit{border-radius:var(--radius-note);padding:var(--space-step-4);color:var(--note-ink)}
.vm-note-text{margin:0;font-family:var(--hand);font-weight:var(--note-weight);font-size:var(--note-size);line-height:1.2;white-space:pre-line}
.vm-note-date{margin:var(--space-step-2) 0 0;font-size:.9375rem;color:var(--note-ink)}
.vm-note-similar{margin:var(--space-step-2) 0 0;font-size:.9375rem;font-style:italic;color:var(--note-ink)}
.vm-note-yellow{--note-c:var(--note-yellow)}.vm-note-blue{--note-c:var(--note-blue)}.vm-note-pink{--note-c:var(--note-coral)}
.vm-note-green{--note-c:var(--note-green)}.vm-note-purple{--note-c:var(--note-lilac)}
/* YVM-79: a note is its colour mixed note-fill into note-ground (all of it, by default), edged and shadowed as the template says. */
.vm-note-yellow,.vm-note-blue,.vm-note-pink,.vm-note-green,.vm-note-purple{background:var(--note-c);background:color-mix(in srgb,var(--note-c) var(--note-fill),var(--note-ground));border:var(--note-edge) solid var(--note-edge-colour,var(--note-c))}
.vm-postit,.vm-hero-note{box-shadow:var(--note-shadow),var(--note-glow) var(--note-c,transparent)}
/* The banner slot (YVM-83) under the header: a quiet band in every template; the banner itself is YVM-81's. */
.vm-banner-slot{background:var(--band);border-bottom:1px solid var(--line)}
.vm-paging{display:flex;flex-wrap:wrap;gap:var(--space-step-4);align-items:center;margin-top:var(--space-step-6)}
.vm-foot{padding:var(--space-step-6) 0 var(--space-step-8);color:var(--muted);font-size:.9375rem}
@media (min-width:640px){.vm-points,.vm-steps{grid-template-columns:repeat(2,1fr)}.vm-points li,.vm-points li:last-child{border-bottom:0;padding-bottom:0}.vm-hero-note{font-size:1.5rem}}
@media (min-width:960px){.vm-share-grid{grid-template-columns:3fr 2fr}.vm-points,.vm-steps{grid-template-columns:repeat(4,1fr)}
  .vm-hero{padding:var(--space-step-8) 0}.vm-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .vm-points{gap:0}.vm-points li{padding:0 var(--space-step-5);border-left:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}.vm-points li:first-child{padding-left:0;border-left:0}}
/* YVM-68: a board's own header logo, in place of its name: the bar's height, never wider than the screen, never stretched. */
.vm .vm-brand .vm-logo{display:block;height:2.75rem;width:auto;max-width:min(100%,20rem);object-fit:contain;object-position:left center}
/* ==== YVM-206 header strip (boards/yvm-logo.blade.php, App\Support\YvmLogo): start ====
   The board's logo, a thin divider, the Your Voices Matter logo (mark and wordmark, level with theirs), always on one
   line; the header line on the right, below the logos on phones. The wordmark's colour is its variant's (YvmLogo::VARIANTS). */
.vm-strip{margin:0;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-step-3);min-width:0;max-width:100%}
.vm-strip .vm-brand{flex:0 1 auto;min-width:0}
.vm-strip-rule{flex:none;align-self:stretch;width:1px;min-height:2.25rem;background:color-mix(in srgb,var(--top-ink) 28%,transparent)}
.vm .vm-yvm{flex:none;display:inline-flex;align-items:center;gap:var(--space-step-2);text-decoration:none;font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;font-size:1.0625rem;line-height:1.1;letter-spacing:-.01em}
.vm-yvm-mark{flex:none;display:block;width:2.5rem;height:2.5rem}
.vm .vm-yvm-dark{color:#0D0B26}
.vm .vm-yvm-light{color:#FFFFFF}
.vm .vm-yvm:hover .vm-yvm-word{text-decoration:underline}
.vm-tagline{margin:0 0 0 auto;max-width:24rem;color:var(--top-muted);font-size:.9375rem;line-height:1.35;text-align:right}
.vm-h-compact .vm-yvm-mark{width:2rem;height:2rem}
.vm-h-centred .vm-strip{justify-content:center}
.vm-h-centred .vm-tagline{margin:0;text-align:center}
@media (max-width:639px){
  .vm-strip{gap:var(--space-step-2)}
  .vm .vm-brand .vm-logo{height:2.25rem;max-width:100%}
  .vm .vm-yvm{font-size:.875rem}
  .vm-yvm-mark{width:2rem;height:2rem}
  .vm-yvm-word{max-width:6.5em}
  .vm-tagline{flex-basis:100%;margin:0;text-align:left;max-width:none}
}
/* ==== YVM-206 header strip: end ==== */
/* ==== YVM-81 banner ads (boards/banner.blade.php): start. Only banner rules here; other slots keep their own sections. ==== */
.vm-banner{padding:var(--space-step-3) 0;text-align:center}
.vm-banner-label{margin:0 0 var(--space-step-1);color:var(--muted);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.vm-banner-link{display:inline-block;max-width:100%;line-height:0}
.vm-banner-img{display:block;max-width:100%;height:auto}
/* ==== YVM-81 banner ads: end ==== */
/* YVM-80: the board's header style (App\Support\BoardLook, config/look.php), a body class. vm-h-template is the template's own. */
.vm-h-centred .vm-top-in{flex-direction:column;justify-content:center;text-align:center;gap:var(--space-step-3)}
.vm-h-centred .vm-nav{justify-content:center}
.vm-h-band{--top-bg:var(--band);--top-ink:var(--ink);--top-link:var(--action);--top-muted:var(--muted)}
.vm-h-compact .vm-top-in{padding-top:var(--space-step-2);padding-bottom:var(--space-step-2)}
.vm-h-compact .vm-nav a:not(.vm-btn){display:none}
.vm-h-compact .vm-brand .vm-logo{height:2rem}
/* YVM-95: the board's own questions on the note form, and the answers an owner shows on a note */
.vm-choices{display:flex;flex-direction:column;gap:var(--space-step-2)}
.vm-choices-row{flex-direction:row;flex-wrap:wrap}
.vm-choice{display:inline-flex;align-items:center;gap:var(--space-step-2);min-height:var(--target)}
.vm-choice input{width:1.25rem;height:1.25rem;accent-color:var(--ink)}
.vm .vm-input{width:100%;font:inherit;color:var(--text);background:var(--paper);border:2px solid var(--control);border-radius:var(--radius-control);padding:var(--space-step-3)}
.vm-field-bad .vm-input{border-color:var(--danger)}
.vm-note-answers{margin:var(--space-step-2) 0 0;padding:0;list-style:none;font-size:.9375rem;color:var(--note-ink)}
/* ==== YVM-211 note styles (App\Support\NoteStyles, config/look.php note_styles): start. Each style's tokens match the config. ==== */
.vm-ns-neon-frame{--ns-card:#0E1320;--ns-ink:#F4F7FC;--ns-muted:#B9C3D6;--ns-tint:10%;--ns-edge:70%}
.vm-ns-taped-card{--ns-card:#FFFCF4;--ns-ink:#1F2633;--ns-muted:#3A4354;--ns-tint:30%}
.vm .vm-notes.vm-ns-neon-frame,.vm .vm-notes.vm-ns-taped-card{gap:var(--space-step-6) var(--space-step-5);padding-top:var(--space-step-3)}
.vm .vm-notes.vm-ns-neon-frame .vm-board-note,.vm .vm-notes.vm-ns-taped-card .vm-board-note{position:relative;--note-ink:var(--ns-ink);color:var(--ns-ink);background:var(--ns-card);background:color-mix(in srgb,var(--note-c) var(--ns-tint),var(--ns-card))}
.vm .vm-notes.vm-ns-neon-frame .vm-board-note::before,.vm .vm-notes.vm-ns-neon-frame .vm-board-note::after,.vm .vm-notes.vm-ns-taped-card .vm-board-note::before,.vm .vm-notes.vm-ns-taped-card .vm-board-note::after{all:unset;content:"";position:absolute;pointer-events:none}
/* Neon frame: dark glass, a border glowing in the note's own colour, brackets on two corners, upright. */
.vm .vm-notes.vm-ns-neon-frame .vm-board-note.vm-postit{--a:0deg;transform:none;border:1.5px solid color-mix(in srgb,var(--note-c) var(--ns-edge),#FFFFFF);border-radius:8px;padding:var(--space-step-5) var(--space-step-5) var(--space-step-4);background-image:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 50%);box-shadow:0 0 18px -3px var(--note-c),inset 0 0 24px -12px var(--note-c),0 14px 26px -16px rgba(0,0,0,.6)}
.vm .vm-notes.vm-ns-neon-frame .vm-board-note::before,.vm .vm-notes.vm-ns-neon-frame .vm-board-note::after{width:14px;height:14px;border:3px solid color-mix(in srgb,var(--note-c) var(--ns-edge),#FFFFFF);filter:drop-shadow(0 0 4px var(--note-c))}
.vm .vm-notes.vm-ns-neon-frame .vm-board-note::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.vm .vm-notes.vm-ns-neon-frame .vm-board-note::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.vm .vm-notes.vm-ns-neon-frame .vm-note-text{font-family:var(--sans);font-weight:600;font-size:1.1875rem;line-height:1.35}
/* Taped card: a card in a pale wash of the note's colour, edged a shade darker, a strip of tape on top; vm-curl lifts a corner. */
.vm .vm-notes.vm-ns-taped-card .vm-board-note{border:2px solid color-mix(in srgb,var(--note-c) 45%,var(--ns-ink));border-radius:6px;padding:calc(var(--space-step-4) + .5rem) var(--space-step-4) var(--space-step-4);box-shadow:2px 3px 0 color-mix(in srgb,var(--note-c) 45%,var(--ns-ink)),0 12px 18px -14px rgba(0,0,0,.45)}
.vm .vm-notes.vm-ns-taped-card .vm-board-note::before{top:-.85rem;left:calc(50% - 2.75rem);width:5.5rem;height:1.45rem;background:rgba(232,220,190,.9);box-shadow:0 1px 2px rgba(0,0,0,.15);transform:rotate(-2deg)}
.vm .vm-notes.vm-ns-taped-card .vm-board-note:nth-child(2n)::before{transform:rotate(2.5deg);left:calc(50% - 2.25rem)}
.vm .vm-notes.vm-ns-taped-card .vm-board-note.vm-curl::after{right:-2px;bottom:-2px;width:2.4rem;height:2.4rem;border-radius:0 0 6px 0;background:linear-gradient(315deg,var(--canvas) 0 47%,color-mix(in srgb,var(--note-c) 30%,#FFFFFF) 50%,color-mix(in srgb,var(--note-c) 55%,#B9B2A3) 100%);box-shadow:-2px -2px 4px -1px rgba(0,0,0,.22)}
/* The board-wide note label with the date, in small capitals; a note's doodle in its corner, in the note's colour. */
.vm .vm-note-meta{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.vm .vm-notes.vm-ns-neon-frame .vm-note-date,.vm .vm-notes.vm-ns-taped-card .vm-note-date{color:var(--ns-muted)}
.vm .vm-board-note:has(.vm-doodle){position:relative;padding-right:calc(var(--space-step-4) + 2rem)}
.vm .vm-doodle{position:absolute;right:.6rem;bottom:.6rem;width:1.875rem;height:1.875rem;color:color-mix(in srgb,var(--note-c) 40%,var(--note-ink))}
.vm .vm-notes.vm-ns-neon-frame .vm-doodle{color:var(--note-c);filter:drop-shadow(0 0 3px var(--note-c))}
.vm .vm-notes.vm-ns-taped-card .vm-doodle{color:color-mix(in srgb,var(--note-c) 30%,#B3261E)}
.vm .vm-notes .vm-note-meta::before{content:none}
/* ==== YVM-211 note styles: end ==== */
/* YVM-210: a font per role (App\Support\BoardLook, config/look.php): labels are the section headings, in the headline's
   face unless chosen. The subhead under the headline: plain text in its colour, or a pill or ribbon filled with it,
   --subhead-ink picked to read on --subhead-bg (both set in /<slug>/colours.css). */
.vm .vm-h2,.vm .vm-h1-small{font-family:var(--label-font,var(--display));font-weight:var(--label-weight,var(--display-weight))}
.vm-subhead{margin:0 0 var(--space-step-5);color:var(--subhead-ink,var(--brand));font-family:var(--subhead-font,var(--sans));font-weight:var(--subhead-weight,700);font-size:clamp(1.125rem,3.4vw,1.5rem);line-height:1.3}
.vm-subhead-pill span,.vm-subhead-ribbon span{display:inline-block;background:var(--subhead-bg,var(--brand))}
.vm-subhead-pill span{padding:.3em 1em;border-radius:var(--radius-pill)}
.vm-subhead-ribbon span{padding:.35em 1.7em .4em;clip-path:polygon(0 0,100% 0,calc(100% - .8em) 50%,100% 100%,0 100%,.8em 50%);transform:rotate(-2deg)}
/* ==== YVM-207 one layout for every skin (boards/parts): start. A compact hero beside three why-points, the note form
   as a panel "Share your feedback" opens (#share as the target without script, .vm-share-open with it or when the page
   comes back with the note), then the notes at once: 4 columns on a computer, 2 on a tablet, 1 on a phone, the first
   row inside a 1366x768 screen. Every colour is a token pair the contrast check covers (App\Support\BoardLayout). ==== */
.vm .vm-hero.vm-hero-compact{padding:var(--space-step-4) 0}
.vm .vm-hero-compact .vm-title{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;margin:0 0 var(--space-step-2)}
.vm .vm-hero-compact .vm-eyebrow{margin-bottom:var(--space-step-1)}
.vm .vm-hero.vm-hero-compact .vm-lede{font-size:1.0625rem;line-height:1.5;margin:0 0 var(--space-step-3);max-width:var(--measure)}
.vm-hero-compact .vm-ctas{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-step-3)}
.vm .vm-accent{color:var(--brand)}
.vm-why{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-step-3)}
.vm-why-point{display:flex;gap:var(--space-step-3);align-items:flex-start;color:var(--text);line-height:1.4}
.vm-why-icon{flex:none;color:var(--brand)}
.vm-why-title{display:block;color:var(--ink)}
.vm .vm-share-panel:not(:target):not(:has(:target)):not(.vm-share-open){display:none}
.vm .vm-share-panel{padding:var(--space-step-5) 0}
.vm .vm-board[data-voice-board]{padding:var(--space-step-3) 0 var(--space-step-6)}
.vm-board-head{margin-bottom:var(--space-step-3)}
.vm .vm-hero.vm-hero-compact .vm-hero-text{display:block}
.vm .vm-board[data-voice-board] .vm-board-head .vm-h2{margin:0;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2}
.vm [data-voice-board] .vm-notes.vm-notes-grid > .vm-postit{margin-top:0}
.vm .vm-board-head .vm-board-count{font-family:var(--sans);font-weight:400;font-size:1rem;letter-spacing:0;color:inherit}
.vm .vm-notes.vm-notes-grid{grid-template-columns:minmax(0,1fr)}
.vm-notes-grid + .vm-hint{margin-top:var(--space-step-5)}
.vm .vm-why.vm-why-strip{margin-top:var(--space-step-4);font-size:.9375rem}
.vm-footline{margin:0 auto;padding-top:var(--space-step-4);padding-bottom:var(--space-step-4);text-align:center;font-weight:700;color:var(--text)}
@media (min-width:600px){.vm .vm-notes.vm-notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.vm .vm-hero-compact .vm-hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}}
@media (min-width:1024px){.vm .vm-notes.vm-notes-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Four to a row: each skin's note face at no more than 1.375rem, so a note of a few lines keeps the row in the fold. */
  .vm .vm-board[data-voice-board] .vm-notes.vm-notes-grid .vm-note-text{font-size:min(var(--note-size),1.375rem);line-height:1.25}}
.vm .vm-hero-compact .vm-hero-img{max-height:18rem}
@media (min-width:768px){.vm .vm-why.vm-why-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ==== YVM-207 one layout for every skin: end. ==== */