/* =====================================================================
   components.css - cards, KPIs, status pills, empty states, skeletons, toasts, HTMX swap motion.
   Motion is subtle and CSS-only; theme.css turns it off for "reduce motion".
   ===================================================================== */

/* ---- Icons ---- */
.tm-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ---- Page header ---- */
.tm-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tm-page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.tm-page-sub { color: var(--tm-muted); margin: .25rem 0 0; }

/* ---- Card ---- */
.tm-card {
    background: var(--tm-surface); border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius); box-shadow: var(--tm-shadow);
    padding: 1.25rem;
    transition: transform var(--tm-med) var(--tm-ease), box-shadow var(--tm-med) var(--tm-ease);
}
.tm-card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--tm-shadow-lift); }
.tm-card-title { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }

/* ---- KPI tile ---- */
.tm-kpi { display: flex; align-items: center; gap: 1rem; }
.tm-kpi-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--tm-primary-soft); color: var(--tm-primary); font-size: 1.25rem; }
.tm-kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.tm-kpi-label { color: var(--tm-muted); font-size: .875rem; }

/* ---- Status pill ---- */
.tm-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--tm-surface-2); color: var(--tm-muted); }
.tm-pill-success { background: var(--tm-success-soft); color: var(--tm-success); }
.tm-pill-warning { background: var(--tm-warning-soft); color: var(--tm-warning); }
.tm-pill-danger  { background: var(--tm-danger-soft);  color: var(--tm-danger); }
.tm-pill-info    { background: var(--tm-info-soft);    color: var(--tm-info); }
.tm-pill-primary { background: var(--tm-primary-soft); color: var(--tm-primary); }

/* ---- Empty state ---- */
.tm-empty { text-align: center; padding: 2.5rem 1rem; color: var(--tm-muted); }
.tm-empty-icon { font-size: 2rem; color: var(--tm-primary); margin-bottom: .5rem; }
.tm-empty h3 { font-size: 1.05rem; color: var(--tm-text); margin-bottom: .25rem; }

/* ---- Activity list ---- */
.tm-activity { list-style: none; margin: 0; padding: 0; }
.tm-activity li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--tm-border); font-size: .9rem; }
.tm-activity li:last-child { border-bottom: 0; }
.tm-activity .when { color: var(--tm-muted); white-space: nowrap; }

/* ---- Buttons: gentle press feedback ---- */
.btn { transition: transform var(--tm-fast) var(--tm-ease), background-color var(--tm-fast) var(--tm-ease), border-color var(--tm-fast) var(--tm-ease); }
.btn:active { transform: scale(.98); }

/* ---- Skeleton loading (animates transform only, so it stays cheap) ---- */
.tm-skeleton { position: relative; overflow: hidden; background: var(--tm-surface-2); border-radius: var(--tm-radius-sm); min-height: 1rem; }
.tm-skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tm-text) 8%, transparent), transparent);
    transform: translateX(-100%);
    animation: tm-shimmer 1.4s infinite;
}
@keyframes tm-shimmer { to { transform: translateX(100%); } }

/* ---- HTMX swap: new content fades up a little ---- */
.swap-in.htmx-added, .htmx-added .swap-in { opacity: 0; transform: translateY(6px); }
.swap-in { opacity: 1; transform: none; transition: opacity var(--tm-med) var(--tm-ease), transform var(--tm-med) var(--tm-ease); }

/* ---- Page load: content eases in once ---- */
@keyframes tm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tm-rise { animation: tm-rise var(--tm-med) var(--tm-ease) both; }

/* ---- Text comparison (prompt versions). Colour is backed by a +/- marker, never colour alone. ---- */
.tm-diff { background: var(--tm-surface-2); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm); padding: .75rem; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.tm-diff span { display: block; white-space: pre-wrap; }
.tm-diff-added { background: var(--tm-success-soft); }
.tm-diff-removed { background: var(--tm-danger-soft); }
.tm-diff-same { color: var(--tm-muted); }

/* ---- Toasts ---- */
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }
.tm-toast {
    background: var(--tm-surface); color: var(--tm-text);
    border: 1px solid var(--tm-border); border-left: 4px solid var(--tm-primary);
    border-radius: var(--tm-radius-sm); box-shadow: var(--tm-shadow-lift);
    padding: .7rem 1rem; max-width: 360px;
    animation: tm-rise var(--tm-med) var(--tm-ease) both;
}
.tm-toast.error { border-left-color: var(--tm-danger); }


