/* ============================================================
   role.css — JobBored v2 PART 03 (The Dossier): .dossier frame, legacy
   materials panel, workshop stepper/chips. The empty-state shelf lives in
   flowing-chrome.css (UX01 DS-09).
   ------------------------------------------------------------
   Owner:    dossier-df/css lane
   Scope:    body.jb-v2 [data-region="role"] (region host) and
             a few shared classes (.stepper, .writeback, .chip)
             rendered by role-workshop.js into the renamed
             Workshop region (data-region="letter").
   ------------------------------------------------------------
   Activation: body.jb-v2 [data-region="role"].
   Off-flag:   this file is a no-op for the legacy dashboard.
   ------------------------------------------------------------
   What lives here:
     .dossier                       (the Case's outer frame)
     .section-label, .jd            (shared editorial primitives)
     .brief-materials, .brief-materials__*
                                    (the legacy materials panel, still
                                     rendered into a brief-only mount)
     .stepper, .stepper__*          (used inside workshop region)
     .writeback, .chip, .chip--*    (used inside workshop region)
   The Case's own rules live in role-case.css, loaded after this file.
   ------------------------------------------------------------
   This file deliberately does NOT override .detail-drawer.*
   selectors. The legacy detail overlay still uses those
   rules in style.css.
   ============================================================ */

body.jb-v2 [data-region="role"] {
  display: block;
  background: var(--jb-cream, #FBF7EE);
  color: var(--jb-ink, #1B2B33);
  font-family: var(--font-body, "Geist", "Inter", system-ui, sans-serif);
  padding-bottom: 56px;
}

body.jb-v2 [data-region="role"] *,
body.jb-v2 [data-region="role"] *::before,
body.jb-v2 [data-region="role"] *::after { box-sizing: border-box; }

/* .jb-role-divider had no renderer left; removed (UX01 DS-09). */
/* The empty-state shelf (.jb-shelf, .jb-hint) moved to flowing-chrome.css
   (UX01 DS-09). */
/* ════════════════════════════════════════════════════════
   Dossier — Direction F two-card layout
   ════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   Dossier shell — two distinct cards stacked vertically.
   Local token overrides keep the parchment palette inside
   the dossier without affecting the rest of style.css.
   ───────────────────────────────────────────────────────── */
.dossier {
  --surface: var(--jb-paper);
  --border: var(--jb-line-soft);
  --radius-md: 10px;
  --radius-lg: 16px;

  /* The wrapper carries the shell gutter exactly like every other flow
     region ([data-region="pipeline"] et al), so the Case inside it can be a
     plain min(1220px, 100%) and land on the same width. The old
     `max-width: 1180px` was the second of three competing maxima: the token's
     nested `100%` re-resolved against this box and subtracted the gutter a
     second time, leaving the dossier 104px narrower than the pipeline above
     it (docs/redesign/dossier-2026-09/TEARDOWN.md §4). */
  width: var(--jb-flow-content-width, min(1220px, calc(100% - 32px)));
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--sans);
  color: var(--ink);
}

/* Section label — typewriter, JobBored zone */
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: "\00A7";
  color: var(--crimson);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
  opacity: 0.6;
}

/* Raw posting — collapsed by default behind a single disclosure.
   The AI-curated sections (lede, fit angle, must-haves, etc.) are
   the primary read; this is here for users who want to verify what
   the AI compressed. When opened, the polished subsections render
   without nested disclosures. */
