/* Jobba owner web canary — presentation.
 *
 * Plain CSS, no build step, no framework, no external font or asset. The
 * accepted Jobba calm product system: a warm dark-brown shell (header, nav
 * rail, footer) wrapped around a cream working canvas, with coral and clay
 * carrying every action. The six brand anchors below are the identity —
 * #18130F ink, #EFE7DD paper, #D46C50 coral, #B75945 clay, #DBA28E clay
 * light, #7897A5 slate — and every other value here is derived from them.
 *
 * Layout is mobile-first with two explicit, named breakpoints:
 *   base           phone      (< 700px)   one column, one scrolling nav strip
 *   min-width:700  tablet     (700-1199)  two-column composition, action bar
 *   min-width:1200 desktop    (>= 1200)   nav rail plus dense multi-column work area
 *
 * Accessibility choices that are load-bearing, not decoration: a visible
 * focus ring on every interactive element, a skip link, disabled controls
 * that stay readable, status colours that are never the only signal, and a
 * reduced-motion branch that removes the only animation on the page.
 */

:root {
  /* ---- brand anchors (exact, from the repository palette) ---- */
  --ink:           #18130F;
  --paper:         #EFE7DD;
  --coral:         #D46C50;
  --clay:          #B75945;
  --clay-light:    #DBA28E;
  --slate:         #7897A5;

  /* ---- shell: the warm dark-brown frame ---- */
  --shell:         var(--ink);
  --shell-raised:  #211A15;
  --shell-3:       #2C231C;
  --shell-line:    #3C2E25;
  --shell-text:    var(--paper);
  --shell-soft:    #D8C9BA;   /* ~11:1 on the shell */
  --shell-muted:   #B29C8A;   /* ~6.8:1 on the shell */

  /* ---- canvas: the cream working surfaces ---- */
  --canvas:        #E4DACE;
  --surface:       var(--paper);
  --surface-raised:#F7F2EB;
  --field:         #FFFCF7;
  --line:          #D5C6B5;
  --line-strong:   #B9A793;

  --text:          #18130F;   /* ~14.7:1 on paper */
  --text-soft:     #4A3B30;   /* ~8.9:1  on paper */
  --muted:         #6B5747;   /* ~5.6:1  on paper */

  /* ---- actions ---- */
  --coral-bright:  #E28063;   /* hover; ink label stays ~6.4:1 */
  --clay-deep:     #A0432F;   /* link and deep-clay text, ~5.1:1 on paper */
  --on-coral:      var(--ink);
  --focus-ring:    var(--clay-deep);

  /* ---- status: four separate hues, never the only signal ---- */
  --ok:            #2F6A46;   /* the one green in the system: success only */
  --warning:       #A96A12;   /* rules and borders */
  --warning-ink:   #8A5510;   /* warning text on paper */
  --warning-soft:  #F6E9D2;
  --danger:        #8E2433;   /* deep crimson: never confusable with coral */
  --danger-soft:   #F6E0E2;
  --info:          var(--slate);
  --info-ink:      #4C6A78;
  --info-soft:     #E5ECEF;

  --radius:        12px;
  --radius-sm:     8px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --gap:           14px;
  --pad:           16px;
  --shadow-panel:  0 1px 0 rgba(24, 19, 15, .04), 0 14px 26px -22px rgba(24, 19, 15, .55);
}

* { box-sizing: border-box; }

