/* area-stories.css: the STORIES area (/stories, /stories/<slug>). Mock-ups: Main #community, Story.dc.html.
   Every rule is scoped under .page-stories (body class from nav: stories). */

/* Mock-up tints that tokens.css does not have yet (role avatars, comment bubbles). Candidates for tokens.css. */
.page-stories {
  --story-tint-volunteer: #CFE3D6;   /* volunteer tag, nurse avatar */
  --story-tint-memory: #F2DFA7;
  --story-bubble-ai: #F1ECE4;
  --story-bubble-nurse: #F1F8F3;
  --story-bubble-author: #FFF8E1;
  --story-text: #2E2E2E;             /* story body paragraphs */
}

/* Role tints (SPEC §10.1 role tags; mock-up tint map) */
.page-stories .story-tint--survivor, .page-stories .story-comment__avatar.story-tint--survivor { background: var(--brand-yellow); }
.page-stories .story-tint--caregiver, .page-stories .story-comment__avatar.story-tint--caregiver { background: var(--border-strong); }
.page-stories .story-tint--volunteer, .page-stories .story-comment__avatar.story-tint--volunteer { background: var(--story-tint-volunteer); }
.page-stories .story-tint--memory, .page-stories .story-comment__avatar.story-tint--memory { background: var(--story-tint-memory); }
.page-stories .story-tint--living, .page-stories .story-comment__avatar.story-tint--living { background: var(--tint-yellow); }

.page-stories .story-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; color: var(--ink);
}
.page-stories .story-avatar svg { stroke: var(--ink); }
.page-stories .story-avatar--lg { width: 52px; height: 52px; font-size: 20px; }

/* =================================================================
   /stories: list, filters, share form (Main #community)
   ================================================================= */
.page-stories .stories__filters { gap: 8px; }
.page-stories .stories__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.page-stories .story-tile { height: 100%; background: var(--surface); border-radius: var(--radius-card); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.page-stories .story-tile__head { display: flex; align-items: center; gap: 12px; }
.page-stories .story-tile__who { display: flex; flex-direction: column; }
.page-stories .story-tile__name { font-weight: 700; }
.page-stories .story-tile__tag { font-size: 13px; color: var(--text-muted); }
.page-stories .story-tile__title { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; }
.page-stories .story-tile__excerpt { color: var(--text-body); font-size: 15px; }
.page-stories .story-tile__foot { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.page-stories .story-tile__read { font-weight: 700; min-height: var(--target); display: inline-flex; align-items: center; }
.page-stories .story-tile__support,
.page-stories .story-react--support {
  background: var(--tint-pink); color: var(--pink-text); border: 0; border-radius: var(--radius-pill);
  min-height: var(--target); padding: 8px 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.page-stories .story-tile__support[aria-pressed="true"] { background: var(--brand-yellow); color: var(--ink); font-weight: 700; }
.page-stories .story-tile__support[aria-pressed="true"] svg path { fill: currentColor; }

.page-stories .stories__share {
  background: var(--surface); border-radius: var(--radius-card-lg); padding: 32px;
  display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.page-stories .stories__share:focus { outline: none; }
.page-stories .stories__share:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.page-stories .stories__share-title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; }
.page-stories .stories__promise { margin-top: 8px; font-size: 15px; }
.page-stories .stories__promise svg { color: var(--magenta-text); margin-top: 2px; }
.page-stories .stories__form { display: flex; flex-direction: column; gap: 14px; }
.page-stories .stories__form select.input { appearance: auto; }
.page-stories .stories__form .check { padding-top: 6px; }
.page-stories .stories__submit { align-self: flex-start; min-height: 52px; padding: 14px 26px; font-size: 16px; }
@media (max-width: 640px) {
  .page-stories .stories__share { padding: 24px 18px; }
  .page-stories .story-tile { padding: 22px; }
}

/* =================================================================
   /stories/<slug>: story detail (Story.dc.html)
   ================================================================= */
.page-stories .story-page__inner { padding-top: 28px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 28px; }
.page-stories .story-back { align-self: flex-start; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); }
.page-stories .story-layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.page-stories .story-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.page-stories .story-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.page-stories .story { display: flex; flex-direction: column; gap: 22px; }
.page-stories .story__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.page-stories .story__tag { color: var(--ink); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: var(--radius-pill); }
.page-stories .story__topic { background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); }
.page-stories .story__topic:empty { display: none; }
.page-stories .story__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: .01em; overflow-wrap: anywhere; }
.page-stories .story__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.page-stories .story__byline-text { display: flex; flex-direction: column; line-height: 1.35; }
.page-stories .story__author { font-weight: 700; }
.page-stories .story__meta { font-size: 14px; color: var(--text-muted); }
.page-stories .story__photo { margin: 0; border-radius: var(--radius-card-lg); overflow: hidden; background: var(--dark-2); }
.page-stories .story__photo-img { width: 100%; height: 380px; object-fit: cover; }
@media (max-width: 640px) { .page-stories .story__photo-img { height: 240px; } }
.page-stories .story__body { display: flex; flex-direction: column; gap: 22px; white-space: pre-line; }
.page-stories .story__body p { white-space: normal; }
.page-stories .story__body, .page-stories .story__body p { font-size: 18px; line-height: 1.75; color: var(--story-text); }
.page-stories .story__quote { margin: 8px 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--magenta-deep); }
.page-stories .story__quote::before { content: "\201C"; }
.page-stories .story__quote::after { content: "\201D"; }

