/* My workspace (the landing page) fits the window and never scrolls: all the app cards sit in one row, however many there are, the hero and the
 * details strip give up height first. Only the landing page has .lower-grid, so every other page keeps its normal scroll.
 * Windows too small to fit (phones, narrow tablets) keep the normal scrolling page with a tidier grid.
 * Loaded after portal-appearance.css. Lives outside hanna_portal/web so the Workforce kit's file lists never see it. */
@media (min-width: 1000px) and (min-height: 560px) {
  html:has(.lower-grid), body:has(.lower-grid) { height: 100%; overflow: hidden; }
  .shell:has(.lower-grid) { height: 100vh; height: 100dvh; min-height: 0; }
  .main-shell:has(.lower-grid) { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .main-shell:has(.lower-grid) .topbar { flex: none; height: clamp(52px, 8vh, 78px); }
  .content:has(.lower-grid) {
    flex: 1; min-height: 0; width: 100%; margin: 0 auto; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) auto minmax(0, 400px) auto; align-content: center;
    row-gap: clamp(10px, 2vh, 20px); padding: clamp(12px, 2.4vh, 28px) clamp(24px, 3vw, 42px);
  }
  .content:has(.lower-grid) > .page-footer { display: none; }

  .content:has(.lower-grid) .hero { min-height: 0; height: clamp(84px, 17vh, 200px); padding: 0 clamp(20px, 2.6vw, 37px); }
  .content:has(.lower-grid) .hero .eyebrow { font-size: 9px; }
  .content:has(.lower-grid) .hero h1 { margin-top: clamp(4px, .9vh, 12px); font-size: clamp(22px, 3.4vh, 32px); line-height: 1.15; }
  .content:has(.lower-grid) .hero p { margin-top: clamp(2px, .8vh, 10px); line-height: 1.4; }
  .content:has(.lower-grid) .hero-seal { margin-right: 8px; }

  .content:has(.lower-grid) .section-title { margin: 0; }
  .content:has(.lower-grid) .section-title p { margin-top: 2px; }

  .content:has(.lower-grid) .app-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(10px, 1.1vw, 17px); min-height: 0;
  }
  .content:has(.lower-grid) .app-card {
    min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
    padding: clamp(12px, 2vh, 22px) clamp(12px, 1.2vw, 20px) 0;
  }
  .content:has(.lower-grid) .card-top { flex-wrap: wrap; gap: 6px; margin-bottom: clamp(8px, 1.6vh, 18px); }
  .content:has(.lower-grid) .app-icon { width: clamp(34px, 5vh, 46px); height: clamp(34px, 5vh, 46px); font-size: 13px; }
  .content:has(.lower-grid) .card-top .pill { white-space: normal; font-size: 9px; padding: 4px 6px; }
  .content:has(.lower-grid) .app-card h3 { font-size: clamp(14px, 1.2vw, 17px); }
  .content:has(.lower-grid) .app-card p { margin: 4px 0 8px; line-height: 1.4; }
  .content:has(.lower-grid) .app-card-bottom { margin-top: auto; min-height: 44px; gap: 8px; padding: 6px 0; line-height: 1.3; }
  .content:has(.lower-grid) .app-card-bottom > span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }

  .content:has(.lower-grid) .lower-grid { margin-top: 0; gap: clamp(10px, 1.1vw, 17px); }
  .content:has(.lower-grid) .workspace-summary, .content:has(.lower-grid) .connection-note { padding: 14px 20px; min-width: 0; }
  .content:has(.lower-grid) .small-star { display: none; }
  .content:has(.lower-grid) .text-button { margin-top: 8px; }
}

/* Short windows: the details become one line and the note keeps only its heading and link. */
@media (min-width: 1000px) and (min-height: 560px) and (max-height: 859px) {
  .content:has(.lower-grid) .hero-seal hanna-seal { zoom: .55; }
  .content:has(.lower-grid) .workspace-summary .eyebrow, .content:has(.lower-grid) .connection-note p { display: none; }
  .content:has(.lower-grid) .workspace-summary, .content:has(.lower-grid) .connection-note {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 16px; min-height: 40px;
  }
  .content:has(.lower-grid) .workspace-summary h3, .content:has(.lower-grid) .connection-note h3 {
    margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .content:has(.lower-grid) .workspace-summary dl { margin: 0; display: flex; gap: 16px; font-size: 11px; white-space: nowrap; }
  .content:has(.lower-grid) .workspace-summary dl div { padding: 0; gap: 6px; }
  .content:has(.lower-grid) .text-button { margin: 0; white-space: nowrap; flex: none; }
}
@media (min-width: 1000px) and (max-width: 1199px) and (min-height: 560px) and (max-height: 859px) {
  .content:has(.lower-grid) .workspace-summary dl div:last-child { display: none; }
  .content:has(.lower-grid) .workspace-summary h3 { flex: 0 1 auto; min-width: 90px; }
}

/* Too small to fit: the page scrolls as before, but the cards share the width instead of leaving one alone. */
@media (min-width: 761px) and (max-width: 999px), (min-width: 1000px) and (max-height: 559px) {
  .content:has(.lower-grid) .app-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* The sidebar keeps every page reachable on short windows. */
.sidebar { overflow-y: auto; }
@media (max-height: 800px) and (min-width: 761px) {
  .sidebar { padding-top: 16px; }
  .sidebar .brand { margin-bottom: 18px; }
  .sidebar-bottom { padding-top: 12px; }
  .edition { display: none; }
}