/* ============================================================================
   rpki.css: Routinator's UI (rpki.cloudpropeller.com) in the CP mirror look. Loaded by Apache's mod_substitute
   AFTER Routinator's own stylesheet and the mirror's theme.css (deploy/rpki.conf), so equal specificity wins here.
   Order: 1. Routinator's CSS variables re-pointed to the CP palette, 2. page frame (our header/footer, widths),
   3. Routinator's nav bar as CP tabs, 4. forms and buttons, 5. Prefix Check, 6. Metrics, 7. Repositories and
   Connections tables, 8. help panel, 9. phones (390 px, no sideways scroll).
   Selectors are Routinator 0.15.2 / UI 0.4.5 (index-CJ1kS0Fg.css); after an upgrade compare its class list with
   the one in claude/research/rpki-ui-2026-10-26.md ("After an upgrade").
   ========================================================================== */

/* ---- 1. Routinator's tokens -> CP palette (theme.css: --bg #080a0c, --panel #0f1318, --panel2 #12171d,
   --edge #1c242c, --ink #cdd8dc, --ink-dim #67767d, --amber #f4a52a, --link #7fb2e6) */
:root{
  --white:#0f1318;          /* panels, table cells, inputs' surroundings */
  --black:#e6eef1;          /* strong ink (table cells, headings) */
  --light:#12171d;          /* secondary panels */
  --dark:#cdd8dc;           /* body ink */
  --blue-bg:rgba(127,178,230,.10);
  --blue-border:#2e4a66;
  --blue-lighter:#1c242c;   /* duration bar track */
  --blue-light:#7fb2e6;
  --blue:#f4a52a;           /* main action, checkbox dot, bar fill: amber */
  --blue-dark:#7fb2e6;      /* links */
  --red:#f4a52a;            /* focus edge, required mark */
  --grey-99:#0f1318; --grey-98:#12171d; --grey-95:#1c242c; --grey-93:#1c242c;
  --grey-light:#1c242c;     /* every 1px edge */
  --grey:#67767d; --grey-dark:#67767d; --grey-darker:#8d9ca2;
  --shadaw:0 14px 34px -24px #000;
  --radius:5px;
  --success:#a9e29a; --success-border:#3d6b34; --success-bg:rgba(103,194,58,.12);
  --warning:#ffc266; --warning-border:#6b4b16; --warning-bg:rgba(244,165,42,.10);
  --error:#ff9b9b;   --error-border:#7a3434;   --error-bg:rgba(245,108,108,.12);
  --cp-w:1200px;
  --well:#080a0c;           /* input wells */
  --bright:#eef4f6;
}

/* ---- 2. page frame */
html,body{height:auto;min-height:100%;min-width:0}
body{overflow-y:auto;overflow-x:hidden;font-size:13px;color:var(--ink)}
body,input,button,select,textarea{font-family:var(--mono)}
a{color:var(--link)}
.cp-wrap{max-width:var(--cp-w)}
header.site{background:none;height:auto;-webkit-user-select:auto;user-select:auto;margin-bottom:0}
header.site .mark{white-space:nowrap}
#root{height:auto;min-height:0;max-width:var(--cp-w);margin:0 auto;padding:0 20px;display:flex;flex-direction:column}
#root .content{flex:1 1 auto;min-width:0}
.content.route-metrics,.content.route-repositories,.content.route-connections{background:none}
/* our footer lines up with the content column (#root's 20px padding inside --cp-w) */
footer.site{max-width:none;margin:26px max(20px,calc((100% - var(--cp-w)) / 2 + 20px)) 0;padding:16px 0 0;background:none;
  justify-content:flex-start;font-size:10.5px;line-height:1.8}
footer.site a{font-weight:400}
footer.site a:hover{text-decoration:none}

/* ---- 3. Routinator's own header (logo + menu) as the CP tab bar under our header */
#root>header{background:none;height:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 18px;
  border-bottom:0}
#root>header h1{display:none}
#root>header menu{width:auto;height:auto;display:flex}
#root>header menu ul{display:inline-flex;height:auto;border:1px solid var(--edge);border-radius:6px;overflow:hidden;background:var(--panel)}
#root>header menu li{height:auto}
#root>header menu li a{height:auto;line-height:1.4;padding:7px 14px;font-family:var(--cond);font-weight:600;letter-spacing:.04em;
  font-size:13px;color:var(--ink-dim);border-right:1px solid var(--edge);border-bottom:0;transition:color .13s,background .13s}
