/* Account page composition. The canonical shared tokens, shell, fields, and controls live in components.css. */
.account-main { max-width: none; padding: 0; }
.account-main > .wrap { padding-left: var(--wp-gutter); padding-right: var(--wp-gutter); }
.auth-page { padding-bottom: var(--wp-16); padding-top: calc(var(--wp-16) + var(--wp-4)); }
.account-main h1, .account-main h2, .account-main h3 { letter-spacing: -0.02em; }
.account-main .label { display: block; }
.account-main .state-error { color: var(--wp-rust); }
.account-main .notice.state-error { border: 0; padding: 0; font-weight: 600; }

/* Sign out is a text button on the cobalt header, so it takes the header's cream type instead of
   the ink meant for paper. Hover and focus deepen the field behind it; the yellow ring stays. */
.site-header .account-signout { color: var(--wp-on-bio); flex: 0 0 auto; margin-right: calc(-1 * var(--wp-2)); padding-inline: var(--wp-2); }
.site-header .account-signout:hover, .site-header .account-signout:focus-visible { background: var(--wp-cobalt-deep); color: var(--wp-on-bio); }
@media (max-width: 600px) { .site-header .account-signout { margin-left: calc(-1 * var(--wp-2)); margin-right: 0; } }

/* Signed out: the limit is between the introduction and forms in reading order. */
.auth-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head panel" "limit panel" "keeps panel"; grid-template-rows: auto auto 1fr; gap: var(--wp-8) var(--wp-16); align-items: start; }
.acct-head { grid-area: head; display: grid; gap: var(--wp-4); }
.acct-head h1, .ws-head h1 { font-size: var(--wp-text-title); line-height: 1.05; margin: 0; max-width: 16ch; }
.acct-head .lede { font-size: var(--wp-text-lede); line-height: 1.5; max-width: 32em; }
.acct-head .jump { display: none; }
.auth-eligibility { border-left: var(--wp-rule-strong) solid var(--wp-rust); grid-area: limit; margin: 0; max-width: 34em; padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); }
.auth-eligibility .label { color: var(--wp-rust); margin-bottom: var(--wp-2); }
.before-upload { text-align: left; }
.acct-panel { grid-area: panel; background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); }
.acct-keeps { grid-area: keeps; }
.auth-eligibility[hidden], .acct-keeps[hidden], .acct-panel .auth-card[hidden] { display: none; }

