/* ==========================================================================
   Locuust - the apps' own design (Android and iPhone)

   Everything here starts with html[data-shell="app"], which js/layout.js sets
   only inside the Capacitor apps, so the website - phone or computer - never
   matches a line of it. It loads after phone.css and builds on it: in the app
   both apply, and this file wins where they disagree. Do not change what
   phone.css draws to suit the app; override it here.

   html[data-os="ios"] and html[data-os="android"] mark the few places the two
   phones differ. Anything with neither is shared.

   The plan, in phases: APP-UI-PLAN.md.
   ========================================================================== */

html[data-shell="app"]{
  /* UI text is each phone's own face; titles stay Playfair, prose Literata. */
  --sys:-apple-system,'SF Pro Text',Manrope,sans-serif;
  --large-title:34px;
  --sep:#2A2D3B;
  --fill-1:#1C1D26;
  --fill-2:#3A3B4A;
  --group:#14151E;
  /* Filled buttons: white on this passes 4.5:1, white on --ac does not. */
  --cta:#6D28D9;
  --sw-off:#3A3B4A;     /* a switch that is off */

  /* The header is two rows, a 44px row of buttons and the large title under
     it. nav.js measures the real height and writes it over this guess. */
  --top-h:calc(var(--safe-t) + 100px);
  --nav-h:49px;
}
html[data-shell="app"][data-os="android"]{
  --sys:Manrope,sans-serif;
  --nav-h:72px;
}
html[data-shell="app"][data-theme="light"]{
  --sep:#D8DAE4;
  --fill-1:#E9E9EF;
  --fill-2:#FFFFFF;
  --group:#FFFFFF;
  --sw-off:#E1E2EA;
}

html[data-shell="app"] body{font-family:var(--sys)}

/* The phone's screen decides the layout in the app, so Settings has nothing
   to offer here (layout.js ignores the choice). */
html[data-shell="app"] .card:has(#layoutSeg){display:none}

/* ---------- the header ----------
   Row one: back at the left, what the page needs at the right. Row two: the
   page's name, large. The mark and the line under the name are not here;
   they are in Settings. A page with a back arrow is a sub-page and keeps one
   row, its name beside the arrow. */
html[data-shell="app"] .top{
  flex-wrap:wrap;align-content:flex-start;justify-content:flex-end;gap:0 2px;
  min-height:0;
  padding:calc(var(--safe-t) + 4px) var(--gutter) 2px;
}
html[data-shell="app"] .top.stuck::before{
  background:color-mix(in srgb,var(--void) 95%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 .5px 0 var(--sep);
}
html[data-shell="app"] .top .mark,
html[data-shell="app"] .top .tagline{display:none}
html[data-shell="app"] .top .icb{width:44px;height:44px;color:var(--ac-soft)}
html[data-shell="app"] .top .pfbtn{width:34px;height:34px;margin:0 2px 0 6px}
/* You is a tab now; the face stays only where the account menu lives. */
html[data-shell="app"] .view:not(#v-profile) .top .pfbtn{display:none}

html[data-shell="app"] .top .titles{order:10;flex:0 0 100%;padding:0 0 4px}
html[data-shell="app"] .top .wordmark{
  font-size:var(--large-title);font-weight:900;line-height:1.12;letter-spacing:0;
}

/* Where there is a back arrow: one row, the name beside it. */
html[data-shell="app"] .top:has(.tback:not([hidden])){flex-wrap:nowrap;align-items:center;padding-bottom:6px}
html[data-shell="app"] .top:has(.tback:not([hidden])) .titles{order:0;flex:1 1 0;padding:0}
html[data-shell="app"] .top:has(.tback:not([hidden])) .wordmark{font-size:20px;font-weight:700;line-height:1.2}
html[data-shell="app"] .top .tback{margin:0 0 0 -10px;color:var(--ac-soft)}

/* ---------- the tab bar ---------- */
html[data-shell="app"] #nav{
  height:calc(var(--nav-h) + var(--safe-b));padding:0 8px var(--safe-b);gap:0;
  background:var(--chrome);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:.5px solid var(--sep);
}
html[data-shell="app"] #nav button{
  gap:2px;padding:6px 0 0;border-radius:0;
  font-size:10px;font-weight:600;letter-spacing:.01em;color:var(--muted);
}
html[data-shell="app"] #nav button i{
  width:auto;height:auto;border-radius:0;background:none;
}
html[data-shell="app"] #nav button i svg{width:26px;height:26px}
html[data-shell="app"] #nav button.on{color:var(--ac-soft)}
html[data-shell="app"] #nav button.on i,
html[data-shell="app"] #nav button:active i{background:none}
html[data-shell="app"] #nav button:active{opacity:.6}

