/* ============================================================
   Impact — feed & shell visual refresh
   ============================================================

   The signed-in app chrome and the Posts / Create Post surfaces brought onto
   the same visual system as the public website: ivory ground, paper cards,
   emerald actions, mint accents, and a serif display face.

   This file only *overrides* existing components (.topbar, .sidebar,
   .account-menu, .bottom-nav, .posts-screen, .composer-card, …). It adds no
   behaviour: every control, route, permission check and API call stays in
   app.js / posts.js / feed.js. Delete this stylesheet and the app still works
   — it just looks like it did before.

   Tokens (from the visual refresh):
     ivory  #f7f8f2   paper #ffffff   ink   #17251f
     forest #176344   muted #59685f   line  #dce5dd
     mint   #b9f3d2   tint  #e8f8ee

   Light mint is the app's dominant ground. `--fr-tint` (the mint behind the
   selected sidebar item) is the reference; the large surfaces step it down so
   the shell reads as one mint field while cards stay paper and separate.
   ============================================================ */

.app {
  --fr-ivory: #f7f8f2;
  --fr-paper: #ffffff;
  --fr-ink: #17251f;
  --fr-forest: #176344;
  --fr-forest-dark: #124f36;
  --fr-muted: #59685f;
  --fr-line: #dce5dd;
  --fr-mint: #b9f3d2;
  --fr-tint: #e8f8ee;
  /* Mint shell surfaces — reference mint #e8f8ee, stepped down for area. */
  --fr-mist: #eef9f2; /* main workspace ground */
  --fr-rail: #e8f8ee; /* sidebar = the reference mint itself */
  --fr-header: #f3fbf6; /* top bar, the lightest of the three */
  /* One step deeper than the rail, so the selected item still reads as
     selected on a mint sidebar. */
  --fr-selected: #d6f1e2;
  --fr-radius: 14px;
  /* Height of the sticky top bar. The drawer starts below it so the lockup
     and the menu button stay visible (and usable) while it is open. */
  --fr-topbar: 64px;
  background: var(--fr-mist);
}

.app :is(.topbar, .sidebar, .view, .footer, .account-menu-dropdown) {
  font-family: var(--font);
}

/* ============================================================
   1. Top bar — visible at every width (the lockup lives here)
   ============================================================ */

.topbar {
  gap: 12px;
  min-height: 64px;
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--fr-line);
  background: var(--fr-header);
  top: var(--top-pill-h, 0px);
  z-index: 45;
}

.topbar .brand {
  gap: 0;
}

.topbar .impact-logo {
  --impact-logo-height: 40px;
}

