/* ============================================================================
   Training tracker (#/training, #/training/m/:id, #/training/signoff,
   #/training/manage) and the Today card. Backline tokens only.
   Signature: the module meter, one lit segment per module, the same
   console-meter language the rest of the app uses.
   ============================================================================ */

.tr-view { gap: 14px; }
.tr-view .tr-status-green { --tone: var(--ok); --toneSoft: var(--okSoft); --toneStroke: var(--okStroke); }
.tr-view .tr-status-yellow { --tone: var(--warn); --toneSoft: var(--warnSoft); --toneStroke: var(--amberStroke); }
.tr-view .tr-status-red { --tone: var(--bad); --toneSoft: var(--badSoft); --toneStroke: var(--redStroke); }

/* --- the meter ----------------------------------------------------------- */
.tr-meter { display: flex; gap: 3px; width: 100%; height: 12px; }
.tr-meter .seg { flex: 1 1 0; min-width: 3px; border-radius: 2px; background: var(--surf3); border: 1px solid var(--line); }
.tr-meter .seg.green { background: var(--ok); border-color: var(--ok); }
.tr-meter .seg.red { background: var(--badSoft); border-color: var(--bad); }
.tr-meter .seg.next { background: var(--tealSoft); border-color: var(--teal); }

/* --- hero: the count and the next action ------------------------------- */
.tr-hero { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; border-radius: 18px;
  background: var(--surf); border: 1px solid var(--line2); }
.tr-count { display: flex; align-items: baseline; gap: 8px; }
.tr-count .n { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.tr-count .of { font-size: 14px; font-weight: 600; color: var(--mut); }
.tr-next-label { font-size: 12px; font-weight: 600; color: var(--mut); }
.tr-next-title { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.tr-next-why { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink2); }
.tr-cta { min-height: 56px; font-size: 16px; width: 100%; }
.tr-hero .tr-cta { min-height: 64px; font-size: 17px; }
.tr-cta[disabled], .tr-btn[disabled] { opacity: .45; cursor: not-allowed; }
.tr-alldone { display: flex; flex-direction: column; gap: 6px; }
.tr-alldone .big { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ok); }

/* --- module rows -------------------------------------------------------- */
.tr-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tr-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px 10px 14px;
  background: var(--surf); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); }
.tr-row:hover { border-color: var(--line2); }
.tr-row .tr-row-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-row .tr-row-t { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row .tr-row-s { font-size: 12px; font-weight: 500; color: var(--mut); }
.tr-row .chevron { color: var(--mut); flex-shrink: 0; }
.tr-bar { width: 4px; align-self: stretch; border-radius: 3px; background: var(--tone, var(--line2)); flex-shrink: 0; }

.tr-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  background: var(--toneSoft, var(--surf2)); color: var(--tone, var(--ink2)); border: 1px solid var(--toneStroke, var(--line)); }
.tr-grade { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--mut); letter-spacing: .6px; }

.tr-done { width: 100%; }
.tr-done > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  font-size: 13px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.tr-done > summary::-webkit-details-marker { display: none; }
.tr-done > summary svg { transition: transform .15s ease; color: var(--mut); }
.tr-done[open] > summary svg { transform: rotate(90deg); }
.tr-done .tr-list { margin-top: 6px; }

.tr-section { font-size: 12px; font-weight: 700; color: var(--mut); margin-top: 6px; }

/* --- module page ------------------------------------------------------- */
.tr-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.tr-mhead { display: flex; flex-direction: column; gap: 6px; }
.tr-mtitle { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.08; color: var(--ink); }
.tr-mmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mut); }

