; this top padding makes its gap to the eyebrow the mockup's 32px (26px on a phone), as the hubs redesign did. */ .tdiu-page #main-content { font: 16px/1.65 var(--font-sans); color: var(--td-ink); text-align: left; padding-top: 15px; } .tdiu-page #main-content > .container { max-width: 1240px; padding: 0 36px 48px; } .tdiu-page #main-content [hidden] { display: none !important; } .tdiu-page #main-content a { color: var(--td-link); text-decoration: underline; text-underline-offset: 4px; } .tdiu-page #main-content img { display: block; max-width: 100%; height: auto; } .tdiu-page #main-content h1, .tdiu-page #main-content h2, .tdiu-page #main-content h3 { font-family: var(--font-serif); line-height: 1.25; color: var(--td-ink); font-weight: 600; text-wrap: pretty; text-align: left; border: 0; padding: 0; } .tdiu-page #main-content h1 { font-size: clamp(32px, 3.2vw, 44px); margin: 12px 0 22px; letter-spacing: -1.1px; } .tdiu-page #main-content h2 { font-size: 28px; margin: 0 0 12px; letter-spacing: -.45px; } .tdiu-page #main-content h3 { font-size: 22px; margin: 0 0 14px; } .tdiu-page #main-content p { margin: 0 0 16px; } .tdiu-page #main-content summary { list-style: none; cursor: pointer; } .tdiu-page #main-content summary::-webkit-details-marker { display: none; } .tdiu-page #main-content summary:focus-visible, .tdiu-page #main-content a:focus-visible, .tdiu-page #main-content button:focus-visible { outline: 3px solid var(--td-gold); outline-offset: 4px; } .tdiu-page #main-content .td-eyebrow { font: 700 11px/1.5 var(--font-sans); letter-spacing: 1.7px; color: var(--td-link); margin: 0 0 10px; text-transform: uppercase; } /* The page's own buttons: the mockup's button box plus THE BUTTON LAW border. */ .tdiu-page .td-utility-main .tldr-btn, .tdiu-page .td-advisor-toggle, .tdiu-page .td-expand-all { font: inherit; font-weight: 600; color: var(--td-ink); background: var(--td-surface); border: 2px solid var(--color-accent); border-radius: 8px; padding: 10px 16px; min-height: 44px; margin: 0; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .tdiu-page .td-utility-main .tldr-btn:hover, .tdiu-page .td-advisor-toggle:hover, .tdiu-page .td-expand-all:hover { border-color: var(--color-primary); background: var(--td-soft); transform: translateY(-1px); } /* ── Introduction ────────────────────────────────────────────────────────── */ .tdiu-page .td-introduction { max-width: 980px; margin: 0 0 28px; } .tdiu-page #main-content .td-introduction h1 { max-width: 930px; font-size: 42px; line-height: 1.16; margin-bottom: 22px; } .tdiu-page #main-content .td-lede { font-size: 15px; line-height: 1.85; max-width: 930px; color: var(--td-muted); margin-bottom: 0; } /* ── Utility row: the real Quick Summary, Advisor and Share controls ─────── */ .tdiu-page .td-utility-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--td-line); border-bottom: 1px solid var(--td-line); margin-bottom: 34px; } .tdiu-page .td-utility-main { display: flex; gap: 10px; flex-wrap: wrap; } .tdiu-page .td-utility-main .tldr-btn, .tdiu-page .td-advisor-toggle { font-size: 12px; padding: 9px 15px; background: transparent; display: inline-block; line-height: 1.65; } .tdiu-page .td-utility-main .tldr-btn { background: var(--td-warm); } .tdiu-page .td-advisor-toggle span { margin-left: 15px; } /* tldr.js writes its own lightning mark; the approved row shows a plus. */ .tdiu-page .td-utility-main .tldr-btn > span[aria-hidden] { display: none; } .tdiu-page .td-utility-main .tldr-btn::after { content: '+'; margin-left: 15px; } /* Until tdiu.js moves it, never let the button flash inside the rail. */ .tdiu-page .td-contents .tldr-btn-nav { display: none; } .tdiu-page .td-utility-bar .rmv-share-mount, .tdiu-page .td-utility-bar .rmv-share { margin: 0; } .tdiu-page .td-utility-bar .rmv-share-btn { font-size: 12px; padding: 9px 15px; } /* The real Guide Advisor widget. The mount is never hidden: a closed widget folds away and the utility button drives the widget's own

