/* TypeFlow v6.6 — desktop density & responsive sizing system
   Primary target: browsers at 100% zoom on 1366–1920px desktop displays.
   The previous UI was visually oversized because multiple generations of
   layout CSS used 1440–1580px canvases together with 25–29px typing text.
   This layer normalizes the public product while preserving mobile rules. */

:root{
  --tf-public-max:1280px;
  --tf-reading-max:1120px;
  --tf-rail:270px;
}

@media (min-width:981px){
  /* ---------- Shared public shell ---------- */
  body:not(.admin-mode) .site-header{
    height:74px;
    padding:8px 18px 0;
  }
  body:not(.admin-mode) .header-inner{
    width:calc(100% - 16px);
    max-width:1320px!important;
    height:58px;
    padding:0 18px;
    grid-template-columns:220px minmax(0,1fr) auto;
    gap:16px;
    border-radius:15px;
  }
  body:not(.admin-mode) .brand{gap:9px;font-size:18px;letter-spacing:-.35px}
  body:not(.admin-mode) .brand-symbol{width:31px;height:29px}
  body:not(.admin-mode) .brand-symbol span{height:4px}
  body:not(.admin-mode) .brand-symbol span:nth-child(1){width:27px;top:4px}
  body:not(.admin-mode) .brand-symbol span:nth-child(2){width:19px;top:12px}
  body:not(.admin-mode) .brand-symbol span:nth-child(3){width:11px;top:20px}
  body:not(.admin-mode) .main-nav{gap:18px}
  body:not(.admin-mode) .main-nav a{font-size:12.5px;font-weight:710}
  body:not(.admin-mode) .header-actions{gap:8px}
  body:not(.admin-mode) .language-picker{height:36px;padding:0 7px;font-size:12px}
  body:not(.admin-mode) .theme-quick-toggle{transform:scale(.9);transform-origin:center}
  body:not(.admin-mode) .primary-btn.compact,
  body:not(.admin-mode) .outline-btn.compact{height:36px;padding:0 13px;font-size:12px;border-radius:9px}
  body:not(.admin-mode) .account-trigger{height:39px;max-width:165px;border-radius:11px}
  body:not(.admin-mode) .account-avatar{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:12px}
  body:not(.admin-mode) .account-trigger-copy strong{font-size:11.5px}
  body:not(.admin-mode) .account-trigger-copy small{font-size:9px;margin-top:2px}

  /* ---------- Typing test: compact professional canvas ---------- */
  .typing-tool-page{
    width:calc(100% - 40px)!important;
    max-width:var(--tf-public-max)!important;
    padding:13px 0 18px!important;
  }
  .typing-tool-page .tool-breadcrumb{
    max-width:none;
    margin:0 4px 2px;
    padding:0;
    font-size:11.5px;
  }
  .typing-tool-page .premium-hero{
    min-height:104px;
    padding:6px 4px 14px;
    gap:34px;
  }
  .typing-tool-page .hero-copy{max-width:600px}
  .typing-tool-page .hero-eyebrow{height:21px;padding:0 9px;font-size:10px;letter-spacing:.95px}
  .typing-tool-page .premium-hero h1{margin:7px 0 3px;font-size:34px;line-height:1.04;letter-spacing:-1.25px}
  .typing-tool-page .premium-hero p{font-size:13.5px;line-height:1.5}
  .typing-tool-page .hero-proof{min-width:390px;gap:22px}
  .typing-tool-page .proof-item{gap:8px}
  .typing-tool-page .proof-icon{width:34px;height:34px;font-size:14px}
  .typing-tool-page .proof-item strong{font-size:13.5px}
  .typing-tool-page .proof-item small{font-size:10.5px;margin-top:1px}

  .typing-tool-page .home-progression{
    margin-bottom:14px;
    padding:10px 13px;
    border-radius:12px;
  }
  .typing-tool-page .home-progression-main{gap:10px}
  .typing-tool-page .progress-level-badge{font-size:10.5px;padding:6px 8px}
  .typing-tool-page .home-xp-copy strong{font-size:11.5px}
  .typing-tool-page .home-xp-copy small,
  .typing-tool-page .home-progression-side{font-size:10.5px}
  .typing-tool-page .home-xp-track{height:6px}

  .typing-tool-page .premium-grid{
    grid-template-columns:minmax(0,1fr) var(--tf-rail)!important;
    gap:18px!important;
    align-items:start;
  }
  .typing-tool-page .premium-typing-panel{
    border-radius:16px;
    box-shadow:0 14px 38px rgba(31,39,76,.065);
  }
  .typing-tool-page .test-config-row{
    grid-template-columns:1fr 1.08fr;
    gap:18px;
    padding:15px 18px 13px;
  }
  .typing-tool-page .control-heading{
    height:18px;
    margin-bottom:7px;
    gap:6px;
    font-size:11px;
  }
  .typing-tool-page .control-icon{width:18px;height:18px;font-size:9px}
  .typing-tool-page .segmented{gap:5px}
  .typing-tool-page .premium-typing-panel .option-btn{
    height:32px;
    padding:0 11px;
    border-radius:8px;
    font-size:11.5px;
  }

  .typing-tool-page .typing-language-control{
    margin:11px 18px 0;
    min-height:52px;
    grid-template-columns:125px minmax(0,1fr) auto;
    gap:9px;
    padding:7px 9px;
    border-radius:10px;
  }
  .typing-tool-page .typing-language-label{gap:7px}
  .typing-tool-page .language-globe{width:25px;height:25px;border-radius:7px;font-size:13px}
  .typing-tool-page .typing-language-label strong{font-size:11.5px}
  .typing-tool-page .typing-language-options{grid-template-columns:repeat(5,minmax(74px,1fr));gap:4px}
  .typing-tool-page .typing-lang-btn{height:32px;border-radius:7px;font-size:11.5px;gap:5px}
  .typing-tool-page .typing-lang-btn span{font-size:13px}
  .typing-tool-page .workspace-tools{gap:4px}
  .typing-tool-page .tool-icon-btn{width:30px;height:30px;border-radius:7px;font-size:11px}

  .typing-tool-page .premium-content-tabs{
    margin:9px 18px 0;
    gap:18px;
  }
  .typing-tool-page .premium-content-tabs .content-mode{
    min-width:96px;
    height:34px;
    font-size:11.5px;
  }
  .typing-tool-page .tab-glyph{font-size:12px;margin-right:4px}
  .typing-tool-page .premium-typing-panel .custom-text-box{margin:10px 18px 0}
  .typing-tool-page .premium-workspace{margin:0 18px}
  .typing-tool-page .premium-workspace .word-viewport{
    height:126px!important;
    padding:10px 9px 6px!important;
  }
  .typing-tool-page .premium-workspace .word-stream{
    font-size:20px!important;
    line-height:1.48!important;
    gap:5px 8px!important;
    font-weight:650!important;
    letter-spacing:.05px!important;
  }
  .typing-tool-page .premium-workspace .test-word{padding:0 3px}
  .typing-tool-page .premium-workspace .typing-input{
    height:44px;
    padding-left:12px;
    font-size:13.5px;
  }
  .typing-tool-page .space-tip{right:10px;font-size:9px;padding:4px 6px}

  .typing-tool-page .premium-metrics{
    margin-top:12px;
    padding:0 10px;
  }
  .typing-tool-page .premium-metrics .metric{
    min-height:57px;
    gap:6px;
  }
  .typing-tool-page .premium-metrics .metric small{font-size:9.5px}
  .typing-tool-page .premium-metrics .metric strong{font-size:14px}
  .typing-tool-page .premium-metrics .metric-icon{width:19px;font-size:14px}
  .typing-tool-page .premium-actions{padding:11px 18px 0}
  .typing-tool-page .premium-actions .start-test{min-width:210px;height:40px;font-size:12px}
  .typing-tool-page .premium-actions .reset-test{min-width:112px;height:40px;font-size:12px}
  .typing-tool-page .premium-typing-panel .test-status{padding-bottom:11px;font-size:9.5px}

  /* ---------- Right rail ---------- */
  .typing-tool-page .premium-side-stack{gap:14px}
  .typing-tool-page .premium-side-card{border-radius:15px;box-shadow:0 12px 32px rgba(31,39,76,.055)}
  .typing-tool-page .premium-side-card .section-head{padding:14px 14px 9px}
  .typing-tool-page .premium-side-card .section-head h2{font-size:14.5px;letter-spacing:-.2px}
  .typing-tool-page .premium-side-card .section-head a,
  .typing-tool-page .premium-side-card .subtle-link{font-size:9.5px}
  .typing-tool-page .head-icon{width:22px;height:22px;margin-right:5px;border-radius:6px;font-size:10px}
  .typing-tool-page .daily-main{padding:4px 14px 9px;grid-template-columns:66px 1fr;gap:11px}
  .typing-tool-page .progress-ring{width:60px;height:60px}
  .typing-tool-page .progress-ring:after{inset:7px}
  .typing-tool-page .progress-ring span{font-size:13px}
  .typing-tool-page .daily-copy strong{font-size:11.5px}
  .typing-tool-page .daily-copy small{font-size:9.5px}
  .typing-tool-page .thin-progress{height:4px;margin:8px 0 6px}
  .typing-tool-page .premium-side-card .daily-cta{
    width:calc(100% - 28px);
    min-height:38px;
    height:38px;
    margin:10px 14px 8px;
    font-size:11px!important;
  }
  .typing-tool-page .daily-reset{padding:0 14px 9px;font-size:9px}
  .typing-tool-page .leader-tabs{margin:0 14px}
  .typing-tool-page .leader-tab{height:32px;font-size:10.5px}
  .typing-tool-page .leader-list{padding:5px 14px 2px}
  .typing-tool-page .leader-list li{
    min-height:37px;
    grid-template-columns:20px 27px 1fr 26px auto;
    gap:5px;
  }
  .typing-tool-page .leader-list .rank{font-size:10px}
  .typing-tool-page .leader-list .avatar{width:25px;height:25px;font-size:9px}
  .typing-tool-page .leader-list .leader-name{font-size:10.5px}
  .typing-tool-page .leader-list .country-badge{font-size:10px}
  .typing-tool-page .leader-list strong{font-size:10px}
  .typing-tool-page .leaderboard-all-btn{height:36px;margin:4px 14px 0;font-size:10.5px}

  /* ---------- Performance + SEO: same restrained density ---------- */
  .typing-tool-page .performance-section{margin-top:22px;padding:22px!important;border-radius:16px!important}
  .typing-tool-page .performance-section-head h2{font-size:22px!important}
  .typing-tool-page .performance-section-head p{font-size:12px!important}
  .typing-tool-page .performance-stat-grid{gap:12px!important}
  .typing-tool-page .performance-stat-card{min-height:112px!important;padding:16px!important;border-radius:13px!important}
  .typing-tool-page .performance-card-label{font-size:10.5px!important}
  .typing-tool-page .performance-main-value,
  .typing-tool-page .performance-value-row strong{font-size:24px!important}
  .typing-tool-page .performance-stat-card small{font-size:10.5px!important}
  .typing-tool-page .seo-section{margin-top:34px;padding-top:26px;gap:22px}
  .typing-tool-page .seo-copy h2{font-size:23px}
  .typing-tool-page .seo-copy h3{font-size:16px;margin-top:20px}
  .typing-tool-page .seo-copy p,
  .typing-tool-page .faq-card p{font-size:12.5px;line-height:1.68}
  .typing-tool-page .faq-card{padding:17px 19px}
  .typing-tool-page .faq-card summary{font-size:12px}

  /* ---------- Other product pages: consistent scale ---------- */
  .v6-page,.duel-page,.practice-v6-page{
    max-width:1120px!important;
    padding:25px 18px 46px!important;
  }
  .v6-page-head,.duel-hero{margin-bottom:17px!important}
  .v6-page-head h1,.duel-hero h1{font-size:34px!important;letter-spacing:-1px!important}
  .v6-page-head p,.duel-hero p{font-size:13.5px!important;line-height:1.55!important}
  .v6-panel{padding:18px!important;border-radius:15px!important}
  .v6-panel-head h2{font-size:17px!important}
  .duel-lobby{padding:18px!important}
  .duel-mode-card{padding:13px!important}
  .duel-mode-card strong{font-size:13.5px!important}
  .duel-mode-card small{font-size:10.5px!important}
  .duel-config select,.duel-find-btn{height:41px!important;font-size:12px!important}
  .challenge-word-viewport{height:194px!important;padding:18px 20px!important}
  .challenge-word-stream{font-size:22px!important;line-height:1.5!important;gap:6px 10px!important}
  .challenge-input-wrap input{height:48px!important;font-size:14px!important}
  .challenge-live-stats>div{min-height:65px!important}
  .challenge-live-stats small{font-size:10.5px!important}
  .challenge-live-stats strong{font-size:18px!important}
  .practice-arena .challenge-word-viewport{height:210px!important;padding:18px 20px!important}
  .practice-arena .challenge-word-stream{font-size:22px!important;line-height:1.5!important;gap:6px 10px!important}
  .practice-arena .challenge-input-wrap input{font-size:14px!important}
  .practice-arena .challenge-live-stats>div{min-height:65px!important}
  .practice-arena .primary-btn{min-width:210px;height:42px!important;font-size:12.5px!important}

  .profile-v5,.page-wrap.profile-v5{max-width:1160px!important;padding-left:20px!important;padding-right:20px!important}
  .profile-v5-head{padding:20px 22px!important}
  .profile-v5-identity h1{font-size:27px!important}
  .profile-level-orb{width:80px;height:80px}
  .profile-level-orb strong{font-size:26px}
  .profile-stat-grid .stat{padding:15px!important}
  .profile-stat-grid .stat strong{font-size:20px!important}
  .account-settings-page{max-width:1100px!important;padding-top:30px!important}

  /* Footer follows the same content width. */
  .typeflow-footer-inner{max-width:1280px!important;padding-left:22px!important;padding-right:22px!important}
}