.tr-action { position: sticky; bottom: calc(var(--tabbar-h) + 6px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px;
  background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 -8px 24px #0A0C11CC; }
.tr-action .tr-action-note { font-size: 12.5px; font-weight: 500; color: var(--ink2); line-height: 1.4; }
.tr-action .tr-action-note strong { color: var(--teal); }

.tr-guide { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tr-guide details { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; }
.tr-guide details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 10px 14px; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
.tr-guide details > summary::-webkit-details-marker { display: none; }
.tr-guide details > summary svg { transition: transform .15s ease; color: var(--mut); flex-shrink: 0; }
.tr-guide details[open] > summary svg { transform: rotate(90deg); }
.tr-guide .tr-guide-body { padding: 0 14px 14px; }
.tr-guide .tr-lede { padding: 2px 2px 4px; }
.tr-guide .md-p { font-size: 14.5px; line-height: 1.55; color: var(--ink2); margin: 0 0 10px; max-width: 64ch; }
.tr-guide .md-ul, .tr-guide .md-ol { margin: 0 0 10px; padding-left: 20px; color: var(--ink2); font-size: 14.5px; line-height: 1.55; }
.tr-guide .md-ul li, .tr-guide .md-ol li { margin: 3px 0; }
.tr-guide .md-h { font-size: 14px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; font-family: var(--sans); }
.tr-guide .md-quote { margin: 4px 0 12px; padding: 9px 12px; border-left: 3px solid var(--teal); background: var(--tealSoft);
  border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.tr-guide .md-link { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.tr-guide code { font-family: var(--mono); font-size: 12.5px; background: var(--surf3); padding: 1px 5px; border-radius: 5px; }
.md-autolink { word-break: break-all; overflow-wrap: anywhere; }
.tr-chain { margin: 2px 0 12px; padding: 12px 14px; background: var(--surf2); border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink); white-space: pre;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; tab-size: 4; max-width: 100%; }
.tr-chain:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tr-photo { margin: 4px 0 14px; }
.tr-photo img { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: 70vh; object-fit: contain;
  background: var(--surf2); border: 1px solid var(--line); border-radius: 10px; }
.tr-photo figcaption { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--mut); }
.tr-tablewrap { overflow-x: auto; margin: 2px 0 12px; border: 1px solid var(--line); border-radius: 10px; }
.tr-tablewrap table { border-collapse: collapse; width: 100%; font-size: 13px; color: var(--ink2); }
.tr-tablewrap th, .tr-tablewrap td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.tr-tablewrap th { color: var(--ink); font-weight: 700; background: var(--surf2); }
.tr-tablewrap tr:last-child td { border-bottom: none; }

/* --- quiz ---------------------------------------------------------------- */
.tr-quiz { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.tr-qprog { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--mut);
  font-variant-numeric: tabular-nums; }
.tr-qtext { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.tr-choices { display: flex; flex-direction: column; gap: 9px; }
.tr-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; text-align: left;
  background: var(--surf); border: 1.5px solid var(--line2); border-radius: 14px; font-size: 15px; font-weight: 600; color: var(--ink);
  line-height: 1.35; transition: border-color .15s ease, background-color .15s ease; }
.tr-choice .k { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--mut); width: 18px; flex-shrink: 0; }
.tr-choice:hover { border-color: var(--violetStroke); }
.tr-choice[aria-checked='true'] { border-color: var(--violet2); background: var(--violetSoft); }
.tr-choice.right { border-color: var(--ok); background: var(--okSoft); }
.tr-choice.wrong { border-color: var(--bad); background: var(--badSoft); }
.tr-choice[disabled] { cursor: default; }
.tr-feedback { border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink2);
  background: var(--surf2); border: 1px solid var(--line2); }
.tr-feedback strong { display: block; font-size: 15px; margin-bottom: 3px; }
.tr-feedback.right strong { color: var(--ok); }
.tr-feedback.wrong strong { color: var(--bad); }
.tr-qnav { display: flex; gap: 10px; }
.tr-qnav > * { flex: 1 1 0; min-height: 52px; }

.tr-result { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tr-result .score { font-family: var(--serif); font-size: 52px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-result.pass .score { color: var(--ok); }
.tr-result.fail .score { color: var(--warn); }
.tr-result .verdict { font-size: 17px; font-weight: 700; color: var(--ink); }
.tr-review { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tr-review details { background: var(--surf); border: 1px solid var(--line); border-radius: 12px; }
.tr-review summary { list-style: none; display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; font-size: 13.5px;
  font-weight: 600; color: var(--ink); cursor: pointer; }
.tr-review summary::-webkit-details-marker { display: none; }
.tr-review .mark { font-family: var(--mono); font-weight: 600; width: 16px; flex-shrink: 0; }
.tr-review .mark.ok { color: var(--ok); }
.tr-review .mark.no { color: var(--bad); }
.tr-review .body { padding: 0 12px 12px 38px; font-size: 13.5px; color: var(--ink2); line-height: 1.45; }

/* --- sign-off ------------------------------------------------------------ */
.tr-field { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.tr-field > label, .tr-field > .lbl { font-size: 13px; font-weight: 700; color: var(--ink2); }
.tr-select, .tr-input, .tr-textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 13px; font-size: 16px; font-weight: 600;
  background: var(--surf); border: 1px solid var(--line2); color: var(--ink); font-family: var(--sans); }
.tr-textarea { min-height: 80px; resize: vertical; font-weight: 500; }
.tr-select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.tr-err { font-size: 13px; font-weight: 600; color: var(--bad); }
.tr-pick { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px; border-radius: 14px; }
.tr-check { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 13px; cursor: pointer;
  background: var(--surf); border: 1.5px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.tr-check input { width: 22px; height: 22px; accent-color: var(--teal); flex-shrink: 0; margin: 0; }
.tr-check .sub { font-size: 12px; font-weight: 500; color: var(--mut); }
.tr-check .mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-check:has(input:checked) { border-color: var(--teal); background: var(--tealSoft); }
.tr-check .req { font-size: 11px; font-weight: 700; color: var(--teal); flex-shrink: 0; }
.tr-selcount { font-size: 12.5px; font-weight: 600; color: var(--mut); font-variant-numeric: tabular-nums; }
.tr-done-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 18px;
  background: var(--okSoft); border: 1px solid var(--okStroke); }
.tr-done-card .big { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.tr-done-card .meta { font-size: 13px; color: var(--ink2); }

/* --- manage -------------------------------------------------------------- */
.tr-mgr-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 18px;
  background: var(--surf); border: 1px solid var(--line2); }
.tr-mgr-hero .n { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--bad); }
.tr-mgr-hero .n.zero { color: var(--ok); }
.tr-mgr-hero .lbl { font-size: 14px; font-weight: 700; color: var(--ink); }
.tr-mgr-hero .sub { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.tr-mgr-hero .tr-owes { color: var(--ink2); font-weight: 600; margin-top: 6px; max-width: 60ch; }
.tr-mgr-hero .tr-cta { width: auto; flex: 1 1 220px; }
.tr-filters { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.tr-filters .tr-select { flex: 1 1 150px; min-height: 44px; font-size: 14px; padding-top: 8px; padding-bottom: 8px; background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; }
.tr-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--mut); }
.tr-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tr-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.tr-matrix-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 14px; background: var(--surf); }
.tr-matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.tr-matrix th, .tr-matrix td { padding: 0; border-bottom: 1px solid var(--hair); }
.tr-matrix thead th { position: sticky; top: 0; background: var(--surf2); z-index: 2; height: 36px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; color: var(--mut); min-width: 34px; text-align: center; }
.tr-matrix thead th:not(.who) { padding: 0 6px; white-space: nowrap; }
@media (max-width: 599px) {
  .tr-matrix thead th:not(.who) { writing-mode: vertical-rl; height: auto; max-height: 96px; padding: 8px 0;
    overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}
.tr-matrix .who { position: sticky; left: 0; z-index: 3; background: var(--surf); min-width: 158px; max-width: 176px;
  border-right: 1px solid var(--line); text-align: left; }
.tr-matrix thead .who { background: var(--surf2); z-index: 4; padding-left: 12px; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.tr-who { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; min-height: 48px; }
.tr-who-btn { flex: 1 1 0; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 1px; min-height: 40px; justify-content: center; }
.tr-who-btn .nm { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-who-btn .ct { font-family: var(--mono); font-size: 10.5px; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-who-btn .ct.red { color: var(--bad); }
.tr-remind { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px;
  background: var(--surf3); border: 1px solid var(--line2); color: var(--ink); }
.tr-cell { display: flex; align-items: center; justify-content: center; width: 34px; height: 48px; }
.tr-cell button::after { content: ''; position: absolute; inset: -9px -4px; }
.tr-cell button { position: relative; width: 26px; height: 26px; border-radius: 6px; font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1; }
.tr-cell button.green { background: var(--ok); color: #0A0C11; }
.tr-cell button.yellow { background: var(--warnSoft); border: 1.5px solid var(--warn); color: var(--warn); }
.tr-cell button.red { background: var(--bad); color: #FFF4F2; }
.tr-cell .na { color: var(--dim); font-size: 12px; }
.tr-matrix tr.paused .tr-who-btn .nm { color: var(--mut); }

.tr-queue { display: flex; flex-direction: column; gap: 6px; }
.tr-queue-h { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; }
.tr-queue a.tr-row { min-height: 50px; }
.tr-sub { width: 100%; }
.tr-sub > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 8px 14px;
  background: var(--surf); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.tr-sub[open] > summary { border-radius: 14px 14px 0 0; }
.tr-sub > summary::-webkit-details-marker { display: none; }
.tr-sub > summary .cnt { font-family: var(--mono); font-size: 12px; color: var(--mut); }
.tr-sub .tr-sub-body { border: 1px solid var(--line); border-top: none; border-radius: 0 0 14px 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tr-linkout { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--teal); }

/* --- sheet (confirm, proof, person) -------------------------------------- */
.tr-scrim { position: fixed; inset: 0; z-index: 80; background: #0A0C11B8; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.tr-sheet { width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 20px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.tr-sheet h2 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.tr-sheet .tr-msg { background: var(--surf2); border: 1px solid var(--line2); border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.45;
  color: var(--ink); white-space: pre-wrap; }
.tr-sheet .tr-msg-to { font-size: 12.5px; color: var(--mut); }
.tr-sheet .tr-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.tr-sheet .tr-kv dt { color: var(--mut); font-weight: 600; }
.tr-sheet .tr-kv dd { margin: 0; color: var(--ink); font-weight: 600; }
.tr-sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-sheet-actions > * { flex: 1 1 140px; min-height: 50px; }
.tr-btn-bad { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 13px; padding: 13px 18px;
  font-size: 14px; font-weight: 700; background: var(--badSoft); border: 1px solid var(--bad); color: #FF8A7E; }
.tr-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tr-toggle input { width: 22px; height: 22px; accent-color: var(--teal); }
.tr-addons { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-addons label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; border-radius: 10px;
  background: var(--surf); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.tr-addons label:has(input:checked) { border-color: var(--teal); color: var(--ink); background: var(--tealSoft); }
.tr-addons input { accent-color: var(--teal); }
.tr-toast { font-size: 13px; font-weight: 600; color: var(--ok); }

/* --- Today card ---------------------------------------------------------- */
.tr-today { display: flex; align-items: center; gap: 12px; }
.tr-today .tr-today-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-today .tr-today-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.tr-today .tr-today-t .n { font-variant-numeric: tabular-nums; }
.tr-today .tr-today-s { font-size: 12.5px; font-weight: 500; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-today .tr-meter { height: 6px; gap: 2px; }

@media (min-width: 1024px) {
  .tr-view { max-width: 1100px; }
  .tr-view.tr-narrow { max-width: 720px; }
  .tr-hero { flex-direction: row; align-items: center; gap: 24px; padding: 22px 24px; }
  .tr-hero .tr-hero-l { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .tr-hero .tr-cta { width: 280px; flex-shrink: 0; }
  .tr-action { bottom: 12px; }
  .tr-scrim { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-done > summary svg, .tr-guide details > summary svg, .tr-choice { transition: none; }
}

/* --- quiz lock + draft ---------------------------------------------------------- */
.tr-draft { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--amberStroke);
  color: var(--warn); font-family: var(--mono); font-size: 10px; letter-spacing: .4px; vertical-align: 1px; }
.tr-view [data-testid='tr-lock'] { font-size: 14px; font-weight: 500; color: var(--ink2); line-height: 1.45; padding: 12px 14px;
  border-radius: 14px; background: var(--surf2); border: 1px solid var(--line2); }
.tr-view [data-testid='tr-lock'] strong { color: var(--warn); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; }

/* --- optional add-on cells ------------------------------------------------------- */
.tr-cell button.optional { opacity: .62; outline: 1.5px dashed var(--line2); outline-offset: 2px; }
.tr-legend i { box-sizing: border-box; }

/* --- owner answers tile ---------------------------------------------------------- */
.tr-owner-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px;
  padding: 12px 14px; border-radius: 14px; background: var(--surf); border: 1px solid var(--line2); color: var(--ink); text-decoration: none; }
.tr-owner-tile:hover { border-color: var(--violetStroke); }
.tr-owner-tile:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tr-owner-n { display: flex; flex-direction: column; gap: 2px; }
.tr-owner-n strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-owner-n span { font-size: 12.5px; color: var(--mut); font-weight: 500; }

/* --- owner questions -------------------------------------------------------------- */
.tr-q-head { display: flex; flex-direction: column; gap: 3px; }
.tr-q-head strong { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-q-head span { font-size: 13.5px; color: var(--ink2); font-weight: 500; max-width: 60ch; }
.tr-q-group { display: flex; flex-direction: column; gap: 10px; }
.tr-q-group .tr-section { display: flex; align-items: baseline; gap: 8px; color: var(--ink2); font-size: 13px; }
.tr-q-mid { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--mut); }
.tr-q { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surf); border: 1px solid var(--line2);
  border-left: 3px solid var(--warn); }
.tr-q.is-answered { border-left-color: var(--ok); }
.tr-q-text { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.4; max-width: 70ch; }
.tr-q-meta { font-size: 12px; color: var(--mut); font-weight: 500; overflow-wrap: anywhere; }
.tr-q-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-q-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ok); min-height: 20px; }
.tr-q-save { min-height: 44px; min-width: 112px; margin-left: auto; }
.tr-q-save[disabled] { opacity: .45; cursor: default; }
.tr-view .tr-action-note { font-size: 13px; color: var(--ink2); line-height: 1.45; }