/* ================================================================
   account-page.css — /account/, the light page
   ================================================================
   The one page on the site drawn on white: a profile card, four tiles,
   the settings list and a note about data. Everything is scoped under
   body.ac-page, and the page loads nothing else but account.css, whose
   header chip, dialogs and toast read their colours through the tokens
   below - so the sign-in box and the plan dialog come out light here
   without that file being touched.

   Classes are prefixed ac-. account.js writes the dialogs' contents
   with the same prefix, and preflight checks that every class on the
   page, written or built, has a rule in this file or in account.css.
   ================================================================ */

body.ac-page{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  /* The site's violet, at the weight white text needs on it (#6D4AFF
     reads 5.15 under white) and as a wash for the circles and the pill. */
  --brand:#6D4AFF;
  --brand-soft:#EEEAFF;
  --brand-ink:#4C2FD6;
  --dark:#6D4AFF;
  --green:#067647;
  --shadow:0 10px 30px rgba(17,24,39,.06);
  --radius:16px;
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);background:var(--bg);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.ac-page *{box-sizing:border-box}
.ac-page a{color:inherit;text-decoration:none}
.ac-page .skip{position:absolute;left:-9999px}
.ac-page .skip:focus{left:8px;top:8px;z-index:30;background:#fff;padding:8px 12px;border-radius:10px;border:1px solid var(--line)}
.ac-wrap{width:min(1056px,calc(100% - 32px));margin:0 auto}

/* ---- header ---- */
.ac-top{border-bottom:1px solid var(--line);background:#fff}
.ac-top-in{display:flex;align-items:center;gap:28px;height:60px}
.ac-brand{font-size:21px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.ac-nav{display:flex;gap:22px;font-size:14.5px;color:#374151}
.ac-nav a:hover{color:var(--brand)}
.ac-search{
  margin-left:auto;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:#9ca3af;width:250px;
}
.ac-search svg{width:16px;height:16px;flex:none}
.ac-search input{
  border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--text);width:100%;min-width:0;
}
.ac-search input::placeholder{color:#9ca3af}
.ac-search:focus-within{border-color:var(--brand)}
.ac-page .acct-slot{flex:none}

/* ---- the page ---- */
.ac-main{padding:46px 0 60px}
/* Back to the home page, above the heading where a way out is looked for. */
.ac-back{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 18px;padding:7px 14px 7px 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:14px;font-weight:600;color:#111827;text-decoration:none;
}
.ac-back:hover{border-color:#111827}
.ac-back:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ac-h1{margin:0;font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ac-lede{margin:8px 0 26px;font-size:17px;color:#4b5563}

.ac-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:26px 28px}

/* The gate: what a signed-out visitor sees instead of the cards. */
.ac-gate{text-align:center;padding:44px 24px}
.ac-gate h2{margin:0 0 8px;font-size:24px;letter-spacing:-.02em}
.ac-gate p{margin:0 auto 20px;max-width:520px;color:#4b5563;font-size:15px}

/* ---- profile ---- */
.ac-profile{display:flex;align-items:flex-start;gap:30px}
.ac-avatar{
  width:80px;height:80px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-ink);font-size:28px;font-weight:600;letter-spacing:-.02em;
}
.ac-who{flex:1;min-width:0;padding-top:4px}
.ac-who h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.ac-who p{margin:4px 0 0;font-size:16px;color:#4b5563;overflow-wrap:anywhere}
.ac-since{margin-top:22px !important;font-size:14px;color:#6b7280 !important}
.ac-profile-r{display:flex;flex-direction:column;align-items:flex-end;gap:30px;flex:none}
.ac-pill{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:600}
.ac-acts{display:flex;gap:12px}

/* ---- buttons, the page's and the dialogs' ---- */
.ac-btn,.ac-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:var(--text);
  font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
.ac-btn:hover,.ac-page .btn:hover{background:#f9fafb}
.ac-btn.dark,.ac-page .btn{background:var(--brand);border-color:var(--brand);color:#fff}
.ac-btn.dark:hover,.ac-page .btn:hover{background:#5B3DF5;border-color:#5B3DF5}
.ac-page .btn.secondary{background:#fff;border-color:#d1d5db;color:var(--text)}
.ac-page .btn.secondary:hover{background:#f9fafb}
.ac-btn svg{width:16px;height:16px;flex:none}
.ac-btn.danger{color:#dc2626;border-color:#dc2626}
.ac-btn.danger:hover{background:#fef2f2}
.ac-page .btn.danger{background:#dc2626;border-color:#dc2626;color:#fff}
.ac-page .btn:disabled,.ac-btn:disabled{opacity:.55;cursor:default}
.ac-page .btn.secondary:disabled{opacity:1;color:#6b7280}

/* ---- the four tiles ---- */
.ac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.ac-tile{display:flex;flex-direction:column;min-height:196px}
.ac-tile-top{display:flex;align-items:flex-start;gap:28px}
.ac-tile-i{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
}
.ac-tile-i svg{width:22px;height:22px}
.ac-tile-b{flex:1;min-width:0}
.ac-tile h3{margin:0;font-size:15px;font-weight:700}
.ac-big{margin:8px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.ac-sub{margin:10px 0 0;font-size:14.5px;color:#4b5563;line-height:1.5}
.ac-sub.tight{margin-top:8px;line-height:1.6}
.ac-bar{height:8px;border-radius:4px;background:#e5e7eb;margin-top:14px;overflow:hidden}
.ac-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--brand);transition:width .3s ease}
.ac-more{
  margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:15px;font-weight:700;color:var(--text);background:none;border:0;cursor:pointer;font-family:inherit;
}
.ac-more svg{width:16px;height:16px}
.ac-more:hover{color:var(--brand);text-decoration:underline}

/* ---- settings ---- */
.ac-settings{margin-top:20px;padding-bottom:10px}
.ac-settings h2{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.ac-row{display:flex;align-items:center;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.ac-row:first-of-type{border-top:0}
.ac-row-i{width:24px;height:24px;flex:none;color:#111827}
.ac-row-i svg{width:24px;height:24px}
.ac-row-t{flex:1;min-width:0}
.ac-row-t strong{display:block;font-size:15px;font-weight:700}
.ac-row-t small{display:block;margin-top:3px;font-size:14px;color:#4b5563;overflow-wrap:anywhere}
.ac-row.danger .ac-row-i,.ac-row.danger strong{color:#dc2626}

/* ---- about your data ---- */
.ac-info{
  display:flex;gap:16px;align-items:flex-start;margin-top:20px;padding:20px 22px;
  border:1px solid #E4DEFF;border-radius:16px;background:#F7F5FF;
}
.ac-info-i{width:22px;height:22px;flex:none;color:var(--brand);margin-top:1px}
.ac-info-i svg{width:22px;height:22px}
.ac-info strong{display:block;font-size:15px}
.ac-info p{margin:4px 0 8px;font-size:14px;color:#4b5563;line-height:1.5}
.ac-info a{font-size:14px;font-weight:600;color:var(--brand-ink);text-decoration:underline;display:inline-flex;align-items:center;gap:6px}
.ac-info a svg{width:14px;height:14px}

.ac-loading{margin-top:16px;font-size:14px;color:#6b7280}

/* ---- footer ---- */
.ac-foot{border-top:1px solid var(--line);padding:22px 0 30px;font-size:12.5px;color:#6b7280}
.ac-foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ac-foot a:hover{color:#111827}

/* ---- the dialogs account.js builds on this page ---- */
.ac-page .acct-modal.ac-wide{max-width:680px}
.ac-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:6px}
.ac-plan{border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}
.ac-plan-current{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.ac-plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ac-plan-name{font-size:18px;font-weight:700}
.ac-plan-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#f3f4f6;color:#4b5563}
.ac-plan-tag.ac-on{background:var(--brand);color:#fff}
.ac-plan-price{font-size:28px;font-weight:800;letter-spacing:-.02em}
.ac-plan-list{margin:0;padding:0 0 0 18px;font-size:14px;color:#374151;line-height:1.7}
.ac-plan-soon{margin:0;font-size:15px;color:#4b5563;flex:1}
.ac-plan .btn{width:100%;margin:auto 0 0}
.ac-usage-meta{margin:-8px 0 14px;font-size:13.5px;color:#6b7280}
.ac-runs{max-height:320px;overflow:auto;border-top:1px solid var(--line)}
.ac-run{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.ac-run strong{font-weight:600;white-space:nowrap}
.ac-run span{color:#4b5563;text-align:right;overflow-wrap:anywhere}
.ac-run-none{margin:14px 0 0;font-size:14px;color:#4b5563}
.ac-form{display:grid;gap:12px;margin-top:4px}
.ac-input{
  width:100%;padding:11px 14px;border:1px solid #d1d5db;border-radius:10px;font:inherit;font-size:15px;color:var(--text);outline:0;
}
.ac-input:focus{border-color:var(--brand)}
.ac-page .acct-modal .btn{margin-bottom:0}

/* ---- phones ---- */
@media(max-width:860px){
  .ac-grid{grid-template-columns:1fr}
  .ac-profile{flex-direction:column;gap:20px}
  .ac-profile-r{align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%;gap:14px;flex-wrap:wrap}
}
@media(max-width:700px){
  .ac-top-in{gap:16px}
  .ac-search{display:none}
  .ac-page .acct-slot{margin-left:auto}
  .ac-main{padding:30px 0 40px}
  .ac-h1{font-size:32px}
  .ac-card{padding:20px}
  .ac-tile-top{gap:18px}
  /* The text takes the row and the button drops under it. With the two
     side by side, flex shrank the text to a letter a line before it ever
     wrapped the button. */
  .ac-row{flex-wrap:wrap;row-gap:12px}
  .ac-row-t{flex-basis:calc(100% - 42px)}
  .ac-row .ac-btn{margin-left:42px}
  .ac-plans{grid-template-columns:1fr}
}
/* The brand, four links and the chip do not fit one row of a phone, and
   none of the links can go: the nav takes a second row of its own. */
@media(max-width:520px){
  .ac-top-in{flex-wrap:wrap;height:auto;padding:12px 0;row-gap:6px}
  .ac-nav{order:3;width:100%;gap:16px;font-size:14px}
  .ac-acts{flex-wrap:wrap}
}
@media (pointer:coarse),(max-width:900px){
  .ac-search input,.ac-input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .ac-page *{transition:none !important}
}