/* A persistent, compact counterpart to the desktop Guide's illustrated cards. */
.guide-section-dock { display: none; }

@media screen and (max-width: 1279px) {
  html:has(.guide-section-dock) {
    scroll-padding-bottom: var(--guide-dock-space, 160px);
  }
  body:has(.guide-section-dock) {
    padding-bottom: var(--guide-dock-space, 160px);
  }
  body .guide-section-dock {
    position: fixed;
    z-index: 990;
    inset: auto 12px max(8px, env(safe-area-inset-bottom));
    display: block;
    width: auto;
    max-width: 760px;
    margin-inline: auto;
    padding: 10px;
    border: 1px solid #b7ccb9;
    border-radius: 18px;
    color: #173e2d;
    background: #f6faf3;
    box-shadow: 0 -5px 30px rgba(10, 47, 29, .13), 0 6px 18px rgba(10, 47, 29, .12);
  }
  .guide-section-dock .guide-dock-location {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 9px;
    margin: 0 2px 8px;
    color: #173e2d;
    font-family: Montserrat, sans-serif;
    font-size: .75rem;
    line-height: 1.45;
  }
  .guide-dock-location > span {
    color: #476052;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .guide-dock-location > b { font-weight: 800; }
  .guide-dock-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .guide-section-dock .guide-dock-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    min-height: 66px;
    padding: 5px 2px;
    overflow: hidden;
    border: 1px solid #bdd0be;
    border-radius: 10px;
    color: #214333;
    background: #e6efe3;
    text-align: center;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    transition: border-color 140ms ease, background-color 140ms ease;
  }
  .guide-dock-card > img {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 35px;
    object-fit: cover;
    opacity: .75;
  }
  .guide-dock-card > span {
    position: relative;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    margin-bottom: 6px;
    border-radius: 50%;
    color: #173e2d;
    background: #f6faf3;
    box-shadow: 0 1px 6px #173e2d30;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
  }
  .guide-dock-card > b {
    position: relative;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .guide-section-dock .guide-dock-card[aria-current="page"] {
    border-color: #15543a;
    color: #fff;
    background: #15543a;
    box-shadow: inset 0 0 0 1px #15543a, 0 0 0 2px #adc990;
  }
  .guide-dock-card[aria-current="page"] > img { opacity: .32; }
  .guide-dock-card[aria-current="page"] > span {
    color: #173e2d;
    background: #d5eead;
  }
  .guide-dock-card[aria-current="page"] > span::after {
    position: absolute;
    top: -3px;
    right: -7px;
    content: "\2713";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    color: #15543a;
    font-size: 10px;
    line-height: 14px;
  }
  .guide-section-dock .guide-dock-card:hover {
    border-color: #15543a;
  }
  .guide-section-dock .guide-dock-card:focus-visible {
    outline: 3px solid #15543a;
    outline-offset: 3px;
  }
  body:has(.guide-section-dock) .guidebook-sidebar { display: none !important; }
  body:has(.guide-section-dock) .edu-floating-back {
    bottom: calc(var(--guide-dock-space, 160px) + 4px);
  }
  /* Inside the Companion, use the reader's top edge: the app owns the bottom. */
  html.companion-guide-embed:has(.guide-section-dock) {
    scroll-padding-top: var(--guide-dock-space, 160px) !important;
    scroll-padding-bottom: 20px;
  }
  .companion-guide-embed body:has(.guide-section-dock) {
    padding-top: var(--guide-dock-space, 160px) !important;
    padding-bottom: 20px !important;
  }
  .companion-guide-embed .guide-section-dock { top: 8px; bottom: auto; }
  .companion-guide-embed .edu-floating-back { display: none !important; }
  .companion-guide-embed .guide-section-switcher-section { display: none !important; }
}

@media screen and (max-width: 420px) {
  body .guide-section-dock {
    inset-inline: 8px;
    padding: 8px;
    border-radius: 15px;
  }
  .guide-section-dock .guide-dock-location { gap: 0 7px; }
  .guide-dock-links { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-section-dock .guide-dock-card { transition: none; }
}

/* Keep useful reading space in landscape and short browser panes. */
@media screen and (max-width: 1279px) and (max-height: 520px) {
  body .guide-section-dock { padding: 7px; }
  .guide-section-dock .guide-dock-location { margin-bottom: 5px; }
  .guide-section-dock .guide-dock-card {
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    min-height: 44px;
  }
  .guide-dock-card > img { height: 100%; opacity: .12; }
  .guide-dock-card > span { flex: 0 0 23px; margin-bottom: 0; }
  .guide-dock-card[aria-current="page"] > img { opacity: .12; }
}

@media print {
  .guide-section-dock { display: none !important; }
  body:has(.guide-section-dock) { padding-bottom: 0 !important; }
}