/*
 * R3.5.158 — TABLET SECURE TEST SUPER HARD RESET
 * Final authority for touch-primary tablets (iPad / Android tablet class).
 * This file loads AFTER desktop.css, mobile.css and device-confirm-hard-reset.css.
 * It intentionally owns only the secure Memorization + Recall stages.
 */

body.gmc-tablet-secure.test-mode,
html.gmc-tablet-secure body.test-mode{
  overscroll-behavior:none!important;
  overflow:hidden!important;
}

body.gmc-tablet-secure.test-mode #screen-memorize,
body.gmc-tablet-secure.test-mode #screen-recall{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:var(--visible-height,100dvh)!important;
  min-height:0!important;
  max-height:var(--visible-height,100dvh)!important;
  margin:0!important;
  padding:0 0 30px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#06142d,#0b2b58)!important;
  justify-content:stretch!important;
}

body.gmc-tablet-secure.test-mode #screen-memorize .test-shell,
body.gmc-tablet-secure.test-mode #screen-recall .test-shell{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  height:calc(var(--visible-height,100dvh) - 30px)!important;
  min-height:0!important;
  max-height:calc(var(--visible-height,100dvh) - 30px)!important;
  margin:0!important;
  padding:6px 10px 5px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:56px 42px 50px minmax(0,1fr) 48px!important;
  gap:5px!important;
}

/* Tablet top bar: no desktop action overlay, no desktop reserved right gutter. */
body.gmc-tablet-secure.test-mode #screen-memorize .stage-topbar,
body.gmc-tablet-secure.test-mode #screen-recall .stage-topbar{
  grid-row:1!important;
  position:static!important;
  min-height:56px!important;
  height:56px!important;
  padding:2px 4px!important;
  display:grid!important;
  grid-template-columns:minmax(116px,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-logo-pair,
body.gmc-tablet-secure.test-mode #screen-recall .stage-logo-pair{
  width:126px!important;
  height:50px!important;
  display:grid!important;
  place-items:center start!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-logo,
body.gmc-tablet-secure.test-mode #screen-recall .stage-logo{
  width:126px!important;
  height:48px!important;
  max-width:126px!important;
  max-height:48px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-meta,
body.gmc-tablet-secure.test-mode #screen-recall .stage-meta{
  margin:0!important;
  height:52px!important;
  display:flex!important;
  align-items:stretch!important;
  gap:6px!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-clock,
body.gmc-tablet-secure.test-mode #screen-recall .stage-clock{
  min-width:118px!important;
  width:118px!important;
  height:52px!important;
  min-height:52px!important;
  padding:4px 8px!important;
  border-radius:10px!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-attempt-box,
body.gmc-tablet-secure.test-mode #screen-recall .stage-attempt-box{
  min-width:68px!important;
  width:68px!important;
  height:52px!important;
  min-height:52px!important;
  padding:4px 6px!important;
  border-radius:10px!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-clock strong,
body.gmc-tablet-secure.test-mode #screen-recall .stage-clock strong{font-size:23px!important;line-height:1!important;}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-attempt-box strong,
body.gmc-tablet-secure.test-mode #screen-recall .stage-attempt-box strong{font-size:13px!important;line-height:1.05!important;}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-clock small,
body.gmc-tablet-secure.test-mode #screen-recall .stage-clock small,
body.gmc-tablet-secure.test-mode #screen-memorize .stage-attempt-box small,
body.gmc-tablet-secure.test-mode #screen-recall .stage-attempt-box small{font-size:8px!important;line-height:1!important;}

/* Tablet row navigator: one active 20-word row at a time. */
body.gmc-tablet-secure.test-mode #screen-memorize .block-tabs,
body.gmc-tablet-secure.test-mode #screen-recall .block-tabs{
  grid-row:2!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  overflow:visible!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .block-tab,
body.gmc-tablet-secure.test-mode #screen-recall .block-tab{
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:3px 7px!important;
  border-radius:9px!important;
  font-size:12px!important;
  line-height:1.05!important;
  touch-action:manipulation!important;
}
body.gmc-tablet-secure.test-mode .block-tab span{font-size:12px!important;line-height:1.05!important;}
body.gmc-tablet-secure.test-mode .block-tab small{font-size:8px!important;line-height:1!important;}

