/* ============================================================
   closeout-lines.css — Service Lines accordion (Closeout view)
   LucidLoop · adapted from the Request Surface handoff

   The Service Lines surface for the Closeout Tasks widget: a
   section card whose selectable rows expand inline into a
   locked-order detail workspace. Every truth-changing action is
   a launch point (Run / Review closeout, Cancel) — reading or
   expanding a line never mutates data.

   Component rules are scoped under `.tasks-view-lines` so this design
   never leaks into the table/detail views or other widgets.

   The palette below is the single source of truth shared with the
   pre-existing HIL closeout-review panel (`.hil-record-detail-shell`,
   whose component rules live in custom.css). Both surfaces only ever
   appear on the dashboard, which loads both stylesheets — so the tokens
   are defined once here on the combined selector. Mapped onto the
   product's muted steel-blue / sage / clay palette.
   ============================================================ */

.tasks-view-lines,
.tasks-request-screen,
.hil-record-detail-shell {
  /* Surfaces */
  --surface-0: #ffffff;
  --surface-1: #f7f7f3;
  --surface-2: #efefea;
  --surface-inset: #fafaf8;

  /* Borders */
  --border: #d8dce2;
  --border-strong: #c4c9d2;
  --border-faint: #e7e9ee;

  /* Foreground / text ramp */
  --fg-1: #111827;
  --fg-2: #3a4250;
  --fg-3: #6b7280;
  --fg-muted: #6b7280;
  --fg-label: #7b8494;
  --fg-on-accent: #ffffff;

  /* Primary (steel-blue) */
  --primary: #365f8b;
  --primary-hover: #31557c;
  --primary-active: #294a6e;
  --primary-tint: #ecf1f5;
  --primary-tint-2: #d9e3ee;
  --primary-text: #2d5179;

  /* Semantic families — base / -bg / -border / -solid */
  --success: #4e7763;        --success-bg: #e9f0ec;
  --success-border: #cfe0d6; --success-solid: #4e7763;

  --warning: #8a6326;        --warning-bg: #f5edda;
  --warning-border: #e6d3aa; --warning-solid: #c08a2e;

  --danger: #9c5a5a;         --danger-bg: #f4e9e9;
  --danger-border: #e3c9c9;  --danger-solid: #9c5a5a;

  --review: #5b6394;         --review-bg: #ebedf5;
  --review-border: #d3d7ea;  --review-solid: #6b73ad;

  --info: #3a6595;           --info-bg: #e8eff5;
  --info-border: #cdddec;    --info-solid: #4f86c0;

  --neutral: #6b7280;        --neutral-bg: #f1f2f4;
  --neutral-border: #e2e4e8; --neutral-solid: #6b7280;

  /* Type */
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-micro: 10px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --ls-label: 0.06em;
  --ls-tight: -0.01em;

  /* Spacing (named by px value) */
  --space-1: 1px;   --space-2: 2px;   --space-3: 3px;
  --space-4: 4px;   --space-5: 5px;   --space-6: 6px;
  --space-7: 7px;   --space-8: 8px;   --space-9: 9px;
  --space-10: 10px; --space-11: 11px; --space-12: 12px;
  --space-14: 14px; --space-15: 15px; --space-16: 16px;
  --space-18: 18px; --space-20: 20px; --space-24: 24px;
  --space-32: 32px;

  /* Radii / sizing */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;
  --check-size: 18px;
  --avatar-sm: 24px;
  --avatar-md: 28px;

  /* Elevation / motion */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.08), 0 4px 12px rgba(17, 24, 39, 0.06);
  --shadow-focus: 0 0 0 3px rgba(54, 95, 139, 0.25);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;

  /* Used only by the HIL closeout-review panel (kept here so the panel's
     tokens have one home). */
  --callout-info-icon: #eab308;
  --col-time: 60px;
  --control: 26px;
  --size-hero: 44px;
}

/* Layout — lines view only (never applied to the HIL panel). */
.tasks-view-lines {
  font-family: var(--font-body);
  color: var(--fg-2);
  box-sizing: border-box;

  /* Fill the remaining card height and scroll internally, matching the
     list/detail views. */
  flex: 1;
  width: 100%;
  overflow: auto;
  padding: var(--space-18) var(--space-2) var(--space-16);
}
.tasks-view-lines *,
.tasks-view-lines *::before,
.tasks-view-lines *::after { box-sizing: border-box; }


