/* Synth.Directory: round two (Claude Design, 10 Sep 2026). One family, Barlow; paper light by default,
   the dark palette one toggle away; a four step fill ladder run in opposite directions; no borders;
   colour only ever means status, and clay marks the one found rule. */

@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root, [data-theme="light"] {
  --w-ground: #F7F2E6; --w-card: #F0E9D8; --w-key: #E5DCC4; --w-raise: #D8CDB0;
  --w-bone: #161310; --w-bone2: #48433A; --w-mute: #544F47;
  --w-green: #0A6034; --w-green-fill: #C7F3D9; --w-green-fill-hover: #B2EBC8;
  --w-amber: #8A4A00; --w-amber-fill: #FFE7AF; --w-amber-fill-hover: #FBDB93;
  --w-blood: #A31F1F; --w-blood-text: #A31F1F; --w-blood-fill: #FFD8D1; --w-blood-fill-hover: #FCC7BE; --w-blood-hover: #8E1A1A;
  --w-blue: #1D6B7C; --w-blue-fill: #D2F0F6;
  --w-clay: #983811; --w-clay-fill: #FDDECA;
  --w-grade-a: #0A6034; --w-grade-a-ink: #F7F2E6; --w-grade-b: #5B6B60; --w-grade-b-ink: #F7F2E6; --w-grade-c: #E0D6BE; --w-grade-c-ink: #48433A;
  --w-wanted-fill: #F2EBDC; --w-rail: #CDC1A6; --w-rail-other: #CDC1A6;
  --w-active: #0A6034; --w-logo: #161310;
  --w-scrim: rgba(22, 19, 16, .10);
  --w-shadow: 0 18px 40px rgba(20, 16, 8, .16); --w-shadow-panel: -24px 0 48px rgba(20, 16, 8, .14);
  --w-backdrop: rgba(22, 19, 16, .06);
  --w-fast: 90ms linear; --w-move: 120ms cubic-bezier(.2, 0, 0, 1); --w-max: 1400px;
  color-scheme: light;
}
[data-theme="dark"] {
  --w-ground: #0B0B0C; --w-card: #131211; --w-key: #1B1917; --w-raise: #23211E;
  --w-bone: #ECE6D8; --w-bone2: #B7B0A0; --w-mute: #948D82;
  --w-green: #63E7A0; --w-green-fill: #123425; --w-green-fill-hover: #18432F;
  --w-amber: #FFB020; --w-amber-fill: #382A08; --w-amber-fill-hover: #48350A;
  --w-blood: #FF7B72; --w-blood-text: #FF7B72; --w-blood-fill: #3E1513; --w-blood-fill-hover: #4E1B18; --w-blood-hover: #FF938B;
  --w-blue: #6FBCCC; --w-blue-fill: #10272D;
  --w-clay: #FF8A52; --w-clay-fill: #3A1D0F;
  --w-grade-a: #7EE3A4; --w-grade-a-ink: #0B0B0C; --w-grade-b: #3E4A43; --w-grade-b-ink: #ECE6D8; --w-grade-c: #23211E; --w-grade-c-ink: #B7B0A0;
  --w-wanted-fill: #141312; --w-rail: #4A4238; --w-rail-other: #4A4238;
  --w-active: #63E7A0; --w-logo: #ECE6D8;
  --w-scrim: rgba(11, 11, 12, .10);
  --w-shadow: 0 18px 40px rgba(0, 0, 0, .55); --w-shadow-panel: -24px 0 48px rgba(0, 0, 0, .45);
  --w-backdrop: rgba(236, 230, 216, .06);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--w-ground); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--w-ground); color: var(--w-bone); font-family: 'Barlow', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; padding: 24px 0 64px; }
main > .wrap > * + * { margin-top: 28px; }
a { color: var(--w-green); text-decoration: none; cursor: pointer; }
a:hover { color: var(--w-bone); }
img { max-width: 100%; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--w-green-fill); color: var(--w-bone); }
:focus-visible { outline: 2px solid var(--w-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* type: one family. Names, titles and section heads at 500 in normal case; the only uppercase is a small label. */
.w-display { font-weight: 500; font-size: 44px; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
h1, .w-title { font-weight: 500; font-size: 38px; line-height: 1.1; margin: 0; letter-spacing: -0.01em; color: var(--w-bone); }
h2, .w-section { font-weight: 500; font-size: 19px; line-height: 1.25; margin: 0; color: var(--w-bone); }
.byline { font-weight: 400; font-size: 20px; line-height: 1.35; color: var(--w-bone2); margin-top: 6px; }
.byline a { color: var(--w-bone); }
.byline a:hover { color: var(--w-green); }
.byline .chip { vertical-align: middle; margin-left: 8px; }
.eyebrow { font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--w-bone2); }
.w-control, .btn, .chip, .pill, .db th, .th-sort { font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; }
.w-label, label.f > span, .f-label, .refine-grid .f > span { display: block; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; color: var(--w-mute); }
p { margin: 0; color: var(--w-bone2); }
p.lead { font-size: 17px; max-width: 74ch; text-wrap: pretty; }
.w-data { font-weight: 500; font-size: 16px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--w-bone); }
.meta, .credit { font-size: 13px; line-height: 1.5; color: var(--w-bone2); }
.wanted { color: var(--w-mute); font-style: italic; }
.clay { color: var(--w-clay); }

/* frame */
.wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 40px; }

