/* PCPR30 runner fidelity layer — derived from the production study runner behavior.
   Desktop keeps the vertical P/Q/A rail + numeric history palette.
   Touch/mobile prioritizes reading width and converts both rails to compact horizontal navigation. */

/* Only the three PCPR30 study destinations remain in the mode rail. */
.pcpr-mode-rail{gap:5px}
.pcpr-mode-rail button{box-shadow:none}

/* Current position is independent from study history. */
.pcpr-qpalette button.active{
  outline:2px solid #244f6c!important;
  outline-offset:1px!important;
}
.pcpr-qpalette button.active.ok{
  background:#eef7f0!important;
  border-color:#a9cfb5!important;
  color:#326348!important;
  outline-color:#417c5b!important;
}
.pcpr-qpalette button.active.bad{
  background:#fbefef!important;
  border-color:#ddb3b6!important;
  color:#8a4349!important;
  outline-color:#a5545a!important;
}
.pcpr-qpalette button.review{position:relative}
.pcpr-qpalette button.review::after{
  content:'*';position:absolute;right:1px;top:-5px;
  font:900 10px/1 Arial;color:#a77b17;pointer-events:none
}

/* Canonical question reading density. */
.pcpr-paper{max-width:none}
.pcpr-stem{
  font-size:17px!important;
  line-height:1.58!important;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
.pcpr-option{
  font-size:16px!important;
  line-height:1.46!important;
  padding:10px 12px!important;
  gap:9px!important;
}
.pcpr-option b,.pcpr-option span{line-height:1.46}
.pcpr-feedback{font-size:15px!important;line-height:1.56!important}
.pcpr-qnav button{min-height:34px!important}

@media (min-width:620px) and (hover:hover) and (pointer:fine){
  #app:has(.pcpr-unit-shell){padding-top:8px}
  .pcpr-unit-shell{
    width:calc(100% - 22px)!important;
    max-width:none!important;
    margin:0 11px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .pcpr-mode-rail{
    position:sticky!important;
    top:8px!important;
    align-self:start!important;
    padding:6px 5px!important;
    border-radius:8px!important;
  }
  .pcpr-mode-rail button{
    width:27px!important;height:29px!important;
    font-size:9px!important;border-radius:5px!important;
  }
  .pcpr-unitbar{margin-bottom:4px!important}
  .pcpr-content-frame{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:6px!important;
  }
  .pcpr-qpalette{
    position:sticky!important;
    top:8px!important;
    align-self:start!important;
    max-height:calc(100vh - 16px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:5px 4px!important;
    scrollbar-width:none;
  }
  .pcpr-qpalette::-webkit-scrollbar{display:none}
  .pcpr-qpalette button{
    width:28px!important;height:25px!important;flex:0 0 25px!important;
    font-size:9px!important;
  }
  .pcpr-paper{padding:13px 15px 14px!important}
  .pcpr-paper-kicker{font-size:8px!important}
  .pcpr-paper-meta{font-size:8px!important}
  .pcpr-qtitle strong{font-size:17px!important}
  .pcpr-stem{padding:11px 13px!important}
  .pcpr-options{gap:6px!important;margin:8px 0!important}
}

/* Touch/mobile: do not squeeze the paper between two vertical rails. */
@media (max-width:619px), (hover:none) and (pointer:coarse){
  #app{padding:6px 0 30px!important}
  .pcpr-unit-shell{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .pcpr-mode-rail{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:6px 8px!important;
    border-left:0!important;border-right:0!important;border-radius:0!important;
    background:rgba(245,247,245,.96)!important;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
  }
  .pcpr-mode-rail button{
    flex:0 0 36px!important;
    width:36px!important;height:32px!important;
    font-size:10px!important;
  }
  .pcpr-unit-main{width:100%!important}
  .pcpr-unitbar{
    grid-template-columns:auto auto minmax(0,1fr) auto!important;
    gap:5px!important;
    margin:4px 6px!important;
    padding:5px!important;
  }
  .pcpr-unitbar .fgvplus{display:none!important}
  .pcpr-unitbar button,.pcpr-unitbar .chip{padding:0 6px!important;font-size:7.5px!important}
  .pcpr-unitbar select{font-size:8px!important}
  .pcpr-content-frame{
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
  }
  .pcpr-qpalette{
    position:sticky!important;
    top:44px!important;
    z-index:25!important;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    max-height:none!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:5px 8px!important;
    border-left:0!important;border-right:0!important;border-radius:0!important;
    scrollbar-width:none!important;
    background:rgba(245,247,245,.97)!important;
  }
  .pcpr-qpalette::-webkit-scrollbar{display:none}
  .pcpr-qpalette button{
    flex:0 0 31px!important;
    width:31px!important;height:27px!important;
    font-size:9px!important;
  }
  .pcpr-paper{
    width:100%!important;
    border-left:0!important;border-right:0!important;border-radius:0!important;
    padding:12px 12px 16px!important;
  }
  .pcpr-paper-kicker{font-size:7.4px!important;line-height:1.3!important}
  .pcpr-paper-meta{font-size:7.6px!important;line-height:1.3!important;gap:6px!important}
  .pcpr-qtitle strong{font-size:16px!important}
  .pcpr-stem{
    padding:10px 7px 11px!important;
    font-size:17px!important;
    line-height:1.54!important;
  }
  .pcpr-options{gap:5px!important}
  .pcpr-option{
    grid-template-columns:18px 24px minmax(0,1fr)!important;
    padding:9px 10px!important;
    gap:8px!important;
    font-size:16px!important;
    line-height:1.42!important;
  }
  .pcpr-feedback{font-size:15px!important;line-height:1.5!important}
  .pcpr-qnav{gap:5px!important}
  .pcpr-qnav button{min-width:0!important;padding:7px 5px!important;font-size:9px!important}
  .pcpr-lesson-paper{border-left:0!important;border-right:0!important;border-radius:0!important;padding-left:18px!important;padding-right:18px!important}
}