/* css/account.css - the shared look of account.html and device.html: page frame, navigation, cards, tabs, forms, tables, notices, toasts.
   Load after tokens.css, kit.css, app.css. Every rule is prefixed `ac-`; the other account stylesheets (account-shop / -deposit / -more.css) build on these.
   Class list for section authors (docs/ACCOUNT_UI.md): .ac-card .ac-card-title .ac-grid-2 .ac-grid-3 .ac-kv .ac-actions .ac-notice(.ac-good|.ac-warn|.ac-bad|.ac-info)
   .ac-table(.ac-stack) .ac-tablewrap .ac-empty .ac-hint .ac-field .ac-form .ac-badge .ac-code .ac-mono .ac-center .ac-sr */

/* ---------- page ---------- */
body.ac{min-height:100vh;display:flex;flex-direction:column;font:14px/1.55 var(--font);background:var(--bg-0);color:var(--text)}
.ac *,.ac *::before,.ac *::after{box-sizing:border-box}
.ac-skip{position:absolute;left:8px;top:-60px;z-index:var(--z-tip);padding:8px 14px;border-radius:var(--radius-s);background:var(--accent);color:var(--text-inv);font-weight:700;text-decoration:none}
.ac-skip:focus{top:8px;box-shadow:var(--ring)}
.ac-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header: brand | main links | language, three zones, outer columns equal */
.ac-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-4);width:100%;max-width:1180px;margin:0 auto;padding:14px 16px}
.ac-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;font-size:16px;letter-spacing:-.02em;justify-self:start}
.ac-brand b{color:var(--accent);font-weight:800}
.ac-brand img{display:block;flex:none}
.ac-brand:focus-visible,.ac-links a:focus-visible{outline:none;box-shadow:var(--ring)}
.ac-links{display:flex;justify-content:center;gap:4px}
.ac-links a{color:var(--text-2);text-decoration:none;padding:7px 12px;border-radius:var(--radius-s);font-weight:600;font-size:var(--fs-l);transition:background var(--t-fast),color var(--t-fast)}
.ac-links a:hover{color:var(--text);background:var(--bg-3)}
.ac-top-right{justify-self:end;display:flex;align-items:center;gap:var(--sp-2)}
.ac-lang-switch .bm-tab{padding:5px 10px;font-size:var(--fs-s)}

.ac-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:16px 16px 64px;min-width:0}

/* ---------- signed-in layout: section list | content ---------- */
.ac-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);align-items:start}
.ac-layout.ac-signedin{grid-template-columns:200px minmax(0,1fr)}
.ac-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px;padding:8px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-l)}
.ac-nav[hidden]{display:none}
.ac-nav-item{display:block;padding:9px 12px;border-radius:var(--radius-s);color:var(--text-2);text-decoration:none;font-weight:600;font-size:var(--fs-l);transition:background var(--t-fast),color var(--t-fast)}
.ac-nav-item:hover{background:var(--bg-3);color:var(--text)}
.ac-nav-item:focus-visible{outline:none;box-shadow:var(--ring)}
.ac-nav-item[aria-current="page"]{color:var(--text);background:var(--bg-3);box-shadow:inset 3px 0 0 var(--accent)}
.ac-signedout .ac-nav{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center}
.ac-content{min-width:0}
.ac-section{min-width:0}
.ac-sec-title{margin:0 0 var(--sp-4);font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ac-sec-title:focus{outline:none}
.ac-sec-title:focus-visible{box-shadow:var(--ring);border-radius:var(--radius-xs)}
.ac-sec-root{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}

@media (max-width:860px){
  .ac-layout.ac-signedin{grid-template-columns:minmax(0,1fr)}
  .ac-nav{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px}
  .ac-nav-item{padding:8px 12px}
  .ac-nav-item[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
  .ac-sec-title{text-align:center;font-size:var(--fs-xl)}
  .ac-links{display:none}
  .ac-top{grid-template-columns:1fr auto}
}

/* ---------- cards and grids ---------- */
.ac-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-l);padding:20px;display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.ac-card-title{margin:0;font-size:var(--fs-l);font-weight:750;letter-spacing:-.01em}
.ac-card-sub{margin:0;color:var(--text-2);font-size:var(--fs-m)}
.ac-grid-2,.ac-grid-3{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);align-items:stretch}
@media (min-width:700px){.ac-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.ac-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:979px){.ac-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ac-center{text-align:center;align-items:center}
.ac-big{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ac-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ac-muted{color:var(--text-2)}
.ac-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;align-items:baseline}
.ac-kv-center{grid-template-columns:max-content minmax(0,max-content);justify-content:center}
.ac-kv-center dt{text-align:right}
.ac-kv dt{color:var(--text-2);font-size:var(--fs-m)}
.ac-kv dd{margin:0;min-width:0;overflow-wrap:anywhere;font-weight:600}
.ac-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-2)}
.ac-actions>.bm-btn{flex:0 1 auto}
.ac-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--radius-pill);background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);font-size:var(--fs-s);font-weight:650;white-space:nowrap}
.ac-badge.ac-good{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.ac-badge.ac-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.ac-badge.ac-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.ac-badge.ac-accent{color:var(--accent-2);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ac-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}

/* ---------- notices ---------- */
.ac-notice{display:flex;flex-direction:column;gap:var(--sp-2);padding:12px 14px;border-radius:var(--radius-m);background:var(--bg-2);border:1px solid var(--line-2);border-left:3px solid var(--info);font-size:var(--fs-m);line-height:1.5}
.ac-notice p{margin:0}
.ac-notice.ac-good{border-left-color:var(--good)} .ac-notice.ac-warn{border-left-color:var(--warn)} .ac-notice.ac-bad{border-left-color:var(--bad)}
.ac-notice-title{font-weight:750}
.ac-notice .ac-actions{justify-content:flex-start}
.ac-hint{font-size:var(--fs-s);color:var(--text-2);line-height:1.45}
.ac-hint,.ac-strength-label,.ac-auth-lead,.ac-card-sub,.ac-progress-text{text-wrap:balance}
.ac-notice p{text-wrap:pretty}
.ac-notice-text{text-wrap:balance}   /* a short notice never ends on one lone word (page audit, device.html unknown code at 480 px: "plug-in.") */
.ac-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:28px 16px;text-align:center;color:var(--text-2);border:1px dashed var(--line-2);border-radius:var(--radius-l)}
.ac-empty p{margin:0;max-width:52ch;text-wrap:balance}
.ac-empty-title{margin:0;color:var(--text);font-size:var(--fs-l)}