.jd {
  position: relative;
  margin-top: 6px;
}
.jd__details {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface);
  transition: border-left-color 160ms ease;
}
.jd__details[open]    { border-left-color: var(--crimson); }
.jd__details:hover    { border-left-color: var(--amber); }
.jd__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--navy);
  text-transform: uppercase;
}
.jd__summary::-webkit-details-marker { display: none; }
.jd__summary-label {
  font-weight: 600;
}
.jd__summary-count {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--parchment-deep);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: none;
}
.jd__summary-toggle {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--mute);
  width: 18px;
  text-align: center;
  transition: transform 160ms ease, color 160ms ease;
}
.jd__details[open] .jd__summary-toggle {
  transform: rotate(45deg);
  color: var(--crimson);
}
.jd__body {
  padding: 6px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.jd__section {
  border-top: 1px dotted var(--border-strong);
  padding-top: 12px;
}
.jd__section:first-child {
  border-top: none;
  padding-top: 4px;
}
.jd__section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.jd__section-head .roman {
  font-family: var(--serif);
  font-style: italic;
  color: var(--crimson);
  font-size: 14px;
  min-width: 24px;
}
.jd__section-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--navy);
  font-weight: 500;
}
.jd__section-head .count {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--parchment-deep);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}
.jd__section-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.jd__section-body p { margin: 0 0 6px; }
.jd__section-body ul {
  margin: 6px 0 0;
  padding-left: 22px;
}
.jd__section-body li { margin-bottom: 6px; }
.jd__section-body li::marker { color: var(--crimson); }

@media (prefers-reduced-motion: no-preference) {
  .jd__body { animation: jdFadeIn 220ms ease; }
  @keyframes jdFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ════════════════════════════════════════════════════════
   DIVIDER between Brief and Workshop
   ════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
   Workshop sub-renderers — used inside [data-region="letter"]
   (the renamed Workshop). The standalone workshop block that
   once lived inside the Dossier has been removed; these
   selectors are kept because role-workshop.js renders them
   into the workshop region (stage stepper + progress chips).
   ════════════════════════════════════════════════════════ */

/* Stage stepper */
.stepper {
  display: flex;
  gap: 4px;
}
.stepper__step {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
}
.stepper__step--done {
  background: var(--mint);
  color: var(--navy);
  border-color: var(--mint-deep);
}
.stepper__step--current {
  background: var(--navy);
  color: var(--jb-ink-inverse);
  border-color: var(--navy);
  font-weight: 600;
}
.stepper__step:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.stepper__step:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Write-back chips */
.writeback {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip:hover {
  background: var(--parchment-deep);
}
.chip .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-deep);
}
.chip--danger {
  color: var(--crimson);
}
.chip--danger .pulse {
  background: var(--crimson);
}

@media (prefers-reduced-motion: reduce) {
  .jd__details,
  .jd__body,
  .jd__summary-toggle {
    animation: none !important;
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════
   Application Materials — Hermes-generated artifacts panel
   ------------------------------------------------------------
   Rendered by role-materials.js into the legacy [data-mount="brief"]
   host when no Case materials mount exists. Visual language follows
   the JobBored editorial palette (parchment surface, crimson
   accent, mono labels) so the panel reads as the same product.
   ════════════════════════════════════════════════════════ */

body.jb-v2 .brief-materials {
  display: block;
  margin: 0 56px 48px;
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.brief-materials__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.brief-materials__head .section-label {
  margin: 0;
  flex: 1;
}
.brief-materials__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: uppercase;
}
.brief-materials__derived {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--amber);
  background: rgba(231, 181, 73, 0.12);
  border: 1px solid rgba(231, 181, 73, 0.35);
  padding: 3px 8px;
  border-radius: 999px;
}
.brief-materials__empty {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
}

.brief-materials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.brief-materials__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--jb-paper-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 14px 16px 16px;
  position: relative;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.brief-materials__card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.brief-materials__card--primary {
  background: var(--jb-mint-soft);
  border-color: var(--jb-mint-deep);
}
.brief-materials__card--primary:hover {
  border-color: var(--navy);
}
.brief-materials__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brief-materials__card-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
}
.brief-materials__card-status {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-deep);
  background: rgba(63, 164, 106, 0.12);
  border: 1px solid rgba(63, 164, 106, 0.32);
  padding: 2px 8px;
  border-radius: 999px;
}
.brief-materials__card-status[data-status="needs_review"] {
  color: var(--amber);
  background: rgba(231, 181, 73, 0.14);
  border-color: rgba(231, 181, 73, 0.4);
}
.brief-materials__card-status[data-status="pending"] {
  color: var(--amber);
  background: rgba(231, 181, 73, 0.14);
  border-color: rgba(231, 181, 73, 0.4);
  position: relative;
  padding-left: 18px;
}
.brief-materials__card-status[data-status="pending"]::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateY(-50%);
  animation: brief-materials-pulse 1400ms ease-in-out infinite;
}
.brief-materials__card--pending {
  background: var(--jb-paper-2);
  border-color: rgba(231, 181, 73, 0.45);
  border-left: 3px solid var(--amber);
}
.brief-materials__hint {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
/* -------------------- progress card (Winky watcher live state) -------------------- */
.brief-materials__progress {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  background: linear-gradient(180deg, rgba(231, 181, 73, 0.14) 0%, rgba(231, 181, 73, 0.07) 100%);
  border: 1px solid rgba(231, 181, 73, 0.42);
  color: var(--navy);
  position: relative;
  overflow: hidden;
}
/* Faint scan-line shimmer to give the "live work" feeling without
   being noisy. Slow on purpose — agents take minutes, not seconds. */
.brief-materials__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: brief-materials-shimmer 3800ms ease-in-out infinite;
  pointer-events: none;
}
/* Queued state — Winky hasn't claimed this file yet (concurrency=1
   means earlier requests draft first). Calmer than "drafting": no
   shimmer, slower clock, parchment tone instead of amber. */
