:root {
    --ink: #15323a;
    --muted: #65777c;
    --paper: #f6f4ed;
    --surface: #fffef9;
    --line: #d8ded9;
    --teal: #087f83;
    --teal-dark: #075d61;
    --aqua: #91d8cf;
    --coral: #e8795d;
    --gold: #d9a441;
    --green: #3c8b69;
    --danger: #a83d3d;
    --shadow: 0 18px 48px rgba(20, 50, 58, .09);
    --radius: 18px;
    --font: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
html[lang="he"] { font-size: 18px; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(145, 216, 207, .2), transparent 28rem),
        var(--paper);
    font: 16px/1.55 var(--font);
}
a { color: var(--teal-dark); text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
button, .button, select { cursor: pointer; }
/* The `hidden` attribute must always win over component `display` rules
   (e.g. .status-pill sets display:inline-block, which otherwise defeats it). */
[hidden] { display: none !important; }
input, select, textarea {
    width: 100%;
    min-height: 45px;
    padding: .72rem .86rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid #bdcac6;
    border-radius: 10px;
    outline: none;
}
textarea { resize: vertical; min-height: 110px; }
/* Hebrew reads a little small next to Latin at the same px, so bump editable
   Hebrew fields (and their shown value) up slightly. */
:is(textarea, input)[lang="he"] { font-size: 1.08em; }
input:focus, select:focus, textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(8, 127, 131, .13);
}
select {
    min-height: 36px;
    padding: .38rem .62rem;
    font-size: .82rem;
    line-height: 1.2;
}
label > span, fieldset legend {
    display: block;
    margin-bottom: .34rem;
    font-size: .88rem;
    font-weight: 700;
}
label small { display: block; margin-top: .35rem; color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .55rem; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.03; letter-spacing: -.045em; }
h2 { line-height: 1.18; letter-spacing: -.025em; }
.shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.page { min-height: calc(100vh - 190px); padding-block: 1.55rem 2.7rem; }
.muted { color: var(--muted); }
.form-hint { margin: -.2rem 0 0; font-size: .82rem; }
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.eyebrow {
    margin-bottom: .55rem;
    color: var(--teal);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
[dir="rtl"] .eyebrow { letter-spacing: 0; }

.site-header {
    position: relative;
    z-index: 10;
    background: rgba(255, 254, 249, .93);
    border-bottom: 1px solid rgba(21, 50, 58, .1);
    backdrop-filter: blur(15px);
}
.header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--ink);
    text-decoration: none;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: white;
    background: var(--teal);
    border-radius: 50% 50% 48% 52% / 58% 47% 53% 42%;
    font-size: 1.75rem;
    transform: rotate(-8deg);
}
.brand strong, .brand small { display: block; }
.brand strong { line-height: 1.2; }
.brand small { color: var(--muted); font-size: .72rem; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.theme-toggle {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    color: var(--teal-dark);
    background: #e8f4f1;
    border: 1px solid #badbd5;
    border-radius: 50%;
    font-size: 1.05rem;
}
.theme-toggle:hover { transform: translateY(-1px); }
.language-switcher { display: flex; gap: .35rem; align-items: center; direction: ltr; font-size: .78rem; font-weight: 800; }
.language-switcher a { color: var(--muted); text-decoration: none; }
.language-switcher a[aria-current="true"] { color: var(--teal); }
html[lang="he"] .language-switcher { font-size: .92rem; }
html[lang="he"] :is(
    .brand small,
    .eyebrow,
    .button-small,
    .section-label,
    .status-pill,
    .role-pill,
    .result-count,
    .page-size,
    .table-note,
    .project-type,
    .review-title small,
    .review-actions small
) { font-size: .84rem; }
.site-nav { background: var(--ink); color: white; }
.nav-inner { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .2rem; }
.nav-links a, .user-menu a, .link-button {
    padding: .55rem .75rem;
    color: white;
    background: transparent;
    border: 0;
    text-decoration: none;
    border-radius: 7px;
}
.nav-links a:hover, .link-button:hover { background: rgba(255,255,255,.1); }
.user-menu { display: flex; align-items: center; gap: .5rem; font-size: .86rem; }
.user-menu form { margin: 0; }
.logout-button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; }
.logout-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .logout-icon { transform: scaleX(-1); }
.menu-toggle { display: none; padding: .45rem .65rem; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 8px; }