/* Android: a taller bar, larger labels, a pill behind the lit icon. */
html[data-shell="app"][data-os="android"] #nav{padding-top:8px}
html[data-shell="app"][data-os="android"] #nav button{font-size:12px;gap:4px;padding-top:0}
html[data-shell="app"][data-os="android"] #nav button i{
  width:64px;height:32px;border-radius:16px;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
}
html[data-shell="app"][data-os="android"] #nav button i svg{width:24px;height:24px}
html[data-shell="app"][data-os="android"] #nav button.on i{background:var(--ac-dim)}
html[data-shell="app"][data-os="android"] #nav button:active{opacity:1}
html[data-shell="app"][data-os="android"] #nav button:active i{background:var(--press)}

/* ==========================================================================
   Phase 2 - the controls everything is built from
   ========================================================================== */

/* ---------- segmented control ----------
   renderSeg writes data-n, the number of options. Two or three page tabs
   (Shelf/Desk, Reading/Saved/History, Chapters/Details/Miscellaneous, Look/
   Reading/Account, Stories/Profiles, Summary/Parts) are one segmented control;
   four or more (a profile's) stay a strip that scrolls. */
html[data-shell="app"] .tabs[data-n="2"]{--n:2}
html[data-shell="app"] .tabs[data-n="3"]{--n:3}
html[data-shell="app"] .tabs[data-n="2"],
html[data-shell="app"] .tabs[data-n="3"]{
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;
  overflow:visible;
  margin:0 calc(-1 * var(--gutter)) 6px;padding:8px calc(var(--gutter) + 2px);
  border:0;-webkit-mask-image:none;mask-image:none;
}
/* Beside another control (the Notebook's Sort) it takes the room that is left,
   inside the page's own margins, with no rule under it. */
html[data-shell="app"] .nbbar{border-bottom:0;margin-bottom:6px}
html[data-shell="app"] .nbbar .tabs[data-n]{flex:1;min-width:0;margin:0;padding:8px 2px}
html[data-shell="app"] .nbbar .tabs[data-n]::before{inset:6px 0}
/* The ones that stick (phone.css) already hold the ::before; the rest need to. */
html[data-shell="app"] .tabs[data-n]:not(.stabs):not(.setstabs):not(#pfTabs){position:relative}
html[data-shell="app"] .tabs[data-n="2"]::before,
html[data-shell="app"] .tabs[data-n="3"]::before{
  content:'';position:absolute;inset:6px var(--gutter);border-radius:9px;background:var(--fill-1);
}
html[data-shell="app"] .tabs[data-n="2"] button,
html[data-shell="app"] .tabs[data-n="3"] button{
  position:relative;min-height:28px;padding:0 6px;border-radius:7px;
  font-size:13px;font-weight:500;color:var(--text);text-align:center;
  background:none;overflow:hidden;text-overflow:ellipsis;
  transition:background .18s var(--ease);
}
html[data-shell="app"] .tabs[data-n="2"] button.on,
html[data-shell="app"] .tabs[data-n="3"] button.on{
  background:var(--fill-2);font-weight:600;color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.08);
}
/* phone.css lays the story page's strip out by id; match it so the grid wins. */
html[data-shell="app"] #v-story .stabs[data-n]{
  display:grid;margin:0 calc(-1 * var(--gutter)) 6px;padding:8px calc(var(--gutter) + 2px);
  background:var(--void);border:0;
}
/* The strips that stick under the header keep a page-coloured ground so the
   page does not show through them. */
html[data-shell="app"] .stabs[data-n],
html[data-shell="app"] .setstabs[data-n]{background:var(--void);border:0}

/* An option picked (.seg: a rating, a status, the page's light or dark). */
html[data-shell="app"] .seg{
  display:flex;width:100%;gap:0;padding:2px;margin-bottom:14px;
  background:var(--fill-1);border:0;border-radius:9px;box-sizing:border-box;
}
html[data-shell="app"] .seg button{
  flex:1 1 0;min-height:30px;padding:0 8px;border-radius:7px;
  font-size:13px;font-weight:500;color:var(--text);text-align:center;
}
html[data-shell="app"] .seg button.on{
  background:var(--fill-2);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.08);
}
/* Many options wrap into rows rather than squeeze. */
html[data-shell="app"] .seg.wrap{flex-wrap:wrap;gap:2px}
html[data-shell="app"] .seg.wrap button{flex:1 1 auto}

/* ---------- grouped lists ----------
   A card is a group: a rounded block on the page, its heading above it in
   small capitals. The heading is still the card's first child in the markup
   (so it is read first); it is only drawn above the block. */
html[data-shell="app"] .card{
  position:relative;margin:36px 0 0;padding:6px 16px;
  background:var(--group);border:0;border-radius:12px;
}
html[data-shell="app"] #v-settings .setcol > .card:first-child{margin-top:36px}
html[data-shell="app"] .card > h2:first-child{
  position:absolute;left:16px;right:16px;bottom:100%;margin:0 0 7px;
  font-family:var(--sys);font-size:13px;font-weight:500;line-height:1.2;
  text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
}
html[data-shell="app"] .card .sub{padding:8px 0}
html[data-shell="app"] .card .hint{padding:0 0 8px;margin-top:0}
html[data-shell="app"] .card .field{margin:0;padding:10px 0}
html[data-shell="app"] .card .field + .field{border-top:.5px solid var(--sep)}
html[data-shell="app"] .card .divide{height:.5px;background:var(--sep);margin:6px -16px}
html[data-shell="app"] .card .row{padding:6px 0 8px}

/* Rows that open something: a cell, a chevron at the end. */
html[data-shell="app"] .rowcard{min-height:44px;padding:8px 0}
html[data-shell="app"] .rowcard + .rowcard{border-top:.5px solid var(--sep)}
html[data-shell="app"] .rowcard b{font-family:var(--sys);font-size:17px;font-weight:400}
html[data-shell="app"] .rowcard small{font-size:14px}
html[data-shell="app"] .rowcard .go{color:var(--faint)}

/* A list of actions (Settings -> Your data): each its own cell. */
html[data-shell="app"] .picks{margin-top:0}
html[data-shell="app"] .picks.stacked{gap:0;margin:0 -16px}
html[data-shell="app"] .picks.stacked button{
  min-height:44px;padding:10px 16px;border-radius:0;font-size:17px;font-weight:400;
}
html[data-shell="app"] .picks.stacked button + button{border-top:.5px solid var(--sep)}

/* ---------- switches ---------- */
html[data-shell="app"] .tog{
  min-height:44px;justify-content:space-between;flex-direction:row-reverse;
  font-size:17px;gap:16px;padding:6px 0;
}
html[data-shell="app"] .tog.small{font-size:15px}
html[data-shell="app"] .tog input{
  width:51px;height:31px;border-radius:16px;background:var(--sw-off);flex:none;
  transition:background .2s var(--ease);
}
html[data-shell="app"] .tog input::after{
  top:2px;left:2px;width:27px;height:27px;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
  transition:transform .2s var(--ease);
}
html[data-shell="app"] .tog input:checked{background:var(--ok)}
html[data-shell="app"] .tog input:checked::after{transform:translateX(20px)}
html[data-shell="app"] .tog.small input{width:51px;height:31px}
html[data-shell="app"] .tog.small input::after{width:27px;height:27px}
html[data-shell="app"] .tog.small input:checked::after{transform:translateX(20px)}

/* Android's switch: a wider track with an outline and a small thumb that
   grows and takes the accent when it is on. */
html[data-shell="app"][data-os="android"] .tog input,
html[data-shell="app"][data-os="android"] .tog.small input{
  width:52px;height:32px;border-radius:16px;background:var(--fill-1);
  box-shadow:inset 0 0 0 2px var(--muted);
}
html[data-shell="app"][data-os="android"] .tog input::after,
html[data-shell="app"][data-os="android"] .tog.small input::after{
  top:8px;left:8px;width:16px;height:16px;background:var(--muted);box-shadow:none;
}
html[data-shell="app"][data-os="android"] .tog input:checked{
  background:var(--cta);box-shadow:none;
}
html[data-shell="app"][data-os="android"] .tog input:checked::after{
  top:4px;left:4px;width:24px;height:24px;background:#fff;transform:translateX(20px);
}

