/* ==========================================================================
   Work thumbnail · Training management ("The record that decides who is allowed to fly")
   Inline SVG, 800 x 520 user units, on the portfolio's sunken grey.
   At rest: the complete record, sign-off signed, validity written to the roster.
   ========================================================================== */

.tr {
  /* portfolio tokens (css/tokens.css), with their values as a fallback */
  --tr-panel: var(--color-surface-sunken, #E7E9E4);
  --tr-accent: var(--color-accent, #E4521F);
  --tr-mono: var(--font-mono, "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace);
  --tr-app: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  position: relative;
  display: block;
  aspect-ratio: 800 / 520;
  max-width: 100%;
  background: var(--tr-panel);
  border-radius: 2px;
  overflow: hidden;
}
.tr-svg { display: block; width: 100%; height: 100%; }
.tr-svg g, .tr-svg rect, .tr-svg path, .tr-svg circle, .tr-svg text { transform-box: fill-box; }

.tr-mono { font-family: var(--tr-mono); font-weight: 500; letter-spacing: 0.08em; }
.tr-head { font-size: 10.5px; fill: #0F1113; }
.tr-sub { font-size: 8.5px; fill: #8A8F96; }
.tr-sname { font-size: 8.5px; fill: #505258; }
.tr-mode { font-size: 7.5px; fill: #8A8F96; }
.tr-month { font-size: 8px; fill: #8A8F96; letter-spacing: 0.04em; }
.tr-snum { font: 600 15px var(--tr-app); fill: #292A2E; }
.tr-big { font: 700 64px var(--tr-app); fill: #292A2E; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tr-small { font: 400 11px var(--tr-app); fill: #505258; }
.tr-ok-t { font: 600 11.5px var(--tr-app); fill: #37471F; }
.tr-ok-s { font: 400 10px var(--tr-app); fill: #37471F; }

.tr-arc, .tr-sig { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* rest: the padlock is open */
.tr-shackle { transform: translateY(-10px); }

/* transform origins */
.tr-cell, .tr-clear, .tr-lock, .tr-ok, .tr-valid, .tr-reval { transform-origin: center; }
.tr-bar { transform-origin: left center; }

/* small cards: drop the smallest type */
.tr.is-compact .tr-sub,
.tr.is-compact .tr-mode,
.tr.is-compact .tr-month,
.tr.is-compact .tr-sname,
.tr.is-compact .tr-small,
.tr.is-compact .tr-legend { visibility: hidden; }
.tr.is-compact .tr-head { font-size: 13px; }

a:focus-visible > .tr { outline: 2px solid var(--tr-accent); outline-offset: 3px; }