/* Two form sections read as one framed panel. */
.acct-panel .auth-card { background: var(--wp-panel); border: 0; margin: 0; min-height: 0; padding: var(--wp-8); }
.acct-panel .auth-card + .auth-card { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.acct-panel .card-kicker { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: .06em; margin-bottom: var(--wp-2); text-transform: uppercase; }
.auth-card header { align-items: start; border: 0; display: grid; gap: var(--wp-2); padding: 0; }
.auth-card h2 { font-size: 1.75rem; line-height: 1.1; margin: 0 0 var(--wp-6); }
.auth-card form { display: grid; gap: var(--wp-6); margin: 0; }
.auth-card form[hidden] { display: none; }
.auth-card .form-field { gap: var(--wp-2); margin: 0; }
.auth-card .form-field label { font-weight: 600; }
.auth-card .form-field label small { color: var(--wp-muted); font-size: 1rem; font-weight: 400; }
.auth-card .field-hint { color: var(--wp-muted); font-size: 1rem; line-height: 1.5; margin: 0; }
.auth-card .notice { color: var(--wp-muted); font-size: 1rem; margin: 0; min-height: 0; }
.auth-card .notice.state-error { color: var(--wp-rust); font-weight: 600; }
.auth-card .form-heading { font-size: 1.25rem; margin: 0; }
.auth-card .actions { align-items: center; gap: var(--wp-3) var(--wp-6); margin: 0; }
.auth-card .actions .btn { min-width: 12rem; }
.auth-card .text-button { align-self: center; }

details.note { margin-top: var(--wp-3); }
details.note summary { align-items: center; color: var(--wp-ink); cursor: pointer; display: inline-flex; font-weight: 600; list-style: none; min-height: var(--wp-tap); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
details.note summary::-webkit-details-marker { display: none; }
details.note summary::after { content: "+"; font-family: var(--wp-font-mono); margin-left: .5em; text-decoration: none; }
details.note[open] summary::after { content: "−"; }
details.note p { color: var(--wp-muted); }

.auth-starter-route { margin-top: var(--wp-4); max-width: 34em; text-align: left; }
.starter-buy-route { border-bottom: var(--wp-rule) solid var(--wp-hair); border-top: var(--wp-rule) solid var(--wp-ink); display: grid; gap: var(--wp-3); padding: var(--wp-4) 0; }
.starter-buy-route h3 { font-size: 1.25rem; margin: 0; }
.starter-buy-route p { margin: 0; }
.starter-buy-route .btn, .starter-buy-route .text-button { justify-self: start; }
.offer-notice { margin: var(--wp-4) 0; }
.offer-notice h3, .offer-notice p { margin: 0 0 var(--wp-3); }

/* What the workspace keeps: three numbered rows with hairline rules. */
.auth-proof { border-top: var(--wp-rule) solid var(--wp-ink); list-style: none; margin: var(--wp-3) 0 0; padding: 0; }
.auth-proof li { border-bottom: var(--wp-rule) solid var(--wp-hair); display: grid; gap: var(--wp-4); grid-template-columns: 2.5rem minmax(0, 1fr); padding: var(--wp-4) 0; }
.auth-proof .n { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.6 var(--wp-font-mono); padding-top: 2px; }
.auth-proof p { margin: 0; }
.auth-proof .mono { font-size: .9375rem; }

/* Signed in: the stat strip is a ruled ledger beside the account heading. */
.workspace-top { padding-top: var(--wp-12); }
.ws-head { align-items: end; display: grid; gap: var(--wp-4) var(--wp-16); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: var(--wp-12); }
.ws-head .label { grid-column: 1 / -1; }
.stat-strip { border-bottom: var(--wp-rule) solid var(--wp-ink); border-top: var(--wp-rule-strong) solid var(--wp-ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.stat-strip li { padding: var(--wp-3) var(--wp-4) var(--wp-3) 0; }
.stat-strip li + li { border-left: var(--wp-rule) solid var(--wp-hair); padding-left: var(--wp-4); }
.stat-strip strong { display: block; font: 600 2rem/1.1 var(--wp-font-display); font-variant-numeric: tabular-nums; }
.stat-strip span { color: var(--wp-muted); font-size: var(--wp-text-meta); }

.panel { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); }
.panel-part { padding: var(--wp-8); }
.panel-part > header { align-items: start; border: 0; display: grid; gap: var(--wp-2); margin-bottom: var(--wp-6); padding: 0; }
.panel-part > header h2 { margin: 0; }
.panel-part > header .notice { color: var(--wp-muted); margin: 0; }
.job-panel { margin-bottom: var(--wp-16); }
/* The note sits between the file picker and the submit button in source order, so a phone reads
   the columns, the files, the rule, then the action. On wide screens it moves to the right column. */
#new-job-form { align-items: start; display: grid; gap: var(--wp-6) var(--wp-16); grid-template-areas: "fields limit" "actions limit"; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; }
#new-job-form[hidden] { display: none; }
#new-job-form .fields { grid-area: fields; }
#new-job-form .limit { grid-area: limit; }
#new-job-form .actions { grid-area: actions; }
#new-job-form .fields { display: grid; gap: var(--wp-6); }
#new-job-form .field { display: grid; gap: var(--wp-2); margin: 0; position: relative; }
#new-job-form .field > label, #new-job-form .field-label { font-weight: 600; }
#new-job-form .field > label small { color: var(--wp-muted); font-size: 1rem; font-weight: 400; }
#new-job-form .field-hint { color: var(--wp-muted); font-size: 1rem; line-height: 1.5; margin: 0; }
#new-job-form .limit { position: sticky; top: var(--wp-6); }
#new-job-form .limit .label { color: var(--wp-rust); display: block; margin-bottom: var(--wp-2); }
#new-job-form .limit p { margin: 0 0 var(--wp-3); }
#new-job-form .limit p:last-child { margin-bottom: 0; }
#new-job-form fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
#new-job-form .offer-grid { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; }
#new-job-form .offer-card { align-items: center; background: var(--wp-cited); border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: var(--wp-radius); cursor: pointer; display: grid; gap: var(--wp-4); grid-template-columns: var(--wp-tap) minmax(0, 1fr); min-height: var(--wp-tap); padding: var(--wp-3) var(--wp-4); }
#new-job-form .offer-card:has(input:checked) { background: var(--wp-cited); border-color: var(--wp-ink); }
#new-job-form .offer-card > span { display: grid; gap: var(--wp-1); }
#new-job-form .offer-card input { appearance: none; background: radial-gradient(circle, transparent 0 7px, var(--wp-ink) 7px 9px, transparent 9px); border: 0; border-radius: 50%; cursor: pointer; height: var(--wp-tap); margin: calc(-1 * var(--wp-3)) 0 calc(-1 * var(--wp-3)) calc(-1 * var(--wp-4)); padding: 0; width: var(--wp-tap); }
#new-job-form .offer-card input:checked { background: radial-gradient(circle, var(--wp-ink) 0 4px, transparent 4px 7px, var(--wp-ink) 7px 9px, transparent 9px); }
.offer-card small { color: var(--cn-color-muted); }
.offer-card:has(input:checked) small { color: var(--cn-color-ink); }
.offer-card.unavailable { background: var(--wp-panel); border-style: dashed; cursor: not-allowed; }
.offer-card.unavailable strong { color: var(--wp-muted); }
#new-job-form textarea { min-height: 7.5rem; resize: vertical; }
.drop-field { margin: 0; }
.drop-field-label { display: block; margin: 0; }
.drop-field-input { height: .1px; left: 0; opacity: 0; position: absolute; top: 0; width: .1px; }
.drop-field-target { align-items: center; background: var(--wp-paper); border: var(--wp-rule-strong) dashed var(--wp-ink); cursor: pointer; display: grid; gap: var(--wp-4); grid-template-columns: auto minmax(0, 1fr) auto; min-height: 6rem; padding: var(--wp-4); }
.drop-field-target:hover { background: var(--wp-panel); }
.drop-field-input:focus + .drop-field-target { outline: 3px solid var(--wp-focus); outline-offset: 3px; }
.drop-field-target .ext { border: var(--wp-rule) solid var(--wp-ink); font: 500 var(--wp-text-cite)/1 var(--wp-font-mono); padding: var(--wp-2); }
.drop-field-copy { display: grid; gap: var(--wp-1); min-width: 0; }
.drop-field-copy strong { color: var(--wp-ink); display: block; overflow-wrap: anywhere; }
.drop-field-copy > span { color: var(--wp-muted); }
.drop-field-action { color: var(--wp-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--wp-rule-strong); text-underline-offset: 5px; }
#new-job-form .actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wp-3) var(--wp-6); margin: 0; }
.actions p { margin: 0; }
#new-job-form .actions button { min-width: 12rem; }
/* A disabled control must not look pressable. The shared button rule has no disabled state, so the
   refused-upload submit, "Preparing…" downloads and a pending refund kept the Bio fill or underline. */
#app button:disabled { color: var(--wp-muted); cursor: not-allowed; }
#app button:disabled:not(.secondary):not(.text-button):not(.download-link), #app button:disabled:not(.secondary):not(.text-button):not(.download-link):hover { background: var(--wp-paper); border-color: var(--wp-muted); border-style: dashed; text-decoration: none; }
#app .text-button:disabled, #app .download-link:disabled { text-decoration: none; }
#new-job-form .actions .muted { font-size: 1rem; line-height: 1.5; }
.terms-link { color: var(--cn-color-link); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.terms-link:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }
.upload-error { border-left: var(--wp-rule-strong) solid var(--wp-rust); margin-top: var(--wp-6); padding-left: var(--wp-4); }
.upload-error[hidden] { display: none; }
.upload-error h3, .upload-error p { margin: 0 0 var(--wp-3); }
.job-panel > .panel-part > .notice { color: var(--wp-muted); }

/* Jobs, downloads, uploads and receipts are ruled rows rather than cards. */
.ws-section { border-top: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-12) 0 var(--wp-16); }
.ws-split { align-items: start; display: grid; gap: var(--wp-12) var(--wp-16); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ws-split > div > header { align-items: baseline; display: flex; gap: var(--wp-4); justify-content: space-between; margin-bottom: var(--wp-4); }
.ws-split > div > header h2 { margin: 0; }
.ws-split > div > header .count { color: var(--wp-muted); font: 500 1rem/1 var(--wp-font-mono); }
.ws-split > div > p.sub { color: var(--wp-muted); margin: calc(-1 * var(--wp-2)) 0 var(--wp-4); }
.rows { border-top: var(--wp-rule) solid var(--wp-ink); list-style: none; margin: 0; padding: 0; }
.rows > li { align-items: center; border-bottom: var(--wp-rule) solid var(--wp-hair); display: grid; gap: var(--wp-1) var(--wp-4); min-height: var(--wp-tap); padding: var(--wp-3) 0; }
.rows .meta { color: var(--wp-muted); font-size: var(--wp-text-meta); }
.rows .mono { font-size: .9375rem; }
.rows .num { font: 500 .9375rem/1.3 var(--wp-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.jobs > li { grid-template-columns: minmax(0, 1fr) 10rem auto; }
.jobs .state { font-size: var(--wp-text-meta); font-weight: 600; }
.jobs .state.wait { color: var(--wp-muted); font-weight: 500; }
.jobs .state.bad { color: var(--wp-rust); }
.history { border-left: var(--wp-rule) solid var(--wp-ink); grid-column: 1 / -1; list-style: none; margin: var(--wp-2) 0 0; padding: 0 0 0 var(--wp-4); }
.history li { display: grid; gap: var(--wp-4); grid-template-columns: 7.5rem minmax(0, 1fr); padding: var(--wp-1) 0; font-size: var(--wp-text-meta); }
.history .mono { color: var(--wp-muted); font-size: var(--wp-text-cite); padding-top: 2px; }
.job-detail { grid-column: 1 / -1; }
.job-detail[hidden] { display: none; }
.job-actions, .refund-status { grid-column: 1 / -1; }
.refund-status { margin: var(--wp-3) 0; }
.refund-status h4 { font-size: 1rem; margin: 0 0 var(--wp-2); }
.refund-status p { margin: 0 0 var(--wp-2); }
.refund-support { min-height: 48px; }
.files5 > li { grid-template-columns: minmax(0, 1fr) 5rem 7rem; }
.files5 .wait { color: var(--wp-muted); font-size: var(--wp-text-meta); grid-column: 2 / -1; text-align: right; }
.files5 .download-link { font-size: var(--wp-text-meta); justify-self: end; }
.uploads > li { grid-template-columns: minmax(0, 1fr) 5rem 8rem; }
.uploads .meta { text-align: right; }
.receipts > li { grid-template-columns: minmax(0, 1fr) 6rem 5rem; }
.empty { border-top: var(--wp-rule) solid var(--wp-ink); color: var(--wp-muted); padding: var(--wp-4) 0; }
.support { border-top: var(--wp-rule) solid var(--wp-ink); margin: var(--wp-8) 0 0; padding-top: var(--wp-8); }
.support a { color: var(--wp-ink); }
.state-success { border-left-color: var(--wp-deep); }

/* The administrator screen keeps its existing card layout and content. */
.dashboard-grid { align-items: start; display: grid; gap: var(--wp-6); grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); }
.dashboard-grid .card { min-width: 0; }
.section-heading { align-items: flex-start; display: flex; gap: var(--wp-4); justify-content: space-between; margin-bottom: var(--wp-5); }
.section-heading h2 { margin: 0; }
.count-badge { color: var(--wp-muted); font: 500 1rem/1 var(--wp-font-mono); }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li { border-top: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-4) 0; }
.job-list li:first-child { border-top: 0; padding-top: 0; }
.timeline { border-left: var(--wp-rule) solid var(--wp-ink); list-style: none; margin: var(--wp-4) 0 0; padding-left: var(--wp-4); }
.timeline li { padding: var(--wp-2) 0; }
.timeline-dot { display: none; }
.account-error { padding: var(--wp-16) 0; }
.account-error .label { margin-bottom: var(--wp-4); }
.account-error h1 { font-size: var(--wp-text-title); margin: 0 0 var(--wp-4); }
.account-error h2 { font-size: 1.75rem; margin: var(--wp-8) 0 var(--wp-3); }
.dashboard-loading { padding: var(--wp-16) 0; }
.dashboard-loading .label { margin-bottom: var(--wp-4); }
.dashboard-loading h1 { font-size: var(--wp-text-title); margin: 0 0 var(--wp-4); }
.dashboard-loading .account-intro { color: var(--wp-muted); margin: 0; }
.mode-banner { align-items: center; color: var(--wp-muted); display: flex; font-size: 1rem; gap: var(--wp-2); margin-top: var(--wp-4); }
.mode-banner strong { color: var(--wp-ink); }
.mode-dot { background: var(--wp-bio); border-radius: 50%; display: inline-block; flex: 0 0 auto; height: .5rem; width: .5rem; }

@media (max-width: 900px) {
  .auth-page { padding-top: var(--wp-8); }
  .acct-head { gap: var(--wp-3); }
  .acct-head > p { margin: 0; }
  .auth-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "limit" "panel" "keeps"; gap: calc(var(--wp-8) + var(--wp-1)); }
  .acct-head .jump { display: block; }
  .ws-head, #new-job-form, .ws-split { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  #new-job-form { grid-template-areas: "fields" "limit" "actions"; grid-template-rows: none; }
  #new-job-form .limit { position: static; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .account-main { padding-bottom: var(--wp-12); }
  .account-main > .wrap { padding-left: var(--wp-gutter); padding-right: var(--wp-gutter); }
  .workspace-top { padding-top: var(--wp-8); }
  .acct-panel .auth-card { padding: var(--wp-6) var(--wp-4); }
  .auth-card .actions { align-items: flex-start; flex-direction: column; }
  .auth-card .actions .btn { width: 100%; }
  .stat-strip strong { font-size: 1.5rem; }
  .job-panel { margin-bottom: var(--wp-12); }
  #new-job-form .actions { align-items: stretch; flex-direction: column; }
  #new-job-form .actions button { width: 100%; }
  .jobs > li { grid-template-columns: minmax(0, 1fr) auto; }
  .jobs .when { grid-column: 1; grid-row: 2; }
  .jobs .job-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .files5 > li, .uploads > li { grid-template-columns: minmax(0, 1fr) auto; }
  .files5 .num, .uploads .num { display: none; }
  .uploads .meta { text-align: right; }
  .receipts > li { grid-template-columns: minmax(0, 1fr) auto; }
  .receipts .status { grid-column: 1; }
  .history li { gap: 0; grid-template-columns: minmax(0, 1fr); }
  .drop-field-target { grid-template-columns: auto minmax(0, 1fr); }
  .drop-field-action { grid-column: 1 / -1; }
  .ws-section { padding-bottom: var(--wp-12); }
}