:root {
  --navy: #111b2d;
  --ink: #172033;
  --muted: #626c7c;
  --line: #dfe3e8;
  --surface: #ffffff;
  --page: #f5f6f8;
  --yellow: #ffd43b;
  --yellow-hover: #f2c522;
  --success-bg: #edf8f1;
  --success: #176b3a;
  --warning-bg: #fff8e2;
  --warning: #765600;
  --danger-bg: #fff0f0;
  --danger: #a32626;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--page); }
button, textarea { font: inherit; }
button:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(27, 96, 180, .28); outline-offset: 2px; }

.site-header { height: 62px; background: var(--navy); color: #fff; }
.header-inner { width: min(1120px, calc(100% - 40px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
/* Explicit height AND max-width: the img carries width="581" height="98"
   attributes, so if styles.css is cached/stale the browser falls back to the
   intrinsic 581px and the logo renders enormous. Belt and braces. */
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 750; letter-spacing: -.01em; min-width: 0; }
.brand-logo { height: 26px; width: auto; max-width: 155px; max-height: 26px; display: block; object-fit: contain; }
.header-title { color: #d7dce5; font-size: 13px; font-weight: 600; }

.page-shell { width: min(462px, calc(100% - 32px)); margin: 124px auto 72px; }
.card, .help-card { background: var(--surface); border: 1px solid rgba(21, 32, 50, .07); border-radius: 9px; box-shadow: 0 8px 30px rgba(20, 30, 50, .08); }
.card { padding: 31px 31px 30px; }
.panel h1 { margin: 0 0 13px; color: #111827; font-size: 25px; line-height: 1.18; letter-spacing: -.025em; }
.intro { margin: 0 0 28px; color: #505a69; font-size: 13.5px; line-height: 1.55; }

.signed-in-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-bottom: 21px; margin-bottom: 24px; border-bottom: 1px solid #eceef1; }
.signed-in-row div { min-width: 0; }
.signed-label { display: block; margin-bottom: 2px; color: #7a8391; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
#signed-user { display: block; max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #273145; font-size: 13px; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: #606a78; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

label { display: block; margin-bottom: 9px; color: #202939; font-size: 13px; font-weight: 700; }
.required { color: #d22e2e; }
textarea { display: block; width: 100%; min-height: 432px; resize: vertical; padding: 13px 14px; border: 1px solid #cfd5dd; border-radius: 5px; color: #1e2736; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.48; transition: border-color .16s, box-shadow .16s; }
textarea::placeholder { color: #9aa1ac; }
textarea:hover { border-color: #b6bec9; }
textarea:focus { border-color: #5977a6; box-shadow: 0 0 0 3px rgba(63, 100, 158, .11); outline: 0; }
.tip { margin: 11px 0 24px; color: #6d7582; font-size: 11px; font-style: italic; line-height: 1.5; }
.tip strong { color: #515a68; }

.submit-button { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 4px; color: #151b26; background: var(--yellow); font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); transition: background .15s, transform .06s; }
.submit-button:hover { background: var(--yellow-hover); }
.submit-button:active { transform: translateY(1px); }
.submit-button:disabled { cursor: wait; opacity: .67; transform: none; }
.button-icon { font-size: 14px; }
.submit-button.loading .button-icon { width: 15px; height: 15px; border: 2px solid rgba(17, 27, 45, .25); border-top-color: var(--navy); border-radius: 50%; font-size: 0; animation: spin .8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.acting-row { margin: 0 0 18px; }
.acting-row > label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 650; color: var(--navy); }
.acting-field { position: relative; }
.acting-field input { width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--navy); background: #fff; border: 1px solid #d3d9e2; border-radius: 5px; }
.acting-field input:focus { border-color: #1b60b4; outline: none; box-shadow: 0 0 0 3px rgba(27, 96, 180, .12); }
.acting-options { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: 236px; overflow-y: auto; background: #fff; border: 1px solid #d3d9e2; border-radius: 6px; box-shadow: 0 10px 26px rgba(20, 30, 50, .14); }
.acting-options li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.acting-options li:hover, .acting-options li.highlighted { background: #eef4fc; }
.acting-options li strong { font-size: 12.5px; font-weight: 650; color: var(--navy); }
.acting-options li span { font-size: 11px; color: #7b8493; }
.acting-options li.acting-empty { color: #7b8493; font-size: 12px; cursor: default; }
.acting-options li.acting-empty:hover { background: transparent; }
.acting-note { margin: 6px 0 0; font-size: 11px; color: #89919d; line-height: 1.45; }
.acting-note.active { color: #176b3a; }
.result { margin-top: 18px; padding: 14px 15px; border-radius: 5px; font-size: 12px; line-height: 1.5; }
.result.success { color: var(--success); background: var(--success-bg); border: 1px solid #c8e7d3; }
.result.warning { color: var(--warning); background: var(--warning-bg); border: 1px solid #eedc9c; }
.result.error { color: var(--danger); background: var(--danger-bg); border: 1px solid #efc5c5; }
.result p { margin: 4px 0 0; }

.auth-box { display: flex; gap: 12px; padding: 14px; margin: 0 0 22px; border-radius: 5px; background: #f4f6f9; border: 1px solid #e0e4e9; }
.lock-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; color: #38547d; font-size: 8px; border: 2px solid #38547d; border-radius: 50%; }
.auth-box strong, .auth-box span { display: block; }
.auth-box strong { margin-bottom: 3px; font-size: 12px; }
.auth-box div span { color: #687282; font-size: 11px; line-height: 1.4; }
.google-signin { min-height: 44px; display: flex; justify-content: center; }
.message { padding: 10px 12px; margin: 16px 0 0; border-radius: 5px; font-size: 12px; }
.message.error { color: var(--danger); background: var(--danger-bg); }

.help-card { margin-top: 20px; padding: 24px 28px; box-shadow: 0 4px 18px rgba(20, 30, 50, .05); }
.help-card h2 { margin: 0 0 8px; font-size: 15px; }
.help-card p { margin: 0 0 11px; color: #6b7482; font-size: 11.5px; line-height: 1.52; }
.help-card a { color: #304f80; font-size: 11.5px; font-weight: 700; text-decoration: none; }
.help-card a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

@media (max-width: 600px) {
  .site-header { height: 58px; }
  .header-inner { width: calc(100% - 28px); }
  .brand-logo { height: 21px; }
  .header-title { font-size: 11px; }
  .page-shell { width: calc(100% - 22px); margin: 28px auto 48px; }
  .card { padding: 25px 20px 24px; }
  .panel h1 { font-size: 23px; }
  textarea { min-height: 390px; }
  .signed-in-row { align-items: flex-start; }
  #signed-user { max-width: 225px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Submission overlay ─────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(11, 18, 32, .86); animation: ov-fade .18s ease-out; }
.overlay[hidden] { display: none; }
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }

.overlay-card { width: min(440px, 100%); padding: 34px 30px 30px; text-align: center;
  background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(8, 14, 28, .4);
  animation: ov-rise .22s cubic-bezier(.2, .9, .3, 1); will-change: transform, opacity; }
@keyframes ov-rise { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.ov-state[hidden] { display: none; }
.ov-title { margin: 0 0 6px; font-size: 21px; font-weight: 750; letter-spacing: -.02em; color: var(--navy); }
.ov-title.ok { color: #14733d; }
.ov-title.bad { color: #b3261e; }
.ov-title.wait { color: #8a5a00; }
.ov-countdown { margin: 10px 0 0; font-size: 30px; font-weight: 800; color: #8a5a00; font-variant-numeric: tabular-nums; }
.ov-sub { margin: 0; font-size: 13px; line-height: 1.5; color: #5d6675; }
.ov-action { margin: 14px 0 0; padding: 11px 13px; font-size: 12.5px; line-height: 1.5;
  color: #7a1d17; background: #fff0ef; border: 1px solid #f3c9c5; border-radius: 7px; }
.ov-code { margin: 10px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #8a919d; }

.spinner { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%;
  border: 4px solid #e6eaf0; border-top-color: #b3261e;
  animation: spin .8s linear infinite;
  /* NOTE: do NOT add a static `transform` here. A transform declaration on the
     same element overrides the animation's transform, so the keyframes keep
     "running" while the element sits frozen at 0deg. `will-change` alone is
     enough to get compositor promotion. */
  will-change: transform; }

.badge { width: 74px; height: 74px; margin: 0 auto 16px; }
.badge svg { width: 100%; height: 100%; }
.badge-ring { fill: none; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: draw-ring .45s cubic-bezier(.65, 0, .45, 1) forwards; }
.badge-tick, .badge-x { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw-mark .3s .4s cubic-bezier(.65, 0, .45, 1) forwards; }
.badge-ok .badge-ring { stroke: #1c9a55; } .badge-ok .badge-tick { stroke: #1c9a55; }
.badge-bad .badge-ring { stroke: #d3352b; } .badge-bad .badge-x { stroke: #d3352b; }
.badge-wait .badge-ring { stroke: #c98a00; } .badge-wait .badge-clock { stroke: #c98a00; }
.badge-clock { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw-mark .3s .4s cubic-bezier(.65, 0, .45, 1) forwards; }
@keyframes draw-ring { to { stroke-dashoffset: 0; } }
@keyframes draw-mark { to { stroke-dashoffset: 0; } }

.quote { margin: 22px 0 0; padding: 15px 16px; background: #f5f7fa; border-radius: 9px; border-left: 3px solid #b3261e; }
.quote blockquote { margin: 0; font-size: 13px; line-height: 1.55; font-style: italic; color: #2c3546; }
.quote figcaption { margin: 7px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #8a919d; }

.ov-button { margin: 20px 0 0; width: 100%; padding: 12px; font: inherit; font-size: 14px; font-weight: 700;
  color: #fff; border: 0; border-radius: 7px; cursor: pointer; }
.ov-button.ok { background: #1c9a55; }
.ov-button.ok:hover { background: #17843f; }
.ov-button.bad { background: #b3261e; }
.ov-button.bad:hover { background: #971d16; }
.ov-button.wait { background: #b07800; }
.ov-button.wait:hover { background: #966600; }
.ov-button[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 600px) {
  .overlay-card { padding: 28px 20px 24px; }
  .ov-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay-card, .badge-ring, .badge-tick, .badge-x, .badge-clock { animation: none; }
  .badge-ring, .badge-tick, .badge-x, .badge-clock { stroke-dashoffset: 0; }
}

/* Progress width and stripe travel both use transforms, so the overlay stays cheap. */
.progress { margin: 18px 0 9px; height: 6px; border-radius: 99px; background: #e8ecf2; overflow: hidden; }
.progress-fill { height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #b3261e, #e0483d);
  position: relative; overflow: hidden; transform: scaleX(0); transform-origin: left center; will-change: transform;
  transition: transform .35s cubic-bezier(.25, .8, .3, 1); }
.progress-fill::after { content: ''; position: absolute; inset: 0 -24px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255, 255, 255, .28) 7px 13px);
  transform: translateX(-18px); animation: progress-stripes .7s linear infinite; will-change: transform; }
@keyframes progress-stripes { from { transform: translateX(-18px); } to { transform: translateX(0); } }
.progress-fill.done { background: linear-gradient(90deg, #1c9a55, #29b366); }
.progress-step { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: #7b8493; }
@media (prefers-reduced-motion: reduce) { .progress-fill::after { animation: none; transform: none; } }

/* CRM link warning. Sits between the textarea and the submit button so it is
   impossible to miss while fixing the EOD. Uses the existing danger tokens so
   it reads as the same class of message as a failed submission. */
.link-warning {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid #efc5c5;
  font-size: 14px;
  line-height: 1.5;
}

.link-warning-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.link-warning-list {
  margin: 0 0 10px;
  padding-left: 18px;
}

.link-warning-list li {
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.link-warning-list code {
  font-size: 12.5px;
  background: rgba(163, 38, 38, 0.08);
  padding: 2px 5px;
  border-radius: 4px;
}

.link-warning-help {
  color: #7d2a2a;
}

/* A disabled submit button must look disabled, or a closer will keep clicking
   a dead control and think the page is broken. */
.submit-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}