/* Account application layer. Shared shell primitives remain in the canonical brand/components.css. */
.account-main { max-width: 78rem; }
.account-main h1, .account-main h2, .account-main h3 { letter-spacing: -0.025em; }
.eyebrow, .card-kicker, .stat-label { color: var(--cn-color-link); font-size: .78rem; font-weight: 600; letter-spacing: .1em; margin: 0 0 var(--cn-space-2); text-transform: uppercase; }
.auth-hero { margin: 0 auto var(--cn-space-8); max-width: 58rem; text-align: center; }
.auth-hero h1 { margin-left: auto; margin-right: auto; }
.auth-hero .account-intro { margin-left: auto; margin-right: auto; }
.auth-proof { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: var(--cn-space-8) auto 0; max-width: 42rem; text-align: left; }
.auth-proof div { background: var(--cn-color-ink); display: grid; gap: .35rem; padding: var(--cn-space-3); }
.auth-proof div:first-child { border-radius: var(--cn-radius-control) 0 0 var(--cn-radius-control); }
.auth-proof div:last-child { border-radius: 0 var(--cn-radius-control) var(--cn-radius-control) 0; }
.auth-proof strong { color: var(--cn-color-leaf); font-family: var(--cn-font-mono); font-size: .76rem; }
.auth-proof span { color: var(--cn-color-panel); font-size: .86rem; line-height: 1.25; }
.auth-grid { margin: 0 auto; max-width: 66rem; }
.auth-card { min-height: 25rem; }
.auth-card h2 { margin-bottom: var(--cn-space-2); }
.form-heading { font-size: 1.05rem; margin: var(--cn-space-6) 0 0; }
.accent-card { background: var(--cn-color-mint); }
.mode-banner { align-items: center; background: var(--cn-color-panel); border: 1px solid var(--cn-color-line); color: var(--cn-color-muted); display: flex; font-size: .86rem; gap: .55rem; margin: var(--cn-space-6) auto 0; max-width: 66rem; padding: .65rem .8rem; }
.mode-banner strong { color: var(--cn-color-ink); }
.mode-banner.inline { border: 0; margin: var(--cn-space-6) 0 0; padding: 0; }
.mode-dot { background: var(--cn-color-amber); border-radius: 50%; display: inline-block; flex: 0 0 auto; height: .5rem; width: .5rem; }
.form-field { margin-top: var(--cn-space-5); }
.form-field label { font-size: .92rem; }
/* 60ch holds the field-matching hint to a ~70-character measure; unconstrained it ran the full
   1132 px of the card at 1440 (~174 characters a line). text-wrap: pretty stops the shorter hints
   orphaning their last word against that new limit, and is ignored where unsupported. */
.field-hint { color: var(--cn-color-muted); font-size: .8rem; line-height: 1.4; margin: .45rem 0 0; max-width: 60ch; text-wrap: pretty; }
.field-hint code { color: var(--cn-color-ink); font-size: .9em; white-space: nowrap; }
.auth-card .notice { margin: var(--cn-space-4) 0 0; }
.auth-card form + form { margin-top: var(--cn-space-5); }

@media (min-width: 34.01rem) {
  .auth-card { display: flex; flex-direction: column; }
  .auth-card > form:not([hidden]) { display: flex; flex: 1; flex-direction: column; }
  .auth-card > form:not([hidden]) .actions { margin-top: auto; }
}

.dashboard-heading { align-items: end; display: flex; gap: var(--cn-space-8); justify-content: space-between; margin-bottom: var(--cn-space-8); }
.dashboard-heading h1 { margin-bottom: var(--cn-space-2); }
.dashboard-heading .account-intro { margin-bottom: 0; }
.dashboard-heading > .button { flex: 0 0 auto; }
.stat-strip { background: var(--cn-color-ink); color: var(--cn-color-panel); display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: var(--cn-space-6); }
.stat-strip > div { border-right: 1px solid rgba(255,255,255,.2); display: grid; gap: .1rem; padding: var(--cn-space-4) var(--cn-space-6); }
.stat-strip > div:last-child { border-right: 0; }
.stat-strip .stat-label { color: var(--cn-color-leaf); margin: 0; }
.stat-strip strong { font-family: var(--cn-font-display); font-size: 1.65rem; font-weight: 600; }
.upload-card { background: var(--cn-color-mint); margin-bottom: var(--cn-space-6); }
.section-heading { align-items: flex-start; display: flex; gap: var(--cn-space-4); justify-content: space-between; margin-bottom: var(--cn-space-5); }
.section-heading h2 { margin-bottom: .25rem; }
.section-heading p { margin-bottom: 0; }
.step-badge, .count-badge, .receipt-symbol { align-items: center; background: var(--cn-color-ink); color: var(--cn-color-leaf); display: inline-flex; flex: 0 0 auto; font-family: var(--cn-font-mono); font-size: .76rem; justify-content: center; min-height: 2rem; min-width: 2rem; padding: .25rem .5rem; }
.count-badge { border-radius: 999px; }
.receipt-symbol { border-radius: 50%; font-size: 1.1rem; }
/* The file picker is the only control on this card that used to paint an OS default widget,
   directly above "Continue to checkout". The real <input type="file"> is still the focusable,
   labelled control -- it is moved offscreen rather than display:none so it keeps keyboard and
   assistive-tech behaviour -- and .drop-field-target is a second <label for> that carries the
   visible surface. The focus ring is forwarded from the input to that surface. */
