/* Self-hosted, not Google Fonts -- see fonts/ and HTML_HEAD's preload
links. Both Inter and Playfair Display ship from Google as variable
fonts: every weight declared in the old Google Fonts URL (Inter
400/500/600/700, Playfair 700/800) resolved to the exact same
physical file per language subset, confirmed by fetching that CSS
directly -- so hosting just the "latin" + "latin-ext" subset files
ourselves covers every weight this site uses, in only 4 files.
font-display: optional (not swap) is the actual fix for the
still-recurring "text disappears and reappears" report: a
frame-by-frame video (OpenCV again) showed it wasn't invisible text
at all -- it was the page's whole layout shifting, with case-card
text ghosted mid-reflow, at the exact moment the real web font
replaced a fallback font with different character metrics
(font-display: swap's whole job is to guarantee that swap happens,
however late). `optional` makes the browser decide almost
immediately: if the font preloaded fast enough to be ready before
first paint (self-hosted + , so no
cross-origin connection to Google is even in the critical path),
use it from the very first frame with no swap ever needed; if not,
stick with the fallback for this whole page view rather than
yanking the layout out from under already-rendered text later. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url('fonts/inter-latin.3100e775e8.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url('fonts/inter-latin-ext.34b9c504ca.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700 800;
font-display: optional;
src: url('fonts/playfair-latin.e0c764a8e9.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700 800;
font-display: optional;
src: url('fonts/playfair-latin-ext.42898ad49a.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--ink-navy: #0D1729;
--oxblood: #431720;
--slate: #24262A;
--paper: #F8F3EB;
--paper-raised: #FAF7F2;
--hairline: #DDD9D2;
--stone: #CBC5B8;
}
* { box-sizing: border-box; }
/* Reserves the vertical scrollbar's width permanently, whether or not a
given page actually needs to scroll. Without this, a page whose
content height sits right at the viewport-height threshold (common
here: paragraph text re-wrapping by a line or two once a web font
finishes loading is enough to tip it either way) shows a real,
visible horizontal shift the instant the scrollbar appears or
disappears -- everything centered on the page (the header, .wrap)
jumps sideways by the scrollbar's width, then jumps back once the
page settles. That's a Windows-specific complaint in particular:
Windows scrollbars take up real layout width, unlike macOS's overlay
scrollbars, which don't shift anything. Reserving the gutter always
costs the same few pixels of width every page already effectively
pays whenever it happens to scroll, so this doesn't change how any
page looks -- it just stops that cost from turning on and off. */
html { scrollbar-gutter: stable; }
/* Every navigation on this site is a full, classic multi-page reload --
deliberately (see the module docstring: "Entirely static HTML/CSS --
no server required"), not a single-page-app route change. A
frame-by-frame reading of a screen recording (extracted with OpenCV,
since a 30fps video can catch what the eye mostly can't) caught the
reported "page shakes / text disappears and reappears on every
navigation" as the browser's own cross-document paint happening in
view: one captured frame showed the masthead tagline gone entirely
while the nav bar was already solid -- different regions of the SAME
new page caught mid-paint at different completion points, normal
top-to-bottom rendering on a full reload, not a layout bug.
An earlier attempt papered over this with `@view-transition
{ navigation: auto; }`, opting into the browser's built-in
cross-document View Transition to cross-fade old/new page states
instead of a raw tear-down-and-repaint. It never fixed anything --
the tagline flicker was still there after shipping it, and removing
it here changed nothing else either. Retired instead of left in as
dead weight with its own failure mode (a cross-fade between two
states can show visible ghosting/doubling if literally anything
differs between them, which is arguably worse than a plain instant
swap for content that's supposed to be identical, like this
tagline).
Two more real, separate contributors got found and fixed after this
comment was first written, each confirmed the same way (OpenCV
frame-by-frame, not guessing): the Worker was stamping every asset
response -- including this site's own styles.css -- with
Cache-Control: no-store, forcing a full network re-fetch of the
render-blocking stylesheet on every single navigation (see
worker/index.js's asset handler; fixed to no-cache, which still
revalidates every time but allows a fast bodyless 304 instead).
And Google Fonts' own was, before that, a plain
render-blocking stylesheet on top of that -- switched to an async
load (preload + media="print" swap) so first paint didn't wait on
fonts.googleapis.com at all.
Even after both of those, the flicker was STILL there -- because it
was never actually about paint being delayed. A later, closer video
(zoomed on the exact pixels, not just "does it still happen") showed
this wasn't invisible text at all: it was the page's whole layout
shifting, with in-flight text visibly ghosted mid-reflow, at the
exact moment a web font swapped in over the fallback font that had
already been laid out with different character metrics. That's
`font-display: swap`'s entire job -- guarantee the swap eventually
happens, however late, however disruptive. See CSS's @font-face
rules above for the actual fix: self-hosted font files (Google
serves both this site's typefaces as variable fonts, so hosting
just 4 files covers every weight used anywhere), preloaded in
HTML_HEAD, with `font-display: optional` instead of `swap` -- if the
preload wins the race before first paint, which self-hosting makes
likely, the real font is what paints from frame one and there's no
later swap to cause a reflow; if it doesn't win, the page just keeps
the fallback for that view rather than yanking already-rendered text
out from under itself. */
body {
margin: 0;
background: var(--paper);
color: var(--slate);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700; color: var(--ink-navy); }
a { color: var(--oxblood); text-decoration: none; }
a:hover { text-decoration: underline; }
/* --- Masthead: the centered nameplate, on plain paper, as its own
"arrival" moment -- then the nav row (below) is a separate component,
bracketed by thin oxblood rules above and below (the "slimmed
sandwich"). Replaces both the original heavy masthead+nav sandwich and
the later hamburger-based compact bar -- this site went through both
and settled here. --- */
.masthead { text-align: center; padding: 1.4rem 1.5rem 1.5rem; }
.masthead h1 { font-size: 2.1rem; letter-spacing: 0.01em; }
.masthead h1 a { color: var(--ink-navy); text-decoration: none; }
.masthead h1 a:hover { color: var(--oxblood); }
.masthead .dek {
font-family: 'Inter', sans-serif;
color: #6B6E74;
font-size: 0.92rem;
margin-top: -0.7rem;
}
.masthead-rule-thin { height: 2px; background: var(--oxblood); }
/* The nav bar itself stays full-bleed (background runs edge to edge), but
its content is constrained to .site-header-inner so it lines up with
the page content below instead of looking wider than everything else --
the standard pattern (SCOTUSblog, Morning Brew, etc.): a full-width
color band with a max-width inner row.
760px matches .wrap, the ONE content width the entire site uses now.
This used to be 880px, matching a since-removed .wrap--wide that a
handful of pages (Current Issue, Past Issues, Practice Areas,
individual tag pages) used for their card grids/tile grids, on the
theory that 880px was "the widest column used anywhere" so the header
should match it. That was backwards twice over: first, it meant the
header visibly overhung ordinary paragraph text on every OTHER page
(home, every case page, account/my-cases) since those used the
narrower plain .wrap; narrowing the header to 760px fixed that, but
left the header narrower than the wide pages' card/tile grids instead
-- confirmed live at a real desktop width (not just the ~800px this
was originally checked at) as a real, visible ~60px gap between the
header's left edge and the grid's, not the "ordinary nav-narrower-
than-gallery" pattern it was assumed to read as. Fixed for good by
dropping wrap--wide entirely (see .wrap below) rather than chasing
another width to match -- one column width, everywhere, header
included, so there is no pair of things left to mismatch.
nav-links and site-header-utils sit side by side on ONE row by
default -- the traditional nav-left/utils-right pattern -- rather
than always stacked. Getting this to actually fit (and stay fit) took
several wrong turns worth recording:
1) A pass that measured the collapsed-icon-search version, saw ~128px
of slack, and shipped -- then reverted to a plain always-open
search WITHOUT re-measuring, assuming dropping "Home" alone had
freed enough room. It hadn't (~771px combined vs ~712px available,
confirmed live) -- the always-open box is wider than the icon it
replaced, by more than "Home" was worth.
2) The fix for that was verified against the button reading "Log
In" -- the state nobody is actually looking at once they have an
account. "My Account" is 38px wider, which alone pushed the row
back over by ~24px for every logged-in visitor. Re-verified
against "My Account" specifically and closed it with real margin
(~35px, not another single-digit near-miss): tighter nav-link
gap, a smaller nav font-size (0.82rem -> 0.74rem, meaningful
leverage since it scales all 4 links at once), and tighter button
padding throughout.
3) justify-content: space-between (removed below) then put that
entire 35px of margin in exactly one place: the gap between
nav-links and site-header-utils, since those are the row's only
two flex items and space-between dumps ALL leftover space into
the gaps between items. That made the space around the divider
visibly lopsided -- tight after it, wide before it. Switched to
flex-start so both clusters sit adjacent using only the declared
0.6rem gap (confirmed live: exactly 13px on both sides of the
divider), and the 35px of safety margin now lands after "My
Account" at the row's end instead -- unremarkable empty space
against the navy background, rather than a gap next to content.
Every number above was confirmed with getBoundingClientRect on the
live production page, not estimated -- three rounds of shipping an
estimate that turned out wrong is what makes that non-negotiable now.
The stacked, centered treatment below only applies under the 820px
breakpoint, where the two clusters genuinely can't fit together
regardless of any of this. */
.site-header { background: var(--ink-navy); }
.site-header-inner {
max-width: 840px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.5rem 0.6rem;
padding: 0.7rem 1.5rem;
}
/* font-size trimmed here too (0.82rem -> 0.74rem), not just gaps: the
fit was verified against "Log In" (65px) and shipped, but the button
reads "My Account" (103px -- 38px wider) for every visitor who's
actually logged in, which is the state that matters most and the one
nobody checked. That 38px alone pushed the row over by ~24px even
after the previous round of trims. Closed it with real margin this
time (~35px, not another single-digit near-miss), verified against
"My Account" specifically, not "Log In" -- see .login-btn below.
gap widened back up from that era's tight 1.2rem to 2.4rem once the
inline search box was replaced with a plain "Search" nav tab
(see site_header_html()): removing the box's input+button freed
~150px that all landed in one place (the row uses margin-left: auto
on .site-header-utils, so ALL unused width becomes a single gap
before the divider) -- confirmed live via getBoundingClientRect, the
same way as everything else in this comment. A 151px void read as
broken; spreading roughly half of it back into the nav-link gaps
leaves a normal-looking ~36px gap before the divider even in the
wider "My Account" state, instead of an empty void or, the other
option considered, shrinking the header narrower than the page's
content -- rejected because matching header width to .wrap's width
everywhere is exactly what points 1-3 above spent three rounds
getting right; deliberately reintroducing a mismatch to fix a
spacing issue would trade one visible bug for another. */
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* nowrap is load-bearing, not cosmetic: without it, a two-word link
("Current Issue") breaks internally onto two lines the moment the ROW
runs out of room, instead of the whole link wrapping as one unit --
confirmed live, and it looked like the header was just broken rather
than responsively wrapping. The stack-breakpoint media query below is
what actually handles narrow widths: whole links drop to a second
line as complete units, each staying intact. */
.nav-links a { color: var(--paper); white-space: nowrap; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.current { color: #fff; border-bottom-color: var(--oxblood); }
/* margin-left: auto on this whole box (not flex: 1, not a per-button
margin) is deliberate: it pushes the ENTIRE search/login group to
.site-header-inner's right edge as one unit, landing one single
bigger gap in one place -- between "My Cases" and the divider --
reading as two groups (navigate, then act) rather than a stray
uneven space. Everything INSIDE this box then uses the exact same
gap as .nav-links, so divider-to-search, search-to-Find, and
Find-to-Login all match Current-Issue-to-Past-Issues, by request --
confirmed live with a first version that instead put margin-left:
auto on just .login-btn: technically correct on the right edge, but
it meant Find sat right next to the divider while Login sat off by
itself with a huge gap in front of it, which read as broken rather
than as two intentional groups. */
.site-header-utils { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-left: auto; }
/* Below this, nav-links + utils no longer fit their real combined width
in what the 760px column leaves after padding -- verified on the
live page, not guessed. Stack each into its own centered, full-width
row instead of letting them wrap mid-line. */
/* The hamburger toggle exists only on phones. On desktop it is display:none,
so the row above is exactly what it was before. */
.nav-toggle { display: none; }
/* Desktop: the tabs spread across the whole space between the left edge and the account button, at a larger size, so the bar
has no empty stretch before the divider. The owner's extra "Invitations" tab (shown only to the admin account) brings that
account to six tabs, the same as the widest bar anyone else saw before, so the type is the same size for everyone. */
@media (min-width: 821px) {
.nav-links { flex: 1 1 auto; justify-content: space-between; padding-right: 0.8rem; }
}
/* the larger type only where six tabs still fit on one row */
@media (min-width: 921px) {
.nav-links { font-size: 0.82rem; }
}
@media (max-width: 820px) {
/* Collapsed, the navy bar disappears entirely: the nav collapses to zero
height and the toggle floats in the top-left corner of the masthead
(absolute against body, since neither the nav nor its row is
positioned). Opening it brings back the full navy panel. */
body { position: relative; }
.site-header-inner { flex-wrap: wrap; justify-content: center; padding-block: 0; }
.nav-toggle {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 2.5rem; left: 0.6rem; z-index: 5;
width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
color: var(--ink-navy); cursor: pointer;
}
.nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px;
transition: transform 0.15s ease, background 0.15s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
.header-divider { display: none; }
.site-header:not(.menu-open) { background: transparent; }
.site-header:not(.menu-open) + .masthead-rule-thin { display: none; }
.nav-links, .site-header-utils { display: none; width: 100%; margin-left: 0; }
.site-header.menu-open .site-header-inner { padding-top: 0.2rem; }
.site-header.menu-open .nav-links { display: flex; flex-direction: column; gap: 0; }
.site-header.menu-open .site-header-utils { display: flex; padding: 0.9rem 0 0.9rem; }
.nav-links a {
padding: 0.8rem 0; font-size: 0.82rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.nav-links a.current { color: #fff; border-bottom-color: var(--oxblood); }
.site-header-utils .login-btn { width: 100%; text-align: center; padding: 0.7rem 0.7rem; }
}
.login-btn {
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
background: var(--oxblood);
padding: 0.45rem 0.7rem;
border-radius: 4px;
white-space: nowrap;
}
.login-btn:hover { background: #5a1f2b; text-decoration: none; }
/* Two buttons always ship in the HTML (see site_header_html()) so which
one is visible is a pure CSS switch, not a JS text/href mutation after
paint. html.scotx-known-loggedin is added by a synchronous script at
the very top of -- before any body content exists to paint --
reading the same localStorage flag the old approach read from a body
script. That's the actual fix for the "Log In" flash confirmed on
video: a body-level script, however early and synchronous, still runs
after the browser has something it COULD paint (the button's default
markup); a head-level script gates what gets rendered in the first
place, so there's never a wrong state to be visible. The /api/me
fetch below still corrects the class if the optimistic guess was
stale (session expired elsewhere, etc.) -- same as before, just via
classList instead of textContent/href. */
#scotx-account-btn { display: none; }
html:not(.scotx-admin) #scotx-inv-tab { display: none; }
html.scotx-known-loggedin #scotx-login-btn { display: none; }
html.scotx-known-loggedin #scotx-account-btn { display: inline-block; }
.header-divider { width: 1px; height: 1.5rem; background: #3A4356; }
/* Each page's own H1, sitting inside .wrap right below the header --
replaces the info the old masthead nameplate used to carry (tagline,
issue date / page label). */
.page-lead { padding: 2.1rem 0 0.3rem; }
.page-lead .page-kicker {
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oxblood);
font-weight: 700;
margin-bottom: 0.4rem;
}
.page-lead .page-title { font-size: 2.1rem; margin: 0; line-height: 1.2; }
.page-lead .page-subtitle {
font-family: 'Inter', sans-serif;
color: #6B6E74;
font-size: 0.98rem;
margin: 0.5rem 0 0;
}
.wrap { max-width: 840px; margin: 0 auto; padding: 0 1.5rem; }
.wrap.wrap-wide, .site-header-inner.wide { max-width: 1140px; }
.back-link {
display: inline-block;
margin: 2rem 0 0;
font-size: 0.9rem;
font-weight: 600;
}
section.group { margin-top: 3.2rem; }
section.group:first-of-type { margin-top: 2.6rem; }
.week-line { margin: 1.6rem 0 0; }
.week-line-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6E74; }
.week-line-counts { font-size: 1.05rem; color: var(--ink-navy); margin-top: 0.25rem; }
.group-title {
font-size: 1.5rem;
margin: 0 0 0.3rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(--oxblood);
}
.group-note {
font-size: 0.88rem;
color: #6B6E74;
margin: 0.5rem 0 1.6rem;
font-style: italic;
}
.empty-state {
color: #6B6E74;
font-style: italic;
padding: 0.5rem 0 1rem;
}
.case-card {
padding: 1.7rem 0;
border-top: 1px solid var(--hairline);
}
.case-card:first-of-type { border-top: none; }
/* --- Search page (search.html) --- */
.search-intro {
margin: 1.4rem 0 2rem;
padding: 1.3rem 1.5rem;
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-radius: 4px;
}
.search-intro h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.search-intro p { margin: 0 0 0.7rem; color: var(--slate); font-size: 0.94rem; }
.search-intro p:last-child { margin-bottom: 0; }
.search-intro .search-coverage { font-size: 0.85rem; color: #6B6E74; }
.search-page-input {
width: 100%;
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
padding: 0.8rem 1rem;
border: 1px solid var(--hairline);
border-radius: 4px;
background: var(--paper-raised);
color: var(--slate);
margin-bottom: 1.5rem;
}
.search-page-input::placeholder { color: #8892A3; }
.search-page-input:focus { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.search-result-authorities { font-size: 0.84rem; color: #6B6E74; }
.case-kicker {
font-size: 0.74rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--oxblood);
font-weight: 700;
margin-bottom: 0.35rem;
}
.case-kicker .sep { color: #B9AEA9; margin: 0 0.45em; font-weight: 400; }
.case-card h3 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 1.15rem;
letter-spacing: 0.01em;
margin: 0 0 0.55rem;
line-height: 1.4;
}
.case-card h3 a { color: var(--ink-navy); }
.case-card h3 a:hover { color: var(--oxblood); }
.tags { margin: 0 0 0.7rem; }
.tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; margin: 0 0 0.35rem; }
.tags-row .tags { margin: 0; }
.tags-row .case-actions { margin: 0; align-items: center; }
.search-oa { margin: 0.7rem 0 0; padding: 0.6rem 0.8rem; background: var(--paper-raised); border-left: 3px solid var(--oxblood); border-radius: 3px; font-size: 0.9rem; line-height: 1.55; color: var(--slate); }
.search-oa .search-oa-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--oxblood); margin-right: 0.4rem; }
.search-oa mark { background: #F3E3C3; color: inherit; padding: 0 1px; }
.search-oa a { font-variant-numeric: tabular-nums; margin-right: 0.3rem; }
.tag {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--oxblood);
border: 1px solid var(--oxblood);
border-radius: 3px;
padding: 0.12rem 0.5rem;
margin: 0 0.35rem 0.35rem 0;
}
a.tag:hover { background: var(--oxblood); color: var(--paper); text-decoration: none; }
.tag-page-header { padding: 2.2rem 0 0.4rem; }
.tag-page-header .case-kicker { font-size: 0.8rem; }
.tag-page-header h1 { font-size: 2rem; margin: 0.3rem 0 0.3rem; }
.tag-page-header p { color: #6B6E74; font-size: 0.92rem; margin: 0 0 1.6rem; }
.summary-text { margin: 0 0 0.6rem; color: var(--slate); }
.issue-list {
list-style: none;
margin: 0 0 0.7rem;
padding: 0;
}
.issue-list li {
position: relative;
padding: 0 0 0.55rem 1.15rem;
color: var(--slate);
}
.issue-list li:last-child { padding-bottom: 0; }
.issue-list li::before {
content: "\2014";
position: absolute;
left: 0;
color: var(--oxblood);
font-weight: 700;
}
.read-more { font-size: 0.9rem; font-weight: 600; }
.read-more::after { content: " \2192"; }
.oneliner-list { list-style: none; margin: 0; padding: 0; }
.oneliner-list li {
padding: 0.85rem 0;
border-top: 1px solid var(--hairline);
font-size: 0.98rem;
}
.oneliner-list li:first-child { border-top: none; }
.oneliner-list .case-num { font-weight: 700; color: var(--ink-navy); }
.oneliner-list .disposition { color: #52555C; }
.oneliner-list .statement-flag { color: var(--oxblood); font-size: 0.88rem; font-style: italic; }
.subgroup { margin: 1.7rem 0 0; }
.subgroup:first-of-type { margin-top: 0; }
.subgroup-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--oxblood);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 0.3rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--oxblood);
}
footer {
margin-top: 4rem;
padding: 2rem 1.5rem 3rem;
border-top: 1px solid var(--hairline);
text-align: center;
color: #8A8D93;
font-size: 0.82rem;
}
footer div + div { margin-top: 0.35rem; }
/* --- Case detail page --- */
.detail-header { padding: 2.2rem 0 0; }
.court-summaries-link { font-size: 0.88rem; color: #6B6E74; margin: 0.2rem 0 1.4rem; }
.last-update { font-size: 0.85rem; color: #6B6E74; margin: 0.1rem 0 0.5rem; }
.detail-header .case-kicker { font-size: 0.8rem; }
.detail-header h1 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 1.65rem;
letter-spacing: 0.008em;
margin: 0.3rem 0 0.9rem;
line-height: 1.4;
}
.docket-link {
display: inline-block;
font-size: 0.88rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.full-caption {
font-size: 0.8rem;
color: var(--muted, #6b6b6b);
letter-spacing: 0.02em;
margin: 0.2rem 0 0.6rem;
line-height: 1.45;
max-width: 46rem;
}
.summary-box {
background: var(--paper-raised);
border-left: 4px solid var(--oxblood);
padding: 1.4rem 1.6rem;
margin: 1.4rem 0 2.2rem;
font-size: 1.04rem;
border-radius: 0 4px 4px 0;
}
.summary-box .label {
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--oxblood);
font-weight: 700;
margin-bottom: 0.5rem;
display: block;
}
.breakdown h2 {
font-size: 1.25rem;
margin: 2.1rem 0 0.7rem;
padding-top: 0.3rem;
}
.breakdown h2:first-child { margin-top: 0; }
.section-toggle { margin: 0; padding: 0.7rem 0; border-top: 1px solid #E3DACF; }
.section-toggle:last-child { border-bottom: 1px solid #E3DACF; }
.section-toggle > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.6rem; }
.section-toggle > summary::-webkit-details-marker { display: none; }
.section-toggle > summary::before {
content: ""; flex-shrink: 0; align-self: center; width: 0; height: 0;
border-left: 0.5rem solid var(--oxblood); border-top: 0.32rem solid transparent; border-bottom: 0.32rem solid transparent;
transition: transform 0.15s ease;
}
.section-toggle[open] > summary::before { transform: rotate(90deg); }
.section-toggle > summary h2 { margin: 0; padding: 0; font-size: 1.15rem; }
.section-toggle > summary:hover h2 { color: var(--oxblood); }
.section-toggle > summary + * { margin-top: 0.6rem; }
.subgroup > summary h3 { text-transform: none; letter-spacing: normal; font-size: 1.05rem; margin: 0; padding: 0; color: var(--ink-navy); }
.subgroup-count { color: var(--slate); font-weight: normal; }
.subgroup { padding: 0.45rem 0; }
.section-toggle h3 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 1.3rem 0 0.4rem; }
.case-no { font-size: 0.92rem; letter-spacing: 0.03em; color: var(--slate); margin: -0.3rem 0 0.9rem; }
.vote-joined { margin: 0 0 0.6rem; }
.section-toggle h4 { font-size: 0.98rem; margin: 1rem 0 0.3rem; color: var(--ink-navy); }
.vote-list { list-style: none; padding-left: 0.2rem; margin: 0 0 0.6rem; }
.vote-list li { padding: 0.15rem 0; }
.vote-none { margin: 0 0 0.6rem; color: var(--slate); font-size: 0.92rem; }
.record-writings { margin: 0.35rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.oral-argument-hint { font-size: 0.85rem; color: var(--slate); font-weight: normal; }
.breakdown p { margin: 0 0 1rem; }
.breakdown ol, .breakdown ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.breakdown li { margin-bottom: 0.5rem; }
.breakdown strong { color: var(--ink-navy); }
.breakdown p.party { margin: 0 0 0.55rem; }
.breakdown p.issue-head { margin: 1.4rem 0 0.4rem; }
.breakdown p.issue-head:first-child { margin-top: 0; }
.breakdown ol.issues-ol { margin: 0 0 1rem; padding-left: 1.6rem; }
.footnotes li a:not(.fn-back) { color: var(--oxblood); text-decoration: underline; }
sup.fn { line-height: 0; margin-left: 1px; }
sup.fn a { color: var(--oxblood); font-weight: 700; font-size: 0.72rem; text-decoration: none; padding: 0 0.12rem; }
sup.fn a:hover { text-decoration: underline; }
.oa-cite { font-size: 0.82rem; color: #6B6E74; }
.footnotes { margin-top: 1.4rem; padding-top: 0.7rem; border-top: 1px solid var(--hairline); font-size: 0.82rem; color: #6B6E74; }
.footnotes-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; }
.footnotes ol { margin: 0; padding-left: 1.3rem; }
.footnotes li { margin: 0 0 0.25rem; scroll-margin-top: 1rem; }
.footnotes li:target { background: rgba(67, 23, 32, 0.08); }
.footnotes .fn-back { color: var(--oxblood); text-decoration: none; margin-left: 0.3rem; }
sup.fn a[id] { scroll-margin-top: 4rem; }
.breakdown em { color: var(--slate); }
.records-box {
margin: 2.4rem 0 1rem;
padding: 1.3rem 1.5rem;
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-radius: 4px;
}
.records-box h4 {
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-navy);
margin: 0 0 0.2rem;
}
.docket-button {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
margin-top: 1.3rem; padding: 0.85rem 1.1rem;
background: rgba(67, 23, 32, 0.08); border: 1px solid rgba(67, 23, 32, 0.28); border-radius: 4px;
color: var(--oxblood); font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.docket-button:hover { background: rgba(67, 23, 32, 0.15); text-decoration: none; }
.docket-button-sub { font-weight: 400; font-size: 0.82rem; }
.records-box .records-sub { font-size: 0.82rem; color: #6B6E74; margin: 0 0 1rem; }
.records-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.records-table th {
text-align: left;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6B6E74;
font-weight: 600;
padding: 0 0 0.5rem;
border-bottom: 1px solid var(--hairline);
}
.records-table td { padding: 0.55rem 0; border-top: 1px solid var(--hairline); vertical-align: baseline; }
.records-table tr:first-child td { border-top: none; }
.records-table .record-court td:last-child strong { color: var(--ink-navy); }
.record-detail { font-size: 0.85rem; color: #4A4C52; font-weight: 400; }
.oa-points .oa-extra { display: none; }
.oa-points.oa-open .oa-extra { display: list-item; }
.oa-more-btn { margin-top: 0.4rem; font: inherit; font-size: 0.88rem; font-weight: normal; color: #6B6E74; background: none; padding: 0; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.oa-more-btn:hover { color: var(--oxblood); }
.argument-transcript { margin-top: 1rem; font-size: 0.9rem; }
.argument-transcript summary { cursor: pointer; display: inline-block; list-style: none; font-weight: bold; color: var(--oxblood); padding: 0.4rem 0.9rem; border: 1px solid var(--oxblood); border-radius: 4px; }
.argument-transcript summary::-webkit-details-marker { display: none; }
.argument-transcript summary:hover { background: var(--paper-raised); }
.argument-transcript[open] summary { margin-bottom: 0.4rem; }
.transcript-note { color: var(--slate); font-size: 0.82rem; margin: 0.6rem 0; line-height: 1.5; }
.transcript-body { max-height: 30rem; overflow-y: auto; padding: 0.4rem 0.8rem; border: 1px solid var(--rule, #E3DACF); border-radius: 4px; line-height: 1.55; }
.transcript-body p { margin: 0 0 0.7rem; }
.transcript-time { font-variant-numeric: tabular-nums; color: var(--oxblood); margin-right: 0.35rem; font-size: 0.82rem; }
.records-status { font-size: 0.92rem; margin: 0 0 0.9rem; padding: 0.55rem 0.8rem; background: #F3ECE6; border-left: 3px solid var(--oxblood); border-radius: 0 4px 4px 0; }
.records-table .record-date {
white-space: nowrap;
padding-right: 1.2rem;
color: #8A8D93;
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
width: 1%;
}
.update-note {
background: #F3ECE6;
border: 1px solid var(--oxblood);
border-radius: 4px;
padding: 0.9rem 1.2rem;
margin: 0 0 1.6rem;
font-size: 0.92rem;
}
/* --- Main (welcome) page --- */
.main-copy { margin-top: 2.6rem; }
.main-copy p { margin: 0 0 1.3rem; font-size: 1.05rem; }
.main-copy .update-note { margin: 0.4rem 0 1.6rem; }
.main-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.6rem 0 3rem; }
.cta-btn {
display: inline-block;
background: var(--oxblood);
color: var(--paper);
font-weight: 700;
font-size: 0.95rem;
padding: 0.75rem 1.4rem;
border-radius: 4px;
text-decoration: none;
}
.cta-btn:hover { background: #5a1f2b; text-decoration: none; }
.cta-btn--secondary {
background: none;
color: var(--oxblood);
border: 1px solid var(--oxblood);
padding: 0.7rem 1.35rem;
}
.cta-btn--secondary:hover { background: var(--oxblood); color: var(--paper); }
/* --- Home page (real landing page) --- */
.home-hero { text-align: center; padding: 3.2rem 0 2rem; }
.home-hero-title { font-size: 2.4rem; line-height: 1.18; margin: 0 auto 1.9rem; max-width: 720px; }
.home-hero-sub { font-size: 1.13rem; line-height: 1.6; color: var(--slate); max-width: 640px; margin: 0 auto 1.9rem; }
.home-cta { justify-content: center; margin: 0 0 0.4rem; }
.cta-loggedin { display: none; }
html.scotx-known-loggedin .cta-loggedin { display: flex; }
html.scotx-known-loggedin .cta-loggedout { display: none; }
.home-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
margin: 2.4rem 0 0.7rem;
}
.archive-stats { margin: 0.8rem 0 0.4rem; }
.home-stats-note { text-align: center; font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #6B6E74; font-size: 1.05rem; margin: 0 0 3rem; }
.home-stat { text-align: center; padding: 1.4rem 0.5rem; }
.home-stat + .home-stat { border-left: 1px solid var(--hairline); }
.home-stat-num { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 2.1rem; color: var(--ink-navy); line-height: 1.1; }
.home-stat-label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6E74; margin-top: 0.35rem; font-weight: 600; }
.plan-line { margin: 0 0 0.9rem; font-size: 0.97rem; }
.plan-badge { display: inline-block; background: var(--ink-navy); color: var(--paper); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 3px; margin-right: 0.5rem; vertical-align: 1px; }
.home-hero-title, .page-lead .page-title { text-wrap: balance; }
.home-section { margin: 0 0 3rem; }
.home-accuracy { border-top: 1px solid var(--hairline); padding-top: 2.8rem; }
.home-section-title { font-size: 1.5rem; margin: 0 0 1.4rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--oxblood); }
.home-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.home-feature { background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 6px; padding: 1.4rem 1.3rem; }
.home-feature h3 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 0.6rem; }
.home-feature p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--slate); }
.home-datafeature { display: grid; grid-template-columns: 1fr auto; gap: 1.6rem; align-items: center; background: var(--paper-raised); border: 1px solid var(--hairline); border-left: 3px solid var(--oxblood); border-radius: 4px; padding: 1.5rem 1.6rem; }
.home-datafeature h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.home-datafeature p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--slate); max-width: 560px; }
.home-datafeature .cta-btn { white-space: nowrap; }
.home-block { margin: 0 0 3.2rem; }
.home-block + .home-block, .home-strip { border-top: 1px solid var(--hairline); padding-top: 2.8rem; }
.home-section > .home-block:first-child .home-block-head h3::before { content: ""; display: block; width: 3rem; height: 3px; background: var(--oxblood); margin: 0 0 1rem; }
.home-block-eyebrow { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oxblood); font-weight: 700; margin: 0 0 0.4rem; }
.home-block-head h3 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.6rem; }
.home-block-head p { margin: 0 0 1.3rem; font-size: 1.02rem; line-height: 1.65; color: var(--slate); max-width: 720px; }
.home-block-cta { justify-content: flex-start; margin: 1.3rem 0 0; }
.home-bait { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: 0 0 1.4rem; }
.home-bait > div { padding: 1.1rem 0.8rem; text-align: center; }
.home-bait > div + div { border-left: 1px solid var(--hairline); }
.home-bait .n { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 2rem; color: var(--oxblood); line-height: 1.1; }
.home-bait .l { font-size: 0.82rem; color: #55585e; margin-top: 0.3rem; line-height: 1.4; }
.home-shot { margin: 0; }
.home-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--stone); border-left: 3px solid var(--oxblood); border-radius: 4px; box-shadow: 0 8px 26px rgba(13, 23, 41, 0.12); background: #fff; }
.home-shot figcaption { font-size: 0.82rem; color: #6B6E74; font-style: italic; margin: 0.55rem 0 0; }
.home-strip { background: var(--paper-raised); border: 1px solid var(--hairline); border-left: 3px solid var(--oxblood); border-radius: 4px; padding: 1.3rem 1.6rem; }
.home-strip h3 { font-size: 1.15rem; margin: 0 0 0.7rem; }
.home-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.home-strip li { font-size: 0.93rem; line-height: 1.55; color: var(--slate); }
.home-sample-label { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oxblood); font-weight: 700; margin: 0 0 0.5rem; }
.home-sample { background: var(--paper-raised); border: 1px solid var(--hairline); border-left: 3px solid var(--oxblood); border-radius: 4px; padding: 0.4rem 1.6rem 1.4rem; }
.home-sample .case-card { border-top: none; }
.home-note { background: var(--paper-raised); border: 1px solid var(--hairline); border-left: 3px solid var(--oxblood); border-radius: 4px; padding: 1.2rem 1.5rem; }
.home-note p { margin: 0 0 0.8rem; font-size: 0.97rem; }
.home-note p:last-child { margin-bottom: 0; }
.home-closing { text-align: center; padding: 0.5rem 0 1rem; }
.home-closing p { margin: 0 auto 1.4rem; max-width: 560px; font-size: 1rem; }
@media (max-width: 640px) {
.home-hero { padding-top: 2.2rem; }
.home-hero-title { font-size: 1.85rem; }
.home-features { grid-template-columns: 1fr; }
.home-datafeature { grid-template-columns: 1fr; }
.home-stats { grid-template-columns: repeat(2, 1fr); }
.home-stat:nth-child(3) { border-left: 0; }
.home-stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
.home-bait .n { font-size: 1.45rem; }
.home-bait .l { font-size: 0.72rem; }
.home-bait > div { padding: 0.9rem 0.3rem; }
.home-block-head h3 { font-size: 1.35rem; }
.home-strip ul { grid-template-columns: 1fr; gap: 0.6rem; }
.home-stat-num { font-size: 1.6rem; }
.home-stat-label { font-size: 0.68rem; }
}
/* --- Subscribe page --- */
.subscribe-copy { margin-top: 1rem; }
.subscribe-copy p { margin: 0 0 0.8rem; font-size: 1.05rem; }
.subscribe-embed {
/* No card chrome of our own here on purpose -- the beehiiv embed
already renders its own bordered, backgrounded card (navy header,
oxblood border), so wrapping it in another bordered/padded box just
stacks redundant framing on top of framing. beehiiv's own card is
narrower than this container and doesn't center itself within it
(its outer wrapper is width:100% with no effect from its `margin:
auto`, and the actual bordered card sits flush left inside that) --
flex+justify-content centers it regardless of what beehiiv's markup
does internally, without needing to know its width in advance. */
display: flex;
justify-content: center;
margin: 0.6rem 0 2.4rem;
}
/* --- Growth modal: account pitch on public pages (home, sample-issue,
case pages), shown as a real blocking modal (backdrop + centered card,
body scroll locked) once a marker element near the end of the page's
content scrolls into view. Ours, not beehiiv's -- links to signup.html,
never captures an email address directly, since access to the email
digest is meant to require an account, not a side-channel opt-in. */
.growth-modal-backdrop {
/* THE actual bug behind every "popup shows even when logged in" report:
`display: flex` was set unconditionally here. A class selector and
the browser's own default `[hidden] { display: none }` rule have
EQUAL specificity, and author stylesheets always win ties over the
user-agent default -- so this rule silently overrode the hidden
attribute's entire effect, regardless of what backdrop.hidden was
set to in JS. The JS was correct the whole time (confirmed
extensively: the backend always returned the right answer, and the
"show" branch never even ran when logged in) -- the element was
simply never actually hidden by CSS to begin with. display now
lives on the :not([hidden]) rule below instead of here, so the
hidden attribute's default behavior is never fought. */
position: fixed;
inset: 0;
background: rgba(13, 23, 41, 0.55);
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 600;
}
.growth-modal-backdrop:not([hidden]) {
display: flex;
}
.growth-modal {
position: relative;
width: 100%;
max-width: 420px;
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-top: 4px solid var(--oxblood);
border-radius: 8px;
padding: 2.1rem 1.9rem 1.9rem;
box-shadow: 0 16px 48px rgba(13, 23, 41, 0.4);
}
.growth-modal-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--ink-navy);
margin: 0 0 0.8rem;
}
.growth-modal-body {
font-size: 0.95rem;
color: var(--slate);
line-height: 1.55;
margin: 0 0 1.4rem;
}
.growth-modal-cta {
display: block;
text-align: center;
background: var(--oxblood);
color: #fff;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.95rem;
padding: 0.75rem 1.1rem;
border-radius: 4px;
text-decoration: none;
}
.growth-modal-secondary {
display: block;
text-align: center;
background: none;
color: var(--oxblood);
border: 1px solid var(--oxblood);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.9rem;
padding: 0.65rem 1.1rem;
border-radius: 4px;
text-decoration: none;
margin-top: 0.7rem;
}
.growth-modal-secondary:hover { background: var(--oxblood); color: #fff; }
.growth-modal-cta:hover { background: #5a1f2b; }
.growth-modal-tertiary-row {
display: flex;
justify-content: center;
align-items: baseline;
gap: 0.6rem;
margin-top: 0.9rem;
}
.growth-modal-tertiary {
color: var(--slate);
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
text-decoration: underline;
}
.growth-modal-tertiary:hover { color: var(--oxblood); }
.growth-modal-tertiary-sep { color: var(--hairline); font-size: 0.85rem; }
.subscribe-placeholder {
border: 1px dashed var(--stone);
border-radius: 4px;
padding: 1.6rem;
text-align: center;
color: #6B6E74;
font-style: italic;
font-size: 0.95rem;
}
.subscribe-fineprint {
font-size: 0.85rem;
color: #6B6E74;
margin: 0.9rem 0 0;
}
/* --- Login / signup (email + password, immediate access at signup) --- */
.auth-box {
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-radius: 6px;
padding: 1.8rem;
margin: 1.4rem 0 1.5rem;
max-width: 420px;
}
.auth-box h2 { font-size: 1.1rem; margin: 0 0 1.1rem; }
.auth-field { margin-bottom: 1.1rem; }
.auth-field label {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: var(--ink-navy);
margin-bottom: 0.35rem;
}
.auth-field input, .auth-field textarea {
width: 100%;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
padding: 0.55rem 0.7rem;
border: 1px solid var(--stone);
border-radius: 4px;
background: #fff;
color: var(--slate);
}
.auth-field textarea { resize: vertical; min-height: 5rem; }
.auth-field input:focus, .auth-field textarea:focus { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.auth-row { display: flex; gap: 1rem; }
.auth-row .auth-field { flex: 1; }
.auth-submit {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 700;
background: var(--oxblood);
color: #fff;
border: none;
border-radius: 4px;
padding: 0.7rem 1.4rem;
cursor: pointer;
}
.auth-submit:hover { background: #5a1f2b; }
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-checkbox {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin-bottom: 1.1rem;
font-size: 0.86rem;
color: var(--slate);
}
.auth-checkbox input { margin-top: 0.2rem; flex-shrink: 0; }
.auth-fineprint { font-size: 0.82rem; color: var(--slate); margin: 0 0 1rem; line-height: 1.5; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pref-label { font-size: 0.95rem; color: var(--ink-navy); }
.pref-switch {
display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.pref-state { font-size: 0.82rem; font-weight: bold; min-width: 1.6rem; text-align: right; color: var(--slate); }
.pref-switch[aria-checked="true"] .pref-state { color: var(--oxblood); }
.pref-track {
position: relative; width: 2.8rem; height: 1.5rem; border-radius: 999px;
background: #B9BCC2; transition: background 0.18s ease;
}
.pref-track::after {
content: ""; position: absolute; top: 0.19rem; left: 0.19rem; width: 1.12rem; height: 1.12rem;
border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
transition: transform 0.18s ease;
}
.pref-switch[aria-checked="true"] .pref-track { background: var(--oxblood); }
.pref-switch[aria-checked="true"] .pref-track::after { transform: translateX(1.3rem); }
.pref-switch:focus-visible .pref-track { outline: 2px solid var(--ink-navy); outline-offset: 2px; }
.pref-switch:disabled { opacity: 0.6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .pref-track, .pref-track::after { transition: none; } }
.auth-checkbox a { color: var(--ink-navy); }
.auth-status { margin-top: 1rem; font-size: 0.92rem; }
.auth-status.success { color: #2E6B3E; }
.auth-status.error { color: var(--oxblood); }
.auth-switch { font-size: 0.92rem; color: #6B6E74; }
/* --- Accuracy flag widget (bottom of every case page) --- */
.flag-widget {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--hairline);
}
.flag-toggle {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 700;
background: none;
border: 1px solid var(--oxblood);
color: var(--oxblood);
border-radius: 4px;
padding: 0.55rem 1.1rem;
cursor: pointer;
}
.flag-toggle:hover { background: var(--paper-raised); }
.flag-form { margin-top: 1rem; max-width: 480px; }
/* --- Case page header action: Add to My Cases --- */
.case-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem 1.2rem; margin-top: 0.9rem; }
.watch-toggle {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 700;
background: none;
border: 1px solid var(--hairline);
color: var(--ink-navy);
border-radius: 4px;
padding: 0.4rem 0.9rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
}
.watch-toggle:hover { background: var(--paper-raised); }
.watch-toggle[data-watching="true"] { border-color: var(--oxblood); color: var(--oxblood); }
.watch-toggle:disabled { opacity: 0.6; cursor: default; }
/* --- Flag review queue (admin-flags.html) -- same look as .auth-box,
but wider, since a flag's description text and two action buttons
need more room than a login/signup field ever does. --- */
.flag-card {
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-radius: 6px;
padding: 1.8rem;
margin: 1.4rem auto 1.5rem;
max-width: 640px;
}
.flag-card h2 { font-size: 1.1rem; margin: 0 0 1.1rem; }
.flag-card-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
/* --- My Cases (my-cases.html) --- */
.my-case-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1rem;
padding: 1.1rem 0;
border-bottom: 1px solid var(--hairline);
}
.my-case-row:first-child { border-top: 1px solid var(--hairline); }
.my-case-main { min-width: 0; }
.my-case-name {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.05rem;
color: var(--ink-navy);
text-decoration: none;
}
.my-case-name:hover { text-decoration: underline; }
.my-case-num { font-size: 0.78rem; color: #6B6E74; margin-bottom: 0.3rem; }
.my-case-tags { margin-top: 0.5rem; }
.my-case-unwatch {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
font-weight: 700;
background: none;
border: 1px solid var(--hairline);
color: #6B6E74;
border-radius: 4px;
padding: 0.4rem 0.8rem;
cursor: pointer;
white-space: nowrap;
}
.my-case-unwatch:hover { border-color: var(--oxblood); color: var(--oxblood); }
.my-case-unwatch:disabled { opacity: 0.6; cursor: default; }
/* --- Practice Areas index (tags/index.html) --- */
.tag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
padding-bottom: 3rem;
}
.tag-tile {
display: block;
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 1.2rem 1.3rem;
transition: border-color 0.15s ease;
}
.tag-tile:hover { border-color: var(--oxblood); text-decoration: none; }
.tag-tile-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.4rem;
}
.tag-tile-name-group { display: flex; align-items: baseline; gap: 0.45rem; }
.tag-tile-name {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.08rem;
color: var(--ink-navy);
}
/* Favorite-tag star -- pins a tag to the top of the grid for the
logged-in account (see /api/favorite-tag[s] in worker/index.js and
TAG_FAVORITES_SCRIPT below). Sits inside the tile's own , so its
click handler stops propagation to avoid also navigating to the tag
page -- see TAG_FAVORITES_SCRIPT. */
.tag-fav-toggle {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: var(--stone);
line-height: 1;
display: inline-flex;
align-items: center;
position: relative;
top: 1px;
}
.tag-fav-toggle:hover { color: var(--oxblood); }
.tag-fav-toggle[data-favorited="true"] { color: var(--oxblood); }
.tag-tile-count {
font-variant-numeric: tabular-nums;
font-size: 0.74rem;
font-weight: 700;
color: var(--oxblood);
white-space: nowrap;
}
.tag-tile-desc { font-size: 0.86rem; color: #6B6E74; line-height: 1.5; }
/* The "Suggest a new tag" tile -- dashed border marks it as an action,
not a browsable topic, so it doesn't read as just another practice
area in the grid. Opens .tag-modal below rather than expanding in
place -- an inline form used to push the whole grid open beneath it,
which read as a permanent fixture of the page rather than an action. */
.tag-tile--suggest {
border-style: dashed;
border-color: var(--stone);
cursor: pointer;
}
.tag-tile--suggest:hover { border-color: var(--oxblood); }
.tag-tile--suggest .tag-tile-name { color: var(--oxblood); }
/* Same backdrop-plus-card shape as .growth-modal-backdrop, but
dismissable (close button, backdrop click, Escape) -- unlike that
one, this isn't a hard gate. */
.tag-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(13, 23, 41, 0.55);
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 600;
}
.tag-modal-backdrop:not([hidden]) { display: flex; }
.tag-modal {
position: relative;
width: 100%;
max-width: 440px;
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-top: 4px solid var(--oxblood);
border-radius: 8px;
padding: 2.1rem 1.9rem 1.9rem;
box-shadow: 0 16px 48px rgba(13, 23, 41, 0.4);
}
.tag-modal-close {
position: absolute;
top: 0.9rem;
right: 0.9rem;
background: none;
border: none;
color: var(--slate);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
padding: 0.2rem;
}
.tag-modal-close:hover { color: var(--oxblood); }
.tag-modal-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--ink-navy);
margin: 0 0 1.2rem;
}
.suggest-tag-form .auth-field { margin-bottom: 0.8rem; }
.pa-welcome-body { margin: 0; font-size: 0.95rem; color: var(--slate); }
/* --- Sample issue (public preview a logged-out visitor lands on) --- */
.preview-banner {
background: var(--paper-raised);
border: 1px solid var(--oxblood);
border-radius: 6px;
padding: 1.5rem 1.7rem;
margin: 1.8rem 0 2rem;
text-align: center;
}
.preview-banner p { margin: 0 0 1.1rem; font-size: 1.02rem; }
.preview-banner .main-cta { justify-content: center; margin: 0; }
/* --- Notice banner (render_notice_banner): a compact single-line-ish
strip, distinct from .preview-banner above -- no centered button row,
just one flowing paragraph with inline text links, so it reads as a
quiet nudge rather than a block of its own. --- */
.notice-banner {
background: var(--paper-raised);
border: 1px solid var(--hairline);
border-left: 3px solid var(--oxblood);
border-radius: 4px;
padding: 0.85rem 1.2rem;
margin: 1.6rem 0 1.8rem;
}
.notice-banner p { margin: 0; font-size: 0.92rem; color: var(--slate); }
/* --- Archive index --- */
.archive-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.archive-year { font-size: 1.35rem; margin: 2.4rem 0 0; padding-bottom: 0.4rem; border-bottom: 2px solid var(--oxblood); }
.archive-year:first-of-type { margin-top: 1.6rem; }
.archive-list li {
padding: 1.1rem 0;
border-top: 1px solid var(--hairline);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.archive-list li:first-child { border-top: none; }
.archive-list .archive-date { font-size: 1.05rem; font-weight: 700; }
.archive-list .archive-date a { color: var(--ink-navy); }
/* Marks the top row of the Newsletters list as the latest one (there is no separate "Current Issue" tab anymore). */
.archive-current-badge {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--oxblood);
border: 1px solid var(--oxblood);
border-radius: 3px;
padding: 0.1rem 0.45rem;
margin-right: 0.6rem;
vertical-align: 2px;
}
.archive-list .archive-counts { color: #6B6E74; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 600px) {
.masthead h1 { font-size: 1.7rem; }
.page-lead .page-title { font-size: 1.7rem; }
body { font-size: 16px; }
.archive-list li { flex-direction: column; gap: 0.2rem; }
}
/* --- SCOTX Statistics page --- */
.stats-lead { font-size: 1.08rem; line-height: 1.6; color: var(--slate); margin: 0 0 1.4rem; max-width: 680px; }
.stats-controls {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem 1rem;
background: #FBF7F3; border: 1px solid var(--hairline); border-radius: 4px; padding: 1rem 1.1rem 1.1rem; margin: 0;
}
.stats-ctl { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.stats-ctl[hidden] { display: none; }
.stats-ctl-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6E74; font-weight: 600; }
.stats-select {
font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--oxblood);
appearance: none; -webkit-appearance: none; width: 100%; min-height: 46px;
padding: 0.6rem 2.4rem 0.6rem 0.9rem; border: 1.5px solid var(--oxblood); border-radius: 4px; cursor: pointer;
background-color: #F6EEEA;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23431720' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 0.95rem center;
transition: background-color 0.15s ease;
}
.stats-select:hover { background-color: #EFE1DB; }
.stats-select:focus { background-color: #fff; }
.stats-select option { font-weight: 400; color: var(--ink-navy); background: #fff; }
.stats-select:focus-visible, .stats-tabs button:focus-visible { outline: 3px solid rgba(67, 23, 32, 0.35); outline-offset: 1px; }
.stats-rulesline:empty { display: none; }
.stats-asof { font-size: 0.9rem; color: var(--slate); margin: 0.9rem 0 1.3rem; line-height: 1.5; }
.stats-lede { font-size: 0.95rem; color: var(--slate); margin: -0.2rem 0 1rem; line-height: 1.5; }
.stats-rulesline { margin-bottom: 1.6rem; }
.stats-asof strong { color: var(--ink-navy); }
.stats-rulesline { font-size: 0.86rem; color: #55585e; margin: 0 0 1.2rem; line-height: 1.5; }
.stats-titlebar .page-lead { text-align: center; }
.stats-titlebar .page-title { margin-bottom: 0.4rem; }
.stats-titlebar { margin-bottom: 1rem; }
.stats-main { min-width: 0; }
.stats-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 2.2rem; align-items: start; margin: 0 0 1rem; }
.stats-tabs {
position: sticky; top: 1rem; display: flex; flex-direction: column; overflow: hidden;
background: #EEE3DF; border: 1px solid var(--oxblood); border-radius: 4px;
}
.stats-tabs button {
font: inherit; font-size: 0.95rem; font-weight: 600; background: transparent; border: 0; cursor: pointer;
padding: 0.85rem 1.1rem; color: var(--oxblood); text-align: left; width: 100%;
}
.stats-tabs button + button { border-top: 1px solid rgba(67, 23, 32, 0.25); }
.stats-tabs button:hover { background: #E2D0CB; }
.stats-tabs button[aria-selected="true"] { background: var(--oxblood); color: #fff; }
.stats-tabs button:focus-visible { outline-offset: -3px; outline-color: #fff; }
@media (max-width: 900px) {
.stats-layout { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.stats-tabs { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
.stats-tabs::-webkit-scrollbar { display: none; }
.stats-tabs button { white-space: nowrap; width: auto; flex: 1 0 auto; text-align: center; font-size: 0.85rem; padding: 0.8rem 0.75rem; }
.stats-tabs button + button { border-top: 0; border-left: 1px solid rgba(67, 23, 32, 0.25); }
}
.stats-layout.dictview .stats-controls, .stats-layout.dictview .stats-filter-toggle, .stats-layout.dictview .stats-asof { display: none !important; }
.stats-inline .stats-ctl-label + .stats-select + .stats-ctl-label { margin-left: 1rem; }
td.dbar { white-space: nowrap; }
.dtrack { display: inline-block; width: 84px; height: 8px; background: #EFE8DA; border-radius: 4px; vertical-align: middle; margin-right: 0.6rem; overflow: hidden; }
.dfill { display: block; height: 100%; background: var(--oxblood); }
.stats-view h2 { font-size: 1.3rem; margin: 0 0 0.3rem; }
.stats-view .stats-sub { font-size: 0.93rem; color: #55585e; margin: 0 0 1.1rem; line-height: 1.5; max-width: 680px; }
.stats-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: 0 0 1.6rem; }
.stats-tile { padding: 1rem 0.5rem; text-align: center; }
.stats-tile + .stats-tile { border-left: 1px solid var(--hairline); }
.stats-tile .n { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.8rem; color: var(--ink-navy); line-height: 1.1; }
.stats-tile .l { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6B6E74; margin-top: 0.3rem; font-weight: 600; }
.stats-tile.key .n { color: var(--oxblood); }
.stats-scroll { overflow-x: auto; }
table.stats-table { border-collapse: collapse; width: 100%; font-size: 0.93rem; font-variant-numeric: tabular-nums; }
table.stats-table th, table.stats-table td { padding: 0.55rem 0.6rem; text-align: right; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
table.stats-table th:first-child, table.stats-table td:first-child { text-align: left; white-space: normal; }
table.stats-table thead th { white-space: normal; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6B6E74; font-weight: 600; border-bottom: 1px solid var(--stone); vertical-align: bottom; }
table.stats-table tbody tr:last-child td { border-bottom: 0; }
table.stats-table tr.sel td { background: #EFE8DA; font-weight: 600; }
table.stats-table tr.grouphead td { text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6E74; font-weight: 600; padding-top: 1.1rem; border-bottom: 1px solid var(--stone); }
table.stats-table tr.total td { font-weight: 700; border-top: 1px solid var(--stone); }
table.stats-table td.rate { font-weight: 700; color: var(--ink-navy); }
.stats-table .sm { display: none; }
.stats-star { color: #8a8c92; font-weight: 400; margin-left: 1px; }
.stats-small-inline { font-size: 0.8rem; font-weight: 400; color: #8a8c92; font-style: italic; font-family: 'Inter', sans-serif; }
.stats-small { font-weight: 400; color: #8a8c92; font-style: italic; font-size: 0.78rem; display: block; }
sup.fn { font-size: 0.7em; line-height: 0; margin-left: 2px; text-transform: none; letter-spacing: 0; }
sup.fn a { color: var(--oxblood); font-weight: 700; text-decoration: none; padding: 0 1px; }
sup.fn a:hover { text-decoration: underline; }
.stats-notes { margin: 1.6rem 0 0; padding: 0.9rem 0 0 1.3rem; border-top: 1px solid var(--hairline); font-size: 0.82rem; color: #55585e; line-height: 1.55; max-width: 720px; }
.stats-notes li { margin: 0 0 0.45rem; padding-left: 0.2rem; scroll-margin-top: 5rem; }
.stats-notes li.hl { animation: fn-flash 2.2s ease-out; }
.stats-notes .fnback { color: var(--oxblood); text-decoration: none; margin-left: 0.35rem; font-weight: 700; }
@keyframes fn-flash { 0% { background: #EFE1DB; } 100% { background: transparent; } }
.stats-foot { font-size: 0.82rem; color: #6B6E74; margin: 0.8rem 0 0; line-height: 1.5; max-width: 700px; }
.stats-empty { font-style: italic; color: #6B6E74; padding: 1rem 0; }
.stats-selects { display: flex; flex-wrap: wrap; gap: 0 1.8rem; }
.stats-inline { display: flex; gap: 0.8rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.stats-inline .stats-select { width: auto; min-width: 260px; }
.funnel { display: grid; gap: 0.55rem; margin: 0.4rem 0 0; }
.funnel-row { display: grid; grid-template-columns: minmax(200px, 280px) 1fr 7.4rem; gap: 0.8rem; align-items: center; font-size: 0.92rem; }
.funnel-bar { background: #ECE7DE; height: 1.15rem; position: relative; }
.funnel-bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-navy); min-width: 2px; }
.funnel-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.funnel-cond { display: block; font-size: 0.74rem; color: #6B6E74; }
.stats-h3 { font-size: 1.05rem; margin: 2rem 0 0.5rem; }
.stats-matrix th, .stats-matrix td { text-align: center; padding: 0.4rem 0.3rem; font-size: 0.8rem; }
table.stats-list td { white-space: normal; }
@media (max-width: 640px) { .stats-matrix th, .stats-matrix td { padding: 0.35rem 0.1rem; font-size: 0.68rem; } .stats-matrix td:first-child { font-size: 0.68rem; } }
.stats-matrix td:first-child { text-align: left; white-space: nowrap; }
.stats-matrix td.diag { background: #E8E1D6; }
table.stats-list td:last-child, table.stats-list th:last-child { text-align: left; }
table.stats-list td, table.stats-list th { text-align: left; }
.funnel-sub { padding-left: 1.2rem; color: #55585e; font-size: 0.88rem; }
.funnel-na .funnel-bar { background: repeating-linear-gradient(45deg, #ECE7DE, #ECE7DE 6px, #F3EFE7 6px, #F3EFE7 12px); }
.stats-method { margin: 2.6rem 0 0; border-top: 1px solid var(--hairline); }
.stats-method summary {
font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--ink-navy);
cursor: pointer; list-style: none; padding: 1rem 0;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.stats-method summary::-webkit-details-marker { display: none; }
.stats-method summary::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--oxblood); border-bottom: 2px solid var(--oxblood); transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 0.3rem; flex: none; }
.stats-method[open] summary::after { transform: rotate(-135deg); }
.stats-method summary:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.stats-method-body { padding-bottom: 0.4rem; animation: stats-drop 0.22s ease-out; }
.stats-method-body p, .stats-method-body li { font-size: 0.93rem; line-height: 1.6; color: var(--slate); }
.stats-method-body ul { padding-left: 1.2rem; margin: 0 0 0.8rem; }
@keyframes stats-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stats-method-body { animation: none; } .stats-method summary::after { transition: none; } }
@media (max-width: 640px) {
.stats-controls { grid-template-columns: 1fr 1fr; }
.stats-controls .stats-ctl:last-child { grid-column: 1 / -1; }
.stats-tile .n { font-size: 1.5rem; }
.stats-tiles { grid-template-columns: repeat(3, 1fr); }
.stats-tile:nth-child(4) { border-left: 0; }
.stats-tile:nth-child(n+4) { border-top: 1px solid var(--hairline); }
.stats-table .sm { display: inline; }
.stats-table .lg { display: none; }
.stats-scroll { margin: 0 -0.75rem; padding: 0 0.75rem; }
table.stats-table { font-size: 0.76rem; }
table.stats-table th, table.stats-table td { padding: 0.5rem 0.2rem; }
table.stats-table th:first-child, table.stats-table td:first-child { padding-left: 0; }
table.stats-table thead th { font-size: 0.6rem; letter-spacing: 0; }
.funnel-row { grid-template-columns: 1fr 6.4rem; }
.funnel-row .funnel-bar { grid-column: 1 / -1; grid-row: 2; }
.stats-inline .stats-select { width: 100%; }
.dtrack { display: none; }
.stats-inline .stats-ctl-label + .stats-select + .stats-ctl-label { margin-left: 0; }
}
.stats-tabs a {
display: block; font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.85rem 1.1rem; color: var(--oxblood);
text-align: left; width: 100%; text-decoration: none;
}
.stats-tabs a + a { border-top: 1px solid rgba(67, 23, 32, 0.25); }
.stats-tabs a:hover { background: #E2D0CB; text-decoration: none; }
.stats-tabs a.on { background: var(--oxblood); color: #fff; }
.stats-tabs a .lock { float: right; opacity: 0.65; margin-top: 0.2rem; }
@media (max-width: 900px) {
.stats-tabs a { white-space: nowrap; width: auto; flex: 1 0 auto; text-align: center; font-size: 0.85rem; padding: 0.8rem 0.75rem; }
.stats-tabs a + a { border-top: 0; border-left: 1px solid rgba(67, 23, 32, 0.25); }
.stats-tabs a .lock { float: none; margin-left: 0.35rem; }
}
.gate-counts { margin: -0.3rem 0 1.4rem; color: var(--slate); font-size: 0.97rem; }
.gate-list-fade { -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.gate-more-unused { text-align: center; color: #6B6E74; font-size: 0.9rem; margin: -2.2rem 0 1.4rem; position: relative; z-index: 1; }
.gate-fog { min-height: 520px; max-height: 780px; }
.gate-fog .stats-unlock { top: 50%; transform: translate(-50%, -50%); }
.gate-with-list .gate-list { position: relative; z-index: 1; margin: 0; }
.gate-with-list .gate-list li { background: transparent; }
.gate-sample { margin: 0.9rem 0 0; font-size: 0.88rem; }
table.stats-table:not(.stats-matrix) th, table.stats-table:not(.stats-matrix) td { padding: 0.8rem 0.6rem; }
@media (min-width: 641px) { table.stats-table:not(.stats-matrix) th, table.stats-table:not(.stats-matrix) td { padding-left: 0.75rem; padding-right: 0.75rem; } }
table.stats-table:not(.stats-matrix) tbody tr:not(.sel):not(.total):not(.grouphead):hover td:not(.grp-shade) { background-color: #F7F1EC; }
.stats-table tr.grp th { text-align: center; font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--oxblood); font-weight: 700; border-bottom: 1px solid var(--stone); padding-bottom: 0.4rem; }
.stats-table .grp-left { border-left: 1px solid var(--stone); }
.stats-table .grp-shade { background: #F6EFE7; }
.stats-table tr.sel .grp-shade { background: #EBDDCF; }
.stats-table tr.total .grp-shade { background: #F0E6DA; }
.m-only { display: none; }
@media (max-width: 640px) { .d-only { display: none; } .m-only { display: table-cell; } }
.stats-viewsel, .stats-filter-toggle { display: none; }
.stats-mnote { display: none; font-size: 0.82rem; font-style: italic; color: #6B6E74; margin: 0.5rem 0 0; }
@media (max-width: 640px) { .stats-table .m-hide { display: none; } .stats-mnote { display: block; } }
@media (max-width: 640px) {
.stats-titlebar .page-title { font-size: 1.7rem; }
.stats-viewsel { display: block; margin: 0 0 0.7rem; }
.stats-viewsel .stats-ctl-label { display: block; margin-bottom: 0.3rem; }
.stats-tabs { display: none !important; }
.stats-filter-toggle {
display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.8rem; text-align: left; cursor: pointer;
font: inherit; color: var(--oxblood); background-color: #F6EEEA; border: 1.5px solid var(--oxblood); border-radius: 4px; padding: 0.6rem 0.9rem; margin: 0 0 0.9rem;
}
.stats-filter-toggle .lbl { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #6B6E74; }
.stats-filter-toggle .sum { display: block; font-size: 0.92rem; font-weight: 600; }
.stats-filter-toggle .chev { width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--oxblood); border-bottom: 2px solid var(--oxblood); transform: rotate(45deg); flex: none; transition: transform 0.2s ease; margin-right: 0.2rem; }
.stats-filter-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.stats-controls { display: none !important; margin-bottom: 0.9rem; }
.stats-controls.open { display: grid !important; grid-template-columns: 1fr !important; }
.stats-asof { margin-top: 0; }
}
.unlock-close { display: none; }
@media (max-width: 640px) {
.stats-unlock { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: calc(100% - 2rem) !important; max-height: calc(100vh - 3rem); overflow-y: auto; z-index: 60; padding-top: 2.4rem; }
.unlock-close { display: block; position: absolute; top: 0.2rem; right: 0.45rem; width: 2.2rem; height: 2.2rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--oxblood); cursor: pointer; }
body.unlock-dismissed .stats-unlock { display: none; }
.stats-fog, .gate-fog, .gate-with-list { min-height: 0 !important; }
}
.stats-example { font-size: 0.9rem; color: var(--slate); margin: 0 0 1rem; line-height: 1.5; }
.stats-example strong { color: var(--ink-navy); }
.stats-fog { position: relative; margin-top: 0.4rem; min-height: 560px; overflow: hidden; border-radius: 4px; }
.stats-fog img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
.stats-fog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(248,243,235,0) 0%, rgba(248,243,235,0.25) 45%, rgba(248,243,235,0.92) 100%); pointer-events: none; }
.stats-unlock {
position: absolute; z-index: 2; left: 50%; top: 14%; transform: translateX(-50%); width: min(470px, 92%);
background: #fff; border: 1.5px solid var(--oxblood); border-radius: 6px; padding: 1.5rem 1.6rem; text-align: center;
box-shadow: 0 10px 34px rgba(13, 23, 41, 0.18);
}
.stats-unlock h2 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.stats-unlock p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; color: var(--slate); }
.stats-unlock ul { list-style: none; margin: 0 0 1.1rem; padding: 0; text-align: left; font-size: 0.9rem; color: var(--slate); }
.stats-unlock li { padding: 0.2rem 0 0.2rem 1.3rem; position: relative; }
.stats-unlock li::before { content: ""; position: absolute; left: 0.25rem; top: 0.72rem; width: 0.4rem; height: 0.4rem; background: var(--oxblood); border-radius: 50%; }
.stats-unlock .main-cta { justify-content: center; margin: 0; }
@media (max-width: 640px) {
.stats-fog { min-height: 620px; }
.gate-fog { min-height: 720px; max-height: none; }
.gate-with-list { min-height: 780px; }
.stats-unlock { top: 6%; padding: 1.2rem 1.1rem; }
}