/* SMAIS CAST tablet chrome isolation (v85)
 * This layer is intentionally class-based instead of relying on one fixed
 * resolution. iPadOS can report desktop-like UA strings and can run in Split
 * View / Stage Manager, so app.js marks the actual device family.
 */
html.nc-tablet-device,
body.nc-tablet-device {
  --nc-app-height: var(--nc-tablet-shell-height, 100dvh);
  --nc-tablet-bottom: var(--nc-tablet-safe-bottom, var(--nc-safe-bottom, 0px));
}

/* v84 compacts only CAST chrome. Safe-area values and the v81-v83 iPad
 * viewport/home-button handling below are intentionally unchanged. */
body.nc-tablet-device:not(.nc-gated) {
  --nc-header-height: 48px;
  --nc-nav-height: 50px;
  --nc-gutter: clamp(16px, 2.7vw, 36px);
}

/* Do not use inset:0 for the tablet shell. Installed iPadOS web apps with
 * viewport-fit=cover can resolve bottom:0 above the physical bottom edge.
 * app.js provides a pixel height only for iPad standalone mode; every other
 * tablet keeps the standards-based 100dvh fallback. */
/* If WebKit paints outside its incorrectly shortened standalone viewport,
 * keep that exposed system/home-indicator strip visually continuous with the
 * persistent navigation. This is a fallback, not the primary sizing fix. */
html.nc-ipad-standalone,
body.nc-ipad-standalone {
  background: #fff;
}

/* iPadOS standalone root uses the SAME measured height as the shell.
 * 100vh is not reliable on Home-button iPads when the system status bar is
 * outside the web-app viewport: it can be taller than the actually visible app
 * area and clip the navigation by roughly one status-bar height. Modern iPads
 * still receive the existing screen-sized value from app.js when required. */
html.nc-ipad-standalone,
html.nc-ipad-standalone body.nc-ipad-standalone {
  height: var(--nc-tablet-shell-height, 100dvh) !important;
  min-height: var(--nc-tablet-shell-height, 100dvh) !important;
  max-height: var(--nc-tablet-shell-height, 100dvh) !important;
  overflow: hidden !important;
}

/* iOS/iPadOS devices with no bottom Home-indicator inset (including Home-button iPads such as iPad Air 3) have no Home-indicator exclusion.
 * When WebKit reports a zero bottom safe-area, the CAST nav must end exactly at
 * the viewport edge with no synthetic bottom padding. */
html.nc-ios-no-home-indicator,
body.nc-ios-no-home-indicator {
  --nc-tablet-safe-bottom: 0px !important;
  --nc-tablet-bottom: 0px !important;
}

body.nc-tablet-device:not(.nc-gated) .nc-shell {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: var(--nc-tablet-shell-height, 100dvh);
  min-height: 0;
  max-height: none;
  max-width: none;
  margin: 0;
  overflow: hidden;
  grid-template-rows:
    calc(var(--nc-header-height) + var(--nc-safe-top))
    minmax(0, 1fr)
    calc(var(--nc-nav-height) + var(--nc-tablet-bottom));
}

body.nc-tablet-device:not(.nc-gated) .nc-appbar {
  padding:
    var(--nc-safe-top)
    max(var(--nc-gutter), env(safe-area-inset-right, 0px))
    0
    max(var(--nc-gutter), env(safe-area-inset-left, 0px));
}

body.nc-tablet-device:not(.nc-gated) .nc-appbar > h1 {
  top: calc(var(--nc-safe-top) + var(--nc-header-height) / 2);
  width: calc(100% - 176px);
}

body.nc-tablet-device:not(.nc-gated) .nc-appbar > .nc-back {
  left: max(var(--nc-gutter), env(safe-area-inset-left, 0px));
  top: calc(var(--nc-safe-top) + var(--nc-header-height) / 2);
}

/* Override the <=640px phone compaction when an iPad is in a narrow Split View.
 * The device remains a tablet even if its current window is phone-width. */
body.nc-tablet-device:not(.nc-gated) .nc-icon-button {
  flex-basis: 38px;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  min-height: 38px;
  padding: 8px !important;
}
body.nc-tablet-device:not(.nc-gated) .nc-icon-button .nc-icon { width: 21px; height: 21px; }
body.nc-tablet-device:not(.nc-gated) .nc-appbar-actions { min-width: 38px; }

/* The home-indicator safe area is contained INSIDE the white navigation bar.
 * There is no safe-area margin outside the shell, so portrait and landscape
 * cannot leave a grey strip below the bar. */
body.nc-tablet-device:not(.nc-gated) .nc-tabbar {
  gap: 4px;
  padding:
    4px
    max(12px, env(safe-area-inset-right, 0px))
    calc(4px + var(--nc-tablet-bottom))
    max(12px, env(safe-area-inset-left, 0px));
  background: rgba(255,255,255,.98);
}
body.nc-tablet-device:not(.nc-gated) .nc-tab {
  min-width: 0;
  min-height: 0;
  max-width: none;
  gap: 3px;
}
body.nc-tablet-device:not(.nc-gated) .nc-tab .nc-icon { width: 21px; height: 21px; }
body.nc-tablet-device:not(.nc-gated) .nc-tab span { font-size: 10px; }
body.nc-tablet-device:not(.nc-gated) .nc-tab.is-active { background: var(--nc-gold-soft); }

