/* The dashboard (scripts/build-docs.mjs builds /dashboard/ and its pages; dashboard.js fills them from /api/account).
   One dark look: the site header's navy as the ground, a deeper navy for the sidebar and code, orange only for what
   matters. Charts are SVG with classes (dashboard-charts.js), so nothing needs a style attribute, which the site's CSP drops. */
:root{
  color-scheme:dark;
  --navy:#071b4f;
  --deep:#04123a;
  --panel:#0a2260;
  --rule:#22407f;
  --ink:#e8effd;
  --muted:#93a6cb;
  --orange:#f3683d;
  --orange-soft:#ffb08f;
  --good:#5fd3a0;
  --bad:#ff8a7a;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:var(--ink)}
body{font-size:15px;line-height:1.6}
a{color:var(--orange-soft)}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.skip-link{position:absolute;left:12px;top:-60px;padding:8px 12px;border-radius:6px;background:var(--orange);color:#081b42;font-weight:700;z-index:10}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.dash{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.dash-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:18px 14px;background:var(--deep);border-right:1px solid var(--rule);overflow-y:auto}
.dash-brand{display:flex;align-items:center;gap:8px;padding:2px 6px;text-decoration:none}
.dash-brand img:first-child{border-radius:50%}
.dash-nav{display:grid;gap:2px}
.dash-group{margin:12px 0 4px;padding:0 8px;color:var(--muted);font:650 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.dash-nav a{display:block;padding:8px 10px;border-radius:6px;color:var(--ink);font-size:14px;text-decoration:none}
.dash-nav a:hover{background:rgba(147,166,203,.12);color:var(--ink)}
.dash-nav a[aria-current="page"]{background:rgba(243,104,61,.15);color:var(--orange-soft)}
.dash-nav{position:relative}
.dash-nav a{position:relative;z-index:1;transition:color .25s}
.dash-nav-mark{position:absolute;left:0;top:0;border-radius:6px;background:rgba(243,104,61,.15);pointer-events:none}
.dash-nav-mark.is-ready{transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),height .32s}
.dash-nav.has-mark a[aria-current="page"]{background:none}
@media (prefers-reduced-motion:reduce){.dash-nav-mark.is-ready{transition:none}}
.dash-credits{margin-top:auto;display:grid;gap:6px;padding:12px;border:1px solid var(--rule);border-radius:8px;font-size:13px}
.dash-credits p{margin:0}
.dash-credits strong{font:600 15px var(--mono);font-variant-numeric:tabular-nums}
.credit-bar{display:block;width:100%;height:6px;margin:4px 0 2px;border:0;border-radius:3px;background:var(--rule);overflow:hidden;-webkit-appearance:none;appearance:none}
.credit-bar::-webkit-progress-bar{background:var(--rule);border-radius:3px}
.credit-bar::-webkit-progress-value{background:var(--orange);border-radius:3px}
.credit-bar::-moz-progress-bar{background:var(--orange);border-radius:3px}
.dash-small{color:var(--muted);font-size:12.5px}
/* The account menu: the avatar at the sidebar's foot, and the menu it opens upward, printed in as the site's menus are. */
.dash-me{position:relative}
.dash-me-button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.dash-me-button:hover,.dash-me-button[aria-expanded="true"]{border-color:var(--rule);background:rgba(147,166,203,.08)}
.dash-avatar{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid rgba(243,104,61,.45);border-radius:8px;background:rgba(243,104,61,.12);color:var(--orange-soft);font:650 12px var(--mono);letter-spacing:.04em}
.dash-me-email{flex:1;min-width:0;overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.dash-caret{color:var(--muted);font-size:11px;transition:transform .2s}
.dash-me-button[aria-expanded="true"] .dash-caret{transform:rotate(180deg)}
.dash-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:20;padding:8px;border:1px solid var(--rule);border-radius:10px;background:var(--deep);box-shadow:0 18px 40px rgba(2,8,28,.55)}
.dash-menu-kicker{margin:4px 8px 8px;color:var(--muted);font:650 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.dash-menu a,.dash-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.dash-menu a:hover,.dash-menu a:focus-visible,.dash-menu button:hover,.dash-menu button:focus-visible{background:rgba(147,166,203,.12);color:var(--ink);outline:none}
.dash-menu-glyph{display:inline-block;width:20px;color:var(--orange);font:650 12px var(--mono);text-align:center}
.dash-menu-out{margin-left:auto;color:var(--muted);font-size:12px}
.dash-menu hr{margin:6px 4px;border:0;border-top:1px dotted var(--rule)}
.dash-menu form{margin:0}
@media (prefers-reduced-motion:no-preference){
  .dash-menu.is-printing{animation:menu-print .3s steps(14,end) backwards}
  .dash-menu.is-printing>*{animation:pg-row .01s backwards;animation-delay:calc(var(--row,0)*22ms + 40ms)}
}
@keyframes menu-print{from{clip-path:inset(100% 0 0 0 round 10px)}to{clip-path:inset(0 0 0 0 round 10px)}}

.dash-main{min-width:0;padding:0 32px 64px}
.dash-head{position:relative;padding:34px 0 18px;border-bottom:1px dotted var(--rule);margin-bottom:22px}
.dash-noise{position:absolute;inset:0 0 auto auto;width:min(620px,100%);height:100%;margin:0;overflow:hidden;color:var(--orange);opacity:.13;font:11px/12px var(--mono);pointer-events:none;-webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent)}
.dash-noise{opacity:.18}
.dash-kicker{position:relative;margin:0 0 10px;color:var(--orange);font:650 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.dash-kicker::before{content:"■ "}
.dash-head h1{position:relative;margin:0;font-size:34px;line-height:1.1;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.dash-lead{position:relative;max-width:64ch;margin:10px 0 0;color:var(--muted)}
.dash-message{min-height:0;margin:0 0 16px;padding:0;color:var(--ink)}
.dash-message:empty{display:none}
.dash-message:not(:empty){padding:12px 14px;border:1px solid rgba(95,211,160,.4);border-radius:6px;background:rgba(95,211,160,.08)}
.dash-message.is-error{border-color:rgba(255,138,122,.5);background:rgba(255,138,122,.08)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px;border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
.kpi{min-width:0;padding:16px 16px 14px;border-left:1px dotted var(--rule)}
.kpi:first-child{border-left:0}
.kpi-label{margin:0;color:var(--muted);font:650 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.kpi-value{margin:10px 0 0;font:600 28px/1 var(--mono);font-variant-numeric:tabular-nums}
.kpi-sub{margin:8px 0 0;color:var(--muted);font-size:12.5px}
.kpi .credit-bar{margin-top:12px}

.dash-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px}
.panel{min-width:0;margin-bottom:18px;padding:16px;border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
.dash-grid .panel{margin-bottom:0}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 12px;margin-bottom:12px}
.panel h2{margin:0;font-size:16px;font-weight:650}
.panel h3{margin:18px 0 8px;font-size:13px;font-weight:650;color:var(--muted)}
.panel p{margin:0 0 10px}
.panel-head a,.panel-link{font:650 12px var(--mono);text-decoration:none}

.chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;color:var(--muted);font:11.5px var(--mono)}

.tabs{display:flex;flex-wrap:wrap;gap:4px}
.tabs button{padding:6px 9px;border:1px solid transparent;border-radius:5px;background:none;color:var(--muted);font:650 11.5px/1 var(--mono);cursor:pointer}
.tabs button[aria-selected="true"],.tabs button[aria-pressed="true"]{border-color:var(--rule);background:var(--deep);color:var(--ink)}
.code{position:relative;margin:0 0 12px}
.code pre{margin:0;padding:12px 68px 12px 12px;border-radius:6px;background:var(--deep);color:var(--ink);font:12.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-all}
.copy{position:absolute;top:6px;right:6px;padding:5px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--panel);color:var(--muted);font:650 11px/1 var(--mono);cursor:pointer}
.copy:hover{color:var(--ink)}
.key-list{margin:0;padding:0;list-style:none}
.key-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dotted var(--rule);font-size:13.5px}
.key-list li:first-child{border-top:0}
.key-list code{color:var(--muted);font:12.5px var(--mono)}
.key-list .key-used{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap}

.table-scroll{overflow-x:auto}
.dash-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.dash-table th,.dash-table td{padding:9px 10px;border-bottom:1px dotted var(--rule);text-align:left;white-space:nowrap}
.dash-table th{color:var(--muted);font:650 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dash-table .num{text-align:right}
.dash-table tfoot td{border-bottom:0;font-weight:650}
.dash-table code{font:12.5px var(--mono);color:var(--muted)}
.status{font:650 11px/1 var(--mono);padding:3px 6px;border-radius:4px}
.status.on{color:var(--good);background:rgba(95,211,160,.1)}
.status.off{color:var(--muted);background:rgba(147,166,203,.12)}
.status.ok{color:var(--good);background:rgba(95,211,160,.1)}
.status.warn{color:#ffcf6b;background:rgba(255,207,107,.1)}
.status.bad{color:var(--bad);background:rgba(255,138,122,.1)}
.requests td.url{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.requests td.url a{color:var(--ink);text-decoration:none}
.requests td.url a:hover{color:var(--orange-soft);text-decoration:underline}
.requests .hash{color:var(--muted);font:12px var(--mono)}
.dash-grid.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:end;margin-bottom:12px}
.filters label{display:grid;gap:5px;color:var(--muted);font-size:12.5px;font-weight:600}
.filters input,.filters select{min-height:36px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;background:var(--deep);color:var(--ink);font:inherit;font-size:13.5px}
.filters input{min-width:220px}
.filters .button{margin-left:auto}

.dash-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-bottom:14px}
.dash-form label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
.dash-form input{min-height:42px;padding:0 12px;border:1px solid var(--rule);border-radius:6px;background:var(--deep);color:var(--ink);font:inherit}
.button{min-height:42px;padding:0 16px;border:0;border-radius:6px;background:var(--orange);color:#081b42;font:inherit;font-weight:700;cursor:pointer}
.button:hover{background:#ff9365}
.button:disabled{opacity:.55;cursor:default}
.button.quiet{min-height:32px;padding:0 10px;border:1px solid var(--rule);background:none;color:var(--ink);font-size:12.5px;font-weight:650}
.button.quiet:hover{border-color:var(--bad);color:var(--bad)}
.key-reveal{margin:0 0 16px;padding:14px;border:1px dashed var(--orange);border-radius:6px;background:var(--deep)}
.key-reveal p{margin:0 0 8px}
.key-reveal .code{margin-bottom:8px}

.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;margin:0}
.facts dt{color:var(--muted);font:650 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:3px 8px;border:1px solid var(--rule);border-radius:999px;font:12px var(--mono)}


/* ---- Charts (dashboard-charts.js): SVG shapes coloured by class ---- */
.chart{position:relative;min-width:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:rgba(147,166,203,.14);stroke-width:1}
.chart .axis{stroke:rgba(147,166,203,.4);stroke-width:1}
.chart .tick{fill:var(--muted);font:11px var(--mono)}
.chart .col-hit{fill:transparent}
.chart .col.hover .col-hit{fill:rgba(147,166,203,.08)}
.chart .bar{transition:opacity .15s}
.chart .col.hover .bar{filter:brightness(1.15)}
.b-http{fill:var(--orange);color:var(--orange)}
.b-browser{fill:var(--orange-soft);color:var(--orange-soft)}
.b-404{fill:#8fa3c8;color:#8fa3c8}
.b-map{fill:#5f86d6;color:#5f86d6}
.b-free{fill:#33507f;color:#4d6aa0}
.chart .line{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .fill-top{stop-color:var(--orange);stop-opacity:.42}
.chart .fill-bottom{stop-color:var(--orange);stop-opacity:0}
.chart .end{fill:var(--orange);stroke:var(--navy);stroke-width:2}
.chart .dot{fill:var(--navy);stroke:var(--orange);stroke-width:2.5}
.chart .cursor{stroke:rgba(232,239,253,.55);stroke-width:1;stroke-dasharray:3 3}
.chart .off{display:none}
.chart .tile rect{fill:var(--orange);stroke:var(--panel);stroke-width:1;transition:filter .15s}
.chart .tile.t0 rect{fill-opacity:.22}.chart .tile.t1 rect{fill-opacity:.38}.chart .tile.t2 rect{fill-opacity:.55}.chart .tile.t3 rect{fill-opacity:.75}.chart .tile.t4 rect{fill-opacity:.95}
.chart .tile.hover rect{filter:brightness(1.2)}
.chart .tile-name{fill:#fff;font:600 12.5px "Helvetica Neue",Helvetica,Arial,sans-serif;pointer-events:none}
.chart .tile-value{fill:rgba(255,255,255,.78);font:11px var(--mono);pointer-events:none}
.chart .t4 .tile-name,.chart .t3 .tile-name{fill:#081b42}.chart .t4 .tile-value,.chart .t3 .tile-value{fill:rgba(8,27,66,.75)}
.chart-wrap{position:relative;overflow:hidden}
.chart-ascii{position:absolute;inset:0;margin:0;color:var(--orange);opacity:.07;font:10px/11px var(--mono);pointer-events:none;overflow:hidden}
.chart-legend .sw,.glass-tip .sw{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:2px;background:currentColor;vertical-align:-1px}
.panel-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.big-figure{font:600 26px/1 var(--mono);font-variant-numeric:tabular-nums}
.panel-head h2+.dash-small{margin:4px 0 0}
@media (prefers-reduced-motion:no-preference){
  .chart svg.enter .bar{transform-box:fill-box;transform-origin:bottom;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .chart svg.enter .line{stroke-dasharray:1;animation:draw 1.1s ease-out both}
  .chart svg.enter .area{animation:fade .9s ease-out both}
  .chart svg.enter .tile rect{animation:fade .5s ease-out both}
  @keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* The Overview's chart and key panels: one height, the chart filling its panel, the key panel's parts spread evenly,
   both links on the bottom edge. */
.dash-grid.pair{align-items:stretch}
.pair .panel{display:flex;flex-direction:column}
.pair .chart-wrap{flex:1}
.pair .panel-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.pair .panel-body h3{margin-top:0}
.pair .panel-body .code{margin-bottom:0}
.pair .panel-link{margin-top:auto;padding-top:14px}

/* ---- The frosted tooltip ---- */
.glass-tip{position:fixed;z-index:50;min-width:170px;max-width:280px;padding:10px 12px;border:1px solid rgba(147,166,203,.28);border-radius:10px;background:rgba(10,34,96,.55);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 12px 32px rgba(2,8,28,.45);color:var(--ink);font-size:12.5px;pointer-events:none}
.glass-tip-title{margin:0 0 6px;font:650 11.5px var(--mono);letter-spacing:.04em;color:var(--orange-soft)}
.glass-tip dl{display:grid;grid-template-columns:1fr auto;gap:3px 14px;margin:0}
.glass-tip dt{color:var(--muted);white-space:nowrap}
.glass-tip dd{margin:0;text-align:right;font:12.5px var(--mono);font-variant-numeric:tabular-nums}
.glass-tip .total{padding-top:4px;border-top:1px dotted rgba(147,166,203,.3);color:var(--ink)}

/* ---- The Overview's banner: the Evidence Record, centred between the octopus's arms (navy glyphs on orange) ---- */
.ev-hero{position:relative;display:grid;place-items:center;min-height:300px;margin-bottom:18px;padding:40px 24px;border-radius:10px;background:radial-gradient(120% 140% at 50% 0%,#f67a52 0%,var(--orange) 55%,#e85a2f 100%);color:#081b42;text-align:center;overflow:hidden}
.ev-field{position:absolute;inset:0;margin:0;color:#081b42;opacity:.55;font:11px/12px var(--mono);white-space:pre;pointer-events:none;overflow:hidden}
.ev-copy{position:relative;display:grid;justify-items:center;max-width:620px}
.ev-badge{margin:0 0 16px;font:700 12px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.ev-copy h2{margin:0;font-size:40px;line-height:1.08;letter-spacing:-.025em;font-weight:650;text-wrap:balance}
.ev-copy p{margin:14px 0 0;color:#1d2f55;font-size:16px;line-height:1.55;text-wrap:balance}
.ev-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.ev-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid #081b42;border-radius:8px;color:#081b42;font-weight:650;font-size:15px;text-decoration:none}
.ev-btn:hover{background:rgba(8,27,66,.08);color:#081b42}
.ev-btn.primary{background:#081b42;color:#ffd9c9}
.ev-btn.primary:hover{background:#13306e;color:#fff}

/* ---- Integrations and the Connect page ---- */
.integrations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px dotted var(--rule);border-left:1px dotted var(--rule)}
.int-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:13px 14px;border-right:1px dotted var(--rule);border-bottom:1px dotted var(--rule);color:var(--ink);text-decoration:none;font-size:14px}
.int-tile:hover{background:rgba(147,166,203,.08);color:var(--ink)}
.int-tile:hover .int-arrow{color:var(--orange)}
.int-icon{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:6px;background:rgba(232,239,253,.08);color:var(--orange-soft);font:700 11px var(--mono)}
.int-icon img{width:20px;height:20px}
.int-icon:has(img){background:#e8effd}
.int-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.int-arrow{color:var(--muted);font-size:12px}
.install-row{border-top:1px dotted var(--rule)}
.install-row summary{display:flex;align-items:center;gap:12px;padding:12px 2px;cursor:pointer;list-style:none}
.install-row summary::-webkit-details-marker{display:none}
.install-row summary strong{flex:1;font-weight:600}
.install-btn{padding:6px 10px;border:1px solid var(--rule);border-radius:6px;color:var(--muted);font:650 11.5px var(--mono)}
.install-row[open] .install-btn,.install-row summary:hover .install-btn{border-color:var(--orange);color:var(--orange-soft)}
.install-body{padding:0 2px 12px}
.stack{display:grid;gap:18px;min-width:0}
.stack .panel{margin-bottom:0}
.kv{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:6px;background:var(--deep)}
.kv code{font:12.5px var(--mono);color:var(--ink)}
.button.small{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;font-size:13px;text-decoration:none;color:#081b42}

/* ---- Usage: summary and sources ---- */
.summary{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));margin-bottom:18px;border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
.summary>div{min-width:0;padding:16px;border-left:1px dotted var(--rule)}
.summary>div:first-child{border-left:0}
.summary-figure{margin:8px 0 4px;font:600 34px/1 var(--mono);font-variant-numeric:tabular-nums}
.summary .credit-bar{margin-top:10px}
.sources{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.sources p{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;font-size:14px}
.sources .mono{font:12.5px var(--mono);color:var(--muted)}
.sources .dash-small{margin:4px 0 0}

/* The Playground, laid out as Firecrawl's: a selector, the URL card in a band, the result, the recent runs. The selector
   opens a panel of tiles; behind the card the octopus in glyphs (dashboard-octopus.js) peeks over its top edge; the
   frame's lines are dotted, with a + where they meet. */
.pg{display:grid;gap:22px}
.pg [hidden]{display:none!important}
.dash-head.compact{padding:24px 0 14px;margin-bottom:18px}
.dash-head.compact h1{font-size:26px}
.pg-kicker{margin:0;color:var(--muted);font:650 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.pg-kicker::before{content:"■ ";color:var(--orange)}
.pg-frame{border-top:1px dotted var(--rule);border-bottom:1px dotted var(--rule)}
.pg-top{position:relative;display:grid;justify-items:center;padding:18px 0;border-bottom:1px dotted var(--rule)}
.pg-cross{position:absolute;z-index:3;color:var(--muted);font:12px/1 var(--mono);pointer-events:none}
.pg-cross.tl{left:-4px;top:-7px}.pg-cross.tr{right:-4px;top:-7px}
.pg-cross.bl{left:-4px;bottom:-7px}.pg-cross.br{right:-4px;bottom:-7px}
.pg-picker{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 14px;width:240px;transition:border-color .2s,box-shadow .2s;padding:10px 14px 10px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--deep);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pg-picker .pg-kicker{grid-column:1}
.pg-picker-name{grid-column:1;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;white-space:nowrap}
.pg-picker .pg-glyph,.pg-tile-glyph{display:inline-grid;place-items:center;width:1.4em;height:1.4em;line-height:1;font-family:var(--mono)}
.pg-picker .pg-kicker{white-space:pre}
.pg-picker[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(243,104,61,.18)}
.pg-caret{transition:transform .2s}
.pg-picker[aria-expanded="true"] .pg-caret{transform:rotate(180deg)}
.pg-caret{grid-column:2;grid-row:1/3;justify-self:end;color:var(--orange);font:14px var(--mono)}
.pg-picker:hover,.pg-picker[aria-expanded="true"]{border-color:var(--orange)}
.pg-panel.pg-modes{left:50%;top:calc(100% - 8px);width:min(720px,calc(100% - 24px));transform:translateX(-50%)}
.pg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pg-tile{display:grid;align-content:start;gap:7px;min-width:0;padding:14px;border:1px solid var(--rule);border-radius:10px;background:var(--navy);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .18s,background-color .18s}
.pg-tile strong{font-size:16px;font-weight:600}
.pg-tile .pg-kicker::before{content:none}
.pg-tile-glyph{color:var(--orange);font:650 18px var(--mono)}
.pg-tile-about{color:var(--muted);font-size:13px;line-height:1.45}
.pg-tile code{color:var(--orange-soft);font:12px var(--mono)}
.pg-tile:hover{border-color:var(--orange)}
.pg-tile[aria-pressed="true"]{border-color:var(--orange);background:rgba(243,104,61,.12)}
.pg-tile.is-local{border-style:dashed}
.pg-band{position:relative;display:grid;place-items:center;min-height:clamp(330px,30vw,380px);padding:40px 20px 52px}
.pg-depth{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pg-octopus{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.pg-card{position:relative;z-index:2;width:min(720px,100%);border-radius:14px;background:#fff;color:#14254a;box-shadow:0 24px 70px rgba(1,8,30,.55),0 0 0 1px rgba(255,255,255,.6)}
.pg-entry{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #e3e8f2}
.pg-chip{padding:7px 9px;border:1px solid #d9e0ec;border-radius:6px;color:#6b7c9e;font:650 11px/1 var(--mono);letter-spacing:.08em}
.pg-entry input{flex:1;min-width:0;min-height:40px;padding:0;border:0;background:none;color:#14254a;font:15px var(--mono);outline:none}
.pg-entry input::placeholder{color:#8a98b5}
.pg-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px}
.pg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pg-tool{display:flex;align-items:center;gap:7px;min-height:36px;padding:0 11px;border:1px solid #d9e0ec;border-radius:8px;background:#fff;color:#14254a;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pg-tool:hover,.pg-tool[aria-expanded="true"]{border-color:var(--orange);color:#c4441c}
.pg-glyph{color:var(--orange);font:650 12px var(--mono)}
.pg-cost{min-width:11ch;color:#6b7c9e;font:12px var(--mono);text-align:right;cursor:help}
.pg-go{display:flex;align-items:center;justify-content:center;gap:10px;min-width:170px;min-height:40px;padding:0 18px;white-space:pre;border:0;border-radius:8px;background:var(--orange);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.pg-go:hover{background:#e2552a}
.pg-go:disabled{opacity:.6;cursor:default}
.pg-panel{position:absolute;top:calc(100% + 8px);left:12px;z-index:6;width:min(340px,calc(100% - 24px));display:grid;gap:10px;padding:16px;border:1px solid var(--rule);border-radius:14px;background:var(--deep);color:var(--ink);box-shadow:0 22px 60px rgba(1,8,30,.6)}
.pg-panel.wide{left:auto;right:12px;width:min(620px,calc(100% - 24px))}
.pg-panel .panel-head,.pg-panel .code,.pg-panel p{margin:0}
.pg-check{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.pg-check input{accent-color:var(--orange)}
.pg-check code{color:var(--muted);font:12px var(--mono)}
.pg-check .dash-small{flex-basis:100%;margin-left:22px}
.pg-fields{display:flex;flex-wrap:wrap;gap:10px}
.pg-fields label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
.pg-fields input{min-height:38px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;background:var(--navy);color:var(--ink);font:inherit}
.pg-fields input[type="number"]{width:110px}
/* The format tiles and the options, as the home page's sheets draw them (src/styles.css), on the panel's navy. */
.pg-formats{width:min(760px,calc(100% - 24px))}
.format-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.format-tile{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 8px 11px;border:1px solid rgba(176,200,240,.14);border-radius:6px;background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .18s,background-color .18s}
.format-tile:hover{border-color:rgba(176,200,240,.32);background:rgba(255,255,255,.06)}
.format-tile input{position:absolute;top:12px;left:12px;width:1px;height:1px;margin:0;opacity:0}
.format-tile:has(input:focus-visible){outline:2px solid #fa935f;outline-offset:2px}
.tile-icon{display:grid;place-items:center;height:76px;margin-bottom:8px;border-radius:4px;background:rgba(3,13,42,.55)}
.glyph-icon{width:44px;height:44px;overflow:visible}
.glyph-icon .off{fill:rgba(176,200,240,.26)}
.glyph-icon .on{fill:#cfe0ff;transition:fill .18s}
.tile-name{padding:0 2px;color:#fff;font-size:13.5px;font-weight:650}
.tile-note{padding:0 2px;color:var(--muted);font-size:12px;line-height:1.4}
.tile-ext{margin-top:auto;padding:5px 2px 0;color:#7486ad;font:11px var(--mono)}
.format-tile:has(input:checked){border-color:var(--orange);background:rgba(251,123,76,.1)}
.format-tile:has(input:checked) .glyph-icon .on{fill:var(--orange)}
.format-tile:has(input:checked) .tile-ext{color:#fb9b72}
.format-tile:has(input:checked)::after{content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;background:var(--orange)}
.pg-badge{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--orange);color:#fff;font:650 10.5px var(--mono)}
.pg-label{margin:0 0 8px;color:var(--ink);font-size:13px;font-weight:650}
.pg-read{padding-bottom:12px;border-bottom:1px dotted var(--rule)}
.pg-scope{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.pg-scope label{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--rule);border-radius:8px;font-size:13.5px;cursor:pointer}
.pg-scope label:has(input:checked){border-color:var(--orange);background:rgba(243,104,61,.1)}
.pg-scope input{accent-color:var(--orange)}
.pg-fields-editor{display:grid;gap:8px}
.pg-fields-head{display:flex;align-items:baseline;gap:10px}
.pg-fields-head .pg-label{margin:0}
.pg-count{color:var(--muted);font:12px var(--mono)}
.pg-link{margin-left:auto;padding:0;border:0;background:none;color:var(--orange-soft);font:650 12px var(--mono);cursor:pointer}
.pg-link:disabled{opacity:.4;cursor:default}
.pg-field-list{display:grid;gap:4px}
.pg-field{display:grid;grid-template-columns:2.2ch minmax(0,1fr) auto auto;align-items:center;gap:8px}
.pg-field-index{color:var(--muted);font:12px var(--mono)}
.pg-field input,.pg-field select,.pg-field-new input{min-height:32px;padding:0 8px;border:0;border-bottom:1px dotted var(--rule);background:none;color:var(--ink);font:13px var(--mono)}
.pg-field select{border:1px solid var(--rule);border-radius:5px;background:var(--navy)}
.pg-field-remove{padding:2px 7px;border:0;background:none;color:var(--muted);font:15px var(--mono);cursor:pointer}
.pg-field-remove:hover{color:var(--bad)}
.pg-field-new{display:grid;grid-template-columns:2.2ch minmax(0,1fr) auto;align-items:center;gap:8px;color:var(--orange);font:13px var(--mono)}
.pg-field-new input:focus,.pg-field input:focus{outline:none;border-bottom-color:var(--orange)}
.pg-error{margin:0;color:var(--bad);font-size:12.5px}
.pg-error:empty{display:none}
.pg-note{position:absolute;z-index:1;left:50%;bottom:14px;transform:translateX(-50%);max-width:calc(100% - 40px);margin:0;padding:4px 10px;border-radius:6px;background:rgba(4,18,58,.85);color:var(--ink);font:12.5px var(--mono);text-align:center}
.pg-note:empty{display:none}
.pg-band.is-running .pg-note{color:var(--orange-soft)}
.pg-band.is-running .pg-note::after{content:"";display:inline-block;width:3ch;text-align:left;animation:pg-dots 1.2s steps(4) infinite}
@keyframes pg-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.pg-result{margin:0}
.play-views{margin-bottom:12px}
.play-evidence{margin:0 0 14px;padding:14px;border:1px dashed rgba(243,104,61,.5);border-radius:6px;background:var(--deep)}
.play-evidence .mono{font:12.5px var(--mono)}
.play-output{max-height:560px;overflow:auto}
.pg-runs{position:relative;overflow:hidden;padding:22px;border:1px solid var(--rule);border-radius:16px;background:var(--deep)}
.pg-sea{position:absolute;inset:0;margin:0;overflow:hidden;color:var(--orange);opacity:.26;font:12px/13px var(--mono);white-space:pre;pointer-events:none}
.pg-runs-head{position:relative;display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:18px}
.pg-runs-head h2{margin:8px 0 0;font-size:20px;font-weight:600}
.pg-runs-head a{font:650 12px var(--mono);text-decoration:none}
.pg-runs-empty{position:relative;max-width:62ch;margin:0}
/* A receipt: paper, mono, dotted rules, a torn bottom edge; the paper is the octopus's cream. */
.receipts{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;align-items:start}
.receipt{min-width:0;padding:16px 16px 22px;background:#f6efe0;color:#1b2747;font:12.5px/1.5 var(--mono);box-shadow:0 14px 30px rgba(1,8,30,.45);-webkit-mask:radial-gradient(6px at 50% 100%,transparent 98%,#000) 50% 100%/12px 100% repeat-x;mask:radial-gradient(6px at 50% 100%,transparent 98%,#000) 50% 100%/12px 100% repeat-x}
.receipt:nth-child(3n+2){transform:rotate(.6deg)}
.receipt:nth-child(3n){transform:rotate(-.5deg)}
.receipt-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.receipt-top span::before{content:"■ ";color:var(--orange)}
.receipt-again{padding:2px 7px;border:1px solid #c9bea6;border-radius:5px;background:none;color:#1b2747;font:650 11px var(--mono);cursor:pointer}
.receipt-again:hover{border-color:var(--orange);color:#c4441c}
.receipt-url{margin:0 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:700}
.receipt dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 14px;margin:0;padding:10px 0;border-top:1px dashed #b9ad93;border-bottom:1px dashed #b9ad93}
.receipt dt{color:#6d6553}
.receipt dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.receipt dd.ok{color:#17804f}
.receipt dd.warn{color:#9a6a00}
.receipt dd.bad{color:#b23a22}
.receipt-hash{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 0;color:#6d6553;font-size:11px;overflow-wrap:anywhere}
.receipt-copy{flex:none;padding:1px 6px;border:1px solid #c9bea6;border-radius:4px;background:none;color:#1b2747;font:650 10.5px var(--mono);cursor:pointer}
.receipt-copy:hover{border-color:var(--orange);color:#c4441c}
.receipt-final{margin:-6px 0 10px;overflow:hidden;color:#6d6553;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.receipt dd.unknown{color:#8d846f;font-style:italic}
.receipt dd.wrap{white-space:normal;overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){
  .pg-panel.is-printing{animation:pg-print .3s steps(20,end) backwards}
  .pg-panel.is-printing::after{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;background:radial-gradient(circle,var(--orange) 1px,transparent 1.5px) 0 0/6px 2px repeat-x;animation:pg-head .3s steps(20,end) forwards;pointer-events:none}
  .pg-panel.is-printing>*,.pg-panel.is-printing .pg-check{animation:pg-row .01s backwards;animation-delay:calc(var(--row,0)*22ms + 40ms)}
  .receipt.is-new{animation:pg-receipt .45s steps(9,end) backwards}
  .pg-toolbar.is-switching{animation:pg-toolbar .32s steps(12,end) backwards}
}
@keyframes pg-print{from{clip-path:inset(0 0 100% 0 round 14px)}to{clip-path:inset(0 0 0 0 round 14px)}}
@keyframes pg-head{from{top:0;opacity:1}to{top:100%;opacity:0}}
@keyframes pg-row{from{opacity:0}to{opacity:1}}
@keyframes pg-receipt{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes pg-toolbar{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
/* Usage: By site and By key side by side, the same height. */
.tm-panel{display:flex;flex-direction:column}
.tm-host{min-height:300px}
.dash-grid.even{align-items:stretch}
.meters{display:grid;gap:12px;margin:0 0 10px;padding:0;list-style:none}
.meters p{display:flex;justify-content:space-between;gap:10px;margin:0 0 2px;font-size:14px}
.meters .mono{font:12.5px var(--mono);color:var(--muted);white-space:nowrap}
/* Connect: two columns of two panels, each row as tall as its taller panel. */
.connect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;margin-bottom:18px}
.connect-grid .panel{margin-bottom:0}
.connect-grid .panel-head>div:first-child,.settings-grid .panel-head>div:first-child{flex:1 1 220px;min-width:0}
.field-box{margin:0 0 14px;padding:12px;border:1px solid var(--rule);border-radius:8px;background:var(--deep)}
.field-box .code{margin:0}
.field-label{margin:0 0 8px;color:var(--muted);font:650 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.key-field{display:flex;align-items:center;gap:6px}
.key-field input{flex:1;min-width:0;min-height:38px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;background:var(--navy);color:var(--ink);font:13px var(--mono)}
/* Masked without being a password field, so no browser offers to save the key. */
.key-field input.masked{-webkit-text-security:disc;text-security:disc}
.key-field .copy{position:static}
.icon-button{min-width:34px;min-height:34px;padding:0;border:1px solid var(--rule);border-radius:6px;background:none;color:var(--muted);font:14px/1 var(--mono);cursor:pointer}
.icon-button[aria-pressed="true"]{border-color:var(--orange);color:var(--orange-soft)}
.key-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:10px 0 8px}
.key-actions .button.small{border:0;cursor:pointer}
.code-tabs{margin:0 0 10px}
.code-pane .code{margin:0}
/* Settings: two columns of panels, each row as tall as its taller panel. */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;margin-bottom:18px}
.settings-grid .panel{margin-bottom:0}
.settings-grid .facts{margin-bottom:12px}
.prefs{display:grid;gap:12px;margin-bottom:10px}
.prefs label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
.prefs select{min-height:38px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;background:var(--deep);color:var(--ink);font:inherit}
/* Delete account: the one red panel. */
.panel.danger{border-color:rgba(255,138,122,.45)}
.panel.danger h2{color:var(--bad)}
.delete-form{max-width:640px;margin:6px 0 0}
.button.danger-button{background:var(--bad);color:#2a0b06}
.button.danger-button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:900px){
  .dash{grid-template-columns:minmax(0,1fr)}
  .connect-grid,.settings-grid{grid-template-columns:minmax(0,1fr)}
  .dash-menu{top:calc(100% + 8px);bottom:auto}
  .dash-side{position:static;height:auto;gap:12px;border-right:0;border-bottom:1px solid var(--rule);overflow:visible}
  .dash-nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
  .dash-group{display:none}
  .dash-credits{margin-top:0}
  .dash-main{padding:0 16px 48px}
  .dash-grid,.dash-grid.even{grid-template-columns:minmax(0,1fr)}
  .ev-hero{min-height:0;padding:34px 18px}
  .ev-copy h2{font-size:30px}
  .ev-field{opacity:.3}
  .integrations{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary>div:nth-child(3){border-left:0}
  .summary>div:nth-child(n+3){border-top:1px dotted var(--rule)}
  .filters input{min-width:0;width:100%}
  .filters label:first-child{flex:1 1 100%}
  .filters .button{margin-left:0}
  .dash-grid .panel{margin-bottom:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(3){border-left:0}
  .kpi:nth-child(n+3){border-top:1px dotted var(--rule)}
  .dash-head h1{font-size:28px}
}
@media (max-width:480px){
  .pg-band{padding:96px 12px 56px}
  .pg-tiles{grid-template-columns:minmax(0,1fr)}
  .format-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-picker{min-width:0;width:calc(100% - 24px)}
  .pg-toolbar>.pg-tools:last-child{flex:1 1 100%;justify-content:space-between}
  .pg-runs{padding:14px}
  .dash-form{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr);gap:2px}
  .facts dd{margin-bottom:10px}
}
@media (prefers-reduced-motion:no-preference){
  .kpis,.panel{animation:print .42s steps(7) both}
  @keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
}