/* backdrop */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; color: var(--w-backdrop); opacity: .55; }
/* where the side art can sit under centred text it fades right back (James, 10 Sep) */
@media (max-width: 1700px) { .backdrop { opacity: .28; } }
.backdrop svg { position: absolute; top: 0; bottom: 0; width: 420px; height: 100%; }
.backdrop .side-l { left: 0; } .backdrop .side-r { right: 0; transform: scaleX(-1); }
.backdrop .c-green { color: var(--w-green-fill-hover); } .backdrop .c-amber { color: var(--w-amber-fill-hover); } .backdrop .c-blood { color: var(--w-blood-fill-hover); } .backdrop .c-blue { color: var(--w-blue-fill); }
.backdrop .dial { transform-origin: center; animation: bd-turn 48s linear infinite; }
.backdrop .dial.slow { animation-duration: 90s; animation-direction: reverse; }
.backdrop .wave { animation: bd-drift 14s ease-in-out infinite alternate; } .backdrop .wave.b { animation-duration: 22s; }
.backdrop .env { animation: bd-breathe 9s ease-in-out infinite alternate; transform-origin: left bottom; }
@keyframes bd-turn { to { transform: rotate(360deg); } }
@keyframes bd-drift { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes bd-breathe { from { transform: scaleY(.92); } to { transform: scaleY(1.06); } }
@media (max-width: 1500px) { .backdrop svg { width: 220px; } }
@media (max-width: 1100px) { .backdrop { display: none; } }
header.mast, .standard-strip, main, footer.wiki-footer { position: relative; z-index: 1; }
header.mast { z-index: 30; } /* its menus must sit above main */

/* masthead: mark, wordmark, three controls */
.mast { background: var(--w-ground); }
.mast-inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.mast-brand { display: inline-flex; align-items: center; gap: 14px; color: var(--w-bone); }
.mast-brand .sd-mark { display: block; flex: none; }
.mast-brand .wordmark { display: block; line-height: 1.05; white-space: nowrap; }
.mast-brand .wordmark .w1, .mast-brand .wordmark .w2 { display: inline; }
.mast-brand .wordmark .line { display: block; white-space: nowrap; }
.mast-brand .wordmark .w1 { font-weight: 500; font-size: 22px; color: var(--w-bone); letter-spacing: -0.01em; }
.mast-brand .wordmark .w2 { font-weight: 500; font-size: 22px; color: var(--w-bone2); letter-spacing: -0.01em; }
.mast-brand .wordmark .dot { font-weight: 500; font-size: 22px; color: var(--w-clay); letter-spacing: -0.01em; }
.mast-brand .wordmark .domain { display: block; font-size: 12px; color: var(--w-mute); margin-top: 3px; letter-spacing: 0.02em; }
.mast nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mast nav a, .mast nav button { font-weight: 700; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-bone2); padding: 10px 12px; border-radius: 2px; background: transparent; border: 0; white-space: nowrap; transition: background var(--w-fast), color var(--w-fast); }
.mast nav a:hover, .mast nav button:hover { background: var(--w-key); color: var(--w-bone); }
.mast nav a.active { color: var(--w-green); background: var(--w-key); }
.mast nav .badge { display: inline-block; min-width: 18px; padding: 2px 5px; margin-left: 6px; border-radius: 2px; background: var(--w-amber-fill); color: var(--w-amber); font-size: 11px; text-align: center; }
.theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: transparent; border: 0; color: var(--w-bone2); cursor: pointer; }
.theme-toggle:hover { background: var(--w-key); color: var(--w-bone); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; } [data-theme="dark"] .theme-toggle .moon { display: none; }

/* the standard strip: six live counts, 44px */
.standard-strip { background: var(--w-card); }
.standard-strip-inner { display: flex; align-items: center; gap: 22px; height: 44px; overflow-x: auto; scrollbar-width: none; }
.standard-strip-inner::-webkit-scrollbar { display: none; }
.strip-count { display: inline-flex; align-items: center; gap: 7px; color: var(--w-bone); white-space: nowrap; font-size: 15px; }
.strip-count .sq { width: 9px; height: 9px; border-radius: 2px; background: var(--w-key); flex: none; }
.strip-verified .sq { background: var(--w-green); } .strip-potentially .sq { background: var(--w-amber); } .strip-submitted .sq { background: var(--w-amber-fill-hover); } .strip-inferred .sq { background: var(--w-raise); } .strip-disputed .sq { background: var(--w-blood); }
.strip-count .n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--w-bone); }
.strip-count .l { color: var(--w-bone2); }
.strip-count:hover .l { color: var(--w-bone); }
.standard-strip .rule { margin-left: auto; white-space: nowrap; font-size: 14px; color: var(--w-bone2); }
.standard-strip .rule a { color: var(--w-green); }

/* pills: six variants, icon plus label */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 2px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--w-fast), color var(--w-fast); font-size: 11px; }
.pill svg { width: 11px; height: 11px; flex: none; }
.pill .n { font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.pill-verified { background: var(--w-green-fill); color: var(--w-green); } .pill-verified:hover { background: var(--w-green-fill-hover); color: var(--w-green); }
.pill-potentially { background: var(--w-amber-fill); color: var(--w-amber); } .pill-potentially:hover { background: var(--w-amber-fill-hover); color: var(--w-amber); }
.pill-submitted, .pill-locked { background: var(--w-amber-fill); color: var(--w-amber); } .pill-submitted:hover, .pill-locked:hover { background: var(--w-amber-fill-hover); color: var(--w-amber); }
.pill-inferred { background: var(--w-key); color: var(--w-bone2); } .pill-inferred:hover { background: var(--w-raise); color: var(--w-bone); }
.pill-disputed { background: var(--w-blood-fill); color: var(--w-blood); } .pill-disputed:hover { background: var(--w-blood-fill-hover); color: var(--w-blood); }
.pill-rejected { background: var(--w-key); color: var(--w-mute); }
.pill-wanted { background: var(--w-wanted-fill); color: var(--w-mute); } .pill-wanted:hover { background: var(--w-key); color: var(--w-bone); }
a.pill { text-decoration: none; }

/* grade badges: the weight of the fill is the weight of the evidence */
.grade { display: inline-flex; flex: none; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 2px; font-weight: 500; font-size: 12px; line-height: 1; cursor: pointer; vertical-align: middle; margin-right: 3px; transition: background var(--w-fast); }
.grade-A { background: var(--w-grade-a); color: var(--w-grade-a-ink); } .grade-B { background: var(--w-grade-b); color: var(--w-grade-b-ink); } .grade-C { background: var(--w-grade-c); color: var(--w-grade-c-ink); }
.grade:hover { filter: brightness(1.08); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 2px; border: 0; background: var(--w-key); color: var(--w-bone); cursor: pointer; line-height: 1; text-decoration: none; white-space: nowrap; transition: background var(--w-fast), color var(--w-fast); }
.btn:hover { background: var(--w-raise); color: var(--w-bone); }
.btn-primary { background: var(--w-green); color: var(--w-ground); } .btn-primary:hover { background: var(--w-bone); color: var(--w-ground); }
[data-theme="dark"] .btn-primary { color: var(--w-ground); }
.btn-danger { background: var(--w-blood); color: var(--w-ground); } .btn-danger:hover { background: var(--w-blood-hover); color: var(--w-ground); }
.btn-clay { color: var(--w-clay); } .btn-clay:hover { background: var(--w-clay-fill); color: var(--w-clay); }
.btn-small { padding: 8px 12px; font-size: 11px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--w-key); color: var(--w-bone); font-size: 11px; padding: 9px 12px; border-radius: 2px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--w-fast); }
.chip:hover { background: var(--w-raise); color: var(--w-bone); }
.chip .k { color: var(--w-mute); } .chip .x { color: var(--w-mute); font-size: 14px; } .chip:hover .x { color: var(--w-bone); }
.chip-text { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }

/* wells: readable ink on a filled well, focus is an underline inside */
.well, input[type="text"], input[type="search"], input[type="url"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], select, textarea { font: inherit; font-size: 15px; color: var(--w-bone); background: var(--w-key); border: 0; border-radius: 2px; padding: 0 12px; height: 44px; width: 100%; transition: background var(--w-fast), box-shadow var(--w-fast); }
textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23544F47' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: 0; background: var(--w-raise); box-shadow: inset 0 -2px 0 var(--w-green); }
input::placeholder, textarea::placeholder { color: var(--w-mute); }
label.f { display: block; }
label.f > span { margin: 0 0 6px; }
.f + .f { margin-top: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--w-bone2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--w-green); flex: none; }

.flash { background: var(--w-key); color: var(--w-bone); border-radius: 4px; padding: 12px 16px; margin: 0 0 16px; box-shadow: inset 3px 0 0 var(--w-green); }
.flash.error { box-shadow: inset 3px 0 0 var(--w-blood); }
.flash ul { margin: 0; padding-left: 18px; }

.panel, .wiki-block { background: var(--w-card); border-radius: 4px; padding: 24px; }
.panel + .panel, .wiki-block + .wiki-block { margin-top: 16px; }
.panel h2, .wiki-block h2 { margin-bottom: 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }

/* the database: tabs, filter bar, table */
.db-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.db-tabs { display: flex; gap: 4px; }
.db-tabs a { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-bone2); background: var(--w-card); padding: 12px 16px; border-radius: 2px 2px 0 0; transition: background var(--w-fast), color var(--w-fast); }
.db-tabs a .n { font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--w-mute); }
.db-tabs a:hover { background: var(--w-key); color: var(--w-bone); }
.db-tabs a.active { background: var(--w-key); color: var(--w-green); } .db-tabs a.active .n { color: var(--w-bone2); }
.db-add { display: flex; gap: 6px; padding-bottom: 4px; }

.command { background: var(--w-card); border-radius: 0 4px 4px 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.command-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.command-field { position: relative; flex: 1 1 320px; min-width: 200px; }
.command-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--w-mute); }
.command-field input { height: 40px; padding-left: 38px; font-size: 15px; background: var(--w-key); }
.command-field input:focus { background: var(--w-raise); }
.command-row .btn { height: 40px; }
.facets { display: flex; gap: 6px; flex-wrap: wrap; }
.facet { position: relative; height: 40px; }
.facet select { height: 40px; width: auto; min-width: 0; padding: 0 30px 0 12px; font-weight: 500; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-bone2); background-color: var(--w-key); }
.facet select:hover { background-color: var(--w-raise); color: var(--w-bone); }
.facet select.is-set { color: var(--w-bone); background-color: var(--w-raise); }
.facet input[type="text"] { height: 40px; width: 150px; font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips:empty { display: none; }
.chips .clear { color: var(--w-mute); font-size: 13px; margin-left: 4px; }
.refine { display: none; }
.db-count { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--w-bone2); font-variant-numeric: tabular-nums; margin-top: 14px; }
.db-count .invite { color: var(--w-mute); }

.db-scroll { overflow-x: auto; margin-top: 10px; border-radius: 4px; }
table.db { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
table.db th { position: sticky; top: 0; z-index: 2; height: 40px; text-align: left; padding: 0 12px; background: var(--w-bone); color: var(--w-ground); white-space: nowrap; font-size: 11px; letter-spacing: 0.09em; }
table.db th a.th-sort { color: var(--w-ground); opacity: .8; } table.db th a.th-sort:hover, table.db th a.th-sort.is-on { opacity: 1; font-weight: 600; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; } .th-sort svg { width: 10px; height: 10px; } .th-sort svg.up { transform: rotate(-90deg); } .th-sort svg.down { transform: rotate(90deg); }
table.db th.th-img { width: 52px; } table.db th.th-pencil { width: 44px; } table.db th.th-year { width: 62px; } table.db th.th-role { width: 88px; } table.db th.th-status { width: 168px; } table.db th.th-src { width: 104px; } table.db th.th-n { width: 1%; }
table.db td.cell { height: 44px; padding: 0 12px; vertical-align: middle; position: relative; background: var(--w-ground); transition: background var(--w-fast); }
table.db tbody tr.g-even td.cell { background: var(--w-card); }
table.db tbody tr:hover td.cell, table.db tbody tr.is-hover td.cell, table.db tbody tr.row-open td.cell { background: var(--w-key); cursor: pointer; }
table.db td.cell-span { vertical-align: top; padding-top: 12px; }
table.db td.cell-rail { box-shadow: inset 3px 0 0 var(--w-rail); }
table.db td.cell a { color: var(--w-bone); } table.db td.cell a:hover { color: var(--w-green); }
table.db td.cell-artist { font-weight: 500; font-size: 16px; letter-spacing: -0.005em; color: var(--w-bone); }
table.db td.cell-title { font-size: 15px; }
table.db td.cell-year { font-size: 14px; color: var(--w-bone2); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.db td.cell-inst { font-size: 15px; }
table.db tbody tr.row-inferred td.cell-inst a { color: var(--w-bone2); font-style: italic; }
table.db td.cell-role { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-bone2); white-space: nowrap; }
table.db td.cell-status, table.db td.cell-src, table.db td.cell-n { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.db td.cell-empty { color: var(--w-mute); font-style: italic; }
table.db .db-empty { padding: 48px 24px; text-align: center; }
.cell-v { display: inline-block; max-width: 100%; vertical-align: middle; }
.credit-inline { color: var(--w-mute); font-size: 13px; margin-left: 6px; }
.src-add { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-mute); }
tr:hover .src-add { color: var(--w-bone); }

/* editing affordances: one pencil per row at the row end; a ghost pencil inside a cell only under the pointer */
td.cell.is-editable .cell-pencil { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; padding: 0; background: transparent; color: var(--w-bone); opacity: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; transition: opacity var(--w-fast), background var(--w-fast); }
td.cell.is-editable:hover .cell-pencil { opacity: .4; }
td.cell.is-editable .cell-pencil:hover, td.cell.is-editable .cell-pencil:focus-visible { opacity: 1; background: var(--w-raise); }
td.cell.is-editable { padding-right: 36px; }
td.cell.is-open { background: var(--w-raise) !important; box-shadow: inset 0 -2px 0 var(--w-green); }
td.cell-pencil-col { width: 44px; padding: 0 !important; text-align: center; }
.row-pencil { width: 32px; height: 32px; border: 0; border-radius: 2px; background: transparent; color: var(--w-bone2); opacity: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity var(--w-fast), background var(--w-fast); }
tr:hover .row-pencil, .row-pencil:focus-visible { opacity: .45; }
.row-pencil:hover { opacity: 1 !important; background: var(--w-raise); color: var(--w-bone); }
td.cell.cell-add .add-hint { color: var(--w-mute); font-style: italic; display: inline-flex; align-items: center; gap: 8px; }
td.cell.cell-add .add-hint svg { display: none; width: 13px; height: 13px; }
tr:hover td.cell.cell-add .add-hint { color: var(--w-bone); font-style: normal; } tr:hover td.cell.cell-add .add-hint svg { display: inline; }
td.cell.is-locked { box-shadow: inset 3px 0 0 var(--w-rail); padding-right: 12px; }
td.cell.is-locked.is-mine { box-shadow: inset 3px 0 0 var(--w-amber); }
.cell-lock { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-mute); cursor: pointer; }
.cell-lock svg { width: 15px; height: 15px; }
td.cell.is-mine .cell-lock { color: var(--w-amber); }
td.cell.is-locked .cell-v { display: none; }
@media (hover: none) { td.cell.is-editable .cell-pencil, .row-pencil { opacity: .55; } }

/* thumbnails and drop targets */
.thumb { display: inline-flex; width: 32px; height: 32px; border-radius: 2px; overflow: hidden; align-items: center; justify-content: center; background: var(--w-key); color: var(--w-mute); vertical-align: middle; transition: background var(--w-fast), color var(--w-fast); }
.thumb img { width: 32px; height: 32px; object-fit: cover; display: block; }
.thumb svg { width: 14px; height: 14px; }
.thumb-none { background: var(--w-key); } .thumb-empty { background: var(--w-key); opacity: .6; }
td.cell-img.is-drop { cursor: pointer; } td.cell-img.is-drop:hover .thumb-empty { opacity: 1; background: var(--w-raise); color: var(--w-bone); }
.thumb-lock { color: var(--w-amber); background: var(--w-amber-fill); position: relative; } .thumb-lock img { opacity: .4; position: absolute; inset: 0; } .thumb-lock svg { position: relative; }
body.is-dragging table.db tbody tr.can-drop td.cell { background: var(--w-card); }
table.db tbody tr.is-over td.cell { background: var(--w-key) !important; }
table.db tbody tr.is-over td:first-child { box-shadow: inset 3px 0 0 var(--w-green); }
.drop-line { display: none; }
tr.is-over .drop-line { display: block; position: absolute; left: 60px; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-green); pointer-events: none; }

.db-more { display: flex; justify-content: center; align-items: center; height: 56px; background: var(--w-card); border-radius: 0 0 4px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-mute); }
body.js .db-pages { display: none; }
body.js.no-infinite .db-pages { display: flex; }
body.js.no-infinite .db-more { display: none !important; }
.db-more[hidden] { display: none; }
body.js .db-more[data-next]:not([data-next=""]) { display: flex; }
.db-pages { display: flex; justify-content: center; margin-top: 24px; }
.db-pages nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.db-pages a, .db-pages span { display: inline-flex; align-items: center; min-width: 36px; height: 36px; padding: 0 10px; justify-content: center; border-radius: 2px; background: var(--w-card); color: var(--w-bone2); font-size: 12px; }
.db-pages a:hover { background: var(--w-key); color: var(--w-bone); }
.db-pages span[aria-current] { background: var(--w-key); color: var(--w-green); }
.db-pages svg { width: 14px; height: 14px; }

/* the two things that float: the editor and the bench; and the claim panel */
.w-scrim { position: fixed; inset: 0; background: var(--w-scrim); z-index: 30; }
.w-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100vw; background: var(--w-card); z-index: 31; overflow-y: auto; padding: 24px 32px 40px; transform: translateX(0); transition: transform var(--w-move); box-shadow: var(--w-shadow-panel); border-radius: 8px 0 0 8px; }
.w-panel.is-closed { transform: translateX(100%); }
.w-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.w-panel-head .tools { display: flex; gap: 6px; }
.w-panel-head .tools a, .w-panel-head .tools button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--w-key); color: var(--w-bone2); border: 0; }
.w-panel-head .tools a:hover, .w-panel-head .tools button:hover { background: var(--w-raise); color: var(--w-bone); }
.w-panel-head .tools svg { width: 16px; height: 16px; }
.w-bench { width: 480px; }
.w-bench .claim-sentence { margin: 0 0 18px; color: var(--w-bone2); font-size: 15px; }
.w-bench .fields { display: flex; flex-direction: column; gap: 14px; }
.w-bench .consequence { margin-top: 16px; font-size: 14px; color: var(--w-green); }
.w-bench .actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.w-bench .err { background: var(--w-blood-fill); color: var(--w-blood); border-radius: 2px; padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.w-bench .note { color: var(--w-mute); font-size: 13px; }
.w-bench .grade-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.w-bench .grade-pick label { display: flex; flex-direction: column; gap: 6px; background: var(--w-key); border-radius: 2px; padding: 12px; cursor: pointer; transition: background var(--w-fast); }
.w-bench .grade-pick label:hover { background: var(--w-raise); }
.w-bench .grade-pick label.is-on { background: var(--w-raise); box-shadow: inset 0 -2px 0 var(--w-green); }
.w-bench .grade-pick input { position: absolute; opacity: 0; pointer-events: none; }
.w-bench .grade-pick small { font-size: 12px; line-height: 1.4; color: var(--w-bone2); }
.w-bench .licence-pick { display: flex; flex-direction: column; gap: 6px; }
.w-bench .licence-pick label { display: flex; align-items: center; gap: 10px; background: var(--w-key); border-radius: 2px; padding: 10px 12px; cursor: pointer; font-size: 14px; color: var(--w-bone); }
.w-bench .licence-pick label:hover { background: var(--w-raise); }
.w-bench .licence-pick label.is-on { background: var(--w-raise); box-shadow: inset 0 -2px 0 var(--w-green); }
.w-bench .licence-pick input { position: absolute; opacity: 0; pointer-events: none; }
.w-bench .nos { background: var(--w-key); border-radius: 2px; padding: 12px; }
.w-bench .nos ul { margin: 6px 0 0 18px; padding: 0; font-size: 15px; color: var(--w-bone2); }
.w-bench .preview { display: flex; gap: 14px; align-items: center; background: var(--w-key); border-radius: 2px; padding: 10px; }
.w-bench .preview img { width: 200px; max-width: 45%; height: auto; border-radius: 2px; }
.w-bench .terms-once { font-size: 13px; color: var(--w-mute); }
.w-bench .terms-full { background: var(--w-key); border-radius: 2px; padding: 12px; font-size: 14px; line-height: 1.55; color: var(--w-bone2); }
.w-pop { position: absolute; z-index: 32; width: 320px; background: var(--w-raise); border-radius: 8px; padding: 14px; box-shadow: var(--w-shadow); }
.w-pop input, .w-pop select { background: var(--w-key); }
.w-pop .actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.w-pop .err { color: var(--w-blood); font-size: 13px; margin-top: 8px; }
.w-pop .terms-once { font-size: 12px; color: var(--w-mute); margin-top: 10px; line-height: 1.45; }
.queued-strip { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--w-amber-fill); color: var(--w-amber); border-radius: 2px; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; }
.queued-strip svg { width: 16px; height: 16px; } .queued-strip a { color: var(--w-bone); margin-left: auto; font-size: 12px; }

