.zl-table-proof { --tp-blue: var(--zl-blue, #315f7a); --tp-green: var(--zl-green, #585858); --tp-rust: var(--zl-rust, #9d462e); --tp-line: var(--zl-line, #d0d0d0); }
.zl-table-proof .zl-controls .zl-tp-switch { display: inline-flex; gap: 9px; align-items: center; padding-left: 0; background: transparent; border-color: transparent; color: #393939; }
.zl-table-proof .zl-controls .zl-tp-switch:hover { background: transparent; color: var(--tp-rust); }
.zl-table-proof .zl-tp-switch-track { display: inline-block; position: relative; flex: 0 0 32px; width: 32px; height: 19px; border: 1px solid #b5b5b5; border-radius: 20px; background: #dddddd; transition: background 240ms ease, border-color 240ms ease; }
.zl-table-proof .zl-tp-switch-track > i { display: block; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #45454526; transition: transform 240ms ease; }
.zl-table-proof[data-table-changed="true"] .zl-tp-switch-track { background: #bd775e; border-color: #a45e46; }
.zl-table-proof[data-table-changed="true"] .zl-tp-switch-track > i { transform: translateX(13px); }
.zl-table-proof .zl-tp-controls-note { flex-basis: 100%; color: #6f6f6f; font-size: 10px; }
.zl-table-proof .zl-tp-input { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: start; padding: 2px 0 24px; border-bottom: 1px dashed var(--tp-line); }
.zl-table-proof .zl-tp-input > div, .zl-table-proof .zl-tp-expect { display: grid; gap: 8px; }
.zl-table-proof .zl-tp-input small { color: #676767; font-size: 10px; line-height: 1.5; }
.zl-table-proof .zl-tp-input strong { font: 24px/1.5 Menlo, Monaco, Consolas, monospace; color: var(--tp-blue); letter-spacing: .08em; }
.zl-table-proof .zl-tp-input strong > span { display: inline-block; font-size: 12px; color: #a6a6a6; margin: 0 5px; vertical-align: 3px; }
.zl-table-proof .zl-tp-expect { text-align: right; }
.zl-table-proof .zl-tp-expect b { font: 29px/1.2 var(--nan-serif, Georgia), serif; font-weight: 400; color: #595959; }
.zl-table-proof .zl-tp-path { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: start; gap: 24px; padding: 24px 0 10px; }
.zl-table-proof .zl-tp-path table { width: 100%; border-collapse: collapse; margin: 0; font-size: 12px; }
.zl-table-proof .zl-tp-path caption { text-align: left; padding-bottom: 10px; font-weight: 500; font-size: 12px; }
.zl-table-proof .zl-tp-path caption span { display: block; margin-top: 4px; color: #717171; font-size: 10px; font-weight: 400; }
.zl-table-proof .zl-tp-path th, .zl-table-proof .zl-tp-path td { text-align: left; border: 1px solid #dbdbdb; padding: 9px 10px; font-weight: 400; }
.zl-table-proof .zl-tp-path th { color: #717171; font-size: 10px; }
.zl-table-proof .zl-tp-path .zl-tp-reached { background: #eaeaea; }
.zl-table-proof .zl-tp-root td:last-child > span { float: right; color: var(--tp-green); }
.zl-table-proof .zl-tp-path .zl-tp-editable td { transition: background 250ms ease, border-color 250ms ease; }
.zl-table-proof .zl-tp-value { display: inline-block; position: relative; width: 27px; height: 27px; vertical-align: middle; overflow: hidden; color: var(--tp-green); }
.zl-table-proof .zl-tp-value > span { display: inline-block; position: absolute; inset: 0; font: 25px/27px var(--nan-serif, Georgia), serif; text-align: center; transition: opacity 240ms ease, transform 240ms ease, color 240ms ease; }
.zl-table-proof .zl-tp-value .zl-tp-original { opacity: 1; transform: translateY(0); }
.zl-table-proof .zl-tp-value .zl-tp-altered { opacity: 0; transform: translateY(22px); color: var(--tp-rust); }
.zl-table-proof[data-table-changed="true"] .zl-tp-original { opacity: 0; transform: translateY(-22px); }
.zl-table-proof[data-table-changed="true"] .zl-tp-altered { opacity: 1; transform: translateY(0); }
.zl-table-proof[data-table-changed="true"] .zl-tp-editable td:last-child { background: #f2ddd3; border-color: #c8947d; }
.zl-table-proof .zl-tp-unchanged { display: inline-block; font-size: 9px; color: #777777; margin-left: 6px; }
.zl-table-proof .zl-tp-initialized { font-size: 10px; color: #747474; margin: 10px 0 0; }
.zl-table-proof .zl-tp-evidence { display: grid; gap: 14px; margin-top: 20px; }
.zl-table-proof .zl-tp-track { padding: 16px 0 0; border-top: 1px solid #dcdcdc; color: var(--tp-green); }
.zl-table-proof .zl-tp-track-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.zl-table-proof .zl-tp-track-heading strong { font-size: 13px; font-weight: 500; color: #4a4a4a; }
.zl-table-proof .zl-tp-indicator { width: 17px; font: 18px/1.2 Menlo, Monaco, Consolas, monospace; }
.zl-table-proof .zl-tp-outcome { margin-left: auto; font-size: 11px; }
.zl-table-proof .zl-tp-rail { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 12px 0; }
.zl-table-proof .zl-tp-rail > i { height: 3px; background: #b4b4b4; transition: background 250ms ease; }
.zl-table-proof .zl-tp-track p { margin: 9px 0 0; color: #6f6f6f; font-size: 11px; line-height: 1.8; }
.zl-table-proof .zl-tp-meaning { transition: color 250ms ease; }
.zl-table-proof[data-table-changed="true"] .zl-tp-meaning { color: var(--tp-rust); }
.zl-table-proof[data-table-changed="true"] .zl-tp-meaning .zl-tp-rail > i { background: #cc9a83; }
.zl-table-proof[data-table-changed="true"] .zl-tp-meaning [data-tp-result] { color: var(--tp-rust); }
.zl-table-proof .zl-tp-footnote { font-size: 10px; color: #7b7b7b; margin: 24px 0 0; }
@media (max-width: 620px) {
  .zl-table-proof .zl-tp-input { gap: 9px; grid-template-columns: 1fr 1fr auto; }
  .zl-table-proof .zl-tp-input small { font-size: 8px; }
  .zl-table-proof .zl-tp-input strong { font-size: 19px; }
  .zl-table-proof .zl-tp-input strong > span { font-size: 9px; margin: 0 2px; }
  .zl-table-proof .zl-tp-input .zl-tp-expect { max-width: 70px; }
  .zl-table-proof .zl-tp-path { grid-template-columns: 1fr; gap: 20px; }
  .zl-table-proof .zl-tp-root td:last-child > span { transform: rotate(45deg); }
  .zl-table-proof .zl-tp-track-heading strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .zl-table-proof *, .zl-table-proof *::before, .zl-table-proof *::after { transition: none !important; animation: none !important; }
}
