/* =====================================================================
   Settings / "My Storied" (Figma section User Settings 1457:60411; edit-in-place 1465:42080).
   Hero (Account_Hero 1445:319): 64 top / 40 bottom, 120 sides, 80px avatar, gap 24, "MY STORIED" text-xs,
   "Welcome back, <name>" text-5xl. Body: 240px menu + 48px gap + main column (912 at 1440).
   Main: section header (text-3xl + text-lg secondary, gap 8) → 32px → cards 32px apart.
   Card: surface/default, border/default, radius 16; eyebrow text-xs secondary (20 top, 24 left);
   rows 1px border/subtle dividers. Expanded rows (Expandable row): padding 20/24, gap 16, title text-base,
   fields (label text-sm, 6px, Input 44, helper text-xs), Actions row gap 12.
   ===================================================================== */
.settings{background:var(--surface-background)}
.settings__hero{display:flex;align-items:center;gap:var(--space-24);width:min(1200px,100% - 2*var(--space-24));margin-inline:auto;padding:calc(var(--space-64) + 118px) 0 var(--space-40)}
.settings__hero[hidden]{display:none}
.settings__eyebrow{margin:0 0 var(--space-8);font:var(--text-xs);color:var(--text-secondary);text-transform:uppercase}
.settings__hello{margin:0;font:var(--text-5xl);color:var(--text-primary);text-transform:uppercase;overflow-wrap:anywhere}
.settings__body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-48);width:min(1200px,100% - 2*var(--space-24));margin-inline:auto;padding-bottom:var(--space-96)}

/* Avatar */
.avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);overflow:hidden;background:var(--surface-selected);box-sizing:border-box;border:1.5px solid var(--border-default)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--56{width:56px;height:56px}.avatar--80{width:80px;height:80px}.avatar--96{width:96px;height:96px}
.avatar__initials{font:var(--text-xl);color:var(--text-secondary);text-transform:uppercase}
.avatar--80 .avatar__initials{font:var(--text-3xl)}.avatar--96 .avatar__initials{font:var(--text-4xl)}

/* Settings menu (Settings menu item 1443:7) */
.smenu{align-self:start;position:sticky;top:var(--space-24)}
.smenu .tab-item{text-decoration:none;font:var(--text-sm);cursor:pointer}
.smenu button.tab-item{appearance:none}
.smenu__item{box-sizing:border-box;display:flex;align-items:center;height:44px;padding:0 var(--space-16);border:1px solid transparent;border-radius:var(--radius-md);
  font:var(--text-sm);color:var(--text-secondary);text-decoration:none;background:none;cursor:pointer;text-align:left;transition:background-color .2s,color .2s}
.smenu__item:hover{color:var(--text-primary);background:var(--surface-selected)}
.smenu__item.is-active{padding:0 var(--space-24);background:var(--surface-default);border-color:var(--button-secondary-border);color:var(--text-primary);box-shadow:var(--shadow-button-default)}
.smenu__item:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}
.smenu__divider{height:1px;border:0;background:var(--border-subtle);margin:0}

/* Main column */
.smain{min-width:0;display:flex;flex-direction:column;gap:var(--space-32)}
.smain__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-24);flex-wrap:wrap}
.smain__title{margin:0 0 var(--space-8);font:var(--text-3xl);color:var(--text-primary);text-transform:uppercase}
.smain__lead{margin:0;font:var(--text-lg);color:var(--text-secondary)}
.smain__note{margin:0;font:var(--text-sm);color:var(--text-secondary)}

/* Account summary card */
.ssummary{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-20) var(--space-24);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-lg)}
.ssummary__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.ssummary__label{margin:0;font:var(--text-xs);color:var(--text-secondary)}
.ssummary__name{margin:0;font:var(--text-xl);color:var(--text-primary);text-transform:uppercase;overflow-wrap:anywhere}
.ssummary__meta{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-8);font:var(--text-sm);color:var(--text-secondary)}
.ssummary__meta i{font-style:normal}

/* Card + Settings row (1443:8) + Expandable row */
.scard{background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden}
.scard__eyebrow{margin:0;padding:var(--space-20) var(--space-24) 0;font:var(--text-xs);color:var(--text-secondary);text-transform:uppercase}
.srow + .srow{border-top:1px solid var(--border-subtle)}
.srow__head{display:flex;align-items:center;gap:var(--space-24);min-height:80px;box-sizing:border-box;padding:var(--space-20) var(--space-24)}
.srow__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.srow__title{margin:0;font:var(--text-base);color:var(--text-primary)}
.srow__desc{margin:0;font:var(--text-sm);color:var(--text-secondary);overflow-wrap:anywhere}
.srow__btn{flex:none}
.srow__panel{display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-20) var(--space-24)}
.srow__panel[hidden]{display:none}
.srow.is-open .srow__head{display:none}
.srow.is-opening .srow__panel{animation:srow-in .2s var(--ease-out)}
@keyframes srow-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.srow.is-opening .srow__panel{animation:none}}
.srow__ptitle{margin:0;font:var(--text-base);color:var(--text-primary)}
.srow__body{margin:0;font:var(--text-base);color:var(--text-secondary)}
.srow__body--strong{color:var(--text-primary)}
.srow__actions{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:center}
.srow__proto{font:var(--text-xs);color:var(--text-link);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;align-self:flex-start}
.srow__pending{display:flex;align-items:center;gap:var(--space-12);margin:0;font:var(--text-base);color:var(--text-primary)}
.srow__pending .menu-row__tile{color:var(--text-primary)}
.srow__dot{flex:none;width:24px;height:24px;border-radius:var(--radius-full);background:var(--accent-default)}
.srow__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-16)}
.srow__list li{display:flex;align-items:center;gap:var(--space-12);font:var(--text-base);color:var(--text-secondary)}
.srow__list li::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--radius-full);background:var(--text-secondary)}

/* Fields inside panels */
.sfield{gap:var(--space-6)}
.sfield .input__hint:empty{display:none}
.sfield.is-error .input__control{border:1px solid var(--feedback-error)}
.sfield.is-error .input__hint{color:var(--feedback-error)}
.sfield__eye{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:calc(-1 * var(--space-6));padding:0;border:0;background:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm)}
.sfield__eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sfield__eye[aria-pressed=true]{color:var(--text-primary)}
.sfield__eye:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}

/* Photo editor */
.sphoto{display:flex;align-items:center;gap:var(--space-24);flex-wrap:wrap}
.sphoto__controls{display:flex;flex-direction:column;gap:var(--space-12)}
.sphoto__btns{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.sphoto__file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* Connected accounts */
.sproviders{display:flex;flex-direction:column}
.sprovider{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-12) 0}
.sprovider + .sprovider{border-top:1px solid var(--border-subtle)}
.sprovider__logo{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--surface-background);border:1px solid var(--border-subtle)}
.sprovider__logo img{width:20px;height:20px}
.sprovider__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.sprovider__name{margin:0;font:var(--text-base);color:var(--text-primary)}
.sprovider__status{margin:0;font:var(--text-sm);color:var(--text-secondary)}

/* Account deleted (1464:44033) */
.sdeleted{grid-column:1/-1;padding:var(--space-80) var(--space-24)}
.sdeleted .empty-state{max-width:520px}

/* Notifications: switch rows + newsletter status */
.srow__head .switch{margin-right:76px}  /* Figma control slot is 120px wide, switch left-aligned in it */
.snote{display:flex;flex-direction:column;gap:var(--space-8);padding:0 var(--space-24) var(--space-20);margin-top:calc(-1 * var(--space-8))}
.snote[hidden]{display:none}
.snote__status{display:inline-flex;align-items:center;gap:var(--space-8);margin:0;font:var(--text-sm);color:var(--text-primary)}
.snote__status::before{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--accent-default)}
.snote__body{margin:0;font:var(--text-sm);color:var(--text-secondary)}


.follow-item__label a{color:inherit;text-decoration:none}
.follow-item__label a:hover{text-decoration:underline;text-underline-offset:3px}