/* ---------- buttons ---------- */
html[data-shell="app"] .btn{
  min-height:50px;padding:0 22px;border:0;border-radius:25px;
  background:var(--fill-1);color:var(--ac-soft);
  font-family:var(--sys);font-size:17px;font-weight:600;box-shadow:none;
}
html[data-shell="app"] .btn.pri{background:var(--cta);color:#fff;box-shadow:none}
html[data-shell="app"] .btn.ghost{background:transparent}
html[data-shell="app"] .btn.danger{color:var(--danger)}
html[data-shell="app"] .btn.sm{min-height:36px;padding:0 16px;border-radius:18px;font-size:15px}
html[data-shell="app"] .btn:active{opacity:.7;transform:none}
html[data-shell="app"] .btn:disabled{opacity:.4}

/* ---------- fields ---------- */
html[data-shell="app"] .inp{
  background:var(--fill-1);border:0;border-radius:10px;padding:10px 12px;
}
html[data-shell="app"] .inp:focus-within{box-shadow:0 0 0 2px rgba(var(--ac-rgb),.55)}
html[data-shell="app"] .inp input,
html[data-shell="app"] .inp textarea,
html[data-shell="app"] .inp select{font-family:var(--sys);font-size:17px}
html[data-shell="app"] .field label{
  font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px;
}

/* ---------- sheets ---------- */
html[data-shell="app"] #scrim{background:rgba(0,0,0,.4)}
html[data-shell="app"] #sheet{
  border-top:0;border-radius:13px 13px 0 0;background:var(--surface);
  padding-top:8px;
}
html[data-shell="app"] #sheet .grab{width:36px;height:5px;margin-bottom:16px;background:var(--fill-2)}
html[data-shell="app"] #sheet h3{font-family:var(--sys);font-size:17px;font-weight:600;text-align:center}
html[data-shell="app"][data-os="android"] #sheet{border-radius:28px 28px 0 0}
html[data-shell="app"][data-os="android"] #sheet .grab{width:32px;height:4px;background:var(--muted);opacity:.5}
html[data-shell="app"][data-os="android"] #sheet h3{text-align:left;font-size:22px;font-weight:600}

/* ---------- menus ---------- */
html[data-shell="app"] #menu{
  min-width:250px;padding:0;overflow:hidden;border:0;border-radius:13px;
  background:color-mix(in srgb,var(--surface-2) 97%,transparent);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
html[data-shell="app"] #menu button{
  min-height:44px;padding:0 16px;border-radius:0;font-size:17px;font-weight:400;
}
html[data-shell="app"] #menu button + button{border-top:.5px solid var(--sep)}
html[data-shell="app"] #menu button:hover{background:none}
html[data-shell="app"] #menu button:active{background:var(--press)}
html[data-shell="app"] .menuhead{padding:10px 16px;margin:0;border-bottom:.5px solid var(--sep)}
html[data-shell="app"][data-os="android"] #menu{
  min-width:200px;padding:8px 0;border-radius:4px;
  background:var(--surface-2);box-shadow:0 6px 20px rgba(0,0,0,.5);
}
html[data-shell="app"][data-os="android"] #menu button{
  min-height:48px;font-size:16px;padding:0 16px;
}
html[data-shell="app"][data-os="android"] #menu button + button{border-top:0}

/* ==========================================================================
   Phase 3 - Home, the Notebook, the editor, the story pages
   ========================================================================== */

/* The magnifier and the little chevron, as masks so they take a colour. */
html[data-shell="app"]{
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ---------- section headings ---------- */
html[data-shell="app"] .sechead{
  font-family:var(--sys);font-size:22px;font-weight:700;line-height:1.2;margin:24px 0 10px;
}
html[data-shell="app"] .shelf + .sechead,
html[data-shell="app"] .chlist + .sechead{margin-top:28px}

/* ---------- search fields ----------
   Home's is always there under the title; the Notebook's opens from its
   magnifier. Both are the rounded filled field with the glass inside it. */
html[data-shell="app"] #homeSrow{display:flex;margin:0 0 8px}
html[data-shell="app"] #homeSearchBtn,
html[data-shell="app"] #homeQClose{display:none}
html[data-shell="app"] .srow .inp{position:relative;padding-left:38px}
html[data-shell="app"] .srow .inp::before{
  content:'';position:absolute;left:12px;top:50%;width:17px;height:17px;margin-top:-8.5px;
  background:var(--muted);
  -webkit-mask:var(--i-search) center/contain no-repeat;mask:var(--i-search) center/contain no-repeat;
}

/* ---------- Continue reading / Continue writing ----------
   One grouped block, a cell for each story, a chevron at the end. */
html[data-shell="app"] .resume{
  gap:12px;padding:12px 14px;border:0;border-radius:12px;background:var(--group);
}
html[data-shell="app"] .conts{display:block;background:var(--group);border-radius:12px;overflow:hidden}
html[data-shell="app"] .conts .resume{background:none;border-radius:0}
html[data-shell="app"] .conts .resume + .resume{border-top:.5px solid var(--sep)}
html[data-shell="app"] .resume .rart{width:52px;height:78px;border-radius:6px}
html[data-shell="app"] .resume .rtxt{gap:3px}
html[data-shell="app"] .resume .rtxt b{font-family:var(--sys);font-size:17px;font-weight:600}
html[data-shell="app"] .resume .rtxt span{font-size:14px}
html[data-shell="app"] .resume:active{background:var(--press)}

/* ---------- a row of covers (Home: from people you follow) ---------- */
html[data-shell="app"] #feed .shelf.hrow,
html[data-shell="app"] #homeTop .shelf.hrow{
  display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:108px;gap:12px;
  margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  scroll-padding-left:var(--gutter);
}
html[data-shell="app"] #feed .shelf.hrow::-webkit-scrollbar,
html[data-shell="app"] #homeTop .shelf.hrow::-webkit-scrollbar{display:none}
html[data-shell="app"] #feed .shelf.hrow .tile,
html[data-shell="app"] #homeTop .shelf.hrow .tile{scroll-snap-align:start}
html[data-shell="app"] #feed .shelf.hrow .tile .art,
html[data-shell="app"] #homeTop .shelf.hrow .tile .art{border-radius:8px;margin-bottom:6px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
html[data-shell="app"] #feed .shelf.hrow .tile h3,
html[data-shell="app"] #homeTop .shelf.hrow .tile h3{font-family:var(--sys);font-size:14px;font-weight:600}

