/* ==========================================================================
   Area page interactive layer.

   Prefixed opi-ax- throughout so nothing here can collide with, or partially
   override, a component defined in another stylesheet.
   ========================================================================== */

.opi-ax{margin:var(--space-16) auto;scroll-margin-top:var(--space-16)}
.opi-ax h2{margin:0 0 var(--space-4);font-family:var(--font-display);font-size:var(--text-h2);line-height:var(--leading-snug);letter-spacing:var(--tracking-display);font-weight:var(--weight-bold);color:var(--text-1)}
.opi-ax__lede{margin:0 0 var(--space-8);max-width:64ch;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-2)}
.opi-ax__note{margin:var(--space-4) 0 0;max-width:70ch;font-size:var(--text-caption);line-height:1.55;color:var(--text-3)}

/* --- schematic map ------------------------------------------------------ */
.opi-ax-figure{margin:0}
.opi-ax-figure figcaption{margin:var(--space-4) 0 0;padding-left:var(--space-4);border-left:2px solid var(--accent);font-size:var(--text-caption);line-height:1.55;color:var(--text-3)}
.opi-ax-svg{display:block;width:100%;height:auto;border:1px solid var(--border-1)}
.opi-ax-node{cursor:pointer}
.opi-ax-node .opi-ax-dot,.opi-ax-node .opi-ax-halo{transition:all var(--dur) var(--ease-out)}
.opi-ax-node:hover .opi-ax-halo,.opi-ax-node:focus-visible .opi-ax-halo,.opi-ax-node.is-active .opi-ax-halo{opacity:.16}
.opi-ax-node:hover .opi-ax-dot,.opi-ax-node.is-active .opi-ax-dot{r:8}
.opi-ax-node.is-active .opi-ax-label{fill:var(--accent-strong)}
.opi-ax-node:focus{outline:none}
.opi-ax-node:focus-visible .opi-ax-dot{stroke:var(--accent-strong);stroke-width:3}
.opi-ax-lm{pointer-events:none}

/* --- live map ----------------------------------------------------------- */
.opi-ax-live{margin:var(--space-6) 0 0}
.opi-ax-btn{display:inline-block;padding:var(--space-3) var(--space-6);background:var(--surface-ink);border:1px solid var(--surface-ink);color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;cursor:pointer;transition:background var(--dur) var(--ease-out)}
.opi-ax-btn:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.opi-ax-btn:disabled{opacity:.6;cursor:progress}
.opi-ax-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.opi-ax-canvas{height:480px;margin:var(--space-5) 0 0;border:1px solid var(--border-1);background:var(--surface-sunken)}
.opi-ax-canvas[hidden]{display:none}
.opi-ax-canvas .leaflet-container{height:100%;width:100%;font-family:var(--font-body)}

/* --- comparator --------------------------------------------------------- */
.opi-ax-controls{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:end;margin:0 0 var(--space-6);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-1)}
.opi-ax-controls[hidden]{display:none}
.opi-ax-field{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-caption)}
.opi-ax-field>span{font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3)}
.opi-ax-field>span em{font-style:normal;color:var(--text-3);opacity:.75}
.opi-ax-field select,.opi-ax-field input{padding:var(--space-3) var(--space-4);background:var(--surface-card);border:1px solid var(--border-2);font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-1)}
.opi-ax-field input{font-variant-numeric:tabular-nums}
.opi-ax-field select:focus-visible,.opi-ax-field input:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.opi-ax-count{margin:0 0 var(--space-1);margin-left:auto;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-3)}

