/* СОВА brand (A43): the font, colors, the owl and its blink, buttons, the connection overlay.
   Used by every panel page and by the start window opened from disk (scripts/start.sh copies
   this file and montserrat.woff2 next to it), so keep the font path relative. No external
   address anywhere. */
@font-face {
  font-family: "Montserrat";
  src: url("montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Colours, light and dark (A43). Every colour variable has its light value here, and the same
   dark values twice: under prefers-color-scheme (the theme "as in the system", and the start
   window, which has no cookie) unless the panel was switched to light, and under
   data-theme="dark" (switched to dark). color-scheme follows, so system colours (Canvas, the
   form fields, ButtonFace) follow too. Keep the two dark blocks the same (a test checks it). */
:root {
  color-scheme: light dark;
  --brand-font: "Montserrat", system-ui, sans-serif;
  --brand: #001c54;
  --accent: #087fff;
  --btn-bg: #001c54;  /* primary button: white on dark blue, 16:1 */
  --btn-fg: #ffffff;
  --owl: #001c54;
  --name: #001c54;  /* the name: the brand dark blue on light, a light blue on dark */
  --accent-text: #0a5fc7;  /* accent for TEXT on white (6:1); #087fff stays for the bar, check mark, focus ring */
  --expansion: #555566;
  --track: #dbe6f7;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #001c54;
    --accent: #087fff;
    --btn-bg: #5aa9ff;  /* a lighter blue keeps the contrast: dark blue text on it, 6.6:1 */
    --btn-fg: #001c54;
    --owl: #e6ecfb;
    --name: #e6ecfb;
    --accent-text: #5aa9ff;
    --expansion: #b4bdd6;
    --track: #2b3b5e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #001c54;
  --accent: #087fff;
  --btn-bg: #5aa9ff;
  --btn-fg: #001c54;
  --owl: #e6ecfb;
  --name: #e6ecfb;
  --accent-text: #5aa9ff;
  --expansion: #b4bdd6;
  --track: #2b3b5e;
}

/* The owl: the body takes the theme color, the beak stays accent blue (its own attribute). */
.sova-body { fill: var(--owl); }
.sova-eye { transform-box: fill-box; transform-origin: center; }
/* Base rules first: the media blocks below have the same specificity and must come later. */
/* The loading indicator under the owl: a thin bar with a segment running through it while
   waiting, a check mark when ready. It carries no words (the language is not always known). */
.sova-progress { height: 28px; margin: 1.2rem auto 0; display: flex; align-items: center; justify-content: center; }
.sova-bar { width: 160px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.sova-bar-run { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--accent); opacity: .45; }  /* static: the reduced-motion look */
.sova-check { display: none; width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sova-ready .sova-bar { display: none; }
.sova-ready .sova-check { display: block; }

@keyframes sova-blink {
  0%, 88%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(0.08); }
}
@keyframes sova-blink-once {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.08); }
}
/* Blinking and the running bar only for people who did not ask for less motion. "ready" has no
   animation: eyes open, the check mark instead of the bar. */
