/* ============================================================
   Sign-in pages on Liquid Glass: allauth's other account pages
   (templates/account/_av_base.html and the pages that extend it).

   The same look as the sign-in and sign-up pages
   (account/_site_auth_base.html, static/site/pages/auth.css):
   a rounded dark brand panel beside a centred glass sheet on the
   page colour, the platform's fields and pill buttons, the system
   font and Phosphor icons. css/lg-core.css loads first; every
   value below is a --lg-* token, so the four Directions and the
   white-label accent (js/ui/lg-brand.js) apply with no dark block.
   Every class starts with "av-".
   ============================================================ */

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--lg-font);
  font-size: var(--lg-t-body);
  line-height: var(--lg-leading);
  color: var(--lg-text);
  background: var(--lg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; transition: color var(--lg-dur) var(--lg-ease); }
a:hover { color: var(--lg-accent-text); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--lg-accent) 24%, transparent); }

/* Legacy font icons (<i class="uil">, still printed by the landlord invitation pages) take the size the
   Phosphor icons get from --lg-icon-size, through font-size. */

/* ---------- Shell ------------------------------------------- */
.av-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(400px, 0.92fr) minmax(0, 1fr);
}

/* ---------- Brand panel (a rounded dark tile, always dark) -- */
.av-brand {
  position: sticky; top: var(--lg-s-4);
  height: calc(100vh - 2 * var(--lg-s-4)); height: calc(100dvh - 2 * var(--lg-s-4));
  margin: var(--lg-s-4) 0 var(--lg-s-4) var(--lg-s-4);
  overflow: hidden; isolation: isolate; border-radius: var(--lg-r-2xl);
  padding: var(--lg-s-7) clamp(28px, 3.2vw, 48px);
  display: flex;
  color: var(--lg-white);
  background: var(--hlm-panel);
  box-shadow: var(--lg-elev-2);
}
/* A brand moment (as the sign-in photo panel before its photo loads, site/pages/auth.css): the hero-lm ink with
   the active accent and the signature gradient's magenta and orange glowing in it. */
.av-brand::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 100% 0%, var(--hlm-glow-accent), transparent 70%),
    radial-gradient(80% 60% at 0% 100%, var(--hlm-glow-magenta), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, var(--hlm-glow-orange), transparent 70%),
    var(--hlm-panel);
}
.av-brand-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 34rem;
}

.av-logo-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lg-s-2); align-self: flex-start; max-width: 100%; color: var(--lg-white); }
.av-logo-row:hover { color: var(--lg-white); }
.av-logo-row:focus-visible { outline-color: var(--lg-white); }
/* The reversed horizontal logo: height only, the width follows (brand kit). */
.av-logo-row img { display: block; width: auto; max-width: 100%; height: var(--lg-logo-h-signin); object-fit: contain; object-position: left center; }
.av-logo-label {
  display: block; max-width: 100%;
  font-family: var(--lg-font-display); font-size: var(--lg-t-caption); font-weight: var(--lg-weight-label); letter-spacing: var(--lg-tracking-label);
  text-transform: uppercase; line-height: var(--lg-leading-tight); color: color-mix(in srgb, var(--lg-white) 72%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.av-brand-body { margin-top: auto; padding-top: var(--lg-s-8); }
.av-hero {
  font-family: var(--lg-font-display);
  font-size: var(--lg-t-display); line-height: var(--lg-leading-tight); font-weight: var(--lg-weight-display); letter-spacing: var(--lg-tracking-display);
  max-width: 22ch; text-wrap: balance; color: var(--lg-white);
}
.av-hero em { font-style: normal; color: color-mix(in srgb, var(--lg-accent) 40%, var(--lg-white)); }
/* The brand moment in the words (as on the sign-in panel, site/pages/auth.css): the marked word in the signature
   gradient, large text on the ink panel. Browsers without text clipping keep the tint above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .av-hero em { background: var(--hlm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.av-lede {
  margin-top: var(--lg-s-3); font-size: var(--lg-t-body); line-height: 1.5;
  color: color-mix(in srgb, var(--lg-white) 84%, transparent); max-width: 46ch; text-wrap: pretty;
}

/* Glass on the dark panel: dark tint, blur, a white top highlight and hairline. */
.av-features { margin-top: var(--lg-s-6); display: grid; gap: var(--lg-s-2); }
.av-feature {
  display: flex; align-items: center; gap: var(--lg-s-3);
  padding: var(--lg-s-3) 14px; border-radius: var(--lg-r-lg);
  background: color-mix(in srgb, var(--lg-black) 36%, transparent);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lg-white) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lg-white) 12%, transparent);
}
.av-feature-ic {
  --lg-icon-size: 20px;
  width: 38px; height: 38px; border-radius: var(--lg-r-tile); flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--lg-t-title); color: var(--lg-white);
  background: color-mix(in srgb, var(--lg-white) 14%, transparent);
}
.av-feature-t { font-size: var(--lg-t-control); font-weight: 600; line-height: 1.3; color: var(--lg-white); }
.av-feature-d { margin-top: 2px; font-size: var(--lg-t-secondary); line-height: 1.4; color: color-mix(in srgb, var(--lg-white) 76%, transparent); }

