/* ---------- Buttons ---------- */

/* ---------- Section header ---------- */
.section-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24)}
.section-header__title{font:var(--text-headline-section);color:var(--text-primary)}
.section-header__actions{display:flex;gap:var(--space-12)}
.section-header--dark .section-header__title{color:var(--text-primary)}   /* the dark header also carries .theme-dark, so text/primary is the light value (text/inverse turned dark on dark) */

/* ---------- Divider ---------- */
/* Section divider (Figma 264:2284): two 1px border/default lines, 8px apart */
.divider{box-sizing:border-box;height:10px;margin:0;border:0;border-top:1px solid var(--border-default);border-bottom:4px solid var(--border-default);background:transparent}   /* Border (Figma 1986:87072): a 1px and a 4px rule, 8 apart centre to centre */
.divider--section{height:8px;border-bottom:0;background:linear-gradient(var(--border-default),var(--border-default)) bottom/100% 2px no-repeat}  /* Section Divider / 02 (Figma 723:20097): 1px line on top, 2px band at the bottom, 8px tall */

/* ---------- Event card ---------- */


/* ---------- Follow pill ---------- */

/* ---------- Avatar / author ---------- */
.avatar{width:64px;height:64px;border-radius:50%;background:var(--neutral-200)}
.author-profile{display:flex;align-items:center;gap:var(--space-16)}
.author-profile__freq{font:var(--text-metadata-sm);color:var(--text-secondary)}
.author-profile__name{font:var(--text-headline-card)}

/* ---------- Field ---------- */
.field{box-sizing:border-box;display:flex;align-items:center;gap:var(--space-12);height:44px;padding:0 var(--space-4) 0 var(--space-16);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md)}
.field input{flex:1;min-width:0;border:0;background:transparent;font:var(--text-sm);color:var(--text-primary);outline:none}
.field .btn{height:36px;padding:var(--space-8) var(--space-16);border-radius:var(--radius-md);font:var(--text-xs)}
.field input::placeholder{color:var(--text-placeholder)}
.field:hover{border-color:var(--border-strong)}
.field:focus-within{border:2px solid var(--accent-default);padding:0 calc(var(--space-4) - 1px) 0 calc(var(--space-16) - 1px);box-shadow:none}

/* ---------- Issue card ---------- */
.issue-card{width:240px;flex:none;background:var(--neutral-0);border:1px solid var(--border-default);border-radius:var(--radius-md-lg);padding:var(--space-12);display:flex;flex-direction:column;gap:var(--space-8)}
.issue-card__masthead{display:flex;justify-content:space-between;font:var(--text-metadata-sm);letter-spacing:.06em;border-bottom:1px solid var(--text-primary);padding-bottom:var(--space-4)}
.issue-card__image{height:120px;background:var(--neutral-200);border-radius:var(--radius-sm)}
.issue-card__title{font:var(--text-headline-card)}
.issue-card__author{font:var(--text-metadata-sm);color:var(--text-secondary)}
.issue-card__excerpt{font:var(--text-metadata);color:var(--card-text-secondary)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,18,15,.5);z-index:100;padding:var(--space-24)}
.modal.is-open{display:flex}
.modal__panel{background:var(--surface-default);border-radius:var(--radius-lg);padding:var(--space-40);max-width:440px;text-align:center;display:flex;flex-direction:column;gap:var(--space-16);align-items:center;box-shadow:var(--shadow-large-hover)}
.modal__title{font:var(--text-headline-large)}
.modal__text{color:var(--text-secondary)}

/* ---- round 2 fixes ---- */
.section-header__eyebrow{font:var(--text-metadata-sm);color:var(--text-secondary);margin-bottom:var(--space-4)}
.section-header--dark .section-header__eyebrow{color:var(--neutral-300)}
.issue-card__brand{font:var(--text-headline-large);letter-spacing:.02em}
.issue-card__masthead{border-bottom:2px solid var(--text-primary);justify-content:center}
.issue-card__vol{font:var(--text-metadata-sm);color:var(--text-secondary)}


/* Icon button (section-header prev/next, Figma 471:5701) */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--neutral-0);border:1px solid #E5E7EB;border-radius:var(--radius-md);box-shadow:var(--effect-button-default);cursor:pointer;color:var(--text-primary)}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{box-shadow:var(--effect-button-hover)}
.section-header--plain{min-height:0}

