/* Tesseract components for pages without a framework: the car page, the pairing pages, anything the hub draws itself.
   Built on tokens.css, in the softer look (Forge decision 49): round shapes, soft grounds, depth instead of rules,
   sentence case, no mono badges. Yellow is the signal: calm states stay paper and grey.
   lib/hubui.py writes the HTML for every class here. See ../README.md. */

/* Density: a setting, not a fork. `.t-car` is the same components at arm's length, for a glance and a large touch. */
.t-page {
  --t-gutter: var(--space-5);
  --t-gap: var(--space-3);
  --t-tap: var(--tap-min);
  --t-control: var(--control-h);
  --t-title: var(--text-ui-h3);
  --t-heading: var(--text-ui-h4);
  --t-body: var(--text-ui-body);
  --t-meta: var(--text-ui-meta);
  --t-value: 600 22px/1.15 var(--font-display);
  --t-gallery: 200px;
  --t-mark: 32px;
}
.t-car {
  --t-gutter: var(--space-8);
  --t-gap: var(--space-4);
  --t-tap: 64px;
  --t-control: 64px;
  --t-title: 600 44px/1.1 var(--font-display);
  --t-heading: 600 24px/1.2 var(--font-display);
  --t-body: 400 21px/1.4 var(--font-body);
  --t-meta: 500 18px/1.35 var(--font-body);
  --t-value: 600 30px/1.1 var(--font-display);
  --t-gallery: 260px;
  --t-mark: 44px;
}

/* Page */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-0); color-scheme: dark; }
.t-page {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: var(--bg-0);
  color: var(--text-hi);
  font: var(--t-body);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}
.t-page::before {          /* the slow warm light behind everything, as in Forge */
  content: "";
  position: fixed;
  inset: -20vh -10vw auto auto;
  width: 70vw;
  height: 70vh;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 51, 0.05), transparent 72%);
}
.t-wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: var(--t-gutter); }
.t-stack { display: grid; gap: var(--space-8); }
.t-mark { width: var(--t-mark); height: var(--t-mark); flex: none; }
.t-mark path { fill: none; stroke: var(--yellow); stroke-linecap: round; stroke-linejoin: round; }
.t-mark.is-drawn path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-draw 2.4s var(--ease-calm) forwards; }
.t-mark.is-large { width: 160px; height: 160px; }
.t-muted { color: var(--text-mid); }
.t-time { font: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--text-mid); }

/* Bar and tabs */
.t-bar + .t-tabs { margin-top: calc(var(--space-8) * -1 + var(--space-2)); }
.t-bar { display: flex; align-items: center; gap: var(--space-4); }
.t-bar h1 { margin: 0; font: var(--t-heading); letter-spacing: -0.015em; }
.t-bar .t-side { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.t-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) calc(var(--t-gutter) * -1) 0;
  padding: var(--space-2) var(--t-gutter);
  overflow-x: auto;
  background: var(--overlay-chrome);
  -webkit-backdrop-filter: blur(var(--blur-chrome));
  backdrop-filter: blur(var(--blur-chrome));
}
.t-tab {
  display: flex;
  align-items: center;
  min-height: var(--t-tap);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
  font: var(--t-meta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-calm), color var(--dur-fast) var(--ease-calm);
}
.t-tab:hover { background: rgba(245, 242, 233, 0.06); color: var(--text-hi); }
.t-tab[aria-current="page"] { background: var(--yellow); color: var(--ink); }

/* Sections */
.t-section { display: grid; gap: var(--space-3); }
.t-section > h2 { margin: 0; font: var(--t-heading); letter-spacing: -0.01em; }
.t-section > .t-note { margin: 0; color: var(--text-mid); font: var(--t-meta); }
.t-columns { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-8); align-items: start; }

/* Stats and tiles: soft raised grounds, never hairline boxes */
.t-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--t-gap); }
.t-stat, .t-tile {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: inherit;
  text-decoration: none;
}
.t-tile {
  min-height: 148px;
  box-shadow: var(--lift-sm);
  transition: background-color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);
}
.t-tile:hover { background: var(--bg-2); transform: translateY(-2px); }
.t-tile:active { transform: scale(0.99); }
.t-label { color: var(--text-mid); font: var(--t-meta); }
.t-value { font: var(--t-value); font-variant-numeric: tabular-nums; }
.t-sub { color: var(--text-mid); font: var(--t-meta); }
.is-attention .t-value, .is-attention > .t-title { color: var(--yellow); }

