/* Tentis night theme: the aiki.gr night-shift look over the existing pages.
   Loaded after each page's own styles. Colours from aiki.gr: sky #02040B -> #030816 -> #071230,
   starlight #E8EEF7, signal cyan #01FFFF (an agent is working / the active field), flag #F5B042.
   Type: Ai-Ki Sans (Mona Sans / Hubot Sans, SIL Open Font License, as aiki.gr serves it). */

@font-face { font-family:"Ai-Ki Sans"; src:url("/assets/fonts/aiki-sans.woff2") format("woff2"); font-weight:200 700; font-stretch:100% 125%; font-display:swap; }

:root {
  --void:#02040B;
  --surface:#060B1C;
  --e1:rgba(4, 9, 24, .74);          /* panels: the sky shows through */
  --e2:rgba(232, 238, 247, .045);    /* tiles inside panels */
  --e3:rgba(232, 238, 247, .09);     /* hover */
  --text:#E8EEF7;                    /* starlight */
  --soft:rgba(232, 238, 247, .84);
  --muted:rgba(232, 238, 247, .64);
  --line:rgba(232, 238, 247, .12);
  --line-strong:rgba(232, 238, 247, .28);
  --cyan:#01FFFF;                    /* signal only */
  --running:#E8EEF7;                 /* "Public" is starlight, not green */
  --queued:#F5B042;                  /* aiki.gr flag */
  --display:normal; --plain:normal;  /* Commissioner's axes no longer apply */
  --night-solid:#060B1C;             /* dialogs, notices, tooltips */
}

