/* ===========================================================
   SCILEX — under ACADEX
   "Index Your Impact, Amplify Your Reach."

   Design direction: adapted from the HORMN healthcare aesthetic
   (Phenomenon Studio) — warm cream canvas, calm sage/olive green,
   soft organic curves, generous air, editorial serif display.
   Translated for a scholarly journal registry: the "seal"
   verification stamp remains the signature element, restyled
   as a soft rounded token that fits the organic system.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* HORMN-aligned: bone canvas, bottle-green accent */
  --paper: #F1EFE8;        /* bone / warm off-white */
  --paper-dim: #E7E4D9;    /* recessed panels */
  --surface: #FAF9F4;      /* raised cards */
  --surface-plain: #FFFFFF;

  --ink: #1E241C;          /* near-black green ink */
  --ink-soft: #5A6152;
  --line: #DAD5C6;
  --line-strong: #C4BDA8;

  /* bottle-green brand core (HORMN signature) */
  --sage: #2A3B2C;         /* deep bottle green */
  --sage-deep: #16241A;    /* darkest — hero block, buttons */
  --sage-mid: #506B4E;     /* mid green accent */
  --sage-soft: #DCE3D2;    /* pale green fill */
  --sage-tint: #E6EADD;    /* faint green wash */
  --clay: #C07A4A;         /* warm accent, sparing */
  --on-dark: #EDEFE4;      /* text on green blocks */

  --green: #2F5A3A;   --green-soft: #DCE7D6;
  --amber: #9A7326;   --amber-soft: #F0E6C9;
  --brick: #9A4A38;   --brick-soft: #F0DED6;

  /* legacy aliases (admin views) mapped onto the new palette */
  --navy: var(--sage);
  --navy-deep: var(--sage-deep);
  --gold: var(--clay);
  --gold-soft: #EFDCCB;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(51,63,43,0.05), 0 8px 24px -18px rgba(51,63,43,0.25);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: 'Petrona', serif;
  font-weight: 500;
  color: var(--sage-deep);
  margin: 0 0 .4em 0;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
h1{ font-size: 3rem; font-weight: 500; }
h2{ font-size: 2rem; }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em 0; }
a{ color: var(--sage); text-decoration: none; }
a:hover{ text-decoration: underline; }
em{ font-style: italic; color: var(--sage-deep); }

.mono{ font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.01em; }
.eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-mid);
  font-weight: 500;
}

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 36px; }

