/* =====================================================================
   Global Village Coffeehouse ("Kraft & Ink") skin -- opt-in via
   body[data-skin="gvc"], toggled from the same Setup tab as the other
   skins. Scoped entirely under that selector, so with the attribute
   absent this stylesheet has zero effect. Only ever loaded by index.html.

   Direction: the late-80s-to-90s "earth-toned woodcut coffeehouse" design
   aesthetic (Starbucks/Panera/Barnes & Noble-era branding) -- earth
   tones, rough paper textures, gradated (never flat) backgrounds,
   "horror vacui" density, and line art that's deliberately printed a
   couple pixels out of register with its own color fill, like an
   imprecise vintage press run.

   A deliberate omission: the aesthetic's own literature is blunt that its
   most-criticized element is appropriated "tribal"/Indigenous iconography
   (Kokopelli, petroglyphs-as-decoration) and colonial nostalgia (Mercator
   globes, rigged ships, "porter" imagery) used as a marketing veneer of
   authenticity. None of that appears here -- the icon set below (coffee
   cup, sun, wave, leaf) draws only on the aesthetic's natural/coffeehouse
   motifs, which the sources describe as the same register without that
   baggage.

   Layout stays the original grid, unlike the Wacky Pomo skin -- a cozy
   coffeehouse reads as inviting, not scattered, so structural calm is
   part of the mood rather than an opportunity missed.

   Fonts: self-hosted Bevan / Caveat / Nunito Sans (Google Fonts, OFL --
   see fonts/gvc/ATTRIBUTION.txt).
   ===================================================================== */

@font-face {
  font-family: 'Bevan';
  src: url('./fonts/gvc/Bevan-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/gvc/Caveat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('./fonts/gvc/NunitoSans-Variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('./fonts/gvc/ComicNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('./fonts/gvc/ComicNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body[data-skin="gvc"] {
  /* ---- Palette ("Kraft & Ink") ---- */
  --primary-color: #EDE1CC;         /* Parchment -- base background */
  --primary-font: 'Nunito Sans', sans-serif;
  --monospace-font: 'Bevan', serif;
  --border-color: #3E2A1E;
  --hover-bg: #E2D3B4;
  --focus-outline: #9C4A2B;

  --gvc-parchment: #EDE1CC;
  --gvc-ink: #3E2A1E;       /* Espresso */
  --gvc-terracotta: #C1683B;
  --gvc-olive: #79803D;
  --gvc-rust: #9C4A2B;
  --gvc-mustard: #D9A441;

  /* ---- Themable hooks consumed by timer-remote-sync.js /
     timer-remote-shared.js / timer-skin.js (each already has a
     var(--x, literal) fallback). ---- */
  --tr-widget-idle-bg: var(--gvc-ink);
  --tr-widget-idle-shadow: 0 2px 8px rgba(62, 42, 30, 0.4);
  --tr-panel-bg: var(--gvc-ink);
  --tr-panel-shadow: 0 4px 16px rgba(62, 42, 30, 0.45);
  --tr-flash-bg: var(--gvc-rust);
  --tr-widget-fg: var(--gvc-parchment);
  --tr-badge-bg: var(--gvc-mustard);
  --tr-badge-fg: var(--gvc-ink);
  --tr-action-bg: var(--gvc-olive);
  --tr-paired-pulse-mid: rgba(121, 128, 61, 0.55);
  --tr-paired-pulse-shadow: rgba(121, 128, 61, 0.7);
  --tr-following-pulse-mid: rgba(217, 164, 65, 0.6);
  --tr-following-pulse-shadow: rgba(217, 164, 65, 0.75);
  --tr-recovery-bg: rgba(87, 30, 20, 0.96);
  --tr-recovery-font: 'Bevan', serif;

  background-color: var(--gvc-parchment);
  /* Gradated, not flat -- a soft warm vignette plus a fine paper-grain
     dot texture, per the source material's "colorful gradated
     backgrounds" and "general dislike of expanses of flat colors." */
  background-image:
    radial-gradient(circle at 20% 15%, rgba(193, 104, 59, 0.10), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(121, 128, 61, 0.12), transparent 55%),
    radial-gradient(rgba(62, 42, 30, 0.07) 1px, transparent 1px);
  background-size: auto, auto, 5px 5px;
  color: var(--gvc-ink);
}

body[data-skin="gvc"] .timer-label,
body[data-skin="gvc"] label,
body[data-skin="gvc"] button {
  font-family: 'Bevan', serif;
}

/* Replaced by the "Today's Agenda" chalkboard sign (#agendaTimer::after,
   below) rather than styled -- the sign takes over this text's spot at
   the top-left of the panel, so the real label just steps out of the
   way instead of rendering redundantly underneath it. */
body[data-skin="gvc"] .agenda-prefix-line {
  display: none;
}

/* ---- Panels: soft, irregular "hand-trimmed" corners (each corner a
   slightly different radius) instead of a uniform machine-cut rectangle,
   plus a warm gradient fill so no panel reads as a flat color block. ---- */

body[data-skin="gvc"] #speakerTimer,
body[data-skin="gvc"] #timer2,
body[data-skin="gvc"] #agendaTimer,
body[data-skin="gvc"] #dateTime {
  /* Needed for #agendaTimer's own ::before/::after (the chalkboard mug
     icon and caption tag below) to position relative to #agendaTimer
     itself -- without this they'd anchor to whichever ancestor actually
     has non-static position, which happens to look approximately right
     at some viewport sizes purely by coincidence and wrong at others. */
  position: relative;
  border-radius: 22px 30px 24px 34px;
  outline: 3px solid var(--gvc-ink);
  outline-offset: -3px;
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 164, 65, 0.16), transparent 60%),
    var(--gvc-parchment);
  box-shadow: 0 3px 0 rgba(62, 42, 30, 0.25);
}