/* The sky */
html { background:#02040B; }
body { background:transparent !important; font-family:"Ai-Ki Sans", system-ui, sans-serif !important; font-variation-settings:normal; }
body::before { content:""; position:fixed; inset:0; z-index:-2; background:linear-gradient(to bottom, #02040B 0%, #030816 58%, #071230 100%); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000"%3E%3Ccircle cx="518" cy="151" r="1.3" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="116" cy="536" r="0.8" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="93" cy="507" r="0.6" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="694" cy="70" r="0.6" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="679" cy="827" r="0.6" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="1009" cy="583" r="0.6" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="937" cy="50" r="0.7" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="891" cy="133" r="0.9" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="865" cy="571" r="1.1" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="289" cy="582" r="1.3" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="596" cy="548" r="0.6" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="95" cy="206" r="1.3" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="684" cy="314" r="1.1" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="579" cy="248" r="0.7" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="1248" cy="82" r="0.8" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="792" cy="343" r="0.9" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="974" cy="73" r="1.1" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="264" cy="342" r="0.9" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="63" cy="668" r="1.1" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="1263" cy="818" r="0.8" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="560" cy="497" r="0.9" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="1344" cy="945" r="0.9" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="1063" cy="61" r="1.3" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="1035" cy="993" r="0.9" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="1147" cy="887" r="0.8" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="1505" cy="355" r="1.1" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="790" cy="218" r="0.8" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="1181" cy="398" r="0.9" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="266" cy="402" r="0.8" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="1311" cy="864" r="0.8" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="664" cy="359" r="0.9" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="241" cy="176" r="0.7" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="373" cy="485" r="1.1" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="420" cy="4" r="0.9" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="591" cy="566" r="0.7" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="1375" cy="950" r="1.3" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="1184" cy="457" r="1.3" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="628" cy="399" r="0.6" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="1015" cy="62" r="0.6" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="705" cy="110" r="1.1" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="164" cy="567" r="1.1" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="1518" cy="614" r="0.6" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="983" cy="149" r="0.8" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="964" cy="474" r="0.6" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="1589" cy="466" r="0.9" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="137" cy="102" r="0.8" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="424" cy="829" r="0.7" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="37" cy="951" r="1.1" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="235" cy="543" r="0.6" fill="#E8EEF7" fill-opacity="0.5"/%3E%3Ccircle cx="477" cy="643" r="0.6" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="1353" cy="518" r="0.7" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="1235" cy="533" r="1.1" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="1018" cy="613" r="0.7" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="1309" cy="740" r="0.7" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="828" cy="356" r="0.6" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="1264" cy="472" r="0.7" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="968" cy="344" r="1.3" fill="#E8EEF7" fill-opacity="0.32"/%3E%3Ccircle cx="1528" cy="365" r="0.7" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="363" cy="197" r="0.7" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="999" cy="900" r="0.6" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="1455" cy="344" r="1.3" fill="#E8EEF7" fill-opacity="0.18"/%3E%3Ccircle cx="1335" cy="120" r="0.9" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="1200" cy="478" r="0.7" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="1263" cy="333" r="1.3" fill="#E8EEF7" fill-opacity="0.4"/%3E%3Ccircle cx="741" cy="743" r="0.6" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="254" cy="993" r="0.6" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="945" cy="465" r="1.3" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="979" cy="596" r="0.9" fill="#E8EEF7" fill-opacity="0.65"/%3E%3Ccircle cx="1500" cy="156" r="1.1" fill="#E8EEF7" fill-opacity="0.25"/%3E%3Ccircle cx="34" cy="799" r="1.3" fill="#E8EEF7" fill-opacity="0.65"/%3E%3C/svg%3E") center / cover no-repeat; opacity:.9; }
::selection { background:rgba(1, 255, 255, .25); }
:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline-color:var(--cyan); }

/* Type: light and wide for headings, as on aiki.gr */
h1 { font-weight:320 !important; font-stretch:118%; letter-spacing:-0.03em !important; }
h2 { font-weight:420; font-stretch:112%; letter-spacing:-0.015em; }
h3 { font-weight:500; font-stretch:106%; }
.brand { font-weight:600 !important; font-stretch:112%; letter-spacing:-0.01em; display:inline-flex; align-items:center; gap:10px; }
.brand small { font-stretch:100%; }
.lead { font-weight:300; color:var(--soft); }
.btn, .view button, .period button { font-stretch:105%; }

/* Buttons: starlight primary, quiet outline secondary */
.btn { border-radius:11px; }
.btn-big { border-radius:14px; }
.btn-cyan { background:#E8EEF7 !important; color:#02040B !important; }
.btn-cyan:hover { background:#FFFFFF !important; }
.btn-line { border-color:rgba(232, 238, 247, .28); }
.btn-line:hover { border-color:#E8EEF7; background:rgba(232, 238, 247, .06); }
.view, .period { background:rgba(4, 9, 24, .6); border-color:var(--line); border-radius:13px; }
.view button, .period button { border-radius:9px; }
.view button[aria-pressed="true"], .period button[aria-pressed="true"] { background:#E8EEF7 !important; color:#02040B !important; }

/* Panels sit lighter and rounder on the sky */
.demo, .card, .state, .matrix-wrap, .events, .heat, .panel, .shelf { border-color:var(--line); }
.demo, .state, .matrix-wrap, .heat, .events { border-radius:22px; }
.card { border-radius:20px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.demo, .matrix-wrap, .heat, .events, .state { -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lineup { background:rgba(232, 238, 247, .035); }
.screen, .row-link { border-radius:12px; }
.screen:hover, .row-link:hover { border-color:rgba(232, 238, 247, .5); }
.screen:hover .device, .row-link:hover .dev-s { color:#E8EEF7; }
.open-demo .name { color:#E8EEF7; }
.open-demo .name::after { content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:#01FFFF; box-shadow:0 0 10px rgba(1, 255, 255, .7); vertical-align:middle; }

/* Solid surfaces where text sits over other text */
dialog.panel, dialog.contact, .dlg-foot { background:var(--night-solid) !important; }
dialog.panel, dialog.contact { border-color:rgba(232, 238, 247, .16); border-radius:20px; }
dialog.panel::backdrop, dialog.contact::backdrop { background:rgba(2, 4, 11, .78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.toast, .tip { background:#0A1226 !important; border-color:rgba(232, 238, 247, .2) !important; }
.numbers th:first-child, .numbers td:first-child { background:#050A1A !important; }
select { background-color:rgba(4, 9, 24, .8); }
textarea, .contact-address { background:rgba(2, 4, 11, .7) !important; }
.option:has(input:checked) { border-color:#E8EEF7; background:rgba(232, 238, 247, .06); }
.option input, .demos-pick input { accent-color:#E8EEF7; }

/* Access grid: rings are starlight; cyan fills only where a demo actually ran */
.cell[aria-checked="true"] .mark, .mark.can, .chip .mark, button.cell.chip .mark { border-color:#E8EEF7 !important; }
.cell.opened .mark, .mark.opened, .chip.opened .mark { background:#01FFFF !important; border-color:#01FFFF !important; box-shadow:0 0 8px rgba(1, 255, 255, .55); }
.cell.public .mark, .mark.public, button.cell.chip.public .mark { background:#E8EEF7 !important; border-color:#E8EEF7 !important; }
.cell.public .when { color:#E8EEF7; }
.chip { background:rgba(232, 238, 247, .05); border-color:var(--line); border-radius:10px; }

/* Visibility and notices */
.vis.public { color:#E8EEF7; }
.vis.public .dot { background:#E8EEF7; }
.notice { border-left-color:#F5B042; }
.viewing { background:#F5B042 !important; color:#02040B !important; }

/* Footer quieter on the sky */
.foot { border-top-color:var(--line); }

/* Names and headings that the pages set heavier with more specific rules */
.demo h2, .card h2, .state h2, .shelf h2, dialog h2, h2.section, .signin h1, .title-row h1 { font-weight:450; font-stretch:110%; letter-spacing:-0.015em; }
.title-row h1, .signin h1 { font-weight:320; font-stretch:118%; letter-spacing:-0.03em; }

/* Ai-Ki Sans runs wider than Commissioner: keep narrow columns at normal width */
.heat-name, .matrix thead th, .acc-name, .events time, .heat-head { font-stretch:100%; }
.heat-name { font-weight:500; }

/* Headings and code that some pages set with their own font families */
h1, h2, h3, h4 { font-family:"Ai-Ki Sans", system-ui, sans-serif; }
code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }