/* Keep the same safe frame in browsers and installed apps. Insets come from
   the device, including landscape cut-outs; never guess from a model name. */
@media screen {
  .site-shell::before,
  .admin-site-shell::before {
    content:"";
    position:fixed;
    z-index:1200;
    inset:0 0 auto;
    height:var(--safe-top);
    background:#030812;
    opacity:1;
    filter:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    pointer-events:none;
  }

  /* Modal blur also stops below the camera band. */
  dialog::backdrop { clip-path:inset(var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)); }

  dialog.hanenkam-guide {
    inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    width:min(1380px,calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
    height:min(930px,calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px));
  }
  .dialog-backdrop {
    padding:max(24px,calc(var(--safe-top) + 12px)) max(24px,calc(var(--safe-right) + 12px)) max(24px,calc(var(--safe-bottom) + 12px)) max(24px,calc(var(--safe-left) + 12px));
  }
  .info-dialog { max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 48px); }
  brickcore-drawing-view:fullscreen,
  brickcore-home-arch[data-expanded=true] {
    padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  }
}

@media screen and (max-width:1024px) {
  html { background:#030812; }
  :root {
    --mobile-dock-height:60px;
    --mobile-dock-bottom:max(10px,calc(var(--safe-bottom) + 8px));
    --mobile-dock-clearance:calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 16px);
  }

  .site-shell > main {
    padding-top:var(--safe-top);
    padding-right:var(--safe-right);
    padding-bottom:var(--mobile-dock-clearance);
    padding-left:var(--safe-left);
  }
  .admin-site-shell { padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
  .admin-site-header { top:calc(var(--safe-top) + 12px); }
  .admin-notice { top:calc(var(--safe-top) + 94px); }
  .admin-sidebar { top:calc(var(--safe-top) + 106px); }
  .site-shell > footer {
    padding-right:var(--safe-right);
    padding-bottom:var(--mobile-dock-clearance);
    padding-left:var(--safe-left);
  }
  /* The outer page now owns the device inset. Containers keep their gutter. */
  .site-shell > :is(main,footer) .container,
  .site-shell > :is(main,footer).container {
    padding-inline:var(--page-gutter);
  }
  body:has(.auth-studio) .site-shell > main {
    padding-top:var(--safe-top)!important;
    padding-bottom:var(--safe-bottom);
  }

  .mobile-site-dock {
    width:min(460px,calc(100vw - var(--safe-left) - var(--safe-right) - 20px));
    height:var(--mobile-dock-height);
    min-height:var(--mobile-dock-height);
    bottom:var(--mobile-dock-bottom);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    padding:5px;
    border-radius:22px;
  }
  .mobile-site-dock__item { min-height:48px; gap:1px; padding:3px 2px; border-radius:16px; }
  .mobile-site-dock__item .material-symbols-outlined { font-size:22px; }
  .mobile-site-dock__item strong { font-size:11px; line-height:1.25; }

  .mobile-workspace-sheet {
    bottom:calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 8px);
    max-height:min(570px,72dvh,calc(100dvh - var(--safe-top) - var(--mobile-dock-bottom) - 84px));
    gap:10px;
    padding:12px;
    border-radius:24px;
    grid-template-rows:auto minmax(0,1fr);
  }
  .mobile-workspace-sheet:has(> .mobile-language-select) { grid-template-rows:auto auto minmax(0,1fr); }
  .mobile-workspace-sheet__title > .material-symbols-outlined { width:38px; height:38px; flex-basis:38px; border-radius:12px; }
  .mobile-workspace-sheet__close { width:44px; height:44px; border-radius:12px; }
  .mobile-workspace-sheet__links { gap:6px; }
  .mobile-workspace-sheet__link { min-height:56px; grid-template-columns:36px minmax(0,1fr); gap:10px; padding:8px 10px; border-radius:16px; }
  .mobile-workspace-sheet__icon { width:36px; height:36px; flex-basis:36px; border-radius:11px; }
  .mobile-workspace-sheet__link strong { font-size:13px; }
  .mobile-language-select { margin:0 4px; }

  dialog.hanenkam-guide {
    box-shadow:0 24px 80px rgba(0,0,0,.45);
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 16px);
    height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
  }
  dialog.hanenkam-guide .hanenkam-guide__workspace > .hanenkam-guide__navigation { padding-bottom:10px; }
  .cookie-notice { bottom:var(--mobile-dock-clearance); right:calc(var(--safe-right) + 14px); width:min(380px,calc(100vw - var(--safe-left) - var(--safe-right) - 28px)); }
}

@media screen and (min-width:1025px) {
  .site-shell > main { padding-top:calc(88px + var(--safe-top)); }
  body:has(.auth-studio) .site-shell > main { padding-top:var(--safe-top)!important; }
}

