/* Record tabs + site context: shared primitives for every new component (status glyph, pill, stamped code tag,
   avatar, icon, buttons, caps label, record link). Ported from the design-system reference
   (docs/design-system/reference/screens.css: .ico, .btn, .st, .pill, .code, .av, .caps) plus the four v2 glyph
   meanings (ok, cust, qt, bill) from the approved record-tabs mockup (v2/src/records.css). Scoped under .rt with
   rt- class names; values only through var(--ds-*). Tone classes match Status.tone in records-contract.ts. */

.rt .rt-ico { width: var(--ds-ico); height: var(--ds-ico); flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rt .rt-ico.rt-ico-sm { width: 12px; height: 12px; stroke-width: 2; }

/* status glyph + word (D14): the glyph carries the colour, the word stays ink-2 */
.rt .rt-st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-medium); letter-spacing: var(--ds-track-sm); white-space: nowrap; color: var(--ds-ink-2); }
.rt .rt-st::before, .rt .rt-pill::before { content: ""; width: 12px; height: 12px; flex: none; display: inline-block; background: currentColor; -webkit-mask: var(--rt-g) center / 12px 12px no-repeat; mask: var(--rt-g) center / 12px 12px no-repeat; }
.rt .rt-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--ds-s-2) 0 6px; border-radius: var(--ds-r-sm); font-size: var(--ds-text-sm); font-weight: var(--ds-w-medium); letter-spacing: var(--ds-track-sm); white-space: nowrap; color: var(--ds-ink-2); background: var(--ds-tint); }
.rt .rt-st-review { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='6' r='1.5'/%3E%3C/svg%3E"); }
.rt .rt-st-review::before { background: var(--ds-st-route); }
.rt .rt-pill.rt-st-review { background: var(--ds-st-route-bg); }
.rt .rt-st-warn { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6 3.7v2.6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.1' r='.8'/%3E%3C/svg%3E"); }
.rt .rt-st-warn::before { background: var(--ds-st-route); }
.rt .rt-pill.rt-st-warn { background: var(--ds-st-route-bg); }
.rt .rt-st-bad { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cmask id='m'%3E%3Crect width='12' height='12' fill='%23fff'/%3E%3Cpath d='M6 3.2v3.3' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.6' r='.85' fill='%23000'/%3E%3C/mask%3E%3Ccircle cx='6' cy='6' r='5.5' mask='url%28%23m%29'/%3E%3C/svg%3E"); }
.rt .rt-st-bad::before { background: var(--ds-st-late); }
.rt .rt-pill.rt-st-bad { background: var(--ds-st-late-bg); }
.rt .rt-st-done { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cmask id='m'%3E%3Crect width='12' height='12' fill='%23fff'/%3E%3Cpath d='M3.7 6.1 5.3 7.7 8.4 4.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='6' cy='6' r='5.5' mask='url%28%23m%29'/%3E%3C/svg%3E"); }
.rt .rt-st-done::before { background: var(--ds-st-done); }
.rt .rt-pill.rt-st-done { background: var(--ds-st-done-bg); }
.rt .rt-st-ok { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cmask id='m'%3E%3Crect width='12' height='12' fill='%23fff'/%3E%3Cpath d='M3.7 6.1 5.3 7.7 8.4 4.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='6' cy='6' r='5.5' mask='url%28%23m%29'/%3E%3C/svg%3E"); }
.rt .rt-st-ok::before { background: var(--ds-icon); }
.rt .rt-st-cust { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6 2.75a3.25 3.25 0 0 1 0 6.5z'/%3E%3C/svg%3E"); }
.rt .rt-st-cust::before { background: var(--ds-ink-3); }
.rt .rt-st-qt { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.25' y='1.25' width='9.5' height='9.5' rx='2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.rt .rt-st-qt::before { background: var(--ds-ink-3); }
.rt .rt-st-sched { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.rt .rt-st-sched::before { background: var(--ds-st-sched); }
.rt .rt-st-bill { --rt-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.25' y='1.25' width='9.5' height='9.5' rx='2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='4' y='4' width='4' height='4' rx='.75'/%3E%3C/svg%3E"); }
.rt .rt-st-bill::before { background: var(--ds-ink-3); }

/* D23 stamped equipment-code tag */
.rt .rt-code { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: var(--ds-r-tag); font-size: var(--ds-text-caps); line-height: 1; font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-tag); text-transform: uppercase; color: var(--ds-ink); background: var(--ds-tag-bg); font-variant-numeric: var(--ds-nums); white-space: nowrap; }
.rt .rt-av { width: 24px; height: 24px; border-radius: var(--ds-r-full); display: inline-grid; place-items: center; flex: none; background: var(--ds-av-1); color: var(--ds-ink-2); font-size: var(--ds-text-av); font-weight: var(--ds-w-semi); letter-spacing: 0.03em; }
.rt .rt-caps { font-size: var(--ds-text-caps); line-height: var(--ds-lh-caps); font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-caps); text-transform: uppercase; color: var(--ds-ink-3); }
.rt .rt-kk { font-variant-numeric: var(--ds-nums); color: var(--ds-ink-2); margin-right: 6px; }
.rt .rt-link { color: inherit; text-decoration: none; cursor: pointer; }
.rt .rt-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rt .rt-link:focus-visible, .rt .rt-btn:focus-visible, .rt [data-rt-action]:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); }

/* buttons (D17): one filled primary per screen; secondary flat with a 1px line; quiet text */
.rt .rt-btn { height: var(--ds-control-h); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s-2); padding: 0 var(--ds-s-3); border: 0; border-radius: var(--ds-r-md); font-family: var(--ds-font); font-size: var(--ds-text-base); font-weight: var(--ds-w-medium); white-space: nowrap; cursor: pointer; background: transparent; color: var(--ds-ink); }
.rt .rt-btn-primary { background: var(--ds-action); color: var(--ds-action-fg); font-weight: var(--ds-w-semi); box-shadow: var(--ds-e-primary); }
.rt .rt-btn-primary:hover { background: var(--ds-action-hover); }
.rt .rt-btn-primary:active { background: var(--ds-action-press); box-shadow: var(--ds-e-primary-press); transform: translateY(0.5px); }
.rt .rt-btn-lg { height: var(--ds-primary-h); padding: 0 var(--ds-s-5); }
.rt .rt-btn-secondary { background: var(--ds-surface); color: var(--ds-ink); box-shadow: var(--ds-e-secondary); }
.rt .rt-btn-secondary:hover { background: var(--ds-paper-hover); box-shadow: inset 0 0 0 1px var(--ds-ink-3); }
.rt .rt-btn-secondary:active { background: var(--ds-canvas); box-shadow: inset 0 0 0 1px var(--ds-field); transform: translateY(0.5px); }
.rt .rt-btn-secondary .rt-ico { color: var(--ds-ink-2); }
.rt .rt-btn-quiet { color: var(--ds-ink-2); padding: 0 var(--ds-s-2); }
.rt .rt-btn-quiet .rt-ico { color: var(--ds-icon); }
.rt .rt-btn:disabled { background: var(--ds-disabled-bg); color: var(--ds-disabled-fg); box-shadow: inset 0 0 0 1px var(--ds-disabled-bd); cursor: not-allowed; transform: none; }
.rt .rt-btn-primary:disabled { background: var(--ds-disabled-primary-bg); color: var(--ds-disabled-primary-fg); box-shadow: none; }