/*
 * tech_card.css -- the technical check-up card (static/tech_card.js draws it).
 *
 * Shared by /history and /commodities. Hand-written, because Tailwind here is
 * compiled and a class that only ever appears in a template literal can be
 * missing from the bundle. Every colour is a --t-* token from base.html or a
 * pair spelled out for each theme, so the card follows the theme with no reload.
 *
 * The card's rules hang on #techSection: a page has one check-up card, and gives
 * its element that id. The badge (.tc-badge, in /history's header) and the chip
 * (.tc-chip, on a /commodities card and table row) stand on their own.
 */
#techSection .tc-top { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
#techSection .tc-ring { position:relative; width:88px; height:88px; flex:none; }
#techSection .tc-ring svg { width:88px; height:88px; transform:rotate(-90deg); }
#techSection .tc-ring-num { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1.05; }
#techSection .tc-ring-num b { font-size:1.6rem; font-weight:700; color:var(--t-ink-strong); }
#techSection .tc-ring-num span { font-size:.62rem; color:var(--t-ink-dim); }
#techSection .tc-head { min-width:0; flex:1 1 16rem; }
#techSection .tc-signal { font-size:1.05rem; font-weight:700; }
#techSection .tc-trend { margin-top:.15rem; font-size:.8rem; color:var(--t-ink); }
#techSection .tc-note { margin-top:.25rem; font-size:.72rem; color:var(--t-ink-dim); }
#techSection .tc-chase { margin-top:.9rem; padding:.55rem .75rem; border-radius:.6rem; font-size:.78rem;
  border:1px solid #fcd34d; background:#fffbeb; color:#92400e; }
html.dark #techSection .tc-chase { border-color:#78350f; background:rgba(120,53,15,.25); color:#fcd34d; }
#techSection .tc-parts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.6rem 1rem; margin-top:1rem; }
@media (min-width: 900px) { #techSection .tc-parts { grid-template-columns:repeat(6, minmax(0,1fr)); } }
#techSection .tc-part-label { display:flex; justify-content:space-between; font-size:.68rem; color:var(--t-ink-muted); }
#techSection .tc-bar { height:5px; margin-top:.25rem; border-radius:3px; background:var(--t-surface-alt); overflow:hidden; }
#techSection .tc-bar i { display:block; height:100%; border-radius:3px; background:var(--t-accent); }
#techSection .tc-part-why { margin-top:.25rem; font-size:.66rem; line-height:1.3; color:var(--t-ink-dim); }
#techSection .tc-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem 1.5rem; margin-top:1.1rem; }
@media (min-width: 900px) { #techSection .tc-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
#techSection .tc-h { font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--t-ink-muted); margin-bottom:.4rem; }
#techSection .tc-row { display:flex; gap:.55rem; align-items:flex-start; padding:.38rem 0;
  border-top:1px solid var(--t-line); font-size:.78rem; color:var(--t-ink); }
#techSection .tc-row:first-of-type { border-top:0; }
#techSection .tc-icon { flex:none; width:1.15rem; height:1.15rem; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; font-size:.7rem; font-weight:700; margin-top:.05rem; }
#techSection .tc-row-main { min-width:0; flex:1; }
#techSection .tc-row-sub { font-size:.7rem; color:var(--t-ink-dim); margin-top:.1rem; }
#techSection .tc-val { flex:none; font-variant-numeric:tabular-nums; color:var(--t-ink-strong); font-weight:600; }
#techSection .tc-plan-row { display:flex; justify-content:space-between; gap:.75rem; padding:.38rem 0;
  border-top:1px solid var(--t-line); font-size:.78rem; color:var(--t-ink); }