/* detail pages: citation pages */
.claim-detail h1 a { color: var(--w-bone); } .claim-detail h1 a:hover { color: var(--w-green); }
.claim-detail .status-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.claim-detail .status-line .why { font-size: 14px; color: var(--w-bone2); }
.claim-detail section { margin-top: 24px; }
.claim-detail section h2 { margin-bottom: 10px; }
.claim-detail .byline { font-size: 17px; }
.settings-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 15px; }
.settings-grid dt { font-weight: 500; font-size: 14px; color: var(--w-mute); padding-top: 1px; }
.settings-grid dd { margin: 0; color: var(--w-bone); }
.refs { list-style: none; margin: 0; padding: 0; counter-reset: ref; display: flex; flex-direction: column; gap: 8px; }
.refs li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; background: var(--w-key); border-radius: 2px; padding: 12px 14px; counter-increment: ref; font-size: 15px; }
.refs li::before { content: counter(ref); font-weight: 500; font-size: 13px; color: var(--w-mute); padding-top: 3px; }
.refs .cite { color: var(--w-bone); }
.refs .quote { display: block; margin-top: 8px; color: var(--w-bone2); font-style: italic; background: var(--w-card); border-radius: 2px; padding: 8px 10px; }
.refs .foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--w-bone2); }
.refs .ext { display: inline-flex; align-items: center; gap: 6px; color: var(--w-green); } .refs .ext svg { width: 12px; height: 12px; }
.refs .st { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-mute); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.figure { margin: 0; background: var(--w-key); border-radius: 2px; padding: 8px; }
.figure img { display: block; width: 100%; height: auto; border-radius: 2px; }
.figure figcaption { margin-top: 8px; }
.figure .credit { font-size: 13px; line-height: 1.5; color: var(--w-bone2); } .figure .credit a { color: var(--w-green); }
.figure.cover { max-width: 260px; }
.add-tile { display: flex; align-items: center; justify-content: center; min-height: 96px; border-radius: 2px; background: var(--w-key); color: var(--w-mute); cursor: pointer; font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; border: 0; }
.add-tile:hover { background: var(--w-raise); color: var(--w-bone); }
.revisions { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--w-bone2); }
.revisions li { padding: 8px 0; display: grid; grid-template-columns: 110px 1fr max-content; gap: 12px; align-items: baseline; }
.revisions time { color: var(--w-mute); font-variant-numeric: tabular-nums; }
.revisions .who { color: var(--w-mute); font-size: 13px; }
.samples { display: flex; flex-direction: column; gap: 8px; }
.sample { background: var(--w-key); border-radius: 2px; padding: 10px 12px; display: grid; gap: 6px; }
.sample audio { width: 100%; height: 36px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.video { background: var(--w-key); border-radius: 2px; padding: 8px; }
.video-load { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--w-ground); border-radius: 2px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; }
.video-load img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; } .video-load:hover img { opacity: 1; }
.video-load span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--w-green); color: var(--w-ground); padding: 10px 14px; border-radius: 2px; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 2px; display: block; }
.panel-photos { display: flex; gap: 8px; flex-wrap: wrap; } .panel-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; }
.panel-read { background: var(--w-key); border-radius: 2px; padding: 12px; font-size: 14px; color: var(--w-bone2); }
details.fold summary { cursor: pointer; list-style: none; font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-mute); padding: 8px 0; }
details.fold summary::-webkit-details-marker { display: none; }
.rows { display: flex; flex-direction: column; gap: 4px; }
.rows a.row { display: grid; grid-template-columns: 1fr max-content; gap: 12px; align-items: center; background: var(--w-card); border-radius: 2px; padding: 10px 14px; color: var(--w-bone); transition: background var(--w-fast); }
.rows a.row:hover { background: var(--w-key); color: var(--w-bone); }
.rows a.row .sub { color: var(--w-bone2); font-size: 14px; margin-left: 8px; }
.in-kb { display: none; }

/* empty states */
.empty { background: var(--w-card); border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.empty h2, .empty .e-title { font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--w-bone); }
.empty p { font-size: 15px; max-width: 44ch; }

