/* =====================================================================
   Follow Button (Figma 4:290) + Follow Item chip (Figma 366:3441)
   Button: 4 states — Not following / Following / and each "active".
   Item:   Status (not following | following) × State (default, hover, pressed,
           disabled, active). Figma draws hover/pressed/disabled the same as default.
   ===================================================================== */
/* Figma neutral/300 (var(--button-palette-primary-border-dark)); Dark falls back to the regular border token */
:root{--follow-bg:var(--neutral-0);--follow-border:var(--button-palette-primary-border-dark);--follow-shadow:var(--effect-button-default);--follow-shadow-up:var(--effect-button-hover);--follow-inner:var(--effect-button-inset)}
:root[data-theme="dark"]{--follow-bg:var(--surface-default);--follow-border:var(--border-default)}

/* ---- Follow button: legacy Figma 4:290 is ALIASED to Button Variant=Follow / Following, Size=Small (decision 2026-10-23).
   .follow-btn keeps its class for the scripts (site.js, auth.js, manage-following.js, topic-follow.js) but looks exactly like
   .btn.btn--follow.btn--sm / .btn--following. Follow is text only (no plus). ---- */
.follow-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);flex:none;height:40px;padding:var(--space-8) var(--space-18);
  border:1px solid var(--border-subtle);border-radius:var(--radius-full);background:var(--surface-default);color:var(--text-primary);   /* Figma Follow Button 473:6277: pill, border/subtle, 14/20 (Prompt 28) */
  box-shadow:var(--shadow-button-default);font:var(--text-sm);white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease-out)}
.follow-btn:is(:hover,.is-hover){background:var(--surface-background);border-color:var(--accent-default);box-shadow:inset 0 0 0 .5px var(--accent-default),var(--shadow-button-hover)}
.follow-btn:is(:active,.is-active,.is-pressed){background:var(--button-secondary-bg-pressed);border-color:var(--button-secondary-border-pressed);box-shadow:var(--shadow-button-pressed)}
.follow-btn.is-following{background:var(--accent-default);border-color:var(--accent-default);color:var(--accent-text)}
.follow-btn.is-following:is(:hover,.is-hover,:active,.is-active){background:var(--accent-hover);border-color:var(--accent-default);box-shadow:inset 0 0 0 .5px var(--accent-default),var(--shadow-button-hover)}
.follow-btn:focus-visible{outline:0;box-shadow:var(--shadow-button-focus)}
.follow-btn:is(:disabled,.is-disabled){background:var(--border-subtle);border-color:var(--border-subtle);color:var(--text-secondary);box-shadow:none;cursor:default}
.follow-btn.is-pop{animation:pop .45s var(--ease-out)}

/* ---- Follow item chip (Figma 366:3441) ----
   Default: white pill, neutral-300 border, soft drop shadow + inner highlight.
   Hover lifts the shadow, Pressed drops it, Disabled fades to 50%, Active is the gold fill. */
.follow-item{text-transform:none;letter-spacing:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);height:57px;min-width:96px;padding:var(--space-8) var(--space-16) var(--space-8) var(--space-12);
  background:var(--surface-elevated);border:1px solid var(--follow-border);border-radius:var(--radius-full);box-shadow:var(--follow-shadow),var(--follow-inner);transition:background-color .3s,border-color .3s,box-shadow .3s}
.follow-item:is(:hover,.is-hover){box-shadow:var(--follow-shadow-up),var(--follow-inner)}
.follow-item:is(:active,.is-pressed){box-shadow:var(--follow-inner)}
.follow-item__img{position:relative;width:32px;height:32px;flex:none;border-radius:var(--radius-full);background:var(--image-placeholder);overflow:hidden}
.follow-item__img img{width:100%;height:100%;object-fit:cover;object-position:top;border:1px solid var(--border-default);border-radius:inherit;box-sizing:border-box}
.follow-item__img--sport{background:transparent}
.follow-item__img--sport img{border:0;object-position:center}
.follow-item__label{font:var(--text-base);color:var(--text-primary);white-space:nowrap}
.follow-item.is-active{background:var(--accent-default);border-color:rgba(107,94,77,.28);box-shadow:var(--follow-shadow-up),var(--follow-inner)}
.follow-item.is-active .follow-item__label{color:var(--accent-text)}
.follow-item.is-active .follow-btn{background:var(--surface-default);border-color:var(--border-subtle);box-shadow:var(--follow-shadow-up),var(--follow-inner)}
.follow-item.is-active .follow-btn.is-following{background:var(--accent-hover)}
.follow-item.is-disabled{pointer-events:none;opacity:.5;box-shadow:none}