@keyframes sova-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: no-preference) {
  .sova-starting .sova-eye { animation: sova-blink 3.8s ease-in-out infinite; }
  .sova-blink-once .sova-eye { animation: sova-blink-once 0.45s ease-in-out 0.7s 1; }
  .sova-bar-run { width: 40%; opacity: 1; animation: sova-run 1.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .sova-eye, .sova-bar-run { animation: none !important; }
  .sova-bar-run { width: 100%; opacity: .45; }
}

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Brand font: name, headings, buttons. Body text and tables stay system-ui. */
h1, h2, h3, button, header.top .brand, .sova-name, .sova-expansion { font-family: var(--brand-font); }
h1, h2, h3 { font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Header: the small owl and the name. */
header.top .brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .08em; margin-right: .5rem; }
header.top .brand strong { color: var(--name); }
header.top .brand .sova-mark { width: 1.7rem; height: 1.7rem; }

/* Buttons. Primary: filled. Secondary (the header, small inline forms) and the yes/no buttons
   keep a plain look and their meaning. */
button { font-weight: 600; border: 1px solid transparent; border-radius: 6px; background: var(--btn-bg); color: var(--btn-fg); }
button:disabled { opacity: .55; cursor: default; }
button.yes, button.no, form.inline button, header.top button { background: ButtonFace; color: ButtonText; border: 1px solid #888; }
button.yes { border: 2px solid var(--ok); }
button.no { border: 2px solid var(--bad); }

/* The language switch and the theme switch in the header: small buttons, the current one filled. */
header.top form.lang, header.top form.theme { display: inline-flex; gap: .25rem; margin: 0; }
header.top form.lang button, header.top form.theme button { font-size: .75rem; padding: .15rem .5rem; }
header.top form.lang button[aria-pressed="true"], header.top form.theme button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }

/* The login page (centred): the owl, the name, the expansion, the form, the small switch. */
.sova-hero { text-align: center; margin: 1rem 0 1.5rem; }
.sova-hero .sova-mark { width: 7rem; height: 7rem; }
.sova-name { font-weight: 800; font-size: 2.2rem; letter-spacing: .12em; margin: .3rem 0 0; color: var(--name); }
.sova-expansion { font-weight: 500; color: var(--expansion); margin: .2rem 0 0; }
.login-page { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-page .sova-hero { margin: 1rem 0 1.2rem; }
.login-page .sova-hero .sova-mark { width: min(11rem, 28vh, 60vw); height: min(11rem, 28vh, 60vw); }
.login-error { max-width: 26rem; margin: 0 0 .8rem; }
.login-form { width: 100%; max-width: 22rem; margin: 0 auto; text-align: center; }
.login-form label { display: block; margin: .8rem 0 .2rem; font-weight: 600; text-align: center; }
.login-form input[type=text], .login-form input[type=password] { width: 100%; max-width: 22rem; box-sizing: border-box; padding: .5rem .6rem; text-align: center; font-size: 1rem; }
.login-form button { width: 100%; margin-top: 1.2rem; padding: .65rem 1rem; font-size: 1.05rem; cursor: pointer; }
.login-hint { max-width: 32rem; margin: 1.4rem auto 0; text-align: center; line-height: 1.5; }
.login-switch { margin: 1.2rem 0 0; display: flex; justify-content: center; align-items: center; gap: .4rem; font-size: .9rem; }
.login-switch form { margin: 0; display: inline; }
.login-switch button { background: none; border: 0; color: var(--accent-text); text-decoration: underline; cursor: pointer; font-size: inherit; font-weight: 600; padding: .2rem .3rem; }
.login-switch .current { font-weight: 800; padding: .2rem .3rem; }
/* The small theme switch under the forms of the login and lock pages (links, the current bold). */
.theme-switch { margin: .6rem 0 0; display: flex; justify-content: center; gap: .2rem .6rem; flex-wrap: wrap; font-size: .85rem; }
.theme-switch button, .lock-other button.linklike { background: none; border: 0; color: var(--accent-text); text-decoration: underline; cursor: pointer; font-size: inherit; font-weight: 600; padding: .2rem .3rem; }
.theme-switch button[aria-pressed="true"] { color: inherit; text-decoration: none; font-weight: 800; cursor: default; }

/* The lock screen (A43): the login page's layout, the state phrase instead of the expansion. */
.sova-phrase { font-family: var(--brand-font); font-weight: 600; font-size: 1.1rem; color: var(--expansion); margin: .4rem 0 0; }
.lock-who { margin: .8rem 0 0; }
.lock-other { margin: .9rem 0 0; }
.lock-other button.linklike { font-size: 1rem; }

/* The connection overlay (panel.js): shown when a request cannot reach the panel. */
.sova-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: Canvas; color: CanvasText; }
.sova-overlay[hidden] { display: none; }
.sova-overlay .sova-mark { width: 9rem; height: 9rem; }
.sova-overlay-text { font-family: var(--brand-font); font-weight: 600; font-size: 1.2rem; margin: 0; text-align: center; }