/* The current screen, stated quietly — the sidebar carries the full map. */
.topbar-title {
  margin-left: 2px;
  color: var(--fr-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   2. Sidebar — navigation only, two labelled sections
   ============================================================ */

/* The lockup is in the top bar now; a second one in the drawer would be a
   duplicate at the same size. The drawer starts with its section label. */
.sidebar-brand {
  display: none !important;
}

.sidebar {
  padding: 14px 12px 16px;
  border-right: 1px solid var(--fr-line);
  background: var(--fr-rail);
  gap: 0;
}

.sidebar-nav {
  gap: 0;
}

.sidebar .nav-label {
  padding: 12px 10px 6px;
  color: var(--fr-muted);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sidebar .sidebar-section-label:first-child {
  padding-top: 6px;
}

/* Sections, not five equal clusters: the rule between groups goes away and
   the labels do the grouping. */
.sidebar .nav-group {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
  gap: 2px;
}

.sidebar .nav-group.nav-bottom {
  margin-top: 2px;
}

.sidebar .sidenav-link,
.sidebar .sidebar-signout {
  min-height: 38px;
  padding: 0 10px;
  gap: 10px;
  border-radius: 9px;
  color: var(--fr-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.sidebar .sidenav-link svg,
.sidebar .sidebar-signout svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
  color: #7c8a80;
}

.sidebar .sidenav-link:hover,
.sidebar .sidebar-signout:hover {
  /* On a mint rail a white wash reads as a highlight; the old near-white green
     disappeared into the background. */
  background: rgba(255, 255, 255, 0.78);
  color: var(--fr-ink);
}

.sidebar .sidenav-link:hover svg {
  color: var(--fr-forest);
}

.sidebar .sidenav-link.active {
  background: var(--fr-selected);
  color: var(--fr-forest);
  font-weight: 700;
}

.sidebar .sidenav-link.active svg {
  color: var(--fr-forest);
}

.sidebar .sidenav-link.active::before {
  content: '';
  align-self: stretch;
  order: -1;
  width: 3px;
  margin-left: -10px;
  border-radius: 0 3px 3px 0;
  background: var(--fr-forest);
}

.sidebar .nav-badge {
  background: var(--fr-forest);
  color: #fff;
}

/* Quiet prompt card, as in the refreshed navigation. */
.sidebar-note {
  display: grid;
  gap: 6px;
  margin: 14px 4px 6px;
  padding: 14px;
  border: 1px solid var(--fr-line);
  border-radius: 12px;
  background: var(--fr-paper);
}

.sidebar-note svg {
  width: 18px;
  height: 18px;
  color: var(--fr-forest);
}

.sidebar-note strong {
  color: var(--fr-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sidebar-note span {
  color: var(--fr-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.sidebar-note a {
  margin-top: 2px;
  color: var(--fr-forest);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-note a:hover {
  text-decoration: underline;
}

.sidebar-collapse,
.sidebar-restore {
  border-color: var(--fr-line);
  border-radius: 10px;
  background: var(--fr-paper);
  color: var(--fr-ink);
}

/* ============================================================
   3. Account menu — pill trigger, compact paper menu
   ============================================================ */

.account-menu-btn {
  min-height: 40px;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--fr-line);
  border-radius: 999px;
  background: var(--fr-paper);
}

.account-menu-btn:hover {
  border-color: #b8d7c2;
  background: #f7fbf8;
}

.account-menu-btn .avatar {
  width: 32px;
  height: 32px;
  background: var(--fr-mint);
  color: var(--fr-forest);
  font-size: 11px;
  font-weight: 750;
}

.account-menu-chevron {
  color: #758176;
}

.account-menu-dropdown {
  width: 208px;
  padding: 6px;
  border: 1px solid var(--fr-line);
  border-radius: 12px;
  background: var(--fr-paper);
  box-shadow: 0 14px 34px rgba(23, 37, 31, 0.13);
}

.account-menu-dropdown .menu-label {
  padding: 9px 10px 8px;
  color: var(--fr-muted);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-menu-dropdown a,
.account-menu-dropdown button {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--fr-ink);
  font-size: 13px;
  font-weight: 500;
}

.account-menu-dropdown a:hover,
.account-menu-dropdown button:hover,
.account-menu-dropdown a:focus-visible,
.account-menu-dropdown button:focus-visible {
  background: var(--fr-tint);
  color: var(--fr-forest);
}

.account-menu-dropdown .menu-sep {
  border-top-color: #e8eee9;
}

/* ============================================================
   4. Bottom navigation (phones / tablets)
   ============================================================ */

.bottom-nav {
  height: calc(62px + env(safe-area-inset-bottom));
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fr-line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -5px 18px rgba(23, 59, 49, 0.07);
  backdrop-filter: blur(6px);
}

.has-bn .view {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.bottom-nav .bn-item {
  position: relative;
  gap: 3px;
  border-radius: 6px;
  color: #748077;
  font-size: 9px;
  font-weight: 600;
}

.bottom-nav .bn-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.bottom-nav .bn-item.active {
  color: #2c8057;
}

.bottom-nav .bn-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  right: 20%;
  left: 20%;
  height: 2px;
  border-radius: 2px;
  background: #77c99b;
}

.bottom-nav .bn-item:active {
  background: var(--fr-tint);
}

.bottom-nav .bn-create {
  color: var(--fr-ink);
  font-weight: 750;
}

.bottom-nav .bn-create-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fr-tint);
  color: var(--fr-forest);
}

/* ============================================================
   5. Posts — heading, compose prompt, tabs, cards, rail
   ============================================================ */

#posts-screen {
  max-width: 1080px;
  padding-bottom: var(--s-7);
}

.posts-screen,
.composer-screen {
  padding-top: 6px;
}

.posts-head {
  align-items: flex-end;
  margin-bottom: 20px;
}

.posts-head .eyebrow {
  color: var(--fr-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.posts-head h1 {
  margin: 6px 0 4px;
  color: var(--fr-ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.posts-head p {
  color: var(--fr-muted);
  font-size: 13px;
  max-width: 46ch;
}

.posts-head-actions {
  gap: 6px;
}

.posts-head-actions .btn-ghost {
  color: var(--fr-muted);
}

.posts-head-actions .btn-primary {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--fr-forest);
  border-radius: 9px;
  background: var(--fr-forest);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

.posts-head-actions .btn-primary:hover {
  background: var(--fr-forest-dark);
  border-color: var(--fr-forest-dark);
}

.posts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 24px;
  align-items: start;
}

.posts-column {
  min-width: 0;
}

/* Compose prompt — one tap into the dedicated Create Post screen. */
.compose-prompt {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-radius);
  background: var(--fr-paper);
  box-shadow: 0 4px 14px rgba(23, 37, 31, 0.035);
}

.compose-prompt-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fr-mint);
  color: var(--fr-forest);
  font-size: 11px;
  font-weight: 750;
}

.compose-prompt-field {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #e7eadf;
  border-radius: 9px;
  background: var(--fr-ivory);
  color: #6d7b71;
  font-size: 13px;
  text-decoration: none;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.compose-prompt-field:hover {
  border-color: #a9cdb5;
  background: #f4fbf6;
}

.compose-prompt-post {
  flex: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--fr-forest);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.compose-prompt-post:hover {
  background: var(--fr-tint);
}

.posts-tabs {
  gap: 2px;
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--fr-line);
}

.posts-tab {
  padding: 9px 12px;
  border-radius: 8px 8px 0 0;
  color: var(--fr-muted);
  font-size: 13px;
  font-weight: 600;
}

.posts-tab:hover {
  background: #f3f8f4;
  color: var(--fr-ink);
}

.posts-tab.active {
  color: var(--fr-forest);
  border-bottom-color: var(--fr-forest);
}

.post-feed {
  display: grid;
  gap: 14px;
}

.post-card {
  padding: 16px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-radius);
  background: var(--fr-paper);
  box-shadow: 0 4px 14px rgba(23, 37, 31, 0.035);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.post-card:hover {
  border-color: #cbdcd0;
  box-shadow: 0 8px 22px rgba(23, 37, 31, 0.06);
}

.post-card .post-head {
  gap: 10px;
}

.post-card .avatar,
.post-card .org-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 750;
}

.post-byline {
  color: var(--fr-ink);
  font-size: 13px;
  font-weight: 650;
}

.post-byline .verified-badge svg,
.post-byline .v-mark svg {
  width: 13px;
  height: 13px;
}

.post-meta {
  color: var(--fr-muted);
  font-size: 10.5px;
}

.post-edit-link {
  color: var(--fr-forest);
  font-size: 11.5px;
  font-weight: 650;
}

.post-title {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.post-title a {
  color: var(--fr-ink);
  text-decoration: none;
}

.post-title a:hover {
  color: var(--fr-forest);
}

.post-body {
  margin: 12px 0 0;
  color: #34463b;
  font-size: 13.5px;
  line-height: 1.7;
}

.post-card .post-images {
  margin-top: 12px;
  border-radius: 10px;
  overflow: hidden;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eef2ee;
}

.post-action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--fr-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.post-action:hover {
  background: #f2faf4;
  color: var(--fr-forest);
}

.post-action.on {
  color: var(--fr-forest);
}

.post-action.on svg {
  fill: var(--fr-tint);
  stroke: var(--fr-forest);
}

.post-action .count {
  font-variant-numeric: tabular-nums;
}

.post-action-quiet {
  margin-left: auto;
}

.posts-more {
  margin-top: 14px;
}

.feed-loader,
.feed-empty {
  padding: 26px 16px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-radius);
  background: var(--fr-paper);
  text-align: center;
}

/* ---- Right rail ---- */

.posts-rail {
  display: grid;
  gap: 14px;
  position: sticky;
  top: calc(var(--top-pill-h, 0px) + 88px);
}

.rail-card {
  padding: 16px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-radius);
  background: var(--fr-paper);
  box-shadow: 0 4px 14px rgba(23, 37, 31, 0.035);
}

.rail-card[hidden] {
  display: none;
}

.rail-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rail-eyebrow {
  color: var(--fr-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rail-card-head h2 {
  margin: 5px 0 0;
  color: var(--fr-forest);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rail-card-link {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--fr-forest);
  font-size: 15px;
  text-decoration: none;
}

.rail-card-link:hover {
  background: var(--fr-tint);
}

.rail-org-list {
  display: grid;
}

.rail-org {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 0;
  border-top: 1px solid #edf0e9;
  color: var(--fr-ink);
  text-decoration: none;
}

.rail-org:hover strong {
  color: var(--fr-forest);
}

.rail-org-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fr-tint);
  color: var(--fr-forest);
  font-size: 11px;
  font-weight: 750;
  object-fit: cover;
}

.rail-org-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rail-org-text strong {
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-org-text small {
  color: var(--fr-muted);
  font-size: 10px;
}

.rail-card-more {
  display: inline-flex;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf0e9;
  color: var(--fr-forest);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.rail-card-more:hover {
  text-decoration: underline;
}

.rail-values {
  padding: 16px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-radius);
  background: var(--fr-tint);
}

.rail-values svg {
  color: var(--fr-forest);
}

.rail-values p {
  margin: 8px 0 6px;
  color: var(--fr-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  line-height: 1.35;
}

.rail-values span {
  color: var(--fr-muted);
  font-size: 10px;
}

/* ============================================================
   6. Create Post — the form, and nothing else
   ============================================================ */

.composer-screen {
  max-width: 820px;
}

/* No bottom navigation and no floating assistant on a single-task screen;
   the back link and Cancel are the exits. */
body.is-composer .bottom-nav,
body.is-composer .assistant-fab {
  display: none !important;
}

.composer-screen .composer-page {
  padding-bottom: var(--s-6);
}

.composer-back {
  margin-bottom: 10px;
  color: var(--fr-muted);
}

.composer-back:hover {
  color: var(--fr-forest);
}

.composer-page-head {
  margin-bottom: 16px;
}

.composer-page-head .eyebrow {
  color: var(--fr-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.composer-page-head h1 {
  margin: 6px 0 6px;
  color: var(--fr-ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.composer-page-head p {
  color: var(--fr-muted);
  font-size: 13px;
  max-width: 58ch;
}

.composer-card {
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-radius);
  background: var(--fr-paper);
  box-shadow: 0 4px 14px rgba(23, 37, 31, 0.035);
}

.composer-card .field > label {
  color: var(--fr-ink);
  font-size: 12px;
  font-weight: 650;
}

.composer-card .input,
.composer-card .textarea {
  border: 1px solid var(--fr-line);
  border-radius: 9px;
  background: #fff;
  color: var(--fr-ink);
  font-size: 13.5px;
}

.composer-card .input:focus,
.composer-card .textarea:focus {
  border-color: #8fc3a4;
  box-shadow: 0 0 0 3px rgba(23, 99, 68, 0.12);
  outline: none;
}

.composer-body {
  min-height: 180px;
  padding: 13px;
  line-height: 1.65;
}

.composer-meta,
.composer-attach {
  color: var(--fr-muted);
  font-size: 11.5px;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.composer-actions .btn-primary {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid var(--fr-forest);
  border-radius: 9px;
  background: var(--fr-forest);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.composer-actions .btn-primary:hover:not(:disabled) {
  background: var(--fr-forest-dark);
  border-color: var(--fr-forest-dark);
}

.composer-actions .btn-primary:disabled {
  opacity: 0.5;
}

.composer-notice {
  border: 1px solid #cfe5d5;
  border-radius: 12px;
  background: #eaf7ee;
  color: #405a49;
}

.composer-notice strong {
  color: var(--fr-ink);
}

.composer-hint {
  color: var(--fr-muted);
}

/* The identity picker is a real control — keep it legible, quiet its frame. */
.composer-card .identity-picker,
.composer-card .identity-picker-box {
  border-radius: 10px;
  background: #f6faf7;
}

/* ============================================================
   7. Staff testing banner — never covers the chrome it sits above
   ============================================================ */

/* The pill is sticky at the very top; the top bar sticks below its measured
   height and the fixed sidebar starts below both. app.js publishes
   --top-pill-h whenever any banner is on screen. */
body.has-top-pill .topbar {
  top: var(--top-pill-h, 0px);
}

@media (min-width: 1024px) {
  body.has-top-pill .sidebar {
    top: calc(var(--top-pill-h, 0px) + 72px);
    height: calc(100vh - var(--top-pill-h, 0px) - 72px);
  }
}

@media (max-width: 1023px) {
  /* Phones and tablets: the drawer and its scrim begin under the top bar
     instead of covering it, so the menu button that opened the drawer is
     still on screen — the header is the only close control up there. */
  .sidebar,
  body.has-top-pill .sidebar {
    top: calc(var(--top-pill-h, 0px) + var(--fr-topbar));
    height: auto;
  }

  .sidebar-scrim {
    top: calc(var(--top-pill-h, 0px) + var(--fr-topbar));
  }
}

/* ============================================================
   8. Wide screens — top bar above a navigation-only sidebar
   ============================================================ */

@media (min-width: 1024px) {
  /* The top bar is a sibling of .app-body; stack them. */
  .app {
    flex-direction: column;
  }

  .topbar {
    display: flex;
    min-height: 72px;
    padding: 0 24px;
    background: var(--fr-header);
  }

  /* The drawer toggle is a phone control; the sidebar is always on screen here. */
  .menu-toggle {
    display: none;
  }

  .topbar .impact-logo {
    --impact-logo-height: 42px;
  }

  .topbar-title {
    flex: 1 1 auto;
  }

  html body .sidebar {
    top: 72px;
    height: calc(100vh - 72px);
    width: 264px;
    padding-top: 18px;
  }

  .app-body {
    margin-left: 264px;
  }
}

/* Rail folds away before it can squeeze the feed. */
@media (max-width: 1180px) {
  .posts-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .posts-rail {
    display: none;
  }
  #posts-screen {
    max-width: 760px;
  }
}

/* ============================================================
   9. Phones
   ============================================================ */

@media (max-width: 720px) {
  .app {
    --fr-topbar: 60px;
  }

  .topbar {
    min-height: 60px;
    padding: 8px 12px;
  }

  .topbar .impact-logo {
    --impact-logo-height: 34px;
  }

  .topbar-title {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .sidebar {
    padding: 10px 10px 14px;
  }

  .posts-head {
    align-items: flex-start;
    margin-bottom: 14px;
  }

  .posts-head h1 {
    font-size: 30px;
  }

  /* One full-width primary action instead of two half-aligned buttons. */
  .posts-head-actions {
    width: 100%;
    align-items: center;
  }

  .posts-head-actions .btn-primary {
    flex: 1;
    justify-content: center;
  }

  .posts-head-actions .btn-ghost {
    min-height: 40px;
    padding-inline: 10px;
  }

  .compose-prompt {
    gap: 8px;
    padding: 9px;
    min-height: 60px;
  }

  .compose-prompt-field {
    min-height: 38px;
    padding: 0 11px;
    font-size: 12px;
  }

  .compose-prompt-post {
    padding: 0 10px;
    min-height: 36px;
    font-size: 12px;
  }

  .post-card {
    padding: 13px;
  }

  .post-title {
    font-size: 19px;
  }

  .post-action {
    padding: 0 7px;
    font-size: 11px;
  }

  .post-action-quiet {
    margin-left: 0;
  }

  .composer-card {
    padding: 14px;
    gap: 14px;
  }

  /* Publish and Cancel are docked to the bottom of the phone screen, so the
     primary action is always visible however long the draft gets. The form
     reserves room for the bar so the last field is never hidden under it. */
  .composer-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    justify-content: space-between;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--fr-line);
    background: var(--fr-paper);
    box-shadow: 0 -6px 18px rgba(23, 59, 49, 0.06);
  }

  .composer-actions .btn-primary {
    flex: 1;
    min-height: 44px;
    margin-left: 10px;
  }

  .composer-actions .btn-ghost {
    min-height: 44px;
  }

  .composer-screen .composer-page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .bottom-nav .bn-label {
    font-size: 8.5px;
  }
  .bottom-nav .bn-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   10. Motion — short, and off when asked
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .post-card,
  .compose-prompt,
  .rail-card,
  .account-menu-dropdown {
    animation: fr-card-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes fr-card-in {
  from {
    opacity: 0.6;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Messages → Connections
   ============================================================

   The pane header ("Messages", New message) and the tabs are inset by
   var(--s-3). The connections panel used to have no inset of its own, so its
   section headings and empty-state copy sat flat against the card border.
   Both sections now share the header's inset, the heading sits directly above
   the copy it introduces, and the gap between the sections is equal. */
.msg-connections {
  display: grid;
  gap: var(--s-5);
  padding: 0 var(--s-3) var(--s-4);
}

.msg-connections-group {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.msg-connections .section-title {
  margin: 0;
}

/* Below 1000px the messages pane is full-bleed and its header/tabs drop their
   inset (styles.css), so the sections align to that same edge instead. */
@media (max-width: 999px) {
  .msg-connections {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app *,
  .app *::before,
  .app *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}