/* ---- File drop zone (Task 11): a label around a real file input, so it works with keyboard and without script ---- */
.tm-dropzone {
    display: block; text-align: center; cursor: pointer;
    border: 2px dashed var(--tm-border); border-radius: var(--tm-radius-sm);
    padding: 2rem 1rem; color: var(--tm-muted);
    transition: border-color var(--tm-fast) var(--tm-ease), background-color var(--tm-fast) var(--tm-ease);
}
.tm-dropzone:hover, .tm-dropzone.dragover, .tm-dropzone:focus-within { border-color: var(--tm-primary); background: var(--tm-primary-soft); }
.tm-dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tm-dropzone strong { color: var(--tm-text); }
.tm-dropzone-icon { font-size: 1.75rem; color: var(--tm-primary); }
.tm-file-list { list-style: none; margin: 1rem 0 0; padding: 0; font-size: .9rem; }
.tm-file-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--tm-border); }
.tm-file-list li:last-child { border-bottom: 0; }
.tm-progress { width: 100%; height: .5rem; accent-color: var(--tm-primary); }

/* ---- Match scores: ring, bars, cards, drawer (Task 19) ---- */
.tm-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.tm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tm-ring-track { fill: none; stroke: var(--tm-surface-2); stroke-width: 9; }
.tm-ring-fill { fill: none; stroke: var(--tm-muted); stroke-width: 9; stroke-linecap: round; animation: tm-ring-in .8s var(--tm-ease); }
.tm-ring-num { position: relative; font-weight: 700; font-size: 1.05em; letter-spacing: -.02em; }
.tm-tone-strong .tm-ring-fill { stroke: var(--tm-success); }
.tm-tone-fair   .tm-ring-fill { stroke: var(--tm-warning); }
.tm-tone-weak   .tm-ring-fill { stroke: var(--tm-danger); }
@keyframes tm-ring-in { from { stroke-dasharray: 0 276.46; } }

.tm-bar { display: grid; grid-template-columns: 8.5rem 1fr 2rem; align-items: center; gap: .6rem; font-size: .85rem; }
.tm-bar-label { color: var(--tm-muted); }
.tm-bar-track { height: .5rem; border-radius: 999px; background: var(--tm-surface-2); overflow: hidden; }
.tm-bar-fill { height: 100%; border-radius: 999px; background: var(--tm-primary); transition: width var(--tm-med) var(--tm-ease); }
.tm-bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.tm-match { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; }
.tm-match-rank { color: var(--tm-muted); font-size: .8rem; font-weight: 600; }
.tm-match-bars { display: grid; gap: .3rem; margin-top: .75rem; }
.tm-quote { margin: .25rem 0 .75rem; padding: .4rem .75rem; border-left: 3px solid var(--tm-border); color: var(--tm-text); font-size: .9rem; background: var(--tm-surface-2); border-radius: 0 var(--tm-radius-sm) var(--tm-radius-sm) 0; }
.tm-label-word { font-weight: 700; }
.tm-tone-strong .tm-label-word { color: var(--tm-success); }
.tm-tone-fair   .tm-label-word { color: var(--tm-warning); }
.tm-tone-weak   .tm-label-word { color: var(--tm-danger); }
@media (max-width: 575.98px) { .tm-bar { grid-template-columns: 6.5rem 1fr 2rem; } }
.tm-bar:has(.tm-bar-label:empty) { grid-template-columns: 1fr 2rem; }
.tm-bar-label:empty { display: none; }

/* ---- Pipeline kanban (Task 22). The board scrolls sideways; nothing else on the page does. ---- */
.tm-kanban { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; }
.tm-kanban-col { flex: 0 0 17rem; scroll-snap-align: start; background: var(--tm-surface-2); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: .75rem; }
.tm-kanban-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tm-kanban-title { font-size: .95rem; font-weight: 600; margin: 0; }
.tm-kanban-hint { color: var(--tm-muted); font-size: .8rem; margin: .15rem 0 .6rem; }
.tm-kanban-list { display: grid; gap: .5rem; min-height: 4rem; align-content: start; }
.tm-kanban-list:not(:has(.tm-kanban-card))::before { content: 'Nothing here'; display: grid; place-items: center; min-height: 4rem; color: var(--tm-muted); font-size: .85rem; border: 1px dashed var(--tm-border); border-radius: var(--tm-radius-sm); }
.tm-kanban-card {
    background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm);
    box-shadow: var(--tm-shadow); padding: .65rem .75rem; cursor: grab; font-size: .9rem;
    transition: transform var(--tm-fast) var(--tm-ease), box-shadow var(--tm-fast) var(--tm-ease);
}
.tm-kanban-card:hover { transform: translateY(-2px); box-shadow: var(--tm-shadow-lift); }
.tm-kanban-card[aria-busy=true] { opacity: .6; }
.tm-kanban-card.dropped { animation: tm-drop .3s var(--tm-ease); }
.tm-kanban-ghost { opacity: .45; }
.tm-kanban-meta { color: var(--tm-muted); font-size: .75rem; margin-top: .4rem; }
.tm-kanban-move { margin-top: .4rem; font-size: .8rem; }
.tm-kanban-move summary { cursor: pointer; color: var(--tm-primary); }
@keyframes tm-drop { from { background: var(--tm-primary-soft); } }