header.site{
  background: transparent;
  position: sticky; top:0; z-index: 40;
}
header.site::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.wrap.site-bar{ max-width: 1540px; padding-left: 56px; padding-right: 56px; }
.site-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0;
}
.brand{ display:flex; align-items:center; flex-shrink:0; text-decoration:none; }
.brand-lockup{ height:60px; width:auto; display:block; }
@media (max-width:820px){ .brand-lockup{ height:44px; } }
.foot-brand .brand{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.1; }
.foot-brand .brand-top{ display:flex; align-items:baseline; gap:11px; }
.foot-brand .mark{
  font-family:'Petrona', serif; font-weight:600; font-size:1.6rem;
  color: var(--sage-deep); letter-spacing: -0.02em;
}
.foot-brand .sub{
  font-family:'IBM Plex Mono', monospace; font-size:.66rem; letter-spacing:.14em;
  color: var(--ink-soft); text-transform: uppercase; border-left:1px solid var(--line-strong);
  padding-left:11px;
}
nav.main{ display:flex; gap: 22px; align-items:center; margin-left:32px; flex-shrink:1; }
nav.main a{
  font-size:.88rem; color: var(--ink-soft); font-weight:500; position:relative;
  white-space:nowrap;
}
nav.main a.active, nav.main a:hover{ color: var(--sage-deep); text-decoration:none; }
nav.main a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--sage-mid); border-radius:2px;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.88rem;
  padding: 12px 22px; border-radius: var(--radius-pill);
  border:1px solid var(--sage-deep); cursor:pointer;
  transition: all .18s ease;
}
.btn-primary{ background: var(--sage-deep); color: var(--on-dark); }
.btn-primary:hover{ background: var(--sage); text-decoration:none; transform: translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--sage-deep); border-color: var(--line-strong); }
.btn-ghost:hover{ background: var(--sage-soft); border-color: var(--sage-mid); text-decoration:none; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

footer.site{
  border-top:1px solid var(--line);
  margin-top: 90px; padding: 56px 0 40px;
  color: var(--ink-soft); font-size: .85rem;
}
footer.site .cols{ display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; }
footer.site a{ color: var(--ink-soft); }
footer.site a:hover{ color: var(--sage); }
footer.site .links{ display:flex; gap:22px; flex-wrap:wrap; }
/* ---------- Auth header slot ---------- */
.site-bar [data-auth-slot]{ display:flex; align-items:center; gap:12px; margin-left:40px; flex-shrink:0; }
.user-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 5px 16px 5px 5px; border-radius: var(--radius-pill);
  border:1px solid var(--line-strong); background: var(--surface);
  white-space:nowrap;
}
.user-chip-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--sage-soft); color:var(--sage-deep);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600;
  border:1px solid color-mix(in srgb, var(--sage-mid) 30%, transparent);
}
.user-chip-info{ display:flex; flex-direction:column; line-height:1.25; }
.user-chip-name{ font-size:.84rem; font-weight:600; color:var(--ink); }
.user-chip-role{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- Success / notice banner ---------- */
.notice{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 22px; border-radius:var(--radius-m);
  background:var(--sage-soft); border:1px solid color-mix(in srgb, var(--sage-mid) 30%, transparent);
}
.notice.warn{ background:var(--amber-soft); border-color:color-mix(in srgb, var(--amber) 35%, transparent); }
.notice.error{ background:var(--brick-soft); border-color:color-mix(in srgb, var(--brick) 35%, transparent); }
.notice .notice-mark{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; margin-top:1px;
  background:var(--sage-deep); color:var(--on-dark);
  display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:700;
}
.notice.error .notice-mark{ background:var(--brick); }
.field-error{ font-size:.8rem; color:var(--brick); margin-top:6px; display:none; }
.field-error.show{ display:block; }

.footer-tag{
  font-family:'Petrona',serif; font-style:italic; font-size:.95rem;
  color: var(--sage-mid); margin-top:6px;
}

.seal{
  --seal-color: var(--green);
  --seal-bg: var(--green-soft);
  display:inline-flex; align-items:center; gap:9px;
  padding: 6px 15px 6px 7px;
  border-radius: var(--radius-pill);
  background: var(--seal-bg);
  border: 1px solid color-mix(in srgb, var(--seal-color) 28%, transparent);
}
.seal .ring{
  width:20px; height:20px; border-radius:50%;
  border: 1.5px solid var(--seal-color);
  position: relative; flex-shrink:0;
}
.seal .ring::after{
  content:''; position:absolute; inset:3px;
  border-radius:50%; border: 1px dashed var(--seal-color);
}
.seal .label{
  font-family:'IBM Plex Mono', monospace; font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color: var(--seal-color);
}
.seal.pending{ --seal-color: var(--amber); --seal-bg: var(--amber-soft); }
.seal.rejected{ --seal-color: var(--brick); --seal-bg: var(--brick-soft); }
.seal.withdrawn{ --seal-color: var(--ink-soft); --seal-bg: var(--paper-dim); }
.seal.discontinued{ --seal-color: var(--ink-soft); --seal-bg: var(--paper-dim); }
.seal.conditional{ --seal-color: var(--clay); --seal-bg: #F1E2D4; }
.seal.lg{ padding: 9px 20px 9px 9px; }
.seal.lg .ring{ width:30px; height:30px; }
.seal.lg .label{ font-size:.78rem; }

.tagline{
  font-family:'Petrona', serif; font-style:italic; font-weight:400;
  font-size:1.15rem; color: var(--sage-mid);
  margin: 6px 0 0;
}

.ledger{
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ledger-row{
  display:grid;
  grid-template-columns: 56px 1fr 200px 150px 170px;
  gap: 18px; align-items:center;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  transition: background .14s ease;
}
.ledger-row:last-child{ border-bottom:none; }
.ledger-row:hover{ background: var(--sage-soft); }
.ledger-row .no{
  font-family:'IBM Plex Mono', monospace; font-size:.78rem;
  color: var(--ink-soft);
}
.ledger-row .name{ font-family:'Petrona', serif; font-weight:500; font-size:1.1rem; color: var(--sage-deep); }
.ledger-row .name a{ color: inherit; }
.ledger-row .meta{ font-size:.8rem; color: var(--ink-soft); margin-top:2px; }
.ledger-row .field-tag{
  font-size:.72rem; color: var(--sage); background: var(--sage-soft);
  border:1px solid color-mix(in srgb, var(--sage-mid) 25%, transparent);
  padding:3px 11px; border-radius: var(--radius-pill); display:inline-block;
}
.ledger-head{
  display:grid; grid-template-columns: 56px 1fr 200px 150px 170px; gap:18px;
  padding: 0 26px 12px; font-family:'IBM Plex Mono', monospace; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft);
}

.card{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-card);
}
.section{ padding: 68px 0; }
.hr{ border:none; border-top:1px solid var(--line); margin: 32px 0; }

.pill-filter{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; padding:8px 16px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; color: var(--ink-soft);
  transition: all .15s ease;
}
.pill-filter:hover{ border-color: var(--sage-mid); color: var(--sage-deep); }
.pill-filter.active{ background: var(--sage-deep); color: var(--on-dark); border-color: var(--sage-deep); }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], select, textarea{
  width:100%; padding: 13px 15px; border:1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--surface-plain); font-family:'Inter',sans-serif;
  font-size: .94rem; color: var(--ink); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{ border-color: var(--sage-mid); box-shadow: 0 0 0 3px rgba(110,128,92,.18); }
