/* ---------- the account pages (one sheet per room, CLAUDE.md) ----------
   Settings, Learn, Payments, the AI team, Notifications, Support — the
   pages behind the You pill, in the HomeBidPros shape (Mark, 2026-08-15):
   page head, uppercase section kickers, cards of rows with the control
   on the right. */
.acct{max-width:640px;margin:0 auto;padding:18px 20px 40px;display:flex;flex-direction:column;gap:14px;}
.acct-title{font-size:var(--t-title);font-weight:var(--w-bold);letter-spacing:var(--ls-head);}
.acct-sub{margin-top:-8px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--muted);}
/* Pathary kicker: the working sans, bold, half-pixel tracking — not mono */
.acct-sec{margin-top:6px;font-size:var(--t-label);font-weight:var(--w-bold);
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.acct-card{border:var(--bd) solid var(--edge);border-radius:var(--r-lg);background:var(--panel);
  padding:4px 14px;box-shadow:var(--sh-card);}
.acct-empty{padding:14px;color:var(--muted);font-size:var(--t-body);line-height:var(--lh-body);}

/* rows: title + sub left, one control right */
.acct-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:var(--bd) solid var(--edge);}
.acct-card .acct-row:first-child{border-top:0;}
.acct-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.acct-t{font-size:var(--t-body);font-weight:var(--w-med);}
.acct-s{font-size:var(--t-small);line-height:var(--lh-body);color:var(--muted);}
.acct-pill{flex:none;padding:4px 10px;border-radius:999px;background:var(--sel);color:var(--muted);font-size:var(--t-tiny);}
/* a settings row that takes a value rather than a choice. 190px is the size
   of a field, not a step of a scale. */
.acct-input{flex:none;width:190px;padding:8px 11px;border-radius:var(--r-sm);
  border:var(--bd) solid var(--edge);background:var(--panel);color:var(--ink);
  font-size:var(--t-body);}
.acct-input:focus{border-color:var(--accent);outline:none;}
.acct-links{flex:none;display:flex;gap:12px;}
.acct-link{padding:0;background:transparent;border:0;color:var(--accent);font-size:var(--t-small);font-weight:var(--w-semi);}

/* the accent dots: each wears its own [data-theme][data-accent], so the
   scoped tokens paint it; the ring is the page's own text colour */
.acct-accs{flex:none;display:flex;gap:8px;}
.acct-acc{width:22px;height:22px;border-radius:var(--r-round);padding:0;
  background:var(--accent);border:2px solid var(--edge);}
.acct-acc.on{border-color:var(--text);}

/* account: the name fields */
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 0;}
.acct-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.acct-field-wide{grid-column:1/-1;}
.acct-field-l{font-size:var(--t-tiny);color:var(--muted);}
.acct-field-in{padding:8px 10px;border:var(--bd) solid var(--edge);border-radius:10px;
  background:transparent;color:var(--text);font-size:var(--t-small);}
.acct-field-hint{font-size:var(--t-tiny);color:var(--muted);}

/* the resting switch: design only for now */
.acct-sw{flex:none;position:relative;width:40px;height:24px;border-radius:999px;
  background:var(--sel);border:var(--bd) solid var(--edge);display:inline-block;}
.acct-sw-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--r-round);
  background:var(--panel);box-shadow:var(--sh-card);}

/* payments: balance hero, pack tiles, storage bar */
.acct-bal-label{padding-top:10px;font-size:var(--t-small);color:var(--muted);}
.acct-bal-n{padding:2px 0 12px;font-size:var(--t-title);font-weight:var(--w-semi);}
.acct-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.acct-pack{position:relative;border:var(--bd) solid var(--edge);border-radius:var(--r-lg);background:var(--panel);
  padding:18px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  box-shadow:var(--sh-card);}
.acct-pack.pop{border-color:var(--accent-line);}
.acct-pack-pop{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:999px;
  background:var(--accent-soft);border:var(--bd) solid var(--accent-line);color:var(--accent);
  font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:.5px;}
.acct-pack-n{font-size:var(--t-head);font-weight:var(--w-semi);}
.acct-pack-l,.acct-pack-per{font-size:var(--t-tiny);color:var(--muted);}
.acct-buy{width:100%;margin-top:6px;padding:8px 0;border:var(--bd) solid var(--edge);border-radius:10px;
  background:transparent;font-size:var(--t-small);font-weight:var(--w-semi);color:var(--accent);}
.acct-bar{margin:2px 0 14px;height:6px;border-radius:999px;background:var(--sel);overflow:hidden;}
/* design placeholder: a settled-looking third of the tank */
.acct-bar-fill{width:35%;height:100%;border-radius:999px;background:var(--accent);}

/* learn: accordion folds on native details */
.acct-fold{border:var(--bd) solid var(--edge);border-radius:var(--r-lg);background:var(--panel);}
.acct-fold summary{display:flex;flex-direction:column;gap:3px;padding:14px;cursor:pointer;list-style:none;}
.acct-fold summary::-webkit-details-marker{display:none;}
.acct-fold-body{padding:0 14px 14px;font-size:var(--t-small);line-height:var(--lh-body);color:var(--muted);
  display:flex;flex-direction:column;gap:8px;}
.acct-fold-body ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.acct-fold-body b{color:var(--text);font-weight:var(--w-semi);}

/* the phone lab (Settings, 2026-09-01): her one mobile prompt as a box the
   width of the card, and a lane's voices as a chip row under its row. 120px
   is the size of a box, not a step of a scale. */
.acct-textarea{width:100%;min-height:120px;margin:0 0 12px;padding:10px 11px;border-radius:var(--r-sm);
  border:var(--bd) solid var(--edge);background:var(--panel);color:var(--ink);
  font:inherit;font-size:var(--t-body);line-height:var(--lh-body);resize:vertical;}
.acct-textarea:focus{border-color:var(--accent);outline:none;}
.prefs-voices{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 12px;}