/* o9k.co vanilla client styles. Loaded from /assets/app.css */

/* Login page — cyberpunk-style background image; box centered horizontally,
   top of box approximately 16% down from viewport top per the design. */
.o9k-login-page {
  min-height: 100vh;
  background: #FBF7EE;
  padding-top: 16vh;
  padding-bottom: var(--pp-space-six);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  color: #241E14;
  box-sizing: border-box;
}

.o9k-login-box {
  background: rgba(255,253,248,0.90);
  border: 1px solid #E5DBC8;
  border-radius: 4px;
  padding: 32px 28px;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(60,45,20,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.o9k-wrap {
  max-width: 640px;
  margin: var(--pp-space-ten) auto;
  padding: 0 var(--pp-space-four);
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  color: #241E14;
}

.o9k-h {
  font-size: 28px;
  color: #9A7B2E;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 6px;
}

.o9k-sub {
  color: #6E6450;
  font-size: 11px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.o9k-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}

.o9k-form input {
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  color: #241E14;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  border-radius: 2px;
}

.o9k-form input:focus {
  outline: none;
  border-color: #9A7B2E;
}

.o9k-form button {
  background: var(--pp-color-action-primary, #836726); /* AA: ivory onPrimary 5.3:1 */
  border: none;
  color: #FBF7EE;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 2px;
}

.o9k-form button:hover { background: var(--pp-color-action-primary-hover, #9A7B2E); }
.o9k-form button:active { background: var(--pp-color-action-primary-pressed, #6E5520); }

.o9k-err {
  color: #9A3B2E;
  background: #4A2020;
  border: 1px solid #6E2A2A;
  padding: var(--pp-space-two) var(--pp-space-three);
  font-size: 12px;
  margin-top: 6px;
}

.o9k-dim { color: #6E6450; }

.o9k-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  background: rgba(255,253,248,0.95);
  border-bottom: 1px solid #E5DBC8;
  display: flex;
  align-items: center;
  padding: 0 var(--pp-space-four);
  gap: var(--pp-space-three);
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  z-index: 50;
}

.o9k-logo {
  color: #9A7B2E;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 14px;
  flex: 1;
}

.o9k-btn {
  background: none;
  border: 1px solid #E5DBC8;
  color: #241E14;
  font: inherit;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 2px;
}

.o9k-btn:hover {
  border-color: #9A7B2E;
  color: #9A7B2E;
}

.o9k-post {
  border: 1px solid #E5DBC8;
  background: #F2EADB;
  margin-top: 10px;
  padding: 12px 14px;
}

.o9k-meta {
  color: #6E6450;
  font-size: 10px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.o9k-body {
  color: #241E14;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.o9k-eng {
  color: #6E6450;
  font-size: 10px;
  margin-top: var(--pp-space-two);
  letter-spacing: 0.5px;
}

.o9k-av {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  object-fit: cover;
  background: #CFC2A6;
  color: #241E14;
  text-align: center;
  line-height: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.o9k-av-fallback, .o9k-av-pending {
  background: #CFC2A6;
}
.o9k-meta-text {
  vertical-align: middle;
}

.o9k-react-bar {
  display: flex;
  gap: var(--pp-space-two);
  margin-top: var(--pp-space-two);
}
.o9k-react-btn {
  padding: 6px 12px;
  font-size: 14px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-one);
}
.o9k-react-count {
  font-size: 12px;
  color: #6E6450;
  font-variant-numeric: tabular-nums;
}
.o9k-react-btn.o9k-btn-active .o9k-react-count {
  color: #241E14;
}
.o9k-btn {
  appearance: none;
  background: transparent;
  border: 1px solid #CFC2A6;
  color: #6E6450;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  min-width: 32px;
}
.o9k-btn:hover {
  border-color: #9A7B2E;
  color: #241E14;
}
.o9k-btn-active {
  background: #CFC2A6;
  color: #241E14;
  border-color: #9A7B2E;
}

.o9k-comment-head {
  color: #6E6450;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: var(--pp-space-six) 0 var(--pp-space-two);
}
.o9k-comment {
  padding: 10px 0;
  border-top: 1px solid #E5DBC8;
}
.o9k-comment-compose {
  margin-bottom: var(--pp-space-five);
  padding: 10px;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 2px;
}
.o9k-ta {
  width: 100%;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  color: #241E14;
  padding: var(--pp-space-two);
  font: inherit;
  font-size: 13px;
  border-radius: 2px;
  resize: vertical;
}
.o9k-compose-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* §15 Profile Page (web UI spec): banner is the background of the
   identity block; avatar overlaps the banner via negative margin-top.
   Reasoning: the user (@sskpoa) flagged on 2026-04-26 that the
   prior "banner-above" layout drifted from the social-media norm. */
.o9k-profile-hdr {
  padding: 0 0 var(--pp-space-four) 0;
  border-bottom: 1px solid #E5DBC8;
  margin-bottom: var(--pp-space-three);
}
.o9k-profile-meta {
  padding: 0 var(--pp-space-three);
}
.o9k-profile-meta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pp-space-three);
  margin-top: -36px; /* avatar overlaps banner bottom edge */
}
.o9k-profile-row {
  /* legacy; retained in case third-party renderers reference it */
  display: flex;
  align-items: center;
  gap: var(--pp-space-three);
}
.o9k-av-big {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: #CFC2A6;
  color: #241E14;
  text-align: center;
  line-height: 74px; /* 80 - 2 * 3 (border) */
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 3px solid #FBF7EE; /* matches html/body bg — punch-through ring */
  box-sizing: border-box;
}
.o9k-profile-ids {
  flex: 1;
  min-width: 0;
}
.o9k-profile-dn {
  color: #241E14;
  font-size: 16px;
  font-weight: 600;
}
.o9k-profile-handle {
  color: #6E6450;
  font-size: 12px;
  margin-top: var(--pp-space-half);
}
.o9k-profile-bio {
  color: #241E14;
  font-size: 13px;
  margin-top: 10px;
  white-space: pre-wrap;
}
.o9k-profile-counts {
  color: #6E6450;
  font-size: 11px;
  margin-top: 10px;
  letter-spacing: 0.5px;
}
.o9k-user-link:hover {
  color: #9A7B2E !important;
}

.o9k-own-bar {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.o9k-edit-wrap {
  margin: 6px 0;
}
.o9k-edit-ta {
  width: 100%;
}
.o9k-history-panel {
  margin-top: var(--pp-space-two);
  padding: var(--pp-space-two);
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 2px;
}
.o9k-rev {
  padding: 6px 0;
  border-top: 1px solid #E5DBC8;
}
.o9k-rev:first-child {
  border-top: none;
}

#o9k-feed { margin-top: 60px; }

/* ---------- §2.1 responsive shell skeleton (structural only; no nav yet) ---------- */

/* Default (mobile-first): single column, full width, rail + context hidden. */
.o9k-shell {
  display: block;
  width: 100%;
  min-height: 100vh;
}
.o9k-shell__rail,
.o9k-shell__context {
  display: none;
}
.o9k-shell__center {
  min-width: 0; /* prevent grid column from overflowing viewport when content is wide */
}

/* Tablet (≥768 <1024): 72px rail + center. */
.bp-tablet .o9k-shell {
  display: grid;
  grid-template-columns: 72px 1fr;
}
.bp-tablet .o9k-shell__rail {
  display: block;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  border-right: 1px solid #E5DBC8;
}

/* Desktop (≥1024): 275px rail + clamped center. Shell centered on wide viewports. */
.bp-desktop .o9k-shell {
  display: grid;
  grid-template-columns: 275px minmax(0, 900px);
  max-width: 1175px;
  margin: 0 auto;
}
.bp-desktop .o9k-shell__rail {
  display: block;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  border-right: 1px solid #E5DBC8;
}

/* Desktop wide (≥1280): add context column per spec §6.3. */
@media (min-width: 1280px) {
  .bp-desktop .o9k-shell {
    grid-template-columns: 275px minmax(0, 900px) 350px;
    max-width: 1525px;
  }
  .bp-desktop .o9k-shell__context {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    border-left: 1px solid #E5DBC8;
  }
}

/* Known limitation (§2.1 → §2.4): .o9k-bar is position:fixed full-viewport-width.
 * On desktop the shell is max-width centered; the top bar visually spans across
 * the rail column. Cosmetic only — §2.4 top-bar rework places the strip inside
 * the center column. Do not "fix" here. */

/* ---------- §2.2 rail + bottom tab + avatar popover ---------- */

.o9k-rail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  padding: 44px 0 12px; /* top offset clears .o9k-bar on tablet/desktop */
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  background: rgba(242,234,219,0.90);
  position: relative;
}
.o9k-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-half);
}
.o9k-rail-sep {
  border: 0;
  border-top: 1px solid #E5DBC8;
  margin: var(--pp-space-two) var(--pp-space-three);
}
.o9k-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 12px);
  margin: 0 6px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: #241E14;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.o9k-rail-item:hover {
  border-color: #E5DBC8;
}
.o9k-rail-item--active {
  background: var(--pp-color-action-primary); /* FIRST pier-plank consumer — slate-500 seed */
  color: var(--pp-color-text-inverse);
  border-color: var(--pp-color-action-primary);
}
.o9k-rail-item[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.o9k-rail-item__glyph {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.o9k-rail-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.o9k-rail-bottom {
  margin-top: auto;
  padding: 12px 6px 6px;
  border-top: 1px solid #E5DBC8;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.o9k-rail-compose {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--pp-color-action-primary, #836726);
  color: #FBF7EE;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.o9k-rail-compose:hover { background: var(--pp-color-action-primary-hover, #9A7B2E); }
.o9k-rail-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid #E5DBC8;
  border-radius: 4px;
  cursor: pointer;
  color: #241E14;
  font: inherit;
  font-size: 12px;
}
.o9k-rail-avatar:hover { border-color: #9A7B2E; }

/* Tablet: icon-only — hide labels. */
.bp-tablet .o9k-rail-item__label,
.bp-tablet .o9k-rail-compose .o9k-rail-item__label,
.bp-tablet .o9k-rail-avatar  .o9k-rail-item__label {
  display: none;
}
.bp-tablet .o9k-rail-item,
.bp-tablet .o9k-rail-compose,
.bp-tablet .o9k-rail-avatar {
  justify-content: center;
  padding: var(--pp-space-two) 0;
  width: calc(100% - 10px);
  margin: 0 5px;
}
.bp-tablet .o9k-rail-sep { margin: 8px 8px; }
.bp-tablet .o9k-rail { padding-top: 52px; } /* tablet top-bar offset */

/* Desktop: rail is wider; reserve room for labels. */
.bp-desktop .o9k-rail {
  padding-top: 52px;
}

/* Avatar popover (rendered as sibling of .o9k-shell by shell()). */
.o9k-avatar-popover {
  position: fixed;
  bottom: 76px;
  left: 8px;
  z-index: 50;
  width: 200px;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 4px;
  padding: var(--pp-space-one);
  box-shadow: 0 8px 32px rgba(60,45,20,0.18);
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-half);
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.bp-mobile  .o9k-avatar-popover { display: none; }  /* no rail on mobile */
.bp-tablet  .o9k-avatar-popover { left: 76px; }
.bp-desktop .o9k-avatar-popover { left: 16px; }
.o9k-avatar-popover__item {
  background: transparent;
  border: 0;
  color: #241E14;
  font: inherit;
  font-size: 12px;
  padding: var(--pp-space-two) var(--pp-space-three);
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
}
.o9k-avatar-popover__item:hover {
  background: #FFFDF8;
}

/* Bottom tab (mobile only). */
.o9k-bottom-tab {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(255,253,248,0.95);
  border-top: 1px solid #E5DBC8;
  z-index: 50;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.bp-mobile .o9k-bottom-tab { display: flex; }
.o9k-bottom-tab__item {
  flex: 1;
  background: transparent;
  border: 0;
  color: #6E6450;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-half);
  padding: 6px 2px;
}
.o9k-bottom-tab__item:hover { color: #241E14; }
.o9k-bottom-tab__glyph {
  font-size: 18px;
  line-height: 1;
}
.o9k-bottom-tab__label {
  font-size: 10px;
  letter-spacing: 1px;
}
.o9k-bottom-tab__item--active {
  color: var(--pp-color-action-primary); /* FIRST pier-plank consumer */
}
.o9k-bottom-tab__item--active .o9k-bottom-tab__label { letter-spacing: 1.5px; }

/* Mobile: pad center to clear the bottom tab. */
.bp-mobile .o9k-wrap { padding-bottom: 72px; }

/* ---------- §2.4 top bar restructure + mobile drawer + 3-dot menu ---------- */

/* Tablet + desktop: top bar lives inside .o9k-shell__center; sticks to
   viewport top as center scrolls, does not span rail + context. This fixes
   the §2.1 known-limitation cosmetic. */
.bp-tablet .o9k-bar,
.bp-desktop .o9k-bar {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  width: auto;
  z-index: 20;
}
/* #o9k-feed's 60px margin-top is a mobile-only compensation for fixed top bar. */
.bp-tablet #o9k-feed,
.bp-desktop #o9k-feed { margin-top: 0; }

.o9k-topbar__left,
.o9k-topbar__center,
.o9k-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--pp-space-two);
}
.o9k-topbar__center {
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.o9k-topbar__avatar {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.o9k-topbar__logo {
  background: transparent;
  border: 0;
  padding: 0;
  color: #9A7B2E;
  font: inherit;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 14px;
  cursor: pointer;
}
.o9k-topbar__title {
  color: #9A7B2E;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 13px;
}
.o9k-dot-wrap { position: relative; }
.o9k-topbar__dot {
  background: transparent;
  border: 1px solid #E5DBC8;
  color: #241E14;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: var(--pp-space-one) var(--pp-space-two);
  cursor: pointer;
  border-radius: 3px;
}
.o9k-topbar__dot:hover { border-color: #9A7B2E; color: #9A7B2E; }
.o9k-dot-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 160px;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(60,45,20,0.18);
  padding: var(--pp-space-one);
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-half);
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.o9k-dot-menu__item {
  background: transparent;
  border: 0;
  color: #241E14;
  font: inherit;
  font-size: 12px;
  padding: var(--pp-space-two) var(--pp-space-three);
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
}
.o9k-dot-menu__item:hover { background: #FFFDF8; }

/* Mobile side drawer — slides in from left. */
.o9k-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: #F2EADB;
  border-right: 1px solid #E5DBC8;
  transform: translateX(-100%);
  transition: transform 200ms cubic-bezier(0.2, 0.0, 0.0, 1.0);
  z-index: 60;
  overflow-y: auto;
  padding: var(--pp-space-four) var(--pp-space-three);
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-one);
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.o9k-drawer--open { transform: translateX(0); }
.o9k-drawer__scrim {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(34,28,18,0.40);
  z-index: 59;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
.o9k-drawer__scrim--open {
  opacity: 1;
  pointer-events: auto;
}
.o9k-drawer__item {
  display: block;
  padding: 12px 10px;
  background: transparent;
  border: 0;
  color: #241E14;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
}
.o9k-drawer__item:hover { background: #FFFDF8; }
.o9k-drawer__item[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.o9k-drawer__item--logout {
  margin-top: auto;
  border-top: 1px solid #E5DBC8;
  padding-top: var(--pp-space-four);
  color: #9A3B2E;
}

/* Tablet + desktop: no drawer/scrim — drawer items live in the rail. */
.bp-tablet .o9k-drawer,
.bp-tablet .o9k-drawer__scrim,
.bp-desktop .o9k-drawer,
.bp-desktop .o9k-drawer__scrim { display: none; }

/* ---------- §2.3 mode switch (segmented control) ---------- */

.o9k-mode-switch {
  position: sticky;
  top: 44px;                        /* stacks beneath the fixed/sticky top bar */
  z-index: 19;                      /* below .o9k-bar (50 mobile / 20 tablet+desktop) */
  display: flex;
  gap: var(--pp-space-half);
  padding: 6px 10px;
  background: rgba(255,253,248,0.95);
  border-bottom: 1px solid #E5DBC8;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.o9k-mode-switch::-webkit-scrollbar { display: none; }
.o9k-mode-switch__item {
  background: transparent;
  border: 1px solid transparent;
  color: #6E6450;
  font: inherit;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
}
.o9k-mode-switch__item:hover {
  color: #241E14;
  border-color: #E5DBC8;
}
.o9k-mode-switch__item--active {
  background: var(--pp-color-action-primary); /* pier-plank consumer #2 */
  color: var(--pp-color-text-inverse);
  border-color: var(--pp-color-action-primary);
}

/* ---------- §2.6 keyboard help surface ---------- */

.o9k-kbd-help {
  width: 100%;
  border-collapse: collapse;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  color: #241E14;
  font-size: 12px;
  margin-top: var(--pp-space-three);
}
.o9k-kbd-help td {
  padding: var(--pp-space-two) var(--pp-space-three);
  border-top: 1px solid #E5DBC8;
  vertical-align: middle;
}
.o9k-kbd-help tbody tr:first-child td { border-top: 0; }
.o9k-kbd-help td:first-child {
  width: 140px;
  white-space: nowrap;
}
.o9k-kbd-help kbd {
  display: inline-block;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  color: #9A7B2E;
  letter-spacing: 1px;
}

/* ---------- §2.6b focused-post outline ---------- */
/* Outline uses the pier-plank focus token (consumer #3 of pp-*). */
.o9k-post--focused {
  outline: 2px solid var(--pp-color-border-focus);
  outline-offset: 2px;
}

/* ---------- §2.9 agent compat banner ---------- */
/* Uses --pp-color-feedback-warning (pier-plank consumer #4). */
.o9k-agent-banner {
  background: var(--pp-color-feedback-warning);
  color: #241E14;
  padding: var(--pp-space-two) var(--pp-space-four);
  display: flex;
  align-items: center;
  gap: var(--pp-space-three);
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  border-bottom: 1px solid #E5DBC8;
}
.o9k-agent-banner__msg { flex: 1; min-width: 0; }
.o9k-agent-banner .o9k-btn {
  background: #F2EADB;
  color: #241E14;
  border-color: #FFFDF8;
}

/* ---------- §2.4c mobile auto-hide transitions + transforms ---------- */
/* Mobile only. Transitions on chrome. When html has class "autohidden"
 * (set/unset by the velocity-based scroll listener), chrome slides off
 * viewport and mode switch rises to top:0. Tablet/desktop unaffected. */
/* §3feea26 — autohide on every breakpoint, not mobile-only. */
.o9k-bar,
.o9k-bottom-tab,
.o9k-profile-tabs,
.o9k-compose-fab,
.o9k-rail-compose {
  transition: transform 200ms cubic-bezier(0.3, 0.0, 0.0, 1.0),
              opacity   200ms ease;
}
.o9k-mode-switch {
  transition: top 200ms cubic-bezier(0.3, 0.0, 0.0, 1.0);
}
html.autohidden .o9k-bar           { transform: translateY(-100%); }
html.autohidden .o9k-profile-tabs  { transform: translateY(-100%); }
.bp-mobile.autohidden .o9k-bottom-tab,
html.autohidden.bp-mobile .o9k-bottom-tab { transform: translateY(100%); }
html.autohidden .o9k-compose-fab   { transform: translateY(120%); opacity: 0; pointer-events: none; }
html.autohidden .o9k-rail-compose  { opacity: 0; pointer-events: none; }
html.autohidden.bp-mobile .o9k-mode-switch { top: 0; }

/* ---------- §2.7 / S11e DM list + thread styling ---------- */

.o9k-chat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--pp-space-three);
}
.o9k-chat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 4px;
  color: #241E14;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.o9k-chat-item:hover { border-color: #9A7B2E; }
.o9k-chat-item__handle { color: #241E14; }
.o9k-chat-item__ts { color: #6E6450; font-size: 11px; }

.o9k-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  min-height: 40vh;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.o9k-chat-msg {
  display: inline-flex;
  flex-direction: column;
  max-width: 80%;
  padding: var(--pp-space-two) var(--pp-space-three);
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 8px;
  align-self: flex-start; /* theirs, on the left */
}
.o9k-chat-msg--mine {
  align-self: flex-end; /* right side */
  background: #F2EADB;
  border-color: #E5DBC8;
}
.o9k-chat-msg--donkey {
  border-color: var(--pp-color-border-focus); /* pier-plank consumer — donkey badge */
  background: #F2EADB;
}
.o9k-chat-msg__body {
  color: #241E14;
  font-size: 13px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.o9k-chat-msg__ts {
  color: #6E6450;
  font-size: 10px;
  margin-top: var(--pp-space-one);
  align-self: flex-end;
}

.o9k-chat-compose {
  display: flex;
  gap: var(--pp-space-two);
  padding: 10px 0;
  position: sticky;
  bottom: 0;
  background: #FBF7EE;
  border-top: 1px solid #E5DBC8;
}
.o9k-chat-compose .o9k-ta { flex: 1; }
.o9k-chat-compose .o9k-btn {
  background: var(--pp-color-action-primary, #836726);
  color: #FBF7EE;
  font-weight: 700;
  border: 0;
  padding: 0 var(--pp-space-four);
  cursor: pointer;
  border-radius: 3px;
}
.o9k-chat-compose .o9k-btn:hover { background: var(--pp-color-action-primary-hover, #9A7B2E); }
.o9k-chat-compose .o9k-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- S14 Notifications view + rail/bottom-tab unread badges ---------- */

.o9k-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--pp-space-three);
  margin-bottom: var(--pp-space-two);
  gap: var(--pp-space-three);
}
.o9k-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-one);
}
.o9k-notif-list li { list-style: none; }
.o9k-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 4px;
  color: #241E14;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
}
.o9k-notif-row:hover { border-color: #9A7B2E; }
.o9k-notif-row--unread { background: #F2EADB; border-color: #E5DBC8; }
.o9k-notif-row--read  { opacity: 0.7; }
.o9k-notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  background: var(--pp-color-action-primary); /* S14 pier-plank consumer #5 */
}
.o9k-notif-row--read .o9k-notif-unread-dot { background: transparent; }
.o9k-notif-body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-half);
  min-width: 0;
  flex: 1;
}
.o9k-notif-phrase { color: #241E14; }
.o9k-notif-snippet {
  color: #6E6450;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o9k-notif-ts { color: #6E6450; font-size: 11px; }

/* Rail + bottom-tab unread badges. */
.o9k-rail-item__badge {
  margin-left: auto;
  background: var(--pp-color-action-primary);
  color: var(--pp-color-text-inverse);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9999px;
  min-width: 16px;
  text-align: center;
  font-weight: 700;
}
.o9k-rail-item--active .o9k-rail-item__badge {
  background: var(--pp-color-text-inverse);
  color: var(--pp-color-action-primary);
}
.bp-tablet .o9k-rail-item__badge {
  /* Tablet is icon-only; badge floats top-right of the glyph. */
  margin-left: 0;
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  padding: 0 var(--pp-space-one);
  min-width: 14px;
}
.bp-tablet .o9k-rail-item { position: relative; }

.o9k-bottom-tab__badge {
  position: absolute;
  top: 4px;
  right: 24%;
  background: var(--pp-color-action-primary);
  color: var(--pp-color-text-inverse);
  font-size: 9px;
  padding: 0 var(--pp-space-one);
  border-radius: 9999px;
  min-width: 14px;
  text-align: center;
  font-weight: 700;
  line-height: 14px;
}
.o9k-bottom-tab__item { position: relative; }

/* ==== Auth flows v25 (signup + forgot-password + reset-password) ==== */
.o9k-login-links {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: #6E6450;
}
.o9k-login-links a,
.o9k-login-links .o9k-linkbtn {
  color: #9A7B2E;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.o9k-login-links a:hover,
.o9k-login-links .o9k-linkbtn:hover { text-decoration: underline; }
.o9k-login-links .o9k-sep { opacity: 0.5; margin: 0 4px; }
.o9k-check {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-two);
  font-size: 12px;
  color: #6E6450;
  margin: var(--pp-space-one) 0;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.o9k-check input[type="checkbox"] {
  margin: var(--pp-space-half) 0 0 0;
  accent-color: #9A7B2E;
  flex-shrink: 0;
}
.o9k-ok {
  color: #9A7B2E;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  padding: var(--pp-space-two) var(--pp-space-three);
  font-size: 12px;
  margin-top: 6px;
}

/* ==== Attachments v29 (images + videos on posts) ==== */
.o9k-attach {
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-two);
  max-width: 100%;
}
.o9k-attach-image,
.o9k-attach-video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 4px;
  background: #F2EADB;
  display: block;
}
.o9k-attach-video {
  width: 100%;
  outline: 1px solid #E5DBC8;
}
.o9k-attach-image[src=""],
.o9k-attach-video[src=""],
.o9k-attach-image:not([src]),
.o9k-attach-video:not([src]) {
  min-height: 120px;
  background: repeating-linear-gradient(135deg, #F2EADB 0 10px, #EFE7D6 10px 20px);
}
.o9k-attach-file {
  padding: 8px 10px;
  border-left: 2px solid #E5DBC8;
  font-size: 12px;
}

/* ==== Settings view v30 (port of React SettingsScreen) ==== */
.o9k-settings {
  max-width: 680px;
  margin: 0 auto;
  padding: 14px 16px 60px;
}
.o9k-settings .o9k-h {
  font-size: 16px;
  margin-bottom: var(--pp-space-three);
}
.o9k-set-section {
  margin-bottom: 18px;
}
.o9k-set-title {
  font-size: 10px;
  color: #6E6450;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.o9k-set-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pp-space-two) 0;
  border-bottom: 1px solid rgba(154,123,46,0.12);
  gap: var(--pp-space-three);
}
.o9k-set-row:last-child { border-bottom: 0; }
.o9k-set-label {
  font-size: 12px;
  color: #6E6450;
  flex: 1;
}
.o9k-set-toggle {
  border: 1px solid #E5DBC8;
  background: transparent;
  color: #6E6450;
  font-family: inherit;
  font-size: 10px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
  min-width: 40px;
}
.o9k-set-toggle--on {
  background: var(--pp-color-action-primary, #836726);
  color: #FBF7EE;
  border-color: var(--pp-color-action-primary, #836726);
}
.o9k-set-select {
  background: #F2EADB;
  color: #6E6450;
  border: 1px solid #E5DBC8;
  font-family: inherit;
  font-size: 12px;
  padding: var(--pp-space-one) var(--pp-space-two);
  border-radius: 2px;
}
.o9k-btn--danger {
  color: #9A3B2E;
  border-color: #6E2A2A;
}
.o9k-set-totp-setup {
  padding: var(--pp-space-two) 0;
}
.o9k-set-totp-secret {
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  color: #9A7B2E;
  word-break: break-all;
  padding: 8px 10px;
  background: #FBF7EE;
  border: 1px solid #E5DBC8;
  border-radius: 2px;
  margin: 6px 0;
  user-select: all;
}
.o9k-set-totp-confirm {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.o9k-set-totp-confirm input {
  flex: 1;
  background: #F2EADB;
  color: #6E6450;
  border: 1px solid #E5DBC8;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 4px;
  border-radius: 2px;
}

/* B4 banner + clickable social counts (2026-04-24)
   Updated 2026-04-26 — banner-as-background per web spec §15. */
.o9k-profile-banner-wrap {
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: #F2EADB;
  margin-bottom: 0; /* meta-row pulls up via negative margin-top */
  border-radius: 6px 6px 0 0; /* only top corners; bottom is the avatar overlap */
}
.o9k-profile-banner-empty {
  /* same shape, no img — keeps the slot reserved so avatar overlap
     never causes layout jump when banner loads. */
}
.o9k-profile-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.o9k-profile-ids {
  margin-top: var(--pp-space-two);
}
.o9k-profile-bio {
  padding: 0; /* moved into meta wrapper, no extra horiz padding */
}
.o9k-profile-counts {
  padding: 0;
}
.o9k-profile-count-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #9A7B2E;
  cursor: pointer;
}
.o9k-profile-count-link:hover {
  color: #9A7B2E;
  border-bottom-style: solid;
}
.o9k-rel-list {
  list-style: none;
  padding: 0;
  margin: var(--pp-space-four) 0;
}
.o9k-rel-list li {
  border-bottom: 1px solid #E5DBC8;
}
.o9k-rel-row {
  display: flex;
  gap: var(--pp-space-three);
  padding: 10px 4px;
  color: #3A3328;
  text-decoration: none;
  align-items: baseline;
}
.o9k-rel-row:hover {
  background: #F2EADB;
}
.o9k-rel-handle {
  color: #9A7B2E;
  font-weight: 600;
}
.o9k-rel-dn {
  color: #6E6450;
  font-size: 12px;
}

/* TOS re-accept modal (on top of any view) */
.o9k-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(255,253,248,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--pp-space-four);
}
.o9k-modal-box {
  background: #F2EADB;
  color: #241E14;
  border: 1px solid #CFC2A6;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(60,45,20,0.18);
}
.o9k-modal-h {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}
.o9k-modal-p {
  margin: 6px 0 10px;
  line-height: 1.45;
  color: #3A3328;
}
.o9k-modal-p a { color: #C2A24E; }
.o9k-modal-list {
  margin: 6px 0 14px 20px;
  color: #3A3328;
  line-height: 1.55;
}
.o9k-modal-err {
  min-height: 1.2em;
  color: #B5544A;
  font-size: 13px;
  margin: var(--pp-space-one) 0 var(--pp-space-two);
}
.o9k-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}
.o9k-btn-primary,
.o9k-btn-secondary {
  font: inherit;
  cursor: pointer;
  padding: var(--pp-space-two) var(--pp-space-four);
  border-radius: 6px;
  border: 1px solid #CFC2A6;
  background: transparent;
  color: #241E14;
}
.o9k-btn-primary {
  background: var(--pp-color-action-primary, #7A6128);
  border-color: var(--pp-color-action-primary, #7A6128);
  color: #241E14;
}
.o9k-btn-primary:disabled { opacity: 0.6; cursor: default; }
.o9k-btn-secondary:hover { background: #EFE7D6; }

/* Mobile compose FAB — the only way to reach /compose on mobile since the
   rail (where Compose lives on tablet+desktop) is display:none at that bp.
   Also rendered on tablet/desktop but hidden by bp rules below. */
.o9k-compose-fab {
  position: fixed;
  right: 16px;
  bottom: 76px;             /* above 56px bottom tab + 20 gap */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pp-color-action-primary, #9A7B2E);
  color: #FBF7EE;
  border: 0;
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(60,45,20,0.18);
  cursor: pointer;
  z-index: 55;              /* above feed, below drawer (60) */
  display: none;            /* hidden by default; .bp-mobile shows */
}
.o9k-compose-fab:hover { filter: brightness(1.08); }
.o9k-compose-fab:active { transform: translateY(1px); }
.bp-mobile .o9k-compose-fab { display: block; }

/* L-D (v1.3): Profile Images settings section. */
.o9k-settings-profile-images {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-half);
}
.o9k-set-fileinput {
  color: #241E14;
  font: inherit;
  font-size: 12px;
  max-width: 200px;
}
.o9k-set-fileinput::file-selector-button {
  background: transparent;
  border: 1px solid #E5DBC8;
  color: #9A7B2E;
  padding: 4px 10px;
  border-radius: 3px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  margin-right: var(--pp-space-two);
}
.o9k-set-fileinput::file-selector-button:hover {
  background: #FFFDF8;
}
.o9k-progress {
  height: 6px;
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 3px;
  overflow: hidden;
  margin: var(--pp-space-one) var(--pp-space-four);
}
.o9k-progress__bar {
  height: 100%;
  background: var(--pp-color-action-primary, #9A7B2E);
  transition: width 200ms;
}

/* Groups — v1.3 BC-CSS */
.o9k-groups { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.o9k-groups-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.o9k-group-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: #F2EADB;
  border: 1px solid #E5DBC8; border-radius: 4px;
  color: #241E14; text-decoration: none; cursor: pointer;
}
.o9k-group-card:hover { background: #EFE7D6; }
.o9k-group-card__icon-wrap {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
}
.o9k-group-card__icon {
  width: 40px; height: 40px; border-radius: 4px; object-fit: cover;
  background: #FFFDF8;
}
.o9k-group-card__icon--fallback {
  display: flex; align-items: center; justify-content: center;
  color: #9A7B2E; font-weight: 700; background: #FFFDF8;
}
.o9k-group-card__body { flex: 1 1 auto; min-width: 0; }
.o9k-group-card__name { font-weight: 600; color: #241E14; }
.o9k-group-card__badge {
  display: inline-block; margin-left: 4px;
  padding: 1px 6px; border-radius: 3px;
  background: #CFC2A6; color: #6E6450; font-size: 10px;
  text-transform: uppercase;
}
.o9k-group-card__meta { color: #6E6450; font-size: 12px; }
.o9k-group-card__action { flex: 0 0 auto; }
.o9k-group-card__member { color: #9A7B2E; font-size: 12px; padding: 4px 8px; }
.o9k-group-header {
  padding: var(--pp-space-three) 0 var(--pp-space-four); border-bottom: 1px solid #E5DBC8; margin-bottom: 12px;
}
/* o9k-image-crop-ui-spec-v1 amendment 3 §1 (Spec-Ref fd4b439):
 * meta wrapper hosts the icon-row + body as siblings (mirrors profile
 * meta-row + ids pattern). row pulls UP into banner for icon overlap. */
.o9k-group-header__meta {
  padding: 0 var(--pp-space-three);
}
.o9k-group-header__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pp-space-three);
  margin-top: -36px;
}
.o9k-group-header__icon {
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px;
  object-fit: cover; background: #FFFDF8;
  border: 3px solid #FBF7EE;  /* punch-through ring; matches html/body bg */
  box-sizing: border-box;
}
.o9k-group-header__icon--fallback {
  display: flex; align-items: center; justify-content: center;
  color: #9A7B2E; font-weight: 700; font-size: 24px;
}
.o9k-group-header__body {
  margin-top: var(--pp-space-two);
  min-width: 0;
}
.o9k-group-header__desc { color: #241E14; margin-top: 4px; font-size: 13px; }
.o9k-group-header__action { flex: 0 0 auto; }
.o9k-group-pending-banner {
  background: #EFE7D6; border: 1px solid #E5DBC8; color: #241E14;
  padding: 10px 12px; border-radius: 4px; margin: 8px 0;
  font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.o9k-group-pin { margin-top: 8px; font-size: 12px; }
.o9k-group-pin-strip {
  display: flex; gap: 8px; margin: 12px 0;
  overflow-x: auto; padding-bottom: 4px;
}
.o9k-group-pin-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--pp-space-one); padding: 8px; min-width: 72px;
  background: #F2EADB; border: 1px solid #E5DBC8; border-radius: 4px;
  color: #241E14; text-decoration: none; font-size: 11px;
}
.o9k-group-pin-card__icon {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background: #FFFDF8;
}
.o9k-group-pin-card__icon--fallback {
  display: flex; align-items: center; justify-content: center;
  color: #9A7B2E; font-weight: 700;
}
.o9k-group-pin-card__name {
  max-width: 64px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.o9k-private-stub { color: #6E6450; cursor: default; }
.o9k-private-stub .o9k-lock { font-size: 18px; }
.o9k-gc-policy {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--pp-space-two) 0; color: #241E14; font-size: 13px;
}
.o9k-gc-policy label { display: flex; align-items: center; gap: 6px; }

/* ============================================================
 * Batch 6 — group settings + banner CSS additions.
 * BC-SET.4/.6/.7 list rows, BC-SET header, BC-SET inputs,
 * BC-DEC.2 banner block, BC-INV.1 primary button variant.
 * ========================================================= */
.o9k-set-header {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EFE7D6;
}
.o9k-set-header .o9k-h { margin: 0; }

.o9k-set-list {
  list-style: none;
  margin: 0; padding: 0;
}
.o9k-set-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-two);
  padding: var(--pp-space-two) 0;
  border-bottom: 1px solid #EFE7D6;
  font-size: 14px;
  color: #241E14;
}
.o9k-set-list-row:last-child { border-bottom: 0; }

.o9k-input {
  flex: 1;
  background: #F2EADB;
  color: #241E14;
  border: 1px solid #E5DBC8;
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  min-width: 0;
}
.o9k-input:focus {
  outline: 2px solid var(--pp-color-action-primary, #9A7B2E);
  outline-offset: 1px;
}

.o9k-label {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-one);
  font-size: 13px;
  color: #6E6450;
  margin-bottom: var(--pp-space-two);
}
.o9k-label > input[type="file"] {
  color: #241E14;
  font: inherit;
}

.o9k-btn--primary {
  background: var(--pp-color-action-primary, #9A7B2E);
  color: #FBF7EE;
  border-color: var(--pp-color-action-primary, #9A7B2E);
}
.o9k-btn--primary:hover {
  filter: brightness(1.1);
}

/* o9k-image-crop-ui-spec-v1 amendment 3 §1 (Spec-Ref fd4b439):
 * banner is now a 3:1 strip; icon overlaps its bottom edge via
 * negative margin-top on .o9k-group-header__row (mirrors profile §15). */
.o9k-group-header__banner {
  width: 100%;
  aspect-ratio: 3 / 1;
  background: #F2EADB center / cover no-repeat;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
  overflow: hidden;
}
.o9k-group-header__banner--empty {
  /* same shape, no bg image — keeps icon overlap stable while
   * decrypting (or when no banner uploaded). */
}

/* ============================================================
 * AI2: activity bar (2px top-of-viewport status line).
 * Spec colors: idle #4E7A52, busy #C2A24E, disconnect #9A3B2E.
 * z=9999 sits above all floating UI (including drawer scrim).
 * ========================================================= */
#o9k-status-line {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  background: #4E7A52;
  transition: background-color .3s ease;
  pointer-events: none;
}
#o9k-status-line[data-state="fetching"]    { background: #C2A24E; }
#o9k-status-line[data-state="processing"]  { background: #C2A24E; animation: o9k-status-pulse 1.2s ease-in-out infinite; }
#o9k-status-line[data-state="disconnected"] { background: #9A3B2E; }
@keyframes o9k-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ============================================================
 * Chat Phase 1 (W-C1..W-C7) — see chat-ux-spec-v3.
 * Tokens follow §0 visual design language.
 * Reduced motion respected via prefers-reduced-motion at end.
 * ========================================================= */

/* §0.1 palette tokens (bubbles + chat surfaces) */
:root {
  --chat-bubble-mine:          #E5DBC8;
  --chat-bubble-other:         #F2EADB;
  --chat-bubble-mine-pending:  rgba(229,219,200,0.80);
  --chat-bubble-mine-failed-bg: #5A2424;
  --chat-bubble-mine-failed-border: #9A3B2E;
  --chat-pill-bg:              var(--pp-color-action-primary, #9A7B2E);
  --chat-status-sending:       #6E6450;
}

/* §0.2 motion tokens */
:root {
  --motion-snap:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-glide:       cubic-bezier(0.4, 0, 0.2, 1);
  --motion-snap-dur:        180ms;
  --motion-spring-soft-dur: 280ms;
  --motion-glide-dur:       220ms;
}

/* Wrap that contains the scrollable messages + the floating pill. */
.o9k-chat-thread-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Compose box is below; messages take all remaining vertical space.
     Container uses height: calc to fit between top bar + compose. */
  height: calc(100vh - 56px /*top bar*/ - 80px /*compose*/);
  min-height: 200px;
}

/* Stable scroll container. Mutating .innerHTML inside this preserves scrollTop. */
.o9k-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: var(--pp-space-three) var(--pp-space-three) var(--pp-space-three) var(--pp-space-three);
  /* Smooth scrolling on programmatic .scrollTop = scrollHeight */
  scroll-behavior: smooth;
}

/* Bubble base — overrides any prior loose .o9k-chat-msg if present. */
.o9k-chat-msg {
  display: inline-block;
  max-width: 70%;
  min-width: 40px;
  padding: 10px 14px;
  margin: var(--pp-space-one) 0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  background: var(--chat-bubble-other);
  color: #241E14;
  position: relative;
  /* W-C5 entry animation — subtle slide-in. */
  animation: o9k-chat-bubble-in var(--motion-spring-soft-dur) var(--motion-spring-soft) both;
}

@keyframes o9k-chat-bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.o9k-chat-msg--mine {
  background: var(--chat-bubble-mine);
  margin-left: auto;
  display: block;
  text-align: left;
  /* tail-side squared on bottom-right (mine = right side) */
  border-bottom-right-radius: 4px;
}

.o9k-chat-msg--mine.o9k-chat-msg--pending {
  background: var(--chat-bubble-mine-pending);
}

.o9k-chat-msg--mine.o9k-chat-msg--failed {
  background: var(--chat-bubble-mine-failed-bg);
  border: 1px solid var(--chat-bubble-mine-failed-border);
  padding: 9px 13px; /* compensate for border */
}

.o9k-chat-msg--donkey {
  border-left: 2px solid var(--pp-color-action-primary, #9A7B2E);
}

.o9k-chat-msg__body {
  display: block;
  white-space: pre-wrap;
}

.o9k-chat-msg__ts {
  display: inline-block;
  font-size: 10px;
  color: #6E6450;
  margin-top: var(--pp-space-one);
}

.o9k-chat-msg__status {
  display: inline-block;
  margin-left: var(--pp-space-two);
  font-size: 11px;
  color: var(--chat-status-sending);
  letter-spacing: 2px;
  /* Breathing 3 dots — bounded animation, runs only while .--pending bubble exists. */
  animation: o9k-chat-spinner 1.0s ease-in-out infinite;
}

@keyframes o9k-chat-spinner {
  0%, 100% { opacity: 1.0; }
  50%      { opacity: 0.4; }
}

.o9k-chat-msg__retry {
  display: inline-block;
  margin-left: var(--pp-space-two);
  background: transparent;
  border: 1px solid var(--chat-bubble-mine-failed-border);
  color: #241E14;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.o9k-chat-msg__retry:hover {
  background: rgba(154,59,46,0.15);
}

/* W-C3 new-message pill */
.o9k-chat-pill {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--chat-pill-bg);
  color: #FBF7EE;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(34,28,18,0.32);
  z-index: 10;
  /* Entry animation: slide up + fade. */
  animation: o9k-chat-pill-in var(--motion-snap-dur) var(--motion-snap) both;
}
.o9k-chat-pill:hover { filter: brightness(1.05); }
@keyframes o9k-chat-pill-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Compose box — flex row with auto-grow textarea */
.o9k-chat-compose {
  display: flex;
  gap: var(--pp-space-two);
  padding: 10px 12px;
  border-top: 1px solid #EFE7D6;
  align-items: flex-end;
}

.o9k-chat-ta {
  flex: 1;
  resize: none;          /* W-C7 controls height via JS */
  overflow-y: auto;
  min-height: 36px;
  max-height: 144px;     /* 6 lines * ~24px line-height; matches MAX_TEXTAREA_LINES */
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: #F2EADB;
  color: #241E14;
  border: 1px solid #E5DBC8;
  border-radius: 6px;
  /* Smooth height transition (motion-snap) */
  transition: height var(--motion-snap-dur) var(--motion-snap);
}
.o9k-chat-ta:focus {
  outline: 2px solid var(--pp-color-action-primary, #9A7B2E);
  outline-offset: 1px;
}

#o9k-chat-send {
  align-self: flex-end;
  flex-shrink: 0;
}

/* Reduced motion: collapse all animations + transitions in chat to instant. */
@media (prefers-reduced-motion: reduce) {
  .o9k-chat-msg,
  .o9k-chat-pill,
  .o9k-chat-msg__status,
  .o9k-chat-ta {
    animation: none !important;
    transition: none !important;
  }
}

/* Phase 2 (W-C8 + W-C9) — date and unread dividers. */
.o9k-chat-divider-day {
  display: flex;
  align-items: center;
  margin: var(--pp-space-four) 0 var(--pp-space-two);
  font-size: 11px;
  color: #6E6450;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  /* Two horizontal lines flanking the label */
  gap: var(--pp-space-three);
}
.o9k-chat-divider-day::before,
.o9k-chat-divider-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(110,100,80,0.22);
}

.o9k-chat-divider-unread {
  display: flex;
  align-items: center;
  margin: var(--pp-space-three) 0;
  font-size: 11px;
  color: var(--pp-color-action-primary, #9A7B2E);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  gap: var(--pp-space-three);
}
.o9k-chat-divider-unread::before,
.o9k-chat-divider-unread::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pp-color-action-primary, #9A7B2E);
  opacity: 0.4;
}

/* ====================================================================
 * Chat Phase 3 (W-D1..W-D7) — delete + leave + tombstones
 * ==================================================================== */

/* W-D1: chat list row wrap with hover-revealed 3-dot. */
.o9k-chat-item-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.o9k-chat-item-wrap > .o9k-chat-item {
  flex: 1;
}
.o9k-chat-item__more {
  background: transparent;
  border: 0;
  color: #6E6450;
  cursor: pointer;
  font-size: 18px;
  width: 36px;
  padding: 0 6px;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity var(--motion-snap-dur, 180ms) var(--motion-snap, ease),
              color var(--motion-snap-dur, 180ms) var(--motion-snap, ease);
}
.o9k-chat-item-wrap:hover .o9k-chat-item__more { opacity: 1; }
.o9k-chat-item__more:hover { color: #241E14; }

/* W-D6: thread top bar with overflow trigger. */
.o9k-chat-thread-bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--pp-space-one) var(--pp-space-one) 0 0;
  min-height: 28px;
}
.o9k-chat-thread-bar__more {
  background: transparent;
  border: 0;
  color: #6E6450;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 6px;
  transition: color var(--motion-snap-dur, 180ms) var(--motion-snap, ease);
}
.o9k-chat-thread-bar__more:hover { color: #241E14; }

/* W-D3: per-bubble 3-dot (revealed on hover, mine only). */
.o9k-chat-msg { position: relative; }
.o9k-chat-msg__more {
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: 0;
  color: rgba(36,30,20,0.55);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity var(--motion-snap-dur, 180ms) var(--motion-snap, ease);
}
.o9k-chat-msg:hover .o9k-chat-msg__more,
.o9k-chat-msg:focus-within .o9k-chat-msg__more {
  opacity: 1;
}
.o9k-chat-msg__more:hover { color: #241E14; background: rgba(34,28,18,0.16); }

/* W-D5: tombstone styling. Same width footprint, italic dim. */
.o9k-chat-msg--deleted .o9k-chat-msg__body--deleted {
  font-style: italic;
  color: #6E6450;
}
.o9k-chat-msg--deleted {
  /* Subtle border so the tombstone reads as a slot, not absent content. */
  border: 1px dashed rgba(110,100,80,0.30) !important;
  background: transparent !important;
}

/* Popover used by W-D1/W-D3/W-D6. */
.o9k-chat-popover {
  position: absolute;
  z-index: 1000;
  min-width: 200px;
  background: #EFE7D6;
  border: 1px solid #CFC2A6;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(34,28,18,0.40);
  padding: var(--pp-space-one) 0;
  animation: o9k-chat-popover-in var(--motion-snap-dur, 180ms) var(--motion-snap, ease);
}
@keyframes o9k-chat-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.o9k-chat-popover__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #241E14;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 14px;
}
.o9k-chat-popover__item:hover {
  background: #E5DBC8;
  color: #241E14;
}

@media (prefers-reduced-motion: reduce) {
  .o9k-chat-popover { animation: none; }
}

/* S* (2026-04-26) inline reply reveal — see app.js renderInlineReplies. */
.o9k-replies-toggle {
  cursor: pointer;
  user-select: none;
  color: inherit;
  border-bottom: 1px dotted #9A7B2E;
  padding: 0 var(--pp-space-half);
}
.o9k-replies-toggle:hover { color: #9A7B2E; border-bottom-style: solid; }
.o9k-replies-toggle--open { color: #9A7B2E; }
.o9k-post-replies {
  margin-top: var(--pp-space-three);
  padding-top: var(--pp-space-three);
  border-top: 1px solid #E5DBC8;
  /* PP-UI-INLINE-REPLY (spec 7b113e3) — literal slide-from-under via
     overflow-clip + max-height auto-animation. Top edge stays anchored
     against the parent post's bottom edge while bottom edge expands
     downward, so replies appear to emerge from beneath the post. */
  overflow: hidden;
  animation: slideRepliesOpen var(--pp-motion-slide-reply, 180ms cubic-bezier(0.2, 0, 0, 1)) both;
}
@keyframes slideRepliesOpen {
  from { max-height: 0; opacity: 0.5; }
  to   { max-height: 4000px; opacity: 1; }
}
/* PP-UI-INLINE-REPLY (spec 7b113e3) §16.2 — depth signal replaces the
   2px-left-border affordance; the cascade of darker reply backgrounds
   does the affordance work now. */
.o9k-post--expanded {
  /* intentionally empty — superseded by depth-bg cascade */
}
/* PP-UI-INLINE-REPLY accessibility — collapse motion to 0 when
   the user has Reduce Motion set; final layout state is correct. */
@media (prefers-reduced-motion: reduce) {
  .o9k-post-replies {
    animation: none;
  }
}
/* PP-UI-INLINE-REPLY (spec 7b113e3) §Z-AXIS-DEPTH — progressive bg
   darkening per nesting level. TD.W emits data-depth=0..3; depth=0
   is the first reply-level (level-1 in PP-UI-INLINE-REPLY). depth=2
   and depth=3 collapse to level-3 per OQ-DEPTH-CAP. */
.o9k-comment[data-depth="0"] {
  background: var(--pp-color-surface-l1, #F2EADB);
}
.o9k-comment[data-depth="1"] {
  background: var(--pp-color-surface-l2, #FBF7EE);
}
.o9k-comment[data-depth="2"],
.o9k-comment[data-depth="3"] {
  background: var(--pp-color-surface-l3, #FBF7EE);
}

/* ── DM v1.0 §6 + §5 — Message button + new-thread compose ── */
.o9k-btn-msg { margin-right: 6px; }
.o9k-dm-compose {
  border: 1px solid var(--pp-color-border-subtle, #E5DBC8);
  border-radius: 6px;
  padding: var(--pp-space-three);
  margin-bottom: var(--pp-space-three);
  background: var(--pp-color-surface-elevated, #F2EADB);
}
.o9k-dm-compose-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.o9k-dm-to-label { color: #6E6450; font-size: 13px; }
.o9k-dm-recipient-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--pp-space-half) var(--pp-space-two);
  background: var(--pp-color-action-primary-seed, #E5DBC8);
  border-radius: 12px;
  font-size: 13px;
  color: #241E14;
}
.o9k-dm-chip-x { color: #241E14; cursor: pointer; padding-left: 4px; }
.o9k-dm-compose-ta {
  width: 100%; min-height: 60px; resize: vertical;
  background: var(--pp-color-surface-base, #F2EADB);
  color: inherit; border: 1px solid #E5DBC8; border-radius: 4px;
  padding: var(--pp-space-two); font-family: inherit; font-size: 14px;
}
.o9k-dm-compose-actions { display: flex; gap: 8px; margin-top: 8px; }
.o9k-btn-flat { background: transparent; border: 1px solid #E5DBC8; }

/* §profile-tabs ce8e2a5 — horizontal tab bar on profile pages. */
.o9k-profile-tabs {
  display: flex;
  /* §4f3fc71 — horizontal scroll; never wrap onto a second line. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--pp-space-one);
  border-bottom: 1px solid var(--pp-color-border, #E5DBC8);
  margin: var(--pp-space-three) 0 var(--pp-space-two) 0; padding: 0 4px;
}
.o9k-profile-tabs::-webkit-scrollbar { display: none; }
.o9k-profile-tab { flex: 0 0 auto; white-space: nowrap; }
.o9k-profile-tab {
  padding: 8px 14px;
  color: var(--pp-color-text-secondary, #6E6450);
  text-decoration: none; font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
}
.o9k-profile-tab:hover { color: var(--pp-color-text-primary, #6E6450); }
.o9k-profile-tab-active {
  color: var(--pp-color-action-primary, #C2A24E);
  border-bottom-color: var(--pp-color-action-primary, #C2A24E);
}
.o9k-reply-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pp-color-border, #E5DBC8);
  cursor: pointer;
}
.o9k-reply-row:hover { background: rgba(36,30,20,0.02); }
.o9k-reply-context { font-size: 12px; color: var(--pp-color-text-secondary, #6E6450); margin-bottom: 4px; }
.o9k-reply-body { font-size: 14px; color: var(--pp-color-text-primary, #6E6450); white-space: pre-wrap; word-wrap: break-word; }

/* 8899c4d 4 -- pinned-posts strip on profile. */
.o9k-pinned-posts-strip { background: rgba(36,30,20,0.03); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.o9k-pinned-posts-strip__title { font-size: 0.9rem; opacity: 0.7; margin: 0 0 8px 0; font-weight: 600; }
.o9k-pinned-post-card { position: relative; padding-top: 4px; }
.o9k-pinned-post-card + .o9k-pinned-post-card { margin-top: 8px; border-top: 1px solid rgba(36,30,20,0.06); padding-top: 8px; }
.o9k-pin-badge { display: inline-block; font-size: 0.75rem; opacity: 0.75; margin-bottom: 4px; color: var(--pp-color-action-primary, #9A7B2E); }

/* 3cc6735 3.2 -- inline share-to-group picker. */
.o9k-share-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; background: rgba(36,30,20,0.04); border-radius: 4px; margin-top: 4px; }
.o9k-share-pick-sel { padding: 4px 6px; min-width: 200px; max-width: 100%; }
.o9k-btn-secondary { opacity: 0.75; }

/* 8899c4d 4 -- inline pin-slot dropdown picker. */
.o9k-pin-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; background: rgba(36,30,20,0.04); border-radius: 4px; margin-top: 4px; }
.o9k-pin-picker label { font-size: 0.85rem; opacity: 0.85; }
.o9k-pin-pos-sel { padding: 4px 6px; min-width: 60px; }

/* Relationship list (followers/following) -- pier-plank styling. */
.o9k-rel-list { list-style: none; padding: 0; margin: 0; }
.o9k-rel-li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid rgba(36,30,20,0.06); }
.o9k-rel-li:last-child { border-bottom: none; }
.o9k-rel-row { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.o9k-rel-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; background: rgba(36,30,20,0.07); font-weight: 600; }
.o9k-rel-avatar img, img.o9k-rel-avatar { width: 40px; height: 40px; object-fit: cover; }
.o9k-rel-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.o9k-rel-handle { font-weight: 600; }
.o9k-rel-dn { opacity: 0.75; font-size: 0.85rem; }
.o9k-rel-mutual { font-size: 0.7rem; opacity: 0.7; margin-top: 2px; }
.o9k-rel-toggle { flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; }
.o9k-rel-toggle--active { background: var(--pp-color-action-primary, #9A7B2E); color: var(--pp-color-bg, #241E14); border-color: var(--pp-color-action-primary, #9A7B2E); }

/* e7f74d4 sec 5.1 -- MOTD modal. */
.o9k-motd-scrim { position: fixed; inset: 0; background: rgba(34,28,18,0.45); z-index: 9000; cursor: pointer; }
.o9k-motd-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9001; max-width: 480px; width: calc(100% - 32px); padding: 20px 24px; background: var(--pp-color-surface, #FFFDF8); color: var(--pp-color-text, #241E14); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.o9k-motd-body { font-size: 1rem; line-height: 1.5; margin-bottom: 16px; white-space: pre-wrap; }
.o9k-motd-dismiss { display: inline-block; background: var(--pp-color-action-primary, #9A7B2E); color: var(--pp-color-bg, #241E14); border-color: var(--pp-color-action-primary, #9A7B2E); padding: 6px 18px; border-radius: 999px; }

/* 2026-04-28 -- compose attachment list. */
.o9k-compose-attach-list { list-style: none; padding: 0; margin: 6px 0 0 0; }
.o9k-compose-attach-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: rgba(36,30,20,0.04); border-radius: 4px; margin-bottom: 4px; }
.o9k-compose-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.o9k-compose-attach-state { font-size: 0.75rem; opacity: 0.75; flex: 0 0 auto; }


/* o9k-image-crop-ui v1 amendment 1 — crop modal scaffolding. Dormant
 * styles in this commit; the JS that builds the .o9k-crop-modal DOM
 * lands separately. */
.o9k-crop-modal { position: fixed; inset: 0; z-index: 9100;
                  display: flex; align-items: center; justify-content: center; }
.o9k-crop-modal__backdrop { position: absolute; inset: 0;
                            background: rgba(34,28,18,0.58); }
.o9k-crop-modal__panel {
    position: relative;
    background: var(--pp-color-surface, #FFFDF8);
    color: var(--pp-color-text, #241E14);
    border: 1px solid var(--pp-color-border, #E5DBC8);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(34,28,18,0.45);
    width: min(560px, 92vw);
    max-height: 92vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.o9k-crop-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--pp-space-three) var(--pp-space-four);
    border-bottom: 1px solid var(--pp-color-border, #E5DBC8);
    font-size: 14px;
}
.o9k-crop-modal__header-title { font-weight: 500; }
.o9k-crop-modal__close {
    background: transparent; border: 0;
    color: var(--pp-color-text-dim, #948A74);
    font-size: 18px; cursor: pointer;
    padding: 0 var(--pp-space-one);
}
.o9k-crop-modal__close:hover { color: var(--pp-color-text, #241E14); }

/* Canvas + frame overlay container. Aspect chosen so the frame has
 * room for context above/below (avatar) or for portrait-source
 * scrolling room (banner). */
.o9k-crop-canvas-wrap {
    position: relative;
    width: 100%;
    background: #241E14;
    /* JS sets explicit pixel height to match canvas. CSS aspect-ratio
     * is a fallback for the dormant-CSS phase. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    touch-action: none; /* gestures handled in JS — disable browser pan */
    user-select: none;
}
.o9k-crop-canvas-wrap--banner { aspect-ratio: 3 / 2; }
.o9k-crop-canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Image-rendering: smooth/auto since we draw via drawImage. */
}

/* Frame: bounding box overlay, transparent center, dark outside via
 * a giant inset shadow trick. The frame itself is a div; its border
 * shows the crop edge. */
.o9k-crop-frame {
    position: absolute;
    /* JS sets exact px coordinates. Defaults (centered 75% × 75%
     * for avatar) match the dormant-CSS appearance. */
    left: 12.5%; top: 12.5%;
    width: 75%; height: 75%;
    border: 2px solid rgba(36,30,20,0.72);
    box-sizing: border-box;
    pointer-events: none;
    /* Outside-frame mask via huge box-shadow; the spread radius is
     * larger than any viewport so the entire surrounding area
     * darkens. */
    box-shadow: 0 0 0 9999px rgba(34,28,18,0.42);
}
/* The wrap is aspect-ratio 3/2 for banner (wrap_w = 1.5 * wrap_h),
 * so the frame's height-as-%-of-wrap must compensate to land on 3:1.
 * Math: frame_w/frame_h = (0.75*wrap_w) / (h_pct*wrap_h) = 3
 *       → h_pct = 0.75 * 1.5 / 3 = 0.375 = 37.5%
 * top = (100% - 37.5%) / 2 = 31.25%. */
.o9k-crop-frame--banner { left: 12.5%; top: 31.25%; width: 75%; height: 37.5%; }
/* Subtle thirds-grid inside frame — helps the user compose. */
.o9k-crop-frame::before, .o9k-crop-frame::after {
    content: ""; position: absolute;
    background: rgba(36,30,20,0.14);
    pointer-events: none;
}
.o9k-crop-frame::before { left: 33.33%; top: 0; width: 1px; height: 100%;
                          box-shadow: 33.34% 0 0 rgba(36,30,20,0.14); }
.o9k-crop-frame::after  { left: 0; top: 33.33%; width: 100%; height: 1px;
                          box-shadow: 0 33.34% 0 rgba(36,30,20,0.14); }

/* Controls row + zoom slider. */
.o9k-crop-controls {
    display: flex; align-items: center; gap: 12px;
    padding: var(--pp-space-three) var(--pp-space-four);
    border-top: 1px solid var(--pp-color-border, #E5DBC8);
}
.o9k-crop-controls__label { font-size: 12px; color: var(--pp-color-text-dim, #948A74);
                            min-width: 32px; }
.o9k-crop-zoom {
    flex: 1; min-width: 0;
    -webkit-appearance: none; appearance: none;
    height: 4px; background: var(--pp-color-border, #E5DBC8);
    border-radius: 2px; outline: none;
}
.o9k-crop-zoom::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--pp-color-action-primary, #9A7B2E); cursor: pointer; border: 0;
}
.o9k-crop-zoom::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--pp-color-action-primary, #9A7B2E); cursor: pointer; border: 0;
}
.o9k-crop-reset {
    background: transparent; border: 1px solid var(--pp-color-border, #E5DBC8);
    color: var(--pp-color-text-dim, #948A74);
    padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
.o9k-crop-reset:hover { color: var(--pp-color-text, #241E14); }

/* Footer: action buttons. */
.o9k-crop-modal__footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: var(--pp-space-three) var(--pp-space-four);
    border-top: 1px solid var(--pp-color-border, #E5DBC8);
}
.o9k-crop-error {
    padding: var(--pp-space-two) var(--pp-space-four);
    color: var(--pp-color-feedback-error, #9A3B2E);
    font-size: 13px;
    border-top: 1px solid var(--pp-color-border, #E5DBC8);
}


/* VIDEO-TRIM.A VTA.1 (Spec-Ref f41833c): trim modal scaffold styles */
.o9k-trim-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.o9k-trim-modal-backdrop { position: absolute; inset: 0; background: rgba(34,28,18,0.52); cursor: pointer; }
.o9k-trim-modal-panel {
  position: relative; background: var(--surface, #FFFDF8); color: var(--text, #241E14);
  border-radius: 8px; padding: 18px 20px 16px; max-width: 720px; width: calc(100% - 32px);
  max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.o9k-trim-modal-title { font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.o9k-trim-video { width: 100%; max-height: 420px; background: #241E14; border-radius: 4px; display: block; }
.o9k-trim-slider-stub { margin: 12px 0 4px; padding: 10px 12px; background: rgba(36,30,20,0.05); border-radius: 4px; font-size: 13px; color: var(--text-secondary, #6E6450); }
.o9k-trim-meta { margin: 4px 0 12px; font-size: 12px; color: var(--text-secondary, #6E6450); font-family: "Inter", system-ui, -apple-system, sans-serif; }
.o9k-trim-actions { display: flex; justify-content: flex-end; gap: 8px; }


/* VIDEO-TRIM.A VTA.2 (Spec-Ref f41833c): drag handles + slider track */
.o9k-trim-slider { margin: 12px 0 8px; user-select: none; -webkit-user-select: none; }
.o9k-trim-track {
  position: relative; height: 28px; margin: 8px 16px;
  background: rgba(36,30,20,0.07); border-radius: 14px;
}
.o9k-trim-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: rgba(194,162,78,0.35); border-radius: 14px; pointer-events: none;
}
.o9k-trim-handle {
  position: absolute; top: 50%; width: 22px; height: 22px;
  margin-left: -11px; transform: translateY(-50%);
  background: var(--accent, #C2A24E);
  border: 2px solid #241E14; border-radius: 50%;
  cursor: ew-resize; touch-action: none;
  box-shadow: 0 1px 4px rgba(34,28,18,0.32);
}
.o9k-trim-handle:focus { outline: 2px solid var(--accent, #C2A24E); outline-offset: 2px; }
.o9k-trim-track-dragging .o9k-trim-handle { transition: none; }
.o9k-trim-times { display: flex; align-items: center; gap: 6px; margin: 8px 16px 0; font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 13px; color: var(--text, #241E14); }
.o9k-trim-times-sep { color: var(--text-secondary, #6E6450); }
.o9k-trim-duration { margin-left: auto; color: var(--text-secondary, #6E6450); }
.o9k-trim-helper { margin: 8px 16px 0; padding: 8px 10px; background: rgba(36,30,20,0.04); border-radius: 4px; font-size: 12px; color: var(--text-secondary, #6E6450); }
.o9k-btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* VIDEO-TRIM.A VTA.3 (Spec-Ref f41833c): selection-play actions layout */
.o9k-trim-actions { justify-content: space-between; }
.o9k-trim-actions-left, .o9k-trim-actions-right { display: flex; gap: 8px; }


/* VIDEO-TRIM.A VTA.4a (Spec-Ref 78885b6): worker status line */
.o9k-trim-status { margin: 8px 16px 0; padding: 6px 10px; border-radius: 4px; background: rgba(154,123,46,0.10); color: var(--text-secondary, #6E6450); font-size: 12px; font-family: "Inter", system-ui, -apple-system, sans-serif; }
.o9k-trim-status-error { background: rgba(154,59,46,0.15); color: #C4655B; }


/* VIDEO-TRIM.A VTA.4d (Spec-Ref 78885b6): Actual time row */
.o9k-trim-actual { margin: 4px 16px 0; padding: 4px 10px; font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 12px; color: var(--accent, #C2A24E); min-height: 18px; }
.o9k-trim-actual-error { color: #C4655B; }


/* VIDEO-TRIM.A VTA.6c (Spec-Ref 4144419): audio_dropped advisory row */
.o9k-trim-warning {
  margin: 6px 16px 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(194,162,78,0.20);
  color: #C2A24E;
  font-size: 12px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  border-left: 3px solid #C2A24E;
}
.o9k-trim-warning[hidden] { display: none; }

/* ─── VIDEO-TRIM.D web playback custom controls (Fork A) ─────────────────
 * Spec-Ref: c65b9db. Wraps o9k-attach-video with custom seekbar + hover
 * scrub-preview for posts whose body has preview_track populated.
 * vtd.js owns the DOM upgrade; app.js renders the bare <video> and
 * data-attach-preview-track. */

.o9k-vtd-wrap {
  position: relative;
  display: block;
  width: 100%;
  background: #241E14;
  border-radius: 6px;
  overflow: hidden;
}

.o9k-vtd-wrap > video.o9k-attach-video {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.o9k-vtd-bar {
  display: flex;
  align-items: center;
  gap: var(--pp-space-two);
  padding: 6px 10px;
  background: linear-gradient(to top, #F2EADB, #FFFDF8E0);
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-size: 11px;
  color: #3A3328;
  user-select: none;
}

.o9k-vtd-bar button {
  background: transparent;
  border: 0;
  color: #3A3328;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
}
.o9k-vtd-bar button:hover { background: #FFFDF8; }
.o9k-vtd-bar button:focus { outline: 2px solid #9A7B2E; outline-offset: 1px; }

.o9k-vtd-time {
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
  color: #6E6450;
}

.o9k-vtd-seek {
  position: relative;
  flex: 1 1 auto;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.o9k-vtd-seek::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  background: #FFFDF8;
  border-radius: 2px;
}
.o9k-vtd-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  width: 0%;
  background: #9A7B2E;
  border-radius: 2px;
  pointer-events: none;
}
.o9k-vtd-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  background: #3A3328;
  border: 2px solid #9A7B2E;
  border-radius: 50%;
  left: 0%;
  pointer-events: none;
  transition: transform 0.1s;
}
.o9k-vtd-seek:hover .o9k-vtd-thumb { transform: scale(1.15); }

.o9k-vtd-preview {
  position: absolute;
  bottom: 38px;
  left: 0;
  width: 240px;
  height: 135px;
  border: 2px solid #9A7B2E;
  border-radius: 4px;
  pointer-events: none;
  background: #241E14;
  box-shadow: 0 4px 16px rgba(34,28,18,0.45);
  display: none;
  z-index: 10;
}

/* Fullscreen: scale the wrap to viewport. */
.o9k-vtd-wrap:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.o9k-vtd-wrap:fullscreen > video.o9k-attach-video { height: calc(100% - 38px); object-fit: contain; }
.o9k-vtd-wrap:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }
.o9k-vtd-wrap:-webkit-full-screen > video.o9k-attach-video { height: calc(100% - 38px); object-fit: contain; }

@media (max-width: 600px) {
  .o9k-vtd-bar { padding: 4px 6px; gap: 6px; font-size: 10px; }
  .o9k-vtd-time { min-width: 32px; }
  .o9k-vtd-preview { width: 180px; height: 101px; }
}

/* TD.W.6 + TD.W.7 — thread polish (spec 79a8f32 §2.1) */

/* "↩ in reply to @handle" line. Small, secondary; tappable. */
.o9k-reply-to-line {
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: var(--pp-space-half);
  color: var(--pp-color-text-secondary, #948A74);
}
.o9k-reply-to-link {
  color: var(--pp-color-text-secondary, #948A74);
  text-decoration: none;
  cursor: pointer;
}
.o9k-reply-to-link:hover,
.o9k-reply-to-link:focus {
  text-decoration: underline;
  color: var(--pp-color-text-primary, #3A3328);
}

/* Expand/collapse caret next to a comment's avatar. */
.o9k-thread-caret {
  display: inline-block;
  width: 14px;
  margin-right: var(--pp-space-half);
  cursor: pointer;
  color: var(--pp-color-text-secondary, #948A74);
  user-select: none;
}
.o9k-thread-caret:hover,
.o9k-thread-caret:focus {
  color: var(--pp-color-text-primary, #3A3328);
}

/* "▸ Show N replies" chip rendered in place of a collapsed subtree. */
.o9k-thread-collapsed {
  font-size: 12px;
  padding: var(--pp-space-one) var(--pp-space-two);
  margin: var(--pp-space-half) 0;
  color: var(--pp-color-text-secondary, #948A74);
  cursor: pointer;
  border-radius: var(--pp-radius-two, 4px);
  display: inline-block;
}
.o9k-thread-collapsed:hover,
.o9k-thread-collapsed:focus {
  background: var(--pp-color-surface-hover, rgba(36,30,20,0.05));
  color: var(--pp-color-text-primary, #3A3328);
}

/* Flash highlight when scrolled-to via "in reply to @handle" tap. */
@keyframes o9k-comment-flash-kf {
  0%   { background: var(--pp-color-accent-soft, rgba(194,162,78,0.40)); }
  100% { background: transparent; }
}
.o9k-comment-flash {
  animation: o9k-comment-flash-kf 1.5s ease-out;
}

/* SEARCH.W (spec 608e5f7) — /search view */

.o9k-search { max-width: 720px; margin: 0 auto; padding: 8px 12px; }
.o9k-search-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--pp-color-border-default, #6E6450);
  border-radius: var(--pp-radius-md, 12px);
  background: var(--pp-color-surface-raised, #F2EADB);
  color: var(--pp-color-text-primary, #F2EADB);
  outline: none;
  margin-bottom: var(--pp-space-four);
}
.o9k-search-input:focus { border-color: var(--pp-color-border-focus, #948A74); }
.o9k-search-loading { font-size: 12px; margin: 4px 0; }
.o9k-search-err {
  font-size: 12px;
  padding: 6px 10px;
  margin: var(--pp-space-one) 0;
  border-radius: 4px;
  background: rgba(154,59,46,0.10);
  color: #823024;
}
.o9k-search-section { margin-top: 16px; }
.o9k-search-section-h {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 var(--pp-space-two) 0;
  color: var(--pp-color-text-secondary, #6E6450);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.o9k-search-user-row {
  display: flex;
  align-items: center;
  gap: var(--pp-space-three);
  padding: var(--pp-space-two) var(--pp-space-one);
  cursor: pointer;
  border-radius: 6px;
}
.o9k-search-user-row:hover {
  background: var(--pp-color-surface-hover, rgba(36,30,20,0.05));
}
.o9k-search-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--pp-color-surface-l1, #FFFDF8);
}
.o9k-search-user-avatar-empty { background: #6E6450; }
.o9k-search-user-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.o9k-search-user-handle {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o9k-search-user-name {
  font-size: 12px;
  color: var(--pp-color-text-secondary, #6E6450);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o9k-search-follow {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--pp-color-border-default, #6E6450);
  border-radius: 9999px;
  cursor: pointer;
  background: var(--pp-color-action-primary, #948A74);
  color: #241E14;
}
.o9k-search-follow.o9k-search-followed {
  background: transparent;
  color: var(--pp-color-text-primary, #F2EADB);
}
.o9k-search-follow:hover { opacity: 0.85; }
.o9k-search-more {
  display: block;
  margin: var(--pp-space-three) auto;
  padding: 6px 16px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--pp-color-border-default, #6E6450);
  border-radius: 6px;
  cursor: pointer;
  color: var(--pp-color-text-secondary, #6E6450);
}
.o9k-search-more:hover { background: var(--pp-color-surface-hover, rgba(36,30,20,0.05)); }

/* FT.W (spec a891801) — Following:Recent ↔ Trending segmented control */

.o9k-following-sort {
  display: inline-flex;
  margin: var(--pp-space-two) 0 var(--pp-space-three) 0;
  border: 1px solid var(--pp-color-border-default, #6E6450);
  border-radius: 9999px;
  overflow: hidden;
  background: var(--pp-color-surface-raised, #F2EADB);
}
.o9k-following-sort-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pp-color-text-secondary, #6E6450);
  cursor: pointer;
  border-radius: 9999px;
  transition: background 100ms ease;
}
.o9k-following-sort-btn:hover {
  background: var(--pp-color-surface-hover, rgba(36,30,20,0.05));
}
.o9k-following-sort-btn.o9k-following-sort-active {
  background: var(--pp-color-action-primary, #948A74);
  color: #241E14;
}

/* DM-SEND-ERR.W: inline error display in the new-conversation compose UI.
   Mirrors .o9k-err posture but uses pp-color-feedback-error token. */
.o9k-dm-compose-err {
  color: var(--pp-color-feedback-error);
  background: #4A2020;
  border: 1px solid #6E2A2A;
  padding: var(--pp-space-two) var(--pp-space-three);
  font-size: 12px;
  margin-top: var(--pp-space-two);
  border-radius: var(--pp-radius-sm);
}

/* NOTIF-DEEP-LINK.W.4: highlight ring on the comment a notification click
   deep-linked into. 3s fade-out so the user notices but it doesn't linger. */
.o9k-comment.o9k-comment--just-arrived {
  outline: 2px solid var(--pp-color-action-primary);
  outline-offset: 2px;
  border-radius: var(--pp-radius-sm);
  animation: o9kCommentArrived 3s ease-out forwards;
}
@keyframes o9kCommentArrived {
  0%   { outline-color: var(--pp-color-action-primary); }
  100% { outline-color: transparent; }
}

/* pier-plank-thread-flow-spec-v1 §3 (21b7c68): depth-dimming surface.
 * Renders only when [data-plank-depth] + [data-plank-max-depth] are
 * both present. Pre-rotation post cards lack these attrs, so the
 * rule is a no-op until W.1.b lands the attributes. Anchored to the
 * actual production .o9k-post background (#F2EADB dark, line 143)
 * for brightness=1.0; intensity=0 dims toward #241E14 (near-black).
 * When pier-plank token ratification ships, swap literals for tokens.
 * Spec: pier-plank-thread-flow-web-impl-spec-v1 §2.W.1.a (9110032).
 */
.o9k-post[data-plank-depth][data-plank-max-depth] {
  --plank-depth: 0;
  --plank-max-depth: 1;
  --plank-intensity: calc(
    1 - var(--plank-depth) / max(var(--plank-max-depth), 1)
  );
  /* Defaults above keep intensity=1 → color-mix is 100% #F2EADB,
   * identical to the baseline .o9k-post background. W.1.b will set
   * --plank-depth/--plank-max-depth inline per-card to drive dimming. */
  background-color: color-mix(
    in srgb,
    #F2EADB calc(var(--plank-intensity) * 100%),
    #241E14 calc((1 - var(--plank-intensity)) * 100%)
  );
}

/* ===== LINK-EMBEDS v1.1 (clickable-gate facade) ===== */
.o9k-embed{display:flex;align-items:center;gap:10px;cursor:pointer;background:#F2EADB;border:1px solid #E5DBC8;border-radius:8px;padding:10px 12px;margin:6px 0;color:#241E14;max-width:560px;-webkit-user-select:none;user-select:none;}
.o9k-embed:hover{border-color:#DFD0AE;background:#F2EADB;}
.o9k-embed:focus-visible{outline:2px solid #9A7B2E;outline-offset:2px;}
.o9k-embed__play{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#C9A84C;color:#241E14;font-size:13px;flex:0 0 auto;}
.o9k-embed__label{font-size:13px;opacity:.92;}
.o9k-embed--live{display:block;padding:0;margin:8px 0;background:#241E14;border:0;cursor:default;}
.o9k-embed--video.o9k-embed--live{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;}
.o9k-embed--live .o9k-embed__iframe{width:100%;height:100%;border:0;display:block;}
.o9k-embed--audio.o9k-embed--live,.o9k-embed--spotify.o9k-embed--live{aspect-ratio:auto;height:152px;max-width:560px;}
/* ===== end LINK-EMBEDS ===== */

/* ===== anon guest banner (ANON-PUBLIC-FEED v1) ===== */
.o9k-guest{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#F2EADB;border:1px solid #E5DBC8;border-radius:8px;padding:10px 12px;margin:8px 0;color:#241E14;}
.o9k-guest__txt{font-size:13px;opacity:.92;margin-right:auto;}
/* ===== end anon guest banner ===== */

/* WHO-TO-FOLLOW v1.1 (Spec-Ref e9be7b9) */
.o9k-wtf { margin-top: 8px; }
.o9k-wtf__h { font-size: 13px; font-weight: 600; color: #9A7B2E; padding: 8px 4px; margin: 4px 0 2px; }

/* TOS-ACCEPT v1 (Spec-Ref fb160d4) */
.o9k-su-legal { font-size: 11px; color: #6E6450; margin: 2px 0 6px; line-height: 1.45; }
.o9k-su-legal a { color: #9A7B2E; }

/* AGE-GATE v1 (theicxc-age-gate-signup-spec-v1) — the adult table affirmation. */
.o9k-sub--intro {
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  letter-spacing: normal;
  line-height: 1.4;
  color: #6E6450;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  text-transform: none;
}
.o9k-su-affirm {
  background: #F2EADB;
  border: 1px solid #E5DBC8;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 4px 0 2px;
  text-align: left;
}
.o9k-su-affirm__h {
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: #241E14;
  margin: 0 0 6px;
  letter-spacing: normal;
}
.o9k-su-affirm__body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #6E6450;
  margin: 0 0 10px;
}
.o9k-su-affirm__check {
  font-size: 15px;
  color: #241E14;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  margin: 0;
}
.o9k-su-affirm__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}
#o9k-su-submit { background: #836726; color: #FBF7EE; }
#o9k-su-submit:hover:not(:disabled) { background: #9A7B2E; }
#o9k-su-submit:disabled { opacity: 0.5; cursor: not-allowed; }
#o9k-su-submit:focus-visible,
.o9k-su-affirm__check input[type="checkbox"]:focus-visible {
  outline: 2px solid #9A7B2E;
  outline-offset: 2px;
}

/* o9k-dm-group: group thread system notices + sender attribution (W.G.4/W.G.7) */
.o9k-chat-sysmsg{text-align:center;color:#6E6450;font-size:.8em;margin:6px 0;opacity:.85}
.o9k-chat-msg__author{display:block;font-size:.78em;font-weight:600;color:#B0903B;margin-bottom:2px}

/* ============================================================
 * theicxc UI-redesign v1 — Slice 1: calm interaction row (decision-a)
 * Spec-Ref b2292c3. Replaces the o9k vote-chevron .o9k-react-bar.
 * Amen affirm / Reply / Bookmark / quiet Share. Tokens only, AA, 44px hit.
 * ============================================================ */
.tx-acts{
  display:flex;align-items:center;gap:var(--pp-space-one,8px);
  margin-top:var(--pp-space-two,12px);
  flex-wrap:wrap;
}
.tx-act{
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:6px 10px;
  border:0;border-radius:999px;background:transparent;
  color:var(--pp-color-text-secondary,#6E6450);
  font:inherit;font-size:.86em;line-height:1;cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.tx-act:hover{
  background:var(--pp-color-surface-hover,#F2EADB);
  color:var(--pp-color-text-primary,#241E14);
}
.tx-act:active{transform:translateY(.5px);}
/* keyboard focus — explicit brass ring (P11), not the UA outline */
.tx-act:focus-visible{
  outline:var(--pp-focus-width,2px) var(--pp-focus-style,solid) var(--pp-focus-color,#9A7B2E);
  outline-offset:var(--pp-focus-offset,2px);
}
.tx-ico{flex:0 0 auto;display:block;}
.tx-act-t{font-weight:500;}
.tx-act-n{font-variant-numeric:tabular-nums;font-size:.95em;opacity:.9;}
/* Amen — the single warm affirm. Brass on hover + when given. */
.tx-act--amen:hover{color:var(--pp-color-action-primary,#836726);}
.tx-act--amen.tx-act--on{
  color:var(--pp-color-action-primary,#836726);
  background:color-mix(in srgb,var(--pp-color-action-primary,#836726) 12%,transparent);
}
.tx-act--amen.tx-act--on .tx-ico{stroke-width:1.9;}
/* Bookmark — brass when saved. */
.tx-act--bm.tx-act--on{color:var(--pp-color-action-primary,#836726);}
.tx-act--bm.tx-act--on .tx-ico path{fill:var(--pp-color-action-primary,#836726);}
/* Share sits a touch apart at the end. */
.tx-act--share{margin-left:auto;}
/* Detail-view reply is a static count, not a button. */
.tx-act--static{cursor:default;}
.tx-act--static:hover{background:transparent;color:var(--pp-color-text-secondary,#6E6450);}
@media (prefers-reduced-motion: reduce){
  .tx-act{transition:none;}
  .tx-act:active{transform:none;}
}

/* ============================================================
 * theicxc UI-redesign v1 — Slice 2: rail brand + nav icons.
 * Spec-Ref b2292c3.
 * ============================================================ */
.tx-brand{
  display:flex;align-items:center;justify-content:flex-start;
  padding:var(--pp-space-two,12px) var(--pp-space-two,12px) var(--pp-space-one,8px);
  text-decoration:none;cursor:pointer;
}
.tx-brand-word{
  font-family:"EB Garamond","Cormorant Garamond",Georgia,serif;
  font-weight:500;font-size:1.5rem;line-height:1;letter-spacing:.12em;
  color:var(--pp-color-action-primary,#836726);
  white-space:nowrap;
}
.tx-brand:focus-visible{
  outline:var(--pp-focus-width,2px) var(--pp-focus-style,solid) var(--pp-focus-color,#9A7B2E);
  outline-offset:var(--pp-focus-offset,2px);border-radius:6px;
}
/* SVG nav icons inherit the rail item's color via currentColor. */
.tx-nav-ico{display:block;}
.o9k-rail-item__glyph .tx-nav-ico,
.o9k-bottom-tab__glyph .tx-nav-ico{margin:0 auto;}
/* Tablet rail is icon-only (labels hidden by existing rules); center the icon. */
.o9k-rail-item__glyph{display:inline-flex;align-items:center;justify-content:center;}

/* ============================================================
 * theicxc UI-redesign v1 — Slice 3: empty states, verse card, context column.
 * Spec-Ref b2292c3.
 * ============================================================ */
.tx-empty{
  text-align:center;padding:var(--pp-space-four,28px) var(--pp-space-three,16px);
  max-width:420px;margin:var(--pp-space-four,28px) auto;
}
.tx-empty__art{display:block;margin:0 auto var(--pp-space-two,12px);width:180px;height:auto;opacity:.96;}
.tx-empty__title{
  font-family:"EB Garamond","Cormorant Garamond",Georgia,serif;
  font-size:1.35rem;font-weight:500;color:var(--pp-color-text-primary,#241E14);
  margin:0 0 var(--pp-space-half,4px);
}
.tx-empty__sub{
  color:var(--pp-color-text-secondary,#6E6450);font-size:.95rem;line-height:1.55;
  max-width:340px;margin:0 auto;
}
@media (prefers-reduced-motion: reduce){ .tx-empty__art{transition:none;} }

/* Desktop context column content. The aside itself is breakpoint-gated by the
 * existing shell CSS (≥1280); this only styles its inner cards. */
.o9k-shell__context{padding:var(--pp-space-three,16px) var(--pp-space-two,12px);}
.tx-verse{
  background:var(--pp-color-surface-raised,#FFFDF8);
  border:1px solid var(--pp-color-border-default,#E5DBC8);
  border-radius:14px;padding:var(--pp-space-three,16px);
  margin-bottom:var(--pp-space-three,16px);
  box-shadow:0 1px 2px rgba(60,45,20,.08),0 2px 8px rgba(60,45,20,.05);
}
.tx-verse__h{
  font-family:"Inter",system-ui,sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pp-color-text-secondary,#6E6450);margin:0 0 var(--pp-space-one,8px);
}
.tx-verse__t{
  font-family:"EB Garamond","Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:1.18rem;line-height:1.5;
  color:var(--pp-color-text-primary,#241E14);margin:0 0 var(--pp-space-half,4px);
}
.tx-verse__r{
  font-size:.85rem;font-weight:600;color:var(--pp-color-action-primary,#836726);margin:0;
}

/* UI-redesign v1 follow-up (Spec-Ref b2292c3): the ornate seal as the brand
 * emblem above the wordmark on the auth surfaces (login / signup). */
.tx-seal{display:block;margin:0 auto var(--pp-space-one,8px);width:88px;height:88px;}

/* Owner-action bar (edit / delete / pin / share-to-group) — subtle low-emphasis
 * pills so they recede beneath the post content + the Amen row. Scoped to
 * .o9k-own-bar so the global .o9k-btn is untouched. */
.o9k-own-bar{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--pp-space-one,8px);}
.o9k-own-bar .o9k-btn{
  font-size:.8rem;line-height:1;padding:5px 11px;border-radius:999px;
  background:transparent;border:1px solid var(--pp-color-border-default,#E5DBC8);
  color:var(--pp-color-text-secondary,#6E6450);cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.o9k-own-bar .o9k-btn:hover{
  background:var(--pp-color-surface-hover,#F2EADB);
  color:var(--pp-color-text-primary,#241E14);
  border-color:var(--pp-color-border-strong,#CFC2A6);
}
.o9k-own-bar .o9k-btn[data-action="delete-post"]:hover{
  color:var(--pp-color-action-destructive,#9A3B2E);
  border-color:var(--pp-color-action-destructive,#9A3B2E);
  background:transparent;
}
.o9k-own-bar .o9k-btn:focus-visible{
  outline:var(--pp-focus-width,2px) var(--pp-focus-style,solid) var(--pp-focus-color,#9A7B2E);
  outline-offset:var(--pp-focus-offset,2px);
}
@media (prefers-reduced-motion: reduce){ .o9k-own-bar .o9k-btn{transition:none;} }