/* FAMA — app bridge for the fama-ui design. The prototype CSS (shell/ds/posts/…) is
   loaded verbatim; this file only adds what the live app needs on top of it:
   Alpine's x-cloak. RULE: never pair x-show with the `hidden` attribute on these pages —
   ds.css has `[hidden]{display:none!important}`, which beats x-show's inline display, so
   the element would never appear. Use x-cloak for the pre-Alpine hidden state instead. */
[x-cloak]{display:none!important}
.fx-av img{display:block}
.fx-pop form{margin:0}
.dlg::backdrop{background:rgba(20,17,15,.45)}
/* Alpine's <template x-for> takes the list's first-child slot, so ds.css's
   `.rows>li:first-child{border-top:0}` never matches — re-apply it to the first
   rendered row (no divider above the first "Talent to follow" person). */

/* GENERATED from every prototype `:first-child` rule (2026-10-12): Alpine's <template x-for>/<x-if>
   is the real first child, so the prototype's first-row rules (no top divider/padding, lead tile span)
   never match. Each rule below targets the first element rendered AFTER the template instead. */
.brl template:first-child+li{border-top:0;padding-top:0}
.cm>template:first-child+.c{border-top:0}
.links template:first-child+li{border-top:0;padding-top:0}
.links template:first-child+li{padding-top:0}
.look .strip template:first-child+.ph{grid-row:span 2}
.nowlist template:first-child+.nowrow{border-top:var(--border);padding-top:var(--s3)}
.owners .stack template:first-child+i{margin-inline-start:0;background:#E9DDF3}
.picklist template:first-child+li label{border-top:0}
.pmedia.n3 template:first-child+.ph{aspect-ratio:auto}
.pmedia.n3 template:first-child+.ph{grid-row:span 2}
.projpick template:first-child+li label{border-top:0}
.role-b>template:first-child+.f,.role-b>template:first-child+.two .f{margin-top:0}
.role-b>template:first-child+.two{margin-top:0}
.rows>template:first-child+li.row{border-top:0}
.rows>template:first-child+li{border-top:0}
.sheet-recs template:first-child+li{border-top:0;padding-top:0}
.side-xp template:first-child+li{border-top:0;padding-top:0}
.wte template:first-child+li{border-top:0;padding-top:0}
template:first-child+.cr{border-top:0;padding-top:0}
template:first-child+.fx-gl{margin-top:0}
template:first-child+.f{margin-top:0}
template:first-child+.item{border-top:0}
template:first-child+.nowrow{border-top:0;padding-top:0}
template:first-child+.pc{border-top:0}
template:first-child+.rc{border-top:0;padding-top:0}
template:first-child+.row{border-top:0}
template:first-child+.xp-g{border-top:0;padding-top:0}

/* Drop lists: one drawn chevron instead of the browser's (which hugs the edge
   and sits differently per browser) — 16px from the end, centred, RTL-aware. */
select:not([multiple]):not([size]){
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px 16px;background-position:right 16px center;
  padding-inline-end:44px;text-overflow:ellipsis;cursor:pointer
}
[dir=rtl] select:not([multiple]):not([size]){background-position:left 16px center}
select:not([multiple]):not([size]):disabled{cursor:not-allowed;opacity:.6}
.fx-lv select.sel{background-position:right 12px center;padding-inline-end:36px}
[dir=rtl] .fx-lv select.sel{background-position:left 12px center}

/* Profile structure save bar: away while there is nothing to save; slides up
   for unsaved changes and stays a moment after a save. */
.savebar{transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s var(--ease),visibility 0s}
.savebar.off{transform:translateY(calc(100% + 32px));opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s var(--ease),visibility 0s .35s}
.savebar.off .in-bar{pointer-events:none}
@media (prefers-reduced-motion:reduce){.savebar,.savebar.off{transition:none}}

/* Searchable drop list (components/fama/combo) */
.combo{position:relative}
.combo-btn{display:flex;align-items:center;gap:var(--s3);text-align:start;cursor:pointer}
.combo-btn:disabled{cursor:not-allowed;background:var(--cream);border-style:dashed}
.combo-btn:disabled .combo-val,.combo-btn:disabled .combo-ic,.combo-btn:disabled .combo-chev{opacity:.55}
.combo-btn:not(:disabled):hover{border-color:var(--grey)}
.combo-ic{width:18px;height:18px;flex:none;fill:none;stroke:var(--grey);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.combo-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-val.is-empty{color:var(--grey);font-weight:400}
.combo-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.combo.open .combo-chev{transform:rotate(180deg)}
.combo.open .combo-btn{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.combo .flag{width:20px;height:15px;border-radius:2px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(20,17,15,.08)}
.combo-pop{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 6px);background:var(--white);border:var(--border);border-radius:var(--s3);box-shadow:0 12px 32px rgba(20,17,15,.12);padding:var(--s2);display:flex;flex-direction:column;gap:var(--s2)}
.combo-q{width:100%;min-height:40px;border:1px solid var(--line);border-radius:var(--s2);padding:0 var(--s3);font:inherit;font-size:15px;background:var(--cream,#FAF8F3);outline:none}
.combo-q:focus{border-color:var(--ink)}
.combo-list{list-style:none;margin:0;padding:0;max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.combo-list li{display:flex;align-items:center;gap:var(--s3);min-height:40px;padding:0 var(--s3);border-radius:var(--s2);cursor:pointer}
.combo-list li[data-active=true]{background:var(--line)}
.combo-list li[aria-selected=true]{font-weight:600}
.combo-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-tick{width:16px;height:16px;flex:none;fill:none;stroke:var(--purple-dk);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.combo-custom{color:var(--purple-dk);font-weight:600}
.combo-empty{color:var(--grey);cursor:default!important;font-size:var(--t-meta)}

/* Same-page links glide; anchored sections clear the sticky nav. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sec[id],section[id]{scroll-margin-top:110px}

/* Profile structure hero avatar: `.hero.soft .ph{background:…}` (a shorthand,
   higher specificity) reset .ph.has's size, so a real photo rendered at full
   size and showed only its top-left corner. Fill + centre it. */
.hero .ph.has,.hero.soft .ph.has{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent}

.fx-notice{transition:background .4s var(--ease)}

/* Side-bar shell (2026-11-04): shell.css gives the page's first block one gutter below the panel's top via
   `.fx-nav + main`. Some pages wrap <main> in their Alpine root <div> (Profile structure), so mirror the rule
   for a wrapper whose first child is the page's <main>. */
@media (min-width:1101px){
  html.fx-has-side .fx-nav + div > main:first-child{margin-top:calc(var(--fx-gap) + var(--fx-gut))}
}

/* Views chart (Profile structure), 4 Nov 2026: the panel eases open/closed instead of snapping —
   grid-template-rows 0fr→1fr animates to the content's real height — and the bars rise with a
   soft ease-out (profileViews flips `grown`; per-bar delays stagger the sweep). */
.vw-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 420ms cubic-bezier(.22,1,.36,1),opacity 300ms ease}
.vw-more.is-open{grid-template-rows:1fr;opacity:1}
.vw-more-in{min-height:0;overflow:hidden}
.vw-more .vw-sh,.vw-more .vw-plot{transform:translateY(-6px);transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.vw-more.is-open .vw-sh,.vw-more.is-open .vw-plot{transform:none}
.vw-bars button span{transition:height 700ms cubic-bezier(.22,1,.36,1),background var(--fast) var(--ease)}
.vw-bars.is-snap button span{transition:none}
@media (prefers-reduced-motion:reduce){.vw-more,.vw-more .vw-sh,.vw-more .vw-plot,.vw-bars button span{transition:none}}

/* Hover feel, 4 Nov 2026: the prototype's hovers flipped instantly (ds.css .btn had no transition).
   Every control now eases its colours. `:where()` keeps specificity at 0, so any component that
   declares its own transition (switches, chevrons, bars) still wins. Opacity/transform are left out
   of the global list on purpose — GSAP tweens those per frame on the profile/project pages, and a
   CSS transition on the same property makes the tween lag. */
:where(button,a,summary,select,[role=button],[role=tab],.btn,.chip,.fx-link,.vw-link){
  transition:color 220ms cubic-bezier(.22,1,.36,1),background-color 220ms cubic-bezier(.22,1,.36,1),
    border-color 220ms cubic-bezier(.22,1,.36,1),box-shadow 260ms cubic-bezier(.22,1,.36,1),
    text-decoration-color 220ms ease,fill 220ms ease,stroke 220ms ease;
}
/* Buttons get a soft lift on hover and a press on click (springy ease-out, never on disabled). */
.btn{transition:color 220ms cubic-bezier(.22,1,.36,1),background-color 220ms cubic-bezier(.22,1,.36,1),
  border-color 220ms cubic-bezier(.22,1,.36,1),box-shadow 280ms cubic-bezier(.22,1,.36,1),
  transform 280ms cubic-bezier(.34,1.56,.64,1),opacity 220ms ease}
.btn:not(:disabled):not([aria-disabled=true]):not(.btn-text):hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(20,17,15,.35)}
.btn:not(:disabled):not([aria-disabled=true]):active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:90ms}
.btn:not(.btn-2):not(.btn-text):not(.btn-danger):not(:disabled):hover{background:#2b2622;border-color:#2b2622}
.btn .icon{transition:transform 280ms cubic-bezier(.34,1.56,.64,1)}
.btn:not(:disabled):hover .icon{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){
  :where(button,a,summary,select,[role=button],[role=tab],.btn,.chip,.fx-link,.vw-link),.btn,.btn .icon{transition:none}
  .btn:hover,.btn:active,.btn:hover .icon{transform:none}
}