/* Throughline — one stylesheet, no build step, no external requests. */ /* --------------------------------------------------------------------------- Design tokens. Two accent axes carry the tool's central idea and must never be confused: --thread-mark lime (dark) / teal-cyan (light) — thread relevance ONLY --adjacent violet in both themes — adjacency ONLY Neither is ever used for verdicts, links, borders, or chrome. The axes are also distinguished by *shape* (heavy numeral + chip vs. outlined bracket), so they survive greyscale and colour-blindness, not just hue. Legacy aliases at the bottom of each block keep the other screens coherent while only the Feed is restructured. --------------------------------------------------------------------------- */ :root { /* One width for the app shell, per page. The feed's two columns need more room than a prose page does, and the site header has to inset to whichever is in force — otherwise the wordmark hangs off to the left of the content it is supposed to sit above. Declaring it here and overriding it on body.feed-page means the header, the page container, and the feed cannot drift apart. */ --shell: 62rem; --page: #eef1f6; --surface: #fbfcfe; --surface-sunken: #f1f4f9; --surface-selected: #eef6fb; --surface-hover: #f4f7fc; --border: #d5dde9; --border-strong: #c2cddd; --border-soft: #e6ebf2; --text-strong: #0b1526; --text: #1b2b47; /* dim carries reading text (blurbs, method lines), so it is held at ~7:1 — AAA for normal text — not at the 4.5:1 AA floor. AA is what incidental text must clear, not what a paragraph someone actually reads should sit at. dimmer carries labels and timestamps and may sit lower. These were also the wrong way round: dim (5.62:1) was fainter than dimmer (6.12:1) in dark mode. */ --text-dim: #4a5872; /* 7.6:1 on --surface */ --text-dimmer: #616f8b; /* 5.6:1 — was #8794aa, 2.99:1, below AA */ --thread-mark: #0b7896; --thread-mark-ink: #ffffff; --thread-chip-line: #b6d9e3; --thread-chip-fill: #c4f4ff; --thread-chip-ink: #0a3745; --thread-chip-fill-hi: #7bf0ff; --thread-chip-ink-hi: #08303d; --adjacent: #5b3fc4; --adjacent-dim: #6a52c9; --adjacent-line: #d5cbf7; --adjacent-line-sel: #c6b9f2; --adjacent-wash: #f5f2fe; /* A panel tint, lighter than the wash: the adjacency card was a filled violet block that outranked the verdict beside it. */ --adjacent-tint: #faf9ff; /* Swipe actions wear what the app already wears for the same two actions. The pane's Save is .btn-primary, filled with the accent; its Dismiss is .btn-tertiary, which has no fill at all. So: one accent and one neutral, not two competing hues. An earlier attempt gave them a green and a coral, chosen to sit as far as possible in hue from both accent axes. They did — and landed outside the palette entirely, reading as Christmas rather than as this app. Distance from the axes was the wrong thing to maximise; belonging was. Save takes the *highlight* chip fill rather than the thread mark itself, because that is the brightest voice the palette has and a full-height block of the darker teal reads as chrome. Skip takes --cool, which is already what a skipped card's numeral wears. */ --swipe-save: var(--thread-chip-fill-hi); --swipe-save-ink: var(--thread-chip-ink-hi); --swipe-skip: #6b7280; --swipe-skip-ink: #ffffff; /* Star takes --hot, which the card language already uses to mean "worth reading" — apt for the tier that means read this next, and palette-native rather than a fourth invented hue. Not --warm, which was the first choice: in the dark theme amber sits only 30 degrees from the acid on the Save button beside it, and two yellowish blocks side by side is the same confusion the green-and-coral pair had. --hot opens that to 54. */ --swipe-star: var(--hot); --swipe-star-ink: #ffffff; --display: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, sans-serif; --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 6px; /* Legacy aliases — the non-Feed screens still reference these. */ --bg: var(--page); --ink: var(--text); --ink-soft: var(--text-dim); --ink-faint: var(--text-dimmer); --rule: var(--border); --accent: var(--thread-mark); --accent-bg: var(--surface-selected); --hot: #b3462a; /* Amber as TEXT. --hot is a mark and a fill: at 4.23:1 it is below AA for words even on --surface, and "open access" is a word. Measured ~7:1. */ --hot-ink: #8a5209; --warm: #8a6a12; --cool: #6b7280; --danger: #a12a2a; } /* --------------------------------------------------------------------------- Dark palette. The hex values live here once, as --d-* on :root, where they are inert — they define the palette but nothing consumes them. Two blocks below map them onto the real tokens, because the dark theme has to apply in two distinct situations that CSS cannot express in one rule: the reader's OS is dark and they have not overridden it, or they explicitly chose dark. A media query cannot be part of a selector list, so the mapping is stated twice. Only the mapping repeats. Change a colour in one place, above, and both paths follow. (Duplicating the values instead is exactly how db/schema.sql drifted away from its migrations.) --------------------------------------------------------------------------- */ :root { --d-page: #0a0f1a; --d-surface: #101a2c; --d-surface-sunken: #0c1422; --d-surface-selected: #16223a; --d-surface-hover: #141e31; --d-border: #202d46; --d-border-strong: #2c3c5a; --d-border-soft: #1a2437; --d-text-strong: #f4f8ff; --d-text: #dfe7f4; --d-text-dim: #98a5bd; --d-text-dimmer: #8b9ab4; --d-thread-mark: #d6f84a; --d-thread-mark-ink: #1a2200; --d-thread-chip-line: #4a5c17; --d-thread-chip-fill: transparent; --d-thread-chip-ink: #d6f84a; --d-thread-chip-fill-hi: #d6f84a; --d-thread-chip-ink-hi: #1a2200; --d-adjacent: #a98cff; --d-adjacent-dim: #a08ce0; --d-adjacent-line: #3b2c63; --d-adjacent-line-sel: #453372; --d-adjacent-wash: #181430; --d-adjacent-tint: #1b1830; --d-swipe-skip: #8a9098; --d-swipe-skip-ink: #0a0f1a; --d-swipe-star-ink: #2a1000; --d-hot: #e2764a; --d-hot-ink: #e0a537; --d-warm: #c9a44f; --d-cool: #8a9098; --d-danger: #d96a6a; /* Journal tints, per tone. Four sets, not four rewrites of one set. */ /* Journal tints, light. Swapped wholesale in the dark blocks below. */ /* A default, so a tile that somehow arrives without a tone class still follows the theme. The fallbacks inside the gradient below are literal light values, and would otherwise paint a pale card on a dark page. */ --js: var(--t0-s); --jl: var(--t0-l); --jt: var(--t0-t); --t0-s: 58%; --t0-l: 44%; --t0-t: 96%; --t1-s: 26%; --t1-l: 40%; --t1-t: 96.5%; --t2-s: 72%; --t2-l: 58%; --t2-t: 95%; --t3-s: 42%; --t3-l: 26%; --t3-t: 97%; --d-t0-s: 55%; --d-t0-l: 62%; --d-t0-t: 13%; --d-t1-s: 24%; --d-t1-l: 55%; --d-t1-t: 12%; --d-t2-s: 74%; --d-t2-l: 70%; --d-t2-t: 15%; --d-t3-s: 40%; --d-t3-l: 44%; --d-t3-t: 11%; } /* Following the machine — and :not([data-theme="light"]) is what makes an explicit light choice stick on a dark OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: var(--d-page); --surface: var(--d-surface); --surface-sunken: var(--d-surface-sunken); --surface-selected: var(--d-surface-selected); --surface-hover: var(--d-surface-hover); --border: var(--d-border); --border-strong: var(--d-border-strong); --border-soft: var(--d-border-soft); --text-strong: var(--d-text-strong); --text: var(--d-text); --text-dim: var(--d-text-dim); --text-dimmer: var(--d-text-dimmer); --thread-mark: var(--d-thread-mark); --t0-s: var(--d-t0-s); --t0-l: var(--d-t0-l); --t0-t: var(--d-t0-t); --t1-s: var(--d-t1-s); --t1-l: var(--d-t1-l); --t1-t: var(--d-t1-t); --t2-s: var(--d-t2-s); --t2-l: var(--d-t2-l); --t2-t: var(--d-t2-t); --t3-s: var(--d-t3-s); --t3-l: var(--d-t3-l); --t3-t: var(--d-t3-t); --thread-mark-ink: var(--d-thread-mark-ink); --thread-chip-line: var(--d-thread-chip-line); --thread-chip-fill: var(--d-thread-chip-fill); --thread-chip-ink: var(--d-thread-chip-ink); --thread-chip-fill-hi: var(--d-thread-chip-fill-hi); --thread-chip-ink-hi: var(--d-thread-chip-ink-hi); --adjacent: var(--d-adjacent); --adjacent-dim: var(--d-adjacent-dim); --adjacent-line: var(--d-adjacent-line); --adjacent-line-sel: var(--d-adjacent-line-sel); --adjacent-wash: var(--d-adjacent-wash); --adjacent-tint: var(--d-adjacent-tint); --swipe-skip: var(--d-swipe-skip); --swipe-skip-ink: var(--d-swipe-skip-ink); --swipe-star-ink: var(--d-swipe-star-ink); --hot: var(--d-hot); --hot-ink: var(--d-hot-ink); --warm: var(--d-warm); --cool: var(--d-cool); --danger: var(--d-danger); } } /* Chosen deliberately, whatever the machine says. */ :root[data-theme="dark"] { --page: var(--d-page); --surface: var(--d-surface); --surface-sunken: var(--d-surface-sunken); --surface-selected: var(--d-surface-selected); --surface-hover: var(--d-surface-hover); --border: var(--d-border); --border-strong: var(--d-border-strong); --border-soft: var(--d-border-soft); --text-strong: var(--d-text-strong); --text: var(--d-text); --text-dim: var(--d-text-dim); --text-dimmer: var(--d-text-dimmer); --thread-mark: var(--d-thread-mark); --t0-s: var(--d-t0-s); --t0-l: var(--d-t0-l); --t0-t: var(--d-t0-t); --t1-s: var(--d-t1-s); --t1-l: var(--d-t1-l); --t1-t: var(--d-t1-t); --t2-s: var(--d-t2-s); --t2-l: var(--d-t2-l); --t2-t: var(--d-t2-t); --t3-s: var(--d-t3-s); --t3-l: var(--d-t3-l); --t3-t: var(--d-t3-t); --thread-mark-ink: var(--d-thread-mark-ink); --thread-chip-line: var(--d-thread-chip-line); --thread-chip-fill: var(--d-thread-chip-fill); --thread-chip-ink: var(--d-thread-chip-ink); --thread-chip-fill-hi: var(--d-thread-chip-fill-hi); --thread-chip-ink-hi: var(--d-thread-chip-ink-hi); --adjacent: var(--d-adjacent); --adjacent-dim: var(--d-adjacent-dim); --adjacent-line: var(--d-adjacent-line); --adjacent-line-sel: var(--d-adjacent-line-sel); --adjacent-wash: var(--d-adjacent-wash); --adjacent-tint: var(--d-adjacent-tint); --swipe-skip: var(--d-swipe-skip); --swipe-skip-ink: var(--d-swipe-skip-ink); --swipe-star-ink: var(--d-swipe-star-ink); --hot: var(--d-hot); --hot-ink: var(--d-hot-ink); --warm: var(--d-warm); --cool: var(--d-cool); --danger: var(--d-danger); } * { box-sizing: border-box; } /* The hidden attribute, made to actually hide. [hidden] { display: none } lives in the browser's own stylesheet, so ANY author display declaration outranks it — and elements worth hiding are usually flex or grid containers, which is to say exactly the ones that declare display. That bit three times in one evening: a menu that was never closed, an action row that never went away, and the audio player beneath it. Stated once, with !important, because the whole point is to beat a declaration somewhere further down. */ [hidden] { display: none !important; } body { margin: 0; background: var(--page); color: var(--text); /* Sans throughout — the serif body face is dropped in the redesign. */ font: 400 15px/1.55 var(--ui); -webkit-font-smoothing: antialiased; } h1, h2, h3, .brand { font-family: var(--display); letter-spacing: -.02em; } main { max-width: var(--shell); margin: 0 auto; padding: 1.5rem 1.25rem 5rem; } a { color: var(--accent); } h1 { font-size: 1.6rem; margin: .4rem 0 .3rem; letter-spacing: -.01em; } h2 { font-size: 1.15rem; } .lede { color: var(--ink-soft); max-width: 48rem; margin: 0 0 1.5rem; } .muted { color: var(--ink-faint); } .small { font-size: .85rem; } .err { color: var(--danger); font-size: .85rem; } /* --- top bar --------------------------------------------------------------- */ .topbar { display: flex; align-items: baseline; gap: 1.5rem; /* Full-bleed background and rule, but the contents line up with the shell below. max() keeps the normal 1.25rem gutter on narrow screens, where the centring term goes negative. */ padding: .9rem max(1.25rem, calc((100% - var(--shell)) / 2 + 1.25rem)); border-bottom: 1px solid var(--rule); background: var(--surface); position: sticky; top: 0; z-index: 10; } .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; text-decoration: none; color: var(--ink); } .brand span { color: var(--accent); } .topbar nav { display: flex; gap: 1.1rem; } .topbar nav a { text-decoration: none; color: var(--ink-soft); font-size: .92rem; font-family: ui-sans-serif, system-ui, sans-serif; } .topbar nav a.on { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); } /* --- filters --------------------------------------------------------------- */ .filters { margin-bottom: 1.4rem; font-family: ui-sans-serif, system-ui, sans-serif; } .filterset { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; } .spacer { flex: 1 1 auto; } .chip { display: inline-block; padding: .25rem .7rem; border: 1px solid var(--rule); border-radius: 100px; font-size: .85rem; text-decoration: none; color: var(--ink-soft); background: var(--surface); } .chip.small { font-size: .78rem; padding: .18rem .6rem; } .chip.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; } .relfilter { font-size: .8rem; color: var(--ink-faint); } .relfilter a { text-decoration: none; padding: 0 .3rem; color: var(--ink-soft); } .relfilter a.on { color: var(--accent); font-weight: 700; } .count { font-size: .85rem; color: var(--ink-faint); margin: 0 0 .8rem; font-family: ui-sans-serif, system-ui, sans-serif; } /* --- article cards --------------------------------------------------------- */ .card { display: flex; gap: 1rem; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--cool); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .9rem; } .card.hot { border-left-color: var(--hot); } .card.warm { border-left-color: var(--warm); } .score { flex: 0 0 3.2rem; text-align: center; font-family: ui-sans-serif, system-ui, sans-serif; } .score .num { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; } .card.hot .num { color: var(--hot); } .card.warm .num { color: var(--warm); } .card.cool .num { color: var(--cool); } .verdict { display: inline-block; margin-top: .3rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; padding: .1rem .35rem; border-radius: 3px; border: 1px solid var(--rule); color: var(--ink-faint); } .v-read { color: var(--hot); border-color: var(--hot); } .v-skim { color: var(--warm); border-color: var(--warm); } /* Shown only in a thread view, when the verdict was earned on a different thread than the one being displayed. */ .overall { display: block; margin-top: .25rem; font-size: .65rem; color: var(--ink-faint); letter-spacing: .02em; } .body { flex: 1 1 auto; min-width: 0; } .card h2 { margin: 0 0 .25rem; font-size: 1.08rem; line-height: 1.35; font-weight: 600; } .card h2 a { color: var(--ink); text-decoration: none; } .card h2 a:hover { color: var(--accent); text-decoration: underline; } .meta { margin: 0 0 .6rem; font-size: .82rem; color: var(--ink-faint); font-family: ui-sans-serif, system-ui, sans-serif; } .meta .journal { color: var(--ink-soft); font-weight: 600; } .meta .oa { color: var(--warm); } .authors { font-style: italic; } .blurb { margin: 0 0 .7rem; color: var(--ink); } .threads { list-style: none; margin: 0 0 .7rem; padding: 0; font-family: ui-sans-serif, system-ui, sans-serif; } .threads li { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; padding: .18rem 0; border-top: 1px solid var(--rule); } .tname { font-weight: 600; color: var(--ink-soft); flex: 0 0 auto; } .trel { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; flex: 0 0 2rem; } .twhy { color: var(--ink-faint); } .actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .actions form { margin: 0; } button, .pdf, .doi { font: inherit; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .8rem; padding: .25rem .7rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink-soft); cursor: pointer; text-decoration: none; } button:hover, .pdf:hover, .doi:hover { border-color: var(--accent); color: var(--accent); } /* The rule above assumes a button drawn ON the page background, where turning the text accent-coloured reads as a highlight. A button FILLED with the accent is the opposite case: its ink becomes its own background and the label vanishes. `button:hover` (0,1,1) also outranks a plain class (0,1,0), so the filled buttons cannot simply state their colour once and be left alone — they have to restate it here. This is what made the dial's icon "disappear", and it took six attempts to find because of where it hides. A mouse un-hovers when it leaves, so on a desktop the icon flickers accent-on-accent for as long as the pointer rests there and looks fine either side of that. A touch has no such exit: iOS applies :hover on tap and leaves it applied until you touch something else. So the phone showed a permanently blank button and the desktop showed nothing at all wrong, and every fix went to the icon, which was never hurt. Any new button filled with an accent belongs in this list. */ .paneFabBtn:hover, .paneFabBtn:active, .paneFabBtn:focus, .nowplayBtn:hover, .nowplayBtn:active, .nowplayBtn:focus, .btn-primary:hover, .btn-primary:active, .btn-primary:focus { color: var(--thread-mark-ink); border-color: transparent; } button.danger { color: var(--danger); border-color: transparent; } button.danger:hover { border-color: var(--danger); } /* --- empty state ----------------------------------------------------------- */ .empty { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-soft); } .empty p { margin: .3rem 0; } .notice { background: var(--accent-bg); border: 1px solid var(--accent); color: var(--accent); padding: .6rem .9rem; border-radius: var(--radius); font-size: .9rem; } /* --- journals: the shelf --------------------------------------------------- */ .shelfbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 1.5rem 0 .5rem; font-family: ui-sans-serif, system-ui, sans-serif; } .sortlabel { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-right: .2rem; } .metricnote { font-size: .74rem; color: var(--ink-faint); border-bottom: 1px dotted var(--ink-faint); cursor: help; } .shelf { margin: 1.6rem 0 2.2rem; } .shelflabel { margin: 0 0 .7rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; display: flex; align-items: center; gap: .5rem; } .shelflabel::after { /* the shelf board the tiles stand on */ content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); } .shelflabel span { order: -1; background: var(--rule); color: var(--ink-soft); border-radius: 100px; padding: .05rem .45rem; font-size: .7rem; letter-spacing: 0; } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .85rem; } /* A periodical standing on the shelf: portrait, spine down the left edge. Roughly 3:4, near enough to a trimmed journal cover to read as one. */ .tile { display: flex; flex-direction: column; min-height: 16.5rem; background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--cool); border-radius: 3px var(--radius) var(--radius) 3px; padding: .85rem .9rem .7rem; position: relative; } /* Identity, not signal: the spine and tint come from a hue hashed off the ISSN, so each journal is recognizable at a glance and keeps its color permanently. The citedness band still colors the metric below — the two carry different information and should not share a channel. */ /* Four tone tiers, so two journals sharing a hue still read as different. --js / --jl are the spine's saturation and lightness; --jt is the tint. */ /* Each tone points at tokens rather than carrying its own numbers. A literal here is set ON the tile, which outranks anything :root says, so the dark palette could never reach these and every tile stayed at light-mode lightness in both themes — a pale card under text that had correctly turned pale with it. */ .tile.tone-0 { --js: var(--t0-s); --jl: var(--t0-l); --jt: var(--t0-t); } .tile.tone-1 { --js: var(--t1-s); --jl: var(--t1-l); --jt: var(--t1-t); } .tile.tone-2 { --js: var(--t2-s); --jl: var(--t2-l); --jt: var(--t2-t); } .tile.tone-3 { --js: var(--t3-s); --jl: var(--t3-l); --jt: var(--t3-t); } .tile { border-left-color: hsl(var(--jhue, 220) var(--js, 50%) var(--jl, 44%)); background: linear-gradient(hsl(var(--jhue, 220) 45% var(--jt, 96%)), hsl(var(--jhue, 220) 45% var(--jt, 96%))), var(--surface); } .tile::before { /* a slim head-band, the way a cover carries a masthead rule */ content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: hsl(var(--jhue, 220) 42% 46%); opacity: .35; } .tile.paused { opacity: .5; } .tile.paused:hover { opacity: 1; } .tilehead { flex: 1 1 auto; } .tile h3 { margin: 0 0 .3rem; font-size: .93rem; line-height: 1.28; font-weight: 600; letter-spacing: -.01em; hyphens: auto; } .tile .pub { margin: 0; font-size: .74rem; color: var(--ink-faint); font-family: ui-sans-serif, system-ui, sans-serif; } .tile .desc { margin: .5rem 0 .2rem; font-size: .78rem; line-height: 1.42; color: var(--ink-soft); } .tile .desc.none { color: var(--ink-faint); font-style: italic; } .tile .desc.none code { font-style: normal; font-size: .72rem; } .editlink { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); text-decoration: none; font-family: ui-sans-serif, system-ui, sans-serif; opacity: 0; transition: opacity .12s; } .tile:hover .editlink, .editlink:focus { opacity: 1; color: var(--accent); } .descedit { margin: .5rem 0 .2rem; } .descedit textarea { font-size: .78rem; line-height: 1.4; padding: .35rem .45rem; } .descops { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; } .descops a { font-size: .7rem; color: var(--ink-faint); font-family: ui-sans-serif, system-ui, sans-serif; } .tilemetrics { display: flex; gap: .7rem; align-items: baseline; margin: .7rem 0 .55rem; padding-top: .55rem; border-top: 1px solid var(--rule); font-family: ui-sans-serif, system-ui, sans-serif; } .metric { display: flex; flex-direction: column; cursor: help; } .metric .mval { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); line-height: 1.1; } .metric.primary .mval { font-size: 1.35rem; } .tile.band-high .metric.primary .mval { color: var(--hot); } .tile.band-mid .metric.primary .mval { color: var(--warm); } .metric .mlabel { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); } .tilefoot { font-family: ui-sans-serif, system-ui, sans-serif; } .tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; min-height: 1rem; } .tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; padding: .08rem .35rem; border-radius: 3px; border: 1px solid var(--rule); color: var(--ink-faint); } .tag.oa { color: var(--warm); border-color: var(--warm); } .tag.off { color: var(--ink-faint); } .tag.bad { color: var(--danger); border-color: var(--danger); cursor: help; } .tile .issn { margin: 0 0 .5rem; font-size: .68rem; color: var(--ink-faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; } .tileops { display: flex; gap: .35rem; } .tileops form { margin: 0; flex: 0 0 auto; } .tileops button { font-size: .72rem; padding: .18rem .5rem; } .searchbar { display: flex; gap: .5rem; margin-bottom: 1rem; } .searchbar input[type=text] { flex: 1 1 auto; } input[type=text], input[type=password], textarea { font: inherit; font-size: .92rem; padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); width: 100%; } input.tiny { width: 9rem; font-size: .8rem; padding: .25rem .4rem; } textarea { font-family: inherit; line-height: 1.5; resize: vertical; } textarea.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; } .results { list-style: none; padding: 0; margin: 0 0 1.5rem; } .results li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .2rem; border-bottom: 1px solid var(--rule); } .results form { display: flex; gap: .4rem; align-items: center; } .results .muted { display: block; font-size: .8rem; } /* --- threads --------------------------------------------------------------- */ .thread { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1.2rem; } .threadhead { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; } .tname-input { font-size: 1.05rem; font-weight: 600; flex: 1 1 auto; } .threadhead code { font-size: .78rem; color: var(--ink-faint); } .toggle { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; font-family: ui-sans-serif, system-ui, sans-serif; } .fieldlabel { display: block; margin: .9rem 0 .3rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft); font-family: ui-sans-serif, system-ui, sans-serif; } .fieldlabel .muted { font-weight: 400; } .thread button { margin-top: .9rem; } /* --- runs ------------------------------------------------------------------ */ .runs { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem; } .runs th { text-align: left; padding: .4rem; border-bottom: 2px solid var(--rule); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); } .runs td { padding: .45rem .4rem; border-bottom: 1px solid var(--rule); white-space: nowrap; } .runs td.notes { white-space: normal; color: var(--ink-faint); font-size: .8rem; } .runs tr.unfinished { background: color-mix(in srgb, var(--danger) 7%, transparent); } /* --- adjacency ------------------------------------------------------------- */ .chip.adj.on { background: var(--warm); border-color: var(--warm); color: var(--surface); } .chip .badge { display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: 100px; background: var(--warm); color: var(--surface); font-size: .7rem; font-weight: 700; } .chip.adj.on .badge { background: var(--surface); color: var(--warm); } .adjacency { margin: 0 0 .6rem; padding: .4rem .6rem; border-left: 2px solid var(--warm); background: color-mix(in srgb, var(--warm) 7%, transparent); font-size: .82rem; color: var(--ink-soft); font-family: ui-sans-serif, system-ui, sans-serif; } .alabel { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--warm); font-weight: 700; margin-right: .4rem; } .suggests { display: inline-block; margin-left: .3rem; font-weight: 600; text-decoration: none; } .suggests:hover { text-decoration: underline; } /* --- emergent threads ------------------------------------------------------ */ .emergent { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--warm); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .8rem; } .ehead { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } .emergent h2 { margin: 0; font-size: 1.02rem; font-weight: 600; } .emeta { font-size: .76rem; color: var(--ink-faint); font-family: ui-sans-serif, system-ui, sans-serif; } .promote { margin-left: auto; font-size: .76rem; text-decoration: none; font-family: ui-sans-serif, system-ui, sans-serif; white-space: nowrap; border: 1px solid var(--accent); border-radius: 4px; padding: .15rem .55rem; } .promote:hover { background: var(--accent-bg); } .ework { list-style: none; margin: .6rem 0 0; padding: 0; } .ework li { display: flex; gap: .5rem; align-items: baseline; padding: .25rem 0; border-top: 1px solid var(--rule); font-size: .82rem; font-family: ui-sans-serif, system-ui, sans-serif; } .escore { flex: 0 0 1.8rem; font-weight: 700; color: var(--warm); font-variant-numeric: tabular-nums; } .etitle { color: var(--ink-soft); } .ewhy { color: var(--ink-faint); } .emore { color: var(--ink-faint); font-style: italic; } /* --- thread spinner -------------------------------------------------------- */ .threadhead-actions { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .newthread { margin-left: auto; font-size: .82rem; text-decoration: none; font-family: ui-sans-serif, system-ui, sans-serif; border: 1px solid var(--accent); border-radius: 4px; padding: .25rem .7rem; } .newthread:hover { background: var(--accent-bg); } .spinform { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem; max-width: 46rem; } .spinform button { margin-top: 1rem; padding: .4rem 1rem; } .jhead { margin: 1.6rem 0 .3rem; font-size: 1rem; } .candidates { list-style: none; padding: 0; margin: .7rem 0 0; } .cand { padding: .55rem .1rem; border-top: 1px solid var(--rule); font-family: ui-sans-serif, system-ui, sans-serif; } .cand label { display: flex; align-items: center; gap: .45rem; cursor: pointer; } .cname { font-weight: 600; font-size: .92rem; } .ctag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .3rem; border-radius: 3px; border: 1px solid var(--rule); color: var(--ink-faint); } .ctag.renamed { color: var(--warm); border-color: var(--warm); cursor: help; } .cwhy { margin: .2rem 0 .15rem 1.55rem; font-size: .8rem; color: var(--ink-soft); } .cmeta { margin: 0 0 0 1.55rem; font-size: .74rem; color: var(--ink-faint); } .cstatus { color: var(--danger); } .cand.s-ok .cstatus { color: var(--ink-faint); } .cand.s-dormant, .cand.s-notfound { opacity: .6; } /* --- citations ------------------------------------------------------------- */ .card.cite .score .num { color: var(--accent); font-size: 1.35rem; } .card.cite .mlabel { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); } /* A citation from outside every thread is the signal worth noticing, not the noise — someone found your work useful for something you are not tracking. */ .card.offthread { border-left-color: var(--accent); } .citeswhat { margin: 0 0 .6rem; font-size: .76rem; color: var(--ink-faint); font-family: ui-sans-serif, system-ui, sans-serif; padding-left: .6rem; border-left: 2px solid var(--rule); } .citescores { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .5rem; font-size: .78rem; color: var(--ink-faint); font-family: ui-sans-serif, system-ui, sans-serif; } .cs strong { color: var(--ink-soft); font-variant-numeric: tabular-nums; } .offtag { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; padding: .08rem .4rem; border-radius: 3px; border: 1px solid var(--accent); color: var(--accent); cursor: help; } .workrail { list-style: none; padding: 0; margin: .4rem 0 1.6rem; } .workrail li { border-bottom: 1px solid var(--rule); } .workrail a { display: flex; gap: .6rem; align-items: baseline; padding: .3rem .2rem; text-decoration: none; color: var(--ink-soft); font-size: .82rem; font-family: ui-sans-serif, system-ui, sans-serif; } .workrail a:hover { background: var(--accent-bg); } .workrail a.on { color: var(--accent); font-weight: 600; } .wcount { flex: 0 0 2rem; text-align: right; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .wtitle { flex: 1 1 auto; } .wyear { color: var(--ink-faint); font-size: .74rem; } /* --- login ----------------------------------------------------------------- */ .login-body { display: grid; place-items: center; min-height: 100vh; } .login { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2rem; width: min(22rem, 90vw); text-align: center; } .login h1 { margin-top: 0; font-size: 1.2rem; letter-spacing: -.01em; } .login input { margin-bottom: .7rem; text-align: center; } .login button { width: 100%; padding: .5rem; } .login .error { color: var(--danger); font-size: .88rem; } /* Wide content should scroll inside itself, never the page. */ table { display: block; overflow-x: auto; } @media (max-width: 34rem) { .card { flex-direction: column; gap: .5rem; } .score { display: flex; align-items: baseline; gap: .5rem; text-align: left; } .ops { justify-content: flex-start; } /* The brand plus four nav links do not fit on a narrow phone, and an unwrapped flex row pushes the whole document sideways. Let it wrap. */ .topbar { flex-wrap: wrap; gap: .4rem 1rem; padding: .7rem .9rem; } .topbar nav { flex-wrap: wrap; gap: .85rem; } main { padding: 1rem .9rem 4rem; } .searchbar { flex-wrap: wrap; } .results li { flex-direction: column; align-items: flex-start; gap: .5rem; } } /* =========================================================================== FEED — split rail redesign =========================================================================== A two-pane split: a scannable rail of complete triage rows on the left, one article at full depth on the right. The screen does triage, not reading, so the rail carries exactly enough to decide open-or-not: both numbers, the verdict, the matched thread, one clause of prose, the suggested direction, and abbreviated meta. Selection lives entirely in the querystring, so this works with JavaScript disabled and deep links and browser history behave correctly. =========================================================================== */ .feed-shell { display: grid; grid-template-columns: 440px 1fr; height: calc(100vh - 6.5rem); /* below the sticky site header */ background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } /* The feed manages its own scrolling, so the page itself must not. Capped and centred rather than full-bleed: the pane's prose is held at a 46rem measure, so on a wide display the shell stretched to 1860px while the text filled 736px of it and left 673px of dead space hard against the right edge. Centring the text alone would only move the imbalance — it would tear a gap between the rail and the passage it belongs to. The whole two-column unit travels together instead. */ body.feed-page { --shell: 80rem; } body.feed-page main { max-width: var(--shell); margin-inline: auto; padding: 1rem 1.25rem 1.25rem; } /* --- rail ------------------------------------------------------------------ */ .rail { display: flex; flex-direction: column; min-height: 0; /* load-bearing: without it the rail overflows its grid track and clips */ border-right: 1px solid var(--border); } .railbar { flex: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-family: var(--ui); } .railbar select { font: 500 12px/1 var(--ui); padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); } .railbar .statefilter { display: flex; gap: 7px; } .railbar .statefilter a { font: 500 12px/1 var(--ui); color: var(--text-dim); text-decoration: none; } .railbar .statefilter a.on { color: var(--text-strong); font-weight: 700; } .railbar .floor { font: 500 12px/1 var(--ui); color: var(--text-dim); } .railbar .floor b { color: var(--thread-mark); font-weight: 700; } .railbar .railcount { font: 400 12px/1 var(--ui); color: var(--text-dimmer); } .railbar .railcount a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; } .railbar .railcount a:hover { color: var(--text); } /* "12 new since Friday" — a count and a filter in one control. Weighted above the other railbar text because it is the one thing here that is only true right now; the rest of the bar says the same thing on every visit. */ .railbar .railnewline { flex: 0 0 100%; display: flex; } .railbar .newsince { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--ui); color: var(--thread-mark); text-decoration: none; border: 1px solid var(--thread-chip-line); border-radius: 999px; padding: 4px 9px; white-space: nowrap; } .railbar .newsince:hover { background: var(--surface-hover); } .railbar .newsince.on { background: var(--thread-chip-fill); color: var(--thread-chip-ink); border-color: transparent; } .railscroll { overflow-y: auto; min-height: 0; } .railrow { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 14px 16px 15px; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit; } /* No transition — a delay makes fast scanning feel laggy. */ .railrow:hover { background: var(--surface-hover); } .railrow:focus-visible { outline: 2px solid var(--thread-mark); outline-offset: -2px; } .railrow.on { background: var(--surface-selected); /* An inset shadow, not a border. A border occupies layout, so it had to be paid for with padding-left: 13px — which only added up to the unselected 16px on desktop. The mobile override drops base padding to 14px, so a selected row sat 2px right of its neighbours and the list appeared to twitch sideways as the selection moved. A shadow takes no space, so the compensation is not needed at any width and cannot fall out of step with it again. */ box-shadow: inset 3px 0 0 var(--thread-mark); } .railrow.done { opacity: .55; } .railgutter { text-align: right; min-width: 0; } .railnum { display: block; font: 800 22px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--thread-mark); } .railrow.on .railnum { color: var(--text-strong); } .railverdict { display: block; margin-top: 5px; font: 700 11px/1 var(--ui); letter-spacing: .09em; color: var(--text-dim); text-transform: uppercase; } /* Adjacency is a bracket, not a numeral — a different shape from thread relevance so the two axes never blur together. */ .adjbracket { display: inline-block; margin-top: 9px; font: 700 11.5px/1 var(--ui); color: var(--adjacent); border: 1px solid var(--adjacent-line); border-radius: 3px; padding: 3px 4px; font-variant-numeric: tabular-nums; } .railrow.on .adjbracket { border-color: var(--adjacent-line-sel); } .threadchip { display: inline-block; margin-bottom: 7px; font: 700 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; border-radius: 2px; padding: 3px 5px; color: var(--thread-chip-ink); background: var(--thread-chip-fill); border: 1px solid var(--thread-chip-line); } /* Access, beside the thread chip and deliberately quieter than it. What the article is about is the reason to read it; whether it opens without a login is logistics, and logistics should not outshout the subject. Outlined rather than filled, so it cannot be mistaken for a thread chip at a glance, and so the two states differ in weight as well as hue — the closed one recedes, which is the honest rendering of "this will cost you a step". */ .accesschip { display: inline-block; margin: 0 0 7px 5px; font: 700 10px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; padding: 3px 5px; background: none; border: 1px solid currentColor; } .accesschip.is-open { color: var(--warm); } .accesschip.is-closed { color: var(--text-dimmer); } .railrow.on .threadchip, .pane .threadchip { background: var(--thread-chip-fill-hi); color: var(--thread-chip-ink-hi); border-color: transparent; padding: 4px 6px; } /* Arrival marker. A dot rather than a "NEW" pill: the row already carries a score, a verdict, an adjacency bracket and a thread chip, and a fifth badge competing for the same glance would cost more than it tells. The dot is noticed while scanning and ignored while reading, which is the whole job. The railbar count says what it means, so the dot never has to. */ .railflags { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .railflags .threadchip { margin-bottom: 0; } .newdot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--thread-mark); } /* In the pane there is room to say it in words. */ .newflag { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font: 700 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--thread-mark); } /* The row's parts are s so the whole row can be one anchor (a block-level child of an is legal, but keeping it spans avoids invalid nesting when the title carries a link). They must be told to stack. */ .railbody { display: block; min-width: 0; } .railtitle { display: block; margin: 0; font: 700 16.5px/1.3 var(--display); letter-spacing: -.02em; color: var(--text); text-wrap: pretty; } .railrow.on .railtitle { color: var(--text-strong); } .railhook { display: block; margin: 6px 0 0; font: 400 13.5px/1.5 var(--ui); color: var(--text-dim); } .raildirection { display: block; margin-top: 8px; font: 600 11.5px/1.35 var(--ui); color: var(--adjacent-dim); } .railmeta { display: block; margin: 8px 0 0; font: 400 12.5px/1.4 var(--ui); /* --text-dim, not --text-dimmer: this is the journal name and date, which is read, not decoration. dimmer is for chrome that only needs to be noticed. */ color: var(--text-dim); } .railfoot { padding: 12px 16px; font: 400 11.5px/1 var(--ui); color: var(--text-dimmer); } .railempty { padding: 24px 16px; font: 400 13px/1.6 var(--ui); color: var(--text-dim); } .railempty a { color: var(--thread-mark); } /* --- detail pane ------------------------------------------------------------ */ .pane { padding: 26px 30px; min-height: 0; overflow-y: auto; } .panehead { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; } .panescore { flex: none; text-align: center; } .panenum { display: block; font: 800 42px/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--text-strong); } .panescore .railverdict { margin-top: 6px; letter-spacing: .12em; } .panescore .adjbracket { margin-top: 12px; font-size: 13px; } .panetitle { margin: 0; font: 800 26px/1.14 var(--display); letter-spacing: -.035em; color: var(--text-strong); text-wrap: pretty; } .panesource { margin: 8px 0 0; font: 400 13.5px/1.45 var(--ui); color: var(--text-dim); } /* The publication is a name; the date beside it is not. Weight separates them without a second colour or a second size. */ .panevenue { font-weight: 600; color: var(--text); } /* Room between the credits and the writing. Four pixels read as a wrapped line of the same block rather than the end of one. */ .paneauthors { margin: 4px 0 18px; font: 400 13.5px/1.45 var(--ui); color: var(--text-dimmer); } .panelede { font: 500 17.5px/1.6 var(--ui); letter-spacing: -.006em; color: var(--text-strong); margin: 0 0 14px; } /* The longest passage on the screen, and it was the faintest thing in the pane: 14px at 5.6:1, while the adjacency note beside it ran 13.5px at 16.9:1. A sidebar was louder than the body it annotates. Full --text, 16px. */ .panebody { font: 400 16px/1.68 var(--ui); color: var(--text); margin: 0 0 16px; text-wrap: pretty; } .panemethod { font: 400 13.5px/1.55 var(--ui); color: var(--text-dim); padding: 11px 0; margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .paneadj { margin-top: 14px; padding: 13px 15px; background: var(--adjacent-wash); border-left: 2px solid var(--adjacent); border-radius: 0 4px 4px 0; } .paneadj .alabel { display: block; margin: 0 0 6px; font: 800 11px/1 var(--ui); letter-spacing: .12em; color: var(--adjacent); text-transform: uppercase; } .paneadj .anote { margin: 0; font: 400 15px/1.62 var(--ui); color: var(--text); } .paneadj .adir { display: block; margin-top: 9px; font: 600 13.5px/1.35 var(--ui); color: var(--adjacent); } .panethread { display: grid; grid-template-columns: 180px 30px 1fr; gap: 12px; align-items: baseline; margin-top: 13px; } .panethread .tn { font: 700 11.5px/1.35 var(--ui); letter-spacing: .03em; text-transform: uppercase; color: var(--text); } .panethread .ts { font: 800 14px/1 var(--display); letter-spacing: -.03em; color: var(--thread-mark); font-variant-numeric: tabular-nums; } .panethread .tj { font: 400 14px/1.6 var(--ui); color: var(--text-dim); } .paneactions { display: flex; gap: 8px; margin-top: 22px; align-items: center; } .paneactions form { margin: 0; } .btn-primary, .btn-secondary, .btn-tertiary, .btn-link { font: 700 12px/1 var(--ui); border-radius: 5px; padding: 9px 13px; cursor: pointer; text-decoration: none; display: inline-block; border: 1px solid transparent; background: none; } .btn-primary { background: var(--thread-mark); color: var(--thread-mark-ink); } .btn-secondary { border-color: var(--border-strong); color: var(--text); font-weight: 500; } .btn-tertiary { border-color: var(--border); color: var(--text-dim); font-weight: 500; } .btn-link { color: var(--thread-mark); border-color: var(--thread-chip-line); } .paneactions .pushright { margin-left: auto; } .paneempty { padding: 40px 0; color: var(--text-dim); font: 400 14px/1.6 var(--ui); } /* --- responsive ------------------------------------------------------------- */ @media (max-width: 1180px) { .feed-shell { grid-template-columns: 380px 1fr; } .pane { padding: 22px 24px; } } /* --- back link (mobile detail only) ---------------------------------------- */ .backlink { display: none; font: 600 13px/1 var(--ui); color: var(--thread-mark); text-decoration: none; margin-bottom: 14px; } /* --- bottom navigation ------------------------------------------------------ */ /* Primary navigation below 900px, where the header nav is hidden. Hidden on desktop, where the header carries it. */ .bottomnav { display: none; } @media (max-width: 900px) { .bottomnav { display: flex; gap: 2px; justify-content: space-between; align-items: center; /* Lifted off the foot rather than pinned to it: 18px of air, plus whatever the home indicator claims, so the bar reads as floating above the page rather than welded to the bottom edge of the glass. */ position: sticky; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 20; margin: 10px 12px 0; padding: 5px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(20, 33, 58, .12); } .bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--text-dim); font: 500 10.5px/1 var(--ui); padding: 9px 7px 8px; border-radius: 99px; } .bottomnav a.on { background: var(--thread-mark); color: var(--thread-mark-ink); font-weight: 700; padding: 9px 13px 8px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bottomnav { background: #0e1729; border-color: #22304a; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); } } /* --- mobile: list or detail, never both ------------------------------------- */ @media (max-width: 900px) { body.feed-page main { padding: 0; } .feed-shell { display: block; /* one column; which pane shows is decided by the URL, not by client-side routing */ height: auto; border: 0; border-radius: 0; background: transparent; } .topbar nav { display: none; } /* the floating bar takes over */ .topbar { padding: 12px 14px; } .rail { border-right: 0; } .railscroll { overflow: visible; } .railbar { position: sticky; top: 0; z-index: 5; padding: 14px 16px; gap: 11px; } .railbar .statefilter { gap: 10px; } /* Reflow the row: signal line first, then title, hook, direction, footer. A phone shows one row at a time rather than a scannable column of them, so the density that helps on a 440px rail beside a reading pane only crowds here. Padding and the gaps between the parts open up; the type does not grow much, because the constraint on a phone is vertical room, not size. */ .railrow { grid-template-columns: 1fr; gap: 0; padding: 19px 16px 20px; } .railgutter { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 11px; } .railnum { font-size: 19px; } .railverdict { display: none; } /* moves to the footer line */ .adjbracket { margin-top: 0; margin-left: auto; } .railflags { margin-bottom: 10px; } .railtitle { font-size: 16.5px; line-height: 1.34; } .railhook { font-size: 13.5px; line-height: 1.52; margin-top: 9px; } .raildirection { font-size: 11.5px; line-height: 1.4; margin-top: 11px; } .railmeta { display: flex; gap: 7px; align-items: baseline; margin-top: 11px; } .railmeta .mverdict { font: 700 9px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dimmer); } /* Detail is its own screen: the rail is hidden when an article is selected. */ .feed-shell.show-detail .rail { display: none; } .feed-shell:not(.show-detail) .pane { display: none; } .pane { padding: 18px 16px 16px; overflow: visible; } .backlink { display: inline-block; } .panenum { font-size: 30px; letter-spacing: -.045em; } .panehead { gap: 12px; } .panescore { display: flex; align-items: center; gap: 10px; text-align: left; } .panescore .railverdict { margin-top: 0; } .panescore .adjbracket { margin-top: 0; } .panetitle { font-size: 22px; line-height: 1.18; letter-spacing: -.03em; } .panelede { font-size: 15.5px; } /* Thread rows restack: score + name on one baseline, justification below. */ .panethread { grid-template-columns: auto 1fr; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-soft); } .panethread .ts { order: 1; } .panethread .tn { order: 2; font-size: 11px; } .panethread .tj { order: 3; grid-column: 1 / -1; } /* Actions become a thumb-reachable bar; all targets ≥ 48px. */ .paneactions { position: sticky; bottom: 0; margin: 22px -16px 0; padding: 10px 12px 12px; /* 7 rather than 8: four gaps between five controls, so the point recovers 4px for the labels. */ gap: 7px; border-top: 1px solid var(--border); background: var(--surface-sunken); } .paneactions form { flex: 1; } /* The star is icon-only and must not take a text button's share: with five controls splitting the bar evenly they fell to 63px, which breaks "Mark read" mid-label. Pinned narrow, the three text buttons keep the width they had before the tier existed. */ .paneactions form.staraction { flex: none; width: 48px; } .paneactions form.staraction button { width: 48px; } /* min-height rather than padding arithmetic: padding alone left Dismiss and the DOI/PDF links at 46-47px, under the 48px touch minimum. */ .paneactions button, .paneactions .btn-link { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 0; font-size: 13px; border-radius: 6px; } .paneactions .btn-secondary, .paneactions .btn-tertiary { font-weight: 500; } /* DOI needs 44px for its icon and label and had 64. Handing 8 of those back is what takes Dismiss from 8px of slack to comfortable. */ .paneactions .btn-link { width: 56px; flex: none; } .paneactions .pushright { margin-left: 0; } } @media (max-width: 420px) { .railbar { gap: 7px; } .railbar .railcount { width: 100%; } } /* =========================================================================== Feed corrections — readability pass =========================================================================== */ /* 1. Cap the measure. Prose at 14-16px wants 65-75 characters a line; the pane was running the full width of the display, which is unreadable at 1500px. */ .panecontent { max-width: 46rem; } /* 2. The pane title is a link, but it should read as a heading. Inheriting the global link colour turned it lime and underlined it — the accent belongs to the thread axis alone, never to chrome. */ .panetitle a { color: inherit; text-decoration: none; text-decoration-color: var(--border-strong); } .panetitle a:hover { text-decoration: underline; text-underline-offset: 3px; } /* 3. Icons sit inside buttons on the text baseline. */ .btn-primary, .btn-secondary, .btn-tertiary, .btn-link { display: inline-flex; align-items: center; gap: 6px; } .bicon { flex: none; opacity: .85; } .btn-primary .bicon { opacity: 1; } /* 4. Label the adjacency number. A bare numeral under a bigger numeral reads as a second score on the same axis; it is a different axis entirely. */ .adjlabel { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; opacity: .8; margin-right: 3px; } .adjbracket { white-space: nowrap; } /* 5. The adjacency wash was #181430 violet on a #101a2c navy surface — two dark chromatic fields a few points apart, which reads as a smudge rather than a panel. Give it a surface that actually separates, and let the left rule and the label carry the violet. */ .paneadj { background: color-mix(in srgb, var(--adjacent) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--adjacent) 34%, transparent); border-left: 3px solid var(--adjacent); border-radius: 0 5px 5px 0; } .paneadj .anote { color: var(--text); } .paneadj .adir { text-decoration: none; } .paneadj .adir:hover { text-decoration: underline; text-underline-offset: 2px; } /* 6. Thread rows read as data, so give them a rule and room. */ .panethread { padding-top: 12px; border-top: 1px solid var(--border-soft); } /* 7. The rail's selected row used a lime left edge AND a lime numeral; the edge alone is enough, and the doubled accent fought the thread chip. */ .railrow.on .railnum { color: var(--text-strong); } /* 8. Give the pane's own scrollbar room so text does not sit against it. */ .pane { scrollbar-gutter: stable; } /* --- theme switcher --------------------------------------------------------- */ /* Pushed to the far end of the header; the nav keeps its natural position. */ /* One icon showing the theme in force; the three choices live in a disclosure under it. Three permanent buttons cost more header than a setting changed twice a year deserves, and on a phone that row also carries the wordmark. */ .thememenu { margin-left: auto; position: relative; } .thememenu summary { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-sunken); color: var(--text-dim); cursor: pointer; list-style: none; /* Firefox */ } .thememenu summary::-webkit-details-marker { display: none; } /* Safari */ .thememenu summary:hover { color: var(--text-strong); background: var(--surface-hover); } .thememenu[open] summary { color: var(--text-strong); background: var(--surface); } .thememenu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .thememenupop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 168px; padding: 5px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 22px rgb(0 0 0 / .16); } .thememenupop a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; font: 500 13px/1 var(--ui); color: var(--text); text-decoration: none; white-space: nowrap; } .thememenupop a:hover { background: var(--surface-hover); } .thememenupop a.on { background: var(--surface-selected); color: var(--text-strong); font-weight: 700; } .thememenupop a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Visually hidden, still read aloud: the control is icon-only, so each link needs a name that is not the tooltip. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* On a phone the header is tight; drop the switcher to a 44px touch target and let the nav wrap around it rather than squeezing everything onto one line. */ @media (max-width: 767px) { .themeswitch a { width: 44px; height: 44px; } } /* The pane leads with the exact date; the relative form trails it so the two readings of "when" sit together instead of competing. */ .paneage { color: var(--text-dimmer); } /* --------------------------------------------------------------------------- Runs summary. Three figures that were previously only derivable by adding up a table by eye — and for bulk runs, not derivable at all. --------------------------------------------------------------------------- */ .runsummary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; } .runsummary .stat { flex: 1 1 190px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); } .runsummary .statlabel { display: block; font: 700 10.5px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-dimmer); } .runsummary .statvalue { display: block; margin: 7px 0 5px; font: 700 24px/1 var(--display); letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; } .runsummary .statnote { display: block; font: 400 12px/1.4 var(--ui); color: var(--text-dim); } /* --------------------------------------------------------------------------- Swipe-to-triage. The wrapper exists because buttons cannot live inside an anchor, so the action layer has to be a sibling of the row rather than a child. Everything here is inert until assets/swipe.js adds a class — with no JavaScript the wrapper is a plain block and the row behaves exactly as before. --------------------------------------------------------------------------- */ .railitem { position: relative; overflow: hidden; transition: height .22s ease, opacity .22s ease; /* Who owns a horizontal drag that starts inside a vertical scroller. Without this the answer is Safari, and the swipe is unreliable in a way that reads as the row fighting back: iOS claims the gesture, fires pointercancel, the drag is abandoned partway, and the row springs home. Whether that happens depends on the angle of the first few pixels, which is why it fails intermittently rather than always. The listeners are all passive, so preventDefault is not available to argue the point — this declaration is the argument. pan-y keeps vertical scrolling native and gives horizontal movement to the script. pinch-zoom is spelled out because pan-y alone would withdraw it, and removing zoom from a page of small type is not a trade worth making for a gesture. */ touch-action: pan-y pinch-zoom; } .railitem .railrow { position: relative; z-index: 1; background: var(--surface); } .railitem.is-dragging .railrow { user-select: none; } /* Behind the row, revealed as it is pulled left. */ .railactions { position: absolute; inset-block: 0; right: 0; display: flex; align-items: stretch; z-index: 0; } .railaction { border: 0; /* Icons rather than words, so each action needs less room: 64px against the 76 the labels wanted. Three at 64 is a 192px strip, which leaves 198px of row visible at 390px — you can still read what you are acting on while the actions are open, which you could not at 228. The glyphs are the same three the pane uses for these actions, so nothing here has to be learned; the colour carries the rest. */ width: 64px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* 15px is sized to sit beside 12px label text. Alone in a 64px block it needs to be the thing you see. */ .railaction .bicon { width: 24px; height: 24px; } .railaction.is-star { background: var(--swipe-star); color: var(--swipe-star-ink); } .railaction.is-save { background: var(--swipe-save); color: var(--swipe-save-ink); } .railaction.is-skip { background: var(--swipe-skip); color: var(--swipe-skip-ink); } /* Committed: collapse rather than vanish, so the list does not jump under a thumb that is still on the screen. */ .railitem.is-going { opacity: .55; } .railitem.is-gone { opacity: 0; } /* A failed action has to look failed. Silently doing nothing is worse. */ .railitem.is-failed .railrow { box-shadow: inset 3px 0 0 var(--danger); } @media (prefers-reduced-motion: reduce) { .railitem, .railitem .railrow { transition: none !important; } } /* --------------------------------------------------------------------------- The action dial. One button at the lower right that raises the article's actions above it. With no permanent row at the foot of the article there is nothing for a floating control to collide with, nothing to lift clear of, and no width arithmetic keeping five labels on one line — three problems that each took a fix of their own before this replaced the shape that caused them. .panelisten holds the native