/* ==========================================================================
   Locuust - the phone layout
   Everything here is scoped to html[data-layout="phone"] (see js/layout.js),
   so the computer layout never reads a line of it. app.css still holds the
   shared pieces - colours, type, the look of a card or a button; this file
   is what a phone does with them.

   What it is built around, in the order a thumb meets it:
   - One header, 58px: back arrow or the mark, the page's name, and what the
     page needs. The name used to be squeezed to "Notebo..." by five other
     things; a page with a back arrow no longer carries the mark or search.
   - A bar at the bottom you can reach, with a clear lit tab.
   - Page tabs that scroll without losing their first tab, and stay in view.
   - Long pages cut into tabs (a story's chapters / details / notes,
     Settings' look / reading / account) rather than one column three
     screens tall.
   - Nothing sideways in the middle of the screen: the only page gesture is
     a drag from the left edge, for Back (js/views/nav.js).
   ========================================================================== */

html[data-layout="phone"]{
  --gutter:16px;
  --nav-h:60px;
  /* The header's real height is measured and written here by nav.js, so what
     sticks under it sits exactly under it. This is the first-paint guess. */
  --top-h:calc(var(--safe-t) + 58px);
  --r-lg:20px;
}

/* 16px in a field: anything smaller and iOS zooms the page when one is
   focused, and it is the size a thumb-typed line should be read at. */
[data-layout="phone"] input,
[data-layout="phone"] textarea,
[data-layout="phone"] select{font-size:16px}

/* ---------- header ---------- */
[data-layout="phone"] .top{
  gap:4px;min-height:var(--top-h);
  padding:calc(var(--safe-t) + 8px) var(--gutter) 8px;
}
[data-layout="phone"] .top .mark{width:36px;height:36px;border-radius:10px;margin-right:6px}
[data-layout="phone"] .top .wordmark{font-size:21px}
[data-layout="phone"] .top .tagline{font-size:11px;margin-top:1px}
[data-layout="phone"] .top .icb{width:42px;height:42px}
[data-layout="phone"] .top .pfbtn{width:36px;height:36px;margin-left:2px}
/* Where there is a back arrow it is the way out, and it takes the mark's
   place; search stays on the three tabs. That leaves the page's name, which
   is what the header is for, the room it was missing. */
[data-layout="phone"] .top .tback{width:44px;height:44px;margin:0 0 0 -10px}
[data-layout="phone"] .top:has(.tback:not([hidden])) .mark,
[data-layout="phone"] .top:has(.tback:not([hidden])) [data-find]{display:none}

/* ---------- the bar at the bottom ---------- */
[data-layout="phone"] #nav{
  height:calc(var(--nav-h) + var(--safe-b));padding:6px 12px var(--safe-b);gap:4px;
}
[data-layout="phone"] #nav button{gap:2px;font-size:11px;letter-spacing:.01em}
[data-layout="phone"] #nav button i{
  width:58px;height:30px;border-radius:15px;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
}
[data-layout="phone"] #nav button.on i{background:var(--ac-dim)}
[data-layout="phone"] #nav button:active i{background:var(--press)}

/* ---------- page tabs ---------- */
/* Edge to edge, so a strip wider than the screen scrolls under the margin
   instead of stopping at it, left-aligned so the first tab can always be
   reached (a centred strip that overflows cuts its first tab off the left
   edge where it cannot be scrolled to - that was About on a profile), and
   faded at the right when there is more. */
[data-layout="phone"] .tabs{
  margin:0 calc(-1 * var(--gutter)) 14px;padding:0 24px 0 var(--gutter);gap:20px;
  justify-content:flex-start;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
}
[data-layout="phone"] .tabs button{min-height:48px;padding:14px 2px 12px;font-size:14.5px}
[data-layout="phone"] .tabs button:active{color:var(--text)}

/* ---------- buttons, switches, cards ---------- */
[data-layout="phone"] .btn{min-height:46px}
[data-layout="phone"] .btn.sm{min-height:40px;padding:9px 16px}
[data-layout="phone"] .seg button{min-height:36px;padding:8px 14px}
[data-layout="phone"] .card{padding:16px;border-radius:var(--r-lg)}
[data-layout="phone"] .field{margin-bottom:20px}
[data-layout="phone"] .inp{padding:12px 14px}
[data-layout="phone"] #sheet{max-height:86dvh}
[data-layout="phone"] .shelf{gap:20px 14px}

/* ---------- the reader's bar ----------
   Close, the story's name, where you are in it, vote, names, Aa, read
   aloud: seven things and the mark and a search button besides, which left
   the story's name two letters. The mark and search go; the name has the
   room, which is what the bar is for. */
[data-layout="phone"] .rrow{gap:2px;padding:6px 6px}
[data-layout="phone"] .rrow .mark,
[data-layout="phone"] .rrow [data-find],
[data-layout="phone"] .rbrand .tagline{display:none}
[data-layout="phone"] .rrow .icb{width:40px;height:40px}
[data-layout="phone"] .rbrand{min-width:0;flex:1}

