/* A single row above and below the island; content cards retain their own sizing. */
:root,body,body.detail-open{
  --header-h:64px;
  --story-h:0px;
  --footer-h:calc(56px + env(safe-area-inset-bottom,0px));
}
#intro{display:none!important}
.header,body.detail-open .header{
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:minmax(0,1fr);
  height:var(--header-h);
  gap:12px;
  padding:8px 16px;
}
.header .brand,.header .filters,.header .header-actions{grid-column:auto;grid-row:auto}
.header .brand{gap:8px}
.header .brand-mark{width:36px;height:36px;flex-shrink:0}
.header .brand b{font-size:9px;letter-spacing:1.1px}
.header .brand small{font-size:11px;letter-spacing:2px}
.header .filters,body.detail-open .header .filters{
  display:flex;justify-self:center;width:auto;max-width:100%;gap:2px;padding:3px;
  position:static;transform:none;align-self:center;
}
.header .filter{min-height:36px;padding:8px 11px;font-size:11px;flex:0 1 auto}
.header .filter span{margin-left:5px;font-size:8px}
.header .header-actions{gap:10px}
.header .island-status{min-width:118px;max-width:130px;padding:4px 9px;gap:0}
.header .island-status time{font-size:13px;line-height:1.45}
.header-actions .text-button{min-height:40px;font-size:11px}
.header .round-button{width:32px;height:32px;min-width:32px}

.footer,body.detail-open .footer{
  height:var(--footer-h);display:flex;align-items:center;justify-content:center;
  padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));gap:0;
}
.footer .island-caption,.footer .view-hint,.footer .dock-divider,
.footer .progress-dots,.footer .music-control:disabled{display:none}
.footer .dock{
  display:flex;width:auto;max-width:100%;min-width:0;align-items:center;justify-content:center;
  gap:10px;grid-template-columns:none;grid-template-rows:none;
}
.footer .progress{display:flex;align-items:center;gap:12px;min-width:0;font-size:10px;white-space:nowrap}
.footer .progress b{font-size:11px;margin-left:3px}
.footer .island-visits{display:inline-flex;align-items:baseline;gap:3px;margin:0;font-size:10px;line-height:1.4}
.footer .dock>.dock-button{min-width:44px;min-height:40px;padding:4px;font-size:11px;grid-column:auto;grid-row:auto}
.footer .playback-controls{display:flex;align-items:center;gap:5px;grid-column:auto;grid-row:auto;justify-self:auto}
.footer .motion-control{min-height:38px;padding:6px 10px;font-size:10px;grid-column:auto;grid-row:auto}
.footer .motion-label{font-size:10px}
.footer .music-control{min-height:36px;padding:6px 9px}
.footer .time-switch{grid-column:auto;grid-row:auto;justify-self:auto;padding:2px}
.footer .time-switch button{min-width:29px;width:29px;height:32px}
.footer .zoom-controls{grid-column:auto;grid-row:auto;gap:2px;padding:0 2px}
.footer .zoom-controls button{min-width:36px;width:36px;min-height:38px;height:38px;font-size:25px}
.footer .zoom-label{font-size:8px}
.footer .help-button{grid-column:auto;grid-row:auto;min-width:30px;width:30px;height:32px}
.previewing .footer .progress{visibility:visible}
.live-sync{
  left:16px;right:auto;bottom:calc(var(--footer-h) + 8px);transform:none;
  max-width:calc(100vw - 32px);padding:5px 9px;font-size:9px;min-height:27px;
}
.live-sync:active{transform:translateY(1px)}
.motion-preference{right:16px;bottom:calc(var(--footer-h) + 8px)}

/* Only the panel bounds change; image ratios, card columns and fitted widths are preserved. */
.detail-panel,.index-panel{
  top:calc(var(--header-h) + 10px);bottom:calc(var(--footer-h) + 10px);
  max-height:calc(100dvh - var(--header-h) - var(--footer-h) - 20px);
}
.detail-panel{height:auto;min-height:0}
.index-panel{left:12px;width:min(340px,calc(100vw - 24px))}
.compact-index-controls{display:flex;flex-direction:column;gap:10px;margin:0 18px 14px;flex-shrink:0}
.compact-index-controls .filters{
  display:flex;position:static;transform:none;align-self:stretch;justify-content:space-between;
  width:100%;max-width:none;gap:2px;padding:3px;
}
.compact-index-controls .filter{flex:1;min-height:36px;padding:8px 7px;font-size:11px;white-space:nowrap}
.compact-index-controls .filter span{font-size:8px;margin-left:4px}
.compact-index-controls #tour-start{display:flex;width:100%;min-height:40px;padding:9px 13px;font-size:12px;border-radius:10px}

