/* Drake KB ??? content-area fixes (image overflow + left gutter reclaim). */ /* 1. Content images must never overflow their column. Source articles carry * huge fixed width/height attrs (e.g. width="4001"); constrain them. */ .betterdocs-entry-content img, .drake-doc-main img, .betterdocs-content img { max-width: 100%; height: auto; } /* Screenshots/framed images shouldn't blow past the text column either. */ .betterdocs-entry-content figure { max-width: 100%; } /* 1a. IMAGE-MAP images must NOT scale. * * An is in the image's INTRINSIC pixels, and the browser does * not rescale hotspots when CSS resizes the image. So `max-width:100%` silently * moves every clickable region: this image is 755px natural, and at a 900px * viewport it renders 587px ??? a 22% shift, enough that the hotspots no longer sit * on the things they point at. * * Six Broadcasts articles are a single tall marketing image whose ONLY navigation * is its map (21 hotspots), so a misaligned map means the article's links do not * work rather than merely look off. Keeping intrinsic width can overflow a narrow * column; a horizontal scroll on those six articles is the lesser problem, and * the wrapper below contains it instead of breaking the page layout. */ .betterdocs-entry-content img[usemap], .drake-doc-main img[usemap], .betterdocs-content img[usemap] { max-width: none; width: auto; height: auto; } /* Contain the overflow the rule above allows, so a wide mapped image scrolls * inside the column instead of widening the page. */ .betterdocs-entry-content p:has(> img[usemap]), .drake-doc-main p:has(> img[usemap]), .betterdocs-content p:has(> img[usemap]) { max-width: 100%; overflow-x: auto; } /* --------------------------------------------------------------------------- * 1b. ARTICLE TABLES ??? reproduce Drake's MadCap "table style" rendering. * * On the live KB every table is styled by a generated MadCap table stylesheet * (Resources/TableStyles/Drake-Tax-Basic.css ??? 253 of 292 tables in the corpus * ??? or DAS-Basic.css ??? the other 38). All of the design lives in per-cell * classes like `TableStyle-Drake-Tax-Basic-HeadE-Normal-Header1`, which our * transform used to strip along with every other class, leaving bare * /
/. Nothing in the theme or BetterDocs styles a bare table, * so migrated tables rendered as unbordered, unaligned plain text. That is the * reported "table formatting did not come over". * * migration/transform.py now emits a stable contract instead: *
* (???-das = green DAS header) * and preserves the per-cell text-align / width / background-color that the * source carried inline. This sheet supplies everything else. * * Values below are read off Drake's own generated CSS, not invented: * table border: 1px solid #000; border-collapse: separate; * border-spacing: 0; margin: 30px 10px 30px 0 * thead background-color: var(--Primary) = #1b75bc (DAS: #00906d) * color:#fff; font-weight:bold; text-align:left; * border-bottom: 2px solid #000 * td padding: 2px 6px; row rule 1px solid #dcdcdc * first column (the source's `role="rowheader"` cell) is bold * * The #dcdcdc row rule is on the D/E cell classes, which the corpus shows are * exactly the non-last body rows (A/B are the last row and carry no rule, * because the table's own bottom border closes it) ??? so `tr:not(:last-child)` * reproduces it without shipping ~900 generated class names. * * Every number below was MEASURED off the live page with CDP (getComputedStyle * on kb/Drake-Software/10888.htm and kb/Drake-Tax/20002.htm), not read off the * source stylesheet ??? because the live site ALSO loads DataTables, which * restyles every table and changes the outcome. Where the two disagree, the * measured render wins, since that is what the reviewer is comparing against: * th padding measured 10px 30px 10px 10px ??? we use 10px * (DataTables reserves the extra 30px on the right for its * sort arrow; we deliberately don't ship DataTables, so * reserving space for an icon that never renders would * just look like a misaligned header) * th border-bot measured 1px rgba(0,0,0,.3) ??? DataTables OVERRIDES * MadCap's 2px solid #000, so 1px translucent is correct * td padding measured 2px 10px ??? MadCap's tight 2px vertical wins * over DataTables' 8px, so rows are compact, not airy * td valign measured middle (not top) * We deliberately do NOT import DataTables itself: its sort arrows, responsive * column collapsing and per-page JS init are interactive features, not * formatting, and are out of scope for this fix. * ------------------------------------------------------------------------- */ /* The scroll container, not the table, gets overflow. Putting `display:block; * overflow-x:auto` on the
itself (what this file did before) destroys * table layout: cells stop sharing column widths and collapse toward their * content, which is why even the borders-aside geometry looked wrong. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .kb-table-wrap { max-width: 100%; overflow-x: auto; margin: 1.75rem 0; -webkit-overflow-scrolling: touch; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table { border-collapse: separate; border-spacing: 0; border: 1px solid #000; margin: 0; /* Fill the column, like the live site (DataTables sets table width:100%). * Deliberately NO `min-width: max-content`: the live tables WRAP long cell * text (20002's "Corporation Income Tax Return" breaks over two lines), and * max-content would stop wrapping and force a horizontal scroll on tables * that fit fine today. The wrapper's overflow-x is the escape hatch for * content that genuinely cannot shrink (wide screenshots, long URLs). */ width: 100%; max-width: none; /* `table-layout: auto` (the default) is what makes the source's per-column * width hints behave as proportional weights rather than hard sizes, which * matches how the live page resolves its triplets. */ table-layout: auto; font-family: var(--drake-font); font-size: 1rem; line-height: 1.45; background: #fff; color: var(--drake-ink); } /* Header row: Drake blue, white bold, left aligned, heavy 2px base rule. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > thead > tr > th, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > thead > tr > td { background-color: var(--drake-blue); color: #fff; font-weight: 700; text-align: left; vertical-align: bottom; padding: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.3); } /* DAS-Basic tables use the DAS green instead of Drake blue. * * DELIBERATE DEVIATION from Drake's own value. Their --DAS-GruntWorx is #00906d, * which puts white bold header text at 4.03:1 ??? under WCAG AA's 4.5:1, on 55 * articles. Darkened to #00805f (4.94:1), the smallest change that passes; the * blue header beside it is #1b75bc at 4.86:1, so this now sits in the same band * rather than being the one table style that fails. Drake's live KB still * carries #00906d, so this is a knowing divergence, not drift. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table-das > thead > tr > th, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table-das > thead > tr > td { background-color: #00805f; } /* Body cells: the live page's measured 2px/10px padding + #dcdcdc row rule. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > tbody > tr > td, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > tbody > tr > th { padding: 2px 10px; vertical-align: middle; border-bottom: 1px solid #dcdcdc; } /* Last row draws no rule ??? the table's own 1px border closes the box. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > tbody > tr:last-child > td, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > tbody > tr:last-child > th { border-bottom: 0; } /* MadCap marks each row's key cell `role="rowheader"`; Drake's stylesheet gives * that column the "-Bold-" cell class. Reproduce the bold first column. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > tbody > tr > [role="rowheader"] { font-weight: 700; } /* spacers; real captions read as a label. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > caption { caption-side: top; text-align: left; font-weight: 700; padding: 0 0 0.4em; } /* --------------------------------------------------------------------------- * 1c. CHART-KEY SYMBOLS (??? ??? ???) * * Drake draws these with legacy symbol fonts ??? a Wingdings/Webdings letter * that the font maps to a dingbat (`t` = ???). * Those spans carried only a class, so the attribute strip reduced them to * their literal letter: article 20002's 640-row form-availability chart read * "t", "P" and "r" down every column. CSS cannot fix that (Wingdings is a * Microsoft font, absent on our Linux hosts and on most visitors' machines), * so transform.py substitutes the real Unicode character and tags it with a * kb-sym-* class. Colours are Drake's own (Primary.css): * span.wingdings1 #1b75bc ?? span.wingdings2 #008000 ?? span.webdings1 #ff0000 * ------------------------------------------------------------------------- */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .kb-sym { font-weight: 700; font-size: 1.05em; line-height: 1; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .kb-sym-supported { color: var(--drake-blue); /* ??? supported in this return type */ } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .kb-sym-yes { color: #008000; /* ??? available for e-file / paper file */ } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .kb-sym-no { color: #ff0000; /* ??? not supported */ } /* --------------------------------------------------------------------------- * 1d. FORM AVAILABILITY CHARTS (articles 20001???20050) * * Split tables (.kb-table-form-chart): Form + Description both wrap inside the * article column ??? no inner horizontal scrollbar on the chart wrapper. * ------------------------------------------------------------------------- */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .kb-table-wrap:has(table.kb-table-form-chart) { overflow-x: clip; max-width: 100%; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table.kb-table-form-chart, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table[summary*="supported forms" i] { table-layout: fixed; width: 100%; max-width: 100%; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table-form-chart col.kb-col-form { width: 13%; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table-form-chart col.kb-col-desc { width: 61%; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table-form-chart col.kb-col-efile, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table-form-chart col.kb-col-paper { width: 13%; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table.kb-table-form-chart :is(th, td):nth-child(1), :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table[summary*="supported forms" i] :is(th, td):nth-child(1) { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; vertical-align: top; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table.kb-table-form-chart :is(th, td):nth-child(2), :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table[summary*="supported forms" i] :is(th, td):nth-child(2) { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; vertical-align: top; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table.kb-table-form-chart :is(th, td):nth-child(3), :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table.kb-table-form-chart :is(th, td):nth-child(4), :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table[summary*="supported forms" i] :is(th, td):nth-child(n + 3) { white-space: nowrap; text-align: center; vertical-align: middle; padding-left: 4px; padding-right: 4px; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .kb-form-chart-note { margin: 0.25rem 0 0.75rem; font-size: 0.95rem; } /* 2. Reclaim the large empty left gutter: the theme applies a big global * side padding (var(--wp--preset--spacing--50)) to the constrained root. * Tighten the left/right root padding so the KB uses more of the width. */ .wp-site-blocks { --wp--style--root--padding-left: 24px; --wp--style--root--padding-right: 24px; } /* 3. Rebalance the docs 2-column layout. BetterDocs' single-doc template gives * the LEFT category rail 33.33% and the content column only 66.66%, which * cramps the article and shrinks its screenshots. Give the left rail a * narrower fixed-ish share and let content take the rest, so images render * at a legible size (matching the source's wide content area). */ .wp-block-columns.alignwide > .wp-block-column:first-child { flex-basis: 22% !important; min-width: 220px; } .wp-block-columns.alignwide > .wp-block-column:last-child { flex-basis: 78% !important; } /* --------------------------------------------------------------------------- * 4. FAQ / collapsible sections (
/) accordion rows. * * Source articles (MadCap dropdowns) are converted by migration/transform.py * into bare
??????
, sometimes carrying * class="kb-dropdown". Nothing in the theme or BetterDocs styles these, so * they rendered as tiny grey text with the browser's default ??? marker. * * Target (the real Drake KB): a plain accordion ??? bold near-black question * row, generous vertical padding, hairline rule between adjacent rows, a * subtle chevron on the right that flips when open. No fills, no chrome. * * Scoped to the article body (BetterDocs entry content / .drake-doc-main) so * admin UI and unrelated theme
(e.g. block editor panels) are * untouched. details.kb-dropdown lives inside these wrappers, so it is * covered by the same selectors. * ------------------------------------------------------------------------- */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details { margin: 0; padding: 0; font-family: var(--drake-font); } /* Hairline only BETWEEN consecutive rows ??? no trailing rule under the group, * and a lone in-prose dropdown gets no stray underline. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details + details { border-top: 1px solid var(--drake-line); } /* The whole question row is the click target. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary { display: block; /* also suppresses the default marker in modern Chrome */ position: relative; /* chevron anchors to the ROW, not the whole details box */ list-style: none; cursor: pointer; margin: 0; padding: 17px 42px 17px 2px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--drake-ink); transition: color 0.15s ease, padding-bottom 0.22s ease-out; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary::marker { content: ""; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary::-webkit-details-marker { display: none; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary:hover { color: var(--drake-blue); } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary:focus-visible { outline: 2px solid var(--drake-blue); outline-offset: 2px; } /* Understated chevron on the right, rotated 180?? when the row is open. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--drake-gray); border-bottom: 2px solid var(--drake-gray); transform: translateY(-75%) rotate(45deg); transition: transform 0.18s ease, border-color 0.15s ease; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary:hover::after { border-color: var(--drake-blue); } /* Open state: answer body reads as normal prose, comfortably spaced from the * question and from the next row's hairline. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details[open] > summary { padding-bottom: 8px; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details[open] { padding-bottom: 18px; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > :not(summary) { padding-left: 2px; line-height: 1.6; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary + * { margin-top: 0; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > :last-child { margin-bottom: 0; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details ul, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details ol { /* The theme leaves list padding at 0 with markers outside the box, so answer * bullets hung to the LEFT of the question text. Indent them instead. */ margin: 8px 0; padding-left: 22px; list-style-position: outside; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details li > p { margin: 4px 0; } /* --------------------------------------------------------------------------- * 5. Animate the accordion reveal (pure CSS, no JS). * * Native
normally snaps open. The real Drake KB eases the answer * open. Modern CSS can do this without JS: * - `interpolate-size: allow-keywords` makes `height: auto` animatable; * - `::details-content` is the (previously unstylable) wrapper around * everything after ; * - `transition-behavior: allow-discrete` lets the UA animate the * discrete `content-visibility` flip alongside the height, so the * content stays visible for the whole close animation instead of * vanishing on frame 1. * * Wrapped in @supports so browsers without ::details-content / * interpolate-size (older Safari/Firefox) keep today's instant behavior ??? * nothing is hidden or clipped for them. * * `interpolate-size` is set on the details rows (it inherits down to * ::details-content) rather than on :root, so it cannot alter auto-size * interpolation anywhere else on the page. * * Works with the right-rail toolbar's "expand all", which toggles the * `open` attribute programmatically: the transition is driven purely by the * open/closed state change, so a scripted toggle animates identically and * can never leave a row stuck (height only ever resolves to 0 or auto). * ------------------------------------------------------------------------- */ @supports (interpolate-size: allow-keywords) and selector(details::details-content) { :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details { interpolate-size: allow-keywords; transition: padding-bottom 0.22s ease-out; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details::details-content { height: 0; overflow: hidden; opacity: 0; transition: height 0.24s ease-out, opacity 0.2s ease-out, content-visibility 0.24s allow-discrete; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details[open]::details-content { height: auto; opacity: 1; } } /* Accessibility: honor the OS "reduce motion" setting ??? the accordion still * opens and closes, just instantly (chevron flip included). */ @media (prefers-reduced-motion: reduce) { :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details::details-content, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) details > summary::after { transition: none; } } /* --------------------------------------------------------------------------- * 6. Suppress BetterDocs' own print/PDF icon. * * BetterDocs renders a print icon at the top-right of the article body * (.betterdocs-print-pdf > .betterdocs-print-btn, plus a per-instance * .betterdocs-printicon- class). The Drake right-rail toolbar now * provides the canonical print control ([data-drake-print]), so the * BetterDocs icon is a duplicate. Hide it ??? do NOT remove it server-side, * since BetterDocs' own print script binds to it. * * Scoped to the single-doc body so any other BetterDocs surface (e.g. an * admin preview) is unaffected. Our toolbar button uses .drake-rt-btn and * is untouched by these selectors. * ------------------------------------------------------------------------- */ body.single-docs .betterdocs-print-pdf, :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) .betterdocs-print-pdf { display: none !important; }
used as a row header inside tbody must not inherit the blue fill. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table > tbody > tr > th { background: transparent; color: inherit; text-align: left; } /* Tables carry prose; kill the theme's block-level paragraph margins inside a * cell so a multi-paragraph cell doesn't blow the row height open. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table :is(p, ul, ol) { margin-block: 0.35em; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table :is(p, ul, ol):first-child { margin-block-start: 0; } :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table :is(p, ul, ol):last-child { margin-block-end: 0; } /* Screenshots inside a cell must not force the column wider than the viewport. */ :is(.betterdocs-entry-content, .betterdocs-content, .drake-doc-main) table.kb-table img { max-width: 100%; height: auto; } /* MadCap emits