label{ display:block; font-size:.84rem; font-weight:600; color: var(--ink-soft); margin-bottom:7px; }
.field{ margin-bottom: 18px; }
.hint{ font-size:.78rem; color: var(--ink-soft); margin-top: 5px; }

/* Integrity Signals. Standalone informational indicators on the journal
   detail page: not related to the .seal status badge (submission status) or
   to SC-level scoring in any way. Styled as the same label/value table used
   by Journal Identity, so the two cards read as one design rather than two. */
.integrity-pill{
  display:inline-block; padding:3px 11px; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
}
.integrity-pill.green{ color:var(--green); background:var(--green-soft); }
.integrity-pill.yellow{ color:var(--amber); background:var(--amber-soft); }
.integrity-pill.red{ color:var(--brick); background:var(--brick-soft); }
.integrity-pill.unavailable{ color:var(--ink-soft); background:var(--paper-dim); }
.integrity-detail{ font-size:.8rem; color: var(--ink-soft); margin-top:6px; line-height:1.45; }

/* Contact page "While you're here" quick links */
.contact-quicklink{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 0; border-top:1px solid var(--line);
  font-size:.88rem; font-weight:500; color:var(--ink);
}
.contact-quicklink:first-child{ border-top:none; }
.contact-quicklink:hover{ color:var(--sage-deep); text-decoration:none; }
.contact-quicklink .ql-arrow{ color:var(--ink-soft); transition: transform .15s ease, color .15s ease; flex-shrink:0; }
.contact-quicklink:hover .ql-arrow{ transform:translateX(3px); color:var(--sage-deep); }

.stepper{ display:flex; align-items:center; margin-bottom: 44px; }
.step{ display:flex; align-items:center; gap:10px; flex:1; }
.step .dot{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:.8rem; color: var(--ink-soft); background:var(--surface);
  flex-shrink:0; transition: all .18s ease;
}
.step.done .dot{ background: var(--sage-deep); border-color:var(--sage-deep); color: var(--on-dark); }
.step.current .dot{ border-color: var(--sage-mid); color: var(--sage); border-width:2px; background: var(--sage-soft); }
.step .txt{ font-size:.82rem; color: var(--ink-soft); }
.step.current .txt, .step.done .txt{ color: var(--ink); font-weight:600; }
.step .bar{ height:1.5px; background: var(--line-strong); flex:1; margin: 0 6px; border-radius:2px; }
.step.done .bar{ background: var(--sage-deep); }

