/* The whole type scale, owned by the hub, so this file stands on its own.
   Every size below is read by rules in this file, and hub.css loads after
   style.css on every page, so these win. They are declared here rather
   than only in style.css because that file is meant to be a vendored copy
   (see the note under this block): if it is ever restored, hub.css must
   still resolve every var() it uses, or the chrome, bylines, dates and
   section bars all collapse to the body size at once. The review of
   2026-08-26 found exactly that hole, with only the two masthead tokens
   rescued and the other five stranded.

   The masthead pair was raised from 28/22 on 2026-08-26 (Zach: a little
   bigger). Cormorant Garamond has a small x-height, so 34px reads about
   as large as a 30px face with a normal one; the wordmark is bigger, not
   shouted. Nothing but the .brand rules reads --brand and --brand-small. */
:root {
  --brand: 34px;
  --brand-small: 26px;
  --h1: 24px;
  --title: 18px;
  --text: 16px;
  --ui: 13px;
  --meta: 11px;
}

/* hub.css - rules that belong to the hub and nowhere else.
   Loaded after style.css, which is meant to be a vendored byte-identical
   copy of drakes-website/style.css that is never edited here. Note, plainly:
   that is no longer true. The type-scale pass of 2026-08-26 edited the
   vendored copy, replacing its literal font sizes with the tokens above.
   Nothing in either repo enforces the rule (there is no drift check), and
   whether to restore the file and move those rules here, or to accept the
   fork, is Drake's and Zach's call, not this file's. Until it is settled,
   put every hub-only rule here so nothing new is added to the drift. */

/* the empty state, and whatever the generator leaves behind when the last post
   is pulled. Sits where a post row would sit, reads as absence, not an error. */
.posts .empty {
  color: var(--muted);
  font-style: italic;
  margin: 0;
  padding: 9px 2px;
}

/* button rows on the hub sit next to each other rather than stacking */
.btn + .btn { margin-left: 6px; }

/* the bans page (F13): the generator emits one .ban-box per ban inside .bans,
   and .empty while the registry holds no bans. The .ban-box chrome itself is
   vendored style.css; only the row internals and the empty state live here. */
.bans .empty {
  color: var(--muted);
  font-style: italic;
  margin: 0;
  padding: 9px 2px;
}
.ban-who { margin: 0 0 6px 0; font-weight: bold; }
.ban-reason { margin: 0; }

/* ---------------------------------------------------------------------------
   The 2003 theme. Overrides of the vendored style.css, kept here on purpose:
   the vendored copy stays byte-identical and everything below wins by loading
   second. Gray desktop, one white column with hard edges, a navy title bar,
   beveled gray buttons, blue underlined links. Times for the reading, Verdana
   for the chrome.
   ------------------------------------------------------------------------- */

html { background-color: #c6c6bd; }

body {
  background-color: #ffffff;
  border-left: 1px solid #6f6f6f;
  border-right: 1px solid #6f6f6f;
  max-width: 720px;
  padding: 0 24px 40px 24px;
  min-height: 100vh;
}

/* links: browser blue, visited purple, red on hover. The old web knew what a
   link looked like. */
a         { color: #0000ee; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover   { color: #cc0000; }

/* ---------------------------------------------------------------------------
   No accent stripes. Anywhere. Ever.
   A colored vertical bar down the left of a quote, a note, a result or an
   exhibit is not a 2003 typographic device, it is a 2024 chatbot one, and it
   reads as machine-written the moment it appears. style.css ships four of
   them and they all die here. A quotation is indented. That is the whole
   signal, the way a browser has drawn one since Mosaic. If a new stripe ever
   shows up in a review, it belongs in this block, set to 0, not on the page.
   ------------------------------------------------------------------------- */
blockquote {
  border-left: 0;
  margin: 14px 0 14px 32px;
  padding: 0;
  color: inherit;
}
.result.good,
.result.bad { border-left: 0; }

/* ---------- the title bar ---------- */

/* It comes down the page with you. Zach, 2026-08-31: "habits so that the
   banner on the top and all the buttons so that I can maneuver myself around
   the website kind of comes down the page with me rather than having to
   scroll all the way back up." A long piece is exactly where that matters,
   and it costs nothing anywhere else. */


.topbar {
  background-color: #003366;
  margin: 0 -24px 14px -24px;
  padding: 12px 24px 10px 24px;
  border-bottom: 3px double #000000;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Do not delete this block. Its font declarations are overridden by the
   masthead rule further down (same specificity, later wins), but its
   `color` is not: style.css paints .brand black and this is the only
   thing turning it white for the navy bar. Losing it puts black type on
   #003366. The review of 2026-08-26 caught this being described as dead. */
.brand {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--brand);
  letter-spacing: 0;
  color: #ffffff;
}
.brand:visited { color: #ffffff; }
.brand:hover   { color: #ffffff; }

.pill {
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
}

/* ---------- beveled buttons, the real kind ---------- */

.btn,
.nav a,
button {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  color: #000000;
  padding: 4px 10px;
  border: 2px outset #f5f5f5;
  border-radius: 0;
  background-color: #d4d0c8;
  background-image: none;
  box-shadow: none;
  text-decoration: none;
}
.btn:visited, .nav a:visited { color: #000000; }
.btn:hover, .nav a:hover, button:hover {
  color: #000000;
  border-color: #f5f5f5;
  background-color: #e2ded6;
  background-image: none;
}
.btn:active, .nav a:active, button:active {
  border-style: inset;
  background-color: #c8c4bc;
  background-image: none;
  box-shadow: none;
}

/* The nav travels with the bar. Zach, 2026-08-31: "I need the feed, the
   pledge, ban list, save post buttons to travel down with it as well." It sits
   under the bar, so its offset is the bar's own height, which only the browser
   knows: the chrome measures it into --bar-h (lib/chrome/actions.js) and this
   falls back to not sticking at all if no script ever runs, which is exactly
   how it behaved before. */
.nav {
  position: sticky;
  top: var(--bar-h, 0px);
  z-index: 29;
  border: 1px solid #808080;
  background-color: #ece9d8;
  padding: 5px 6px;
  gap: 4px;
  /* A row, so Sign out can sit at its far end (Zach, 2026-08-30). The
     rows themselves are inline-block and unchanged by this; the flex
     box only gives the last item somewhere to be pushed to. */
  display: flex;
  align-items: center;
}
/* Sign out, on the nav line and hard right, drawn only on your own page.
   margin-left:auto is the whole of the push: no float, no absolute, so
   it cannot overlap a row on a narrow screen. */
.nav-signout { margin: 0 0 0 auto; display: flex; }
.nav a.here {
  border-style: inset;
  background-color: #c8c4bc;
  background-image: none;
  /* Pressed in, not bolder. The vendored style.css bolds the row you are on,
     and bold is wider, so every row after it slid two or three pixels as you
     moved between pages: the one thing Zach asked three times for the nav not
     to do (2026-08-27). The inset border and the darker fill say where you are
     without changing a single width. */
  font-weight: normal;
}

/* ---------- headings as table-header bars ---------- */

h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--h1);
  letter-spacing: 0;
}

h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--title);
  font-weight: bold;
  color: #ffffff;
  background-color: #336699;
  border: 1px solid #003366;
  border-bottom: 1px solid #003366;
  padding: 4px 9px;
}

h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--title);
  font-weight: bold;
}

/* the pledge is a list, not an exhibit. No box, no tinted background, no
   accent stripe. It reads like the rest of the page. */
.note {
  border: 0;
  border-left: 0;
  background-color: transparent;
  padding: 0;
  margin: 18px 0;
}

/* ---------- forms, hard-edged ---------- */

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  border: 1px solid #7f9db9;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- small print ---------- */

.date { font-family: "Times New Roman", Times, serif; font-size: var(--meta); }

.footer {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  text-align: center;
  border-top: 1px solid #808080;
}

@media (max-width: 640px) {
  body { border-left: 0; border-right: 0; }
}

/* ---------------------------------------------------------------------------
   The Blog. Masthead, search, the feed, the banned list.
   ------------------------------------------------------------------------- */

/* The masthead wordmark, and the one element on the site that is not Times
   New Roman. Cormorant Garamond comes from the <link> in each page's head;
   Georgia is the fallback that still reads as a masthead. Weight 700, the
   top of the family: Cormorant is a light, high-contrast face, so 700 here
   is not a heavy face, it is this face with its stems filled in, which is
   what a wordmark reversed out of navy needs. Letter-spacing 0.5px keeps
   the tracking open. Playfair Display until 2026-08-26, then EB Garamond,
   then Cormorant Garamond at 600, then 700, all the same day (Zach, in
   order: more elegant; bigger and more elegant; a little bolder). The
   objection that Cormorant's hairlines went grey reversed at 22px is
   answered twice over now, by the larger size above and by this weight. */
