/* 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; }
/* The page links are one header on every page: the brand, then Apžvalga, Priežiūra, Failai, Klientai, Atkūrimas, Pagalba, in this order, right after it, and
   language, theme and sign-out at the right edge. Nothing in the row before the links varies from page to page, so a link is at the same x on every page. */
.top-nav { display: flex; flex: none; gap: 0.25rem; margin-left: 1.25rem; }
.top-nav .tool { color: var(--ink); }
/* The row is at most nine entries since the Site group (Bandymai, WordPress, Git, Duomenų bazės are one of them, below); ten links is the most it could hold and needs 1354 px at the least, with their padding at its tightest (measured in Lithuanian, the wider of the two languages), so the menu takes over under 1360 px;
   from there to 1599 px the links have less padding between them (the row measured 73 px too wide at 1440 with the usual padding) */
@media (min-width: 1360px) and (max-width: 1439px) {
  .top-nav { gap: 0.05rem; margin-left: 0.8rem; }
  .top-nav .tool { padding: 0 0.55rem; }
}
/* a client who has the questions link has ten links with "Klausimai" in the row (the administrator's ten have "Klientai"): 15 px more than fits at 1360 to 1366, so theirs sit a little closer */
@media (min-width: 1360px) and (max-width: 1439px) {
  html[data-nav~="tickets"] .top-nav { margin-left: 0.5rem; }
  html[data-nav~="tickets"] .top-nav .tool { padding: 0 0.45rem; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .top-nav { gap: 0.1rem; }
  .top-nav .tool { padding: 0 0.65rem; }
}
.top-nav .tool[aria-current="page"] { border-color: var(--blue); background: var(--blue); color: var(--on-blue); }
/* 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 */
/* ---- The Site group: Bandymai, WordPress, Git and Duomenų bazės under one entry (docs/design/round-31-header.md) ------------------------------------------------
   In the row it is a button that opens a panel of four links with a line each; in the narrow menu there is no button: the four links are listed under a small heading. */
.tool-group { position: relative; display: inline-flex; }
.group-btn { cursor: pointer; font: inherit; font-size: 0.9375rem; color: var(--ink); }
.group-btn::after {
  content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin: -0.2rem 0 0 0.1rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); transition: transform 180ms ease-out; opacity: 0.75;
}
.group-btn[aria-expanded="true"] { border-color: var(--blue-lit); }
.group-btn[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 0.15rem; }
.tool-group:has([aria-current="page"]) > .group-btn { border-color: var(--blue); background: var(--blue); color: var(--on-blue); }
.group-label { display: none; }
.group-panel small { display: block; color: var(--ink-2); font-size: 0.8125rem; font-weight: 400; line-height: 1.35; }
@media (min-width: 1360px) {
  .group-panel:popover-open, .group-panel[data-open] {
    display: grid; gap: 0.1rem; position: fixed; inset: auto; top: var(--gt, 4rem); left: var(--gl, 0); margin: 0; width: 19.5rem; max-width: calc(100vw - 1rem); padding: 0.4rem; overflow: visible;
    border: 1px solid var(--line-3); border-radius: var(--r-card); background: var(--card-bg), var(--card-solid); color: var(--ink);
    box-shadow: 0 28px 64px -18px rgba(2, 5, 24, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  }
  .group-panel[data-open] { position: absolute; top: calc(100% + 0.5rem); left: 0; } /* where popovers do not exist */
  html .top-nav .group-panel .tool {
    display: grid; align-content: center; justify-content: stretch; gap: 0.05rem; min-height: 3.4rem; padding: 0.5rem 0.9rem; border: 0; border-radius: 0.75rem; color: var(--ink); font-size: 1rem; text-align: left;
  }
  html .top-nav .group-panel .tool:hover { background: var(--sheet-hi); border: 0; }
  html .top-nav .group-panel .tool[aria-current="page"] { background: var(--blue); color: var(--on-blue); font-weight: 600; }
  html .top-nav .group-panel .tool[aria-current="page"] small { color: rgba(255, 255, 255, 0.86); }
  .group-panel .tool:focus-visible { outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) { .group-btn::after { transition: none; } }
.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); }

.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%); }

/* ---- Header menu: below 1360 px everything but the brand lives in one menu ------------- */

