/* Athletic Contract Request v2: styled to the homepage mock's grammar.
   Palette copied from the homepage tokens (brands.js, Athletic brand guide):
   bg #0b0b0d, ink #f4f2ee, muted #9a968f, card #141417, red #770400,
   gold #F0B310, magenta #DC0963, brand gradient red to magenta to gold.
   No custom properties here on purpose: the publish pass forbids double
   hyphens in these files, so every token value is inlined. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #0b0b0d;
  color: #f4f2ee;
  color-scheme: dark;
  font-family: -apple-system, "Helvetica Neue", Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ===== athletic.net header, ported from the homepage mock (smoked glass,
   always the dark tone here; the an-edge beam is a static gradient line) ===== */

.athletic-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 50px;
  display: flex;
  align-items: center;
  padding-right: 14px;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.athletic-header > * { position: relative; z-index: 1; }

.anet-flex { display: flex; align-items: center; }

.glass {
  position: relative;
  background: rgba(12,12,16,0.55);
  color: #f4f2ee;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.06);
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(255,255,255,0.05), 0 8px 30px rgba(0,0,0,0.35);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  clip-path: inset(0);
  background:
    radial-gradient(60% 100% at 10% -20%, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%),
    radial-gradient(50% 120% at 75% 130%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    radial-gradient(30% 90% at 95% 0%, rgba(240,179,16,0.20), rgba(240,179,16,0) 70%);
  filter: url(#anLiquid);
  animation: glassdrift 22s ease-in-out infinite alternate;
}

@keyframes glassdrift {
  from { transform: translate3d(-2%,0,0) scale(1.04); }
  to { transform: translate3d(2%,1%,0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .glass::before { animation: none; filter: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(11,11,13,0.92); }
}

/* bottom edge: the brand gradient hairline is the always-on base; the fx
   boot script in index.html rides the homepage's traveling beam on top of
   it when border-beam.js is present */
.athletic-header > .an-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, #770400 0%, #DC0963 38%, #F0B310 100%);
  opacity: 0.5;
  z-index: 2;
}

.a-btn { border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; line-height: 1; }

.ah-btn {
  display: inline-flex;
  align-items: center;
  color: #e6e2da;
  padding: 8px;
  border-radius: 3px;
  white-space: nowrap;
  position: relative;
  transition: color 0.3s;
}

.ah-btn:hover { color: #F0B310; }
.ah-btn:focus-visible { outline: 2px solid #DC0963; outline-offset: 2px; }

.an-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 20px;
}

.an-bars i {
  display: block;
  height: 2.5px;
  width: 20px;
  border-radius: 2px;
  background: #F0B310;
}

.ah-logo { height: 28px; width: auto; display: block; margin-left: 2px; }

/* hamburger folds into an X while the side menu is open (homepage grammar) */
.an-bars i {
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s, width 0.32s;
}
body.side-open .an-bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.side-open .an-bars i:nth-child(2) { opacity: 0; width: 0; }
body.side-open .an-bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
#anMenuBtn { position: relative; z-index: 60; }

/* Athletic+ badge, gold like the wordmark, slash dead center */
.an-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 6px; margin-left: 5px; padding: 0; }
.an-aplus { display: block; width: 20px; height: 20px; opacity: 0.95; filter: brightness(0) saturate(100%) invert(72%) sepia(64%) saturate(1900%) hue-rotate(358deg) brightness(101%) contrast(96%); }
.an-plus-slash { position: absolute; left: 50%; top: 50%; z-index: 1; margin: 0; font-size: 15px; color: #e6e2da; text-shadow: 2px 0 0 rgba(12,12,16,0.85); transform: translate(-50%,-50%) rotate(90deg); }

/* hover underline grows from the middle in the brand gradient */
.an-ul::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; background: linear-gradient(90deg, #770400 0%, #DC0963 38%, #F0B310 100%); transform: scaleX(0); transform-origin: center; transition: transform 0.22s ease; border-radius: 2px; }
.an-ul:hover::after { transform: scaleX(1); }

/* gooey hover tips under search and help (liquid-gooey paints the fill) */
.an-goo-host > i { position: relative; z-index: 2; }
.an-goo { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s ease 0.05s; z-index: 1; }
.an-goo-host:hover .an-goo, .an-goo-host:focus-visible .an-goo { opacity: 1; transition: opacity 0.18s ease; }
.an-goo-seat { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; }
.an-goo-tip { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.3); height: 28px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.02em; color: #3a2a1f; transition: transform 0.42s cubic-bezier(0.2,0.8,0.2,1) 0.05s; }
.an-goo-host:hover .an-goo-tip, .an-goo-host:focus-visible .an-goo-tip { transform: translate(-50%,26px) scale(1); }
.an-goo-tip .dots { position: absolute; font-size: 16px; letter-spacing: 0.12em; opacity: 1; transition: opacity 0.2s ease 0.35s; }
.an-goo-tip .txt { opacity: 0; transition: opacity 0.3s ease 0.6s; }
.an-goo-host:hover .an-goo-tip .dots { opacity: 0; }
.an-goo-host:hover .an-goo-tip .txt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .an-goo-tip { transition: none; } }

/* Log In pill, the homepage's dark tone values */
.an-login { margin-right: 8px; border: 1px solid rgba(255,255,255,0.34); border-radius: 999px; padding: 7px 14px !important; color: #ffffff !important; text-decoration: none; transition: border-color 0.3s, box-shadow 0.18s, background 0.18s, color 0.3s; }
.an-login:hover { border-color: #F0B310; box-shadow: 0 0 0 3px rgba(240,179,16,0.12); background: rgba(240,179,16,0.06) !important; color: #F0B310 !important; }

/* the live site runs FA Pro; the free kit lacks a few regular weights */
.far { font-weight: 900 !important; }
.fa-sign-in:before { content: "\f2f6"; }
.anet-hide-md-down, .anet-hide-sm-down { display: inline; }
@media (max-width: 991px) { .anet-hide-md-down { display: none !important; } }
@media (max-width: 767px) { .anet-hide-sm-down { display: none !important; } }

/* ===== side menu, the homepage's, always in the dark glass tone here ===== */
.an-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 45; opacity: 0; visibility: hidden; transition: opacity 0.25s; }
.athletic-side-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 86vw; z-index: 50; transform: translateX(-100%); transition: transform 0.28s ease; overflow-y: auto; overflow-x: hidden; border-right: 1px solid rgba(255,255,255,0.14); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; }
.athletic-side-menu.glass { background: rgba(12,12,16,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 2px 0 28px rgba(0,0,0,0.4); }
.athletic-side-menu > * { position: relative; z-index: 1; }
.athletic-side-menu > .side-liquid { z-index: 0; }
body.side-open .an-backdrop { opacity: 1; visibility: visible; }
body.side-open .athletic-side-menu { transform: translateX(0); }
.side-liquid { position: absolute; inset: 0; pointer-events: none; opacity: 0.16; }
.side-liquid-thumb { position: absolute; left: 6px; right: 6px; top: 0; height: 0; border-radius: 8px; transition: top 0.26s cubic-bezier(0.2,0.8,0.2,1), height 0.2s; }
.sm-heading { height: 50px; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.14); position: relative; }
.sm-heading::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #770400 0%, #DC0963 38%, #F0B310 100%); opacity: 0.9; }
.sm-bars-btn { padding: 14px; }
.header-menu-item { display: flex; align-items: center; width: 100%; text-align: left; padding: 9px 16px; color: #e6e2da; font-size: 14px; background: transparent; transition: color 0.3s; position: relative; z-index: 1; text-decoration: none; }
.header-menu-item:hover { color: #F0B310; }
.header-menu-item:hover .sm-icon { color: #F0B310; }
.sm-icon { width: 22px; margin-right: 10px; text-align: center; color: #b7b2a9; font-size: 14px; flex: none; transition: color 0.3s; }
.sm-sport { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; border-radius: 3px; padding: 2px 0; width: 22px; line-height: 1.2; background: #5C5C5C; }
.sm-sport.tf { background: #3F6B9D; }
.sm-sport.xc { background: #4B6C56; }
.header-menu-item .fa-chevron-down { margin-left: auto; font-size: 11px; }
.text-muted { color: #b7b2a9; }
.athletic-side-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,0.14); margin: 6px 0; }
.header-menu-text { padding: 8px 16px 4px; font-size: 12px; color: #e6e2da; }
.header-menu-text.b { font-weight: 700; letter-spacing: 0.08em; }
.header-menu-text.small { font-size: 11.5px; }
.sm-bottom-link { display: inline-block; margin-right: 12px; font-size: 12.5px; color: #b7b2a9; line-height: 1.9; }
.sm-bottom-link:hover { color: #F0B310; text-decoration: underline; }
.side-social { display: flex; gap: 14px; align-items: center; padding: 6px 0 8px; font-size: 14px; }
.side-social a { color: #b7b2a9; transition: color 0.3s; }
.side-social a:hover { color: #F0B310; }

/* ===== hero: one quiet dark band, the H1 once, one line under it ===== */

.hero {
  position: relative;
  text-align: center;
  padding: 62px 20px 52px;
  background:
    radial-gradient(46% 70% at 50% 0%, rgba(240,179,16,0.07), rgba(240,179,16,0) 70%),
    radial-gradient(90% 130% at 50% 0%, #17171b 0%, #0b0b0d 75%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

h1#form-title {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-sub {
  margin-top: 12px;
  color: #9a968f;
  font-size: 15.5px;
  line-height: 1.55;
}

/* ===== thinking orbs as feedback only (fx/thinking-orbs.js): one small
   inline loader canvas beside the status text while a request is in
   flight, plus a brief flourish on the success panel. app.js mounts and
   removes both; nothing ambient. ===== */

canvas.send-orb {
  width: 26px;
  height: 26px;
  flex: none;
}

canvas.confirm-orb {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
}

/* ===== content column ===== */

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 20px 56px;
}

/* ===== "How this works": the intro folded behind a quiet link row ===== */

.how { margin-bottom: 16px; }

.how summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9a968f;
  padding: 4px 0;
  transition: color 0.2s;
}

.how summary::-webkit-details-marker { display: none; }

.how summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid rgba(154,150,143,0.9);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}

.how[open] summary::before { transform: rotate(90deg); }
.how summary:hover { color: #F0B310; }
.how summary:hover::before { border-left-color: #F0B310; }
.how summary:focus-visible { outline: 2px solid #DC0963; outline-offset: 3px; }

.how #form-intro { padding: 10px 2px 6px; }

#form-intro p {
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}
#form-intro p:last-child { margin-bottom: 0; }

/* ===== standard terms peek: the fold above an "extra lines" textarea ===== */

.stdterms { margin: 4px 0 10px; }

.stdterms summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9a968f;
  padding: 4px 0;
  transition: color 0.2s;
}

.stdterms summary::-webkit-details-marker { display: none; }

.stdterms summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid rgba(154,150,143,0.9);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}

.stdterms[open] summary::before { transform: rotate(90deg); }
.stdterms summary:hover { color: #F0B310; }
.stdterms summary:hover::before { border-left-color: #F0B310; }
.stdterms summary:focus-visible { outline: 2px solid #DC0963; outline-offset: 3px; }

.stdterms-body {
  margin: 8px 0 4px;
  padding: 12px 16px;
  border-left: 2px solid rgba(240,179,16,0.45);
  background: rgba(255,255,255,0.03);
  border-radius: 0 10px 10px 0;
}

.stdterms-note {
  color: #9a968f;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.stdterms-line {
  color: rgba(255,255,255,0.78);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 8px;
}
.stdterms-line:last-child { margin-bottom: 0; }

.stdterms-when {
  color: #F0B310;
  font-size: 12px;
  font-style: italic;
}

/* ===== the amber privacy note above the form ===== */

#privacy-note {
  background: rgba(240,179,16,0.07);
  border: 1px solid rgba(240,179,16,0.4);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #f2d789;
  margin-bottom: 26px;
}

/* ===== the steps strip: three pills with a connecting line ===== */

.steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  margin-bottom: 24px;
}

.steps .step {
  position: relative;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a968f;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20,20,23,0.6);
  white-space: nowrap;
}

.steps .step + .step { margin-left: 28px; }

.steps .step + .step::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.14);
}

.steps .step.done {
  color: #F0B310;
  border-color: rgba(240,179,16,0.55);
  background: rgba(240,179,16,0.07);
}

.steps .step.done + .step::before { background: rgba(240,179,16,0.45); }

.steps .step.cur {
  color: #f4f2ee;
  border-color: rgba(244,242,238,0.6);
  background: rgba(244,242,238,0.06);
  box-shadow: 0 0 14px rgba(240,179,16,0.14);
}

/* ===== sections: titled cards with a slim left accent bar ===== */

.section {
  position: relative;
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 26px 24px 26px 27px;
  margin-bottom: 22px;
  overflow: hidden;
}

.section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #770400 0%, #DC0963 45%, #F0B310 100%);
  opacity: 0.85;
}

.section-title,
.section .section-title h2,
h2.section-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4f2ee;
  margin-bottom: 6px;
}

.section-help,
.section .section-help p,
p.section-help {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 18px;
}

/* numbered circle in the type panel's section titles */
#type-panel .section-title .sec-n,
.section-title .sec-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(240,179,16,0.12);
  border: 1px solid rgba(240,179,16,0.5);
  color: #F0B310;
  font-size: 12px;
  font-weight: 700;
  margin-right: 10px;
  vertical-align: 3px;
  font-variant-numeric: tabular-nums;
}

/* the type page title (app.js writes h2.panel-title) */
h2.panel-title,
#type-panel > h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
}

h2.panel-title::after,
#type-panel > h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #770400 0%, #DC0963 38%, #F0B310 100%);
}

#type-panel > .help,
#type-panel > p.help {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.55;
  margin: 10px 0 20px;
}

/* ===== fields ===== */

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }

.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
  color: #f4f2ee;
}

.field .help {
  display: block;
  font-size: 13px;
  color: #9a968f;
  line-height: 1.5;
  margin-bottom: 8px;
}

.required-mark {
  color: #F0B310;
  font-weight: 700;
  margin-left: 4px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: #0f0f12;
  color: #f4f2ee;
  border: 1px solid rgba(244,236,222,0.17);
  border-radius: 10px;
  padding: 12px 15px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field textarea { min-height: 120px; resize: vertical; }

/* iOS Safari: date fields otherwise render as centered system pills; keep
   them the same dark box, same height, left-aligned like every text input
   (color-scheme dark on html already darkens the native picker itself) */
.field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 47px;
  text-align: left;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9a968f 50%), linear-gradient(135deg, #9a968f 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,0.40); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: #F0B310;
  box-shadow: 0 0 0 3px rgba(240,179,16,0.22);
}

/* invalid state: a coral ring plus the .error line under the control */
.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: rgba(255,138,122,0.85);
  box-shadow: 0 0 0 3px rgba(255,138,122,0.18);
}

.field.invalid .error,
.field .error {
  color: #ff8a7a;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 7px;
}

/* ===== org pickers (orgpick.js): departments, products, home bases =====
   Pills above, a select plus Add below. Sits inside .field, so the base
   .field select and .field input rules (dark box, gold focus ring, the
   select arrow) already apply; these rules add the row layout and the
   site's pill grammar. The page is dark only, so one set covers it. */

.orgpick { margin-top: 4px; }

.orgpick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.orgpick-pills:empty { margin-bottom: 0; }

.orgpick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #f4f2ee;
  font-size: 12px;
  line-height: 1.5;
}

.orgpick-pill-x {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  padding: 0;
  color: #9a968f;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.orgpick-pill-x:hover,
.orgpick-pill-x:focus-visible {
  color: #F0B310;
  outline: none;
}

.orgpick-row {
  display: flex;
  gap: 8px;
}

.orgpick-select,
.orgpick-type {
  flex: 1;
  min-width: 0;
  background: #0f0f12;
  color: #f4f2ee;
  border: 1px solid rgba(244,236,222,0.17);
  border-radius: 10px;
  padding: 12px 15px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* the Add button borrows the .hs-btn grammar and stretches to the
   select's height in the row */
.orgpick-add {
  align-self: stretch;
  background: #141417;
  color: #f4f2ee;
  border: 1px solid rgba(244,236,222,0.17);
  border-radius: 10px;
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s;
}

.orgpick-add:hover,
.orgpick-add:focus-visible {
  border-color: rgba(240,179,16,0.55);
  outline: none;
}

/* the .help look, in the page amber, shown only when options failed */
.orgpick-note {
  font-size: 13px;
  color: #F0B310;
  line-height: 1.5;
  margin-top: 8px;
  margin-bottom: 0;
}

/* auto add feedback: the new pill pops in with a check that fades,
   and the Add button reads "Added" in amber for a second */
@keyframes orgpickPop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes orgpickCheckFade {
  0%, 55% { opacity: 1; max-width: 1.2em; }
  100%    { opacity: 0; max-width: 0; }
}
.orgpick-pill-added { animation: orgpickPop 0.35s ease-out; }
.orgpick-pill-added::before {
  content: '\2713';
  color: #F0B310;
  font-weight: 700;
  overflow: hidden;
  display: inline-block;
  max-width: 1.2em;
  animation: orgpickCheckFade 1.4s ease-in forwards;
}
.orgpick-add-done {
  border-color: rgba(240,179,16,0.55);
  color: #F0B310;
}

/* ===== org pick round two: star, primary, job title chip ===== */

.orgpick-pill-star {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  padding: 0;
  color: #9a968f;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.orgpick-pill-star:hover,
.orgpick-pill-star:focus-visible {
  color: #F0B310;
  outline: none;
}

.orgpick-pill-star[aria-pressed="true"] { color: #F0B310; }

.orgpick-pill-primary { border-color: rgba(240,179,16,0.55); }

/* the .help metrics, used for the starrable picker's one line of guidance */
.orgpick-hint {
  font-size: 13px;
  line-height: 1.5;
  color: #9a968f;
  margin: 0 0 8px;
}

.jobtitle { margin-top: 4px; }

/* the composed title reads like a bigger .orgpick-pill */
.jobtitle-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  padding: 6px 14px;
  color: #f4f2ee;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.jobtitle-chip.jobtitle-empty {
  font-weight: 400;
  color: #9a968f;
  border-style: dashed;
}

/* ===== radio cards, and the five contract type choices ===== */

.radio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* #contract-type reads like every other section: the same card surface,
   accent bar, and padding as .section, with the heading and the card grid
   directly inside it. It stays OFF the .section class on purpose, so the
   fx boot never mounts a section beam here; the only glow in this block
   is the selected card's halo. */
#contract-type {
  display: block;
  position: relative;
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 26px 24px 26px 27px;
  margin-top: 22px;
  margin-bottom: 22px;
  overflow: hidden;
}

#contract-type::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #770400 0%, #DC0963 45%, #F0B310 100%);
  opacity: 0.85;
}

#contract-type > .radio-group {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* the cards sit one step lighter than the section surface so they read as
   cards, not cutouts; the checked card keeps its gold tint */
#contract-type .type-card {
  background: #1b1b1f;
  border-color: rgba(255,255,255,0.12);
}

#contract-type .type-card:has(input:checked),
#contract-type .type-card.selected {
  background: rgba(240,179,16,0.07);
  border-color: #F0B310;
}