.kicker-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom: 28px; }
.small{ font-size:.85rem; color: var(--ink-soft); }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }

.hero{ position:relative; overflow:hidden; }
.hero-blob{
  position:absolute; border-radius:50%; filter: blur(6px); opacity:.55; z-index:0;
  pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:1; }

/* ---------- Solid green hero block (HORMN signature) ---------- */
.hero-block{
  background: var(--sage-deep);
  color: var(--on-dark);
  border-radius: var(--radius-l);
  padding: 72px 60px 64px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(22,36,26,0.7);
}
.hero-block .eyebrow{ color: color-mix(in srgb, var(--sage-soft) 80%, transparent); }
.hero-block h1{ color: var(--on-dark); }
.hero-block .tagline{ color: color-mix(in srgb, var(--sage-soft) 92%, white); }
.hero-block p.small{ color: color-mix(in srgb, var(--on-dark) 78%, transparent); }
.hero-block .btn-ghost{ color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 40%, transparent); }
.hero-block .btn-ghost:hover{ background: rgba(237,239,228,0.12); border-color: var(--on-dark); }
.hero-block-blob{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle at 30% 30%, rgba(80,107,78,0.55), transparent 70%);
  filter: blur(4px);
}
.hero-block > *{ position:relative; z-index:1; }

/* ---------- Vertical progress timeline (tracking page) ---------- */
.track{ max-width:640px; margin:0 auto; }
.track-step{
  display:grid; grid-template-columns: 1fr 64px; gap:24px; align-items:start;
  position:relative;
}
.track-step .side{ text-align:right; padding-top:14px; }
.track-step .side h3{ font-size:1.15rem; margin:0 0 3px; }
.track-step .side .desc{ font-size:.85rem; color:var(--ink-soft); }
.track-step .node{
  position:relative; display:flex; justify-content:center;
}
.track-node{
  width:58px; height:58px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:1rem; font-weight:500;
  color:var(--ink-soft); position:relative; z-index:2; flex-shrink:0;
  transition: all .2s ease;
}
.track-connector{
  position:absolute; top:58px; bottom:-30px;
  left:50%; transform:translateX(-50%);
  width:14px; background:var(--line-strong); z-index:1; border-radius:2px;
}
.track-step:last-child .track-connector{ display:none; }
.track-step{ padding-bottom:30px; }

/* states */
.track-step.done .track-node{
  background:var(--sage-deep); border-color:var(--sage-deep); color:var(--on-dark);
}
.track-step.done .track-connector{ background:var(--sage-deep); }
.track-step.current .track-node{
  background:var(--sage-soft); border-color:var(--sage-mid); border-width:2.5px;
  color:var(--sage-deep); box-shadow:0 0 0 5px var(--sage-tint);
}
.track-step.current .side h3{ color:var(--sage-deep); }
.track-step.upcoming .side h3,
.track-step.upcoming .side .desc{ opacity:.5; }

@media (max-width:640px){
  .track-step{ grid-template-columns: 52px 1fr; }
  .track-step .side{ text-align:left; grid-column:2; padding-top:12px; }
  .track-step .node{ grid-column:1; grid-row:1; }
  .track-connector{ left:26px; }
}

/* ===========================================================
   Landing page components
   =========================================================== */
.lp-hero{ padding: 76px 60px 68px; }
.lp-hero h1{ font-size: 3.4rem; max-width: 820px; }
.lp-cta-row{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }

.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat-band .sb{ text-align:center; padding:26px 16px; }
.stat-band .sb .n{ font-family:'Petrona',serif; font-size:2.2rem; color:var(--sage-deep); line-height:1; }
.stat-band .sb .l{ font-size:.8rem; color:var(--ink-soft); margin-top:8px; }

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature{ padding:30px 28px; }
.feature .fi{
  width:46px; height:46px; border-radius:12px; background:var(--sage-soft);
  color:var(--sage-deep); display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; border:1px solid color-mix(in srgb, var(--sage-mid) 25%, transparent);
}
.feature .fi svg{ width:22px; height:22px; }
.feature h3{ font-size:1.15rem; }

.usp{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 40px; }
.usp .u{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.usp .u .chk{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--sage-deep); color:var(--on-dark);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}

/* Numbered "how it works" flow */
.flow-steps{ counter-reset:flow; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.flow-steps .fs{ position:relative; padding:28px 22px; }
.flow-steps .fs .fs-n{
  font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--sage-mid);
  border:1px solid var(--line-strong); border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.flow-steps .fs h4{ font-family:'Petrona',serif; font-size:1.05rem; color:var(--sage-deep); margin:0 0 6px; }

.cta-band{
  background:var(--sage-deep); color:var(--on-dark);
  border-radius:var(--radius-l); padding:56px 48px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:var(--on-dark); }
.cta-band p{ color:color-mix(in srgb, var(--on-dark) 82%, transparent); max-width:520px; margin:0 auto 24px; }
.cta-band .btn-ghost{ color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 40%, transparent); }
.cta-band .btn-ghost:hover{ background: rgba(237,239,228,0.12); border-color: var(--on-dark); }

/* ===========================================================
   Criteria status pills (Passed / Warning / Failed)
   =========================================================== */
.crit-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-family:'IBM Plex Mono',monospace; letter-spacing:.04em;
  text-transform:uppercase; font-weight:500; padding:4px 11px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.crit-status .dot{ width:8px; height:8px; border-radius:50%; }
.crit-status.passed{ background:var(--green-soft); color:var(--green); }
.crit-status.passed .dot{ background:var(--green); }
.crit-status.warning{ background:var(--amber-soft); color:var(--amber); }
.crit-status.warning .dot{ background:var(--amber); }
.crit-status.failed{ background:var(--brick-soft); color:var(--brick); }
.crit-status.failed .dot{ background:var(--brick); }

.crit-group{ margin-bottom:36px; }
.crit-group-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.crit-group-head .badge{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--radius-pill); background:var(--sage-deep); color:var(--on-dark);
}
.crit-item{ padding:18px 0; border-bottom:1px solid var(--line); }
.crit-item:last-child{ border-bottom:none; }
.crit-item .crit-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.crit-item .crit-name{ font-weight:600; font-size:.95rem; color:var(--sage-deep); }
.crit-item .crit-desc{ font-size:.84rem; color:var(--ink-soft); margin-top:3px; max-width:640px; }
.crit-item .crit-note{
  font-size:.82rem; margin-top:10px; padding:10px 14px; border-radius:10px;
  background:var(--paper-dim); border-left:3px solid var(--line-strong); color:var(--ink);
}
.crit-item .crit-note.warning{ background:var(--amber-soft); border-left-color:var(--amber); }
.crit-item .crit-note.failed{ background:var(--brick-soft); border-left-color:var(--brick); }

/* Numbered / iconed mandatory-item row (Group A) */
.crit-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.crit-row:last-child{ border-bottom:none; }
.crit-mark{
  flex:0 0 32px; width:32px; height:32px; margin-top:1px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:.85rem; font-weight:600;
  border:1.5px solid transparent;
}
.crit-mark.passed{ background:var(--green-soft); color:var(--green); border-color:color-mix(in srgb, var(--green) 35%, transparent); }
.crit-mark.warning{ background:var(--amber-soft); color:var(--amber); border-color:color-mix(in srgb, var(--amber) 35%, transparent); }
.crit-mark.failed{ background:var(--brick-soft); color:var(--brick); border-color:color-mix(in srgb, var(--brick) 35%, transparent); }
.crit-row .crit-body{ flex:1; min-width:0; }