.opi-ax-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.opi-ax-table{width:100%;min-width:680px;border-collapse:collapse;font-size:var(--text-body-sm)}
.opi-ax-table th{padding:0 var(--space-4) var(--space-3) 0;text-align:left;font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-3);border-bottom:1px solid var(--text-1);white-space:nowrap}
.opi-ax-table td,.opi-ax-table tbody th{padding:var(--space-4) var(--space-4) var(--space-4) 0;border-bottom:1px solid var(--border-1);vertical-align:top}
.opi-ax-table tbody th{text-align:left;font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-semibold);color:var(--text-1);text-transform:none;letter-spacing:0;border-bottom:1px solid var(--border-1)}
.opi-ax-table td{color:var(--text-2)}
.opi-ax-table tr{transition:background var(--dur-fast) var(--ease-out)}
.opi-ax-table tbody tr:hover{background:var(--surface-sunken)}
.opi-ax-table tbody tr.is-active{background:var(--accent-soft)}
.opi-ax-table tbody tr.is-active th{color:var(--accent-strong)}
.opi-ax-basis{font-size:var(--text-caption);color:var(--text-3)}
.opi-ax-table--tight{min-width:0}
.opi-ax-table--tight th,.opi-ax-table--tight td{padding:var(--space-3) 0}
.opi-ax-total th,.opi-ax-total td{border-top:1.5px solid var(--text-1);border-bottom:none;font-weight:var(--weight-bold);color:var(--text-1)}

/* --- calculator --------------------------------------------------------- */
.opi-ax-calc__grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.15fr);gap:var(--space-12)}
.opi-ax-calc__inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-5);align-content:start}
.opi-ax-calc__out{padding:var(--space-6);background:var(--surface-sunken);border-top:2px solid var(--accent)}
.opi-ax-calc__headline{display:flex;align-items:center;gap:var(--space-5);margin:0 0 var(--space-4)}
.opi-ax-calc__k{display:block;margin-bottom:var(--space-1);font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3)}
.opi-ax-calc__headline strong{font-family:var(--font-display);font-size:var(--text-h2);line-height:1;font-weight:var(--weight-display);color:var(--text-1);font-variant-numeric:tabular-nums}
.opi-ax-calc__net{color:var(--accent-strong)}
.opi-ax-calc__net.is-negative{color:var(--error)}
.opi-ax-calc__arrow{font-size:var(--text-h3);color:var(--text-3)}
.opi-ax-calc__drag{margin:0 0 var(--space-6);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-2)}
.opi-ax-calc__drag strong{color:var(--text-1);font-variant-numeric:tabular-nums}

/* --- pipeline ----------------------------------------------------------- */
.opi-ax-bars{margin:0;padding:0;list-style:none;border-top:1px solid var(--border-1)}
.opi-ax-bar{display:grid;grid-template-columns:64px 1fr 88px;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:1px solid var(--border-1)}
.opi-ax-bar__y{font-family:var(--font-mono);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-1)}
.opi-ax-bar__track{height:14px;background:var(--gray-100)}
.opi-ax-bar__fill{display:block;height:100%;background:var(--accent);transition:width var(--dur) var(--ease-out)}
.opi-ax-bar__v{font-family:var(--font-mono);font-size:var(--text-body-sm);text-align:right;font-variant-numeric:tabular-nums;color:var(--text-1)}
.opi-ax-bar__n{grid-column:2/-1;font-size:var(--text-caption);color:var(--text-3)}

@media(max-width:900px){
  .opi-ax{margin:var(--space-12) auto}
  .opi-ax h2{font-size:var(--text-h3)}
  .opi-ax-calc__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .opi-ax-canvas{height:380px}
}
@media(max-width:640px){
  .opi-ax-controls{gap:var(--space-4)}
  .opi-ax-count{margin-left:0}
  .opi-ax-calc__headline{gap:var(--space-4)}
  .opi-ax-calc__headline strong{font-size:var(--text-h3)}
  .opi-ax-bar{grid-template-columns:52px 1fr 72px;gap:var(--space-3)}
  .opi-ax-canvas{height:320px}
}
@media(prefers-reduced-motion:reduce){
  .opi-ax-node .opi-ax-dot,.opi-ax-node .opi-ax-halo,.opi-ax-bar__fill,.opi-ax-table tr{transition:none}
}
/* ==========================================================================
   Getting in and out.

   Defined here in full. entity.css keeps only the shared h2 rule, so these
   two files cannot partially override one another.
   ========================================================================== */

.opi-conn{margin:var(--space-16) auto;scroll-margin-top:var(--space-16)}
.opi-conn__lede{margin:0 0 var(--space-8);max-width:66ch;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-2)}
.opi-conn__ico{width:20px;height:20px;flex:0 0 20px}