/* Empty state (Figma 777:27451) */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-12);width:100%;max-width:392px;margin:0 auto;padding:var(--space-80) 0}
.empty-state[hidden]{display:none}
.empty-state__icon{width:72px;height:72px;box-sizing:border-box;padding:var(--space-10);border-radius:var(--radius-full);background:var(--surface-selected);color:var(--neutral-400);display:flex;align-items:center;justify-content:center}
.empty-state__title{font:var(--text-3xl);text-transform:uppercase;color:var(--text-primary);margin:0}
.empty-state__body{font:var(--text-lg);color:var(--text-secondary);margin:0}
.empty-state .btn{height:48px;padding:var(--space-12) var(--space-18);font-size:var(--fs-sm);line-height:var(--lh-sm)}   /* Figma Empty State 783:9079: Large buttons, gap 12 */

/* Section Header · Device=Mobile (Figma 163:2208, update 2026-10-22 §3): on tablet and phone the CTAs become Text Links
   (text/link, 12/16, no box). CTAs=1: title area left, link bottom-right. CTAs=2: links in a row under the title, 16 apart.
   Title area on phones: eyebrow 12/16 + title 22/26 (tablet keeps the desktop sizes). CTAs=Menu / Navigation are unchanged. */
/* Tablet (Figma 1812:74383): CTAs=2 become Text Links; CTAs=1 keeps its button. Phones (≤600): every CTA is a Text Link. */
@media (max-width:1023px){
  .section-header{flex-wrap:wrap;align-items:center;gap:var(--space-12) var(--space-16)}
  /* CTAs=2 uses the Device=Mobile header on tablet too (Figma 1812:74411): 12/16 eyebrow, 22/26 title, Text Links under it */
  .section-header:has(.section-header__actions .btn + .btn) .section-header__eyebrow{font:var(--text-mobile-xs)}
  .section-header:has(.section-header__actions .btn + .btn) .section-header__title{font:var(--text-mobile-3xl)}
  .section-header>:first-child{flex:1 1 0;min-width:0}
  .section-header__actions{gap:var(--space-16)}
  .section-header:has(.section-header__actions .btn + .btn) .section-header__actions{flex:1 1 100%}
  .section-header__actions:has(.btn + .btn) .btn{height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text-link);font:var(--text-mobile-xs);text-decoration:none}
  .section-header__actions:has(.btn + .btn) .btn:hover{background:none;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
}
@media (max-width:599px){
  .section-header__eyebrow{font:var(--text-mobile-xs)}
  .section-header__title{font:var(--text-mobile-3xl)}
  /* .btn--keep (Prompt 31: the For you header, Figma 1812:76020) keeps the real button on phones; :where() keeps the specificity */
  .section-header__actions .btn:where(:not(.btn--keep)){height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text-link);font:var(--text-mobile-xs);text-decoration:none}
  .section-header__actions .btn:where(:not(.btn--keep)):hover{background:none;color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
  .section-header__actions .btn:where(:not(.btn--keep)):focus-visible{box-shadow:var(--shadow-focus-ring);border-radius:var(--radius-sm)}
  .section-header--dark .section-header__actions .btn:hover{color:var(--text-inverse)}
}
.ds-textlink{color:var(--text-link);font:var(--text-mobile-xs);text-decoration:none}
/* Section Header · Show photo (Figma 163:2208 + Author Avatar > Member photo 130:1549): 56px circle, 1px border/default, 16 gap to
   the title area; initials on surface/selected when the member has no photo; 44px on phones. */
.section-header__group{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:var(--space-16)}
.section-header__photo{flex:none;box-sizing:border-box;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--surface-selected);overflow:hidden}
.section-header__photo img{width:100%;height:100%;object-fit:cover;display:block}
.section-header__initials{font:var(--text-xl);color:var(--text-secondary);text-transform:uppercase}
@media (max-width:599px){.section-header__photo{width:44px;height:44px}.section-header__initials{font:var(--text-lg)}}

/* Section Header Device=Mobile forced (components page / any width): 12/16 eyebrow, 22/26 title, CTAs as Text Links */
.section-header--mobile{flex-wrap:wrap;gap:var(--space-12) var(--space-16)}
.section-header--mobile .section-header__eyebrow{font:var(--text-mobile-xs)}
.section-header--mobile .section-header__title{font:var(--text-mobile-3xl)}
.section-header--mobile .section-header__actions .btn:not(.btn--icon-only){height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text-link);font:var(--text-mobile-xs);text-decoration:none}