html {
  background: var(--shell);
  /* Respect the reader's own text size; nothing here is locked to px roots. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  /* Document-flow column on phone and tablet: the working canvas takes the
     remaining height, so a short state keeps the footer at the bottom edge
     instead of stranding it mid-screen. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Display headings are heavy, compact and slightly italic; technical labels
   are mono. Both come from the system stack — nothing is downloaded. */
h1, h2, h3 {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 .4em;
}
h1 { font-size: 1.35rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .7em; }

a { color: var(--clay-deep); text-underline-offset: 2px; }
a:hover { color: var(--clay); }

.muted { color: var(--muted); }

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

/* The shared uppercase mono utility label, on every technical caption. */
.field-label, .detail-list dt, .tag, .score-bucket {
  font-family: var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------- focus and skip link ---------- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Browsers without :focus-visible still get a visible ring. */
:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* On the dark shell the clay ring keeps its own contrast against ink. */
.app-header :focus-visible, .app-nav :focus-visible, .app-footer :focus-visible {
  outline-color: var(--clay-light);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--coral);
  color: var(--on-coral);
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.live-region {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- page frame ---------- */
.app-header {
  flex: 0 0 auto;
  position: relative;
  background: linear-gradient(180deg, var(--shell-raised), var(--shell));
  color: var(--shell-text);
  border-bottom: 1px solid var(--shell-line);
  padding: 14px var(--pad) 13px;
}
/* One warm rule ties the dark shell to the cream canvas below it. */
.app-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--coral), var(--clay) 60%, transparent);
}
.app-identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
/* The wordmark: heavy, italic, tight — never abbreviated, never restyled. */
.app-mark {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: var(--shell-text);
}
.app-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--clay-light);
  padding-left: 10px;
  border-left: 2px solid var(--shell-line);
}
.app-scope {
  color: var(--shell-muted);
  font-size: .82rem;
  line-height: 1.45;
  margin: 5px 0 0;
  max-width: 62ch;
}

.app-nav {
  flex: 0 0 auto;
  background: var(--shell);
  border-bottom: 1px solid var(--shell-line);
  padding: 8px var(--pad);
  /* Phone and tablet keep one scrolling strip rather than three stacked rows
     of buttons pushing the current action off the first screen. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.nav-item { flex: 0 0 auto; }
.nav-button {
  appearance: none;
  background: var(--shell-3);
  color: var(--shell-soft);
  border: 1px solid var(--shell-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .92rem;
  white-space: nowrap;
  /* 44px minimum touch target on phones. */
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
}
.nav-button:hover { background: #392D24; color: var(--shell-text); }
.nav-button.is-current {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--coral);
  box-shadow: inset 0 -3px 0 var(--coral);
  font-weight: 700;
}

.app-main {
  background: var(--canvas);
  padding: var(--pad);
  display: grid;
  gap: var(--gap);
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
}
.app-main:focus { outline: none; }

.app-footer {
  flex: 0 0 auto;
  background: var(--shell);
  border-top: 1px solid var(--shell-line);
  padding: var(--pad);
  color: var(--shell-muted);
  font-size: .78rem;
  letter-spacing: 0;
  line-height: 1.45;
}
.app-footer p { margin: 0; }

.surface { display: grid; gap: var(--gap); align-content: start; }
.view { display: grid; gap: var(--gap); align-content: start; }

/* ---------- panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow-panel);
}
.panel-title { margin-top: 0; }
/* A short coral rule anchors every section head without adding chrome. */
.panel-title::after {
  content: "";
  display: block;
  width: 28px; height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--coral);
}
.panel-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.panel[data-operation-status] { border-left: 4px solid var(--info-ink); }
.panel[data-operation-status="completed"] { border-left-color: var(--ok); }
.panel[data-operation-status="cancelled"] { border-left-color: var(--warning); }
.panel[data-operation-status="failed"] { border-left-color: var(--danger); }
.panel-error {
  border: 2px solid var(--danger);
  background: var(--danger-soft);
}
.panel-error .panel-title { color: var(--danger); }
.panel-error .panel-title::after { background: var(--danger); }

/* ---------- the one next action ---------- */
.next-action {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--coral);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow-panel);
}
.next-action-title { margin-top: 0; font-size: 1.22rem; }
.next-action-hint { color: var(--text-soft); margin-bottom: 12px; }
.next-action-controls { display: flex; flex-wrap: wrap; gap: 8px; }

.button {
  appearance: none;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
}
.button:hover { background: var(--canvas); border-color: var(--clay); }
.button-primary {
  background: var(--coral);
  border: 1px solid var(--clay);
  color: var(--on-coral);
  font-weight: 750;
}
.button-primary:hover { background: var(--coral-bright); border-color: var(--clay); }
.button-primary:active { background: var(--clay); color: var(--paper); }
.button-quiet { background: transparent; border-color: transparent; color: var(--clay-deep); }
.button-quiet:hover { background: var(--canvas); border-color: var(--line-strong); }
/* Disabled must stay readable: the owner has to know what is unavailable. */
.button[disabled], .button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
  background: var(--canvas);
  color: var(--muted);
  border-color: var(--line-strong);
  border-style: dashed;
}