.page-stories .story__reactions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; }
.page-stories .story-react {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); padding: 9px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.page-stories .story-react:hover { color: var(--magenta-deep); }
.page-stories .story-react--support { padding: 10px 18px; font-weight: 700; gap: 8px; }
.page-stories .story-react--support:hover { color: var(--pink-text); }
.page-stories .story-react--support[aria-pressed="true"] { background: var(--brand-yellow); color: var(--ink); }
.page-stories .story-react__on { display: none; }
.page-stories .story-react--support[aria-pressed="true"] .story-react__on { display: block; }
.page-stories .story-react--support[aria-pressed="true"] .story-react__off { display: none; }

/* Conversation */
.page-stories .story-conv { display: flex; flex-direction: column; gap: 18px; }
.page-stories .story-conv__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.page-stories .story-conv__title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; }
.page-stories .story-conv__note { font-size: 13px; color: var(--text-muted); }
.page-stories .story-composer { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.page-stories .story-composer__label { font-weight: 600; font-size: 14px; }
.page-stories .story-composer__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-stories .story-composer__hint { font-size: 13px; color: var(--text-muted); }

.page-stories .story-sysline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); background: var(--story-bubble-ai); border-radius: var(--radius-input); padding: 10px 14px; }
.page-stories .story-sysline svg { flex: none; }
.page-stories .story-thread, .page-stories .story-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.page-stories .story-thread { gap: 18px; }
.page-stories .story-replies { gap: 12px; border-left: 2px solid var(--border); padding-left: 14px; }

.page-stories .story-comment { display: flex; gap: 12px; }
.page-stories .story-comment--reply { gap: 10px; }
.page-stories .story-comment__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
  background: var(--tint-yellow); color: var(--magenta-deep);
}
.page-stories .story-comment--reply .story-comment__avatar { width: 34px; height: 34px; font-size: 13px; }
.page-stories .story-comment__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.page-stories .story-comment--reply .story-comment__col { gap: 6px; }
.page-stories .story-comment__bubble {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px 18px 18px 18px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.page-stories .story-comment--reply .story-comment__bubble { border-radius: 4px 16px 16px 16px; padding: 12px 14px; }
.page-stories .story-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-stories .story-comment__name { font-weight: 700; }
.page-stories .story-comment--reply .story-comment__name { font-size: 15px; }
.page-stories .story-comment__meta { font-size: 13px; color: var(--text-muted); }
.page-stories .story-comment--reply .story-comment__meta { font-size: 12px; }
.page-stories .story-comment__text { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.page-stories .story-comment__actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.page-stories .story-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); padding: 5px 12px;
  background: var(--surface); border: 1.5px solid var(--border-dashed); border-radius: var(--radius-pill);
  color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none;
}
.page-stories .story-chip:hover { border-color: var(--ink); color: var(--ink); }
.page-stories .story-comment__status { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--success); display: flex; align-items: center; gap: 6px; }
.page-stories .story-comment__status svg { flex: none; }
.page-stories .story-comment__status--pending { color: var(--warning); }
.page-stories .story-comment__tools { display: flex; gap: 4px; align-items: center; }
.page-stories .story-comment__like, .page-stories .story-comment__reply {
  background: none; border: 0; min-height: var(--target); min-width: var(--target); padding: 0 10px;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-pill);
}
.page-stories .story-comment__like { color: var(--text-muted); font-weight: 600; }
.page-stories .story-comment__like svg:nth-of-type(2) { display: none; }
.page-stories .story-comment__like[aria-pressed="true"] { color: var(--danger); font-weight: 700; }
.page-stories .story-comment__like[aria-pressed="true"] svg:nth-of-type(1) { display: none; }
.page-stories .story-comment__like[aria-pressed="true"] svg:nth-of-type(2) { display: block; }
.page-stories .story-comment__reply { color: var(--ink); font-weight: 700; }
.page-stories .story-comment__like:hover, .page-stories .story-comment__reply:hover { background: var(--story-bubble-ai); }

