/* Account page (2026-10-05). A plain title, a profile strip, a getting-started
   checklist, then two columns of soft panels. Shared pieces ("mp-") come from
   member-pages.css; this file is only what Account needs on top.
   Loaded after workspace.css, so it also quiets the older account rules there. */

#acct{max-width:none}
/* Members get a tall reserved area so the cards never push the help section in view; signed-out visitors get the short panel. */
#acct.is-member{min-height:820px}
#acct:not(.is-member) .acct-skel-grid{display:none}
#acct:not(.is-member) .acct-skel-hello{max-width:680px;min-height:236px}
#acct .btn{border-radius:var(--r-pill);font-weight:650}
#acct .btn:hover{transform:none;box-shadow:var(--glow)}
#acct .btn.ghost{background:var(--pane);color:var(--ink)}
#acct .btn.ghost:hover{background:var(--violet-soft);border-color:color-mix(in srgb,var(--violet) 45%,var(--rule));color:var(--violet)}
#acct .btn.acct-danger{color:var(--strike);border-color:color-mix(in srgb,var(--strike) 45%,var(--rule))}
#acct .btn.acct-danger:hover{background:color-mix(in srgb,var(--strike) 9%,var(--pane));border-color:var(--strike);color:var(--strike);box-shadow:0 0 0 4px color-mix(in srgb,var(--strike) 14%,transparent)}
/* Icons on the buttons account.js rewrites by text: drawn in CSS so a click always lands on the button itself. */
#signout::before,#forget::before,#forget-scan::before,.billing-card [data-billing-portal]::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
#signout{--i:url("/icons/phosphor/sign-out.svg")}
#forget,#forget-scan{--i:url("/icons/phosphor/trash.svg")}
.billing-card [data-billing-portal]{--i:url("/icons/phosphor/credit-card.svg")}

