/* panel.sudievu.lt - shared tokens and parts, in Lantern (round 42; the look of the sign-in page and of sudievu.lt's client area).
   Navy ground, Poppins 400/600 with JetBrains Mono for labels and numbers, 18 px cards with a gradient, round pills, a glow from the top.
   Dark only: there is no light theme. BLUE is for ordinary navigation and actions, GREEN (--go) only for the one click wanted next and for "ok",
   RED (--stop) for the important and for faults, AMBER (--warn) for "needs a look". One green button on a screen at a time. */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: dark;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --ground: #0b1230;
  --sheet: #141d44;
  --sheet-2: #0b1233;
  --sheet-hi: #1d2858;
  --card-bg: linear-gradient(180deg, #172250, #121b42);
  --card-solid: #172250;
  --line: #26327a;
  --line-2: #6c7dd0;
  --line-3: #3a4a9a;
  --ink: #eef1ff;
  --ink-2: #b9c1e6;
  --ink-3: #97a2d0;

  --blue: #3b64e8;
  --blue-lit: #9db5ff;
  --blue-hover: #2f55d6;
  --on-blue: #ffffff;
  --go: #3ddc97;
  --go-lit: #6aedb4;
  --on-go: #031a10;
  --stop: #ff6f86;
  --warn: #ffc15e;

  --lamp: var(--go);
  --amber: var(--warn);
  --ember: var(--stop);
  --lamp-wash: rgba(61, 220, 151, 0.12);
  --amber-wash: rgba(255, 193, 94, 0.12);
  --ember-wash: rgba(255, 111, 134, 0.14);
  --track: #26327a;
  --focus: #ffe08a;
  --on-state: #0b1230;

  --series: #9db5ff;
  --series-2: #6c7dd0;
  --series-wash: rgba(157, 181, 255, 0.1);

  --atmo-top: #0b1230;
  --atmo-mid: #121b42;
  --atmo-glow: #3b64e8;
  --atmo-line: #9db5ff;
  --atmo-star: 1;
  --atmo-grain: 0.05;
  --shadow: 0 16px 44px rgba(2, 5, 24, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-card: var(--shadow);
  --r-card: 18px;
}

/* State: the mood of the whole page. Set on <html> by the page script. */
html[data-state="ok"],
html:not([data-state]) {
  --state: var(--lamp);
  --state-wash: var(--lamp-wash);
}
html[data-state="warn"] {
  --state: var(--amber);
  --state-wash: var(--amber-wash);
}
html[data-state="bad"] {
  --state: var(--ember);
  --state-wash: var(--ember-wash);
}
/* the painted band's light takes the state's colour: calm is Lantern's blue, a thing to look at is amber, a fault is red */
:root[data-state="warn"] {
  --atmo-glow: #ffc15e;
  --atmo-line: #ffe08a;
  --atmo-mid: #1d1a30;
}
:root[data-state="bad"] {
  --atmo-glow: #ff6f86;
  --atmo-line: #ffb3c0;
  --atmo-mid: #26142e;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(16px, 0.25vw + 13px, 18px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(120% 60% at 50% -8%, rgba(59, 100, 232, 0.22), transparent 62%), var(--ground);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, canvas { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
th { font-weight: inherit; text-align: inherit; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--ground);
  border-radius: 0.6rem;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 0.6rem; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dim { color: var(--ink-2); }
.mute { color: var(--ink-3); }

/* ---- Marks: state is a shape as well as a colour --------------------------------- */

.mk {
  --mk: var(--lamp);
  display: inline-block;
  flex: none;
  width: 0.7em;
  height: 0.7em;
  color: var(--mk);
  vertical-align: baseline;
  filter: drop-shadow(0 0 0.32em color-mix(in srgb, var(--mk) 60%, transparent));
}
.mk::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: 50%;
}
.mk--warn { --mk: var(--amber); }
.mk--warn::before { border-radius: 0; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }
.mk--bad { --mk: var(--ember); }
.mk--bad::before { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mk--off { --mk: var(--ink-3); filter: none; }
.mk--off::before { background: transparent; box-shadow: inset 0 0 0 0.12em currentColor; }
.mk--busy { --mk: var(--amber); }
.mk--busy::before {
  background: conic-gradient(currentColor 0 50%, transparent 0 100%);
  box-shadow: inset 0 0 0 0.12em currentColor;
}
.brand .mk { transition: none; }
html[data-state="warn"] .brand .mk::before { border-radius: 0; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }
html[data-state="bad"] .brand .mk::before { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mk--quiet { filter: none; }
.mk--dim { --mk: var(--ink-2); filter: none; }
.mk--ring { --mk: var(--ink-2); filter: none; }
.mk--ring::before { background: transparent; box-shadow: inset 0 0 0 0.14em currentColor; }

/* ---- Header: shared by all three pages ------------------------------------------- */

.top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  min-height: 3.75rem;
  padding: 0.5rem clamp(1rem, 1.7vw, 2.75rem);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.brand .mk { width: 0.95rem; height: 0.95rem; --mk: var(--state); }
.top-ctx { color: var(--ink-2); font-size: 0.9375rem; min-width: 0; }
/* A link the viewer does not have has no place in the row, from the first paint: the server writes the ones they have into <html data-nav> (app/http.php).
   The page the viewer is on is always there. The questions link is the client's tenth at most (the administrator's row is full at ten, so his questions page has no link of
   its own and never marks one current: his way in is the overview). */
html[data-nav]:not([data-nav~="ops"]) [data-nav-link="ops"]:not([aria-current]),
html[data-nav]:not([data-nav~="files"]) [data-nav-link="files"]:not([aria-current]),
html[data-nav]:not([data-nav~="accounts"]) [data-nav-link="accounts"]:not([aria-current]),
html[data-nav]:not([data-nav~="restore"]) [data-nav-link="restore"]:not([aria-current]),
html[data-nav]:not([data-nav~="staging"]) [data-nav-link="staging"]:not([aria-current]),
html[data-nav]:not([data-nav~="wordpress"]) [data-nav-link="wordpress"]:not([aria-current]),
html[data-nav]:not([data-nav~="git"]) [data-nav-link="git"]:not([aria-current]),
html[data-nav]:not([data-nav~="databases"]) [data-nav-link="databases"]:not([aria-current]),
html[data-nav]:not([data-nav~="tickets"]) [data-nav-link="tickets"]:not([aria-current]),
html[data-nav]:not([data-nav~="events"]) [data-nav-link="events"]:not([aria-current]),
html[data-nav]:not([data-nav~="visits"]) [data-nav-link="visits"]:not([aria-current]),
html[data-nav]:not([data-nav~="seo"]) [data-nav-link="seo-client"]:not([aria-current]),
html[data-nav]:not([data-nav~="staging"]):not([data-nav~="wordpress"]):not([data-nav~="git"]):not([data-nav~="databases"]) .tool-group:not(:has([aria-current])) { display: none; } /* the Site group: only when one of its four is theirs */
html[data-nav]:not([data-nav~="accounts"]) [data-admin-only] { display: none; } /* the accounts page is the administrator's alone: so is whatever is marked as theirs */
.top-tools { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem 0.5rem; }

.seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.seg button {
  min-width: 2.4rem;
  min-height: 1.9rem;
  padding: 0 0.6rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.seg button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); }
.seg button:not([aria-pressed="true"]):hover { color: var(--ink); background: var(--sheet-hi); }
/* the language switch: squared segments and 44 px targets, never a pill */
.seg[data-lang-switch] { border-radius: 0.625rem; }
.seg[data-lang-switch] button { min-width: 44px; min-height: 44px; border-radius: 0.4rem; }

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0 0.85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
}
.tool:hover { color: var(--ink); border-color: var(--line-2); background: color-mix(in srgb, var(--sheet-hi) 55%, transparent); }
.top .tool, .top .seg button:not([aria-pressed="true"]) { color: var(--ink); }
.top .seg button:not([aria-pressed="true"]):hover { background: var(--sheet-hi); }
/* Lantern is dark only: the theme button is gone from every page (theme-init.js always sets dark) */
[data-theme-toggle] { display: none !important; }
.glyph-theme {
  width: 0.95em; height: 0.95em;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* ---- Atmosphere: the painted field behind a band --------------------------------- */

.atmo { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: var(--atmo-top); }
.atmo canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.atmo canvas.on { opacity: 1; }

noscript .ns {
  display: block;
  max-width: 34rem;
  margin: 20vh auto 0;
  padding: 0 1.25rem;
  font-size: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .mk::before { forced-color-adjust: none; }
  .seg button[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* a header link that carries a fault: a small diamond, so the page behind it is worth opening */
/* the diamond takes no room of its own (it sits in the link's right padding): a link must be the same width with or without a fault, or every link after it moves */
.tool[data-s="bad"] { position: relative; }
.tool[data-s="bad"]::after { content: ""; position: absolute; top: 50%; right: 0.28rem; width: 0.5em; height: 0.5em; margin-top: -0.25em; background: var(--ember); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---- The shell (design round 62): a fixed sidebar from 900 px up, a bottom tab bar and a sheet under it --------------------------------------------------------------
   One markup (ui/_shell.html), no change to any page: the sidebar is #top-menu (a popover that is drawn in place from 900 px, and opens as the phone's sheet below it), the top
   bar is the old <header class="top"> kept in the flow, and the page's own <main> is given the room by the body's padding. */

:root { --side-w: 264px; }
@media (max-width: 1180px) { :root { --side-w: 232px; } }

.tabbar { display: none; }
.menu-btn { cursor: pointer; }

.shell-bar { gap: 0.5rem 1rem; min-height: 4.25rem; }
.shell-bar .brand { display: none; }
.shell-tools { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.shell-search {
  display: flex; align-items: center; gap: 0.5rem; width: min(21rem, 34vw); min-height: 2.75rem; padding: 0 0.75rem;
  border: 1px solid var(--line-2); border-radius: 0.875rem; background: color-mix(in srgb, var(--ground) 55%, transparent); color: var(--ink-3);
  transition: border-color 0.15s var(--ease);
}
.shell-search:hover { border-color: var(--line-3); }
.shell-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.shell-search input {
  flex: 1; min-width: 0; height: 2.5rem; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 0.9375rem;
  -webkit-appearance: none; appearance: none; box-shadow: none;
}
.shell-search input::placeholder { color: var(--ink-3); opacity: 1; }
.shell-search input::-webkit-search-cancel-button { display: none; }
.shell-search kbd { font: 500 0.6875rem var(--mono); padding: 0.05rem 0.4rem; border: 1px solid var(--line-3); border-radius: 0.4rem; color: var(--ink-3); }
.shell-search:focus-within kbd { display: none; }
.shell-bell {
  position: relative; display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); border-radius: 0.875rem;
  background: color-mix(in srgb, var(--ground) 55%, transparent); color: var(--ink-2); text-decoration: none; transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.shell-bell:hover { color: var(--ink); border-color: var(--line-3); }
.shell-bell[hidden] { display: none; }
.shell-bell [data-count] {
  position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px;
  background: var(--stop); color: var(--ground); font: 700 0.6875rem/1.2rem var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--ground);
}
.shell-bell [data-count][hidden] { display: none; }
/* the update time and the server's name belong to the overview only */
html:not([data-page="admin"]) .shell-bar .live, html:not([data-page="admin"]) .shell-bar .top-ctx { display: none; }
.shell-bar .live { margin-right: 0; }
@media (max-width: 1599px) { .admin .shell-bar .top-ctx { display: none; } }

/* the page links: one column of icon and name; the current page is the filled blue box */
.top-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.top-nav .tool, .top-tools .tool {
  justify-content: flex-start; gap: 0.75rem; min-height: 2.375rem; padding: 0 0.75rem; border: 0; border-radius: 0.75rem; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.2;
}
.top-nav .tool:hover, .top-tools .tool:hover { background: color-mix(in srgb, var(--blue-lit) 9%, transparent); color: var(--ink); border: 0; }
.top-nav .tool[aria-current="page"] {
  background: var(--blue); color: var(--on-blue); font-weight: 600; box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--blue) 55%, transparent);
}
.top-nav .tool:focus-visible, .tabbar a:focus-visible, .menu-btn:focus-visible, .top-tools .tool:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tool-group { display: flex; flex-direction: column; margin: 0.375rem 0; padding: 0.375rem 0 0.375rem 0.75rem; border-block: 1px solid var(--line); }
.group-label { display: block; min-height: 1.5rem; font: 500 0.8125rem/1.5rem var(--font); color: var(--ink-3); }
.tool-group .tool { min-height: 2rem; margin-left: 0.3rem; border-left: 1px solid var(--line-3); border-radius: 0 0.625rem 0.625rem 0; font-size: 0.875rem; }
.tool-group .tool[aria-current="page"] { border-left-color: var(--blue); }
.top-tools { display: grid; gap: 0.5rem; justify-content: stretch; margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.top-tools .seg { justify-self: start; margin-left: 0.5rem; }
.top-nav .tool .ico, .top-tools .tool .ico { color: var(--ink-3); }
.top-nav .tool[aria-current="page"] .ico, .top-nav .tool:hover .ico { color: inherit; }

@media (min-width: 900px) { .top-nav .sheet-app { display: none; } }
@media (min-width: 900px) {
  body:has(.shell-bar) { padding-left: var(--side-w); }
  .client .top.shell-bar { left: var(--side-w); }
  .top-menu {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--side-w); height: 100dvh; margin: 0; padding: 1.1rem 0.875rem 0.875rem;
    overflow-y: auto; overscroll-behavior: contain; border: 0; border-right: 1px solid var(--line-3); border-radius: 0; color: var(--ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 11%, var(--ground)), var(--ground));
  }
  .side-brand { padding: 0.15rem 0.5rem 0.9rem; }
  .top-tools { position: sticky; bottom: -0.875rem; margin-bottom: -0.875rem; padding-bottom: 0.875rem; background: color-mix(in srgb, var(--ground) 96%, var(--blue)); }
  .top-nav { flex: 1 0 auto; }
  .menu-btn { display: none; }
}

/* the phone: a tab bar of the four pages the owner uses most, and "more" opens everything else as a sheet from below */
@media (max-width: 899px) {
  body:has(.shell-bar) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .shell-bar { flex-wrap: wrap; padding-block: 0.5rem; min-height: 3.5rem; }
  .shell-bar .brand { display: inline-flex; min-height: 2.75rem; }
  .shell-bar .top-ctx { display: none; }
  .shell-tools { display: contents; }
  .shell-bell { margin-left: auto; order: 1; }
  .shell-search { order: 3; flex: 1 0 100%; width: auto; min-width: 0; min-height: 3rem; }
  .shell-search input { font-size: 1rem; height: 2.75rem; }
  .shell-search kbd { display: none; }
  .shell-bar .live { order: 0; flex: 0 1 auto; min-width: 0; }
  .shell-bar .live:not([data-live="ok"]) { order: 2; flex: 1 0 100%; }
  .shell-bar .live[data-live="ok"] .live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .tabbar {
    position: fixed; z-index: 30; inset: auto 0 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: color-mix(in srgb, var(--sheet) 97%, transparent); border-top: 1px solid var(--line-3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform 0.22s var(--ease);
  }
  .tabbar[data-hide] { transform: translateY(100%); }
  .tabbar a, .tabbar .menu-btn {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 0.1rem; min-width: 0; min-height: 3.75rem; padding: 0.25rem 0.1rem; border: 0; background: none;
    color: var(--ink-2); font: 500 0.75rem/1.2 var(--font); text-decoration: none;
  }
  .tabbar a > span, .tabbar .menu-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a[aria-current="page"], .tabbar .menu-btn[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue-lit); }
  .tabbar a[aria-current="page"] .ico, .tabbar .menu-btn[aria-expanded="true"] .ico { color: var(--blue-lit); }
  .tabbar a[data-s="bad"]::after { content: ""; position: absolute; top: 0.5rem; left: calc(50% + 0.55rem); width: 0.5rem; height: 0.5rem; background: var(--ember); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  html[data-demo="1"] .tabbar { bottom: 7.2rem; }
  html[data-demo="1"] body:has(.shell-bar) { padding-bottom: calc(11.7rem + env(safe-area-inset-bottom)); }

  .top-menu {
    display: none; position: fixed; inset: auto 0 0 0; z-index: 50; width: auto; height: auto; max-height: 86dvh; margin: 0; overflow: auto; overscroll-behavior: contain;
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom)); border: 1px solid var(--line-3); border-bottom: 0; border-radius: 22px 22px 0 0; color: var(--ink);
    background: var(--sheet); box-shadow: 0 -20px 50px rgba(2, 5, 24, 0.6);
  }
  .top-menu:popover-open, .top-menu[data-open] { display: flex; flex-direction: column; animation: sheet-up 0.26s var(--ease); }
  .top-menu::backdrop { background: rgba(2, 5, 24, 0.6); }
  .top-menu::before { content: ""; flex: none; align-self: center; width: 2.5rem; height: 4px; margin: 0.25rem 0 0.75rem; border-radius: 2px; background: var(--line-2); }
  .side-brand, .top-nav .in-tabs { display: none; }
  .top-nav .tool { min-height: 3.25rem; font-size: 1rem; }
  .top-nav .tool .ico { color: var(--blue-lit); }
  .tool-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.5rem 0; padding: 0.5rem 0; }
  .group-label { grid-column: 1 / -1; padding-inline: 0.75rem; }
  .tool-group .tool { margin: 0; min-height: 3rem; padding: 0 0.9rem; border: 1px solid var(--line-3); border-radius: 0.75rem; background: color-mix(in srgb, var(--ground) 40%, transparent); font-size: 0.9375rem; }
  .tool-group .tool[aria-current="page"] { border-color: var(--blue); }
  .top-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
  .top-tools .seg { margin-left: 0; }
  .top-tools .seg button { min-height: 2.75rem; min-width: 3.25rem; }
  .top-tools .tool { min-height: 3rem; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tabbar { transition: none; } .top-menu:popover-open { animation: none; } }
@media (forced-colors: active) {
  .top-menu { border: 2px solid CanvasText; }
  .top-nav .tool[aria-current="page"], .tabbar a[aria-current="page"] { outline: 2px solid Highlight; }
}


/* ---- Moving from one page to the next ------------------------------------------------------------------------------ */

/* The pages are separate documents, so a switch is a navigation. The browser keeps the old page on screen until the new one has its first frame and
   cross-fades them, with the header and the painted band as pieces of their own: they hold their place and are never redrawn (the new page's are
   laid down from the stored picture at its first frame, see early.js). Not with reduced motion: the switch is then plain. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.top { view-transition-name: top; }
@media (min-width: 900px) { body:has(.shell-bar) .top-menu { view-transition-name: side; } }
/* the band is the whole of it, field and words, as one piece: named on its field alone, the field would be laid over the headline, which belongs to the page */
#band, .client .site:not(.site ~ .site) .hero { view-transition-name: band; }
::view-transition-group(root) { animation-duration: 0.14s; }
::view-transition-group(band) { animation-duration: 0.14s; }
::view-transition-group(top) { animation-duration: 0.14s; }
::view-transition-group(side) { animation-duration: 0.14s; }
/* the band of the page being left goes first, so two headlines are never read on top of each other for long */
::view-transition-old(band) { animation-duration: 0.07s; }


/* ---- The public demo: the strip along the bottom of every page (shown only under <html data-demo="1">) ---------------- */
/* Fixed at the bottom rather than in the page's flow: the header is laid over the top band on some pages (and is part of the first screen's measured geometry on all of
   them), so a strip above it would sit on top of it. The page gets room for it at its end, so nothing is hidden behind it. */

.demo-bar { display: none; }
html[data-demo="1"] body { padding-bottom: 4rem; }
html[data-demo="1"] .demo-bar {
  display: flex; position: fixed; inset: auto 0 0 0; z-index: 60; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 0.9rem;
  padding: 0.6rem var(--gutter, 1rem) calc(0.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--amber) 22%, var(--sheet, #0b161a));
  color: var(--ink); border-top: 1px solid color-mix(in srgb, var(--amber) 65%, transparent); font-size: 0.9375rem; line-height: 1.35; text-align: center;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);
}
.demo-tag { font-weight: 700; letter-spacing: 0.01em; padding: 0.05em 0.7em; border: 1px solid color-mix(in srgb, var(--amber) 80%, transparent); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--amber) 30%, transparent); }
.demo-text { text-wrap: balance; }
.demo-cta { color: var(--ink); font-weight: 650; text-underline-offset: 0.2em; text-decoration-thickness: 1px; padding: 0.4rem 0.2rem; }
.demo-cta:hover { text-decoration-thickness: 2px; }
@media (max-width: 700px) {
  html[data-demo="1"] body { padding-bottom: 7.2rem; }
  .demo-text { flex-basis: 100%; order: 3; font-size: 0.875rem; }
  html[data-demo="1"] .demo-bar { gap: 0.1rem 0.8rem; padding-top: 0.5rem; }
}

