/* The signed-in home (ui/app.js): a feed, not a landing page. On a phone: the covers as a grid, with the tabs as a bar along the bottom and Create as a round button in the
   middle of it. On a computer: the same tabs as a rail on the left. The front page is hidden for anyone signed in (the page sets html.in before it paints). */
#app { display: none; }
html.in #app { display: block; }
html.in body.landing > main, html.in body.landing > .footer { display: none; }   /* the front page is for someone signed out */

.app { min-height: 100dvh; padding: calc(var(--nav-h) + 8px) 0 28px; }
.app-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter) 30px; }
.app-pane[hidden] { display: none; }

/* ---- Home */

.home-bar { position: sticky; z-index: 20; top: var(--nav-h); display: flex; align-items: center; gap: 12px; margin: 0 calc(var(--gutter) * -1) 18px; padding: 8px var(--gutter); background: linear-gradient(var(--bg) 70%, transparent); }
.app .filters { flex: 1; min-width: 0; margin: 0; padding: 2px 0; }
.view-toggle, .seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(10, 10, 12, 0.7); }
.view-toggle button, .seg button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); font: 600 0.82rem/1 var(--f-ui); cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.2s; }
.view-toggle button:active, .seg button:active { transform: scale(0.94); } .view-toggle button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: #fff; color: #000; }
@media (max-width: 520px) { .view-toggle button span { display: none; } .view-toggle button { padding: 0 11px; } }

.app .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
@media (min-width: 640px) { .app .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } }
@media (min-width: 1000px) { .app .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 22px; } }
.app .grid .card.feature { grid-column: auto; grid-row: auto; display: block; }
.app .grid .card.feature .card-cover { aspect-ratio: 2 / 3; height: auto; }
.app .grid .card.feature .card-t { font-size: 1.28rem; }
.app .grid .empty { grid-column: 1 / -1; color: var(--dim); }

/* the drift: the same field of covers, here between the bars */
.app-drift { position: relative; height: calc(100dvh - var(--nav-h) - var(--tabs-h) - env(safe-area-inset-bottom, 0px) - 150px); min-height: 380px; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.app-drift[hidden] { display: none; }
.app-drift canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.app-drift canvas:focus-visible { outline: 2px solid var(--blush); outline-offset: -4px; }
.drift-focus { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border-radius: 18px; background: rgba(12, 12, 16, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-2); }
.drift-focus strong { font: 300 1.3rem/1.1 var(--f-serif); } .drift-focus .field-preview { margin: 0; color: #cfcdd6; font: 400 0.92rem/1.45 var(--f-ui); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Library: the owner's published stories and drafts, sitting in the app instead of on a profile page */
.app .mine { margin: 0; padding: 6px 0 30px; border: 0; border-radius: 0; background: none; }   /* (landing.css gives .mine a boxed look for the front page's own small list) */
.app .mine .wrap { padding-inline: 0; }
.app .mine-head { margin-bottom: 16px; } .app .mine-head .sec-h { font-size: clamp(2rem, 6vw, 2.8rem); }
.app .mine-tabs { margin-bottom: 22px; }
.app .mine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
@media (min-width: 640px) { .app .mine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 1000px) { .app .mine-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 900px) { .app-drift { height: calc(100dvh - var(--nav-h) - 170px); } }

/* ---- Writers: the leaderboard (scoped styles in leaderboard.css, drawn by board.js) and everyone with a profile (the cards from the Writers page) */
.wt-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 18px; }
.wt-head .sec-h { margin: 0; font-size: clamp(2rem, 6vw, 2.8rem); }
.wt-note { margin: 0 0 4px; }
.app .wt-view[hidden] { display: none; }
.app .wt-view.board-scope { display: grid; gap: 14px; padding-bottom: 30px; }
.app .board-scope .who .handle { margin-bottom: 0; }
.app .board-scope .lastweek { padding-block: 18px 10px; }
.app .people { padding-bottom: 30px; }
@media (max-width: 380px) { .seg button { padding: 0 10px; gap: 5px; } }