body[data-skin="gvc"] .timer {
  font-family: 'Bevan', serif;
  color: var(--gvc-terracotta);
  text-shadow: 2px 2px 0 rgba(62, 42, 30, 0.18);
}

/* ---- Buttons + inputs: warm, rounded, "rubber-stamped" ---- */

body[data-skin="gvc"] button {
  background: var(--gvc-terracotta);
  color: var(--gvc-parchment);
  border: 2px solid var(--gvc-ink);
  border-radius: 10px 14px 10px 14px;
  font-family: 'Bevan', serif;
  box-shadow: 0 2px 0 rgba(62, 42, 30, 0.3);
}

body[data-skin="gvc"] button:hover:not(:disabled) {
  background: var(--gvc-rust);
}

body[data-skin="gvc"] button:focus {
  outline: 3px solid var(--gvc-mustard);
  outline-offset: 2px;
}

body[data-skin="gvc"] .play-pause-btn.is-running {
  background: var(--gvc-olive);
}

body[data-skin="gvc"] #slides-fullscreen-btn.active {
  background: var(--gvc-mustard);
  color: var(--gvc-ink);
}

body[data-skin="gvc"] .resume-glow {
  background: var(--gvc-mustard);
  color: var(--gvc-ink);
}

body[data-skin="gvc"] input {
  background: #F7F1E3;
  color: var(--gvc-ink);
  border: 2px solid var(--gvc-ink);
  border-radius: 8px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
}

/* ---- Selection: a warm ink underline/highlight rather than a hard
   reverse-video block, closer to a menu-board chalk tick. ---- */

body[data-skin="gvc"] input[type="radio"][name="speakerTimerType"]:checked + label,
body[data-skin="gvc"] input[type="radio"][name="agendaTimerType"]:checked + label {
  background: var(--gvc-mustard);
  color: var(--gvc-ink);
  border-radius: 8px 12px 8px 12px;
  box-shadow: 0 2px 0 rgba(62, 42, 30, 0.3);
}

body[data-skin="gvc"] input[type="radio"][name="speakerTimerType"] + label:hover,
body[data-skin="gvc"] input[type="radio"][name="agendaTimerType"] + label:hover {
  background: var(--gvc-olive);
  color: var(--gvc-parchment);
  border-radius: 8px 12px 8px 12px;
}

body[data-skin="gvc"] .chair-name-display {
  color: var(--gvc-rust);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: calc(var(--font-md) * 1.6);
}

body[data-skin="gvc"] .date-time {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
}

/* ---- Decor: the DSA rose gifs are swapped for hand-drawn-style line-art
   icons (coffee cup + steam, sun, wave/leaf sprig) -- each drawn with its
   ink outline offset a couple pixels from its own color fill, echoing
   the source material's description of GVC print work as slightly
   "misregistered." The chapter photo stays (real content, not filler)
   in a simple kraft-toned frame. ---- */

body[data-skin="gvc"] .index-decor img {
  display: none;
}

/* The coffee cup and sun used to be absolutely positioned at fixed
   percentages of the container's width (left:6%/right:6%), independent
   of the chapter photo's own rendered width -- that photo is a wide
   16:9 image (181px wide at this row's fixed 84px height), wider than
   assumed, so the fixed percentages landed inside its edges instead of
   clear of them. Making the icons real flex items instead (siblings of
   the photo, in the same row) fixes that by construction: flexbox lays
   all three out left-to-right with a real gap between them, so they can
   never overlap the photo regardless of its width. */
body[data-skin="gvc"] .index-decor {
  min-height: 84px;
  gap: 10px;
}

body[data-skin="gvc"] .index-decor::before,
body[data-skin="gvc"] .index-decor::after {
  content: '';
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
}

body[data-skin="gvc"] .index-decor::before {
  width: 58px;
  height: 58px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2060%27%3E%0A%3Cellipse%20cx%3D%2730%27%20cy%3D%2750%27%20rx%3D%2718%27%20ry%3D%274%27%20fill%3D%27%23C1683B%27%2F%3E%0A%3Cpath%20d%3D%27M14%2028%20Q14%2046%2030%2046%20Q46%2046%2046%2028%20Z%27%20fill%3D%27%23C1683B%27%2F%3E%0A%3Cpath%20d%3D%27M44%2030%20Q54%2030%2054%2038%20Q54%2044%2044%2042%27%20fill%3D%27none%27%20stroke%3D%27%23C1683B%27%20stroke-width%3D%274%27%2F%3E%0A%3Cg%20transform%3D%27translate%281.5%2C-1.5%29%27%3E%0A%3Cpath%20d%3D%27M14%2028%20Q14%2046%2030%2046%20Q46%2046%2046%2028%27%20fill%3D%27none%27%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3Cpath%20d%3D%27M44%2030%20Q54%2030%2054%2038%20Q54%2044%2044%2042%27%20fill%3D%27none%27%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3Cpath%20d%3D%27M22%2022%20Q19%2016%2022%2010%27%20fill%3D%27none%27%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3Cpath%20d%3D%27M30%2022%20Q27%2016%2030%2010%27%20fill%3D%27none%27%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3Cpath%20d%3D%27M38%2022%20Q35%2016%2038%2010%27%20fill%3D%27none%27%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  animation: gvc-drift 6s ease-in-out infinite;
}

body[data-skin="gvc"] .index-decor::after {
  width: 54px;
  height: 54px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2060%27%3E%0A%3Ccircle%20cx%3D%2730%27%20cy%3D%2730%27%20r%3D%2712%27%20fill%3D%27%23D9A441%27%2F%3E%0A%3Cg%20transform%3D%27translate%281.5%2C-1.5%29%27%3E%0A%3Ccircle%20cx%3D%2730%27%20cy%3D%2730%27%20r%3D%2712%27%20fill%3D%27none%27%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%272.5%27%2F%3E%0A%3Cg%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%3E%0A%3Cline%20x1%3D%2730%27%20y1%3D%274%27%20x2%3D%2730%27%20y2%3D%2712%27%2F%3E%0A%3Cline%20x1%3D%2730%27%20y1%3D%2748%27%20x2%3D%2730%27%20y2%3D%2756%27%2F%3E%0A%3Cline%20x1%3D%274%27%20y1%3D%2730%27%20x2%3D%2712%27%20y2%3D%2730%27%2F%3E%0A%3Cline%20x1%3D%2748%27%20y1%3D%2730%27%20x2%3D%2756%27%20y2%3D%2730%27%2F%3E%0A%3Cline%20x1%3D%2711%27%20y1%3D%2711%27%20x2%3D%2716.5%27%20y2%3D%2716.5%27%2F%3E%0A%3Cline%20x1%3D%2743.5%27%20y1%3D%2743.5%27%20x2%3D%2749%27%20y2%3D%2749%27%2F%3E%0A%3Cline%20x1%3D%2749%27%20y1%3D%2711%27%20x2%3D%2743.5%27%20y2%3D%2716.5%27%2F%3E%0A%3Cline%20x1%3D%2716.5%27%20y1%3D%2743.5%27%20x2%3D%2711%27%20y2%3D%2749%27%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  animation: gvc-drift 7s ease-in-out infinite reverse;
}

@keyframes gvc-drift {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="gvc"] .index-decor::before,
  body[data-skin="gvc"] .index-decor::after {
    animation: none;
  }
}

body[data-skin="gvc"] .index-decor img[alt="chapter logo"] {
  display: block;
  height: 84px;
  width: auto;
  border-radius: 12px 18px 12px 18px;
  outline: 3px solid var(--gvc-ink);
  outline-offset: -3px;
  box-shadow: 0 3px 0 rgba(62, 42, 30, 0.3);
  position: relative;
  z-index: 1;
}

/* ---- Agenda "chalkboard coffeehouse menu board": the signature element.
   Originally lived on #timer2, but real presentation content covers that
   panel most of the time, so it moved here where it stays visible for
   the whole meeting. A dark, gradiented chalkboard-textured fill inside
   #agendaTimer itself (never rotated, never resized -- see the
   structural safety note in the other skins' CSS; this only repaints
   the panel's own background and adds corner decoration, it never
   touches the box that getBoundingClientRect() callers measure), a
   square frame (unlike the other panels' rounded corners), a
   hand-lettered corner sign standing in for "Current Agenda Item:", and
   a chalk tray built into the bottom edge (see below). ---- */

body[data-skin="gvc"] #agendaTimer {
  /* Square, unlike the other three panels' hand-trimmed rounded corners
     -- a real chalkboard/menu-board has a straight-edged frame, and it
     sets this panel apart as the skin's signature element. outline
     follows border-radius automatically, so this squares off both. */
  border-radius: 0;
  outline-color: var(--gvc-mustard);
  background-color: #16241B;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%0A%3Cfilter%20id%3D%27n%27%3E%0A%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%0A%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.06%200%27%2F%3E%0A%3C%2Ffilter%3E%0A%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%0A%3C%2Fsvg%3E"),
    /* Worn-chalkboard gradient -- lighter green up top, darkening toward
       the bottom edge -- instead of the old flat fill. */
    linear-gradient(165deg, #3A5A42 0%, #223A2A 55%, #16241B 100%);
  background-repeat: repeat, no-repeat;
  background-size: 140px 140px, auto;
}

/* Chalk tray built into the bottom edge itself -- not a separate
   floating shelf, just a groove with a few small, thin, horizontal
   pieces of chalk resting in it, flush with the panel's own bottom
   edge and running the full width of the board (like the molding at
   the bottom of a real chalkboard frame). Paints on top of the control
   row rather than hiding behind it (that row has zero vertical slack
   below it -- there's no room to tuck a tray under it), so
   pointer-events:none is what keeps the real buttons underneath fully
   clickable -- the tray is decoration only.

   The groove line itself is solid var(--gvc-mustard), the same color
   already used for every button/input border in this panel -- a subtle
   semi-transparent line was technically spanning the full width (verified
   via getComputedStyle) but was visually unreadable against the busy
   button row, so it looked like two disconnected end-caps instead of one
   continuous tray. Solid + matching the buttons' own border color makes
   it read as one rail even where it crosses them. */
body[data-skin="gvc"] #agendaTimer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%2016%27%3E%0A%3Crect%20x%3D%270%27%20y%3D%278%27%20width%3D%271000%27%20height%3D%273%27%20fill%3D%27%231C2E22%27%20opacity%3D%270.45%27%2F%3E%0A%3Crect%20x%3D%270%27%20y%3D%2711%27%20width%3D%271000%27%20height%3D%273%27%20fill%3D%27%23D9A441%27%2F%3E%0A%3Cg%20stroke%3D%27%233E2A1E%27%20stroke-width%3D%270.8%27%20stroke-linejoin%3D%27round%27%3E%0A%3Crect%20x%3D%2724%27%20y%3D%272%27%20width%3D%2730%27%20height%3D%276%27%20rx%3D%273%27%20fill%3D%27%23EDE1CC%27%2F%3E%0A%3Crect%20x%3D%27792%27%20y%3D%271%27%20width%3D%2732%27%20height%3D%276%27%20rx%3D%273%27%20fill%3D%27%23EDE1CC%27%2F%3E%0A%3Crect%20x%3D%27832%27%20y%3D%272%27%20width%3D%2728%27%20height%3D%275%27%20rx%3D%272.5%27%20fill%3D%27%23D9A441%27%2F%3E%0A%3Crect%20x%3D%27868%27%20y%3D%271%27%20width%3D%2732%27%20height%3D%276%27%20rx%3D%273%27%20fill%3D%27%23C1683B%27%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E") bottom / 100% 100% no-repeat;
}