/* Menu items you can hit: 46px tall. */
[data-layout="phone"] #menu{min-width:220px}
[data-layout="phone"] #menu button{min-height:46px;font-size:15px;display:flex;align-items:center}

/* ---------- the Notebook: New is a button under the thumb ---------- */
[data-layout="phone"] #newStory{
  position:fixed;z-index:19;right:var(--gutter);
  bottom:calc(var(--nav-h) + var(--safe-b) + 14px);
  min-height:52px;padding:0 22px;border-radius:26px;font-size:15px;
  box-shadow:0 12px 30px rgba(var(--ac-deep-rgb),.5);
}
[data-layout="phone"] #v-notebook{padding-bottom:72px}

/* ==========================================================================
   A writer's page
   Banner, then who they are, then what you can do (Follow, Discord), then
   tabs that stay under the header while you read, then the page: their
   bio (folded when it is long), their stories, and the rest about them
   after, in one flat column rather than boxes inside boxes.
   ========================================================================== */
[data-layout="phone"] #v-profile.on{display:flex;flex-direction:column}
[data-layout="phone"] #v-profile > *{order:20}
/* The board and the lists keep a column width on a computer by centring
   themselves with auto margins; in this column that shrinks them to their
   contents instead of letting them fill it. */
[data-layout="phone"] #v-profile > .pboard,
[data-layout="phone"] #v-profile > .plists{margin:0;max-width:none;width:100%}
[data-layout="phone"] #v-profile > .top{order:0}
[data-layout="phone"] #v-profile > .phero{order:1}
[data-layout="phone"] #v-profile > .ptabbar{display:contents}
[data-layout="phone"] #v-profile > .ptabbar::after{display:none}
[data-layout="phone"] #v-profile .pedit{order:2}
[data-layout="phone"] #v-profile #pfTabs{order:3}
[data-layout="phone"] #v-profile > .pblocked{order:4}

[data-layout="phone"] .phero-in{margin-top:-42px;padding:0 var(--gutter) 4px}
[data-layout="phone"] .pavatar{width:88px;height:88px;margin-bottom:8px;font-size:28px;border-width:4px}
[data-layout="phone"] .pname{font-size:25px}
[data-layout="phone"] .pseal{width:24px;height:24px}
[data-layout="phone"] .pseal.logo{width:auto;height:30px}

/* Works / Followers / Following as three equal cells, each a full-size
   target (Followers and Following open their lists). */
[data-layout="phone"] .pstats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:14px;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
[data-layout="phone"] .pcounts,
[data-layout="phone"] .pfollow{display:contents}
[data-layout="phone"] .pcounts > div,
[data-layout="phone"] .pfollow button{min-width:0;min-height:60px;padding:10px 4px;justify-content:center}
[data-layout="phone"] .pfollow button{border-left:1px solid var(--line-soft)}
[data-layout="phone"] .pfollow button:active{background:var(--press)}

/* What you can do here: the main action takes the room, the rest are
   squares. Nothing wraps to a second row. */
[data-layout="phone"] .pedit{
  display:flex;flex-wrap:nowrap;gap:10px;width:100%;padding:14px 0 6px;
}
[data-layout="phone"] .pedit .btn{flex:1;min-width:0;min-height:46px}
[data-layout="phone"] .pedit .icb{flex:none;width:46px;height:46px;border:1px solid var(--line);background:var(--surface-2);color:var(--text)}

/* Under the header while the page scrolls, so the tabs are always one tap
   away rather than a scroll back up. */
[data-layout="phone"] #pfTabs{
  position:sticky;top:calc(var(--top-h) - 1px);z-index:4;
  margin-bottom:16px;background:var(--void);border-bottom:1px solid var(--line-soft);
}

/* About. The card around it goes; its pieces become rows of one column,
   ordered as a visitor wants them: bio, the ways to reach them, badges,
   their stories, then the facts and the faces. */
[data-layout="phone"] .pcols{display:flex;flex-direction:column;gap:0}
[data-layout="phone"] .pside{display:contents}
[data-layout="phone"] .pside > *{order:30}
[data-layout="phone"] .pabout{order:1;font-size:15.5px;line-height:1.65}
[data-layout="phone"] .pmore{order:2}
[data-layout="phone"] .pdiscord{order:3}
[data-layout="phone"] .pbadges{order:4}
[data-layout="phone"] .ppast{order:5}
[data-layout="phone"] .pmain{order:6}
[data-layout="phone"] .psince{order:7}
[data-layout="phone"] #pfFollowing{order:8}
[data-layout="phone"] #pfFollowers{order:9}
/* A long bio is folded to a few lines with Read more (profile.js foldBio). */
[data-layout="phone"] .pabout.fold{
  max-height:calc(1.65em * 6);overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 2.4em),transparent);
          mask-image:linear-gradient(#000 calc(100% - 2.4em),transparent);
}
[data-layout="phone"] .pmore{
  align-self:flex-start;min-height:44px;margin:0 0 4px -4px;padding:0 4px;
  font-size:14px;font-weight:700;color:var(--ac-soft);
}
[data-layout="phone"] .pdiscord{margin-top:10px;min-height:52px}
[data-layout="phone"] .pbadges{margin-top:14px;gap:8px}
[data-layout="phone"] .pbadge{padding:7px 12px;font-size:12.5px}
[data-layout="phone"] .pmain{
  margin-top:18px;padding:16px 0 0;background:none;border:0;border-top:1px solid var(--line-soft);border-radius:0;
}
[data-layout="phone"] .phead{font-size:21px}
[data-layout="phone"] .pstory{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px 0}
[data-layout="phone"] .pstory:active .psttitle{color:var(--ac-soft)}
[data-layout="phone"] .psttitle{font-size:18px}
[data-layout="phone"] .psince{margin-top:10px}
[data-layout="phone"] .pfaces{margin-top:16px;padding-top:14px}
[data-layout="phone"] .face.pf{width:42px;height:42px}