.brand {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: var(--brand);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* The masthead is type again (Zach, 2026-08-31: "i want to revert the blog
   logo from the png, to the what you had"). The wordmark PNG sat over these
   rules for four days; the rules above are what draws it now, as they did
   before, and the phone step-down at the bottom of this file still shrinks it
   with nothing else to say. */

/* ---------- search ---------- */

.search { flex: 1; max-width: 300px; margin-left: auto; position: relative; }
/* The names that appear under the search box while you type. Built by
   the chrome, never in the markup, so a page with nothing to suggest
   carries nothing. Hairlines and the site's own white, like every other
   panel here. */
.search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-top: none;
  max-height: 280px;
  overflow-y: auto;
}
.search-suggest .suggest-row,
.mention-suggest .suggest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #dddddd;
}
.search-suggest .suggest-row:last-child,
.mention-suggest .suggest-row:last-child { border-bottom: none; }
.search-suggest .suggest-row:hover,
.search-suggest .suggest-row.here,
.mention-suggest .suggest-row:hover,
.mention-suggest .suggest-row.here { background-color: #eef3f8; }
.search-suggest .suggest-who,
.mention-suggest .suggest-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.search-suggest .suggest-who b,
.search-suggest .suggest-who span,
.mention-suggest .suggest-who b,
.mention-suggest .suggest-who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The names that appear under an @ while a comment is being written
   (Zach, 2026-09-05). The same box as the one under the search field,
   hung under whichever comment box is being typed in rather than at a
   fixed corner, because a reply form sits wherever its comment sits. The
   chrome measures the textarea and sets top, left and width. */
.comment-form { position: relative; }
.mention-suggest {
  position: absolute;
  z-index: 40;
  background-color: #ffffff;
  border: 1px solid #000000;
  max-height: 220px;
  overflow-y: auto;
}
/* Each row is a button, so it cannot post the comment form it sits in.
   The site dresses every button as a beveled key, which is right for a
   control and wrong for a row in a list, so these are undressed back to
   the row the search box draws. */
.mention-suggest .suggest-row {
  width: 100%;
  border: none;
  border-bottom: 1px solid #dddddd;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  text-align: left;
  cursor: pointer;
}
.search input {
  width: 100%;
  padding: 4px 8px;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  border: 1px solid #7f9db9;
  border-radius: 0;
  background-color: #ffffff;
}
/* The search takes the topbar's slack ahead of the spacer, but the spacer
   still grows. With the masthead at 34px and the page capped at 720px an
   evenly-split slack left the field at 146px, cutting its own placeholder
   off mid-word; giving the field the larger share fixes that. The spacer
   must keep growing, because every page without a search (a profile, the
   settings page, a post page) relies on it to hold the buttons at the
   right edge, and switching it off moved them all to the left, next to
   the masthead (Zach, 2026-08-27, on his account page). The field stops
   at its own max-width and the spacer absorbs whatever is left. */
.topbar .search { margin-left: 0; flex-grow: 8; }
/* The banned list keeps its own search, but it belongs beside the list it
   filters rather than in the topbar, so every page can wear the same bar. */
.bans-search { max-width: 300px; margin: 6px 0 14px 0; }

.people {
  border: 1px solid #808080;
  background-color: #ffffee;
  padding: 6px 10px;
  margin: 0 0 12px 0;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
}
.people p { margin: 3px 0; }

/* ---------- the feed ---------- */

.post-card {
  border: 0;
  background-color: #ffffff;
  padding: 12px 14px;
  margin: 0 0 22px 0;
}
.post-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #808080;
  background-color: #dee3e7;
  color: #003366;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  font-weight: bold;
  flex: none;
}
.post-who { font-family: "Times New Roman", Times, serif; font-size: var(--ui); font-weight: bold; }
.post-head .date { margin-left: auto; }
.post-options { position: relative; flex: none; }
.post-options > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
}
.post-options > summary::-webkit-details-marker { display: none; }
.post-options > summary::marker { content: ""; }
.post-options[open] > summary { border-style: inset; }
.post-options-body {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 25;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 6px;
  border: 1px solid #6f6f6f;
  background-color: #f5f5f0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.recommendation-form { margin: 0; }
.recommendation-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.recommendation-dismiss { margin-left: auto; }
.post-title { font-family: "Times New Roman", Times, serif; font-size: var(--title); margin: 0 0 8px 0; }
.post-title a { color: #0000ee; }
.post-body { margin: 0 0 6px 0; }
.post-body p { margin: 0 0 10px 0; }

/* Lists, rendered from 2026-08-31 (Zach: a piece with a numbered list in it
   would not publish at all). Indented with the marker in the margin, the way
   a browser has drawn a list since Mosaic, and set on the same rhythm as the
   paragraphs above so a list does not read as a different document. No custom
   bullets, no borders, no accent colour: see the note about accent stripes
   further up this file, which is the same argument. */
/* The search box on a followers or following page (Zach, 2026-08-31). It
   searches that list and nothing else, so it sits with the list rather than
   in the bar. */
.people-find { display: flex; gap: 6px; margin: 10px 0 12px 0; }
.people-find input[type="search"] {
  flex: 1;
  min-width: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  border: 1px solid #7f9db9;
  border-radius: 0;
  padding: 4px 7px;
}
/* The counts are doors now, so they look like the text they always were
   rather than three blue links shouting across the profile head. */
.profile-stats a { color: inherit; text-decoration: none; }
.profile-stats a:hover { text-decoration: underline; }
.profile-stats a:visited { color: inherit; }

/* What a reposter said about the piece, over it (Zach, 2026-08-31). Indented
   the way a quotation is, because that is what it is: somebody's words about
   somebody else's writing. No stripe, no tint; see the accent-stripe note. */
.repost-thoughts {
  margin: 2px 0 8px 0;
  padding-left: 12px;
  font-style: italic;
}
/* Repost asks before it acts (Zach, 2026-08-31): pressing it opens two
   choices, plain or with thoughts. A <details> so the question gets asked
   with no script at all. The summary wears the button's own clothes, so
   what you press looks exactly like every other control in the row. */
.repost-choice { display: inline-block; position: relative; }
.repost-choice > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}
.repost-choice > summary::-webkit-details-marker { display: none; }
.repost-choice > summary::marker { content: ""; }
.repost-choice[open] > summary { border-style: inset; }
/* A small menu hanging off the button, not a panel wedged into the row.
   Absolute, so opening it never moves the card underneath. */
.repost-choice-body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 25;
  min-width: 200px;
  padding: 6px;
  border: 1px solid #6f6f6f;
  background-color: #f5f5f0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
/* Writing the thought is a step behind the second choice, and its form
   widens the menu only once it is open. */
.repost-thoughts > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}
.repost-thoughts > summary::-webkit-details-marker { display: none; }
.repost-thoughts[open] > summary { border-style: inset; }
.repost-thoughts[open] { min-width: 260px; }
.thoughts-form { margin-top: 6px; }
.thoughts-file { margin: 6px 0; }
.repost-choice-body textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
  padding: 5px 7px;
  margin-top: 6px;
}

/* The small face in a "Reposted by" mark (Zach, 2026-08-31). Sized to sit on
   the line of the mark's own type rather than pushing it apart. */
