/* ============================================================
   Oil, Visualized  ·  css/regulators.css
   The "Where to look it up" section — the regulator hub and the
   ten state pages. Loaded after base.css.
   ============================================================ */

/* ---- breadcrumb ---- */
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:1.4rem 0 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair-2)}
.crumb a:hover{color:var(--ink);border-color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .here{color:var(--ink)}

/* ============ TILE MAP ============ */
.mapwrap{margin-top:2.2rem;border:1px solid var(--hair);border-radius:var(--radius-lg);
  background:var(--paper);overflow:hidden}
.map-head{padding:1rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--hair);background:var(--paper-2)}
.map-head .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--survey)}
.map-head h3{font-family:var(--display);font-weight:700;font-size:1.12rem;margin:.2rem 0 0;letter-spacing:-.01em}
.map-body{padding:clamp(1rem,3vw,1.8rem)}
.map-body svg{width:100%;height:auto;display:block;max-width:820px;margin:0 auto}

.tile rect{transition:stroke-width .15s ease,stroke .15s ease}
.tile.pick{cursor:pointer}
.tile.pick:hover rect,.tile.pick:focus-visible rect{stroke:var(--survey);stroke-width:2.5}
.tile.pick:focus-visible{outline:none}

.map-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1.2rem;padding-top:1.1rem;
  border-top:1px solid var(--hair);font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.02em}
.map-legend span.lg{display:flex;align-items:center;gap:.45rem;line-height:1.4}
.map-legend i{width:13px;height:13px;border-radius:3px;flex:0 0 auto;display:inline-block}
.map-note{margin-top:1rem;font-size:.88rem;color:var(--muted);font-style:italic;line-height:1.55}

/* ============ API NUMBER DECODER ============ */
.api{margin-top:2.2rem;border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
.api-head{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;justify-content:space-between;
  padding:1rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--hair);background:var(--paper-2)}
.api-head .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--survey)}
.api-head h3{font-family:var(--display);font-weight:700;font-size:1.12rem;margin:.2rem 0 0;letter-spacing:-.01em}
.api-head .hint{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--muted)}
.api-body{padding:clamp(1.1rem,3vw,1.8rem)}

/* the number itself */
.api-number{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.35rem;margin:.4rem 0 0}
.api-seg{display:flex;flex-direction:column;align-items:center;gap:.42rem;min-width:0}
.api-seg .digits{display:flex;align-items:center;gap:.1rem}
.api-seg .val{font-family:var(--mono);font-weight:700;letter-spacing:.02em;
  font-size:clamp(1.5rem,1rem + 3.2vw,2.6rem);line-height:1;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--hair-2);border-radius:8px;
  padding:.34em .3em;font-variant-numeric:tabular-nums;transition:background .2s ease,color .2s ease}
.api-seg.live .val{background:var(--mineral);color:var(--paper);border-color:var(--mineral)}
.api-seg.dim .val{opacity:.42}
.api-dash{font-family:var(--mono);font-weight:700;font-size:clamp(1.3rem,1rem + 2vw,2rem);
  color:var(--hair-2);align-self:flex-start;padding-top:.42em}
.api-seg .cap{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);text-align:center;max-width:13ch;line-height:1.35}

/* steppers */
.api-step{background:var(--paper);border:1px solid var(--hair-2);color:var(--muted);cursor:pointer;
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.8rem;line-height:1;padding:0;transition:all .15s ease;flex:0 0 auto}
.api-step:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.api-seg.static .api-step{visibility:hidden}

/* readout */
.api-read{margin:1.6rem auto 0;max-width:60ch;text-align:center;font-size:1.02rem;line-height:1.65;color:#322f29}
.api-read b{font-weight:500;color:var(--ink)}
.api-read .who{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--survey);margin-top:.6rem}

.api-controls{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem;
  padding-top:1.3rem;border-top:1px solid var(--hair)}
.api-btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--hair-2);color:var(--muted);cursor:pointer;
  padding:.46rem .9rem;border-radius:24px;transition:all .15s ease}
.api-btn:hover{background:var(--paper-2);color:var(--ink)}
.api-btn[aria-pressed="true"]{background:var(--mineral);color:var(--paper);border-color:var(--mineral)}
.api-foot{margin-top:1.3rem;font-size:.88rem;color:var(--muted);font-style:italic;line-height:1.55;max-width:70ch}

/* ============ HISTORY TIMELINE ============ */
.hist{margin-top:2rem;position:relative;padding-left:0}
.hist::before{content:"";position:absolute;left:5.4rem;top:.6rem;bottom:.6rem;width:2px;background:var(--hair-2)}
@media(max-width:639px){.hist::before{left:7.5px}}
.hev{display:grid;grid-template-columns:4.6rem 1.6rem 1fr;gap:0;padding:0 0 1.5rem}
@media(max-width:639px){.hev{grid-template-columns:1.4rem 1fr;padding-left:0}}
.hev .yr{font-family:var(--mono);font-weight:700;font-size:.82rem;color:var(--survey);
  text-align:right;padding-top:.1rem;letter-spacing:.02em}
@media(max-width:639px){.hev .yr{display:none}}
.hev .pip{position:relative}
.hev .pip::before{content:"";position:absolute;left:calc(.8rem - 7.5px);top:.35rem;width:11px;height:11px;
  border-radius:50%;background:var(--paper);border:3px solid var(--surface)}
