/* Archivo, self-hosted (SIL Open Font License). One variable file per style carries every weight and every width from condensed to extended; the width axis does the work that boxes and colours would otherwise do. Nothing on this page loads from a third party. */ @font-face { font-family: 'Archivo'; src: url('/ArchivoVariable.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('/ArchivoVariable-Italic.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; } /* ---- tokens ---- Concrete and asphalt, lit by one sodium-amber accent: Torn City at night. Light is the base; [data-theme=dark] on swaps every token before first paint (theme.js). Each forum owns a hue, used only where the forum is the subject: in the picker and along the left edge of its results. */ :root { color-scheme: light; --bg:#eaece9; --paper:#f8f9f7; --paper-2:#f0f1ee; --ink:#1a1c1e; --ink-2:#3b3e41; --muted:#5f6368; --faint:#8b9095; --line:#cdd1cd; --line-2:#a9aeaa; --accent:#b45a00; --accent-hover:#8a4500; --accent-ink:#ffffff; --accent-soft:rgba(180,90,0,.11); --hi:rgba(240,166,60,.38); --hi-ink:#1a1c1e; --ok:#3d8a55; --err:#b3261e; --err-soft:rgba(179,38,30,.08); --pop:0 12px 32px -12px rgba(26,28,30,.35), 0 1px 3px rgba(26,28,30,.12); --f-general:#4f6b93; --f-qa:#3d8a55; --f-suggest:#b0486b; --f-guides:#7a5aa8; --f-tools:#2c8a8a; --font:'Archivo', 'Helvetica Neue', Arial, sans-serif; --mono:ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --xs:.78125rem; --sm:.875rem; --md:1rem; --lg:1.1875rem; --xl:1.4375rem; --xxl:1.75rem; --hero:2.5rem; } :root[data-theme=dark] { color-scheme: dark; --bg:#131517; --paper:#1b1e21; --paper-2:#22262a; --ink:#e9e7e2; --ink-2:#cbc9c3; --muted:#9b9d9a; --faint:#6f7376; --line:#2f3337; --line-2:#474c51; --accent:#f0a63c; --accent-hover:#f8bf6c; --accent-ink:#1a1200; --accent-soft:rgba(240,166,60,.15); --hi:rgba(240,166,60,.28); --hi-ink:#f6e7cf; --ok:#6cc48a; --err:#f28b82; --err-soft:rgba(242,139,130,.12); --pop:0 12px 32px -12px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.5); --f-general:#8aa6d0; --f-qa:#7cc493; --f-suggest:#e08aa6; --f-guides:#b59be0; --f-tools:#6fc4c4; } [data-forum="2"] { --forum:var(--f-general); } [data-forum="3"] { --forum:var(--f-qa); } [data-forum="4"] { --forum:var(--f-suggest); } [data-forum="61"] { --forum:var(--f-guides); } [data-forum="67"] { --forum:var(--f-tools); } /* ---- base ---- */ *, *::before, *::after { box-sizing:border-box; } [hidden] { display:none !important; } html { -webkit-text-size-adjust:100%; background:var(--bg); } body { margin:0 auto; max-width:760px; padding:2rem 1.25rem 5rem; min-height:100vh; font:400 var(--md)/1.55 var(--font); font-stretch:100%; font-feature-settings:'tnum'; color:var(--ink); background:var(--bg); } a { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; } a:hover { color:var(--accent-hover); } button, input, textarea { font:inherit; font-stretch:inherit; color:inherit; } button { -webkit-tap-highlight-color:transparent; } b { font-weight:600; } code { font-family:var(--mono); font-size:.88em; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } ::selection { background:var(--hi); color:var(--hi-ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; } } /* The condensed face is the page's one loud move; the narrowed face is for the facts lines, which are dense by nature and read better tightened. */ .meta { font-stretch:88%; font-weight:450; font-size:var(--xs); line-height:1.6; color:var(--muted); display:flex; flex-wrap:wrap; column-gap:.7em; row-gap:.1em; align-items:baseline; } /* Values in ink, labels in grey, a hairline between facts. */ .meta b { color:var(--ink); font-weight:500; } .meta > span + span { padding-left:.7em; border-left:1px solid var(--line-2); } .err { color:var(--err); } .cue { color:var(--accent); font-stretch:88%; font-weight:600; } .why { font-style:italic; font-weight:400; margin-left:auto; } .meta > .why { border-left:0; padding-left:0; } .stale { color:var(--accent); } /* ---- header ---- */ .top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.5rem; } .top .tools { display:flex; align-items:center; gap:.5rem; flex:none; } h1 { margin:0; font-size:2.125rem; font-weight:700; font-stretch:62%; letter-spacing:-.005em; line-height:1; } h1 a { color:inherit; text-decoration:none; } h1 a:hover { color:var(--accent); } #theme { flex:none; width:2rem; height:2rem; display:inline-grid; place-items:center; padding:0; cursor:pointer; border:0; border-radius:50%; background:transparent; color:var(--muted); } #theme:hover { color:var(--ink); background:var(--paper); } #theme svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #theme .moon { display:none; } :root[data-theme=dark] #theme .moon { display:block; } :root[data-theme=dark] #theme .sun { display:none; } /* The account menu: a small bordered button with the player's name, opening a short list under it, hung from the right edge. */ .account { position:relative; font-size:var(--sm); } .account summary { display:inline-flex; align-items:center; gap:.45rem; min-height:2rem; padding:.3rem .7rem; cursor:pointer; user-select:none; list-style:none; white-space:nowrap; color:var(--ink-2); border:1px solid var(--line); border-radius:2px; background:var(--paper); -webkit-tap-highlight-color:transparent; transition:background .12s, color .12s, border-color .12s; } .account summary::-webkit-details-marker { display:none; } .account summary::before { content:''; flex:none; width:.55rem; height:.55rem; border-radius:50%; background:var(--accent); } .account summary::after { content:''; width:.36em; height:.36em; margin-top:-.25em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); } .account summary b { font-weight:600; color:var(--ink); max-width:12rem; overflow:hidden; text-overflow:ellipsis; } .account summary:hover { color:var(--ink); border-color:var(--line-2); } .account[open] summary { color:var(--ink); background:var(--accent-soft); } .account .menu { position:absolute; top:calc(100% + 6px); right:0; z-index:30; min-width:11rem; padding:.35rem; background:var(--paper); border:1px solid var(--line); border-radius:2px; box-shadow:var(--pop); } .account .menu > * { display:block; padding:.4rem .6rem; color:var(--ink); white-space:nowrap; } .account .menu .id { color:var(--muted); font-size:var(--xs); font-stretch:88%; border-bottom:1px solid var(--line); margin-bottom:.25rem; } .account .menu .id b { color:var(--ink); font-weight:600; } .account .menu a { cursor:pointer; text-decoration:none; } .account .menu a:hover { background:var(--paper-2); color:var(--accent); } /* ---- the search box: field and button as one object ---- */ form.search { display:flex; align-items:stretch; flex-wrap:wrap; margin:0 0 .75rem; } input[type=search] { flex:1 1 240px; min-width:0; padding:.6rem .85rem; font-size:var(--lg); font-weight:500; line-height:1.3; border:1px solid var(--line-2); border-right:0; border-radius:2px 0 0 2px; background:var(--paper); color:var(--ink); -webkit-appearance:none; appearance:none; transition:border-color .15s; } input[type=search]::placeholder { color:var(--faint); font-weight:400; } input[type=search]:focus { outline:none; border-color:var(--accent); } input[type=search]:focus + button { background:var(--accent); color:var(--accent-ink); } input[type=search]::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; } form.search > button { padding:.6rem 1.2rem; border:1px solid var(--ink); border-radius:0 2px 2px 0; background:var(--ink); color:var(--bg); font-weight:600; font-size:var(--md); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s, border-color .15s; } form.search > button:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } #scope { display:none; flex-basis:100%; align-items:baseline; gap:.4rem; max-width:100%; font-size:var(--sm); color:var(--muted); padding:.5rem 0 0; } #scope b { color:var(--ink); max-width:min(60vw, 400px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #scope a { cursor:pointer; text-decoration:none; font-size:1.1rem; line-height:1; padding:0 .25rem; color:var(--muted); } #scope a:hover { color:var(--err); } /* ---- the settings bar: order, forums, filters as three labelled cells ---- One hairline frame under the search box, split by hairlines into cells. Each cell is a small grey label over its current state in ink: "Order by" over three checkboxes, "Forums" over "All" or "Q&A only", "Filters" over "None" or what is on. The amber tint means exactly one thing — a choice is in force (an ordering other than the default, a narrowed forum list, an active filter). An open cell is drawn with an ink edge and a flipped chevron, nothing else. */ .toolbar { display:grid; grid-template-columns:1fr auto auto; gap:1px; margin:0 0 .75rem; font-size:var(--sm); background:var(--line); border:1px solid var(--line); border-radius:2px; } .facet { display:flex; flex-direction:column; justify-content:center; gap:.1rem; min-width:0; margin:0; padding:.45rem .85rem .5rem; background:var(--paper); color:var(--ink-2); text-align:left; font:inherit; line-height:1.4; border:0; border-radius:0; } .facet .label { font-size:var(--xs); font-stretch:88%; font-weight:500; color:var(--muted); white-space:nowrap; } .facet .value { display:flex; align-items:center; gap:.4rem; color:var(--ink); font-weight:500; min-width:0; } .facet .hint { font-size:var(--xs); font-weight:400; font-style:italic; color:var(--muted); } /* The order cell: three checkboxes in a row; a ticked one reads in ink. */ #orderby .value { flex-wrap:wrap; gap:.15rem 1.1rem; } #orderby label { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; white-space:nowrap; color:var(--ink-2); font-weight:400; } #orderby label:hover { color:var(--ink); } #orderby label:has(:checked) { color:var(--ink); font-weight:600; } #orderby input { accent-color:var(--accent); width:1rem; height:1rem; margin:0; } /* The two cells that open something: the whole cell is the control. */ .toolbar summary, .toolbar button { cursor:pointer; user-select:none; list-style:none; -webkit-tap-highlight-color:transparent; transition:background .12s, color .12s, box-shadow .12s; } /* The forum cell is a details element: it stays a block and its summary is the padded cell, so the whole cell is the click target. */ .picker.facet { display:block; padding:0; } .toolbar summary { display:flex; flex-direction:column; justify-content:center; gap:.1rem; height:100%; padding:.45rem .85rem .5rem; } .picker, #filtersBtn { min-width:8.5rem; } .toolbar summary::-webkit-details-marker { display:none; } .toolbar summary:hover, .toolbar button:hover { background:var(--paper-2); } .toolbar summary:hover .label, .toolbar button:hover .label { color:var(--ink-2); } /* The chevron each carries: down when closed, up when open. */ .picker .value::after, #filtersBtn .value::after { content:''; flex:none; width:.36em; height:.36em; margin-top:-.25em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .15s, margin .15s; } .picker[open] .value::after, #filtersBtn.open .value::after { transform:rotate(225deg); margin-top:.25em; } .picker[open] summary, #filtersBtn.open { box-shadow:inset 0 0 0 1px var(--ink); } #orderby.on, .picker.narrowed summary, #filtersBtn.on { background:var(--accent-soft); } #orderby.on .label, .picker.narrowed .label, #filtersBtn.on .label { color:var(--ink-2); } .picker.narrowed .value, #filtersBtn.on .value { font-weight:600; } .facet .value .text { max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .picker { position:relative; } .picker .menu { position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:290px; max-width:min(380px, calc(100vw - 2.5rem)); padding:.35rem; background:var(--paper); border:1px solid var(--line); border-radius:2px; box-shadow:var(--pop); } .picker .row { display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; color:var(--ink); } .picker .row:hover { background:var(--paper-2); } .picker .row label { display:flex; align-items:center; gap:.55rem; flex:1; min-width:0; cursor:pointer; } .picker .row input { accent-color:var(--accent); width:1rem; height:1rem; margin:0; flex:none; } .picker .swatch { flex:none; width:.55rem; height:1.05rem; background:var(--forum, var(--line-2)); } .picker .row .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .picker .row .count { color:var(--muted); font-size:var(--xs); flex:none; font-stretch:88%; } .picker .only { flex:none; cursor:pointer; color:var(--accent); font-size:var(--xs); font-weight:600; text-decoration:none; padding:.1rem .3rem; visibility:hidden; } .picker .only:hover { text-decoration:underline; } .picker .row:hover .only, .picker .row:focus-within .only { visibility:visible; } @media (hover:none) { .picker .only { visibility:visible; } } .picker .all { display:block; padding:.5rem .55rem .35rem; cursor:pointer; font-size:var(--sm); font-weight:600; text-decoration:none; border-top:1px solid var(--line); margin-top:.3rem; } /* ---- filters: a panel under the toolbar, on paper, the same width ---- Its controls use the toolbar's language: the author field is a hairline box like the search input, the checkboxes sit at the same text size, and the operator note is a footnote at the small size. */ /* The panel hangs off its button: an ink top edge, and a notch on that edge under the button's centre (--notch is set by the script). */ .panel { position:relative; margin:0 0 .75rem; padding:.8rem .9rem .75rem; background:var(--paper); border:1px solid var(--line-2); border-top:1px solid var(--ink); border-radius:2px; font-size:var(--sm); } .panel::before, .panel::after { content:''; position:absolute; left:var(--notch, 3rem); width:.6rem; height:.6rem; transform:translate(-50%, -50%) rotate(45deg); } .panel::before { top:0; background:var(--ink); } .panel::after { top:1.5px; background:var(--paper); } #filters .row { display:flex; gap:.6rem 1.25rem; flex-wrap:wrap; align-items:center; } #filters label { display:flex; align-items:center; gap:.4rem; cursor:pointer; white-space:nowrap; color:var(--ink-2); } #filters input[type=checkbox] { accent-color:var(--accent); width:1rem; height:1rem; margin:0; } #syntax { margin:.65rem 0 0; padding-top:.55rem; border-top:1px solid var(--line); line-height:1.7; font-size:var(--xs); font-stretch:92%; color:var(--muted); } #syntax code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.95em; color:var(--ink-2); white-space:nowrap; margin:0 .15em; } /* author picker */ #authwrap { position:relative; display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; border:1px solid var(--line-2); border-radius:2px; background:var(--bg); padding:.15rem .5rem; flex:1 1 220px; min-width:0; max-width:100%; min-height:2rem; } #authwrap:focus-within { border-color:var(--accent); } #authwrap input { border:none; background:none; outline:none; color:var(--ink); min-width:100px; flex:1; font:inherit; padding:.15rem 0; } #authwrap input::placeholder { color:var(--faint); } #chips:empty { display:none; } .chip { display:inline-flex; gap:.3rem; align-items:baseline; max-width:100%; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:2px; padding:.05rem .2rem .05rem .45rem; font-size:var(--xs); font-weight:600; } .chip .meta { display:inline; font-weight:500; } .chip a { cursor:pointer; color:var(--muted); text-decoration:none; padding:0 .25rem; } .chip a:hover { color:var(--err); } #authsug { position:absolute; top:calc(100% + 4px); left:0; min-width:100%; width:max-content; max-width:min(340px, calc(100vw - 2.5rem)); z-index:30; display:none; padding:.3rem; background:var(--paper); border:1px solid var(--line); border-radius:2px; max-height:240px; overflow:auto; box-shadow:var(--pop); } #authsug div { padding:.4rem .6rem; cursor:pointer; font-size:var(--sm); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #authsug div .meta { display:inline; } #authsug div:hover, #authsug div.sel { background:var(--paper-2); } /* ---- index status: one quiet line between the controls and the results ---- */ /* Sits under the header, above the search box: one sentence of caveat, with the per-forum coverage a click away. Dot, sentence, "See which", chevron. No underline, since underlines on this page mean a link out to Torn. */ #stats { font-size:var(--sm); color:var(--muted); margin:0 0 1rem; overflow-wrap:anywhere; } #stats summary { cursor:pointer; user-select:none; list-style:none; display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5rem; color:var(--ink-2); } #stats summary::-webkit-details-marker { display:none; } #stats summary::before { content:''; flex:none; width:.5rem; height:.5rem; border-radius:50%; background:var(--ok); } #stats details:has(.err) summary::before { background:var(--accent); } #stats .hint { display:inline-flex; align-items:center; gap:.4rem; color:var(--accent); font-weight:600; } #stats .hint::after { content:''; width:.36em; height:.36em; margin-top:-.25em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .15s, margin .15s; } #stats details[open] .hint::after { transform:rotate(225deg); margin-top:.25em; } #stats summary:hover .hint { color:var(--accent-hover); } #stats ul { margin:.6rem 0 0; padding:0; list-style:none; font-size:var(--xs); } #stats li { display:flex; flex-wrap:wrap; column-gap:.75em; align-items:baseline; margin:.2rem 0; padding-left:.85rem; border-left:3px solid var(--forum, var(--line)); font-stretch:92%; } #stats li b { color:var(--ink); font-weight:650; margin-right:.15em; } #stats li span { display:contents; } #stats details .err { color:var(--accent); } /* "still being fetched" is a caveat, not a failure */ /* ---- results: a list with a coloured edge, not a stack of cards ---- */ #out > .meta, #out > .err { margin:.25rem 0 .5rem; } #out > p.err { padding:.6rem .9rem; border-left:3px solid var(--err); background:var(--err-soft); font-size:var(--sm); } #out > .empty { color:var(--muted); margin:2.5rem 0; } #out > .count { color:var(--faint); } /* A hit is three layers: the thread (title, facts, opener) on paper, its matching replies inset on a second surface, and a footer line. The forum's colour is the left edge. */ .hit { position:relative; margin:0 0 .6rem; padding:.85rem 1.1rem 0; min-width:0; overflow-wrap:anywhere; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--forum, var(--line-2)); border-radius:2px; } .hit h3 { margin:0 0 .2rem; font-size:var(--lg); font-weight:700; line-height:1.3; letter-spacing:-.005em; max-width:34em; } /* Links out to Torn, and only those, are underlined and carry an outward arrow. Inside a hit, bold without an underline is never a link. */ a.ext { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.16em; } a.ext:hover { color:var(--accent); text-decoration-color:currentColor; } a.ext::after { content:''; display:inline-block; width:.62em; height:.62em; margin-left:.3em; background:currentColor; opacity:.5; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5h6.5V8M10.5 1.5L1.5 10.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5h6.5V8M10.5 1.5L1.5 10.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } a.ext:hover::after { opacity:1; } .meta .forum { color:var(--ink-2); font-weight:500; } .lead, .snippet { margin:.5rem 0 0; font-size:var(--sm); line-height:1.5; color:var(--ink-2); max-width:70ch; } .snippet hi, .lead hi { background:var(--hi); color:var(--hi-ink); font-style:normal; padding:.02em .12em; margin:0 -.05em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } /* Section labels inside a hit: the opening post, then what matched. */ .label { display:block; font-size:var(--xs); font-stretch:88%; font-weight:600; color:var(--muted); line-height:1.4; } .opener { margin:.7rem 0 0; } .opener .lead { margin-top:.15rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .matched { margin:.85rem 0 0; } .matched .label { margin-bottom:.35rem; } .sub { margin:0 0 .4rem; padding:.55rem .8rem .65rem; background:var(--paper-2); border-radius:2px; font-size:var(--sm); } .sub > a.ext { font-weight:600; } .sub > .meta { display:inline-flex; margin-left:.5rem; vertical-align:baseline; } .sub .snippet { margin-top:.2rem; } .quote { color:var(--muted); font-size:var(--xs); font-stretch:92%; margin:0 0 .35rem; white-space:pre-wrap; } .hitfoot { margin:.75rem -1.15rem 0; padding:.45rem 1.15rem; border-top:1px solid var(--line); font-size:var(--xs); font-stretch:92%; color:var(--muted); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } /* The one in-app action on a cover: a button, not a link. */ .hitfoot .btn { margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; min-height:1.8rem; padding:.15rem .65rem; cursor:pointer; border:1px solid var(--line-2); border-radius:2px; background:var(--paper); color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:background .12s, color .12s, border-color .12s; } .hitfoot .btn::before { content:''; width:.36em; height:.36em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); } .hitfoot .btn:hover { color:var(--ink); background:var(--accent-soft); border-color:var(--accent); } /* Thread-scoped hits have no footer; keep their bottom padding. */ .hit > .snippet:last-child { padding-bottom:.9rem; } #pager { margin:1.5rem 0; padding-top:1.25rem; border-top:1px solid var(--line); } #pager button { padding:.55rem 1.1rem .6rem; cursor:pointer; border:1px solid var(--ink); border-radius:2px; background:transparent; color:var(--ink); font-weight:600; transition:background .15s, color .15s; } #pager button:hover { background:var(--ink); color:var(--bg); } /* ---- thread reader ---- */ .thread h2 { font-size:var(--xxl); line-height:1.15; letter-spacing:-.01em; font-weight:700; margin:1.25rem 0 .4rem; overflow-wrap:anywhere; max-width:24em; } .thread > .meta { margin-bottom:1.25rem; } .post { position:relative; margin:0 0 .5rem; padding:.8rem 1.15rem .9rem; min-width:0; overflow-wrap:anywhere; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:2px; } .post.topic { border-left-color:var(--forum, var(--line-2)); } .post .meta b { font-size:var(--md); } .post .body { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:.45rem; line-height:1.6; max-width:70ch; font-size:var(--sm); } .post.deleted { opacity:.55; } .post:target { border-left-color:var(--accent); } .post .quote { margin:.5rem 0 0; padding-left:.75rem; border-left:1px solid var(--line-2); } /* ---- were these results useful? ---- */ #fb { margin:.25rem 0 1rem; font-size:var(--sm); color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; } #fb .thumb { font:inherit; font-size:1rem; line-height:1; padding:.2rem .35rem; cursor:pointer; border:1px solid transparent; border-radius:2px; background:transparent; filter:grayscale(1) opacity(.6); transition:filter .12s; } #fb .thumb:hover { filter:none; } #fb .thumb.on { filter:none; border-color:var(--line); background:var(--accent-soft); } #fbnote { flex-basis:100%; margin-top:.4rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:2px; background:var(--paper); } #fbnote label { display:block; margin-bottom:.4rem; color:var(--ink); } #fbnote textarea { width:100%; max-width:34rem; padding:.5rem .7rem; resize:vertical; border:1px solid var(--line-2); border-radius:2px; background:var(--paper); color:var(--ink); display:block; margin-bottom:.5rem; } #fbnote textarea:focus { outline:none; border-color:var(--accent); } #fbnote button { font-weight:600; padding:.4rem .9rem; cursor:pointer; border:0; background:var(--ink); color:var(--bg); border-radius:2px; } #fbnote button:hover { background:var(--accent); color:var(--accent-ink); } #fbnote button:disabled, #fbnote textarea:disabled { opacity:.6; cursor:progress; } /* ---- sign-in, preferences, the nag ---- */ #nag { margin:0 0 1.25rem; padding:.5rem 0 .5rem .9rem; border-left:3px solid var(--accent); font-size:var(--sm); color:var(--ink-2); line-height:1.55; } #nag a { cursor:pointer; font-weight:600; } #login, #prefs { max-width:34rem; padding:1.4rem 1.5rem 1.5rem; border:1px solid var(--line); border-radius:2px; background:var(--paper); } #login { margin:1.5rem 0 2rem; } #prefs { margin:0 0 1.5rem; } #login label[for=key], #prefs form > b { display:block; font-size:var(--lg); font-weight:700; color:var(--ink); margin-bottom:.5rem; } #login input[type=password] { width:100%; padding:.55rem .7rem; font-family:var(--mono); font-size:var(--md); letter-spacing:.04em; border:1px solid var(--line-2); border-radius:2px; background:var(--bg); color:var(--ink); margin:.25rem 0 .9rem; } #login input[type=password]::placeholder { font-family:var(--font); letter-spacing:0; color:var(--faint); } #login input[type=password]:focus { outline:none; border-color:var(--accent); } #login button, #prefs button { padding:.5rem 1rem .55rem; font-weight:600; cursor:pointer; border:0; background:var(--ink); color:var(--bg); border-radius:2px; transition:background .15s; } #login button:hover, #prefs button:hover { background:var(--accent); color:var(--accent-ink); } #prefs button.plain { background:transparent; color:var(--ink); border:1px solid var(--line-2); } #prefs button.plain:hover { border-color:var(--ink); background:transparent; } #login .err, #prefs .err { font-size:var(--sm); margin-left:.6rem; } .optin { margin:.75rem 0; padding:.7rem .9rem; font-size:var(--md); border:1px solid var(--line); border-radius:2px; background:var(--bg); } .optin input { accent-color:var(--accent); } .optin .rates { margin:.35rem 0 0 1.6rem; color:var(--muted); font-size:var(--sm); } .optin label { cursor:pointer; } .whybox { margin:.5rem 0 .9rem; color:var(--ink); } .whybox p { margin:.35rem 0 0; line-height:1.55; color:var(--muted); font-size:var(--sm); } .explain { margin:.85rem 0 1.1rem; font-size:var(--sm); } .explain summary { cursor:pointer; color:var(--accent); list-style:none; display:inline-flex; align-items:center; gap:.4rem; } .explain summary:hover { text-decoration:underline; } .explain summary::-webkit-details-marker { display:none; } .explain summary::before { content:''; width:.36em; height:.36em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .15s; } .explain[open] summary::before { transform:rotate(45deg); } .explain p { margin:.55rem 0; line-height:1.55; color:var(--muted); max-width:66ch; } .explain code { background:var(--bg); border:1px solid var(--line); border-radius:2px; padding:.05em .3em; } #credit { margin-top:3.5rem; padding-top:1rem; border-top:1px solid var(--line); font-size:var(--sm); color:var(--muted); display:block; font-stretch:100%; font-weight:400; } /* ---- small screens ---- */ @media (max-width:600px) { body { padding:1.25rem .9rem 4rem; } h1 { font-size:var(--xxl); } input[type=search] { font-size:var(--md); padding:.55rem .7rem; } form.search > button { padding:.5rem .9rem; } /* The bar folds: the order cell takes a full row, the two openers share the next. */ .toolbar { grid-template-columns:1fr 1fr; } #orderby { grid-column:1 / -1; } .facet, .toolbar summary { padding-left:.7rem; padding-right:.7rem; } .picker.facet { padding:0; } .picker, #filtersBtn { min-width:0; } .facet .value .text { max-width:none; } .account summary b { max-width:6.5rem; } .hit, .post { padding-left:.85rem; padding-right:.85rem; } .hitfoot { margin-left:-.85rem; margin-right:-.85rem; padding-left:.85rem; padding-right:.85rem; } #login, #prefs { padding:1.1rem 1rem 1.2rem; } .thread h2 { font-size:var(--xl); } }