/* Arc Hero: home density timeline. Dark scope (.arc-hero, tokens in shell.css).
 * Uses Chaos navy editorial treatment from chaos-tokens.css */
.arc-hero{padding:var(--chaos-space-12, 56px) 0 76px;position:relative;overflow:hidden;border-bottom:1px solid var(--h-line)}
.arc-hero .atlas-wrap{max-width:1268px;margin:0 auto;padding-inline:24px;box-sizing:border-box;position:relative}

/* hero title + lede + search */
.arc-hero-intro{padding-bottom:44px}
.arc-hero-kicker{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--h-acc2);font-weight:700}
.arc-hero-title{font-family:var(--disp);font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.02em;font-weight:300;margin:16px 0 0;max-width:17ch;color:var(--h-tx)}
.arc-hero-title strong{font-weight:500}
.arc-hero-lede{color:var(--h-tx2);font-size:clamp(15px,1.4vw,18px);max-width:54ch;margin:18px 0 0;line-height:1.55}

/* header row: frame counts + range control */
.arc-hero-header{margin-top:40px;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;border-top:1px solid var(--h-line2)}
.arc-frame{margin:0;display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-family:var(--mono)}
.arc-frame dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--h-acc2);font-weight:700}
.arc-frame dd{margin:0}
.arc-frame-count{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.arc-frame-count:hover{opacity:.85}
.arc-frame-count b{font-size:20px;line-height:1;letter-spacing:-.015em;font-weight:700}
.arc-frame-count span{font-size:10px;letter-spacing:.1em;color:#D2DBEB;font-weight:600}
.arc-frame-count.arc-e1 b{color:var(--h-e1)}
.arc-frame-count.arc-e2 b{color:var(--h-e2)}
.arc-frame-count.arc-e3 b{color:var(--h-e3)}
.arc-frame-note{font-size:10px;letter-spacing:.06em;color:#8A9AB2;white-space:nowrap;display:inline-flex;align-items:center}
.arc-frame-sotu a{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--h-tx2);font-weight:700;text-decoration:none;white-space:nowrap}
.arc-frame-sotu a:hover{color:var(--h-tx)}
.arc-range{display:flex;gap:2px;flex-wrap:wrap}
.arc-range button{font:600 12px var(--mono);letter-spacing:.03em;color:var(--h-tx2);background:transparent;border:1px solid var(--h-line2);padding:8px 12px;min-height:36px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;gap:7px}
.arc-range-mark{width:13px;height:13px;flex:none;opacity:.9}
.arc-range-more{position:relative;display:inline-flex}
.arc-range-more summary{list-style:none;cursor:pointer;font:600 12px var(--mono);letter-spacing:.03em;color:var(--h-tx2);border:1px solid var(--h-line2);padding:8px 12px;min-height:36px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;margin-left:-1px}
.arc-range-more summary::-webkit-details-marker{display:none}
.arc-range-more summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.arc-range-more summary:hover{color:var(--h-tx)}
.arc-range-more[open] summary{color:var(--h-tx);border-color:var(--h-acc2)}
.arc-range-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:6;display:flex;flex-direction:column;gap:2px;background:var(--h-panel);border:1px solid var(--h-line2);border-radius:6px;padding:4px;min-width:150px;box-shadow:0 16px 40px rgba(12,17,29,.4)}
.arc-range-menu button{border:0;justify-content:flex-start;width:100%}
.arc-range-menu button:hover{background:rgba(45,106,231,.14)}
.arc-range button+button{margin-left:-1px}
.arc-range button:hover{color:var(--h-tx)}
.arc-range button[aria-pressed="true"]{background:rgba(45,106,231,.18);border-color:var(--h-acc2);color:var(--h-tx)}
.arc-range button:focus-visible{outline:2px solid var(--h-acc2);outline-offset:2px;position:relative;z-index:1}

/* chart mount */
.arc-hero-chart-wrap{margin-top:22px}
.arc-hero-chart{position:relative}
.arc-canvas{position:relative}
.arc-overlay{position:absolute;inset:0;pointer-events:none}
.arc-overlay span{position:absolute;white-space:nowrap;line-height:1}
.arc-era-label{top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;font-weight:600;color:#5D6F8A}
.arc-tick-label{transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;font-weight:600;color:#8A9AB2}
.arc-highlight-label{font-family:var(--sans);font-size:12px;font-weight:600;color:#f2f4f7}
.arc-milestone-label{font-family:var(--mono);font-size:10.5px;font-weight:600;color:#98a2b3}
.arc-mark-label{top:2px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--h-acc2)}
.arc-now-pill{display:inline-flex;align-items:center;justify-content:center;width:44px;height:20px;border:1px solid var(--h-tx2);border-radius:10px;font:700 10.5px var(--mono);letter-spacing:.14em;color:var(--h-tx)}
.arc-now-dot{animation:arc-pulse 2.4s ease-in-out infinite}
@keyframes arc-pulse{0%{r:5}50%{r:7}100%{r:5}}

/* loading skeleton */
.arc-state{position:relative;overflow:hidden}
.arc-skeleton-axis{position:absolute;left:0;right:0;bottom:64px;height:1px;background:var(--h-line2)}
.arc-skeleton-bars{position:absolute;left:8%;right:4%;bottom:65px;height:150px;display:flex;align-items:flex-end;gap:6px}
.arc-skeleton-bar{flex:1;border-radius:6px 6px 0 0;background:var(--h-panel);animation:arc-shimmer 1.8s ease-in-out infinite}
@keyframes arc-shimmer{0%{opacity:.35}50%{opacity:.7}100%{opacity:.35}}

/* error / empty panels */
.arc-panel{border:1px solid var(--h-line2);border-radius:8px;background:var(--h-panel);padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.arc-error .arc-panel{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 16px))}
.arc-state-overlay.arc-empty{position:absolute;left:50%;top:60px;transform:translateX(-50%);width:min(520px,calc(100% - 16px))}
.arc-pip{flex:none;width:8px;height:8px;border-radius:50%;background:#f2667c;margin-top:6px;display:block}
.arc-pip-muted{background:var(--h-tx3)}
.arc-panel-body{min-width:0;flex:1}
.arc-panel-title{margin:0;font-size:14px;font-weight:600;color:var(--h-tx)}
.arc-panel-detail{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--h-tx2)}
.arc-panel-actions{display:flex;gap:8px;margin-top:12px}
.arc-btn{padding:8px 14px;min-height:32px;border-radius:4px;font:500 13px var(--sans);cursor:pointer;border:1px solid var(--h-acc2);background:var(--h-acc);color:#fff;text-decoration:none;display:inline-flex;align-items:center}
.arc-btn-outline{background:transparent;color:var(--h-tx2);border-color:var(--h-line2)}
.arc-btn-outline:hover{color:var(--h-tx);border-color:var(--h-tx2)}

/* hover card */
.arc-card-host{position:absolute;inset:0;pointer-events:none}
.arc-card{position:absolute;width:300px;background:var(--h-panel);border:1px solid var(--h-line2);border-radius:8px;box-shadow:0 24px 60px rgba(12,17,29,.45),0 6px 16px rgba(12,17,29,.3);padding:14px 16px;z-index:5}
.arc-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.arc-card-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.arc-card-date{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--h-tx3)}
.arc-card-title{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:var(--h-tx)}
.arc-card-body{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--h-tx2)}
.arc-card-tiers{display:flex;gap:14px;margin-top:10px;font-family:var(--mono);font-size:11px;font-weight:700}
.arc-card-tier-e1{color:var(--h-e1)}
.arc-card-tier-e2{color:var(--h-e2)}
.arc-card-tier-e3{color:var(--h-e3)}
.arc-card-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.arc-card-list li{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:12px;line-height:1.4;color:var(--h-tx2)}
.arc-card-item-tier{font-family:var(--mono);font-size:10px;font-weight:700;padding-top:2px}
.arc-card-item-title{color:var(--h-tx)}
.arc-card-editorial{display:inline-block;margin-top:10px;font:700 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--h-tx3);border:1px solid var(--h-line2);border-radius:3px;padding:2px 6px}
.arc-card-cta{margin:10px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--h-acc2);font-weight:700}

