/* Touch layouts, including iPhone16ProMax browser/fullscreen orientations.
   Keep these overrides after theme.css. Insets come from the browser, not a
   hard-coded device model. The custom properties also permit synthetic QA. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-viewport-height: 100vh;
}
@supports(height:100dvh) {:root {--app-viewport-height:100dvh}}

@media(pointer:coarse) and (max-width:1050px) {
  :root {--app-bar-base:56px;--app-header-height:calc(var(--app-bar-base) + var(--app-safe-top));--reader-header-height:calc(56px + var(--app-safe-top))}
  html {-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--app-header-height) + 12px)}
  body {padding-bottom:var(--app-safe-bottom)}
  .hirono-companion,.companion {display:none!important}
  input,textarea,select {font-size:16px!important}
  button,a,input,textarea,select {-webkit-tap-highlight-color:#98795324}
  .topbar {
    height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;
    padding:calc(6px + var(--app-safe-top)) max(12px,var(--app-safe-right)) 6px max(12px,var(--app-safe-left))!important;
    display:flex!important;flex-wrap:nowrap!important;gap:8px!important;align-items:center;
  }
  .topbar .app-tabs {position:static;transform:none;display:flex;margin:0;gap:3px;min-width:0}
  .topbar .app-tab {min-height:44px;min-width:78px;padding:8px 10px;font-size:11px!important;flex:1;white-space:nowrap}
  .topbar .app-tab:first-child:after {display:none}
  .topbar .top-actions {gap:2px;margin-left:auto;flex:none}
  .topbar .save-label {display:none}
  .topbar .brand {flex:none;min-width:0}
  .topbar .brand-mark {display:none}
  .topbar .brand-text {display:inline;font-size:11px}
  .topbar .icon-btn,.topbar .workspace-button {min-width:44px;min-height:44px;height:44px}
  .topbar .icon-btn {width:44px}
  .topbar .workspace-button {font-size:10px;padding:7px}
  .topbar .cloud-indicator {font-size:9px;padding:4px 5px}
  .page-layout {min-height:calc(var(--app-viewport-height) - var(--app-header-height));padding-left:var(--app-safe-left);padding-right:var(--app-safe-right)}
  .cloud-status-line {padding:9px max(14px,var(--app-safe-right)) 9px max(14px,var(--app-safe-left));font-size:10px;line-height:1.6;gap:9px;flex-wrap:wrap}
  .side-pane {
    position:fixed;top:var(--app-header-height)!important;bottom:auto!important;
    height:calc(var(--app-viewport-height) - var(--app-header-height))!important;
    right:0;width:min(360px,100vw);max-width:100vw;
    padding:16px max(18px,var(--app-safe-right)) calc(20px + var(--app-safe-bottom)) 18px;
    overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .side-toolbar {min-height:44px;gap:8px}
  .side-toolbar button {min-width:44px;min-height:44px}
  .voice-actions {flex-wrap:wrap;gap:8px}
  .voice-actions button,.voice-tools button,.side-pane .primary,.side-pane .soft-button {min-height:44px}
  .side-pane textarea {scroll-margin:16px;min-width:0}
  .tempo-sidebar {display:none}
  .tempo-tabs {flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%}
  .tempo-tabs button {min-height:44px;flex:none;white-space:nowrap}
  .tempo-header button,.task-toolbar button,.task-card-foot select,.task-row select {min-height:44px}
  .task-card-foot {flex-wrap:wrap;gap:7px}
  .hero-nav {overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .hero-nav button {min-height:44px;flex:none}
  .dialog-title button,.dialog-actions button,.settings-actions button,.cloud-account-actions button {min-width:44px;min-height:44px}
  dialog {
    position:fixed;top:var(--app-safe-top);right:var(--app-safe-right);bottom:var(--app-safe-bottom);left:var(--app-safe-left);margin:auto;
    max-height:calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom) - 24px);
    max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px);
    padding:20px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  dialog .field input,dialog .field select {min-height:44px}
  dialog input,dialog select,dialog textarea {scroll-margin:20px}
  .dialog-actions {flex-wrap:wrap;gap:8px}
  .cloud-login {margin:16px max(12px,var(--app-safe-right)) calc(20px + var(--app-safe-bottom)) max(12px,var(--app-safe-left));width:auto;max-width:960px}
  .cloud-login input,.cloud-login button {min-height:44px}
  #cloud-alert {
    left:calc(var(--app-safe-left) + (100vw - var(--app-safe-left) - var(--app-safe-right)) / 2);
    bottom:calc(12px + var(--app-safe-bottom));max-height:calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom) - 24px);
    width:min(580px,calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px));overflow:auto;overscroll-behavior:contain;
  }
  #cloud-alert button {min-height:44px;min-width:44px}
  .toast {bottom:calc(20px + var(--app-safe-bottom));max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px)}
  .ledger-primary,.ledger-soft,.ledger-icon-button,.ledger-export,.ledger-type-filter button,.ledger-search button,.ledger-this-month {min-height:44px;min-width:44px}
  .ledger-icon-button {width:44px}
  .ledger-month-label {min-height:44px;display:grid;place-items:center}
  .ledger-month-picker {gap:3px}
  .ledger-entry-actions {flex-direction:row;gap:0}
  .ledger-entry-actions .ledger-icon-button {width:44px;height:44px}
  .ledger-category-choices button,.ledger-entry-type span {min-height:44px}
  .ledger-filter-category select,.ledger-search input {min-height:44px}
  .ledger-entry-form .ledger-amount-field input {font-size:34px!important}
  .ledger-search button {padding:5px}
  .cr-reader-shell {height:var(--app-viewport-height);bottom:auto}
  .cr-reader-topbar {
    height:var(--reader-header-height);min-height:var(--reader-header-height);gap:4px;
    padding:var(--app-safe-top) max(8px,var(--app-safe-right)) 0 max(8px,var(--app-safe-left));
  }
  .cr-reader-topbar button {min-width:44px;min-height:44px;flex:none;padding:6px!important}
  .cr-reader-back {width:44px;justify-content:center}
  .cr-reader-back span {display:none}
  .cr-reader-window-title {display:none}
  .cr-reader-tools {min-width:0;flex:1;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;white-space:nowrap}
  .cr-reader-tools button span,.cr-reader-tools button[data-reader-action=focus] span {display:none}
  .cr-reader-tools .cr-reader-tool-separator {display:none}
  .cr-reader-scroll {height:calc(100% - var(--reader-header-height));padding-left:var(--app-safe-left);padding-right:var(--app-safe-right);scroll-padding-bottom:calc(25px + var(--app-safe-bottom));-webkit-overflow-scrolling:touch}
  .cr-reader-page {padding-bottom:calc(65px + var(--app-safe-bottom))}
  .cr-reader-progress-rail {right:calc(8px + var(--app-safe-right));top:calc(88px + var(--app-safe-top));bottom:calc(38px + var(--app-safe-bottom));width:30px;gap:7px}
  .cr-reader-resume {min-width:44px;min-height:44px;font-size:18px!important;padding:6px!important;margin:0}
  .cr-reader-rail-track {min-height:38px;width:20px}
  .cr-reader-rail-track input {width:44px;left:-12px;right:auto}
  .cr-reader-floating-panel {top:calc(var(--reader-header-height) + 8px);max-height:calc(var(--app-viewport-height) - var(--reader-header-height) - var(--app-safe-bottom) - 24px);overflow:auto;overscroll-behavior:contain}
  .cr-reader-outline {left:calc(12px + var(--app-safe-left));max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px)}
  .cr-reader-annotations {right:calc(18px + var(--app-safe-right));max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 36px)}
  .cr-reader-floating-title {position:sticky;top:0;background:#f8faf2;z-index:2}
  .cr-reader-floating-panel button {min-height:44px;min-width:44px}
  .cr-reader-annotation-list,.cr-reader-outline nav {max-height:none;overflow:visible}
  .cr-reader-comment-form {
    top:auto!important;left:auto!important;right:max(12px,var(--app-safe-right));bottom:calc(12px + var(--app-safe-bottom));
    width:360px;max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px);
    max-height:calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom) - 24px);
    overflow:auto;overscroll-behavior:contain;padding:15px;
  }
  .cr-reader-comment-form textarea,.cr-reader-comment-form select {font-size:16px;min-height:44px}
  .cr-reader-comment-form button {min-height:44px;min-width:44px}
  .cr-reader-comment-form>div {flex-wrap:wrap;gap:7px}
  .cr-reader-selection {
    top:auto!important;left:calc(var(--app-safe-left) + (100vw - var(--app-safe-left) - var(--app-safe-right)) / 2)!important;transform:translateX(-50%);
    bottom:calc(14px + var(--app-safe-bottom));max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px);gap:6px;padding:8px;
  }
  .cr-reader-selection-caption {display:none}
  .cr-reader-selection>button[data-reader-color] {width:44px;height:44px;min-width:44px;min-height:44px}
  .cr-reader-selection>button:last-child {min-width:66px;min-height:44px}
  .cr-reader-focus-exit {min-height:44px;min-width:44px;left:max(8px,var(--app-safe-left));bottom:calc(8px + var(--app-safe-bottom))!important}
  .cr-reader-status {bottom:calc(8px + var(--app-safe-bottom));max-width:66%}
}

@media(pointer:coarse) and (max-width:760px) {
  :root {--app-bar-base:100px}
  .topbar {display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px 44px;gap:2px!important;padding-top:calc(5px + var(--app-safe-top))!important;padding-bottom:5px!important}
  .topbar .brand {grid-column:1;grid-row:1}
  .topbar .top-actions {grid-column:2;grid-row:1}
  .topbar .app-tabs {grid-column:1/-1;grid-row:2;width:100%;gap:4px}
  .topbar .app-tab {min-width:0;min-height:44px}
  .ledger-summary {grid-template-columns:1fr}
  .ledger-monthbar {flex-wrap:wrap;gap:6px}
  .ledger-month-count {margin-left:auto}
}
@media(pointer:coarse) and (max-width:400px) {
  .topbar {grid-template-columns:1fr;padding-left:max(8px,var(--app-safe-left))!important;padding-right:max(8px,var(--app-safe-right))!important}
  .topbar .brand {display:none}
  .topbar .top-actions {grid-column:1;justify-content:space-between;width:100%;margin:0;gap:2px}
  .topbar .cloud-indicator {margin-right:auto}
  .topbar .workspace-button {order:-1}
  .ledger-entry {flex-wrap:wrap}
  .ledger-entry-copy {min-width:82px}
  .ledger-entry-amount {margin-left:auto}
  .ledger-entry-actions {margin-left:auto}
}
@media(pointer:coarse) and (min-width:761px) and (max-width:1050px) {
  .topbar .brand {display:none}
  .topbar .app-tabs {flex:1;max-width:360px}
  .topbar .app-tab {min-width:0}
  .side-pane {width:360px}
  .cloud-login {min-height:0;grid-template-columns:minmax(180px,.7fr) minmax(0,1fr)}
  .cloud-login form {padding:25px}
}
@media(pointer:coarse) and (max-height:480px) and (max-width:1050px) {
  .cr-reader-progress-rail {top:calc(71px + var(--app-safe-top));bottom:calc(20px + var(--app-safe-bottom));gap:3px}
  .cr-reader-progress-label {height:13px;font-size:8px}
  .cr-reader-rail-bottom {display:none}
  .cr-reader-page {padding-top:28px}
  .cr-reader-comment-form textarea {min-height:64px;max-height:120px}
  dialog {padding:16px}
  .dialog-title {margin-bottom:14px}
  .cloud-login {margin-top:12px}
  .login-art {min-height:0!important;height:auto!important}
}

/* Five top-level modules stay accessible on small windows. */
@media(max-width:760px) {
  :root {--app-bar-base:100px;--app-header-height:calc(var(--app-bar-base) + var(--app-safe-top))}
  .topbar {display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px 44px;height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;gap:2px!important;padding:calc(5px + var(--app-safe-top)) max(10px,var(--app-safe-right)) 5px max(10px,var(--app-safe-left))!important}
  .topbar .brand {grid-column:1;grid-row:1;min-width:0}
  .topbar .top-actions {grid-column:2;grid-row:1}
  .topbar .app-tabs {position:static;transform:none;margin:0;grid-column:1/-1;grid-row:2;display:flex;width:100%;gap:2px;min-width:0}
  [data-theme=hirono] .topbar .app-tab {min-width:0;min-height:44px;padding:4px;gap:4px;font-size:10px!important;flex:1;white-space:nowrap}
  .topbar .nav-character {width:22px;height:29px}
  .topbar .icon-btn,.topbar .workspace-button {min-width:44px;min-height:44px}
  .topbar .icon-btn {width:44px;height:44px}
  .side-pane {top:var(--app-header-height)!important}
}
@media(max-width:400px) {
  .topbar {grid-template-columns:1fr}
  .topbar .brand {display:none!important}
  .topbar .top-actions {grid-column:1;justify-content:space-between;width:100%;margin:0;gap:2px}
}

/* Five full Chinese labels stay legible on narrow screens. */
@media(max-width:400px) {
  :root {--app-bar-base:108px}
  .topbar {grid-template-rows:44px 52px}
  [data-theme=hirono] .topbar .app-tab {flex-direction:column;justify-content:center;min-height:52px;padding:3px 2px;gap:2px;font-size:11px!important;line-height:1.2}
  .topbar .nav-character {width:22px;height:25px;flex:none}
}