/* Their board and message board: the box to write in, then the posts, with
   the same flat hairline rhythm. */
[data-layout="phone"] .pboard .card,
[data-layout="phone"] .plists .card{border-radius:var(--r-lg)}

/* ==========================================================================
   A story you are writing
   The page was every section down one column, 2,700px of it, with the
   chapters - the thing you came for - at the very bottom. It is the
   computer layout's idea now: the card with the cover and the buttons, then
   Chapters / Details / Miscellaneous, one at a time.
   ========================================================================== */
[data-layout="phone"] #v-story.on{display:flex;flex-direction:column}
[data-layout="phone"] #v-story > *{order:20}
[data-layout="phone"] #v-story > .top{order:0}
[data-layout="phone"] #v-story .scols,
[data-layout="phone"] #v-story .sside,
[data-layout="phone"] #v-story .smain{display:contents}
[data-layout="phone"] #v-story .shero{order:1}
[data-layout="phone"] #v-story .stabs{
  display:flex;order:2;position:sticky;top:calc(var(--top-h) - 1px);z-index:4;
  margin-top:10px;background:var(--void);border-bottom:1px solid var(--line-soft);
}
[data-layout="phone"] #v-story [data-pane="Chapters"]{order:3}
[data-layout="phone"] #v-story [data-pane="Details"]{order:4}
[data-layout="phone"] #v-story .scover{order:5}
[data-layout="phone"] #v-story .swriters{order:6}
[data-layout="phone"] #v-story [data-pane="Miscellaneous"]{order:7}
[data-layout="phone"] #v-story .sreadrow{order:8}
[data-layout="phone"] #v-story .sread{display:none}
/* One section at a time. Writers and the cover belong to Details; the
   switch already names each section, so its own heading goes. */
[data-layout="phone"] #v-story [data-pane]:not(.on){display:none}
[data-layout="phone"] #v-story:not([data-pane="Details"]) .scover,
[data-layout="phone"] #v-story:not([data-pane="Details"]) .swriters,
[data-layout="phone"] #v-story:not([data-pane="Chapters"]) .sreadrow{display:none}
[data-layout="phone"] #v-story .smain > .block > h2,
[data-layout="phone"] #v-story .smain .blockhead h2{display:none}
[data-layout="phone"] #v-story div.block{padding:16px 0 18px}
[data-layout="phone"] #v-story .blockhead{justify-content:space-between;align-items:center}
[data-layout="phone"] .shero{margin:6px 0 0}

/* A part's row: its title and what it is across the width, the eye (public
   or private) and one more-button - move, copy and delete are a menu behind
   it, not four 34px icons that left the title a third of the row. */
[data-layout="phone"] .ch .acts [data-up],
[data-layout="phone"] .ch .acts [data-down],
[data-layout="phone"] .ch .acts [data-dup],
[data-layout="phone"] .ch .acts [data-del]{display:none}
[data-layout="phone"] .ch .acts .cmore{display:inline-flex;width:40px;height:40px}
[data-layout="phone"] .ch .acts .vis{width:40px;height:40px}
[data-layout="phone"] .ch{padding:10px 6px 10px 12px;gap:10px}
[data-layout="phone"] .ch .n{width:22px}
[data-layout="phone"] .ch .body{gap:3px}
[data-layout="phone"] .ch .body b{font-size:16px}
[data-layout="phone"] .ch .body span{font-size:12.5px;line-height:1.35}

/* ==========================================================================
   Settings
   Three groups, one at a time, in a strip under the header - how it looks,
   how it reads, your account and data. Account is the one people come for,
   and it was a screen and a half of other cards away.
   ========================================================================== */
[data-layout="phone"] .setstabs{display:flex;position:sticky;top:calc(var(--top-h) - 1px);z-index:4;margin-bottom:0;background:var(--void);border-bottom:1px solid var(--line-soft)}
[data-layout="phone"] #v-settings .setcol:not(.on){display:none}
[data-layout="phone"] #v-settings .setcol > .card:first-child{margin-top:16px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [data-layout="phone"] #nav button i{transition:none}
}