/* SMAIS CAST: shared tablet/desktop layout. Phone rules stay in native.css.
 * Device classes come from app.js; all changes below exclude phone devices.
 * Safe areas belong inside the chrome, never outside the application shell.
 */
@media (min-width: 600px) {
  body:not(.nc-phone-device):not(.nc-gated) {
    --nc-header-height: 56px;
    --nc-nav-height: 60px;
    --nc-gutter: clamp(20px, 2.5vw, 36px);
    background: var(--nc-bg);
  }

  body:not(.nc-phone-device):not(.nc-gated) .nc-shell {
    max-width: none;
    margin: 0;
    border: 0;
    box-shadow: none;
    grid-template-rows: calc(var(--nc-header-height) + var(--nc-safe-top)) minmax(0, 1fr) calc(var(--nc-nav-height) + var(--nc-safe-bottom));
  }

  body:not(.nc-phone-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:not(.nc-phone-device):not(.nc-gated) .nc-appbar > h1 {
    top: calc(var(--nc-safe-top) + var(--nc-header-height) / 2);
    width: calc(100% - 176px);
  }

  body:not(.nc-phone-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);
  }

  body:not(.nc-phone-device):not(.nc-gated) .nc-icon-button {
    flex-basis: 44px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }
  body:not(.nc-phone-device):not(.nc-gated) .nc-icon-button .nc-icon { width: 23px; height: 23px; }
  body:not(.nc-phone-device):not(.nc-gated) .nc-tab .nc-icon { width: 24px; height: 24px; }

  body:not(.nc-phone-device):not(.nc-gated) .nc-tabbar {
    gap: 4px;
    padding: 4px max(12px, env(safe-area-inset-right, 0px)) calc(4px + var(--nc-safe-bottom)) max(12px, env(safe-area-inset-left, 0px));
  }

  body:not(.nc-phone-device):not(.nc-gated) .nc-tab {
    min-width: 0;
    min-height: 0;
    max-width: none;
    gap: 4px;
  }

  body:not(.nc-phone-device):not(.nc-gated) .nc-tab span { font-size: 11px; }
  body:not(.nc-phone-device):not(.nc-gated) .nc-tab.is-active { background: var(--nc-gold-soft); }
  body:not(.nc-phone-device):not(.nc-gated) .nc-viewport { min-width: 0; scroll-padding: 24px; }

  body:not(.nc-phone-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:not(.nc-phone-device):not(.nc-gated) .native-screen main,
  body:not(.nc-phone-device):not(.nc-gated) .native-screen .cast-page-shell,
  body:not(.nc-phone-device):not(.nc-gated) .native-screen .sm-admin-shell,
  body:not(.nc-phone-device):not(.nc-gated) .native-screen .we-shell,
  body:not(.nc-phone-device):not(.nc-gated) .native-screen .point-exchange-shell {
    max-width: 1360px !important;
  }

  /* Reading and account forms remain a comfortable line length. */
  body:not(.nc-phone-device):not(.nc-gated) .native-screen .guide-page-shell,
  body:not(.nc-phone-device):not(.nc-gated) .profile-edit-page main,
  body:not(.nc-phone-device):not(.nc-gated) .native-screen .nc-inbox { max-width: 960px !important; }

  body:not(.nc-phone-device):not(.nc-gated) .nc-route-progress { top: calc(var(--nc-header-height) - 1px + var(--nc-safe-top)); }
  body:not(.nc-phone-device):not(.nc-gated) .nc-offline { top: calc(var(--nc-header-height) + 4px + var(--nc-safe-top)); }

  body:not(.nc-phone-device):not(.nc-gated) .nc-hub .nc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  body:not(.nc-phone-device):not(.nc-gated) .nc-hub .nc-list-row {
    min-width: 0;
    min-height: 92px;
    padding: 18px;
    background: var(--nc-surface);
    border: 1px solid var(--nc-line);
    border-radius: 16px;
  }

  body:not(.nc-phone-device):not(.nc-gated) .nc-list-row strong { overflow-wrap: anywhere; }
  body:not(.nc-phone-device):not(.nc-gated) .nc-hub .nc-list-row strong { font-size: 14px; }
  body:not(.nc-phone-device):not(.nc-gated) .nc-hub .nc-list-row small { font-size: 12px; }

  /* Give tablet dialogs their own scroll area, with actions always reachable. */
  body:not(.nc-phone-device) .teleport-modal-box,
  body:not(.nc-phone-device) .we-sheet-panel,
  body:not(.nc-phone-device) .point-exchange-confirm-panel,
  body:not(.nc-phone-device) .native-screen .cast-member-modal-box {
    width: calc(100% - 48px);
    max-width: 760px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: auto;
    border-radius: 24px;
  }

  body:not(.nc-phone-device) .teleport-choice-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border: 0;
    background: transparent;
  }
  body:not(.nc-phone-device) .teleport-choice-card {
    min-width: 0;
    border: 1px solid var(--nc-line) !important;
    border-radius: 12px !important;
  }
  body:not(.nc-phone-device) .native-screen .cast-member-modal-box { height: auto !important; }
  body:not(.nc-phone-device) .teleport-modal-header { flex-shrink: 0; }

  body:not(.nc-phone-device) .native-screen .attraction-operation-modal:not(.is-console-mode) > .attraction-modal-panel {
    width: calc(100% - 48px) !important;
    max-width: 820px !important;
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    margin: auto !important;
    border-radius: 24px !important;
  }

  body:not(.nc-phone-device):not(.nc-gated).nc-keyboard .nc-shell {
    grid-template-rows: calc(var(--nc-header-height) + var(--nc-safe-top)) minmax(0, 1fr);
  }
  body:not(.nc-phone-device):not(.nc-gated).nc-keyboard .nc-tabbar { display: none; }

  /* The map owns its whole content rectangle. */
  body:not(.nc-phone-device):not(.nc-gated).nc-is-map .native-screen { padding: 0 !important; }
}

