:root {
  --wiki-blue: #36c;
  --wiki-blue-dark: #2a4b8d;
  --border: #c8ccd1;
  --border-light: #eaecf0;
  --bg: #f8f9fa;
  --text: #202122;
  --highlight: #fef6d5;
  --highlight-active: #ffe89c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--text);
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a {
  color: var(--wiki-blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  /* Keep the bar background full-bleed but align its content to the same
     centered 1400px column the article uses, so the header logo lines up with
     the article and "Sign out" lines up with the comments edge (no floating). */
  padding: 8px max(28px, calc((100% - 1400px) / 2 + 28px));
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.logo:hover .logo-text { color: var(--wiki-blue); }
.logo:hover .logo-globe { border-color: var(--wiki-blue); }
.logo-globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: Georgia, serif;
  font-size: 22px;
  color: #54595d;
}
.logo-text {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.1;
  color: #54595d;
}
.logo-text small {
  font-size: 11px;
  color: #72777d;
  font-family: sans-serif;
}
.search {
  display: flex;
  flex: 1;
  max-width: 640px;
  margin-left: auto;
}
.search input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 2px 0 0 2px;
  font-size: 14px;
  outline: none;
}
.search input:focus {
  border-color: var(--wiki-blue);
  box-shadow: inset 0 0 0 1px var(--wiki-blue);
}
.search button {
  padding: 7px 16px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  font-size: 14px;
}
.search button:hover {
  background: #fff;
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 320px;
  align-items: start;
}
.sidebar-left {
  padding: 16px 12px;
  font-size: 12.5px;
  position: sticky;
  top: 57px;
}
.nav-group {
  margin-bottom: 18px;
}
.nav-group h3 {
  font-size: 12px;
  font-weight: normal;
  color: #54595d;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 4px;
  margin: 0 0 6px;
}
.nav-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-group li {
  margin: 3px 0;
}
.nav-group.hint p {
  color: #54595d;
  font-size: 12px;
}

/* ---------- Article ---------- */
.content {
  padding: 12px 28px 60px;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  min-height: 100vh;
}
.article-tabs {
  display: flex;
  align-items: center; /* keep the status pill from stretching to full row height */
  gap: 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.article-tabs .tab {
  padding: 6px 2px;
  color: var(--wiki-blue);
  border-bottom: 2px solid transparent;
  cursor: default;
}
.article-tabs .tab.active {
  color: var(--text);
  border-bottom-color: #fff;
  font-weight: bold;
}
.article-tabs .tab-right:first-of-type {
  margin-left: auto;
}
.article-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  font-size: 28px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 0 0 4px;
}
.article-meta {
  color: #54595d;
  font-size: 12px;
  margin-bottom: 16px;
}

/* Wikipedia article body styling */
.mw-parser-output {
  font-size: 14.5px;
}
.mw-parser-output p {
  margin: 0.5em 0 1em;
}
.mw-parser-output h2 {
  font-family: Georgia, serif;
  font-weight: normal;
  font-size: 22px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 1em 0 0.5em;
}
.mw-parser-output h3 {
  font-size: 17px;
  margin: 1em 0 0.4em;
}
.mw-parser-output figure,
.mw-parser-output .infobox,
.mw-parser-output table.infobox {
  float: right;
  clear: right;
  margin: 0 0 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px;
  font-size: 12.5px;
  max-width: 320px;
}
.mw-parser-output img {
  max-width: 100%;
  height: auto;
}
.mw-parser-output table {
  border-collapse: collapse;
}
.mw-parser-output .infobox th,
.mw-parser-output .infobox td {
  padding: 3px 6px;
  vertical-align: top;
}
.mw-parser-output ul,
.mw-parser-output ol {
  margin: 0.3em 0 1em 1.6em;
  padding: 0;
}
.mw-parser-output .reference,
.mw-parser-output sup {
  font-size: 11px;
}
.mw-parser-output .mw-editsection {
  display: none;
}

/* Real MediaWiki parser output (Wikipedia action=parse — references, citations, links) */
.mw-parser-output a { color: #3366cc; text-decoration: none; }
.mw-parser-output a:hover { text-decoration: underline; }
.mw-parser-output a.new { color: #d33; }
.mw-parser-output a.external { color: #36b; }
.mw-parser-output sup.reference { font-size: 11px; line-height: 1; }

/* Wikipedia-style reference hover tooltip */
.ref-tip {
  position: absolute; z-index: 1000;
  max-width: 360px; padding: 10px 14px;
  background: #fff; border: 1px solid #c8ccd1; border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12.5px; line-height: 1.5; color: #202122;
  /* Smooth fade/rise in. */
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: auto;
}
.ref-tip.visible { opacity: 1; transform: translateY(0); }
.ref-tip a { color: #3366cc; }
.ref-tip cite { font-style: normal; }
.mw-parser-output .reflist,
.mw-parser-output ol.references { font-size: 90%; margin: 0.3em 0 1em 1.6em; }
.mw-parser-output ol.references li { margin-bottom: 0.2em; }
/* Two columns like Wikipedia's {{reflist}} (responsive — wraps to 1 col when narrow). */
.mw-parser-output .mw-references-columns,
.mw-parser-output .references-columns {
  /* 22em (not Wikipedia's 30em) so two columns still fit in the reader's
     article column, which the 330px comments sidebar narrows to ~770px. */
  column-width: 22em;
  column-gap: 1.6em;
}
.mw-parser-output .mw-references-columns ol.references,
.mw-parser-output .references-columns ol.references { margin-left: 0; }
.mw-parser-output .mw-references-columns li,
.mw-parser-output .references-columns li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.mw-parser-output .mw-cite-backlink { font-style: italic; }
.mw-parser-output cite,
.mw-parser-output .reference-text cite { font-style: normal; }
.mw-parser-output .hatnote { font-style: italic; color: #54595d; margin-bottom: 0.5em; }
.mw-parser-output .thumb { float: right; clear: right; margin: 0 0 16px 20px; max-width: 320px; }
.mw-parser-output .thumbinner { border: 1px solid var(--border); padding: 3px; background: var(--bg); }
.mw-parser-output .thumbcaption { font-size: 12px; color: #54595d; padding: 4px; }
/* Wikipedia thumbs/location maps carry hard-coded inline pixel widths (e.g.
   width:402px). In the reader's narrower article column that overflows into the
   comments panel — clamp every thumb (and its fixed-width inner boxes/images) to
   the column so it scales down instead of spilling over. */
.mw-parser-output .thumbinner,
.mw-parser-output .thumbinner > div,
.mw-parser-output .locmap,
.mw-parser-output .locmap > div { max-width: 100%; box-sizing: border-box; }
.mw-parser-output .thumb img,
.mw-parser-output .locmap img { max-width: 100%; height: auto; }
/* Location-map pin markers: Wikipedia positions these absolutely (we don't load
   its CSS) — without this they fall back to static and stack vertically. */
.mw-parser-output .locmap .od { position: absolute; }
.mw-parser-output .locmap .od .id,
.mw-parser-output .locmap .od .pv,
.mw-parser-output .locmap .od .pl,
.mw-parser-output .locmap .od .pr,
.mw-parser-output .locmap .od .pb,
.mw-parser-output .locmap .od .pt { position: absolute; line-height: 1.1; }
.mw-parser-output .locmap .od .pv { text-align: center; }
.mw-parser-output .locmap .od .pl { text-align: right; }
.mw-parser-output .locmap .od .pr { text-align: left; }

/* Wikipedia-style categories footer (built client-side from action=parse categories) */
.cat-links {
  clear: both;
  margin: 28px 0 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: #f8f9fa;
  font-size: 13px;
  line-height: 1.9;
}
.cat-links .cat-label { font-weight: bold; margin-right: 8px; }
.cat-links .cat-label::after { content: ":"; }
.cat-links ul { display: inline; margin: 0; padding: 0; list-style: none; }
.cat-links li { display: inline; }
.cat-links li:not(:last-child)::after { content: " | "; color: #72777d; }
.cat-links a { color: #3366cc; text-decoration: none; }
.cat-links a:hover { text-decoration: underline; }

/* wtf_wikipedia html-plugin output (offline wikitext renderer) */
.mw-parser-output .section { margin: 0; }
.mw-parser-output .section h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  font-size: 22px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 1em 0 0.5em;
}
.mw-parser-output .section h2 { font-size: 18px; }
.mw-parser-output .section h3 { font-size: 16px; }
.mw-parser-output .paragraph { margin: 0.5em 0 1em; }
.mw-parser-output .sentence { }
.mw-parser-output a.link { color: #3366cc; text-decoration: none; }
.mw-parser-output a.link:hover { text-decoration: underline; }
.mw-parser-output .list { margin: 0.3em 0 1em 1.6em; padding: 0; }
.mw-parser-output table.infobox {
  float: right;
  clear: right;
  margin: 0 0 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  max-width: 320px;
  width: 320px;
}
.mw-parser-output table.infobox td {
  padding: 4px 7px;
  vertical-align: top;
  border-top: 1px solid var(--border);
}
.mw-parser-output table.infobox tr:first-child td { border-top: 0; }
/* Label column styling — only for real 2-column data rows, never full-width
   (colspan) cells like the logo image or its caption. */
.mw-parser-output table.infobox td:first-child:not([colspan]) {
  font-weight: bold;
  width: 35%;
  background: #f8f9fa;
}
/* Full-width cells (logo, caption, section headers) span the box and center. */
.mw-parser-output table.infobox td[colspan],
.mw-parser-output .infobox-image,
.mw-parser-output .infobox-caption {
  width: auto;
  font-weight: normal;
  background: transparent;
  text-align: center;
}
.mw-parser-output .infobox-image img { display: inline-block; margin: 0 auto; }
.mw-parser-output .infobox-caption { font-size: 11.5px; color: #54595d; }
/* Bold the infobox title (the name header at the top of the box). */
.mw-parser-output table.infobox caption,
.mw-parser-output .infobox-title,
.mw-parser-output table.infobox tr:first-child td[colspan] {
  font-weight: 700;
  font-size: 14px;
}

.placeholder {
  color: #54595d;
  max-width: 560px;
}
.placeholder h2 {
  border: none;
}

/* ---------- Highlights ---------- */
.annotation {
  background: var(--highlight);
  border-bottom: 2px solid var(--highlight-active);
  cursor: pointer;
  border-radius: 2px;
}
.annotation.active {
  background: var(--highlight-active);
}

/* ---------- Comments panel ---------- */
.sidebar-right {
  padding: 12px 14px 60px;
  position: sticky;
  top: 57px;
  max-height: calc(100vh - 57px);
  overflow-y: auto;
  background: #fbfbfb;
  border-left: 1px solid var(--border-light);
}
/* ---- Comments panel (Siaga / Open Sauce) ---- */
.reader-side {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.comments-header h2 {
  display: flex; align-items: center; gap: 8px;
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #16181d;
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: none;
}
.count {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ece8e4;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
}
.comments-list .empty {
  color: #8a9099;
  font-size: 13px;
  line-height: 1.5;
}
.comment {
  border: 1px solid #ece8e4;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.comment:hover { border-color: #d8d4d0; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.comment.active { border-color: #0c55f1; box-shadow: 0 0 0 1px #0c55f1; }
.comment-quote {
  font-size: 12.5px;
  color: #8a9099;
  border-left: 2px solid #ddd8d2;
  padding-left: 10px;
  margin-bottom: 10px;
  font-style: italic;
  line-height: 1.5;
}
.comment-author {
  font-weight: 600;
  font-size: 13.5px;
  color: #16181d;
}
.comment-date {
  color: #aab0b8;
  font-size: 12px;
  margin-left: 8px;
}
.comment-body {
  font-size: 14px;
  color: #2f3232;
  margin: 8px 0 10px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.comment-delete {
  font-size: 11px;
  color: #d33;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.comment-delete:hover {
  text-decoration: underline;
}

/* ---------- Selection button + composer ---------- */
.selection-btn {
  position: absolute;
  z-index: 50;
  background: var(--wiki-blue);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.selection-btn:hover {
  background: var(--wiki-blue-dark);
}

.composer {
  position: absolute;
  z-index: 60;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 10px;
}
.composer-quote {
  font-size: 12px;
  color: #54595d;
  font-style: italic;
  border-left: 2px solid var(--highlight-active);
  padding-left: 6px;
  margin-bottom: 8px;
  max-height: 60px;
  overflow: auto;
}
.composer-author,
.composer-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px;
  font-size: 13px;
  margin-bottom: 6px;
  font-family: inherit;
}
.composer-text {
  min-height: 70px;
  resize: vertical;
}
.composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-primary {
  background: var(--wiki-blue);
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}
.btn-primary:hover {
  background: var(--wiki-blue-dark);
}
.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #202122;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  z-index: 100;
}

/* ============ App shell / auth / roles ============ */
.topbar-spacer { flex: 1; }
.user-box { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.user-email { color: #54595d; }
.role-badge {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border);
}
.role-admin { background: #2a4b8d; color: #fff; border-color: #2a4b8d; }
.role-editor { background: #e6f0ff; color: #2a4b8d; border-color: #b9d3ff; }
.role-pending { background: #fdf0d5; color: #8a6d00; border-color: #f0d98a; }

.app-root { min-height: 100vh; }
/* Loading text node is hidden; we use shimmer skeletons instead. */
.loading { font-size: 0; color: transparent; min-height: 0; padding: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Shimmer skeletons ---- */
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton {
  background: linear-gradient(90deg, #ece8e4 25%, #f4f2f0 37%, #ece8e4 63%);
  background-size: 200% 100%;
  animation: shimmer 1.25s ease-in-out infinite;
  border-radius: 8px;
}
.sk-line { height: 12px; border-radius: 6px; }
/* Dashboard card-grid skeleton */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.sk-card { display: flex; flex-direction: column; gap: 10px; }
.sk-thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; }
.sk-card .sk-line.title { width: 80%; height: 14px; }
.sk-card .sk-line.meta { width: 45%; height: 11px; }
/* Article body skeleton */
.sk-article { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }

/* First-paint boot loader (before the app mounts) — minimal centered spinner. */
.boot-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.boot-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #e6e2de; border-top-color: #0c55f1;
  animation: spin 0.6s linear infinite;
}
.muted { color: #72777d; }

.auth-card {
  max-width: 420px; margin: 60px auto; padding: 32px; text-align: center;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.auth-card h1 { font-family: Georgia, serif; font-weight: normal; }
.auth-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.auth-card input {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 3px; font-size: 14px;
}
.logo-globe.big { width: 56px; height: 56px; font-size: 30px; margin: 0 auto 8px; }
.auth-card .small { font-size: 12.5px; margin-top: 10px; }
.auth-card .small a { color: var(--wiki-blue); }

.pw-reqs { list-style: none; margin: 2px 0 4px; padding: 0; text-align: left; }
.pw-reqs li { position: relative; padding-left: 22px; font-size: 12.5px; color: #72777d; line-height: 1.7; }
.pw-reqs li::before { content: "○"; position: absolute; left: 4px; color: #b9bdc1; }
.pw-reqs li.ok { color: #14866d; }
.pw-reqs li.ok::before { content: "✓"; color: #14866d; }
.btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary.wide { width: 100%; padding: 9px; }
.btn-oauth {
  width: 100%; padding: 9px; border: 1px solid var(--border); background: #fff;
  border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: bold;
}
.btn-oauth:hover { background: var(--bg); }
.divider { display: flex; align-items: center; gap: 8px; color: #9aa0a6; font-size: 12px; margin: 14px 0 4px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-light); }

/* ============ Generic page wrap / forms ============ */
.page-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 28px 80px; }
.page-wrap.narrow { max-width: 680px; }
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.field > span { color: #54595d; font-weight: bold; }
.field input, .field textarea, .field select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; font-size: 14px;
  font-family: inherit;
}
.field textarea { min-height: 70px; resize: vertical; }

.form-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-inline input, .form-inline select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; font-size: 14px;
}

/* ============ Admin ============ */
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; cursor: pointer; font-size: 14px; color: #54595d;
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--wiki-blue); font-weight: bold; }

.panel {
  border: 1px solid var(--border-light); background: var(--bg);
  border-radius: 4px; padding: 14px 16px; margin-bottom: 18px;
}
.panel h2 { margin: 0 0 10px; font-size: 16px; }
.access-subhead { margin: 18px 0 8px; font-size: 13px; font-weight: bold; color: #54595d; text-transform: uppercase; letter-spacing: 0.04em; }

.creds-box { margin-top: 14px; padding: 14px 16px; background: #f8f9fa; border: 1px solid var(--border-light); border-radius: 4px; }
.creds-head { font-weight: bold; font-size: 13.5px; margin-bottom: 10px; }
.creds-table { border-collapse: collapse; font-size: 13.5px; margin-bottom: 12px; }
.creds-table td { padding: 3px 14px 3px 0; vertical-align: top; }
.creds-table td:first-child { color: #54595d; white-space: nowrap; }
.creds-table code { background: #fff; border: 1px solid var(--border-light); border-radius: 3px; padding: 2px 6px; font-size: 13px; user-select: all; }
.creds-box .small { font-size: 12px; margin: 10px 0 0; }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-light); }
.table th { color: #54595d; font-weight: bold; }
.link-btn { background: none; border: none; color: var(--wiki-blue); cursor: pointer; font-size: 13px; padding: 0 6px; }
.link-btn.danger { color: #d33; }

.status-pill {
  display: inline-block; align-self: center;
  font-size: 10.5px; font-weight: 600; line-height: 1.5;
  padding: 1px 9px; border-radius: 999px; text-transform: capitalize;
  letter-spacing: 0.02em; white-space: nowrap;
}
.status-draft { background: #eee; color: #555; }
.status-in_review { background: #fdf0d5; color: #8a6d00; }
.status-published { background: #d5f0dd; color: #1a7f37; }
/* Rounded-rectangle status badge (article header) instead of a full pill. */
.status-rect { border-radius: 5px; padding: 3px 10px; font-size: 11.5px; }

.page-list { list-style: none; padding: 0; }
.page-list li { padding: 8px 0; border-bottom: 1px solid var(--border-light); display: flex; gap: 10px; align-items: center; }

/* ============ Reader (article + comments side by side) ============ */
.reader { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; max-width: 1400px; margin: 0 auto; padding: 16px 28px 80px; align-items: start; }
.reader-side { position: sticky; top: 72px; max-height: calc(100vh - 80px); overflow-y: auto; }
.comment-actions { display: flex; gap: 14px; margin-top: 2px; }
.comment-actions button { background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 500; color: #6b7280; padding: 0; transition: color .12s ease; }
.comment-actions button:hover { color: #16181d; }
.comment-actions button[data-del]:hover { color: #c0392b; }
.comment.resolved { opacity: 0.55; }

/* ============ Page editor ============ */
.editor-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 24px; align-items: start; }
.editor-left { display: flex; flex-direction: column; gap: 12px; }
.import-row { display: flex; gap: 6px; }
.import-row input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; }
.ve-meta { max-width: 360px; margin-bottom: 14px; }
.ve-tabs { display: flex; gap: 2px; }
.ve-tab { padding: 6px 14px; font-size: 13px; border: 1px solid var(--border); border-bottom: none; border-radius: 4px 4px 0 0; background: #eaecf0; color: #54595d; cursor: pointer; }
.ve-tab.active { background: #f8f9fa; color: #202122; font-weight: 600; }
.ve-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--border); border-bottom: none; background: #f8f9fa; position: sticky; top: 56px; z-index: 5; }
.ve-toolbar[hidden] { display: none; } /* author display:flex would otherwise override the hidden attribute */
.ve-source { min-height: 480px; padding: 16px; border: 1px solid var(--border); border-radius: 0 0 4px 4px; }
.wt-btn { min-width: 30px; padding: 4px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 3px; background: #fff; color: #202122; cursor: pointer; }
.wt-btn:hover { background: #eaecf0; }
.wt-select { padding: 4px 6px; font-size: 13px; border: 1px solid var(--border); border-radius: 3px; background: #fff; color: #202122; }
.wt-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }
.ve-editor { min-height: 480px; padding: 24px 28px; border: 1px solid var(--border); border-radius: 0 0 4px 4px; background: #fff; outline: none; }
.ve-editor:focus { box-shadow: inset 0 0 0 2px #a8c7fa; }
.ve-import-drawer { margin-top: 10px; }
.wikitext { min-height: 200px; width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.editor-actions { display: flex; gap: 10px; justify-content: flex-end; }
.editor-right { position: sticky; top: 72px; }
.preview-label { font-size: 12px; color: #54595d; text-transform: uppercase; margin-bottom: 6px; }
.preview { border: 1px solid var(--border-light); border-radius: 4px; padding: 16px; min-height: 360px; max-height: 75vh; overflow-y: auto; }

/* ============ Onboarding ============ */
.onb-card {
  max-width: 460px; margin: 56px auto; padding: 8px 4px; text-align: center;
}
.onb-card h1 { font-family: Georgia, serif; font-weight: normal; margin-bottom: 4px; }
.onb-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; text-align: left; }
.onb-form .field > span { font-weight: 600; color: #3c4043; }
.onb-form .btn-primary { margin-top: 6px; }

.affil-grid { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; text-align: left; }
.affil-card {
  display: block; width: 100%; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.affil-card:hover { border-color: #9aa0a6; }
.affil-card.selected { border-color: #3366cc; box-shadow: 0 0 0 2px rgba(51,102,204,.18); }
.affil-title { font-weight: 600; font-size: 15px; }
.affil-desc { font-size: 13px; margin-top: 3px; }
.onb-actions { display: flex; justify-content: space-between; gap: 10px; }
.onb-actions .btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ============ Editor portal ============ */
/* ============================================================
   Editor dashboard (EZ-Newswire-style shell) — full-height left
   sidebar + main work area. Hides the global wiki topbar.
   ============================================================ */
body.app-shell .topbar { display: none; }

.dash {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
/* Reader variant: left sidebar + reader, and the comments panel becomes a
   right-hand sidebar that mirrors the left one (warm bg + divider edge). */
.dash--reader { grid-template-columns: 248px minmax(0, 1fr); }
/* The reader itself: article column (padded) + comments column (full-bleed). */
.dash--reader .reader {
  max-width: none; margin: 0; padding: 0;
  grid-template-columns: minmax(0, 1fr) 320px; gap: 0;
}
.dash--reader .reader-main { padding: 28px 36px 80px; min-width: 0; }
.dash--reader .reader-side {
  position: sticky; top: 0; height: 100vh; max-height: 100vh;
  margin: 0; padding: 26px 22px;
  background: #f4f2f0;
  border-left: 1px solid #ededf0;
  overflow-y: auto;
}

/* ---- Sidebar ----
   Modern, restrained: hairline border, generous rhythm, a single accent
   color (#312ef5), springy hover/active transitions, no flat color blocks. */
.dash-side {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --side-fg: #3d4148;
  --side-fg-strong: #16181d;
  --side-muted: #8a9099;
  --side-hover: #eae6e3;
  --side-accent: #312ef5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 10px 18px;
  border-right: 1px solid #ededf0;
  background: #f4f2f0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.dash-brand { display: flex; align-items: center; padding: 4px 4px 14px; background: none; border: none; cursor: pointer; }
.dash-brand:hover { opacity: .7; }
.dash-brand img { height: 24px; width: auto; display: block; }
.dash-brand-text { font-family: "Season Sans", sans-serif; font-weight: 600; font-size: 18px; color: var(--side-fg-strong); letter-spacing: -0.01em; }
/* Give labels room for descenders (g/y/p). */
.dash-navlabel,
.dash-org-name,
.dash-account-name,
.dash-section span,
.dash-link span { line-height: 1.5; }

/* Section / group labels — identical styling for both ORGANIZATION & YOUR PAGES */
.dash-orglabel,
.dash-section {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 10px 6px; font-size: 11px; color: var(--side-muted);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
button.dash-section:hover { color: var(--side-fg-strong); }
button.dash-section:hover .dash-section-chev { color: var(--side-fg-strong); }
.dash-section-chev { display: inline-flex; color: var(--side-muted); transition: transform .2s ease; }
.dash-section-chev svg { width: 14px; height: 14px; }
/* Collapsed: rotate the chevron to point up. */
.dash-section.collapsed .dash-section-chev { transform: rotate(180deg); }

/* Shared interactive row look (org chip, links, nav items, account) — one
   consistent height, padding, gap, and icon size across every row. */
.dash-org,
.dash-link,
.dash-navitem,
.dash-account {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; /* <button> elements don't inherit font by default */
  padding: 8px 10px; border: none; background: none; cursor: pointer; text-align: left;
  color: var(--side-fg); font-size: 14px; line-height: 1.4;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease, transform .04s ease;
}
.dash-org:hover,
.dash-link:hover,
.dash-navitem:hover,
.dash-account:hover { background: var(--side-hover); color: var(--side-fg-strong); text-decoration: none; }
.dash-org:active,
.dash-link:active,
.dash-navitem:active,
.dash-account:active { transform: scale(0.985); }

/* Every leading icon: same 18px box, muted by default */
.dash-link svg,
.dash-navicon svg { flex: none; width: 18px; height: 18px; color: var(--side-muted); transition: color .15s ease; }

/* Org chip badge */
.dash-org-badge,
.dash-account-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 11px; font-weight: 600;
  background: linear-gradient(180deg, #eef2fb, #e4ebf8); color: #2a4b8d;
  box-shadow: inset 0 0 0 1px rgba(42,75,141,0.08);
}
.dash-org-name { font-weight: 600; color: var(--side-fg-strong); }

/* Settings gear inside the org chip, pushed to the right edge */
.dash-org { gap: 8px; }
.dash-org.active { background: #eae6e3; }
.dash-org.active .dash-org-gear { opacity: 1; color: var(--side-fg-strong); }
.dash-org .dash-org-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 2px; line-height: 1.4; }
.dash-org-gear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  color: var(--side-muted); opacity: .65; transition: opacity .15s ease, color .15s ease;
}
.dash-org:hover .dash-org-gear { opacity: 1; color: var(--side-fg-strong); }
.dash-org-gear svg { width: 16px; height: 16px; }
.dash-org-gear.spinning { animation: spin 0.45s ease-in-out; }

.dash-divider { border: none; border-top: 1px solid #ededf0; margin: 12px 6px; }

/* Nav (filter tabs) — same row rhythm as links */
.dash-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.dash-nav[hidden] { display: none; }
.dash-link,
.dash-navitem {
  position: relative; font-weight: 500; color: #7f7c7b;
}
.dash-navitem.active {
  background: #eae6e3;
  color: var(--side-fg-strong); font-weight: 500;
}
.dash-navitem.active .dash-navicon svg { color: var(--side-fg-strong); }
.dash-navicon { display: inline-flex; }
.dash-navlabel { flex: 1; }
.dash-navcount {
  flex: none;
  font-size: 11px; font-weight: 600; color: var(--side-muted);
  background: rgba(17,18,23,0.05); border-radius: 999px; padding: 2px 8px; line-height: 1.3;
  transition: background-color .15s ease, color .15s ease;
}

/* Bottom cluster (support + account) */
.dash-side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.dash-account { padding: 8px; }
.dash-account-badge { background: linear-gradient(180deg, #f1f2f4, #e7e9ec); color: #4a4f57; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.dash-account-name { flex: 1; font-weight: 500; color: var(--side-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-account-chev { flex: none; display: inline-flex; color: var(--side-muted); transition: transform .2s ease; }
.dash-account-chev svg { width: 16px; height: 16px; }
/* Flip the chevron up while the account menu is open, back down on dismiss. */
.dash-account[aria-expanded="true"] .dash-account-chev { transform: rotate(180deg); }

/* Account dropdown menu (opens from the bottom account chip) */
.dash-account-wrap { position: relative; }
/* Fixed positioning + JS-set top/left so the menu escapes the sidebar's
   overflow/stacking context and never renders behind the dashboard. */
.acct-menu {
  position: fixed;
  min-width: 260px; max-width: 320px;
  background: #f4f2f0; border: 1px solid #e2ded9; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  padding: 6px; z-index: 1000;
  animation: acct-pop .12s ease-out;
}
@keyframes acct-pop { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }
.acct-menu-head { padding: 10px 12px 8px; border-bottom: 1px solid #e2ded9; margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.acct-menu-label { font-size: 13px; color: #8a9099; }
.acct-menu-email { font-size: 14px; font-weight: 600; color: #16181d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  font-size: 14px; color: #2f3232; border-radius: 8px;
  transition: background-color .12s ease;
}
.acct-menu-item:hover { background: #e6e2de; }
.acct-menu-danger { color: #c0392b; }
.acct-menu-danger:hover { background: #f0dbd7; }

/* ---- Main ---- */
.dash-main { padding: 40px 44px; max-width: 1100px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.dash-title {
  font-family: "Season Sans", sans-serif;
  font-size: 26px; font-weight: 600; color: #1a1a1a; margin: 0;
}
.dash-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0c55f1; color: #fff; border: none; border-radius: 4px;
  padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background-color .12s ease;
}
.dash-cta:hover { background: #0a48cc; }
.dash-cta svg { color: #fff; }

.dash-subhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dash-subtitle {
  font-family: "Season Sans", sans-serif;
  font-size: 19px; font-weight: 600; color: #1a1a1a; margin: 0 0 4px;
}
.dash-subdesc { color: #6b7280; font-size: 14px; margin: 0; }

.dash-viewtoggle { display: inline-flex; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; flex: none; }
.dash-vbtn { padding: 7px 10px; background: #fff; border: none; cursor: pointer; color: #6b7280; display: inline-flex; }
.dash-vbtn + .dash-vbtn { border-left: 1px solid var(--border-light); }
.dash-vbtn:hover { background: #f6f6f6; }
.dash-vbtn.active { background: #eef3fe; color: #0c55f1; }

/* ---- Cards (grid) ---- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
.dash-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.dash-card-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 8px;
  background: #f3f4f4; border: 1px solid var(--border-light);
  transition: border-color .12s, box-shadow .12s;
}
.dash-card:hover .dash-card-thumb { border-color: #d8d4d0; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
/* Title with the status pill stacked directly beneath it. */
.dash-card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dash-card-info .status-pill { align-self: flex-start; }
.dash-card-title { font-size: 15px; font-weight: 500; color: #1a1a1a; line-height: 1.35; }
.dash-card-date { font-size: 13px; color: #6b7280; }

/* ---- List ---- */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 10px; margin-bottom: 10px;
  background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.dash-row:hover { border-color: #d8d4d0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.dash-row-title { flex: 1; font-weight: 500; font-size: 15px; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-date { font-size: 13px; color: #6b7280; flex: none; }

/* ---- Empty ---- */
.dash-empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--border); border-radius: 14px; }
.dash-empty-icon { font-size: 32px; }
.dash-empty h3 { font-family: "Season Sans", sans-serif; font-weight: 600; margin: 10px 0 6px; }

/* ============================================================
   Organization settings (EZ-Newswire-style settings page)
   ============================================================ */
.set { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.set-side {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px; border-right: 1px solid var(--border-light);
  background: #fafafa; position: sticky; top: 0; height: 100vh;
}
.set-back {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; color: #5f6368; font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer; background: none; border: none;
}
.set-back:hover { opacity: .7; text-decoration: none; }
.set-side-label { font-size: 11px; font-weight: 600; color: #7a7f7f; letter-spacing: .06em; padding: 14px 10px 6px; }
.set-navitem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 6px; background: none; border: none; cursor: pointer;
  font-size: 14px; color: #3c4043;
}
.set-navitem:hover { background: #f0f1f1; }
.set-navitem.active { background: #ececf9; color: #1a1a1a; font-weight: 500; }
.set-navitem svg { color: #5f6368; }
.set-side-bottom { margin-top: auto; border-top: 1px solid var(--border-light); padding-top: 8px; }

/* Settings page reuses the dashboard sidebar; main column to the right. */
.dash--settings { grid-template-columns: 248px minmax(0, 1fr); }
.dash--settings .set-main { font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* Wikipedia-style reader: sans-serif body, serif headers (title + sections). */
.dash--reader .reader-main {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.dash--reader .reader-main .article-title,
.dash--reader .reader-main .mw-parser-output h2,
.dash--reader .reader-main .mw-parser-output h3,
.dash--reader .reader-main .mw-parser-output h4 {
  font-family: Georgia, "Times New Roman", serif;
}
/* Keep the small reader chrome (tabs, status pill) in the UI sans font. */
.dash--reader .article-tabs,
.dash--reader .article-meta {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.set-main {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 44px 56px; max-width: 940px; width: 100%;
}
.set-back-top {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; margin-bottom: 22px; color: #8a9099; font-size: 14px; font-weight: 500;
  background: none; border: none; cursor: pointer; text-decoration: none;
}
.set-back-top:hover { color: #16181d; text-decoration: none; }
.set-back-top svg { width: 16px; height: 16px; }
.set-title {
  font-size: 26px; font-weight: 600; color: #16181d; margin: 0 0 26px; letter-spacing: -0.01em;
}

.set-tabs { display: flex; gap: 2px; border-bottom: 1px solid #e7e3df; margin-bottom: 14px; }
.set-tab {
  padding: 12px 16px; font-size: 14px; font-weight: 500; color: #8a9099;
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color .12s ease, border-color .12s ease;
}
.set-tab:hover { color: #16181d; }
.set-tab.active { color: #16181d; border-bottom-color: #16181d; }

.set-fields { display: flex; flex-direction: column; }
.set-row { padding: 16px 0; border-bottom: 1px solid #ece8e4; display: flex; flex-direction: column; gap: 7px; }
.set-row-label { font-size: 13px; font-weight: 600; color: #6b7280; }
.set-row-view { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.set-row-value { font-size: 15px; color: #16181d; overflow: hidden; text-overflow: ellipsis; }
.set-row-value.muted { color: #aab0b8; }

.set-edit {
  flex: none; display: inline-flex; align-items: center;
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fff; border: 1px solid #ddd8d2; border-radius: 4px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; color: #16181d; cursor: pointer;
  transition: background-color .12s ease;
}
.set-edit:hover { background: #f4f2f0; }

/* Logo row */
.set-logo-row { gap: 12px; }
.set-logo-body { display: flex; align-items: center; gap: 24px; }
.set-logo-box {
  width: 180px; height: 120px; flex: none;
  border: 1px solid #e7e3df; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #f4f2f0;
}
.set-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.set-logo-empty { color: #aab0b8; font-size: 13px; }
.set-logo-meta p { margin: 0 0 2px; font-size: 14px; color: #16181d; }
.set-logo-meta p.muted { color: #aab0b8; font-size: 12px; }
.set-logolink {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: none; border: none; color: #16181d; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0;
}
.set-logolink:hover { opacity: .7; }
.set-logolink svg { width: 16px; height: 16px; }

/* Social */
.set-social-section { padding: 18px 0 4px; }
.set-social-section > .set-row-label { display: block; margin-bottom: 6px; }
.set-social-list { display: flex; flex-direction: column; }
.set-social { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #ece8e4; }
.set-social-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.set-social-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #16181d; }
.set-social-head svg { color: #8a9099; }

.set-tabdesc { margin-top: 12px; font-size: 13px; }

/* Inline editor */
/* Single-line edit: input + actions on one row (EZ-Newswire style). */
.set-editor { margin-top: 8px; display: flex; align-items: center; gap: 16px; width: 100%; }
.set-editor .set-input { max-width: 384px; height: 40px; }
.set-editor-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
/* Multi-line (textarea) stacks: input full-width, actions right-aligned below. */
.set-editor--stacked { flex-direction: column; align-items: stretch; gap: 10px; max-width: 460px; }
.set-editor--stacked .set-input { max-width: none; height: auto; }
.set-editor--stacked .set-editor-actions { margin-left: 0; justify-content: flex-end; }

.set-input {
  width: 100%; padding: 9px 12px; font-size: 14px;
  border: 1px solid #c7cdcd; border-radius: 4px; outline: none; font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.set-input:focus { border-color: #0c55f1; box-shadow: 0 0 0 1px #0c55f1; }

/* Cancel = quiet text link; Save = small bordered button (matches EZ). */
.set-btn-ghost {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: #2f3232; transition: color .12s ease;
}
.set-btn-ghost:hover { color: #939898; }
.set-btn-save {
  background: #fff; border: 1px solid #c7cdcd; border-radius: 4px;
  padding: 7px 14px; font-size: 13px; font-weight: 500; color: #2f3232; cursor: pointer;
  transition: background-color .12s ease;
}
.set-btn-save:hover { background: #f6f6f6; }
.set-btn-save:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================================
   Add new organization — full-screen wizard (EZ-Newswire style)
   ============================================================ */
.addorg {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: fixed; inset: 0; z-index: 60; background: #fff;
  display: grid; grid-template-rows: auto 1fr auto;
}
.addorg-top {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 24px; border-bottom: 1px solid #ededf0;
}
.addorg-brand { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; }
.addorg-brand:hover { opacity: .7; }
.addorg-brand img { height: 20px; width: auto; display: block; }
.addorg-close { background: none; border: none; cursor: pointer; color: #16181d; display: inline-flex; padding: 6px; border-radius: 8px; }
.addorg-close:hover { background: #f4f2f0; }
.addorg-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: #ededf0; }
.addorg-progress-bar { height: 100%; background: #16181d; transition: width .25s ease; }

/* Wizard hosted inside the dashboard grid — keep the OG sidebar, render the
   wizard in the main column with the progress bar on top and footer pinned. */
.addorg-main {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative; display: flex; flex-direction: column;
  min-height: 100vh; background: #fff;
}
.dash--addorg .addorg-progress { position: static; width: 100%; height: 3px; background: #ededf0; }
.addorg-main .addorg-body { flex: 1; }

.addorg-body { overflow-y: auto; display: flex; justify-content: center; padding: 80px 24px 40px; }
.addorg-card { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 28px; }
.addorg-step {
  align-self: flex-start; font-size: 12px; font-weight: 600; color: #16181d;
  background: #f4f2f0; border-radius: 999px; padding: 4px 12px;
}
.addorg-head h1 { font-size: 28px; font-weight: 600; color: #16181d; margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.2; }
.addorg-head p { font-size: 14px; color: #8a9099; margin: 0; }

.addorg-fields { display: flex; flex-direction: column; gap: 18px; max-width: 400px; }

/* Entity-type chooser — narrow centered column with stacked option rows */
.addorg-choose { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 32px; }
.addorg-choose-head { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.addorg-choose-head h1 { font-size: 24px; font-weight: 600; color: #2f342f; margin: 0; letter-spacing: -0.01em; }
.addorg-choose-head p { font-size: 14px; color: #7a7f7f; margin: 0; line-height: 1.5; }

.addorg-rows { display: flex; flex-direction: column; gap: 16px; }
.addorg-row {
  display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left;
  padding: 16px; background: #fff; border: 1px solid #c7cdcd; border-radius: 12px;
  cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease;
}
.addorg-row:hover { border-color: #0c55f1; }
.addorg-row.selected { border-color: #0c55f1; box-shadow: 0 0 0 1px #0c55f1; }
.addorg-row-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: #eef3fe; color: #0839a0;
}
.addorg-row-text { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.addorg-row-label { font-size: 16px; font-weight: 600; color: #2f3232; line-height: 1.4; }
.addorg-row-desc { font-size: 14px; color: #7a7f7f; line-height: 1.45; }

.addorg-continue {
  width: 100%; height: 44px; border: none; border-radius: 4px; cursor: pointer;
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; font-weight: 500; color: #fff; background: #0c55f1;
  transition: background-color .12s ease;
}
.addorg-continue:hover:not(:disabled) { background: #0a48cc; }
.addorg-continue:disabled { background: #e1e6e6; color: #9aa0a6; cursor: not-allowed; }
.addorg-field { display: flex; flex-direction: column; gap: 7px; }
.addorg-field label { font-size: 13px; font-weight: 600; color: #6b7280; }
.addorg-field input,
.addorg-field { display: flex; flex-direction: column; gap: 7px; }
.addorg-field label { font-size: 13px; font-weight: 600; color: #6b7280; }
.addorg-field input,
.addorg-field textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid #ddd8d2; border-radius: 8px; outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.addorg-field input:focus,
.addorg-field textarea:focus { border-color: #16181d; box-shadow: 0 0 0 1px #16181d; }
.addorg-field textarea { resize: vertical; min-height: 90px; }
.addorg-hint { font-size: 12px; color: #aab0b8; margin: 2px 0 0; }

.addorg-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #16181d; cursor: pointer; }
.addorg-check input { width: 16px; height: 16px; accent-color: #0c55f1; cursor: pointer; }

.addorg-logo { margin-bottom: 4px; }
.addorg-logo .set-logo-box { width: 200px; height: 130px; }

.addorg-foot {
  display: flex; align-items: center; justify-content: space-between;
  height: 6rem; min-height: 6rem; padding: 0 24px; background: #fff;
  border-top: 1px solid #f0eeeb;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.05);
}
.addorg-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fff; border: 1px solid #ddd8d2; border-radius: 4px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; color: #16181d; cursor: pointer;
  transition: background-color .12s ease;
}
.addorg-back:hover { background: #f4f2f0; }
.addorg-next {
  font-family: "Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0c55f1; border: none; border-radius: 4px;
  padding: 10px 22px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer;
  transition: background-color .12s ease;
}
.addorg-next:hover:not(:disabled) { background: #0a48cc; }
.addorg-next:focus-visible { outline: 2px solid #87acfc; outline-offset: 2px; }
.addorg-next:disabled { opacity: .5; cursor: not-allowed; }

/* Selected entity-type card */
.addorg-type.selected { border-color: #0c55f1; box-shadow: 0 0 0 1px #0c55f1; }
.addorg-type.selected .addorg-type-icon { background: #eef3fe; color: #0c55f1; }

@media (max-width: 1000px) {
  .reader, .editor-grid { grid-template-columns: 1fr; }
  .reader-side, .editor-right { position: static; max-height: none; }
  .dash,
  .dash--settings,
  .dash--reader { grid-template-columns: 1fr; }
  .dash-side { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border-light); }
  .dash-main { padding: 28px 22px; }
  .set { grid-template-columns: 1fr; }
  .set-side { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border-light); }
  .set-main { padding: 28px 22px; }
}

/* Open Sauce One — used for the dashboard/settings sidebar text. */
@font-face {
  font-family: "Open Sauce One";
  src: url("/fonts/Open Sauce/OpenSauceOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("/fonts/Open Sauce/OpenSauceOne-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce One";
  src: url("/fonts/Open Sauce/OpenSauceOne-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Aaru-style dark login screen
   ============================================================ */
/* Season Sans — used on the login screen only (registered here so it doesn't
   affect the rest of the wiki UI). */
@font-face {
  font-family: "Season Sans";
  src: url("/fonts/Season Sans/SeasonSans-TRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Sans";
  src: url("/fonts/Season Sans/SeasonSans-TRIAL-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Sans";
  src: url("/fonts/Season Sans/SeasonSans-TRIAL-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Season Serif — used on the login screen headings only. */
@font-face {
  font-family: "Season Serif";
  src: url("/fonts/Season Serif/SeasonMix-TRIAL-Light.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Serif";
  src: url("/fonts/Season Serif/SeasonMix-TRIAL-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* When the login screen is up, the page goes full-bleed dark and the
   wiki topbar is hidden. */
body.auth-screen { background: #141414; }
body.auth-screen .topbar { display: none; }
body.auth-screen .app-root { min-height: 100svh; }

.aaru-login {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  background: #141414;
  color: #e7eaf0;
  font-family: "Season Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* Full-bleed container that Vanta GLOBE renders into (it injects its own canvas).
   Keeps the dark base color so it looks right before/if Vanta loads. */
.aaru-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #141414;
}

/* Soft blur on the globe done by filtering the canvas itself instead of
   backdrop-filter. backdrop-filter recomposites the whole layer stack every
   frame and shimmers at a soft mask edge — that was the lag/glitch. A plain
   filter:blur() on the canvas is one GPU-promoted, cached layer: smooth, no
   shimmer. The globe still animates; only its presentation is blurred. */
.aaru-bg canvas {
  filter: blur(6px);
  transform: translateZ(0);
  will-change: transform;
}

/* The login panel, anchored left like the reference */
.aaru-panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  padding: 40px;
}
.aaru-mark {
  display: flex;
  align-items: center;
}
.aaru-mark img {
  height: 28px;
  width: auto;
  display: block;
}
.aaru-center { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.aaru-h1 { margin: 0 0 28px; line-height: 1.3; }
.aaru-h1 .sub {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #8b93a3;
  font-family: "Season Serif", Georgia, serif;
}
.aaru-h1 .title {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #e7eaf0;
  font-family: "Season Serif", Georgia, serif;
}
.aaru-login form { display: flex; flex-direction: column; gap: 8px; }
/* The author display:flex above beats the UA `hidden` attribute, so the
   code-entry form stayed visible alongside the email form. Re-assert hidden. */
.aaru-login form[hidden] { display: none; }
.aaru-login .aaru-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  color: #e7eaf0;
  font-size: 15px;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.aaru-login .aaru-input::placeholder { color: #6b7280; }
.aaru-login .aaru-input:focus {
  border-color: rgba(73, 122, 255, 0.7);
  background: rgba(73, 122, 255, 0.04);
}
.aaru-login .aaru-btn {
  width: 100%;
  height: 38px;
  margin-top: 4px;
  padding: 0 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  color: #c5cbd6;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.aaru-login .aaru-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.aaru-login .aaru-btn:disabled { cursor: not-allowed; }
.aaru-login .aaru-btn.primary {
  background: #312ef5;
  border-color: #312ef5;
  color: #fff;
}
.aaru-login .aaru-btn.primary:hover:not(:disabled) { background: #4744ff; border-color: #4744ff; }
.aaru-login .aaru-btn.primary:disabled {
  background: #2a2a2a;
  border-color: #2a2a2a;
  color: #777;
}
/* Password-requirements checklist, restyled for the dark auth screen. */
.aaru-login .pw-reqs { margin: 6px 0 10px; }
.aaru-login .pw-reqs li { color: #8b93a3; }
.aaru-login .pw-reqs li::before { color: #4b5364; }
.aaru-login .pw-reqs li.ok { color: #6ee7b7; }
.aaru-login .pw-reqs li.ok::before { color: #6ee7b7; }

/* Onboarding (profile + affiliation) restyled for the dark auth screen. */
.aaru-login .onb-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; text-align: left; width: 100%; }
.aaru-login .field { display: flex; flex-direction: column; gap: 6px; }
.aaru-login .field > span { color: #8b93a3; font-weight: 500; font-size: 13px; }
.aaru-login .onb-form .aaru-btn { margin-top: 6px; }
/* Native <select> needs explicit dark colors + a light caret to stay legible. */
.aaru-login select.aaru-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93a3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.aaru-login select.aaru-input option { background: #1c1c1c; color: #e7eaf0; }

.aaru-login .affil-grid { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; text-align: left; width: 100%; }
.aaru-login .affil-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e7eaf0;
  transition: border-color 0.12s, background 0.12s;
}
.aaru-login .affil-card:hover { border-color: rgba(255, 255, 255, 0.28); }
.aaru-login .affil-card.selected { border-color: #312ef5; box-shadow: 0 0 0 1px #312ef5; }
.aaru-login .affil-title { font-weight: 600; font-size: 15px; }
.aaru-login .affil-desc { font-size: 13px; margin-top: 3px; color: #8b93a3; }
.aaru-login .onb-actions { display: flex; gap: 10px; width: 100%; }
.aaru-login .onb-actions .aaru-btn { margin-top: 0; }
.aaru-login .onb-actions #onb-back { flex: 0 0 auto; width: auto; padding: 0 20px; text-align: center; }
.aaru-login .onb-actions #onb-finish { flex: 1; text-align: center; }
.aaru-terms { margin: 14px 0 0; font-size: 12.5px; color: #6b7280; line-height: 1.5; letter-spacing: 0.025em; }
.aaru-terms a { color: #c5cbd6; }
/* "We emailed a sign-in code…" confirmation — white, below the Continue button. */
.aaru-code-sent { margin: 12px 0 0; font-size: 12.5px; color: #fff; line-height: 1.5; letter-spacing: 0.025em; }
.aaru-code-sent:empty { margin: 0; }
.aaru-divider {
  display: flex; align-items: center; gap: 10px;
  color: #4b5364; font-size: 12px; margin: 16px 0 4px;
}
.aaru-divider::before, .aaru-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08);
}
.aaru-msg { min-height: 18px; margin: 12px 0 0; font-size: 13px; color: #ff8585; }
.aaru-link { color: #8b93a3; cursor: pointer; }
.aaru-link:hover { color: #c5cbd6; }

.aaru-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  color: #6b7280;
}
.aaru-footer a { color: #8b93a3; cursor: pointer; }
.aaru-footer .copy { margin-left: 6px; color: #4b5364; }

.aaru-clock {
  position: fixed;
  bottom: 28px;
  right: 32px;
  z-index: 10;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #497aff;
}

@media (max-width: 640px) {
  .aaru-panel { max-width: none; justify-content: flex-end; padding: 28px 22px 80px; }
  .aaru-center { flex: none; }
}