/* Gate outcome strip — mirrors the quality score-tally but for the pass/fail gate */
.gate-tally{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin:4px 0 16px; padding:16px 20px; border-radius:var(--radius-m);
}
.gate-tally.ok{ background:var(--sage-soft); }
.gate-tally.blocked{ background:var(--brick-soft); border:1px solid color-mix(in srgb, var(--brick) 30%, transparent); }
.gate-tally .gate-label{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.gate-tally.ok .gate-label{ color:var(--sage-mid); }
.gate-tally.blocked .gate-label{ color:var(--brick); }
.gate-tally .gate-count{ font-family:'Fraunces','Petrona',serif; font-size:1.5rem; color:var(--sage-deep); white-space:nowrap; }
.gate-tally.blocked .gate-count{ color:var(--brick); }

/* ===========================================================
   Refined footer
   =========================================================== */
footer.site.pro{ margin-top:50px; padding:0; border-top:none; background:var(--sage-tint); }
footer.site.pro .foot-main-outer{ border-top:1px solid var(--line-strong); }
footer.site.pro .foot-main{
  padding:56px 0 40px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
}
footer.site.pro .foot-brand .mark{ font-size:1.3rem; }
footer.site.pro .foot-brand .footer-tag{ margin:8px 0 14px; }
footer.site.pro .foot-brand p{ max-width:300px; font-size:.84rem; }
footer.site.pro .foot-col h5{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px; font-weight:500;
}
footer.site.pro .foot-col a{ display:block; color:var(--ink); font-size:.86rem; margin-bottom:9px; }
footer.site.pro .foot-col a:hover{ color:var(--sage); text-decoration:none; }
footer.site.pro .foot-col .muted{ display:block; color:var(--ink-soft); font-size:.84rem; margin-bottom:9px; }
footer.site.pro .foot-bar-outer{ border-top:1px solid var(--line-strong); }
footer.site.pro .foot-bar{
  padding:20px 0; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; font-size:.8rem; color:var(--ink-soft);
}
footer.site.pro .foot-bar .foot-legal{ display:flex; gap:18px; flex-wrap:wrap; }
footer.site.pro .foot-bar a{ color:var(--ink-soft); }
footer.site.pro .foot-bar a:hover{ color:var(--sage); }

/* Role radio cards (register) */
.role-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.role-card{
  border:1.5px solid var(--line-strong); border-radius:var(--radius-m); padding:16px 14px;
  cursor:pointer; text-align:center; transition:all .15s ease; background:var(--surface-plain);
}
.role-card:hover{ border-color:var(--sage-mid); }
.role-card.sel{ border-color:var(--sage-deep); background:var(--sage-soft); border-width:2px; }
.role-card .rt{ font-weight:600; font-size:.9rem; color:var(--sage-deep); }
.role-card .rd{ font-size:.74rem; color:var(--ink-soft); margin-top:3px; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 980px){
  .feature-grid, .flow-steps, .stat-band, .role-opts{ grid-template-columns:1fr 1fr; }
  .usp{ grid-template-columns:1fr; }
  footer.site.pro .foot-main{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 620px){
  .feature-grid, .flow-steps, .stat-band, .role-opts{ grid-template-columns:1fr; }
  .lp-hero{ padding:44px 26px; }
  .lp-hero h1{ font-size:2.1rem; }
  .cta-band{ padding:40px 24px; }
  footer.site.pro .foot-main{ grid-template-columns:1fr; gap:28px; }
  footer.site.pro .foot-bar{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 860px){
  h1{ font-size: 2.2rem; }
  .ledger-row, .ledger-head{ grid-template-columns: 40px 1fr; }
  .ledger-row .meta-extra, .ledger-head span:nth-child(3), .ledger-head span:nth-child(4), .ledger-head span:nth-child(5){ display:none; }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  nav.main{ display:none; }
}

/* ============================================================
   Submission progress timeline (vertical stepper)
   ============================================================ */
.tl{
  position:relative;
  margin-top:28px;
  padding-left:6px;
}
.tl__list{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}

/* The vertical rail sits behind the nodes */
.tl__rail{
  position:absolute;
  /* Node is 42px wide → centre is 21px. Offset by half the 3px rail (1.5px)
     so the rail sits dead-centre under the nodes. */
  left:19.5px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:3px;
  background:var(--line);
  overflow:hidden;
}
.tl__rail-fill{
  position:absolute;
  left:0; top:0; right:0;
  height:calc(var(--tl-fill, 0) * 100%);
  background:linear-gradient(180deg, var(--sage-mid), var(--sage));
  border-radius:3px;
  transition:height 1.1s cubic-bezier(.5,.05,.2,1);
  animation:tlGrow 1.1s cubic-bezier(.5,.05,.2,1) both;
}
.tl--halt .tl__rail-fill{
  background:linear-gradient(180deg, var(--sage-mid), var(--brick));
}
@keyframes tlGrow{ from{ height:0; } }

/* Each step */
.tl__step{
  position:relative;
  display:flex;
  gap:20px;
  padding:0 0 30px 0;
  min-height:46px;
  opacity:0;
  transform:translateY(8px);
  animation:tlStepIn .5s ease forwards;
  animation-delay:calc(var(--i, 0) * 130ms + 250ms);
}
.tl__step:last-child{ padding-bottom:4px; }
@keyframes tlStepIn{ to{ opacity:1; transform:none; } }

/* Node (the circle) */
.tl__node{
  position:relative;
  z-index:2;
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--paper);
  border:3px solid var(--line-strong);
  transition:border-color .4s ease, background .4s ease;
}
.tl__dot{
  width:12px; height:12px;
  border-radius:50%;
  background:var(--line-strong);
  transition:background .4s ease, transform .4s ease;
}
.tl__check{
  position:absolute;
  width:22px; height:22px;
  color:#fff;
}

/* --- States --- */

/* done */
.tl__step.is-done .tl__node{
  background:var(--sage);
  border-color:var(--sage);
}
.tl__step.is-done .tl__dot{ opacity:0; }

/* active — pulsing ring */
.tl__step.is-active .tl__node{
  background:var(--paper);
  border-color:var(--sage-mid);
  box-shadow:0 0 0 0 rgba(80,107,78,.45);
  animation:tlPulse 1.9s ease-out infinite;
}
.tl__step.is-active .tl__dot{
  background:var(--sage-mid);
  transform:scale(1.15);
}
@keyframes tlPulse{
  0%{ box-shadow:0 0 0 0 rgba(80,107,78,.40); }
  70%{ box-shadow:0 0 0 12px rgba(80,107,78,0); }
  100%{ box-shadow:0 0 0 0 rgba(80,107,78,0); }
}

/* todo */
.tl__step.is-todo .tl__node{
  background:var(--paper);
  border-color:var(--line);
}
.tl__step.is-todo .tl__dot{ background:var(--line-strong); }
.tl__step.is-todo .tl__body{ opacity:.62; }

/* win — positive final decision */
.tl__step.is-win .tl__node{
  background:var(--sage-mid);
  border-color:var(--sage-mid);
}
.tl__step.is-win .tl__dot{ opacity:0; }

/* halt — rejection / denial */
.tl__step.is-halt .tl__node{
  background:var(--brick);
  border-color:var(--brick);
}
.tl__step.is-halt .tl__dot{ opacity:0; }

/* Body text */
.tl__body{ padding-top:3px; }
.tl__head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;
}
.tl__title{
  font-weight:600;
  color:var(--ink);
  font-size:1.02rem;
  letter-spacing:-.01em;
}
.tl__step.is-halt .tl__title{ color:var(--brick); }
.tl__date{
  font-size:.78rem;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.tl__badge{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sage-mid);
  background:var(--sage-tint);
  padding:3px 9px;
  border-radius:999px;
}
.tl__sub{
  margin:4px 0 0;
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.5;
}

/* Appeal branch — subtle offset accent */
.tl__step--appeal .tl__node{
  border-style:dashed;
}
.tl__step--appeal.is-active .tl__node{ border-style:solid; }

@media (prefers-reduced-motion: reduce){
  .tl__step, .tl__rail-fill{ animation:none; opacity:1; transform:none; height:calc(var(--tl-fill,0)*100%); }
  .tl__step.is-active .tl__node{ animation:none; }
}

/* ---------- Pagination -------------------------------------------------
   Laravel's default paginator markup assumes Tailwind, which this site does
   not load. These rules style the custom view in
   resources/views/vendor/pagination/scilex.blade.php.
   ---------------------------------------------------------------------- */
.pager{
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap; margin-top:36px;
}
.pager__btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border:1px solid var(--line-strong); border-radius:999px;
  font-size:.86rem; font-weight:500; text-decoration:none; color:var(--ink);
  background:transparent; transition:background .14s ease, border-color .14s ease, color .14s ease;
  white-space:nowrap;
}
.pager__btn:hover{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fffdf9; }
.pager__btn.is-disabled{ opacity:.38; pointer-events:none; }

