now; it is kept so that the next thing that wants to sit beside the page has an element to attach to rather than a template edit. */ .shell { display: block; } .wrap { max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px; } .narrow { max-width: 420px; margin: 8vh auto; padding: 0 20px; } h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.3px; } h2 { font-size: 16px; margin: 26px 0 10px; } .sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .grid { display: grid; gap: 14px; } .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } /* --- stat tiles --- */ .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .stat .n { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; } .stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; } .stat.warn { border-color: var(--warn-line); background: var(--warn-bg); } .stat.warn .n, .stat.warn .k { color: var(--warn-ink); } /* --- tables --- */ .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } th { background: var(--bg); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--bg); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .empty { padding: 28px; text-align: center; color: var(--muted); } /* --- bits --- */ .tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); white-space: nowrap; } .tag.src-sheet { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); } .tag.src-override{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tag.src-hubspot { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); } /* Deliberately the quietest of the four: a geographic rule is the weakest claim. */ .tag.src-territory_rule { background: var(--bg); color: var(--muted); border-style: dashed; } .tag.bad { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-line); } .tag.enrich-ready { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); } .tag.enrich-pending { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); } .tag.enrich-failed { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-line); } /* Research JARVIS wrote: prose with its own line breaks, shown verbatim and capped so a long profile doesn't push the rest of the page off screen. */ pre.enrichment { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; max-height: 420px; overflow-y: auto; font: inherit; font-size: 13px; line-height: 1.55; color: var(--ink); } .muted { color: var(--muted); } .tiny { font-size: 12px; } .nowrap { white-space: nowrap; } .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .flash.ok { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); } .flash.bad { background: var(--bad-bg); color: var(--bad-ink); border: 1px solid var(--bad-line); } /* Six templates were already asking for this class and getting nothing: bare `.flash` sets padding, radius and a size but no colour, so on /data and /rooms/{id}/data the ERROR banner rendered identically to the success banner above it — same box, same ink, opposite meaning. The amber tokens are the ones the impersonation banner already uses, declared for light, system-dark and an explicit dark choice alike, so this is a third colour rather than a lighter .bad. */ .flash.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); } /* --- forms --- */ /* `.fieldname` is a field caption that is NOT a , and it earns its place twice. Above a drop zone, the zone itself is already `` — a caption that also carried `for` made two labels for one input, which a screen reader reads as one run-on name ("The file, Drag your file here or browse for it, button… file") and a sighted person finds is a second thing that opens the picker. Above a radio group, the caption labels nothing at all: no `for`, wrapping no control. So the caption is a plain span (pointed at by `aria-labelledby`) or a , and this rule is what keeps it looking like the label it used to be. */ label, .fieldname { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } input[type=text], input[type=email], input[type=password], input[type=file], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; } .field { margin-bottom: 12px; } /* A radio group is a group. Headed by a , the question ("What is it?") reaches nobody using a screen reader — each radio announces its own text and never what it is answering — so the two upload forms use fieldset/legend instead. The browser's own border, padding and min-width are removed so the group still looks like the .field it replaced; `min-inline-size: 0` is the fieldset-specific one, without which a fieldset refuses to shrink below its content inside a flex or grid parent. */ fieldset.field { border: 0; margin: 0 0 12px; padding: 0; min-inline-size: 0; } fieldset.field > legend { padding: 0; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .row > * { flex: 1; min-width: 150px; } .row > .shrink { flex: 0 0 auto; min-width: 0; } button, .btn { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; } button:hover, .btn:hover { filter: brightness(1.1); } .btn.ghost, button.ghost { background: var(--panel); color: var(--ink); border-color: var(--line); } button.sm, .btn.sm { padding: 4px 9px; font-size: 12.5px; } button.danger, .btn.danger { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-line); } /* Sign-in page: the email-link form, and the rule that separates it from the OAuth buttons so the two are read as alternatives rather than steps. */ .stack { display: flex; flex-direction: column; gap: 6px; } .or-rule { display: flex; align-items: center; gap: 8px; margin: 14px 0; color: var(--muted); font-size: 12px; } .or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); } button.linkish { background: none; border: none; color: var(--muted); padding: 0; text-decoration: underline; cursor: pointer; font-size: 13px; } button.approve { background: #1a7f4b; border-color: #1a7f4b; color: #fff; } button.reject { background: var(--panel); border-color: var(--bad-line); color: var(--bad-ink); } .inline { display: inline; } /* Search results mid-fetch: dimmed rather than emptied, so the table doesn't jump. */ #territory-results.loading { opacity: .55; transition: opacity .12s ease-in; } details.assign { margin: 0; } details.assign summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; } details.assign summary::-webkit-details-marker { display: none; } details.assign[open] summary { margin-bottom: 8px; } /* --- review queue rows --- */ .review-row { padding: 12px 14px; margin-bottom: 10px; } .review-row.flagged { border-color: var(--warn-line); } .review-grid { display: grid; align-items: start; gap: 14px; grid-template-columns: 24px 1fr 90px 1fr 130px; } .review-grid .bigname { font-size: 14.5px; font-weight: 600; line-height: 1.3; margin: 2px 0; } .review-grid .side { min-width: 0; } .review-grid .side > div { overflow-wrap: anywhere; } .review-grid .middle { text-align: center; padding-top: 14px; } .review-grid .middle .score { justify-content: center; } .review-grid .decide { display: flex; flex-direction: column; gap: 6px; } .review-grid .decide button { width: 100%; } .review-row code { background: var(--bg); padding: 1px 4px; border-radius: 4px; font-size: 11.5px; } .flagbox { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); } details.why { margin-top: 8px; } details.why summary { cursor: pointer; color: var(--muted); font-size: 12.5px; } .whybody { padding: 8px 0 2px; display: flex; flex-direction: column; gap: 5px; } .runner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); } @media (max-width: 1000px) { .review-grid { grid-template-columns: 24px 1fr; } .review-grid .middle { text-align: left; padding-top: 0; } .review-grid .middle .score { justify-content: flex-start; } .review-grid .decide { flex-direction: row; } } /* --- score bar --- */ .score { display: flex; align-items: center; gap: 6px; } .score .bar { width: 46px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; } .score .bar i { display: block; height: 100%; background: var(--accent); } /* =================================================================================== Whitespace grid + technology heat map ----------------------------------------------------------------------------------- Colour is never the only channel here. Every square also carries a glyph, a number or a word, because a rep with a colour-vision deficiency has to read the same page as everyone else — and because these pages get printed. The ramps below are declared three times over, matching the pattern the rest of this file already uses: :root for light, the prefers-color-scheme query for a system-dark reader, and :root[data-theme] so the header's own toggle wins over both. =================================================================================== */ :root { /* Sequential ramp for the two intensity heat modes. Five steps, because five is as many as anyone can tell apart at a glance — and every square prints its own number anyway, so the ramp only has to suggest the shape. */ --heat-0: #eef2f7; --heat-0-ink: #64748b; --heat-1: #dce9fa; --heat-1-ink: #1c3a5e; --heat-2: #9cc6f0; --heat-2-ink: #10243d; --heat-3: #4c8fd8; --heat-3-ink: #ffffff; --heat-4: #1d4ed8; --heat-4-ink: #ffffff; --heat-na: #f3f4f6; --heat-na-ink: #94a3b8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --heat-0: #18212f; --heat-0-ink: #7f8ea4; --heat-1: #1d3552; --heat-1-ink: #c7dcf7; --heat-2: #2c5b93; --heat-2-ink: #e8f1fc; --heat-3: #4886c9; --heat-3-ink: #06101c; --heat-4: #79b0ea; --heat-4-ink: #06101c; --heat-na: #1b2230; --heat-na-ink: #67758a; } } :root[data-theme="dark"] { --heat-0: #18212f; --heat-0-ink: #7f8ea4; --heat-1: #1d3552; --heat-1-ink: #c7dcf7; --heat-2: #2c5b93; --heat-2-ink: #e8f1fc; --heat-3: #4886c9; --heat-3-ink: #06101c; --heat-4: #79b0ea; --heat-4-ink: #06101c; --heat-na: #1b2230; --heat-na-ink: #67758a; } /* Read out by a screen reader, invisible on screen. Used wherever a square's meaning is carried by a glyph that would otherwise be announced as punctuation. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ws-legend .row > * { min-width: 240px; } .ws-legend .tag { margin: 0 4px 4px 0; } .ws-key { font-size: 11.5px; } /* --- the grid --- */ .ws-grid { font-size: 12.5px; } .ws-grid th, .ws-grid td { padding: 4px 6px; vertical-align: top; } .ws-grid thead th { position: sticky; top: 0; z-index: 2; } .ws-grid th.ws-account { position: sticky; left: 0; z-index: 3; background: var(--panel); text-align: left; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--ink); min-width: 190px; max-width: 240px; } .ws-grid thead th.ws-account { z-index: 4; background: var(--bg); } .ws-grid td.ws-cell { min-width: 110px; max-width: 190px; border-left: 1px solid var(--line); } .ws-cell details { margin: 0; } .ws-cell summary { cursor: pointer; list-style: none; } .ws-cell summary::-webkit-details-marker { display: none; } .ws-cell .ws-mark { font-weight: 700; margin-right: 3px; } .ws-cell .ws-names { font-weight: 600; } .ws-cell .ws-meta { display: block; font-size: 10.5px; opacity: .85; } .ws-cell .ws-status-word { text-transform: lowercase; } .ws-cell .ws-band { margin-left: 5px; font-style: italic; } .ws-cell .ws-flag { margin-left: 5px; font-weight: 700; } .ws-cell.ws-empty { color: var(--muted); text-align: center; } /* Status. Each pairs a colour with the glyph the template already prints, so removing the colour loses decoration rather than information. */ .ws-we_sold { background: var(--ok-bg); color: var(--ok-ink); } .ws-competitor { background: var(--bad-bg); color: var(--bad-ink); } .ws-evaluating { background: var(--warn-bg); color: var(--warn-ink); } .ws-incumbent { background: var(--panel); color: var(--ink); } .ws-unknown { background: var(--bg); color: var(--muted); } .tag.ws-we_sold { border-color: var(--ok-line); } .tag.ws-competitor { border-color: var(--bad-line); } .tag.ws-evaluating { border-color: var(--warn-line); } /* How well attested. An edge treatment and an italic word, never a change of hue and never an opacity ramp: "faded" is unreadable without a neighbour to compare against, and this is the distinction the product owner cares most about — an inference must not be able to look like a fact. */ .ws-cell.band-verified { box-shadow: inset 3px 0 0 var(--accent); } .ws-cell.band-reported { border-top: 1px dashed var(--muted); } .ws-cell.band-overheard { border-top: 2px dotted var(--muted); font-style: italic; } .tag.band-reported { border-style: dashed; } .tag.band-overheard { border-style: dotted; font-style: italic; } .ws-cell.contested { outline: 1px solid var(--warn-line); outline-offset: -1px; } .ws-cell.renewal-soon { box-shadow: inset 0 -3px 0 var(--warn-line); } .ws-cell.renewal-passed { box-shadow: inset 0 -3px 0 var(--line); } .tag.contested, .tag.renewal-soon { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); } .ws-drill { padding: 6px 2px 2px; font-size: 12px; border-top: 1px solid var(--line); margin-top: 4px; white-space: normal; } .ws-claim + .ws-claim { margin-top: 8px; border-top: 1px dotted var(--line); padding-top: 6px; } .ws-drill blockquote { margin: 4px 0; padding-left: 8px; border-left: 2px solid var(--line); color: var(--muted); } .ws-others { margin: 2px 0 0 14px; padding: 0; } .ws-others .disagrees { color: var(--warn-ink); font-weight: 600; } /* --- mode tabs --- */ .modebar { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 6px; } .modetab { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--muted); font-size: 13.5px; background: var(--panel); } .modetab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* --- the heat map --- */ .heatmap { font-size: 12.5px; } .heatmap th, .heatmap td { padding: 5px 8px; } .heatmap th.ws-account { position: sticky; left: 0; z-index: 3; background: var(--panel); text-align: left; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 12.5px; min-width: 190px; } .heatmap thead th { position: sticky; top: 0; z-index: 2; } .heatmap thead th.ws-account { z-index: 4; background: var(--bg); } .heatmap td.heat { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; border-left: 1px solid var(--line); min-width: 64px; } .heat-text { display: inline-block; min-width: 1.2em; } .heat-i0 { background: var(--heat-0); color: var(--heat-0-ink); } .heat-i1 { background: var(--heat-1); color: var(--heat-1-ink); } .heat-i2 { background: var(--heat-2); color: var(--heat-2-ink); } /* The top two steps carry a hatch as well, so the ramp has a second channel besides lightness for anyone reading it in greyscale or with reduced colour discrimination. */ .heat-i3 { background: var(--heat-3); color: var(--heat-3-ink); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 3px, transparent 3px 7px); } .heat-i4 { background: var(--heat-4); color: var(--heat-4-ink); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 3px, transparent 3px 6px); } .heat-na { background: var(--heat-na); color: var(--heat-na-ink); font-weight: 400; } .heat-we_sold { background: var(--ok-bg); color: var(--ok-ink); } .heat-competitor { background: var(--bad-bg); color: var(--bad-ink); background-image: repeating-linear-gradient(-45deg, rgba(127,29,29,.14) 0 3px, transparent 3px 7px); } .heat-evaluating { background: var(--warn-bg); color: var(--warn-ink); } .heat-incumbent { background: var(--panel); color: var(--ink); } .heat-unknown { background: var(--bg); color: var(--muted); } .heat-whitespace { background: transparent; color: var(--muted); font-weight: 400; } .heat-key { margin: 0 4px 4px 0; } /* --- the partner coverage matrix --------------------------------------------------- Accounts down, partners across, and a binary cell: a rep from that partner covers this account, or we cannot say that they do. Three states are drawn, and each one carries a glyph as well as a colour — a matrix printed in black and white, or read by someone who cannot separate the greens from the greys, still says the same thing. The third state (a row on an aged list) exists because dropping the column would answer "why did our coverage drop?" by deleting the evidence. */ .cov-grid { font-size: 12.5px; } .cov-grid th, .cov-grid td { padding: 5px 8px; } .cov-grid thead th { position: sticky; top: 0; z-index: 2; } .cov-grid th.cov-account { position: sticky; left: 0; z-index: 3; background: var(--panel); text-align: left; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 12.5px; font-weight: 600; min-width: 200px; max-width: 260px; } .cov-grid thead th.cov-account { z-index: 4; background: var(--bg); } .cov-grid th.cov-col { min-width: 84px; } .cov-grid th.cov-aged { font-style: italic; } .cov-grid td.cov-cell { text-align: center; border-left: 1px solid var(--line); font-weight: 700; min-width: 64px; } .cov-cell.cov-yes { background: var(--ok-bg); color: var(--ok-ink); } /* Hatched as well as tinted: "used to count" must not read as a paler "counts". */ .cov-cell.cov-was { background: var(--bg); color: var(--muted); font-weight: 400; font-style: italic; background-image: repeating-linear-gradient(45deg, rgba(127,127,127,.18) 0 3px, transparent 3px 7px); } .cov-cell.cov-no { color: var(--muted); font-weight: 400; } .cov-legend .tag { margin: 0 4px 4px 0; } .cov-key { font-size: 11.5px; } .tag.cov-aged { border-style: dashed; font-style: italic; color: var(--muted); } /* The /admin index: one list of links per card, each with a line saying what it is. */ .admin-links { list-style: none; margin: 0; padding: 0; } .admin-links li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .admin-links li:first-child { border-top: 0; } .admin-links a { font-weight: 600; } /* --- first run ----------------------------------------------------------------- The landing page with nothing on it yet. The two setup actions were a small ghost button and a grey footnote, which is discoverable only to somebody who already knows they exist. */ .firstrun { max-width: 720px; } .firstrun h2 { margin: 0 0 4px; } .startsteps { list-style: none; counter-reset: s; margin: 18px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .startsteps li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; } .startsteps li::before { content: counter(s); font-variant-numeric: tabular-nums; font-size: 1.15rem; opacity: .55; } .startsteps li > div { font-size: .94rem; line-height: 1.5; } @media (max-width: 620px) { .startsteps li { grid-template-columns: 24px minmax(0, 1fr); } .startsteps li .btn { grid-column: 2; justify-self: start; } } /* --- landing tiles --------------------------------------------------------------- Three, in the order the work happens: get your data in, look at your rooms, open a new one. Each carries a live number, because a tile that only names a destination is a link wearing a box. */ .tiles { display: grid; gap: 14px; margin: 4px 0 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .tile { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel, #fff); text-decoration: none; color: inherit; transition: border-color .12s ease, transform .12s ease; } .tile:hover { border-color: currentColor; transform: translateY(-1px); } .tile:focus-visible { outline: 2px solid; outline-offset: 3px; } .tile-k { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .62; } .tile-v { font-size: 2.1rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; } .tile-l { font-size: .88rem; opacity: .78; line-height: 1.45; } .tile-go { margin-top: auto; padding-top: 10px; font-size: .84rem; font-weight: 600; } .tile.accent { border-width: 2px; } /* A tile that is not a link. /data lists the lists you have loaded in the same box the admin index uses for its destinations, and `.tile:hover`'s lift and border highlight promised a click that does nothing — the only controls on those tiles are the buttons inside them. Same box, no affordance. */ .tile.static { cursor: default; } .tile.static:hover { border-color: var(--line); transform: none; } .mt { margin-top: 26px; } /* --- drop zone and per-file type rows --------------------------------------------- The zone is a wrapping a real file input: click, tab and space all work because the input is still there, not because script re-implements them. The input is clipped rather than display:none so it stays focusable and reachable. */ .dropzone { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 30px 20px; margin: 8px 0 12px; cursor: pointer; border: 2px dashed var(--line); border-radius: 6px; background: var(--panel, #fff); transition: border-color .12s ease, background .12s ease; } .dropzone:hover { border-color: currentColor; } .dropzone.is-over { border-style: solid; border-color: currentColor; background: color-mix(in srgb, currentColor 6%, transparent); } .dropzone:focus-within { outline: 2px solid; outline-offset: 3px; } .dropzone-main { font-weight: 600; } .dropzone-sub { font-size: .86rem; opacity: .72; } .dropzone .linkish { text-decoration: underline; } /* Clipped, not hidden — display:none would take it out of the tab order. Clipped only under [data-js], and that is the fix for a confirmation this zone removed and never put back: the clip hides the browser's own "Connections.csv" as well, so with script off a person chose a file and the box still read "Drag your file here". The attribute is set in base.html's , before first paint, so nobody sees the input flash into place; without the script that writes the filename into the prompt, the native control stays visible and says it itself. */ :root[data-js] .dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .filelist { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; } /* A standalone warning line (the drop zone's "that is a folder" message, the noscript note). `.warn` on its own was only ever a modifier for .stat, so it had no colour of its own -- these read as ordinary grey text without it. */ p.warn { color: var(--warn-ink); margin: 0 0 10px; } .filelist[hidden] { display: none; } .filerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; } .filerow-name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; } .filerow-size { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .filerow-kind { flex: 0 0 auto; } .filerow-remove { flex: 0 0 auto; } /* --- plan tabs --------------------------------------------------------------------- Three slices of one list, not three pages. The count rides on each tab so the two you are not looking at still say how big they are — a filter that hides its own existence is how somebody concludes their upload failed. */ .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 6px; border-bottom: 1px solid var(--line); } .tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; text-decoration: none; color: inherit; font-size: .9rem; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; margin-bottom: -1px; opacity: .72; } .tab:hover { opacity: 1; } .tab.on { opacity: 1; font-weight: 600; border-color: var(--line); background: var(--panel); } .tab-n { font-size: .78rem; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-variant-numeric: tabular-nums; } .tab:focus-visible { outline: 2px solid; outline-offset: 2px; } /* --- theme switch ------------------------------------------------------------------ Named, not a lone glyph. The control it replaced was a single 🌗 whose only label was a title attribute — invisible in a busy header, silent to a screen reader, and with no tooltip at all on a touch screen. */ .themer { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; } .themer-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; padding: 0 6px 0 8px; } .themer-opt { appearance: none; cursor: pointer; font: inherit; font-size: .8rem; padding: 3px 10px; border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: .7; white-space: nowrap; } .themer-opt:hover { opacity: 1; } .themer-opt.on { opacity: 1; font-weight: 600; background: var(--accent); color: var(--accent-ink); } .themer-opt:focus-visible { outline: 2px solid; outline-offset: 2px; } /* Narrow screens keep the icons and drop the words — the header is the one place that genuinely runs out of room, and by then the segments have been seen at least once. */ @media (max-width: 720px) { .themer-label { display: none; } .themer-opt { font-size: 0; padding: 4px 8px; } .themer-opt span { font-size: .95rem; } } /* =================================================================================== Glossary tooltips ----------------------------------------------------------------------------------- The mechanism these replace is the one criticised in the rule above, at the theme switch: a native `title` is invisible until hover, silent to a screen reader, and has NO tooltip at all on a touch screen. Every explanation that used to live in a `title` lives here instead, and those three failures are answered separately: * the trigger is a real