/* ---------- progress, notes ---------- */
.progress-indeterminate {
  display: inline-block;
  color: var(--text-soft);
  padding-left: 22px;
  position: relative;
}
.progress-indeterminate::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  border-top-color: transparent;
  animation: jobweb-spin 900ms linear infinite;
}
@keyframes jobweb-spin { to { transform: rotate(360deg); } }

.stale-note {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-left-width: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--warning-ink);
}
.failure-reason {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-left-width: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--danger);
}
.no-submit-note {
  border: 1px dashed var(--line-strong);
  background: var(--canvas);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
}
.counts {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--text-soft);
}
.required-profile-status {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--warning);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--text);
  font-weight: 700;
}

/* ---------- detail lists ---------- */
.detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 14px;
  font-size: .9rem;
}
.detail-list dt {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.9;
}
.detail-list dd {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--text);
  word-break: break-word;
}

/* ---------- fields ---------- */
.field { margin: 10px 0; }
.field-label {
  display: block;
  font-size: .68rem;
  color: var(--muted);
  margin-bottom: 5px;
}
.field-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.field-input:hover { border-color: var(--clay); }
.field-textarea { min-height: 180px; font-family: var(--mono); font-size: .88rem; line-height: 1.6; }
.field-hint { color: var(--muted); font-size: .82rem; margin: 5px 0 0; }
.field-input[disabled] { color: var(--muted); background: var(--canvas); border-style: dashed; }
.form-grid { display: grid; gap: 4px 14px; }
.filter-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.budget-summary { display:grid; gap:6px; margin:14px 0; padding:12px; background:var(--field); border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--mono); font-size:.84rem; }
.budget-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.budget-fields label { display:grid; gap:6px; font-weight:700; font-size:.84rem; }
.budget-confirm { display:flex; align-items:flex-start; gap:9px; margin-top:14px; font-size:.86rem; line-height:1.45; }
.budget-confirm input { margin-top:3px; }
.application-card { display: grid; gap: 8px; }
.application-card .field { border-top: 1px solid var(--line); padding-top: 10px; }
.application-closure { margin-top: 16px; padding: 14px; border: 1px solid var(--coral); background: var(--surface-raised); }

