:root {
  --button-ink:#ffffff;
  --button:#18191c;
  color-scheme:light;
  --bg:#ffffff;
  --paper:#ffffff;
  --ink:#18191c;
  --muted:#64676e;
  --line:#e8e8eb;
  --accent:#18191c;
  --accent-hover:#36383e;
  --wash:#f5f5f7;
  --green:#64676e;
  --shadow:0 12px 42px #363b2810;
  --radius:8px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px
}
:root[data-theme="dark"] {
  --button-ink:#17181b;
  --button:#eeeeef;
  color-scheme:dark;
  --bg:#141518;
  --paper:#1b1c20;
  --ink:#f5f5f6;
  --muted:#acafb8;
  --line:#34363d;
  --accent:#eeeeef;
  --accent-hover:#ffffff;
  --wash:#25262c;
  --green:#b8bbc4;
  --shadow:0 12px 42px #0002
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
button:disabled {
  opacity:.55;
  cursor:wait
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px
}

/* Route changes focus this landmark for assistive technology. Interactive
   controls retain their visible focus rings above. */
#main:focus {
  outline: none;
}
button {
  border:0
}
svg {
  width:21px;
  height:21px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.app-shell {
  max-width:1390px;
  display:grid;
  grid-template-columns:254px minmax(420px,650px) 280px;
  gap:40px;
  margin:0 auto;
  padding:0 32px
}
.sidebar {
  position:sticky;
  top:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding:39px 0 23px
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  font-weight:720;
  font-size:22px;
  letter-spacing:-.8px;
  line-height:1.2
}
.brand-mark {
  width:44px;
  height:44px;
  background:var(--accent);
  color:var(--paper);
  border-radius:14px;
  position:relative;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:40px;
  line-height:42px;
  text-align:center;
  padding-right:9px
}
.brand-mark span {
  position:absolute;
  font-size:20px;
  font-style:normal;
  right:3px;
  top:-5px
}
.brand-caption {
  display:block;
  font-weight:500;
  font-size:8px;
  letter-spacing:1.4px;
  margin-top:6px
}
.nav-caption {
  font-size:9px;
  letter-spacing:1.7px;
  color:var(--muted);
  font-weight:650;
  margin:57px 0 15px 15px
}
nav {
  display:grid;
  gap:7px
}
.nav-item {
  display:flex;
  gap:14px;
  align-items:center;
  border-radius:10px;
  padding:12px 15px;
  font-size:14px;
  font-weight:540;
  color:var(--muted)
}
.nav-item.active {
  background:var(--wash);
  color:var(--ink)
}
:root[data-theme="dark"] .nav-item.active {
  background:var(--wash);
  color:var(--ink)
}
.nav-item:hover {
  background:var(--wash)
}
.nav-item.active::after {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  margin-left:auto
}
.compose-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--accent);
  border-radius:10px;
  color:#fff;
  font-weight:650;
  min-height:46px;
  margin-top:29px;
  box-shadow:0 3px 3px #d8765910
}
.compose-button:hover,.primary-button:hover {
  background:var(--accent-hover)
}
.sidebar-bottom {
  margin-top:auto;
  padding:35px 12px 0
}
.server-note {
  display:flex;
  gap:10px;
  font-size:12px;
  line-height:1.7
}
.server-note small {
  color:var(--muted);
  font-size:11px
}
.online-dot {
  height:6px;
  width:6px;
  display:inline-block;
  background:var(--green);
  border-radius:50%;
  margin-top:7px;
  flex-shrink:0
}
.sidebar-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid var(--line)
}
.text-button {
  background:none;
  font-size:11px;
  color:var(--muted);
  padding:6px 0
}
.text-button span {
  padding-left:9px
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:transparent;
  color:var(--muted)
}
.icon-button:hover {
  background:var(--wash);
  color:var(--ink)
}
main {
  min-width:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:0 26px 40px;
  min-height:100dvh
}
.page-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:43px 0 29px
}
.eyebrow {
  font-size:9px;
  font-weight:650;
  letter-spacing:1.8px;
  color:var(--muted);
  line-height:1.4
}
h1 {
  font-size:25px;
  letter-spacing:-1px;
  line-height:1.3;
  font-weight:600;
  margin:8px 0 0
}
.header-flower {
  font-size:38px;
  font-weight:200;
  color:var(--accent);
  line-height:1
}
.rightbar {
  padding-top:44px
}
.welcome-card {
  background:#ecefdf;
  border-radius:15px;
  padding:22px 25px 26px;
  overflow:hidden;
  color:#374532
}
.welcome-card .eyebrow {
  font-size:8px;
  letter-spacing:1.2px;
  color:#78836c
}
.welcome-card h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:31px;
  letter-spacing:-1px;
  line-height:1.15;
  margin:12px 0
}
.welcome-card p {
  font-size:12px;
  line-height:1.9;
  color:#74806b;
  margin:15px 0 18px
}
.quiet-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  font-weight:600
}
.orbit-art {
  height:137px;
  position:relative;
  margin:-8px -10px 15px;
  display:grid;
  place-items:center
}
.orbit {
  position:absolute;
  width:156px;
  height:80px;
  border:1px solid #b8c2a9;
  border-radius:50%;
  transform:rotate(-34deg)
}
.orbit-two {
  transform:rotate(34deg)
}
.orbit-three {
  width:91px;
  height:122px;
  transform:rotate(0deg)
}
.orbit-center {
  font-size:71px;
  font-weight:200;
  line-height:1;
  color:#81966f;
  background:#ecefdf;
  z-index:1;
  padding:0 4px
}
.orbit-art i {
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#dc8966;
  left:46px;
  top:83px;
  z-index:2
}
.side-section {
  padding:29px 7px 0
}
.side-section h3 {
  font-size:12px;
  font-weight:600;
  margin:0 0 12px
}
.side-section p {
  font-size:12px;
  color:var(--muted);
  line-height:2
}
.little-line {
  width:28px;
  height:1px;
  background:var(--line);
  margin:24px 0
}
.server-address {
  font-size:12px
}
.tiny {
  font-size:10px!important;
  line-height:1.8!important
}
.side-footer {
  border-top:1px solid var(--line);
  margin:27px 7px;
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
  padding-top:16px;
  font-size:9px;
  color:var(--muted)
}
.side-footer a {
  width:100%;
  margin-top:5px
}
.profile-card {
  border-radius:var(--radius);
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden
}
.profile-cover {
  height:161px;
  background:#c8cfb8;
  position:relative;
  overflow:hidden
}
.profile-cover::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 80% 105%,#5d775b 0 29%,transparent 29.4%),radial-gradient(ellipse at 60% 130%,#869b75 0 46%,transparent 46.4%),radial-gradient(ellipse at 5% 165%,#afbb95 0 67%,transparent 67.4%),linear-gradient(135deg,#f0d8b7,#d6dfc6 62%,#aebc9f)
}
.profile-cover::after {
  content:"";
  width:48px;
  height:48px;
  border-radius:50%;
  background:#faecd0;
  position:absolute;
  top:28px;
  left:65%
}
.profile-cover.has-image::before,.profile-cover.has-image::after {
  display:none
}
.profile-cover img {
  width:100%;
  height:100%;
  object-fit:cover
}
.cover-caption {
  position:absolute;
  color:#fff;
  z-index:1
}
.profile-details {
  padding:0 23px 23px
}
.profile-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  height:51px
}
.avatar {
  height:40px;
  width:40px;
  border-radius:13px;
  object-fit:cover;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:#e4c8b0;
  color:#684d3a;
  font-family:Georgia,serif;
  font-size:18px;
  overflow:hidden
}
.avatar.large {
  height:82px;
  width:82px;
  border-radius:24px;
  border:5px solid var(--paper);
  margin-top:-37px;
  position:relative;
  font-size:32px;
  background:#e2c6ac
}
.profile-actions {
  display:flex;
  gap:7px;
  padding-top:14px
}
.secondary-button,.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 16px;
  border-radius:8px;
  font-weight:600;
  font-size:11px;
  line-height:1.4;
  min-height:35px
}
.secondary-button {
  border:1px solid var(--line);
  background:var(--paper)
}
.secondary-button:hover {
  background:var(--wash)
}
.primary-button {
  background:var(--accent);
  color:#fff
}
.profile-name {
  letter-spacing:-.7px;
  line-height:1.3;
  margin:12px 0 2px;
  font-weight:650
}
.handle {
  font-size:11px;
  color:var(--muted);
  overflow-wrap:anywhere
}
.profile-bio {
  line-height:1.8;
  white-space:pre-line;
  margin:16px 0;
  color:var(--ink)
}
.profile-fields {
  display:flex;
  flex-wrap:wrap;
  gap:7px 15px;
  font-size:10px;
  color:var(--muted);
  margin:17px 0
}
.profile-field {
  display:flex;
  align-items:center;
  gap:5px
}
.profile-field svg {
  width:13px;
  height:13px
}
.profile-stats {
  display:flex;
  gap:22px;
  padding-top:15px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted)
}
.profile-stats strong {
  font-weight:650;
  font-size:12px;
  color:var(--ink);
  margin-right:4px
}
.feed-tabs {
  display:flex;
  gap:29px;
  border-bottom:1px solid var(--line);
  margin:25px -1px 0
}
.feed-tab {
  background:transparent;
  padding:0 0 13px;
  color:var(--muted);
  border-bottom:2px solid transparent
}
.feed-tab.active {
  border-bottom-color:var(--accent);
  color:var(--ink);
  font-weight:600
}
.feed-tab span {
  font-size:10px;
  margin-left:6px;
  color:var(--muted)
}
.post {
  padding:23px 0;
  border-bottom:1px solid var(--line)
}
.post-reason {
  font-size:10px;
  color:var(--muted);
  margin:0 0 10px 53px;
  display:flex;
  align-items:center;
  gap:6px
}
.post-reason svg {
  height:13px;
  width:13px
}
.post-layout {
  display:flex;
  gap:12px
}
.post-main {
  min-width:0;
  flex:1
}
.post-heading {
  display:flex;
  align-items:baseline;
  gap:7px;
  line-height:1.5;
  flex-wrap:wrap
}
.post-heading strong {
  font-weight:650
}
.post-heading .handle {
  font-size:10px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.post-date {
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
  margin-left:auto
}
.post-text {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:8px 0 14px
}
.post-text a {
  color:var(--accent)
}
.post-media {
  margin:12px 0;
  border-radius:12px;
  overflow:hidden;
  display:grid;
  gap:3px
}
.post-media img,.post-media video {
  width:100%;
  max-height:420px;
  object-fit:cover;
  display:block
}
.post-media audio {
  width:100%
}
.demo-landscape {
  height:190px;
  background:radial-gradient(ellipse at 25% 120%,#777e58 0 34%,transparent 34.6%),radial-gradient(ellipse at 85% 125%,#4c6754 0 47%,transparent 47.6%),radial-gradient(ellipse at 40% 85%,#b8bd8c 0 38%,transparent 38.6%),linear-gradient(#d6ded5,#ebe3c0 64%,#c2c6a0);
  position:relative
}
.demo-landscape::after {
  content:"SOMEWHERE SLOW";
  position:absolute;
  bottom:14px;
  left:18px;
  color:#fff;
  font-size:8px;
  letter-spacing:2px
}
.post-actions {
  display:flex;
  justify-content:flex-start;
  gap:8px;
  align-items:center;
  width:100%;
  margin:4px -5px -5px
}
.post-action {
  background:none;
  color:var(--muted);
  display:flex;
  gap:7px;
  align-items:center;
  padding:6px 5px;
  font-size:10px;
  border-radius:6px;
  min-height:33px
}
.post-action svg {
  height:16px;
  width:16px
}
.post-action:hover {
  color:var(--accent);
  background:var(--wash)
}
.post-action.selected {
  color:var(--accent)
}
.post-action.selected svg {
  fill:var(--accent);
  fill-opacity:.14
}
.post details summary {
  cursor:pointer;
  font-size:12px;
  color:var(--muted);
  padding:8px 0
}
.compose-card {
  position:relative;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--paper);
  padding:17px;
  margin-bottom:8px
}
.compose-card.is-dragging::after {
  content:"Drop images or videos to attach";
  position:absolute;
  inset:4px;
  z-index:6;
  display:grid;
  place-items:center;
  border:2px dashed var(--accent);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  text-align:center;
  padding:16px;
  pointer-events:none;
}
.compose-row {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:start;
  gap:12px;
  padding-bottom:12px
}
.compose-row textarea {
  min-width:0;
  display:block
}
.compose-card textarea {
  border:0;
  background:transparent;
  outline:none;
  resize:vertical;
  width:100%;
  color:var(--ink);
  line-height:1.8;
  padding:5px
}
.compose-footer {
  border-top:1px solid var(--line);
  padding-top:12px;
  display:flex;
  align-items:center
}
.compose-footer select {
  color:var(--muted);
  border:0;
  background:transparent;
  padding:5px 0
}
.compose-footer .primary-button {
  margin-left:auto
}
.char-count {
  color:var(--muted)
}
.content-warning {
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  color:var(--ink);
  margin-bottom:7px
}
.feed-heading {
  display:flex;
  justify-content:space-between;
  margin:12px 0 0;
  align-items:center
}
.feed-heading h2 {
  font-weight:600
}
.feed-heading span {
  font-size:10px;
  color:var(--muted)
}
.empty-state {
  padding:48px 24px;
  text-align:center;
  color:var(--muted)
}
.empty-state .empty-symbol {
  font-family:Georgia,serif;
  font-size:45px;
  color:var(--green);
  line-height:1.1
}
.empty-state h2 {
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
  color:var(--ink);
  margin:14px 0 6px
}
.empty-state p {
  font-size:12px;
  max-width:330px;
  margin:0 auto 20px;
  line-height:1.8
}
.error-state {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:25px;
  margin:15px 0;
  font-size:12px
}
.error-state h2 {
  font-size:16px;
  margin:0 0 8px
}
.error-state p {
  color:var(--muted)
}
.loading {
  padding:20px 0
}
.skeleton {
  border-radius:7px;
  background:var(--line);
  height:12px;
  margin:13px 0;
  animation:pulse 1.4s ease-in-out infinite
}
.skeleton:first-child {
  height:150px;
  border-radius:15px;
  margin-bottom:26px
}
.skeleton:nth-child(2) {
  width:45%
}
.skeleton:nth-child(4) {
  width:73%
}
@keyframes pulse {
  50% {
    opacity:.4
  }
}
#demo-banner {
  background:#344630;
  color:#edf0e6;
  text-align:center;
  font-size:11px;
  padding:9px 16px
}
#demo-banner a {
  text-decoration:underline;
  margin-left:10px
}
.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--bg);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:12px 20px;
  font-size:12px;
  z-index:20;
  max-width:calc(100vw - 32px)
}
dialog {
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:18px;
  padding:25px;
  width:min(520px,calc(100% - 30px));
  box-shadow:0 30px 150px #0003
}
dialog::backdrop {
  background:#17201866;
  backdrop-filter:blur(5px)
}
.modal-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px
}
.modal-top h2 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:25px;
  letter-spacing:-.5px;
  margin:0
}
.form-field {
  display:block;
  font-size:12px;
  margin:14px 0
}
.form-field input,.form-field textarea,.form-field select,.search-input {
  display:block;
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
  color:var(--ink);
  margin-top:6px;
  font-size:13px
}
.form-field textarea {
  min-height:120px;
  resize:vertical
}
.form-help {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}
.form-error {
  color:var(--accent);
  font-size:12px;
  white-space:pre-wrap
}
.search-form {
  display:flex;
  gap:9px
}
.search-input {
  margin:0;
  min-width:0
}
.search-form .primary-button {
  flex-shrink:0
}
.account-result {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
.account-result>div {
  flex:1;
  min-width:0
}
.account-result strong {
  font-size:13px
}
.account-result p {
  font-size:11px;
  color:var(--muted);
  margin:2px 0 0
}
.section-label {
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin:28px 0 7px
}
.notification {
  padding:17px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.notification-title {
  display:flex;
  gap:10px;
  align-items:center
}
.notification-title svg {
  color:var(--accent);
  height:17px;
  width:17px
}
.notification-preview {
  font-size:12px;
  color:var(--muted);
  margin:8px 0 0 27px
}
.stat-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}
.stat-box {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:21px
}
.stat-box strong {
  display:block;
  font-size:28px;
  font-weight:500;
  letter-spacing:-1px
}
.stat-box span {
  font-size:11px;
  color:var(--muted)
}
.small-note {
  font-size:11px;
  color:var(--muted);
  margin-top:20px
}
.load-more {
  display:block;
  margin:24px auto
}
.skip-link {
  position:fixed;
  left:10px;
  top:-100px;
  padding:10px;
  background:var(--paper);
  z-index:100
}
.skip-link:focus {
  top:10px
}
[hidden] {
  display:none!important
}
.feed-end {
  text-align:center;
  font-size:10px;
  color:var(--muted);
  padding:35px 0
}
.feed-end span {
  display:block;
  font-size:25px;
  color:var(--green);
  margin-bottom:5px
}
@media(min-width:1450px) {
  .app-shell {
    gap:48px;
    grid-template-columns:232px minmax(420px,660px) 260px
  }
}
@media(max-width:1200px) {
  .app-shell {
    grid-template-columns:205px minmax(400px,1fr) 225px;
    gap:25px;
    padding:0 24px
  }
  .brand {
    font-size:20px
  }
  main {
    padding-left:21px;
    padding-right:21px
  }
  .welcome-card {
    padding:20px
  }
  .welcome-card h2 {
    font-size:27px
  }
  .brand-caption {
    font-size:7px
  }
  .nav-item {
    padding-left:12px
  }
  .rightbar {
    padding-top:40px
  }
}
@media(max-width:1030px) {
  .app-shell {
    max-width:900px;
    grid-template-columns:210px minmax(0,1fr);
    gap:30px
  }
  .rightbar {
    display:none
  }
  main {
    padding:0 28px 40px
  }
  .sidebar {
    padding-top:36px
  }
}
@media(max-width:680px) {
  .app-shell {
    display:block;
    padding:0
  }
  .sidebar {
    position:fixed;
    bottom:0;
    top:auto;
    height:63px;
    width:100%;
    z-index:10;
    background:var(--paper);
    border-top:1px solid var(--line);
    padding:5px 8px calc(5px + env(safe-area-inset-bottom));
    height:calc(63px + env(safe-area-inset-bottom));
    display:block
  }
  .brand,.nav-caption,.sidebar-bottom,.compose-button {
    display:none
  }
  nav {
    display:flex;
    height:100%;
    gap:3px;
    justify-content:space-around
  }
  .nav-item {
    display:flex;
    flex:1;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    font-size:8px;
    padding:5px 3px
  }
  .nav-item svg {
    height:20px;
    width:20px
  }
  .nav-item.active::after {
    display:none
  }
  main {
    border:0;
    padding:0 19px 90px;
    min-height:100dvh
  }
  .page-header {
    padding:25px 0 22px
  }
  h1 {
    font-size:25px
  }
  .page-header .eyebrow {
    font-size:8px
  }
  .header-flower {
    font-size:33px
  }
  .profile-cover {
    height:155px
  }
  .profile-details {
    padding:0 19px 20px
  }
  .profile-name {
    font-size:23px
  }
  .profile-bio {
    font-size:12px
  }
  .post {
    padding:21px 0
  }
  .post-text {
    font-size:13px
  }
  .post-heading .handle {
    max-width:125px
  }
  .toast {
    bottom:83px
  }
  .feed-tabs {
    margin-top:25px
  }
  .post-date {
    font-size:9px
  }
  .welcome-card {
    display:none
  }
  #demo-banner {
    font-size:9px;
    padding:7px 16px
  }
  .profile-stats {
    gap:17px
  }
  .profile-actions .secondary-button {
    padding:8px 10px
  }
  .post-main .post-heading {
    gap:5px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    scroll-behavior:auto!important
  }
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.cover-caption {
  left:auto;
  right:20px;
  bottom:18px;
  font-size:7px;
  letter-spacing:1.6px
}
.settings-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

/* Reading and interaction details. */
.compose-button,.primary-button {
  background:var(--button);
  color:var(--button-ink);
}
.primary-button,.secondary-button {
  min-height:40px;
  font-size:12px;
}
.icon-button {
  width:40px;
  height:40px;
}
.post-text {
  font-size:14px;
  line-height:1.8;
}
.post-heading {
  font-size:13px;
}
.profile-bio {
  font-size:14px;
}
.profile-name {
  font-size:27px;
}
.profile-fields,.profile-stats {
  font-size:11px;
}
.welcome-card .eyebrow,.welcome-card p {
  color:#5f6d54;
}
.post-text a,.profile-bio a {
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.post-text a:hover,.author-link:hover {
  color:var(--accent);
}
.post-text code {
  background:var(--wash);
  border-radius:4px;
  padding:2px 4px;
  font-size:.9em;
}
.post-action,.post-metric {
  min-width:40px;
  min-height:40px;
  justify-content:center;
}
.post-metric {
  display:flex;
  gap:7px;
  align-items:center;
  color:var(--muted);
  font-size:11px;
}
.post-metric svg {
  width:16px;
  height:16px;
}
.feed-heading h2 {
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:13px;
}
.feed-heading h2 span {
  font-weight:400;
  font-size:11px;
}
.saved-tabs { display:flex; gap:16px; }
.feed-tab {
  min-height:44px;
  font-size:13px;
}
.compose-card textarea {
  min-height:96px;
  font-size:14px;
}
.compose-card textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:5px;
}
.compose-row textarea:focus-visible {
  outline-offset:-2px;
}
.compose-footer {
  gap:7px;
}
.compose-footer select {
  min-height:38px;
  font-size:12px;
  max-width:104px;
}
.char-count {
  font-size:11px;
  white-space:nowrap;
}
.warning-toggle {
  border:1px solid var(--line);
  background:transparent;
  border-radius:7px;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  height:36px;
  min-width:36px;
}
.warning-toggle[aria-expanded="true"] {
  background:var(--wash);
  color:var(--ink);
  border-color:var(--green);
}
.visibility-help {
  font-size:10px;
  color:var(--muted);
  margin:9px 0 0;
}
.content-warning {
  font-size:13px;
  padding:12px 0;
}
.reply-context {
  border-left:2px solid var(--green);
  background:var(--wash);
  border-radius:0 8px 8px 0;
  padding:10px 13px;
  font-size:12px;
  margin-bottom:16px;
}
.reply-context p {
  margin:4px 0 0;
  color:var(--muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.sensitive-post {
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:9px;
  padding:3px 12px;
  margin:12px 0;
}
.sensitive-post summary {
  overflow-wrap:anywhere;
  line-height:1.7;
}
.sensitive-post summary span {
  font-size:10px;
  font-weight:650;
  margin-left:8px;
  white-space:nowrap;
  color:var(--ink);
}
.sensitive-post .hide-label,.sensitive-post[open] .show-label {
  display:none;
}
.sensitive-post[open] .hide-label {
  display:inline;
}
summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:24px;
}
.notification-preview {
  display:block;
  text-align:left;
  background:transparent;
  padding:5px 0;
  overflow-wrap:anywhere;
  line-height:1.8;
}
.notification-preview span {
  display:block;
  color:var(--ink);
  font-size:11px;
  margin-top:5px;
}
.notification-preview:hover span {
  text-decoration:underline;
  text-underline-offset:3px;
}
.focused-post {
  border-left:2px solid var(--accent);
  padding-left:16px;
  margin:10px 0;
}
.focused-post .post-text {
  font-size:16px;
}
.delivery-notice {
  padding:14px;
  border:1px solid var(--accent);
  border-radius:9px;
  font-size:12px;
}
.mobile-tools {
  display:none;
}
dialog {
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
}
@media(max-width:680px) {
  .page-header {
    gap:10px;
  }
  .page-header>div:first-child {
    min-width:0;
  }
  .page-header h1 {
    font-size:23px;
  }
  .header-flower {
    display:none;
  }
  .mobile-tools {
    display:flex;
    flex-shrink:0;
    gap:3px;
  }
  .mobile-tools [data-action="compose"] {
    background:var(--button);
    color:var(--button-ink);
    border-radius:12px;
  }
  .profile-bio,.post-text {
    font-size:14px;
  }
  .nav-item {
    font-size:9px;
  }
  .profile-actions {
    gap:4px;
  }
  .profile-actions .icon-button {
    width:36px;
    height:40px;
  }
  .profile-actions .secondary-button {
    font-size:11px;
    padding:8px 10px;
  }
  .profile-top {
    min-height:56px;
  }
  .avatar.large {
    width:74px;
    height:74px;
  }
  .form-field input,.form-field textarea,.form-field select,.search-input,.compose-card textarea,.content-warning {
    font-size:16px;
  }
  .toast {
    bottom:calc(83px + env(safe-area-inset-bottom));
  }
  .compose-card {
    padding:13px;
  }
  .compose-footer .primary-button {
    padding:9px 10px;
    font-size:11px;
  }
  .compose-footer .primary-button svg {
    display:none;
  }
  .compose-footer {
    gap:5px;
  }
  .char-count {
    font-size:9px;
  }
  .compose-footer select {
    font-size:11px;
    max-width:89px;
  }
}
@media(max-width:360px) {
  main {
    padding-left:14px;
    padding-right:14px;
  }
  .profile-details {
    padding-left:13px;
    padding-right:13px;
  }
  .page-header h1 {
    font-size:21px;
  }
  .post-layout {
    gap:9px;
  }
  .post-layout>.avatar {
    height:33px;
    width:33px;
  }
  .compose-footer {
    flex-wrap:wrap;
  }
}

/* Compact owner tools share the same quiet surfaces as the timeline. */
.owner-card .quiet-link,.side-section .quiet-link {
  display:flex;
  justify-content:space-between;
  width:100%;
  text-align:left;
  background:transparent;
  padding:10px 0;
}
.profile-stats .text-button {
  padding:0;
  font-size:inherit;
  color:inherit;
}
.profile-stats .text-button:hover { text-decoration:underline; }
.account-info { min-width:0; overflow-wrap:anywhere; }
.account-result { flex-wrap:wrap; }
.notification-time { display:block; color:var(--muted); font-size:11px; margin:6px 0; }
.delivery-card,.moderation-card {
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.delivery-heading { display:flex; justify-content:space-between; gap:12px; }
.delivery-heading span { color:var(--muted); font-size:12px; }
.delivery-destination { overflow-wrap:anywhere; font-size:13px; }
.connection-tabs { flex-wrap:wrap; }
.moderation-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.moderation-controls label { display:flex; align-items:center; gap:7px; font-size:12px; }
.moderation-controls input { width:18px; height:18px; accent-color:var(--accent); }

/* Photos remain part of the composer, with room for useful descriptions. */
.photo-picker {cursor:pointer;font-size:.82rem;font-weight:650;white-space:nowrap;padding:.5rem .4rem;border-radius:8px}
.photo-picker:focus-within {outline:2px solid currentColor;outline-offset:2px}
.photo-help {font-size:.72rem;color:var(--muted);margin:.65rem 0 0}
.photo-progress {font-size:.85rem;margin:0;color:var(--muted)}
.photo-progress:empty {display:none}
.draft-photos {display:grid;gap:12px;margin:12px 0}
.draft-photos:empty {display:none}
.draft-photo {display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.draft-photo img {width:104px;height:104px;object-fit:cover;border-radius:9px;display:block}
.photo-details {min-width:0}
.photo-details label {display:block;font-size:.8rem;font-weight:650}
.photo-details label span {font-weight:400;color:var(--muted);margin-left:6px}
.photo-details textarea {display:block;width:100%;min-height:54px;resize:vertical;border:0;background:transparent;color:inherit;font:inherit;font-weight:400;margin-top:7px}
.photo-details .text-button {font-size:.75rem;margin-top:6px}
@media(max-width:600px) {.compose-footer{flex-wrap:wrap;gap:6px}.draft-photo{grid-template-columns:76px minmax(0,1fr)}.draft-photo img{width:76px;height:88px}.photo-details label span{display:none}}

.profile-photo-editor { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.profile-photo-summary { display: flex; align-items: center; gap: 20px; }
.profile-photo-summary > div { display: grid; justify-items: start; gap: 8px; }
.profile-photo-summary .form-help { margin: 0; }
.profile-photo-editor [data-avatar-crop] { margin-top: 20px; text-align: center; }
.profile-photo-editor canvas { display: block; width: min(100%, 180px); height: auto; margin: 0 auto; border-radius: 50%; background: var(--paper); cursor: grab; touch-action: none; }
.profile-photo-editor canvas:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 13px; }
.crop-zoom input { width: min(70%, 220px); accent-color: var(--accent); }
.profile-photo-editor [data-avatar-status]:empty { display: none; }

.profile-photo-summary > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.profile-photo-summary .form-help { flex-basis: 100%; }
.profile-photo-editor [data-avatar-status] { margin-bottom: 0; }
.profile-save { position: sticky; bottom: -25px; margin: 0 -25px -25px; padding: 16px 25px 25px; background: var(--paper); border-top: 1px solid var(--line); z-index: 1; }
.profile-save .primary-button { width: 100%; justify-content: center; }

/* The public profile is a reading surface, independent of the owner workspace. */
body.profile-view { --bg:#fff; --paper:#fff; --ink:#141518; --muted:#686d77; --line:#e6e7eb; --accent:#151619; --button:#151619; --button-ink:#fff; --wash:#f7f7f8; color-scheme:light; background:#fff; color:var(--ink); }
.profile-view .sidebar,.profile-view .rightbar,.profile-view .page-header { display:none; }
.profile-view .app-shell { display:block; width:100%; max-width:none; min-height:100vh; }
.profile-view main { border:0; width:100%; max-width:1220px; margin:0 auto; padding:0 32px; min-width:0; }
.public-masthead { min-height:112px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.public-wordmark { font-size:21px; font-weight:750; letter-spacing:-.8px; text-decoration:none; color:var(--ink); }
.public-masthead > div { display:flex; align-items:center; gap:24px; font-size:12px; }
.public-masthead > div a { color:var(--muted); text-decoration:none; }
.public-profile-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; padding-top:22px; }
.profile-view .profile-card { border:0; border-radius:0; background:none; padding:0 0 32px; margin:0; overflow:visible; }
.profile-view .profile-details { padding:0; }
.profile-view .avatar.large { width:96px; height:96px; border:0; border-radius:50%; margin:0 0 26px; object-fit:cover; }
.profile-view .profile-name { font-family:inherit; font-size:32px; font-weight:700; line-height:1.15; letter-spacing:-1px; margin:0 0 12px; }
.profile-view .profile-details > .handle { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; overflow-wrap:anywhere; }
.profile-view .profile-bio { margin:30px 0; font-size:15px; line-height:1.6; }
.profile-view .profile-stats { display:flex; gap:0; margin:30px 0 24px; padding:22px 0 0; border-top:1px solid var(--line); font-size:12px; justify-content:space-between; align-items:start; }
.profile-view .profile-stats > * { display:block; text-align:left; color:var(--muted); font-size:12px; padding:0 10px 0 0; }
.profile-view .profile-stats strong { display:block; font-size:15px; font-weight:600; color:var(--ink); margin:0 0 6px; }
.profile-view .profile-actions { display:grid; gap:12px; }
.profile-view .profile-actions .primary-button { width:100%; border-radius:3px; min-height:44px; justify-content:center; }
.profile-view .profile-actions .text-button { font-size:12px; justify-self:start; }
.profile-stream { min-width:0; border-left:1px solid var(--line); padding-left:40px; }
.profile-view .feed-tabs { margin:0; gap:30px; border-bottom:1px solid var(--line); padding:0; }
.profile-view .feed-tab { font-size:14px; padding:0 0 20px; min-height:44px; }
.profile-view .post { border-radius:0; padding:28px 0; background:none; border:0; border-bottom:1px solid var(--line); }
.profile-view .post-layout { gap:14px; }
.profile-view .post .avatar { width:40px; height:40px; border-radius:50%; }
.profile-view .post-heading { flex-wrap:wrap; gap:4px 10px; }
.profile-view .post-heading .handle { font-size:12px; }
.profile-view .post-text { font-size:16px; line-height:1.65; margin-top:14px; }
.profile-view .post-media { margin-top:16px; border-radius:3px; }
.profile-view .post-media img { max-height:620px; object-fit:contain; background:#fafafa; border-radius:3px; }
.profile-view .post-actions { margin-top:18px; }
.profile-view .feed-end { padding:28px 0; font-size:11px; }
.profile-view .empty-symbol { display:none; }
.profile-view .empty-state { padding:60px 20px; }
.profile-view .empty-state h2 { font-family:inherit; font-size:20px; font-weight:600; line-height:1.4; }
.public-footer { padding:64px 0 28px; text-align:center; color:var(--muted); font-size:11px; }
.public-hero { margin:8px 0 30px; }
.public-hero img { width:100%; aspect-ratio:3/1; max-height:340px; object-fit:cover; display:block; border-radius:3px; }
@media(max-width:760px) {
 .profile-view main { padding:0 22px; }
 .public-masthead { min-height:80px; }
 .public-masthead > div { gap:14px; }
 .public-masthead > div a:last-child { display:none; }
 .public-profile-layout { display:block; padding-top:12px; }
 .profile-view .avatar.large { width:72px; height:72px; margin-bottom:18px; }
 .profile-view .profile-name { font-size:28px; }
 .profile-view .profile-bio { margin:20px 0; }
 .profile-view .profile-stats { max-width:300px; margin:20px 0; padding-top:18px; }
 .profile-view .profile-actions { grid-template-columns:minmax(120px,1fr) auto; align-items:center; gap:14px; }
 .profile-view .profile-card { padding-bottom:30px; }
 .profile-stream { border-left:0; padding-left:0; }
 .profile-view .post-heading .handle { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
 .profile-view .post-layout { gap:10px; }
 .profile-view .post .avatar { width:32px; height:32px; }
 .profile-view .post-text { font-size:15px; }
 .public-footer { padding-top:36px; }
}
.profile-photo-editor[data-profile-role="header"] canvas { width:100%; border-radius:3px; }
.profile-photo-editor[data-profile-role="header"] .avatar { width:120px; height:40px; border-radius:3px; }
.storage-panel { padding:24px; border:1px solid var(--line); border-radius:12px; margin-bottom:24px; }
.storage-panel h2 { font-size:18px; margin:0 0 24px; }
.storage-panel label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; }
.storage-panel label span { font-weight:400; color:var(--muted); }
.storage-panel progress { width:100%; height:8px; accent-color:var(--accent); }
.storage-panel p { margin:12px 0 24px; }
.storage-panel p:last-child { margin-bottom:0; }
@media(min-width:761px) {
 .profile-view main { max-width:1350px; }
 .public-profile-layout { grid-template-columns:290px minmax(0,1fr); padding-left:24px; padding-right:24px; }
 .profile-view .avatar.large { width:120px; height:120px; margin-bottom:34px; }
 .profile-view .profile-bio { font-size:16px; }
 .profile-view .profile-details > .handle { font-size:13px; }
 .profile-view .feed-tab { font-size:16px; }
 .profile-view .profile-actions .primary-button { font-size:15px; min-height:48px; }
 .profile-view .post { padding-top:36px; }
 .profile-view .post-layout { display:grid; grid-template-columns:60px minmax(0,1fr); gap:0 18px; }
 .profile-view .post .avatar { width:60px; height:60px; }
 .profile-view .post-main { display:contents; }
 .profile-view .post-heading { grid-column:2; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; column-gap:16px; }
 .profile-view .post-heading strong { font-size:18px; }
 .profile-view .post-heading .handle { grid-column:1; font-size:13px; }
 .profile-view .post-date { grid-column:2; grid-row:1; font-size:12px; align-self:start; }
 .profile-view .post-text,.profile-view .post-media,.profile-view .post-actions,.profile-view .post-main > details { grid-column:1 / -1; }
 .profile-view .post-text { font-size:18px; margin-top:18px; }
 .profile-view .post-actions { min-width:0; }
}


/* Owner workspace: the same restrained typography and surfaces as the profile. */
body:not(.profile-view) .brand-mark,
body:not(.profile-view) .brand-caption,
body:not(.profile-view) .nav-caption,
body:not(.profile-view) .server-note,
body:not(.profile-view) .page-header .eyebrow,
body:not(.profile-view) .header-flower,
body:not(.profile-view) .empty-symbol { display:none; }
body:not(.profile-view) .brand { font-size:22px; letter-spacing:-1px; }
body:not(.profile-view) .sidebar nav { margin-top:54px; }
body:not(.profile-view) .nav-item { border-radius:6px; font-size:14px; }
body:not(.profile-view) .nav-item.active { background:var(--wash); color:var(--ink); font-weight:650; }
body:not(.profile-view) .nav-item.active::after { display:none; }
body:not(.profile-view) .compose-button { border-radius:6px; box-shadow:none; margin-top:24px; }
body:not(.profile-view) .page-header { padding:24px 0 18px; }
body:not(.profile-view) .page-header h1 { font-size:26px; font-weight:650; letter-spacing:-.8px; margin:0; }
body:not(.profile-view) .compose-card { border-radius:8px; padding:14px; }
body:not(.profile-view) .compose-card textarea { font-size:16px; }
body:not(.profile-view) .compose-row textarea { min-height:64px; height:64px; line-height:1.5; }
body:not(.profile-view) .primary-button,body:not(.profile-view) .secondary-button { border-radius:6px; }
body:not(.profile-view) .post { padding:16px 0; }
body:not(.profile-view) .post-heading { font-size:14px; }
body:not(.profile-view) .post-heading .handle,body:not(.profile-view) .post-date { font-size:12px; }
body:not(.profile-view) .post-text { font-size:16px; line-height:1.6; margin:6px 0 8px; }
body:not(.profile-view) .post-text > :first-child { margin-top:0; }
body:not(.profile-view) .post-text > :last-child { margin-bottom:0; }
body:not(.profile-view) .feed-heading h2 { margin:6px 0; }
body:not(.profile-view) .post-media { border-radius:5px; }
body:not(.profile-view) .avatar { border-radius:50%; }
body:not(.profile-view) .empty-state h2 { font-family:inherit; font-size:20px; font-weight:600; letter-spacing:-.4px; }
body:not(.profile-view) .empty-state p { font-size:13px; }
.workspace-section { padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.workspace-section h2 { font-size:12px; font-weight:600; color:var(--muted); margin:0 0 16px; }
.workspace-section .quiet-link { background:none; width:100%; min-height:44px; font-size:13px; font-weight:500; padding:8px 0; color:var(--ink); text-align:left; }
.workspace-section .quiet-link:hover { text-decoration:underline; text-underline-offset:4px; }
.workspace-section .quiet-link span { color:var(--muted); }
.workspace-section .server-address { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
body:not(.profile-view) .side-footer { margin:0; padding:0; border:0; font-size:11px; }
@media(min-width:1031px) {
  body:not(.profile-view) .app-shell { max-width:1370px; grid-template-columns:210px minmax(0,1fr) 210px; gap:38px; }
  body:not(.profile-view) main { padding-left:32px; padding-right:32px; }
  body:not(.profile-view) .rightbar { padding-top:46px; }
}
@media(max-width:680px) {
  body:not(.profile-view) .sidebar nav { margin-top:0; }
  body:not(.profile-view) .nav-item { font-size:9px; }
  body:not(.profile-view) .page-header { padding:18px 0 14px; }
  body:not(.profile-view) .page-header h1 { font-size:24px; }
  body:not(.profile-view) .compose-card { padding:14px; }
  body:not(.profile-view) .post-text { font-size:15px; }
  body:not(.profile-view) .post-heading .handle { font-size:11px; }
}

body:not(.profile-view) .feed-end span { display:none; }
.modal-top h2 { font-family:inherit; font-size:22px; font-weight:600; letter-spacing:-.5px; }

/* Audience and privacy controls stay close to the action they affect. */
.privacy-panel { border-bottom: 1px solid var(--line); padding: 0 0 28px; margin-bottom: 28px; }
.privacy-panel h2 { font-size: 20px; margin-bottom: 20px; }
.check-field { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; }
.check-field input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ink); }
.check-field small { display: block; color: var(--muted); font-size: 13px; margin-top: 5px; }
.profile-link-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.profile-links { margin: 18px 0; font-size: 13px; overflow-wrap: anywhere; }
.profile-links > div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.profile-links dt { color: var(--muted); }
.profile-links dd { margin: 4px 0 0; }
.verified-link { color: #276448; }
.recipient-picker { margin: 0 0 16px; }
.recipient-picker[hidden] { display: none; }
.field-label { font-size: 13px; font-weight: 600; }
.recipient-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.recipient-chip { display: inline-flex; gap: 8px; align-items: center; max-width: 100%; overflow-wrap: anywhere; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.recipient-chip button { border: 0; background: transparent; color: inherit; font-size: 18px; padding: 0 4px; min-height: 28px; }
.recipient-option { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 12px 4px; }
.recipient-option:hover, .recipient-option:focus-visible { background: var(--wash); }
.recipient-option span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.recipient-results { font-size: 13px; }
.post-audience { color: var(--muted); font-size: 11px; margin: 4px 0 8px; grid-column: 2; }
.post-audience span { display: block; overflow-wrap: anywhere; margin-top: 4px; }
.post-menu { position: relative; margin-left: auto; }
.post-menu summary { list-style: none; cursor: pointer; padding: 8px; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; color: var(--muted); font-size: 12px; }
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu > div { position: absolute; bottom: 100%; right: 0; z-index: 5; width: 160px; border: 1px solid var(--line); background: var(--paper, #fff); box-shadow: 0 6px 20px #0001; border-radius: 8px; padding: 6px; }
.post-menu button { width: 100%; padding: 10px; color: var(--ink); background: transparent; border: 0; text-align: left; }
.post-menu button:hover { background: var(--wash); }
.remove-follower { margin: -8px 0 20px 58px; }
.connection-tabs { overflow-x: auto; }
.connection-tabs .feed-tab { white-space: nowrap; }
@media(max-width: 760px) {
  .profile-link-row { grid-template-columns: 1fr; gap: 0; }
  .post-actions { gap: 3px; }
  .account-result { flex-wrap: wrap; }
  .account-result .account-info { min-width: 120px; }
  #navigation { overflow-x: auto; }
  #navigation .nav-item { flex-shrink: 0; }
}

/* Style the closed control consistently; keep native menus and keyboard behavior. */
.form-field select, .compose-footer select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 40px 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364676e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  color: var(--ink);
  line-height: 1.5;
  cursor: pointer;
}
:root[data-theme="dark"] .form-field select,
:root[data-theme="dark"] .compose-footer select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23acafb8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form-field select:hover:not(:disabled), .compose-footer select:hover:not(:disabled) { border-color: var(--muted); }
.form-field select:disabled, .compose-footer select:disabled { opacity: .55; cursor: not-allowed; }
@media (forced-colors: active) {
  .form-field select, .compose-footer select { -webkit-appearance: auto; appearance: auto; background-image: none; }
}
#privacy-form { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
#privacy-form > label, #privacy-form > p { flex-basis: 100%; }
#privacy-form > button { min-height: 44px; margin-top: 8px; margin-bottom: 8px; }
.compose-footer { flex-wrap: wrap; }
.compose-footer select { min-width: 164px; font-size: 13px; }
@media(max-width: 760px) {
  .compose-footer select { min-width: 186px; font-size: 16px; }
}

/* Progressive controls keep everyday posting compact. */
.compose-options { margin-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.compose-options summary { cursor: pointer; color: var(--muted); padding: 8px 0; }
.compose-option-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:10px 14px; padding-top:4px; }
.compose-option-grid > .check-field, .compose-option-grid > [data-poll-fields], .compose-option-grid > p { grid-column:1 / -1; }
.compose-option-grid .form-field, .compose-option-grid .check-field { margin:0; min-width:0; }
.compose-option-grid .check-field { min-height:32px; align-items:center; }
.compose-option-grid .form-field small { display:block; color:var(--muted); margin-top:4px; }
.compose-option-grid input[type="datetime-local"] { min-width:0; min-height:44px; padding:10px 12px; }
.compose-option-grid .form-inline { margin-top:10px; }
.compose-option-grid .photo-help { margin:0; }
@media(max-width:760px) { .compose-options summary { min-height:44px; } }
.compose-option-grid [hidden] { display: none; }
.form-inline { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.form-inline > * { flex: 1; min-width: 150px; }
.tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.tool-grid button { text-align: left; }
.feature-tools { padding: 24px 0; border-top: 1px solid var(--line); }
.feature-tools h2 { margin: 0 0 20px; }
.management-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.management-row p { margin: 5px 0; font-size: 13px; color: var(--muted); }
.scheduled-row { display: block; }
.poll { margin-top: 16px; }
.poll fieldset { border: 0; padding: 0; margin: 0; }
.poll-option { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 7px 0; }
.poll-option span { flex: 1; }
.poll-option progress { flex-basis: 100%; height: 5px; width: 100%; accent-color: var(--ink); }
.poll-footer { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.poll-footer small { color: var(--muted); }
.quoted-post { border: 1px solid var(--line); border-radius: 10px; margin: 16px 0; padding: 16px; font-size: 14px; }
.quoted-post p { white-space: pre-wrap; overflow-wrap: anywhere; }
.custom-emoji { width: 1.3em; height: 1.3em; vertical-align: -.25em; object-fit: contain; display: inline-block; }
.emoji-list > div { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.mention-suggestions:empty { display: none; }
.mention-suggestions { position: absolute; top: 100%; right: 0; left: 50px; z-index: 4; background: var(--bg); border: 1px solid var(--line); padding: 8px; border-radius: 8px; box-shadow: 0 8px 24px #0002; }
.compose-row { position: relative; }
.live-update { display: block; width: 100%; padding: 12px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: var(--wash); cursor: pointer; }
.keyword-warning { padding: 16px; border-bottom: 1px solid var(--line); }
.keyword-warning > summary { cursor: pointer; }
@media(max-width:760px) { .tool-grid { grid-template-columns: 1fr; } .management-row { flex-wrap: wrap; } }

.filter-contexts { border: 0; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.filter-contexts legend { margin-bottom: 10px; }
.draft-photo > video, .draft-photo > audio { width: 100%; max-height: 200px; }

/* A like has a clear filled state in both themes. */
.post-action[data-action="favourite"][aria-pressed="true"] { color:#b71954; background:#fff0f5; }
.post-action[data-action="favourite"][aria-pressed="true"] svg { fill:currentColor; fill-opacity:1; }
:root[data-theme="dark"] .post-action[data-action="favourite"][aria-pressed="true"] { color:#ff81ad; background:#432432; }

html.lightbox-open { overflow:hidden; }
.post-media a[data-lightbox] { cursor:zoom-in; }
dialog.media-lightbox { width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:16px;border:0;border-radius:0;background:#111318f5;color:#fff;box-shadow:none; }
.media-lightbox::backdrop { background:#111318; }
.media-lightbox[open] { display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px; }
.lightbox-toolbar {display:flex;align-items:center;justify-content:space-between;}
.lightbox-button {display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #ffffff50;border-radius:50%;background:#ffffff0d;color:#fff;}
.lightbox-button:hover {background:#ffffff25;}
.lightbox-button:focus-visible {outline:2px solid #fff;outline-offset:3px;}
.lightbox-button[hidden] {display:none;}
.lightbox-figure {margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px;}
.lightbox-image {display:block;min-height:0;max-height:100%;max-width:100%;object-fit:contain;flex:1;}
.lightbox-image[hidden] {display:none;}
.lightbox-caption {flex:none;max-width:80ch;max-height:20vh;overflow:auto;text-align:center;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
.lightbox-navigation {display:flex;justify-content:center;gap:24px;}
[data-lightbox-prev] svg {transform:rotate(180deg);}
.lightbox-error {text-align:center;}
.lightbox-position {font-size:14px;}

.conversation-link,.thread-parent { display:flex;align-items:center;gap:6px;color:var(--muted);background:none;font:inherit;font-size:12px;text-align:left; }
.conversation-link { min-height:36px;padding:4px 0; }
.thread-parent { padding:4px 0;margin:0 0 4px; }
.conversation-link svg,.thread-parent svg {width:15px;height:15px;}
.conversation-link:hover,.thread-parent:hover {color:var(--ink);text-decoration:underline;}
.conversation-toolbar {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.conversation-toolbar .text-button {display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 0;}
.conversation-toolbar svg {width:18px;height:18px;}
.conversation-replies,.conversation-ancestors {margin-top:16px;}
.conversation-reply {margin-left:calc(var(--reply-depth)*16px);border-left:2px solid var(--line);padding-left:12px;}
.conversation-note,.conversation-empty {font-size:13px;color:var(--muted);margin:12px 0;}
.focused-post {border-top:2px solid var(--ink);}
@media(max-width:600px) { .conversation-reply {margin-left:calc(var(--reply-depth)*8px);padding-left:8px;} }

/* Remote profiles stay in the owner workspace. */
.avatar-link {display:block;width:fit-content;height:fit-content;border-radius:50%;flex-shrink:0}
.remote-profile {padding-bottom:20px;border-bottom:1px solid var(--line)}
.remote-cover {width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:16px}
.remote-identity {display:flex;align-items:center;gap:16px;min-width:0}
.remote-identity h2 {font-size:24px;line-height:1.2;letter-spacing:-.03em;margin:0 0 6px;overflow-wrap:anywhere}
.remote-identity .handle {margin:0;overflow-wrap:anywhere}
.remote-bio {margin:16px 0;font-size:15px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.remote-profile-actions {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.remote-profile-actions .text-button {display:flex;align-items:center;gap:6px;min-height:44px}
.remote-profile-actions svg {width:18px;height:18px}
.remote-profile [data-account-status] {margin:12px 0 0}
@media(max-width:600px) {.remote-cover {height:120px}.remote-identity h2 {font-size:21px}}

/* Compact feed rhythm: metadata shares a row, with no extra conversation row. */
.post-meta {display:flex;align-items:center;justify-content:space-between;gap:8px;grid-column:1 / -1}
.post-meta .post-audience {margin:0;min-width:0}
.post-meta .conversation-link {flex-shrink:0;font-size:11px;min-height:28px;padding:2px 0}
body:not(.profile-view) .post {padding:10px 0}
body:not(.profile-view) .post-layout {gap:10px}
body:not(.profile-view) .post-text {line-height:1.5;margin:2px 0 4px}
body:not(.profile-view) .post-text p {margin:8px 0}
body:not(.profile-view) .post-text > :first-child {margin-top:0}
body:not(.profile-view) .post-text > :last-child {margin-bottom:0}
body:not(.profile-view) .post-media {margin:6px 0}
body:not(.profile-view) .post-actions {margin:0 -5px -4px;gap:4px}
body:not(.profile-view) .post-action,body:not(.profile-view) .post-metric {min-height:36px}
body:not(.profile-view) .post-menu summary {min-height:36px;padding:4px 8px}
body:not(.profile-view) .post-reason {margin-bottom:4px}
body:not(.profile-view) .thread-parent {padding:0;margin:0 0 2px;font-size:11px}
body:not(.profile-view) .feed-heading {margin-top:6px}
body:not(.profile-view) .page-header {padding:16px 0 12px}
body:not(.profile-view) .compose-card {padding:10px 12px}
body:not(.profile-view) .compose-row {padding-bottom:8px;gap:10px}
body:not(.profile-view) .compose-row textarea {min-height:48px;height:48px}
body:not(.profile-view) .compose-footer {padding-top:8px}
body:not(.profile-view) .compose-options {margin-top:4px}
body:not(.profile-view) .compose-options summary {padding:6px 0}
@media(pointer:coarse) {
  body:not(.profile-view) .post-action,body:not(.profile-view) .post-metric,
  body:not(.profile-view) .post-menu summary {min-height:44px}
  .post-meta .conversation-link {min-height:32px}
}
.remote-identity .avatar.large {margin:0;border:0;width:64px;height:64px;object-fit:cover;flex-shrink:0}
.remote-identity > div {min-width:0}


/* Settings share the feed's compact rhythm without hiding controls. */
.settings-page {font-size:14px;line-height:1.5;min-width:0}
.settings-page > section {padding:16px 0;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0}
.settings-page > section:last-child {border-bottom:0}
.settings-page h2 {font-size:16px;font-weight:650;letter-spacing:-.2px;margin:0 0 10px}
.settings-page .settings-shortcuts {padding-bottom:12px;border-bottom:1px solid var(--line)}
.settings-page .settings-actions {gap:6px 10px;align-items:center}
.settings-page .primary-button,.settings-page .secondary-button {min-height:36px;padding:7px 12px;font-size:12px}
.settings-page .text-button {min-height:36px;padding:6px 0;font-size:12px}
.settings-page .check-field {margin:10px 0;gap:10px}
.settings-page .check-field input {flex-shrink:0}
.settings-page .check-field small {margin-top:2px;font-size:12px;line-height:1.45}
.settings-page .form-field {margin:10px 0;font-size:12px;min-width:0}
.settings-page .form-field input,.settings-page .form-field select {min-height:38px;padding:8px 10px;margin-top:4px;border-radius:6px}
.settings-page .form-field select {padding-right:36px}
.settings-page .form-help {font-size:12px;line-height:1.5;margin:6px 0 12px}
.settings-page .profile-link-headings,.settings-page .profile-link-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px}
.settings-page .profile-link-headings {font-size:12px;color:var(--muted);margin-bottom:4px}
.settings-page .profile-link-row {margin-bottom:6px}
.settings-page .profile-link-row .form-field,.settings-page .profile-link-row input {margin:0}
.settings-page .tool-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.settings-page .tool-grid button {display:flex;align-items:center;justify-content:space-between;gap:8px}
.settings-page .tool-grid button::after {content:'';width:5px;height:5px;flex-shrink:0;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:rotate(45deg);margin-right:3px}
.settings-page .storage-panel label {gap:6px;font-size:12px}
.settings-page .storage-panel progress {height:5px}
.settings-page .storage-panel p:last-child {margin-bottom:0}
.settings-page .stat-grid {grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin-bottom:12px}
.settings-page .stat-box {padding:10px 12px;border-radius:6px;background:var(--wash)}
.settings-page .stat-box strong {font-size:18px;font-weight:600;letter-spacing:-.4px}
.settings-page .stat-box span {display:block;font-size:11px;line-height:1.4;margin-top:3px}
.settings-page .settings-server h2 {display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.settings-page .settings-version {font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}
.settings-page .small-note:empty {display:none}
@media(pointer:coarse) {
  .settings-page .primary-button,.settings-page .secondary-button,.settings-page .text-button,
  .settings-page .form-field input,.settings-page .form-field select {min-height:44px}
  .settings-page .check-field {min-height:44px}
}
@media(max-width:480px) {
  .settings-page > section {padding:14px 0}
  .settings-page .form-field input,.settings-page .form-field select {font-size:16px}
  .settings-page .tool-grid button {padding:8px;font-size:12px}
}


/* Account headers keep the focus on the person's posts. */
.remote-profile {padding-bottom:10px}
.remote-cover {height:112px;margin-bottom:10px;border-radius:6px}
.remote-identity {gap:10px}
.remote-identity .avatar.large {width:48px;height:48px}
.remote-identity h2 {font-size:20px;margin-bottom:3px}
.remote-bio {margin:10px 0;font-size:14px;line-height:1.5}
.remote-profile .profile-links {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin:10px 0;font-size:12px;line-height:1.4}
.remote-profile .profile-links > div {min-width:0;padding:6px 0}
.remote-profile .profile-links dd {margin:2px 0 0}
.remote-profile-actions {gap:12px;margin-top:8px}
.remote-profile-actions .secondary-button,.remote-profile-actions .text-button {min-height:36px;font-size:12px;padding:6px 0}
.remote-profile-actions .secondary-button {padding:6px 12px}
.remote-profile [data-account-status] {margin:6px 0 0;font-size:11px;line-height:1.4}
@media(max-width:600px) {
  .remote-cover {height:88px}
  .remote-identity h2 {font-size:19px}
  .remote-profile .profile-links > div {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px}
  .remote-profile .profile-links {grid-template-columns:1fr}
  .remote-profile .profile-links dd {margin:0}
}
@media(pointer:coarse) {
  .remote-profile-actions .secondary-button,.remote-profile-actions .text-button {min-height:44px}
}


.mobile-compose,.mobile-nav-label {display:none}
@media(max-width:680px) {
  .sidebar {padding-left:4px;padding-right:4px}
  #navigation {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;overflow:visible;align-items:center}
  #navigation .nav-item {min-width:0;min-height:48px;padding:4px 0}
  #navigation .nav-item[data-view="notifications"] > span:not(.mobile-nav-label),
  #navigation .nav-item[data-view="bookmarks"] > span:not(.mobile-nav-label) {display:none}
  #navigation .mobile-nav-label {display:block}
  .mobile-compose {display:grid;place-items:center;justify-self:center;width:44px;height:44px;padding:0;border:0;border-radius:14px;background:var(--button);color:var(--button-ink)}
  .mobile-compose svg {width:24px;height:24px}
  .mobile-compose:hover {filter:brightness(.9)}
}

/* Long-form publishing */
.blog-compose { padding: 0 0 16px; }
.blog-compose select { max-width: 14rem; }
.blog-page { max-width: 48rem; margin: 0 auto; padding: 32px 24px 80px; line-height: 1.75; overflow-wrap: anywhere; }
.blog-page nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 40px; }
.blog-page article { margin: 32px 0; }
.blog-page time { font-size: .85rem; opacity: .7; }
.blog-body { white-space: normal; line-height: 1.75; overflow-wrap: anywhere; }
.blog-body h1 { font-size: 1.8rem; line-height: 1.25; margin: 1rem 0; }
.blog-body h2, .blog-body h3 { margin: 1.5rem 0 .75rem; }
.blog-body p, .blog-body ul, .blog-body ol, .blog-body blockquote { margin: 1rem 0; }
.blog-body ul, .blog-body ol { padding-left: 1.5rem; }
.blog-body pre { overflow-x: auto; white-space: pre; padding: 1rem; background: #8881; }
.blog-body blockquote { border-left: 3px solid #8885; padding-left: 1rem; }
.blog-body a, .blog-page a { text-decoration: underline; }

/* Lexxy stays within the composer and inherits SoloSocial's light/dark palette. */
lexxy-editor {
  --lexxy-color-ink: var(--ink); --lexxy-color-ink-medium: var(--muted);
  --lexxy-color-ink-light: var(--muted); --lexxy-color-ink-lighter: var(--line);
  --lexxy-color-ink-lightest: var(--wash); --lexxy-color-ink-inverted: var(--paper);
  background: var(--paper); color: var(--ink); min-width: 0; width: 100%;
  font-size: 1rem; line-height: 1.6; text-align: left;
}
.rich-compose-row { grid-template-columns: minmax(0,1fr) !important; }
.rich-compose-row > .avatar { display: none; }
lexxy-editor[hidden] { display: none !important; }
.lexxy-editor__content { min-height: 14rem; max-height: 60vh; overflow-y: auto; overflow-wrap: anywhere; }
lexxy-editor button, lexxy-editor input { font: inherit; letter-spacing: normal; }
.blog-body table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; }
.blog-body td, .blog-body th { border: 1px solid var(--line); padding: .5rem; min-width: 3rem; }
.blog-body s { text-decoration: line-through; }
.blog-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
@media (max-width:600px) { .lexxy-editor__content { min-height: 11rem; } }

.scheduled-row[data-blog-edit] { display: block; }

/* One compact writing surface, with a keyboard-accessible segmented switch. */
body:not(.profile-view) .compose-card { padding: 18px; border-radius: 14px; }
.blog-compose { padding-bottom: 14px; }
.post-type-switch { display: inline-flex; gap: 3px; padding: 4px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); min-width: 0; }
.post-type-switch label { position: relative; cursor: pointer; }
.post-type-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.post-type-switch span { display: block; padding: 8px 18px; border-radius: 7px; color: var(--muted); font-size: 13px; line-height: 20px; font-weight: 600; transition: background .15s, color .15s; }
.post-type-switch input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px #0001; }
.post-type-switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.post-type-switch label:hover span { color: var(--ink); }
.blog-title-field { display: block; margin: 20px 0 0; }
.blog-title-field[hidden] { display: none; }
.blog-title-field input { width: 100%; min-width: 0; padding: 4px 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: clamp(22px, 3vw, 28px); font-weight: 650; letter-spacing: -.035em; line-height: 1.3; }
.blog-title-field input::placeholder { color: var(--muted); opacity: .65; }
.blog-title-field input:focus-visible { outline: none; box-shadow: 0 2px 0 var(--line); }
.compose-card lexxy-editor { border-radius: 10px; --lexxy-toolbar-padding: 7px; --lexxy-editor-padding: 16px; }
.compose-card lexxy-toolbar { background: var(--wash); border-radius: 10px 10px 0 0; }
.compose-card .compose-footer { gap: 10px; padding-top: 12px; margin-top: 10px; align-items: center; }
.compose-card .compose-footer select { min-width: 120px; padding-top: 9px; padding-bottom: 9px; font-size: 13px; }
.compose-card .compose-footer .primary-button { border-radius: 8px; min-height: 40px; padding: 10px 18px; }
.compose-card .char-count { font-size: 11px; font-variant-numeric: tabular-nums; }
.compose-card .visibility-help { margin: 8px 0 0; font-size: 11px; }
.compose-card .compose-options { margin-top: 12px; }
.compose-card .compose-options summary { padding: 10px 0 2px; font-size: 12px; }
.compose-card .compose-option-grid { padding-top: 14px; }
@media (max-width:600px) {
  body:not(.profile-view) .compose-card { padding: 12px; }
  .post-type-switch { display: flex; }
  .post-type-switch label { flex: 1; text-align: center; }
  .post-type-switch span { padding: 8px 12px; }
  .blog-title-field { margin-top: 16px; }
  .compose-card .compose-footer { gap: 8px; }
  .compose-card .compose-footer select { font-size: 16px; min-width: 110px; }
  .compose-card .compose-footer .primary-button { margin-left: auto; }
}
lexxy-editor {
  --lexxy-color-canvas: var(--paper);
  --lexxy-color-text: var(--ink);
  --lexxy-color-text-subtle: var(--muted);
  --lexxy-color-selected: var(--wash);
  --lexxy-color-selected-hover: var(--line);
  --lexxy-color-code-bg: var(--wash);
  --lexxy-color-table-header-bg: var(--wash);
  --lexxy-color-table-cell-border: var(--line);
}

/* Secondary publishing controls stay compact and visually grouped. */
.compose-card .compose-options summary { display: flex; align-items: center; gap: 8px; list-style: none; padding: 12px 0 2px; font-weight: 600; }
.compose-card .compose-options summary::-webkit-details-marker { display: none; }
.compose-card .compose-options summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.compose-card .compose-options[open] summary::before { transform: rotate(45deg); }
.compose-card .compose-option-grid { gap: 12px; padding-top: 16px; }
.compose-card .poll-switch { display: flex; position: relative; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); cursor: pointer; }
.poll-switch strong { display: block; font-size: 13px; font-weight: 600; }
.poll-switch small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.poll-switch input { position: absolute; right: 20px; width: 1px; height: 1px; opacity: 0; }
.poll-switch .switch-track { flex: 0 0 34px; height: 20px; border: 1px solid var(--muted); border-radius: 20px; background: var(--paper); padding: 2px; }
.poll-switch .switch-track::after { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.poll-switch input:checked + .switch-track { background: var(--button); border-color: var(--button); }
.poll-switch input:checked + .switch-track::after { background: var(--button-ink); transform: translateX(14px); }
.poll-switch input:focus-visible + .switch-track { outline: 2px solid var(--ink); outline-offset: 3px; }
.compose-card .compose-setting { padding: 12px; border: 1px solid var(--line); border-radius: 10px; gap: 8px; font-size: 12px; font-weight: 600; }
.compose-card .compose-setting input, .compose-card .compose-setting select { font-size: 13px; min-height: 40px; padding-top: 9px; padding-bottom: 9px; font-weight: 400; }
.compose-card .compose-setting small { font-size: 11px; font-weight: 400; }
.compose-card .poll-fields { padding: 4px 12px 12px; border-bottom: 1px solid var(--line); }
.compose-card .compose-option-grid .photo-help { font-size: 10px; line-height: 1.5; color: var(--muted); padding: 0 2px; }
body:not(.profile-view) .compose-row textarea { overflow-y: hidden; resize: none; }
@media(max-width:600px) {
  .compose-card .compose-setting input, .compose-card .compose-setting select { font-size: 16px; max-width: 100%; }
}
.compose-card .compose-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media(max-width:600px) { .compose-card .compose-option-grid { grid-template-columns: minmax(0, 1fr); } }