.brief-materials__progress[data-phase="queued"] {
  background: linear-gradient(180deg, rgba(120, 120, 120, 0.08) 0%, rgba(120, 120, 120, 0.04) 100%);
  border-color: rgba(120, 120, 120, 0.35);
}
.brief-materials__progress[data-phase="queued"]::after { display: none; }
.brief-materials__progress[data-phase="queued"] .brief-materials__progress-icon {
  color: var(--ink-soft);
}
.brief-materials__progress[data-phase="complete"] {
  background: linear-gradient(180deg, rgba(76, 175, 116, 0.16) 0%, rgba(76, 175, 116, 0.08) 100%);
  border-color: rgba(76, 175, 116, 0.55);
}
.brief-materials__progress[data-phase="complete"]::after { display: none; }
.brief-materials__progress[data-phase="failed"] {
  background: linear-gradient(180deg, rgba(192, 76, 76, 0.14) 0%, rgba(192, 76, 76, 0.06) 100%);
  border-color: rgba(192, 76, 76, 0.55);
}
.brief-materials__progress[data-phase="failed"]::after { display: none; }
.brief-materials__progress-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  color: var(--amber);
  position: relative;
  z-index: 1;
}
.brief-materials__progress[data-phase="complete"] .brief-materials__progress-icon {
  color: var(--jb-mint-deep);
  background: rgba(255, 255, 255, 0.85);
}
.brief-materials__progress[data-phase="failed"] .brief-materials__progress-icon {
  color: var(--jb-rose);
  background: rgba(255, 255, 255, 0.85);
}
/* "Draft is being written" pen: the nib sweeps across while the baseline
   inks in, loops. Reads as active creation, not a stopwatch. */
