/* ============================================================
   INTAKE — section-local styles.

   Layers on top of the canonical components; it does not replace any of
   them. Everything here is either a variant the shared component does
   not carry, or layout specific to this area.

   Deliberately NOT touching the shared files:

     chips.css defines chip--status for eleven values (active, archived,
     done, draft, live, pending, risk, shipped, stalled, suspended,
     watching). Intake's five (new, open, converted, closed, spam) are
     not among them, so the dot colours are added HERE rather than by
     editing a component every other page loads.

     stat-tiles.css is no longer loaded (snag 6, Aug 2026): the five tiles
     that used it were the snag — a tile reads as a readout and behaved as
     a filter. The workflow is three groups down the page instead, styled
     below.

   Colour, type and spacing come from tokens in colors_and_type.css. No
   hex codes.
   ============================================================ */

/* ── status chips, intake's five ───────────────────────────── */
.chip--status[data-status="new"] .chip__dot        { background: var(--zeal-orange); }
.chip--status[data-status="open"] .chip__dot       { background: var(--cat-portal); }
.chip--status[data-status="converted"] .chip__dot  { background: var(--green); }
.chip--status[data-status="closed"] .chip__dot     { background: var(--ink-4); }
.chip--status[data-status="spam"] .chip__dot       { background: var(--red-status); }

/* ── type chips ────────────────────────────────────────────── */
.chip--category[data-category="enquiry"] .chip__dot     { background: var(--cat-portal); }
.chip--category[data-category="catalogue"] .chip__dot   { background: var(--zeal-orange); }
.chip--category[data-category="used"] .chip__dot        { background: var(--cat-ops); }
.chip--category[data-category="application"] .chip__dot { background: var(--cat-culture); }
.chip--category[data-category="subscribe"] .chip__dot   { background: var(--ink-4); }

/* ── the workflow groups (snag 6) ──────────────────────────── */
.intake-group { margin: var(--s-6, 32px) 0 0; }
.intake-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2, 8px);
  margin: 0 0 var(--s-2, 8px);
  font-family: var(--font-cd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.intake-group__title { color: var(--ink); }
.intake-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--r-soft);
  background: var(--bg-warm);
  color: var(--fg-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.intake-group__blurb {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-3);
}
.intake-group__empty {
  padding: var(--s-3, 12px) 0;
  font-size: 13px;
}
/* done: below the work, closed by default, and quieter than the rest */
.intake-group--done { margin-top: var(--s-7, 48px); opacity: .85; }
.intake-group__toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  padding: var(--s-2, 8px) 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-cd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.intake-group__toggle:hover { color: var(--ink); }
.intake-group__arrow { color: var(--fg-3); }

/* ── the health banner (snag 6) ────────────────────────────────
   Delivery problems are the plumbing failing, not a workflow state, so
   this sits ABOVE the whole list rather than beside the groups. It
   counts against every loaded row and never moves when you search. */
.intake-health {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3, 12px);
  margin: 0 0 var(--s-5, 24px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border: 1px solid var(--red-status);
  border-radius: var(--r-soft);
  background: var(--zeal-red-25);
  font-size: 13px;
  line-height: 1.5;
}
.intake-health__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-soft);
  background: var(--red-status);
  color: var(--paper, #fff);
  font-family: var(--font-ex);
  font-size: 12px;
  line-height: 1;
}
.intake-health__body { min-width: 0; }

/* ── the follow-up badge (snag 6) ──────────────────────────────
   A property of one submission, so it rides that submission's row.
   `ahead` is deliberately quiet: useful context, not a call to act. */
.intake-duebadge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-soft);
  font-family: var(--font-cd);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.intake-duebadge--over  { background: var(--red-status);  color: var(--paper, #fff); }
.intake-duebadge--today { background: var(--amber);       color: var(--ink); }
.intake-duebadge--ahead { background: var(--bg-warm);     color: var(--fg-3); }

/* ── view switch + toolbar ─────────────────────────────────── */
.intake-viewnav {
  display: flex;
  gap: var(--s-2, 8px);
  margin: 0 0 var(--s-4, 16px);
}
.intake-tabs { margin-top: var(--s-5, 24px); }
.intake-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  flex-wrap: wrap;
  margin: var(--s-4, 16px) 0;
}
.intake-search { flex: 1; min-width: 180px; }
.intake-spacer { flex: 1; }
.intake-sortnote {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.intake-empty { padding: var(--s-6, 32px) 0; }

/* ── the row list ──────────────────────────────────────────── */
.intake-rows { border-top: 1px solid var(--rule-structural, var(--border-strong)); }
.intake-row {
  display: grid;
  grid-template-columns: 88px 108px minmax(0, 1fr) minmax(0, 1.3fr) 116px 96px;
  gap: var(--s-3, 12px);
  align-items: center;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  cursor: pointer;
}
.intake-row:hover { background: var(--bg-warm); }
.intake-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.intake-row--head {
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--ink);
  cursor: default;
}
.intake-row--head:hover { background: transparent; }
/* new and untouched reads slightly warmer, so the eye lands on it first */
.intake-row--unread { background: var(--zeal-orange-25); }
.intake-row--unread:hover { background: var(--zeal-orange-50); }

.intake-when {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--fg-3);
}
.intake-who { font-weight: 500; min-width: 0; }
.intake-sub { font-size: 11px; font-weight: 400; }
.intake-snip {
  color: var(--fg-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intake-owner {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--fg-3);
}
.intake-nth { margin-left: 6px; }

/* the repeat-submitter flag: an orange dot, so it reads before the name */
.intake-flagdot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--zeal-orange);
  margin-right: 5px;
  vertical-align: middle;
}
/* a delivery problem on the row, not just buried on the detail view */
.intake-problem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--red-status);
  color: var(--zeal-white);
  font-family: var(--font-ex);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* ── the follow-up view ────────────────────────────────────── */