/* ---------- the Notebook's shelf: a grouped list ---------- */
html[data-shell="app"] #shelf .shelf{display:block;background:var(--group);border-radius:12px;overflow:hidden}
html[data-shell="app"] #shelf .tile{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 14px;column-gap:12px;align-items:center;
  width:100%;padding:10px 14px;animation:none;
}
html[data-shell="app"] #shelf .tile:active{background:var(--press)}
html[data-shell="app"] #shelf .tile .art{
  grid-column:1;grid-row:1 / span 6;width:44px;margin:0;border-radius:5px;box-shadow:none;
}
html[data-shell="app"] #shelf .tile .art .rbadge{display:none}
html[data-shell="app"] #shelf .tile h3,
html[data-shell="app"] #shelf .tile p,
html[data-shell="app"] #shelf .tile .goalbar{grid-column:2}
html[data-shell="app"] #shelf .tile h3{font-family:var(--sys);font-size:17px;font-weight:600}
html[data-shell="app"] #shelf .tile p{font-size:14px;margin-top:2px}
html[data-shell="app"] #shelf .tile p.pubstate{font-size:13px}
html[data-shell="app"] #shelf .tile .goalbar{height:4px;margin-top:7px}
html[data-shell="app"] #shelf .tile::after{
  content:'';grid-column:3;grid-row:1 / span 6;width:14px;height:14px;background:var(--faint);
  -webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat;
}
html[data-shell="app"] #shelf .tile + .tile::before{
  content:'';position:absolute;left:70px;right:0;top:0;height:.5px;background:var(--sep);
}
/* New is a plus in the header, not a floating button. */
html[data-shell="app"] #newStory{
  position:static;width:44px;height:44px;min-height:0;padding:0;border-radius:0;
  background:none;box-shadow:none;color:var(--ac-soft);font-size:0;
  display:flex;align-items:center;justify-content:center;
}
html[data-shell="app"] #newStory::before{
  content:'';width:26px;height:26px;background:currentColor;
  -webkit-mask:var(--i-plus) center/contain no-repeat;mask:var(--i-plus) center/contain no-repeat;
}
html[data-shell="app"] .sortbtn{color:var(--ac-soft);font-size:15px}

/* ---------- the editor ----------
   Its header is rebuilt by js/native.js: back, the part's name over where it
   is saved, then the page's buttons. */
html[data-shell="app"] .ehead{
  gap:0;padding:calc(var(--safe-t) + 4px) 8px 6px;border-bottom:.5px solid var(--sep);
}
html[data-shell="app"] .ehead .espace{display:none}
html[data-shell="app"] .ehead .icb{color:var(--ac-soft)}
html[data-shell="app"] .etb{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:0 6px;
}
html[data-shell="app"] .etb b{
  max-width:100%;font-size:15px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-shell="app"] .etbsub{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.2;color:var(--muted)}
html[data-shell="app"] .etbsub .saved{width:6px;height:6px;margin:0}
html[data-shell="app"] .esavedat{font-size:11px;color:var(--muted)}
/* An iPhone's back says where it goes; Done puts the keyboard away. */
html[data-shell="app"][data-os="ios"] #eBack{width:auto;padding:0 6px 0 0;gap:0;font-size:17px;font-weight:400}
html[data-shell="app"][data-os="ios"] #eBack::after{content:'Parts'}
html[data-shell="app"] .edone{
  height:44px;padding:0 8px;border:0;background:none;color:var(--ac-soft);
  font-family:var(--sys);font-size:17px;font-weight:600;
}
html[data-shell="app"] .edone:active{opacity:.6}
/* The bar along the bottom reads as the keyboard's own accessory bar. */
html[data-shell="app"] .efoot{
  background:color-mix(in srgb,var(--surface) 97%,transparent);
  border-top:.5px solid var(--sep);
}
html[data-shell="app"] .fmtdock{padding:4px 8px 0;gap:4px}
html[data-shell="app"] .ebar{padding:2px 8px calc(2px + var(--safe-b))}
html[data-shell="app"] .ebar .icb{color:var(--muted)}
html[data-shell="app"] .ebar .icb.on{color:var(--ac-soft)}
html[data-shell="app"] .ecount{font-family:var(--sys);font-size:13px}

