/* OpenMarketIL. Swiss grid, modernized. System rules, don't break them ad hoc elsewhere in this file: 1. Sage-cream page background (--white); forest-green ink is a component color (buttons, rules), never on directly. 2. Green marks exactly one "this matters" element, never decoration. 3. 4px radius on every discrete bordered box (buttons, chips, badges, inputs, floating panels); sharp (0) only for what isn't really a box -- grid-tile cards, the table, dividers. No box-shadow depth anywhere either way. See DESIGN.md's Shapes section for the full list of what stays sharp and why. 4. Two voices: --font (Helvetica) for everything dense; --font-display (Overused Grotesk, bold/extrabold) only for the topbar and the two section titles. 5. Job Board and Statistics are permanent, side by side above the mobile breakpoint (where they stack), never a drawer or toggle. 6. Light/dark both read var(--white)/var(--black), never a literal hex, but the two palettes are tuned independently rather than one being a straight hex-invert of the other. */ @font-face { font-family: "Overused Grotesk"; src: url("fonts/OverusedGrotesk-VF.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; } :root { --white: #f3f6e4; --black: #40513b; --green: #609966; --green-bright: #80ad85; --grey: #40513b; --grey-line: #c7d9b3; /* reported live: the original #dce8ce sat too close to --white's #f3f6e4 to read as a visible line at all */ --red: #b8362c; --hover-bg: #e9efdb; --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Overused Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Side padding for .workspace/.container. Scales with viewport (20px floor, 64px ceiling) instead of a fixed max-width box. */ --gutter: clamp(20px, 4vw, 64px); --rule: 2px; /* Forces native chrome (input caret, scrollbars) to follow OUR toggle instead of the OS's own dark-mode setting, which would otherwise paint them dark against our light surfaces. */ color-scheme: light; } :root[data-theme="dark"] { --white: #17181c; --black: #ededec; --green: #2fae60; --green-bright: #4ee585; --grey: #9a9a9a; --grey-line: #2b2c31; --hover-bg: #1e1f24; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--white); color: var(--black); } body { font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--black); color: var(--white); } /* Custom scrollbars, theme-tokened like the rest of the page. The thumb's border uses the track color, the standard trick for an inset look. */ html { scrollbar-width: thin; scrollbar-color: var(--black) var(--white); } *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: var(--white); } *::-webkit-scrollbar-thumb { background: var(--black); border: 3px solid var(--white); background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--green); } *::-webkit-scrollbar-corner { background: var(--white); } a { color: inherit; } a.link { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--green); } a.link:hover { background: var(--green); color: var(--white); } .icon-link { display: inline-flex; align-items: center; color: var(--black); } .icon-link:hover { color: var(--green); } button, input, select { font-family: var(--font); font-size: 13px; color: var(--black); caret-color: var(--black); /* belt-and-suspenders on top of color-scheme: light above */ } .container { padding: 0 var(--gutter); } .section { border-bottom: var(--rule) solid var(--black); padding: 12px 0 40px; } .section-title { font-family: var(--font-display); font-size: 34px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; margin: 0 0 12px; } /* Topbar */ .topbar { font-family: var(--font-display); border-bottom: var(--rule) solid var(--black); position: sticky; top: 0; background: var(--white); z-index: 10; } .topbar .container { display: flex; align-items: center; gap: 16px; /* nowrap, deliberately: .ticker has min-width:0 + overflow:hidden so it shrinks to fit instead. flex-wrap here wrapped the whole topbar onto 3 lines at any width short of "everything fits." */ flex-wrap: nowrap; min-height: 56px; padding-top: 10px; padding-bottom: 10px; } .topbar .container > * { min-width: 0; } /* same min-width:auto issue as everywhere else in this file */ .status-indicator, .wordmark, .topnav { flex: 0 0 auto; } /* natural width; the ticker is the one flexible element between them */ .status-indicator { display: flex; align-items: center; } /* Topbar ticker: seamless CSS-loop marquee. The item list is duplicated once in the track, animated exactly -50% so the loop has no visible seam. */ .ticker-rule { flex: 0 0 auto; width: var(--rule); height: 22px; background: var(--black); } .ticker { flex: 1 1 auto; min-width: 0; overflow: hidden; height: 20px; display: flex; align-items: center; /* .ticker-track's height comes from its own text content, not this 20px window; without this it just sits at the top of the clipped box instead of centered in it */ } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 40s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } /* let a visitor actually read/click one without it sliding away */ @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--black); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--grey-line); } .ticker-item:hover { color: var(--green); } .ticker-item .bullet { color: var(--green); } .ticker-item .ticker-company { color: var(--grey); } .ticker-item:hover .ticker-company { color: var(--green); } .wordmark { display: inline-flex; align-items: center; text-decoration: none; } /* The provided lockup (logo-horizontal.png) is a solid-fill rounded-rect card, not a transparent mark -- same "fixed brand color regardless of the page's own theme toggle" precedent as the favicon (DESIGN.md). Height picked to sit comfortably inside the topbar's ~36px content row (min-height:56px minus its 10px top/bottom padding) without forcing it taller; width follows the source image's own aspect ratio. */ .wordmark-logo { height: 34px; width: auto; } .topnav { display: flex; align-items: center; gap: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .theme-toggle { background: none; border: none; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: inherit; text-transform: uppercase; letter-spacing: 0.08em; padding: 0; cursor: pointer; border-bottom: 1px solid transparent; } .theme-toggle:hover { color: var(--green); border-color: var(--green); } /* Auth. Same dropdown shape as .ms-menu (position:relative parent, absolute panel, 2px ink border, paper background) -- one hand-built pattern, not a second one invented for this. */ /* display:flex here is only for the signed-in case's two triggers (+ Alert, email) sitting side by side -- the signed-out case's single trigger and the (always position:absolute, out of flow) panel are unaffected either way. */ .auth-area { position: relative; display: flex; align-items: center; gap: 12px; } .auth-trigger { background: none; border: none; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: inherit; text-transform: uppercase; letter-spacing: 0.08em; padding: 0; cursor: pointer; border-bottom: 1px solid transparent; } .auth-trigger:hover, .auth-trigger.active { color: var(--green); border-color: var(--green); } .auth-signed-in { display: flex; align-items: center; gap: 10px; font-size: 11px; text-transform: none; letter-spacing: normal; } .auth-signed-in .auth-email { color: var(--grey); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-signout { background: none; border: none; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: inherit; text-transform: uppercase; letter-spacing: 0.08em; padding: 0; cursor: pointer; } .auth-signout:hover { color: var(--red); } .alerts-header { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .alerts-empty { font-size: 12px; color: var(--grey); margin: 0 0 12px; } .alert-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-line); } .alert-row:last-child { border-bottom: none; } .alert-summary { font-size: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alert-row.paused .alert-summary { color: var(--grey); } .alert-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .alert-toggle { background: none; border: 1px solid var(--black); border-radius: 4px; padding: 3px 8px; font-family: var(--font); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--black); cursor: pointer; } .alert-toggle:hover { background: var(--black); color: var(--white); } .alert-delete { background: none; border: none; color: var(--grey); font-size: 13px; line-height: 1; cursor: pointer; padding: 2px; } .alert-delete:hover { color: var(--red); } .create-alert-feedback { margin: 8px 0 0; font-size: 11px; color: var(--green); } .create-alert-feedback.error { color: var(--red); } /* New-alert form, inside the My Alerts panel (app.js's wireAlertCreateForm) -- its own filter pickers, independent of the board's .filters above. */ .alert-create { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grey-line); } .alert-create-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .alert-create-fields input[type="text"] { border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); padding: 9px 10px; height: 38px; width: 100%; font-family: var(--font); } .alert-create-fields input[type="text"]:focus { outline: 2px solid var(--green); outline-offset: -2px; } .alert-create-fields label.toggle { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: var(--rule) solid var(--black); border-radius: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .alert-create-fields label.toggle input { accent-color: var(--green); } .alert-create .btn { width: 100%; } /* 4px radius -- same scoped exception as .job-detail/.ms-menu above. */ .auth-panel { position: absolute; top: calc(100% + 4px); right: 0; width: 260px; max-height: calc(100vh - 80px); overflow-y: auto; background: var(--white); border: var(--rule) solid var(--black); border-radius: 4px; z-index: 40; padding: 14px; text-transform: none; letter-spacing: normal; font-family: var(--font); } .auth-panel.alerts-panel { width: 320px; } /* alert summaries + action buttons, plus the new-alert form, need more room than the sign-in form */ .auth-provider-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; margin-bottom: 8px; border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); color: var(--black); font-family: var(--font); font-size: 13px; /* Body, matching .filters input/.ms-toggle -- 12.5px sat in the gap between Label and Body for no reason */ font-weight: 700; text-align: left; cursor: pointer; } .auth-provider-btn svg { flex: 0 0 auto; } /* Google's mark keeps its own brand colors on hover (fill="currentColor" only on GitHub's, which does follow) */ .auth-provider-btn:hover { background: var(--black); color: var(--white); } .auth-divider { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); margin: 10px 0; } .auth-email-form { display: flex; gap: 6px; } .auth-email-form[hidden] { display: none; } /* same fix as .job-detail[hidden]: a class rule's display beats the UA [hidden] stylesheet without this */ .auth-email-form input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 9px 10px; border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); color: var(--black); font-family: var(--font); font-size: 13px; } .auth-email-form input:focus { outline: 2px solid var(--green); outline-offset: -2px; } .auth-email-form .btn { flex: 0 0 auto; padding: 0 12px; font-size: 11px; } .auth-error { margin: 8px 0 0; font-size: 11px; color: var(--red); } /* A square block, not a circle, per the sharp-corners rule. Reported live: the flicker animation this used to have read as distracting, not lively -- a flat, static color communicates the same LIVE/OFFLINE state without asking for attention every 1.6s. */ .status-dot { width: 8px; height: 8px; background: var(--green); display: inline-block; margin-right: 6px; } .status-dot.offline { background: var(--red); } /* Workspace: Job Board (main) + Market Stats (a permanent right-hand board, not a drawer/overlay). Stacks vertically under the responsive breakpoint at the end of this file. */ .workspace { display: grid; grid-template-columns: 1fr clamp(360px, 28vw, 460px); align-items: start; padding: 0 var(--gutter); } /* min-width:0. Without it a grid item can't shrink below its content's natural width, so one long unbreakable value (a table row, a bar-list name) forces the whole page wider instead of wrapping locally. */ .workspace > #board, .workspace > .stats-board { min-width: 0; } /* Container, not just a grid item: #board's own width is what the filter bar actually has to fit in, and that's decoupled from the viewport once the two-column workspace grid is active (Market Stats' clamp(360px, 28vw, 460px) column eats a variable, viewport-independent chunk of the row). A viewport-width media query for the filter-wrap breakpoint below got this wrong: it never fired above 640px viewport width even though #board itself could be narrower than that, cutting the filter row off instead of wrapping it. See the @container rule in the responsive section for the actual fix. */ #board { container-type: inline-size; } /* No border at all, per request -- the muted row separators inside #board are the only divider system now; nothing artificially walls the board off from Market Stats beside it. Padding stays, for breathing room between the two columns' content. */ .workspace > #board { padding-right: var(--gutter); } .workspace > #board .container { padding: 0; } .stats-board { position: sticky; top: 57px; /* topbar height + its 2px bottom rule */ max-height: calc(100vh - 57px); overflow-y: auto; /* Right padding is half the left gutter, not zero. Without it the scrollbar (inside this box's own right edge) sits flush against the panel content with no breathing room. */ padding: 12px calc(var(--gutter) / 2) 40px var(--gutter); } .stats-board .metrics-grid { grid-template-columns: repeat(2, 1fr); } .stats-board .panel-grid { grid-template-columns: 1fr; } /* Metrics grid */ /* Same shape as .panel-grid/.panel below: the black background is just the hairline showing through the gaps. The cells are the light surface, matching the (correctly white) panels beside them. */ .metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--rule); /* --grey-line, not --black -- reported live, the dividers read too bold/high-contrast (this is the same "quiet divider" token already used for table.jobs row separators, same reasoning: a full-strength ink line is a section-level rule, not what a dense grid of small tiles needs between every cell). */ background: var(--grey-line); border: var(--rule) solid var(--grey-line); /* Scoped to just the Market Stats box, per request -- same 4px radius as the filter bar, top corners only (the seam it shares with panel-grid below stays square). overflow:hidden so the corner .metric-card's square white background actually follows the curve instead of poking a square corner past it. */ border-radius: 4px 4px 0 0; overflow: hidden; } .metric-card { background: var(--white); color: var(--black); padding: 18px 16px; min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; } .metric-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); } .metric-card .value { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 10px; color: var(--black); } .metric-card.highlight .value { color: var(--green); } .metric-card .sub { font-size: 11.5px; color: var(--grey); margin-top: 4px; } /* API Status card only, third line -- same size/color as .sub above, just a second one, so it introduces no new type-ramp step. tabular-nums keeps the countdown's digits from jittering in width as it ticks down every second. */ .metric-card .sync-countdown { font-size: 11.5px; color: var(--grey); margin-top: 2px; font-variant-numeric: tabular-nums; } /* Market-insight panels: who's hiring, what for, where. No ATS-vendor breakdown here; that's plumbing, not a market signal. */ .panel-grid { margin-top: calc(var(--rule) * -1); /* overlaps metrics-grid's bottom border into one shared line, no visible gap */ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rule); background: var(--grey-line); /* same reasoning as metrics-grid above */ border: var(--rule) solid var(--grey-line); /* Bottom corners only -- see metrics-grid above, this is the other half of the same visually-seamless box. */ border-radius: 0 0 4px 4px; overflow: hidden; } .panel { background: var(--white); padding: 18px 20px 20px; } .panel-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); margin-bottom: 12px; font-weight: 700; } .bar-row { display: grid; grid-template-columns: 1fr 100px 44px; align-items: center; gap: 12px; font-size: 12.5px; padding: 6px 0; } .bar-row .name { min-width: 0; /* the ellipsis below can't engage without this */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-row .bar-track { background: var(--grey-line); height: 9px; position: relative; } .bar-row .bar-fill { background: var(--black); height: 100%; } .bar-row:first-child .bar-fill { background: var(--green); } .bar-row .n { text-align: right; font-variant-numeric: tabular-nums; } .bar-row.clickable { cursor: pointer; } .bar-row.clickable .name:hover { color: var(--green); text-decoration: underline; } .trend-chart { width: 100%; height: 64px; display: block; overflow: visible; } /* Shared by every trend line: a single smooth stroke, no fill, no per-point markers. .closed overrides the color for the second line sharing a chart (new-listings dark, closed the signal green). */ .trend-line { fill: none; stroke: var(--black); stroke-width: 1.5; } .trend-line.closed { stroke: var(--green); } .trend-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; } .trend-legend .dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; } .trend-legend .dot.new { background: var(--black); } .trend-legend .dot.closed { background: var(--green); } .trend-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } /* One big headline number, for a panel whose whole point is a single stat (the dormant-listing rate), not a list of several. */ .ghost-pct { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .ghost-sub { font-size: 11.5px; color: var(--grey); margin-top: 8px; } @media (max-width: 720px) { .panel-grid { grid-template-columns: 1fr; } } /* Job board */ /* The list and its detail panel, side by side. Same fixed-width-sidebar idiom as .workspace (board/stats). .job-detail starts [hidden] in index.html; app.js clears that on first selection. Never a drawer or modal, laid out in-flow like everything else in this system. */ .board-split { display: flex; align-items: flex-start; gap: var(--gutter); } .board-list { flex: 1 1 0; min-width: 0; } /* 4px radius, per request -- same scoped exception as the filter bar and Market Stats box (see DESIGN.md's Shapes section), extended to every standalone floating/bordered container. 20px padding already keeps content clear of the corners, so no overflow:hidden needed. */ .job-detail { flex: 0 0 clamp(320px, 34%, 420px); min-width: 0; position: sticky; top: 77px; /* topbar (56px content + 2px rule) + a little breathing room, so it doesn't sit flush under the sticky header */ max-height: calc(100vh - 97px); overflow-y: auto; border: var(--rule) solid var(--black); border-radius: 4px; padding: 20px; } .job-detail[hidden] { display: none; } .job-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .job-detail-header-actions { display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto; } .job-detail-icon-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); color: var(--black); width: 28px; height: 28px; font-size: 13px; cursor: pointer; } .job-detail-icon-btn:hover { background: var(--black); color: var(--white); } /* The "Copied" text feedback (see copyToClipboard) doesn't fit a fixed 28px square -- briefly relaxes to a small pill instead of clipping, then snaps back once the timeout restores the plain icon. */ .job-detail-icon-btn.copied { width: auto; padding: 0 8px; font-size: 11px; color: var(--green); border-color: var(--green); background: var(--white); } .job-detail-title { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 2px 0 0; overflow-wrap: anywhere; } .job-detail-company { color: var(--grey); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; overflow-wrap: anywhere; } .job-detail-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .job-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--black); } .job-detail-apply { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; background: var(--green); color: var(--white); border: var(--rule) solid var(--green); border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; } .job-detail-apply:hover { background: var(--black); border-color: var(--black); } .job-detail-star { border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); height: 38px; padding: 0 14px; font-size: 13px; cursor: pointer; white-space: nowrap; } .job-detail-star.on { color: var(--green); border-color: var(--green); } .job-detail-star:hover { border-color: var(--green); color: var(--green); } .job-detail-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .job-detail-meta-row { display: flex; gap: 10px; font-size: 12.5px; } .job-detail-meta-row .label { flex: 0 0 92px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; padding-top: 1px; } .job-detail-meta-row .value { overflow-wrap: anywhere; } .job-detail-description-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); font-weight: 700; margin-bottom: 10px; } .job-detail-description { font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .job-detail-description.empty { color: var(--grey); font-style: normal; } .job-detail-desc-heading { display: block; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--grey); margin-top: 12px; } table.jobs tbody tr.selected { background: var(--hover-bg); } table.jobs tbody tr[data-id] { cursor: pointer; } @media (max-width: 1300px) { .board-split { flex-direction: column; } .job-detail { flex-basis: auto; width: 100%; position: static; max-height: none; } } /* Flex, not a fixed-column grid, so #f-q/#f-keywords/.ms can each take a different share of the row. Stays on one line (nowrap) down to 640px of #board's own width, then wraps -- see the @container rule below. */ .filters { display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 20px; } .filters > *, .filters-sub > * { min-width: 0; } /* form controls have a real intrinsic width too */ #f-q { flex: 2 1 120px; } #f-keywords { flex: 1 1 90px; } .filters .ms { flex: 1 1 80px; } .filters #f-date-posted, .filters #f-sort { flex: 1 1 100px; } .filters label.toggle, .filters #f-reset { flex: 0 0 auto; } /* A second flex row nested in the first, not a wrapper div that steps out of the layout -- visually just more items in .filters's own row above the @container breakpoint below, real box only needed so the breakpoint has something to collapse. */ .filters-sub { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 10px; } .filters-toggle { display: none; } /* Scoped to just the filter bar, per request -- a small radius and a 1px (not --rule's 2px) border here only, not a system-wide change to DESIGN.md's rounded:none. Everything outside .filters (buttons, badges, chips, cards, panels) stays sharp-cornered. */ .filters input[type="text"], .filters select { border: 1.5px solid var(--black); border-radius: 4px; background: var(--white); padding: 9px 10px; height: 38px; width: 100%; } .filters input[type="text"]:focus, .filters select:focus { outline: 2px solid var(--green); outline-offset: -2px; } /* The native select arrow sits right against the border by default -- reported live as too tight. appearance:none drops it in favor of a hand-drawn chevron with real breathing room from the edge. Reported live: currentColor inside a *referenced* SVG (a data URI used as background-image, as opposed to an inline