/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
.feed{display:flex;flex-direction:column;gap:var(--space-m);width:100%}.feed__tabs{display:flex;gap:var(--space-3xs);border-block-end:2px solid var(--surface-2);padding-block-end:var(--space-3xs);margin-block-end:var(--space-s)}.feed__tab-btn{padding:var(--space-2xs) var(--space-m);font-size:var(--step--1);font-weight:600;color:var(--muted);background:0 0;border:none;border-bottom:2px solid transparent;margin-bottom:-4px;cursor:pointer;transition:color .12s,border-color .12s}.feed__tab-btn:hover{color:var(--accent-strong)}.feed__tab-btn.is-active{color:var(--accent-strong);border-bottom-color:var(--accent)}.feed__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:54ch;margin-block-end:var(--space-m)}.feed__view[hidden]{display:none!important}.feed__stage{display:flex;flex-direction:column;gap:var(--space-m);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l)}.feed__form-wrapper{max-width:24rem;width:100%;margin:0 auto}.feed__form{display:flex;flex-direction:column;gap:var(--space-s)}.feed__form-group{display:flex;flex-direction:column;gap:var(--space-3xs)}.feed__label{font-size:var(--step--1);font-weight:600;color:var(--ink)}.feed__input{width:100%;padding:var(--space-xs);border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2);color:var(--muted);font-size:var(--step-0);font-weight:500;outline:0}.feed__submit-btn--silent{width:100%;padding:var(--space-xs) var(--space-s);background:var(--accent);color:var(--on-accent);font-size:var(--step-0);font-weight:600;border:none;border-radius:var(--radius-button);text-align:center;cursor:default!important;user-select:none;outline:0;transition:none!important}.feed__submit-btn--silent:active,.feed__submit-btn--silent:focus,.feed__submit-btn--silent:hover{background:var(--accent)!important;color:var(--on-accent)!important;transform:none!important;box-shadow:none!important}.feed__submit-btn--responsive{width:100%;padding:var(--space-xs) var(--space-s);background:var(--accent);color:var(--on-accent);font-size:var(--step-0);font-weight:600;border:none;border-radius:var(--radius-button);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);transition:background-color .15s,transform .1s}.feed__submit-btn--responsive:hover{background:var(--accent-strong)}.feed__submit-btn--responsive:focus-visible{outline:2.5px solid var(--focus);outline-offset:2.5px}.feed__submit-btn--responsive:active{transform:scale(.98)}.feed__submit-btn--responsive:disabled{background:var(--surface-2);color:var(--muted);border:1.5px solid var(--line);cursor:not-allowed;transform:none!important}.feed__spinner{display:inline-block;width:1.1rem;height:1.1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite feed-spin}@keyframes feed-spin{to{transform:rotate(360deg)}}.feed__alert-box{max-width:24rem;width:100%;margin:0 auto;background:var(--status-challenged-bg);border:1.5px solid var(--line);border-radius:var(--radius-m);padding:var(--space-s);display:flex;flex-direction:column;gap:var(--space-3xs)}.feed__alert-box--pulse{animation:.25s ease-out feed-pulse}@keyframes feed-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}.feed__alert-title{font-size:var(--step--1);font-weight:700;color:var(--status-challenged-fg);margin:0;text-transform:uppercase;letter-spacing:.05em}.feed__alert-desc{font-size:var(--step--1);color:var(--status-challenged-fg);line-height:var(--leading-body);margin:0}.feed__alert-desc strong{font-weight:700;font-family:var(--font-display)}.feed__progress-container{display:flex;flex-direction:column;gap:var(--space-3xs);margin-block-start:var(--space-m);width:100%}.feed__progress-bar-bg{height:6px;background:var(--surface-2);border-radius:var(--radius-s);overflow:hidden}.feed__progress-bar{height:100%;width:0;background:var(--accent);border-radius:var(--radius-s)}.feed__progress-bar.is-filling{width:100%;transition:width 2.5s linear}.feed__progress-text{font-size:var(--step--2);color:var(--muted);font-style:italic;font-weight:500}.feed__success-banner{max-width:24rem;width:100%;margin:0 auto;background:var(--status-supported-bg);border:1.5px solid var(--line);border-radius:var(--radius-m);padding:var(--space-s) var(--space-m);display:flex;align-items:start;gap:var(--space-s);animation:.4s cubic-bezier(.16,1,.3,1) forwards feed-slide-down}@keyframes feed-slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.feed__success-icon{display:flex;align-items:center;justify-content:center;color:var(--status-supported-fg);margin-block-start:2px}.feed__success-content{display:flex;flex-direction:column;gap:var(--space-3xs)}.feed__success-title{font-weight:700;font-size:var(--step-0);color:var(--status-supported-fg);margin:0}.feed__success-desc{font-size:var(--step--1);color:var(--status-supported-fg);line-height:var(--leading-body);margin:0;opacity:.9}.feed__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.feed__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.feed__alt[open] summary{margin-block-end:var(--space-s)}