/* the second selector outguns ".field label" (which forces display block
   and a bottom margin), so cards inside a .field keep their flex row: the
   control and its text on one line, vertically centered, with a real gap */
.radio-card,
.field label.radio-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7em;
  min-height: 44px;
  margin-bottom: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  background: #141417;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}

.radio-card:hover {
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-1px);
}

.radio-card input[type="radio"],
.radio-card input[type="checkbox"] {
  accent-color: #F0B310;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: scale(1.12);
  transform-origin: center;
  flex: none;
  align-self: center;
  cursor: pointer;
}

/* the option text rides beside the control, centered on it */
.radio-card > span {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
}

/* a help line inside a card wraps UNDER the label, clear of the control */
.radio-card .help,
.radio-card p.help {
  flex-basis: 100%;
  padding-left: calc(18px + 0.7em);
  margin-bottom: 0;
}

.radio-card:has(input:checked),
.radio-card.selected {
  border-color: #F0B310;
  background: rgba(240,179,16,0.05);
  box-shadow: 0 0 0 1px rgba(240,179,16,0.25), 0 0 22px rgba(240,179,16,0.16);
}

.radio-card:focus-within {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

/* type cards: kicker (attr data-kicker), bold title, muted sub; the radio
   dot hides and the whole card is the control */
.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 118px;
  padding: 15px 16px;
}

.type-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.type-card::before {
  content: attr(data-kicker);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a968f;
  margin-bottom: 5px;
  transition: color 0.2s;
}

.type-card .tc-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #f4f2ee;
}

.type-card .tc-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: #9a968f;
  line-height: 1.45;
}

.type-card::after {
  content: "\2713";
  position: absolute;
  top: 12px;
  right: 13px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #0b0b0d;
  background: #F0B310;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
}

