/* Shared phone layout: measure available space, not a device name or pixel ratio. */
:root{--phone-view-height:100vh;--phone-view-top:0px;--phone-edge:12px;--phone-dialog-edge:12px}
@supports (height:100dvh){:root{--phone-view-height:100dvh}}

/* Safe areas also apply to landscape phones and unfolded Galaxy screens. */
@media (max-width:1100px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  #equity-screen,#icm-screen,#youtube-screen,body:not(.replay-focus) #replay-screen,
  .bankroll-page main,.challenge-page main,.rewards-page main{
    min-width:0;
    padding-left:max(var(--phone-edge),env(safe-area-inset-left,0px));
    padding-right:max(var(--phone-edge),env(safe-area-inset-right,0px));
  }
  #youtube-screen,body:not(.replay-focus) #replay-screen,.bankroll-page main,.challenge-page main,.rewards-page main{
    padding-top:max(14px,env(safe-area-inset-top,0px));
  }
  .challenge-page main,.rewards-page main{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
  body:not(.compact-tab)>.appbar{
    padding-top:max(10px,env(safe-area-inset-top,0px));
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
  }
  body.grind-page{padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  html body :is(input,select,textarea):not([type=range],[type=checkbox],[type=radio]){font-size:max(16px,1em)}
  #range-dialog .gauge-heading select,#calendar-currency{font-size:16px}

  /* Geometry is shared by ID-styled dialogs; their internal scroll areas stay intact. */
  html body dialog[open]{
    box-sizing:border-box;
    left:env(safe-area-inset-left,0px)!important;right:env(safe-area-inset-right,0px)!important;
    top:env(safe-area-inset-top,0px)!important;bottom:env(safe-area-inset-bottom,0px)!important;
    max-width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - var(--phone-dialog-edge)*2)!important;
    max-height:calc(var(--phone-view-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--phone-dialog-edge)*2)!important;
  }
  /* Safari leaves the layout viewport tall behind its keyboard. Position the
     dialog within the visual viewport only while an editable field has focus. */
  html.phone-keyboard body dialog[open]{
    position:fixed!important;
    top:calc(var(--phone-view-top) + env(safe-area-inset-top,0px))!important;bottom:auto!important;
    margin-top:var(--phone-dialog-edge)!important;margin-bottom:0!important;
  }
  /* Profile is a full-screen view with its own header and body, not an inset sheet.
     Safe areas stay inside its padding; preserve visual-viewport keyboard sizing. */
  html body #brand-dialog.profile-dashboard[open]{
    --phone-dialog-edge:0px;
    left:0!important;right:0!important;top:0!important;bottom:0!important;
    max-width:100vw!important;max-height:var(--phone-view-height)!important;
    height:var(--phone-view-height);
  }
  html.phone-keyboard body #brand-dialog.profile-dashboard[open]{
    top:var(--phone-view-top)!important;bottom:auto!important;
    margin-top:0!important;margin-bottom:0!important;
  }
  html.phone-keyboard body>.calculator-tabs,html.phone-keyboard .bankroll-nav{display:none!important}
  html.phone-keyboard{--app-nav-space:0px}
}

