/* QuizMaxx — in the manner of the great cigarette-card series */ :root { /* palette lifted from the Leaders Portrait Gallery */ --wall: #24382e; --wall-deep: #1b2b23; --card: #f5efdf; --card-edge: #e3d7bb; --ink: #26241c; --ink-soft: #5b564a; --gilt: #b6892e; --gilt-soft: #d3b063; --plate: #efe6cf; /* wall-context semantics (cream containers override these) */ --text: #f0e8d2; --muted: #cfc6ab; --brass: var(--gilt-soft); --brass-soft: var(--gilt-soft); --border: rgba(211, 176, 99, .45); --panel: var(--card); --panel2: var(--plate); --green: #4c7a54; --red: #a5432f; --blue: #2f6bb0; --radius: 6px; --serif: 'Old Standard TT', Georgia, serif; --sans: 'Archivo', -apple-system, sans-serif; /* chrome colours, named so a theme can repaint them (see [data-theme]) */ --topbar-bg: rgba(23, 33, 27, .94); --topbar-edge: rgba(211, 176, 99, .35); --nav-ink: #d8cfb2; --gilt-fill: #b6892e; /* gilt used as a BACKGROUND behind text */ --gilt-fill-hover: #d3b063; --on-gilt: #1b2b23; /* text sitting on a gilt fill */ --scrim: rgba(15, 22, 18, .72); --kbd-bg: rgba(0, 0, 0, .28); --track: rgba(240, 232, 210, .15); --field-edge: #cbbd97; --bar-track: #e6dcc2; --sheen: rgba(255, 255, 255, .4); /* height of the sticky top bar — anything else that sticks parks under it */ --topbar: 59px; } /* ---------- appearance (Settings → Reading) ---------------------------------- Everything below is driven by data-* attributes on , set by an inline script in the head so the choice is applied before first paint rather than flashing the default. Type sizes throughout the stylesheet are in rem, so changing the root size scales the chrome as well as the body copy. */ :root { font-size: 16px; } :root[data-size="s"] { font-size: 15px; } :root[data-size="l"] { font-size: 18px; } :root[data-size="xl"] { font-size: 20px; } /* Old Standard TT is a hairline-thin Didone — handsome at display sizes, hard work at 11px. The alternatives are system faces, so they cost no download. */ :root[data-font="serif"] { --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif; } :root[data-font="sans"] { --serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; } /* the sans faces have shorter lowercase and read tight at the serif's leading */ :root[data-font="sans"] body { line-height: 1.6; } :root[data-font="sans"] .flashcard .q, :root[data-font="sans"] .qq .q { letter-spacing: -.005em; } /* Muted italic serif at 0.9rem is the least legible thing in here. This turns the decorative italics upright and firms up their colour, without touching the two places italic carries meaning (the logo and masthead flourish). */ :root[data-plain="1"] p.viewsub, :root[data-plain="1"] .masthead .standfirst, :root[data-plain="1"] .set-note, :root[data-plain="1"] .set-field small, :root[data-plain="1"] .qfact, :root[data-plain="1"] .news-note, :root[data-plain="1"] .trouble > p, :root[data-plain="1"] .leeches > p, :root[data-plain="1"] .insight > p, :root[data-plain="1"] .qf-foot, :root[data-plain="1"] .quiz-modebar .modenote, :root[data-plain="1"] .doc-sub, :root[data-plain="1"] .misslist li, :root[data-plain="1"] .music-reveal .r-typed, :root[data-plain="1"] .qq .r-typed, :root[data-plain="1"] .toast { font-style: normal; } :root[data-plain="1"] { --muted: #ded6bd; --ink-soft: #4a4438; } /* Stronger separation everywhere: brighter text on the wall, darker ink on the card stock, firmer borders. Contrast was already 6:1+ in most places — this is for when that still isn't enough. */ :root[data-theme="contrast"] { --text: #fdf8ea; --muted: #e6dfc6; --ink: #14130e; --ink-soft: #3d382d; --card: #fbf6e8; --card-edge: #b9a97f; --field-edge: #8d7f5c; --gilt: #a2761f; --gilt-soft: #e2c37c; --nav-ink: #f2ead2; /* a mid gold plaque can't carry either light or dark text at 4.5:1, so the high-contrast theme brightens the FILL and keeps the ink dark (10.9:1) */ --gilt-fill: #e8c25e; --gilt-fill-hover: #f0cd70; --on-gilt: #14130e; --border: rgba(226, 195, 124, .7); --topbar-edge: rgba(226, 195, 124, .55); --bar-track: #d8cbaa; --wall: #1d2f26; --wall-deep: #142019; } /* Paper: the gallery palette turned inside out — parchment wall, white card stock, ink throughout. The embedded map keeps its dark chart; it's a separate app with its own skin, and an antique chart is meant to read that way. */ :root[data-theme="paper"] { --wall: #e9e1cb; --wall-deep: #ded4b9; --card: #fffdf6; --card-edge: #cfc2a0; --plate: #f4eeda; --ink: #221f18; --ink-soft: #55503f; --text: #221f18; --muted: #5c5644; --gilt: #8a6516; --gilt-soft: #a8811f; --brass: #8a6516; --brass-soft: #8a6516; --border: rgba(138, 101, 22, .42); --topbar-bg: rgba(253, 250, 240, .93); --topbar-edge: rgba(138, 101, 22, .35); --nav-ink: #443d2c; --gilt-fill: #6f5011; --gilt-fill-hover: #8a6516; --on-gilt: #fffdf6; --scrim: rgba(60, 52, 33, .5); --kbd-bg: rgba(0, 0, 0, .07); --track: rgba(34, 31, 24, .13); --field-edge: #bbac86; --bar-track: #ded4b9; --sheen: rgba(255, 255, 255, .65); --green: #3d6444; --red: #97331f; } /* on parchment the gilt-filled nav tab needs its own weight, and the soft gilt is too pale to carry small text */ :root[data-theme="paper"] .masthead .eyebrow, :root[data-theme="paper"] .masthead h1 .amp, :root[data-theme="paper"] header.top .logo .amp { color: var(--gilt); } :root[data-theme="paper"] .panel, :root[data-theme="paper"] .stat, :root[data-theme="paper"] .modecard, :root[data-theme="paper"] .facecard { box-shadow: 0 1px 0 rgba(80, 66, 33, .14); } :root[data-theme="paper"] .flashcard, :root[data-theme="paper"] .qq, :root[data-theme="paper"] .music-stage, :root[data-theme="paper"] .anagram-stage, :root[data-theme="paper"] .conn-stage, :root[data-theme="paper"] .modal { box-shadow: 0 2px 0 rgba(80, 66, 33, .16), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); } /* Studio: the modern-app idiom — one warm off-white sheet, near-black ink, a single terracotta accent, and nothing else. The palette is only half of it; the other half is subtraction. The gallery carries a screen with gilt double frames, drop shadows and a diamond flourish, and every one of those reads as a mistake in a look held up by hairlines and space. So the block below turns the ornament off as deliberately as it repaints the colours, and the one flourish it keeps is the black lozenge for whatever is currently selected. */ :root[data-theme="studio"] { --wall: #f2f0ea; /* barely a gradient at all: the look is one flat sheet, and the gallery's wall-lamp falloff reads as a smudge on it */ --wall-deep: #eeebe4; --card: #faf8f4; --card-edge: rgba(24, 22, 18, .11); --plate: #f3f1ea; --ink: #14120f; --ink-soft: #6f6a62; --text: #14120f; --muted: #6f6a62; /* terracotta stands in for the gilt: warm enough to belong to the same page, dark enough to carry small text on the sheet (4.8:1) */ --gilt: #a83f24; --gilt-soft: #b4462a; --brass: #a83f24; --brass-soft: #a83f24; --border: rgba(24, 22, 18, .12); --topbar-bg: rgba(246, 244, 239, .88); --topbar-edge: rgba(24, 22, 18, .10); --nav-ink: #56514a; /* what is selected goes black, not gold — the one high-contrast mark allowed */ --gilt-fill: #17150f; --gilt-fill-hover: #322d25; --on-gilt: #faf8f4; --scrim: rgba(28, 25, 20, .45); --kbd-bg: rgba(0, 0, 0, .06); --track: rgba(24, 22, 18, .12); --field-edge: rgba(24, 22, 18, .17); --bar-track: #e4e0d6; --sheen: transparent; --green: #4a6b3a; --good: #4a6b3a; --red: #a83f24; --danger: #a83f24; --blue: #2a5f9e; --radius: 14px; } /* no gilded wall-lamp glow behind the masthead: one sheet, one wash */ :root[data-theme="studio"] body::before { background: linear-gradient(var(--wall), var(--wall-deep)); } /* every raised surface loses its shadow. A drop shadow on this paper is the ornament coming back in through the side door. */ :root[data-theme="studio"] .panel, :root[data-theme="studio"] .stat, :root[data-theme="studio"] .modecard, :root[data-theme="studio"] .cta, :root[data-theme="studio"] .cta-quiet, :root[data-theme="studio"] .cta-slim, :root[data-theme="studio"] .news-item, :root[data-theme="studio"] .choices button, :root[data-theme="studio"] .anag-tile, :root[data-theme="studio"] .conn-items li, :root[data-theme="studio"] .toast { box-shadow: none; } /* and the double gilt frame becomes a hairline and a soft corner */ :root[data-theme="studio"] .flashcard, :root[data-theme="studio"] .qq, :root[data-theme="studio"] .music-stage, :root[data-theme="studio"] .anagram-stage, :root[data-theme="studio"] .conn-stage, :root[data-theme="studio"] .news-lead-card, :root[data-theme="studio"] .primer, :root[data-theme="studio"] .modal { box-shadow: none; border-radius: var(--radius); } :root[data-theme="studio"] .facecard { box-shadow: none; border-radius: 10px; } /* hover still has to say "this is a target", so it says it with a firmer edge instead of the gallery's lift-and-cast */ :root[data-theme="studio"] .stat-link:hover, :root[data-theme="studio"] .modecard:hover, :root[data-theme="studio"] .facecard:hover, :root[data-theme="studio"] .brief-card:hover, :root[data-theme="studio"] .news-card:hover { box-shadow: 0 0 0 1px rgba(24, 22, 18, .3); } /* controls are lozenges; fields keep a squarer corner so they still read as somewhere to type rather than something to press */ :root[data-theme="studio"] .btn, :root[data-theme="studio"] nav.main button, :root[data-theme="studio"] .iconbtn { border-radius: 999px; } :root[data-theme="studio"] .iconbtn { width: 36px; height: 36px; } :root[data-theme="studio"] select, :root[data-theme="studio"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]), :root[data-theme="studio"] .gradebar button, :root[data-theme="studio"] .choices button, :root[data-theme="studio"] .modal textarea { border-radius: 10px; } /* the default grade's 3px gilt halo is a second border at this weight — the ring goes, the edge just goes to ink */ :root[data-theme="studio"] .gradebar button.g-default { box-shadow: none; border-color: var(--ink); } /* the nav's border is a hardcoded gilt, invisible on a pale wall */ :root[data-theme="studio"] nav.main button { border-color: var(--border); } :root[data-theme="studio"] nav.main button:hover { border-color: var(--ink-soft); } :root[data-theme="studio"] .btn:hover { border-color: var(--ink-soft); } /* the masthead diamond is the most gallery-specific mark on the page: drop the lozenge and let the two halves meet as one hairline */ :root[data-theme="studio"] .rule span { display: none; } :root[data-theme="studio"] .rule::before, :root[data-theme="studio"] .rule::after { width: 85px; background: var(--border); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } /* always reserve the scrollbar gutter so switching between a tall view (Decks) and a short one (Music) doesn't shift the centred layout sideways */ html { scrollbar-gutter: stable; } body { font-family: var(--serif); background: var(--wall); color: var(--text); line-height: 1.55; } /* the wall: painted on a fixed underlay rather than background-attachment (which repaints on every scroll frame and janks on mobile) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 500px at 50% -100px, rgba(211, 176, 99, .10), transparent 60%), linear-gradient(var(--wall), var(--wall-deep)); } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--gilt-soft); outline-offset: 2px; } /* inline icons (chrome stays engraved — no emoji) */ .ic { width: 17px; height: 17px; vertical-align: -3px; margin-right: 8px; color: var(--gilt); flex: 0 0 auto; } .subnav-btn .ic { width: 15px; height: 15px; margin-right: 6px; color: inherit; opacity: .9; } /* cream "card stock" scope — anything paper-coloured flips its palette to ink */ .panel, .stat, .modecard, .flashcard, .qq, .modal, .facecard, .music-stage, .cta, .gradebar button, .choices button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]) { --text: var(--ink); --muted: var(--ink-soft); --brass: var(--gilt); --border: var(--card-edge); } /* ---------- shell ---------- */ header.top { display: flex; align-items: center; gap: 22px; padding: 12px 24px; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--topbar-edge); position: sticky; top: 0; z-index: 50; flex-wrap: wrap; } header.top .logo { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; color: var(--text); white-space: nowrap; cursor: pointer; } header.top .logo .amp { color: var(--gilt-soft); font-style: italic; font-weight: 400; } nav.main { display: flex; gap: 8px; flex-wrap: wrap; } nav.main button { font-family: var(--sans); font-size: .69rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nav-ink); background: transparent; border: 1px solid rgba(211, 176, 99, .45); padding: 8px 16px; border-radius: 2px; transition: all .18s ease; } nav.main button:hover { border-color: var(--gilt-soft); color: var(--text); } nav.main button.active { background: var(--gilt-fill); border-color: var(--gilt-fill); color: var(--on-gilt); font-weight: 700; } .iconbtn { margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--nav-ink); border: 1px solid var(--border); border-radius: 2px; transition: all .18s ease; } .iconbtn svg { width: 17px; height: 17px; display: block; } .iconbtn:hover { border-color: var(--gilt-soft); color: var(--text); } .iconbtn.active { background: var(--gilt-fill); border-color: var(--gilt-fill); color: var(--on-gilt); } main { max-width: 1060px; margin: 0 auto; padding: 30px 20px 90px; } /* ---------- settings ---------- */ .set-group { margin-bottom: 18px; } .set-group h3 { font-size: 1.15rem; margin-bottom: 4px; } .set-note { color: var(--ink-soft); font-style: italic; font-size: .9rem; margin-bottom: 14px; max-width: 62ch; } .set-row { display: flex; gap: 18px; flex-wrap: wrap; } /* the daily-load read-out: a consequence of the field above it, so it takes a whole row rather than sitting beside the input as another column would. flex-shrink 0 because flex-basis alone lets it squeeze back onto the line. */ /* Its own line, always. `flex-basis: 100%` alone did not manage it: the `max-width` capped the item well short of the row, so the next field simply sat beside it and the group read as a jumble. Width goes to the box; the readable measure goes on the text inside it. */ .set-load { flex: 1 0 100%; width: 100%; max-width: none; margin: 2px 0 6px; } .set-load > span { display: block; max-width: 78ch; } .set-load small { font-style: normal; opacity: .8; } /* Fields are sized by what they hold, not all alike. Everything used to be `1 1 190px`, so a two-digit "new cards per day" box grew to the same 480px as an email address — the numbers wasted half a row and the text beside them felt cramped. The narrow case constrains the INPUT, not the field. Shrinking the whole field to 150px was worse than the problem: the label wrapped onto two lines and the hint underneath became a tall ragged column. The label and hint still need a readable measure; only the box wants to be small. */ .set-field { flex: 1 1 240px; gap: 6px; } .set-field.is-num { flex: 1 1 210px; } .set-field.is-num input { max-width: 130px; } .set-field.is-wide { flex: 3 1 320px; } /* email, and anything free-text and long */ .set-field > span { color: var(--ink-soft); } .set-field input, .set-field select { width: 100%; } .set-field small { font-family: var(--serif); font-size: .82rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink-soft); font-style: italic; } .set-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; } /* a live specimen of the current choice, so you can judge it without leaving */ .set-sample { border-top: 1px solid var(--card-edge); padding-top: 14px; max-width: none; } .set-sample b { font-style: normal; color: var(--ink); } .set-sample-cap { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-style: normal; margin-left: 6px; } .checkline { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink); cursor: pointer; } .checkline input { accent-color: var(--gilt); } .set-footer { margin-top: 22px; text-align: center; } /* account — optional, so it never shouts */ .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .acct-state { font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); } .acct-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; } .acct-row .acct-actions { margin-top: 0; } .acct-msg { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); margin-top: 12px; min-height: 1.2em; } .acct-msg.bad { color: var(--red); } /* QuizMaxx Plus. Deliberately quiet — an upgrade panel in a study tool should read like a note, not a billboard; it sits in Settings and nowhere else. */ .plus-panel .plus-perks { list-style: none; margin: 14px 0 4px; display: grid; gap: 12px; } .plus-panel .plus-perks li { display: grid; gap: 2px; } .plus-panel .plus-perks b { font-size: .95rem; } .plus-panel .plus-perks span { color: var(--ink-soft); font-size: .85rem; line-height: 1.45; } .plus-buy { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .plus-buy .btn small { display: block; font-weight: 400; font-size: .68rem; opacity: .8; margin-top: 2px; } .plus-small { margin-top: 12px; } .plus-panel.is-on { border-color: var(--gilt); } .plus-warn { color: var(--red); } .plus-pending { margin-top: 12px; } .acct-form .set-row { margin-bottom: 4px; } .backup-nag { margin-top: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .backup-nag p { flex: 1 1 300px; color: var(--ink-soft); font-size: .92rem; } .view { display: none; } .view.active { display: block; animation: fade .22s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } } h2.viewtitle { font-size: 1.7rem; font-weight: 700; letter-spacing: .01em; margin-bottom: 2px; } p.viewsub { color: var(--muted); font-style: italic; margin-bottom: 24px; } /* ---------- gallery ornaments ---------- */ .masthead { text-align: center; padding: 18px 10px 10px; margin-bottom: 26px; } .masthead .eyebrow { font-family: var(--sans); font-size: .69rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gilt-soft); } .masthead h1 { font-weight: 700; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 10px auto 8px; } .masthead h1 .amp { color: var(--gilt-soft); font-style: italic; font-weight: 400; } .masthead .standfirst { max-width: 620px; margin: 0 auto; font-size: 1rem; color: var(--muted); font-style: italic; } .rule { width: 170px; height: 14px; margin: 18px auto 0; position: relative; } .rule::before, .rule::after { content: ""; position: absolute; top: 50%; height: 1px; width: 64px; background: var(--gilt); } .rule::before { left: 0; } .rule::after { right: 0; } .rule span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 8px; height: 8px; border: 1px solid var(--gilt); } /* ---------- generic bits ---------- */ .panel { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px var(--sheen); padding: 18px 20px; margin-bottom: 16px; } .btn { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 2px; padding: 9px 18px; transition: all .18s ease; } .btn:hover { border-color: var(--gilt-soft); } .btn.active, .btn.primary { background: var(--gilt-fill); border-color: var(--gilt-fill); color: var(--on-gilt); font-weight: 700; } .btn.primary:hover { background: var(--gilt-fill-hover); border-color: var(--gilt-fill-hover); } .btn.big { padding: 12px 26px; font-size: .81rem; } .btn:disabled { opacity: .45; cursor: default; } /* secondary/quiet action (e.g. "End session" beside a primary Next) */ .btn.ghost { border-color: transparent; color: var(--muted); } .btn.ghost:hover { color: var(--text); border-color: var(--border); } /* Every input you type into, not a hand-listed set of types. The list was `text` and `number` only, so the email and password boxes were never styled at all: they rendered at the browser default — 19px tall, no padding, Arial — beside 34px fields in the house face, which is why they looked broken. A :not() list fails safe; the next input type added is styled by default. */ select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]) { background: var(--plate); color: var(--ink); border: 1px solid var(--field-edge); border-radius: 3px; padding: 8px 10px; font-family: var(--sans); font-size: .9rem; } label.f { display: flex; flex-direction: column; gap: 5px; font-family: var(--sans); font-size: .69rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted); } .tag-brass { color: var(--brass); border-color: var(--brass); } /* ---------- home ---------- */ .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; } /* two bands: what's waiting for you, then how far you've come */ .statband { margin-bottom: 22px; } .statband:last-child { margin-bottom: 26px; } .bandlabel { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } /* a nought is context, not news — let the live numbers carry the gilt */ .stat.is-zero .n { color: var(--ink-soft); font-weight: 400; } /* Answers per day across every pool. This used to be inside the map's own dashboard, counting map answers only — one chart, showing a fraction of the work, two clicks and an iframe away from the screen you open every day. */ .activity { padding: 16px 16px 12px; } .act-chart { display: flex; gap: 6px; align-items: flex-end; } .act-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; } .act-col span { font-family: var(--sans); font-size: .62rem; letter-spacing: .05em; color: var(--ink-soft); } .act-bar { width: 100%; max-width: 30px; background: var(--bar-track); border-radius: 3px 3px 1px 1px; } .act-bar.hi { background: var(--green); } .act-bar.mid { background: var(--gilt); } .act-bar.lo { background: var(--red); } .act-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--card-edge); color: var(--ink-soft); font-style: italic; font-size: .82rem; } :root[data-plain="1"] .act-foot { font-style: normal; color: var(--ink); } .stat { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); padding: 16px 14px; text-align: center; } .stat-link { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .stat-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px var(--gilt); } .stat .n { font-size: 2rem; font-weight: 700; color: var(--gilt); } .stat .l { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; } /* three cards, so the track has to be narrow enough that they make one row well before the widest layout — otherwise the third sits alone in a hole */ .homegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; } .modecard { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); padding: 20px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .modecard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px var(--gilt); } .modecard h3 { font-size: 1.12rem; margin-bottom: 6px; } .modecard p { color: var(--ink-soft); font-size: .93rem; } /* ---------- daily-review call to action ---------- */ .cta { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--gilt-soft); padding: 22px 26px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cta .cta-text { flex: 1 1 300px; min-width: 0; } .cta .cta-text h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .cta .cta-text p { color: var(--ink-soft); font-size: .95rem; margin-top: 4px; } .cta .btn { flex: 0 0 auto; } /* nothing due — quieter, no gilt inset frame */ .cta-quiet { box-shadow: 0 1px 0 rgba(0, 0, 0, .25); } .cta-quiet .cta-text h2 { font-size: 1.2rem; color: var(--ink-soft); } /* slim variant above the deck table */ .cta-slim { padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px var(--sheen); } .cta-slim .cta-text { font-size: .98rem; } /* ---------- daily review session ---------- */ .rev-kind { color: var(--brass-soft); } .rev-exit { text-align: center; margin-top: 22px; } #review-play .qnext .kbd-hint { margin-top: 8px; } /* ---------- progress backup ---------- */ .backup-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- paused items (leeches) ---------- */ .leeches { margin-top: 20px; } .leeches h3 { font-size: 1.15rem; margin-bottom: 2px; } .leeches > p { color: var(--ink-soft); font-style: italic; font-size: .9rem; margin-bottom: 12px; } .leeches ul { list-style: none; } .leeches li { padding: 12px 6px; border-top: 1px solid var(--card-edge); } .lk-item { display: flex; align-items: baseline; gap: 12px; } .lk-item b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-item .t-sub { flex: 1 1 auto; } .lk-q { color: var(--ink-soft); font-size: .88rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-actions { display: flex; gap: 8px; margin-top: 9px; } .lk-actions .btn { padding: 6px 12px; font-size: .69rem; } .lk-retired { font-family: var(--sans); font-size: .76rem; color: var(--ink-soft); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--card-edge); } /* ---------- trouble spots ---------- */ .trouble { margin-top: 20px; } .trouble h3 { font-size: 1.15rem; margin-bottom: 2px; } .trouble > p { color: var(--muted); font-style: italic; font-size: .9rem; margin-bottom: 10px; } .trouble ul { list-style: none; } .trouble li { display: flex; align-items: baseline; gap: 12px; padding: 8px 6px; border-top: 1px solid var(--card-edge); cursor: pointer; } .trouble li:hover { background: var(--plate); } .trouble li b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trouble .t-sub { flex: 1 1 auto; font-family: var(--sans); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trouble .t-n { flex: 0 0 auto; font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--red); } /* ---------- deck list ---------- */ .deck-toolbar { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .deck-toolbar .deck-count { flex: 1 1 auto; text-align: right; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-bottom: 9px; } .decktable tr.grouprow { cursor: pointer; } .decktable tr.grouprow:hover .pill { border-color: var(--gilt); color: var(--gilt); } .grp-n { font-family: var(--sans); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-left: 8px; } .grp-caret { color: var(--ink-soft); margin-left: 6px; display: inline-block; transition: transform .15s ease; } .grp-caret.closed { transform: rotate(-90deg); } .deck-empty { padding: 26px 10px !important; text-align: center; color: var(--ink-soft); font-style: italic; } .decktable { width: 100%; border-collapse: collapse; font-size: .95rem; } .decktable th, .decktable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--card-edge); } .decktable th { font-family: var(--sans); color: var(--ink-soft); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; /* 41 rows is a long scroll — keep the column labels in view */ position: sticky; top: var(--topbar); z-index: 2; background: var(--card); box-shadow: inset 0 -1px 0 var(--card-edge); } .decktable tr.deckrow { cursor: pointer; } .decktable tr.deckrow:hover td { background: var(--plate); } .decktable td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--sans); font-size: .85rem; } .due-yes { color: var(--gilt); font-weight: 700; } .progwrap { display: flex; align-items: center; gap: 8px; } .prog { background: var(--bar-track); border-radius: 99px; height: 7px; min-width: 90px; overflow: hidden; flex: 1 1 auto; display: flex; } .prog i { height: 100%; background: var(--gilt); } /* graduated */ .prog b { height: 100%; background: rgba(182, 137, 46, .38); } /* still in learning steps */ .pctlbl { font-family: var(--sans); font-size: .7rem; color: var(--ink-soft); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- study ---------- */ .studywrap { max-width: 720px; margin: 0 auto; } .studymeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--sans); color: var(--muted); font-size: .8rem; letter-spacing: .04em; margin-bottom: 8px; } /* the deck name yields; the card state and "N left" must never break apart */ .studymeta .sm-deck { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studymeta .sm-state { flex: 0 0 auto; white-space: nowrap; } /* session progress — same thin rule the quiz, mock and music rounds use */ .studywrap .qbar { margin-bottom: 14px; } .flashcard { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); padding: 44px 38px; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; } .flashcard .q { font-size: 1.45rem; font-weight: 700; } .flashcard .a { font-size: 1.55rem; color: var(--gilt); font-weight: 700; } .flashcard .extra { color: var(--ink-soft); font-size: .95rem; max-width: 560px; } .flashcard .extra ul { text-align: left; margin: 8px 0 0 18px; } .flashcard .extra li { margin: 3px 0; } .flashcard img.face { max-height: 260px; max-width: 100%; border: 1px solid var(--card-edge); border-radius: 4px; } .flashcard hr { border: none; border-top: 1px solid var(--gilt-soft); width: 70%; } .gradebar { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .gradebar button { min-width: 108px; padding: 11px 10px; background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 4px; font-family: var(--sans); font-size: .9rem; font-weight: 600; transition: all .15s ease; } .gradebar button small { display: block; color: var(--ink-soft); font-size: .7rem; font-weight: 400; } .gradebar .g-again:hover { border-color: var(--red); color: var(--red); } .gradebar .g-hard:hover { border-color: var(--gilt); color: var(--gilt); } .gradebar .g-good:hover { border-color: var(--green); color: var(--green); } .gradebar .g-easy:hover { border-color: var(--blue); color: var(--blue); } .showbtn { margin-top: 18px; text-align: center; } /* typed-answer study mode */ .type-row { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin-top: 20px; flex-wrap: wrap; } .type-row input { flex: 0 1 340px; padding: 12px 16px; font-size: 1.15rem; text-align: center; } .type-sub { display: flex; gap: 18px; justify-content: center; margin-top: 12px; } .linklike { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--sans); font-size: .76rem; color: var(--muted); text-decoration: underline; } .linklike:hover { color: var(--gilt); } .type-verdict { font-family: var(--sans); font-weight: 700; font-size: 1.02rem; margin-top: 2px; } .type-verdict.ok { color: var(--green); } .type-verdict.no { color: var(--red); } .gradebar button.g-default { border-width: 2px; box-shadow: 0 0 0 3px var(--gilt-soft); } .gradebar .g-default.g-good { border-color: var(--green); color: var(--green); } .gradebar .g-default.g-again { border-color: var(--red); color: var(--red); } .donebox { text-align: center; padding: 60px 0; } .donebox .big-emoji { font-size: 3rem; } .kbd-hint { text-align: center; font-family: var(--sans); color: var(--muted); font-size: .72rem; letter-spacing: .06em; margin-top: 14px; } kbd { background: var(--kbd-bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; font-size: .72rem; color: var(--text); } /* ---------- quiz ---------- */ .quizsetup .row { margin-bottom: 14px; } .qcard { max-width: 720px; margin: 0 auto; } .qprogress { font-family: var(--sans); color: var(--muted); font-size: .8rem; letter-spacing: .04em; margin-bottom: 6px; display: flex; justify-content: space-between; } .qbar { height: 4px; border-radius: 99px; overflow: hidden; background: var(--track); margin-bottom: 14px; } .qbar i { display: block; height: 100%; background: var(--gilt); border-radius: 99px; transition: width .25s ease; } .qq { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); padding: 30px; text-align: center; margin-bottom: 16px; } .qq .q { font-size: 1.3rem; font-weight: 700; } .qq img.face { max-height: 240px; border: 1px solid var(--card-edge); border-radius: 4px; margin-bottom: 14px; } .choices { display: grid; gap: 10px; } .choices button { background: var(--card); border: 1px solid var(--card-edge); color: var(--ink); border-radius: 4px; padding: 13px 16px; font-size: 1.05rem; text-align: left; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); transition: all .15s ease; } .choices button:hover:not(:disabled) { border-color: var(--gilt); } .choices button.correct { border-color: var(--green); background: #e9efe3; box-shadow: inset 0 0 0 1px var(--green); } .choices button.wrong { border-color: var(--red); background: #f3e4dd; box-shadow: inset 0 0 0 1px var(--red); } /* typed answering in the quiz + mock */ .quiz-modebar { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .quiz-modebar .modenote { flex: 1 1 260px; color: var(--muted); font-style: italic; font-size: .88rem; margin-bottom: 2px; } /* quiz landing: what a mock quiz is made of */ .quiz-facts { margin-top: 22px; } .quiz-facts .qf-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .quiz-facts h3 { font-size: 1.12rem; } .quiz-facts .qf-shape { font-family: var(--sans); font-size: .74rem; color: var(--ink-soft); letter-spacing: .03em; } .qf-rounds { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; } .qf-rounds li { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--card-edge); border-radius: 999px; padding: 4px 11px; } .quiz-facts .qf-foot { color: var(--ink-soft); font-size: .9rem; font-style: italic; margin-top: 14px; } .quiz-facts .qf-foot b { font-style: normal; color: var(--gilt); } /* ---------- quiz nights (the real-world log) ---------- */ .quiz-nights { margin-top: 16px; } .quiz-nights .qf-foot { color: var(--ink-soft); font-size: .9rem; font-style: italic; margin-top: 12px; max-width: 62ch; } .nl-list { list-style: none; margin-top: 6px; } .nl-list li { display: flex; align-items: baseline; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--card-edge); cursor: pointer; } .nl-list li:hover { background: var(--plate); } .nl-date { flex: 0 0 auto; font-family: var(--sans); font-size: .74rem; color: var(--ink-soft); min-width: 92px; } .nl-venue { flex: 0 1 auto; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nl-weak { flex: 1 1 auto; font-family: var(--sans); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--red); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nl-score { flex: 0 0 auto; font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--gilt); font-variant-numeric: tabular-nums; } .nl-add { margin-top: 16px; text-align: center; } /* the entry form — kept to one screen so logging a night stays a 20-second job */ .nl-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .nl-row label.f { flex: 1 1 130px; } .nl-row input { width: 100%; } .nl-row label.f:nth-child(3), .nl-row label.f:nth-child(4) { flex: 0 1 84px; } .nl-label { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .nl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; } .nl-chip { cursor: pointer; } .nl-chip input { position: absolute; opacity: 0; pointer-events: none; } .nl-chip span { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--card-edge); color: var(--ink-soft); font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .06em; transition: all .15s ease; } .nl-chip:hover span { border-color: var(--gilt); color: var(--gilt); } .nl-chip input:checked + span { background: var(--red); border-color: var(--red); color: var(--card); } .nl-chip input:focus-visible + span { outline: 2px solid var(--gilt-soft); outline-offset: 2px; } /* questions that beat you — each row becomes a card */ .nl-opt { font-family: var(--serif); font-size: .82rem; font-style: italic; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink-soft); margin-left: 8px; } #nl-misses { display: grid; gap: 8px; margin-bottom: 10px; } .nl-miss { display: flex; gap: 8px; align-items: center; } .nl-miss input { min-width: 0; } .nl-miss-q { flex: 1 1 60%; } .nl-miss-a { flex: 1 1 30%; } .nl-miss-x { flex: 0 0 auto; padding: 6px 10px; font-size: 1rem; line-height: 1; border-color: transparent; color: var(--ink-soft); } .nl-miss-x:hover { color: var(--red); border-color: var(--red); } .nl-more { padding: 6px 12px; font-size: .69rem; margin-bottom: 18px; } .nl-misscount { flex: 0 0 auto; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .06em; color: var(--brass); border: 1px solid var(--card-edge); border-radius: 999px; padding: 1px 8px; } @media (max-width: 560px) { .nl-miss { flex-wrap: wrap; } .nl-miss-q, .nl-miss-a { flex: 1 1 100%; } } .nl-note { margin-bottom: 20px; } .nl-note input { width: 100%; } .nl-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .nl-spacer { flex: 1 1 auto; } /* what the log buys you, surfaced on Home */ .insight { margin-bottom: 22px; } .insight h3 { font-size: 1.15rem; margin-bottom: 2px; } .insight > p { color: var(--ink-soft); font-style: italic; font-size: .93rem; margin-bottom: 14px; } .insight-chips { display: flex; flex-wrap: wrap; gap: 9px; } .insight-chips .btn { padding: 7px 14px; font-size: .69rem; } .ins-n { color: var(--ink-soft); font-weight: 400; } /* the daily review + get-ahead pair, and the batch button's sub-label */ .cta-actions { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; align-items: stretch; } .cta .btn small { display: block; font-weight: 400; font-size: .68rem; opacity: .8; margin-top: 2px; } /* "Where you stand" — readiness by round */ .readiness { margin-bottom: 22px; } .readiness ul { list-style: none; } .rd-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid var(--rule-soft, rgba(255, 255, 255, .07)); } .rd-row:first-child { border-top: 0; } .rd-name { flex: 0 0 auto; min-width: 8.5rem; font-size: .92rem; } .rd-flag { display: inline-block; margin-left: 4px; font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--danger, #c0563f); } .rd-bar { flex: 1 1 auto; min-width: 60px; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .28); overflow: hidden; } .rd-bar i { display: block; height: 100%; border-radius: 4px; } .rd-bar .rd-hi { background: var(--good, #4c9a6a); } .rd-bar .rd-mid { background: var(--gilt, #c9a24b); } .rd-bar .rd-lo { background: var(--danger, #c0563f); } .rd-pct { flex: 0 0 2.6rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; } .rd-meta { flex: 0 0 5.5rem; text-align: right; color: var(--ink-soft); font-size: .78rem; } .rd-warn { color: var(--danger, #c0563f); font-weight: 600; } .rd-train { flex: 0 0 auto; padding: 5px 12px; font-size: .68rem; } .rd-foot { margin-top: 10px; } @media (max-width: 560px) { .rd-row { flex-wrap: wrap; gap: 8px 10px; } .rd-name { flex: 1 1 100%; min-width: 0; } .rd-bar { order: 3; flex: 1 1 100%; } .rd-meta { flex: 1 1 auto; text-align: left; } } .qq .q-answer { font-size: 1.2rem; font-weight: 700; color: var(--gilt); margin-top: 8px; } .qq .type-verdict { margin-top: 14px; } .qq .r-typed { color: var(--ink-soft); font-style: italic; font-size: .85rem; margin-top: 8px; } .q-override { margin-top: 10px; } #q-answer-area .type-row { margin-top: 0; } /* quiet way out of a round in progress — sits well below the answer controls */ .round-exit { text-align: center; margin-top: 26px; } .qfact { color: var(--muted); font-size: .95rem; margin-top: 12px; font-style: italic; text-align: center; } .qnext { text-align: center; margin-top: 16px; } .scoreline { font-size: 1.15rem; margin-bottom: 14px; } .misslist { margin-top: 10px; } .misslist li { margin: 6px 0 6px 18px; color: var(--ink-soft); } .misslist b { color: var(--ink); } /* ---------- music round ---------- */ .music-stage { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); padding: 34px 30px; text-align: center; margin-bottom: 16px; } /* the mystery is pressed on a spinning 45 — grooves, gilt centre label, spindle */ .vinyl { width: 224px; height: 224px; border-radius: 50%; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; background: repeating-radial-gradient(circle at 50% 50%, #191920 0 1px, #101014 1px 3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 44px rgba(0, 0, 0, .55); } .vinyl::before { /* faint reflective sheen that sweeps round as it spins */ content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, .09), transparent 22%, rgba(255, 255, 255, .04) 50%, transparent 78%, rgba(255, 255, 255, .09)); } .vinyl-label { width: 45%; height: 45%; border-radius: 50%; overflow: hidden; z-index: 1; background: var(--gilt-fill); color: var(--on-gilt); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .14); } .vinyl-label img { width: 100%; height: 100%; object-fit: cover; display: block; } .vinyl-q { font-family: var(--serif); font-size: 2.7rem; font-weight: 700; line-height: 1; } .vinyl.spinning { animation: spin 2.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* player-style control bar: play/pause · progress · countdown */ .music-controls { display: flex; align-items: center; gap: 14px; max-width: 380px; margin: 26px auto 0; } .music-playbtn { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%; background: var(--gilt-fill); border: none; color: var(--on-gilt); display: inline-flex; align-items: center; justify-content: center; transition: transform .12s ease, background .15s ease; } .music-playbtn:hover { background: var(--gilt-fill-hover); transform: scale(1.05); } .music-playbtn svg { width: 26px; height: 26px; display: block; } .music-playbtn .ic-pause { display: none; } .music-playbtn.playing .ic-play { display: none; } .music-playbtn.playing .ic-pause { display: block; } .music-bar { flex: 1 1 auto; height: 6px; background: var(--bar-track); border-radius: 99px; overflow: hidden; } .music-bar i { display: block; height: 100%; width: 0; background: var(--gilt); } .music-time { flex: 0 0 auto; min-width: 30px; text-align: right; font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .music-hint { font-family: var(--sans); color: var(--ink-soft); font-size: .78rem; letter-spacing: .03em; margin-top: 16px; } /* reveal */ .music-reveal .r-verdict { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-top: 18px; } .music-reveal .r-title { font-size: 1.35rem; font-weight: 700; margin-top: 6px; } .music-reveal .r-sub { color: var(--ink-soft); font-family: var(--sans); font-size: .84rem; letter-spacing: .03em; margin-top: 6px; } .music-reveal .r-typed { color: var(--muted); font-style: italic; font-size: .82rem; margin-top: 8px; } @media (max-width: 560px) { .vinyl { width: 180px; height: 180px; } } /* typed answer inputs */ .music-inputs { display: flex; gap: 14px; margin-bottom: 14px; } .music-inputs label.f { flex: 1 1 0; } .music-inputs input { background: var(--card); color: var(--ink); border: 1px solid var(--field-edge); border-radius: 3px; padding: 11px 12px; font-family: var(--serif); font-size: 1.05rem; } .music-inputs input:focus { outline: none; border-color: var(--gilt); } .music-actions { display: flex; gap: 10px; justify-content: center; } .fm-ok { color: var(--green); font-weight: 700; } .fm-no { color: var(--red); font-weight: 700; } @media (max-width: 560px) { .music-inputs { flex-direction: column; } } /* ---------- anagrams ---------- */ .anagram-stage { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); padding: 30px 26px; text-align: center; margin-bottom: 16px; } .anag-theme { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; } .anag-jumble { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 0; margin: 6px 0 14px; } .anag-word { display: flex; gap: 7px; } .anag-gap { width: 26px; } .anag-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 46px; border: 1px solid var(--card-edge); border-radius: 4px; background: var(--plate); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--ink); } .anag-tile.lit { background: var(--gilt-fill); color: var(--on-gilt); border-color: var(--gilt-fill); } /* hint skeleton: smaller tiles, first letter filled, rest blank dashed slots */ .anag-skeleton { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 0; margin: 0 0 14px; } .anag-skeleton .anag-word { gap: 5px; } .anag-tile.sm { width: 28px; height: 32px; font-size: 1rem; } .anag-tile.blank { background: transparent; border-style: dashed; box-shadow: none; } .anag-clue { font-family: var(--sans); color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; } .anag-revealed .anag-answer { font-size: 1.5rem; font-weight: 700; margin: 4px 0 8px; } .anag-answer.good { color: var(--green); } .anag-answer.bad { color: var(--red); } .mock-anag { letter-spacing: .18em; text-transform: uppercase; } @media (max-width: 560px) { .anag-tile { width: 32px; height: 38px; font-size: 1.2rem; } .anag-word { gap: 5px; } .anag-gap { width: 16px; } } /* ---------- connections ---------- */ .conn-stage { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); padding: 30px 26px; text-align: center; margin-bottom: 16px; } .conn-eyebrow { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; } /* the four answers as a stack of plates — reads as a list to solve, not prose */ .conn-items { list-style: none; display: grid; gap: 8px; max-width: 420px; margin: 0 auto; } .conn-items li { background: var(--plate); border: 1px solid var(--card-edge); border-radius: 4px; padding: 11px 14px; font-size: 1.12rem; font-weight: 700; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06); } .conn-items.revealed li { font-size: 1rem; font-weight: 400; color: var(--ink-soft); } .conn-hint { font-family: var(--sans); color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; margin-top: 16px; } .conn-revealed .conn-answer { font-size: 1.5rem; font-weight: 700; margin: 4px 0 16px; } .conn-answer.good { color: var(--green); } .conn-answer.bad { color: var(--red); } .conn-detail { color: var(--ink-soft); font-size: .92rem; margin-top: 16px; max-width: 480px; margin-left: auto; margin-right: auto; } .mock-conn { display: block; margin-top: 10px; color: var(--gilt); } @media (max-width: 560px) { .conn-stage { padding: 24px 16px; } .conn-items li { font-size: 1rem; padding: 9px 12px; } } /* ---------- faces browse ---------- */ .facegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .facecard { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); overflow: hidden; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .facecard:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 1px var(--gilt); } .facecard img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-bottom: 1px solid var(--card-edge); } .facecard .fc-name { padding: 8px 10px 2px; font-size: .92rem; font-weight: 700; } .facecard .fc-sub { padding: 0 10px 9px; font-family: var(--sans); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- sub-navigation (hubs: Study, Library) ---------- */ .subnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 22px; } .subnav-btn { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent; padding: 10px 16px; margin-bottom: -1px; cursor: pointer; transition: color .15s ease; } .subnav-btn:hover { color: var(--text); } .subnav-btn.active { color: var(--gilt-soft); border-bottom-color: var(--gilt); } .subpanel { display: none; } .subpanel.active { display: block; animation: fade .2s ease; } /* Which round, once you are on the Rounds tab. Pills rather than a second row of underlined tabs, so it reads as a choice inside this tab and not as another level of navigation. */ /* `display: flex` outranks the hidden attribute's UA rule, so say so here — otherwise the picker follows you onto the tabs that have no rounds */ .round-picker[hidden] { display: none; } .round-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 22px; } .round-picker button { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 15px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .round-picker button:hover { color: var(--text); border-color: var(--gilt-soft); } .round-picker button.active { background: var(--gilt-fill); border-color: var(--gilt-fill); color: var(--on-gilt); } /* the map frame sits under an extra sub-nav bar, so a touch shorter */ #study-maps .mapframe { height: calc(100vh - 190px); } main:has(#study-maps.active) { max-width: none; padding: 14px 16px 20px; } /* ---------- mock pub quiz ---------- */ .mock-roundno { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); } .mock-roundname { font-size: 1.8rem; font-weight: 700; margin-top: 4px; } .mock-scorecard { text-align: left; max-width: 360px; margin: 14px auto 0; } .mock-scorecard .row-line { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 2px; border-top: 1px solid var(--card-edge); } /* ---------- news ---------- */ .news-masthead { margin-bottom: 20px; } .news-masthead h1 { font-size: clamp(24px, 4vw, 36px); } .news-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .news-count { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .news-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .news-weekwrap select { max-width: 260px; } .news-scheduled { font-family: var(--sans); font-size: .76rem; color: var(--muted); letter-spacing: .03em; margin: -8px 0 18px; } .news-cat { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* featured lead story: gilt inset frame + larger headline */ .news-lead-card { box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--gilt-soft); padding: 22px 24px; margin-bottom: 26px; } .news-lead-card .n-q { font-size: 1.4rem; line-height: 1.3; } .news-lead-card .n-a { font-size: 1.2rem; } .n-eyebrow { font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gilt); margin-bottom: 8px; } .news-item { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s ease; } .news-item:hover { border-color: var(--gilt); } .news-item .n-q { font-size: 1.08rem; font-weight: 700; } .news-item .n-a { color: var(--gilt); font-weight: 700; font-size: 1.05rem; margin-top: 10px; } .news-item .n-d { color: var(--ink-soft); font-size: .92rem; margin-top: 4px; } .news-item .n-hide { display: none; } .news-item.revealed .n-hide { display: block; animation: fade .2s ease; } .news-item .n-tap { font-family: var(--sans); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; } .news-item.revealed .n-tap { display: none; } .news-note { color: var(--muted); font-size: .8rem; font-style: italic; margin-top: 22px; max-width: 620px; } /* ---------- maps ---------- */ .mapframe { width: 100%; height: calc(100vh - 130px); min-height: 560px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--wall-deep); display: block; } /* ---------- the reference surface (opened from the deck it supports) ---------- */ /* the link that sits on a deck row — must not read as part of the deck name */ .deck-ref { background: transparent; border: 1px solid var(--card-edge); border-radius: 999px; color: var(--ink-soft); padding: 2px 10px; margin-left: 10px; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; transition: all .15s ease; } .deck-ref:hover { border-color: var(--gilt); color: var(--gilt); } /* ---------- daily brief ---------- */ /* deliberately below the review call-to-action: a reason to open the app on a day you don't fancy reviewing, never a way to avoid it. The week's news card sits alongside it on the same terms, and wears the same clothes. */ .brief-card, .news-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; margin-bottom: 26px; } .brief-card:hover, .news-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px var(--gilt); } .bc-eyebrow { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gilt); margin-bottom: 7px; } .brief-card h3, .news-card h3 { font-size: 1.32rem; line-height: 1.25; margin-bottom: 5px; } .brief-card p, .news-card p { color: var(--ink-soft); font-size: .98rem; max-width: 64ch; } .bc-go { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); } .briefwrap { max-width: 760px; margin: 0 auto; } .brief-masthead { margin-bottom: 22px; } .brief-masthead h1 { font-size: clamp(26px, 4.4vw, 40px); } .brief-article { padding: 38px 42px; } .brief-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; } .brief-loading { color: var(--muted); font-style: italic; text-align: center; padding: 40px 0; } @media (max-width: 640px) { .brief-article { padding: 24px 20px; } } /* reading — measure the column and give it room to breathe. Named for the primers that are gone; the daily brief still uses every rule below. */ .primer { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); padding: 34px 38px; } .primer > * + * { margin-top: 14px; } .primer p { max-width: 68ch; font-size: 1.04rem; line-height: 1.66; } .primer h3 { font-size: 1.22rem; font-weight: 700; color: var(--ink); margin-top: 26px; padding-top: 4px; } .primer h3:first-child { margin-top: 0; } .primer ul { list-style: none; max-width: 68ch; } .primer li { position: relative; padding-left: 18px; margin: 7px 0; } .primer li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 5px; height: 5px; background: var(--gilt); transform: rotate(45deg); } .primer em { font-style: italic; } .primer-foot { color: var(--muted); font-style: italic; font-size: .9rem; margin-top: 18px; text-align: center; } @media (max-width: 640px) { .primer { padding: 24px 20px; } .primer p { font-size: 1rem; } } .doc-bar { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; } .doc-bar .btn { flex: 0 0 auto; margin-top: 3px; } .doc-head { flex: 1 1 320px; min-width: 0; } .doc-title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .doc-sub { color: var(--muted); font-style: italic; font-size: .92rem; margin-top: 2px; } @media (max-width: 640px) { .deck-ref { margin-left: 8px; } } /* ---------- modal ---------- */ .modal-back { position: fixed; inset: 0; background: var(--scrim); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--gilt-soft); max-width: 560px; width: 100%; max-height: 85vh; overflow: auto; padding: 26px; } .modal img.face { max-width: 200px; border: 1px solid var(--card-edge); border-radius: 4px; float: right; margin: 0 0 12px 14px; } .modal h3 { color: var(--ink); font-size: 1.3rem; margin-bottom: 8px; } .modal p { margin-bottom: 10px; font-size: .95rem; } .modal .muted { color: var(--ink-soft); font-style: italic; } .modal a { color: var(--blue); } .modal-wide { max-width: 640px; } /* ---------- your own decks ---------- */ .imports { padding: 16px 18px 18px; } .imp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .imp-head h3 { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } .imp-list { list-style: none; margin-top: 14px; } .imp-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--card-edge); } .imp-name { font-weight: 700; } .imp-meta { color: var(--ink-soft); font-size: .82rem; flex: 1; } .imp-del { font-size: .78rem; padding: 4px 10px; } .imp-foot, .imp-lede { color: var(--ink-soft); font-style: italic; font-size: .88rem; margin-top: 10px; line-height: 1.55; } .imp-lede { margin-bottom: 16px; } :root[data-plain="1"] .imp-foot, :root[data-plain="1"] .imp-lede { font-style: normal; color: var(--ink); } /* Stack the label above its input, as every field outside a modal does. This was `display: block`, which left each label sitting beside its own box at whatever width the browser chose — patched once for the auth dialog before it became clear the rule itself was the problem. */ .modal .f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .modal .f input, .modal .f select { width: 100%; } .modal textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; line-height: 1.5; padding: 10px 12px; background: var(--plate); color: var(--ink); border: 1px solid var(--field-edge); border-radius: var(--radius); resize: vertical; } .modal textarea:focus, .modal .f input:focus { outline: 2px solid var(--gilt); outline-offset: 1px; } .imp-count { font-size: .85rem; color: var(--ink-soft); min-height: 1.2em; } .imp-count.bad { color: var(--red); } .imp-file input { font-size: .85rem; } /* ---------- toasts ---------- */ #toast-root { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: 90vw; } .toast { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 4px; box-shadow: 0 4px 18px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--sheen); padding: 10px 18px; font-family: var(--sans); font-size: .85rem; font-weight: 600; animation: toast-in .2s ease; } .toast.out { opacity: 0; transition: opacity .35s ease; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } } @media (max-width: 640px) { :root { --topbar: 100px; } /* the nav wraps onto a second row down here */ header.top { padding: 10px 12px; gap: 12px; } /* logo and the gear share the top row; the nav wraps beneath them */ nav.main { order: 3; width: 100%; gap: 5px; } .iconbtn { order: 2; } nav.main button { padding: 7px 10px; letter-spacing: .08em; } .statgrid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; } .stat { padding: 12px 10px; } .stat .n { font-size: 1.5rem; } /* the three due counts belong side by side — auto-fit left one orphaned */ .statband-due .statgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .statband-due .stat { padding: 11px 5px; } .statband-due .stat .l { font-size: .58rem; letter-spacing: .05em; } .flashcard { padding: 26px 18px; } .kbd-hint { display: none; } /* no keyboard to hint at */ /* hub sub-tabs: drop the icons and tighten so all four fit one row rather than spilling a lone tab onto a ragged second line */ .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } .subnav-btn { flex: 1 0 auto; padding: 10px 4px; font-size: .63rem; letter-spacing: .02em; text-align: center; } .subnav-btn .ic { display: none; } /* five columns in 375px forced a sideways scroll that hid Progress entirely, and long deck names stacked five lines deep. Below this width each deck becomes a card: name on its own line, counts as a labelled strip. */ .decktable, .decktable tbody { display: block; } .decktable tr.headrow { display: none; } .decktable tr.grouprow, .decktable tr.deckrow { display: block; } .decktable tr.grouprow td, .decktable tr.deckrow td { display: block; border: none; padding: 0; } .decktable tr.grouprow td { padding: 18px 0 8px !important; } .decktable tr.deckrow { padding: 12px 2px; border-bottom: 1px solid var(--card-edge); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } .decktable td.dname { flex: 1 0 100%; font-size: 1rem; font-weight: 700; line-height: 1.25; } .decktable td.num { flex: 0 0 auto; text-align: left; font-size: .82rem; } .decktable td.num::before { content: attr(data-l); margin-right: 5px; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .decktable td.dprog { flex: 1 1 110px; } .decktable td.dprog .prog { min-width: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Arriving from a password-reset link: the panel that takes over until a new password is set. Gilt border so it reads as "this needs you", not a form you happen to be near. */ .acct-recovery { border-color: var(--gilt); } /* The account form's secondary routes in — a magic link, a password reset. They were sitting in the same row as Sign in and Create an account, four undifferentiated actions with no sense of which was the ordinary one. */ .acct-alts { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; } .acct-alts .linklike { font-size: .82rem; } /* The auth dialog — one place for signing in, signing up and social. */ .auth-modal { max-width: 420px; } .auth-modal h3 { margin-bottom: 4px; } .auth-modal .muted { margin-bottom: 18px; font-size: .9rem; } .auth-sso { display: grid; gap: 8px; } .auth-sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; font-size: .74rem; } .auth-sso-btn svg { flex: 0 0 auto; } /* a rule with the word set into it, rather than a bare line */ .auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; } .auth-or::before, .auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--card-edge); } .auth-or span { font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .auth-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .auth-actions .btn { flex: 1 1 auto; } .auth-alts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--card-edge); } .auth-alts .linklike { font-size: .82rem; } .auth-legal { margin-top: 14px; font-size: .74rem; color: var(--ink-soft); } .auth-legal a { color: inherit; } /* Closing the account. Kept quiet and out of the way of the daily actions — it is a thing you go looking for, not something to trip over. */ .acct-danger { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--card-edge); } .acct-danger .linklike { color: var(--red); font-size: .82rem; } .btn.danger { border-color: var(--red); color: var(--red); } .btn.danger:hover:not(:disabled) { background: var(--red); color: var(--plate); border-color: var(--red); } /* ---------- ai draft review ---------- */ .imp-actions { display: flex; gap: 8px; flex-wrap: wrap; } .dr-list { max-height: 46vh; overflow: auto; display: grid; gap: 12px; margin: 14px 0; padding-right: 4px; } .dr-item { border: 1px solid var(--card-edge); border-radius: 8px; padding: 10px 12px; } .dr-item .f { margin-top: 6px; } .dr-meta { display: flex; justify-content: space-between; align-items: center; }