/* Shared dashboard and public-site surfaces. Page layouts own spacing. */
:root {
  --sb-tile-bg: rgba(220, 220, 255, .10);
  --sb-tile-border: rgba(200, 220, 255, .18);
  --sb-field-bg: rgba(5, 8, 16, .65);
}
  /* Cards and compact stat tiles share square corners, including their rims. */
  .card, .rule-card, .tl-card, .dev-tile, .stat, .profile-stat, .task-card,
  .settings-group, .ms-compose {
    border-radius: 0;
    background: var(--card);
    backdrop-filter: blur(3px) saturate(1);
    -webkit-backdrop-filter: blur(6px) saturate(1);
  }
  .card::before, .rule-card::before, .tl-card::before, .dev-tile::before,
  .settings-group::before, .ms-compose::before { border-radius: 0; }
  /* One field treatment across the dashboard; retain a visible keyboard focus. */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="color"]),
  body textarea, body select {
    border: 0 !important; border-radius: 0 !important;
    background: var(--sb-field-bg) !important; box-shadow: none !important;
    color: var(--ink, #f2f2f2); font-size: 14px; line-height: 1.5;
  }
  body input:focus-visible, body textarea:focus-visible, body select:focus-visible {
    outline: 2px solid var(--blue-bright, #9db8ff) !important; outline-offset: 2px;
  }

@media (max-width: 700px) {
    body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body textarea, body select { font-size: 16px; }
}

/* Public pages use the dashboard tile treatment without altering their grids. */
.sb-public :is(.card, .perk, .counter-tile, .b-cta, .b-byline, .callout),
#l11 :is(.l11-tile, .l11-panel, .l11-plan, .l11-mail) {
  background: var(--sb-tile-bg);
  border-color: var(--sb-tile-border);
  border-radius: 0;
  backdrop-filter: blur(3px) saturate(1);
  -webkit-backdrop-filter: blur(6px) saturate(1);
}
.sb-public :is(.card, .perk, .counter-tile, .b-cta, .b-byline, .callout)::before,
#l11 :is(.l11-tile, .l11-panel, .l11-plan, .l11-mail)::before,
#l11 .l11-panel::after { border-radius: 0; }
/* Media frames and small panels are square too; device silhouettes stay intact. */
.sb-public :is(.b-row-cover, .b-cover, .draft, .msg),
.sb-public .article-body :is(img, pre),
#l11 :is(.l11-shot, .l11-crop, .l11-steps, .l11-chip, .l11-budget-seg, .l11-ask-box, .l11-rung) {
  border-radius: 0;
}
#l11 .l11-demo:not(.l11-demo--phone) { border-radius: 0; }
#l11 .l11-ask-box {
  background: var(--sb-field-bg); border: 0;
}

/* Panel geometry is invariant, including more-specific page rules and rims. */
:is(.auth-card, .card, .ir-panel, .rule-card, .rule-head, .rule-body, .rule-actions,
    .tl-card, .dev-tile, .stat, .profile-stat, .task-card, .settings-group,
    .ms-compose, .ms-brief, .modal, .modal-card, .bell-panel, .help-panel,
    .nav-menu, .addr-sugg, .banner, .rule-item, .dlx-aside, .improve-box,
    .qf-row, .place-chosen, .hb-confirm, .wz-demo, .gp-head, .ap-pv-none,
    .ap-mail, .act-fault, .unlock-quote, .lock-state, .lock-warn,
    .thread-row, .chat-reject, .chat-support, .log-dates, .ban-reason,
    .mod-item, .req-contact, .cm-rules, .hck-row, .ck-row) {
  border-radius: 0 !important;
}
:is(.auth-card, .card, .ir-panel, .rule-card, .tl-card, .dev-tile,
    .settings-group, .ms-compose, .nav-menu)::before,
:is(.auth-card, .card, .ir-panel, .rule-card, .tl-card, .dev-tile,
    .settings-group, .ms-compose, .nav-menu)::after {
  border-radius: 0 !important;
}
#siteNav .sn-menu, #siteNav .sn-menu::after, #siteNav .sn-sheet,
#siteNav .sn-items a, #siteNav .sn-sheet a, .nm-items a {
  border-radius: 0 !important;
}

/* Shared switch geometry: the track and thumb use the same small corner. */
.toggle, .toggle .slider, .toggle .slider::before,
.wl-toggle, .wl-toggle .s, .wl-toggle .s::before { border-radius: 3px !important; }
.toggle input:focus-visible + .slider, .wl-toggle input:focus-visible + .s {
  outline: 2px solid var(--blue); outline-offset: 3px;
}
.hamburger { border: 0; background: none; width: 44px; height: 44px; }
.hamburger svg path { transform-origin: 14px 14px; transition: transform .22s ease, opacity .16s ease; }
.hamburger:hover:not([aria-expanded="true"]) .hamburger-bottom { transform: translateX(-5px); }
.hamburger[aria-expanded="true"] .hamburger-top { transform: translateY(7px) rotate(45deg); transform-origin: 14px 7px; }
.hamburger[aria-expanded="true"] .hamburger-middle { transform: rotate(-45deg); }
.hamburger[aria-expanded="true"] .hamburger-bottom { opacity: 0; transform: translateY(-7px); }
#gearPanel { background: #0c0c10; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 100px); overflow-y: auto; }
#gpNavigation { border-block: 1px solid var(--card-border); margin: 8px 0; padding: 8px 0; }
/* The menu repeats the top nav only where the top nav is hidden (720px and
   below, see the media block further down). */
@media (min-width: 721px) { #gpNavigation { display: none; } }
.gp-nav-group summary { cursor: pointer; padding: 11px 12px; font-size: 14px; }
.gp-nav-sub { padding-left: 26px; }
.gp-item[aria-current="page"] { color: var(--blue); }
.gp-notifications { display: none; }
.rule-preset { background: rgba(157,184,255,.08); padding: 16px; margin-bottom: 20px; }
.rule-preset p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
@media (max-width: 720px) {
  #app .topbar { padding-left: 0; display: flex; align-items: center; justify-content: space-between; }
  #app .topnav { position: static; width: auto; height: auto; padding: 0; background: none; border: 0; backdrop-filter: none; }
  #app .topnav-brand { display: flex !important; font-size: 20px; }
  #app .topnav .tabs, #app .nav-menu, #bellBtn { display: none !important; }
  #app.wrap { padding-bottom: 32px; }
  #helpWidget { bottom: 24px; }
  #mascotPeek { bottom: 20px; }
  .gp-notifications { display: flex; }
  #gearPanel, #bellPanel { width: calc(100% - 32px); position: fixed; top: 76px; right: 16px; max-height: calc(100dvh - 92px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hamburger svg path { transition: none; }
}