.pager__pages{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pager__page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 8px; border-radius:8px;
  font-size:.85rem; text-decoration:none; color:var(--ink-soft);
  transition:background .14s ease, color .14s ease;
}
.pager__page:hover{ background:var(--paper-dim); color:var(--ink); }
.pager__page.is-current{
  background:var(--sage-deep); color:#fffdf9; font-weight:600;
}
.pager__gap{ padding:0 4px; color:var(--ink-soft); }

.pager__summary{
  text-align:center; margin-top:12px; font-size:.78rem; color:var(--ink-soft);
}

/* On phones the numbered pages wrap into an unreadable block; the
   Previous/Next buttons and the summary line are enough there. */
@media (max-width:640px){
  .pager__pages{ display:none; }
}

/* ---------- Article search results -------------------------------------
   The list is scanned, not read: the eye should land on the title, then the
   abstract, and only reach the journal line when it wants provenance. Each
   level is therefore separated by size, weight and colour rather than by
   everything sharing one flat treatment.
   ---------------------------------------------------------------------- */
.art-card{
  padding:22px 26px; margin-bottom:12px;
  background:var(--surface);
  border:1px solid var(--line); border-radius:14px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.art-card:hover{
  border-color:var(--line-strong);
  box-shadow:0 2px 14px rgba(30,36,28,.06);
  transform:translateY(-1px);
}
.art-card__title{
  margin:0 0 7px; font-size:1.06rem; line-height:1.38; font-weight:600;
  letter-spacing:-.005em;
}
.art-card__title a{
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--line-strong), var(--line-strong));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .22s ease, color .15s ease;
}
.art-card__title a:hover{ color:var(--sage-deep); background-size:100% 1px; }