.type-card:has(input:checked)::before,
.type-card.selected::before { color: #F0B310; }

.type-card:has(input:checked)::after,
.type-card.selected::after { opacity: 1; transform: scale(1); }

.type-card .help,
.radio-card .help {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: #9a968f;
  margin-top: 4px;
}

/* ===== type panel ===== */

#type-panel { margin-bottom: 26px; }

/* ===== submit bar ===== */

#submit-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}

#submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: inherit;
  color: #F0B310;
  background: rgba(11,11,13,0.35);
  border: 1px solid rgba(240,179,16,0.5);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

#submit-btn:hover {
  transform: translateY(-1px);
  border-color: #F0B310;
  box-shadow: 0 0 0 1px rgba(240,179,16,0.25), 0 0 22px rgba(240,179,16,0.28);
}

#submit-btn:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

#submit-btn:disabled {
  color: #9a968f;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#submit-btn:disabled:hover {
  border-color: rgba(255,255,255,0.16);
  transform: none;
  box-shadow: none;
}

#submit-status {
  color: #9a968f;
  font-size: 14px;
  margin: 0;
}

/* ===== confirmation ===== */

#confirmation {
  background: #141417;
  border: 1px solid rgba(240,179,16,0.45);
  border-radius: 16px;
  padding: 28px 26px;
  margin-top: 30px;
  box-shadow: 0 0 26px rgba(240,179,16,0.10);
}

#confirmation h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

#confirmation p {
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin-bottom: 10px;
}

#confirmation p:last-child { margin-bottom: 0; }

/* ===== footer and noscript ===== */

.noscript-note {
  background: #141417;
  border: 1px solid rgba(220,9,99,0.45);
  border-radius: 12px;
  padding: 16px 18px;
  color: rgba(255,255,255,0.85);
}

.foot {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 20px 40px;
  text-align: center;
}

.foot p {
  color: #9a968f;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.foot a { color: #b7b2a9; text-decoration: none; }
.foot a:hover { color: #F0B310; }

/* ===== breakpoints: 5 cards up on desktop, 2 on tablet, 1 on phones;
   everything readable at 380px wide ===== */

@media (max-width: 1000px) {
  #contract-type > .radio-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-card { min-height: 104px; }
}

@media (max-width: 560px) {
  .hero { padding: 44px 16px 38px; }
  .wrap { padding: 24px 16px 44px; }
  .section { padding: 20px 16px 20px 19px; }
  #contract-type > .radio-group { grid-template-columns: 1fr; }
  /* one card per row, the kicker inline with the title to save height */
  .type-card {
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 3px;
    padding: 13px 42px 13px 15px;
  }
  .type-card::before { display: inline; margin-bottom: 0; }
  .type-card .tc-sub { width: 100%; }
  /* the summary and every card stay comfortable thumb targets */
  .how summary { padding: 11px 0; }
  .steps .step { padding: 6px 11px; font-size: 10.5px; }
  .steps .step + .step { margin-left: 8px; }
  .steps .step + .step::before { display: none; }
  .an-tag { padding: 6px 11px; font-size: 11px; }
  /* submit stays in reach: a glass bar pinned to the bottom of the screen,
     padded past the iPhone home indicator */
  #submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 30px 0 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(11,11,13,0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px 16px 0 0;
  }
  #submit-btn { width: 100%; justify-content: center; min-height: 48px; }
  #submit-status { text-align: center; width: 100%; }
  #confirmation { padding: 22px 18px; }
}

/* the 430 and 380 pass: header collapses, hero type drops, nothing crowds */
@media (max-width: 430px) {
  .athletic-header { padding-right: 10px; }
  .ah-btn { padding: 11px !important; }
  .ah-logo { height: 23px; }
  .an-tag { padding: 5px 9px; font-size: 10px; letter-spacing: 0.04em; }
  h1#form-title { font-size: 26px; }
  .hero-sub { font-size: 14px; padding: 0 6px; }
  .site-hud button { width: 92px; height: 34px; font-size: 10.5px; }
}

@media (max-width: 380px) {
  .ah-logo { height: 20px; }
  .an-tag { font-size: 9.5px; padding: 5px 8px; }
  h1#form-title { font-size: 24px; }
  .wrap { padding: 20px 12px 40px; }
  .steps .step { padding: 6px 9px; font-size: 10px; }
  .steps .step + .step { margin-left: 6px; }
  .section { padding: 18px 14px 18px 17px; }
  .radio-card,
  .field label.radio-card { padding: 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-card, #submit-btn, .type-card::after { transition: none; }
  .radio-card:hover, #submit-btn:hover { transform: none; }
}

/* ===== read aloud pill (shared /sites/reader.js) sits top right on this
   page, Ross 2026-09-11: on here.now it is the only pill up there; on
   localhost the HUD script adopts it into the HUD column under the form
   pill (rule below), so the two never overlap ===== */

body #srBtn.sr-pill {
  bottom: auto;
  top: 64px;
  right: 18px;
}

body #srVox.sr-pill {
  bottom: auto;
  top: 108px;
  right: 18px;
}

/* the shared admin chrome (editor.js pencil, history.js, notes.js) paints
   itself from --volt; this page's accent is Athletic yellow, not volt
   green (Ross, 2026-09-11) */
:root { --volt: #F0B310; }

.site-hud #pc-hist-btn {
  position: static;
  width: 104px;
  height: 36px;
  box-sizing: border-box;
  justify-content: center;
  gap: 6px;
  padding: 0;
  font: 800 11.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
}
.site-hud #pc-hist-btn .ico { font-size: 15px; }

.site-hud #srBtn.sr-pill,
.site-hud #srVox.sr-pill {
  position: static;
  width: 104px;
  height: 36px;
  box-sizing: border-box;
  justify-content: center;
  padding: 0;
  font: 800 11.5px/1 Inter, system-ui, sans-serif;
  color: #F0B310;
  background: rgba(17,17,17,0.82);
  backdrop-filter: blur(8px);
}

/* ===== local admin HUD and the shared editor layer (stripped from the
   publish copy with their marker blocks; these rules just sit unused there) ===== */

