/* File: web/assets/application.css — the application history (/application) and one
 * application in full (/application?url=…).
 *
 * Loaded AFTER /assets/style.css, which supplies the design tokens, nav, buttons and footer.
 * Nothing here redefines a token, so the page follows the site's light/dark theme for free —
 * same contract as jobs.css and legal.css.
 *
 * THE LAYOUT IS THE ARGUMENT. This is the page where a customer decides whether to trust that
 * a machine represented them well to an employer, so it borrows from both siblings: the record
 * cards of the job browser for the list, and the measured reading column of the legal pages
 * (~72ch) for the three long documents — the answers, the résumé and the job description. A
 * 20k-character description in a full-width box is technically "shown" and unreadable, which
 * is the whole difference between having the data and meeting the requirement.
 */

.ap-wrap { padding: 28px 0 72px; }

/* ── shared: heads, status chips, empty states ─────────────────────────────── */
.ap-head { margin: 0 0 22px; }
.ap-head h1 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.03em; margin: 0 0 8px; }
.ap-lede { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0; max-width: 74ch; }

/* The four-way split every outcome resolves to: sent / waiting on you / the employer or the
   posting / our own bug. Colour carries it, but never alone — each chip sits next to a full
   sentence, because a colour is not an explanation. */
.ap-chip { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ap-chip.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.ap-chip.you { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.ap-chip.them { color: var(--muted); background: var(--panel-2); }
.ap-chip.ours { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }

.ap-status { color: var(--muted); padding: 26px 4px; font-size: 15px; line-height: 1.6; }
.ap-status a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── list ──────────────────────────────────────────────────────────────────── */
.ap-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ap-tab { font: inherit; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; }
.ap-tab:hover { color: var(--text); background: var(--panel-2); }
.ap-tab[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); font-weight: 600; }
.ap-tab-count { color: var(--faint); margin-left: 6px; }

.ap-search { margin: 0 0 18px; }
.ap-search input { width: 100%; max-width: 460px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }

.ap-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ap-row { border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel); padding: 17px 19px; }
.ap-row.ap-ours { border-color: color-mix(in srgb, var(--err) 28%, var(--border)); }
.ap-row.ap-you { border-color: color-mix(in srgb, var(--amber) 32%, var(--border)); }

.ap-row-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.ap-row-title { font-size: 16.5px; line-height: 1.35; margin: 0 0 5px; letter-spacing: -.01em; }
.ap-row-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 0; font-size: 13.5px; color: var(--muted); }
.ap-row-company { font-weight: 600; color: var(--text); }
.ap-row-say { margin: 11px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 78ch; }
.ap-row-later { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); padding-left: 11px; border-left: 2px solid var(--border); }
.ap-row-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }
.ap-reply-badge { font-size: 12.5px; font-weight: 600; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); padding: 4px 10px; border-radius: 999px; }
.ap-note { margin: 0; font-size: 13px; color: var(--faint); }

.ap-pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 26px 0 0; }
.ap-pagelabel { font-size: 13.5px; color: var(--muted); }

/* ── detail ────────────────────────────────────────────────────────────────── */
.ap-back { display: inline-block; font-size: 13.5px; color: var(--muted); margin: 0 0 18px; }
.ap-back:hover { color: var(--accent); }

.ap-detail-head { border-bottom: 1px solid var(--border); padding: 0 0 22px; margin: 0 0 8px; }
.ap-detail-head h1 { font-size: clamp(21px, 3.4vw, 30px); letter-spacing: -.025em; margin: 0 0 9px; max-width: 30ch; }
.ap-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.ap-detail-meta .ap-row-company { font-size: 15px; }
/* The verdict, stated once, loudly, at the top: chip plus the full sentence beside it. */
.ap-verdict { display: flex; gap: 13px; align-items: flex-start; flex-wrap: wrap; padding: 15px 17px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel); }
.ap-verdict p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 70ch; color: var(--text); }
.ap-verdict-detail { margin: 8px 0 0 !important; font-size: 13px !important; color: var(--faint) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }

/* Each part of the record is its own section with its own rule above it, so the page reads
   as a document rather than as a dashboard. */
.ap-section { padding: 30px 0 0; margin: 30px 0 0; border-top: 1px solid var(--border-soft); }
.ap-section > h2 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 7px; }
.ap-section-note { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; max-width: 74ch; }

/* Timeline. Only steps with real evidence read as reached — nothing is inferred forward. */
.ap-timeline { list-style: none; margin: 0; padding: 0; }
.ap-step { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; padding: 0 0 20px; position: relative; }
.ap-step:last-child { padding-bottom: 0; }
.ap-step::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: -2px; width: 2px; background: var(--border); }
.ap-step:last-child::before { display: none; }
.ap-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); background: var(--panel); margin-top: 1px; z-index: 1; }
.ap-step-done .ap-dot { border-color: var(--ok); background: var(--ok); }
.ap-step-failed .ap-dot { border-color: var(--err); background: var(--err); }
.ap-step-skipped .ap-dot { border-style: dashed; }
.ap-step-label { font-size: 15px; font-weight: 600; margin: 0; }
.ap-step-pending .ap-step-label, .ap-step-skipped .ap-step-label { color: var(--faint); font-weight: 500; }
.ap-step-when { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.ap-step-note { font-size: 13.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.55; max-width: 72ch; }

/* Questions and answers — the artefact this page exists for. The question is set as a
   question; the answer is set as the thing that was actually said. */
.ap-qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 78ch; }
.ap-qa li { border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel); padding: 15px 17px; }
.ap-q { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--text); }
.ap-a { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 13px; border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ap-a-empty { color: var(--faint); font-style: italic; border-left-color: var(--border); }

/* The three long documents: a measured column, capped and scrollable, so one 20k blob cannot
   own the whole page. */
.ap-doc { max-width: 74ch; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel); max-height: 560px; overflow-y: auto; font-size: 15px; line-height: 1.7; }
.ap-doc p { margin: 0 0 13px; }
.ap-doc p:last-child { margin-bottom: 0; }
.ap-doc h3, .ap-doc h4, .ap-doc h5 { font-size: 15px; letter-spacing: -.01em; margin: 22px 0 9px; }
.ap-doc > :first-child { margin-top: 0; }
.ap-doc ul { margin: 0 0 14px; padding-left: 21px; }
.ap-doc li { margin: 0 0 7px; }
.ap-doc hr { border: 0; border-top: 1px solid var(--border-soft); margin: 18px 0; }
.ap-resume-doc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.ap-doc-meta { margin: 10px 0 0; font-size: 13px; color: var(--faint); }

/* Employer replies. */
.ap-emails { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 78ch; }
.ap-email { border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel); padding: 15px 17px; }
.ap-email-unsolicited { border-style: dashed; }
.ap-email-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.ap-email-stage { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.ap-email-when { font-size: 12.5px; color: var(--faint); }
.ap-email-subject { margin: 7px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.ap-email-from { margin: 4px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ap-email-snippet { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ap-email-say { margin: 8px 0 0; font-size: 13.5px; color: var(--faint); line-height: 1.55; }

/* What we cannot show. Deliberately plain and last: a transparency page that quietly omits
   its own blind spots is not one, but the gaps are not the headline either. */
.ap-gaps { border: 1px dashed var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel-2); padding: 18px 20px; max-width: 78ch; }
.ap-gaps h2 { font-size: 15px; margin: 0 0 10px; }
.ap-gaps ul { margin: 0; padding-left: 20px; }
.ap-gaps li { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.ap-gaps li:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .ap-doc { padding: 16px 15px; max-height: 440px; }
  .ap-verdict { flex-direction: column; gap: 9px; }
}