.avatar-tiny {
  width: 18px;
  height: 18px;
  min-width: 18px;
  font-size: 11px;
  line-height: 18px;
  vertical-align: -4px;
  display: inline-block;
}
.repost-mark { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* The preview of what you attached, before you publish (Zach, 2026-08-31:
   "i should see a preview of it not the file name"). Sized to the column and
   never taller than a screenful, so a portrait photo does not push Publish
   off the page. */
.media-preview { margin: 8px 0 10px 0; }
.media-preview img,
.media-preview video {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  height: auto;
  border: 1px solid #6f6f6f;
}
.media-preview .act { margin-top: 6px; }

.post-body ol,
.post-body ul { margin: 0 0 10px 0; padding-left: 26px; }
.post-body ol { list-style: decimal outside; }
.post-body ul { list-style: disc outside; }
.post-body li { margin: 0 0 4px 0; }
.post-body li:last-child { margin-bottom: 0; }
.post-body.clamped {
  max-height: 8.5em;
  overflow: hidden;
}
.read-more {
  display: inline-block;
  margin: 0 0 8px 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
}
.post-media { margin: 4px 0 8px 0; }
.post-media img, .post-media video { max-width: 100%; border: 1px solid #000000; display: block; }
.post-actions {
  border-top: 1px solid #e6e6e6;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.act {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  color: #000000;
  padding: 3px 9px;
  border: 2px outset #f5f5f5;
  border-radius: 0;
  background-color: #d4d0c8;
  cursor: pointer;
}
.act:active { border-style: inset; background-color: #c8c4bc; }
.act.liked { border-style: inset; background-color: #c8d4c8; font-weight: bold; }
/* Replies, folded up into the comment they answer, and the rest of a long
   thread folded behind one press (Zach, 2026-08-31). Every fold is a
   <details>, so all of it works with no script. */
.comment-replies,
.comments-rest,
.comment-reply { margin: 4px 0 8px 0; }
.comment-replies > summary,
.comments-rest > summary,
.comment-reply > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}
.comment-replies > summary::-webkit-details-marker,
.comments-rest > summary::-webkit-details-marker,
.comment-reply > summary::-webkit-details-marker { display: none; }
.comment-replies[open] > summary,
.comments-rest[open] > summary,
.comment-reply[open] > summary { border-style: inset; }
/* A reply sits under its comment, indented once and only once: one level
   deep is the whole shape, so nothing here nests further. */
.reply-list {
  margin: 6px 0 0 0;
  padding-left: 16px;
  border-left: 1px solid #e6e6e6;
}
.comment-reply textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 3em;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
  padding: 5px 7px;
  margin-top: 6px;
}

.comments { border-top: 1px solid #e6e6e6; margin-top: 8px; padding-top: 8px; }
.comments textarea {
  width: 100%;
  min-height: 3.5em;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
  padding: 5px 7px;
}
.comment {
  border-bottom: 1px solid #e6e6e6;
  padding: 6px 0;
  margin: 0;
}
.comment .date { margin-left: 8px; }
.small {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  color: #6f6f6f;
}

/* the report questionnaire on a feed card */
.report-box {
  border: 1px dashed #808080;
  background-color: #fbfbf5;
  margin-top: 8px;
  padding: 8px 12px;
}
.report-lead { margin: 0 0 8px 0; }
.report-box .check { display: block; }
.report-detail {
  width: 100%;
  max-width: none;
  min-height: 3em;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
  padding: 5px 7px;
  margin-top: 6px;
}
.report-status { color: #cc0000; }

/* an ad, when ads exist: never dressed as a post. The label is the rule. */
.ad-label {
  display: inline-block;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #ffffff;
  background-color: #808080;
  padding: 2px 8px;
  margin: 0 0 8px 0;
}

/* ---------- the banned list ---------- */

/* The way back, for a member who stepped off the signing page to see
   what a ban looks like. One line, the site's own type, nothing loud. */
.crumb { font-size: var(--ui); margin: 14px 0 0 0; }
.crumb a { color: #0000ee; }


.banned-logo { text-align: center; margin: 18px 0 6px 0; }
.banned-logo img { max-width: 320px; width: 60%; height: auto; }
.ban-entry {
  /* An entry reads like any other card here; the red belongs to the stamp,
     the badge and THE EVIDENCE label, not to a glowing box (Zach, 2026-08-28). */
  border: 1px solid #808080;
  background-color: #ffffff;
  padding: 14px 18px;
  margin: 0 0 18px 0;
}
.ban-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px 0; }
.ban-avatar {
  width: 44px;
  height: 44px;
  border: 1px solid #808080;
  background-color: #dee3e7;
  color: #7a0000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--h1);
  font-weight: bold;
  flex: none;
  object-fit: cover;
}
.ban-head .date { margin-left: auto; }
/* The exhibit is announced by its label, not by a red bar beside it. Same
   call the pledge's .note made: no stripe, it reads like the rest of the
   page. See the no-accent-stripes block near the top. */
.evidence {
  border-left: 0;
  padding: 2px 0;
  margin: 8px 0;
  color: #333333;
}
.evidence .evidence-label {
  display: block;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  font-weight: bold;
  letter-spacing: 0.15em;
  color: var(--alarm);
}
.badge {
  display: inline-block;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px solid;
}
.badge.exonerated { color: #0a7d00; border-color: #0a7d00; background-color: #f2fbf0; }
.badge.banned { color: var(--alarm); border-color: var(--alarm); background-color: #fff8f8; }

.byline { font-family: "Times New Roman", Times, serif; font-size: var(--meta); color: #333333; }

/* ---------- the landing (signed-out view of the front door) ---------- */

.landing { text-align: center; padding: 30px 0 10px 0; }
.landing .brand-big {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 700;
  margin: 10px 0 2px 0;
}
/* The landing wears the same wordmark, set rather than drawn (Zach,
   2026-08-31). The rule above is the whole of it again: 52px Cormorant at 700,
   with the body's own leading, which is the setting the page was built around
   and the one the tagline and the pitch sit under. */
.landing .tagline { font-size: var(--title); margin-bottom: 22px; }
.landing-pitch { max-width: 480px; margin: 0 auto 18px auto; text-align: left; }
.landing .btn-big {
  font-size: var(--ui);
  padding: 9px 22px;
}

/* App discovery keeps the site's quiet, beveled 2005 appearance. */
.app-downloads { margin: 22px auto 6px; max-width: 520px; text-align: center; }
.app-downloads > img { border-radius: 12px; display: block; margin: 0 auto 12px; }
.app-downloads h1 { font-size: var(--h1); margin: 0 0 16px; }
.app-download-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.app-download-buttons .btn { margin: 0; padding: 10px 14px; font-size: 15px; min-height: 44px; box-sizing: border-box; }
.app-downloads .small { font-size: 14px; margin: 12px 0 0; }
html[data-blog-native-page-scale="fixed"] .browser-only { display: none; }
.app-banner { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #ccc; background: #f5f5f1; color: #111; }
.app-banner-close { border: 0; background: none; color: #555; font: 24px/1 Arial,sans-serif; width: 32px; min-height: 44px; padding: 0; flex: none; cursor: pointer; }
.app-banner > img { flex: none; border-radius: 9px; }
.app-banner-copy { min-width: 0; flex: 1; font-size: 13px; line-height: 1.35; }
.app-banner-copy strong, .app-banner-copy span { display: block; }
.app-banner-copy strong { font-size: 17px; }
.app-banner-store { font-size: 12px; }
.app-banner .app-banner-open { color: #003366; font-size: 15px; min-height: 44px; padding: 9px 15px; box-sizing: border-box; margin-right: 8px; }
@media (max-width: 380px) { .app-download-buttons { flex-direction: column; } .app-banner { gap: 6px; } }

/* ---------- profiles ---------- */

.profile-head { display: flex; align-items: center; gap: 16px; margin: 18px 0 6px 0; }
.profile-head > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.avatar-img {
  width: 84px;
  height: 84px;
  border: 1px solid #000000;
  object-fit: cover;
  flex: none;
}
.avatar-big {
  width: 84px;
  height: 84px;
  font-size: 34px;
}
/* The picture on a card is the same link as the name beside it. */
.avatar-link { display: inline-block; line-height: 0; text-decoration: none; }
/* The handle under the name: chosen once at sign-up, never changed. */
.profile-handle { margin: 0 0 4px 0; color: #555555; font-size: var(--ui); }
/* The pencil-and-paper in the Blog button. */
.btn .ico { width: 14px; height: 14px; vertical-align: -2px; }
.profile-name {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--title);
  font-weight: bold;
  margin: 0;
}
.profile-bio { margin: 4px 0 0 0; color: #333333; }
/* The three numbers under the name, the way every profile shows them. */
.profile-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0 0; font-size: var(--ui); color: #333333; }
.profile-stats b { color: #111111; }
.stat-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}
/* Followers and following, as a searchable list under the head. */
.people-panel {
  border: 1px solid #808080;
  background-color: #f5f5f0;
  padding: 8px 10px;
  margin: 8px 0;
}
.people-head { display: flex; align-items: center; justify-content: space-between; }
.people-search {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 6px 0;
  padding: 3px 5px;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  border: 1px solid #7f9db9;
  border-radius: 0;
}
.people-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #c5c5c5; }
.people-name { flex: 1; font-weight: bold; }

/* Private account, on your own head. */
.badge.private { background-color: #6f6f6f; color: #ffffff; font-family: "Times New Roman", Times, serif; font-size: var(--meta); padding: 1px 6px; }

/* The settings page: one framed section per subject, one row per setting,
   and the parts that wait on accounts greyed and said so. */
.settings-section {
  border: 1px solid #808080;
  background-color: #f5f5f0;
  padding: 8px 10px;
  margin: 10px 0;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted #c5c5c5;
}
.setting-row .small { flex: 1; }
.setting-row .check { display: flex; align-items: center; gap: 6px; }
.settings-section input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
  padding: 3px 4px;
  background-color: #ffffff;
}
.settings-section textarea {
  width: 100%;
  min-height: 3em;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
  margin-top: 4px;
}
.later { color: #6f6f6f; }
.act[disabled] { color: #888888; cursor: default; }
label.act { display: inline-block; margin: 0; }
a.act { text-decoration: none; display: inline-block; }

.tabs { border-bottom: 1px solid #808080; margin: 16px 0 0 0; padding: 0; }
.tab {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  color: #000000;
  padding: 5px 12px;
  border: 2px outset #f5f5f5;
  border-bottom: 0;
  border-radius: 0;
  background-color: #d4d0c8;
  cursor: pointer;
}
.tab[aria-selected="true"] {
  border-style: inset;
  background-color: #ffffff;
  font-weight: bold;
}
.tab-panel { padding: 14px 2px; }

/* a banned member's dead profile wears the tag; an exonerated one the badge */
.profile-head .badge { align-self: flex-start; margin-top: 6px; }

/* ---------- the example stamp: a photo with banned.png over it ---------- */

.stamp-wrap { position: relative; display: inline-block; }
.stamp-wrap img.stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96%;
  height: auto;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
}

/* the hidden attribute always wins, including over display rules like the one
   on .read-more. Without this, hidden elements with an author display value
   render anyway. */
[hidden] { display: none !important; }

/* The signed greeting at the top of the pledge page. */
.signed-note {
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  border: 1px solid #336699;
  background-color: #eef3f8;
  color: #003366;
  padding: 6px 10px;
  margin: 10px 0;
}

/* The feed order tabs: For you and Newest. */
.feed-tabs { margin: 8px 0 0 0; }
.feed-order-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; color: #33485c; }
.feed-order-status .act { min-height: 44px; margin: 0; }
#feedPosts[aria-busy="true"] { cursor: progress; }

/* The pictures on a profile's About Me tab. */
.about-pics { margin: 12px 0; }
.about-pics figure { display: inline-block; vertical-align: top; margin: 0 12px 12px 0; width: 220px; }
.about-pics img { width: 220px; border: 1px solid #6f6f6f; display: block; }

/* A known author's photo avatar on a feed card, sized like the letter one. */
img.avatar-photo {
  width: 34px;
  height: 34px;
  object-fit: cover;
  padding: 0;
  background-color: #ffffff;
}

/* Headings inside a card body stay modest; the blue bar belongs to pages. */
.post-body h2 {
  background: none;
  border: none;
  color: #000000;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--title);
  font-weight: bold;
  padding: 0;
  margin: 12px 0 4px 0;
}

/* The comment composer and its attachment row. */
.composer-row { margin: 6px 0 0 0; }
.attach { cursor: pointer; }
.attach-note { margin: 0 6px; }

/* One comment: text, media, actions, replies indented one level. */
.comment { border-top: 1px dotted #b5b5b5; padding: 6px 0 2px 0; }
.comment-text { margin: 0 0 4px 0; }
.comment-actions { margin: 2px 0 4px 0; }
.comment.reply { margin-left: 22px; border-top: 1px dotted #d5d5d5; }
.comment-media-view { max-width: 100%; max-height: 260px; display: block; border: 1px solid #808080; margin: 4px 0; }
.reply-composer textarea { width: 100%; }
.comment-report {
  border: 1px solid #999999;
  background-color: #f2f2ee;
  padding: 6px 8px;
  margin: 6px 0;
}
.comments-more { margin: 6px 0 0 0; }

/* Topbar buttons for Alerts and Messages. */
.topbtn { margin-right: 4px; }
/* The topbar's controls share one height and one type size, whatever each
   one holds (a picture, a count, the pencil). On a phone the row wraps and
   the search takes a full line of its own instead of shrinking to a sliver. */
.topbar { flex-wrap: wrap; row-gap: 6px; }
.topbar .btn, .topbar .topbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  font-size: var(--ui);
  line-height: 1;
  white-space: nowrap;
}
/* When the bar wraps, the rows under the first one pack to the right, where
   the buttons are. `.spacer` sits on the first line only, so without this a
   wrapped row had nothing behind it and packed hard left: at 360 to 440px the
   pencil sat 118px from the left edge with 236px of empty bar to its right,
   which is the exact thing Zach asked twice to have fixed (review of
   2026-08-27). */
.topbar { justify-content: flex-end; }

/* The search never gets squeezed narrower than its own placeholder. Between
   641 and about 760px it was down to 145px and cutting "Search posts and
   people" off mid-word; the bar takes another row instead. */
.topbar .search { min-width: 212px; }

/* Alerts and Messages grow a count when something is waiting, and a wider
   label used to push the whole bar sideways. The slot is wide enough for a
   two-digit count, so the furniture stays put whether or not anything is
   waiting. */
.topbar #alertsBtn { min-width: 82px; }
.topbar #messagesBtn { min-width: 104px; }
.topbar #alertsBtn, .topbar #messagesBtn { justify-content: center; }

.topbar .me-avatar { vertical-align: 0; margin-right: 0; }
.topbar .btn .ico { vertical-align: 0; }
@media (max-width: 640px) {
  .topbar .search { flex: 1 1 100%; max-width: none; order: 9; }
}

/* The drop panels under the topbar: notifications and messages. */
.panel {
  border: 1px solid #808080;
  background-color: #f5f5f0;
  padding: 8px 10px;
  margin: 6px 0;
}
.panel-head {
  background-color: #336699;
  color: #ffffff;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  font-weight: bold;
  padding: 4px 8px;
  margin: -8px -10px 8px -10px;
}
.panel-sub { font-family: "Times New Roman", Times, serif; font-size: var(--meta); font-weight: bold; }
/* Notifications: a row per thing someone did to you, their picture, the
   words, the date, and the whole row is the way to them or to the piece. */
/* A line of what was said, under the sentence about who said it (Zach,
   2026-08-31). Quiet, and never more than two lines, so a row stays a row. */
.alert-said {
  display: block;
  color: #444444;
  font-style: italic;
  margin: 2px 0 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* The comment a notification pointed at, marked for a moment when you land
   on it, so it is findable in a long thread. */
.comment:target { background-color: #fffbe6; outline: 2px solid #c8b560; }

.alert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px dotted #c5c5c5;
  color: #111111;
  text-decoration: none;
  font-size: var(--ui);
}
.alert-row:hover { background-color: #ece9d8; text-decoration: none; }
.alert-row:active { background-color: #e2ded6; }
.alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alert-row.unread .alert-text { font-weight: bold; }
/* Messages: the conversation list the way any messaging app draws it. A
   picture, the name, the last thing said, the date, and a blue dot at the
   right edge when something new from them is waiting. */
.chat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px dotted #c5c5c5;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  color: #111111;
}
.chat-row:hover { background-color: #ece9d8; }
.chat-row:active { background-color: #e2ded6; }
.chat-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-row-name { font-weight: bold; }
.chat-row-last {
  color: #555555;
  font-size: var(--meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-row.unread .chat-row-last { color: #111111; font-weight: bold; }
.chat-row-side { display: flex; align-items: center; gap: 8px; flex: none; }
.unread-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1a73e8;
}
/* Profile pictures are squares everywhere on the site (Zach, 2026-08-25). */
.chat-avatar { width: 36px; height: 36px; border-radius: 0; object-fit: cover; }

/* The conversation itself: a head with the picture, then bubbles, the
   sender's picture beside each, yours on the right, and the composer at
   the bottom. Same paper, same rules, just laid out like a conversation. */
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px 0;
  border-bottom: 1px solid #c5c5c5;
  margin-bottom: 8px;
}
.chat-head .chat-avatar { width: 44px; height: 44px; font-size: var(--title); }
.chat-head-name { font-weight: bold; font-size: var(--title); }
.chat-log { margin: 6px 0; padding: 0; }
.chat-row-msg { display: flex; align-items: flex-end; gap: 6px; margin: 8px 0; }
.chat-row-msg.mine { flex-direction: row-reverse; }
.chat-row-msg .chat-avatar { width: 28px; height: 28px; font-size: var(--ui); }
.chat-bubble {
  max-width: 72%;
  padding: 6px 10px;
  border: 1px solid #c5c5c5;
  background-color: #ffffff;
  font-size: var(--text);
  overflow-wrap: break-word;
}
.chat-row-msg.mine .chat-bubble { background-color: #dbe6f3; border-color: #9fb3cc; }
.chat-who { font-size: var(--meta); font-weight: bold; color: #003366; }
.chat-bubble .date { display: block; margin-top: 2px; font-size: var(--meta); color: #6f6f6f; }
.chat-bubble .comment-media-view { display: block; max-width: 100%; margin-top: 4px; }
.chat-composer { border-top: 1px solid #c5c5c5; padding-top: 8px; margin-top: 8px; }
.chat-composer textarea {
  width: 100%;
  min-height: 3em;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
}
.chat-composer-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.chat-composer-row .small { flex: 1; }

/* Follow sits at the right edge of a card's head. */
.post-head .follow { margin-left: auto; }

/* Links a member puts in their bio: socials, website, wherever they live. */
.bio-links { margin: 4px 0 0 0; font-family: "Times New Roman", Times, serif; font-size: var(--ui); }
.bio-links a { margin-right: 10px; }

/* The Me button's small avatar in the topbar. */
.me-avatar { width: 16px; height: 16px; object-fit: cover; vertical-align: -3px; margin-right: 4px; border: 1px solid #808080; }

/* Repost: its own button between Comments and Share, and a small menu
   under the row with the two ways to do it. */
.repost-menu,
.share-menu {
  border: 1px solid #999999;
  background-color: #f2f2ee;
  padding: 6px 8px;
  margin: 6px 0 0 0;
}
.thoughts-box textarea { width: 100%; }

/* The share sheet, the way the photo apps do it: your recent chats as
   bubbles you tap to pick, a search for chats or people (mutuals only),
   a message you may or may not add, and Share to... for outside apps. */
.share-head { margin: 0 0 4px 0; }
.share-bubbles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.bubble {
  width: 60px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--meta);
  color: #000000;
  text-align: center;
}
.bubble .ring {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 2px auto;
  border-radius: 0;
  border: 2px solid #999999;
  background-color: #ffffff;
  line-height: 36px;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
}
.bubble.liked .ring { border-color: #003366; background-color: #c8d4c8; font-weight: bold; }
.bubble .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-search {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0;
  padding: 3px 5px;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  border: 1px solid #7f9db9;
  border-radius: 0;
}
.share-results { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.share-message {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.6em;
  margin: 4px 0;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
}
.share-row { margin: 4px 0; }

/* THIS IS YOU on your own profile. */
.badge.you { background-color: #003366; color: #ffffff; font-family: "Times New Roman", Times, serif; font-size: var(--meta); padding: 1px 6px; }

/* The owner's management strip under the profile head. */
.owner-tools {
  border: 1px solid #808080;
  background-color: #f5f5f0;
  padding: 8px 10px;
  margin: 10px 0;
}
.owner-tools textarea { width: 100%; }

/* The messages drawer: a third of the screen, in from the right edge. */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 33%;
  min-width: 280px;
  max-width: 430px;
  background-color: #f5f5f0;
  border-left: 2px solid #6f6f6f;
  padding: 0 12px 12px 12px;
  overflow-y: auto;
  z-index: 40;
  transform: translateX(105%);
  transition: transform 0.18s ease-out;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }

/* The bar that says new writing has arrived (Zach, 2026-08-31). It waits to
   be pressed rather than moving the piece somebody is reading. Sticky, so it
   is still reachable once you have scrolled past where it appeared. */
/* Read more is a link and looks like one (Zach, 2026-08-31: "It just needs to
   be the, like, blue read more that you can click on"). It opens the piece, so
   dressing it as a button was claiming it did something to the page. */
a.read-more {
  display: inline-block;
  font-size: var(--ui);
  margin: 0 0 6px 0;
}

/* It sticks BELOW the pinned chrome, not behind it. top:6px put it under
   the bar (z-index 30) and the nav (29) the moment the page moved, which
   is exactly when it is wanted. Both heights are measured by the chrome
   into --bar-h and --nav-h (lib/chrome/actions.js), because only the
   browser knows them: the wordmark is a web font at one size on a desktop
   and another on a phone, and the nav is one row on a phone and can be two
   on a narrow desktop. A page with no nav leaves --nav-h at 0px and this
   reads exactly as it did. z-index 31 clears the bar and the nav and still
   sits under the drawers (40), which must cover everything. */
.feed-fresh {
  display: block;
  width: 100%;
  position: sticky;
  top: calc(var(--bar-h, 0px) + var(--nav-h, 0px) + 6px);
  z-index: 31;
  margin: 0 0 10px 0;
  font-weight: bold;
}

/* A photo or video in a chat, sent and received (Zach, 2026-08-31). Held to
   the bubble's width and to a sane height, so one tall picture does not push
   the whole conversation off the screen. */
.chat-media {
  display: block;
  max-width: 100%;
  max-height: 340px;
  height: auto;
  border: 1px solid #6f6f6f;
  margin: 0 0 4px 0;
}
/* What you picked, before it goes. */
.chat-chosen { margin: 6px 0; }
.chat-chosen .chat-media { max-height: 200px; }
.chat-chosen .act { margin-top: 4px; }

/* A piece shared into a chat (Zach, 2026-09-01): the preview card under the
   words, one link into the piece, in the card's own dress (.post-card's
   border and paper, Times, the site's type scale). The thumbnail is a small
   square, the author's picture a smaller one, squares everywhere as the
   site keeps them. A locked card is the same box holding one sentence. */
.chat-piece {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 6px 0 2px 0;
  padding: 8px 10px;
  border: 1px solid #808080;
  background-color: #ffffff;
  color: #000000;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  text-decoration: none;
}
a.chat-piece:hover .chat-piece-title { text-decoration: underline; }
.chat-piece-thumb {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border: 1px solid #6f6f6f;
}
.chat-piece-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: #dee3e7;
  color: #003366;
  font-size: var(--meta);
}
.chat-piece-body { display: block; min-width: 0; }
.chat-piece-title {
  display: block;
  font-size: var(--text);
  font-weight: bold;
  color: #0000ee;
  overflow-wrap: break-word;
}
.chat-piece-by { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.chat-piece .chat-avatar { width: 18px; height: 18px; font-size: var(--meta); }
.chat-piece-name { font-weight: bold; }
.chat-piece-excerpt { display: block; color: #333333; overflow-wrap: break-word; }
.chat-piece-locked { color: #6f6f6f; }

/* The two find boxes in the messages drawer: one over your conversations,
   one over who you can start a chat with (Zach, 2026-08-31). */
.chat-find {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px 0;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ui);
  border: 1px solid #7f9db9;
  border-radius: 0;
  padding: 4px 7px;
}
/* A person you can message: face, name, handle, on one row like every
   other list of people here. */
.chat-picks { display: flex; flex-direction: column; gap: 4px; }
.chat-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.chat-pick-name { font-weight: bold; }

/* A conversation is not a sidebar. Zach, 2026-08-31: "message is supoosed
   to be the screen not a tab from a side panel once the message is opened
   and we are chatting." The drawer is right for a LIST of conversations and
   wrong for one you are in the middle of: a third of the screen is not where
   anybody wants to read a thread or look at a photo somebody sent.
   Opening a chat widens it to the whole screen; Back narrows it again
   (lib/chrome/actions.js adds and removes .chat-open). The column inside is
   still held to a readable measure, because a chat log stretched across a
   wide monitor is worse than the drawer was. */
.drawer.chat-open {
  width: 100%;
  max-width: none;
  border-left: 0;
  padding-left: 0;
  padding-right: 0;
}
/* The head is inside the drawer's padding-free full-width box when a chat is
   open, so without this it stretches the whole screen while the conversation
   under it sits in a 720px column: a blue bar pinned to the left of nothing.
   Zach, 2026-08-31: "please center the blue line over the actual chat." */
.drawer.chat-open .panel-head.drawer-head {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.drawer.chat-open > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
.drawer.chat-open .chat-log { max-height: none; }
/* The name and face in the chat head open their page, and say so quietly
   rather than turning the head into a wall of link blue. */
.chat-head a { color: inherit; text-decoration: none; }
.chat-head a:visited { color: inherit; }
.chat-head a:hover { text-decoration: underline; }
.drawer .panel-head.drawer-head {
  margin: 0 -12px 10px -12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* A post page: the hub's chrome around the feed's own card, drawn in full,
   so clicking into a post keeps every action. */
body.single .posts { margin-top: 4px; }
body.single .post-title { font-size: var(--h1); margin: 4px 0 10px 0; }
body.single .post-body { max-height: none; }
body.single footer { margin: 14px 0 30px 0; color: #6f6f6f; }

/* Bold and italic when messaging: the small editor in the composer. */
.chat-tools { display: flex; gap: 4px; margin-bottom: 4px; }
.chat-editor {
  min-height: 3em;
  padding: 4px 6px;
  border: 1px solid #7f9db9;
  background-color: #ffffff;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--text);
  overflow-wrap: break-word;
}
.chat-editor:empty:before { content: attr(data-placeholder); color: #6f6f6f; }
.chat-editor:focus { outline: 2px solid #336699; outline-offset: -1px; }

/* One conversation as its own screen. */
#chatScreen #chatView { padding: 4px 0 40px 0; }

/* A post's attached photo or video: outside the clamp, LinkedIn-style,
   under the text and its Read more. */
.post-media { margin: 8px 0 0 0; }
.post-media img, .post-media video { max-width: 100%; max-height: 420px; display: block; border: 0; }

/* A conversation is its own screen, on every page. `#app` wraps the feed and
   exists only on the feed, so hiding that alone left the pledge, the banned
   list, a profile and a post page fully on screen with the conversation
   dropped in below the footer (review of 2026-08-27). #chatScreen is always a
   direct child of body, put there by the shared tail. */
body.chat-open > *:not(#chatScreen) { display: none; }

/* One unbroken string is not a reason to widen the page. A pasted URL, a
   hash, a German compound: without this the widest word sets the width of
   the card, the card sets the width of the page, and every phone gets a
   sideways scroll it never asked for. `anywhere` rather than `break-word`
   because only `anywhere` also shrinks the box's own min-content size,
   which is what the flex and grid parents above these read. Every width,
   not only phones: the same paste does the same thing at 1200px, it just
   takes a longer word to do it. */
.post-title,
.post-body,
.comment-text,
.profile-bio,
.profile-about { overflow-wrap: anywhere; }
/* The name in a card's head is a flex child, and a flex child's floor is
   its longest word unless it is told otherwise. The avatar beside it is
   the one thing that must not give: told it could shrink too, it shrank
   under its own picture and the name's underline ran across its border
   (review of 2026-09-02). */
.post-head .post-who { min-width: 0; }
.post-head .avatar-link { flex: none; }

/* ---------------------------------------------------------------------------
   The phone. Everything below is inside one 640px query and changes nothing
   at a desktop width. The audit of 2026-09-01 measured a 393x852 screen and
   found 200px of its 852 pinned to chrome (a 131px bar of three rows over a
   69px nav of two), controls 23 to 27px tall under a thumb that wants 44,
   inputs at 13px so iOS zoomed the page on every tap, a drawer at 306px
   leaving a useless strip of the page beside it, and the repost menu hanging
   off the side of the screen. Each of those is answered once, here.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Last, so nothing above outranks it: the masthead steps down. */
  .brand { font-size: var(--brand-small); }

  /* A thumb is not a mouse pointer. The two chrome sizes go up a notch,
     which lifts every control that reads them (see the padding below).
     --text stays 16px: the body was never the problem. */
  :root { --ui: 14px; --meta: 12px; }

  /* ---- A. the bar, in two rows ----
     The controls on one line and the search on its own under it. It was
     three lines because Alerts and Messages each carried a desktop
     min-width (82 and 104px) to stop a count changing the furniture, and
     because the buttons were padded for a mouse. On a phone the count can
     move the row; a third of the screen cannot be spent on the bar. */
  .topbar {
    padding: 8px 24px;
    margin: 0 -24px 12px -24px;
    gap: 4px;
    row-gap: 5px;
  }
  .topbar .brand { line-height: 1.1; }
  .topbar .btn, .topbar .topbtn {
    height: 34px;
    padding: 0 6px;
    gap: 4px;
  }
  .topbar #alertsBtn, .topbar #messagesBtn { min-width: 0; }
  /* Its own row, whole width, and never squeezed to a sliver. */
  .topbar .search { flex: 1 1 100%; max-width: none; min-width: 0; order: 9; }

  /* ---- B. the nav, one row that scrolls sideways ----
     Four to five rows of words do not fit across a phone, and wrapping
     them cost 69px of pinned height. They scroll instead, the way a phone
     scrolls anything too wide, with Sign out still pushed to the far end.
     The overflow is on .nav itself and on nothing above it: overflow on an
     ancestor of a sticky element switches sticky off, which would drop
     both the bar and this row the moment the page moved. */
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 2px 4px;
    gap: 4px;
  }
  /* The platform's own scroll indicator stays: with it hidden the row
     ended in a half word and nothing said Sign out was further along
     (review of 2026-09-02). iOS shows it only while the row moves. */
  .nav a, .nav-signout, .nav-signout button { flex: none; }

  /* ---- D. the controls, sized for a thumb ----
     line-height is pinned so a taller type size cannot push the nav row
     past its budget while the buttons still clear 32px. */
  .btn, .nav a, button {
    padding: 8px 12px;
    line-height: 1.15;
  }
  .act { padding: 7px 11px; line-height: 1.3; }
  .post-options > summary { min-width: 44px; min-height: 44px; }

  /* 16px is the number iOS reads: anything under it and Safari zooms the
     whole page in the moment the field takes focus, and the reader is left
     panning a page that was fitted to their screen a second ago. The three
     class-level rules are named because a bare `input` cannot outrank them. */
  input, select, textarea,
  .search input,
  .chat-find,
  .people-find input[type="search"] { font-size: 16px; }

  /* ---- C. the drawers ----
     Messages and Notifications take the screen. A 306px panel with a strip
     of the page showing beside it is a desktop sidebar on a phone: the
     strip is too narrow to read and wide enough to tap by mistake. */
  #chatDrawer, #alertsPanel {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    border-left: 0;
  }

  /* ---- E. the repost menu, inside the card ----
     Absolute under the button, it hung off the right of the card and, with
     the thoughts form open, off the right of the screen. On a phone it
     opens in the flow of the card instead: the open control takes the
     whole row of actions and the menu sits under it at the card's width,
     so it is always whole, and when the thoughts box takes focus the page
     scrolls it above the keyboard the way any field does. A sheet fixed to
     the bottom of the screen cannot promise that in Safari, where fixed
     boxes stay put behind the keyboard. The bevels are untouched. */
  .post-actions .repost-choice[open] { flex: 1 1 100%; }
  .repost-choice-body {
    position: static;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 4px;
    align-items: stretch;
  }
  .repost-thoughts[open] { min-width: 0; }
  .repost-choice-body .thoughts-form,
  .repost-choice-body .repost-form { width: 100%; }

  /* ---- H. the landing ----
     52px set the width of the page rather than the other way round. */
  .landing .brand-big { font-size: 40px; }
}

/* The narrow end of the phone family (375px: an iPhone SE, a mini, a 13
   mini). The masthead is the same width there as at 393 while the row is
   18px shorter, and the pencil is the one control that falls off the end,
   which put it alone on a row of its own with half a bar of empty navy
   beside it: the exact fault the review of 2026-08-27 raised. It joins the
   search on the second row instead, so the bar is two rows at every phone
   width. At 393 nothing here applies and the pencil stays where it was. */
@media (max-width: 380px) {
  .topbar .btn.write { order: 9; }
  .topbar .search { flex: 1 1 auto; }
}

/* Device edges, keyboard and navigation share the same paper and bevels. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
html { scroll-padding-top: calc(var(--bar-h, 0px) + var(--nav-h, 0px) + 12px); }
body { min-height: 100dvh; padding-bottom: calc(40px + var(--safe-bottom)); }
.topbar { padding-top: calc(12px + var(--safe-top)); }
input, textarea, select, .compose-editor { box-sizing: border-box; }
.comment:target, #writeProblems { scroll-margin-top: calc(var(--bar-h, 0px) + var(--nav-h, 0px) + 12px); }
body.drawer-active { position: fixed; top: var(--page-scroll-top); left: 0; right: 0; overflow: hidden; }
.drawer {
  top: var(--visible-top, 0px);
  bottom: auto;
  height: var(--visible-height, 100dvh);
  box-sizing: border-box;
  padding-bottom: calc(12px + var(--safe-bottom));
  overscroll-behavior: contain;
}
.drawer .panel-head.drawer-head {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: none;
  min-height: 52px;
  box-sizing: border-box;
  padding-top: calc(4px + var(--safe-top));
}
.drawer.chat-open { display: flex; flex-direction: column; overflow: hidden; }
.drawer.chat-open > :not(.drawer-head):not(#chatView) { display: none; }
.drawer.chat-open > #chatView:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}
.drawer.chat-open .chat-back { position: sticky; top: 0; z-index: 2; background: #f5f5f0; margin: 0; padding: 4px 0; }
.drawer.chat-open .chat-head { margin-bottom: 0; }
.drawer.chat-open .chat-log { flex: 1 1 auto; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; }
.drawer.chat-open .chat-composer { position: sticky; bottom: 0; flex: none; background: #f5f5f0; margin: 0; padding-bottom: 4px; }
.drawer.chat-open .chat-composer textarea { max-height: 20dvh; resize: vertical; }
.drawer.chat-open .chat-chosen { max-height: 100px; overflow-y: auto; }
.chat-back, .chat-head { flex-shrink: 0; }
@media (max-width: 640px), (any-pointer: coarse), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  input, textarea, select, .compose-editor { max-width: 100%; font-size: 16px; }
  .search input, .chat-find, .people-find input[type="search"] { font-size: 16px; }
  .btn, .nav a, button, .act, .compose-btn, .topbar .btn, .topbar .topbtn {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }
  .topbar .btn, .topbar .topbtn { height: auto; }
  .nav a, summary.act { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { padding-top: calc(8px + var(--safe-top)); }
  body { padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); }
  .topbar { margin-left: calc(-16px - var(--safe-left)); margin-right: calc(-16px - var(--safe-right)); padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); }
  .drawer { padding-left: calc(12px + var(--safe-left)); padding-right: calc(12px + var(--safe-right)); }
  .drawer.chat-open > * { padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); }
  .search input { min-height: 44px; }
  .check { min-height: 44px; display: flex; align-items: center; gap: 6px; }
  .check input { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

.comment-safety, .support-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* Public account entry: separate returning-member and invited-signup forms. */
.auth-entry { max-width: 440px; margin: 32px auto; }
.auth-entry form { margin: 24px 0; }
.auth-entry label { display: block; margin-bottom: 6px; font-weight: bold; }
.auth-entry input[type="text"] { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; margin-bottom: 12px; }
.auth-entry button, .auth-entry .btn { min-height: 44px; box-sizing: border-box; font-size: 16px; }
.auth-entry button { width: 100%; }
.auth-entry .auth-switch { padding-top: 18px; border-top: 1px solid var(--rule); }
@media (max-width: 380px) {
  .auth-entry .cf-turnstile { transform: scale(.9); transform-origin: left top; width: 111%; }
}


/* Help, reports, Friends and phone forms use the same paper, masthead and
   controls as the feed. Only their content layout belongs here. */
.utility-page { margin: 24px 0 32px; overflow-wrap: anywhere; }
.utility-page > :first-child { margin-top: 0; }
.utility-page form { margin: 20px 0; }
.utility-page label { margin: 16px 0; }
.utility-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.utility-page textarea, .utility-page select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 8px;
  font-family: inherit;
  font-size: var(--text);
  border: 1px solid #7f9db9;
  border-radius: 0;
  box-shadow: none;
}
.utility-page textarea { min-height: 160px; resize: vertical; }
.utility-page input:focus-visible, .utility-page textarea:focus-visible, .utility-page select:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
.utility-page button, .utility-page .btn { min-height: 44px; min-width: 44px; box-sizing: border-box; }
.utility-page button { cursor: pointer; }
.utility-page button:disabled { cursor: default; }
.utility-page .notice { padding: 12px; border: 1px solid var(--rule); }
.utility-page small { display: block; }
.utility-footer { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--rule); }
.utility-footer nav { display: flex; flex-wrap: wrap; column-gap: 18px; }
.utility-footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 380px) {
  .utility-page .cf-turnstile { transform: scale(.9); transform-origin: left top; width: 111%; }
}
.friends-nav, .friend-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.friends-nav { margin-bottom: 24px; }
.friends-card { margin: 24px 0; }
.friend-actions form { margin: 0; }
.utility-page .friends-check { display: flex; align-items: center; min-height: 44px; gap: 10px; }
.friends-check input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 1px 0 0; }
.friend-invites { list-style: none; margin: 0; padding: 0; }
.friend-invite { padding: 16px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.invite-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.friends-status:empty { display: none; }
.friends-status { padding: 12px; border: 1px solid var(--rule); }
.friends-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rule); }
.friends-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.phone-page { max-width: 480px; margin-inline: auto; }
.phone-page .result { padding: 12px; border: 1px solid var(--rule); }

/* Verification forms share the same site controls and preserve radio targets. */
.code-page { max-width: 480px; margin-inline: auto; }
.code-methods { border: 1px solid var(--rule); padding: 8px 12px; margin: 20px 0; }
.code-methods legend { font-weight: bold; }
.utility-page .code-methods .check { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
.code-methods input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; }

/* Touch screens keep the same navigation when a phone rotates or a foldable
   opens. Content width still limits line length on tablets and large screens. */
.mobile-nav, .community-menu { display: none; }
.member-topbar .nav-icon { width: 18px; height: 18px; flex: none; }

@media (max-width: 640px), (any-pointer: coarse), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  html:has(body.member-page .feed-tabs:not([hidden])) {
    scroll-padding-top: calc(var(--bar-h, 0px) + var(--feed-tabs-h, 56px) + 12px);
  }
  body.member-page {
    --mobile-nav-height: 70px;
    padding-bottom: calc(var(--mobile-nav-measured-height, calc(var(--mobile-nav-height) + var(--safe-bottom))) + 28px);
  }

  .member-page .member-topbar {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0;
    padding-bottom: 8px;
  }
  .member-topbar .brand { margin-right: auto; }
  .member-topbar #meLink,
  .member-topbar #alertsBtn,
  .member-topbar .compose-btn,
  .member-topbar a[href="/write"],
  .member-topbar .spacer,
  .member-page:not(.mobile-search-page) .member-topbar .search,
  .member-page > .nav,
  .member-page .member-status { display: none; }
  .mobile-search-page .member-topbar .search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    order: 9;
  }
  .member-topbar #messagesBtn {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 8px;
  }
  .member-topbar #messagesBtn .nav-icon { width: 23px; height: 23px; }
  .member-topbar #messagesBtn .control-label { display: none; }
  .member-topbar #messagesBtn .nav-count:not([hidden]),
  .mobile-nav .nav-count:not([hidden]) {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    padding: 0 3px;
    border: 1px solid #ffffff;
    background: #003366;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: bold;
  }

  .member-page .mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    box-sizing: border-box;
    min-height: calc(var(--mobile-nav-height) + var(--safe-bottom));
    padding: 6px calc(6px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(6px + var(--safe-left));
    border-top: 2px outset #f5f5f5;
    background: #ece9d8;
  }
  .mobile-nav .mobile-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 4px 1px;
    border: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #343b43;
    font-family: "Times New Roman", Times, serif;
    text-decoration: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav .nav-icon { width: 24px; height: 24px; flex: none; }
  .mobile-nav .mobile-nav-label { max-width: 100%; font-size: 11px; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .mobile-nav .mobile-nav-item:hover { color: #003366; background: #e2ded6; }
  .mobile-nav .mobile-nav-item:active,
  .mobile-nav .mobile-nav-item[aria-current="page"],
  .mobile-nav .mobile-nav-item[aria-current="true"],
  .mobile-nav .mobile-nav-item[data-active="true"] {
    border: 2px inset #f5f5f5;
    background: #d4d0c8;
    color: #003366;
  }
  .mobile-nav .mobile-nav-post,
  .mobile-nav .mobile-nav-post:visited {
    border: 2px outset #f5f5f5;
    background: #003366;
    color: #ffffff;
  }
  .mobile-nav .mobile-nav-post:hover { background: #174a7c; color: #ffffff; }
  .mobile-nav .mobile-nav-post:active,
  .mobile-nav .mobile-nav-post[aria-current="page"] {
    border-style: inset;
    background: #00264d;
    color: #ffffff;
  }
  .mobile-nav-item:focus-visible,
  .member-topbar #messagesBtn:focus-visible,
  .member-page .feed-tab:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
  .member-topbar #messagesBtn:focus-visible { outline-color: #ffffff; }
  .member-page.drawer-active:not(.drawer-with-navigation) .mobile-nav,
  .member-page.mobile-keyboard-open .mobile-nav { display: none; }

  /* Notifications is a navigation destination, so its menu remains visible
     and reachable. Its scrolling content stops above the measured bar,
     including its safe-area padding, on phones, tablets and folded panes. */
  .member-page.drawer-with-navigation .mobile-nav {
    z-index: 41;
    top: calc(var(--visible-top, 0px) + min(var(--visible-height, 100dvh), var(--pane-height, 100dvh)) - var(--mobile-nav-measured-height, calc(70px + var(--safe-bottom))));
    bottom: auto;
  }
  .member-page.drawer-with-navigation #alertsPanel {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    border-left: 0;
    height: max(0px, calc(min(var(--visible-height, 100dvh), var(--pane-height, 100dvh)) - var(--mobile-nav-measured-height, calc(70px + var(--safe-bottom)))));
    padding-bottom: 12px;
  }

  .member-page .feed-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    position: sticky;
    top: var(--bar-h, 0px);
    z-index: 29;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 0;
    background: #ffffff;
  }
  .member-page .feed-tab {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 6px;
    font-size: 15px;
  }
  .member-page .feed-tab.liked,
  .member-page .feed-tab[aria-pressed="true"] {
    border-style: inset;
    background: #003366;
    color: #ffffff;
    font-weight: normal;
  }
  .member-page .feed-fresh { top: calc(var(--bar-h, 0px) + var(--feed-tabs-h, 56px) + 6px); }

}

/* A card keeps its byline together and its action order stable across feeds,
   profiles and the full post. The words remain the accessible control names. */
.post-byline { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.post-byline .post-who { min-width: 0; overflow-wrap: anywhere; }
.post-byline .date { flex: none; }
.post-head:has(.post-byline) .follow { margin-left: 0; }
.post-action-icon, .post-action-count { display: none; }
.post-actions .like-form, .post-actions .save-form { display: contents; }
.post-actions .save { margin-left: auto; }
.post-media img, .post-media video,
.post-body img, .post-body video { display: block; max-width: 100%; box-sizing: border-box; margin-inline: auto; }
.post-body img { height: auto; }
.post-options-body { display: flex; flex-direction: column; gap: 4px; }
.post-options-body form { margin: 0; }
.post-options-body .act {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
}
.repost-credit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.repost-mark > .date { margin-left: auto; }

@media (max-width: 640px), (any-pointer: coarse), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  /* Use the active pane's gutters, not viewport units: a foldable viewport
     can include a hinge or another pane. Safe-area padding stays outside. */
  .post-card {
    --post-content-inset: 16px;
    padding: 12px var(--post-content-inset);
    margin-left: -16px;
    margin-right: -16px;
  }
  .tab-panel:has(.post-card) { padding-left: 0; padding-right: 0; }
  .post-card > .post-media,
  .post-card > .repost-thoughts-media > .post-media {
    margin-left: calc(-1 * var(--post-content-inset));
    margin-right: calc(-1 * var(--post-content-inset));
  }
  .post-card .post-media img,
  .post-card .post-media video { width: 100%; height: auto; max-height: none; }
  /* Reserve space while a still photo's natural size is unknown. Without
     it, collapsed photos pull later cards into the initial native readiness
     viewport and make an offscreen download hold the whole page. The auto
     ratio adopts the image's true proportions as soon as they are available. */
  .post-card .post-media img:not([width]):not([height]) { aspect-ratio: auto 3 / 4; }
  /* Older posts can contain inline photos. Keep their full ratio visible
     instead of cutting the photo off at the text excerpt's height limit. */
  .post-card .post-body.clamped:has(img, .photo-zoom-placeholder) { max-height: none; overflow: visible; }
  .post-card .post-body img {
    width: calc(100% + 2 * var(--post-content-inset));
    max-width: none;
    height: auto;
    max-height: none;
    margin-inline: calc(-1 * var(--post-content-inset));
    border: 0;
  }
  .post-head { gap: 6px; align-items: flex-start; margin-bottom: 12px; }
  .post-head .avatar-link { display: block; margin-top: 3px; line-height: 0; }
  .post-head .avatar { width: 36px; height: 36px; box-sizing: border-box; }
  .post-byline { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 3px; }
  .post-byline .post-who { width: 100%; font-size: 15px; line-height: 1.25; }
  .post-byline .date { width: auto; min-width: 0; flex: none; margin: 0; color: #555555; font-size: 11px; line-height: 1.3; }
  .post-card .post-head .follow-form,
  .post-card .post-head .follow { display: none; }
  .post-head .post-options { margin-left: 0; }
  .post-options > summary { width: 44px; min-height: 44px; padding: 4px; }
  .post-options-body { max-width: calc(100vw - 56px - var(--safe-left) - var(--safe-right)); }
  .post-options-body .act { padding: 8px 12px; font-size: 14px; }
  .repost-mark { align-items: flex-start; gap: 4px 8px; margin: 0 0 10px; }
  .repost-credit { flex: 1; font-size: 12px; line-height: 1.5; }
  .repost-credit a, .repost-credit bdi { min-width: 0; overflow-wrap: anywhere; }
  .repost-mark > .date { width: auto; min-width: 0; flex: none; font-size: 11px; white-space: nowrap; }
  .post-media { margin: 12px 0; }
  .post-body { text-align: start; }

  .post-actions {
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3px;
    margin-top: 12px;
    padding-top: 6px;
  }
  .post-actions .post-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .post-actions .like,
  .post-actions .comment-toggle,
  .post-actions .repost-choice > summary,
  .post-actions > .repost,
  .post-actions .share,
  .post-actions .save {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    box-sizing: border-box;
    color: #003366;
    text-decoration: none;
  }
  .post-actions .post-action-icon { display: block; width: 22px; height: 22px; flex: none; }
  .post-actions .post-action-count:not([hidden]) {
    display: inline-block;
    max-width: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.1;
    white-space: nowrap;
  }
  .post-actions .save { margin-left: auto; }

  /* Position the menu from the complete action row, so neither a narrow
     Repost control nor opening its composer moves the remaining controls. */
  .post-actions .repost-choice,
  .post-actions .repost-choice[open] { position: static; flex: none; }
  .post-actions .repost-choice-body {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 8px;
    align-items: stretch;
    max-height: min(420px, calc(var(--visible-height, 100dvh) - 100px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 12px;
  }
  .post-actions .repost-choice-body .repost-thoughts { margin: 0; padding: 0; min-width: 0; font-style: normal; }
  .post-actions .repost-choice-body .act { min-width: 44px; min-height: 44px; box-sizing: border-box; }
  .post-actions .repost-choice-body > .repost-form > button,
  .post-actions .repost-choice-body .repost-thoughts > summary { width: 100%; text-align: left; }
  .post-actions .thoughts-form { width: 100%; min-width: 0; }
  .post-actions .thoughts-form textarea { min-height: 90px; max-height: 160px; resize: vertical; }
  .post-actions .thoughts-form input { width: 100%; min-width: 0; }
  .post-actions .thoughts-form textarea,
  .post-actions .thoughts-form input,
  .post-actions .thoughts-form button { scroll-margin-bottom: calc(var(--mobile-nav-measured-height, calc(70px + var(--safe-bottom))) + 20px); }
}

@media (max-width: 360px) {
  .mobile-nav .mobile-nav-label { font-size: 10px; }
  .post-head:has(.post-byline) { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .post-head .avatar-link { grid-column: 1; grid-row: 1; }
  .post-head .post-byline { grid-column: 2; grid-row: 1; }
  .post-head .post-options { grid-column: 3; grid-row: 1; }
  .post-actions { gap: 2px; }
  .post-actions .like,
  .post-actions .comment-toggle,
  .post-actions .repost-choice > summary,
  .post-actions > .repost,
  .post-actions .share,
  .post-actions .save { flex-direction: column; justify-content: flex-start; gap: 1px; width: 44px; padding: 2px; }
}

/* Narrow cover displays retain all five 44px post actions on one row. */
@media (max-width: 300px) {
  .post-card { --post-content-inset: 12px; }
}

/* Profile controls are two plain rows. Each control keeps its own bevel;
   neither the owner actions nor the profile destinations need another box. */
.owner-tools.profile-owner-tools {
  margin: 16px 0;
  padding: 0;
  border: 0;
  background: none;
}
.profile-owner-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.profile-member-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.profile-member-actions .act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}
.profile-member-actions .act:focus-visible { outline: 2px solid #003366; outline-offset: -4px; }
.profile-owner-actions > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}
.profile-navigation {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: none;
  overflow-x: auto;
}
.profile-navigation > .tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  flex: 3 0 140px;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
.profile-navigation .tab,
.profile-navigation > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 2px;
  border: 2px outset #f5f5f5;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  text-decoration: none;
}
.profile-navigation > a { flex: 1 0 44px; background: #d4d0c8; color: #000000; }
.profile-navigation > a:hover { background: #e2ded6; color: #000000; }
.profile-navigation > a:active { border-style: inset; background: #c8c4bc; }
.profile-navigation .tab[aria-selected="true"] { border-style: inset; background: #ffffff; }
.profile-owner-actions a:focus-visible,
.profile-navigation .tab:focus-visible,
.profile-navigation > a:focus-visible { outline: 2px solid #003366; outline-offset: -4px; }

@media (max-width: 640px), (any-pointer: coarse), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  .member-topbar .community-menu { display: block; position: relative; flex: none; }
  .community-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px;
    list-style: none;
    cursor: pointer;
  }
  .community-menu > summary::-webkit-details-marker { display: none; }
  .community-menu > summary::marker { content: ""; }
  .community-menu > summary .nav-icon { width: 23px; height: 23px; }
  .community-menu[open] > summary { border-style: inset; }
  .community-menu > summary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
  .community-menu-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 31;
    width: 180px;
    max-width: calc(100vw - 96px - var(--safe-left) - var(--safe-right));
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #6f6f6f;
    background: #f5f5f0;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  }
  .community-menu-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 6px;
    text-align: center;
    white-space: normal;
  }
  .community-menu-links a:focus-visible { outline: 2px solid #003366; outline-offset: -4px; }
}


/* A spanned browser gets one continuous scroll surface, including fixed
   navigation and drawers. Never place interactive content across a hinge.
   Native Android reduces the WebView bounds itself; these rules cover web
   browsers/WebViews that expose segmented viewports. No device-name guesses. */
@media (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  html {
    --pane-width: env(viewport-segment-width 0 0);
    --pane-height: env(viewport-segment-height 0 0);
    position: fixed;
    left: env(viewport-segment-left 0 0);
    top: env(viewport-segment-top 0 0);
    width: var(--pane-width);
    height: var(--pane-height);
    overflow: hidden;
    transform: translateZ(0);
    container-type: inline-size;
  }
  body {
    box-sizing: border-box;
    width: 100%;
    max-width: 754px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    scroll-padding-top: calc(var(--bar-h, 0px) + var(--feed-tabs-h, 0px) + 12px);
  }
  body.drawer-active { position: static; overflow: hidden; }
  .drawer {
    top: 0;
    height: min(var(--visible-height, 100dvh), var(--pane-height));
  }
  .post-options-body { max-width: calc(var(--pane-width) - 56px - var(--safe-left) - var(--safe-right)); }
  .post-actions .repost-choice-body { max-height: min(420px, calc(min(var(--visible-height, 100dvh), var(--pane-height)) - 100px)); }
  .community-menu-links { max-width: calc(var(--pane-width) - 96px - var(--safe-left) - var(--safe-right)); }
}
@container (max-width: 360px) {
  .mobile-nav .mobile-nav-label { font-size: 10px; }
  .post-head:has(.post-byline) { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .post-head .avatar-link { grid-column: 1; grid-row: 1; }
  .post-head .post-byline { grid-column: 2; grid-row: 1; }
  .post-head .post-options { grid-column: 3; grid-row: 1; }
  .post-actions { gap: 2px; }
  .post-actions .like, .post-actions .comment-toggle, .post-actions .repost-choice > summary,
  .post-actions > .repost, .post-actions .share, .post-actions .save {
    flex-direction: column; justify-content: flex-start; gap: 1px; width: 44px; padding: 2px;
  }
}
@container (max-width: 300px) {
  .post-card { --post-content-inset: 12px; }
}

/* A thread stays above the feed: history/Close restores the exact scroll
   position, and the composer remains reachable above the phone keyboard. */
.comments-drawer { width: min(100%, 600px); max-width: 100%; display: flex; flex-direction: column; overflow: hidden; }
.comments-drawer[hidden] { display: none; }
.comments-drawer-content, .comments-drawer-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.comments-drawer .comments { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 0; margin: 0; padding: 0; }
.comments-drawer .comment-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.comments-drawer .composer { flex: none; padding-top: 8px; border-top: 1px solid #b5b5b5; background: #f5f5f0; }
.comments-drawer .composer textarea { max-height: 22dvh; resize: vertical; }
.comments-drawer .comments > .small { flex: none; margin: 4px 0; font-size: 11px; }
.comments-drawer .comment-status { margin: 2px 0; }
.comments-drawer .composer-row { flex-wrap: wrap; }
.reaction-status { margin: 4px 0; }

/* Comments are a compact sheet on touch/narrow screens. The surrounding
   feed stays visible but inert; the backdrop is the outside-tap target. */
.comments-backdrop {
  position: fixed; z-index: 39; left: 0; right: 0;
  top: var(--visible-top, 0px);
  height: min(var(--visible-height, 100dvh), var(--pane-height, 100dvh));
  background: rgba(0, 0, 0, 0.22);
}
.comments-backdrop[hidden] { display: none; }
.comments-sheet-grip { display: none; }
.comments-drawer .comment-guidelines { flex: none; margin: 2px 0 0; font-size: 11px; }
.comments-drawer .comment-guidelines summary { cursor: pointer; padding: 5px 0; }
.comments-drawer .comment-guidelines p { max-height: 70px; overflow-y: auto; margin: 4px 0; }
.comments-drawer .composer-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.comments-drawer .composer-row .comment-post { margin-left: auto; }
.comments-drawer .composer-row .attach-note { min-width: 0; flex: 1; overflow-wrap: anywhere; max-height: 44px; overflow-y: auto; }
@media (max-width: 640px), (any-pointer: coarse), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  .comments-drawer {
    --comments-viewport-height: min(var(--visible-height, 100dvh), var(--pane-height, 100dvh));
    --comments-sheet-height: min(560px, calc(var(--comments-viewport-height) * 0.72));
    top: calc(var(--visible-top, 0px) + var(--comments-viewport-height) - var(--comments-sheet-height));
    left: 0; right: 0; bottom: auto;
    width: 100%; min-width: 0; max-width: none;
    height: var(--comments-sheet-height);
    border: 1px solid #8b8b86; border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -3px 16px rgba(0,0,0,0.16);
    transform: translateY(105%);
  }
  .comments-drawer.open { transform: translateY(var(--comments-drag-y, 0px)); }
  .comments-drawer.comments-dragging { transition: none; user-select: none; }
  .comments-drawer:has(textarea:focus, input:focus) {
    --comments-sheet-height: min(560px, calc(var(--comments-viewport-height) - 48px));
  }
  .comments-sheet-grip { display: block; flex: none; height: 18px; cursor: grab; touch-action: none; }
  .comments-sheet-grip::after { content: ""; display: block; width: 36px; height: 4px; margin: 7px auto; border-radius: 2px; background: #9a9a95; }
  .comments-drawer .panel-head.drawer-head { position: static; min-height: 46px; margin: 0 -12px 6px; padding-top: 0; touch-action: none; }
  .comments-drawer .composer textarea { min-height: 44px; height: 52px; max-height: 16dvh; }
  .comments-drawer .comment-list { min-height: 24px; }
}
.comments-drawer .comment-reply:not([open]) { display: inline-block; margin: 0 8px 4px 0; vertical-align: middle; }
.comments-drawer .comment-reply:not([open]) > summary { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
.comments-drawer .comment-reply[open] { width: 100%; }
.comments-drawer .comment-safety { vertical-align: middle; margin-bottom: 4px; }

/* Initial native navigation waits for visible content. In-place refresh never
   sets this attribute and never hides the existing page. */
html[data-blog-native-loading="pending"] .member-content { visibility: hidden; }
.content-refresh-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; color: #003366; font-size: 13px; }
.content-refresh-status[hidden], .content-refresh-status [hidden] { display: none; }
.refresh-brand { display: inline-flex; }
.refresh-brand img { display: block; width: 22px; height: 28px; }
.content-refresh-status.refreshing .refresh-brand { animation: refresh-b-pulse 1.2s ease-in-out infinite; }
.profile-refresh-host { text-align: center; }
.content-preparation { contain: layout style; }
@keyframes refresh-b-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .content-refresh-status.refreshing .refresh-brand { animation: none; } }

/* The app's pull gesture owns the overscroll space, including its blue B.
   The page and fixed bottom navigation remain visible throughout the read. */
html[data-blog-refresh="web-ready"], html[data-blog-refresh="web-ready"] body { overscroll-behavior-y: none; }
html[data-blog-pull-refresh] body { overflow-anchor: none; }
.pull-refresh-space { height: 0; display: grid; place-items: center; overflow: hidden; background: #fff; pointer-events: none; contain: layout paint; }
.pull-refresh-space img { display: block; width: 26px; height: 34px; max-width: none; margin: 0; }
.pull-refresh-space.settling { transition: height 160ms ease-out; }
.pull-refresh-space.refreshing img { animation: refresh-b-pulse 1.2s ease-in-out infinite; }
.pull-refresh-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .pull-refresh-space.settling { transition: none; }
  .pull-refresh-space.refreshing img { animation: none; }
}


/* One app surface at every touch-window size. Keep reading lines bounded,
   but let the white paper, masthead and bottom bar share the same frame.
   Use the active pane rather than the physical screen on spanned devices. */
@media (max-width: 640px), (any-pointer: coarse), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  body.member-page {
    --app-frame-width: var(--pane-width, 100vw);
    --app-gutter-left: max(calc(16px + var(--safe-left)), calc((var(--app-frame-width) - 800px) / 2));
    --app-gutter-right: max(calc(16px + var(--safe-right)), calc((var(--app-frame-width) - 800px) / 2));
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    border: 0;
    padding-left: var(--app-gutter-left);
    padding-right: var(--app-gutter-right);
  }
  .member-page .member-topbar {
    margin-left: calc(-1 * var(--app-gutter-left));
    margin-right: calc(-1 * var(--app-gutter-right));
    padding-left: var(--app-gutter-left);
    padding-right: var(--app-gutter-right);
  }
  .member-page .mobile-nav {
    padding-left: max(calc(6px + var(--safe-left)), calc((var(--app-frame-width) - 800px) / 2));
    padding-right: max(calc(6px + var(--safe-right)), calc((var(--app-frame-width) - 800px) / 2));
  }
  .member-content { min-width: 0; }
  .member-page.drawer-with-navigation #alertsPanel {
    padding-left: var(--app-gutter-left);
    padding-right: var(--app-gutter-right);
  }
}

/* A roomy window gets a readable tablet scale, not a stretched phone photo.
   Contain preserves the whole picture; photo zoom still uses the full image.
   Small/landscape phones retain their natural, edge-to-edge photo proportions. */
@media (any-pointer: coarse) and (min-width: 700px) and (min-height: 500px) {
  body.member-page {
    --text: 18px;
    --ui: 16px;
    --meta: 13px;
    --title: 22px;
    --mobile-nav-height: 76px;
  }
  .member-page .member-topbar { padding-top: calc(12px + var(--safe-top)); padding-bottom: 12px; }
  .member-page .feed-tabs { padding-block: 10px; gap: 10px; }
  .member-page .feed-tab { min-height: 48px; font-size: 18px; }
  .member-page .mobile-nav-label { font-size: 14px; }
  .member-page .post-card .post-media img,
  .member-page .post-card .post-media video,
  .member-page .post-card .post-body img {
    max-height: min(720px, calc(min(100dvh, var(--pane-height, 100dvh)) * .62));
    object-fit: contain;
  }
  .member-page .post-card { padding-block: 20px; }
  .member-page .post-head .avatar { width: 44px; height: 44px; }
  .member-page .post-byline .post-who { font-size: 18px; }
  .member-page .post-byline .date,
  .member-page .repost-credit,
  .member-page .repost-mark > .date { font-size: 13px; }
  .member-page .post-actions { gap: 12px; }
  .member-page .post-actions .post-action-icon { width: 24px; height: 24px; }
  .member-page .post-actions .post-action-count { font-size: 13px; }
  .member-page #writeForm { max-width: none; }
  .member-page .profile-head { gap: 24px; margin-block: 26px 16px; }
  .member-page .avatar-img, .member-page .avatar-big { width: 104px; height: 104px; }
  .member-page .profile-navigation > *, .member-page .profile-navigation .tab,
  .member-page .profile-owner-actions a { font-size: 16px; }
  .member-page .comments-drawer {
    width: min(100%, 800px);
    margin-inline: auto;
    padding-left: max(24px, calc(12px + var(--safe-left)));
    padding-right: max(24px, calc(12px + var(--safe-right)));
  }
}

/* A wide folded viewport can still have a phone-sized active pane. */
@container (max-width: 699px) {
  body.member-page { --text: 16px; --ui: 14px; --meta: 12px; --title: 18px; --mobile-nav-height: 70px; }
  .member-page .member-topbar { padding-top: calc(8px + var(--safe-top)); padding-bottom: 8px; }
  .member-page .feed-tabs { padding-block: 6px; gap: 6px; }
  .member-page .feed-tab { min-height: 44px; font-size: 15px; }
  .member-page .mobile-nav-label { font-size: 11px; }
  .member-page .post-card .post-media img,
  .member-page .post-card .post-media video,
  .member-page .post-card .post-body img { max-height: none; }
  .member-page .post-card { padding-block: 12px; }
  .member-page .post-head .avatar { width: 36px; height: 36px; }
  .member-page .post-byline .post-who { font-size: 15px; }
  .member-page .post-byline .date, .member-page .repost-mark > .date { font-size: 11px; }
  .member-page .repost-credit { font-size: 12px; }
  .member-page .post-actions { gap: 3px; }
}