/* SoCal ADU Permit Index: a Compass data desk. Blueprint plate in the hero, cream reading rooms below.
   One data hue (bronze on cream, brass on navy); text always wears text colors, never the data color. */
.hf-adu-index{--ax-navy:#1e3341;--ax-night:#13232e;--ax-cream:#f4f0e8;--ax-sand:#ece6dc;--ax-raised:#fbf8f2;--ax-gold:#eaca92;--ax-gold-light:#ffe1ae;--ax-brass:#bb9259;--ax-bronze:#7a5a30;--ax-bar:#8a6638;--ax-muted:#53616a;--ax-hair:#d7cfc2;color:var(--ax-navy);background:var(--ax-cream)}
.hf-adu-index *,.hf-adu-index *:before,.hf-adu-index *:after{box-sizing:border-box}
.hf-adu-index [hidden]{display:none!important}
.hf-site .hf-adu-index :is(a,button,input,select,[tabindex]):focus-visible{outline:3px solid var(--ax-navy);outline-offset:3px}
.hf-site .hf-adu-index :is(.ax-hero,.ax-method) :is(a,button):focus-visible{outline-color:var(--ax-gold-light)}
.hf-adu-index .eyebrow{font:650 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ax-bronze)}
.hf-adu-index .hf-crumb{font-size:12px}
.hf-adu-index .hf-crumb a{display:inline-flex;align-items:center;min-height:24px}
.ax-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ax-head h2,.ax-answer h2,.ax-limits h2,.ax-method h2{font:500 clamp(32px,3.6vw,52px)/1.1 Editorial,Georgia,serif;letter-spacing:-.025em;margin:12px 0 16px;text-wrap:balance}
.ax-head{max-width:820px}
.ax-head>p:last-child{font:400 15px/1.8 Manrope,Arial,sans-serif;color:var(--ax-muted);text-wrap:pretty}

