/* Throughscan design system — components
   Styles for the reusable web components and report primitives. */

/* ---- card ---- */
.tl-card {
  background: var(--tl-surface); border: 1px solid var(--tl-line);
  border-radius: var(--tl-r-lg); padding: var(--tl-5); box-shadow: var(--tl-shadow-1);
}
.tl-card--flat { box-shadow: none; }
.tl-card--pad-lg { padding: var(--tl-6); }

/* ---- tool card (landing grid) ---- */
.tl-tool {
  display: flex; flex-direction: column; gap: var(--tl-2);
  background: var(--tl-surface); border: 1px solid var(--tl-line);
  border-radius: var(--tl-r-lg); padding: var(--tl-5);
  text-decoration: none; color: inherit; transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.tl-tool:hover { text-decoration: none; border-color: var(--tl-line-2); transform: translateY(-2px); box-shadow: var(--tl-shadow-2); }
.tl-tool__icon { width: 38px; height: 38px; border-radius: var(--tl-r-md); background: var(--tl-accent-wash); color: var(--tl-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: var(--tl-2); }
.tl-tool__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tl-tool__desc { font-size: 13.5px; color: var(--tl-ink-2); line-height: 1.5; }
.tl-tool__foot { margin-top: auto; padding-top: var(--tl-3); font-size: 12px; color: var(--tl-ink-3); display: flex; align-items: center; gap: 6px; }

/* ---- badges / pills ---- */
.tl-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: var(--tl-r-pill); background: var(--tl-surface-2); color: var(--tl-ink-2); border: 1px solid var(--tl-line); }
.tl-badge--accent  { background: var(--tl-accent-wash);  color: var(--tl-accent);  border-color: transparent; }
.tl-badge--success { background: var(--tl-success-wash); color: var(--tl-success); border-color: transparent; }
.tl-badge--warn    { background: var(--tl-warn-wash);    color: var(--tl-warn);    border-color: transparent; }
.tl-badge--danger  { background: var(--tl-danger-wash);  color: var(--tl-danger);  border-color: transparent; }

/* ---- stat / metric cards ---- */
.tl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--tl-3); }
.tl-stat { background: var(--tl-surface-2); border-radius: var(--tl-r-md); padding: var(--tl-4); }
.tl-stat__label { font-size: 13px; color: var(--tl-ink-2); margin-bottom: 6px; }
.tl-stat__value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.tl-stat__hint { font-size: 12px; color: var(--tl-ink-3); margin-top: 6px; }

/* ---- callouts ---- */
.tl-callout { display: flex; gap: var(--tl-3); padding: var(--tl-4); border-radius: var(--tl-r-md); border: 1px solid var(--tl-line); background: var(--tl-surface-2); margin-bottom: var(--tl-3); }
.tl-callout__icon { flex: none; font-size: 18px; line-height: 1.5; }
.tl-callout__title { font-weight: 600; font-size: 14px; margin: 0 0 2px; }
.tl-callout__body { font-size: 14px; color: var(--tl-ink-2); margin: 0; line-height: 1.55; }
.tl-callout--info    { background: var(--tl-accent-wash);  border-color: transparent; }
.tl-callout--info    .tl-callout__icon { color: var(--tl-accent); }
.tl-callout--success { background: var(--tl-success-wash); border-color: transparent; }
.tl-callout--success .tl-callout__icon { color: var(--tl-success); }
.tl-callout--warn    { background: var(--tl-warn-wash);    border-color: transparent; }
.tl-callout--warn    .tl-callout__icon { color: var(--tl-warn); }
.tl-callout--danger  { background: var(--tl-danger-wash);  border-color: transparent; }
.tl-callout--danger  .tl-callout__icon { color: var(--tl-danger); }

/* ---- table ---- */
.tl-table-wrap { overflow-x: auto; border: 1px solid var(--tl-line); border-radius: var(--tl-r-md); }
.tl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tl-table th { text-align: left; font-weight: 500; color: var(--tl-ink-2); padding: 10px 14px; border-bottom: 1px solid var(--tl-line); background: var(--tl-surface-2); white-space: nowrap; position: sticky; top: 0; cursor: pointer; user-select: none; }
.tl-table th[aria-sort] .tl-table__caret { opacity: 1; }
.tl-table__caret { opacity: 0.35; margin-left: 4px; font-size: 12px; }
.tl-table td { padding: 10px 14px; border-bottom: 1px solid var(--tl-line); vertical-align: top; }
.tl-table tr:last-child td { border-bottom: 0; }
.tl-table tbody tr:hover { background: var(--tl-surface-2); }
.tl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tl-table__note { font-size: 12px; color: var(--tl-ink-3); padding: var(--tl-2) var(--tl-3); }

