/* Last stylesheet: viewport and input capabilities, never device-brand detection. */
:root {
  --device-safe-top: env(safe-area-inset-top, 0px);
  --device-safe-right: env(safe-area-inset-right, 0px);
  --device-safe-bottom: env(safe-area-inset-bottom, 0px);
  --device-safe-left: env(safe-area-inset-left, 0px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body#bahasa-premium { min-width: 0; min-height: 100svh; }
body#bahasa-premium:not([data-page="welcome"]):not([data-page="login"]) {
  box-sizing: border-box;
  padding: var(--device-safe-top) var(--device-safe-right) var(--device-safe-bottom) var(--device-safe-left);
}
#bahasa-premium :is(#page-content, .bah-nav, .bah-links, .page-trail,
  .portal-workspace, .portal-topbar, .portal-cards, .portal-cards > *,
  .voc-layout, .voc-filter-bar, .voc-list-meta, .voc-toggle, .voc-panel,
  .ps-layout, .ps-layout > *, .ps-player, .ps-stage-top,
  .br-reader-grid, .br-reader-grid > *, .br-sentence-row, .br-sentence-ms,
  .br-sentence-zh, .br-setting-group, .br-reading-stats,
  .plan-layout, .plan-layout > *, .plan-bottom-grid > *, .quiz-option,
  .ac-shell, .ac-main, .ac-columns > *, .ac-summary > *, .ac-fields > *) {
  min-width: 0;
}
#bahasa-premium :is(.auth-current-email, .ac-heading, .ac-event-top,
  .voc-information strong, .voc-focus-label, .ps-source-pill, .ps-lesson-copy,
  .quiz-option, .plan-storage-note, .br-story-meta) { overflow-wrap: anywhere; }

/* Full-bleed scenery stays full bleed; its controls remain inside the safe area. */
#bahasa-premium .wl-stage {
  padding-top: calc(32px + var(--device-safe-top));
  padding-right: max(clamp(24px, 5vw, 96px), var(--device-safe-right));
  padding-bottom: calc(22px + var(--device-safe-bottom));
  padding-left: max(clamp(24px, 5vw, 96px), var(--device-safe-left));
}
#bahasa-premium .wl-discover {
  padding-left: max(24px, var(--device-safe-left));
  padding-right: max(24px, var(--device-safe-right));
  padding-bottom: calc(28px + var(--device-safe-bottom));
}
body#bahasa-premium .auth-page {
  padding-top: max(12px, var(--device-safe-top));
  padding-right: max(12px, var(--device-safe-right));
  padding-bottom: max(12px, var(--device-safe-bottom));
  padding-left: max(12px, var(--device-safe-left));
}

/* iOS focus zoom is avoided without disabling user zoom. Range/checkbox inputs
   retain their compact native appearance; words inside reading text stay inline. */
@media (max-width: 1100px), (any-pointer: coarse) {
  body#bahasa-premium :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]), select, textarea) {
    font-size: 16px !important;
    max-width: 100%;
    scroll-margin-block: 100px 30px;
  }
  #bahasa-premium :is(.voc-search input, .voc-category select, .voc-level select,
    .voc-focus-label select, .br-lookup-form input, .ac-search input,
    .ac-filter select, .ac-field input:not([type="checkbox"]):not([type="radio"])) {
    min-height: 44px;
  }
  #bahasa-premium :is(.auth-layout, .auth-card, .auth-input-shell) { min-width: 0; }
  #bahasa-premium .voc-list-meta { flex-wrap: wrap; }
  #bahasa-premium .voc-focus-label { flex-wrap: wrap; white-space: normal; }
  #bahasa-premium .voc-focus-label select { max-width: 100%; }
  #bahasa-premium .br-setting-group { flex-wrap: wrap; }
  #bahasa-premium .br-line-setting { flex-wrap: wrap; }
  #bahasa-premium .br-line-setting select { max-width: 90px; }
  #bahasa-premium .br-speed select { max-width: 105px; }
  #bahasa-premium .br-current-controls { flex-wrap: wrap; }
  #bahasa-premium .br-reading-stats { flex-wrap: wrap; row-gap: 12px; }
  #bahasa-premium .br-word-popover {
    max-width: calc(100vw - 24px - var(--device-safe-left) - var(--device-safe-right));
    max-height: calc(100dvh - 24px - var(--device-safe-top) - var(--device-safe-bottom));
  }
}