.brief-materials__progress-pen {
  overflow: visible;
}
.brief-materials__progress-pen-nib {
  transform-box: fill-box;
  transform-origin: center;
  animation: brief-materials-pen-write 2200ms ease-in-out infinite;
}
.brief-materials__progress-pen-line {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: brief-materials-pen-ink 2200ms ease-in-out infinite;
}
.brief-materials__progress[data-phase="queued"] .brief-materials__progress-pen-nib,
.brief-materials__progress[data-phase="queued"] .brief-materials__progress-pen-line {
  animation-duration: 3200ms;
}
.brief-materials__progress[data-phase="queued"] .brief-materials__progress-pen-nib {
  opacity: 0.7;
}
.brief-materials__progress[data-phase="verifying"] .brief-materials__progress-pen-nib,
.brief-materials__progress[data-phase="verifying"] .brief-materials__progress-pen-line {
  animation-duration: 1500ms;
}
@media (prefers-reduced-motion: reduce) {
  .brief-materials__progress-pen-nib,
  .brief-materials__progress-pen-line {
    animation: none;
  }
  .brief-materials__progress-pen-line {
    stroke-dashoffset: 0;
  }
}
.brief-materials__progress-check {
  animation: brief-materials-pop-in 320ms ease-out 1;
}
.brief-materials__progress-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.brief-materials__progress-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.brief-materials__progress-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.brief-materials__progress[data-phase="complete"] .brief-materials__progress-eyebrow {
  color: var(--jb-mint-deep);
}
.brief-materials__progress[data-phase="failed"] .brief-materials__progress-eyebrow {
  color: var(--jb-rose);
}
.brief-materials__progress-elapsed {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brief-materials__progress-message {
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--navy);
  margin: 0;
}
.brief-materials__progress-note {
  margin-top: 8px;
  font-family: var(--serif, Georgia, serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
}
.brief-materials__progress-meta {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.brief-materials__progress-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.brief-materials__progress-actions .brief-materials__btn {
  padding: 6px 14px;
  font-size: 12px;
}

/* Enlarged variant — used for the in-dossier card. Bigger icon,
   bigger type, more breathing room. The identity line (company ·
   title · feature) sits between the eyebrow and the message so the
   user always knows exactly which role this card is for, even if
   they've scrolled the dossier header out of view or selected a
   different role above. */
.brief-materials__progress--enlarged {
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 22px 24px;
  margin: 0 0 22px;
}
.brief-materials__progress--enlarged .brief-materials__progress-icon {
  width: 56px;
  height: 56px;
}
.brief-materials__progress--enlarged .brief-materials__progress-icon svg {
  width: 30px;
  height: 30px;
}
.brief-materials__progress--enlarged .brief-materials__progress-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
}
.brief-materials__progress--enlarged .brief-materials__progress-elapsed {
  font-size: 13px;
}
.brief-materials__progress--enlarged .brief-materials__progress-message {
  font-size: 18px;
  line-height: 1.32;
  margin-top: 8px;
}
.brief-materials__progress--enlarged .brief-materials__progress-note {
  font-size: 14px;
  margin-top: 10px;
}
.brief-materials__progress--enlarged .brief-materials__progress-meta {
  margin-top: 10px;
  font-size: 11px;
}
.brief-materials__progress--enlarged .brief-materials__progress-actions {
  margin-top: 16px;
}
.brief-materials__progress--enlarged .brief-materials__progress-actions .brief-materials__btn {
  padding: 8px 18px;
  font-size: 13px;
}

/* Identity line: company name + title + feature pill. Mono'd company,
   serif title, amber/green/red feature pill matching the phase. */
.brief-materials__progress-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 14px;
  color: var(--navy);
  line-height: 1.35;
}
.brief-materials__progress--enlarged .brief-materials__progress-identity {
  font-size: 15px;
  margin-top: 4px;
}
.brief-materials__progress-feature {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(231, 181, 73, 0.20);
  border: 1px solid rgba(231, 181, 73, 0.50);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy);
  vertical-align: middle;
}
.brief-materials__progress[data-phase="complete"] .brief-materials__progress-feature {
  background: rgba(76, 175, 116, 0.18);
  border-color: rgba(76, 175, 116, 0.55);
}
.brief-materials__progress[data-phase="failed"] .brief-materials__progress-feature {
  background: rgba(192, 76, 76, 0.16);
  border-color: rgba(192, 76, 76, 0.50);
}
.brief-materials__progress[data-phase="queued"] .brief-materials__progress-feature {
  background: rgba(120, 120, 120, 0.12);
  border-color: rgba(120, 120, 120, 0.40);
}
@keyframes brief-materials-pen-write {
  0%   { transform: translate(-2.5px, 1.5px) rotate(-7deg); }
  55%  { transform: translate(2.5px, -1px) rotate(-2deg); }
  70%  { transform: translate(2.5px, -1px) rotate(-2deg); }
  85%  { transform: translate(-2.5px, 1.5px) rotate(-7deg); }
  100% { transform: translate(-2.5px, 1.5px) rotate(-7deg); }
}
@keyframes brief-materials-pen-ink {
  0%   { stroke-dashoffset: 16; opacity: 0; }
  12%  { opacity: 0.85; }
  55%  { stroke-dashoffset: 0; opacity: 0.9; }
  70%  { stroke-dashoffset: 0; opacity: 0.9; }
  82%  { opacity: 0; }
  100% { stroke-dashoffset: 16; opacity: 0; }
}
@keyframes brief-materials-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes brief-materials-pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* "On it!" celebration state on the notes form submit button. */
.brief-materials__notes-form--sent {
  border-color: rgba(76, 175, 116, 0.55);
  background: linear-gradient(180deg, rgba(76, 175, 116, 0.10) 0%, rgba(76, 175, 116, 0.04) 100%);
}
.brief-materials__notes-form--sent .brief-materials__notes-eyebrow {
  color: var(--jb-mint-deep);
}
.brief-materials__notes-form--sent .brief-materials__btn--primary {
  background: var(--jb-mint-deep);
  border-color: var(--jb-mint-deep);
  color: var(--jb-paper);
  cursor: default;
  animation: brief-materials-pop-in 260ms ease-out;
}
.brief-materials__notes-sent-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  margin-right: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .brief-materials__progress-clock,
  .brief-materials__progress::after {
    animation: none !important;
  }
}
.brief-materials__card-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.brief-materials__quality {
  margin: -2px 0 2px;
  color: var(--amber);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
}
.brief-materials__card-identity {
  margin: 2px 0 6px;
  font-family: var(--serif, Georgia, serif);
  font-size: 12px;
  line-height: 1.3;
  color: var(--navy);
  /* Two-line clamp so very long titles don't blow up the card grid. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.brief-materials__dot {
  color: var(--mute);
  padding: 0 2px;
}
.brief-materials__card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.brief-materials__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.brief-materials__btn--primary {
  background: var(--navy);
  color: var(--jb-ink-inverse);
  border: 1px solid var(--navy);
}
.brief-materials__btn--primary:hover {
  background: var(--crimson);
  border-color: var(--crimson);
  transform: translateY(-1px);
}
.brief-materials__btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border-strong);
}
.brief-materials__btn--ghost:hover {
  background: var(--parchment-deep);
  border-color: var(--navy);
}
.brief-materials--error .brief-materials__empty {
  color: var(--crimson);
  font-style: normal;
}

/* -------------------- inline notes form --------------------
   Sits as a sibling above .brief-materials when the user clicks
   Draft cover letter / Tailor resume. Non-modal: keeps the rest of
   the dossier interactive. Styled to match the parchment palette. */
.brief-materials__notes-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 56px 16px;
  padding: 18px 20px 16px;
  background: var(--jb-paper-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-soft);
}
.brief-materials__notes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.brief-materials__notes-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}
.brief-materials__notes-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}
.brief-materials__notes-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--jb-paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md, 8px);
  box-sizing: border-box;
}
.brief-materials__notes-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(20, 32, 64, 0.12);
}
.brief-materials__notes-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  body.jb-v2 .brief-materials {
    margin: 12px 24px 0;
    padding: 18px 18px 20px;
  }
  .brief-materials__grid {
    grid-template-columns: 1fr;
  }
  .brief-materials__notes-form {
    margin: 12px 24px 12px;
    padding: 14px 16px;
  }
}

/* JD paste fallback form. Surfaces when the JD chain exhausts all
   automatic fallbacks (cache → server scrape) and we need the user
   to paste. Visually echoes the notes form but with a wider textarea
   and a clearer hint about the source URL. */
.brief-materials__jd-form {
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--jb-paper-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-soft);
}
.brief-materials__jd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.brief-materials__jd-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.brief-materials__jd-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}
.brief-materials__jd-hint {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.brief-materials__jd-hint code {
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}
.brief-materials__jd-form textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--jb-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  box-sizing: border-box;
}
.brief-materials__jd-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}