body.nc-tablet-device:not(.nc-gated) .nc-viewport {
  min-width: 0;
  min-height: 0;
  scroll-padding: 24px;
}
body.nc-tablet-device:not(.nc-gated) .native-screen {
  padding:
    24px
    max(var(--nc-gutter), env(safe-area-inset-right, 0px))
    28px
    max(var(--nc-gutter), env(safe-area-inset-left, 0px)) !important;
}

body.nc-tablet-device:not(.nc-gated) .nc-route-progress {
  top: calc(var(--nc-header-height) - 1px + var(--nc-safe-top));
}
body.nc-tablet-device:not(.nc-gated) .nc-offline {
  top: calc(var(--nc-header-height) + 4px + var(--nc-safe-top));
}
body.nc-tablet-device:not(.nc-gated) .nc-toast {
  bottom: calc(var(--nc-nav-height) + var(--nc-tablet-bottom) + 16px);
}
body.nc-tablet-device:not(.nc-gated) .nc-admin-to-top {
  bottom: calc(var(--nc-nav-height) + var(--nc-tablet-bottom) + 14px);
}

/* iPad standalone must not anchor auxiliary fixed UI to WebKit's potentially
 * shortened fixed-position containing block. Anchor it from the corrected top
 * edge instead. */
body.nc-ipad-standalone:not(.nc-gated) .nc-toast {
  top: calc(var(--nc-tablet-shell-height) - var(--nc-nav-height) - var(--nc-tablet-bottom) - 16px);
  bottom: auto;
  transform: translate(-50%, -100%);
}
body.nc-ipad-standalone:not(.nc-gated) .nc-admin-to-top {
  top: calc(var(--nc-tablet-shell-height) - var(--nc-nav-height) - var(--nc-tablet-bottom) - 58px);
  bottom: auto;
}

/* Full-screen layers get the same corrected physical app height. Without this,
 * a modal/backdrop opened on iPad can reproduce the same lower-edge gap even
 * after the persistent shell itself has been corrected. */
body.nc-ipad-standalone .teleport-modal,
body.nc-ipad-standalone .attraction-operation-modal,
body.nc-ipad-standalone .we-sheet,
body.nc-ipad-standalone .history-detail-modal,
body.nc-ipad-standalone .cast-member-modal,
body.nc-ipad-standalone .application-modal,
body.nc-ipad-standalone .point-exchange-confirm,
body.nc-ipad-standalone .rules-modal,
body.nc-ipad-standalone .attraction-rank-list-modal,
body.nc-ipad-standalone .notice-modal,
body.nc-ipad-standalone .push-first-gate-modal,
body.nc-ipad-standalone .admin-notice-detail-modal,
body.nc-ipad-standalone .profile-rank-detail-modal,
body.nc-ipad-standalone .passkey-first-modal,
body.nc-ipad-standalone .material-photo-viewer,
body.nc-ipad-standalone .nc-login-loader,
body.nc-ipad-standalone .page-mickey-transition,
body.nc-ipad-standalone .subpage-mickey-transition {
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: var(--nc-tablet-shell-height, 100dvh) !important;
}

/* The same corrected height is used by tablet overlays. Otherwise a dialog can
 * reproduce the exact same iPadOS viewport gap even when the main shell is fixed. */
body.nc-tablet-device .teleport-modal-box,
body.nc-tablet-device .we-sheet-panel,
body.nc-tablet-device .point-exchange-confirm-panel,
body.nc-tablet-device .native-screen .cast-member-modal-box,
body.nc-tablet-device .native-screen .attraction-operation-modal:not(.is-console-mode) > .attraction-modal-panel {
  max-height: calc(var(--nc-app-height, 100dvh) - 48px) !important;
}
body.nc-tablet-device .native-screen .material-photo-viewer-dialog,
body.nc-tablet-device .material-upload-review-dialog {
  height: var(--nc-app-height, 100dvh) !important;
  max-height: var(--nc-app-height, 100dvh) !important;
}

/* On tablets the software keyboard owns the lower part of the visual viewport.
 * The persistent nav is removed while typing, and the corrected shell remains
 * the only scroll container. */
body.nc-tablet-device:not(.nc-gated).nc-keyboard .nc-shell {
  grid-template-rows:
    calc(var(--nc-header-height) + var(--nc-safe-top))
    minmax(0, 1fr);
}
body.nc-tablet-device:not(.nc-gated).nc-keyboard .nc-tabbar { display: none; }

/* iPad portrait is more stable and readable as one column. The existing
 * two-column dashboard remains for normal iPad landscape widths. */
@media (orientation: portrait) {
  body.nc-tablet-device:not(.nc-gated) .native-screen .nc-home {
    display: block !important;
    max-width: 760px !important;
  }
  body.nc-tablet-device:not(.nc-gated) .nc-home > .nc-welcome { margin: 0 0 19px; }
  body.nc-tablet-device:not(.nc-gated) .nc-home > .nc-week-row { margin: 0 7px; }
  body.nc-tablet-device:not(.nc-gated) .nc-home > .nc-home-quick,
  body.nc-tablet-device:not(.nc-gated) .nc-home > .nc-home-news,
  body.nc-tablet-device:not(.nc-gated) .nc-home > .nc-home-points { margin-top: 22px; }
}

/* Older engines without dvh still get a deterministic fallback. */
@supports not (height: 100dvh) {
  html.nc-tablet-device,
  body.nc-tablet-device { --nc-app-height: var(--nc-tablet-shell-height, 100vh); }
  body.nc-tablet-device:not(.nc-gated) .nc-shell { height: var(--nc-tablet-shell-height, 100vh); }
}