/* One phone column in the page flow; all cards share the document scroll. */
@media(max-width:580px){
  html{height:auto;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  body[data-theme]{height:auto;min-height:100dvh;overflow:visible}
  body[data-theme] .dashboard{height:auto;min-height:100dvh;grid-template-rows:240px max-content var(--footer-height,20px);align-content:start}
  body[data-theme] .dashboard .daily-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content;grid-template-areas:"work" "holdings" "links";align-content:start;min-height:0;gap:10px;overflow:visible}
  body[data-theme] .dashboard .daily-cards:focus-visible{outline:2px solid #20b8e9;outline-offset:2px}
  body[data-theme] .dashboard .daily-cards .work-card{grid-area:work}
  body[data-theme] .dashboard .daily-cards .holdings-card{grid-area:holdings}
  body[data-theme] .dashboard .daily-cards .work-card,
  body[data-theme] .dashboard .daily-cards .holdings-card{height:auto;padding:12px 10px;align-self:stretch}
  body[data-theme] .daily-cards .links-card.website-panel{grid-area:links;align-self:stretch;height:auto;padding:0}
  body[data-theme] .daily-cards .website-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:72px;gap:6px}
  body[data-theme] .daily-cards .website-tile{flex-direction:row;padding:6px 4px;gap:5px}
  body[data-theme] .daily-cards .website-tile>strong{font-size:12px;white-space:nowrap}
  body[data-theme] .daily-cards .website-tile>svg{width:17px;height:17px}

  body[data-theme] .work-card .card-header{flex-wrap:wrap;gap:6px;margin-bottom:10px}
  body[data-theme] .work-card .card-header h1{width:auto;font-size:14px;gap:6px}
  body[data-theme] .work-card .work-heading-icon{width:26px;height:20px}
  body[data-theme] .work-card .work-header-actions{width:auto;margin-left:auto}
  body[data-theme] .work-card .status-badge{font-size:11px;padding:3px 7px}
  body[data-theme] .work-card .work-main,
  body[data-theme] .work-card.has-sticker .work-main{display:grid;flex:0 0 auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;align-items:start;gap:5px 10px;padding:0;text-align:left}
  body[data-theme] .work-card.has-sticker .work-main{grid-template-columns:minmax(0,1fr) 64px}
  body[data-theme] .work-card #countdown-label{grid-column:1;grid-row:1;margin:0;font-size:11px;line-height:1.5}
  body[data-theme] .work-card #countdown,
  body[data-theme] .work-card.has-sticker #countdown{grid-column:1;grid-row:2;font-size:clamp(22px,17cqw,28px);line-height:1.3;letter-spacing:-.04em}
  body[data-theme] .work-card[data-mode=evening] #countdown,
  body[data-theme] .work-card[data-presence-state=home] #countdown,
  body[data-theme] .work-card[data-presence-state=commute] #countdown,
  body[data-theme] .work-card[data-overtime=true] #countdown{font-size:clamp(18px,14cqw,24px);line-height:1.5;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
  body[data-theme] .work-card #work-caption{grid-column:1;grid-row:3;margin:0;font-size:11px;line-height:1.6;word-break:normal;overflow-wrap:anywhere}
  body[data-theme] .work-card.has-sticker .work-animation,
  body[data-theme] .work-card.has-sticker .lunch-sticker{position:static;grid-column:2;grid-row:1/4;justify-self:end;align-self:center;width:64px;max-height:none;margin:0;transform:none}
  body[data-theme] .work-card .work-progress{margin-top:10px}
  body[data-theme] .work-card .progress-label{font-size:11px;gap:4px;margin-bottom:6px}
  body[data-theme] .work-card .progress-label strong{font-size:12px}
  body[data-theme] .work-card .timeline{font-size:10px;margin-top:7px}
  body[data-theme] .work-card .work-footer{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:10px;line-height:1.5;margin-top:10px;padding-top:8px}
  body[data-theme] .work-card #vacation-countdown{font-size:10px;white-space:normal}

  body[data-theme] .daily-cards .holdings-header{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;gap:6px 4px;margin-bottom:10px}
  body[data-theme] .daily-cards .holdings-heading-group{grid-column:auto;flex-direction:column;align-items:flex-start;gap:5px}
  body[data-theme] .daily-cards .holdings-header h2{font-size:13px;gap:5px;letter-spacing:0}
  body[data-theme] .daily-cards .holdings-heading-image{width:22px}
  body[data-theme] .daily-cards .holdings-date{font-size:10px;line-height:1.5;white-space:normal}
  body[data-theme] .daily-cards .holdings-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:8px;flex:none}
  body[data-theme] .daily-cards .holding-tile{padding:0;border-radius:0}
  body[data-theme] .daily-cards .holding-tile+.holding-tile{border-top:0;border-left:1px solid #95abc52b;padding-left:8px}
  body[data-theme] .daily-cards .holding-title{gap:3px 6px;line-height:1.4}
  body[data-theme] .daily-cards .holding-title strong{font-size:16px}
  body[data-theme] .daily-cards .holding-title span{font-size:10px}
  body[data-theme] .daily-cards .holding-price-line{margin:8px 0 4px;gap:3px;line-height:1.1}
  body[data-theme] .daily-cards .holding-price{font-size:22px}
  body[data-theme] .daily-cards .holding-currency{font-size:18px}
  body[data-theme] .daily-cards .holding-delta{gap:3px 6px;line-height:1.5}
  body[data-theme] .daily-cards .holding-percent{font-size:12px}
  body[data-theme] .daily-cards .holding-change{font-size:10px}
  body[data-theme] .daily-cards .holding-chart-wrap{height:46px;flex:none;min-height:0;margin-top:6px}
  body[data-theme] .daily-cards .holding-chart{min-height:0;height:46px}
  body[data-theme] .daily-cards .holding-stats{font-size:10px;line-height:1.5;gap:2px 6px;margin-top:5px}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows,
  body[data-theme] .dashboard [data-integration=codex] #codex-windows:has(.quota-item:nth-child(3)){gap:6px}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows .quota-item{gap:3px}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows:has(.quota-item:nth-child(3)){overflow-y:auto;overflow-x:hidden;align-content:start;scrollbar-width:thin}
}

/* Keep a visible landscape banner, then scroll the content as on a short tablet. */
@media(max-width:1100px) and (max-height:600px) and (orientation:landscape),(hover:none) and (pointer:coarse) and (max-height:600px) and (orientation:landscape){
  html{height:auto;overflow-x:hidden;overflow-y:auto}
  body[data-theme]{--hero-space:clamp(180px,22vw,240px);height:auto;min-height:100dvh;overflow:visible}
  body[data-theme=tide]{--banner-height:calc(var(--hero-space) + 16px)}
  body[data-theme] .dashboard{height:auto;min-height:100dvh;grid-template-rows:var(--tablet-overview-height,240px) max-content var(--footer-height,20px);align-content:start}
  body[data-theme] .dashboard .daily-cards{overflow:visible}
  body[data-theme] .page-footer{align-self:stretch}
  body[data-theme=tide] .scene-header{background-position:center 20%}
  body[data-theme=tide] .water-edge{height:72px}
}