/* ---- "We cover … Written by …" auto-rotating banner ---- */
.rotator{position:relative;display:inline-block;box-sizing:content-box;height:57px;padding:14px var(--space-10) var(--space-24);margin:-14px -10px calc(-1 * var(--space-24));overflow:hidden;vertical-align:middle;transition:width .55s var(--ease-out)}
.rotator__item{position:absolute;left:10px;top:14px;opacity:0;visibility:hidden;transform:translateY(120%);
  transition:transform .55s var(--ease-out),opacity .35s,visibility 0s .55s}
.rotator__item.is-current{opacity:1;visibility:visible;transform:none;transition:transform .55s var(--ease-out),opacity .35s,visibility 0s}
.rotator__item.is-leaving{opacity:0;visibility:hidden;transform:translateY(-120%)}
.follow-banner__headline{flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.rotator,.rotator__item{transition:none}}

/* ---- Create-account modal ---- */
.modal__form{display:flex;flex-direction:column;gap:var(--space-12);width:100%;text-align:left}
.modal__input{box-sizing:border-box;width:100%;height:44px;padding:0 var(--space-16);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);font:var(--text-sm);color:var(--text-primary);outline:0}
.modal__input:hover{border-color:var(--border-strong)}
.modal__input:focus{border:2px solid var(--accent-default);padding:0 calc(var(--space-16) - 1px)}
.modal__input::placeholder{color:var(--text-placeholder)}
.modal__step[hidden]{display:none}
.modal__step{display:flex;flex-direction:column;gap:var(--space-16);align-items:center;width:100%}
.modal__fine{font:var(--text-xs);color:var(--text-secondary)}
.modal__x{position:absolute;top:16px;right:16px}
.modal__panel{position:relative;width:min(440px,100%)}

/* Topic chip = Follow item without the Follow button; image only when active (Figma 366:3441) */
.follow-item--topic{cursor:pointer;font:inherit;padding:var(--space-8) var(--space-12)}
.follow-item--topic:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}
.follow-item--topic.is-active{padding:var(--space-8) var(--space-16) var(--space-8) var(--space-12)}
.follow-item--topic:not(.is-active) .follow-item__img{display:none}
.follow-item--topic .follow-btn{display:none}
.follow-item--topic.is-active .follow-btn{display:inline-flex}
.follow-item--topic:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}

/* ---- Size=Compact (Figma 366:3441, nodes 571:6253 …): 36px chip, 24px image, 12px label, 26px Follow button ---- */
.follow-item--compact{height:36px;min-width:72px;padding:var(--space-4) var(--space-8);gap:var(--space-8)}
.follow-item--compact .follow-item__img{width:24px;height:24px}
.follow-item--compact .follow-item__label{font:var(--text-xs)}
.follow-item--compact .follow-btn{height:26px;padding:3px var(--space-8)}
.follow-item--compact.is-active{padding:var(--space-4) var(--space-8)}
.follow-item--compact.is-active .follow-btn{height:26px}
.follow-item--compact.is-disabled{opacity:.5}

/* Follow item media (shared: Settings, Feed rail, Manage following): initials circle for teams / series, contained logo for leagues */
.follow-item__img--initials{display:flex;align-items:center;justify-content:center;font:var(--text-xs);color:var(--text-secondary);background:var(--surface-selected)}
.follow-item__img--logo img{object-fit:contain;padding:3px;box-sizing:border-box;background:var(--surface-default)}
.follow-item--compact .follow-item__img--initials{font-size:10px;line-height:1}

/* Follow Item · Show remove (Figma 366:3441, used for active filters on Stories 777:26370): X after the Follow button */
.follow-item__remove{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:calc(-1 * var(--space-4));padding:0;border:0;border-radius:var(--radius-full);background:none;color:currentColor;cursor:pointer}
.follow-item__remove svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.follow-item__remove:hover{background:var(--button-nav-ghost-bg-hover)}
.follow-item__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}