/* ==========================================================================
   USSS | United States Secret Service
   Design system — "Credential"

   Direction: the visual language of secure documents and agency credentials.
   Cool navy and paper-white instead of warm cream; a condensed institutional
   grotesque (Archivo) for display instead of an editorial serif; monospace
   reserved for data, status, and clearance labels.
   ========================================================================== */

:root{
  /* --- Core palette --- */
  --midnight:  #0A1729;   /* deepest navy — nav, footer, dark bands   */
  --slate:     #14283F;   /* elevated navy surface                    */
  --fog:       #F4F6FA;   /* cool page background                     */
  --paper:     #FFFFFF;   /* card / panel surface                     */
  --seal:      #E89000;   /* the gold off the group badge             */
  --seal-deep: #945C00;   /* that gold, dark enough to read on white  */
  --seal-pale: #EFAC3E;   /* that gold, light enough to read on navy  */
  --verified:  #1F7A6B;   /* status / secondary accent                */
  --alert:     #B3432F;   /* destructive / errors                     */

  /* --- Neutral ramp --- */
  --n-100: #EDF0F6;
  --n-200: #DFE4EE;
  --n-300: #C4CCDB;
  --n-500: #5B6880;
  --n-700: #3A4457;

  /* --- Semantic (light) --- */
  --bg:            var(--fog);
  --surface:       var(--paper);
  --surface-alt:   var(--n-100);
  --surface-sunken:#E9EDF5;
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --text-primary:  #101828;
  --text-muted:    var(--n-700);
  --text-subtle:   var(--n-500);

  /* --- Legacy aliases (referenced by inline styles in the HTML) --- */
  --ink:        var(--midnight);
  --ink-soft:   var(--slate);
  --cloud:      var(--bg);
  --cloud-dim:  var(--surface-alt);
  --white:      var(--surface);
  --line:       var(--border);
  --steel:      var(--text-subtle);
  --gold:       var(--seal);
  --gold-dark:  var(--seal-deep);
  --gold-light: var(--seal-pale);
  --teal:       var(--verified);

  /* --- Type --- */
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* --- Elevation --- */
  /* Tighter and shorter-throw than before. A wide soft shadow makes a card
     float; a short one makes it sit on the page like something printed and
     filed. The border does the separating work now, not the blur. */
  --shadow-sm: 0 1px 2px rgba(10,23,41,0.05), 0 1px 3px rgba(10,23,41,0.06);
  --shadow-md: 0 4px 12px -2px rgba(10,23,41,0.09), 0 2px 6px -2px rgba(10,23,41,0.05);
  --shadow-lg: 0 16px 40px -12px rgba(10,23,41,0.20), 0 6px 16px -6px rgba(10,23,41,0.10);
  --shadow-xl: 0 32px 64px -20px rgba(10,23,41,0.32);

  /* --- Type scale ---
     A real scale instead of ad-hoc clamps, so headings on different pages
     relate to each other. 1.25 ratio off a 16px base. */
  --fs-xs:   0.72rem;
  --fs-sm:   0.84rem;
  --fs-base: 1rem;
  --fs-md:   1.12rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.2rem;
  --fs-3xl:  2.75rem;

  /* Hairline rules. A 1px border at full strength is heavier than it looks
     against a light ground; these are the two weights used site-wide. */
  --rule:        1px solid var(--border);
  --rule-strong: 1px solid var(--border-strong);

  /* --- Geometry ---
     Sharpened in the v198 pass. Soft corners read as consumer software; this
     is meant to read as a credentialing system, where the corner is a cut
     edge rather than a rounded one. Small enough to be crisp, not zero —
     a true 0 looks like an unstyled element rather than a deliberate one. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --radius: var(--r-sm);
  /* Scaled by the zoom control (theme-toggle.js sets --zoom-factor). The
     reading column has to widen and narrow with the type, or zooming out
     leaves a thin ribbon of text stranded in the middle of a wide screen. */
  --zoom-factor: 1;
  --max-width: calc(1180px * var(--zoom-factor));

  color-scheme: light;
}

:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:            #0B1220;
  --surface:       #141C2B;
  --surface-alt:   #1B2536;
  --surface-sunken:#1E2938;
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);
  --text-primary:  #EEF1F7;
  --text-muted:    #B9C2D2;
  --text-subtle:   #98A3B6;

  /* Accents have to lighten on dark surfaces — the light-mode teal and red
     both fall under a 3.3:1 ratio here, which is unreadable as text. */
  --seal-deep: #EEA42B;
  --verified:  #3FBFA8;
  --alert:     #FF8A73;

  --n-100: #1B2536;
  --n-200: #232E42;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 14px -2px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.60);
  --shadow-xl: 0 32px 64px -20px rgba(0,0,0,0.70);
}

/* ==========================================================================
   Base
   ========================================================================== */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; min-height: 100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  /* 1rem, NOT 16px. This was the one hardcoded font-size in the stylesheet,
     against 460 rem ones, and it pinned every piece of plain body text out of
     the scaling — including the reader's own zoom control, which has never
     moved this text. In rem it follows the root like everything else. */
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.25s ease, color 0.25s ease;

  /* Sticky footer: on short pages the footer would otherwise stop mid-screen
     and leave the page background showing beneath it. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Absorbs any leftover vertical space, pinning the footer to the bottom. */
.site-footer{ margin-top: auto; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.4em 0;
  letter-spacing: -0.021em;
  line-height: 1.15;
}

p{ margin: 0 0 1em 0; color: var(--text-muted); }
a{ color: inherit; }

::selection{ background: var(--seal); color: var(--midnight); }