/* Signed-out guard: hide the page until settings.js confirms the session (redirects otherwise) */
html.js .settings:not(.is-ready){visibility:hidden}

.srow__panel--flat{padding:0}
[data-pw-current]{display:flex;flex-direction:column;gap:var(--space-6)}
[data-pw-current][hidden]{display:none}
.sfield__extra{margin:0}
.sfield__extra a{color:var(--text-secondary)}
.sfield__extra a:hover{color:var(--text-primary)}

/* Every Settings action button is Large (48) with a 16 icon (Prompt 20 / settings-menu-2026-10-25) */
.settings .btn{min-height:48px}
.ssummary .btn{flex:none}

/* ===== Tablet + phone (Prompt 20; tablet 2233:106827…, phone 2234:75699…): one column, the Tab bar runs across the top ===== */
@media (max-width:1023px){
  .settings__body{grid-template-columns:minmax(0,1fr);gap:var(--space-20)}
  .settings .smenu{position:static;width:100%;flex-direction:row}
  .settings .smenu>.tab-item--square{flex:1 1 0;justify-content:center;width:auto}
}
/* Tablet 600–1023: navbar; hero 32 sides (avatar 64, name 48); Tab bar 680 with the tabs sharing the width; rows Inline */
@media (min-width:600px) and (max-width:1023px){
  .settings__hero{width:calc(100% - 2 * var(--space-32));padding:calc(var(--nav-h,120px) + var(--space-24)) 0 var(--space-24);gap:var(--space-16)}
  .settings__hero .avatar--80{width:64px;height:64px}
  .settings__body{width:calc(100% - 2 * var(--space-32));padding-bottom:var(--space-64)}
  .settings__hello{font:var(--text-mobile-8xl)}
}
/* Phone <600 (app view, no tab active): hero 24 / 16 (avatar 56, name 32); Tab bar 358 scrolling sideways with the active tab in
   view; summary card with Sign out below; rows stay Inline as drawn; forms: fields full width, actions stacked full width */
@media (max-width:599px){
  .settings__hero{width:calc(100% - 2 * var(--space-16));padding:var(--space-24) 0 var(--space-20);gap:var(--space-16)}
  .settings__hero .avatar--80{width:56px;height:56px}
  .settings__hello{font:var(--text-mobile-5xl)}
  .settings__body{width:calc(100% - 2 * var(--space-16));padding-bottom:var(--space-32)}
  .settings .smenu{overflow-x:auto;scrollbar-width:none}
  .settings .smenu::-webkit-scrollbar{display:none}
  .settings .smenu>.tab-item--square{flex:none;min-width:108px}
  .smain{gap:var(--space-24)}
  .smain__title{font:var(--text-mobile-4xl)}
  .smain__lead{font:var(--text-mobile-base)}
  .ssummary{flex-wrap:wrap;padding:var(--space-16);gap:var(--space-16)}
  .ssummary__who{flex:1 1 200px}
  .ssummary__name{font:var(--text-mobile-xl)}
  .ssummary__meta{display:block;font:var(--text-mobile-sm)}  /* wraps word by word, as in 2234:75722 */
  .ssummary__meta i{margin:0 var(--space-8)}
  .ssummary .btn{flex:0 0 auto;order:3}
  .ssummary::after{content:"";flex-basis:100%;order:2}
  .scard__eyebrow{padding:var(--space-20) var(--space-16) 0}
  .srow__head{gap:var(--space-12);padding:var(--space-16)}
  .srow__title{font:var(--text-mobile-lg)}
  .srow__desc{font:var(--text-mobile-sm)}
  .srow__head .switch{margin-right:0}
  .srow__panel{padding:var(--space-20) var(--space-24)}
  .srow__actions{flex-direction:column;align-items:stretch}
  .srow__actions .btn{width:100%}
  .sphoto{flex-direction:column;align-items:center}
  .sphoto__controls,.sphoto__btns{width:100%}
  .sphoto__btns{flex-direction:column}
  .sphoto__btns .btn{width:100%}
  .sprovider{flex-wrap:wrap}
}