/* Dew Lab Studio Help — Inter body, #005879 header, #250C58 headings */
:root{
--muted:#000; /* Body text: summaries, remarks, descriptions — black */
--muted-light:#8C8C8C; /* Subtle hints, search hints */
--teal:#005879; /* Header background */
--link:#1364C4; /* Link color */
--heading:#250C58; /* Section title color */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;font-size:11pt;
color:#000;background:#fff;line-height:1.4;
display:flex;flex-direction:column;min-height:100vh}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
/* Description / metadata text — used for summaries, remarks, source info */
.muted{color:var(--muted)}
.muted-small{color:var(--muted);font-size:10pt}
.hint{color:var(--muted-light)}
/* Table description column — same size as body text, muted color */
td.desc{color:var(--muted)}
/* ---- Fixed header (Element710) ---- */
.fixed-header{position:sticky;top:0;z-index:100;background:#005879;overflow:hidden;color:#fff}
/* Override muted colors inside the header so text stays readable on teal */
.fixed-header .muted,
.fixed-header .muted-small,
.fixed-header .inheritance{color:#fff}
.fixed-header .inheritance .arrow{color:#fff}
/* Ancestor links sit on the teal header — keep them the same white as the
surrounding chain instead of the page link blue, which is unreadable
there. Underline on hover is the only affordance needed. */
.fixed-header .inheritance a{color:#fff;text-decoration:none}
.fixed-header .inheritance a:hover{color:#fff;text-decoration:underline}
/* Breadcrumb (Element94) */
.breadcrumb{font-size:11pt;padding:5px 15px;margin:0;
background:#fff;color:#000;border-bottom:1px solid #BBBBBB}
.breadcrumb em{font-style:italic}
.breadcrumb a{color:#1364C4}
.breadcrumb .sep{margin:0 2px}
/* Toolbar row (Element92) */
.toolbar{background:#005879;border-bottom:1px solid #005879;padding:0}
.toolbar-row{display:flex;align-items:flex-start;width:100%}
.toolbar-left{flex:1;color:#fff;font-size:10pt;
margin:3px 3px 0 15px;white-space:nowrap}
.toolbar-center{flex:1;text-align:center;color:#fff;font-size:10pt;
margin:2px 3px;white-space:nowrap}
.toolbar-center a{color:#fff;margin:0 2px}
.toolbar-right{flex:1;text-align:right;color:#fff;font-size:10pt;
margin:2px 15px;white-space:nowrap}
/* Page title (Element5) */
.page-title{color:#fff;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
font-size:15pt;font-weight:bold;margin:0 15px 9px 15px}
/* Quick links bar (Element7) */
.quick-links{font-size:11pt;margin:-7px 15px 12px 15px}
.quick-links a{color:rgba(255,255,255,0.85);margin-right:8px}
.quick-links a:hover{color:#fff}
/* ---- Scrollable content (Element720) ---- */
.content{color:#000;flex:1}
/* Main content area */
main{margin:0;padding:10px 15px}
/* Section header (Element14 / Element99) */
.section-title{color:#250C58;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
font-size:15pt;font-weight:bold;margin:20px 0}
.section-title[id]{scroll-margin-top:160px}
[id].signature{scroll-margin-top:160px}
/* Body text (Element10) */
.body-text{font-size:11pt;margin:10px 0}
/* Syntax box (Element101 + Element100) */
.signature{margin:0 0 10px 0;padding:6px;
border:1px solid #E5E5E5;
border-radius:0 5px 5px 5px;
white-space:pre;overflow-x:auto}
.signature code,.signature{font-family:Consolas,"Courier New",monospace;font-size:10pt}
/* "Syntax" label (Element99) */
.syntax-label{color:#250C58;font-size:15pt;font-weight:bold;margin:20px 0}
/* ---- Tables (Element200-207, Table1) ---- */
table{width:100%;border-collapse:collapse;font-size:11pt;
border-right:1px solid #BBBBBB;border-bottom:1px solid #BBBBBB;
margin-bottom:10px}
th,td{text-align:left;padding:5px 6px;
border-left:1px solid #BBBBBB;border-top:1px solid #BBBBBB}
th{background:#E5E5E5;font-weight:bold}
td{vertical-align:top}
tr:hover td{background:#EFF5FF}
/* ---- Overload card ---- */
/* Description card: white ground so the prose reads at full contrast. Depth
comes from the border alone — a darker top/left against a lighter
bottom/right reads as depressed, with an inset shadow where it is
supported (the two-tone border still carries the effect where it is not). */
.card{border:1px solid #D8D8D8;border-top-color:#AFAFAF;border-left-color:#AFAFAF;
border-radius:5px;padding:10px;margin-bottom:10px;background:#fff;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.10)}
/* ---- Parameter table ---- */
/* Parameter table — four columns in Pascal order: #, Name, Type, Description.
Uses table-layout:auto so Name/Type columns size to their longest content
(inline white-space:nowrap on cells holds the minimum) and Description
absorbs the slack. Wrapped in `.table-scroll` so narrow viewports get a
horizontal scrollbar instead of 1-char-per-line description wrapping. */
.param-table{font-size:11pt;table-layout:auto;width:100%}
.param-table th{background:#005879;color:#fff}
.param-table .pnum{width:30px;text-align:center}
.param-table td{background:rgba(255,255,255,0.75)}
/* ---- Type-page member list tables ----
Two shapes: 2-col (Name | Description) and 3-col (Name | Type | Description).
All columns except the last use `white-space:nowrap` to size from
content. The last column (Description) gets `width:100%` so it
absorbs all remaining space and fills to the right edge. */
.member-table{table-layout:auto;width:100%}
.member-table td.desc,.member-table th:last-child{width:100%}
.member-table td.desc{word-wrap:break-word;overflow-wrap:break-word}
.table-scroll{overflow-x:auto;margin-bottom:10px}
/* Reset margins inside member-table cells. Without this the default
browser margin-top/bottom on
doubles every row height, making
single-line descriptions span two rows worth of vertical space. */
.member-table td p,.member-table td p:first-child,.member-table td p:last-child{margin:0;padding:0}
.member-table tr[id]{scroll-margin-top:160px}
/* ---- Inheritance chain ---- */
.inheritance{display:flex;flex-wrap:wrap;gap:2px;align-items:center;
font-size:11pt;color:var(--muted);margin:5px 0 10px}
.inheritance .arrow{margin:0 3px}
/* Outside the teal header (CHM has no fixed header) the chain sits on white:
links stay in the chain's own colour so the row reads as one line. */
.inheritance a{color:inherit;text-decoration:none}
.inheritance a:hover{text-decoration:underline}
/* Ancestor link inside a type declaration, e.g.
`type TSignalModulator = class(TSignalRateConverter);`. The declaration is
code — its colouring carries meaning, so the link must not recolour the
type name. Clickability shows on hover only. */
.decl-type{color:inherit;text-decoration:none}
.decl-type:hover{text-decoration:underline}
/* ---- Code blocks ---- */
pre{padding:6px;border:1px solid #E5E5E5;border-radius:5px;
overflow-x:auto;font-size:11pt;line-height:1.5;position:relative;
white-space:pre;margin:10px 0;background:rgba(255,255,255,0.75)}
code{font-family:Consolas,"Courier New",monospace;font-size:11pt}
:not(pre)>code{background:#f5f5f5;padding:1px 4px;border-radius:3px}
.copy-btn{position:absolute;top:4px;right:4px;background:#EEEEEE;
border:1px solid #999;border-radius:3px;padding:2px 6px;
cursor:pointer;font-size:9pt;color:#000}
.copy-btn:hover{background:#E5E5E5}
/* ---- Syntax tokens (the highlighter's classes) ---- */
.kw{color:#000080}
.cm{color:#008000}
.st{color:#0000FF}
/* ---- Search ---- */
.search-box{width:100%;max-width:500px;padding:5px 10px;border:1px solid #BBBBBB;
border-radius:3px;font-size:11pt;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif}
.search-box:focus{outline:2px solid #250C58;border-color:transparent}
.search-results{margin-top:10px}
.search-result{padding:5px 0;border-bottom:1px solid #E5E5E5}
.search-result .kind-badge{display:inline-block;font-size:9pt;padding:1px 5px;
border-radius:3px;background:#E5E5E5;color:#250C58;
font-weight:bold;margin-right:5px;text-transform:uppercase}
/* ---- Contents tree ---- */
/* The expand/collapse row. Its size belongs here rather than on the element:
written into the markup as a `pt` value it would keep the website scale in
the CHM, which is the one place the two scales differ. */
.tree-controls{margin-bottom:10px;font-size:10pt}
/* The buttons keep the platform's own control font, as they always have —
only `cursor` was ever set on them. */
.tree-controls button{cursor:pointer}
.tree ul{list-style:none;padding-left:18px;margin:0}
.tree>ul{padding-left:0}.tree li{padding:2px 0}
.tree .toggle{cursor:pointer;user-select:none;font-weight:bold}
.tree .toggle::before{content:'\25B6';display:inline-block;width:14px;
font-size:10px;transition:transform .15s}
.tree .toggle.open::before{transform:rotate(90deg)}
.tree .children{display:none}.tree .children.open{display:block}
.tree .leaf{padding-left:14px}.tree .leaf a{color:#000;font-size:11pt}
.tree .leaf a:hover{color:#1364C4}
/* ---- Kind icons ---- */
.kind-icon{display:inline-block;width:18px;height:18px;line-height:18px;
text-align:center;border-radius:3px;font-size:10pt;font-weight:bold;
margin-right:4px;vertical-align:middle}
.kind-method{background:#dbeafe;color:#1d4ed8}
.kind-property{background:#fce7f3;color:#be185d}
.kind-field{background:#fef3c7;color:#b45309}
.kind-event{background:#d1fae5;color:#047857}
.kind-type{background:#e0e7ff;color:#4338ca}
.kind-topic{background:#e2e8f0;color:#334155}
.kind-unit{background:#ccfbf1;color:#0f766e}
/* ---- Top-level landing ---- */
.subsite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:10px;margin-top:10px}
.subsite-card{border:1px solid #BBBBBB;border-radius:5px;
padding:15px;transition:box-shadow .15s;display:block}
.subsite-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);text-decoration:none}
.subsite-card h3{margin:0 0 5px;color:#000}
.subsite-card .lang-label{font-size:10pt;text-transform:uppercase;
color:var(--muted);letter-spacing:.05em}
/* ---- Equation ---- */
.equation{margin:10px 0;padding:8px 10px;background:#f9f9f9;
border:1px solid #E5E5E5;border-radius:5px;overflow-x:auto;text-align:center}
/* ---- Footer (Element93) ----
On the website the footer closes the teal chrome; in the CHM there is no
chrome, so it is a plain rule off the bottom of the white page. */
.page-footer{margin:0 0 0 0;padding:10px 15px;
background:#005879;color:#fff;border-top:none}
.footer-copyright{font-size:10pt;margin:5px 0;color:#fff}
.footer-links{font-size:10pt;margin:5px 0;color:#fff}
.footer-links a{color:#fff}
/* ---- Stat cards (product landing) ---- */
.stat-cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.stat-card{flex:1;min-width:120px;text-align:center;border:1px solid #E5E5E5;
border-radius:5px;padding:10px}
.stat-card .num{font-size:20pt;font-weight:bold;color:#250C58}
.stat-card .label{color:var(--muted);font-size:10pt}
@media(max-width:768px){main{padding:5px 10px}table{font-size:10pt}th,td{padding:3px 5px}}