/* Only standalone controls receive larger targets; inline vocabulary does not. */
@media (any-pointer: coarse), (max-width: 700px) {
  #bahasa-premium#bahasa-premium :is(.bah-nav-action, .wl-header-login,
    .wl-primary, .wl-sound, .wl-view-button, .auth-back, .auth-tab,
    .auth-submit, .auth-continue, .auth-switch-account, .portal-start,
    .portal-listen, .voc-filter, .voc-audio-button, .voc-reference-button,
    .voc-memory, .voc-page-button, .voc-load-more, .ps-listen-button,
    .ps-next-word, .ps-complete-button, .ps-native-reference,
    .br-tool, .br-speed, .br-save-note, .br-lookup-form button,
    .br-current-controls > button, .br-popover-actions > button,
    .br-side-tabs > button, .br-font-settings > button,
    .study-segmented button, .study-audio, .plan-checkin button,
    .button, .button-ghost, .ac-primary, .ac-nav > button,
    .ac-form-actions > button, .ac-action-row button,
    .ac-dialog-actions button, .ac-pagination button) {
    min-height: 44px;
  }
  #bahasa-premium#bahasa-premium :is(.portal-round, .portal-avatar,
    .portal-rail-bottom, .ps-stop-button, .voc-favorite,
    .br-sentence-audio, .br-sentence-note, .br-popover-close,
    .br-now-playing > button, .ac-open-button) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
  #bahasa-premium .portal-rail-link { min-width: 44px; }
  #bahasa-premium .ps-rate-controls > button { min-width: 44px; min-height: 44px; }
  #bahasa-premium .br-sentence-ms { grid-template-columns: 25px minmax(0, 1fr) 44px; }
  #bahasa-premium .br-sentence-zh { grid-template-columns: minmax(0, 1fr) 44px; }
  #bahasa-premium .br-sentence-note { opacity: 1; }
  #bahasa-premium .br-vocab-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px 44px; }
  #bahasa-premium .br-vocab-row > button { min-width: 0; min-height: 44px; }
  #bahasa-premium .br-word-popover { padding-top: 25px; }
  #bahasa-premium .br-popover-heading { padding-right: 42px; }
  #bahasa-premium .br-switch-label { min-height: 44px; }
  #bahasa-premium .br-switch-label input { top: 50%; transform: translateY(-50%); }
  #bahasa-premium .br-sentences { touch-action: pan-y pinch-zoom; }
  #bahasa-premium .wl-scene-dots { gap: 2px; max-width: 100%; }
  #bahasa-premium .wl-scene-dot { width: 28px; min-width: 28px; height: 44px; }
  #bahasa-premium .wl-scene-dot[aria-pressed="true"] { width: 32px; }
  #bahasa-premium .br-book-dots button { min-width: 28px; height: 44px; }
  #bahasa-premium .ps-player { flex-wrap: wrap; }
  #bahasa-premium .ps-source-pill { white-space: normal; text-align: right; }
  #bahasa-premium .portal-topbar { flex-wrap: wrap; }
  #bahasa-premium .portal-tools { flex-shrink: 0; }
}

/* Portrait phones and compact tablet windows share one short navigation row.
   When it cannot fit, the row scrolls natively without widening the document. */
@media (max-width: 900px) {
  #bahasa-premium .bah-nav { flex-wrap: wrap; gap: 4px 12px; padding: 8px 16px 4px; }
  #bahasa-premium .bah-brand { display: inline-flex; align-items: center; min-height: 44px; }
  #bahasa-premium .bah-nav-action { margin-left: auto; display: inline-flex; align-items: center; }
  #bahasa-premium .bah-links {
    order: 3;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
  }
  #bahasa-premium .bah-links a {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 44px;
    padding: 6px 2px;
    justify-content: center;
    scroll-snap-align: start;
  }
  #bahasa-premium .bah-links a[aria-current="page"]::after { bottom: 3px; }
  #bahasa-premium .page-trail { width: calc(100% - 32px); gap: 6px; padding-block: 5px; }
  #bahasa-premium .page-trail a { display: inline-flex; align-items: center; min-height: 36px; }
  #bahasa-premium .br-reading-toolbar { position: relative; top: auto; }
  #bahasa-premium .wl-stage {
    min-height: 100svh;
    padding: calc(20px + var(--device-safe-top)) max(20px, var(--device-safe-right)) calc(16px + var(--device-safe-bottom)) max(20px, var(--device-safe-left));
  }
  #bahasa-premium .wl-center { padding-block: clamp(30px, 6svh, 64px); }
  #bahasa-premium .wl-bottom { flex-wrap: wrap; }
  #bahasa-premium .auth-topline { gap: 12px; }
  #bahasa-premium .auth-card { width: 100%; }
}