/* Profile strip */
.acct-bar.acct-hello{margin:0 0 16px;padding:16px 20px;border-radius:var(--r-lg);box-shadow:var(--elev-1)}
.acct-hello .acct-id{flex-wrap:nowrap;gap:14px;padding:0;margin:0;border:0}
.acct-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--violet-fill),var(--strike));color:#fff;font-size:18px;font-weight:700}
.acct-who{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.acct-hi{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0}
.acct-hello .acct-em{margin:0;font-size:17px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.acct-hello #signout{flex:none;white-space:nowrap}
#account-tiktok-profile{min-height:90px;margin-top:14px;padding-top:6px;border-top:1px solid var(--rule)}

/* Getting started */
.acct-start{margin:0 0 16px}
.acct-start-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px}
.acct-start-head h2{margin:0;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.015em;text-transform:none;border:0;padding:0}.acct-start-head h2::before{display:none}
.acct-start-head p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.acct-start-count{flex:none;padding:5px 12px;border-radius:var(--r-pill);background:var(--violet-soft);color:var(--violet);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-start-head>div{flex:1;min-width:0}
.acct-start-hide{flex:none;min-height:32px;padding:0 4px;border:0;background:none;font:650 13px/1.2 var(--sans);color:var(--ink-3);cursor:pointer}
.acct-start-hide:hover{color:var(--violet)}
.acct-start-hidden{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.acct-start-hidden .mp-link{padding:0;border:0;background:none;font:inherit;font-weight:650;cursor:pointer;text-decoration:underline}
.acct-start-bar{height:6px;margin:16px 0 4px;border-radius:var(--r-pill);background:var(--pane-2);overflow:hidden}
.acct-start-bar span{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--confirm),var(--blue) 55%,var(--violet))}
.acct-steps{list-style:none;margin:0;padding:0}
.acct-step{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px 14px;min-height:56px;padding:10px 0;border-top:1px solid var(--rule)}
.acct-step:first-child{border-top:0}
.acct-step-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.acct-step-text strong{font-size:15px;font-weight:650;line-height:1.3;color:var(--ink)}
.acct-step.is-done .acct-step-text strong{color:var(--ink-2);font-weight:600}
.acct-step-text span{max-width:64ch;font-size:14px;line-height:1.5;color:var(--ink-2)}
.acct-step-text .acct-step-alt{font-size:13px}
.acct-step-alt .mp-link{display:inline-flex;align-items:center;min-height:40px}
.acct-step-status{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.acct-step-status.is-done{color:var(--confirm)}
.acct-step-status svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.acct-step.is-next{padding-block:14px;align-items:start}.acct-step.is-next>.mp-btn{align-self:center}
.acct-step.is-optional{border-top-style:dashed}.acct-step-optional{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:650;white-space:nowrap}

/* Your pages: link rows in columns, under the cards. */
#account-links{margin-top:16px}
#account-links .mp-rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 28px}

/* Two columns of cards */
.acct-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.acct-col{display:grid;gap:16px;min-width:0}
.acct-card .mp-head h2{font-size:18px}

/* Access: drawn by account-billing.js */
#billing-slot:empty{display:none}
#account-access:has(#billing-slot:empty){display:none}
.billing-card{display:block;box-sizing:border-box;min-height:136px;margin:0;padding:22px 24px;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:radial-gradient(120% 150% at 100% 0,color-mix(in srgb,var(--confirm) 9%,transparent),transparent 58%),var(--pane);box-shadow:var(--elev-1)}
.billing-card .mp-head{margin-bottom:10px}
.billing-card h2{margin:0;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.015em;text-transform:none;border:0;padding:0}.billing-card h2::before{display:none}
.billing-card p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.billing-card p a{color:var(--violet);font-weight:650;text-underline-offset:3px;white-space:nowrap}
.billing-card .billing-kicker{margin:0;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.billing-card .billing-note{margin-top:8px}
.billing-card .mp-ico svg path:last-child{stroke-width:2}
.billing-card [data-billing-portal]{margin-top:14px;min-height:40px!important;padding:8px 16px!important;font-size:13px!important;color:var(--ink-2)!important}
.billing-loading{display:flex;flex-direction:column;gap:12px;background:var(--pane)}

/* Your Trybe data and Discord share one "facts" list: a check mark for what is
   done, an open ring for what is not, a title and one quiet line. */
.acct-facts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.acct-facts li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.acct-facts li>svg,.acct-facts li>i{box-sizing:border-box;width:22px;height:22px;border-radius:50%}
.acct-facts li>svg{padding:4px;background:color-mix(in srgb,var(--confirm) 14%,var(--pane));color:var(--confirm);fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.acct-facts li>i{border:1.5px dashed color-mix(in srgb,var(--ink-3) 70%,var(--rule))}
.acct-facts strong{display:block;font-size:15px;font-weight:650;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.acct-facts small{display:block;margin-top:1px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.acct-facts:last-child{margin-bottom:0}

/* Your Trybe data: the connection, My Results, one primary button, text links. */
.acct-trybe .mp-head{align-items:flex-start;flex-wrap:wrap}
.acct-trybe .mp-head .mp-pill{flex:none;margin-left:auto}
.acct-trybe .mp-head>div{flex:1 1 220px}
.acct-trybe .mp-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mp-pill.is-warn{background:color-mix(in srgb,var(--td-warn) 13%,var(--pane));color:var(--td-warn)}
.acct-trybe-note{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--td-warn)}
.acct-trybe-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.acct-trybe-actions .mp-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.acct-tool{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.5;color:var(--ink-2)}
.acct-tool>svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acct-tool.is-ok>svg{stroke:var(--confirm);stroke-width:2.6}
.acct-tool>span{flex:1 1 240px;min-width:0}
.acct-tool strong{font-weight:650;color:var(--ink)}
.mp-btn.is-small{min-height:38px;padding:7px 14px;font-size:13px}
/* Community benchmarks: a setting, not a headline. */
.acct-bench{display:flex;align-items:flex-start;gap:12px;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.acct-bench input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--violet-fill)}
.acct-bench input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.acct-bench strong{font-weight:650}
.acct-bench a{color:var(--violet);font-weight:600;text-underline-offset:3px;white-space:nowrap}

/* Discord: one card, one next action. The chip takes Discord's own colour. */
.mp-ico.is-discord{--c:#5865F2}
.acct-discord .mp-head{align-items:flex-start;flex-wrap:wrap}
.acct-discord .mp-head .mp-pill{flex:none;margin-left:auto}
.acct-discord .mp-head>div{flex:1 1 220px}
.acct-discord .mp-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.acct-discord-note{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-md);background:var(--violet-soft);color:var(--ink);font-size:14px;line-height:1.45}
.acct-discord-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.acct-discord .acct-facts li>svg{padding:4px}
.acct-discord-actions .mp-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.acct-discord-unlink{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;color:var(--ink-2);font-weight:500;text-decoration:underline}
.acct-discord-unlink:hover{color:var(--ink)}
.acct-discord[aria-busy="true"] .acct-discord-actions{opacity:.6;pointer-events:none}
@media(max-width:560px){.acct-discord .mp-head .mp-pill{margin-left:52px}.acct-discord-actions .mp-btn{width:100%}.acct-discord-unlink{margin-left:0}}

/* Notifications: read-only rows that point to where each one is changed. */

/* Privacy & data: quiet, last, no frame. */
.acct-privacy{margin:24px 0 0}
#acct .acct-end{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;margin:0;padding:20px 0 0;border-top:1px solid var(--rule)}
.acct-end h2{margin:0 0 4px;font-size:16px;font-weight:650;text-transform:none;letter-spacing:0;border:0;padding:0}.acct-end h2::before{display:none}
#acct .acct-end p{margin:0;max-width:72ch;font-size:13px;line-height:1.55;color:var(--ink-2)}
.acct-end-actions{display:flex;flex-wrap:wrap;gap:10px;flex:none}
#acct .acct-end .btn{min-height:40px;padding:8px 16px;font-size:13px}

/* Quick help sits under the cards at the same width. */
#account-help.hc-inline{max-width:none;margin-top:24px;padding:22px 24px;border-radius:var(--r-lg);box-shadow:var(--elev-1)}
#account-help .hc-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,420px);align-items:center;gap:0 24px}
#account-help h2{font-size:18px;letter-spacing:-.01em}
#account-help .hc-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#account-help input[type=search]{grid-column:2;grid-row:1;min-height:44px;max-width:none;box-shadow:none;background-color:var(--pane-2)}
#account-help .hc-count{grid-column:1/-1}
#account-help .hc-count:empty{display:none}
#account-help .hc-inline-intro{font-size:13px;font-weight:600}
#account-help .hc-footnote{border-top:0;padding-top:0}
#account-help #hc-results{min-height:118px}
#account-help .hc-list{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Loading shape */
.acct-skel-hello{min-height:76px;justify-content:center;border-radius:var(--r-lg)}
.acct-skel-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
.acct-skel-grid .td-skel-card{min-height:300px;border-radius:var(--r-lg)}

@media(max-width:1000px){#account-help .hc-list,#account-links .mp-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.acct-grid,.acct-skel-grid{grid-template-columns:1fr}.acct-skel-grid .td-skel-card{min-height:200px}}
@media(max-width:700px){
  .acct-bar.acct-hello{padding:14px 16px}
  .acct-start-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}.acct-start-head>div{grid-column:1/-1}.acct-start-count{justify-self:start}
  .acct-step:not(.is-done){align-items:start}.acct-step:not(.is-done)>.acct-step-status{grid-column:2;justify-self:start;min-height:0}
  .acct-step>.mp-btn{grid-column:1/-1;width:100%}
  .acct-step.is-optional>.acct-step-optional{grid-column:2;justify-self:start;min-height:40px}
  .billing-card{padding:18px 16px}
  #acct .acct-end{flex-direction:column;align-items:stretch}
  .acct-end-actions .btn{flex:1 1 auto}
  #account-help.hc-inline{padding:18px 16px}
  #account-help .hc-head{grid-template-columns:1fr;gap:10px}#account-help input[type=search]{grid-column:1;grid-row:auto}
  #account-help .hc-list,#account-links .mp-rows{grid-template-columns:1fr}
  .acct-trybe .mp-head .mp-pill{margin-left:52px}.acct-trybe-actions .mp-btn{width:100%}.acct-tool .mp-btn{width:100%}
}

/* ---- 2026-10-08 refresh: the newer design language ----
   One focused column (1080px), a profile card whose connection and access sit
   side by side as two status tiles, an underlined section bar instead of four
   pill buttons, full-width panels with clear headings, and real switches for
   settings that change in place. Phone: stacked tiles, a scrolling section
   bar, full-width actions. */
#acct.is-member,#acct{max-width:1080px}

/* Profile card */
.acct-bar.acct-hello{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:18px 20px}
.acct-hello>.acct-id,.acct-hello>.acct-profile-details{grid-column:1/-1}
.acct-hello>.acct-id{display:flex;align-items:center;gap:14px}
.acct-hello #signout{min-height:40px;padding:8px 16px;font-size:13px}
.acct-connection-summary,.acct-hello #billing-slot .billing-card{box-sizing:border-box;height:100%;min-height:0;margin:0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane-2);box-shadow:none}
.acct-connection-summary{display:flex;align-items:center;gap:12px;color:var(--ink)}
.acct-connection-summary:empty{display:none}
.acct-connection-summary strong{display:block;font-size:15px;font-weight:700;line-height:1.3}
.acct-connection-summary small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2)}
.acct-connection-summary .mp-link{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:13px;white-space:nowrap}
.acct-hello:has(.acct-connection-summary:empty) #billing-slot{grid-column:1/-1}
.acct-hello #billing-slot{min-width:0}
.acct-hello #billing-slot .billing-card{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px}
.acct-hello #billing-slot .billing-card .mp-head{flex:none;margin:0}
.acct-hello #billing-slot .billing-card .mp-ico{width:32px;height:32px}
.acct-hello #billing-slot .billing-card h2{font-size:15px}
.acct-hello #billing-slot .billing-card>p{flex:1 1 220px;margin:0;font-size:13px;line-height:1.45}
.acct-hello #billing-slot .billing-card [data-billing-portal]{margin-top:0}
.acct-profile-details summary{cursor:pointer;min-height:44px;align-content:center;font-size:14px;font-weight:650;color:var(--ink)}

/* Section bar: tabs with an underline for the current one. */
.acct-shortcuts{display:flex;flex-wrap:nowrap;gap:4px;margin:20px 0 16px;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.acct-shortcuts::-webkit-scrollbar{display:none}
.acct-shortcuts a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-sm) var(--r-sm) 0 0;background:none;color:var(--ink-2);font-size:14px;font-weight:650;text-decoration:none;box-shadow:inset 0 -2px 0 transparent;transition:color .15s ease,box-shadow .15s ease}
.acct-shortcuts a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--rule)}
.acct-shortcuts a[aria-current]{background:none;border-color:transparent;color:var(--violet);box-shadow:inset 0 -2px 0 var(--violet)}
.acct-shortcuts a:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}