/* ---------- proposed facts ---------- */
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.fact {
  border: 1px solid var(--line);
  border-left: 4px solid var(--slate);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface-raised);
}
.fact.is-rejected { border-left-color: var(--line-strong); border-style: dashed; background: var(--canvas); }
.fact.is-edited { border-left-color: var(--clay); }
.fact.needs-input {
  border-color: var(--warning);
  border-left-color: var(--warning);
  background: var(--warning-soft);
}
.fact.needs-input .field-input { border-color: var(--warning); }
.fact-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fact-field {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}
.tag {
  font-size: .64rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.tag-edited { color: var(--clay-deep); border-color: var(--clay); background: #F6E7E1; }
.tag-rejected { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.fact-controls { display: flex; gap: 8px; flex-wrap: wrap; }

.evidence-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.evidence-item {
  border-left: 3px solid var(--info-ink);
  background: var(--info-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 6px 10px;
}
.evidence-locator {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--info-ink);
}
.evidence-quote { margin: 2px 0; font-style: italic; color: var(--text-soft); }
.evidence-source { font-size: .74rem; color: var(--muted); }
.evidence-missing {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-left-width: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--warning-ink);
}

/* ---------- Daily Loop dashboard ---------- */
.view-dashboard { max-width: 1180px; width: 100%; margin-inline: auto; }
.dashboard-hero {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 22px;
  color: var(--shell-text);
  background: linear-gradient(135deg, var(--shell-raised), var(--shell-3));
  border: 1px solid var(--shell-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.eyebrow, .count-label, .run-summary dt {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .68rem;
}
.eyebrow { margin: 0 0 5px; color: var(--clay-light); font-weight: 750; }
.dashboard-title { color: var(--paper); font-size: 1.55rem; }
.dashboard-lede { margin: 0; max-width: 68ch; color: var(--shell-soft); }
.dashboard-run { justify-self: start; }
.count-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.count-card {
  min-width: 0;
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel);
}
.count-label { display: block; min-height: 2.8em; color: var(--muted); line-height: 1.35; }
.count-value { display: block; margin-top: 6px; font-size: 1.75rem; line-height: 1; color: var(--clay-deep); }
.dashboard-grid { display: grid; gap: var(--gap); }
.run-summary { margin: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.run-summary div { min-width: 0; }
.run-summary dt { color: var(--muted); }
.run-summary dd { margin: 3px 0 0; word-break: break-word; }
.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
}
.status-completed { color: var(--ok); border-color: var(--ok); }
.status-running, .status-pending { color: var(--info-ink); border-color: var(--info-ink); }
.status-partial { color: var(--warning-ink); border-color: var(--warning); }
.status-failed { color: var(--danger); border-color: var(--danger); }
.schedule-state { font-weight: 750; }
.source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--info-ink);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.source-row[data-source-status="completed"] { border-left-color: var(--ok); }
.source-row[data-source-status="failed"] { border-left-color: var(--danger); }
.source-count { color: var(--muted); font-family: var(--mono); font-size: .78rem; }
.source-error { grid-column: 1 / -1; color: var(--danger); }
.technical-disclosure > summary {
  cursor: pointer;
  font-weight: 750;
  font-style: italic;
  font-size: 1.1rem;
}
.technical-disclosure[open] > summary { margin-bottom: 10px; }
.technical-disclosure .view-receipts { margin-top: var(--gap); }
.package-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* ---------- job cards ---------- */
.job-grid { display: grid; gap: var(--gap); }
.job {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  container-type: inline-size;
}
/* Status is carried by hue AND by a border weight AND by explicit wording. */
.job.is-stale { border-color: var(--warning); border-left-color: var(--warning); }
.job.is-decided { border-left-color: var(--ok); }
.job-head { display: grid; gap: 2px; }
/* A wide card puts the score in its own column; a narrow one stacks it under
   the company. This follows the card, not the window: the tablet queue is
   already two cards across. */
@container (min-width: 380px) {
  .job-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title   score"
      "company score";
    column-gap: 16px;
    align-items: start;
  }
  .job-title { grid-area: title; }
  .job-company { grid-area: company; }
  .job-score { grid-area: score; justify-self: end; align-self: center; margin: 0; }
}
.job-title { margin: 0; font-size: 1.02rem; }
.job-company { color: var(--muted); margin: 0; font-size: .86rem; }
.job-score {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 6px 0 0;
  font-family: var(--mono);
  white-space: nowrap;
}
.score-value { font-size: 1.45rem; color: var(--clay-deep); font-weight: 700; letter-spacing: -.02em; }
.score-bucket {
  font-size: .66rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--clay-light);
  border-radius: 999px;
  padding: 3px 9px;
}
.score-confidence { font-size: .72rem; color: var(--muted); }
.job-explanation { margin: 0; color: var(--text-soft); }
/* The raw posting text is reference material, not the review surface: it
   stays folded behind one toggle so the verdict, evidence, and the Save and
   Reject controls are all visible without scrolling past pages of ad copy.
   Opened, it becomes a bounded reading pane that scrolls inside the card. */