/* ============================================
   Inline icons
============================================ */
.tasks-view-lines .icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.tasks-view-lines .icon--xs { width: 13px; height: 13px; }
.tasks-view-lines .icon--sm { width: 15px; height: 15px; }


/* ============================================
   Buttons
============================================ */
.tasks-view-lines .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--space-8) var(--space-12);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.tasks-view-lines .btn--sm { font-size: var(--text-xs); padding: var(--space-7) var(--space-10); }
.tasks-view-lines .btn--primary { background: var(--primary); color: var(--fg-on-accent); }
.tasks-view-lines .btn--primary:hover { background: var(--primary-hover); }
.tasks-view-lines .btn--secondary {
  background: var(--surface-0);
  border-color: var(--border-strong);
  color: var(--fg-2);
}
.tasks-view-lines .btn--secondary:hover { background: var(--surface-2); }
.tasks-view-lines .btn--danger {
  background: var(--surface-0);
  border-color: var(--danger-border);
  color: var(--danger);
}
.tasks-view-lines .btn--danger:hover { background: var(--danger-bg); }
.tasks-view-lines .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tasks-view-lines .btn[disabled],
.tasks-view-lines .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }


/* ============================================
   State pill (solid, semantic status chip)
============================================ */
.tasks-view-lines .state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--space-4) var(--space-9);
  white-space: nowrap;
}
.tasks-view-lines .state--info    { background: var(--info-bg);    color: var(--info); }
.tasks-view-lines .state--success { background: var(--success-bg); color: var(--success); }
.tasks-view-lines .state--warning { background: var(--warning-bg); color: var(--warning); }
.tasks-view-lines .state--danger  { background: var(--danger-bg);  color: var(--danger); }
.tasks-view-lines .state--review  { background: var(--review-bg);  color: var(--review); }
.tasks-view-lines .state--neutral { background: var(--neutral-bg); color: var(--neutral); }


/* ============================================
   Risk chip (outlined overlay, not a status)
============================================ */
.tasks-view-lines .risk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--space-3) var(--space-9) var(--space-3) var(--space-7);
  white-space: nowrap;
}
.tasks-view-lines .risk-chip .icon {
  color: inherit;
}
.tasks-view-lines .risk-chip--atrisk   { border-color: var(--warning); color: var(--warning); }
.tasks-view-lines .risk-chip--critical { border-color: var(--danger);  color: var(--danger); }


/* ============================================
   Section card (tinted header + body container)
============================================ */
.tasks-view-lines .section-card {
  border: 1px solid var(--primary-tint-2);
  background: var(--primary-tint);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tasks-view-lines .section-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: var(--space-12) var(--space-15);
}
.tasks-view-lines .section-card__head .icon { color: var(--fg-3); }
.tasks-view-lines .section-card__title {
  flex: 1;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}


/* ============================================
   Service Lines — list controls (Cancel-selected)
============================================ */
.tasks-view-lines .lines__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-7);
  margin-bottom: var(--space-9);
  min-height: 30px;
}
.tasks-view-lines .lines__controls:empty { display: none; }


/* ============================================
   Service line (collapsed row)
============================================ */
.tasks-view-lines .line { border-top: 1px solid var(--primary-tint-2); }
.tasks-view-lines .line:first-child { border-top: none; }
.tasks-view-lines .line--open { background: var(--surface-0); }