@media(max-width:639px){.hev .pip::before{left:0}}
@media(max-width:639px){.hev.key .pip::before{left:-2px}}
.hev.pa .pip::before{border-color:var(--survey)}
.hev.key .pip::before{border-color:var(--mineral);width:15px;height:15px;top:.2rem;left:calc(.8rem - 9.5px)}
.hev .txt h4{font-family:var(--display);font-weight:700;font-size:1.02rem;margin:0 0 .25rem;letter-spacing:-.01em}
.hev .txt h4 .yrsm{display:none;font-family:var(--mono);font-weight:700;color:var(--survey);font-size:.8rem}
@media(max-width:639px){.hev .txt h4 .yrsm{display:inline;margin-right:.5rem}}
.hev .txt p{font-size:.95rem;line-height:1.58;color:#3a372f;margin:0}
.hev.pa .txt h4{color:var(--survey)}

/* ============ STATE CARD GRID ============ */
.states{display:grid;grid-template-columns:1fr;gap:12px;margin-top:1.8rem}
@media(min-width:700px){.states{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.states{grid-template-columns:1fr 1fr 1fr}}
.scard{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--paper);padding:1.05rem 1.15rem 1.1rem;text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.scard:hover{border-color:var(--mineral);transform:translateY(-2px);box-shadow:0 4px 14px rgba(27,26,23,.07)}
.scard .rank{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.scard .st{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.015em;margin:.12rem 0 .1rem}
.scard .ag{font-family:var(--mono);font-size:.72rem;color:var(--mineral);line-height:1.45;margin-bottom:.7rem}
.scard .pull{font-size:.9rem;line-height:1.5;color:#3a372f;flex:1}
.scard .pull b{font-weight:500;color:var(--ink)}
.scard .chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.85rem}
.scard .go{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--survey);margin-top:.9rem}

.chip-s{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.chip-free{background:var(--forc-bg);color:var(--forc)}
.chip-paid{background:var(--confirm-bg);color:var(--confirm)}
.chip-pool{background:var(--know-bg);color:var(--know)}
.chip-nopool{background:var(--flag-bg);color:var(--flag)}
.chip-av{background:var(--paper-2);color:var(--muted);border-color:var(--hair-2)}

/* ============ SPOKE PAGE: THE ONE DOCUMENT ============ */
.pullbox{margin-top:2rem;border:1px solid var(--hair-2);border-left:4px solid var(--survey);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:var(--paper-2);overflow:hidden}
.pullbox .pb-head{padding:1.1rem 1.4rem .3rem}
.pullbox .pb-head .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--survey)}
.pullbox .pb-head h3{font-family:var(--display);font-weight:800;font-size:1.3rem;
  letter-spacing:-.02em;margin:.2rem 0 0}
.pullbox .pb-why{padding:.5rem 1.4rem 0;font-size:.98rem;line-height:1.6;color:#322f29}
.pullbox ol{list-style:none;counter-reset:step;padding:1rem 1.4rem 1.4rem;margin:0;display:grid;gap:.6rem}
/* The <li> is deliberately NOT a flex container. It used to be, with the numbered
   circle as the first flex item — but flex blockifies every child, so each inline
   <b> naming a database or form became its own flex item. A step with two <b>s
   was six side-by-side boxes, not one sentence: each wrapped inside its own
   narrow column, and their combined minimum width overflowed .pullbox, which
   hides overflow. Absolute-positioned counter instead: the li stays a normal
   block and inline markup flows as text. Geometry matches the old flex version
   (20px circle, 32px text indent, .15rem drop from the top). */
.pullbox ol li{counter-increment:step;position:relative;padding-left:2rem;
  font-size:.95rem;line-height:1.55;color:#3a372f}
.pullbox ol li::before{content:counter(step);position:absolute;left:0;top:.15rem;
  width:20px;height:20px;border-radius:50%;
  background:var(--mineral);color:var(--paper);font-family:var(--mono);font-size:.66rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.pullbox ol li b{font-weight:500;color:var(--ink)}

/* ---- facts table on a spoke page ---- */
.facts{margin-top:1.2rem;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.frow{display:grid;grid-template-columns:1fr;gap:0;border-bottom:1px solid var(--hair)}
@media(min-width:620px){.frow{grid-template-columns:13rem 1fr}}
.frow:last-child{border-bottom:0}
.frow dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-2);padding:.75rem .95rem;margin:0}
.frow dd{padding:.75rem .95rem;margin:0;font-size:.93rem;line-height:1.55;color:#3a372f}
.frow dd b{font-weight:500;color:var(--ink)}

/* ---- resource links ---- */
.links{display:grid;grid-template-columns:1fr;gap:10px;margin-top:1.3rem}
@media(min-width:720px){.links{grid-template-columns:1fr 1fr}}
.lnk{display:block;border:1px solid var(--hair);border-radius:var(--radius);background:var(--paper);
  padding:.85rem 1rem;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.lnk:hover{border-color:var(--mineral);background:var(--paper-2)}
.lnk .n{font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:-.01em;display:block}
.lnk .u{font-family:var(--mono);font-size:.64rem;color:var(--survey);word-break:break-all;display:block;margin-top:.15rem}
.lnk .d{font-size:.88rem;color:var(--muted);line-height:1.5;display:block;margin-top:.35rem}

/* ---- prev / next between spokes ---- */
.pager{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;margin-top:3rem;
  padding-top:1.6rem;border-top:1px solid var(--hair)}
.pager a{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border:1px solid var(--hair-2);border-radius:24px;
  padding:.5rem 1rem;transition:all .15s ease}
.pager a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- standing verification note ---- */
.verify{margin-top:1.6rem;font-size:.86rem;line-height:1.6;color:var(--muted);font-style:italic;
  border-left:2px solid var(--hair-2);padding-left:.9rem;max-width:72ch}