.drop-field { margin-top: var(--cn-space-4); }
.drop-field-label { display: block; font-size: 1rem; margin-bottom: .35rem; }
.drop-field-input { height: .1px; opacity: 0; position: absolute; width: .1px; }
.drop-field-target { align-items: center; background: var(--cn-color-panel); border: var(--cn-stroke) dashed var(--cn-color-ink); cursor: pointer; display: flex; gap: var(--cn-space-4); padding: var(--cn-space-4); }
.drop-field-target:hover { background: var(--cn-color-mint); }
.drop-field-input:focus + .drop-field-target { outline: var(--cn-stroke) solid var(--cn-color-ink); outline-offset: 3px; }
.drop-field-copy { display: grid; gap: .1rem; min-width: 0; }
.drop-field-copy strong { font-size: .92rem; overflow-wrap: anywhere; }
.drop-field-copy .muted { font-size: .78rem; }
.drop-field-action { align-items: center; border: var(--cn-stroke-small) solid var(--cn-color-ink); display: inline-flex; flex: 0 0 auto; font-size: .82rem; justify-content: center; margin-left: auto; min-height: 2.75rem; padding: 0 var(--cn-space-4); }
.offer-grid { border: 0; display: grid; gap: var(--cn-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--cn-space-5); padding: 0; }
.offer-card { background: var(--cn-color-panel); border: 1px solid var(--cn-color-line); cursor: pointer; display: flex; gap: .7rem; padding: var(--cn-space-4); }
.offer-card:has(input:checked) { background: var(--cn-color-leaf); border-color: var(--cn-color-ink); }
.offer-card input { accent-color: var(--cn-color-ink); flex: 0 0 auto; margin-top: .2rem; width: auto; }
.offer-card span { display: grid; gap: .35rem; min-width: 0; }
.offer-card small { color: var(--cn-color-muted); font-size: .78rem; }
/* Muted is tuned for the panel background (6.99:1) and collapses to 2.86:1 on the leaf fill the card
   takes when checked -- below the 4.5:1 floor for text this size. Selecting Starter therefore made
   Starter's own limits the least readable line on the card. Ink on leaf is 7.37:1. */
.offer-card:has(input:checked) small { color: var(--cn-color-ink); }
/* Until 2026-08-30 a closed offer was marked by its disabled radio and nothing else: the card kept the
   panel fill, the pointer cursor and full-strength ink, so "you cannot start this" rested entirely on
   one native control the width of a fingernail. `opacity` is the tempting fix and is refused here --
   it scales text contrast down with the rest, and `small` is already at 6.99:1, not far above the
   4.5:1 floor. Fill, border style and cursor carry it instead, so every colour on the card stays a
   token that already passes. */
.offer-card.unavailable { background: var(--cn-color-canvas); border-style: dashed; cursor: not-allowed; }
.offer-card.unavailable strong { color: var(--cn-color-muted); }
.upload-card > form > label { display: grid; gap: .35rem; margin-top: var(--cn-space-4); }
.upload-card textarea { background: var(--cn-color-panel); border: var(--cn-stroke) solid var(--cn-color-ink); border-radius: var(--cn-radius-control); color: var(--cn-color-ink); font: 400 1rem/1.4 var(--cn-font-body); min-height: 7rem; padding: var(--cn-space-2) var(--cn-space-3); resize: vertical; width: 100%; }
.refund { margin-top: .45rem; }
.upload-mark { align-items: center; background: var(--cn-color-leaf); border: 2px solid var(--cn-color-ink); border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: 1.4rem; height: 2.5rem; justify-content: center; width: 2.5rem; }
/* Not space-between: the span beside this button states what the press charges, and at 1440 that
   pushed the charge statement 800px away from the control it describes, against the card's far edge.
   A disclosure the eye has to travel to is decoration. Keep it beside the button at every width. */