.menu-btn, .menu-sep { display: none; }
.top-menu { display: contents; }
.glyph-menu {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.15rem;
  height: 0.9rem;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat;
  transition: background-size 0.15s;
}
.glyph-menu::before, .glyph-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.18s, transform 0.18s;
}
.glyph-menu::before { top: 0; }
.glyph-menu::after { top: calc(100% - 2px); }
.menu-btn[aria-expanded="true"] .glyph-menu { background-size: 0 2px; }
.menu-btn[aria-expanded="true"] .glyph-menu::before { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .glyph-menu::after { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (max-width: 1359px) {
  .top { flex-wrap: wrap; row-gap: 0.25rem; }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    min-height: 2.75rem;
    padding: 0 1.05rem 0 0.95rem;
    background: var(--card-solid);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--sheet-hi); border-color: var(--blue-lit); }
  .top .live { margin-left: auto; }
  .top .live + .menu-btn { margin-left: 0.6rem; }

  /* the panel: in the top layer, so no band or sticky bar can clip or cover it */
  .top-menu {
    display: none;
    position: fixed;
    inset: auto;
    top: 4.2rem;
    right: max(var(--gutter, 1rem), env(safe-area-inset-right));
    margin: 0;
    width: min(21rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 5.4rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0.45rem;
    border: 1px solid var(--line-3);
    border-radius: var(--r-card);
    background: var(--card-bg), var(--card-solid);
    color: var(--ink);
    box-shadow: 0 28px 64px -18px rgba(2, 5, 24, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  }
  .top-menu:popover-open, .top-menu[data-open] { display: flex; flex-direction: column; gap: 0.1rem; }
  .top-menu::backdrop { background: rgba(3, 6, 22, 0.6); }
  @supports (top: anchor(bottom)) {
    .menu-btn { anchor-name: --menu-btn; }
    .top-menu { position-anchor: --menu-btn; top: calc(anchor(bottom) + 0.5rem); }
  }

  .top-menu .top-nav, .top-menu .top-tools { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0.1rem; width: 100%; margin: 0; }
  .top-menu .top-tools { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.5rem; }
  .top-menu .menu-sep { display: block; flex: none; width: 100%; height: 1px; margin: 0.35rem 0; border: 0; background: var(--line); }
  .top-menu .tool {
    flex: 1 1 100%;
    width: 100%;
    min-height: 3rem;
    padding: 0 0.95rem;
    border: 0;
    border-radius: 0.75rem;
    color: var(--ink);
    font-size: 1rem;
    justify-content: flex-start;
  }
  .top-menu .tool:hover, .top-menu .top-nav .tool:hover { background: var(--sheet-hi); border: 0; }
  .top-menu .top-nav .tool[aria-current="page"] { background: var(--blue); color: var(--on-blue); font-weight: 600; }
  .top-menu .tool-text { position: static; display: inline; width: auto; height: auto; overflow: visible; clip-path: none; }
  .top-menu .top-tools .seg { flex: none; margin: 0.15rem 0; }
  .top-menu .top-tools .seg button { min-height: 2.75rem; min-width: 3rem; }
  /* the Site group in the menu: no button, a small heading and its links, each with its line */
  .tool-group, .group-panel { display: contents; }
  .group-btn { display: none; }
  .group-label { display: block; margin: 0.55rem 0.95rem 0.1rem; color: var(--ink-3); font-size: 0.8125rem; font-weight: 560; letter-spacing: 0.02em; }
  .top-menu .group-panel .tool small { display: none; } /* the line under each name is for the row's panel; the menu is already long */
}
@media (max-width: 340px) {
  .menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menu-btn { padding: 0 0.95rem; }
}
@media (max-width: 440px) {
  /* a fault in the connection takes a line of its own under the brand; a calm one is only the dot */
  .top .live:not([data-live="ok"]) { order: 3; flex: 1 0 100%; margin: 0; }
  .top .live[data-live="ok"] .live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (min-width: 1360px) {
  .top { flex-wrap: nowrap; }
  .top .top-tools { flex: none; flex-wrap: nowrap; }
  .top .live { flex: none; white-space: nowrap; }
  .top .top-ctx { flex: 0 1 auto; min-width: 0; }
  /* the admin's overview has two more things in the row, and both come after the links: the server's name (only where there is room) and the update time in a slot of its own,
     as wide as its longest sentence, so that neither changes where a link is, and the tools stay at the right edge */
  .admin .top .top-nav { order: 1; }
  .admin .top .top-ctx { order: 2; }
  .admin .top .live { order: 3; margin-left: auto; flex: 0 1 12rem; min-width: 0; justify-content: flex-end; }
  .admin .top .top-tools { order: 4; margin-left: 0; }
}
@media (min-width: 1360px) and (max-width: 1599px) {
  .admin .top .top-ctx { display: none; }
}
@media (forced-colors: active) {
  .top-menu { border: 2px solid CanvasText; }
  .menu-btn { border-color: ButtonText; }
  .top-menu .top-nav .tool[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; }
/* 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; }
/* 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); }
}