/* 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; }
.field-hint { color: var(--cn-color-muted); font-size: .8rem; line-height: 1.4; margin: .45rem 0 0; }
.auth-card .notice { margin: var(--cn-space-4) 0 0; }
.auth-card form + form { margin-top: var(--cn-space-5); }
.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; }
.drop-field { align-items: center; background: var(--cn-color-panel); border: 2px dashed var(--cn-color-ink); display: flex; gap: var(--cn-space-4); padding: 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; }
.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; }
.drop-field label { display: block; font-weight: 600; margin-bottom: .2rem; }
.drop-field input { background: transparent; border: 0; min-height: auto; padding: 0; }
.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; }
.upload-card .actions { align-items: center; justify-content: space-between; }
/* 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: 42ch; }
.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); }
.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 { align-items: flex-start; flex-wrap: wrap; }
  .drop-field input { width: calc(100% - 3.2rem); }
  .job-card-main { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .job-toggle { align-self: flex-start; }
}