/* The customer's account screen (CMP 0.4.0). The layout is the design's own, copied unchanged from
   projects/cmp-compute/briefs/2026-10-28-account-screen/index.html; the additions for the live page are at the end. */
/* Layout: the customer's own screen on the BeargrassAI 2.0.0 kit. Night up top (your balance, your apps, the machines),
   dawn for the receipts, day for the month's numbers. Same tokens, same square system, same marks as the sales page. */
:root { color-scheme: dark; }
html, body { background: var(--canvas); }
.site { position: relative; top: 0; }
.js .site { position: relative; }
.acct-who { order: 2; display: flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); color: var(--cream-2); }
.acct-who .dot { width: 8px; height: 8px; background: var(--olive); box-shadow: 0 0 0 3px rgba(133, 145, 96, 0.25); }

/* balance */
.top { position: relative; overflow: hidden; background: linear-gradient(180deg, #0a1024 0%, #0f1830 70%, var(--night-2) 100%); padding-block: 40px 56px; }
.top .sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.top .wrap { position: relative; z-index: 2; }
.hi { font: 400 clamp(36px, 6vw, 60px)/1.04 var(--display); color: var(--white); margin-top: 10px; }
.hi-sub { margin-top: 10px; max-width: 46ch; font-size: 17px; color: var(--cream-2); }
.bal { margin-top: 30px; display: grid; gap: 22px; padding: 24px 22px; border: 1px solid rgba(244, 196, 90, 0.5); background: rgba(10, 16, 36, 0.72); --cm: rgba(244, 196, 90, 0.85); }
.bal-k { font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.bal-n { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bal-n .n { font: 400 clamp(56px, 10vw, 96px)/0.95 var(--display); color: var(--white); font-variant-numeric: tabular-nums; }
.bal-n .of { font: 500 14px/1.4 var(--mono); color: var(--cream-2); }
.tank { position: relative; height: 26px; border: 1px solid rgba(240, 230, 207, 0.4); background: rgba(240, 230, 207, 0.05); overflow: hidden; }
.tank-f { position: absolute; inset: 0 auto 0 0; width: 95%; background: repeating-linear-gradient(90deg, var(--gold-bright) 0 12px, #d9a744 12px 13px); transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tank-hold { position: absolute; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(135deg, rgba(240, 230, 207, 0.5) 0 3px, transparent 3px 6px); transition: left 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), width 1.1s; }
.bal-say { font-size: 17px; color: var(--cream); }
.bal-say b { color: var(--gold-bright); font-weight: 600; }
.bal-legend { display: flex; gap: 18px; flex-wrap: wrap; font: 400 12px/1.4 var(--mono); color: var(--cream-2); }
.bal-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; }
.bal-legend .lf { background: var(--gold-bright); }
.bal-legend .lh { background: repeating-linear-gradient(135deg, rgba(240, 230, 207, 0.7) 0 2px, transparent 2px 4px); border: 1px solid rgba(240, 230, 207, 0.4); }
.add { display: grid; gap: 12px; }
.add-k { font: 600 13px/1.3 var(--sans); font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.amt { min-height: 46px; min-width: 74px; padding: 0 16px; border: 1px solid rgba(240, 230, 207, 0.55); background: transparent; color: var(--cream); font: 500 17px/1 var(--mono); cursor: pointer; }
.amt[aria-pressed="true"] { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(244, 196, 90, 0.1); }
.add-fine { font: 400 12.5px/1.5 var(--mono); color: var(--cream-2); }
.toast { min-height: 1.4em; font: 500 13px/1.4 var(--mono); color: var(--gold-bright); }

/* apps */
.apps { background: var(--night-2); padding-block: 56px 64px; border-top: 1px solid var(--rule); }
.sec-h { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; }
.sec-h h2 { margin-top: 8px; color: var(--white); font-size: clamp(32px, 5vw, 48px); }
.sec-say { margin-top: 10px; max-width: 52ch; color: var(--cream-2); font-size: 16.5px; }
.app-grid { display: grid; gap: 22px; margin-top: 28px; }
.app { display: grid; gap: 14px; padding: 20px 18px; border: 1px solid var(--rule); background: rgba(10, 16, 36, 0.55); min-width: 0; transition: opacity 0.3s; }
.app.off { opacity: 0.55; }
.app-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.app-name { font: 400 28px/1.05 var(--display); color: var(--white); }
.app-work { margin-top: 6px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.sw { position: relative; flex: none; width: 54px; height: 30px; border: 1px solid rgba(240, 230, 207, 0.55); background: transparent; cursor: pointer; padding: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--cream-2); transition: transform 0.25s, background-color 0.25s; }
.sw[aria-checked="true"] { border-color: var(--gold-bright); }
.sw[aria-checked="true"]::after { transform: translateX(24px); background: var(--gold-bright); }
.cap-k { display: flex; justify-content: space-between; gap: 10px; font: 400 12.5px/1.4 var(--mono); color: var(--cream-2); }
.cap-k b { color: var(--cream); font-weight: 500; }
.cap { height: 8px; background: rgba(240, 230, 207, 0.1); }
.cap-f { display: block; height: 100%; width: 0; background: var(--gold-bright); transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.app-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding-top: 12px; border-top: 1px solid var(--rule); font: 400 13px/1.45 var(--mono); }
.app-meta dt { color: var(--cream-2); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 2px; }
.app-meta dd { margin: 0; color: var(--cream); min-width: 0; overflow-wrap: anywhere; }
.app-acts { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; min-height: 44px; font: 600 14px/1 var(--sans); color: var(--cream); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(240, 230, 207, 0.45); cursor: pointer; }
.new-app { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 220px; border: 1px dashed rgba(240, 230, 207, 0.35); background: transparent; color: var(--cream); cursor: pointer; font: 600 14px/1.3 var(--sans); font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; }
.new-app span.plus { font: 400 44px/1 var(--display); color: var(--gold-bright); letter-spacing: 0; }
.once { margin-top: 22px; padding: 18px; border: 1px solid var(--gold-bright); background: #05080f; display: grid; gap: 10px; }
.once b { color: var(--gold-bright); font: 600 13px/1.3 var(--sans); font-stretch: 125%; letter-spacing: 0.1em; text-transform: uppercase; }
.once code { font: 500 14px/1.5 var(--mono); color: var(--cream); overflow-wrap: anywhere; user-select: all; }
.once p { font-size: 14.5px; color: var(--cream-2); }
.once[hidden] { display: none; }

/* receipts */
.receipts { position: relative; background: var(--dawn); padding-block: 72px 64px; overflow: hidden; }
.receipts .sec-h h2 { color: var(--white); }
.receipts .eyebrow { color: var(--cream); }
.receipts .sec-say { color: var(--cream); }
.sun { position: absolute; left: 50%; top: 52%; width: 640px; height: 640px; margin: -320px 0 0 -320px; background: radial-gradient(closest-side, rgba(255, 236, 178, 0.9), rgba(244, 196, 90, 0.45) 26%, rgba(244, 196, 90, 0.12) 52%, rgba(244, 196, 90, 0) 72%); pointer-events: none; }
.r-list { position: relative; z-index: 2; display: grid; gap: 12px; margin-top: 28px; max-width: 860px; }
.r { background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.28); box-shadow: 0 24px 50px -36px rgba(35, 31, 26, 0.7); }
.r-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: center; width: 100%; padding: 14px 16px; cursor: pointer; color: var(--ink); }
.r-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -3px; }
.r-what { font: 400 20px/1.2 var(--display); min-width: 0; }
.r-sub { grid-column: 1; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.r-amt { grid-row: 1 / span 2; grid-column: 2; font: 500 18px/1 var(--mono); font-variant-numeric: tabular-nums; }
.r-chev { grid-row: 1 / span 2; grid-column: 3; width: 12px; height: 12px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.25s; margin-top: -4px; }
.r[data-open="true"] .r-chev { transform: rotate(225deg); margin-top: 4px; }
.r-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; font: 600 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; vertical-align: 2px; }
.r-tag.free { color: var(--olive); }
.r-tag.added { color: var(--gold-ink); }
.r-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.r[data-open="true"] .r-body { grid-template-rows: 1fr; }
.r-in { overflow: hidden; }
.r-ticket { display: grid; gap: 14px; padding: 4px 16px 18px; }
.r-ticket-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; border-top: 1px solid var(--rule-ink); padding-top: 14px; }
.r-ticket .tk-no { font: 500 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.r-ticket .brand { position: static; }
.r-ticket .iron { width: 46px; height: 46px; }
.r-ticket .b-label { color: var(--ink-2); }
.tk { width: 100%; border-collapse: collapse; font: 400 13.5px/1.4 var(--mono); }
.tk th { text-align: left; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 8px 12px 8px 0; border-top: 1px solid var(--rule-ink); width: 40%; }
.tk td { padding: 8px 0; border-top: 1px solid var(--rule-ink); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk .tot th, .tk .tot td { border-top: 2px solid var(--ink); font-weight: 600; font-size: 15px; color: var(--ink); }

/* the month */
.month { position: relative; overflow: hidden; padding-block: 64px 72px; }
.month .wrap { position: relative; z-index: 2; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.stat { padding: 16px; background: var(--paper-hi); border: 1px solid var(--ink-2); min-width: 0; }
.stat dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.stat dd { margin: 8px 0 0; font: 400 clamp(30px, 5vw, 44px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.chart { margin-top: 22px; padding: 18px 16px 12px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
.chart-k { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 500 11px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.chart svg { display: block; width: 100%; height: auto; margin-top: 12px; }
.month .day-say { margin-top: 18px; font: 400 clamp(22px, 3.6vw, 30px)/1.25 var(--display); color: var(--ink); max-width: 30ch; }

.foot { padding-block: 48px 40px; }
.foot-in p { color: var(--cream-2); }

@media (min-width: 760px) {
  .bal { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding: 28px 30px; }
  .bal .meter-side { grid-column: 1; }
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 759px) { .acct-who .who-mail { display: none; } }

/* The live page's additions: signing in, the empty and waiting states, the alert line, the new-address form. */
.signin-card { margin-top: 30px; display: grid; gap: 16px; justify-items: start; max-width: 40ch; }
.signin-card p { color: var(--cream-2); font-size: 17px; }
.btn[disabled], .amt[disabled] { opacity: 0.45; cursor: not-allowed; }
.alert { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--barn); background: rgba(166, 75, 59, 0.16); color: var(--cream); font: 500 13.5px/1.5 var(--mono); }
.alert[hidden], .err[hidden] { display: none; }
.err { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--barn); color: var(--cream); font: 500 13.5px/1.5 var(--mono); }
.empty { padding: 18px 16px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.28); color: var(--ink-2); font: 400 15px/1.5 var(--sans); }
.apps .none { color: var(--cream-2); font-size: 16px; margin-top: 18px; }
.make { margin-top: 22px; padding: 18px; border: 1px solid var(--rule); background: rgba(10, 16, 36, 0.55); display: grid; gap: 14px; max-width: 640px; }
.make[hidden] { display: none; }
.make label { display: grid; gap: 6px; font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.make input, .make select { min-height: 44px; padding: 0 12px; border: 1px solid rgba(240, 230, 207, 0.45); background: #05080f; color: var(--cream); font: 400 16px/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.make .row { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; }
.links { margin-top: 10px; display: flex; gap: 10px 22px; flex-wrap: wrap; }
.links a { color: var(--cream-2); }
.r-wrap { position: relative; z-index: 2; }
[hidden] { display: none !important; }