/* footer row: legend, caption, monthly table, source link */
.arc-hero-footer{margin-top:8px}
.arc-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A9AB2;font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--h-line)}
.arc-legend span{display:inline-flex;align-items:center;gap:6px}
.arc-swatch{width:10px;height:10px;border-radius:2px;display:inline-block}
.arc-swatch.arc-e1{background:var(--h-e1)}
.arc-swatch.arc-e2{background:var(--h-e2)}
.arc-swatch.arc-e3{background:var(--h-e3)}
.arc-swatch.arc-milestone{width:9px;height:9px;border-radius:50%;border:1.5px dashed var(--h-tx3);box-sizing:border-box;background:transparent}
.arc-swatch.arc-now{width:9px;height:9px;border-radius:50%;background:var(--h-tx)}
.arc-caption{margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:#8A9AB2;line-height:1.55}
.arc-caption a{color:var(--h-tx2)}
.arc-table{display:inline-block;margin:6px 20px 0 0;font-size:12px;color:var(--h-tx2);vertical-align:top}
.arc-table summary{cursor:pointer;min-height:36px;padding:8px 0;color:var(--h-acc2)}
.arc-table-scroll{overflow-x:auto;max-width:100%}
.arc-data-table{width:100%;border-collapse:collapse;white-space:nowrap}
.arc-data-table caption{text-align:left;padding:12px 0;font-weight:600;color:var(--h-tx)}
.arc-data-table th,.arc-data-table td{text-align:right;padding:8px 12px;border-bottom:1px solid var(--h-line)}
.arc-data-table th:first-child,.arc-data-table td:first-child{text-align:left}
.arc-source{display:inline-block;margin-top:6px;font-size:12px;line-height:36px;color:var(--h-acc2)}

@media(max-width:900px){
  .arc-hero-header{align-items:flex-start}
}
@media(max-width:640px){
  .arc-hero{padding:40px 0 56px}
  .arc-frame{gap:12px}
  .arc-card{width:min(300px,calc(100% - 16px))}
}

/* Mobile list variant (README WU-5): arc-hero.js switches from the SVG to
 * paintMobileReady() at this width and renders the markup styled below. */
@media(max-width:540px){
  .arc-hero-header .arc-range{display:none}
  .arc-frame{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:10px}
  .arc-frame dt{grid-column:1/-1}
  .arc-frame-sotu{grid-column:1/-1}

  .arc-mobile{display:flex;flex-direction:column;gap:12px}
  .arc-m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .arc-m-title{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--h-acc2);font-weight:700}
  .arc-m-range{display:flex;gap:2px;background:rgba(24,34,48,.6);border:1px solid var(--h-line2);border-radius:6px;padding:2px}
  .arc-m-range-btn{font:700 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;min-height:32px;border-radius:4px;border:0;cursor:pointer;background:transparent;color:var(--h-tx2)}
  .arc-m-range-btn[aria-pressed="true"]{background:rgba(91,138,238,.22);color:var(--h-tx)}
  .arc-m-range-btn:focus-visible{outline:2px solid var(--h-acc2);outline-offset:2px}

  .arc-m-legend{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A9AB2;font-weight:600}
  .arc-m-legend-item{display:inline-flex;align-items:center;gap:5px}

  .arc-m-list{list-style:none;margin:0;padding:0 0 0 22px;position:relative;border-left:1px solid var(--h-line2)}
  .arc-m-list>li{position:relative;padding:0 0 18px}

  .arc-m-now-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;min-height:44px}
  .arc-m-now-dot{position:absolute;left:-27px;top:calc(50% - 5px);width:11px;height:11px;border-radius:50%;background:var(--h-acc);border:2px solid var(--navy);box-sizing:border-box;animation:arc-m-pulse 2.4s ease-in-out infinite}
  .arc-m-now-badge{font:700 10px var(--mono);letter-spacing:.14em;color:var(--h-acc2);border:1px solid var(--h-acc);border-radius:4px;padding:2px 6px;flex:none}
  .arc-m-now-date{font-family:var(--mono);font-size:10.5px;color:#8A9AB2;letter-spacing:.06em}
  @keyframes arc-m-pulse{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}

  .arc-m-row-dot{position:absolute;left:-27px;top:5px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--navy);box-sizing:border-box}
  .arc-m-row-link{display:block;text-decoration:none;color:inherit;min-height:44px}
  .arc-m-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .arc-m-row-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:#D2DBEB}
  .arc-m-row-total{font-family:var(--mono);font-size:10px;color:#8A9AB2;letter-spacing:.04em}
  .arc-m-bar{display:flex;height:8px;margin-top:8px;border-radius:2px;overflow:hidden;background:rgba(91,138,238,.1)}
  .arc-m-bar-seg{display:block;height:100%}
  .arc-m-row-tiers{display:flex;gap:10px;margin-top:6px;font-family:var(--mono);font-size:10px;font-weight:700;white-space:nowrap}
  .arc-m-row-tier-e1{color:var(--h-e1)}
  .arc-m-row-tier-e2{color:var(--h-e2)}
  .arc-m-row-tier-e3{color:var(--h-e3)}

  .arc-m-hi-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
  .arc-m-hi-card{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;text-decoration:none;color:inherit;padding:10px 12px;min-height:44px;box-sizing:border-box;border:1px solid var(--h-line2);border-radius:6px;background:var(--h-panel)}
  .arc-m-hi-card:hover{border-color:var(--h-acc)}
  .arc-m-hi-tier{font-family:var(--mono);font-size:10px;font-weight:700;padding-top:2px}
  .arc-m-hi-text{display:flex;flex-direction:column;gap:3px;min-width:0}
  .arc-m-hi-title{font-size:13px;line-height:1.4;font-weight:500;color:var(--h-tx)}
  .arc-m-hi-meta{font-family:var(--mono);font-size:10px;color:#8A9AB2;font-weight:600;letter-spacing:.04em}

  .arc-m-milestone::before{content:"";position:absolute;left:-27.5px;top:4px;width:9px;height:9px;border-radius:50%;border:1.5px dashed var(--h-tx3);box-sizing:border-box;background:var(--navy)}
  .arc-m-milestone-link{display:block;text-decoration:none;color:inherit;min-height:44px}
  .arc-m-milestone-date{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:#8A9AB2}
  .arc-m-milestone-tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8A9AB2;border:1px dashed var(--h-line2);border-radius:3px;padding:1px 5px}
  .arc-m-milestone-summary{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--h-tx2)}

  .arc-m-empty{padding:0 0 18px}
  .arc-m-more{padding:0}
  .arc-m-more-btn{width:100%;min-height:44px;padding:10px 14px;border-radius:6px;border:1px solid var(--h-line2);background:transparent;color:var(--h-acc2);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer}
}

/* More summary reflects a menu-chosen range as the pressed pill. */
.arc-range-more summary[data-active="true"]{background:rgba(45,106,231,.18);border-color:var(--h-acc2);color:var(--h-tx)}