@media (max-width: 700px) {
  #bahasa-premium .site-header { position: relative; }
  #bahasa-premium .bah-links a { font-size: 11px; }
  #bahasa-premium .bah-learning-order > a { gap: 3px; }
  #bahasa-premium .bah-step-number { font-size: 8px; }
  #bahasa-premium .ps-stage-top { align-items: flex-start; flex-wrap: wrap; }
  #bahasa-premium .ps-source-pill { text-align: left; }
  #bahasa-premium .ps-waveform { max-width: 100%; overflow: hidden; }
  #bahasa-premium .voc-information strong { white-space: normal; }
  #bahasa-premium .voc-search, #bahasa-premium .voc-category { display: block; width: 100%; margin-right: 0; }
  #bahasa-premium .voc-category { margin-top: 12px; }
  #bahasa-premium .voc-list-meta { align-items: flex-start; }
  #bahasa-premium .voc-reference-button { margin-left: 0; margin-top: 7px; }
  #bahasa-premium .voc-scroll-region, #bahasa-premium .br-sentences {
    height: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior-y: auto;
    scrollbar-gutter: auto;
  }
  #bahasa-premium .br-current-controls > span { flex-basis: 100%; }
  #bahasa-premium .br-sentence-row, #bahasa-premium .br-column-head { grid-template-columns: minmax(0, 1fr); }
  #bahasa-premium .br-column-head .br-translation-head { display: none; }
  #bahasa-premium .br-sentence-zh { border-left: 0; padding: 0 11px 10px 44px; }
  #bahasa-premium .br-toolbar-progress { flex: 1 1 100%; min-width: 0; padding-left: 0; }
  #bahasa-premium .br-now-playing { flex-wrap: wrap; }
  #bahasa-premium .br-now-playing > div { flex: 1; }
  #bahasa-premium .br-now-playing-track { display: none; }
  #bahasa-premium .br-reading-stats { gap: 14px; }
  #bahasa-premium .br-font-settings { gap: 7px; }
  #bahasa-premium .br-theme-buttons { margin-left: 0; }
  #bahasa-premium .quiz-footer, #bahasa-premium .study-section-top { flex-wrap: wrap; }
  #bahasa-premium .quiz-footer .button { margin-left: auto; }
  #bahasa-premium[data-page="account"] .ac-header { flex-wrap: wrap; }
  #bahasa-premium[data-page="account"] .ac-header > span { order: 3; width: 100%; }
  #bahasa-premium[data-page="account"] .ac-countdown { gap: clamp(8px, 3vw, 18px); }
  #bahasa-premium[data-page="admin"] .ac-action-row { flex-wrap: wrap; }
  #bahasa-premium[data-page="admin"] .ac-dialog-actions { flex-wrap: wrap; }
  #bahasa-premium .ac-dialog { max-height: calc(100dvh - 24px - var(--device-safe-top) - var(--device-safe-bottom)); }
}

/* At tablet widths the bilingual pair remains side by side. Phones keep each
   original sentence immediately followed by its own translation. */
@media (min-width: 701px) and (max-width: 1100px) {
  #bahasa-premium .br-reader-grid { grid-template-columns: minmax(0, 1fr); }
  #bahasa-premium .br-learning-sidebar { position: relative; top: auto; max-height: none; overflow: visible; }
  #bahasa-premium .br-sentence-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #bahasa-premium .br-hide-translation .br-sentence-row { grid-template-columns: minmax(0, 1fr); }
  #bahasa-premium .portal-workspace { gap: 20px; }
  #bahasa-premium .portal-goal { padding-inline: 18px; }
}