.site-hud {
  position: fixed;
  top: 64px;
  right: 18px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.site-hud.on { display: flex; }

.site-hud button {
  width: 104px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: 800 11.5px/1 Inter, system-ui, sans-serif;
  background: rgba(17,17,17,0.82);
  color: #F0B310;
  border: 1px solid rgba(240,179,16,0.45);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.site-hud button:disabled { opacity: 0.6; cursor: wait; }

.site-hud #siteHudAdmin { color: #F0B310; border-color: rgba(240,179,16,0.5); }
.site-hud #siteHudAdmin.off { color: #9a968f; border-color: rgba(255,255,255,0.22); }

.site-hud a { font-size: 10.5px; color: #9a968f; text-decoration: none; }
.site-hud a:hover { color: #fff; }

.site-toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  max-width: 380px;
  background: rgba(17,17,17,0.92);
  color: #f4f2ee;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.site-toast.show { opacity: 1; }

/* the shared editor, history, and notes run in page scope here; their chrome
   only shows while the admin pill is on, and docks clear of the HUD pills */
body:not(.admin) #ed-btn,
body:not(.admin) #pc-hist-btn,
body:not(.admin) #pc-hist-pill { display: none !important; }

#ed-btn { top: auto !important; bottom: 64px !important; right: 18px !important; left: auto !important; }
#ed-panel { top: auto !important; bottom: 110px !important; right: 14px !important; left: auto !important; }
#pc-hist-btn { top: auto !important; bottom: 18px !important; right: 18px !important; left: auto !important; }
#pc-hist { top: auto !important; bottom: 110px !important; right: 14px !important; max-height: min(70vh, 640px) !important; overflow: hidden; }
#pcn-rail { top: 64px !important; }

/* ===== headshot framing widget (headshot.js) =====
   Same dark card grammar as the rest of the form: #141417 surfaces,
   rgba white borders, 16 px radii, the page gold for the circle ring.
   Nothing animated except the ring's subtle glow once a photo is ready. */

.hs-widget { margin-top: 4px; }

.hs-drop {
  background: #141417;
  border: 1.5px dashed rgba(244,236,222,0.25);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.hs-drop:hover,
.hs-drop:focus-visible,
.hs-drop.dragover {
  border-color: rgba(240,179,16,0.55);
  background: #17171b;
  outline: none;
}

.hs-drop-title {
  font-size: 15px;
  font-weight: 700;
  color: #f4f2ee;
  margin-bottom: 5px;
}

.hs-drop-sub {
  font-size: 13px;
  color: #9a968f;
}

.hs-stage-wrap { max-width: 320px; }

.hs-stage {
  position: relative;
  width: 320px;
  height: 320px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0f12;
  border: 1px solid rgba(244,236,222,0.17);
  touch-action: none;
  cursor: grab;
}

.hs-stage:active { cursor: grabbing; }

.hs-stage:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

.hs-canvas {
  display: block;
  width: 320px;
  height: 320px;
  max-width: 100%;
}

/* the framing guide: gold ring inscribed in the stage square, with the
   outside dimmed by the oversized shadow */
.hs-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #F0B310;
  box-shadow: 0 0 0 999px rgba(11,11,13,0.62);
  pointer-events: none;
}

.hs-stage.ready .hs-ring {
  animation: hsglow 3.2s ease-in-out infinite alternate;
}

@keyframes hsglow {
  from { box-shadow: 0 0 0 999px rgba(11,11,13,0.62), 0 0 8px rgba(240,179,16,0.18); }
  to { box-shadow: 0 0 0 999px rgba(11,11,13,0.62), 0 0 20px rgba(240,179,16,0.42); }
}

@media (prefers-reduced-motion: reduce) {
  .hs-stage.ready .hs-ring { animation: none; }
  .hs-drop { transition: none; }
}

.hs-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.hs-zoom {
  flex: 1;
  min-width: 0;
  accent-color: #F0B310;
  cursor: pointer;
}

.hs-btn {
  background: #141417;
  color: #f4f2ee;
  border: 1px solid rgba(244,236,222,0.17);
  border-radius: 10px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}

.hs-btn:hover,
.hs-btn:focus-visible {
  border-color: rgba(240,179,16,0.55);
  outline: none;
}

.hs-hint {
  font-size: 12.5px;
  color: #9a968f;
  line-height: 1.5;
  margin-top: 10px;
}

.hs-error {
  color: #ff7a6b;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
}

.hs-file { display: none; }

.hs-redo-note { color: #F0B310; }

/* ===== review step (review.js) =====
   The pause between Send and the actual send: the rendered contract in a
   readable column, one checkbox, and the approve button. Same dark card
   grammar as the form: #141417 surfaces, rgba white borders, 16 px radii,
   the page gold only as the low alpha highlight on filled answers. */

#review-panel {
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 26px 22px 22px;
  margin: 26px 0;
}

.review-heading {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 8px;
}

.review-intro {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.review-doc {
  max-width: 720px;
  margin: 0 auto 18px;
  max-height: 62vh;
  overflow-y: auto;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 30px 28px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.35;
  color: #ece9e2;
}

.review-doc h1, .review-doc h2, .review-doc h3, .review-doc h4 {
  line-height: 1.35;
  margin: 22px 0 10px;
  color: #f4f2ee;
}

.review-doc h1:first-child, .review-doc h2:first-child,
.review-doc h3:first-child, .review-doc h4:first-child { margin-top: 0; }

.review-doc h1 { font-size: 22px; }
.review-doc h2 { font-size: 19px; }
.review-doc h3 { font-size: 17px; }
.review-doc h4 { font-size: 16px; }

.review-doc p { margin: 0 0 10px; }
.review-doc ul { margin: 0 0 10px; padding-left: 24px; }
.review-doc li { margin-bottom: 6px; }
.review-doc hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 20px 0;
}

.review-doc .filled {
  background: rgba(240,179,16,0.14);
  border-radius: 4px;
  padding: 1px 4px;
}

.review-doc .unresolved {
  font-style: italic;
  color: #9a968f;
  border-bottom: 1px dotted rgba(255,255,255,0.35);
}

.review-count {
  color: #F0B310;
  font-size: 14px;
  margin: 0 0 14px;
}

.review-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 18px;
  cursor: pointer;
}

.review-confirm input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #F0B310;
  cursor: pointer;
  flex-shrink: 0;
}

.review-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.review-back,
.review-approve {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.review-back {
  color: #f4f2ee;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.22);
}

.review-back:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.45);
}

.review-approve {
  color: #F0B310;
  background: rgba(11,11,13,0.35);
  border: 1px solid rgba(240,179,16,0.5);
}

.review-approve:hover {
  transform: translateY(-1px);
  border-color: #F0B310;
  box-shadow: 0 0 0 1px rgba(240,179,16,0.25), 0 0 22px rgba(240,179,16,0.28);
}

.review-back:focus-visible,
.review-approve:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

.review-back:disabled,
.review-approve:disabled {
  color: #9a968f;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.review-status {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 0 0;
  min-height: 1em;
}

.confirm-download { margin-top: 10px; }

.review-download {
  color: #F0B310;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== print: Cmd P on the review panel gives a clean contract ===== */

@media print {
  body {
    background: #fff;
    color: #000;
  }
  .athletic-header,
  .athletic-side-menu,
  .an-backdrop,
  .site-hud,
  .site-toast,
  .hero,
  .foot,
  .how,
  #privacy-note,
  #contract-form,
  #confirmation,
  .noscript-note,
  .review-heading,
  .review-intro,
  .review-count,
  .review-confirm,
  .review-actions,
  .review-status,
  button { display: none !important; }
  #review-panel {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .review-doc {
    max-width: none;
    max-height: none;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    color: #000;
  }
  .review-doc h1, .review-doc h2, .review-doc h3, .review-doc h4 { color: #000; }
  .review-doc .filled {
    background: none;
    padding: 0;
  }
  .review-doc .unresolved {
    color: #000;
    border-bottom: 1px dotted #000;
  }
}

/* ===== portal (portal.html, portal.js) =====
   Where a staffer follows their requests: sign in card, the list, one
   request's view, and the edit banner index.html shows in edit mode.
   Same grammar as the form: #141417 cards, rgba white borders, 16 px
   radii, gold only at low alpha. */

.portal-wrap { padding-bottom: 40px; }

.portal-card,
.portal-section {
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 22px;
  margin: 18px 0;
}

.portal-title {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 8px;
}

.portal-subtitle {
  font-size: 15px;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: #cfcbc4;
}

.portal-help,
.portal-note {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.portal-status {
  color: #9a968f;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 10px 0 0;
  min-height: 1em;
}

.portal-signin-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.portal-signin-row input[type="email"] {
  flex: 1 1 220px;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #ece9e2;
  font-size: 15px;
  padding: 12px 14px;
}

.portal-signin-row input[type="email"]:focus {
  outline: none;
  border-color: rgba(240,179,16,0.5);
}

.portal-signin-row button,
.req-edit-btn,
.req-download-btn,
.reply-send,
.portal-doc-toggle,
#portal-signout {
  background: rgba(240,179,16,0.14);
  border: 1px solid rgba(240,179,16,0.35);
  border-radius: 12px;
  color: #F0B310;
  cursor: pointer;
  font-size: 14.5px;
  padding: 11px 18px;
}

.portal-signin-row button:hover,
.req-edit-btn:hover,
.req-download-btn:hover,
.reply-send:hover,
.portal-doc-toggle:hover,
#portal-signout:hover {
  background: rgba(240,179,16,0.22);
}

.portal-signin-row button:disabled,
.reply-send:disabled,
.req-download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.portal-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 14px 0 0;
  color: #cfcbc4;
  font-size: 14px;
}

#portal-signout { padding: 7px 14px; font-size: 13px; }

.portal-newlink {
  margin: 20px 0 0;
  font-size: 14px;
}

.portal-newlink a,
.portal-back {
  color: #F0B310;
  text-decoration: underline;
}

.portal-back {
  display: inline-block;
  font-size: 13.5px;
  margin-bottom: 14px;
  cursor: pointer;
}

/* the request list */

.req-card {
  display: block;
  width: 100%;
  text-align: left;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 12px;
  color: #ece9e2;
  cursor: pointer;
  font: inherit;
}

.req-card:hover { border-color: rgba(240,179,16,0.4); }

.req-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.req-type { font-size: 16px; }

.req-subject {
  color: #cfcbc4;
  font-size: 14.5px;
  margin-top: 6px;
}

.req-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: #9a968f;
  font-size: 13px;
  margin-top: 8px;
}

/* status pills, plain English labels with their own colors */

.pill {
  display: inline-block;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  padding: 6px 12px;
  white-space: nowrap;
}