.tasks-view-lines .line__row {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: var(--space-11) var(--space-12);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.tasks-view-lines .line__row:hover { background: var(--surface-2); }
.tasks-view-lines .line--open .line__row { background: var(--surface-0); }

.tasks-view-lines .line__code {
  flex: none; width: 108px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks-view-lines .line__date { flex: none; width: 168px; font-size: var(--text-sm); color: var(--fg-2); }
.tasks-view-lines .line__service {
  flex: 1; min-width: 0;
  font-size: var(--text-sm); color: var(--fg-1); font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks-view-lines .line__modality { flex: none; width: 64px; font-size: var(--text-xs); color: var(--fg-3); }
.tasks-view-lines .line__staffing { flex: none; width: 96px; text-align: right; font-size: var(--text-xs); color: var(--fg-3); }
.tasks-view-lines .line__status { flex: none; display: flex; justify-content: flex-end; min-width: 96px; }
.tasks-view-lines .line__chevron {
  flex: none; color: var(--fg-muted);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.tasks-view-lines .line--open .line__chevron { transform: rotate(180deg); }

/* Matching request detail: keep configured service-line data present, but hidden. */
.tasks-request-screen .line__staffing,
.tasks-widget .index__lines .iline__staffing,
.tasks-request-screen .section[data-line-section-title="staffing"],
.tasks-request-screen .section[data-line-section-title="service-definition"],
.tasks-request-screen .section[data-line-section-title="requestor"],
.tasks-request-screen .section[data-line-section-title="internal-owner"],
.tasks-request-screen .section[data-line-section-title="staffing-details"] {
  display: none;
}
.tasks-request-screen .section[data-line-section-title="staffing-and-readiness"] {
  display: block;
}


/* ============================================
   Line select checkbox
============================================ */
.tasks-view-lines .line-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--check-size);
  height: var(--check-size);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-0);
  color: var(--primary);
  cursor: pointer;
}
.tasks-view-lines .line-check:hover { border-color: var(--primary); }
/* Selected = white box + primary tick; unselected = empty box (no tick).
   The tick is toggled by display (not color), so a global SVG stroke rule
   in the host app can't leak a phantom tick into the unselected state. */
.tasks-view-lines .line-check--on { border-color: var(--primary); }
.tasks-view-lines .line-check .icon { width: 12px; height: 12px; stroke-width: 3; display: none; }
.tasks-view-lines .line-check--on .icon { display: inline-block; }


/* ============================================
   Expanded line workspace
============================================ */
.tasks-view-lines .line__body {
  padding: var(--space-4) var(--space-18) var(--space-20);
  background: var(--surface-0);
}

.tasks-view-lines .decision {
  padding: var(--space-12) 0 var(--space-14);
  border-bottom: 1px solid var(--border-faint);
}
.tasks-view-lines .decision__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}
.tasks-view-lines .decision__main {
  flex: 1 1 auto;
  min-width: 0;
}
.tasks-view-lines .decision__ids { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-9); margin-bottom: var(--space-6); }
.tasks-view-lines .decision__code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
}
.tasks-view-lines .decision__desc { font-size: var(--text-sm); color: var(--danger); font-weight: var(--fw-medium); }
.tasks-view-lines .decision__desc--muted { color: var(--fg-3); }
.tasks-view-lines .decision__actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-7);
  max-width: 320px;
}
.tasks-view-lines .decision__lead {
  margin-top: var(--space-14);
}


/* ============================================
   Detail section + field grid
============================================ */
.tasks-view-lines .section { padding: var(--space-14) 0; border-bottom: 1px solid var(--border-faint); }
.tasks-view-lines .section--last { border-bottom: none; }
.tasks-view-lines .section__title {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
  margin-bottom: var(--space-9);
}
.tasks-view-lines .section__alert { margin-bottom: var(--space-11); }

.tasks-view-lines .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-32); }
.tasks-view-lines .field-grid--single { grid-template-columns: 1fr; }
.tasks-view-lines .field {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-4) 0;
  border-bottom: 1px dotted var(--border-faint);
  min-width: 0;
}
.tasks-view-lines .field__label { font-size: var(--text-sm); color: var(--fg-3); white-space: nowrap; }
.tasks-view-lines .field__value {
  font-size: var(--text-sm);
  color: var(--fg-1);
  font-weight: var(--fw-medium);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tasks-view-lines .field__value--gap { color: var(--danger); }
.tasks-view-lines .field__value--ok { color: var(--success); }

.tasks-view-lines .staffing__sublabel {
  margin: var(--space-14) 0 var(--space-6);
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}
.tasks-view-lines .staffing__provider,
.tasks-view-lines .staffing__result {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border-faint);
}
.tasks-view-lines .staffing__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: var(--radius-full);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--text-micro);
  font-weight: var(--fw-bold);
}
.tasks-view-lines .staffing__avatar--slate {
  background: var(--surface-inset);
  color: var(--fg-3);
}
.tasks-view-lines .staffing__provider-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tasks-view-lines .staffing__provider-name,
.tasks-view-lines .staffing__result-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.tasks-view-lines .staffing__provider-meta {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.tasks-view-lines .staffing__result-name { flex: 1; min-width: 0; }
.tasks-view-lines .staffing__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
}
.tasks-view-lines .staffing__dot--danger { background: var(--danger-solid); }
.tasks-view-lines .staffing__dot--review { background: var(--review-solid); }
.tasks-view-lines .staffing__dot--neutral { background: var(--neutral-solid); }
.tasks-view-lines .staffing__result-state {
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}
.tasks-view-lines .staffing__result-state--danger { color: var(--danger); }
.tasks-view-lines .staffing__result-state--review { color: var(--review); }
.tasks-view-lines .staffing__result-state--neutral { color: var(--neutral); }