.job-description-empty { margin: 0; font-size: .86rem; }
.job-description summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clay-deep);
  padding: 4px 0;
}
.job-description-text {
  margin-top: 8px;
  padding: 12px 14px;
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: .86rem;
  line-height: 1.65;
  white-space: pre-line;
}
.job-hard-reject {
  color: var(--danger);
  border-left: 4px solid var(--danger);
  background: var(--danger-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 10px;
  margin: 0;
}
.job-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.job-posting { display: inline-flex; align-items: center; text-decoration: none; }

/* The review queue deliberately follows Jobdesktop's decision composition:
   one readable card, one bounded line length, and an action rail that remains
   reachable when a real posting is long. This is not the multi-card receipt
   inspector used by the original canary. */
:is(.view-queue, .view-saved) .panel {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}
.queue-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: var(--gap);
}
.queue-count { color: var(--muted); margin: 0; }
.queue-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.queue-position {
  min-width: 58px;
  text-align: center;
  font-family: var(--mono);
  color: var(--muted);
  font-size: .82rem;
}
:is(.view-queue, .view-saved) .job {
  max-width: 900px;
  padding: 20px;
  gap: 14px;
  background: var(--surface);
  border-left-color: var(--coral);
  box-shadow: 0 16px 34px -30px rgba(24, 19, 15, .72);
}
:is(.view-queue, .view-saved) .job-title { font-size: 1.3rem; }
:is(.view-queue, .view-saved) .job-company { font-size: .92rem; }
:is(.view-queue, .view-saved) .score-value { font-size: 2rem; }
.job-fit { margin-top: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field); }
.fit-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.fit-heading h4 { margin:0; font-size:.95rem; }
.fit-confidence { color:var(--muted); font:700 .76rem/1.2 var(--mono); }
.fit-groups { display:grid; gap:16px; margin-top:14px; }
.fit-group { display:grid; gap:10px; }
.fit-group h5 { margin:0; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.fit-dimension { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(130px,1fr) minmax(0,2fr); gap:12px; align-items:center; }
.fit-dimension-head { display:flex; justify-content:space-between; gap:8px; min-width:0; font-size:.8rem; }
.fit-dimension-head strong { overflow:hidden; text-overflow:ellipsis; }
.fit-dimension-head span { color:var(--muted); font:700 .72rem/1 var(--mono); }
.fit-meter { height:8px; border-radius:999px; background:var(--canvas); overflow:hidden; }
.fit-meter-fill { display:block; height:100%; border-radius:inherit; background:var(--ok); }
.fit-dimension.warn .fit-meter-fill { background:var(--danger); }
.fit-dimension p { margin:0; min-width:0; color:var(--muted); font-size:.8rem; line-height:1.4; }
.fit-group > .muted { margin:0; font-size:.82rem; }
:is(.view-queue, .view-saved) .job-controls {
  margin: 4px 0 0;
  padding: 12px 0 0;
  background: transparent;
  border-top: 1px solid var(--line);
}
.history-list { list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line); }
.history-row { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(110px,.7fr) minmax(130px,.8fr) auto; gap:12px; align-items:center; padding:13px 4px; border-bottom:1px solid var(--line); }
.history-row-main { min-width:0; display:grid; gap:2px; }
.history-row-main strong, .history-row-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-row-main span, .history-date { color:var(--muted); font-size:.82rem; }
.history-state { justify-self:start; padding:3px 8px; border-radius:999px; background:var(--clay-light); font:700 .72rem/1.3 var(--mono); text-transform:capitalize; }
.history-state[data-state="rejected"], .history-state[data-state="ghosted"] { background:var(--danger-soft); color:var(--danger); }
.history-state[data-state="interview"] { background:var(--ok-soft); color:var(--ok); }
.history-row-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; }
.history-row-actions a { color:var(--clay-deep); font-weight:700; }
.history-update { grid-column:1 / -1; }
.history-update summary { cursor:pointer; color:var(--clay-deep); font-size:.82rem; }
.history-update .field { max-width:460px; margin-top:10px; }
@media (max-width: 720px) {
  .fit-dimension { grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
  .fit-meter { grid-column:1 / -1; }
  .fit-dimension p { grid-column:1 / -1; }
  .history-row { grid-template-columns:minmax(0,1fr) auto; }
  .history-date { grid-column:1; }
  .history-row-actions { grid-column:2; grid-row:1 / span 2; align-self:center; }
}
.job-provenance summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clay-deep);
  padding: 4px 0;
}
.job-provenance[open] summary { margin-bottom: 8px; }

