/* Rainy Day design. Presentation only: every rule is scoped to html[data-design="rainy"] except
   the picker swatch, which the picker shows whatever the current design is. Layout, hit areas and
   stored note colours never change. Home, card studying and practice tests are a pane of glass in
   the rain, looking out from a mountain cabin (first paint included); the glass controller adds:
     .rainy-page     Rainy Day design on a page with the glass: Home, card studying, a practice test
     .rainy-home     Rainy Day design with Home mounted
     .rainy-live     the WebGL glass is drawing (its canvas fades in over the CSS still view)
     .rainy-reduced  reduced motion: a still frame of the rainy glass
   Widgets float as calm, pale panels (never frosted: the glass and its blur live in the canvas).
   Decoration never uses will-change, blend modes, backdrop filters or animated filters, so
   nothing extra is composited over the moving canvas. */

/* ------------------------------------------------------------------ design picker (unscoped) */
.sample-rainy { background:#9fb2a8 url("/assets/rainy/swatch.webp?v=2") center / cover no-repeat; }
.sample-rainy i { display:none; }

/* ------------------------------------------------------------------ tokens: overcast greens */
html[data-design="rainy"] {
  --rainy-page:#dfe7e3; --rainy-sheet:#fbfcfb; --rainy-ink:#1b2e26; --rainy-muted:#4a5f55; --rainy-accent:#2e6448;
  --rainy-shore-ink:#15281f; --rainy-shore-muted:#34493f; --rainy-ring-glass:#1f5139;
  --rainy-shore-shadow:0 0 12px rgb(236 243 239 / .6);
}
html[data-design="rainy"] body {
  --paper-grain:none; --workspace-grain:none;
  --paper-desk:var(--rainy-page); --paper-sheet:var(--rainy-sheet); --paper-ink:var(--rainy-ink);
  --paper-muted:var(--rainy-muted); --paper-accent:var(--rainy-accent);
  --paper-rule:color-mix(in srgb,var(--rainy-accent) 16%,transparent);
  --paper-contact:rgb(20 44 32 / .12); --paper-cast:rgb(20 44 32 / .2);
  --workspace-base:var(--rainy-page);
  --surface-alt:color-mix(in srgb,var(--rainy-accent) 6%,#eef3f0);
  --border:color-mix(in srgb,var(--rainy-accent) 20%,#c9d6cf);
  --ui-shadow-rgb:20 44 32;
  background:var(--workspace-base);
}
html[data-design="rainy"] :is(.app-layout,.study-layout,.practice-test-layout,.notebook-studio) {
  background-color:var(--workspace-base);
  background-image:radial-gradient(ellipse 75% 50% at 28% 0%,rgb(246 250 248 / .85),transparent 70%),radial-gradient(ellipse 60% 55% at 90% 100%,rgb(186 208 196 / .5),transparent 70%),linear-gradient(172deg,#e5ece8,#d3e0d9);
}
html[data-design="rainy"] :is(.app-ad-rail,.landing-ad-rail) { background:color-mix(in srgb,var(--rainy-accent) 7%,#e3ebe7); }

/* ------------------------------------------------------------------ the still view through the glass */
/* Before the canvas fades in (and without WebGL 2): a still frame of the same view through the
   same glass, rendered by the engine itself. It is a fixed layer over the box the canvas covers (the
   column and the side rail's strip beside it), composed as the canvas composes the view: from the
   column's left edge, scaled to cover. (iOS scrolls a fixed background on <html> with the page.) */
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) { background:#9fb2a8; }
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout))::before {
  content:""; position:fixed; top:0; right:0; left:0; height:100vh; height:100lvh; z-index:-2; pointer-events:none;
  background:#9fb2a8 url("/assets/rainy/still-landscape.webp?v=2") left center / cover no-repeat;
}
/* Home's column starts after the sidebar (just its icons at 921-1180 px; off screen below that). */
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard))::before { left:var(--sidebar-width); }
@media screen and (min-width:921px) and (max-width:1180px) {
  html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard))::before { left:72px; }
}
@media (max-width:920px) {
  html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard))::before { left:0; }
}
@media (max-aspect-ratio:4/5) {
  html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout))::before { background-image:url("/assets/rainy/still-portrait.webp?v=2"); }
}
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) body,
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) :is(.app-layout,.app-center,#app-content,#app-content > .view,.study-layout,.study-center,.practice-test-layout,.practice-test-center) { background:transparent; }
/* The glass runs on under the side rail beside the column (the controller widens its canvas). */
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) :is(.app-layout,.study-layout,.practice-test-layout) > .app-ad-rail { background:transparent; border-left-color:transparent; }
/* Ad frames there float like Home's panels (their contents are untouched). */
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) :is(.app-layout,.study-layout,.practice-test-layout) > .app-ad-rail .ad-slot {
  border:1px solid rgb(255 255 255 / .7); border-radius:18px; color:#4a5f55;
  background:linear-gradient(180deg,rgb(255 255 255 / .6),rgb(255 255 255 / 0) 36%),linear-gradient(168deg,#fafcfb,#edf2ef);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),0 0 0 1px rgb(220 236 228 / .12),0 2px 4px rgb(6 22 14 / .24),0 26px 44px -18px rgb(6 22 14 / .6);
}
/* Decoration never reaches past the right edge of the page (no horizontal scroll on phones). */
html[data-design="rainy"] .sticky-board { overflow-x:clip; }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .app-center { overflow-x:clip; }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .mobile-app-header { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgb(250 252 251 / .97); }
html[data-design="rainy"] .rainy-glass-canvas {
  position:fixed; top:0; height:100vh; height:100lvh; z-index:-1; display:block; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
html[data-design="rainy"].rainy-live .rainy-glass-canvas { opacity:1; }
html[data-design="rainy"]:not(.rainy-page) .rainy-glass-canvas { display:none; }

/* Text on the glass sits on a soft, static patch of condensation (like breath on the window), so
   dark type keeps at least 4.5:1 wherever it lands, over dark trees or pale sky. */
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) :is(.home-dashboard > .view-header .view-heading-copy,.page-bulletin-heading > div) { position:relative; isolation:isolate; }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard > .view-header .view-heading-copy::before,
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .page-bulletin-heading > div::before {
  content:""; position:absolute; z-index:-1; pointer-events:none; inset:-115% -36%;
  /* Uneven, like breath on the pane: a core that holds the text, a long feathered falloff (no edge
     against the dark trees), and two fainter lobes. */
  background:
    radial-gradient(closest-side at 46% 50%,rgb(236 243 239 / .8) 56%,rgb(236 243 239 / .62) 68%,rgb(236 243 239 / .38) 80%,rgb(236 243 239 / .15) 91%,rgb(236 243 239 / 0) 100%),
    radial-gradient(closest-side at 30% 62%,rgb(236 243 239 / .34),rgb(236 243 239 / 0)),
    radial-gradient(closest-side at 70% 38%,rgb(236 243 239 / .28),rgb(236 243 239 / 0));
}
@container paper-home (max-width:840px) {
  html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard > .view-header .view-heading-copy::before {
    inset:-34px -12px -34px -40px; background:rgb(236 243 239 / .9);
    -webkit-mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 12px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    -webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 12px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    mask-composite:intersect;
  }
}
@media (max-width:1180px) {
  html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .page-bulletin-heading > div::before {
    inset:-30px -10px -30px -40px; background:rgb(236 243 239 / .9);
    -webkit-mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 10px),transparent),linear-gradient(180deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    -webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 10px),transparent),linear-gradient(180deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-composite:intersect;
  }
}
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard > .view-header { color:var(--rainy-shore-ink); }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard > .view-header :is(h1,p,.eyebrow) { text-shadow:var(--rainy-shore-shadow); }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard > .view-header h1 { color:var(--rainy-shore-ink); }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard > .view-header p { color:var(--rainy-shore-muted); }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard > .view-header .eyebrow { color:#1f4a34; }

/* ------------------------------------------------------------------ panels */
/* Home's widgets float in front of the glass as calm, pale panels: opaque, so text never competes
   with the rain; a soft sheen from the overcast sky, and a shadow that lifts them off the pane. */
html[data-design="rainy"] .home-dashboard .home-widget {
  --text:#1b2e26; --muted:#4a5f55; --primary:#245a3f; --border:rgb(30 80 55 / .14);
  --surface:#f8fbf9; --surface-alt:#eef3f0; --ui-accent:#245a3f; --ui-accent-ink:#245a3f;
  --home-widget-radius:22px;
  --home-widget-border-color:rgb(255 255 255 / .7);
  --home-widget-shadow:inset 0 1px 0 rgb(255 255 255 / .95),0 1px 2px rgb(6 22 14 / .16),0 18px 34px -16px rgb(6 22 14 / .48);
  position:relative; isolation:isolate; color:var(--text);
  background:
    linear-gradient(180deg,rgb(255 255 255 / .6),rgb(255 255 255 / 0) 36%),
    linear-gradient(168deg,#fafcfb,#edf2ef);
}
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .home-dashboard .home-widget {
  --home-widget-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    0 0 0 1px rgb(220 236 228 / .12),
    0 2px 4px rgb(6 22 14 / .24),
    0 26px 44px -18px rgb(6 22 14 / .62);
}
html[data-design="rainy"] .home-dashboard .home-overview-panel { overflow:clip; }
html[data-design="rainy"] .home-dashboard .home-workspace-section[open] > summary,
html[data-design="rainy"] .home-dashboard .home-overview-panel.is-open .home-overview-header { border-bottom-color:rgb(30 80 55 / .1); }
html[data-design="rainy"] .home-dashboard :is(.home-workspace-section > summary,.home-overview-header) { color:var(--text); }
html[data-design="rainy"] .home-dashboard .home-library-content {
  --text:var(--rainy-ink); --muted:var(--rainy-muted); --primary:var(--rainy-accent); --surface:var(--rainy-sheet);
  --surface-alt:color-mix(in srgb,var(--rainy-accent) 6%,#eef3f0); --border:color-mix(in srgb,var(--rainy-accent) 20%,#c9d6cf);
  --ui-accent:var(--rainy-accent); --ui-accent-ink:var(--rainy-accent);
}
/* Focus rings: 3px, dark on the panels, light on the glass. */
html[data-design="rainy"] .home-dashboard :is(.home-study-row,.home-overview-panel) :is(button,a,select,input,[tabindex]):focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
html[data-design="rainy"] .home-dashboard .home-library > summary:focus-visible { outline:3px solid var(--primary); outline-offset:-5px; border-radius:18px; }
html[data-design="rainy"] .home-dashboard .home-widget .icon-button:hover:not(:disabled) { background:rgb(30 80 55 / .07); }
html[data-design="rainy"] .home-dashboard .home-intro-paper-detail { display:none; }

/* ------------------------------------------------------------------ studying and tests at the window */
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) .study-progress-row {
  border:1px solid rgb(255 255 255 / .7); border-radius:14px; padding:8px 14px;
  background:linear-gradient(180deg,rgb(255 255 255 / .6),rgb(255 255 255 / 0) 60%),linear-gradient(168deg,#fafcfb,#edf2ef);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),0 2px 4px rgb(6 22 14 / .2),0 14px 26px -14px rgb(6 22 14 / .5);
}
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) .study-hints { color:var(--rainy-shore-muted); text-shadow:var(--rainy-shore-shadow); }
/* The hint line sits on its own soft patch of condensation (drawn behind it, so layout is unchanged). */
html[data-design="rainy"]:where(.rainy-page,:has(#app > .study-layout),:has(#app > .practice-test-layout)) .study-hints { position:relative; isolation:isolate; }
html[data-design="rainy"]:where(.rainy-page,:has(#app > .study-layout),:has(#app > .practice-test-layout)) .study-hints::before {
  content:""; position:absolute; z-index:-1; pointer-events:none; inset:-12px -8%;
  background:radial-gradient(closest-side,rgb(236 243 239 / .88) 70%,rgb(236 243 239 / .45) 86%,rgb(236 243 239 / 0) 100%);
}
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) .study-hints :is(kbd,strong,b) { color:var(--rainy-shore-ink); }
html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) :is(.study-workspace,.practice-test-main) { box-shadow:0 0 0 1px rgb(220 236 228 / .12),0 2px 4px rgb(6 22 14 / .22),0 26px 44px -18px rgb(6 22 14 / .6); }

/* ------------------------------------------------------------------ bulletin: notes on the glass */
/* Frame and cork keep their padding and border widths (notes are placed from the cork's box). */
html[data-design="rainy"] .page-bulletin-frame { background:none; box-shadow:none; border-radius:40px; }
html[data-design="rainy"] .page-bulletin-frame::before { display:none; }
html[data-design="rainy"] .page-bulletin-cork {
  background:none; border-color:color-mix(in srgb,var(--rainy-accent) 16%,transparent); border-radius:34px;
  box-shadow:inset 0 0 40px color-mix(in srgb,var(--rainy-accent) 5%,transparent);
}
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .page-bulletin-cork {
  border-color:rgb(226 240 232 / .12);
  box-shadow:inset 0 0 46px rgb(226 240 232 / .04),0 0 0 1px rgb(6 22 14 / .05);
}
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .page-bulletin-heading h2 { color:var(--rainy-shore-ink); text-shadow:var(--rainy-shore-shadow); }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .page-bulletin-heading p { color:var(--rainy-shore-muted); text-shadow:var(--rainy-shore-shadow); }
html[data-design="rainy"] .page-bulletin-heading [data-add-sticky] {
  color:#1f4332; border:1px solid rgb(255 255 255 / .6); border-radius:999px; padding-inline:18px 20px;
  background:linear-gradient(180deg,#f4faf6,#d7e7de);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgb(30 80 55 / .12),0 2px 4px rgb(6 22 14 / .22),0 10px 22px -10px rgb(6 22 14 / .5);
}
html[data-design="rainy"] .page-bulletin-heading [data-add-sticky]:hover:not(:disabled) {
  background:linear-gradient(180deg,#ffffff,#e1efe7); border-color:rgb(255 255 255 / .85);
}
html[data-design="rainy"] .page-bulletin-heading [data-add-sticky] svg { color:#2f6b4c; }
html[data-design="rainy"] .page-bulletin-heading [data-add-sticky]:focus-visible { outline:3px solid var(--rainy-accent); outline-offset:3px; }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .page-bulletin-heading [data-add-sticky]:focus-visible { outline-color:var(--rainy-ring-glass); }
html[data-design="rainy"]:where(.rainy-home,:has(#app-content > .home-dashboard)) .page-bulletin-resize:is(:hover,:focus-visible) { outline:3px solid var(--rainy-ring-glass); outline-offset:3px; }

/* ------------------------------------------------------------------ touching the glass */
/* Dragging a fingertip across the glass never selects the page's text. */
html[data-design="rainy"].rainy-stirring, html[data-design="rainy"].rainy-stirring * { -webkit-user-select:none !important; user-select:none !important; }

/* ------------------------------------------------------------------ motion, contrast, print */
html[data-design="rainy"].reduce-motion .rainy-glass-canvas { transition:none; }
@media (prefers-reduced-motion:reduce) {
  html[data-design="rainy"] .rainy-glass-canvas { transition:none; }
}
@media (forced-colors:active) {
  html[data-design="rainy"] .rainy-glass-canvas, html[data-design="rainy"]::before { display:none; }
  html[data-design="rainy"]:where(.rainy-page,:has(#app-content > .home-dashboard),:has(#app > .study-layout),:has(#app > .practice-test-layout)) { background:Canvas; }
  html[data-design="rainy"] .home-dashboard .home-widget { background:Canvas; border:2px solid CanvasText; box-shadow:none; }
  html[data-design="rainy"] :is(.view-heading-copy,.page-bulletin-heading > div,.study-hints)::before { display:none; }
  html[data-design="rainy"] :is(.home-dashboard > .view-header,.page-bulletin-heading) :is(h1,h2,p,.eyebrow) { text-shadow:none; }
  html[data-design="rainy"] .page-bulletin-cork { border-color:CanvasText; }
}
@media print {
  html[data-design="rainy"], html[data-design="rainy"] body { background:#fff !important; }
  html[data-design="rainy"] .rainy-glass-canvas, html[data-design="rainy"]::before { display:none !important; }
  html[data-design="rainy"] .home-dashboard > .view-header :is(h1,p,.eyebrow) { color:#000; text-shadow:none; }
  html[data-design="rainy"] .home-dashboard .home-widget { background:#fff; border:1px solid #999; border-radius:10px; box-shadow:none; color:#000; }
  html[data-design="rainy"] :is(.view-heading-copy,.page-bulletin-heading > div)::before { display:none; }
}