/* ---------- a published story's page ----------
   The cover centred over its title and writer, the counts in cells, the way
   in as a capsule with Save, list and Share beside it. */
html[data-shell="app"] .bkhero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;margin:2px 0 14px;
}
html[data-shell="app"] .bkhero .art{
  width:132px;flex:none;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
html[data-shell="app"] .bkmeta{align-items:center;width:100%;gap:6px;padding-top:16px}
html[data-shell="app"] .bktitle{font-size:26px;font-weight:900;line-height:1.15}
html[data-shell="app"] .bkby{align-self:center;font-size:15px;font-weight:400;color:var(--muted)}
html[data-shell="app"] .bkby span:last-child{color:var(--ac-soft)}
html[data-shell="app"] .bkstats{
  display:flex;flex-wrap:nowrap;gap:0;width:100%;margin-top:10px;
}
html[data-shell="app"] .bkstats span{
  flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:1px;padding:2px 0;
}
html[data-shell="app"] .bkstats span + span{border-left:.5px solid var(--sep)}
html[data-shell="app"] .bkstats svg{display:none}
html[data-shell="app"] .bkstats b{font-size:17px;font-weight:700}
html[data-shell="app"] .bkstats small{display:block;font-size:12px;color:var(--muted)}
html[data-shell="app"] .bkacts{width:100%;margin-top:16px;gap:10px}
html[data-shell="app"] .bksave{
  width:50px;height:50px;border:0;background:var(--fill-1);color:var(--ac-soft);
}
html[data-shell="app"] .bksave.on{background:var(--ac-dim)}
html[data-shell="app"] .bkblurb{width:100%;margin-top:18px;text-align:left}
html[data-shell="app"] .bkline{
  margin:0 0 8px;padding:12px 16px;border-radius:12px;background:var(--group);
  align-items:center;font-size:15px;
}
html[data-shell="app"] .bktag{
  padding:6px 12px;border:0;border-radius:15px;background:var(--fill-1);font-size:14px;font-weight:500;
}
html[data-shell="app"] #bkParts{background:var(--group);border-radius:12px;overflow:hidden;gap:0}
html[data-shell="app"] #bkParts .ch{border:0;border-radius:0;background:none}
html[data-shell="app"] #bkParts .ch + .ch{border-top:.5px solid var(--sep)}
html[data-shell="app"] #bkParts .ch:active{background:var(--press)}
html[data-shell="app"] #bkParts .ch .body b{font-family:var(--sys);font-size:17px;font-weight:500}
html[data-shell="app"] .bkmini{border:0;background:var(--group);border-radius:12px}

/* ---------- a story you are writing ----------
   The same top as a reader's page: cover, state, then the buttons as capsules
   across the width. */
html[data-shell="app"] .shero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  margin:2px 0 6px;padding:0;background:none;border:0;border-radius:0;
}
html[data-shell="app"] .shero .art{width:132px;flex:none;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
html[data-shell="app"] .shmeta{align-items:center;width:100%;gap:4px;padding-top:14px}
html[data-shell="app"] .shmeta .pubstate{justify-content:center;font-size:13px}
html[data-shell="app"] .shmeta .sub{padding:0}
html[data-shell="app"] .shacts{flex-direction:column;width:100%;margin-top:14px}
html[data-shell="app"] .shacts .btn{flex:none;width:100%}
html[data-shell="app"] .shero .hint{text-align:center}
html[data-shell="app"] #v-story .chlist{background:var(--group);border-radius:12px;overflow:hidden;gap:0}
html[data-shell="app"] #v-story .chlist .ch{border:0;border-radius:0;background:none}
html[data-shell="app"] #v-story .chlist .ch + .ch{border-top:.5px solid var(--sep)}
html[data-shell="app"] #v-story .chlist .ch .body b{font-family:var(--sys);font-size:17px;font-weight:500}

/* ==========================================================================
   Phase 4 - the rest of the screens, and what a signed-out phone sees
   ========================================================================== */

html[data-shell="app"]{
  --i-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 7l4-4 4 4'/%3E%3Cpath d='M7 10H5.5A1.5 1.5 0 0 0 4 11.5v8A1.5 1.5 0 0 0 5.5 21h13a1.5 1.5 0 0 0 1.5-1.5v-8a1.5 1.5 0 0 0-1.5-1.5H17'/%3E%3C/svg%3E");
}

/* ---------- the mark, drawn where it is no longer in the header ---------- */
html[data-shell="app"] .wmark,
html[data-shell="app"] .aboutmark{
  display:block;position:relative;overflow:hidden;flex:none;
  background:var(--mark-bg);box-shadow:0 0 0 1px var(--line);
}
html[data-shell="app"] .wmark::after,
html[data-shell="app"] .aboutmark::after{
  content:'';position:absolute;inset:0;background:var(--logo);
  -webkit-mask:url(logo.png) center/cover no-repeat;mask:url(logo.png) center/cover no-repeat;
  filter:drop-shadow(0 0 2px var(--logo-glow)) drop-shadow(0 0 5px var(--logo-glow));
}
html[data-shell="app"] .aboutmark{width:48px;height:48px;border-radius:13px}
html[data-shell="app"] .aboutrow{display:flex;align-items:center;gap:14px;padding:10px 0}
html[data-shell="app"] .abouttxt{display:flex;flex-direction:column;gap:2px;min-width:0}
html[data-shell="app"] .abouttxt b{font-family:var(--display);font-size:20px;font-weight:700}
html[data-shell="app"] .abouttxt span{font-size:14px;color:var(--muted)}

/* ---------- signed out: one screen, two ways in ---------- */
html[data-shell="app"] #v-land > :not(.welcome){display:none}
html[data-shell="app"] #v-land .welcome{
  min-height:100dvh;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--safe-t) + 24px) 28px calc(var(--safe-b) + 24px);
}
html[data-shell="app"] .wmark{width:96px;height:96px;border-radius:26px}
html[data-shell="app"] .welcome .wordmark{margin-top:22px;font-size:44px;font-weight:900;line-height:1.1}
html[data-shell="app"] .wline{
  max-width:290px;margin:12px 0 0;font-size:17px;line-height:1.45;color:var(--muted);
}
html[data-shell="app"] .wacts{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;margin-top:36px}
html[data-shell="app"] .wacts .btn{width:100%}
html[data-shell="app"] .wfine{margin:22px 0 0;font-size:13px;color:var(--muted)}
html[data-shell="app"] .wfine a{color:var(--ac-soft)}

