/* TypeFlow v6.6.3 — desktop fit + main test viewport final pass
   100% browser zoom is the reference state.
   This layer intentionally loads last. */

:root{
  --tf-public-max:1160px;
  --tf-rail:250px;
}

@media (min-width:981px){
  /* Public shell: one step denser at 100% zoom. */
  body:not(.admin-mode) .site-header{
    height:69px;
    padding:7px 16px 0;
  }
  body:not(.admin-mode) .header-inner{
    width:calc(100% - 18px);
    max-width:1200px!important;
    height:54px;
    padding:0 15px;
    grid-template-columns:190px minmax(0,1fr) auto;
    gap:13px;
    border-radius:14px;
  }
  body:not(.admin-mode) .brand{font-size:17px}
  body:not(.admin-mode) .main-nav{gap:14px}
  body:not(.admin-mode) .main-nav a{font-size:11.5px}
  body:not(.admin-mode) .language-picker{height:34px;font-size:11px}
  body:not(.admin-mode) .account-trigger{height:36px;max-width:150px}
  body:not(.admin-mode) .account-avatar{width:28px;height:28px;flex-basis:28px}

  /* Canvas width: resembles a normal desktop web tool instead of a zoomed UI. */
  .typing-tool-page{
    width:calc(100% - 52px)!important;
    max-width:1160px!important;
    padding:14px 0 18px!important;
  }
  .typing-tool-page .premium-hero{
    min-height:90px!important;
    padding:4px 3px 11px!important;
    margin-bottom:4px!important;
    gap:25px!important;
  }
  .typing-tool-page .premium-hero h1{
    margin:5px 0 3px!important;
    font-size:30px!important;
    line-height:1.03!important;
    letter-spacing:-1.05px!important;
  }
  .typing-tool-page .premium-hero p{font-size:12.5px!important}
  .typing-tool-page .hero-proof{min-width:330px!important;gap:15px!important}
  .typing-tool-page .proof-icon{width:31px!important;height:31px!important}
  .typing-tool-page .proof-item strong{font-size:12.5px!important}
  .typing-tool-page .proof-item small{font-size:9.5px!important}

  .typing-tool-page .home-progression{
    margin-bottom:12px!important;
    padding:8px 11px!important;
  }

  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) 250px!important;
    gap:15px!important;
  }
  .typing-tool-page .test-config-row{
    gap:15px!important;
    padding:13px 15px 11px!important;
  }
  .typing-tool-page .premium-typing-panel .option-btn{
    height:30px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }
  .typing-tool-page .typing-language-control{
    margin:10px 15px 0!important;
    min-height:48px!important;
    grid-template-columns:112px minmax(0,1fr) auto!important;
    padding:6px 8px!important;
  }
  .typing-tool-page .typing-lang-btn{height:30px!important;font-size:10.5px!important}
  .typing-tool-page .premium-content-tabs{
    margin:8px 15px 0!important;
    gap:15px!important;
  }
  .typing-tool-page .premium-content-tabs .content-mode{
    min-width:88px!important;
    height:31px!important;
    font-size:10.8px!important;
  }

  /* MAIN TEST ONLY — exact four-row reading surface.
     18.5px * 1.52 ≈ 28.1px line box. 4 rows + three 4px gaps + padding
     is kept below the clipping boundary, so a fifth row cannot peek through. */
  .typing-tool-page .tf-main-typing-stage{
    margin:9px 15px 0!important;
  }
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    position:relative!important;
    box-sizing:border-box!important;
    height:154px!important;
    min-height:154px!important;
    max-height:154px!important;
    padding:12px 13px 15px!important;
    overflow:hidden!important;
    contain:paint;
  }
  .typing-tool-page .tf-main-typing-stage .word-viewport::after{
    content:"";
    position:absolute;
    z-index:4;
    left:0;right:0;bottom:0;
    height:10px;
    pointer-events:none;
    background:linear-gradient(to bottom,transparent 0%,var(--surface) 58%,var(--surface) 100%);
  }
  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:18.5px!important;
    line-height:1.52!important;
    gap:4px 8px!important;
    font-weight:640!important;
    align-content:flex-start!important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
    margin-top:11px!important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-input{
    height:46px!important;
    font-size:13.5px!important;
    padding-left:13px!important;
  }

  .typing-tool-page .premium-metrics{
    margin-top:11px!important;
    padding:0 8px!important;
  }
  .typing-tool-page .premium-metrics .metric{min-height:53px!important}
  .typing-tool-page .premium-metrics .metric small{font-size:9px!important}
  .typing-tool-page .premium-metrics .metric strong{font-size:13.5px!important}
  .typing-tool-page .premium-actions{padding:9px 15px 0!important}
  .typing-tool-page .premium-actions .start-test,
  .typing-tool-page .premium-actions .reset-test{height:38px!important}
  .typing-tool-page .premium-typing-panel .test-status{padding-bottom:9px!important}

  /* Right rail should not visually overpower the typing surface. */
  .typing-tool-page .premium-side-stack{gap:12px!important}
  .typing-tool-page .premium-side-card .section-head{padding:12px 12px 7px!important}
  .typing-tool-page .premium-side-card .section-head h2{
    font-size:13.5px!important;
    white-space:nowrap;
  }
  .typing-tool-page .daily-main{
    padding:3px 12px 7px!important;
    grid-template-columns:57px 1fr!important;
    gap:9px!important;
  }
  .typing-tool-page .progress-ring{width:54px!important;height:54px!important}
  .typing-tool-page .premium-side-card .daily-cta{
    width:calc(100% - 24px)!important;
    height:35px!important;
    min-height:35px!important;
    margin:8px 12px 7px!important;
    font-size:10.5px!important;
  }
  .typing-tool-page .leader-tabs{margin:0 12px!important}
  .typing-tool-page .leader-list{padding-left:12px!important;padding-right:12px!important}
  .typing-tool-page .leaderboard-all-btn{margin-left:12px!important;margin-right:12px!important}

  /* Lower sections use the same, calmer width rhythm. */
  .typing-tool-page .performance-section{margin-top:18px!important;padding:18px!important}
  .typing-tool-page .performance-section-head h2{font-size:20px!important}
  .typing-tool-page .seo-section{margin-top:28px!important;padding-top:22px!important}
  .typing-tool-page .seo-copy h2{font-size:21px!important}
  .typing-tool-page .seo-copy h3{font-size:15px!important}
  .typing-tool-page .seo-copy p,
  .typing-tool-page .faq-card p{font-size:12px!important}

  .typeflow-footer-inner{max-width:1160px!important}
}

