/* =====================================================================
   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 (#E5E1D8); Dark falls back to the regular border token */
:root{--follow-bg:#fff;--follow-border:#E5E1D8;--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 (Figma 4:290) ---- */
.follow-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;height:39px;padding:8px 18px;
  border:1px solid var(--follow-border);border-radius:var(--radius-full);background:var(--follow-bg);color:var(--text-primary);
  box-shadow:var(--follow-shadow),var(--follow-inner);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)}
/* Lucide plus, 16px, before "Follow" (Figma 4:290: icon + label, gap 4) */
.follow-btn:not(.is-following)::before{content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center/contain no-repeat}
.follow-btn.is-following{gap:8px;padding:8px 16px;background:var(--accent-default);border:0;color:var(--accent-text)}
.follow-btn:is(:active,.is-active){padding:8px 16px;background:var(--surface-background);border:1.5px solid var(--accent-default);color:var(--text-primary);box-shadow:var(--follow-shadow-up),var(--follow-inner)}
.follow-btn.is-following:is(:active,.is-active){background:var(--accent-hover);border:1.5px solid var(--accent-default);color:var(--text-primary)}
.follow-btn:is(:hover,.is-hover):not(.is-active,:active){box-shadow:var(--follow-shadow-up),var(--follow-inner)}
.follow-btn.is-following:is(:hover,.is-hover):not(.is-active,:active){background:var(--accent-default)}
.follow-btn:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-gold)}
.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:12px;height:57px;min-width:96px;padding:8px 16px 8px 12px;
  background:var(--surface-elevated);border:1px solid var(--follow-border);border-radius:100px;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:#D9D1C7;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-background);border-color:var(--accent-default);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 10px 24px;margin:-14px -10px -24px;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:12px;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-color:var(--border-strong);box-shadow:none}
.modal__input::placeholder{color:var(--text-placeholder)}
.modal__error{margin:0;font:var(--text-sm);color:var(--feedback-error)}
.modal__error[hidden]{display:none}
.modal__step[hidden]{display:none}
.modal__step{display:flex;flex-direction:column;gap:16px;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:8px 12px}
.follow-item--topic:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-gold)}
.follow-item--topic.is-active{padding:8px 16px 8px 12px}
.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-gold)}

/* ---- 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:4px 8px;gap:8px}
.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 8px}
.follow-item--compact.is-active{padding:4px 8px}
.follow-item--compact.is-active .follow-btn{height:26px}
.follow-item--compact.is-disabled{opacity:.5}