/* The Gufo — site styles. Colour, radius and button tokens live in tokens.css (prompts v1.2 §1);
   the names below are aliases so existing rules keep reading from the one source of truth. */
:root {
  --brand: var(--gufo-red);
  --brand-hover: var(--gufo-red-hover);
  --brand-dark: var(--gufo-ink);
  --accent: var(--gufo-red);
  --navy: #070d2b;         /* footer / dark cards */
  --text: #242429;
  --muted: #5a6472;
  --line: #e5e7eb;
  --bg: #ffffff;
  --bg-soft: #f4f4f4;
  --link-blue: #0e6fce;
  --ok: #16803c;
  --warn: #b45309;
  --bad: #b91c1c;
  --bad-hover: #991b1b;
  --radius: var(--r-card);
  --shadow: var(--shadow-card);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.65; color: var(--text); background: var(--bg); }
img { max-width: 100%; height: auto; }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
h1, h2, h3, h4 { line-height: 1.25; color: var(--brand-dark); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-weight: 700; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 12px; z-index: 999; }
.skip-link:focus { left: 8px; top: 8px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 900px; }
.prose { max-width: 860px; }

/* ---------- Header (prompts v1.2 §3) ---------- */
.site-header { background: var(--gufo-ink); position: sticky; top: 0; z-index: 50; }
.site-header .bar { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 14px; min-height: var(--header-h); padding: 0 22px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { width: 94px; height: 38px; display: block; }   /* round P, P1.6: the v1.4 logo, 94 × 38 */
.nav { display: flex; gap: 2px; align-items: center; margin-left: auto; }
.nav > a, .nav .linklike, .nav .dd-toggle { position: relative; text-decoration: none; color: #f2f2f4; padding: 8px 11px; font-size: 13.5px; background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
/* §3.3 hover state: a 2px red underline that animates in over 150ms and stays on the active page */
.nav a::after, .nav .dd-toggle::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; background: var(--gufo-red); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease; }
.nav > a:hover::after, .nav .dd-toggle:hover::after, .nav .dropdown:focus-within .dd-toggle::after, .nav > a.is-current::after, .nav .dd-toggle.is-current::after { transform: scaleX(1); }
.nav > a:hover, .nav .linklike:hover, .nav .dd-toggle:hover { color: #fff; }
.nav a:focus-visible, .nav button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-btn); }
.nav .dropdown { position: relative; }
.nav .dd-toggle .caret { font-size: 10px; color: #b7b7bd; margin-left: 4px; }
/* §3.4 dropdowns: card radius, pop shadow, caret at the parent, 200ms fade, 150ms close delay */
.nav .menu { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #232326; border-radius: var(--r-card); box-shadow: var(--shadow-pop); min-width: 280px; padding: 6px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 150ms; }
.nav .menu::before { content: ""; position: absolute; top: -5px; right: 22px; width: 10px; height: 10px; background: #232326; transform: rotate(45deg); }
.nav .menu::after { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav .dropdown:hover .menu, .nav .dropdown:focus-within .menu, .nav .dropdown.open .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav .menu a, .nav .menu .linklike { display: block; padding: 9px 13px; font-size: 13px; color: #e8e8ec; width: 100%; text-align: left; white-space: normal; position: relative; }
.nav .menu a::after { display: none; }
.nav .menu a:hover, .nav .menu a:focus-visible { background: rgba(255,255,255,.06); color: #fff; }
.mobile-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-btn); font-size: 18px; padding: 3px 11px; cursor: pointer; color: #fff; }
.account-link { white-space: nowrap; }
.register-link { border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-btn); margin-left: 4px; }
.user-chip { display: inline-flex; align-items: center; gap: 7px; }
.user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--gufo-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }

/* Buttons live in tokens.css — four roles, three sizes, one hover behaviour. */

/* ---------- Hero (prompts v1.2 §5.1) ---------- */
.hero { background: linear-gradient(rgba(10, 10, 12, .55), rgba(10, 10, 12, .55)), url('/static/img/hero.jpg') center / cover no-repeat; color: #fff; min-height: calc(100dvh - var(--header-h)); display: flex; align-items: center; justify-content: center; }
.hero-inner { width: min(1100px, 92vw); text-align: center; padding: 60px 0; }
.hero h1 { color: #fff; font-size: clamp(34px, 4.8vw, 58px); margin: 0; font-weight: 700; }
.hero-or { font-size: clamp(18px, 2vw, 26px); margin: 4px 0; }
.hero-sub { color: #fff; font-size: clamp(22px, 2.8vw, 34px); margin: 0 0 22px; font-weight: 500; }
.hero-tagline { font-size: 15.5px; opacity: .95; margin: 0 0 30px; }

.hero-search { display: grid; grid-template-columns: 1fr auto; gap: 12px; max-width: 940px; margin: 0 auto; align-items: center; }
.hero-tabs { grid-column: 1 / -1; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.hero-tabs button { background: none; border: none; color: rgba(255,255,255,.82); font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 14px; min-height: 40px; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.hero-tabs button:hover { color: #fff; }
.hero-tabs button.is-active { color: #fff; border-bottom-color: var(--gufo-red); }
.hero-tabs .hc { font-weight: 400; font-size: 13px; opacity: .85; }
.hero-field { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--r-field); padding: 0 6px 0 14px; height: var(--btn-h-l); min-width: 0; }
.hero-field .hf-icon { color: var(--muted); display: flex; flex: none; }
.hero-field input[type=search] { flex: 1; min-width: 0; border: none; background: transparent; height: 100%; padding: 0; font-size: 15.5px; color: var(--text); }
.hero-field input[type=search]:focus { outline: none; }
.hero-field .hf-sep { width: 1px; height: 24px; background: var(--line); flex: none; }
.hero-field select { border: none; background: transparent; width: auto; max-width: 190px; height: 100%; padding: 0 6px; font-size: 14px; color: var(--muted); cursor: pointer; }
.hero-field select:focus { outline: none; }
.hero-search:focus-within .hero-field { box-shadow: var(--focus-ring); }

/* §5.2 home category bands. `.section h2 { margin: 0 … }` out-ranks a bare `.home-cta`, which
   left the centred heading hugging the left edge — hence the two-class selector. */
.section .home-cta { max-width: 820px; margin: 0 auto 34px; }
.home-bands { display: flex; flex-direction: column; gap: 22px; }
/* live-site size, label centred like the rest of the home page */
.home-bands .parent-band { min-height: 280px; align-items: center; justify-content: center; }
.home-bands .parent-band .band-label { text-align: center; transform-origin: center; }

/* ---------- Category tiles (home) ---------- */
.section-title { font-size: 24px; }
.cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.cat-tile { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; background-size: cover; background-position: center; background-color: var(--navy); border-radius: var(--r-btn); overflow: hidden; text-decoration: none; }
.cat-tile .shade { position: absolute; inset: 0; background: rgba(8, 10, 18, .45); transition: background .25s; }
.cat-tile:hover .shade { background: rgba(8, 10, 18, .28); }
.cat-tile .label { position: relative; color: #fff; font-size: 22px; font-weight: 600; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.cat-tile .dots { letter-spacing: 3px; font-size: 16px; opacity: .95; }
.cat-tile .counts { font-size: 13px; font-weight: 400; opacity: .95; display: flex; gap: 14px; justify-content: center; }
.cat-tile .counts b { font-weight: 700; }

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow); cursor: pointer; font-size: 20px; line-height: 1; color: var(--gufo-ink); z-index: 2; }
.carousel-btn.prev { left: -20px; } .carousel-btn.next { right: -20px; }
.carousel-btn[disabled] { opacity: .35; cursor: default; }

/* ---------- Article cards (spec §1.4) ---------- */
/* One size and one structure for every card, as on live (350px, at every width): the title on white,
   the meta strip on grey at the bottom, and a 64px badge 16px from the right and 178px from the top of
   the card's outer edge (177 / 15 inside its 1px border).
   Only the badge differs between published and shared work. */
.a-card { position: relative; background: #fff; border: 1px solid #ececee; border-radius: var(--r-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; height: 350px; overflow: hidden; }
.a-top { position: relative; flex: 1 1 auto; min-height: 0; padding: 20px 20px 0; }
.a-title { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.a-title a { color: #24242a; text-decoration: none; }
.a-title a:hover { color: var(--brand); }
/* round P, P1.6 — the v1.4 badge as supplied: its own circle and soft shadow, none added here */
.a-badge { position: absolute; top: 177px; right: 15px; width: 64px; height: 64px; display: block; z-index: 1; }
.a-badge img { display: block; width: 64px; height: 64px; }
/* a fixed strip of at most five one-line rows (author, category, journal, ISSN, DOI): 5 × 18px + padding
   + border = 118px, so the grey band starts at the same height on every card and its text stays below
   the badge */
.a-meta { flex: none; box-sizing: border-box; height: 118px; overflow: hidden; background: var(--bg-soft); border-top: 1px solid #ececee; padding: 13px 20px; font-size: 12.5px; line-height: 18px; color: #55606c; }
.a-meta > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-author { font-size: 13px; font-weight: 700; color: #2a2a30; white-space: nowrap; text-overflow: ellipsis; }
.a-cat { font-size: 12.5px; font-style: italic; color: var(--link-blue); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.a-cat:hover { text-decoration: underline; }
.a-journal { color: #3f4c59; white-space: nowrap; text-overflow: ellipsis; }
.a-issn { white-space: nowrap; text-overflow: ellipsis; }
.a-doi { white-space: nowrap; text-overflow: ellipsis; }
.a-doi a { color: var(--link-blue); text-decoration: none; }
.a-doi a:hover { text-decoration: underline; }

/* ---------- FAQ accordion ---------- */
.faq { border: 1px solid #e3e3e6; border-radius: var(--r-btn); background: #fff; }
.faq details { border-bottom: 1px solid #e3e3e6; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 18px; font-size: 15px; font-weight: 500; color: #2a2a30; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #777; border-bottom: 2px solid #777; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary { color: var(--brand); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--brand); }
.faq .faq-body { padding: 0 18px 16px; font-size: 14.5px; color: #4a5460; }
.faq .faq-body p { margin: 0 0 8px; }

/* ---------- Newsletter ---------- */
.newsletter-section { padding: 54px 0 60px; border-top: 1px solid var(--line); }
.newsletter-section h2 { font-size: 21px; margin: 0 0 18px; }
.newsletter-row { display: flex; gap: 10px; justify-content: center; max-width: 640px; margin: 0 auto; }
.newsletter-row input[type=email] { flex: 1; padding: 10px 13px; border: 1px solid #c9ced4; border-radius: var(--r-btn); font-size: 13.5px; }
.newsletter-row .btn { min-width: 150px; }
.newsletter-note { font-size: 11px; color: #5f6670; margin-top: 12px; }
.newsletter-context { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 36px 0; }
.newsletter-context .muted { display: block; font-size: 13.5px; }
.newsletter-context .newsletter-row { margin: 0; max-width: 420px; }
.newsletter-context .newsletter-row .btn { min-width: 0; }

/* ---------- Sections / grid / cards ---------- */
.section { padding: 56px 0; }
.section.soft { background: var(--bg-soft); }
.section h2 { font-size: 28px; margin: 0 0 8px; }
.section .sub { color: var(--muted); margin: 0 0 28px; }
.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; }
.card h3 { margin: 0 0 8px; font-size: 17.5px; }
.card h3 a { text-decoration: none; color: var(--brand-dark); }
.card h3 a:hover { color: var(--brand); text-decoration: underline; }
.card .meta { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.card .excerpt { font-size: 14.5px; color: #3f4c59; flex: 1; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.badge.published { background: #e7f0e9; color: var(--ok); }
.badge.shared { background: #fdf3e3; color: var(--warn); }
.badge.curated { background: #fff1e6; color: #9a3412; }
.badge.pending, .badge.in_review, .badge.awaiting_payment { background: #fff7e0; color: var(--warn); }
.badge.draft { background: var(--bg-soft); color: var(--muted); }
.badge.rejected, .badge.removed { background: #fdecec; color: var(--bad); }
.badge.approved, .badge.active, .badge.confirmed { background: #e7f0e9; color: var(--ok); }
.breadcrumb { font-size: 13.5px; color: var(--muted); padding: 18px 0 0; }
.breadcrumb a { color: var(--muted); }
.page-cta { margin: 44px 0 0; padding: 30px; background: var(--bg-soft); border-radius: var(--radius); text-align: center; }
.page-cta h2 { font-size: 22px; margin: 0 0 14px; }

/* ---------- The four main library filters (live-site parity) ---------- */
.scope-bar { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.scope-bar ul { list-style: none; margin: 0 auto; padding: 0 20px; max-width: 1240px; display: flex; justify-content: space-around; gap: 8px; }
.scope-bar a { position: relative; display: flex; align-items: center; min-height: 60px; padding: 0 14px; font-size: 17px; font-weight: 700; color: var(--gufo-ink); text-decoration: none; white-space: nowrap; }
.scope-bar a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 3px; background: var(--gufo-red); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease; }
.scope-bar a:hover { color: var(--gufo-ink); }
.scope-bar a:hover::after, .scope-bar a.is-current::after { transform: scaleX(1); }
.scope-bar a.is-current { color: var(--gufo-red); }
.scope-bar a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-btn); }

/* tabs on login / register / blog (their rules were lost in the v1.2 rewrite) */
.lib-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 22px 0 18px; flex-wrap: wrap; }
.lib-tabs a { padding: 10px 16px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14.5px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.lib-tabs a.active, .lib-tabs a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* library search box */
.lib-search { display: flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 0 6px 0 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-field); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.lib-search:focus-within { border-color: var(--gufo-red); box-shadow: var(--focus-ring); }
.lib-search .ls-icon { display: flex; color: var(--muted); flex: none; }
.lib-search input[type=search] { flex: 1; min-width: 0; border: 0; padding: 0; height: 58px; font-size: 16px; background: transparent; }
.lib-search input[type=search]:focus { outline: none; }

/* ---------- Library browse (§7): parent band + child tiles ---------- */
.browse-title { font-size: clamp(26px, 3vw, 34px); margin: 10px 0 6px; }
.browse-lede { margin: 0 0 28px; font-size: 15.5px; }
.browse-group { margin-bottom: 44px; }
.parent-band { position: relative; display: flex; align-items: flex-end; min-height: 190px; border-radius: var(--r-card); overflow: hidden;
  background: var(--navy) center / cover no-repeat; text-decoration: none; color: #fff; }
.parent-band .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,13,43,.25), rgba(7,13,43,.82)); transition: background 150ms ease; }
.parent-band:hover .shade { background: linear-gradient(180deg, rgba(7,13,43,.15), rgba(7,13,43,.72)); }
.parent-band .band-label { position: relative; padding: 22px 26px; transform-origin: left bottom; transition: transform 200ms ease; }
/* a:hover would turn the label red on a dark photo — it stays white and grows instead */
.parent-band:hover, .parent-band:focus-visible { color: #fff; }
.parent-band:hover .band-label, .parent-band:focus-visible .band-label { transform: scale(1.08); }
.browse-group .parent-band { min-height: 280px; }
.parent-band .name { display: block; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.15; }
.parent-band .counts { display: block; font-size: 14px; opacity: .95; margin-top: 4px; }
.journals-band { background: linear-gradient(120deg, var(--gufo-ink), #3a2a30); }
.child-tiles { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.child-tile { position: relative; display: flex; align-items: flex-end; min-height: 280px; border-radius: var(--r-card); overflow: hidden;
  background: var(--navy) center / cover no-repeat; text-decoration: none; color: #fff; }
.child-tile .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,13,43,.1), rgba(7,13,43,.78)); transition: background 150ms ease; }
.child-tile:hover .shade { background: linear-gradient(180deg, rgba(7,13,43,.05), rgba(7,13,43,.66)); }
.child-tile .tile-label { position: relative; padding: 16px 18px; transform-origin: left bottom; transition: transform 200ms ease; }
.child-tile:hover, .child-tile:focus-visible { color: #fff; }
.child-tile:hover .tile-label, .child-tile:focus-visible .tile-label { transform: scale(1.1); }
.child-tile .name { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.child-tile .counts { display: block; font-size: 12.5px; opacity: .92; margin-top: 2px; }

/* ---------- Results (§8): the live site's full-width structure — filters · rows · preview ----------
   The page is fluid up to 1760px instead of the 1200px container, so each pane has room to read
   and the controls are sized like the live site's (18px headings, full-size fields). */
.back-crumb { font-weight: 600; }
.results-page { max-width: 1760px; margin: 0 auto; padding: 0 32px; }
.results-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; padding: 4px 0 64px; }
.results-col { min-width: 0; }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 3px 10px rgba(0,0,0,.06); padding: 0; position: sticky;
  top: calc(var(--header-h) + 16px); overflow: hidden; max-height: calc(100dvh - var(--header-h) - 32px); display: flex; flex-direction: column; }
.filters .tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.filters .tabs button { flex: 1; padding: 12px 10px; min-height: 52px; background: var(--bg-soft); border: none; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--muted); }
.filters .tabs button.active { background: #fff; color: var(--gufo-red); box-shadow: inset 0 -3px 0 var(--gufo-red); }
.filters .pane { padding: 18px 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.filters .pane[hidden] { display: none; }
.filters h3 { margin: 22px 0 8px; font-size: 17px; font-weight: 700; color: var(--gufo-ink); }
.filters h3:first-child { margin-top: 0; }
.filters input[type=search], .filters input[type=text], .filters input[type=number], .filters select { font-size: 15.5px; min-height: 46px; }
.filters label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 15.5px; margin: 0; min-height: 40px; }
.filters label.check input { width: 18px; height: 18px; flex: none; }
.filters .years { display: flex; gap: 8px; }
.filters .actions { display: flex; gap: 10px; margin-top: 22px; }
.filters .actions .btn { flex: 1; height: var(--btn-h-m); font-size: 15px; }

/* categories tab (live): the two parents side by side; the chosen parent's subcategories one per line */
.cat-parents { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-children { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cat-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; color: var(--text); text-decoration: none;
  transition: box-shadow 150ms ease, border-color 150ms ease; }
.cat-card .cat-img { display: block; aspect-ratio: 4 / 3; background: var(--navy) center / cover no-repeat; }
.cat-card.sub .cat-img { aspect-ratio: 11 / 4; }
.cat-card .cat-text { display: block; padding: 10px 12px 12px; }
.cat-card .name { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--gufo-ink); }
.cat-card .counts { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
/* the half-width parent cards stack the two counts; the full-width subcategory cards keep one line */
.cat-parents .counts > span { display: block; }
.cat-children .counts > span + span::before { content: "· "; }
.cat-card:hover { color: var(--text); border-color: var(--gufo-ink); box-shadow: var(--shadow-pop); }
.cat-card.is-current { border-color: var(--gufo-red); outline: 2px solid var(--gufo-red); outline-offset: -1px; }
.cat-card.is-current .name { color: var(--gufo-red); }
.cat-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.results-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 10px 0 18px; }
.results-head h1 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); }
.results-head .count-line { margin: 4px 0 0; font-size: 15px; }
.sort-form select { max-width: 220px; min-height: 46px; font-size: 15px; }
.filters-sheet-btn { display: none; }
.badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--gufo-red); color: #fff; font-size: 12px; font-weight: 700; }

.author-hits { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 14px 18px; margin-bottom: 16px; }
.author-hits h2 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.author-hits ul { list-style: none; margin: 0; padding: 0; }
/* one compact line per author, so the group never pushes the article rows off screen */
.author-hits li { padding: 5px 0; font-size: 15px; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.author-hits a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.author-hits .aff { color: var(--muted); font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-hits .n { color: var(--muted); font-size: 13.5px; white-space: nowrap; flex: none; }

/* one article per row; title clamps to three lines */
.result-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.result-row { display: flex; gap: 14px; padding: 18px 20px 18px 17px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; }
.result-row:last-child { border-bottom: 0; }
.result-row:hover { background: #fafbfc; }
.result-row.selected { border-left-color: var(--gufo-red); background: var(--bg-soft); }
.result-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.row-badge { flex: none; width: 40px; height: 40px; display: block; }   /* round P, P1.6: the badge as supplied */
.row-badge img { width: 40px; height: 40px; display: block; }
.row-main { min-width: 0; flex: 1; }
.row-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--gufo-ink); text-decoration: none; }
.result-row:hover .row-title, .result-row.selected .row-title { color: var(--gufo-red); }
.row-meta { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.row-meta > span + span::before { content: " · "; }
.row-meta .rd { word-break: break-all; }

/* preview pane: sticky; pdf.js pages in their own contained scroller, nothing else */
.preview-pane { position: sticky; top: calc(var(--header-h) + 16px); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; height: calc(100dvh - var(--header-h) - 32px); }
.preview-pane .ph { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; flex: none; }
.preview-pane .ph .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-decoration: none; }
.preview-pane .pv-body { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f1f1f3; }
.preview-pane .pv-pdf { position: absolute; inset: 0; border: 0; border-radius: 0; background: #f1f1f3; }
.preview-pane .pv-pdf .pdfjs-viewport { height: 100%; max-height: none; }
.preview-pane .pv-thumb { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: block; width: 100%; background: #fff; }
.preview-pane .pv-native { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; border: 0; background: #525659; }
.preview-pane .empty, .preview-pane .pv-fallback { padding: 34px 22px; text-align: center; color: var(--muted); font-size: 15px; }
.preview-pane .pv-fallback { position: relative; z-index: 2; background: #fff; }
.preview-pane .pv-body [hidden] { display: none; }
.preview-pane.fullscreen { position: fixed; inset: 0; z-index: 130; border-radius: 0; height: 100dvh; }

/* author profile */
.author-card { display: flex; gap: 22px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; }
.author-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--gufo-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; }
.author-id { flex: 1; min-width: 220px; }
.author-id h1 { margin: 0; font-size: 26px; }
.author-sub { font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.author-sub .orcid { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.author-bio { margin: 8px 0 0; font-size: 15px; }
.author-pubs-title { font-size: 22px; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=number], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: var(--r-field); font: inherit; color: var(--text); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(165,28,48,.3); border-color: var(--brand); }
label { font-weight: 600; font-size: 14.5px; display: block; margin: 16px 0 6px; }
label .req { color: var(--bad); }
label.inline { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
label.inline input { width: auto; margin-top: 4px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
.alert { padding: 12px 16px; border-radius: var(--r-field); margin: 16px 0; font-size: 14.5px; }
.alert.ok { background: #e7f0e9; color: var(--ok); }
.alert.err { background: #fdecec; color: var(--bad); }
.alert.info { background: #e8f1f9; color: #1f4f7a; }

/* ---------- Article page (prompts v1.2 §9) ---------- */

/* Live-site width: the tools rail at the left edge, the reader across the rest of the screen.
   The page scrolls. The rail is sticky and one viewport tall, so its bottom is always visible —
   as two viewport-high scroll boxes (the §9.3 build) both were cut off below the fold, and
   overscroll containment stopped the wheel from ever scrolling the page to reveal them. The
   reading bug §9.3 fixed stays fixed where it lives: the PDF reader's own contained scroller. */
.article-page { max-width: 1760px; margin: 0 auto; }
.article-shell {
  display: grid;
  grid-template-columns: clamp(280px, 24vw, 360px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 0 0 40px;
}
.article-tools {
  position: sticky;
  top: var(--header-h);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 24px;
  background: #fff;
  box-shadow: 1px 0 0 var(--line), 4px 0 14px rgba(0,0,0,.04);
  scrollbar-width: thin;
}
.article-reader { min-width: 0; padding: 0 clamp(20px, 4.5vw, 72px) 40px; }
.article-reader > .breadcrumb { padding-top: 18px; margin-bottom: 14px; }

/* focus mode collapses the rail to a 56px icon rail and widens the reader */
.focus-toggle { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: var(--btn-h-s);
  padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-btn); background: #fff; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; }
.focus-toggle:hover { color: var(--gufo-red); border-color: var(--gufo-red); }
.article-shell.focus { grid-template-columns: 56px minmax(0, 1fr); }
.article-shell.focus .article-tools > *:not(.focus-toggle) { display: none; }
.article-shell.focus .focus-toggle .ft-label { display: none; }
.article-shell.focus .focus-toggle { padding: 0; width: 40px; justify-content: center; }
.article-shell.focus .article-tools { padding-left: 8px; padding-right: 8px; }

/* §9.3 progress rail: 3px across the top of the reader, under the sticky header */
.read-progress { position: sticky; top: var(--header-h); z-index: 3; height: 3px; background: var(--line); border-radius: var(--r-pill); margin-bottom: 10px; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--gufo-red); border-radius: var(--r-pill); transition: width 80ms linear; }

.sidebox { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; }
.sidebox h3 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.sidebox dl { margin: 0; }
.sidebox dt { font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .4px; margin-top: 10px; }
.sidebox dt:first-child { margin-top: 0; }
.sidebox dd { margin: 2px 0 0; font-size: 14px; word-break: break-word; }
.author-list { list-style: none; margin: 0; padding: 0; }
.author-list li { margin: 0 0 10px; font-size: 14px; }
.author-list .an a { text-decoration: none; font-weight: 600; }
.author-list .corr { color: var(--gufo-red); font-weight: 700; }
.author-list .aff { display: block; font-size: 12.5px; color: var(--muted); }
.author-list .orcid { display: inline-block; margin-left: 4px; vertical-align: middle; }
.corr-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.counters { display: flex; gap: 10px; }
.counter { flex: 1; text-align: center; background: var(--bg-soft); border-radius: var(--r-btn); padding: 10px 6px; }
.counter .num { font-size: 20px; font-weight: 800; color: var(--gufo-ink); }
.counter .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.dl-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.share-dd { position: relative; }
.share-dd .share-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-pop); z-index: 5; padding: 6px; }
.share-dd.open .share-menu { display: block; }
.share-menu a, .share-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; font: inherit; font-size: 14px; color: var(--text); text-decoration: none; cursor: pointer; border-radius: var(--r-btn); }
.share-menu a:hover, .share-menu button:hover { background: var(--bg-soft); }
.updates > summary, .follow-cat > summary { list-style: none; cursor: pointer; }
.updates > summary::-webkit-details-marker, .follow-cat > summary::-webkit-details-marker { display: none; }
.updates-form { display: flex; gap: 6px; margin-top: 8px; }
.updates-form input { padding: 7px 10px; font-size: 13.5px; }
.toc ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.toc ul ul { padding-left: 14px; }
.toc li { margin: 4px 0; }
.toc a { text-decoration: none; color: var(--text); }
.toc a.active { font-weight: 700; color: var(--gufo-red); }
.kw { display: flex; flex-wrap: wrap; gap: 6px; }
.kw span { background: var(--bg-soft); border-radius: var(--r-pill); padding: 3px 10px; font-size: 12.5px; }
.cite-box { font-size: 13px; background: var(--bg-soft); border-radius: var(--r-btn); padding: 10px 12px; margin: 0 0 8px; }
.cite-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.article-header { border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 26px; background: #fff; }
.article-top-row { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.article-top-row .pub-logo { position: static; flex: none; }
/* round P, P1.6 — the v1.4 black logo, unmodified, in normal and Focus mode */
.article-top-row .pub-logo img { height: 44px; width: auto; display: block; }
.journal-info { margin-left: auto; text-align: right; font-size: 13px; color: var(--muted); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.journal-info a { color: var(--link-blue); text-decoration: none; }
.journal-info .jname { font-weight: 700; color: var(--gufo-ink); font-size: 14px; }
.type-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .4px; }
.type-badge img { width: 22px; height: 22px; margin: -3px 0 -3px -6px; display: block; }
.type-badge.published { background: #fbe9ec; color: var(--gufo-red); }
.type-badge.shared { background: #e8f1f9; color: #1f4f7a; }
.type-badge.curated { background: #fff1e6; color: #9a3412; }
.article-header h1.title { font-size: clamp(24px, 3vw, 32px); margin: 14px 0 8px; }
.article-authors { font-size: 15.5px; margin: 0 0 6px; }
.article-authors a { text-decoration: none; color: var(--text); font-weight: 500; }
.article-authors a:hover { color: var(--gufo-red); }
.article-affils { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.pub-dates { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }
.copyright-row { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }
.license-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; }
.license-row img { width: 88px; height: 31px; }
.article-content { font-size: 16px; line-height: 1.7; max-width: var(--measure); overflow-wrap: break-word; }
/* editor content can be wider than a phone: CKEditor tables (<figure class="table">), images and
   preformatted text scroll inside the column instead of widening the page */
.article-content figure { max-width: 100%; margin-left: 0; margin-right: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.article-content pre { max-width: 100%; overflow-x: auto; }
.article-content img, .article-content video, .article-content iframe { max-width: 100%; height: auto; }
.article-content h2 { margin-top: 38px; font-size: 24px; }
.article-content h3 { margin-top: 28px; font-size: 20px; }
.article-content ul ul, .article-content ul li > ul { list-style: circle; }
.article-content li.no-bullet { list-style: none; margin-left: -20px; }
.article-content li[style*="list-style-type: none"] > ul { padding-left: 0; }
.article-content li[style*="list-style-type: none"] > ul > li { list-style: disc; margin-left: 20px; }
.article-content .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; }
.article-content table { border-collapse: collapse; width: 100%; float: none !important; }
.article-content th, .article-content td { border: 1px solid var(--line); padding: 8px 10px; font-size: 14.5px; vertical-align: top; }
/* CKEditor lets an author float a table (style="float:left"): the paragraphs after it then ran down
   beside the table. A table always sits on its own line at the column's full width. */
.article-content figure.table { float: none !important; clear: both; display: block; width: 100% !important; margin: 22px 0; }
/* pasted Word tables wrap every cell in <p style="text-align:justify">, which spaced the cells out
   and stretched short labels ("Click-Through      Rate") */
.article-content td p, .article-content th p { margin: 0; text-align: left !important; }
.article-content td p + p, .article-content th p + p { margin-top: 6px; }
/* image figures, as the editor shows them: centred blocks; a resized figure carries the width and the
   image fills it (the imported formula images also carried their own % width — 15% of a 41% figure) */
.article-content figure.image { display: table; clear: both; text-align: center; margin: 18px auto; margin-left: auto; margin-right: auto; }
.article-content figure.image_resized { display: block; box-sizing: border-box; }
.article-content figure.image_resized > img { width: 100% !important; }
.article-content figure.image img { display: block; margin: 0 auto; }
.editor-summary h2 { font-size: 18px; margin: 0 0 8px; }
.editor-summary h2 .muted { font-weight: 400; font-size: 13px; }
.refs-list { padding-left: 22px; font-size: 14.5px; }
.refs-list li { margin: 0 0 8px; }
.source-box { border-left: 4px solid #1f4f7a; background: #f3f7fb; padding: 14px 18px; border-radius: var(--r-btn); margin: 18px 0; font-size: 14.5px; }

/* §9.3 end-of-document card, revealed by the sentinel */
.doc-end-card { margin: 28px 0 0; padding: 22px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--bg-soft); }
.doc-end-card[hidden] { display: none; }
.doc-end-card p { margin: 0 0 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-size: 12.5px; }

/* §9.2 related articles live after the reader, never in the sidebar */
.related-section { padding: 10px 0 56px; }
.related-section h2 { font-size: 22px; margin: 0 0 16px; }

/* §14.3 pdf.js viewer */
.pdf-viewer { margin: 26px 0 8px; }
.pdfjs-wrap { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.pdfjs-toolbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.pdfjs-toolbar .pj-spacer { flex: 1; }
.pdfjs-toolbar .pj-counter, .pdfjs-toolbar .pj-zoom-level { font-size: 13px; color: var(--muted); min-width: 54px; text-align: center; }
/* PDFViewer requires an absolutely-positioned scroll container with a real height: it
   positions pages inside it and refuses to start otherwise. .pdfjs-viewport is the sized,
   relatively-positioned box that gives it one, keeping the original's 80vh reading height. */
/* F6 / §14.3 — at most 80% of the viewport, on every breakpoint; min-height never beats max-height (in CSS it
   would), so it is clamped to the viewport too and a landscape phone never gets a box taller than its screen. */
.pdfjs-viewport { position: relative; height: 80vh; height: min(80dvh, calc(100dvh - var(--header-h) - 70px));
  min-height: min(480px, 80vh); max-height: 80vh; }
.pdfjs-canvas-wrap { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; background: #f1f1f3; }
.pdfjs-canvas-wrap:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
/* PDFViewer positions its pages absolutely inside the scroll container, and the layout and
   text-layer rules come from the official pdf_viewer.css (loaded with the module). */
.pdfjs-canvas-wrap .pdfViewer .page { margin: 10px auto; border: 0; box-shadow: var(--shadow-card); background: #fff; }
.pdfjs-canvas-wrap .textLayer ::selection { background: rgba(172, 44, 61, .3); }
/* §14.3 — each page canvas is as wide as its page and keeps its aspect ratio; pdf.js paints it at
   devicePixelRatio. (Its partial "detail" canvases position themselves and are left alone.) */
.pdfjs-canvas-wrap .canvasWrapper canvas:not(.detailView) { width: 100%; height: auto; }
/* F6 — never an empty box: a skeleton page and a spinner until page 1 paints, then the file links if it cannot */
.pdf-loading { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 14px; padding: 18px 16px; background: #f1f1f3; color: var(--muted); font-size: 14px; text-align: center; }
.pdf-loading p { margin: 0; }
.pdf-skeleton { width: min(100%, 560px); aspect-ratio: 1 / 1.414; max-height: 58%; background: #fff; box-shadow: var(--shadow-card);
  border-radius: 2px; padding: 8% 9%; display: flex; flex-direction: column; gap: 5%; overflow: hidden; }
.pdf-skeleton span { display: block; height: 3.2%; min-height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, #ececf0 25%, #f6f6f8 50%, #ececf0 75%);
  background-size: 200% 100%; animation: pdf-shimmer 1.4s ease-in-out infinite; }
.pdf-skeleton span:nth-child(1) { width: 70%; height: 5%; }
.pdf-skeleton span:nth-child(3) { width: 90%; }
.pdf-skeleton span:nth-child(5) { width: 80%; }
.pdf-skeleton span:nth-child(6) { width: 55%; }
.pdf-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(172, 44, 61, .2); border-top-color: var(--gufo-red);
  animation: pdf-spin .9s linear infinite; }
@keyframes pdf-spin { to { transform: rotate(360deg); } }
@keyframes pdf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pdf-spinner, .pdf-skeleton span { animation: none; } }
.pdf-fallback { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 4; padding: 18px; text-align: center; font-size: 14px;
  color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
.pdf-fallback p { margin: 0 0 10px; }
.pdf-fallback-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 !important; }
.pdf-fallback-actions .btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
/* a reader that could not open its document shrinks to the card, instead of a tall empty box under it */
.pdfjs-wrap.is-failed .pdfjs-viewport { height: 230px; min-height: 0; }

/* §9.2 slim footer [revertible] */
.slim-footer { background: var(--gufo-ink); color: #c3c8d4; padding: 16px 0; font-size: 12.5px; }
.slim-footer .sf-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.slim-footer a { color: #c3c8d4; text-decoration: none; }
.slim-footer a:hover { color: #fff; text-decoration: underline; }
.slim-footer .sf-publisher { margin: 6px 0 0; color: #8b93a3; }

/* §10.2 phone: a sticky bottom action bar replaces the sidebar actions */
.article-actionbar { display: none; }

/* ---------- Journals ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.j-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.j-card .cover { aspect-ratio: 3 / 2; background: var(--navy) center / cover; }
.j-card .body { padding: 16px 18px; }
.j-card h3 { margin: 0 0 4px; font-size: 18px; }
.j-card .issn { font-size: 12.5px; color: var(--muted); }
.j-card .scope { font-size: 14px; color: #3f4c59; margin-top: 8px; }
.journal-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: start; margin: 24px 0 30px; }
.journal-head .cover { aspect-ratio: 3 / 4; background: var(--navy) center / cover; border-radius: var(--r-field); box-shadow: var(--shadow); }
.journal-head h1 { margin: 0 0 6px; font-size: 32px; }
.journal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 20px; margin: 14px 0; font-size: 14px; }
.journal-facts dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.journal-facts dd { margin: 0; font-weight: 600; }
.policy-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); flex-wrap: wrap; margin: 30px 0 0; }
.policy-tabs button { background: none; border: none; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.policy-tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.policy-pane { padding: 18px 0; max-width: 860px; }
.policy-pane[hidden] { display: none; }
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
/* Amendment 1 — continuous journals: the archive by volume (a volume's issues beneath it) and a volume's articles */
.issue-list li { flex-wrap: wrap; }
.issue-list li ul { flex-basis: 100%; list-style: none; margin: 6px 0 0; padding: 0 0 0 16px; }
.issue-list li ul li { border-bottom: 0; padding: 4px 0; }
.volume-list { list-style: none; margin: 0; padding: 0; }
.volume-list li { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.volume-list li > .muted:first-child { display: block; font-size: 13px; }
.board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.member { background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 40%), #242424; border: 1px solid rgba(255,255,255,.06); border-left: 4px solid var(--accent); padding: 16px 18px; border-radius: 14px; color: #fff; }
.member h3 { color: #fff; margin: 0 0 6px; font-size: 18px; }
.member p { margin: 0 0 6px; color: rgba(255,255,255,.78); line-height: 1.45; font-size: 14px; }
.member a { color: #fff; }
.member .country { font-weight: 600; color: #fff; }
.members-wrap { background: var(--navy); padding: clamp(20px, 3vw, 36px); border-radius: 18px; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.post-card .cover { aspect-ratio: 16 / 9; background: var(--navy) center / cover; }
.post-card .body { padding: 16px 18px; flex: 1; }
.post-card h3 { font-size: 17px; margin: 0 0 6px; }
.post-card h3 a { text-decoration: none; color: var(--brand-dark); }
.post-meta { font-size: 12.5px; color: var(--muted); }
.post-body { font-size: 16.5px; line-height: 1.75; max-width: 860px; }

/* ---------- Submit chooser ---------- */
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 980px; margin: 0 auto; }
.choose-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; text-align: center; display: flex; flex-direction: column; }
.choose-card video { width: 100%; border-radius: var(--r-field); background: #000; margin-top: 16px; }
.choose-card ul { text-align: left; font-size: 14.5px; color: var(--muted); padding-left: 20px; }
.price-list { padding-left: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: #101321; color: #c3c8d4; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr 1.5fr; gap: 30px; padding: 44px 0 30px; }
.site-footer .foot-title { color: #fff; font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
.site-footer a { color: #c3c8d4; text-decoration: none; display: block; padding: 4px 0; font-size: 13px; }
.site-footer a:hover { color: #fff; }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-footer .bottom-right { display: inline-flex; align-items: center; gap: 14px; }
.site-footer .rss-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.25); }
.site-footer .rss-link:hover { background: rgba(255,255,255,.12); }
.site-footer .bottom a { display: inline; padding: 0; }
.brand-col img { margin-bottom: 12px; }
.socials { display: flex; gap: 10px; margin-bottom: 12px; }
.socials a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #e8e8ec; padding: 0; }
.socials .icon { width: 15px; height: 15px; }
.socials a:hover { background: rgba(255,255,255,.1); }
.brand-blurb { font-size: 12px; line-height: 1.6; color: #9aa1b0; margin: 0; }
.news-col .foot-form { flex-direction: column; gap: 10px; max-width: none; align-items: stretch; }
.news-col .foot-form input[type=email] { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.5); border-radius: 0; color: #fff; padding: 8px 2px; }
.news-col .foot-form input[type=email]::placeholder { color: #9aa1b0; }
.news-col .foot-form .btn { min-width: 0; align-self: flex-start; }
.news-note { font-size: 10.5px; line-height: 1.55; color: #8b93a3; margin: 10px 0 0; }
.news-note a { display: inline; padding: 0; color: #b9c0cf; }
.to-top { position: fixed; right: 22px; bottom: 96px; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--brand); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 40; }
.to-top[hidden] { display: none; }

/* ---------- Gufo Assistant ---------- */
/* white launcher, black owl; the ring and shadow keep it visible on white pages */
.ga-bubble { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--gufo-ink); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 90; display: flex; align-items: center; justify-content: center; }
.ga-bubble:hover { background: var(--bg-soft); }
.ga-bubble img { width: 40px; height: 40px; border-radius: 8px; display: block; }
.ga-panel { position: fixed; right: 22px; bottom: 92px; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 120px); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); z-index: 95; display: flex; flex-direction: column; overflow: hidden; }
.ga-panel[hidden] { display: none; }
.ga-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--brand-dark); color: #fff; }
.ga-head img { width: 28px; height: 28px; border-radius: 6px; display: block; }
.ga-head .t { font-weight: 700; flex: 1; }
.ga-head button { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.ga-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ga-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ga-msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 3px; }
.ga-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.ga-msg.bot a { color: var(--link-blue); }
.ga-msg .src { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.ga-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ga-cards a { display: block; background: var(--bg-soft); border-radius: 6px; padding: 8px 10px; font-size: 13px; text-decoration: none; color: var(--text); }
.ga-cards a b { display: block; color: var(--brand-dark); }
.ga-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ga-chips button { background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.ga-chips button:hover { border-color: var(--brand); color: var(--brand); }
.ga-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(255,255,255,.7); }
.ga-form textarea { flex: 1; resize: none; height: 42px; padding: 9px 12px; font-size: 14px; }
.ga-form button { background: var(--brand); color: #fff; border: none; border-radius: var(--r-field); padding: 0 16px; cursor: pointer; font-weight: 600; }
.ga-foot { font-size: 11px; color: var(--muted); padding: 6px 14px 10px; text-align: center; background: rgba(255,255,255,.7); }
.ga-typing { font-style: italic; color: var(--muted); }

/* ---------- Pagination / tables ---------- */
.pagination { display: flex; gap: 6px; margin: 34px 0 0; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-field); text-decoration: none; font-size: 14px; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table.list th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 12px 14px; border-bottom: 2px solid var(--line); background: var(--bg-soft); }
table.list td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr:hover td { background: #fafcfe; }

/* ---------- Motion ---------- */
.card, .a-card, .cat-tile, .sidebox, .j-card, .post-card { transition: transform .22s ease, box-shadow .22s ease, background .15s ease, filter .25s ease; }
.card:hover, .a-card:hover, .j-card:hover, .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
img { transition: opacity .35s ease; }
img.img-loading { opacity: 0; }
#nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 200; transition: width .3s ease, opacity .4s ease; opacity: 0; pointer-events: none; }
#nav-progress.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.linklike { background: none; border: none; color: var(--brand); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* ---------- Admin ---------- */
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-side { background: var(--brand-dark); color: #cdd9e4; padding: 20px 0; }
.admin-side .logo { display: block; padding: 0 20px 18px; color: #fff; font-size: 20px; }
.admin-side a.item { display: block; padding: 10px 20px; color: #cdd9e4; text-decoration: none; font-size: 14.5px; }
.admin-side a.item:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-side a.item.active { background: var(--brand); color: #fff; font-weight: 600; border-left: 3px solid var(--accent); }
.admin-side .sep { border-top: 1px solid rgba(255,255,255,.12); margin: 12px 20px; }
.admin-main { background: var(--bg-soft); padding: 28px 32px; }
.admin-main h1 { margin-top: 0; font-size: 24px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat-tile .num { font-size: 28px; font-weight: 800; color: var(--brand-dark); }
.stat-tile .lbl { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 860px) { .admin-layout { grid-template-columns: 1fr; } .admin-side { display: flex; overflow-x: auto; padding: 8px; } .admin-side .logo { padding: 8px 14px 8px; } .admin-side a.item { white-space: nowrap; } .admin-side .sep { display: none; } }

/* ---------- Staff workspaces (admin article edit, categories, editor review, author edit) ----------
   The v1.2 public refactor removed the .library / .article-sidebar grid and .btn-danger these screens
   were built on, which stacked the workflow sidebar above the form and turned role-less and
   destructive buttons into plain text. The public site keeps its four button roles; these rules only
   add what staff tools need. Guarded by tests/staff-regression.test.js. */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; padding: 26px 0 64px; }
/* round 3: the side column holds a dozen boxes (DOI & ISSN, workflow, reminders, notifications, files, chats);
   as a sticky viewport-high scroll box everything below its first screen was hidden behind an inner
   scrollbar, so it is an ordinary column that scrolls with the page */
.workspace-side { order: 2; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1099px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace-side { order: 2; }
}
/* curation drafts awaiting a super admin (curation prompts §2.3) */
.curation-draft { margin-bottom: 18px; }
.curation-draft textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- Screening card (screening prompts §1.6) ----------
   Scores, matches, the stored report and the editorial decision. Admin and editor only — an author never
   sees this card. Guarded by tests/screening.test.js and tests/staff-regression.test.js. */
.alert.warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.screening-card .scr-run { border-top: 1px solid var(--line); padding: 10px 0; }
.screening-card .scr-run:first-of-type { border-top: 0; padding-top: 0; }
.scr-run.is-flagged { border-left: 3px solid var(--bad); padding-left: 10px; }
.scr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.scr-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.scr-scores > div { background: var(--bg-soft); border-radius: 6px; padding: 8px 6px; text-align: center; }
.scr-num { display: block; font-size: 19px; font-weight: 800; color: var(--brand-dark); }
.scr-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.scr-flag { margin: 6px 0; font-size: 13px; font-weight: 600; color: var(--bad); }
.scr-matches { list-style: none; margin: 6px 0; padding: 0; font-size: 13px; }
.scr-matches li { padding: 3px 0; overflow-wrap: anywhere; }
.scr-pct { display: inline-block; min-width: 38px; font-weight: 700; }
.scr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.scr-form { margin-top: 8px; }
.scr-decision { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.scr-decision summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.scr-h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 14px 0 6px; }
.scr-history { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.scr-history li { padding: 6px 0; border-top: 1px solid var(--line); }
.scr-history li:first-child { border-top: 0; }
.scr-note { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.scr-history-box summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* ---------- Round 3: editor profile and scoped-admin workspaces ----------
   Editor dashboard (tiles, queue tabs, one complete card per assigned article), the article workspace
   (decision with "Checked", communication, peer reviews & notices, notifications, reminders) and the
   admin additions (DOI & ISSN box, change status, queues, editor workload). Guarded by
   tests/round3-staff.test.js and tests/staff-regression.test.js. */
.staff-page .page-head { margin-bottom: 18px; }
.stat-tile.is-alert { border-color: #f3c4c4; background: #fff7f7; }
.stat-tile.is-alert .num { color: var(--bad); }
a.stat-tile { display: block; text-decoration: none; color: inherit; }
a.stat-tile:hover { border-color: var(--gufo-ink); }
.queue-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.queue-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.queue-tabs a:hover { border-color: var(--gufo-ink); }
.queue-tabs a.is-current { background: var(--gufo-ink); border-color: var(--gufo-ink); color: #fff; }
.queue-tabs .count { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--muted); }
.queue-tabs a.is-current .count { background: rgba(255,255,255,.18); color: #fff; }
.staff-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.staff-main, .staff-side { min-width: 0; }
.staff-side { display: flex; flex-direction: column; gap: 14px; }
.staff-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; margin-bottom: 16px; }
.staff-filter input[type=search] { flex: 1 1 220px; min-width: 0; }
.staff-filter select { flex: 0 1 190px; }
.admin-filter { padding: 14px 18px; margin: 0 0 14px; }
.bulk-bar { padding: 10px 18px; margin-bottom: 12px; }
.assign-list { display: flex; flex-direction: column; gap: 14px; }
.assign-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gufo-ink); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-card); }
.assign-card.is-overdue { border-left-color: var(--bad); }
.assign-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assign-title { font-size: 18px; margin: 10px 0 4px; }
.assign-title a { color: var(--brand-dark); text-decoration: none; }
.assign-title a:hover { color: var(--brand); text-decoration: underline; }
.assign-meta { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.assign-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 14px; margin: 0 0 12px; }
.assign-facts div { background: var(--bg-soft); border-radius: 6px; padding: 6px 10px; min-width: 0; }
.assign-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.assign-facts dd { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.assign-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.due-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); background: #e6f0fb; color: #1f4f7a; white-space: nowrap; }
.due-chip.is-overdue { background: #fdecec; color: var(--bad); }
.checked-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ok); margin: 0 0 8px; }
.check-confirm { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; }
.check-confirm input { margin-top: 2px; width: auto; }
.decision-form { margin-bottom: 14px; }
.change-status { margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.change-status textarea { margin: 0 0 8px; }
.wf-now { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.plain-list li + li { border-top: 1px solid var(--line); }
.reminder-list li, .message-list li, .queue-list li { padding: 8px 0; }
.note-body { margin: 4px 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rules-list { margin: 0; padding-left: 18px; font-size: 13.5px; }
.rules-list li { margin: 0 0 6px; }
.queue-list { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.queue-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-top: 1px solid var(--line); }
.queue-list li:first-child { border-top: 0; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.dash-grid .form-card { margin: 0; }
.dash-grid .dash-wide { grid-column: 1 / -1; }
.id-cell { font-size: 12.5px; white-space: nowrap; }
.id-ok { color: var(--ok); font-weight: 700; }
.id-missing { color: var(--muted); }
.admin-role { margin: -8px 20px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #fff; opacity: .75; }
/* the article workspace */
.back-link { font-size: 14px; }
.ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.ws-head h1 { margin: 0 0 4px; font-size: 24px; }
.ws-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ws-nav a { color: var(--text); text-decoration: none; font-weight: 600; }
.ws-nav a:hover { color: var(--brand); }
.ws-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ws-section { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; }
.ws-section h2 { font-size: 19px; margin: 0 0 12px; }
.chat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chat-box h3 { display: flex; align-items: center; gap: 8px; }
.chat-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.chat-empty { font-size: 13.5px; margin: 0; }
.chat-msg { background: var(--bg-soft); border-radius: 8px; padding: 8px 12px; border-left: 3px solid transparent; }
.chat-msg.is-mine { background: #eef2f7; }
.chat-msg.is-new { border-left-color: var(--gufo-red); background: #fff6f7; }
.chat-meta { font-size: 12px; color: var(--muted); }
.chat-role { font-weight: 600; }
.chat-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-box textarea + .btn { margin-top: 8px; }
.doc-list { list-style: none; margin: 0 0 14px; padding: 0; }
.doc-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.doc-item:first-child { border-top: 0; }
.doc-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); white-space: pre-wrap; }
.doc-form { border-top: 1px solid var(--line); padding-top: 12px; }
.doc-notify { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 10px; }
.notes-box .note-form textarea { margin: 0; }
.note-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 13.5px; }
.note-form-row label { margin: 0; font-weight: 600; }
.note-form-row input[type=date] { flex: 1 1 130px; width: auto; min-width: 0; }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-item { padding: 8px 0; border-top: 1px solid var(--line); }
.note-item.is-due .note-body { font-weight: 600; }
.note-item.is-done .note-body { text-decoration: line-through; color: var(--muted); }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; }
.note-delete { color: var(--bad); }
.activity-box h3 { display: flex; align-items: center; gap: 8px; }
.activity-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.activity-item { padding: 7px 0 7px 10px; border-left: 3px solid transparent; border-top: 1px solid var(--line); font-size: 13.5px; }
.activity-item:first-child { border-top: 0; }
.activity-item.is-new { border-left-color: var(--gufo-red); background: #fff6f7; }
.activity-text { font-weight: 600; }
.activity-detail { color: var(--text); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-meta { color: var(--muted); font-size: 12px; }
@media (max-width: 1099px) {
  .staff-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .chat-pair { grid-template-columns: minmax(0, 1fr); }
  .staff-filter select, .staff-filter input[type=search] { flex: 1 1 100%; }
  .assign-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-section { padding: 14px; }
}

/* destructive staff actions: delete, reject, request corrections, takedown */
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: var(--bad-hover); color: #fff; }
/* a .btn with no role (Unlock, Reinstate, Run scan, Spam, Mark read, Set, + Add co-author …) keeps a
   visible neutral fill; :where() keeps the specificity of .btn so contextual rules still win */
.btn:where(:not(.btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger)) { background: var(--bg-soft); border-color: var(--line); color: var(--text); }
.btn:where(:not(.btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger)):hover { background: var(--line); color: var(--text); }
.rte { border: 1px solid #cbd5e1; border-radius: var(--r-field); overflow: hidden; background: #fff; }
.rte-bar { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--bg-soft); padding: 6px; }
.rte-bar button { border: none; background: transparent; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); }
.rte-bar button:hover { background: #e5ecf3; }
.rte-area { min-height: 160px; max-height: 480px; overflow-y: auto; padding: 12px 14px; outline: none; font-size: 15px; }
.rte-area[contenteditable=false] { background: var(--bg-soft); color: var(--muted); }
.rte-bar .rte-sep { width: 1px; background: var(--line); margin: 2px 4px; align-self: stretch; }
.rte-bar button[disabled] { opacity: .4; cursor: default; }
.rte-bar .rte-ref { margin-left: auto; border: 1px solid var(--line); background: #fff; }
.rte-area table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.rte-area td, .rte-area th { border: 1px solid #cbd5e1; padding: 6px 8px; min-width: 40px; }
.rte-area blockquote { border-left: 3px solid var(--line); margin: 8px 0; padding: 4px 12px; color: var(--muted); }
.rte-source { width: 100%; min-height: 240px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.rte.is-source .rte-area { display: none; }
.rte.is-locked .rte-area { max-height: 320px; }

/* ---------- Author area (author-area prompts v2) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.account-page { padding-top: 0; }
.account-tabs { position: sticky; top: var(--header-h); z-index: 30; background: #fff; border-bottom: 1px solid var(--line); margin: 0 0 24px; }
.account-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; justify-content: center; }
.account-tabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px; font-weight: 600; font-size: 15px; color: var(--text); text-decoration: none; white-space: nowrap; }
.account-tabs a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; background: var(--gufo-red); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease; }
.account-tabs a:hover::after, .account-tabs a:focus-visible::after, .account-tabs a.is-current::after { transform: scaleX(1); }
.account-tabs a.is-current { color: var(--gufo-red); }
.user-chip img.avatar { object-fit: cover; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 28px; }
.page-head .sub { margin: 4px 0 0; color: var(--muted); max-width: 720px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.back-link { display: inline-block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }

/* status pills — one colour per state group, defined here only (A3) */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; background: #f1f1f3; color: #52525b; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.group-draft { background: #f1f1f3; color: #52525b; }
.pill.group-payment { background: #fff4d6; color: #92400e; }
.pill.group-review { background: #e6f0fb; color: #1f4f7a; }
.pill.group-corrections { background: #ffedd5; color: #9a3412; }
.pill.group-published { background: #e7f0e9; color: var(--ok); }
.pill.group-rejected { background: #fdecec; color: var(--bad); }
.pill.group-withdrawn { background: #ececee; color: #3f3f46; }

/* My publications */
.pubs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.pubs-filter { position: sticky; top: calc(var(--header-h) + 64px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow); }
.pubs-filter h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--gufo-red); }
.pubs-filter ul { list-style: none; margin: 0 0 20px; padding: 0; }
.pubs-filter li a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-btn); color: var(--text); text-decoration: none; font-size: 14.5px; }
.pubs-filter li a.is-current { background: var(--gufo-red); color: #fff; }
.pubs-filter li a:hover:not(.is-current) { background: var(--bg-soft); }
.pubs-filter .count { font-size: 12.5px; opacity: .85; }
.pubs-filter label.inline { margin: 6px 0; }
.pubs-table td { vertical-align: middle; }
.pubs-table .t-title { font-weight: 600; color: var(--text); text-decoration: none; }
.pubs-table .t-title:hover { color: var(--gufo-red); text-decoration: underline; }
.unread { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--gufo-red); margin-top: 2px; }
.unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gufo-red); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pubs-q { display: flex; gap: 6px; margin: 0 0 18px; }
.pubs-q input { min-width: 0; }
.pubs-main { min-width: 0; }
.pubs-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
.pubs-toolbar p { margin: 0; }
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; background: #fff; }
.view-switch a { padding: 7px 16px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
.view-switch a + a { border-left: 1px solid var(--line); }
.view-switch a.is-current { background: var(--gufo-ink); color: #fff; }
/* My publications — the live card view: a 350px card, a 3px border coloured by status (published green,
   in progress yellow, rejected red), the title centred on a light top area, details on grey, and the
   actions on a bar along the bottom */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.pub-card { position: relative; height: 350px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 3px solid #d1d5db; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.12); transition: transform .25s ease, box-shadow .25s ease; }
.pub-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.pub-card[data-group="published"] { border-color: #12E600; }
.pub-card[data-group="review"], .pub-card[data-group="payment"], .pub-card[data-group="corrections"] { border-color: #FFD800; }
.pub-card[data-group="rejected"], .pub-card[data-group="withdrawn"] { border-color: #FF0000; }
.pub-head { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px 50px 10px; background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); }
.pub-title { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 700; text-align: center; color: #1f2937; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pub-title a { color: inherit; text-decoration: none; }
.pub-card:hover .pub-title a, .pub-title a:hover { color: #AC2C3D; }
/* G3.1 — the round badge of a My publications card only (as a bare .pub-logo it also took the article header's logo
   out of the page) */
.pub-card .pub-logo { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: block; }   /* round P, P1.6: the badge as supplied */
.pub-card .pub-logo img { width: 44px; height: 44px; display: block; }
.pub-body { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 12px 18px 58px; background: #fafafa; border-top: 1px solid #eef0f2; }
.pub-author { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: #AC2C3D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-line { margin: 0; font-size: 12.5px; line-height: 1.45; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-line strong { font-weight: 600; color: #4b5563; margin-right: 4px; }
.pub-id, .pub-id strong { font-style: italic; color: #3B82F6; }
.pub-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pub-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; justify-content: center; padding: 9px 12px; background: rgba(255,255,255,.98); border-top: 2px solid #e9ecef; }
.pub-actions .btn { white-space: nowrap; }
.assigned-ids { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0 0; font-size: 14px; }
.assigned-ids dt { font-weight: 700; }
.assigned-ids dd { margin: 0; }
.empty-state { text-align: center; padding: 48px 20px; border: 1px dashed var(--line); border-radius: var(--r-card); background: #fff; }
.empty-state h2 { margin-top: 0; }
.empty-state .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.pagination .current { font-weight: 700; }

/* numbered submission sections (A4 / A5) */
.submission-form .form-main { min-width: 0; }
.form-section { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow); min-width: 0; }
.form-section.is-locked { background: var(--bg-soft); }
.fs-title { display: flex; align-items: center; gap: 12px; font-size: 19px; margin: 0 0 6px; flex-wrap: wrap; }
.fs-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gufo-ink); color: #fff; font-size: 14px; flex: none; }
.lock-pill, .unlock-pill { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: var(--r-pill); }
.lock-pill { background: #ececee; color: #52525b; }
.unlock-pill { background: #e7f0e9; color: var(--ok); }
.field { min-width: 0; }
.field-error { color: var(--bad); font-size: 13.5px; font-weight: 600; margin: 6px 0 0; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .rte-area[aria-invalid="true"], .pkg-list[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(185, 28, 28, .15); }
.form-errors ul { margin: 8px 0 0; padding-left: 20px; }
.form-errors a { color: var(--bad); }
textarea.is-muted { opacity: .55; }
.consents { margin-top: 14px; }
.corr-choice { margin-top: 8px; }
.auto-title { margin-top: 8px; }
/* G10.1 — the notifications timeline */
.timeline .tl-what { margin-bottom: 2px; }
.timeline .tl-chip { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.timeline [data-kind="system"] .tl-chip { color: #1f4f7a; }
.timeline [data-kind="message"] .tl-chip { color: var(--gufo-red); }
/* G10.3 — the Files list */
.files-table td { vertical-align: top; }
/* in a sidebar column the list stacks: one file per block, its tag, note, uploader and date beneath its name */
.sidebox .files-table thead { display: none; }
.sidebox .files-table, .sidebox .files-table tbody, .sidebox .files-table tr, .sidebox .files-table td { display: block; width: auto; }
.sidebox .files-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sidebox .files-table td { padding: 2px 0; border: 0; font-size: 13px; }
.sidebox .files-table td:empty { display: none; }
.file-tag[data-tag="peer_review"] { background: #e8f1f9; color: #1f4f7a; }
.file-tag[data-tag="notice"] { background: #fff4d6; color: #7a5200; }
.file-tag[data-tag="manuscript"] { background: #f1ecf9; color: #4b2a7a; }
.timeline .tl-invite { font-weight: 600; }
/* G10.2 — a due reminder that is not emailed: red, on its date */
.reminder-unemailed, .reminder-unemailed a { color: var(--gufo-red); }
/* G9 — copy still to come (the Author Guidelines' sections from the editorial office), the editor's workflow, Appeals */
.copy-pending { background: #fff8e6; border-left: 3px solid #f0c24b; padding: 8px 12px; color: #6b5200; font-style: italic; }
ol.editing-workflow li { margin-bottom: 8px; }
ul.policy-appeals { list-style: none; padding-left: 0; }
/* G5 — a Crossref failure message on the article's card */
.err-text { color: var(--gufo-red); }
/* G6 — the structured manuscript: word counters, the additional section */
.word-counter { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; text-align: right; }
.word-counter.is-over { color: var(--gufo-red); font-weight: 700; }
.manuscript-section { margin-bottom: 18px; }
.screening-note { margin-top: 10px; }
.manuscript-extra > summary { cursor: pointer; font-weight: 600; margin: 10px 0 6px; }
/* G8.2 — the editorial actions of an unpaid submission, disabled as one block */
fieldset.payment-gate { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.payment-gate:disabled { opacity: .55; }
fieldset.payment-gate:disabled :is(button, .btn, input, select, textarea) { cursor: not-allowed; }
.badge.payment-pending { background: #fff4d6; color: #7a5200; border: 1px solid #f0c24b; }
.payment-pending-note .badge { margin-right: 6px; }
fieldset.ethics { border: 1px solid var(--line); border-radius: var(--r-field); padding: 6px 16px 14px; margin: 16px 0 0; }
fieldset.ethics legend { font-weight: 600; font-size: 14.5px; padding: 0 6px; }
.ethics-required { color: #9a3412; font-weight: 600; }
.current-file { font-size: 14px; background: var(--bg-soft); border-radius: var(--r-field); padding: 8px 12px; }
.summary-side .sidebox h3 { margin-bottom: 10px; }
.pkg-list { border-radius: var(--r-field); }
.pkg-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-field); margin: 0 0 8px; font-weight: 400; font-size: 14px; cursor: pointer; }
.pkg-option input { width: auto; margin-top: 3px; }
.pkg-option.is-selected { border-color: var(--gufo-red); background: #fdf5f6; }
.pkg-option .price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.summary-actions { display: grid; gap: 8px; margin-top: 16px; }
.cancel-link { text-align: center; color: var(--muted); font-size: 14px; padding: 6px 0; }
.autosave-status { font-size: 13px; color: var(--muted); margin: 10px 0 0; min-height: 1.2em; }
.autosave-status.is-error { color: var(--bad); }
.discard-draft { margin-top: -40px; margin-bottom: 40px; }
.edit-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.unlock-scope { margin-top: 8px; font-size: 13.5px; }
.unlock-scope summary { cursor: pointer; }

/* co-author rows (A13) */
.coauthor-list { display: grid; gap: 12px; margin: 12px 0; }
.coauthor-row { border: 1px solid var(--line); border-radius: var(--r-field); padding: 10px 16px 14px; background: #fff; margin: 0; min-width: 0; }
.coauthor-row.is-dragging { opacity: .5; }
.coauthor-row legend { font-weight: 700; font-size: 14.5px; padding: 0 6px; display: flex; align-items: center; gap: 6px; }
.drag-handle { cursor: grab; color: var(--muted); font-size: 16px; }
.co-num { font-variant-numeric: tabular-nums; }
.row-tools { display: flex; justify-content: flex-end; gap: 6px; }
.row-tool { background: none; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 4px 10px; min-height: 32px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.row-tool:hover { border-color: var(--gufo-ink); }
.row-tool.co-up, .row-tool.co-down { font-weight: 700; }
.row-tool.danger, .co-remove { color: var(--bad); }
.coauthor-cap { color: #9a3412; font-weight: 600; }
@media (pointer: coarse) { .row-tool { min-height: 44px; min-width: 44px; } }

/* upload progress (A6.5) */
.upload-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.upload-progress .bar { flex: 1; height: 8px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
.upload-progress .bar span { display: block; height: 100%; width: 0; background: var(--gufo-red); transition: width 120ms linear; }
.upload-progress .pct { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 3em; }

/* submission page (A7 / A8 / A11 / A12) */
.submission-head h1 { margin: 4px 0 8px; font-size: 26px; }
.submission-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stage-help { color: var(--muted); margin: 8px 0 0; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 12px 12px; font-size: 13.5px; }
.timeline li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--gufo-ink); }
.timeline li.tl-stage::before { background: var(--gufo-ink); }
.tl-date { display: block; font-size: 12px; color: var(--muted); }
.tl-note { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.screen-lines { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.plain-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.plain-list li { padding: 3px 0; }
.coauthor-confirm { font-size: 13.5px; }
.version-list { margin: 0; padding-left: 20px; font-size: 13.5px; }
.version-list li { margin-bottom: 6px; }
.version-list li.is-current a { font-weight: 700; }
.version-list span { display: block; }
.version-compare select { margin-bottom: 6px; }
.diff ins { background: #dcfce7; text-decoration: none; }
.diff del { background: #fee2e2; }
.diff-field { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.diff-field h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 0 0 6px; }
details.sidebox > summary { cursor: pointer; }

/* checkout (A9) */
.checkout-wrap { max-width: 640px; margin: 0 auto; }
.checkout-dl dt { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.checkout-dl dd { margin: 2px 0 12px; }
.checkout-dl .amount { font-size: 24px; font-weight: 800; color: var(--gufo-ink); }
.checkout-dl .amount s { font-size: 17px; font-weight: 400; }
.coupon-form { display: flex; gap: 8px; margin: 8px 0 4px; }
.refund-terms { background: var(--bg-soft); border-radius: var(--r-card); padding: 14px 18px; margin: 18px 0; font-size: 14px; }
.refund-terms h3 { margin: 0 0 6px; font-size: 15px; }
.refund-terms ul { margin: 0; padding-left: 18px; }

/* profile and settings (A2) */
.profile-form .form-section { box-shadow: none; }
.avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-lg { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--gufo-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; flex: none; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.settings-grid .form-card.wide { grid-column: 1 / -1; }
.danger-zone { border-color: #f3c4c4; }
.pw-field { display: flex; gap: 6px; align-items: stretch; }
.pw-field input { flex: 1; min-width: 0; }
.pw-toggle { flex: none; }

/* public author page (A2.2) */
.author-card { display: flex; gap: 24px; align-items: flex-start; }
.author-card .avatar-lg { width: 112px; height: 112px; font-size: 42px; }
.author-card h1 { margin: 0 0 4px; }
.author-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 14.5px; margin: 4px 0 10px; }
.id-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.id-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; text-decoration: none; color: var(--text); background: #fff; }
.id-badge:hover { border-color: var(--gufo-ink); }
.author-totals { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.author-totals div { background: var(--bg-soft); border-radius: var(--r-card); padding: 8px 14px; font-size: 13px; color: var(--muted); }
.author-totals strong { display: block; font-size: 20px; color: var(--gufo-ink); }

@media (max-width: 1099px) {
  /* minmax(0, …): the table scrolls inside .table-wrap instead of widening the page */
  .pubs-layout { grid-template-columns: minmax(0, 1fr); }
  .pubs-layout > * { min-width: 0; }
  .pubs-filter { position: static; }
}
@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .account-tabs ul { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .account-tabs ul::-webkit-scrollbar { display: none; }
  .account-tabs a { min-height: 48px; padding: 0 12px; font-size: 14px; }
  .form-section { padding: 16px; }
  .author-card { flex-direction: column; }
  .page-head h1 { font-size: 24px; }
  .discard-draft { margin-top: 0; }
  .pub-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Responsive (prompts v1.2 §10) ----------
   phone < 768 · tablet 768–1099 · desktop >= 1100. Three breakpoints, nothing else. */

body { overflow-x: hidden; }

/* ===== desktop ===== */
@media (min-width: 1100px) {
  .mobile-toggle { display: none; }
  .nav { display: flex; }
}

/* ===== tablet: 768–1099 ===== */
@media (min-width: 768px) and (max-width: 1099px) {
  /* two panes — rows + preview; the filters move into the sheet */
  .results-page { padding: 0 20px; }
  .results-shell { grid-template-columns: minmax(0, 1fr) 46%; }
  .results-shell .filters { display: none; }
  .results-shell .filters.as-sheet { display: flex; }
  .filters-sheet-btn { display: inline-flex; margin-bottom: 12px; }
  .child-tiles { grid-template-columns: repeat(2, 1fr); }
  .child-tile, .browse-group .parent-band { min-height: 240px; }
  .home-bands .parent-band { min-height: 240px; }
  .article-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .article-reader { padding: 0 24px 40px; }
  .grid.cols-3, .grid.cols-4, .journal-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .carousel-track { grid-auto-columns: calc((100% - 22px) / 2); }
  .two-col, .journal-head, .board-grid, .choose-grid { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}

/* ===== tablet and phone: the nav becomes a hamburger with accordion sub-menus ===== */
@media (max-width: 1099px) {
  .mobile-toggle { display: block; margin-left: auto; }
  .nav { display: none; }
  .site-header .bar { flex-wrap: wrap; padding: 10px 16px; min-height: 56px; }
  .site-header.menu-open .nav { display: flex; flex-direction: column; align-items: stretch; width: 100%;
    border-top: 1px solid rgba(255,255,255,.15); padding-top: 8px; margin-left: 0; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; }
  .site-header.menu-open .nav .menu { position: static; opacity: 1; visibility: visible; transform: none;
    display: block; box-shadow: none; padding-left: 14px; background: transparent; margin-top: 0; }
  .site-header.menu-open .nav .menu::before, .site-header.menu-open .nav .menu::after { display: none; }
  .site-header.menu-open .nav .dd-toggle { text-align: left; }
  .site-header.menu-open .nav a::after, .site-header.menu-open .nav .dd-toggle::after { display: none; }
}

/* ===== phone: < 768 ===== */
@media (max-width: 767px) {
  .section { padding: var(--section-y-mobile) 0; }

  /* hero: tabs scroll horizontally keeping their counts; the category becomes a chip below */
  .hero { min-height: 0; padding: 48px 0; }
  .hero-search { grid-template-columns: 1fr; gap: 10px; }
  .hero-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hero-tabs::-webkit-scrollbar { display: none; }
  .hero-field { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  .hero-field input[type=search] { flex: 1 1 100%; height: var(--btn-h-m); order: 1; }
  .hero-field .hf-icon { order: 0; }
  .hero-field .hf-sep { display: none; }
  .hero-field select { order: 2; max-width: none; width: auto; border: 1px solid var(--line);
    border-radius: var(--r-pill); height: 36px; padding: 0 10px; margin-bottom: 4px; }
  .hero-search .btn { width: 100%; }

  /* library browse: parent band full width, tiles 2-up */
  .child-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .child-tile { min-height: 180px; }
  .home-bands .parent-band, .browse-group .parent-band { min-height: 200px; }
  .scope-bar ul { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 8px; gap: 0; }
  .scope-bar ul::-webkit-scrollbar { display: none; }
  .scope-bar a { min-height: 52px; font-size: 15px; padding: 0 12px; }
  .scope-bar a::after { bottom: 8px; left: 12px; right: 12px; }
  .lib-search { padding-left: 12px; }
  .lib-search input[type=search] { height: 52px; font-size: 16px; }
  .lib-search .btn { padding: 0 16px; }

  /* results: one column of rows, no preview pane, filters in a bottom sheet */
  .results-page { padding: 0 16px; }
  .results-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .results-head { align-items: flex-start; margin-bottom: 12px; }
  .preview-pane { display: none; }
  .filters-sheet-btn { display: inline-flex; margin-bottom: 12px; }
  .results-shell .filters { display: none; }
  .results-shell .filters.as-sheet { display: flex; position: fixed; inset: auto 0 0 0; z-index: 140;
    max-height: 86dvh; border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: var(--shadow-pop); }
  .sheet-close { position: absolute; top: 6px; right: 10px; z-index: 2; width: 44px; height: 44px;
    border: none; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
  .result-row { padding: 16px 14px 16px 11px; }
  .row-title { font-size: 16.5px; }

  /* article: one column; the tools and the reader stop being separate scroll boxes */
  /* minmax(0, 1fr), not 1fr: a wide table or long URL in the body set the column's minimum width
     and pushed the page (and the sidebar) to ~620px on a 390px phone */
  .article-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 84px; }
  .article-tools, .article-reader { position: static; max-height: none; overflow: visible; min-width: 0; }
  .article-tools { order: 2; padding: 0 16px; background: none; box-shadow: none; }
  .article-reader { order: 1; padding: 0 16px; }
  .focus-toggle { display: none; }
  .article-header { padding: 18px; }
  .pdfjs-viewport { height: 75vh; height: 75dvh; min-height: min(360px, 75vh); }
  .journal-info { text-align: left; margin-left: 0; }
  .article-top-row { gap: 10px; }
  .related-section { padding-bottom: 84px; }
  /* the actions become a sticky bottom bar */
  .article-actionbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--gufo-ink); border-top: 1px solid rgba(255,255,255,.12); }
  .article-actionbar .ab { flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center;
    color: #fff; background: none; border: none; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .article-actionbar .ab:active { background: rgba(255,255,255,.12); }
  .to-top { bottom: 118px; right: 14px; }
  .ga-bubble { bottom: 66px; }

  /* the rest */
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .journal-grid, .post-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .carousel-track { grid-auto-columns: 88%; }
  .carousel-btn { display: none; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .two-col, .journal-head, .board-grid, .choose-grid { grid-template-columns: 1fr; }
  .ga-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .ga-chips { flex-wrap: nowrap; overflow-x: auto; }
  .newsletter-row { flex-direction: column; }
  .newsletter-context .newsletter-row { width: 100%; max-width: none; }
  .license-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { display: flex; overflow-x: auto; padding: 8px; }
  .admin-side .logo { padding: 8px 14px; }
  .admin-side a.item { white-space: nowrap; }
  .admin-side .sep { display: none; }
}

/* ===== touch: §10.3 every interactive target at least 44x44 ===== */
@media (pointer: coarse) {
  .hero-tabs button,
  .lib-tabs a,
  .policy-tabs button,
  .filters .tabs button,
  .nav .menu a,
  .nav > a,
  .share-menu a, .share-menu button,
  .pagination a, .pagination span { min-height: 44px; display: flex; align-items: center; }
  .pagination a, .pagination span { justify-content: center; min-width: 44px; }
  .carousel-btn { width: 44px; height: 44px; }
  .pdfjs-toolbar .btn { min-width: 44px; min-height: 44px; }
  .mobile-toggle, .to-top { min-width: 44px; min-height: 44px; }
  .filters label.check { min-height: 44px; }
  .filters label.check input, input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .socials a { width: 44px; height: 44px; }
  .result-row { min-height: 60px; }
}

@media (max-width: 420px) {
  .child-tiles { grid-template-columns: 1fr; }
}/* the site header and the account tabs are both sticky: keep jumped-to fields below them */
.submission-form [id^="f-"], .submission-form .form-section, #form-errors, #local-restore { scroll-margin-top: calc(var(--header-h) + 76px); }

/* F1 — supplementary files: listed apart from the article's own PDF, on the article page and in the forms */
.supp-list { list-style: none; margin: 6px 0 12px; padding: 0; }
.supp-list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; overflow-wrap: anywhere; }
.supp-list li:last-child { border-bottom: 0; }
.supp-list a { font-weight: 600; }

/* F11 — a field another role owns is shown as text, never as a disabled input */
.article-form .ro-notice { font-size: 13.5px; }
.ro-field { margin: 10px 0 12px; }
.ro-label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.ro-value { margin: 0; padding: 8px 10px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-field); font-size: 14.5px; overflow-wrap: anywhere; }
.ro-value.ro-rich { max-height: 320px; overflow: auto; }
.ro-value.ro-rich p { margin: 0 0 8px; }
.article-form .form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* F4.6 — the integrity checklist of a shared article */
.integrity-card .ic-list { list-style: none; margin: 8px 0 0; padding: 0; }
.integrity-card .ic-item { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.integrity-card .ic-dot { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; background: #9aa0a6; }
.integrity-card .ic-green .ic-dot { background: var(--ok); }
.integrity-card .ic-amber .ic-dot { background: #c77700; }
.integrity-card .ic-red .ic-dot { background: var(--gufo-red); }
.integrity-card .ic-amber.is-acked .ic-dot { background: #8a8f45; }
.integrity-card .ic-body { min-width: 0; flex: 1; }
.integrity-card .ic-summary, .integrity-card .ic-evidence, .integrity-card .ic-ack { margin: 2px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.integrity-card ul.ic-evidence { padding-left: 16px; }
.integrity-card .ic-ack { color: var(--text); font-style: italic; }
.integrity-card .ic-ack-form { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.integrity-card .ic-ack-form input { flex: 1 1 140px; min-width: 0; }
.integrity-card .ic-compare { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; table-layout: fixed; }
.integrity-card .ic-compare th, .integrity-card .ic-compare td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.integrity-card .ic-compare tr.is-diff td { background: #fff4e0; }
.ic-outcome.ic-green { color: var(--ok); }
.ic-outcome.ic-amber { color: #c77700; }
.ic-outcome.ic-red { color: var(--gufo-red); }
.checked-flag.is-stale { color: #c77700; }

/* F5 — one Creative Commons badge per article, linked to the deed; F2.5 attribution block */
.cc-badge-link { display: inline-flex; flex: 0 0 auto; }
.cc-badge { display: block; width: 88px; height: 31px; }
.cc-badge-s { vertical-align: middle; }
.attribution .attribution-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: 14px; }
.attribution .attribution-list dt { font-weight: 700; color: var(--muted); }
.attribution .attribution-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .attribution .attribution-list { grid-template-columns: minmax(0, 1fr); } .attribution .attribution-list dd { margin-bottom: 6px; } }

/* F9 — the autosave state beside a staff form's Save button: Saved 12:04 · Saving… · Unsaved changes */
.autosave-state { font-size: 13px; color: var(--muted); }
.autosave-state.is-dirty { color: #c77700; }
.autosave-state.is-error { color: var(--gufo-red); font-weight: 700; }
.autosave-state.is-saved { color: var(--ok); }

/* Amendment 1 F3 — the curated queue: per item, the checks the Shared Admin decides on */
.curation-queue td { vertical-align: top; }
.curation-queue td[data-col] { min-width: 110px; }
.ap-checks { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.ap-check { font-size: 12px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--bg-soft); overflow-wrap: anywhere; }
.ap-check.is-ok { color: var(--ok); }
.ap-check.is-bad { color: var(--gufo-red); }


/* F7 — an author who consented shows their address (assembled by ui.js) */
/* round I, I10 — the author's address in black (decision 27 Sep); red stays for rules and accents */
.author-list .au-email { display: block; font-size: 12.5px; color: #000; overflow-wrap: anywhere; text-decoration: none; }

/* ===== F10 — the public site on phones and tablets =====
   Every tap target at least 44 × 44 px (F10.3). Links inside running text keep their line (WCAG 2.5.8's inline
   exception); every standalone link and control grows to 44 px. On touch screens the article cards' grey band grows
   so the category and DOI links can be 44 px tall (F10.3 over the Round 3 fixed 350 px card, which desktop keeps). */
@media (max-width: 767px), (pointer: coarse) {
  .btn, a.btn, button.btn { min-height: 44px; }
  .btn-s { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .btn-ghost { display: inline-flex; align-items: center; min-height: 44px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height: 44px; }
  .skip-link { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }

  /* footer: one link per 44 px row, the bottom line's links and the newsletter form */
  .site-footer .links-col a { display: flex; align-items: center; min-height: 44px; }
  .site-footer .bottom-right a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

  /* cards: the top block keeps its desktop 230 px, so the badge sits where live puts it (straddling the grey
     band by 11 px); only the grey band grows, by the 26 px each 44 px link row needs */
  .a-card { height: auto; }
  .a-top { flex: none; height: 230px; }
  .a-meta { height: auto; min-height: 118px; }
  .a-meta > .a-cat { display: flex; align-items: center; min-height: 44px; }
  .a-meta .a-doi { display: flex; align-items: center; min-height: 44px; }
  .a-meta .a-doi a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; overflow: hidden; text-overflow: ellipsis; }
  .carousel-track { align-items: stretch; }

  /* article page: breadcrumbs, authors, licence, journal and the side boxes' links */
  .breadcrumb a, .back-crumb { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .article-authors a { display: inline-block; min-height: 44px; line-height: 44px; }
  .license-row a, .journal-info a, .attribution-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .sidebox > a, .sidebox p > a:only-child, .sidebox dd > a, .hint.center a { display: inline-flex; align-items: center; min-height: 44px; }
  .author-list .an a, .author-list .au-email { display: inline-flex; align-items: center; min-height: 44px; }
  .author-list .orcid { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; vertical-align: middle; }
  /* the article's table of contents and the slim footer of the article pages (found on QA, 19 Sep) */
  .toc a { display: flex; align-items: center; min-height: 44px; }
  .slim-footer .sf-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  #article-how-to-cite p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
  /* F10.1 — as on live, the first screen is the header and the hero; the search icon shares the field's row */
  .hero { min-height: calc(100dvh - var(--header-h)); padding: 20px 0; }
  .hero-field { flex-wrap: wrap; align-items: center; }
  .hero-field .hf-icon { order: 0; flex: none; }
  .hero-field input[type=search] { order: 1; flex: 1 1 0; min-width: 0; }
  .hero-field select { order: 2; flex: 1 1 100%; height: 44px; }
}

/* F11 — the author rows and the declarations on the editor's content form (and the admin form's override) */
.author-rows, .declarations { border: 1px solid var(--line); border-radius: var(--r-field); padding: 10px 14px 12px; margin: 14px 0; }
.author-rows legend, .declarations legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
.author-rows-table { width: 100%; font-size: 13.5px; }
.author-rows-table td { padding: 4px 6px; vertical-align: middle; }
.author-rows-table input[type=text], .author-rows-table input[type=email] { width: 100%; min-width: 120px; margin: 0; }
.author-rows-table tr.author-new td { background: var(--bg-soft); }
.author-ro { margin: 0; padding-left: 20px; }
.author-ro li { margin: 2px 0; }

/* F12 — the two confirmations before publication, and their history */
.signatures { display: grid; gap: 8px; margin: 10px 0 12px; }
.sig-row { border: 1px solid var(--line); border-radius: var(--r-field); padding: 8px 10px; font-size: 13.5px; display: grid; gap: 4px; }
.sig-row.is-ok { border-color: var(--ok); background: #f1faf3; }
.sig-row.is-stale { border-color: #c77700; background: #fff8ec; }
.sig-problems { margin: 4px 0; padding-left: 18px; color: var(--gufo-red); font-size: 13px; }
.sig-history-title { margin: 4px 0; font-size: 13px; }
.sig-history { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; }
.sig-history li { margin: 3px 0; }

/* F13 — conversations: system lines, retracted messages, attachments, the author's two tabs */
.chat-msg.is-system { background: none; border-left: 3px solid var(--line); font-size: 13px; color: var(--muted); padding: 4px 10px; }
.chat-msg.is-retracted { opacity: .75; }
.chat-attach { font-size: 13.5px; margin-top: 4px; }
.chat-retract { margin-top: 2px; text-align: right; }
.chat-retract .linklike { font-size: 12px; color: var(--muted); }
.chat-form .chat-file { display: block; margin: 6px 0 0; font-size: 13px; }
.thread-join { margin-top: 6px; }
.thread-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 0 0 10px; }
.thread-tabs [role=tab] { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; color: var(--muted); min-height: 44px; }
.thread-tabs [role=tab].is-active, .thread-tabs [role=tab][aria-selected=true] { color: var(--text); border-bottom-color: var(--gufo-red); }
.messages-box .chat-box { box-shadow: none; border: 0; padding: 0; margin: 0; }

/* F9 — the autosave state, the red row, and the leave / conflict dialogs */
.autosave-state.is-saving { color: var(--muted); }
.autosave-state.is-saved { color: var(--ok); }
.autosave-state.is-conflict { color: #c77700; font-weight: 700; }
.autosave-retry { font-weight: 700; text-decoration: underline; cursor: pointer; background: none; border: none; color: inherit; padding: 0; font: inherit; }
tr.autosave-row-error td, li.autosave-row-error, details.autosave-row-error, .sidebox.autosave-row-error { background: #fdecee; }
.gufo-modal-backdrop { position: fixed; inset: 0; background: rgba(12, 12, 16, .55); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gufo-modal { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-pop); max-width: 640px; width: 100%; max-height: 90dvh; overflow: auto; padding: 20px 22px; }
.gufo-modal h2 { margin: 0 0 10px; font-size: 20px; }
.gufo-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.gufo-modal-msg { color: var(--gufo-red); font-weight: 600; margin: 8px 0 0; min-height: 1em; }
.gufo-conflict { border: 1px solid var(--line); border-radius: var(--r-field); padding: 8px 12px; margin: 10px 0; }
.gufo-conflict legend { font-weight: 700; padding: 0 6px; }
.gufo-diff { font-size: 14px; line-height: 1.5; background: var(--bg-soft); border-radius: 6px; padding: 6px 8px; margin: 6px 0; overflow-wrap: anywhere; }
.gufo-diff del { background: #fdecee; color: #8a1c2b; }
.gufo-diff ins { background: #e7f6ea; color: #1d6b32; text-decoration: underline; }

/* Amendment 1, F4.2 — what Crossref says, beside the typed values: a helper, never a block */
.integrity-card .crossref-helper { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.integrity-card .crossref-helper h4 { margin: 0 0 6px; font-size: 14px; }

/* H1 — the Gufo Assistant's health card (admin dashboard, assistant report) */
.assistant-health { margin: 18px 0; }
.assistant-health.is-alert { border-color: #f3c4c4; background: #fff7f7; }
.assistant-health .health-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0; font-size: 14px; }
.assistant-health .health-list dt { color: var(--muted); }
.assistant-health .health-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.assistant-health .health-error { font-size: 13px; color: var(--bad); margin-top: 2px; }
.assistant-health .health-hint { font-size: 13.5px; margin: 8px 0; }
@media (max-width: 560px) { .assistant-health .health-list { grid-template-columns: 1fr; } .assistant-health .health-list dd { margin-bottom: 6px; } }

/* H8 — the admin sidebar brand: the logo and "Admin" */
.admin-side .logo { display: flex; align-items: center; gap: 10px; }
.admin-side .logo img { width: 94px; height: 38px; }
.admin-side .logo .logo-admin { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: .3px; }

/* Round I, I1 — figures from the article editor, numbered in order ("Figure 1.") on the page */
#article-body { counter-reset: gufo-fig; }
.article-content figure.gufo-figure { counter-increment: gufo-fig; display: block; text-align: center; margin: 22px 0; overflow: visible; }
.article-content figure.gufo-figure img { max-width: 100%; height: auto; }
.article-content figure.gufo-figure figcaption { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.article-content figure.gufo-figure figcaption::before { content: "Figure " counter(gufo-fig) ". "; font-weight: 700; color: var(--text); }
.article-content figure.gufo-figure:not(:has(figcaption))::after { content: "Figure " counter(gufo-fig) "."; display: block; margin-top: 8px; font-size: 14.5px; font-weight: 700; }
.article-content td[colspan], .article-content th[colspan] { text-align: center; }

/* Round I, I8 — who sees a file */
.file-visibility { white-space: nowrap; }
.file-visibility .vis-form { display: inline-block; margin-left: 6px; }
.badge.vis-internal { background: #eef2f7; color: #334155; }
.badge.vis-author { background: #e7f6ec; color: #166534; }
.vis-choice { border: 0; padding: 0; margin: 8px 0; }
.vis-choice legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; }

/* Round I, I2 — Attach file: progress, then the result */
.attach-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.attach-progress[hidden] { display: none; }
.attach-progress progress { flex: 1; max-width: 260px; height: 10px; accent-color: var(--brand); }
.attach-status { margin: 6px 0 0; font-size: 13.5px; min-height: 0; }
.attach-status:empty { display: none; }
.attach-status.is-ok { color: #166534; }
.attach-status.is-error { color: var(--bad); }
[data-attach] > [data-attach-go] { margin-top: 8px; }

/* Round I, I11 — references in APA: guidance, DOI helper, soft warnings */
.apa-box { margin: 4px 0 10px; font-size: 14px; }
.apa-guide { margin: 0 0 8px; line-height: 1.5; }
.apa-doi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.apa-doi input { flex: 1 1 260px; min-width: 0; }
.apa-status { margin: 6px 0 0; font-size: 13.5px; }
.apa-status:empty { display: none; }
.apa-status.is-ok { color: #166534; }
.apa-status.is-error { color: var(--bad); }
.apa-warnings { margin-top: 8px; padding: 10px 12px; border: 1px solid #f1d58a; background: #fff8e6; border-radius: 8px; }
.apa-warnings[hidden] { display: none; }
.apa-warnings ul { margin: 4px 0; padding-left: 1.1em; }
.apa-warnings li { margin-bottom: 6px; }
.apa-warn-head { margin: 0; font-weight: 600; }
.apa-ref { display: block; }
.apa-why { display: block; color: #7a5a00; font-size: 13px; }
.apa-dismiss { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.doi-fill-status:empty { display: none; }   /* round I, I12 — "Title filled in from Crossref" */

/* Round I, I14 — the policy pages, from journals and the Author Guidelines */
.journal-policies { margin-top: 24px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
.journal-policies h2, .journal-policies h3 { margin: 0 0 6px; font-size: 16px; }
.policy-links { margin: 0; padding-left: 1.1em; }
.policy-links li { margin: 4px 0; }
.policy-links a { display: inline-block; min-height: 32px; line-height: 32px; }

/* Round P, P1.4 / P1.5 — notifications, test email, delivery log */
#notifications h4 { margin: 22px 0 6px; }
.test-email-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.test-email-form input { flex: 1 1 260px; min-width: 0; }
.delivery-log { margin-top: 12px; }
.delivery-log summary { cursor: pointer; font-weight: 600; }

/* Round P, P7 — Data checks, Licences, a source journal */
.data-checks td { vertical-align: top; }
.data-checks .inline-form { display: flex; gap: 6px; flex-wrap: wrap; }
.data-checks .inline-form input[type=text] { flex: 1 1 160px; min-width: 0; }
.licence-proposals .proposal { border-top: 1px solid var(--line); padding: 12px 0; }
.licence-proposals .proposal:first-of-type { border-top: 0; }
.licence-proposals .proposal .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.grid-2 .form-card { max-width: none; margin: 0; }
.grid-2 textarea { width: 100%; }