.av-brand-foot {
  --lg-icon-size: 14px;
  margin-top: var(--lg-s-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  font-size: var(--lg-t-caption); color: color-mix(in srgb, var(--lg-white) 70%, transparent);
}
.av-brand-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Content side: a centred glass sheet --------------- */
.av-main {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 72px clamp(24px, 4vw, 64px) var(--lg-s-8);
}
.av-content {
  width: 100%; max-width: 512px;
  padding: var(--lg-s-8);
  border-radius: var(--lg-r-2xl);
  background: var(--lg-glass-3);
  -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
  box-shadow: var(--lg-elev-3);
}
.av-content.wide { max-width: 604px; }
.av-content.center { text-align: center; }

/* The panel's slim bar carries the brand on phones; this copy stays for pages without the panel. */
.av-mini-brand { display: none; align-items: center; margin-bottom: var(--lg-s-6); }
.av-mini-brand img { width: auto; height: var(--lg-logo-h-nav); }
.av-mini-brand .av-logo-on-dark { display: none; }
:root[data-theme="dark"] .av-mini-brand .av-logo-on-light { display: none; }
:root[data-theme="dark"] .av-mini-brand .av-logo-on-dark { display: block; }

.av-eyebrow {
  --lg-icon-size: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--lg-t-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lg-accent-text); margin-bottom: var(--lg-s-3);
}
.av-content.center .av-eyebrow { justify-content: center; }
.av-title { font-family: var(--lg-font-display); font-size: var(--lg-t-title); font-weight: 700; letter-spacing: var(--lg-tracking-title); line-height: 1.25; color: var(--lg-text); text-wrap: balance; }
.av-subtitle { margin-top: 6px; font-size: var(--lg-t-label); line-height: 1.5; color: var(--lg-text-secondary); text-wrap: pretty; }
.av-body { margin-top: var(--lg-s-6); }

/* ---------- Fields (the platform's field: a fill, solid on focus) */
.av-field { margin-bottom: var(--lg-s-4); }
.av-label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--lg-t-label); font-weight: 600; color: var(--lg-text); margin-bottom: 6px;
}
.av-input-wrap { position: relative; display: flex; align-items: center; }
.av-input-wrap > .av-ic {
  --lg-icon-size: 18px;
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: var(--lg-t-nav-title); line-height: 1;
  color: var(--lg-text-secondary); pointer-events: none;
}
.av-input {
  width: 100%; min-height: var(--lg-control-h); padding: 10px 14px 10px 42px;
  font-family: inherit; font-size: var(--lg-t-body); color: var(--lg-text);
  background: var(--lg-field-bg);
  border: 0;
  border-radius: var(--lg-r-sm);
  transition: background-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
.av-input.no-ic { padding-left: 14px; }
.av-input.has-reveal { padding-right: 48px; }
.av-input::-ms-reveal { display: none; }
.av-input::placeholder { color: var(--lg-text-tertiary); }
.av-input:hover { background-color: var(--lg-field-bg-hover); }
.av-input:focus {
  outline: 2px solid var(--lg-focus-ring); outline-offset: 3px;
  background-color: var(--lg-surface-solid);
  box-shadow: var(--lg-hairline);
}
.av-input[readonly] { color: var(--lg-text-secondary); }
.av-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--lg-danger-ink); }
.av-reveal {
  --lg-icon-size: 18px;
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
  color: var(--lg-text-secondary); border-radius: 50%;
  display: grid; place-items: center; font-size: var(--lg-t-nav-title);
  transition: background-color var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease);
}
.av-reveal:hover { color: var(--lg-text); background: var(--lg-icon-btn-hover); }
.av-reveal:focus-visible { outline-offset: 2px; }
.av-reveal .av-ic-hide { display: none; }
.av-reveal[aria-pressed="true"] .av-ic-show { display: none; }
.av-reveal[aria-pressed="true"] .av-ic-hide { display: block; }
@media (pointer: coarse) { .av-reveal { width: var(--lg-hit); height: var(--lg-hit); right: 0; } }
.av-hint { margin-top: 6px; font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); line-height: 1.5; }
.av-hint ul { list-style: none; }
.av-error { margin-top: 6px; font-size: var(--lg-t-secondary); font-weight: 600; color: var(--lg-danger-ink); }

