/* HAHUMI 7.02 — a clear view of the cardboard actor, not UI over the costume.
 * Presentation only: keep the same speech, hint text, close action, puppets and vault.
 * Evidence: 7.00 Chromium snapshots at 1000 and 1440px show a narrow vertical
 * speech bubble and a coach note placed on top of Grum's left foot / body. */
@media (min-width: 741px) {
  /* The existing note628 strip is outside the moving figure's central zone.
     Pin it on the left wall (above the floor) instead of across the shoes. */
  body.hh691-layout #homeView .stage > .note628 {
    top: clamp(190px, 32%, 265px);
    bottom: auto;
    left: clamp(14px, 2vw, 24px);
    width: min(27%, 195px);
    max-width: 27%;
    min-width: 0;
    gap: 8px;
  }
  /* Small pinned cream paper, not a floating black sign across the cardboard. */
  body.hh691-layout #homeView .stage > .note628 .coach613 {
    position: relative;
    /* Old coach CSS used left:50% and bottom:96px for absolute hints.
       Reset them when the hint lives inside the 7.01 paper note strip. */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    translate: none;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px 10px 12px;
    box-sizing: border-box;
    border: 2px solid #694d38;
    border-radius: 13px;
    background: #fff3d9;
    color: #3e2d21;
    box-shadow: 3px 4px 0 rgba(67, 46, 32, .18);
    font-size: 13px;
    line-height: 1.38;
    text-align: left;
  }
  body.hh691-layout #homeView .stage > .note628 .coach613-dot {
    display: none;
  }
  /* Respect the real onboarding lifecycle: never force a dismissed hint open. */
  body.hh691-layout #homeView .stage > .note628 .coach613[hidden] {
    display: none;
  }
  /* 7.02: reserve the full 44px close-control row. A 27px inset
     let its lower edge cover the first text line in every desktop room. */
  body.hh691-layout #homeView .stage > .note628 .coach613-text {
    display: block;
    min-width: 0;
    padding-top: 46px;
    overflow-wrap: break-word;
    white-space: normal;
  }
  body.hh691-layout #homeView .stage > .note628 .coach613-x {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid #755640;
    border-radius: 50%;
    background: #f2e0bf;
    color: #4b3426;
    font-size: 22px;
    line-height: 1;
  }
  body.hh691-layout #homeView .stage > .note628 .coach613-x:focus-visible {
    outline: 3px solid #cf683b;
    outline-offset: 2px;
  }
  body.hh691-layout #homeView .stage > .note628 .care69-wish {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }
}
@media (min-width: 741px) and (max-width: 1179px) {
  /* Compact two-column laptops had only ~170px for the greeting, yielding
     seven vertical lines. The toolbar ends near 70px; use the open row below. */
  body.hh691-layout #homeView .stage .speech-bubble {
    top: 91px;
    left: 50%;
    right: auto;
    width: max-content;
    max-width: min(360px, calc(100% - 44px));
    box-sizing: border-box;
    margin: 0;
    padding: 10px 16px;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1.35;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
}

/* 7.01 tablet navigation: at 768px the old 606px five-item header plus
   160px logo and 49px language picker spilled 109px outside the viewport.
   Use a calm two-row paper header; keep all five places reachable.
   This does NOT affect the <=740px bottom tab bar or >=921px desktop. */
@media (min-width: 741px) and (max-width: 920px) {
  body.hh691-layout .rail {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    column-gap: 12px;
    row-gap: 8px;
    min-width: 0;
    height: auto;
    min-height: 86px;
    box-sizing: border-box;
    padding-top: 9px;
    padding-bottom: 10px;
  }
  body.hh691-layout .rail .logo {
    order: 0;
    min-width: 0;
  }
  body.hh691-layout .rail .rail-bottom {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
  }
  body.hh691-layout .rail .nav-list {
    order: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    gap: 4px;
    border-radius: 14px;
  }
  body.hh691-layout .rail .nav-list .nav-btn {
    min-width: 0;
    width: 100%;
    justify-content: center;
    gap: 5px;
    padding: 8px 4px;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

/* 7.05: Moros has a detached cloud beside the upper silhouette. The generic
   note lane masked its left edge. Pin his help note below the cloud only;
   do not move the actor, resize the cloud or hide instructional text. */
@media (min-width: 741px) {
  body.hh691-layout #homeView .stage:has(#heroArt svg[data-persona="moros"]) > .note628 {
    top: 54%;
  }
}