.pill.st-submitted { background: rgba(255,255,255,0.10); color: #cfcbc4; }
.pill.st-in_review { background: rgba(240,179,16,0.16); color: #F0B310; }
.pill.st-questions { background: rgba(255,140,60,0.16); color: #ff9c5b; }
.pill.st-approved { background: rgba(80,200,120,0.14); color: #6fd695; }
.pill.st-out_for_signature { background: rgba(90,160,255,0.14); color: #8ab8ff; }
.pill.st-signed { background: rgba(80,200,120,0.22); color: #7fe0a2; }
.pill.st-filed { background: rgba(170,140,255,0.16); color: #b9a6ff; }
.pill.st-withdrawn,
.pill.st-declined { background: rgba(255,110,100,0.14); color: #ff8d80; }

/* one request's view */

.req-view-head { margin-bottom: 14px; }

.req-view-who {
  color: #9a968f;
  font-weight: normal;
  font-size: 16px;
}

.req-view-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: #9a968f;
  font-size: 13.5px;
}

.req-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.portal-doc-wrap { margin: 0 0 16px; }

.portal-doc {
  margin-top: 12px;
  white-space: pre-wrap;
}

.portal-block {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  margin-top: 16px;
}

/* messages, Ross's questions highlighted */

.msg {
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 10px;
}

.msg-ross,
.msg-question {
  border-color: rgba(240,179,16,0.45);
  background: rgba(240,179,16,0.07);
}

.msg-head {
  color: #9a968f;
  font-size: 12.5px;
  margin-bottom: 6px;
}

.msg-ross .msg-head { color: #F0B310; }

.msg-body {
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.reply-box { margin-top: 12px; }

.reply-box textarea {
  width: 100%;
  box-sizing: border-box;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #ece9e2;
  font: inherit;
  font-size: 14.5px;
  padding: 12px 14px;
  margin-bottom: 10px;
  resize: vertical;
}

.reply-box textarea:focus {
  outline: none;
  border-color: rgba(240,179,16,0.5);
}

/* timeline, signers, versions */

.timeline,
.signer-list,
.version-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-item,
.signer-item,
.version-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
}

.timeline-time {
  color: #9a968f;
  font-size: 12.5px;
  white-space: nowrap;
}

.signer-status {
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.10);
  color: #cfcbc4;
}

.signer-status.sg-signed { background: rgba(80,200,120,0.18); color: #7fe0a2; }
.signer-status.sg-viewed { background: rgba(90,160,255,0.14); color: #8ab8ff; }
.signer-status.sg-declined { background: rgba(255,110,100,0.14); color: #ff8d80; }

/* index.html extras: the portal link near the intro, the edit banner,
   and the current headshot shown while editing */

.portal-link {
  font-size: 14px;
  margin: 10px 0 0;
}

.portal-link a {
  color: #F0B310;
  text-decoration: underline;
}

.edit-banner {
  background: rgba(240,179,16,0.10);
  border: 1px solid rgba(240,179,16,0.4);
  border-radius: 16px;
  color: #F0B310;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 14px 18px;
  margin: 0 0 18px;
}

.edit-headshot-current {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
}

.edit-headshot-current img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(240,179,16,0.5);
}

/* ===== signing page (sign.html + sign.js) =====
   Token links land here. Same dark card grammar as the form and the
   review step: #141417 surfaces, rgba white borders, 16 px radii, the
   page gold #F0B310 at low alpha on the pad borders. The pads look like
   paper via CSS background so the exported PNG stays transparent. */

.sign-status {
  color: #9a968f;
  font-size: 15px;
  line-height: 1.6;
  margin: 26px 0;
}

.sign-panel {
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 26px 22px 22px;
  margin: 26px 0;
}

.sign-prepared {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.sign-doc {
  max-height: none;
  white-space: pre-wrap;
}

.sign-card-heading {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 14px;
}

.sign-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
  cursor: pointer;
}

.sign-consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: #F0B310;
  cursor: pointer;
  flex-shrink: 0;
}

.sign-consent input:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 2px;
}

.sign-field { margin: 0 0 18px; }

.sign-field label,
.sign-pad-label {
  display: block;
  font-size: 14px;
  color: #9a968f;
  margin: 0 0 8px;
}

.sign-field input[type="text"],
.sign-field input[type="email"] {
  width: 100%;
  max-width: 420px;
  background: #0f0f12;
  color: #f4f2ee;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
}

.sign-field input[type="text"]:focus-visible,
.sign-field input[type="email"]:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 2px;
}

.sign-pad { max-width: 640px; }

.sign-pad canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #f7f5ef;
  border: 1px solid rgba(240,179,16,0.35);
  border-radius: 16px;
  touch-action: none;
  cursor: crosshair;
}

.sign-pad canvas:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

.sign-pad-initials { max-width: 240px; }

.sign-pad-controls {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.sign-btn {
  font: inherit;
  font-size: 14px;
  color: #f4f2ee;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}

.sign-btn:hover { border-color: rgba(255,255,255,0.4); }

.sign-btn[aria-pressed="true"] {
  border-color: rgba(240,179,16,0.6);
  color: #F0B310;
}

.sign-btn:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

.sign-primary {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #141417;
  background: #F0B310;
  border: 1px solid rgba(240,179,16,0.5);
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
}

.sign-primary:hover {
  box-shadow: 0 0 0 1px rgba(240,179,16,0.25), 0 0 22px rgba(240,179,16,0.28);
}

.sign-primary:disabled {
  color: #9a968f;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.16);
  cursor: not-allowed;
  box-shadow: none;
}

.sign-primary:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

.sign-hint {
  color: #9a968f;
  font-size: 13px;
  margin: 8px 0 0;
}

.sign-note {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 0 0;
  min-height: 1em;
}

.sign-error {
  color: #ff7a6b;
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0 0;
  min-height: 1em;
}

.sign-done {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 10px;
}

/* print from sign.html: only the contract text survives, black on white;
   the shared print block above already hides the header, hero and foot */

@media print {
  .sign-status,
  .sign-prepared,
  #sign-card,
  #company-login { display: none !important; }
  #sign-contract {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .sign-doc {
    max-width: none;
    max-height: none;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    color: #000;
  }
}

/* ===== guided signing: slots, toolbar, adopt card (sign.html + sign.js +
   fields.js, 2026-09-10) =====
   Slots are the inline blanks inside the serif document column. Unfilled
   required slots read like soft yellow paper tabs on the dark page; filled
   slots read like white paper carrying the stamped ink. Same palette as
   everything above: card #141417, input well #0f0f12, gold #F0B310,
   magenta #DC0963 focus rings, muted #9a968f. */

.slot {
  display: inline-block;
  vertical-align: baseline;
  min-width: 7em;
  padding: 0.1em 0.55em;
  border: 0;
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1.6;
  text-align: center;
  color: #3a2a1f;
  background: #f9edbe;
  outline: 2px dashed rgba(240,179,16,0.75);
  outline-offset: 1px;
  cursor: pointer;
}

.slot:hover { outline-color: #F0B310; }

.slot:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 2px;
}

/* kind sizing: signatures wide, initials boxes small */
.slot-signature { min-width: 12em; }
.slot-initials { min-width: 3.5em; }
.slot-name { min-width: 11em; }
.slot-title { min-width: 9em; }
.slot-date { min-width: 7.5em; }

/* text slots are real inputs; keep the chip look, type left to right */
.slot-text { text-align: left; font-family: inherit; }

/* filled: white paper, one thin solid line, the value in page ink */
.slot-filled {
  background: #ffffff;
  color: #141417;
  outline: 1px solid rgba(255,255,255,0.45);
  outline-offset: 1px;
}

/* company slots arrive prefilled and read only: light grey, no pointer */
.slot-company {
  background: #d9d7d2;
  color: #141417;
  outline: 1px solid rgba(255,255,255,0.3);
  cursor: default;
}

/* stamped marks: signatures 1.6em tall, initials 1.2em, ink on white */
.slot img {
  display: inline-block;
  height: 1.2em;
  width: auto;
  vertical-align: -0.25em;
}

.slot-signature img {
  height: 1.6em;
  vertical-align: -0.45em;
}

/* the sticky progress toolbar over the document; wraps on narrow screens */
#sign-toolbar {
  position: sticky;
  top: 50px; /* sits under the 50px sticky .athletic-header */
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 16px;
  margin: 0 0 16px;
  background: rgba(12,12,16,0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #sign-toolbar { background: rgba(11,11,13,0.94); }
}

#sign-progress {
  margin-right: auto;
  color: #9a968f;
  font-size: 14px;
  line-height: 1.4;
}

/* step 1 card: adopt signature and initials, same panel grammar as
   .sign-panel and #review-panel above */
#adopt-card {
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 26px 22px 22px;
  margin: 26px 0;
}

/* Draw and Type tabs: the .sign-btn pill grammar, gold when active */
#adopt-tab-draw,
#adopt-tab-type {
  font: inherit;
  font-size: 14px;
  color: #f4f2ee;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}

#adopt-tab-draw:hover,
#adopt-tab-type:hover { border-color: rgba(255,255,255,0.4); }

#adopt-tab-draw.active,
#adopt-tab-type.active {
  color: #F0B310;
  border-color: rgba(240,179,16,0.6);
  background: rgba(240,179,16,0.08);
}

#adopt-tab-draw:focus-visible,
#adopt-tab-type:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

/* the Type tab's input previews the mark in the same cursive stack the
   canvases render with */
#adopt-typed {
  width: 100%;
  max-width: 420px;
  background: #0f0f12;
  color: #f4f2ee;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 22px;
  font-family: 'Caveat', 'Brush Script MT', cursive;
}

#adopt-typed:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 2px;
}

/* touch screens: the toolbar already wraps; slots grow to a tappable
   height so a finger never misses a blank */
@media (hover: none), (pointer: coarse) {
  .slot { min-height: 2.2em; }
}

/* ===== 2026-09-11 punch list (items 1, 10, 12, 13, 14): portal link,
   done screens, sign page collapsibles, field extras, sign page cooling.
   Shared by index.html and sign.html. Same inlined palette as everything
   above: bg #0b0b0d, ink #f4f2ee, muted #9a968f, card #141417, well
   #0f0f12, red #770400, magenta #DC0963, gold #F0B310, coral #ff8a7a,
   green rgba(80,200,120) and #7fe0a2. */

/* item 1: the portal link is its own element, bold with the brand red,
   clearly separated from the SSN notice. Overrides the older rule above. */
.portal-link {
  margin: 22px 0;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  background: rgba(119,4,0,0.20);
  border: 1px solid rgba(220,9,99,0.40);
  border-left: 3px solid #DC0963;
  border-radius: 12px;
}

.portal-link a {
  color: #ff8d80;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.portal-link a:hover { color: #ffb3a8; }

/* items 10 and 14: the done screen. #reqDone on the request site and
   #signDone on the sign page both carry .done-screen. */
.done-screen {
  background: #141417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 44px 28px 32px;
  margin: 26px 0;
  text-align: center;
}

/* the big green check: inline SVG background, no icon font needed */
.done-check {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid rgba(80,200,120,0.55);
  background: rgba(80,200,120,0.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l5 5.5L19 6.5' fill='none' stroke='%237fe0a2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 42px 42px no-repeat;
}

.done-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
}

.done-sub {
  color: #9a968f;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 8px;
}

#reqDoneId {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: #F0B310;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 14px 0 0;
}

#reqDoneSummary {
  text-align: left;
  color: #cfcbc4;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0 0;
}

/* three real buttons, each a full width row, stacked with gaps */
.done-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 0;
}

.done-actions button,
.done-actions a {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: #f4f2ee;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 13px 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.done-actions button:hover,
.done-actions a:hover {
  color: #F0B310;
  border-color: rgba(240,179,16,0.6);
  background: rgba(240,179,16,0.06);
}

.done-actions button:focus-visible,
.done-actions a:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

.done-close {
  color: #9a968f;
  font-size: 14px;
  margin: 22px 0 0;
}

/* socials contract: optional links block below the done-close line */
.done-links {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* socials contract: block title */
.done-links-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

/* socials contract: the "all optional" line under the title */
.done-links-sub {
  color: #9a968f;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* socials contract: column of the eight link rows */
.done-links-grid {
  display: grid;
  gap: 12px;
}

/* socials contract: label beside field */
.done-link-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 10px;
  align-items: center;
}

/* socials contract: single column on narrow screens */
@media (max-width: 520px) {
  .done-link-row {
    grid-template-columns: 1fr;
  }
}

/* socials contract: platform label */
.done-link-label {
  font-size: 13px;
  font-weight: 600;
  color: #d8d4cc;
}

/* socials contract: wrapper so the state text can sit inside the input */
.done-link-field {
  position: relative;
  display: flex;
  align-items: center;
}

/* socials contract: the url input, right padding leaves room for the state */
.done-link-input {
  flex: 1;
  min-height: 42px;
  padding: 9px 96px 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: inherit;
  font: inherit;
}

/* socials contract: focus ring matches the house gold */
.done-link-input:focus {
  border-color: rgba(240,179,16,0.7);
  outline: none;
}

/* socials contract: save state text overlaid at the right of the input */
.done-link-state {
  position: absolute;
  right: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #9a968f;
  pointer-events: none;
  white-space: nowrap;
}

/* socials contract: the three save states */
.done-link-state.is-saving { color: #9a968f; }
.done-link-state.is-saved { color: #7fe0a2; }
.done-link-state.is-error { color: #ff8d80; }

/* socials contract: quiet note under the grid */
.done-links-note {
  color: #9a968f;
  font-size: 12.5px;
  margin: 14px 0 0;
  min-height: 1em;
}

/* item 12: collapsible contract sections on the sign page. sign.js wraps
   section 7 onward in details.ct-sec inside the pre-wrap document column;
   summary.ct-sec-head is the header row (number and title), the chevron
   is pure CSS. The details padding carries the bare text nodes of the
   body; white-space stays inherited (pre-wrap) so the contract text keeps
   its line breaks. */
details.ct-sec {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  margin: 14px 0;
  padding: 0 16px;
}

details.ct-sec[open] { padding-bottom: 14px; }

summary.ct-sec-head {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -16px;
  padding: 13px 16px;
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
  border-radius: 12px;
  -webkit-user-select: none;
  user-select: none;
}

summary.ct-sec-head::-webkit-details-marker { display: none; }
summary.ct-sec-head::marker { content: ""; }

/* the chevron: points down when closed, up when open */
summary.ct-sec-head::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  margin-top: -4px;
  border-right: 2px solid #9a968f;
  border-bottom: 2px solid #9a968f;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

summary.ct-sec-head:hover { background: rgba(255,255,255,0.05); }
summary.ct-sec-head:hover::after { border-color: #F0B310; }

summary.ct-sec-head:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 2px;
}

details.ct-sec[open] > summary.ct-sec-head {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px 12px 0 0;
  margin-bottom: 10px;
}

details.ct-sec[open] > summary.ct-sec-head::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

/* section A field extras: the soft check hint, choice radio rows, and
   repeater rows with their add and remove controls (fields.js renders
   these; .field, .help and .error above stay the base grammar) */
.soft-hint {
  color: #F0B310;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 7px;
}

.choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* the double selector outguns ".field label" (display block plus a bottom
   margin), same trick as .radio-card above */
.choice label,
.field .choice label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  background: #1b1b1f;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14.5px;
  cursor: pointer;
}

.choice label:hover,
.field .choice label:hover { border-color: rgba(255,255,255,0.35); }

.choice input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #F0B310;
  cursor: pointer;
  flex-shrink: 0;
}

.choice input[type="radio"]:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 2px;
}

.choice label:has(input:checked),
.field .choice label:has(input:checked) {
  background: rgba(240,179,16,0.08);
  border-color: #F0B310;
}

.repeater {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 6px;
}

.repeater-row {
  position: relative;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 16px;
}

.repeater-remove {
  font: inherit;
  font-size: 13px;
  color: #ff8a7a;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.repeater-remove:hover { color: #ffb3a8; }

.repeater-remove:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 2px;
  border-radius: 4px;
}

/* when the remove control sits directly in the row it rides the corner */
.repeater-row > .repeater-remove {
  position: absolute;
  top: 12px;
  right: 12px;
}

.repeater-add {
  align-self: flex-start;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #F0B310;
  background: rgba(240,179,16,0.07);
  border: 1px dashed rgba(240,179,16,0.5);
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  margin-top: 8px;
}

.repeater-add:hover {
  border-color: #F0B310;
  background: rgba(240,179,16,0.12);
}

.repeater-add:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

/* item 12: the sign page runs cool. The header edge keeps its static brand
   hairline plus one static glow; the traveling beam layers (border-beam.js
   children under [data-beam-id]), the liquid glass drift keyframe, the SVG
   turbulence filter, and the backdrop blur on the full width sticky
   surfaces are all off here. Other pages keep every effect. The selectors
   work with the sign-page class on <html> or on <body>. */
.sign-page [data-beam-id] > .bb-layer,
.sign-page [data-beam-id] > .bb-halo-wrap {
  display: none !important;
  animation: none !important;
}

.sign-page .glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(11,11,13,0.92);
}

.sign-page .glass::before {
  animation: none;
  filter: none;
  opacity: 0.22;
}

.sign-page .athletic-header .an-edge {
  opacity: 0.85;
  box-shadow: 0 0 10px rgba(220,9,99,0.35);
}

.sign-page #sign-toolbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(11,11,13,0.94);
}

