/* NOTE: the old "html{visibility:hidden}" hack was removed. This page is public, so hiding it
until every script finished made slow loads look like a blank/frozen page. */
/* ---- horizontal-overflow guard (fixes right-side blank space after adding many circulars) ----
Grid/flex children default to min-width:auto, so one long unbroken title/URL in a circular card
stretches the whole page wider than the screen. That also pushes fixed items (filter island,
WhatsApp button) off the right edge, because they anchor to the widened layout viewport. */
html, body { max-width: 100%; overflow-x: clip; }
.card-grid, .card-grid > * { min-width: 0; max-width: 100%; }
#circularsGrid, #notesGrid { width: 100%; }
#circularsGrid *, #notesGrid * { overflow-wrap: anywhere; }
#circularsGrid img, #notesGrid img, #circularsGrid iframe { max-width: 100%; height: auto; }
#waFab { right: max(1.5rem, env(safe-area-inset-right)) !important; max-width: calc(100vw - 2rem); }
@media (max-width: 767px) { #waFab { right: max(1rem, env(safe-area-inset-right)) !important; } }
/* keep the last content clear of the fixed mobile bottom nav */
@media (max-width:767px){ main{padding-bottom:4.5rem} }
/* Type filter, subject drawer and toast styles now live centrally in
style.css (see "PAGE-SPECIFIC COMPONENTS" there), including their
dark-mode rules. Keeping a duplicate copy here — even an identical
one — makes it load AFTER style.css and win the cascade with its
light-only colours, which is what made the filter pills and the
drawer stay light in dark mode. Do not re-add these rules here;
edit style.css / input.css instead. */
/* Stacking fix: the sticky filter must always sit above the subject cards.
- The filter gets an explicit z-index (Tailwind's z-20 isn't guaranteed to be in the compiled CSS,
and without it the later, position:relative cards paint on top of the filter).
- The grid becomes its own stacking context (z-index:0), so nothing inside a card
(badges with z-10, hover transforms/shadows) can ever escape above the filter.
Layers: grid 0 < filter 30 < bottom nav 40 < modals/drawer. Colours stay in style.css. */
#fwFilterConsole { position: sticky; z-index: 30; }
#notesGrid { position: relative; z-index: 0; }
/* ---------------------------------------------------------------------------------
Desktop filter "island" (>=1024px).
The full filter console scrolls away normally. When it leaves the screen, a floating
glass pill slides out under the header showing the current filters + result count.
Click it and it springs open into the full controls.
Themed with CSS variables: light by default, dark via prefers-color-scheme
(same palette as style.css: violet accent, #171429 dark surfaces).
Tablet/mobile keep their existing behaviour (sticky console + bottom sheet).
--------------------------------------------------------------------------------- */
.fwi-wrap { display: none; }
@media all{
#fwFilterConsole { position: relative; top: auto !important; overflow-anchor: none; }
.fwi-wrap {
/* ---- light theme tokens ---- */
--fwi-bg: rgba(255,255,255,.80);
--fwi-bg-solid: #ffffff;
--fwi-ink: #1e1b4b;
--fwi-mute: #6b6890;
--fwi-line: rgba(124,58,237,.16);
--fwi-fill: rgba(124,58,237,.07);
--fwi-fill-hv: rgba(124,58,237,.13);
--fwi-accent: #7c3aed;
--fwi-accent-2: #6366f1;
--fwi-accent-ink: #ffffff;
--fwi-soft: rgba(124,58,237,.12);
--fwi-soft-ink: #5b21b6;
--fwi-track: rgba(124,58,237,.08);
--fwi-thumb: #ffffff;
--fwi-thumb-ink: #4c1d95;
--fwi-thumb-sh: 0 1px 2px rgba(76,29,149,.16), 0 4px 10px -2px rgba(76,29,149,.18);
--fwi-input-bg: rgba(255,255,255,.75);
--fwi-ph: #8f8bb0;
--fwi-ring: rgba(124,58,237,.22);
--fwi-hi: rgba(255,255,255,.9);
--fwi-sh: 0 14px 34px -14px rgba(76,29,149,.38), 0 2px 8px rgba(76,29,149,.10);
--fwi-sh-open: 0 30px 70px -20px rgba(76,29,149,.42), 0 4px 14px rgba(76,29,149,.12);
--fwi-chip-ink: #473f78;
display: flex; justify-content: center; position: fixed; left: 0; right: 0;
top: calc(var(--fw-header-h, 80px) + 12px); z-index: 35; pointer-events: none;
opacity: 0; visibility: hidden; transform: translateY(-16px) scale(.6); transform-origin: 50% 0;
transition: transform .35s cubic-bezier(.34,1.3,.5,1), opacity .15s ease, visibility 0s .35s;
}
@media (prefers-color-scheme: dark){
.fwi-wrap {
/* ---- dark theme tokens ---- */
--fwi-bg: rgba(23,20,41,.82);
--fwi-bg-solid: #171429;
--fwi-ink: #f3f1fb;
--fwi-mute: #a29fbd;
--fwi-line: rgba(168,85,247,.22);
--fwi-fill: rgba(255,255,255,.06);
--fwi-fill-hv: rgba(255,255,255,.12);
--fwi-accent: #a855f7;
--fwi-accent-2: #7c6cff;
--fwi-accent-ink: #ffffff;
--fwi-soft: rgba(168,85,247,.24);
--fwi-soft-ink: #e9d5ff;
--fwi-track: rgba(255,255,255,.06);
--fwi-thumb: rgba(168,85,247,.30);
--fwi-thumb-ink: #f5eeff;
--fwi-thumb-sh: inset 0 0 0 1px rgba(196,160,255,.38), 0 4px 14px -4px rgba(0,0,0,.6);
--fwi-input-bg: rgba(255,255,255,.05);
--fwi-ph: #8b86ae;
--fwi-ring: rgba(168,85,247,.30);
--fwi-hi: rgba(255,255,255,.07);
--fwi-sh: 0 18px 40px -14px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);
--fwi-sh-open: 0 32px 74px -18px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.45);
--fwi-chip-ink: #d0cde6;
}
}
.fwi-wrap.is-shown {
opacity: 1; visibility: visible; transform: none;
transition: transform .4s cubic-bezier(.34,1.3,.5,1), opacity .2s ease, visibility 0s;
}
.fwi {
pointer-events: auto; color: var(--fwi-ink); font-family: inherit;
width: min(520px, calc(100vw - 48px));
background: var(--fwi-bg);
-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); contain: layout style;
border: 1px solid var(--fwi-line); border-radius: 26px; overflow: hidden;
box-shadow: var(--fwi-sh), inset 0 1px 0 var(--fwi-hi);
transition: width .38s cubic-bezier(.3,1.1,.4,1), border-radius .3s ease, box-shadow .3s ease, border-color .2s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.fwi { background: var(--fwi-bg-solid); }
}
.fwi.is-open {
width: min(820px, calc(100vw - 48px)); border-radius: 32px;
box-shadow: var(--fwi-sh-open), inset 0 1px 0 var(--fwi-hi);
}
.fwi.is-open { background: var(--fwi-bg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fwi.is-filtered:not(.is-open) { border-color: var(--fwi-accent); }
.fwi button { font: inherit; color: inherit; }
.fwi :focus-visible { outline: 2px solid var(--fwi-accent); outline-offset: 2px; }
/* ---- collapsed bar ---- */
.fwi-row { display: flex; align-items: center; gap: 6px; padding: 6px; }
.fwi-bar {
flex: 1; min-width: 0; height: 52px; display: flex; align-items: center; gap: 12px;
padding: 0 8px 0 6px; border: 0; border-radius: 22px; background: none; cursor: pointer;
text-align: left; transition: background .2s;
}
.fwi-bar:hover { background: var(--fwi-fill); }
.fwi-ico {
position: relative; flex: none; width: 38px; height: 38px; border-radius: 14px;
display: grid; place-items: center; font-size: 15px; color: #fff;
background: linear-gradient(135deg, var(--fwi-accent), var(--fwi-accent-2));
box-shadow: 0 8px 16px -6px var(--fwi-accent), inset 0 1px 0 rgba(255,255,255,.28);
}
.fwi.is-filtered .fwi-ico::after {
content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px;
border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2.5px var(--fwi-bg-solid);
}
.fwi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.fwi-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fwi-mute); }
.fwi-sum { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwi-pill {
flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
border-radius: 999px; background: var(--fwi-soft); color: var(--fwi-soft-ink);
font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fwi-pill i { font-size: 11px; opacity: .85; }
.fwi-pill #fwiCount { display: inline-block; }
.fwi-pill-l { font-weight: 700; opacity: .75; }
.fwi-chev-wrap {
flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
background: var(--fwi-fill); transition: background .2s;
}
.fwi-bar:hover .fwi-chev-wrap { background: var(--fwi-fill-hv); }
.fwi-chev { font-size: 11px; color: var(--fwi-ink); transition: transform .3s ease; }
.fwi.is-open .fwi-chev { transform: rotate(180deg); }
.fwi-reset {
flex: none; width: 0; height: 40px; margin-left: -6px; padding: 0; border: 0; border-radius: 50%;
background: var(--fwi-fill); color: var(--fwi-ink); cursor: pointer; opacity: 0; visibility: hidden; overflow: hidden; font-size: 13px;
transition: width .22s ease, margin .22s ease, opacity .15s ease, background .12s, color .12s, visibility 0s .22s;
}
.fwi.is-filtered .fwi-reset { width: 40px; margin-left: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
.fwi-reset:hover { background: rgba(239,68,68,.14); color: #ef4444; }
.fwi-reset i { transition: transform .25s ease; }
.fwi-reset:hover i { transform: rotate(-200deg); }
/* ---- expanding panel ---- */
.fwi-panel {
display: grid; grid-template-rows: 0fr; visibility: hidden;
transition: grid-template-rows .28s cubic-bezier(.32,1,.4,1), visibility 0s .28s;
}
.fwi.is-open .fwi-panel {
grid-template-rows: 1fr; visibility: visible;
transition: grid-template-rows .36s cubic-bezier(.32,1.02,.4,1), visibility 0s;
}
.fwi-panel-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.fwi-body {
display: flex; flex-direction: column; gap: 12px; padding: 6px 20px 16px;
flex: 0 1 auto; min-height: 0; max-height: calc(100vh - var(--fw-header-h, 80px) - 96px - 76px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--fwi-line) transparent;
}
.fwi-body > * {
opacity: 0; transform: translateY(6px);
transition: opacity .1s ease, transform .1s ease;
}
.fwi.is-open .fwi-body > * {
opacity: 1; transform: none;
transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1);
transition-delay: calc(.04s + var(--d, 0) * .025s);
}
/* ---- search ---- */
.fwi-search { position: relative; }
.fwi-search > i.fa-magnifying-glass { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--fwi-accent); pointer-events: none; }
.fwi-search input {
width: 100%; height: 48px; padding: 0 46px 0 44px; border-radius: 16px; outline: 0;
border: 1px solid var(--fwi-line); background: var(--fwi-input-bg); color: var(--fwi-ink);
font: inherit; font-size: 14px; font-weight: 600; transition: border-color .2s, background .2s, box-shadow .2s;
}
.fwi-search input::placeholder { color: var(--fwi-ph); font-weight: 500; }
.fwi-search input::-webkit-search-cancel-button { display: none; }
.fwi-search input:focus { border-color: var(--fwi-accent); box-shadow: 0 0 0 4px var(--fwi-ring); }
.fwi-clear {
position: absolute; right: 10px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border: 0; border-radius: 50%;
background: var(--fwi-fill-hv); color: var(--fwi-ink); font-size: 11px; cursor: pointer; opacity: 0; transform: scale(.6); pointer-events: none;
transition: opacity .12s, transform .15s ease, background .12s;
}
.fwi-clear:hover { background: var(--fwi-soft); }
.fwi-clear.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* ---- segmented control (sliding thumb) ---- */
.fwi-seg { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; border-radius: 18px; background: var(--fwi-track); border: 1px solid var(--fwi-line); }
.fwi-seg::before {
content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 4);
border-radius: 13px; background: var(--fwi-thumb); box-shadow: var(--fwi-thumb-sh);
transform: translateX(calc(var(--i, 0) * 100%));
transition: transform .28s cubic-bezier(.3,1.2,.5,1);
}
.fwi-seg button {
position: relative; z-index: 1; height: 40px; border: 0; background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 7px;
font-size: 13px; font-weight: 700; color: var(--fwi-mute); transition: color .15s;
}
.fwi-seg button i { font-size: 13px; transition: transform .18s ease; }
.fwi-seg button:hover { color: var(--fwi-ink); }
.fwi-seg button[aria-pressed="true"] { color: var(--fwi-thumb-ink); }
.fwi-seg button[aria-pressed="true"] i { transform: scale(1.15); color: var(--fwi-accent); }
.fwi-seg .fwi-n { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--fwi-fill); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fwi-seg button[aria-pressed="true"] .fwi-n { background: var(--fwi-soft); color: var(--fwi-soft-ink); }
/* ---- filter groups + chips ---- */
.fwi-grp { display: flex; flex-direction: column; gap: 11px; padding: 11px 13px 13px; border-radius: 18px; background: var(--fwi-track); border: 1px solid var(--fwi-line); }
.fwi-lbl { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fwi-mute); }
.fwi-lbl i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; background: var(--fwi-soft); color: var(--fwi-soft-ink); }
.fwi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fwi-chip {
display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--fwi-line); background: var(--fwi-input-bg);
font-size: 12.5px; font-weight: 700; color: var(--fwi-chip-ink);
transition: background .12s, color .12s, border-color .12s, box-shadow .15s, transform .15s ease;
}
.fwi-tick { width: 0; overflow: hidden; opacity: 0; font-size: 10px; margin-right: 0; transition: width .18s ease, margin .18s ease, opacity .12s ease; }
.fwi-chip:hover { background: var(--fwi-fill-hv); color: var(--fwi-ink); border-color: var(--fwi-accent); transform: translateY(-1px); }
.fwi-chip:active { transform: scale(.94); }
.fwi-chip[aria-checked="true"],
.fwi-chip[aria-checked="true"]:hover {
background: linear-gradient(135deg, var(--fwi-accent), var(--fwi-accent-2));
color: var(--fwi-accent-ink); border-color: transparent;
box-shadow: 0 8px 16px -8px var(--fwi-accent);
}
.fwi-chip[aria-checked="true"] .fwi-tick { width: 11px; opacity: 1; margin-right: 6px; }
.fwi-chip[aria-disabled="true"] { opacity: .35; cursor: not-allowed; transform: none !important; }
/* ---- footer ---- */
.fwi-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.fwi-two .fwi-grp { min-width: 0; }
.fwi-foot {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 20px 16px; border-top: 1px solid var(--fwi-line);
background: var(--fwi-bg-solid); box-shadow: 0 -12px 20px -14px rgba(76,29,149,.20);
}
.fwi-resw { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--fwi-mute); }
.fwi-resw i { color: var(--fwi-accent); font-size: 15px; }
.fwi-acts { display: flex; gap: 8px; }
.fwi-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--fwi-line); border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; background: transparent; color: var(--fwi-ink); transition: background .12s, color .12s, transform .12s ease, filter .12s, box-shadow .15s; }
.fwi-btn i { font-size: 12px; }
.fwi-btn:hover { background: var(--fwi-fill-hv); }
.fwi-btn:active { transform: scale(.95); }
.fwi-btn:not(.fwi-apply):hover { color: #ef4444; border-color: rgba(239,68,68,.4); }
.fwi-btn.fwi-apply {
border-color: transparent; color: var(--fwi-accent-ink);
background: linear-gradient(135deg, var(--fwi-accent), var(--fwi-accent-2));
box-shadow: 0 10px 20px -8px var(--fwi-accent);
}
.fwi-btn.fwi-apply:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* ---- motion tuning: smoother, slightly slower (all island timings live here) ---- */
.fwi-wrap { --fwi-ease: cubic-bezier(.22,1,.36,1); transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .16s ease-out, visibility 0s .28s; }
.fwi-wrap:not(.is-shown) .fwi { transition-duration: .22s; } /* quick, smooth exit so it never lingers on a fast scroll */
.fwi-wrap.is-shown { transition: transform .7s var(--fwi-ease), opacity .45s ease, visibility 0s; }
.fwi { transition: width .65s var(--fwi-ease), border-radius .5s ease, box-shadow .5s ease, border-color .35s ease; }
.fwi-bar { transition: background .3s ease; }
.fwi-chev-wrap { transition: background .3s ease; }
.fwi-chev { transition: transform .55s var(--fwi-ease); }
.fwi-reset { transition: width .4s var(--fwi-ease), margin .4s ease, opacity .3s ease, background .3s ease, color .3s ease, visibility 0s .4s; }
.fwi-reset i { transition: transform .45s var(--fwi-ease); }
.fwi-panel { transition: grid-template-rows .5s var(--fwi-ease), visibility 0s .5s; }
.fwi.is-open .fwi-panel { transition: grid-template-rows .7s var(--fwi-ease), visibility 0s; }
.fwi-body > * { transition: opacity .2s ease, transform .2s ease; }
.fwi.is-open .fwi-body > * { transition: opacity .5s ease, transform .65s var(--fwi-ease); transition-delay: calc(.12s + var(--d, 0) * .05s); }
.fwi-foot { opacity: 0; transition: opacity .2s ease; }
.fwi.is-open .fwi-foot { opacity: 1; transition: opacity .5s ease .3s; }
.fwi-search input { transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.fwi-clear { transition: opacity .25s ease, transform .35s var(--fwi-ease), background .25s ease; }
.fwi-seg::before { transition: transform .55s var(--fwi-ease); }
.fwi-seg button { transition: color .3s ease; }
.fwi-seg button i { transition: transform .35s var(--fwi-ease); }
.fwi-chip { transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .35s var(--fwi-ease); }
.fwi-tick { transition: width .3s var(--fwi-ease), margin .3s ease, opacity .25s ease; }
.fwi-btn { transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--fwi-ease), filter .3s ease, box-shadow .35s ease; }
}
/* ---- island on phones: same pill, sized for a narrow screen ---- */
@media (max-width: 640px){
.fwi-wrap { top: calc(var(--fw-header-h, 64px) + 8px); }
.fwi, .fwi.is-open { width: calc(100vw - 20px); }
.fwi { border-radius: 24px; }
.fwi.is-open { border-radius: 26px; }
.fwi-row { padding: 5px; }
.fwi-bar { height: 48px; gap: 10px; padding: 0 6px 0 4px; }
.fwi-ico { width: 36px; height: 36px; border-radius: 13px; font-size: 14px; }
.fwi-sum { font-size: 13px; }
.fwi-pill { padding: 0 10px 0 9px; }
.fwi-pill-l { display: none; }
.fwi-body {
padding: 4px 14px 12px; gap: 10px;
max-height: calc(100vh - var(--fw-header-h, 64px) - 190px);
max-height: calc(100dvh - var(--fw-header-h, 64px) - 190px);
}
.fwi-search input { height: 46px; font-size: 16px; }
.fwi-seg button { flex-direction: column; gap: 3px; height: 54px; font-size: 11.5px; }
.fwi-seg .fwi-n { display: none; }
.fwi-two { grid-template-columns: 1fr; gap: 10px; }
.fwi-grp { padding: 9px 11px 11px; gap: 8px; }
.fwi-chips { gap: 6px; }
.fwi-chip { height: 32px; padding: 0 11px; font-size: 12.5px; }
.fwi-seg button { height: 50px; }
.fwi-foot { flex-wrap: wrap; gap: 8px; padding: 10px 14px 12px; }
.fwi-resw { width: 100%; font-size: 12.5px; }
.fwi-acts { width: 100%; }
.fwi-acts .fwi-btn { flex: 1; justify-content: center; height: 44px; }
}
/* phones: while open, sit above the fixed bottom nav (z-40) so Apply / Reset are never covered */
@media (max-width: 767px){
.fwi-wrap.is-up { z-index: 45; }
.fwi-body {
max-height: calc(100vh - var(--fw-header-h, 64px) - 190px - env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - var(--fw-header-h, 64px) - 190px - env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce){
.fwi-wrap, .fwi, .fwi *, .fwi *::before { transition-duration: .01ms !important; transition-delay: 0s !important; }
}
/* ---------------------------------------------------------------------------------
Premium motion for the subject drawer, cards and buttons.
Only timing / transform / opacity are set here; colours stay in style.css (dark mode).
--------------------------------------------------------------------------------- */
#subjectDrawer { transition: visibility 0s linear .3s; }
#subjectDrawer.is-open { transition-delay: 0s; }
/* Backdrop only fades. A live blur under a moving sheet makes phones stutter, so blur is desktop-only. */
#subjectDrawer .fw-drawer-backdrop {
-webkit-backdrop-filter: none; backdrop-filter: none;
transition: opacity .3s ease; will-change: opacity;
}
/* Closing is quick, opening is a soft decelerating glide (iOS-sheet style curve). */
#subjectDrawer .fw-drawer-panel {
transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
will-change: transform; backface-visibility: hidden;
}
#subjectDrawer.is-open .fw-drawer-panel {
transition: transform .46s cubic-bezier(.32,.72,0,1), opacity .3s ease;
}
@media (min-width: 1024px) {
#subjectDrawer .fw-drawer-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#subjectDrawer .fw-drawer-panel { transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
#subjectDrawer.is-open .fw-drawer-panel { transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
}
/* Resource rows rise in one after another (JS adds .fw-enter on open / tab switch only,
so background data refreshes never replay it while someone is reading). */
@keyframes fwDrawerRise {
from { opacity: 0; transform: translate3d(0, 12px, 0); }
to { opacity: 1; transform: none; }
}
#drawerBody.fw-enter .space-y-2 > *,
#drawerBody.fw-enter h4,
#drawerBody.fw-enter > .mt-5,
#drawerBody.fw-enter > p { animation: fwDrawerRise .4s cubic-bezier(.22,1,.36,1) backwards; }
#drawerBody.fw-enter .space-y-2 > :nth-child(1) { animation-delay: .10s; }
#drawerBody.fw-enter .space-y-2 > :nth-child(2) { animation-delay: .14s; }
#drawerBody.fw-enter .space-y-2 > :nth-child(3) { animation-delay: .18s; }
#drawerBody.fw-enter .space-y-2 > :nth-child(4) { animation-delay: .22s; }
#drawerBody.fw-enter .space-y-2 > :nth-child(5) { animation-delay: .26s; }
#drawerBody.fw-enter .space-y-2 > :nth-child(6) { animation-delay: .30s; }
#drawerBody.fw-enter .space-y-2 > :nth-child(7) { animation-delay: .33s; }
#drawerBody.fw-enter .space-y-2 > :nth-child(n+8) { animation-delay: .36s; }
.note-card { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .2s ease, background-color .2s ease; }
/* Buttons: quick hover, no 300ms tap delay / grey flash, instant pressed state */
.type-tab, .note-tab, .fw-filter-btn, .fw-sheet-close, .bookmark-btn, [data-action="open-subject"], [data-action="drawer-tab"] {
transition-duration: .12s; transition-timing-function: ease-out;
}
button, [data-action] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.type-tab:active, .note-tab:active, .fw-filter-btn:active, .bookmark-btn:active,
a[data-action="open-subject"].flex-1:active, button[data-action="open-subject"]:active,
button[data-action="drawer-tab"]:active, button[data-action="download"]:active,
button[data-action="share-subject"]:active, button[data-action="close-drawer"]:active {
transform: scale(.96); transition-duration: .05s;
}
@media (prefers-reduced-motion: reduce){
#subjectDrawer, #subjectDrawer *, .note-card, .type-tab, .note-tab, .fw-filter-btn { transition-duration: .01ms !important; transition-delay: 0s !important; }
#drawerBody.fw-enter * { animation: none !important; }
}