/* Keep the six design goals and the original interface inside one desktop scene. */
@media (min-width: 801px) and (min-height: 701px) {
  body[data-project=glancemap] .goals-sticky {
    display:flex;
    flex-direction:column;
    height:calc(100svh - 100px);
    max-height:860px;
    min-height:0;
    gap:12px;
  }
  body[data-project=glancemap] .goals-story-heading {
    flex:0 0 auto;
    margin-bottom:0;
  }
  body[data-project=glancemap] .goals-composition {
    flex:1 1 0;
    height:auto;
    min-height:0;
    grid-template-rows:max-content minmax(0,1fr) max-content;
    row-gap:34px;
    padding-bottom:8px;
  }
  body[data-project=glancemap] .goals-composition>.goal-interface {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%!important;
    min-height:0;
    overflow:visible;
  }
  body[data-project=glancemap] .goal-interface img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    flex:0 1 auto;
    object-fit:contain;
  }
  body[data-project=glancemap] .goals-composition>.goal-callout {
    max-width:260px;
    min-width:0;
  }
  body[data-project=glancemap] .goal-callout :is(h3,p) {
    overflow:visible;
    height:auto;
    max-height:none;
  }
}

/* Keep all six positions reserved while the goals follow their lesson frames. */
body[data-project=glancemap] [data-goals-scroll] .goal-callout:not(.is-visible),
body[data-project=glancemap] [data-goals-scroll] .goal-leader:not(.is-visible){opacity:0!important;visibility:hidden;pointer-events:none;transform:none}
body[data-project=glancemap] [data-goals-scroll] .goal-callout.is-visible,
body[data-project=glancemap] [data-goals-scroll] .goal-leader.is-visible{opacity:1!important;visibility:visible;transform:none}
body[data-project=glancemap] .glance-sequence-copy{display:grid;align-content:start}
body[data-project=glancemap] .glance-sequence-copy>p{grid-area:1/1}
body[data-project=glancemap] .glance-sequence-copy>p[hidden]{display:block!important;visibility:hidden}
body[data-project=glancemap] .glance-sequence-copy>small{grid-area:2/1}
@media (min-width: 801px) and (min-height: 701px) and (prefers-reduced-motion:reduce) {
  body[data-project=glancemap] .goal-leaders {display:block}
  body[data-project=glancemap] .goal-callout,
  body[data-project=glancemap] .goal-leader,
  body[data-project=glancemap] .goal-leader i {
    opacity:1!important;
    transform:none;
    transition:none;
  }
  body[data-project=glancemap] .goal-leader i {scale:1 1}
}
@media (min-width: 801px) and (max-height: 700px) {
  body[data-project=glancemap] .goals-scroll-track {height:auto}
  body[data-project=glancemap] .goals-sticky {
    position:static;
    display:block;
    height:auto;
    min-height:0;
    max-height:none;
  }
  body[data-project=glancemap] .goals-composition {
    height:auto;
    min-height:0;
    grid-template-rows:auto auto auto;
    row-gap:30px;
  }
  body[data-project=glancemap] .goals-composition>.goal-interface {height:auto!important}
  body[data-project=glancemap] .goal-callout {opacity:1!important;transform:none}
}

/* Let the source lesson explain re-entry, rather than repeating six definitions. */
body[data-project=glancemap] .glance-sequence{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;margin:18px 0 4px}
body[data-project=glancemap] .glance-sequence-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body[data-project=glancemap] .glance-sequence-controls button{font:400 var(--case-caption)/1.45 var(--font-body);border:1px solid #526140;background:transparent;color:var(--ink);padding:7px 11px;cursor:pointer;border-radius:3px;white-space:nowrap}
body[data-project=glancemap] .glance-sequence-controls button[aria-current]{background:var(--accent);color:#101610;border-color:var(--accent)}
body[data-project=glancemap] .glance-sequence-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body[data-project=glancemap] .glance-sequence-copy p{margin:0;font:400 var(--case-note)/1.45 var(--font-body);max-width:none}
body[data-project=glancemap] .glance-sequence-copy small{display:block;color:var(--muted);margin-top:5px;font:400 var(--case-caption)/1.4 var(--font-body)}
body[data-project=glancemap] .glance-sequence-copy strong{color:var(--accent)}
body[data-project=glancemap] .goal-callout h3{margin-bottom:0}
@media(min-width:801px){
 body[data-project=glancemap] .goals-composition{row-gap:22px}
}
@media(max-width:1000px){
 body[data-project=glancemap] .glance-sequence{grid-template-columns:1fr;gap:10px;margin-top:12px}
}
@media(max-width:540px){
 body[data-project=glancemap] .glance-sequence-controls{gap:5px;justify-content:space-between}
 body[data-project=glancemap] .glance-sequence-controls button{padding:5px 7px}
 body[data-project=glancemap] .goals-composition>.goal-interface{position:relative;top:auto}
 body[data-project=glancemap] .goal-callout{top:56%}
}
@media(max-width:540px){
 body[data-project=glancemap] .goals-composition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(3,min-content);gap:15px 20px;align-content:start}
 body[data-project=glancemap] .goals-composition>.goal-interface{grid-column:1/-1;grid-row:1;margin-bottom:6px}
 body[data-project=glancemap] .goals-composition>.goal-callout{position:static;display:block;opacity:1;transform:none;pointer-events:auto;grid-column:auto;grid-row:auto;align-self:start;justify-self:start;max-width:none}
 body[data-project=glancemap] .goal-callout h3{margin-top:7px}
 body[data-project=glancemap] .goal-callout .dg-pill{padding:4px 8px}
}

/* On phones, the complete six-goal layout can be taller than the screen.
   Keep it in normal flow and use the same three controls without clipping. */
@media(max-width:700px){
 body[data-project=glancemap] .goals-scroll-track{height:auto}
 body[data-project=glancemap] .goals-sticky{position:static;height:auto;max-height:none;min-height:0;gap:18px}
 body[data-project=glancemap] .goals-composition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(3,min-content);gap:15px 20px;align-content:start;flex:none;height:auto;min-height:0}
 body[data-project=glancemap] .goals-composition>.goal-interface{position:relative;top:auto;grid-column:1/-1;grid-row:1;margin:0 0 6px;width:100%;max-width:none;height:auto!important}
 body[data-project=glancemap] .goals-composition>.goal-callout{position:static;display:block;grid-column:auto;grid-row:auto;align-self:start;justify-self:start;max-width:none}
 body[data-project=glancemap] .goal-callout h3{margin-top:7px}
 body[data-project=glancemap] .goal-callout .dg-pill{padding:4px 8px}
 body[data-project=glancemap] .goal-leaders{display:none}
}