/* Account views and the sign-in page inside the workspace. Tokens come from
   /site-assets/theme.css; the sidebar and top bar come from the playground
   stylesheet. Rules are class-scoped; element defaults use :where() so Clerk
   components mounted here keep their own styles. */
.console-page { --line:rgba(232, 236, 196, 0.09); background:var(--bg); color:var(--text); font:14px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
.console-page *, .console-page *::before, .console-page *::after { box-sizing:border-box; }
:where(.console-page) a { color:var(--lime); text-decoration:none; }
:where(.console-page) a:hover { text-decoration:underline; text-underline-offset:3px; }
:where(.console-page) :focus-visible:not(select) { outline:2px solid var(--lime); outline-offset:2px; }
:where(.console-page) select:focus-visible { outline:0; }
:where(.console-page) p { margin:0 0 12px; color:var(--text-2); }
:where(.console-page) p:last-child { margin-bottom:0; }
:where(.console-page) code, :where(.console-page) pre { font:12.5px/1.7 var(--mono); }
.console-page [hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--text-3); font-size:13px; }
.auth-top .brand { display:inline-flex; gap:9px; align-items:center; color:var(--text); font:600 20px var(--display); letter-spacing:-.5px; }
.auth-top .brand:hover { text-decoration:none; }
.auth-top .brand img { width:22px; height:22px; }
.auth-copy .eyebrow { display:block; color:var(--lime); font:11px var(--mono); letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px; }

/* Signed-out view */
.auth-view { min-height:100vh; display:flex; flex-direction:column; }
.auth-top { display:flex; justify-content:space-between; align-items:center; padding:20px 32px; border-bottom:1px solid var(--line); }
.auth-top { gap:16px; flex-wrap:wrap; }
.auth-top nav { display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13.5px; }
.auth-top nav a { color:var(--text-2); }
.auth-grid { flex:1; width:100%; max-width:1080px; margin:auto; padding:56px 32px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:center; }
.auth-copy h1 { font:500 clamp(34px,4.4vw,52px)/1.1 var(--display); letter-spacing:-.035em; margin:0 0 32px; }
.auth-points { list-style:none; margin:0; padding:0; display:grid; gap:18px; max-width:440px; }
.auth-points li { display:grid; gap:2px; padding-left:16px; border-left:2px solid var(--olive); }
.auth-points strong { color:var(--text); font-weight:550; }
.auth-points span { color:var(--text-2); }
.auth-card { min-width:min(400px,100%); }
.auth-status { margin:0 0 14px; color:var(--text-2); }
.auth-status:empty { display:none; }
.auth-legal { margin:16px 0 0; max-width:400px; color:var(--text-3); font-size:12.5px; }
.auth-foot { display:flex; flex-wrap:wrap; gap:8px 22px; padding:18px 32px; border-top:1px solid var(--line); color:var(--text-3); font-size:12.5px; }
.auth-foot a { color:var(--text-2); }
.auth-foot .powered-by { margin-left:auto; font:500 11px var(--mono); letter-spacing:.04em; }

/* Account views */
.console-status { margin:16px 32px 0; padding:10px 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg-2); color:var(--text); }
.console-main { width:100%; max-width:1120px; padding:32px 32px 72px; }
.view { display:grid; gap:20px; }

.view-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:4px; }
.view-head h1 { margin:0 0 4px; font:500 28px/1.2 var(--display); letter-spacing:-.03em; color:var(--text); }
.view-head p { margin:0; }