/* read aloud + HUD on every contracts page (2026-09-11) */

.sr-current {
  outline: 2px solid rgba(240,179,16,.55);
  outline-offset: 6px;
  border-radius: 10px;
}

@media print {
  .sr-pill, .site-hud, .site-toast { display: none !important; }
}

/* ===== template editor =====
   tpl-editor.js (admin only): #tplDoc is the editable contract surface,
   #tplBar the formatting toolbar. The doc reuses the .review-doc tokens
   above (same dark doc surface, serif, measure); the bar and the two HUD
   pills speak the .site-hud glass grammar. The publish copy strips the
   HUD block, so none of this shows to visitors. */

#tplDoc {
  max-width: 760px;
  margin: 26px auto 96px;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 34px 30px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.35;
  color: #ece9e2;
}

.tpl-block {
  margin: 0 0 10px;
  border-radius: 4px;
  outline: none;
}

.tpl-block:focus {
  outline: 1px dashed rgba(240,179,16,0.4);
  outline-offset: 6px;
}

#tplDoc h1, #tplDoc h2, #tplDoc h3 {
  line-height: 1.35;
  margin: 22px 0 10px;
  color: #f4f2ee;
}

#tplDoc h1:first-child, #tplDoc h2:first-child,
#tplDoc h3:first-child { margin-top: 0; }

#tplDoc h1 { font-size: 22px; }
#tplDoc h2 { font-size: 19px; }
#tplDoc h3 { font-size: 17px; }

#tplDoc ul, #tplDoc ol { margin: 0 0 14px; padding-left: 24px; }
#tplDoc li { margin-bottom: 6px; }
/* a list block standing alone still reads as a list item */
#tplDoc > li.tpl-block { margin-left: 24px; list-style-position: outside; }

#tplDoc u, .review-doc u {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(236,233,226,0.7);
}

#tplDoc em, .review-doc em { font-style: italic; }

.tpl-block[data-align=center] { text-align: center; }
.tpl-block[data-align=right] { text-align: right; }
.tpl-block[data-align=justify] { text-align: justify; }

/* placeholder pill: moves as one unit, never wraps */
.tpl-ph {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: #F0B310;
  background: rgba(240,179,16,0.08);
  border: 1px solid rgba(240,179,16,0.45);
  border-radius: 999px;
  padding: 0 8px;
  white-space: nowrap;
}

/* signer field chips: the blanks the signing page fills, colored by who
   fills them. Same pill grammar as .tpl-ph; the bold lead word names the
   party. Yellow stays the requester's form fields. */