/* a phone zooms the page into any field under 16px: every text field and select is at least 16px there, whatever its page says */
@media (max-width: 899px) {
  :is(select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="button"], [type="submit"])):not(#\9) { font-size: max(1rem, 16px); }
}

/* ---- The icon rail (round 63): the sidebar folds to icons; the names stay for screen readers and show as a tooltip (title, set in core.js) ---------------------- */
.tool-group .ico { display: none; }
.fold-btn { display: none; }
@media (min-width: 900px) {
  .fold-btn { display: flex; }
  html[data-rail] { --side-w: 4.5rem; }
  html[data-rail] .top-menu { padding-inline: 0.5rem; }
  html[data-rail] .side-brand { justify-content: center; padding-inline: 0; }
  html[data-rail] .brand-name, html[data-rail] .group-label { display: none; }
  html[data-rail] .top-nav .tool > span, html[data-rail] .top-tools .tool > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-rail] .top-nav .tool, html[data-rail] .top-tools .tool { justify-content: center; padding: 0; }
  html[data-rail] .tool-group { padding-left: 0; }
  html[data-rail] .tool-group .ico { display: inline-block; }
  html[data-rail] .tool-group .tool { margin-left: 0; border-left: 0; border-radius: 0.75rem; min-height: 2.25rem; }
  html[data-rail] .top-tools .seg { justify-self: center; margin-left: 0; flex-direction: column; border-radius: 1rem; }
  html[data-rail] .top-tools .seg button { min-width: 2.5rem; }
  html[data-rail] #shell-fold .ico { transform: scaleX(-1); }
}