/* ==========================================================================
   Accents: lime pops (#B4DA55) + paper / canvas textures.
   Layers on top of styles.css (linked right after it in index.html).

   Contrast rule: lime is too light for text on light backgrounds (~1.6:1), so on
   light areas it's only used as fills, highlights and shapes (with ink on top);
   it's used as text only on the dark sections (~11:1).
   ========================================================================== */
:root {
  --lime: #b4da55;
  --lime-soft: rgba(180, 218, 85, .55);

  /* Crumpled paper: lit noise, flattened so flat areas stay ~page colour */
  --crumple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='6' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='7'%3E%3CfeDistantLight azimuth='225' elevation='56'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.55' intercept='.55'/%3E%3CfeFuncG type='linear' slope='.55' intercept='.55'/%3E%3CfeFuncB type='linear' slope='.55' intercept='.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");

  /* Canvas weave: horizontal + vertical thread noise as a faint dark overlay */
  --canvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .05' numOctaves='2' seed='3' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .85' numOctaves='2' seed='8' stitchTiles='stitch' result='b'/%3E%3CfeComposite in='a' in2='b' operator='arithmetic' k2='.5' k3='.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .15 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* ---------- Textures ---------- */
body {
  background-color: var(--paper);
  background-image: var(--crumple);
  background-size: 900px 900px;
  background-blend-mode: multiply;
}
.tile:not(.grain):not(.grain-dark):not(.tile-line):not(.tile-member),
.folder:not(.folder-dark) .folder-tab,
.folder:not(.folder-dark) .folder-body,
.review:not(.review-dark) {
  background-image: var(--canvas);
  background-size: 240px 240px;
}

/* ---------- Text selection ---------- */
::selection { background: var(--lime); color: var(--ink); }

/* ---------- Hero: the pen circle around "clarity" in lime ---------- */
.scribble .scribble-ink { fill: var(--lime); }

/* ---------- Links: highlighter underline ---------- */
.mast-nav a, .hero-col a {
  background-image: linear-gradient(var(--lime), var(--lime));
  background-position: 0 92%;
  transition: background-size .4s var(--ease);
}
.mast-nav a.is-active { background-size: 100% 6px; }
@media (hover: hover) { .mast-nav a:hover, .hero-col a:hover { background-size: 100% 6px; } }
@media (hover: hover) { .footer-links a:hover { color: var(--lime); } }
.email { background-image: linear-gradient(var(--lime), var(--lime)); }

/* ---------- Arrow links: just the arrow turns lime on hover ---------- */
.link-arrow svg { transition: transform .35s var(--ease), stroke .2s; }
@media (hover: hover) { .link-arrow:hover svg { stroke: var(--lime); } }

/* ---------- Buttons: lime lift on hover ---------- */
@media (hover: hover) { .btn:hover { box-shadow: 0 6px 0 -1px var(--lime); } }
@media (hover: hover) { .btn-paper:hover { box-shadow: 0 6px 0 -1px var(--lime); } }
@media (hover: hover) { .icon-btn:hover { box-shadow: 0 5px 0 -1px var(--lime); } }

/* ---------- Side menu: hovered item's label and line go lime ---------- */
.rail span { transition: opacity .3s, transform .4s var(--ease), background-color .2s; }
@media (hover: hover) { .rail a:hover span { background-color: var(--lime); color: var(--ink); } }
.rail a::after { transition: width .4s var(--ease), background-size .2s; }
@media (hover: hover) { .rail a:hover::after {
    background-image: linear-gradient(var(--lime), var(--lime));
    background-size: 100% 3px;
  } }

/* ---------- Folders ---------- */
.folder-tab.is-active { text-decoration-color: var(--lime); text-decoration-thickness: 4px; }

/* ---------- How it works ---------- */
.sticky-note { background: var(--lime); color: var(--ink); }
.step-n { transition: background-color .3s, transform .35s var(--ease); }
@media (hover: hover) { .steps li:hover .step-n { background: var(--lime); transform: rotate(-4deg); } }

/* ---------- Dark sections: lime as text ---------- */
.tile-line .eyebrow, .tile-member .eyebrow, .footer-panel .eyebrow { color: var(--lime); }
.live-dot { background: var(--lime); animation-name: pulse-lime; }
@keyframes pulse-lime {
  0% { box-shadow: 0 0 0 0 rgba(180, 218, 85, .55); }
  70% { box-shadow: 0 0 0 10px rgba(180, 218, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 218, 85, 0); }
}
.vault-icon { transition: background-color .25s, color .25s, border-color .25s; }
@media (hover: hover) { .vault li:hover .vault-icon { background: var(--lime); color: var(--ink); border-color: var(--lime); } }
.review-dark .tag { color: var(--lime); border-color: var(--lime); }

/* ---------- Folder "More info" / "Back" links: highlighter on hover ---------- */
.row-main.is-clickable h4 { text-decoration: underline 3px transparent; text-underline-offset: 5px; transition: text-decoration-color .25s, opacity .3s; }
@media (hover: hover) { .row-main.is-clickable:hover h4 { text-decoration-color: var(--lime); } }
.row-info span, .detail-less span, .folder-back { background: linear-gradient(var(--lime), var(--lime)) 0 92% / 0 5px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .row-info:hover span, .detail-less:hover span, .folder-back:hover { background-size: 100% 5px; } }

/* ---------- FAQ: "See more questions" gets the highlighter on hover ---------- */
.inline-link span, .mod-link span, .faq-ask span, .faq-more span { background: linear-gradient(var(--lime), var(--lime)) 0 92% / 0 6px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .faq-more:hover span, .faq-ask:hover span, .mod-link:hover span, .inline-link:hover span { background-size: 100% 6px; } }

/* ---------- FAQ: open question gets a lime × ---------- */
.faq details[open] summary::after { background-color: var(--lime); }

/* ---------- Graphic: the spinning word ring lights up one word at a time ----------
   Six words, one second each, in reading order around the ring. */
.orbit .ow { animation: ow-lit 6s linear infinite; animation-delay: calc(var(--n) * 1s); }
@keyframes ow-lit {
  0%, 18%, 100% { fill: var(--ink); }
  3%, 15% { fill: var(--lime); }
}

/* ---------- Graphic: the spinning asterisk ---------- */
.spark { stroke: var(--lime); stroke-width: 5.5; }
.spark-b { stroke-width: 3.4; }

/* How it works menu: lime highlighter under the chosen offering */
.hiw-menu button::after { background: var(--lime); }

/* Touch screens: lime hover accents show while pressed (see styles.css) */
@media (hover: none) {
  .mast-nav a:active, .hero-col a:active { background-size: 100% 6px; }
  .footer-links a:active { color: var(--lime); }
  .link-arrow:active svg { stroke: var(--lime); }
  .btn:active { box-shadow: 0 6px 0 -1px var(--lime); }
  .btn-paper:active { box-shadow: 0 6px 0 -1px var(--lime); }
  .icon-btn:active { box-shadow: 0 5px 0 -1px var(--lime); }
  .row-main.is-clickable:active h4 { text-decoration-color: var(--lime); }
  .row-info:active span, .detail-less:active span, .folder-back:active { background-size: 100% 5px; }
  .faq-more:active span, .faq-ask:active span, .mod-link:active span, .inline-link:active span { background-size: 100% 6px; }
}

/* Dictionary card: lime rule under the headword */
.define-head { border-bottom-color: var(--lime); }

/* Modality pop-up: solid lime offset shadow */
.mod-dialog { box-shadow: 10px 10px 0 var(--lime); }

/* Tally form pop-ups: solid lime offset shadow, like the modality pop-up */
.tally-popup > div { box-shadow: 10px 10px 0 var(--lime) !important; }

/* Note-card checklist: lime ticks */
.checks li::after { background-color: var(--lime); }

/* Pre-order badge in lime */
.price-badge { background: var(--lime); color: var(--ink); }

/* Flip-board capture: lime accents */
@media (hover: hover) { .board-cap:hover { border-color: var(--lime); color: var(--lime); } .cap-sizes button:hover, .cap-sizes button:hover span { border-color: var(--lime); color: var(--lime); } .cap-dialog .cap-download:hover { background: #000; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } .cap-change:hover, .cap-ig:hover { color: var(--lime); } .cap-ig:hover { transform: rotate(-6deg); } .cap-zoom:hover { border-color: var(--lime); color: var(--lime); } .cap-dialog .icon-btn:hover { background: #fff; color: #000; } }
@media (hover: none) { .board-cap:active { border-color: var(--lime); color: var(--lime); } .cap-sizes button:active { background: var(--lime); border-color: var(--lime); color: #000; } .cap-sizes button:active span { color: #000; } .cap-ig:active, .cap-zoom:active { color: var(--lime); border-color: var(--lime); } }
.tile-board.is-paused .board-cap-img { border-color: var(--lime); color: var(--lime); }
.cap-dialog { box-shadow: 10px 10px 0 var(--lime); }

/* Download: lime on click with a mouse; on touch screens a tap shows the hover lift + lime shadow instead */
@media (hover: hover) { .cap-dialog .cap-download:active { background: var(--lime); border-color: var(--lime); color: #000; transform: none; box-shadow: 0 0 0 var(--lime); } }
@media (hover: none) { .cap-dialog .cap-download:active { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } }
/* Size buttons fill lime when pressed, mouse or touch */
.cap-sizes button:active { background: var(--lime); border-color: var(--lime); color: #000; } .cap-sizes button:active span { color: #000; }
@media (hover: hover) { .cap-handle:hover { color: var(--lime); } }
.cap-handle:active { color: var(--lime); }
/* Social links: lime on hover / tap, Download-style lift on the chooser buttons */
@media (hover: hover) { .social-ico:hover, .footer-handle:hover { color: var(--lime); } .social-ico:hover { transform: rotate(-6deg); } .social-link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } .social-close:hover { background: #fff; color: #000; } .social-link:active { background: var(--lime); border-color: var(--lime); color: #000; transform: none; box-shadow: none; } }
@media (hover: none) { .social-ico:active, .footer-handle:active { color: var(--lime); } .social-link:active { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } }
.social-dialog { box-shadow: 10px 10px 0 var(--lime); }