.av-row { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s-3); margin: 6px 0 var(--lg-s-6); }
.av-actions { flex-wrap: wrap; gap: 10px; margin: 0 0 var(--lg-s-5); }
.av-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--lg-t-label); line-height: 1.45; color: var(--lg-text-secondary); cursor: pointer; user-select: none; }
.av-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--lg-accent); cursor: pointer; flex-shrink: 0; }
.av-link { font-size: var(--lg-t-label); font-weight: 600; color: var(--lg-accent-text); }
.av-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.av-links { margin-top: var(--lg-s-5); display: flex; flex-wrap: wrap; gap: var(--lg-s-2) 18px; justify-content: center; }

/* ---------- Buttons (pill; primary = accent fill) ---------- */
.av-btn {
  --lg-icon-size: 18px;
  width: 100%; min-height: var(--lg-control-h-lg); padding: 0 var(--lg-s-6);
  border: none; border-radius: var(--lg-r-pill); cursor: pointer;
  font-family: inherit; font-size: var(--lg-t-body); font-weight: 600; line-height: 1.2;
  background: var(--lg-accent-fill); color: var(--lg-on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lg-s-2);
  box-shadow: var(--lg-button-shadow);
  transition: background-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
  -webkit-tap-highlight-color: transparent;
}
a.av-btn:hover { color: var(--lg-on-accent); }
.av-btn:hover { background: var(--lg-accent-fill-pressed); }
.av-btn:active { transform: scale(.95); }
.av-btn:disabled, .av-btn[aria-busy="true"] { opacity: .45; pointer-events: none; }
.av-btn .av-btn-ic { font-size: var(--lg-t-nav-title); transition: transform var(--lg-dur) var(--lg-ease); }
.av-btn:hover .av-btn-ic.arrow { transform: translateX(3px); }
.av-btn-secondary {
  background: var(--lg-glass-solid); color: var(--lg-text);
  box-shadow: var(--lg-elev-1);
}
a.av-btn-secondary:hover, .av-btn-secondary:hover { background: var(--lg-surface-solid); color: var(--lg-text); }
.av-btn + .av-btn { margin-top: var(--lg-s-3); }
.av-btn-flex { width: auto; flex: 1 1 160px; min-height: var(--lg-control-h); font-size: var(--lg-t-control); }
.av-btn-flex.is-narrow { flex-basis: 120px; }
.av-actions .av-btn + .av-btn { margin-top: 0; }
.av-submit { margin-top: 6px; }

/* ---------- Divider ---------------------------------------- */
.av-divider { display: flex; align-items: center; gap: 14px; margin: var(--lg-s-6) 0; color: var(--lg-text-tertiary); font-size: var(--lg-t-caption); font-weight: 600; letter-spacing: .08em; }
.av-divider::before, .av-divider::after { content: ''; flex: 1; height: 1px; background: var(--lg-separator); }

/* ---------- Footers / legal -------------------------------- */
.av-foot { margin-top: var(--lg-s-6); text-align: center; font-size: var(--lg-t-label); color: var(--lg-text-secondary); }
.av-foot a { font-weight: 600; color: var(--lg-accent-text); }
.av-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.av-legal { margin-top: var(--lg-s-6); padding-top: var(--lg-s-4); border-top: 1px solid var(--lg-separator); text-align: center; font-size: var(--lg-t-caption); color: var(--lg-text-tertiary); line-height: 1.5; }
.av-legal a { font-weight: 600; color: var(--lg-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.av-legal a:hover { color: var(--lg-accent-text); }
.av-back { --lg-icon-size: 16px; display: inline-flex; align-items: center; gap: var(--lg-s-2); min-height: var(--lg-hit); margin-top: var(--lg-s-4); font-size: var(--lg-t-label); font-weight: 600; color: var(--lg-text-secondary); }
.av-back:hover { color: var(--lg-accent-text); }
.av-back .lg-icon, .av-back i { transition: transform var(--lg-dur) var(--lg-ease); }
.av-back:hover .lg-icon, .av-back:hover i { transform: translateX(-3px); }
.av-content.center .av-back { justify-content: center; }

/* ---------- Message pages (state tile) --------------------- */
.av-badge {
  --lg-icon-size: 28px;
  width: 58px; height: 58px; border-radius: var(--lg-r-md); margin: 0 auto var(--lg-s-5);
  display: grid; place-items: center; font-size: var(--lg-t-display);
  background: var(--lg-accent-soft); color: var(--lg-accent-text);
}
.av-badge.warn { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }
.av-badge.pulse { animation: av-pulse 2.2s var(--lg-ease) infinite; }
.av-badge.warn.pulse { animation-name: av-pulse-warn; }
@keyframes av-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lg-accent) 30%, transparent); }
  70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--lg-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lg-accent) 0%, transparent); }
}
@keyframes av-pulse-warn {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lg-red) 30%, transparent); }
  70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--lg-red) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lg-red) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .av-badge.pulse { animation: none; } }