/* ---- score bars ---- */
.tl-score { margin-bottom: var(--tl-4); }
.tl-score__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.tl-score__label { font-size: 14px; font-weight: 500; }
.tl-score__val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-score__track { height: 8px; border-radius: var(--tl-r-pill); background: var(--tl-line); overflow: hidden; }
.tl-score__fill { height: 100%; border-radius: var(--tl-r-pill); background: var(--tl-accent); }
.tl-score__fill--good { background: var(--tl-success); }
.tl-score__fill--mid  { background: var(--tl-warn); }
.tl-score__fill--low  { background: var(--tl-danger); }
.tl-score__detail { font-size: 13px; color: var(--tl-ink-2); margin-top: 6px; }

/* ---- diff (before/after) ---- */
.tl-diff { border: 1px solid var(--tl-line); border-radius: var(--tl-r-md); overflow: hidden; margin-bottom: var(--tl-4); }
.tl-diff__label { font-size: 13px; font-weight: 500; padding: 10px 14px; background: var(--tl-surface-2); border-bottom: 1px solid var(--tl-line); }
.tl-diff__cols { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .tl-diff__cols { grid-template-columns: 1fr; } }
.tl-diff__col { padding: 12px 14px; font-size: 13.5px; line-height: 1.55; }
.tl-diff__col + .tl-diff__col { border-left: 1px solid var(--tl-line); }
@media (max-width: 720px) { .tl-diff__col + .tl-diff__col { border-left: 0; border-top: 1px solid var(--tl-line); } }
.tl-diff__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.tl-diff__tag--before { color: var(--tl-danger); }
.tl-diff__tag--after  { color: var(--tl-success); }
.tl-diff__note { font-size: 12px; color: var(--tl-ink-3); padding: 8px 14px; border-top: 1px dashed var(--tl-line); }

/* ---- list items ---- */
.tl-item { padding: var(--tl-4) 0; border-bottom: 1px solid var(--tl-line); }
.tl-item:last-child { border-bottom: 0; }
.tl-item__title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.tl-item__body { font-size: 14px; color: var(--tl-ink-2); margin: 0; line-height: 1.55; }
.tl-item__meta { font-size: 12px; color: var(--tl-ink-3); margin-top: 6px; }

/* ---- kb (Q&A) ---- */
.tl-kb { border: 1px solid var(--tl-line); border-radius: var(--tl-r-md); padding: var(--tl-4); margin-bottom: var(--tl-3); background: var(--tl-surface); }
.tl-kb__q { font-size: 14.5px; font-weight: 600; margin: 0 0 var(--tl-2); }
.tl-kb__a { font-size: 14px; color: var(--tl-ink-2); margin: 0; line-height: 1.6; }
.tl-kb__src { font-size: 12px; color: var(--tl-ink-3); margin-top: var(--tl-2); }

/* ---- uploader ---- */
.tl-upload { border: 1.5px dashed var(--tl-line-2); border-radius: var(--tl-r-lg); padding: var(--tl-7) var(--tl-5); text-align: center; background: var(--tl-surface); transition: border-color 120ms ease, background 120ms ease; }
.tl-upload.is-drag { border-color: var(--tl-accent); background: var(--tl-accent-wash); }
.tl-upload.is-error { border-color: var(--tl-danger); }
.tl-upload__icon { font-size: 30px; color: var(--tl-ink-3); margin-bottom: var(--tl-2); }
.tl-upload__title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.tl-upload__sub { font-size: 13px; color: var(--tl-ink-2); }
.tl-upload__err { color: var(--tl-danger); font-size: 13px; margin-top: var(--tl-3); }
.tl-upload__file { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--tl-3); font-size: 13px; background: var(--tl-surface-2); border: 1px solid var(--tl-line); border-radius: var(--tl-r-pill); padding: 6px 12px; }

/* ---- report shell ---- */
.tl-report__head { margin-bottom: var(--tl-6); }
.tl-report__title { font-size: 26px; margin-bottom: var(--tl-2); }
.tl-report__for { font-size: 13px; color: var(--tl-ink-3); }
.tl-report__summary { font-size: 16px; color: var(--tl-ink-2); line-height: 1.65; margin: var(--tl-4) 0 var(--tl-5); }
.tl-report__section { margin-bottom: var(--tl-7); }
.tl-report__section h3 { display: flex; align-items: center; gap: 8px; padding-bottom: var(--tl-2); border-bottom: 1px solid var(--tl-line); margin-bottom: var(--tl-4); }
.tl-report__actions { display: flex; gap: var(--tl-2); flex-wrap: wrap; }
.tl-report__mode { font-size: 12px; }

