/* TTE Assistant: a calm, dense, clinical interface. Designed for long reading sessions: high contrast, no pure black/white, generous line height, and colour used only where it carries meaning. */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f5; --surface-3: #e6e9ee; --border: #d8dde5; --border-strong: #c2c9d4; --text: #1a1f27; --text-2: #55606f; --text-3: #838d9c; --accent: #1f6feb; --accent-soft: #e7f0fd; --accent-text: #0b4fbd; --normal: #1a7f5a; --normal-bg: #e4f4ed; --borderline: #a8710a; --borderline-bg: #fdf2dc; --abnormal: #c0392b; --abnormal-bg: #fdeceb; --info: #5a4fcf; --info-bg: #eeecfc; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05); --shadow-lg: 0 8px 32px rgba(16,24,40,.14); --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; } body.dark { --bg: #12151a; --surface: #1a1e25; --surface-2: #21262e; --surface-3: #2b323c; --border: #2f3742; --border-strong: #3d4653; --text: #e6eaf0; --text-2: #a3adbb; --text-3: #7a8494; --accent: #4d94ff; --accent-soft: #16273f; --accent-text: #8bb8ff; --normal: #4ecb95; --normal-bg: #14291f; --borderline: #e0ac4a; --borderline-bg: #2c2313; --abnormal: #f0776a; --abnormal-bg: #2e1917; --info: #a99bff; --info-bg: #211d38; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25); --shadow-lg: 0 8px 32px rgba(0,0,0,.5); } * { box-sizing: border-box; } /* An author `display` rule silently beats the UA stylesheet's [hidden] { display: none }, regardless of specificity. Anything given a display value would otherwise ignore the hidden attribute entirely. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); /* Dark mode is a class on , so body is where --bg flips. keeps * the :root (light) value, which shows as a pale band under any page * shorter than the viewport — invisible on the long app panels, obvious on * signin.html. Making body at least a full viewport tall means body's * background is what you see, whatever the page's height. */ min-height: 100vh; color: var(--text); font: 15px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; font-weight: 640; letter-spacing: -.01em; } h2 { font-size: 1.22rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; } p { margin: 0 0 .9em; } a { color: var(--accent-text); } .muted { color: var(--text-2); } .small { font-size: .86rem; } .hidden { display: none !important; } .spacer { flex: 1; } .row { display: flex; align-items: center; } .gap { gap: .55rem; } .wrap { flex-wrap: wrap; } /* ------------------------------- App bar ------------------------------- */ .appbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; height: 54px; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: .5rem; font-weight: 680; letter-spacing: -.02em; font-size: 1.02rem; } .brand-icon { width: 22px; height: 22px; color: var(--accent); } .tabs { display: flex; gap: .15rem; } .tab { border: 0; background: transparent; color: var(--text-2); padding: .45rem .8rem; border-radius: var(--radius-sm); font: inherit; font-size: .92rem; font-weight: 520; cursor: pointer; } .tab:hover { background: var(--surface-2); color: var(--text); } .tab.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .appbar-right { margin-left: auto; display: flex; align-items: center; } .icon-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; } .panel { display: none; } .panel.active { display: block; animation: fade .18s ease; } @keyframes fade { from { opacity: 0; transform: translateY(3px);} to {opacity:1; transform:none;} } /* ------------------------------ Step rail ------------------------------ */ /* Sticks directly under the 54px app bar, so the four steps stay reachable * however far down a long view or report you have scrolled. The shadow only * appears once it is actually stuck, which is what distinguishes it from the * content scrolling underneath. */ .steprail { position: sticky; top: 54px; z-index: 30; display: flex; gap: .3rem; margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .3rem; box-shadow: 0 6px 16px -12px rgba(16, 24, 40, .55); } body.dark .steprail { box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .7); } /* The page's top padding leaves a few pixels between the app bar and the * stuck rail, and scrolling content shows through it. This paints that strip * in the page background so the two read as one fixed header. */ .steprail::before { content: ''; position: absolute; left: -20px; right: -20px; top: -16px; height: 16px; background: var(--bg); pointer-events: none; } /* The panel has to be able to scroll past a sticky child, so nothing in the * chain may clip or create a new scroll container. */ .step-panel, .panel, main { overflow: visible; } .step { flex: 1; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: .9rem; font-weight: 540; cursor: pointer; padding: .5rem .7rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; gap: .5rem; } .step:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } .step.active { background: var(--accent); color: #fff; } .step.active .step-n { background: rgba(255,255,255,.25); color: #fff; } .step:disabled { opacity: .4; cursor: not-allowed; } .step-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: .74rem; font-weight: 700; } .step-panel { display: none; } .step-panel.active { display: block; animation: fade .18s ease; } /* ------------------------------- Layout -------------------------------- */ .two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: start; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 880px) { .two-col, .grid2 { grid-template-columns: 1fr; } } /* ------------------------------- Forms --------------------------------- */ .raw { width: 100%; min-height: 260px; resize: vertical; font-family: var(--mono); font-size: .85rem; line-height: 1.55; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); margin-bottom: .8rem; } .raw:focus, input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .field { margin-bottom: 1rem; } .field > label { display: block; font-size: .84rem; font-weight: 600; color: var(--text-2); margin-bottom: .35rem; } input[type=number], input[type=text], select { width: 100%; padding: .5rem .6rem; font: inherit; font-size: .92rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .segmented button { border: 0; background: var(--surface); color: var(--text-2); padding: .45rem .85rem; font: inherit; font-size: .88rem; cursor: pointer; border-right: 1px solid var(--border); } .segmented button:last-child { border-right: 0; } .segmented button:hover { background: var(--surface-2); } .segmented button.active { background: var(--accent); color: #fff; font-weight: 580; } .checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; } .checkgrid label, .switch { display: flex; align-items: center; gap: .45rem; font-size: .87rem; color: var(--text-2); cursor: pointer; } .checkgrid input, .switch input { accent-color: var(--accent); } /* ------------------------------- Buttons ------------------------------- */ .btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: .5rem .95rem; border-radius: var(--radius-sm); font: inherit; font-size: .9rem; font-weight: 540; cursor: pointer; transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-2); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); } .btn.ghost:hover { background: var(--surface-2); color: var(--text); } .btn.tiny { padding: .28rem .6rem; font-size: .82rem; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* Anchors that are buttons. Used for "Sign in" in the app bar and the links * out of the sign-in card: without this they keep the UA underline and sit on * the text baseline instead of centring like a real button. */ a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } a.btn:hover { text-decoration: none; } /* -------------------------------- Cards -------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .card-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .7rem; } .card-head h3 { margin: 0; } /* --------------------------- Finding cards ----------------------------- */ .findings { display: grid; gap: .6rem; } .finding { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: .75rem .9rem; } .finding.normal { border-left-color: var(--normal); } .finding.borderline { border-left-color: var(--borderline); } .finding.abnormal { border-left-color: var(--abnormal); } .finding.info { border-left-color: var(--info); } .finding-top { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .25rem; } .finding-title { font-weight: 620; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); } .pill { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 20px; } .pill.normal { background: var(--normal-bg); color: var(--normal); } .pill.borderline { background: var(--borderline-bg); color: var(--borderline); } .pill.abnormal { background: var(--abnormal-bg); color: var(--abnormal); } .pill.info { background: var(--info-bg); color: var(--info); } .finding-statement { font-size: .98rem; margin-bottom: .3rem; } .finding-detail { font-size: .855rem; color: var(--text-2); } .pathway-tag { margin-left: auto; font-size: .7rem; font-weight: 600; letter-spacing: .03em; color: var(--text-3); background: var(--surface-2); padding: .1rem .45rem; border-radius: 4px; white-space: nowrap; } /* The tag becomes a button when the pathway has a diagram behind it. */ button.pathway-tag { border: 1px solid var(--border); font-family: inherit; cursor: pointer; } button.pathway-tag:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); } .pt-icon { margin-left: .25rem; font-size: .62rem; opacity: .75; } /* Per-variable audit table on the diastology finding */ .varstable { width: 100%; border-collapse: collapse; margin: .55rem 0 .5rem; font-size: .85rem; } .varstable td { padding: .28rem .5rem; border-top: 1px solid var(--border); vertical-align: baseline; } .varstable tr:first-child td { border-top: 0; } .vt-name { width: 30%; color: var(--text); } .vt-val { width: 20%; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; } .vt-verdict { width: 16%; } .vt-range { color: var(--text-3); font-size: .8rem; } /* The full severity partition, with the patient's band picked out. Showing all four cutoffs is the point: when a chamber is severely dilated, the useful information is where the other boundaries sit. */ .bands { display: flex; flex-wrap: wrap; gap: .25rem; } .band { display: inline-flex; flex-direction: column; align-items: center; padding: .1rem .4rem; border-radius: 4px; line-height: 1.25; border: 1px solid var(--border); background: var(--surface); } .band .bl { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-3); } .band .br { font-family: var(--mono); font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; } .band.on { border-color: transparent; } .band.on .bl, .band.on .br { color: inherit; } .band.on.b-normal { background: var(--normal-bg); color: var(--normal); } .band.on.b-mild { background: var(--borderline-bg); color: var(--borderline); } .band.on.b-moderate { background: var(--abnormal-bg); color: var(--abnormal); } .band.on.b-severe { background: var(--abnormal); color: #fff; } .band.on.b-below-range { background: var(--info-bg); color: var(--info); } .band.on .br { font-weight: 700; } .vbadge { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .38rem; border-radius: 20px; white-space: nowrap; } .vbadge.normal { background: var(--normal-bg); color: var(--normal); } .vbadge.abnormal { background: var(--abnormal-bg); color: var(--abnormal); } .vbadge.indeterminate { background: var(--borderline-bg); color: var(--borderline); } .vbadge.unavailable { background: var(--surface-3); color: var(--text-3); } .vbadge.mild { background: var(--borderline-bg); color: var(--borderline); } .vbadge.moderate { background: var(--abnormal-bg); color: var(--abnormal); } .vbadge.severe { background: var(--abnormal); color: #fff; } .vbadge.low { background: var(--info-bg); color: var(--info); } /* Low-flow / low-gradient branch labels */ .vbadge.not-severe { background: var(--normal-bg); color: var(--normal); } .vbadge.high { background: var(--abnormal-bg); color: var(--abnormal); } .vbadge.low-grad { background: var(--borderline-bg); color: var(--borderline); } .vbadge.low-flow { background: var(--abnormal-bg); color: var(--abnormal); } .vbadge.normal-flow { background: var(--normal-bg); color: var(--normal); } .vbadge.reduced { background: var(--abnormal-bg); color: var(--abnormal); } .vbadge.preserved { background: var(--normal-bg); color: var(--normal); } .varstable tr.vr-unavailable .vt-name, .varstable tr.vr-unavailable .vt-val { color: var(--text-3); } @media (max-width: 700px) { .varstable td { display: block; width: auto; border-top: 0; padding: .1rem .3rem; } .varstable tr { display: block; border-top: 1px solid var(--border); padding: .35rem 0; } } /* The branch points an algorithm walked, in order */ .algo-steps { margin: .5rem 0 .55rem; padding: .5rem .8rem .5rem 2rem; background: var(--surface-2); border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .85rem; color: var(--text-2); } .algo-steps li { margin-bottom: .22rem; } .algo-steps li:last-child { margin-bottom: 0; } .algo-steps li::marker { color: var(--accent); font-weight: 700; } .finding-list { margin: .4rem 0 .45rem; padding-left: 1.05rem; font-size: .9rem; } .finding-list li { margin-bottom: .25rem; } /* Secondary values that are worth recording but not worth emphasising */ .finding-minor { margin-top: .3rem; font-size: .78rem; color: var(--text-3); font-style: italic; } .finding-caveats { margin: .45rem 0 0; padding-left: 1.05rem; font-size: .84rem; color: var(--text-2); } .finding-caveats li { margin-bottom: .2rem; } .finding-source { font-size: .76rem; color: var(--text-3); margin-top: .4rem; font-style: italic; } .catgroup { margin-bottom: 1.6rem; } .catgroup > h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); border-bottom: 1px solid var(--border); padding-bottom: .35rem; margin-bottom: .7rem; } /* ---------------------------- Measurements ----------------------------- */ .mtable { width: 100%; border-collapse: collapse; font-size: .87rem; } .mtable th { text-align: left; font-weight: 620; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: .3rem .5rem; border-bottom: 1px solid var(--border); } .mtable td { padding: .32rem .5rem; border-bottom: 1px solid var(--surface-2); } .mtable td.val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; } .mtable tr:hover td { background: var(--surface-2); } .tag-derived { font-size: .68rem; background: var(--info-bg); color: var(--info); padding: .05rem .35rem; border-radius: 3px; font-weight: 700; letter-spacing: .03em; } .tag-manual { font-size: .68rem; background: var(--borderline-bg); color: var(--borderline); padding: .05rem .35rem; border-radius: 3px; font-weight: 700; letter-spacing: .03em; } /* ------------------- Manual entry for missing values -------------------- */ .missing-card { border-left: 3px solid var(--borderline); } .missing-group { padding: .7rem 0; border-bottom: 1px solid var(--border); } .missing-group:last-of-type { border-bottom: 0; } .mg-why { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: .5rem; } .mg-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; } .mg-field { display: flex; flex-direction: column; gap: .25rem; } .mg-name { font-size: .85rem; color: var(--text-2); } .mg-input { position: relative; display: block; } .mg-input input { width: 100%; padding: .45rem 3.4rem .45rem .6rem; font-family: var(--mono); font-size: .9rem; font-variant-numeric: tabular-nums; } .mg-unit { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: .78rem; color: var(--text-3); pointer-events: none; } details.mdetails { margin-top: .8rem; } details.mdetails > summary { cursor: pointer; font-size: .88rem; color: var(--text-2); font-weight: 550; padding: .35rem 0; user-select: none; } details.mdetails > summary:hover { color: var(--text); } /* ------------------------------- Views --------------------------------- */ .views-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 880px) { .views-layout { grid-template-columns: 1fr; } } .viewnav { position: sticky; top: 70px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem; display: grid; gap: .1rem; } .viewnav button { text-align: left; border: 0; background: transparent; color: var(--text-2); padding: .45rem .6rem; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: .88rem; display: flex; align-items: center; gap: .5rem; } .viewnav button:hover { background: var(--surface-2); color: var(--text); } .viewnav button.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 620; } .viewnav .vn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: none; } .viewnav button.done .vn-dot { background: var(--normal); } .viewnav .vn-opt { font-size: .7rem; color: var(--text-3); margin-left: auto; } /* The alternative-view group (2019 Table 12): a small heading, then the windows in a slightly quieter tone than the protocol views above them. */ .viewnav .vn-group { margin: .5rem .3rem .15rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .viewnav button.alt { font-size: .84rem; } .viewnav button.alt .vn-dot { background: transparent; border: 1px solid var(--border-strong); } .viewnav button.alt.done .vn-dot { background: var(--normal); border-color: var(--normal); } .view-head { margin-bottom: 1.1rem; } .view-head h2 { margin-bottom: .2rem; } .view-head .vh-sub { font-size: .85rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .view-intro { background: var(--accent-soft); color: var(--accent-text); border-radius: var(--radius-sm); padding: .7rem .9rem; font-size: .9rem; margin-top: .7rem; } /* --------------------- View orientation strip -------------------------- */ /* .viewmeas (the standard-measurements checklist) shares the strip's chrome so the two collapsible blocks at the top of a view read as one family. */ .viewmedia, .viewmeas { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 1.1rem; padding: .2rem .8rem .5rem; } .viewmedia > summary, .viewmeas > summary { cursor: pointer; user-select: none; padding: .5rem 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .viewmedia > summary:hover, .viewmeas > summary:hover { color: var(--text); } .viewmeas .chips { padding-bottom: .3rem; } .vm-grid { display: grid; gap: .9rem; padding-bottom: .4rem; } .vm-grid.vm-two { grid-template-columns: 1fr 1fr; } /* Three panes: photo + the wall map + the territory reference. Carries vm-two as well, so the shared image caps and the narrow-screen collapse apply. */ .vm-grid.vm-three { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 900px) { .vm-grid.vm-two { grid-template-columns: 1fr; } } @media (max-width: 1200px) and (min-width: 901px) { .vm-grid.vm-three { grid-template-columns: 1fr 1fr; } } .vm-fig { margin: 0; } .vm-fig img { width: 100%; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #000; cursor: zoom-in; } .vm-fig figcaption { font-size: .78rem; color: var(--text-3); margin-top: .35rem; text-align: center; } /* When the segment reference sits beside the anatomy photo, cap both to the same height so neither can dominate. The photo is the primary image, and the reference must never render larger than it. Width is left to the aspect ratio so nothing is letterboxed or distorted. */ .vm-two .vm-fig { display: flex; flex-direction: column; } .vm-two .vm-fig img { width: auto; max-width: 100%; max-height: 300px; margin: 0 auto; } .vm-two .vm-fig:last-child img { background: var(--surface); } @media (max-width: 900px) { .vm-two .vm-fig img { max-height: 260px; } } /* The view pop-out opened from the reference guide. The orientation image is deliberately bounded: the pop-out is an index card for the view, not the lightbox, and must not look as if the image auto-maximised. Clicking the image still zooms it, same as everywhere else. The label stack shrinks to the image so the overlay percentages keep pointing at the right anatomy. */ .vw-pop .vm-fig img { width: auto; max-width: 100%; max-height: 300px; margin: 0 auto; } .vw-pop .vm-stack { width: fit-content; margin: 0 auto; } .vw-pop .vm-stack img { width: auto; max-height: 300px; } /* --------------------- Regional wall motion panel ----------------------- */ /* The scoring wheel inside a wall-motion view. Same chrome as the orientation strip; the wheel on the left, the brushes and summary on the right, one column under 900 px. Brush buttons carry their score colour on --wmc so the selected brush and the painted segment match. */ .wmpanel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 1.1rem; padding: .2rem .8rem .6rem; } .wmpanel > summary { cursor: pointer; user-select: none; padding: .5rem 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: .6rem; } .wmpanel > summary:hover { color: var(--text); } .wmpanel > summary .opt-tag { font-size: .68rem; color: var(--accent-text); font-weight: 700; letter-spacing: .04em; } .wm-grid { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 1rem; align-items: start; } @media (max-width: 900px) { .wm-grid { grid-template-columns: 1fr; } } .wm-wheel svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); } .wm-wheel .wm-seg:hover, .wm-wheel .wm-seg:focus { stroke: #ffffff; stroke-width: 3; outline: none; } .wm-label { font-size: .8rem; font-weight: 600; color: var(--text-2); margin: .2rem 0 .4rem; } .wm-brushes { display: flex; flex-wrap: wrap; gap: .35rem; } .wm-brush.sel { background: var(--wmc, var(--accent)); border-color: var(--wmc, var(--accent)); color: #0a0c0f; } .wm-brush.wm-b-4.sel { color: #fff; } .wm-brush.wm-b-aneurysm.sel, .wm-brush.wm-b-thinned.sel { background: var(--text); border-color: var(--text); color: var(--bg); } .wm-brush.wm-b-clear.sel { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .wm-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 .5rem; } .wm-summary { font-size: .9rem; color: var(--text); margin: .3rem 0 .4rem; } .wm-visible { line-height: 1.45; margin-bottom: .4rem; } .wmpanel .teach-body p { margin: 0 0 .5rem; } .wmpanel .teach-body p:last-child { margin-bottom: 0; } /* Post-TAVR guidance shown inside a standard view */ .tavrguide { border: 1px solid var(--info); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--info-bg); margin-bottom: 1.1rem; padding: .1rem .85rem .5rem; } .tavrguide > summary { cursor: pointer; user-select: none; padding: .5rem 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--info); } .tavrguide .algo-steps { background: var(--surface); border-left-color: var(--info); } /* Post-TAVR window-by-window guide */ .tavr-step { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .55rem; padding: .1rem .8rem .4rem; } .tavr-step > summary { cursor: pointer; user-select: none; padding: .5rem 0; font-size: .9rem; color: var(--text-2); } .tavr-step > summary:hover { color: var(--text); } .tavr-step[open] > summary { color: var(--accent-text); } /* Example stills inside the M-mode / PW / CW panels */ .mod-fig { margin: .6rem 0 .2rem; } .mod-fig img { width: 100%; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #000; cursor: zoom-in; } .mod-fig figcaption { font-size: .74rem; color: var(--text-3); margin-top: .25rem; line-height: 1.4; } .prompt { border-bottom: 1px solid var(--border); padding: .9rem 0; } .prompt:last-child { border-bottom: 0; } .prompt-q { font-weight: 570; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; } .prompt-q .opt-tag { font-size: .7rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* An always-visible one-line definition of the term the question turns on, for * prompts that use a word the reader may not own yet. Unlike `teach` and * `looks` it is not behind a button: a question you cannot parse is not a * question you click through to understand. */ .prompt-def { margin: -.25rem 0 .5rem; font-size: .84rem; line-height: 1.45; color: var(--text-3); border-left: 2px solid var(--border); padding-left: .6rem; max-width: 62ch; } .opts { display: flex; flex-wrap: wrap; gap: .35rem; } .opt { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); padding: .35rem .75rem; border-radius: 20px; font: inherit; font-size: .87rem; cursor: pointer; } .opt:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .opt.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 560; } .opt.sel.sev-none, .opt.sel.sev-trace { background: var(--normal); border-color: var(--normal); } .opt.sel.sev-mild { background: var(--borderline); border-color: var(--borderline); } .opt.sel.sev-moderate, .opt.sel.sev-severe { background: var(--abnormal); border-color: var(--abnormal); } .teach-btn { border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: .8rem; cursor: pointer; padding: .1rem .3rem; border-radius: 4px; } .teach-btn:hover { background: var(--accent-soft); } .teach-body { margin-top: .55rem; font-size: .875rem; color: var(--text-2); background: var(--surface-2); border-left: 2px solid var(--accent); padding: .55rem .8rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .looks-btn { color: var(--info); } .looks-btn:hover { background: var(--info-bg); } .looks-body { margin-top: .55rem; font-size: .875rem; color: var(--text-2); background: var(--info-bg); border-left: 2px solid var(--info); padding: .55rem .8rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .looks-caveat { margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--border-strong); font-size: .84rem; } .looks-fig { margin: .7rem 0 .1rem; } .looks-fig img { width: 100%; max-width: 560px; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #000; cursor: zoom-in; } .looks-fig figcaption { font-size: .76rem; color: var(--text-3); margin-top: .3rem; } /* Per-view acquisition add-ons */ .modalities { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 1.1rem; padding: .2rem .8rem .4rem; } .modalities > summary { cursor: pointer; user-select: none; padding: .5rem 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .modalities > summary:hover { color: var(--text); } .mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; padding-bottom: .5rem; } .mod-block .mod-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .25rem; } .mod-block ul { margin: 0; padding-left: 1.05rem; font-size: .84rem; color: var(--text-2); } .mod-block li { margin-bottom: .3rem; } /* -------------------------------- Quiz --------------------------------- */ .quiz-wrap { max-width: 720px; margin: 0 auto; } .quiz-progress { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; font-size: .85rem; color: var(--text-2); } .qbar { flex: 1; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .qbar > div { height: 100%; background: var(--accent); transition: width .25s ease; } .quiz-stem { font-size: 1.1rem; font-weight: 560; line-height: 1.5; margin-bottom: 1.1rem; } .quiz-opts { display: grid; gap: .45rem; margin-bottom: 1rem; } .quiz-opt { text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: .7rem .9rem; border-radius: var(--radius-sm); font: inherit; font-size: .95rem; cursor: pointer; display: flex; align-items: center; gap: .7rem; } .quiz-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); } .quiz-opt:disabled { cursor: default; } .quiz-opt .qlet { flex: none; width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: .78rem; font-weight: 700; } .quiz-opt.correct { border-color: var(--normal); background: var(--normal-bg); } .quiz-opt.correct .qlet { background: var(--normal); color: #fff; } .quiz-opt.wrong { border-color: var(--abnormal); background: var(--abnormal-bg); } .quiz-opt.wrong .qlet { background: var(--abnormal); color: #fff; } .quiz-explain { border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: 1rem; border-left: 3px solid var(--accent); background: var(--surface-2); font-size: .92rem; } .quiz-explain .qe-head { font-weight: 650; margin-bottom: .3rem; } .quiz-explain .qe-teach { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--border-strong); color: var(--text-2); font-size: .88rem; } .quiz-score { text-align: center; padding: 2rem 1rem; } .quiz-score .big { font-size: 3rem; font-weight: 700; letter-spacing: -.03em; } /* ------------------------------- Report -------------------------------- */ .report-sec { margin-bottom: 1.3rem; } .report-sec h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: .35rem; } .report-sec ul { margin: 0; padding-left: 1.15rem; } .report-sec li { margin-bottom: .3rem; } .impression { counter-reset: imp; } .impression li { margin-bottom: .4rem; font-weight: 520; } .alert-box { border: 1px solid var(--borderline); background: var(--borderline-bg); color: var(--borderline); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; } .alert-box h4 { color: inherit; margin-bottom: .4rem; letter-spacing: .05em; } .alert-box ul { margin: 0; padding-left: 1.15rem; } .alert-box li { margin-bottom: .35rem; } pre.reporttext { font-family: var(--mono); font-size: .82rem; line-height: 1.6; white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; max-height: 460px; overflow: auto; } /* ------------------------------- Learn --------------------------------- */ .track { margin-bottom: 2rem; } .track-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .8rem; } .track-head h3 { margin: 0; } .lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; } .lesson-card { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: .85rem .95rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; font: inherit; transition: border-color .12s, transform .12s; } .lesson-card:hover { border-color: var(--accent); transform: translateY(-1px); } .lesson-card.done { border-left: 3px solid var(--normal); } .lc-top { display: flex; align-items: center; gap: .45rem; } .lc-title { font-weight: 620; font-size: .96rem; color: var(--text); } .lc-sum { font-size: .85rem; color: var(--text-2); line-height: 1.45; } .lc-meta { font-size: .76rem; color: var(--text-3); display: flex; gap: .6rem; margin-top: .2rem; } .level-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .level-1 { background: var(--normal); } .level-2 { background: var(--borderline); } .level-3 { background: var(--abnormal); } .lesson-body { max-width: 760px; } .lesson-body h2 { margin-bottom: .2rem; } .lesson-body .lb-meta { color: var(--text-3); font-size: .85rem; margin-bottom: 1.5rem; } .lesson-body h3 { margin-top: 1.8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); } .lesson-body p { line-height: 1.7; } .lesson-body ul { line-height: 1.7; padding-left: 1.25rem; } .lesson-body li { margin-bottom: .35rem; } .lesson-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .88rem; } .lesson-body th { background: var(--surface-2); text-align: left; padding: .45rem .65rem; border: 1px solid var(--border); font-weight: 620; font-size: .82rem; } .lesson-body td { padding: .4rem .65rem; border: 1px solid var(--border); } .tablewrap { overflow-x: auto; } .block { border-radius: var(--radius-sm); padding: .75rem .95rem; margin: 1rem 0; font-size: .92rem; border-left: 3px solid; } .block .bl-label { font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: .25rem; } .block.pearl { background: var(--normal-bg); border-color: var(--normal); } .block.pearl .bl-label { color: var(--normal); } .block.pitfall { background: var(--abnormal-bg); border-color: var(--abnormal); } .block.pitfall .bl-label { color: var(--abnormal); } .block.board { background: var(--info-bg); border-color: var(--info); } .block.board .bl-label { color: var(--info); } .block.formula { background: var(--surface-2); border-color: var(--border-strong); font-family: var(--mono); font-size: .9rem; } .block.formula .bl-label { color: var(--text-3); font-family: -apple-system, "Segoe UI", sans-serif; } figure.reffig { margin: 1.2rem 0; } figure.reffig img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: zoom-in; display: block; } figure.reffig figcaption { font-size: .82rem; color: var(--text-3); margin-top: .4rem; text-align: center; } /* ------------------- Orientation stills with our own labels ------------- * The labels are an overlay, not part of the image: the source file stays * pristine and the text stays selectable. Percent positioning tracks the * image at any size. */ .vm-stack { position: relative; display: block; line-height: 0; } .vm-stack img { width: 100%; display: block; } .vm-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .vm-leaders line { stroke: #ffd23f; } .vm-leaders circle { fill: #ffd23f; } .vm-label { position: absolute; transform: translate(-50%, -50%); font-size: clamp(.6rem, 1.35cqw, .82rem); font-weight: 650; line-height: 1.15; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000; white-space: nowrap; pointer-events: none; letter-spacing: .01em; } .vm-label-start { transform: translate(0, -50%); } .vm-label-end { transform: translate(-100%, -50%); } .vm-labelled .vm-stack { container-type: inline-size; } /* ----------------------------- Reference ------------------------------- */ /* The reference sheet is generated from refdata rather than scanned, so it is * ordinary themed markup: it reflows, it is selectable, and dark mode works * without a white page sitting in the middle of it. */ .ref-topic { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: .6rem; } .ref-topic > summary { padding: .6rem .8rem; cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none; display: flex; align-items: center; gap: .5rem; } .ref-topic > summary::-webkit-details-marker { display: none; } .ref-topic > summary::before { content: '▸'; color: var(--text-3); font-size: .8rem; } .ref-topic[open] > summary::before { content: '▾'; } .ref-topic[open] > summary { border-bottom: 1px solid var(--border); } .ref-topic-body { padding: .3rem .8rem .9rem; } .ref-sec { margin-top: 1rem; } .ref-sec:first-child { margin-top: .5rem; } .ref-sec h4 { font-size: .86rem; font-weight: 700; margin-bottom: .4rem; } .ref-sec h5 { font-size: .8rem; font-weight: 660; margin: .7rem 0 .3rem; color: var(--text-2); } .ref-list { margin: .2rem 0 .2rem 1.1rem; font-size: .85rem; } .ref-list li { margin-bottom: .18rem; } .ref-source { font-size: .76rem; color: var(--text-3); margin-top: .45rem; } .reftable td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .reftable td { vertical-align: top; } /* ------------------- "Which view answers this?" guide ------------------- */ .guide-group { margin-top: 1.1rem; } .guide-grouphead { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-bottom: .3rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; } .guide-item { border-bottom: 1px solid var(--surface-2); } .guide-item:last-child { border-bottom: 0; } .guide-item > summary { cursor: pointer; user-select: none; padding: .5rem .2rem; font-weight: 570; font-size: .95rem; list-style-position: inside; } .guide-item > summary:hover { color: var(--accent-text); } .guide-item[open] > summary { color: var(--accent-text); } .guide-table { width: 100%; border-collapse: collapse; margin: .2rem 0 .6rem; } .guide-table td { padding: .45rem .6rem; border-top: 1px solid var(--border); vertical-align: top; font-size: .87rem; } .guide-table tr:first-child td { border-top: 0; } .gt-purpose { width: 24%; font-weight: 600; color: var(--text); } .gt-views { width: 30%; color: var(--accent-text); } .gt-note { color: var(--text-2); } @media (max-width: 820px) { .guide-table td { display: block; width: auto; border-top: 0; padding: .15rem .3rem; } .guide-table tr { display: block; border-top: 1px solid var(--border); padding: .4rem 0; } } .guide-pitfalls { background: var(--borderline-bg); border-radius: var(--radius-sm); padding: .55rem .8rem; margin: 0 0 .7rem; } .guide-pitfalls .gp-label { display: block; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--borderline); margin-bottom: .2rem; } .guide-pitfalls ul { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--text-2); } .guide-pitfalls li { margin-bottom: .25rem; } .eq-group { margin-bottom: 1.3rem; } .eq-group h4 { color: var(--accent-text); margin-bottom: .4rem; } .eq-row { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--surface-2); font-size: .89rem; } .eq-row .eq-name { color: var(--text-2); } .eq-row .eq-formula { font-family: var(--mono); font-size: .86rem; } @media (max-width: 700px) { .eq-row { grid-template-columns: 1fr; gap: .1rem; } } /* ------------------------------ Lightbox ------------------------------- */ /* ------------------------ Explainer modal ------------------------------ * Used by the glossary terms and by the algorithm diagrams. Sits BELOW the * lightbox, which can be opened on top of it from the diagram inside. */ .modal { position: fixed; inset: 0; z-index: 90; background: rgba(10,12,16,.55); display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1.2rem; overflow-y: auto; } .modal-card { position: relative; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.28); max-width: 760px; width: 100%; padding: 1.4rem 1.6rem 1.6rem; } .modal-close { position: absolute; top: .4rem; right: .7rem; border: 0; background: transparent; color: var(--text-3); font-size: 1.8rem; line-height: 1; cursor: pointer; } .modal-close:hover { color: var(--text); } .modal-card.modal-wide { max-width: 1040px; } /* Algorithm modal with the patient's values alongside: chart left, the finding's own variables table right, so the reader follows the pathway with the case at hand. Collapses to a single column when narrow, values first — on a phone you want the numbers in hand before scrolling the chart. */ /* Per-finding number editing: the "Edit numbers" control sits small and right-aligned under the variables table, and in edit mode the value cells hold compact numeric inputs. */ .vt-editrow { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; margin: .4rem 0 .2rem; flex-wrap: wrap; } .vt-editrow .vt-edit { font-size: .78rem; padding: .25rem .6rem; } .vt-editrow .muted { margin-right: auto; max-width: 34rem; } .varstable .vt-val input { width: 5.5rem; padding: .15rem .4rem; font: inherit; font-size: .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: inherit; } .varstable .vt-unit { color: var(--text-3); font-size: .78rem; } .algo-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); gap: 1.1rem; align-items: start; } .algo-split .algo-fig { margin-top: 0; } .algo-values { position: sticky; top: 0; } .algo-values .varstable { margin-top: .5rem; } @media (max-width: 900px) { .algo-split { grid-template-columns: 1fr; } .algo-values { position: static; order: -1; } } .modal-title { margin: 0 2rem .9rem 0; font-size: 1.15rem; } /* A named acquisition inside a modality list, with a worked example behind it. */ .mod-link { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--accent-text); font-weight: 580; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .mod-link:hover { color: var(--accent); text-decoration-thickness: 2px; } .mod-hint { margin: .5rem 0 0; font-style: italic; } .modal-sub { margin: -.6rem 0 .9rem; font-size: .78rem; color: var(--text-3); letter-spacing: .02em; text-transform: uppercase; font-weight: 650; } /* Standalone calculators (Reference tab → Calculators, main.js showCalculator()): a two-column form of labelled inputs, a Clear control, and the live result rendered as a finding card underneath. */ .calc-form { margin: .9rem 0 .4rem; } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; } .calc-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .calc-label { font-size: .84rem; font-weight: 600; color: var(--text-2); line-height: 1.3; } .calc-unit { font-weight: 500; color: var(--text-3); white-space: nowrap; } .calc-field input, .calc-field select { width: 100%; font-variant-numeric: tabular-nums; } .calc-field input::placeholder { color: var(--text-3); opacity: .8; font-style: italic; } .calc-actions { display: flex; justify-content: flex-end; margin-top: .55rem; } .calc-result { margin-top: .9rem; } .calc-result.calc-idle { font-size: .86rem; color: var(--text-3); font-style: italic; padding: .75rem .9rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .calc-finding .finding-statement { font-size: .95rem; } .calc-finding .varstable { margin-bottom: .2rem; } @media (max-width: 700px) { .calc-grid { grid-template-columns: 1fr; } } /* The acquisitions a finding rests on, in the objective read. */ .finding-acq { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--border); } .fa-label { font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-right: .1rem; } .acq-link { display: inline-flex; align-items: baseline; gap: .4rem; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 560; color: var(--accent-text); background: var(--accent-soft); border: 1px solid transparent; border-radius: 20px; padding: .15rem .6rem; } .acq-link:hover { border-color: var(--accent); } .acq-where { font-size: .68rem; font-weight: 500; opacity: .75; text-transform: uppercase; letter-spacing: .03em; } .gl-block { margin-bottom: .9rem; } .gl-block p { margin: 0; font-size: .92rem; color: var(--text-2); line-height: 1.55; } .gl-label { font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .2rem; } .gl-cuts { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--text-2); } .gl-cuts li { margin-bottom: .18rem; } .algo-fig { margin: .2rem 0 .8rem; } .algo-fig img { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: zoom-in; display: block; } .algo-fig figcaption { font-size: .78rem; color: var(--text-3); margin-top: .35rem; } /* A drawn algorithm needs no white plate behind it: it inherits the theme. */ .algo-fig.algo-svg { background: none; } .algo-fig.algo-svg svg { display: block; width: 100%; height: auto; } /* The same, for a drawn diagram sitting in a "What this looks like" panel. * `.looks-fig img` is capped at 560 px and given a black plate, which is right * for an ultrasound still and wrong for a schematic, so the SVG rule opts out * of both and takes the full column instead. */ .looks-fig.algo-svg svg { display: block; width: 100%; height: auto; max-width: 720px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: .4rem; } /* A teaching figure inside a lesson. Wider than the "what this looks like" * thumbnails, because here the figure IS the explanation rather than a check * against prose, and on a white plate so schematics and ultrasound both sit * correctly in either theme. */ .lesson-fig { margin: 1.2rem 0; } .lesson-fig img { width: 100%; max-width: 760px; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; cursor: zoom-in; } .lesson-fig figcaption { font-size: .82rem; color: var(--text-3); margin-top: .4rem; max-width: 760px; line-height: 1.5; } .lesson-fig.algo-svg svg { display: block; width: 100%; max-width: 760px; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: .4rem; } /* Quantifying regurgitation: one numbered block per parameter. The number is * load-bearing — the order the parameters are read in is the teaching point. */ .rg-param { margin: 1.1rem 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .rg-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; } .rg-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: .78rem; font-weight: 700; display: grid; place-items: center; } .rg-name { font-size: .98rem; font-weight: 640; color: var(--text); text-align: left; } /* A parameter that links to an existing explainer. Styled like the glossary * terms in the objective read so the affordance is the same everywhere. */ button.rg-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--accent-text); border-bottom: 1px dashed var(--accent); } button.rg-link:hover { color: var(--accent); border-bottom-style: solid; } /* Back button for stacked explainers. Absolute so it does not disturb any * modal's own layout; the card gains top padding only while it is showing, so * the title is never pushed down in the ordinary single-level case. */ .modal-back { position: absolute; top: .7rem; left: .8rem; z-index: 2; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: .2rem .55rem; font-size: .78rem; font-family: inherit; cursor: pointer; } .modal-back:hover { background: var(--surface-3); color: var(--text); } .modal-card.has-back { padding-top: 2.9rem; } .rg-what { margin: 0 0 .5rem; font-size: .9rem; color: var(--text-2); line-height: 1.5; } .rg-param .algo-fig { margin: .6rem 0 .5rem; } /* The credit line under a figure caption. Quiet on purpose: attribution is a * licence condition and belongs on the page, but it is not the point of the * figure. Which images need replacing is tracked in docs/, not here. */ .fig-credit { display: block; margin-top: .2rem; font-size: .71rem; color: var(--text-3); line-height: 1.35; opacity: .85; } /* A measurement name with an explanation behind it. */ .gterm { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: help; text-align: left; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; } .gterm:hover { color: var(--accent-text); text-decoration-color: var(--accent); } .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,12,16,.9); display: grid; place-items: center; padding: 2rem; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; background: #fff; } .lightbox-close { position: absolute; top: 1rem; right: 1.4rem; border: 0; background: transparent; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; } /* -------------------------------- Toast -------------------------------- */ .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .6rem 1.1rem; border-radius: 20px; font-size: .88rem; font-weight: 540; z-index: 200; box-shadow: var(--shadow-lg); animation: fade .15s ease; } /* ------------------------------ Utilities ------------------------------ */ .empty { text-align: center; padding: 3rem 1rem; color: var(--text-3); } .empty h3 { color: var(--text-2); } .chips { display: flex; flex-wrap: wrap; gap: .35rem; } .chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); padding: .2rem .55rem; border-radius: 20px; font-size: .78rem; } button.chip-btn { font-family: inherit; cursor: pointer; } button.chip-btn:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); } .chip.ok { background: var(--normal-bg); color: var(--normal); border-color: transparent; } .chip.warn { background: var(--borderline-bg); color: var(--borderline); border-color: transparent; } .stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .6rem 0 0; } .stat { } .stat .sv { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat .sl { font-size: .76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } .disclaimer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-3); line-height: 1.6; } /* Shown by main.js in the top bar when images fail to load (or the heartbeat falters): a quiet retry control rather than a warning banner, per the owner. Removed again once every image loads. */ #imgRefresh { border: 1px solid var(--border); border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: inherit; font-size: .82rem; font-weight: 600; padding: .35rem .8rem; margin-right: .5rem; cursor: pointer; white-space: nowrap; } #imgRefresh:hover { filter: brightness(1.08); } /* ------------------------------ Fine print ----------------------------- */ /* The persistent intended-use line under every panel. Deliberately quiet — * --text-3 at .78rem — but never hidden: it sits in normal flow at the end of * the document rather than in a fixed bar, so it neither covers content nor * scrolls away permanently. main's 5rem bottom padding already clears it. */ .finefoot { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 2rem; } .finefoot p { margin: 0; padding-top: .9rem; border-top: 1px solid var(--border); font-size: .78rem; line-height: 1.6; color: var(--text-3); } .finefoot button { border: 0; background: none; padding: 0; margin-left: .35rem; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .finefoot button:hover { color: var(--text); } /* ------------------------------ Sign in -------------------------------- */ /* signin.html only. A single narrow card on the same background as the app, * deliberately not a full-bleed "marketing" sign-in screen: someone reaching * this page has already decided to use the tool, and the job is to get them * past it, not to sell to them. */ .authmain { max-width: 30rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; } .authcard { animation: fade .18s ease; } .authcard h2 { margin-bottom: .4rem; } .authcard p { margin: 0 0 .9rem; } .authcard form { margin-top: 1.1rem; } .authcard input[type=email] { width: 100%; padding: .5rem .6rem; font: inherit; font-size: .92rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } .authcard input[type=email]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Errors and limits. Uses the abnormal token rather than a new red so the * page cannot drift from the rest of the app's colour meaning. */ .authnote { margin: .9rem 0 0; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--abnormal-bg); color: var(--abnormal); } .authfine { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border); } .authprivacy { margin: 1.2rem .2rem 0; } /* ------------------------- Account control ----------------------------- */ /* Sits in the app bar next to the theme toggle. Shows the signed-in address * on wide screens and collapses to just the action on narrow ones, because * the tab strip has first claim on the space. */ .account { display: flex; align-items: center; gap: .5rem; margin-right: .5rem; } .account-who { font-size: .82rem; color: var(--text-2); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account .btn.tiny { white-space: nowrap; } @media (max-width: 860px) { .account-who { display: none; } } /* ------------------------------- Home ---------------------------------- */ /* The signed-out landing screen. Same restraint as the sign-in card: one * column, no hero image, no marketing. It exists to say what the tool is and * offer the one action available. */ .homecard { max-width: 34rem; margin: 0 auto; padding: 3rem 0 1rem; text-align: center; } .home-icon { width: 40px; height: 40px; color: var(--accent); } .homecard h1 { margin: .6rem 0 .4rem; font-size: 1.9rem; font-weight: 680; letter-spacing: -.02em; } .home-lede { margin: 0 auto 1.6rem; max-width: 30rem; color: var(--text-2); font-size: 1rem; line-height: 1.65; } .home-cta { padding: .6rem 1.4rem; font-size: .95rem; } .home-note { margin: .9rem auto 0; max-width: 26rem; } .home-list { list-style: none; margin: 2rem auto 0; padding: 1.2rem 0 0; max-width: 26rem; text-align: left; border-top: 1px solid var(--border); } .home-list li { padding: .3rem 0 .3rem 1.1rem; position: relative; } .home-list li::before { content: ''; position: absolute; left: 0; top: .72rem; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* --------------------------- Intended use ------------------------------ */ /* Last card in the Reference tab, set smaller than the reference content * above it. Still fully legible - this is a statement people need to be able * to read - just visibly not competing with the tables for attention. */ .intended-use-card { margin-top: 2rem; font-size: .88rem; color: var(--text-2); } .intended-use-card h3 { font-size: 1rem; } .intended-use-card h4 { font-size: .89rem; margin-top: 1.1rem; } .intended-use-card p { margin: 0 0 .7rem; } .intended-use-card strong, .intended-use-card em { color: var(--text); }