/* The app fills normal tablet and computer viewports. Phones and very short
   windows keep document scrolling so content remains accessible when zoomed. */
@media (min-width:640px) and (min-height:560px) {
  html,body { height:100%; }
  body { height:100dvh; overflow:hidden; }
  .wrap { height:100%; padding:0 clamp(20px,2.4vw,40px); display:flex; flex-direction:column; }
  header { flex:0 0 64px; height:64px; }
  .brand { gap:16px; }
  .brand shaughv-mark { width:96px; height:64px; }
  main { flex:1; min-height:0; display:flex; flex-direction:column; }
  .intro { flex:none; display:flex; align-items:center; padding:clamp(10px,1.7vh,20px) 0; gap:20px; }
  h1 { font-size:clamp(25px,2.65vw,40px); }
  .intro p { font-size:12px; line-height:1.4; margin:0; }
  #lookup-form { flex:none; }
  .search { min-height:62px; grid-template-columns:minmax(0,1fr) 120px 154px; }
  .input-box { padding:7px 18px; gap:14px; }
  .type-box { padding:7px 16px; }
  .field-stack input { font-size:18px; }
  .check { grid-column:auto; min-height:0; padding:0 16px; justify-content:space-between; }
  .under-search { flex:none; min-height:32px; padding-top:7px; position:relative; z-index:5; align-items:center; padding-bottom:7px; }
  .shortcut { display:block; font-size:9px; }
  .compare { position:relative; }
  .compare-content { position:absolute; top:calc(100% + 8px); left:0; width:min(450px,calc(100vw - 48px)); padding:14px; background:var(--raised); border:1px solid var(--line-strong); }
  .compare textarea { width:100%; margin:0; height:64px; max-height:100px; resize:none; }
  .compare p { margin:8px 0 0; }
  .error-banner { flex:none; margin:0 0 8px; padding:8px 12px; font-size:12px; max-height:64px; overflow:auto; }
  .workspace { flex:1; min-height:0; margin-top:0; display:grid; grid-template-columns:minmax(270px,34%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .results-panel { min-height:0; display:flex; flex-direction:column; order:0; border-top:0; border-right:1px solid var(--line); }
  .panel-top,.map-top { height:38px; flex:0 0 38px; }
  .panel-top { padding-right:18px; }
  .rows { flex:1; height:auto; min-height:0; max-height:none; overflow-y:auto; padding-right:12px; }
  .result-row { min-height:66px; padding:10px 8px 10px 0; }
  .answers { margin-top:4px; }
  .map-panel { min-height:0; position:relative; padding-left:clamp(16px,2vw,30px); order:1; }
  .map-top .mono { display:block; font-size:9px; }
  .map-stage { flex:1; min-height:0; display:grid; place-items:center; container-type:size; }
  .map-wrap { width:min(100cqw,200cqh); height:min(50cqw,100cqh); margin:0; }
  .map { width:100%; height:100%; aspect-ratio:auto; }
  .map-overlay { bottom:4px; left:10px; font-size:8px; }
  .map-loader { right:0; bottom:0; }
  .map-loader shaughv-loader { height:64px; width:64px; }
  .map-loader > span { display:none; }
  .legend { flex:none; padding:6px 0 10px; gap:8px 16px; font-size:8px; }
  .summary { flex:none; margin-top:0; padding:10px 0 12px; }
  .metric { padding:0 14px; }
  .metric-value { font-size:clamp(20px,2vw,27px); line-height:1.25; }
  .metric-label { margin-top:3px; font-size:8px; line-height:1.45; }
  .detail { flex:none; min-height:0; padding:7px 0; }
  .detail-empty p { font-size:11px; }
  .detail-empty .icon { width:15px; height:15px; }
  .detail.is-open { position:absolute; z-index:4; bottom:76px; right:0; width:min(460px,100%); max-height:min(340px,calc(100% - 48px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; background:var(--raised); border:1px solid var(--line-strong); padding:14px; }
  .detail.is-open .detail-heading { align-items:flex-start; }
  .detail-heading h3 { font-size:15px; }
  .detail-actions { display:flex; gap:14px; align-items:center; flex:none; }
  .detail-actions .text-button { min-height:30px; }
  .bottomline { flex:none; min-height:40px; padding:8px 0 10px; gap:12px; flex-wrap:nowrap; align-items:center; font-size:8px; }
  .bottomline details { position:relative; text-align:right; }
  .bottomline summary { font-size:8px; }
  .about-content { position:absolute; z-index:6; bottom:calc(100% + 12px); right:0; width:min(560px,calc(100vw - 48px)); max-height:min(440px,70dvh); overflow:auto; overscroll-behavior:contain; background:var(--raised); border:1px solid var(--line-strong); padding:8px 18px; }
  .bottomline #quota:empty { display:none; }
}

/* Short laptop windows spend their height on results, not the heading. */
@media (min-width:640px) and (min-height:560px) and (max-height:720px) {
  .intro { padding:9px 0; }
  h1 { font-size:28px; }
  .intro p { display:none; }
  .search { min-height:58px; }
  .panel-top,.map-top { height:34px; flex-basis:34px; }
  .summary { padding:8px 0; }
  .metric-value { font-size:21px; }
  .map-overlay { display:none; }
  .detail.is-open { bottom:64px; max-height:calc(100% - 42px); }
}

@media (min-width:640px) and (max-width:1050px) and (min-height:560px) {
  .header-right { font-size:8px; }
  .intro p { display:none; }
  .workspace { grid-template-columns:minmax(260px,39%) minmax(0,1fr); }
  .map-top .mono { display:none; }
  .legend { gap:6px 10px; }
  .metric { padding:0 9px; }
  .metric-value { font-size:21px; }
  .detail-actions { gap:8px; }
  .detail-actions .text-button { font-size:8px; }
  .bottomline #copy-link { font-size:8px; }
}

/* Portrait tablets retain both panels, with separate scrolling for the list. */
@media (min-width:640px) and (max-width:900px) and (min-height:700px) and (orientation:portrait) {
  .workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1.05fr) minmax(0,1fr); }
  .map-panel { order:0; padding-left:0; }
  .results-panel { order:1; border-right:0; border-top:1px solid var(--line); }
  .panel-top { padding-right:0; }
  .map-top .mono { display:block; }
  .rows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:min-content; column-gap:22px; align-content:start; }
  .detail:not(.is-open) { display:none; }
  .detail.is-open { bottom:64px; width:min(440px,100%); max-height:calc(100% - 42px); }
  .no-results { grid-column:1/-1; }
}

/* Detail actions are also usable in the normal scrolling phone layout. */
.detail-actions { display:flex; align-items:center; gap:12px; flex:none; }

/* Give the canonical mark breathing room, including on notched screens. */
.wrap { padding-top:max(16px,env(safe-area-inset-top)); }
h1 { display:flex; flex-wrap:wrap; column-gap:.24em; row-gap:.06em; }
#phone-inspector { padding:0; color:var(--fg); background:var(--raised); }
header.brand-header { height:112px; flex-basis:112px; }
.brand-header .brand { gap:24px; align-items:center; min-height:100px; }
.brand-header .brand shaughv-mark { width:64px; height:64px; flex:none; transform:translateY(7px); }
.brand-crest { display:block; flex:0 0 80px; width:80px; height:100px; background:currentColor; mask:url('https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest-Footer.svg') center/contain no-repeat; -webkit-mask:url('https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest-Footer.svg') center/contain no-repeat; }