/* ---- benchmark (vs peers) ---- */
.tl-bm { margin-bottom: var(--tl-4); }
.tl-bm__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.tl-bm__label { font-size: 14px; font-weight: 500; }
.tl-bm__val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-bm__track { position: relative; height: 8px; border-radius: var(--tl-r-pill); background: linear-gradient(90deg, var(--tl-danger-wash), var(--tl-surface-2) 50%, var(--tl-success-wash)); border: 1px solid var(--tl-line); }
.tl-bm__marker { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--tl-surface); box-shadow: 0 0 0 1px var(--tl-line-2); }
.tl-bm__marker--top { background: var(--tl-success); }
.tl-bm__marker--mid { background: var(--tl-warn); }
.tl-bm__marker--bottom { background: var(--tl-danger); }
.tl-bm__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--tl-ink-3); }
.tl-bm__pct { font-weight: 600; }
.tl-bm__pct--top { color: var(--tl-success); }
.tl-bm__pct--mid { color: var(--tl-warn); }
.tl-bm__pct--bottom { color: var(--tl-danger); }

/* ---- impact (dollars / tickets / hours) ---- */
.tl-impact { background: var(--tl-accent-wash); border-radius: var(--tl-r-lg); padding: var(--tl-5); }
.tl-impact__headline { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--tl-accent); margin-bottom: var(--tl-4); line-height: 1.25; }
.tl-impact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--tl-3); }
.tl-impact__item { background: var(--tl-surface); border-radius: var(--tl-r-md); padding: var(--tl-3) var(--tl-4); }
.tl-impact__v { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.tl-impact__l { font-size: 13px; color: var(--tl-ink-2); margin-top: 2px; }
.tl-impact__n { font-size: 11px; color: var(--tl-ink-3); margin-top: 4px; }
.tl-impact__assume { margin-top: var(--tl-4); font-size: 13px; color: var(--tl-ink-2); }
.tl-impact__assume summary { cursor: pointer; font-weight: 500; }
.tl-impact__assume ul { margin: var(--tl-2) 0 0; padding-left: 1.2em; }
.tl-impact__assume li { margin-bottom: 4px; }

/* interactive calculator inside an impact section */
.tl-calc { background: var(--tl-surface); border: 1px solid var(--tl-line); border-radius: var(--tl-r-md); padding: var(--tl-4); margin-bottom: var(--tl-4); }
.tl-calc__out { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tl-3); flex-wrap: wrap; padding-bottom: var(--tl-3); border-bottom: 1px solid var(--tl-line); margin-bottom: var(--tl-3); }
.tl-calc__label { font-size: 13px; color: var(--tl-ink-2); }
.tl-calc__val { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--tl-accent); font-variant-numeric: tabular-nums; }
.tl-calc__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tl-4) var(--tl-5); }
.tl-calc__ctrl { display: block; font-size: 13px; }
.tl-calc__ctrl-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--tl-ink-2); }
.tl-calc__ctrl-label output { font-weight: 600; color: var(--tl-ink); font-variant-numeric: tabular-nums; }
.tl-calc__ctrl input[type=range] { width: 100%; accent-color: var(--tl-accent); }

/* ---- hero scorecard (product visual) ---- */
.tl-scorecard { background: var(--tl-surface); border: 1px solid var(--tl-line); border-radius: var(--tl-r-xl); padding: var(--tl-5); box-shadow: var(--tl-shadow-2); }
.tl-scorecard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tl-4); }
.tl-scorecard__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tl-ink-2); }
.tl-scorecard__title .tl-i { font-size: 18px; color: var(--tl-accent); }
.tl-sc-defl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tl-3); }
.tl-sc-cell { background: var(--tl-surface-2); border-radius: var(--tl-r-md); padding: var(--tl-3) var(--tl-4); }
.tl-sc-k { font-size: 12px; color: var(--tl-ink-3); margin-bottom: 4px; }
.tl-sc-v { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.tl-sc-v--muted { color: var(--tl-ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.tl-sc-v--accent { color: var(--tl-accent); }
.tl-sc-v--warm { color: var(--tl-warm); }
.tl-sc-row { display: flex; gap: var(--tl-4); flex-wrap: wrap; font-size: 13px; color: var(--tl-ink-2); padding: var(--tl-4) 2px; border-bottom: 1px solid var(--tl-line); }
.tl-sc-row strong { color: var(--tl-ink); font-variant-numeric: tabular-nums; }
.tl-sc-exposure { margin-top: var(--tl-4); background: var(--tl-accent-wash); border-radius: var(--tl-r-md); padding: var(--tl-4); }
.tl-sc-big { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--tl-accent); }
.tl-sc-big span { font-size: 15px; font-weight: 500; color: var(--tl-ink-2); margin-left: 4px; }

/* ---- empty / loading / error states ---- */
.tl-state { text-align: center; padding: var(--tl-8) var(--tl-5); color: var(--tl-ink-2); }
.tl-state__icon { font-size: 32px; color: var(--tl-ink-3); margin-bottom: var(--tl-3); }
.tl-state__title { font-size: 16px; font-weight: 500; color: var(--tl-ink); margin-bottom: var(--tl-2); }
.tl-state__sub { font-size: 14px; }
.tl-progress { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tl-ink-2); }