#root>header menu li:last-child a{border-right:0}
#root>header menu li a:hover{background:transparent;color:var(--amber-soft)}
#root>header menu li a.active,#root>header menu li a.active:hover{background:var(--amber);color:var(--bg);border-bottom:0}

/* Routinator's footer (version, credits): one quiet line above ours */
#root>footer{background:none;color:var(--ink-faint);font-size:10.5px;line-height:1.8;padding:0;margin-top:22px;
  justify-content:space-between;gap:4px 16px}
#root>footer div{padding:0;gap:6px;flex-wrap:wrap;white-space:normal}
#root>footer span{color:#5b6970}
#root>footer a{font-weight:400;color:var(--ink-dim)}
#root>footer a:hover{color:var(--amber-soft);text-decoration:none}

/* section headings: every level the CP section heading (amber, condensed semi-bold, upper case, wide tracking) */
#prefix-check h2,#prefix-check .results h3,#connections h3,#metrics h4,#metrics h5,#prefix-check .results h4,
.help-overlay .bar h2,.help-overlay .bar h3{font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}

/* ---- 4. forms, buttons, help dots */
label{color:var(--ink-dim);font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11.5px;line-height:2.2}
input,textarea{background:var(--well);color:var(--bright);border:1px solid var(--edge);border-radius:5px;font-size:13px;line-height:2.4rem}
input::placeholder,textarea::placeholder{color:var(--ink-dim)}
input:focus:not([readonly]),input:active:not([readonly]),textarea:focus{border-color:var(--amber);box-shadow:0 0 0 2px rgba(244,165,42,.18)}
input[readonly]{background:var(--panel2);color:var(--ink-dim)}
.button{background:var(--amber);color:#0b0d10;font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:13px;line-height:2.4rem;padding:0 18px;border-radius:5px;transition:background .15s}
.button:hover{opacity:1;background:var(--amber-soft)}
.button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.checkbox{color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--mono);font-weight:400;font-size:12.5px;
  line-height:19px;padding:5px 0;gap:.65rem;align-items:flex-start}
