/* regs-shared.css — shared styling for the DataDawn regulations hubs (docket-hub.html + agency-hub.html).
   Ported from org-shared.css so the regs hubs match the rest of the human portal; adds regs-specific
   bits (lifecycle phase bar, document timeline, rule/docket type badges, open-for-comment banner).
   Built with love by a human, a Claude, and DJ Crabdaddy 🦀 */
:root {
  --night:#0a0e1a; --deep:#111827; --twilight:#1a2342; --horizon:#2a3a6b;
  --dawn-amber:#f59e0b; --dawn-gold:#fbbf24; --dawn-light:#fde68a;
  --text-primary:#e2e8f0; --text-secondary:#94a3b8; --text-muted:#64748b;
  --surface:rgba(255,255,255,0.03); --surface-hover:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08); --pos:#4ade80; --neg:#f87171;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--night); color:var(--text-primary); -webkit-font-smoothing:antialiased; min-height:100vh; }
/* base link color — keep classless anchors on-palette instead of harsh browser-default blue (matches `td a`) */
a { color:var(--dawn-gold); text-decoration:none; }

nav { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 2rem; border-bottom:1px solid var(--border); background:rgba(10,14,26,0.95); backdrop-filter:blur(20px); position:sticky; top:0; z-index:100; }
.nav-brand { font-family:'DM Serif Display',serif; font-size:1.4rem; color:var(--dawn-gold); text-decoration:none; }
.nav-links { display:flex; gap:1.5rem; align-items:center; }
.nav-links a { font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--text-muted); text-decoration:none; text-transform:uppercase; letter-spacing:0.1em; transition:color .3s; }
.nav-links a:hover { color:var(--dawn-gold); }

.wrap { max-width:1100px; margin:0 auto; padding:1.5rem 1.25rem 4rem; }

.finder { position:relative; margin:0 0 2rem; }
.finder input { width:100%; padding:0.85rem 1rem; font-family:'Outfit',sans-serif; font-size:1rem; color:var(--text-primary); background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.finder input:focus { outline:none; border-color:var(--dawn-amber); }
.finder-results { position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--deep); border:1px solid var(--border); border-radius:10px; overflow:hidden; z-index:30; display:none; }
.finder-results.show { display:block; }
.finder-results a { display:flex; justify-content:space-between; gap:1rem; padding:0.7rem 1rem; text-decoration:none; color:var(--text-primary); border-bottom:1px solid var(--border); }
.finder-results a:last-child { border-bottom:none; }
.finder-results a:hover { background:var(--surface-hover); }
.finder-results .meta { color:var(--text-muted); font-size:0.8rem; font-family:'IBM Plex Mono',monospace; white-space:nowrap; }

.o-head { border-bottom:1px solid var(--border); padding-bottom:1rem; margin-bottom:1rem; }
.o-name { font-family:'DM Serif Display',serif; font-size:1.9rem; line-height:1.18; }
.o-sub { color:var(--text-secondary); font-family:'IBM Plex Mono',monospace; font-size:0.85rem; margin-top:0.5rem; letter-spacing:0.04em; display:flex; flex-wrap:wrap; gap:0.5rem 0.9rem; align-items:center; }
.o-sub a { color:var(--text-secondary); text-decoration:none; border-bottom:1px dotted var(--text-muted); }
.o-sub a:hover { color:var(--dawn-gold); }