/* ---------- Library: the same list as the Notebook's ---------- */
html[data-shell="app"] #readingList .shelf{display:block;background:var(--group);border-radius:12px;overflow:hidden}
html[data-shell="app"] #readingList .tile{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 14px;column-gap:12px;align-items:center;
  width:100%;padding:10px 14px;animation:none;
}
html[data-shell="app"] #readingList .tile:active{background:var(--press)}
html[data-shell="app"] #readingList .tile .art{
  grid-column:1;grid-row:1 / span 6;width:44px;margin:0;border-radius:5px;box-shadow:none;
}
html[data-shell="app"] #readingList .tile .art .rbadge{display:none}
html[data-shell="app"] #readingList .tile h3,
html[data-shell="app"] #readingList .tile p{grid-column:2}
html[data-shell="app"] #readingList .tile h3{font-family:var(--sys);font-size:17px;font-weight:600}
html[data-shell="app"] #readingList .tile p{font-size:14px;margin-top:2px}
html[data-shell="app"] #readingList .tile::after{
  content:'';grid-column:3;grid-row:1 / span 6;width:14px;height:14px;background:var(--faint);
  -webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat;
}
html[data-shell="app"] #readingList .tile + .tile::before{
  content:'';position:absolute;left:70px;right:0;top:0;height:.5px;background:var(--sep);
}

/* ---------- a writer's page ---------- */
html[data-shell="app"] .pname{font-size:26px;font-weight:900}
html[data-shell="app"] .pstats{border-width:.5px;border-color:var(--sep)}
html[data-shell="app"] .pfollow button{border-left:.5px solid var(--sep)}
html[data-shell="app"] .pedit .btn{min-height:44px;border-radius:22px;font-size:16px}
/* Share and More are round, beside the main action. */
html[data-shell="app"] #pfShare{
  flex:none;width:44px;min-width:44px;padding:0;font-size:0;
  display:flex;align-items:center;justify-content:center;
}
html[data-shell="app"] #pfShare::before{
  content:'';width:22px;height:22px;background:currentColor;
  -webkit-mask:var(--i-share) center/contain no-repeat;mask:var(--i-share) center/contain no-repeat;
}
html[data-shell="app"] .pedit .icb{
  width:44px;height:44px;border:0;border-radius:50%;background:var(--fill-1);color:var(--ac-soft);
}
html[data-shell="app"] .pdiscord{
  background:var(--group);border:0;border-radius:12px;min-height:50px;
}
html[data-shell="app"] .tabs button{font-family:var(--sys)}