.checkbox input{flex:0 0 1.2rem;width:1.2rem;margin:0;padding:0}
.checkbox span:before{background:var(--well);border-color:#2a3540;top:5px}
.checkbox span:after{top:9px}
.checkbox:hover span:before{border-color:var(--amber)}
.help{color:#0b0d10;background:#67767d;font-family:var(--cond);font-weight:700;font-size:11px;line-height:1rem}
#prefix-check .help{background-color:#67767d}
.help:hover,#prefix-check .help:hover{background-color:var(--amber-soft);color:#0b0d10}

/* ---- 5. Prefix Check */
#prefix-check{gap:0 18px;align-items:flex-start;height:auto}
#prefix-check .sidebar{border:1px solid var(--edge);border-radius:5px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 14px 34px -24px #000}
#prefix-check.initial .sidebar{background:linear-gradient(180deg,var(--panel2),var(--panel));flex-grow:0;width:100%;max-width:820px;margin:0 auto}
#prefix-check.searched .sidebar{background:linear-gradient(180deg,var(--panel2),var(--panel));flex:0 1 330px;min-width:0;max-width:100%}
#prefix-check.initial .sidebar>form,#prefix-check.initial .sidebar>div{width:100%;padding:16px 22px 18px!important}
#prefix-check .sidebar form{gap:10px;padding:16px 18px 4px}
#prefix-check .sidebar form p:last-child{margin-top:4px}
#prefix-check .sidebar form input{width:100%}
#prefix-check #search-options,#prefix-check #data-freshness{background:transparent;border-top:1px solid var(--edge);color:var(--ink)}
#prefix-check #data-freshness h2,#prefix-check #search-options h2{color:var(--amber);font-size:12px;margin-top:14px}
#prefix-check #search-options label{color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--mono);font-weight:400;font-size:12.5px}
#prefix-check #search-options label:hover{color:var(--amber-soft)}
#data-freshness table{color:var(--ink-dim);font-size:12px}
#prefix-check #data-freshness td,#prefix-check #data-freshness th{border-bottom:1px solid var(--line);font-size:12px}
#prefix-check #data-freshness td{color:var(--ink)}
#prefix-check #data-freshness pre{font-family:var(--mono)}
#prefix-check #data-freshness .ago{opacity:1;color:var(--ink-dim)}
#prefix-check .rir{color:var(--ink-dim)}
#prefix-check #notification{border-radius:5px;font-size:12px}

/* results: one CP panel per block */
#prefix-check.searched .results{min-width:0;flex:1 1 480px;padding:0}
#prefix-check .results>div{border:1px solid var(--edge);border-radius:5px;padding:14px 18px 6px;margin-bottom:18px;max-width:none;
  background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 14px 34px -24px #000}
#prefix-check .results>div>h3{font-size:14px;padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid var(--line)}
#prefix-check .results p{color:var(--ink);font-size:12.5px}
#prefix-check .results em{color:var(--ink-dim)}
#prefix-check .results a{color:var(--link);text-decoration-style:dotted;text-underline-offset:2px}
#prefix-check .results a:hover{color:var(--amber-soft)}
#prefix-check .results table{color:var(--ink);font-size:12.5px;margin-bottom:1.2em}
#prefix-check .results table th{font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px;
  color:var(--ink-dim);border-bottom:1px solid var(--edge)}
#prefix-check .results table td{border-bottom:1px solid var(--line)}
#prefix-check .results table tbody tr.even td{background-color:rgba(255,255,255,.018)}
#prefix-check .results table tr td.sub-table{background:var(--well)!important}
#prefix-check .results table td.higlighted span{border-color:var(--blue-border);background:var(--blue-bg);color:#cfe3f7;border-radius:999px;padding:1px 8px}
#prefix-check .results .no-results{color:var(--ink-dim);border-left:3px solid var(--amber);padding-left:12px}
#prefix-check .results #validation-results h4{color:var(--amber)}
#prefix-check .results #validation-results{margin-bottom:18px}

/* status pills (VALID / INVALID / NOT FOUND) and tags: rounded, tinted fill, brighter 1px edge, condensed caps */
#prefix-check .results .valid,#prefix-check .results .invalid,#prefix-check .results .not-found,#prefix-check .results .tag{
  border-radius:999px;padding:1px 9px;font-family:var(--cond);font-weight:600;letter-spacing:.08em;font-size:11px;line-height:1.5;
  overflow:visible;vertical-align:1px}
#prefix-check .results .valid{color:var(--success);background:var(--success-bg);border:1px solid var(--success-border)}
#prefix-check .results .invalid{color:var(--error);background:var(--error-bg);border:1px solid var(--error-border)}
#prefix-check .results .not-found{color:var(--warning);background:var(--warning-bg);border:1px solid var(--warning-border)}
#prefix-check .results .tag{color:#cfe3f7;background:var(--blue-bg);border:1px solid var(--blue-border)}

/* matched / unmatched VRP groups: an edge in the status colour, label as a pill */
#prefix-check .matched,#prefix-check .unmatchedasn,#prefix-check .unmatchedlength{border-left:3px solid var(--error-border);padding-left:12px}
#prefix-check .matched{border-left-color:var(--success-border)}
#prefix-check .matched h5,#prefix-check .unmatchedasn h5,#prefix-check .unmatchedlength h5{font-family:var(--cond);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:11px;padding:2px 10px;border-radius:999px;border-left:1px solid var(--error-border)}
#prefix-check .matched h5{border-left:1px solid var(--success-border)}

/* expand/collapse arrows */
#prefix-check .button-container button span,#prefix-check .related-prefixes-group h4 .arrow{border-color:var(--ink-dim)}
#prefix-check .button-container button:hover span{border-right-color:var(--amber-soft);border-bottom-color:var(--amber-soft)}
#prefix-check .related-prefixes-group{border:1px solid var(--edge);border-radius:5px;overflow:hidden}
#prefix-check .related-prefixes-group h4{background:var(--panel2);color:var(--ink);font-family:var(--cond);font-weight:600;
  letter-spacing:.06em;font-size:13px;height:auto;line-height:2.6rem}
#prefix-check .related-prefixes-group h4:hover{color:var(--amber-soft)}
#prefix-check .related-prefixes-group h4:hover .arrow{border-color:var(--amber-soft)}
#prefix-check .related-prefixes-group h4.collapse{border-bottom:1px solid var(--edge)}
#prefix-check .related-prefixes-group input{max-width:calc(100% - 2rem)}