/* prose pages */
.prose { max-width: 68ch; margin: 0 auto; font-size: 18px; line-height: 1.62; color: var(--w-bone2); }
.prose h1 { color: var(--w-bone); margin-bottom: 20px; font-size: 32px; }
.prose pre { overflow-x: auto; max-width: 100%; }
.prose h2 { color: var(--w-bone); margin: 36px 0 12px; }
.prose p + p { margin-top: 16px; } .prose ol, .prose ul { padding-left: 22px; margin: 12px 0; } .prose li + li { margin-top: 8px; }
.prose .stamp { font-weight: 500; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--w-mute); margin-bottom: 12px; }
.prose strong { color: var(--w-bone); font-weight: 500; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: var(--w-key); border-radius: 2px; padding: 1px 5px; color: var(--w-bone); }
.prose pre { background: var(--w-key); border-radius: 4px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.prose pre code { background: transparent; padding: 0; font-size: inherit; }
.grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; }
.grades .g { background: var(--w-card); border-radius: 4px; padding: 20px; font-size: 15px; } .grades .g .grade { margin-bottom: 10px; width: 32px; height: 32px; font-size: 16px; } .grades .g p { font-size: 15px; }
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; }
.cases .c { background: var(--w-card); border-radius: 4px; padding: 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; } .cases .c .eq { color: var(--w-mute); } .cases .c .meta { flex-basis: 100%; }

/* my contributions, tokens, profile */
.me-top { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.me-section { margin-top: 28px; }
.me-section h2 { margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
.me-section h2 .n { font-weight: 500; font-size: 14px; color: var(--w-mute); }
.me-item { display: grid; grid-template-columns: 56px 1fr max-content; gap: 12px; align-items: center; background: var(--w-card); border-radius: 2px; padding: 10px 14px; margin-top: 4px; font-size: 15px; }
.me-pos { font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-amber); }
.me-reason { grid-column: 2 / -1; color: var(--w-bone2); font-size: 14px; }
.me-kind { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--w-mute); }

/* consent */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--w-raise); box-shadow: var(--w-shadow); }
.consent-inner { display: flex; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.consent-inner p { flex: 1 1 360px; font-size: 14px; color: var(--w-bone2); }
.consent-actions { display: flex; gap: 8px; }

/* footer: licence line, newsletter line, language picker, takedown link */
.wiki-footer { background: var(--w-card); padding: 32px 0; margin-top: 64px; }
footer.wiki-footer { margin-top: 64px; }
.wiki-footer p { font-size: 14px; line-height: 1.6; color: var(--w-bone2); max-width: 78ch; }
.wiki-footer-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.wiki-footer-links a { font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-bone2); }
.wiki-footer-links a:hover { color: var(--w-bone); }
/* the newsletter card */
.nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 24px; align-items: center; background: var(--w-raise); border-radius: 8px; padding: 24px 28px; margin-bottom: 32px; }
.nl-copy { display: flex; flex-direction: column; gap: 4px; }
.nl-title { font-size: 20px; font-weight: 500; color: var(--w-bone); letter-spacing: -0.01em; }
.nl-sub { font-size: 14px; color: var(--w-bone2); line-height: 1.5; }
.nl-row { display: flex; gap: 8px; }
.nl-row input[type="email"] { flex: 1; min-width: 0; height: 44px; background: var(--w-key); border: 0; border-radius: 4px; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--w-bone); }
.nl-row input[type="email"]:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--w-clay); }
.nl-row .btn { height: 44px; white-space: nowrap; }
.btn.btn-clay { background: var(--w-clay); color: #F7F2E6; } .btn.btn-clay:hover { background: #7E2E0E; color: #F7F2E6; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-err { color: var(--w-blood-text); margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* copyright and credits */
.colophon { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--w-key); }
.colophon p { margin: 0; font-size: 13px; color: var(--w-mute); }
.colophon p a { color: var(--w-bone2); font-weight: 500; } .colophon p a:hover { color: var(--w-bone); }
.presented { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--w-mute); }
.partners { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.presented img { width: 96px; height: 58px; display: block; }
.presented.yard img { width: auto; height: 40px; } .presented.yard img + img { margin-left: -4px; }
.presented:hover { color: var(--w-bone2); } .presented:hover img { opacity: 0.92; }
.language-picker { display: inline-flex; gap: 6px; align-items: center; }
.language-picker select { height: 36px; width: auto; font-size: 13px; }
body.js .language-picker button { display: none; }

/* phone */
@media (max-width: 720px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  .wrap { padding: 0 16px; min-width: 0; width: 100%; }
  h1, .w-title { font-size: 28px; } .byline { font-size: 17px; }
  .mast-inner { height: 56px; gap: 12px; }
  .mast-brand .sd-mark { width: 34px; height: 34px; }
  .mast-brand .wordmark .w1, .mast-brand .wordmark .w2, .mast-brand .wordmark .dot { font-size: 16px; } .mast-brand .wordmark .domain { display: none; }
  .mast nav { gap: 0; overflow-x: auto; scrollbar-width: none; } .mast nav::-webkit-scrollbar { display: none; }
  .mast nav a, .mast nav button { padding: 10px 8px; font-size: 11px; }
  .standard-strip .rule { display: none; }
  .db-tabs { flex-wrap: wrap; }
  .command { position: sticky; top: 0; z-index: 5; border-radius: 4px; }
  .command-field input { height: 48px; font-size: 17px; }
  .command-row .btn { display: none; }
  .facets { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .db-count > span { flex: 1 1 100%; min-width: 0; }
  .db-scroll { overflow: visible; }
  table.db, table.db tbody, table.db tr, table.db td { display: block; width: 100%; }
  table.db thead { display: none; }
  table.db tbody tr { background: var(--w-card) !important; border-radius: 2px; padding: 12px 14px 12px 14px; margin-top: 6px; position: relative; }
  table.db tbody tr.g-even td.cell, table.db td.cell { background: transparent !important; height: auto; padding: 2px 0; white-space: normal; max-width: none; box-shadow: none !important; }
  table.db td.cell-img, table.db td.cell-src, table.db td.cell-cont { display: none; }
  table.db td.cell-artist { font-size: 13px; color: var(--w-bone2); } table.db td.cell-artist a { color: var(--w-bone2); }
  table.db td.cell-title { font-size: 18px; font-weight: 500; }
  table.db td.cell-year { display: inline-block; }
  table.db td.cell-inst { font-size: 15px; margin-top: 4px; } table.db td.cell-role { display: inline-block; margin-right: 8px; }
  table.db tr.row-wanted td.cell-inst { display: none; }
  table.db td.cell-status { display: inline-block; margin-top: 8px; }
  table.db td.cell-pencil-col { position: absolute; right: 10px; top: 10px; width: 44px !important; height: 44px; }
  .row-pencil { opacity: 1; width: 44px; height: 44px; background: var(--w-key); }
  td.cell.is-editable { padding-right: 0; } td.cell.is-editable .cell-pencil { position: static; transform: none; opacity: .55; margin-left: 8px; vertical-align: middle; }
  td.cell.is-locked .cell-v { display: inline; }
  .w-panel, .w-bench { width: 100vw; border-radius: 0; }
  .w-pop { width: calc(100vw - 32px); left: 16px !important; }
  .db-pages a, .db-pages span { min-width: 48px; height: 48px; }
  .queued-strip { height: auto; padding: 12px 14px; flex-wrap: wrap; }
  .revisions li { grid-template-columns: 1fr; gap: 2px; }
}

/* round two: contributor flows */
/* editors.blade.php, me/profile/tokens/user.blade.php - the floating editor, the bench, the
   lock states, "Choose your name" and "My contributions" (Claude Design, 10 Sep 2026). Tokens
   and base components above are unchanged; this section only adds what those five pages need. */

.lead { font-size: 16px; line-height: 1.6; color: var(--w-bone2); max-width: 74ch; margin-bottom: 8px; }

/* "In review 3 · Accepted 12 · Superseded 2 · Rejected 1" as tiles, and the same shape on the
   public /u/{handle} page (verified claims / accepted sources / accepted images). */
.me-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 28px; }
.chip.is-current { background: var(--w-amber-fill); color: var(--w-amber); }
.chip.is-current:hover { background: var(--w-amber-fill-hover); color: var(--w-amber); }
.chip .n { font-variant-numeric: tabular-nums; color: inherit; opacity: .8; }

.me-item { flex-wrap: wrap; }
.me-line { flex: 1 1 auto; }
.me-status { font-weight: 500; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-mute); }
.me-item .me-reason { grid-column: unset; flex-basis: 100%; }