.art-card__authors{
  margin:0 0 10px; font-size:.855rem; line-height:1.5; color:var(--ink-soft);
}
.art-card__more{ color:var(--line-strong); }

.art-card__excerpt{
  margin:0 0 12px; font-size:.875rem; line-height:1.62; color:var(--ink-soft);
  /* Two lines is enough to judge relevance; more turns the list into a wall. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.art-card__meta{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-size:.78rem; color:var(--ink-soft);
  padding-top:11px; border-top:1px solid var(--line);
}
/* Provenance can wrap internally; the tags stay on one line at the right end
   of the rule so the badge always aligns with the card's right edge. */
.art-card__source{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0;
}
.art-card__tags{
  display:flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap;
}
.art-card__journal{
  color:var(--sage-deep); text-decoration:none; font-weight:500;
}
.art-card__journal:hover{ text-decoration:underline; }
.art-card__dot{ color:var(--line-strong); }
.art-card__doi{ font-size:.74rem; opacity:.75; }

/* The rule above the meta row already separates it; the tags shouldn't add
   more weight, so keep them compact. */
.art-card__tags .field-tag{ white-space:nowrap; }

@media (max-width:680px){
  .art-card{ padding:18px; }
  .art-card__title{ font-size:1rem; }
  /* Stack provenance above the tags rather than squeezing both onto one line. */
  .art-card__meta{ flex-direction:column; align-items:flex-start; gap:9px; }
  .art-card__tags{ align-self:flex-start; }
}
