/*==================================================
COMPLIANCEATLAS

CASE LAW LIBRARY
caselaw.html and caselaw/<id>.html

Mobile first: base rules are the phone layout, the
media queries at the end widen it.

Requires:
main.css
jobrestrictions.css (hero, disclaimer, --navy, --gold)
travel.css (travel-meta, travel-toc, travel-section,
            callout, source-list, travel-banner)

==================================================*/


/*==================================================
COURT LEVELS + STATUS
One colour per kind of court, used on the badge, the
card's top rule and the timeline dot.
==================================================*/

.case-page,
.cases-page{

--lvl-scotus:#081A33;
--lvl-fed-appeals:#1D4ED8;
--lvl-fed-district:#0E7490;
--lvl-state-high:#7C2D12;
--lvl-state-appeals:#A16207;
--tap:44px;

}

.court-badge{

display:inline-flex;

align-items:center;

min-height:26px;

padding:3px 10px;

border-radius:999px;

background:var(--lvl, #334155);

color:white;

font-size:.72rem;

font-weight:700;

letter-spacing:.04em;

text-transform:uppercase;

line-height:1.3;

white-space:nowrap;

}

.lvl-scotus{ --lvl:var(--lvl-scotus); }
.lvl-fed-appeals{ --lvl:var(--lvl-fed-appeals); }
.lvl-fed-district{ --lvl:var(--lvl-fed-district); }
.lvl-state-high{ --lvl:var(--lvl-state-high); }
.lvl-state-appeals{ --lvl:var(--lvl-state-appeals); }

/* The Supreme Court badge sits on the navy hero too, so give it an edge. */
.court-badge.lvl-scotus{

box-shadow:inset 0 0 0 1px var(--gold);

}

.status-pill{

display:inline-flex;

align-items:center;

gap:6px;

min-height:26px;

padding:3px 10px;

border-radius:999px;

background:#E2E8F0;

color:#1E293B;

font-size:.72rem;

font-weight:700;

letter-spacing:.04em;

text-transform:uppercase;

line-height:1.3;

white-space:nowrap;

}

.status-pill.st-good-law{ background:#DCFCE7; color:#14532D; }
.status-pill.st-limited{ background:#FEF3C7; color:#78350F; }
.status-pill.st-superseded,
.status-pill.st-overruled{ background:#F1F5F9; color:#475569; }
.status-pill.is-live{ background:#FFF7CC; color:#713F12; }

.status-pill.is-live::before{

content:"";

width:7px;

height:7px;

border-radius:50%;

background:#CA8A04;

}


/*==================================================
BUTTONS
==================================================*/

.case-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

min-height:var(--tap);

padding:10px 20px;

border-radius:10px;

font-weight:700;

font-size:.95rem;

text-decoration:none;

line-height:1.2;

}

.case-btn-gold{

background:var(--gold);

color:var(--navy);

}

.case-btn-gold:hover{

filter:brightness(1.06);

}

.case-btn-ghost{

border:1px solid rgba(255,255,255,.45);

color:white;

}

.case-btn-ghost:hover{

background:rgba(255,255,255,.12);

}

.case-btn-navy{

background:var(--navy);

color:white;

}


/*==================================================
HUB: HERO + BANNER
==================================================*/

.cases-hero .hero-text{

margin-left:auto;

margin-right:auto;

}

.cases-hero-actions,
.case-hero-actions{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:12px;

margin-top:24px;

}

.cases-roles{

display:grid;

grid-template-columns:1fr;

gap:10px;

margin:0;

padding:0;

list-style:none;

}

.cases-roles li{

margin:0;

}

.cases-roles a{

display:flex;

flex-direction:column;

gap:2px;

min-height:var(--tap);

padding:12px 14px;

background:white;

border:1px solid #F0DC8A;

border-radius:10px;

color:var(--navy);

text-decoration:none;

line-height:1.4;

}

.cases-roles a[aria-current]{

background:var(--navy);

border-color:var(--navy);

color:white;

}

.cases-roles strong{

font-size:.98rem;

}

.cases-roles span{

font-size:.86rem;

opacity:.8;

}

.cases-banner .travel-banner-inner{

flex-direction:column;

align-items:stretch;

}


/*==================================================
HUB: SECTION HEADINGS
==================================================*/

.cases-head{

max-width:760px;

margin:0 auto 26px;

text-align:center;

}

.cases-kicker,
.issue-kicker{

display:inline-block;

margin-bottom:8px;

color:#8A6D10;

font-size:.78rem;

font-weight:800;

letter-spacing:.1em;

text-transform:uppercase;

}

.cases-head h2{

margin:0 0 10px;

color:var(--navy);

font-size:1.6rem;

line-height:1.25;

}

.cases-head p{

margin:0;

color:var(--text);

line-height:1.7;

}


/*==================================================
HUB: START HERE
==================================================*/

.cases-start{

padding:44px 0 36px;

}

.start-grid{

display:grid;

grid-template-columns:1fr;

gap:12px;

max-width:1100px;

margin:0 auto;

padding:0;

list-style:none;

}

.start-grid li{

margin:0;

}

.start-card{

display:flex;

gap:14px;

height:100%;

padding:16px;

background:white;

border:1px solid var(--border);

border-left:4px solid var(--lvl);

border-radius:14px;

color:var(--text-dark);

text-decoration:none;

transition:transform .15s ease, box-shadow .15s ease;

}

.start-card:hover{

transform:translateY(-2px);

box-shadow:0 10px 24px rgba(8,26,51,.08);

}

.start-num{

flex-shrink:0;

width:34px;

color:#CBD5E1;

font-size:1.35rem;

font-weight:800;

line-height:1.2;

}

.start-body{

display:flex;

flex-direction:column;

gap:6px;

min-width:0;

}

.start-meta{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:8px;

}

.start-name{

color:var(--navy);

font-size:1.08rem;

font-weight:800;

line-height:1.3;

}

.start-teaser{

color:var(--text);

font-size:.93rem;

line-height:1.55;

}


/*==================================================
HUB: ISSUE FILTER BAR
Sticky pill bar, same shape as .quick-links on the
International and Myths pages. Scrolls sideways on a
phone rather than wrapping into a wall of pills.
==================================================*/

.cases-filter{

position:sticky;

top:79px;

z-index:100;

padding:12px 0;

background:white;

border-top:1px solid var(--border);

border-bottom:1px solid var(--border);

}

.issue-pills{

display:flex;

gap:8px;

overflow-x:auto;

padding:2px 2px 4px;

scrollbar-width:thin;

-webkit-overflow-scrolling:touch;

scroll-snap-type:x proximity;

}

.issue-pill{

flex-shrink:0;

display:inline-flex;

align-items:center;

gap:8px;

min-height:var(--tap);

padding:8px 16px;

border:1px solid var(--border);

border-radius:999px;

background:#F8FAFC;

color:var(--navy);

font-size:.9rem;

font-weight:700;

text-decoration:none;

white-space:nowrap;

scroll-snap-align:start;

}

.issue-pill:hover{

border-color:#94A3B8;

}

.issue-pill.is-active{

background:var(--navy);

border-color:var(--navy);

color:white;

}

.issue-pill-count{

display:inline-flex;

align-items:center;

justify-content:center;

min-width:24px;

height:22px;

padding:0 6px;

border-radius:999px;

background:#E2E8F0;

color:var(--navy);

font-size:.75rem;

}

.issue-pill.is-active .issue-pill-count{

background:var(--gold);

}


/*==================================================
HUB: ISSUE SECTIONS + CARDS
==================================================*/

.cases-body{

padding:30px 0 20px;

}

.cases-filter-status{

max-width:1100px;

margin:0 auto;

color:var(--muted);

font-size:.9rem;

}

.cases-filter-status:empty{

display:none;

}

.issue-block{

max-width:1100px;

margin:0 auto;

padding:26px 0 30px;

border-bottom:1px solid var(--border);

scroll-margin-top:150px;

}

.issue-block:last-child{

border-bottom:none;

}

.issue-block[hidden]{

display:none;

}

.issue-head{

max-width:760px;

margin-bottom:18px;

}

.issue-head h2{

margin:0 0 8px;

color:var(--navy);

font-size:1.4rem;

line-height:1.3;

}

.issue-head p{

margin:0;

color:var(--text);

line-height:1.7;

}

.case-grid{

display:grid;

grid-template-columns:1fr;

gap:14px;

}

.case-card{

position:relative;

display:flex;

flex-direction:column;

gap:8px;

padding:18px 18px 16px;

background:white;

border:1px solid var(--border);

border-top:4px solid var(--lvl);

border-radius:14px;

scroll-margin-top:150px;

transition:transform .15s ease, box-shadow .15s ease;

}

.case-card:hover,
.case-card:focus-within{

transform:translateY(-2px);

box-shadow:0 10px 24px rgba(8,26,51,.08);

}

.case-card:target{

box-shadow:0 0 0 3px var(--gold);

}

.case-card-top{

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

}

.case-card-year{

color:var(--muted);

font-size:.85rem;

font-weight:700;

}

.case-card-name{

margin:2px 0 0;

font-size:1.12rem;

line-height:1.3;

}

.case-card-name a{

color:var(--navy);

text-decoration:none;

}

/* The whole card is the tap target, not just the name. */
.case-card-name a::after{

content:"";

position:absolute;

inset:0;

border-radius:14px;

}

.case-card-name a:focus-visible{

outline:none;

}

.case-card:focus-within{

outline:3px solid var(--primary);

outline-offset:2px;

}

.case-card-cite{

margin:0;

color:var(--muted);

font-size:.85rem;

}

.case-card-teaser{

flex:1;

margin:0;

color:var(--text);

font-size:.94rem;

line-height:1.6;

}

.case-card-foot{

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

margin-top:6px;

padding-top:12px;

border-top:1px solid #F1F5F9;

}

.case-card-go{

color:var(--primary);

font-size:.88rem;

font-weight:700;

white-space:nowrap;

}


/*==================================================
HUB: STATE SPLIT PANEL
Twelve state rulings read best as one compact list,
not twelve more cards.
==================================================*/

.split-panel{

margin-top:22px;

background:#F8FAFC;

border:1px solid var(--border);

border-radius:14px;

overflow:hidden;

}

.split-head{

padding:18px 18px 14px;

}

.split-head h3{

margin:0 0 6px;

color:var(--navy);

font-size:1.12rem;

}

.split-head p{

margin:0;

color:var(--text);

font-size:.94rem;

line-height:1.65;

}

.split-list{

margin:0;

padding:0;

list-style:none;

}

.split-list li{

margin:0;

border-top:1px solid var(--border);

scroll-margin-top:150px;

}

.split-list li:target{

background:#FFF7CC;

}

.split-list a{

display:grid;

grid-template-columns:1fr auto;

grid-template-areas:
"state result"
"case  result";

align-items:center;

column-gap:12px;

row-gap:2px;

min-height:var(--tap);

padding:12px 18px;

color:var(--text-dark);

text-decoration:none;

}

.split-list a:hover{

background:white;

}

.split-state{

grid-area:state;

color:var(--muted);

font-size:.75rem;

font-weight:800;

letter-spacing:.06em;

text-transform:uppercase;

}

.split-case{

grid-area:case;

color:var(--navy);

font-weight:700;

line-height:1.35;

}

.split-year{

color:var(--muted);

font-weight:500;

}

.split-result{

grid-area:result;

padding:4px 10px;

border-radius:999px;

font-size:.72rem;

font-weight:800;

letter-spacing:.03em;

text-transform:uppercase;

white-space:nowrap;

}

.split-result.r-punitive{ background:#DCFCE7; color:#14532D; }
.split-result.r-as-applied{ background:#E0F2FE; color:#0C4A6E; }
.split-result.r-civil{ background:#F1F5F9; color:#475569; }


/*==================================================
HUB: TIMELINE
==================================================*/

.cases-timeline{

padding:44px 0;

background:white;

border-top:1px solid var(--border);

}

.era-list{

max-width:900px;

margin:0 auto;

padding:0;

list-style:none;

}

.era{

position:relative;

margin:0;

padding:0 0 26px 26px;

border-left:2px solid var(--border);

}

.era:last-child{

padding-bottom:0;

}

.era::before{

content:"";

position:absolute;

left:-8px;

top:4px;

width:14px;

height:14px;

border-radius:50%;

background:var(--gold);

box-shadow:0 0 0 4px white;

}

.era-years{

display:block;

color:#8A6D10;

font-size:.78rem;

font-weight:800;

letter-spacing:.08em;

}

.era-head h3{

margin:2px 0 4px;

color:var(--navy);

font-size:1.15rem;

}

.era-head p{

margin:0 0 10px;

color:var(--text);

font-size:.93rem;

line-height:1.6;

}

.era-cases{

margin:0;

padding:0;

list-style:none;

}

.era-cases li{

margin:0;

}

.era-cases a{

display:flex;

align-items:center;

gap:12px;

min-height:var(--tap);

padding:6px 10px;

margin:0 -10px;

border-radius:8px;

color:var(--text-dark);

text-decoration:none;

}

.era-cases a:hover{

background:#F1F5F9;

}

.era-year{

flex-shrink:0;

width:42px;

color:var(--muted);

font-size:.85rem;

font-weight:700;

}

.era-name{

flex:1;

min-width:0;

font-weight:600;

line-height:1.35;

}

.court-dot{

flex-shrink:0;

width:12px;

height:12px;

border-radius:50%;

background:var(--lvl);

}


/*==================================================
HUB: KEY
==================================================*/

.cases-key{

padding:44px 0 50px;

}

.key-grid{

display:grid;

grid-template-columns:1fr;

gap:16px;

max-width:1100px;

margin:0 auto;

}

.key-card{

padding:22px 18px;

background:white;

border:1px solid var(--border);

border-radius:14px;

}

.key-card h3{

margin:0 0 12px;

color:var(--navy);

font-size:1.1rem;

}

.key-list{

margin:0;

padding:0;

list-style:none;

}

.key-list li{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:6px;

margin:0;

padding:12px 0;

border-top:1px solid #F1F5F9;

}

.key-list li:first-child{

border-top:none;

padding-top:0;

}

.key-list p{

margin:0;

color:var(--text);

font-size:.92rem;

line-height:1.55;

}


/*==================================================
CASE PAGE
==================================================*/

.case-hero{

padding:44px 0 40px;

}

.case-hero .container{

text-align:center;

}

.case-crumbs{

margin-bottom:16px;

font-size:.88rem;

opacity:.85;

}

.case-crumbs a{

color:white;

text-underline-offset:3px;

}

.case-hero-badges{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

margin-bottom:14px;

}

.case-hero h1{

margin:0 0 8px;

font-size:2rem;

line-height:1.2;

overflow-wrap:anywhere;

}

.case-hero-cite{

margin:0 0 14px;

color:#E8D48A;

font-size:1rem;

font-weight:600;

}

.case-hero .hero-text{

margin:0 auto;

}

.case-facts{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

max-width:760px;

margin:22px auto 0;

text-align:left;

}

.case-facts div{

padding:10px 12px;

background:rgba(255,255,255,.07);

border:1px solid rgba(255,255,255,.14);

border-radius:10px;

}

.case-facts dt{

margin:0 0 2px;

font-size:.7rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

opacity:.7;

}

.case-facts dd{

margin:0;

font-size:.9rem;

line-height:1.45;

}

/* Reach is a sentence, not a value: give it the full row. */
.case-facts div:nth-child(3){

grid-column:1 / -1;

}

.case-page .travel-toc{

justify-content:center;

}

.case-status-callout{

max-width:960px;

margin:0 auto 26px;

}

.case-status-callout p{

margin:0;

line-height:1.7;

}

.case-reach-note{

display:block;

margin-top:4px;

font-size:.92rem;

opacity:.85;

}

.case-why{

border-left:4px solid var(--gold);

}

.case-scope{

background:white;

border-style:dashed;

border-color:#94A3B8;

}

.case-log{

margin:12px 0 0 !important;

padding:0 !important;

list-style:none;

}

.case-log li{

position:relative;

margin:0;

padding:0 0 16px 20px;

border-left:2px solid var(--border);

}

.case-log li:last-child{

padding-bottom:0;

}

.case-log li::before{

content:"";

position:absolute;

left:-6px;

top:6px;

width:10px;

height:10px;

border-radius:50%;

background:var(--navy);

}

.case-log time{

display:block;

color:var(--muted);

font-size:.8rem;

font-weight:800;

letter-spacing:.05em;

text-transform:uppercase;

}

.case-log p{

margin:2px 0 0;

}

.case-chips{

display:grid;

grid-template-columns:1fr;

gap:10px;

margin:0 0 6px !important;

padding:0 !important;

list-style:none;

}

.case-chips li{

margin:0;

}

.case-chip{

display:flex;

flex-direction:column;

justify-content:center;

gap:2px;

min-height:var(--tap);

height:100%;

padding:10px 14px;

background:white;

border:1px solid var(--border);

border-left:4px solid var(--navy);

border-radius:10px;

color:var(--navy) !important;

text-decoration:none;

line-height:1.4;

}

.case-chip:hover{

border-color:#94A3B8;

}

.case-chip.is-statute{ border-left-color:var(--gold); }
.case-chip.is-wire{ border-left-color:var(--primary); }
.case-chip.is-page{ border-left-color:#64748B; }

.case-chip-label{

font-weight:700;

}

.case-chip-sub{

color:var(--muted);

font-size:.85rem;

}

.case-verified{

margin-top:14px !important;

color:var(--muted);

font-size:.88rem;

}

.case-pager{

display:grid;

grid-template-columns:1fr;

gap:12px;

max-width:960px;

margin:0 auto;

}

.case-pager-link{

display:flex;

flex-direction:column;

gap:4px;

min-height:var(--tap);

padding:14px 18px;

background:white;

border:1px solid var(--border);

border-radius:14px;

color:var(--navy);

text-decoration:none;

}

.case-pager-link:hover{

border-color:#94A3B8;

}

.case-pager-link.is-empty{

display:none;

}

.case-pager-dir{

color:var(--muted);

font-size:.8rem;

font-weight:700;

}

.case-pager-name{

font-weight:800;

line-height:1.35;

}


/*==================================================
WIDER SCREENS
==================================================*/

@media (min-width:640px){

.cases-roles{

grid-template-columns:1fr 1fr;

}

.case-grid,
.start-grid,
.case-chips{

grid-template-columns:1fr 1fr;

}

.key-list li{

flex-direction:row;

align-items:baseline;

gap:14px;

}

.key-list .court-badge,
.key-list .status-pill{

flex-shrink:0;

min-width:170px;

justify-content:center;

}

.case-facts{

grid-template-columns:repeat(4, 1fr);

}

.case-facts div:nth-child(3){

grid-column:auto;

}

.case-pager{

grid-template-columns:1fr 1fr;

}

.case-pager-link.is-empty{

display:block;

visibility:hidden;

}

.case-pager-link.is-next{

text-align:right;

}

.split-list a{

grid-template-columns:130px 1fr auto;

grid-template-areas:"state case result";

}

}

@media (min-width:900px){

.cases-roles{

grid-template-columns:repeat(4, 1fr);

}

.case-grid{

grid-template-columns:repeat(3, 1fr);

}

.key-grid{

grid-template-columns:1fr 1fr;

}

.cases-head h2{

font-size:2rem;

}

.issue-head h2{

font-size:1.6rem;

}

.case-hero{

padding:60px 0 50px;

}

.case-hero h1{

font-size:2.6rem;

}

.case-facts{

grid-template-columns:1fr 1fr 2fr 1fr;

}

}

@media print{

.cases-filter,
.case-hero-actions,
.case-pager{

display:none;

}

}