/* ============================================================
   Dreambound — pages.css
   Page-specific layout.
   ============================================================ */

/* --- Landing hero (logged out) --------------------------- */
.hero {
  padding: var(--sp-8) 0 var(--sp-7);
  text-align: center;
}
.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-4);
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  max-width: 16ch;
  margin-inline: auto;
}
.hero h1 em {
  font-style: italic;
  color: var(--rust);
}
.hero-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 38ch;
  margin: var(--sp-5) auto 0;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* The three principles strip */
.tenets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: 1px solid var(--line);
}
.tenet h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--sp-2);
}
.tenet h3 .mark { margin-right: 4px; }
.tenet p {
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
@media (max-width: 640px) {
  .tenets { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* --- Feed ------------------------------------------------ */
.feed-head {
  padding: var(--sp-6) 0 var(--sp-4);
}
.feed-head h2 { margin-bottom: var(--sp-2); }
.feed-head .voice { font-size: 1.0625rem; }

.feed-tabs { margin-bottom: var(--sp-5); }

.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.feed-more {
  display: flex;
  justify-content: center;
  padding: var(--sp-5) 0 var(--sp-8);
}

/* Compose prompt that sits atop the feed */
.compose-prompt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  transition: border-color var(--t-fast) var(--ease);
  margin-bottom: var(--sp-5);
}
.compose-prompt:hover { border-color: var(--cream-edge); }

/* --- Single dream page ----------------------------------- */
.dream-layout {
  display: grid;
  grid-template-columns: 1fr 248px;
  gap: var(--sp-7);
  padding: var(--sp-6) 0 var(--sp-8);
  align-items: start;
}
@media (max-width: 860px) {
  .dream-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.dream-header .card-head { margin-bottom: var(--sp-4); }
.dream-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.dream-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.16;
  margin-bottom: var(--sp-4);
}
.dream-body {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  line-height: 1.7;
  white-space: pre-wrap;
}
.dream-time {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: var(--sp-4);
}

/* Section blocks */
.section {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.section-title {
  font-size: 1.25rem;
  margin-bottom: var(--sp-4);
}
.section-title .count {
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  margin-left: 6px;
}

/* Progress log — newest at bottom */
.progress-log {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.progress-note {
  display: flex;
  gap: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--cream-edge);
}
.progress-note .pn-body {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  white-space: pre-wrap;
}
.progress-note .pn-time {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 2px;
}
.progress-composer { margin-top: var(--sp-4); }

/* Ideas — threaded, one nesting level */
.idea-composer { margin-bottom: var(--sp-5); }

.idea-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.idea {
  display: flex;
  gap: var(--sp-3);
}
.idea-main { min-width: 0; flex: 1; }
.idea-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.idea-head .name {
  font-weight: 500;
  font-size: 0.9375rem;
}
.idea-head .handle,
.idea-head .time {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.idea-body {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-top: 2px;
  white-space: pre-wrap;
}
.idea-actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: 6px;
}
.idea-actions button {
  font-size: 0.75rem;
}
/* one visual nesting level */
.idea-replies {
  margin-top: var(--sp-4);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.reply-composer {
  margin-top: var(--sp-3);
  padding-left: var(--sp-5);
}

/* Dream sidebar */
.dream-aside {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.aside-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.lit-count {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--ink);
  line-height: 1;
}
.lit-count-label {
  font-size: 0.8125rem;
  color: var(--ink-mute);
  margin-bottom: var(--sp-4);
}
.aside-card .voice {
  font-size: 0.9375rem;
  display: block;
  margin-bottom: var(--sp-3);
}
@media (max-width: 860px) {
  .dream-aside { position: static; }
}

/* --- Compose page ---------------------------------------- */
.compose-page {
  padding: var(--sp-6) 0 var(--sp-8);
}
.compose-page h2 { margin-bottom: var(--sp-2); }
.compose-page .voice { display: block; margin-bottom: var(--sp-5); }
.compose-title-input {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--ink);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.compose-title-input::placeholder { color: var(--ink-faint); }
.compose-title-input:focus {
  outline: none;
  border-bottom-color: var(--amber);
}
.compose-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* --- Profile --------------------------------------------- */
.profile-head {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6) 0 var(--sp-5);
  align-items: flex-start;
}
.profile-id { flex: 1; min-width: 0; }
.profile-name {
  font-size: 1.75rem;
  margin-bottom: 2px;
}
.profile-handle {
  color: var(--ink-faint);
  font-size: 0.9375rem;
}
.profile-bio {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  max-width: 52ch;
}
@media (max-width: 560px) {
  .profile-head { flex-direction: column; gap: var(--sp-4); }
}

/* --- Inbox ----------------------------------------------- */
.inbox-page { padding: var(--sp-6) 0 var(--sp-8); }
.encouragement {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.encouragement + .encouragement { margin-top: var(--sp-3); }
.encouragement-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.encouragement-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.encouragement-ref {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* --- Settings & auth ------------------------------------- */
.narrow-page {
  max-width: 460px;
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
}
.narrow-page h2 { margin-bottom: var(--sp-2); }
.narrow-page > .voice { display: block; margin-bottom: var(--sp-5); }

.auth-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.auth-toggle {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.auth-switch {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: 0.875rem;
  color: var(--ink-mute);
}
.form-error {
  color: var(--rust);
  font-size: 0.875rem;
  margin-top: var(--sp-3);
}
.form-ok {
  color: #4c6a41;
  font-size: 0.875rem;
  margin-top: var(--sp-3);
}

/* The quiet "Forgot your password?" row under the password field */
.auth-forgot {
  text-align: right;
  margin-top: var(--sp-2);
}
.auth-card + .auth-card { margin-top: var(--sp-4); }

.settings-section + .settings-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

/* Account sub-blocks within the Account section */
.account-block + .account-block {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.account-block-title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--sp-3);
}

/* The danger area — clearly set apart, rust-accented */
.settings-danger {
  border: 1px solid color-mix(in srgb, var(--rust) 40%, var(--line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rust) 5%, var(--cream));
  padding: var(--sp-5);
}
.settings-danger h3 { color: var(--rust); }
.settings-danger .voice { color: var(--ink-mute); }

/* --- Footer ---------------------------------------------- */
.foot {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-5);
}
.foot-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.foot-spacer { flex: 1; }

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.foot-mark {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink);
}
.foot-tagline { font-size: 0.875rem; }

.foot-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.foot-link {
  color: var(--ink-mute);
  font-size: 0.8125rem;
}
.foot-link:hover { color: var(--ink); }

.foot-pledge-row {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.foot-pledge {
  max-width: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
.foot-pledge .mark { font-style: normal; }

@media (max-width: 560px) {
  .foot-end { align-items: flex-start; }
}

/* --- The trust badge (footer + reusable) ----------------- */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px 4px 9px;
  white-space: nowrap;
}
.trust-badge:hover { text-decoration: none; color: var(--ink); }
.trust-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-faint);
}
.trust-badge.is-checking .trust-badge-dot { background: var(--ink-faint); }
.trust-badge.is-verified .trust-badge-dot { background: #5c7d4f; }
.trust-badge.is-verified {
  color: #4c6a41;
  border-color: color-mix(in srgb, #5c7d4f 40%, var(--line));
}
.trust-badge.is-alarm .trust-badge-dot { background: var(--rust); }
.trust-badge.is-alarm {
  color: var(--rust);
  border-color: color-mix(in srgb, var(--rust) 45%, var(--line));
}
.trust-badge.is-unverified .trust-badge-dot { background: var(--amber); }
.trust-badge.is-unverified {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
}

/* --- Landing page pledge line ---------------------------- */
.landing-pledge {
  max-width: none;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink-mute);
  text-align: center;
}
.landing-pledge .mark { font-style: normal; }

/* --- Legal / document pages ------------------------------ */
.legal-page,
.trust-page {
  max-width: 680px;
}

.legal-doc h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  margin-bottom: var(--sp-4);
}
.legal-doc h2 {
  font-size: 1.4rem;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.legal-doc h3 {
  font-size: 1.0625rem;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.legal-doc p {
  max-width: none;
  margin-bottom: var(--sp-4);
  color: var(--ink-soft);
}
.legal-doc ul {
  list-style: disc;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.legal-doc li {
  margin-bottom: var(--sp-2);
  color: var(--ink-soft);
}
.legal-doc strong { font-weight: 600; color: var(--ink); }
.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--cream-soft);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.legal-doc hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

/* --- Support contact form -------------------------------- */
.support-contact {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.support-contact h2 {
  font-size: 1.4rem;
  margin-bottom: var(--sp-2);
}
.support-contact-lede {
  display: block;
  font-size: 1.0625rem;
  margin-bottom: var(--sp-5);
}

/* --- Trust / Data Pledge page ---------------------------- */
.trust-head { margin-bottom: var(--sp-6); }
.trust-head h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}
.trust-lead {
  max-width: none;
  margin-top: var(--sp-4);
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.trust-section {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.trust-section h2 {
  font-size: 1.4rem;
  margin-bottom: var(--sp-3);
}
.trust-section p { max-width: none; color: var(--ink-soft); }
.trust-section p + p { margin-top: var(--sp-3); }

.trust-promise-list,
.trust-promises {
  margin: var(--sp-3) 0;
}
.trust-promise-list li,
.trust-promises li {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  color: var(--ink-soft);
}
.trust-promise-list .mark,
.trust-promises .mark { flex: none; }

/* The big live verdict box */
.trust-status {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  background: var(--cream-soft);
}
.trust-status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.trust-status-text {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
}
.trust-status-note {
  max-width: none;
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
.trust-status.is-checking {
  border-color: var(--line);
}
.trust-status.is-verified {
  border-color: color-mix(in srgb, #5c7d4f 55%, var(--line));
  background: color-mix(in srgb, #5c7d4f 9%, var(--cream));
}
.trust-status.is-verified .trust-status-dot { background: #5c7d4f; }
.trust-status.is-verified .trust-status-text { color: #3f5a35; }
.trust-status.is-alarm {
  border-color: var(--rust);
  background: color-mix(in srgb, var(--rust) 9%, var(--cream));
}
.trust-status.is-alarm .trust-status-dot { background: var(--rust); }
.trust-status.is-alarm .trust-status-text { color: var(--rust); }
.trust-status.is-unverified {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, var(--cream));
}
.trust-status.is-unverified .trust-status-dot { background: var(--amber); }
.trust-status.is-unverified .trust-status-text { color: #8a551f; }

.trust-detail { margin-top: var(--sp-4); }
.trust-detail h3 {
  font-size: 1rem;
  margin-bottom: var(--sp-2);
}
.trust-checks,
.trust-reasons,
.trust-pledge-doc { margin-top: var(--sp-4); }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  margin-bottom: 6px;
  color: var(--ink-soft);
}
.check-mark {
  flex: none;
  font-weight: 600;
  width: 1.2em;
}
.check-list .check-ok .check-mark { color: #5c7d4f; }
.check-list .check-bad .check-mark { color: var(--rust); }

.trust-reasons ul {
  list-style: disc;
  padding-left: var(--sp-5);
}
.trust-reasons li {
  color: var(--rust);
  font-size: 0.9375rem;
  margin-bottom: 4px;
}

.trust-statement {
  border-left: 3px solid var(--amber);
  padding-left: var(--sp-4);
  margin: var(--sp-3) 0;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}
.trust-dates {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
}
.trust-dt-row {
  display: flex;
  gap: var(--sp-3);
  font-size: 0.875rem;
  padding: 3px 0;
}
.trust-dt-row dt {
  flex: none;
  width: 92px;
  color: var(--ink-mute);
  font-weight: 500;
}
.trust-dt-row dd { color: var(--ink-soft); }

.trust-checked-at { margin-top: var(--sp-4); }

.trust-steps {
  list-style: decimal;
  padding-left: var(--sp-5);
  margin: var(--sp-3) 0;
}
.trust-steps li {
  margin-bottom: var(--sp-3);
  color: var(--ink-soft);
}
.trust-steps strong { color: var(--ink); }

.trust-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--cream-soft);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.trust-key {
  margin-top: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.trust-key-value {
  display: block;
  word-break: break-all;
  font-size: 0.875rem;
  background: var(--cream-soft);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
}

.trust-source {
  margin-top: var(--sp-4);
  max-height: 460px;
  overflow: auto;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}
.trust-source code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.trust-foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 1rem;
}
.trust-foot .mark { font-style: normal; }

/* --- Profile: full name + social connectors -------------- */
.profile-fullname {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-mute);
  margin-top: 1px;
}

.profile-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-6);
}
.profile-link-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.profile-link-row:hover {
  text-decoration: none;
  border-color: var(--cream-edge);
  background: var(--cream-soft);
}
.profile-link-kind {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  flex: none;
  width: 84px;
}
.profile-link-label {
  font-size: 0.9375rem;
  color: var(--ink);
}
.profile-link-url {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}
@media (max-width: 560px) {
  .profile-link-row { flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
  .profile-link-url { margin-left: 0; max-width: 100%; }
}

/* --- Settings: avatar picker + links editor -------------- */
.set-avatar-preview {
  margin-bottom: var(--sp-3);
}
.set-tone-picker {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.set-tone {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.set-tone:hover { transform: scale(1.06); }
.set-tone.is-selected {
  border-color: var(--ink);
}
.set-avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: var(--sp-2);
}
.set-avatar-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.set-avatar-cell:hover {
  border-color: var(--cream-edge);
  background: var(--cream-soft);
}
.set-avatar-cell.is-selected {
  border-color: var(--rust);
  background: color-mix(in srgb, var(--rust) 6%, transparent);
}

.set-link-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-2);
}
.set-link-row .set-link-kind { flex: none; width: 124px; }
.set-link-row .set-link-label { flex: 1; min-width: 0; }
.set-link-row .set-link-url { flex: 1.4; min-width: 0; }
@media (max-width: 560px) {
  .set-link-row { flex-wrap: wrap; }
  .set-link-row .set-link-kind,
  .set-link-row .set-link-label,
  .set-link-row .set-link-url { flex: 1 1 100%; width: auto; }
}

/* --- Families: browse + my families ---------------------- */
.families-page { padding: var(--sp-6) 0 var(--sp-8); }
.families-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.families-head h2 { margin-bottom: 2px; }
.families-head .voice { font-size: 1.0625rem; flex: 1; min-width: 200px; }
.families-head-actions { flex: none; }

.families-section + .families-section {
  margin-top: var(--sp-7);
}
.families-section-title {
  font-size: 1.125rem;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.families-search { margin-bottom: var(--sp-4); }

.family-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 640px) {
  .family-grid { grid-template-columns: 1fr; }
}

.family-card .card-title { margin-top: var(--sp-1); }
.family-card-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.family-card-foot .dot { color: var(--ink-faint); }
.family-membership { color: var(--amber); }

/* --- Family detail --------------------------------------- */
.family-page { padding: var(--sp-6) 0 var(--sp-8); }
.family-head {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}
.family-id { flex: 1; min-width: 0; }
.family-name {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin: var(--sp-1) 0 var(--sp-2);
}
.family-description {
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: var(--sp-3);
}
.family-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.family-head-meta .dot { color: var(--ink-faint); }
.family-membership-line {
  margin-top: var(--sp-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--amber);
}
.family-head-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}
@media (max-width: 640px) {
  .family-head { flex-direction: column; gap: var(--sp-4); }
  .family-head-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.family-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 860px) {
  .family-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.family-share { margin-bottom: var(--sp-5); }
.family-share-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 320px;
  overflow-y: auto;
}
.family-share-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  text-align: left;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.family-share-option:hover {
  border-color: var(--cream-edge);
  background: var(--cream-soft);
}
.family-share-option-title {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}
.family-share-option-tag { flex: none; }

/* The join-requests panel */
.family-panel {
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  background: color-mix(in srgb, var(--amber) 5%, var(--cream));
}
.family-panel-title {
  font-size: 1.0625rem;
  margin-bottom: var(--sp-3);
}
.family-panel-title .count {
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
}
.family-request {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) 0;
  flex-wrap: wrap;
}
.family-request + .family-request {
  border-top: 1px solid var(--line);
}
.family-request-main { flex: 1; min-width: 160px; }
.family-request-msg {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 2px 0;
}
.family-request-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Members panel */
.family-aside-title {
  font-size: 1rem;
  margin-bottom: var(--sp-3);
}
.family-members {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.family-member {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.family-member-main { flex: 1; min-width: 0; }
.family-member-main .name {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink);
}
.family-member-menu { flex: none; }
#family-members-more { margin-top: var(--sp-3); }

.link-danger { color: var(--rust); }

/* --- The Dreamers' Library ------------------------------- */
.library-page { padding: var(--sp-6) 0 var(--sp-8); }
.library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.library-head h2 { margin-bottom: 2px; }
.library-head .voice { font-size: 1.0625rem; flex: 1; min-width: 220px; }
.library-head-actions { flex: none; }

.library-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.library-filters .tag-picker { gap: var(--sp-2); }

.library-section-title {
  font-size: 1.125rem;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 640px) {
  .library-grid { grid-template-columns: 1fr; }
}

.library-card-tags {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* The quiet "featured" award mark */
.library-featured {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.library-featured .mark { font-style: normal; }

/* My submissions + curator queue sections */
.library-mine,
.library-queue {
  margin-bottom: var(--sp-7);
}
.library-queue {
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--amber) 5%, var(--cream));
}
.library-queue .library-section-title {
  border-bottom-color: color-mix(in srgb, var(--amber) 30%, var(--line));
}

.library-sub,
.library-queue-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  background: var(--cream);
}
.library-sub + .library-sub,
.library-queue-item + .library-queue-item {
  margin-top: var(--sp-3);
}
.library-sub-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.library-sub-title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.library-sub-summary {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}
.library-sub-note {
  font-size: 0.875rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--cream-edge);
  padding-left: var(--sp-3);
  margin-top: var(--sp-2);
}
.library-sub-note-label { font-weight: 600; color: var(--ink-soft); }

/* Submission status pill */
.library-status {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-mute);
}
.library-status-pending {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
}
.library-status-accepted {
  color: #4c6a41;
  border-color: color-mix(in srgb, #5c7d4f 45%, var(--line));
}
.library-status-refused {
  color: var(--rust);
  border-color: color-mix(in srgb, var(--rust) 40%, var(--line));
}

/* Curator queue actions */
.library-queue-feature {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin-top: var(--sp-2);
}
.library-queue-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Propose modal — let a long form scroll inside the dialog */
.library-propose-form {
  max-height: 64vh;
  overflow-y: auto;
  padding-right: 2px;
}

/* The single-entry detail page */
.library-entry-page { padding: var(--sp-6) 0 var(--sp-8); }
.library-back { margin-bottom: var(--sp-4); font-size: 0.875rem; }
.library-entry-summary {
  display: block;
  font-size: 1.125rem;
  margin: var(--sp-3) 0 var(--sp-5);
  max-width: 60ch;
}
.library-entry-link {
  margin: var(--sp-5) 0;
}
.library-entry-link-url {
  margin-top: var(--sp-2);
  font-size: 0.75rem;
  color: var(--ink-faint);
  word-break: break-all;
}
.library-entry-meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.library-curator {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* --- Notifications --------------------------------------- */
.notifications-page { padding: var(--sp-6) 0 var(--sp-8); }
.notifications-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.notifications-head h2 { margin-bottom: 2px; }
.notifications-head .voice { font-size: 1.0625rem; }

.notification-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.notification {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
a.notification:hover {
  text-decoration: none;
  border-color: var(--cream-edge);
  background: var(--cream-soft);
}
.notification.is-unread {
  background: color-mix(in srgb, var(--amber) 5%, var(--cream));
  border-color: color-mix(in srgb, var(--amber) 28%, var(--line));
}
.notification-inner {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.notification-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  margin-top: 7px;
}
.notification-main { flex: 1; min-width: 0; }
.notification-title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.notification-body {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 2px;
}