/* CVCA Campus sign-in page (docs/FRONT-PAGE.md). It looks the way Attendance's own sign-in always looked: on the left the
   blue panel with the crest and name, "Campus Portal" and the time and date; on the right the sign-in card. Same navy,
   royal blue and gold tokens as every CVCA app, so dark mode is the two token blocks below. The app tile colours (the demo
   box's tabs) live in /shell/shell.css. */
:root {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #edf1f6;
  --ink: #18283d;
  --slate: #596a7e;
  --muted: #5f6f84;
  --line: #e2e7ee;
  --line-strong: #cdd6e1;

  --accent: #285da1;
  --accent-ink: #214f89;
  --accent-soft: #edf3fb;
  --accent-rgb: 40, 93, 161;
  --signin: #0966bd;
  --signin-hover: #00549e;

  --gold: #c6a45c;
  --gold-bright: #e8c77d;
  --gold-rgb: 232, 199, 125;
  --gold-ink: #86661c;
  --gold-soft: #fbf4e5;
  --gold-line: #ecdcb4;

  --red: #b23a35;
  --red-soft: #fcebea;
  --red-line: #f1c4c1;

  /* The sign-in card and its fields */
  --login-bg: #ffffff;
  --login-edge: #e2e7ee;
  --field-bg: #f7f9fc;
  --field-edge: #cdd6e1;

  /* The blue panel on the left (and the band across the top on a phone) */
  --art-from: #0966bd;
  --art-mid: #00549e;
  --art-to: #003f7e;
  --art-glow: 74, 158, 240;
  --art-shade: 0, 30, 76;
  --art-meta: #bcdcff;
  --art: radial-gradient(ellipse 62% 52% at 10% 10%, rgba(var(--art-glow), .34), transparent 70%),
         radial-gradient(ellipse 65% 55% at 96% 104%, rgba(var(--art-shade), .55), transparent 70%),
         linear-gradient(155deg, var(--art-from) 0%, var(--art-mid) 48%, var(--art-to) 100%);
  /* The wash behind the card */
  --wash-1: #e3edf9;
  --wash-2: #f2f6fb;
  --foot-ink: #44556a;

  --ease: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --canvas: #0d1521;
  --surface: #152130;
  --surface-2: #1b2b3e;
  --surface-3: #22344a;
  --ink: #edf2fa;
  --slate: #b5c2d2;
  --muted: #8fa2ba;
  --line: #2a3a4d;
  --line-strong: #40536a;
  --accent: #4b9cff;
  --accent-ink: #91c2ff;
  --accent-soft: #102f57;
  --accent-rgb: 75, 156, 255;
  --signin: #1768c5;
  --signin-hover: #0f58ad;
  --gold-ink: #e8c77d;
  --gold-soft: #3b2e17;
  --gold-line: #5e4a22;
  --red: #ef817c;
  --red-soft: #3d2024;
  --red-line: #6b2f2b;
  --login-bg: #0b213a;
  --login-edge: #2c5278;
  --field-bg: #0b213a;
  --field-edge: #2c5278;
  --art-from: #075aa9;
  --art-mid: #004a8e;
  --art-to: #00346a;
  --art-glow: 64, 140, 220;
  --art-shade: 0, 16, 44;
  --wash-1: #14395d;
  --wash-2: #0a1f36;
  --foot-ink: #b5c2d2;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0d1521;
    --surface: #152130;
    --surface-2: #1b2b3e;
    --surface-3: #22344a;
    --ink: #edf2fa;
    --slate: #b5c2d2;
    --muted: #8fa2ba;
    --line: #2a3a4d;
    --line-strong: #40536a;
    --accent: #4b9cff;
    --accent-ink: #91c2ff;
    --accent-soft: #102f57;
    --accent-rgb: 75, 156, 255;
    --signin: #1768c5;
    --signin-hover: #0f58ad;
    --gold-ink: #e8c77d;
    --gold-soft: #3b2e17;
    --gold-line: #5e4a22;
    --red: #ef817c;
    --red-soft: #3d2024;
    --red-line: #6b2f2b;
    --login-bg: #0b213a;
    --login-edge: #2c5278;
    --field-bg: #0b213a;
    --field-edge: #2c5278;
    --art-from: #075aa9;
    --art-mid: #004a8e;
    --art-to: #00346a;
    --art-glow: 64, 140, 220;
    --art-shade: 0, 16, 44;
    --wash-1: #14395d;
    --wash-2: #0a1f36;
    --foot-ink: #b5c2d2;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--canvas); }
body { margin: 0; min-width: 320px; min-height: 100dvh; background: var(--canvas); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--font-display); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-art :focus-visible, .login-top :focus-visible { outline-color: var(--gold-bright); }
.ui-icon { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 10px 16px; border-radius: 10px; background: #fff; color: #10243a; font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* ---------- The page: the blue panel and the card, side by side ---------- */
.login-screen { position: relative; display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr); min-height: 100dvh; background: var(--surface); outline: none; }

/* The panel stays in view while a tall card scrolls beside it. */
.login-art { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; min-height: max(100dvh, 560px); padding: 40px 40px 26px clamp(40px, 5.4vw, 92px); overflow: hidden; color: #fff; background: var(--art); box-shadow: inset -1px 0 0 rgba(var(--gold-rgb), .3); }
.login-art::after, .login-top::after { content: ""; position: absolute; z-index: 0; right: 3%; bottom: 9%; width: min(72%, 76vh); aspect-ratio: 1173 / 1417; background: url("/assets/cvca-lion.png") center / contain no-repeat; opacity: .07; mask-image: linear-gradient(to right, transparent, #000 75%); -webkit-mask-image: linear-gradient(to right, transparent, #000 75%); pointer-events: none; }
.login-top::after { display: none; }
.login-top { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }

.login-school { display: flex; align-items: center; gap: 14px; width: fit-content; color: inherit; text-decoration: none; }
.login-school img { width: 48px; height: 57px; object-fit: contain; }
.login-school strong, .login-school span { display: block; }
.login-school strong { font-size: 21px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; }
.login-school span { margin-top: 3px; color: #f0f7ff; font-size: 11.5px; }

.art-content { margin-block: auto; padding-block: 28px; max-width: 660px; }
.art-eyebrow { margin-bottom: 16px; color: #fae3aa; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.art-content h1 { color: #fff; font-size: clamp(40px, 4vw, 76px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; white-space: nowrap; text-shadow: 0 2px 30px rgba(0, 24, 64, .25); }
.art-rule { display: block; width: 72px; height: 3px; margin: 28px 0 36px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-bright), rgba(var(--gold-rgb), .12)); }

.art-today { display: inline-flex; align-items: center; gap: 20px; max-width: 100%; padding: 16px 26px 16px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: 0 24px 50px -32px rgba(0, 16, 48, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.art-today-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--gold-rgb), .14); color: var(--gold-bright); }
.art-time { color: #fff; font-size: clamp(28px, 2.3vw, 42px); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.art-today-divider { align-self: stretch; width: 1px; background: rgba(255, 255, 255, .18); }
.art-date { min-width: 0; }
.art-date strong, .art-date span { display: block; white-space: nowrap; }
.art-date strong { color: #fff; font-size: 15px; font-weight: 650; }
.art-date span { margin-top: 5px; color: #d6eaff; font-size: 11.5px; letter-spacing: .04em; }
.art-stat { display: flex; align-items: center; gap: 9px; width: fit-content; margin-top: 22px; padding: 7px 14px 7px 11px; border: 1px solid rgba(var(--gold-rgb), .45); border-radius: 999px; background: rgba(0, 22, 60, .34); color: #f6dc9f; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.live-pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); flex: none; }

.login-art-footer { position: relative; z-index: 1; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); color: var(--art-meta); font-size: 10px; }
.login-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.login-foot-row > span:first-child { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cw-badge { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: none; }
.cw-badge img { width: 20px; height: auto; opacity: .95; }
.login-fine { width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 4px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; background: rgba(255, 255, 255, .08); color: #eaf3ff; font-size: 11px; line-height: 1.45; text-align: center; }

/* The right side: the wash, the theme button and the card */
.login-main { display: grid; place-items: center; padding: 24px 48px; background: radial-gradient(ellipse 80% 60% at 78% 8%, var(--wash-1), transparent 70%), var(--wash-2); }
.login-view { width: min(100%, 468px); }
.login-theme-toggle { position: absolute; z-index: 5; top: 30px; right: 32px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 36, 58, .06); transition: background .15s, border-color .15s; }
.login-theme-toggle:hover { border-color: var(--accent); }

/* ---------- The card (sign-in, a new password, no answer) ---------- */
.login-card { container: card / inline-size; width: 100%; padding: 32px 32px 24px; border: 1px solid var(--login-edge); border-radius: 22px; background: var(--login-bg); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 36, 58, .05), 0 30px 70px -34px rgba(16, 36, 58, .35); }
:root[data-theme="dark"] .login-card { box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login-card { box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .75); } }
.login-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.login-card-head img { flex: none; width: 50px; height: auto; }
.login-card-head h2 { font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1.12; }
.login-card-head p { margin-top: 4px; color: var(--slate); font-size: 13.5px; }
.login-card-head.long h2 { font-size: 23px; letter-spacing: -.03em; }

.field { display: grid; gap: 7px; margin-bottom: 15px; color: var(--slate); font-size: 12.5px; font-weight: 650; }
.input-icon { position: relative; display: block; }
.input-icon > .ui-icon { position: absolute; top: 50%; left: 15px; width: 18px; height: 18px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.field input { width: 100%; min-height: 46px; padding: 10px 12px 10px 44px; border: 1px solid var(--field-edge); border-radius: 11px; background: var(--field-bg); color: var(--ink); font-size: 15px; font-weight: 500; outline: 0; transition: border-color .15s, box-shadow .15s; }
.field input.has-action { padding-right: 72px; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.field input::placeholder { color: var(--muted); font-weight: 400; }
.input-action { position: absolute; top: 50%; right: 7px; padding: 7px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--accent-ink); font-size: 12px; font-weight: 700; transform: translateY(-50%); }
.input-action:hover { background: var(--accent-soft); }
.form-error { min-height: 20px; margin: -4px 0 8px; color: var(--red); font-size: 13px; font-weight: 600; }
.signin-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 18px 0 20px; border: 1px solid transparent; border-radius: 12px; background: var(--signin); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 10px 22px -12px rgba(9, 102, 189, .9); transition: background .15s, transform .15s; }
.signin-btn:hover { background: var(--signin-hover); }
.signin-btn:active { transform: translateY(1px); }
.signin-btn:disabled { opacity: .7; cursor: default; }
.signin-btn .ui-icon { width: 19px; height: 19px; }
.ghost-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--slate); font-size: 14px; font-weight: 650; }
.ghost-btn:hover { background: var(--surface-3); color: var(--ink); }
.card-lede { margin: -10px 0 20px; color: var(--slate); font-size: 13.5px; line-height: 1.55; }

.notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 11px 14px; border: 1px solid var(--gold-line); border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.notice .ui-icon { width: 17px; height: 17px; margin-top: 2px; }
.notice.bad { border-color: var(--red-line); background: var(--red-soft); color: var(--red); }

.sso-buttons { display: grid; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sso-buttons::before { content: "or continue with"; display: block; width: fit-content; margin: -26px auto 4px; padding: 0 10px; background: var(--login-bg); color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.sso-button { display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 650; text-decoration: none; }
.sso-button:hover { border-color: var(--accent); }

/* The demo's one-click accounts: one tab per app, so the box stays short however many apps add accounts. The panels sit on
   top of each other in one grid cell (only the open one shows), so the box keeps the height of the tallest panel and the card
   doesn't jump when you switch tabs. */
.demo-credentials { display: grid; gap: 11px; margin-top: 20px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--surface-2); }
.demo-head { display: flex; align-items: center; gap: 12px; }
/* Only the text's own spans: the key's chip is a span too, and ".demo-head span" made it a block (the key sat in its corner). */
.demo-head > div > strong, .demo-head > div > span { display: block; }
.demo-head > div > strong { font-size: 13px; }
.demo-head > div > span { margin-top: 1px; color: var(--muted); font-size: 12px; }
.icon-chip { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-ink); }
.icon-chip .ui-icon { width: 17px; height: 17px; }
.demo-group-title { display: flex; align-items: center; gap: 8px; margin: 2px 0 -2px; color: var(--slate); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.demo-group-title .cw-tile { --cw-tile: 20px; border-radius: 6px; box-shadow: none; }
.demo-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-3); overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 7px; border: 0; border-radius: 9px; background: transparent; color: var(--slate); font-size: 12.5px; font-weight: 650; line-height: 1.2; text-align: center; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.demo-tab:hover { color: var(--ink); }
.demo-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 36, 58, .12), 0 0 0 1px var(--line); }
.demo-tab .cw-tile { --cw-tile: 18px; border-radius: 5px; box-shadow: none; }
.demo-tab .cw-tile svg { stroke-width: 2.4; }
.demo-panels { display: grid; }
.demo-panel { grid-area: 1 / 1; }
.demo-panel[data-off] { visibility: hidden; pointer-events: none; }
.demo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.demo-account { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 8px 10px 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.demo-account strong { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 700; }
.demo-account strong .ui-icon { width: 13px; height: 13px; color: var(--muted); }
.demo-account span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; }
.demo-account:hover { border-color: var(--accent); box-shadow: 0 6px 18px -10px rgba(var(--accent-rgb), .6); transform: translateY(-1px); }
.demo-account:disabled { opacity: .6; transform: none; cursor: default; }
.login-help { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.login-help .ui-icon { width: 14px; height: 14px; margin-top: 2px; }
.login-help a { color: var(--accent-ink); font-weight: 650; }
.login-help + .login-help { margin-top: 8px; }

/* While the page asks who is signed in */
.boot-note { display: flex; align-items: center; gap: 12px; padding: 22px 26px; border: 1px solid var(--login-edge); border-radius: 18px; background: var(--login-bg); color: var(--slate); font-size: 14px; font-weight: 600; }
.boot-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signin); animation: bootPulse 1.2s ease-in-out infinite; }
@keyframes bootPulse { 50% { opacity: .25; transform: scale(.7); } }
.page-in { animation: pageIn .4s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }

.login-card > h2 + p { margin-top: 10px; }
.login-card > p + p { margin-top: 10px; }
.login-card > p a { color: var(--accent-ink); font-weight: 650; }

/* A narrow card (a window that is not wide, a phone) stacks each tab's icon over its name, so the three tabs always fit. */
@container card (max-width: 400px) {
  .demo-tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 4px; padding: 7px 3px; font-size: 12px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
}
@container card (max-width: 270px) {
  .demo-tab { padding-inline: 1px; font-size: 11px; overflow-wrap: normal; }
}

/* ---------- Smaller screens: one column, a compact blue top with the crest, the name and the time ---------- */
@media (max-width: 920px) {
  .login-screen { display: flex; flex-direction: column; background: var(--wash-2); }
  .login-art { display: contents; }
  .login-art::after { display: none; }
  .login-top { order: 1; flex: none; padding: 22px 20px 58px; overflow: hidden; background: var(--art); color: #fff; gap: 14px; }
  .login-top::after { display: block; right: -4%; top: 8px; bottom: auto; width: min(52%, 260px); }
  .login-school img { width: 38px; height: 45px; }
  .login-school strong { font-size: 18px; }
  .login-school span { font-size: 10.5px; }
  .art-content { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-block: 0; padding-block: 0; max-width: none; }
  .art-content h1 { flex: 1 0 100%; }
  .art-eyebrow, .art-rule { display: none; }
  .art-content h1 { font-size: 30px; white-space: normal; }
  .art-today { display: flex; gap: 12px; width: fit-content; margin-top: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .art-today-icon { width: 34px; height: 34px; border-radius: 10px; }
  .art-today-icon .ui-icon { width: 17px; height: 17px; }
  .art-time { font-size: 24px; }
  .art-today-divider { display: none; }
  .art-date strong { font-size: 13px; }
  .art-date span { margin-top: 1px; font-size: 11px; }
  .art-stat { margin: 0; padding: 4px 11px 4px 9px; font-size: 11px; }
  .login-main { order: 2; position: relative; z-index: 1; margin-top: -34px; padding: 0 16px 8px; place-items: start center; background: none; }
  .login-view { width: min(100%, 520px); }
  .login-art-footer { order: 3; padding: 18px 16px 30px; border-top: 0; color: var(--foot-ink); text-align: center; }
  .login-foot-row { flex-direction: column; gap: 8px; }
  .login-foot-row > span:first-child { display: none; }
  .cw-badge { color: var(--foot-ink); }
  .login-fine { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--foot-ink); }
  .login-theme-toggle { top: 20px; right: 16px; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .login-theme-toggle:hover { border-color: var(--gold-bright); }
}

@media (max-width: 520px) {
  .login-card { padding: 28px 20px 22px; border-radius: 20px; }
  .login-card-head h2 { font-size: 26px; }
  /* 16px keeps iPhones from zooming the page when a field is tapped */
  .field input { font-size: 16px; }
  .demo-credentials { padding: 14px 12px; }
}

@media (max-width: 1180px) and (min-width: 921px) {
  .login-main { padding: 80px 28px 32px; }
}

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

@media print {
  .login-theme-toggle, .skip-link { display: none !important; }
}