/* Rows */
.t-rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.t-row { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgba(245, 242, 233, 0.04); }
.t-row .t-over, .t-row .t-under { color: var(--text-mid); font: var(--t-meta); }
.t-row .t-title { font-weight: 500; }

/* Progress: the native element, so no inline style is needed and a strict policy stays strict */
.t-meter { display: block; width: 100%; height: var(--progress-h); border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--progress-track); appearance: none; -webkit-appearance: none; }
.t-meter::-webkit-progress-bar { background: var(--progress-track); }
.t-meter::-webkit-progress-value { background: var(--text-hi); border-radius: var(--radius-pill); }
.t-meter::-moz-progress-bar { background: var(--text-hi); }
.t-meter.is-live::-webkit-progress-value { background: var(--yellow); }
.t-meter.is-live::-moz-progress-bar { background: var(--yellow); }

/* Media */
.t-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--t-gallery), 1fr)); gap: var(--t-gap); }
.t-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius); background: var(--bg-1); color: var(--text-hi); text-decoration: none; }
.t-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-shift) var(--ease-calm); }
.t-media:hover img { transform: scale(1.03); }
.t-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-floor); pointer-events: none; }
.t-caption { position: absolute; inset: auto var(--space-4) var(--space-3); z-index: 1; font: var(--t-meta); text-shadow: 0 1px 8px rgba(10, 10, 9, 0.6); }
.t-play { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--overlay-chrome); }
.t-play::before { content: ""; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--yellow); }

/* Hero: the newest thing made, or the mark when there's nothing to show */
.t-hero { position: relative; display: grid; align-content: end; min-height: 46vh; overflow: hidden; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--bg-1); box-shadow: var(--lift); color: var(--text-hi); text-decoration: none; }
.t-hero img, .t-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim-floor), var(--scrim-edge); pointer-events: none; }
.t-hero.is-plain::after { content: none; }
.t-hero.is-plain { grid-template-columns: auto 1fr; align-items: center; align-content: center; gap: var(--space-8); }
.t-hero h2 { position: relative; z-index: 1; margin: 0; font: var(--t-title); letter-spacing: -0.015em; }
.t-hero .t-sub { position: relative; z-index: 1; color: var(--text-hi); font: var(--t-meta); }

/* The viewer */
.t-viewer { width: 100%; max-height: 72vh; border-radius: var(--radius); background: var(--bg-1); object-fit: contain; }

/* Controls */
.t-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--t-control);
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--yellow);
  box-shadow: var(--glow);
  color: var(--ink);
  font: var(--t-meta);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);
}
.t-button:hover { background: var(--yellow-300); }
.t-button:active { transform: scale(0.98); }
.t-button.is-quiet { background: rgba(245, 242, 233, 0.05); box-shadow: none; color: var(--text-hi); }
.t-button.is-quiet:hover { background: rgba(245, 242, 233, 0.09); }
.t-field { width: 100%; min-height: var(--t-control); padding: 0 var(--space-5); border: 0; border-radius: var(--radius); background: rgba(245, 242, 233, 0.05); color: var(--text-hi); font: var(--t-body); }
.t-field:focus-visible, .t-button:focus-visible, .t-tab:focus-visible, .t-tile:focus-visible, .t-media:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.t-form { display: grid; gap: var(--space-4); }
.t-door { display: grid; gap: var(--space-5); max-width: 560px; margin: 12vh auto 0; }
.t-door .t-button { width: 100%; }
.t-message { margin: 0; color: var(--yellow); }
.t-empty { margin: var(--space-3) 0; color: var(--text-mid); }
.t-code { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgba(245, 242, 233, 0.05); font: 400 14px/1.5 var(--font-mono); word-break: break-all; }

/* Motion: a calm rise on the way in, never a bounce */
.t-rise { animation: t-rise var(--dur-base) var(--ease-calm) both; }
.t-rise:nth-child(2) { animation-delay: 60ms; }
.t-rise:nth-child(3) { animation-delay: 120ms; }
.t-rise:nth-child(4) { animation-delay: 180ms; }
@keyframes t-rise { from { transform: translateY(16px); } }   /* no fade: if a browser stops ticking, the page still shows */
@keyframes t-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .t-rise, .t-mark.is-drawn path { animation: none; stroke-dashoffset: 0; }
  .t-tile, .t-media img, .t-button { transition: none; }
}

@media (max-width: 900px) {
  .t-columns { grid-template-columns: 1fr; gap: var(--space-6); }
  .t-hero { min-height: 36vh; padding: var(--space-5); }
  .t-hero.is-plain { grid-template-columns: 1fr; }
}