/* TypeFlow v6.6.9
   Main Typing Test: full-width primary workspace + exact 4-row geometry.

   Why:
   - Practice/Duel word items have vertical padding, which increases each flex row.
   - Main .test-word did not, so a fifth row started inside the viewport and
     appeared partially clipped at the bottom.
   - The right rail also made the primary typing surface unnecessarily narrow.
*/

/* ==========================================================
   DESKTOP LAYOUT — typing is the primary task
   ========================================================== */
@media (min-width:981px){
  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  /* Daily task + leaderboard remain visible, but no longer steal width
     from the typing surface. */
  .typing-tool-page .premium-side-stack{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
    align-items:start !important;
  }

  .typing-tool-page .premium-side-card{
    min-width:0 !important;
    height:100% !important;
  }

  /* Keep the secondary row visually quieter than the main test. */
  .typing-tool-page .premium-side-card .section-head{
    min-height:48px !important;
  }

  .typing-tool-page .daily-main{
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .typing-tool-page .leader-list{
    max-height:170px;
    overflow:hidden;
  }
}

/* ==========================================================
   MAIN TEST — same clean row rhythm as Practice/Duel
   ========================================================== */
.typing-tool-page .tf-main-typing-stage{
  margin-left:15px !important;
  margin-right:15px !important;
}

/* Keep the familiar card height, but make the row math exact.
   20px × 1.58 = 31.6px line box
   + 4px vertical item padding = ~35.6px per row
   + 6px row gap.
   Four rows finish at ~177px, while row five starts after ~183px,
   so it is fully outside this 182px viewport. */
.typing-tool-page .tf-main-typing-stage .word-viewport{
  box-sizing:border-box !important;
  height:182px !important;
  min-height:182px !important;
  max-height:182px !important;
  padding:17px 18px 18px !important;
  overflow:hidden !important;
  contain:paint !important;
}

/* Absolutely no visual mask/gradient is used. */
.typing-tool-page .tf-main-typing-stage .word-viewport::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.typing-tool-page .tf-main-typing-stage .word-stream{
  display:flex !important;
  flex-wrap:wrap !important;
  align-content:flex-start !important;
  font-size:20px !important;
  line-height:1.58 !important;
  gap:6px 10px !important;
  font-weight:650 !important;
  padding:0 !important;
}

/* This is the missing piece that made Practice look clean while Test leaked
   the beginning of its fifth row. */
.typing-tool-page .tf-main-typing-stage .test-word{
  box-sizing:content-box !important;
  padding:2px 3px !important;
  min-height:0 !important;
  white-space:nowrap !important;
}

.typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
  margin-top:12px !important;
}

/* Slightly more breathing room now that the test owns the full width. */
.typing-tool-page .premium-content-tabs,
.typing-tool-page .typing-language-control,
.typing-tool-page .test-config-row{
  max-width:none !important;
}

/* ==========================================================
   LAPTOP
   Keep the same exact row geometry; only reduce horizontal spacing.
   ========================================================== */
@media (min-width:981px) and (max-width:1249px){
  .typing-tool-page .tf-main-typing-stage{
    margin-left:13px !important;
    margin-right:13px !important;
  }

  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:174px !important;
    min-height:174px !important;
    max-height:174px !important;
    padding:14px 15px 14px !important;
  }

  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:19px !important;
    line-height:1.58 !important;
    gap:5px 9px !important;
  }

  /* 19px row needs slightly more vertical body to keep row 5 outside. */
  .typing-tool-page .tf-main-typing-stage .test-word{
    padding:2px 3px !important;
  }

  .typing-tool-page .premium-side-stack{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ==========================================================
   MOBILE — preserve the existing stacked mobile experience.
   ========================================================== */
@media (max-width:980px){
  .typing-tool-page .premium-side-stack{
    display:block !important;
  }

  .typing-tool-page .premium-side-stack > * + *{
    margin-top:14px !important;
  }

  .typing-tool-page .tf-main-typing-stage .test-word{
    padding:1px 3px !important;
  }
}