/* Portfolio Manager - dense terminal styling, themed by CSS custom properties. Dark is the default; light and custom are applied via [data-theme] on . Custom theme values are injected as inline variables from Data & Settings. */ :root { /* Dark is what this palette IS, and the browser has to be told so or every surface it paints for itself stays light: the scrollbars on `main`, on `.grid-wrap` - a forty-column table always has a horizontal one - on `.modal-body`, `.dropdown-panel`, `.job-log` and `.price-rows`, plus the `` renders option *text* and nothing else, so a menu of fifty marks was fifty names to guess at. This is the same control with the drawings in it: a face that shows what is chosen, and one popup - see `bindIconPickers` - parked on `` and moved to whichever face was pressed. The face keeps its 16px mark slot whether or not it holds anything, so picking None does not shuffle every picker in the column sideways. It stays `inline-flex` inside a cell that stays a table cell, because a `display: flex` td drops out of the table's column sizing and takes the alignment of the whole editor with it. */ .icon-pick { display: inline-block; vertical-align: middle; } .icon-pick-face { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-width: 116px; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-sm); line-height: 18px; text-align: left; cursor: pointer; } .icon-pick-face:hover { border-color: var(--accent); } .icon-pick-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* The caret, drawn rather than typed: a `▾` in the markup would be read out by a screen reader as content of the button. */ .icon-pick-face::after { content: ""; margin-left: auto; border: 3.5px solid transparent; border-top-color: var(--muted); transform: translateY(2px); } .icon-pick-mark { display: inline-flex; justify-content: center; flex: none; width: 16px; color: var(--muted); } .icon-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-table td.col-icon .icon-pick { min-width: 130px; } /* The popup. `fixed` because it has to escape `.table-scroll`, which clips, and placed from the pressed face's own rectangle by `bindIconPickers` - which is why it sits on `` rather than inside the row it belongs to. */ .icon-pick-menu { position: fixed; z-index: 250; display: flex; flex-direction: column; width: 240px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-lg); overflow: hidden; } .icon-pick-menu[hidden] { display: none; } .icon-pick-find { flex: none; width: 100%; margin-bottom: 6px; padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-sm); } .icon-pick-grid { overflow-y: auto; min-height: 0; } .icon-pick-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 7px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer; } .icon-pick-opt[hidden] { display: none; } .icon-pick-opt:hover, .icon-pick-opt:focus-visible { background: var(--row-hover); outline: none; } .icon-pick-opt .icon-pick-mark { width: 18px; color: var(--text); } /* What is chosen now, so opening the menu answers "which one is this" without the reader having to match the face against fifty drawings. */ .icon-pick-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; } .icon-pick-opt[aria-selected="true"] .icon-pick-mark { color: var(--accent); } /* A group heading inside the table rather than above it: the groups are the picker's own groups, and pulling them out into separate tables would lose the column alignment that makes the whole thing scannable. The whole row folds its group away, so it is a control and says so - the pointer and the hover lift are the only thing distinguishing it from the caption it used to be. `user-select` off because a fold is a click and a click that selects the heading text reads as a misfire. */ .col-table tr.col-group th { padding-top: 10px; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; border-bottom-color: var(--line); cursor: pointer; user-select: none; } .col-table tr.col-group th .section-toggle { margin-right: 6px; vertical-align: middle; text-transform: none; letter-spacing: 0; } .col-table tr.col-group th .count { margin-left: 6px; } .col-table tr.col-group:hover th { color: var(--text); } .col-table tr.col-group:hover .section-toggle { color: var(--text); border-color: var(--accent); } /* A column the user has changed. The accent edge is the only thing on the page that says which of a hundred rows are no longer the defaults, so it has to survive a filtered list scrolled to the middle. */ .col-table tr.changed > th:first-child { box-shadow: inset 3px 0 0 var(--accent); } .col-table tr.changed [data-col-changed] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .col-table tr[hidden], .col-table tbody[hidden] { display: none; } /* --- the rules sub-editor -------------------------------------------- */ /* One column's conditional formatting, in a row that opens under the column it belongs to. A second `` rather than a modal because the ladder is edited against the row that owns it - the format above decides whether a rule matches a value or a range, and the two have to be readable together. Inset and tinted so a panel sitting between two column rows reads as belonging to the one above it rather than as a row of its own. */ .col-table tr.rule-panel > td { padding: 10px 14px 12px 24px; white-space: normal; background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); } .col-table tr.rule-panel .hint { margin: 0 0 8px; max-width: 90ch; } /* The columns of the ladder. A grid rather than a nested table so the heading strip and every rule line stay locked to the same tracks - the swatch has to sit under the word Preview whatever is typed into the boxes on its left. */ .rule-head, .rule-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(110px, .9fr) minmax(90px, .8fr) auto; gap: 6px; align-items: center; } .rule-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-bottom: 3px; } .rule-row { padding: 3px 0; } .rule-row + .rule-row { border-top: 1px solid var(--line-soft); } .rule-when { display: flex; align-items: center; gap: 5px; } .rule-to { color: var(--muted); font-size: var(--fs-sm); } .col-table .rule-row .rule-num { width: 74px; } .col-table .rule-row .rule-val { width: 100%; min-width: 0; } .col-table .rule-row select { max-width: none; width: 100%; } .col-table .rule-row input[type="color"] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: none; cursor: pointer; } .col-table .rule-row input[type="color"][hidden] { display: none; } /* The swatch is the grid's own cell, at the grid's own size - see `paintRules`. Padded and cornered here because a `td` gets both from the table and this one is a `span` floating in a form. */ .rule-preview > span { display: inline-flex; align-items: center; min-width: 44px; padding: 1px 7px; border-radius: var(--radius); font-size: var(--fs-sm); } .rule-move { display: flex; gap: 3px; justify-content: flex-end; } .rule-move .btn { padding: 1px 6px; line-height: 16px; } /* --- upload ---------------------------------------------------------- */ /* The one control on this page that writes into a profile folder, and on a fresh install the only one that does anything at all - every table below it says "nothing here yet" until it has been used. Boxed and accent-edged so it reads as an action rather than as one more block of provenance prose. */ .upload { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0 14px; background: var(--panel-2); } .upload h4 { margin: 0 0 2px; } .upload .settings-row { margin: 10px 0 0; } /* The broker-API block, which sits directly above Upload and is the same kind of thing: a way in for holdings. Borrowing the box wholesale rather than restyling it is the point - two ways to do one job should not look like two different features. */ .connect { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0 14px; background: var(--panel-2); } .connect h4 { margin: 0 0 2px; } .connect .settings-row { margin: 10px 0 0; align-items: baseline; } /* The state sentence is the longest thing on the row and the only one that wraps; without this it stretches the row instead and pushes the buttons out of line with the broker above. */ .connect .settings-row .hint { flex: 1 1 320px; min-width: 220px; } /* The credentials row sits under its broker rather than beside it - two text boxes and a button do not fit on the same line as the sleeve picker at any width worth designing for. Indented so it reads as belonging to the broker above it, and quieter, because it is set up once and then never again. */ .connect .connect-keys { margin: 4px 0 12px 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .connect .connect-keys:last-child { border-bottom: none; padding-bottom: 0; } .connect .connect-keys input { width: 210px; font-size: var(--fs-base); } /* The trail a running import leaves, under the broker it belongs to. Indented to the same 18px as the credentials row so it reads as that broker's, and boxed rather than left as loose lines because it is the one thing on this page that changes while somebody is looking at it - it has to be findable again after a glance away. */ .import-progress { margin: 6px 0 12px 18px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--radius-sm); background: var(--panel); } .import-progress.running, .import-progress.started { border-left-color: var(--accent); } .import-progress.done { border-left-color: var(--positive); } .import-progress.failed { border-left-color: var(--negative); } .import-progress-head { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .import-progress .hint { margin: 6px 0 0; } .import-progress .hint.bad { color: var(--negative); } .import-steps { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--fs-base); } .import-steps li { display: flex; gap: 7px; align-items: baseline; padding: 1px 0; } /* Fixed width so the labels line up whatever mark is against them, and the marks themselves centred in it - a tick and a middot are nothing like the same width, and the column would otherwise shift on every step. */ .import-steps .mark { flex: 0 0 12px; text-align: center; color: var(--muted); } /* Only the step being worked on is at full strength. The ones already done are history and the ones to come have not happened, so neither should compete with the line that is actually moving. */ .import-steps li.pending { color: var(--muted); } .import-steps li.done { color: var(--muted); } .import-steps li.done .mark { color: var(--positive); } .import-steps li.running { color: var(--text); font-weight: 600; } .import-steps li.running .mark { color: var(--accent); } .import-steps li.failed { color: var(--negative); } .import-steps li.failed .mark { color: var(--negative); } /* The native file input is as wide as its longest filename otherwise, which pushes the Upload button off the row the moment anything real is picked. */ .upload input[type="file"] { font-size: var(--fs-sm); max-width: 340px; } /* --- version history ------------------------------------------------- */ /* The diff heading sits inside a folded section, under an h4, so it is an h5 - which nothing else on the site uses and which therefore has no styling of its own to inherit. */ [data-diff-out] h5 { margin: 14px 0 6px; font-size: var(--fs-base); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* A left edge per kind, so added / removed / changed are separable at a glance down a long list without reading the first column of every row. Colour is the reinforcement here, not the signal: the row also says which it is in words, because these three are exactly the distinction a red/green-blind reader would otherwise lose. */ [data-diff-kind] > td:first-child { border-left: 2px solid transparent; } [data-diff-kind="added"] > td:first-child { border-left-color: var(--positive); } [data-diff-kind="removed"] > td:first-child { border-left-color: var(--negative); } [data-diff-kind="changed"] > td:first-child { border-left-color: var(--accent); } /* --- toast ---------------------------------------------------------- */ .toast { position: fixed; bottom: 18px; right: 18px; z-index: 300; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 9px 14px; font-size: var(--fs-base); box-shadow: var(--shadow-lg); } .toast.err { border-left-color: var(--negative); } /* --- database banner ------------------------------------------------- Pinned to the top and above everything, including the sign-in gate: it can be raised before the shell has ever rendered. Not dismissable - the fault it reports is one where nothing can be saved, so it goes away when the database comes back and not before. */ .db-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 400; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: calc(9px + env(safe-area-inset-top, 0px)) 16px 9px; padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); background: color-mix(in srgb, var(--negative) 16%, var(--panel)); border-bottom: 1px solid var(--negative); color: var(--text); font-size: var(--fs-base); line-height: 1.5; box-shadow: var(--shadow-lg); } .db-banner strong { color: var(--negative); } .db-banner .db-detail { color: var(--muted); } /* What the database itself said, as opposed to what the reader has lost. Held at full contrast and monospaced: it is the one line on this banner somebody might have to read character by character or paste into a search. */ .db-banner .db-cause { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-sm); color: var(--text); } .db-banner .db-cause svg { color: var(--negative); flex: none; align-self: center; } .db-banner .btn { margin-left: auto; } .empty { padding: 40px 20px; text-align: center; color: var(--muted); line-height: 1.7; } .empty code { background: var(--panel-2); padding: 1px 5px; border-radius: var(--radius-xs); font-family: var(--mono); } /* --- the news feed ---------------------------------------------------- */ /* The AI page's News tab: a filing per row, with a toolbar, a strip of class chips and a sortable head over it. Its own table rather than `table.grid`, which every other list in this app uses. The grid is built for eighty numeric columns - `width: max-content`, a sticky first column, a filter row parked under the head - and this is six columns, one of which is a sentence that has to WRAP. Bending the grid into that would have cost more rules than declaring the six. */ .news-panel .toolbar { flex-wrap: wrap; row-gap: 6px; } .news-panel .toolbar .input-icon > input[type="text"] { min-width: 240px; } .news-panel .toolbar select { max-width: 160px; } /* The two passes that fill the feed, above it. A panel of its own rather than two more buttons in the feed's toolbar: everything in that toolbar changes what is DRAWN and costs nothing, and a button that spends money sitting between "Clear filters" and "Refresh" would be a trap. */ .news-jobs { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 0; } .news-job { display: flex; flex-direction: column; gap: 4px; min-width: 260px; } .news-job-note { margin: 0; min-height: 1.2em; } /* The button's own icon, from the same vocabulary the Fetch menu draws these types with - so a pass has one face wherever it is offered. `align-self: start` because the column stretches its children and a button stretched to the width of a two-line note reads as a banner. */ .news-job > .btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; } /* When it last ran, and when it is next due. Its own line under the note rather than more words inside it: the note answers "what would this press do" and this answers "when was it last done", and a reader scanning a row of buttons for the overdue one should find it without reading either. Two spans on one line, wrapping to two on a narrow column. `--fs-xs` and the muted colour keep it beneath the note in the reading order it deserves - it is a stamp, not the offer. */ .job-when { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; font-size: var(--fs-xs); letter-spacing: .01em; } .job-when-last { color: var(--muted); } /* Not due is deliberately as quiet as the last-run stamp beside it: a date in the future is reassurance, and reassurance does not need a colour. Due is the one state worth an eye, in the amber every other "this needs attention" in the app uses - not red, because an overdue pass is a thing to press, not a failure. */ .job-when-next { color: var(--muted); } .job-when-next.due { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; } /* The paid one, marked in the accent every other spending control in this app carries. Not red: it is a normal thing to press, it just is not free. */ .news-job-paid { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); } .news-job-paid:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent); } .news-cost { font-weight: 600; white-space: nowrap; border-bottom: 1px dotted var(--muted); } .news-backlog { margin: 10px 0 0; } .news-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; } .news-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; } .news-chip:hover { border-color: var(--accent); color: var(--text); } .news-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .news-chip .n { font-variant-numeric: tabular-nums; opacity: .7; font-size: var(--fs-xs); } /* A class the feed currently holds none of. Dimmed rather than hidden: which classes exist is a fact about the classifier, and a chip that vanished when its count hit zero would make "no governance flags this month" look like a feature that had never been built. */ .news-chip.empty { opacity: .45; } .news-chip.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } /* The tone is carried on the DOT, not on the chip's own text: six chips in six colours is a rainbow, and the one that matters - a red flag - stops standing out the moment everything is coloured. */ .news-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; align-self: center; } .news-chip.tone-bad::before { background: var(--negative); } .news-chip.tone-good::before { background: var(--positive); } .news-chip.tone-plain::before { background: var(--muted); } .news-count { margin: 8px 0 6px; } .news-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .news-table th { position: sticky; top: 0; z-index: 2; padding: 5px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; user-select: none; } .news-table th:hover { color: var(--accent); } .news-table th .sort { color: var(--accent); font-size: var(--fs-2xs); margin-left: 3px; } .news-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .news-table tbody tr:hover { background: var(--row-hover); } /* A stock actually held is the row you were looking for. A rule down the left edge rather than a background, so it survives the hover and the stripe. */ .news-table tbody tr.held td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .news-c-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); } .news-c-stock { white-space: nowrap; } .news-c-class, .news-c-sev { white-space: nowrap; } .news-c-conf { white-space: nowrap; color: var(--muted); font-size: var(--fs-xs); } /* A LOW-confidence row is one the rating model ignores outright. It is shown anyway - see the tooltip on the Confidence menu - so the cell says quietly that the classifier was guessing. */ .news-c-conf.weak { font-style: italic; opacity: .7; } .news-c-text { width: 100%; line-height: 1.5; } .news-symbol { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; } .news-symbol:hover { text-decoration: underline; } .news-symbol:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .news-name { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: var(--fs-xs); } /* The exchange's own label for the filing, under the headline it prefixed. Below rather than beside, because it repeats on two thirds of the rows and a second column of "Award of Order / Receipt of Order" would out-shout the one line on each row that is actually different. */ .news-filing { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-xs); } .news-panel .pill.tone-bad { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 50%, transparent); } .news-panel .pill.tone-good { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 50%, transparent); } .news-panel .pill.tone-plain { color: var(--muted); } .news-more { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; } .news-more .hint { margin: 0; } /* --- the credit-rating feed ------------------------------------------ */ .credit-panel .credit-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 10px; color: var(--muted); font-size: var(--fs-sm); } .credit-panel .credit-stats b { color: var(--text); font-variant-numeric: tabular-nums; } .credit-bar { flex-wrap: wrap; row-gap: 6px; } .credit-bar .input-icon > input[type="text"] { min-width: 250px; } .credit-count { margin: 8px 0 6px; } .credit-table .credit-c-date, .credit-table .credit-c-agency, .credit-table .credit-c-action, .credit-table .credit-c-rating, .credit-table .credit-c-outlook, .credit-table .credit-c-updated { white-space: nowrap; } .credit-table .credit-c-date, .credit-table .credit-c-updated { color: var(--muted); font-variant-numeric: tabular-nums; } .credit-table .credit-c-updated span { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); } .credit-table .credit-c-drivers { min-width: 260px; width: 100%; line-height: 1.45; } .credit-panel .pill.tone-bad { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 50%, transparent); } .credit-panel .pill.tone-good { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 50%, transparent); } .credit-panel .pill.tone-plain { color: var(--muted); } /* --- the Add-More verdict --------------------------------------------- */ /* Weighted towards the reasoning rather than the call. The verdict word is one line and the factor table is the body of the panel, because a recommendation nobody can audit is worth less than the evidence under it - see the note at the top of `advice.js`. */ /* The table of positions. One line per holding, verdict or not - a stock nobody has asked about is a row with an empty call, never an omission. */ .advice-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .advice-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); padding: 4px 10px 4px 0; } .advice-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .advice-table tbody tr:hover { background: var(--row-hover); } /* The controls above the table - a search box, the sleeve menu and four more, and a Clear that is dead until there is something to clear - and the heads, which sort. The same bones as the news feed's, so the two tables on this page work the same way. Scoped on the toolbar's own class rather than on `.advice-panel`, which the stock popup's AI tab also wears - and that class is `advice-toolbar`, not `advice-bar`: `.advice-bar` further down is the weight bar in the details popup, 54px by 6px with its overflow hidden, and a toolbar that wore it was painted as that sliver, every control inside it clipped away. */ .toolbar.advice-toolbar { flex-wrap: wrap; row-gap: 6px; margin: 6px 0 8px; } .toolbar.advice-toolbar .input-icon > input[type="text"] { min-width: 236px; } .toolbar.advice-toolbar select { max-width: 190px; } .advice-count { margin: 0 0 6px; } .advice-table th[data-advice-sort] { cursor: pointer; user-select: none; } .advice-table th[data-advice-sort]:hover { color: var(--accent); } .advice-table th .sort { color: var(--accent); font-size: var(--fs-2xs); margin-left: 3px; } .advice-sym { font-weight: 600; white-space: nowrap; } .advice-name { color: var(--muted); } .advice-call-cell { white-space: nowrap; } /* The coarse call, and the thing a reader scanning forty rows actually reads. Larger than the precise verdict beside it on purpose. */ .advice-action { font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.04em; } .advice-action.good { color: var(--positive); } .advice-action.bad { color: var(--negative); } .advice-action.plain { color: var(--muted); } .advice-verdict-sub { margin-left: 6px; color: var(--muted); font-size: var(--fs-xs); } .advice-when { white-space: nowrap; font-variant-numeric: tabular-nums; } .advice-age { display: block; color: var(--muted); font-size: var(--fs-xs); } /* Past the standing period and worth a look. Not a warning - nothing is wrong, the answer is simply old enough that refreshing needs no argument. */ .advice-age.due { color: var(--accent); } /* Whose position this answer was reasoned against, when it was not the reader's. The verdicts are shared, so this row may have been paid for by somebody else - quiet, because it is a caveat rather than a problem, but present, because the position half of the advice is about a portfolio that is not theirs. */ .advice-asked-by { display: block; color: var(--muted); font-size: var(--fs-xs); font-style: italic; } /* What a row's answer cost. Tabular figures so a column of them lines up on the decimal point - the whole reason the column exists is comparing one row's cost against another's, and a proportional font makes that a reading exercise. */ .advice-cost { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } .advice-cost-usd { font-weight: 600; } .advice-cost-inr { display: block; color: var(--muted); font-size: var(--fs-xs); } .advice-tokens { display: block; color: var(--muted); font-size: var(--fs-xs); } /* A call nobody could price. Quiet rather than loud - it is a gap in the accounting, not a problem with the verdict - but never rendered as a zero: "$0.00" is a claim about money and this is the absence of one. */ .advice-unpriced { color: var(--muted); cursor: help; } .advice-unpriced-note { color: var(--muted); font-style: italic; } /* The spend summary above the table. Parts on their own lines at narrow widths and inline when there is room - it is three facts, not a paragraph. */ .advice-spend { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; } .advice-spend-part { font-variant-numeric: tabular-nums; } /* The rate card the money was computed at, and when it was written down. Printed rather than assumed: the tokens are the provider's count and the price is not, so this is the line that says how much to trust the figures beside it. */ .advice-rate-card { color: var(--muted); font-size: var(--fs-xs); flex-basis: 100%; } .advice-rate-card code { font-size: var(--fs-xs); } /* The per-answer breakdown in the popup. Narrow on purpose: it sits under the reasoning, where it is a footnote about cost rather than a second subject. */ .advice-usage-table { border-collapse: collapse; font-size: var(--fs-base); max-width: 420px; } .advice-usage-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); padding: 3px 14px 3px 0; } .advice-usage-table td { padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line-soft); } .advice-usage-table tfoot td { border-bottom: none; border-top: 1px solid var(--line); font-weight: 600; } .advice-usage-label { cursor: help; } .advice-usage-tokens, .advice-usage-cost { text-align: right; font-variant-numeric: tabular-nums; } /* The ring, and the only one in the application - see js/loading.js. It was `.advice-spinner` while one table was the only thing that waited visibly; it is on every panel, every grid and the top bar now, and a shared mark carrying one page's name in its class was a lie about where it is used. */ .spinner { display: inline-block; width: 11px; height: 11px; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; /* Nudged onto the text baseline: an inline-block ring sits a shade high beside 12px type and reads as misaligned rather than as spinning. */ vertical-align: -1px; flex: none; /* The ring is always followed immediately by the words it belongs to, so the gap belongs to it rather than to each host: it turns up in a `.hint`, a `.mini-empty`, a table cell, a button label and an upload note, and a rule per host is a rule the next host will not have. */ margin-right: 6px; } /* Zeroed where the host is a flex box already spacing its own children - the margin would be added to the gap rather than replacing it. */ .loading-line .spinner, .loading-veil-pill .spinner { margin-right: 0; } /* The block form, for a panel with nothing else on it. Bigger because it is the only thing on screen rather than a mark beside a word, and unmargined because it is centred in a column rather than sitting beside anything. */ .spinner.lg { width: 22px; height: 22px; border-width: 3px; vertical-align: 0; margin-right: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* A reader who has asked not to see motion gets a steady ring rather than a spinning one - it still marks the row, it just does not move. Same trade the rest of the app makes; the information is in the mark, not in the animation. */ @media (prefers-reduced-motion: reduce) { .spinner { animation: none; opacity: 0.7; } } /* A waiting line inside a panel that already has a frame. `inline-flex` rather than the inline ring on its own, so a message that wraps does not put its second line underneath the spinner. */ .loading-line { display: flex; align-items: center; gap: 6px; } .loading-line .spinner { margin-right: 0; } /* A panel or a page with nothing on it yet. Centred, with real height: the point of the block form is that there is nothing else to look at, and a spinner pinned to the top-left of an empty panel reads as a rendering fault. */ .loading-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 44px 16px; min-height: 120px; color: var(--muted); font-size: var(--fs-base); text-align: center; } .loading-block-text { margin: 0; } .loading-block .hint { margin: 0; max-width: 46ch; } /* Content being replaced in place. The host keeps its old content mounted underneath - see `setBusy` in js/loading.js for why a refresh dims rather than replaces - so this has to be positioned against it. */ .is-loading { position: relative; } .loading-veil { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 56px; background: color-mix(in srgb, var(--bg) 45%, transparent); /* Above everything the grid stacks inside itself - the sticky header rows go to 3, a pinned cell to 4 and the tick-box header to 5 - because `.is-loading` is `position: relative` with no z-index of its own and therefore opens no stacking context to hide them behind. At 4 the header poked through the veil. Still under the settings shelf (30) and far under the modals. */ z-index: 10; /* The rows underneath stay readable and stay unclickable: a click landing on a row that is about to be replaced acts on the row that replaces it. */ cursor: progress; } .loading-veil-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel); box-shadow: var(--shadow-sm); color: var(--muted); font-size: var(--fs-base); } /* The application-wide one: a hairline under the top bar for as long as any request is in flight, anywhere. The header dot says the same thing in seven pixels and is easy to miss; this is the piece that answers "is it doing something" without the reader having to know where to look. Not a progress bar - nothing here knows how far along a fetch is, and a bar that pretends to would be inventing the one number it does not have. It is a band sliding across a fixed track, which claims only "still working". */ .topbar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; z-index: 20; } .topbar-progress[hidden] { display: none; } .topbar-progress::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent) 65%, transparent); animation: topbar-slide 1.1s ease-in-out infinite; } @keyframes topbar-slide { from { transform: translateX(-100%); } to { transform: translateX(386%); } } /* Standing still, the sliding band would be a stripe parked on the left of the bar and read as a stalled progress bar rather than as work in progress. A steady full-width tint is the honest still frame of it. */ @media (prefers-reduced-motion: reduce) { .topbar-progress::after { animation: none; width: 100%; background: var(--accent); opacity: 0.5; } } /* The details popup. Fixed rather than absolute so it is not clipped by the panel's own scroll, and scrollable inside - a factor table plus the prose around it is taller than a laptop viewport. */ /* Sized exactly as the stock popup is - see `.modal-root` and `.modal` above, which this now mirrors line for line rather than resembling. It was a content-height box on a backdrop that scrolled, and that is the arrangement the stock popup was moved off for a reason worth repeating here: the box grew and shrank with whatever was in it, so the Close button walked up and down the screen as the reader moved between a two-line answer and a dozen sections of report. Worse for this one than for that one, because the whole backdrop scrolled - which put the head, the stock's name and the way out off the top of the window the moment anybody read past the first section. So: a fixed 80vw x 80vh box, `dvh` after `vh` so a phone's collapsing address bar does not leave the bottom of it underneath, one scrolling half inside, and nothing on the backdrop that can scroll at all. The head stays put, the report's sticky rail finally has a box to be sticky *in*, and the difference between a short answer and a long one is handed to a scrollbar. */ .advice-modal { position: fixed; inset: 0; /* Dimmed and blurred rather than dimmed harder, matching `.modal-root`: the table behind stays legibly the thing the report was opened out of, while the blur stops it competing for the eye. */ background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 60; /* The box sizes itself and scrolls inside itself, so nothing here scrolls and nothing here can spill past the backdrop. */ overflow: hidden; } .advice-modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 24px 64px rgba(0, 0, 0, .28); width: 80vw; height: 80vh; height: 80dvh; display: flex; flex-direction: column; /* A flex item defaults to `min-height: auto` and would refuse to shrink below its content, pushing a long report straight back out through the bottom. */ min-height: 0; overflow: hidden; } .advice-modal-head { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; border-bottom: 1px solid var(--line); padding: 12px 18px 10px; } .advice-modal-head strong { font-size: var(--fs-lg); } .advice-modal-head .btn { margin-left: auto; } /* The one part that scrolls, and what `.report-index` is sticky against. */ .advice-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 18px 18px; } /* No reading measure inside. What the body holds is a report - a rail beside a dozen sections and a six-column factor table - not a page of prose, and a 980px column centred in an 80vw popup wrapped that table while a quarter of the popup stood empty on either side of it. So the content takes the whole width of the popup - the same call `.stock-advice` makes inside the stock popup, on every half of its AI tab. */ .advice-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; } .advice-call { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; } .advice-call.good { color: var(--positive); } .advice-call.bad { color: var(--negative); } .advice-call.plain { color: var(--muted); } .advice-meaning { color: var(--muted); font-size: var(--fs-base); } .advice-headline { margin: 2px 0 10px; font-size: var(--fs-lg); line-height: 1.5; } /* Loud on purpose, and used for exactly two things: a verdict reasoned on data that has since moved, and weights that do not sum to 100. Both are reasons to trust the panel less, which is the one thing it must not be quiet about. */ .advice-warn { margin: 8px 0; padding: 6px 9px; border-left: 2px solid var(--negative); background: color-mix(in srgb, var(--negative) 8%, transparent); font-size: var(--fs-base); line-height: 1.5; } .advice-block { margin: 14px 0; } .advice-block h4 { margin: 0 0 6px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .advice-block p { margin: 0; font-size: var(--fs-md); line-height: 1.6; } .advice-points, .advice-bullets { margin: 0; padding-left: 18px; } .advice-points li, .advice-bullets li { margin-bottom: 7px; font-size: var(--fs-md); line-height: 1.55; } .advice-points.good li::marker { color: var(--positive); } .advice-points.bad li::marker { color: var(--negative); } .advice-point { display: block; } .advice-evidence { display: block; color: var(--muted); font-size: var(--fs-base); margin-top: 2px; } .advice-weight-why { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 3px; font-style: italic; } .advice-factors { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .advice-factors th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; } .advice-factors td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .advice-factor-name { font-weight: 600; white-space: nowrap; } .advice-factor-why { line-height: 1.5; } .advice-score { text-align: right; font-variant-numeric: tabular-nums; } /* The weight as a bar as well as a number: the reader's question is "what decided this", which is a comparison rather than a value. */ .advice-weight { white-space: nowrap; } .advice-bar { display: inline-block; width: 54px; height: 6px; border-radius: var(--radius-xs); background: var(--panel-2); overflow: hidden; vertical-align: middle; } .advice-bar i { display: block; height: 100%; background: var(--accent); } .advice-weight-num { margin-left: 6px; font-variant-numeric: tabular-nums; } /* --- the scorecard ----------------------------------------------------- */ /* Twelve aspects rated 1-10 with the reasons for each, and one overall rating over them - the same table bones as the factors above, because they are the same object to a reader: a name, a bar, a word and the evidence. What differs is that these bars are *judgements* rather than shares of a whole, so they are coloured by the rating instead of all wearing the accent, and the column is read down for the shape of it. See `aspectTable` in `advice.js`. */ .advice-aspects .advice-factor-name { white-space: normal; min-width: 150px; } .advice-aspects .advice-weight { width: 108px; } .advice-bar i.good { background: var(--positive); } .advice-bar i.bad { background: var(--negative); } .advice-bar i.plain { background: var(--muted); } .advice-weight-num.good { color: var(--positive); } .advice-weight-num.bad { color: var(--negative); } /* The overall rating in the head, beside the verdict rather than under it. Sized between the call and the pills: it is an answer, not a label, and a reader scanning the top of the panel should land on the verdict and this number together. */ .advice-overall { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; } .advice-overall b { font-size: var(--fs-lg); font-weight: 700; } .advice-overall-scale { color: var(--muted); font-size: var(--fs-sm); } .advice-overall-grade { margin-left: 2px; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; } .advice-overall.good { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 50%, transparent); } .advice-overall.bad { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 50%, transparent); } .advice-overall.plain { color: var(--muted); } /* The overall rating's reasons, above the twelve rows they were formed from. */ .advice-overall-why { margin: 0 0 9px; font-size: var(--fs-md); line-height: 1.6; } .advice-overall-why .good { color: var(--positive); } .advice-overall-why .bad { color: var(--negative); } .advice-overall-why .plain { color: var(--muted); } .advice-panel .pill.good { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 50%, transparent); } .advice-panel .pill.bad { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 50%, transparent); } .advice-panel .pill.plain { color: var(--muted); } .advice-provenance { margin: 14px 0 0; color: var(--muted); font-size: var(--fs-xs); } /* The same verdict inside the stock popup's AI tab. It reuses every class above - the panel carries `.advice-panel` so the pills keep their colours - and adds only what a tab needs that a page does not: a button sitting with the heading rather than under it, and headings for the halves the tab stacks. Those headings are `.stock-advice-sub` rather than a bare `h4` because `renderVerdict` draws `.advice-block h4` inside this panel, and a rule on `h4` alone would restyle every block in the report at the same specificity - decided by source order, which is not a thing to decide it. The whole width of the popup, on every half, which is the same call `.rating-panel` makes and now for the same reason. It was capped at an 880px reading measure while Overview was a position line and a runs table - prose, read at the width prose is read at - with the cap lifted only while Detailed was open, because a six-column factor table wrapped inside it. Overview is not prose any more: it opens with a hero beside a twelve-row read-out and carries an eight-column table under it, and at 880px out of an 80vw popup that stood in a narrow column with a third of the popup empty either side. Nothing in this tab is a page of prose now, so nothing here wants a measure. */ .stock-advice { width: 100%; } .stock-advice-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; } .stock-advice-top h3 { margin: 0; font-size: var(--fs-lg); } .stock-advice-top .btn { margin-left: auto; } /* The button is drawn disabled while a call is in flight and when no API key is configured. Nothing else in the application disables a `.btn`, so without this the only difference between "asking" and "press me" would be the word on it - and the spinner is a paragraph away from where the click lands. */ .stock-advice-top .btn[disabled] { opacity: .45; pointer-events: none; } .stock-advice-sub { margin: 18px 0 6px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .stock-advice-runs { margin-bottom: 6px; } /* --- the AI tab's Overview: the catalogue of what can be asked ---------- */ /* Six rows, one per question this build can put to a model about one stock, and every one of them is a control: pressing anywhere on a row opens that question's own half. So the row has to look pressable without becoming a sixth kind of button - the popup already has tabs, sub-tab pills, icon buttons, the fetch menu and the field controls, and a table of link-blue rows would be a sixth vocabulary for "you can click this". The answer is the one the grid already uses: the row lifts on hover and a chevron leans into the gesture. Nothing about the row's *content* changes colour, because the content is the answer - a stance is coloured by what it said, and a hover that recoloured it would be the interface arguing with the data. */ .ai-catalogue-table tbody tr { cursor: pointer; } .ai-catalogue-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* The chevron leans in on hover rather than appearing on it. A control that is invisible until the pointer is over it cannot be found by somebody who has not already guessed it is there, which is exactly the reader this panel was built for. */ .ai-cat-go { width: 1%; color: var(--muted); text-align: right; transition: transform .12s ease, color .12s ease; } .ai-catalogue-table tbody tr:hover .ai-cat-go { color: var(--accent); transform: translateX(2px); } /* The question, its mark and its cadence, stacked. The mark is the same icon `jobs.py` gives that job type, so a row here and a row in the Jobs tab wear the same picture for the same call. */ .ai-cat-name { min-width: 210px; } .ai-cat-mark { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--accent); } .ai-cat-label { font-weight: 600; } .ai-cat-name .advice-age { display: block; margin-left: 26px; } .ai-cat-state { white-space: nowrap; } .ai-cat-runs { text-align: right; font-variant-numeric: tabular-nums; width: 1%; } /* A question nobody has ever asked. Dimmed rather than hidden and dimmed rather than greyed out: it is the most useful row on the table for a reader who came to find out what they have NOT done, and it has to stay legible while reading as the empty one. Only the answer columns fade - the question itself stays at full strength, because that is the half of the row that is still true. */ .ai-cat-none td:not(.ai-cat-name):not(.ai-cat-state) { opacity: .55; } /* Each half's own body, so a switch between them is a class rather than a rebuild - see `subPanel` in `stockadvice.js`. Nothing else to say: the panes carry `.stock-advice`, `.whyfall-panel` or `.ai-catalogue`, all of which are already full-width blocks. */ .stock-ai { width: 100%; } /* AI > Others: seven independent job outputs, dense enough to scan and with each historical row collapsed so one filing ledger cannot bury the rest. */ .others-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .others-card { min-width: 0; } .others-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .others-card-head h4 { margin: 0; } .others-items { display: grid; gap: 6px; } .others-item { border-top: 1px solid var(--line); padding-top: 7px; } .others-item summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; } .others-fields { display: grid; gap: 6px; margin: 10px 0 0; } .others-fields > div { display: grid; grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr); gap: 10px; } .others-fields dt { color: var(--muted); font-size: var(--fs-sm); } .others-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; } .others-fields .others-fields { margin-top: 0; } .others-list { margin: 0; padding-left: 18px; } @media (max-width: 820px) { .others-grid { grid-template-columns: minmax(0, 1fr); } .others-fields > div { grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr); } } /* The report itself: headings down the left, sections on the right. The rail is sticky against `.modal-body`, which is the popup's scroller - so it stays put while the report moves past it, and `top: 0` is measured against that box rather than the window. `align-items: start` is what gives it a box to be sticky *in*: a grid item stretches to the row height by default, and a full-height item has nowhere to stick to. `minmax(0, 1fr)` on the body, not `1fr`. The factor table and the usage table are wide, and a grid track's automatic minimum is its content - without this a long factor row pushes the column wider than the popup and the whole report scrolls sideways under a rail that is no longer beside it. */ .report-split { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 20px; align-items: start; margin-top: 10px; } .report-index { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; padding-right: 12px; border-right: 1px solid var(--line-soft); } .report-jump { background: none; border: 0; border-left: 2px solid transparent; padding: 5px 8px; text-align: left; font: inherit; font-size: var(--fs-sm); line-height: 1.35; color: var(--muted); cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .report-jump:hover { color: var(--text); background: var(--row-hover); } /* The mark follows the body's scroll, so it is a statement about where the reader is rather than about what they last pressed - it has to read as a position, which is what the rule down the left edge says and a background alone would not. */ .report-jump.on { color: var(--text); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); } /* The first section starts flush with the rail rather than under the margin every other block carries, so the two columns begin on the same line. */ .report-body > .advice-block:first-child { margin-top: 0; } /* Pressed headings scroll the section to the top of the popup's body; this is the breathing room between it and the tab strip above. */ .report-body [data-report-section] { scroll-margin-top: 6px; } /* --- the Analytics tab ------------------------------------------------- */ /* The rubric's twelve categories beside the model's, one row each. Built almost entirely out of borrowed classes - `.rating-card` for the sections, `.verdict` for both sides' band words, `.advice-bar` and `.advice-weight-num` for the model's rating, `.delta-pill` for the rubric's points - because this tab is a comparison of two panels that already exist and inventing a third vocabulary for it would make the very comparison it is for harder to read. What is new here is only what is new on screen: the two overall scores facing each other, and the gap column. */ .an-heads-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; } /* Facing each other rather than stacked, which is the whole point: the two answers are peers and the distance between them is the third thing on the row. So the left one is right-aligned and the right one left-aligned, and the spread sits in the gutter they both point at. */ .an-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .an-head-rubric { justify-content: flex-end; text-align: right; } .an-who { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; width: 100%; } .an-head-rubric .an-who { justify-content: flex-end; } .an-who .icon { opacity: .7; } .an-score { font-size: 26px; font-weight: 600; line-height: 1.1; } .an-score.good { color: var(--positive); } .an-score.bad { color: var(--negative); } .an-scale { color: var(--muted); font-size: var(--fs-sm); } /* The gutter between the two. A number and a word, centred, in the mono face the rest of the application quotes deltas in - it is a distance, and it reads as one only if it cannot be mistaken for a third score. */ .an-spread { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 10px; border-radius: var(--radius); background: var(--panel-2); min-width: 88px; } .an-spread-num { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 600; } .an-spread-note { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; } /* A wide spread is toned, not alarmed: two scorecards a point and a half apart is the interesting case this tab exists to surface, not a fault. */ .an-spread-wide { background: var(--accent-soft); } .an-spread-wide .an-spread-num { color: var(--accent); } .an-spread-none { color: var(--muted); } /* The table. Every cell in it is a `.mini-table td` first, and that rule sets `white-space: nowrap` - right for eleven columns of figures, and wrong for the two here that hold words. Undoing it takes `.an-table td.an-why` rather than a bare `.an-why`: one class loses the cascade to `.mini-table td`'s class-plus- element, so the plain selector reads as though it works, computes as though it does not, and lets a 400-character justification run off the side of the popup on one line. The `td` in these selectors is load-bearing, not decoration. Top-aligned rather than centred, because the reason column is the tall one: a pill floating halfway down a six-line cell reads as belonging to no line in particular, where at the top it sits against the sentence it is about. */ .an-table td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; } .an-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); padding: 4px 4px 5px; white-space: nowrap; } /* --- whose number is this ------------------------------------------------ */ /* Two answers to one question on every row, so each side carries an identity hue: cyan for the rubric, violet for the model. Set as one custom property that everything below reads, exactly as the axis marks do with `--cat-mark` - so adding a third scorer one day is two declarations, not fifteen. The hue is an identity and NEVER a verdict. That is the whole constraint on how strongly it can be used: these cells are full of pills that really are verdicts, and a green wash under a "Very bad" pill would be the panel arguing with itself. So the body gets a few per cent and the head gets the hue at strength, where no red or green sits beside it. */ .an-side-rubric { --an-side: var(--an-rubric); } .an-side-model { --an-side: var(--an-model); } /* The heading that names a side. This, not the colour, is what actually says which side is which - the tint only makes it scannable once you know. It carries the same mark as the headline block above it, so the two read as one thing rather than as two ways of saying it. It was a label spanning two columns while the rubric had a Verdict and a Points column. Dropping the points left one column a side, and a group label over a single column is a heading with nothing to group - so the span went and its mark, hue and rule came down onto the ordinary heading. */ .an-table th.an-grp { color: color-mix(in srgb, var(--an-side) 80%, var(--text)); border-bottom: 2px solid color-mix(in srgb, var(--an-side) 55%, transparent); } /* `display: inline-block`, and it is not optional. The base `.icon` rule is `display: block`, so every icon in this application takes a line of its own unless something puts it back in the flow - which everywhere else means a flex parent (`.vd-name`, `.delta-pill`, `.an-who` below) setting `flex: none` on it. These two live in table cells, where a flex parent would stop the cell being a table-cell and take the column widths with it, so they go inline instead - the same way the day-move log's open mark does. Without this the mark sits on one line and its word on the next, which is what a `vertical-align` on a block element quietly fails to fix. */ .an-grp .icon { display: inline-block; opacity: .85; margin-right: 4px; vertical-align: -2px; } /* The reason column is the model's too, but it sits past the Agreement column and is the widest thing on the tab - a second named heading over it would read as a third side. It takes the band and the hue, and no mark. */ .an-table th.an-side-model { color: color-mix(in srgb, var(--an-side) 72%, var(--text)); } /* The wash, on the head as well as the body so each band runs the full height of the table and the boundary between the two sides is simply the colour changing - no rules to draw and nothing to keep aligned. Deliberately weak, and re-stated for the hover state below: a cell background always paints over its row's, so a tinted column would otherwise swallow the row highlight on exactly the cells being compared. */ .an-table th.an-grp, .an-table th.an-side-model { background: color-mix(in srgb, var(--an-side) 10%, transparent); } .an-table td.an-side-rubric, .an-table td.an-side-model { background: color-mix(in srgb, var(--an-side) 7%, transparent); } .an-table tbody tr:hover td.an-side-rubric, .an-table tbody tr:hover td.an-side-model { background: color-mix(in srgb, var(--an-side) 12%, var(--row-hover)); } /* The headline blocks take the identity at strength: they are two words and a number with nothing coloured beside them, which is where a hue can be spent properly. The score itself keeps its verdict tone - it is the one figure here allowed to be good or bad news. */ .an-head .an-who { color: var(--an-side, var(--muted)); } .an-head-rubric, .an-head-model { border-radius: var(--radius); padding: 6px 10px; } .an-head-rubric, .an-head-model { background: color-mix(in srgb, var(--an-side) 8%, transparent); } .an-table td.an-cat { width: 1%; min-width: 124px; white-space: normal; font-weight: 600; } /* Inline for the reason `.an-grp .icon` is, and inline-block rather than a flex row for a second one: the label here wraps - "Valuation vs its own history" is two lines in this column - and as flex items the mark and the label would be two boxes side by side, pinning a 12px mark beside a two-line block. Inline, the mark simply starts the first line and the wrap continues under it, which is how a line of text with a mark in front of it is supposed to behave. */ .an-cat .icon { display: inline-block; opacity: .6; margin-right: 5px; vertical-align: -2px; } /* The four pill columns take their content and no more, so whatever is left of the popup goes to the reason. `width: 1%` is the auto-layout idiom for "shrink to fit": a real percentage would be a share of a width nobody knows. */ .an-table td.an-band, .an-table td.an-agree, .an-table td.an-model { width: 1%; white-space: nowrap; } /* The one column meant to wrap, and the one that absorbs the leftover width. `min-width` is a floor for the narrow case, not a cap - and the cap is the table's own 100%, which is what stops the sentence pushing the popup wider than itself. It is the model's column too, and takes a lighter wash than the model's Rating cell rather than the same one: a tint reads stronger over 900px than over 90, and the 7% that is a hint beside a pill is a slab behind six lines of prose. Halving it keeps the two columns reading as one side. This has to sit after the band rule above to win the tie between two equally specific selectors - which is why the two declarations are in one rule here rather than in a second `.an-table td.an-why` block somewhere else. */ .an-table td.an-why { white-space: normal; overflow-wrap: anywhere; background: color-mix(in srgb, var(--an-side) 3.5%, transparent); color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; min-width: 220px; } /* A side that has nothing on file, rather than a side that scored nothing. The dash is dimmed so a column of them reads as absent data at a glance. */ .an-none { color: var(--muted); opacity: .55; } /* Below the width the five pill columns need, something has to give, and it is this card rather than the popup: the table scrolls inside its own box and the scorecards above it stay put. A popup that grew wider than itself would take the header and every other tab with it. */ .an-table-card { overflow-x: auto; } /* The gap itself. Three states and the middle one is deliberately quiet: one band apart is routine - the two rules cut the scale in different places - and painting it would leave nothing to say two bands apart with. */ .an-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em; white-space: nowrap; background: var(--delta-zero-bg); color: var(--delta-zero-fg); } .an-pill .icon { opacity: .8; } .an-is-agree { background: var(--delta-pos-bg); color: var(--delta-pos-fg); } .an-is-near { background: var(--delta-zero-bg); color: var(--delta-zero-fg); } /* The one row on the table worth stopping at, so it gets the accent rather than a sign colour: a two-band disagreement is not good news or bad news, it is news - one side is reading something the other cannot. */ .an-is-wide { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); color: color-mix(in srgb, var(--accent) 82%, var(--text)); } /* Marked with a rule down the left edge rather than a tint across the row, and that is a consequence of the column bands above: a cell background always paints over its row's, so a row tint would have shown on Category and Agreement and vanished behind the very columns being compared. An inset shadow rather than a border, so lighting a row does not shift its text by 3px. Same idiom as `.rating-note` and the report rail's open heading. */ .an-row.an-gap-wide td.an-cat { box-shadow: inset 3px 0 0 var(--accent); } .an-row.an-gap-unknown .an-cat { opacity: .6; } /* The note above the table when one half is missing. Toned as a note rather than a warning, exactly as `.rating-note` is - an unscored stock joins the next pass, and an unasked one needs a button pressed. Neither is a fault. */ .an-note { margin-bottom: 12px; } @media (max-width: 760px) { .an-heads-row { grid-template-columns: minmax(0, 1fr); } .an-head-rubric { justify-content: flex-start; text-align: left; } .an-head-rubric .an-who { justify-content: flex-start; } } /* --- the Compare tab --------------------------------------------------- */ /* One stock beside up to five of its peers: metrics down the left, a column per company across. Dense and uniform on purpose - see the head of compare.js: every stock column the same fixed width, every metric row the same fixed height, the header and the metric column frozen, the groups foldable. The sizes live in custom properties on the panel because three things have to agree about them and a stylesheet cannot measure. The table's own width is the metric column plus `--cmp-cols` stock columns (compare.js writes the count on the table, because a stylesheet cannot count either); the group dividers stick under the header at exactly the header's height; and the phone block at the bottom of this file only has to restate the numbers, not the rules. The two tints are tokens for the same reason - the cell and the note that explains it have to be the same colour. */ .cmp-panel { --cmp-metric-w: 200px; --cmp-col-w: 150px; --cmp-row-h: 28px; --cmp-head-h: 76px; --cmp-best: color-mix(in srgb, var(--positive) 14%, transparent); --cmp-worst: color-mix(in srgb, var(--negative) 11%, transparent); display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; } /* The panel takes the popup body's full height so that the table inside it can be the thing that scrolls. `.cmp-scroll` is that scroller, on both axes: a sticky header sticks to its nearest *scrolling* ancestor, and with the popup body doing the scrolling this box never scrolled vertically at all - so the header, sticky as it was declared, rode off the top with the rows. Now the toolbar stays put above, the table scrolls in its own box, and the header and the metric column have something to stick to. `[data-panel]` rather than a class so the other tabs, whose panels flow and let the body scroll, are untouched. `flex: 0 1 auto` so a short table is a short box, not a box stretched to the bottom of the popup with the hint stranded at its foot. */ .tab-panel[data-panel="compare"] { height: 100%; } .cmp-scroll { flex: 0 1 auto; min-height: 0; overflow-x: auto; overflow-y: auto; } /* The toolbar: the three controls that put a stock on the table on the left, the two that say how it is read on the right, a hairline under the lot. One wrapping row, so on a desktop it is one line and on a phone the left half stacks (see the narrow block) with the right half under it. `align-items: center` rather than baseline: the toggle carries a checkbox and the count a button, and neither has a text baseline worth aligning the others to. */ .cmp-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: none; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--line); } .cmp-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; } .cmp-count { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .cmp-drop { flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: var(--fs-xs); line-height: 1; cursor: pointer; } .cmp-drop:hover { background: var(--panel-2); color: var(--negative); } .cmp-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Mirrors `.field-add` on the Details tab - the same box-then-menu pair, so a search behaves the same way wherever this popup offers one. */ .cmp-add { position: relative; display: flex; align-items: center; gap: 6px; } .cmp-add .field-find { width: 150px; font-size: var(--fs-sm); } .cmp-add select { max-width: 300px; font-size: var(--fs-sm); } .cmp-add select[disabled], .cmp-add .field-find[disabled] { opacity: .5; } /* Open, the menu hangs over the table rather than pushing it down - the same trade `.field-add` makes on the Details tab, and for the same reason: a list of matches that shoves the thing you are comparing off the screen is a search that costs more than it found. Anchored to the right edge of the control group because that is where the closed control sits. `[size]` before the `:not`, and it has to be there. An attribute selector matches the **attribute**, not the IDL property, and a `` of forty positions. The select stopped being a control the moment the tick-boxes could put eight hundred names in it: a dropdown that long cannot be scanned, cannot be sorted, and cannot be searched except by whatever prefix match the browser happens to offer. Everything below is sized for density. The table is the tallest thing on the tab and the two cards under it are what the reader is heading for, so a row that cost 34px would push the buttons off a laptop screen at twelve rows. */ .daymove-picker { margin: 10px 0 8px; } /* The row the shared stock picker sits on, and since the row under it merged in, the status menu and the Columns button too: all three answer the same question - which rows, in what order - so one row is one place to look, and the ~30px the second row cost goes back to the table. The search box is still given room to grow and a ceiling to stop at: the picker's box sizes itself to a toolbar by default, and a company name typed into a 60px field is the failure the pair below avoids. On a narrow screen the row wraps and the controls land underneath, which is where they used to live anyway. */ .daymove-find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 6px; } /* On the row's far edge, where the old controls row's space-between put it: a settings control rather than a filter, and the gap between them says so. */ .daymove-find [data-daymove-colhost] { margin-left: auto; } .daymove-find .stock-pick { flex: 1 1 320px; min-width: 0; max-width: 620px; } .daymove-find .stock-pick .input-icon { display: flex; } .daymove-find .stock-pick input[type="text"] { flex: 1 1 auto; min-width: 0; width: 100%; font-size: var(--fs-base); } /* Wider than the 420px the picker asks for elsewhere, because it opens over a table rather than over a toolbar and has the room - four columns of symbols instead of three, on the tab where the list is longest. */ .daymove-find .stock-pick-panel { width: min(560px, calc(100vw - 24px)); } .daymove-statusfilter { display: inline-flex; align-items: center; gap: 8px; } .daymove-statusfilter select { font-size: var(--fs-sm); } /* The Columns menu. `.dropdown` and `.dropdown-panel` are the grid's own, so the panel is the same 330px card in the same place with the same rows - what is here is only the line of explanation above the buttons, which the grid does not need because its own controls are labelled by the toolbar around them. */ .daymove-colhint { margin: 0 0 6px; font-size: var(--fs-xs); line-height: 1.45; } .daymove-colpanel .picker-row .icon { opacity: .75; flex: none; } /* The table scrolls in its own box rather than growing the page: the two cards under it are what the reader is heading for, and eight hundred rows pushing them below the fold would make the tick-boxes a trap. The box is five rows tall - the header, five rows, and the top sliver of a sixth saying there is more to scroll to. */ .daymove-tablewrap { max-height: 158px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .daymove-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } /* Once the width engine has taken the columns over it writes an explicit width equal to the sum of them, and `min-width: 100%` is what still lets the table fill its box - without it, narrowing one column would leave a gap down the right of the card. The same pair the grid and the Reports log state, for the same reason. */ .daymove-table.resizable { width: max-content; min-width: 100%; } /* A head does three things - click sorts, drag moves, the right edge resizes - so it must not also be selectable text, or the drag reads as a botched double-click on half the attempts. The cursor stays a pointer rather than a grab: sorting is the gesture people come for and dragging is the one they discover, and `.rz-edge` overrides it on the few pixels that resize. */ .daymove-table th[data-daymove-col] { user-select: none; cursor: pointer; } .daymove-table th[data-daymove-col]:hover { color: var(--text); } .daymove-table th[data-daymove-col].rz-edge { cursor: col-resize; } .daymove-th { display: inline-flex; align-items: center; gap: 5px; } .daymove-th .icon { opacity: .65; flex: none; } /* The arrow is the only thing on screen saying how the table is ordered, so it is the accent rather than the muted grey the rest of the head wears. The digit beside it on a second sort is the grid's own device and the same size. */ .daymove-sort { color: var(--accent); font-size: var(--fs-2xs); margin-left: 1px; } /* Absorbs whatever the real columns do not fill. Never a sort target, never a drag target, and not a column the reader can see or hide. `.rz-filler`'s own rule is scoped to `table.grid`, so what it resets there is restated here. */ .daymove-table th.rz-filler, .daymove-table td.rz-filler { padding: 0; border-right: 0; cursor: default; } /* Sticky, because the columns are four numbers and a reader thirty rows down a watch list has no other way of knowing which is the month. */ .daymove-table thead th { position: sticky; top: 0; z-index: 2; padding: 5px 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; white-space: nowrap; } .daymove-table td { padding: 3px 10px; border-bottom: 1px solid var(--line-soft); } .daymove-table tr:last-child td { border-bottom: 0; } .daymove-num { text-align: right; white-space: nowrap; } .daymove-blank { color: var(--muted); } /* The section headings - the book, the roster, and what was taken off it. They are three different universes rather than three sorts of the same one, which is why a sort chip cannot replace them the way it replaced Down and Up. */ .daymove-section th { position: sticky; top: 26px; z-index: 1; padding: 4px 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; } .daymove-section-count { font-variant-numeric: tabular-nums; opacity: 0.7; } .daymove-row { cursor: pointer; } .daymove-row:hover { background: var(--row-hover); } /* Two highlights meaning two things: the keyboard cursor is where the arrows have walked to, the selection is what the cards below are about. The cursor is an outline and the selection a fill, so a reader arrowing past the selected row can see both at once. */ .daymove-row.is-active > td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); } .daymove-row.is-selected { background: var(--accent-soft); } .daymove-row.is-selected .daymove-c-name strong { color: var(--accent); } /* Every column used to state a percentage width here, keyed on its position in the row - `nth-child(5)` was Verdict and `:last-child` was Analysed. None of that survives a table whose columns the reader can hide and reorder: the fifth cell is whatever they dragged into fifth place, and a width nailed to the position would be worn by the wrong column the moment they did. `columnWidths` in `daymove.js` states a default per column NAME instead, and the width engine writes them into the colgroup. What is left here is only how a cell BEHAVES once it has been given a width. */ .daymove-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Symbol first and loud, company name after it and quiet: the symbol is what was typed to get here and what every other page sorts on - so the symbol is the half that must never be the half that gets clipped. */ .daymove-c-name strong { font-weight: 600; } .daymove-c-name span { margin-left: 7px; color: var(--muted); font-size: var(--fs-xs); } /* Soft tints rather than coloured text alone: the whole point of these two columns is that a reader sees which way the book went without reading any of it, and a 12px signed number does not carry that on its own. `--positive-soft` and `--negative-soft`, not a fresh `color-mix` here. The pair is mixed once in the token block so a custom theme that overrides `--positive` takes every tinted surface with it, and - the load-bearing half - **`--positive` in this application is blue, not green**, a deliberate owner decision because red-vs-green is the pair that does not separate for a red/green colour-blind reader. A hand-written pastel green here would be the one thing on screen that ignored that. */ .daymove-move-good { background: var(--positive-soft); color: var(--positive); } .daymove-move-bad { background: var(--negative-soft); color: var(--negative); } .daymove-move-plain { color: var(--muted); } /* The five status columns - one per question the page can ask, plus the Analysed stamp that is about none of them. `.daymove-cell` already clips and nowraps every cell in the table, so what is left for these is only that their marks lay out as a row rather than wrapping the word under the icon. */ .daymove-c-verdict .daymove-mark, .daymove-c-report .daymove-mark, .daymove-c-stance .daymove-mark, .daymove-c-premortem .daymove-mark, .daymove-c-analysed .daymove-mark { max-width: 100%; } .daymove-mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); } .daymove-mark .icon { flex: none; } .daymove-mark.none { color: var(--muted); } .daymove-mark.fresh { color: var(--positive); } .daymove-mark.fresh.bad { color: var(--negative); } .daymove-mark.fresh.plain { color: var(--muted); } /* The bear case's middle answer - "monitorable", real damage that is bounded. Amber rather than the base `--positive`, which is what an unclaimed tone falls through to and would draw the one severity worth watching in the colour that means nothing to see. Same amber as `.stale` below, and for the same meaning: worth a look, not a fault. */ .daymove-mark.fresh.warn { color: var(--warn); } /* Amber, not red. A verdict past its week is worth asking again, which is not the same thing as something being wrong. */ .daymove-mark.stale { color: var(--warn); } .daymove-mark.asking { color: var(--accent); } /* An age, not a state: the two status columns beside it use colour to say whether there is something worth pressing, and a date is never that. So the text is quiet and only the mark carries the page's model hue - which is what keeps the column readable as one thing rather than as a grey date per row. */ .daymove-mark.asked { color: var(--muted); } .daymove-mark.asked .icon { color: var(--accent); } /* The one moving thing on the panel, and it moves because "being produced right now" is the only row state a still picture cannot tell from "done". */ .daymove-mark.asking .icon { animation: daymove-spin 1.4s linear infinite; } @keyframes daymove-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .daymove-mark.asking .icon { animation: none; } } .daymove-empty td { padding: 14px 10px; color: var(--muted); text-align: center; } /* Empty for the whole time nothing is narrowing the list, which is most of the time. Collapsed rather than reserved, so the cards below do not sit under a blank line. */ .daymove-found { margin: 6px 0 0; font-size: var(--fs-xs); } .daymove-found:empty { display: none; } /* The chosen stock's figures. A row of small label-over-value pairs rather than a sentence: the reader is checking a number against what they already saw on the grid, and a paragraph makes them read it twice. */ .daymove-move { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; } .daymove-figure { display: inline-flex; align-items: baseline; gap: 5px; } .daymove-figure-label { color: var(--muted); font-size: var(--fs-xs); } .daymove-figure strong { font-variant-numeric: tabular-nums; font-size: var(--fs-base); } .daymove-figure strong.good { color: var(--positive); } .daymove-figure strong.bad { color: var(--negative); } .daymove-figure strong.plain { color: var(--text); } /* A quote taken before the last close is right to show and wrong to reason from, so it is marked rather than hidden. */ .daymove-stale { color: var(--muted); font-style: italic; } .daymove-actions { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; } /* The way back to the stock itself, under the cards. Marked as a link rather than left to inherit body text: it sits below a pair of bordered boxes and a run of explanatory grey, and an unstyled anchor between the two reads as neither. */ .daymove-actions a { color: var(--accent); text-decoration: none; } .daymove-actions a:hover { text-decoration: underline; } /* --- the two cards --------------------------------------------------------- One card per question - why it moved, and what to do now - side by side under the chosen stock's figures. They are the only two things on this tab that spend anything, and the whole layout is built around one requirement: at the moment of clicking, a reader must be able to tell which call they are buying. So each card is a box with its own border rather than two buttons in a row. A row of buttons under one heading reads as one control with two settings, which is precisely the wrong idea - these are two different calls, of two different lengths, against two different guards, billed separately. `auto-fit` with a floor rather than a fixed two columns: at a narrow width they stack, and a card squeezed to 180px would wrap its verdict pill onto four lines and lose exactly the at-a-glance reading it exists for. */ .daymove-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Two named rows - the question, then the runs already on file for it - and each stack spans both as a subgrid. That is what makes the four cards in a row end on one line and the receipts under them start and end on another, however differently long the four blurbs and the four headlines are. Left to itself each column would size its own two boxes and the row would read as four separate panels that happen to sit side by side. */ grid-template-rows: auto auto; gap: 12px; margin: 12px 0 4px; } .daymove-card { /* `--card-edge` rather than `--line`, for the reason the widget cards use it: two boxes at full strength beside a picker and a strip of figures draw more furniture than content. It is themed - see the token. */ border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .daymove-card > p { margin: 0; } /* The question and the button that buys an answer to it, on one line. The trigger is at the top right of every card rather than at the foot of it: the foot of a card is no longer the foot of anything now that the runs on file hang underneath, and a control buried in the middle of a column is one a reader has to hunt for. Four triggers in four identical corners is the thing that can be found without reading. */ .daymove-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } /* Never squeezed by a long question - the title wraps instead, which is the right half to spend the width on. The four buttons line up with each other because they are all in this corner and every card in a row is one height - see `.daymove-stack`. It used to be `margin-top: auto` pushing each to the foot, which lined them up for the same reason and put them where nothing else was. */ .daymove-card-head .btn { flex: none; } .daymove-card-title { margin: 0; font-size: var(--fs-base); } /* The question itself, in the reader's own words - "Why did it fall?", "Is today a moment to add more?". Body weight rather than grey: it is the label for the button below it, not a footnote. */ .daymove-card-ask { color: var(--text); } /* What is already on file. A baseline row, because it mixes a pill with a run of small grey text and the two would otherwise sit on different lines. */ .daymove-card-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 22px; } .daymove-card-when { color: var(--muted); font-size: var(--fs-xs); } .daymove-card-none { color: var(--muted); font-size: var(--fs-sm); } /* A report on file that explains an earlier session, said on the card as well as over the report - the button beside this line is the one that buys today's, and that is the whole reason it is worth repeating. */ .daymove-card-stale { color: var(--negative); font-size: var(--fs-xs); } /* The foot-of-the-card button. The four cards on Eval Profile do not use it any more - their triggers are at the top right, in `.daymove-card-head` - but the Scoreboard and Universe both borrow `.daymove-card` whole and still put their one button at the bottom, which is right for them: each is a single card with nothing under it, so the foot of the card is still the foot of something. Kept here rather than moved to either of them, because it is the shared card's own rule and two copies is how they would drift. */ .daymove-card-act { margin-top: auto; } /* Nothing else in the application disables a `.btn`, so without this the only difference between "asking" and "press me" would be the word on it - and the spinner is a paragraph away from where the click lands. */ .daymove-card .btn[disabled] { opacity: .45; pointer-events: none; } .daymove-card-blurb { font-size: var(--fs-xs); } /* The wait and the failure, inside the card that owns them. Either card can be working while the other is idle, and a message under the pair would not say which call it belonged to. */ .daymove-card .hint, .daymove-card .advice-warn { margin: 0; font-size: var(--fs-xs); } /* The card's own icon, on the title and again on the button. Three cards now, three different calls, and the picture is what tells them apart before a word is read - so it is sized to the text beside it and given the muted colour on the heading (where it is a marker) and the button's own colour on the control (where it is part of the label). */ .daymove-card-title .icon { vertical-align: -2px; margin-right: 6px; color: var(--muted); } .daymove-card-head .btn .icon, .daymove-card-act .btn .icon { vertical-align: -3px; margin-right: 5px; } /* Each card's identity hue, on the rule down its left edge. The standing rule about colour, applied to the one place on this page where three controls that look identical buy three different things: the reader learns the position of the card and the colour together, and the colour is what survives a redraw that moved them. `--accent` for the move question, positive for the one that asks whether to add and warn for the one that asks whether to sell - which is the reading of the pair, not a judgement about the answer either returns. */ .daymove-card-move { border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); } .daymove-card-advice { border-left: 2px solid color-mix(in srgb, var(--positive) 55%, transparent); } .daymove-card-exit { border-left: 2px solid color-mix(in srgb, var(--warn) 55%, transparent); } /* The adversary gets the negative hue outright rather than a warning tint, and it is the one card whose colour is a statement about the question rather than about the answer: the other three can come back saying the stock is fine, and this one is only ever asked to find what is wrong. */ .daymove-card-premortem { border-left: 2px solid color-mix(in srgb, var(--negative) 60%, transparent); } /* --- the runs under a card ------------------------------------------------ Every answer already on file for one question, in boxes directly beneath the card that bought it. They were a table at the foot of the panel until now - the Reports tab's own, narrowed to this stock - and the arrangement asked a reader looking at "How is the stock?" to scroll past four cards and a due strip and then read a Question column to work out which rows were the ones they wanted. Four questions each heading their own answers says that with no column and no scroll. The table stays on the Reports tab, where the subject really is a list across every stock and every question. The STACK is the grid item, not the card: `.daymove-cards` is an auto-fit grid, and a card and its runs as two separate items would let the runs wrap into the next question's column - which is the one mistake this layout must not make, because a bear case listed under "How is the stock?" is a wrong answer drawn convincingly. The stack takes the PARENT's two rows rather than making its own, which is what makes every card in a row one height and every run block under them another - see the rule itself below. */ .daymove-stack { display: grid; /* The stack takes the parent's two rows rather than making its own, so every card in a row is the height of the tallest card and every run block is the height of the tallest run block. Without it the leftover height went to whichever column had the fewest answers on file, and the four boxes ended at four different places. */ grid-template-rows: subgrid; grid-row: span 2; } /* Where subgrid is not understood the stack still has to be a column of two, and the row simply loses its shared baseline - which is a worse-looking panel, not a broken one. */ @supports not (grid-template-rows: subgrid) { .daymove-stack { grid-template-rows: 1fr auto; gap: 8px; } } /* Fills the row the subgrid gave it, and hands that height on to the runs inside - one answer stretches to the block, two share it. A box that sized itself to its own headline is what made the four columns end unevenly. */ .dmlog-runs { display: flex; flex-direction: column; gap: 6px; } /* Reading, rather than nothing on file. The two are different sentences and the card's own state line only says the second - see `runCards`. */ .dmlog-runs-none { margin: 0; font-size: var(--fs-xs); } /* One run. Quieter than the card above it - no border on three sides, a flat inset panel - because the card is the control and these are its receipts: a second box at the same weight directly underneath would read as a second thing to press. The left edge is the exception, and carries the same tone rail a row of the log does. */ .dmlog-run { display: flex; flex-direction: column; /* Grows into whatever height the row's tallest run block claimed - one answer fills the block, two share it. Without it a box sized itself to its own headline and the four columns ended in four different places. */ flex: 1 1 auto; gap: 3px; padding: 6px 10px 7px; border-radius: var(--radius-sm); border-left: 2px solid transparent; background: var(--panel-2); cursor: pointer; } .dmlog-run:hover { background: var(--row-hover); } /* The rail, painted from `data-dmlog-tone` for the reason the table's is: `.good` and `.bad` are worn by a dozen unrelated things in this stylesheet, and a tinted receipt is not something any of them should be able to turn on. `plain` gets neither, which is what makes the marked ones mean something. */ .dmlog-run[data-dmlog-tone="good"] { border-left-color: color-mix(in srgb, var(--positive) 55%, transparent); background: color-mix(in srgb, var(--positive) 5%, transparent); } .dmlog-run[data-dmlog-tone="bad"] { border-left-color: color-mix(in srgb, var(--negative) 55%, transparent); background: color-mix(in srgb, var(--negative) 5%, transparent); } /* Hover still wins, stated rather than relied on - the tone rules above tie with `.dmlog-run:hover` on specificity, and a tie goes to source order. */ .dmlog-run[data-dmlog-tone]:hover { background: var(--row-hover); } /* When it was asked, what it is anchored to, who paid and what it cost - one line of small grey, because none of it is the answer. The cost is pushed to the far end, where the reader's eye already goes for money on this page. */ .dmlog-run-when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0; color: var(--muted); font-size: var(--fs-xs); } .dmlog-run-stamp { font-variant-numeric: tabular-nums; white-space: nowrap; } .dmlog-run-about { font-variant-numeric: tabular-nums; } /* Both are `display: block` on a table row, where they sit under the figure they qualify. Here the whole strip is one line, so they go back inline. */ .dmlog-run .dmlog-c-session, .dmlog-run .dmlog-today { display: inline; /* And the space `display: block` used to give them: without it "9 days ago" and "due a refresh" run together into one word. */ margin-left: 5px; } .dmlog-run .advice-asked-by { display: inline; } /* The cost, and the chevron after it. `margin-left: auto` on the cost is what splits the strip into a left half about the question and a right half about the bill. */ .dmlog-run-cost { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; } .dmlog-run-when > .icon { flex: none; color: var(--muted); align-self: center; } /* The chevron says the box opens. Faint until the pointer is on it, for the reason the table's is: an arrow at full strength on five boxes is five arrows competing with the answers beside them. */ .dmlog-run > .dmlog-run-when > .icon { opacity: .45; } .dmlog-run:hover > .dmlog-run-when > .icon { opacity: 1; color: var(--accent); } /* What it concluded - the badge, and whatever the kind hangs beside it. The same marks the log's Answer column draws, from the same function. */ .dmlog-run-answer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0; } /* The one-sentence answer. Clamped to three lines rather than left to run: five receipts each three sentences long would push the next question's card off the screen, and the whole answer is one click away in the popup. */ .dmlog-run-headline { margin: 0; font-size: var(--fs-sm); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* How many mechanisms are on file, beside the severity pill. Tabular so a reader scanning four cards is comparing digits rather than glyph widths. */ .premortem-count { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } /* --- the exit stance ---------------------------------------------------- The three things the exit-and-trim answer draws that no other answer here has: the weight band with today's weight on it, the tripwire table, and the strip of what the stock has been valued at before. Scoped on their own prefix rather than added to `.advice-*`, because the Add-More verdict and the day-move report both draw inside `.advice-verdict` too and neither has any of these. See `frontend/js/exitadvice.js`. */ /* Two tones the pill has never needed before. `.pill` already carries `ok` and `bad`; the thesis state has four values across three colours, and the middle one - STRAINED - is genuinely neither. Declared beside the pill's own tones rather than as a local class, so a pill reads the same wherever it is drawn. */ .pill.good { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 50%, transparent); } .pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .pill.plain { color: var(--muted); } .exit-band { margin: 6px 0; } .exit-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; } .exit-band-range { font-weight: 600; font-variant-numeric: tabular-nums; } /* The bar is the whole point of drawing a band rather than printing two numbers: above the ceiling and below the floor are two different actions, and a reader should be able to see which one they are in without arithmetic. `position: relative` on the track, absolute on the two marks - so the span and the pin are placed by percentage against the same origin. */ .exit-band-bar { position: relative; height: 8px; margin: 0; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--card-edge); overflow: hidden; } .exit-band-span { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--positive) 28%, transparent); } /* Today's weight, as a pin rather than a fill: it is a point on the scale, and a bar growing from zero would read as a quantity to compare against the band rather than as a position inside it. Two pixels wide and full height so it stays visible where it lands inside the shaded span. */ .exit-band-now { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--muted); } .exit-band-now.good { background: var(--positive); } .exit-band-now.bad { background: var(--negative); } .exit-band-now.warn { background: var(--warn); } /* The tripwires. It rides on `.advice-factors` for its frame and adds only the three column widths, for the reason the factor table is shared at all: two tables of evidence under one answer must not be two designs. */ .exit-wires .exit-wire-level { white-space: nowrap; font-variant-numeric: tabular-nums; } .exit-wires .exit-wire-level .icon { vertical-align: -3px; margin-right: 4px; } .exit-wires .exit-wire-col { white-space: nowrap; } .exit-wires .exit-wire-col code { display: inline-block; margin-right: 6px; font-size: var(--fs-xs); } /* What it has been valued at. A scrolling strip rather than a wrapping one: the readings are in time order and a wrap would put the oldest under the newest, which reads as two series. `overflow-x` here rather than on the block, so the sentence under it stays put while the numbers scroll. */ .exit-val-strip { display: flex; gap: 10px; margin: 0 0 4px; overflow-x: auto; padding-bottom: 4px; } .exit-val-point { display: flex; flex-direction: column; white-space: nowrap; } .exit-val-point b { font-variant-numeric: tabular-nums; } .exit-val-point span { color: var(--muted); font-size: var(--fs-xs); } /* The line under the two pills when the stance and the thesis disagree. Given the accent rather than a warning colour: it is the most interesting thing on the answer, not a fault in it. */ .exit-split { border-left: 2px solid var(--accent); padding-left: 8px; } /* --- the pre-mortem ------------------------------------------------------ The adversary's panel, and it is drawn deliberately unlike the two stance answers beside it. No factor table, no weight band, no case-for column - because the schema behind it has none of those, and a balanced-looking frame around a one-sided finding would hand the balance back in the layout after the prompt had spent a paragraph refusing to give it. */ /* Said in words on the panel and reinforced here by being the quietest line on it: the severity is a finding, not a stance. A reader who has learnt the two cards to the left will read a red pill as SELL, and this sentence is the only thing standing between them and that. Accent rail rather than a warning colour - it is a clarification, not a fault. */ .premortem-not-a-stance { border-left: 2px solid var(--accent); padding-left: 8px; margin: 4px 0 8px; } /* Whether the answer actually reached the web. Its own line above the finding rather than a footnote under it, because it changes what the finding is worth. The good case is a hint; the bad case renders as `.advice-warn` and inherits its colour from there. */ .premortem-reach .icon { vertical-align: -3px; margin-right: 4px; } /* --- the kill paths, which are the body of the answer ------------------- */ .premortem-paths { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; } .premortem-path { border-left: 2px solid color-mix(in srgb, var(--negative) 45%, transparent); padding: 2px 0 2px 10px; } /* A path with nothing cited behind it. Dashed rather than a different colour: it is not a *worse* mechanism, it is one with no evidence under it, and the broken line says provisional in a way a red border would say dangerous. */ .premortem-path.unevidenced { border-left-style: dashed; border-left-color: color-mix(in srgb, var(--muted) 60%, transparent); } .premortem-path-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 4px; } /* The ordinal. The model returns these most-dangerous-first and that order is part of the answer, so it is numbered rather than bulleted - a reader quoting "the second kill path" has to be able to point at one. */ .premortem-path-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--negative) 18%, transparent); color: var(--negative); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; font-weight: 600; } .premortem-path-head .advice-point { flex: 1 1 260px; } .premortem-damage { margin: 0 0 4px; } .premortem-damage .icon, .premortem-path .advice-weight-why .icon { vertical-align: -3px; margin-right: 4px; } /* What is already visible behind the mechanism. Indented under it and marked with the same rule the evidence lists elsewhere use, so the eye reads it as support for the line above rather than as a second list of claims. */ .premortem-evidence { list-style: disc; margin: 0 0 4px; padding-left: 18px; color: var(--muted); font-size: var(--fs-sm); } .premortem-evidence li { margin: 2px 0; } /* The sentence in place of that list when there is nothing behind the path. It takes the warning colour because the absence is the finding. */ .premortem-nothing { margin: 0 0 4px; font-size: var(--fs-xs); } /* What is already wrong, as opposed to what could go wrong. Rides on `.advice-points.bad` for its frame and adds only the room the kind pill needs on the same line as the finding. */ .premortem-visible li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .premortem-visible .advice-point { flex: 1 1 240px; } .premortem-visible .advice-evidence { flex: 1 1 100%; } /* The receipt. Same treatment the why-it-moved report gives its citations - one line per page, the searches as inline code under them - because it is the same object produced by the same tool and two drawings of it would be two designs for one thing. */ .premortem-cites { margin: 0 0 6px; } .premortem-searches code { display: inline-block; margin: 0 6px 4px 0; font-size: var(--fs-xs); } /* --- the due strip ------------------------------------------------------- Under the four cards and ruled off from them, because it is the one block on this panel that is about the *book* rather than about the selected stock - and because what it offers is a place to click next, which belongs after the thing being clicked rather than above it. Deliberately not styled as a call to action. It is a suggestion of where the next spend is worth making, and a strip of primary buttons would read as a queue somebody is meant to work through - which is exactly the reading that would turn a considered feature into forty API calls. */ .premortem-due { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--card-edge); border-left: 2px solid color-mix(in srgb, var(--negative) 60%, transparent); border-radius: var(--radius-sm); background: var(--panel-2); } /* The head is the drawer's own summary, so it is the whole click target rather than a paragraph above one. The browser's disclosure triangle is dropped for the chevron in the markup, exactly as the review drawer does it: the default marker cannot be coloured or aligned with the shield beside it, and two triangles would be worse than one. */ .premortem-due-head { display: flex; align-items: flex-start; gap: 7px; margin: 0; cursor: pointer; font-size: var(--fs-sm); list-style: none; } .premortem-due-head::-webkit-details-marker { display: none; } .premortem-due-caret { display: inline-flex; margin-top: 1px; color: var(--muted); transition: transform 120ms ease; } .premortem-due[open] .premortem-due-caret { transform: rotate(90deg); } .premortem-due-title { flex: 1; } .premortem-due-head .icon { vertical-align: -3px; margin-right: 6px; color: var(--muted); } .premortem-due-head .hint { display: block; margin-top: 2px; font-size: var(--fs-xs); } .premortem-due-none { margin: 10px 0 4px; } .premortem-due-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; /* Capped and scrolled rather than left to run. A real book puts eighty-odd names here, and opening the drawer should not push the actions under it four screens down the page. */ max-height: 300px; overflow-y: auto; } .premortem-due-name { display: flex; flex-direction: column; min-width: 150px; } .premortem-due-name a { font-weight: 600; } .premortem-due-name .advice-evidence { font-size: var(--fs-xs); } /* The one already open. Marked rather than hidden: a reader who arrived at this stock from the strip should be able to see that is where they are. */ .premortem-due-name.here a { color: var(--accent); } .premortem-due-name.here { border-left: 2px solid var(--accent); padding-left: 6px; } /* --- one stock's answers, under the two cards --------------------------- What replaced the report that used to unroll into this panel. Both answers used to be drawn here in full - the why-it-moved report and, ruled off under it, the verdict - which pushed the two paid buttons off the top of the screen and could still only ever show the latest one of each. It is a list now, and the answer opens in a popup: the Reports table with one stock's rows in it. So it wears `.reports-panel`, and that is the whole point. The density, the header marks and the rail down a row's left edge are all scoped on that class one section away (see the note over it); a second set written here would be the copy that drifts, and a reader crossing between the two would be reading two people's work. What is only true here is where it sits: ruled off from the cards above, because those are where money is spent and this is the record of what spending it produced. */ .daymove-reports { margin-top: 18px; border-top: 1px solid var(--card-edge); padding-top: 12px; } /* Empty almost all of the time, and it must take up no room at all when it is - the rule above it would otherwise draw a line under the panel with nothing beneath it. The runs moved into the cards, so what is left in here is a failure line and the popup an opened run draws into; both are usually absent, and `StockReportsSection.markup` returns the empty string rather than a string of newlines so that this selector can actually match. */ .daymove-reports:empty { margin: 0; border-top: 0; padding: 0; } /* The drivers table borrows `.advice-factors` whole; only the first column differs, because a share of one day's move is narrower than a factor weight. */ .daymove-drivers .advice-weight { width: 120px; } /* Links inside a report. They go to pages a model chose, so they are marked as links properly rather than left to look like text - the whole argument for showing the receipt is that a doubting reader can go and read it. */ .daymove-news a, .daymove-cites a, .advice-weight-why a { color: var(--accent); text-decoration: none; } .daymove-news a:hover, .daymove-cites a:hover, .advice-weight-why a:hover { text-decoration: underline; } /* A cited URL can be a hundred characters of query string; the list must wrap inside the panel rather than push it sideways. */ .daymove-cites li { word-break: break-word; } .daymove-searches { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; } .daymove-searches code { background: var(--panel-2); border-radius: var(--radius-xs); padding: 1px 6px; font-size: var(--fs-xs); } .daymove-sourcing { margin: 6px 0 0; } /* --- Review Board: the whole book, read at once -------------------------- The AI page's one section with no picker in it. Everything else on this page is a list of stocks with an answer hung on each; this is one book, one button and one answer. It is laid out as **five anchored sections under a sticky pill bar, with a jump rail down the right edge**, and that is a response to length rather than a taste for chrome. The answer alone is five scores with their reasoning, five actions with their evidence, the funding pairs, a blind spot and the gaps - and under it, always, today's book with however many groupings a forty-name portfolio produces. As one column it was a page you scrolled through hunting; the bar, the anchors and the rail make it one you navigate. Three colour systems meet here and are kept apart on purpose: * the **ticker** is a judgement - healthy / watch it / wrong - and uses the semantic pair, which is --positive (blue), --warn and --negative. Never a green-amber-red traffic light: this app's reader does not separate red from green, which is the whole reason --positive is blue; * the **category badges** are an identity - which bucket - and use the eight --cat-* hues, on the same licence the Fetch-menu group hues have; * the **action cards** are money in or money out, and reuse the semantic pair a third time because that is exactly what they mean. No cell anywhere relies on colour alone: a metric prints its number and the word under it, a badge prints its name and its mark, an action prints its verb. */ .review-panel { padding-top: 2px; } /* --- the floating dock --------------------------------------------------- One navigation where there were two. This was a sticky row of pills across the top and, down the right edge, a second floating rail pointing at the five actions - one horizontal navigation and one vertical one for a single page, each holding a strip of screen the review itself could have used. Sticky against `main`, which is the element that actually scrolls this application (see the rule on `main` near the top of this file). `top: -10px` rather than 0 because `main` carries 10px of padding: at 0 the dock would park ten pixels below the top of the scroll port and let a sliver of content run under the gap. This is the one surface in the application that is genuinely glass, and it earns it rather than wearing it: it is the only thing here with content moving underneath, so a blur behind it says "the page is still going past" in a way an opaque panel cannot. `backdrop-filter` is a progressive enhancement - the browser without it gets a 76% panel over the page ground, which is a slightly translucent card and perfectly legible. The `-webkit-` line comes first, for the browser that shipped the prefix and kept it. */ .review-dock { position: sticky; top: -10px; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 7px; border: 1px solid var(--card-edge); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel) 76%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); /* Lifted off the wash, then rimmed in the accent. The rim is 10% - a hint that the panel is emitting rather than reflecting, not a halo competing with the lit item inside it. */ box-shadow: var(--shadow-md), 0 0 22px color-mix(in srgb, var(--accent) 10%, transparent); /* Taller than the port it sticks in and it would scroll its own bottom off the screen for good. Five sections plus five nested actions is close enough to that on a laptop to be worth the guard. */ max-height: calc(100vh - 24px); overflow-y: auto; } .review-dock-item { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer; } .review-dock-item:hover { background: var(--panel-2); color: var(--text); } /* The section being read. Filled and glowing rather than merely bordered, because a column of six near-identical outlines gives a reader nothing to find themselves by at a glance. */ .review-dock-item.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 26%, transparent); } .review-dock-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .review-dock-item .icon { flex: 0 0 auto; } .review-dock-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The five actions, hanging off the Action Queue item rather than floating on an edge of their own. The rule down their left is what says "inside that", and it is the only piece of hierarchy this dock draws. */ .review-dock-jumps { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 15px; padding-left: 8px; border-left: 1px solid var(--line-soft); } .review-dock-jump { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: pointer; } .review-dock-jump:hover { background: var(--panel-2); color: var(--text); } .review-dock-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* The verb's own colour on the mark alone, not on the label: a column of five coloured sentences is a column nobody can scan, and the mark is enough to tell a trim from a buy at this size. */ .review-dock-jump.good svg { color: var(--positive); } .review-dock-jump.bad svg { color: var(--negative); } .review-dock-jump.warn svg { color: var(--warn); } .review-dock-jump span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- the header and its ticker ------------------------------------------- */ .review-head { margin: 10px 0 4px; } .review-headline { margin: 0; font-size: var(--fs-lg); line-height: 1.5; } .review-byline { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-xs); } /* Five cards, one row, equal width. A grid rather than a flex row so a cell is sized by the row and not by its own content - read as a row of comparable scores, cells sized by their text would make the dimension with the longest reasoning look like the important one. The floor is 240px rather than the 160 it was, because a card holds a sentence now: the score and the reason it is that score used to be two screens apart, and 160px of it would have been six words per line. `auto-fit` still wraps them on a narrow window rather than squeezing five columns of prose into a phone. */ .review-ticker { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 7px; /* Each cell is as tall as its own disclosure now, not as tall as the tallest note in the row. That is the whole compaction: five shut cards are five two-line summaries, and one open one grows on its own. */ align-items: start; } /* A `