/* 100% zoom on typical 1366–1599 widths: even tighter but still readable. */
@media (min-width:981px) and (max-width:1599px){
  :root{--tf-public-max:1080px;--tf-rail:238px}
  body:not(.admin-mode) .header-inner{max-width:1120px!important}
  .typing-tool-page{max-width:1080px!important}
  .typing-tool-page .premium-grid{grid-template-columns:minmax(0,1fr) 238px!important;gap:14px!important}
  .typing-tool-page .hero-proof{min-width:300px!important;gap:11px!important}
  .typing-tool-page .tf-main-typing-stage .word-stream{font-size:18px!important}
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:151px!important;min-height:151px!important;max-height:151px!important;
  }
}

/* Zoom-out / ultrawide: expand only moderately. This prevents the old
   behavior where 75% zoom produced a giant 1600–1840px application canvas. */
@media (min-width:2000px) and (max-width:2599px){
  :root{--tf-public-max:1480px;--tf-rail:285px}
  body:not(.admin-mode) .header-inner{max-width:1520px!important}
  .typing-tool-page{max-width:1480px!important}
  .typing-tool-page .premium-grid{grid-template-columns:minmax(0,1fr) 285px!important;gap:18px!important}
  .typing-tool-page .tf-main-typing-stage .word-stream{font-size:20px!important}
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:164px!important;min-height:164px!important;max-height:164px!important;
  }
  .typeflow-footer-inner{max-width:1480px!important}
}

@media (min-width:2600px){
  :root{--tf-public-max:1600px;--tf-rail:300px}
  body:not(.admin-mode) .header-inner{max-width:1640px!important}
  .typing-tool-page{max-width:1600px!important}
  .typing-tool-page .premium-grid{grid-template-columns:minmax(0,1fr) 300px!important}
  .typing-tool-page .tf-main-typing-stage .word-stream{font-size:21px!important}
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:170px!important;min-height:170px!important;max-height:170px!important;
  }
  .typeflow-footer-inner{max-width:1600px!important}
}

/* Keep mobile rules from the previous workspace pass. */
@media (max-width:980px){
  .typing-tool-page .tf-main-typing-stage .word-viewport::after{display:none}
}