/* ---------- the sign-in / register card ---------- */
.ac-auth-root{display:flex;justify-content:center}
.ac-auth{width:min(460px,100%)}
.ac-auth .ac-card{padding:24px;gap:var(--sp-4)}
.ac-auth-title{margin:0;font-size:var(--fs-xl);font-weight:800;text-align:center;letter-spacing:-.01em}
.ac-auth-title:focus{outline:none}
.ac-auth-lead{margin:0;text-align:center;color:var(--text-2)}
.ac-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:3px;background:var(--bg-0);border-radius:var(--radius-m);border:1px solid var(--line)}
.ac-tab{min-height:var(--ctl-h);padding:0 10px;border:0;border-radius:var(--radius-s);background:transparent;color:var(--text-2);font:inherit;font-weight:650;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.ac-tab:hover{color:var(--text)}
.ac-tab:focus-visible{outline:none;box-shadow:var(--ring)}
.ac-tab[aria-selected="true"]{background:var(--bg-3);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* ---------- forms ---------- */
.ac-form{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.ac-form .bm-field>label{font-size:var(--fs-s);letter-spacing:.06em}
.ac-form .bm-input{min-height:var(--ctl-h-lg);font-size:15px}
.ac-form .bm-btn.bm-lg{width:100%}
.ac-form .bm-input[aria-invalid="true"]{border-color:var(--bad)}
.ac-fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.ac-reasons{margin:4px 0 0;padding-left:18px}
.ac-pw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:stretch}
.ac-pw .bm-btn{min-height:var(--ctl-h-lg);min-width:64px}
.ac-meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ac-meter i{display:block;height:4px;border-radius:2px;background:var(--bg-4)}
.ac-meter[data-score="1"] i:nth-child(-n+1){background:var(--bad)}
.ac-meter[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.ac-meter[data-score="3"] i:nth-child(-n+3){background:var(--info)}
.ac-meter[data-score="4"] i{background:var(--good)}
.ac-strength{display:flex;flex-direction:column;gap:6px}
.ac-strength-label{font-size:var(--fs-s);color:var(--text-2)}
.ac-check{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;cursor:pointer;line-height:1.45}
.ac-check{padding:5px 0}
.ac-check input{margin-top:2px}
.ac-check a{color:var(--accent-2)}
.ac-links-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.ac-linkbtn{background:none;border:0;padding:6px 2px;font:inherit;font-weight:600;color:var(--accent-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ac-linkbtn:hover{color:var(--accent)}
.ac-linkbtn:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-xs)}
.ac-status{display:flex;flex-direction:column;gap:var(--sp-2);min-height:0}
.ac-status:empty{display:none}
/* the bot check (Cloudflare Turnstile, js/account/turnstile.js): the place is empty (and takes no room) until a form shows the check */
.ac-captcha-place:empty{display:none}
.ac-captcha{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.ac-captcha-box{min-width:0;max-width:100%;overflow:hidden}
.ac-captcha-msg{margin:0}
.ac-captcha .ac-linkbtn{align-self:flex-start}
.ac-progress{display:flex;flex-direction:column;gap:6px}
.ac-progress-text{font-size:var(--fs-s);color:var(--text-2);text-align:center}
.ac-busy{position:relative;pointer-events:none}
.ac-spin{display:inline-block;vertical-align:middle}
.ac-loading{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:48px 16px;color:var(--text-2)}
.bm-btn[disabled]{cursor:not-allowed}

/* ---------- tables ---------- */
.ac-tablewrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-m)}
.ac-table{width:100%;border-collapse:collapse;font-size:var(--fs-m)}
.ac-table th{padding:10px 12px;text-align:left;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);background:var(--bg-2);border-bottom:1px solid var(--line)}
.ac-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.ac-table tr:last-child td{border-bottom:0}
.ac-table .ac-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:640px){
  .ac-table.ac-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ac-table.ac-stack,.ac-table.ac-stack tbody,.ac-table.ac-stack tr,.ac-table.ac-stack td{display:block;width:100%}
  .ac-table.ac-stack tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  .ac-table.ac-stack tr:last-child{border-bottom:0}
  .ac-table.ac-stack td{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:10px;padding:4px 0;border:0}
  .ac-table.ac-stack td::before{content:attr(data-label);color:var(--text-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .ac-table.ac-stack .ac-num{text-align:left}
}

/* ---------- device approval ---------- */
.ac-code{font:800 34px/1.1 var(--mono);letter-spacing:.14em;text-align:center;padding:14px 12px;border:1px solid var(--line-3);border-radius:var(--radius-m);background:var(--bg-0);color:var(--accent-2);overflow-wrap:anywhere}
.ac-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.ac-pair>.bm-btn{width:100%}
.ac-who{display:flex;flex-direction:column;gap:var(--sp-1);align-items:center;text-align:center;color:var(--text-2);font-size:var(--fs-m)}
.ac-who b{color:var(--text)}

/* ---------- toasts: centred at the bottom ---------- */
.ac-toasts{left:50%;right:auto;transform:translateX(-50%);align-items:center;width:max-content;max-width:calc(100vw - 32px)}

/* ---------- footer ---------- */
.ac-footer{width:100%;max-width:1180px;margin:0 auto;padding:28px 16px 40px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ac-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;width:100%}
.ac-foot-nav a{color:var(--text-2);text-decoration:none;font-weight:600;padding:7px 2px;text-align:center;text-wrap:balance}
.ac-foot-nav a:hover{color:var(--accent-2)}
.ac-foot-nav a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-xs)}
.ac-trademark{max-width:72ch;margin:0;font-size:12px;line-height:1.55;color:var(--text-2);text-wrap:balance}
.ac-copy{margin:0;font-size:var(--fs-s);color:var(--text-2)}
@media (max-width:640px){
  .ac-foot-nav{max-width:720px}
  .ac-foot-nav a{flex:0 0 calc((100% - 36px)/3)}
}
@media (max-width:480px){
  .ac-foot-nav a{flex-basis:100%}
  .ac-card{padding:16px}
  .ac-auth .ac-card{padding:18px}
  .ac-code{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  .ac *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- narrow phones (320-420 px): section list as two equal columns, key-value lists stacked and centred ---------- */
.ac-auth-title,.ac-sec-title,.ac-card-title{text-wrap:balance}
@media (max-width:420px){
  .ac-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-nav-item{text-align:center;padding:8px 6px}
  .ac-nav-item:last-child:nth-child(odd){grid-column:1/-1}
  .ac-kv-center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:2px}
  .ac-kv-center dt{text-align:center;font-size:var(--fs-s)}
  .ac-kv-center dd{margin-bottom:8px}
}
.ac-who b{overflow-wrap:anywhere;font-weight:600}
.ac-auth .ac-notice p{text-wrap:balance}
@media (max-width:480px){
  .ac-actions.ac-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-actions.ac-quick>:last-child:nth-child(odd){grid-column:1/-1}
  .ac-actions.ac-quick>.bm-btn{width:100%}
}