/* Tokens from web/DESIGN.md. Pastel blocks carry meaning only: lime = published < 24 h (first-mover window), the other blocks = pipeline statuses. */ :root { --ink: #000; --canvas: #fff; --hairline: #e6e6e6; --hairline-soft: #f1f1f1; --surface-soft: #f7f7f5; --hairline-strong: #cfcfcf; --offre-line: transparent; --chev-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); --on-block: #000; --block-lime: #dceeb1; --block-lilac: #c5b0f4; --block-cream: #f4ecd6; --block-pink: #efd4d4; --block-mint: #c8e6cd; --block-coral: #f3c9b6; --block-navy: #1f1d3d; --magenta: #ff3d8b; --success: #1ea64a; --scrim: rgba(0, 0, 0, 0.6); --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); --sans: "Geist", "SF Pro Display", system-ui, helvetica, sans-serif; --mono: "Geist Mono", "SF Mono", menlo, monospace; --r-xs: 2px; --r-sm: 6px; --r-md: 8px; --r-lg: 24px; --r-pill: 50px; --r-full: 9999px; --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --topbar-h: 64px; color-scheme: light; } /* Theme: Auto follows the OS; data-theme on (set by theme.js before paint) forces one. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #fff; --canvas: #000; --hairline: #2b2b2b; --hairline-soft: #1c1c1c; --hairline-strong: #4a4a4a; --surface-soft: #121212; --chev-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); --offre-line: #9a96e0; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #fff; --canvas: #000; --hairline: #2b2b2b; --hairline-soft: #1c1c1c; --hairline-strong: #4a4a4a; --surface-soft: #121212; --chev-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); --offre-line: #9a96e0; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } a { color: inherit; } :focus-visible { outline: none; box-shadow: var(--ring); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .caption { font-family: var(--mono); font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.6px; text-transform: uppercase; margin: 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs); border: 0; border-radius: var(--r-pill); cursor: pointer; text-decoration: none; font-size: 16px; font-weight: 480; line-height: 1.4; letter-spacing: -0.1px; padding: 8px 18px 9px; min-height: 40px; white-space: nowrap; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--ink); color: var(--canvas); } .btn-secondary { background: var(--canvas); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); } .btn-text { background: transparent; padding: 8px 12px; } .btn-small { font-size: 14px; min-height: 32px; padding: 5px 14px 6px; } .btn-copy.is-done { background: var(--ink); color: var(--canvas); box-shadow: none; } .pill-tab { border: 0; background: transparent; cursor: pointer; border-radius: var(--r-pill); padding: 6px 14px 7px; font-size: 15px; font-weight: 480; white-space: nowrap; } .pill-tab[aria-pressed="true"], .pill-tab[aria-selected="true"] { background: var(--ink); color: var(--canvas); } /* ---------- login ---------- */ .login { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-md); } .login-card { width: min(420px, 100%); display: grid; gap: var(--s-lg); background: var(--block-lime); color: var(--on-block); border-radius: var(--r-lg); padding: var(--s-xxl) var(--s-xl); } .login-title { margin: 0; font-size: 44px; font-weight: 340; line-height: 1.05; letter-spacing: -0.9px; } .login-card input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(0, 0, 0, 0.15); background: #fff; color: #000; font-size: 18px; } .login-card .btn-primary { background: #000; color: #fff; min-height: 48px; font-size: 18px; } .login-card :focus-visible { box-shadow: 0 0 0 2px var(--block-lime), 0 0 0 4px #000; } .login-error { margin: 0; min-height: 1.45em; font-weight: 480; } .field { display: grid; gap: var(--s-xs); } .field-label { font-weight: 480; } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--canvas); height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-md); padding: 0 var(--s-lg); border-bottom: 1px solid var(--hairline); } .wordmark { font-size: 22px; font-weight: 540; letter-spacing: -0.5px; text-decoration: none; } .search { position: relative; flex: 1; max-width: 520px; margin-left: var(--s-md); } .search input { width: 100%; height: 40px; padding: 0 40px 0 16px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface-soft); } .search input:focus { background: var(--canvas); border-color: var(--ink); outline: none; box-shadow: none; } .search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 2px 6px; pointer-events: none; } .sort { display: flex; align-items: center; gap: 2px; margin-left: auto; } .sort .caption { margin-right: 6px; } .search { margin-right: auto; } /* ---------- status tabs & filters ---------- */ .status-tabs { display: flex; gap: var(--s-xxs); padding: var(--s-md) var(--s-lg) 0; overflow-x: auto; scrollbar-width: none; } .status-tabs::-webkit-scrollbar { display: none; } .status-tabs .pill-tab { display: inline-flex; align-items: baseline; gap: 6px; } .tab-count { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.3px; } .filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-lg); padding: var(--s-sm) var(--s-lg) var(--s-md); border-bottom: 1px solid var(--hairline); } .filter { display: flex; align-items: center; gap: var(--s-xs); } .filter select { appearance: none; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; padding: 5px 30px 6px 12px; font-size: 15px; font-weight: 480; cursor: pointer; } .filter-range output { font-family: var(--mono); display: inline-block; min-width: 2ch; } .filter-range input { width: 140px; accent-color: var(--ink); } .filter-check { cursor: pointer; font-weight: 480; font-size: 15px; } .filter-check input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; } .result-count { min-width: 9ch; text-align: right; } .filter-panel { display: contents; } .theme-switch { display: flex; gap: 2px; } .theme-switch .pill-tab { font-size: 13px; padding: 4px 10px 5px; } .theme-panel { display: none; } @media (max-width: 767px) { .theme-top { display: none; } .theme-panel { display: flex; flex-basis: 100%; } } .filters-toggle { display: none; box-shadow: inset 0 0 0 1px var(--hairline); } .filters-toggle[aria-expanded="true"] { background: var(--ink); color: var(--canvas); box-shadow: none; } .filters-toggle .tab-count:empty { display: none; } @media (max-width: 767px) { .filters-toggle { display: inline-flex; align-items: baseline; gap: 6px; } .filter-panel { display: none; } .filter-panel.is-open { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-md); flex-basis: 100%; order: 3; padding-top: var(--s-xs); } .result-count { margin-left: auto; } /* The tab strip scrolls sideways on purpose: snap to pills and fade the cut edge. */ .status-tabs { scroll-snap-type: x proximity; scroll-padding-inline: var(--s-md); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); padding-right: 40px; } .status-tabs .pill-tab { scroll-snap-align: start; } } /* ---------- layout ---------- */ .layout { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 1fr) minmax(440px, 42%); } .detail { position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); overflow-y: auto; border-left: 1px solid var(--hairline); overscroll-behavior: contain; } } /* ---------- list ---------- */ .list { padding: var(--s-md) var(--s-lg) var(--s-xxl); min-width: 0; } .group { margin-bottom: var(--s-lg); } .group-head { display: flex; align-items: baseline; gap: var(--s-sm); padding: var(--s-sm) var(--s-xs) var(--s-xs); } .group-title { margin: 0; font-size: 20px; font-weight: 540; letter-spacing: -0.3px; } /* The single color block of the view: offers under 24 h, where applying first matters most. */ .group.is-hot { background: var(--block-lime); color: var(--on-block); border-radius: var(--r-lg); padding: var(--s-xs) var(--s-xs) var(--s-sm); } .group.is-hot .group-head { padding-left: var(--s-sm); } .group.is-hot .row { --row-hover: rgba(0, 0, 0, 0.05); --row-line: rgba(0, 0, 0, 0.1); --row-ink: #000; } .row { --row-hover: var(--surface-soft); --row-line: var(--hairline-soft); --row-ink: var(--ink); position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 2px var(--s-md); align-items: start; padding: var(--s-sm) var(--s-sm); border-radius: var(--r-md); cursor: pointer; border-top: 1px solid var(--row-line); } .row:first-of-type, .group-head + .row { border-top-color: transparent; } .row.is-selected { box-shadow: inset 0 0 0 1.5px var(--row-ink); border-top-color: transparent; } .row.is-selected + .row { border-top-color: transparent; } .row:focus-visible { box-shadow: inset 0 0 0 2px var(--row-ink); } .score { grid-row: 1 / span 3; padding-top: 1px; } /* Score pill: the band is the color. 90+ takes the primary (inverse) surface rather than lime, because lime already means "< 24 h" and a lime pill would vanish inside the lime group. */ .score-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); font-weight: 540; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.4px; border: 1px solid transparent; } /* Numeric-only and large, so a 90+ pill never reads like the small inverse "Moins de 25 candidats" tag. */ .score-row { min-width: 64px; height: 46px; padding: 0 12px; font-size: 29px; letter-spacing: -0.8px; } .score-detail { min-width: 92px; height: 60px; padding: 0 18px; font-size: 36px; letter-spacing: -0.8px; } .band-excellent { background: var(--ink); color: var(--canvas); } .group.is-hot .band-excellent { background: #000; color: #fff; } .band-tresbon { background: var(--block-mint); color: #000; border-color: rgba(0, 0, 0, 0.14); } .band-bon { background: var(--block-cream); color: #000; border-color: rgba(0, 0, 0, 0.14); } .band-faible, .band-none { border-color: color-mix(in srgb, currentColor 30%, transparent); font-weight: 400; } .row-main { min-width: 0; } .row-title { margin: 0; font-size: 17px; font-weight: 540; line-height: 1.3; letter-spacing: -0.2px; display: flex; align-items: baseline; gap: var(--s-xs); } .row-title span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .row-company { margin: 1px 0 0; font-weight: 480; } .meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-sm); margin: 6px 0 0; font-size: 13px; font-weight: 330; } .meta:empty { display: none; } .meta > span { white-space: nowrap; } .meta .muted-out { text-decoration: line-through; } .new-dot { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; background: var(--magenta); border-radius: var(--r-pill); padding: 3px 7px 2px; align-self: center; } /* Tag pills: text says what, tone says good/bad. Borders mix from currentColor so they read on white, black and the lime block alike. */ .tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .d-head .tags { margin: 0; } .tag { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px 2px; border-radius: var(--r-pill); font-size: 13px; font-weight: 480; line-height: 1.3; letter-spacing: -0.05px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); white-space: nowrap; } /* Filled pastels keep a faint dark edge so cream/mint still separate from the lime block. */ .tag-plus, .tag-minus, .tag-mission, .tag-startup { color: #000; border-color: rgba(0, 0, 0, 0.14); } .tag-plus { background: var(--block-mint); } .tag-minus { background: var(--block-coral); } .tag-mission { background: var(--block-cream); } .tag-startup { background: var(--block-lilac); } .tag-hot { background: var(--ink); color: var(--canvas); border-color: transparent; font-weight: 540; } .group.is-hot .tag-hot { background: #000; color: #fff; } .tag-muted { border-style: dashed; font-weight: 330; } .tag-ready { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; border-color: currentColor; } .row-side { display: grid; justify-items: end; gap: var(--s-xs); } .age { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 480; font-variant-numeric: tabular-nums; white-space: nowrap; } .fresh-mark { width: 8px; height: 8px; border-radius: var(--r-full); border: 1.5px solid currentColor; } .fresh-mark[data-f="hot"] { background: currentColor; } .fresh-mark[data-f="recent"] { background: linear-gradient(to top, currentColor 50%, transparent 50%); } .fresh-mark[data-f="week"] { background: transparent; } .fresh-mark[data-f="old"] { border-style: dotted; } /* status select, colored by pipeline stage */ .status-select { appearance: none; border: 0; cursor: pointer; border-radius: var(--r-pill); padding: 4px 26px 5px 12px; font-size: 13px; font-weight: 540; color: var(--st-fg, #000); background: var(--st-bg, var(--surface-soft)) var(--st-chev, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E")) no-repeat right 10px center; box-shadow: inset 0 0 0 1px var(--st-line, transparent); } .status-select option { color: #000; background: #fff; } [data-status="nouveau"] { --st-bg: var(--canvas); --st-fg: var(--ink); --st-line: var(--hairline-strong); --st-chev: var(--chev-ink); } /* On the lime block the neutral pill stays white/black in both themes. */ .group.is-hot [data-status="nouveau"] { --st-bg: #fff; --st-fg: #000; --st-line: rgba(0, 0, 0, 0.2); --st-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); } [data-status="a_postuler"] { --st-bg: var(--block-cream); } [data-status="postule"] { --st-bg: var(--block-lilac); } [data-status="relance"] { --st-bg: var(--block-coral); } [data-status="entretien"] { --st-bg: var(--block-mint); } /* Navy, not lime: lime is reserved for the < 24 h freshness signal. */ .status-select[data-status="offre"] { --st-bg: var(--block-navy); --st-line: var(--offre-line); color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); } [data-status="refuse"] { --st-bg: var(--block-pink); } [data-status="ecarte"] { --st-bg: #e8e8e6; } .row[data-status="ecarte"] .row-main, .row[data-status="refuse"] .row-main { opacity: 0.55; } .group-toggle { margin-left: auto; } .show-old { margin: var(--s-xs) var(--s-sm) 0; } .status-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-sm); margin: 0; font-weight: 480; } .status-note:empty { display: none; } .relance-hint { background: var(--block-coral); color: #000; border-radius: var(--r-pill); padding: 3px 12px 4px; font-weight: 540; } .list-empty { padding: var(--s-xxl) var(--s-md); max-width: 46ch; } .list-empty h2 { margin: 0 0 var(--s-xs); font-size: 26px; font-weight: 340; letter-spacing: -0.3px; } .list-empty p { margin: 0 0 var(--s-md); } /* ---------- detail ---------- */ .detail-empty { padding: var(--s-xxl) var(--s-xl); display: grid; gap: var(--s-sm); } .detail-empty p { margin: 0; } @media (max-width: 1023px) { .detail:not(.is-open) { display: none; } } @media (max-width: 1023px) { .detail.is-open { position: fixed; inset: 0; z-index: 40; background: var(--canvas); overflow-y: auto; overscroll-behavior: contain; } } .sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); padding: var(--s-sm) var(--s-md); background: var(--canvas); border-bottom: 1px solid var(--hairline); } @media (min-width: 1024px) { .sheet-bar { display: none; } } .d-wrap { padding: var(--s-xl) var(--s-xl) var(--s-xxl); display: grid; gap: var(--s-xl); } .d-head { display: grid; gap: var(--s-sm); } .d-company { margin: 0; font-size: 18px; font-weight: 480; } .d-title { margin: 0; font-size: 30px; font-weight: 340; line-height: 1.12; letter-spacing: -0.6px; overflow-wrap: anywhere; } .d-scoreline { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; } .d-band { display: grid; gap: 2px; font-size: 18px; font-weight: 540; letter-spacing: -0.2px; } .d-profile { font-size: 15px; font-weight: 330; } .d-actions { display: flex; flex-wrap: wrap; gap: var(--s-xs); } .d-status { display: flex; flex-wrap: wrap; gap: 4px; } .d-status .pill-tab { font-size: 14px; padding: 5px 12px 6px; box-shadow: inset 0 0 0 1px var(--hairline); } .d-status .pill-tab kbd { font-family: var(--mono); font-size: 11px; opacity: 0.6; margin-left: 4px; } .d-status .pill-tab[aria-pressed="true"] { box-shadow: none; } .section { display: grid; gap: var(--s-md); border-top: 1px solid var(--hairline); padding-top: var(--s-lg); } .section-title { margin: 0; font-size: 22px; font-weight: 540; letter-spacing: -0.3px; } .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-md) var(--s-lg); margin: 0; } .facts div { min-width: 0; } .facts dt { margin-bottom: 6px; } .facts dd { margin: 0; font-weight: 480; overflow-wrap: anywhere; } .hook { margin: 0; font-size: 19px; font-weight: 340; line-height: 1.4; } .risk { margin: 0; display: grid; gap: 6px; } .bars { display: grid; gap: 10px; } .bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 56px; align-items: center; gap: var(--s-sm); font-size: 14px; } .bar-track { height: 6px; border-radius: var(--r-full); background: var(--hairline-soft); overflow: hidden; } .bar-fill { height: 100%; background: var(--ink); border-radius: var(--r-full); } .bar-val { font-family: var(--mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; } .block { display: grid; gap: var(--s-xs); } .block-head { display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap; } .block-title { margin: 0; font-size: 16px; font-weight: 540; } .block-count { margin-right: auto; } .block-body { margin: 0; padding: var(--s-md); border-radius: var(--r-md); background: var(--surface-soft); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; } .block-body ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; white-space: normal; } .empty-note { margin: 0; padding: var(--s-lg); border-radius: var(--r-md); border: 1px dashed var(--hairline); } .empty-note strong { display: block; font-weight: 540; margin-bottom: 4px; } .infos { display: grid; margin: 0; } .info { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--s-sm); align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline-soft); } .info:first-child { border-top: 0; } .info dd { margin: 0; overflow-wrap: anywhere; font-weight: 480; } .notes { width: 100%; min-height: 140px; resize: vertical; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--canvas); line-height: 1.5; } .notes:focus { border-color: var(--ink); outline: none; box-shadow: none; } details.desc summary { cursor: pointer; font-size: 22px; font-weight: 540; letter-spacing: -0.3px; list-style: none; display: flex; justify-content: space-between; align-items: center; } details.desc summary::-webkit-details-marker { display: none; } details.desc summary::after { content: "+"; font-weight: 340; font-size: 28px; line-height: 1; } details.desc[open] summary::after { content: "−"; } .desc-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--s-md) 0 0; max-width: 72ch; } .error-box { margin: var(--s-xl); padding: var(--s-lg); border-radius: var(--r-md); background: var(--block-pink); color: #000; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: var(--s-lg); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--canvas); border-radius: var(--r-pill); padding: 10px 20px 11px; font-weight: 480; max-width: calc(100vw - 32px); } /* ---------- small screens ---------- */ @media (max-width: 720px) { :root { --topbar-h: 108px; } .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding: var(--s-sm) var(--s-md); row-gap: var(--s-sm); } .search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; } .search kbd { display: none; } #logout { margin-left: auto; padding: 6px 10px; font-size: 14px; min-height: 32px; } .filter:not(.filter-range) > .caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sort { margin-left: 0; } .sort .caption { display: none; } .status-tabs { padding: var(--s-sm) var(--s-md) 0; } .filters { padding: var(--s-sm) var(--s-md); gap: var(--s-sm) var(--s-md); } .filter-range input { width: 110px; } .result-count { margin-left: auto; min-width: 0; } .block-count { order: 3; flex-basis: 100%; } .block-head .btn-copy { margin-left: auto; } .d-actions .btn-primary { display: none; } .list { padding: var(--s-xs) var(--s-xs) var(--s-xxl); } .group.is-hot { border-radius: var(--r-md); } .row { grid-template-columns: 60px minmax(0, 1fr); padding: var(--s-sm) var(--s-xs); gap: 2px var(--s-sm); } .score { grid-row: 1 / span 2; } .score-row { min-width: 54px; height: 40px; padding: 0 9px; font-size: 24px; } .row-side { grid-column: 2; display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-xs); } .d-wrap { padding: var(--s-lg) var(--s-md) var(--s-xxl); } .d-title { font-size: 26px; } .score-detail { height: 52px; font-size: 30px; } .info { grid-template-columns: minmax(0, 1fr) auto; } .info dt { grid-column: 1 / -1; } .bar { grid-template-columns: 84px minmax(0, 1fr) 48px; } } @media (max-width: 380px) { .wordmark { font-size: 19px; } .pill-tab { padding: 6px 10px 7px; font-size: 14px; } } /* Hover only where a pointer can hover: on touch screens it sticks after a tap. */ @media (hover: hover) { .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--ink); } .btn-text:hover { background: var(--surface-soft); } .pill-tab:not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-expanded="true"]):hover { background: var(--surface-soft); } .row:hover { background: var(--row-hover); } } @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }