:root{
    --paper:#E9E7D9;
    --paper-raised:#F4F2E7;
    --ink:#211E16;
    --ink-soft:#57543F;
    --green-900:#24402F;
    --green-700:#3C6349;
    --green-050:#DDE6DC;
    --ochre:#A9772A;
    --ochre-text:#7A5419;
    --ochre-soft:#EFE1C4;
    --rust:#9C3B2A;
    --rust-soft:#F3DCD4;
    --warn-bg:#F9E39A;
    --line:#C7C0A7;
    --line-strong:#A79F84;
    --focus:#3C6349;
    --shadow: 0 1px 2px rgba(33,30,22,.06);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#181B15;
      --paper-raised:#20241C;
      --ink:#ECE7D6;
      --ink-soft:#AFA98F;
      --green-900:#8FBB9E;
      --green-700:#6FA383;
      --green-050:#26332A;
      --ochre:#D9AC5C;
      --ochre-text:#D9AC5C;
      --ochre-soft:#3A311E;
      --rust:#E08066;
      --rust-soft:#3A2420;
      --warn-bg:#4A3B12;
      --line:#3A3E30;
      --line-strong:#4C5140;
      --focus:#8FBB9E;
      --shadow: 0 1px 2px rgba(0,0,0,.3);
    }
  }
  :root[data-theme="dark"]{
    --paper:#181B15;
    --paper-raised:#20241C;
    --ink:#ECE7D6;
    --ink-soft:#AFA98F;
    --green-900:#8FBB9E;
    --green-700:#6FA383;
    --green-050:#26332A;
    --ochre:#D9AC5C;
    --ochre-soft:#3A311E;
    --rust:#E08066;
    --rust-soft:#3A2420;
    --line:#3A3E30;
    --line-strong:#4C5140;
    --focus:#8FBB9E;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }

  *{box-sizing:border-box;}
  /* Scoped to our own wrapper, not the real <body> — a theme's own body
     background/color rules would otherwise win the cascade and leave our
     content sitting on white with the wrong text colors. */
  .cea-cf-root{
    display:block;
    background:var(--paper);
    color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:15px;
    line-height:1.5;
  }
  /* The theme's own h1/h2/h3 rules have equal selector specificity and load
     after ours, so without an explicit color here the theme wins the
     cascade by source order — headings render in the theme's fixed grey
     regardless of light/dark mode, unreadable against our dark surfaces. */
  h1,h2,h3{
    font-family:"Fraunces", Georgia, serif;
    font-weight:500;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  input[type="text"], input[type="number"], .num{
    font-variant-numeric: tabular-nums;
  }

  /* ---------- shell ---------- */
  /* Single column — the two-column layout with a sticky summary rail made
     the form's own left-hand column hard to read at a glance, so the
     summary moved into the pre-submit confirmation modal (see
     dialog#confirm-modal) instead of living beside the form. */
  .shell{
    max-width:760px;
    margin:0 auto;
    padding:40px 28px 120px;
  }
  @media (max-width: 860px){
    .shell{ padding-bottom:200px; }
  }

  .doc-head{
    margin-bottom:34px;
    padding-bottom:26px;
    border-bottom:1px solid var(--line-strong);
  }
  .doc-head .kicker{
    color:var(--ink-soft);
    font-size:13px;
    margin-bottom:6px;
  }
  .doc-head h1{
    font-size:30px;
    letter-spacing:-.01em;
  }
  .doc-head p{
    margin:10px 0 0;
    color:var(--ink-soft);
    font-size:14.5px;
  }

  /* ---------- sections ---------- */
  .section{
    padding:28px 0;
    border-bottom:1px solid var(--line);
  }
  .section:first-of-type{ padding-top:0; }
  .section-head{
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:18px;
  }
  .section-num{
    font-family:"IBM Plex Mono", monospace;
    font-size:13px;
    color:var(--green-700);
    border:1px solid var(--green-700);
    border-radius:50%;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .section-head h2{
    font-size:19px;
  }
  .section-note{
    color:var(--ink-soft);
    font-size:13.5px;
    margin:-8px 0 18px 36px;
  }
  .section-body{ margin-left:36px; }

  /* Plain informational note (not a warning) — green like the site's
     positive/neutral accents, vs. the ochre legal notice below it. */
  .info-notice{
    display:flex;
    gap:14px;
    align-items:center;
    margin-top:22px;
    padding:14px 18px;
    background:var(--green-050);
    border:1px solid var(--green-700);
    border-radius:4px;
  }
  .info-notice .icon{
    width:26px; height:26px; flex-shrink:0;
    border-radius:50%;
    background:var(--paper-raised);
    color:var(--green-700);
    border:1px solid var(--green-700);
    display:flex; align-items:center; justify-content:center;
    font-family:"Fraunces", serif;
    font-size:15px;
    font-style:italic;
  }
  .info-notice p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink); }
  .info-notice strong{ font-weight:500; }

  .legal-notice{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-top:22px;
    padding:16px 18px;
    background:var(--ochre-soft);
    border:1px solid var(--ochre);
    border-radius:4px;
  }
  .legal-notice .icon{
    width:26px; height:26px; flex-shrink:0;
    border-radius:50%;
    background:var(--paper-raised);
    color:var(--ochre);
    border:1px solid var(--ochre);
    display:flex; align-items:center; justify-content:center;
    font-family:"Fraunces", serif;
    font-size:14px;
  }
  .legal-notice p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
  .legal-notice strong{ color:var(--ink); font-weight:500; }
  .legal-notice a{ color:var(--ochre-text); text-decoration-thickness:1px; }

  /* ---------- field basics ---------- */
  label{
    display:block;
    font-size:13px;
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  .req{ color:var(--rust); }
  .field{ display:flex; flex-direction:column; }
  input[type="text"], input[type="date"], input[type="month"], input[type="number"], input[type="email"], input[type="tel"], select, textarea{
    font:inherit;
    color:var(--ink);
    background:var(--paper-raised);
    border:1px solid var(--line-strong);
    border-radius:3px;
    padding:9px 11px;
    width:100%;
  }
  textarea{
    resize:vertical;
    min-height:120px;
    line-height:1.5;
  }
  input:focus-visible, select:focus-visible, button:focus-visible, .upload:focus-within{
    outline:2px solid var(--focus);
    outline-offset:1px;
  }
  input.invalid-flag{
    background:var(--warn-bg);
    border-color:var(--rust);
    color:var(--ink);
  }
  .field-error-note{
    display:none;
    align-items:center;
    gap:5px;
    margin-top:6px;
    font-size:12px;
    font-weight:500;
    color:var(--rust);
  }
  .field-error-note.show{ display:flex; }
  .field-error-note::before{
    content:"!";
    display:flex;
    align-items:center;
    justify-content:center;
    width:14px; height:14px;
    border-radius:50%;
    background:var(--rust);
    color:var(--warn-bg);
    font-size:10px;
    font-weight:600;
    flex-shrink:0;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  input[type="number"]{ -moz-appearance:textfield; }

  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
  .computed{
    font-family:"IBM Plex Mono", monospace;
    text-align:right;
    display:block;
  }

  /* certification */
  .upload{
    border:1px dashed var(--line-strong);
    border-radius:4px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--paper-raised);
    cursor:pointer;
  }
  .upload input{ display:none; }
  .upload .icon{
    width:34px; height:34px; flex-shrink:0;
    border-radius:50%;
    background:var(--green-050);
    color:var(--green-700);
    display:flex; align-items:center; justify-content:center;
  }
  .upload .txt{ font-size:13.5px; }
  .upload .txt strong{ display:block; font-weight:500; color:var(--ink); }
  .upload .txt span{ color:var(--ink-soft); font-size:12.5px; }
  .file-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
  }
  .file-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 8px 6px 12px;
    border-radius:100px;
    background:var(--green-050);
    border:1px solid var(--green-700);
    font-size:12.5px;
    color:var(--green-700);
    max-width:100%;
  }
  .file-chip-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:260px;
  }
  .file-chip-remove{
    flex-shrink:0;
    width:18px; height:18px;
    border-radius:50%;
    border:none;
    background:transparent;
    color:inherit;
    font-size:15px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .file-chip-remove:hover, .file-chip-remove:focus-visible{
    background:var(--rust);
    color:#fff;
  }
  #sign-trigger-empty{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:13.5px; }
  #sign-trigger-empty .icon{
    width:26px; height:26px; border-radius:50%;
    background:var(--green-050); color:var(--green-700);
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  #sign-trigger-filled{ display:flex; align-items:center; gap:14px; width:100%; }

  /* signature modal */
  dialog#sign-modal{
    border:none;
    border-radius:6px;
    padding:0;
    width:min(460px, 92vw);
    background:var(--paper-raised);
    color:var(--ink);
    box-shadow:0 12px 36px rgba(0,0,0,.28);
  }
  dialog#sign-modal::backdrop{ background:rgba(20,18,12,.5); }
  .sm-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--line);
  }
  .sm-head h3{ font-size:17px; }
  .sm-close{
    font:inherit; font-size:20px; line-height:1;
    background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:4px;
  }
  #sm-canvas{
    width:100%;
    height:150px;
    border:1px dashed var(--line-strong);
    border-radius:4px;
    background:var(--paper);
    touch-action:none;
    cursor:crosshair;
    display:block;
  }
  .sm-foot{
    display:flex; justify-content:flex-end; gap:10px;
    padding:14px 18px;
    border-top:1px solid var(--line);
  }
  .sm-cancel{
    font:inherit; font-size:14px;
    background:none;
    border:none;
    color:var(--ink-soft);
    cursor:pointer;
    padding:10px 14px;
  }

  /* post-submit download popup — same dialog chrome as the signature modal */
  dialog#download-modal, dialog#nosales-modal{
    border:none;
    border-radius:6px;
    padding:0;
    width:min(420px, 92vw);
    background:var(--paper-raised);
    color:var(--ink);
    box-shadow:0 12px 36px rgba(0,0,0,.28);
  }
  dialog#download-modal::backdrop, dialog#nosales-modal::backdrop{ background:rgba(20,18,12,.5); }
  .dm-body{ padding:18px; }
  .dm-body p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink); }

  /* Submitting overlay: a non-dismissable dialog shown for the whole
     file-upload + Airtable round trip, since the small inline
     "submit-hint" text alone was easy to miss and filers weren't sure
     the click had registered. */
  dialog#submitting-modal{
    border:none;
    border-radius:6px;
    padding:0;
    width:min(360px, 92vw);
    background:var(--paper-raised);
    color:var(--ink);
    box-shadow:0 12px 36px rgba(0,0,0,.28);
  }
  dialog#submitting-modal::backdrop{ background:rgba(20,18,12,.5); }
  .submitting-body{ padding:28px 22px; text-align:center; }
  .submitting-body h3{ margin:16px 0 8px; font-size:17px; }
  .submitting-body p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
  .submitting-spinner{
    width:38px; height:38px; margin:0 auto; border-radius:50%;
    border:4px solid var(--line); border-top-color:var(--green-700);
    animation:submitting-spin 0.8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){ .submitting-spinner{ animation-duration:2.4s; } }
  @keyframes submitting-spin{ to{ transform:rotate(360deg); } }

  .certify{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:22px;
    padding:16px;
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:4px;
  }
  .certify input{ margin-top:3px; width:16px; height:16px; accent-color:var(--green-700); flex-shrink:0; }
  .certify p{ margin:0; font-size:13px; color:var(--ink-soft); }
  .certify strong{ color:var(--ink); font-weight:500; }

  .submit-row{
    margin-top:26px;
    display:flex;
    align-items:center;
    gap:16px;
  }
  button.primary{
    font:inherit;
    font-weight:500;
    background:var(--green-900);
    color:var(--paper-raised);
    border:none;
    border-radius:3px;
    padding:12px 22px;
    cursor:pointer;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.primary{ color:#0F140F; } }
  :root[data-theme="dark"] button.primary{ color:#0F140F; }
  button.primary:disabled, button.primary[aria-disabled="true"]{ opacity:.55; }
  button.primary:not(:disabled):not([aria-disabled="true"]):hover{ background:var(--green-700); }
  .submit-hint{ font-size:12.5px; color:var(--ink-soft); }

  /* Full-page confirmation: after filing, the entire form (cf-form-view)
     hides and this replaces it, so there's no ambiguity about whether the
     return went through — matches the pattern used on the agent card form. */
  .cf-success-view{
    max-width:520px;
    margin:0 auto;
    padding:72px 28px 100px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .cf-success-view[hidden]{ display:none; }
  .cf-success-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px; height:56px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--green-700);
    color:var(--paper-raised);
    font-size:26px;
    line-height:1;
    margin-bottom:20px;
  }
  .cf-success-view h2{
    font-size:24px;
    margin-bottom:12px;
  }
  #submit-success-msg{
    margin:0 0 26px;
    font-size:15px;
    line-height:1.55;
    color:var(--ink-soft);
  }
  .download-pdf-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 18px;
    border:1px solid var(--green-700);
    border-radius:4px;
    font-size:13.5px;
    font-weight:500;
    color:var(--green-700);
    text-decoration:none;
    background:transparent;
  }
  .download-pdf-btn:hover, .download-pdf-btn:focus-visible{
    background:var(--green-700);
    color:var(--paper-raised);
  }
  .download-pdf-btn[hidden]{ display:none; }

  .validation-summary{
    margin-top:16px;
    padding:14px 18px;
    background:var(--rust-soft);
    border:1px solid var(--rust);
    border-radius:4px;
  }
  .validation-summary strong{ color:var(--ink); font-size:13.5px; }
  .validation-summary ul{ margin:8px 0 0; padding-left:20px; }
  .validation-summary li{ font-size:13px; color:var(--ink-soft); margin-top:4px; }

  /* "Other" incident description — a textarea rather than the generic
     input, but noticeably shorter than the main details field below it. */
  #incident-other{ min-height:80px; resize:vertical; }

  .print-row{
    margin-top:18px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .btn-outline{
    font:inherit;
    font-weight:500;
    background:transparent;
    color:var(--ink-soft);
    border:1px solid var(--line-strong);
    border-radius:3px;
    padding:10px 18px;
    cursor:pointer;
  }
  .btn-outline:hover, .btn-outline:focus-visible{
    color:var(--ink);
    border-color:var(--ink-soft);
  }

  @media print{
    header, footer, nav, .upload, #upload-input, .print-row, .submit-row,
    .kicker, dialog{ display:none !important; }
    .cea-cf-root{ color:#000; background:#fff; }
    input, textarea, select{ border-color:#999 !important; }
  }

  /* ---------- pre-submit review modal ---------- */
  dialog#confirm-modal{
    border:none;
    border-radius:6px;
    padding:0;
    width:min(440px, 92vw);
    background:var(--paper-raised);
    color:var(--ink);
    box-shadow:0 12px 36px rgba(0,0,0,.28);
  }
  dialog#confirm-modal::backdrop{ background:rgba(20,18,12,.5); }
  .rail-head{
    padding:16px 18px;
    background:var(--green-900);
    color:var(--paper-raised);
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rail-head{ color:#0F140F; } }
  :root[data-theme="dark"] .rail-head{ color:#0F140F; }
  .rail-head .month{ font-family:"Fraunces", serif; font-size:16px; font-weight:500; }
  .rail-head .biz{ font-size:12px; opacity:.85; margin-top:2px; }
  .rail-body{ padding:16px 18px; }
  .rail-line{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:7px 0;
    font-size:13px;
  }
  .rail-line .l{ color:var(--ink-soft); }
  .rail-line .v{ font-family:"IBM Plex Mono", monospace; }
  .rail-line.sub{ padding-left:10px; font-size:12px; }
  .rail-line.sub .l{ color:var(--ink-soft); }

  @media (prefers-reduced-motion: no-preference){
    button.primary{ transition: background .15s ease; }
  }

/* ---- Complaint form-specific additions ---- */
.cea-cf-checkbox-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px 22px;
  margin-top:8px;
}
@media (max-width:640px){
  .cea-cf-checkbox-grid{ grid-template-columns:1fr; }
}
.cea-cf-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  cursor:pointer;
}
.cea-cf-check input{ margin-top:3px; flex-shrink:0; }
.cea-cf-check-body{ display:flex; flex-direction:column; gap:2px; }
.cea-cf-check-sub{ font-size:12px; color:var(--ink-soft); font-weight:400; line-height:1.4; }

.cea-cf-witness-entry-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.cea-cf-witness-entry-row input{
  flex:1 1 160px;
  min-width:0;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-raised);
  color:var(--ink);
  font:inherit;
  font-size:14px;
}
.cea-cf-witness-entry-row input:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.15);
}
.chip-add-btn{
  flex:0 0 auto;
  padding:9px 16px;
  border:1px solid var(--green-700);
  border-radius:8px;
  background:var(--green-700);
  color:var(--paper);
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
}
.chip-add-btn:hover{ opacity:.92; }