#techSection .tc-plan-row:first-of-type { border-top:0; }
#techSection .tc-plan-row small { display:block; font-size:.68rem; color:var(--t-ink-dim); }
#techSection .tc-empty { font-size:.78rem; color:var(--t-ink); padding:.4rem 0; }
#techSection .tc-lt { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.74rem; color:var(--t-ink); }
#techSection .tc-lt span b { color:var(--t-ink-strong); font-weight:600; }
#techSection .tc-foot { margin-top:1rem; font-size:.68rem; line-height:1.45; color:var(--t-ink-dim); }
#techSection .tc-loading { font-size:.8rem; color:var(--t-ink-dim); padding:1.25rem 0; }
#techSection .tc-pass { color:#047857; } html.dark #techSection .tc-pass { color:#34d399; }
#techSection .tc-warn { color:#b45309; } html.dark #techSection .tc-warn { color:#fbbf24; }
#techSection .tc-fail { color:#be123c; } html.dark #techSection .tc-fail { color:#fb7185; }
#techSection .tc-na   { color:var(--t-ink-dim); }
#techSection .tc-icon.tc-pass { background:rgba(16,185,129,.14); }
#techSection .tc-icon.tc-warn { background:rgba(245,158,11,.16); }
#techSection .tc-icon.tc-fail { background:rgba(244,63,94,.14); }
#techSection .tc-icon.tc-na   { background:var(--t-surface-alt); }
#techSection .tc-arc-pass { stroke:#059669; } html.dark #techSection .tc-arc-pass { stroke:#34d399; }
#techSection .tc-arc-warn { stroke:#d97706; } html.dark #techSection .tc-arc-warn { stroke:#fbbf24; }
#techSection .tc-arc-fail { stroke:#e11d48; } html.dark #techSection .tc-arc-fail { stroke:#fb7185; }
#techSection .tc-arc-na   { stroke:var(--t-accent); }
.tc-badge { margin-left:.5rem; font-size:.7rem; font-weight:600; line-height:1; padding:.32rem .55rem;
  border-radius:999px; border:1px solid var(--t-line-strong); background:var(--t-surface-alt);
  color:var(--t-ink); cursor:pointer; vertical-align:middle; }
.tc-badge:hover { border-color:var(--t-line-hover); }
.tc-badge b { font-weight:700; }
.tc-badge.tc-pass { color:#047857; border-color:rgba(16,185,129,.45); background:rgba(16,185,129,.10); }
.tc-badge.tc-warn { color:#b45309; border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.10); }
.tc-badge.tc-fail { color:#be123c; border-color:rgba(244,63,94,.45); background:rgba(244,63,94,.10); }
html.dark .tc-badge.tc-pass { color:#34d399; }
html.dark .tc-badge.tc-warn { color:#fbbf24; }
html.dark .tc-badge.tc-fail { color:#fb7185; }
.tc-badge.tc-wait { color:var(--t-ink-muted); cursor:default; }
.tc-badge-spin { display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:-1px;
  border-radius:999px; border:1.5px solid currentColor; border-right-color:transparent;
  animation:tc-spin .8s linear infinite; }
@keyframes tc-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tc-badge-spin { animation:none; } }
/* The chip: a /commodities card's or table row's one-line reading ("Check-up 69 · Buy").
   Tinted like the badge above, smaller, and not a button on its own: the card or
   row around it is the click target, except where a page wires it to jump. */
.tc-chip { display:inline-block; font-size:10px; font-weight:600; line-height:1.25; padding:2px 7px;
  border-radius:999px; border:1px solid var(--t-line-strong); background:var(--t-surface-alt);
  color:var(--t-ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tc-chip b { font-weight:700; }
.tc-chip[data-tc-jump] { cursor:pointer; }
.tc-chip[data-tc-jump]:hover { border-color:var(--t-line-hover); }
.tc-chip.tc-pass { color:#047857; border-color:rgba(16,185,129,.45); background:rgba(16,185,129,.10); }
.tc-chip.tc-warn { color:#b45309; border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.10); }
.tc-chip.tc-fail { color:#be123c; border-color:rgba(244,63,94,.45); background:rgba(244,63,94,.10); }
html.dark .tc-chip.tc-pass { color:#34d399; }
html.dark .tc-chip.tc-warn { color:#fbbf24; }
html.dark .tc-chip.tc-fail { color:#fb7185; }