/* badges */
.agency-badge { font-family:'IBM Plex Mono',monospace; font-size:0.68rem; font-weight:500; padding:0.18rem 0.55rem; border-radius:4px; background:rgba(245,158,11,0.12); color:var(--dawn-amber); letter-spacing:0.04em; text-decoration:none; }
a.agency-badge:hover { background:rgba(245,158,11,0.22); }
.type-badge { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.66rem; font-weight:500; padding:0.12rem 0.5rem; border-radius:4px; text-transform:uppercase; letter-spacing:0.04em; background:rgba(148,163,184,0.15); color:#94a3b8; }
.type-badge.rule { background:rgba(34,197,94,0.13); color:var(--pos); }
.type-badge.proposed { background:rgba(96,165,250,0.15); color:#60a5fa; }
.type-badge.notice { background:rgba(168,85,247,0.13); color:#c084fc; }
.type-badge.rulemaking { background:rgba(245,158,11,0.12); color:var(--dawn-amber); }
.type-badge.open { background:rgba(34,197,94,0.16); color:var(--pos); }
.type-badge.lobby { background:rgba(244,114,182,0.13); color:#f472b6; }

.tabs { display:flex; gap:0.25rem; overflow-x:auto; border-bottom:1px solid var(--border); margin-bottom:1.25rem; }
.tabs button { flex:0 0 auto; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); padding:0.7rem 0.85rem; transition:color .2s,border-color .2s; white-space:nowrap; }
.tabs button:hover { color:var(--text-secondary); }
.tabs button.active { color:var(--dawn-gold); border-bottom-color:var(--dawn-amber); }
.panel { display:none; scroll-margin-top:90px; } .panel.active { display:block; }

.tab-total { font-size:1.05rem; color:var(--text-secondary); margin-bottom:0.9rem; }
.tab-total b { color:var(--dawn-gold); font-weight:600; }

.overview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.8rem; margin-bottom:1.5rem; }
.overview-item { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:0.9rem 1rem; }
.overview-label { font-family:'IBM Plex Mono',monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:0.35rem; }
.overview-value { font-size:1rem; word-break:break-word; }
.overview-value.big { font-size:1.5rem; color:var(--dawn-gold); font-weight:500; }

.section-title { font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin:1.5rem 0 0.7rem; }
.lead { color:var(--text-secondary); line-height:1.6; margin-bottom:0.6rem; font-size:0.95rem; }

/* open-for-comment banner */
.oc-banner { display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem 1rem; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.3); border-radius:10px; padding:0.8rem 1rem; margin-bottom:1.3rem; }
.oc-banner .oc-dot { width:9px; height:9px; border-radius:50%; background:var(--pos); box-shadow:0 0 10px var(--pos); flex:0 0 auto; }
.oc-banner .oc-text { color:var(--dawn-light); font-size:0.92rem; }
.oc-banner a { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:#0a0e1a; background:linear-gradient(135deg,var(--dawn-gold),var(--dawn-amber)); padding:0.45rem 0.9rem; border-radius:7px; text-decoration:none; white-space:nowrap; }
.oc-banner a:hover { filter:brightness(1.08); }
.prov-note { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--dawn-amber); border-radius:8px; padding:0.85rem 1rem; margin-bottom:1.2rem; color:var(--text-secondary); font-size:0.88rem; line-height:1.55; }
.tl-window { font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--text-muted); }

/* lifecycle phase bar (docket Overview) — proposed → comment window → final rule */
.lifecycle { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.4rem 0 1.4rem; }
.lc-step { flex:1 1 150px; min-width:150px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--text-muted); border-radius:8px; padding:0.7rem 0.85rem; }
.lc-step.done { border-left-color:var(--dawn-amber); }
.lc-step.active { border-left-color:var(--pos); background:rgba(34,197,94,0.06); }
/* A withdrawn/suspended/rescinded final is the OPPOSITE outcome of adoption — the visual carries it, not just the
   label: a distinct (non-amber) border + a struck date, so a skimmer can't read "adopted" off a complete-looking bar. */
.lc-step.withdrawn { border-left-color:var(--neg); background:rgba(248,113,113,0.05); }
.lc-step.withdrawn .lc-date { text-decoration:line-through; text-decoration-color:var(--neg); text-decoration-thickness:1px; }
.lc-step .lc-stage { font-family:'IBM Plex Mono',monospace; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.lc-step .lc-date { font-size:1rem; color:var(--text-primary); margin-top:0.25rem; }
.lc-step .lc-note { font-size:0.72rem; color:var(--text-muted); margin-top:0.15rem; }

/* document timeline */
.timeline { list-style:none; margin:0.3rem 0; }
.timeline li { position:relative; padding:0.7rem 0 0.7rem 1.4rem; border-left:2px solid var(--border); }
.timeline li::before { content:''; position:absolute; left:-5px; top:1rem; width:8px; height:8px; border-radius:50%; background:var(--dawn-amber); }
.timeline .tl-date { font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--text-muted); }
.timeline .tl-title { font-size:0.9rem; color:var(--text-primary); margin-top:0.2rem; line-height:1.4; }
.timeline .tl-type { margin-top:0.3rem; display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }

.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
table { width:100%; border-collapse:collapse; font-size:0.86rem; }
th,td { text-align:left; padding:0.55rem 0.8rem; border-bottom:1px solid var(--border); vertical-align:top; }
th { font-family:'IBM Plex Mono',monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); position:sticky; top:0; background:var(--deep); white-space:nowrap; }
tbody tr:hover { background:var(--surface-hover); }
td a { color:var(--dawn-gold); text-decoration:none; } td a:hover { text-decoration:underline; }
td.money { font-family:'IBM Plex Mono',monospace; color:var(--dawn-light); white-space:nowrap; }
td.muted { color:var(--text-muted); }
td.mono { font-family:'IBM Plex Mono',monospace; font-size:0.74rem; }
.nowrap { white-space:nowrap; }

.cross-links { display:flex; flex-wrap:wrap; gap:0.6rem; }
.cross-link { font-family:'IBM Plex Mono',monospace; font-size:0.74rem; color:var(--text-secondary); text-decoration:none; border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.85rem; }
.cross-link:hover { color:var(--dawn-gold); border-color:rgba(245,158,11,0.4); }
.src-link { font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--dawn-amber); text-decoration:none; }
.src-link:hover { text-decoration:underline; }
.excerpt { font-size:0.84rem; color:var(--text-muted); margin-top:0.4rem; line-height:1.5; white-space:pre-wrap; }
.load-more { display:block; width:100%; padding:0.7rem; margin-top:0.9rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--dawn-gold); font-family:'IBM Plex Mono',monospace; font-size:0.82rem; cursor:pointer; }
.load-more:hover { background:rgba(245,158,11,0.08); }

.src { font-size:0.78rem; color:var(--text-muted); margin-top:0.8rem; }
.src a { color:var(--text-secondary); }

/* pagination — page through a full result set (mirrors browse.html) */
.results-status { font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--text-secondary); margin:0 0 0.6rem; }
.results-status b { color:var(--dawn-gold); }
.pager { display:flex; justify-content:center; align-items:center; gap:0.8rem; margin-top:1.1rem; scroll-margin-top:90px; }
.pager button { font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--text-secondary); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:0.5rem 1rem; cursor:pointer; }
.pager button:hover:not(:disabled) { color:var(--dawn-gold); border-color:rgba(245,158,11,0.4); }
.pager button:disabled { opacity:0.35; cursor:not-allowed; }
.pager .pg { font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--text-muted); }

.empty { color:var(--text-muted); padding:1.5rem; text-align:center; line-height:1.6; }
.empty b { color:var(--text-secondary); }
.err { color:var(--neg); padding:1rem; }
.sk { background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hover) 50%,var(--surface) 75%); background-size:200% 100%; animation:sh 1.3s infinite; border-radius:6px; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sk-line { height:0.9rem; margin:0.5rem 0; } .sk-line.lg { height:1.8rem; width:55%; } .sk-line.md { width:40%; }

.modal-overlay { position:fixed; inset:0; background:rgba(5,8,16,0.82); backdrop-filter:blur(6px); z-index:200; display:none; align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto; }
.modal-overlay.show { display:flex; }
.modal { position:relative; max-width:760px; width:100%; background:var(--deep); border:1px solid var(--border); border-radius:14px; padding:1.6rem 1.4rem 1.9rem; }
.modal-close { position:absolute; top:0.6rem; right:0.8rem; background:none; border:none; color:var(--text-muted); font-size:1.25rem; line-height:1; cursor:pointer; }
.modal-close:hover { color:var(--dawn-gold); }

footer { border-top:1px solid var(--border); margin-top:3rem; padding:1.5rem 2rem; text-align:center; color:var(--text-muted); font-size:0.78rem; }
footer a { color:var(--text-secondary); text-decoration:none; }

@media (max-width:640px){
  nav { padding:1rem 1.1rem; flex-wrap:wrap; gap:0.4rem 1rem; }
  .nav-links { gap:0.75rem; flex-wrap:wrap; }
  .nav-links a { font-size:0.6rem; letter-spacing:0.05em; }
  .o-name { font-size:1.45rem; } .wrap { padding:1.1rem 0.9rem 3rem; }
  .overview-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
}