/* Bubble and avatar per kind (mock-up look()) */
.page-stories .story-comment--ai > .story-comment__avatar { background: var(--ink); color: var(--brand-yellow); }
.page-stories .story-comment--ai > .story-comment__col > .story-comment__bubble { background: var(--story-bubble-ai); border-color: var(--border-strong); }
.page-stories .story-comment--nurse > .story-comment__avatar { background: var(--story-tint-volunteer); color: var(--success); }
.page-stories .story-comment--nurse > .story-comment__col > .story-comment__bubble { background: var(--story-bubble-nurse); border-color: var(--story-tint-volunteer); }
.page-stories .story-comment--author > .story-comment__avatar { color: var(--ink); }
.page-stories .story-comment--author > .story-comment__col > .story-comment__bubble { background: var(--story-bubble-author); border-color: var(--brand-yellow); }
.page-stories .story-comment--you > .story-comment__avatar { background: var(--ink); color: var(--on-dark); }
.page-stories .story-comment--you > .story-comment__col > .story-comment__bubble { border-style: dashed; border-color: var(--border-dashed); }

.page-stories .story-reply-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding-left: 16px; }
.page-stories .story-reply-form__input { flex: 1 1 200px; min-width: 0; width: auto; min-height: var(--target); border-radius: var(--radius-pill); padding: 10px 16px; }
.page-stories .story-reply-form__cancel { color: var(--text-muted); text-decoration: none; padding: 0 8px; }
.page-stories .story-reply-form__error { flex-basis: 100%; }

/* Sidebar */
.page-stories .story-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.page-stories .story-card__who { display: flex; align-items: center; gap: 12px; line-height: 1.35; }
.page-stories .story-card__name { font-weight: 700; }
.page-stories .story-card__meta { font-size: 13px; color: var(--text-muted); }
.page-stories .story-card__bio { font-size: 15px; color: var(--text-body); }
.page-stories .story-card__bio:empty { display: none; }
.page-stories .story-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.page-stories .story-stats > div { background: var(--tint-cream); border-radius: var(--radius-input); padding: 10px 4px; display: flex; flex-direction: column-reverse; }
.page-stories .story-stats dd { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.4; }
.page-stories .story-stats dt { font-size: 12px; color: var(--text-muted); }
.page-stories .story-side__title { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; }

.page-stories .story-ask { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.page-stories .story-ask__head { padding: 18px 20px 10px; display: flex; align-items: center; gap: 12px; }
.page-stories .story-ask__icon { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-yellow); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.page-stories .story-ask__title { font-family: var(--font-body); font-size: 16px; font-weight: 700; }
.page-stories .story-ask__sub { font-size: 12px; color: var(--on-dark-muted); }
.page-stories .story-ask__log { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.page-stories .story-ask__msg { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.page-stories .story-ask__msg p { border-radius: 4px 14px 14px 14px; padding: 10px 12px; background: var(--dark-2); }
.page-stories .story-ask__msg--bot { align-self: flex-start; max-width: 92%; }
.page-stories .story-ask__msg--user { align-self: flex-end; max-width: 85%; }
.page-stories .story-ask__msg--user p { background: var(--surface); color: var(--ink); border-radius: 14px 4px 14px 14px; }
.page-stories .story-ask__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.page-stories .story-ask__action {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 4px 14px;
  background: var(--brand-yellow); color: var(--ink); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.page-stories .story-ask__action:hover { color: var(--ink); filter: brightness(.96); }
.page-stories .story-ask__quick { padding: 8px 16px 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.page-stories .story-ask__chip {
  background: transparent; border: 1.5px solid var(--outline-on-dark); color: var(--on-dark);
  border-radius: var(--radius-pill); padding: 6px 14px; min-height: var(--target); font-size: 13px; font-weight: 600; text-align: left;
}
.page-stories .story-ask__chip:hover { border-color: var(--brand-yellow); }
.page-stories .story-ask :focus-visible { outline-color: var(--brand-yellow); }

.page-stories .story-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.page-stories .story-activity__item { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
.page-stories .story-activity__icon { width: 32px; height: 32px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--ink); background: var(--border); }
.page-stories .story-activity__icon--ai { background: var(--brand-yellow); }
.page-stories .story-activity__icon--nurse { background: var(--story-tint-volunteer); }
.page-stories .story-activity__icon--reminder { background: var(--tint-yellow); }
.page-stories .story-activity__icon--gift { background: var(--tint-pink); }
.page-stories .story-activity__text { font-size: 14px; }
.page-stories .story-activity__when { margin-top: 2px; font-size: 12px; color: var(--text-muted); }

.page-stories .story-act { background: var(--tint-pink); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; }

.page-stories .stories__empty-link { min-height: var(--target); display: inline-flex; align-items: center; }