/* Anchor Point — Mutual Fund Analyzer. Self-contained on purpose. SPEC defect #18: the legacy loaded Bootstrap, DataTables, Boxicons and Flatpickr from four public CDNs at runtime, so the application stopped working when a CDN did. Nothing here is fetched, there is no build step, and the type is the system stack — which is what most internal tools land on anyway once the novelty of a webfont wears off. An internal tool for about five people. Legible beats decorated. */ /* ---------------------------------------------------------------- tokens */ /* One definition per colour, both schemes inside it. `light-dark()` reads the element's `color-scheme`, so the toggle in the header only has to change that — no duplicated token block, and no class to keep in sync. */ :root { color-scheme: light dark; --bg: light-dark(#fbfbfc, #0e1013); --surface: light-dark(#ffffff, #16181d); --surface-2: light-dark(#f4f5f7, #1c1f25); --line: light-dark(#e4e6ea, #282c34); --line-soft: light-dark(#eef0f3, #21252b); --fg: light-dark(#16181d, #e7e9ec); --fg-muted: light-dark(#6b7280, #99a1ad); --fg-faint: light-dark(#9aa1ac, #6d7581); --accent: light-dark(#15803d, #4ade80); --accent-weak: light-dark(#dcfce7, #12291c); --accent-fg: light-dark(#ffffff, #08120c); --up: light-dark(#15803d, #4ade80); --down: light-dark(#b91c1c, #f87171); --warn: light-dark(#b45309, #fbbf24); --radius: 10px; --radius-sm: 7px; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); /* Built from two colours rather than wrapped in light-dark() directly: a multi-layer shadow contains commas, which are that function's argument separator. */ --shadow-near: light-dark(rgba(16, 18, 24, .05), rgba(0, 0, 0, .45)); --shadow-far: light-dark(rgba(16, 18, 24, .12), rgba(0, 0, 0, .60)); --shadow: 0 1px 2px var(--shadow-near), 0 6px 16px -8px var(--shadow-far); --shadow-pop: 0 4px 6px -2px var(--shadow-near), 0 12px 32px -8px var(--shadow-far); --chip: var(--surface-2); --row: var(--surface-2); } /* The toggle writes one of these onto ; absent means follow the system. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: 14.5px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); } /* ---------------------------------------------------------------- header */ header.top { position: sticky; top: 0; z-index: 50; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; padding: .6rem 1.4rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); } header.top .brand { font-weight: 640; letter-spacing: -.015em; font-size: .95rem; } header.top nav { display: flex; gap: .15rem; flex-wrap: wrap; } header.top nav a { text-decoration: none; color: var(--fg-muted); padding: .3rem .6rem; border-radius: var(--radius-sm); font-size: .875rem; transition: background .12s, color .12s; } header.top nav a:hover { color: var(--fg); background: var(--surface-2); } header.top nav a.on { color: var(--fg); background: var(--surface-2); font-weight: 550; } header.top .who { margin-left: auto; color: var(--fg-faint); font-size: .8rem; display: flex; align-items: center; gap: .6rem; } main { padding: 1.6rem 1.4rem 4rem; max-width: 1680px; overflow: visible; } /* ------------------------------------------------------------- typography */ h1 { font-size: 1.4rem; font-weight: 640; letter-spacing: -.02em; margin: 0 0 .3rem; } h2 { font-size: 1rem; font-weight: 620; letter-spacing: -.01em; margin: 2rem 0 .6rem; display: flex; align-items: center; gap: .5rem; } h3 { font-size: .9rem; font-weight: 600; margin: 0 0 .35rem; } p.lede { color: var(--fg-muted); margin: 0 0 1.3rem; max-width: 74ch; } small.hint, .hint { color: var(--fg-muted); font-size: .82rem; } /* ---------------------------------------------------------------- filters */ .filters { display: flex; gap: .55rem; flex-wrap: wrap; align-items: end; padding: .8rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.1rem; box-shadow: var(--shadow); } .filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; font-weight: 550; letter-spacing: .02em; color: var(--fg-muted); text-transform: uppercase; } select, input[type=text], input[type=search], input[type=password], input[type=number] { font: inherit; font-size: .875rem; padding: .38rem .55rem; min-width: 8.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); transition: border-color .12s, box-shadow .12s; } select:hover, input:hover { border-color: color-mix(in srgb, var(--fg-faint) 60%, var(--line)); } select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } button, .btn { font: inherit; font-size: .875rem; font-weight: 500; padding: .38rem .75rem; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; display: inline-block; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; } button:hover, .btn:hover { background: var(--surface-2); border-color: var(--fg-faint); } button.primary, .btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 550; } button.primary:hover, .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); border-color: transparent; } /* ----------------------------------------------------------------- tables */ /* No overflow here on purpose. A table wider than the window scrolls the page, not a box inside it — one scrollbar, where you expect it, instead of a nested one you have to find and that traps the wheel. */ .tablewrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } table { border-collapse: collapse; width: 100%; font-size: .855rem; } th, td { padding: .5rem .7rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-soft); } thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--fg-muted); font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; padding-top: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); } thead th a { text-decoration: none; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background .1s; } tbody tr:hover { background: var(--surface-2); } tfoot td, tfoot th { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--line); border-bottom: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.chg { font-variant-numeric: tabular-nums; text-align: right; } .up { color: var(--up); } .down { color: var(--down); } .new { color: var(--warn); font-weight: 600; } /* ------------------------------------------------------------------ bits */ .chip { display: inline-block; padding: .1rem .45rem; border-radius: 99px; background: var(--chip); font-size: .74rem; font-weight: 550; color: var(--fg-muted); border: 1px solid var(--line-soft); } .pager { display: flex; gap: .7rem; align-items: center; margin: .8rem 0; color: var(--fg-muted); font-size: .84rem; flex-wrap: wrap; } .msg { padding: .6rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); margin-bottom: 1rem; box-shadow: var(--shadow); } .msg.bad { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); background: color-mix(in srgb, var(--down) 7%, var(--surface)); color: var(--down); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem; background: var(--surface); box-shadow: var(--shadow); } .card .meta { color: var(--fg-muted); font-size: .82rem; } form.inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .stack { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; } .stack .card { flex: 1 1 17rem; } .cover td { text-align: center; padding: .3rem; } .cover .y { color: var(--up); } .cover .n { color: var(--fg-faint); opacity: .5; } .login { max-width: 21rem; margin: 14vh auto; padding: 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .login label { display: block; margin-bottom: .85rem; font-size: .82rem; color: var(--fg-muted); } .login input { width: 100%; margin-top: .25rem; } .login button { width: 100%; margin-top: .4rem; padding: .5rem; } /* ------------------------------------------------- multi-select filters */ /*
gives the open/close and the keyboard behaviour for free; the checkboxes inside submit as repeated query keys. */ details.picker { position: relative; } details.picker > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; font-weight: 550; letter-spacing: .02em; text-transform: uppercase; color: var(--fg-muted); user-select: none; } details.picker > summary::-webkit-details-marker { display: none; } details.picker > summary:focus-visible .picker-value { box-shadow: var(--ring); } details.picker .picker-value { font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg); padding: .38rem 1.7rem .38rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-width: 9.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: linear-gradient(45deg, transparent 50%, var(--fg-faint) 50%), linear-gradient(135deg, var(--fg-faint) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .12s; } details.picker:hover .picker-value { border-color: var(--fg-faint); } details.picker[open] .picker-value { border-color: var(--accent); } details.picker .menu { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: .3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem; min-width: 13rem; max-height: 17rem; overflow-y: auto; box-shadow: var(--shadow-pop); } details.picker .opt { display: flex; align-items: center; gap: .55rem; padding: .3rem .4rem; border-radius: var(--radius-sm); font-size: .86rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg); cursor: pointer; flex-direction: row; white-space: nowrap; } details.picker .opt:hover { background: var(--surface-2); } details.picker .group { margin: .55rem .4rem .2rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; } details.picker .group:first-child { margin-top: .15rem; } details.picker .clear { width: 100%; margin-top: .4rem; font-size: .8rem; padding: .28rem; } /* --------------------------------------------------- analyzed-fund context */ /* A card per fund reads well for three and badly for thirty, so one row each. */ table.context td, table.context th { white-space: nowrap; } table.context td.series { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; } table.context td.filings, table.context th.filings { white-space: normal; min-width: 30rem; } table.context .filing { display: inline-flex; gap: .35rem; align-items: baseline; margin: 0 .7rem .1rem 0; } table.context .filing .hint { color: var(--fg-faint); font-size: .78rem; } table.context .filing a { font-size: .8rem; } /* ------------------------------------------------------- holdings table */ .toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 .7rem; } .toolbar .hint { flex: 1 1 24rem; } .toolbar .metrics { display: flex; gap: .25rem; align-items: center; font-size: .74rem; font-weight: 550; letter-spacing: .02em; text-transform: uppercase; color: var(--fg-muted); } .toolbar .metrics .btn { padding: .22rem .6rem; font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 500; } table.analyzer { width: max-content; min-width: 100%; /* Collapsed borders are shared between cells, so a sticky column's width can land on a fractional pixel and let a sliver of the scrolling content show through at its edge. Separate borders give each cell an exact box. */ border-collapse: separate; border-spacing: 0; } table.analyzer th, table.analyzer td { border-bottom: 1px solid var(--line-soft); } table.analyzer th, table.analyzer td { background: var(--surface); } table.analyzer thead th { background: var(--surface-2); z-index: 3; } table.analyzer tbody tr:hover td { background: var(--surface-2); } table.analyzer tfoot th { background: var(--surface-2); border-top: 1px solid var(--line); } /* The identity columns stay put while the quarters scroll past, and the header stays put while the rows do — DataTables' FixedColumns and FixedHeader (SPEC §2) without DataTables. The `left` offsets below are only correct if these columns really are these widths, so all three dimensions are pinned. */ table.analyzer .pin { position: sticky; z-index: 2; } table.analyzer thead .pin, table.analyzer tfoot .pin { z-index: 4; } table.analyzer .pin1 { left: 0; width: 20rem; min-width: 20rem; max-width: 20rem; white-space: normal; overflow-wrap: anywhere; } /* The ticker column is a fixed width because it is sticky, so anything longer than a symbol used to be painted straight over the column beside it — an unresolved position carries its whole name here, and now so does the cash row. Clipped with the full value on hover instead. */ table.analyzer .pin2 { left: 20rem; width: 7rem; min-width: 7rem; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.analyzer.per-fund .pin3 { left: 27rem; width: 9rem; min-width: 9rem; max-width: 9rem; } table.analyzer .pin2 { box-shadow: inset -1px 0 0 var(--line); } table.analyzer.per-fund .pin2 { box-shadow: none; } table.analyzer.per-fund .pin3 { box-shadow: inset -1px 0 0 var(--line); } table.analyzer thead tr.groups th.group { text-align: center; font-weight: 620; color: var(--fg); letter-spacing: .01em; text-transform: none; font-size: .8rem; border-bottom: 1px solid var(--line); } table.analyzer thead tr.groups th.group.changed { background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); } table.analyzer a.sort { text-decoration: none; color: inherit; white-space: nowrap; } table.analyzer a.sort:hover { color: var(--fg); text-decoration: underline; } table.analyzer a.sort.on { color: var(--accent); } table.analyzer .arrow { margin-left: .15rem; font-size: .7rem; } table.analyzer td.pos, table.analyzer th.pos, table.analyzer td.chg { line-height: 1.3; } table.analyzer .v { display: block; } table.analyzer .s { display: block; font-size: .76rem; color: var(--fg-faint); } table.analyzer td.chg .v { font-variant-numeric: tabular-nums; } table.analyzer td.wt { color: var(--fg-muted); font-size: .8rem; } table.analyzer td.spark { padding: .2rem .5rem; } table.analyzer td.spark svg polyline { fill: none; stroke: var(--fg-faint); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; } .tag { display: inline-block; padding: .1rem .45rem; border-radius: 99px; font-size: .68rem; font-weight: 600; letter-spacing: .04em; background: var(--chip); color: var(--fg-faint); border: 1px solid var(--line-soft); } .tag.new { background: var(--accent-weak); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .tag.exited { background: color-mix(in srgb, var(--down) 10%, transparent); color: var(--down); border-color: color-mix(in srgb, var(--down) 28%, transparent); } .tag.added { color: var(--up); border-color: color-mix(in srgb, var(--up) 25%, transparent); } .tag.trimmed { color: var(--down); border-color: color-mix(in srgb, var(--down) 25%, transparent); } p.scrollnote { color: var(--fg-muted); font-size: .82rem; margin: .5rem 0 .4rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Theme toggle: System -> Light -> Dark. Three states, so "follow the OS" stays reachable once someone has chosen. */ .themetoggle { padding: .2rem .55rem; font-size: .78rem; font-weight: 550; color: var(--fg-muted); border-radius: 99px; } .themetoggle:hover { color: var(--fg); } /* The positions drill-down: what an analyzer row was totalled from. */ td.asfiled .v { display: block; } td.asfiled .s, td.what .hint { display: block; font-size: .78rem; color: var(--fg-faint); } td.what { white-space: normal; max-width: 26rem; } td.ids { white-space: normal; max-width: 22rem; } td.ids .chip { margin: 0 .2rem .15rem 0; font-size: .7rem; } tr.detail td { background: var(--surface-2); padding-top: .3rem; padding-bottom: .45rem; white-space: normal; } tr.detail .kv { display: inline-block; margin: 0 .9rem .1rem 0; font-size: .78rem; color: var(--fg-muted); } tr.detail .kv b { font-weight: 600; color: var(--fg-faint); font-size: .72rem; } table.analyzer td.pin1 a { text-decoration: none; } table.analyzer td.pin1 a:hover { text-decoration: underline; } /* Clean queue: a suggestion carries its score so nobody mistakes a similarity for a fact, and clicking one only fills the decision box — Accept is a separate, deliberate click. */ td.hints { white-space: normal; max-width: 20rem; } button.hintbtn { display: block; width: 100%; margin: 0 0 .25rem 0; text-align: left; padding: .2rem .5rem; font-size: .78rem; border-radius: .4rem; border-color: var(--line-soft); background: var(--chip); color: var(--fg); } /* The company name is what the operator actually judges — "Element Biosciences" against "Element Solutions" is a decision a ticker alone cannot present. */ button.hintbtn .why { color: var(--fg-faint); margin-left: .35rem; } button.hintbtn:hover { border-color: var(--accent); color: var(--accent); } button.hintbtn .score { color: var(--fg-faint); font-size: .68rem; } button.hintbtn.chosen { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); } button.hintbtn.chosen .score { color: inherit; } /* Merge rules: each row edits in place, so its controls sit together. */ td.ruleactions { white-space: nowrap; } td.ruleactions form.inline { display: inline; } td.ruleactions button { margin-left: .25rem; } /* Clean section: four pages, one workflow. */ nav.subnav { display: flex; flex-wrap: wrap; gap: .25rem; margin: -.35rem 0 1.1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line-soft); } nav.subnav a { padding: .3rem .7rem; border-radius: .4rem; font-size: .85rem; color: var(--fg-faint); text-decoration: none; } nav.subnav a:hover { background: var(--chip); color: var(--fg); } nav.subnav a.on { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; } /* A control that cannot act says so, rather than failing when pressed. */ button[disabled], button[disabled]:hover { opacity: .45; cursor: not-allowed; border-color: var(--line-soft); filter: saturate(.4); } /* Ingest dashboard: the home page, so the answers come before the evidence. */ .statline { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; margin: 1.25rem 0 2rem; } .statline .stat { background: var(--card); padding: .8rem .95rem .9rem; display: flex; flex-direction: column; gap: .15rem; } .statline .k { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); } .statline .v { font-size: 1.55rem; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; } .statline .v a { color: var(--accent); text-decoration: none; } .statline .v a:hover { text-decoration: underline; } .statline .v.muted { color: var(--fg-faint); font-weight: 500; } .statline .s { font-size: .78rem; color: var(--fg-faint); line-height: 1.45; } p.sub { margin: -.4rem 0 .9rem; font-size: .85rem; color: var(--fg-faint); max-width: 46rem; } /* The fund column stays put while the quarters scroll under it. */ table.cover th.fundcol, table.cover td.fundcol { position: sticky; left: 0; background: var(--card); text-align: left; z-index: 1; } table.cover thead th.fundcol { z-index: 2; } table.cover tfoot td { border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--fg-faint); font-size: .8rem; } table.cover tfoot td.total { text-align: center; } table.cover tfoot td.fundcol { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; } /* Fund page: what went in and what came out, side by side. */ .movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; margin-bottom: 1.75rem; } .movers h3 { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .5rem; font-weight: 600; } table.mover { width: 100%; border-collapse: collapse; } table.mover td { padding: .4rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; } table.mover tr:last-child td { border-bottom: none; } table.mover td.tk { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; white-space: nowrap; } table.mover td.tk small { display: block; font-family: inherit; font-weight: 400; white-space: normal; } table.mover td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Fund page: the read on the quarter, above the movers tables. */ .readout { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card); padding: 1rem 1.15rem 1.1rem; margin: 0 0 1.4rem; } .readout .verdict { margin: 0 0 .95rem; font-size: 1.02rem; line-height: 1.5; max-width: 54rem; } .readout .verdict strong { font-weight: 650; } .flowbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: calc(var(--radius) - 2px); overflow: hidden; } .flowbar .leg { background: var(--bg); padding: .55rem .7rem .6rem; display: flex; flex-direction: column; gap: .1rem; } .flowbar .k { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint); } .flowbar .v { font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; } .flowbar .s { font-size: .7rem; color: var(--fg-faint); font-weight: 400; } .flowbar .v .s { font-size: .8rem; } .readout .byline { margin: .9rem 0 0; font-size: .84rem; color: var(--fg-faint); } .kindchip { display: inline-block; background: var(--chip); border-radius: 99px; padding: .1rem .5rem; margin-right: .3rem; font-size: .76rem; color: var(--fg); } .readout .caveat { margin: .9rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--fg-faint); max-width: 54rem; } /* Ingest: the verdict, then the exceptions, then everything else folded away. */ .verdict-bar { border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: var(--radius); padding: .7rem .95rem; margin: 1.1rem 0 1.2rem; background: var(--card); } .verdict-bar p { margin: 0; font-size: 1rem; line-height: 1.5; } .verdict-bar.ok { border-left-color: var(--up); } .verdict-bar.warn { border-left-color: var(--down); } .verdict-bar.cold { border-left-color: var(--fg-faint); } .statline .v.small { font-size: 1rem; line-height: 1.3; } details.coverage > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .5rem; } details.coverage > summary::-webkit-details-marker { display: none; } details.coverage > summary h2 { display: inline; } details.coverage > summary::before { content: "▸"; color: var(--fg-faint); font-size: .8rem; } details.coverage[open] > summary::before { content: "▾"; } /* The dots, the column labels and the totals share one fixed grid, so a label sits over the column it names. Without it they were pinned to the edges of a cell the dots do not fill, and lined up with nothing. */ table.sparkcover td.spark, table.sparkcover th.sparkhead { white-space: nowrap; width: 1%; /* shrink to the dots rather than stretch */ } table.sparkcover td.spark > span, table.sparkcover th.sparkhead > span, table.sparkcover td.spark.totals > span { display: inline-block; width: 1.9rem; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } table.sparkcover td.spark > span { font-size: 1rem; } table.sparkcover td.spark.totals > span { font-size: .74rem; color: var(--fg-faint); font-variant-numeric: tabular-nums; } table.sparkcover th.sparkhead > span { font-size: .6rem; line-height: 1.25; color: var(--fg-faint); letter-spacing: .02em; } table.sparkcover th.sparkhead b { display: block; font-weight: 600; color: var(--fg); } table.sparkcover td.seriescol { max-width: 16rem; } table.sparkcover .hint { font-size: .7rem; } /* Coverage: a gap and a quarter nobody was watching must not read alike, so they are coloured per cell rather than per row. */ table.sparkcover td.spark span.on { color: var(--up); } table.sparkcover td.spark span.gap { color: var(--down); font-weight: 700; } table.sparkcover td.spark span.off { color: var(--line); } p.sub .key { display: block; font-family: ui-monospace, Menlo, monospace; margin-bottom: .2rem; } p.sub .key b { color: var(--fg); } /* A fund pointed at the wrong registrant collects nothing, silently. */ .registrant { border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: var(--radius); background: var(--card); padding: .85rem 1rem; margin: 0 0 1.3rem; } .registrant.warn { border-left-color: var(--down); } .registrant.noted { border-left-color: var(--fg-faint); } .registrant h3 { margin: 0 0 .4rem; font-size: 1rem; } .registrant .why { margin: 0 0 .7rem; font-size: .9rem; color: var(--fg-faint); max-width: 54rem; } table.idcompare { border-collapse: collapse; font-size: .85rem; margin-bottom: .8rem; } table.idcompare th, table.idcompare td { padding: .18rem .9rem .18rem 0; text-align: left; } table.idcompare th { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); } table.idcompare td:nth-child(2) { color: var(--fg-faint); font-family: ui-monospace, Menlo, monospace; } table.idcompare td:nth-child(3) { color: var(--fg); font-family: ui-monospace, Menlo, monospace; font-weight: 600; } .registrant .actions { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; } p.movetrail { font-size: .82rem; color: var(--fg-faint); margin: -.6rem 0 1.2rem; } p.movetrail form.inline { display: inline; margin-left: .4rem; } .verdict-bar p.drifted { margin: .5rem 0 0; font-size: .85rem; } .verdict-bar p.drifted .s { color: var(--fg-faint); font-size: .78rem; } /* Needs looking at: one table, cause before symptom. */ td.fixcol { white-space: nowrap; } td.fixcol .btn { font-size: .78rem; padding: .2rem .55rem; } .tag.drifted, .tag.feeder { background: var(--down-soft, var(--chip)); color: var(--down); } .tag.dormant, .tag.late { background: var(--chip); color: var(--fg-faint); } /* The legacy "Add Mutual Fund Data" step, on the fund it belongs to. */ .collectnow { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: 0 0 1.3rem; } .collectnow .hint { flex: 1 1 22rem; max-width: 40rem; } /* Wizard: what the legacy told you to copy off SEC by hand. */ .lookup { border: 1px solid var(--line-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--card); padding: .8rem 1rem; margin: 0 0 1.2rem; } .lookup h3 { margin: 0 0 .5rem; font-size: 1rem; } .lookup .why { margin: .6rem 0 0; font-size: .9rem; color: var(--fg-faint); } p.seclinks { font-size: .85rem; color: var(--fg-faint); margin: -.4rem 0 1.6rem; } /* ------------------------------------------------------- paged holdings */ /* The holdings table is paged on the server: a full selection is 22,000 rows, and rendering all of them was tens of megabytes. Nothing is hidden by it, so the note says where the rest is rather than apologising. */ .paged-note { margin: 0 0 .7rem; padding: .55rem .8rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--card); font-size: .875rem; line-height: 1.5; color: var(--fg-muted); } .paged-note b { color: var(--fg); font-weight: 600; } /* `.pager` is the shared row-of-controls used on six other pages, so this adds to it rather than redefining it. */ .rowpager { gap: .35rem; margin: .9rem 0 0; } .rowpager .btn { font-size: .82rem; padding: .3rem .6rem; } .rowpager .btn.disabled { color: var(--fg-faint); background: var(--surface); border-color: var(--line); cursor: default; pointer-events: none; } .rowpager .gap { color: var(--fg-faint); padding: 0 .15rem; } .rowpager .hint { margin-left: .4rem; } /* ------------------------------------------------- the queue's cutoff line */ /* Folded away by default. The line is set once and then left alone, so the control should not sit above the work competing with it — but the banner that says a line is in force always shows, because a hidden filter that silently shortens a worklist is how an analyst loses a name. */ .cutoffbox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; } .cutoffbox > summary { padding: .55rem .8rem; cursor: pointer; font-size: .86rem; color: var(--fg-muted); } .cutoffbox[open] > summary { border-bottom: 1px solid var(--line-soft); } .cutoffbox > :not(summary) { padding-inline: .8rem; } .cutoffbox > p.s { margin: .7rem 0; max-width: 62ch; } .cutoffbox > form { padding-bottom: .8rem; } /* The filter bar is a card in its own right; nested inside the panel it would be a box in a box. Keep its layout, drop its chrome. */ .cutoffbox .filters { border: 0; box-shadow: none; background: none; padding: 0 0 .8rem; margin: 0; } .cutoffbox input[type="number"], .cutoffbox input[type="text"] { min-width: 9rem; } table.guide { width: auto; margin: 0 0 .8rem; font-size: .84rem; } table.guide caption { text-align: left; padding: 0 0 .35rem; color: var(--fg-faint); font-size: .8rem; } table.guide td, table.guide th { padding: .22rem .8rem .22rem 0; } /* A warning that has to be acted on carries its actions, not just its text. */ .msg .choices { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .55rem 0 .35rem; font-size: .84rem; } .msg .choices .btn { font-size: .82rem; } .msg > .s { display: block; color: var(--fg-muted); } /* A cell whose value includes derivatives its share count cannot. */ .deriv { display: block; font-size: .7rem; color: var(--fg-faint); white-space: nowrap; cursor: help; } /* The promotion panel: a warning that carries a table of evidence. */ .msg.promo { border-color: var(--fg-faint); } .msg.promo table.guide { width: 100%; margin-top: .6rem; } .msg.promo table.guide th { color: var(--fg-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; text-align: left; } /* Global `td` is nowrap, which pushed the evidence — and the button after it — off the right edge of the panel. The sentence is the point of the row, so it wraps and the action stays reachable without scrolling. */ .msg.promo table.guide td { vertical-align: top; padding-block: .45rem; } .msg.promo table.guide td.why { white-space: normal; max-width: 26rem; } .msg.promo table.guide td.act { white-space: nowrap; text-align: right; } .msg.promo table.guide td .s { display: block; color: var(--fg-muted); } .msg.promo form { margin: 0; }