/* cmr-tool.com page chassis. Loaded after style.css (the Oxcardio sheet,
   untouched) on every page. Compact spacing, shared panels, tables, fields,
   result rows, and the token aliases the ported tools use. */
:root {
  --bg3: #202020; --border2: rgba(255,255,255,0.16);
  --text2: #c4c4c4; --text3: #8a8a8a;
  --blue-bg: rgba(78,205,196,0.12); --blue-text: #4ecdc4; --blue-border: rgba(78,205,196,0.4); --blue-btn: #4ecdc4;
  --green-bg: rgba(78,205,196,0.12); --green-text: #4ecdc4; --green-border: rgba(78,205,196,0.4);
  --amber-bg: rgba(255,196,84,0.12); --amber-text: #ffd58a; --amber-border: rgba(255,196,84,0.4);
  --red-bg: rgba(255,138,138,0.12); --red-text: #ff8a8a; --red-border: rgba(255,138,138,0.4);
  --grey-bg: rgba(255,255,255,0.06); --grey-text: #aaaaaa; --grey-border: rgba(255,255,255,0.12);
  --r: 6px; --rlg: 10px;
}
.nav-wrapper { background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--border); }
.nav-links { gap: 26px; }
.nav-links a { font-size: 0.95rem; }
.nav-links a.on { color: var(--white); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.cmr-mark { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--white); line-height: 1; }
.cmr-mark span { color: var(--accent); }
@media (max-width: 900px) { .nav-links a.on { border: 0; color: var(--accent); } }

.page-banner { padding: calc(var(--nav-h) + 20px) 0 18px; }
.page-banner h1 { font-size: clamp(1.45rem, 2.3vw, 1.9rem); margin-bottom: 0.2rem; }
.page-banner p { font-size: 0.95rem; max-width: none; color: var(--muted); }

.tp-section { padding: 20px 0 44px; }
.tp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rlg); padding: 16px 18px; margin-bottom: 14px; }
.tp h2, .rp-panel h2 { font-size: 1.05rem; font-weight: 600; color: var(--white); margin: 0 0 8px; line-height: 1.3; }
.tp h3 { font-size: 0.92rem; font-weight: 600; color: var(--white); margin: 14px 0 6px; }
.tp h3:first-child { margin-top: 0; }
.src { font-size: 0.8rem; color: var(--muted); margin: 0 0 8px; }
.src a, .tp-refs a, .tr a { color: var(--accent); }
.tp p { font-size: 0.92rem; }

.tp-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font-size: 0.9rem; }
.tp-toc a { color: var(--accent); }

.tt-wrap { overflow-x: auto; }
.tt { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tt th, .tt td { padding: 5px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tt th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tt td.num, .tt td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt tr.g td { padding-top: 12px; color: var(--white); font-weight: 600; border-bottom: 0; }
.tt tr.hl td { background: var(--blue-bg); }

.tf { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px 14px; }
.tf .form-group { margin-bottom: 0; }
.form-group label { font-size: 0.74rem; margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { padding: 8px 11px; font-size: 0.95rem; }
.tr { margin-top: 12px; font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.tr div { white-space: nowrap; }
.tr b { color: var(--white); font-size: 1.2rem; font-weight: 600; }
.tr .k { color: var(--muted); }
.tr .u { color: var(--muted); font-size: 0.85rem; }
.tr .warn { color: var(--amber-text); }
.tr .low, .tr .high { color: var(--red-text); }
.tr .ok { color: var(--accent); }
.note { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }
.tp-refs { font-size: 0.84rem; color: var(--muted); }
.tp-refs ol { list-style: decimal; padding-left: 1.3em; margin: 6px 0 0; }
.tp-refs li { margin-bottom: 5px; }

.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }

.footer .cmr-footer { padding: 18px 0; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; font-size: 0.85rem; color: var(--muted); }
.footer .cmr-footer a { color: rgba(255,255,255,0.65); }
.footer .cmr-footer a:hover { color: var(--accent); }
.footer .cmr-footer p { margin: 0; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 640px) {
  .tp { padding: 14px; }
  .tf { grid-template-columns: 1fr 1fr; }
  .tt-wrap .tt { min-width: 620px; }
}
@media print {
  .nav-wrapper, .footer, .tp-toc, .rp-actions { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .page-banner { padding: 0 0 12px; background: #fff; }
  .tp { background: #fff; border: 0; padding: 0 0 12px; }
  .tp h2, .tp h3, .page-banner h1 { color: #000; }
  .tt th, .tt td { color: #000; border-color: #ccc; }
}