/* ============================================================ Babel — design system · "catalogue as instrument" ------------------------------------------------------------ The single shared foundation imported by every page. Tokens (:root) are global and harmless. Every component rule is scoped under `body.babel`, so this file is INERT on pages that have not yet opted in (their lacks the class). That lets the system coexist with the legacy main.css while pages are migrated one at a time. Reference: babel-corpus-redesign.html + babel-style-guide.md ============================================================ */ /* ---------- 2. Tokens (global) ----------------------------- */ :root{ /* surfaces */ --paper:#FAFAF8; /* page background */ --surface:#FFFFFF; /* cards, inputs, raised elements */ --row-hover:#FCFCFB; /* row / list-item hover */ /* ink */ --ink:#17181B; /* primary text, titles */ --ink-soft:#595D63; /* secondary text, inactive nav */ --ink-faint:#8C9097; /* metadata, placeholders, captions */ /* lines */ --line:#E8E7E2; /* primary hairline */ --line-soft:#F1F0EC; /* secondary hairline, chip fills */ /* accent — the ONLY interactive colour */ --accent:#1D3B53; --accent-deep:#16314A; /* accent hover */ --accent-weak:#E9F0F2; /* active facet bg, badge bg */ /* signals */ --ochre:#B47B2B; /* rating meter ONLY */ --danger:#9B3535; /* destructive action, on hover only */ /* radius */ --r:8px; /* buttons, inputs, search */ --r-card:12px; /* cards, composer panel */ --r-chip:4px; /* theme tags */ /* type */ --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; /* spacing scale */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:18px; --s6:26px; --s7:34px; --s8:40px; } /* ---------- base ------------------------------------------- */ body.babel{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; } body.babel a{color:inherit;text-decoration:none} body.babel .mono{font-family:var(--mono)} body.babel .eyebrow{ font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-faint); } body.babel .serif{font-family:var(--serif)} body.babel .page-title{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 22px} body.babel .section-title{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.2;letter-spacing:-.005em;color:var(--ink);margin:0 0 12px} /* visible keyboard focus (quality floor — the reference omits this) */ body.babel :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; } /* ---------- top bar ---------------------------------------- */ body.babel .topbar{ display:flex;align-items:center;gap:28px; padding:18px 40px;border-bottom:1px solid var(--line); background:rgba(250,250,248,.85);backdrop-filter:saturate(1.2) blur(6px); position:sticky;top:0;z-index:20; } body.babel .brand{display:flex;align-items:baseline;gap:10px;flex:0 0 auto} body.babel .brand .word{font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:-.01em;font-optical-sizing:auto} body.babel .brand .tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;border-left:1px solid var(--line);padding-left:10px;align-self:center} body.babel .topbar nav{display:flex;align-items:center;gap:22px;margin-left:8px} body.babel .topbar nav a{color:var(--ink-soft);font-weight:500;font-size:13.5px;padding-bottom:3px;border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px} body.babel .topbar nav a:hover{color:var(--ink)} body.babel .topbar nav a.active{color:var(--ink);border-bottom-color:var(--accent)} body.babel .spacer{flex:1} /* account dropdown — Settings / [Admin] / Sign out (built by nav.js) */ body.babel .nav-account{position:relative} body.babel .nav-account>summary{ list-style:none;cursor:pointer;color:var(--ink-soft);font-weight:500;font-size:13.5px; padding-bottom:3px;border-bottom:2px solid transparent; display:flex;align-items:center;gap:6px; } body.babel .nav-account>summary::-webkit-details-marker{display:none} body.babel .nav-account>summary::after{content:"\25BE";font-size:9px;color:var(--ink-faint)} body.babel .nav-account>summary:hover{color:var(--ink)} body.babel .nav-account>summary.active{color:var(--ink);border-bottom-color:var(--accent)} body.babel .nav-account[open]>summary{color:var(--ink)} body.babel .nav-account-menu{ position:absolute;top:calc(100% + 9px);right:0;min-width:152px;z-index:30; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 8px 28px rgba(23,24,27,.10);padding:5px; display:flex;flex-direction:column; } body.babel .nav-account-menu a{ color:var(--ink-soft);font-weight:500;font-size:13.5px; padding:8px 11px;border-radius:6px;border-bottom:0;white-space:nowrap; } body.babel .nav-account-menu a:hover{background:var(--row-hover);color:var(--ink)} /* nav inbox badge — injected by nav.js as .nav-badge (replaces amber bubble) */ body.babel .nav-badge{ font-family:var(--mono);font-size:11px;font-weight:500; background:var(--accent-weak);color:var(--accent); border-radius:999px;padding:1px 7px;min-width:0;height:auto;margin-left:2px; display:inline-block;line-height:1.5; } /* standalone badge (Inbox page count) */ body.babel .badge{ font-family:var(--mono);font-size:11px;font-weight:500; background:var(--accent-weak);color:var(--accent); border-radius:999px;padding:1px 7px;display:inline-block; } /* ---------- buttons ---------------------------------------- */ body.babel .tbtn{ font-family:var(--sans);font-weight:600;font-size:13px; border:1px solid var(--line);background:var(--surface);color:var(--ink); border-radius:var(--r);padding:7px 15px;cursor:pointer; display:inline-flex;align-items:center;gap:7px;white-space:nowrap; transition:border-color .12s,background .12s,color .12s; } body.babel .tbtn:hover{border-color:#D7D6D0} body.babel .tbtn.solid{background:var(--accent);border-color:var(--accent);color:#fff} body.babel .tbtn.solid:hover{background:var(--accent-deep);border-color:var(--accent-deep)} body.babel .tbtn.danger:hover{border-color:var(--danger);color:var(--danger)} body.babel .tbtn:disabled{opacity:.5;cursor:not-allowed} /* ---------- page wrap -------------------------------------- */ body.babel .wrap{max-width:1480px;margin:0 auto;padding:26px 40px 80px} /* ---------- add-paper composer ----------------------------- */ body.babel .composer{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); padding:16px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap; } body.babel .composer .eyebrow{flex:0 0 auto;margin-right:4px} body.babel .field{ flex:1 1 360px;min-width:220px;display:flex;align-items:center; background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:0 12px;margin:0; } body.babel .field input{border:0;background:transparent;outline:0;width:100%;padding:10px 0;font-family:var(--mono);font-size:13px;color:var(--ink)} body.babel .field input::placeholder{color:var(--ink-faint)} body.babel select.kind{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:9px 12px;color:var(--ink);cursor:pointer} /* preview card (Find → preview) */ body.babel .preview{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:none} body.babel .preview.visible{display:block} body.babel .preview-title{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.25;letter-spacing:-.005em;color:var(--ink);margin-bottom:4px} body.babel .preview-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);margin-bottom:10px} body.babel .preview-abstract{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px;max-height:140px;overflow-y:auto} body.babel .preview .keyfield{max-width:340px;margin-bottom:14px} body.babel .preview .keyfield label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px} body.babel .preview-actions{display:flex;gap:8px;flex-wrap:wrap} /* ---------- search ----------------------------------------- */ body.babel .search{margin:14px 0 22px;display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 14px} body.babel .search svg{flex:0 0 auto;color:var(--ink-faint)} body.babel .search input{border:0;outline:0;background:transparent;width:100%;padding:13px 12px;font-size:14.5px;color:var(--ink)} body.babel .search input::placeholder{color:var(--ink-faint)} /* ---------- work-area grid --------------------------------- */ body.babel .grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;align-items:start} /* ---------- facet rail ------------------------------------- */ body.babel .facets{position:sticky;top:88px} body.babel .facet-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px} body.babel .facet-head .clear{font-family:var(--mono);font-size:11px;color:var(--accent);background:none;border:0;cursor:pointer;padding:0} body.babel .facet-head .clear:hover{color:var(--accent-deep)} body.babel .facet-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:18px 0 8px} body.babel .filter-themes{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0 9px;margin-bottom:8px} body.babel .filter-themes input{border:0;outline:0;background:transparent;width:100%;padding:7px 6px;font-family:var(--mono);font-size:12px} body.babel .filter-themes input::placeholder{color:var(--ink-faint)} /* facet list item — tick · name · count */ body.babel .opt{display:flex;align-items:center;gap:9px;padding:4.5px 4px;cursor:pointer;border-radius:5px} body.babel .opt:hover{background:var(--line-soft)} body.babel .tick{width:14px;height:14px;border:1.5px solid #C9C8C2;border-radius:4px;flex:0 0 auto;display:grid;place-items:center} body.babel .opt.on .tick{background:var(--accent);border-color:var(--accent)} body.babel .opt.on .tick svg{display:block} body.babel .tick svg{display:none;color:#fff} body.babel .opt .name{flex:1;font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.babel .opt.on .name{color:var(--ink);font-weight:500} body.babel .opt .ct{font-family:var(--mono);font-size:11px;color:var(--ink-faint)} body.babel .showall{font-family:var(--mono);font-size:11.5px;color:var(--accent);background:none;border:0;padding:6px 4px;cursor:pointer} body.babel .showall:hover{color:var(--accent-deep)} /* native-checkbox facet row (PDF filter) */ body.babel .optbox{display:flex;align-items:center;gap:9px;padding:4.5px 4px;cursor:pointer;border-radius:5px;font-size:13px;color:var(--ink-soft)} body.babel .optbox:hover{background:var(--line-soft)} body.babel .optbox input{accent-color:var(--accent);width:14px;height:14px;margin:0;cursor:pointer;flex:0 0 auto} /* range inputs (rating / year) */ body.babel .range-row{display:flex;align-items:center;gap:8px} body.babel .num{width:100%;min-width:0;font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 9px;color:var(--ink);outline:0} body.babel .num:focus{border-color:var(--accent)} body.babel .range-sep{color:var(--ink-faint);font-size:12px;flex:0 0 auto} /* data selects (country, read-status, sort) */ body.babel select.sel{width:100%;font-family:var(--sans);font-size:13px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 10px;color:var(--ink);cursor:pointer;outline:0} body.babel select.sel:focus{border-color:var(--accent)} /* facet text input (e.g. Authors affiliation filter) */ body.babel .facet-input{width:100%;font-family:var(--sans);font-size:13px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 10px;color:var(--ink);outline:0} body.babel .facet-input:focus{border-color:var(--accent)} body.babel .facet-input::placeholder{color:var(--ink-faint)} /* ---------- list header + meta ----------------------------- */ body.babel .listmeta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px} body.babel .listmeta .count{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)} /* shared grid template for header + rows. --row-tpl lets each page define its own columns; default = Corpus. */ body.babel .cols, body.babel .row{ display:grid; grid-template-columns:var(--row-tpl, 34px minmax(0,1fr) 58px 224px 96px 62px 64px 38px); gap:18px; } body.babel .cols{align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)} body.babel .cols .h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:5px} body.babel .cols .h[data-col]{cursor:pointer} body.babel .cols .h[data-col]:hover{color:var(--ink-soft)} body.babel .sort-indicator{font-size:9px;color:var(--ink-faint)} body.babel .sort-indicator.active{color:var(--accent)} /* ---------- data row --------------------------------------- */ body.babel .row{align-items:start;padding:16px 4px;border-bottom:1px solid var(--line-soft);position:relative} body.babel .row:hover{background:var(--row-hover)} body.babel .idx{font-family:var(--mono);font-size:11px;color:var(--ink-faint);padding-top:3px;border-left:2px solid var(--line);padding-left:11px;margin-left:-2px} body.babel .row:hover .idx{border-left-color:var(--accent)} body.babel .titlecell{min-width:0} body.babel .title{font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:16.5px;line-height:1.28;letter-spacing:-.005em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.babel a.title:hover{color:var(--accent)} body.babel .read-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:transparent;border:1.5px solid #C9C8C2;flex:0 0 auto;vertical-align:middle;margin-right:7px} body.babel .read-dot--read{background:var(--accent);border-color:var(--accent)} body.babel .byline{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.babel .yr{font-family:var(--mono);font-size:13px;color:var(--ink-soft);padding-top:3px} body.babel .themes{display:flex;flex-wrap:wrap;gap:5px;padding-top:1px} body.babel .chip{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);background:var(--line-soft);border-radius:var(--r-chip);padding:2.5px 7px;white-space:nowrap} body.babel .more{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);padding:2.5px 2px} body.babel .untagged{font-family:var(--mono);font-size:11px;color:var(--ink-faint);padding-top:3px} body.babel .emptycell{font-family:var(--mono);font-size:13px;color:var(--ink-faint);padding-top:3px} /* generic text cell (Authors: affiliation, location, focus) */ body.babel .cell{font-size:13px;color:var(--ink-soft);line-height:1.42;padding-top:2px;min-width:0;overflow-wrap:anywhere} body.babel .cell.faint{font-family:var(--mono);color:var(--ink-faint)} /* mono citation-key links (Authors: papers in corpus) */ body.babel .keys{display:flex;flex-wrap:wrap;gap:3px 8px;padding-top:2px;min-width:0} body.babel .kkey{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);word-break:break-all} body.babel a.kkey:hover{color:var(--accent)} /* mono co-author list (Authors: shared with) */ body.babel .colist{font-family:var(--mono);font-size:11px;color:var(--ink-faint);line-height:1.5;padding-top:2px;min-width:0} /* rating meter (the one place ochre appears) — display only */ body.babel .rating{display:flex;gap:3px;padding-top:5px} body.babel .meter{display:inline-flex;gap:3px} body.babel .tickr{width:3px;height:13px;border-radius:1px;background:var(--line);display:inline-block} body.babel .tickr.on{background:var(--ochre)} body.babel .cited{font-family:var(--mono);font-size:13px;color:var(--ink);padding-top:3px} body.babel .src{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.babel .recv{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);padding-top:3px;white-space:nowrap} /* PDF mono state (replaces green/grey chips) */ body.babel .pdf{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);padding-top:3px;white-space:nowrap} body.babel a.pdf:hover{color:var(--accent)} body.babel .pdf.muted{color:var(--ink-faint)} /* delete — fades in on hover, reddens only on its own hover */ body.babel .del{background:none;border:0;cursor:pointer;color:var(--ink-faint);padding:2px;border-radius:5px;opacity:0;transition:opacity .12s;justify-self:end} body.babel .row:hover .del{opacity:1} body.babel .del:hover{color:var(--danger);background:#FBEFEF} body.babel .del:focus-visible{opacity:1} /* empty / loading state for the list */ body.babel .empty{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);padding:22px 4px} body.babel .empty a{color:var(--accent)} /* ---------- long-form reading view (Synthesis) ------------- */ body.babel .reading{font-size:15.5px;line-height:1.6;color:var(--ink);max-width:68ch} body.babel .reading h1, body.babel .reading h2, body.babel .reading h3{font-family:var(--serif);font-weight:500;letter-spacing:-.005em;color:var(--ink);line-height:1.25} body.babel .reading h1{font-size:23px;margin:1.2em 0 .5em} body.babel .reading h2{font-size:20px;margin:1.4em 0 .5em} body.babel .reading h3{font-size:17px;margin:1.3em 0 .4em} body.babel .reading > *:first-child{margin-top:0} body.babel .reading p{margin:0 0 1em} body.babel .reading a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} /* inline corpus citation keys → mono */ body.babel .reading a[href^="/paper.html"]{font-family:var(--mono);font-size:.92em;text-decoration:none} body.babel .reading a[href^="/paper.html"]:hover{text-decoration:underline} body.babel .reading code{font-family:var(--mono);font-size:.9em;background:var(--line-soft);padding:.1em .35em;border-radius:3px} body.babel .reading em{font-style:italic} body.babel .reading ul, body.babel .reading ol{padding-left:1.3em;margin:.3em 0 1em} body.babel .reading li{margin:.2em 0} /* ---------- generic card (Discover result cards) ----------- */ body.babel .gcard{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); padding:18px 20px; } body.babel .gcard:hover{border-color:#D7D6D0;background:var(--row-hover)} body.babel .gcard .gtitle{font-family:var(--serif);font-weight:500;font-size:16.5px;line-height:1.28;letter-spacing:-.005em;color:var(--ink)} body.babel .gcard .gbyline{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:6px} body.babel .gcard .gbody{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:10px} /* ---------- back link (paper / author detail) ------------- */ body.babel .backlink{font-family:var(--mono);font-size:11.5px;color:var(--accent);display:inline-block} body.babel .backlink:hover{color:var(--accent-deep)} /* ---------- discover / related candidate cards ------------- */ body.babel .candidate-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;margin-bottom:12px} body.babel .candidate-card:hover{border-color:#D7D6D0;background:var(--row-hover)} body.babel .candidate-card-title{font-family:var(--serif);font-weight:500;font-size:16.5px;line-height:1.28;letter-spacing:-.005em;color:var(--ink);margin:0 0 6px} body.babel .candidate-card-meta{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-bottom:10px} body.babel .candidate-scores{display:flex;gap:16px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-bottom:10px} body.babel .candidate-scores strong{color:var(--ink);font-weight:500} body.babel .candidate-abstract{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:10px} body.babel .candidate-explanation{font-size:13.5px;color:var(--ink);line-height:1.55;margin-bottom:10px} body.babel .candidate-links{font-family:var(--mono);font-size:11px;margin-bottom:8px} body.babel .candidate-links a{color:var(--ink-faint)} body.babel .candidate-links a:hover{color:var(--accent)} body.babel .candidate-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} body.babel .card-error{font-size:12px;color:var(--danger);margin-top:6px} @keyframes babelFadeSlideOut{to{opacity:0;max-height:0;padding:0;margin:0;overflow:hidden}} body.babel .card-removing{animation:babelFadeSlideOut .3s ease forwards} @media (prefers-reduced-motion:reduce){body.babel .card-removing{animation:none}} /* ---------- paper detail page ------------------------------ */ body.babel .paper-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} /* legacy .card chrome → token chrome (no heavy shadow) */ body.babel .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none} body.babel #paper-title{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.005em;color:var(--ink);margin:0 0 6px} body.babel .card-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);line-height:1.5} body.babel .card-meta a{color:var(--ink-soft)} body.babel .card-meta a:hover{color:var(--accent)} /* rating stars → ochre (editable; recoloured, not restructured) */ body.babel #rating-stars .star{color:var(--line);font-size:15px} body.babel #rating-stars .star.filled{color:var(--ochre)} body.babel #rating-stars .star:hover{color:var(--ochre)} /* note + section cards */ body.babel .note-card-title, body.babel .note-section-label{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)} body.babel .note-card-body{font-size:14.5px;line-height:1.58;color:var(--ink)} body.babel .note-card-body > *:first-child{margin-top:0} body.babel .note-card-body > *:last-child{margin-bottom:0} body.babel .note-card-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} body.babel .note-card-body a[href^="/paper.html"]{font-family:var(--mono);font-size:.92em;text-decoration:none} body.babel .note-card-body a[href^="/paper.html"]:hover{text-decoration:underline} body.babel .note-card-body code{font-family:var(--mono);font-size:.9em;background:var(--line-soft);padding:.1em .35em;border-radius:3px} body.babel .note-card-body ul, body.babel .note-card-body ol{padding-left:1.25rem;margin:.3em 0 .6em} body.babel .note-edit-btn, body.babel #edit-chat-insights-link, body.babel #edit-ids-link{color:var(--ink-faint);text-decoration:none} body.babel .note-edit-btn:hover, body.babel #edit-chat-insights-link:hover, body.babel #edit-ids-link:hover{color:var(--accent)} body.babel .note-edited-badge{font-family:var(--mono);font-size:10px;color:var(--ink-faint)} body.babel .lens-panel h2, body.babel #related-papers-section h2{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:-.005em;color:var(--ink)} body.babel #paper-themes .chip{margin-right:0} body.babel #related-in-corpus a{color:var(--accent)} body.babel #paper-doi a, body.babel #paper-arxiv a{color:var(--accent)} /* legacy .btn family → token buttons (covers all paper-page buttons) */ body.babel .btn{font-family:var(--sans);font-weight:600;font-size:13px;border-radius:var(--r);border:1px solid var(--line);transition:border-color .12s,background .12s,color .12s} body.babel .btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)} body.babel .btn-secondary:hover{background:var(--row-hover);border-color:#D7D6D0} body.babel .btn-danger{background:var(--surface);color:var(--danger);border-color:var(--line)} body.babel .btn-danger:hover{border-color:var(--danger);background:#FBEFEF} body.babel .text-muted{color:var(--ink-faint)} /* ---------- secondary surfaces (chat · progress · toast) ---- These live in the legacy main.css with their own class names; re-skinned here to the token system, scoped to babel pages only. */ /* chat */ body.babel .chat-toggle-btn{background:var(--accent);border-radius:999px;box-shadow:0 4px 16px rgba(23,24,27,.16)} body.babel .chat-toggle-btn:hover{background:var(--accent-deep);box-shadow:0 6px 20px rgba(23,24,27,.2)} body.babel .chat-panel{background:var(--surface);border-left:1px solid var(--line);box-shadow:-4px 0 24px rgba(23,24,27,.07)} body.babel .chat-header{background:var(--paper);border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)} body.babel .chat-messages{background:var(--surface)} body.babel .chat-bubble{font-size:13.5px;line-height:1.55} body.babel .chat-bubble-user{background:var(--accent);color:#fff;border-bottom-right-radius:3px} body.babel .chat-bubble-assistant{background:var(--line-soft);color:var(--ink);border-bottom-left-radius:3px} body.babel .chat-bubble-assistant a{color:var(--accent);text-decoration:underline} body.babel .chat-bubble code{background:rgba(23,24,27,.06)} body.babel .chat-input-row{background:var(--paper);border-top:1px solid var(--line)} body.babel .chat-input-row textarea{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-family:var(--sans)} body.babel .chat-input-row textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)} body.babel .btn-sm{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink-soft);font-family:var(--sans);font-weight:600} body.babel .btn-sm:hover{border-color:#D7D6D0;background:var(--row-hover);color:var(--ink)} body.babel .chat-close{color:var(--ink-faint)} body.babel .chat-close:hover{color:var(--ink);background:var(--line-soft)} /* chat send button (legacy .btn.btn-primary) → accent */ body.babel .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:var(--r);font-family:var(--sans);font-weight:600} body.babel .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)} /* progress overlay */ body.babel .progress-box{background:var(--surface);border-radius:var(--r-card);box-shadow:0 18px 50px rgba(23,24,27,.18)} body.babel .progress-box h2{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)} body.babel .progress-step{color:var(--ink-faint);font-size:13.5px} body.babel .progress-step.active{color:var(--ink);font-weight:500} body.babel .progress-step.done{color:var(--accent)} /* toast */ body.babel .toast{background:var(--ink);border-radius:var(--r);font-size:13px} body.babel .toast.error{background:var(--danger)} /* ---------- mobile bar (facet drawer toggle) --------------- */ body.babel .mobile-bar{display:none} body.babel .filterbtn{display:none} body.babel .nav-toggle-btn{display:none} /* ============================================================ Responsive — app breakpoints 768 / 480 (hold to ~360) ============================================================ */ @media (max-width:768px){ body.babel .topbar{padding:14px 18px;gap:14px;flex-wrap:wrap} body.babel .nav-toggle-btn{ display:inline-flex;align-items:center;justify-content:center; margin-left:auto;background:none;border:1px solid var(--line); border-radius:var(--r);padding:6px 11px;font-size:18px;line-height:1; color:var(--ink-soft);cursor:pointer; } body.babel .nav-toggle-btn:hover{border-color:#D7D6D0} body.babel .topbar nav{ display:none;width:100%;order:5;flex-direction:column;align-items:flex-start; gap:14px;margin-left:0;padding-top:12px;border-top:1px solid var(--line); } body.babel .topbar nav.nav-open{display:flex} body.babel .topbar nav a{font-size:15px;padding-bottom:0;border-bottom:0} body.babel .spacer{display:none} /* account dropdown reflows inline within the stacked mobile nav */ body.babel .nav-account>summary{font-size:15px;padding-bottom:0;border-bottom:0} body.babel .nav-account-menu{ position:static;box-shadow:none;border:0;padding:8px 0 0 14px;min-width:0; background:transparent;gap:10px; } body.babel .nav-account-menu a{padding:0;font-size:15px} body.babel .wrap{padding:18px 18px 60px} body.babel .grid{grid-template-columns:1fr;gap:0} body.babel .facets{display:none;position:static;margin-bottom:18px} body.babel .facets.open{display:block} body.babel .mobile-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px} body.babel .filterbtn{ display:inline-flex;align-items:center;gap:7px;font-family:var(--sans); font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--surface); border-radius:var(--r);padding:8px 14px;cursor:pointer;color:var(--ink); } body.babel .mobile-bar .count{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)} /* grid table reflows to stacked records — title full width, metadata as one wrapping inline line beneath it, delete pinned top-right */ body.babel .cols{display:none} body.babel .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:16px 2px;position:relative} body.babel .idx{display:none} body.babel .titlecell{flex:1 1 100%;order:1;padding-right:34px} body.babel .title{-webkit-line-clamp:3;font-size:17px} body.babel .byline{white-space:normal} body.babel .del{order:0;opacity:1;position:absolute;top:14px;right:2px} body.babel .yr, body.babel .themes, body.babel .rating, body.babel .cited, body.babel .pdf, body.babel .src, body.babel .recv, body.babel .untagged, body.babel .emptycell{order:2;padding-top:0} /* Authors text cells stack full-width under the name on mobile */ body.babel .cell, body.babel .keys, body.babel .colist{order:2;flex:1 1 100%;padding-top:0} } @media (max-width:480px){ body.babel .topbar{padding:12px 14px} body.babel .wrap{padding:14px 14px 52px} body.babel .brand .word{font-size:22px} body.babel .brand .tag{display:none} body.babel .composer{padding:14px} body.babel .field{flex-basis:100%} body.babel .page-title{font-size:25px} } @media (prefers-reduced-motion:reduce){ body.babel *{transition:none!important;scroll-behavior:auto!important} }