:root {
  color-scheme: light;
  --bg: #f6f8f5;
  --panel: #ffffff;
  --panel-soft: #f1f5f0;
  --line: #dfe5dd;
  --line-strong: #c3cec1;
  --text: #151612;
  --ink: #151612;
  --muted: #6e746c;
  --placeholder: #71786f;
  --accent: #20231f;
  --accent-hover: #151814;
  --accent-soft: #edf2ec;
  --accent-shadow: rgba(32, 35, 31, 0.14);
  --sage: #4b6657;
  --sage-soft: #eaf3ee;
  --clay: #9a5b38;
  --clay-soft: #fbf1ea;
  --blue-soft: #edf2f8;
  --focus-ring: rgba(79, 100, 88, 0.22);
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-sm: 0 10px 30px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 18px 55px rgba(17, 17, 17, 0.12);
}

/* Commitment follow-up */
.commitment-companion-section {
  display: grid;
  gap: 22px;
  margin: 8px 0 18px;
  padding: 4px 2px;
}

.commitment-companion-section.hidden,
.commitment-companion-block.hidden {
  display: none;
}

.commitment-companion-heading,
.commitment-companion-subhead,
.commitment-companion-item-head,
.commitment-prayer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.commitment-companion-heading h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 1.24rem;
  line-height: 1.4;
}

.commitment-companion-block {
  display: grid;
  gap: 10px;
}

.commitment-companion-subhead h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.4;
}

.commitment-companion-subhead > span {
  color: var(--muted);
  font-size: 0.76rem;
}

.commitment-companion-list,
.commitment-prayer-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 10px;
}

.commitment-companion-item,
.commitment-prayer-item {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(47, 57, 48, 0.11);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(25, 30, 25, 0.045);
  outline: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.commitment-prayer-item {
  border-color: rgba(147, 86, 53, 0.14);
  background: #fffaf6;
}

.commitment-companion-item:focus-visible,
.commitment-prayer-item:focus-visible,
.commitment-companion-item.is-linked-highlight,
.commitment-prayer-item.is-linked-highlight {
  border-color: rgba(75, 102, 87, 0.55);
  box-shadow: 0 0 0 4px rgba(75, 102, 87, 0.14), 0 12px 32px rgba(25, 30, 25, 0.08);
}

.commitment-companion-item-head {
  align-items: flex-start;
}

.commitment-companion-item-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.commitment-companion-item-head span,
.commitment-audience-label,
.commitment-prayer-meta span,
.commitment-prayer-meta small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.commitment-audience-label {
  overflow-wrap: anywhere;
}

.commitment-status-label {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--sage-soft);
  color: #385344;
  font-size: 0.7rem;
  line-height: 1.3;
}

.commitment-companion-item h3,
.commitment-prayer-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.commitment-companion-item > p:not(.commitment-result),
.commitment-prayer-item > p:not(.commitment-shared-result) {
  margin: 0;
  color: #5f675f;
  font-size: 0.86rem;
  line-height: 1.62;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.commitment-check-in-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(48, 58, 49, 0.09);
  border-radius: 8px;
  background: #f0f3ef;
}

.commitment-status-button {
  min-width: 0;
  min-height: 46px;
  padding: 7px 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #626a62;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.commitment-status-button:hover,
.commitment-status-button:focus-visible {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}

.commitment-status-button.active {
  background: #ffffff;
  color: #263c2d;
  box-shadow: 0 3px 10px rgba(28, 34, 28, 0.08);
}

.commitment-result,
.commitment-shared-result {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 11px 12px;
  border-left: 2px solid #a36a48;
  background: #fbf2ec;
  color: #554037;
  font-size: 0.83rem;
  line-height: 1.58;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.commitment-result span,
.commitment-shared-result span {
  color: #895838;
  font-size: 0.7rem;
  font-weight: 800;
}

.commitment-result-button,
.commitment-unshare-button {
  justify-self: start;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #536259;
  font-size: 0.78rem;
  font-weight: 760;
  text-decoration: underline;
  text-decoration-color: rgba(83, 98, 89, 0.28);
  text-underline-offset: 4px;
  cursor: pointer;
}

.commitment-unshare-button {
  color: #815a47;
}

.commitment-result-button:hover,
.commitment-result-button:focus-visible,
.commitment-unshare-button:hover,
.commitment-unshare-button:focus-visible {
  color: var(--ink);
}

.commitment-prayer-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px 9px;
}

.commitment-prayer-meta strong {
  color: #5c4032;
  font-size: 0.78rem;
}

.commitment-prayer-meta small {
  margin-left: auto;
  color: #8a5a3f;
}

.commitment-prayer-button {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(147, 86, 53, 0.2);
  border-radius: 6px;
  background: #ffffff;
  color: #754b36;
  font-size: 0.8rem;
  font-weight: 780;
  cursor: pointer;
}

.commitment-prayer-button.active {
  border-color: rgba(75, 102, 87, 0.25);
  background: var(--sage-soft);
  color: #365240;
}

.commitment-prayer-button > span,
.commitment-prayer-button svg {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
}

.commitment-prayer-button small {
  min-width: 18px;
  color: inherit;
  font-size: 0.7rem;
  text-align: center;
}

.commitment-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(36, 43, 36, 0.08);
  background: #ffffff;
}

.commitment-create-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.commitment-create-footer > span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.commitment-create-footer .primary-button {
  flex: 0 0 auto;
  min-height: 44px;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .commitment-companion-section {
    gap: 18px;
    margin: 2px 0 12px;
    padding: 2px 0;
  }

  .commitment-companion-heading h2 {
    font-size: 1.08rem;
  }

  .commitment-companion-subhead {
    align-items: baseline;
  }

  .commitment-companion-list,
  .commitment-prayer-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .commitment-companion-item,
  .commitment-prayer-item {
    padding: 14px;
  }

  .commitment-status-button {
    min-height: 50px;
    font-size: 0.73rem;
  }

  .commitment-create-form {
    padding: 12px;
  }

  .commitment-create-footer {
    grid-column: 1;
  }

  .commitment-create-footer .primary-button {
    min-width: 126px;
  }
}

/* Scripture-linked personal record timeline */
.detail-passage-timeline-head > div > span {
  color: var(--clay);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.35;
}

.passage-memory-count {
  min-width: 42px;
  padding: 5px 7px;
  border: 1px solid rgba(75, 102, 87, 0.18);
  border-radius: 6px;
  background: var(--sage-soft);
  color: #385344;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.passage-memory-list {
  width: 100%;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passage-memory-item {
  position: relative;
  min-width: 0;
}

.passage-memory-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 27px;
  bottom: -17px;
  width: 1px;
  background: var(--line-strong);
  pointer-events: none;
}

.passage-memory-entry {
  width: 100%;
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 10px;
  padding: 10px 8px 10px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

button.passage-memory-entry {
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

button.passage-memory-entry:hover {
  background: rgba(234, 243, 238, 0.68);
}

button.passage-memory-entry:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.passage-memory-item.is-current .passage-memory-entry {
  background: rgba(251, 241, 234, 0.64);
}

.passage-memory-node {
  width: 9px;
  height: 9px;
  margin: 7px 0 0 5px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 1px rgba(75, 102, 87, 0.36);
}

.passage-memory-item.is-current .passage-memory-node {
  background: var(--clay);
  box-shadow: 0 0 0 1px rgba(154, 91, 56, 0.36);
}

.passage-memory-entry-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.passage-memory-entry-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.passage-memory-entry-meta time {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.35;
}

.passage-memory-entry-meta .content-type-badge {
  min-height: 19px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.64rem;
}

.passage-memory-current {
  color: var(--clay);
  font-size: 0.66rem;
  font-weight: 850;
}

.passage-memory-entry-copy > strong {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 820;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.passage-memory-entry-copy > small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.passage-memory-order {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.passage-memory-item.is-current .passage-memory-order {
  border-color: rgba(154, 91, 56, 0.28);
  color: var(--clay);
}

.detail-passage-timeline {
  max-width: 620px;
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding: 22px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.detail-passage-timeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.detail-passage-timeline-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.detail-passage-timeline-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.45;
  letter-spacing: 0;
}

.detail-passage-timeline-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.detail-passage-timeline-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px;
}

.detail-passage-timeline-actions button {
  min-width: 0;
  min-height: 44px;
}

@media (max-width: 640px) {
  .passage-memory-count {
    min-width: 38px;
    padding-inline: 5px;
  }

  .passage-memory-entry {
    min-height: 64px;
    padding-right: 2px;
  }

  .detail-passage-timeline {
    margin-top: 22px;
    padding: 18px 0;
  }

  .detail-passage-timeline-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  button.passage-memory-entry {
    transition: none !important;
  }
}

@media (max-width: 360px), (max-height: 680px) {
  .commitment-create-form {
    padding: 10px;
  }

  .commitment-create-footer {
    grid-column: 1;
  }

  .commitment-create-footer > span {
    display: none;
  }

  .commitment-create-footer .primary-button {
    width: 100%;
  }
}

/* New-account guide */
.onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.onboarding-modal.hidden {
  display: none;
}

.onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 20, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.onboarding-panel {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  min-height: 480px;
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: auto;
  border: 1px solid rgba(36, 43, 36, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(22, 28, 23, 0.2);
  scrollbar-width: none;
}

.onboarding-panel::-webkit-scrollbar {
  display: none;
}

.onboarding-header,
.onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
}

.onboarding-header {
  border-bottom: 1px solid var(--line);
}

.onboarding-brand {
  color: var(--sage);
  font-family: "Noto Serif KR", serif;
  font-size: 0.92rem;
  font-weight: 700;
}

.onboarding-skip {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.onboarding-copy {
  align-self: center;
  padding: 40px 40px 32px;
}

.onboarding-step-label {
  margin: 0 0 12px;
  color: var(--clay);
  font-size: 0.78rem;
  font-weight: 700;
}

.onboarding-copy h2 {
  max-width: 13em;
  margin: 0;
  color: var(--ink);
  font-size: 1.68rem;
  line-height: 1.38;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.onboarding-copy h2:focus {
  outline: none;
}

.onboarding-copy > p:not(.onboarding-step-label) {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.75;
  word-break: keep-all;
}

.onboarding-points {
  display: grid;
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.onboarding-points li {
  position: relative;
  padding-left: 20px;
  color: #394139;
  font-size: 0.86rem;
  line-height: 1.55;
}

.onboarding-points li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
}

.onboarding-footer {
  min-height: 82px;
  border-top: 1px solid var(--line);
}

.onboarding-footer > button {
  min-width: 94px;
  min-height: 44px;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 56px;
  min-height: 24px;
}

.onboarding-progress span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd2ca;
}

.onboarding-progress span.is-active {
  width: 18px;
  border-radius: 3px;
  background: var(--sage);
}

@media (prefers-reduced-motion: no-preference) {
  .onboarding-panel {
    animation: onboarding-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .onboarding-progress span {
    transition: width 160ms ease, background-color 160ms ease;
  }
}

@keyframes onboarding-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .onboarding-modal {
    place-items: end center;
    padding: max(12px, env(safe-area-inset-top)) 0 0;
  }

  .onboarding-panel {
    width: 100%;
    min-height: min(590px, calc(100dvh - max(12px, env(safe-area-inset-top))));
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .onboarding-header,
  .onboarding-footer {
    padding-right: 20px;
    padding-left: 20px;
  }

  .onboarding-copy {
    padding: 32px 24px 28px;
  }

  .onboarding-copy h2 {
    font-size: 1.48rem;
  }

  .onboarding-footer > button {
    min-width: 88px;
  }
}

@media (max-width: 360px), (max-height: 620px) {
  .onboarding-panel {
    min-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
  }

  .onboarding-copy {
    padding-top: 22px;
    padding-bottom: 20px;
  }

  .onboarding-points {
    margin-top: 16px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  overflow-anchor: none;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "SUIT", sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(248, 248, 246, 0) 240px),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-anchor: none;
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input,
select,
textarea,
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  user-select: none;
}

h1,
h2 {
  font-family: "Noto Serif KR", serif;
  letter-spacing: 0;
}

::selection {
  background: #dfe9e1;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.app-shell {
  width: min(1060px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 36px;
  display: grid;
  grid-template-columns: 150px minmax(0, 860px);
  justify-content: center;
  gap: 20px;
  overflow-anchor: none;
}

.surface {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}

.sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
  display: grid;
  justify-items: center;
}

.surface {
  border-radius: 8px;
  padding: 18px;
}

.thread-excerpt,
.detail-body,
.detail-page-body,
.provider-note,
#saveHint,
.thread-preview,
.comment-body {
  line-height: 1.7;
}

.detail-meta,
.provider-note,
#saveHint,
.thread-meta,
.thread-time,
.photo-picker-sub,
.detail-action-meta {
  color: var(--muted);
}

.sidebar-nav {
  width: 68px;
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 12px 10px;
  margin: 0;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.sidebar-brand {
  width: 99px;
  height: 69px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0 0 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(8px);
}

.sidebar-brand img {
  width: 99px;
  max-height: 69px;
  height: auto;
  object-fit: contain;
  display: block;
}

.sidebar-brand picture {
  display: grid;
  place-items: center;
}

.sidebar-feedback-label {
  width: fit-content;
  margin: 0 0 10px;
  padding: 5px 9px;
  border: 1px solid #d8c6aa;
  border-radius: 999px;
  background: var(--clay-soft);
  color: var(--clay);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-feedback {
  width: 68px;
  min-height: 40px;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.sidebar-feedback svg {
  width: 18px;
  height: 18px;
}

.sidebar-feedback span {
  font-size: 0.72rem;
  font-weight: 800;
}

.sidebar-feedback:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

.nav-item,
.mode-pill,
.ghost-button,
.primary-button,
.header-chip,
.icon-action,
.inline-action {
  border-radius: 999px;
}

.nav-item,
.mode-pill,
.ghost-button,
.icon-action,
.inline-action,
.author-link {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.nav-item,
.mode-pill,
.primary-button,
.ghost-button,
.icon-action,
.inline-action,
.author-link {
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease,
    opacity 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: default;
  opacity: 0.72;
}

button.is-loading:disabled {
  cursor: wait;
}

.nav-item:hover,
.mode-pill:hover,
.ghost-button:hover,
.icon-action:hover,
.inline-action:hover,
.author-link:hover {
  border-color: var(--line-strong);
}

.author-link {
  border: 0;
  padding: 0;
  font-weight: 700;
}

.primary-button:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.nav-item:hover,
.mode-pill:hover,
.ghost-button:hover,
.icon-action:hover,
.inline-action:hover {
  background: #fbfbfa;
  transform: translateY(-1px);
}

.nav-item.is-pressing,
.mode-pill.is-pressing,
.primary-button.is-pressing,
.ghost-button.is-pressing,
.icon-action.is-pressing,
.inline-action.is-pressing,
.archive-filter-chip.is-pressing,
.selected-verse-chip.is-pressing,
.thread-card.is-pressing {
  transform: translateY(1px) scale(0.985);
}

.icon-only {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
}

.icon-action {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
}

.icon-action svg,
.icon-shell svg {
  width: 18px;
  height: 18px;
}

.icon-shell {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.nav-item.active,
.mode-pill.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 8px 20px var(--accent-shadow);
}

.nav-item.active {
  position: relative;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d9e7dc;
}

.content-column {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
  overflow-anchor: none;
}

.connection-status {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(122, 82, 45, 0.2);
  border-radius: 8px;
  background: #fff8ed;
  color: #6b4a2d;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.45;
}

.connection-status.hidden {
  display: none;
}

.connection-status.is-online {
  border-color: rgba(47, 84, 62, 0.18);
  background: #f3f8f2;
  color: #385443;
}

.connection-status-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.connection-status-icon svg {
  width: 18px;
  height: 18px;
}

.connection-status.is-online .connection-status-slash {
  display: none;
}

.auth-panel {
  display: grid;
  gap: 12px;
  max-width: 520px;
}

.account-status {
  display: grid;
  gap: 6px;
}

.account-status span {
  color: var(--muted);
  font-size: 0.9rem;
}

.account-status .account-role-note {
  margin-top: -2px;
  color: var(--sage);
  font-size: 0.76rem;
  font-weight: 750;
}

.account-release-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(36, 43, 36, 0.06);
}

.account-release-links a,
.account-release-links button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #667064;
  font-size: 0.82rem;
  font-weight: 760;
  text-decoration: none;
}

.blocked-users-panel {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(36, 43, 36, 0.08);
}

.blocked-user-list {
  display: grid;
  gap: 8px;
}

.blocked-user-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(36, 43, 36, 0.06);
}

.blocked-user-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.blocked-user-row strong,
.blocked-user-row span {
  overflow-wrap: anywhere;
}

.blocked-user-row span,
.blocked-user-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.blocked-user-unblock,
.profile-block-button,
.group-member-block-button {
  min-height: 38px;
  padding-inline: 12px;
}

.profile-block-button {
  width: fit-content;
  margin-top: -8px;
  color: var(--danger, #8a3e36);
}

.group-member-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.group-member-actions .group-member-action-button {
  width: 72px;
  min-width: 72px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 72px;
  padding: 0 8px;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.account-release-links a:hover,
.account-release-links a:focus-visible,
.account-release-links button:hover,
.account-release-links button:focus-visible {
  color: var(--text);
  background: rgba(237, 242, 236, 0.68);
}

.account-release-links button {
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
}

.notification-panel {
  display: grid;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(36, 43, 36, 0.08);
}

.notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 2px 12px;
}

.notification-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-heading-icon,
.push-permission-icon,
.notification-type-icon,
.notification-empty-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--sage);
}

.notification-heading-icon {
  width: 36px;
  height: 36px;
}

.notification-heading-icon svg,
.push-permission-icon svg,
.notification-type-icon svg,
.notification-empty-icon svg {
  width: 18px;
  height: 18px;
}

.notification-heading-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.notification-heading-copy strong {
  font-size: 0.96rem;
  line-height: 1.35;
}

.notification-heading-copy span,
.push-permission-copy span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.notification-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.notification-tool-button {
  border-color: transparent;
  background: transparent;
  color: #687166;
  box-shadow: none;
}

.notification-read-all-button {
  min-height: 44px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: #5e685d;
  box-shadow: none;
  font-size: 0.76rem;
  font-weight: 760;
  white-space: nowrap;
}

.notification-read-all-button svg {
  width: 16px;
  height: 16px;
}

.notification-tool-button:hover,
.notification-tool-button:focus-visible,
.notification-read-all-button:hover,
.notification-read-all-button:focus-visible {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--text);
}

.push-permission-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 11px 2px;
  border: 1px solid var(--line);
  border-width: 1px 0 0;
  background: transparent;
}

.push-permission-icon,
.notification-type-icon {
  width: 34px;
  height: 34px;
  background: #f2f4f1;
  color: #657064;
}

.push-permission-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.push-permission-copy strong {
  font-size: 0.86rem;
  line-height: 1.35;
}

.notification-push-button {
  min-width: 54px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.notification-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.notification-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 10px;
  min-height: 68px;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 150ms ease, color 150ms ease;
}

.notification-item:hover,
.notification-item:focus-visible {
  background: rgba(241, 245, 240, 0.58);
}

.notification-item.is-unread {
  background: rgba(234, 243, 238, 0.58);
}

.notification-item.is-unread .notification-type-icon {
  background: #e4eee7;
  color: #3f5e4c;
}

.notification-item-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notification-item-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.notification-item-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.notification-item-title strong {
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.notification-item:not(.is-unread) .notification-item-title strong {
  font-weight: 680;
}

.notification-item-meta small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
  white-space: nowrap;
}

.notification-unread-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sage);
}

.notification-unread-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.notification-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.notification-item-chevron {
  width: 18px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: #9aa198;
}

.notification-item-chevron svg {
  width: 16px;
  height: 16px;
}

.notification-empty {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 20px 4px;
  color: var(--muted);
}

.notification-empty-icon {
  width: 36px;
  height: 36px;
  background: #f2f4f1;
  color: #7a8378;
}

.notification-empty strong {
  font-size: 0.84rem;
  font-weight: 680;
}

.account-form {
  display: grid;
  gap: 10px;
}

#view-auth .account-form input:not([type="checkbox"]) {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--sage);
  opacity: 1;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#view-auth .account-form input:not([type="checkbox"]):-webkit-autofill,
#view-auth .account-form input:not([type="checkbox"]):-webkit-autofill:hover,
#view-auth .account-form input:not([type="checkbox"]):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--sage);
}

.privacy-consent-panel {
  min-width: 0;
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2px;
}

.privacy-consent-panel legend {
  padding: 0 0 7px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.privacy-consent-panel label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
}

.privacy-consent-panel input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  flex: 0 0 20px;
  border: 1.5px solid #b9c8bc;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.privacy-consent-panel input[type="checkbox"]:checked {
  border-color: var(--sage);
  background-color: var(--sage);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2 6.6 11l5.9-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
}

.privacy-consent-panel input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.privacy-consent-panel input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.58;
}

.privacy-consent-panel a {
  min-height: 44px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  color: var(--sage);
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-document-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.privacy-renewal-form {
  padding-top: 4px;
}

.profile-edit-form.is-consent-blocked .profile-edit-heading,
.profile-edit-form.is-consent-blocked .clearable-control,
.profile-edit-form.is-consent-blocked > input {
  display: none;
}

.auth-link-row {
  display: flex;
  justify-content: flex-end;
  min-height: 24px;
}

.auth-link-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  padding: 0;
  text-decoration: none;
}

.auth-link-button:hover {
  color: var(--text);
}

.profile-edit-form {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.account-danger-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(138, 65, 49, 0.16);
  border-radius: 8px;
  background: rgba(255, 248, 245, 0.72);
}

.account-danger-zone strong,
.account-danger-zone span {
  display: block;
}

.account-danger-zone strong {
  color: #6f3327;
  font-size: 0.9rem;
  line-height: 1.35;
}

.account-danger-zone span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.account-delete-button {
  justify-self: end;
  min-height: 38px;
  padding: 9px 12px;
  color: #8a4131;
  border-color: rgba(138, 65, 49, 0.22);
  background: #fff8f5;
  font-size: 0.84rem;
}

.account-delete-button:hover {
  border-color: rgba(138, 65, 49, 0.38);
  background: #fff4ef;
}

.profile-edit-heading {
  display: grid;
  gap: 4px;
}

.profile-edit-heading span {
  color: var(--muted);
  font-size: 0.86rem;
}

.account-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.view {
  min-width: 0;
  display: none;
  gap: 13px;
}

.composer-pane,
.feed-pane {
  min-width: 0;
  display: none;
  gap: 13px;
}

.view.active,
.composer-pane.active,
.feed-pane.active {
  display: grid;
}

@media (prefers-reduced-motion: no-preference) {
  .view.active,
  .composer-pane.active,
  .feed-pane.active {
    animation: none;
  }
}

.section-header,
.surface-header,
.thread-actions,
.editor-footer,
.mode-switch,
.thread-meta-line,
.thread-avatar-row,
.godpeople-topbar,
.publish-row,
.detail-page-top,
.detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mode-switch {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}

.section-header,
.surface-header,
.editor-footer,
.godpeople-topbar {
  justify-content: space-between;
}

.section-header {
  padding: 2px 2px 0;
}

.section-header > div:first-child,
.surface-header > div:first-child {
  min-width: 0;
}

.archive-tools {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 140px 140px;
  gap: 14px;
  align-items: end;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
}

.trace-controls-hidden {
  display: none !important;
}

.archive-overview {
  display: grid;
  gap: 14px;
  padding: 0;
  overflow: hidden;
}

.archive-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.trace-overview .archive-stats {
  display: block;
  padding: 14px 14px 0;
  border-bottom: 0;
}

.archive-mode-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.archive-mode-card {
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.archive-mode-card:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
}

.archive-mode-card.is-active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), inset 0 0 0 1px rgba(17, 17, 17, 0.03);
}

.archive-mode-card strong {
  color: var(--sage);
  font-size: 0.8rem;
}

.archive-stat-card {
  width: 100%;
  min-height: 88px;
  padding: 16px 18px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.archive-stat-card:hover {
  background: #fbfbfa;
}

.archive-stat-card.is-active {
  background: var(--sage-soft);
  box-shadow: inset 0 -2px 0 var(--sage);
}

.trace-overview .archive-discovery {
  display: none;
}

.trace-overview {
  gap: 0;
}

.trace-overview .archive-focus {
  padding: 16px 18px 18px;
}

.archive-search-surface {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.archive-search-main {
  display: block;
  min-width: 0;
}

.archive-search-input-wrap {
  position: relative;
  display: block;
}

.archive-search-input-wrap svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.archive-search-main input {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px 10px 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.archive-search-main .archive-search-input-wrap input {
  padding-left: 38px;
}

.archive-stat-card:last-child {
  border-right: 0;
}

.archive-stat-card span,
.archive-focus-grid span,
.archive-mini-heading,
.archive-empty-chip {
  color: var(--muted);
  font-size: 0.8rem;
}

.archive-stat-card strong {
  font-size: 1.45rem;
  line-height: 1;
}

.archive-focus {
  display: grid;
  gap: 16px;
  padding: 0 18px;
}

.archive-focus h2 {
  max-width: 520px;
}

.archive-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.archive-focus-grid div {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.archive-focus-grid div:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  transform: translateY(-1px);
}

.archive-focus-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.archive-discovery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.archive-discovery-single {
  grid-template-columns: 1fr;
}

.archive-discovery section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px 18px;
}

.archive-discovery section + section {
  border-left: 1px solid var(--line);
}

.archive-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.archive-filter-chip,
.archive-empty-chip {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  padding: 7px 10px;
}

.archive-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.archive-filter-chip:hover {
  border-color: var(--line-strong);
  background: var(--sage-soft);
  color: var(--sage);
}

.archive-filter-chip strong {
  color: var(--muted);
  font-size: 0.76rem;
}

.archive-search input {
  min-width: 0;
}

.section-header h1,
.detail-page h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.22;
  font-weight: 600;
}

.surface h2 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.45;
  font-weight: 600;
}

.header-chip {
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--muted);
}

.status-chip.is-empty {
  opacity: 0;
  pointer-events: none;
}

.selector-surface,
.scripture-surface,
.godpeople-surface {
  padding: 0;
  overflow: hidden;
}

.selector-header,
.selector-toolbar,
.scripture-surface .surface-header,
.inline-reader,
.godpeople-topbar,
.godpeople-reader,
.passage-example,
.selector-surface .provider-note {
  padding-left: 20px;
  padding-right: 20px;
}

.selector-header,
.scripture-surface .surface-header,
.godpeople-topbar {
  padding-top: 20px;
}

.godpeople-topbar {
  padding-bottom: 10px;
}

.selector-header {
  padding-bottom: 14px;
}

.scripture-surface .surface-header {
  padding-bottom: 18px;
}

.selector-surface + .scripture-surface,
.selector-surface + .godpeople-surface {
  margin-top: 22px;
}

.editor-form > .selector-surface + .scripture-surface {
  margin-top: 0;
}

.selector-toolbar {
  display: grid;
  grid-template-columns: minmax(112px, 1.05fr) minmax(126px, 1.15fr) minmax(74px, 0.64fr) minmax(78px, 0.68fr) minmax(78px, 0.68fr) minmax(210px, 1.55fr) auto;
  gap: 18px;
  align-items: end;
  padding-top: 24px;
  padding-bottom: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.passage-field {
  min-width: 0;
}

.verse-field {
  min-width: 0;
}

.field-help {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: nowrap;
}

.passage-example {
  margin: 10px 0 0;
}

.selector-field,
.visibility-field {
  display: grid;
  gap: 8px;
}

.selector-field.is-disabled {
  opacity: 0.58;
}

.selector-field > span,
.visibility-field > span,
.editor-form label > span,
.photo-block-header > span {
  font-weight: 600;
}

select,
input,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

/* Keep native WebKit controls painted while the software keyboard is active. */
select,
input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--sage);
  opacity: 1;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  -webkit-text-fill-color: var(--placeholder);
  opacity: 1;
}

.selector-field select,
.visibility-field select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 52%,
    calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.selector-field select:disabled {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 0.62;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

select:focus,
input:not([type]):focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--sage);
  opacity: 1;
  transition-property: border-color, box-shadow;
}

select:hover,
input:hover,
textarea:hover {
  border-color: var(--line-strong);
}

textarea {
  min-height: 280px;
  resize: vertical;
}

.clearable-control {
  position: relative;
  display: block;
  min-width: 0;
}

.clearable-control input,
.clearable-control textarea {
  padding-right: 48px;
}

.clear-control-button {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 34px;
  height: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
  transform: translateY(-50%);
}

.clearable-textarea .clear-control-button {
  top: 12px;
  transform: none;
}

.clearable-control.has-value .clear-control-button {
  opacity: 1;
  pointer-events: auto;
}

.clear-control-button:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.clear-control-button svg {
  width: 15px;
  height: 15px;
}

.primary-button,
.ghost-button {
  padding: 13px 16px;
  min-height: 44px;
}

.primary-button,
.ghost-button,
.inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.compact-icon-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.compact-icon-button svg {
  width: 18px;
  height: 18px;
}

.minimal-icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.primary-button.minimal-icon-button,
.ghost-button.minimal-icon-button {
  padding: 0;
  gap: 0;
}

.minimal-icon-button svg {
  width: 18px;
  height: 18px;
}

.primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.ghost-button {
  background: rgba(255, 255, 255, 0.58);
}

.primary-button.is-loading,
.ghost-button.is-loading,
.inline-action.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-spinner {
  width: 0.95em;
  height: 0.95em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 700ms linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes surface-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-note-in {
  from {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.provider-note {
  margin: 0;
  min-height: 0;
  font-size: 0.82rem;
  padding-top: 8px;
  padding-bottom: 18px;
}

.reader-body,
.inline-reader,
.godpeople-reader {
  padding-bottom: 24px;
}

.reader-paragraph {
  margin: 0;
  line-height: 1.95;
  font-size: 1rem;
}

.chapter-guide-copy {
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.75;
}

.chapter-guide-copy:empty {
  display: none;
}

.chapter-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.chapter-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chapter-timeline-node {
  position: relative;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.chapter-timeline-node:hover {
  border-color: #c5d6ca;
  background: var(--sage-soft);
  color: var(--sage);
}

.chapter-timeline-node:not(.is-first)::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 8px;
  border-top: 1px solid var(--line-strong);
}

.chapter-guide-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.chapter-guide-card:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  transform: translateY(-1px);
}

.chapter-guide-card strong {
  font-size: 0.86rem;
}

.chapter-guide-card span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.chapter-question-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 38px;
  padding: 9px 12px;
  font-size: 0.84rem;
}

.chapter-guide-surface {
  padding-bottom: 18px;
}

.chapter-guide-surface + .godpeople-surface {
  margin-top: 10px;
}

.interactive-reader-paragraph {
  position: relative;
  display: grid;
  gap: 5px;
}

.interactive-verse,
.composer-verse-line {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 4px;
  align-items: start;
  padding: 2px 0;
}

.composer-reader-paragraph {
  display: grid;
  gap: 5px;
}

.verse-text,
.composer-verse-line > span:last-child {
  display: block;
  min-width: 0;
  text-decoration-skip-ink: none;
  transition: text-decoration-color 150ms ease, color 150ms ease;
}

.interactive-verse.is-highlighted .verse-text {
  color: #1f1b16;
  text-decoration-line: underline;
  text-decoration-color: rgba(195, 132, 62, 0.55);
  text-decoration-thickness: 0.13em;
  text-underline-offset: 0.16em;
}

.interactive-verse.is-community-highlighted .verse-text {
  text-decoration-line: underline;
  text-decoration-color: rgba(79, 100, 88, var(--community-underline-strength, 0.38));
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.16em;
}

.underline-mode-toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-xs);
}

.underline-mode-button {
  min-height: 28px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.underline-mode-button.active {
  background: var(--accent);
  color: #ffffff;
}

.community-mark-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 3px;
  padding: 0 5px;
  border: 1px solid rgba(79, 100, 88, 0.22);
  border-radius: 999px;
  background: rgba(238, 244, 239, 0.88);
  color: var(--sage);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.verse-number-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.verse-number-button {
  display: inline-grid;
  place-items: center;
  position: static;
  min-width: 30px;
  min-height: 30px;
  margin: -2px 2px -2px 0;
  padding: 0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  vertical-align: baseline;
}

.verse-number-button:hover {
  background: var(--accent-soft);
  color: var(--text);
  transform: translateY(-1px);
}

.bible-verse-row {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: background 150ms ease, padding 150ms ease, margin 150ms ease;
}

.bible-verse-row:hover {
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(255, 255, 255, 0.62);
}

.bible-verse-row.is-highlighted .bible-verse-main p {
  color: #1f1b16;
  text-decoration-line: underline;
  text-decoration-color: rgba(195, 132, 62, 0.55);
  text-decoration-thickness: 0.13em;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}

.bible-verse-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.bible-verse-main p {
  margin: 0;
  line-height: 1.9;
}

.verse-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 32px;
}

.reader-interaction-help {
  margin: 0 20px 8px;
  max-width: 620px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: right;
}

.reader-section + .reader-section {
  margin-top: 24px;
}

.reader-section h3 {
  margin: 0 0 18px;
  font: 600 0.9rem/1.4 "SUIT", sans-serif;
}

.chapter-marker {
  display: inline-block;
  margin-right: 10px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.bible-chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px 24px;
}

.reader-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.reader-comment-button {
  position: relative;
}

.comment-count-badge {
  position: absolute;
  right: -2px;
  top: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border: 1px solid var(--panel);
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 13px;
}

.compact-button {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.reader-collapsible {
  display: block;
}

.reader-collapsible summary {
  list-style: none;
}

.reader-collapsible summary::-webkit-details-marker {
  display: none;
}

.collapsible-summary {
  cursor: pointer;
}

.collapsible-body {
  padding-top: 16px;
}

.collapsible-marker::before {
  content: "펼치기";
  color: var(--muted);
  font-size: 0.78rem;
  font-family: "SUIT", sans-serif;
}

.reader-collapsible[open] .collapsible-marker::before {
  content: "접기";
}

.chapter-nav-button {
  min-width: 96px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 760;
}

.inline-verse {
  margin-right: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.composer-verse-button {
  display: inline-grid;
  place-items: center;
  position: static;
  min-width: 30px;
  min-height: 30px;
  margin: -2px 2px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  vertical-align: baseline;
}

.composer-verse-button:hover,
.composer-verse-button.is-selected {
  background: var(--accent-soft);
  color: var(--text);
}

.composer-verse-button.is-selected {
  background: #fbf0e5;
  box-shadow: inset 0 0 0 1px rgba(154, 91, 56, 0.2);
  text-decoration: none;
}

.editor-form {
  display: grid;
  gap: 18px;
}

.record-start-surface {
  display: grid;
  padding: 5px;
  border-color: rgba(35, 35, 32, 0.09);
  background: rgba(244, 245, 242, 0.72);
  box-shadow: none;
}

.record-kind-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.compose-type-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.compose-type-button span {
  width: 100%;
  display: block;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.compose-type-button small {
  display: none;
}

.compose-type-button.active {
  background: var(--panel);
  color: var(--text);
  border-color: rgba(35, 35, 32, 0.07);
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.06);
}

@media (hover: hover) {
  .compose-type-button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.64);
    color: var(--text);
  }
}

.editor-extra-fields {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfa;
}

.editor-extra-fields > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.editor-extra-fields > summary::-webkit-details-marker {
  display: none;
}

.editor-extra-fields > .editor-extra-fields-body {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0 14px 14px;
}

.editor-extra-marker {
  width: 28px;
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(235, 240, 233, 0.72);
  color: #657064;
}

.editor-extra-marker svg {
  width: 16px;
  height: 16px;
  display: block;
  transform: translateX(0.5px);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.editor-extra-fields.is-disclosure-open .editor-extra-marker svg {
  transform: translateX(0.5px) rotate(180deg);
}

.editor-extra-fields.is-disclosure-composited .editor-extra-fields-body {
  will-change: transform, opacity;
}

.editor-heading {
  margin-bottom: 8px;
}

.editor-heading h2 {
  margin: 0;
}

.composer-close-button {
  flex: 0 0 auto;
  margin-left: auto;
  border-color: transparent;
  background: rgba(246, 248, 244, 0.72);
  color: #7b8578;
}

.editor-surface {
  border-color: rgba(35, 35, 32, 0.1);
}

.editor-form label {
  display: grid;
  gap: 8px;
}

.reflection-title-field {
  padding-bottom: 0;
  border-bottom: 0;
}

.worship-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfa;
}

.worship-fields label,
.worship-fields input {
  min-width: 0;
}

.worship-fields input[type="text"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  color: #20261f;
  -webkit-text-fill-color: #20261f;
  caret-color: var(--sage);
  opacity: 1;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#worshipFields .clearable-control,
#worshipFields .clearable-control input[type="text"] {
  width: 100%;
}

#worshipFields .clearable-control.is-input-focused .clear-control-button {
  opacity: 0;
  pointer-events: none;
}

.worship-fields.hidden {
  display: none;
}

.diary-guide {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(47, 70, 56, 0.14);
  border-radius: 8px;
  background: #f7faf5;
}

.diary-guide strong {
  color: #27342d;
  font-size: 0.9rem;
}

.diary-guide span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.worship-passage-summary {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.worship-passage-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.worship-passage-summary strong {
  font-size: 0.98rem;
}

.worship-passage-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.song-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.song-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.song-chip:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

.song-chip svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.tag-list .song-chip {
  margin-top: 0;
}

.selected-verses-field {
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.selected-verses-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.selected-verses-heading small,
.selected-verse-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.selected-verse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  align-items: center;
}

.selected-verse-chip {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
}

.selected-verse-chip.is-representative {
  border-color: #d8c6aa;
  background: #fbf3e8;
}

.selected-verse-chip button,
.selected-verse-chip > span {
  min-height: 32px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
}

.selected-verse-chip button {
  cursor: pointer;
}

.selected-verse-chip button + button,
.selected-verse-chip span + button {
  border-left: 1px solid var(--line);
  color: var(--muted);
}

.photo-block {
  display: grid;
  gap: 12px;
}

.photo-picker {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfa;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.photo-picker:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.photo-picker input {
  display: none;
}

.photo-picker-copy {
  font-weight: 600;
}

.photo-picker-sub {
  font-size: 0.88rem;
}

.editor-footer {
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 2px;
}

.visibility-stack {
  display: grid;
  gap: 6px;
  width: min(100%, 280px);
  min-width: 170px;
}

.visibility-stack select {
  max-width: 170px;
}

.editor-submit-stack {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.editor-submit-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.draft-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.reflection-body-stats {
  margin-top: -2px;
}

#saveHint {
  font-size: 0.78rem;
  max-width: none;
  line-height: 1.45;
  white-space: normal;
}

.reflection-body-field {
  gap: 8px;
}

.reflection-body-field textarea {
  height: clamp(240px, 32vh, 340px);
  min-height: 240px;
  padding: 18px;
  font-size: 1rem;
  line-height: 1.78;
}

.post-save-prompt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin: 4px 0 18px;
  padding: 14px;
  border: 1px solid rgba(79, 100, 88, 0.15);
  border-radius: 8px;
  background: rgba(247, 249, 246, 0.82);
}

.post-save-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.post-save-copy span {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 850;
}

.post-save-copy strong {
  color: var(--text);
  font-size: 0.96rem;
}

.post-save-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.post-save-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.post-save-actions > span {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: right;
}

.post-save-actions .primary-button,
.post-save-actions .ghost-button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.82rem;
}


.image-preview,
.detail-page-image,
.thread-image {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.image-preview img,
.detail-page-image img,
.thread-image img {
  display: block;
  width: 100%;
  height: auto;
}

.image-preview {
  max-width: 320px;
}

.thread-list {
  display: grid;
}

.my-list {
  gap: 14px;
}

.archive-month-group {
  display: grid;
  gap: 10px;
}

.archive-month-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.archive-month-heading strong {
  font-family: "Noto Serif KR", serif;
  font-size: 1.02rem;
}

.archive-month-heading span {
  color: var(--muted);
  font-size: 0.82rem;
}

.archive-month-list {
  display: grid;
  gap: 10px;
}

.archive-entry-card {
  position: relative;
}

.archive-entry-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 0 999px 999px 0;
  background: rgba(79, 100, 88, 0.18);
  opacity: 0;
  transition: opacity 150ms ease;
}

.archive-entry-card:hover::before {
  opacity: 1;
}

.thread-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px 16px;
  box-shadow: var(--shadow-xs);
}

.thread-card.interactive {
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.thread-card.interactive:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.thread-card.highlighted {
  border-color: #cfcac1;
}

#groupReflectionList.thread-feed {
  gap: 10px;
}

#groupReflectionList .thread-card {
  gap: 9px;
  padding: 13px 14px;
}

#groupReflectionList .article-card-top {
  font-size: 0.76rem;
}

#groupReflectionList .thread-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}

#groupReflectionList .thread-title {
  font-size: 1.02rem;
  line-height: 1.46;
}

#groupReflectionList .thread-preview {
  margin-top: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#groupReflectionList .held-passage,
#groupReflectionList .article-card-bottom {
  margin-top: 0;
}

.article-card {
  display: grid;
  gap: 14px;
}

.article-card-top,
.article-card-bottom,
.article-author,
.article-note-meta,
.detail-note-meta-grid {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.article-card-top {
  color: var(--muted);
  font-size: 0.8rem;
}

.article-author-line {
  align-items: center;
  gap: 9px;
}

.article-author-line .thread-avatar {
  margin-right: 1px;
}

.article-badges {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.content-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 0.72rem;
  font-weight: 800;
}

.content-type-badge.is-worship {
  background: var(--blue-soft);
  color: #445d78;
}

.content-type-badge.is-qt {
  background: #f3f5ea;
  color: #536038;
}

.content-type-badge.is-gratitude {
  background: #fbf1ea;
  color: #855b35;
}

.content-type-badge.is-free {
  background: #f0efeb;
  color: #5f5a52;
}

.article-note-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.article-note-meta span {
  display: inline-flex;
  align-items: center;
}

.article-note-meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--line-strong);
}

.article-card-bottom {
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
}

.article-author {
  min-width: 0;
  flex: 1 1 auto;
}

.highlight-trace-card {
  display: grid;
  gap: 8px;
  padding: 14px 15px;
  border-color: var(--line);
  box-shadow: none;
}

.highlight-trace-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: rgba(230, 151, 71, 0.72);
}

.highlight-trace-top {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.highlight-trace-top strong {
  min-width: 0;
  font-size: 0.9rem;
}

.highlight-trace-top span {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.highlight-trace-body {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.highlight-trace-card.interactive:hover {
  box-shadow: none;
  transform: translateY(-1px);
}

.thread-feed {
  gap: 12px;
}

.thread-actions:empty {
  display: none;
}

.feed-surface {
  display: grid;
  gap: 8px;
}

.daily-calendar-surface {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 16px;
  background: #fbfcfa;
}

.daily-calendar-date {
  min-height: 148px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 14px 10px;
  border: 1px solid rgba(75, 102, 87, 0.2);
  border-radius: 8px;
  background: var(--sage-soft);
  color: var(--sage);
  text-align: center;
}

.daily-calendar-date span,
.daily-calendar-date small {
  color: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.daily-calendar-date strong {
  color: var(--accent);
  font-family: "Noto Serif KR", serif;
  font-size: 2.72rem;
  line-height: 1;
  font-weight: 750;
}

.daily-calendar-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 10px;
}

.daily-calendar-main > * {
  min-width: 0;
}

.daily-calendar-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-calendar-topline {
  justify-content: flex-start;
}

.daily-calendar-main h2 {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 760px;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(1.32rem, 2vw, 1.74rem);
  line-height: 1.42;
  font-weight: 750;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.daily-calendar-main p {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.daily-calendar-practice {
  width: 100%;
  min-width: 0;
  max-width: 720px;
  padding-left: 10px;
  border-left: 2px solid rgba(75, 102, 87, 0.24);
  color: var(--sage);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.daily-calendar-practice a {
  display: inline-flex;
  width: max-content;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.closet-entry-surface {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-color: rgba(20, 23, 17, 0.16);
  background: #171b14;
  color: #fbf8ef;
  box-shadow: 0 16px 44px rgba(20, 23, 17, 0.16);
}

.closet-entry-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.closet-entry-copy h2,
.closet-entry-copy p {
  margin: 0;
}

.closet-entry-copy h2 {
  color: #fbf8ef;
  font-size: 1.12rem;
  line-height: 1.35;
}

.closet-entry-copy p {
  color: rgba(251, 248, 239, 0.72);
  font-size: 0.94rem;
  line-height: 1.55;
}

.closet-entry-copy .surface-kicker {
  color: rgba(211, 222, 209, 0.86);
}

.closet-entry-button {
  min-height: 46px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(251, 248, 239, 0.12);
  background: #fbf8ef;
  color: #171b14;
  white-space: nowrap;
}

.closet-entry-button:hover {
  background: #ffffff;
  color: #171b14;
}

.closet-entry-button svg {
  width: 18px;
  height: 18px;
}

.prayer-hero-surface {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 20px;
  border-color: rgba(24, 31, 22, 0.16);
  background:
    radial-gradient(circle at 88% 8%, rgba(230, 216, 188, 0.18), transparent 32%),
    linear-gradient(145deg, #11170f 0%, #1c261b 62%, #263322 100%);
  color: #fbf8ef;
  box-shadow: 0 18px 48px rgba(20, 23, 17, 0.18);
}

.prayer-hero-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(126, 155, 128, 0.22), transparent 30%);
  pointer-events: none;
}

.prayer-hero-surface > * {
  position: relative;
  z-index: 1;
}

.prayer-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.prayer-hero-copy {
  gap: 11px;
}

.prayer-hero-copy .surface-kicker,
.prayer-hero-copy p,
.prayer-hero-copy .daily-calendar-practice,
.prayer-hero-copy .daily-calendar-practice a {
  color: rgba(251, 248, 239, 0.72);
}

.prayer-hero-copy h2 {
  margin: 0;
  color: #fbf8ef;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.32;
}

.prayer-hero-copy .today-passage-button {
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fbf8ef;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(1.28rem, 2.1vw, 1.7rem);
  line-height: 1.52;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.prayer-hero-copy .today-passage-button span {
  min-width: 0;
}

.prayer-hero-copy .today-passage-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: 0.72;
  transition: transform 160ms ease, opacity 160ms ease;
}

.prayer-hero-copy .today-passage-button:hover svg {
  opacity: 1;
  transform: translateX(3px);
}

.prayer-hero-copy .today-passage-button:focus-visible {
  outline: 2px solid rgba(251, 248, 239, 0.88);
  outline-offset: 5px;
}

.prayer-hero-copy .daily-calendar-practice {
  border-left-color: rgba(251, 248, 239, 0.22);
}

.prayer-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(112px, 0.65fr);
  gap: 8px;
}

.prayer-write-button {
  border-color: rgba(251, 248, 239, 0.12);
  background: #fbf8ef;
  color: #171b14;
}

.prayer-write-button:hover {
  background: #ffffff;
  color: #171b14;
}

body.closet-prayer-open {
  overflow: hidden;
}

.closet-prayer-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(140deg, rgba(12, 15, 10, 0.98) 0%, rgba(23, 27, 20, 0.98) 46%, rgba(44, 39, 29, 0.98) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 9px);
  color: #f8f5ed;
}

.closet-prayer-layer.hidden {
  display: none;
}

.keyboard-dismiss-button {
  display: none;
}

.closet-prayer-layer:not(.is-threshold) .closet-threshold {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .closet-prayer-shell {
    animation: closetPrayerEnter 520ms cubic-bezier(0.2, 0.78, 0.18, 1) both;
  }

  .closet-threshold-mark {
    animation: closetThresholdBreathe 3.6s ease-in-out infinite;
  }

  .closet-threshold-copy {
    animation: closetThresholdCopy 760ms ease both;
  }

  .closet-prayer-layer.is-revealing .closet-prayer-shell {
    animation: closetRevealShell 920ms cubic-bezier(0.2, 0.78, 0.18, 1) both;
  }

  .closet-prayer-layer.is-revealing .closet-prayer-word {
    animation: closetWordReveal 900ms cubic-bezier(0.2, 0.78, 0.18, 1) 80ms both;
  }

  .closet-prayer-layer.is-revealing .closet-silence-panel {
    animation: closetPanelReveal 820ms cubic-bezier(0.2, 0.78, 0.18, 1) 180ms both;
  }

  .closet-prayer-layer.is-revealing .closet-prayer-form,
  .closet-prayer-layer.is-revealing .closet-prayer-footer {
    animation: closetPanelReveal 820ms cubic-bezier(0.2, 0.78, 0.18, 1) 260ms both;
  }
}

@keyframes closetPrayerEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.982);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes closetThresholdBreathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26), 0 0 0 0 rgba(236, 229, 205, 0.06);
  }

  50% {
    transform: scale(1.028);
    box-shadow: 0 34px 86px rgba(0, 0, 0, 0.34), 0 0 0 18px rgba(236, 229, 205, 0.035);
  }
}

@keyframes closetThresholdCopy {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes closetRevealShell {
  0% {
    background-color: #171b14;
  }

  100% {
    background-color: #f8f4ea;
  }
}

@keyframes closetWordReveal {
  from {
    opacity: 0;
    transform: translateX(-18px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes closetPanelReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.closet-prayer-shell {
  position: relative;
  width: min(920px, 100%);
  max-height: min(860px, calc(100vh - 56px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(248, 245, 237, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(130deg, rgba(255, 253, 247, 0.92) 0%, rgba(247, 241, 229, 0.96) 48%, rgba(238, 244, 236, 0.92) 100%),
    repeating-linear-gradient(0deg, rgba(40, 45, 35, 0.024) 0 1px, transparent 1px 6px);
  color: var(--text);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.closet-prayer-layer.is-threshold .closet-prayer-shell {
  background:
    linear-gradient(145deg, rgba(17, 21, 14, 0.98) 0%, rgba(31, 35, 25, 0.98) 54%, rgba(57, 50, 37, 0.98) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px);
  color: #fbf8ef;
}

.closet-prayer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  grid-column: 1;
  grid-row: 1 / -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 38%, rgba(30, 35, 26, 0.04));
  opacity: 0.7;
}

.closet-prayer-shell > * {
  grid-column: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.closet-prayer-header,
.closet-prayer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  transition:
    opacity 760ms cubic-bezier(0.2, 0.78, 0.18, 1),
    transform 760ms cubic-bezier(0.2, 0.78, 0.18, 1),
    filter 760ms cubic-bezier(0.2, 0.78, 0.18, 1);
}

.closet-prayer-header {
  border-bottom: 1px solid rgba(35, 35, 32, 0.08);
}

.closet-rhythm-bar {
  position: relative;
  z-index: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(35, 35, 32, 0.08);
  background: rgba(251, 248, 239, 0.52);
}

.closet-rhythm-bar span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(35, 35, 32, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: rgba(35, 35, 32, 0.58);
  font-size: 0.72rem;
  font-weight: 850;
}

.closet-prayer-layer.is-threshold .closet-prayer-header {
  border-bottom-color: rgba(251, 248, 239, 0.08);
}

.closet-prayer-layer.is-threshold .closet-rhythm-bar {
  border-bottom-color: rgba(251, 248, 239, 0.08);
  background: rgba(0, 0, 0, 0.08);
}

.closet-prayer-layer.is-threshold .closet-rhythm-bar span {
  border-color: rgba(251, 248, 239, 0.1);
  background: rgba(251, 248, 239, 0.08);
  color: rgba(251, 248, 239, 0.64);
}

.closet-prayer-header span {
  color: var(--sage);
  font-size: 0.82rem;
  font-weight: 850;
}

.closet-prayer-layer.is-threshold .closet-prayer-header span {
  color: rgba(211, 222, 209, 0.86);
}

.closet-prayer-close {
  width: 38px;
  height: 38px;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.62);
}

.closet-prayer-layer.is-threshold .closet-prayer-close {
  border-color: rgba(251, 248, 239, 0.12);
  background: rgba(251, 248, 239, 0.08);
  color: #fbf8ef;
}

.closet-threshold {
  grid-row: 3 / 5;
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding: 40px 32px 56px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(18, 22, 15, 0.78) 0%, rgba(24, 29, 21, 0.62) 52%, rgba(58, 50, 38, 0.58) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 12px);
  transition:
    opacity 760ms cubic-bezier(0.2, 0.78, 0.18, 1),
    transform 760ms cubic-bezier(0.2, 0.78, 0.18, 1),
    filter 760ms cubic-bezier(0.2, 0.78, 0.18, 1);
}

.closet-threshold::before,
.closet-threshold::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.closet-threshold::before {
  background:
    linear-gradient(100deg, transparent 0%, rgba(236, 229, 205, 0.08) 36%, transparent 66%),
    linear-gradient(180deg, rgba(251, 248, 239, 0.05), transparent 34%, rgba(0, 0, 0, 0.08));
}

.closet-threshold::after {
  background: repeating-linear-gradient(0deg, rgba(251, 248, 239, 0.034) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.3;
}

.closet-prayer-layer.is-revealing .closet-threshold {
  opacity: 0;
  transform: translateY(-22px) scale(1.018);
  filter: blur(14px);
}

.closet-threshold-mark {
  --threshold-progress: 0deg;
  position: relative;
  width: 188px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(rgba(239, 232, 207, 0.96) var(--threshold-progress), rgba(251, 248, 239, 0.095) 0deg),
    linear-gradient(145deg, rgba(251, 248, 239, 0.12), rgba(251, 248, 239, 0.025));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(251, 248, 239, 0.08);
}

.closet-threshold-mark::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(251, 248, 239, 0.12);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(23, 27, 20, 0.98), rgba(15, 18, 13, 0.98)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 16px 38px rgba(0, 0, 0, 0.2);
}

.closet-threshold-mark::after {
  content: "";
  position: absolute;
  inset: -22px;
  border: 1px solid rgba(239, 232, 207, 0.075);
  border-radius: inherit;
}

.closet-threshold-mark strong {
  position: relative;
  color: #fbf8ef;
  font-size: 4.2rem;
  line-height: 1;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
}

.closet-threshold-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.closet-threshold-copy span {
  color: rgba(211, 222, 209, 0.76);
  font-size: 0.8rem;
  font-weight: 900;
}

.closet-threshold-copy p {
  max-width: 520px;
  margin: 0;
  color: #fbf8ef;
  font-family: "Noto Serif KR", serif;
  font-size: 2.15rem;
  line-height: 1.42;
}

.closet-prayer-main {
  grid-row: 3;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
  gap: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transition:
    opacity 760ms cubic-bezier(0.2, 0.78, 0.18, 1),
    transform 760ms cubic-bezier(0.2, 0.78, 0.18, 1),
    filter 760ms cubic-bezier(0.2, 0.78, 0.18, 1);
}

.closet-prayer-layer.is-threshold .closet-prayer-main,
.closet-prayer-layer.is-threshold .closet-prayer-footer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(0.985);
  filter: blur(12px);
}

.closet-prayer-layer.is-threshold.is-revealing .closet-prayer-main,
.closet-prayer-layer.is-threshold.is-revealing .closet-prayer-footer {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.closet-prayer-word,
.closet-silence-panel,
.closet-prayer-form {
  min-width: 0;
}

.closet-prayer-word {
  position: relative;
  overflow: hidden;
  grid-row: 1 / span 2;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 34px 30px;
  border-right: 1px solid rgba(35, 35, 32, 0.08);
  background:
    linear-gradient(135deg, rgba(235, 243, 232, 0.96) 0%, rgba(247, 244, 234, 0.96) 58%, rgba(240, 231, 213, 0.9) 100%),
    repeating-linear-gradient(0deg, rgba(34, 41, 30, 0.025) 0 1px, transparent 1px 6px);
}

.closet-prayer-word::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(180deg, transparent 0%, rgba(75, 102, 87, 0.06) 100%);
  pointer-events: none;
}

.closet-prayer-word > * {
  position: relative;
  z-index: 1;
}

.closet-prayer-word span {
  color: var(--sage);
  font-size: 0.78rem;
  font-weight: 900;
}

.closet-prayer-word h2 {
  margin: 0;
  max-width: 420px;
  font-size: 2.64rem;
  line-height: 1.24;
}

.closet-prayer-word p {
  margin: 0;
  max-width: 460px;
  color: #3e4b40;
  font-family: "Noto Serif KR", serif;
  font-size: 1.02rem;
  line-height: 1.82;
}

.closet-silence-panel {
  grid-column: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  padding: 30px 26px 22px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.52), rgba(248, 244, 234, 0.18)),
    repeating-linear-gradient(90deg, rgba(75, 102, 87, 0.018) 0 1px, transparent 1px 10px);
}

.closet-timer-ring {
  --closet-progress: 0deg;
  position: relative;
  width: 178px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 50%;
  background:
    conic-gradient(var(--sage) var(--closet-progress), rgba(75, 102, 87, 0.11) 0deg),
    linear-gradient(145deg, #fffdf8, #eef3ed);
  color: var(--text);
  box-shadow:
    inset 0 0 0 14px rgba(255, 253, 248, 0.92),
    inset 0 18px 44px rgba(255, 255, 255, 0.48),
    0 20px 48px rgba(75, 102, 87, 0.15);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.closet-timer-ring::before {
  content: "";
  position: absolute;
  inset: 23px;
  border: 1px solid rgba(75, 102, 87, 0.1);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.74), rgba(241, 244, 238, 0.74)),
    repeating-linear-gradient(45deg, rgba(75, 102, 87, 0.018) 0 1px, transparent 1px 7px);
}

.closet-timer-ring strong {
  position: relative;
  z-index: 1;
  font-size: 2.28rem;
  line-height: 1;
}

.closet-timer-ring span {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.closet-duration-row,
.closet-timer-actions,
.closet-prayer-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.closet-duration-button,
.closet-prayer-prompts button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(75, 102, 87, 0.16);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.72);
  color: var(--sage);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(75, 102, 87, 0.055);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.closet-duration-button:hover,
.closet-prayer-prompts button:hover {
  border-color: rgba(75, 102, 87, 0.28);
  background: #fffefa;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(75, 102, 87, 0.08);
}

.closet-duration-button.active {
  background: var(--sage);
  color: #ffffff;
  border-color: var(--sage);
  box-shadow: 0 12px 30px rgba(75, 102, 87, 0.18);
}

.closet-timer-button {
  min-width: 76px;
  min-height: 38px;
  background: rgba(255, 253, 248, 0.8);
}

.closet-prayer-form {
  grid-column: 2;
  display: grid;
  gap: 14px;
  padding: 0 26px 30px;
  background: linear-gradient(180deg, rgba(248, 244, 234, 0.1), rgba(255, 253, 248, 0.44));
}

.closet-prayer-form label {
  display: grid;
  gap: 8px;
}

.closet-prayer-form label > span {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 850;
}

.closet-prayer-form textarea {
  min-height: 210px;
  resize: vertical;
  border-color: rgba(75, 102, 87, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 252, 244, 0.96)),
    repeating-linear-gradient(0deg, rgba(75, 102, 87, 0.018) 0 1px, transparent 1px 28px);
  font-family: "Noto Serif KR", serif;
  font-size: 1.02rem;
  line-height: 1.76;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 14px 34px rgba(75, 102, 87, 0.075);
}

.closet-prayer-form textarea:focus,
.closet-prayer-form textarea:focus-visible {
  outline: none;
  border-color: rgba(75, 102, 87, 0.36);
  box-shadow: 0 0 0 2px rgba(75, 102, 87, 0.14);
}

.closet-prayer-status {
  min-height: 20px;
  margin: 0;
  color: var(--sage);
  font-size: 0.84rem;
  font-weight: 800;
}

.closet-prayer-footer {
  grid-row: 4;
  border-top: 1px solid rgba(35, 35, 32, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.72), rgba(255, 252, 245, 0.92));
  backdrop-filter: blur(16px);
}

.closet-prayer-footer .primary-button,
.closet-prayer-footer .ghost-button {
  min-width: 96px;
}

.today-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.78fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.today-command-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 6px;
}

.today-command-copy h2,
.group-home-main h2 {
  margin: 0;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(1.48rem, 2.4vw, 2.08rem);
  line-height: 1.25;
  font-weight: 750;
}

.today-command-copy p,
.group-home-main p,
.group-invite-surface p,
.group-inline-form p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.today-command-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
  align-self: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfa;
}

.today-command-panel textarea {
  width: 100%;
  min-width: 0;
  min-height: 92px;
  resize: vertical;
  border: 0;
  padding: 7px 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.today-command-actions,
.group-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.today-command-actions {
  display: flex;
  justify-content: flex-end;
}

.today-command-actions .primary-button,
.today-command-actions .ghost-button,
.group-home-actions .primary-button,
.group-home-actions .ghost-button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
}

.today-command-actions .primary-button,
.today-command-actions .ghost-button {
  justify-content: center;
  min-width: 0;
  padding: 0 12px;
  white-space: nowrap;
}

.today-reflection-button {
  flex: 0 0 auto;
  min-height: 34px;
  font-size: 0.86rem;
  font-weight: 750;
  box-shadow: none;
}

.today-group-strip,
.group-invite-surface {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.today-group-strip span,
.group-progress-panel span,
.surface-kicker {
  color: var(--sage);
  font-size: 0.76rem;
  font-weight: 850;
}

.today-group-strip strong,
.group-progress-panel strong {
  display: block;
  margin-top: 3px;
  font-size: 0.96rem;
}

.today-group-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.compact-feed-hero {
  margin-top: 2px;
}

.feed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  padding-bottom: 0;
  border-bottom: 0;
}

.feed-hero-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.feed-kicker {
  color: var(--sage);
  font-size: 0.78rem;
  font-weight: 800;
}

.feed-hero h2 {
  margin: 0;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(1.18rem, 1.7vw, 1.58rem);
  line-height: 1.35;
  font-weight: 750;
  white-space: nowrap;
}

.feed-presence-line {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  max-width: 100%;
  color: var(--muted);
  font-size: clamp(0.76rem, 1vw, 0.84rem);
  line-height: 1.35;
  white-space: nowrap;
}

.feed-presence-line::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--sage);
  opacity: 0.72;
}

.feed-presence-line strong {
  color: var(--accent);
  font-weight: 800;
}

.feed-onboarding {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: -2px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.today-feed-intro {
  padding-top: 16px;
}

.group-page-header p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.group-switcher {
  display: grid;
  gap: 8px;
  padding: 2px 2px 0;
}

.group-switcher > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.group-switcher-list {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.group-switcher-list::-webkit-scrollbar {
  display: none;
}

.group-switcher-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

.group-switcher-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.group-page-tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  box-shadow: none;
}

.group-page-tab {
  flex: 1 1 0;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 800;
  cursor: pointer;
}

.group-page-tab.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), inset 0 0 0 1px rgba(17, 17, 17, 0.03);
}

.group-page-tabs.is-single {
  display: none;
}

.group-page-panel {
  display: none;
  gap: 14px;
}

.group-page-panel.active {
  display: grid;
}

.group-home-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border-color: rgba(79, 100, 88, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 247, 243, 0.72)),
    var(--panel);
}

.group-home-surface.is-empty {
  grid-template-columns: 1fr;
}

.group-home-main {
  display: grid;
  align-content: center;
  gap: 8px;
}

.group-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.group-title-row h2 {
  min-width: 0;
}

.group-settings-surface {
  display: grid;
  gap: 10px;
}

.group-settings-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(79, 100, 88, 0.1);
}

.group-settings-overview h2 {
  margin: 3px 0 0;
  font-size: 1.04rem;
  line-height: 1.42;
}

.group-member-status {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.group-settings-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.group-settings-meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(79, 100, 88, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.group-settings-meta b {
  color: var(--muted);
  font-size: 0.74rem;
}

.group-settings-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-settings-block,
.group-danger-zone {
  display: grid;
  grid-template-columns: minmax(86px, 0.2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(79, 100, 88, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
}

.group-settings-block h3,
.group-danger-zone h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.group-settings-block p,
.group-danger-zone p,
.group-empty-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.group-settings-copy {
  min-width: 0;
}

#groupMemberSettingsBlock {
  grid-template-columns: 1fr;
}

.group-rename-trigger {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  color: var(--muted);
}

.group-rename-trigger svg {
  width: 16px;
  height: 16px;
}

.group-name-settings-block {
  grid-template-columns: 1fr;
}

.group-name-settings-block .group-settings-copy {
  display: grid;
  gap: 3px;
}

#groupNamePreview {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.45;
}

.group-rename-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.group-rename-form input {
  width: 100%;
}

.group-rename-form .primary-button,
.group-rename-form .ghost-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.82rem;
}

.group-rename-action {
  min-width: 58px;
  justify-content: center;
}

.group-manage-member-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(79, 100, 88, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.group-manage-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border-top: 1px solid rgba(79, 100, 88, 0.1);
  background: transparent;
}

.group-manage-member:first-child {
  border-top: 0;
}

.group-manage-member-list .group-empty-note {
  padding: 11px 12px;
}

.group-member-identity strong,
.group-member-identity span {
  display: block;
}

.group-member-identity strong {
  font-size: 0.9rem;
  line-height: 1.35;
}

.group-member-identity span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.group-danger-zone {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(139, 63, 50, 0.16);
  background: rgba(255, 248, 245, 0.52);
}

.group-danger-zone .danger-button {
  justify-self: end;
}

.group-delete-icon-button {
  color: #8b3f32;
}

.danger-button {
  min-height: 38px;
  border-color: rgba(139, 63, 50, 0.24);
  color: #8b3f32;
}

.group-progress-panel {
  display: grid;
  gap: 9px;
  align-content: center;
  min-height: 100%;
  padding: 13px;
  border: 1px solid rgba(79, 100, 88, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.group-member-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.group-member-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 750;
}

.group-member-pill.is-muted {
  color: var(--muted);
}

.group-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.group-setup-surface {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
}

.group-setup-header {
  display: grid;
  gap: 4px;
}

.group-setup-header h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
}

.group-setup-header p:not(.surface-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.group-inline-form {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.group-inline-form:first-child {
  padding-right: 14px;
  border-right: 1px solid var(--line);
}

.group-inline-form h3,
.group-invite-surface h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
}

.group-inline-form input {
  width: 100%;
}

.group-invite-surface {
  margin-top: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.group-records-surface {
  display: grid;
  gap: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.group-records-surface.is-auth-gate {
  min-height: 220px;
  align-content: center;
  padding: 18px;
  border-color: rgba(36, 43, 36, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 245, 0.86)),
    var(--panel);
}

.group-records-surface.is-auth-gate .surface-header {
  display: none;
}

.group-records-surface.is-auth-gate .thread-feed {
  gap: 0;
}

.group-records-surface.is-auth-gate .empty-state {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.group-records-surface.is-auth-gate .empty-title {
  font-size: 1.24rem;
  line-height: 1.42;
}

.group-records-surface.is-auth-gate .empty-copy {
  max-width: 28rem;
}

.group-auth-gate {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.group-auth-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 43, 36, 0.08);
  border-radius: 17px;
  background: rgba(239, 244, 238, 0.92);
  color: #1f2a22;
}

.group-auth-icon svg {
  width: 23px;
  height: 23px;
}

.group-auth-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.group-auth-copy span {
  color: #7a8278;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.2;
}

.group-auth-copy strong {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.36;
}

.group-auth-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.group-auth-points {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.group-auth-points span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid rgba(36, 43, 36, 0.07);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.56);
  color: #6d766a;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.group-auth-action {
  grid-column: 1 / -1;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 16px;
}

.group-records-surface .header-chip {
  width: auto;
  justify-self: start;
  align-self: center;
}

.feed-step {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number title"
    "number copy";
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.feed-step:hover {
  border-color: transparent;
  background: transparent;
  transform: translateY(-1px);
}

.feed-step span {
  grid-area: number;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 0.76rem;
  font-weight: 850;
}

.feed-step strong {
  grid-area: title;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.35;
}

.feed-step small {
  grid-area: copy;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.feed-gap {
  margin-top: 4px;
}

.feed-load-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

.load-more-feed {
  min-height: 38px;
  min-width: 112px;
  border-radius: 999px;
  font-size: 0.86rem;
}

.thread-feed .thread-card {
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

.thread-feed .thread-card.interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.thread-feed .thread-card:first-child {
  border-top: 1px solid var(--line);
}

.thread-avatar-row {
  align-items: flex-start;
}

.thread-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: #444;
  transition: background 150ms ease, color 150ms ease;
}

.thread-card:hover .thread-avatar {
  background: var(--sage-soft);
  color: var(--sage);
}

.profile-page {
  padding: 20px;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  font-size: 0.92rem;
}

.profile-copy {
  display: grid;
  gap: 6px;
}

.profile-handle,
.profile-summary {
  margin: 0;
  color: var(--muted);
}

.profile-handle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.thread-content {
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
}

.thread-meta-line {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.thread-title,
.thread-excerpt {
  margin: 0;
  font-family: "Noto Serif KR", serif;
  font-size: 1.18rem;
  line-height: 1.58;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.thread-title-fallback {
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(79, 100, 88, 0.14);
  border-radius: 999px;
  background: rgba(238, 244, 239, 0.62);
  color: var(--sage);
  font-family: "SUIT", sans-serif;
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 850;
}

.thread-preview {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.my-list .thread-title + .thread-preview,
.thread-feed .thread-title + .thread-preview {
  margin-top: 5px;
}

.archive-entry-card .thread-title + .article-note-meta {
  margin-top: 10px;
}

.archive-entry-card .article-note-meta + .thread-preview {
  margin-top: 12px;
}

.confession-preview {
  color: #3d3a34;
  font-size: 0.98rem;
  line-height: 1.78;
}

.held-passage {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 11px;
  border-left: 2px solid rgba(178, 123, 65, 0.48);
  border-radius: 0 8px 8px 0;
  background: rgba(250, 248, 243, 0.82);
  color: var(--muted);
  font-size: 0.82rem;
}

.held-passage span {
  flex-shrink: 0;
  font-weight: 700;
}

.held-passage strong {
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.thread-image {
  margin-top: 14px;
}

.thread-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.article-card-bottom .thread-actions {
  margin-top: 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tag-list:empty {
  display: none;
}

.tag-pill {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.thread-pill {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
}

.saved-context-chip {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--clay-soft);
  color: var(--clay);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.empty-state {
  display: grid;
  gap: 12px;
  align-content: start;
}

.admin-panel .empty-state {
  min-height: 120px;
  align-content: center;
}

.admin-empty-state {
  min-height: 84px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.empty-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 700;
}

.empty-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.archive-starter-empty {
  gap: 13px;
  padding: 19px;
  border-color: rgba(42, 54, 41, 0.07);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(244, 248, 242, 0.7));
}

.archive-starter-mark {
  display: flex;
  gap: 6px;
  align-items: center;
}

.archive-starter-mark span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(30, 42, 32, 0.16);
}

.archive-starter-mark span:nth-child(2) {
  background: rgba(30, 42, 32, 0.28);
}

.archive-starter-mark span:nth-child(3) {
  background: var(--ink);
}

.archive-starter-copy {
  display: grid;
  gap: 5px;
}

.archive-starter-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.archive-starter-steps span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid rgba(36, 43, 36, 0.07);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.58);
  color: #687265;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
}

.inline-action {
  padding: 7px 10px;
  font-size: 0.83rem;
}

.inline-action.is-active,
.action-button.is-active {
  border-color: #c5d6ca;
  background: var(--sage-soft);
  color: var(--sage);
}

.detail-page-top {
  justify-content: space-between;
  margin-bottom: 18px;
}

.back-button {
  min-height: 38px;
  padding: 0;
}

.icon-back-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.icon-back-button svg {
  width: 18px;
  height: 18px;
}

.detail-page-head {
  max-width: 620px;
  margin-bottom: 18px;
}

.detail-page h1.is-generated-title {
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(79, 100, 88, 0.14);
  border-radius: 999px;
  background: rgba(238, 244, 239, 0.62);
  color: var(--sage);
  font-family: "SUIT", sans-serif;
  font-size: 0.9rem;
  line-height: 1.25;
  font-weight: 850;
}

.detail-page-meta {
  margin-bottom: 10px;
}

.detail-page-image {
  margin-top: 18px;
}

.selected-verse-card {
  position: relative;
  max-width: 620px;
  margin-top: 22px;
  padding: 16px 44px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: 8px;
  background: var(--panel-soft);
}

.selected-verse-top {
  display: block;
  margin-bottom: 8px;
}

.selected-verse-meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.selected-verse-menu {
  position: absolute;
  right: 10px;
  top: 10px;
}

.selected-verse-more {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
}

.selected-verse-menu-list {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 5;
  display: grid;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.selected-verse-menu-list button {
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.selected-verse-menu-list button:hover {
  background: var(--accent-soft);
}

.selected-verse-card p {
  margin: 0;
  color: var(--text);
  font-family: "Noto Serif KR", serif;
  font-size: 1.02rem;
  line-height: 1.9;
}

.selected-verse-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.selected-verse-list-heading {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.selected-verse-list-item {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.selected-verse-list-item strong {
  font-size: 0.84rem;
}

.selected-verse-list-item span {
  color: var(--muted);
  line-height: 1.7;
}

.detail-page-body {
  max-width: 620px;
  margin-top: 20px;
  color: #24231f;
  font-family: "Noto Serif KR", serif;
  font-size: 1.04rem;
  line-height: 1.9;
  white-space: pre-wrap;
}

.detail-tags {
  margin-top: 14px;
}

.detail-note-meta {
  flex: 1 0 100%;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfa;
}

.detail-note-meta-grid {
  gap: 10px;
}

.detail-note-meta-grid span {
  display: grid;
  gap: 3px;
  min-width: min(150px, 100%);
}

.detail-note-meta-grid small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.detail-note-meta-grid strong {
  font-size: 0.88rem;
}

.detail-note-meta p {
  margin: 0;
  color: var(--text);
  font-family: "Noto Serif KR", serif;
  line-height: 1.75;
}

.detail-actions {
  margin: 26px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid rgba(79, 100, 88, 0.09);
  flex-wrap: wrap;
  gap: 8px 12px;
}

.detail-actions:empty {
  display: none;
}

.detail-action-cluster,
.detail-management-actions {
  display: inline-flex;
  align-items: center;
}

.detail-action-cluster {
  gap: 2px;
}

.detail-management-actions {
  gap: 6px;
  margin-left: auto;
}

.detail-action-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #2d2924;
  box-shadow: none;
}

.detail-action-button.has-count {
  width: auto;
  min-width: 48px;
  gap: 5px;
  padding: 0 8px;
}

.detail-action-button svg {
  width: 21px;
  height: 21px;
}

.detail-action-button:hover,
.detail-action-button:focus-visible {
  background: rgba(79, 100, 88, 0.08);
  color: var(--sage);
  transform: none;
}

.detail-action-button.is-active {
  color: var(--sage);
}

.detail-action-button.is-active .detail-action-fill-path {
  fill: currentColor;
}

.detail-action-button.is-loading {
  background: rgba(79, 100, 88, 0.08);
}

.detail-report-action {
  color: var(--muted);
}

.detail-text-action {
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.detail-text-action:hover,
.detail-text-action:focus-visible {
  background: rgba(79, 100, 88, 0.08);
  color: var(--sage);
  outline: none;
}

.detail-action-meta {
  margin-left: 2px;
  font-size: 0.82rem;
  font-weight: 750;
}

.share-link-manager {
  flex: 1 0 100%;
  width: 100%;
  border-top: 1px solid rgba(79, 100, 88, 0.09);
}

.share-link-manager summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, background-color 160ms ease;
}

.share-link-manager summary::-webkit-details-marker {
  display: none;
}

.share-link-manager summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.share-link-manager.is-disclosure-open summary::after {
  transform: translateY(1px) rotate(225deg);
}

.share-link-summary-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
}

.share-link-summary-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #a2aaa1;
}

.share-link-manager[data-share-state="active"] .share-link-summary-status {
  color: var(--sage);
}

.share-link-manager[data-share-state="active"] .share-link-summary-status i {
  background: #5f826b;
  box-shadow: 0 0 0 3px rgba(95, 130, 107, 0.11);
}

.share-link-manager.is-disclosure-open summary {
  color: var(--text);
}

.share-link-panel {
  display: grid;
  gap: 6px;
  padding: 2px 0 14px;
  transform-origin: top center;
}

.share-link-notice,
.share-link-status {
  margin: 0;
  line-height: 1.55;
}

.share-link-notice {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 750;
}

.share-link-status {
  color: var(--muted);
  font-size: 0.8rem;
}

.share-link-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}

.share-link-expiry-field {
  flex: 1 1 180px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.share-link-expiry-field select,
.share-link-command {
  min-height: 40px;
}

.share-link-expiry-field select {
  width: 100%;
}

.share-link-command {
  flex: 0 0 auto;
  padding: 8px 12px;
}

.share-link-copy {
  border-color: rgba(79, 100, 88, 0.2);
  background: rgba(239, 244, 239, 0.72);
  color: var(--sage);
}

.danger-action {
  color: #a23a3a;
}

.action-button {
  padding: 10px 14px;
}

.admin-action-menu {
  position: relative;
}

.admin-action-menu summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.admin-action-menu summary::-webkit-details-marker {
  display: none;
}

.admin-action-menu summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms ease;
}

.admin-action-menu[open] summary::after {
  transform: translateY(1px) rotate(225deg);
}

.admin-action-menu summary:hover,
.admin-action-menu[open] summary {
  border-color: #d8c6aa;
  background: var(--clay-soft);
  color: var(--clay);
  box-shadow: var(--shadow-xs);
}

.admin-action-menu summary strong {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font-size: 0.72rem;
}

.admin-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 8;
  min-width: 160px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

.admin-menu-item {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.admin-menu-item:hover {
  background: var(--panel-soft);
}

.back-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.detail-comments {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.chapter-comments-inline {
  margin-top: 0;
}

.detail-comments-header {
  margin-bottom: 14px;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.comment-form textarea {
  min-height: 110px;
}

.comment-form-footer {
  display: flex;
  justify-content: flex-end;
}

.comment-submit-button {
  width: 54px;
  min-width: 54px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.comment-submit-button svg {
  width: 18px;
  height: 18px;
}

.comment-submit-button.is-loading {
  width: auto;
  min-width: 126px;
  border-radius: 14px;
  white-space: nowrap;
}

.comment-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.comment-sort-toggle {
  box-shadow: none;
}

.reply-toggle,
.report-toggle,
.comment-tool-button {
  min-height: 34px;
  padding: 8px 12px;
}

.admin-panel {
  display: grid;
  gap: 12px;
  padding: 14px 18px 8px;
}

.admin-report-panel-header {
  padding-bottom: 2px;
}

.admin-usage-panel {
  display: grid;
  gap: 18px;
  overflow: hidden;
}

.admin-usage-header {
  align-items: center;
}

.admin-usage-header p {
  margin: 3px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.admin-usage-header p::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #a2aaa1;
  box-shadow: 0 0 0 3px rgba(162, 170, 161, 0.12);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.admin-usage-header p[data-state="live"]::before {
  background: #5f826b;
  box-shadow: 0 0 0 3px rgba(95, 130, 107, 0.14);
}

.admin-usage-header p[data-state="loading"]::before {
  background: #b48657;
  box-shadow: 0 0 0 3px rgba(180, 134, 87, 0.14);
}

.admin-usage-header p[data-state="error"]::before {
  background: #a85f4d;
  box-shadow: 0 0 0 3px rgba(168, 95, 77, 0.14);
}

.admin-usage-refresh {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

.admin-usage-refresh svg {
  width: 18px;
  height: 18px;
}

.admin-usage-panel[aria-busy="true"] .admin-usage-refresh svg {
  animation: admin-usage-refresh-spin 0.8s linear infinite;
}

@keyframes admin-usage-refresh-spin {
  to { transform: rotate(360deg); }
}

.admin-usage-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-usage-metrics > div {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
}

.admin-usage-metrics > div:first-child {
  padding-left: 0;
}

.admin-usage-metrics > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.admin-usage-metrics dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-usage-metrics dd {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.admin-usage-metrics small {
  min-height: 1.25em;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-usage-metrics strong {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.admin-usage-activity {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.admin-usage-activity-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-usage-activity-metrics {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.admin-usage-activity-metrics > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.admin-usage-activity-metrics dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 720;
}

.admin-usage-activity-metrics dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.admin-usage-activity-metrics strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.admin-usage-activity-metrics small {
  color: var(--muted);
  font-size: 0.68rem;
}

.admin-usage-coverage {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-top: 2px;
}

.admin-usage-coverage span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.admin-usage-coverage strong {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.admin-usage-coverage small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.admin-usage-trend-heading {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-usage-trend-heading strong {
  font-size: 0.86rem;
}

.admin-usage-trend-heading > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}

.admin-usage-trend-heading i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 2px;
  background: #92a795;
}

.admin-usage-trend-heading i.is-open {
  margin-left: 5px;
  background: #d8a474;
}

.admin-usage-trend {
  min-height: 112px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  padding-top: 8px;
}

.admin-usage-trend.is-empty {
  min-height: 54px;
  place-items: center;
  padding: 0;
  color: var(--muted);
  font-size: 0.74rem;
  text-align: center;
}

.admin-usage-day {
  min-width: 0;
  height: 104px;
  display: grid;
  grid-template-rows: 78px 18px;
  gap: 8px;
  align-items: end;
}

.admin-usage-bars {
  height: 78px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid rgba(36, 43, 36, 0.12);
}

.admin-usage-bar {
  width: min(7px, 42%);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: #92a795;
  transition: height 220ms ease;
}

.admin-usage-bar.is-open {
  background: #d8a474;
}

.admin-usage-bar.is-unmeasured {
  min-height: 0;
  opacity: 0;
}

.admin-usage-day time {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.admin-usage-members {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding-top: 1px;
}

.admin-usage-members > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-usage-members > header strong {
  font-size: 0.86rem;
}

.admin-usage-members > header span {
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.admin-usage-members ol {
  max-height: 184px;
  margin: 0;
  padding: 0 5px 0 0;
  display: grid;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.admin-usage-members ol:focus-visible {
  outline: 2px solid rgba(83, 109, 91, 0.48);
  outline-offset: 3px;
}

.admin-usage-member {
  min-width: 0;
  min-height: 41px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 1px;
  border-bottom: 1px solid rgba(36, 43, 36, 0.08);
}

.admin-usage-member:last-child {
  border-bottom: 0;
}

.admin-usage-member-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.admin-usage-member-identity strong,
.admin-usage-member-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-usage-member-identity strong {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 790;
}

.admin-usage-member-identity span,
.admin-usage-member time {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.admin-usage-member time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-usage-member-empty {
  min-height: 72px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
}

.admin-usage-error {
  margin: 0;
  color: #8a4131;
  font-size: 0.78rem;
  line-height: 1.45;
}

.admin-log-panel {
  display: grid;
  gap: 16px;
}

.admin-reset-helper {
  display: grid;
  gap: 12px;
}

.admin-reset-helper .surface-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.admin-reset-form,
.admin-reset-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-reset-form input,
.admin-reset-result input {
  width: 100%;
}

.admin-insight-editor {
  display: grid;
  gap: 16px;
}

.admin-insight-form {
  display: grid;
  gap: 12px;
}

.admin-insight-selector {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
}

.admin-insight-form label {
  display: grid;
  gap: 8px;
}

.admin-insight-form label span {
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-insight-form textarea {
  min-height: 86px;
}

.admin-insight-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-suggestion-grid {
  display: grid;
  gap: 10px;
}

.admin-suggestion-grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.admin-suggestion-grid span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.admin-report-card {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.admin-report-card:last-child {
  border-bottom: 0;
}

.admin-report-card .thread-preview {
  white-space: pre-wrap;
}

#view-admin .admin-report-card .thread-meta-line strong {
  font-size: 0.86rem;
}

#view-admin .admin-report-card .thread-title {
  font-family: "SUIT", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 700;
}

#view-admin .admin-report-card .thread-preview {
  font-size: 0.88rem;
  line-height: 1.55;
}

.admin-report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-report-actions .action-button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 0.82rem;
}

.admin-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid rgba(205, 197, 181, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
}

.admin-status-chip.status-reviewing {
  border-color: rgba(198, 138, 78, 0.32);
  background: #fff8ee;
  color: var(--clay);
}

.admin-status-chip.status-resolved {
  border-color: rgba(79, 100, 88, 0.24);
  background: rgba(238, 244, 239, 0.88);
  color: var(--sage);
}

.admin-status-select {
  width: auto;
  min-height: 34px;
  padding: 7px 28px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 750;
}

.admin-log-list {
  display: grid;
  gap: 0;
}

.admin-log-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.admin-log-item:last-child {
  border-bottom: 0;
}

.admin-log-item div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-log-item strong {
  font-size: 0.9rem;
}

.admin-log-item span,
.admin-log-item time {
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-log-item time {
  white-space: nowrap;
}

#view-admin .surface h2 {
  font-size: 1rem;
}

#view-admin .admin-reset-form .primary-button,
#view-admin .admin-insight-actions .primary-button,
#view-admin .admin-insight-actions .ghost-button {
  font-size: 0.88rem;
}

.reply-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.comment-edit-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.comment-edit-form textarea {
  min-height: 92px;
}

.comment-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.comment-edit-save {
  min-height: 36px;
  padding: 8px 14px;
}

.comment-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.comment-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}

.modal-open {
  overflow: hidden;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.feedback-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.34);
  backdrop-filter: blur(4px);
}

.feedback-modal-panel {
  position: absolute;
  left: max(18px, calc((100vw - 1280px) / 2));
  top: 42px;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 84px);
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .feedback-modal-panel {
    animation: surface-in 180ms ease both;
  }
}

.feedback-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.feedback-modal-header h2,
.modal-kicker {
  margin: 0;
}

.modal-kicker {
  margin-bottom: 4px;
  color: var(--clay);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feedback-form {
  display: grid;
  gap: 12px;
}

.feedback-form label {
  display: grid;
  gap: 8px;
}

.feedback-form label span {
  font-weight: 700;
}

.feedback-form textarea {
  min-height: 76px;
}

.feedback-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
}

.feedback-submit {
  justify-self: end;
  min-width: 112px;
}

.comment-meta {
  margin-bottom: 8px;
}

.comment-body {
  margin: 0;
}

.reply-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.comment-reply {
  background: #fcfcfb;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.toast-host {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2100;
  width: min(380px, calc(100vw - 48px));
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.toast-message {
  --toast-tone: #7d877b;
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 10px 13px 10px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(25, 32, 25, 0.1), 0 1px 2px rgba(25, 32, 25, 0.05);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
  animation: toast-note-in 210ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}

.toast-message::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--toast-tone);
}

.toast-message[data-tone="success"] {
  --toast-tone: var(--sage);
  border-color: rgba(75, 102, 87, 0.24);
  background: #fbfdfb;
}

.toast-message[data-tone="warning"] {
  --toast-tone: #a57445;
  border-color: rgba(165, 116, 69, 0.25);
  background: #fffdf9;
}

.toast-message[data-tone="error"] {
  --toast-tone: var(--clay);
  border-color: rgba(154, 91, 56, 0.26);
  background: #fffaf7;
}

.toast-message-copy {
  min-width: 0;
}

.toast-message.is-leaving {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity 150ms ease, transform 150ms ease;
}

body.modal-open .toast-host {
  z-index: 2700;
}

@media (max-width: 640px) {
  .toast-host {
    right: 16px;
    left: 16px;
    bottom: calc(var(--mobile-nav-height, 68px) + var(--mobile-nav-bottom, 18px) + 12px);
    width: auto;
    justify-content: center;
  }

  .toast-message {
    max-width: min(360px, 100%);
  }

  body.composer-writing-open .toast-host {
    bottom: calc(var(--mobile-nav-height, 68px) + var(--mobile-nav-bottom, 18px) + 88px);
  }

  body.mobile-input-active .toast-host {
    bottom: calc(62px + env(safe-area-inset-bottom));
  }

  body.modal-open .toast-host {
    top: calc(12px + env(safe-area-inset-top));
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-message,
  .toast-message.is-leaving {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

[hidden],
.hidden {
  display: none !important;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
    width: min(100% - 24px, 1280px);
  }

  .feed-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .today-command,
  .group-home-surface,
  .group-setup-grid {
    grid-template-columns: 1fr;
  }

  .today-group-strip,
  .group-invite-surface {
    align-items: flex-start;
    flex-direction: column;
  }

  .group-progress-panel {
    min-height: auto;
    padding: 12px;
    border-left: 1px solid rgba(79, 100, 88, 0.12);
    border-top: 1px solid rgba(79, 100, 88, 0.12);
  }

  .group-inline-form:first-child {
    padding-right: 0;
    padding-bottom: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .today-group-strip p {
    white-space: normal;
  }

  .feed-onboarding {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    overflow-x: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sidebar-nav {
    width: auto;
    grid-auto-flow: column;
    grid-auto-columns: 48px;
    grid-template-columns: none;
    justify-content: start;
    justify-items: center;
    align-items: center;
  }

  .sidebar-brand {
    width: 84px;
    height: 42px;
    margin: 0;
    transform: none;
  }

  .sidebar-brand img {
    width: 81px;
    max-height: 39px;
  }

  .selector-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .passage-field {
    grid-column: 1 / -1;
  }

  .archive-tools {
    grid-template-columns: 1fr 1fr;
  }

  .archive-stats,
  .archive-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-stat-card:nth-child(2) {
    border-right: 0;
  }

  .archive-stat-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .chapter-guide-grid {
    grid-template-columns: 1fr;
  }

  .admin-insight-selector {
    grid-template-columns: 1fr;
  }

  .admin-reset-form,
  .admin-reset-result {
    grid-template-columns: 1fr;
  }

  .admin-reset-result .compact-icon-button {
    justify-self: start;
  }

  .archive-search {
    grid-column: 1 / -1;
  }

  .editor-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .visibility-stack {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .app-shell {
    width: 100%;
    padding: 10px 10px calc(112px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .content-column {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    gap: 12px;
  }

  .surface {
    border-radius: 10px;
    padding: 14px;
  }

  .sidebar {
    position: fixed;
    inset: auto 10px 10px;
    z-index: 60;
    display: flex;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
  }

  .sidebar-brand,
  .sidebar-feedback-label {
    display: none;
  }

  .sidebar-nav {
    width: auto;
    grid-auto-flow: column;
    grid-auto-columns: 44px;
    grid-template-columns: none;
    gap: 5px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 40px rgba(17, 17, 17, 0.16);
    backdrop-filter: blur(18px);
    pointer-events: auto;
  }

  .nav-item.active::after {
    left: 50%;
    top: auto;
    right: auto;
    bottom: 6px;
    transform: translateX(-50%);
  }

  .nav-item,
  .mode-pill.icon-only {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .sidebar-feedback {
    position: fixed;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-sm);
    place-items: center;
    pointer-events: auto;
  }

  .sidebar-feedback span {
    display: none;
  }

  .section-header {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 -10px 2px;
    padding: 10px 10px 12px;
    background: rgba(248, 248, 246, 0.92);
    backdrop-filter: blur(14px);
  }

  .section-header h1,
  .detail-page h1 {
    font-size: 1.42rem;
  }

  .mode-switch {
    flex-direction: row;
    align-items: center;
    align-self: auto;
    padding: 3px;
    background: rgba(255, 255, 255, 0.82);
  }

  .selector-toolbar,
  .archive-tools,
  .surface-header,
  .editor-footer,
  .godpeople-topbar,
  .detail-page-top {
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .surface-header {
    gap: 8px;
  }

  .feed-hero {
    gap: 14px;
    padding-bottom: 16px;
  }

  .feed-hero h2 {
    font-size: 1.08rem;
  }

  .today-command {
    gap: 12px;
    padding-bottom: 14px;
  }

  .today-command-copy h2,
  .group-home-main h2 {
    font-size: 1.25rem;
  }

  .today-command-panel {
    padding: 10px;
  }

  .today-command-panel textarea {
    min-height: 80px;
    font-size: 0.92rem;
  }

  .today-command-actions .primary-button,
  .today-command-actions .ghost-button,
  .group-home-actions .primary-button,
  .group-home-actions .ghost-button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 0.82rem;
  }

  .today-command-actions {
    display: flex;
    justify-content: flex-end;
  }

  .today-command-actions .primary-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 132px;
  }

  .feed-step {
    min-height: 48px;
  }

  .article-card-bottom {
    align-items: flex-start;
  }

  .held-passage {
    width: 100%;
  }

  .selector-header,
  .selector-toolbar,
  .scripture-surface .surface-header,
  .inline-reader,
  .godpeople-topbar,
  .godpeople-reader,
  .passage-example,
  .selector-surface .provider-note {
    padding-left: 14px;
    padding-right: 14px;
  }

  .selector-header,
  .scripture-surface .surface-header,
  .godpeople-topbar {
    padding-top: 14px;
  }

  .selector-toolbar {
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .selector-surface + .scripture-surface,
  .selector-surface + .godpeople-surface {
    margin-top: 12px;
  }

  select,
  input,
  textarea {
    padding: 12px;
  }

  textarea {
    min-height: 220px;
  }

  .editor-form {
    gap: 17px;
  }

  .record-start-surface {
    align-items: start;
    padding: 5px;
  }

  .record-kind-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .compose-type-button {
    justify-content: center;
    min-height: 38px;
    padding: 7px 3px;
  }

  .compose-type-button span {
    font-size: 0.72rem;
  }

  .compose-type-button small {
    display: none;
  }

  .post-save-prompt {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .post-save-actions {
    justify-content: stretch;
  }

  .post-save-actions > span {
    text-align: left;
  }

  .post-save-actions .primary-button,
  .post-save-actions .ghost-button {
    flex: 1 1 100px;
  }


  .editor-heading {
    margin-bottom: 8px;
  }

  .reflection-title-field {
    padding-bottom: 16px;
  }

  .worship-fields {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .selected-verses-field {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
  }

  .selected-verse-chips {
    min-height: 30px;
  }

  .editor-submit-actions {
    width: 100%;
  }

  .editor-submit-actions .primary-button,
  .editor-submit-actions .ghost-button {
    flex: 1 1 140px;
  }

  .photo-picker {
    padding: 14px;
  }

  .archive-stats,
  .archive-focus-grid,
  .archive-discovery,
  .archive-search-surface {
    grid-template-columns: 1fr;
  }

  .song-fields,
  .comment-form {
    grid-template-columns: 1fr;
  }

  .comment-form-footer {
    justify-content: flex-end;
  }

  .thread-feed .thread-card {
    padding: 18px 0;
  }

  .thread-card {
    padding: 14px;
  }

  .thread-avatar-row {
    gap: 9px;
  }

  .thread-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .thread-meta-line {
    gap: 7px;
    margin-bottom: 8px;
  }

  .thread-feed .thread-title,
  .thread-feed .thread-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .thread-feed .thread-title {
    -webkit-line-clamp: 3;
  }

  .thread-feed .thread-preview {
    -webkit-line-clamp: 4;
  }

  .thread-title,
  .thread-excerpt {
    font-size: 0.96rem;
    line-height: 1.72;
  }

  .thread-preview {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .my-list .thread-title + .thread-preview,
  .thread-feed .thread-title + .thread-preview {
    margin-top: 10px;
  }

  .thread-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    margin-top: 12px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .thread-actions::-webkit-scrollbar {
    display: none;
  }

  .thread-actions > * {
    flex: 0 0 auto;
  }

  .article-card {
    gap: 10px;
  }

  .article-card-bottom {
    display: grid;
    gap: 10px;
  }

  .article-author {
    width: 100%;
  }

  .inline-action,
  .thread-pill,
  .tag-pill,
  .song-chip {
    font-size: 0.76rem;
  }

  .detail-page-top {
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .detail-actions {
    gap: 7px;
  }

  .action-button {
    padding: 9px 11px;
    font-size: 0.82rem;
  }

  .selected-verse-card {
    padding: 14px 40px 14px 14px;
  }

  .reader-topbar-actions {
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .underline-mode-toggle {
    flex: 1 1 180px;
    justify-content: center;
  }

  .underline-mode-button {
    flex: 1 1 0;
  }

  .reader-interaction-help {
    margin: 0 14px 14px;
    font-size: 0.78rem;
  }

  .reader-interaction-help strong {
    display: inline-block;
    margin-top: 2px;
  }

  .highlight-trace-top {
    gap: 4px 10px;
  }

  .highlight-trace-top span {
    width: 100%;
    margin-left: 0;
  }

  .reader-paragraph,
  .bible-verse-main p,
  .selected-verse-card p,
  .detail-page-body {
    line-height: 1.78;
  }

  .bible-chapter-nav {
    padding: 0 14px 18px;
  }

  .feedback-modal-panel {
    right: 12px;
    left: 12px;
    top: auto;
    bottom: 18px;
    width: auto;
    max-height: 62dvh;
    transform: none;
    border-radius: 12px;
  }

  .feedback-inline-fields {
    grid-template-columns: 1fr;
  }

  .feedback-submit {
    justify-self: stretch;
  }

  .archive-stat-card {
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .archive-stat-card:last-child {
    border-bottom: 0;
  }

  .archive-discovery section + section {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .admin-action-menu {
    width: 100%;
  }

  .admin-action-menu summary {
    width: 100%;
    justify-content: space-between;
    border-radius: 8px;
  }

  .admin-menu-panel {
    position: static;
    margin-top: 8px;
    width: 100%;
  }

  .share-link-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .share-link-command {
    width: 100%;
  }

  .field-help {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 78px;
  }

  body {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 248, 246, 0) 180px),
      #f7f7f4;
  }

  .app-shell {
    width: 100%;
    min-height: 100vh;
    padding: 74px 12px 98px;
    padding-bottom: calc(98px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow-x: hidden;
  }

  .content-column {
    width: 100%;
    max-width: calc(100vw - 24px);
    min-width: 0;
    margin: 0 auto;
    gap: 14px;
    overflow-x: hidden;
    justify-self: center;
    justify-items: stretch;
    justify-content: stretch;
    align-items: stretch;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .view,
  .composer-pane,
  .feed-pane,
  .surface {
    width: 100%;
    max-width: calc(100vw - 24px);
    min-width: 0;
  }

  .today-command,
  .today-command-panel,
  .today-group-strip,
  .feed-onboarding {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .today-command-actions {
    width: 100%;
    min-width: 0;
  }

  .today-command-actions .primary-button,
  .today-command-actions .ghost-button {
    flex: 0 0 auto;
    width: auto;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .section-header {
    margin-left: 0;
    margin-right: 0;
  }

  .group-records-surface .surface-header {
    flex-direction: row;
    align-items: center;
  }

  .group-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .group-rename-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .group-rename-form .primary-button,
  .group-rename-form .ghost-button {
    width: 40px;
  }

  .view,
  .composer-pane,
  .feed-pane {
    gap: 12px;
  }

  .sidebar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    height: 60px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: visible;
    border-bottom: 1px solid rgba(230, 227, 220, 0.86);
    background: rgba(248, 248, 246, 0.92);
    box-shadow: 0 10px 30px rgba(17, 17, 17, 0.06);
    pointer-events: none;
  }

  .sidebar-brand {
    width: 82px;
    height: 40px;
    display: grid;
    justify-content: start;
    place-items: center start;
    margin: 0;
    transform: none;
    pointer-events: auto;
  }

  .sidebar-brand img {
    width: 82px;
    max-height: 40px;
  }

  .sidebar-feedback-label {
    height: 28px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    max-width: 72px;
    padding: 5px 7px;
    overflow: hidden;
    font-size: 0.6rem;
    white-space: nowrap;
    pointer-events: auto;
  }

  .sidebar-feedback {
    position: static;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    pointer-events: auto;
  }

  .sidebar-feedback svg {
    width: 16px;
    height: 16px;
  }

  .sidebar-feedback span {
    display: none;
  }

  .sidebar-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 82;
    width: min(228px, calc(100% - 20px));
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 46px rgba(17, 17, 17, 0.16);
    backdrop-filter: blur(20px);
    pointer-events: auto;
  }

  .nav-item {
    position: relative;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 6px 2px 5px;
    border: 0;
    border-radius: 14px;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
  }

  .nav-item.hidden {
    display: none !important;
  }

  .nav-item .icon-shell,
  .nav-item .icon-shell svg {
    width: 19px;
    height: 19px;
  }

  .nav-item::after,
  .nav-item.active::after {
    content: attr(title);
    position: static;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    opacity: 0.9;
    transform: none;
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .nav-item.active {
    color: #ffffff;
    background: var(--accent);
    border-color: transparent;
    box-shadow: none;
  }

  .nav-item.active::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 9px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #dfe9e1;
  }

  .nav-item:hover {
    border-color: transparent;
    background: rgba(17, 17, 17, 0.06);
  }

  .nav-item.active:hover {
    background: var(--accent);
  }

  .section-header {
    position: static;
    z-index: auto;
    margin: 0;
    padding: 2px 2px 0;
    background: transparent;
    backdrop-filter: none;
  }

  .section-header h1,
  .detail-page h1 {
    font-size: 1.34rem;
    line-height: 1.28;
  }

  .surface {
    border-radius: 8px;
    padding: 15px;
  }

  .mode-switch {
    width: auto;
    display: inline-grid;
    grid-template-columns: repeat(2, 42px);
    align-self: center;
    flex: 0 0 auto;
    padding: 3px;
  }

  .mode-pill {
    min-height: 38px;
    justify-content: center;
    padding: 0;
  }

  .mode-pill.icon-only {
    width: 42px;
    height: 38px;
    min-height: 38px;
  }

  .selector-header,
  .selector-toolbar,
  .scripture-surface .surface-header,
  .inline-reader,
  .godpeople-topbar,
  .godpeople-reader,
  .passage-example,
  .selector-surface .provider-note {
    padding-left: 15px;
    padding-right: 15px;
  }

  .selector-header,
  .scripture-surface .surface-header,
  .godpeople-topbar {
    padding-top: 15px;
  }

  .selector-surface {
    background: rgba(255, 255, 255, 0.92);
  }

  .selector-header {
    padding-bottom: 8px;
  }

  .selector-header h2 {
    font-size: 1rem;
  }

  .selector-toolbar {
    grid-template-columns: 66px 92px 50px 54px 54px;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 8px;
    padding-bottom: 15px;
    border-top: 0;
    border-bottom: 0;
    background: transparent;
  }

  .selector-toolbar::-webkit-scrollbar {
    display: none;
  }

  .selector-field {
    gap: 6px;
  }

  .selector-field span {
    font-size: 0.74rem;
  }

  .selector-field select,
  .selector-field input {
    min-height: 42px;
    padding: 10px 11px;
    border-radius: 8px;
    background-color: #ffffff;
  }

  .selector-action {
    width: 44px;
    height: 42px;
    min-height: 42px;
    align-self: end;
  }

  #view-new .selector-toolbar .passage-field,
  #view-new .selector-toolbar .selector-action,
  #view-bible .selector-toolbar .passage-field,
  #view-bible .selector-toolbar .selector-action {
    display: none;
  }

  #view-new .selector-toolbar .translation-field,
  #view-bible .selector-toolbar .translation-field {
    grid-column: 1;
    grid-row: 1;
  }

  #view-new .selector-toolbar .book-field,
  #view-bible .selector-toolbar .book-field {
    grid-column: 2;
    grid-row: 1;
  }

  #view-new .selector-toolbar .chapter-field,
  #view-bible .selector-toolbar .chapter-field {
    grid-column: 3;
    grid-row: 1;
  }

  #view-new .selector-toolbar .start-verse-field,
  #view-bible .selector-toolbar .start-verse-field {
    grid-column: 4;
    grid-row: 1;
  }

  #view-new .selector-toolbar .end-verse-field,
  #view-bible .selector-toolbar .end-verse-field {
    grid-column: 5;
    grid-row: 1;
  }

  .selector-surface + .scripture-surface,
  .selector-surface + .godpeople-surface {
    margin-top: 12px;
  }

  .feed-surface {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .feed-surface .surface-header {
    padding: 2px 2px 10px;
  }

  .feed-load-more-wrap {
    padding: 14px 0 4px;
  }

  .thread-feed {
    gap: 10px;
  }

  .thread-feed .thread-card,
  .archive-month-list .thread-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow-xs);
  }

  .thread-feed .thread-card:first-child {
    border-top: 1px solid var(--line);
  }

  .thread-feed .thread-card.interactive:hover {
    transform: none;
  }

  .thread-title,
  .thread-excerpt {
    font-size: 0.98rem;
    line-height: 1.72;
  }

  .thread-preview {
    line-height: 1.66;
  }

  .thread-actions {
    margin: 12px -2px 0;
    padding: 0 2px 2px;
  }

  .article-card-bottom .thread-actions {
    margin-top: 0;
  }

  .archive-overview {
    overflow: hidden;
  }

  .archive-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-mode-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-stat-card {
    min-height: 76px;
    padding: 14px;
  }

  .archive-stat-card:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .archive-stat-card:nth-child(even) {
    border-right: 0;
  }

  .archive-stat-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .archive-focus,
  .trace-overview .archive-focus {
    padding: 15px;
  }

  .archive-focus-grid {
    grid-template-columns: 1fr;
  }

  .godpeople-topbar {
    gap: 12px;
  }

  .reader-topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
  }

  .reader-topbar-actions .status-chip {
    display: none;
  }

  .underline-mode-toggle {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
    grid-column: 1;
  }

  .reader-comment-button {
    grid-column: 2;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  #writeFromBibleBtn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }

  .reader-interaction-help {
    margin: 0 15px 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfbfa;
    font-size: 0.78rem;
  }

  .interactive-reader-paragraph {
    font-size: 1rem;
    line-height: 1.86;
  }

  .bible-chapter-nav {
    padding: 0 15px 18px;
  }

  .bible-chapter-nav .ghost-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .editor-surface {
    padding: 16px;
  }

  .editor-heading {
    margin-bottom: 8px;
  }

  .reflection-title-field,
  .song-fields,
  .selected-verses-field {
    padding-bottom: 16px;
  }

  .song-fields {
    gap: 10px;
  }

  .reflection-body-field textarea {
    height: 340px;
    min-height: 260px;
  }

  .editor-footer {
    gap: 12px;
  }

  .visibility-stack,
  .visibility-stack select,
  .editor-submit-stack,
  .editor-submit-actions {
    width: 100%;
    max-width: 100%;
  }

  .editor-submit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .editor-submit-actions .primary-button,
  .editor-submit-actions .ghost-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .comment-form {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .comment-form textarea {
    min-height: 96px;
  }

  .comment-form-footer {
    justify-content: flex-end;
  }

  .comment-submit-button {
    width: 48px;
    min-width: 48px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  .comment-submit-button.is-loading {
    width: auto;
    min-width: 118px;
  }

  .detail-page {
    padding: 16px;
  }

  .detail-page-top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .detail-actions {
    justify-content: flex-start;
  }

  .selected-verse-card {
    margin-top: 16px;
    padding: 14px 38px 14px 14px;
  }

  .feedback-modal {
    z-index: 95;
  }

  .feedback-modal-panel {
    right: 12px;
    left: 12px;
    bottom: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 60dvh;
    padding: 14px;
    gap: 10px;
    border-radius: 8px;
  }

  .feedback-form {
    gap: 10px;
  }

  .feedback-form label {
    gap: 6px;
  }

  .feedback-form textarea {
    min-height: 56px;
  }

}

@media (max-width: 640px) {
  .modal-open .sidebar-nav,
  .mobile-input-active .sidebar-nav {
    display: none;
  }

  .keyboard-dismiss-button {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 1500;
    min-height: 36px;
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(35, 35, 32, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #20231f;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0;
    box-shadow: 0 14px 36px rgba(35, 35, 32, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mobile-input-active .keyboard-dismiss-button:not(.hidden) {
    display: inline-flex;
  }

  .closet-prayer-open .keyboard-dismiss-button:not(.hidden) {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }

  html {
    scroll-padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }

  .app-shell {
    padding-top: 74px;
    padding-bottom: calc(124px + env(safe-area-inset-bottom));
  }

  .sidebar {
    height: 62px;
    padding: 8px 12px;
  }

  .sidebar-brand {
    width: 74px;
    height: 44px;
  }

  .sidebar-brand img {
    width: 74px;
    max-height: 36px;
  }

  .sidebar-feedback-label {
    height: 32px;
    max-width: 84px;
    padding-inline: 8px;
  }

  .sidebar-feedback {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .section-header h1,
  .detail-page h1 {
    font-size: 1.28rem;
  }

  .mode-switch {
    grid-template-columns: repeat(2, 46px);
  }

  .mode-pill.icon-only {
    width: 46px;
    height: 44px;
    min-height: 44px;
  }

  .compose-type-button,
  .group-page-tab {
    min-height: 44px;
  }

  .group-settings-overview,
  .group-settings-block,
  .group-danger-zone {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .group-settings-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .group-settings-meta span {
    padding: 9px 8px;
  }

  .group-settings-meta strong {
    font-size: 0.84rem;
  }

  .group-rename-form {
    grid-template-columns: 1fr 1fr;
  }

  .group-rename-form input {
    grid-column: 1 / -1;
  }

  .group-rename-action {
    width: 100%;
  }

  .group-danger-zone .danger-button,
  .danger-button {
    justify-self: stretch;
    justify-content: center;
  }

  .daily-calendar-surface {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .closet-entry-surface {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .closet-entry-button {
    width: 100%;
    justify-content: center;
  }

  .closet-prayer-layer {
    padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
    align-items: stretch;
    background: #f8f4ea;
    overflow: hidden;
  }

  .closet-prayer-shell {
    width: 100%;
    max-height: none;
    height: calc(100vh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .closet-prayer-header,
  .closet-prayer-footer {
    padding: 13px 14px;
  }

  .closet-threshold {
    gap: 22px;
    padding: 24px 22px 36px;
  }

  .closet-threshold-mark {
    width: min(150px, 44vw);
  }

  .closet-threshold-mark strong {
    font-size: 3.6rem;
  }

  .closet-threshold-copy p {
    max-width: 310px;
    font-size: 1.72rem;
    line-height: 1.44;
  }

  .closet-prayer-main {
    grid-template-columns: 1fr;
  }

  .closet-prayer-word {
    grid-column: auto;
    grid-row: auto;
    min-height: 198px;
    padding: 22px 20px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(35, 35, 32, 0.08);
  }

  .closet-prayer-word h2 {
    font-size: 1.78rem;
    line-height: 1.34;
  }

  .closet-prayer-word p {
    font-size: 0.98rem;
    line-height: 1.72;
  }

  .closet-silence-panel {
    grid-column: auto;
    padding: 20px 16px 16px;
  }

  .closet-timer-ring {
    width: min(142px, 42vw);
  }

  .closet-timer-ring strong {
    font-size: 2rem;
  }

  .closet-prayer-form {
    grid-column: auto;
    padding: 0 16px 20px;
  }

  .closet-prayer-form textarea {
    min-height: 148px;
    max-height: 28dvh;
    font-size: 0.98rem;
  }

  .daily-calendar-date {
    min-height: 0;
    grid-template-columns: auto auto 1fr;
    align-content: center;
    justify-items: start;
    justify-content: start;
    gap: 8px;
    padding: 11px 12px;
    text-align: left;
  }

  .daily-calendar-date strong {
    font-size: 1.52rem;
  }

  .daily-calendar-date small {
    justify-self: end;
  }

  .daily-calendar-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .daily-calendar-main {
    gap: 9px;
  }

  .daily-calendar-main h2 {
    font-size: 1.18rem;
    line-height: 1.45;
  }

  .daily-calendar-main p {
    font-size: 0.9rem;
    line-height: 1.62;
  }

  .primary-button,
  .ghost-button {
    min-height: 46px;
  }

  .selector-field select,
  .selector-field input,
  .selector-action {
    min-height: 44px;
  }

  .selector-action {
    width: 46px;
    height: 44px;
  }

  .clearable-control input,
  .clearable-control textarea {
    padding-right: 52px;
  }

  .clear-control-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .reflection-body-field textarea {
    height: clamp(190px, 28vh, 230px);
    min-height: 190px;
    padding: 16px;
  }

  .underline-mode-toggle {
    min-height: 44px;
    padding: 4px;
  }

  .underline-mode-button {
    min-height: 40px;
    padding: 8px 12px;
  }

  .reader-comment-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #writeFromBibleBtn {
    min-height: 44px;
  }

  .interactive-reader-paragraph {
    gap: 7px;
    line-height: 1.76;
  }

  .composer-reader-paragraph {
    gap: 7px;
  }

  .interactive-verse,
  .composer-verse-line {
    column-gap: 6px;
    padding: 4px 0;
  }

  .verse-number-button,
  .composer-verse-button {
    min-width: 40px;
    min-height: 40px;
    margin: -5px 0 -5px -2px;
    font-size: 0.84rem;
  }

  .bible-chapter-nav {
    padding-bottom: 30px;
  }

  .feedback-modal-panel {
    top: auto;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  .group-settings-surface {
    gap: 10px;
  }

  .group-settings-meta span {
    padding: 7px 8px;
  }

  #groupNameSettingsBlock,
  #groupMemberSettingsBlock,
  #groupDangerZone {
    padding: 10px;
  }

  .group-rename-form {
    gap: 7px;
  }

  #groupRenameInput {
    padding: 11px 12px;
  }

  .group-manage-member {
    padding: 9px 10px;
  }

  #groupDangerZone {
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
  }

  .group-danger-zone .danger-button.minimal-icon-button,
  .danger-button.minimal-icon-button {
    width: 44px;
    min-width: 44px;
    justify-self: end;
  }
}

@media (max-width: 640px) {
  .app-shell,
  .content-column,
  .view,
  .composer-pane,
  .feed-pane,
  .surface {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .daily-calendar-surface,
  .record-start-surface {
    overflow-x: hidden;
  }

  .daily-calendar-main h2,
  .daily-calendar-main p,
  .daily-calendar-practice {
    max-width: calc(100vw - 56px);
  }

  .daily-calendar-main h2 {
    max-width: min(100%, 300px);
  }

  #view-new > .section-header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
    align-items: start;
  }

  #view-new > .section-header .mode-switch {
    justify-self: start;
    grid-template-columns: repeat(2, 42px);
    max-width: 96px;
  }

  #view-new > .section-header .mode-pill.icon-only {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 72px;
    scroll-padding-bottom: calc(142px + env(safe-area-inset-bottom));
  }

  body {
    overscroll-behavior-x: none;
  }

  .app-shell {
    width: 100%;
    max-width: 100%;
    padding: 70px 18px calc(132px + env(safe-area-inset-bottom));
    gap: 16px;
  }

  .content-column {
    width: min(100%, 372px);
    max-width: 372px;
    gap: 16px;
  }

  .view,
  .composer-pane,
  .feed-pane,
  .surface {
    max-width: 100%;
  }

  .view,
  .composer-pane,
  .feed-pane {
    gap: 16px;
  }

  .section-header {
    min-height: 42px;
    align-items: center;
  }

  #view-new > .section-header {
    width: min(100%, 372px);
    max-width: 372px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0;
    column-gap: 12px;
    align-items: center;
  }

  #view-new > .section-header .mode-switch {
    width: 166px;
    max-width: 166px;
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(35, 35, 32, 0.08);
    border-radius: 999px;
    background: rgba(236, 239, 234, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  }

  #view-new > .section-header .mode-pill.icon-only {
    width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    transform: none;
  }

  #view-new > .section-header .mode-pill.icon-only::after {
    content: attr(title);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
  }

  #view-new > .section-header .mode-pill.active {
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
  }

  #view-new > .section-header .mode-pill:hover {
    transform: none;
  }

  #view-new > .section-header .mode-pill .icon-shell,
  #view-new > .section-header .mode-pill .icon-shell svg {
    width: 15px;
    height: 15px;
  }

  .sidebar {
    height: 60px;
    padding: 7px 18px;
    background: rgba(248, 248, 246, 0.88);
    box-shadow: 0 8px 26px rgba(17, 17, 17, 0.05);
  }

  .sidebar-nav {
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(306px, calc(100% - 42px));
    min-height: 62px;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 42px rgba(17, 17, 17, 0.13);
  }

  .nav-item {
    height: 46px;
    min-height: 46px;
    padding: 4px 2px;
    border-radius: 12px;
    color: #858b82;
    background: transparent;
    transform: none;
  }

  .nav-item.active,
  .nav-item.active:hover {
    background: transparent;
    color: var(--text);
    box-shadow: none;
  }

  .nav-item.active::before {
    display: none;
  }

  .nav-item::after,
  .nav-item.active::after {
    font-size: 0.65rem;
    font-weight: 760;
    opacity: 0.82;
  }

  .nav-item.active::after {
    opacity: 1;
  }

  .nav-item .icon-shell,
  .nav-item .icon-shell svg {
    width: 20px;
    height: 20px;
  }

  .nav-item.active .icon-shell {
    transform: translateY(-1px);
  }

  .sidebar-feedback {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .surface {
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
  }

  .daily-calendar-surface,
  .closet-entry-surface,
  .editor-surface,
  .record-start-surface,
  .selector-surface,
  .scripture-surface,
  .godpeople-surface {
    border-color: rgba(35, 35, 32, 0.08);
  }

  .daily-calendar-surface {
    gap: 10px;
    padding: 13px;
  }

  .closet-entry-surface {
    gap: 12px;
    padding: 15px;
  }

  .record-start-surface {
    padding: 5px;
  }

  .record-kind-grid {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .record-kind-grid::-webkit-scrollbar {
    display: none;
  }

  .compose-type-button {
    flex: 0 0 auto;
    min-width: 64px;
    min-height: 42px;
    padding: 9px 13px;
  }

  .selector-header,
  .selector-toolbar,
  .scripture-surface .surface-header,
  .inline-reader,
  .godpeople-topbar,
  .godpeople-reader,
  .passage-example,
  .selector-surface .provider-note {
    padding-left: 14px;
    padding-right: 14px;
  }

  .selector-header {
    padding-top: 14px;
    padding-bottom: 4px;
  }

  .selector-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px;
    gap: 9px;
    padding-top: 8px;
    padding-bottom: 14px;
  }

  .selector-field {
    position: relative;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    padding: 8px 11px;
    border: 1px solid rgba(35, 35, 32, 0.1);
    border-radius: 8px;
    background: #ffffff;
  }

  .selector-field span {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
  }

  .translation-field::after,
  .book-field::after,
  .chapter-field::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #8a9087;
    border-bottom: 1.5px solid #8a9087;
    transform: rotate(45deg);
    pointer-events: none;
  }

  .selector-field select,
  .selector-field input {
    min-height: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: 16px;
    font-weight: 760;
    line-height: 1.2;
  }

  .selector-field select {
    appearance: none;
    padding-right: 16px;
  }

  .selector-field input {
    min-width: 0;
  }

  .selector-field select:focus,
  .selector-field input:focus {
    box-shadow: none;
  }

  .selector-field:focus-within {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 4px var(--focus-ring);
  }

  .selector-action {
    width: 58px;
    height: 54px;
    min-height: 54px;
    border-radius: 8px;
    background: #ffffff;
  }

  #view-new .selector-toolbar .passage-field,
  #view-bible .selector-toolbar .passage-field {
    grid-column: 1 / 3;
  }

  #view-new .selector-toolbar .selector-action,
  #view-bible .selector-toolbar .selector-action {
    grid-column: 3;
  }

  .editor-surface {
    padding: 15px;
  }

  .editor-form {
    gap: 16px;
  }

  .reflection-body-field textarea {
    height: clamp(188px, 27vh, 226px);
  }

}

@media (max-width: 640px) {
  :root {
    --mobile-rail: min(100%, 390px);
  }

  @supports (-webkit-touch-callout: none) {
    body {
      -webkit-overflow-scrolling: touch;
    }
  }

  body {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 250, 247, 0.82) 74px, rgba(250, 250, 247, 0) 210px),
      #f7f7f3;
  }

  .app-shell {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .content-column,
  #view-new > .section-header {
    width: var(--mobile-rail);
    max-width: var(--mobile-rail);
  }

  .sidebar {
    height: 58px;
    padding: 7px max(18px, env(safe-area-inset-right)) 7px max(18px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(36, 43, 36, 0.07);
    background: rgba(250, 250, 247, 0.96);
    backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(36, 43, 36, 0.06);
  }

  .sidebar-brand {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(36, 43, 36, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
    transform: none;
  }

  .sidebar-brand picture,
  .sidebar-brand img {
    width: 30px;
    height: 30px;
    max-height: 30px;
    border-radius: 0;
    object-fit: contain;
  }

  .sidebar-feedback-label {
    display: none;
  }

  .sidebar-feedback {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-color: rgba(36, 43, 36, 0.08);
    background: rgba(255, 255, 255, 0.72);
    color: #4e554d;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  }

  .section-header h1,
  .detail-page h1 {
    font-family: "SUIT", sans-serif;
    font-size: 1.36rem;
    font-weight: 850;
    letter-spacing: 0;
  }

  .surface {
    background: rgba(255, 255, 255, 0.92);
  }

  .daily-calendar-surface,
  .closet-entry-surface,
  .record-start-surface,
  .editor-surface,
  .selector-surface,
  .scripture-surface,
  .godpeople-surface,
  .auth-panel,
  .archive-search-surface,
  .archive-overview,
  .group-home-surface,
  .group-records-surface,
  .group-settings-surface,
  .group-setup-surface,
  .group-invite-surface,
  .detail-page,
  .thread-card {
    border-color: rgba(36, 43, 36, 0.08);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
  }

  .daily-calendar-surface,
  .closet-entry-surface,
  .editor-surface,
  .selector-surface,
  .scripture-surface,
  .godpeople-surface,
  .auth-panel,
  .archive-search-surface,
  .archive-overview,
  .group-home-surface,
  .group-records-surface,
  .group-settings-surface,
  .group-setup-surface,
  .group-invite-surface,
  .detail-page {
    border-radius: 8px;
  }

  .daily-calendar-surface {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .prayer-hero-surface {
    gap: 18px;
    padding: 16px;
    border-color: rgba(24, 31, 22, 0.14);
    background:
      radial-gradient(circle at 88% 10%, rgba(237, 222, 190, 0.2), transparent 35%),
      radial-gradient(circle at 8% 94%, rgba(94, 130, 102, 0.24), transparent 32%),
      linear-gradient(148deg, #10160f 0%, #182116 56%, #263321 100%);
    box-shadow: 0 18px 48px rgba(20, 23, 17, 0.18);
  }

  .prayer-hero-top {
    align-items: flex-start;
  }

  .daily-calendar-date {
    min-height: 54px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    justify-items: start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #edf5f0;
  }

  .prayer-hero-surface .daily-calendar-date {
    min-width: 104px;
    grid-template-columns: auto auto;
    justify-content: start;
    row-gap: 2px;
    column-gap: 7px;
    border-color: rgba(251, 248, 239, 0.12);
    background: rgba(251, 248, 239, 0.1);
    color: rgba(251, 248, 239, 0.84);
  }

  .daily-calendar-date strong {
    font-size: 2rem;
  }

  .prayer-hero-surface .daily-calendar-date strong {
    color: #fbf8ef;
    font-size: 1.42rem;
  }

  .daily-calendar-date small {
    justify-self: end;
  }

  .prayer-hero-surface .daily-calendar-date small {
    grid-column: 1 / -1;
    justify-self: start;
    letter-spacing: 0;
  }

  .daily-calendar-main h2 {
    font-family: "Noto Serif KR", serif;
    font-size: 1.32rem;
    line-height: 1.5;
    font-weight: 700;
  }

  .prayer-hero-copy {
    gap: 9px;
  }

  .prayer-hero-copy h2 {
    font-family: "SUIT", sans-serif;
    font-size: 1rem;
    font-weight: 800;
  }

  .prayer-hero-copy .today-passage-button {
    font-size: 1.48rem;
    line-height: 1.48;
    letter-spacing: 0;
  }

  .prayer-hero-copy .daily-calendar-practice {
    margin-top: 2px;
    padding-left: 9px;
    font-size: 0.78rem;
  }

  .prayer-hero-actions {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 0.48fr);
  }

  .prayer-write-button {
    min-height: 50px;
    border-radius: 999px;
    font-weight: 850;
    justify-content: center;
  }

  .closet-entry-surface {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 17px 16px 18px;
    background: linear-gradient(135deg, #11170f 0%, #202a1e 100%);
  }

  .closet-entry-button {
    width: 100%;
    min-height: 50px;
    border-radius: 999px;
    font-weight: 850;
    justify-content: center;
  }

  .record-start-surface,
  .group-page-tabs {
    background: rgba(238, 241, 236, 0.82);
  }

  .compose-type-button,
  .group-page-tab {
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }

  .compose-type-button.active,
  .group-page-tab.active {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.045);
  }

  .record-kind-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    overflow: visible;
  }

  .compose-type-button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 2px;
    border-radius: 8px;
  }

  .compose-type-button span {
    font-size: 0.75rem;
    letter-spacing: 0;
  }

  input,
  textarea,
  select {
    border-color: rgba(36, 43, 36, 0.12);
    background: rgba(255, 255, 255, 0.94);
  }

  input,
  select {
    min-height: 50px;
  }

  textarea {
    min-height: 160px;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: rgba(75, 102, 87, 0.5);
    box-shadow: 0 0 0 3px rgba(75, 102, 87, 0.12);
  }

  .selector-field:focus-within {
    box-shadow: 0 0 0 3px rgba(75, 102, 87, 0.12);
  }

  .selector-surface {
    padding: 12px;
  }

  .selector-header {
    display: none;
  }

  .selector-toolbar {
    gap: 8px;
    padding: 0;
  }

  #view-new .selector-toolbar,
  #view-bible .selector-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #view-new .selector-toolbar .passage-field,
  #view-bible .selector-toolbar .passage-field {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #view-new .selector-toolbar .translation-field,
  #view-bible .selector-toolbar .translation-field {
    grid-column: 1;
    grid-row: 2;
  }

  #view-new .selector-toolbar .book-field,
  #view-bible .selector-toolbar .book-field {
    grid-column: 2;
    grid-row: 2;
  }

  #view-new .selector-toolbar .chapter-field,
  #view-bible .selector-toolbar .chapter-field {
    grid-column: 1;
    grid-row: 3;
  }

  #view-new .selector-toolbar .selector-action,
  #view-bible .selector-toolbar .selector-action {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    height: 54px;
    min-height: 54px;
    align-self: stretch;
    justify-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #20231f;
    font-size: 0.8rem;
    font-weight: 850;
  }

  #view-new .selector-toolbar .selector-action::after,
  #view-bible .selector-toolbar .selector-action::after {
    content: "불러오기";
  }

  #view-new .selector-toolbar .selector-action svg,
  #view-bible .selector-toolbar .selector-action svg {
    width: 16px;
    height: 16px;
  }

  .thread-feed,
  .my-list,
  .archive-month-list {
    gap: 8px;
  }

  .thread-card,
  .thread-feed .thread-card,
  .archive-month-list .thread-card {
    padding: 14px 15px;
    border-radius: 8px;
  }

  .thread-card.interactive:hover,
  .thread-feed .thread-card.interactive:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.035);
  }

  .thread-card.is-pressing,
  .compose-type-button.is-pressing,
  .group-page-tab.is-pressing {
    transform: scale(0.985);
  }

  .article-card {
    gap: 11px;
  }

  .thread-title {
    line-height: 1.5;
  }

  .thread-preview,
  .detail-page-body {
    line-height: 1.72;
  }

  .provider-note,
  #saveHint {
    display: none;
  }

  .archive-search-main {
    min-height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
  }

  .archive-search-surface {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .archive-search-main input {
    min-height: 44px;
  }

  .group-page-tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
  }

  .group-page-tab {
    min-height: 44px;
  }

  .group-home-surface {
    padding: 15px;
    background: rgba(255, 255, 255, 0.92);
  }

  .editor-surface {
    padding: 16px;
  }

  .editor-heading {
    margin-bottom: 4px;
  }

  .editor-form {
    gap: 15px;
  }

  .reflection-body-field textarea {
    height: clamp(196px, 30vh, 260px);
    min-height: 196px;
    padding: 16px;
    line-height: 1.76;
  }

  .editor-footer {
    gap: 14px;
    padding-top: 2px;
  }

  .visibility-stack,
  .visibility-stack select,
  .editor-submit-stack,
  .editor-submit-actions {
    width: 100%;
    max-width: 100%;
  }

  .editor-submit-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .editor-submit-actions .primary-button,
  .editor-submit-actions .ghost-button {
    width: 100%;
    justify-content: center;
  }

  .detail-page {
    padding: 15px;
  }

  .godpeople-topbar {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 10px;
  }

  .reader-topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-left: 0;
  }

  .reader-topbar-actions .status-chip {
    display: none;
  }

  .underline-mode-toggle {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 4px;
  }

  .underline-mode-button {
    min-height: 36px;
  }

  .reader-comment-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #writeFromBibleBtn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .godpeople-reader {
    padding-top: 6px;
  }

  .interactive-verse {
    column-gap: 8px;
    padding: 3px 0;
  }

  .verse-number-button {
    min-width: 32px;
    min-height: 32px;
    margin-top: 1px;
  }

  .verse-text {
    display: inline;
    line-height: 1.94;
  }

  .interactive-verse.is-highlighted .verse-text,
  .interactive-verse.is-community-highlighted .verse-text {
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .interactive-verse.is-highlighted .verse-text {
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1.08em,
      rgba(207, 156, 88, 0.32) 1.08em,
      rgba(207, 156, 88, 0.32) 1.48em,
      transparent 1.48em,
      transparent 1.94em
    );
  }

  .interactive-verse.is-community-highlighted .verse-text {
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1.12em,
      rgba(79, 100, 88, var(--community-underline-strength, 0.24)) 1.12em,
      rgba(79, 100, 88, var(--community-underline-strength, 0.24)) 1.48em,
      transparent 1.48em,
      transparent 1.94em
    );
  }

  .feedback-modal-backdrop {
    background: rgba(17, 17, 17, 0.24);
    backdrop-filter: blur(8px);
  }

  .feedback-modal-panel {
    left: 12px;
    right: 12px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    max-height: 60dvh;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
  }

  .sidebar-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    z-index: 82;
    width: min(318px, calc(100% - 44px));
    min-height: 64px;
    display: flex;
    align-items: center;
    transform: translateX(-50%);
    padding: 8px 13px;
    border: 1px solid rgba(36, 43, 36, 0.08);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px) saturate(1.18);
  }

  .nav-item {
    height: 48px;
    min-height: 48px;
    gap: 3px;
    color: #8a9188;
  }

  .nav-item .icon-shell {
    width: 30px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  }

  .nav-item .icon-shell svg {
    width: 19px;
    height: 19px;
  }

  .nav-item.active .icon-shell {
    background: #edf2ec;
    color: #1f2a22;
  }

  .nav-item::after,
  .nav-item.active::after {
    font-size: 0.64rem;
    line-height: 1;
  }

  .nav-item:hover {
    background: transparent;
  }

  @media (prefers-reduced-motion: no-preference) {
    .view.active,
    .composer-pane.active,
    .feed-pane.active,
    .group-page-panel.active {
      animation: mobile-view-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
  }
}

body.resume-view-repairing .content-column,
body.resume-view-repairing .view.active,
body.resume-view-repairing .composer-pane.active,
body.resume-view-repairing .feed-pane.active,
body.resume-view-repairing .view.active > *,
body.resume-view-repairing .composer-pane.active > *,
body.resume-view-repairing .feed-pane.active > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.resume-view-repairing .content-column {
  display: grid !important;
  min-height: min(100dvh, 100vh);
  visibility: visible !important;
}

body.resume-view-repairing .view.active,
body.resume-view-repairing .composer-pane.active,
body.resume-view-repairing .feed-pane.active {
  display: grid !important;
  visibility: visible !important;
}

body.native-resume-hard-repair .app-shell,
body.native-resume-hard-repair .content-column,
body.native-resume-hard-repair .view.active,
body.native-resume-hard-repair .composer-pane.active,
body.native-resume-hard-repair .feed-pane.active {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  filter: none !important;
}

body.native-resume-hard-repair .view.active > *,
body.native-resume-hard-repair .composer-pane.active > *,
body.native-resume-hard-repair .feed-pane.active > * {
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  filter: none !important;
}

body.native-resume-hard-repair .app-shell {
  min-height: 100dvh !important;
}

body.native-resume-hard-repair .content-column {
  min-height: calc(100dvh - 156px) !important;
  position: relative !important;
  z-index: 2 !important;
}

body.native-resume-hard-repair .view.active {
  min-height: 240px !important;
}

@keyframes mobile-view-enter {
  from {
    opacity: 0;
    transform: none;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 374px) {
  .app-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  #view-new > .section-header .mode-switch {
    width: 152px;
  }

  #view-new > .section-header .mode-pill.icon-only {
    padding-inline: 6px;
  }

  .sidebar-nav {
    width: min(306px, calc(100% - 32px));
  }
}

@media (max-width: 640px) {
  .sidebar-brand {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-color: rgba(36, 43, 36, 0.04);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.62);
  }

  .sidebar-brand picture,
  .sidebar-brand img {
    width: 38px;
    height: 32px;
    max-height: none;
    transform: scale(1.08);
  }

  .sidebar-nav {
    width: min(316px, calc(100% - 44px));
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 7px 10px;
    border-radius: 24px;
  }

  .nav-item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    display: grid;
    grid-template-rows: 28px 12px;
    align-content: center;
    justify-items: center;
    gap: 2px;
    padding: 3px 0 2px;
    border-radius: 16px;
  }

  .nav-item .icon-shell {
    width: 34px;
    height: 28px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 999px;
  }

  .nav-item .icon-shell svg {
    width: 19px;
    height: 19px;
    display: block;
  }

  .nav-item.active .icon-shell {
    background: #edf2ec;
    color: #1f2a22;
    transform: none;
  }

  .nav-item::after,
  .nav-item.active::after {
    align-self: end;
    text-align: center;
    line-height: 1;
  }

  #view-mine .section-header {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 7px;
    margin-bottom: -2px;
  }

  #view-mine .section-header h1 {
    font-size: 1.22rem;
  }

  #view-mine #myCountChip {
    display: none;
  }

  #view-mine #myCountChip.is-local-storage {
    display: inline-flex;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(36, 43, 36, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: #687365;
    box-shadow: none;
    font-size: 0.7rem;
    font-weight: 820;
    line-height: 1;
  }

  #view-mine .archive-search-main {
    min-height: 40px;
  }

  #view-mine .archive-search-main input {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #view-mine .archive-overview {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #view-mine .archive-focus,
  #view-mine .archive-discovery {
    display: none;
  }

  #view-mine .archive-stats {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 1px 0 2px;
    scrollbar-width: none;
  }

  #view-mine .archive-stats::-webkit-scrollbar {
    display: none;
  }

  #view-mine .archive-stat-card {
    width: auto;
    min-width: max-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid rgba(36, 43, 36, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }

  #view-mine .archive-stat-card span,
  #view-mine .archive-stat-card strong {
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
  }

  #view-new .record-passage-attach,
  #view-bible .selector-surface {
    padding: 8px;
    border: 1px solid rgba(36, 43, 36, 0.06);
    background: rgba(244, 247, 243, 0.8);
    box-shadow: none;
  }

  #view-new .record-passage-attach .selector-toolbar,
  #view-bible .selector-toolbar {
    grid-template-columns: 66px 92px 50px 54px 54px;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0;
  }

  #view-new .record-passage-attach .selector-toolbar::-webkit-scrollbar,
  #view-bible .selector-toolbar::-webkit-scrollbar {
    display: none;
  }

  #view-new .record-passage-attach .selector-toolbar .passage-field,
  #view-new .record-passage-attach .selector-toolbar .selector-action,
  #view-bible .selector-toolbar .passage-field,
  #view-bible .selector-toolbar .selector-action {
    display: none;
  }

  #view-new .record-passage-attach .selector-toolbar .translation-field,
  #view-new .record-passage-attach .selector-toolbar .book-field,
  #view-new .record-passage-attach .selector-toolbar .chapter-field,
  #view-new .record-passage-attach .selector-toolbar .verse-field,
  #view-bible .selector-toolbar .translation-field,
  #view-bible .selector-toolbar .book-field,
  #view-bible .selector-toolbar .chapter-field,
  #view-bible .selector-toolbar .verse-field {
    grid-row: 1;
  }

  #view-new .record-passage-attach .selector-toolbar .translation-field,
  #view-bible .selector-toolbar .translation-field {
    grid-column: 1;
  }

  #view-new .record-passage-attach .selector-toolbar .book-field,
  #view-bible .selector-toolbar .book-field {
    grid-column: 2;
  }

  #view-new .record-passage-attach .selector-toolbar .chapter-field,
  #view-bible .selector-toolbar .chapter-field {
    grid-column: 3;
  }

  #view-new .record-passage-attach .selector-toolbar .start-verse-field,
  #view-bible .selector-toolbar .start-verse-field {
    grid-column: 4;
  }

  #view-new .record-passage-attach .selector-toolbar .end-verse-field,
  #view-bible .selector-toolbar .end-verse-field {
    grid-column: 5;
  }

  #view-new .record-passage-attach .selector-field,
  #view-bible .selector-field {
    min-height: 42px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 1px rgba(17, 17, 17, 0.035);
  }

  #view-new .record-passage-attach .selector-field > span,
  #view-bible .selector-field > span {
    display: none;
  }

  #view-new .record-passage-attach .selector-field select,
  #view-bible .selector-field select {
    min-height: 42px;
    height: 42px;
    padding: 0 14px 0 0;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
  }

  #view-new .record-passage-attach .book-field::after,
  #view-new .record-passage-attach .chapter-field::after,
  #view-new .record-passage-attach .start-verse-field::after,
  #view-new .record-passage-attach .end-verse-field::after,
  #view-new .record-passage-attach .translation-field::after,
  #view-bible .book-field::after,
  #view-bible .chapter-field::after,
  #view-bible .start-verse-field::after,
  #view-bible .end-verse-field::after,
  #view-bible .translation-field::after {
    right: 12px;
    bottom: 17px;
  }

  #view-bible .godpeople-surface {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .record-start-surface,
  .editor-surface,
  .selector-surface,
  .godpeople-surface,
  .archive-overview,
  .thread-card {
    transition:
      border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
      background 220ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-item .icon-shell,
  .mode-pill,
  .compose-type-button,
  .group-page-tab,
  .closet-entry-button,
  .prayer-write-button {
    transition:
      background 240ms cubic-bezier(0.16, 1, 0.3, 1),
      color 240ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-item.is-pressing .icon-shell,
  .mode-pill.is-pressing,
  .compose-type-button.is-pressing,
  .group-page-tab.is-pressing {
    transform: scale(0.94);
  }

  .primary-button.is-pressing,
  .ghost-button.is-pressing,
  .icon-action.is-pressing {
    transform: translateY(1px) scale(0.985);
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .view.active,
  .composer-pane.active,
  .feed-pane.active,
  .group-page-panel.active {
    animation: mobile-view-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .prayer-hero-surface {
    animation: mobile-hero-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .record-start-surface,
  .editor-surface,
  #view-bible .selector-surface,
  #view-bible .chapter-guide-surface,
  #view-bible .godpeople-surface {
    animation: mobile-surface-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes mobile-view-enter {
  from {
    opacity: 0;
    transform: none;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mobile-hero-enter {
  from {
    opacity: 0;
    transform: none;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mobile-surface-enter {
  from {
    opacity: 0;
    transform: none;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: calc(50px + env(safe-area-inset-top));
    scroll-padding-bottom: calc(106px + env(safe-area-inset-bottom));
    background: #eef2ec;
  }

  body {
    min-height: 100dvh;
    background: #eef2ec;
  }

  .app-shell {
    padding-top: calc(50px + env(safe-area-inset-top));
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .sidebar {
    z-index: 120;
    height: calc(44px + env(safe-area-inset-top));
    align-items: flex-start;
    padding:
      calc(2px + env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      4px
      max(18px, env(safe-area-inset-left));
    background: #eef2ec;
  }

  .sidebar-brand,
  .sidebar-feedback {
    margin-top: 0;
  }

  .sidebar-nav {
    z-index: 140 !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    transform: translate3d(-50%, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
  }

  #view-bible .godpeople-surface {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  #view-mine .archive-overview {
    margin-top: -2px;
  }

  #view-mine .archive-stats {
    display: block;
    overflow: visible;
    padding: 0;
  }

  #view-mine .archive-mode-row {
    --archive-active-index: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-height: 42px;
    padding: 3px;
    border: 1px solid rgba(36, 43, 36, 0.07);
    border-radius: 999px;
    background: rgba(231, 235, 229, 0.78);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.72),
      0 1px 2px rgba(17, 17, 17, 0.025);
    backdrop-filter: blur(14px) saturate(1.08);
  }

  #view-mine .archive-mode-row[data-active="comments"] {
    --archive-active-index: 1;
  }

  #view-mine .archive-mode-row[data-active="highlights"] {
    --archive-active-index: 2;
  }

  #view-mine .archive-mode-row[data-active="saved"] {
    --archive-active-index: 3;
  }

  #view-mine .archive-mode-row::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
      0 7px 18px rgba(17, 17, 17, 0.08),
      0 1px 1px rgba(17, 17, 17, 0.04);
    transform: translate3d(calc(var(--archive-active-index) * 100%), 0, 0);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  #view-mine .archive-mode-card {
    position: relative;
    z-index: 1;
    min-height: 36px;
    padding: 0 4px;
    border-radius: 999px;
    gap: 4px;
    background: transparent;
    box-shadow: none;
    color: #767d73;
    font-size: 0.76rem;
    font-weight: 820;
    letter-spacing: 0;
    transition:
      color 180ms ease,
      transform 180ms ease;
  }

  #view-mine .archive-mode-card:hover,
  #view-mine .archive-mode-card.is-active {
    background: transparent;
    box-shadow: none;
  }

  #view-mine .archive-mode-card.is-active {
    color: #161914;
  }

  #view-mine .archive-mode-card strong {
    min-width: 17px;
    height: 17px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #72796f;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1;
  }

  #view-mine .archive-mode-card.is-active strong {
    background: #edf2ec;
    color: #364338;
  }
}

.commitment-hero-surface {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 20px;
  border-color: rgba(24, 31, 22, 0.12);
  background:
    linear-gradient(150deg, #121711 0%, #1d251b 54%, #293325 100%);
  color: #fbf8ef;
  box-shadow: 0 18px 48px rgba(20, 23, 17, 0.16);
}

.commitment-hero-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 36%),
    linear-gradient(90deg, rgba(202, 217, 195, 0.12), transparent 58%);
  pointer-events: none;
}

.commitment-hero-surface > * {
  position: relative;
  z-index: 1;
}

.commitment-hero-surface .daily-calendar-date {
  border-color: rgba(251, 248, 239, 0.13);
  background: rgba(251, 248, 239, 0.1);
  color: rgba(251, 248, 239, 0.82);
}

.commitment-hero-surface .daily-calendar-date strong {
  color: #fbf8ef;
}

.commitment-hero-surface .daily-calendar-date small {
  color: rgba(251, 248, 239, 0.7);
}

.commitment-selected {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding: 12px 13px;
  border: 1px solid rgba(251, 248, 239, 0.13);
  border-left: 2px solid rgba(211, 222, 209, 0.5);
  border-radius: 14px;
  background: rgba(251, 248, 239, 0.08);
  color: rgba(251, 248, 239, 0.76);
}

.commitment-selected span {
  color: rgba(251, 248, 239, 0.58);
  font-size: 0.76rem;
  font-weight: 800;
}

.commitment-selected strong {
  color: #fbf8ef;
  font-size: 0.96rem;
  line-height: 1.4;
}

.commitment-selected p {
  margin: 0;
  color: rgba(251, 248, 239, 0.74);
  font-size: 0.9rem;
  line-height: 1.58;
}

.commitment-example {
  display: block;
  color: rgba(251, 248, 239, 0.88);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.55;
}

.commitment-entry-button {
  min-height: 46px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(251, 248, 239, 0.22);
  background: rgba(251, 248, 239, 0.08);
  color: #fbf8ef;
  white-space: nowrap;
}

.commitment-entry-button:hover {
  background: rgba(251, 248, 239, 0.14);
  color: #ffffff;
}

.commitment-entry-button svg {
  width: 18px;
  height: 18px;
}

.native-passage-controls.hidden {
  display: none !important;
}

.passage-selection-card {
  padding: 0 20px 20px;
  border-top: 1px solid rgba(36, 43, 36, 0.08);
}

.passage-picker-open {
  position: relative;
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 16px 44px 16px 16px;
  border: 1px solid rgba(36, 43, 36, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(17, 17, 17, 0.035);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.passage-picker-open::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 9px;
  height: 9px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  opacity: 0.48;
  transform: translateY(-62%) rotate(45deg);
}

.passage-picker-open:hover,
.passage-picker-open:focus-visible {
  border-color: rgba(79, 100, 88, 0.24);
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 22px rgba(17, 17, 17, 0.06);
  transform: translateY(-1px);
}

.passage-picker-open span {
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 820;
}

.passage-picker-open strong {
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.38;
  font-weight: 850;
}

.passage-picker-open small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.commitment-modal,
.passage-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
}

.commitment-modal-backdrop,
.passage-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.32);
  backdrop-filter: blur(10px) saturate(1.08);
}

.commitment-modal-panel,
.passage-picker-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, calc(100vw - 32px));
  max-height: min(82dvh, 720px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(36, 43, 36, 0.09);
  border-radius: 8px;
  background: rgba(251, 252, 249, 0.97);
  box-shadow:
    0 24px 80px rgba(17, 17, 17, 0.22),
    0 1px 1px rgba(17, 17, 17, 0.04);
  transform: translate3d(-50%, -50%, 0);
}

.passage-picker-panel {
  width: min(780px, calc(100vw - 32px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 22px;
}

.commitment-modal-header,
.passage-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(36, 43, 36, 0.08);
}

.commitment-modal-header h2,
.passage-picker-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.36;
}

.commitment-modal-header span,
.passage-picker-header span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.commitment-option-list {
  display: grid;
  gap: 9px;
  overflow: auto;
  padding: 12px 14px 16px;
  scrollbar-width: none;
}

.commitment-option-list::-webkit-scrollbar {
  display: none;
}

.commitment-option {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px 46px 14px 14px;
  border: 1px solid rgba(36, 43, 36, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.025);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.commitment-option:hover,
.commitment-option:focus-visible {
  border-color: rgba(79, 100, 88, 0.22);
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.07);
}

.commitment-option.active {
  border-color: rgba(79, 100, 88, 0.38);
  background: #eef4ee;
}

.commitment-option-label {
  color: #667268;
  font-size: 0.75rem;
  font-weight: 850;
}

.commitment-option-marker {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 1px solid #aeb7ad;
  border-radius: 50%;
  background: #ffffff;
}

.commitment-option-marker::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #4f6458;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 150ms ease, transform 150ms ease;
}

.commitment-option.active .commitment-option-marker {
  border-color: #4f6458;
}

.commitment-option.active .commitment-option-marker::after {
  opacity: 1;
  transform: scale(1);
}

.commitment-option strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.42;
}

.commitment-option p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.58;
}

.commitment-option .commitment-example {
  color: #4f6458;
  font-size: 0.82rem;
  font-weight: 760;
}

.passage-picker-body {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 14px 16px 16px;
  scrollbar-width: none;
}

.passage-picker-body::-webkit-scrollbar {
  display: none;
}

.passage-picker-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 3px;
  min-height: 42px;
  border: 1px solid rgba(36, 43, 36, 0.07);
  border-radius: 999px;
  background: rgba(238, 241, 236, 0.74);
  scrollbar-width: none;
}

.passage-picker-tabs::-webkit-scrollbar {
  display: none;
}

.passage-picker-tabs button {
  min-height: 34px;
  display: inline-grid;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 2px;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #697268;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.passage-picker-tabs button span,
.passage-picker-tabs button small {
  display: block;
  line-height: 1.05;
}

.passage-picker-tabs button small {
  font-size: 0.62rem;
  font-weight: 760;
}

.passage-picker-tabs button.active {
  background: #ffffff;
  color: #182018;
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.07);
}

.passage-picker-tabs button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.passage-search-field {
  display: grid;
  gap: 7px;
}

.passage-search-field span,
.passage-picker-section > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.passage-search-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(36, 43, 36, 0.09);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 1px 1px rgba(17, 17, 17, 0.025);
}

.passage-search-field input:focus {
  outline: none;
  border-color: rgba(79, 100, 88, 0.34);
  box-shadow: 0 0 0 3px rgba(79, 100, 88, 0.09);
}

.passage-book-scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(36, 43, 36, 0.07);
  border-radius: 999px;
  background: rgba(238, 241, 236, 0.72);
}

.passage-book-scope button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6f766c;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.passage-book-scope button.active {
  background: #ffffff;
  color: #182018;
  box-shadow: 0 5px 14px rgba(17, 17, 17, 0.06);
}

.passage-picker-section {
  display: grid;
  gap: 8px;
}

.passage-book-grid,
.passage-number-grid {
  display: grid;
  gap: 6px;
}

.passage-book-grid {
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  max-height: 212px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.passage-number-grid {
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}

.passage-verse-grid {
  max-height: 178px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.passage-book-grid::-webkit-scrollbar,
.passage-verse-grid::-webkit-scrollbar {
  display: none;
}

.passage-book-grid button,
.passage-number-grid button {
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid rgba(36, 43, 36, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.86);
  color: #333b31;
  font-size: 0.83rem;
  font-weight: 760;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.passage-book-grid button:hover,
.passage-number-grid button:hover {
  border-color: rgba(79, 100, 88, 0.2);
  background: #ffffff;
  transform: translateY(-1px);
}

.passage-book-grid button.active,
.passage-number-grid button.active,
.passage-whole-button.active {
  border-color: rgba(79, 100, 88, 0.38);
  background: #263226;
  color: #fbf8ef;
}

.passage-number-grid button.range-start:not(.range-end),
.passage-number-grid button.range-end {
  background: #182018;
  color: #fbf8ef;
}

.passage-whole-button {
  min-height: 38px;
  justify-content: center;
  border-radius: 12px;
}

.passage-picker-loading {
  min-height: 40px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.84rem;
}

.passage-picker-footer {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(36, 43, 36, 0.08);
  background: rgba(251, 252, 249, 0.96);
}

.passage-picker-footer .primary-button,
.passage-picker-footer .ghost-button {
  min-height: 44px;
  justify-content: center;
  border-radius: 14px;
}

.feedback-modal-panel {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(430px, calc(100vw - 32px)) !important;
  max-height: min(72dvh, 620px) !important;
  padding: 15px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  transform: translate3d(-50%, -50%, 0);
  scrollbar-width: none;
}

.feedback-modal-panel::-webkit-scrollbar {
  display: none;
}

.action-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
}

.action-modal.hidden {
  display: none;
}

.action-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 20, 0.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.action-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px));
  overflow: auto;
  border: 1px solid rgba(36, 43, 36, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 80px rgba(22, 28, 23, 0.18);
  transform: translate3d(-50%, -50%, 0);
  scrollbar-width: none;
}

.action-modal-panel::-webkit-scrollbar {
  display: none;
}

.action-modal-form {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.action-modal-copy {
  display: grid;
  gap: 7px;
}

.action-modal-copy h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

.action-modal-copy p:not(.modal-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.58;
  white-space: pre-line;
}

.action-modal-input-wrap {
  display: grid;
  gap: 7px;
}

.action-modal-input-wrap.hidden {
  display: none;
}

.action-modal-input-wrap textarea {
  min-height: 96px;
}

.action-modal-actions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 8px;
}

.action-modal-actions .primary-button,
.action-modal-actions .ghost-button {
  justify-content: center;
  border-radius: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  .commitment-modal-panel,
  .passage-picker-panel,
  .feedback-modal-panel,
  .action-modal-panel {
    animation: centered-modal-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes centered-modal-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, calc(-50% + 10px), 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@media (max-width: 640px) {
  .commitment-hero-surface {
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(152deg, #11170f 0%, #1b2519 58%, #263321 100%);
  }

  .commitment-hero-surface .daily-calendar-date {
    min-width: 104px;
    grid-template-columns: auto auto;
    justify-content: start;
    row-gap: 2px;
    column-gap: 7px;
  }

  .commitment-hero-surface .daily-calendar-date strong {
    font-size: 1.42rem;
  }

  .commitment-hero-surface .daily-calendar-date small {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .commitment-selected {
    padding: 11px 12px;
    border-radius: 13px;
  }

  .commitment-selected strong {
    font-size: 0.92rem;
  }

  .commitment-selected p {
    display: block;
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .commitment-selected .commitment-example {
    font-size: 0.76rem;
    line-height: 1.48;
  }

  .passage-selection-card {
    padding: 0 8px 8px;
    border-top: 0;
  }

  .commitment-entry-button {
    width: 100%;
    min-height: 50px;
    border-radius: 999px;
    font-weight: 850;
    justify-content: center;
  }

  .passage-picker-open {
    min-height: 74px;
    padding: 13px 40px 13px 13px;
    border-radius: 16px;
  }

  .passage-picker-open strong {
    font-size: 1rem;
  }

  .commitment-modal-panel,
  .passage-picker-panel {
    width: calc(100vw - 24px);
    max-height: min(78dvh, 700px);
    border-radius: 20px;
  }

  .commitment-modal-panel {
    border-radius: 8px;
  }

  .commitment-modal-header,
  .passage-picker-header {
    padding: 15px 15px 12px;
  }

  .commitment-option-list {
    padding: 10px 12px 14px;
  }

  .commitment-option {
    padding: 13px;
    padding-right: 44px;
    border-radius: 8px;
  }

  .passage-picker-body {
    gap: 12px;
    padding: 12px;
  }

  .passage-picker-tabs {
    margin: 0 -1px;
  }

  .passage-book-grid {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    max-height: 154px;
  }

  .passage-number-grid {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  }

  .passage-verse-grid {
    max-height: 122px;
  }

  .passage-book-grid button,
  .passage-number-grid button {
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.8rem;
  }

  .passage-picker-footer {
    padding: 10px 12px 12px;
  }

  .feedback-modal-panel {
    width: min(380px, calc(100vw - 28px)) !important;
    max-height: min(58dvh, 500px) !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .feedback-modal-header {
    align-items: center;
    gap: 10px;
  }

  .feedback-modal-header .modal-kicker {
    margin-bottom: 2px;
    color: #687465;
    font-size: 0.7rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .feedback-modal-header h2 {
    font-size: 1.08rem;
    line-height: 1.3;
  }

  .feedback-modal-header .icon-action {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .feedback-modal-header .icon-action svg {
    width: 18px;
    height: 18px;
  }

  .feedback-form {
    gap: 7px;
  }

  .feedback-form label {
    gap: 4px;
  }

  .feedback-form label span {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .feedback-form input,
  .feedback-form textarea {
    padding: 9px 11px;
    font-size: 0.86rem;
  }

  .feedback-form textarea {
    height: 64px;
    min-height: 64px;
  }

  .feedback-more-fields summary {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
  }

  .feedback-submit {
    min-height: 44px;
    border-radius: 999px;
  }
}

.feedback-more-fields {
  display: grid;
  gap: 8px;
}

.feedback-more-fields summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 0 13px;
  border: 1px solid rgba(36, 43, 36, 0.08);
  border-radius: 999px;
  background: rgba(244, 247, 243, 0.86);
  color: #4f5b51;
  font-size: 0.82rem;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}

.feedback-more-fields summary::-webkit-details-marker {
  display: none;
}

.feedback-more-fields[open] summary {
  background: #edf2ec;
  color: #1f2a22;
}

@media (max-width: 640px) {
  .app-shell {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .sidebar-nav {
    bottom: 0 !important;
    width: min(430px, 100%);
    min-height: calc(62px + env(safe-area-inset-bottom));
    padding:
      7px max(18px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    border-color: rgba(36, 43, 36, 0.09);
    background: #ffffff;
    box-shadow:
      0 -1px 0 rgba(255, 255, 255, 0.92) inset,
      0 -10px 24px rgba(28, 34, 28, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-item {
    height: 46px;
    min-height: 46px;
    grid-template-rows: 26px 11px;
    gap: 1px;
  }

  .nav-item .icon-shell {
    width: 32px;
    height: 26px;
  }

  .nav-item::after,
  .nav-item.active::after {
    font-size: 0.62rem;
  }

  #view-auth .auth-panel {
    position: relative;
    gap: 14px;
    margin-top: 8px;
    padding: 2px 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #view-auth .account-status {
    gap: 3px;
    padding: 0 2px;
  }

  #view-auth .account-status strong {
    font-size: 1.18rem;
    line-height: 1.35;
  }

  #view-auth .account-status span {
    color: #71786f;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.45;
  }

  #view-auth .account-form {
    gap: 8px;
  }

  #view-auth .auth-link-row {
    justify-content: flex-end;
    min-height: 26px;
    margin-top: -4px;
  }

  #view-auth .account-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 2px;
  }

  #view-auth .account-form input:not([type="checkbox"]) {
    min-height: 50px;
    padding: 0 16px;
    border-color: rgba(36, 43, 36, 0.1);
    border-radius: 15px;
    background: #ffffff;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.82) inset,
      0 10px 26px rgba(36, 43, 36, 0.04);
    font-size: 16px;
    font-weight: 760;
  }

  #view-auth .account-form input:not([type="checkbox"])::placeholder {
    font-weight: 500;
  }

  #view-auth .auth-link-button {
    min-height: 26px;
    color: #6e766c;
    font-size: 0.82rem;
    font-weight: 760;
  }

  #view-auth .account-actions .primary-button,
  #view-auth .account-actions .ghost-button {
    width: 100%;
    min-height: 48px;
    border-radius: 15px;
    font-weight: 850;
  }

  #view-auth .account-actions .ghost-button {
    min-height: 44px;
    background: rgba(255, 255, 255, 0.7);
    color: #565f55;
  }

  #view-auth .profile-edit-form {
    padding-top: 4px;
    border-top: 0;
  }

  #view-auth .account-danger-zone {
    margin-top: 12px;
    padding: 11px 12px;
    border-color: rgba(138, 65, 49, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.42);
  }

  #view-auth .account-danger-zone strong {
    font-size: 0.86rem;
  }

  #view-auth .account-danger-zone span {
    font-size: 0.76rem;
  }

  #view-auth .account-delete-button {
    min-height: 44px;
    padding: 0 13px;
    border-color: rgba(138, 65, 49, 0.16);
    background: rgba(255, 255, 255, 0.46);
    font-size: 0.8rem;
  }

  .passage-picker-panel {
    width: min(390px, calc(100vw - 16px));
    max-height: min(86dvh, 760px);
    border-radius: 22px;
  }

  .commitment-modal-panel {
    width: min(390px, calc(100vw - 16px));
    max-height: min(84dvh, 740px);
    border-radius: 8px;
  }

  .commitment-modal-header {
    align-items: center;
    padding: 14px 14px 11px;
  }

  .commitment-modal-header .modal-kicker {
    margin-bottom: 3px;
    font-family: "SUIT", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0;
  }

  .commitment-modal-header h2 {
    font-family: "SUIT", sans-serif;
    font-size: 1.12rem;
    line-height: 1.32;
    font-weight: 850;
  }

  .commitment-modal-header span {
    margin-top: 3px;
    font-size: 0.8rem;
  }

  .commitment-modal-header .icon-action {
    width: 45px;
    min-width: 45px;
    height: 45px;
    min-height: 45px;
  }

  .commitment-option-list {
    gap: 8px;
    padding: 9px 10px 12px;
  }

  .commitment-option {
    grid-template-rows: auto auto auto auto;
    gap: 3px;
    padding: 11px 42px 11px 12px;
    border-radius: 8px;
    box-shadow: none;
  }

  .commitment-option:hover,
  .commitment-option:focus-visible {
    transform: none;
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.05);
  }

  .commitment-option strong {
    grid-row: 1;
    display: block;
    font-size: 0.92rem;
    line-height: 1.32;
  }

  .commitment-option-label {
    grid-row: 2;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .commitment-option-marker {
    top: 11px;
    right: 12px;
  }

  .commitment-option p {
    grid-row: 3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.8rem;
    line-height: 1.42;
  }

  .commitment-option .commitment-example {
    grid-row: 4;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .passage-picker-header {
    align-items: center;
    padding: 14px 14px 11px;
  }

  .passage-picker-header .modal-kicker {
    display: none;
  }

  .passage-picker-header h2 {
    font-family: "SUIT", sans-serif;
    font-size: 1.12rem;
    line-height: 1.32;
    font-weight: 850;
  }

  .passage-picker-header span {
    margin-top: 3px;
    font-size: 0.8rem;
  }

  .passage-picker-header .icon-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .passage-picker-body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(128px, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto minmax(122px, 0.44fr) minmax(152px, 0.56fr);
    grid-template-areas:
      "tabs tabs"
      "search search"
      "books chapters"
      "books verses";
    gap: 10px;
    overflow: hidden;
    padding: 12px;
  }

  .passage-picker-tabs {
    grid-area: tabs;
    min-width: 0;
    min-height: 40px;
  }

  .passage-search-field {
    grid-area: search;
    min-width: 0;
    gap: 6px;
  }

  .passage-search-field input {
    min-height: 42px;
    border-radius: 13px;
  }

  .passage-book-section {
    grid-area: books;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .passage-chapter-section {
    grid-area: chapters;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .passage-verse-section {
    grid-area: verses;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .passage-book-section,
  .passage-chapter-section,
  .passage-verse-section {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
  }

  .passage-book-scope {
    gap: 3px;
    padding: 3px;
    border-radius: 14px;
  }

  .passage-book-scope button {
    min-height: 30px;
    font-size: 0.72rem;
  }

  .passage-book-grid {
    grid-template-columns: 1fr;
    max-height: none;
    min-height: 0;
    overflow: auto;
    padding-right: 0;
  }

  .passage-number-grid,
  .passage-verse-grid {
    max-height: none;
    min-height: 0;
    overflow: auto;
    align-content: start;
  }

  .passage-number-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  }

  .passage-book-grid::-webkit-scrollbar,
  .passage-number-grid::-webkit-scrollbar {
    display: none;
  }

  .passage-book-grid button,
  .passage-number-grid button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .passage-book-grid button {
    justify-content: flex-start;
    padding: 0 10px;
    text-align: left;
  }

  .passage-whole-button {
    min-height: 36px;
    border-radius: 11px;
    font-size: 0.8rem;
  }

  .passage-picker-footer {
    padding: 10px 12px 12px;
  }

  .editor-surface,
  .scripture-surface,
  #view-bible .selector-surface,
  #view-bible .chapter-guide-surface,
  #view-bible .godpeople-surface,
  .detail-page,
  .profile-page,
  .group-records-surface {
    scroll-margin-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  #view-bible .godpeople-surface,
  .scripture-surface {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  .reader-body,
  .inline-reader,
  .godpeople-reader {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .passage-picker-body {
    overscroll-behavior: contain;
  }

  .feedback-more-fields {
    gap: 9px;
  }

  .feedback-more-fields summary {
    width: 100%;
    min-height: 40px;
  }

  .feedback-more-fields[open] {
    padding-top: 2px;
  }

  #view-new .scripture-surface {
    max-height: min(440px, 56dvh);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    padding-bottom: 0;
  }

  #view-new .scripture-surface .surface-header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(36, 43, 36, 0.07);
  }

  #view-new .inline-reader {
    max-height: min(318px, 40dvh);
    overflow: auto;
    padding-bottom: 18px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #view-new .inline-reader::after {
    content: "";
    display: block;
    height: 18px;
  }

  .mobile-input-active .sidebar-feedback,
  .modal-open .sidebar-feedback {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
  }

  body.reader-view-active .sidebar,
  body.reader-view-active .sidebar-nav {
    z-index: 220 !important;
  }

  body.reader-view-active .nav-item.active .icon-shell {
    background: #edf2ec;
  }

  #view-bible .section-header {
    min-height: 36px;
    margin-bottom: -2px;
  }

  #view-bible .selector-surface {
    padding: 7px;
    border-radius: 18px;
  }

  #view-bible .selector-surface .selector-header,
  #view-bible .selector-surface .provider-note {
    display: none;
  }

  #view-bible .selector-surface .passage-selection-card {
    padding: 0;
  }

  #view-bible .selector-surface .passage-picker-open {
    min-height: 64px;
    padding: 12px 40px 12px 14px;
    border-radius: 16px;
  }

  #view-bible .selector-surface .passage-picker-open small {
    display: none;
  }

  #view-bible .chapter-guide-surface {
    padding: 0;
    border-radius: 17px;
    overflow: hidden;
  }

  #view-bible .chapter-guide-surface .collapsible-summary {
    min-height: 58px;
    padding: 13px 15px;
  }

  #view-bible .chapter-guide-surface .collapsible-summary h2 {
    font-size: 1rem;
    line-height: 1.35;
  }

  #view-bible .chapter-guide-surface .collapsible-body {
    padding: 0 15px 15px;
  }

  #view-bible .godpeople-surface {
    padding-bottom: 18px;
  }

  #view-bible .godpeople-reader {
    padding-bottom: 20px;
  }

  #view-bible .bible-chapter-nav {
    padding: 4px 16px 12px;
  }

  #view-bible .chapter-comments-inline {
    margin-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  #view-new .commitment-hero-surface {
    gap: 12px;
    min-height: clamp(340px, calc(100dvh - 376px - env(safe-area-inset-bottom)), 468px);
    align-content: space-between;
    padding: 14px;
    border-radius: 20px;
  }

  #view-new .commitment-hero-surface .prayer-hero-top {
    align-items: center;
  }

  #view-new .commitment-hero-surface .daily-calendar-date {
    min-width: 92px;
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  #view-new .commitment-hero-surface .daily-calendar-date strong {
    font-size: 1.28rem;
    line-height: 1;
  }

  #view-new .commitment-hero-surface .daily-calendar-date span,
  #view-new .commitment-hero-surface .daily-calendar-date small {
    font-size: 0.66rem;
  }

  #view-new .prayer-hero-copy {
    gap: 7px;
  }

  #view-new .prayer-hero-copy .surface-kicker {
    font-size: 0.72rem;
  }

  #view-new .prayer-hero-copy h2 {
    font-size: 0.95rem;
    line-height: 1.32;
  }

  #view-new .prayer-hero-copy .today-passage-button {
    font-size: 1.28rem;
    line-height: 1.38;
  }

  #view-new .commitment-selected {
    gap: 4px;
    margin-top: 0;
    padding: 9px 11px;
    border-radius: 12px;
  }

  #view-new .commitment-selected span {
    font-size: 0.69rem;
  }

  #view-new .commitment-selected strong {
    font-size: 0.9rem;
  }

  #view-new .commitment-selected p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  #view-new .prayer-hero-actions {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 7px;
  }

  #view-new .commitment-entry-button,
  #view-new .prayer-write-button {
    min-height: 44px;
  }

  #view-new .commitment-entry-button {
    padding: 0 14px;
  }

  #composerPane:not(.is-writing-open) .editor-surface,
  #composerPane:not(.is-writing-open) .record-passage-attach,
  #composerPane:not(.is-writing-open) .scripture-surface,
  #composerPane:not(.is-writing-open) .recommendation-surface {
    display: none;
  }

  #composerPane:not(.is-writing-open) .record-start-surface {
    margin-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  #composerPane.is-writing-open .commitment-hero-surface {
    display: none;
  }

  #composerPane.is-writing-open .record-start-surface {
    margin-top: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    #composerPane.is-writing-open .editor-surface {
      animation: mobile-surface-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
  }

  #view-new .editor-surface {
    padding: 14px;
  }

  #view-new .editor-heading {
    margin-bottom: 2px;
  }

  #view-new .editor-form {
    gap: 12px;
  }

  #view-new .reflection-title-field {
    padding-bottom: 12px;
  }

  #view-new .reflection-body-field {
    gap: 6px;
  }

  #view-new .reflection-body-field textarea {
    height: clamp(132px, 17.5vh, 154px);
    min-height: 132px;
    padding: 14px;
    line-height: 1.68;
  }

  #view-new .reflection-body-stats {
    margin-top: -4px;
    font-size: 0.76rem;
  }

  #view-new .editor-footer {
    position: static;
    display: grid;
    grid-template-columns: minmax(118px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(36, 43, 36, 0.08);
    background: transparent;
    box-shadow: none;
  }

  .mobile-input-active #view-new .editor-footer {
    margin: 0;
  }

  #view-new .visibility-stack {
    gap: 0;
    min-width: 0;
  }

  #view-new .visibility-field {
    min-height: 44px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 10px;
    border: 1px solid rgba(36, 43, 36, 0.08);
    border-radius: 14px;
    background: #f6f8f4;
  }

  #view-new .visibility-field > span {
    display: none;
  }

  #view-new .visibility-field select {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0 20px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.86rem;
    font-weight: 850;
  }

  #view-new #saveHint,
  #view-new .draft-status {
    display: none;
  }

  #view-new .editor-submit-stack,
  #view-new .editor-submit-actions {
    width: 100%;
    min-width: 0;
  }

  #view-new .editor-submit-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  #view-new .editor-submit-actions .primary-button,
  #view-new .editor-submit-actions .ghost-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    border-radius: 14px;
    padding-inline: 10px;
  }

  #view-new .editor-extra-fields > summary {
    min-height: 44px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
  }

  #view-new .record-passage-attach .passage-picker-open {
    min-height: 62px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #composerPane.is-writing-open .record-passage-attach {
    margin-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  #view-new .record-passage-attach .passage-picker-open small {
    display: none;
  }

  .passage-picker-body {
    padding-bottom: 12px;
    scroll-padding-bottom: 12px;
  }

  .passage-picker-panel {
    width: min(390px, calc(100vw - 16px));
    max-height: min(88dvh, 760px);
  }

  .passage-picker-panel .passage-picker-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "tabs tabs"
      "search search"
      "books books"
      "chapters verses";
    align-content: start;
    gap: 12px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .passage-picker-panel .passage-picker-tabs {
    grid-area: tabs;
  }

  .passage-picker-panel .passage-search-field {
    grid-area: search;
  }

  .passage-picker-panel .passage-book-section {
    grid-area: books;
    overflow: visible;
  }

  .passage-picker-panel .passage-chapter-section {
    grid-area: chapters;
    overflow: visible;
  }

  .passage-picker-panel .passage-verse-section {
    grid-area: verses;
    overflow: visible;
  }

  .passage-picker-panel .passage-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 174px;
    min-height: 0;
    gap: 8px;
    overflow: auto;
  }

  .passage-picker-panel .passage-number-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .passage-picker-panel .passage-verse-grid {
    max-height: 198px;
    overflow: auto;
  }

  .passage-picker-panel .passage-book-grid button,
  .passage-picker-panel .passage-number-grid button,
  .passage-picker-panel .passage-whole-button {
    min-height: 42px;
    border-radius: 14px;
  }

  .passage-picker-panel .passage-book-grid button {
    justify-content: center;
    padding: 0 8px;
    text-align: center;
  }

  .app-shell,
  body.reader-view-active .app-shell {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .sidebar,
  body.reader-view-active .sidebar {
    left: 0;
    right: 0;
    bottom: 0;
    inset: auto 0 0;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    z-index: 170;
  }

  .sidebar-brand,
  body.reader-view-active .sidebar-brand {
    display: none !important;
    pointer-events: none;
  }

  .sidebar-nav,
  body.reader-view-active .sidebar-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(64px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    transform: none !important;
    padding:
      7px max(18px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left)) !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    border-color: rgba(36, 43, 36, 0.1) !important;
    background: #ffffff !important;
    box-shadow: 0 -1px 0 rgba(36, 43, 36, 0.05) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.native-ios-shell .app-shell,
  body.native-ios-shell.reader-view-active .app-shell {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav {
    min-height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding:
      7px max(18px, env(safe-area-inset-right))
      max(14px, calc(8px + env(safe-area-inset-bottom)))
      max(18px, env(safe-area-inset-left)) !important;
  }

  .nav-item,
  body.reader-view-active .nav-item {
    height: 48px;
    min-height: 48px;
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 0 2px;
    border-radius: 0;
    background: transparent;
    color: #777f75;
    box-shadow: none;
  }

  .nav-item.hidden,
  body.reader-view-active .nav-item.hidden {
    display: none !important;
  }

  .nav-item.active,
  .nav-item.active:hover,
  body.reader-view-active .nav-item.active,
  body.reader-view-active .nav-item.active:hover {
    background: transparent;
    color: #182118;
    box-shadow: none;
  }

  .nav-item .icon-shell,
  body.reader-view-active .nav-item .icon-shell {
    width: 34px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    transform: none;
  }

  .nav-item.active .icon-shell,
  body.reader-view-active .nav-item.active .icon-shell {
    background: #edf2ec;
    color: #182118;
  }

  .nav-item::after,
  .nav-item.active::after,
  body.reader-view-active .nav-item::after,
  body.reader-view-active .nav-item.active::after {
    content: attr(title);
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    color: currentColor;
    font-size: 0.66rem;
    font-weight: 760;
    line-height: 1;
    opacity: 0.88;
    transform: none;
    white-space: nowrap;
  }

  .nav-item.active::before,
  body.reader-view-active .nav-item.active::before {
    display: none;
  }

  body.reader-view-active #view-bible .godpeople-topbar {
    gap: 10px;
    padding: 14px 12px 8px;
  }

  body.reader-view-active #view-bible .reader-topbar-actions {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    gap: 6px;
  }

  body.reader-view-active #view-bible .underline-mode-toggle {
    min-height: 42px;
    padding: 3px;
  }

  body.reader-view-active #view-bible .underline-mode-button {
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  body.reader-view-active #view-bible .reader-comment-button,
  body.reader-view-active #view-bible .reader-write-button {
    grid-column: auto;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .sidebar-feedback {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    bottom: auto;
    z-index: 180;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(36, 43, 36, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #4f5b4f;
    box-shadow: 0 8px 24px rgba(30, 36, 30, 0.1);
    pointer-events: auto;
    transform: none;
  }

  .sidebar-feedback svg {
    width: 19px;
    height: 19px;
  }

  body[data-active-view="new"] .sidebar-feedback,
  body[data-active-view="group"] .sidebar-feedback,
  body[data-active-view="mine"] .sidebar-feedback,
  body[data-active-view="bible"] .sidebar-feedback,
  body[data-active-view="admin"] .sidebar-feedback {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  body[data-active-view="auth"] .sidebar-feedback {
    top: calc(55px + env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    border-color: transparent;
    background: transparent;
    color: #6b7469;
    box-shadow: none;
  }

  body[data-active-view="auth"] .sidebar-feedback:hover,
  body[data-active-view="auth"] .sidebar-feedback:focus-visible {
    border-color: rgba(36, 43, 36, 0.08);
    background: rgba(255, 255, 255, 0.74);
  }

  body[data-active-view="auth"] .sidebar-feedback svg {
    width: 18px;
    height: 18px;
  }

  body.reader-view-active .sidebar-feedback {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .modal-open .sidebar-nav,
  .mobile-input-active .sidebar-nav {
    display: none !important;
    pointer-events: none;
  }

  .modal-open .sidebar,
  .mobile-input-active .sidebar {
    pointer-events: none;
  }

  .modal-open .sidebar-brand,
  .mobile-input-active .sidebar-brand {
    display: none !important;
  }

  .modal-open .sidebar-feedback,
  .mobile-input-active .sidebar-feedback {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  body.reader-view-active.modal-open .sidebar-nav {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
  }

  body.passage-picker-open .sidebar,
  body.passage-picker-open .sidebar-nav {
    pointer-events: none;
  }

  body.passage-picker-open .sidebar-nav {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.passage-picker-open .passage-picker-backdrop,
  body.reader-view-active .passage-picker-backdrop {
    inset: 0;
    background: rgba(17, 17, 17, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.reader-view-active .passage-picker-backdrop {
    bottom: calc(78px + env(safe-area-inset-bottom));
    background: transparent;
  }

  body.passage-picker-open .passage-picker-panel,
  body.reader-view-active .passage-picker-panel {
    top: calc(10px + env(safe-area-inset-top));
    bottom: calc(86px + env(safe-area-inset-bottom));
    max-height: none;
    height: auto;
    isolation: isolate;
    background: #fbfcf9;
    transform: translate3d(-50%, 0, 0);
    animation: reader-passage-picker-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  body.reader-view-active .passage-picker-panel {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }

  body.passage-picker-open .passage-picker-header,
  body.passage-picker-open .passage-picker-body,
  body.passage-picker-open .passage-picker-footer,
  body.reader-view-active .passage-picker-header,
  body.reader-view-active .passage-picker-body,
  body.reader-view-active .passage-picker-footer {
    background: #fbfcf9;
  }

  body.passage-picker-open .passage-picker-tabs,
  body.passage-picker-open .passage-book-scope,
  body.reader-view-active .passage-picker-tabs,
  body.reader-view-active .passage-book-scope {
    background: #eef2eb;
  }

  body.reader-view-active #view-bible .godpeople-surface {
    padding-bottom: 24px;
  }

  body.reader-view-active #view-bible .godpeople-reader {
    padding-bottom: 28px;
  }

  body.reader-view-active #view-bible .bible-chapter-nav {
    padding-bottom: 24px;
  }

  body.reader-view-active #view-bible .chapter-comments-inline {
    margin-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  body.reader-view-active {
    background: #fbfcf8;
  }

  body.reader-view-active .app-shell {
    padding-right: 0;
    padding-left: 0;
    background: #fbfcf8;
  }

  body.reader-view-active .content-column,
  body.reader-view-active #view-bible {
    width: 100%;
    max-width: 100%;
  }

  body.reader-view-active #view-bible {
    gap: 12px;
  }

  body.reader-view-active #view-bible > .section-header,
  body.reader-view-active #view-bible .selector-surface,
  body.reader-view-active #view-bible .chapter-guide-surface,
  body.reader-view-active #view-bible .chapter-comments-inline {
    width: auto;
    margin-right: max(18px, env(safe-area-inset-right));
    margin-left: max(18px, env(safe-area-inset-left));
  }

  body.reader-view-active #view-bible .godpeople-surface {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fbfcf8;
    box-shadow: none;
    padding-bottom: 26px;
  }

  body.reader-view-active #view-bible .godpeople-topbar,
  body.reader-view-active #view-bible .godpeople-reader,
  body.reader-view-active #view-bible .bible-chapter-nav {
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
  }

  body.reader-view-active #view-bible .godpeople-reader {
    padding-top: 6px;
    padding-bottom: 28px;
  }

  body.reader-view-active #view-bible .bible-chapter-nav {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  body.reader-view-active #view-bible .interactive-reader-paragraph {
    gap: 9px;
  }

  body.reader-view-active #view-bible .interactive-verse {
    column-gap: 10px;
    padding: 7px 0;
  }

  body.reader-view-active #view-bible .verse-number-button {
    min-width: 36px;
    margin-left: -4px;
    color: #798276;
  }

  body.reader-view-active #view-bible .chapter-comments-inline {
    margin-bottom: 0;
  }

  body.reader-view-active .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    z-index: 1600 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -1px 0 rgba(36, 43, 36, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@keyframes reader-passage-picker-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, 8px, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@media (max-width: 640px) {
  #view-auth.active {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #view-auth .auth-panel,
  #view-auth .account-form {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  html,
  body,
  body.native-shell {
    background-color: #eef2ec;
  }

  body.reader-view-active,
  body.native-shell.reader-view-active {
    background-color: #fbfcf8;
  }

  body.native-shell .app-shell {
    min-height: 100dvh;
  }

  body.native-ios-shell .app-shell,
  body.native-ios-shell.reader-view-active .app-shell {
    padding-bottom: calc(128px + env(safe-area-inset-bottom));
  }

  .sidebar-nav,
  body.reader-view-active .sidebar-nav,
  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav {
    bottom: 0 !important;
    min-height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding:
      7px max(18px, env(safe-area-inset-right))
      max(12px, calc(9px + env(safe-area-inset-bottom)))
      max(18px, env(safe-area-inset-left)) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -1px 0 rgba(36, 43, 36, 0.08) !important;
  }

  .nav-item,
  body.reader-view-active .nav-item {
    height: 52px;
    min-height: 52px;
    display: grid !important;
    grid-template-rows: 31px 14px;
    align-content: center;
    justify-items: center;
    gap: 2px;
    padding: 1px 0 0;
    border: 0;
  }

  .nav-item .icon-shell,
  body.reader-view-active .nav-item .icon-shell {
    width: 38px;
    height: 31px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 999px;
  }

  .nav-item .icon-shell svg,
  body.reader-view-active .nav-item .icon-shell svg {
    width: 20px;
    height: 20px;
  }

  .nav-item::after,
  .nav-item.active::after,
  body.reader-view-active .nav-item::after,
  body.reader-view-active .nav-item.active::after {
    align-self: start;
    font-size: 0.67rem;
    line-height: 1;
    opacity: 0.82;
  }

  .nav-item.active .icon-shell,
  body.reader-view-active .nav-item.active .icon-shell {
    background: #edf3ec;
  }

  #composerPane.is-writing-open {
    padding-bottom: calc(42px + env(safe-area-inset-bottom));
  }

  #composerPane.is-writing-open .editor-surface {
    margin-bottom: 12px;
  }

  #composerPane.is-writing-open .record-passage-attach {
    margin-bottom: calc(44px + env(safe-area-inset-bottom));
  }

  body.reader-view-active #view-bible .godpeople-reader {
    padding-bottom: 36px;
  }

  body.reader-view-active #view-bible .bible-chapter-nav {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  body.reader-view-active #view-bible .chapter-comments-inline {
    margin-bottom: calc(128px + env(safe-area-inset-bottom));
  }

  .passage-picker-panel .passage-picker-body {
    gap: 11px;
  }

  .passage-picker-panel .passage-book-grid {
    max-height: min(204px, 25dvh);
  }

  .passage-picker-panel .passage-number-grid,
  .passage-picker-panel .passage-verse-grid {
    max-height: min(196px, 24dvh);
  }

  .passage-picker-panel .passage-picker-tabs button:disabled {
    display: inline-grid;
  }

  .passage-picker-section > span {
    font-size: 0.74rem;
  }

  #view-mine {
    gap: 10px;
  }

  #view-mine .archive-search-main {
    min-height: 38px;
    border: 1px solid rgba(36, 43, 36, 0.07);
    box-shadow: none;
  }

  #view-mine .archive-search-main input {
    min-height: 38px;
    font-size: 0.84rem;
  }

  #view-mine .archive-mode-row {
    min-height: 38px;
    padding: 2px;
    border-color: rgba(36, 43, 36, 0.06);
    background: rgba(237, 241, 235, 0.72);
    box-shadow: none;
  }

  #view-mine .archive-mode-row::before {
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc((100% - 4px) / 4);
    box-shadow: 0 5px 14px rgba(17, 17, 17, 0.06);
  }

  #view-mine .archive-mode-card {
    min-height: 34px;
    padding: 0 3px;
    font-size: 0.73rem;
  }

  #view-mine .archive-mode-card strong {
    display: none;
  }

  #view-mine .archive-entry-card[data-private-id] .thread-meta-line {
    gap: 6px;
    margin-bottom: 6px;
  }

  #view-mine .archive-entry-card[data-private-id] {
    padding: 12px 13px;
  }

  #view-mine .archive-entry-card[data-private-id] .thread-meta-line > strong,
  #view-mine .archive-entry-card[data-private-id] .thread-meta-line > .thread-time:nth-of-type(3) {
    display: none;
  }

  #view-mine .archive-entry-card[data-private-id] .content-type-badge {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.68rem;
  }

  #view-mine .archive-entry-card[data-private-id] .thread-title {
    display: -webkit-box;
    overflow: hidden !important;
    margin-top: 1px;
    font-size: 0.94rem;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #view-mine .archive-entry-card[data-private-id] .article-note-meta {
    margin-top: 7px;
    font-size: 0.76rem;
    line-height: 1.38;
  }

  #view-mine .archive-entry-card[data-private-id] .thread-preview {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 7px;
    color: #6f776d;
    font-size: 0.84rem;
    line-height: 1.58;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #view-mine .archive-entry-card[data-private-id] .article-note-meta + .thread-preview {
    margin-top: 7px;
  }
}

@media (max-width: 640px) {
  body {
    --mobile-nav-count: 4;
    --mobile-nav-offset: 0%;
    --mobile-nav-cell-width: 25%;
    --mobile-nav-width: min(80vw, 330px);
    --mobile-nav-height: 68px;
    --mobile-nav-bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    --mobile-nav-icon-size: 24px;
    --mobile-nav-icon-scale: 1;
    --mobile-nav-active-icon-scale: 1.08;
  }

  body.mobile-nav-expanded {
    --mobile-nav-width: min(80vw, 330px);
    --mobile-nav-height: 68px;
    --mobile-nav-bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    --mobile-nav-icon-size: 24px;
    --mobile-nav-icon-scale: 1;
    --mobile-nav-active-icon-scale: 1.08;
  }

  body.mobile-nav-compact {
    --mobile-nav-width: min(80vw, 330px);
    --mobile-nav-height: 55px;
    --mobile-nav-bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px));
    --mobile-nav-icon-size: 21px;
    --mobile-nav-icon-scale: 0.94;
    --mobile-nav-active-icon-scale: 1.08;
  }

  body.native-ios-shell .app-shell,
  body.native-ios-shell.reader-view-active .app-shell,
  .app-shell,
  body.reader-view-active .app-shell {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }

  .sidebar,
  body.reader-view-active .sidebar {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 1600 !important;
  }

  body[data-active-view="mine"] .sidebar::after,
  body[data-active-view="group"] .sidebar::after,
  body[data-active-view="new"] .sidebar::after,
  body.reader-view-active .sidebar::after,
  body.detail-view-active .sidebar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + 52px);
    background: #fbfcf8;
    box-shadow: 0 -1px 0 rgba(232, 237, 229, 0.72);
    pointer-events: none;
    z-index: 0;
  }

  body[data-active-view="new"] .sidebar::after {
    height: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + 28px);
  }

  @media (max-height: 820px) {
    body[data-active-view="new"] .sidebar::after {
      height: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + 2px);
    }
  }

  .sidebar-brand,
  .sidebar-feedback,
  body.reader-view-active .sidebar-brand,
  body.reader-view-active .sidebar-feedback {
    display: none !important;
  }

  .sidebar-nav,
  body.reader-view-active .sidebar-nav,
  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--mobile-nav-bottom) !important;
    width: var(--mobile-nav-width) !important;
    max-width: calc(100vw - 34px) !important;
    height: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    display: grid !important;
    grid-template-columns: repeat(var(--mobile-nav-count), minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 0 !important;
    padding: 6px !important;
    margin: 0 !important;
    border: 1px solid rgba(26, 33, 27, 0.1) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
      0 18px 42px rgba(23, 28, 24, 0.16),
      0 6px 14px rgba(23, 28, 24, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(18px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateZ(0) !important;
    transform-origin: center bottom !important;
    transition:
      width 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
      height 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
      bottom 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
      background 220ms ease,
      box-shadow 220ms ease,
      opacity 180ms ease,
      transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    z-index: 1 !important;
  }

  .sidebar-nav::before,
  body.reader-view-active .sidebar-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 6px;
    top: 7px;
    bottom: 7px;
    width: var(--mobile-nav-cell-width);
    border-radius: 999px;
    background: rgba(226, 230, 224, 0.78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 8px 18px rgba(18, 25, 19, 0.08);
    transform: translateX(var(--mobile-nav-offset)) scaleX(0.82);
    transform-origin: center center;
    transition:
      transform 340ms cubic-bezier(0.18, 0.88, 0.24, 1.12),
      top 240ms ease,
      bottom 240ms ease,
      background 180ms ease;
  }

  body.mobile-nav-compact .sidebar-nav::before {
    top: 6px;
    bottom: 6px;
    transform: translateX(var(--mobile-nav-offset)) scaleX(0.82);
  }

  .nav-item,
  body.reader-view-active .nav-item {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(42, 50, 43, 0.58) !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    transition:
      color 160ms ease,
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    touch-action: manipulation;
  }

  .nav-item.hidden,
  body.reader-view-active .nav-item.hidden {
    display: none !important;
  }

  .nav-item::before,
  .nav-item::after,
  .nav-item.active::before,
  .nav-item.active::after,
  body.reader-view-active .nav-item::before,
  body.reader-view-active .nav-item::after,
  body.reader-view-active .nav-item.active::before,
  body.reader-view-active .nav-item.active::after {
    content: none !important;
    display: none !important;
  }

  .nav-item .icon-shell,
  body.reader-view-active .nav-item .icon-shell {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: currentColor !important;
    transform: scale(var(--mobile-nav-icon-scale)) translateZ(0) !important;
    transition:
      transform 230ms cubic-bezier(0.2, 0.8, 0.2, 1),
      color 160ms ease !important;
  }

  .nav-item .icon-shell svg,
  body.reader-view-active .nav-item .icon-shell svg {
    width: var(--mobile-nav-icon-size) !important;
    height: var(--mobile-nav-icon-size) !important;
    stroke-width: 1.85 !important;
  }

  .nav-item.active,
  .nav-item.active:hover,
  body.reader-view-active .nav-item.active,
  body.reader-view-active .nav-item.active:hover {
    color: #121813 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-1px) translateZ(0) !important;
  }

  .nav-item.active .icon-shell,
  body.reader-view-active .nav-item.active .icon-shell {
    background: transparent !important;
    box-shadow: none !important;
    transform: scale(var(--mobile-nav-active-icon-scale)) translateZ(0) !important;
  }

  .nav-item:hover,
  body.reader-view-active .nav-item:hover {
    background: transparent !important;
    transform: translateZ(0) !important;
  }

  .nav-item:active,
  .nav-item.is-pressing,
  body.reader-view-active .nav-item:active,
  body.reader-view-active .nav-item.is-pressing {
    transform: scale(0.94) translateZ(0) !important;
  }

  .modal-open .sidebar-nav,
  .mobile-input-active .sidebar-nav,
  body.reader-view-active.modal-open .sidebar-nav,
  body.reader-view-active.mobile-input-active .sidebar-nav {
    display: grid !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(18px) scale(0.94) !important;
  }

  body.passage-picker-open .sidebar-nav {
    display: grid !important;
    opacity: 0.16 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(14px) scale(0.96) !important;
  }

  body.mobile-nav-forward .view.active {
    animation: mobileViewForward 320ms cubic-bezier(0.18, 0.82, 0.26, 1) both;
  }

  body.mobile-nav-back .view.active {
    animation: mobileViewBack 320ms cubic-bezier(0.18, 0.82, 0.26, 1) both;
  }

  body.native-ios-shell .view.active,
  body.native-ios-shell .composer-pane.active,
  body.native-ios-shell .feed-pane.active,
  body.native-ios-shell .group-page-panel.active,
  body.native-ios-shell .prayer-hero-surface,
  body.native-ios-shell .record-start-surface,
  body.native-ios-shell .editor-surface,
  body.native-ios-shell #view-bible .selector-surface,
  body.native-ios-shell #view-bible .chapter-guide-surface,
  body.native-ios-shell #view-bible .godpeople-surface {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.native-ios-shell .content-column,
  body.native-ios-shell .view.active,
  body.native-ios-shell .composer-pane.active,
  body.native-ios-shell .feed-pane.active {
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
    backface-visibility: visible !important;
  }

  @keyframes mobileViewForward {
    from {
      opacity: 0.35;
      transform: translateX(18px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes mobileViewBack {
    from {
      opacity: 0.35;
      transform: translateX(-18px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar-nav,
    .sidebar-nav::before,
    .nav-item,
    .nav-item .icon-shell,
    body.mobile-nav-forward .view.active,
    body.mobile-nav-back .view.active {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@media (max-width: 640px) {
  #view-new .worship-fields,
  #view-new .diary-guide,
  #view-new .worship-fields label,
  #view-new .worship-fields input,
  #view-new .editor-footer,
  #view-new .visibility-stack,
  #view-new .visibility-field,
  #view-new .visibility-field select,
  #view-new .editor-submit-stack,
  #view-new .editor-submit-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #view-new .worship-fields {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden;
  }

  #view-new .worship-fields input {
    display: block;
    -webkit-appearance: none;
    appearance: none;
  }

  #view-new .editor-footer {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  #view-new .visibility-field {
    overflow: hidden;
  }

  #view-new .visibility-field select {
    display: block;
    padding-right: 28px;
  }

  body.passage-picker-open {
    overflow: hidden !important;
  }

  body.passage-picker-open .sidebar-nav {
    display: grid !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(18px) scale(0.94) !important;
  }

  body.passage-picker-open .sidebar {
    width: calc(100% - 1px) !important;
    max-width: calc(100% - 1px) !important;
  }

  body.passage-picker-open .passage-picker-modal {
    position: absolute !important;
    z-index: 2600 !important;
    display: block !important;
    inset: auto 1px auto 0 !important;
    top: var(--passage-picker-scroll-offset, 0px) !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    overscroll-behavior: none;
    touch-action: auto;
    transform: none !important;
  }

  body.passage-picker-open .passage-picker-backdrop {
    position: absolute !important;
    z-index: 0;
  }

  body.passage-picker-open .passage-picker-panel {
    position: absolute !important;
    inset: auto !important;
    left: max(14px, calc(env(safe-area-inset-left) + 12px)) !important;
    right: max(14px, calc(env(safe-area-inset-right) + 12px)) !important;
    top: max(22px, calc(env(safe-area-inset-top) + 14px)) !important;
    bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
    transform: none !important;
    z-index: 1;
    animation: mobile-passage-picker-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  body.passage-picker-open.passage-picker-context-new .passage-picker-panel {
    top: max(98px, calc(env(safe-area-inset-top) + 38px)) !important;
  }

  body.passage-picker-open .passage-picker-header {
    position: static !important;
    flex: 0 0 auto;
    top: 0;
    z-index: 2;
    padding: 14px 14px 11px !important;
  }

  body.passage-picker-open .passage-picker-footer {
    position: static !important;
    flex: 0 0 auto;
    bottom: 0;
    z-index: 2;
    padding: 10px 12px 12px !important;
  }

  body.passage-picker-open .passage-picker-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px !important;
    scroll-padding-top: 14px;
    scroll-padding-bottom: 18px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body.passage-picker-open .passage-picker-body > * + * {
    margin-top: 13px !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-grid,
  body.passage-picker-open .passage-picker-panel .passage-number-grid,
  body.passage-picker-open .passage-picker-panel .passage-verse-grid {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-number-grid,
  body.passage-picker-open .passage-picker-panel .passage-verse-grid {
    max-height: none !important;
    overflow: visible !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-number-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-section,
  body.passage-picker-open .passage-picker-panel .passage-chapter-section,
  body.passage-picker-open .passage-picker-panel .passage-verse-section {
    display: grid !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-section {
    grid-template-rows: auto auto auto !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-chapter-section {
    grid-template-rows: auto auto !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-verse-section {
    grid-template-rows: auto auto auto !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-grid button,
  body.passage-picker-open .passage-picker-panel .passage-number-grid button,
  body.passage-picker-open .passage-picker-panel .passage-whole-button {
    touch-action: pan-y;
  }
}

@keyframes mobile-passage-picker-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open {
    gap: 8px;
  }

  #composerPane.is-writing-open .editor-surface {
    margin-bottom: calc(124px + env(safe-area-inset-bottom));
  }

  #composerPane.is-writing-open .editor-form {
    gap: 12px;
  }

  #composerPane.is-writing-open .editor-extra-fields:not([open]) {
    width: fit-content;
    border: 0;
    border-radius: 999px;
    background: transparent;
  }

  #composerPane.is-writing-open .editor-extra-fields:not([open]) > summary {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(36, 43, 36, 0.08);
    border-radius: 999px;
    background: rgba(247, 250, 245, 0.82);
    color: #687165;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    list-style: none;
  }

  #composerPane.is-writing-open .editor-extra-fields:not([open]) > summary::-webkit-details-marker {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-attach {
    position: relative;
    margin: 10px 0 0 !important;
    margin-bottom: 0 !important;
    padding: 5px 5px 0 !important;
    overflow: visible;
    border: 1px solid rgba(36, 43, 36, 0.075);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(248, 250, 247, 0.86);
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-attach .selector-header,
  #composerPane.is-writing-open .record-passage-attach .provider-note {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border-top: 0;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open {
    min-height: 52px;
    gap: 2px;
    padding: 9px 42px 10px 13px;
    border: 0;
    border-radius: 15px 15px 9px 9px;
    background: rgba(255, 255, 255, 0.28);
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open:active {
    transform: scale(0.992);
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open::after {
    right: 18px;
    width: 7px;
    height: 7px;
    opacity: 0.36;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open span {
    color: #778171;
    font-size: 0.67rem;
    line-height: 1.15;
    font-weight: 850;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open strong {
    overflow: hidden;
    color: #223025;
    font-size: 1rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface {
    position: relative;
    margin: -12px 0 10px !important;
    max-height: none;
    padding: 0 5px 7px !important;
    overflow: hidden;
    border: 1px solid rgba(36, 43, 36, 0.075);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: rgba(248, 250, 247, 0.86);
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .surface-header {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .inline-reader {
    max-height: min(164px, 20dvh) !important;
    padding: 11px 12px 13px !important;
    border: 0;
    border-top: 1px solid rgba(36, 43, 36, 0.065);
    border-radius: 0 0 14px 14px;
    color: #3b433a;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.34));
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 20px), rgba(0, 0, 0, 0.18) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 20px), rgba(0, 0, 0, 0.18) 100%);
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .inline-reader::-webkit-scrollbar {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .reader-paragraph {
    font-size: 0.88rem;
    line-height: 1.74;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 4px;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-line {
    column-gap: 5px;
    padding: 5px 0 6px;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    border-top: 1px solid rgba(36, 43, 36, 0.055);
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 24px;
    min-height: 24px;
    margin: -1px 0 -1px -2px;
    color: #7a8377;
    font-size: 0.68rem;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-button.is-selected {
    color: #31251e;
    background: rgba(247, 228, 210, 0.92);
  }
}

@media (max-width: 640px) {
  #view-mine .trace-overview {
    display: grid;
    gap: 8px;
  }

  #view-mine .trace-overview .archive-focus {
    display: grid;
    gap: 0;
    padding: 0;
  }

  #view-mine .trace-overview .archive-focus-grid {
    display: none;
  }
}

@media (max-width: 640px) {
  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-status {
    min-height: 52px;
    padding-right: 92px;
  }
}

@media (max-width: 640px) {
  body.reader-view-active #view-bible {
    gap: 6px;
  }

  body.reader-view-active #view-bible > .section-header {
    display: none;
  }

  body.reader-view-active #view-bible .selector-surface {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open {
    min-height: 48px;
    padding: 7px 38px 7px 13px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 1px 2px rgba(18, 23, 18, 0.035);
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open span {
    font-size: 0.66rem;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open strong {
    font-size: 0.96rem;
    line-height: 1.18;
  }

  body.reader-view-active #view-bible .chapter-guide-surface {
    margin-top: 2px;
    border-color: rgba(36, 43, 36, 0.075);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: none;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary {
    min-height: 40px;
    flex-direction: row;
    justify-content: space-between;
    padding: 7px 11px 7px 13px;
    align-items: center;
    gap: 12px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary h2 {
    font-size: 0.9rem;
    line-height: 1.28;
    font-weight: 800;
    text-align: left;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-marker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(238, 242, 235, 0.92);
    color: #687166;
    font-size: 0.72rem;
    font-weight: 820;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-marker::before {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  body.reader-view-active #view-bible .chapter-guide-surface + .godpeople-surface {
    margin-top: 2px;
  }

  body.reader-view-active #view-bible .godpeople-topbar {
    gap: 0;
    padding-top: 5px;
    padding-bottom: 2px;
  }

  body.reader-view-active #view-bible .godpeople-topbar > div:first-child {
    display: none;
  }

  body.reader-view-active #view-bible .reader-topbar-actions {
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    gap: 5px;
  }

  body.reader-view-active #view-bible .underline-mode-toggle {
    min-height: 36px;
    padding: 2px;
    border-color: rgba(36, 43, 36, 0.075);
    background: rgba(239, 243, 237, 0.82);
    box-shadow: none;
  }

  body.reader-view-active #view-bible .underline-mode-button {
    min-height: 30px;
    padding: 0 8px;
    color: #737c70;
    font-size: 0.73rem;
  }

  body.reader-view-active #view-bible .underline-mode-button.active {
    background: rgba(255, 255, 255, 0.92);
    color: #243128;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  }

  body.reader-view-active #view-bible .reader-comment-button,
  body.reader-view-active #view-bible .reader-write-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-color: rgba(36, 43, 36, 0.075);
    background: rgba(255, 255, 255, 0.72);
    color: #586255;
    box-shadow: none;
  }

  body.reader-view-active #view-bible .reader-interaction-help {
    display: block;
    margin: 0 max(24px, env(safe-area-inset-right)) 6px max(24px, env(safe-area-inset-left));
    padding: 0;
    border: 0;
    background: transparent;
    color: #81887f;
    font-size: 0.64rem;
    line-height: 1.4;
    text-align: right;
  }

  body.reader-view-active #view-bible .godpeople-reader {
    padding-top: 0;
  }

  body.reader-view-active #view-bible .interactive-reader-paragraph {
    gap: 5px;
  }

  body.reader-view-active #view-bible .interactive-verse {
    column-gap: 7px;
    padding: 4px 0;
  }

  body.reader-view-active #view-bible .verse-number-button {
    min-width: 30px;
    min-height: 30px;
    margin-top: 0;
    font-size: 0.76rem;
  }

  body.reader-view-active #view-bible .verse-text {
    font-size: 0.96rem;
    line-height: 1.78;
  }

  body.reader-view-active #view-bible .interactive-verse.is-highlighted .verse-text {
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1em,
      rgba(207, 156, 88, 0.32) 1em,
      rgba(207, 156, 88, 0.32) 1.34em,
      transparent 1.34em,
      transparent 1.78em
    );
  }

  body.reader-view-active #view-bible .interactive-verse.is-community-highlighted .verse-text {
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1em,
      rgba(79, 100, 88, var(--community-underline-strength, 0.24)) 1em,
      rgba(79, 100, 88, var(--community-underline-strength, 0.24)) 1.34em,
      transparent 1.34em,
      transparent 1.78em
    );
  }

  #composerPane.is-writing-open .reflection-body-field {
    margin-bottom: 4px;
  }

  #composerPane.is-writing-open .record-passage-attach {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    overflow: visible;
    border: 1px solid rgba(36, 43, 36, 0.075);
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: rgba(248, 250, 246, 0.72);
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border-top: 0;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open {
    min-height: 49px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    row-gap: 3px;
    padding: 9px 34px 8px 13px;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: transparent;
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open::after {
    right: 15px;
    width: 7px;
    height: 7px;
    opacity: 0.34;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open span {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #747d70;
    font-size: 0.66rem;
    line-height: 1.12;
    font-weight: 850;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open strong {
    min-width: 0;
    overflow: hidden;
    color: #243128;
    font-size: 1.01rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface {
    margin: -12px 0 10px !important;
    padding: 0 13px 7px !important;
    overflow: visible;
    border: 1px solid rgba(36, 43, 36, 0.075);
    border-top: 0;
    border-radius: 0 0 17px 17px;
    background: rgba(248, 250, 246, 0.72);
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .surface-header {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 86px !important;
    padding: 9px 0 0 !important;
    border: 0;
    border-top: 1px solid rgba(36, 43, 36, 0.07);
    border-radius: 0;
    color: #4b5549;
    background: transparent;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .reader-paragraph {
    font-size: 0.81rem;
    line-height: 1.58;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 2px;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-line {
    column-gap: 9px;
    padding: 2px 0 5px;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+3) {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 22px;
    min-height: 22px;
    margin: 0;
    color: #788176;
    background: rgba(239, 243, 236, 0.78);
    font-size: 0.61rem;
  }

  #composerPane.is-writing-open #worshipFields:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(96px, 0.75fr) !important;
    gap: 8px;
    margin: 0 0 6px;
    padding: 10px;
    overflow: visible;
    border-color: rgba(36, 43, 36, 0.075);
    border-radius: 16px;
    background: rgba(248, 250, 246, 0.7);
    box-shadow: none;
  }

  #composerPane.is-writing-open #worshipFields label {
    gap: 4px;
  }

  #composerPane.is-writing-open #worshipFields label:first-child {
    grid-column: 1 / -1;
  }

  #composerPane.is-writing-open #worshipFields label > span {
    color: #5f695d;
    font-size: 0.72rem;
    line-height: 1.15;
    font-weight: 850;
  }

  #composerPane.is-writing-open #worshipFields input {
    min-height: 43px;
    height: 43px;
    padding: 0 12px;
    border-color: rgba(36, 43, 36, 0.09);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: none;
    font-size: 16px;
    font-weight: 760;
  }

  #composerPane.is-writing-open #worshipFields .clearable-control input[type="text"] {
    padding-right: 52px;
  }

  #composerPane.is-writing-open #worshipFields .clearable-control.is-input-focused input[type="text"] {
    padding-right: 12px;
  }

  #composerPane.is-writing-open .editor-more-fields {
    margin-top: 2px;
  }

  body.passage-picker-open .passage-picker-modal {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  #view-detail .detail-page-top {
    margin-bottom: 12px;
  }

  #view-detail .icon-back-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-color: rgba(36, 43, 36, 0.1);
    background: rgba(255, 255, 255, 0.52);
    box-shadow: none;
  }

  #view-detail .detail-page-head {
    margin-bottom: 8px;
  }

  #view-detail .detail-actions {
    margin: 8px 0 20px;
    padding-top: 11px;
    border-top: 1px solid rgba(36, 43, 36, 0.07);
    align-items: center;
    gap: 5px;
  }

  #view-detail .detail-action-cluster {
    gap: 0;
    padding: 1px;
    border: 1px solid rgba(36, 43, 36, 0.06);
    border-radius: 999px;
    background: rgba(247, 249, 245, 0.58);
  }

  #view-detail .detail-action-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    color: #626a60;
  }

  #view-detail .detail-action-button svg {
    width: 17px;
    height: 17px;
  }

  #view-detail .detail-action-button:hover,
  #view-detail .detail-action-button:focus-visible {
    background: rgba(79, 100, 88, 0.07);
  }

  #view-detail .detail-report-action {
    color: #8c9289;
  }

  #view-detail .detail-action-meta {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    padding: 0 7px;
    color: #747d72;
    font-size: 0.72rem;
    font-weight: 780;
  }

  #view-detail .detail-management-actions {
    gap: 2px;
    margin-left: auto;
  }

  #view-detail .detail-text-action {
    min-height: 28px;
    padding: 0 7px;
    font-size: 0.73rem;
  }

  #view-detail .detail-page-body {
    margin-top: 0;
    font-size: 0.97rem;
    line-height: 1.76;
  }

  #view-detail .detail-comments {
    margin-top: 104px;
    padding-top: 18px;
    border-top-color: rgba(36, 43, 36, 0.08);
  }

  #view-detail .detail-comments-header {
    min-height: 0;
    margin-bottom: 10px;
  }

  #view-detail .detail-comments-header h2 {
    font-size: 1rem;
    line-height: 1.35;
  }

  #view-detail .comment-form {
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 7px 7px 7px 13px;
    border: 1px solid rgba(36, 43, 36, 0.075);
    border-radius: 16px;
    background: rgba(248, 250, 246, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  }

  #view-detail .comment-form textarea {
    min-height: 42px;
    max-height: 42px;
    padding: 3px 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.86rem;
    line-height: 1.4;
    resize: none;
  }

  #view-detail .comment-form textarea:focus {
    outline: none;
    box-shadow: none;
  }

  #view-detail .comment-submit-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 12px;
  }

  #view-detail .comment-submit-button svg {
    width: 16px;
    height: 16px;
  }

  #view-detail .comment-list {
    gap: 8px;
    margin-top: 12px;
  }

  #view-detail .comment-card {
    padding: 12px 13px;
    border-color: rgba(36, 43, 36, 0.075);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.54);
    box-shadow: none;
  }

  #view-detail .selected-verse-card {
    margin-top: 14px;
    padding: 11px 36px 12px 13px;
    border-color: rgba(79, 100, 88, 0.11);
    border-left-width: 0;
    border-radius: 14px;
    background: rgba(247, 250, 245, 0.62);
  }

  #view-detail .selected-verse-top {
    margin-bottom: 6px;
  }

  #view-detail .selected-verse-meta {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  #view-detail .selected-verse-more {
    width: 26px;
    height: 26px;
    min-height: 26px;
  }

  #view-detail .selected-verse-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #view-detail .selected-verse-list {
    display: none;
  }

  #view-detail .selected-verse-list-heading {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  #view-detail .selected-verse-list-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    padding-top: 8px;
  }

  #view-detail .selected-verse-list-item strong {
    font-size: 0.76rem;
    line-height: 1.5;
    white-space: nowrap;
  }

  #view-detail .selected-verse-list-item span {
    display: -webkit-box;
    overflow: hidden;
    color: #6f776d;
    font-size: 0.82rem;
    line-height: 1.5;
    max-height: 3em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #view-detail .detail-page {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  #view-detail .selected-verse-card,
  #view-detail .detail-comments {
    scroll-margin-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  body.detail-view-active .sidebar-nav {
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
      0 18px 42px rgba(23, 28, 24, 0.13),
      0 6px 14px rgba(23, 28, 24, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }
}

@media (max-width: 380px) {
  #view-detail .detail-page-body {
    font-size: 0.92rem;
    line-height: 1.7;
  }

  #view-detail .selected-verse-card {
    margin-top: 6px;
  }
}

@media (max-width: 640px) {
  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 10px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-heading {
    grid-column: 1;
    min-width: 0;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-heading span {
    display: none;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) #profileSaveBtn {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    min-height: 44px;
    justify-self: end;
    align-self: center;
    padding: 0 12px;
    border: 1px solid rgba(36, 43, 36, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: #5c665a;
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 820;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form .clearable-control,
  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone {
    grid-column: 1 / -1;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form .clearable-control input {
    min-height: 46px;
    border-color: rgba(36, 43, 36, 0.085);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: none;
    font-weight: 720;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form .clear-control-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone {
    margin-top: 5px;
    padding: 10px 0 0;
    border-width: 1px 0 0;
    border-color: rgba(36, 43, 36, 0.08);
    border-radius: 0;
    background: transparent;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone strong {
    color: #665651;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-delete-button {
    min-height: 44px;
    padding: 0 12px;
    border-color: rgba(138, 65, 49, 0.14);
    background: rgba(255, 255, 255, 0.34);
    color: #8a4a3b;
  }
}

@media (max-width: 640px) {
  #feedPane .group-home-surface {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 3px 2px 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #feedPane .group-home-main {
    gap: 2px;
  }

  #feedPane .group-home-main .surface-kicker,
  #feedPane #groupHomeCopy {
    display: none;
  }

  #feedPane .group-home-main h2 {
    font-size: 1.08rem;
    line-height: 1.32;
  }

  #feedPane .group-home-main p:not(.surface-kicker) {
    font-size: 0.86rem;
    line-height: 1.5;
  }

  #feedPane .group-progress-panel {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #feedPane .group-progress-panel > span {
    color: #657063;
    font-size: 0.71rem;
    font-weight: 850;
    line-height: 1;
  }

  #feedPane .group-progress-panel > strong {
    margin-right: auto;
    font-size: 0.82rem;
    line-height: 1.2;
  }

  #feedPane .group-member-row {
    width: 100%;
    gap: 5px;
  }

  #feedPane .group-member-pill {
    min-height: 22px;
    padding: 0 7px;
    background: rgba(255, 255, 255, 0.58);
    font-size: 0.7rem;
  }

  #feedPane #groupReflectionList.thread-feed {
    gap: 9px;
  }

  #feedPane #groupReflectionList .thread-card {
    gap: 8px;
    padding: 12px 13px;
  }

  #feedPane #groupReflectionList .thread-title {
    font-size: 1rem;
    line-height: 1.42;
  }

  #feedPane #groupReflectionList .thread-preview {
    font-size: 0.86rem;
    line-height: 1.54;
    -webkit-line-clamp: 2;
  }

  #feedPane #groupReflectionList .held-passage {
    width: 100%;
    gap: 7px;
    padding: 8px 10px;
    border-left-color: rgba(178, 123, 65, 0.34);
    background: rgba(250, 248, 243, 0.54);
    font-size: 0.76rem;
  }

  #feedPane #groupReflectionList .article-card-bottom {
    display: none;
  }

  #feedPane .group-settings-surface {
    gap: 8px;
    padding: 12px;
  }

  #feedPane .group-settings-overview {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 9px;
    padding-bottom: 7px;
  }

  #feedPane .group-settings-overview .surface-kicker {
    display: none;
  }

  #feedPane .group-settings-overview h2 {
    font-size: 1rem;
  }

  #feedPane .group-settings-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  #feedPane .group-settings-meta span {
    min-height: 28px;
    justify-content: center;
    padding: 5px 5px;
  }

  #feedPane #groupNameSettingsBlock,
  #feedPane #groupMemberSettingsBlock,
  #feedPane #groupDangerZone {
    padding: 10px;
    border-radius: 14px;
  }

  #feedPane #groupNameSettingsBlock {
    min-height: 48px;
    align-items: center;
  }

  #feedPane #groupNameSettingsBlock .group-settings-copy {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  #feedPane #groupNameSettingsBlock h3 {
    white-space: nowrap;
  }

  #feedPane #groupNamePreview {
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.25;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #feedPane #groupMemberSettingsBlock {
    gap: 8px;
  }

  #feedPane .group-manage-member-list {
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #feedPane .group-manage-member-list .group-empty-note {
    padding: 7px 0;
  }

  #feedPane .group-rename-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
    margin-top: 3px;
  }

  #feedPane .group-rename-form input {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  #feedPane .group-rename-action {
    width: auto;
    min-width: 54px;
    min-height: 38px;
    border-radius: 999px;
  }

  #feedPane .group-manage-member {
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 0;
  }

  #feedPane .group-member-identity {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  #feedPane .group-member-identity strong,
  #feedPane .group-member-identity span {
    display: inline;
    min-width: 0;
  }

  #feedPane .group-member-identity strong {
    max-width: 42%;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #feedPane .group-member-identity span {
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #feedPane #groupDangerZone {
    min-height: 40px;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    padding: 9px 0 0;
    border-width: 1px 0 0;
    border-color: rgba(36, 43, 36, 0.08);
    border-radius: 0;
    background: transparent;
  }

  #feedPane #groupDangerZone h3 {
    color: #776965;
    font-size: 0.8rem;
  }

  #feedPane .group-delete-icon-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  #feedPane .group-setup-surface {
    gap: 8px;
    margin-top: 12px;
    margin-bottom: calc(96px + env(safe-area-inset-bottom));
    padding: 12px;
  }

  #feedPane .group-setup-header {
    gap: 2px;
  }

  #feedPane .group-setup-header h2,
  #feedPane .group-inline-form h3 {
    font-size: 0.94rem;
  }

  #feedPane .group-setup-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #feedPane .group-inline-form {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 0;
  }

  #feedPane .group-inline-form:first-child {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(36, 43, 36, 0.08);
  }

  #feedPane .group-inline-form h3 {
    overflow: hidden;
    color: #566154;
    font-size: 0.82rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #feedPane .group-inline-form input {
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 0.86rem;
  }

  #feedPane .group-inline-form .clearable-control {
    width: 100%;
    min-width: 0;
  }

  #feedPane .group-inline-form > button {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.82rem;
  }

  #feedPane .group-records-surface.is-auth-gate {
    min-height: 0;
    padding: 15px;
    align-content: start;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: none;
  }

  #feedPane .group-records-surface.is-auth-gate .thread-feed {
    display: block;
  }

  #feedPane .group-auth-gate {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px 11px;
  }

  #feedPane .group-auth-icon {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: rgba(239, 244, 238, 0.62);
    color: #657062;
  }

  #feedPane .group-auth-icon svg {
    width: 18px;
    height: 18px;
  }

  #feedPane .group-auth-copy {
    gap: 2px;
  }

  #feedPane .group-auth-copy span {
    font-size: 0.69rem;
  }

  #feedPane .group-auth-copy strong {
    font-size: 0.98rem;
    line-height: 1.36;
  }

  #feedPane .group-auth-copy p {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  #feedPane .group-auth-action {
    grid-column: 2;
    width: fit-content;
    min-height: 34px;
    margin-top: 1px;
    padding: 0 13px;
    border-color: rgba(36, 43, 36, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: #3f493d;
    box-shadow: none;
    font-size: 0.78rem;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-attach {
    margin: 14px 0 0 !important;
    padding: 10px 12px 0 !important;
    overflow: visible;
    border: 1px solid rgba(36, 43, 36, 0.075) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(180deg, rgba(250, 252, 248, 0.92), rgba(247, 250, 245, 0.76)) !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border: 0;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open {
    min-height: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    padding: 0 30px 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(36, 43, 36, 0.07);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open:active {
    transform: translateY(1px);
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open::after {
    right: 2px;
    width: 7px;
    height: 7px;
    opacity: 0.36;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(231, 238, 226, 0.78);
    color: #667162;
    font-size: 0.64rem;
    line-height: 1;
    font-weight: 850;
  }

  #composerPane.is-writing-open .record-passage-attach .passage-picker-open strong {
    min-width: 0;
    overflow: hidden;
    color: #202921;
    font-size: 1.02rem;
    line-height: 1.22;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface {
    margin: -12px 0 12px !important;
    padding: 0 12px 12px !important;
    overflow: visible;
    border: 1px solid rgba(36, 43, 36, 0.075) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(247, 250, 245, 0.74) !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 126px !important;
    min-height: 104px;
    padding: 11px 0 0 !important;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #3f493d;
    background: transparent;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 3px;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-line {
    column-gap: 8px;
    padding: 3px 0 5px;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+3) {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 23px;
    min-height: 23px;
    margin: 0;
    background: rgba(238, 243, 236, 0.72);
    color: #748071;
    font-size: 0.61rem;
  }

  #view-new .reflection-title-field {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  body.reader-view-active .app-shell,
  body.native-ios-shell.reader-view-active .app-shell {
    padding-top: calc(18px + env(safe-area-inset-top));
  }

  body.reader-view-active #view-bible .godpeople-topbar {
    padding: 2px 20px 0;
  }

  body.reader-view-active #view-bible .reader-topbar-actions {
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    gap: 4px;
  }

  body.reader-view-active #view-bible .underline-mode-toggle {
    min-height: 32px;
    padding: 2px;
    background: rgba(241, 245, 239, 0.72);
  }

  body.reader-view-active #view-bible .underline-mode-button {
    min-height: 28px;
    padding: 0 7px;
    font-size: 0.69rem;
  }

  body.reader-view-active #view-bible .reader-comment-button,
  body.reader-view-active #view-bible .reader-write-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  body.reader-view-active #view-bible .reader-comment-button svg,
  body.reader-view-active #view-bible .reader-write-button svg {
    width: 17px;
    height: 17px;
  }

  body.reader-view-active #view-bible .comment-count-badge {
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    font-size: 0.55rem;
  }

  body.reader-view-active #view-bible .godpeople-reader {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  body.reader-view-active #view-bible {
    gap: 5px;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open {
    min-height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "label summary";
    align-items: center;
    column-gap: 9px;
    padding: 0 34px 0 8px;
    border-color: rgba(36, 43, 36, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open::after {
    right: 15px;
    width: 8px;
    height: 8px;
    opacity: 0.42;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open span {
    grid-area: label;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(237, 243, 235, 0.82);
    color: #687366;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open strong {
    grid-area: summary;
    min-width: 0;
    overflow: hidden;
    color: #202921;
    font-size: 0.98rem;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.reader-view-active #view-bible .chapter-guide-surface {
    margin-top: 1px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.66);
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary {
    min-height: 36px;
    padding: 6px 10px 6px 12px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary h2 {
    font-size: 0.86rem;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-marker {
    min-height: 22px;
    padding: 0 7px;
    font-size: 0.68rem;
  }

  body.reader-view-active #view-bible .chapter-guide-surface + .godpeople-surface {
    margin-top: 1px;
  }
}

.record-passage-tray {
  display: contents;
}

.record-passage-tray > .selector-surface + .scripture-surface {
  margin-top: 0;
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    display: grid;
    gap: 8px;
    position: relative;
    margin: 10px 0 17px !important;
    padding: 12px 14px 11px !important;
    overflow: hidden !important;
    border: 1px solid rgba(36, 43, 36, 0.075) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 252, 0.98), rgba(247, 250, 244, 0.9)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 10px 24px rgba(29, 36, 28, 0.036) !important;
  }

  #composerPane.is-writing-open .record-passage-tray::before {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border: 0;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: end !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open::after {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    grid-area: eyebrow !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #7a8475;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    grid-area: summary !important;
    display: block !important;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #202a22;
    font-size: 0.99rem !important;
    line-height: 1.24 !important;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    grid-area: action !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: end;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(79, 100, 88, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: #61705d;
    font-size: 0;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "바꾸기";
    font-size: 0.64rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .surface-header {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    position: relative;
    max-height: 94px !important;
    min-height: 76px !important;
    margin-top: 0 !important;
    padding: 9px 10px 9px 12px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-left: 2px solid rgba(79, 100, 88, 0.18) !important;
    border-radius: 16px !important;
    color: #3e493d;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    column-gap: 9px;
    padding: 2px 0 6px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    border-top: 1px solid rgba(36, 43, 36, 0.045);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+3) {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    color: #485446;
    line-height: 1.58;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:first-child > span:last-child {
    -webkit-line-clamp: 2;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 22px;
    min-height: 22px;
    margin: 0;
    background: rgba(239, 244, 237, 0.86);
    color: #6f7c6b;
    font-size: 0.61rem;
  }
}

@media (max-width: 640px) and (max-height: 820px) {
  #composerPane.is-writing-open .editor-form {
    gap: 10px;
  }

  #view-new .reflection-title-field {
    padding-bottom: 10px;
  }

  #composerPane.is-writing-open .reflection-body-field {
    gap: 5px;
    margin-bottom: 0;
  }

  #composerPane.is-writing-open .reflection-body-field textarea {
    height: 118px;
    min-height: 118px;
    padding: 12px 13px;
    line-height: 1.62;
  }

  #composerPane.is-writing-open .reflection-body-stats {
    margin-top: -5px;
  }

  #view-new .editor-footer {
    padding-top: 8px;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .reflection-body-field textarea {
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .reflection-body-field textarea::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  #view-new #composerPane:not(.is-writing-open) .commitment-hero-surface {
    gap: 14px;
    min-height: 386px;
    padding: 18px;
    align-content: stretch;
    border: 1px solid rgba(36, 43, 36, 0.08);
    background:
      linear-gradient(180deg, rgba(255, 255, 252, 0.96), rgba(247, 250, 245, 0.9));
    color: #171d16;
    box-shadow:
      0 14px 32px rgba(29, 36, 28, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-hero-surface::before {
    background:
      linear-gradient(180deg, rgba(223, 231, 219, 0.28), transparent 34%),
      linear-gradient(90deg, rgba(234, 225, 205, 0.18), transparent 62%);
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-hero-surface .daily-calendar-date {
    min-width: 96px;
    min-height: 48px;
    border-color: rgba(36, 43, 36, 0.08);
    background: rgba(239, 244, 237, 0.74);
    color: #5d685b;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-hero-surface .daily-calendar-date strong {
    color: #20291f;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-hero-surface .daily-calendar-date span,
  #view-new #composerPane:not(.is-writing-open) .commitment-hero-surface .daily-calendar-date small {
    color: #6f796b;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-copy {
    gap: 8px;
    align-content: center;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-copy .surface-kicker {
    color: #6d7769;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-copy h2 {
    color: #2b3429;
    font-size: 0.92rem;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-copy .today-passage-button {
    color: #182018;
    font-size: 1.42rem;
    line-height: 1.42;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-copy .today-passage-button:focus-visible {
    outline-color: rgba(32, 41, 31, 0.72);
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-selected {
    padding: 10px 12px;
    border-color: rgba(36, 43, 36, 0.08);
    border-left-color: rgba(72, 89, 70, 0.24);
    background: rgba(244, 247, 241, 0.78);
    color: #5e675c;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-selected span,
  #view-new #composerPane:not(.is-writing-open) .commitment-selected p {
    color: #6d7669;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-selected strong {
    color: #20291f;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions {
    grid-template-columns: minmax(0, 0.92fr) minmax(112px, 0.8fr);
    gap: 8px;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-entry-button {
    min-height: 46px;
    border-color: rgba(36, 43, 36, 0.1);
    background: rgba(248, 250, 246, 0.82);
    color: #394437;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-write-button {
    min-height: 46px;
    border-color: #172016;
    background: #172016;
    color: #fbfaf4;
  }
}

@media (max-width: 640px) {
  #view-mine .archive-overview {
    gap: 6px;
  }

  #view-mine .trace-overview .archive-focus {
    min-height: 0;
  }

  #view-mine .my-list {
    gap: 10px;
  }

  #view-mine .archive-month-group {
    gap: 8px;
  }

  #view-mine .archive-month-heading {
    padding: 0 4px;
  }

  #view-mine .archive-month-heading strong {
    font-size: 0.98rem;
  }

  #view-mine .archive-month-list {
    gap: 8px;
  }

  #view-mine .archive-entry-card[data-private-id] {
    padding: 10px 12px;
    border-radius: 14px;
  }

  #view-mine .archive-entry-card[data-private-id] .thread-meta-line {
    margin-bottom: 4px;
  }

  #view-mine .archive-entry-card[data-private-id] .thread-title {
    font-size: 0.91rem;
    line-height: 1.42;
  }

  #view-mine .archive-entry-card[data-private-id] .thread-preview {
    margin-top: 5px;
    font-size: 0.81rem;
    line-height: 1.5;
  }

  #view-mine .archive-entry-card[data-private-id] .article-note-meta {
    margin-top: 5px;
    font-size: 0.73rem;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 7px !important;
    margin: 10px 0 14px !important;
    padding: 11px 13px 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(42, 52, 39, 0.09) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(251, 253, 249, 0.98), rgba(247, 250, 245, 0.86)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 22px rgba(35, 43, 34, 0.028) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 38px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 0 1px 7px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(42, 52, 39, 0.06) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #7a8576;
    font-size: 0.61rem;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    color: #1f291f;
    font-size: 0.96rem !important;
    line-height: 1.18 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid rgba(79, 100, 88, 0.11);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
    color: #62705d;
    font-size: 0;
    font-weight: 850;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "바꾸기";
    font-size: 0.64rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 76px !important;
    min-height: 72px !important;
    margin-top: 0 !important;
    padding: 3px 1px 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::-webkit-scrollbar {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    column-gap: 10px;
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 2px 0 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    border-top-color: rgba(42, 52, 39, 0.045);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    color: #414d3f;
    font-size: 0.82rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:first-child > span:last-child {
    -webkit-line-clamp: 3;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 21px;
    min-height: 21px;
    margin-top: 0;
    background: transparent;
    color: #74806f;
    font-size: 0.64rem;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open #reflectionForm {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  #composerPane.is-writing-open #reflectionForm > .editor-footer {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + 14px) !important;
    z-index: 1500;
    width: min(342px, calc(100vw - 60px)) !important;
    max-width: min(342px, calc(100vw - 60px)) !important;
    margin: 8px 0 0;
    padding: 9px;
    border: 1px solid rgba(36, 43, 36, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow:
      0 12px 26px rgba(28, 35, 27, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    transform: translateX(-50%);
  }

  .modal-open #composerPane.is-writing-open #reflectionForm > .editor-footer {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-input-active #composerPane.is-writing-open #reflectionForm {
    padding-bottom: 0;
  }

  .mobile-input-active #composerPane.is-writing-open #reflectionForm > .editor-footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto;
    z-index: auto;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0;
    padding: 8px 0 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #view-mine #myCountChip.is-local-storage {
    display: none !important;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7f887a;
    box-shadow: none;
    font-size: 0.64rem;
    font-weight: 780;
  }

  #view-mine #myCountChip.is-local-storage::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 5px;
    border-radius: 999px;
    background: rgba(103, 119, 96, 0.42);
  }
}

@media (max-width: 640px) {
  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions {
    grid-template-columns: minmax(124px, 0.78fr) minmax(0, 1fr);
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-entry-button {
    padding: 0 12px;
    font-size: 0.9rem;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-entry-button svg {
    width: 17px;
    height: 17px;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-write-button {
    min-width: 0;
    padding: 0 18px;
    font-size: 1.02rem;
    font-weight: 880;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .reflection-title-field,
  #composerPane.is-writing-open .reflection-body-field {
    gap: 7px;
  }

  #composerPane.is-writing-open .reflection-title-field > span,
  #composerPane.is-writing-open .reflection-body-field > span {
    padding-left: 2px;
    color: #727d6e;
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.15;
  }

  #composerPane.is-writing-open .reflection-title-field {
    padding-bottom: 10px;
  }

  #composerPane.is-writing-open #reflectionTitleInput {
    min-height: 48px;
    padding: 12px 48px 12px 14px;
    border-color: rgba(42, 52, 39, 0.095);
    border-radius: 16px;
    background: rgba(255, 255, 253, 0.9);
    color: #20261f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    font-weight: 560;
    line-height: 1.3;
  }

  #composerPane.is-writing-open #reflectionBodyInput {
    height: clamp(140px, 18vh, 164px);
    min-height: 140px;
    padding: 14px 15px;
    border-color: rgba(42, 52, 39, 0.095);
    border-radius: 18px;
    background: rgba(255, 255, 253, 0.88);
    color: #222820;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    line-height: 1.62;
  }

  #composerPane.is-writing-open .reflection-body-stats {
    margin-top: -2px;
    padding-left: 2px;
    color: #838b80;
    font-size: 0.73rem;
  }
}

@media (max-width: 640px) and (max-height: 820px) {
  #composerPane.is-writing-open #reflectionBodyInput {
    height: 124px;
    min-height: 124px;
    padding: 13px 14px;
  }
}

@media (max-width: 640px) {
  #view-detail .detail-comments {
    margin-top: 20px;
    padding-top: 12px;
    border-top-color: rgba(36, 43, 36, 0.055);
  }

  #view-detail .detail-comments-header {
    margin-bottom: 8px;
  }

  #view-detail .detail-comments-header h2 {
    color: #677162;
    font-size: 0.86rem;
    font-weight: 820;
    line-height: 1.25;
  }

  #view-detail .comment-form {
    min-height: 50px;
    padding: 6px 6px 6px 12px;
    border-radius: 14px;
    background: rgba(249, 251, 247, 0.68);
  }

  #view-detail .comment-form textarea {
    min-height: 36px;
    max-height: 36px;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  #view-detail .comment-submit-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 11px;
  }

  #view-detail .comment-list {
    gap: 7px;
    margin-top: 9px;
  }

  #view-detail .comment-card {
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.46);
  }

  #view-detail .comment-body {
    color: #667064;
    font-size: 0.83rem;
    line-height: 1.55;
  }
}

@media (max-width: 640px) {
  body.reader-view-active #view-bible .godpeople-topbar {
    min-height: 31px;
    padding: 0 22px 0;
  }

  body.reader-view-active #view-bible .reader-topbar-actions {
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    align-items: center;
    gap: 5px;
  }

  body.reader-view-active #view-bible .underline-mode-toggle {
    justify-self: start;
    width: min(204px, 100%);
    min-height: 30px;
    padding: 2px;
    border-color: rgba(36, 43, 36, 0.055);
    background: rgba(242, 246, 240, 0.52);
  }

  body.reader-view-active #view-bible .underline-mode-button {
    min-height: 26px;
    padding: 0 7px;
    color: #6f786b;
    font-size: 0.66rem;
    font-weight: 820;
  }

  body.reader-view-active #view-bible .underline-mode-button.active {
    background: rgba(255, 255, 255, 0.72);
    color: #273229;
    box-shadow: none;
  }

  body.reader-view-active #view-bible .reader-comment-button,
  body.reader-view-active #view-bible .reader-write-button {
    border-color: rgba(36, 43, 36, 0.06);
    background: rgba(255, 255, 255, 0.58);
    color: #5d675a;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 8px !important;
    margin: 4px 0 9px !important;
    padding: 1px 3px 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 34px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "eyebrow summary action" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(42, 52, 39, 0.07) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    color: #7b8577;
    font-size: 0.69rem;
    line-height: 1;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    align-self: center;
    color: #253027;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    min-height: 25px;
    padding: 0 9px;
    border-color: rgba(79, 100, 88, 0.1);
    background: rgba(247, 250, 245, 0.72);
    color: #65725f;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    font-size: 0.61rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 76px !important;
    min-height: 74px !important;
    padding: 7px 4px 7px 12px !important;
    border-left: 2px solid rgba(81, 101, 84, 0.16) !important;
    background: linear-gradient(90deg, rgba(247, 250, 245, 0.76), rgba(255, 255, 253, 0)) !important;
    color: #434f41;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 7px;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    color: #465244;
    font-size: 0.81rem;
    line-height: 1.55;
    -webkit-line-clamp: 3;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 32px;
    min-height: 32px;
    color: #778172;
    font-size: 0.64rem;
  }
}

@media (max-width: 640px) {
  #view-auth {
    gap: 10px;
  }

  #view-auth > .section-header {
    min-height: 24px;
    padding: 0 2px;
  }

  #view-auth > .section-header h1 {
    color: #6c7469;
    font-size: 0.86rem;
    font-weight: 840;
    line-height: 1.2;
  }

  #view-auth .auth-panel {
    gap: 12px;
    margin-top: 0;
    padding: 0 4px;
  }

  #view-auth .account-status {
    gap: 4px;
  }

  #view-auth .account-status strong {
    font-size: 1.05rem;
    line-height: 1.32;
  }

  #view-auth .account-status span {
    font-size: 0.8rem;
    font-weight: 640;
    line-height: 1.45;
  }

  #view-auth .account-form {
    gap: 7px;
  }

  #view-auth .account-form input:not([type="checkbox"]) {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    font-weight: 650;
  }

  #view-auth .auth-link-row {
    min-height: 36px;
    margin-top: -2px;
  }

  #view-auth .auth-link-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2px;
    font-size: 0.77rem;
    font-weight: 720;
  }

  #view-auth .account-actions {
    gap: 8px;
    margin-top: 1px;
  }

  #view-auth .account-actions .primary-button,
  #view-auth .account-actions .ghost-button {
    min-height: 46px;
    border-radius: 14px;
    font-weight: 820;
  }

  #view-auth .account-actions .ghost-button {
    min-height: 42px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-status {
    min-height: 45px;
    padding-right: 84px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form {
    gap: 6px 9px;
    padding-top: 2px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-heading strong {
    color: #222a22;
    font-size: 0.94rem;
    line-height: 1.25;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) #profileSaveBtn {
    min-width: 50px;
    min-height: 44px;
    padding: 0 12px;
    color: #5f695d;
    font-size: 0.74rem;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form .clearable-control input {
    min-height: 44px;
    border-radius: 13px;
    font-weight: 650;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form .clear-control-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone strong {
    color: #6f625c;
    font-size: 0.85rem;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone span {
    font-size: 0.74rem;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-delete-button {
    min-width: 50px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 0.74rem;
  }
}

@media (max-width: 640px) {
  .feedback-modal-backdrop {
    background: rgba(17, 17, 17, 0.2);
    backdrop-filter: blur(7px);
  }

  .feedback-modal-panel {
    width: min(360px, calc(100vw - 34px)) !important;
    max-height: min(54dvh, 460px) !important;
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 16px !important;
    box-shadow:
      0 18px 42px rgba(24, 29, 24, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  }

  .feedback-modal-panel:has(.feedback-more-fields[open]) {
    max-height: min(650px, calc(100dvh - 112px)) !important;
  }

  .feedback-modal-header {
    min-height: 36px;
    align-items: center;
  }

  .feedback-modal-header .modal-kicker {
    margin-bottom: 1px;
    color: #737c70;
    font-size: 0.66rem;
    font-weight: 820;
  }

  .feedback-modal-header h2 {
    font-size: 1rem;
    line-height: 1.22;
  }

  .feedback-modal-header .icon-action {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-color: rgba(36, 43, 36, 0.07);
    background: rgba(248, 250, 247, 0.68);
  }

  .feedback-form {
    gap: 6px;
  }

  .feedback-form label {
    gap: 3px;
  }

  .feedback-form label span {
    color: #2c342d;
    font-size: 0.76rem;
    line-height: 1.28;
  }

  .feedback-form input,
  .feedback-form textarea {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
  }

  .feedback-form textarea {
    height: 58px;
    min-height: 58px;
  }

  .feedback-more-fields {
    gap: 6px;
  }

  .feedback-more-fields summary {
    min-height: 36px;
    font-size: 0.76rem;
  }

  .feedback-submit {
    min-height: 43px;
    font-size: 0.92rem;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    display: grid;
    gap: 7px !important;
    margin: 2px 0 6px !important;
    padding: 0 2px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .selector-header,
  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .provider-note {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    display: grid !important;
    min-height: 40px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "eyebrow summary action" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 0 0 9px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(42, 52, 39, 0.065) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open::after {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    grid-area: eyebrow !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #7a8576;
    font-size: 0.66rem !important;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    grid-area: summary !important;
    min-width: 0;
    overflow: hidden;
    color: #253027;
    font-size: 0.95rem !important;
    font-weight: 820;
    line-height: 1.18 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    grid-area: action !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(79, 100, 88, 0.1);
    border-radius: 999px;
    background: rgba(248, 250, 246, 0.76);
    color: #65725f;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "바꾸기";
    font-size: 0.62rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .surface-header {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 76px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 7px 3px 6px 13px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-left: 2px solid rgba(81, 101, 84, 0.16) !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(247, 250, 245, 0.78), rgba(255, 255, 253, 0)) !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::-webkit-scrollbar {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 9px;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    color: #465244;
    font-size: 0.81rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    background: transparent;
    color: #778172;
    font-size: 0.62rem;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-start-surface {
    margin: -2px 0 3px !important;
    padding: 0 2px 5px !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-kind-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 0 0 1px;
    overflow: visible;
    border-bottom: 1px solid rgba(42, 52, 39, 0.07);
    background: transparent;
  }

  #composerPane.is-writing-open .compose-type-button {
    position: relative;
    min-width: 0;
    min-height: 39px;
    padding: 0 2px 8px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #858e82;
    box-shadow: none !important;
    transform: none;
  }

  #composerPane.is-writing-open .compose-type-button::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: #253027;
    opacity: 0;
    transform: translateX(-50%);
    transition: width 170ms ease, opacity 170ms ease;
  }

  #composerPane.is-writing-open .compose-type-button.active {
    color: #202920;
  }

  #composerPane.is-writing-open .compose-type-button.active::after {
    width: 18px;
    opacity: 1;
  }

  #composerPane.is-writing-open .compose-type-button span {
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
  }

  #composerPane.is-writing-open .compose-type-button small {
    display: none;
  }

  #composerPane.is-writing-open #reflectionForm {
    padding-bottom: calc(162px + env(safe-area-inset-bottom));
  }

  #composerPane.is-writing-open #reflectionForm > .editor-footer {
    bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + 128px) !important;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .editor-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }

  #composerPane.is-writing-open .editor-heading > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  #composerPane.is-writing-open .composer-close-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    border-color: rgba(42, 52, 39, 0.07);
    background: rgba(247, 249, 244, 0.76);
    color: #7a8476;
  }

  #composerPane.is-writing-open .composer-close-button svg {
    width: 16px;
    height: 16px;
  }

  #composerPane.is-writing-open .record-passage-tray {
    gap: 8px !important;
    margin: 6px 0 15px !important;
    padding: 11px 12px 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(46, 58, 43, 0.075) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(249, 252, 247, 0.78), rgba(255, 255, 253, 0.52)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 44px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 5px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    justify-self: start;
    color: #7f8b79;
    font-size: 0.62rem !important;
    line-height: 1;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    justify-self: start;
    color: #202a21;
    font-size: 1.01rem !important;
    font-weight: 830;
    line-height: 1.16 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    min-width: 52px;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    background: rgba(71, 86, 68, 0.07);
    color: #53614f;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    font-size: 0.63rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 86px !important;
    min-height: 76px !important;
    padding: 9px 2px 7px 13px !important;
    border-left: 2px solid rgba(81, 101, 84, 0.2) !important;
    background: transparent !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 9px;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    color: #40503f;
    font-size: 0.84rem;
    line-height: 1.58;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 18px;
    min-height: 18px;
    color: #778371;
  }

  #composerPane.is-writing-open .reflection-title-field {
    padding-top: 1px;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open #reflectionForm {
    padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
  }

  #composerPane.is-writing-open #reflectionForm > .editor-footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(42, 52, 39, 0.075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    scroll-margin-bottom: calc(48px + env(safe-area-inset-bottom));
  }

  body[data-active-view="new"].composer-writing-open .sidebar-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(18px) scale(0.94) !important;
  }

  body[data-active-view="new"].composer-writing-open .sidebar::after {
    opacity: 0;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 8px !important;
    margin: 7px 0 12px !important;
    padding: 11px 12px 10px !important;
    overflow: visible !important;
    border: 1px solid rgba(46, 58, 43, 0.07) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(248, 250, 245, 0.72), rgba(255, 255, 252, 0.42)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 34px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "eyebrow summary action" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(46, 58, 43, 0.065) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    color: #7c8777;
    font-size: 0.61rem !important;
    font-weight: 850;
    line-height: 1;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    min-width: 0;
    overflow: hidden;
    color: #202b22;
    font-size: 0.91rem !important;
    font-weight: 830;
    line-height: 1.18 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    min-width: 44px;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(61, 78, 58, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: #5d6a58;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "바꾸기";
    font-size: 0.61rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 60px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 11px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-left: 2px solid rgba(79, 98, 80, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::-webkit-scrollbar {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 7px;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    margin-top: 6px;
    border-top: 0;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    color: #53604f;
    font-size: 0.8rem;
    line-height: 1.56;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:first-child > span:last-child {
    color: #3e4a3d;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    background: transparent;
    color: #879180;
    font-size: 0.63rem;
  }

  #composerPane.is-writing-open .reflection-title-field {
    padding-top: 2px;
  }
}

@media (max-width: 640px) {
  #view-mine {
    gap: 7px;
  }

  #view-mine .section-header {
    margin-bottom: -5px;
  }

  #view-mine .archive-search-surface {
    margin: 0;
    padding: 0 2px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #view-mine .archive-search-main {
    min-height: 34px;
    border: 0 !important;
    border-bottom: 1px solid rgba(38, 48, 36, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #view-mine .archive-search-input-wrap svg {
    left: 2px;
    width: 15px;
    height: 15px;
    color: #8b9387;
  }

  #view-mine .archive-search-main input {
    min-height: 34px;
    padding: 5px 0 5px 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2d352c;
    font-size: 0.83rem;
  }

  #view-mine .archive-overview {
    gap: 4px;
    margin-top: 0;
  }

  #view-mine .archive-mode-row {
    min-height: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(38, 48, 36, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
  }

  #view-mine .archive-mode-row::before {
    top: auto !important;
    right: auto;
    bottom: -1px !important;
    left: 0 !important;
    width: 25% !important;
    height: 2px;
    border-radius: 999px;
    background: #202a22;
    box-shadow: none !important;
  }

  #view-mine .archive-mode-card {
    min-height: 34px;
    padding: 0 2px;
    color: #858d81;
    font-size: 0.76rem;
    font-weight: 830;
  }

  #view-mine .archive-mode-card.is-active {
    color: #202a22;
  }

  #view-mine .trace-overview {
    gap: 4px;
  }

  #view-mine .trace-overview .archive-focus {
    padding: 0;
  }

  #view-mine .my-list {
    margin-top: 2px;
    gap: 9px;
  }

  #view-mine .archive-month-heading {
    padding: 0 2px;
  }

  #view-mine .archive-entry-card[data-private-id] {
    padding: 9px 11px;
    border-color: rgba(36, 43, 36, 0.075);
    border-radius: 13px;
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .editor-extra-fields:not([open]) {
    width: 100%;
    margin-top: -2px;
    border: 0;
    background: transparent;
  }

  #composerPane.is-writing-open .editor-extra-fields:not([open]) > summary {
    width: fit-content;
    min-height: 32px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7a8576;
    font-size: 0.74rem;
    font-weight: 840;
  }

  #composerPane.is-writing-open .editor-extra-fields:not([open]) > summary::after {
    content: "+";
    margin-left: 7px;
    color: #9aa496;
    font-size: 0.82rem;
    font-weight: 760;
  }

  #composerPane.is-writing-open #reflectionForm > .editor-footer {
    grid-template-columns: minmax(106px, 0.84fr) minmax(0, 1.16fr) !important;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin-top: 4px !important;
    padding-top: 8px !important;
  }

  #composerPane.is-writing-open .visibility-field {
    min-height: 42px;
    border-radius: 13px;
  }

  #composerPane.is-writing-open .visibility-field select {
    min-height: 40px;
    height: 40px;
    font-size: 0.82rem;
  }

  #composerPane.is-writing-open .editor-submit-actions .primary-button,
  #composerPane.is-writing-open .editor-submit-actions .ghost-button {
    min-height: 42px;
    border-radius: 13px;
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  body.passage-picker-open .passage-picker-panel .passage-book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: min(280px, 34dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-grid button {
    min-height: 40px;
    justify-content: center;
    padding: 0 5px;
    border-radius: 12px;
    font-size: 0.76rem;
    line-height: 1.12;
    text-align: center;
    word-break: keep-all;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-scope {
    min-height: 38px;
    padding: 2px;
    margin-bottom: 1px;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-scope button {
    min-height: 34px;
  }

  body.passage-picker-open .passage-picker-panel .passage-chapter-section {
    margin-top: 15px !important;
  }
}

@media (max-width: 640px) {
  #view-detail .detail-page {
    padding-bottom: 24px !important;
    margin-bottom: calc(118px + env(safe-area-inset-bottom));
  }

  #view-detail .detail-comments {
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-write-button {
    order: 1;
    min-height: 50px;
    border-radius: 18px;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-entry-button {
    order: 2;
    min-height: 40px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #6e776b;
    font-size: 0.8rem;
  }

  #view-new #composerPane:not(.is-writing-open) .commitment-entry-button svg {
    width: 15px;
    height: 15px;
  }

}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 8px !important;
    margin: 5px 0 9px !important;
    padding: 10px 10px 11px !important;
    border: 1px solid rgba(45, 56, 42, 0.068) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(180deg, rgba(250, 252, 247, 0.84), rgba(255, 255, 252, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 22px rgba(37, 48, 34, 0.026) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 39px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    grid-area: eyebrow !important;
    justify-self: start;
    font-size: 0 !important;
    line-height: 1;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span::after {
    content: "본문 선택";
    color: #7d8978;
    font-size: 0.63rem;
    font-weight: 850;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    grid-area: summary !important;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #202a21;
    font-size: 0.96rem !important;
    font-weight: 840;
    line-height: 1.14 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    grid-area: action !important;
    align-self: center;
    min-width: 48px;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(61, 78, 58, 0.075);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
    color: #596753;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    position: relative;
    max-height: 66px !important;
    min-height: 62px !important;
    padding: 8px 10px 8px 14px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 253, 0.66) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: rgba(79, 98, 80, 0.18);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 8px;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box !important;
    color: #40503f;
    font-size: 0.8rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 20px;
    min-height: 20px;
    color: #7c8776;
    font-size: 0.62rem;
  }

  #composerPane.is-writing-open .reflection-title-field {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  body.reader-view-active .app-shell,
  body.native-ios-shell.reader-view-active .app-shell {
    padding-top: calc(14px + env(safe-area-inset-top));
  }

  body.reader-view-active #view-bible {
    gap: 3px;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open {
    min-height: 38px;
    padding: 0 32px 0 7px;
    border-radius: 13px;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open span {
    min-height: 22px;
    padding: 0 7px;
    font-size: 0.6rem;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open strong {
    font-size: 0.95rem;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open::after {
    right: 14px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface {
    margin-top: 0;
    border-radius: 13px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary {
    min-height: 34px;
    padding: 5px 9px 5px 11px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary h2 {
    font-size: 0.84rem;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-marker {
    min-height: 21px;
    padding: 0 7px;
    font-size: 0.66rem;
  }

  body.reader-view-active #view-bible .chapter-guide-surface + .godpeople-surface {
    margin-top: 0;
  }

  body.reader-view-active #view-bible .godpeople-surface {
    padding-top: 8px;
  }
}

@media (max-width: 640px) {
  #view-mine .trace-overview {
    gap: 3px;
  }

  #view-mine .archive-overview {
    gap: 3px;
  }

  #view-mine .archive-month-heading {
    margin-top: 1px;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 0 !important;
    margin: 8px 0 18px !important;
    padding: 14px 15px 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(43, 54, 40, 0.07) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 252, 0.94), rgba(248, 251, 245, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 10px 22px rgba(36, 47, 34, 0.022) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach,
  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 40px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: center !important;
    column-gap: 13px !important;
    row-gap: 3px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(44, 54, 41, 0.058) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open::after {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    grid-area: eyebrow !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: #7a8575;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1 !important;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span::after {
    content: "본문";
    font-size: 0.63rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    grid-area: summary !important;
    display: block !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #202922;
    font-size: 0.97rem !important;
    font-weight: 840;
    line-height: 1.17 !important;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    grid-area: action !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid rgba(74, 94, 70, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: #5e6b59;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "변경";
    font-size: 0.62rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .surface-header {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    position: relative;
    max-height: 104px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 1px 0 13px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #3f4d3f;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 4px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: rgba(83, 102, 81, 0.14);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::-webkit-scrollbar {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 5px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    display: grid !important;
    grid-template-columns: 19px minmax(0, 1fr);
    column-gap: 9px;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    margin-top: 7px;
    border-top: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+3) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box !important;
    overflow: hidden;
    color: #3f4c3e;
    font-size: 0.83rem;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 19px;
    min-height: 19px;
    margin: 1px 0 0;
    color: #7b8675;
    background: transparent;
    font-size: 0.61rem;
    font-weight: 850;
  }
}

@media (max-width: 640px) and (max-height: 780px) {
  #composerPane.is-writing-open .record-passage-tray {
    margin-bottom: 14px !important;
    padding: 13px 14px 13px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 82px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }
}

@media (max-width: 640px) {
  #view-detail .detail-actions {
    min-height: 34px;
    justify-content: flex-end;
    margin: 8px 0 15px;
    padding-top: 0;
    border-top: 0;
    gap: 4px;
  }

  #view-detail .detail-actions:has(.detail-action-meta) {
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid rgba(36, 43, 36, 0.055);
  }

  #view-detail .detail-action-cluster {
    gap: 2px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #view-detail .detail-actions:has(.detail-action-meta) .detail-action-cluster {
    margin-left: 0;
  }

  #view-detail .detail-action-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    color: #687165;
  }

  #view-detail .detail-action-button svg {
    width: 17px;
    height: 17px;
  }

  #view-detail .detail-action-button:hover,
  #view-detail .detail-action-button:focus-visible {
    background: rgba(79, 100, 88, 0.065);
  }

  #view-detail .detail-action-meta {
    min-height: 26px;
    padding: 0 2px;
    color: #7b8477;
    font-size: 0.7rem;
  }

  #view-detail .detail-comments {
    margin-top: 16px;
    padding-top: 14px;
  }

  #view-detail .detail-comments-header h2 {
    color: #687264;
    font-size: 0.84rem;
  }

  #view-detail .comment-empty-card {
    padding: 4px 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #view-detail .comment-empty-card .comment-body {
    color: #8a9287;
    font-size: 0.8rem;
    line-height: 1.45;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 5px !important;
    margin: 2px 0 10px !important;
    padding: 2px 2px 11px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(43, 54, 40, 0.075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 36px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "eyebrow summary action" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    grid-area: eyebrow !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span::after {
    content: "본문";
    color: #7a8575;
    font-size: 0.6rem;
    font-weight: 850;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    grid-area: summary !important;
    min-width: 0;
    overflow: hidden;
    color: #202922;
    font-size: 0.92rem !important;
    font-weight: 840;
    line-height: 1.16 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    grid-area: action !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 26px;
    padding: 0 2px 0 9px;
    border: 0;
    border-left: 1px solid rgba(74, 94, 70, 0.1);
    border-radius: 0;
    background: transparent;
    color: #5c6957;
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "변경";
    font-size: 0.6rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    position: relative;
    max-height: 60px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 2px 0 0 12px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 3px;
    left: 0;
    display: block !important;
    width: 2px;
    border-radius: 999px;
    background: rgba(83, 102, 81, 0.13);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box !important;
    overflow: hidden;
    color: #3f4c3e;
    font-size: 0.81rem;
    line-height: 1.54;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 18px;
    min-height: 18px;
    margin: 1px 0 0;
    border-radius: 999px;
    background: transparent;
    color: #7b8675;
    font-size: 0.6rem;
    font-weight: 850;
  }
}

@media (max-width: 640px) and (max-height: 780px) {
  #composerPane.is-writing-open .record-passage-tray {
    margin-bottom: 9px !important;
    padding: 2px 2px 10px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 56px !important;
    min-height: 50px !important;
    margin-top: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }
}

@media (max-width: 640px) {
  #view-mine {
    gap: 5px;
  }

  #view-mine .section-header {
    margin-bottom: -7px;
  }

  #view-mine .archive-search-surface {
    margin-top: -1px;
  }

  #view-mine .archive-search-main {
    min-height: 31px !important;
  }

  #view-mine .archive-search-input-wrap svg {
    width: 14px;
    height: 14px;
  }

  #view-mine .archive-search-main input {
    min-height: 31px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.8rem;
  }

  #view-mine .archive-overview,
  #view-mine .trace-overview {
    gap: 2px !important;
  }

  #view-mine .archive-mode-row {
    min-height: 32px;
    padding: 2px !important;
  }

  #view-mine .archive-mode-card {
    min-height: 28px;
    font-size: 0.72rem;
  }

  #view-mine .my-list {
    margin-top: 5px;
  }
}

@media (max-width: 640px) {
  #view-detail .post-save-prompt {
    grid-template-columns: 1fr;
    gap: 11px;
    margin: 3px 0 16px;
    padding: 12px 13px;
    border-color: rgba(43, 54, 40, 0.08);
    border-radius: 16px;
    background: rgba(248, 251, 246, 0.68);
    box-shadow: none;
  }

  #view-detail .post-save-copy {
    gap: 2px;
  }

  #view-detail .post-save-copy span {
    color: #7b8776;
    font-size: 0.64rem;
    line-height: 1.1;
  }

  #view-detail .post-save-copy strong {
    color: #202a22;
    font-size: 0.9rem;
    line-height: 1.28;
  }

  #view-detail .post-save-copy p {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  #view-detail .post-save-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
  }

  #view-detail .post-save-actions .primary-button,
  #view-detail .post-save-actions .ghost-button {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 0.78rem;
  }

  #view-detail .post-save-actions .post-save-share-action {
    min-width: 0;
    padding: 0 3px;
    border: 0;
    background: transparent;
    color: #7a8477;
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 7px !important;
    margin: 8px 0 18px !important;
    padding: 0 1px 13px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(43, 54, 40, 0.075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 36px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    padding: 0 1px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(43, 54, 40, 0.055) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    grid-area: eyebrow !important;
    color: #7b8675;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span::after {
    content: "본문";
    font-size: 0.6rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    grid-area: summary !important;
    min-width: 0;
    overflow: hidden;
    color: #202922;
    font-size: 0.94rem !important;
    font-weight: 840;
    line-height: 1.18 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    grid-area: action !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(74, 94, 70, 0.075);
    border-radius: 999px;
    background: rgba(246, 249, 244, 0.62);
    color: #5e6b59;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "변경";
    font-size: 0.61rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    position: relative;
    max-height: 64px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 6px 1px 0 13px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 4px;
    left: 0;
    display: block !important;
    width: 2px;
    border-radius: 999px;
    background: rgba(83, 102, 81, 0.16);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 4px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 7px;
    align-items: start;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box !important;
    overflow: hidden;
    color: #3f4c3e;
    font-size: 0.81rem;
    line-height: 1.52;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    border-radius: 999px;
    background: rgba(239, 244, 237, 0.72);
    color: #74816f;
    font-size: 0.64rem;
    font-weight: 850;
  }
}

@media (max-width: 640px) and (max-height: 780px) {
  #composerPane.is-writing-open .record-passage-tray {
    margin-bottom: 8px !important;
    padding: 0 1px 12px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 60px !important;
    min-height: 52px !important;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 10px !important;
    margin: 9px 0 19px !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(43, 54, 40, 0.075) !important;
    border-radius: 18px !important;
    background: rgba(249, 251, 246, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 44px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span::after {
    content: "붙든 본문";
    color: #7a8575;
    font-size: 0.63rem;
    font-weight: 850;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    color: #202922;
    font-size: 0.98rem !important;
    line-height: 1.2 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    min-width: 52px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(74, 94, 70, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #5c6957;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "바꾸기";
    font-size: 0.62rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    position: relative;
    max-height: 102px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 12px 12px 11px !important;
    overflow: hidden !important;
    border: 1px solid rgba(43, 54, 40, 0.06) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 253, 0.74) !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 6px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    margin-top: 7px;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: grid !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+3) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    color: #3f4c3e;
    font-size: 0.82rem;
    line-height: 1.55;
    -webkit-line-clamp: 2 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 28px;
    min-height: 28px;
    margin: 0;
    border: 1px solid rgba(80, 98, 78, 0.06);
    border-radius: 999px;
    background: rgba(239, 244, 237, 0.66);
    color: #74816f;
    font-size: 0.62rem;
    font-weight: 850;
  }
}

@media (max-width: 640px) and (max-height: 780px) {
  #composerPane.is-writing-open .record-passage-tray {
    margin-bottom: 12px !important;
    padding: 11px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 78px !important;
    min-height: 72px !important;
    padding: 10px 11px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2) {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body.reader-view-active .app-shell,
  body.native-ios-shell.reader-view-active .app-shell {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  body.reader-view-active #view-bible {
    gap: 2px;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open {
    min-height: 36px;
    padding: 0 30px 0 7px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.68);
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open span {
    min-height: 20px;
    padding: 0 7px;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open strong {
    font-size: 0.93rem;
  }

  body.reader-view-active #view-bible .chapter-guide-surface {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary {
    min-height: 32px;
    padding: 4px 9px 4px 11px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-marker {
    min-height: 20px;
    background: rgba(238, 242, 235, 0.72);
  }

  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) {
    margin: 1px 18px 0;
    border: 0;
    border-bottom: 1px solid rgba(43, 54, 40, 0.075);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) .collapsible-summary {
    min-height: 38px;
    padding: 0 2px 0 4px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) .collapsible-summary h2 {
    color: #303a31;
    font-size: 0.82rem;
    font-weight: 820;
  }

  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) .collapsible-marker {
    min-height: 28px;
    padding: 0 9px;
    background: rgba(239, 243, 237, 0.76);
    color: #657062;
  }

  body.reader-view-active #view-bible .godpeople-surface {
    padding-top: 6px;
  }

  body.reader-view-active #view-bible .godpeople-topbar {
    min-height: 36px;
    padding: 0 22px;
  }

  body.reader-view-active #view-bible .reader-topbar-actions {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 6px;
  }

  body.reader-view-active #view-bible .underline-mode-toggle {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 4px;
  }

  body.reader-view-active #view-bible .underline-mode-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 0 9px;
    font-size: 0.68rem;
  }

  body.reader-view-active #view-bible .reader-comment-button,
  body.reader-view-active #view-bible .reader-write-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  body.reader-view-active #view-bible .interactive-verse {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 8px;
    padding: 5px 0;
  }

  body.reader-view-active #view-bible .verse-number-button {
    min-width: 36px;
    min-height: 36px;
    margin: -1px 0 0;
    background: rgba(246, 249, 244, 0.72);
    font-size: 0.74rem;
  }

  body.reader-view-active #view-bible .verse-number-button:hover,
  body.reader-view-active #view-bible .verse-number-button:focus-visible {
    background: rgba(232, 239, 229, 0.9);
  }
}

@media (max-width: 640px) {
  #view-mine {
    gap: 7px;
  }

  #view-mine .archive-search-surface {
    margin-top: 0;
  }

  #view-mine .archive-search-main,
  #view-mine .archive-search-input-wrap,
  #view-mine .archive-search-input-wrap .clearable-control {
    min-height: 38px !important;
  }

  #view-mine .archive-search-input-wrap svg {
    left: 3px;
    width: 15px;
    height: 15px;
  }

  #view-mine .archive-search-main input {
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 28px !important;
    font-size: 0.82rem;
  }

  #view-mine .archive-overview,
  #view-mine .trace-overview {
    gap: 4px !important;
  }

  #view-mine .archive-mode-row {
    min-height: 38px;
    padding: 2px !important;
  }

  #view-mine .archive-mode-card {
    min-height: 34px;
    padding: 0 3px;
    font-size: 0.74rem;
  }

  #view-mine .my-list > .empty-state {
    gap: 8px;
    margin-top: 3px;
    padding: 19px 2px 21px;
    border: 0 !important;
    border-top: 1px solid rgba(43, 54, 40, 0.075) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #view-mine .my-list > .empty-state .empty-title {
    color: #202922;
    font-size: 1rem;
    line-height: 1.34;
  }

  #view-mine .my-list > .empty-state .empty-copy {
    max-width: 280px;
    color: #6f796d;
    font-size: 0.86rem;
    line-height: 1.55;
  }

  #view-mine .my-list > .empty-state .empty-actions {
    margin-top: 8px;
  }

  #view-mine .my-list > .empty-state .empty-actions .primary-button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 0.88rem;
  }

  #view-mine .my-list > .archive-starter-empty {
    gap: 10px;
    margin-top: 5px;
    padding: 17px 0 20px;
    background: transparent !important;
  }

  #view-mine .archive-starter-mark {
    gap: 5px;
  }

  #view-mine .archive-starter-mark span {
    width: 7px;
    height: 7px;
  }

  #view-mine .archive-starter-steps {
    gap: 5px;
  }

  #view-mine .archive-starter-steps span {
    min-height: 25px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.48);
    font-size: 0.7rem;
  }

  #view-mine .my-list > .archive-starter-empty .empty-actions {
    gap: 7px;
  }

  #view-mine .my-list > .archive-starter-empty .empty-actions .ghost-button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 0.86rem;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 0 !important;
    margin: 8px 0 18px !important;
    padding: 13px 14px 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(43, 54, 40, 0.075) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 252, 0.82), rgba(248, 251, 246, 0.54)) !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach,
  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-selection-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 43px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow action"
      "summary action" !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(43, 54, 40, 0.06) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open::after {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span {
    grid-area: eyebrow !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: #788373;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1 !important;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span::after {
    content: "본문 선택";
    font-size: 0.62rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    grid-area: summary !important;
    min-width: 0;
    overflow: hidden;
    color: #202922;
    font-size: 1rem !important;
    font-weight: 840;
    line-height: 1.22 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    grid-area: action !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid rgba(79, 100, 88, 0.1) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.52) !important;
    color: #5b6956;
    font-size: 0 !important;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "변경";
    font-size: 0.62rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .surface-header {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    position: relative;
    max-height: min(98px, 12.4dvh) !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 12px 0 0 15px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #3f4c3e;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 2px;
    left: 0;
    display: block !important;
    width: 2px;
    border-radius: 999px;
    background: rgba(83, 102, 81, 0.15);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::-webkit-scrollbar {
    display: none;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 6px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    display: grid !important;
    grid-template-columns: 21px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+3) {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    margin-top: 6px;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    display: -webkit-box !important;
    overflow: hidden;
    color: #3f4c3e;
    font-size: 0.82rem;
    line-height: 1.56;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:first-child > span:last-child {
    -webkit-line-clamp: 2 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 21px;
    min-height: 21px;
    margin: 0;
    border: 0 !important;
    border-radius: 999px;
    background: rgba(238, 244, 237, 0.72) !important;
    color: #72806d;
    font-size: 0.6rem;
    font-weight: 850;
  }
}

@media (max-width: 640px) {
  body.reader-view-active .sidebar::after {
    height: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + 14px) !important;
  }

  body.reader-view-active #view-bible .godpeople-reader {
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  }

  body.reader-view-active #view-bible .bible-chapter-nav {
    padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray {
    gap: 7px !important;
    margin: 7px 0 17px !important;
    padding: 11px 12px 12px !important;
    border: 1px solid rgba(43, 54, 40, 0.07) !important;
    border-radius: 17px !important;
    background: rgba(249, 251, 247, 0.62) !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 39px !important;
    padding: 0 0 9px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(43, 54, 40, 0.06) !important;
    border-radius: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open span::after {
    content: "본문";
    font-size: 0.61rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open strong {
    color: #1f2921;
    font-size: 0.98rem !important;
    line-height: 1.22 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small {
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid rgba(79, 100, 88, 0.08) !important;
    background: rgba(255, 255, 255, 0.52) !important;
    color: #5d6a59;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open small::after {
    content: "바꾸기";
    font-size: 0.61rem;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 72px !important;
    min-height: 58px !important;
    padding: 7px 7px 7px 15px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 253, 0.46) !important;
    box-shadow: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    top: 10px;
    bottom: 10px;
    left: 7px;
    background: rgba(83, 102, 81, 0.14);
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-reader-paragraph {
    gap: 3px !important;
    padding-left: 4px;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 7px;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line + .composer-verse-line {
    margin-top: 4px;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    font-size: 0.81rem;
    line-height: 1.48;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-button {
    min-width: 20px;
    min-height: 20px;
    background: transparent !important;
    color: #778472;
    font-size: 0.63rem;
  }
}

@media (max-width: 640px) and (max-height: 780px) {
  #composerPane.is-writing-open .record-passage-tray {
    margin-bottom: 14px !important;
    padding-bottom: 11px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 64px !important;
    min-height: 54px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

@media (max-width: 640px) {
  body[data-active-view="mine"] .sidebar::after,
  body[data-active-view="group"] .sidebar::after,
  body[data-active-view="new"] .sidebar::after,
  body.reader-view-active .sidebar::after,
  body.detail-view-active .sidebar::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 640px) {
  #feedPane .group-records-surface.is-auth-gate {
    min-height: 0;
    margin-top: 2px;
    padding: 9px 2px 11px;
    border: 0;
    border-top: 1px solid rgba(43, 54, 40, 0.075);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #feedPane .group-auth-gate {
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "copy action"
      "points points";
    align-items: center;
    gap: 10px;
  }

  #feedPane .group-auth-icon {
    display: none;
  }

  #feedPane .group-auth-copy {
    grid-area: copy;
    gap: 2px;
  }

  #feedPane .group-auth-copy span {
    font-size: 0.66rem;
    line-height: 1.1;
  }

  #feedPane .group-auth-copy strong {
    font-size: 0.91rem;
    line-height: 1.28;
  }

  #feedPane .group-auth-copy p {
    display: none;
  }

  #feedPane .group-auth-points {
    grid-area: points;
    grid-column: 1 / -1;
    gap: 5px;
    padding-top: 1px;
  }

  #feedPane .group-auth-points span {
    min-height: 22px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.42);
    color: #7a8377;
    font-size: 0.66rem;
  }

  #feedPane .group-auth-action {
    grid-area: action;
    grid-column: auto;
    width: auto;
    min-height: 32px;
    margin-top: 0;
    padding: 0 10px;
    border-color: rgba(36, 43, 36, 0.08);
    background: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  input:not([type="range"]),
  select,
  textarea:not(#dailyTranscriptionInput) {
    font-size: 16px !important;
  }

  .selector-field select,
  .visibility-field select {
    transition: none !important;
  }

  #composerPane.is-writing-open .visibility-field {
    min-height: 44px;
    background: rgba(247, 249, 245, 0.68);
  }

  #composerPane.is-writing-open .visibility-field select {
    min-height: 42px;
    height: 42px;
    padding-right: 26px;
    font-size: 16px !important;
  }

  #composerPane.is-writing-open .record-passage-tray {
    gap: 9px !important;
    margin: 7px 0 17px !important;
    padding: 11px 12px 13px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: min(178px, 27dvh) !important;
    min-height: 118px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 8px 9px 15px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line,
  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+2),
  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:nth-child(n+3) {
    display: grid !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child,
  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line:first-child > span:last-child {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  body.reader-view-active #view-bible .godpeople-reader {
    padding-bottom: 18px !important;
  }

  body.reader-view-active #view-bible .godpeople-surface {
    display: grid;
    padding-bottom: 8px !important;
  }

  body.reader-view-active #view-bible .godpeople-topbar {
    order: 1;
  }

  body.reader-view-active #view-bible .bible-chapter-nav {
    order: 2;
  }

  body.reader-view-active #view-bible .reader-interaction-help {
    order: 3;
  }

  body.reader-view-active #view-bible .godpeople-reader {
    order: 4;
  }

  body.reader-view-active #view-bible .bible-chapter-nav {
    position: static !important;
    z-index: auto;
    margin: 0 max(22px, env(safe-area-inset-right)) 8px max(22px, env(safe-area-inset-left)) !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #view-detail .detail-actions {
    justify-content: flex-end !important;
    margin: 10px 0 9px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  #view-detail .detail-actions:has(.detail-action-meta) {
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(36, 43, 36, 0.055) !important;
  }

  #view-detail .detail-action-cluster,
  #view-detail .detail-actions:has(.detail-action-meta) .detail-action-cluster {
    order: 2;
    margin-left: auto !important;
    padding: 2px !important;
    border: 1px solid rgba(36, 43, 36, 0.06) !important;
    border-radius: 999px !important;
    background: rgba(247, 249, 245, 0.62) !important;
  }

  #view-detail .detail-action-meta {
    order: 1;
    margin-right: auto !important;
    padding-left: 0 !important;
  }

  #view-detail .detail-management-actions {
    order: 3;
  }
}

@media (max-width: 640px) and (max-height: 780px) {
  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: min(150px, 25dvh) !important;
    min-height: 104px !important;
  }
}

@media (max-width: 640px) {
  .sidebar-nav,
  body.reader-view-active .sidebar-nav,
  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav {
    transition:
      width 420ms cubic-bezier(0.16, 1, 0.3, 1),
      max-width 420ms cubic-bezier(0.16, 1, 0.3, 1),
      height 420ms cubic-bezier(0.16, 1, 0.3, 1),
      min-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
      bottom 420ms cubic-bezier(0.16, 1, 0.3, 1),
      padding 360ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 260ms ease,
      background 260ms ease,
      box-shadow 320ms ease,
      opacity 220ms ease,
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: width, height, bottom, transform;
  }

  .sidebar-nav::before,
  body.reader-view-active .sidebar-nav::before {
    transition:
      transform 440ms cubic-bezier(0.16, 1, 0.3, 1),
      top 360ms cubic-bezier(0.16, 1, 0.3, 1),
      bottom 360ms cubic-bezier(0.16, 1, 0.3, 1),
      background 220ms ease !important;
  }

  .nav-item .icon-shell,
  body.reader-view-active .nav-item .icon-shell {
    transition:
      transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
      color 180ms ease !important;
  }

  .nav-item .icon-shell svg,
  body.reader-view-active .nav-item .icon-shell svg {
    transition:
      width 360ms cubic-bezier(0.16, 1, 0.3, 1),
      height 360ms cubic-bezier(0.16, 1, 0.3, 1),
      stroke-width 220ms ease !important;
  }

  body.page-transition-scroll-reset .sidebar-nav,
  body.page-transition-scroll-reset.reader-view-active .sidebar-nav {
    transition:
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease,
      opacity 160ms ease !important;
  }

  body.page-transition-scroll-reset .sidebar-nav::before,
  body.page-transition-scroll-reset.reader-view-active .sidebar-nav::before {
    transition:
      transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
      background 180ms ease !important;
  }

  body.page-transition-scroll-reset .nav-item .icon-shell,
  body.page-transition-scroll-reset.reader-view-active .nav-item .icon-shell {
    transition: color 160ms ease !important;
  }

  body.page-transition-scroll-reset .nav-item .icon-shell svg,
  body.page-transition-scroll-reset.reader-view-active .nav-item .icon-shell svg {
    transition: stroke-width 160ms ease !important;
  }

  #composerPane.is-writing-open .record-passage-tray.hidden {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #groupCopyInviteBtn.compact-icon-button {
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #groupCopyInviteBtn.compact-icon-button svg {
    display: block;
    margin: 0;
  }

  #composerPane.is-writing-open #worshipDateInput {
    display: flex !important;
    align-items: center !important;
    height: 43px !important;
    min-height: 43px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 43px !important;
  }

  #composerPane.is-writing-open #worshipDateInput::-webkit-date-and-time-value,
  #composerPane.is-writing-open #worshipDateInput::-webkit-datetime-edit,
  #composerPane.is-writing-open #worshipDateInput::-webkit-datetime-edit-fields-wrapper {
    min-height: 43px;
    display: flex;
    align-items: center;
    line-height: 43px;
    text-align: left;
  }

  body.reader-view-active #view-bible {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
  }

  body.reader-view-active #view-bible .godpeople-surface {
    width: 100% !important;
    max-width: 100% !important;
    display: grid;
  }

  body.reader-view-active #view-bible .godpeople-topbar {
    order: 1;
  }

  body.reader-view-active #view-bible .reader-interaction-help {
    order: 2;
    margin-bottom: 8px !important;
  }

  body.reader-view-active #view-bible .godpeople-reader {
    order: 3;
    padding-bottom: 7px !important;
  }

  body.reader-view-active #view-bible .bible-chapter-nav {
    order: 4;
    position: static !important;
    z-index: auto !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 1px 0 5px !important;
    padding: 0 20px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.reader-view-active #view-bible .bible-chapter-nav .chapter-nav-button {
    flex: 0 1 auto !important;
    min-width: 84px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 11px !important;
    font-size: 0.76rem !important;
    font-weight: 760 !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: auto !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    margin-top: 6px !important;
    margin-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    padding-top: 12px !important;
  }

  body.reader-view-active #view-bible .godpeople-surface + .chapter-comments-inline {
    margin-top: 4px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .detail-comments-header {
    margin-bottom: 9px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
    padding: 8px 7px 8px 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(36, 43, 36, 0.075) !important;
    border-radius: 14px !important;
    background: rgba(249, 251, 247, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form textarea {
    min-width: 0 !important;
    width: 108.7% !important;
    max-width: 108.7% !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    line-height: 1.38 !important;
    resize: none !important;
    transform: scale(0.92) !important;
    transform-origin: left center !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form textarea:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form-footer {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-submit-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 11px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-submit-button svg {
    width: 15px !important;
    height: 15px !important;
  }

  #view-detail .detail-management-actions {
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .mode-pill.icon-only,
  #view-new #composerPane:not(.is-writing-open) .compose-type-button,
  #composerPane.is-writing-open .compose-type-button,
  #view-mine .archive-mode-card,
  #view-auth .auth-link-button,
  #feedPane .group-auth-action,
  .commitment-entry-button,
  .empty-actions .primary-button,
  .empty-actions .ghost-button {
    min-height: 44px !important;
  }

  #view-mine .archive-mode-row {
    min-height: 48px !important;
  }

  #view-mine .archive-search-main,
  #view-mine .archive-search-input-wrap,
  #view-mine .archive-search-input-wrap .clearable-control,
  #view-mine .archive-search-main input {
    min-height: 44px !important;
  }

  #view-mine .archive-search-input-wrap .clear-control-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body.reader-view-active #view-bible .selector-surface .passage-picker-open {
    min-height: 44px !important;
  }
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .composer-close-button,
  .feedback-modal-header .icon-action,
  #passagePickerCloseBtn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open,
  #composerPane.is-writing-open .editor-submit-actions .primary-button,
  #composerPane.is-writing-open .editor-submit-actions .ghost-button,
  .feedback-submit {
    min-height: 44px !important;
  }

  body.passage-picker-open .passage-picker-tabs button,
  body.passage-picker-open .passage-picker-panel .passage-book-scope button,
  body.passage-picker-open .passage-picker-panel .passage-book-grid button,
  body.passage-picker-open .passage-picker-panel .passage-number-grid button,
  body.passage-picker-open .passage-picker-panel .passage-whole-button {
    min-height: 44px !important;
  }

  body.passage-picker-open .passage-picker-panel .passage-book-scope {
    min-height: 48px !important;
  }

  body.reader-view-active #view-bible .bible-chapter-nav .chapter-nav-button {
    min-height: 44px !important;
    padding: 0 14px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 66px !important;
    padding: 9px 8px 9px 12px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form-footer,
  body.reader-view-active #view-bible .chapter-comments-inline .comment-submit-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-submit-button {
    border-radius: 14px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-submit-button svg {
    width: 17px !important;
    height: 17px !important;
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  #composerPane.is-writing-open .editor-form {
    gap: 7px !important;
  }

  #composerPane.is-writing-open .reflection-title-field,
  #composerPane.is-writing-open .reflection-body-field {
    gap: 5px !important;
  }

  #composerPane.is-writing-open .reflection-title-field {
    padding-bottom: 5px !important;
  }

  #composerPane.is-writing-open #reflectionTitleInput {
    min-height: 44px !important;
    padding: 10px 42px 10px 12px !important;
    border-radius: 14px !important;
  }

  #composerPane.is-writing-open #reflectionBodyInput {
    height: 96px !important;
    min-height: 96px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    line-height: 1.52 !important;
  }

  #composerPane.is-writing-open .reflection-body-stats {
    display: none !important;
  }

  #composerPane.is-writing-open .record-passage-tray {
    margin: 0 0 6px !important;
    padding: 0 2px 7px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach .passage-picker-open {
    min-height: 44px !important;
    padding: 0 !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader {
    max-height: 42px !important;
    min-height: 38px !important;
    padding: 0 0 0 12px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .inline-reader::before {
    top: 3px !important;
    bottom: 3px !important;
  }

  #composerPane.is-writing-open .record-passage-tray .record-passage-attach + .scripture-surface .composer-verse-line > span:last-child {
    line-height: 1.45 !important;
  }

  #composerPane.is-writing-open #reflectionForm > .editor-footer {
    gap: 6px !important;
    margin-top: 0 !important;
    padding-top: 6px !important;
  }

  #composerPane.is-writing-open .visibility-field {
    min-height: 44px !important;
  }

  #composerPane.is-writing-open .visibility-field select {
    min-height: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 640px) {
  #view-admin {
    gap: 10px;
  }

  #view-admin > .section-header {
    min-height: 28px;
    padding: 0 2px;
  }

  #view-admin > .section-header h1 {
    color: #4f584e;
    font-size: 1.16rem;
    font-weight: 840;
    line-height: 1.25;
  }

  #view-admin > .section-header .header-chip {
    min-height: 26px;
    padding: 5px 8px;
    font-size: 0.72rem;
  }

  #view-admin > .surface {
    padding: 12px;
  }

  #view-admin > .admin-panel {
    padding: 12px;
  }

  #view-admin > .admin-usage-panel {
    gap: 14px;
  }

  #view-admin .admin-usage-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #view-admin .admin-usage-metrics > div {
    padding: 11px 8px;
  }

  #view-admin .admin-usage-metrics > div:last-child {
    border-right: 0;
  }

  #view-admin .admin-usage-metrics dt {
    font-size: 0.7rem;
  }

  #view-admin .admin-usage-metrics strong {
    font-size: 1.32rem;
  }

  #view-admin .admin-usage-metrics small {
    min-height: 2.5em;
    font-size: 0.62rem;
  }

  #view-admin .admin-usage-members {
    padding: 13px 0 0;
    border-top: 1px solid var(--line);
  }

  #view-admin .admin-usage-members ol {
    max-height: 184px;
  }

  #view-admin .admin-usage-activity {
    gap: 10px;
    padding-top: 13px;
  }

  #view-admin .admin-usage-activity-heading {
    display: grid;
    gap: 10px;
  }

  #view-admin .admin-usage-activity-metrics {
    justify-content: space-between;
    gap: 12px;
  }

  #view-admin .admin-usage-activity-metrics > div {
    gap: 5px;
  }

  #view-admin .admin-usage-trend {
    gap: 3px;
  }

  #view-admin .admin-usage-member {
    min-height: 44px;
    padding: 7px 2px;
  }

  #view-admin .admin-usage-member-identity {
    display: grid;
    gap: 2px;
  }

  #view-admin .admin-usage-member-identity strong,
  #view-admin .admin-usage-member-identity span {
    max-width: 100%;
  }

  #view-admin .admin-usage-member time {
    font-size: 0.66rem;
  }

  #view-admin .admin-usage-coverage {
    gap: 3px 7px;
  }

  #view-admin .surface-header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #view-admin .surface h2 {
    font-size: 0.95rem;
    line-height: 1.35;
  }

  #view-admin .admin-reset-helper,
  #view-admin .admin-insight-editor {
    gap: 10px;
  }

  #view-admin .admin-reset-helper .surface-header p {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.42;
  }

  #view-admin .admin-reset-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  #view-admin .admin-reset-result {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 7px;
  }

  #view-admin .admin-reset-form input,
  #view-admin .admin-reset-result input,
  #view-admin .admin-insight-form select,
  #view-admin .admin-insight-form textarea {
    font-size: 1rem;
  }

  #view-admin .admin-reset-form input,
  #view-admin .admin-reset-result input,
  #view-admin .admin-insight-form select {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  #view-admin .admin-reset-form .primary-button,
  #view-admin .admin-reset-result .compact-icon-button,
  #view-admin .admin-insight-actions .primary-button,
  #view-admin .admin-insight-actions .ghost-button {
    min-height: 44px;
    font-size: 0.82rem;
  }

  #view-admin .admin-reset-form .primary-button {
    padding: 0 13px;
    white-space: nowrap;
  }

  #view-admin .admin-reset-result .compact-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  #view-admin .admin-insight-form {
    gap: 9px;
  }

  #view-admin .admin-insight-selector {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px;
  }

  #view-admin .admin-insight-form label {
    gap: 5px;
  }

  #view-admin .admin-insight-form label span {
    color: #687166;
    font-size: 0.76rem;
    line-height: 1.2;
  }

  #view-admin .admin-insight-form textarea {
    min-height: 72px;
    padding: 10px 12px;
    line-height: 1.5;
  }

  #view-admin .admin-insight-actions {
    gap: 7px;
  }

  #view-admin .admin-insight-actions .primary-button,
  #view-admin .admin-insight-actions .ghost-button {
    padding: 0 13px;
  }

  #view-admin .admin-report-card {
    gap: 7px;
    padding: 11px 0;
  }

  #view-admin .admin-report-card .thread-meta-line {
    gap: 6px;
    margin-bottom: 0;
  }

  #view-admin .admin-report-card .thread-title {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  #view-admin .admin-report-card .thread-preview {
    margin-top: 0;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  #view-admin .admin-report-actions {
    gap: 6px;
  }

  #view-admin .admin-report-actions .action-button,
  #view-admin .admin-status-select {
    min-height: 44px;
  }

  #view-admin .admin-report-actions .action-button {
    padding: 0 12px;
    font-size: 0.76rem;
  }

  #view-admin .admin-status-select {
    padding: 0 30px 0 11px;
    font-size: 1rem;
  }

  #view-admin .admin-log-panel {
    gap: 8px;
  }

  #view-admin .admin-log-item {
    gap: 8px;
    padding: 10px 0;
  }

  #view-admin .admin-log-item strong {
    font-size: 0.86rem;
  }

  #view-admin .admin-log-item span,
  #view-admin .admin-log-item time {
    font-size: 0.72rem;
  }
}

.commitment-modal-panel {
  grid-template-rows: auto minmax(120px, 1fr) auto;
}

@media (max-width: 640px) {
  .commitment-modal-panel {
    grid-template-rows: auto minmax(100px, 1fr) auto;
    max-height: min(88dvh, 780px);
  }
}

.app-recovery-banner {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 1px solid #d8c6aa;
  border-left: 4px solid #8a5d32;
  border-radius: 8px;
  background: #fffaf2;
  color: #2a251f;
  box-shadow: var(--shadow-xs);
}

.app-recovery-banner.hidden {
  display: none;
}

.app-recovery-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.app-recovery-copy strong {
  font-size: 0.92rem;
  line-height: 1.4;
}

.app-recovery-copy p {
  margin: 0;
  color: #6b5a49;
  font-size: 0.84rem;
  line-height: 1.55;
}

.app-recovery-retry {
  min-width: 116px;
  min-height: 44px;
  flex: 0 0 auto;
  border-color: #c9b08f;
  background: #ffffff;
}

@media (max-width: 640px) {
  .app-recovery-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 10px;
    padding: 13px 14px;
  }

  .app-recovery-retry {
    width: 100%;
  }
}

.field-error {
  display: block;
  margin: 6px 0 0;
  color: #9a3f32;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.field-error.hidden {
  display: none;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
button[aria-invalid="true"] {
  border-color: #b85a4b !important;
  box-shadow: 0 0 0 3px rgba(184, 90, 75, 0.12) !important;
}

/* Stateful today flow */
#view-new .today-passage-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#view-new .today-passage-action {
  color: rgba(251, 248, 239, 0.62);
  font-family: "SUIT", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.35;
}

#view-new .prayer-hero-actions [data-today-state="current"] {
  border-color: #fbf8ef;
  background: #fbf8ef;
  color: #171b14;
}

#view-new .prayer-hero-actions [data-today-state="upcoming"] {
  border-color: rgba(251, 248, 239, 0.16);
  background: rgba(251, 248, 239, 0.06);
  color: rgba(251, 248, 239, 0.7);
}

#view-new .prayer-hero-actions [data-today-state="completed"] {
  border-color: rgba(167, 188, 163, 0.32);
  background: rgba(145, 167, 143, 0.12);
  color: rgba(251, 248, 239, 0.82);
}

@media (max-width: 640px) {
  #view-new #composerPane:not(.is-writing-open) .today-passage-action {
    color: #778273;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions .commitment-entry-button,
  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions .prayer-write-button {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(36, 43, 36, 0.1);
    border-radius: 15px;
    box-shadow: none;
    font-size: 0.88rem;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions .commitment-entry-button {
    order: initial;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions .prayer-write-button {
    order: initial;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions [data-today-state="current"] {
    border-color: #172016;
    background: #172016;
    color: #fbfaf4;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions [data-today-state="upcoming"] {
    border-color: rgba(36, 43, 36, 0.09);
    background: rgba(248, 250, 246, 0.82);
    color: #687264;
  }

  #view-new #composerPane:not(.is-writing-open) .prayer-hero-actions [data-today-state="completed"] {
    border-color: rgba(91, 112, 87, 0.14);
    background: rgba(238, 244, 235, 0.82);
    color: #52634f;
  }
}

#reflectionForm.is-editing .editor-submit-actions {
  flex-wrap: nowrap;
}

@media (max-width: 640px) {
  #composerPane.is-writing-open #reflectionForm.is-editing > .editor-footer {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch;
    gap: 8px;
  }

  #composerPane.is-writing-open #reflectionForm.is-editing .visibility-stack,
  #composerPane.is-writing-open #reflectionForm.is-editing .editor-submit-stack {
    width: 100%;
    min-width: 0;
  }

  #composerPane.is-writing-open #reflectionForm.is-editing .visibility-field {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-inline: 12px 10px;
  }

  #composerPane.is-writing-open #reflectionForm.is-editing .visibility-field > span {
    display: block;
    color: #6c7768;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
  }

  #composerPane.is-writing-open #reflectionForm.is-editing .visibility-field select {
    min-width: 0;
    text-align: right;
  }

  #composerPane.is-writing-open #reflectionForm.is-editing .editor-submit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #composerPane.is-writing-open #reflectionForm.is-editing .editor-submit-actions .primary-button,
  #composerPane.is-writing-open #reflectionForm.is-editing .editor-submit-actions .ghost-button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: nowrap;
  }
}

/* Daily one-page transcription */
#view-new .daily-verse-hero {
  min-height: 0;
  gap: 18px;
  padding: 24px;
  border: 1px solid #d9ddd5;
  border-radius: 8px;
  background: #fdfdfb;
  color: #171d16;
  box-shadow: 0 8px 24px rgba(29, 36, 28, 0.05);
}

#view-new .daily-verse-hero::before {
  display: none;
}

#view-new .daily-verse-hero .prayer-hero-top {
  display: block;
}

#view-new .daily-verse-hero .daily-calendar-date {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: min-content minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid #242b24;
  border-radius: 0;
  background: transparent;
  color: #242b24;
}

#view-new .daily-verse-hero .daily-calendar-date strong {
  grid-column: 1;
  grid-row: 1 / 3;
  color: #89543a;
  font-family: "Noto Serif KR", serif;
  font-size: 4.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
}

#view-new .daily-verse-hero .daily-calendar-date span,
#view-new .daily-verse-hero .daily-calendar-date small {
  grid-column: 2;
  color: #5f685d;
  font-family: "SUIT", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

#view-new .daily-verse-hero .daily-calendar-date span {
  grid-row: 1;
  align-self: end;
}

#view-new .daily-verse-hero .daily-calendar-date small {
  grid-row: 2;
  align-self: start;
}

#view-new .daily-verse-hero .prayer-hero-copy {
  gap: 12px;
}

#view-new .daily-verse-hero .surface-kicker {
  color: #5e685c;
  font-size: 0.76rem;
  font-weight: 850;
}

#view-new .daily-transcription-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

#view-new .daily-transcription-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#view-new .daily-transcription-heading label {
  color: #303830;
  font-size: 0.82rem;
  font-weight: 850;
}

#view-new .daily-transcription-heading span {
  color: #7c847a;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

#view-new .daily-verse-quote {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#view-new .daily-transcription-sheet {
  --daily-transcription-font-size: 1.28rem;
  --daily-transcription-line-height: 44px;
  position: relative;
  display: grid;
  min-height: 192px;
  border-top: 1px solid #d8dcd5;
  border-bottom: 1px solid #d8dcd5;
  background-color: #fdfdfb;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 43px,
    rgba(72, 81, 70, 0.16) 43px,
    rgba(72, 81, 70, 0.16) 44px
  );
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#view-new .daily-transcription-guide,
#view-new .daily-transcription-sheet textarea {
  grid-area: 1 / 1;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 192px;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 2px 12px;
  border: 0;
  border-radius: 0;
  font-family: "Noto Serif KR", serif;
  font-size: var(--daily-transcription-font-size);
  font-weight: 600;
  font-synthesis: none;
  font-kerning: normal;
  line-height: var(--daily-transcription-line-height);
  letter-spacing: 0;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#view-new #composerPane:not(.is-writing-open) .daily-verse-quote .daily-transcription-sheet .daily-transcription-guide {
  z-index: 0;
  color: #a2a8a0;
  pointer-events: none;
}

#view-new .daily-transcription-sheet textarea {
  z-index: 1;
  display: block;
  height: auto;
  resize: none;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: #171d16;
  -webkit-text-fill-color: #171d16;
  caret-color: #89543a;
  opacity: 1;
  box-shadow: none;
}

#view-new .daily-transcription-sheet textarea:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

#view-new .daily-transcription-sheet:focus-within {
  border-color: #71806e;
  box-shadow: 0 0 0 3px rgba(79, 100, 88, 0.1);
}

#view-new .daily-transcription-sheet textarea:disabled {
  background: transparent;
  color: #747c72;
  -webkit-text-fill-color: #747c72;
  opacity: 1;
}

#view-new .daily-verse-quote[aria-busy="true"] .daily-transcription-guide {
  color: #727a70;
}

#view-new .daily-transcription-field > p {
  min-height: 20px;
  max-width: none;
  margin: 0;
  color: #727a6f;
  font-size: 0.76rem;
  line-height: 1.45;
}

#view-new .daily-transcription-field.has-mismatch > p {
  color: #9a5b43;
  font-weight: 750;
}

#view-new .daily-transcription-field.is-complete .daily-transcription-sheet {
  border-color: #a6b4a2;
  background-color: #fbfcf9;
}

#view-new .daily-transcription-field.is-complete > p {
  color: #416040;
  font-weight: 800;
}

#view-new .daily-verse-hero .today-passage-button {
  width: 100%;
  min-height: 48px;
  justify-content: space-between;
  padding: 9px 2px 0;
  border-top: 1px solid #d8dcd5;
  border-radius: 0;
  color: #445244;
  font-family: "SUIT", sans-serif;
  font-size: 0.88rem;
  line-height: 1.4;
}

#view-new .daily-verse-hero .today-passage-button:focus-visible {
  outline-color: rgba(55, 74, 56, 0.68);
}

#view-new .daily-verse-hero .today-passage-action {
  color: #7b8377;
}

#view-new .daily-verse-retry {
  width: fit-content;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 6px;
}

#view-new .daily-verse-hero .prayer-hero-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#view-new .daily-verse-hero .prayer-write-button,
#view-new .daily-verse-hero .commitment-entry-button {
  min-height: 46px;
  border-radius: 6px;
}

#view-new .daily-verse-hero .prayer-write-button {
  border-color: #172016;
  background: #172016;
  color: #fbfaf4;
}

#view-new .daily-verse-hero .commitment-entry-button,
#view-new .daily-verse-hero .commitment-entry-button[data-today-state="optional"] {
  border-color: rgba(45, 57, 43, 0.13);
  background: #f3f5f1;
  color: #526050;
}

@media (max-width: 640px) {
  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero {
    min-height: 0;
    gap: 14px;
    padding: 18px;
    border-radius: 8px;
    background: #fdfdfb;
    color: #171d16;
    box-shadow: 0 6px 20px rgba(29, 36, 28, 0.045);
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .daily-calendar-date {
    min-width: 0;
    min-height: 0;
    padding: 0 0 13px;
    border-radius: 0;
    background: transparent;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .daily-calendar-date strong {
    color: #89543a;
    font-size: 3.7rem;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .daily-calendar-date span,
  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .daily-calendar-date small {
    color: #5f685d;
    font-size: 0.76rem;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .prayer-hero-copy {
    gap: 10px;
  }

  #view-new .daily-transcription-sheet,
  #view-new .daily-transcription-guide,
  #view-new .daily-transcription-sheet textarea {
    min-height: 166px;
  }

  #view-new .daily-transcription-sheet {
    --daily-transcription-font-size: 1.12rem;
    --daily-transcription-line-height: 38px;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 37px,
      rgba(72, 81, 70, 0.16) 37px,
      rgba(72, 81, 70, 0.16) 38px
    );
  }

  #view-new .daily-transcription-guide,
  #view-new .daily-transcription-sheet textarea {
    padding: 3px 1px 11px;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-transcription-field > p {
    display: block;
    overflow: visible;
    color: #727a6f;
    font-size: 0.74rem;
    -webkit-line-clamp: unset;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .today-passage-button {
    color: #445244;
    font-size: 0.86rem;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .prayer-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .prayer-write-button,
  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .commitment-entry-button {
    order: initial;
    min-width: 0;
    min-height: 46px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.86rem;
  }
}

@media (max-width: 380px) {
  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .prayer-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-height: 700px) and (max-width: 640px) {
  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero {
    gap: 10px;
    padding: 14px 16px;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .daily-calendar-date {
    padding-bottom: 10px;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .daily-calendar-date strong {
    font-size: 3.2rem;
  }

  #view-new .daily-transcription-sheet,
  #view-new .daily-transcription-guide,
  #view-new .daily-transcription-sheet textarea {
    min-height: 148px;
  }

  #view-new #composerPane:not(.is-writing-open) .daily-verse-hero .daily-calendar-topline {
    display: none;
  }

  #view-new .daily-transcription-sheet {
    --daily-transcription-font-size: 1.03rem;
    --daily-transcription-line-height: 34px;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 33px,
      rgba(72, 81, 70, 0.16) 33px,
      rgba(72, 81, 70, 0.16) 34px
    );
  }

  #view-new .daily-transcription-guide,
  #view-new .daily-transcription-sheet textarea {
    padding: 3px 1px 9px;
  }
}

/* Daily transcription archive */
#view-mine .daily-transcription-archive {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: 17px 2px 20px;
  border-top: 1px solid rgba(42, 51, 40, 0.09);
  border-bottom: 1px solid rgba(42, 51, 40, 0.09);
}

#view-mine .daily-transcription-archive-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

#view-mine .daily-transcription-archive-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#view-mine .daily-transcription-archive-copy > span {
  color: #7b8278;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: 0;
}

#view-mine .daily-transcription-archive-copy h2 {
  margin: 0;
  color: #222820;
  font-size: 1.02rem;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: 0;
}

#view-mine .daily-transcription-month-navigation {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(94px, auto) 36px;
  align-items: center;
  gap: 3px;
}

#view-mine .daily-transcription-month-navigation time {
  color: #30382f;
  font-size: 0.84rem;
  font-weight: 790;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
}

#view-mine .daily-transcription-month-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4f5b4e;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

#view-mine .daily-transcription-month-button:hover,
#view-mine .daily-transcription-month-button:focus-visible {
  background: rgba(79, 100, 88, 0.09);
  color: #222a22;
}

#view-mine .daily-transcription-month-button:focus-visible,
#view-mine .daily-transcription-day:focus-visible,
#view-mine .daily-transcription-context-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

#view-mine .daily-transcription-month-button:disabled {
  opacity: 0.28;
  cursor: default;
}

#view-mine .daily-transcription-month-button svg {
  width: 18px;
  height: 18px;
}

#view-mine .daily-transcription-calendar-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(240px, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 46px);
}

#view-mine .daily-transcription-calendar-panel {
  min-width: 0;
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 6px;
}

#view-mine .daily-transcription-weekdays,
#view-mine .daily-transcription-calendar-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

#view-mine .daily-transcription-weekdays {
  min-height: 22px;
  align-items: center;
  color: #858c82;
  font-size: 0.68rem;
  font-weight: 690;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}

#view-mine .daily-transcription-weekdays span:first-child {
  color: #9a654c;
}

#view-mine .daily-transcription-calendar-grid {
  gap: 2px 0;
}

#view-mine .daily-transcription-day,
#view-mine .daily-transcription-day-blank {
  min-width: 0;
  height: 44px;
  min-height: 44px;
}

#view-mine .daily-transcription-day {
  position: relative;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #555e53;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

#view-mine .daily-transcription-day:hover:not(:disabled) {
  background: rgba(79, 100, 88, 0.07);
  color: #20271f;
}

#view-mine .daily-transcription-day.is-selected {
  background: #e8eee8;
  color: #26392d;
  font-weight: 820;
}

#view-mine .daily-transcription-day.is-today .daily-transcription-day-number {
  text-decoration: underline;
  text-decoration-color: #839184;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

#view-mine .daily-transcription-day.is-future {
  color: #b4bab1;
}

#view-mine .daily-transcription-day-number {
  transform: translateY(-2px);
}

#view-mine .daily-transcription-day-markers {
  position: absolute;
  left: 50%;
  bottom: 7px;
  min-height: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transform: translateX(-50%);
}

#view-mine .daily-transcription-day-marker,
#view-mine .daily-transcription-legend-marker {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9a5b38;
}

#view-mine .daily-transcription-day.is-selected .daily-transcription-day-marker {
  background: #835039;
}

#view-mine .daily-reflection-day-marker,
#view-mine .daily-reflection-legend-marker {
  display: inline-block;
  width: 8px;
  height: 3px;
  border-radius: 999px;
  background: #55705d;
}

#view-mine .daily-transcription-day.is-selected .daily-reflection-day-marker {
  background: #344f3d;
}

#view-mine .daily-transcription-calendar-legend {
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #737b71;
  font-size: 0.68rem;
  font-weight: 690;
  line-height: 1;
  letter-spacing: 0;
}

#view-mine .daily-transcription-calendar-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#view-mine .daily-transcription-archive-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#view-mine .daily-transcription-archive-detail {
  min-width: 0;
  min-height: 282px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(42, 51, 40, 0.12);
  border-left: 3px solid #71806e;
  border-radius: 6px;
  background: #fbfcfa;
}

#view-mine .daily-transcription-archive-detail-kicker {
  color: #52634f;
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.3;
  letter-spacing: 0;
}

#view-mine .daily-transcription-archive-detail > time {
  color: #6f776c;
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.4;
  letter-spacing: 0;
}

#view-mine .daily-transcription-archive-empty {
  max-width: 360px;
  margin: 2px 0 0;
  color: #858c82;
  font-size: 0.84rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

#view-mine .daily-transcription-archive-entry {
  min-width: 0;
  display: grid;
  gap: 11px;
}

#view-mine .daily-transcription-archive-entry.hidden,
#view-mine .daily-transcription-archive-entry [hidden] {
  display: none;
}

#view-mine .daily-transcription-archive-reference {
  margin: 0;
  color: #425446;
  font-size: 0.8rem;
  font-weight: 820;
  line-height: 1.4;
  letter-spacing: 0;
}

#view-mine .daily-transcription-archive-entry blockquote {
  max-width: 540px;
  margin: 0;
  color: #242923;
  font-family: "Noto Serif KR", serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

#view-mine .daily-transcription-archive-writing {
  max-width: 540px;
  display: grid;
  gap: 6px;
  padding-top: 11px;
  border-top: 1px solid rgba(42, 51, 40, 0.09);
}

#view-mine .daily-transcription-archive-writing > span {
  color: #868d83;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: 0;
}

#view-mine .daily-transcription-archive-writing p {
  margin: 0;
  color: #4e574d;
  font-size: 0.86rem;
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#view-mine .daily-transcription-context-button {
  justify-self: start;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(63, 82, 69, 0.28);
  border-radius: 0;
  background: transparent;
  color: #405647;
  font-size: 0.8rem;
  font-weight: 790;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}

#view-mine .daily-transcription-context-button svg {
  width: 16px;
  height: 16px;
}

#view-mine .archive-records-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 2px solid rgba(42, 51, 40, 0.14);
}

#view-mine .archive-records-section > h2 {
  margin: 0;
  color: #222820;
  font-size: 1.02rem;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  #view-mine .daily-transcription-calendar-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #view-mine .daily-transcription-calendar-panel {
    max-width: none;
  }

  #view-mine .daily-transcription-archive-detail {
    min-height: 0;
    padding: 14px;
    border: 1px solid rgba(42, 51, 40, 0.12);
    border-top: 3px solid #71806e;
  }
}

@media (max-width: 640px) {
  #view-mine .daily-transcription-archive {
    gap: 11px;
    margin: 0;
    padding: 10px 1px 13px;
  }

  #view-mine .daily-transcription-archive-header {
    gap: 8px;
  }

  #view-mine .daily-transcription-archive-copy {
    gap: 1px;
  }

  #view-mine .daily-transcription-archive-copy > span {
    font-size: 0.66rem;
  }

  #view-mine .daily-transcription-archive-copy h2 {
    font-size: 0.92rem;
  }

  #view-mine .daily-transcription-month-navigation {
    grid-template-columns: 34px minmax(88px, auto) 34px;
    gap: 0;
  }

  #view-mine .daily-transcription-month-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  #view-mine .daily-transcription-month-navigation time {
    font-size: 0.78rem;
  }

  #view-mine .daily-transcription-calendar-panel {
    gap: 3px;
  }

  #view-mine .daily-transcription-weekdays {
    min-height: 18px;
    font-size: 0.62rem;
  }

  #view-mine .daily-transcription-calendar-grid {
    gap: 0;
  }

  #view-mine .daily-transcription-day,
  #view-mine .daily-transcription-day-blank {
    height: 42px;
    min-height: 42px;
  }

  #view-mine .daily-transcription-day {
    font-size: 0.75rem;
  }

  #view-mine .daily-transcription-day-markers {
    bottom: 6px;
    min-height: 4px;
    gap: 2px;
  }

  #view-mine .daily-transcription-day-marker,
  #view-mine .daily-transcription-legend-marker {
    width: 4px;
    height: 4px;
  }

  #view-mine .daily-reflection-day-marker,
  #view-mine .daily-reflection-legend-marker {
    width: 7px;
    height: 3px;
  }

  #view-mine .daily-transcription-calendar-legend {
    min-height: 16px;
    gap: 12px;
    font-size: 0.64rem;
  }

  #view-mine .daily-transcription-calendar-layout {
    gap: 10px;
  }

  #view-mine .daily-transcription-archive-detail {
    gap: 8px;
    padding: 12px;
  }

  #view-mine .daily-transcription-archive-entry {
    gap: 8px;
  }

  #view-mine .daily-transcription-archive-entry blockquote {
    font-size: 0.92rem;
    line-height: 1.7;
  }

  #view-mine .daily-transcription-archive-writing {
    gap: 4px;
    padding-top: 8px;
  }

  #view-mine .daily-transcription-archive-writing p {
    font-size: 0.8rem;
    line-height: 1.58;
  }

  #view-mine .daily-transcription-context-button {
    min-height: 36px;
    font-size: 0.76rem;
  }

  #view-mine .archive-records-section {
    gap: 9px;
    padding-top: 14px;
  }

  #view-mine .archive-records-section > h2 {
    font-size: 0.92rem;
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  #view-mine .daily-transcription-day,
  #view-mine .daily-transcription-day-blank {
    height: 40px;
    min-height: 40px;
  }
}

@media (max-width: 640px) {
  body.mobile-input-active .app-shell,
  body.mobile-input-active .content-column,
  body.mobile-input-active .view.active,
  body.mobile-input-active .view.active > *,
  body.mobile-input-active .composer-pane.active,
  body.mobile-input-active .composer-pane.active > *,
  body.mobile-input-active .feed-pane.active,
  body.mobile-input-active .feed-pane.active > *,
  body.mobile-input-active .group-page-panel.active,
  body.mobile-input-active .prayer-hero-surface,
  body.mobile-input-active .record-start-surface,
  body.mobile-input-active .editor-surface,
  body.mobile-input-active #view-bible .selector-surface,
  body.mobile-input-active #view-bible .chapter-guide-surface,
  body.mobile-input-active #view-bible .godpeople-surface,
  body.mobile-input-active .closet-prayer-shell,
  body.mobile-input-active .closet-prayer-form {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  body.mobile-input-active .resume-input-paint-refresh {
    -webkit-transform: none !important;
    transform: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;
    opacity: 0.999 !important;
  }

  body.mobile-input-active .commitment-modal-panel,
  body.mobile-input-active .passage-picker-panel,
  body.mobile-input-active .feedback-modal-panel,
  body.mobile-input-active .action-modal-panel {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.reader-view-active.mobile-input-active #view-bible .chapter-comments-inline .comment-form textarea:focus {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
}

/* Account information hierarchy */
#view-auth .auth-panel {
  max-width: 640px;
  gap: 0;
}

#view-auth .account-overview-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 4px 0 16px;
  border-bottom: 1px solid rgba(36, 43, 36, 0.08);
}

#view-auth .account-status {
  min-width: 0;
}

#view-auth .account-status.is-signed-in {
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

#view-auth .account-status-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#view-auth .account-connection-message.is-ready {
  white-space: nowrap;
}

#view-auth .account-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(65, 88, 71, 0.12);
  border-radius: 50%;
  background: #e9f0e9;
  color: #405747;
  font-family: "Noto Serif KR", serif;
  font-size: 1.05rem;
  font-weight: 700;
}

#view-auth .account-logout-button {
  min-width: 72px;
  min-height: 44px;
  padding: 0 12px;
  border-color: rgba(36, 43, 36, 0.1);
  border-radius: 8px;
  background: transparent;
  color: #657064;
  box-shadow: none;
  font-size: 0.8rem;
  font-weight: 760;
}

#view-auth .account-delete-button {
  min-width: 64px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
}

#view-auth #authForm {
  margin-top: 14px;
}

#view-auth .privacy-renewal-form {
  margin-top: 14px;
}

#view-auth .profile-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(36, 43, 36, 0.08);
  border-bottom: 1px solid rgba(36, 43, 36, 0.08);
}

#view-auth .profile-edit-heading,
#view-auth .profile-edit-form > #profileSaveBtn,
#view-auth .profile-edit-form > .account-danger-zone {
  grid-column: 1 / -1;
}

#view-auth .account-profile-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

#view-auth .account-profile-field > span {
  color: #697267;
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.3;
}

#view-auth .account-profile-field > .clearable-control {
  width: 100%;
}

#view-auth #profileSaveBtn {
  min-width: 96px;
  min-height: 44px;
  justify-self: start;
  border-radius: 8px;
}

#view-auth .account-release-links {
  margin-top: 12px;
}

#view-auth .usage-analytics-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(36, 43, 36, 0.08);
}

#view-auth .usage-analytics-setting.hidden {
  display: none;
}

.usage-analytics-setting-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.usage-analytics-setting-copy strong {
  font-size: 0.9rem;
  line-height: 1.35;
}

.usage-analytics-setting-copy span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.usage-analytics-setting-copy small {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.35;
}

.setting-switch {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  cursor: pointer;
}

.setting-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.setting-switch-track {
  width: 44px;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(36, 43, 36, 0.14);
  border-radius: 999px;
  background: #e8ebe7;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.setting-switch-track i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(36, 43, 36, 0.18);
  transform: translateX(0);
  transition: transform 180ms ease;
}

.setting-switch input:checked + .setting-switch-track {
  border-color: #647b69;
  background: #647b69;
}

.setting-switch input:checked + .setting-switch-track i {
  transform: translateX(18px);
}

.setting-switch input:focus-visible + .setting-switch-track {
  outline: 2px solid rgba(68, 91, 74, 0.34);
  outline-offset: 3px;
}

.setting-switch input:disabled + .setting-switch-track {
  opacity: 0.55;
  cursor: wait;
}

.setting-switch-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.2;
  white-space: nowrap;
}

#view-auth .account-release-links .account-delete-button {
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a4131;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 760;
}

#view-auth .account-release-links .account-delete-button:hover,
#view-auth .account-release-links .account-delete-button:focus-visible {
  background: rgba(255, 244, 239, 0.72);
  color: #713528;
}

#view-auth .auth-panel:has(.account-logout-button:not(.hidden)) #authForm {
  display: none;
}

/* Compact chapter discussion */
#view-bible .chapter-comments-inline .comment-form textarea {
  min-height: 72px;
}

@media (max-width: 640px) {
  #view-auth {
    gap: 12px;
  }

  #view-auth > .section-header {
    min-height: 32px;
    padding: 0 2px;
  }

  #view-auth > .section-header h1 {
    color: #252d25;
    font-size: 1.16rem;
    font-weight: 820;
    line-height: 1.25;
  }

  #view-auth .auth-panel {
    gap: 0;
    padding: 0 3px;
  }

  #view-auth .account-overview-row {
    gap: 10px;
    padding: 4px 0 14px;
  }

  #view-auth .account-status {
    min-height: 0;
    padding-right: 0;
  }

  #view-auth .account-status.is-signed-in {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  #view-auth .account-avatar {
    width: 42px;
    height: 42px;
    font-size: 0.98rem;
  }

  #view-auth .account-status strong {
    font-size: 1rem;
    line-height: 1.3;
  }

  #view-auth .account-status span {
    font-size: 0.78rem;
    line-height: 1.42;
  }

  #view-auth .account-status .account-avatar {
    font-size: 0.98rem;
  }

  #view-auth .account-logout-button {
    position: static;
    min-width: 66px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(36, 43, 36, 0.1);
    border-radius: 8px;
    font-size: 0.78rem;
  }

  #view-auth #authForm {
    margin-top: 12px;
  }

  #view-auth .account-form {
    gap: 9px;
  }

  #view-auth .account-form input:not([type="checkbox"]) {
    min-height: 46px;
    border-radius: 8px;
  }

  #view-auth .account-actions {
    gap: 8px;
  }

  #view-auth .account-actions .primary-button,
  #view-auth .account-actions .ghost-button {
    min-height: 46px;
    border-radius: 8px;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
    padding: 14px 0;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-heading,
  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-profile-field,
  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) #profileSaveBtn,
  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone {
    grid-column: 1;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-heading span {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .profile-edit-form .clearable-control input {
    min-height: 46px;
    border-radius: 8px;
    background: #ffffff;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) #profileSaveBtn {
    width: 100%;
    min-height: 44px;
    grid-row: auto;
    justify-self: stretch;
    border-radius: 8px;
    font-size: 0.8rem;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-danger-zone {
    gap: 10px;
    margin-top: 4px;
    padding: 11px 0 0;
    border: 0;
    border-top: 1px solid rgba(138, 65, 49, 0.12);
    border-radius: 0;
    background: transparent;
  }

  #view-auth .account-release-links {
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
  }

  #view-auth .usage-analytics-setting {
    gap: 12px;
    padding: 13px 0;
  }

  #view-auth .usage-analytics-setting-copy span {
    font-size: 0.73rem;
  }

  body.reader-view-active #view-bible .chapter-comments-inline {
    margin-top: 3px !important;
    margin-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(36, 43, 36, 0.08) !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .detail-comments-header {
    margin-bottom: 6px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .detail-comments-header h2 {
    font-size: 0.86rem !important;
    line-height: 1.3 !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 54px !important;
    padding: 5px 5px 5px 11px !important;
    border-radius: 8px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form textarea,
  body.reader-view-active #view-bible .chapter-comments-inline .comment-form textarea:focus {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    transform: none !important;
    transform-origin: center !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-list {
    gap: 6px;
    margin-top: 8px;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-card {
    padding: 9px 10px;
    border-radius: 6px;
    box-shadow: none;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-empty-card {
    padding: 5px 2px;
    border: 0;
    background: transparent;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-empty-card .comment-body {
    color: #7c847a;
    font-size: 0.78rem;
    line-height: 1.45;
  }
}

/* Calm disclosure, discussion, archive, and composer controls */
.animated-disclosure > summary {
  list-style: none;
}

.animated-disclosure > summary::-webkit-details-marker {
  display: none;
}

.animated-disclosure {
  box-shadow: none !important;
}

.animated-disclosure .collapsible-summary {
  width: 100%;
  min-height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease;
}

.animated-disclosure .collapsible-marker {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: inline-grid !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(235, 240, 233, 0.72);
  color: #657064;
}

.animated-disclosure .collapsible-marker::before {
  display: none !important;
  content: none !important;
}

.animated-disclosure .collapsible-marker svg {
  width: 17px;
  height: 17px;
  display: block;
  transform: translateX(1px);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.animated-disclosure.is-disclosure-open .collapsible-marker svg {
  transform: translateX(1px) rotate(180deg);
}

.animated-disclosure.is-disclosure-composited .collapsible-body {
  will-change: transform, opacity;
}

#view-bible .chapter-guide-surface {
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

#view-bible .chapter-guide-surface .collapsible-body {
  padding: 2px 14px 15px;
}

#view-bible .chapter-comments-inline {
  margin-top: 4px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(36, 43, 36, 0.09);
  background: transparent;
}

#view-bible .chapter-comments-inline .detail-comments-header {
  margin: 0;
}

#view-bible .chapter-comments-inline .detail-comments-header h2 {
  margin: 0;
  color: #2b342c;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
}

#view-bible .chapter-discussion-body {
  padding: 0 0 14px;
}

#view-bible .chapter-comment-composer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(36, 43, 36, 0.08);
  background: transparent;
}

#view-bible .chapter-comment-self {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: #e9efe8;
  color: #496050;
  font-size: 0.72rem;
  font-weight: 820;
}

#view-bible .chapter-comments-inline .comment-form textarea,
#view-bible .chapter-comments-inline .comment-form textarea:focus {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  max-height: 96px;
  box-sizing: border-box;
  padding: 10px 45px 10px 11px;
  overflow-y: auto;
  border: 1px solid rgba(45, 56, 43, 0.1);
  border-radius: 8px;
  background: #f9faf7;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--sage);
  box-shadow: none;
  font-size: 16px;
  line-height: 1.45;
  resize: none;
  transform: none;
}

#view-bible .chapter-comments-inline .comment-form textarea:focus {
  border-color: rgba(65, 88, 71, 0.3);
  outline: 3px solid rgba(96, 121, 101, 0.1);
  outline-offset: 0;
}

#view-bible .chapter-comments-inline .comment-form-footer,
#view-bible .chapter-comments-inline .comment-submit-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

#view-bible .chapter-comments-inline .comment-form-footer {
  display: grid;
  place-items: center;
  align-self: center;
}

#view-bible .chapter-comments-inline .comment-submit-button {
  padding: 0;
  border-radius: 8px;
}

#view-bible .chapter-comments-inline .clear-control-button {
  top: 6px;
  right: 6px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  transform: none;
}

#view-bible .chapter-comments-inline .comment-list {
  display: grid;
  gap: 0;
  margin-top: 2px;
}

#view-bible .chapter-comments-inline .comment-card {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(36, 43, 36, 0.07);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-bible .chapter-comment-empty {
  margin: 0;
  padding: 14px 2px 4px;
  color: #7c847a;
  font-size: 0.8rem;
  line-height: 1.5;
}

#view-mine .archive-overview {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#view-mine .archive-overview .archive-stats {
  padding: 0;
  border: 0;
}

#view-mine .archive-starter-empty {
  gap: 12px;
  margin-top: 4px;
  padding: 22px 2px 24px;
  border: 0;
  border-top: 1px solid rgba(43, 54, 40, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.editor-heading {
  position: relative;
}

.composer-drag-handle {
  display: none;
}

.composer-close-button {
  width: auto;
  min-width: 72px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 780;
  white-space: nowrap;
}

.composer-close-button svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  body.reader-view-active #view-bible .chapter-guide-surface,
  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) {
    margin: 1px max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
    border: 1px solid rgba(36, 43, 36, 0.075);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: none;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary,
  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) .collapsible-summary {
    min-height: 44px;
    padding: 6px 8px 6px 12px;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-summary h2,
  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) .collapsible-summary h2 {
    color: #303a31;
    font-size: 0.86rem;
    font-weight: 800;
  }

  body.reader-view-active #view-bible .chapter-guide-surface .collapsible-marker,
  body.reader-view-active #view-bible .chapter-guide-surface:not([open]) .collapsible-marker {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(235, 240, 233, 0.72);
    color: #657064;
  }

  body.reader-view-active #view-bible .chapter-comments-inline {
    width: auto !important;
    margin: 5px max(18px, env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(36, 43, 36, 0.09) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .detail-comments-header {
    min-height: 48px;
    margin: 0;
    padding: 6px 0;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .detail-comments-header h2 {
    font-size: 0.9rem;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .chapter-discussion-body {
    padding: 0 0 12px;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form {
    grid-template-columns: 32px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 60px !important;
    padding: 7px 0 10px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(36, 43, 36, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .chapter-comment-self {
    width: 32px;
    height: 32px;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form textarea,
  body.reader-view-active #view-bible .chapter-comments-inline .comment-form textarea:focus,
  body.reader-view-active.mobile-input-active #view-bible .chapter-comments-inline .comment-form textarea:focus {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    min-height: 44px !important;
    max-height: 96px !important;
    padding: 10px 45px 10px 11px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(45, 56, 43, 0.1) !important;
    border-radius: 8px !important;
    background: #f9faf7 !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    transform: none !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form-footer,
  body.reader-view-active #view-bible .chapter-comments-inline .comment-submit-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form-footer {
    align-self: center !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-submit-button {
    border-radius: 8px !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .clearable-control {
    width: 100%;
    min-width: 0;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .clear-control-button {
    top: 6px;
    right: 6px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    transform: none;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-form textarea:focus,
  body.reader-view-active.mobile-input-active #view-bible .chapter-comments-inline .comment-form textarea:focus {
    outline: 3px solid rgba(96, 121, 101, 0.1) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-list {
    gap: 0;
    margin-top: 2px;
  }

  body.reader-view-active #view-bible .chapter-comments-inline .comment-card {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid rgba(36, 43, 36, 0.07);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #composerPane.is-writing-open .editor-heading {
    padding-top: 7px;
  }

  #composerPane.is-writing-open .composer-drag-handle {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 52px;
    height: 22px;
    display: block;
    border-radius: 8px;
    background: transparent;
    transform: translateX(-50%);
    touch-action: none;
    pointer-events: auto;
  }

  #composerPane.is-writing-open .composer-drag-handle::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: rgba(66, 79, 65, 0.18);
    transform: translateX(-50%);
  }

  #composerPane.is-writing-open .composer-close-button {
    width: auto !important;
    min-width: 70px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 8px;
  }

  #composerPane.is-writing-open .editor-surface {
    transform: translate3d(0, var(--composer-dismiss-offset, 0), 0);
    transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #composerPane.is-writing-open.is-dismiss-gesture-ready .editor-surface {
    animation: none !important;
  }

  #composerPane.is-dismiss-dragging .editor-surface {
    transition: none;
  }

  #view-mine .my-list > .empty-state {
    gap: 12px !important;
    margin-top: 4px !important;
    padding: 22px 2px 24px !important;
    border: 0 !important;
    border-top: 1px solid rgba(43, 54, 40, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-status {
    padding-right: 0;
  }

  #view-auth .auth-panel:has(#logoutBtn:not(.hidden)) .account-release-links .account-delete-button {
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #8a4131;
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 760;
  }

  #composerPane.is-writing-open .editor-extra-fields,
  #composerPane.is-writing-open .editor-extra-fields:not([open]) {
    width: 100%;
    margin-top: -2px;
    overflow: hidden;
    border: 1px solid rgba(36, 43, 36, 0.08);
    border-radius: 8px;
    background: rgba(251, 252, 249, 0.76);
    box-shadow: none;
  }

  #composerPane.is-writing-open .editor-extra-fields > summary,
  #composerPane.is-writing-open .editor-extra-fields:not([open]) > summary {
    width: 100%;
    min-height: 44px;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #687165;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
  }

  #composerPane.is-writing-open .editor-extra-fields:not([open]) > summary::after {
    content: none;
  }

  #composerPane.is-writing-open .editor-extra-fields > .editor-extra-fields-body {
    gap: 12px;
    padding: 2px 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-disclosure .collapsible-marker svg,
  .share-link-manager summary::after,
  .editor-extra-marker svg,
  #composerPane.is-writing-open .editor-surface {
    transition: none;
  }
}

/* Keep the native iOS navigation on compositor-friendly properties. */
@media (max-width: 640px) {
  body.native-ios-shell,
  body.native-ios-shell.mobile-nav-expanded,
  body.native-ios-shell.mobile-nav-compact {
    --mobile-nav-width: min(80vw, 330px);
    --mobile-nav-height: 68px;
    --mobile-nav-bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    --mobile-nav-icon-size: 24px;
  }

  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity 160ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
  }

  body.native-ios-shell.mobile-nav-compact .sidebar-nav,
  body.native-ios-shell.mobile-nav-compact.reader-view-active .sidebar-nav {
    transform: translateX(-50%) translateY(4px) translateZ(0) !important;
  }

  body.native-ios-shell .sidebar-nav::before,
  body.native-ios-shell.reader-view-active .sidebar-nav::before,
  body.native-ios-shell.mobile-nav-compact .sidebar-nav::before {
    top: 7px;
    bottom: 7px;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease !important;
  }

  body.native-ios-shell .nav-item .icon-shell,
  body.native-ios-shell.reader-view-active .nav-item .icon-shell {
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), color 150ms ease !important;
  }

  body.native-ios-shell .nav-item .icon-shell svg,
  body.native-ios-shell.reader-view-active .nav-item .icon-shell svg {
    transition: none !important;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav,
  body.native-ios-shell .sidebar-nav::before,
  body.native-ios-shell.reader-view-active .sidebar-nav::before,
  body.native-ios-shell.mobile-nav-compact .sidebar-nav::before,
  body.native-ios-shell .nav-item .icon-shell,
  body.native-ios-shell.reader-view-active .nav-item .icon-shell {
    transition: none !important;
  }
}

/* Daily archive bundle and Scripture-linked personal history */
#view-bible .interactive-verse {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

#view-bible .reader-verse-aside {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#view-bible .reader-memory-button {
  position: relative;
  isolation: isolate;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  grid-template-columns: 15px auto;
  place-content: center;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #78563f;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}

#view-bible .reader-memory-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  border-radius: 50%;
  background: rgba(242, 235, 226, 0.72);
  transition: background-color 160ms ease;
}

#view-bible .reader-memory-button:hover,
#view-bible .reader-memory-button:focus-visible {
  color: #5f402e;
  transform: translateY(-1px);
}

#view-bible .reader-memory-button:hover::before,
#view-bible .reader-memory-button:focus-visible::before {
  background: #eee2d5;
}

#view-bible .reader-memory-button svg {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
}

#view-bible .reader-memory-button span {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;
}

#view-bible .reader-verse-aside .community-mark-count {
  margin-left: 0;
}

#view-mine .daily-record-bundle {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#view-mine .daily-transcription-archive-entry:not(.hidden) + .daily-record-bundle {
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid rgba(42, 51, 40, 0.1);
}

#view-mine .daily-record-bundle.hidden {
  display: none;
}

#view-mine .daily-record-bundle-head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#view-mine .daily-record-bundle-head strong {
  color: #3f4d40;
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.35;
}

#view-mine .daily-record-bundle-head span {
  color: #7d857a;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1;
}

#view-mine .daily-record-bundle-list {
  min-width: 0;
  display: grid;
}

#view-mine .daily-record-bundle-button {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
  border: 0;
  border-top: 1px solid rgba(42, 51, 40, 0.08);
  border-radius: 0;
  background: transparent;
  color: #242a23;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

#view-mine .daily-record-bundle-button:hover,
#view-mine .daily-record-bundle-button:focus-visible {
  background: rgba(234, 240, 232, 0.64);
}

#view-mine .daily-record-bundle-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

#view-mine .daily-record-bundle-badge {
  min-width: 0;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 4px 6px;
  border-radius: 5px;
  background: #edf2ec;
  color: #48604f;
  font-size: 0.64rem;
  font-weight: 830;
  line-height: 1;
  white-space: nowrap;
}

#view-mine .daily-record-bundle-badge.is-qt {
  background: #f5eee7;
  color: #7e583f;
}

#view-mine .daily-record-bundle-badge.is-worship {
  background: #edf0f5;
  color: #4f5e73;
}

#view-mine .daily-record-bundle-badge.is-gratitude {
  background: #f4f0e2;
  color: #75652e;
}

#view-mine .daily-record-bundle-badge.is-free {
  background: #f1edf3;
  color: #67566d;
}

#view-mine .daily-record-bundle-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#view-mine .daily-record-bundle-copy strong,
#view-mine .daily-record-bundle-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-mine .daily-record-bundle-copy strong {
  color: #2d332c;
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.35;
}

#view-mine .daily-record-bundle-copy small {
  color: #7c8479;
  font-size: 0.69rem;
  line-height: 1.35;
}

#view-mine .daily-record-bundle-arrow {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-top: 1.5px solid #879085;
  border-right: 1.5px solid #879085;
  transform: rotate(45deg);
}

#view-detail .detail-passage-timeline {
  max-width: 620px;
  display: block;
  overflow: hidden;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(42, 51, 40, 0.11);
  border-bottom: 1px solid rgba(42, 51, 40, 0.11);
  border-radius: 0;
  background: transparent;
}

#view-detail .detail-passage-timeline.hidden {
  display: none;
}

#view-detail .detail-passage-timeline > .collapsible-summary {
  min-height: 54px;
  padding: 7px 2px;
  background: transparent;
}

#view-detail .detail-passage-timeline > .collapsible-summary:hover,
#view-detail .detail-passage-timeline > .collapsible-summary:focus-visible {
  background: rgba(234, 240, 232, 0.5);
}

#view-detail .detail-passage-timeline-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#view-detail .detail-passage-timeline-copy strong {
  color: #2e382f;
  font-size: 0.86rem;
  font-weight: 820;
  line-height: 1.35;
}

#view-detail .detail-passage-timeline-copy small {
  min-width: 0;
  overflow: hidden;
  color: #7a8278;
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-detail .detail-passage-timeline-side {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#view-detail .detail-passage-timeline .passage-memory-count {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #687568;
  font-size: 0.7rem;
}

#view-detail .detail-passage-timeline .collapsible-marker {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  background: rgba(235, 240, 233, 0.64);
}

#view-detail .detail-passage-timeline-body {
  padding: 2px 0 8px;
}

#view-detail .detail-passage-timeline .passage-memory-entry {
  min-height: 54px;
  grid-template-columns: 20px minmax(0, 1fr) 22px;
  padding: 8px 2px 8px 0;
}

#view-detail .detail-passage-timeline:not(.hidden) + .detail-comments {
  margin-top: 20px;
}

@media (max-width: 640px) {
  body.reader-view-active #view-bible .interactive-verse {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  #view-mine .daily-record-bundle-button {
    min-height: 50px;
    grid-template-columns: 54px minmax(0, 1fr) 12px;
    gap: 8px;
  }

  #view-mine .daily-record-bundle-badge {
    font-size: 0.61rem;
  }

  #view-detail .detail-passage-timeline {
    margin-top: 16px;
  }

  #view-detail .detail-passage-timeline > .collapsible-summary {
    min-height: 50px;
  }

  #view-detail .passage-memory-entry-copy > small {
    -webkit-line-clamp: 1;
  }

  #view-detail .detail-passage-timeline:not(.hidden) + .detail-comments {
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-bible .reader-memory-button,
  #view-bible .reader-memory-button::before,
  #view-mine .daily-record-bundle-button {
    transition: none !important;
  }
}

/* A private verse choice that becomes a shared reading trace only after reveal. */
.group-verse-round-surface {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 18px;
  border-color: rgba(74, 91, 76, 0.16);
  background: #fbfcf9;
  box-shadow: 0 12px 34px rgba(39, 51, 41, 0.055);
}

.group-verse-round-header {
  align-items: center;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(74, 91, 76, 0.1);
}

.group-verse-round-header h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-family: "Noto Serif KR", serif;
  font-size: 1.12rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.group-verse-round-header .header-chip {
  width: auto;
  min-width: 64px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 9px;
  border-color: rgba(74, 91, 76, 0.13);
  background: #f0f4ee;
  color: #405344;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.group-verse-round-content,
.group-verse-round-current,
.group-verse-round-revealed {
  min-width: 0;
  display: grid;
  gap: 13px;
}

.group-verse-round-message {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.group-verse-round-message p,
.group-verse-round-empty-copy,
.group-verse-round-waiting {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.62;
  letter-spacing: 0;
}

.group-verse-round-message.is-error {
  justify-content: space-between;
  flex-wrap: wrap;
}

.group-verse-round-message .ghost-button,
.group-verse-round-retry {
  min-height: 44px;
}

.group-verse-round-pulse {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #6e806f;
  box-shadow: 0 0 0 5px rgba(86, 109, 89, 0.1);
}

.group-verse-round-passage,
.group-verse-round-reveal-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.group-verse-round-passage strong,
.group-verse-round-reveal-heading strong {
  color: var(--text);
  font-family: "Noto Serif KR", serif;
  font-size: 1.04rem;
  line-height: 1.48;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.group-verse-round-passage span,
.group-verse-round-reveal-heading span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.group-verse-round-progress {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(74, 91, 76, 0.09);
}

.group-verse-round-progress > span {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #607764;
  transform: scaleX(var(--group-verse-round-progress, 0));
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.group-verse-round-my-choice {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 11px 0;
  border-top: 1px solid rgba(74, 91, 76, 0.09);
  border-bottom: 1px solid rgba(74, 91, 76, 0.09);
}

.group-verse-round-my-choice > span {
  color: #56705d;
  font-size: 0.75rem;
  font-weight: 850;
}

.group-verse-round-my-choice p {
  margin: 0;
  color: var(--text);
  font-family: "Noto Serif KR", serif;
  font-size: 0.94rem;
  line-height: 1.72;
  letter-spacing: 0;
}

.group-verse-round-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.group-verse-round-actions .primary-button,
.group-verse-round-actions .ghost-button {
  min-height: 44px;
  justify-content: center;
  border-radius: 8px;
}

.group-verse-round-waiting {
  width: 100%;
}

.group-verse-round-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(224px, 0.65fr) auto;
  gap: 12px;
  align-items: end;
  padding-top: 15px;
  border-top: 1px solid rgba(74, 91, 76, 0.1);
}

.group-verse-round-passage-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(84px, 0.42fr);
  gap: 8px;
}

.group-verse-round-passage-fields label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.group-verse-round-passage-fields label > span,
.group-verse-round-reveal-options legend {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 820;
  line-height: 1.35;
}

.group-verse-round-passage-fields select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 0.9rem;
}

.group-verse-round-reveal-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.group-verse-round-reveal-options legend {
  margin-bottom: 6px;
}

.group-verse-round-segmented {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(74, 91, 76, 0.12);
  border-radius: 8px;
  background: #f0f2ee;
}

.group-verse-round-segmented button {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #667067;
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.group-verse-round-segmented button[aria-checked="true"] {
  border-color: rgba(74, 91, 76, 0.08);
  background: #ffffff;
  color: #263329;
  box-shadow: 0 1px 5px rgba(39, 51, 41, 0.08);
}

.group-verse-round-segmented button:focus-visible {
  outline: 2px solid rgba(74, 91, 76, 0.42);
  outline-offset: 2px;
}

.group-verse-round-start {
  min-width: 142px;
  min-height: 44px;
  justify-content: center;
  border-radius: 8px;
  white-space: nowrap;
}

.group-verse-round-results {
  display: grid;
  border-top: 1px solid rgba(74, 91, 76, 0.1);
}

.group-verse-round-result {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  gap: 18px;
  align-items: end;
  padding: 14px 0;
  border-bottom: 1px solid rgba(74, 91, 76, 0.1);
}

.group-verse-round-result-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.group-verse-round-result-copy > span {
  padding-top: 4px;
  color: #647167;
  font-size: 0.72rem;
  font-weight: 850;
}

.group-verse-round-result-copy p {
  position: relative;
  z-index: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-family: "Noto Serif KR", serif;
  font-size: 0.94rem;
  line-height: 1.72;
  letter-spacing: 0;
}

.group-verse-round-result-copy p::after,
.group-verse-round-verse.is-community-marked .group-verse-round-read-copy > p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.12em;
  z-index: -1;
  height: 0.38em;
  border-radius: 2px;
  background: #d6b77e;
  opacity: var(--group-underline-opacity, 0.18);
  transform: scaleX(var(--group-underline-strength, 0));
  transform-origin: left center;
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.group-verse-round-result-people {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.group-verse-round-result-people > strong {
  color: #405447;
  font-size: 0.78rem;
}

.group-verse-round-result-people > div,
.group-verse-round-read-people {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px 7px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.group-verse-round-result-people span.is-mine,
.group-verse-round-read-people span.is-mine {
  color: #435d4a;
  font-weight: 850;
}

.group-verse-round-result-people span,
.group-verse-round-read-people span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.group-verse-round-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
}

.group-verse-round-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 24, 20, 0.38);
}

.group-verse-round-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, calc(100vw - 32px));
  max-height: min(86dvh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(44, 57, 47, 0.12);
  border-radius: 8px;
  background: #fcfcf9;
  box-shadow: 0 28px 90px rgba(19, 24, 20, 0.24);
  transform: translate3d(-50%, -50%, 0);
}

.group-verse-round-modal-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(74, 91, 76, 0.1);
}

.group-verse-round-modal-header > div {
  min-width: 0;
}

.group-verse-round-modal-header h2 {
  margin: 1px 0 0;
  color: var(--text);
  font-family: "Noto Serif KR", serif;
  font-size: 1.12rem;
  line-height: 1.42;
  letter-spacing: 0;
}

.group-verse-round-modal-header span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.group-verse-round-modal-header .icon-action {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.group-verse-round-modal-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  padding: 13px 16px 10px;
}

.group-verse-round-modal-status {
  min-height: 20px;
  margin: 0;
  color: #607064;
  font-size: 0.79rem;
  line-height: 1.5;
}

.group-verse-round-modal-status:empty {
  display: none;
}

.group-verse-round-verse-list {
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 91, 76, 0.2) transparent;
}

.group-verse-round-verse {
  position: relative;
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 11px 10px;
  border: 0;
  border-bottom: 1px solid rgba(74, 91, 76, 0.085);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease;
}

.group-verse-round-verse:hover,
.group-verse-round-verse:focus-visible {
  background: #f2f5ef;
  outline: none;
}

.group-verse-round-verse:focus-visible {
  box-shadow: inset 3px 0 #657b69;
}

.group-verse-round-verse.is-selected {
  background: #edf3eb;
  color: #233229;
}

.group-verse-round-verse > span {
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #617066;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.group-verse-round-verse.is-selected > span {
  background: #405749;
  color: #ffffff;
}

.group-verse-round-verse > p,
.group-verse-round-read-copy > p {
  margin: 0;
  color: inherit;
  font-family: "Noto Serif KR", serif;
  font-size: 0.96rem;
  line-height: 1.78;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.group-verse-round-verse.is-read-only {
  cursor: default;
}

.group-verse-round-verse.is-read-only:hover {
  background: transparent;
}

.group-verse-round-read-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.group-verse-round-verse.is-community-marked .group-verse-round-read-copy > p {
  position: relative;
  z-index: 0;
  width: fit-content;
  max-width: 100%;
}

.group-verse-round-read-people {
  justify-content: flex-start;
}

.group-verse-round-read-people strong {
  color: #405447;
}

.group-verse-round-reader-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.84rem;
}

.group-verse-round-modal-body > .bible-text-attribution {
  justify-self: end;
  margin: 0;
}

.group-verse-round-modal-footer {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(74, 91, 76, 0.1);
  background: #fcfcf9;
}

.group-verse-round-modal-footer.is-read-only {
  grid-template-columns: 1fr;
}

.group-verse-round-modal-footer .primary-button,
.group-verse-round-modal-footer .ghost-button {
  min-height: 44px;
  justify-content: center;
  border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .group-verse-round-modal:not(.hidden) .group-verse-round-backdrop {
    animation: group-verse-round-backdrop-in 180ms ease both;
  }

  .group-verse-round-modal:not(.hidden) .group-verse-round-modal-panel {
    animation: group-verse-round-modal-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .group-verse-round-result {
    animation: group-verse-round-result-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes group-verse-round-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes group-verse-round-modal-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, calc(-50% + 10px), 0) scale(0.988);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes group-verse-round-result-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .group-verse-round-create {
    grid-template-columns: minmax(0, 1fr);
  }

  .group-verse-round-start {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #feedPane .group-verse-round-surface {
    gap: 14px;
    padding: 15px 14px;
    border-radius: 8px;
    background: rgba(251, 252, 249, 0.94);
    box-shadow: none;
  }

  .group-verse-round-header {
    padding-bottom: 10px;
  }

  .group-verse-round-header h2 {
    font-size: 1.02rem;
  }

  .group-verse-round-result {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0;
  }

  .group-verse-round-result-people {
    padding-left: 34px;
    justify-items: start;
    text-align: left;
  }

  .group-verse-round-result-people > div {
    justify-content: flex-start;
  }

  .group-verse-round-passage-fields select {
    font-size: 16px;
  }

  .group-verse-round-modal-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: min(78dvh, 680px);
    border-width: 1px 0 0;
    border-radius: 8px 8px 0 0;
    transform: translate3d(0, 0, 0);
  }

  .group-verse-round-modal-header {
    padding: 14px max(14px, env(safe-area-inset-right)) 11px max(14px, env(safe-area-inset-left));
  }

  .group-verse-round-modal-header h2 {
    font-size: 1.04rem;
  }

  .group-verse-round-modal-body {
    padding: 11px max(10px, env(safe-area-inset-right)) 9px max(10px, env(safe-area-inset-left));
  }

  .group-verse-round-verse {
    min-height: 56px;
    padding: 11px 7px;
  }

  .group-verse-round-verse > p,
  .group-verse-round-read-copy > p {
    font-size: 0.94rem;
    line-height: 1.76;
  }

  .group-verse-round-modal-footer {
    padding: 10px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .group-verse-round-modal:not(.hidden) .group-verse-round-modal-panel {
    animation-name: group-verse-round-sheet-in;
  }
}

@keyframes group-verse-round-sheet-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .group-verse-round-progress > span,
  .group-verse-round-result-copy p::after,
  .group-verse-round-verse.is-community-marked .group-verse-round-read-copy > p::after {
    transition: none;
  }
}

/* Promote the native app inside iOS browsers that do not show Safari's Smart App Banner. */
.web-app-promotion {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  padding: 9px 4px 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(54, 87, 68, 0.13);
  border-radius: 8px;
  background: rgba(240, 244, 238, 0.94);
  color: var(--ink);
  animation: web-app-promotion-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.web-app-promotion[hidden],
.web-app-promotion.hidden,
body.native-shell .web-app-promotion {
  display: none !important;
}

.web-app-promotion-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(36, 43, 36, 0.08);
  border-radius: 8px;
  object-fit: cover;
}

.web-app-promotion-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.web-app-promotion-copy strong,
.web-app-promotion-copy span {
  min-width: 0;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.web-app-promotion-copy strong {
  font-size: 0.84rem;
  line-height: 1.3;
  font-weight: 850;
}

.web-app-promotion-copy span {
  color: #687166;
  font-size: 0.72rem;
  line-height: 1.38;
  font-weight: 620;
}

.web-app-promotion-link {
  min-width: 70px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 8px;
  background: #365744;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 820;
  text-decoration: none;
  white-space: nowrap;
}

.web-app-promotion-link:hover,
.web-app-promotion-link:focus-visible {
  background: #294737;
}

.web-app-promotion-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #687166;
  cursor: pointer;
}

.web-app-promotion-close:hover,
.web-app-promotion-close:focus-visible {
  background: rgba(54, 87, 68, 0.08);
  color: #294737;
}

.web-app-promotion-close svg {
  width: 18px;
  height: 18px;
}

@keyframes web-app-promotion-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 360px) {
  .web-app-promotion {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
  }

  .web-app-promotion-icon {
    width: 40px;
    height: 40px;
  }

  .web-app-promotion-link {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    min-height: 44px;
    margin-top: 3px;
  }

  .web-app-promotion-close {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* Safari must anchor this dialog to the visible viewport, not the document scroll offset. */
@media (max-width: 640px) {
  body:not(.native-shell).passage-picker-open .passage-picker-modal {
    position: fixed !important;
    inset: auto 0 !important;
    top: var(--passage-picker-visual-offset, 0px) !important;
    bottom: auto !important;
    height: var(--passage-picker-viewport-height, 100dvh) !important;
    max-height: var(--passage-picker-viewport-height, 100dvh) !important;
  }

  body:not(.native-shell).passage-picker-open .passage-picker-panel,
  body:not(.native-shell).passage-picker-open.passage-picker-context-new .passage-picker-panel {
    top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) !important;
  }

  body:not(.native-shell).passage-picker-open .passage-picker-panel .passage-book-grid {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-app-promotion {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-usage-panel[aria-busy="true"] .admin-usage-refresh svg {
    animation: none !important;
  }

  .admin-usage-bar {
    transition: none !important;
  }
}

/* Track the detail page on the compositor without changing the native WKWebView shell. */
@media (max-width: 640px) {
  #view-detail.active {
    touch-action: pan-y;
  }

  body.is-detail-swipe-active #view-detail.active {
    overflow: visible;
  }

  body.is-detail-swipe-active #view-detail.active .detail-page {
    transform: translate3d(var(--detail-swipe-x, 0px), 0, 0) !important;
    box-shadow: -14px 0 30px rgba(31, 40, 33, 0.12);
    will-change: transform;
  }

  body.is-detail-swipe-dragging #view-detail.active .detail-page {
    transition: none !important;
  }

  body.is-detail-swipe-settling #view-detail.active .detail-page {
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 180ms ease !important;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  body.is-detail-swipe-active #view-detail.active .detail-page {
    box-shadow: none;
    transition: none !important;
  }
}

/* Keep Bible-text attribution quiet, consistent, and adjacent to the quoted text. */
.bible-text-attribution {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 0;
  color: #687166;
  font-family: "SUIT", sans-serif;
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}

.bible-text-attribution::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.38;
}

#view-new .daily-transcription-field > .bible-text-attribution {
  justify-self: end;
}

#view-new .scripture-surface > .bible-text-attribution,
#view-bible .godpeople-surface > .bible-text-attribution {
  margin: -11px 20px 18px;
}

#view-detail .selected-verse-card > .bible-text-attribution {
  margin-top: 12px;
}

.highlight-trace-card > .bible-text-attribution {
  color: #687166;
  font-size: 0.64rem;
}

@media (max-width: 640px) {
  #composerPane.is-writing-open .record-passage-tray .scripture-surface > .bible-text-attribution {
    margin: 3px 2px 0 15px;
    font-size: 0.62rem;
  }

  body.reader-view-active #view-bible .godpeople-surface > .bible-text-attribution {
    order: 5;
    margin: 4px max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  }
}

/* Keep activity with the shared-record flow instead of account management. */
#feedModeBtn,
.notification-tab {
  position: relative;
}

.nav-item[data-view="new"].has-unread .icon-shell {
  position: relative;
}

.nav-item[data-view="new"].has-unread .icon-shell::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -5px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #365744;
  box-sizing: content-box;
  pointer-events: none;
}

#feedModeBtn.has-unread::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(50% + 10px);
  z-index: 2;
  width: 7px;
  height: 7px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #365744;
  box-sizing: content-box;
  pointer-events: none;
}

.notification-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-tab-badge {
  position: absolute;
  top: 5px;
  left: calc(50% + 13px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--panel-soft);
  border-radius: 999px;
  background: #365744;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 850;
  line-height: 13px;
  text-align: center;
  pointer-events: none;
}

.notification-tab.active .notification-tab-badge {
  border-color: var(--panel);
}

.group-notification-surface {
  width: 100%;
  max-width: 680px;
  padding: 18px;
}

.group-notification-surface .notification-panel {
  padding-top: 0;
  border-top: 0;
}

.group-notification-surface .notification-empty {
  min-height: 72px;
  justify-content: flex-start;
  padding: 16px 2px;
}

@media (max-width: 640px) {
  .nav-item[data-view="new"].has-unread .icon-shell::after {
    top: 2px;
    right: 3px;
  }

  #feedModeBtn.has-unread::before {
    top: 4px;
    left: calc(50% + 9px);
  }

  .notification-tab-badge {
    top: 4px;
    left: calc(50% + 11px);
  }

  #feedPane .group-notification-surface {
    max-width: none;
    padding: 4px 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .group-notification-surface .notification-panel-head {
    min-height: 44px;
    padding: 0 0 10px;
  }

  .group-notification-surface .notification-heading-copy strong {
    font-size: 0.94rem;
  }

  .group-notification-surface .notification-heading-copy span {
    font-size: 0.76rem;
  }

  .group-notification-surface .push-permission-row {
    padding-inline: 0;
  }

  .group-notification-surface .notification-empty {
    min-height: 64px;
    padding: 14px 2px;
  }
}

/* Let the mobile navigation leave the canvas without resizing the page chrome. */
@media (max-width: 640px) {
  .sidebar-nav,
  body.reader-view-active .sidebar-nav,
  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav {
    visibility: visible !important;
    transition:
      opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s !important;
    will-change: transform, opacity;
  }

  body.mobile-nav-hidden .sidebar-nav,
  body.mobile-nav-hidden.reader-view-active .sidebar-nav,
  body.native-ios-shell.mobile-nav-hidden .sidebar-nav,
  body.native-ios-shell.mobile-nav-hidden.reader-view-active .sidebar-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%, calc(100% + var(--mobile-nav-bottom) + 24px), 0) !important;
    transition:
      opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 260ms !important;
  }

  body.page-transition-scroll-reset .sidebar-nav,
  body.page-transition-scroll-reset.reader-view-active .sidebar-nav,
  body.native-ios-shell.page-transition-scroll-reset .sidebar-nav,
  body.native-ios-shell.page-transition-scroll-reset.reader-view-active .sidebar-nav {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(-50%, 0, 0) !important;
    transition: none !important;
  }

  body.mobile-nav-hidden:not(.modal-open):not(.mobile-input-active):not(.composer-writing-open) .toast-host {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
  }

  #composerPane.is-writing-open[data-composer-type="reflection"] #reflectionBodyInput,
  #composerPane.is-writing-open[data-composer-type="worship"] #reflectionBodyInput {
    height: clamp(280px, 42dvh, 380px) !important;
    min-height: 280px !important;
    padding: 17px 16px !important;
    border-radius: 16px !important;
    line-height: 1.72 !important;
    resize: none;
    scroll-margin-top: 72px;
    scroll-margin-bottom: 88px;
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  #composerPane.is-writing-open[data-composer-type="reflection"] #reflectionBodyInput,
  #composerPane.is-writing-open[data-composer-type="worship"] #reflectionBodyInput {
    height: 240px !important;
    min-height: 240px !important;
    padding: 15px 14px !important;
    line-height: 1.66 !important;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .sidebar-nav,
  body.reader-view-active .sidebar-nav,
  body.native-ios-shell .sidebar-nav,
  body.native-ios-shell.reader-view-active .sidebar-nav,
  body.mobile-nav-hidden .sidebar-nav,
  body.native-ios-shell.mobile-nav-hidden .sidebar-nav,
  body.page-transition-scroll-reset .sidebar-nav {
    transition: none !important;
  }
}