/* Library > Offers and Settings tabs (account.js). Built from the approved mock design/proposals/marketplace/account-dark.
   Dark and flat; every class starts with ac- so it never touches the Library's own rows. */

/* Settings layout: Sell banner across the top, then two columns: You + Release profile on the left, Email + Sign-in on the right.
   One column on phones, in a set order (the columns dissolve and each card takes its --a slot). */
.ac-grid{display:grid;gap:var(--gap-card);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a b";align-items:start}
.ac-grid.studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"sell sec"}
.ac-side{display:grid;gap:var(--gap-card);min-width:0;align-content:start}
.ac-side.a{grid-area:a}.ac-side.b{grid-area:b}
.ac-grid.studio .ac-card{grid-area:var(--a)}
@media(max-width:959px){
  .ac-grid,.ac-grid.studio{grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "rel" "sell" "em" "sec"}
  .ac-grid.studio{grid-template-areas:"sell" "sec"}
  .ac-side{display:contents}
  .ac-card{grid-area:var(--a)}
}
.ac-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px clamp(16px,2.4vw,24px) 8px;min-width:0;container-type:inline-size}
.ac-card>.bd{padding-bottom:12px}
.ac-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.ac-ch h2{font-size:19px;letter-spacing:-.025em;font-weight:700;line-height:1.25}
.ac-hint{font-size:14px;color:var(--muted);margin-top:4px}
.ac-opt{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;border:1px solid var(--line-strong);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}

/* small outline button at 44px */
.ac-qa{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.ac-qa:hover{border-color:var(--ink)}
.ac-qa:disabled{opacity:.6;cursor:default}
.ac-qa.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.ac-qa.danger{color:var(--err);border-color:#5a2a28}.ac-qa.danger:hover{border-color:var(--err)}

/* settings rows: label above value, the action stays on the right */
.ac-srow{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.ac-srow:first-child{border-top:0}
.ac-srow>.grow{flex:1 1 auto;min-width:0}
.ac-srow>:last-child:not(.grow){flex:none;white-space:nowrap}
.ac-k{display:block;font-size:12.5px;color:var(--muted)}
.ac-v{display:block;font-size:15.5px;font-weight:600;min-width:0}
.ac-s{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.ac-gmark{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink);display:inline-grid;place-items:center;font-size:11px;font-weight:700;margin-right:8px;vertical-align:-3px;flex:none}
.ac-vline{display:flex;align-items:center;min-width:0}
.ac-one{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* who you are */
.ac-who{display:flex;align-items:center;gap:14px;padding-bottom:16px;min-width:0}
.ac-av{width:64px;height:64px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-weight:700;font-size:22px;letter-spacing:-.02em;flex:none}
.ac-nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ac-nm b{font-size:21px;letter-spacing:-.03em;line-height:1.2;overflow-wrap:anywhere}
.ac-em{display:block;font-size:14px;color:var(--muted);margin-top:2px}
@media(max-width:560px){.ac-nm b{font-size:19px}.ac-av{width:56px;height:56px;font-size:19px}}

/* inline forms */
.ac-fgrp{display:grid;gap:6px;min-width:0}
.ac-fgrp label{font-size:13.5px;font-weight:600}
.ac-fgrp .input{height:48px;font-size:16px}
.ac-fgrp .input[aria-invalid=true]{border-color:var(--err)}
.ac-ferr{font-size:13px;color:var(--err)}
.ac-pair{display:flex;gap:10px}
.ac-pair>*{flex:1 1 0;min-width:0}
.ac-eform{display:grid;gap:12px;padding:12px 0 16px;border-top:1px solid var(--line)}
.ac-eform:first-child{border-top:0}
.ac-lgrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@container (min-width:420px){.ac-lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-lgrid .full{grid-column:1/-1}}
.ac-lstat{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.ac-rsave{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.ac-note{font-size:13px;color:var(--muted)}

/* Sell on BeatBed: a small, quiet box (not a banner) under the Release profile */
.ac-sell{background:transparent;border-color:var(--line);padding:14px 14px 4px}
.ac-sell>.bd{padding-bottom:10px}
.ac-sell .top{display:flex;align-items:center;gap:10px}
.ac-sico{width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.ac-sico svg.i{width:17px;height:17px}
.ac-sell h2{font-size:15px;letter-spacing:-.02em;line-height:1.2}
.ac-sell .sm{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.ac-sell p.what{font-size:13.5px;color:var(--muted);margin:8px 0 12px}
.ac-sell .go .btn{width:100%;min-height:44px;padding:0 12px}
.ac-sell .ac-pair .btn{padding:0 8px}

/* offers (Library tab): flat rows like Purchased */
.ac-orow{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 12px 10px 10px;border-top:1px solid var(--line);position:relative}
.ac-orow:first-child{border-top:0}
.ac-orow:hover{background:var(--surface-2)}
.ac-cov{width:52px;height:52px;border-radius:12px;background:var(--surface-3);overflow:hidden;display:grid;place-items:center;color:var(--muted)}
.ac-cov img{width:100%;height:100%;object-fit:cover;display:block}
.ac-orow h3{font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.ac-orow h3 a{text-decoration:none}
.ac-orow h3 a::after{content:"";position:absolute;inset:0}   /* the whole row opens the beat; buttons stay on top */
.ac-orow .l2{font-size:13px;color:var(--muted);margin-top:2px}
.ac-orow .stt{font-size:13.5px;margin-top:2px;display:block}
.ac-orow .acts2{position:relative;z-index:1;display:flex;flex-direction:column;gap:0;align-items:flex-end}
.ac-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--muted)}
.ac-dot.counter{background:var(--accent-text)}.ac-dot.ok{background:var(--ok)}
.ac-tl{display:block;background:none;border:0;padding:0 2px;margin:-2px 0 -8px;min-height:44px;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;position:relative;z-index:1}
.ac-terms{grid-column:1/-1;margin:0 0 2px 66px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13.5px;color:var(--muted);white-space:pre-wrap;position:relative;z-index:1}
.ac-terms[hidden]{display:none}
.ac-msg{font-size:13.5px;color:var(--err);margin-top:10px}
@media(max-width:560px){
  .ac-orow{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding-left:4px;padding-right:4px}
  .ac-cov{width:48px;height:48px}
  .ac-terms{margin-left:0}
}
.ac-empty{padding:2px 0 16px}
.ac-empty p{color:var(--muted);font-size:14.5px;max-width:520px}
.ac-empty .btn{margin-top:12px}

/* email */
.ac-pref{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer;color:var(--ink);font-size:15px;min-width:0}
.ac-pref:first-child{border-top:0}
.ac-pref.fix{cursor:default}
.ac-pref .grow{flex:1 1 auto;min-width:0}
.ac-pref b{display:block;font-weight:600;font-size:15px}
.ac-pref .ac-s{font-size:13px}
.ac-pref .ac-s a{color:var(--ink)}
.ac-alw{flex:none;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* tab row: five tabs, so it scrolls sideways inside itself on narrow phones (the selected tab is brought into view) */

/* phones and tablets: the optional Release profile folds away until asked for (it is the longest card) */
.ac-fold{display:none}
@media(max-width:959px){
  .ac-foldable .ac-fold{display:inline-flex}
  .ac-foldable .ac-opt{display:none}
  .ac-foldable:not(.open) .bd{display:none}
  .ac-foldable:not(.open) .ac-ch{margin-bottom:12px}
  .ac-foldable.open .ac-fold{display:none}
}

/* tab numbers: Offers is an accent badge so it stays visible on phones */

/* tabs of different lengths must not make the header jump sideways when a scrollbar appears or goes away */
html{scrollbar-gutter:stable}

/* the My BeatBed tab row: ONE definition for every page, so every tab and number sits in exactly the same place everywhere */
.ltabs{display:flex;gap:4px;margin-top:var(--gap-card);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ltabs::-webkit-scrollbar{display:none}
.ltabs>a,.ltabs>button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-bottom:2px solid transparent;margin:0 0 -1px;background:none;color:var(--muted);font:inherit;font-weight:600;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.ltabs>a:hover,.ltabs>button:hover{color:var(--ink)}
.ltabs>a[aria-current=page],.ltabs>button[aria-selected=true]{color:var(--ink);border-color:var(--ink)}
.ltabs small{margin:0;font-size:12.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.ltabs .nb{min-width:20px;height:20px;padding:0 6px;margin:0;border-radius:99px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;line-height:1;display:inline-grid;place-items:center}
.ltabs .nb[hidden],.ltabs .nb:empty{display:none}
@media(max-width:560px){.ltabs{gap:0}.ltabs>a,.ltabs>button{padding:0 11px}}
@media(max-width:360px){.ltabs>a,.ltabs>button{padding:0 8px;font-size:14px}}

/* a studio owner: the studio box comes first (it is what they come for); phones keep that order */
.ac-grid.dual .ac-side.a .ac-sell{margin-bottom:0}
@media(max-width:959px){.ac-grid.dual{grid-template-areas:"sell" "who" "rel" "em" "sec"}}

/* ---- Settings = one artist-profile card (form + live preview) and one account card (same design as the approved mock account-dark) ---- */
.ac-j{display:grid;gap:var(--gap-card)}
.ac-pwrap{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@container (min-width:760px){.ac-pwrap{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:32px}}
.ac-gh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:22px 0 10px}
.ac-gh:first-child{margin-top:0}
.ac-fgrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@container (min-width:420px){.ac-fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-fgrid .full{grid-column:1/-1}}
.ac-ta{height:auto;min-height:84px;padding:12px 15px;resize:vertical;line-height:1.4;font-family:inherit}
.ac-rrow{position:relative;margin-bottom:14px;padding-right:48px}
.ac-rx{position:absolute;right:-4px;top:28px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ac-rx:hover{background:var(--surface-3);color:var(--ink)}
.ac-rx svg.i{width:16px;height:16px}
.ac-fold2{margin-top:22px;border-top:1px solid var(--line)}
.ac-fold2 summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;cursor:pointer;list-style:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.ac-fold2 summary::-webkit-details-marker{display:none}
.ac-fold2 summary small{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:500}
.ac-fold2 summary::after{content:"";width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 4px 0 8px;flex:none}
.ac-fold2[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.ac-pside{align-self:start;min-width:0}
@container (min-width:760px){.ac-pside{position:sticky;top:96px}}
.ac-ppv{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.ac-pvd summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;margin:-8px 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.ac-pvd summary::-webkit-details-marker{display:none}
.ac-pvd summary::after{content:"";width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 4px 0 8px;flex:none}
.ac-pvd[open] summary::after{transform:rotate(-135deg);margin-top:4px}
@media(min-width:960px){.ac-pvd summary{pointer-events:none}.ac-pvd summary::after{display:none}}
.ac-pwho{display:flex;align-items:center;gap:12px;min-width:0}
.ac-pwho .ac-av{width:52px;height:52px;font-size:18px}
.ac-pwho b{display:block;font-size:17px;letter-spacing:-.02em;overflow-wrap:anywhere}
.ac-pwho small{display:block;font-size:12.5px;color:var(--muted)}
.ac-pbio{font-size:14px;margin-top:12px;overflow-wrap:anywhere}
.ac-rtile{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);min-width:0}
.ac-rtile .cv{width:52px;height:52px;border-radius:10px;background:var(--surface-3);display:grid;place-items:center;color:var(--ink);flex:none}
.ac-rtile .cv svg.i{width:20px;height:20px}
.ac-rtile b{display:block;font-size:15px}
.ac-rtile small{display:block;font-size:13px;color:var(--muted)}
.ac-rtile.empty{border-style:dashed;color:var(--muted);font-size:14px;padding:16px}
.ac-rmini{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 4px 0;font-size:14px}
.ac-rmini svg.i{width:14px;height:14px;color:var(--muted)}
.ac-rmini small{font-size:12.5px;color:var(--muted)}
.ac-plinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ac-plinks span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line-strong);font-size:13px;font-weight:600}
.ac-sellbox{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:transparent}
.ac-agrid{display:grid;gap:0 40px;grid-template-columns:minmax(0,1fr)}
@container (min-width:720px){.ac-agrid{grid-template-columns:repeat(2,minmax(0,1fr))}}