/* ============================================
   Workflow alert (reusable kickoff alert)
============================================ */
.tasks-view-lines .alert {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-md);
  background: var(--neutral-bg);
  padding: var(--space-9) var(--space-11);
}
.tasks-view-lines .alert__icon { flex: none; display: inline-flex; color: var(--neutral); }
.tasks-view-lines .alert__text { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--neutral); line-height: var(--lh-snug); }
.tasks-view-lines .alert__action {
  flex: none;
  border: none;
  border-radius: var(--radius-md);
  background: var(--neutral-solid);
  color: var(--fg-on-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-7) var(--space-12);
  white-space: nowrap;
  cursor: pointer;
}
.tasks-view-lines .alert__action:hover { filter: brightness(0.96); }
.tasks-view-lines .alert__action:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tasks-view-lines .alert__action:disabled,
.tasks-view-lines .alert__action--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.tasks-view-lines .alert__action:disabled:hover,
.tasks-view-lines .alert__action--disabled:hover { filter: none; }

.tasks-view-lines .alert--danger { border-color: var(--danger-border); background: var(--danger-bg); }
.tasks-view-lines .alert--danger .alert__icon,
.tasks-view-lines .alert--danger .alert__text { color: var(--danger); }
.tasks-view-lines .alert--danger .alert__action { background: var(--danger-solid); }

.tasks-view-lines .alert--success { border-color: var(--success-border); background: var(--success-bg); }
.tasks-view-lines .alert--success .alert__icon,
.tasks-view-lines .alert--success .alert__text { color: var(--success); }

.tasks-view-lines .alert--info { border-color: var(--info-border); background: var(--info-bg); }
.tasks-view-lines .alert--info .alert__icon,
.tasks-view-lines .alert--info .alert__text { color: var(--info); }

.tasks-view-lines .alert--review { border-color: var(--review-border); background: var(--review-bg); }
.tasks-view-lines .alert--review .alert__icon,
.tasks-view-lines .alert--review .alert__text { color: var(--review); }
.tasks-view-lines .alert--review .alert__action { background: var(--review-solid); }


/* ============================================
   Notes / misc
============================================ */
.tasks-view-lines .meta { font-size: var(--text-xs); color: var(--fg-muted); }
.tasks-view-lines .text-link {
  border: none;
  background: transparent;
  color: var(--primary-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  cursor: pointer;
}
.tasks-view-lines .text-link:hover { color: var(--primary-hover); }

.tasks-view-lines .lines__empty {
  padding: var(--space-24) var(--space-15);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* A small inline run/launch feedback line inserted above a body */
.tasks-view-lines .line-flash {
  margin: var(--space-8) 0;
  padding: var(--space-8) var(--space-11);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}
.tasks-view-lines .line-flash--ok    { color: var(--primary-text); background: var(--primary-tint); }
.tasks-view-lines .line-flash--error { color: var(--danger); background: var(--danger-bg); }


/* ============================================
   Responsive — drop dense columns on narrow widths
============================================ */
@media (max-width: 768px) {
  .tasks-view-lines .line__date,
  .tasks-view-lines .line__modality,
  .tasks-view-lines .line__staffing { display: none; }
  .tasks-view-lines .field-grid { grid-template-columns: 1fr; }
  .tasks-view-lines .decision__head { flex-direction: column; }
  .tasks-view-lines .decision__actions { justify-content: flex-start; max-width: none; }
}