/* Compact tablet instruction/status row. */
body.gmc-tablet-secure.test-mode #screen-memorize .stage-info,
body.gmc-tablet-secure.test-mode #screen-recall .stage-info{
  grid-row:3!important;
  width:100%!important;
  min-width:0!important;
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:5px 9px!important;
  border-radius:10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  gap:8px!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-info-main,
body.gmc-tablet-secure.test-mode #screen-recall .stage-info-main{
  min-width:0!important;
  flex:1 1 auto!important;
  gap:6px!important;
  font-size:12px!important;
  line-height:1.15!important;
  text-align:left!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-info-icon,
body.gmc-tablet-secure.test-mode #screen-recall .stage-info-icon{
  width:26px!important;
  height:26px!important;
  flex:0 0 26px!important;
  font-size:12px!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-info-line,
body.gmc-tablet-secure.test-mode #screen-recall .stage-info-line{
  display:inline!important;
  margin:0!important;
  font-size:12px!important;
  line-height:1.15!important;
  white-space:normal!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-info-line+.stage-info-line,
body.gmc-tablet-secure.test-mode #screen-recall .stage-info-line+.stage-info-line{margin-left:.35em!important;}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-security,
body.gmc-tablet-secure.test-mode #screen-recall .stage-security{
  flex:0 0 auto!important;
  display:flex!important;
  gap:7px!important;
  align-items:center!important;
  font-size:9px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-security>span:nth-child(2),
body.gmc-tablet-secure.test-mode #screen-recall .stage-security>span:nth-child(2){display:none!important;}

/* White workspace. Tablet MUST use #wordGrid, never the 3-column desktop host. */
body.gmc-tablet-secure.test-mode #screen-memorize .words-card,
body.gmc-tablet-secure.test-mode #screen-recall .words-card{
  grid-row:4!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:7px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#fff!important;
  color:#10213d!important;
  box-sizing:border-box!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize #desktopWordRows{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize #wordGrid{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(10,minmax(0,1fr))!important;
  grid-auto-flow:column!important;
  gap:4px 8px!important;
  overflow:hidden!important;
  align-content:stretch!important;
  color:#10213d!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize #wordGrid>.word{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  padding:2px 7px!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:5px!important;
  border:1px solid #dce5f1!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#10213d!important;
  font-size:clamp(15px,2.1vw,21px)!important;
  line-height:1.08!important;
  font-weight:850!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize #wordGrid>.word>.idx{
  color:#62758f!important;
  font-size:clamp(11px,1.45vw,15px)!important;
  font-weight:900!important;
  text-align:center!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize #wordGrid>.word>span:last-child{
  min-width:0!important;
  color:#10213d!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Recall tablet authority: current 20-word row, two touch-friendly columns. */
body.gmc-tablet-secure.test-mode #screen-recall #recallGrid{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:1px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(42px,1fr)!important;
  gap:4px 8px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  align-content:start!important;
}
body.gmc-tablet-secure.test-mode #screen-recall .recall-item{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:5px!important;
  min-width:0!important;
  min-height:42px!important;
}
body.gmc-tablet-secure.test-mode #screen-recall .recall-item .idx{
  min-height:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  font-size:12px!important;
}
body.gmc-tablet-secure.test-mode #screen-recall .recall-answer{
  display:block!important;
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:6px 9px!important;
  border-radius:8px!important;
  font-size:14px!important;
  line-height:1.2!important;
  text-align:left!important;
  overflow:hidden!important;
  resize:none!important;
  box-sizing:border-box!important;
}

/* Tablet action row is inside the grid. No desktop top-right absolute action. */
body.gmc-tablet-secure.test-mode #screen-memorize .stage-bottom,
body.gmc-tablet-secure.test-mode #screen-recall .stage-bottom{
  grid-row:5!important;
  position:static!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:0!important;
  background:transparent!important;
  overflow:visible!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-bottom-item,
