/* Pheedr on wider screens (iPad, desktop): a grid of stories, a comfortable reading column, and centered sheets.
   Every rule sits behind min-width:700px, so phones, and an iPad window narrowed by Split View, keep the phone layout. */
@media (min-width:700px){
 /* Page: cards on a soft gray, header and install row full width, content aligned to a 1,240px grid. */
 body.stream-mode{background:#f2f3f1}
 .stream-mode .wrap{max-width:none;background:transparent}
 .appbar,.pwa-tools{padding-left:max(24px,calc((100% - 1240px)/2 + 24px));padding-right:max(24px,calc((100% - 1240px)/2 + 24px));background:#fff}
 .stream-mode #feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;max-width:1240px;margin:0 auto;padding:22px 24px 0}
 .stream-mode #feed>:not(.story){grid-column:1/-1}
 .stream-mode #end{max-width:1240px;margin:0 auto;padding:30px 24px 8px}
 .shelf-bar{padding:0;border:0}.shelf-bar .segmented{max-width:420px}

 /* Story cards: two across in portrait, three in landscape. Actions stay pinned to the bottom of each card. */
 .stream-mode .story{display:flex;flex-direction:column;min-width:0;padding:0 0 10px;border:0;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 2px #19231f12,0 6px 18px #19231f0a}
 .stream-mode .story .story-body{flex:1;display:flex;flex-direction:column}
 .stream-mode .story .story-actions{margin-top:auto}
 .stream-mode .story h2{font-size:22px;line-height:1.22}
 .stream-mode .story .description{font-size:16px}
 .stream-mode .story:not(:has(>.media)) .description{-webkit-line-clamp:8;line-clamp:8}
 @media(hover:hover){.stream-mode .story:not(.skeleton):hover{box-shadow:0 2px 4px #19231f14,0 10px 26px #19231f14}}

 /* The first story leads, magazine style: photo beside the headline across the full width. */
 .stream-mode #feed>.story:first-child:has(>.media){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);padding:0}
 .stream-mode #feed>.story:first-child:has(>.media) .media{aspect-ratio:auto;height:100%;min-height:clamp(260px,32vw,460px)}
 .stream-mode #feed>.story:first-child:has(>.media) .story-body{padding:24px 26px 14px}
 .stream-mode #feed>.story:first-child:has(>.media) h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.6px}
 .stream-mode #feed>.story:first-child:has(>.media) .description{font-size:17px;-webkit-line-clamp:6;line-clamp:6}

 /* Tabs: a full-width bar with the four tabs grouped in the middle. */
 .tabbar{width:100%;justify-content:center}
 .tab{flex:0 1 150px}

 /* Reader: full screen, with the story in a centered column at a comfortable line length. */
 .reader-dialog{width:100%;max-width:none;box-shadow:none}
 .reader-article{max-width:760px;margin:0 auto;padding:0 40px 48px}
 .story-hero{margin:28px -40px 0;border-radius:12px}
 .reader-dialog .reader-title{font-size:clamp(34px,3.4vw,42px)}
 .reader-body{font-size:20px}
 .reader-finish .primary{max-width:420px}
 .reader-bottom{justify-content:center}
 .reader-bottom button{flex:0 1 150px}
}
/* Sheets (Settings, Explore, story menu, sources) open as centered cards instead of rising from the bottom edge. */
@media (min-width:700px) and (min-height:560px){
 dialog:not(.reader-dialog){inset:0;margin:auto;width:min(calc(100% - 48px),540px);max-width:540px;max-height:min(84dvh,860px);border-radius:18px;padding:25px 26px 26px;box-shadow:0 24px 60px #0003}
}