/* "Choose your name": the handle field with its own "@" prefix and the live check below it */
.handle-field { display: flex; align-items: center; gap: 6px; background: var(--w-key); border-radius: 2px; padding: 0 12px; height: 44px; transition: background var(--w-fast), box-shadow var(--w-fast); }
.handle-field:focus-within { background: var(--w-raise); box-shadow: inset 0 -2px 0 var(--w-green); }
.handle-field .handle-at { color: var(--w-mute); font-size: 15px; }
.handle-field input { background: transparent; padding: 0; height: auto; }
.handle-field input:focus { background: transparent; box-shadow: none; }
.handle-status { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 8px; }
.handle-status.is-ok { color: var(--w-green); }
.handle-status.is-bad { color: var(--w-blood); }
.handle-status svg { flex: none; }

/* round two: right to left */
[dir="rtl"] .handle-field { flex-direction: row-reverse; }

/* right to left */
[dir="rtl"] table.db td.cell-rail { box-shadow: inset -3px 0 0 var(--w-rail); }
[dir="rtl"] td.cell.is-locked { box-shadow: inset -3px 0 0 var(--w-rail); }
[dir="rtl"] td.cell.is-locked.is-mine { box-shadow: inset -3px 0 0 var(--w-amber); }
[dir="rtl"] .w-panel { right: auto; left: 0; box-shadow: 24px 0 48px rgba(20, 16, 8, .14); border-radius: 0 8px 8px 0; }
[dir="rtl"] .w-panel.is-closed { transform: translateX(-100%); }
[dir="rtl"] .mast nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .standard-strip .rule { margin-left: 0; margin-right: auto; }
[dir="rtl"] table.db th, [dir="rtl"] table.db td.cell { text-align: right; }


/* masthead tools: theme, language flag, user menu, log in */
.mast nav a.random { color: var(--w-clay); } .mast nav a.random:hover { background: var(--w-clay-fill); color: var(--w-clay); }
.mast nav a.random svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.mast-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; }
.mast nav .login { font-weight: 700; }
.menu { position: relative; display: inline-block; }
.menu-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: transparent; border: 0; color: var(--w-bone2); padding: 0 !important; position: relative; }
.menu-btn:hover, .menu.is-open .menu-btn { background: var(--w-key); color: var(--w-bone); }
.menu-btn svg { width: 17px; height: 17px; }
.menu-btn .flag { font-size: 18px; line-height: 1; }
.menu-btn .badge { position: absolute; top: -2px; right: -4px; margin: 0; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; max-height: 70vh; overflow-y: auto; background: var(--w-raise); border-radius: 8px; box-shadow: var(--w-shadow); padding: 6px; z-index: 40; display: flex; flex-direction: column; }
.menu-list[hidden] { display: none; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 2px; color: var(--w-bone); background: transparent; border: 0; font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.menu-list a:hover, .menu-list button:hover, .menu-list a.is-on { background: var(--w-key); color: var(--w-bone); }
.menu-list .flag { font-size: 16px; width: 22px; }
.menu-list .menu-head { padding: 8px 12px 6px; font-size: 12px; color: var(--w-mute); }
.menu-list form { display: contents; }

/* the database with a filter sidebar */
form.db { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.db-side { position: sticky; top: 16px; background: var(--w-card); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.db-side-head { display: flex; align-items: center; justify-content: space-between; }
.db-side-head .clear { font-size: 12px; color: var(--w-mute); }
.db-side .side-hint { font-size: 12px; line-height: 1.5; }
.db-side .side-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--w-key); border-radius: 2px; padding: 1px 4px; }
.db-main { min-width: 0; }
.side-toggle { display: none; }
.command { border-radius: 4px; }
.db-tabs a { border-radius: 2px 2px 0 0; }

/* Tom Select on the tokens */
.ts-wrapper.multi .ts-control, .ts-wrapper.single .ts-control, .ts-wrapper .ts-control { background: var(--w-key); border: 0; border-radius: 2px; box-shadow: none; padding: 6px 30px 6px 8px; min-height: 40px; color: var(--w-bone); font-family: inherit; font-size: 14px; }
.ts-wrapper.focus .ts-control { background: var(--w-raise); box-shadow: inset 0 -2px 0 var(--w-green); }
.ts-wrapper.multi .ts-control > .item { background: var(--w-raise); color: var(--w-bone); border-radius: 2px; padding: 3px 8px; font-size: 13px; font-weight: 500; }
.ts-wrapper.plugin-remove_button .item .remove { border-left: 0; color: var(--w-mute); padding: 0 6px; }
.ts-wrapper.plugin-remove_button .item .remove:hover { background: transparent; color: var(--w-bone); }
.ts-control input::placeholder { color: var(--w-mute); }
.ts-dropdown { background: var(--w-raise); border: 0; border-radius: 4px; box-shadow: var(--w-shadow); margin-top: 4px; color: var(--w-bone); font-family: inherit; }
.ts-dropdown .option { padding: 8px 10px; font-size: 14px; } .ts-dropdown .active { background: var(--w-key); color: var(--w-bone); }
.ts-dropdown .option .n { color: var(--w-mute); font-size: 12px; margin-left: 6px; }
.ts-wrapper .ts-control .item.active { background: var(--w-green-fill); color: var(--w-green); }

/* infinite scroll on/off */
.scroll-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 8px; background: var(--w-raise); color: var(--w-bone); border: 0; border-radius: 8px; padding: 10px 14px; box-shadow: var(--w-shadow); font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; }
.scroll-toggle svg { width: 12px; height: 12px; transform: rotate(90deg); } .scroll-toggle[aria-pressed="false"] svg { transform: rotate(-90deg); }
.scroll-toggle[aria-pressed="false"] { color: var(--w-bone2); }
.scroll-toggle[hidden] { display: none; }

