/* The cabinet in the look of the main page: the same pale blue gradient with fine grain and white
   glass. Layout stays in cabinet.css; only colours change here. The admin keeps its dark glass. */
html:has(.cab-dk) { background: #e8f2fb; }
.cab-dk {
  --ink: #101418; --muted: #4d5b6b; --on: #101418; --line: rgba(20,60,110,.14); --soft: rgba(20,60,110,.05); --surface: rgba(255,255,255,.72); --bg: #e8f2fb;
  --glass: linear-gradient(155deg, rgba(255,255,255,.8), rgba(233,245,254,.56) 55%, rgba(255,255,255,.72)); --glass-pop: rgba(255,255,255,.9);
  --tile: rgba(255,255,255,.66); --tile-2: rgba(255,255,255,.5); --rim: rgba(20,60,110,.12);
  --glass-blur: blur(22px) saturate(170%); --tile-light: inset 0 1px 0 #fff; --sky: #0b67b0;
  --grad: linear-gradient(180deg, #1577c9, #0f6ab8); --bad: #c8321f; --good: #12804a; --ph: #6b7a8a; --well: rgba(255,255,255,.62);
  color-scheme: light; background: transparent; } /* html holds the colour: a painted body would cover the gradient */
.cab-dk .cab-bg {
  transform: translateZ(0);
  background:
    url(/web/img/grain.png) 0 0 / 160px 160px,
    linear-gradient(112deg, rgba(255,255,255,0) 24%, rgba(255,255,255,.6) 38%, rgba(255,255,255,0) 52%),
    linear-gradient(112deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.42) 68%, rgba(255,255,255,0) 78%),
    radial-gradient(60% 52% at 92% 4%, #c4e2fd 0, rgba(196,226,253,0) 72%),
    radial-gradient(54% 48% at 4% 34%, #ffffff 0, rgba(255,255,255,0) 72%),
    radial-gradient(66% 54% at 96% 96%, #b4d9fb 0, rgba(180,217,251,0) 72%),
    radial-gradient(52% 46% at 6% 98%, #d6e9fc 0, rgba(214,233,252,0) 72%),
    #e8f2fb;
}
.cab-dk .cab-bg::before, .cab-dk .cab-bg::after { display: none; }

/* the panel floats on light: a soft blue shadow instead of the dark one */
.cab-dk .cab-shell, .cab-dk .cab-auth, .cab-dk .cab-tabs { box-shadow: inset 0 2px 1px #fff, inset 0 -6px 14px rgba(255,255,255,.6), 0 18px 40px rgba(20,60,110,.12); border-color: rgba(255,255,255,.9); }

/* header */
.cab-dk .top .logo { color: var(--ink); }
.cab-dk .lang { color: var(--ink); border-color: rgba(20,60,110,.18); }
.cab-dk .lang:hover { background: rgba(20,60,110,.06); }

/* on blue, on photos and on filled buttons the text stays white */
.cab-dk .btn.primary, .cab-dk .ov-card, .cab-dk .acct-ava, .cab-dk .cab-tabs a.on, .cab-dk .look-bar, .cab-dk .ov-look { --on: #fff; }
.cab-dk .ov-card { --ink: #fff; --muted: rgba(255,255,255,.88); --tile: rgba(255,255,255,.16); --rim: rgba(255,255,255,.3); }
.cab-dk .ov-card { background: linear-gradient(135deg, #1e9cf0, #0f6fc0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 34px rgba(30,156,240,.26); }

/* controls on white glass */
.cab-dk .btn:not(.primary):not(.danger) { color: var(--ink); background: rgba(255,255,255,.72); border-color: rgba(20,60,110,.14); box-shadow: inset 0 1px 0 #fff; }
.cab-dk .btn:not(.primary):not(.danger):hover { background: #fff; border-color: rgba(30,156,240,.45); }
.cab-dk .btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px rgba(30,156,240,.26); }
.cab-dk .ov-card .btn:not(.primary) { color: #0a5aa6; background: #fff; border-color: #fff; }
.cab-dk .btn.danger { background: rgba(200,50,31,.08) !important; border-color: rgba(200,50,31,.3) !important; }
.cab-dk .field input, .cab-dk .add-site input, .cab-dk .dress-new input, .cab-dk .pw-site, .cab-dk .fr-link input {
  color: var(--ink); border-color: rgba(20,60,110,.16); box-shadow: inset 0 1px 2px rgba(20,60,110,.08); }
.cab-dk .fr-link { border-color: rgba(20,60,110,.14); }
.cab-dk .auth-tabs { background: rgba(20,60,110,.07); }
.cab-dk .auth-tabs button { color: var(--muted); }
.cab-dk .auth-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(20,60,110,.14); }
.cab-dk .cab-tabs a { color: var(--muted); }
.cab-dk .cab-tabs a:hover { color: var(--ink); }
.cab-dk .cab-tabs a.on { color: #fff; }
.cab-dk .pw-layer { background: rgba(20,50,90,.34); }
.cab-dk .pc-status { color: var(--ink); background: rgba(20,60,110,.08); }
.cab-dk .pc-status.on { color: var(--good); background: rgba(18,128,74,.12); }

/* Back to the previous page */
.cab-left { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.cab-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 14px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 6px 18px rgba(16,50,90,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .18s ease; }
.cab-back:hover { background: rgba(255,255,255,.9); }
.cab-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cab-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 420px) { .cab-left { gap: 8px; } .cab-back { padding-right: 12px; font-size: 14px; } }

/* Try-on from the cabinet, the guides, and a readable widget code */
.cab-try { min-height: 44px; padding: 0 16px; font-size: 14.5px; white-space: nowrap; }
.cab-dk:has(#auth:not([hidden])) .cab-try { display: none; }
.guide { margin: 16px 0; padding: 20px 20px; border-radius: 18px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); }
.guide h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.guide ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.guide a { color: var(--blue); font-weight: 600; }
.cab pre.code, .cab pre.code code { background: #10243a; color: #e8f2fb; }
@media (max-width: 520px) { .cab-try { padding: 0 12px; font-size: 13.5px; } }
.new-votes { display: block; margin: 12px 0; padding: 12px 16px; border-radius: 14px; background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; }
.cab-left-count { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 520px) { .cab-left-count { display: none; } }

/* Layout by the UI rules: labelled navigation, one primary action per screen, stable numbers */
.hero-sum b, .num b { font-variant-numeric: tabular-nums; }
.hero-sum b { font-size: clamp(32px, 4.4vw, 44px); }
.hero-act { gap: 12px; }
.cab-dk .ov-card .hero-try { min-height: 48px; padding: 0 24px; }
.hero-link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 14.5px; font-weight: 600; text-underline-offset: 3px; }
.hero-link:focus-visible, .hero-try:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.on-overview .cab-try, .on-overview .cab-left-count, .cab-try[hidden] { display: none; }
@media (min-width: 761px) {
  .cab-dk .cab-main { max-width: 1080px; }
  .dash { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; padding-left: 0; }
  .cab-tabs { position: sticky; top: 24px; left: auto; translate: none; }
  .cab-tabs a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: auto; min-height: 48px; padding: 0 12px; }
  .cab-tabs span { position: static; translate: none; visibility: visible; padding: 0; background: none; box-shadow: none; border: 0; color: inherit; font-size: 14.5px; font-weight: 600; }
}
.cab-tabs a.on { color: #fff; }
@media (max-width: 760px) {
  .hero-act { justify-items: stretch; width: 100%; }
  .cab-dk .ov-card .hero-try { width: 100%; }
  .hero-link { justify-content: center; }
  .cab-dk .cab-main { padding-bottom: 96px; }
  .cab-tabs span { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  .cab-tabs a { min-width: 0; padding-inline: 2px; }
}
@media (max-width: 560px) { .cab-try { display: none; } }
.hero-link[hidden] { display: none; }
@media (min-width: 761px) and (max-width: 1100px) { .hero-act { justify-items: start; width: 100%; } }

/* Text on blue passes 4.5:1 */
.cab-dk .ov-card { background: linear-gradient(135deg, #1577c9, #0f5fa8); }
.cab-dk .pw-x:hover { background: rgba(20,60,110,.08); }
.cab-dk .pw-radio { border-color: #7f93a8; }
.cab-dk .pw-opt.on .pw-radio { border-color: var(--sky); }

/* sign-up consents: one card, required marks, links to the documents */
.consents { margin: 4px 0 0; padding: 8px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--well); min-width: 0; }
.consents legend { padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.consents .check { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 14px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.consents .check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sky); cursor: pointer; }
.consents .check input[aria-invalid] { outline: 2px solid var(--bad); outline-offset: 2px; }
.consents a, .consent-note a { color: var(--sky); text-underline-offset: 2px; }
.consents .req { color: var(--bad); font-weight: 700; }
.consent-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.auth-docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin-top: 12px; }
.auth-docs a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--muted); text-decoration: none; }
.auth-docs a:hover { color: var(--ink); text-decoration: underline; }
@media (pointer: coarse) { .auth-docs a { min-height: 44px; } }
#camConsentBtn { white-space: nowrap; }