body.gmc-tablet-secure.test-mode #screen-recall .stage-bottom-item{display:none!important;}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-submit,
body.gmc-tablet-secure.test-mode #screen-recall .stage-submit{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:min(330px,48vw)!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-submit .btn,
body.gmc-tablet-secure.test-mode #screen-recall .stage-submit .btn{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 12px!important;
  border-radius:9px!important;
  font-size:13px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  touch-action:manipulation!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .stage-submit small,
body.gmc-tablet-secure.test-mode #screen-recall .stage-submit small,
body.gmc-tablet-secure.test-mode #screen-recall #recallSubmitStatus{display:none!important;}

/* Compact edge footer; the workspace owns all remaining height. */
body.gmc-tablet-secure.test-mode #screen-memorize .secure-stage-footer,
body.gmc-tablet-secure.test-mode #screen-recall .secure-stage-footer{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:2400!important;
  width:100vw!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:4px 8px!important;
  border-radius:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .secure-stage-footer-desktop,
body.gmc-tablet-secure.test-mode #screen-recall .secure-stage-footer-desktop{
  display:inline!important;
  font-size:8px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body.gmc-tablet-secure.test-mode #screen-memorize .secure-stage-footer-mobile,
body.gmc-tablet-secure.test-mode #screen-recall .secure-stage-footer-mobile{display:none!important;}

/* Keyboard: preserve the recall editor instead of triggering a false secure-exit layout. */
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .stage-topbar,
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .stage-info{display:none!important;}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .test-shell{
  height:var(--visible-height,100dvh)!important;
  max-height:var(--visible-height,100dvh)!important;
  padding:5px 8px!important;
  grid-template-rows:38px minmax(0,1fr) 44px!important;
  gap:4px!important;
}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .block-tabs{grid-row:1!important;height:38px!important;}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .block-tab{height:38px!important;min-height:38px!important;}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .words-card{grid-row:2!important;}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .stage-bottom{grid-row:3!important;height:44px!important;min-height:44px!important;}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .stage-submit{height:44px!important;min-height:44px!important;}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .stage-submit .btn{height:42px!important;min-height:42px!important;}
body.gmc-tablet-secure.keyboard-open.test-mode[data-screen="recall"] #screen-recall .secure-stage-footer{display:none!important;}

/* Short tablet landscape (common 4:3 old iPad viewport). */
@media (max-height:700px){
  body.gmc-tablet-secure.test-mode #screen-memorize .test-shell,
  body.gmc-tablet-secure.test-mode #screen-recall .test-shell{
    grid-template-rows:50px 38px 44px minmax(0,1fr) 44px!important;
    gap:4px!important;
    padding:4px 8px!important;
  }
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-topbar,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-topbar{height:50px!important;min-height:50px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-logo,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-logo{width:112px!important;height:42px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-meta,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-meta{height:46px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-clock,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-clock,
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-attempt-box,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-attempt-box{height:46px!important;min-height:46px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .block-tabs,
  body.gmc-tablet-secure.test-mode #screen-recall .block-tabs{height:38px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .block-tab,
  body.gmc-tablet-secure.test-mode #screen-recall .block-tab{height:38px!important;min-height:38px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-info,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-info{height:44px!important;min-height:44px!important;padding:4px 8px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-info-line,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-info-line{font-size:10.5px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize #wordGrid>.word{font-size:clamp(14px,2vw,18px)!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-bottom,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-bottom{height:44px!important;min-height:44px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-submit,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-submit{height:44px!important;min-height:44px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-submit .btn,
  body.gmc-tablet-secure.test-mode #screen-recall .stage-submit .btn{height:42px!important;min-height:42px!important;}
}

/* Portrait tablets: still tablet layout, not the mobile one. */
@media (orientation:portrait){
  body.gmc-tablet-secure.test-mode #screen-memorize .stage-security>span:nth-child(n+2),
  body.gmc-tablet-secure.test-mode #screen-recall .stage-security>span:nth-child(n+2){display:none!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize #wordGrid{gap:5px!important;}
  body.gmc-tablet-secure.test-mode #screen-memorize #wordGrid>.word{font-size:clamp(15px,2.5vw,20px)!important;grid-template-columns:28px minmax(0,1fr)!important;}
}