.button {
    display: inline-flex;
    min-height: 43px;
    padding: .68rem 1rem;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-weight: 750;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
}
.button-primary { color: white; background: var(--teal); }
.button-primary:hover { background: var(--teal-dark); }
.button-secondary { color: var(--teal-dark); background: #e8f4f1; border-color: #badbd5; }
.button-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.button-danger { color: white; background: var(--danger); }
.button-wide { width: 100%; }
.button-small { min-height: 34px; padding: .45rem .7rem; font-size: .84rem; }

.notice { margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 10px; }
.notice-success { color: #185d46; background: #e0f4e9; border: 1px solid #addac1; }
.notice-error { color: #842f2f; background: #f9e5e3; border: 1px solid #e6b4af; }
.notice-info { color: #175a62; background: #e3f3f3; border: 1px solid #b9dddd; }
.login-wrap {
    min-height: min(650px, calc(100vh - 190px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow);
}
.login-panel { align-self: center; width: min(470px, 100%); padding: clamp(2rem, 6vw, 5rem); }
.login-panel .stack { display: grid; gap: 1rem; margin-top: 1.7rem; }
.login-art {
    position: relative;
    display: grid;
    place-content: center;
    overflow: hidden;
    color: white;
    background: linear-gradient(145deg, #0b8c8c, #07545e);
    text-align: center;
}
.login-art::before, .login-art::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
}
.login-art::before { width: 440px; height: 440px; inset: -120px -130px auto auto; }
.login-art::after { width: 300px; height: 300px; inset: auto auto -110px -70px; }
.login-art strong {
    position: relative;
    z-index: 2;
    max-width: 9em;
    padding-inline: 1rem;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    line-height: .96;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.login-art small { position: relative; z-index: 2; margin-top: .75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .14em; }
.water-line { position: absolute; left: -10%; width: 120%; height: 120px; border: 2px solid rgba(255,255,255,.22); border-color: rgba(255,255,255,.22) transparent transparent; border-radius: 50%; }
.water-line-one { top: 25%; transform: rotate(-5deg); }
.water-line-two { top: 32%; transform: rotate(4deg); }
.fish { position: absolute; color: rgba(255,255,255,.45); font-size: 2rem; }
.fish-one { left: 15%; top: 23%; }
.fish-two { right: 12%; bottom: 22%; transform: scale(.7); }

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.1rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    color: white;
    background: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hero p { margin: 0; color: #cce1df; }
.hero .eyebrow { color: var(--aqua); }
.progress-ring {
    --size: 112px;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    background: conic-gradient(var(--aqua) calc(var(--progress) * 1%), rgba(255,255,255,.12) 0);
    border-radius: 50%;
}
.progress-ring::before { content: ""; position: absolute; width: 86px; height: 86px; background: var(--ink); border-radius: 50%; }
.progress-ring span { position: relative; z-index: 1; font-size: 1.35rem; font-weight: 800; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.category-card {
    position: relative;
    display: flex;
    min-height: 350px;
    padding: 1.45rem;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 5px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(21,50,58,.06);
}
.category-card.accent-1 { --accent: var(--teal); }
.category-card.accent-2 { --accent: var(--coral); }
.category-card.accent-3 { --accent: var(--gold); }
.category-number { position: absolute; inset-inline-end: 1rem; top: -.2rem; color: rgba(21,50,58,.06); font-size: 6rem; font-weight: 900; line-height: 1; }
.category-card h2 { position: relative; min-height: 3.2em; margin: 2.2rem 0 1.2rem; font-size: 1.35rem; }
.metric-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem; }
.metric-row strong { font-size: 1.25rem; }
.progress-track { height: 8px; margin: .65rem 0 1rem; overflow: hidden; background: #e5e9e4; border-radius: 10px; }
.progress-track span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.category-meta { display: grid; gap: .25rem; margin-bottom: 1.2rem; color: var(--muted); font-size: .82rem; }
.category-card .button { margin-top: auto; }
.admin-callout {
    display: flex;
    margin-top: 1.2rem;
    padding: 1.2rem 1.4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #e5f2ef;
    border: 1px solid #c3ddd7;
    border-radius: 13px;
}
.admin-callout p { margin: .2rem 0 0; color: var(--muted); }
.episode-strip {
    display: flex;
    margin-bottom: 1.2rem;
    padding: 1.2rem 1.4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.episode-strip h2 { margin: 0; font-size: 1.1rem; }
.episode-links { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }
.episode-links form { margin: 0; }
.hero-welcome { margin-bottom: .2rem !important; font-weight: 700; }
.series-overview { overflow: hidden; }
.series-overview-head,
.series-overview-row {
    display: grid;
    grid-template-columns: 34px minmax(300px, 1fr) 120px 120px 180px;
    align-items: center;
}
.series-overview-head {
    padding: .45rem .7rem;
    color: var(--muted);
    background: #f0f1eb;
    border-bottom: 1px solid var(--line);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}
.series-overview-head span:nth-child(n+3),
.series-overview-row > span[data-label] { text-align: center; }
.series-overview-row {
    min-height: 56px;
    padding: .35rem .7rem;
    border-bottom: 1px solid var(--line);
}
.series-overview-row:last-child { border-bottom: 0; }
.series-overview-row.is-active { background: #e9f5f2; box-shadow: inset 4px 0 0 var(--teal); }
[dir="rtl"] .series-overview-row.is-active { box-shadow: inset -4px 0 0 var(--teal); }
.series-overview-row form { margin: 0; }
.episode-drag-handle {
    display: grid;
    width: 30px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 1.25rem;
    cursor: grab;
    touch-action: none;
}
.episode-drag-handle:hover,
.episode-drag-handle:focus-visible { color: var(--teal-dark); background: rgba(8,127,131,.1); border-color: var(--line); }
.episode-drag-handle:active { cursor: grabbing; }
.series-overview-row.is-dragging { opacity: .5; }
.project-list-button {
    display: flex;
    width: 100%;
    min-height: 42px;
    padding: .35rem .45rem;
    align-items: center;
    gap: .55rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: start;
}
.project-list-button:hover { background: rgba(8,127,131,.09); }
.series-overview-row > span[data-label] { color: var(--muted); font-variant-numeric: tabular-nums; }
.series-overview-row > span[data-label] strong { color: var(--ink); }
.series-overview-row.is-episode-row .project-list-button { padding-inline-start: 1.9rem; }

.page-heading { display: flex; margin-bottom: 1rem; align-items: end; justify-content: space-between; gap: .7rem; }
.page-heading h1 { margin: 0; }
.page-heading-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .4rem .8rem; }
[data-show-all-others].is-open { color: var(--teal-dark); background: #e8f4f1; border-color: #badbd5; }
html[data-theme="dark"] [data-show-all-others].is-open { color: var(--teal-dark); background: #153136; border-color: #36565a; }
.qa-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.4rem; margin: 0rem .15rem 1rem; color: var(--muted); font-size: .78rem; }
.qa-legend-item { display: inline-flex; align-items: center; gap: .45rem; }
.qa-legend .interest-signal b, .qa-legend .importance-signal b { display: none; }
.reviewed-mark { display: inline-flex; width: 1.15rem; height: 1.15rem; align-items: center; justify-content: center; color: #23664f; background: #daf0e5; border-radius: 50%; font-size: .68rem; font-weight: 900; }
html[data-theme="dark"] .reviewed-mark { color: #a6e6d1; background: #193b35; }
.page-heading-compact h1 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; }
.heading-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.result-count { color: var(--muted); font-size: .9rem; font-weight: 700; }
.result-count.standalone { margin: .5rem 0 1rem; text-align: end; }
.filters {
    display: grid;
    grid-template-columns: 1.15fr 1.35fr .8fr 1.4fr auto;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .7rem;
    align-items: end;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.admin-filters { grid-template-columns: 1.1fr 1.1fr .65fr .85fr 1fr 1.2fr auto; }
.question-filters { grid-template-columns: 1fr 1fr 1.35fr 1.2fr auto; }
/* Back-to-top button, shown only while the filter row is stuck to the top. */
.filter-scrolltop {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -13px;
    z-index: 3;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateX(-50%);
    color: #fff;
    background: var(--teal);
    border: 2px solid var(--surface);
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(10, 34, 30, .25);
    cursor: pointer;
}
.filter-scrolltop:hover, .filter-scrolltop:focus-visible { background: var(--teal-dark); }
.question-filters.is-stuck .filter-scrolltop { display: inline-flex; }
.filter-actions { display: flex; gap: .4rem; }
/* Filter row: the search box and the Clear/Filter buttons match the select height. */
.filters input[type="search"] {
    min-height: 36px;
    padding: .38rem .62rem;
    font-size: .82rem;
    line-height: 1.2;
}
.filters .filter-actions .button {
    min-height: 36px;
    padding: .38rem .85rem;
    font-size: .82rem;
}
.filters.is-filtering { opacity: .68; pointer-events: none; }
.qa-list { display: grid; gap: .85rem; }
.qa-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(21,50,58,.05);
    scroll-margin-top: 1rem;
}
.qa-card.is-reviewed { border-color: #a8cec4; }
.qa-header { display: flex; padding: .45rem .85rem; align-items: center; gap: .5rem .8rem; background: #f0f1eb; border-bottom: 1px solid var(--line); overflow-x: auto; }
.qa-heading { display: flex; align-items: baseline; gap: .35rem; flex: 0 1 auto; min-width: 0; }
.qa-header > .status-pill { flex: 0 0 auto; margin-inline-start: 0; }
.pair-number { color: var(--teal); font-weight: 850; }
.section-label { overflow: hidden; color: var(--muted); font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.status-pill, .role-pill { display: inline-block; padding: .25rem .5rem; color: #23664f; background: #daf0e5; border-radius: 100px; font-size: .73rem; font-weight: 800; }
.episode-memberships {
    display: flex;
    padding: .45rem .85rem;
    flex-wrap: wrap;
    gap: .45rem;
    background: #f8fbf8;
    border-bottom: 1px solid var(--line);
}
.episode-membership {
    display: inline-flex;
    padding: .35rem .5rem .35rem .65rem;
    align-items: center;
    gap: .55rem;
    color: var(--teal-dark);
    background: #e5f3f0;
    border: 1px solid #c4ded8;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
}
.qa-ranking-line {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: 0 1 auto;
    min-width: 0;
    /* Sit at the opposite end from the "#1 · Episode …" heading. */
    margin-inline-start: auto;
    overflow-x: auto;
}
.inline-interest-form,
.inline-relevance-group,
.inline-relevance-form,
.inline-relevance-display {
    display: inline-flex;
    margin: 0;
    align-items: center;
    gap: .35rem;
}
.inline-interest-form { flex: 0 0 auto; padding-inline-end: .8rem; border-inline-end: 1px solid var(--line); }
.inline-interest-form.is-saving,
.inline-relevance-form.is-saving { opacity: .62; pointer-events: none; }
.inline-relevance-group { flex: 0 0 auto; }
.inline-relevance-form,
.inline-relevance-display {
    padding: .2rem .35rem .2rem .55rem;
    color: var(--teal-dark);
    background: #e5f3f0;
    border: 1px solid #c4ded8;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 750;
}
.ranking-label { color: var(--muted); font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.score-select-control {
    position: relative;
    display: inline-flex;
    min-height: 32px;
    margin: 0;
    align-items: center;
    cursor: pointer;
}
.score-icon-face {
    display: inline-flex;
    min-height: 32px;
    padding: .2rem .4rem;
    align-items: center;
    color: var(--teal-dark);
    background: #fff;
    border: 1px solid #bcd1cc;
    border-radius: 7px;
}
.score-select-control select {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.score-select-control:focus-within .score-icon-face {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(8,127,131,.18);
}
.interest-signal { display: inline-flex; align-items: center; gap: .28rem; direction: ltr; }
.interest-mark { color: var(--gold); font-size: 1.15rem; line-height: 1; }
.interest-dots { display: inline-flex; gap: 2px; }
.interest-dots i { display: block; width: 5px; height: 5px; background: #c5cfcc; border-radius: 50%; }
.interest-dots i.is-filled { background: var(--gold); }
.interest-signal b { min-width: 1em; font-size: .72rem; line-height: 1; }
.ranking-clear {
    width: 24px;
    min-height: 24px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-size: 1rem;
}
.ranking-clear:hover { color: var(--danger); background: rgba(168,61,61,.08); }
.inline-relevance-form .score-select-control,
.inline-relevance-form .score-icon-face { min-height: 28px; }
.inline-relevance-form .score-icon-face { padding: .1rem .3rem; border: 0; background: transparent; }
.importance-signal {
    display: inline-flex;
    height: 22px;
    align-items: end;
    gap: 2px;
    direction: ltr;
}
.importance-signal i {
    display: block;
    width: 4px;
    height: 7px;
    background: #bdc9c6;
    border-radius: 2px 2px 0 0;
}
.importance-signal i:nth-child(1) { height: 7px; }
.importance-signal i:nth-child(2) { height: 10px; }
.importance-signal i:nth-child(3) { height: 13px; }
.importance-signal i:nth-child(4) { height: 16px; }
.importance-signal i:nth-child(5) { height: 19px; }
.importance-signal i.is-filled { background: var(--teal); }
.importance-signal b {
    min-width: 1.1em;
    margin-inline-start: 3px;
    color: var(--teal-dark);
    font-size: .72rem;
    line-height: 1;
    text-align: center;
}
.importance-button {
    width: auto;
    min-height: 32px;
    padding: .25rem .45rem;
    color: inherit;
    background: #fff;
    border: 1px solid #bcd1cc;
    border-radius: 7px;
}
.importance-button:hover, .importance-button:focus-visible {
    background: #e5f3f0;
    border-color: var(--teal);
}
.importance-button-large { min-height: 43px; padding-inline: .7rem; }
.qa-content { display: grid; grid-template-columns: 1fr 1fr; }
.qa-content > section { padding: clamp(.85rem, 2vw, 1.35rem); }
.qa-content h2 { margin: 0; font-size: 1.35rem; }
.qa-content h2 span { display: block; margin-bottom: .5rem; color: var(--teal); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.answer-block { background: #edf7f4; border-inline-start: 1px solid #d3e7e1; }
.answer-block h3 { color: var(--teal-dark); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.answer-block p { margin: 0; }
.review-form { padding: .9rem clamp(.85rem, 2vw, 1.35rem); background: #fff; border-top: 1px solid var(--line); }
.review-form.is-saving { opacity: .68; pointer-events: none; }
.review-title { display: flex; margin-bottom: .85rem; align-items: start; justify-content: space-between; gap: 1rem; }
.review-title h3 { margin-bottom: .15rem; font-size: 1rem; }
.review-title p, .review-title small, .review-actions small { margin: 0; color: var(--muted); font-size: .78rem; }
.rating-field { margin: 0 0 .9rem; padding: 0; border: 0; }
.thumb-rating { display: flex; align-items: center; gap: .18rem; direction: ltr; }
.thumb-rating input { position: absolute; opacity: 0; pointer-events: none; }
.thumb-rating label {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    color: #81908e;
    background: #eef0ed;
    border: 1px solid #d5dbd7;
    border-radius: 9px;
    filter: grayscale(1);
    transition: transform .12s ease, background .12s ease, filter .12s ease;
}
.thumb-rating label small { margin: 0 0 0 .1rem; color: inherit; font-size: .62rem; font-weight: 850; }
.thumb-rating label:hover { transform: translateY(-2px); }
.thumb-rating input:focus + label { outline: 3px solid rgba(8,127,131,.2); }
.thumb-rating input:checked + label {
    color: white;
    background: var(--teal);
    border-color: var(--teal);
    filter: none;
    transform: translateY(-2px);
}
.clear-rating { width: 32px; height: 32px; margin-inline-start: .35rem; color: var(--muted); background: transparent; border: 0; font-size: 1.35rem; }
.review-actions { display: flex; margin-top: .7rem; align-items: center; justify-content: space-between; gap: 1rem; }
.review-actions .button { min-height: 32px; padding: .32rem .85rem; font-size: .8rem; }
.empty-state { padding: 3rem 1.5rem; color: var(--muted); background: var(--surface); border: 1px dashed #b7c4c0; border-radius: 14px; text-align: center; }
.pagination-footer {
    display: flex;
    margin-top: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.pagination { display: flex; margin-top: 0; align-items: center; justify-content: center; gap: 1rem; }
.pagination .is-disabled { opacity: .45; cursor: not-allowed; }
.page-size { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.page-size a {
    min-width: 34px;
    padding: .38rem .55rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    text-align: center;
    text-decoration: none;
}
.page-size a[aria-current="true"] { color: white; background: var(--teal); border-color: var(--teal); }

.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-bottom: .9rem; }
.stats-grid article { padding: .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.stats-grid span { display: block; color: var(--muted); font-size: .77rem; font-weight: 700; }
.stats-grid strong { display: block; margin-top: .2rem; font-size: 2rem; }
.admin-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: .8rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 22px rgba(21,50,58,.04); }
.panel-heading { display: flex; padding: .7rem .9rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 1rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .56rem .65rem; border-bottom: 1px solid #e4e8e4; text-align: start; vertical-align: top; }
th { color: var(--muted); background: #f4f4ef; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:last-child td { border-bottom: 0; }
.row-muted { opacity: .55; }
.table-note { display: block; color: var(--muted); font-size: .72rem; }
.table-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
th.col-type, td.col-type { width: 1%; white-space: nowrap; }
.projects-table tr.row-child > td:first-child { padding-inline-start: 2.2rem; }
.admin-grid table tr.row-child > td:first-child { padding-inline-start: 2rem; }
th.drag-cell, td.drag-cell { width: 1%; padding-inline: .3rem .5rem; text-align: end; vertical-align: middle; }
.projects-table tr[data-edit-href]:hover > td { background: rgba(8, 127, 131, .05); }
.projects-table tr.is-dragging > td { opacity: .45; }
.recent-list article { display: flex; padding: .9rem 1rem; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #e4e8e4; }
.recent-list article:last-child { border-bottom: 0; }
.recent-list strong, .recent-list span { display: block; }
.recent-list span { color: var(--muted); font-size: .78rem; }
.recent-meta { flex: 0 0 auto; text-align: end; }
.form-panel { padding: clamp(.8rem, 2vw, 1.25rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.checkbox-label { display: flex; margin-top: 1rem; align-items: center; gap: .5rem; }
.checkbox-label input { width: auto; min-height: 0; }
.checkbox-label span { margin: 0; }
.form-actions { display: flex; margin-top: 1rem; justify-content: end; gap: .4rem; }
.project-languages { margin-top: 1.1rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.project-languages > legend { padding: 0 .4rem; font-weight: 700; font-size: .9rem; }
.language-toggle-list { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0 0 1rem; }
.language-toggle { margin-top: 0; }
.language-toggle input:disabled + span { color: var(--muted); }
.project-translations { display: grid; gap: .8rem; }
.language-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.language-fields-heading { grid-column: 1 / -1; margin: 0; font-weight: 650; font-size: .82rem; color: var(--muted); }
.language-fields :is(input, textarea).is-translating { opacity: .55; }
@media (max-width: 640px) { .language-fields { grid-template-columns: 1fr; } }
.input-with-action { display: flex; gap: .4rem; align-items: stretch; }
.input-with-action > input { flex: 1 1 auto; min-width: 0; }
.translate-open-button {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; padding: 0;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    color: var(--teal-dark); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.translate-open-button:hover, .translate-open-button:focus-visible { background: rgba(8, 127, 131, .1); border-color: var(--teal); }
.translate-dialog .translate-dialog-group { margin: .5rem 0; padding: .5rem .75rem .65rem; border: 1px solid var(--line); border-radius: 10px; }
.translate-dialog .translate-dialog-group > legend { padding: 0 .35rem; font-weight: 650; font-size: .85rem; }
/* Override .structure-dialog label { display:grid } so the box sits inline with its text. */
.translate-dialog .checkbox-label { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.translate-dialog .checkbox-label.is-disabled { opacity: .5; cursor: not-allowed; }
.translate-language-list { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.translate-language-list .checkbox-label { margin-top: 0; }
.review-admin-list { display: grid; gap: .8rem; }
.review-admin-card { padding: 1rem 1.2rem; }
.review-admin-card header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.review-admin-card header strong, .review-admin-card header a { display: block; }
.review-admin-card header a { color: var(--muted); font-size: .78rem; }
.review-admin-meta { text-align: end; }
.review-admin-meta span, .review-admin-meta time { display: block; }
.review-admin-meta time { color: var(--muted); font-size: .75rem; }
.review-question { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.review-question span { color: var(--teal); font-size: .76rem; font-weight: 750; }
.review-question p { margin: .25rem 0 0; font-weight: 650; }
.review-admin-meta .review-scores { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.review-admin-meta .score-chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem .4rem; }
.review-admin-meta .score-chip span { display: inline-flex; }
.review-scores .ranking-label { font-size: .66rem; }
.relevance-chip { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); font-size: .72rem; font-weight: 750; }
.review-translation { color: var(--muted); }
.others-relevance { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .8rem 0 0; }
blockquote { margin: .8rem 0 0; padding: .8rem 1rem; background: #edf7f4; border-inline-start: 4px solid var(--teal); border-radius: 6px; }
.project-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.project-choice-card {
    display: flex;
    min-height: 250px;
    padding: 1.35rem;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 5px solid var(--teal);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(21,50,58,.06);
}
.project-choice-card h2 { margin: .8rem 0; }
.project-choice-card p { color: var(--muted); }
.project-choice-card .button { margin-top: auto; }
.project-choice-card small { color: var(--muted); }
.project-type { align-self: start; padding: .25rem .55rem; color: var(--teal-dark); background: #e2f2ef; border-radius: 99px; font-size: .72rem; font-weight: 800; }
.project-switcher select { width: min(280px, 28vw); min-height: 34px; padding: .35rem 1.8rem .35rem .55rem; font-size: .75rem; }
.assignment-panel { padding: 1rem; }
.assignment-list { display: grid; gap: .55rem; }
.assignment-item {
    display: flex;
    padding: .85rem 1rem;
    align-items: flex-start;
    gap: .75rem;
    background: #f7f7f2;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.assignment-item.is-episode { margin-inline-start: 2rem; border-inline-start: 4px solid var(--aqua); }
.assignment-item input { width: auto; min-height: 0; margin-top: .3rem; }
.assignment-item > span { margin: 0; }
.assignment-item strong, .assignment-item small { display: block; }
.assignment-item small { color: var(--muted); }
.import-panel input[type="file"] { padding: .55rem; }
.readonly-value {
    min-height: 45px;
    padding: .7rem 0;
    color: var(--ink);
    border-bottom: 2px solid var(--teal);
    font-size: 1.08rem;
    font-weight: 850;
}
.stack { display: grid; gap: .55rem; }
.structure-filters { grid-template-columns: repeat(3, 1fr); }
.structure-grid { margin-bottom: .8rem; }
.structure-panel { margin-top: .8rem; overflow: hidden; }
.structure-category { border-bottom: 1px solid var(--line); }
.structure-category:last-child { border-bottom: 0; }
.structure-category > header,
.structure-section {
    display: flex;
    padding: .8rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.structure-category > header { background: #edf7f4; }
.structure-section { padding-inline-start: 2rem; border-top: 1px solid #e5e9e5; }
.inline-move-form { display: flex; align-items: center; gap: .4rem; }
.inline-move-form select { width: min(340px, 34vw); min-height: 36px; padding-block: .4rem; }
.structure-qa-list { display: grid; }
.structure-qa-row {
    padding: .7rem 1rem;
    border-bottom: 1px solid #e6e9e5;
}
.structure-qa-row > label {
    display: grid;
    grid-template-columns: auto 75px 1fr;
    align-items: start;
    gap: .65rem;
}
.structure-qa-list input[type="checkbox"] { width: auto; min-height: 0; margin-top: .5rem; }
.order-input { min-height: 36px; padding: .4rem; }
.bulk-actions { display: flex; padding: 1rem; align-items: center; justify-content: end; gap: .5rem; }
.bulk-actions select { width: min(520px, 50vw); }
.episode-bulk-actions { border-top: 1px solid var(--line); background: #f7faf8; }
.admin-episode-assignments {
    display: flex;
    margin: .55rem 0 0 2rem;
    flex-wrap: wrap;
    gap: .4rem;
}
.admin-episode-assignment {
    display: inline-flex;
    padding: .3rem .35rem .3rem .6rem;
    align-items: center;
    gap: .35rem;
    background: #eef6f3;
    border: 1px solid #cee1dc;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 700;
}
.assignment-remove {
    width: 28px;
    min-height: 28px;
    padding: 0;
    color: var(--danger);
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-size: 1.1rem;
}
.assignment-remove:hover { background: #f9e5e3; }
.qa-structure-suggestion { padding: .65rem clamp(.85rem, 2vw, 1.35rem); background: #f7f7f2; border-top: 1px solid var(--line); }
.qa-structure-suggestion summary { color: var(--teal-dark); cursor: pointer; font-weight: 800; }
.qa-structure-suggestion form { margin-top: .9rem; }
.qa-structure-suggestion .episode-suggestion-form { padding-top: .9rem; border-top: 1px solid var(--line); }
.suggestion-badges { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-inline-start: .45rem; vertical-align: middle; }
.suggestion-sent-note { display: inline-block; margin-inline-start: .6rem; color: #23664f; font-size: .8rem; font-weight: 750; }
.nav-badge {
    display: inline-block;
    min-width: 1.5em;
    margin-inline-start: .35rem;
    padding: .08rem .38rem;
    color: #1d2b25;
    background: var(--gold);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 850;
    text-align: center;
    vertical-align: middle;
}
.qa-suggestion-history { margin-top: .9rem; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.qa-suggestion-history h4 { margin: 0 0 .5rem; color: var(--muted); font-size: .73rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.qa-suggestion-history ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.qa-suggestion-history li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: .82rem; }
.qa-suggestion-history time { color: var(--muted); font-size: .75rem; }
.suggestion-admin-note { flex-basis: 100%; color: var(--muted); font-size: .78rem; }
.qa-others-reviews { padding: .65rem clamp(.85rem, 2vw, 1.35rem); background: #f7f7f2; border-top: 1px solid var(--line); }
.qa-others-reviews summary { display: flex; align-items: center; gap: .5rem; color: var(--teal-dark); cursor: pointer; font-weight: 800; }
.qa-others-reviews .others-count { padding: .05rem .45rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.others-review-list { display: grid; gap: .55rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.others-review-item { padding: .55rem .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.others-review-item.is-empty { opacity: .72; }
/* Name, Interesting and Relevant sit on one line above the comment fields. */
.others-review-head { display: flex; align-items: center; gap: .35rem .9rem; flex-wrap: nowrap; overflow-x: auto; }
.others-review-name { flex: 0 0 auto; }
.others-review-score { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; margin-inline-start: auto; }
.others-review-relevance { display: inline-flex; align-items: center; gap: .3rem .5rem; flex: 0 0 auto; margin: 0; }
.others-review-item blockquote { margin: .45rem 0 0; padding-inline-start: .6rem; border-inline-start: 3px solid var(--line); color: var(--ink); font-size: .86rem; }
.others-review-item .others-review-translation { color: var(--muted); }
.others-review-empty { margin: .3rem 0 0; font-size: .8rem; }
.suggested-destination { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.structure-suggestion-list { display: grid; gap: 1rem; margin-bottom: 1.2rem; }
.suggestion-source { padding: 1rem; }
.suggestion-source > header { margin-bottom: .8rem; }
.suggestion-source h2 { margin: .45rem 0 0; }
.suggestion-sections { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.section-suggestion { display: grid; grid-template-columns: minmax(160px, .7fr) 1fr 1fr auto; align-items: center; gap: .5rem; }
.status-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.status-tabs a { padding: .45rem .75rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.status-tabs a[aria-current="true"] { color: white; background: var(--teal); border-color: var(--teal); }
.suggestion-review-list { display: grid; gap: 1rem; }
.suggestion-review-card { padding: 1rem 1.2rem; }
.suggestion-review-card > header { display: flex; justify-content: space-between; gap: 1rem; }
.suggestion-review-card h2 { margin: .5rem 0 .1rem; font-size: 1.05rem; }
.suggestion-review-card small { color: var(--muted); }
.suggestion-decision { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6rem; margin-top: 1rem; }
.suggestion-decision > div { display: flex; gap: .4rem; }
.status-pending { color: #755217; background: #faefcf; }
.status-accepted { color: #23664f; background: #daf0e5; }
.status-rejected { color: #842f2f; background: #f9e5e3; }
.site-footer { padding: 1.4rem 0; color: #6f8487; background: var(--ink); font-size: .78rem; }

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e4eeee;
    --muted: #9bb0b3;
    --paper: #0c1518;
    --surface: #142126;
    --line: #304147;
    --teal: #43c7c8;
    --teal-dark: #8be2df;
    --aqua: #63cfc6;
    --coral: #ef8d75;
    --gold: #e1b65f;
    --green: #69bd92;
    --danger: #e47c7c;
    --shadow: 0 18px 48px rgba(0, 0, 0, .24);
}
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 10% 0%, rgba(67, 199, 200, .1), transparent 28rem),
        var(--paper);
}
html[data-theme="dark"] .site-header { background: rgba(20, 33, 38, .95); border-color: var(--line); }
html[data-theme="dark"] :is(.site-nav, .site-footer, .hero) { background: #071114; }
html[data-theme="dark"] .progress-ring::before { background: #071114; }
html[data-theme="dark"] :is(input, select, textarea) {
    color: var(--ink);
    background: #0e1a1e;
    border-color: #40535a;
}
html[data-theme="dark"] :is(.theme-toggle, .button-secondary) {
    color: var(--teal-dark);
    background: #173338;
    border-color: #31585b;
}
html[data-theme="dark"] .button-ghost { color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(
    .qa-header,
    .series-overview-head,
    th,
    .thumb-rating label,
    .page-size a
) { color: var(--ink); background: #1a292e; border-color: var(--line); }
html[data-theme="dark"] :is(
    .answer-block,
    blockquote,
    .structure-category > header,
    .episode-membership,
    .admin-episode-assignment
) { background: #153136; border-color: #315157; }
html[data-theme="dark"] :is(
    .review-form,
    .qa-structure-suggestion,
    .qa-others-reviews,
    .assignment-item,
    .episode-bulk-actions,
    .series-overview-row.is-active
) { background: #101d21; border-color: var(--line); }
html[data-theme="dark"] :is(.episode-memberships, .admin-callout) {
    background: #112428;
    border-color: var(--line);
}
html[data-theme="dark"] :is(.progress-track, .thumb-rating label) { background: #25353a; }
html[data-theme="dark"] :is(.panel, .qa-card, .category-card, .project-choice-card, .filters, .empty-state, .episode-strip) {
    background-color: var(--surface);
    border-color: var(--line);
}
html[data-theme="dark"] :is(td, .recent-list article, .structure-category, .structure-section, .structure-qa-row) {
    border-color: var(--line);
}
html[data-theme="dark"] .project-list-button { color: var(--ink); }
html[data-theme="dark"] .project-list-button:hover { background: rgba(67,199,200,.11); }
html[data-theme="dark"] :is(.project-type, .role-pill, .status-pill) {
    color: #a6e6d1;
    background: #193b35;
}
html[data-theme="dark"] .suggestion-sent-note { color: #a6e6d1; }
html[data-theme="dark"] .status-pending { color: #f2d897; background: #46391c; }
html[data-theme="dark"] .status-rejected { color: #f4b0aa; background: #482a2a; }
html[data-theme="dark"] .notice-success { color: #b8e8d3; background: #17382e; border-color: #2e6551; }
html[data-theme="dark"] .notice-error { color: #f4b6b0; background: #432727; border-color: #70403d; }
html[data-theme="dark"] .notice-info { color: #afe4e5; background: #17363a; border-color: #315b60; }
html[data-theme="dark"] .importance-button { color: var(--ink); background: #102226; border-color: #36565a; }
html[data-theme="dark"] :is(.inline-relevance-form, .inline-relevance-display) { color: var(--teal-dark); background: #153136; border-color: #315157; }
html[data-theme="dark"] .score-icon-face { color: var(--ink); background: #102226; border-color: #36565a; }
html[data-theme="dark"] .inline-relevance-form .score-icon-face { background: transparent; border-color: transparent; }
html[data-theme="dark"] .interest-dots i { background: #4a5c60; }
html[data-theme="dark"] .interest-dots i.is-filled { background: var(--gold); }
html[data-theme="dark"] .importance-signal i { background: #4a5c60; }
html[data-theme="dark"] .importance-signal i.is-filled { background: var(--teal); }
html[data-theme="dark"] .importance-signal b { color: var(--teal-dark); }
html[data-theme="dark"] .row-muted { opacity: .48; }
html[data-theme="dark"] .projects-table tr[data-edit-href]:hover > td { background: rgba(67, 199, 200, .08); }

/* Computer and tablet screens: compact header locked to the top of the screen */
@media (min-width: 721px) {
    html { scroll-padding-top: var(--header-h, 108px); }
    .site-header { position: sticky; top: 0; }
    .header-inner { min-height: 52px; }
    .brand small { display: none; }
    .brand strong { font-size: .95rem; }
    .brand-mark { width: 32px; height: 32px; font-size: 1.25rem; }
    .theme-toggle { width: 30px; height: 30px; font-size: .92rem; }
    .header-actions { gap: .7rem; }
    .nav-inner { min-height: 38px; }
    .nav-links a, .user-menu a, .link-button { padding: .32rem .6rem; font-size: .88rem; }
    .logout-button { width: 32px; height: 32px; }
    .logout-icon { width: 18px; height: 18px; }
    .user-menu { font-size: .8rem; }
    .project-switcher select { min-height: 30px; padding-block: .25rem; }
}

@media (max-width: 980px) {
    .category-grid { grid-template-columns: 1fr; }
    .category-card { min-height: 280px; }
    .category-card h2 { min-height: 0; max-width: 70%; }
    .filters, .admin-filters { grid-template-columns: repeat(2, 1fr); }
    .filter-actions { grid-column: 1 / -1; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .admin-grid { grid-template-columns: 1fr; }
    .project-choice-grid { grid-template-columns: 1fr 1fr; }
    .series-overview-head,
    .series-overview-row { grid-template-columns: 34px minmax(220px, 1fr) 90px 90px 150px; }
}

@media (max-width: 720px) {
    .shell { width: min(100% - 1rem, 1180px); }
    .page { padding-block: 1.2rem 2.5rem; }
    .brand small { display: none; }
    .menu-toggle { display: block; }
    .site-nav { display: none; }
    .site-nav.is-open { display: block; }
    .nav-inner, .nav-links, .user-menu { align-items: stretch; flex-direction: column; }
    .nav-inner { padding-block: .6rem; }
    .login-wrap { min-height: 0; grid-template-columns: 1fr; }
    .login-panel { padding: 2rem 1.2rem; }
    .login-art { min-height: 220px; }
    .hero { align-items: start; }
    .progress-ring { --size: 86px; }
    .progress-ring::before { width: 66px; height: 66px; }
    .page-heading { align-items: start; flex-direction: column; }
    .heading-actions { width: 100%; }
    .heading-actions .button { flex: 1; }
    .filters, .admin-filters { grid-template-columns: 1fr; }
    .filter-actions { grid-column: auto; }
    .filter-actions .button { flex: 1; }
    .qa-content { grid-template-columns: 1fr; }
    .answer-block { border-inline-start: 0; border-top: 1px solid #d3e7e1; }
    .review-title, .review-actions { align-items: start; flex-direction: column; }
    .review-actions .button { width: 100%; }
    .thumb-rating { justify-content: space-between; }
    .thumb-rating label { width: 42px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .pagination-footer { align-items: stretch; flex-direction: column; }
    .page-size, .pagination { justify-content: center; }
    .project-choice-grid { grid-template-columns: 1fr; }
    .episode-strip { align-items: stretch; flex-direction: column; }
    .episode-links { justify-content: stretch; }
    .episode-links form, .episode-links .button { width: 100%; }
    .project-switcher select { width: 100%; }
    .assignment-item.is-episode { margin-inline-start: .8rem; }
    .structure-filters { grid-template-columns: 1fr; }
    .structure-category > header, .structure-section { align-items: stretch; flex-direction: column; }
    .inline-move-form { align-items: stretch; flex-direction: column; }
    .inline-move-form select { width: 100%; }
    .bulk-actions { align-items: stretch; flex-direction: column; }
    .bulk-actions select, .bulk-actions .button { width: 100%; }
    .episode-bulk-actions .importance-button { width: 100%; }
    .structure-qa-row > label { grid-template-columns: auto 62px 1fr; }
    .admin-episode-assignments { margin-inline-start: 0; }
    .section-suggestion { grid-template-columns: 1fr; }
    .suggestion-decision { grid-template-columns: 1fr; }
    .suggestion-decision > div { justify-content: end; }
    .series-overview-head { display: none; }
    .series-overview-row { position: relative; grid-template-columns: repeat(3, 1fr); padding: .55rem; gap: .4rem; }
    .series-overview-row form { grid-column: 1 / -1; }
    .series-overview-row > span[data-label] {
        padding: .4rem;
        background: rgba(8,127,131,.07);
        border-radius: 7px;
    }
    .series-overview-row > span[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .15rem;
        color: var(--muted);
        font-size: .68rem;
        font-weight: 750;
    }
    .episode-drag-placeholder { display: none; }
    .episode-drag-handle { position: absolute; z-index: 2; inset-inline-start: .65rem; top: .8rem; }
    .series-overview-row.is-episode-row .project-list-button { padding-inline-start: 2.5rem; }
}

@media (max-width: 430px) {
    .brand strong { font-size: .84rem; }
    .brand-mark { width: 36px; height: 36px; }
    .header-actions { gap: .45rem; }
    .hero { flex-direction: column; }
    .progress-ring { align-self: end; }
    .qa-header { align-items: start; flex-direction: column; }
    .thumb-rating label { width: 38px; height: 40px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Structure tree (admin/structure.php) */
.structure-filters { grid-template-columns: minmax(240px, 420px); }
.structure-group { border-bottom: 1px solid var(--line); }
.structure-group:last-child { border-bottom: 0; }
.structure-group-header {
    display: flex;
    padding: .75rem 1rem;
    align-items: center;
    gap: .6rem;
    background: #dcefe9;
    border-bottom: 1px solid var(--line);
    font-size: 1.02rem;
}
.structure-group .structure-category:last-child { border-bottom: 0; }
.structure-group.is-dragging, .structure-section.is-dragging, .qa-mini-row.is-dragging { opacity: .55; }
.structure-section { align-items: flex-start; padding-inline-start: 1.1rem; }
.structure-section > .button { flex-shrink: 0; }
.drag-placeholder { display: inline-block; width: 30px; flex-shrink: 0; }
.section-qa { flex: 1; min-width: 0; }
.section-qa > summary { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 700; }
.section-qa > summary::before { content: '▸'; color: var(--teal-dark); transition: transform .12s ease; }
.section-qa[open] > summary::before { transform: rotate(90deg); }
.section-qa > summary::-webkit-details-marker { display: none; }
.count-pill {
    display: inline-grid;
    min-width: 26px;
    padding: .1rem .4rem;
    place-items: center;
    color: var(--teal-dark);
    background: #e2f1ed;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
}
.qa-mini-list { display: grid; margin-top: .5rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qa-mini-row {
    display: flex;
    padding: .45rem .55rem;
    align-items: flex-start;
    gap: .5rem;
    background: #fff;
    border-top: 1px solid #e6e9e5;
}
.qa-mini-row:first-child { border-top: 0; }
.qa-mini-row .qa-select { width: auto; min-height: 0; margin-top: .45rem; }
.qa-mini-main { display: grid; flex: 1; min-width: 0; gap: .35rem; }
.qa-mini-question { font-size: .9rem; }
.qa-mini-scores { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.qa-mini-scores .inline-interest-form { display: inline-flex; align-items: center; }
.qa-mini-scores .score-icon-face { min-height: 26px; padding: .1rem .3rem; }
.qa-mini-assignment {
    display: inline-flex;
    padding: .1rem .15rem .1rem .45rem;
    align-items: center;
    gap: .15rem;
    background: #eef6f3;
    border: 1px solid #cee1dc;
    border-radius: 9px;
    font-size: .76rem;
    font-weight: 700;
}
.qa-mini-assignment .inline-relevance-form { display: inline-flex; align-items: center; gap: .25rem; }
.qa-mini-remove { display: inline-flex; }
.qa-mini-assignment .assignment-remove { width: 22px; min-height: 22px; font-size: 1rem; }
.assignment-add {
    width: 26px;
    min-height: 26px;
    padding: 0;
    color: var(--teal-dark);
    background: #e2f1ed;
    border: 1px dashed #9dc2ba;
    border-radius: 7px;
    font-weight: 800;
}
.assignment-add:hover { background: #d1e9e2; border-style: solid; }
.qa-mini-empty { margin: .5rem 0; color: var(--muted); font-size: .85rem; }
.qa-mini-actions { display: flex; margin-top: .5rem; justify-content: end; gap: .4rem; }

.structure-dialog {
    width: min(440px, 92vw);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(10, 34, 30, .25);
}
.structure-dialog::backdrop { background: rgba(7, 23, 20, .45); }
.structure-dialog form { display: grid; gap: .7rem; padding: 1.1rem 1.2rem; }
.structure-dialog h2 { margin: 0; font-size: 1.15rem; }
.structure-dialog p { margin: 0; }
.structure-dialog label { display: grid; gap: .3rem; }
.dialog-importance { display: flex; align-items: center; gap: .6rem; }
.extract-role-note { min-height: 2.4em; font-size: .82rem; }
.structure-dialog .form-actions { display: flex; margin-top: .3rem; justify-content: end; gap: .5rem; }

html[data-theme="dark"] .structure-group-header { background: #10262b; border-color: var(--line); }
html[data-theme="dark"] .qa-mini-list { border-color: #24393e; }
html[data-theme="dark"] .qa-mini-row { background: #0c1b1f; border-color: #24393e; }
html[data-theme="dark"] .count-pill { background: #153136; }
html[data-theme="dark"] .qa-mini-assignment { background: #153136; border-color: #315157; }
html[data-theme="dark"] .assignment-add { background: #153136; border-color: #36565a; }
html[data-theme="dark"] .structure-dialog { color: var(--ink); background: #0e2227; border-color: #2c464b; }

@media (max-width: 760px) {
    .structure-section .episode-drag-handle,
    .qa-mini-row .episode-drag-handle,
    .structure-group-header .episode-drag-handle { position: static; }
    .qa-mini-row { flex-wrap: wrap; }
    .structure-section { flex-direction: row; align-items: flex-start; }
}

/* Reviewing flow: hero CTA, status chips, sticky progress strip, autosave */
.hero-cta { margin-top: .8rem; }
.category-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.review-progress-strip {
    display: flex;
    margin-bottom: 1rem;
    padding: .5rem .8rem;
    align-items: center;
    gap: .8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.status-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.status-chip {
    display: inline-flex;
    padding: .3rem .7rem;
    align-items: center;
    gap: .35rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.status-chip b { color: var(--teal-dark); }
.status-chip:hover { border-color: var(--teal); }
.status-chip.is-active { color: #fff; background: var(--teal); border-color: var(--teal); }
.status-chip.is-active b { color: #eafffb; }
.strip-progress { flex: 1; height: 7px; background: #e3e9e6; border-radius: 999px; overflow: hidden; }
.strip-progress span { display: block; height: 100%; background: var(--teal); border-radius: inherit; transition: width .25s ease; }
.strip-count { color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.comment-save-status { color: var(--teal-dark); font-size: .78rem; }
/* Autosaving must not block continued typing in the comment box. */
.review-form[data-comment-form].is-saving { opacity: 1; pointer-events: auto; }

html[data-theme="dark"] .review-progress-strip { background: rgba(13, 27, 31, .92); border-color: var(--line); }
html[data-theme="dark"] .status-chip { color: var(--ink); background: #0c1b1f; border-color: #315157; }
html[data-theme="dark"] .status-chip.is-active { color: #04211f; background: var(--teal); }
html[data-theme="dark"] .status-chip.is-active b { color: #04211f; }
html[data-theme="dark"] .strip-progress { background: #24393e; }

@media (min-width: 721px) {
    /* Only the filter row sticks under the (sticky) main menu; it stays fully
       opaque so cards scroll cleanly beneath it. */
    .question-filters { position: sticky; top: var(--header-h, 108px); z-index: 8; }
}
@media (max-width: 720px) {
    .review-progress-strip { flex-wrap: wrap; }
    .strip-progress { min-width: 100%; order: 3; }
}

/* Long answers: clamp to ~6 lines with a Read more toggle */
.answer-text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}
.answer-toggle {
    margin-top: .5rem;
    padding: 0;
    color: var(--teal-dark);
    background: none;
    border: 0;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}
.answer-toggle:hover, .answer-toggle:focus-visible { text-decoration: underline; }

/* Keyboard reviewing: current-card highlight and shortcut help */
.qa-card.is-current { outline: 2px solid var(--teal); outline-offset: 2px; }
.kbd-help-button {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    color: var(--teal-dark);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 800;
}
.kbd-help-button:hover, .kbd-help-button:focus-visible { border-color: var(--teal); background: #e5f3f0; }
.kbd-help-dialog {
    width: min(360px, 92vw);
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(10, 34, 30, .25);
}
.kbd-help-dialog::backdrop { background: rgba(7, 23, 20, .45); }
.kbd-help-dialog h2 { margin: 0 0 .9rem; font-size: 1.15rem; }
.kbd-list { display: grid; margin: 0; gap: .55rem; }
.kbd-list > div { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.kbd-list dt { flex-shrink: 0; }
.kbd-list dd { margin: 0; color: var(--muted); font-size: .85rem; text-align: end; }
kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: .1rem .4rem;
    background: #f1f4f1;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
}
.kbd-help-dialog .form-actions { display: flex; margin-top: 1rem; justify-content: end; }

html[data-theme="dark"] .kbd-help-button { color: var(--teal-dark); background: #0c1b1f; border-color: #315157; }
html[data-theme="dark"] .kbd-help-dialog { color: var(--ink); background: #0e2227; border-color: #2c464b; }
html[data-theme="dark"] kbd { background: #102226; border-color: #36565a; }

@media (max-width: 720px) {
    .kbd-help-button { display: none; }
}

/* Review comment editor: one field per the reviewer's languages (primary first) */
.comment-langs { display: grid; gap: .7rem; }
.comment-langs.is-multi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.comment-lang-field { display: grid; margin: 0; }
.comment-lang { color: var(--muted); font-weight: 400; }
.context-menu {
    position: fixed;
    z-index: 60;
    min-width: 180px;
    padding: .3rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(10, 34, 30, .18);
}
.context-menu button {
    display: block;
    width: 100%;
    padding: .45rem .7rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-weight: 700;
    text-align: start;
}
.context-menu button:hover, .context-menu button:focus-visible { color: var(--teal-dark); background: #e5f3f0; }
html[data-theme="dark"] .context-menu { background: #0e2227; border-color: #2c464b; }
html[data-theme="dark"] .context-menu button:hover, html[data-theme="dark"] .context-menu button:focus-visible { background: #153136; }
@media (max-width: 760px) {
    .comment-langs.is-multi { grid-template-columns: 1fr; }
}

/* Dashboard overview: series/film rows start flush at the line start while
   episodes/chapters stay indented underneath (mobile already does this). */
@media (min-width: 721px) {
    .series-overview-row:not(.is-episode-row) .episode-drag-placeholder { display: none; }
    .series-overview-row:not(.is-episode-row):not(.has-collapse) > form { grid-column: 1 / 3; }
    .series-overview-head span:first-child { display: none; }
    .series-overview-head span:nth-child(2) { grid-column: 1 / 3; }
}

/* Collapsible episode/chapter rows under their series/film */
.collapse-toggle {
    display: grid;
    width: 30px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: var(--teal-dark);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: .82rem;
}
.collapse-toggle:hover,
.collapse-toggle:focus-visible { background: rgba(8,127,131,.1); border-color: var(--line); }
.collapse-toggle span { display: inline-block; transition: transform .12s ease; }
.collapse-toggle.is-collapsed span { transform: rotate(-90deg); }
[dir="rtl"] .collapse-toggle.is-collapsed span { transform: rotate(90deg); }
.projects-table .collapse-toggle {
    display: inline-grid;
    width: 26px;
    height: 26px;
    margin-inline-start: .35rem;
    vertical-align: middle;
}
.series-overview-row[hidden] { display: none; }
.projects-table tr[hidden] { display: none; }
html[data-theme="dark"] .collapse-toggle:hover,
html[data-theme="dark"] .collapse-toggle:focus-visible { background: rgba(67,199,200,.12); }

/* Films & series table: compact action buttons sized like the type pills */
.projects-table .table-actions { gap: .3rem; }
.projects-table .table-actions .button {
    min-height: 27px;
    padding: .22rem .5rem;
    font-size: .73rem;
}

@media (max-width: 720px) {
    .series-overview-row .collapse-toggle {
        position: absolute;
        z-index: 2;
        inset-inline-start: .65rem;
        top: .8rem;
    }
    .series-overview-row.has-collapse .project-list-button { padding-inline-start: 2.5rem; }
}

/* Toast notifications (non-blocking replacement for alert popups) */
.toast-region {
    position: fixed;
    z-index: 90;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    max-width: min(380px, calc(100vw - 2rem));
    gap: .5rem;
}
.toast {
    display: flex;
    padding: .6rem .75rem;
    align-items: flex-start;
    gap: .5rem;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(10, 34, 30, .22);
    font-size: .86rem;
    font-weight: 600;
    animation: toast-in .18s ease;
}
.toast.is-leaving { opacity: 0; transition: opacity .2s ease; }
.toast-error { color: #842f2f; background: #f9e5e3; border: 1px solid #e6b4af; }
.toast-success { color: #185d46; background: #e0f4e9; border: 1px solid #addac1; }
.toast-close {
    width: 22px;
    min-height: 22px;
    margin-inline-start: auto;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.toast-close:hover { background: rgba(0, 0, 0, .08); }
@keyframes toast-in {
    from { transform: translateY(6px); opacity: 0; }
}
html[data-theme="dark"] .toast-error { color: #f4b6b0; background: #432727; border-color: #70403d; }
html[data-theme="dark"] .toast-success { color: #b8e8d3; background: #17382e; border-color: #2e6551; }
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

/* Visible translate trigger next to the review label (twin of the gesture) */
.translate-chip {
    display: inline-grid;
    width: 24px;
    height: 22px;
    margin-inline-start: .35rem;
    padding: 0;
    place-items: center;
    vertical-align: middle;
    color: var(--teal-dark);
    background: #e8f4f1;
    border: 1px solid #badbd5;
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1;
}
.translate-chip:hover, .translate-chip:focus-visible { border-color: var(--teal); background: #d1e9e2; }
html[data-theme="dark"] .translate-chip { color: var(--teal-dark); background: #153136; border-color: #36565a; }

/* Skip link for keyboard users (visible only while focused) */
.skip-link {
    position: absolute;
    z-index: 100;
    inset-inline-start: .8rem;
    top: -100px;
    padding: .6rem 1rem;
    color: #fff;
    background: var(--teal);
    border-radius: 0 0 9px 9px;
    font-weight: 800;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Nav badge (pending / decided structure suggestions) */
.nav-badge {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-inline-start: .35rem;
    padding: 0 .3rem;
    place-items: center;
    color: #fff;
    background: var(--coral);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    vertical-align: middle;
}

/* Toast action button (e.g. Undo) */
.toast-action {
    margin-inline-start: .25rem;
    padding: .15rem .5rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Server-rendered undo bar (assignment removal on the structure page) */
.undo-bar {
    display: flex;
    margin-bottom: 1rem;
    padding: .5rem .8rem;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    color: #175a62;
    background: #e3f3f3;
    border: 1px solid #b9dddd;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
}
html[data-theme="dark"] .undo-bar { color: #afe4e5; background: #17363a; border-color: #315b60; }

/* Search-term highlighting on question cards */
mark { padding: 0 .12em; color: inherit; background: #ffe9a8; border-radius: 3px; }
html[data-theme="dark"] mark { background: #5a4a1a; }

/* Admin review cards: question text links to the question card */
.review-question-link { color: inherit; text-decoration: none; }
.review-question-link:hover, .review-question-link:focus-visible { color: var(--teal-dark); text-decoration: underline; }

/* Pager also above the question list */
.pagination-top { margin: 0 0 1rem; }

/* Touch screens: enlarge the small score/clear/translate hit areas only */
@media (pointer: coarse) {
    .score-select-control, .score-icon-face { min-height: 42px; }
    .score-icon-face { padding: .45rem .5rem; }
    .inline-relevance-form .score-icon-face { min-height: 42px; }
    .ranking-clear { width: 40px; min-height: 40px; }
    .assignment-remove { width: 38px; min-height: 38px; }
    .translate-chip { width: 34px; height: 32px; }
}

/* "Your review" head line: language tag, translate chip, others-reviews toggle */
.comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.others-toggle {
    display: inline-flex;
    margin-inline-start: auto;
    padding: .18rem .6rem;
    align-items: center;
    gap: .3rem;
    color: var(--teal-dark);
    background: #e8f4f1;
    border: 1px solid #badbd5;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 750;
}
.others-toggle b { font-weight: 850; }
.others-toggle:hover, .others-toggle:focus-visible { background: #d1e9e2; border-color: var(--teal); }
.others-toggle.is-open { color: #fff; background: var(--teal); border-color: var(--teal); }
.others-toggle.is-open b { color: #eafffb; }
html[data-theme="dark"] .others-toggle { color: var(--teal-dark); background: #153136; border-color: #36565a; }
html[data-theme="dark"] .others-toggle.is-open { color: #04211f; background: var(--teal); }
@media (pointer: coarse) {
    .others-toggle { min-height: 34px; }
}

/* Suggest-move pill next to the others-reviews toggle; the closed others
   panel (incl. its title) is fully hidden once the toggle takes over. */
.suggest-toggle {
    display: inline-flex;
    margin-inline-start: auto;
    padding: .18rem .6rem;
    align-items: center;
    gap: .3rem;
    color: var(--teal-dark);
    background: #e8f4f1;
    border: 1px solid #badbd5;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 750;
}
.suggest-toggle:hover, .suggest-toggle:focus-visible { background: #d1e9e2; border-color: var(--teal); }
.others-toggle ~ .suggest-toggle { margin-inline-start: 0; }
/* Keep both pills the same size: never shrink or wrap their label. */
.others-toggle, .suggest-toggle { flex: 0 0 auto; white-space: nowrap; }
html[data-theme="dark"] .suggest-toggle { color: var(--teal-dark); background: #153136; border-color: #36565a; }
.qa-others-reviews.is-hidden-closed { display: none; }
.suggest-dialog textarea { min-height: 90px; }
@media (pointer: coarse) {
    .suggest-toggle { min-height: 34px; }
}

/* Legend line: centered; entries double as three-state sort toggles */
.qa-legend { justify-content: center; }
.qa-sort-toggle {
    padding: .2rem .55rem;
    color: inherit;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
}
.qa-sort-toggle:hover, .qa-sort-toggle:focus-visible { border-color: var(--line); background: rgba(8,127,131,.07); }
.qa-sort-toggle.is-active { color: var(--teal-dark); background: #e8f4f1; border-color: #badbd5; font-weight: 750; }
.sort-indicator { font-size: .8rem; font-weight: 800; }
.sort-indicator[data-state="none"] { opacity: .45; }
html[data-theme="dark"] .qa-sort-toggle.is-active { color: var(--teal-dark); background: #153136; border-color: #36565a; }

/* Others' reviews: original and translation side by side like "My review" */
.others-comment-duo { display: grid; margin-top: .55rem; gap: .7rem; }
.others-comment-duo.is-multi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.others-comment-duo blockquote { margin: 0; }
@media (max-width: 760px) {
    .others-comment-duo.is-multi { grid-template-columns: 1fr; }
}

/* Equal head-line height across the comment fields so textareas align */
.comment-langs .comment-head { display: flex; align-items: center; gap: .35rem; min-height: 26px; }
@media (pointer: coarse) {
    .comment-langs .comment-head { min-height: 34px; }
}

/* Admin language management */
.languages-table td { vertical-align: middle; }
.languages-table input[name="name"],
.languages-table input[name="native_name"] { min-height: 34px; padding: .35rem .5rem; }
.languages-table .order-input { width: 5rem; }
.language-row-form { display: contents; }
.string-filter { width: min(280px, 45vw); min-height: 34px; }
.string-editor-intro { margin: .3rem 0 .8rem; }
.string-rows { display: grid; gap: .5rem; max-height: 60vh; overflow-y: auto; padding-inline-end: .3rem; }
.string-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.4fr);
    align-items: start;
    gap: .8rem;
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: 9px;
}
.string-meta { display: grid; gap: .25rem; min-width: 0; }
.string-meta code { font-size: .74rem; color: var(--teal-dark); }
.string-en { color: var(--muted); font-size: .84rem; }
.string-row textarea { min-height: 40px; }
.string-editor-actions { position: sticky; bottom: 0; margin-top: .8rem; }
html[data-theme="dark"] .string-row { border-color: #24393e; }
@media (max-width: 720px) {
    .string-row { grid-template-columns: 1fr; }
}

/* Reviewer language working set (admin user editor) */
.review-languages {
    margin: 1rem 0 0;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.review-languages legend { padding: 0 .4rem; font-weight: 800; }
.review-languages .form-hint { margin: 0 0 .7rem; }