, so the ?ask= deep link, which opens the closest details, still shows its answer. */ .tdiu-page #ask-guide-mount .ask-guide { margin: 0 0 30px; } .tdiu-page #ask-guide-mount .ask-guide:has(> .ask-guide-details:not([open])) { display: none; } .tdiu-page #ask-guide-mount .ask-guide-details { border: 1px solid var(--td-gold); border-radius: 12px; background: var(--td-surface); } .tdiu-page #ask-guide-mount .ask-guide-summary { padding: 28px 32px 0; color: var(--td-ink); font-size: 14px; } .tdiu-page #ask-guide-mount .ask-guide-body { padding: 0 32px 28px; border-top: 0; font-size: 14px; } /* ── Start with what you need ────────────────────────────────────────────── */ .tdiu-page .td-start { margin: 36px 0 28px; } .tdiu-page .td-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 24px; } .tdiu-page #main-content .td-section-heading h2 { font-size: 30px; margin: 0; } .tdiu-page .td-section-heading > a { font-size: 12px; font-weight: 600; flex-shrink: 0; } .tdiu-page .td-path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .tdiu-page #main-content .td-path { display: grid; grid-template-columns: 166px minmax(0, 1fr); text-decoration: none; color: var(--td-ink); border: 2px solid var(--color-accent); border-radius: 13px; background: var(--td-surface); overflow: hidden; min-height: 215px; transition: border-color .15s, box-shadow .15s, transform .15s; } .tdiu-page #main-content .td-path:hover { box-shadow: 0 5px 20px #0001; background: var(--td-soft); border-color: var(--color-primary); transform: translateY(-2px); } .tdiu-page #main-content .td-path > img { width: 100%; height: 100%; object-fit: cover; border-right: 1px solid var(--td-gold); } .tdiu-page .td-path > div { padding: 24px; display: flex; flex-direction: column; } .tdiu-page .td-path-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; color: var(--td-muted); margin-bottom: 9px; text-transform: uppercase; } .tdiu-page #main-content .td-path h3 { font-size: 23px; margin-bottom: 10px; letter-spacing: -.3px; } .tdiu-page #main-content .td-path p { font-size: 12px; line-height: 1.75; color: var(--td-muted); margin-bottom: 17px; } .tdiu-page .td-path-action { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; padding-top: 12px; border-top: 1px solid var(--td-line); margin-top: auto; } .tdiu-page #main-content .td-library-invite { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 28px 0 44px; padding: 24px 28px; border: 2px solid var(--color-accent); border-radius: 11px; background: var(--td-warm); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .tdiu-page #main-content .td-library-invite:hover { border-color: var(--color-primary); box-shadow: 0 5px 20px #0001; transform: translateY(-2px); } .tdiu-page #main-content .td-library-invite h2 { font-size: 23px; margin-bottom: 8px; } .tdiu-page #main-content .td-library-invite p { font-size: 12px; color: var(--td-muted); max-width: 690px; margin: 0; } .tdiu-page .td-library-invite > span { font-size: 12px; font-weight: 700; max-width: 175px; flex-shrink: 0; } .tdiu-page .td-library-invite > span > span { display: block; font-size: 23px; margin-top: 8px; } /* ── Contents rail and chapters ──────────────────────────────────────────── */ .tdiu-page .td-guide-layout { display: grid; grid-template-columns: 219px minmax(0, 1fr); gap: 35px; align-items: start; scroll-margin-top: 84px; } /* The mockup's 20px, measured below the site's 64px sticky navigation. */ .tdiu-page .td-contents { position: sticky; top: 84px; min-width: 0; } .tdiu-page .td-guide-body { min-width: 0; } .tdiu-page .td-contents-disclosure > summary { font-size: 13px; font-weight: 700; padding: 12px 0; border-bottom: 1px solid var(--td-line); display: flex; justify-content: space-between; } .tdiu-page .td-contents-disclosure > summary span { font-size: 18px; } .tdiu-page #main-content nav.guide-nav { padding: 10px 0; margin: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; } .tdiu-page #main-content nav.guide-nav a { font-size: 12px; line-height: 1.5; font-weight: 400; text-decoration: none; color: var(--td-muted); background: none; padding: 9px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; } .tdiu-page #main-content nav.guide-nav a:hover, .tdiu-page #main-content nav.guide-nav a[aria-current="location"] { color: var(--td-ink); border-left-color: var(--td-gold); background: var(--td-warm); } .tdiu-page .td-expand-all { width: 100%; font-size: 11px; margin-top: 12px; text-align: left; display: flex; justify-content: space-between; } .tdiu-page .td-contents-note { border-top: 1px solid var(--td-line); margin-top: 32px; padding-top: 22px; } .tdiu-page #main-content .td-contents-note .td-eyebrow { font-size: 9px; letter-spacing: 1.25px; } .tdiu-page #main-content .td-contents-note p { font-size: 12px; line-height: 1.85; color: var(--td-muted); } .tdiu-page .td-reading-heading { margin: 0 0 22px; } .tdiu-page #main-content .td-reading-heading h2 { font-size: 29px; } .tdiu-page #main-content .td-reading-heading > p:last-child { font-size: 12px; color: var(--td-muted); } .tdiu-page .td-chapter { border: 1px solid var(--td-gold); border-radius: 11px; background: var(--td-surface); margin: 0 0 13px; overflow: hidden; } .tdiu-page .td-chapter > details.guide-details { margin: 0; } .tdiu-page .td-chapter > details > summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; min-height: 0; } .tdiu-page .td-chapter > details > summary::before { content: none; } .tdiu-page .td-chapter > details[open] > summary { border-bottom: 1px solid var(--td-line); } .tdiu-page .td-chapter > details > summary > b { margin-left: auto; font-size: 22px; font-weight: 400; color: var(--td-muted); } .tdiu-page #main-content .td-chapter h2 { display: block; font-size: 21px; line-height: 1.35; margin: 0; letter-spacing: normal; } .tdiu-page .td-section-number { font-size: 11px; color: var(--td-muted); font-weight: 600; flex-shrink: 0; border-right: 1px solid var(--td-line); padding-right: 15px; min-width: 31px; } .tdiu-page .td-section-sub { display: block; color: var(--td-muted); font-size: 12px; line-height: 1.6; margin-top: 4px; } /* The +/− marks follow the native open state in CSS, so they are right with no JavaScript and can never disagree with the disclosure they label. */ .tdiu-page .td-sign::before { content: '+'; } .tdiu-page details[open] > summary .td-sign::before { content: '\2212'; } .tdiu-page .td-chapter .details-body { padding: 25px 30px; font-size: 14px; line-height: 1.9; } .tdiu-page #main-content .details-body p { margin: 0 0 18px; } .tdiu-page #main-content .details-body p:last-child { margin-bottom: 0; } .tdiu-page .details-body ul, .tdiu-page .details-body ol { padding-left: 22px; margin: 14px 0 24px; } .tdiu-page .details-body li { margin: 0 0 11px; padding-left: 3px; } .tdiu-page #main-content .details-body h3 { font-size: 20px; margin-top: 25px; } .tdiu-page #main-content .details-body h3:first-child { margin-top: 0; } .tdiu-page .details-body h4 { font-size: 14px; margin: 0 0 16px; } .tdiu-page .details-body strong { font-weight: 650; } .tdiu-page .tip-box, .tdiu-page .warning-box { padding: 20px 22px; margin: 22px 0; border: 1px solid var(--td-gold); border-left-width: 4px; border-radius: 8px; background: var(--td-warm); font-size: 13px; line-height: 1.8; } .tdiu-page .warning-box { background: var(--td-soft); } .tdiu-page #main-content .details-body p.td-quote { background: var(--td-surface); border-left: 3px solid var(--td-link); padding: 12px 16px; font-style: italic; margin: 8px 0; } .tdiu-page .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; } .tdiu-page .compare-card { padding: 19px; border: 1px solid var(--td-gold); border-radius: 8px; background: var(--td-bg); } .tdiu-page .details-body .compare-card h4 { font: 600 20px/1.35 var(--font-serif); color: var(--td-ink); margin: 0 0 13px; } .tdiu-page .details-body .compare-card ul { padding-left: 18px; margin: 14px 0 0; } .tdiu-page .compare-card li { font-size: 12px; line-height: 1.8; } .tdiu-page .td-context-visuals { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--td-line); margin-top: 24px; } .tdiu-page #main-content .td-context-visuals a { font-size: 11px; padding: 7px 11px; background: var(--td-soft); border: 1px solid var(--td-line); border-radius: 6px; text-decoration: none; } .tdiu-page .td-exam-topic { border-top: 1px solid var(--td-line); margin-top: 16px; padding-top: 6px; } .tdiu-page .td-exam-topic > summary { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 16px 0; } .tdiu-page #main-content .td-exam-topic > summary h3 { font-size: 18px; margin: 0; } .tdiu-page .td-exam-topic > summary .td-sign { font-size: 21px; flex-shrink: 0; color: var(--td-link); display: inline-block; } /* The mockup turns the plus into a close mark rather than a minus here. */ .tdiu-page .td-exam-topic[open] > summary .td-sign { transform: rotate(45deg); } .tdiu-page .td-exam-topic[open] > summary .td-sign::before { content: '+'; } .tdiu-page .td-exam-topic-body { padding-bottom: 12px; } .tdiu-page #main-content .td-dental { margin: 32px 0 0; } /* ── Visual references ───────────────────────────────────────────────────── */ .tdiu-page .td-resources, .tdiu-page .td-research, .tdiu-page #main-content .td-quiz { margin: 48px 0; scroll-margin-top: 84px; } .tdiu-page .td-resources { padding-top: 32px; border-top: 1px solid var(--td-line); } .tdiu-page #main-content .td-muted { font-size: 13px; color: var(--td-muted); } .tdiu-page .td-resource-group { border: 1px solid var(--td-gold); border-radius: 10px; background: var(--td-surface); margin: 13px 0; padding: 0 23px; } .tdiu-page .td-resource-group > summary { padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; } .tdiu-page #main-content .td-resource-group h3 { font-size: 21px; margin: 0; } .tdiu-page .td-group-count { font-size: 12px; color: var(--td-muted); flex-shrink: 0; } .tdiu-page .td-resource-group[open] > summary { border-bottom: 1px solid var(--td-line); } .tdiu-page .td-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding: 10px 0; } .tdiu-page .td-chart-card { padding: 18px 0; border-bottom: 1px solid var(--td-line); min-width: 0; scroll-margin-top: 84px; } .tdiu-page .td-chart-card:nth-last-child(-n+2) { border-bottom: 0; } /* The two shared poster shapes, laid out as the approved chart row. The classes stay because the live poster-sentence injector and the shared viewer both find these charts by them. */ .tdiu-page #main-content .td-chart-link, .tdiu-page #main-content .td-chart-figure { display: flex; gap: 16px; align-items: start; margin: 0; padding: 0; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; text-decoration: none; } .tdiu-page #main-content .td-chart-link:hover, .tdiu-page #main-content .td-chart-link:focus-visible { background: none; } .tdiu-page .td-chart-figure > a { display: block; flex-shrink: 0; } .tdiu-page #main-content .td-chart-card img { width: 72px; height: 94px; flex: none; object-fit: cover; object-position: top; border: 1px solid var(--td-line); border-radius: 5px; } .tdiu-page .td-chart-text, .tdiu-page .td-chart-figure figcaption { display: block; min-width: 0; padding: 0; border: 0; } .tdiu-page .td-chart-card strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 700; color: var(--td-ink); margin: 0 0 8px; } .tdiu-page .td-chart-card .vg-mini-preview__copy, .tdiu-page .td-chart-desc { display: block; font-size: 11px; line-height: 1.75; color: var(--td-muted); margin: 0 0 9px; } .tdiu-page #main-content .td-chart-open { font-size: 11px; font-weight: 600; line-height: 1.65; color: var(--td-link); text-decoration: underline; } /* ── TDIU at the Board ───────────────────────────────────────────────────── */ .tdiu-page .td-research { padding: 28px; border: 1.5px solid var(--td-gold); border-radius: 13px; background: var(--td-surface); } .tdiu-page .td-research-intro { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 26px; align-items: center; margin-bottom: 25px; } .tdiu-page #main-content .td-research-intro > img { width: 132px; border-radius: 9px; } .tdiu-page #main-content .td-research-intro h2 { font-size: 27px; } .tdiu-page #main-content .td-research-intro p:not(.td-eyebrow) { font-size: 13px; color: var(--td-muted); margin-bottom: 9px; } .tdiu-page .td-snapshot { font-size: 10px; color: var(--td-muted); display: block; } .tdiu-page #main-content .td-board-copy { font-size: 14px; line-height: 1.8; max-width: 900px; } .tdiu-page .td-board-copy strong { color: var(--td-ink); } .tdiu-page .td-year-details { border-top: 1px solid var(--td-line); margin-top: 22px; } .tdiu-page .td-year-details > summary { padding: 18px 0; font-size: 13px; font-weight: 600; } .tdiu-page .td-years-head, .tdiu-page .td-year-row { display: grid; grid-template-columns: 45px minmax(0, 1fr) 70px 70px; gap: 14px; align-items: center; font-size: 12px; } .tdiu-page .td-years-head { font-size: 10px; color: var(--td-muted); margin: 8px 0 15px; align-items: end; } .tdiu-page .td-years-head span:nth-last-child(-n+2) { text-align: right; } .tdiu-page .td-year-row { margin: 10px 0; font-variant-numeric: tabular-nums; } .tdiu-page .td-year-row strong { text-align: right; font-weight: 500; } .tdiu-page .td-year-track { height: 10px; background: var(--td-soft); border-radius: 2px; overflow: hidden; } .tdiu-page .td-year-track > span { display: block; height: 100%; background: var(--td-link); } .tdiu-page #main-content .td-data-note { font-size: 11px; color: var(--td-muted); margin: 15px 0 0; } /* ── Claim Quest: Quick Check, the real controller's markup ──────────────── */ .tdiu-page #main-content .td-quiz { background: var(--td-warm); border: 1.5px solid var(--td-gold); border-radius: 13px; padding: 32px; box-shadow: none; max-width: none; color: var(--td-ink); } /* The mockup sizes every paragraph in the quiz intro at 14px, its eyebrow included. */ .tdiu-page #main-content .td-quiz-intro > p.td-eyebrow { font-size: 14px; } .tdiu-page #main-content .td-quiz .qc-h { display: block; font-size: 30px; color: var(--td-ink); margin: 0 0 12px; } .tdiu-page .td-quiz .qc-h::before { content: none; } .tdiu-page #main-content .td-quiz .qc-sub { font-size: 14px; font-weight: 400; color: var(--td-ink); margin: 0 0 16px; } .tdiu-page #main-content .td-quiz .qc-frame { font-size: 12px; line-height: 1.8; color: var(--td-muted); max-width: 780px; margin: 0 0 16px; } .tdiu-page .td-quiz .qc-start, .tdiu-page .td-quiz .qc-btn { font: inherit; font-size: 12px; font-weight: 600; line-height: 1.65; min-height: 44px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--td-button); background: var(--td-button); color: var(--td-button-ink); } .tdiu-page .td-quiz .qc-btn-secondary { background: var(--td-surface); color: var(--td-ink); border-color: var(--td-line); } .tdiu-page .td-quiz .qc-start span { margin-left: 4px; } .tdiu-page #main-content .td-quiz .qc-status { font-size: 12px; margin: 10px 0 0; color: var(--td-ink); } .tdiu-page .td-quiz .qc-body { margin-top: 23px; padding-top: 23px; border-top: 1px solid var(--td-line); } .tdiu-page .td-quiz .qc-progress { display: none; } .tdiu-page .td-quiz .qc-q legend { font-size: 11px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: var(--td-muted); margin: 0 0 12px; } .tdiu-page #main-content .td-quiz .qc-prompt { font: 600 23px/1.5 var(--font-serif); color: var(--td-ink); margin: 0 0 20px; } .tdiu-page .td-quiz .qc-answers { gap: 9px; } .tdiu-page .td-quiz .qc-answer { background: var(--td-surface); color: var(--td-ink); border: 1px solid var(--td-line); border-radius: 8px; padding: 14px 17px; font-size: 13px; line-height: 1.65; } .tdiu-page .td-quiz .qc-answer:hover:not(:disabled) { border-color: var(--td-gold); box-shadow: 0 0 0 1px var(--td-gold); } .tdiu-page .td-quiz .qc-answers li.is-picked.is-correct .qc-answer, .tdiu-page .td-quiz .qc-answers li.is-key .qc-answer { box-shadow: 0 0 0 1px var(--color-success, #2e7d32); } .tdiu-page .td-quiz .qc-answers li.is-picked.is-wrong .qc-answer { box-shadow: 0 0 0 1px var(--color-danger, #c62828); } .tdiu-page .td-quiz .qc-feedback { border-left: 3px solid var(--td-gold); border-radius: 0; padding: 14px 18px; background: var(--td-surface); font-size: 13px; margin: 20px 0; } .tdiu-page #main-content .td-quiz .qc-feedback p { margin: 0 0 12px; } .tdiu-page #main-content .td-quiz .qc-feedback p:last-child { margin-bottom: 0; } .tdiu-page #main-content .td-quiz .qc-review-link { font-size: 12px; font-weight: 600; color: var(--td-link); } .tdiu-page .td-quiz .qc-actions { margin-top: 20px; gap: 12px; } .tdiu-page #main-content .td-quiz .qc-result-h { font: 400 11px/1.65 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--td-muted); margin: 0 0 12px; } .tdiu-page #main-content .td-quiz .qc-score { font: 600 22px/1.25 var(--font-serif); color: var(--td-ink); margin: 0 0 14px; } .tdiu-page #main-content .td-quiz .qc-missed-count, .tdiu-page #main-content .td-quiz .qc-perfect { font-size: 13px; color: var(--td-muted); } .tdiu-page .td-quiz .qc-missed { font-size: 13px; line-height: 1.8; } .tdiu-page #main-content .td-quiz .qc-more { font-size: 12px; color: var(--td-muted); } /* ── Related, disclaimer ─────────────────────────────────────────────────── */ .tdiu-page #main-content .td-related { margin: 48px 0 30px; padding-top: 36px; border-top: 1px solid var(--td-line); } .tdiu-page #main-content .td-related .rel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 0; } .tdiu-page #main-content .td-related .rel-card { display: block; text-decoration: none; background: var(--td-surface); border: 2px solid var(--color-accent); border-radius: 12px; padding: 21px; position: relative; } .tdiu-page #main-content .td-related .rel-card:nth-child(n+4) { padding: 19px 21px; } .tdiu-page #main-content .td-related .rel-card:hover { background: var(--td-soft); border-color: var(--color-primary); } .tdiu-page .td-related .rel-card .rc-t { font: 600 18px/1.35 var(--font-serif); color: var(--td-ink); margin-bottom: 7px; } .tdiu-page .td-related .rel-card .rc-d { font-size: 12px; line-height: 1.65; color: var(--td-muted); } .tdiu-page .td-related-more { display: block; font-size: 11px; font-weight: 600; margin-top: 12px; } .tdiu-page .td-disclaimer { color: var(--td-muted); font-size: 11px; line-height: 1.8; padding: 22px 24px; background: var(--td-soft); border-radius: 8px; margin: 32px 0 24px; } .tdiu-page #main-content .td-disclaimer p { margin: 0; font-size: 13.12px; line-height: 1.6; color: var(--td-muted); } /* ── Narrower screens (the mockup's 1020 / 760 / 350 container steps) ─────── */ @media (max-width: 1020px) { .tdiu-page #main-content > .container { padding-left: 28px; padding-right: 28px; } .tdiu-page #main-content .td-path { grid-template-columns: 128px minmax(0, 1fr); } .tdiu-page .td-path > div { padding: 19px; } .tdiu-page #main-content .td-path h3 { font-size: 21px; } .tdiu-page .td-guide-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; } .tdiu-page #main-content .td-section-heading h2 { font-size: 28px; } .tdiu-page #main-content .td-introduction h1 { font-size: 38px; } } @media (max-width: 760px) { .tdiu-page #main-content { padding-top: 9px; } .tdiu-page #main-content > .container { padding: 0 20px 30px; } .tdiu-page #main-content .td-introduction h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.8px; } .tdiu-page #main-content .td-lede { font-size: 14px; line-height: 1.85; } .tdiu-page .td-introduction { margin-bottom: 23px; } .tdiu-page .td-utility-bar { margin-bottom: 20px; align-items: stretch; padding: 13px 0; gap: 8px; flex-wrap: wrap; } .tdiu-page .td-utility-main { gap: 8px; flex: 1; } .tdiu-page .td-utility-main .tldr-btn, .tdiu-page .td-advisor-toggle { font-size: 11px; padding: 9px 11px; } .tdiu-page .td-advisor-toggle span { margin-left: 6px; } .tdiu-page .td-utility-main .tldr-btn::after { margin-left: 6px; } .tdiu-page .td-utility-bar .rmv-share-btn { font-size: 11px; padding: 9px 11px; } .tdiu-page #ask-guide-mount .ask-guide-summary { padding: 21px 19px 0; } .tdiu-page #ask-guide-mount .ask-guide-body { padding: 0 19px 21px; } .tdiu-page .td-start { margin: 29px 0 22px; } .tdiu-page .td-section-heading { display: block; margin-bottom: 19px; } .tdiu-page #main-content .td-section-heading h2 { font-size: 27px; margin-bottom: 12px; } .tdiu-page .td-path-grid { grid-template-columns: 1fr; gap: 14px; } .tdiu-page #main-content .td-path { grid-template-columns: 108px minmax(0, 1fr); min-height: 205px; } .tdiu-page .td-path > div { padding: 17px 16px; } .tdiu-page .td-path-kicker { font-size: 9px; letter-spacing: .8px; } .tdiu-page #main-content .td-path h3 { font-size: 22px; line-height: 1.2; } .tdiu-page #main-content .td-path p { font-size: 11px; margin-bottom: 12px; } .tdiu-page .td-path-action { font-size: 10px; padding-top: 10px; } .tdiu-page #main-content .td-library-invite { display: block; padding: 22px; margin: 25px 0 30px; } .tdiu-page .td-library-invite > span { display: flex; max-width: none; justify-content: space-between; margin-top: 18px; align-items: center; } .tdiu-page .td-library-invite > span > span { margin: 0; } .tdiu-page .td-guide-layout { display: flex; flex-direction: column; gap: 27px; } .tdiu-page .td-contents { position: static; width: 100%; border: 1px solid var(--td-line); border-radius: 10px; background: var(--td-surface); padding: 0 15px; } .tdiu-page .td-contents-disclosure > summary { font-size: 12px; padding: 14px 0; border-bottom: 0; } .tdiu-page .td-contents-disclosure[open] > summary { border-bottom: 1px solid var(--td-line); } .tdiu-page #main-content nav.guide-nav a { padding: 11px; font-size: 12px; } .tdiu-page .td-expand-all { margin: 0 0 11px; font-size: 11px; min-height: 40px; background: var(--td-bg); } .tdiu-page .td-contents-note { display: none; } .tdiu-page .td-guide-body { width: 100%; } .tdiu-page .td-reading-heading { margin-bottom: 19px; } .tdiu-page #main-content .td-reading-heading h2 { font-size: 27px; } .tdiu-page .td-chapter > details > summary { padding: 17px 15px; gap: 12px; } .tdiu-page #main-content .td-chapter h2 { font-size: 19px; } .tdiu-page .td-section-sub { font-size: 11px; } .tdiu-page .td-section-number { display: none; } .tdiu-page .td-chapter .details-body { font-size: 13px; padding: 20px 18px; } .tdiu-page .compare-grid { grid-template-columns: 1fr; } .tdiu-page #main-content .td-exam-topic > summary h3 { font-size: 18px; } .tdiu-page .tip-box, .tdiu-page .warning-box { padding: 17px; font-size: 12px; } .tdiu-page #main-content .td-context-visuals a { font-size: 11px; line-height: 1.7; } .tdiu-page .td-resources, .tdiu-page .td-research, .tdiu-page #main-content .td-quiz { margin: 35px 0; } .tdiu-page .td-resource-group { padding: 0 17px; } .tdiu-page #main-content .td-resource-group h3 { font-size: 20px; } .tdiu-page .td-group-count { font-size: 10px; } .tdiu-page .td-chart-grid { grid-template-columns: 1fr; gap: 0; } .tdiu-page #main-content .td-chart-link, .tdiu-page #main-content .td-chart-figure { gap: 13px; } .tdiu-page #main-content .td-chart-card img { width: 54px; height: 73px; } .tdiu-page .td-chart-card strong { font-size: 12px; } .tdiu-page .td-chart-card:nth-last-child(2) { border-bottom: 1px solid var(--td-line); } .tdiu-page .td-research { padding: 21px; } .tdiu-page .td-research-intro { display: block; } .tdiu-page #main-content .td-research-intro > img { width: 91px; float: right; margin: 0 0 12px 15px; } .tdiu-page #main-content .td-research-intro h2 { font-size: 25px; } .tdiu-page .td-research-intro::after { content: ''; clear: both; display: block; } .tdiu-page #main-content .td-board-copy { font-size: 13px; } .tdiu-page .td-years-head, .tdiu-page .td-year-row { grid-template-columns: 34px minmax(20px, 1fr) 52px 51px; gap: 8px; } .tdiu-page .td-years-head { font-size: 9px; } .tdiu-page .td-year-row { font-size: 11px; } .tdiu-page #main-content .td-quiz { padding: 22px; } .tdiu-page #main-content .td-quiz .qc-h { font-size: 27px; } .tdiu-page #main-content .td-quiz .qc-prompt { font-size: 21px; } .tdiu-page .td-quiz .qc-answer { padding: 13px; font-size: 12px; } .tdiu-page .td-quiz .qc-feedback { padding: 13px; font-size: 12px; } .tdiu-page #main-content .td-related { padding-top: 25px; margin-top: 34px; } .tdiu-page #main-content .td-related .rel-cards { grid-template-columns: 1fr; gap: 13px; } .tdiu-page #main-content .td-related .rel-card { padding: 19px; } .tdiu-page #main-content .td-related .rel-card:nth-child(n+4) { padding: 18px 20px; } .tdiu-page .td-disclaimer { padding: 19px; } } @media (max-width: 350px) { .tdiu-page #main-content > .container { padding-left: 16px; padding-right: 16px; } .tdiu-page #main-content .td-introduction h1 { font-size: 29px; } .tdiu-page #main-content .td-path { grid-template-columns: 88px minmax(0, 1fr); } .tdiu-page .td-path > div { padding: 15px 13px; } .tdiu-page #main-content .td-path h3 { font-size: 20px; } .tdiu-page .td-path-action { font-size: 10px; } .tdiu-page .td-research { padding: 17px; } .tdiu-page #main-content .td-research-intro > img { width: 70px; } .tdiu-page .td-chapter > details > summary { gap: 10px; } .tdiu-page .td-chapter .details-body { padding: 17px 15px; } } @media (prefers-reduced-motion: reduce) { .tdiu-page #main-content .td-path, .tdiu-page #main-content .td-library-invite, .tdiu-page .td-utility-main .tldr-btn, .tdiu-page .td-advisor-toggle, .tdiu-page .td-expand-all { transition: none; } } @media print { .tdiu-page .td-utility-bar, .tdiu-page .td-contents { display: none; } .tdiu-page .td-guide-layout { display: block; } .tdiu-page .td-chapter { break-inside: avoid; } }