/* YVM-164: a board's note style, chosen on the Look page (App\Support\BoardLook, config/look.php 'styles'): a body
   class, vm-n-<name>, after the skin's own stylesheets. vm-n-template keeps the skin's own notes. Only shape, lean,
   pin and tape: never the notes' colours or text (those are tokens, checked for contrast). The notes' words are never
   covered: a pin or tape sits in the top padding. Motion stays the skin's. */
.vm.vm-t-county .vm-postit{color:var(--note-ink,#2a2238)}
/* County's note dates are its own dark grey (voice.css): with a chosen set they follow the note ink, so a dark set
   (Glow) keeps them readable; the ink is checked on every note colour (BoardLook::problems). */
.vm.vm-t-county .vm-note-date{color:var(--note-ink,#463f5c)}
.vm.vm-n-postit .vm-postit,.vm.vm-n-pinned .vm-postit,.vm.vm-n-taped .vm-postit,.vm.vm-n-clean .vm-postit,.vm.vm-n-pinned .vm-hero-note,.vm.vm-n-taped .vm-hero-note{position:relative}

/* Post-it: square-ish paper, a lean of its own, a lifted shadow. */
.vm.vm-n-postit .vm-postit,.vm.vm-n-pinned .vm-postit,.vm.vm-n-taped .vm-postit,.vm.vm-n-postit .vm-hero-note,.vm.vm-n-pinned .vm-hero-note,.vm.vm-n-taped .vm-hero-note{border-radius:2px;box-shadow:0 16px 18px -12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.12)}
.vm.vm-n-postit .vm-notes>.vm-postit:nth-child(4n+1),.vm.vm-n-taped .vm-notes>.vm-postit:nth-child(4n+1){transform:rotate(-2deg)}
.vm.vm-n-postit .vm-notes>.vm-postit:nth-child(4n+2),.vm.vm-n-taped .vm-notes>.vm-postit:nth-child(4n+2){transform:rotate(1.5deg)}
.vm.vm-n-postit .vm-notes>.vm-postit:nth-child(4n+3),.vm.vm-n-taped .vm-notes>.vm-postit:nth-child(4n+3){transform:rotate(-1deg)}
.vm.vm-n-postit .vm-notes>.vm-postit:nth-child(4n),.vm.vm-n-taped .vm-notes>.vm-postit:nth-child(4n){transform:rotate(2deg)}

/* Pinned: half the lean, a round red pin at the top. */
.vm.vm-n-pinned .vm-notes>.vm-postit:nth-child(odd){transform:rotate(-1deg)}
.vm.vm-n-pinned .vm-notes>.vm-postit:nth-child(even){transform:rotate(.75deg)}
.vm.vm-n-pinned .vm-postit{padding-top:1.5rem}
.vm.vm-n-pinned .vm-postit::before,.vm.vm-n-pinned .vm-hero-note::before{content:"";position:absolute;top:-.5rem;left:calc(50% - .5rem);right:auto;bottom:auto;inset-inline:auto;width:1rem;height:1rem;margin:0;border:0;border-radius:50%;transform:none;
  background:radial-gradient(circle at 35% 30%,#F79BB0,#E2456A 55%,#8E1D3A);box-shadow:0 3px 4px rgba(0,0,0,.35);z-index:2}
.vm.vm-n-pinned .vm-postit:not(.vm-unstuck)::after,.vm.vm-n-pinned .vm-hero-note::after{content:none}

/* Taped: a strip of translucent tape across the top. */
.vm.vm-n-taped .vm-postit{padding-top:1.5rem}
.vm.vm-n-taped .vm-postit::before,.vm.vm-n-taped .vm-hero-note::before{content:"";position:absolute;top:-.6rem;left:calc(50% - 2rem);right:auto;bottom:auto;width:4rem;height:1.25rem;margin:0;border:0;border-radius:0;
  background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.15);transform:rotate(-3deg);z-index:2}
.vm.vm-n-taped .vm-postit:not(.vm-unstuck)::after,.vm.vm-n-taped .vm-hero-note::after{content:none}

/* Clean card: square to the page, rounded, a soft shadow, nothing stuck on. */
.vm.vm-n-clean .vm-postit,.vm.vm-n-clean .vm-hero-note{transform:none;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.12);animation:none}
.vm.vm-n-clean .vm-postit::before,.vm.vm-n-clean .vm-postit::after,.vm.vm-n-clean .vm-hero-note::before,.vm.vm-n-clean .vm-hero-note::after{content:none}
.vm.vm-n-clean .vm-postit.vm-unstuck{padding-bottom:var(--space-step-4,1rem)}
@media (prefers-reduced-motion:no-preference){
  .vm.vm-n-clean .vm-postit:hover,.vm.vm-n-clean .vm-hero-note:hover{transform:none}
}

/* YVM-213 Neon frame: square to the page, a 2px outline in the note's own colour and a glow of it. */
.vm.vm-n-neon .vm-postit,.vm.vm-n-neon .vm-hero-note{position:relative;transform:none;border-radius:14px;border:2px solid var(--note-c);box-shadow:0 0 22px -4px var(--note-c),inset 0 0 14px -6px var(--note-c);animation:none}
.vm.vm-n-neon .vm-postit::before,.vm.vm-n-neon .vm-postit::after,.vm.vm-n-neon .vm-hero-note::before,.vm.vm-n-neon .vm-hero-note::after{content:none}
.vm.vm-n-neon .vm-postit.vm-unstuck{padding-bottom:var(--space-step-4,1rem)}
@media (prefers-reduced-motion:no-preference){
  .vm.vm-n-neon .vm-postit:hover,.vm.vm-n-neon .vm-hero-note:hover{transform:none}
}

/* YVM-213 Festive: a white-edged card, a strip of tape, a small lean, and a seasonal doodle (a star, a snowflake, a
   holly sprig) in the bottom corner, drawn as a decorative character the screen reader skips (alt text ""). */
.vm.vm-n-festive .vm-postit,.vm.vm-n-festive .vm-hero-note{position:relative;border-radius:4px;box-shadow:0 0 0 6px #FFFFFF,0 14px 18px -10px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.12)}
.vm.vm-n-festive .vm-postit{padding-top:1.5rem;padding-bottom:2rem}
.vm.vm-n-festive .vm-notes>.vm-postit:nth-child(odd){transform:rotate(-1.25deg)}
.vm.vm-n-festive .vm-notes>.vm-postit:nth-child(even){transform:rotate(1deg)}
.vm.vm-n-festive .vm-postit::before,.vm.vm-n-festive .vm-hero-note::before{content:"";position:absolute;top:-.7rem;left:calc(50% - 2rem);right:auto;bottom:auto;width:4rem;height:1.25rem;margin:0;border:0;border-radius:0;
  background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(0,0,0,.15);transform:rotate(-3deg);z-index:2}
.vm.vm-n-festive .vm-postit:not(.vm-unstuck)::after,.vm.vm-n-festive .vm-postit::after,.vm.vm-n-festive .vm-hero-note::after{content:"✦" / "";position:absolute;right:.6rem;bottom:.35rem;left:auto;top:auto;width:auto;height:auto;margin:0;border:0;background:none;box-shadow:none;transform:none;
  color:#9E1F63;font:700 1.125rem/1 system-ui,sans-serif;opacity:.8;z-index:2}
.vm.vm-n-festive .vm-notes>.vm-postit:nth-child(3n+2)::after,.vm.vm-n-festive .vm-hero-note-2::after{content:"❄" / "";color:#1B5FA0}
.vm.vm-n-festive .vm-notes>.vm-postit:nth-child(3n)::after,.vm.vm-n-festive .vm-hero-note-3::after{content:"❦" / "";color:#1E6B47}