/* ===================================================================== Diako journal — design system (old-school Forex Factory / Myfxbook) Source: docs/research/SPEC-draft.md §10.3 tokens, §10.4 components, §6.3 calendar. Values were measured on the live sites. Themes: (default) | data-theme="mfb" Switches: data-fidelity="exact" (measured but WCAG-failing colours) data-density="comfortable" (24px rows/controls; default on touch) data-cb="1" (colour-blind: pos/neg -> blue/orange) Rules: 11-12px Verdana, 1px lines, square corners, semantic colour only. ===================================================================== */ /* ---------- 1. tokens ---------- */ :root { --font-ui: Verdana, Tahoma, "DejaVu Sans", Geneva, Arial, sans-serif; --font-ui-compact: Tahoma, Arial, "Liberation Sans", Helvetica, sans-serif; --font-mono: "Lucida Console", Menlo, Consolas, "DejaVu Sans Mono", monospace; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --lh: 1.4; --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 9px; --sp-5: 12px; --sp-6: 15px; --page-w: 1200px; --sidebar-w: 180px; --gutter: 15px; --nav-h: 26px; --subnav-h: 24px; --head-h: 24px; --th-h: 20px; --row-h: 20px; --control-h: 20px; --foot-h: 21px; --ticker-h: 20px; --bw: 1px; --radius: 0px; --radius-chip: 3px; --focus-w: 2px; } [data-density="comfortable"] { --row-h: 24px; --th-h: 24px; --control-h: 24px; --fs-base: 13px; --fs-sm: 12px; } @media (pointer: coarse) { :root { --row-h: 24px; --th-h: 24px; --control-h: 24px; } } /* Theme A: ff-blue (default) */ :root, [data-theme="ff"] { --c-page-bg: #ccd3d8; --c-site-bg: #e6e8ed; --c-surface: #f4f6f9; --c-zebra: #ffffff; --c-sunken: #e6e8ed; --c-border: #e6e8ed; --c-border-mid: #d5d9e2; --c-border-strong: #bfc8db; --c-text: #000000; --c-text-muted: #656565; --c-text-faint: #5f6b7a; --c-text-disabled: #afafaf; --c-link: #0e5094; --c-link-hover: #9a430f; --c-link-visited: #0e5094; --c-nav-bg: #37548a; --c-nav-bg2: #304978; --c-nav-border: #000000; --c-nav-text: #dde4ec; --c-nav-active-bg: #5170aa; --c-nav-active-text: #ffffff; --c-nav-user-bg: #314366; --c-nav-accent: #39ad39; --c-subnav-bg: #e6e8ed; --c-subnav-border: #bfc8db; --c-subnav-text: #0e5094; --c-subnav-active-bg: #f4f6f9; --c-subnav-active-text: #000000; --c-head-bg: #37548a; --c-head-bg2: #304978; --c-head-border: #384b6f; --c-head-text: #dde4ec; --c-head-tab-bg: #4766a0; --c-head-tab-hover: #4a79d0; --c-head-tab-active: #5170aa; --c-head-tab-text: #ffffff; --c-foot-bg: #e6e8ed; --c-foot-border: #dbdcdf; --c-th-bg: #5a6f97; --c-th-text: #ffffff; --c-th-border: #384b6f; --c-row-hover: #e3f1e5; --c-row-selected: #ffffc8; --c-row-selected-border: #d8d889; --c-pos: #008000; --c-neg: #cc0000; --c-neutral: #656565; --c-pos-bg: #e6f4ea; --c-neg-bg: #fbe9e9; --c-warn-bg: #ffffc8; --c-warn-border: #d8d889; --c-impact-high: #cc0000; --c-impact-med: #e8830a; --c-impact-low: #e6c000; --c-impact-none: #909090; --c-input-bg: #ffffff; --c-input-border: #bfc8db; --c-input-border-hover: #697c91; --c-input-focus: #4d95df; --c-btn-bg: #f4f6f9; --c-btn-bg2: #d5d9e2; --c-btn-border: #8397bf; --c-btn-text: #000000; --c-btn-primary-bg: #4766a0; --c-btn-primary-bg2: #37548a; --c-btn-primary-text: #ffffff; --c-focus: #0e5094; --c-chip-bg: transparent; --c-chip-border: #697c91; --c-chip-text: #5f6b7a; --c-tooltip-bg: #ffffc8; --c-tooltip-border: #d8d889; --c-tooltip-text: #000000; --c-backdrop: rgba(0,0,0,.35); --c-footer-bg: #4e5262; --c-footer-text: #d0d2d6; --c-footer-link: #ffffff; --c-ticker-bg: #e6e8ed; --c-ticker-text: #000000; --c-ticker-border: #bfc8db; --c-spark-line: #0e5094; --c-spark-fill: rgba(14,80,148,.10); --c-chart-bg: #ffffff; --c-chart-grid: #e6e8ed; --c-chart-axis: #5f6b7a; --c-chart-1: #0e5094; --c-chart-2: #9a430f; --c-chart-3: #008000; --c-chart-4: #cc0000; --c-chart-5: #758ab4; --c-chart-6: #d39b5e; --heat-p1: #e3f1e5; --heat-p2: #c6e8c9; --heat-p3: #87d687; --heat-p4: #39ad39; --heat-n1: #fbe3e3; --heat-n2: #f5bcbc; --heat-n3: #e88; --heat-n4: #d44; --c-cal-be: #dde4ec; --c-cal-wk: #e8ecf2; --shadow-panel: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); --shadow-pop: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); } /* Theme B: mfb-gray */ [data-theme="mfb"] { --c-page-bg: #eef1f5; --c-site-bg: #ffffff; --c-surface: #ffffff; --c-zebra: #fbfcfd; --c-sunken: #f7f7f7; --c-border: #e7ecf1; --c-border-mid: #e6e6e6; --c-border-strong: #c3c3c3; --c-text: #333333; --c-text-muted: #666666; --c-text-faint: #5f6b7a; --c-text-disabled: #b0b0b0; --c-link: #2a6496; --c-link-hover: #b34700; --c-link-visited: #494959; --c-nav-bg: #292932; --c-nav-bg2: #292932; --c-nav-border: #19191f; --c-nav-text: #ffffff; --c-nav-active-bg: #e87e04; --c-nav-active-text: #19191f; --c-nav-user-bg: #19191f; --c-nav-accent: #e87e04; --c-subnav-bg: #eeeeee; --c-subnav-border: #e6e6e6; --c-subnav-text: #494959; --c-subnav-active-bg: #ffffff; --c-subnav-active-text: #333333; --c-head-bg: #f7f7f7; --c-head-bg2: #f7f7f7; --c-head-border: #e6e6e6; --c-head-text: #434343; --c-head-tab-bg: #e2e2e2; --c-head-tab-hover: #ececec; --c-head-tab-active: #ffffff; --c-head-tab-text: #434343; --c-foot-bg: #f7f7f7; --c-foot-border: #e6e6e6; --c-th-bg: #ffffff; --c-th-text: #333333; --c-th-border: #e7ecf1; --c-row-hover: #e7ecf1; --c-row-selected: #dffedf; --c-row-selected-border: #90b73a; --c-pos: #00832b; --c-neg: #d0021b; --c-neutral: #777777; --c-pos-bg: #dffedf; --c-neg-bg: #fbe1e3; --c-warn-bg: #fff8e1; --c-warn-border: #f2b50c; --c-impact-high: #ff5843; --c-impact-med: #ef9d27; --c-impact-low: #90b73a; --c-impact-none: #909090; --c-input-bg: #ffffff; --c-input-border: #c3c3c3; --c-input-border-hover: #999999; --c-input-focus: #b34700; --c-btn-bg: #ffffff; --c-btn-bg2: #ffffff; --c-btn-border: #cccccc; --c-btn-text: #333333; --c-btn-primary-bg: #e87e04; --c-btn-primary-bg2: #e87e04; --c-btn-primary-text: #19191f; --c-focus: #b34700; --c-chip-bg: #909090; --c-chip-border: #909090; --c-chip-text: #ffffff; --c-tooltip-bg: #000000; --c-tooltip-border: #000000; --c-tooltip-text: #ffffff; --c-backdrop: rgba(51,51,51,.5); --c-footer-bg: #19191f; --c-footer-text: #eaeaea; --c-footer-link: #ffffff; --c-ticker-bg: #19191f; --c-ticker-text: #eaeaea; --c-ticker-border: #292932; --c-spark-line: #ffc209; --c-spark-fill: rgba(149,211,153,.7); --c-chart-bg: #ffffff; --c-chart-grid: #e6e6e6; --c-chart-axis: #666666; --c-chart-1: #ffc209; --c-chart-2: #ed423a; --c-chart-3: #00aa38; --c-chart-4: #494959; --c-chart-5: #e87e04; --c-chart-6: #95d399; --c-cal-be: #eeeeee; --c-cal-wk: #f7f7f7; --radius: 2px; --shadow-panel: none; --shadow-pop: 5px 5px 4px -3px rgba(82,63,105,.2); } [data-fidelity="exact"][data-theme="ff"] { --c-th-bg: #758ab4; --c-th-text: #dde4ec; --c-pos: #009900; --c-text-faint: #697c91; } [data-fidelity="exact"][data-theme="mfb"] { --c-pos: #00aa38; --c-neg: #ff3232; --c-nav-active-text: #ffffff; --c-link: #494959; --c-btn-primary-text: #ffffff; } [data-cb="1"] { --c-pos: #0072B2; --c-neg: #D55E00; --c-pos-bg: #dbeaf5; --c-neg-bg: #fde7d6; --heat-p1: #deebf7; --heat-p2: #9ecae1; --heat-p3: #4292c6; --heat-p4: #08519c; --heat-n1: #fee6ce; --heat-n2: #fdae6b; --heat-n3: #f16913; --heat-n4: #a63603; } /* ---------- 2. base / normalize ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--c-page-bg); } /* canvas colour lives on html so keeps its own */ body { margin: 0; background: var(--c-page-bg); color: var(--c-text); font: var(--fs-base)/var(--lh) var(--font-ui); font-variant-numeric: tabular-nums lining-nums; } a { color: var(--c-link); text-decoration: underline; } a:hover { color: var(--c-link-hover); } a:visited { color: var(--c-link-visited); } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); } h4 { font-size: var(--fs-base); } p, ul, ol { margin: 0 0 var(--sp-3); } small, .small { font-size: var(--fs-sm); } img, svg, canvas { max-width: 100%; } table { border-spacing: 0; } th { text-align: inherit; } button, input, select, textarea { font-family: inherit; font-size: inherit; margin: 0; color: inherit; } button { text-transform: none; } button, [type="button"], [type="submit"], [type="reset"] { -webkit-appearance: button; } fieldset { border: 1px solid var(--c-border-strong); margin: 0; padding: var(--sp-3) var(--sp-4); } legend { padding: 0 4px; font-weight: 700; } [hidden] { display: none !important; } hr { border: 0; border-top: var(--bw) solid var(--c-border-strong); margin: var(--sp-4) 0; } code, kbd, .mono { font-family: var(--font-mono); font-size: .95em; } :focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: 1px; } :focus:not(:focus-visible) { outline: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--c-warn-bg); padding: 4px 8px; z-index: 200; } .skip-link:focus { left: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- 3. page grid ---------- */ .site { width: var(--page-w); max-width: 100%; margin: 0 auto; background: var(--c-site-bg); min-height: 100vh; box-shadow: 0 0 20px rgba(0,0,0,.35); } .site--fluid { width: auto; margin: 0; box-shadow: none; } .site__body { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--gutter); padding: var(--gutter); } .site__body--nosidebar { grid-template-columns: minmax(0, 1fr); } .has-ticker { padding-bottom: var(--ticker-h); } /* room for .ticker--fixed */ .cols { display: grid; gap: var(--gutter); align-items: start; } .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .cols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .cols > .panel { margin-bottom: 0; } .cols { margin-bottom: var(--gutter); } @media (max-width: 900px) { .site__body, .cols--2, .cols--3, .cols--1-2, .cols--2-1 { grid-template-columns: minmax(0, 1fr); } } /* ---------- 4. top nav ---------- */ .topnav { display: flex; align-items: stretch; height: var(--nav-h); background: linear-gradient(var(--c-nav-bg), var(--c-nav-bg2)); border-bottom: 1px solid var(--c-nav-border); } .topnav__brand { display: flex; align-items: center; padding: 0 var(--sp-5); background: var(--c-nav-user-bg); color: #fff; font-weight: 700; font-size: var(--fs-md); text-decoration: none; border-right: 1px solid rgba(0,0,0,.3); } .topnav__brand:hover, .topnav__brand:visited { color: #fff; } .topnav__tabs { display: flex; margin: 0; padding: 0; list-style: none; } .topnav__tabs a { display: block; height: 100%; line-height: calc(var(--nav-h) - 1px); padding: 0 18px; color: var(--c-nav-text); font-weight: 700; text-decoration: none; } .topnav__tabs a:hover { color: #fff; background: rgba(255,255,255,.07); } .topnav__tabs .is-active a, .topnav__tabs a[aria-current="page"] { background: var(--c-nav-active-bg); color: var(--c-nav-active-text); box-shadow: inset 0 -2px 0 var(--c-nav-accent); } .topnav__right { margin-left: auto; display: flex; align-items: center; } .topnav__right a, .topnav__clock { padding: 0 var(--sp-5); line-height: var(--nav-h); color: var(--c-nav-text); text-decoration: none; white-space: nowrap; } .topnav__right a:hover { color: #fff; } .topnav__clock { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); } .topnav a:focus-visible { outline-color: #fff; outline-offset: -3px; } /* ---------- 5. sub nav ---------- */ .subnav { display: flex; align-items: flex-end; gap: 2px; height: var(--subnav-h); padding: 0 var(--sp-4); background: var(--c-subnav-bg); border-bottom: 1px solid var(--c-subnav-border); } .subnav a, .subnav button { display: block; font: inherit; font-size: var(--fs-sm); line-height: calc(var(--subnav-h) - 5px); padding: 0 var(--sp-4); border: 1px solid transparent; border-bottom: 0; background: none; color: var(--c-subnav-text); text-decoration: none; cursor: pointer; } .subnav a:hover { text-decoration: underline; } .subnav .is-active, .subnav [aria-current="page"] { background: var(--c-subnav-active-bg); color: var(--c-subnav-active-text); font-weight: 700; border-color: var(--c-subnav-border); margin-bottom: -1px; padding-bottom: 1px; } .subnav__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); color: var(--c-text-muted); line-height: var(--subnav-h); font-size: var(--fs-sm); } .subnav__right label { white-space: nowrap; } /* ---------- 6. panel ---------- */ .panel { background: var(--c-surface); border: var(--bw) solid var(--c-border-mid); border-radius: var(--radius); box-shadow: var(--shadow-panel); margin-bottom: var(--gutter); } .panel__head { display: flex; align-items: stretch; min-height: var(--head-h); background: linear-gradient(to top, var(--c-head-bg2), var(--c-head-bg)); border-bottom: 1px solid var(--c-head-border); color: var(--c-head-text); } .panel__title { margin: 0; padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: 700; color: inherit; line-height: calc(var(--head-h) - 1px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel__title .sep { margin: 0 4px; font-weight: 400; opacity: .7; } .panel__title a { color: inherit; text-decoration: none; } .panel__title a:hover { text-decoration: underline; } .panel__title .n { font-weight: 400; opacity: .8; margin-left: 4px; } .panel__actions { margin-left: auto; display: flex; } .panel__actions > a, .panel__actions > button, .panel__actions > label { display: block; margin: 0; padding: 0 var(--sp-4); line-height: calc(var(--head-h) - 1px); font: inherit; font-size: var(--fs-sm); color: var(--c-head-tab-text); background: var(--c-head-tab-bg); border: 0; border-left: 1px solid var(--c-head-bg); text-decoration: none; cursor: pointer; white-space: nowrap; } .panel__actions > :hover { background: var(--c-head-tab-hover); } .panel__actions > .is-active, .panel__actions > [aria-selected="true"], .panel__actions > [aria-pressed="true"] { background: var(--c-head-tab-active); font-weight: 700; } .panel__actions a:focus-visible, .panel__actions button:focus-visible { outline-color: #fff; outline-offset: -3px; } [data-theme="mfb"] .panel__actions a:focus-visible, [data-theme="mfb"] .panel__actions button:focus-visible { outline-color: var(--c-focus); } .panel__body { padding: var(--sp-4); } .panel__body--flush { padding: 0; } .panel__body > :last-child { margin-bottom: 0; } .panel__foot { min-height: var(--foot-h); line-height: calc(var(--foot-h) - 1px); padding: 0 var(--sp-4); text-align: right; font-size: var(--fs-sm); background: var(--c-foot-bg); border-top: 1px solid var(--c-foot-border); } .panel__foot--left { text-align: left; } .panel--sunken { background: var(--c-sunken); box-shadow: var(--shadow-panel); } .panel--sunken .panel__head { background: var(--c-sunken); border-bottom: 1px solid var(--c-border-strong); color: var(--c-text-muted); min-height: 20px; } .panel--sunken .panel__title { font-weight: 400; line-height: 19px; } .panel--sunken .panel__body { padding: var(--sp-3) var(--sp-4); } /* ---------- 7. data table ---------- */ .tbl-wrap { overflow-x: auto; } .tbl-wrap--scroll { overflow-y: auto; max-height: 400px; } .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--c-zebra); } .tbl caption { text-align: left; padding: var(--sp-2) var(--sp-4); color: var(--c-text-muted); caption-side: top; } .tbl thead th { height: var(--th-h); padding: 0 var(--sp-4); background: var(--c-th-bg); color: var(--c-th-text); border-bottom: 1px solid var(--c-th-border); font-weight: 400; text-align: left; white-space: nowrap; vertical-align: middle; } .tbl tbody td, .tbl tbody th { padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--c-border); vertical-align: middle; line-height: calc(var(--row-h) - 4px); } .tbl tbody th { font-weight: 400; text-align: left; } .tbl tbody tr:nth-child(even) { background: var(--c-surface); } .tbl tbody tr:hover { background: var(--c-row-hover); } .tbl tr.is-selected > td { background: var(--c-row-selected); box-shadow: inset 0 1px 0 var(--c-row-selected-border), inset 0 -1px 0 var(--c-row-selected-border); } .tbl tfoot td { padding: var(--sp-2) var(--sp-4); border-top: 2px solid var(--c-border-strong); background: var(--c-sunken); font-weight: 700; } .tbl .num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl .ctr { text-align: center; } .tbl .nowrap { white-space: nowrap; } .tbl .row-label { font-weight: 700; } .tbl--nozebra tbody tr:nth-child(even) { background: transparent; } .tbl--dense tbody td, .tbl--dense tbody th { padding: 1px var(--sp-3); line-height: 15px; } .tbl--dense thead th { height: 18px; padding: 0 var(--sp-3); font-size: var(--fs-xs); } .tbl--dense tfoot td { padding: 2px var(--sp-3); } .tbl--dense th.sortable > button { height: 18px; padding-left: var(--sp-3); font-size: var(--fs-xs); } .tbl--dashed tbody td { border-top-style: dashed; } .tbl--grid td, .tbl--grid th { border: 1px solid var(--c-border-mid); } .tbl--sticky thead th { position: sticky; top: 0; z-index: 1; } .tbl th.sortable { padding: 0; } .tbl th.sortable > button { display: block; width: 100%; height: var(--th-h); padding: 0 16px 0 var(--sp-4); font: inherit; color: inherit; background: none; border: 0; text-align: inherit; cursor: pointer; position: relative; white-space: nowrap; } .tbl th.sortable > button:hover { text-decoration: underline; } .tbl th.sortable > button::after { content: ""; position: absolute; right: 5px; top: 50%; margin-top: -2px; border: 4px solid transparent; border-top-color: currentColor; opacity: .45; } .tbl th[aria-sort="ascending"] > button::after { border-top-color: transparent; border-bottom-color: currentColor; margin-top: -6px; opacity: 1; } .tbl th[aria-sort="descending"] > button::after { opacity: 1; } .tbl th.num.sortable > button { text-align: right; } .tbl tr.band > td { background: var(--c-sunken); font-weight: 700; border-top: 1px solid var(--c-border-mid); padding: 2px var(--sp-4); } .tbl tr.low-n td { color: var(--c-text-faint); background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,.04) 4px 5px); } .tbl tr.low-n td .pos, .tbl tr.low-n td .neg, .tbl tr.low-n td.pos, .tbl tr.low-n td.neg { color: var(--c-text-faint); } .tbl td .spark { vertical-align: middle; } .meter { display: inline-block; width: 60px; height: 8px; background: var(--c-border-mid); vertical-align: middle; } .meter > i { display: block; height: 100%; background: var(--c-pos); } .meter > i.neg { background: var(--c-neg); } .meter > i.mid { background: var(--c-impact-med); } .bullet { position: relative; display: inline-block; width: 90px; height: 8px; background: var(--c-border-mid); vertical-align: middle; } .bullet > i { position: absolute; left: 0; top: 0; height: 100%; background: var(--c-link); } .bullet > b { position: absolute; top: -2px; width: 1px; height: 12px; background: var(--c-text); } /* ---------- 8. key : value stats table ---------- */ .kv { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .kv th { text-align: left; font-weight: 400; color: var(--c-text-muted); padding: 2px var(--sp-4); white-space: nowrap; width: 55%; } .kv td { text-align: right; padding: 2px var(--sp-4); font-variant-numeric: tabular-nums; white-space: nowrap; } .kv tr + tr > * { border-top: 1px dotted var(--c-border-mid); } .kv--striped tr:nth-child(odd) > * { background: var(--c-surface); } .kv abbr[title], .kv .def { text-decoration: underline dotted; cursor: help; } .kv__group > * { border-top: 2px solid var(--c-border-mid) !important; } .kv .n { color: var(--c-text-faint); font-size: var(--fs-xs); margin-left: 4px; } .kv--flush th { padding-left: 0; } .kv--flush td { padding-right: 0; } /* ---------- 9. forms ---------- */ .form { width: 100%; border-collapse: collapse; } .form th { width: 32%; text-align: right; font-weight: 400; color: var(--c-text-muted); padding: 3px var(--sp-4) 3px 0; vertical-align: top; line-height: var(--control-h); white-space: nowrap; } .form td { padding: 3px 0; vertical-align: top; line-height: var(--control-h); } .form tr.form__section > th, .form tr.form__section > td { padding-top: var(--sp-4); } .form__section th { text-align: left; font-weight: 700; color: var(--c-text); border-bottom: 1px solid var(--c-border-strong); white-space: normal; } .form__hint { display: block; color: var(--c-text-faint); font-size: var(--fs-sm); line-height: 1.3; margin-top: 1px; } .form__error { display: block; color: var(--c-neg); font-size: var(--fs-sm); line-height: 1.3; margin-top: 1px; } .form .req::after { content: " *"; color: var(--c-neg); } .form__actions td { padding-top: var(--sp-4); border-top: 1px solid var(--c-border); } .form--narrow th { width: 24%; } input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="search"], input[type="url"], input[type="email"], input[type="password"], select, textarea, .input { font: inherit; font-size: var(--fs-base); color: var(--c-text); background: var(--c-input-bg); border: 1px solid var(--c-input-border); border-radius: var(--radius); height: var(--control-h); padding: 0 4px; line-height: calc(var(--control-h) - 2px); vertical-align: middle; } select { padding-right: 2px; } textarea { height: auto; min-height: 56px; line-height: 1.4; padding: 3px 4px; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: var(--c-input-border-hover); } input:focus, select:focus, textarea:focus { border-color: var(--c-input-focus); outline: var(--focus-w) solid var(--c-focus); outline-offset: 0; } input[type="number"], .input--num { text-align: right; font-variant-numeric: tabular-nums; } input[type="checkbox"], input[type="radio"] { width: 13px; height: 13px; margin: 0 4px 0 0; vertical-align: -2px; accent-color: var(--c-link); } .check { display: inline-block; margin-right: var(--sp-4); line-height: var(--control-h); white-space: nowrap; } .check-list { columns: 3; column-gap: var(--sp-4); } .check-list .check { display: block; margin: 0; } .check-list--2 { columns: 2; } .check-list--4 { columns: 4; } input[disabled], select[disabled], textarea[disabled] { color: var(--c-text-disabled); background: var(--c-sunken); } ::placeholder { color: var(--c-text-disabled); } .w-xs { width: 56px; } .w-sm { width: 90px; } .w-md { width: 140px; } .w-lg { width: 240px; } .w-full { width: 100%; } .field-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .field-row .unit { color: var(--c-text-muted); } .seg { display: inline-flex; vertical-align: middle; } .seg .btn { border-radius: 0; } .seg .btn + .btn { margin-left: -1px; } .seg .btn.is-on, .seg .btn[aria-pressed="true"] { background: var(--c-row-selected); font-weight: 700; position: relative; z-index: 1; } /* button groups for 1–5 scales, grades, direction */ .seg .btn.is-on.pos { color: var(--c-pos); } .seg .btn.is-on.neg { color: var(--c-neg); } .btn { display: inline-block; height: var(--control-h); line-height: calc(var(--control-h) - 2px); padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-sm); color: var(--c-btn-text); background: linear-gradient(var(--c-btn-bg), var(--c-btn-bg2)); border: 1px solid var(--c-btn-border); border-radius: var(--radius); cursor: pointer; text-decoration: none; vertical-align: middle; white-space: nowrap; } .btn:hover { background: linear-gradient(var(--c-btn-bg2), var(--c-btn-bg)); color: var(--c-btn-text); } .btn:active { background: var(--c-btn-bg2); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } .btn--primary { color: var(--c-btn-primary-text); font-weight: 700; border-color: var(--c-btn-primary-bg2); background: linear-gradient(var(--c-btn-primary-bg), var(--c-btn-primary-bg2)); } .btn--primary:hover { background: linear-gradient(var(--c-btn-primary-bg2), var(--c-btn-primary-bg)); color: var(--c-btn-primary-text); } .btn--danger { color: #fff; background: var(--c-neg); border-color: var(--c-neg); } .btn--danger:hover { color: #fff; background: var(--c-neg); } .btn--link { background: none; border-color: transparent; color: var(--c-link); text-decoration: underline; } .btn--link:hover { background: none; color: var(--c-link-hover); } .btn--xs { height: 16px; line-height: 14px; font-size: var(--fs-xs); padding: 0 5px; } .btn[disabled], .btn.is-disabled { color: var(--c-text-disabled); background: var(--c-sunken); cursor: default; pointer-events: none; } .btn-group { display: inline-flex; } .btn-group .btn + .btn { margin-left: -1px; } /* ---------- 10. tabs ---------- */ .tabs { display: flex; margin: 0; padding: 0 var(--sp-2); list-style: none; background: var(--c-sunken); border-bottom: 1px solid var(--c-border-strong); } .tabs > li { margin-bottom: -1px; } .tabs a, .tabs button { display: block; font: inherit; font-size: var(--fs-sm); line-height: 20px; padding: 0 var(--sp-4); color: var(--c-link); background: none; border: 1px solid transparent; border-bottom: 0; text-decoration: none; cursor: pointer; } .tabs a:hover, .tabs button:hover { text-decoration: underline; } .tabs .is-active > *, .tabs [aria-selected="true"] { background: var(--c-surface); color: var(--c-text); font-weight: 700; border-color: var(--c-border-strong); text-decoration: none; } .tabs .count { color: var(--c-text-muted); font-weight: 400; } .tabpanel[hidden] { display: none; } /* ---------- 11. stat tiles ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px; background: var(--c-border-mid); border: 1px solid var(--c-border-mid); margin-bottom: var(--gutter); } .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .stat { background: var(--c-zebra); padding: var(--sp-2) var(--sp-4); min-height: 40px; } .stat__label { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat__value { display: block; font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .stat__sub { display: block; font-size: var(--fs-xs); color: var(--c-text-faint); } .stat--wide { grid-column: span 2; } .stat .spark { float: right; margin: 0 0 0 var(--sp-2); } /* put the .spark first in the tile so the sub line keeps full width */ .stat.low-n .stat__value { color: var(--c-text-faint); } .badge-n { font-size: var(--fs-xs); color: var(--c-text-faint); } .badge-n--warn { color: var(--c-neg); } .panel__body > .stats { margin-bottom: 0; } /* ---------- 12. signals ---------- */ .pos { color: var(--c-pos); } .neg { color: var(--c-neg); } .flat { color: var(--c-neutral); } .pos-bg { background: var(--c-pos-bg); } .neg-bg { background: var(--c-neg-bg); } .arrow.pos::before { content: "\25B2\00a0"; font-size: .8em; } .arrow.neg::before { content: "\25BC\00a0"; font-size: .8em; } .strong-neg { color: var(--c-neg); font-weight: 700; } td.pos, td.neg { font-variant-numeric: tabular-nums; } .ok::before { content: "\2714\00a0"; color: var(--c-pos); } .ko::before { content: "\2716\00a0"; color: var(--c-neg); } /* rule followed / broken */ /* ---------- 13. chips ---------- */ .chip { display: inline-block; font-size: var(--fs-xs); line-height: 12px; padding: 0 4px; vertical-align: middle; white-space: nowrap; color: var(--c-chip-text); background: var(--c-chip-bg); border: 1px solid var(--c-chip-border); border-radius: var(--radius-chip); text-transform: uppercase; letter-spacing: .02em; } .chip--pos { color: #fff; background: var(--c-pos); border-color: var(--c-pos); } .chip--neg { color: #fff; background: var(--c-neg); border-color: var(--c-neg); } .chip--warn { color: var(--c-text); background: var(--c-warn-bg); border-color: var(--c-warn-border); } .chip--model { color: var(--c-link); background: transparent; border-color: var(--c-link); } .chip--count { color: #fff; background: var(--c-neg); border-color: var(--c-neg); border-radius: 8px; padding: 0 5px; text-transform: none; } .chip--filter { text-transform: none; background: var(--c-warn-bg); border-color: var(--c-warn-border); color: var(--c-text); } .chip--filter a { color: var(--c-link); margin-left: 3px; text-decoration: none; } .chip + .chip { margin-left: 2px; } .impact { display: inline-block; width: 12px; height: 10px; border: 1px solid rgba(0,0,0,.25); vertical-align: middle; } .impact--high { background: var(--c-impact-high); } .impact--med { background: var(--c-impact-med); } .impact--low { background: var(--c-impact-low); } .impact--none { background: var(--c-impact-none); } .dir { font-weight: 700; } .dir--buy { color: var(--c-link); } .dir--sell { color: var(--c-link-hover); } .grade { display: inline-block; min-width: 14px; text-align: center; font-weight: 700; } .grade--a { color: var(--c-pos); } .grade--c, .grade--d { color: var(--c-neg); } /* ---------- 14. tooltips ---------- */ .info { display: inline-block; width: 11px; height: 11px; line-height: 10px; font-size: 9px; font-weight: 700; text-align: center; color: var(--c-text-faint); border: 1px solid var(--c-text-faint); border-radius: 50%; cursor: help; vertical-align: 1px; } .tbl thead .info, .panel__head .info { color: inherit; border-color: currentColor; opacity: .85; } /* stays visible on dark header bars */ .tip { position: relative; } .tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; top: 100%; margin-top: 3px; z-index: 50; max-width: 260px; width: max-content; background: var(--c-tooltip-bg); color: var(--c-tooltip-text); border: 1px solid var(--c-tooltip-border); padding: 4px 7px; font-size: var(--fs-sm); font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: var(--shadow-pop); text-transform: none; letter-spacing: 0; } .tip--right[data-tip]:hover::after, .tip--right[data-tip]:focus-visible::after { left: auto; right: 0; } .tooltip { position: absolute; z-index: 50; max-width: 280px; background: var(--c-tooltip-bg); color: var(--c-tooltip-text); border: 1px solid var(--c-tooltip-border); padding: 6px 8px; font-size: var(--fs-sm); box-shadow: var(--shadow-pop); } .tooltip table td { padding: 1px 6px 1px 0; } abbr[title] { text-decoration: underline dotted; cursor: help; } /* ---------- 15. modal ---------- */ dialog.modal { width: 520px; max-width: calc(100vw - 30px); padding: 0; margin: 60px auto auto; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-head-border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.4); font: var(--fs-base)/var(--lh) var(--font-ui); } dialog.modal::backdrop { background: var(--c-backdrop); } .modal__head { display: flex; align-items: stretch; min-height: var(--head-h); background: linear-gradient(to top, var(--c-head-bg2), var(--c-head-bg)); border-bottom: 1px solid var(--c-head-border); color: var(--c-head-text); } .modal__head h2 { margin: 0; padding: 0 var(--sp-4); font-size: var(--fs-sm); line-height: calc(var(--head-h) - 1px); color: inherit; } .modal__close { margin-left: auto; padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-md); line-height: calc(var(--head-h) - 1px); color: var(--c-head-tab-text); background: var(--c-head-tab-bg); border: 0; cursor: pointer; } .modal__close:hover { background: var(--c-head-tab-hover); } .modal__body { padding: var(--sp-5); max-height: 70vh; overflow: auto; } .modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-sunken); border-top: 1px solid var(--c-border-mid); } .modal--wide { width: 860px; } /* ---------- 16. sidebar ---------- */ .sidebar .panel { margin-bottom: var(--gutter); } .sidenav { list-style: none; margin: 0; padding: 0; } .sidenav a { display: block; padding: 2px var(--sp-4); line-height: 18px; text-decoration: none; border-left: 3px solid transparent; } .sidenav a:hover { background: var(--c-row-hover); text-decoration: underline; } .sidenav .is-active > a, .sidenav a[aria-current="page"] { background: var(--c-surface); color: var(--c-text); font-weight: 700; border-left-color: var(--c-nav-active-bg); } .sidenav__group { padding: var(--sp-3) var(--sp-4) 2px; font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; } .sidenav .count { float: right; color: var(--c-text-faint); font-variant-numeric: tabular-nums; } .sidebar .kv th { width: 60%; } .sidebar .panel--sunken .panel__body--flush { padding: 0; } /* ---------- 17. sparklines & chart frames ---------- */ .spark { display: inline-block; width: 76px; height: 20px; vertical-align: middle; } .spark svg { display: block; width: 100%; height: 100%; overflow: visible; } .spark .line { fill: none; stroke: var(--c-spark-line); stroke-width: 1; vector-effect: non-scaling-stroke; } .spark .area { fill: var(--c-spark-fill); stroke: none; } .spark .zero { stroke: var(--c-chart-grid); stroke-width: 1; shape-rendering: crispEdges; } .spark .dot { fill: var(--c-spark-line); } .spark.is-pos .line, .spark.is-pos .dot { stroke: var(--c-pos); fill: var(--c-pos); } .spark.is-neg .line, .spark.is-neg .dot { stroke: var(--c-neg); fill: var(--c-neg); } .spark.is-pos .line, .spark.is-neg .line { fill: none; } .spark--bars rect { fill: var(--c-pos); } .spark--bars rect.neg { fill: var(--c-neg); } .spark--bars .zero { stroke: var(--c-text-disabled); stroke-width: .5; } .spark--lg { width: 120px; height: 39px; } .spark--wide { width: 100%; height: 24px; } .chart { background: var(--c-chart-bg); border: 1px solid var(--c-border); padding: var(--sp-2); } .chart-box { position: relative; height: 220px; } .chart-box--sm { height: 160px; } .chart-box--lg { height: 300px; } .chart svg { display: block; width: 100%; height: auto; } .chart-box canvas { display: block; } .chart text { font: var(--fs-xs)/1 var(--font-ui); fill: var(--c-chart-axis); } .chart .grid line { stroke: var(--c-chart-grid); shape-rendering: crispEdges; } .chart .axis line, .chart .axis path { stroke: var(--c-chart-axis); shape-rendering: crispEdges; fill: none; } .chart .s1 { stroke: var(--c-chart-1); fill: none; stroke-width: 1.5; } .chart .s2 { stroke: var(--c-chart-2); fill: none; stroke-width: 1.5; } .chart .s3 { stroke: var(--c-chart-3); fill: none; } .chart .s4 { stroke: var(--c-chart-4); fill: none; } .chart .bar-pos { fill: var(--c-pos); } .chart .bar-neg { fill: var(--c-neg); } .chart__legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-muted); padding: var(--sp-2) 0 0; } .chart__legend i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 4px; background: currentColor; } .chart__legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px); } .chart__legend i.box { height: 8px; } .chart__legend .c1 { color: var(--c-chart-1); } .chart__legend .c2 { color: var(--c-chart-2); } .chart__legend .cpos { color: var(--c-pos); } .chart__legend .cneg { color: var(--c-neg); } .chart__legend .c1 span, .chart__legend .c2 span, .chart__legend .cpos span, .chart__legend .cneg span { color: var(--c-text-muted); } .heat td { text-align: center; font-size: var(--fs-xs); padding: 1px 2px; border: 1px solid var(--c-zebra); } .heat .h0 { background: var(--c-sunken); } .heat .hp1 { background: var(--heat-p1); } .heat .hp2 { background: var(--heat-p2); } .heat .hp3 { background: var(--heat-p3); } .heat .hp4 { background: var(--heat-p4); color: #fff; } .heat .hn1 { background: var(--heat-n1); } .heat .hn2 { background: var(--heat-n2); } .heat .hn3 { background: var(--heat-n3); } .heat .hn4 { background: var(--heat-n4); color: #fff; } .habit-grid { border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .habit-grid td, .habit-grid th { padding: 0 var(--sp-3); line-height: 16px; white-space: nowrap; text-align: left; font-weight: 400; } .habit-grid th.day { padding: 0; width: 14px; text-align: center; font-size: 9px; color: var(--c-text-faint); } .habit-grid td.c { width: 14px; height: 14px; padding: 0; border: 1px solid var(--c-zebra); background: var(--c-sunken); } .habit-grid .done { background: var(--heat-p3); } .habit-grid .partial { background: var(--heat-p1); } .habit-grid .skip { background: repeating-linear-gradient(45deg, var(--c-sunken) 0 2px, #fff 2px 4px); } .habit-grid .miss { background: var(--heat-n2); } .habit-grid .na { background: var(--c-sunken); } .habit-grid tbody tr:hover td { background-color: var(--c-row-hover); } .habit-grid tbody tr:hover td.c { background-color: inherit; } .habit-grid tfoot td { border-top: 1px solid var(--c-border-strong); color: var(--c-text-muted); } .tilt { display: inline-flex; gap: 1px; vertical-align: middle; } .tilt i { display: inline-block; width: 6px; height: 12px; background: var(--c-pos); } .tilt i.red { background: var(--c-neg); } .tilt i.amber { background: var(--c-impact-med); } /* ---------- 18. calendar heatmap (§6.3, tokenised) ---------- */ .cal-head { display: flex; gap: var(--sp-4); align-items: baseline; padding: 0 0 var(--sp-2); font-size: var(--fs-sm); } .cal-head b { font-size: var(--fs-base); } table.cal { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: var(--fs-xs); } table.cal th { font-size: 9px; font-weight: 400; color: var(--c-text-muted); background: var(--c-sunken); border: 1px solid var(--c-border-mid); padding: 2px; text-align: center; } table.cal td { height: 44px; vertical-align: top; border: 1px solid var(--c-border-mid); padding: 2px 3px; background: var(--c-surface); position: relative; } table.cal td .dn { position: absolute; top: 1px; left: 3px; font-size: 9px; color: #999; } table.cal td b { display: block; margin-top: 10px; text-align: right; font-size: var(--fs-sm); } table.cal td small { display: block; text-align: right; font-size: 9px; color: var(--c-text-muted); } table.cal td.empty { background: var(--c-sunken); } table.cal td.be { background: var(--c-cal-be); } table.cal td.win.l1 { background: var(--heat-p1); } table.cal td.win.l2 { background: var(--heat-p2); } table.cal td.win.l3 { background: var(--heat-p3); } table.cal td.win.l4 { background: var(--heat-p4); color: #fff; } table.cal td.loss.l1 { background: var(--heat-n1); } table.cal td.loss.l2 { background: var(--heat-n2); } table.cal td.loss.l3 { background: var(--heat-n3); } table.cal td.loss.l4 { background: var(--heat-n4); color: #fff; } table.cal td.l4 small, table.cal td.l4 .dn { color: rgba(255,255,255,.85); } table.cal td.wk { background: var(--c-cal-wk); width: 13%; border-left: 2px solid var(--c-border-strong); } table.cal td.wk.win b { color: var(--c-pos); } table.cal td.wk.loss b { color: var(--c-neg); } table.cal td.wk small:first-child { text-align: left; color: var(--c-text-faint); } table.cal td.today { outline: 1px solid var(--c-link); outline-offset: -1px; } table.cal td.today .dn { color: var(--c-link); font-weight: 700; } table.cal td[data-date]:hover, table.cal td[data-week]:hover { cursor: pointer; filter: brightness(.96); } table.cal--mini td { height: 14px; padding: 0; } table.cal--mini td b, table.cal--mini td small, table.cal--mini td .dn { display: none; } /* ---------- 19. ticker & footer ---------- */ .ticker { display: flex; overflow: hidden; height: var(--ticker-h); line-height: calc(var(--ticker-h) - 1px); font-size: var(--fs-sm); background: var(--c-ticker-bg); color: var(--c-ticker-text); border-top: 1px solid var(--c-ticker-border); } .ticker__item { padding: 0 var(--sp-4); border-right: 1px solid var(--c-ticker-border); white-space: nowrap; } .ticker__sym { font-weight: 700; margin-right: 4px; } .ticker__val { font-variant-numeric: tabular-nums; } .ticker__item .muted { opacity: .75; color: inherit; } .ticker--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; } [data-theme="mfb"] .ticker .pos { color: #95d399; } [data-theme="mfb"] .ticker .neg { color: #ff5843; } /* readable on the dark mfb ticker */ .footer { background: var(--c-footer-bg); color: var(--c-footer-text); font-size: var(--fs-sm); padding: var(--sp-4) var(--gutter); } .footer a { color: var(--c-footer-link); } .footer__topbar { background: var(--c-sunken); border-top: 1px solid var(--c-border-mid); border-bottom: 1px solid var(--c-border-mid); } .footer__topbar a { display: inline-block; padding: 0 14px; line-height: 20px; border-right: 1px solid var(--c-border-mid); text-decoration: none; } /* ---------- 20. print ---------- */ @media print { :root { --c-page-bg: #fff; --c-site-bg: #fff; } @page { margin: 12mm; } html, body { background: #fff; color: #000; font-size: 9pt; } .site { width: auto; box-shadow: none; min-height: 0; } .topnav, .subnav, .sidebar, .ticker, .footer, .panel__actions, .btn, .modal__close, .no-print { display: none !important; } .site__body, .has-ticker { display: block; padding: 0; } .panel { break-inside: avoid; box-shadow: none; border: 1px solid #999; margin-bottom: 8pt; } .panel__head { background: #ddd !important; color: #000 !important; border-bottom: 1px solid #999; } .tbl, .kv, .stats, .heat, table.cal, .habit-grid, .meter, .bullet, .tilt { print-color-adjust: exact; -webkit-print-color-adjust: exact; } .tbl thead th { background: #eee !important; color: #000 !important; border-bottom: 1px solid #000; } .tbl tbody tr:nth-child(even) { background: #f2f2f2 !important; } thead { display: table-header-group; } tr, .stat { break-inside: avoid; } .pos { color: #060 !important; } .neg { color: #900 !important; } .pos::after { content: " \25B2"; } .neg::after { content: " \25BC"; } a { color: #000; text-decoration: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7pt; color: #555; } .tbl-wrap { overflow: visible; } } /* ---------- 21. utilities ---------- */ .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .muted { color: var(--c-text-muted); } .faint { color: var(--c-text-faint); } .right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; } .mt-1 { margin-top: var(--sp-2); } .mt-2 { margin-top: var(--sp-4); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-2); } .mb-2 { margin-bottom: var(--sp-4); } .row { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; } .spacer { flex: 1; } .hl { background: var(--c-warn-bg); } .note { background: var(--c-warn-bg); border: 1px solid var(--c-warn-border); padding: var(--sp-3) var(--sp-4); } .insight { border-left: 3px solid var(--c-neg); padding: var(--sp-2) var(--sp-4); background: var(--c-zebra); } .insight--pos { border-left-color: var(--c-pos); } .insight--info { border-left-color: var(--c-link); } .insight--grey { border-left-color: var(--c-text-disabled); color: var(--c-text-faint); } .insight + .insight { margin-top: var(--sp-3); } .insight__head { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); align-items: baseline; margin-bottom: 1px; } .insight__head b { font-size: var(--fs-base); } .insight__meta { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-faint); white-space: nowrap; } .insight p { margin: 0 0 2px; } .insight__actions { font-size: var(--fs-sm); } .insight__actions a + a::before { content: "\00b7"; color: var(--c-text-disabled); margin: 0 5px; } .insight--grey .insight__head b { color: var(--c-text-faint); } .sep-v { color: var(--c-text-disabled); margin: 0 4px; }