/* fit-screen.css - load LAST (after key-press.css).
   Problem: layout was made for a tall screen; on a 1366x768 laptop at 100% zoom it only fitted at 80% zoom.
   1) Typing screen: big "Type as you learn" word no longer gets its top cut.
   2) Home page: everything fits in one screen (no scroll) on short screens.
   Short screens are detected by HEIGHT, so tall monitors keep the original big look.
   To make things smaller/larger, change the numbers below. */

/* =====================================================================
   1) TYPING SCREEN - big word box (#tx / .tmbig, from course.css)
   ===================================================================== */
/* The box centred its content AND hid overflow, so when it was too short the TOP got cut.
   Two flexible spacers centre the content when there is room and collapse when there is not
   (works in old Chrome too, no "safe center" needed). */
#tx { justify-content: flex-start; gap: 8px; padding: 8px 12px; }
#tx::before, #tx::after { content: ""; flex: 1 1 0; min-height: 0; }

.tmbig {
  font-size: clamp(40px, min(11vh, 11vw), 150px);   /* was clamp(60px,16vh,170px) */
  line-height: 1.3;                                  /* room for tall letters (f, l, k...) */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tmnext { font-size: clamp(16px, 2.8vh, 22px); }

/* GRID MODE (Step 5, 4 words x 2 lines).
   The two spacers above also took a share of the free height, so the grid (flex:1) shrank to a few
   pixels and the words overlapped. The grid now has its own real height, 2 rows. */
#tx .tmgrid {
  flex: 0 0 auto;
  height: clamp(120px, 34vh, 260px);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.8vh, 14px);
  padding: 4px;                 /* room for the cursor ring, so it is not cut by the box */
  box-sizing: border-box;
}
#tx .tmcell {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(18px, min(3.8vh, 2.6vw), 34px);
  line-height: 1.2;
}
/* letters inside the word that is being typed */
.tmcell .c { color: var(--ok); }
.tmcell .w { color: var(--bad); background: var(--badbg); border-radius: 4px; }
.tmcell span.cur { background: none; box-shadow: 0 3px 0 var(--ok); color: var(--ink); }
.tmcell .tmsp { color: var(--mute); font-size: .7em; margin-left: .15em; }

/* normal (non-learn) text box: never cut the first line */
#app.play #text { padding-top: 6px; line-height: 1.6; }

/* short screens (about 768 px high laptops): hands a bit smaller */
@media (max-height: 760px) {
  #hs { height: clamp(60px, 12vh, 110px) !important; }
}

/* =====================================================================
   2) HOME PAGE - header on top, footer at the bottom, EVERYTHING in between, no scrolling
   ---------------------------------------------------------------------
   Page = 100% of the screen height:  [ header ][ home content (shrinks to fit) ][ footer ]
   Every size below is tied to the screen HEIGHT (vh) with a min and a max, so the same
   page fits a 768 px laptop and a big monitor. Applies only on the home screen and only
   on screens wider than 700 px (phones keep the normal scrolling page).
   ===================================================================== */
@media (min-width: 700px) {
  body:has(#home:not([hidden])):has(#app[hidden]):has(#notes[hidden]) {
    height: 100vh; height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    display: flex; flex-direction: column;
  }

  /* header (top) */
  body:has(#home:not([hidden])):has(#app[hidden]):has(#notes[hidden]) .aci-header {
    flex: none; margin: 0;
    padding: clamp(8px, 1.8vh, 24px) 20px;
  }
  body:has(#home:not([hidden])):has(#app[hidden]):has(#notes[hidden]) .aci-name b { font-size: clamp(20px, 4.6vh, 38px); }
  body:has(#home:not([hidden])):has(#app[hidden]):has(#notes[hidden]) .aci-name small { margin-top: 2px; font-size: clamp(10px, 1.8vh, 15px); }
  body:has(#home:not([hidden])):has(#app[hidden]):has(#notes[hidden]) .aci-tools { bottom: auto; top: 50%; transform: translateY(-50%); }

  /* middle: title, two big buttons, typing demo keyboard */
  body:has(#home:not([hidden])):has(#app[hidden]):has(#notes[hidden]) #home {
    flex: 1 1 auto; min-height: 0;
    width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(3px, 1vh, 10px);
  }
  #home h1 { font-size: clamp(22px, 4.4vh, 34px); margin: 0; }
  #home .sub { margin: 0; font-size: clamp(12px, 2vh, 15px); }
  #home .hgrid { margin-top: clamp(2px, 1vh, 10px); gap: clamp(8px, 1.8vh, 20px); }
  #home .big { padding: clamp(8px, 2vh, 24px) 16px; border-radius: 20px; font-size: clamp(12px, 1.9vh, 14px); line-height: 1.4; }
  #home .big b { font-size: clamp(16px, 3vh, 22px); margin-bottom: clamp(2px, .6vh, 6px); }

  #home .hk-wrap { width: 100%; max-width: 640px; margin: clamp(4px, 1.6vh, 18px) auto 0; }
  #home .hk-text { min-height: clamp(32px, 6vh, 64px); margin-bottom: clamp(4px, 1vh, 10px); padding: 4px 12px; font-size: clamp(16px, 3.4vh, 28px); }
  #home .hk-kb, #home .hk-row { gap: clamp(3px, .8vh, 6px); }
  #home .hk { height: clamp(20px, 4.2vh, 38px); font-size: clamp(10px, 1.8vh, 14px); border-radius: 8px; }
  #home .hk.wide { font-size: clamp(8px, 1.5vh, 11px); }

  /* footer (bottom): in the page flow instead of floating, so it is always visible */
  body:has(#home:not([hidden])):has(#app[hidden]):has(#notes[hidden]) .aci-footer {
    position: static; flex: none; margin: 0;
    padding: clamp(5px, 1.2vh, 12px) 16px;
  }
  .aci-footer nav { gap: clamp(6px, 1vh, 10px); }
  .aci-footer .aci-btn { padding: clamp(4px, .9vh, 8px) 16px; font-size: clamp(11px, 1.8vh, 14px); border-radius: 10px; }
  .aci-footer small { margin-top: clamp(2px, .6vh, 6px); font-size: clamp(10px, 1.5vh, 12px); }
}

/* very short window: drop the demo keyboard so the buttons always fit */
@media (min-width: 700px) and (max-height: 480px) {
  #home .hk-wrap { display: none; }
}