/* Panels: one heading style, full width; the overview pairs two cards only
   when there are two. */
.acct-grid:not(:has(#discord)){grid-template-columns:minmax(0,1fr)}
.acct-grid:not(:has(#discord))>.acct-col:empty{display:none}
.acct-card .mp-head{margin-bottom:16px}
.acct-card .mp-head h2{font-size:18px}
.acct-facts li>svg{background:color-mix(in srgb,var(--confirm) 18%,var(--pane))}
.acct-trybe .acct-trybe-note{color:var(--ink-2)}
#account-links{margin-top:0}
#account-links .mp-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px}
#account-home-screen{margin-top:12px}
#account-home-screen summary{cursor:pointer;min-height:44px;align-content:center;font-size:15px;font-weight:650;color:var(--ink)}
#account-home-screen p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* Notifications: a heading, then the shared settings list
   (css/notification-settings.css), whose groups are the panels. */
.acct-notify{margin-top:4px}
.acct-notify>.mp-head h2{font-size:18px}
/* Community benchmarks: the checkbox drawn as the same switch. */
.acct-bench input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:40px;height:24px;margin:0;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink-3) 40%,var(--rule));cursor:pointer;transition:background-color .15s ease}
.acct-bench input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease}
.acct-bench input:checked{background:var(--confirm)}
.acct-bench input:checked::after{transform:translateX(16px)}
.acct-bench{gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}