@media (min-width: 760px) {
  body:not(.nc-phone-device):not(.nc-gated) .native-screen .nc-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "welcome welcome" "card quick" "week quick" "news points";
    gap: 20px 24px;
    align-items: start;
    max-width: 1240px !important;
  }
  body:not(.nc-phone-device) .nc-home > .nc-welcome { grid-area: welcome; margin: 0; }
  body:not(.nc-phone-device) .nc-home > .nc-cast-card { grid-area: card; min-width: 0; }
  body:not(.nc-phone-device) .nc-home > .nc-week-row { grid-area: week; margin: -20px 7px 0; }
  body:not(.nc-phone-device) .nc-home > .nc-home-quick { grid-area: quick; margin: 0; }
  body:not(.nc-phone-device) .nc-home > .nc-home-news { grid-area: news; margin: 0; min-width: 0; }
  body:not(.nc-phone-device) .nc-home > .nc-home-points { grid-area: points; margin: 0; min-width: 0; }
  body:not(.nc-phone-device) .nc-home > .nc-passkey-suggestion { grid-column: 1 / -1; }
  body:not(.nc-phone-device) .nc-home .nc-quick-grid { gap: 12px; }
  body:not(.nc-phone-device) .nc-home .nc-quick { min-height: 108px; padding: 16px 12px; }
  body:not(.nc-phone-device) .nc-home .nc-cast-card { min-height: 224px; }
  body:not(.nc-phone-device) .nc-home .nc-cast-card-person > div { min-width: 0; }
  body:not(.nc-phone-device) .nc-home .nc-cast-card-person strong { overflow-wrap: anywhere; }

  body:not(.nc-phone-device) .native-screen .attraction-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
    gap: 12px !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  body:not(.nc-phone-device) .native-screen .attraction-card {
    border: 1px solid var(--nc-line) !important;
    border-radius: 16px;
    background: var(--nc-surface);
    min-width: 0;
  }
}