/* Cards and data */
.card { background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:20px 22px; min-width:0; }
.card-flush { position:relative; padding:0; overflow-x:auto; } /* positioned, so screen-reader-only labels stay inside the scroll area */
.card-pad { padding:16px 22px 18px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.card-flush .card-head { margin:0; padding:16px 22px; border-bottom:1px solid var(--line); }
.card-head h2, .card-head h3 { margin:0; color:var(--text); font:550 15px var(--sans); letter-spacing:0; }
.card-head h3 { font-size:14px; }
.card-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.stat { display:grid; gap:4px; padding:18px 20px; background:var(--bg-2); }
.stat-label { color:var(--text-2); font-size:12.5px; }
.stat-value { color:var(--text); font:500 26px/1.2 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat-sub { color:var(--text-3); font-size:12.5px; min-height:1.2em; }
.kv { margin:0; display:grid; }
.kv div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.kv div:last-child { border-bottom:0; }
.kv dt { color:var(--text-2); }
.kv dd { margin:0; color:var(--text); text-align:right; }
#overview-plan { text-transform:capitalize; }
.table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table th { padding:10px 22px; text-align:left; color:var(--text-3); font:500 11.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line); background:rgba(232,236,196,.015); }
.table td { padding:12px 22px; color:var(--text-2); border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table td:first-child { color:var(--text); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }
.table .empty { color:var(--text-3); text-align:center; padding:28px 22px; }
.card:not(.card-flush) .table th, .card:not(.card-flush) .table td { padding-left:0; padding-right:0; }
.table code { color:var(--text-2); }
.table code.digest { overflow-wrap:anywhere; }
.table-more { display:flex; justify-content:center; padding:12px 22px; border-top:1px solid var(--line); }
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:99px; font-size:12px; border:1px solid var(--line-2); color:var(--text-2); text-transform:capitalize; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--text-3); }
.badge-ok { color:var(--lime); border-color:rgba(212,218,90,.3); }
.badge-ok::before { background:var(--lime); }
.badge-warn { color:var(--gold); border-color:rgba(201,167,90,.35); }
.badge-warn::before { background:var(--gold); }
.badge-bad { color:#f0a58a; border-color:rgba(240,165,138,.35); }
.badge-bad::before { background:#f0a58a; }

/* Controls */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius:8px; border:1px solid transparent; font:500 13.5px var(--sans); cursor:pointer; white-space:nowrap; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn:disabled { opacity:.55; cursor:default; }
.btn-primary { background:var(--lime); color:var(--bg); }
.btn-primary:hover:not(:disabled) { background:var(--glow); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover:not(:disabled) { background:rgba(232,236,196,.05); }
.btn-danger { background:transparent; color:#f0a58a; border-color:rgba(240,165,138,.3); }
.btn-danger:hover:not(:disabled) { background:rgba(240,165,138,.08); }
.btn-sm { height:30px; padding:0 11px; font-size:12.5px; }
.input { height:36px; min-width:0; padding:0 12px; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); color:var(--text); font:14px var(--sans); }
.input:focus { outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(212,218,90,.12); }
.input::placeholder { color:var(--text-3); }
.field-label { color:var(--text-2); font-size:13px; }
.inline-form { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.inline-form .input { flex:1 1 220px; }
.stack-form { display:grid; gap:8px; margin-top:16px; }
.input-prefix { flex:1 1 140px; display:flex; align-items:center; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); }
.input-prefix span { padding-left:12px; color:var(--text-3); }
.input-prefix .input { border:0; flex:1; background:transparent; box-shadow:none; }
.field-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.mono-chip { flex:1; min-width:0; padding:6px 10px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.snippet { margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); overflow:auto; }
.check { display:flex; align-items:flex-start; gap:9px; color:var(--text-2); cursor:pointer; }
.check input { margin-top:3px; accent-color:var(--lime); }
.balance { display:flex; align-items:baseline; gap:10px; margin:0 0 4px; }
.balance strong { color:var(--text); font:500 34px/1.1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.balance span { color:var(--text-2); }
.storage-line { color:var(--text); }

.callout { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; padding:16px 18px; border:1px solid rgba(212,218,90,.35); border-radius:12px; background:rgba(212,218,90,.06); }
.callout-body { flex:1 1 360px; min-width:0; display:grid; gap:10px; }
.callout-body strong { color:var(--text); font-weight:550; }
.callout-body .snippet { word-break:break-all; white-space:pre-wrap; }
.callout-actions { display:flex; gap:8px; }

.segmented { display:inline-flex; padding:3px; border:1px solid var(--line-2); border-radius:9px; background:var(--bg); }
.segmented label { cursor:pointer; }
.segmented input { position:absolute; opacity:0; pointer-events:none; }
.segmented span { display:block; padding:4px 12px; border-radius:6px; color:var(--text-2); font-size:13px; }
.segmented input:checked + span { background:var(--bg-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.segmented input:focus-visible + span { outline:2px solid var(--lime); }
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.plan { position:relative; display:flex; flex-direction:column; gap:2px; padding:18px; border:1px solid var(--line-2); border-radius:11px; background:var(--bg); cursor:pointer; }
.plan input { position:absolute; opacity:0; pointer-events:none; }
.plan:has(input:checked) { border-color:var(--lime); box-shadow:0 0 0 1px var(--lime) inset; }
.plan:has(input:focus-visible) { outline:2px solid var(--lime); outline-offset:2px; }
.plan-static { cursor:default; }
.plan-current::after { content:"Current"; position:absolute; top:14px; right:14px; padding:1px 8px; border-radius:99px; font-size:11.5px; color:var(--lime); border:1px solid rgba(212,218,90,.3); }
.plan-name { color:var(--text); font-weight:550; }
.plan-price { margin-top:6px; color:var(--text); font:500 28px/1.1 var(--display); letter-spacing:-.02em; }
.plan-period { color:var(--text-3); font-size:12.5px; min-height:1.2em; }
.plan ul { margin:12px 0 0; padding:12px 0 0; list-style:none; border-top:1px solid var(--line); display:grid; gap:4px; color:var(--text-2); font-size:13px; }
.plan li::before { content:"✓"; color:var(--lime); margin-right:8px; }
.form-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; }

/* Clerk UserProfile: size the embedded card to the console column. */
.profile-mount { min-width:0; }
.profile-mount .cl-rootBox, .profile-mount .cl-cardBox { width:100%; max-width:100%; }

@media (max-width:980px) {
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-2, .plans { grid-template-columns:1fr; }
}
@media (max-width:780px) {
  .console-main { padding:24px 16px 56px; }
  .console-status { margin:12px 16px 0; }
  .auth-top, .auth-foot { padding:16px; }
  .auth-foot .powered-by { margin-left:0; }
  .auth-grid { grid-template-columns:1fr; gap:32px; padding:32px 16px; }
  .auth-card { min-width:0; }
  .table th, .table td { padding-left:14px; padding-right:14px; }
  .card { padding:16px; }
  .card-flush { padding:0; }
  .card-flush .card-head, .card-pad { padding-left:16px; padding-right:16px; }
}