.av-msg-title { font-family: var(--lg-font-display); font-size: var(--lg-t-title); font-weight: 700; letter-spacing: var(--lg-tracking-title); line-height: 1.25; color: var(--lg-text); margin-bottom: var(--lg-s-2); }
.av-msg-text { font-size: var(--lg-t-label); line-height: 1.5; color: var(--lg-text-secondary); text-wrap: pretty; }
.av-msg-text + .av-msg-text { margin-top: var(--lg-s-2); }
.av-msg-text b, .av-msg-text .hl { color: var(--lg-text); font-weight: 600; overflow-wrap: anywhere; }
.av-content.center .av-body > .av-btn:first-child { margin-top: var(--lg-s-1); }

/* ---------- Info box (a fill inside the sheet) ------------- */
.av-info { --lg-icon-size: 16px; margin-top: var(--lg-s-6); background: var(--lg-fill-ink); border-radius: var(--lg-r-lg); padding: var(--lg-s-4) 18px; text-align: left; }
.av-info h3 { font-size: var(--lg-t-label); font-weight: 600; color: var(--lg-text); margin-bottom: 10px; display: flex; align-items: center; gap: var(--lg-s-2); }
.av-info ul { list-style: none; display: flex; flex-direction: column; gap: var(--lg-s-2); }
.av-info li { position: relative; padding-left: 24px; font-size: var(--lg-t-secondary); color: var(--lg-text-secondary); line-height: 1.5; }
.av-info li .lg-icon, .av-info li i { position: absolute; left: 0; top: 2px; color: var(--lg-accent-text); font-size: var(--lg-t-control); }
.av-form-gap { margin-top: var(--lg-s-5); }

/* ---------- Option cards (signup / connections) ------------ */
.av-option { display: block; border-radius: var(--lg-r-lg); padding: var(--lg-s-5); background: var(--lg-surface-solid); box-shadow: var(--lg-elev-1); transition: box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease); }
.av-option + .av-option { margin-top: var(--lg-s-3); }
.av-option:hover { box-shadow: var(--lg-elev-2); color: inherit; }
.av-option:active { transform: scale(.96); }
.av-option-head { display: flex; align-items: center; gap: var(--lg-s-3); margin-bottom: var(--lg-s-2); }
.av-option-ic { --lg-icon-size: 22px; width: 40px; height: 40px; border-radius: var(--lg-r-tile); flex-shrink: 0; display: grid; place-items: center; font-size: var(--lg-t-title); background: var(--lg-accent-soft); color: var(--lg-accent-text); }
.av-option-t { font-size: var(--lg-t-body); font-weight: 600; color: var(--lg-text); }
.av-option-d { font-size: var(--lg-t-label); color: var(--lg-text-secondary); line-height: 1.5; margin-bottom: var(--lg-s-3); }
.av-option-cta { --lg-icon-size: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--lg-t-label); font-weight: 600; color: var(--lg-accent-text); transition: gap var(--lg-dur) var(--lg-ease); }
.av-option:hover .av-option-cta { gap: 10px; }