/* ---- 6. Metrics: one CP panel per RIR. Every group (ROAs, VRPs, ... Other Objects) is a row of equal columns, 5 per
   card (3 on a narrow card), so the values line up under one another across the groups like a table (operator
   2026-10-26). Routinator renders a group as <dl><dt>label</dt><dd>value</dd> ...</dl> (2 to 5 pairs; Other Objects
   a lone <dd>): row 1 the labels, row 2 the values, a 1px divider before every column but the first. rpki.js tags
   zero values .cp-zero (dimmed) and non-zero Invalid / Rejected / Stale / Missing values .cp-warn (amber). */
#metrics{margin:0;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,34rem),1fr))}
#metrics>div{border:1px solid var(--edge);border-radius:5px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:0 14px 34px -24px #000;max-width:100%;min-width:0;padding-bottom:14px;container-type:inline-size}
#metrics h4{font-size:15px;line-height:3.4rem;padding-left:3.6rem;border-bottom:1px solid var(--edge);font-weight:600}
#metrics h4:before{width:1.9rem;height:1.9rem;top:.75rem;left:1rem;border-radius:5px;box-shadow:0 0 0 1px var(--edge)}
#metrics h5{font-size:12px;color:var(--ink-dim);margin:16px 18px 0;padding-bottom:5px;border-bottom:1px solid var(--line)}
#metrics dl{margin:8px 18px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
#metrics dt,#metrics dd{min-width:0;margin:0;padding:0 10px;border-left:1px solid var(--edge);text-align:left}
#metrics dt:first-of-type,#metrics dd:first-of-type{padding-left:0;border-left:0}
/* a label that wraps (LOCALLY FILTERED) keeps the others on its last line, right above their values */
#metrics dt{display:flex;flex-direction:column;justify-content:flex-end;overflow-wrap:normal;font-family:var(--cond);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:11px;line-height:1.35;color:var(--ink-dim);padding-bottom:2px}
#metrics dd{font-family:var(--cond);font-weight:700;font-size:18px;color:var(--bright);letter-spacing:.01em;line-height:1.35;
  font-variant-numeric:tabular-nums}
#metrics dd.cp-zero{color:var(--ink-dim)}
#metrics dd.cp-warn{color:var(--amber-soft)}
/* a narrow card (phones): 3 columns, the 4th and 5th pair wrap to a second row of the same columns */
@container (max-width:460px){
  #metrics dl{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}
  #metrics dt:nth-of-type(3n+1),#metrics dd:nth-of-type(3n+1){grid-column:1;padding-left:0;border-left:0}
  #metrics dt:nth-of-type(3n+2),#metrics dd:nth-of-type(3n+2){grid-column:2}
  #metrics dt:nth-of-type(3n),#metrics dd:nth-of-type(3n){grid-column:3}
  #metrics dt:nth-of-type(-n+3){grid-row:1}
  #metrics dd:nth-of-type(-n+3){grid-row:2}
  #metrics dt:nth-of-type(n+4){grid-row:3;margin-top:8px}
  #metrics dd:nth-of-type(n+4){grid-row:4}
  #metrics dt:nth-of-type(n+7){grid-row:5}
  #metrics dd:nth-of-type(n+7){grid-row:6}
  #metrics dd{font-size:16px}
}

/* ---- 7. Repositories and Connections: the tables flow with the page, no inner vertical scroll box (operator
   2026-10-26: "they seem to open in an iframe"). A box scrolls sideways only when its table is wider than the content
   column (Repositories: 25 columns); its header row follows the viewport while the table is on screen through
   --cp-head-y, set by rpki.js (a box that scrolls sideways cannot use position:sticky against the page). Narrower
   cells, headers wrap, the URL column ends in an ellipsis (the full URL is the cell's title tooltip). */