/* Eyebrow — a clearance-label device: mono, tracked out, small */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seal-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1em;
}
.eyebrow::before{
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

section{ padding: 88px 0; }

.section-head{ max-width: 660px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.section-head p{ font-size: 1.02rem; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--verified);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   Disclaimer bar
   ========================================================================== */

.disclaimer-bar{
  background: #060F1C;
  color: rgba(255,255,255,0.62);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.685rem;
  letter-spacing: 0.035em;
  line-height: 1.5;
  padding: 9px 20px;
  font-weight: 400;
  border-bottom: 1px solid rgba(232,144,0,0.22);
}
.disclaimer-bar strong{
  text-transform: uppercase;
  font-weight: 500;
  color: var(--seal);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Public site header / nav
   ========================================================================== */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,23,41,0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 15px 32px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  text-decoration: none;
}
.brand-mark{
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.2; }
.brand-text .brand-sub{
  font-family: var(--font-mono);
  font-size: 0.575rem;
  font-weight: 400;
  color: var(--seal-pale);
  letter-spacing: 0.13em;
  margin-top: 2px;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a{
  position: relative;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 7px 0;
  transition: color 0.16s ease;
}
.nav-links a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--seal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover, .nav-links a:focus-visible{ color: #FFFFFF; }
.nav-links a:hover::after{ transform: scaleX(1); }
.nav-links a[aria-current="page"]{ color: #FFFFFF; }
.nav-links a[aria-current="page"]::after{ transform: scaleX(1); }

.login-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--seal);
  color: var(--midnight) !important;
  font-weight: 650;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  padding: 9px 17px;
  border-radius: var(--r-sm);
  text-decoration: none !important;
  transition: background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.login-btn::after{ display: none !important; }
.login-btn:hover{ background: var(--seal-pale); box-shadow: 0 4px 12px -2px rgba(232,144,0,0.4); }
.login-btn:active{ transform: translateY(1px); }
.login-btn svg{ width: 14px; height: 14px; }

.nav-toggle{
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--r-sm);
  color: #FFFFFF;
  padding: 8px 11px;
  font-size: 1rem;
  cursor: pointer;
}

/* ==========================================================================
   Route line — dispatch-path divider between sections
   ========================================================================== */

.route-line{
  position: relative;
  height: 58px;
  margin: 0 auto;
  max-width: var(--max-width);
}
.route-line svg{ width: 100%; height: 100%; display: block; }
.route-line path{
  stroke: var(--border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 5 8;
  fill: none;
  opacity: 0.7;
}
.route-line circle{ fill: var(--seal); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  padding: 104px 0 76px;
  position: relative;
  overflow: hidden;
}
.hero-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}
.hero h1{
  font-size: clamp(2.4rem, 4.6vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 14ch;
}
.hero .lede{
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 50ch;
  color: var(--text-muted);
}
.hero-actions{ display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.925rem;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.16s ease,
              border-color 0.16s ease, box-shadow 0.16s ease;
}
.btn-primary{
  background: var(--midnight);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ background: var(--slate); box-shadow: var(--shadow-md); }

/* In dark mode a midnight fill vanishes against a midnight page (1.05:1),
   so the primary action switches to the brand gold. */
:root[data-theme="dark"] .btn-primary{
  background: var(--seal);
  color: var(--midnight);
}
:root[data-theme="dark"] .btn-primary:hover{ background: var(--seal-pale); }
.btn-ghost{
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-ghost:hover{ border-color: var(--text-subtle); background: var(--surface-alt); }
.btn:active{ transform: translateY(1px); }

/* ==========================================================================
   Dispatch panel — live duty board in the hero
   ========================================================================== */

.dispatch-panel{
  background: linear-gradient(160deg, var(--slate) 0%, var(--midnight) 100%);
  border-radius: var(--r-lg);
  padding: 8px 22px;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.79rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,0.08);
}
.dispatch-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dispatch-row:last-child{ border-bottom: none; }
.dispatch-status{
  color: var(--seal-pale);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.dispatch-status::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(246,232,107,0.15);
}
.dispatch-status.pending{ color: rgba(255,255,255,0.48); }
.dispatch-status.pending::before{ box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }

/* ==========================================================================
   Grids & cards
   ========================================================================== */

.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card h3{ font-size: 1.1rem; letter-spacing: -0.018em; }
.card .tag{
  font-family: var(--font-mono);
  font-size: 0.665rem;
  font-weight: 500;
  color: var(--verified);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  display: block;
  margin-bottom: 10px;
}
a.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Dark band section */
.band{
  background: var(--midnight);
  color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232,144,0,0.07), transparent 70%);
}
.band h2, .band p{ color: #FFFFFF; }
.band .section-head p{ color: rgba(255,255,255,0.66); }
.band .eyebrow{ color: var(--seal-pale); }

.stat{
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--seal);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label{
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

/* ==========================================================================
   Leadership
   ========================================================================== */

.person-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.person-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.person-photo{
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  background: linear-gradient(155deg, var(--slate), var(--midnight));
  position: relative;
}
.person-body{ padding: 20px 22px 24px; }
.person-body h3{ font-size: 1.02rem; margin-bottom: 4px; letter-spacing: -0.018em; }
.person-role{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--seal-deep);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  line-height: 1.5;
  display: block;
}
.person-body p{ font-size: 0.9rem; margin-bottom: 0; }

/* ==========================================================================
   Recruitment steps — a real sequence, so numbering is meaningful
   ========================================================================== */

.steps{ display: flex; flex-direction: column; }
.step{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.step:last-child{ border-bottom: 1px solid var(--border); }
.step-num{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--seal-deep);
  padding-top: 5px;
}
.step-num span{
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.step-content h3{ font-size: 1.18rem; margin-bottom: 8px; }
.step-meta{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 12px;
  display: inline-block;
}

.requirements{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 30px 32px;
  box-shadow: var(--shadow-sm);
}
.requirements ul{ margin: 0; padding-left: 20px; }
.requirements li{ margin-bottom: 11px; color: var(--text-muted); }

/* ==========================================================================
   Login page
   ========================================================================== */

.login-page{
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}
.login-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 42px 40px;
  width: 100%;
  max-width: 412px;
  box-shadow: var(--shadow-lg);
}
.login-mark{
  width: 46px; height: 46px;
  margin-bottom: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.login-card h1{ font-size: 1.45rem; margin-bottom: 6px; }
.login-card .sub{ font-size: 0.9rem; margin-bottom: 30px; color: var(--text-subtle); }

.field{ margin-bottom: 18px; }
.field label{
  display: block;
  font-size: 0.815rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--text-muted);
}
.field input{
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.94rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.field input:focus{
  outline: none;
  border-color: var(--verified);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(31,122,107,0.14);
}
.login-submit{ width: 100%; justify-content: center; margin-top: 8px; }

/* Two-step sign-in indicator */
.login-steps{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  gap: 8px;
}
.login-steps li{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding-top: 9px;
  border-top: 2px solid var(--border);
}
.login-steps li.active{
  color: var(--text-primary);
  border-top-color: var(--seal);
}
.login-steps li span{
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  flex-shrink: 0;
}
.login-steps li.active span{ background: var(--seal); color: var(--midnight); font-weight: 700; }
.login-note{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--text-subtle);
}
.login-recovery{
  margin: 10px 0 0;
  font-size: 0.74rem;
}
.login-recovery a{
  color: var(--text-subtle);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-recovery a:hover{ color: var(--text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background: var(--midnight);
  color: rgba(255,255,255,0.55);
  padding: 44px 0;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.site-footer .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer a{ color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.16s ease; }
.site-footer a:hover{ color: #FFFFFF; }
.footer-links{ display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
.footer-disclaimer{
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.52);
  margin-top: 16px;
  max-width: 76ch;
}

/* ==========================================================================
   Private staff area
   ========================================================================== */

.staff-header{
  background: var(--midnight);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.staff-header .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.staff-header .brand{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.04rem;
  letter-spacing: -0.015em;
  color: #FFFFFF; text-decoration: none;
}
.staff-header-actions{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.staff-header-actions a{
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.16s ease;
}
.staff-header-actions a:hover{ color: #FFFFFF; }

/* Clearance chip */
.role-badge{
  font-family: var(--font-mono);
  font-size: 0.665rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--midnight);
  background: var(--seal);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.unauthorized-box{
  max-width: 480px;
  margin: 72px auto;
  text-align: center;
  padding: 44px 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Tables (Executive Portal)
   ========================================================================== */

/* A wide table must scroll inside its own box. Left to overflow the page, it
   pushes scrollWidth past the viewport, and every full-bleed bar on the page
   (header, classification banner, nav) is only as wide as the viewport — so
   they stop short and leave a strip of bare background down the right. Same
   pattern as .db-table-wrap in E-Manage. */
.staff-table-wrap{
  overflow-x: auto;
  border-radius: var(--r-md);
}

.staff-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.staff-table th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.665rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  white-space: nowrap;
}
.staff-table td{
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.89rem;
  color: var(--text-muted);
  vertical-align: middle;
}
.staff-table tr:last-child td{ border-bottom: none; }
.staff-table select{
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text-primary);
}
.staff-table .remove-btn{
  background: none; border: none;
  color: var(--alert);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 2px 0;
}
.staff-table .remove-btn:hover{ text-decoration: underline; }

.add-staff-form-4{ grid-template-columns: 1fr 1fr 1fr auto; }
.link-ok{ color: var(--verified); font-weight: 600; }
.link-pending{ color: var(--text-subtle); }

.add-staff-form{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.add-staff-form .field{ margin-bottom: 0; }
.add-staff-form label{
  display: block; font-size: 0.8rem; font-weight: 600;
  margin-bottom: 7px; color: var(--text-muted);
}
.add-staff-form input, .add-staff-form select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* ==========================================================================
   Leadership editor (Executive Portal)
   ========================================================================== */

.leader-preview-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 18px;
}
.leader-preview-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease;
}
.leader-preview-card:hover{ box-shadow: var(--shadow-md); }
.leader-preview-photo{
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(155deg, var(--slate), var(--midnight));
}
.leader-preview-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.leader-preview-body{ padding: 14px 16px 12px; }
.leader-preview-body h4{
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 3px;
  color: var(--text-primary);
}
.leader-preview-role{ font-size: 0.76rem; color: var(--text-subtle); line-height: 1.45; }
.leader-preview-actions{ display: flex; gap: 8px; padding: 0 16px 16px; }
.leader-preview-actions button{
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.16s ease, color 0.16s ease;
}
.leader-preview-actions button:hover{ border-color: var(--verified); color: var(--verified); }
.leader-preview-actions button.danger:hover{ border-color: var(--alert); color: var(--alert); }

.leader-add-card{
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  color: var(--text-subtle);
  font-family: var(--font-body);
  font-size: 0.87rem;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.leader-add-card:hover{ border-color: var(--verified); color: var(--verified); background: var(--surface-alt); }

.upload-row{ display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap: wrap; }
.upload-row input[type="file"]{ font-size: 0.8rem; color: var(--text-muted); }
.leader-modal-preview{
  width: 100%;
  height: 165px;
  border-radius: var(--r-sm);
  background: linear-gradient(155deg, var(--slate), var(--midnight));
  display: flex; align-items:center; justify-content:center;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  overflow: hidden;
  margin-top: 8px;
}
.leader-modal-preview img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Boards
   ========================================================================== */

.board-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.board-status{
  font-family: var(--font-mono);
  font-size: 0.735rem;
  letter-spacing: 0.03em;
  margin: 0 16px 20px 0;
  display: inline-block;
  color: var(--text-muted);
}

/* The board is a canvas, not an article — it spans the full viewport rather
   than the narrower reading column the rest of the site uses. */
.wrap-board{
  max-width: none;
  padding: 0 32px;
}
.board-lists{
  display: flex;
  gap: 22px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 20px;
}
.board-list{
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  width: 310px;
  flex: 0 0 310px;
  border-top: 3px solid var(--seal);
  box-shadow: var(--shadow-sm);
}
.board-list-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 13px;
}
.board-list-title input{
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  width: 100%;
  padding: 2px 0;
}
.board-list-title input:focus{ outline: 1px solid var(--verified); border-radius: 3px; }
.board-cards{
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 10px;
}

/* Cards stay dark in both themes — they read as field-issued materials */
.board-card{
  background: #101722;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  text-align: left;
  transition: background 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.board-card:hover{
  background: #18202D;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.55);
}
.board-card.dragging{ opacity: 0.4; cursor: grabbing; transform: none; }
.board-card-cover{
  width: 100%;
  display: block;
  max-height: 160px;
  object-fit: cover;
}
.board-card-body{ padding: 14px 16px 15px; }
.board-card-label{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.665rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  margin-bottom: 7px;
}
.board-card-title{
  font-size: 0.965rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #FFFFFF;
  line-height: 1.4;
}
.board-card-desc{ font-size: 0.8rem; color: rgba(255,255,255,0.66); }
.board-card-hint{
  font-family: var(--font-mono);
  font-size: 0.655rem;
  color: rgba(255,255,255,0.38);
  margin-top: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Header cards — full-bleed image with title overlay */
.board-header-card{
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  min-height: 112px;
  background: linear-gradient(150deg, var(--slate) 0%, var(--midnight) 100%);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.board-header-card-overlay{
  width: 100%;
  padding: 17px 16px 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.018em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  background: linear-gradient(180deg, rgba(10,23,41,0) 0%, rgba(10,23,41,0.82) 100%);
}

.board-add-card, .board-add-list{
  background: none;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.845rem;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 10px;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.board-add-card:hover, .board-add-list:hover{ border-color: var(--verified); color: var(--verified); }
.board-add-list-wrap{ min-width: 264px; flex: 0 0 264px; }

/* --- Rendered rich text --- */
.board-card-desc .board-h1{ display:block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #FFFFFF; margin-top: 2px; }
.board-card-desc .board-h2{ display:block; font-family: var(--font-display); font-size: 0.96rem; font-weight: 700; color: #FFFFFF; }
.board-card-desc .board-h3{ display:block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--seal-deep); }
.board-card-desc{ max-height: 4.6em; overflow: hidden; }
.board-card-desc .board-hr{ border-top-color: rgba(255,255,255,0.15); margin: 8px 0; }

.board-preview{
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  background: var(--surface-sunken);
  font-size: 0.88rem;
  min-height: 40px;
  margin-top: 8px;
  color: var(--text-muted);
}
.board-preview .board-h1{ display:block; font-family: var(--font-display); font-size: 1.24rem; font-weight: 700; letter-spacing: -0.022em; color: var(--text-primary); margin: 4px 0 2px; }
.board-preview .board-h2{ display:block; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.018em; color: var(--text-primary); margin: 4px 0 2px; }
.board-preview .board-h3{ display:block; font-family: var(--font-mono); font-size: 0.755rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--seal-deep); margin: 6px 0 2px; }
.board-preview .board-h4{ display:block; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--text-primary); }
.board-preview .board-h5{ display:block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
.board-preview .board-h6{ display:block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-subtle); }
.board-preview blockquote.board-quote{
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--seal);
  background: var(--surface-alt);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-muted);
  font-style: italic;
}
.board-preview ul, .board-preview ol{ margin: 8px 0; padding-left: 22px; }
.board-preview li{ margin-bottom: 4px; }
.board-preview code.board-inline-code{
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text-primary);
}
.board-preview a{ color: var(--verified); text-decoration: underline; text-underline-offset: 2px; }

.board-hr{ border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* Separator card — a thin rule used to group cards within a list */
.board-divider-card{
  padding: 7px 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: background 0.14s ease;
}
.board-divider-card span{
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--border-strong);
}
.board-divider-card:hover{ background: rgba(127,127,127,0.10); }
.board-divider-card:hover span{ background: var(--seal); }
.board-divider-card.dragging{ opacity: 0.4; }

/* Insertion indicator shown while dragging a card */
/* --- List reordering ----------------------------------------------------- */
/* Lists are dragged by this grip alone, never by their body — the title is an
   editable input and the cards inside are draggable in their own right. */
.board-list-grip{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-subtle);
  cursor: grab;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.board-list-grip svg{ width: 16px; height: 16px; fill: currentColor; }
.board-list-grip:hover{ opacity: 1; color: var(--text-primary); background: var(--surface-sunken); }
.board-list-grip:active{ cursor: grabbing; }
.board-list-grip:focus-visible{ outline: 2px solid var(--seal); outline-offset: 1px; opacity: 1; }
/* The grip is the affordance, so keep it discoverable on touch, where there's
   no hover to reveal it. */
@media (hover: none){ .board-list-grip{ opacity: 0.8; } }

/* The list being dragged stays in place but recedes, so the drop line reads as
   the thing to watch rather than competing with it. */
.board-list.list-dragging{
  opacity: 0.4;
  cursor: grabbing;
}

/* Vertical counterpart to .board-drop-line — same colour and glow, rotated to
   sit between two lists rather than between two cards. Height matches a short
   list so it stays visible without stretching the row. */
.board-list-drop-line{
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
  min-height: 120px;
  border-radius: 3px;
  background: var(--seal);
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(232,144,0,0.18);
}

.board-drop-line{
  height: 3px;
  border-radius: 3px;
  background: var(--seal);
  margin: 1px 0;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(232,144,0,0.18);
}

/* Inline image attachments in card descriptions */
.board-desc-image{
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  display: block;
  margin: 10px 0;
  border: 1px solid var(--border);
}

/* Link / image attachment panel */
.board-attach-panel{
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.board-attach-panel .attach-url{
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.board-attach-panel .attach-actions{ display: flex; gap: 8px; margin-top: 10px; }
.board-attach-panel .attach-actions .btn{ padding: 9px 14px; font-size: 0.85rem; }
.board-attach-panel .attach-note{
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin: 8px 0 0;
}

.board-hint-inline{
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-top: 6px;
}
.board-hint-inline code{
  font-family: var(--font-mono);
  font-size: 0.73rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
}

.board-format-toolbar{ display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.board-format-toolbar button{
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  min-width: 30px;
  height: 29px;
  padding: 0 7px;
  font-family: var(--font-body);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.board-format-toolbar button:hover{ border-color: var(--verified); color: var(--verified); background: var(--surface-alt); }

/* "?" formatting reference */
.board-fmt-help-btn{
  font-weight: 700;
  color: var(--text-subtle) !important;
}
/* Preview + help sit apart from the formatting commands */
.board-preview-btn{
  margin-left: auto;
  min-width: auto !important;
  padding: 0 12px !important;
  font-weight: 600;
  white-space: nowrap;
}
.board-preview-btn.active,
.board-fmt-help-btn.active{
  border-color: var(--verified) !important;
  color: var(--verified) !important;
  background: var(--surface-alt) !important;
}
.board-preview[hidden]{ display: none; }
.board-fmt-help{
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  padding: 14px 16px;
  margin-top: 10px;
}
.board-fmt-help[hidden]{ display: none; }
.board-fmt-help-title{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 10px;
}
.board-fmt-help-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.board-fmt-help-table td{
  padding: 4px 0;
  vertical-align: top;
  color: var(--text-muted);
}
.board-fmt-help-table td:first-child{ width: 44%; padding-right: 10px; }
.board-fmt-help-table code{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text-primary);
  white-space: nowrap;
}
.board-fmt-help-note{
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-subtle);
  margin: 10px 0 0;
}
.board-fmt-help-note code{
  font-family: var(--font-mono);
  font-size: 0.73rem;
  background: var(--surface-sunken);
  border-radius: 3px;
  padding: 0 4px;
}

/* --- Board modals --- */
.board-modal-overlay{
  position: fixed; inset: 0;
  background: rgba(10,23,41,0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 24px;
}
.board-modal{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 34px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.board-modal h3{ margin-bottom: 4px; letter-spacing: -0.02em; }
.board-modal label{
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--text-muted);
}
.board-modal input[type="text"],
.board-modal input[type="url"],
.board-modal input[type="number"],
.board-modal textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.board-modal textarea{ min-height: 230px; resize: vertical; line-height: 1.6; }

.board-modal-view{ max-width: 900px; padding: 40px 46px; }
.board-modal-view h3{ font-size: 1.75rem; margin: 4px 0 20px; letter-spacing: -0.028em; }
.board-modal-view-image{
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
  margin-bottom: 20px;
}
.board-modal-view .board-card-label{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.7rem;
}
.board-preview-view{
  font-size: 1.02rem;
  line-height: 1.7;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
}

.board-badge-row{ display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.board-badge-row input[type="text"]{ width: 58px; text-align: center; }
.board-swatch{
  width: 25px; height: 25px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
  transition: transform 0.14s ease;
}
.board-swatch:hover{ transform: scale(1.1); }
.board-swatch.selected{ border-color: var(--text-primary); }

.board-modal-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  gap: 10px;
}
.board-card-delete, .board-list-delete{
  background: none;
  border: none;
  color: var(--text-subtle);
  font-family: var(--font-body);
  font-size: 0.79rem;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.14s ease;
}
.board-card-delete:hover, .board-list-delete:hover{ color: var(--alert); }

/* Compliance board reads teal to distinguish it from Operational */
/* Per-board accents so the four boards are distinguishable at a glance */
.compliance-page .board-list{ border-top-color: var(--verified); }
.compliance-page .eyebrow{ color: var(--verified); }

.instructor-page .board-list{ border-top-color: #4F7FD4; }
.instructor-page .eyebrow{ color: #2F5AA8; }
:root[data-theme="dark"] .instructor-page .eyebrow{ color: #7FA6E8; }

.director-page .board-list{ border-top-color: #8B5CC7; }
.director-page .eyebrow{ color: #6B3FA0; }
:root[data-theme="dark"] .director-page .eyebrow{ color: #B99BE8; }

/* ==========================================================================
   Classification banner — roleplay set dressing on staff-only pages
   ========================================================================== */

.classification-banner{
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 45;
  background: linear-gradient(90deg, #94242D 0%, #A72933 50%, #94242D 100%);
  color: #FFFFFF;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  /* letter-spacing trails the last character, pulling the line off-centre;
     this indent puts it back */
  text-indent: 0.3em;
  text-transform: uppercase;
  padding: 9px 16px;
  line-height: 1.2;
  user-select: none;
  border-bottom: 1px solid rgba(0,0,0,0.28);
}

@media (max-width: 620px){
  .classification-banner{ font-size: 0.62rem; letter-spacing: 0.18em; text-indent: 0.18em; }
}

/* ==========================================================================
   USSS Database
   ========================================================================== */

.db-tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.db-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.db-tab:hover{ border-color: var(--text-subtle); color: var(--text-primary); }
.db-tab.active{
  background: var(--seal);
  border-color: var(--seal);
  color: var(--midnight);
  font-weight: 650;
}
.db-tab-count{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: rgba(127,127,127,0.22);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}
.db-tab.active .db-tab-count{ background: rgba(10,23,41,0.18); }

.db-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.db-table{ width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1000px; }
.db-table th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  padding: 12px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.db-table td{
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.db-table tr:last-child td{ border-bottom: none; }
.db-table input, .db-table select{
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.86rem;
  background: transparent;
  color: var(--text-primary);
}
.db-table input:hover:not(:disabled), .db-table select:hover:not(:disabled){
  border-color: var(--border-strong);
  background: var(--surface-sunken);
}
.db-table input:focus, .db-table select:focus{
  outline: none;
  border-color: var(--verified);
  background: var(--surface-sunken);
  box-shadow: 0 0 0 3px rgba(31,122,107,0.14);
}
.db-table input:disabled, .db-table select:disabled{ color: var(--text-muted); opacity: 1; }

/* Rows marked Resigned or Terminated, awaiting archiving */
.db-row-flag td{ background: rgba(232,144,0,0.09); }

.db-note{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-subtle);
  padding-left: 9px;
}
.db-open{
  display: inline-block;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--verified);
  padding-left: 9px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.db-empty{ padding: 26px 14px; color: var(--text-subtle); font-size: 0.9rem; }
.db-actions{ white-space: nowrap; }
.db-btn{
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
}
.db-btn:hover{ border-color: var(--verified); color: var(--verified); }
.db-btn.danger:hover{ border-color: var(--alert); color: var(--alert); }
.db-toolbar{ display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.db-hint{ font-size: 0.82rem; color: var(--text-subtle); margin-top: 12px; }

/* ==========================================================================
   Theme toggle
   ========================================================================== */

.theme-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--midnight);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--seal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 300;
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-fab:hover{ transform: scale(1.08) rotate(35deg); }
/* On a dark page a midnight FAB is invisible, so lift it onto a surface tone. */
:root[data-theme="dark"] .theme-fab{
  background: var(--surface-alt);
  border-color: rgba(255,255,255,0.24);
}

input::placeholder, textarea::placeholder{ color: var(--text-subtle); opacity: 1; }
.theme-fab svg{ width: 21px; height: 21px; }

.theme-popup{
  position: fixed;
  right: 24px;
  bottom: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  width: 206px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
}
.theme-popup h4{
  font-family: var(--font-mono);
  font-size: 0.665rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-subtle);
  margin: 0 0 12px;
}
.theme-popup-options{ display: flex; gap: 8px; }
.theme-popup-options button{
  flex: 1;
  padding: 9px 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.theme-popup-options button:hover{ border-color: var(--text-subtle); }
.theme-popup-options button.active{
  background: var(--seal);
  border-color: var(--seal);
  color: var(--midnight);
  font-weight: 650;
}

/* Second heading inside the popup needs air above it; the first sits flush
   under the popup's own padding. */
.theme-popup .theme-popup-heading-2{ margin-top: 16px; }

.theme-popup-zoom{
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.theme-popup-zoom button{
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}
/* Fixed-width steppers so the percentage keeps the middle regardless of
   whether it reads 80% or 175%. */
.theme-popup-zoom button[data-zoom="out"],
.theme-popup-zoom button[data-zoom="in"]{
  flex: 0 0 38px;
  padding: 8px 0;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 600;
}
.theme-popup-zoom button:hover:not(:disabled){ border-color: var(--text-subtle); }
.theme-popup-zoom button:disabled{ opacity: 0.4; cursor: default; }

.theme-zoom-level{
  flex: 1;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px){
  section{ padding: 60px 0; }
  .wrap{ padding: 0 22px; }
  .hero{ padding: 68px 0 52px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 40px; padding: 0 22px; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .nav{ padding: 14px 22px; position: relative; }
  .nav-links{
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--midnight);
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 22px 22px;
    gap: 4px;
    display: none;
    border-bottom: 1px solid rgba(255,255,255,0.09);
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ width: 100%; padding: 11px 0; }
  .nav-links a::after{ display: none; }
  .nav-toggle{ display: inline-block; }
  .login-btn{ order: 2; }
  .step{ grid-template-columns: 1fr; gap: 10px; }
  .add-staff-form, .add-staff-form-4{ grid-template-columns: 1fr; }
  .leader-preview-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .board-modal-view{ padding: 28px 24px; }
  .site-footer .wrap{ flex-direction: column; align-items: flex-start; }
  .wrap-board{ padding: 0 18px; }
  .board-list{ width: 278px; flex: 0 0 278px; }
  .board-add-list-wrap{ min-width: 240px; flex: 0 0 240px; }
}

/* ==========================================================================
   Document cards & reader
   ========================================================================== */

.board-doc-card{ border-left: 3px solid var(--seal); }
.board-doc-row{ display: flex; gap: 11px; align-items: flex-start; }
.board-doc-icon{ width: 22px; height: 22px; color: var(--seal); flex-shrink: 0; margin-top: 1px; }
.board-doc-meta{ min-width: 0; }
.board-doc-sub{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

/* The reader is a dimmed surface with the document floating on it. The page
   itself supplies the only white, so nothing competes with it. */
.doc-reader-overlay{ padding: 0; background: rgba(8,14,24,0.94); }
.doc-reader{
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Bar is constrained to the document's width so the controls sit directly
   above the page edge rather than stranded in the far corner. */
.doc-reader-bar{
  flex: 0 0 auto;
  width: 100%;
  max-width: 948px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 12px;
  background: transparent;
  border: none;
}
.doc-reader-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-reader-actions{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.doc-reader-btn{
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.82);
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 6px 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.doc-reader-btn:hover{ background: rgba(255,255,255,0.13); border-color: var(--seal); color: var(--seal); }
.doc-reader-close{
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1;
  width: 30px;
  height: 29px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.doc-reader-close:hover{ background: rgba(255,255,255,0.16); color: #FFFFFF; }

.doc-reader-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: transparent;
  padding: 0 24px 34px;
}

/* Pages stack down the middle, each its own sheet */
.doc-pages{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.doc-page-canvas{
  display: block;
  border-radius: 2px;
  box-shadow: 0 10px 34px -8px rgba(0,0,0,0.65);
  background: #FFFFFF;
}
.doc-loading{
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 60px 0;
}
.doc-reader-frame{
  width: 100%;
  height: 78vh;
  border: none;
  display: block;
  border-radius: 2px;
}
.doc-reader-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  padding: 90px 30px;
  text-align: center;
}

.doc-reader-edit{
  max-width: 520px;
  margin: 0 auto;
  padding: 30px 26px 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.doc-reader-edit label{
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}
.doc-reader-edit input[type="text"],
.doc-reader-edit input[type="file"]{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.doc-reader-file{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-subtle);
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.doc-reader-edit-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  gap: 12px;
}

@media (max-width: 720px){
  .doc-reader-bar{ padding: 12px 14px 10px; }
  .doc-reader-body{ padding: 0 12px 24px; }
}

/* ==========================================================================
   Employment contract
   ========================================================================== */

.db-generate{ white-space: nowrap; }
.db-generate.disabled{ color: var(--text-subtle); text-decoration: none; cursor: default; }

.k-bar{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.k-bar-info{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.k-bar-actions{ display: flex; gap: 10px; }
.k-badge{
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.12em; padding: 5px 12px; border-radius: var(--r-pill);
}
.k-badge.draft{ background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border-strong); }
.k-badge.final{ background: var(--verified); color: #fff; }
.k-who{ font-family: var(--font-display); font-weight: 600; font-size: 1rem; }

/* The contract is paper: fixed light styling in both themes and in print */
/* One sheet. Fixed letter dimensions so pagination is predictable and the
   printed output matches the screen. 0.5in margins match the template. */
.k-page{
  background: #FFFFFF; color: #000;
  width: 816px;            /* 8.5in @96dpi */
  height: 1056px;          /* 11in  @96dpi */
  padding: 48px;           /* 0.5in */
  margin: 0 auto 26px;
  box-shadow: var(--shadow-lg);
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 11pt; line-height: 1.5;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.k-body{ flex: 1 1 auto; min-height: 0; overflow: hidden; }
.k-hdr{ text-align: center; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 20px; flex: 0 0 auto; }
.k-hdr-t{ font-size: 13pt; font-weight: 700; letter-spacing: 0.15em; color: #000; }
.k-hdr-s{ font-size: 11pt; font-weight: 700; letter-spacing: 0.13em; color: #000; }
.k-hdr-r{ display: flex; justify-content: space-between; font-size: 8.5pt; margin-top: 9px; color: #000; font-weight: 600; }
.k-hdr-a{ font-size: 8pt; color: #1A1A1A; margin-top: 3px; }

.k-cover{ text-align: center; margin-bottom: 26px; }
.k-series{ font-size: 9.5pt; letter-spacing: 0.28em; margin-bottom: 18px; color: #000; }
.k-title{ font-family: inherit; font-size: 19pt; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; margin: 0 0 12px; color: #000; }
.k-meta{ font-size: 10pt; color: #000; }
.k-cls{ margin: 22px 0 16px; }
.k-cls-l{ font-size: 9pt; letter-spacing: 0.18em; color: #000; }
.k-cls-v{ font-size: 14pt; font-weight: 700; letter-spacing: 0.26em; margin: 5px 0; color: #000; }
.k-cls-r{ font-size: 8pt; letter-spacing: 0.1em; color: #262626; }
.k-legal{ font-size: 8pt; line-height: 1.45; max-width: 3.4in; margin: 18px auto 6px; color: #1A1A1A; }
.k-cert{ font-size: 8pt; font-style: italic; color: #262626; }

.k-parties{ text-align: center; margin: 30px 0; }
.k-between{ font-size: 10pt; letter-spacing: 0.09em; color: #000; }
.k-party{ margin: 10px 0 4px; }
.k-caption{ font-size: 8pt; letter-spacing: 0.05em; color: #1A1A1A; }

.k-sec{ margin-bottom: 20px; }
/* Targeted by class, not descent: pagination moves headings out of .k-sec
   into the page body, which stripped this styling and left them rendering in
   the site's text colour instead of black. */
.k-sec h2, .k-page h2, .k-h{
  font-family: inherit; font-size: 11.5pt; font-weight: 700; letter-spacing: 0.05em;
  margin: 0 0 10px; padding-bottom: 4px; border-bottom: 1.5px solid #000;
  color: #000 !important; line-height: 1.3;
}
/* Everything on the sheet is black regardless of theme. */
.k-page, .k-page *{ color: #000; }
.k-page .k-hdr-a, .k-page .k-cert, .k-page .k-ftr-n{ color: #262626; }
.k-p{ margin: 0 0 8px; text-align: justify; color: #000; }
.k-p2{ padding-left: 0.35in; }

.k-tbl{ width: 100%; border-collapse: collapse; margin-top: 6px; }
.k-tbl th{ font-size: 8pt; letter-spacing: 0.04em; text-align: left; border: 1px solid #000;
  padding: 6px 7px; background: #E8E8E8; font-weight: 700; color: #000; }
.k-tbl td{ border: 1px solid #000; padding: 7px; font-size: 10.5pt; color: #000; }

.k-sigs{ display: flex; gap: 32px; flex-wrap: wrap; margin-top: 12px; }
.k-sig{ flex: 1 1 2.6in; min-width: 2.4in; }
.k-sig-h{ font-size: 9.5pt; font-weight: 700; letter-spacing: 0.09em; margin-bottom: 4px; color: #000; }
.k-sig-note{ font-size: 8pt; line-height: 1.4; margin: 0 0 12px; color: #1A1A1A; }
/* Signature line holds either the typed name in a script face or an image */
.k-sig-line{
  border-bottom: 1px solid #000;
  height: 50px;
  display: flex;
  align-items: center;      /* centred, so ascenders and descenders both fit */
  justify-content: center;
  padding: 0 6px 2px;
}
.k-sig-script{
  /* Alex Brush reads as a genuine hand-signed name and matches the brush
     character of the scanned signatures already on the document. */
  font-family: "Alex Brush", "Mrs Saint Delafield", "Segoe Script", cursive;
  font-size: 24pt;
  /* Roomy line-height: cursive descenders drop well below the baseline and
     were being cut off by the old fixed height. */
  line-height: 1.35;
  color: #111;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transform-origin: center center;
}
.k-sig-img{
  max-height: 34px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.k-row{ display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }

.k-in{
  font-family: inherit; font-size: 10.5pt; color: #000;
  border: none; border-bottom: 1px solid #666; background: #FFFBEA;
  padding: 2px 4px; min-width: 1.4in;
}
.k-in.wide{ min-width: 3in; font-size: 11pt; font-weight: 700; text-align: center; }
.k-in:focus{ outline: none; border-bottom-color: #111; background: #FFF3C4; }
.k-val{ font-size: 10.5pt; color: #000; border-bottom: 1px solid #444; padding: 2px 4px; display: inline-block; min-width: 1.4in; }
.k-val.wide{ min-width: 3in; font-size: 11pt; font-weight: 700; text-align: center; }

.k-closing{ text-align: center; margin: 28px 0; font-size: 10.5pt; color: #000; }
.k-issued{ font-style: italic; }
.k-ftr{ border-top: 2px solid #000; margin-top: 10px; padding-top: 6px; text-align: center; flex: 0 0 auto; }
.k-ftr-r{ display: flex; justify-content: space-between; align-items: baseline;
  font-size: 8pt; margin-top: 5px; letter-spacing: 0.03em; color: #000; }
.k-pageno{ font-weight: 700; font-size: 9pt; }
.k-ftr-m{ font-size: 8.5pt; font-weight: 700; letter-spacing: 0.07em; color: #000; }
.k-ftr-n{ font-size: 7.5pt; font-style: italic; color: #262626; margin-top: 4px; }

@media print{
  body > *:not(section){ display: none !important; }
  section{ padding: 0 !important; }
  .wrap, .wrap-board{ padding: 0 !important; max-width: none !important; }
  .k-bar, .k-sign-panel, .theme-fab, .theme-popup{ display: none !important; }
  /* Each sheet is already exactly one page, so print it as-is and break after. */
  .k-page{
    box-shadow: none !important;
    margin: 0 !important;
    break-after: page;
    page-break-after: always;
  }
  .k-page:last-child{ break-after: auto; page-break-after: auto; }
  @page{ size: letter; margin: 0; }
}

/* Employee contract signing panel */
.k-sign-panel{
  max-width: 8.5in;
  margin: 24px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--seal);
  border-radius: var(--r-md);
  padding: 26px 30px 30px;
  box-shadow: var(--shadow-md);
}
.k-sign-panel h3{ font-size: 1.15rem; margin-bottom: 6px; }
.k-sign-panel p{ font-size: 0.9rem; }
.k-sign-check{ display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 18px; font-size: 0.9rem; color: var(--text-muted); }
.k-sign-check input{ margin-top: 3px; flex-shrink: 0; }
.k-sign-panel label{ display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.k-sign-hint{ font-weight: 400; color: var(--text-subtle); }
.k-sign-panel input[type="text"]{
  width: 100%; max-width: 320px; padding: 11px 13px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 1.05rem;
  background: var(--surface-sunken); color: var(--text-primary);
}
.k-sign-msg{ font-size: 0.85rem; min-height: 1.1em; margin: 10px 0 14px; }
.k-sign-out{
  background: none; border: none; color: var(--text-subtle);
  font-family: var(--font-body); font-size: 0.82rem; cursor: pointer;
  margin-left: 14px; text-decoration: underline;
}

/* Trailing margin on a page's final block counts toward scrollHeight and made
   pages read as marginally overflowing. It's empty space, but zero it so the
   measurement is honest. */
.k-body > *:last-child{ margin-bottom: 0 !important; }

/* Contract header seals */
.k-hdr{ position: relative; }
.k-seal{ position: absolute; top: 0; width: 54px; height: 54px; object-fit: contain; }
.k-seal.left{ left: 4px; }
.k-seal.right{ right: 4px; }
.k-seal-slot{
  position: absolute; top: 0; width: 54px; height: 54px;
  border: 1px dashed #CCC; border-radius: 50%;
}
.k-seal-slot.left{ left: 4px; }
.k-seal-slot.right{ right: 4px; }

/* Seal URL fields — an editing control, so it sits outside the paper */
.k-seal-fields{
  max-width: 816px; margin: 0 auto 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.k-seal-fields label{
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: 5px;
}
.k-seal-fields input{
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 0.85rem;
  background: var(--surface-sunken); color: var(--text-primary);
}
.k-seal-note{
  grid-column: 1 / -1; margin: 0;
  font-size: 0.75rem; color: var(--text-subtle);
}
@media print{ .k-seal-fields{ display: none !important; } }
@media (max-width: 720px){ .k-seal-fields{ grid-template-columns: 1fr; } }

/* Section II acknowledgments — each lettered point is ticked by the employee */
.k-ack{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 9px;
  padding: 7px 9px 7px 8px;
  border-left: 2px solid #000;
  background: #F6F6F6;
  break-inside: avoid;
  page-break-inside: avoid;
}
.k-ack-box{
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  accent-color: #000;
  cursor: pointer;
}
.k-ack-box:disabled{ cursor: default; }
.k-ack-text{ flex: 1 1 auto; text-align: justify; color: #000; }
.k-ack:has(.k-ack-box:checked){ background: #EAF3EC; border-left-color: #1F7A6B; }
.k-ack-note{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  margin: 0 0 10px;
  color: var(--text-subtle);
}

/* Explicit page break marker — consumed by the paginator, never rendered */
.k-break{ display: none; }

/* Identity values are set from records and can't be typed over */
.k-val.k-locked{
  background: #F2F2F2;
  border-bottom: 1px solid #000;
  cursor: default;
}

/* ==========================================================================
   Roles & access table
   ========================================================================== */

.staff-table td{ vertical-align: middle; }
.staff-actions-cell{ white-space: nowrap; text-align: right; }
.staff-actions{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.act-btn{
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.act-btn:hover{ border-color: var(--verified); color: var(--verified); background: var(--surface-alt); }
.act-btn.danger:hover{ border-color: var(--alert); color: var(--alert); }
.act-btn:disabled{ opacity: 0.5; cursor: default; }

/* Role select sized so the longer labels don't clip */
/* Sized to fit rather than to a fixed width. The role and staff-record
   selects used to hold 172px each regardless of room, which pushed the ROLE
   column off the right edge on a laptop — the table scrolled inside its
   wrapper, but the last column was simply never visible without dragging. */
.staff-table select{ min-width: 0; max-width: 100%; width: 100%; }
.staff-table td, .staff-table th{ padding: 12px 12px; }
.staff-table td:first-child, .staff-table th:first-child{ padding-left: 16px; }
.staff-table td:last-child, .staff-table th:last-child{ padding-right: 16px; }
/* The record picker is the one that can hold a long name, so give it the
   slack and keep the rest tight. */
.staff-table td:nth-child(5){ width: 34%; }
.staff-table td:nth-child(6), .staff-table th:nth-child(6){ min-width: 132px; }

@media (max-width: 1100px){
  .staff-table td, .staff-table th{ padding: 10px 8px; font-size: 0.83rem; }
  .staff-table select{ padding: 6px 7px; font-size: 0.8rem; }
}

/* Rows group visually by rank */
.staff-table tbody tr:hover td{ background: var(--surface-alt); }

/* Verified name fields — only the correct name can be typed */
.k-in.k-verify{ background: #FFFBEA; }
.k-in.k-verify::placeholder{ color: #999; font-style: italic; }
.k-in.k-verify-ok{ background: #EAF3EC; border-bottom-color: #1F7A6B; }
.k-in.k-verify-reject{
  background: #FBE6E2;
  animation: kShake 0.28s ease;
}
@keyframes kShake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  75%{ transform: translateX(3px); }
}

/* ==========================================================================
   Directorate navigation bar
   ========================================================================== */

.dir-nav{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  /* Both offsets are measured at runtime; the -1px closes the sub-pixel seam
     that let content show through between the banner and this bar. */
  top: calc(var(--header-h, 64px) + var(--banner-h, 33px) - 1px);
  z-index: 44;
}
.dir-nav-inner{
  /* Full width rather than the narrower reading column — with eight areas the
     old cap clipped the last tab. Wrapping means nothing is ever hidden. */
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2px;
}

.dir-nav-tab{
  position: relative;
  padding: 11px 11px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-subtle);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dir-nav-tab:hover{ color: var(--text-primary); border-bottom-color: var(--border-strong); }
.dir-nav-tab.current{
  color: var(--text-primary);
  font-weight: 650;
  border-bottom-color: var(--seal);
}
.dir-nav-sep{
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 0 10px 0 14px;
  border-left: 1px solid var(--border);
  margin-left: 6px;
  align-self: center;
  line-height: 1;
}

@media (max-width: 1100px){
  .dir-nav-tab{ padding: 10px 9px 9px; font-size: 0.78rem; }
  .dir-nav-sep{ padding: 0 8px 0 10px; }
}
@media (max-width: 860px){
  .dir-nav-inner{ padding: 0 14px; justify-content: flex-start; }
  .dir-nav-tab{ padding: 9px 8px 8px; font-size: 0.75rem; }
  /* Below this width the section divider costs more room than it earns. */
  .dir-nav-sep{ display: none; }
}
@media print{ .dir-nav{ display: none !important; } }

/* ==========================================================================
   Activity log — collapsed by default
   ========================================================================== */

.log-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.log-head{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 0.15s ease;
}
.log-head:hover{ background: var(--surface-alt); }
.log-head-left{ display: flex; align-items: center; gap: 11px; min-width: 0; }
.log-chev{
  width: 15px; height: 15px;
  color: var(--text-subtle);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.log-head.open .log-chev{ transform: rotate(90deg); }
.log-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.log-count{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  color: var(--text-muted);
}
.log-head-hint{
  font-size: 0.79rem;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-body{ border-top: 1px solid var(--border); }
.log-body[hidden]{ display: none; }

.log-controls{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.log-controls select, .log-controls input{
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.84rem;
  background: var(--surface);
  color: var(--text-primary);
}
.log-controls input{ flex: 1 1 220px; min-width: 160px; }
.log-showing{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-subtle);
  margin-left: auto;
}

/* Scroll inside the panel rather than stretching the page */
.log-scroll{ max-height: 420px; overflow-y: auto; }
.log-table{ border: none; border-radius: 0; box-shadow: none; }
.log-table th{
  position: sticky; top: 0; z-index: 1;
  padding: 9px 16px;
}
.log-table td{ padding: 8px 16px; font-size: 0.84rem; }
.log-when{ white-space: nowrap; color: var(--text-subtle); font-family: var(--font-mono); font-size: 0.76rem; }
.log-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  white-space: nowrap;
  color: var(--text-muted);
}
.log-more{ margin: 14px 20px; }

/* ==========================================================================
   Card labels & assigned members
   ========================================================================== */

.board-label-strip{ display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.board-label-chip{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0B1220;
  padding: 3px 8px;
  border-radius: 3px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-card-foot{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  min-height: 22px;
}
.board-card-members{ display: flex; gap: -6px; flex-shrink: 0; }
.board-avatar{
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #101722;
  margin-left: -7px;
  background: #2A3444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.board-card-members .board-avatar:first-child{ margin-left: 0; }
.board-avatar-fallback{
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

/* Pickers inside the card editor */
.board-picker{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.board-pick-label{
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0B1220;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.14s ease, border-color 0.14s ease;
}
.board-pick-label:hover{ opacity: 0.75; }
.board-pick-label.on{ opacity: 1; border-color: var(--text-primary); }
.board-pick-add{
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--text-subtle);
  cursor: pointer;
}
.board-pick-add:hover{ border-color: var(--verified); color: var(--verified); }

.board-pick-member{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 3px 12px 3px 3px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.14s ease, border-color 0.14s ease;
}
.board-pick-member img{ width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.board-pick-member:hover{ opacity: 0.85; }
.board-pick-member.on{
  opacity: 1;
  border-color: var(--verified);
  color: var(--text-primary);
  font-weight: 600;
}

/* ==========================================================================
   Image hosting
   ========================================================================== */

.img-drop{
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 30px 24px;
  text-align: center;
  cursor: pointer;
  color: var(--text-subtle);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.img-drop:hover, .img-drop.over{
  border-color: var(--verified);
  color: var(--verified);
  background: var(--surface-alt);
}
.img-drop svg{ display: block; margin: 0 auto 10px; }
.img-drop-text{ font-size: 0.92rem; color: var(--text-primary); }
.img-drop-text strong{ color: var(--verified); }
.img-drop-note{ font-size: 0.76rem; margin-top: 5px; }

.img-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.img-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.img-thumb{
  height: 120px;
  background: repeating-conic-gradient(var(--surface-alt) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.img-thumb img{ max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.img-meta{ padding: 11px 13px 8px; flex: 1 1 auto; min-width: 0; }
.img-name{
  font-size: 0.84rem; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.img-sub{ font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-subtle); margin-top: 3px; }
.img-actions{ display: flex; gap: 6px; padding: 0 13px 13px; }
.img-actions .act-btn{ flex: 1; text-align: center; }
.act-btn.copied{ border-color: var(--verified); color: var(--verified); }

/* Longer-session sign-in option — a toggle chosen before signing in */
.login-remember{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.login-remember input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.login-remember-switch{
  flex: 0 0 auto;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.16s ease;
}
.login-remember-switch::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.28);
  transition: transform 0.16s ease;
}
.login-remember input:checked + .login-remember-switch{ background: var(--verified); }
.login-remember input:checked + .login-remember-switch::after{ transform: translateX(16px); }
.login-remember input:focus-visible + .login-remember-switch{
  box-shadow: 0 0 0 3px rgba(31,122,107,0.28);
}
.login-remember input:disabled + .login-remember-switch{ opacity: 0.55; }
.login-remember input:disabled ~ .login-remember-text{ opacity: 0.55; }

/* Remaining session length, shown beside the role badge */
.session-note{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* Database search & filters */
.db-controls{
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.db-search{
  flex: 1 1 260px;
  min-width: 180px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.87rem;
  background: var(--surface);
  color: var(--text-primary);
}
.db-search:focus{
  outline: none;
  border-color: var(--verified);
  box-shadow: 0 0 0 3px rgba(31,122,107,0.14);
}
.db-filter{
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.83rem;
  background: var(--surface);
  color: var(--text-primary);
  max-width: 210px;
}
.db-count{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-subtle);
  margin-left: auto;
  white-space: nowrap;
}

/* Header stays put while scrolling a long table */
.db-table-wrap{ max-height: 620px; overflow-y: auto; }
.db-table thead th{ position: sticky; top: 0; z-index: 2; }

/* Signature-block fields: value on a rule, caption beneath */
.k-field{ margin-top: 12px; }
.k-field .k-in,
.k-field .k-val{
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  padding: 3px 4px;
}
.k-field-cap{
  display: block;
  font-size: 7pt;
  letter-spacing: 0.09em;
  color: #1A1A1A;
  margin-top: 3px;
  text-transform: uppercase;
}
.k-sig-cap{ margin-top: 4px; margin-bottom: 2px; }
.k-sig{ flex: 1 1 2.9in; min-width: 2.6in; }

/* Create-login modal */
.db-modal{ max-width: 420px; }
.db-modal h3{ margin-bottom: 4px; }
.db-modal-sub{
  font-size: 0.87rem;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.db-modal label{
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--text-muted);
}
.db-modal input[type="text"],
.db-modal select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.db-modal input[type="text"]:focus,
.db-modal select:focus{
  outline: none;
  border-color: var(--verified);
  box-shadow: 0 0 0 3px rgba(31,122,107,0.14);
}
.db-modal textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}
.db-modal textarea:focus{
  outline: none;
  border-color: var(--verified);
  box-shadow: 0 0 0 3px rgba(31,122,107,0.14);
}
.db-modal-msg{ font-size: 0.84rem; min-height: 1.15em; margin: 12px 0 0; }

.db-cred{
  font-family: var(--font-mono);
  font-size: 0.95rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.db-cred-key{
  border-color: var(--seal);
  background: rgba(232,144,0,0.10);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Marks a staff record that already has a login */
.db-linked{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--verified);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  white-space: nowrap;
}

/* Session diagnostic readout */
.session-info-out{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
  white-space: pre-wrap;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 14px 0 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Shown when someone with a live session lands on the sign-in page */
.login-already{
  border: 1px solid var(--border);
  border-left: 3px solid var(--verified);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  padding: 18px 20px;
  margin-bottom: 4px;
}
.login-already strong{ display: block; font-size: 0.95rem; margin-bottom: 4px; }
.login-already span{ display: block; font-size: 0.84rem; color: var(--text-subtle); margin-bottom: 14px; }
.login-already .btn{ width: 100%; justify-content: center; }
.login-switch{
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-subtle);
  text-decoration: underline;
  cursor: pointer;
}
.login-switch:hover{ color: var(--text-muted); }

/* Board access editor */
.access-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.access-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.access-card h3{ font-size: 0.98rem; margin-bottom: 10px; }
.access-table{ width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.access-table th{
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-subtle); text-align: left;
  padding: 4px 6px; border-bottom: 1px solid var(--border);
}
.access-table th:not(:first-child), .access-table td:not(:first-child){ text-align: center; width: 52px; }
.access-table td{ padding: 5px 6px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.access-table tr:last-child td{ border-bottom: none; }
.access-table input{ accent-color: var(--verified); cursor: pointer; }
.access-table input:disabled{ opacity: 0.45; cursor: default; }
.access-save{ margin-top: 12px; width: 100%; }


.doc-reader-note{
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--seal); padding-left: 10px; white-space: nowrap;
}

/* Division tag in the roles table */
.div-tag{
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.06em; padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
.div-DT{ color: #4F7FD4; border-color: #4F7FD4; }
.div-UT{ color: var(--verified); border-color: var(--verified); }
.div-MSD{ color: #8B5CC7; border-color: #8B5CC7; }

/* Training resource viewer */
.res-bar{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.res-title{ font-size:1.5rem; margin:0; letter-spacing:-0.02em; }
.res-body{ background:transparent; }

/* ==========================================================================
   Executive Portal section index
   ========================================================================== */

.portal-index{
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 10px;
  width: 168px;
  max-height: 76vh;
  overflow-y: auto;
}
.portal-index-title{
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 0 8px 8px;
}
.portal-index ul{ list-style: none; margin: 0; padding: 0; }
.portal-index a{
  display: block;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  font-size: 0.81rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.portal-index a:hover{ background: var(--surface-alt); color: var(--text-primary); }
.portal-index a.current{
  background: var(--surface-alt);
  color: var(--text-primary);
  font-weight: 600;
  border-left-color: var(--seal);
}

/* Below this the page needs its full width, so the index steps aside. */
/* Narrow screens: off-canvas behind a tab rather than gone entirely. The
   toggle only exists below the breakpoint — above it the index is pinned
   open and a button would be noise. */
.portal-index-toggle{ display: none; }

@media (max-width: 1500px){
  .portal-index{
    transform: translateY(-50%) translateX(calc(-100% - 22px));
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 210;
  }
  .portal-index.open{ transform: translateY(-50%) translateX(0); }

  .portal-index-toggle{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 209;
    padding: 11px 12px 11px 10px;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
  }
  .portal-index-toggle:hover{ color: var(--text-primary); }
  /* Rides out with the panel so it never sits on top of it. */
  .portal-index-toggle.open{ transform: translateY(-50%) translateX(186px); }
}

/* Under ~420px the panel would span most of the screen; drop the word and
   leave the icon so the tab stays out of the way. */
@media (max-width: 420px){
  .portal-index-toggle-text{ display: none; }
  .portal-index{ width: 150px; }
  .portal-index-toggle.open{ transform: translateY(-50%) translateX(168px); }
}

@media print{ .portal-index-toggle{ display: none !important; } }
@media print{ .portal-index{ display: none !important; } }

/* Live build indicator */
.build-stamp{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-subtle);
  margin-left: 4px;
}

/* Copy control on asset-id cells */
.db-cell-copy{ position: relative; }
.db-cell-copy > input{ padding-right: 30px !important; }
.db-copy{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-subtle);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.db-copy svg{ width: 13px; height: 13px; }
.db-copy:hover{ opacity: 1; color: var(--verified); border-color: var(--border-strong); }
.db-copy.copied{ opacity: 1; color: var(--verified); border-color: var(--verified); }

/* Cell for a column that doesn't apply to this row */
.db-na{ color: var(--text-subtle); opacity: 0.5; padding-left: 9px; }

/* ==========================================================================
   Staff header & Directorate nav — refreshed
   (the classification banner between them is deliberately untouched)
   ========================================================================== */

.staff-header{
  /* Depth from a gradient rather than a flat fill, with a gold hairline that
     ties the bar to the seal below it. */
  background: linear-gradient(180deg, #0D1A2E 0%, var(--midnight) 100%);
  border-bottom: 1px solid rgba(232,144,0,0.28);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 6px 18px -12px rgba(0,0,0,0.8);
  padding: 0;
}
.staff-header .wrap{
  min-height: 62px;
  padding-top: 0;
  padding-bottom: 0;
  gap: 20px;
}

/* --- Brand ---------------------------------------------------------------- */
.staff-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.012em;
  color: #FFFFFF;
  text-decoration: none;
  padding: 11px 0;
  transition: opacity 0.16s ease;
}
.staff-header .brand:hover{ opacity: 0.86; }
.staff-header .brand-mark{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(232,144,0,0.5), 0 0 0 4px rgba(232,144,0,0.10);
}

/* --- Right-hand cluster --------------------------------------------------- */
.staff-header-actions{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Identity reads as a unit, separated from the actions beside it. */
.staff-header .role-badge{
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--seal-pale) 0%, var(--seal) 100%);
  color: var(--midnight);
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.session-note{
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.42);
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.12);
}

/* Plain links for navigation, an outlined control for the destructive action,
   so signing out isn't one careless click away from a nav item. */
.staff-header-actions a{
  position: relative;
  color: rgba(255,255,255,0.74);
  text-decoration: none;
  font-size: 0.855rem;
  font-weight: 500;
  padding: 6px 0;
  transition: color 0.16s ease;
}
.staff-header-actions a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--seal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.staff-header-actions a:hover{ color: #FFFFFF; }
.staff-header-actions a:hover::after{ transform: scaleX(1); }

.staff-header-actions a#signOutLink{
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
}
.staff-header-actions a#signOutLink::after{ display: none; }
.staff-header-actions a#signOutLink:hover{
  border-color: var(--alert);
  color: var(--alert);
  background: rgba(179,67,47,0.10);
}

/* --- Directorate nav ------------------------------------------------------ */
.dir-nav{
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px -10px rgba(0,0,0,0.5);
}
.dir-nav-tab{
  border-bottom: none !important;
  border-radius: var(--r-sm);
  margin: 6px 0;
  color: var(--text-subtle);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.dir-nav-tab:hover{
  background: rgba(127,127,127,0.12);
  color: var(--text-primary);
}
/* Current page reads as a solid chip rather than a thin underline. */
.dir-nav-tab.current{
  background: var(--seal);
  color: var(--midnight) !important;
  font-weight: 650;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
.dir-nav-tab.current:hover{ background: var(--seal-pale); }
.dir-nav-sep{
  color: var(--text-subtle);
  opacity: 0.7;
}

@media (max-width: 860px){
  .staff-header .wrap{ min-height: 56px; gap: 12px; }
  .staff-header .brand{ font-size: 0.94rem; }
  .staff-header .brand-mark{ width: 34px; height: 34px; }
  .session-note{ display: none; }
}

/* Names & options editor */
.schema-grid{ display: grid; grid-template-columns: 1fr 1.3fr; gap: 22px; align-items: start; }
.schema-h{ font-size: 0.9rem; margin-bottom: 12px; }
.schema-col{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.schema-row{ display: flex; gap: 8px; margin-bottom: 9px; }
.schema-row input{
  flex: 1; padding: 8px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); font-family: var(--font-body); font-size: 0.86rem;
  background: var(--surface-sunken); color: var(--text-primary);
}
.schema-optbox{
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 13px 14px; margin-bottom: 12px; background: var(--surface-alt);
}
.schema-optlabel{ font-size: 0.82rem; color: var(--text-muted); margin-bottom: 7px; }
.schema-optbox textarea{
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 0.8rem;
  line-height: 1.6; background: var(--surface-sunken); color: var(--text-primary);
  resize: vertical;
}
.schema-opthint{ font-size: 0.72rem; color: var(--text-subtle); margin: 5px 0 9px; }
@media (max-width: 1000px){ .schema-grid{ grid-template-columns: 1fr; } }

/* Label colour picker */
.label-swatches{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.label-swatch{
  width: 30px; height: 30px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.13s ease;
}
.label-swatch:hover{ transform: scale(1.1); }
.label-swatch.on{
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-primary);
}

/* ==========================================================================
   In-app guides
   ========================================================================== */

.guide-wrap{ padding: 0 0 22px; }
.guide{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--seal);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.guide-head{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 0.15s ease;
}
.guide-head:hover{ background: var(--surface-alt); }
.guide-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.guide-icon{ width: 17px; height: 17px; color: var(--seal-deep); flex-shrink: 0; }
.guide-toggle{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}
.guide-body{
  padding: 4px 18px 20px;
  border-top: 1px solid var(--border);
}
.guide-body[hidden]{ display: none; }
.guide-intro{
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 14px 0 18px;
  max-width: 72ch;
}
.guide-step{ margin-bottom: 15px; max-width: 78ch; }
.guide-step h4{
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.guide-step p{
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.guide-step strong{ color: var(--text-primary); font-weight: 600; }
.guide-notes{
  margin: 18px 0 0;
  padding: 14px 16px 14px 34px;
  background: var(--surface-alt);
  border-radius: var(--r-sm);
  font-size: 0.83rem;
  color: var(--text-subtle);
  max-width: 78ch;
}
.guide-notes li{ margin-bottom: 6px; }
.guide-notes li:last-child{ margin-bottom: 0; }
@media print{ .guide-wrap{ display: none !important; } }


/* ==========================================================================
   Create Event
   ========================================================================== */

.ev-card{
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* The card clips overflow to keep its rounded corners clean, but that also
   clips the "?" help popover whenever it renders near an edge. Let it
   through specifically while a popover is open — everything else about the
   card stays clipped as normal. */
.ev-card:has(.ev-help[open]){ overflow: visible; }
.ev-card-head{
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 22px 24px 18px;
}
.ev-cal-view-btn{
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-alt);
  color: var(--text-subtle); cursor: pointer;
}
.ev-cal-view-btn:hover{ color: var(--verified); border-color: var(--verified); }
.ev-cal-view-btn .ev-ico{ width: 18px; height: 18px; }
.ev-edit-note{ display: flex; align-items: center; }
.ev-card-head h1{
  font-size: 1.5rem; margin: 0; letter-spacing: -0.025em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.ev-ico{ width: 17px; height: 17px; flex-shrink: 0; }
.ev-card-head .ev-ico{ width: 22px; height: 22px; color: var(--text-primary); }

/* A small pill next to the composer's heading naming which Scheduler is
   active — the composer/calendar are
   now reached from a shared Home screen, so it's no longer implicit from
   context alone which target a given screen is working against. */
.ev-target-tag{
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--seal-deep); background: var(--surface-alt);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 3px 10px;
}

/* "‹ Back" link atop the composer/Calendar cards, returning to the Home
   screen (see goHome() in events.js) — separate from the "← Duty Desk" link
   in the page header, which leaves the Scheduler entirely. */
.ev-back-link{
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600;
  margin: 0 auto 14px; padding: 0;
  max-width: 640px; width: 100%;
}
.ev-back-link:hover{ color: var(--verified); }
.ev-back-link .ev-ico{ width: 15px; height: 15px; }

.ev-body{ padding: 0 24px 6px; }

/* Each field sits on a left rule, echoing the reference layout */
.ev-field{
  border-left: 2px solid var(--seal);
  padding: 0 0 0 16px;
  margin-bottom: 18px;
}
.ev-field > label{
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: 7px;
}
.ev-field > label .ev-ico{ color: var(--text-subtle); }
.ev-field input[type="text"],
.ev-field input[type="datetime-local"],
.ev-field input[type="number"],
.ev-field select,
.ev-field textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.ev-field textarea{ resize: vertical; }
.ev-field input:focus, .ev-field select:focus, .ev-field textarea:focus{
  outline: none; border-color: var(--verified);
  box-shadow: 0 0 0 3px rgba(31,122,107,0.14);
}
.ev-sub{ margin-top: 10px; }
.ev-sub label{ display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 5px; }

.ev-add{
  background: none; border: none;
  color: var(--verified);
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; padding: 6px 0; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 7px;
}
.ev-add:hover{ text-decoration: underline; }
.ev-add.block{ display: flex; padding: 8px 0 8px 18px; margin-bottom: 10px; }

.ev-advanced{
  position: relative; text-align: center;
  margin: 16px 0 0; padding: 0 24px;
}
.ev-advanced::before{
  content: ""; position: absolute; left: 24px; right: 24px; top: 50%;
  height: 1px; background: var(--border);
}
.ev-advanced span{
  position: relative; background: var(--surface);
  padding: 0 12px; font-size: 0.78rem; color: var(--text-subtle);
}

.ev-tabs{ display: flex; justify-content: center; gap: 4px; padding: 14px 24px 0; }
.ev-tab{
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 18px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--text-subtle);
}
.ev-tab .ev-ico{ color: var(--text-subtle); }
.ev-tab:hover{ color: var(--text-primary); }
.ev-tab.active{ border-bottom-color: var(--seal); color: var(--text-primary); cursor: default; }
.ev-tab.active .ev-ico{ color: var(--verified); }

.ev-rsvp{
  border-left: 2px solid var(--seal);
  margin: 14px 24px 0; padding-left: 16px;
}
.ev-rsvp-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.ev-rsvp-head span{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
}
.ev-rsvp-head .ev-ico{ color: var(--text-subtle); }
.ev-rsvp-table{ width: 100%; border-collapse: collapse; }
.ev-rsvp-table th{
  text-align: left; font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); padding: 6px 8px;
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.ev-rsvp-table td{ padding: 5px 8px; border-bottom: 1px solid var(--border); }
.ev-rsvp-table tr:last-child td{ border-bottom: none; }
.ev-rsvp-table input{
  width: 100%; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-primary);
  font-family: var(--font-body); font-size: 0.85rem;
}
.ev-rsvp-table input:hover{ border-color: var(--border-strong); background: var(--surface-sunken); }
.ev-rsvp-table input:focus{ outline: none; border-color: var(--verified); background: var(--surface-sunken); }
.ev-emoji{ text-align: center; max-width: 54px; }
.ev-limit{ max-width: 70px; text-align: center; }
.ev-none{ color: var(--text-subtle); font-size: 0.83rem; padding: 12px 8px !important; }
.ev-remove{
  background: none; border: none; color: var(--text-subtle);
  font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1;
}
.ev-remove:hover{ color: var(--alert); }
.ev-locked{
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-subtle); opacity: 0.6; padding: 0 4px; cursor: default;
}
.ev-locked .ev-ico{ width: 14px; height: 14px; }

/* Auto React toggle */
.ev-switch{ display: inline-flex; cursor: pointer; }
.ev-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ev-switch span{
  width: 34px; height: 19px; border-radius: 999px;
  background: var(--border-strong); position: relative;
  transition: background 0.18s ease;
}
.ev-switch span::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: transform 0.18s ease;
}
.ev-switch input:checked + span{ background: var(--verified); }
.ev-switch input:checked + span::after{ transform: translateX(15px); }

/* Ping Roles panel — lives under Advanced now (its own tab, next to RSVPs
   and Templates) rather than a standalone field on the main form, so it
   reads as one more thing to configure rather than something that always
   demands attention. Same left-rule container as .ev-tpl-panel/.ev-rsvp. */
.ev-ping-panel{
  border-left: 2px solid var(--seal);
  margin: 14px 24px 0; padding-left: 16px;
}
.ev-ping-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ev-ping-row > span{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-primary);
}
.ev-ping-row .ev-ico{ color: var(--text-subtle); }
.ev-ping-role-row{
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.ev-ping-role-row:last-child{ border-bottom: none; }
.ev-ping-role-row > span{ font-size: 0.87rem; font-weight: 500; color: var(--text-primary); }
.ev-role-id{
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-subtle);
  margin-left: 4px;
}
.ev-ping-default-tag{
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--seal-deep); background: var(--surface-alt);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 2px 8px; margin-left: 4px;
}

.ev-msg{ font-size: 0.85rem; min-height: 1.15em; margin: 16px 24px 0; text-align: center; }
.ev-create{
  display: block; width: calc(100% - 48px);
  margin: 10px 24px 24px;
  padding: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--seal);
  border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary); cursor: pointer;
  transition: background 0.15s ease;
}
.ev-create:hover{ background: var(--seal); color: var(--midnight); }
.ev-create:disabled{ opacity: 0.6; cursor: default; }

.ev-warn{
  font-size: 0.83rem; color: var(--seal-deep);
  background: rgba(232,144,0,0.10); border: 1px solid rgba(232,144,0,0.35);
  border-radius: var(--r-sm); padding: 10px 12px; margin: 0 24px 16px;
}

/* Smart time fields (Start Time / Deployment Time) */
.ev-time-row{ display: flex; gap: 8px; align-items: stretch; }
.ev-time-row input[type="text"]{ flex: 1; }
.ev-cal-btn{
  flex-shrink: 0; width: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-muted); cursor: pointer;
}
.ev-cal-btn:hover{ color: var(--verified); border-color: var(--verified); }
.ev-cal-btn svg{ width: 18px; height: 18px; }
.ev-time-preview{
  font-size: 0.78rem; color: var(--text-subtle);
  margin-top: 6px; min-height: 1.1em;
}
.ev-time-preview.ev-time-bad{ color: var(--alert); }

/* Event templates */
.ev-tpl-row{ display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ev-tpl-group{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-tpl-group-name{
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--text-subtle); margin-right: 2px;
}
.ev-tpl-btn{
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  color: var(--text-primary); cursor: pointer;
}
.ev-tpl-btn:hover{ border-color: var(--verified); color: var(--verified); }

.ev-banner-preview{
  position: relative; margin-top: 10px; max-width: 320px;
  border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border);
}
.ev-banner-preview img{ display: block; width: 100%; max-height: 140px; object-fit: cover; }
.ev-banner-preview button{
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10,23,41,0.72); color: #fff; border: none;
  cursor: pointer; font-size: 0.95rem; line-height: 1;
}

.ev-tpl-panel{
  border-left: 2px solid var(--seal);
  margin: 14px 24px 0; padding-left: 16px;
}
.ev-tpl-hint{
  font-size: 0.79rem; color: var(--text-subtle);
  margin: 0 0 4px; line-height: 1.5;
}

/* Help icon + popover — swaps an always-visible instructional paragraph for
   a small "?" that only shows its text on demand. Built on <details> so
   opening/closing needs no JS and there's nothing to leak or clean up. */
.ev-help{ display: inline-block; position: relative; margin-left: 6px; vertical-align: middle; }
.ev-help-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text-subtle);
  font-size: 0.7rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer; list-style: none; user-select: none;
}
.ev-help-btn::-webkit-details-marker{ display: none; }
.ev-help-btn:hover{ border-color: var(--verified); color: var(--verified); }
.ev-help[open] .ev-help-btn{ border-color: var(--verified); color: var(--verified); }
.ev-help-pop{
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  width: 280px; max-width: 70vw;
  background: var(--surface-alt); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md);
  padding: 10px 12px; font-size: 0.79rem; line-height: 1.5;
  color: var(--text-subtle); font-weight: 400;
}

.ev-tpl-label-row{ display: flex; align-items: center; margin-top: 10px; }
.ev-tpl-label-row label{ margin: 0; }

.ev-tpl-manager-item{
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 14px 16px; margin-bottom: 12px;
}
.ev-tpl-manager-item label{ margin-top: 10px; }
.ev-tpl-manager-item label:first-of-type{ margin-top: 0; }
.ev-tpl-manager-item .board-card-delete{ margin-top: 12px; }

.ev-tpl-loc-add{ display: flex; }
.ev-tpl-loc-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ev-tpl-loc-item{
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-alt); padding: 10px 12px;
}
.ev-tpl-loc-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ev-tpl-loc-head strong{ font-size: 0.85rem; color: var(--text-primary); }
.ev-tpl-loc-delete{
  background: none; border: none; color: var(--text-subtle);
  font-size: 1.05rem; cursor: pointer; padding: 0 4px; line-height: 1;
}
.ev-tpl-loc-delete:hover{ color: var(--alert); }
.board-modal textarea.ev-tpl-loc-desc{ min-height: 70px; }
.board-modal input.ev-tpl-loc-banner{ margin-top: 8px; font-size: 0.82rem; }

.ev-tpl-offset-row{ display: flex; align-items: center; gap: 10px; }
.ev-tpl-offset-row input{ max-width: 100px; }
.ev-tpl-offset-row span{ font-size: 0.82rem; color: var(--text-subtle); }

/* Scheduler home screen — the landing page inside events.html, reached on
   every visit and via the "‹ Back" link from the composer/Calendar views.
   Button-cards (Create Event / Event Calendar / NSSE Handler), styled
   after the bordered-button reference the request was built from. */
.ev-home{
  max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; padding-bottom: 28px;
}
.ev-home .ev-card-head h1{ justify-content: center; }
.ev-home-grid{
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 24px 0;
}
.ev-home-btn{
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; width: 100%;
  /* One of these tiles is an <a> (the NSSE Handler, which is its own page)
     and the rest are <button>s. Without this the anchor picks up the site's
     underlined-link styling and reads differently from its neighbours. */
  text-decoration: none;
  color: inherit;
  padding: 18px 20px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ev-home-btn:hover{ border-color: var(--seal); background: var(--surface); text-decoration: none; }
.ev-home-btn-icon{
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--seal-deep); margin-bottom: 4px;
}
.ev-home-btn-icon .ev-ico{ width: 18px; height: 18px; }
.ev-home-btn-label{ font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.ev-home-btn-sub{ font-size: 0.82rem; color: var(--text-subtle); }

/* Calendar view — swapped into #evRoot in place of the composer.
   The page's own .wrap caps out at --max-width (1180px) minus its own
   padding, which was quietly overriding this block's max-width below no
   matter how wide the screen was — events.js adds "wrap-cal" to that
   specific .wrap only while the Calendar view is open, so the composer
   keeps its normal width and only the calendar gets the extra room. */
.wrap.wrap-cal{ max-width: 1440px; }
.ev-cal-layout{
  max-width: 1360px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 20px;
}
.ev-cal{
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ev-cal-side{
  width: 260px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 16px 16px 4px;
  max-height: 640px; overflow-y: auto;
}
.ev-cal-side .schema-h{ margin: 0 0 12px; }
@media (max-width: 900px){
  .ev-cal-layout{ flex-direction: column; }
  .ev-cal-side{ width: 100%; max-height: none; }
}
.ev-cal-toolbar{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.ev-cal-back{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-alt);
  color: var(--text-subtle); cursor: pointer; flex-shrink: 0;
}
.ev-cal-back:hover{ color: var(--alert); border-color: var(--alert); }
.ev-cal-back .ev-ico{ width: 16px; height: 16px; }
.ev-cal-nav{ display: flex; align-items: center; gap: 10px; }
.ev-cal-nav-btn{
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-alt); color: var(--text-subtle); cursor: pointer;
}
.ev-cal-nav-btn:hover{ color: var(--verified); border-color: var(--verified); }
.ev-cal-nav-btn .ev-ico{ width: 15px; height: 15px; }
.ev-cal-label{ font-weight: 600; font-size: 1rem; min-width: 150px; text-align: center; }
.ev-cal-today{
  padding: 6px 12px; font-size: 0.79rem; font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-alt); color: var(--text-subtle); cursor: pointer;
}
.ev-cal-today:hover{ color: var(--verified); border-color: var(--verified); }
.ev-cal-toolbar-right{ display: flex; align-items: center; gap: 10px; }
.ev-cal-viewtoggle{ display: flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.ev-cal-vbtn{
  padding: 6px 14px; font-size: 0.79rem; font-weight: 600;
  border: none; background: var(--surface-alt); color: var(--text-subtle); cursor: pointer;
}
.ev-cal-vbtn.active{ background: var(--seal); color: #14283F; }

.ev-cal-grid{
  display: grid;
  /* WHY SATURDAY USED TO DISAPPEAR.
     A pill is white-space: nowrap, so a cell's min-content width is its
     longest event title ("Australia Treaty Signing/State Visit"). The cell is
     a grid item, and a grid item's default min-width is auto — its content.
     So the track could not shrink below that title, all seven columns grew
     past the container, and .ev-cal (overflow-x: hidden) quietly clipped the
     last one off rather than scrolling or truncating.
     Breaking that chain needs the MIN to stop tracking content. `min-width: 0`
     on .ev-cal-cell below is what actually does it here; minmax(0, 1fr) says
     the same thing at the track level and is kept so neither half alone is
     load-bearing. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ev-cal-dow{
  padding: 8px 4px; text-align: center; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle);
  border-bottom: 1px solid var(--border);
}
.ev-cal-cell{
  /* min-width: 0 — see the note on .ev-cal-grid above. Without it this cell
     refuses to shrink below its longest pill and the week overflows. */
  min-height: 118px; padding: 7px 6px; min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.ev-cal-cell:nth-child(7n){ border-right: none; }
.ev-cal-cell.out{ background: var(--surface-sunken); opacity: 0.55; }
/* Today. The dot alone was easy to lose among twenty gold pills, so the whole
   cell is tinted and the column reads at a glance. */
.ev-cal-cell.today{ background: color-mix(in srgb, var(--seal) 7%, transparent); }
.ev-cal-cell.today .ev-cal-daynum{
  background: var(--seal); color: #14283F; border-radius: 50%;
  width: 21px; height: 21px; display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.ev-cal-daynum{ font-size: 0.78rem; font-weight: 600; color: var(--text-subtle); }
.ev-cal-pills{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* ---- Event pills --------------------------------------------------------
   Every pill used to be a solid block of the same gold. A busy month was
   twenty identical bars and no way to tell a state visit from a cabinet
   meeting without reading each one — the colour carried no information and,
   at that density, actively fought the text.

   So: a quiet tinted ground with a coloured spine down the left. The spine is
   what you read at a glance; the text stays on a calm surface. Type colour is
   derived from the title (see calEventKind() in events.js).

   --cal-ink is set per type below; everything else is shared. */
.ev-cal-pill{
  --cal-ink: var(--text-subtle);
  position: relative;
  text-align: left;
  font-size: 0.715rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 3px 6px 3px 12px;
  border-radius: 4px;
  border: none;
  background: var(--surface-alt);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
/* The spine. An ::before rather than a border so the radius stays round. */
.ev-cal-pill::before{
  content: "";
  position: absolute;
  left: 4px; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--cal-ink);
}
.ev-cal-pill:hover{ background: var(--surface-sunken); }
.ev-cal-pill:focus-visible{ outline: 2px solid var(--cal-ink); outline-offset: 1px; }

/* Types. Named for what they are, not for the colour, so the palette can
   change without the markup meaning something different. */
.ev-cal-pill.k-visit{   --cal-ink: var(--seal); }
.ev-cal-pill.k-nsse{    --cal-ink: var(--alert); }
.ev-cal-pill.k-treaty{  --cal-ink: #4C8DD9; }
.ev-cal-pill.k-meeting{ --cal-ink: #8B93A6; }
.ev-cal-pill.k-training{--cal-ink: var(--verified); }
.ev-cal-pill.k-press{   --cal-ink: #A579D6; }

/* An NSSE is the one that should catch the eye across a whole month. */
.ev-cal-pill.k-nsse{
  background: color-mix(in srgb, var(--alert) 14%, var(--surface-alt));
  color: var(--text-primary);
}

/* Already happened. Still there, still clickable, just not competing with the
   week you are actually planning. */
.ev-cal-pill.past{ opacity: 0.58; font-weight: 500; }
.ev-cal-pill.past:hover{ opacity: 1; }

.ev-cal-pill.unposted{
  background: transparent;
  color: var(--text-subtle);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ev-cal-pill.unposted::before{ background: var(--border-strong); }

/* ---- Legend ------------------------------------------------------------- */
.ev-cal-legend{
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 8px 20px 10px;
  border-bottom: 1px solid var(--border);
}
.ev-cal-legend span{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; color: var(--text-subtle);
}
.ev-cal-legend i{
  width: 3px; height: 11px; border-radius: 2px; background: var(--cal-ink, var(--text-subtle));
}
.ev-cal-legend .k-visit{   --cal-ink: var(--seal); }
.ev-cal-legend .k-nsse{    --cal-ink: var(--alert); }
.ev-cal-legend .k-treaty{  --cal-ink: #4C8DD9; }
.ev-cal-legend .k-meeting{ --cal-ink: #8B93A6; }
.ev-cal-legend .k-training{--cal-ink: var(--verified); }
.ev-cal-legend .k-press{   --cal-ink: #A579D6; }
.ev-cal-more{
  font-size: 0.7rem; color: var(--text-subtle); background: none; border: none;
  cursor: pointer; text-align: left; padding: 2px 6px;
}
.ev-cal-more:hover{ color: var(--verified); }

.ev-cal-list{ padding: 6px 20px 18px; }
.ev-cal-list-date{
  font-size: 0.78rem; font-weight: 700; color: var(--text-subtle);
  margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.03em;
}
.ev-cal-list-row{
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface-alt); margin-bottom: 6px; cursor: pointer; text-align: left;
}
.ev-cal-list-row:hover{ border-color: var(--verified); }
.ev-cal-list-row.unposted{ border-style: dashed; opacity: 0.75; }
.ev-cal-list-time{ font-size: 0.78rem; color: var(--text-subtle); min-width: 76px; font-family: var(--font-mono); }
.ev-cal-list-title{ font-weight: 600; font-size: 0.88rem; flex: 1; }
.ev-cal-list-chan{ font-size: 0.78rem; color: var(--text-subtle); }
/* A posted event whose Discord message was never linked. Marked on the row
   itself: it used to be visible only after opening the event, which is how one
   sat unnoticed until RSVP started feeling slow. */
.ev-cal-list-warn{
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--alert);
  border: 1px solid var(--alert); border-radius: 3px;
  padding: 1px 5px; margin-left: 8px; white-space: nowrap;
}

/* Event detail card */
.ev-detail-card{ max-width: 540px; border-left: 4px solid var(--seal); }
.ev-detail-actions{ display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 10px; }
.ev-detail-act{
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-alt); color: var(--text-subtle); cursor: pointer;
}
.ev-detail-act:hover{ color: var(--verified); border-color: var(--verified); }
.ev-detail-act.danger:hover{ color: var(--alert); border-color: var(--alert); }
.ev-detail-act .ev-ico{ width: 15px; height: 15px; }
.ev-detail-title{ font-size: 1.15rem; margin: 0 0 4px; }
.ev-detail-meta{ font-size: 0.85rem; color: var(--text-subtle); margin-bottom: 2px; }
/* Shown when an event posted to Discord but never got linked back (see
   action: "linkMessage" in functions/api/events.js) — a repair box, not a
   routine part of the card, so it reads as amber/attention rather than
   blending in with the rest of the detail info. */
.ev-detail-linkwarn{
  margin: 12px 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(230,126,34,0.12); border: 1px solid rgba(230,126,34,0.35);
}
.ev-detail-linkwarn p{ margin: 0 0 8px; font-size: 0.8rem; line-height: 1.5; color: var(--text-primary); }
.ev-detail-link-row{ display: flex; gap: 8px; }
.ev-detail-link-row input{
  flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 0.82rem;
}
.ev-detail-rsvps{ display: flex; gap: 8px; margin: 14px 0 4px; }
.ev-detail-badge{
  display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-alt);
  color: var(--text-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.ev-detail-badge:hover{ border-color: var(--verified); }
.ev-detail-roster{
  margin: 8px 0; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--surface-sunken); border: 1px solid var(--border); max-height: 160px; overflow-y: auto;
}
.ev-detail-roster-row{ font-size: 0.82rem; padding: 3px 0; }
/* Description can now run up to 800 characters (see longText() in
   functions/api/events.js) rather than being silently cut off at 500 — sized
   to stay readable at that length instead of just at a line or two. */
.ev-detail-info{ margin-top: 12px; font-size: 0.9rem; line-height: 1.6; color: var(--text-subtle); }
.ev-detail-info p{ margin: 0; }
.ev-detail-info.collapsed{
  max-height: 7.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
.ev-detail-footer{ margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.79rem; color: var(--text-subtle); }

/* Recent events */
.ev-item{
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--verified);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 11px;
  box-shadow: var(--shadow-sm);
}
.ev-item.unposted{ border-left-color: var(--alert); }
.ev-item-head{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.ev-item-head strong{ font-size: 0.9rem; color: var(--text-primary); word-break: break-word; }
.ev-tag{
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle); white-space: nowrap;
}
.ev-item-meta{ font-size: 0.79rem; color: var(--text-subtle); margin-top: 5px; }
.ev-item .act-btn{ margin-top: 10px; }

/* ==========================================================================
   Trainee Resources
   ========================================================================== */

.trainee-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.trainee-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Accent bar rather than a heavy left border — reads cleaner at this size. */
.trainee-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--seal);
  opacity: 0.8;
}
.trainee-card:hover{
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Document mark in a tinted tile, so the row has a clear anchor */
.trainee-doc{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(232,144,0,0.10);
  border: 1px solid rgba(232,144,0,0.28);
}
.trainee-doc svg{ width: 19px; height: 19px; color: var(--seal-deep); }

.trainee-meta{ flex: 1 1 auto; min-width: 0; }
.trainee-title{
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trainee-section{
  font-size: 0.77rem;
  color: var(--text-subtle);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Division badge, colour-matched to the Roles & Access tags */
.trainee-badge{
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  opacity: 0.9;
}
.trainee-badge.div-DT{ color: #4F7FD4; }
.trainee-badge.div-UT{ color: var(--verified); }
.trainee-badge.div-MSD{ color: #8B5CC7; }
.trainee-badge.div-all{ color: var(--text-subtle); }

/* Chevron slides on hover to signal it opens */
.trainee-go{
  flex: 0 0 auto;
  width: 15px; height: 15px;
  color: var(--text-subtle);
  transition: transform 0.18s ease, color 0.18s ease;
}
.trainee-card:hover .trainee-go{ transform: translateX(3px); color: var(--seal-deep); }

.doc-reader-note{
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--seal); padding-left: 10px; white-space: nowrap;
}

/* --- E-Manage: Staff Grid cards -------------------------------------- */
/* Card grid rather than a table row per person: the password reveal, the
   copy action and three separate buttons don't fit a spreadsheet cell, and
   this view is read far more than it's scanned in bulk. */

/* Search on the left, Add employee pinned to the right — the create action
   belongs at the top of the list it adds to, not buried under it. */
.sc-toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-toolbar .db-search{ flex: 1 1 auto; min-width: 0; }
.sc-add{ flex: 0 0 auto; margin-left: auto; }

/* Role headings break the grid into an org chart rather than one flat wall
   of cards — with eight roles, ordering alone stops carrying the structure. */
.sc-group{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
}
.sc-group:first-of-type{ margin-top: 12px; }
.sc-group-name{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.sc-group-count{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1;
  padding: 4px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-subtle);
}
.sc-group-rule{
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-strong);
}

.sc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 4px 0 8px;
}

.sc-card{
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Someone who has left still has a login until it's removed — dim the card
   so an archived record can't be mistaken for a working one at a glance. */
.sc-card-inactive{ opacity: 0.72; }

.sc-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
/* The person's name leads; their login sits under it as the secondary line. */
.sc-ident{ min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-name{
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  word-break: break-word;
}
.sc-user{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  word-break: break-all;
}
.sc-badge{
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--verified);
  color: var(--verified);
  background: transparent;
}
.sc-badge-off{
  border-color: var(--alert);
  color: var(--alert);
}

.sc-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.sc-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sc-stat{
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sc-stat-label{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sc-stat-value{
  font-size: 0.86rem;
  color: var(--text-primary);
  word-break: break-word;
}
.sc-muted{ color: var(--text-subtle); }
.sc-pw{ font-family: var(--font-mono); letter-spacing: 0.08em; }
/* Once revealed the value is a real password — let it wrap rather than
   clipping, since a partly-visible password is worse than a tall card. */
.sc-pw-shown{ letter-spacing: 0; font-size: 0.8rem; overflow-wrap: anywhere; }

.sc-show{
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid var(--seal);
  color: var(--seal);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
}
.sc-show:hover{ background: color-mix(in srgb, var(--seal) 14%, transparent); }

.sc-actions{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 2px;
}
.sc-btn{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 10px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.sc-btn:hover:not(:disabled){ background: var(--surface-sunken); }
.sc-btn:disabled{ opacity: 0.45; cursor: not-allowed; }
.sc-btn-primary{ border-color: var(--seal); color: var(--seal); }
.sc-btn-primary:hover:not(:disabled){ background: color-mix(in srgb, var(--seal) 14%, transparent); }
.sc-btn-danger{ border-color: var(--alert); color: var(--alert); }
.sc-btn-danger:hover:not(:disabled){ background: color-mix(in srgb, var(--alert) 14%, transparent); }

@media (max-width: 520px){
  .sc-toolbar{ flex-wrap: wrap; }
  .sc-toolbar .db-search{ flex: 1 1 100%; }
  .sc-add{ width: 100%; margin-left: 0; }
  .sc-grid{ grid-template-columns: 1fr; }
  .sc-stats{ grid-template-columns: 1fr; }
  .sc-actions{ grid-template-columns: 1fr; }
}

/* --- NSSE Handler: Components V2 message builder ------------------------- */
/* Two columns: the canvas (the message being built) and the palette. Nodes
   nest, so the canvas indents each level with a left rule the way a component
   tree reads in a devtools panel. */

.nsse-typebar{ display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.nsse-type{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  padding: 9px 14px;
  border: 1px solid var(--seal);
  color: var(--seal);
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nsse-type:hover{ background: color-mix(in srgb, var(--seal) 14%, transparent); }
.nsse-type-blank{ border-color: var(--border-strong); color: var(--text-subtle); }

.nsse-list{ display: flex; flex-direction: column; gap: 10px; }
.nsse-row{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  cursor: pointer;
}
.nsse-row:hover{ border-color: var(--seal); }
.nsse-row-main{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.nsse-row-name{ font-weight: 600; color: var(--text-primary); }
.nsse-row-meta{ font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-subtle); }
.nsse-badge{
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--border-strong); color: var(--text-subtle);
}
.nsse-badge-live{ border-color: var(--verified); color: var(--verified); }

.nsse-topbar{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.nsse-spacer{ flex: 1 1 auto; }
.nsse-count{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-subtle); }
/* Over the limit is a hard failure at Discord, not a style choice — so it
   reads as an alert rather than a hint. */
.nsse-count-over{ color: var(--alert); font-weight: 600; }

/* Flex rather than equal grid tracks: the four fields don't want equal
   widths. Channel holds a name like "#web-nsse-handler" *and* an Add button
   beside it, so on equal tracks the select was left too narrow to show the
   name it had selected. Each field now asks for the width its content needs
   and they wrap together when the row runs out of room. */
.nsse-meta{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; align-items: flex-start; }
.nsse-meta > .ev-field{ min-width: 0; }
.nsse-f-name{ flex: 1 1 220px; }
.nsse-f-channel{ flex: 1.6 1 330px; }
.nsse-f-event{ flex: 1.3 1 260px; }
.nsse-f-pings{ flex: 1 1 180px; }
/* Without this the select refuses to shrink below its longest option and
   pushes the Add button off the end instead of ellipsising. */
.nsse-meta select{ width: 100%; min-width: 0; }
.nsse-pings{ display: flex; flex-wrap: wrap; gap: 10px; }
.nsse-ping{ font-size: 0.82rem; display: inline-flex; align-items: center; gap: 6px; }

.nsse-status{ min-height: 1.2em; font-size: 0.84rem; color: var(--text-subtle); margin: 4px 0 10px; }
.nsse-problem, .nsse-warning{
  font-size: 0.82rem; margin: 0 0 8px; padding: 9px 12px; border-radius: var(--r-sm);
  border-left: 3px solid var(--alert); background: color-mix(in srgb, var(--alert) 10%, transparent);
  color: var(--text-primary);
}
.nsse-warning{ border-left-color: var(--seal); background: color-mix(in srgb, var(--seal) 12%, transparent); }

/* Flex, not grid, deliberately.
   With grid the two widths live in grid-template-columns on the parent, so
   the sizes are positional: the first value belongs to whichever child comes
   first in the markup. Moving the palette from the right to the left silently
   handed it the canvas's width, which is how it ended up three times too wide.
   Putting the width on the element itself makes it independent of order — the
   palette is 260px because it is the palette, not because it is second. */
.nsse-workspace{ display: flex; gap: 24px; align-items: flex-start; }
.nsse-palette{ flex: 0 0 260px; width: 260px; }
.nsse-canvas{ flex: 1 1 auto; }
.nsse-h{ font-family: var(--font-display); font-size: 0.92rem; margin: 0 0 10px; }
.nsse-canvas{ min-width: 0; }   /* lets long content shrink instead of forcing the row wider */
.nsse-canvas-sub{ font-size: 0.78rem; color: var(--text-subtle); margin: -4px 0 12px; }
.nsse-palette{
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 14px; background: var(--surface-alt); position: sticky; top: 16px;
}
.nsse-palette-sub{ font-size: 0.74rem; color: var(--text-subtle); margin: 0 0 12px; }
.nsse-pgroup{ margin-bottom: 14px; }
.nsse-pgroup-name{
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-subtle); display: block; margin-bottom: 6px;
}
.nsse-pitem{
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); padding: 7px 10px; margin-bottom: 5px;
}
.nsse-pitem:hover:not(:disabled){ border-color: var(--seal); }
.nsse-pitem:disabled{ opacity: 0.4; cursor: not-allowed; }
.nsse-pitem-name{ display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.nsse-pitem-blurb{ display: block; font-size: 0.7rem; color: var(--text-subtle); }

.nsse-node{
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  background: var(--surface);
}
.nsse-node-head{
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer;
}
.nsse-node-head:hover{ background: var(--surface-sunken); }
/* The block's own title leads; what kind of thing it is sits quietly after it.
   The reverse — type first, content second — is what made the tree read like
   a debugger rather than a document. */
.nsse-node-sum{
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary); flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsse-node-kind{
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-subtle); flex: 0 0 auto;
}
.nsse-dot{
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}
/* Reorder and delete are always available but stay out of the way until the
   row is actually being worked on. */
.nsse-node-actions{ display: flex; gap: 4px; flex: 0 0 auto; opacity: 0; transition: opacity 0.12s ease; }
.nsse-node:hover > .nsse-node-head > .nsse-node-actions,
.nsse-node-head:focus-within > .nsse-node-actions{ opacity: 1; }
@media (hover: none){ .nsse-node-actions{ opacity: 1; } }
.nsse-ic{
  border: none; background: none; color: var(--text-subtle); cursor: pointer;
  font-size: 0.7rem; padding: 3px 6px; border-radius: 3px; line-height: 1;
}
.nsse-ic:hover:not(:disabled){ background: var(--surface-sunken); color: var(--text-primary); }
.nsse-ic:disabled{ opacity: 0.3; cursor: not-allowed; }
.nsse-ic-del:hover{ color: var(--alert); }

.nsse-node-body{ padding: 4px 12px 12px; border-top: 1px solid var(--border); }
.nsse-f{ display: block; margin: 10px 0; }
.nsse-f > span{
  display: block; font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 4px;
}
.nsse-f textarea, .nsse-f input[type=text], .nsse-f input[type=url], .nsse-f select{ width: 100%; }
.nsse-hint{ font-size: 0.74rem; color: var(--text-subtle); margin: 8px 0 0; }

.nsse-children{ padding: 0 10px 10px 18px; margin-left: 6px; border-left: 1px solid var(--border); }
/* Collapsed by default — the choices only appear when asked for, instead of
   every block carrying five permanently visible buttons. */
.nsse-add{ margin-top: 6px; }
.nsse-add-sum{
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 0.74rem; color: var(--text-subtle);
  padding: 5px 11px; border: 1px dashed var(--border-strong); border-radius: 999px;
}
.nsse-add-sum::-webkit-details-marker{ display: none; }
.nsse-add-sum:hover{ border-color: var(--seal); color: var(--seal); }
.nsse-add[open] > .nsse-add-sum{ border-style: solid; color: var(--seal); border-color: var(--seal); }
/* Explicitly hidden when closed. A browser hides a closed <details>'s content
   with its own rule, but setting `display` on that content overrides it — so
   without this pair the menu stayed permanently open, which is exactly the
   clutter it was meant to remove. */
.nsse-add-menu{ display: none; }
.nsse-add[open] > .nsse-add-menu{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; padding: 9px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-alt);
}
.nsse-addbtn{
  font-size: 0.74rem; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface); color: var(--text-primary);
}
.nsse-addbtn:hover{ border-color: var(--seal); color: var(--seal); }

.nsse-colorrow{ display: flex; gap: 8px; align-items: center; }
.nsse-colorrow input[type=color]{ width: 44px; height: 32px; padding: 0; border: 1px solid var(--border-strong); background: none; }
.nsse-swatches{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nsse-swatch{
  width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.25);
}

.nsse-gal{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.nsse-galitem{ display: flex; align-items: center; gap: 10px; }
.nsse-galitem img{ width: 64px; height: 44px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.nsse-galitem input{ flex: 1 1 auto; min-width: 0; }
.nsse-thumb{ width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 8px; }
.nsse-opt{ display: flex; gap: 8px; margin-bottom: 6px; }
.nsse-opt input{ flex: 1 1 0; min-width: 0; }

@media (max-width: 860px){
  /* Canvas first on narrow screens — the message matters more than the
     palette, which is one tap away at the bottom. */
  .nsse-workspace{ flex-direction: column; }
  .nsse-palette{ order: 2; flex: 1 1 auto; width: auto; position: static; }
  .nsse-canvas{ order: 1; width: 100%; }
  .nsse-children{ padding-left: 12px; }
}

.nsse-chrow{ display: flex; gap: 8px; align-items: center; }
.nsse-chrow select{ flex: 1 1 auto; min-width: 0; }
.nsse-chadd{ flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 0.78rem; }

/* Event placeholder chips inside a text editor. */
.nsse-vars{ display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 2px; }
.nsse-vars-label{
  width: 100%; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: 2px;
}
.nsse-var{
  font-family: var(--font-mono); font-size: 0.66rem;
  padding: 3px 7px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface); color: var(--text-subtle);
}
.nsse-var:hover{ border-color: var(--seal); color: var(--seal); }

/* Small explanatory line under a composer field. */
.ev-hint{ display: block; font-size: 0.74rem; color: var(--text-subtle); margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Privacy Policy (privacy.html)
   A formal-notice layout. Every element — clause numbers, clause text, section
   headings and the two callout boxes — is aligned to one of two columns: the
   article edge, or the article edge plus --cl-gutter. Numbers live in the
   gutter, prose in the column. Keeping the gutter in rem (not em) means it
   does not drift when a child sets its own font-size.
--------------------------------------------------------------------------- */
.policy{
  --cl-gutter: 2.95rem;
  max-width: 78ch;
  margin: 0 0 22px;
  font-size: 0.945rem;
  line-height: 1.72;
  color: var(--text-muted);
}
.policy p{ margin: 0 0 15px; }
.policy code{
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-primary);
}
.policy strong{ color: var(--text-primary); font-weight: 600; }
.policy a{
  color: var(--verified);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.policy a:hover{ text-decoration-thickness: 2px; }
.policy a:focus-visible{
  outline: 2px solid var(--verified);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Head block — inner padding matches the gutter so its text shares the column */
.policy-head{
  border: 1px solid var(--border);
  border-top: 3px solid var(--seal);
  border-radius: 6px;
  background: var(--surface);
  padding: 22px var(--cl-gutter) 8px;
  margin-bottom: 30px;
}
.policy-org{
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin: 0 0 16px;
}
.policy-org span{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.policy-control{ margin: 0; padding: 0; border-top: 1px solid var(--border); }
.policy-control > div{
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.policy-control > div:last-child{ border-bottom: 0; }
.policy-control dt{
  flex: 0 0 168px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding-top: 2px;
}
.policy-control dd{
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* Non-affiliation callout — 3px border + padding sums to the gutter */
.policy-notice{
  border-left: 3px solid var(--seal);
  background: var(--surface-alt);
  border-radius: 0 6px 6px 0;
  padding: 18px var(--cl-gutter) 4px calc(var(--cl-gutter) - 3px);
  margin: 0 0 34px;
}
.policy .policy-notice h2{
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 10px;
  padding: 0;
  text-indent: 0;
  border: 0;
}
.policy-notice p:last-child{ margin-bottom: 15px; }

/* Section headings — same hanging structure as clauses, so heading text and
   clause text share one left edge. */
.policy h2{
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 34px 0 14px;
  padding: 0 0 7px var(--cl-gutter);
  text-indent: calc(-1 * var(--cl-gutter));
  border-bottom: 1px solid var(--border);
}
.policy-num{
  display: inline-block;
  min-width: var(--cl-gutter);
  color: var(--seal);
}

/* Hanging clause numbers. min-width equals the gutter exactly, so the first
   line of a clause starts on the same column as its wrapped lines. */
.policy > p{
  padding-left: var(--cl-gutter);
  text-indent: calc(-1 * var(--cl-gutter));
}
.policy .cl{
  display: inline-block;
  min-width: var(--cl-gutter);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-subtle);
}

.policy-alpha{
  list-style: lower-alpha;
  margin: 0 0 15px;
  padding-left: calc(var(--cl-gutter) + 2.1rem);
}
.policy-alpha li{ margin-bottom: 9px; padding-left: 4px; }

.policy-end{
  padding: 18px 0 0 !important;
  text-indent: 0 !important;
  margin: 40px 0 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

@media (max-width: 640px){
  .policy{ --cl-gutter: 2.5rem; font-size: 0.9rem; }
  .policy-head{ padding-top: 18px; }
  .policy-control > div{ flex-direction: column; gap: 2px; }
  .policy-control dt{ flex-basis: auto; }
  .policy-alpha{ padding-left: calc(var(--cl-gutter) + 1.5rem); }
}

/* ---------------------------------------------------------------------------
   Event reminders (Scheduler composer + event cards)
--------------------------------------------------------------------------- */
/* Lives inside the Advanced "Reminders" tab, so it inherits the panel's own
   frame instead of drawing a second one. */
.ev-remind{ padding: 2px 0 0; }
.ev-remind-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ev-remind-head > span{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}
.ev-remind-state{
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text-subtle);
}

.ev-remind-cfg{ margin-top: 11px; border-top: 1px solid var(--border); padding-top: 10px; }
.ev-remind-cfg > summary{
  cursor: pointer;
  font-size: 0.76rem;
  color: var(--text-muted);
  list-style: none;
}
.ev-remind-cfg > summary::-webkit-details-marker{ display: none; }
.ev-remind-cfg > summary::before{ content: "\25B8  "; color: var(--text-subtle); }
.ev-remind-cfg[open] > summary::before{ content: "\25BE  "; }
.ev-remind-cfg-body{ padding-top: 11px; }
.ev-remind-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.ev-remind-line input[type="text"]{
  flex: 0 1 240px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
.ev-remind-saved{
  margin-left: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-subtle);
}

/* Card tag — colour carries the state so it reads at a glance in a list. */
.ev-remind-tag{ font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; }
.ev-remind-tag.on{ color: var(--verified); }
.ev-remind-tag.sent{ color: var(--text-subtle); }
.ev-remind-tag.off{ color: var(--text-subtle); }

/* Per-person reminder opt-out, in the settings popup on every page. */
.theme-popup-remind{ margin-top: 16px; }
/* Heading and switch share a row — matches Theme and Zoom, which carry no
   explanatory copy either. */
.theme-popup-remind h4{ margin: 0; }
.theme-popup-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
}
/* The one-line explanation under the Event Reminders switch. It is opt-in, so
   the switch has to say what turning it on will do. */
.theme-popup-hint{
  margin: 2px 0 0; font-size: 0.76rem; line-height: 1.35;
  color: var(--text-subtle);
}
.theme-popup-note{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  line-height: 1.5;
  color: var(--alert);
}
.theme-switch{ display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.theme-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.theme-switch span{
  width: 34px; height: 19px; border-radius: 999px;
  background: var(--border-strong); position: relative;
  transition: background 0.18s ease;
}
.theme-switch span::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: transform 0.18s ease;
}
.theme-switch input:checked + span{ background: var(--verified); }
.theme-switch input:checked + span::after{ transform: translateX(15px); }
.theme-switch input:disabled + span{ opacity: 0.5; }
.theme-switch input:focus-visible + span{ box-shadow: 0 0 0 3px rgba(31,122,107,0.3); }

/* Diagnostics buttons — inline-block siblings with no whitespace between them
   in the markup sat flush against each other. */
.diag-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.diag-actions .build-stamp{ margin-left: auto; }

/* NSSE type templates — a type that opens from a saved template is marked, and
   can have it removed without going into the builder. */
.nsse-typebar-hint{
  margin: 0 0 12px;
  font-size: 0.83rem;
  color: var(--text-subtle);
}
.nsse-type-wrap{ display: inline-flex; align-items: stretch; }
.nsse-type.has-template{
  border-color: var(--verified);
  color: var(--text-primary);
}
.nsse-tpl-dot{
  margin-left: 7px;
  font-size: 0.5rem;
  vertical-align: middle;
  color: var(--verified);
}
.nsse-tpl-clear{
  margin-left: -1px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-sunken);
  color: var(--text-subtle);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.nsse-tpl-clear:hover{ color: var(--alert); border-color: var(--alert); }

.nsse-f-type{ min-width: 190px; }

/* Emoji shortcuts beside the event variables in the NSSE text editor. */
.nsse-emoji-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}
.nsse-emoji{
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.95rem;
  line-height: 1.1;
  cursor: pointer;
}
.nsse-emoji:hover{ border-color: var(--verified); background: var(--surface-alt); }

/* Reaction picker in the NSSE meta row. */
.nsse-f-react{ min-width: 230px; }
.nsse-react-pick{ display: flex; flex-wrap: wrap; gap: 5px; }
.nsse-react{
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 1rem;
  line-height: 1.1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.14s ease, border-color 0.14s ease;
}
.nsse-react:hover{ opacity: 0.8; }
.nsse-react.on{ opacity: 1; border-color: var(--verified); background: var(--surface-alt); }
.nsse-react-hint{
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  color: var(--text-subtle);
}
.nsse-hint-warn{ color: var(--alert); }

/* State Dept Restrictions — a read-only mirror of a Trello list, shown on the
   Operational Manual. */
.restrict-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.restrict-name{
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--alert);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.88rem;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.restrict-meta{
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--text-subtle);
}
/* Deliberately loud: a stale restrictions list that looks current is the whole
   failure mode this feature has to avoid. */
.wrap-restrict{
  max-width: min(1500px, calc(100% - 40px));
  margin-inline: auto;
  transition: max-width 0.2s ease, margin 0.2s ease;
}
/* With the drawer open the list has to give up the width it occupies —
   otherwise the rightmost column sits underneath it, visible but unclickable.
   The grid reflows to fewer columns instead, so every entry stays reachable
   and you can go straight from one to the next. */
@media (min-width: 601px){
  body.restrict-drawer-open .wrap-restrict{
    max-width: calc(100% - 480px);
    margin-left: 20px;
    margin-right: 460px;
  }
}

.nsse-row-archived{ opacity: 0.72; }
.nsse-badge-archived{
  border-color: var(--border-strong) !important;
  color: var(--text-subtle) !important;
}

/* Reload the calendar's events without reloading the page. */
.ev-cal-refresh{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.ev-cal-refresh:hover{ border-color: var(--border-strong); color: var(--text-primary); }
.ev-cal-refresh svg{ width: 16px; height: 16px; }
.ev-cal-refresh.spinning{ opacity: 0.6; cursor: default; }
.ev-cal-refresh.spinning svg{ animation: ev-spin 0.8s linear infinite; }
@keyframes ev-spin{ to { transform: rotate(360deg); } }

/* Protocol Viper. Loud on purpose — this is the one thing on the Duty Desk
   that has to interrupt somebody who came to the page for something else. */
.alert-viper{
  border: 1px solid var(--alert);
  border-left: 5px solid var(--alert);
  border-radius: var(--r-md);
  background: rgba(179,67,47,0.08);
  padding: 22px 26px;
  margin: 0 0 8px;
}
.alert-viper-flag{
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--alert);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.alert-viper-title{
  margin: 12px 0 8px;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.alert-viper-desc{
  margin: 0;
  max-width: 70ch;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-primary);
}
.alert-viper-btn{
  margin-top: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--alert);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.alert-viper-btn:hover{ filter: brightness(1.08); }
.alert-viper-note{
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-subtle);
}

.restrict-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.restrict-count{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Bigger than a list row on purpose: this is read at a glance by someone on
   the door deciding whether the person in front of them is on it. */
.restrict-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}
.restrict-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--alert);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.restrict-card:hover,
.restrict-card:focus-visible{
  border-color: var(--border-strong);
  border-left-color: var(--alert);
  transform: translateY(-1px);
}
.restrict-card-head{ display: flex; align-items: center; gap: 15px; }
.restrict-card-id{ min-width: 0; }
.restrict-card-name{
  display: block;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.restrict-card-sub{
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-subtle);
}
.restrict-avatar{
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}
.restrict-avatar-lg{
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}
.restrict-avatar-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--text-subtle);
}
.restrict-aliases{ display: flex; flex-wrap: wrap; gap: 6px; }
.restrict-alias{
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.restrict-alias-more{ opacity: 0.75; }
.restrict-card-foot{
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.restrict-flag{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.restrict-flag-none{ opacity: 0.55; }

/* The card currently open in the side panel. */
.restrict-card.selected{
  border-color: var(--alert);
  box-shadow: 0 0 0 1px var(--alert);
}

/* Case detail as a drawer, not a modal: the list stays visible and usable, so
   checking a second name doesn't mean losing your place in the first. */
.restrict-drawer{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: -18px 0 48px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow: hidden;
}
.restrict-drawer.open{ transform: translateX(0); }

/* The display-settings cog is fixed to the bottom-right corner, which is
   exactly where the drawer's Save button lands. Stand it down while the drawer
   is open rather than layering two controls on the same pixels. */
body.restrict-drawer-open .theme-fab{ display: none; }

.restrict-drawer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 0;
}
.restrict-drawer-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.restrict-drawer-close{
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 2px;
  color: var(--text-subtle);
}
.restrict-drawer-close:hover{ color: var(--text-primary); }

.restrict-portrait-wrap{
  display: flex;
  justify-content: center;
  padding: 14px 22px 4px;
}
/* The full-body Roblox render, which is transparent-backed and taller than it
   is wide — hence the sunken plate behind it rather than a crop. */
.restrict-portrait{
  width: 150px;
  height: 150px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.restrict-portrait-none{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  color: var(--text-subtle);
}
.restrict-drawer-name{
  margin: 12px 22px 0;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.restrict-drawer-sub{
  margin: 5px 22px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.restrict-drawer-body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 22px 20px;
}
.restrict-drawer-body label{
  display: block;
  margin: 14px 0 5px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.restrict-drawer-body input[type="text"],
.restrict-drawer-body textarea{
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.restrict-drawer-body textarea{ min-height: 110px; resize: vertical; line-height: 1.6; }
.restrict-drawer-foot{
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.restrict-drawer-meta{ margin-top: 18px; }

.restrict-field{
  padding: 15px 0;
  border-top: 1px solid var(--border);
}
.restrict-field:first-child{ border-top: none; padding-top: 4px; }
.restrict-field h4{
  margin: 0 0 9px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
/* Block, not flex: notes and evidence are prose with line breaks in them, and
   a flex row put two evidence links side by side as though they were chips. */
.restrict-field-body{
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.restrict-field-body a{ overflow-wrap: anywhere; }
.restrict-field-empty{
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-subtle);
  opacity: 0.8;
}
.restrict-save-msg{
  margin: 12px 0 0;
  font-size: 0.84rem;
  color: var(--text-subtle);
  min-height: 1.2em;
}
.restrict-save-bad{ color: var(--alert); }

@media (max-width: 600px){
  .restrict-cards{ grid-template-columns: 1fr; }
  /* Full width down here, so the drawer really does replace the page and a
     backdrop is warranted — unlike on a desktop, where the list stays usable. */
  .restrict-drawer{ width: 100%; border-left: none; }
  .restrict-drawer::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: -1;
  }
}

.restrict-alert{
  border: 1px solid var(--alert);
  border-left: 3px solid var(--alert);
  border-radius: var(--r-sm);
  background: rgba(179,67,47,0.08);
  color: var(--text-primary);
  padding: 11px 14px;
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.55;
}


/* Duty Desk tile reordering (desk-order.js) -------------------------------- */

.desk-tile{ position: relative; }
.desk-grip{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-subtle);
  cursor: grab;
  /* Out of the way until the tile is under the cursor — a handle on every
     card all the time is visual noise on a page people mostly just read. */
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.desk-tile:hover .desk-grip,
.desk-grip:focus-visible{ opacity: 1; }
.desk-grip:hover{ border-color: var(--border-strong); background: var(--surface-alt); }
.desk-grip:active{ cursor: grabbing; }
.desk-grip svg{ width: 15px; height: 15px; fill: currentColor; }
.desk-tile.desk-dragging{ opacity: 0.45; }

/* Touch has no hover, so the handle has to be permanently visible there or it
   can't be reached at all. */
@media (hover: none){
  .desk-grip{ opacity: 1; }
}

/* The dropdown card's column name is editable (Executive Portal → Names &
   Options), so it needs to look like a field rather than a heading. */
.schema-optname{
  width: 100%;
  margin: 2px 0 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ==========================================================================
   Staff Profile + activity requests
   ========================================================================== */

.welcome-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--seal);
}
.welcome-link:hover{ border-bottom-color: var(--seal-deep); }
:root[data-theme="dark"] .welcome-link:hover{ border-bottom-color: var(--seal-pale); }

.pf-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}
.pf-stat{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--seal);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.pf-stat-label{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.pf-stat-value{
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.pf-stat-sub{ font-size: 0.76rem; color: var(--text-subtle); }

.pf-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.pf-card{
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pf-card-wide{ margin-bottom: 16px; }
.pf-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pf-card-title{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.pf-card-head .pf-card-title{ margin-bottom: 0; }

.pf-rows{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  margin: 0;
  font-size: 0.9rem;
}
.pf-rows dt{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  align-self: center;
}
.pf-rows dd{ margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }

.pf-pill{
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pf-pill-ok{ border-color: var(--verified); color: var(--verified); }
.pf-pill-bad{ border-color: var(--alert); color: var(--alert); }

.pf-note{ margin: 10px 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--text-subtle); }
.pf-empty{ margin: 8px 0 0; font-size: 0.88rem; color: var(--text-subtle); opacity: 0.85; }
.pf-btn{ margin-top: 14px; }
.pf-card-head .pf-btn{ margin-top: 0; }
.pf-sub{
  margin: 22px 0 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.pf-acts{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pf-act{
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
}
.pf-act-done{ opacity: 0.78; }
.pf-act-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pf-act-type{ font-weight: 600; font-size: 0.94rem; color: var(--text-primary); }
.pf-act-meta{
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-subtle);
}
.pf-act-notes{
  margin: 8px 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.pf-act-actions{ display: flex; gap: 8px; margin-top: 11px; }
.pf-act-actions .pf-btn{ margin-top: 0; }
.pf-approver{ margin-top: 14px; }

/* The one-time temporary password. Deliberately conspicuous — it is shown
   once and is gone on reload. */
.pf-temp{
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--seal-deep);
  border-radius: var(--r-sm);
  background: rgba(232,144,0,0.08);
}
.pf-temp-label{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal-deep);
}
:root[data-theme="dark"] .pf-temp-label{ color: var(--seal-pale); }
.pf-temp-value{
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  user-select: all;
}
.pf-save-msg{ margin: 10px 0 0; font-size: 0.84rem; color: var(--text-subtle); min-height: 1.2em; }
.pf-save-bad{ color: var(--alert); }
.pf-queue{ min-height: 40px; }

.pf-links{ display: flex; flex-wrap: wrap; gap: 8px; }
.pf-links .pf-btn{ margin-top: 14px; }

/* --- Upcoming Visits, World Flags page ------------------------------------
   The nations with a visit on the calendar, lifted to the top of a list of
   135 rows. Read-only: a shortcut to the right row, not a second place to
   edit one. */
.visit-block{ margin: 0 0 26px; }
.visit-block .db-table tbody tr{ background: var(--surface); }
.visit-title{ display: block; font-weight: 700; }
.visit-when{
  display: block; font-size: 0.78rem; color: var(--text-subtle);
  margin-top: 2px; white-space: nowrap;
}
/* The copy button is absolutely positioned at the right edge of its cell, and
   the main table reserves room for it with padding on the input. These cells
   hold plain text, so they have to reserve it themselves or the icon sits on
   top of the last digits of the id. */
.visit-block .db-cell-copy{ padding-right: 42px; position: relative; }

/* An event already under way still shows — it drops off an hour after it
   starts — so it is marked rather than silently looking like one to come. */
.visit-block tr.visit-under-way .visit-when{
  color: var(--alert); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Duty Desk — Upcoming Events rail
   Posted events from the Scheduler, beside the page tiles. Collapses under
   them on narrow screens rather than squeezing both into a column each.
   ========================================================================== */
.desk-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}
.desk-main{ min-width: 0; }

.desk-rail{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 16px 6px;
  position: sticky;
  top: 18px;
}
.rail-head h3{ margin: 2px 0 12px; font-size: 1.05rem; }

.rail-event{
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.rail-event:first-child{ border-top: 0; padding-top: 0; }
.rail-event h4{ margin: 0 0 3px; font-size: 0.94rem; line-height: 1.3; }
.rail-when{
  display: block; font-size: 0.79rem; color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.rail-meta{ display: block; font-size: 0.76rem; color: var(--text-subtle); margin-top: 2px; }
.rail-live{
  color: var(--alert); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; font-size: 0.72rem;
}

/* RSVP row. Three buttons, the held one filled — the state has to be legible
   at a glance or people click again to check, which un-RSVPs them. */
.rail-rsvp{ display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.rail-btn{
  font: inherit; font-size: 0.78rem; line-height: 1;
  padding: 6px 9px; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
}
.rail-btn:hover{ border-color: var(--text); }
.rail-btn[aria-pressed="true"]{
  background: var(--verified); border-color: var(--verified); color: #fff; font-weight: 700;
}
.rail-btn[disabled]{ opacity: 0.45; cursor: default; }
.rail-counts{
  display: block; font-size: 0.76rem; color: var(--text-subtle); margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.rail-note{ font-size: 0.79rem; color: var(--text-subtle); margin: 0 0 10px; }
.rail-empty{ font-size: 0.86rem; color: var(--text-subtle); padding: 2px 0 12px; }

@media (max-width: 900px){
  .desk-split{ grid-template-columns: 1fr; }
  .desk-rail{ position: static; }
}

/* --- Duty Desk rail: More information ------------------------------------
   The flag, who the event is for, and who is coming — three things otherwise
   spread across three pages. Only the diplomatic side and the Director can
   open it, so it is not drawn at all for anyone else. */
.rail-more{
  font: inherit; font-size: 0.76rem; line-height: 1;
  margin-top: 9px; padding: 5px 0; cursor: pointer;
  background: none; border: 0; color: var(--text-subtle);
  text-decoration: underline; text-underline-offset: 3px;
}
.rail-more:hover{ color: var(--text); }

/* The card itself. Narrower than a board modal — it is a briefing, not a form
   — and it only ever opens from the Scheduler rail. */
.brief-overlay{ z-index: 240; }
.brief-card{ max-width: 520px; position: relative; padding: 26px 28px 24px; }
.brief-card h3{ margin: 0 6px 2px 0; }
.brief-when{
  margin: 0 0 16px; font-size: 0.83rem; color: var(--text-subtle);
}
.brief-close{
  position: absolute; top: 12px; right: 14px;
  font: inherit; font-size: 1.35rem; line-height: 1;
  background: none; border: 0; cursor: pointer;
  color: var(--text-subtle); padding: 4px 8px; border-radius: 4px;
}
.brief-close:hover{ color: var(--text); }

.rail-brief{
  padding: 12px 13px;
  background: var(--surface-alt, rgba(127,127,127,0.07));
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.86rem; line-height: 1.5;
}
.rail-brief-block{ margin-bottom: 10px; }
.rail-brief-block:last-child{ margin-bottom: 0; }
.rail-brief h5{
  margin: 0 0 2px; font-size: 0.72rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-subtle);
}
.rail-brief-meta{ display: block; }
.rail-brief-none{ color: var(--text-subtle); font-style: italic; }

/* Decal and mesh ids, in a two-column list so they line up for reading off. */
.rail-brief-ids{
  display: grid; grid-template-columns: auto 1fr; gap: 1px 10px;
  margin: 6px 0 0;
}
.rail-brief-ids dt{ color: var(--text-subtle); }
.rail-brief-ids dd{
  margin: 0; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
}

/* Copy button inside the More information card.
   Its own class rather than .db-copy: that one is absolutely positioned to sit
   at the right edge of a table cell, which here would park it over the wrong
   thing. This sits inline, next to the value it copies. */
.rail-brief-nation{ display: flex; align-items: center; gap: 6px; }
.rail-copy{
  width: 20px; height: 20px; padding: 2px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-subtle); cursor: pointer; opacity: 0.55;
  transition: opacity 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.rail-copy svg{ width: 12px; height: 12px; }
.rail-copy:hover{ opacity: 1; color: var(--verified); border-color: var(--border-strong); }
.rail-copy:focus-visible{ opacity: 1; outline: 2px solid var(--verified); outline-offset: 1px; }
.rail-copy.copied{ opacity: 1; color: var(--verified); border-color: var(--verified); }

.rail-brief-line{ margin-top: 3px; }
.rail-brief-line strong{ font-weight: 700; }

/* ---- Help guide ----------------------------------------------------------
   Opened from the settings gear. Taller and narrower than the board modals:
   this is a document to read down, not a form to fill in. */
.theme-popup-help{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.theme-help-btn{
  width: 100%; padding: 7px 10px;
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  color: var(--text); font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.theme-help-btn:hover{ border-color: var(--border-strong); color: var(--verified); }

.help-card{
  max-width: 640px;
  max-height: min(82vh, 860px);
  display: flex; flex-direction: column;
  padding: 0;
}
.help-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
}
.help-head h3{ margin: 0; font-size: 1.05rem; }
.help-close{
  background: none; border: none; color: var(--text-subtle);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.help-close:hover{ color: var(--text); }

/* The scrolling half. Scrolls inside the card so the header and tabs stay put
   on a long section. */
.help-body{ overflow-y: auto; padding: 0 24px 22px; }
.help-loading{ color: var(--text-subtle); padding: 18px 0; }

.help-tabs{
  display: flex; gap: 6px;
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
  padding: 14px 0 12px;
}
.help-tab{
  padding: 5px 12px; font: inherit; font-size: 0.8rem; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-subtle);
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.help-tab:hover{ color: var(--text); border-color: var(--border-strong); }
.help-tab.active{ color: var(--verified); border-color: var(--verified); }

/* Says plainly that this half is not everybody's, so nobody quotes it at an
   agent who cannot see it. */
.help-band{
  margin: 4px 0 14px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm, 6px);
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-subtle);
}

.help-section{ margin-top: 18px; }
.help-section:first-child{ margin-top: 6px; }
.help-section > h4{
  margin: 0 0 8px; font-size: 0.78rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-subtle);
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.help-item{ margin: 12px 0 0; }
.help-item h5{ margin: 0 0 5px; font-size: 0.9rem; font-weight: 650; }
.help-item ul{ margin: 0; padding-left: 18px; }
.help-item li{
  margin: 0 0 4px; font-size: 0.86rem; line-height: 1.5;
  color: var(--text-subtle);
}

@media (max-width: 600px){
  .help-card{ max-height: 88vh; }
  .help-head{ padding: 16px 18px 12px; }
  .help-body{ padding: 0 18px 18px; }
}

/* ---- Case Logging (Operational Archive) ----------------------------------
   Two things get read here: a form somebody fills in under time pressure just
   after an event, and an archive somebody skims looking for one case. Both are
   laid out for scanning rather than as a stack of plain fields. */

.case-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 12px);
  padding: 20px 22px;
  margin: 0 0 18px;
}
.case-panel-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.case-panel-head h3{ margin: 0; font-size: 1rem; }
.case-panel-sub{ margin: 3px 0 0; font-size: 0.83rem; color: var(--text-subtle); }

.case-pill{
  flex: 0 0 auto; font-size: 0.74rem; letter-spacing: 0.04em;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px;
  color: var(--text-subtle);
}
.case-pill.live{ color: var(--verified); border-color: var(--verified); }

/* ---- The form ---- */
.case-form-grid{ display: grid; gap: 14px; }
.case-field-wide{ margin: 0; }
.case-form-grid label{
  display: block; font-size: 0.78rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: 5px;
}
.case-form-grid select,
.case-form-grid input[type="text"],
.case-form-grid textarea{
  width: 100%; font: inherit; font-size: 0.9rem;
  background: var(--bg, transparent); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  padding: 9px 11px;
}
.case-form-grid textarea{ resize: vertical; line-height: 1.55; }
.case-form-grid select:focus,
.case-form-grid input[type="text"]:focus,
.case-form-grid textarea:focus{
  outline: none; border-color: var(--verified);
}
.case-optional{ font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-subtle); }
.case-required{
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--alert); opacity: 0.85;
}
.case-hint{ display: block; font-size: 0.76rem; color: var(--text-subtle); margin-top: 5px; }
.case-count{
  display: block; font-size: 0.74rem; color: var(--text-subtle);
  margin-top: 5px; text-align: right; font-variant-numeric: tabular-nums;
}
.case-count.near{ color: var(--alert); }

/* Pasted links shown back, so four links look like four things. */
.case-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.case-chip{
  font-size: 0.74rem; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-subtle);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.case-form-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.case-msg{ font-size: 0.85rem; margin: 0; color: var(--text-subtle); flex: 1 1 220px; }
.case-msg.error{ color: var(--alert); }
.case-msg.ok{ color: var(--verified); }

/* ---- Stat row ---- */
.case-stats{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 0 0 18px;
}
.case-stat{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md, 8px); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 2px;
}
.case-stat-n{ font-size: 1.4rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.case-stat-l{ font-size: 0.75rem; color: var(--text-subtle); }

.case-search{
  font: inherit; font-size: 0.84rem; padding: 6px 11px;
  background: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; min-width: 180px;
}
.case-search:focus{ outline: none; border-color: var(--verified); }

/* ---- Case cards ---- */
.case-list{ display: flex; flex-direction: column; gap: 8px; }
.case-card{
  border: 1px solid var(--border); border-radius: var(--r-md, 8px);
  overflow: hidden; transition: border-color 0.14s ease;
}
.case-card:hover{ border-color: var(--border-strong); }
.case-card.open{ border-color: var(--verified); }
.case-card-head{
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; text-align: left;
  background: none; border: none; color: inherit; font: inherit; cursor: pointer;
}
.case-card-date{
  flex: 0 0 auto; width: 42px; text-align: center; line-height: 1.1;
  padding: 5px 0; border-radius: var(--r-sm, 6px);
  border: 1px solid var(--border);
}
.case-card-day{ display: block; font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.case-card-mon{
  display: block; font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-subtle);
}
.case-card-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.case-card-title{
  font-weight: 600; font-size: 0.93rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-card-meta{ font-size: 0.77rem; color: var(--text-subtle); }
.case-dot{ opacity: 0.5; }
.case-card-right{ flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.case-tag{
  font-size: 0.72rem; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-subtle); white-space: nowrap;
}
.case-tag.filed{ color: var(--verified); border-color: var(--verified); }
.case-tag.awaiting{ opacity: 0.85; }

.case-chev{ width: 16px; height: 16px; color: var(--text-subtle); transition: transform 0.16s ease; }
.case-card.open .case-chev{ transform: rotate(180deg); }

/* ---- Reports ---- */
.case-reports{ border-top: 1px solid var(--border); padding: 4px 16px 12px; }
.case-mine{ display: flex; flex-direction: column; gap: 2px; }
.case-report{ padding: 14px 0; border-bottom: 1px solid var(--border); }
.case-report:last-child{ border-bottom: none; }
.case-report-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.case-avatar{
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.02em;
  background: var(--surface-2, rgba(127,127,127,0.12)); color: var(--text-subtle);
  border: 1px solid var(--border);
}
.case-report-who{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.case-report-who strong{ font-size: 0.87rem; }
.case-report-when{ font-size: 0.74rem; color: var(--text-subtle); }
.case-remove{
  margin-left: auto; background: none; border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 9px; font: inherit; font-size: 0.73rem;
  color: var(--text-subtle); cursor: pointer;
}
.case-remove:hover{ color: var(--alert); border-color: var(--alert); }

.case-report-body,
.case-report-evidence{ font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; }
.case-report-body{ padding-left: 38px; }
.case-report-evidence{
  margin: 10px 0 0 38px; padding: 9px 12px;
  background: var(--surface-2, rgba(127,127,127,0.05));
  border-left: 2px solid var(--border-strong); border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  color: var(--text-subtle); font-size: 0.84rem;
}
.case-report-evidence h6{
  margin: 0 0 4px; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle);
}
.case-report-mine{ padding: 14px 0; }

.case-empty{ font-size: 0.86rem; color: var(--text-subtle); padding: 12px 0; }
.case-blank{ text-align: center; padding: 26px 10px; }
.case-blank h3{ margin: 0 0 6px; font-size: 0.98rem; }
.case-blank p{ margin: 0 auto; max-width: 46ch; font-size: 0.86rem; color: var(--text-subtle); }

@media (max-width: 760px){
  .case-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-panel{ padding: 16px 15px; }
  .case-card-date{ display: none; }
  .case-report-body, .case-report-evidence{ padding-left: 0; margin-left: 0; }
  .case-panel-head .case-search{ width: 100%; }
}

/* The username a blacklist was issued under, when the Trello card says so and
   it differs from the name on the card today. Said on the card, not only in
   the drawer: somebody on the door is scanning for a name, and the name in
   front of them may not be the one this was written under. */
.restrict-issued{
  margin-top: 8px; font-size: 0.78rem; color: var(--text-subtle);
  padding: 4px 9px; border-radius: var(--r-sm, 6px);
  border: 1px dashed var(--border-strong);
}
.restrict-issued strong{ color: var(--text); font-weight: 600; }
.restrict-alias-issued{ border-color: var(--border-strong); }
.restrict-field-note{
  display: block; margin-top: 5px; font-size: 0.78rem; color: var(--text-subtle);
}

/* Nil return. A checkbox rather than an empty form, because "nothing happened"
   is an answer and should take one click to give. */
.case-nil{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  background: var(--surface-2, rgba(127,127,127,0.04));
}
.case-nil:hover{ border-color: var(--border-strong); }
.case-nil input{ margin: 2px 0 0; flex: 0 0 auto; }
.case-nil span{ display: flex; flex-direction: column; gap: 2px; }
.case-nil strong{ font-size: 0.88rem; font-weight: 600; }
.case-nil em{ font-style: normal; font-size: 0.78rem; color: var(--text-subtle); }

.case-report-nil{ color: var(--text-subtle); font-style: italic; }
.case-tag.cancelled{ color: var(--alert); border-color: var(--alert); opacity: 0.9; }
.case-tag.closed{ opacity: 0.6; }

/* Board name + description, in Names & Options. */
.schema-board{
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
}
.schema-board-title,
.schema-board-blurb{
  width: 100%; font: inherit; font-size: 0.88rem;
  background: none; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  padding: 7px 9px;
}
.schema-board-blurb{ resize: vertical; font-size: 0.83rem; line-height: 1.5; }
.schema-board-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.schema-board-hint{ font-size: 0.76rem; color: var(--text-subtle); }

/* Executive Portal → Rank & Role Names. One row per role, most senior first. */
.role-names{ display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.role-name-row{
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
}
.role-name-rank{
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-subtle);
  text-align: right;
}
.role-name-input{
  width: 100%; min-width: 0; font: inherit; font-size: 0.9rem;
  background: none; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  padding: 7px 9px;
}
.role-name-default{ font-size: 0.76rem; color: var(--text-subtle); white-space: nowrap; }
.role-name-reset[hidden]{ display: none; }
@media (max-width: 640px){
  .role-name-row{ grid-template-columns: 2em minmax(0, 1fr) auto auto; gap: 8px; }
  .role-name-save{ grid-column: 3; grid-row: 1; }
  .role-name-reset{ grid-column: 4; grid-row: 1; }
  .role-name-default{ grid-column: 2 / -1; grid-row: 2; white-space: normal; }
  .role-name-default:empty{ display: none; }
}

/* A cancelled event, on the Calendar. */
.ev-cancelled-band{
  margin: 0 0 10px; padding: 6px 11px;
  border: 1px solid var(--alert); border-radius: var(--r-sm, 6px);
  color: var(--alert); font-size: 0.8rem; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ev-title-cancelled{ text-decoration: line-through; opacity: 0.75; }
.ev-item-cancelled{ opacity: 0.62; }
.ev-cancel-tag{
  display: inline-block; margin-top: 4px; padding: 1px 8px;
  border: 1px solid var(--alert); border-radius: 999px;
  color: var(--alert); font-size: 0.7rem; letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Clearance Check -----------------------------------------------------
   One question answered in one word, with the working underneath. The level
   carries the colour; everything else stays quiet so the word is what the eye
   lands on. */
.clr-form{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.clr-label{
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-subtle);
}
.clr-input-row{ display: flex; gap: 6px; }
.clr-input-row input{
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.86rem;
  background: none; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  padding: 7px 9px;
}
.clr-input-row input:focus{ outline: none; border-color: var(--verified); }
.clr-go{
  flex: 0 0 auto; font: inherit; font-size: 0.8rem; cursor: pointer;
  padding: 7px 13px; border-radius: var(--r-sm, 6px);
  background: none; color: var(--text);
  border: 1px solid var(--border-strong);
}
.clr-go:hover:not(:disabled){ border-color: var(--verified); color: var(--verified); }
.clr-go:disabled{ opacity: 0.5; cursor: default; }
.clr-msg{ font-size: 0.76rem; color: var(--text-subtle); margin: 0; min-height: 1em; }
.clr-msg.error{ color: var(--alert); }

.clr-result{
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--r-sm, 6px); padding: 12px 13px;
}
.clr-clear{ border-left-color: var(--verified); }
.clr-low{ border-left-color: #B8860B; }
.clr-moderate{ border-left-color: #D35400; }
.clr-high{ border-left-color: var(--alert); }

.clr-verdict{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.clr-level{ font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }
.clr-clear .clr-level{ color: var(--verified); }
.clr-low .clr-level{ color: #B8860B; }
.clr-moderate .clr-level{ color: #D35400; }
.clr-high .clr-level{ color: var(--alert); }
.clr-name{
  font-size: 0.8rem; color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.clr-line{ margin: 4px 0 0; font-size: 0.8rem; color: var(--text-subtle); }

.clr-flag{
  margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--alert); border-radius: var(--r-sm, 6px);
  display: flex; flex-direction: column; gap: 2px;
}
.clr-flag strong{ font-size: 0.82rem; color: var(--alert); }
.clr-flag span{ font-size: 0.76rem; color: var(--text-subtle); }

.clr-reasons{ margin: 10px 0 0; padding-left: 16px; }
.clr-reasons li{ font-size: 0.79rem; color: var(--text-subtle); margin-bottom: 2px; }

.clr-sub{
  margin: 13px 0 6px; font-size: 0.7rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-subtle);
}
.clr-incidents{ margin: 0; padding: 0; list-style: none; }
.clr-incidents li{
  padding: 6px 0; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1px;
}
.clr-incidents li:last-child{ border-bottom: none; }
.clr-inc-title{ font-size: 0.82rem; }
.clr-inc-when{ font-size: 0.73rem; color: var(--text-subtle); }
.clr-more{ margin: 6px 0 0; font-size: 0.75rem; color: var(--text-subtle); }

.clr-warn{
  margin: 10px 0 0; font-size: 0.76rem; color: var(--alert);
  padding: 7px 9px; border: 1px dashed var(--alert); border-radius: var(--r-sm, 6px);
}
.clr-open{ display: inline-block; margin-top: 12px; font-size: 0.79rem; }
.clr-note{ margin: 12px 0 0; font-size: 0.76rem; color: var(--text-subtle); }

/* Names a report is about, shown with the report in the archive. */
.case-report-subjects{ margin: 8px 0 0 38px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.case-report-subjects h6{
  margin: 0 6px 0 0; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle);
}
@media (max-width: 760px){ .case-report-subjects{ margin-left: 0; } }

/* ---- Duty Desk: Duties, then Pages ---------------------------------------
   The two things somebody DOES, side by side and given room, above the list of
   places they can go. These used to be rails squeezing a middle column, which
   left all three cramped. */
.duties-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}
/* One panel showing should fill the row rather than sit in a half-width
   column with empty space beside it. auto-fit does that on its own; this is
   only for the case where both are present but one is hidden. */
.duties-grid > .duty-panel[hidden]{ display: none; }

.duty-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  padding: 20px 22px;
  min-width: 0;
}
.duty-head{ margin-bottom: 16px; }
.duty-head .eyebrow{ display: block; margin-bottom: 2px; }
.duty-head h3{ margin: 0; font-size: 1.02rem; }

/* Pages, full width and roomier — two across, as it was. A third column made
   the tiles narrow enough that titles wrapped. */
.desk-tiles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.desk-tiles .desk-tile{ padding: 22px 24px; }
.desk-tiles .desk-tile h3{ margin: 8px 0 6px; font-size: 1rem; }
.desk-tiles .desk-tile p{ margin: 0; font-size: 0.85rem; line-height: 1.5; }

/* Room between the two sections. Duties ends flush against its panels and
   Pages opens with a heading, so without this the heading sat right on top of
   the panel above it. */
/* ---- Duty Desk density -------------------------------------------------
   The desk inherited the marketing pages' vertical rhythm: a 104px hero, 88px
   between sections, a decorative divider and a three-line heading above each
   block. On a landing page that is breathing room. On the page somebody opens
   at the start of a shift it was 2.3 screens of scrolling for three panels —
   a lot of empty space wrapped around a narrow strip of content.

   Nothing here changes a single font size. It closes the gaps and lets the
   content use the width it already had. Scoped to this page by body class so
   the marketing pages keep their spacing. */
.page-desk .hero{ padding: 40px 0 4px; }
.page-desk .route-line{ display: none; }

/* DIRECT children only. The panels inside the grid are <section> elements too,
   so a bare `.page-desk section` re-padded them from 20px to 28px and made the
   thing this block exists to tighten slightly fatter. */
.page-desk > section{ padding: 26px 0; }
.page-desk > section#boardsSection{ padding-top: 26px; }

.page-desk .section-head{ margin-bottom: 18px; max-width: none; }
.page-desk .section-head p{ margin-bottom: 0; }
/* 50ch is a reading measure for a paragraph of prose. This is one short line
   of status, and capping it there wrapped "…what you have / access to." with
   two thirds of the row empty beside it. */
.page-desk .hero .lede{ margin-bottom: 0; max-width: none; }

/* The greeting was set at landing-page scale — 66px of "Welcome" above the
   thing you actually came to use. Still the biggest text on the page, just no
   longer a third of the first screen. This is the one size that changes. */
.page-desk .hero h1{ font-size: clamp(1.9rem, 2.6vw, 2.45rem); }
.page-desk .section-head h2{ font-size: clamp(1.4rem, 1.9vw, 1.7rem); }

/* The desk is a dashboard, not an article: its panels are lists and tiles, not
   prose, so the reading-width cap that suits body copy just squeezed them. */
.page-desk .wrap{ max-width: 1420px; }

@media (max-width: 900px){
  .page-desk .hero{ padding: 26px 0 4px; }
  .page-desk > section{ padding: 18px 0; }
  .page-desk > section#boardsSection{ padding-top: 18px; }
  .page-desk .section-head{ margin-bottom: 13px; }
}

#dutiesSection{ padding-bottom: 0; }
#boardsSection{ padding-top: 44px; }

@media (max-width: 900px){
  .desk-tiles{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .duties-grid{ grid-template-columns: 1fr; }
  .duty-panel{ padding: 16px 16px; }
  .desk-tiles{ gap: 14px; }
  #boardsSection{ padding-top: 30px; }
}

/* Incidents on a Clearance Check, expandable to the report behind them. */
.clr-inc{ border-bottom: 1px solid var(--border); }
.clr-inc:last-child{ border-bottom: none; }
.clr-inc-head{
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 0; text-align: left; cursor: pointer;
  background: none; border: none; color: inherit; font: inherit;
}
.clr-inc-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.clr-chev{ width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-subtle); transition: transform 0.16s ease; }
.clr-inc.open .clr-chev{ transform: rotate(180deg); }
.clr-inc-body{ padding: 2px 0 10px; }
.clr-inc-text{ margin: 0; font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; }
.clr-inc-nil{ margin: 0; font-size: 0.8rem; color: var(--text-subtle); font-style: italic; }
.clr-inc-ev{
  margin-top: 7px; padding: 7px 9px; font-size: 0.78rem; line-height: 1.5;
  background: var(--surface-2, rgba(127,127,127,0.05));
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  color: var(--text-subtle); word-break: break-word;
}
.clr-inc-ev h6{
  margin: 0 0 3px; font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clr-inc-by{ margin: 7px 0 0; font-size: 0.73rem; color: var(--text-subtle); }

/* The arrow through to the person's file. */
.clr-open{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 9px 12px; text-decoration: none;
  font-size: 0.83rem; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm, 6px);
  transition: border-color 0.14s ease, color 0.14s ease;
}
.clr-open:hover{ border-color: var(--verified); color: var(--verified); }
.clr-open svg{ width: 16px; height: 16px; flex: 0 0 auto; }

/* One person's file, on the Operational Archive. */
.case-back{ font-size: 0.8rem; white-space: nowrap; }
.case-file{ display: flex; flex-direction: column; }
.case-file .case-report-body,
.case-file .case-report-evidence{ padding-left: 0; margin-left: 0; }
.case-report-filed{ margin: 8px 0 0; font-size: 0.76rem; color: var(--text-subtle); }

/* The More information card on a Clearance Check. */
.clr-card{ max-width: 620px; max-height: min(84vh, 880px); display: flex; flex-direction: column; padding: 0; }
.clr-card-head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.clr-card-head.clr-clear{ border-left-color: var(--verified); }
.clr-card-head.clr-low{ border-left-color: #B8860B; }
.clr-card-head.clr-moderate{ border-left-color: #D35400; }
.clr-card-head.clr-high{ border-left-color: var(--alert); }
.clr-card-head h3{ margin: 0; font-size: 1.05rem; }
.clr-card-level{ display: block; margin-top: 2px; font-size: 0.8rem; color: var(--text-subtle); }
.clr-card-close{
  background: none; border: none; color: var(--text-subtle);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.clr-card-close:hover{ color: var(--text); }
.clr-card-body{ overflow-y: auto; padding: 16px 22px 22px; }

.clr-file-item{ padding: 13px 0; border-bottom: 1px solid var(--border); }
.clr-file-item:last-child{ border-bottom: none; }
.clr-file-item header{ display: flex; flex-direction: column; gap: 1px; margin-bottom: 7px; }
.clr-file-item header strong{ font-size: 0.9rem; }
.clr-file-item header span{ font-size: 0.75rem; color: var(--text-subtle); }

.clr-flag-block{ margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); }
.clr-flag-block h6{
  margin: 0 0 3px; font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle);
}
.clr-flag-block{ font-size: 0.8rem; line-height: 1.55; color: var(--text-subtle); white-space: pre-wrap; }
.clr-flag-more{ font-style: italic; opacity: 0.85; }

/* A lifted restriction. Deliberately not red: the record still counts towards
   the level, but this person is not barred, and the panel must not read as
   though they are. */
.clr-flag-lifted{ border-color: var(--border); }
.clr-flag-lifted > strong{ color: var(--text-subtle); }
.clr-flag-note{ font-style: italic; opacity: 0.85; }

/* Dates lifted out of a restriction's notes. Shown next to the tally they
   feed, so "3 incidents" is never a number without a source. */
.clr-notedates{ margin-top: 12px; }
.clr-notedates h6{
  margin: 0 0 6px;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.clr-notedates h6 + ul + h6{ margin-top: 12px; }
ul.clr-nd{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
ul.clr-nd li{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.76rem;
  background: var(--surface-2, transparent);
}
.clr-nd-when{ font-weight: 600; }
.clr-nd-ago{ color: var(--text-subtle); font-size: 0.72rem; }
ul.clr-nd-old li{ opacity: 0.72; border-style: dashed; }
/* The announcement was tidied up after the event. Neutral, not a warning —
   it is the normal end state, unlike "Not linked" which needs somebody. */
.ev-cal-list-done{
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
  color: var(--text-subtle);
  white-space: nowrap;
}

/* Said when the Discord announcement has been deleted but the attendance
   stands. A finished event should read as finished, not as empty. */
.ev-detail-rsvp-note{
  margin: 8px 0 0;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-subtle);
}

/* "Nothing happened", said as its own answer rather than as a report count.
   Themed through --verified like the other tags: a hardcoded green here was
   unreadable in dark mode. */
.case-tag.nil{
  color: var(--verified);
  border-color: var(--verified);
  font-weight: 600;
}

/* A nil return already recorded for this event: the box is spent, not broken. */
.case-nil-done{ opacity: 0.6; cursor: not-allowed; }
.case-nil-done input{ cursor: not-allowed; }

/* Further accounts of the same event: named, not quoted. */
.clr-inc-others{ margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.clr-inc-others h6{
  margin: 0 0 6px;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
ul.clr-oth{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
ul.clr-oth li{ font-size: 0.8rem; }
.clr-oth-role, .clr-oth-when{ color: var(--text-subtle); font-size: 0.72rem; }
.clr-oth-note{ margin: 7px 0 0; font-size: 0.72rem; font-style: italic; color: var(--text-subtle); }

/* Each account inside one event block on the full file. */
.case-report-one + .case-report-one{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.clr-nd-note{
  margin: 7px 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-subtle);
}

/* The button is a button now, not a link. */
button.clr-open{ width: 100%; font: inherit; cursor: pointer; background: none; }

@media (max-width: 600px){
  .clr-card{ max-height: 90vh; }
  .clr-card-head{ padding: 15px 16px 12px; }
  .clr-card-body{ padding: 14px 16px 18px; }
}

/* --- NSSE image picker --- */
/* Reuses .board-modal-overlay / .board-modal for the frame; everything here is
   the library grid and the paste-a-link row. */
.imgpick{ max-width: 720px; }
.imgpick-sub{
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0 18px;
}
.imgpick-lib{ min-height: 80px; }
.imgpick-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}
.imgpick-tile{
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.imgpick-tile:hover{ border-color: var(--seal-deep); transform: translateY(-1px); }
.imgpick-tile img{
  display: block;
  width: 100%;
  height: 82px;
  object-fit: cover;
  background: var(--surface);
}
.imgpick-name{
  display: block;
  padding: 6px 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imgpick-lbl{
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 20px 0 6px;
  color: var(--text-muted);
}
.imgpick-urlrow{ display: flex; gap: 8px; align-items: center; }
.imgpick-urlrow input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.imgpick-urlrow .btn{ flex: 0 0 auto; }
.imgpick-note{
  font-size: 0.78rem;
  color: var(--text-subtle);
  margin-top: 8px;
  line-height: 1.5;
}
.imgpick-note.is-error{ color: var(--alert); }