.intake-row--due {
  grid-template-columns: 108px 108px minmax(0, 1fr) 132px 104px 88px;
  cursor: default;
}
.intake-row--due.is-over   { background: var(--zeal-red-25); }
.intake-row--due.is-today  { background: var(--zeal-yellow-25); }
.intake-row--due.is-ahead  { background: transparent; }
.intake-due { font-weight: 500; }
.intake-due--over  { color: var(--red-status); }
.intake-due--today { color: var(--amber); }
.intake-due--ahead { color: var(--fg-3); }

/* ── the detail view ───────────────────────────────────────── */
.intake-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  border-top: 1px solid var(--ink);
}
.intake-detail__main {
  padding: var(--s-5, 24px) var(--s-5, 24px) var(--s-6, 32px) 0;
  border-right: 1px solid var(--border-soft);
  min-width: 0;
}
.intake-detail__side {
  padding: var(--s-5, 24px) 0 var(--s-5, 24px) var(--s-5, 24px);
}
.intake-detail__head {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  flex-wrap: wrap;
  margin-bottom: var(--s-4, 16px);
}
.intake-fieldset {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 9px var(--s-4, 16px);
  font-size: 13px;
  margin: 0 0 var(--s-5, 24px);
}
.intake-fieldset dt {
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 2px;
}
.intake-fieldset dd {
  margin: 0;
  color: var(--fg-2);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.intake-blk {
  font-family: var(--font-cd);
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin: var(--s-5, 24px) 0 var(--s-2, 8px);
}

/* The message box. white-space: pre-wrap so line breaks a person typed
 * survive, and overflow-wrap so a 4000-character single word cannot push
 * the layout sideways. The content is a text node; nothing here parses
 * markup. */
.intake-msgbox {
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--ink-5);
  border-radius: var(--r-soft);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  background: var(--bg-muted);
  font-size: 13px;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.intake-linkfield {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: var(--s-3, 12px) 0 0;
}
.intake-linkfield code {
  font-size: 11px;
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--r-1);
  color: var(--fg-2);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-consent { margin-top: var(--s-5, 24px); padding: var(--s-3, 12px) var(--s-4, 16px); }
.intake-consent__t {
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 6px;
}
.intake-consent__q {
  margin: 0;
  padding-left: var(--s-3, 12px);
  border-left: 2px solid var(--border-soft);
  font-size: 13px;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

/* ── side panel groups ─────────────────────────────────────── */
.intake-sidegrp { margin-bottom: var(--s-5, 24px); }
.intake-sidegrp__t {
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--s-2, 8px);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-soft);
}
.intake-actions { display: grid; gap: 6px; }
.intake-actions .btn { width: 100%; justify-content: flex-start; }
.intake-note {
  font-family: var(--font-cd);
  font-size: 11px;
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
  margin: var(--s-2, 8px) 0 0;
}
.intake-readonly { margin: 0 0 var(--s-4, 16px); }
.intake-links {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px var(--s-3, 12px);
  font-size: 12px;
  margin: 0;
}
.intake-links dt {
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.intake-links dd { margin: 0; color: var(--fg-2); overflow-wrap: anywhere; }
.intake-err { color: var(--red-status); }
.intake-pill-ok   { border-color: var(--green); color: var(--green); }
.intake-pill-warn { border-color: var(--amber); color: var(--amber); }
.intake-missing { padding: var(--s-5, 24px); }
.intake-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2, 8px);
  margin-top: var(--s-4, 16px);
}

/* ── narrow ────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .intake-detail { grid-template-columns: minmax(0, 1fr); }
  .intake-detail__main {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding-right: 0;
  }
  .intake-detail__side { padding-left: 0; }
}
@media (max-width: 760px) {
  .intake-row,
  .intake-row--due { grid-template-columns: 84px minmax(0, 1fr); }
  .intake-row > *:nth-child(n + 3),
  .intake-row--due > *:nth-child(n + 3) { display: none; }
  .intake-row--head { display: none; }
}

/* ── notes ─────────────────────────────────────────────────── */
.intake-notes { display: grid; gap: var(--s-2, 8px); }
.intake-noteitem {
  padding-bottom: var(--s-2, 8px);
  border-bottom: 1px solid var(--border-soft);
}
.intake-noteitem:last-child { border-bottom: 0; }
/* pre-wrap so line breaks somebody typed survive; overflow-wrap so one
 * long token cannot push the sidebar sideways */
.intake-noteitem__body {
  margin: 0;
  font-size: 12px;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.intake-noteitem__meta {
  margin: 3px 0 0;
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.intake-notecompose { display: grid; gap: 6px; margin-top: var(--s-3, 12px); }