/* Hero: navy blueprint with a data plate */
.ax-hero{position:relative;overflow:hidden;color:var(--ax-cream);background:radial-gradient(110% 85% at 76% 34%,#2a4a5e,#18303f 44%,#0d1b24)}
.ax-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 70% at 60% 45%,#000,transparent);mask-image:radial-gradient(70% 70% at 60% 45%,#000,transparent);pointer-events:none}
.ax-hero-layout{position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:7%;padding-block:104px 92px}
.ax-hero .hf-crumb,.ax-hero .hf-crumb a{color:#f3ede1}
.ax-hero .eyebrow{color:var(--ax-gold-light);margin-top:40px}
.ax-hero h1{font:500 clamp(52px,6.3vw,96px)/1.01 Editorial,Georgia,serif;letter-spacing:-.04em;margin:18px 0 26px;text-wrap:balance}
.ax-hero h1 em{font-style:normal;color:var(--ax-gold)}
.ax-hero p:not(.eyebrow){font:400 16px/1.84 Manrope,Arial,sans-serif;color:#dfe3e0;max-width:560px;text-wrap:pretty}
.ax-enter{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:24px;padding:12px 22px;border-radius:999px;text-decoration:none;color:var(--ax-night);background:linear-gradient(135deg,#ffe1ae,#eaca92 55%,#d6b075);font:700 13px Manrope,Arial,sans-serif;box-shadow:inset 0 1px 0 #ffffff80}
.ax-hero .ax-hero-boundary{font:700 12px/1.7 Manrope,Arial,sans-serif!important;letter-spacing:.1em;color:var(--ax-gold-light)!important;margin-top:26px}
.ax-plate{margin:0;padding:26px 28px 22px;border:1px solid #eaca9259;background:linear-gradient(160deg,#16303de6,#0e1f2ae6);box-shadow:16px 19px 0 #061d2980}
.ax-plate-top,.ax-plate figcaption{display:flex;justify-content:space-between;gap:12px;font:700 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.14em;color:var(--ax-gold-light);margin:0}
.ax-plate .ax-plate-number{font:500 clamp(64px,7.4vw,118px)/1 Editorial,Georgia,serif!important;letter-spacing:-.04em;color:var(--ax-cream)!important;margin:34px 0 6px}
.ax-plate .ax-plate-label{font:400 15px/1.6 Manrope,Arial,sans-serif!important;color:#c9d1cf!important;margin:0 0 28px}
.ax-hero-spark{display:block;width:100%;height:auto;margin-bottom:12px}
.ax-hero-spark rect{fill:var(--ax-gold)}
.ax-hero-spark .ax-gap{fill:#c9d1cf}
.ax-plate figcaption{border-top:1px solid #eaca9240;padding-top:12px;font-size:11px}

/* Short answer and figures */
.ax-answer{display:grid;grid-template-columns:.22fr .34fr .44fr;gap:28px;padding-block:80px 40px}
.ax-answer h2{margin:0}
.ax-answer>p:last-child{font:400 15px/1.84 Manrope,Arial,sans-serif;margin:0;color:#3d4f59;text-wrap:pretty}
.ax-figures{padding-block:10px 80px}
.ax-figures dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--ax-hair);border-bottom:1px solid var(--ax-hair)}
.ax-tile{padding:26px 24px 28px;border-left:1px solid var(--ax-hair)}
.ax-tile:first-child{border-left:0;padding-left:0}
.ax-tile dt{font:650 12px/1.5 Manrope,Arial,sans-serif;letter-spacing:.06em;color:var(--ax-bronze)}
.ax-tile dd{margin:0}
.ax-tile strong{display:block;font:500 clamp(40px,4vw,60px)/1.05 Editorial,Georgia,serif;letter-spacing:-.03em;margin:12px 0 10px}
.ax-tile span{display:block;font:400 13px/1.6 Manrope,Arial,sans-serif;color:var(--ax-muted)}

/* Trend */
.ax-trend{background:var(--ax-sand);padding-block:90px}
.ax-trend-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:36px;margin-top:34px;align-items:start}
.ax-chart-card{position:relative;margin:0;padding:24px 24px 18px;background:var(--ax-raised);border:1px solid var(--ax-hair);border-radius:16px}
.ax-chart{display:block;width:100%;height:auto;overflow:visible}
.ax-chart .ax-grid{stroke:#e2dbcf;stroke-width:1}
.ax-chart .ax-tick{font:500 12px Manrope,Arial,sans-serif;fill:var(--ax-muted);font-variant-numeric:tabular-nums}
.ax-chart .ax-value{font:700 13px Manrope,Arial,sans-serif;fill:var(--ax-navy)}
.ax-chart .ax-bar path{fill:var(--ax-bar);transition:fill .3s}
.ax-chart .ax-hit{fill:transparent}
.ax-chart .ax-bar:hover path,.ax-chart .ax-bar.is-on path{fill:var(--ax-navy)}
.ax-chart-card figcaption{font:400 12px/1.6 Manrope,Arial,sans-serif;color:var(--ax-muted);margin-top:10px}
.ax-tip{min-height:1.6em;margin:6px 0 0;font:600 13px/1.6 Manrope,Arial,sans-serif;color:var(--ax-navy)}
.ax-table{width:100%;border-collapse:collapse;font:400 14px/1.5 Manrope,Arial,sans-serif;font-variant-numeric:tabular-nums}
.ax-table caption{text-align:left;font:650 12px/1.5 Manrope,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ax-bronze);padding-bottom:10px}
.ax-table th,.ax-table td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--ax-hair)}
.ax-table th:first-child,.ax-table td:first-child{text-align:left;padding-left:0}
.ax-table thead th{font:650 12px/1.4 Manrope,Arial,sans-serif;color:var(--ax-muted);letter-spacing:.04em}
.ax-trend-table tbody th{font-weight:650}

/* Counties */
.ax-counties{padding-block:90px}
.ax-county-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:34px}
.ax-county{padding:22px 20px;background:var(--ax-raised);border:1px solid var(--ax-hair);border-radius:14px}
.ax-county .eyebrow{font-size:11px;margin:0}
.ax-county-figure{font:400 13px/1.4 Manrope,Arial,sans-serif;color:var(--ax-muted);margin:14px 0 12px}
.ax-county-figure strong{display:block;font:500 40px/1.05 Editorial,Georgia,serif;letter-spacing:-.03em;color:var(--ax-navy);margin-bottom:4px}
.ax-county-spark{display:block;width:100%;max-width:160px;height:auto;margin-bottom:12px}
.ax-county-spark rect,.ax-spark rect{fill:var(--ax-bar)}
.ax-county-spark .ax-gap,.ax-spark .ax-gap{fill:#b9b0a1}
.ax-county dl{margin:0}
.ax-county dl div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--ax-hair);font:400 13px/1.4 Manrope,Arial,sans-serif}
.ax-county dt{color:var(--ax-muted)}
.ax-county dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}

/* Index */
.ax-explorer{background:var(--ax-sand);padding-block:90px}
.ax-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;margin:30px 0 18px}
.ax-controls label{display:grid;gap:6px;font:650 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.04em;color:var(--ax-muted)}
.ax-controls :is(input,select){min-height:44px;min-width:180px;padding:9px 14px;border:1px solid #857d70;border-radius:10px;background:var(--ax-raised);color:var(--ax-navy);font:500 15px Manrope,Arial,sans-serif}
.ax-controls input{min-width:240px}
.ax-count{flex:1 1 220px;margin:0;font:500 13px/1.5 Manrope,Arial,sans-serif;color:var(--ax-muted);text-align:right}
.ax-table-wrap{position:relative;max-height:720px;overflow:auto;background:var(--ax-raised);border:1px solid var(--ax-hair);border-radius:14px;padding:0 18px}
.ax-index-table thead th{position:sticky;top:0;z-index:1;background:var(--ax-raised);padding-top:14px;box-shadow:0 1px 0 var(--ax-hair)}
.ax-index-table thead button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:32px;font:inherit;color:inherit}
.ax-index-table thead button:after{content:"↕";opacity:.35;font-size:11px}
.ax-index-table th[aria-sort="ascending"] button:after{content:"↑";opacity:1}
.ax-index-table th[aria-sort="descending"] button:after{content:"↓";opacity:1}
.ax-index-table th[aria-sort]:not([aria-sort="none"]) button{color:var(--ax-navy)}
.ax-index-table tbody th{font-weight:600;white-space:nowrap}
.ax-index-table tbody th,.ax-index-table thead th:first-child{position:sticky;left:0;background:var(--ax-raised);z-index:1}
.ax-index-table thead th:first-child{z-index:2}
.ax-index-table tbody tr:hover th{background:#f3ede3}
.ax-index-table tbody td:nth-child(2),.ax-index-table thead th:nth-child(2){text-align:left;white-space:nowrap}
.ax-index-table tbody td:nth-child(2){color:var(--ax-muted)}
.ax-index-table tbody tr:hover{background:#f3ede3}
.ax-index-table tbody tr.is-hidden{display:none}
.ax-spark{display:inline-block;vertical-align:middle}
.ax-download{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:18px 0 0;font:400 13px/1.6 Manrope,Arial,sans-serif;color:var(--ax-muted)}
.ax-download a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--ax-navy);border-radius:999px;color:var(--ax-navy);text-decoration:none;font-weight:700}
.ax-download a:hover{background:var(--ax-navy);color:var(--ax-cream)}
.ax-noscript{font:400 14px/1.6 Manrope,Arial,sans-serif;color:var(--ax-muted);margin-top:14px}

/* Notes and limits */
.ax-notes{padding-block:90px 40px}
.ax-note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:30px}
.ax-note-grid article{padding:26px 0;border-top:1px solid var(--ax-hair)}
.ax-note-grid span{font:500 30px/1 Editorial,Georgia,serif;color:var(--ax-bronze)}
.ax-note-grid h3{font:500 26px/1.2 Editorial,Georgia,serif;letter-spacing:-.015em;margin:12px 0 10px;text-wrap:balance}
.ax-note-grid p{font:400 15px/1.8 Manrope,Arial,sans-serif;color:#3d4f59;margin:0;text-wrap:pretty}
.ax-limits{display:grid;grid-template-columns:.42fr .58fr;gap:48px;padding-block:60px 90px;border-top:1px solid var(--ax-hair)}
.ax-limits h2{margin-top:12px}
.ax-limits ul{list-style:none;margin:0;padding:0}
.ax-limits li{padding:16px 0;border-bottom:1px solid var(--ax-hair);font:400 15px/1.75 Manrope,Arial,sans-serif;color:#3d4f59}
.ax-limits li:first-child{padding-top:0}
.ax-limits strong{display:block;color:var(--ax-navy);font-weight:700;margin-bottom:2px}

/* Method and sources */
.ax-method{color:var(--ax-cream);background:radial-gradient(110% 85% at 20% 20%,#2a4a5e,#18303f 44%,#0d1b24);padding-block:96px 70px}
.ax-method .eyebrow{color:var(--ax-gold-light)}
.ax-method-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;margin-top:20px}
.ax-method-answer{font:400 16px/1.84 Manrope,Arial,sans-serif;color:#dfe3e0;margin:0 0 26px;text-wrap:pretty}
.ax-steps{list-style:none;margin:0 0 26px;padding:0}
.ax-steps li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:12px 0;border-top:1px solid #eaca9233;font:400 14px/1.7 Manrope,Arial,sans-serif;color:#c9d1cf}
.ax-steps span{font:500 20px/1.2 Editorial,Georgia,serif;color:var(--ax-gold)}
.ax-cite{overflow-wrap:anywhere;font:400 14px/1.75 Manrope,Arial,sans-serif;color:#c9d1cf;padding:18px 20px;border:1px solid #eaca9240;border-radius:12px;margin:0}
.ax-cite strong{color:var(--ax-gold-light)}
.ax-sources{display:grid;gap:12px;align-content:start}
.ax-sources a{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:18px 20px;border:1px solid #eaca9240;border-radius:12px;color:var(--ax-cream);text-decoration:none;transition:background .3s,border-color .3s}
.ax-sources a:hover{background:#ffffff0d;border-color:#eaca9280}
.ax-sources strong{font:600 15px/1.45 Manrope,Arial,sans-serif;grid-column:1}
.ax-sources span{font:400 13px/1.6 Manrope,Arial,sans-serif;color:#c9d1cf;grid-column:1}
.ax-sources span[aria-hidden]{grid-column:2;grid-row:1/3;align-self:center;color:var(--ax-gold)}
.ax-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:48px;border-top:1px solid #eaca9233}
.ax-related a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid #eaca9233;color:var(--ax-cream);text-decoration:none;font:600 15px/1.4 Manrope,Arial,sans-serif;transition:color .3s,padding .45s cubic-bezier(.16,1,.3,1)}
.ax-related a:hover{color:var(--ax-gold-light);padding-left:8px}
.ax-method small{display:block;margin-top:30px;font:700 11px/1.7 Manrope,Arial,sans-serif;letter-spacing:.1em;color:#c9d1cf}
.ax-tip-float{position:fixed;z-index:50;pointer-events:none;margin:0;padding:8px 12px;border-radius:8px;background:var(--ax-night);color:var(--ax-cream);font:600 13px/1.4 Manrope,Arial,sans-serif;box-shadow:0 8px 24px #0d1b2440;transform:translate(-50%,calc(-100% - 12px))}

@media (max-width:1100px){
 .ax-hero-layout,.ax-trend-grid,.ax-method-grid,.ax-limits{grid-template-columns:minmax(0,1fr)}
 .ax-answer{grid-template-columns:1fr}
 .ax-county-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ax-figures dl{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ax-tile:nth-child(3){border-left:0;padding-left:0}
 .ax-tile:nth-child(n+3){border-top:1px solid var(--ax-hair)}
}
@media (max-width:760px){
 .ax-hero-layout{padding-block:64px 64px}
 .ax-hero .eyebrow{margin-top:26px}
 .ax-answer,.ax-counties,.ax-notes{padding-block:56px}
 .ax-trend,.ax-explorer,.ax-method{padding-block:60px}
 .ax-figures dl,.ax-note-grid,.ax-related{grid-template-columns:1fr}
 .ax-tile,.ax-tile:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--ax-hair)}
 .ax-tile:first-child{border-top:0}
 .ax-county-grid{grid-template-columns:1fr}
 .ax-controls label,.ax-controls :is(input,select){width:100%;min-width:0}
 .ax-count{text-align:left}
 .ax-table-wrap{padding:0 12px;max-height:620px}
 .ax-index-table tbody th,.ax-index-table thead th:first-child{white-space:normal;min-width:8.5em;max-width:42vw}
 .ax-index-table tr>:nth-child(2){display:none}
 .ax-chart-card{padding:16px 12px 12px}
 .ax-chart .ax-tick{font-size:21px}
 .ax-trend-table{font-size:13px}
 .ax-trend-table th,.ax-trend-table td{padding:8px 5px}
 .ax-chart .ax-value{font-size:22px}
 .ax-plate{padding:20px}
}
@media (prefers-reduced-motion:reduce){
 .hf-adu-index *,.hf-adu-index *:before,.hf-adu-index *:after{transition:none!important;animation:none!important}
}
@media print{
 .ax-hero{background:#fff;color:#000}
 .ax-controls,.ax-download a,.ax-related,.ax-enter{display:none}
 .ax-table-wrap{max-height:none;overflow:visible;border:0}
 .ax-method{background:#fff;color:#000}
}