/* ==========================================================================
   Article Management System — visual identity
   A clean, modern "publisher" look: soft neutral page background, a bright
   professional blue as the single accent color (matching the Technology
   Fist brand mark), white cards with soft shadows, rounded controls, and a
   plain sans-serif typeface throughout for a contemporary editorial feel.
   ========================================================================== */

:root{
  --ink:            #14171A;
  --ink-soft:       #3A4750;
  --paper-bg:       #F0F2F5;
  --surface:        #FFFFFF;
  /* One border colour, drawn from the blue family (was a stray sage green
     #D6E2D3 leftover from a previous theme). */
  --border:         #DCE3EA;
  --border-soft:    #EDF1F5;
  /* Brand accent (blue). --gold is kept as an alias so the ~hundreds of
     existing var(--gold) references keep working during migration. */
  --brand:          #0B6BAB;   /* darkened for WCAG AA contrast (~5.4:1 on white) */
  --brand-soft:     #E8F3FC;
  --gold:           var(--brand);
  --gold-soft:      var(--brand-soft);
  --accept:         #1E7145;
  --accept-soft:    #E4F4EA;
  --reject:         #C0392B;
  --reject-soft:    #FBEAE8;
  --info:           #0B6BAB;
  --info-soft:      #E8F3FC;
  --muted:          #65676B;
  --radius:         8px;
  --brand-dark:     #0B5FA0;
  --shadow-card:    0 1px 2px rgba(15,23,31,.06), 0 1px 6px rgba(15,23,31,.05);
  --shadow-hover:   0 4px 14px rgba(15,123,196,.18);
  /* Motion: one punchy ease-out curve for entrances/feedback (built-in
     eases are too weak). Used by buttons, dropdowns, and flash messages. */
  --ease-out:       cubic-bezier(0.23, 1, 0.32, 1);
  /* Type scale (1.25 ratio). Prefer these utilities over inline font-size. */
  --t-caption:      .82rem;
  --t-body:         .95rem;
  --t-lead:         1.1rem;
  --t-h2:           1.55rem;
  --t-display:      2.4rem;
}

*{ box-sizing: border-box; }