@media (max-width: 960px) {
  .nl { grid-template-columns: 1fr; padding: 20px; }
  form.db { grid-template-columns: 1fr; }
  .db-side { position: static; display: none; } .db-side.is-open { display: flex; }
  .side-toggle { display: inline-flex; }
}

.cell-maker { color: var(--w-bone2); font-weight: 500; } .cell-maker a { color: inherit; }

/* presets, ratings, favourites */
.fav-form { display: inline-block; }
.fav, .fav-guest { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--w-mute); cursor: pointer; padding: 4px; border-radius: 2px; font-size: 13px; font-weight: 500; text-decoration: none; transition: color var(--w-fast), background var(--w-fast); }
.fav:hover, .fav-guest:hover { background: var(--w-clay-fill); color: var(--w-clay); }
.fav svg, .fav-guest svg { width: 18px; height: 18px; fill: none; stroke: var(--w-mute); }
.fav:hover svg, .fav-guest:hover svg { stroke: var(--w-clay); }
.fav.is-on { color: var(--w-clay); }
.fav.is-on svg { fill: var(--w-clay); stroke: var(--w-clay); }
.fav-count { font-variant-numeric: tabular-nums; }

.preset-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.preset-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--w-key); border-radius: 2px; padding: 12px 14px; }
.preset-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; }
.preset-title { display: block; }
.preset-sub a { color: var(--w-bone2); }
.preset-sub a:hover { color: var(--w-green); }
.preset-note { font-style: italic; }
.preset-credit a { color: var(--w-bone2); }
.preset-credit a:hover { color: var(--w-green); }
.preset-row-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 0 0 auto; }

.preset-rate-form { display: inline-flex; gap: 2px; align-items: center; }
.preset-rating { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.star { border: 0; background: transparent; padding: 2px; cursor: pointer; line-height: 0; color: var(--w-mute); }
.star svg { width: 14px; height: 14px; fill: none; stroke: var(--w-mute); }
.star:hover svg, .star.is-on svg, .star.is-avg svg { fill: var(--w-clay); stroke: var(--w-clay); }
.preset-rating-n { font-size: 12px; color: var(--w-mute); font-variant-numeric: tabular-nums; }

.preset-upload-form { margin-top: 16px; display: flex; flex-direction: column; }
.preset-upload-form select, .preset-upload-form input[type="text"], .preset-upload-form input[type="file"], .preset-upload-form textarea {
  width: 100%; background: var(--w-key); color: var(--w-bone); border: 0; border-radius: 2px; padding: 10px 12px; font: inherit; font-size: 14px;
}
.preset-upload-form textarea { resize: vertical; min-height: 64px; }
.preset-upload-form select { cursor: pointer; }
.preset-upload-form input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--w-green); flex: 0 0 auto; }
.preset-upload-form .meta { margin-top: 4px; }

.preset-pending ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.preset-pending li { color: var(--w-bone2); font-size: 13px; }

@media (max-width: 480px) {
  .preset-row { flex-direction: column; }
  .preset-row-actions { width: 100%; justify-content: space-between; }
}

/* people and credits */
.cell-credit { display: block; margin-top: 2px; font-size: 12px; color: var(--w-mute); }
.cell-credit a { color: inherit; cursor: pointer; }
.cell-credit a:hover { color: var(--w-green); }

.credit-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.credit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--w-key); border-radius: 2px; padding: 10px 14px; }
.credit-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.credit-part { color: var(--w-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.credit-row a { color: var(--w-bone); cursor: pointer; }
.credit-row a:hover { color: var(--w-green); }
.credit-note { color: var(--w-bone2); font-style: italic; }

.credit-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.credit-form select, .credit-form input[type="text"], .credit-form textarea {
  width: 100%; background: var(--w-key); color: var(--w-bone); border: 0; border-radius: 2px; padding: 10px 12px; font: inherit; font-size: 14px; cursor: text;
}
.credit-form select { cursor: pointer; }
.credit-form textarea { resize: vertical; min-height: 48px; }
.credit-form input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--w-green); flex: 0 0 auto; }
.credit-form .ts-control { cursor: text; }
.credit-pending { color: var(--w-bone2); font-size: 13px; margin-top: 6px; }

/* messages */
.msg-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.msg-table-wrap { overflow-x: auto; }
table.db tbody tr[data-href] { cursor: pointer; }
.pill-msg-new { background: var(--w-amber-fill); color: var(--w-amber); } .pill-msg-new:hover { background: var(--w-amber-fill-hover); color: var(--w-amber); }
.pill-msg-read { background: var(--w-key); color: var(--w-bone2); } .pill-msg-read:hover { background: var(--w-raise); color: var(--w-bone); }
.pill-msg-replied { background: var(--w-green-fill); color: var(--w-green); } .pill-msg-replied:hover { background: var(--w-green-fill-hover); color: var(--w-green); }
.pill-msg-archived { background: var(--w-key); color: var(--w-mute); }
.msg-body { white-space: pre-wrap; word-break: break-word; background: var(--w-key); border-radius: 2px; padding: 14px 16px; margin: 12px 0 16px; font-size: 15px; line-height: 1.6; }
.msg-status-form { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.msg-status-form textarea { width: 100%; background: var(--w-key); color: var(--w-bone); border: 0; border-radius: 2px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; min-height: 64px; cursor: text; }
.msg-status-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.msg-delete-form { margin-top: 16px; }

@media (max-width: 400px) {
  .msg-tabs, .msg-status-buttons { flex-direction: column; align-items: stretch; }
}