body[data-skin="gvc"] #agendaTimer::after {
  content: "Today's Agenda";
  position: absolute;
  /* Now replaces the (hidden, see .agenda-prefix-line above) "Current
     Agenda Item:" text at the top-left of the panel, in its original
     spot -- there's nothing left there to collide with. */
  top: 10px;
  left: 24px;
  z-index: 2;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 22px;
  color: var(--gvc-parchment);
  background: var(--gvc-rust);
  padding: 2px 14px 4px;
  border-radius: 8px 8px 2px 2px;
  outline: 2px solid var(--gvc-mustard);
  transform: rotate(-1.5deg);
}

/* Agenda text over the chalkboard reads in Comic Neue with a soft
   glow-blur "chalk" text-shadow (an actual displacement filter would
   look more authentic but risks legibility/reliability on digits that
   update every second, so this stays a static, cheap paint effect). */

body[data-skin="gvc"] #agendaTimer .timer-label,
body[data-skin="gvc"] #agendaTimer p,
body[data-skin="gvc"] #agendaTimer .agenda-file-up-next {
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  color: #EDE8DC;
  text-shadow:
    0 0 1px rgba(237, 232, 220, 0.8),
    0 0 3px rgba(237, 232, 220, 0.5),
    0 0 6px rgba(237, 232, 220, 0.25);
}

body[data-skin="gvc"] #agendaTimer p {
  margin-left: 16px;
}

body[data-skin="gvc"] #agendaTimer .timer {
  font-family: 'Comic Neue', cursive;
  font-weight: 700;
  color: #F7F4EC;
  text-shadow:
    0 0 1px rgba(247, 244, 236, 0.85),
    0 0 4px rgba(247, 244, 236, 0.55),
    0 0 8px rgba(247, 244, 236, 0.3);
}

body[data-skin="gvc"] #agendaTimer .chair-name-display {
  color: var(--gvc-mustard);
}

/* Agenda-panel controls read as chalk-on-slate: higher specificity than
   the general button/input rules above (which stay warm terracotta and
   still govern #speakerTimer's controls, left untouched per request). */

body[data-skin="gvc"] #agendaTimer button {
  background: #3E5642;
  color: var(--gvc-parchment);
  border-color: var(--gvc-mustard);
}

body[data-skin="gvc"] #agendaTimer button:hover:not(:disabled) {
  background: #4A6650;
}

body[data-skin="gvc"] #agendaTimer input {
  background: #3E5642;
  color: var(--gvc-parchment);
  border-color: var(--gvc-mustard);
}

body[data-skin="gvc"] #agendaTimer input[type="radio"]:checked + label {
  background: var(--gvc-mustard);
  color: var(--gvc-ink);
}

body[data-skin="gvc"] #agendaTimer input[type="radio"] + label:hover {
  background: #4A6650;
  color: var(--gvc-parchment);
}

/* ===== Setup tab + boot menu (injected by timer-skin.js, shared across
   skins -- only the appearance differs per skin). ===== */

body[data-skin="gvc"] #timer-skin-tab {
  font-family: 'Bevan', serif;
  font-size: 12px;
  background: var(--gvc-terracotta);
  color: var(--gvc-parchment);
  border: 2px solid var(--gvc-ink);
  border-right: none;
  border-radius: 14px 0 0 16px;
}

body[data-skin="gvc"] #timer-skin-tab:hover {
  background: var(--gvc-rust);
}

body[data-skin="gvc"] #timer-skin-menu {
  font-family: 'Nunito Sans', sans-serif;
  background: #2C1F17;
  color: var(--gvc-parchment);
  border: 2px solid var(--gvc-ink);
  border-radius: 12px;
}

body[data-skin="gvc"] #timer-skin-menu .tsm-option:hover {
  background: var(--gvc-olive);
}

body[data-skin="gvc"] #timer-skin-menu .tsm-option.tsm-active {
  background: var(--gvc-mustard);
  color: var(--gvc-ink);
}