.upload-card .actions { align-items: center; }
.upload-card .actions .muted { line-height: 1.4; }
.terms-link { color: var(--cn-color-link); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.terms-link:focus-visible { outline: 4px solid var(--cn-color-leaf); outline-offset: 3px; }
/* Two independent columns, not one shared row grid. Cards must size to their content — a row-spanning card stretched to its whole span renders as a bordered box holding one line and a void — but under a shared grid that left the rest of the row empty whenever one card was shorter than its opposite number, opening a 264px hole between Jobs and Billing at 1440. Each column now stacks its own cards. Both failure modes are gated in scripts/browser-e2e-test-mode.mjs. */
.dashboard-grid { align-items: start; display: grid; gap: var(--cn-space-6); grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); }
.dashboard-grid .card { min-width: 0; }
.dashboard-col { align-content: start; display: grid; gap: var(--cn-space-6); min-width: 0; }
.job-list { display: grid; gap: 1px; }
.job-card { border-top: 1px solid var(--cn-color-line); padding: var(--cn-space-4) 0; }
.job-card:first-child { border-top: 0; padding-top: 0; }
.job-card-main { align-items: center; display: flex; gap: var(--cn-space-4); justify-content: space-between; }
.job-title-row { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; }
.job-title-row h3 { font-size: 1.05rem; margin: 0; }
.job-title-row + p { font-size: .86rem; margin: .35rem 0 0; }
.text-button, .download-link { align-items: center; background: transparent; border: 0; box-shadow: none; color: var(--cn-color-link); cursor: pointer; display: inline-flex; font-size: .86rem; font-weight: 600; padding: .25rem 0; text-decoration: underline; text-underline-offset: .15em; }
.text-button:hover, .download-link:hover { background: transparent; color: var(--cn-color-amber); text-decoration: underline; }
.job-detail { border-left: 3px solid var(--cn-color-leaf); margin: var(--cn-space-4) 0 0 .2rem; padding: .1rem 0 .1rem var(--cn-space-4); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { align-items: flex-start; display: flex; gap: .7rem; padding: .4rem 0; }
.timeline-dot { background: var(--cn-color-leaf); border: 1px solid var(--cn-color-ink); border-radius: 50%; flex: 0 0 auto; height: .7rem; margin-top: .4rem; width: .7rem; }
.timeline p { font-size: .82rem; margin: .15rem 0 0; text-transform: capitalize; }
.pill { border: 0; font-size: .76rem; padding: .25rem .55rem; }
.pill.tone-success { background: var(--cn-color-leaf); }
.pill.tone-error { background: #f3c7c3; }
.pill.tone-loading { background: #f6d4f0; }
.pill.tone-quiet { background: var(--cn-color-line); }
.file-list, .manifest-list, .receipt-list { list-style: none; margin: 0; padding: 0; }
.file-list li, .manifest-row, .receipt-list li { align-items: center; border-top: 1px solid var(--cn-color-line); display: flex; gap: .7rem; padding: .75rem 0; }
.file-list li:first-child, .manifest-row:first-child, .receipt-list li:first-child { border-top: 0; padding-top: 0; }
.file-icon { align-items: center; background: var(--cn-color-ink); color: var(--cn-color-panel); display: inline-flex; flex: 0 0 auto; font-family: var(--cn-font-mono); font-size: .61rem; height: 2rem; justify-content: center; width: 2rem; }
.file-icon.ready { background: var(--cn-color-leaf-strong); }
.file-list li > div, .manifest-copy, .receipt-list li > div { display: grid; gap: .1rem; min-width: 0; }
.file-list strong, .manifest-copy strong, .receipt-list strong { font-size: .88rem; overflow-wrap: anywhere; }
.file-list .muted, .manifest-copy .muted, .receipt-list .muted { font-size: .77rem; }
.manifest-row { gap: .65rem; }
.manifest-copy { flex: 1 1 auto; }
.manifest-pending { color: var(--cn-color-muted); flex: 0 0 auto; font-size: .76rem; white-space: nowrap; }
.manifest-footnote { font-size: .84rem; margin: var(--cn-space-4) 0 0; }
.empty-panel { padding: var(--cn-space-6) 0 var(--cn-space-4); text-align: center; }
.empty-panel.compact { padding: var(--cn-space-2) 0 0; text-align: left; }
.empty-panel h3 { font-size: 1.2rem; margin: 0 0 .35rem; }
.empty-panel p { margin: 0 auto var(--cn-space-5); max-width: 60ch; }
.empty-panel.compact p { margin-bottom: 0; }
.empty-icon { align-items: center; background: var(--cn-color-mint); border: 2px solid var(--cn-color-ink); border-radius: 50%; display: flex; font-size: 1.45rem; height: 3rem; justify-content: center; margin: 0 auto var(--cn-space-4); width: 3rem; }
.support-card { align-items: flex-start; display: flex; gap: var(--cn-space-4); }
.support-card h2 { margin-bottom: .25rem; }
.support-card p { margin: 0 0 .5rem; }
.support-mark, .error-mark { align-items: center; background: var(--cn-color-amber); border: 2px solid var(--cn-color-ink); border-radius: 50%; color: white; display: inline-flex; flex: 0 0 auto; font-family: var(--cn-font-display); font-size: 1.35rem; height: 2.5rem; justify-content: center; width: 2.5rem; }
.notice { font-size: .88rem; }
.error-card { border-left: .4rem solid var(--cn-color-danger); }
.error-card h2 { margin-top: var(--cn-space-4); }
.upload-error { align-items:flex-start; background:#fff0ed; border-left:.4rem solid var(--cn-color-danger); display:flex; gap:var(--cn-space-4); margin-top:var(--cn-space-5); padding:var(--cn-space-4); }
.upload-error[hidden] { display:none; }
.upload-error h3 { margin:0 0 .25rem; }
.upload-error p { margin:0 0 var(--cn-space-3); }
.error-mark { background: var(--cn-color-danger); float: left; margin-right: var(--cn-space-3); }
/* Starter being unpurchasable is our fault, not the buyer's mistake, so this shares the
   upload-error frame but carries the Signal accent rather than Danger. */
.offer-notice { align-items:flex-start; background:var(--cn-color-panel); border-left:.4rem solid var(--cn-color-amber); display:flex; gap:var(--cn-space-4); margin:0 0 var(--cn-space-5); padding:var(--cn-space-4); }
.offer-notice h3 { margin:0 0 .25rem; }
.offer-notice p { margin:0 0 var(--cn-space-3); }
.notice-mark { align-items:center; background:var(--cn-color-amber); border:2px solid var(--cn-color-ink); border-radius:50%; color:white; display:inline-flex; flex:0 0 auto; font-family:var(--cn-font-display); font-size:1.35rem; height:2.5rem; justify-content:center; width:2.5rem; }
.loading-grid { grid-template-columns: repeat(3, 1fr); }
.loading-card { min-height: 15rem; }
.skeleton-button, .skeleton-line, .skeleton-block { animation: shimmer 1.4s ease-in-out infinite; background: var(--cn-color-line); display: block; }
.skeleton-button { height: 2.9rem; width: 10rem; }
.skeleton-line { height: .8rem; margin-bottom: .8rem; width: 65%; }
.skeleton-line.wide { width: 90%; }
.skeleton-block { height: 6rem; margin-top: var(--cn-space-6); }
@keyframes shimmer { 50% { opacity: .45; } }

@media (max-width: 48rem) {
  .dashboard-heading { align-items: flex-start; flex-direction: column; gap: var(--cn-space-4); }
  .dashboard-heading > .button { width: 100%; }
  .dashboard-grid, .loading-grid { grid-template-columns: 1fr; }
  /* The column wrappers dissolve so the five cards stack in document order under the single-column grid — no `order` overrides, so reading order and focus order stay identical. */
  .dashboard-col { display: contents; }
}
@media (max-width: 34rem) {
  .offer-grid { grid-template-columns: 1fr; }
  .auth-proof { grid-template-columns: 1fr; }
  .auth-proof div:first-child, .auth-proof div:last-child { border-radius: 0; }
  .auth-proof div:first-child { border-radius: var(--cn-radius-control) var(--cn-radius-control) 0 0; }
  .auth-proof div:last-child { border-radius: 0 0 var(--cn-radius-control) var(--cn-radius-control); }
  .stat-strip > div { padding: var(--cn-space-3); }
  .stat-strip strong { font-size: 1.35rem; }
  .upload-card .actions { align-items: stretch; flex-direction: column; }
  .drop-field-target { align-items: flex-start; flex-wrap: wrap; gap: var(--cn-space-3); }
  .drop-field-action { margin-left: 0; width: 100%; }
  .job-card-main { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .job-toggle { align-self: flex-start; }
}