.dimension-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.dimension {
  display: grid;
  gap: 2px;
  font-size: .82rem;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.dimension-id { font-family: var(--mono); color: var(--text); font-weight: 650; }
.dimension-outcome, .dimension-contribution { color: var(--muted); font-family: var(--mono); font-size: .78rem; }
.dimension-evidence { list-style: none; margin: 0; padding-left: 10px; color: var(--muted); font-size: .78rem; border-left: 2px solid var(--info); }

.receipt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.receipt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: .82rem;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--info-ink);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-soft);
}
.receipt-name { color: var(--text); font-weight: 650; }
.receipt[data-operation-status="completed"] { border-left-color: var(--ok); }
.receipt[data-operation-status="completed"] .receipt-status { color: var(--ok); }
.receipt[data-operation-status="failed"] { border-left-color: var(--danger); }
.receipt[data-operation-status="failed"] .receipt-status { color: var(--danger); }
.receipt[data-operation-status="cancelled"] { border-left-color: var(--warning); }
.receipt[data-operation-status="cancelled"] .receipt-status { color: var(--warning-ink); }

.document-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.document-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
/* ================= tablet (>= 700px) ================= */
@media (min-width: 700px) {
  body { font-size: 15px; }
  .document-row { grid-template-columns: minmax(140px, 1fr) auto minmax(150px, .5fr) auto auto; }
  :root { --pad: 20px; --gap: 18px; }

  .app-header, .app-nav, .app-main, .app-footer { padding-left: 28px; padding-right: 28px; }

  /* The tablet is its own composition, not a widened phone: the identity and
     the scope note share one line, the next action becomes an action bar, and
     the working panels pair up two across. */
  .app-header {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: end;
    column-gap: 28px;
    padding-top: 18px;
    padding-bottom: 16px;
  }
  .app-mark { font-size: 1.55rem; }
  .app-title { font-size: 1.2rem; }
  .app-scope { margin: 0 0 2px; max-width: 46ch; text-align: right; justify-self: end; }

  .nav-button { font-size: .88rem; padding: 0 12px; }

  .next-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title   actions"
      "hint    actions";
    align-items: center;
    column-gap: 24px;
    padding: 18px var(--pad);
  }
  .next-action-title { grid-area: title; }
  .next-action-hint { grid-area: hint; margin-bottom: 0; }
  .next-action-controls { grid-area: actions; justify-content: flex-end; }

  /* Two-column definition lists read far better once there is width. */
  .detail-list { grid-template-columns: minmax(150px, 220px) 1fr; align-items: baseline; }
  .detail-list dd { margin-bottom: 2px; }

  .job-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .queue-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .queue-navigation { justify-content: flex-end; }
  :is(.view-queue, .view-saved) .job { padding: 24px 26px; }
  :is(.view-queue, .view-saved) .job-controls {
    margin: 4px -26px -24px;
    padding: 14px 26px 20px;
  }

  /* The journey pairs its summary panels; anything editable stays full width. */
  .view[data-view="profile"] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .view[data-view="profile"] > * { grid-column: 1 / -1; }
  .view[data-view="profile"] > [data-testid="panel-profile"],
  .view[data-view="profile"] > [data-testid="panel-queue-summary"],
  .view[data-view="profile"] > [data-testid="panel-queue-empty"] { grid-column: auto; }

  .dashboard-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 26px; }
  .dashboard-run { justify-self: end; }
  .count-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .count-label { min-height: 1.4em; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); }
  .source-row { grid-template-columns: minmax(150px, 1fr) auto auto; }
  .package-heading { flex-direction: row; align-items: center; gap: 14px; }

  .receipt {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* ================= desktop (>= 1200px) ================= */
@media (min-width: 1200px) {
  /* Dense working surface: a persistent nav rail and a wide work area, with
     smaller controls than the touch layout because there is a pointer. */
  body {
    font-size: 14px;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "nav    main"
      "nav    footer";
    min-height: 100vh;
  }
  .app-header { grid-area: header; }
  .app-nav {
    grid-area: nav;
    background: linear-gradient(180deg, var(--shell-raised), var(--shell) 220px);
    border-bottom: none;
    border-right: 1px solid var(--shell-line);
    padding-top: 18px;
    overflow-x: visible;
  }
  .app-main { grid-area: main; max-width: 1500px; padding-top: 20px; }
  .app-footer { grid-area: footer; border-right: 1px solid var(--shell-line); }

  .nav-list { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .nav-button {
    width: 100%;
    text-align: left;
    min-height: 38px;
    background: transparent;
    border-color: transparent;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .nav-button:hover { background: var(--shell-3); }
  .nav-button.is-current {
    background: var(--shell-3);
    color: var(--shell-text);
    border-color: transparent;
    border-left: 3px solid var(--coral);
    box-shadow: none;
  }

  .button { min-height: 36px; padding: 0 14px; }
  .field-input { min-height: 34px; }

  .surface {
    grid-template-columns: minmax(0, 1fr);
  }
  .next-action { padding: 20px var(--pad); }
  /* Prose stays at a readable measure even on a 1440px canvas. */
  .view-package .field-textarea { max-width: 96ch; }
  .job-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  .fact-list { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
  .count-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.first-launch {
  width: min(100%, 860px);
  margin: 0 auto;
  display: grid;
  gap: var(--gap);
}
.first-launch-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-top: 4px solid var(--coral);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: clamp(20px, 5vw, 44px);
}
.first-launch-title { font-size: clamp(1.7rem, 6vw, 2.7rem); }
.first-launch-lede { max-width: 58ch; color: var(--text-soft); font-size: 1.05rem; }
.invite-input { width: 100%; max-width: 38rem; margin: 7px 0 14px; font-family: var(--mono); }
.first-launch-action { width: 100%; max-width: 22rem; min-height: 50px; }
.privacy-note { margin: 16px 0 0; color: var(--muted); font-size: .9rem; max-width: 58ch; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 38rem;
  margin: 28px 0 22px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.invited-account {
  width: 100%;
  max-width: 38rem;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.invited-account .panel-title { margin-bottom: 8px; font-size: 1.05rem; }
.invited-account .muted { margin-top: 0; }
.startup-feedback { display: flex; align-items: center; gap: 10px; padding: 15px; background: var(--info-soft); border-radius: var(--radius-sm); font-weight: 700; }
.startup-dot { width: 12px; height: 12px; border: 3px solid var(--info-ink); border-top-color: transparent; border-radius: 50%; animation: startup-spin .9s linear infinite; }
@keyframes startup-spin { to { transform: rotate(360deg); } }
.nav-onboarding { margin: 0; color: var(--shell-soft); font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.onboarding-steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.onboarding-step { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.onboarding-step.state-current { color: var(--text); font-weight: 800; }
.onboarding-step.state-complete { color: var(--ok); }
.step-marker { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: .75rem; }
.onboarding-launch .next-action { margin: 0; }

@media (min-width: 700px) {
  .onboarding-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .onboarding-step { align-items: flex-start; flex-direction: column; }
}

/* ================= print ================= */
/* Printing (or save-as-PDF) flattens the app frame to one document column:
   no grid shell, no nav rail, no repeated footer band overlapping content.
   Folded sections stay folded, so a five-job queue prints as five short
   cards instead of pages of raw posting text. */
@media print {
  body { display: block; background: #fff; font-size: 11pt; }
  .app-nav, .app-footer, .skip-link { display: none; }
  .app-header { position: static; background: none; color: var(--ink); border-bottom: 2px solid var(--ink); }
  .app-header::after { display: none; }
  .app-mark, .app-title, .app-scope { color: var(--ink); }
  .app-scope { text-align: left; justify-self: start; max-width: none; }
  .app-main { display: block; max-width: none; padding: 0; background: #fff; }
  .panel, .next-action, .job { box-shadow: none; }
  /* Only card-sized blocks refuse to split; a whole panel can span pages. */
  .job, .next-action { break-inside: avoid; }
  .next-action { display: block; }
  .job-grid { display: block; }
  .job { margin-bottom: 12pt; }
  .job-description-text { max-height: none; overflow: visible; }
  .button { display: none; }
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* The spinner becomes a static ring; the text beside it already says
     "running", so no information is carried by motion alone. */
  .progress-indeterminate::before { border-top-color: var(--coral); }
}

/* ================= forced colours / high contrast ================= */
@media (forced-colors: active) {
  .button, .panel, .job, .fact, .next-action, .receipt, .nav-button, .field-input {
    border: 1px solid CanvasText;
  }
  .button-primary { forced-color-adjust: none; }
  /* Decorative brand rules carry no meaning, so they are dropped rather than
     repainted as system text colour. */
  .panel-title::after { display: none; }
  .nav-button.is-current { border: 2px solid Highlight; }
  :focus-visible, :focus { outline-color: Highlight; }
}