/* ---------- alerts, lists and the like: rows with hairlines ---------- */
html[data-shell="app"] .card.allist{padding:0}
html[data-shell="app"] .alrow{padding:12px 16px;border-top:.5px solid var(--sep)}
html[data-shell="app"] .alrow:hover{background:none}
html[data-shell="app"] .alrow:active{background:var(--press)}
html[data-shell="app"] #v-list .chlist{background:var(--group);border-radius:12px;overflow:hidden;gap:0}
html[data-shell="app"] #v-list .chlist .ch{border:0;border-radius:0;background:none}
html[data-shell="app"] #v-list .chlist .ch + .ch{border-top:.5px solid var(--sep)}

/* ---------- the reader's bar: a navigation bar ---------- */
html[data-shell="app"] .rrow .icb{color:var(--ac-soft)}
html[data-shell="app"] #rBrand{font-family:var(--sys);font-size:17px;font-weight:600;letter-spacing:0}
html[data-shell="app"] .rbar .btn{font-size:15px}

/* ---------- comments: the box to write in stays where the thumb is ---------- */
html[data-shell="app"] #sheet .cbox{
  position:sticky;bottom:0;padding-top:8px;background:var(--surface);
}
html[data-shell="app"] #sheet .cmts{margin-bottom:8px}

/* ---------- the sign-in gate ---------- */
html[data-shell="app"] #v-login .lbox .lsub{color:var(--muted)}
html[data-shell="app"] #v-login .btn.block{width:100%}
html[data-shell="app"] #v-login .linkish{color:var(--ac-soft);font-size:15px}

/* ==========================================================================
   Phase 5 - behaviour: folding titles, back labels, swipe rows
   ========================================================================== */

/* ---------- a title that folds into the bar ---------- */
html[data-shell="app"] .top.compact .titles{
  position:absolute;left:var(--gutter);top:calc(var(--safe-t) + 4px);
  height:44px;max-width:calc(100% - 200px);padding:0;
  display:flex;align-items:center;flex:none;pointer-events:none;
}
html[data-shell="app"] .top.compact .wordmark{font-size:20px;font-weight:700;line-height:1.2}

/* ---------- back, saying where it goes (iPhone) ---------- */
html[data-shell="app"][data-os="ios"] .top .tback{
  width:auto;gap:0;padding:0 8px 0 0;font-size:17px;font-weight:400;color:var(--ac-soft);
}
html[data-shell="app"][data-os="ios"] .top .tback[data-back]::after{content:attr(data-back);margin-left:-2px}

/* ---------- swipe a row: Publish and Trash underneath ---------- */
html[data-shell="app"] #shelf .shelf{position:relative}
html[data-shell="app"] #shelf .tile{touch-action:pan-y;background:var(--group);z-index:1}
html[data-shell="app"] .swipeacts{
  position:absolute;right:0;z-index:0;display:flex;
}
html[data-shell="app"] .swipeacts[hidden]{display:none}
html[data-shell="app"] .swipeacts button{
  width:76px;border:0;border-radius:0;color:#fff;font-family:var(--sys);font-size:14px;font-weight:600;
}
html[data-shell="app"] .swipeacts .swpub{background:var(--cta)}
html[data-shell="app"] .swipeacts .swdel{background:#C0392B}
html[data-shell="app"] .swipeacts button:active{opacity:.8}

/* ---------- Home: no title bar, the search up top and the mark at the right ----------
   native.js moves #homeSrow into this header, so the search, the bell, the
   face and the Locuust mark share one row. */
html[data-shell="app"] #v-home .top{flex-wrap:nowrap;align-items:center;padding-bottom:8px}
html[data-shell="app"] #v-home .top .titles{display:none}
html[data-shell="app"] #v-home .top #homeSrow{order:0;flex:1 1 0;min-width:0;margin:0}
html[data-shell="app"] #v-home .top .abell{order:1}
html[data-shell="app"] #v-home .top .mark{display:block;order:3;width:36px;height:36px;border-radius:10px;margin:0 0 0 4px}

/* The Originals row on Home: the heading with See all beside it. */
html[data-shell="app"] .sechead.orighead{display:flex;align-items:baseline;justify-content:space-between}
html[data-shell="app"] #homeTop .sechead.orighead{margin-top:6px}
html[data-shell="app"] .sechead.orighead h2{margin:0;font:inherit}
html[data-shell="app"] .sechead.orighead .linkish{font-size:16px;font-weight:500}

/* An Android tablet gets the phone design in a column, not stretched. */
@media (min-width:700px){
  html[data-shell="app"] #app{max-width:600px;margin-left:auto;margin-right:auto}
}