@media (max-width: 360px) {
  #bahasa-premium .bah-nav { padding-inline: 12px; }
  #bahasa-premium .portal-main { padding-inline: 12px; }
  #bahasa-premium .portal-goal, #bahasa-premium .portal-shortcut { padding-inline: 14px; }
  #bahasa-premium .portal-eyebrow { font-size: 10px; }
  #bahasa-premium .portal-intro h1 { font-size: 28px; }
  #bahasa-premium .ps-layout { padding-inline: 14px; }
  #bahasa-premium .ps-number-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bahasa-premium .ps-number-key { min-width: 0; }
  #bahasa-premium .br-sentence-ms { gap: 6px; padding-inline: 8px; }
  #bahasa-premium .br-sentence-zh { padding-left: 39px; padding-right: 8px; }
  #bahasa-premium .br-side-panel { padding-inline: 12px; }
  #bahasa-premium .br-vocab-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 40px; }
  #bahasa-premium .br-side-tabs { flex-wrap: wrap; }
  #bahasa-premium .wl-footer { grid-template-columns: minmax(0, 1fr); }
  #bahasa-premium .wl-view-controls { grid-column: 1; grid-row: auto; justify-self: start; }
  #bahasa-premium .wl-scene-dots { grid-column: 1; grid-row: auto; }
  #bahasa-premium .wl-bottom { justify-content: space-between; }
  #bahasa-premium .wl-bottom #welcome-track { order: 3; flex-basis: 100%; max-width: none; text-align: left; }
}

/* Phone landscape and an on-screen keyboard must never trap a form or footer
   behind a fixed-height scene. No video/animation playback policy is changed. */
@media (max-height: 600px) and (max-width: 1100px) {
  #bahasa-premium .site-header { position: relative; }
  #bahasa-premium .wl-stage { min-height: 100svh; }
  #bahasa-premium .wl-center { padding-block: 25px; }
  #bahasa-premium .wl-title { font-size: clamp(34px, 7vw, 52px); }
  #bahasa-premium .wl-overline { margin-bottom: 16px; }
  #bahasa-premium .wl-intro, #bahasa-premium .wl-entry-actions { margin-top: 18px; }
  body#bahasa-premium .auth-scene { min-height: calc(100dvh - 24px); }
  body#bahasa-premium .auth-layout { padding-top: 12px; padding-bottom: 30px; align-items: start; }
  body#bahasa-premium .auth-scene:has(.auth-card[data-auth-mode="register"]) .auth-editorial { position: relative; top: auto; padding-top: 0; }
  #bahasa-premium .br-reading-toolbar { position: relative; top: auto; }
  #bahasa-premium .br-sentences { max-height: none; overflow: visible; }
  #bahasa-premium .ac-dialog { margin-block: 12px; }
}

/* Existing reduced-motion rules keep control of playback. This capability
   fallback only avoids stacking several expensive glass surfaces on touch. */
@media (pointer: coarse) and (max-width: 1100px) {
  #bahasa-premium :is(.portal-rail, .portal-round, .ps-sound-stage, .rg-book-card) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* A fixed server-issued guest deadline follows the visitor across modules. */
body#bahasa-premium.has-guest-session { padding-bottom: calc(82px + var(--device-safe-bottom)); }
.guest-session-bar {
  position:fixed;z-index:150;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);
  display:flex;align-items:center;gap:24px;padding:8px 10px 8px 18px;
  background:rgba(18,40,44,.94);color:#fff;border:1px solid #ffffff38;
  border-radius:25px;box-shadow:0 8px 32px #071f2930;backdrop-filter:blur(18px);
  font:12px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
}
.guest-session-bar strong{font-size:15px;letter-spacing:.05em;font-variant-numeric:tabular-nums;margin-left:8px;}
#bahasa-premium .guest-session-bar a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:#f2eee3;color:#183337;border-radius:20px;white-space:nowrap;text-decoration:none;}
.guest-session-bar a:focus-visible{outline:2px solid #fff;outline-offset:3px;}
@media(max-width:360px){.guest-session-bar{gap:10px;padding-left:12px;}.guest-session-bar strong{margin-left:4px;}}