body{
  background-color: var(--paper-bg);
  background-image: radial-gradient(circle, rgba(20,23,26,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4, .brand-serif{
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.1px;
}

a{ color: var(--info); text-decoration: none; }
a:hover{ color: var(--brand-dark); text-decoration: underline; }

/* ---------------- Utility bar (thin strip above the main nav) ---------------- */
.topbar-utility{
  background: var(--ink);
  color: #B9C6D3;
  font-size: .86rem;
  padding: .55rem 1.5rem;
}
.topbar-utility-inner{
  display: flex;
  justify-content: flex-end;
  gap: 1.1rem;
}
.topbar-utility a{
  color: #B9C6D3;
  text-decoration: none;
}
.topbar-utility a:hover{ color: #fff; text-decoration: underline; }
.topbar-utility .role-pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
  margin-left: 0;
  transition: background .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease);
}
.topbar-utility .role-pill:hover{ background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); color:#fff; }
.topbar-utility .role-pill:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
/* When the menu is open, use a solid brand chip (not a washed-out white) so the
   state reads clearly and the white label/caret stay legible. */
.topbar-utility .role-pill[aria-expanded="true"]{ background: var(--gold, #0B6BAB); border-color: var(--gold, #0B6BAB); color:#fff; }

/* v88.19 - account dropdown legibility.
   ".topbar-utility a" above paints every link in the light bar colour (#B9C6D3)
   and turns it WHITE on hover. Bootstrap's .dropdown-item is also an <a> inside
   that bar, so the menu items inherited light-grey text on a white menu, and
   went invisible (white-on-white) on hover. Scope the menu explicitly: dark text
   at rest, charcoal background with light text on hover/focus. */
.topbar-utility .dropdown-menu{
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DCE3EA);
  border-radius: 12px;
  padding: .35rem;
  box-shadow: 0 18px 40px -22px rgba(15,23,31,.55);
}
.topbar-utility .dropdown-menu .dropdown-item{
  color: var(--ink, #14171A);
  font-weight: 600;
  font-size: .86rem;
  border-radius: 8px;
  padding: .5rem .75rem;
  text-decoration: none;
  transition: background-color .15s var(--ease-out, ease), color .15s var(--ease-out, ease);
}
.topbar-utility .dropdown-menu .dropdown-item:hover,
.topbar-utility .dropdown-menu .dropdown-item:focus,
.topbar-utility .dropdown-menu .dropdown-item:focus-visible,
.topbar-utility .dropdown-menu .dropdown-item.active,
.topbar-utility .dropdown-menu .dropdown-item:active{
  background-color: #36414A;   /* charcoal grey */
  color: #FFFFFF;
  text-decoration: none;
}
.topbar-utility .dropdown-menu .dropdown-item:focus-visible{ outline: 2px solid var(--gold, #0B6BAB); outline-offset: 1px; }

/* ---------------- Top bar (main navigation) ---------------- */
.topbar{
  background: linear-gradient(90deg, var(--brand-dark), var(--ink));
  color: #fff;
  /* v88.52: slimmer blue bar - the logo, not the padding, set the height,
     so both come down together and the row keeps its proportions. */
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 6px rgba(15,23,31,.15);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .brand{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0;
}
.topbar .brand:hover{ text-decoration: none; color: #fff; }
.topbar .brand img.brand-logo{
  height: 76px;   /* v88.52: slimmer bar (was 96px in v88.19) */
  width: auto;
}
.topbar .brand .dot{ color: var(--gold); }
.topbar .brand .brand-sep{
  /* v88.42: slim gold divider between the Technology Fist logo and the app title */
  display: inline-block;
  width: 1px;
  height: 30px;   /* v88.52: kept in proportion with the slimmer bar */
  background: var(--gold, #c9a04e);
  opacity: .85;
  margin: 0 .25rem;
  flex: none;
}

.topbar nav{ display:flex; align-items:center; flex-wrap: wrap; }
.topbar nav a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  margin-left: 1.1rem;
  font-size: .92rem;
  font-weight: 500;
  padding: .3rem 0;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.topbar nav a:hover, .topbar nav a.active{ color: #fff; border-bottom-color: var(--gold); text-decoration: none; }
.topbar nav a.active{ font-weight: 700; }
.topbar nav a.nav-cta{
  margin-left: .7rem;
  padding: .35rem .9rem;
  border-bottom: none;
  vertical-align: middle;
}
.topbar nav a.nav-cta:hover{ border-bottom: none; text-decoration: none; color: #fff; }
.role-pill{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: none;
  background: var(--gold-soft);
  border: 1px solid #CFE6F7;
  color: var(--brand-dark);
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .3px;
  font-weight: 600;
  margin-left: .9rem;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
/* v88.8: the name+TF-ID can be long - let only the name ellipsis if it must,
   so the TF-ID and the dropdown caret are never clipped. */
.role-pill .role-pill-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.role-pill .role-pill-caret{ flex: 0 0 auto; opacity: .75; transition: transform .15s var(--ease-out, ease); }
.role-pill[aria-expanded="true"] .role-pill-caret{ transform: rotate(180deg); }
.role-pill.dropdown-toggle::after{ display: none; } /* use our own caret, not Bootstrap's */

.page-wrap{ max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }

/* ---------------- Cards / surfaces ---------------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.card-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

/* ---------------- Paper / Article ID "chip" ---------------- */
.paper-code{
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .78rem;
  letter-spacing: .5px;
  background: var(--gold-soft);
  color: var(--brand-dark);
  border: 1px solid #CFE6F7;
  border-radius: 5px;
  padding: .14rem .5rem;
  white-space: nowrap;
}

/* ---------------- Buttons ---------------- */
/* Name the animated properties (never `all`), use the punchy ease-out, and
   add a press state so buttons feel responsive on click. */
.btn{
  border-radius: var(--radius); font-weight: 600; font-size: .92rem;
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out),
              color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .06s var(--ease-out);
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: var(--gold); border-color: var(--gold);
}
.btn-primary:hover{ background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: var(--shadow-hover); }
.btn-gold{
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.btn-gold:hover{ background: var(--brand-dark); border-color: var(--brand-dark); color:#fff; box-shadow: var(--shadow-hover); }
.btn-outline-ink{
  color: var(--gold); border: 1px solid var(--gold); background: transparent;
}
.btn-outline-ink:hover{ background: var(--gold); color: #fff; }
.btn-outline-danger:hover{ box-shadow: 0 4px 14px rgba(192,57,43,.18); }
.btn-sm{ border-radius: 6px; }

/* ---------------- Status / decision badges ---------------- */
.badge{ font-weight: 600; letter-spacing: .2px; border-radius: 6px; }
.decision-chip{
  display:inline-block; padding:.22rem .6rem; border-radius: 999px;
  font-size:.78rem; font-weight:600; color:#fff;
}
.revision-chip{
  display:inline-block; padding:.22rem .6rem; border-radius: 999px;
  font-size:.78rem; font-weight:600; color:#fff; background: #8A5A12;
}

/* ---------------- Tables ---------------- */
table.app-table{ width:100%; border-collapse: collapse; background: var(--surface); }
table.app-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  color: var(--muted); border-bottom: 1px solid var(--border); padding: .65rem .7rem;
  background: #FAFBFC;
}
table.app-table td{ padding:.65rem .7rem; border-bottom:1px solid var(--border-soft); vertical-align: middle; }
table.app-table tr:hover td{ background: #F7FAFD; }

/* ---------------- Forms ---------------- */
.form-control:focus, .form-select:focus{
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(15,123,196,.15);
}
.form-control, .form-select{ border-radius: 7px; border-color: #D5D9DD; }

/* ---------------- Misc ---------------- */
.eyebrow{
  text-transform: uppercase; letter-spacing: 1.2px; font-size: .72rem;
  color: var(--gold); font-weight: 700;
}
.section-title{ font-size:1.55rem; margin-bottom:.25rem; font-weight: 700; }
.muted{ color: var(--muted); }
.stat-card{ text-align:center; padding: 1.1rem; }
.stat-num{ font-size:2rem; color: var(--ink); font-weight: 700; }
.stat-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.form-label{ font-weight:600; font-size:.9rem; }
.login-shell{ max-width: 430px; margin: 3.5rem auto; }
.login-shell .card{ padding: 1.85rem; }
.nav-pills .nav-link.active{ background: var(--gold); }
.nav-tabs .nav-link.active{ border-color: var(--border) var(--border) var(--surface); color: var(--gold); font-weight: 600; }
.accordion-button:not(.collapsed){ background: var(--gold-soft); color: var(--brand-dark); }
.accordion-button:focus{ box-shadow: 0 0 0 3px rgba(15,123,196,.15); }

/* ---------------- Site footer ---------------- */
footer.app-footer{
  color: #B9C6D3;
  font-size: .87rem;
  padding: 3rem 1.25rem 1.75rem;
  margin-top: 3rem;
  background: linear-gradient(180deg, var(--ink) 0%, #0d1013 100%);
  border-top: 3px solid var(--gold);
}
.app-footer-inner{ max-width: 1180px; margin: 0 auto; }

.footer-brand{
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .6rem;
}
footer.app-footer img.footer-logo{ height: 38px; width: auto; } /* v88.19: slightly larger */
.footer-tagline{ max-width: 320px; line-height: 1.5; margin-bottom: 1rem; color: #9fb0bf; }
.footer-contact-btn{ text-decoration: none !important; }

.footer-heading{
  font-size: .74rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; margin-bottom: .85rem;
}
.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li{ margin-bottom: .55rem; }
.footer-links a{ color: #9fb0bf; text-decoration: none; transition: color .15s ease; }
.footer-links a:hover{ color: var(--gold-light, #6fc3f7); text-decoration: underline; }

.footer-divider{ border-color: rgba(255,255,255,.15); opacity: 1; margin: 2rem 0 1.25rem; }
.footer-bottom{ text-align: center; font-size: .82rem; color: #8395a5; }
.footer-bottom a{ color: #B9C6D3; text-decoration: underline; }
.footer-bottom a:hover{ color: #fff; }

@media (max-width: 767px){
  footer.app-footer{ text-align: center; }
  .footer-brand{ justify-content: center; }
  .footer-tagline{ margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   v84 - dashboard system: attention strips, pipeline bar, paper stepper,
   grouped navigation, and SVG icon sizing
   ========================================================================== */

.icon-tile{ width: 34px; height: 34px; display:flex; align-items:center; justify-content:center;
  border-radius: 8px; background: var(--gold-soft); color: var(--gold); margin-bottom: .4rem; }
.icon-tile svg{ width: 19px; height: 19px; }

/* "Needs your attention" strip */
.attention-strip{ border-left: 4px solid var(--gold); }
.attention-item{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.55rem 0; border-bottom:1px solid var(--border-soft); font-size:.92rem; }
.attention-item:last-child{ border-bottom:none; }
.attention-count{ display:inline-flex; align-items:center; justify-content:center; min-width:1.7rem; height:1.7rem;
  border-radius:999px; background:var(--gold); color:#fff; font-weight:700; font-size:.85rem; padding:0 .45rem; }
.attention-count.is-zero{ background:var(--border); color:var(--muted); }
.attention-stale{ display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:#fd7e14; margin-left:.35rem; }

/* Pipeline bar (chair) */
.pipeline{ display:flex; gap:.35rem; flex-wrap:wrap; }
.pipeline-step{ flex:1 1 0; min-width:110px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:.5rem .6rem; text-align:center; position:relative; }
.pipeline-step .num{ font-size:1.25rem; font-weight:700; color:var(--ink); }
.pipeline-step .lbl{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.pipeline-step.hot{ border-color:var(--gold); background:var(--gold-soft); }

/* Author paper status stepper */
.stepper{ display:flex; align-items:center; flex-wrap:wrap; gap:0; margin:.35rem 0; }
.step{ display:flex; align-items:center; font-size:.72rem; color:var(--muted); white-space:nowrap; }
.step .dot{ width:.85rem; height:.85rem; border-radius:50%; background:var(--border); margin-right:.3rem; flex:0 0 auto; }
.step.done{ color:var(--ink-soft); } .step.done .dot{ background:#1E7145; }
.step.current{ color:var(--ink); font-weight:700; } .step.current .dot{ background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.step .bar{ width:1.4rem; height:2px; background:var(--border); margin:0 .35rem; }
.step.done .bar{ background:#1E7145; }

/* Grouped navigation (super chair) */
.nav-group{ margin-bottom: .9rem; }
.nav-group .nav-group-label{ text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--muted); font-weight:700; margin-bottom:.35rem; }
.nav-group .btn{ margin: 0 .3rem .3rem 0; }


/* v87: accessibility + responsive polish */
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
a.text-decoration-none:focus-visible .card, a:focus-visible .card{ outline: 2px solid var(--gold); outline-offset: 2px; }
.skip-link{ position:absolute; left:-999px; top:auto; background:#fff; color:var(--gold); padding:.5rem .9rem; border-radius:6px; z-index:2000; }
.skip-link:focus{ left:.75rem; top:.5rem; }
.req::after{ content:" *"; color: var(--reject); font-weight:700; }

/* Data-heavy console pages: drop the dotted marketing texture behind tables. */
body.admin-flat{ background: var(--paper-bg); }
body.admin-flat::before{ display:none !important; }

@media (max-width: 768px){
  .topbar .brand img.brand-logo{ height: 48px; }
  .topbar{ position: static; }
  /* Any wide table scrolls horizontally instead of overflowing the page. */
  table.app-table, table.table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
}


/* v88: prevent any full-bleed section from causing a phantom horizontal
   scrollbar (100vw includes the vertical scrollbar's width). clip, not
   hidden, so position:sticky keeps working. */
html, body { overflow-x: clip; }

/* ==========================================================================
   v88.3 design system additions — type scale, chips, stat tiles, empty
   states, motion, table polish. Central utilities that replace inline
   font-size, generic grey badges, and repeated ad-hoc blocks.
   ========================================================================== */

/* ---- Type scale utilities (prefer over inline font-size) ---- */
.t-caption{ font-size: var(--t-caption); line-height: 1.5; }
.t-body{    font-size: var(--t-body);    line-height: 1.55; }
.t-lead{    font-size: var(--t-lead);    line-height: 1.5; }
.t-h2{      font-size: var(--t-h2);      line-height: 1.25; font-weight: 700; letter-spacing: -0.1px; }
.t-display{ font-size: var(--t-display); line-height: 1.15; font-weight: 700; letter-spacing: -0.4px; }
.t-muted{ color: var(--muted); }

/* ---- Semantic chips (replace generic `badge bg-secondary`) ----
   type   = soft blue (venue types)
   subject= neutral outline (topic/interest tags)
   status = coloured by state (see modifiers) */
.chip{
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; line-height: 1.4;
}
.chip-type{ background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #CFE6F7; }
.chip-subject{ background: transparent; color: var(--ink-soft); border: 1px solid var(--border); }
.chip-neutral{ background: #F1F3F5; color: var(--ink-soft); border: 1px solid var(--border); }
.chip-ok{ background: var(--accept-soft); color: var(--accept); border: 1px solid #CDE9D6; }
.chip-warn{ background: #FDF3E2; color: #8A5A12; border: 1px solid #F0DCB4; }
.chip-danger{ background: var(--reject-soft); color: var(--reject); border: 1px solid #F3CFCB; }
.chip-info{ background: var(--info-soft); color: var(--brand-dark); border: 1px solid #CFE6F7; }

/* ---- Stat tile (number leads, label breathes) ---- */
.stat-card{ padding: 1.15rem 1.2rem; }
.stat-card .stat-num{ font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -0.5px; }
.stat-card .stat-label{ font-size: .8rem; color: var(--muted); margin-top: .4rem; }

/* ---- Empty state (icon + explanation + action) ---- */
.empty-state{ text-align: center; padding: 2.5rem 1.5rem; color: var(--muted); }
.empty-state .empty-icon{ color: var(--border); margin-bottom: .75rem; }
.empty-state .empty-icon svg{ width: 44px; height: 44px; }
.empty-state h6{ color: var(--ink); font-weight: 700; margin-bottom: .35rem; }
.empty-state p{ font-size: .9rem; max-width: 420px; margin: 0 auto 1rem; }

/* ---- Table polish: zebra + stronger hover for scanning wide tables ---- */
table.app-table tbody tr:nth-child(even) td{ background: #FCFDFE; }
table.app-table tbody tr:hover td{ background: var(--brand-soft); }

/* ---- Flash messages rise in with the ease-out curve ---- */
@media (prefers-reduced-motion: no-preference){
  #main-content > .alert{ animation: flash-in .22s var(--ease-out) both; }
  @keyframes flash-in{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
}

/* v88.6: subject/type filter checkbox lists. Bootstrap floats the checkbox and
   sets .form-check min-height:1.5rem; a long label that wraps to two lines then
   overlaps the next row inside a flex column. Reset to natural height with real
   spacing so wrapped labels never collide. */
.filter-checks .form-check{ min-height: 0; margin-bottom: .35rem; padding-left: 1.6em; line-height: 1.3; }
.filter-checks .form-check-input{ margin-top: .18rem; }
.filter-checks .form-check-label{ display: inline-block; }

/* =====================================================================
   v88.12 — Conference / journal microsite (public website) design system.
   Everything is scoped to .csite-* classes so it never touches the app UI.
   Colours flow from the venue theme: --gold (accent), --site-hero-dark.
   ===================================================================== */
:root{ --csite-max: 1120px; }

/* ---- Sticky, two-tier site header ---- */
.csite-topbar{ position: sticky; top: 0; z-index: 1030; background: var(--surface,#fff); box-shadow: 0 1px 0 var(--border,#DCE3EA), 0 6px 20px -14px rgba(15,23,31,.4); }
.csite-brandbar{ max-width: var(--csite-max); margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.csite-brand{ display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.csite-brand img{ height: 34px; width: auto; border-radius: 6px; }
.csite-brand-cta{ display: flex; align-items: center; gap: 1rem; }
.csite-powered{ color: var(--muted,#65676B); text-decoration: none; font-size: .8rem; white-space: nowrap; }
.csite-powered:hover{ color: var(--gold); }
.csite-nav{ border-top: 1px solid var(--border-soft,#EEF1F4); background: var(--surface,#fff); }
.csite-nav-inner{ max-width: var(--csite-max); margin: 0 auto; padding: 0 1.25rem; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.csite-nav-inner::-webkit-scrollbar{ display: none; }
.csite-nav-inner a{ position: relative; white-space: nowrap; padding: .7rem .85rem; font-size: .9rem; font-weight: 600; color: var(--ink-soft,#3A4750); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s var(--ease-out,ease), border-color .15s var(--ease-out,ease); }
.csite-nav-inner a:hover{ color: var(--gold); }
.csite-nav-inner a.active{ color: var(--gold); border-bottom-color: var(--gold); }

/* v88.34: collapse the microsite section nav behind a hamburger on phones so the
   tabs no longer overflow off-screen. Pure CSS (checkbox hack), no JS. */
.csite-nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.csite-nav-burger{ display:none; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--border,#DCE3EA); border-radius:8px; background:var(--surface,#fff); color:var(--ink,#14171A); cursor:pointer; }
.csite-nav-burger .csite-burger-close{ display:none; }
.csite-nav-toggle:focus-visible ~ .csite-brandbar .csite-nav-burger{ outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width: 720px){
  .csite-powered{ display:none; }
  .csite-brandbar{ padding:.6rem .9rem; flex-wrap:nowrap; }
  .csite-brand{ min-width:0; }
  .csite-brand span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .csite-brand-cta{ gap:.5rem; flex:0 0 auto; }
  .csite-brand-cta .btn{ padding:.42rem .75rem; font-size:.8rem; white-space:nowrap; }
  .csite-nav-burger{ display:inline-flex; flex:0 0 auto; }
  .csite-nav{ display:none; }
  .csite-nav-toggle:checked ~ .csite-nav{ display:block; animation: csiteNavIn .16s var(--ease-out,ease); }
  .csite-nav-toggle:checked ~ .csite-brandbar .csite-nav-burger .csite-burger-open{ display:none; }
  .csite-nav-toggle:checked ~ .csite-brandbar .csite-nav-burger .csite-burger-close{ display:inline; }
  .csite-nav-inner{ flex-direction:column; overflow:visible; padding:.25rem .75rem .6rem; gap:0; }
  .csite-nav-inner a{ padding:.8rem .55rem; border-bottom:1px solid var(--border-soft,#EEF1F4); border-left:3px solid transparent; }
  .csite-nav-inner a:last-child{ border-bottom:none; }
  .csite-nav-inner a.active{ border-bottom-color:var(--border-soft,#EEF1F4); border-left-color:var(--gold); background:var(--brand-soft,#E8F3FC); }
}
@keyframes csiteNavIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ---- Shell keeps hero + content the SAME width (consistency) ---- */
.csite-shell{ max-width: var(--csite-max); margin: .5rem auto 0; padding: 0 1.25rem; } /* v88.19: sit the hero closer under the nav bar */
/* v88.19: the shared .page-wrap adds 1.75rem of top padding, which on a
   microsite left a visible ~38px band between the sticky nav and the header
   image. Scope it down for microsite pages only (the sibling selector means no
   PHP change and no effect on the rest of the app). */
.csite-topbar + .page-wrap{ padding-top: .3rem; }

/* ---- Hero: contained banner the exact width of the content below it ---- */
.csite-hero{ position: relative; border-radius: 18px; overflow: hidden; color: #fff; padding: 3rem 1.5rem; margin-bottom: 1.5rem; background-color: var(--site-hero-dark,#14171A); box-shadow: 0 20px 44px -26px rgba(15,23,31,.6); }
.csite-hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.14), transparent 60%); pointer-events:none; }
.csite-hero-inner{ position: relative; z-index: 1; max-width: 780px; margin: 0 auto; text-align: center; }
.csite-hero-logo{ height: 62px; border-radius: 10px; margin-bottom: 1rem; background: #fff; padding: 5px; }
.csite-hero h1{ color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.35rem); line-height: 1.15; margin: 0 0 .5rem; font-weight: 800; letter-spacing: -.015em; font-family: var(--csite-hero-font, inherit); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.csite-hero-tagline{ color: #eef1f4; font-size: 1.06rem; margin: 0 0 .9rem; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.csite-hero-meta{ display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; justify-content: center; color: #e5e7eb; font-size: .92rem; margin-bottom: 1.4rem; }
.csite-hero-meta a{ color: #fff; text-decoration: underline; }
.csite-hero-cta.btn{ padding: .6rem 1.6rem; font-weight: 700; border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); }

/* ---- Two-column content + right sidebar (same width as hero) ---- */
.csite-cols{ display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1.5rem; align-items: start; margin-bottom: 2.5rem; }
.csite-main{ min-width: 0; }
.csite-card{ border: 1px solid var(--border,#DCE3EA); border-radius: 14px; padding: 1.75rem; background: var(--surface,#fff); box-shadow: 0 1px 3px rgba(15,23,31,.05); }
.csite-page-title{ margin-top: 0; }
.csite-side{ position: sticky; top: 110px; display: flex; flex-direction: column; gap: 1.1rem; }
.csite-side-card{ padding: 1.15rem 1.2rem; }
.csite-side-title{ display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-bottom: .75rem; }
.csite-dates{ list-style: none; margin: 0; padding: 0; }
.csite-dates li{ display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px dashed var(--border-soft,#EEF1F4); font-size: .88rem; }
.csite-dates li:last-child{ border-bottom: 0; }
.csite-date-label{ color: var(--ink-soft,#3A4750); }
.csite-date-val{ font-weight: 700; color: var(--ink); white-space: nowrap; }
.csite-side-cta p{ font-size: .86rem; color: var(--ink-soft,#3A4750); margin: 0 0 .8rem; }
.csite-sponsors{ display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.csite-sponsor{ display: flex; align-items: center; justify-content: center; height: 58px; padding: .4rem; border: 1px solid var(--border-soft,#EEF1F4); border-radius: 10px; background: #fff; text-decoration: none; }
.csite-sponsor img{ max-width: 100%; max-height: 42px; object-fit: contain; }
.csite-sponsor-name{ font-size: .78rem; font-weight: 600; color: var(--ink-soft,#3A4750); text-align: center; }
.csite-side-more{ font-size: .82rem; font-weight: 600; color: var(--gold); text-decoration: none; }
.csite-side-more:hover{ text-decoration: underline; }

/* ---- Section attachment button (Paper Template / flyer / PDF) ---- */
.csite-file-btn{ display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid var(--gold); border-radius: 10px; color: var(--gold); font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .15s var(--ease-out,ease), color .15s var(--ease-out,ease); }
.csite-file-btn:hover{ background: var(--gold); color: #fff; }
.csite-file-ext{ font-size: .68rem; font-weight: 700; letter-spacing: .05em; padding: .1rem .4rem; border-radius: 5px; background: var(--gold-soft); color: var(--gold); }
.csite-file-btn:hover .csite-file-ext{ background: rgba(255,255,255,.25); color: #fff; }

/* ---- Slim double-tone dark footer ---- */
/* Two-tone footer: a dark upper band, then a LIGHT bottom bar with dark text. */
.csite-footer{ margin-top: 2.5rem; }
.csite-footer-main{ background: var(--site-hero-dark,#14171A); color: #cdd5de; }
.csite-footer-inner{ max-width: var(--csite-max); margin: 0 auto; padding: 2.25rem 1.25rem; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 2rem; }
.csite-footer-name{ display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: .5rem; }
.csite-footer-name img{ height: 30px; border-radius: 6px; background: #fff; padding: 3px; }
.csite-footer-tag{ font-size: .88rem; color: #aab4bf; margin: 0 0 1rem; max-width: 42ch; }
.csite-footer-h{ font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8f9aa6; margin-bottom: .7rem; }
.csite-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.csite-footer-col li{ margin-bottom: .4rem; }
.csite-footer-col a{ color: #cdd5de; text-decoration: none; font-size: .9rem; }
.csite-footer-col a:hover{ color: #fff; }
.csite-footer-info li{ display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: #cdd5de; }
.csite-footer-info a{ color: #cdd5de; }
/* Light bottom bar with DARK, legible text. */
.csite-footer-bottom{ background: #EDF1F5; border-top: 1px solid #DCE3EA; }
.csite-footer-bottom-inner{ max-width: var(--csite-max); margin: 0 auto; padding: .85rem 1.25rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: #3A4750; }
.csite-footer-bottom a{ color: var(--gold); text-decoration: none; font-weight: 600; }
.csite-footer-bottom a:hover{ color: var(--brand-dark, #0B5FA0); text-decoration: underline; }

@media (max-width: 860px){
  .csite-cols{ grid-template-columns: 1fr; }
  .csite-side{ position: static; }
  .csite-footer-inner{ grid-template-columns: 1fr; gap: 1.5rem; }
  .csite-footer-bottom-inner{ justify-content: center; text-align: center; }
}

/* v88.12: website editor — clickable theme swatches */
.theme-swatches{ display:flex; flex-wrap:wrap; gap:.6rem; }
.theme-swatch{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem .4rem .5rem; border:2px solid var(--border); border-radius:999px; cursor:pointer; background:#fff; transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.theme-swatch input{ position:absolute; opacity:0; width:0; height:0; }
.theme-swatch-dot{ width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex-shrink:0; }
.theme-swatch-name{ font-size:.85rem; font-weight:600; color:var(--ink-soft); }
.theme-swatch:has(input:checked){ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.theme-swatch:has(input:checked) .theme-swatch-name{ color:var(--ink); }
.theme-swatch:hover{ border-color:var(--gold); }

/* =====================================================================
   v88.15 — Microsite aesthetic polish (agency-grade refinement).
   ===================================================================== */
/* Hero refinements */
.csite-hero{ padding: 3.5rem 1.5rem 3rem; }
.csite-hero-eyebrow{ position: relative; z-index:1; display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.9; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:.28rem .7rem; border-radius:999px; margin-bottom:.9rem; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.csite-hero-rule{ display:block; width:56px; height:3px; border-radius:3px; margin:.9rem auto 1rem; background:var(--gold); box-shadow:0 0 0 4px rgba(255,255,255,.12); }
.csite-hero-meta span{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); padding:.32rem .8rem; border-radius:999px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.csite-hero-cta.btn{ margin-top:.3rem; }

/* Section (main) card + title accent */
.csite-card{ transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.csite-page-title{ position:relative; padding-bottom:.6rem; margin-bottom:1.1rem; }
.csite-page-title::after{ content:""; position:absolute; left:0; bottom:0; width:44px; height:3px; border-radius:3px; background:var(--gold); }
.csite-main .csite-card :is(p,li){ color: var(--ink-soft,#3A4750); }
.csite-main .csite-card :is(h3,h4,h5){ color: var(--ink); }

/* Sidebar cards: subtle accent top-edge + gentle hover lift */
.csite-side-card{ position:relative; overflow:hidden; }
.csite-side-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; /* Fallback first: Safari <16.2 and Firefox <113 do not support color-mix(), and would otherwise drop the whole background and lose the accent edge. */ background:linear-gradient(90deg, var(--gold), var(--gold-soft, #d8c79a)); background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 55%, #ffffff)); opacity:.9; }
.csite-side-card{ transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.csite-side-card:hover{ box-shadow: 0 12px 28px -18px rgba(15,23,31,.5); }

/* 1 — Organizer block */
.csite-organizer{ text-align:center; }
.csite-organizer-logo{ max-width:78%; max-height:70px; object-fit:contain; margin:.2rem auto .6rem; display:block; }
.csite-organizer-name{ font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.35; }
/* v88.19: several organizers stack in one card, separated by a hairline rule
   rather than a whole new card, so the sidebar stays compact. */
.csite-organizer-item + .csite-organizer-item{ margin-top:.9rem; }
.csite-organizer-item-sep{ border-top:1px solid var(--border-soft,#EEF1F4); padding-top:.9rem; }

/* 3 — CFP poster */
.csite-cfp-poster{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--border-soft,#EEF1F4); margin-bottom:.7rem; }
.csite-cfp-poster img{ width:100%; display:block; transition: transform .35s var(--ease-out); }
.csite-cfp-poster:hover img{ transform: scale(1.03); }

/* 4 — Key dates: accent tick before each row */
.csite-dates li{ padding-left:.9rem; position:relative; }
.csite-dates li::before{ content:""; position:absolute; left:0; top:1.05em; width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* 5 — Venue */
.csite-venue-img{ width:100%; height:130px; object-fit:cover; border-radius:10px; margin-bottom:.7rem; }
.csite-venue-name{ font-weight:700; color:var(--ink); font-size:.92rem; margin-bottom:.2rem; }
.csite-venue-addr{ font-size:.85rem; color:var(--ink-soft,#3A4750); line-height:1.45; margin-bottom:.5rem; }

/* Nav: smoother active indicator */
.csite-nav-inner a{ transition: color .18s var(--ease-out), border-color .18s var(--ease-out); }
.csite-topbar{ transition: box-shadow .2s var(--ease-out); }

/* Sponsors grid refinement */
.csite-sponsor{ transition: border-color .15s var(--ease-out), transform .15s var(--ease-out); }
.csite-sponsor:hover{ border-color: var(--gold); transform: translateY(-1px); }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .csite-card, .csite-side-card, .csite-cfp-poster img, .csite-sponsor{ transition:none !important; }
}

/* ============================================================================
   v88.22 — Rule Book & Policies: canonical document tabs and reader
   ========================================================================== */

/* The two reference-document tabs (rule book + handbook) */
.doc-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  max-width:900px; margin:0 auto 1.4rem;
}
.doc-tab{
  display:flex; flex-direction:column; gap:.25rem;
  padding:1rem 1.15rem; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); text-decoration:none; color:var(--ink);
  box-shadow:0 1px 0 rgba(15,23,31,.02);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.doc-tab:hover{ border-color:#B9CEE0; box-shadow:0 10px 26px -18px rgba(11,95,160,.5); transform:translateY(-1px); text-decoration:none; color:var(--ink); }
.doc-tab.active{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset, 0 12px 30px -20px rgba(11,95,160,.6); }
.doc-tab-kicker{ font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); }
.doc-tab-title{ font-weight:700; font-size:1rem; line-height:1.3; }

/* Secondary policy pill row */
.policy-pills{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  justify-content:center; max-width:960px; margin:0 auto 1.6rem;
  padding-top:.9rem; border-top:1px solid var(--border-soft,#EEF1F4);
}
.policy-pills-label{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:.35rem; }
.policy-pill{
  font-size:.82rem; font-weight:600; padding:.32rem .8rem; border-radius:999px;
  border:1px solid var(--border); color:var(--ink); text-decoration:none; background:var(--surface);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.policy-pill:hover{ background:var(--gold-soft,#EAF1F8); border-color:#B9CEE0; text-decoration:none; color:var(--brand-dark,#0B5FA0); }
.policy-pill.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* The document reader */
.doc-reader{
  max-width:1060px; margin:0 auto; border:1px solid var(--border); border-radius:18px;
  background:var(--surface); overflow:hidden; box-shadow:0 24px 60px -40px rgba(15,23,31,.4);
}
.doc-reader-head{
  display:flex; gap:1.4rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  padding:1.6rem 1.8rem; background:linear-gradient(180deg,#F7FAFD,#fff);
  border-bottom:1px solid var(--border);
}
.doc-reader-head-main{ flex:1 1 380px; min-width:0; }
.doc-reader-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); margin-bottom:.3rem; }
.doc-reader-title{ font-size:1.4rem; font-weight:800; line-height:1.25; color:var(--ink); margin:0 0 .5rem; }
.doc-reader-blurb{ color:var(--muted); font-size:.92rem; line-height:1.55; margin:0 0 .7rem; max-width:60ch; }
.doc-reader-meta{ display:flex; align-items:center; gap:.7rem; }
.doc-badge{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em; color:#fff; background:var(--brand); padding:.16rem .55rem; border-radius:999px; }
.doc-reader-updated{ font-size:.8rem; color:var(--muted); }
.doc-reader-actions{ display:flex; flex-direction:column; gap:.5rem; align-items:stretch; flex:0 0 auto; }
.doc-reader-actions .btn{ white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }

.doc-reader-body{
  display:grid; grid-template-columns:250px 1fr; gap:0;
  align-items:start;
}
/* Sticky in-page contents */
.doc-toc{
  position:sticky; top:12px; align-self:start;
  padding:1.4rem 1rem 1.4rem 1.6rem; border-right:1px solid var(--border);
  max-height:calc(100vh - 24px); overflow:auto; font-size:.82rem;
}
.doc-toc-title{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.doc-toc ul{ list-style:none; margin:0; padding:0; }
.doc-toc li{ margin:.05rem 0; }
.doc-toc-part a{ font-weight:700; color:var(--ink); }
.doc-toc-part{ margin-top:.55rem; }
.doc-toc-sub a{ color:var(--muted); padding-left:.6rem; }
.doc-toc a{ display:block; text-decoration:none; padding:.2rem .4rem; border-radius:7px; border-left:2px solid transparent; line-height:1.35; }
.doc-toc a:hover{ background:var(--gold-soft,#EAF1F8); color:var(--brand-dark,#0B5FA0); }
.doc-toc a.active{ background:var(--gold-soft,#EAF1F8); color:var(--brand-dark,#0B5FA0); border-left-color:var(--brand); font-weight:700; }

/* Document body typography */
.doc-body{ padding:1.6rem 2rem 2.2rem; min-width:0; }
.doc-body h2.doc-h2{ font-size:1.2rem; font-weight:800; color:var(--brand); margin:1.8rem 0 .7rem; padding-bottom:.35rem; border-bottom:2px solid var(--border); scroll-margin-top:14px; }
.doc-body h2.doc-h2:first-child{ margin-top:0; }
.doc-body h3.doc-h3{ font-size:1.02rem; font-weight:700; color:var(--ink); margin:1.4rem 0 .5rem; scroll-margin-top:14px; }
.doc-body p{ font-size:.92rem; line-height:1.7; color:#28323C; margin:0 0 .8rem; }
.doc-lead{ font-style:italic; color:var(--muted) !important; border-left:3px solid var(--brand); padding-left:.9rem; }
.doc-body ul.doc-list{ margin:0 0 1rem; padding-left:1.1rem; }
.doc-body ul.doc-list li{ font-size:.92rem; line-height:1.65; color:#28323C; margin:.2rem 0; }
.doc-subhead{ font-weight:700; color:var(--ink); font-size:.9rem; margin:1rem 0 .4rem; }
.doc-subhead-ok{ color:#1F7A4D; }

/* Definition lists (glossary/roles/templates) */
.doc-defs{ margin:.3rem 0 1rem; }
.doc-defs dt{ font-weight:700; color:var(--brand); font-size:.9rem; margin-top:.6rem; }
.doc-defs dd{ margin:.1rem 0 0; padding-left:0; font-size:.9rem; line-height:1.6; color:#28323C; }

/* Purpose callout (handbook phases) */
.doc-purpose{ border-left:3px solid var(--brand); background:#F6FAFD; padding:.55rem .9rem; border-radius:0 8px 8px 0; font-size:.9rem !important; color:var(--muted) !important; font-style:italic; }
.doc-purpose span{ font-style:normal; font-weight:700; color:var(--brand); }

/* Checklists */
.doc-check{ margin:.6rem 0 1rem; }
.doc-check-label, .doc-body .doc-check-label{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#1F7A4D; margin-bottom:.3rem; }
ul.doc-checklist{ list-style:none; margin:.2rem 0 1rem; padding:0; }
ul.doc-checklist li{ position:relative; padding-left:1.6rem; margin:.28rem 0; font-size:.9rem; line-height:1.55; color:#28323C; }
ul.doc-checklist li::before{ content:"\2610"; position:absolute; left:0; top:-1px; color:#1F7A4D; font-size:1.05rem; }

/* Red-flag list */
ul.doc-flags{ list-style:none; margin:.4rem 0 1rem; padding:0; }
ul.doc-flags li{ position:relative; padding-left:1.6rem; margin:.28rem 0; font-size:.9rem; line-height:1.55; color:#28323C; }
ul.doc-flags li::before{ content:"\2717"; position:absolute; left:0; top:0; color:#B03A2E; font-weight:700; }

/* Tables inside the reader */
.doc-tablewrap{ overflow-x:auto; margin:.4rem 0 1.2rem; }
table.doc-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.doc-table th{ text-align:left; font-weight:700; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); background:#EAF1F8; padding:.5rem .7rem; border-bottom:2px solid var(--border); }
table.doc-table td{ padding:.5rem .7rem; border-bottom:1px solid var(--border); color:#28323C; vertical-align:top; line-height:1.5; }
table.doc-table tbody tr:nth-child(even){ background:#F7FAFC; }

/* Responsive: collapse the TOC on small screens */
@media (max-width: 860px){
  .doc-tabs{ grid-template-columns:1fr; }
  .doc-reader-body{ grid-template-columns:1fr; }
  .doc-toc{ position:static; max-height:none; border-right:none; border-bottom:1px solid var(--border); }
  .doc-reader-actions{ flex-direction:row; flex-wrap:wrap; }
}

/* v88.23 — bot honeypot: hide the decoy field from real users every way that
   matters (off-screen, zero-size, not clickable). Bots that read the DOM still
   see it and fill it. */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ==========================================================================
   v88.29 — "Your workspaces" hub: every venue×role the member holds, grouped
   by role and selectable straight into its console. Operate-mode: built for a
   fast scan across many memberships, on the app's existing card/token system.
   ========================================================================== */
.ws-group{ margin-bottom: 1.6rem; }
.ws-group-head{
  display:flex; align-items:baseline; gap:.5rem; margin:0 0 .7rem;
}
.ws-group-title{
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin:0;
}
.ws-group-count{
  font-size: .72rem; font-weight: 600; color: var(--muted);
  background: var(--border-soft); border-radius: 999px; padding: .05rem .5rem;
}
.ws-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: .85rem;
}
.ws-card{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .95rem 1rem 1rem; box-shadow: var(--shadow-card);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .16s var(--ease-out);
}
.ws-card:hover{ border-color: var(--brand); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.ws-card-top{ display:flex; align-items:center; gap:.55rem; }
.ws-glyph{
  flex:0 0 auto; width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background: var(--brand-soft); color: var(--brand);
}
.ws-glyph svg{ width:18px; height:18px; }
.ws-role{ font-size:.72rem; font-weight:700; letter-spacing:.02em; color: var(--ink-soft); text-transform:uppercase; }
.ws-type-chip{
  display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color: var(--muted); border:1px solid var(--border); border-radius:999px; padding:.03rem .42rem; margin-top:.15rem;
}
.ws-venue{ font-weight:700; color: var(--ink); line-height:1.25; font-size:.98rem; }
.ws-venue-short{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.72rem; color: var(--muted); }
.ws-stat{ font-size:.82rem; color: var(--muted); margin-top:-.1rem; }
.ws-stat strong{ color: var(--ink); font-weight:700; }
.ws-stat .ws-flag{ color: var(--brand); font-weight:700; }
.ws-card form{ margin-top:auto; }
.ws-open{ width:100%; }
/* Whole card is the click target; the button stays the visible affordance and
   keeps keyboard focus. */
.ws-card .ws-stretch::after{ content:""; position:absolute; inset:0; border-radius:var(--radius); }
@media (max-width: 480px){
  .ws-grid{ grid-template-columns: 1fr; }
}

/* Author-console venue switcher: hop between the venues you author at without
   leaving the submissions view. */
.venue-switch{
  display:flex; align-items:center; gap:.6rem 1rem; flex-wrap:wrap;
  background: var(--brand-soft); border-radius: var(--radius); padding: .55rem .8rem;
}
.venue-switch-label{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--brand);
}
.venue-switch-pills{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.venue-switch-pills form{ margin:0; }
.venue-pill{
  display:inline-block; font-size:.8rem; font-weight:600; line-height:1;
  padding:.4rem .7rem; border-radius:999px; cursor:pointer;
  background: var(--surface); color: var(--ink-soft); border:1px solid var(--border);
  transition: border-color .15s var(--ease-out), color .15s var(--ease-out), background .15s var(--ease-out);
  text-decoration:none;
}
.venue-pill:hover{ border-color: var(--brand); color: var(--brand); }
.venue-pill.is-current{ background: var(--brand); border-color: var(--brand); color:#fff; cursor:default; }
.venue-pill-all{ background:transparent; border-style:dashed; }

/* ==========================================================================
   v88.32 — My Federation Page: a proper member identity surface.
   ========================================================================== */
.fed-idcard{
  position:relative; overflow:hidden; border:1px solid var(--border); border-radius:14px;
  background: var(--surface); box-shadow: var(--shadow-card); margin-bottom:1rem;
}
.fed-idcard-band{
  height:96px; background:
    radial-gradient(120% 160% at 12% -10%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(120deg, var(--brand) 0%, #0a5a92 55%, #063f6b 100%);
}
.fed-idcard-body{ padding: 0 1.5rem 1.4rem; }
.fed-avatar{
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:4px solid var(--surface); background: var(--brand-soft);
  margin-top:-52px; box-shadow: 0 3px 10px rgba(15,23,31,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:2.3rem; font-weight:800; color: var(--brand);
}
.fed-name{ font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1.15; margin:.6rem 0 .1rem; }
.fed-sub{ color:var(--muted); font-size:.9rem; }
.fed-chips{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.fed-id-chip{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.82rem; font-weight:600;
  background: var(--ink); color:#fff; border-radius:999px; padding:.22rem .7rem; letter-spacing:.02em;
}
.fed-tier{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background: var(--gold-soft); color: var(--brand); border-radius:999px; padding:.24rem .6rem;
}
.fed-meta-row{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.7rem; font-size:.85rem; color:var(--ink-soft); }
.fed-meta-row a{ color: var(--brand); }
.fed-stats{ display:grid; grid-template-columns: repeat(5, 1fr); gap:.7rem; margin-bottom:1rem; }
.fed-stats .stat-card{ margin:0; }
.fed-stats .stat-num{ font-size:1.7rem; }
@media (max-width: 680px){ .fed-stats{ grid-template-columns: repeat(2, 1fr); } }
.fed-complete{ display:flex; align-items:center; gap:1rem; }
.fed-ring{ --pct:0; flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  background: conic-gradient(var(--brand) calc(var(--pct)*1%), var(--border-soft) 0);
  display:flex; align-items:center; justify-content:center; }
.fed-ring span{ width:48px;height:48px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:var(--ink); }
.fed-person{ display:flex; align-items:center; gap:.55rem; padding:.35rem 0; }
.fed-person-av{ width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex:0 0 auto; }

/* ==========================================================================
   v88.32 — Preprint page: a real preprint-server feel.
   ========================================================================== */
.pre-hero{
  position:relative; overflow:hidden; border-radius:16px; margin-bottom:1.75rem;
  padding: 2.6rem 1.5rem; text-align:center; color:#fff;
  background:
    radial-gradient(130% 150% at 85% -20%, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(125deg, #0a5a92 0%, var(--brand) 45%, #0a6fb0 100%);
}
.pre-hero .eyebrow{ color: rgba(255,255,255,.85); }
.pre-hero h1{ color:#fff; font-size:2.3rem; font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,.25); margin:.3rem 0 .6rem; }
.pre-hero p{ color:#eaf3fb; }
.pre-notpr{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.4rem;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  color:#fff; border-radius:999px; padding:.3rem .8rem; font-size:.8rem; font-weight:600;
}
.pre-hero-stats{ display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:1.3rem; }
.pre-hero-stat b{ display:block; font-size:1.5rem; font-weight:800; line-height:1; }
.pre-hero-stat span{ font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.8); }
.pre-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
@media (max-width: 720px){ .pre-steps{ grid-template-columns: 1fr; } .pre-hero-stats{ gap:1.3rem; } }
.pre-step{ text-align:center; padding:1.2rem 1rem; }
.pre-step-n{ width:38px;height:38px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto .6rem; }
.pre-paper{ border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow-card); padding:1.15rem 1.25rem; margin-bottom:.9rem;
  transition: box-shadow .16s var(--ease-out), transform .16s var(--ease-out); }
.pre-paper:hover{ box-shadow:var(--shadow-hover); transform: translateY(-2px); }
.pre-paper-title{ font-size:1.06rem; font-weight:700; color:var(--ink); margin:0 0 .2rem; }
.pre-tag{ display:inline-block; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background: var(--gold-soft); color: var(--brand); border-radius:4px; padding:.1rem .4rem; vertical-align:middle; margin-left:.4rem; }
.pre-meta{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.8rem; color:var(--muted); margin:.4rem 0; }
.pre-doi{ font-family:'JetBrains Mono', ui-monospace, monospace; }
.pre-collection{ display:flex; flex-direction:column; }
.pre-collection .pre-col-icon{ width:36px;height:36px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:.6rem; }

/* ==========================================================================
   v88.33 — Public conference Program: a clean, scannable schedule with
   optional per-track columns.
   ========================================================================== */
.prog-tznote{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--muted);
  background: var(--brand-soft); border-radius:999px; padding:.28rem .8rem; }
.prog-day-head{ display:flex; align-items:baseline; gap:.6rem; margin:1.6rem 0 .8rem; padding-bottom:.4rem;
  border-bottom:2px solid var(--border); }
.prog-day-n{ font-size:1.3rem; font-weight:800; color:var(--ink); }
.prog-day-date{ color:var(--muted); font-size:.9rem; }
.prog-tracks{ display:grid; grid-template-columns: repeat(var(--cols,1), minmax(0,1fr)); gap:1rem; }
@media (max-width: 760px){ .prog-tracks{ grid-template-columns: 1fr; } }
.prog-track-head{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--brand); background:var(--brand-soft); border-radius:6px; padding:.35rem .6rem; margin-bottom:.6rem; text-align:center; }
.prog-session{ position:relative; border:1px solid var(--border); border-left:3px solid var(--brand);
  border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-card); padding:.85rem 1rem; margin-bottom:.7rem; }
.prog-session.is-keynote{ border-left-color: var(--gold); background: linear-gradient(0deg, var(--surface), var(--gold-soft)); }
.prog-session.is-break{ border-left-color: var(--border); background: var(--paper-bg); box-shadow:none; }
.prog-session-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; }
.prog-time{ flex:0 0 auto; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.82rem; font-weight:600;
  color:var(--ink); background:var(--border-soft); border-radius:6px; padding:.16rem .5rem; white-space:nowrap; }
.prog-type{ display:inline-block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-radius:4px; padding:.08rem .38rem; margin-bottom:.25rem; }
.prog-type.k{ background:var(--gold-soft); color:var(--brand); }
.prog-type.b{ background:var(--border); color:var(--muted); }
.prog-title{ font-size:.98rem; font-weight:700; color:var(--ink); margin:0 0 .1rem; }
.prog-chair{ font-size:.82rem; color:var(--muted); }
.prog-papers{ list-style:none; padding:0; margin:.5rem 0 0; }
.prog-papers li{ padding:.35rem 0; border-top:1px solid var(--border-soft); font-size:.88rem; color:var(--ink); }
.prog-papers .paper-code{ margin-right:.35rem; }
.prog-papers .muted{ font-size:.8rem; }


/* ==========================================================================
   v88.42 - full-width hero
   The home/about hero used to sit inside the centered 1180px page column,
   leaving white margins each side on wide screens. This pulls it out to the
   real viewport edges (same full-bleed treatment as the Publishing module's
   banner), while the text inside stays centered on the page column.
   ========================================================================== */
body{ overflow-x: clip; } /* the 50vw pull below can overhang by a scrollbar width - never show a horizontal scrollbar for it */
.hero-fullbleed{
  margin: -1.75rem calc(50% - 50vw) 0;
}

/* ==========================================================================
   v88.52 — .page-hero: the full-bleed page header used by the About landing
   page and the Digital Library finder, made into a reusable class so any
   page can wear the same header instead of the inset blue card. Same
   ingredients everywhere: the brand artwork behind a dark gradient, a gold
   eyebrow, an italic gold phrase inside the heading, then a stat row.
   ========================================================================== */
.page-hero{
  width: 100vw;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  margin-top: -1.75rem;
  margin-bottom: 2.5rem;
  padding: 4rem 1.5rem;
  color: #fff;
  background-image:
    linear-gradient(rgba(11,42,74,.62), rgba(8,20,40,.80)),
    url('../img/hero-bg.svg');
  background-size: cover;
  background-position: center;
}
.page-hero-inner{ max-width: 900px; margin: 0 auto; text-align: center; }
/* On this dark navy panel the brand blue (which --gold aliases platform-wide)
   would sit blue-on-blue, so the hero accents use a true gold - the same
   warm accent the Digital Library hero uses - scoped to this block only, so
   nothing else in the blue system is disturbed. */
.page-hero{ --hero-accent: #dcc07f; }
.page-hero .eyebrow{ color: var(--hero-accent); }
.page-hero h1{
  font-size: 2.6rem; font-weight: 700; line-height: 1.2;
  margin: .5rem 0 1rem; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.page-hero h1 em{ font-style: italic; font-weight: 400; color: var(--hero-accent); }
.page-hero .page-hero-lead{
  font-size: 1.1rem; color: #eef1f4; max-width: 660px; margin: 0 auto 1.75rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.page-hero-stats{ display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.page-hero-stat{ text-align: center; }
.page-hero-stat .ic{ color: var(--hero-accent); margin-bottom: .15rem; }
.page-hero-stat b{
  display: block; font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.page-hero-stat span{ font-size: .8rem; color: #dfe4ea; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.page-hero-note{ font-size: .82rem; color: #c8ccd1; margin: 1.25rem auto 0; max-width: 620px; }
@media (max-width: 720px){
  .page-hero{ padding: 2.75rem 1.25rem; }
  .page-hero h1{ font-size: 1.9rem; }
  .page-hero-stats{ gap: 1.5rem; }
}

/* ===== v88.43 - Preprints landing page upgrade ===== */
.pre-sla{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:.3rem .8rem; }
.pre-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width: 900px){ .pre-why{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .pre-why{ grid-template-columns:1fr; } }
.pre-why-card{ padding:1.15rem 1.1rem; }
.pre-why-card .pw-ic{ width:38px; height:38px; border-radius:10px; background:var(--brand-soft);
  color:var(--brand); display:inline-flex; align-items:center; justify-content:center; margin-bottom:.6rem; }
.pre-why-card h6{ font-weight:800; color:var(--ink); font-size:.95rem; margin-bottom:.25rem; }
.pre-why-card p{ font-size:.84rem; color:var(--muted); margin:0; }
.pre-why-card.pw-star{ border:1.5px solid var(--brand); box-shadow:0 8px 22px rgba(11,107,171,.12); position:relative; }
.pre-why-card.pw-star .pw-flag{ position:absolute; top:-10px; right:12px; font-size:.62rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; background:var(--brand); color:#fff; border-radius:999px; padding:2px 9px; }
.pre-policy{ border-left:3px solid var(--brand-soft); padding:.15rem 0 .15rem 1rem; margin-bottom:1.1rem; }
.pre-policy h6{ font-weight:800; color:var(--ink); font-size:.92rem; margin-bottom:.3rem; }
.pre-policy p, .pre-policy li{ font-size:.86rem; color:var(--muted); }
.pre-policy ul{ padding-left:1.1rem; margin-bottom:.2rem; }
.pre-check li{ margin-bottom:.3rem; }
.pre-types{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pre-type{ font-size:.78rem; font-weight:600; background:var(--brand-soft); color:var(--brand);
  border-radius:999px; padding:.25rem .7rem; }
.pre-type.no{ background:#f6e3e3; color:#8a2c2c; text-decoration:line-through; text-decoration-thickness:1px; }
.pre-tpl{ display:flex; gap:1rem; align-items:center; border:1.5px dashed var(--brand);
  border-radius:12px; padding:1rem 1.1rem; background:var(--brand-soft); }
.pre-tpl .pt-ic{ width:44px; height:44px; flex:none; border-radius:11px; background:#fff; color:var(--brand);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(11,107,171,.15); }
.pre-faq details{ border:1px solid var(--border-soft); border-radius:10px; padding:.7rem 1rem; margin-bottom:.5rem; background:#fff; }
.pre-faq summary{ cursor:pointer; font-weight:700; font-size:.9rem; color:var(--ink); }
.pre-faq p{ font-size:.86rem; color:var(--muted); margin:.5rem 0 0; }
.pre-journey{ display:flex; align-items:center; justify-content:center; gap:.4rem; flex-wrap:wrap; font-size:.8rem; font-weight:700; }
.pre-journey .pj{ background:#fff; border:1px solid var(--border-soft); border-radius:999px; padding:.35rem .85rem; color:var(--ink); }
.pre-journey .pj.hot{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pre-journey svg{ color:var(--muted); }