` rather than a div, which is what makes the matrix compact: the scannable half - mark, name, meter, figure, word - is the summary and is always drawn, and the model's sentence is the body. Native, so it is keyboard-reachable, announced by a screen reader and open on print without a line of script, exactly as the long-tail drawer below is. What is open is the panel's own state rather than the markup's, because this markup is rebuilt on every refresh tick - see `ReviewSection.dims`. */ .review-metric { padding: 7px 9px; border: 1px solid var(--card-edge); border-left-width: 3px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-2) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: inherit; font: inherit; text-align: left; /* The glow. A tinted ring rather than a drop shadow, so it reads on both themes without a second value - and at 22% it is a hint at the edge of the card rather than a highlight competing with the number inside it. It is the FIFTH channel: the score, the word, the meter's own length and the left edge all say the same thing without it, which is what makes it safe to be a colour. */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric-tone, transparent) 22%, transparent); /* After the `border` shorthand above, which would otherwise reset it. The tone is one custom property read by the edge, the glow, the figure and the meter - four readers, one value, and no way for the glow to disagree with the number it surrounds. */ border-left-color: var(--metric-tone); } .review-metric[open] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric-tone, transparent) 30%, transparent), var(--shadow-sm); } /* One custom property per tone, set once and read by the edge, the glow and the figure. Three rules instead of nine, and no way for the glow to disagree with the number it surrounds. */ .review-metric.good { --metric-tone: var(--positive); } .review-metric.warn { --metric-tone: var(--warn); } .review-metric.bad { --metric-tone: var(--negative); } .review-metric.plain { --metric-tone: var(--line); } /* Two rows in one grid: the name and the figure across the top, the meter and the word beneath. A flex row would let the longest dimension name push the score out of line, and the score is the column the eye runs down. */ .review-metric-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 3px 6px; cursor: pointer; list-style: none; } .review-metric-top::-webkit-details-marker { display: none; } .review-metric-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .review-metric-mark { display: inline-flex; color: var(--metric-tone, var(--muted)); } /* The caret, which is the only thing on the summary saying it is a control. It turns rather than swaps, so the card that is open is legible in a row of six at a glance. */ .review-metric-caret { display: inline-flex; color: var(--muted); transition: transform .12s ease; } .review-metric[open] .review-metric-caret { transform: rotate(90deg); } /* Ten steps of the score, as a second reading of the same number and never a replacement for it. The figure is printed beside it; this is what makes five scores comparable down a column without reading one of them. */ .review-metric-meter { grid-column: 1 / 3; height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--metric-tone, var(--line)) 20%, transparent); overflow: hidden; } .review-metric-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--metric-tone, var(--line)); box-shadow: 0 0 9px color-mix(in srgb, var(--metric-tone, transparent) 65%, transparent); } .review-metric-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } /* Monospaced, like every other figure on this board. A score is read against the four above and below it, and a proportional 8 beside a proportional 3 does not line up in the column the eye is running down. */ .review-metric-score { justify-self: end; font-family: var(--mono); font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--metric-tone); } /* The denominator, held down so the numerator is what the eye takes. A score out of ten printed at one size is a two-digit number to be read; printed like this it is a figure with a scale beside it. */ .review-metric-of { font-size: var(--fs-sm); color: var(--muted); } .review-metric-word { grid-column: 3 / 5; justify-self: end; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--metric-tone); } .review-metric.plain .review-metric-score, .review-metric.plain .review-metric-word { color: var(--muted); } /* The model's own reasoning, in the card with the number it explains. This is the whole point of the card being a card: a score with no justification under it is the unauditable thing every other scorecard in this application refuses to be, and it used to live two screens down under a heading of its own. Not clamped to a line count, and not hidden either - it is one press away and the cards that failed arrive already open. A clamp would hide the end of exactly the sentence a reader opened this card for. */ .review-metric-note { margin: 6px 0 1px; padding-top: 6px; border-top: 1px dashed var(--line-soft); color: var(--muted); font-size: var(--fs-base); line-height: 1.5; } /* Every card's reasoning at once, parked at the end of the section heading. It is not the way in - the failures open themselves - it is the way to read the four that passed without pressing four times. */ .review-dims { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel); color: var(--muted); font: inherit; font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; cursor: pointer; } .review-dims:hover { border-color: var(--accent); color: var(--accent); } .review-dims:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .review-dims.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* --- an anchored section -------------------------------------------------- */ .review-section { margin: 20px 0; scroll-margin-top: 60px; } .review-section-title, .review-sub { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .review-sub { margin-top: 18px; } /* The three sections that describe the book fold shut - and arrive that way, so the view opens on three headings and the Action Queue rather than on three screens of diagnosis. The two that say what to do never fold; see `FOLDABLE` in review.js. A native

again, for the third time on this page and for the same reasons: keyboard-reachable, announced as a disclosure, and open on print however it was left on screen. The heading is the whole hit area rather than the caret alone. It is one line of uppercase muted text with a chevron at its head, and a control that small is a control that gets missed. Since a folded heading is now the state a reader meets, it also carries the hover and focus treatment of something meant to be pressed. */ details.review-section > summary.review-section-title { cursor: pointer; /* The browser's own triangle, dropped for the chevron in the markup - the default marker cannot be coloured or lined up with the section's own icon, and two disclosure marks on one row is one too many. */ list-style: none; } details.review-section > summary.review-section-title::-webkit-details-marker { display: none; } details.review-section > summary.review-section-title:hover { color: var(--text); } details.review-section > summary.review-section-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* Turned rather than swapped, so a folded section is legible in a column of headings at a glance - the same gesture the long-tail drawer and the rubric cards make. */ .review-section-caret { display: inline-flex; color: var(--muted); transition: transform 120ms ease; } details.review-section[open] > summary .review-section-caret { transform: rotate(90deg); } /* A shut section is its heading and nothing else, so the 10px reserved for the body it is no longer drawing would read as a gap somebody forgot to close - and with all three arriving shut, it would read as three of them. */ details.review-section:not([open]) > summary.review-section-title { margin-bottom: 0; } /* The one badge on the board that says a figure is being recomputed rather than recalled. Every other section under it is a stored answer; the Pulse is arithmetic over today's holdings, redone on every draw. The dot pulses because a still dot is a status light and a moving one is a heartbeat, and the claim is the second. It is never the only channel - the badge prints the word "Live" beside it - which is what makes it safe to stop dead under `prefers-reduced-motion` below. */ .review-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 1px 8px 1px 7px; border: 1px solid color-mix(in srgb, var(--positive) 45%, transparent); border-radius: var(--radius-pill); background: var(--positive-soft); color: var(--positive); font-size: var(--fs-xs); letter-spacing: 0.06em; } .review-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); animation: review-pulse 2.4s ease-out infinite; } @keyframes review-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--positive) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .review-live-dot { animation: none; } .review-metric-caret { transition: none; } .review-section-caret { transition: none; } } .review-blind { margin: 0; font-size: var(--fs-md); line-height: 1.6; } /* --- the figures a free section leads with -------------------------------- */ /* Labelled cells rather than a run of dot-separated text: these are read against each other - top 1 against top 5 against top 10 - and a sentence makes that something the eye has to assemble. */ .review-figures { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; } .review-figure { display: flex; flex-direction: column; gap: 1px; } .review-figure-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } /* Monospaced, and every figure on this board with it: the value against the invested, the top-5 against the top-10, a cluster's weight against the one under it. These are read down a column rather than in a sentence, and a proportional font is the thing that stops them lining up. */ .review-figure-value { font-family: var(--mono); font-size: var(--fs-md); font-variant-numeric: tabular-nums; } .review-figure.good .review-figure-value { color: var(--positive); } .review-figure.bad .review-figure-value { color: var(--negative); } /* Holdings with no live quote. --warn rather than --negative: nothing is wrong, but every percentage on this page is a share of what could be priced and a reader should know how much that leaves out. */ .review-figure.warn .review-figure-value { color: var(--warn); } .review-conc { padding-top: 4px; border-top: 1px dashed var(--line-soft); } /* --- the cluster map ------------------------------------------------------ Category cards rather than list rows, because this list is scanned rather than read: which is the big one, and what kind of thing is it. The hue and the mark answer the second before the eye reaches the words. */ .review-clusters { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .review-cluster { border: 1px solid var(--card-edge); border-left: 3px solid var(--cat, var(--line)); border-radius: var(--radius-sm); /* Lifted off the wash rather than painted onto it, on the same argument the dock carries: a translucent panel over a gradient is a card with something behind it, which is what the depth here is for. The browser without `backdrop-filter` gets an 88% panel, which is a card. */ background: color-mix(in srgb, var(--panel-2) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 9px 11px; } .review-cluster-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; } .review-cluster-mark { display: inline-flex; color: var(--cat, var(--muted)); } .review-cluster-name { font-size: var(--fs-md); } /* The pill saying where the grouping came from - the classifier's sector, one of the rubric's four flags, or the reader's own column. Tinted from the category's own hue rather than given a colour of its own, so a card is one colour and not two. */ .review-cluster-kind { padding: 0 7px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--cat, var(--line)) 45%, transparent); background: color-mix(in srgb, var(--cat, var(--line)) 12%, transparent); color: var(--cat, var(--muted)); font-size: var(--fs-xs); white-space: nowrap; } /* Pushed right, because the weights are the column the eye runs down - "which of these is the big one" is the only question asked of this list, and a percentage after a variable-length name cannot be scanned. */ .review-cluster-weight { font-family: var(--mono); margin-left: auto; font-size: var(--fs-md); font-variant-numeric: tabular-nums; } .review-cluster-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } /* The eight identity hues, as one custom property each. Set on the card and read by its edge, its mark, its kind pill and - in the drawer below - its row, so a category is one colour wherever it is drawn. */ .hue-indigo { --cat: var(--cat-indigo); } .hue-emerald { --cat: var(--cat-emerald); } .hue-amber { --cat: var(--cat-amber); } .hue-rose { --cat: var(--cat-rose); } .hue-sky { --cat: var(--cat-sky); } .hue-violet { --cat: var(--cat-violet); } .hue-teal { --cat: var(--cat-teal); } .hue-slate { --cat: var(--cat-slate); } /* --- the long tail, behind a drawer -------------------------------------- Forty-odd groupings holding one name each. Not nothing - "which sectors am I in with one name" is a fair question - but not the finding either, so they are one line until asked for. A native

, which is keyboard-reachable and screen-reader-announced without a line of script. */ .review-minor { margin-top: 12px; border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); } .review-minor-summary { display: flex; align-items: center; gap: 7px; padding: 8px 11px; cursor: pointer; font-size: var(--fs-md); /* The browser's own disclosure triangle, dropped for the chevron in the markup: the default marker cannot be coloured or aligned with the row's other icons, and two triangles would be worse than one. */ list-style: none; } .review-minor-summary::-webkit-details-marker { display: none; } .review-minor-caret { display: inline-flex; color: var(--muted); transition: transform 120ms ease; } .review-minor[open] .review-minor-caret { transform: rotate(90deg); } .review-minor-title { font-size: var(--fs-md); } .review-minor-hint { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); } .review-minor-list { list-style: none; margin: 0; padding: 0 11px 10px; /* Capped and scrolled rather than left to run: opening a drawer of forty rows should not push the Action Queue three screens down the page. The cap is about eight rows, which is enough to see that it is a list and enough to scan without leaving the section. */ max-height: 260px; overflow-y: auto; } .review-minor-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-top: 1px solid var(--line-soft); } .review-minor-row:first-child { border-top: 0; } .review-minor-mark { display: inline-flex; color: var(--cat, var(--muted)); } .review-minor-name { font-size: var(--fs-base); } .review-minor-weight { margin-left: auto; font-family: var(--mono); font-size: var(--fs-base); font-variant-numeric: tabular-nums; color: var(--muted); } /* The scores are the first anchored section rather than a strip in the header, because once each card carries its own reasoning the row IS the Conviction Matrix - the separate list of notes it used to point at is gone. It keeps the section's own top margin at zero: it sits directly under the byline and a heading pushed away from what it heads reads as belonging to neither. */ .review-scores { margin-top: 14px; } /* --- the detail layout: the dock, and the review beside it ---------------- The dock leads rather than trails, because it is a navigation and a navigation on the right of what it navigates is one a reader finds after the thing they were looking for. 208px is the width at which "Conviction Matrix" fits on one line, which is the whole sizing argument: an item that ellipsises is an item you have to hover to read. `minmax(0, 1fr)` on the flow rather than `1fr`, because a grid track's implicit minimum is its content and one long unbroken evidence line would otherwise widen the column past the panel instead of wrapping inside it. The wash is what makes the glass in front of it glass. Two very faint pools - accent at the top left, the healthy hue at the top right - so the dock and the cards have something behind them to blur and lift off. Both are under a tenth of the token's own strength: at any more it is a coloured page, and this is supposed to read as depth rather than as decoration. It follows the theme's own two colours, so a custom palette washes in its own hues rather than in somebody else's blue. */ .review-detail { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 18px; align-items: start; padding: 10px; margin: 8px -10px 0; border-radius: var(--radius-lg); background: radial-gradient(760px 300px at 6% -4%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%), radial-gradient(620px 280px at 96% 2%, color-mix(in srgb, var(--positive) 7%, transparent), transparent 70%); } /* Nothing to put in the first track - a book with one section on it has nothing to navigate. The track is dropped rather than left empty, because a grid column is reserved whether or not anything lands in it and 208px of held space plus its gap is a visible margin down the side of the page. */ .review-detail.solo { grid-template-columns: minmax(0, 1fr); } /* --- the five actions ----------------------------------------------------- */ /* One column, not a grid. These are ranked - the model is asked for them most valuable first - and side-by-side cards would throw that ordering away. */ .review-actions { display: flex; flex-direction: column; gap: 10px; } .review-action { --tint: var(--line); border: 1px solid var(--card-edge); border-left: 3px solid var(--tint); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-2) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 10px 12px; scroll-margin-top: 60px; /* The verb's own colour bled in from the edge it is already drawn on. Inset and one-sided, so it reads as that border glowing rather than as a second border: the card is still a card, and the tone is still saying only what the left edge, the verb and its mark already say. */ box-shadow: inset 14px 0 22px -20px var(--tint), var(--shadow-sm); } /* Colour follows money, not sentiment: in is positive, out is negative, and the three that move nothing today stay quiet. `warn` is SWITCH, which is both at once and should read as one decision rather than two. Held in `--tint` rather than set straight on the border, because the board's denser card washes the same colour across its own left edge as a gradient and two spellings of one tone is how they drift apart. */ .review-action.good { --tint: var(--positive); } .review-action.bad { --tint: var(--negative); } .review-action.warn { --tint: var(--warn); } .review-action.plain { --tint: var(--line); } .review-action-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } /* The tick-box that puts a card in the batch, first thing in the header and ahead of the rank: it is the one control on a board card that is pressed while SCANNING rather than after reading, so it sits where the eye enters the card. Board cards only - Detail draws no batch. */ .review-tick { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border-radius: var(--radius-xs); cursor: pointer; } .review-tick:hover { background: var(--accent-soft); } .review-tick input { margin: 0; cursor: pointer; } /* A picked card is tellable from three columns away, because the batch is checked by looking at the board rather than by trusting the count: the accent ring says "this one goes" without touching the tone down the left edge, which is still saying what the action IS. */ .review-action.picked { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 14px 0 22px -20px var(--tint), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-sm); } /* The rank, drawn rather than implied. A numbered list would put the number outside the card and lose it against the border; here it is the first thing inside the card, which is where the eye lands. */ .review-action-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent); background: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; } /* `plain` is the one tone the badge cannot borrow as text: `--line` is a hairline colour and a numeral drawn in it is unreadable. */ .review-action.plain .review-action-rank { color: var(--muted); } .review-action-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; letter-spacing: 0.04em; font-size: var(--fs-md); } .review-action-name.good { color: var(--positive); } .review-action-name.bad { color: var(--negative); } .review-action-name.warn { color: var(--warn); } .review-action-name.plain { color: var(--muted); } /* How urgent an action is, as a pill beside the verb. Urgency is a fourth scale rather than a judgement of the stock, so it wears its own classes - but the ladder still avoids the red-green pair: red, amber, blue, slate, worst to mildest, and every pill prints its own word beside the mark. */ .review-severity { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--sev, var(--muted)) 45%, transparent); background: color-mix(in srgb, var(--sev, var(--muted)) 12%, transparent); color: var(--sev, var(--muted)); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; } .review-severity.critical { --sev: var(--negative); } .review-severity.high { --sev: var(--warn); } .review-severity.medium { --sev: var(--cat-sky); } .review-severity.low { --sev: var(--cat-slate); } /* Pushed right, like the cluster weight and for the same reason: "how much" is the column the eye runs down across five cards. On the board the fold over the evidence rides in the same group, so the right end of every header is one place rather than two. */ .review-action-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .review-action-size { color: var(--muted); font-family: var(--mono); font-size: var(--fs-base); } /* The fold: a shield and a count. Lit rather than merely hovered when it is open, because a card showing its proof has to be tellable from one that is not at a glance down a column of thirty. */ .review-checks { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; cursor: pointer; } .review-checks .icon { color: var(--cat-teal); } .review-checks:hover { border-color: var(--accent); color: var(--accent); } .review-checks:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .review-checks.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent); } .review-action-reason { margin: 8px 0 0; font-size: var(--fs-md); line-height: 1.55; } /* One figure per line, never a paragraph. This list is the whole defence against the generic-private-banker answer - each line is meant to be checked against the book above it, and a run-on sentence makes that impossible. */ .review-evidence { margin: 7px 0 0; padding-left: 18px; } .review-evidence li { margin-bottom: 3px; color: var(--muted); font-size: var(--fs-base); line-height: 1.5; } /* --- the same card, at board density -------------------------------------- Thirty of these stacked is what the Actions view is, and at Detail's density that is a page nobody reaches the bottom of. Every squeeze here is on the furniture rather than on the words: less padding, a tighter footer, and the tone washed across the left of the card as a gradient so a row of them is readable as colour before it is read as text. */ /* A column, so the footer can be pinned to the bottom of it - see the track rule below. */ .review-action.compact { display: flex; flex-direction: column; padding: 7px 10px; background: linear-gradient(100deg, color-mix(in srgb, var(--tint) 10%, transparent) 0%, transparent 40%), var(--panel-2); } .review-action.compact .review-action-reason { margin-top: 5px; font-size: var(--fs-base); } .review-action.compact .review-evidence { margin-top: 5px; } .review-action.compact .review-evidence li { margin-bottom: 2px; } /* **The decision chips sit on the floor of the card, however tall it is.** The band is a grid and a grid row is as tall as its tallest card, so a card with three lines of evidence beside one with six had its chip row floating in the middle of its own box - three footers at three heights across one row, which is a set of controls that has to be found rather than one that is always in the same place. `margin-top: auto` in a column gives the footer the slack, so the empty space falls where nothing is drawn and every Open/Acked/Done/Dropped on a row lines up. The 7px that was this margin moves into the padding, so the distance from the last line of text to the chips is what it always was on a card with no slack to give - what changes is where the dashed rule sits, and the rule belongs to the footer rather than to the text above it. */ .review-action.compact .review-action-track { margin-top: auto; padding-top: 13px; } .review-action.compact .review-split { margin-top: 6px; } .review-action.compact .review-split-leg { padding: 5px 8px; } /* --- the split panel: what leaves, what arrives --------------------------- The shape a SWITCH needs and a row of chips could not give it. The schema orders the two names - the one being sold first - and side by side the layout says which is which before a word is read. `auto` on the arrow column so the two legs are equal halves of whatever is left, which is what makes them read as a comparison rather than as a list of two. The same markup carries the funding pairs, because they are the same object: something sold, something bought, a reason underneath. Two shapes for one idea would be a reader learning it twice. */ .review-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; margin-top: 9px; } .review-split-leg { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel); } .review-split-leg.out { border-top: 2px solid var(--negative); } .review-split-leg.into { border-top: 2px solid var(--positive); } .review-split-role { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; } .review-split-leg.out .review-split-role { color: var(--negative); } .review-split-leg.into .review-split-role { color: var(--positive); } .review-split-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-md); line-height: 1.4; } .review-split-arrow { display: flex; align-items: center; color: var(--muted); } .review-pairs { display: flex; flex-direction: column; gap: 10px; } .review-pair { border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); padding: 4px 12px 10px; } .review-pair .advice-evidence { margin-top: 7px; } /* --- a stock, wherever it is named --------------------------------------- Clickable everywhere on this board, because the reader's next question is always about one of them and leaving them as text would mean copying a ticker into a search box. Quiet until hovered: five action cards and a cluster map of loud links would drown what they belong to. */ .review-chip { border: 1px solid var(--line); border-radius: var(--radius-xs); background: transparent; color: var(--text); padding: 0 6px; font: inherit; font-size: var(--fs-base); cursor: pointer; } .review-chip:hover { border-color: var(--accent); color: var(--accent); } .review-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* --- the heading row and the bar under it --------------------------------- Everything above the feed on this panel is one pinned block: what the board is, which of its three views is open, and - on Runs - the control that buys the next review. It was six stacked rows of card before, standing on top of the history, and on a laptop that put every run on file below the fold. The view whose whole point is the record opened showing none of it. */ .review-topbar { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 8px; margin-bottom: 12px; border-bottom: 1px solid var(--line); } /* Pinned on Runs and Actions, static on Detail. `top: -10px` rather than 0 for the reason `.review-dock` carries the same number: `main` has 10px of padding, and at 0 the bar parks ten pixels down the port and lets a sliver of the feed run under the gap. Opaque and on the page's own ground - a translucent bar over scrolling text is the one thing that would make this harder to read. Detail is left static on purpose: it pins `.review-dock` already, and two sticky strips at one offset sit on top of each other. Of the two, the dock is the one worth the top of that screen. */ .review-topbar.stuck { position: sticky; top: -10px; z-index: 4; background: var(--bg); } /* Glass rather than a slab, where the engine can draw it: the board scrolls under this bar, and a translucent blur says so while keeping every chip legible on top of it. The solid --bg above stays as the fallback. */ @supports ((backdrop-filter: blur(9px)) or (-webkit-backdrop-filter: blur(9px))) { .review-topbar.stuck { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); } } .review-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .review-head-title { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: var(--fs-md); font-weight: 600; } .review-head-title .icon { color: var(--accent); } /* The three views, as one enclosed segment group sitting beside the heading. `.subtabs` is a full-width rail with a rule under it, which is right for a page's own sections and wrong here: this is the third horizontal navigation on the screen, and three stacked rails read as a site with three levels rather than one page with three views of one list. It used to carry `margin-left: auto`, which threw it to the far right of the row - a whole screen-width of gap between the title and the control that switches what is under it, and the pills reading as furniture pinned to the corner rather than as the navigation for this panel. Left, against the title it belongs to, is where a reader's eye already is after reading the heading. */ .subtabs.review-seg { border-bottom: 0; margin: 0; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel-2); } .subtabs.review-seg .subtab { border-bottom: 0; margin-bottom: 0; border-radius: var(--radius-pill); padding: 3px 13px; font-size: var(--fs-sm); } .subtabs.review-seg .subtab:hover { background: var(--panel); } /* The lit segment is filled rather than underlined. An underline inside a pill is a mark for a rail that is not there any more, and on a group this small the filled chip is the only reading that survives a glance. */ .subtabs.review-seg .subtab.on { background: var(--accent); border-color: var(--accent); color: #fff; } .subtabs.review-seg .subtab.on:hover { background: var(--accent); } /* The filters on Actions ride inside the same pinned block, so they lose the margin they carried when they were a bar of their own. */ .review-topbar .review-board-bar { margin-bottom: 0; } /* --- the control that spends, and the states around it --------------------- One row: which book and the button that reads it, then what is on file for it and the disclosure. The picker and the button are adjacent because they are one gesture - pick, press - and the state line takes the slack after them rather than between them. The two paragraphs it used to stand on fold away behind `.review-why` - see the note on `askBar` for why they still open by default on a book nobody has read. */ .review-ask { display: flex; flex-direction: column; gap: 8px; } .review-ask-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; } .review-state { min-height: 22px; } /* The state line takes the slack, which is what pins the picker and the button to the near end of the bar and the disclosure to the far one, and keeps all three in place as the sentence between them changes length. */ .review-ask-row .review-state { flex: 1 1 180px; margin: 0; } /* The disclosure. Quiet - it is furniture next to the control it explains - and lit in the accent while it is open, so a reader who folded the sentence away can see that there is one to fold back. */ .review-why { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; } .review-why:hover { border-color: var(--accent); color: var(--accent); } .review-why:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .review-why.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .review-why .icon { flex: 0 0 auto; } /* What the button buys, above the button rather than under it. The panel opens this by itself until a profile has been read once: this control spends money, and the sentence a hesitating reader needs has to be readable BEFORE the click. Set on its own ground so the fold reads as a panel opening rather than as the bar growing two stray paragraphs. */ .review-ask-why { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border: 1px solid var(--card-edge); border-left: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--panel-2); } .review-ask-why > p { margin: 0; } /* The button, and the one rule it actually needed: `inline-flex`. `.icon` is `display: block` app-wide - that is what kills the inline baseline gap everywhere else - so inside a plain `.btn` the sparkle took a line of its own and STACKED above the label. The `vertical-align: -3px` that used to sit here was arguing with `display: block`, which ignores it, so what the bar drew was a two-line slab: mark on top, four words under it, twice the height of the picker beside it. A row and a gap, and it is one line again. Pill-ended and padded wider than a stock `.btn` because of where it now sits: right of the picker, which is itself a pill. Two controls that are one gesture should read as a matched pair - a 4px-cornered rectangle against a lozenge reads as two unrelated things - and the extra side padding is what keeps the most consequential control on the panel from looking like the smallest. */ .review-ask-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 14px; border-radius: var(--radius-pill); line-height: 1.25; white-space: nowrap; } .review-ask-btn .icon { flex: none; } /* Hover goes DARKER, not lighter. The fill is already `--accent` mixed 78% toward black precisely so white text clears 4.5:1 on it; lightening on hover would walk that back toward the 3.20:1 raw accent carries. */ .review-ask-btn:hover { background: color-mix(in srgb, var(--accent) 66%, #000); border-color: color-mix(in srgb, var(--accent) 66%, #000); } /* Dead until a profile is picked, and it has to LOOK dead. It carried this from `.daymove-card .btn[disabled]` while it was a card; as a bar it stopped matching that selector, so the one state this control spends most of its life in was drawing at full strength - a saturated button beside a sentence saying it cannot be pressed yet. */ .review-ask .btn[disabled] { opacity: .45; pointer-events: none; } /* The wait and the failure, under the row that caused them. */ .review-ask > .hint, .review-ask > .advice-warn { margin: 0; font-size: var(--fs-xs); } .review-ask .review-empty { margin: 0; } /* --- whose book to read --------------------------------------------------- The one control on this bar that is not the button, and it is drawn to look like a decision rather than like a filter. Violet is its identity hue - not `--accent`, which on this panel already means "standing", and not a semantic colour, because naming a person is not a judgement about them. The same hue carries onto the owner chip down the history below, so the question and the answers to it are recognisably one thing. Pill-shaped since it stopped being a row of its own: on a bar of four controls the rounded end is what says this one is a choice rather than another chip in the sentence beside it. */ .review-profile { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 3px 8px 3px 10px; border: 1px solid color-mix(in srgb, var(--cat-violet) 40%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cat-violet) 9%, transparent); } .review-profile-label { display: inline-flex; align-items: center; gap: 5px; color: var(--cat-violet); font-size: var(--fs-sm); } .review-profile select { font-size: var(--fs-sm); } .review-positions { font-size: var(--fs-md); } .review-when { color: var(--muted); font-size: var(--fs-xs); } .review-none { color: var(--muted); font-size: var(--fs-sm); } /* Two different reasons the standing answer may not describe today, drawn the same way on purpose: from where the reader sits they mean one thing - press the button again. */ .review-stale { color: var(--negative); font-size: var(--fs-xs); } /* No portfolio at all. An instruction rather than an error: nothing has gone wrong, there is simply nothing to read yet. */ .review-empty { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: var(--fs-md); } /* --- what was decided about an action ------------------------------------ The half of this feature that is not the model's. An action arrives as advice and becomes a decision - acknowledged now, executed on Thursday, reconsidered next month - and the footer under each card is where that happens. Four chips rather than a menu, because this is a one-click decision made dozens of times and a ``, Actions wants a set and gets tick-boxes behind a dropdown. They share this bar so that "which answers am I looking at" sits in the same place on both. */ .review-board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; } /* The chips carry a bottom margin for when they stand on their own; inside the bar that margin is a flex item's, so it pushed the whole row 7px above centre and made the pinned strip taller than anything in it. */ .review-board-bar .review-filters { margin-bottom: 0; } /* The board's stock search: the shared picker - `stockpicker.js` - and not a box of this view's own, because "which stock" is a question the application answers in one place. `flex: 0 0 auto` for the reason the run menu beside it carries the same: this is a wrapping row with five status chips and two bulk buttons in it, and at the default shrink the box was squeezed until a symbol no longer fitted inside it. It sits narrower than the 240px run menu on purpose - a ticker is eight characters where a run is a date, a position count and sometimes an owner. */ .review-board-bar .stock-pick { flex: 0 0 auto; } .review-board-bar .stock-pick .input-icon { display: flex; } .review-board-bar .stock-pick input[type="text"] { min-width: 190px; } .review-pick { display: inline-flex; align-items: center; gap: 7px; } .review-pick-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .review-pick-select { padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: var(--fs-base); /* The dates are the column the eye runs down when a history is long, and a select sized to its longest option jumps as the choice changes. */ min-width: 240px; } .review-pick-select:focus { outline: none; border-color: var(--accent); } /* The board's own, which is a set. `position: relative` so its panel hangs off it rather than off the bar, whose wrapping would drag it sideways. */ /* `position: relative` so the panel hangs off the button rather than off the bar, whose wrapping would drag it sideways. The left-anchoring is `.dropdown-left` in the shared rules - see the note there. `flex: 0 0 auto` because this sits in a wrapping flex row beside five status chips: at the default `flex-shrink: 1` the button was squeezed until "All runs ▾" broke onto a second line under its own icon. It is a label, not a column - it gets the width it needs and the chips wrap instead. */ .review-runpick { position: relative; flex: 0 0 auto; } /* Drawn at the select's width, not at its label's. Sized to "All runs" the button was a sliver beside the chips, and it grew or shrank as the choice changed - the same jump the Detail tab's run select pins with its own min-width, so the one control keeps one width on every view. The caret sits at the right edge the way a select's does, and a long chosen-run label ellipses instead of stretching the bar. */ .review-runpick > .btn { display: flex; align-items: center; gap: 5px; min-width: 240px; max-width: 340px; white-space: nowrap; } .review-runpick-text { overflow: hidden; text-overflow: ellipsis; } .review-runpick-caret { margin-left: auto; color: var(--muted); } /* Wider than the shared 330px, because every row in it is a date, a position count and sometimes an owner - "28/Aug/26 06:22 · 69 positions · Rahul" - and at 330 that wrapped onto two lines per run, which turns a list you scan into a list you read. Capped against the viewport so a phone still gets a panel that fits on it. */ .review-runpick-panel { width: 400px; max-width: calc(100vw - 32px); } .review-run-checks { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; /* Capped and scrolled: a book reviewed weekly for a year is fifty runs, and a panel that grew with the history would run off the bottom of the screen. */ max-height: 260px; overflow-y: auto; } .review-run-check { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: var(--radius-xs); font-size: var(--fs-base); cursor: pointer; } .review-run-check:hover { background: var(--panel-2); } .review-run-check.on { background: var(--accent-soft); color: var(--accent); } .review-run-check span:first-of-type { flex: 1; min-width: 0; } /* How many actions that run carries - the figure that says whether ticking it will change what is on screen. */ .review-run-check-count { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--muted); } .review-run-check.on .review-run-check-count { color: inherit; } /* --- the Actions view ----------------------------------------------------- Grouped by run under a dated heading rather than run as one flat list: an action's evidence quotes figures from the book it was reasoned against, and a row torn from that context is a number with no date on it. */ .review-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .review-filter { --chip: var(--accent); display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel); color: var(--muted); font: inherit; font-size: var(--fs-base); cursor: pointer; } /* **The mark is coloured whether or not the chip is pressed.** Five outlined grey pills in a row is the wall this house style exists to prevent, and the colour is not decoration here: it is the same key the tally strip, the run band and every status chip on the cards below are drawn in, so a reader learns amber-is-outstanding once and reads it everywhere. Keyed off the value rather than off the tone class, because the tones are about the *decision* - OPEN and DROPPED are both `plain`, correctly - and two states sharing a mood should still be tellable apart at a glance. */ .review-filter[data-review-filter=""] .icon { color: var(--cat-violet); } .review-filter[data-review-filter="OPEN"] .icon { color: var(--accent); } .review-filter[data-review-filter="ACKED"] .icon { color: var(--warn); } .review-filter[data-review-filter="DONE"] .icon { color: var(--positive); } .review-filter[data-review-filter="DROPPED"] .icon { color: var(--muted); } .review-filter:hover { border-color: var(--accent); color: var(--accent); } .review-filter.on { border-color: color-mix(in srgb, var(--chip) 60%, transparent); background: color-mix(in srgb, var(--chip) 16%, transparent); color: var(--chip); box-shadow: 0 2px 12px -5px color-mix(in srgb, var(--chip) 85%, transparent); } .review-filter.on .icon { color: var(--chip); } .review-filter.on.good { --chip: var(--positive); } .review-filter.on.warn { --chip: var(--warn); } .review-filter.on.bad { --chip: var(--negative); } /* A state nobody is in, drawn muted rather than dropped: a board where nothing is Done should say so rather than quietly having one fewer chip. */ .review-filter.empty { opacity: .55; } /* The count is the reason to press the chip, so it is set in its own well rather than run on as a second word. */ .review-filter-count { padding: 0 5px; border-radius: var(--radius-pill); background: var(--panel-2); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); } .review-filter.on .review-filter-count { background: color-mix(in srgb, var(--chip) 22%, transparent); } /* --- the run band --------------------------------------------------------- Which run these cards came from, and it is **pinned**: this is the one list on the page long enough that a reader scrolling it loses the answer, and an action's evidence quotes figures from the book of the day it was read. A heading that scrolls away turns every figure below it into a number with no date on it. `top` clears the bar above it, which is `.review-topbar.stuck` sitting at -10 and about 74 tall. Below the band's own z-index, so the two never fight: if the number drifts the band tucks under the bar rather than covering it. */ .review-group { margin-bottom: 18px; } .review-group-head { position: sticky; top: 64px; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; margin: 0 0 8px; padding: 5px 10px; border: 1px solid var(--card-edge); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); /* Opaque, because it is pinned over scrolling cards - and washed with the accent from the left so the band reads as a header rather than as one more card in the stack. */ background: linear-gradient(100deg, var(--accent-soft) 0%, transparent 45%), var(--panel-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .review-group-open { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--text); padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; cursor: pointer; } .review-group-open .icon { color: var(--accent); } .review-group-open:hover { color: var(--accent); } .review-group-note { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; } .review-group-note .icon { color: var(--cat-teal); } /* Whose book it was, in the violet the history's own owner chip uses - the same fact answered in the same colour rather than a second kind of mark. */ .review-group-note.owner { color: var(--cat-violet); } .review-group-note.owner .icon { color: var(--cat-violet); } /* How far through this run's rows on screen the reader is. Shorter than the history's, because there it is a card's headline figure and here it rides on a heading. */ .review-group-head .review-tally { height: 14px; min-width: 96px; } /* --- the severity bands ---------------------------------------------------- One run's actions, banded CRITICAL → LOW with the cards three to a row. The head is a full-width bar in the band's own hue - the same red, amber, blue, slate ladder the chips wear - so a fold that shuts it leaves a coloured line saying what is folded and how much of it. The count rides on the head for the reason the filter chips carry theirs: it is what decides whether unfolding is worth the click. */ .review-sev { margin: 0 0 10px; } .review-sev-head { --sev: var(--cat-slate); display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--sev) 40%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sev) 10%, transparent); color: var(--text); cursor: pointer; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.05em; box-shadow: 0 0 12px -8px var(--sev); transition: box-shadow 0.15s, background 0.15s; } .review-sev-head:hover { background: color-mix(in srgb, var(--sev) 16%, transparent); box-shadow: 0 0 14px -6px var(--sev); } .review-sev-head .icon, .review-sev-name { color: var(--sev); } .review-sev-count { padding: 0 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--sev) 18%, transparent); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; } .review-sev-caret { margin-left: auto; color: var(--muted); transition: transform 0.15s; } .review-sev.folded .review-sev-caret { transform: rotate(-90deg); } .review-sev.critical .review-sev-head { --sev: var(--negative); } .review-sev.high .review-sev-head { --sev: var(--warn); } .review-sev.medium .review-sev-head { --sev: var(--cat-sky); } .review-sev.low .review-sev-head { --sev: var(--cat-slate); } /* Three to a row, not a column: thirty cards one under another is a page nobody reaches the bottom of, and at board width a card is a third of it. `minmax(0, 1fr)` so a long symbol chip squeezes its own card rather than widening the track; the steps down to two and one match the width at which a third of the board stops holding a readable card. */ .review-sev-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } @media (max-width: 1200px) { .review-sev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .review-sev-cards { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .review-bulk, .review-sev-head { transition: none; } } /* --- the batch moves ------------------------------------------------------- Ack and Done, at the right end of the pinned bar, acting on the cards the reader has TICKED and nothing else - there is no "all", by design: a press over 55 rows three screens down cannot be checked before it is made. DROPPED stays per-row: declining is exactly the judgement a batch button exists to skip. */ .review-bulkbar { display: inline-flex; gap: 6px; margin-left: auto; } .review-bulk { --chip: var(--accent); display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--chip) 10%, transparent); color: var(--chip); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: box-shadow 0.15s, background 0.15s; } .review-bulk.good { --chip: var(--positive); } .review-bulk.warn { --chip: var(--warn); } .review-bulk:hover:not(:disabled) { background: color-mix(in srgb, var(--chip) 18%, transparent); box-shadow: 0 0 12px -5px var(--chip); } .review-bulk:disabled { cursor: default; } .review-bulk.empty { opacity: 0.55; } .review-bulk-count { padding: 0 5px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--chip) 20%, transparent); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); } /* What is in the batch, and the way out of it. Quiet - it is an undo, not a third move - and drawn only while something is ticked. */ .review-bulk-clear { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer; } .review-bulk-clear:hover { border-color: var(--accent); color: var(--accent); } .review-bulk-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Nothing to show, said with the mark of the filter that emptied it rather than as a bare line of grey text. */ .review-board-empty { display: flex; align-items: center; gap: 8px; padding: 14px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); } .review-board-empty .icon { color: var(--accent); } /* Where the ask card used to be on Detail. A line, not a control: the card that spends is on Runs, and what a reader landing here on a book with no review needs is to be told why the page is thin and where the button is. */ .review-gap { display: flex; align-items: center; gap: 7px; margin: 12px 0; } /* The banner over a run that is not the standing one. Its actions are still worth ticking off - that is why the runs are kept - but its figures describe a book that has since moved, and nothing else on screen would say so. */ .review-older { display: flex; align-items: flex-start; gap: 7px; } /* --- narrow windows ------------------------------------------------------- The dock lies down: one column becomes one row, scrolling sideways, still stuck to the top of the port. The nested action jumps go rather than lie down with it - they are an alternative route to something the page already shows in full, and inline they would double the strip's height to save a scroll. The split panel stacks rather than shrinking, because two 90px columns stop being a comparison and start being a squeeze. */ @media (max-width: 900px) { .review-detail { grid-template-columns: minmax(0, 1fr); padding: 8px; margin-left: -8px; margin-right: -8px; } .review-dock { flex-direction: row; gap: 4px; max-height: none; overflow-x: auto; overflow-y: hidden; } .review-dock-item { white-space: nowrap; } .review-dock-jumps { display: none; } /* The bar above wraps onto two and three rows down here, so the one number the band's `top` is measured against stops being one number. Static is honest; a band pinned at the wrong offset either hides under the bar or floats a strip of scrolling cards above itself. */ .review-group-head { position: static; } } @media (max-width: 560px) { .review-split { grid-template-columns: minmax(0, 1fr); } /* The status chips lose their words and keep their marks: four labelled chips wrap onto three lines on a phone, and the mark plus the lit state is enough to say which of four an action is in. */ .review-status span { display: none; } .review-status { padding: 4px 8px; } .review-tally { min-width: 90px; } .review-mix { width: 100px; } /* The lanes are stacked down here, so no two cards are ever side by side and there is nothing left for a matched height to line up with. The footer gets its second row back rather than ellipsing the figures on a 360px screen. */ .review-run-foot { flex-wrap: wrap; } .review-run-figs { overflow: visible; white-space: normal; } /* Pointing down rather than across once the legs are stacked - an arrow that still read left-to-right would be describing a layout that is no longer there. */ .review-split-arrow { justify-content: center; transform: rotate(90deg); } /* Marks only. Six labelled items scroll sideways for a screen and a half on a phone, and the mark plus the lit state is enough to say which of six a reader is in - the tooltip still carries the name. */ .review-dock-label { display: none; } .review-dock-item { padding: 6px 10px; } /* The heading's expand-all drops its word for the same reason the status chips below drop theirs. */ .review-dims span { display: none; } } /* --- Scoreboard: what every verdict was actually worth ------------------- The AI page's one section that draws an OUTCOME rather than an opinion, and the one that costs nothing. Both of those have to be visible before anything is read, because a reader arriving here has been trained by the three tabs in front of it to expect a bill and a paragraph of prose. So the layout inverts the others': the sections above lead with a card that spends, this one leads with a frame of figures that are already true and puts its (free) button under them. Everything below the button is tables, which is the right shape for the first time on this page - the answer is arithmetic, and prose would be dressing a number up as a judgement. Two things this stylesheet is doing more work for than usual, both because the honest reading of this table is mostly absences: * an unmeasured cell must read as *not yet* rather than as *zero*. `.score-none` and `.score-pending` are muted em dashes with a tooltip each, and they are deliberately not the same colour as a real 0.0%. * a right verdict and a rising stock are different facts. Colour follows the MOVE (green up, red down) exactly as it does everywhere else in the app, and whether the verdict was borne out is an underline instead - so a TRIM that was right reads as a red number that is marked correct, which is what it is. */ .score-panel { padding-top: 4px; } /* The frame of figures at the top. Same object as `.review-today` and styled with it in mind: always current, always free, and boxed so it does not read as the first paragraph of the report underneath. */ .score-head { border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); padding: 12px 14px; } .score-head-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .score-head-what { margin: 0 0 10px; } .score-coverage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; } .score-coverage-figs { font-size: var(--fs-lg); } /* A gap between what is on file and what has been scored, or a window that closed with no price behind it. `--warn` rather than `--negative`: nothing is broken, something is missing and pressing the button usually fixes it. */ .score-warn { color: var(--warn); font-size: var(--fs-base); border: 1px solid var(--warn); border-radius: var(--radius-xs); padding: 0 5px; } /* When the first reading lands. Drawn large and above the grid while it is true, because for the first month it is the only sentence on this page with information in it - a table of dashes under nothing reads as a failure. */ .score-waiting { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: var(--radius-xs); font-size: var(--fs-md); } .score-waiting svg { color: var(--accent); flex: 0 0 auto; } /* The bill for the answers being scored, and the nil bill for scoring them. Side by side deliberately: the whole argument for this feature is the ratio between those two numbers. */ .score-spend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .score-spend-cell { display: flex; flex-direction: column; gap: 1px; } .score-spend-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .score-spend-value { font-size: var(--fs-md); font-variant-numeric: tabular-nums; } .score-spend-total .score-spend-value { font-size: var(--fs-lg); } .score-spend-free .score-spend-value { color: var(--positive); } /* The card. `.daymove-card` whole, borrowed like the Review Board's is, with one change: the button is not the expensive thing on this page, so it does not need the visual weight the two paid ones carry. */ .score-card { margin-top: 12px; } .score-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .score-positions { font-variant-numeric: tabular-nums; } .score-when, .score-none { color: var(--muted); } /* --- the grid: one block per question, one row per window ---------------- */ .score-block { margin-top: 16px; } .score-source { margin-bottom: 18px; } .score-source:last-child { margin-bottom: 0; } .score-source-title { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: var(--fs-md); } .score-source-what { margin: 0 0 8px; } .score-grid, .score-stances, .score-verdicts { width: 100%; border-collapse: collapse; font-size: var(--fs-base); font-variant-numeric: tabular-nums; } .score-grid th, .score-stances th, .score-verdicts th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); white-space: nowrap; } .score-grid td, .score-stances td, .score-verdicts td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .score-grid tbody tr:last-child td, .score-stances tbody tr:last-child td, .score-verdicts tbody tr:last-child td { border-bottom: 0; } .score-grid th[scope="row"] { font-size: var(--fs-base); text-transform: none; letter-spacing: 0; color: var(--text); border-bottom: 1px solid var(--line-soft); } /* Numbers right, and the same tabular figures as the grid pages, so a column of percentages can be read down rather than across. */ .score-num { text-align: right; } th.score-num { text-align: right; } .score-num.good { color: var(--positive); } .score-num.bad { color: var(--negative); } .score-num.plain { color: var(--muted); } /* The one column the whole table is for. */ .score-excess { font-weight: 600; } /* --- the record: one line per verdict, one cell per window --------------- */ /* Nine columns of figures on a phone is not a table anybody can read, so it scrolls inside its own box rather than pushing the page sideways - the same bargain the Jobs tab's result table makes. */ .score-table-scroll { overflow-x: auto; } .score-verdicts { min-width: 640px; } .score-source-cell { color: var(--muted); } .score-source-cell svg { vertical-align: -2px; } .score-when-cell { color: var(--muted); font-size: var(--fs-base); } /* A stock, as a button: the reader's next question is always about the name, and making it text would mean copying a ticker into a search box. Quiet until hovered - the same treatment the review's action chips get. */ .score-symbol { border: 0; background: transparent; color: var(--text); padding: 0; font: inherit; font-weight: 600; cursor: pointer; } .score-symbol:hover { color: var(--accent); text-decoration: underline; } /* What the model said, and what came of the advice. One pill shape for both, because they are the same kind of object - a short word carrying a colour. */ .score-pill { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0 5px; font-size: var(--fs-xs); letter-spacing: 0.04em; font-weight: 600; } .score-pill.good { color: var(--positive); border-color: var(--positive); } .score-pill.bad { color: var(--negative); border-color: var(--negative); } .score-pill.plain { color: var(--muted); } .score-pill svg { width: 11px; height: 11px; } /* Not yet, and could not be. Two different absences and two different marks: an em dash for a window still open, a question mark for one that closed with no price behind it. Both muted, and neither is a zero. */ .score-pending { color: var(--muted); } .score-missing { color: var(--warn); } /* A window this source is not read at, as against one it has not reached yet. Only the exit advisor is scored at eighteen months, and drawing "not measured here" the same way as "not scored yet" would invent a fault on three quarters of the table. Fainter than `.score-missing`, which is a real gap. */ .score-unread { color: var(--line); } /* --- the cut-the-winner tally ------------------------------------------- The one outcome the plan behind this feature calls unforgivable, and the one an average hides: a single 3x among forty rows moves an excess median by almost nothing. Drawn at zero as well as at one, because "none yet" is the number this block exists to keep saying - a counter that appeared only on failure would leave a reader unsure whether it was clean or simply not running. */ .score-clean { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted); } .score-clean svg { color: var(--positive); flex: 0 0 auto; margin-top: 2px; } .score-cuts { list-style: none; margin: 10px 0 0; padding: 0; } .score-cut { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--line-soft); } .score-cut:first-child { border-top: 0; padding-top: 0; } /* The move itself, loudest thing on the row: it is the size of the mistake. */ .score-cut-move { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; } /* Whether the verdict was borne out, drawn as an underline rather than a colour. The colour on that cell already means something - which way the stock went - and a TRIM that was right is a red number that is nonetheless correct. */ .score-right { text-decoration: underline; text-decoration-color: var(--positive); text-decoration-thickness: 2px; text-underline-offset: 3px; } .score-wrong { text-decoration: underline; text-decoration-color: var(--negative); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-style: dotted; } /* The two caveats under the record. Hints rather than warnings: neither is a fault, and both are things a figure above has to be read with. */ .score-bench, .score-ledger { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; } .score-bench svg, .score-ledger svg { flex: 0 0 auto; margin-top: 2px; } /* --- Reports: the log of what has been asked, both questions ------------- */ /* Its own AI section now rather than a sub-tab of Eval Profile, and it carries the What-to-Do-Now verdicts beside the why-it-moved reports - so a row here is one of two shapes and the cells that differ say so per row. The table reuses `.advice-table` whole - the Add-More tab already solved a dense list of stocks with a verdict, a timestamp, an asker and a cost on each row, which is exactly this list with different words in it. What is added here is the column widths, the marks a row can carry that no Add-More row can (the session it explains, and the stock having left the book), and the opened report sitting in a modal over the list. */ /* The toolbar is the What-to-Do-Now one whole - `.toolbar.advice-toolbar`, which already wraps and already caps a select at 190px. One exception: the Answer menu carries the longest option on either page, because its words are the ones the cells beneath it use - "Nothing found accounts for it" rather than `UNEXPLAINED`. Widened rather than given a shorter vocabulary of its own, since two names for one attribution is exactly how a filter and the column it filters stop agreeing. */ .toolbar.advice-toolbar select[data-reports-filter="answer"] { max-width: 250px; } /* The whole row opens its report, so it has to look like it does. Add-More puts the link in a cell because a row there has two actions; a row here has one, and a link inside a row where everything is clickable is a smaller target for no reason. */ .dmlog-table tbody tr { cursor: pointer; } .dmlog-table tbody tr:hover { background: var(--row-hover); } .dmlog-c-when { white-space: nowrap; font-variant-numeric: tabular-nums; } .dmlog-c-move { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } .dmlog-c-move.good { color: var(--positive); } .dmlog-c-move.bad { color: var(--negative); } .dmlog-c-move.plain { color: var(--muted); } /* The session a move report explains, under the move it explains rather than in a column of its own. It had one while every row was a move report; half of them are position verdicts now, which have no session at all, and a column that is blank on half a table is a column paying no rent. */ .dmlog-c-session { display: block; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } /* A verdict's answer to the same question - not a percentage on a day but an age, so it is the one cell here that is words rather than figures. */ .dmlog-c-age { color: var(--muted); } /* Which question was asked. Muted because it is the row's category rather than its content: the eye should land on the headline, not on the twenty rows reading "Why it fell". */ .dmlog-c-kind, .dmlog-c-tab { white-space: nowrap; color: var(--muted); } /* The answer itself, so it gets whatever width is left and wraps rather than being clipped - a headline cut off mid-sentence is a row worth nothing. */ .dmlog-c-headline { line-height: 1.5; min-width: 220px; } .dmlog-c-stock .advice-name { display: block; } /* "today" beside the session date. A pill would be too loud on every second row; this is the same quiet accent the Add-More table marks a due row with. */ .dmlog-today { display: block; color: var(--accent); font-size: var(--fs-xs); } /* A report on a stock that has left the book. Marked rather than hidden: it is the report most likely to be looked for and the one the other two tabs can never show. */ .dmlog-gone { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-lg); border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; } /* --- Reports: density, marks and the rail ------------------------------- */ /* Everything below is scoped on `.reports-panel`, which only this section wears (see `markup` in `reports.js`). The table it draws is `.advice-table`, which is ALSO the What-to-Do-Now list on Eval Profile and the stock popup's own list - so a header mark or a tinted row written against that class would turn up on two tabs nobody asked about. The scope is the point, not decoration. What this tab needs that those two do not: it is the only one that is a *log* rather than a working list. It grows without limit, it is read by scanning rather than by acting, and every row on it is money already spent. So it gets the density, the marks that let an eye find a column without reading the header, and one channel - a rail down the left edge - that says which way the row leans before a word of it is read. */ /* The card's own title. 14px and bold against the 13px `.panel h3` everywhere else: this is a section head above a wall of 12px figures, and the step is what makes it read as the top of a hierarchy rather than as the first row of it. The margin under it comes in with the density below. */ .reports-panel h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 6px; } /* The three lines between the title and the toolbar - the count, the spend and the "showing n of m". Direct children only: `.hint` is also every explanatory line inside an OPENED report, which sits in a popup inside this same panel and is prose to be read rather than chrome to be skimmed. */ .reports-panel > .hint { margin: 0 0 5px; } /* The filter chips. Tighter than the 8px `.toolbar` gap they inherit, because there are seven controls here and the wrap they cause is what pushes the first row of the table below the fold on a laptop. */ .reports-panel .toolbar.advice-toolbar { gap: 4px 6px; margin: 6px 0 6px; } /* The rows. 6px rather than the 7px `.advice-table` gives every other list, and the leading of the stacked sub-lines with it: a row here is two or three lines tall in three of its seven cells - the company under the ticker, the session under the move, the conviction under the call - so the LEADING is what actually sets the row height, and shaving the padding alone would have moved it by 2px. Together they are about 8px a row, which is a couple more reports above the fold on every screen. */ .reports-panel .dmlog-table td { padding: 6px 10px 6px 0; line-height: 1.35; } .reports-panel .dmlog-table th { padding: 4px 10px 5px 0; } .reports-panel .dmlog-table .advice-name, .reports-panel .dmlog-table .advice-age, .reports-panel .dmlog-table .advice-tokens, .reports-panel .dmlog-table .advice-asked-by, .reports-panel .dmlog-table .dmlog-c-session, .reports-panel .dmlog-table .dmlog-today { line-height: 1.3; } /* The answer itself still wraps to as many lines as it needs - it is the one cell that is a sentence - but at the table's own leading rather than at the 1.5 it carried while the rows around it were looser. */ .reports-panel .dmlog-c-headline { line-height: 1.4; } /* The ticker, one step up from the body text at 13px. It is what a reader scanning this list is looking FOR - the row is found by its stock and then read - and it was the same 12px as the timestamp beside it. The company name under it stays at --muted and its own size: that is the confirmation, not the target. */ .reports-panel .dmlog-c-stock .advice-sym { font-size: var(--fs-md); } /* The head, and the mark in it. `.icon` is `display: block` by default - it is drawn inside flex buttons nearly everywhere - so the label and its mark are wrapped in one inline-flex rather than left to sit on two lines. The mark is quiet on purpose: it is a finding aid for a column, not a second label, and at full strength seven of them would read as a row of buttons. */ .dmlog-th { display: inline-flex; align-items: center; gap: 4px; } .dmlog-th .icon { opacity: .65; } /* The two heads over right-aligned columns. `.advice-cost` and `.dmlog-c-move` right-align the CELLS and always did; the heads over them did not, so the word "Cost" sat at the left of a column of figures stacked at the right. */ .reports-panel .dmlog-table th.dmlog-c-cost, .reports-panel .dmlog-table th.dmlog-c-move { text-align: right; } /* The head used to be sticky here, and is not any more. Two things took the argument away, and one of them made it impossible. The argument was that this is a log with no natural end, so a reader is reliably a long way from the labels by the time they need them. It is paged at fifteen rows now, which is the end it did not have. The impossibility is the resize: a table whose columns the reader can widen has to sit in a horizontal scroller or it bursts the card and gives the whole application a sideways scrollbar. `overflow-x: auto` on that wrapper computes `overflow-y` to `auto` as well, which makes the wrapper the nearest scrolling ancestor - and a `top: 0` measured against a box that never scrolls vertically pins the head to a wrapper that is itself scrolling away up the page. The head would be sticky to nothing, which looks like a bug and is worse than not doing it at all. The scroller wins: a page that scrolls sideways is a broken page, and a header you scroll past is an inconvenience. */ .reports-panel .table-scroll { margin-top: 2px; } /* The call, as a badge rather than as a coloured word. The tint is mixed from `currentColor`, which is the whole trick: `.advice-action` already resolves to --positive, --negative or --muted through its tone class, so one declaration paints all three states, follows both themes, and follows a custom theme's own two colours - where three hard-coded backgrounds would be the one thing on the screen that did not. The same shape as `.delta-pill` above: a 4px badge, not a 999px lozenge, and tinted rather than filled. A saturated fill on every row of a long list reads as a wall of stickers - see the note there. NOT green for the up side, and this is not an oversight: see --positive at the top of this file. The reader is red/green colour-blind and blue-vs-red is the pair that separates for them. */ .dmlog-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.5; background: color-mix(in srgb, currentColor 12%, transparent); } /* The triangle inside a SELL, or inside a report that says the thesis is broken. It inherits the badge's colour, so it is never a second hue - it is the shape channel doing the work colour cannot do on its own. */ .dmlog-badge .icon { flex: none; } /* The rail down a row's left edge - which way this row leans, before a word of it is read. Two channels rather than one: a 2px edge that survives greyscale as a dark or a pale line, and a tint under the row so faint it reads as a change of paper rather than as a colour. `plain` gets neither, which is what makes the marked rows mean something. Painted from `data-dmlog-tone` rather than from a class, because `.good` and `.bad` are worn by a dozen unrelated things in this stylesheet and a tinted TABLE ROW is not something any of them should be able to turn on. */ .reports-panel .dmlog-table tbody tr { border-left: 2px solid transparent; } .reports-panel .dmlog-table tbody tr[data-dmlog-tone="good"] { border-left-color: color-mix(in srgb, var(--positive) 55%, transparent); background: color-mix(in srgb, var(--positive) 5%, transparent); } .reports-panel .dmlog-table tbody tr[data-dmlog-tone="bad"] { border-left-color: color-mix(in srgb, var(--negative) 55%, transparent); background: color-mix(in srgb, var(--negative) 5%, transparent); } /* Hover still wins. The tone rules above and `.dmlog-table tbody tr:hover` tie on specificity, and a tie is decided by source order - which would have left every tinted row the one row on the table that did not light up under the pointer. Stated rather than relied upon. */ .reports-panel .dmlog-table tbody tr[data-dmlog-tone]:hover { background: var(--row-hover); } /* The rail needs somewhere to sit. `.advice-table` cells pad on the right only, so without this the 2px edge would be flush against the timestamp. */ .reports-panel .dmlog-table td:first-child, .reports-panel .dmlog-table th:first-child { padding-left: 8px; } /* The chevron at the end of a row. The whole row opens its report and has since this list was built, but nothing on the row ever SAID so - the only sign was the cursor, which is a thing you find by accident. Not a column: it carries no data, it is not in `LOG_COLUMNS`, and its head is a screen-reader label rather than a word. Faint at rest and full strength under the pointer, which is the affordance rather than the decoration. */ .reports-panel .dmlog-table .dmlog-c-open { width: 20px; /* Enough to keep the chevron off the table's own edge. It used to be zero, which was right while this was a 20px column of its own and wrong once it became the filler as well: the filler is as wide as the slack, `text-align` pins the chevron to its right edge, and with no padding that edge is the last pixel of the card. */ padding-right: 4px; text-align: right; color: var(--muted); opacity: .4; } .reports-panel .dmlog-table .dmlog-c-open .icon { display: inline-block; vertical-align: -1px; } .reports-panel .dmlog-table tbody tr:hover .dmlog-c-open { opacity: 1; color: var(--accent); } /* Figures line up here too. The stamp, the move and the cost already asked for tabular digits; the age ("3 days ago", "17h ago") and the token count under a cost are figures in a column and never did. */ .dmlog-c-age, .advice-tokens { font-variant-numeric: tabular-nums; } /* --- Reports: the reader's own columns, and the pages under them --------- */ /* The head is draggable to reorder and its right edge is a resize handle, both the way the grid's is - `.dragging`, `.drop-before` and `.drop-after` are painted by the shared rule up beside the grid's own, and `.rz-edge` and `.resizable` come from the width engine untouched. What is only true here is below: how the table behaves once that engine has pinned its columns, and what the pager under it looks like. */ /* `width: max-content; min-width: 100%` is the pair that lets a pinned table still fill its panel - the same two the grid states. `applyWidths` sets an explicit width equal to the sum of the seven real columns; without the minimum the table would stop at that sum and leave a gap down the right of the card the moment anybody narrowed a column. */ .dmlog-table.resizable { width: max-content; min-width: 100%; } /* A head being dragged must not also be selectable text, or the drag reads as a botched double-click on half the attempts. */ .dmlog-table th[data-dmlog-col] { user-select: none; } .dmlog-table th[data-dmlog-col]:hover { cursor: grab; } .dmlog-table th[data-dmlog-col].rz-edge:hover { cursor: col-resize; } /* The chevron column does two jobs and is one cell, which is why it carries `rz-filler` as well as its own class: it is the affordance saying the row opens, AND it is the column the width engine leaves unsized so it can absorb whatever the seven real columns do not fill. Both jobs want it last and want it fluid, so making it two cells would be a second empty column for nothing. `.rz-filler`'s own rule is scoped to `table.grid`, so the padding reset it makes there is restated here rather than inherited. */ .dmlog-table .dmlog-c-open.rz-filler { border-right: 0; cursor: pointer; } /* The pager's numbers. The arrows either side are plain `.btn sm` and need nothing; these are square, quiet, and one of them is lit. */ .dmlog-pages { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .dmlog-page { min-width: 24px; padding: 2px 5px; font-variant-numeric: tabular-nums; color: var(--muted); } .dmlog-page:hover { color: var(--text); } /* Where you are. Lit rather than merely bold: the strip is a row of near identical squares and weight alone is not enough to find yourself in it at 11px. `aria-current` says the same thing to a reader who cannot see it. */ .dmlog-page.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } /* Where the run of numbers was cut. Not a button, and drawn as not one. */ .dmlog-gap { color: var(--muted); padding: 0 2px; user-select: none; } /* The opened report is the Add-More popup - `.advice-modal`, `.advice-modal-box` and `.advice-modal-head`, defined once above and reused whole. Nothing is restyled here: a report drawn one way on the AI page's first tab and another way on its second would be two designs for one object, and the second would drift. The list stays rendered underneath, so closing puts the reader back exactly where they were. The one addition is letting the head wrap: it carries a name, a ticker, the direction and - for a stock since sold - a "no longer a position" mark, which is one item more than the Add-More head ever holds. It is a `flex: 0 0 auto` row in a fixed-height box now, so wrapping costs the body a line rather than pushing anything out of the popup. */ .advice-modal-head { flex-wrap: wrap; } /* --- the AI tab's Why It Fell half ------------------------------------ */ /* The evals on file for one stock, and the report behind whichever is open. It reuses `.advice-table` for the list and `.report-split` for the report, both defined above and both unchanged - the point of this half is that a reader who has learned the AI tab's report already knows this one. What is added here is the two columns this table has that no other does, and the mark on the row whose report is open. */ .whyfall-panel { max-width: 880px; margin: 0 auto; } .whyfall-table tbody tr { cursor: pointer; } .whyfall-table tbody tr:hover { background: var(--row-hover); } /* The row whose report is being read. A left rule rather than a background alone, matching `.report-jump.on` in the rail beside it: both are saying "this is the one you are on", and saying it two different ways in one panel would read as two different meanings. */ .whyfall-table tbody tr.on { background: color-mix(in srgb, var(--accent) 9%, transparent); } .whyfall-table tbody tr.on td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .whyfall-report { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 4px; } .whyfall-loading { margin-top: 14px; } /* The report as this tab and the AI page both draw it. The rail is sticky against whichever box scrolls it - the popup's body here, the modal on the AI page - and `.report-split` already says so; this only keeps the head above it from being dragged into the grid. */ .daymove-report .advice-head { margin-top: 4px; } .daymove-report .report-split { margin-top: 14px; } /* --- the job queue -------------------------------------------------------- The Jobs tab and the popup's Fetch menu. Built from the same tokens as the provenance tables above: a job row is a status and a sentence, not a figure, so nothing here is coloured by value. */ .job-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-lg); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--line); color: var(--muted); /* Wide enough for the longest of the six, so the column of pills has one left edge and one right edge rather than six of each. `Cancelled` is the longest and sets the figure; anything shorter centres in it. */ min-width: 62px; text-align: center; } /* Queued is deliberately the quietest of the six: it is the state a job spends most of its life in and the one nobody needs to look at. */ .job-pill.queued { color: var(--muted); } .job-pill.leased, .job-pill.running { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); } .job-pill.succeeded { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 50%, transparent); } .job-pill.failed { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 50%, transparent); } .job-pill.cancelled { color: var(--muted); font-style: italic; } /* A job that is running is the one thing on this panel that changes while it is being read, and a table that has to be re-read to find out is a table that gets re-read. The halo is the refresh dot's, not an opacity blink - same argument as `.dot.busy`: a mark that vanishes for half of every second reads as a rendering fault where an expanding ring reads as work. */ .job-pill.leased::before, .job-pill.running::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; vertical-align: 1px; border-radius: 50%; background: currentColor; animation: dot-pulse 1.8s ease-out infinite; } /* The dot still marks the pill, it just stops moving. Same trade the spinner makes: the information is in the mark, not in the animation. */ @media (prefers-reduced-motion: reduce) { .job-pill.leased::before, .job-pill.running::before { animation: none; } } /* The log is read as a list and was drawn as one with none of a list's furniture: no band over the headings, no rule under a row, and nothing under the eye tracking fifteen near-identical lines out to the far column. What is below is the shape `.fs-table` already uses one sub-tab away - micro-caps heading on the panel's second surface, a hairline under each row, a stripe under every second one and the accent under the hovered one - so a reader crossing from one to the other is reading the same table rather than two people's work. `separate` and not `collapse`, because the left-edge status rule below is an inset shadow and a collapsed border eats it. Said once for all four tables under the Jobs tab - the log, Run Jobs, Queue stats' per-lane counts and Fetch Theory's cadence - because they are four sub-tabs of one strip and a reader moves between them in a keypress. Only the log has a state to mark down its left edge; the shape above it is the same. */ .job-table, .queue-table, .run-jobs-table, .checklist-table, .theory-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .job-table th, .queue-table th, .run-jobs-table th, .checklist-table th, .theory-table th { padding: 5px 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; } /* 5px and not the 8 an untouched row would take: a hairline and a stripe are already separating these rows, and padding on top of both buys nothing but a page of fifteen that no longer fits a laptop screen without scrolling. */ .job-table td, .queue-table td, .run-jobs-table td, .checklist-table td, .theory-table td { padding: 5px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; line-height: 1.35; } /* The frame owns the last edge. A rule under the final row and a border under it is the same line drawn twice. */ .job-table tbody tr:last-child td, .queue-table tbody tr:last-child td, .run-jobs-table tbody tr:last-child td, .checklist-table tbody tr:last-child td, .theory-table tbody tr:last-child td { border-bottom: 0; } /* Before the hover rule on purpose: the two carry the same specificity, so source order is the whole of what decides which paints a hovered stripe. */ .job-table tbody tr:nth-child(even) td, .queue-table tbody tr:nth-child(even) td, .run-jobs-table tbody tr:nth-child(even) td, .checklist-table tbody tr:nth-child(even) td, .theory-table tbody tr:nth-child(even) td { background: var(--row-stripe); } .job-table tbody tr:hover td, .queue-table tbody tr:hover td, .run-jobs-table tbody tr:hover td, .checklist-table tbody tr:hover td, .theory-table tbody tr:hover td { background: var(--row-hover); } /* Which rows are moving, and which broke, off the left edge - the 3px rule the Data Fetch Stats table marks a held stock with. These are the two questions the panel is opened for, and both were carried only by a pill in the middle of a very wide row, which is the one place the eye is not when it starts down a list. Three states go unmarked: done is the answer nobody is looking for, and queued and cancelled are both "nothing is happening". */ .job-table tbody tr[data-status="running"] td:first-child, .job-table tbody tr[data-status="leased"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .job-table tbody tr[data-status="failed"] td:first-child { box-shadow: inset 3px 0 0 var(--negative); } /* The row whose popup is up, tinted rather than outlined - and it has to beat both the stripe and the hover, which is why it carries a class more than either. `--panel-2` was the old mark and is now the heading band's colour; against a striped body it said nothing at all. */ .job-table tbody tr.job-row.open td, .job-table tbody tr.job-row.open:hover td { background: color-mix(in srgb, var(--panel) 82%, var(--accent)); } /* Every column but Fetch is sized by what is in it - `width: 1%` with `nowrap` is what asks a cell for exactly that - so the slack lands in the one column that can use it and the meta columns close up into a block at the right. They were spread across the panel by fixed pixel widths that the longest value in each overran anyway. */ .job-c-id { width: 1%; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; } .job-c-what { width: 100%; } /* The stock, in a column of its own rather than chipped onto the end of the fetch. It is the part somebody scanning a page is actually looking for, and a column is the only thing the eye can run straight down - a chip whose left edge moved with the length of the fetch beside it could not be scanned at all. It is also half of why a row is now one line. */ .job-c-stock { width: 1%; white-space: nowrap; } .job-c-status { width: 1%; white-space: nowrap; } .job-c-when { width: 1%; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; } .job-c-by { width: 1%; white-space: nowrap; color: var(--muted); } /* The widest column, and until now one grey run-on line that read the same on every row. Three parts: what was run, what it was run over, and the sentence under them. The middle one is the symbol - the part somebody scanning a page of fifteen is actually looking for - so it is the part set apart. */ .job-what { font-weight: 600; } .job-where { display: inline-block; margin-left: 7px; padding: 0 5px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); letter-spacing: .02em; white-space: nowrap; } /* A pass over everything is not a stock and must not read as one: no chip, and set as the phrase it is. */ .job-where.all { border-color: transparent; background: none; padding: 0; font-style: italic; letter-spacing: 0; } /* The one expander, hard right and sized to its label. The row itself does not open anything: it opens a modal, and a row that did that on any click through it would take the whole log away from under a mis-aimed press. */ .job-c-open { width: 1%; white-space: nowrap; text-align: right; } /* Over `.job-table th`, which sets every heading left: the column is as narrow as its button, so a heading anywhere but over it reads as a stray label. */ .job-table th.job-c-open { text-align: right; } /* The log, at the density a log wants to be read at. `.job-table-tight` and not the shared `.job-table` rules above, because those are also Run Jobs, Queue stats, Checklist and Fetch Theory - four tables of a dozen rows each that are read one row at a time, where 5px of breathing room is worth what it costs. This one is fifteen near-identical rows scanned as a block, and it is the only one on the page with a pager under it: every pixel of row height is a row that did not fit. Most of the doubling is not here. It came from the row losing its second line - the grey "waiting for a worker" that every queued row carried, and the two clamped lines of traceback that every failed one did - which is now the pill's tooltip and the mark beside it. A page of fifteen was between fifteen and forty-five lines tall and no two pages were the same height; it is fifteen now. The padding below is the rest of it. */ .job-table-tight th { padding: 3px 8px; } .job-table-tight td { padding: 2px 8px; font-size: var(--fs-xs); line-height: 1.25; } /* The pill sets the row's height, not the text beside it, so shrinking one without the other buys nothing. Same colours, same six words, tighter box. */ .job-table-tight .job-pill { padding: 0 6px; min-width: 54px; } /* The button too, for the same reason - it is the tallest thing in its cell. */ .job-table-tight .job-open { padding: 0 7px; } /* Job execution is one working surface with two different reading modes. The controls and queue-health figures form a stable rail on the left; the log is the wide, scannable surface on the right. `minmax(0, 1fr)` is important here: it lets the table's own scroll box contain a widened or user-resized table instead of making the whole page grow sideways. */ .job-execution-layout { display: grid; grid-template-columns: minmax(350px, 390px) minmax(0, 1fr); gap: 14px; align-items: start; } .job-execution-sidebar { min-width: 0; padding-right: 14px; border-right: 1px solid var(--line); } .job-execution-sidebar > .hint { margin-bottom: 10px; } .job-execution-sidebar .job-bar { align-items: stretch; } .job-execution-sidebar .toolbar-gap { display: none; } .job-execution-table { min-width: 0; } .job-execution-table .tk-bar { margin-top: 0; } /* The rail is useful only while it leaves the log enough room to scan. Below that point the same semantic groups stack in their DOM order: explanation, controls and statistics, then the table. */ @media (max-width: 1050px) { .job-execution-layout { grid-template-columns: minmax(0, 1fr); } .job-execution-sidebar { padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid var(--line); } } /* The marks beside the pill: why it failed, and how many workers have died holding it. Both are exceptions - most rows carry neither - which is why they are marks rather than a column that would be empty on fourteen rows in fifteen. The whole message is on the tooltip, and the whole of *that* is in the Details popup. */ .job-flag { display: inline-flex; align-items: center; margin-left: 5px; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; cursor: help; } .job-flag svg { display: block; } .job-flag.bad { color: var(--negative); } .job-flag.warn { color: var(--warn); } /* The list as a card. Without a frame the rows floated on the panel with the heading band hanging in mid-air over them; with one the table reads as the single object it is, and the band has something to sit inside. `.table-scroll` is shared, so this is said on the four panels that own one of the tables above and nowhere else. */ .job-panel .table-scroll, .queue-panel .table-scroll, .run-jobs-panel .table-scroll, .stock-checklist .table-scroll, .theory-panel .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } /* Fifteen outlined buttons down the right edge were the loudest column on a panel whose subject is everywhere else. Ghosted to a word until the row is under the pointer, where the frame comes back and says it is pressable - the same trade `.row-btn` makes in the grid, except the word stays legible throughout rather than fading out, because this is the row's only way in. */ .job-open { border-color: transparent; background: transparent; color: var(--muted); } .job-row:hover .job-open { border-color: var(--line); background: var(--panel-2); color: var(--text); } .job-row:hover .job-open:hover, .job-open:focus-visible { border-color: var(--accent); } /* Open is marked softly rather than with the filled `.btn.on` used on chart toggles: a page of fifteen rows carries fifteen of these, and one of them filled in the accent would be the loudest thing on the panel. The row behind it is already tinted, which is where the eye actually lands. */ .job-open.on, .job-open.on:hover, .job-row:hover .job-open.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); } /* The three filters over the log. The stock one is a box to type in rather than a menu - the log carries hundreds of symbols - so it is sized the way the Data Fetch Stats search box is, wide enough for the longest symbol and its magnifier without being the widest thing on the toolbar. The two menus beside it are capped: the fetch menu's longest entry is `BSE filings (all stocks)`, and a select left to size itself off that would sit wider than everything else on the bar put together. */ .job-bar .input-icon > input[type="text"] { min-width: 150px; } .job-bar select { max-width: 170px; } /* The status filter is the one of the three that is not a menu of single choices: the questions asked of the log are sets - the three states that mean "still going", the two that mean "did not finish" - so it is a panel of tick-boxes behind a button that says what is ticked. The button wears the accent while anything is, because a filter that is on and looks exactly like a filter that is off is how a reader ends up believing the log is empty. */ .job-status-btn { display: inline-flex; align-items: center; gap: 5px; } .job-status-btn svg { flex: none; opacity: 0.75; } .job-status-btn.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); } .job-status-btn.on svg { opacity: 1; } /* Narrower than the standard 330px: six pills and three shortcuts, none of them long. Capped to the viewport so the phone rule further up has nothing left to correct. */ .job-status-panel { width: min(260px, calc(100vw - 24px)); } .job-status-opts { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; } /* The pill the rows themselves wear, so the control and the column it filters read as one vocabulary - the tick is the only thing this adds to it. */ .job-status-opt .job-pill { pointer-events: none; } .job-status-opt input { margin: 0; cursor: pointer; } .job-status-opt.on { background: var(--accent-soft); } .job-status-opt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* The two sets worth a press of their own, and the way back to every job. A row under the boxes rather than three more boxes in them: they are not a seventh and eighth state, they are shortcuts to combinations of the six above. */ .job-status-panel .picker-actions { margin: 0; border-top: 1px solid var(--line); padding-top: 8px; } /* --- the metrics bar over the log ---------------------------------------- Queue health, which the log itself cannot answer. Fifteen rows of a table that only grows say what became of fifteen jobs; they cannot say whether the backlog is falling, or whether this morning was worse than the last hour. Five states down, five windows across, and every cell in it is the filter it counts - press one and the list below is narrowed to exactly those rows. Drawn as a table rather than as a row of chips because it is one: the value in it is the comparison down a column and across a row, and a wrapped ribbon of thirty "Failed 1 Hr 0" chips has neither axis. It is also why the whole block is about six compact rows tall - roughly what the table below it just got back by dropping its second line. */ .job-metrics { /* Sized to its own numbers, not to the panel. Stretched to a 1400px window, five counts sit a hand's width apart and the comparison across a row - the one thing the bar is read for - stops being readable at a glance. Capped at the panel so a narrow window scrolls the bar rather than the page. */ width: fit-content; max-width: 100%; margin: 8px 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow-x: auto; } .job-metrics-table { width: auto; border-collapse: separate; border-spacing: 0; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } /* The heading band, matching every other table under this tab - said again rather than shared, because those are `.job-table`'s and this one is tighter than they are. */ .job-metrics-table thead th { background: var(--panel-2); border-bottom: 1px solid var(--line); font-weight: 600; color: var(--muted); white-space: nowrap; } /* The window headings are buttons that fill their cell - the press target is the column, not the word - so the padding is on the button and the cell has none. The corner is plain text and keeps its own. */ .job-metric-col { padding: 0; } .job-metric-corner { padding: 4px 10px; text-align: left; text-transform: uppercase; letter-spacing: .05em; } /* A column heading is a button - it puts the list under that window and leaves the states alone - so it fills its cell rather than sitting in it, or the press target would be the word and not the column. */ .job-metric-head, .job-metric-label, .job-metric { display: block; width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .job-metric-head { padding: 4px 10px; text-align: right; text-transform: uppercase; letter-spacing: .05em; } .job-metric-head:hover, .job-metric-label:hover, .job-metric:hover { background: var(--row-hover); } .job-metric-head:focus-visible, .job-metric-label:focus-visible, .job-metric:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* The window that is on, marked on the heading and down the column. Softer than the cell mark below it, because a whole column tinted as loudly as one cell would leave nothing to find. */ .job-metric-head.on { color: var(--accent); } .job-metric-col.on { box-shadow: inset 0 -2px 0 var(--accent); } .job-metrics-table tbody th, .job-metrics-table tbody td { padding: 0; border-bottom: 1px solid var(--line-soft); } .job-metrics-table tbody tr:last-child th, .job-metrics-table tbody tr:last-child td { border-bottom: 0; } .job-metric-name { width: 1%; white-space: nowrap; text-align: left; } .job-metric-label { display: flex; align-items: center; gap: 5px; padding: 3px 10px; font-weight: 600; text-align: left; } .job-metric-label svg { flex: none; } /* The count. Right-aligned and tabular so a column of them lines up on the units digit, which is the whole point of reading down one. */ .job-metric { /* Wide enough that three digits and one digit share a left edge, so a column of counts reads as a column rather than as five ragged numbers. */ min-width: 52px; padding: 3px 10px; text-align: right; font-weight: 600; } /* A nought is still pressable - "nothing failed in the last hour" is a real answer, and a control that disappears when its count reaches nought disappears at the exact moment somebody is watching it - but it is not worth the eye stopping on. */ .job-metric.zero { color: var(--muted); font-weight: 400; opacity: .55; } /* The cell the list below is actually under. Filled rather than outlined: it is one cell in thirty and it has to be findable without hunting. */ .job-metric.on, .job-metric.on:hover { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); } .job-metric.on.zero { opacity: 1; font-weight: 600; } .job-metric-row.on .job-metric-label { color: var(--accent); } /* The row hues, borrowed from `.job-pill` above so the bar and the column of pills it filters are one vocabulary rather than two palettes that happen to sit on one page. Only the label is tinted; the counts stay body text, because thirty coloured numbers is a heat map of nothing. */ .job-metric-row[data-metric-row="running"] .job-metric-label { color: var(--accent); } .job-metric-row[data-metric-row="succeeded"] .job-metric-label { color: var(--positive); } .job-metric-row[data-metric-row="failed"] .job-metric-label { color: var(--negative); } .job-metric-row[data-metric-row="cancelled"] .job-metric-label { color: var(--muted); font-style: italic; } /* Queued keeps the body colour: it is the state a job spends most of its life in and the one nobody needs to be drawn to - the same argument `.job-pill.queued` makes for being the quietest of the six. */ /* The bar's own read failing, said where the bar is. The counts already in hand stay on the screen behind it - a bar blanked on a failed read would say every state is empty, which is a worse lie than a count a few seconds old. */ .job-metrics-error { max-width: 46ch; display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 5px 10px; border-bottom: 1px solid var(--line-soft); color: var(--warn); } .job-metrics-error svg { flex: none; margin-top: 1px; } .job-metrics.stale .job-metrics-table { opacity: .7; } /* The shared stock picker - `stockpicker.js`, drawn wherever "which stock" is asked. It lives here rather than under the Jobs page it grew out of because it is not the Jobs page's control any more. The list is drawn by the page rather than left to the browser for one reason: a `datalist` or a `select` opens a menu the page has no say in, one symbol per full-height row, and several hundred stocks that way is a scroll however short the names are. A stock symbol is eight characters in a row twenty-two wide, so the list is a grid instead - three columns of tight rows put roughly forty on screen where the browser's list managed a dozen. Wider than the standard 330px panel to fit those columns, and capped to the viewport so the phone rule further up has nothing to correct. */ .stock-pick-panel { width: min(420px, calc(100vw - 24px)); padding: 6px; } .stock-pick-count { margin: 0 0 5px; font-size: var(--fs-xs); } /* The two tick-boxes over the list: what else to offer. A row of their own above the count, because they change what the count is counting - reading "42 stocks you hold" with the control that widens it sitting underneath would be reading the answer before the question. */ .stock-pick-scopes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 6px; margin: 0 0 6px; border-bottom: 1px solid var(--line); } /* A label rather than a box with text beside it, so the word is part of the hit area - the same trade the grid's toolbar toggles make. Not `.toolbar .toggle` itself: that rule is scoped to a toolbar and this panel is not one, and widening it to reach here would put the grid's tick-boxes at the mercy of a dropdown's styling. */ .stock-pick-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); cursor: pointer; user-select: none; white-space: nowrap; } .stock-pick-toggle:hover { border-color: var(--accent); color: var(--text); } .stock-pick-toggle input { margin: 0; cursor: pointer; } .stock-pick-toggle svg { flex: none; opacity: 0.75; } /* Ticked reads as the stronger state, because it is: the list is showing more than the box beside it would. */ .stock-pick-toggle.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); } .stock-pick-toggle.on svg { opacity: 1; } .stock-pick-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* What ticking the box would add - "+312". Dimmer than the label, because it is a fact about the list rather than part of the control's name. */ .stock-pick-note { color: var(--muted); font-variant-numeric: tabular-nums; } .stock-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1px 4px; /* The widened list is the whole research universe - several hundred names - and a panel that tall would run off the bottom of the screen with its own tick-boxes scrolled past. Capped and scrolled here rather than on the panel so the ticks and the count stay in view while the stocks move. */ max-height: min(46vh, 340px); overflow-y: auto; } /* A row of the list, not a button on a toolbar: no frame, no fill, and the hover is the only thing that says it is pressable - the same trade the job log's own Details buttons make, and for the same reason. Forty outlined buttons in a grid would be the loudest thing on the page. */ .stock-pick-opt { border: 0; background: none; padding: 2px 5px; border-radius: var(--radius-xs); font: inherit; font-size: var(--fs-sm); color: var(--text); text-align: left; cursor: pointer; /* A symbol never wraps: a two-line row would break the grid's rhythm, and the whole symbol is in the box the moment it is picked anyway. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* The hue on the left edge says which of the three lists a name came off. Transparent on a plain holding, which is the default scope: a list that is all one kind needs no key, and the marks appear exactly when a tick has made the list mean more than one thing. */ border-left: 2px solid transparent; } .stock-pick-opt:hover { background: var(--panel-2); } .stock-pick-opt:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; } .stock-pick-opt.on { color: var(--accent); background: var(--accent-soft); } /* Watched-not-held and deleted, the two a tick brings in. Held keeps the plain text colour because it is the base of every list this control draws. */ .stock-pick-opt.watched { border-left-color: color-mix(in srgb, var(--accent) 60%, transparent); } .stock-pick-opt.gone { border-left-color: var(--negative); color: var(--muted); } /* The way back to no stock in particular. Spans the grid rather than sitting as one cell among the symbols, because it is not one of them - it is the row that undoes the rest. */ .stock-pick-opt.clear { grid-column: 1 / -1; color: var(--muted); } .stock-pick-opt.clear:hover { color: var(--text); } /* One job, in a box of its own: what it changed and then what it printed, on one scroll. It borrows `.modal` for the frame the way `.notes-modal` does and overrides only what a box of output needs - both panels inside it are capped scrollers where they sit in a table row, and a scroller inside a scroller is exactly what a popup this size exists to avoid. `.modal-body` is the one thing that scrolls. */ .job-modal .job-log, .job-modal .job-result-table { max-height: none; } /* The output half, under a heading of its own now that it is stacked under the figures rather than behind a tab of its own. Same size as `.job-result h4` over the table above it, so the two halves read as two halves. */ .job-output { margin: 2px 0 0; } .job-output h4 { margin: 0 0 6px; font-size: var(--fs-sm); } .job-modal .job-result-table { display: table; overflow: visible; } /* The reason under the name of the fetch, on its own line: it is the sentence that says why a job failed or what it is waiting for, and inline it would push the columns about. */ /* The pager under the log. Nothing on the left but which rows these are, the two buttons hard right - the log is read top-down, so the control that moves it belongs after the last row rather than above the first. */ /* Two logs page, and they page the same way. Stated as one rule for the reason the reorder marks below the grid are: the Jobs log turns pages against a SQL offset and the Reports log against an array it already holds, which is a difference in where the rows come from and no difference at all in what the footer under them looks like. */ .job-pager, .dmlog-pager { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .job-pager-range { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } /* The sentence that was under the name of the fetch - why it failed, or what it is waiting for - is not drawn on the row any more. It cost every one of fifteen rows a second line, and every queued row carried one ("waiting for a worker") that said nothing the pill beside it had not. It is the pill's tooltip now, and where it is a failure it is also a mark beside the pill: `.job-flag`, above. The whole of it is still in the Details popup, which is what the row's one button is for. */ .job-command code { font-size: var(--fs-sm); word-break: break-all; } .job-error { color: var(--negative); } /* What the fetch actually brought in, above the output rather than below it: it is what the job was for, and the log is what you read when it is wrong. Old value beside new in two columns - a figure alone cannot say whether the run changed anything, which is the whole question. */ .job-result { margin: 2px 0 10px; } .job-result h4 { margin: 0 0 6px; font-size: var(--fs-sm); } .job-result-source { margin: 8px 0 3px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .job-result-count { margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: var(--fs-xs); } /* Capped and scrolled for the reason `.job-log` is: a first fetch of a stock nothing has been run for moves every field it has. */ .job-result-table { width: 100%; max-width: 720px; border-collapse: collapse; display: block; max-height: 300px; overflow: auto; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .job-result-table th { text-align: left; font-weight: 400; color: var(--muted); padding: 1px 10px 1px 0; white-space: nowrap; } .job-result-table td { padding: 1px 10px 1px 0; } /* The old value is context, the new one is the answer - so only one of them is set in the body colour. The arrow is drawn rather than written so the two columns still line up when a value is missing. */ .job-result-was { color: var(--muted); } .job-result-now::before { content: '→'; margin-right: 6px; color: var(--muted); } .job-transport { color: var(--muted); } /* Said only when something is live AND following is switched off, which is the one combination where a still page means nothing is wrong. It has to read as a state rather than a failure - so `--warn` and a left rule, the shape every other "this is on purpose" line in the app uses, rather than the red of `.job-error`. The icon is the same one the Refresh button carries, because pressing that is the whole of what this line asks for. */ /* Two flex items and no more, which is why the sentence is wrapped in a span in the markup: bare text beside an element becomes an anonymous flex item of its own, so the `` in the middle would have cut the line into three boxes laid out side by side instead of one paragraph that wraps. */ .job-paused { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 8px; padding: 6px 9px; border-left: 2px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--text); line-height: 1.5; } .job-paused svg { flex: none; color: var(--warn); transform: translateY(2px); } /* The child's output. Capped and scrolled rather than allowed to grow: a screener pass prints thousands of lines and an expanded row that pushed the rest of the table off the screen would be unusable. */ .job-log { max-height: 320px; overflow: auto; margin: 6px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; word-break: break-word; } /* The popup's Fetch menu. Wider than the Export panel beside it because its buttons carry utility names rather than two verbs. */ .fetch-panel { min-width: 260px; } .fetch-group + .fetch-group { margin-top: 8px; } /* The heading takes its group's hue, and the rule after it fades out of the same one. Unlike `.sc-card-head`, where the mark is coloured and the label stays in the body colour: there the hue competes with a delta pill that carries the verdict, and here there is nothing to compete with - the heading IS the group, and five coloured words down a menu are what let a reader find Scrapers without reading Market, Filings and Models on the way. The ten steps in the token block clear 4.5:1 on both panel surfaces, which is what makes colouring text rather than a graphic honest. The rule is `flex: 1` on a pseudo-element rather than a border under the heading, so it starts where the word ends: a full-width line reads as a divider between groups, and this is a label with its group's colour trailing off it. 35% because a hairline at full strength would be louder than the buttons under it. */ .fetch-group h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fetch-mark, var(--muted)); } .fetch-group h5::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--fetch-mark, var(--line)) 35%, transparent); } /* Each button is a mark and two lines: the utility, and when its data was last brought in for this stock. The two lines are stacked rather than set beside each other, so the labels stay in one column and the dates in another - the menu is read down the dates ("what here is stale") far more often than across - and the mark stands outside that column, centred on both. */ .fetch-btn { display: inline-flex; align-items: center; gap: 6px; line-height: 1.25; padding: 3px 8px; } .fetch-btn-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; } /* The mark on a tinted ground of its own group's hue - the same chip `.sc-card-head .icon` wears, at the same 14%, and for the same reason: a bare 13px stroke is a shape the eye has to look for, and a filled chip is one it lands on. `content-box` because the size rides on the svg's own width and height attributes, so the padding has to sit outside that box. The hover step is what makes the chip read as part of the button rather than as a sticker on it: the whole control lights, not just its border. */ .fetch-btn .icon { flex: none; color: var(--fetch-mark, var(--muted)); box-sizing: content-box; padding: 3px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fetch-mark, var(--muted)) 14%, transparent); } .fetch-btn:hover .icon { background: color-mix(in srgb, var(--fetch-mark, var(--muted)) 28%, transparent); } /* One hue per group, carried on the wrapper so the heading and every mark under it read the same `--fetch-mark`. Slugged from the group's own name by `bandSlug` - the same bargain the size bands strike, and the reason a group added to `jobs.JOB_TYPES` draws in the muted base rather than unstyled. */ .fetch-mark-market { --fetch-mark: var(--fetch-market); } .fetch-mark-filings { --fetch-mark: var(--fetch-filings); } .fetch-mark-models { --fetch-mark: var(--fetch-models); } .fetch-mark-pipeline { --fetch-mark: var(--fetch-pipeline); } .fetch-mark-scrapers { --fetch-mark: var(--fetch-scrapers); } .fetch-when { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); } /* The bracketed word after the label - (LLM), (API), (Local) - which says what pressing the button reaches for. `jobs.JobType.call` chooses it; see the note there for why it is declared per type rather than read off the group. Hue and weight together, because the button already has two channels working - the group's colour on the chipped mark, one of three age tints on the date - and a third that is only colour would be read as a fourth group. So the three call hues are backed by weight as well: the model call is violet AND the heaviest of the three, the free fetch is teal at the base weight, and the one that reaches nothing recedes into muted at 400. Read down a menu the ladder is what shows first; read across one button, the word settles it. */ .fetch-call { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); } .fetch-call.call-llm { color: var(--call-llm); font-weight: 600; } .fetch-call.call-api { color: var(--call-api); } .fetch-call.call-local { color: var(--call-local); font-weight: 400; } /* The same tag on the Jobs tab's Run menu, where it trails a plain one-line label instead of sitting over a date. A word space alone runs the bracket into the label there, so it gets 2px more; the hue needs nothing, the panel is the same surface. */ [data-job-run-panel] .fetch-call { margin-left: 2px; } /* The whole-menu press, above the groups. Full width and ruled off underneath because it is not one more fetch in a row of them - it is the alternative to reading the rows at all, and a button the same size as its neighbours sitting in the same flow would be pressed by accident by somebody aiming at Kite market. The rule is what says the two halves are different questions. */ .fetch-all-group { /* 2px, not 8: `.picker-actions` already carries 6 under the button, and the two together are the 8 that matches the gap below the rule. */ margin: 0 0 8px; padding-bottom: 2px; border-bottom: 1px solid var(--line); /* The accent, not one of the five group hues: this press is not a sixth kind of work, it is the alternative to choosing one - and the accent is what the rest of the application already spends on "the thing to press". */ --fetch-mark: var(--accent); } /* Its own bottom margin is the gap; the sibling rule above would stack a second one on top of it. */ .fetch-all-group + .fetch-group { margin-top: 0; } .fetch-all-btn { width: 100%; } .fetch-all-btn .fetch-btn-label { font-weight: 600; } /* The same three tints the Data Fetch Stats table uses, and the same thresholds behind them - 30 days old, 90 days stale. `never` is not a warning: plenty of these have simply never been asked for, and colouring it red would cry wolf on every stock nobody has run the model over. */ .fetch-when.old { color: var(--warn); } .fetch-when.stale { color: var(--negative); } .fetch-when.never { color: var(--muted); font-style: italic; } /* The popup's AI Analytics menu, the head's third. It borrows the Fetch menu's whole button idiom above - `.fetch-btn`, its stacked two lines, its chipped mark and its three date tints - because the two menus answer the same shape of question about the same stock, and a reader who has learned to scan one for "what here has never been run" should not have to learn a second vocabulary for it. What it adds is only what is genuinely different about spending money. Wider than the Fetch menu because its labels are whole questions - "How does this go to zero?" against "Kite market" - and a question that wraps mid-clause is one the eye has to reassemble. Capped against the viewport as well, because the phone rule further down sets `.dropdown-panel` a width rather than a max-width - so a bare `min-width` would win that fight and hang the panel off the side of a narrow screen. */ .ai-menu-panel { min-width: min(320px, calc(100vw - 24px)); } /* One hue for every question that spends, rather than one per question. Violet because that is what this application already spends on work a machine did on its own - `--fetch-models` on the Fetch menu, `--an-model` on the Analytics tab, `--stance-queue` on the AI page - so the mark says "a model answers this" before the label is read. Four separate identity hues would be four colours saying nothing the four icons do not already say, and would spend the one distinction that matters here on the one that does not. */ .ai-menu-group { --fetch-mark: var(--fetch-models); } /* And the one that does not spend, in the muted base. This is the only colour decision on the panel that carries information: the group under this heading is free, and it has to be visibly not the group above it before a button is pressed rather than after. */ .ai-menu-group.ai-menu-free { --fetch-mark: var(--muted); } /* The line under each heading - what a press in this group costs. One line, at the size of the group headings rather than of the buttons, so it reads as a caption on the heading and not as a first item in the list. */ .ai-menu-group .hint { margin: 0 0 6px; font-size: var(--fs-xs); line-height: 1.4; } /* Full width, stacked. The Fetch menu's buttons sit two and three to a row because a utility name is two words; a question is a sentence, and four of them in a wrapping row would put the state stamps in four different columns - which is the one column this menu is read down. */ .ai-menu-btn { width: 100%; justify-content: flex-start; text-align: left; } /* Drawn dead over a call that is already queued or running, and on a deployment with no API key. The same treatment the AI tab's own Ask button gets, and for the same reason it is not merely greyed: a button that still depresses under the pointer is one somebody presses twice, and here the second press is money. `pointer-events` rather than only opacity, so the tooltip explaining why does not follow the cursor onto a control that cannot act. */ .ai-menu-btn[disabled] { opacity: .45; pointer-events: none; } /* The Details tab's Freshness card, which draws the same twelve stamps down a card instead of across a menu - so it borrows `.fetch-when` and its tints rather than growing a second set that would drift out of step with them. What it adds is the group headings: the card is read to find a gap, and "never" means something different under Scrapers than under App - model. */ .fresh-group + .fresh-group { margin-top: 8px; } .fresh-group h5 { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } /* Size only. The stamp is the row's whole answer here, not a second line under a button, so it reads at the row's size - and the three tints are left untouched, which is the only reason this rule can be one line. */ .fresh-group .fetch-when { font-size: var(--fs-sm); } /* One card per distinct queue. A grid rather than a stack because the deployment can point both lanes at separate queues, and two backlogs are read against each other - "the browser lane is 40 deep and the api lane is empty" is the sentence, and it is not one a reader should have to scroll to build. */ .queue-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .queue-card h4 { display: flex; align-items: center; gap: 8px; text-transform: none; font-size: var(--fs-base); letter-spacing: 0; color: var(--text); } /* FIFO is worth a mark and standard is not: standard is the default everywhere and a badge on every queue would be a badge that says nothing. */ .queue-kind { padding: 1px 6px; border-radius: var(--radius-lg); border: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; } /* Waiting / In flight / Delayed. Equal thirds, so the three are compared by height of digit rather than by position - the eye is looking for which one is not zero. */ .queue-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 6px; } .queue-figure { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-align: center; } .queue-figure-n { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; } .queue-figure-l { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } /* The settings under the figures: label left, value right, one per line. A definition list because that is what it is - and two columns rather than a table because none of these is compared against the row above it. */ .queue-settings { margin: 8px 0 0; } .queue-setting { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid var(--line); } .queue-setting:first-child { border-top: 0; } .queue-setting dt { color: var(--muted); font-size: var(--fs-sm); } .queue-setting dd { margin: 0; font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; } /* What the jobs table says, per lane. Narrow number columns and a wide first one; the frame, the band and the rules are `.job-table`'s, said once above. */ .queue-c-lane { width: 140px; } /* Over the shared band, which sets every heading left: a count set right under a heading set left reads as a column that has come loose from its name, and the band the three now sit in is what made that visible. */ .queue-c-n, .queue-table th.queue-c-n { width: 90px; text-align: right; font-variant-numeric: tabular-nums; } .queue-c-when { width: 140px; color: var(--muted); } /* What Empty the queue did. Left as a line under the toolbar rather than as a toast: it reports two counts a reader may well want to still be there after the refresh it triggers. */ .queue-notice { margin: 2px 0 8px; } /* --- Run Jobs ---------------------------------------------------------- */ /* Eight deliberately detailed columns. The panel scrolls horizontally on a narrow screen rather than collapsing cost, output and next-step prose into an unreadable stack under each job. */ .run-jobs-table { min-width: 1980px; } .run-jobs-table td { vertical-align: top; } .run-c-action { width: 190px; } .run-c-purpose { width: 260px; } .run-c-last { width: 250px; } .run-c-cadence { width: 210px; } .run-c-cost { width: 290px; } .run-c-output { width: 260px; } .run-c-view { width: 220px; } .run-c-next { width: 285px; } .run-c-action .btn { display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 5px 0; } .run-c-action > strong { display: inline; } .run-job-latest { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .run-job-last { font-weight: 600; font-variant-numeric: tabular-nums; } .run-job-never { color: var(--muted); font-style: italic; } .run-job-counts, .run-job-rate, .run-job-sub { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-xs); } .run-job-counts strong { color: var(--text); font-variant-numeric: tabular-nums; } .run-job-sub.loose { font-style: italic; } .run-jobs-notice { margin: 0 0 8px; color: var(--accent); } .run-outcome-link { display: inline-flex; align-items: center; gap: 5px; } /* --- Stock evaluation Checklist -------------------------------------- */ /* A deliberately wide operational table. The stock popup already owns a horizontal scroller; keeping scope, freshness, cadence, cost and outcome in stable columns is much easier to scan than stacking thirteen miniature forms. */ .stock-checklist { min-height: 240px; } .stock-checklist .panel-head { align-items: flex-start; margin-bottom: 8px; } .stock-checklist .panel-head h3 { margin-bottom: 2px; } .stock-checklist .panel-head .hint { max-width: 900px; margin: 0; } .checklist-table { min-width: 1680px; } .checklist-table td { vertical-align: top; } .check-c-step { width: 118px; } .check-c-job { width: 430px; } .check-c-scope { width: 145px; } .check-c-last { width: 190px; } .check-c-cadence { width: 270px; } .check-c-run { width: 330px; } .check-c-outcome { width: 135px; } .check-step { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 6px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; } .check-phase { display: block; margin-top: 5px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; } .check-c-job > strong { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); } .check-meta, .check-why, .check-next, .check-c-cadence > .hint, .check-c-run > .hint, .check-data-at { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.38; } .check-meta { color: var(--muted); text-transform: capitalize; } .check-why { color: var(--muted); } .check-next { color: var(--text); } .check-scope { display: inline-block; padding: 2px 7px; border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } .check-scope.stock { color: var(--accent); border-color: var(--accent); } .check-scope.universe { color: var(--warn); border-color: var(--warn); } .check-run { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .check-job-id { color: var(--muted); font-size: var(--fs-xs); } .check-never, .check-data-at { color: var(--muted); } .check-data-at.missing { font-style: italic; } .check-c-run .btn { display: inline-flex; align-items: center; gap: 5px; } .check-c-outcome { white-space: nowrap; } .check-row.open td, .check-row.open:hover td { background: var(--row-hover); } .check-outcome-row td, .check-outcome-row:hover td { padding: 0; background: var(--panel-2) !important; } .check-outcome { padding: 14px 18px; border-left: 3px solid var(--accent); } .check-outcome-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .check-outcome .job-output { max-height: 360px; overflow: auto; } .check-outcome .job-result-table { display: table; max-height: none; overflow: visible; } .check-notice { margin: 0 0 8px; color: var(--accent); } .check-paused { margin: 0 0 8px; } /* --- Fetch Theory ------------------------------------------------------- */ /* Which lane a fetch runs in, as a badge. Both lanes get one, unlike `.queue-kind` above where only FIFO is marked: there is no default lane, and "api" is as much a fact about where a job can run as "browser" is. Colourless on purpose - it is a category, not a warning. */ .job-lane { padding: 1px 6px; border-radius: var(--radius-lg); border: 1px solid var(--line); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; white-space: nowrap; } .job-lane.browser { border-color: var(--warn); color: var(--warn); } /* The cadence table. Wide prose columns and one narrow count, so the eye runs down "Runs" - which is the column the tab exists for. The frame, the band and the rules are `.job-table`'s, said once above; `top` is this table's own, because its cells hold sentences of uneven length and a row centred on the longest of them leaves the short ones floating. */ .theory-table td { vertical-align: top; } .theory-c-what { width: 180px; } .theory-c-lane { width: 84px; } .theory-c-every { width: 190px; } .theory-c-gate { width: 118px; } .theory-c-writes { color: var(--muted); font-size: var(--fs-sm); } /* A gate the code enforces reads as a fact; one that is nobody's but the reader's reads as a caveat, because running early there is not free. */ .theory-c-gate.loose { color: var(--muted); font-style: italic; } /* The name jumps to the card. A button rather than an anchor - see `bind()` - so it has to be dressed as a link by hand. */ .theory-jump { padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent); font: inherit; text-align: left; } .theory-jump:hover { text-decoration: underline; } /* The group under the name - Scrapers, Models, Pipeline - which is what says what a press will cost before the row is read across. */ .theory-group { display: block; color: var(--muted); font-size: var(--fs-xs); } /* One card per fetch, stacked rather than in a grid: unlike the queue cards these are read one at a time, jumped to from the table, and their field lists run to fifty chips. Two columns of that is a wall. */ .theory-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .theory-card { scroll-margin-top: 8px; } .theory-card h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-transform: none; font-size: var(--fs-base); letter-spacing: 0; color: var(--text); } /* The cadence, on the card's own heading. Pushed right so the twelve of them line up when the cards are scrolled past. */ .theory-every { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; text-transform: none; letter-spacing: 0; } /* Why / what enforces it / what it costs / where it lands. A definition list with the label in a fixed left column, because all four are read as answers to the same four questions on every card and a ragged label edge makes them look like different questions. */ .theory-facts { margin: 8px 0 0; } .theory-facts > div { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); } .theory-facts > div:first-child { border-top: 0; } .theory-facts dt { color: var(--muted); font-size: var(--fs-sm); } .theory-facts dd { margin: 0; font-size: var(--fs-sm); } /* The fields themselves. Chips with the meaning in the tip rather than a second table: screener writes forty-nine of them, and forty-nine rows of `name | sentence` is a page nobody reads to the end. */ .theory-fields { margin-top: 10px; } .theory-fields h5 { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; } .theory-chips { display: flex; flex-wrap: wrap; gap: 4px; } .theory-chip { padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: var(--fs-xs); color: var(--text); cursor: help; } /* --- AI ▸ Summary: the price list --------------------------------------- The one panel on the AI page with no control on it at all, so everything below is about making a deck of money readable rather than about state. It was a table with a stack of explanations under it, and neither half was much use alone — the figures needed the prose to be believed and the prose needed the figures to be worth reading. So each analysis is now ONE card, three to a row, carrying its own numbers and its own reasons. Three things carry the meaning and each has its own device: * the LEVEL — stock, portfolio, universe — is a coloured pill, and the deck is banded by it, because a reader scanning for "which of these are about my book" should not have to read words to find it; * a total that is a FLOOR is marked in the warn colour wherever it appears, on the strip above and on the card's own Spent cell, because an understated bill that looks whole is the one way this panel can mislead; * FREE and NOT RECORDED are drawn differently from each other on purpose. One is a fact and one is a gap, and a shared dash would merge them. What the card layout costs, stated rather than hidden: the figures no longer line up in columns, so comparing cost-per-run across the deck is a scan. The totals strip carries the cross-cutting numbers for exactly that reason. */ .ais-panel h3 { display: flex; align-items: center; gap: 8px; } /* --- the four faces ----------------------------------------------------- Six cards in one scroll was a page nobody reached the bottom of. The split is the one the panel was already grouped by - what the analysis is said about - so the three level tabs are the payload's own level keys and Overview holds the figures that cross them. The nested-strip look: no rule of its own under it, so the page strip's line and this one do not stack into a ladder. Same trade `.subtabs.users` makes. */ .subtabs.ais-subtabs { border-bottom: 0; margin: -2px 0 10px; } .ais-subtabs .subtab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--fs-base); } /* How many cards are behind a tab. On the tab rather than inside it, because the levels are wildly uneven and a reader who cannot see that from the strip clicks through all three to find out. */ .ais-subtabs .count { font-family: var(--mono); font-size: var(--fs-2xs); line-height: 1; padding: 2px 4px; border-radius: var(--radius); background: var(--panel-2); color: var(--muted); } .ais-subtabs .subtab.on .count { background: var(--accent-soft); color: inherit; } /* The Overview index: one row per level, and the second way onto its tab. A button, because that is the whole of what it does - a reader who has just read that Portfolio cost the most should not have to go back up to the strip to open it. */ .ais-index { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; } .ais-index-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; padding: 8px 10px; text-align: left; border: 1px solid var(--card-edge); border-radius: var(--radius-lg); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; } .ais-index-row:hover { border-color: var(--accent); background: var(--row-hover); } .ais-index-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .ais-index-what { flex: 1 1 220px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); } .ais-index-figs { display: flex; gap: 4px 16px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); } .ais-index-figs b { color: var(--text); } .ais-index-figs .ais-floor b { color: var(--warn); } .ais-index-row > .icon { color: var(--muted); flex: 0 0 auto; } /* --- the operating map on Overview ------------------------------------- Two diagrams, because they answer two different questions. The lifecycle is one stock moving from recommendation to a monitored position; the pipeline lanes are shared jobs moving stored data into the screens that read it. Both use real anchors, so a node is also the shortest path to doing the work. Connectors are text arrows rather than lines painted behind the cards. They survive the vertical mobile layout, remain legible in forced colours and do not turn a wrapped row into a line pointing at the wrong node. */ .ais-flow { margin: 18px 0 20px; padding-top: 14px; border-top: 1px solid var(--line); } .ais-flow-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; } .ais-flow-title h4 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text); font-size: var(--fs-md); text-transform: none; letter-spacing: 0; } .ais-flow-title h4 .icon { color: var(--accent); } .ais-flow-title p { margin: 3px 0 0; max-width: 920px; } .ais-flow-key { flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; } .ais-flow-open { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; } /* The six numbered moments. Kept on one line while there is genuinely room; below that they become one vertical path rather than six squeezed columns. */ .ais-life-track { display: flex; align-items: stretch; gap: 7px; margin: 0; padding: 0; list-style: none; } .ais-life-stage { flex: 1 1 0; min-width: 0; padding: 9px 10px; border: 1px solid var(--card-edge); border-top: 3px solid var(--accent); border-radius: var(--radius-lg); background: var(--panel-2); } .ais-life-stage[data-life-stage="1"], .ais-life-stage[data-life-stage="5"] { border-top-color: var(--positive); } .ais-life-stage[data-life-stage="3"] { border-top-color: var(--warn); } .ais-life-head { display: flex; align-items: center; gap: 6px; } .ais-life-head .icon { color: var(--muted); flex: 0 0 auto; } .ais-life-number { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--panel); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; } .ais-life-head h5 { margin: 0; color: var(--text); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; } .ais-life-stage > p { margin: 7px 0; color: var(--muted); font-size: var(--fs-xs); } .ais-life-links { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .ais-life-links a { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; } .ais-life-links a .icon { flex: 0 0 auto; } .ais-flow-arrow { align-self: center; flex: 0 0 auto; color: var(--accent); font-size: var(--fs-lg); font-weight: 600; } /* The loop under the path. Cadence is six visible triggers rather than one vague "review periodically" label: when and what changed are the two inputs to the decision to spend another fetch or model call. */ .ais-reeval { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 3.2fr); gap: 14px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--card-edge); border-left: 3px solid var(--positive); border-radius: var(--radius-lg); background: var(--panel); } .ais-reeval-head { display: flex; align-items: flex-start; gap: 8px; } .ais-reeval-head > .icon { margin-top: 1px; color: var(--positive); } .ais-reeval h5 { margin: 0; color: var(--text); font-size: var(--fs-sm); } .ais-reeval p { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-xs); } .ais-reeval-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; } .ais-reeval-grid > div { min-width: 0; } .ais-reeval-grid strong { display: block; color: var(--text); font-size: var(--fs-xs); } .ais-reeval-grid span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); } /* A lane is a sentence read left to right: purpose, executable jobs, stored output, reader. Jobs are compact nodes rather than a table because order and convergence are the information here. */ .ais-pipeline-map { display: flex; flex-direction: column; gap: 8px; } .ais-pipe-lane { display: grid; grid-template-columns: minmax(155px, .85fr) minmax(330px, 2.25fr) 18px minmax(190px, 1.25fr) 18px minmax(155px, .9fr); align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--card-edge); border-radius: var(--radius-lg); background: var(--panel-2); } .ais-pipe-name { display: flex; align-items: flex-start; gap: 7px; } .ais-pipe-name .icon { flex: 0 0 auto; margin-top: 1px; color: var(--accent); } .ais-pipe-name h5 { margin: 0; color: var(--text); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; } .ais-pipe-jobs { display: flex; align-items: stretch; gap: 5px; min-width: 0; } .ais-pipe-job { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 6px 7px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); } .ais-pipe-job:hover { border-color: var(--accent); background: var(--row-hover); } .ais-pipe-job strong { font-size: var(--fs-xs); } .ais-pipe-job span { color: var(--muted); font-size: var(--fs-2xs); } .ais-pipe-job.dependency { border-style: dashed; } .ais-pipe-job.action { border-color: var(--warn); background: var(--warn-soft); } .ais-pipe-arrow { align-self: center; color: var(--muted); font-weight: 600; } .ais-pipe-arrow.output { text-align: center; color: var(--accent); } .ais-pipe-output { min-width: 0; color: var(--text); font-size: var(--fs-xs); } .ais-pipe-output > span { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; } .ais-pipe-screen { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; padding: 6px 8px; border-left: 3px solid var(--positive); border-radius: var(--radius); background: var(--positive-soft); color: var(--positive); font-size: var(--fs-xs); font-weight: 600; } .ais-flow-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; } .ais-flow-divider::before, .ais-flow-divider::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--line); } /* The sentence at the top of a level's own face, where the group heading used to be. The tab is the heading now, so this is left saying only what the tab name cannot: what the level actually means. */ .ais-level-tip { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; } /* The totals strip. Auto-fit rather than a fixed count: the gap tile only appears when there is something the total does not cover, and a five-column grid with a hole in it reads as a rendering fault. */ .ais-tiles { display: grid; gap: 10px; margin: 12px 0 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .ais-tile { padding: 10px 12px; border: 1px solid var(--card-edge); border-radius: var(--radius-lg); background: var(--panel-2); display: flex; flex-direction: column; gap: 2px; cursor: help; } .ais-tile-label { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; } .ais-tile-value { font-size: var(--fs-lg); font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .ais-tile-inr { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); } .ais-tile-sub { color: var(--muted); font-size: var(--fs-xs); } /* The spend tile when the figure is a floor. Tinted rather than merely annotated: the caveat has to reach somebody who only looks at the number. */ .ais-tile.warn { border-color: var(--warn); background: var(--warn-soft); } .ais-tile.warn .ais-tile-sub { color: var(--warn); } /* What the total does not cover, spelled out. Its own tile rather than a footnote under the deck — a sentence below the cards is not read by somebody looking at a number above them. */ .ais-tile-gap { grid-column: span 2; cursor: default; } .ais-tile-gaps { display: flex; flex-direction: column; gap: 2px; } .ais-tile-gaps span { color: var(--muted); font-size: var(--fs-xs); } /* The deck. Three to a row, and the cards stretch to the tallest in their row so a band of them reads as one shelf rather than as a ragged edge. */ .ais-cards { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } /* `.panel .panel.sub` carries a top margin for the stacked case, which inside a grid would push one card off the line its neighbours sit on. */ .ais-cards .ais-card { margin: 0; display: flex; flex-direction: column; scroll-margin-top: 8px; } .ais-card h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-transform: none; font-size: var(--fs-base); letter-spacing: 0; color: var(--text); } .ais-card-name { font-weight: 600; } /* The level pill goes to the right edge of the heading, which lines the three pills of a row up with each other. */ .ais-card h4 .ais-level { margin-left: auto; } .ais-card > .hint { margin: 0 0 2px; } /* The level heading, spanning the full width of the grid beneath it. A band rather than a column, because the deck is grouped on it. */ .ais-cards .ais-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 6px 2px 4px; border-bottom: 1px solid var(--line); } .ais-cards .ais-group:first-child { padding-top: 0; } .ais-group-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); } .ais-group-tip { color: var(--muted); font-size: var(--fs-xs); } /* The three figures that used to be columns, now a strip inside the card. Its own recessed block so the numbers separate from the prose above and below them without a third border weight. */ .ais-stats { display: grid; gap: 8px; margin: 10px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); } .ais-stat { display: flex; flex-direction: column; gap: 1px; cursor: help; min-width: 0; } .ais-stat-label { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; } .ais-stat-value { font-size: var(--fs-md); font-weight: 600; color: var(--text); } /* The Spent cell when its figure is a floor — tinted for the same reason the tile above is, so the caveat reaches somebody who only reads the number. */ .ais-stat.warn { color: var(--warn); } /* The second line under a figure — the run breakdown, the mean's sample size, what is missing from a total. Always the quiet one. */ .ais-sub { display: block; color: var(--muted); font-size: var(--fs-xs); } .ais-sub.ais-floor, .ais-figures .ais-floor { color: var(--warn); } /* Stock / portfolio / universe. A hue each, because this is what the deck is banded by and the reader is scanning for one of the three rather than reading all of them. */ .ais-level { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; font-size: var(--fs-xs); white-space: nowrap; } .level-stock { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .level-portfolio { background: var(--positive-soft); color: var(--positive); border-color: var(--positive); } .level-universe { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .level-other { background: var(--ghost); color: var(--muted); border-color: var(--line); } /* Whether a second reader gets it free. In the footer beside the run span rather than in the heading: it is a consequence of the level, not a fact competing with the name. */ .ais-shared { color: var(--muted); cursor: help; } .ais-shared.own { color: var(--warn); } /* What stops a run, in two words, beside the cadence it qualifies. No tooltip on it: the sentence it summarises is two rows below, in full. */ .ais-gate { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--ghost); color: var(--muted); font-size: var(--fs-xs); } /* The four states a cost-per-run figure can be in, drawn as four different things on purpose. `free` is a fact and reads as one; `unknown` is a gap and is marked; `none` is simply nothing yet and stays quiet. */ .ais-measured .ais-stat-value { color: var(--text); } .ais-free { color: var(--positive); font-weight: 600; } .ais-unknown .ais-stat-value { color: var(--warn); } .ais-none .ais-stat-value { color: var(--muted); } /* Why that often, what stops a run, what it costs, where it lands. Stacked rather than a label column: a third of a panel is too narrow for two columns of prose, and the label is the shorter half. */ .ais-facts { margin: 10px 0 0; } .ais-facts > div { padding: 5px 0; border-top: 1px solid var(--line); } .ais-facts > div:first-child { border-top: 0; padding-top: 0; } .ais-facts dt { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; } .ais-facts dd { margin: 2px 0 0; font-size: var(--fs-sm); } /* The footer: who pays, the span of runs, and what the bill is missing. Pushed to the bottom so the three cards of a row end on the same line. */ .ais-figures { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); } .ais-figures b { color: var(--text); } @media (max-width: 1200px) { /* Two to a row. Three thirds of a laptop panel is narrower than the cadence sentence, and a card whose every fact wraps to four lines is a column of prose with a heading on it. */ .ais-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ais-life-track { flex-direction: column; } .ais-flow-arrow { transform: rotate(90deg); line-height: 1; } .ais-life-stage { width: 100%; } .ais-life-links { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; } .ais-pipe-lane { grid-template-columns: minmax(145px, .8fr) minmax(300px, 2fr) 16px minmax(180px, 1fr); } .ais-pipe-lane > .ais-pipe-arrow.output:nth-of-type(2) { display: none; } .ais-pipe-screen { grid-column: 4; grid-row: 2; } } @media (max-width: 900px) { .ais-cards { grid-template-columns: minmax(0, 1fr); } .ais-tile-gap { grid-column: span 1; } /* The index row's figures go under its name rather than off the edge. */ .ais-index-what { flex-basis: 100%; } .ais-flow-title { flex-direction: column; } .ais-reeval { grid-template-columns: 1fr; } .ais-reeval-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ais-pipe-lane { display: flex; flex-direction: column; align-items: stretch; } .ais-pipe-jobs { flex-direction: column; } .ais-pipe-arrow { align-self: center; transform: rotate(90deg); line-height: 1; } .ais-pipe-lane > .ais-pipe-arrow.output:nth-of-type(2) { display: block; } .ais-pipe-screen { width: 100%; grid-column: auto; grid-row: auto; } } @media (max-width: 560px) { .ais-reeval-grid { grid-template-columns: 1fr; } } /* --- Universe: the stocks this deployment does NOT hold (F9) --------------- The AI page's one section drawn over the outside rather than the inside. Its shape follows from that: a pipeline strip at the top, three cards in the order the stages run, then a shortlist of proposals and a record of what has been decided. Two things this stylesheet is doing deliberate work for: * the three stages cost genuinely different things, and the cards say so without making the two free actions look secondary. All three buttons use one primary treatment; the paid card is distinguished by its border, cost ticker and explicit copy rather than by making its neighbours look weak. * a proposal is a decision, not a report, so the two buttons that resolve it are the heaviest thing on the card and are drawn apart from the prose. The approve is `--positive`-weighted and the reject is quiet: the asymmetry is the point, because approving is the only control on this page that changes the universe. */ .scout-panel { padding-top: 4px; } /* The Universe workspace is an instrument panel inside the application theme. These are its dark defaults; the light translation below keeps the glass, status colours and cyan/blue identity without turning into a black island on a light page. */ .universe-shell { --scout-bg: #090a0f; --scout-cyan: #00f2fe; --scout-violet: #4facfe; --scout-emerald: #10b981; --scout-yellow: #f59e0b; --scout-crimson: #ef4444; --scout-blue: #3b82f6; --panel: rgba(255, 255, 255, .035); --panel-2: rgba(255, 255, 255, .065); --line: rgba(79, 172, 254, .28); --line-soft: rgba(255, 255, 255, .09); --card-edge: rgba(79, 172, 254, .22); --text: #eafcff; --muted: #8ea6b8; --accent: var(--scout-cyan); --positive: var(--scout-emerald); --negative: var(--scout-crimson); --warn: var(--scout-yellow); position: relative; min-height: 100%; padding: 10px; border: 1px solid rgba(79, 172, 254, .18); border-radius: var(--radius-lg); color: var(--text); background: radial-gradient(circle at 8% -10%, rgba(0, 242, 254, .11), transparent 28%), radial-gradient(circle at 92% 0%, rgba(79, 172, 254, .12), transparent 30%), var(--scout-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 50px rgba(0, 0, 0, .24); } /* Glass surfaces shared by the pipeline, its action cards, and its record. */ .universe-shell .scout-head, .universe-shell .scout-card, .universe-shell .scout-block { border: 1px solid rgba(79, 172, 254, .2); background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .18); backdrop-filter: blur(12px); } .universe-shell .scout-head { border-radius: var(--radius); } .universe-shell .scout-head-title, .universe-shell .scout-block-title { color: #dffcff; } .universe-shell .scout-head-title .icon, .universe-shell .scout-block-title .icon { color: var(--scout-cyan); } /* The funnel across the top. The chart itself is the shared `.flow-*` block; what is here is only the box it sits in - and it needs very little, because the shell above redefines --accent, --positive, --warn, --panel and --card-edge to this tab's own palette, so the diagram arrives wearing it. */ .universe-shell .scout-funnel { margin-top: 10px; padding: 8px 10px 4px; border: 1px solid rgba(0, 242, 254, .16); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .2); } /* Three operational cards: compact, measurable, and still explicit about the very different cost of each pass. */ .universe-shell .scout-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; } .universe-shell .scout-card { position: relative; min-height: 0; border-radius: var(--radius); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .universe-shell .scout-card:hover { transform: translateY(-2px); border-color: rgba(0, 242, 254, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 32px rgba(0, 0, 0, .26), 0 0 20px rgba(0, 242, 254, .08); } .universe-shell .scout-card-paid { border-color: rgba(79, 172, 254, .5); background: linear-gradient(145deg, rgba(59, 130, 246, .09), rgba(255, 255, 255, .025)); } .universe-shell .scout-card-kicker { display: inline-flex; align-items: center; align-self: flex-start; gap: 5px; margin: -2px 0 1px; padding: 2px 7px; border: 1px solid rgba(0, 242, 254, .18); border-radius: var(--radius-pill); color: var(--scout-cyan); background: rgba(0, 242, 254, .055); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; letter-spacing: .035em; } .universe-shell .scout-card-kicker .icon { width: 12px; height: 12px; } .universe-shell .scout-card-meter { height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); } .universe-shell .scout-card-meter > span { display: block; width: var(--scout-progress); min-width: 3px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--scout-violet), var(--scout-cyan)); box-shadow: 0 0 10px rgba(0, 242, 254, .55); transition: width .35s ease; } .universe-shell .scout-card-active { border-color: rgba(0, 242, 254, .62); animation: scout-card-pulse 1.8s ease-in-out infinite; } .universe-shell .scout-card-active .scout-card-meter > span { width: 42%; background-size: 200% 100%; animation: scout-meter-run 1.25s linear infinite; } .universe-shell .scout-card .btn { border-color: rgba(0, 242, 254, .28); background: rgba(0, 242, 254, .07); color: #dcfbff; } .universe-shell .scout-card .btn:hover:not([disabled]) { border-color: var(--scout-cyan); box-shadow: 0 0 15px rgba(0, 242, 254, .18); } .universe-shell .scout-card .btn.primary { border-color: rgba(79, 172, 254, .72); background: linear-gradient(135deg, rgba(59, 130, 246, .82), rgba(0, 242, 254, .55)); color: #fff; box-shadow: 0 0 18px rgba(59, 130, 246, .19); } /* Semantic pills: every state remains written in full and also takes a glow. */ .universe-shell .scout-pill-good { color: var(--scout-emerald); background: rgba(16, 185, 129, .09); box-shadow: 0 0 10px rgba(16, 185, 129, .12); } .universe-shell .scout-pill-mid { color: var(--scout-blue); background: rgba(59, 130, 246, .09); box-shadow: 0 0 10px rgba(59, 130, 246, .12); } .universe-shell .scout-pill-low { color: var(--scout-crimson); background: rgba(239, 68, 68, .08); box-shadow: 0 0 10px rgba(239, 68, 68, .1); } /* Light-mode translation of the same design. Cyan #00f2fe is an illuminated edge on #090a0f, but cannot carry small text on white; the deeper steps below preserve the hue while restoring contrast. Glass becomes white over a pale slate/cyan canvas, and shadows become elevation rather than black glow. */ html[data-theme="light"] .universe-shell { --scout-bg: #f4f9fc; --scout-cyan: #0e7490; --scout-violet: #2563eb; --scout-emerald: #047857; --scout-yellow: #a16207; --scout-crimson: #c2414b; --scout-blue: #1d4ed8; --panel: rgba(255, 255, 255, .78); --panel-2: rgba(241, 245, 249, .84); --line: rgba(14, 116, 144, .24); --line-soft: rgba(71, 85, 105, .12); --card-edge: rgba(14, 116, 144, .2); --text: #102033; --muted: #526579; --accent: var(--scout-cyan); --positive: var(--scout-emerald); --negative: var(--scout-crimson); --warn: var(--scout-yellow); border-color: rgba(14, 116, 144, .2); color: var(--text); background: radial-gradient(circle at 8% -10%, rgba(6, 182, 212, .14), transparent 30%), radial-gradient(circle at 92% 0%, rgba(37, 99, 235, .1), transparent 32%), linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(244, 249, 252, .94)), var(--scout-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 34px rgba(15, 23, 42, .09); } html[data-theme="light"] .universe-shell .scout-head, html[data-theme="light"] .universe-shell .scout-card, html[data-theme="light"] .universe-shell .scout-block { border-color: rgba(14, 116, 144, .2); background: rgba(255, 255, 255, .66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 24px rgba(15, 23, 42, .075); } html[data-theme="light"] .universe-shell .scout-head-title, html[data-theme="light"] .universe-shell .scout-block-title { color: #183044; } html[data-theme="light"] .universe-shell .scout-head-title .icon, html[data-theme="light"] .universe-shell .scout-block-title .icon { color: var(--scout-cyan); } html[data-theme="light"] .universe-shell .scout-funnel { border-color: rgba(14, 116, 144, .18); background: rgba(248, 250, 252, .78); } html[data-theme="light"] .universe-shell .scout-card:hover { border-color: rgba(14, 116, 144, .4); box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(15, 23, 42, .11), 0 0 16px rgba(14, 116, 144, .06); } html[data-theme="light"] .universe-shell .scout-card-paid { border-color: rgba(37, 99, 235, .34); background: linear-gradient(145deg, rgba(219, 234, 254, .62), rgba(255, 255, 255, .7)); } html[data-theme="light"] .universe-shell .scout-card-kicker { border-color: rgba(14, 116, 144, .24); color: #0e657d; background: rgba(6, 182, 212, .075); } html[data-theme="light"] .universe-shell .scout-card-meter { background: rgba(15, 23, 42, .1); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12); } html[data-theme="light"] .universe-shell .scout-card-meter > span { background: linear-gradient(90deg, #2563eb, #0891b2); box-shadow: 0 0 8px rgba(14, 116, 144, .24); } html[data-theme="light"] .universe-shell .scout-card .btn { border-color: rgba(14, 116, 144, .3); color: #0c4a6e; background: rgba(255, 255, 255, .72); } html[data-theme="light"] .universe-shell .scout-card .btn:hover:not([disabled]) { border-color: var(--scout-cyan); background: rgba(6, 182, 212, .08); box-shadow: 0 3px 12px rgba(14, 116, 144, .12); } html[data-theme="light"] .universe-shell .scout-card .btn.primary { border-color: #2563eb; color: #fff; background: linear-gradient(135deg, #2563eb, #0891b2); box-shadow: 0 4px 14px rgba(37, 99, 235, .16); } html[data-theme="light"] .universe-shell .scout-pill-good { background: rgba(4, 120, 87, .07); box-shadow: none; } html[data-theme="light"] .universe-shell .scout-pill-mid { background: rgba(29, 78, 216, .07); box-shadow: none; } html[data-theme="light"] .universe-shell .scout-pill-low { background: rgba(194, 65, 75, .07); box-shadow: none; } html[data-theme="light"] .scout-toast { border-color: rgba(4, 120, 87, .42); color: #065f46; background: rgba(240, 253, 250, .96); box-shadow: 0 10px 30px rgba(15, 23, 42, .16), 0 0 14px rgba(4, 120, 87, .08); } /* Local confirmations for queued passes and proposal decisions. */ .scout-toast { position: fixed; right: 22px; bottom: 22px; z-index: 320; display: flex; align-items: center; gap: 8px; max-width: min(380px, calc(100vw - 28px)); padding: 9px 13px; border: 1px solid rgba(16, 185, 129, .62); border-radius: var(--radius-sm); color: #d9fff2; background: rgba(9, 24, 22, .94); box-shadow: 0 12px 36px rgba(0, 0, 0, .42), 0 0 20px rgba(16, 185, 129, .13); backdrop-filter: blur(14px); animation: scout-toast-in .22s ease-out; } .scout-toast .icon { color: var(--scout-emerald, #10b981); } @keyframes scout-card-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(0, 242, 254, 0); } 50% { box-shadow: 0 0 24px rgba(0, 242, 254, .15); } } @keyframes scout-meter-run { from { transform: translateX(-115%); } to { transform: translateX(260%); } } @keyframes scout-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 1050px) { .universe-shell .scout-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .universe-shell { padding: 7px; } .universe-shell .scout-cards { grid-template-columns: minmax(0, 1fr); } .scout-toast { right: 14px; bottom: 14px; } } @media (prefers-reduced-motion: reduce) { .universe-shell .scout-card, .universe-shell .scout-card-meter > span { transition: none; } .universe-shell .scout-card-active, .universe-shell .scout-card-active .scout-card-meter > span, .scout-toast { animation: none; } } /* The frame at the top. Same object as `.score-head` and styled with it in mind: always current, always free, and boxed so it does not read as the first paragraph of the shortlist underneath. */ .scout-head { border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); padding: 12px 14px; } .scout-head-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .scout-head-what { margin: 0 0 10px; } .scout-empty { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: var(--radius-xs); font-size: var(--fs-md); } .scout-empty svg { color: var(--accent); flex: 0 0 auto; } /* The funnel, outside the Universe shell's own palette. The diagram is the shared `.flow-*` block; this is only the box around it. */ .scout-funnel { margin: 0; } .scout-pool { margin: 8px 0 0; } /* The acceptance rate and the bill, side by side - the two figures this feature's own review turns on. */ .scout-totals { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .scout-total-cell { display: flex; flex-direction: column; gap: 1px; } .scout-total-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .scout-total-value { font-size: var(--fs-md); font-variant-numeric: tabular-nums; } /* Nothing decided yet is an em dash, not a 0% - see `pct` in scout.js. */ .scout-total-nil .scout-total-value { color: var(--muted); } /* The money cell. Tinted because it is the one figure on this header that is an actual cost rather than a count, and the whole reason the strip below it exists is that this number used to be wrong. */ .scout-total-spend .scout-total-value { color: var(--accent); font-weight: 600; } /* What the bill is made of: the calls that proposed, the calls that passed over, the calls that failed - and the confidence spread beside them, because a shortlist whose every row claims the same confidence is a filter worth looking at and nothing else on the page would say so. */ .scout-spend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); } .scout-spend-leg, .scout-spend-conf, .scout-spend-gap { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } .scout-spend-leg b, .scout-spend-conf b { color: var(--text); font-weight: 600; } .scout-spend-leg svg, .scout-spend-conf svg, .scout-spend-gap svg { width: 12px; height: 12px; } .scout-spend-usd { color: var(--accent); } .scout-spend-conf { padding: 1px 7px; border: 1px solid var(--line-soft); border-radius: 999px; gap: 7px; } /* Every proposal at the same confidence. Warned rather than hidden: this is exactly the state the field spent thirty proposals in without anybody noticing, and a quiet header is what let it. */ .scout-spend-conf-flat { border-color: var(--warn); color: var(--warn); } .scout-spend-conf-flat b { color: var(--warn); } .scout-spread-leg { display: inline-flex; gap: 2px; } .scout-spread-high b { color: var(--positive); } .scout-spread-medium b { color: var(--accent); } .scout-spread-low b { color: var(--muted); } .scout-spread-nil, .scout-spread-nil b { color: var(--muted); opacity: .55; } .scout-spend-gap { color: var(--warn); } /* The three passes. `.daymove-card` whole, borrowed as the Scoreboard's is. */ .scout-cards { margin-top: 12px; } .scout-card { min-width: 0; } /* The one that spends. A tinted edge rather than a badge: the card's own text already says it costs money, and a second announcement would be shouting. */ .scout-card-paid { border-color: var(--accent); } .scout-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .scout-count { font-variant-numeric: tabular-nums; } .scout-when, .scout-none { color: var(--muted); } /* --- the shortlist ------------------------------------------------------- */ .scout-block { margin-top: 18px; } .scout-block-title { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: var(--fs-md); } .scout-block-what { margin: 0 0 10px; } /* Six columns - who, when, how well it was seen, why, on what, and the decision - because ten proposals are a list to be worked down rather than ten documents to be read. Wider than a phone, so it scrolls inside its own box like the record below it. */ .scout-open { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: var(--fs-base); } .scout-open th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); white-space: nowrap; } .scout-open td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .scout-open tbody tr:last-child td { border-bottom: 0; } .scout-open tbody tr:hover { background: var(--row-hover); } /* The name column, stacked: symbol, company, and the one mark that has to be read beside the name. The date and the confidence used to be crammed in here too and are columns of their own now - a fifty-row shortlist is triaged on both, and neither can be compared down a column while it is a grey fourth line in somebody else's cell. */ .scout-stock-cell { width: 1%; white-space: nowrap; } .scout-stock-cell .scout-symbol { display: block; } .scout-proposal-name { display: block; color: var(--muted); font-size: var(--fs-sm); max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .scout-proposal-marks { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; } /* When it was proposed: narrow, unwrapped, and read down the column rather than across the row - which is the whole reason it left the name cell. */ .scout-proposed-cell { width: 1%; } /* What the confidence CLAIMS, printed rather than hovered for. The pill alone reads as a grade on the company; the sentence is the only thing that says it is a statement about how well the model could see the business. */ .scout-conf-cell { white-space: normal; min-width: 190px; max-width: 260px; } .scout-conf-what { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; } /* A proposal with no entry price can never be scored, which is the one thing this feature is measured by - so it is marked rather than left to be noticed as a blank column three months later. */ .scout-unpriced { color: var(--warn); font-size: var(--fs-xs); border: 1px solid var(--warn); border-radius: var(--radius-xs); padding: 0 5px; cursor: help; } .scout-thesis { margin: 0 0 8px; font-size: var(--fs-md); } /* The reasoning behind the sentence, folded. A row carrying four facts, four named risks and a checks note is twenty lines tall, and sixty of those is a document rather than a list - so the pane arrives shut and the reader opens the one row they stopped at. See `thesisBody` in scout.js for why the sentence itself stays outside the fold. A native
, as three other places on this page: keyboard-reachable, announced as a disclosure, and open on print however it was left on screen. The browser's triangle is dropped for the chevron in the markup, which can be coloured and lined up with the sentence's first line. */ .scout-fold > summary { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; list-style: none; } .scout-fold > summary::-webkit-details-marker { display: none; } .scout-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Turned rather than swapped, so an open row is legible at a glance down a column of shut ones - the same gesture the review sections make. */ .scout-fold-caret { display: inline-flex; flex: 0 0 auto; margin-top: 3px; color: var(--accent); transition: transform 120ms ease; } .scout-fold[open] > summary .scout-fold-caret { transform: rotate(90deg); } /* `min-width: 0` or the sentence refuses to wrap inside the flex row and drags the cell - and with it the whole table - sideways. */ .scout-fold-line { min-width: 0; flex: 1 1 auto; } /* Two lines while shut. A thesis sentence runs to three or four, and the row height a fold exists to buy back is spent again by the third of them. */ .scout-fold:not([open]) .scout-thesis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 0; } /* What is behind the fold, counted. A shut pane that does not admit it is hiding four risks is a shut pane that gets left shut - and the risks are the half of a thesis this desk is here to read. Gone once it is open, where the things themselves are on screen and a count of them is noise. */ .scout-fold-hints { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; } .scout-fold[open] .scout-fold-hints { display: none; } .scout-fold-hint { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: var(--fs-xs); } .scout-fold-warn { color: var(--warn); } .scout-fold-body { margin-top: 8px; } .scout-facts { margin: 0 0 8px; } .scout-facts dt { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; } .scout-facts dd { margin: 0; font-size: var(--fs-sm); } .scout-concerns { margin: 8px 0; } .scout-concerns h5 { display: flex; align-items: center; gap: 5px; margin: 0 0 3px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; } .scout-concerns svg { color: var(--warn); } .scout-concerns ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); } /* What this build thought of the model's own answer. Warn-coloured because every one of them is a reason to read the proposal harder, and none of them is a fault in the application. */ .scout-checks { margin: 8px 0; padding: 6px 10px 6px 24px; border-left: 3px solid var(--warn); background: var(--panel); border-radius: var(--radius-xs); color: var(--warn); font-size: var(--fs-sm); } .scout-checks li { margin: 2px 0; } /* The scraped lines, as a strip. Verbatim strings from screener.in - a blank cell is a row the page did not have, and it is simply absent here rather than drawn as a zero. */ .scout-figs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); } .scout-fig { display: flex; gap: 4px; align-items: baseline; } .scout-fig-label { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; } .scout-fig-value { font-variant-numeric: tabular-nums; } /* The same strip, inside one table cell. A dozen pairs laid across a card is a strip; laid down a column it is a small grid of stacked label-over-value pairs - which is the only shape in which twelve numbers fit beside a paragraph of thesis without becoming twelve columns. */ .scout-figs-cell { min-width: 208px; max-width: 300px; } .scout-figs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px 12px; margin: 0; padding-top: 0; border-top: 0; } .scout-figs-grid .scout-fig { flex-direction: column; gap: 0; align-items: flex-start; } /* The decision. The heaviest row on the card, and set apart from the prose above it, because this is the only control in the application that puts a stock on the watch list. */ .scout-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .scout-note { flex: 1 1 220px; min-width: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); } .scout-note:focus { outline: none; border-color: var(--accent); } .scout-decide .btn { display: inline-flex; align-items: center; gap: 4px; } .scout-decide .btn[disabled] { opacity: .45; pointer-events: none; } /* In the table it stacks inside its own column, and needs no rule above it - the cell edge is already the separation the card drew a line for. */ .scout-decide-cell { min-width: 208px; } /* Both tables draw the same thesis block, so both need the width a paragraph with a definition list and a bullet list under it actually reads at. The record used to hold one summary sentence and 240px was enough for that. */ .scout-open .scout-thesis-cell, .scout-decided .scout-thesis-cell { min-width: 300px; } .scout-open .scout-thesis, .scout-decided .scout-thesis { margin-bottom: 6px; } .scout-open .scout-decide { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 0; padding-top: 0; border-top: 0; } .scout-open .scout-note { flex: 0 0 auto; } .scout-open .scout-decide .btn { justify-content: center; } /* --- the record ---------------------------------------------------------- */ /* Seven columns is not a table a phone can hold, so it scrolls inside its own box rather than pushing the page sideways - the same bargain the Scoreboard's verdict table makes. */ .scout-table-scroll { overflow-x: auto; } .scout-decided { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-base); } .scout-decided th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); white-space: nowrap; } .scout-decided td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; } /* This is an audit record, so its evidence must be copyable. The shared table engine deliberately disables selection on draggable headers; state the body side explicitly so a drag/select never inherits that control treatment. */ .scout-decided tbody, .scout-decided tbody td, .scout-decided tbody td * { user-select: text; -webkit-user-select: text; } .scout-decided tbody tr:last-child td { border-bottom: 0; } .scout-thesis-cell { white-space: normal; min-width: 240px; } .scout-decided-note { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; } .scout-when-cell { color: var(--muted); white-space: nowrap; } .scout-num { text-align: right; font-variant-numeric: tabular-nums; } .scout-decided th.scout-num { text-align: right; } /* The record's heading and the control over it on one line. The count in the heading is the landmark a reader scans for, so the picker sits beside it rather than above the paragraph explaining why rejections are kept. */ .scout-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* The panel hangs off it, and `.dropdown` on the same element already says `position: relative`. Kept anyway, because the record's heading is the one place that host is not a bare `.dropdown` - it is a flex item on a heading row, and a positioning context that depended on a class somebody could drop in a markup tidy-up would put the panel at the top of the page. */ .scout-colhost { position: relative; } .scout-colhint { margin: 0 0 6px; font-size: var(--fs-xs); line-height: 1.45; } /* Wider than the grid's own panel by ten pixels and for one reason: this list carries the whole column registry under group headings that say where each column came from, and "Watch list · My inputs" is the longest of them. */ .scout-colpanel { width: 340px; } .scout-colpanel .picker-row .icon { opacity: .75; flex: none; } /* No watch-list row behind this cell at all - the name was rejected and never watched, so nothing was ever scraped for it. Muted, because an em dash drawn in the weight of a figure reads as a value rather than as an absence. */ .scout-decided .scout-blank { color: var(--muted); } /* A stock, as a button: the reader's next question is always about the name. The same treatment `.score-symbol` gets. */ .scout-symbol { border: 0; background: transparent; color: var(--text); padding: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; } .scout-symbol:hover { color: var(--accent); } .scout-symbol:hover .scout-symbol-code, .scout-symbol:hover .scout-proposal-name { color: var(--accent); text-decoration: underline; } /* How sure the model is, and what a human decided. One pill shape for both, because they are the same kind of object - a short word carrying a colour. */ .scout-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; cursor: help; } .scout-pill-good { color: var(--positive); } .scout-pill-mid { color: var(--accent); } .scout-pill-low { color: var(--muted); } @media (max-width: 900px) { /* The two the reader did not come for - When and By. Dropped by CLASS rather than by position: they used to be the sixth and seventh columns and now they are wherever the reader's column choice puts them, so an nth-child rule would hide whichever two happened to land there. */ .scout-decided th.scout-when-cell, .scout-decided td.scout-when-cell { display: none; } .scout-decided { min-width: 420px; } /* The shortlist keeps all six - none of them is the one the reader did not come for - and scrolls instead, a little tighter than on the desktop. */ .scout-open { min-width: 940px; } .scout-figs-cell, .scout-decide-cell { min-width: 180px; } .scout-open .scout-thesis-cell, .scout-decided .scout-thesis-cell { min-width: 240px; } .scout-conf-cell { min-width: 150px; max-width: 200px; } } /* --- Universe / List of Stocks: the pool as companies ---------------------- The second of Universe's three halves, and the one place in this application where a table of a thousand unfamiliar tickers has to be scannable. Two decisions carry that: * the stage is a toned pill rather than a word, so "approved" and "barred" do not look alike down a long column - but it is a WORD in a pill, never a colour alone, so the table still reads in greyscale; * a row that is out - barred, passed over, rejected - is dimmed rather than hidden. The pool's dead ends are most of it, and a list that quietly showed only the live names would be the same lie as a pipeline strip with no zeroes on it. The furniture is the Universe block's above and the News feed's next door: `.scout-head` for the frame, the chip idiom for the stage filter, the same table metrics. Three tables in three dialects would make one page look like three features. */ .pool-panel { padding-top: 4px; } .pool-bar { margin: 10px 0 0; } .pool-sort { display: inline-flex; align-items: center; gap: 5px; } .pool-sort-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .pool-bar .btn { display: inline-flex; align-items: center; gap: 4px; } /* The stage filter. `.news-chip`'s shape, without the tone dot: the stage is already a coloured pill on every row of the table below, and a second colour for the same fact on the control above it would be two vocabularies. */ .pool-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; } .pool-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; } .pool-chip:hover { border-color: var(--accent); color: var(--text); } .pool-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pool-chip .n { font-variant-numeric: tabular-nums; opacity: .7; font-size: var(--fs-xs); } .pool-chip.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } /* A stage nothing has reached yet. Dimmed and unpressable rather than hidden, for the reason the pipeline strip draws its zeroes. */ .pool-chip[disabled] { opacity: .4; cursor: default; } .pool-count { margin: 10px 0 6px; } .pool-scroll { overflow-x: auto; } .pool-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .pool-table th { position: sticky; top: 0; z-index: 2; padding: 5px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; white-space: nowrap; } .pool-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .pool-table tbody tr.pool-row:hover { background: var(--row-hover); } .pool-row.on td { background: var(--accent-soft); } /* Barred, passed over, rejected: the pool's dead ends, which are most of it. */ .pool-row-closed .pool-sym, .pool-row-closed .pool-fig, .pool-row-closed .pool-mcap { opacity: .62; } .pool-open { width: 22px; } .pool-toggle { display: inline-flex; border: 0; background: transparent; color: var(--muted); padding: 0; cursor: pointer; } .pool-toggle:hover { color: var(--accent); } .pool-sym { white-space: nowrap; font-weight: 600; } .pool-name { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); white-space: normal; max-width: 220px; } .pool-mcap, .pool-fig { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pool-table th.pool-mcap, .pool-table th.pool-fig { text-align: right; } /* The stage. A word in a pill, and the tone says which of three things has happened: still moving, on the watch list, out. */ .pool-stage { display: inline-block; padding: 0 7px; border-radius: 999px; border: 1px solid currentColor; font-size: var(--fs-xs); white-space: nowrap; } .pool-stagecell { white-space: nowrap; } .pool-stage-good { color: var(--positive); } .pool-stage-mid { color: var(--accent); } .pool-stage-low { color: var(--muted); } /* The threshold a name tripped, or the model's line on it. The widest column and the one worth the width: it is the only text this pool ever produces. */ .pool-said { width: 100%; min-width: 220px; } .pool-said-text { display: inline; line-height: 1.5; } .pool-said .scout-pill { margin-right: 5px; } /* The opened row: the other sixteen scraped figures, and where the name came from. A row rather than a popup because the comparison a reader is making is with the rows above and below it. */ .pool-detail td { background: var(--panel); } .pool-detail-body { padding: 4px 2px 8px; } .pool-detail-said { margin: 0 0 8px; font-size: var(--fs-md); } .pool-detail-facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 8px 0 0; font-size: var(--fs-xs); } .pool-detail-facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .pool-detail-facts dd { margin: 0 8px 0 0; font-variant-numeric: tabular-nums; } .pool-more { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; } .pool-more .btn { display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 900px) { /* The four the reader did not come for. What survives is the name, the size, the stage and what was said about it - which is the whole question this list answers. */ .pool-table th:nth-child(4), .pool-table td:nth-child(4), .pool-table th:nth-child(5), .pool-table td:nth-child(5), .pool-table th:nth-child(6), .pool-table td:nth-child(6), .pool-table th:nth-child(7), .pool-table td:nth-child(7) { display: none; } .pool-table { min-width: 420px; } .pool-name { max-width: 140px; } } /* --- Universe / Criteria: the rubric, drawn ------------------------------ Four stages down the page in the order a company passes through them, each carrying what it costs - free, a page view, a model call, a person - because those four costs are the reason the pipeline is shaped as it is. The one piece of real information design here is the bar's table: a threshold with the number of names it has actually barred beside it. Four numbers in prose is a paragraph nobody rereads; four numbers each carrying how often it bit is a review document, and it is the only argument there will ever be for moving one of them. */ .crit-panel { padding-top: 4px; } .crit-coverage { margin: 8px 0 0; } .crit-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .crit-step { border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); padding: 12px 14px; } .crit-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* The number, because the four are a sequence and not a menu. */ .crit-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; flex: 0 0 auto; } .crit-step-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-md); } .crit-step-title svg { color: var(--accent); } /* What the stage costs, on the stage. The free ones say so quietly; the two that spend something are the ones worth the ink. */ .crit-cost { margin-left: auto; padding: 1px 8px; border: 1px solid var(--warn); border-radius: 999px; color: var(--warn); font-size: var(--fs-xs); white-space: nowrap; } .crit-cost-free { border-color: var(--line); color: var(--muted); } .crit-step-what { margin: 6px 0 10px; } .crit-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0 0 10px; font-size: var(--fs-sm); } .crit-facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); align-self: center; } .crit-facts dd { margin: 0; } .crit-notes { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); } .crit-notes li { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0; line-height: 1.5; } .crit-notes svg { color: var(--muted); flex: 0 0 auto; margin-top: 2px; } .crit-scroll { overflow-x: auto; } .crit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .crit-table th { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; white-space: nowrap; } .crit-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .crit-table tbody tr:last-child td { border-bottom: 0; } .crit-rule { white-space: nowrap; font-weight: 600; } .crit-value { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--accent); } .crit-hits { text-align: right; } .crit-hit { font-variant-numeric: tabular-nums; font-weight: 600; } /* A threshold that has never bitten. Not an error and not a boast - most likely the sweep has not reached enough of the pool yet, which the line above the table says in as many words. */ .crit-hit-nil { color: var(--muted); font-weight: 400; } .crit-why { line-height: 1.5; min-width: 260px; } .crit-blank { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; } .crit-missing { margin: 8px 0 0; } /* What the bar deliberately does not test. A footnote to the table rather than a row in it - it is not a rule and must not be counted as one - but on the page all the same: an unexplained absence is the one the next person "fixes". */ .crit-absent { margin: 8px 0 0; } .crit-absent li { align-items: flex-start; color: var(--muted); } .crit-absent strong { color: var(--text); font-weight: 600; } .crit-absent svg { color: var(--warn); } .crit-model { margin: 0 0 10px; } .crit-line { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0; } .crit-line svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; } .crit-sub { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .crit-sub svg { color: var(--accent); } .crit-asks { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 6px 0 0; font-size: var(--fs-sm); } .crit-asks dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--accent); white-space: nowrap; } .crit-asks dd { margin: 0; line-height: 1.5; } .crit-enum { display: block; color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em; } .crit-confs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .crit-conf { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); } .crit-conf .scout-pill { flex: 0 0 auto; cursor: default; } .crit-conf-what { line-height: 1.5; } .crit-checks { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-sm); } .crit-checks li { margin: 4px 0; line-height: 1.5; } .crit-checks code { margin-right: 6px; color: var(--accent); font-size: var(--fs-xs); } .crit-fold { margin-top: 12px; } .crit-fold > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-sm); color: var(--muted); } .crit-fold > summary:hover { color: var(--text); } .crit-fold > summary svg { color: var(--accent); } /* The instruction as it is sent. Monospaced and wrapped rather than scrolled: it is prose written for a model, and a reader checking what was asked should not have to drag a horizontal bar to read a sentence. */ .crit-prompt { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: var(--panel); color: var(--text); font-size: var(--fs-xs); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .crit-figs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; } .crit-fig { padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted); font-size: var(--fs-xs); } /* The flow chart: one company's journey as a rail of gates, each carrying the exit its failures take. A list rather than an SVG, deliberately. This has to survive a phone, a screen reader and a copy into an email, and a diagram survives none of the three; what makes it read as a chart is the rail down the left and the branch off each node. The branch is the content - a chart of the happy path would be four boxes and an arrow, and the question a reader brings here is always "why is this name not in the pool", which only an exit answers. So an exit is indented off the rail and tinted --negative, and never drawn in the same weight as the gate above it. */ .crit-map { margin-top: 14px; } .crit-flow { position: relative; margin: 10px 0 0; padding: 0; list-style: none; } /* The rail, behind the numbers and stopped short of the last one so the chart ends rather than trailing off the bottom of itself. */ .crit-flow::before { content: ''; position: absolute; top: 12px; bottom: 24px; left: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); } .crit-node { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 0 0 12px; } .crit-node:last-child { padding-bottom: 0; } .crit-node-n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent); border-radius: 50%; background: var(--scout-bg, var(--panel-2)); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); } .crit-node-body { border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel); padding: 9px 11px; } /* The two ends of the journey are terminals rather than gates - nothing is tested at either - and drawing them like the six that do test something would make the chart claim there are eight gates. */ .crit-node[data-flow="listed"] .crit-node-body, .crit-node[data-flow="watch"] .crit-node-body { border-style: dashed; background: transparent; } .crit-node-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: var(--fs-sm); font-weight: 600; } .crit-node-title svg { color: var(--accent); flex: 0 0 auto; } /* The stage a survivor is written to, in the pool filter's own word. It is the join between this chart and the counts on the panel next door. */ .crit-node-stage { padding: 0 6px; border: 1px solid color-mix(in srgb, var(--positive) 45%, transparent); border-radius: var(--radius-pill); color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, transparent); font-size: var(--fs-xs); cursor: help; } .crit-node-cost { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; white-space: nowrap; } .crit-node-what { margin: 4px 0 0; } .crit-gates { margin: 7px 0 0; padding: 0; list-style: none; } .crit-gate { display: flex; align-items: flex-start; gap: 6px; margin: 3px 0; font-size: var(--fs-sm); line-height: 1.45; } .crit-gate svg { color: var(--positive); flex: 0 0 auto; margin-top: 2px; } .crit-node-note { display: flex; align-items: flex-start; gap: 6px; margin: 7px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } .crit-node-note svg { color: var(--warn); flex: 0 0 auto; margin-top: 2px; } .crit-exit { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0 10px; padding: 5px 8px; border-left: 2px solid color-mix(in srgb, var(--negative) 60%, transparent); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: color-mix(in srgb, var(--negative) 7%, transparent); color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } .crit-exit svg { color: var(--negative); flex: 0 0 auto; margin-top: 2px; } /* What the one stage that spends tokens actually spends them on. Numbered, because the order is the argument: the figures are laid out before the call, the call is one name, and the bill is written after it whatever came back. */ .crit-calls-head { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .crit-calls-head svg { color: var(--accent); flex: 0 0 auto; } .crit-calls { margin: 5px 0 0; padding-left: 20px; font-size: var(--fs-sm); } .crit-call { margin: 3px 0; line-height: 1.45; } .crit-call::marker { color: var(--accent); font-weight: 700; } /* Where the data comes from and where it lands. Drawn on every node rather than only the interesting ones: the reader has to be able to see that six of the eight stages reach nothing at all, which is what makes the two that do reach something legible as the expensive ones. */ .crit-io { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } .crit-io svg { flex: 0 0 auto; margin-top: 2px; } .crit-io[data-io="pull"] svg { color: var(--accent); } .crit-io[data-io="write"] svg { color: var(--scout-violet, var(--accent)); } .crit-io-k { margin-right: 6px; padding: 0 5px; border: 1px solid var(--line-soft); border-radius: var(--radius-xs); color: var(--text); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } @media (max-width: 900px) { .crit-facts, .crit-asks { grid-template-columns: minmax(0, 1fr); } .crit-facts dt, .crit-asks dt { margin-top: 6px; } .crit-cost, .crit-node-cost { margin-left: 0; } .crit-table { min-width: 420px; } } /* ── Flow charts, shared ────────────────────────────────────────────────── Two tabs draw a pipeline as a diagram - the Screener's "how this is fed" and the Universe's funnel from the exchange list to the watch list - and they are drawn out of one set of shapes on purpose. Two charts a fortnight apart, each with its own idea of what a node is and how an arrow ends, would be two visual languages a reader has to learn separately, and the second would be the one that never quite matched. See `flowchart.js`. An SVG because the arrows are the content, and one that scrolls inside its own box rather than shrinking: a diagram scaled down to a phone is a diagram nobody can read, and a horizontal scrollbar is at least honest about what it is asking. Every colour here is a token, and every kind a chart uses is named in words in the legend above it. Nothing in either picture is knowable only by hue. */ .flow-wrap { overflow-x: auto; padding: 4px 0 2px; } .flow { display: block; max-width: none; height: auto; } .flow-lane { fill: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .flow-node rect { fill: var(--panel); stroke: var(--card-edge); stroke-width: 1; } .flow-t { fill: var(--text); font-size: 12.5px; font-weight: 600; } .flow-s { fill: var(--muted); font-size: 10.5px; } /* The five kinds. The first three are the three costs this application keeps distinguishing and names in words wherever it draws a button; `main` is the chain itself and `out` is what leaves it. */ .flow-fetch rect { stroke: var(--accent); stroke-width: 2.5; } .flow-paid rect { stroke: var(--warn); stroke-width: 2.5; } .flow-free rect { stroke: var(--positive); stroke-width: 2.5; } .flow-out rect { stroke: var(--line); stroke-dasharray: 4 3; } .flow-main rect { fill: var(--panel-2); stroke: var(--accent); stroke-width: 2; } .flow-edge { fill: none; stroke: var(--muted); stroke-width: 1.4; marker-end: url(#flow-tip); } /* A pass that PRODUCES a stage rather than the flow through it. Dashed, so a reader following the funnel does not count it as a step in it. */ .flow-dash { stroke-dasharray: 3 3; opacity: .8; } .flow-spine { fill: none; stroke: var(--muted); stroke-width: 1.4; opacity: .75; } .flow-tip { fill: var(--muted); } .flow-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; } .flow-key-item { padding: 1px 8px; border-left: 3px solid var(--line); border-radius: var(--radius-xs); background: var(--control-bg); font-size: var(--fs-xs); } .flow-key-fetch { border-left-color: var(--accent); } .flow-key-paid { border-left-color: var(--warn); } .flow-key-free { border-left-color: var(--positive); } .flow-key-main { border-left-color: var(--accent); } .flow-key-out { border-left-color: var(--muted); } /* ── The Screener tab (F12) ─────────────────────────────────────────────── The watch list ranked against itself. It shares the head and stage idiom of the Universe block above deliberately: the two tabs are one pair of questions about membership, and furniture that agreed on nothing would be the fastest way to make them look unrelated. Three things here carry meaning rather than decoration, and none of them is reduced to hue alone: the composite's band, the coverage bar, and the arrow marking an inverted factor. Each pairs its colour with a figure or a shape - the bar prints its own percentage inside it, the composite prints its number, the arrow is a glyph, an unfillable factor is dashed as well as dimmed - so the page still reads in greyscale and to anybody who cannot separate the two ends of the ramp. */ .screen-head { border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); padding: 12px 14px; } .screen-head-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .screen-head-what { margin: 0 0 10px; } .screen-empty { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--muted); } /* The run's counts. The same shape as the scout's stage strip next door. */ .screen-stages { display: flex; flex-wrap: wrap; gap: 6px; } .screen-stage { display: flex; flex-direction: column; gap: 1px; min-width: 78px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel); } .screen-stage-n { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; } .screen-stage-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .screen-stage-nil { opacity: .5; } .screen-stage-nil .screen-stage-n { color: var(--muted); } .screen-when { margin: 8px 0 0; } .screen-when code { font-size: var(--fs-xs); opacity: .8; } /* What the run could NOT do. Warn-tinted, and above the ranking rather than below it: this block exists to make the table less convincing, and a reader who has already scrolled past it has believed the list. */ .screen-honesty { margin: 10px 0 0; padding: 8px 10px 8px 12px; list-style: none; border-left: 3px solid var(--warn); border-radius: var(--radius-xs); background: var(--warn-soft); font-size: var(--fs-sm); } .screen-honesty li { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; } .screen-honesty li:last-child { margin-bottom: 0; } .screen-honesty svg { flex: none; margin-top: 2px; } .screen-gap-list { display: inline-flex; flex-wrap: wrap; gap: 4px; } .screen-gap-list code { padding: 0 4px; border-radius: var(--radius-xs); background: var(--control-bg); font-size: var(--fs-xs); } /* Before you run it. The readiness list, above the operations, because it is what somebody reads to decide which of them to press. A table rather than cards: seven rows that differ only in their numbers are exactly what a table is for, and the one thing a reader does here is compare the state column down the page. The state is a word in a pill, never a bare colour - the whole point of the block is to be readable at a glance by somebody who is about to spend two hours of page views. */ .screen-need-block { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); } .screen-need-scroll { overflow-x: auto; } .screen-need-table { margin-top: 8px; min-width: 720px; } .screen-need-table td { vertical-align: top; } .screen-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .screen-pill-good { color: var(--positive); background: var(--positive-soft); } .screen-pill-mid { color: var(--accent); background: var(--accent-soft); } .screen-pill-low { color: var(--warn); background: var(--warn-soft); } .screen-pill-bad { color: var(--negative); background: var(--negative-soft); } .screen-need-name { white-space: nowrap; } /* The one row that can stop a run, said on the row rather than in a footnote. */ .screen-need-req { margin-left: 6px; padding: 0 5px; border: 1px solid var(--warn); border-radius: var(--radius-xs); color: var(--warn); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; } .screen-need-n { white-space: nowrap; font-variant-numeric: tabular-nums; } .screen-need-age { white-space: nowrap; color: var(--muted); font-size: var(--fs-xs); } .screen-need-stale { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-xs); color: var(--warn); background: var(--warn-soft); } .screen-need-feeds { color: var(--muted); font-size: var(--fs-xs); } .screen-need-act { text-align: right; white-space: nowrap; } /* The two paid passes have a card of their own below, with the figure on it. One press per operation, so the row points rather than duplicating it. */ .screen-need-below { color: var(--muted); font-size: var(--fs-xs); } .screen-need-act .btn .icon { vertical-align: -2px; margin-right: 4px; } /* A press that went somewhere else. Announced, because the job it queued is followed on another tab and nothing on this one would otherwise change. */ .screen-toast { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--positive); border-radius: var(--radius-xs); background: var(--positive-soft); font-size: var(--fs-sm); } .screen-flow-fold > summary { font-size: var(--fs-base); } /* The operations. Three cards on the overview half, in the card idiom the rest of the AI page uses for a control that starts something - the scout's three passes next door are the same object with a progress meter on it. The one thing carrying meaning here is the tag on each heading: two of the three spend money and one does not, and that difference is drawn as a word and an icon before it is drawn as a colour, so it survives greyscale. The paid pair also carry the warn hue on their left edge - not because spending is a mistake, but because it is the one property of a button on this tab that somebody must not have to hover to learn. */ .screen-ops { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--panel-2); } .screen-ops-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .screen-ops-what { margin: 0 0 10px; } .screen-op-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .screen-op { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--card-edge); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--panel); } .screen-op > p { margin: 0; } .screen-op-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-base); } .screen-op-name .icon { color: var(--muted); } /* Free or spends, said in a word with a mark beside it. The whole reason this block can carry a paid button at all: nothing here costs money without saying so above the fold, in text rather than in a hue. */ .screen-op-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; } .screen-op-tag .icon { width: 12px; height: 12px; } .screen-op-tag-free { color: var(--positive); background: var(--positive-soft); } .screen-op-tag-paid { color: var(--warn); background: var(--warn-soft); } .screen-op-tag-paid .icon, .screen-op-tag-free .icon { color: inherit; } .screen-op-paid { border-left-color: var(--warn); } .screen-op-active { border-color: var(--accent); } .screen-op-what { font-size: var(--fs-sm); } .screen-op-state { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text); } .screen-op-cost { font-size: var(--fs-xs); } .screen-op-act { margin-top: auto; padding-top: 4px; } .screen-op-act .btn .icon { vertical-align: -3px; margin-right: 5px; } .screen-op .btn[disabled] { opacity: .45; pointer-events: none; } .screen-op .hint { margin: 0; font-size: var(--fs-xs); } .screen-busy { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; } .screen-job { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--control-bg); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; } /* The ranking. */ .screen-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: var(--fs-sm); } .screen-table th { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .screen-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .screen-table tbody tr:hover { background: var(--row-hover); } .screen-rank { width: 34px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; } .screen-sym { white-space: nowrap; } .screen-name { display: block; color: var(--muted); font-size: var(--fs-xs); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; } .screen-score { width: 64px; } /* The band, always beside its own figure. The colour qualifies the number; it never replaces it. */ .screen-composite { display: inline-block; min-width: 46px; padding: 1px 6px; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; text-align: right; } .screen-composite-good { background: var(--positive-soft); color: var(--positive); } .screen-composite-mid { background: var(--accent-soft); color: var(--accent); } .screen-composite-low { background: var(--control-bg); color: var(--text); } .screen-composite-bad { background: var(--negative-soft); color: var(--negative); } .screen-star { width: 56px; color: var(--muted); white-space: nowrap; } /* Coverage: a bar with its own percentage inside it, so the fill is a second reading of the figure rather than the only one. */ .screen-covcell { width: 92px; } .screen-cov { position: relative; display: block; height: 16px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--control-bg); overflow: hidden; cursor: help; } .screen-cov-fill { position: absolute; inset: 0 auto 0 0; } .screen-cov-good .screen-cov-fill { background: var(--positive-soft); } .screen-cov-mid .screen-cov-fill { background: var(--accent-soft); } .screen-cov-low .screen-cov-fill { background: var(--warn-soft); } .screen-cov-n { position: relative; display: block; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; line-height: 14px; text-align: center; } .screen-chips { display: flex; flex-wrap: wrap; gap: 4px; } .screen-chip { padding: 1px 6px; border-radius: 999px; font-size: var(--fs-xs); white-space: nowrap; cursor: help; } .screen-chip-good { background: var(--positive-soft); color: var(--positive); } .screen-chip-bad { background: var(--negative-soft); color: var(--negative); } .screen-foot { margin: 8px 0 0; } /* The two folded buckets and the rubric. Folded rather than absent: a name that is not in the ranking has to be findable, or the ranking is the only thing anybody can argue with. */ .screen-fold { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 8px 12px; } .screen-fold > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .screen-fold[open] > summary { margin-bottom: 8px; } .screen-gate-n { padding: 0 6px; border-radius: 999px; background: var(--control-bg); font-variant-numeric: tabular-nums; } .screen-gates { display: flex; flex-direction: column; gap: 10px; } .screen-gate-title { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--fs-sm); } .screen-gate-names { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; } .screen-table-thin { margin-top: 4px; } .screen-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .screen-fam { border: 1px solid var(--line-soft); border-radius: var(--radius-xs); padding: 8px 10px; background: var(--panel-2); } .screen-fam-title { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--fs-sm); } .screen-fam-w { margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--control-bg); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .screen-fam-factors { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; } .screen-factor { padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); font-size: var(--fs-xs); cursor: help; } /* A factor nothing can fill yet. Dimmed AND dashed - a reader who cannot see the opacity difference still gets the border. */ .screen-factor-off { border-style: dashed; opacity: .55; color: var(--muted); } .screen-inv { margin-left: 2px; color: var(--warn); font-weight: 700; } .screen-fam-live { margin: 0; } @media (max-width: 720px) { /* The rating and the chips go first: on a narrow screen the ranking is what is being read, and those two qualify it rather than carry it. */ .screen-table th:nth-child(5), .screen-table td:nth-child(5), .screen-table th:nth-child(6), .screen-table td:nth-child(6) { display: none; } .screen-fams { grid-template-columns: 1fr; } /* One operation per row rather than a column of squeezed cards. The button is the point of each and it has to be reachable with a thumb. */ .screen-op-cards { grid-template-columns: 1fr; } } /* The tailwind family's own block. Sectors rather than stocks - the only grid on this page whose unit is an industry - and an unscored one is dashed as well as dimmed, the same second channel `.screen-factor-off` uses. */ .screen-sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; } .screen-sector { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel-2); cursor: help; } .screen-sector-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); } .screen-sector-score { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); } .screen-sector-n { min-width: 2ch; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: right; } .screen-sector-off { border-style: dashed; opacity: .55; } .screen-sector-off .screen-sector-score { color: var(--muted); } /* The one line on this page that is waiting for time rather than for a button: the order-inflow comparison cannot exist until the filing ledger is two years old. Marked as a note rather than as a warning - nothing is wrong. */ .screen-short { border-left: 2px solid var(--accent-2, var(--line)); padding-left: 8px; } /* --- the Sectors page ---------------------------------------------------- */ /* One row per industry, joining the per-stock classifier to the per-sector tailwind score. The unit is an industry rather than a company, which is the one thing this page has in common with the tailwind block on the Screener tab and the reason it borrows that block's vocabulary - a dashed, dimmed edge for an answer that does not exist - without borrowing its classes: that block is a fold of chips inside another page, this is a table with a detail under it. The four classification flags each take an identity hue and keep it in both themes and in every place they are drawn - the row's chip, the open sector's stock list, the filter. A flag is a fact about a company that never changes meaning, so it is exactly the kind of thing that should be recognisable without reading it. */ .sector-top h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .sector-top .hint { margin: 0 0 10px; max-width: 92ch; } .sector-stats { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; } .sector-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--panel-2); color: var(--muted); font-size: var(--fs-sm); cursor: help; } .sector-stat .icon { color: var(--accent); } .sector-stat b { color: var(--text); font-variant-numeric: tabular-nums; } /* The explanation of the page's most conspicuous column of dashes. A fold rather than a paragraph because it is read once and then never again - but it has to be *there*, because "63 of 404 scored" reads as a broken pass to anybody who does not know the sector labels are free text. */ .sector-reach { margin: 0 0 10px; } .sector-reach > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: var(--fs-sm); } .sector-reach > summary .icon { color: var(--warn); } .sector-reach .advice-evidence { margin: 6px 0 0; max-width: 96ch; } .sector-n { padding: 0 6px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .sector-bar { flex-wrap: wrap; row-gap: 6px; margin-bottom: 8px; } .sector-bar .btn .icon { margin-right: 4px; } /* --- the table --- */ .sector-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .sector-table th { position: sticky; top: 0; z-index: 2; padding: 5px 6px; border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; white-space: nowrap; } .sector-table td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .sector-row { cursor: pointer; } .sector-row:hover { background: var(--row-hover); } /* The open sector. A left edge as well as a fill, because the fill is the same colour family as the hover it has to be told apart from. */ .sector-row.selected { background: var(--accent-soft); } .sector-row.selected .sector-c-name { box-shadow: inset 2px 0 0 var(--accent); } .sector-c-name { min-width: 200px; max-width: 340px; } .sector-c-members { min-width: 120px; max-width: 220px; } .sector-members { display: flex; flex-wrap: wrap; gap: 2px 7px; } .sector-member { font-size: var(--fs-xs); } .sector-c-n { width: 56px; } .sector-c-flags { width: 150px; } .sector-c-conf, .sector-c-when, .sector-c-asked { color: var(--muted); white-space: nowrap; } .sector-c-conf { font-variant-numeric: tabular-nums; cursor: help; } .sector-c-when, .sector-c-asked { font-variant-numeric: tabular-nums; } .sector-c-score { width: 64px; } .sector-c-tconf, .sector-c-state { white-space: nowrap; } /* A note on the row rather than a column of its own: "stale", "empty" and "human" are each true of a handful of rows and would be four-fifths blank as columns. Dashed, so the marker is not mistaken for a state pill. */ .sector-tag { margin-left: 5px; padding: 0 5px; border: 1px dashed var(--line); border-radius: var(--radius-xs); color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; cursor: help; } /* --- the four flags --- */ .sector-flags { display: inline-flex; gap: 3px; } .sector-flag { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border: 1px solid color-mix(in srgb, var(--sector-hue, var(--accent)) 45%, transparent); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--sector-hue, var(--accent)) 14%, transparent); color: var(--sector-hue, var(--accent)); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; cursor: help; } .sector-flag-financial { --sector-hue: var(--accent); } .sector-flag-commodity_cyclical { --sector-hue: var(--negative); } .sector-flag-tailwind_cyclical { --sector-hue: var(--warn); } .sector-flag-tailwind { --sector-hue: var(--positive); } /* Nobody in this sector carries the flag. Kept in place rather than dropped so the four sit in the same order on every row and can be read down a column; dimmed and dashed, the same two channels `.screen-factor-off` uses. */ .sector-flag-off { border-style: dashed; border-color: var(--line); background: none; color: var(--muted); opacity: .6; } /* --- the score --- */ .sector-score { display: inline-block; min-width: 44px; padding: 1px 6px; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; text-align: right; } .sector-score-good { background: var(--positive-soft); color: var(--positive); } .sector-score-mid { background: var(--accent-soft); color: var(--accent); } .sector-score-low { background: var(--panel-2); color: var(--text); } .sector-score-bad { background: var(--negative-soft); color: var(--negative); } /* No score at all, which is not a low one. Flat and muted, with no fill to be read as a band. */ .sector-score-plain { color: var(--muted); } .pill.sector-state.tone-good { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 50%, transparent); } .pill.sector-state.tone-bad { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 50%, transparent); } .pill.sector-state.tone-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .pill.sector-state.tone-plain { color: var(--muted); } /* --- the open sector --- */ .sector-detail { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--card-edge); border-top: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--panel-2); } /* Nothing open yet. No border and no fill: an empty card the size of a full one is a hole in the page, and this is a prompt, not a panel. */ .sector-detail-empty { margin-top: 10px; padding: 0; border: 0; background: none; } .sector-detail-empty .hint { display: flex; align-items: center; gap: 6px; margin: 0; } .sector-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; } .sector-detail-head h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-lg); color: var(--text); text-transform: none; letter-spacing: 0; } .sector-detail-head .icon { color: var(--accent); } .sector-detail-meta { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } /* The case and the case against it, side by side on a wide screen. Deliberately equal columns: the bear case is not a footnote to the narrative, it is the half of the answer the validator refuses to store without. */ .sector-case { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; } .sector-case section { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: var(--panel); } .sector-case h5 { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .sector-case section:nth-child(1) h5 .icon { color: var(--positive); } .sector-case section:nth-child(2) h5 .icon { color: var(--negative); } .sector-case section:nth-child(3) h5 .icon { color: var(--warn); } .sector-case p { margin: 0; line-height: 1.6; } .sector-case .hint { margin-top: 5px; } .sector-drivers { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; } .sector-driver { padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-lg); color: var(--accent); font-size: var(--fs-xs); } .sector-sources { margin-top: 8px; } .sector-sources > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: var(--fs-sm); } .sector-src-list { margin: 6px 0 0; padding-left: 20px; } .sector-src-list li { margin-bottom: 3px; line-height: 1.5; } .sector-src-date { margin-right: 6px; color: var(--muted); font-variant-numeric: tabular-nums; } .sector-src-note { display: block; color: var(--muted); font-size: var(--fs-sm); } .sector-stocks-title { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .sector-stocks { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .sector-stocks th { padding: 4px 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap; } .sector-stocks td { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .sector-s-sym, .sector-s-flags, .sector-s-conf, .sector-s-when { white-space: nowrap; } .sector-s-name { max-width: 200px; } .sector-s-when { color: var(--muted); font-variant-numeric: tabular-nums; } .sector-s-why { min-width: 300px; width: 100%; color: var(--muted); line-height: 1.5; } .sector-symbol { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; } .sector-symbol:hover { text-decoration: underline; } @media (max-width: 900px) { /* The classifier's date and the ask's date go first: on a narrow screen the question is which sectors are scored and how strongly, and when the label was last written qualifies that rather than carrying it. */ .sector-table .sector-c-when, .sector-table .sector-c-asked { display: none; } .sector-detail-meta { margin-left: 0; width: 100%; } } @media (max-width: 640px) { .sector-table .sector-c-conf, .sector-table .sector-c-tconf { display: none; } .sector-case { grid-template-columns: 1fr; } } /* --- selling: the popup's Sell menu, and the Sold tab -------------------- */ /* Two surfaces, one feature. The menu is where a sale is recorded, on the stock, in the middle of reading it; the tab is where sales are read back, later, as a list. See `sellForm` in detail.js and `sold.js`. The identity hue is the money green rather than the accent. Everything else in this popup's head is either neutral or the accent, and Sell is the one control on it that moves a position out of the book - it has earned a colour of its own, and green is the one a realised figure is already drawn in. */ .btn.sell { --sell-mark: var(--rf-green); } .btn.sell svg { color: var(--sell-mark); } .btn.sell:hover { border-color: var(--sell-mark); } .sell-panel { width: 300px; } .sell-panel h4 { margin-top: 0; } /* Label above box rather than beside it. Four fields at 300px wide is not a two-column form, and a label column wide enough for "Sale price" would leave the boxes too narrow to read a grouped rupee figure in. */ .sell-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; } .sell-field { display: flex; flex-direction: column; gap: 2px; } .sell-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .sell-field input[type="text"] { width: 100%; } /* The date picker's button already fills its column and starts its text at the left - `.date-pick` sets both, for the popup's own date fields - so there is nothing to add here beyond saying that this form uses it. */ /* The cost basis the realised figure will be struck against. Ruled off above, because it is not a fifth field - it is what the four above are measured from, and a reader checking a gain that came out wrong starts here. */ .sell-cost { margin: 2px 0 0; padding-top: 6px; border-top: 1px solid var(--line); } /* The Sold tab. One card per sleeve across the top, the ledger under it. */ .sold-head-row { align-items: center; gap: 8px; } .sold-search { display: inline-flex; align-items: center; gap: 5px; } .sold-search svg { color: var(--muted); flex: none; } .sold-search input { width: 210px; max-width: 40vw; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 3px 7px; font-size: var(--fs-sm); color: var(--text); } .sold-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } /* A card, and a filter. Pressed it narrows the table under it, which is why it is a button and why `.on` is a fill rather than a border - the same bargain the Errors tab's status chips strike. */ .sold-card { display: flex; flex-direction: column; gap: 2px; min-width: 168px; padding: 6px 10px; text-align: left; border: 1px solid color-mix(in srgb, var(--sold-hue, var(--line)) 45%, transparent); border-left: 3px solid var(--sold-hue, var(--line)); border-radius: var(--radius); background: var(--panel-2); color: var(--text); cursor: pointer; } .sold-card:hover { border-color: var(--sold-hue, var(--line)); } .sold-card.on { background: color-mix(in srgb, var(--sold-hue) var(--rf-tint, 22%), var(--panel)); border-color: var(--sold-hue); } .sold-card-head { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); } .sold-card-head svg { color: var(--sold-hue, var(--muted)); flex: none; } .sold-card-head .count { color: var(--muted); font-variant-numeric: tabular-nums; } /* The one figure the card exists for, set large enough to be read across the row of them without stopping at each. */ .sold-card-gain { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; } .sold-card-gain small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); } .sold-card-gain.pos { color: var(--positive); } .sold-card-gain.neg { color: var(--negative); } .sold-card-foot { font-size: var(--fs-xs); color: var(--muted); } .sold-table { margin-top: 4px; } .sold-table th { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; } .sold-table th.num { text-align: right; } .sold-row { border-left: 3px solid transparent; } .sold-row.open { background: var(--panel-2); border-left-color: var(--sold-hue, var(--line)); } .sold-table td.pos { color: var(--positive); } .sold-table td.neg { color: var(--negative); } .sold-when { color: var(--muted); font-variant-numeric: tabular-nums; } /* The stock name is the row's own handle: a button, so opening the snapshot is reachable by keyboard, dressed down to look like the cell it sits in. */ .sold-open { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; } .sold-open svg { color: var(--muted); flex: none; } .sold-open:hover svg { color: var(--accent); } .sold-sleeve svg { color: var(--sold-hue, var(--muted)); } /* The reason, and the one cell on the row that may wrap: everything else is a figure and a figure that wraps is a figure misread. Capped so a long note cannot push the actions off the right of a narrow window. */ .sold-note { white-space: normal; max-width: 260px; color: var(--muted); } .sold-actions { text-align: right; white-space: nowrap; } .sold-actions .btn { padding: 1px 5px; } /* The opened row's body, in a cell spanning the table. Tinted and ruled on the left in its row's own sleeve hue, so a long digest still reads as belonging to the line above it. */ .sold-detail > td { padding: 8px 10px; background: var(--panel-2); border-left: 3px solid var(--sold-hue, var(--line)); white-space: normal; } .sold-snap { display: flex; flex-direction: column; gap: 6px; } .sold-snap-rating { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; } .sold-snap-rating svg { color: var(--rf-amber); flex: none; } .sold-snap-biz { margin: 0; } /* The figures the stock carried that day, as a wrapping row of small facts rather than a table: there are never more than nine and a table of nine two-cell rows is a lot of furniture for eighteen values. */ .sold-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; } .sold-fact { display: flex; flex-direction: column; gap: 0; min-width: 92px; } .sold-fact span { font-size: var(--fs-xs); color: var(--muted); } .sold-fact strong { font-variant-numeric: tabular-nums; } .sold-fact small { font-weight: 400; color: var(--muted); } /* When each source behind those figures was last published. The gaps between them are the signal, which is why they are set side by side. */ .sold-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .sold-stamps svg { color: var(--muted); flex: none; } .sold-empty, .sold-error { display: flex; align-items: center; gap: 6px; } .sold-error { color: var(--negative); } /* A part sale, marked on its row. The rest of the holding stayed in the sleeve, so the row is what went rather than the whole position - and without the chip a trim and a close-out are the same line with a smaller number on it. Amber rather than a sleeve hue: it qualifies the row, it does not classify it. */ .sold-trim { margin-left: 4px; border-color: color-mix(in srgb, var(--rf-amber) 45%, transparent); color: var(--rf-amber); }