/* ---------- List items (emails / connections) -------------- */
.av-list { display: flex; flex-direction: column; gap: var(--lg-s-2); margin-bottom: var(--lg-s-5); }
.av-list-item { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-s-3); padding: var(--lg-s-3) 14px; border-radius: var(--lg-r-lg); background: var(--lg-surface-solid); box-shadow: var(--lg-elev-1); }
label.av-list-item { cursor: pointer; }
.av-list-main { display: flex; align-items: center; gap: var(--lg-s-3); min-width: 0; }
.av-list-text { min-width: 0; text-align: left; }
.av-list-ic { --lg-icon-size: 20px; width: 40px; height: 40px; border-radius: var(--lg-r-tile); flex-shrink: 0; display: grid; place-items: center; background: var(--lg-accent-soft); color: var(--lg-accent-text); font-size: var(--lg-t-title); }
.av-list-email { font-size: var(--lg-t-control); font-weight: 600; color: var(--lg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-list-pick { margin-top: 2px; display: flex; align-items: center; gap: 6px; font-size: var(--lg-t-caption); color: var(--lg-text-secondary); }
.av-list-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--lg-accent); }
.av-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.av-chip { font-size: var(--lg-t-caption); font-weight: 600; line-height: 1.3; padding: 3px 9px; border-radius: var(--lg-r-pill); white-space: nowrap; }
.av-chip-ok { background: var(--lg-success-soft); color: var(--lg-success-ink); }
.av-chip-primary { background: var(--lg-accent-fill); color: var(--lg-on-accent); }
.av-chip-warn { background: var(--lg-warning-soft); color: var(--lg-warning-ink); }
.av-empty-note { text-align: center; font-size: var(--lg-t-label); color: var(--lg-text-secondary); padding: var(--lg-s-2) 0 var(--lg-s-1); }

/* ---------- Alerts ----------------------------------------- */
.av-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px var(--lg-s-4); border-radius: var(--lg-r-lg); font-size: var(--lg-t-label); font-weight: 500; line-height: 1.5; margin-bottom: var(--lg-s-4); text-align: left; }
.av-alert .lg-icon, .av-alert i { --lg-icon-size: 18px; font-size: var(--lg-t-nav-title); margin-top: 1px; flex-shrink: 0; }
.av-alert-info { background: var(--lg-accent-soft); color: var(--lg-text); }
.av-alert-info .lg-icon, .av-alert-info i { color: var(--lg-accent-text); }
.av-alert-success { background: var(--lg-success-soft); color: var(--lg-success-ink); }
.av-alert-error { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }

/* ---------- Theme toggle (round icon button) --------------- */
.av-theme-tog {
  --lg-icon-size: 18px;
  position: absolute; top: var(--lg-s-5); right: clamp(24px, 4vw, 64px); z-index: 6;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--lg-icon-btn);
  color: var(--lg-text-secondary); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
  -webkit-tap-highlight-color: transparent;
}
.av-theme-tog:hover { color: var(--lg-text); background: var(--lg-icon-btn-hover); }
.av-theme-tog:active { transform: scale(.9); }
.av-theme-tog .av-ic-sun { display: none; }
.dark .av-theme-tog .av-ic-sun { display: block; }
.dark .av-theme-tog .av-ic-moon { display: none; }
@media (pointer: coarse) { .av-theme-tog { width: var(--lg-hit); height: var(--lg-hit); } }

/* ---------- Short laptop screens --------------------------- */
@media (min-width: 960px) and (max-height: 820px) { .av-lede { display: none; } .av-features { margin-top: var(--lg-s-5); } }
@media (min-width: 960px) and (max-height: 660px) { .av-features { display: none; } }

/* ---------- Tablet and phone: the panel becomes a slim brand bar */
@media (max-width: 959px) {
  .av-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .av-brand { position: relative; top: auto; height: auto; margin: var(--lg-s-3) var(--lg-s-3) 0; padding: 10px 64px 10px var(--lg-s-4); border-radius: var(--lg-r-lg); }
  .av-brand-body, .av-brand-foot { display: none; }
  .av-logo-row img { height: var(--lg-logo-h-nav); }
  .av-logo-label { display: none; }
  .av-main { position: static; display: block; padding: 0 var(--lg-s-3) var(--lg-s-8); }
  .av-content { margin: var(--lg-s-4) auto 0; padding: var(--lg-s-7) var(--lg-s-6); }
  /* The switch sits on the bar, right edge, centred on its 56px height. */
  .av-theme-tog { top: calc(var(--lg-s-3) + 8px); right: calc(var(--lg-s-3) + 10px); background: color-mix(in srgb, var(--lg-white) 14%, transparent); color: var(--lg-white); }
  .av-theme-tog:hover { background: color-mix(in srgb, var(--lg-white) 24%, transparent); color: var(--lg-white); }
}
@media (max-width: 959px) and (pointer: coarse) {
  .av-theme-tog { top: calc(var(--lg-s-3) + 6px); }
}
@media (max-width: 560px) {
  .av-content { padding: var(--lg-s-6) var(--lg-s-5); border-radius: var(--lg-r-xl); }
  .av-list-item { flex-wrap: wrap; }
  .av-chips { justify-content: flex-start; }
}