@media(max-width:880px){
  .header,body.detail-open .header{grid-template-columns:minmax(0,1fr) auto}
  .header .header-actions{gap:9px}
  .footer .time-switch{display:none}
  .footer .dock{width:100%;max-width:670px;justify-content:space-between;gap:8px}
  .footer .progress{gap:9px}
}
@media(max-width:700px){
  :root,body,body.detail-open{
    --header-h:calc(56px + env(safe-area-inset-top,0px));
    --story-h:0px;
    --footer-h:calc(56px + env(safe-area-inset-bottom,0px));
    --detail-scene-reserve:140px;
  }
  .header,body.detail-open .header{padding:7px 10px;padding-top:calc(7px + env(safe-area-inset-top,0px));gap:8px}
  .header .brand{gap:6px}
  .header .brand-mark{width:31px;height:31px}
  .header .brand b{font-size:8px;letter-spacing:.8px}
  .header .brand small{font-size:10px;letter-spacing:1.3px}
  .header .header-actions{gap:5px}
  .header .island-status{min-width:0;width:96px;max-width:96px;padding:4px 7px}
  .header .status-top{font-size:7px;max-width:82px}
  .header .island-status time{font-size:11px;letter-spacing:1px}
  .header-actions .text-button{font-size:0;min-width:30px;min-height:38px;padding:4px}
  .header .round-button{width:28px;height:30px;min-width:28px}
  .footer,body.detail-open .footer{padding-left:8px;padding-right:8px}
  .footer .dock{gap:5px;max-width:520px}
  .footer .progress{display:block;flex:1 1 auto;min-width:55px;line-height:1.3}
  .footer .progress>span:first-child{display:none}
  .footer .island-visits{font-size:10px;gap:2px;white-space:nowrap}
  .footer .island-visits b{font-size:11px;margin-left:0}
  .footer .dock>.dock-button{min-width:42px;width:42px;min-height:40px;padding:3px 0;font-size:10px;gap:4px;flex-shrink:0}
  .footer .playback-controls{gap:4px;flex-shrink:0}
  .footer .motion-control{width:36px;min-width:36px;min-height:40px;height:40px;padding:5px;justify-content:center}
  .footer .motion-label{display:none}
  .footer .music-control{width:28px;min-width:28px;height:36px;min-height:36px;padding:4px}
  .footer .music-label{display:none}
  .footer .zoom-controls{flex-shrink:0;gap:0;padding:0 1px}
  .footer .zoom-controls button{min-width:36px;width:36px;min-height:40px;height:40px}
  .footer .zoom-label{display:none}
  .footer .help-button{min-width:28px;width:28px;height:32px;flex-shrink:0}
  .live-sync{left:10px;max-width:calc(100vw - 20px);bottom:calc(var(--footer-h) + 7px)}
  .motion-preference{right:10px;bottom:calc(var(--footer-h) + 7px)}
  .index-panel{left:8px;right:8px;top:calc(var(--header-h) + 8px);bottom:calc(var(--footer-h) + 8px);width:auto;max-height:calc(100dvh - var(--header-h) - var(--footer-h) - 16px)}
  .detail-panel{
    top:auto;left:8px;right:8px;bottom:calc(var(--footer-h) + 8px);margin:0;
    height:min(64dvh,calc(100dvh - var(--header-h) - var(--footer-h) - var(--detail-scene-reserve)));
    max-height:calc(100dvh - var(--header-h) - var(--footer-h) - var(--detail-scene-reserve));
    min-height:0;
  }
  .compact-index-controls{margin-left:14px;margin-right:14px;gap:8px;margin-bottom:12px}
  .compact-index-controls .filter{font-size:10px;min-height:36px;padding:8px 5px}
}