/* guided-learning.css: the Guided Learning page: Strip Workup (2026-10-19, js/guided-learning.js) and
   12-Lead Workup (2026-10-20, js/workup12.js), which share every .gl-* piece; .tw-* is 12-Lead only.
   The paper card itself (.q12-paper, .rq-*) is css/quiz.css's, under .q12-page. Layouts here are
   fluid (no breakpoints): phone fixes belong in css/mobile.css (docs/MOBILE.md).
   Bump guided-learning.css?v=N on change. */

.gl-crumbs { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.2px; color: #181c1f; white-space: nowrap; }

.gl-main {
    margin-left: 230px; padding-top: 62px; min-height: 100vh;
    font-family: 'Inter', system-ui, sans-serif; color: #181c1f;
    background:
        radial-gradient(1100px 560px at 82% -12%, rgba(38,64,139,.07), transparent 60%),
        radial-gradient(900px 520px at -10% 30%, rgba(194,231,217,.22), transparent 60%),
        #f4f7fc;
}
.gl-wrap { max-width: 1120px; margin: 0 auto; padding: 40px 28px 84px; }
.gl-h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #5b6573; letter-spacing: .01em; }

/* ── The hub ── */
.gl-hero { margin-bottom: 26px; }
.gl-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
              text-transform: uppercase; color: #0f084b; background: rgba(15,8,75,.06); padding: 5px 12px 5px 9px; border-radius: 999px; }
.gl-eyebrow .material-symbols-outlined { font-size: 16px; }
.gl-title { font-family: 'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-weight: 600; font-size: clamp(34px, 4.6vw, 50px); letter-spacing: -.7px;
            line-height: 1.02; margin: 16px 0 12px; color: #10151c; }
.gl-lede { font-size: 17px; line-height: 1.56; color: #525c6b; margin: 0; max-width: 680px; }

.gl-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 22px; }
.gl-mode {
    display: flex; align-items: center; gap: 18px; padding: 22px 22px 22px 20px; text-align: left; font: inherit; color: inherit;
    background: #fff; border: 1px solid rgba(22,33,52,.10); border-radius: 22px; cursor: pointer;
    box-shadow: 0 1px 2px rgba(22,33,52,.05), 0 22px 50px -40px rgba(15,8,75,.55);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gl-mode:hover { transform: translateY(-2px); border-color: rgba(38,64,139,.3); box-shadow: 0 2px 6px rgba(22,33,52,.06), 0 28px 60px -38px rgba(15,8,75,.6); }
.gl-mode:focus-visible { outline: 2.5px solid #26408b; outline-offset: 3px; }
.gl-mode-icon { flex: none; width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; }
.gl-mode-icon .material-symbols-outlined { font-size: 28px; }
.gl-mode-icon.is-guided   { background: linear-gradient(160deg, #3a58b0, #26408b); }
.gl-mode-icon.is-practice { background: linear-gradient(160deg, #e0632a, #c2410c); }
.gl-mode-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gl-mode-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.gl-mode-sub { font-size: 14.5px; line-height: 1.5; color: #5b6573; }
.gl-mode-go { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
              background: #f1f4f9; color: #26408b; transition: background .2s, color .2s; }
.gl-mode:hover .gl-mode-go { background: #26408b; color: #fff; }
.gl-best { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: #b45309; }
.gl-best .material-symbols-outlined { font-size: 16px; }

.gl-locked { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 20px 22px; margin-bottom: 22px;
             background: #fff; border: 1px solid rgba(22,33,52,.10); border-radius: 22px; }
.gl-locked > .material-symbols-outlined { font-size: 28px; color: #26408b; }
.gl-locked > div { flex: 1 1 260px; }
.gl-locked h3 { margin: 0 0 4px; font-size: 17px; }
.gl-locked p { margin: 0; font-size: 14.5px; color: #5b6573; }

.gl-method { background: #fff; border: 1px solid rgba(22,33,52,.08); border-radius: 22px; padding: 20px 22px; margin-bottom: 16px; }
.gl-steps { list-style: none; margin: 0; padding: 0; counter-reset: gl; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; }
.gl-steps li { counter-increment: gl; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: baseline; }
.gl-steps li::before { content: counter(gl); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
                       align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #26408b; background: rgba(38,64,139,.09); }
.gl-steps b { font-size: 15px; }
.gl-steps span { font-size: 13.5px; line-height: 1.45; color: #5b6573; }

.gl-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 16px;
           background: rgba(20,24,29,.04); font-size: 13.5px; line-height: 1.5; color: #5b6573; }
.gl-note .material-symbols-outlined { font-size: 20px; color: #14181d; }

/* ── A round ── */
.gl-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gl-round-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e0e3e7; background: #fff; color: #404750;
                display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.gl-round-btn:hover { background: #f1f4f8; color: #26408b; }
.gl-round-btn:focus-visible { outline: 2.5px solid #26408b; outline-offset: 2px; }
.gl-round-btn .material-symbols-outlined { font-size: 20px; }
.gl-progress { flex: 1; display: flex; gap: 4px; min-width: 0; }
.gl-progress i { flex: 1; height: 6px; border-radius: 999px; background: #e3e7ee; transition: background .25s; }
.gl-progress i.is-now  { background: #26408b; }
.gl-progress i.is-good { background: #15724c; }
.gl-progress i.is-bad  { background: #ba1a1a; }
.gl-status { flex: none; display: flex; align-items: center; gap: 14px; }
.gl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
           color: #26408b; background: rgba(38,64,139,.09); }
.gl-chip .material-symbols-outlined { font-size: 17px; }
.gl-streak { display: inline-flex; align-items: center; gap: 3px; font-family: 'Space Grotesk', Inter, sans-serif; font-size: 16px; font-weight: 700; color: #707882; }
.gl-streak .material-symbols-outlined { font-size: 20px; color: #c3cad5; }
.gl-streak.is-on .material-symbols-outlined { color: #f97316; }
.gl-score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; font-size: 10.5px; font-weight: 600; color: #707882; }
.gl-score b { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 22px; font-weight: 700; color: #14181d; margin-bottom: 2px; }

.gl-card { background: #fff; border: 1px solid rgba(22,33,52,.08); border-radius: 22px; overflow: hidden;
           box-shadow: 0 1px 2px rgba(22,33,52,.05), 0 22px 50px -42px rgba(15,8,75,.5); margin-bottom: 18px; }
.gl-bar { display: flex; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
.gl-count { font-size: 14px; font-weight: 700; color: #14181d; margin-right: 4px; }
.gl-card .rq-paper { border-bottom: 0; }
.gl-ruler { display: block; margin-bottom: 6px; }

.gl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; align-items: start; }

/* the question being asked */
.gl-q { background: #fff; border: 1px solid rgba(22,33,52,.08); border-radius: 22px; padding: 18px 18px 16px;
        box-shadow: 0 1px 2px rgba(22,33,52,.04), 0 18px 40px -36px rgba(15,8,75,.5); }
.gl-q.is-enter { animation: gl-in .28s ease both; }
.gl-q.is-shake { animation: gl-shake .38s ease; }
.gl-q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gl-q-step { font-size: 12.5px; font-weight: 700; color: #26408b; }
.gl-hint-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13px; font-weight: 600; color: #b45309;
               background: none; border: 0; padding: 4px 0; cursor: pointer; }
.gl-hint-btn .material-symbols-outlined { font-size: 18px; }
.gl-hint-btn:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; border-radius: 6px; }
.gl-q-title { margin: 6px 0 12px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.gl-hint { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #fef3c7; color: #7c4a03; font-size: 14px; line-height: 1.5; }
.gl-hint ol { margin: 0; padding-left: 20px; }
.gl-hint li { padding-left: 2px; }
.gl-hint li + li { margin-top: 7px; }
.gl-hint li::marker { font-weight: 700; color: #b45309; }
.gl-options { display: flex; flex-direction: column; gap: 7px; }
.gl-option {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; text-align: left; font: inherit; font-size: 15px;
    font-weight: 600; color: #14181d; background: #f5f7fb; border: 1px solid rgba(20,24,29,.07); border-radius: 14px; cursor: pointer;
    transition: background .14s, border-color .14s, transform .1s;
}
.gl-option:hover { background: #edf1f8; border-color: rgba(38,64,139,.28); }
.gl-option:active { transform: scale(.99); }
.gl-option:focus-visible { outline: 2.5px solid #26408b; outline-offset: 2px; }
.gl-option kbd { flex: none; width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
                 font: 600 12px 'Space Grotesk', Inter, sans-serif; color: #5b6573; background: #fff; border: 1px solid #dfe4ec; }
.gl-option.is-wrong { background: rgba(186,26,26,.10); border-color: #ba1a1a; }
.gl-option.is-wrong kbd { color: #fff; background: #ba1a1a; border-color: #ba1a1a; }
.gl-keys { margin: 10px 4px 0; font-size: 12px; color: #8a929e; }

/* the end of a read */
.gl-verdict { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; margin-bottom: 12px; animation: gl-pop .32s ease both; }
.gl-verdict .material-symbols-outlined { font-size: 34px; }
.gl-verdict h3 { margin: 0 0 2px; font-size: 20px; }
.gl-verdict p { margin: 0; font-size: 14.5px; color: #5b6573; }
.gl-verdict.is-good { background: rgba(21,114,76,.08); border: 1px solid rgba(21,114,76,.25); }
.gl-verdict.is-good .material-symbols-outlined { color: #15724c; }
.gl-verdict.is-bad { background: rgba(186,26,26,.06); border: 1px solid rgba(186,26,26,.22); }
.gl-verdict.is-bad .material-symbols-outlined { color: #ba1a1a; }

.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 12px;
          font: inherit; font-size: 15.5px; font-weight: 700; color: #fff; background: #26408b; cursor: pointer; text-decoration: none;
          transition: background .15s, transform .1s; }
.gl-btn:hover { background: #1f3576; }
.gl-btn:active { transform: scale(.985); }
.gl-btn:focus-visible { outline: 2.5px solid #26408b; outline-offset: 3px; }
.gl-btn .material-symbols-outlined { font-size: 20px; }
.gl-btn.is-secondary { color: #26408b; background: rgba(38,64,139,.09); }
.gl-btn.is-secondary:hover { background: rgba(38,64,139,.15); }
.gl-next { width: 100%; }

/* the read so far */
.gl-read { background: #fff; border: 1px solid rgba(22,33,52,.08); border-radius: 22px; padding: 18px; }
.gl-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gl-row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #eef1f5; }
.gl-row.is-new { animation: gl-in .25s ease both; }
.gl-row:first-child { border-top: 0; padding-top: 2px; }
.gl-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
          font-size: 12.5px; font-weight: 700; color: #8a929e; background: #eef1f5; }
.gl-dot .material-symbols-outlined { font-size: 16px; font-weight: 700; }
.gl-row.is-good .gl-dot { color: #fff; background: #15724c; }
.gl-row.is-bad  .gl-dot { color: #fff; background: #ba1a1a; }
.gl-row.is-now .gl-dot { color: #fff; background: #26408b; }
.gl-row-t { font-size: 12.5px; font-weight: 600; color: #707882; }
.gl-row.is-todo .gl-row-t { font-size: 14px; color: #a0a7b2; padding-top: 3px; }
.gl-row.is-now .gl-row-t { color: #14181d; font-weight: 700; }
.gl-row-pick { font-size: 14.5px; font-weight: 600; }
.gl-row-pick.is-struck { color: #8a929e; text-decoration: line-through; text-decoration-color: #ba1a1a; }
.gl-row-answer { font-size: 14.5px; font-weight: 700; color: #15724c; }
.gl-row-why { font-size: 13.5px; line-height: 1.5; color: #5b6573; }

.gl-measured { margin-top: 16px; }
.gl-measured-k { display: block; font-size: 11.5px; font-weight: 600; color: #8a929e; margin-bottom: 6px; }
.gl-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gl-cell { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: #f5f7fb; }
.gl-cell span { font-size: 11px; font-weight: 600; color: #707882; }
.gl-cell b { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gl-cell small { font-size: 10px; color: #a0a7b2; }

.gl-named { margin-top: 14px; padding: 16px; border-radius: 18px; background: #f8fafd; border: 1px solid #eef1f5; }
.gl-named h3 { margin: 0 0 6px; font-size: 18px; }
.gl-named p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #5b6573; }
.gl-tip { display: flex; gap: 8px; align-items: flex-start; padding: 11px 13px; border-radius: 14px; background: #fef3c7; color: #7c4a03 !important; }
.gl-tip .material-symbols-outlined { font-size: 18px; }
.gl-src { display: block; font-size: 11.5px; color: #a0a7b2; }

/* ── The end of a round ── */
.gl-end-card { max-width: 560px; margin: 10px auto 0; padding: 30px 26px 24px; text-align: center; background: #fff;
               border: 1px solid rgba(22,33,52,.08); border-radius: 26px; box-shadow: 0 1px 2px rgba(22,33,52,.05), 0 26px 60px -44px rgba(15,8,75,.55); }
.gl-end-big b { display: block; font-family: 'Space Grotesk', Inter, sans-serif; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.gl-end-big span { font-size: 16px; font-weight: 600; color: #707882; }
.gl-end-score { margin-top: 10px; font-size: 19px; font-weight: 700; color: #26408b; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gl-newbest { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #b45309; }
.gl-newbest .material-symbols-outlined { font-size: 18px; }
.gl-end-list { list-style: none; margin: 22px 0; padding: 4px 16px; text-align: left; border-radius: 18px; background: #f8fafd; }
.gl-end-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eef1f5; font-size: 15px; font-weight: 600; }
.gl-end-list li:first-child { border-top: 0; }
.gl-end-list li span:nth-child(2) { flex: 1; }
.gl-end-list .material-symbols-outlined { font-size: 22px; }
.gl-end-list li.is-good .material-symbols-outlined { color: #15724c; }
.gl-end-list li.is-bad  .material-symbols-outlined { color: #ba1a1a; }
.gl-end-list small { font-size: 12px; font-weight: 600; color: #8a929e; }
.gl-end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gl-switch { margin-top: 14px; font-size: 14px; }

/* ── A round as a workspace (2026-10-20): the paper and the read's summary on the left, the question
   and its reasons in a panel on the right, so nothing needs scrolling to and fro. The sidebar is a rail
   (css/sidebar-rail.css). js/*: body.gl-working while a round plays. ── */
body.rail-mode .app-sidebar > .h-\[62px\] { display: none !important; }   /* the logo row's inline display would beat the rail's rule */
body.gl-working .gl-wrap { max-width: 1760px; padding: 14px 20px 20px; }
body.gl-working .gl-top { margin-bottom: 12px; }
/* By default (a tall or narrow window, and phones) the paper takes the full width with the question and
   its reasons side by side under it. */
.gl-work { display: flex; flex-direction: column; gap: 14px; }
/* stacked, the question comes straight after the paper and the read's summary goes last */
.gl-work-main { display: contents; }
.gl-work-main > .gl-card { order: 1; }
.gl-side { order: 2; }
.gl-trail { order: 3; }
.gl-work-main .gl-card { margin-bottom: 0; }
.gl-side { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.gl-side > .gl-feedback:empty { display: none; }
/* A wide window (most laptops): the panel sits beside the paper and scrolls on its own. A desktop layout,
   not a phone fix (phones keep the flow above; css/mobile.css). js/workup12.js reads flex-direction to
   know which layout it is sizing the sheet for. */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
    .gl-work { flex-direction: row; align-items: flex-start; gap: 16px; }
    .gl-work-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1 1 auto; order: 1; }
    .gl-side { flex: 0 0 clamp(320px, 28vw, 420px); display: flex; flex-direction: column; align-items: stretch; position: sticky; top: 76px;
               max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 3px 4px 0; }
}

/* the read so far, compact, under the paper */
.gl-trail { background: #fff; border: 1px solid rgba(22,33,52,.08); border-radius: 18px; padding: 12px 14px 14px; }
.gl-trail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.gl-trail-head .gl-h3 { margin: 0; }
.gl-trail-score { font-size: 12.5px; font-weight: 700; color: #26408b; }
.gl-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.gl-chip-row { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 58px;   /* two lines of answer: the height never changes as the read fills in */ padding: 6px 10px 6px 7px; box-sizing: border-box;
               text-align: left; font: inherit; color: inherit; background: #f5f7fb; border: 1px solid transparent; border-radius: 12px; }
button.gl-chip-row { cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s; }
button.gl-chip-row:hover { background: #edf1f8; border-color: rgba(38,64,139,.22); }
button.gl-chip-row:focus-visible { outline: 2.5px solid #26408b; outline-offset: 2px; }
.gl-chip-row.is-sel { background: #fff; border-color: #26408b; box-shadow: 0 0 0 3px rgba(38,64,139,.10); }
.gl-chip-row.is-todo { background: transparent; border: 1px dashed #dfe4ec; }
.gl-chip-row.is-now { background: rgba(38,64,139,.05); border: 1.5px solid #26408b; }
.gl-chip-row.is-new { animation: gl-in .25s ease both; }
.gl-chip-row .gl-dot { flex: none; width: 24px; height: 24px; font-size: 12px; }
.gl-chip-row .gl-dot .material-symbols-outlined { font-size: 15px; }
.gl-chip-row.is-good .gl-dot { color: #fff; background: #15724c; }
.gl-chip-row.is-bad  .gl-dot { color: #fff; background: #ba1a1a; }
.gl-chip-row.is-now  .gl-dot { color: #fff; background: #26408b; }
.gl-chip-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gl-chip-t { font-size: 11.5px; font-weight: 600; color: #707882; }
.gl-chip-v { font-size: 13px; font-weight: 650; color: #14181d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-chip-row.is-bad .gl-chip-v { color: #15724c; }                     /* a miss shows the right answer */
.gl-chip-row.is-todo .gl-chip-t { color: #a0a7b2; }
.gl-chip-row.is-now .gl-chip-t { color: #26408b; }
.gl-chip-row.is-now .gl-chip-v { font-size: 12px; font-weight: 700; color: #26408b; }

/* the panel: the reason for an answer, then (once the read is done) what it was */
.gl-feedback { display: flex; flex-direction: column; gap: 12px; }
.gl-feedback:empty { display: none; }
.gl-fb { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: #fff;
         border: 1px solid rgba(22,33,52,.08); animation: gl-in .25s ease both; }
.gl-fb.is-good { box-shadow: inset 4px 0 0 #15724c; }
.gl-fb.is-bad  { box-shadow: inset 4px 0 0 #ba1a1a; }
.gl-fb-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font-size: 14px; font-weight: 700; }
.gl-fb-head .material-symbols-outlined { font-size: 20px; }
.gl-fb.is-good .gl-fb-head { color: #15724c; }
.gl-fb.is-bad  .gl-fb-head { color: #ba1a1a; }
.gl-fb-head small { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #8a929e; text-align: right; }
.gl-fb-empty { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 16px;
               background: rgba(20,24,29,.04); font-size: 13px; line-height: 1.5; color: #5b6573; }
.gl-fb-empty .material-symbols-outlined { font-size: 18px; }
.gl-feedback .gl-named, .gl-feedback .gl-measured { margin: 0; background: #fff; border: 1px solid rgba(22,33,52,.08); border-radius: 18px; }
.gl-feedback .gl-measured { padding: 12px 14px; }
.gl-feedback .tw-cells { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.gl-feedback .tw-cells .gl-cell { padding: 7px 2px; }
.gl-feedback .tw-cells .gl-cell b { font-size: 17px; }
.gl-side .gl-q .gl-keys { margin: 12px 2px 0; }
.gl-side .gl-verdict { margin-bottom: 10px; }

/* ── The three paths ── */
.gl-hub > .gl-eyebrow { margin-bottom: 16px; }
.gl-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 10px; margin-bottom: 8px;
            padding: 6px; background: rgba(22,33,52,.05); border-radius: 22px; max-width: 1200px; }
.gl-path-tab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; font: inherit; color: #5b6573;
               background: transparent; border: 1px solid transparent; border-radius: 17px; cursor: pointer;
               transition: background .18s, box-shadow .18s, color .18s; }
.gl-path-tab:hover { color: #14181d; background: rgba(255,255,255,.55); }
.gl-path-tab[aria-selected="true"] { color: #14181d; background: #fff; border-color: rgba(22,33,52,.08);
                                     box-shadow: 0 1px 2px rgba(22,33,52,.06), 0 10px 26px -18px rgba(15,8,75,.5); }
.gl-path-tab:focus-visible { outline: 2.5px solid #26408b; outline-offset: 2px; }
.gl-path-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
               color: #fff; background: linear-gradient(160deg, #3a58b0, #26408b); opacity: .55; transition: opacity .18s; }
.gl-path-ico.is-12 { background: linear-gradient(160deg, #1f8f6a, #15724c); }
.gl-path-ico.is-stemi { background: linear-gradient(160deg, #d64a3c, #a3261b); }
.gl-path-ico.is-tele { background: linear-gradient(160deg, #13867f, #0b5560); }
.gl-path-tab[aria-selected="true"] .gl-path-ico { opacity: 1; }
.gl-path-ico .material-symbols-outlined { font-size: 22px; }
.gl-path-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gl-path-text b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.gl-path-text small { font-size: 13px; color: #707882; }
.gl-new { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #15724c;
          background: rgba(21,114,76,.11); padding: 2px 7px; border-radius: 999px; }
.gl-path .gl-hero { margin-top: 18px; }

/* ── 12-Lead Workup: the sheet ── */
.tw-patient { margin-left: auto; }
/* the seconds ruler, inside the sheet just under its edge (so it slides with it on a phone); the paper keeps room for it */
.tw-paper { height: auto !important; padding-bottom: 30px; }
.tw-sheet .q12-lead.tw-look { border: 2px solid #d97706; background: rgba(245,158,11,.10); box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.tw-sheet .q12-lead.tw-up   { border: 2px solid #ba1a1a; background: rgba(186,26,26,.07); }
.tw-sheet .q12-lead.tw-down { border: 2px solid #2563eb; background: rgba(37,99,235,.07); }
.tw-sheet .q12-lead.tw-q    { border: 2px solid #6b3fa0; background: rgba(107,63,160,.07); }
.tw-sheet .q12-lead.tw-look,
.tw-sheet .q12-lead.tw-up, .tw-sheet .q12-lead.tw-down, .tw-sheet .q12-lead.tw-q { animation: tw-glow .5s ease both; }
.tw-sheet .q12-lead.tw-up .q12-lead-tag, .tw-sheet .q12-lead.tw-down .q12-lead-tag, .tw-sheet .q12-lead.tw-q .q12-lead-tag {
    display: block; font-weight: 700; background: #fff; }
.tw-sheet .q12-lead.tw-up   .q12-lead-tag { border-color: #ba1a1a; color: #9b1515; }
.tw-sheet .q12-lead.tw-down .q12-lead-tag { border-color: #2563eb; color: #1d4ed8; }
.tw-sheet .q12-lead.tw-q    .q12-lead-tag { border-color: #6b3fa0; color: #57318a; }
.tw-sheet .q12-lead .q12-lead-tag:empty { display: none; }
.tw-look-note { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 13px; font-weight: 600; color: #b45309; }
.tw-look-note .material-symbols-outlined { font-size: 17px; }

/* the axis compass beside its reason */
.tw-axis-why { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.tw-wheel { flex: none; width: 104px; height: 104px; overflow: visible; }
.tw-wheel text { font: 600 8.5px 'Space Grotesk', Inter, sans-serif; fill: #707882; text-anchor: middle; }
.tw-w-norm  { fill: rgba(21,114,76,.13); }
.tw-w-left  { fill: rgba(217,119,6,.13); }
.tw-w-right { fill: rgba(37,99,235,.12); }
.tw-w-ring  { fill: none; stroke: #c3cad5; stroke-width: 1; }
.tw-w-ax    { stroke: #dfe4ec; stroke-width: 1; }
.tw-w-needle { stroke: #14181d; stroke-width: 2.4; stroke-linecap: round; }
.tw-w-hub   { fill: #14181d; }

/* the end of a read */
.tw-cells { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.tw-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #26408b; margin-bottom: 4px; }
.tw-stage { display: flex; align-items: center; gap: 7px; font-size: 13.5px !important; color: #5b6573; }
.tw-stage .material-symbols-outlined { font-size: 18px; }
.tw-report, .tw-codes { margin: 0 0 12px; }
.tw-report-k { display: block; font-size: 11.5px; font-weight: 600; color: #8a929e; margin-bottom: 5px; }
.tw-report p { margin: 0 0 4px !important; padding: 10px 12px; border-left: 3px solid #c3cad5; background: #fff; border-radius: 0 10px 10px 0;
               font-size: 14px; font-style: italic; color: #404750 !important; }
.tw-report small { font-size: 11.5px; color: #a0a7b2; }
.tw-codes .q12-codes { display: flex; flex-direction: column; gap: 4px; }
.tw-codes .q12-code { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.tw-codes .q12-code b { flex: none; min-width: 52px; font: 700 11.5px 'Space Grotesk', Inter, sans-serif; color: #26408b; }
.tw-codes .q12-code span { flex: 1; color: #404750; }
.tw-codes .q12-code i { font-style: normal; font-size: 12px; color: #8a929e; }
.tw-player { color: #26408b; font-weight: 600; }

/* ── STEMI Workup ── */
/* "mark the leads": the leads marked so far, and Check */
.tw-mark { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 14px; background: #f5f7fb;
           border: 1px solid rgba(20,24,29,.07); margin-bottom: 10px; }
.tw-mark-k { flex: none; padding-top: 3px; font-size: 12px; font-weight: 700; color: #5b6573; }
.tw-mark-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.tw-mark-list b { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font: 700 13px 'Space Grotesk', Inter, sans-serif;
                  color: #fff; background: #26408b; animation: gl-pop .2s ease both; }
.tw-mark-list i { font-size: 13.5px; color: #8a929e; }
.tw-check { width: 100%; }
.tw-check[disabled] { opacity: .45; cursor: default; transform: none; }
.tw-check[disabled]:hover { background: #26408b; }
/* how the marking went, lead by lead */
.tw-mark-res { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tw-mark-res li { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 1.45; color: #404750; }
.tw-mark-res li b { font-weight: 700; margin-right: 3px; }
.tw-mark-res .material-symbols-outlined { flex: none; font-size: 18px; margin-top: 1px; }
.tw-mark-res .is-found .material-symbols-outlined { color: var(--q12-good); }
.tw-mark-res .is-missed .material-symbols-outlined { color: var(--q12-miss); }
.tw-mark-res .is-over .material-symbols-outlined { color: var(--q12-over); }
.tw-mark-res .is-info .material-symbols-outlined { color: #8a929e; }
/* the ST at the J point in every lead, in the sheet's own layout */
.tw-stgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.tw-stcol { display: flex; flex-direction: column; gap: 5px; }
.tw-stcell { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 6px 8px; border-radius: 10px;
             background: #f5f7fb; border: 1px solid rgba(20,24,29,.06); }
.tw-stcell span { font: 700 11.5px 'Space Grotesk', Inter, sans-serif; color: #5b6573; }
.tw-stcell b { font: 700 13px 'Space Grotesk', Inter, sans-serif; color: #14181d; white-space: nowrap; }
.tw-stcell.is-up { background: rgba(186,26,26,.08); border-color: rgba(186,26,26,.45); }
.tw-stcell.is-up b, .tw-stcell.is-up span { color: #9b1515; }
.tw-stcell.is-down { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.4); }
.tw-stcell.is-down b, .tw-stcell.is-down span { color: #1d4ed8; }
.tw-stnote { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: #707882; }
.tw-stnote .q12-link { font-size: 12.5px; }
.tw-qrsline { margin-top: 4px; padding-top: 8px; border-top: 1px solid #eef1f5; font-weight: 600; color: #5b6573; }
/* why the criteria are not used on a left bundle branch block or hypertrophy that looks like a STEMI */
.tw-extra { display: flex; align-items: flex-start; gap: 7px; padding: 10px 12px; border-radius: 12px; background: #fff7ed; color: #9a3412 !important;
            font-size: 14px; line-height: 1.5; }
.tw-extra .material-symbols-outlined { flex: none; font-size: 18px; margin-top: 1px; color: #c2410c; }
.gl-end-card > .tw-kicker { text-align: center; margin-bottom: 8px; }

@keyframes tw-glow { from { box-shadow: 0 0 0 0 rgba(245,158,11,.0); opacity: .4; } to { opacity: 1; } }
@keyframes gl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gl-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes gl-shake { 0% { transform: translateX(0); } 16% { transform: translateX(-12px); } 34% { transform: translateX(10px); }
                      52% { transform: translateX(-7px); } 70% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .gl-q.is-enter, .gl-row.is-new, .gl-verdict, .gl-q.is-shake, .tw-sheet .q12-lead, .gl-chip-row.is-new, .gl-fb { animation: none !important; } }

/* ── Telemetry Watch (2026-10-24, js/telemetry-watch.js): a bedside monitor on a dark screen, the
   Something changed button under it, then the printed strip and the questions (the 12-lead workspace). ── */
.tm-monitor { position: relative; background: #0b141a; border-radius: 22px; padding: 10px 12px 14px; color: #d7efe6;
              box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 26px 54px -32px rgba(6,14,20,.9); }
.tm-mon-bar { display: flex; align-items: center; gap: 10px; padding: 2px 6px 9px;
              font: 600 12px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; color: #8fb3a8; }
.tm-bed { color: #e8f6f0; }
.tm-tag, .tm-frozen { padding: 2px 9px; border-radius: 999px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.tm-tag { background: rgba(159,240,200,.10); color: #9ff0c8; }
.tm-frozen { background: rgba(243,189,92,.18); color: #f3bd5c; animation: tm-blink 1.4s steps(2, jump-none) infinite; }
@keyframes tm-blink { 50% { opacity: .45; } }
.tm-clock { margin-left: 14px; color: #cfe9df; font-variant-numeric: tabular-nums; }
.tm-screen { position: relative; display: flex; border-radius: 14px; overflow: hidden; background: #060d12; border: 1px solid rgba(159,240,200,.08); }
.tm-wave { flex: 1 1 auto; min-width: 0; }
.tm-wave canvas { display: block; width: 100%; }
/* the numerics, beside the waveforms as on a bedside monitor */
.tm-vitals { flex: 0 0 clamp(78px, 13%, 150px); display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 2px;
             padding: 12px 14px; border-left: 1px solid rgba(159,240,200,.10); background: #071017; }
.tm-hr-k { display: inline-flex; align-items: center; gap: 6px; font: 700 12px 'IBM Plex Mono', ui-monospace, monospace; color: #9ff0c8; letter-spacing: .08em; }
.tm-hr { font: 600 clamp(32px, 4.4vw, 56px)/1 'Space Grotesk', Inter, sans-serif; color: #9ff0c8; font-variant-numeric: tabular-nums; }
.tm-hr-u { font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; color: #5f8f80; }
.tm-heart { font-size: 16px; color: #ff6b6b; opacity: .3; font-variation-settings: 'FILL' 1; }
/* SpO2 under the heart rate, in the pleth's colour; dashes and "searching" once the pulse is lost */
.tm-spo2box { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(124,196,255,.14); width: 100%; }
.tm-spo2box[hidden] { display: none; }
.tm-spo2-k { font: 700 12px 'IBM Plex Mono', ui-monospace, monospace; color: #7cc4ff; letter-spacing: .06em; }
.tm-spo2 { font: 600 clamp(26px, 3.4vw, 44px)/1 'Space Grotesk', Inter, sans-serif; color: #7cc4ff; font-variant-numeric: tabular-nums; }
.tm-spo2-u { font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; color: #4f86ad; }
.tm-spo2-lost { display: none; font: 600 10.5px 'IBM Plex Mono', ui-monospace, monospace; color: #f3bd5c; letter-spacing: .04em; }
.tm-spo2box.is-lost .tm-spo2-u { display: none; }
.tm-spo2box.is-lost .tm-spo2-lost { display: block; animation: tm-blink 1.4s steps(2, jump-none) infinite; }
/* the SpO2 switch on the monitor's bar */
.tm-switch { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; cursor: pointer; color: #cfe9df; user-select: none; }
.tm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tm-switch-track { position: relative; width: 30px; height: 17px; border-radius: 999px; background: rgba(207,233,223,.18); transition: background .18s; }
.tm-switch-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #cfe9df; transition: transform .18s, background .18s; }
.tm-switch input:checked + .tm-switch-track { background: #2f8fd6; }
.tm-switch input:checked + .tm-switch-track .tm-switch-knob { transform: translateX(13px); background: #fff; }
.tm-switch input:focus-visible + .tm-switch-track { outline: 2px solid #7cc4ff; outline-offset: 2px; }
.tm-switch sub, .tm-spo2-k sub { font-size: .75em; }
.tm-heart.is-beat { animation: tm-beat .3s ease-out; }
@keyframes tm-beat { 0% { opacity: 1; transform: scale(1.3); } 100% { opacity: .3; transform: scale(1); } }
.tm-overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 22px;
              background: rgba(6,13,18,.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.tm-overlay[hidden] { display: none; }
.tm-ov-card { width: 100%; max-width: 470px; max-height: 100%; overflow: auto; background: #fff; color: #14181d; border-radius: 18px;
              padding: 18px 20px 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.65); animation: gl-in .25s ease both; }
.tm-ov-card.is-quiet { display: flex; align-items: center; gap: 12px; max-width: 300px; padding: 14px 18px; }
.tm-ov-card.is-quiet p { margin: 0; font-weight: 600; color: #3a4350; }
.tm-ov-card h3 { margin: 6px 0 4px; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.tm-ov-card .gl-btn { margin-top: 12px; }
.tm-ov-card .gl-keys { margin: 8px 0 0; }
.tm-kicker { display: inline-flex; align-items: center; gap: 6px; font: 700 11px 'IBM Plex Mono', ui-monospace, monospace;
             letter-spacing: .08em; text-transform: uppercase; color: #26408b; }
.tm-kicker .material-symbols-outlined { font-size: 16px; }
.tm-handoff-n { margin: 0; font: 600 15px 'Space Grotesk', Inter, sans-serif; color: #2b3440; }
.tm-handoff-p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #5b6573; }
.tm-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #d8deea; border-top-color: #26408b; animation: tm-spin .8s linear infinite; }
@keyframes tm-spin { to { transform: rotate(360deg); } }

.tm-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.tm-changed { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; min-height: 58px; border: 0; border-radius: 16px;
              font: 700 17px Inter, system-ui, sans-serif; color: #1d1305; background: linear-gradient(180deg, #ffd47e, #f3bd5c); cursor: pointer;
              box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px -14px rgba(243,189,92,.95); transition: filter .14s, transform .08s, opacity .2s; }
.tm-changed .material-symbols-outlined { font-size: 22px; }
.tm-changed kbd { font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; padding: 2px 7px; border-radius: 6px; background: rgba(29,19,5,.12); }
.tm-changed:disabled { opacity: .3; cursor: default; box-shadow: none; }
.tm-changed:not(:disabled):hover { filter: brightness(1.05); }
.tm-changed:not(:disabled):active { transform: translateY(1px); }
.tm-changed:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tm-watch { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tm-brief { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #cfe3dc; }
.tm-brief b { color: #fff; }
.tm-brief .material-symbols-outlined { font-size: 17px; color: #9ff0c8; }
.tm-look { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 5px 14px; margin: 0; padding: 0;
           font-size: 12.5px; line-height: 1.4; color: #a9c6bc; }
.tm-look li { display: flex; gap: 6px; align-items: flex-start; }
.tm-look b { color: #d7efe6; }
.tm-look .material-symbols-outlined { font-size: 16px; color: #6fb79d; }

.tm-nudge { display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
            color: #1d1305; background: #f3bd5c; animation: gl-in .3s ease both, tm-nudge 2s ease-in-out .3s 3; }
.tm-nudge .material-symbols-outlined { font-size: 18px; }
@keyframes tm-nudge { 50% { box-shadow: 0 0 0 6px rgba(243,189,92,.25); } }
/* ── The play screen's layout (2026-10-25, the owner: use the width, the panel to the right of the monitor).
   Stacked by default (a narrow or tall window, a tablet, a phone): the monitor, the printed strip, the
   question beside its reasons, the read so far. On a wide window (the same query as WIDE in
   js/telemetry-watch.js) a grid: the monitor and the strip on the left, ONE sticky panel on the right
   that holds the handoff while watching, then the handoff line, the question and its reasons, so the
   question is never below the fold and the monitor keeps the same size from start to finish. ── */
.tm-layout { display: flex; flex-direction: column; gap: 14px; }
.tm-layout > .tm-monitor { order: 1; }
.tm-layout > .tm-work { display: contents; }
.tm-layout > .tm-work[hidden] { display: none; }
.tm-work > .gl-card { order: 2; margin-bottom: 0; }
.tm-work > .gl-trail { order: 4; }
.tm-layout > .tm-side { order: 3; flex: none; position: static; max-height: none; overflow: visible; padding: 0;
                        display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.tm-play:not(.is-review) .tm-layout > .tm-side { display: none; }
.tm-layout > .tm-side > .gl-ask:empty { display: none; }
.tm-act-hint { display: none; }
@media (min-width: 1180px) and (min-aspect-ratio: 5/4) {
    /* the panel spans both rows: its extra height must go to the last (1fr) row, below the strip, never
       between the monitor and the strip */
    .tm-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 25vw, 420px); grid-template-rows: auto 1fr;
                 column-gap: 18px; row-gap: 14px; align-items: start; }
    .tm-layout > .tm-monitor { grid-column: 1; grid-row: 1; }
    .tm-layout > .tm-work { display: flex; flex-direction: column; gap: 14px; grid-column: 1; grid-row: 2; min-width: 0; }
    .tm-layout > .tm-side, .tm-play:not(.is-review) .tm-layout > .tm-side {
        grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: stretch; gap: 12px; align-self: start;
        position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: thin; padding: 0 3px 4px 0; }
    /* while watching, the row under the monitor is the button and a reminder; the handoff is in the panel */
    .tm-act-hint { display: block; flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.5; color: #8fb3a8; }
    .tm-play.is-review .tm-act-hint { display: none; }
}
/* the handoff in the panel: a light card (under the monitor it is the dark text beside the button) */
.tm-side > .tm-watch { flex: none; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(22,33,52,.08); }
.tm-side .tm-brief { font-size: 13.5px; line-height: 1.5; color: #3a4350; }
.tm-side .tm-brief b { color: #14181d; }
.tm-side .tm-brief .material-symbols-outlined { color: #26408b; }
.tm-side .tm-look { grid-template-columns: 1fr; gap: 9px; padding-top: 10px; border-top: 1px solid #edf0f5; font-size: 13px; color: #5b6573; }
.tm-side .tm-look b { color: #2b3440; }
.tm-side .tm-look .material-symbols-outlined { color: #6b7aa6; }
.tm-play.is-review .tm-side .tm-look, .tm-play.is-review .tm-side .tm-nudge { display: none; }
.tm-leads { display: inline-flex; gap: 4px; margin-left: 2px; }
.tm-leads .q12-tool { min-width: 38px; justify-content: center; }
.tm-leads .q12-tool[aria-pressed="true"] { background: rgba(38,64,139,.10); border-color: rgba(38,64,139,.35); color: #26408b; }
.tm-sub { margin: 2px 0 6px; font-size: 14px; line-height: 1.5; color: #3a4350; }
.tm-caught, .tm-missed { display: flex; gap: 6px; align-items: center; margin: 2px 0 6px; font-size: 13px; font-weight: 650; }
.tm-caught { color: #15724c; }
.tm-missed { color: #a35a00; }
.tm-caught .material-symbols-outlined, .tm-missed .material-symbols-outlined { font-size: 18px; }
.tm-alarm-why { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: #3a4350; }

/* what changed: one fixed list, in the order of a systematic read */
.tm-chipset { display: flex; flex-direction: column; margin: 12px 0 14px; border-top: 1px solid #edf0f5; }
/* each group its own band, a light rule between them (the owner, 2026-10-25: it read as cramped) */
.tm-chip-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid #edf0f5; }
.tm-chip-g { padding-top: 9px; font: 700 10.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8a93a0; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* in a narrow panel (beside the monitor) each group's name sits above its chips, which get the full width */
.tm-layout .gl-ask { container-type: inline-size; }
@container (max-width: 470px) {
    .tm-chip-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 11px 0 13px; }
    .tm-chip-g { padding-top: 0; }
}
.tm-chip { padding: 7px 12px; border-radius: 999px; border: 1.5px solid #d6dce5; background: #fff; font: 600 13px Inter, system-ui, sans-serif;
           color: #2b3440; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.tm-chip:hover { border-color: #9fb0cf; }
.tm-chip:focus-visible { outline: 2.5px solid #26408b; outline-offset: 2px; }
.tm-chip.is-on { background: #26408b; border-color: #26408b; color: #fff; }
.tm-chip-res { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tm-chip-res li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.tm-chip-res li small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: #5b6573; }
.tm-chip-res .material-symbols-outlined { flex: none; margin-top: 1px; font-size: 17px; }
.tm-chip-res .is-found .material-symbols-outlined, .tm-chip-res .is-ok .material-symbols-outlined { color: #15724c; }
.tm-chip-res .is-missed .material-symbols-outlined { color: #a35a00; }
.tm-chip-res .is-over .material-symbols-outlined { color: #ba1a1a; }
.tm-chip-res .is-over b { text-decoration: line-through; text-decoration-color: rgba(186,26,26,.55); }

/* the debrief */
.tm-db-title { margin: 4px 0 6px; font-size: 18px; }
.tm-db-when { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 6px !important; font-size: 13px !important; font-weight: 600; color: #3a4350 !important; }
.tm-db-when .material-symbols-outlined { font-size: 17px; color: #15724c; }
.tm-ba { width: 100%; border-collapse: collapse; margin: 8px 0 8px; font-size: 13px; line-height: 1.4; }
.tm-ba th, .tm-ba td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #e9edf3; vertical-align: top; }
.tm-ba thead th { font: 700 10.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8a93a0; }
.tm-ba tbody th { font-weight: 700; color: #2b3440; white-space: nowrap; }
.tm-ba td { color: #3a4350; }
.tm-ba tr.is-changed td:last-child { color: #a3261b; font-weight: 650; }
.tm-ba tr.is-changed th::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: #d64a3c; }
.tm-replay { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.tm-pleth-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px !important; padding: 10px 12px; border-radius: 12px; background: rgba(47,143,214,.08); color: #23527a !important; font-size: 13px !important; line-height: 1.5; }
.tm-pleth-note b { color: #1b4466; }
.tm-pleth-note .material-symbols-outlined { font-size: 18px; color: #2f8fd6; }
.tm-replay .material-symbols-outlined { font-size: 18px; }
.tm-def { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(22,33,52,.08); font-size: 13.5px; line-height: 1.55; color: #3a4350; }
.tm-def:empty { display: none; }
.tm-def-k { display: flex; align-items: center; gap: 6px; font: 700 10.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8a93a0; }
.tm-def-k .material-symbols-outlined { font-size: 15px; }
.tm-def-term { display: block; margin: 6px 0 2px; font-size: 15px; color: #14181d; }
.tm-def p { margin: 0 0 8px; }
.tm-def .tm-def-src { font-size: 12px; color: #6b7480; }
.tm-def a.q12-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.tm-def a.q12-link .material-symbols-outlined { font-size: 16px; }

/* under the paper: the read so far */
.tm-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.tm-cell { padding: 9px 12px; border-radius: 12px; background: #f5f7fb; border: 1px solid transparent; }
.tm-cell span { display: block; font: 700 10.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8a93a0; }
.tm-cell b { font: 700 15px 'Space Grotesk', Inter, sans-serif; color: #2b3440; }
.tm-cell.is-good b { color: #15724c; }
.tm-cell.is-bad b { color: #ba1a1a; }
.tm-key { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: #6b7480; }
.tm-work .gl-trail:empty { display: none; }
.tm-rt { color: #26408b !important; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tm-heart.is-beat, .tm-frozen, .tm-ov-card, .tm-nudge { animation: none; } }

/* Telemetry Watch, iteration 5: what each change means, the results, a beat before and after, the ladder */
.tm-defs { margin: -4px 0 14px; font-size: 13px; }
.tm-defs summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 650; color: #26408b; list-style: none; }
.tm-defs summary::-webkit-details-marker { display: none; }
.tm-defs summary .material-symbols-outlined { font-size: 17px; }
.tm-defs dl { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #f5f7fb; }
.tm-defs dt { display: inline; font-weight: 700; color: #2b3440; }
.tm-defs dt::after { content: ': '; }
.tm-defs dd { display: inline; margin: 0; color: #4a5462; line-height: 1.45; }
.tm-chip-res li em { display: inline-block; margin-left: 6px; font-style: normal; font: 700 10.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; }
.tm-chip-res .is-found em, .tm-chip-res .is-ok em { color: #15724c; }
.tm-chip-res .is-missed em { color: #a35a00; }
.tm-chip-res .is-over em { color: #ba1a1a; }
.tm-chip-res .is-also em, .tm-chip-res .is-also .material-symbols-outlined { color: #26408b; }
.tm-chip-res .is-also b { color: #4a5462; }
.tm-cmp { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 12px; }
.tm-cmp:empty { display: none; }
.tm-cmp-f { margin: 0; flex: 1 1 140px; min-width: 0; }
.tm-cmp-f canvas { display: block; max-width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px rgba(22,33,52,.08); }
.tm-cmp-f figcaption { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #4a5462; }
.tm-cmp-f figcaption b { display: block; font: 700 10.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8a93a0; }
.tm-cmp-f.is-after figcaption b { color: #a3261b; }
.tm-ladder-wrap { position: relative; margin-top: 6px; }
.tm-ladder-wrap[hidden] { display: none; }
.tm-ladder { display: block; }
/* A, AV and V stay at the left edge while the strip slides sideways (the owner, 2026-10-25): a sticky
   column over the canvas's margin, as wide as it (js drawLadder sets the size), white fading out */
.tm-ladder-tiers { position: sticky; left: 0; z-index: 2; display: grid; grid-auto-rows: 24px; box-sizing: border-box; padding: 3px 6px 3px 0;
                   background: linear-gradient(90deg, #fff 72%, rgba(255,255,255,0)); pointer-events: none;
                   font: 700 10px 'IBM Plex Mono', ui-monospace, monospace; color: #8a93a0; }
.tm-ladder-tiers span { display: flex; align-items: center; justify-content: flex-end; }
.tm-ladder-key { margin: 8px 0 4px; padding: 0 16px; max-width: 780px; font-size: 12px; line-height: 1.5; color: #6b7480; }
.tm-ladder-key b { color: #3a4350; }