/* 100% zoom on narrower desktop/laptops. */
@media (min-width:981px) and (max-width:1399px){
  :root{--tf-public-max:1160px;--tf-rail:250px}
  body:not(.admin-mode) .header-inner{max-width:1200px!important;grid-template-columns:190px minmax(0,1fr) auto}
  body:not(.admin-mode) .main-nav{gap:13px}
  body:not(.admin-mode) .main-nav a{font-size:11.5px}
  .typing-tool-page .premium-workspace .word-stream{font-size:19px!important}
  .typing-tool-page .typing-language-control{grid-template-columns:105px minmax(0,1fr) auto}
  .typing-tool-page .typing-lang-btn{font-size:10.5px}
  .typing-tool-page .premium-hero h1{font-size:31px}
  .typing-tool-page .hero-proof{min-width:350px;gap:15px}
}

/* A wide CSS viewport can mean an ultrawide screen or browser zoom-out.
   Give it extra canvas so the UI does not become physically tiny, while
   still keeping components considerably denser than the old v6.2 rules. */
@media (min-width:2000px){
  :root{--tf-public-max:1600px;--tf-rail:320px}
  body:not(.admin-mode) .header-inner{max-width:1640px!important}
  .typing-tool-page .premium-workspace .word-stream{font-size:23px!important}
  .typing-tool-page .premium-workspace .word-viewport{height:142px!important}
  .typing-tool-page .premium-typing-panel .option-btn{height:34px;font-size:12px}
  .typing-tool-page .typing-lang-btn{height:34px;font-size:12px}
  .typing-tool-page .premium-metrics .metric{min-height:61px}
  .v6-page,.duel-page,.practice-v6-page{max-width:1400px!important}
  .profile-v5,.page-wrap.profile-v5{max-width:1440px!important}
  .typeflow-footer-inner{max-width:1600px!important}
}

@media (min-width:2600px){
  :root{--tf-public-max:1840px;--tf-rail:350px}
  body:not(.admin-mode) .header-inner{max-width:1880px!important}
  .typing-tool-page .premium-workspace .word-stream{font-size:25px!important}
  .typing-tool-page .premium-workspace .word-viewport{height:150px!important}
  .typeflow-footer-inner{max-width:1840px!important}
}