/* base.css - structure for both directions. No colour literals below this * line; everything visual resolves through a --bd-* token from directions.css. * If you need a hex here, you need a token instead. * * Fonts are system stacks only (P1 Rule 6). Nothing is downloaded, so first * paint is identical offline and there is no reflow when a face lands. * * SHELL MODEL: the nav is a DRAWER at every width, closed on load. The report * is the product and it wants the whole viewport; a permanently parked 220px * sidebar costs two columns of a 17-column table on a laptop. The theme switch * lives at the top of that drawer. */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* No `touch-action` on . There used to be `pan-x pan-y` here, which is what actually blocked pinch-zoom and double-tap on iOS (Safari has ignored user-scalable=no since iOS 10). Zoom is wanted, so this is deliberately absent - see the viewport note in headerdeclarations.asp. If you need to constrain gestures on some scroller, scope it to that element; putting a touch-action back on re-locks the whole page. */ body { font-family: var(--bd-font); font-size: 13px; line-height: 1.45; color: var(--bd-ink); background: var(--bd-void); -webkit-text-size-adjust: 100%; } h1, h2, h3, h4, h5, h6, p, figure { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--bd-phosphor); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: separate; border-spacing: 0; width: 100%; } svg { display: block; } :focus-visible { outline: 2px solid var(--bd-focus); outline-offset: 2px; } /* Every figure in the interface is tabular. Money that jitters column to column is the single most common failure in a reports UI. */ .fig, .rpt td, .rpt th, .stat-val, .tile-val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------- money ------------------------------------------------ Class names mirror what PM() already emits in basic.asp, so the ASP side needs no change: PM() keeps returning the same strings. */ .formatPositiveNumber, .up { color: var(--bd-up); } .formatNegativeNumber, .down { color: var(--bd-down); } .formatZero, .flat { color: var(--bd-flat); } /* ---------- app shell ---------- */ .app { min-height: 100vh; display: flex; flex-direction: column; } .main { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; } /* ---------- nav drawer ------------------------------------------- Closed by default at every width. Opened by the burger, dismissed by the backdrop, Escape, or picking a destination. */ .side { position: fixed; top: 0; left: 0; bottom: 0; width: 274px; max-width: 86vw; z-index: 80; background: var(--bd-chrome); color: var(--bd-chrome-ink); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform .18s ease-out; box-shadow: none; } .side.is-open { transform: translateX(0); box-shadow: 0 0 46px rgba(0,0,0,.55); } .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70; opacity: 0; visibility: hidden; transition: opacity .18s ease-out, visibility .18s; } .scrim.is-open { opacity: 1; visibility: visible; } .side-brand { display: flex; align-items: center; gap: 10px; padding: 16px var(--bd-pad); border-bottom: 1px solid var(--bd-rule); flex: 0 0 auto; } /* The greeting takes the room the wordmark had, and the day/night pair and the close button sit at the end of the row. */ .side-brand .acct-who { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } /* The drawer's wordmark rules are gone with the wordmark. index.asp and inactive.asp still print one, and it is styled by .login-card .brand-row .wordmark further down - not by anything that was here. */ .side-brand .x { margin-left: auto; background: none; border: 1px solid var(--bd-rule); border-radius: var(--bd-radius); color: inherit; padding: 5px; cursor: pointer; line-height: 0; } .side-brand .x:hover { background: var(--bd-chrome-hi); } /* ---------- account figures: the drawer's first block ------------- The six figures that used to open main.asp as tiles. They live here now because the drawer is on every page and the dashboard is not. MONEY COLOURS ARE NOT --bd-up / --bd-down HERE. Those two are tuned against the CONTENT ground - #008542 is 4.74:1 on white and about 2.6:1 on Broadsheet's near-black chrome, which is the same trap the split bar in js/dash.js documents. The -chrome pair in theme.css is the lifted version, measured against #24211C: 7.48:1 and 5.37:1. Noir's chrome is the same black its content sits on, so there the two pairs are equal and the token still resolves. Values are mono and tabular so six figures of different widths read as a column rather than a ragged list. */ .acct-who { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; } /* "Welcome" is the quiet half of this line - the name is what is being read, and the greeting is what makes it a greeting rather than a label. */ .acct-who .hi { font-size: 12px; color: var(--bd-chrome-dim); white-space: nowrap; } .acct-who .nm { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* .acct-grp and the whole .acct-bal list are gone: those figures read out on the dashboard now, as .stat tiles, and nothing prints this markup. */ /* A figure that has not arrived. It was styled only inside the drawer's list, so on the dashboard's .stat-val the em dash rendered in full ink at 40px and read as a real value rather than as a gap. */ .is-wait { color: var(--bd-dim); } /* This sits on the dashboard now, on a content panel, not on the drawer's near-black chrome - so it takes the content tokens. The -chrome pair it used before is 2.6:1 on white. */ .acct-note { margin-top: 9px; font-size: 11px; color: var(--bd-muted); } .acct-note.bad { color: var(--bd-down); } .acct-note:empty { display: none; } .nav { padding: 8px 0; flex: 1 1 auto; } /* CENTRED, IN THE CHROME ACCENT, AND A SIZE UP (2026-09-15). These were left-aligned 10px labels in the drawer's dim grey, which made a category look like one more item that happened to be quieter. A heading should read as a heading: centred over the links it names, in the one accent colour the chrome has (the same yellow as the wordmark), with a hairline above every group after the first so the groups are visibly separate blocks. --bd-accent-chrome is tuned against the chrome in both directions. */ .nav-grp { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: var(--bd-head-weight); color: var(--bd-accent-chrome); text-align: center; padding: 12px var(--bd-pad) 5px; } .nav-grp:not(:first-child) { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.12); } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px var(--bd-pad); color: var(--bd-chrome-ink); border-radius: var(--bd-radius); margin: 1px 6px; font-size: 12.5px; white-space: nowrap; } .nav a:hover { background: var(--bd-chrome-hi); text-decoration: none; } .nav a.is-on { background: var(--bd-phosphor); color: var(--bd-phosphor-ink); font-weight: 600; } .nav a.is-on .ico { opacity: 1; } .nav .ico { width: 15px; height: 15px; opacity: .72; flex: 0 0 auto; } .nav .tag { margin-left: auto; font-size: 10px; padding: 1px 5px; border-radius: 999px; background: var(--bd-chrome-hi); color: var(--bd-chrome-ink); opacity: .85; } .nav a.is-on .tag { background: rgba(255,255,255,.22); color: inherit; opacity: 1; } /* Log out lives here and nowhere else now, so this row has to read as a real destination rather than a footnote. It never had a layout rule: svg is display:block from the reset, so the icon was stacking ABOVE the words instead of sitting beside them. */ /* The two things in the drawer that are not destinations, on one row above the ones that are: the odds select and Log out. The link is styled here; the select has its own rules below. */ .side-act { display: flex; gap: 8px; padding: 9px var(--bd-pad) 8px; border-bottom: 1px solid var(--bd-rule); flex: 0 0 auto; } .side-act > a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 6px; background: none; border: 1px solid var(--bd-rule); border-radius: var(--bd-radius); color: var(--bd-chrome-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .side-act > a:hover { background: var(--bd-chrome-hi); text-decoration: none; } .side-act .ico { width: 15px; height: 15px; opacity: .72; flex: 0 0 auto; } /* The odds select. A NATIVE control, so a phone opens it as a sheet and nothing here draws a list. Painted like the link beside it, 31px tall to match, and the popup is told its colours - Chrome on Windows draws the options in the select's ink on a white ground otherwise. compat.css's bare `select` rule (white field, 30px) loses here on specificity, not on load order, so it stays beaten if the stylesheets ever reorder. */ /* AS WIDE AS ITS WIDEST OPTION and no wider (asked for 2026-09-16): a native select sizes itself to "Fractional" plus its arrow, and Log out takes whatever the row has left. It shared the row half-and-half before. */ .side-act .odds { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 8px; border: 1px solid var(--bd-rule); border-radius: var(--bd-radius); cursor: pointer; } .side-act .odds select { flex: 0 0 auto; width: auto; height: 29px; padding: 0 2px; background: transparent; border: 0; color: var(--bd-chrome-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .side-act .odds select:focus { outline: 2px solid var(--bd-accent-chrome); outline-offset: -1px; border-color: transparent; } .side-act .odds option { background: var(--bd-chrome); color: var(--bd-chrome-ink); } /* .nav opens with 8px of its own; this row does not need to add to it. */ .side-act + .nav { padding-top: 2px; } /* .side-foot is gone. Log out was the only thing in it and it sits beside Settings now; the drawer ends at the nav. */ /* ---------- header ---------- */ .head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--bd-surface); border-bottom: 1px solid var(--bd-rule); position: sticky; top: 0; z-index: 30; } /* HEADINGS TAKE --bd-title (2026-09-15): this, the panel and tile headings, the toolbar labels, the column heads and the band names. The token is the chrome yellow on the dark direction and the deepest gold that still reads on white and on the header band in the light one - see theme.css. */ .head h1 { font-family: var(--bd-display); font-size: 17px; font-weight: 700; letter-spacing: var(--bd-display-track); line-height: 1.2; color: var(--bd-title); } .head .sub { color: var(--bd-muted); font-size: 11.5px; } /* An icon on its own. .btn's 12px side padding is sized for a word beside the glyph and leaves it adrift without one. */ .btn.ico-btn { padding: 6px 9px; } .btn.ico-btn .ico { width: 16px; height: 16px; } /* The burger is now the ONLY way into the nav, so it is present at every width and reads as a control rather than a mobile afterthought. */ .burger { display: inline-flex; align-items: center; gap: 7px; background: var(--bd-surface); border: 1px solid var(--bd-edge); border-radius: var(--bd-radius); color: var(--bd-ink); padding: 7px 10px; cursor: pointer; font-size: 12px; font-weight: 600; flex: 0 0 auto; } .burger:hover { background: var(--bd-raised); } .burger .btxt { display: inline; } .content { padding: 16px; flex: 1 1 auto; } .content.wide { padding: 14px; } /* ---------- fixed shell: report screens --------------------------- On .app.fill the WINDOW does not scroll - the table pane does. This is not a style choice, it is the other half of the sticky-header fix. Bounding .rpt-wrap makes the table header stick within the pane, but if the window can still scroll, the whole panel rides up under the sticky .head and the table header pins BEHIND the chrome. Measured before this rule: page head bottom at y=60, table header at y=28. It also happens to be how a reports screen should behave: the summary tiles and the column labels both hold while the accounts move. Opt-in, because the dashboard genuinely wants a scrolling page. */ .app.fill { height: 100vh; overflow: hidden; } .app.fill .main { min-height: 0; } .app.fill .content { min-height: 0; display: flex; flex-direction: column; } .app.fill .panel.grow { min-height: 0; display: flex; flex-direction: column; } .app.fill .panel.grow .panel-bd { min-height: 0; flex: 1 1 auto; display: flex; } .app.fill .panel.grow .rpt-wrap { max-height: none; flex: 1 1 auto; } /* ---------- panels ---------- */ .panel { background: var(--bd-surface); border: var(--bd-panel-border); border-radius: var(--bd-radius-lg); box-shadow: var(--bd-shadow); overflow: hidden; } .panel-hd { display: flex; align-items: center; gap: 10px; padding: var(--bd-pad) var(--bd-pad); border-bottom: 1px solid var(--bd-rule); } .panel-hd h2 { font-size: var(--bd-head-size); letter-spacing: var(--bd-head-track); text-transform: var(--bd-head-case); font-weight: var(--bd-head-weight); color: var(--bd-title); } .panel-hd .panel-act { margin-left: auto; display: flex; gap: 6px; align-items: center; } .panel-bd { padding: var(--bd-pad); } .panel-bd.flush { padding: 0; } /* ---------- grid ---------- */ .grid { display: grid; gap: var(--bd-gap); } .g-1 { grid-template-columns: 1fr; } .g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .g-dash { grid-template-columns: repeat(12, minmax(0,1fr)); } .sp-3 { grid-column: span 3; } .sp-4 { grid-column: span 4; } .sp-5 { grid-column: span 5; } .sp-6 { grid-column: span 6; } .sp-7 { grid-column: span 7; } .sp-8 { grid-column: span 8; } .sp-12 { grid-column: span 12; } /* ---------- stat tiles ---------- */ .stat { display: flex; flex-direction: column; gap: 3px; } .stat-lbl { font-size: var(--bd-head-size); letter-spacing: var(--bd-head-track); text-transform: var(--bd-head-case); font-weight: var(--bd-head-weight); color: var(--bd-title); } .stat-val { font-family: var(--bd-display); font-size: var(--bd-display-size); line-height: 1.05; font-weight: 700; letter-spacing: var(--bd-display-track); } .stat-val.sm { font-size: calc(var(--bd-display-size) * .62); } /* A tile that opens something (the dashboard's Last transaction, 2026-09-17): the pointer and the row-hover tint say so. The global :focus-visible ring covers the keyboard. Only the tile's ground changes - the figure keeps its money colour. */ .stat-tile.is-link { cursor: pointer; } .stat-tile.is-link:hover { background: var(--bd-hover); } /* Label / value rows for one record in a small dialog - the transaction behind that tile. Label in the column-head voice, value in ink, a rule between rows and none above the first. */ .kv { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); column-gap: 12px; } .kv-row { display: contents; } .kv-k, .kv-v { padding: 7px 0; border-top: 1px solid var(--bd-rule); } .kv-row:first-child > .kv-k, .kv-row:first-child > .kv-v { border-top: 0; } .kv-k { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--bd-title); } .kv-v { overflow-wrap: anywhere; } .meter { height: 6px; background: var(--bd-sunken); border-radius: 999px; overflow: hidden; margin-top: 8px; border: 1px solid var(--bd-rule); } .meter > i { display: block; height: 100%; background: var(--bd-phosphor); } .meter.warn > i { background: var(--bd-gold); } .meter.over > i { background: var(--bd-down); } :root { /* Height of the sticky .head. Structural, not a direction token, so it is defined here rather than in directions.css. Two things depend on it: the report pane subtracts it to size itself, and the sticky column header offsets itself by it so it parks under the head instead of behind it. THIS IS A FALLBACK, NOT THE SOURCE OF TRUTH. initHeadOffset() in js/ui.js measures the real .head and writes the answer to this property inline on , which beats this value and the narrow-breakpoint one below. It has to. Both values here were hand-estimated, and the narrow one was wrong by 39px - see the note in the max-width:720px block. An offset that is too LARGE is not a cosmetic error: it pins the column header below the head, and the band in between fills with data rows that should have scrolled out of sight. */ --bd-head-h: 60px; } /* ---------- tables ------------------------------------------------ This is the product. Everything here exists because it is a reports app: 125 table-info uses in AgentV7 and a 17-column weekly report. */ .rpt-wrap { /* A REAL scrollport, both axes. It cannot be otherwise: the table must scroll horizontally, and per CSS Overflow, when one axis is `visible` and the other is not, `visible` computes to `auto`. So this element was already a scroll container - it just had no height to scroll within, so `thead th{position:sticky}` had nothing to stick against and the header left with the page. Bounding the height is what makes the sticky header and the sticky totals row actually work. See the print block, which must undo both properties or the printout is clipped to one pane. */ overflow: auto; max-height: calc(100vh - var(--bd-head-h) - 28px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ...but not in a modal, where the modal body is the scrollport. That max-height is `100vh - the page head - 28px`: a PAGE measurement, and inside a dialog it is as meaningless as the sticky offset it shares a variable with. Left alone it made two nested scrollers - measured on main.asp's day drill-down, .modal-body scrolling AND a 873px .rpt-wrap scrolling inside it, two scrollbars side by side and a sticky header pinned to the inner one. One scroller per dialog. */ .modal .rpt-wrap { overflow: visible; max-height: none; } /* ...and not on the dashboard either, where a tile holds eight rows and the PAGE is the scrollport. The cap is the same page measurement, and the part that was felt is overscroll-behavior: Chrome takes a contained scroll container under the pointer as the wheel's target even when it has nothing to scroll, so the pointer over any of the four tables - the week table under its chart included - and the page would not move. No cap means no vertical overflow to be a target with; auto lets the wheel chain to the page regardless. overflow stays auto for the horizontal axis, so a table wider than its tile still scrolls sideways. */ .g-dash .rpt-wrap { max-height: none; overscroll-behavior: auto; } /* THE GRID KEEPS A BOTTOM LINE under its last row. The pane is overflow:auto and, with max-height:none, exactly as tall as its table, so the last row's own cell borders sit at the pane's client edge and are clipped away - the whole bottom line vanished (a sticky first cell drops its border on top of that). A border on the PANE ITSELF is painted at its border edge, outside the clipped content box, so it draws one full-width line under the last row at every width and never clips. The dashboard grids have no tfoot, so this is their only bottom line. */ .g-dash .rpt-wrap { border-bottom: 1px solid var(--bd-rule); } .rpt { font-size: var(--bd-fig-size); } .rpt th, .rpt td { padding: 0 8px; height: var(--bd-row-h); white-space: nowrap; border-bottom: 1px solid var(--bd-rule); /* EVERY CELL IS CENTRED except the first column, asked for 2026-09-16 - figures, text columns and all. Only the identity column (first-child) stays left; a .txt cell that is not first centres like the rest. */ text-align: center; } .rpt th:first-child, .rpt td:first-child { text-align: left; } .rpt thead th { position: sticky; top: 0; z-index: 12; /* --bd-colhead, not --bd-raised: the head band has its own pair of tokens since 2026-09-16, when the light theme's band went dark blue under the chrome's yellow while the hover rows and the totals stayed light. */ background: var(--bd-colhead); color: var(--bd-colhead-ink); font-size: var(--bd-head-size); /* TITLE CASE AND NO TRACKING since 2026-09-16 - "Prev Bal", "Mon 9/14" - set the way the figures are. Toolbar labels and panel headings keep --bd-head-case / --bd-head-track; only the column heads changed. */ letter-spacing: 0; text-transform: none; font-weight: var(--bd-head-weight); border-bottom: 1px solid var(--bd-edge); user-select: none; } /* COLUMN NAMES ARE CENTRED, on every report - and so are the cells beneath them now (2026-09-16). The first column alone stays left: the first-child left rule above is (0,2,1) and beats this (0,1,2), so the identity head sits left over its left-aligned column. */ .rpt thead th { text-align: center; } .rpt thead th.sortable { cursor: pointer; } .rpt thead th.sortable:hover { color: var(--bd-colhead-hi); } .rpt thead th .arrow { opacity: 0; margin-left: 3px; font-size: 9px; } .rpt thead th.sort-asc .arrow, .rpt thead th.sort-desc .arrow { opacity: 1; } .rpt thead th.sort-desc .arrow { transform: rotate(180deg); display: inline-block; } /* Row identity must never scroll away. */ .rpt th:first-child, .rpt td:first-child { position: sticky; left: 0; z-index: 10; background: var(--bd-surface); border-right: 1px solid var(--bd-rule); } .rpt thead th:first-child { z-index: 14; background: var(--bd-colhead); } /* ONLY WHERE THERE IS A POINTER. On a touch screen :hover latches after a tap and stays until something else is tapped, so a row folded with a tap sat there highlighted as though it were still open or still selected. hover: hover is false on a touchscreen and true on a mouse. */ @media (hover: hover) { /* --bd-hover, not --bd-raised, since 2026-09-16: the row under the pointer is the Total column's blue. It has to beat the zebra (tr.alt > td at (0,2,3), declared later) and the tinted Total cell, so both are named. */ .rpt tbody tr:hover td, .rpt tbody tr.alt:hover > td, .rpt tbody tr:hover td.tot, .rpt tbody tr.alt:hover > td.tot { background-color: var(--bd-hover); background-image: none; } .rpt tbody tr:hover td:first-child { background: var(--bd-hover); } } .rpt tbody tr.is-off td { color: var(--bd-dim); } .rpt tfoot td { position: sticky; bottom: 0; /* ABOVE THE SUB-AGENT BAND. Both are sticky and both can want the same strip of the pane when a group ends near the bottom; the band pins to the top and the grand total to the bottom, and at equal z-index which one showed came down to document order. The total is the row you can least afford to have half-covered, so it wins outright. */ z-index: 20; background: var(--bd-raised); font-weight: 700; border-top: 1px solid var(--bd-edge); border-bottom: none; } .rpt tfoot td:first-child { z-index: 21; /* AND THE BACKGROUND, not only the z-index. The first-column rule above is .rpt th:first-child/.rpt td:first-child at (0,2,1), which outranks .rpt tfoot td at (0,1,2) - so without this the grand total's first cell paints --bd-surface while the rest of its own row paints --bd-raised. The same guard is already on the thead cell and on tr.subtotal; the tfoot got the z-index half of it and not this half. */ background: var(--bd-raised); } /* Hidden until the compact breakpoint turns it on. This declaration must stay ABOVE that media block - it previously sat after it at equal specificity and silently won, so the phone's only "rows are tappable" cue never rendered at any width. */ .compact-hint { display: none; } .rpt .acct { font-family: var(--bd-mono); font-weight: 400; } /* 400 since 2026-09-16: in Arial, 600 renders as bold */ .rpt .mono { font-family: var(--bd-mono); } .chip { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--bd-phosphor-soft); color: var(--bd-phosphor); font-weight: 600; } .chip.mute { background: var(--bd-sunken); color: var(--bd-dim); } .chip.warn { background: var(--bd-phosphor-soft); color: var(--bd-gold); } /* ---------- buttons / forms ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bd-edge); border-radius: var(--bd-radius); background: var(--bd-surface); color: var(--bd-ink); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--bd-raised); text-decoration: none; } .btn-pri { background: var(--bd-phosphor); border-color: var(--bd-phosphor); color: var(--bd-phosphor-ink); } .btn-pri:hover { background: var(--bd-phosphor); filter: brightness(1.12); } .btn-sm { padding: 3px 8px; font-size: 11px; } /* A .seg segmented control lived here for the week panel's Daily/Weekly switch. The switch is gone and nothing else used it, so it went with it rather than sitting as dead vocabulary - git has it if a second one turns up. */ /* ---------- .pseg, and a second one turned up --------------------- allpending.asp's Regular / Futures switch. It had been shipping with NO CSS AT ALL - `.pseg` appeared exactly once in the tree, in that page's markup, and nowhere in any stylesheet - so both segments rendered as bare browser-default buttons and nothing distinguished the set being shown from the set that was not. The state was never the problem: SetSet() writes aria-pressed on both, correctly, and has from the day the control was added. This is the paint for it. PRESSED IS A FILL, NOT A TINT. On a two-item switch a tint is indistinguishable from hover, and the question this control answers - am I looking at straight action or at futures - is one the reader must not have to hunt for. Phosphor is the page accent in both directions and carries its own ink token, so the pressed segment stays legible without a second colour decision. */ .pseg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--bd-edge); border-radius: var(--bd-radius); overflow: hidden; } .pseg button { appearance: none; -webkit-appearance: none; margin: 0; padding: 5px 14px; background: var(--bd-surface); border: 0; color: var(--bd-muted); font-family: inherit; font-size: var(--bd-head-size); letter-spacing: var(--bd-head-track); font-weight: var(--bd-head-weight); text-transform: uppercase; line-height: 1.6; cursor: pointer; white-space: nowrap; } .pseg button + button { border-left: 1px solid var(--bd-edge); } /* Same reason .rpt tbody tr:hover is gated: on a touch screen :hover latches after a tap, and a latched hover on the segment you did NOT choose competes with the fill on the one you did. */ @media (hover: hover) { .pseg button:hover { background: var(--bd-raised); color: var(--bd-ink); } } .pseg button[aria-pressed="true"], .pseg button[aria-pressed="true"]:hover { background: var(--bd-phosphor); color: var(--bd-phosphor-ink); } .btn .ico { width: 14px; height: 14px; } /* A destructive action. Asked for by two migrations - "Remove Flag" and delete-wager had to render as neutral buttons for want of this. Uses the money-down token deliberately: red already means loss here, so a second red would be a second meaning. */ .btn-danger-x { background: transparent; border-color: var(--bd-down); color: var(--bd-down); } .btn-danger-x:hover { background: var(--bd-down); color: var(--bd-void); } /* A compact field for use inside a table row, where 34px is too tall. */ .field.sm { height: 24px; padding: 0 6px; font-size: 11px; } select.field.sm { height: 24px; background-position: calc(100% - 13px) 11px, calc(100% - 8px) 11px; } /* Let a panel header wrap. Three migrations reached for an inline flex-wrap because this did not exist. */ .panel-hd.wrap, .panel-act.wrap { flex-wrap: wrap; } /* .field is used on . It sets padding but no height, and a bare select rule elsewhere setting height:30px then clips the text. Give the select an explicit box so the two cannot disagree. */ select.field { height: 34px; padding: 0 11px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; } select.field::-ms-expand { display: none; } .field { width: 100%; padding: 9px 11px; background: var(--bd-field); border: 1px solid var(--bd-edge); border-radius: var(--bd-radius); color: var(--bd-ink); } .field::placeholder { color: var(--bd-dim); } .lbl { display: block; font-size: var(--bd-head-size); letter-spacing: var(--bd-head-track); text-transform: var(--bd-head-case); font-weight: var(--bd-head-weight); color: var(--bd-title); margin-bottom: 5px; } /* ---------- switch ------------------------------------------------ A checkbox that states its own position: the track carries the word OFF or ON, not just a colour. THE WORD IS THE POINT. What this replaces was the W3Schools slider - red track off, green track on, and nothing else to read. That fails three ways at once: it prints as two identical grey pills, it is the one distinction a red/green colour-blind reader cannot make, and on getpermissions.asp it painted a wall of 56 red switches that looked like 56 alarms rather than 56 permissions nobody had granted. Off is neutral now; red is kept for money that actually went the wrong way. Markup is unchanged from the old component, so all 79 instances pick this up with no edit: .round is now redundant - the track is always a pill - but it is harmless and left in place rather than touched in five files. READ-ONLY IS A DISABLED CHECKBOX, not a radio. The pages that show a switch an agent may not change used for it, which is a control with different semantics wearing this one's costume. Every reader of these controls goes through .checked or :checked, which behaves identically on a disabled checkbox, so the swap changed nothing but the honesty of the markup. */ .switch { position: relative; display: inline-block; width: 52px; height: 24px; vertical-align: middle; flex: 0 0 auto; } /* Kept at zero size rather than stretched over the track: the label already forwards the click, and a full-size transparent input on top of the pill is one more thing to fight for the pointer. It stays in the tab order either way. */ .switch input { position: absolute; width: 0; height: 0; opacity: 0; margin: 0; } .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--bd-sunken); border: 1px solid var(--bd-edge); cursor: pointer; transition: background-color .16s ease, border-color .16s ease; } /* the knob */ .slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bd-surface); border: 1px solid var(--bd-edge); box-shadow: 0 1px 2px rgba(0, 0, 0, .28); transition: transform .16s ease; } /* the state word - opposite the knob, so the two never collide */ .slider::after { content: "OFF"; position: absolute; top: 0; right: 7px; line-height: 22px; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--bd-muted); transition: color .16s ease; } .switch input:checked + .slider { background: var(--bd-up); border-color: var(--bd-up); } .switch input:checked + .slider::before { transform: translateX(28px); } .switch input:checked + .slider::after { content: "ON"; right: auto; left: 8px; color: var(--bd-up-ink); } .switch input:focus-visible + .slider { outline: 2px solid var(--bd-focus); outline-offset: 2px; } .switch input:disabled + .slider { cursor: not-allowed; opacity: .5; } /* A switch and its label on one line. The label is a real