/* The Case File: phone layout (portrait and landscape). Loaded after app.css.
   "Phone" = width 760px or less, or height 500px or less (a phone held sideways). */

/* report answers: game-style round buttons (all screens) */
.opt input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:3px 0 0;border-radius:50%;border:2px solid var(--line2);background:#0e0c0a;display:grid;place-content:center;cursor:pointer}
.opt input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);transform:scale(0);transition:transform .12s}
.opt input[type=radio]:checked{border-color:var(--amber)}
.opt input[type=radio]:checked::before{transform:scale(1)}
.opt input[type=radio]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* parts that only phones use */
.ph-only{display:none!important}
.more-btn,.moresheet{display:none}
.toast{cursor:pointer}
.broot{position:relative}
.badge.dotb{min-width:9px;width:9px;height:9px;padding:0;top:7px;right:16px;font-size:0}

@media (max-width:760px), (max-height:500px){
  .no-ph{display:none!important}
  .ph-only{display:inline-flex!important}
  /* iPhone zooms into text boxes under 16px */
  .input{font-size:16px}

  /* top bar: room for the case name */
  .top .ttl{font-size:15px}
  .top .chip{padding:5px 8px}
  .top [data-r="net"]{border:0;padding:0 2px}
  .top [data-r="room"]{display:none}
  .top .btn.sm{padding:6px 11px}

  /* app bar: 4 main apps + More */
  .dock .sec{display:none}
  .more-btn{display:flex}
  .app-btn{font-size:10.5px;letter-spacing:-.02em}
  .ms-code{grid-column:1/-1;font-size:13px;color:var(--muted);text-align:center;padding:2px 0 6px;border-bottom:1px solid var(--line)}
  .ms-code b{color:var(--ink);font-weight:400}
  .app-btn .lbl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .moresheet:not([hidden]){display:grid;position:fixed;z-index:120;left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px;
    background:#17130f;border:1px solid var(--line2);border-radius:16px;box-shadow:0 -10px 40px rgba(0,0,0,.6);animation:tin .18s}
  .moresheet .app-btn{min-width:0;padding:10px 2px}

  /* toasts: top of the screen, one at a time, tap to close */
  .toasts{top:calc(60px + env(safe-area-inset-top));bottom:auto;left:10px;right:10px;max-width:none}

  /* interviews: answers grow with the page, ask bar stays at the bottom */
  .iv{grid-template-columns:minmax(0,1fr)}.iv>div{min-width:0}
  .transcript{min-height:120px;max-height:none;padding:16px 18px}
  .transcript p{scroll-margin-bottom:140px}
  .askbar{position:sticky;bottom:0;z-index:5;margin:0 -16px;padding:10px 16px 10px;background:linear-gradient(rgba(18,15,12,.92),var(--bg) 30%)}
  .askbar .ask{margin-top:0}
  .askbar .words{flex-wrap:nowrap;overflow-x:auto;margin-top:10px;padding-bottom:4px}
  .askbar .word{flex:none;white-space:nowrap}

  /* phone app: the whole keypad fits on the screen */
  .phone{width:min(330px,100%,calc((100dvh - 300px)*.529));aspect-ratio:9/17;margin:8px auto 8px;padding:9px;border-radius:40px;container-type:inline-size}
  .ph-screen{border-radius:32px}
  .ph-status{height:36px;padding:10px 18px 0;font-size:12px}
  .ph-island{width:30cqw;height:22px;top:7px}
  .ph-padlock{margin-top:6px}.ph-padlock svg{width:22px;height:22px}
  .ph-title{margin-top:6px;font-size:15px}
  .phone .pinrow{margin:10px 0 2px}
  .phone .pad{grid-template-columns:repeat(3,min(68px,24cqw));gap:min(12px,3cqw) min(20px,7cqw)}
  .phone .pad button{width:min(68px,24cqw);height:min(68px,24cqw)}
  .phone .pad button b{font-size:min(28px,9cqw)}
  .phone .pad button small{font-size:min(9px,3cqw)}
  .phone .pad .ph-text,.phone .pad button.ph-text{font-size:min(15px,4.6cqw)}
  .ph-date{margin-top:14px}.ph-date b{font-size:min(64px,20cqw)}
  .ph-apps{margin:24px 0 auto;grid-template-columns:repeat(3,min(72px,26cqw));gap:16px min(20px,5cqw)}
  .ph-ic{width:min(60px,21cqw);height:min(60px,21cqw)}

  /* board */
  .broot.bphone .btools{flex-wrap:nowrap;gap:6px;padding:8px 10px}
  .broot.bphone .btools>.btn{flex:none;white-space:nowrap}
  .broot.bphone .btools .btn.sm{padding:6px 11px;min-height:36px;gap:5px}
  .broot.bphone .swbtn i{display:block;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
  .broot.bphone .sw{display:none}
  .broot.bphone.swopen .sw{display:flex;position:absolute;top:calc(100% + 6px);left:10px;gap:10px;padding:8px 10px;background:#1e1a15;border:1px solid var(--line2);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
  .broot.bphone .sw button{width:30px;height:30px}
  .bmenu:not([hidden]){position:absolute;top:calc(100% + 6px);right:10px;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;background:#1e1a15;border:1px solid var(--line2);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
  .broot.bphone .tray{position:absolute;left:0;right:0;bottom:0;z-index:40;display:none!important;border-top:1px solid var(--line2);border-bottom:0;box-shadow:0 -10px 30px rgba(0,0,0,.6)}
  .broot.bphone.trayopen .tray{display:flex!important}
  .broot.bphone .tray .ev{width:110px}
  .mini.bar{flex-wrap:wrap;justify-content:center;row-gap:4px;border-radius:18px}
  .mini button{white-space:nowrap}
  .broot.bphone .cork .hintmsg{align-items:flex-start;justify-content:flex-start;padding:70px 60px}
  .broot.bphone .cork .hintmsg div{font-size:44px;max-width:740px}
  .broot.bphone .pin{width:34px;height:34px;margin-left:-17px;top:-16px}
  .broot.bphone .pin::after{inset:-16px}
}

/* portrait phones */
@media (max-width:760px) and (min-height:501px){
  .game{grid-template-rows:52px minmax(0,1fr) calc(64px + env(safe-area-inset-bottom))}
  .dock{overflow:hidden;justify-content:space-around;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .app-btn{flex:1 1 0;min-width:0}
}

/* phones held sideways */
@media (max-height:500px) and (orientation:landscape){
  .game{grid-template-columns:calc(66px + env(safe-area-inset-left)) minmax(0,1fr);grid-template-rows:44px minmax(0,1fr)}
  .top{grid-column:1/-1;grid-row:1;gap:8px;padding:0 calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left))}
  .top .ttl{min-width:0;flex:1 1 auto}
  .top [data-r="room"]{display:inline-flex}
  .dock{grid-row:2;grid-column:1;flex-direction:column;justify-content:space-around;border-top:0;border-right:1px solid var(--line);padding:4px 4px 4px calc(4px + env(safe-area-inset-left));overflow:hidden}
  .app-btn{min-width:0;padding:5px 0;font-size:9.5px;letter-spacing:-.03em}
  .iv{grid-template-columns:210px minmax(0,1fr)}
  .people{flex-direction:column;overflow:visible}
  .panel{grid-row:2;grid-column:2}
  .pane{padding:12px calc(16px + env(safe-area-inset-right)) 24px 16px}
  .pane h2{font-size:22px}
  .pane .sub{margin-bottom:12px}
  .moresheet:not([hidden]){left:calc(74px + env(safe-area-inset-left));right:auto;top:50px;bottom:auto;width:min(420px,calc(100vw - 100px))}
  .toasts{top:52px;left:auto;right:calc(10px + env(safe-area-inset-right));max-width:min(380px,60vw)}
  .transcript p{scroll-margin-bottom:120px}

  /* start menu: buttons on screen without scrolling */
  .menu{padding:5vh 16px 24px}
  .logo{font-size:40px}
  .logo small{margin-top:8px;font-size:12px}
  .menu .lead{margin:10px auto 16px;max-width:600px;font-size:14px}
  .menu-list{display:grid;grid-template-columns:1fr 1fr;max-width:560px}
  .menu-list .btn{min-height:46px;white-space:nowrap;font-size:13.5px;padding:9px 12px}

  /* evidence window: photo left, text right */
  .modal{padding:10px}
  .mbox{max-height:calc(100dvh - 20px)}
  .mbox:has(> .mimg){display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-auto-rows:min-content;overflow:auto}
  .mbox:has(> .mimg) > .x{position:absolute;top:10px;right:10px;margin:0;float:none}
  .mbox:has(> .mimg) > .mimg{grid-column:1;grid-row:1/span 2;align-items:center;position:sticky;top:0;align-self:start;height:calc(100dvh - 22px)}
  .mbox:has(> .mimg) .mimg img{max-height:calc(100dvh - 22px)}
  .mbox:has(> .mimg) > .mdoc{grid-column:2;padding:52px 18px 0 18px}
  .mbox:has(> .mimg) > .mtext{grid-column:2;padding-right:58px}
  .mbox:has(> .mdoc) > .mdoc + .mtext{padding-right:18px}

  /* phone app: lying on its side, keypad next to the code dots */
  .pane:has(> .phone){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-content:start}
  .pane:has(> .phone) > h2,.pane:has(> .phone) > .sub{grid-column:1}
  .pane:has(> .phone) > .phone{grid-column:2;grid-row:1/span 3}
  .phone{aspect-ratio:19.3/9;width:min(560px,calc(100vw - 66px - 260px),calc((100dvh - 44px - 36px)*2.14));margin:0;padding:8px;border-radius:36px;container-type:size}
  .ph-screen{border-radius:28px}
  .ph-btn,.ph-island,.ph-homebar{display:none}
  .ph-status{height:22px;padding:4px 26px 0;font-size:11px}
  .ph-lock{display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:auto 1fr auto auto auto 1fr;grid-template-areas:"st st" ". pad" "lk pad" "ti pad" "pr pad" "ms pad";align-items:center;justify-items:center}
  .ph-lock>.ph-status{grid-area:st}.ph-lock>.ph-padlock{grid-area:lk;margin:0}.ph-lock>.ph-title{grid-area:ti;margin:4px 0 0}
  .ph-lock>.pinrow{grid-area:pr}.ph-lock>.lockmsg{grid-area:ms}.ph-lock>.pad{grid-area:pad;margin:0;align-self:center;padding:0}
  .phone .pad{grid-template-columns:repeat(3,min(58px,18cqh));gap:min(8px,2.4cqh) min(16px,4cqw)}
  .phone .pad button{width:min(58px,18cqh);height:min(58px,18cqh)}
  .phone .pad button b{font-size:min(24px,7.5cqh)}
  .phone .pad button small{display:none}
  .phone .pad .ph-text,.phone .pad button.ph-text{font-size:min(13px,5cqh)}
  .ph-home{display:grid;grid-template-columns:1fr 1.3fr;grid-template-rows:auto 1fr;grid-template-areas:"st st" "dt ap";align-items:center;justify-items:center}
  .ph-home>.ph-status{grid-area:st}.ph-home>.ph-date{grid-area:dt;margin:0}.ph-home>.ph-apps{grid-area:ap;margin:0}
  .ph-date b{font-size:min(54px,22cqh)}
  .ph-apps{grid-template-columns:repeat(3,min(64px,26cqh));gap:10px 14px}
  .ph-ic{width:min(52px,20cqh);height:min(52px,20cqh)}
}