.tpl-slot {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 999px;
  padding: 0 8px 0 0;
  white-space: nowrap;
  vertical-align: baseline;
  border: 1px solid;
  cursor: default;
}
.tpl-slot b {
  display: inline-block;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 7px;
  margin-right: 6px;
  border-radius: 999px 0 0 999px;
  color: #111;
}
.tpl-slot-signer { color: #5CB8FF; background: rgba(92,184,255,0.08); border-color: rgba(92,184,255,0.5); }
.tpl-slot-signer b { background: #5CB8FF; }
.tpl-slot-company { color: #6FD98A; background: rgba(111,217,138,0.08); border-color: rgba(111,217,138,0.5); }
.tpl-slot-company b { background: #6FD98A; }
.tpl-slot-private { color: #C58BFF; background: rgba(197,139,255,0.08); border-color: rgba(197,139,255,0.5); }
.tpl-slot-private b { background: #C58BFF; }

/* drag targets */
#tplDoc.tpl-dropping .tpl-block { transition: box-shadow 0.12s; }
#tplDoc .tpl-block.tpl-drop-target {
  box-shadow: 0 0 0 2px rgba(92,184,255,0.7), 0 0 18px rgba(92,184,255,0.25);
  border-radius: 6px;
}

/* the dock: one fixed bottom stack. The tray (signer field palette, and
   any future pop-out) sits directly on top of the toolbar and slides up
   out of it, so it can never end up behind the bar however many rows the
   bar wraps to on a narrow screen. */
#tplDock {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: min(96vw, 1120px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none;
}
#tplDock > * { pointer-events: auto; }
body:not(.tpl-on) #tplDock { display: none; }

#tplTray {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(12px);
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease, transform 0.28s ease, margin-bottom 0.28s ease;
  margin-bottom: 0;
}
#tplTray.open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  margin-bottom: 6px;
}
.tpl-tray-in { min-height: 0; overflow: hidden; }
#tplTray.open .tpl-tray-in { overflow: auto; max-height: min(48vh, 440px); }
#tplTray:not(.open) .tpl-tray-in * { pointer-events: none; }

/* the signer field palette: a glass card riding in the tray */
#tplPalette {
  box-sizing: border-box;
  padding: 12px 14px 10px;
  background: rgba(17,17,17,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px 16px 10px 10px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  font: 500 12px/1.4 Inter, system-ui, sans-serif;
  color: #b8b4ac;
}
body:not(.tpl-on) #tplPalette, #tplPalette[hidden] { display: none; }
.tpl-pal-head {
  font-weight: 700;
  color: #ECE9E2;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tpl-pal-close {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  font: 700 16px/1 Inter, system-ui, sans-serif;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
}
.tpl-pal-close:hover { color: #F0B310; border-color: rgba(240,179,16,0.45); }
.tpl-pal-group {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 8px 0 5px;
}
.tpl-pal-signer { color: #5CB8FF; }
.tpl-pal-private { color: #C58BFF; }
.tpl-pal-company { color: #6FD98A; }
.tpl-pal-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-pal-chip { cursor: grab; }
.tpl-pal-chip:hover { filter: brightness(1.25); }
.tpl-pal-chip:active { cursor: grabbing; }
.tpl-pal-legend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: #9a968f;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.tpl-pal-legend .tpl-ph, .tpl-pal-legend .tpl-slot { margin-right: 2px; }

/* if rail: thin, muted, clearly not contract text */
.tpl-if {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: #9a968f;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(240,179,16,0.35);
  border-radius: 0 8px 8px 0;
  padding: 4px 10px;
  margin: 0 0 10px;
}

/* form anchor slot: dashed frame, the section title rides the top edge
   as a chip; the form section moved inside keeps its own card look */
.tpl-form-slot {
  position: relative;
  border: 1px dashed rgba(240,179,16,0.4);
  border-radius: 14px;
  padding: 24px 14px 14px;
  margin: 20px 0;
  min-height: 34px;
}

.tpl-form-chip {
  position: absolute;
  top: -11px;
  left: 14px;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F0B310;
  background: #0f0f12;
  border: 1px solid rgba(240,179,16,0.45);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.tpl-space { min-height: 1.4em; margin: 0 0 14px; }

.tpl-pagebreak {
  border: none;
  border-top: 1px dashed rgba(255,255,255,0.25);
  margin: 26px 0 22px;
  overflow: visible;
  text-align: center;
}

.tpl-pagebreak::after {
  content: 'page break';
  position: relative;
  top: -0.85em;
  padding: 0 10px;
  background: #0f0f12;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: #9a968f;
}

/* the review step and portal render the same grammar */
.review-doc p.space { min-height: 1.4em; }

.review-doc hr.pagebreak {
  border: none;
  border-top: 1px dashed rgba(255,255,255,0.25);
  margin: 26px 0 22px;
  overflow: visible;
  text-align: center;
}

.review-doc hr.pagebreak::after {
  content: 'page break';
  position: relative;
  top: -0.85em;
  padding: 0 10px;
  background: #0f0f12;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: #9a968f;
}

/* toolbar: bottom row of the dock (#tplDock is the fixed part), the HUD's
   glass pill grammar. Wide enough for one row on a desktop, wraps on a
   phone. */
#tplBar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background: rgba(17,17,17,0.86);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

#tplBar button:disabled { opacity: 0.35; cursor: default; }
#tplBar button svg { display: block; }

#tplBar button {
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

#tplBar button:hover {
  color: #F0B310;
  border-color: rgba(240,179,16,0.45);
}

#tplBar button.cur {
  color: #F0B310;
  background: rgba(240,179,16,0.14);
  border-color: rgba(240,179,16,0.6);
}

#tplBar select {
  height: 30px;
  box-sizing: border-box;
  padding: 0 26px 0 12px;
  font: 800 11px Inter, system-ui, sans-serif;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4%2D5z' fill='%239a968f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

#tplBar select:hover {
  color: #F0B310;
  border-color: rgba(240,179,16,0.45);
}

#tplBar select option { background: #141417; color: #ece9e2; }

/* the two HUD pills tpl-editor.js appends: same look as the other HUD
   buttons via .site-hud button above; admin off means gone */
#siteHudTpl.off, #siteHudForm.off {
  color: #9a968f;
  border-color: rgba(255,255,255,0.22);
}

/* the job overviews pill (jobbank-admin.js): lit when the library panel
   is open, grayed when closed, same on and off look as the admin pill
   (Ross, 2026-09-12: it never highlighted before because only the admin
   pill had these rules) */
.site-hud #siteHudBank { color: #F0B310; border-color: rgba(240,179,16,0.5); }
.site-hud #siteHudBank.off { color: #9a968f; border-color: rgba(255,255,255,0.22); }

body:not(.admin) #siteHudTpl,
body:not(.admin) #siteHudForm { display: none; }

/* visibility gates: bar needs admin and template view, doc needs the view */
body:not(.admin) #tplBar,
body:not(.tpl-on) #tplBar,
body:not(.tpl-on) #tplDoc { display: none; }

/* form off, contract only: the form's sections are div.section (app.js
   renderTypePanel), the requester block is #requester-fields, the panel
   shell is #type-panel, the submit row is #submit-bar (index.html). The
   type picker #contract-type stays visible. .section is matched bare so
   sections moved into .tpl-form-slot hide too. */
body.form-off .section,
body.form-off #requester-fields,
body.form-off #type-panel,
body.form-off #submit-bar { display: none; }

@media print {
  #tplBar, .tpl-form-chip { display: none !important; }
  .review-doc hr.pagebreak {
    border: none;
    margin: 0;
    page-break-after: always;
    break-after: page;
  }
  .review-doc hr.pagebreak::after { content: none; }
}

/* ===== job overviews =====
   jobbank.js paints .bankfold peeks on the form (same fold grammar as
   .stdterms above); jobbank-admin.js paints the #jobBank panel, admin
   only, stripped from the publish copy. Tokens inlined like the rest
   of this file: doc surface #0f0f12, muted #9a968f, gold #F0B310,
   amber #f2d789. */

.bankfold { margin: 4px 0 10px; }

.bankfold summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9a968f;
  padding: 4px 0;
  transition: color 0.2s;
}

.bankfold summary::-webkit-details-marker { display: none; }

.bankfold summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid rgba(154,150,143,0.9);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}

.bankfold[open] summary::before { transform: rotate(90deg); }
.bankfold summary:hover { color: #F0B310; }
.bankfold summary:hover::before { border-left-color: #F0B310; }
.bankfold summary:focus-visible { outline: 2px solid #DC0963; outline-offset: 3px; }

.bankfold-title { font: inherit; color: inherit; }

.bankfold-none {
  color: #9a968f;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 10px;
}

#jobBank {
  max-width: 960px;
  margin: 26px auto 32px;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 22px 20px 20px;
}

#jobBank .bank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

#jobBank .bank-head button,
.bank-actions button {
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

#jobBank .bank-head button:hover,
.bank-actions button:hover { color: #F0B310; border-color: rgba(240,179,16,0.45); }
#jobBank button:disabled { opacity: 0.5; cursor: default; }

.bank-group {
  font-variant: small-caps;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9a968f;
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.bank-row:hover { background: rgba(255,255,255,0.04); }

.bank-chip {
  display: inline-block;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.05em;
  color: #F0B310;
  background: rgba(240,179,16,0.08);
  border: 1px solid rgba(240,179,16,0.45);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}

.bank-edit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 16px;
  align-items: start;
  padding: 14px 12px 16px;
  margin: 2px 0 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

.bank-edit label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f4f2ee;
}

@media (min-width: 900px) {
  .bank-edit { grid-template-columns: 170px minmax(0, 1fr); }
  .bank-edit label { padding-top: 12px; }
  .bank-edit .bank-actions,
  .bank-edit .bank-btns { grid-column: 2; }
  /* the Add flow's paste field spans both columns so the fields below it
     sit in the same cells as a row editor's (Ross, 2026-09-12) */
  .bank-edit .bank-field-paste { grid-column: 1 / -1; }

  /* every field owns a full row and lays itself out as label | control,
     so an extra field or warn line can never knock the ones below it into
     the narrow column (Ross, 2026-09-12: Open Jobs draft posting had its
     overview, duties, notes and tags shoved left) */
  .bank-edit .bank-field,
  .job-edit .bank-field {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 4px 16px;
    align-items: start;
  }
  .bank-edit .bank-field .bank-help,
  .job-edit .bank-field .bank-help { grid-column: 2; }
  .bank-edit .bank-warn,
  .job-edit .bank-warn { grid-column: 2; }
}

.bank-help {
  color: #9a968f;
  font-size: 12.5px;
  line-height: 1.5;
}

.bank-warn:empty { display: none; }

.bank-edit textarea,
.bank-edit select,
.bank-edit input {
  width: 100%;
  background: #0f0f12;
  color: #f4f2ee;
  border: 1px solid rgba(244,236,222,0.17);
  border-radius: 10px;
  padding: 12px 15px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bank-edit textarea { resize: vertical; }
.bank-edit input[readonly] { color: #9a968f; }

.bank-edit select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9a968f 50%), linear-gradient(135deg, #9a968f 50%, transparent 50%);
  background-position: right 21px center, right 15px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.bank-edit input::placeholder,
.bank-edit textarea::placeholder { color: rgba(255,255,255,0.40); }

.bank-edit input:focus,
.bank-edit textarea:focus,
.bank-edit select:focus {
  outline: none;
  border-color: #F0B310;
  box-shadow: 0 0 0 3px rgba(240,179,16,0.22);
}

.bank-warn {
  color: #f2d789;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 4px 0 0;
}

.bank-actions,
.bank-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* The editor button row. jobbank-admin.js and openjobs-admin.js both
   name it .bank-btns; the head-button pill grammar carries over, with
   Save lit gold as the primary and Archive quiet (Ross, 2026-09-12). */
.bank-btns button {
  height: 34px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.03em;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.bank-btns button:hover { color: #F0B310; border-color: rgba(240,179,16,0.45); }
.bank-btns button:disabled { opacity: 0.45; cursor: default; }
.bank-btns .bank-save,
.bank-btns .job-save {
  color: #0f0f12;
  background: #F0B310;
  border-color: #F0B310;
}
.bank-btns .bank-save:hover,
.bank-btns .job-save:hover { color: #0f0f12; background: #f6c536; border-color: #f6c536; }
.bank-btns .bank-save:disabled,
.bank-btns .job-save:disabled { color: #0f0f12; background: rgba(240,179,16,0.35); border-color: transparent; }
.bank-btns .bank-archive { color: #9a968f; border-color: rgba(255,255,255,0.10); }
.bank-btns .bank-archive:hover { color: #f2d789; border-color: rgba(242,215,137,0.45); }
.bank-btns .bank-cancel,
.bank-btns .job-cancel { margin-left: auto; }

body:not(.admin) #jobBank { display: none; }

@media print {
  #jobBank { display: none !important; }
}

/* ===== open jobs =====
   openjobs-admin.js paints the #openJobs panel; jobbank-admin.js adds
   the .bank-advise folds inside .bank-edit (OPENJOBS contract 5c).
   Tokens reused from the job overviews block above: doc surface
   #0f0f12, muted #9a968f, gold #F0B310, amber #f2d789. */

/* the open jobs HUD pill: lit when the panel is open, grayed when
   closed, same treatment as #siteHudBank above */
.site-hud #siteHudJobs { color: #F0B310; border-color: rgba(240,179,16,0.5); }
.site-hud #siteHudJobs.off { color: #9a968f; border-color: rgba(255,255,255,0.22); }

/* the two advise folds inside the bank editor: the fold itself rides
   on the existing .stdterms grammar, this only spaces the block */
.bank-advise {
  display: grid;
  gap: 6px;
  margin: 4px 0 6px;
}

.advise-fold { margin: 2px 0; }

.advise-meta {
  color: #9a968f;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 4px 0;
}

.advise-fold button {
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  margin: 6px 8px 6px 0;
}

.advise-fold button:hover { color: #F0B310; border-color: rgba(240,179,16,0.45); }
.advise-fold button:disabled { opacity: 0.5; cursor: default; }

/* Red's five: ranked list, each row a small card */
.five-list {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
}

.five-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(90px, 140px);
  gap: 6px 10px;
  align-items: center;
  padding: 8px 10px;
  margin: 6px 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}

.five-name { font-weight: 700; color: #f4f2ee; }
.five-title { color: #9a968f; font-size: 13px; }
.five-shifts { grid-column: 1 / -1; font-style: italic; color: #cfcbc4; font-size: 13px; }
.five-row .stdterms-line { grid-column: 1 / -1; }

/* small rounded chips, same look as .bank-chip in the bank rows */
.fit-chip,
.status-chip,
.rec-chip {
  display: inline-block;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.05em;
  color: #F0B310;
  background: rgba(240,179,16,0.08);
  border: 1px solid rgba(240,179,16,0.45);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}

/* quiet chips for the sleepy statuses, amber for filled */
.status-chip.draft,
.status-chip.closed {
  color: #9a968f;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.22);
}

.status-chip.filled {
  color: #f2d789;
  background: rgba(242,215,137,0.08);
  border-color: rgba(242,215,137,0.45);
}

/* fit score: 6px track, gold inner span sized by width percent */
.score-bar {
  position: relative;
  height: 6px;
  min-width: 90px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.score-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(240,179,16,0.85);
}

/* AI absorb barometer */
.absorb-overall {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #f4f2ee;
  margin: 10px 0 4px;
}

.absorb-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(70px, 110px) auto minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 8px 10px;
  margin: 6px 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.absorb-duty { font-weight: 700; color: #f4f2ee; }
.absorb-pct { font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #F0B310; }
.absorb-how { color: #9a968f; }
.absorb-human { font-style: italic; color: #cfcbc4; }

@media (max-width: 720px) {
  .absorb-row { grid-template-columns: minmax(0, 1fr) minmax(70px, 110px) auto; }
  .absorb-row .absorb-how,
  .absorb-row .absorb-human { grid-column: 1 / -1; }
}

.absorb-credits {
  color: #9a968f;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 2px;
}

/* the Open Jobs panel: same doc surface as #jobBank */
#openJobs {
  max-width: 960px;
  margin: 26px auto 32px;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 22px 20px 20px;
}

#openJobs button {
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

#openJobs button:hover { color: #F0B310; border-color: rgba(240,179,16,0.45); }
#openJobs button:disabled { opacity: 0.5; cursor: default; }

.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.job-row:hover { background: rgba(255,255,255,0.04); }

/* the posting editor: same field grammar as .bank-edit */
.job-edit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 16px;
  align-items: start;
  padding: 14px 12px 16px;
  margin: 2px 0 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

.job-edit label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f4f2ee;
}

@media (min-width: 900px) {
  .job-edit { grid-template-columns: 170px minmax(0, 1fr); }
  .job-edit label { padding-top: 12px; }
  .job-edit .bank-actions { grid-column: 2; }
  .job-edit .bank-advise,
  .bank-edit .bank-advise { grid-column: 1 / -1; }
}

.job-edit textarea,
.job-edit select,
.job-edit input {
  width: 100%;
  background: #0f0f12;
  color: #f4f2ee;
  border: 1px solid rgba(244,236,222,0.17);
  border-radius: 10px;
  padding: 12px 15px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.job-edit textarea { resize: vertical; }
.job-edit input[readonly] { color: #9a968f; }

.job-edit select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9a968f 50%), linear-gradient(135deg, #9a968f 50%, transparent 50%);
  background-position: right 21px center, right 15px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.job-edit input::placeholder,
.job-edit textarea::placeholder { color: rgba(255,255,255,0.40); }

.job-edit input:focus,
.job-edit textarea:focus,
.job-edit select:focus {
  outline: none;
  border-color: #F0B310;
  box-shadow: 0 0 0 3px rgba(240,179,16,0.22);
}

/* departed roles fold: name and meta left, the draft button pushed right */
.departed-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  margin: 6px 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}

.departed-row button { margin-left: auto; }

/* ===== Open Jobs: departed queue, archive toggle, absorb plan (Ross, 2026-09-12 night) =====
   Three buttons per row now (Draft posting, Absorb internally, Archive or
   Unarchive), a Current / Archived pill toggle above the list, a calm busy
   state while Red reads the contract and AORG, an inline absorb plan card
   under a row, and a "What Red read" brief at the top of the editor. */

.departed-row button { margin-left: 0; }
.departed-row .departed-draft { margin-left: auto; }
.departed-row.departed-posted-row .departed-absorb,
.departed-row > .departed-absorb:first-of-type { margin-left: auto; }

.departed-draft,
.departed-absorb,
.departed-archive,
.departed-unarchive,
.absorb-actions button {
  font: 600 12.5px/1 Inter, system-ui, sans-serif;
  color: #f4f2ee;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.departed-draft:hover,
.departed-absorb:hover,
.departed-archive:hover,
.departed-unarchive:hover,
.absorb-actions button:hover { background: rgba(255,255,255,0.06); }
.departed-draft:disabled { opacity: 0.7; cursor: progress; }
.departed-absorb { border-color: rgba(240,179,16,0.35); }
.departed-archive { color: #9a968f; }
.departed-unarchive { color: #F0B310; border-color: rgba(240,179,16,0.35); }

.departed-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}
.departed-toggle {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 2px;
}
.departed-toggle-btn {
  font: 600 12.5px/1 Inter, system-ui, sans-serif;
  color: #9a968f;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.departed-toggle-btn.is-on {
  color: #F0B310;
  background: rgba(240,179,16,0.12);
}
.departed-count { color: #9a968f; font-size: 12.5px; }

.departed-row.is-archived { opacity: 0.55; }
.departed-row.is-archived .departed-name { text-decoration: line-through; }
.departed-row.is-busy {
  border-left: 3px solid rgba(240,179,16,0.6);
  animation: departedPulse 1.6s ease-in-out infinite;
}
@keyframes departedPulse {
  0%, 100% { background: rgba(255,255,255,0.02); }
  50% { background: rgba(240,179,16,0.05); }
}

.absorb-plan {
  margin: 4px 0 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(240,179,16,0.25);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.absorb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.absorb-headline { font-size: 15px; font-weight: 600; color: #f4f2ee; }
.absorb-summary { font-size: 14px; line-height: 1.55; color: #d9d5cd; white-space: pre-wrap; margin: 0 0 12px; }

.absorb-chunks { display: grid; gap: 8px; }
.absorb-chunk {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto auto auto;
  gap: 6px 12px;
  align-items: start;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
}
.absorb-owner { font-weight: 700; color: #F0B310; }
.absorb-chunk-name { font-weight: 600; color: #f4f2ee; }
.absorb-hours, .absorb-bump { font-size: 12.5px; color: #9a968f; white-space: nowrap; }
.absorb-bump { color: #F0B310; }
.absorb-bump-note, .absorb-why { grid-column: 2 / -1; font-size: 13px; color: #cfcbc4; }
.absorb-duties { grid-column: 2 / -1; margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: #9a968f; }

.risk-chip {
  display: inline-block;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.risk-low { color: rgb(120,200,140); background: rgba(120,200,140,0.10); border: 1px solid rgba(120,200,140,0.45); }
.risk-medium { color: #F0B310; background: rgba(240,179,16,0.08); border: 1px solid rgba(240,179,16,0.45); }
.risk-high { color: rgb(230,110,110); background: rgba(230,110,110,0.10); border: 1px solid rgba(230,110,110,0.45); }

.absorb-totals {
  font-size: 13px;
  margin: 12px 0;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #d9d5cd;
}
.absorb-delta.saves { color: rgb(120,200,140); font-weight: 600; }
.absorb-delta.costs { color: #F0B310; font-weight: 600; }
.absorb-steps { font-size: 13px; line-height: 1.5; color: #d9d5cd; padding-left: 20px; }
.absorb-watch { font-size: 13px; line-height: 1.5; color: #f2d789; padding-left: 20px; }
.absorb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.absorb-loading { font-size: 13px; color: #9a968f; padding: 10px; }
.absorb-error { font-size: 13px; color: #f2b8b8; padding: 10px; }

.draft-brief {
  grid-column: 1 / -1;
  padding: 10px 12px;
  background: rgba(240,179,16,0.06);
  border: 1px solid rgba(240,179,16,0.25);
  border-radius: 10px;
  margin-bottom: 6px;
}
.draft-brief-head, .draft-brief-title {
  font: 800 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F0B310;
  margin-bottom: 6px;
}
.draft-brief-p, .draft-brief-text {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #d9d5cd;
  margin: 0 0 4px;
}

@media (max-width: 900px) {
  .absorb-chunk { grid-template-columns: 1fr; }
  .absorb-bump-note, .absorb-why, .absorb-duties { grid-column: 1 / -1; }
  .departed-row .departed-draft,
  .departed-row > .departed-absorb:first-of-type { margin-left: 0; }
}

body:not(.admin) #openJobs { display: none; }

@media print {
  #openJobs { display: none !important; }
}

/* ===== job tags =====
   jobtags.js paints the chips, the pickers, and the bank head filter
   (JOBTAGS contract 5G). Chips ride the .bank-chip grammar in a neutral
   base; group tints sit on border and text only. */

.tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.tag-chip {
  display: inline-block;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.05em;
  color: #b8b4ac;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}

/* group tints: border and text only, the fill stays quiet */
.tag-chip.tag-critical-low { color: #8fd18f; border-color: rgba(143,209,143,0.45); }
.tag-chip.tag-critical-med { color: #f2d789; border-color: rgba(242,215,137,0.45); }
.tag-chip.tag-critical-high {
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,107,107,0.30);
}
.tag-chip.tag-mode { color: #9bb8ff; border-color: rgba(155,184,255,0.45); }
.tag-chip.tag-authority { color: #F0B310; border-color: rgba(240,179,16,0.45); }
.tag-chip.tag-dept { color: #c9a5ff; border-color: rgba(201,165,255,0.45); }

/* the picker inside .bank-edit and .job-edit */
.tag-picker {
  display: grid;
  gap: 8px;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tag-group-name {
  flex-basis: 100%;
  font-variant: small-caps;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #9a968f;
}

/* option pills: muted until .on. The ID prefixed selectors outrank the
   panel button rules (#jobBank .bank-head button, #openJobs button) that
   would otherwise force 30px and their own colors. */
#jobBank button.tag-opt,
#openJobs button.tag-opt,
button.tag-opt {
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  color: #b8b4ac;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

button.tag-opt:focus-visible {
  outline: 2px solid #DC0963;
  outline-offset: 3px;
}

/* lit state: group tint on border and text with a 0.10 alpha fill; the
   neutral version covers the 'none' and other plain buttons */
#jobBank button.tag-opt.on,
#openJobs button.tag-opt.on,
button.tag-opt.on {
  color: #f4f2ee;
  border-color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.10);
}

#jobBank button.tag-opt.on.tag-critical-low,
#openJobs button.tag-opt.on.tag-critical-low,
button.tag-opt.on.tag-critical-low { color: #8fd18f; border-color: #8fd18f; background: rgba(143,209,143,0.10); }

#jobBank button.tag-opt.on.tag-critical-med,
#openJobs button.tag-opt.on.tag-critical-med,
button.tag-opt.on.tag-critical-med { color: #f2d789; border-color: #f2d789; background: rgba(242,215,137,0.10); }

#jobBank button.tag-opt.on.tag-critical-high,
#openJobs button.tag-opt.on.tag-critical-high,
button.tag-opt.on.tag-critical-high {
  color: #ff6b6b;
  border-color: #ff6b6b;
  background: rgba(255,107,107,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,107,107,0.30);
}

#jobBank button.tag-opt.on.tag-mode,
#openJobs button.tag-opt.on.tag-mode,
button.tag-opt.on.tag-mode { color: #9bb8ff; border-color: #9bb8ff; background: rgba(155,184,255,0.10); }

#jobBank button.tag-opt.on.tag-authority,
#openJobs button.tag-opt.on.tag-authority,
button.tag-opt.on.tag-authority { color: #F0B310; border-color: #F0B310; background: rgba(240,179,16,0.10); }

#jobBank button.tag-opt.on.tag-dept,
#openJobs button.tag-opt.on.tag-dept,
button.tag-opt.on.tag-dept { color: #c9a5ff; border-color: #c9a5ff; background: rgba(201,165,255,0.10); }

/* the filter row in the bank head: flex-basis 100% drops it onto its
   own full width line inside the flex head */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  margin: 0 0 12px;
}

#jobBank .tag-filter button.tag-clear,
.tag-filter .tag-clear { color: #DC0963; }

@media (min-width: 900px) {
  .bank-edit .tag-picker,
  .job-edit .tag-picker { grid-column: 2; }
}