#repositories{margin:0;width:100%;height:auto}
.content.route-repositories{max-height:none;height:auto;min-height:0}
#rrdp{max-height:none}
#connections{padding:0}
#connections h3{font-size:14px;margin:0 0 8px}
#connections>h3:not(:first-child),.side-by-side h3{margin-top:18px}
.scroll-table{overflow-x:auto;overflow-y:hidden;border:1px solid var(--edge);border-radius:5px;background:var(--panel);
  box-shadow:0 14px 34px -24px #000}
.scroll-table>div{padding:0}
.scroll-table table{font-size:12px;-webkit-user-select:text;user-select:text}
.scroll-table thead th{background:var(--panel2);color:var(--ink-dim);font-family:var(--cond);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:11px;line-height:1.3;padding:7px 8px;border-left:1px solid var(--edge);border-bottom:1px solid var(--edge);
  min-width:0;white-space:normal;z-index:3;transform:translateY(var(--cp-head-y,0px))}
.scroll-table thead th:first-child{z-index:4}
.scroll-table thead th:hover{color:var(--amber-soft)}
.scroll-table thead th.active{text-decoration:none;color:var(--bright);box-shadow:inset 0 -2px 0 var(--amber)}
.scroll-table tbody th{background:var(--panel);border-top:1px solid var(--line);padding:5px 8px;color:var(--ink)}
#repositories tbody th,#rrdp tbody th,#rsync tbody th{max-width:18rem}
.scroll-table tbody th a{color:var(--link);text-decoration:none}
.scroll-table tbody th a:hover{color:var(--amber-soft);text-decoration:underline}
.scroll-table td{color:var(--ink);background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line);padding:5px 8px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll-table tr:nth-child(2n) td,.scroll-table tr:nth-child(2n) th{background:#11161b}
.scroll-table tbody tr:hover td,.scroll-table tbody tr:hover th{background:#161d24}
.duration>div{background:var(--blue-lighter);border-radius:3px;height:12px}
/* the bar's percentage sits on the fill or, for short bars, on the track: one light ink that reads on both
   (4.6:1 on the bronze fill, 14.6:1 on the track) */
.duration>div>div{background:#9a6519;color:#fff6e6;height:12px;font-size:9.5px;line-height:12px;font-weight:600}
.duration>div span{color:#fff6e6}
.duration>span{color:var(--ink-dim)}
.side-by-side{gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,34rem),1fr))}
.side-by-side>div{max-width:100%;min-width:0}
#rsync{max-width:none}
.status-list{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);border-radius:5px;
  box-shadow:0 14px 34px -24px #000;font-size:12px;padding:6px 16px;line-height:1.9rem}
.status-list dt{font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--ink-dim);
  border-bottom:1px solid var(--line)}
.status-list dd{color:var(--ink);border-bottom:1px solid var(--line)}

/* ---- 8. help panel (the "?" buttons) */
/* above the floating TOC and back-to-top buttons (z-index 800-900), which would otherwise float over the panel */
.help-overlay{background-color:rgba(4,6,8,.72);z-index:1000}
.help-overlay .bar{background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--ink);border-left:1px solid var(--edge);
  box-shadow:-18px 0 40px -18px #000;font-size:12.5px;line-height:1.6}
.help-overlay .bar h2{font-size:16px}
.help-overlay .bar h3{font-size:13px}
.help-overlay .bar code{color:var(--amber-soft)}

/* ---- 9. phones and narrow windows: everything fits 390 px; wide tables scroll inside their own box */
@media (max-width:720px){
  .cp-wrap,#root{padding:0 12px}
  header.site{padding-top:18px;gap:8px}
  header.site .mark{font-size:20px;letter-spacing:.12em}
  .cplogo{height:30px}
  #root>header{padding:12px 0 14px}
  #root>header menu{width:100%}
  #root>header menu ul{display:flex;width:100%}
  #root>header menu li{flex:1 1 auto}
  #root>header menu li a{line-height:1.4;padding:7px 6px;font-size:12px;text-align:center}
  #prefix-check.searched .sidebar{flex:1 1 100%}
  #prefix-check .results>div{padding:12px 12px 4px;overflow-x:auto}
  #prefix-check .results table th,#prefix-check .results table td{padding:6px 4px}
  #metrics>div{max-width:100%}
  #metrics dl{margin:8px 14px 0}
  #metrics h5{margin:16px 14px 0}
  #repositories tbody th,#rsync tbody th,#rrdp tbody th{max-width:11rem}
  .status-list{grid-template-columns:minmax(0,1fr) auto;overflow-wrap:anywhere}
  .status-list dl{grid-template-columns:minmax(0,1fr) auto}
  footer.site{margin:22px 12px 0;padding:16px 0 0;gap:10px}
  footer.site .etc{margin-left:0}
  #root>footer{flex-direction:column}
}