@media (max-width:599px){
  :root{--phone-edge:12px;--app-nav-height:70px;--app-nav-space:calc(var(--app-nav-height) + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-block:16px calc(var(--app-nav-space) + 16px)}
  input:not([type=range]),select,textarea{scroll-margin-block:24px}

  /* Keep all five destinations readable on one line. */
  body>.calculator-tabs :is(button,a),.bankroll-nav a{min-height:54px;font-size:14px;line-height:1.3;padding:4px 1px;gap:4px}
  body>.calculator-tabs :is(button,a) span,.bankroll-nav a span{white-space:nowrap}
  body>.calculator-tabs :is(button,a) svg,.bankroll-nav a svg{width:23px;height:23px}
  .bankroll-nav{height:var(--app-nav-space)}
  body.bankroll-page{padding-bottom:var(--app-nav-space)}
  #equity-screen,#icm-screen,#youtube-screen,body:not(.replay-focus) #replay-screen,.bankroll-page main{
    padding-left:max(var(--phone-edge),env(safe-area-inset-left,0px));
    padding-right:max(var(--phone-edge),env(safe-area-inset-right,0px));
  }
  body:not(.compact-tab)>.appbar{padding-top:max(10px,env(safe-area-inset-top,0px))}

  /* Use the free header space for the logo and keep the profile within reach. */
  #study-screen>.home-account-line{grid-template-columns:minmax(0,1fr) clamp(150px,44vw,220px) minmax(0,1fr);min-height:60px;gap:8px;padding-bottom:8px}
  #study-screen .regulars-home-banner{max-width:none;--home-banner-height:54px;height:var(--home-banner-height)}
  #study-screen .home-profile #edit-photo{width:44px;height:44px}
  #study-screen .poker-quote-card{min-height:0;padding:8px 16px 16px}
  .poker-quote-emblem{width:40px;height:40px;margin:0 auto 6px}
  .poker-quote-reading figcaption{margin-top:8px}
  .study-modes button{font-size:15px;min-height:46px}
  #study-screen .study-content{flex:none;overflow:visible;min-height:auto}
  .study-prompt h2{font-size:18px;line-height:1.6}
  .study-option{font-size:17px;min-height:50px;line-height:1.6;padding:12px}
  #study-submit,.study-practice-nav button,.study-random-nav button{min-height:48px;font-size:16px}

  /* Card artwork scales within its five columns instead of fixing page width. */
  #equity-screen .board-strip{padding:12px;gap:8px}
  #equity-screen .board-tools{position:static;justify-self:end}
  #equity-screen .board-strip .board-slots{width:min(100%,340px);gap:5px}
  #equity-screen .board-strip .playing-card{width:100%;max-width:60px;height:auto;aspect-ratio:54/76}
  #equity-screen .board-strip .board-slot{min-width:0}
  #equity-screen .range-side{min-height:44px}
  #equity-screen .player-stats{gap:6px}
  #equity-screen .player-stats strong{font-size:clamp(24px,6.6vw,29px)}
  #equity-screen .player-stats .equity-value{font-size:clamp(26px,7vw,31px)}
  #clear-board{min-height:44px;padding-inline:12px;font-size:14px}
  #range-dialog #close-dialog,#range-dialog #apply-range{min-height:44px}
  #range-dialog .presets button{min-height:40px}
  #board-dialog .board-picker-header .board-slots{width:100%;max-width:320px;gap:4px}
  #board-dialog .board-slot{min-width:0}
  #board-dialog .board-picker-header .playing-card{width:100%;max-width:56px;height:auto;aspect-ratio:52/74}

  /* Form sheets stay inside the available screen, including a raised keyboard. */
  #account-dialog,#brand-dialog,.bankroll-page dialog,dialog.rp-sheet,#hole-dialog,#board-dialog{
    max-width:calc(100vw - 24px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);
    padding:16px;overscroll-behavior:contain;scroll-padding-block:16px;
  }
  #brand-dialog #brand-preview{width:64px;height:64px}
  #brand-dialog .brand-photo-row{gap:10px}
  #brand-dialog #brand-photo-input{font-size:16px}
  #brand-dialog .brand-actions{display:grid;grid-template-columns:auto minmax(0,1fr)}
  #brand-dialog .brand-actions button{min-width:0;min-height:48px;padding:10px 8px}
  #account-dialog .account-modes button{min-height:46px}
  #account-dialog .account-hint,#brand-dialog #brand-warning{font-size:14px;line-height:1.65}
  #account-dialog header .rg-account-heading{gap:8px}
  #account-dialog .rg-account-heading>img{width:clamp(44px,15vw,64px);height:auto;aspect-ratio:1}
  #account-dialog .rg-account-heading .rg-wordmark{width:clamp(100px,33vw,128px);height:auto;max-width:100%}
  #account-dialog .rg-account-heading>div{min-width:0}

  /* Keep playback and record actions tappable without squeezing the table. */
  body.replay-focus .rp-work-layout{flex:1 0 auto}
  body.replay-focus .rp-workbar button,body.replay-focus .rp-unit-label select,
  body.replay-focus .rp-playback button,body.replay-focus .rp-playback select{min-height:44px}
  body.replay-focus .rp-record-actions{flex-wrap:wrap;gap:6px}
  body.replay-focus .rp-record-actions button{flex:1 1 72px;min-height:44px;padding:8px 6px;font-size:15px}
  body.replay-focus .rp-actions button{min-height:48px;font-size:17px}

  /* Amounts and record controls can wrap without pushing the page sideways. */
  .bankroll-page .heading{flex-wrap:wrap;gap:10px}
  .bankroll-page .heading-actions{margin-left:auto}
  .bankroll-page .totals{gap:10px}
  .bankroll-page .totals>div{min-width:0;padding:14px 12px}
  .bankroll-page .totals strong{font-size:24px;line-height:1.4}
  .bankroll-page .balance strong{font-size:30px}
  .bankroll-page .entry{grid-template-columns:minmax(0,1fr)}
  .bankroll-page .entry-right{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
  .bankroll-page .entry-right .result{white-space:normal;overflow-wrap:anywhere}
  .bankroll-page .entry button{min-height:44px;font-size:15px}
  .bankroll-page .fields{grid-template-columns:minmax(0,1fr);gap:0}
  .bankroll-page dialog :is(input,select,textarea){font-size:16px}
  #chart-dialog .chart-dates{grid-template-columns:minmax(0,1fr);gap:0}
  #chart-dialog .chart-dates>span{display:none}
  .youtube-heading{flex-wrap:wrap}
  .youtube-heading .youtube-channel{margin-left:auto}
  .youtube-levels button{min-height:44px;padding:7px 3px;font-size:16px}

  /* A shorter nine-seat table brings the memo editor closer to the seats. */
  body.grind-page{padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .grind-page .notepad{padding:16px 12px;border-radius:16px}
  .grind-page .notepad header{gap:8px}
  .grind-page .notepad header a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
  .grind-page .memo-table{aspect-ratio:.9;max-width:420px;margin:8px auto 20px}
  .grind-page .table-seat{width:clamp(60px,20%,80px);min-height:68px;padding:6px 4px;gap:3px;border-radius:13px}
  .grind-page .seat-name{font-size:13px}
  .grind-page .note-editor-heading{gap:8px;padding-top:14px}
  .grind-page .note-editor-heading h2{font-size:17px}
  .grind-page .note-editor-actions{gap:6px}
  .grind-page .note-editor-actions button{min-height:44px;padding:8px 10px;font-size:14px}
  .grind-page .player-label-editor{margin-top:12px;padding-bottom:10px}
  .grind-page #player-label-colors{width:100%;gap:2px}
  .grind-page .player-label-swatch{height:46px}
  .grind-page .notepad textarea{font-size:17px;line-height:1.75;min-height:160px;padding:14px 0;margin:10px 0 8px}
  .grind-page .grind-sidebar{grid-template-columns:minmax(0,1fr)}
  .grind-page .note-editor-heading{flex-wrap:wrap}
  .grind-page .note-editor-actions{margin-left:auto}
  .reward-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reward-numbers>div,.reward-identity>div{min-width:0}
  .reward-numbers strong{overflow-wrap:anywhere;font-size:clamp(24px,7vw,30px)}
  .reward-heading,.reward-dialog-actions{flex-wrap:wrap}
  .reward-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .reward-tabs button{min-width:0;overflow-wrap:anywhere}
  .rewards-page dialog{overflow:auto}
  .challenge-page .owner>div{min-width:0;overflow-wrap:anywhere}
}

/* Small iPhones and narrow Galaxy cover screens retain the same controls. */
@media (max-width:359px){
  :root{--phone-edge:8px;--phone-dialog-edge:8px}
  body.study-active #study-screen{--home-edge:8px}
  body>.calculator-tabs :is(button,a),.bankroll-nav a{font-size:13px}
  #study-screen>.home-account-line{grid-template-columns:minmax(48px,1fr) minmax(0,150px) minmax(48px,1fr);gap:6px}
  #study-screen #poker-quote{font-size:21px}
  #study-screen .poker-quote-card{padding:8px 12px 14px}
  .study-modes button{font-size:14px}
  #account-dialog,#brand-dialog{padding:14px}
  #brand-dialog .brand-photo-row{flex-wrap:wrap}
  #brand-dialog .brand-photo-row #brand-photo-input{flex:1 1 160px}
  .grind-page .notepad{padding:14px 10px}
  .grind-page .memo-table{aspect-ratio:.85}
  .grind-page .table-seat{min-height:64px}
  #range-dialog #matrix{gap:2px}
  #range-dialog #matrix button{font-size:11px}
  #range-dialog .dialog-bottom{flex-wrap:wrap}
  #range-dialog #apply-range{margin-left:auto}
  .calendar-toolbar{flex-wrap:wrap;gap:8px}
  .calendar-toolbar label{min-width:0;flex:1}
  #calendar-currency{min-width:0;max-width:135px}
}

/* Landscape phones get a shorter menu and normal document scrolling. */
@media (min-width:600px) and (max-width:1100px) and (max-height:550px) and (orientation:landscape){
  :root{--app-nav-height:60px;--app-nav-space:calc(var(--app-nav-height) + env(safe-area-inset-bottom,0px))}
  body>.calculator-tabs :is(button,a),.bankroll-nav a{min-height:44px;font-size:13px;gap:2px}
  body>.calculator-tabs :is(button,a) svg,.bankroll-nav a svg{width:20px;height:20px}
  .bankroll-nav{height:var(--app-nav-space)}
  body.bankroll-page{padding-bottom:var(--app-nav-space)}
  #study-screen>.home-account-line{min-height:48px;padding-bottom:6px}
  #study-screen .regulars-home-banner{--home-banner-height:44px;height:var(--home-banner-height)}
  #study-screen .home-profile #edit-photo{width:44px;height:44px}
  #study-screen .poker-quote-card{min-height:0;padding:8px 24px 14px}
  body.replay-focus #rp-workspace{height:auto;min-height:100%}
  .grind-page main{grid-template-columns:minmax(0,1fr);max-width:760px}
  .grind-page .memo-table{aspect-ratio:1.45;max-width:560px}
  .grind-page .notepad textarea{min-height:160px}
  .grind-page .grind-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Comments reserve the available height for reading and dock the composer above the keyboard. */
@media(max-width:1100px){
  html body #rp-social-dialog[open]{
    position:fixed;top:auto!important;bottom:0!important;margin:0 auto!important;
    width:100%;max-width:min(580px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;
    max-height:calc(var(--phone-view-height) - env(safe-area-inset-top,0px) - 8px)!important;
    padding:0;border-radius:20px 20px 0 0;border-bottom:0;
  }
  html.phone-keyboard body #rp-social-dialog[open]{
    top:calc(var(--phone-view-top) + env(safe-area-inset-top,0px))!important;bottom:auto!important;
    height:calc(var(--phone-view-height) - env(safe-area-inset-top,0px));
    max-height:calc(var(--phone-view-height) - env(safe-area-inset-top,0px))!important;
  }
  html.phone-keyboard #rp-social-form{padding-bottom:8px}
  html.phone-keyboard #rp-social-header{padding-bottom:6px}
  html.phone-keyboard #rp-social-name{display:none}
}