/* --- mode cards --------------------------------------------------------- */
.opi-conn__modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;margin:0 0 var(--space-12);padding:0;list-style:none;background:var(--border-1);border-block:1px solid var(--border-1)}
.opi-conn__mode{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--surface-card);border-top:3px solid var(--border-2)}
.opi-conn__mode[data-status=good]{border-top-color:var(--success)}
.opi-conn__mode[data-status=limited]{border-top-color:var(--warning)}
.opi-conn__mode[data-status=none]{border-top-color:var(--error)}
.opi-conn__mode-top{display:flex;align-items:center;gap:var(--space-3);color:var(--text-3)}
.opi-conn__mode[data-status=good] .opi-conn__mode-top{color:var(--success)}
.opi-conn__mode[data-status=limited] .opi-conn__mode-top{color:var(--warning)}
.opi-conn__mode[data-status=none] .opi-conn__mode-top{color:var(--error)}
.opi-conn__mode-name{font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:var(--weight-semibold)}
.opi-conn__verdict{font-family:var(--font-display);font-size:var(--text-h4);line-height:1.25;font-weight:var(--weight-bold);color:var(--text-1)}
.opi-conn__mode p{margin:0;font-size:var(--text-body-sm);line-height:1.55;color:var(--text-2)}

/* --- drive times -------------------------------------------------------- */
.opi-conn__drive{margin:0 0 var(--space-12);padding:var(--space-6);background:var(--surface-sunken);border-top:2px solid var(--accent)}
.opi-conn__drive-head{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between;margin:0 0 var(--space-6)}
.opi-conn__drive-head h3{display:flex;align-items:center;gap:var(--space-3);margin:0;font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-3)}
.opi-conn__traffic{display:flex;align-items:center;gap:var(--space-3)}
.opi-conn__traffic label{font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-3)}
.opi-conn__traffic input[type=range]{width:160px;accent-color:var(--accent)}
.opi-conn__traffic input[type=range]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.opi-conn__traffic output{min-width:78px;font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--weight-semibold);color:var(--accent-strong)}

.opi-conn__bars{margin:0;padding:0;list-style:none}
.opi-conn__bar{display:grid;grid-template-columns:minmax(150px,220px) 1fr 74px;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:1px solid var(--border-1)}
.opi-conn__bar:last-child{border-bottom:none}
.opi-conn__bar-to{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-1)}
.opi-conn__bar-to .opi-conn__ico{color:var(--text-3)}
.opi-conn__bar-track{height:12px;background:var(--gray-100)}
.opi-conn__bar-fill{display:block;height:100%;background:var(--accent);transition:width var(--dur) var(--ease-out)}
.opi-conn__bar-val{font-family:var(--font-mono);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);text-align:right;font-variant-numeric:tabular-nums;color:var(--text-1)}
.opi-conn__bar-src{grid-column:2/-1;font-size:var(--text-caption);color:var(--text-3)}
.opi-conn__drive.is-stressed .opi-conn__bar-fill{background:var(--warning)}
.opi-conn__drive.is-stressed .opi-conn__bar-val{color:var(--warning)}

/* --- detail lists ------------------------------------------------------- */
.opi-conn__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-8)}
.opi-conn__col h3{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4);font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--accent)}
.opi-conn__col ul{margin:0;padding:0;list-style:none}
.opi-conn__col li{padding:var(--space-3) 0;border-bottom:1px solid var(--border-1);font-size:var(--text-body-sm);line-height:1.5;color:var(--text-2)}
.opi-conn__col li:last-child{border-bottom:none}

@media(max-width:900px){
  .opi-conn{margin:var(--space-12) auto}
  .opi-conn__drive-head{gap:var(--space-4)}
}
@media(max-width:640px){
  .opi-conn__bar{grid-template-columns:1fr 64px;row-gap:var(--space-2)}
  .opi-conn__bar-to{grid-column:1/-1}
  .opi-conn__bar-src{grid-column:1/-1}
  .opi-conn__traffic input[type=range]{width:120px}
}
@media(prefers-reduced-motion:reduce){
  .opi-conn__bar-fill{transition:none}
}