/* ============================================================================
   theme.css — shared palette, type, and page chrome.
   Lifted verbatim from the start.localhost launcher so the mirror front page
   and the launcher read as one family. Front page (tiles.css) and the restyled
   directory listing (listing.css) both build on these tokens.
   ========================================================================== */

:root{
  --bg:#080a0c; --panel:#0f1318; --panel2:#12171d; --edge:#1c242c;
  --line:rgba(140,170,180,.05);
  --ink:#cdd8dc; --ink-dim:#67767d; --ink-faint:#3d484e;
  --amber:#f4a52a; --amber-soft:#ffc266;
  --link:#7fb2e6;
  --grid:24px;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --cond:'IBM Plex Sans Condensed','IBM Plex Mono',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:var(--mono);color:var(--ink);background:var(--bg);font-size:13px;
  -webkit-font-smoothing:antialiased;line-height:1.5;padding:0 0 60px;
  /* faint blueprint grid + soft top glow */
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    radial-gradient(120% 70% at 50% -10%, #11181d 0%, var(--bg) 55%);
  background-size:var(--grid) var(--grid),var(--grid) var(--grid),100% 100%;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* dark scrollbars (operator 2026-10-26: no white native scrollbars on these dark pages; every page that loads this
   file, rpki.cloudpropeller.com included). color-scheme tells the browser the page is dark; scrollbar-color/-width
   for Firefox and Chrome 121+; ::-webkit-scrollbar for Safari and older Chrome (Chrome ignores it once the
   standard pair is set). Thumb #2a3640 on the panel colour, amber-dim (#9a6519) on hover where the browser allows. */
:root{color-scheme:dark;scrollbar-color:#2a3640 #0f1318}
*{scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px;background:#0f1318}
::-webkit-scrollbar-track{background:#0f1318}
::-webkit-scrollbar-thumb{background:#2a3640;border:2px solid #0f1318;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#9a6519}
::-webkit-scrollbar-corner{background:#0f1318}

/* page header (wordmark + you-are-here) */
header.site{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:30px 0 8px;border-bottom:1px solid var(--edge);margin-bottom:26px}
/* wordmark links to "/" but is visually unchanged — inherit colour, no underline,
   no hover/active styling; only the default pointer cursor on an <a> */
.mark{font-family:var(--cond);font-weight:700;letter-spacing:.18em;font-size:30px;
  text-transform:uppercase;color:inherit;text-decoration:none}
.mark b{color:var(--amber)}
/* right side of the header: CP wordmark logo above the "you are here" line */
.head-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cplogo{height:42px;width:auto;display:block}
.here{font-size:11.5px;color:var(--ink-dim);text-align:right;line-height:1.7}
.here b{color:var(--ink)}
.here .host{color:var(--amber-soft)}

/* page footer (CP logo + Routinator, matching the live mirror footer) */
footer.site{max-width:1080px;margin:30px auto 0;padding:16px 20px 0;
  border-top:1px solid var(--edge);color:var(--ink-faint);font-size:10.5px;line-height:1.8;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
footer.site a{color:var(--ink-dim);text-decoration:none}
footer.site a:hover{color:var(--amber-soft)}
footer.site .etc{margin-left:auto}
footer.site .cplogo-foot{height:30px;width:auto;display:block}

/* ---------------------------------------------------------------- floating TOC (assets/cp-toc.js) ------------
   CP Wiki's floating Table of Contents and back-to-top button as CP-SMTP ported them (CP-SMTP smtp.css, commit
   4a125d7): identical rules, this file's tokens (same names and values). Front page, listings and /stats. */
.cpw-toc-toggle{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:800;width:40px;height:40px;margin:0;padding:0;
  border:1px solid var(--edge);border-radius:6px;background:var(--panel);color:var(--ink-dim);box-shadow:0 14px 34px -14px #000;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.cpw-toc-toggle:hover,.cpw-toc-toggle[aria-expanded="true"]{background:var(--panel2);color:var(--amber-soft);border-color:#6b4b16}
.cpw-toc-toggle:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* full-height panel; the list is centred vertically while it fits and scrolls from the top when it does not */
.cpw-toc-panel{position:fixed;top:0;bottom:0;right:-320px;width:300px;box-sizing:border-box;z-index:850;overflow-y:auto;
  overscroll-behavior:contain;display:flex;flex-direction:column;padding:1.5em 0;
  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-family:var(--mono);font-size:.875em;line-height:1.35;visibility:hidden;
  transition:right .25s ease,visibility 0s linear .25s}
.cpw-toc-panel.open{right:0;visibility:visible;transition:right .25s ease}
.cpw-toc-inner{margin:auto 0}
.cpw-toc-header{margin:0 1em .5em;padding:0 .5em .5em;font-family:var(--cond);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:12px;color:var(--ink-dim);border-bottom:1px solid var(--edge)}
.cpw-toc-panel a,.cpw-toc-panel a:link,.cpw-toc-panel a:visited{display:block;padding:.3em 1.5em;color:#8d9ca2;
  text-decoration:none;border-left:3px solid transparent;font-size:12.5px;line-height:1.4}
.cpw-toc-panel a[hidden]{display:none}
.cpw-toc-panel a.cpw-toc-l1{color:#e6eef1;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.02em;padding-bottom:.45em}
.cpw-toc-panel a.cpw-toc-l2{padding-left:2.5em;color:var(--amber);font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.03em;margin-top:.3em}
.cpw-toc-panel a:hover,.cpw-toc-panel a:focus{background-color:rgba(255,255,255,.05);color:#e6eef1;text-decoration:none;outline:none}
.cpw-toc-panel a.cpw-toc-l2:hover,.cpw-toc-panel a.cpw-toc-l2:focus{color:var(--amber-soft)}
.cpw-toc-panel a.active,.cpw-toc-panel a.active:hover{background-color:rgba(244,165,42,.12);border-left-color:var(--amber);color:#e6eef1;font-weight:600}
/* cloudpropeller.com's .cp-scroll-top in amber: round, filled, 10px under the square TOC button */
.cpw-top-btn{position:fixed;right:16px;top:50%;transform:translateY(-50%) translateY(10px);z-index:800;width:40px;height:40px;
  margin:0;padding:0;border:0;border-radius:50%;background:var(--amber);color:#0b0d10;box-shadow:0 6px 18px -4px rgba(244,165,42,.45);
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease,transform .28s cubic-bezier(.4,0,.2,1),background .2s ease}
.cpw-top-btn svg{width:20px;height:20px;fill:currentColor}
.cpw-top-btn.is-visible{opacity:.85;visibility:visible;transform:translateY(-50%)}
.cpw-top-btn:hover,.cpw-top-btn:focus-visible{opacity:1;background:var(--amber-soft);outline:none}
.cpw-top-btn:focus-visible{box-shadow:0 0 0 3px rgba(244,165,42,.45)}
.cpw-top-btn:active{transform:translateY(-50%) scale(.95)}
html.cpw-toc-on .cpw-top-btn{top:calc(50% + 50px)}
/* phones: the TOC button bottom right (thumb reach) and above its open panel; back to top 10px above it */
@media (max-width:768px){
  .cpw-toc-toggle{right:12px;top:auto;bottom:24px;transform:none;z-index:900}
  .cpw-toc-panel{width:85vw;max-width:320px;right:-100vw;padding-bottom:88px}
  .cpw-toc-panel.open{right:0}
  .cpw-top-btn{right:12px;top:auto;bottom:24px;transform:translateY(10px)}
  .cpw-top-btn.is-visible{transform:none}
  .cpw-top-btn:active{transform:scale(.95)}
  html.cpw-toc-on .cpw-top-btn{top:auto;bottom:74px}
}
@media print{.cpw-toc-toggle,.cpw-toc-panel,.cpw-top-btn{display:none!important}}