/* One solid camera band: no light border or backdrop blur bleeds into it. */
@media screen {
  .site-shell::before,.admin-site-shell::before { box-shadow:0 -2px #030812; isolation:isolate; }
}
@media screen and (max-width:1024px) {
  /* Clear glass: keep shapes visible, without a milky fill or a second blur
     across the page when the menu opens. */
  .site-navigation__backdrop {
    background:rgba(7,22,34,.025);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .mobile-site-dock,
  .mobile-workspace-sheet {
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(242,248,255,.025));
    border:1px solid rgba(255,255,255,.38);
    box-shadow:0 6px 24px rgba(9,27,48,.12),inset 0 1px rgba(255,255,255,.4),inset 0 -1px rgba(9,27,48,.08);
    backdrop-filter:blur(6px) saturate(120%);
    -webkit-backdrop-filter:blur(6px) saturate(120%);
    --text:#0b1b30;--text-soft:#162a41;--muted:#253b53;--sapphire:#123f70;
    --surface-subtle:transparent;--surface-blue:rgba(205,229,255,.08);--line:rgba(100,140,180,.18);
    color:var(--text);
    text-shadow:0 1px 2px rgba(255,255,255,.45);
  }
  .mobile-site-dock {
    border-radius:30px;
    backdrop-filter:blur(3px) saturate(120%);
    -webkit-backdrop-filter:blur(3px) saturate(120%);
  }
  .mobile-site-dock__item { color:var(--text);border-radius:24px; }
  .mobile-site-dock__item.is-active {
    background:rgba(255,255,255,.06);color:var(--sapphire);
    box-shadow:inset 0 0 0 1px rgba(130,170,210,.25),inset 0 1px rgba(255,255,255,.3);
  }
  .mobile-workspace-sheet__link,
  .mobile-workspace-sheet__close,
  .mobile-language-select select {
    color:var(--text);background:rgba(255,255,255,.035);border-color:rgba(150,180,210,.18);
    box-shadow:none;
  }
  .mobile-workspace-sheet__link.is-active { background:rgba(217,236,255,.08);border-color:rgba(104,155,211,.3); }
  .mobile-workspace-sheet .workshop-name-list a:is(:hover,.is-active),
  :root[data-theme="dark"] .mobile-workspace-sheet .workshop-name-list a:is(:hover,.is-active) {background:rgba(217,236,255,.08);color:var(--text);}
  .mobile-workspace-sheet__icon,
  .mobile-workspace-sheet__title > .material-symbols-outlined { background:transparent;box-shadow:none; }
  .mobile-language-select option { background:#f1f6fb;color:#0b1b30; }
  .mobile-workspace-sheet .guest-navigation__register { background:rgba(22,65,108,.9);color:white; }
  :root[data-theme="dark"] .mobile-site-dock,
  :root[data-theme="dark"] .mobile-workspace-sheet {
    background:linear-gradient(135deg,rgba(27,40,57,.08),rgba(17,29,45,.025));
    border-color:rgba(255,255,255,.3);
    box-shadow:0 8px 28px rgba(2,9,19,.22),inset 0 1px rgba(255,255,255,.35),inset 0 -1px rgba(255,255,255,.08);
    --text:#f3f8ff;--text-soft:#e6f0fc;--muted:#d1deed;--sapphire:#c4e3ff;
    text-shadow:0 1px 3px rgba(0,8,20,.75);
  }
  :root[data-theme="dark"] .mobile-site-dock__item {color:var(--text);}
  :root[data-theme="dark"] .mobile-site-dock__item.is-active {background:rgba(255,255,255,.06);color:var(--sapphire);}
  :root[data-theme="dark"] .mobile-workspace-sheet__link {color:var(--text);background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.18);}
  :root[data-theme="dark"] .mobile-site-dock,
  body:has(.home-studio) :is(.mobile-site-dock,.mobile-workspace-sheet)[data-over-film="true"] {
    background:linear-gradient(135deg,rgba(230,242,255,.08),rgba(222,237,255,.025));
    --text:#f3f8ff;--text-soft:#e6f0fc;--muted:#d1deed;--sapphire:#d5eaff;
    text-shadow:0 1px 3px rgba(0,8,20,.75);
  }
  body:has(.home-studio) :is(.mobile-site-dock,.mobile-workspace-sheet)[data-over-film="false"] {
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(242,248,255,.025));
    --text:#0b1b30;--text-soft:#162a41;--muted:#253b53;--sapphire:#123f70;
    text-shadow:0 1px 2px rgba(255,255,255,.45);
  }
  @media (prefers-reduced-transparency:reduce) {
    .mobile-site-dock,.mobile-workspace-sheet {backdrop-filter:none;-webkit-backdrop-filter:none;}
  }
}