/* Privacy & data: a framed panel like the others, the delete action kept apart. */
.acct-privacy{margin:0}
#acct .acct-end{box-sizing:border-box;padding:22px 24px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--pane);box-shadow:var(--elev-1)}
.acct-end h2{font-size:18px;font-weight:700;margin:0 0 8px}
#acct .acct-end p+p{margin-top:8px}

@media(max-width:760px){
  .acct-bar.acct-hello{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .acct-hello>.acct-id{flex-wrap:nowrap}
  .acct-hello #signout{margin-left:auto;padding:8px 12px}
  .acct-hello .acct-em{font-size:15px}
  .acct-connection-summary{flex-wrap:wrap;row-gap:0}
  .acct-connection-summary .mp-link{margin-left:44px;min-height:36px}
  .acct-shortcuts{margin-inline:-16px;padding-inline:12px}
  #account-links .mp-rows{grid-template-columns:1fr}
  #acct .acct-end{padding:18px 16px}
}
@media(max-width:480px){.acct-hello #signout{margin-left:auto}.acct-hello #signout::before{display:none}
  .acct-connection-summary,.acct-hello #billing-slot .billing-card{padding:10px 12px}
  .acct-hello #billing-slot .billing-card>p{line-height:1.4}}
@media(max-width:360px){.acct-hello #billing-slot .billing-card .mp-ico{display:none}}
@media(prefers-reduced-motion:reduce){.acct-bench input,.acct-bench input::after,.acct-shortcuts a{transition:none}}