:root {
  --midnight: #141B4F;
  --blue: #333861;
  --snow: #FFFAFA;
  --gold: #F4C378;
  --rose: #CA7191;
  --graphite: #27323A;
  --surface: #FFFFFF;
  --border: #E4E7F0;
  --section-bg: #F7F5F5;
  --muted: #6F7A83;
  --danger-bg: #FDEAEA;
  --danger-fg: #B42318;
  --ok-bg: #E7F6EC;
  --ok-fg: #1B7A3D;
}

* { box-sizing: border-box; }
html { background: var(--section-bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 32rem),
    var(--section-bg);
  color: var(--graphite);
  font-family: Lato, system-ui, sans-serif;
  line-height: 1.5;
}
h1, h2, h3, .card-title, .section-title {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
}
a { color: var(--midnight); }
button, input, textarea, select { font: inherit; font-size: 16px; }
button, a { -webkit-tap-highlight-color: transparent; }
.page { width: min(100% - 28px, 860px); margin: 0 auto; padding: 28px 0 64px; }
.card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(20, 27, 79, .11);
}
.topband {
  padding: 26px clamp(22px, 5vw, 48px);
  background: var(--midnight);
  color: var(--snow);
}
.topband h1 { margin: 0; font-size: clamp(28px, 5vw, 38px); line-height: 1.15; }
.topband p { margin: 7px 0 0; opacity: .86; }
.customer-line { font-size: 14px; letter-spacing: .02em; opacity: .76; }
.content { padding: clamp(22px, 5vw, 48px); }
.emergency {
  margin: 0 0 28px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--danger-fg) 28%, transparent);
  border-left: 5px solid var(--danger-fg);
  border-radius: 12px;
  background: var(--danger-bg);
}
.emergency h2 { margin: 0 0 5px; font-size: 19px; color: var(--danger-fg); }
.emergency p { margin: 0 0 8px; }
.emergency a { color: var(--danger-fg); font-weight: 700; }
.step {
  min-width: 0;
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.step:first-of-type { border-top: 0; }
.step legend, .section-title { padding: 0; margin: 0 0 18px; font-size: 21px; }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--midnight);
  color: var(--snow);
  font-size: 15px;
}
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label, .field-label { font-weight: 700; }
.field input, .field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--graphite);
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus, .email-optin-form input:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 75%, white);
  outline-offset: 2px;
  border-color: var(--midnight);
}
.field input[readonly] { background: var(--section-bg); color: var(--muted); }
.hint, .muted { color: var(--muted); font-size: 14px; }
.req { color: var(--rose); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--graphite);
  cursor: pointer;
}
.chip:hover { border-color: var(--midnight); }
.chip.is-selected {
  border-color: var(--midnight);
  background: var(--midnight);
  color: var(--snow);
}
.checks { display: grid; gap: 12px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--midnight); }
.attachment-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.attachment-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach, .secondary, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--midnight);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}
.attach-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.attach-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--section-bg);
}
.attach-item button { border: 0; background: transparent; color: var(--danger-fg); cursor: pointer; }
.submit, .primary-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: var(--midnight);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.submit:hover, .primary-link:hover { filter: brightness(.97); transform: translateY(-1px); }
.submit:disabled { opacity: .6; cursor: progress; transform: none; }
.status { min-height: 1.4em; margin: 15px 0 0; }
.status.ok, .status.err { padding: 12px 14px; border-radius: 9px; }
.status.ok { background: var(--ok-bg); color: var(--ok-fg); }
.status.err { background: var(--danger-bg); color: var(--danger-fg); }
.gdpr { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.success { padding: clamp(26px, 6vw, 52px); }
.success h2 { margin-top: 0; }
.selectable { user-select: text; overflow-wrap: anywhere; }
.mailcard {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  background: var(--section-bg);
}
.mailcard h3 { margin: 0 0 12px; }
.mailcard pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: Lato, system-ui, sans-serif;
}
.email-optin {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--section-bg);
}
.email-optin-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.email-optin-form input {
  flex: 1 1 220px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--graphite);
}
.email-optin-form button {
  padding: 12px 20px;
  border: 0;
  border-radius: 9px;
  background: var(--gold);
  color: var(--midnight);
  font-weight: 700;
  cursor: pointer;
}
.email-optin-form button:disabled { opacity: .6; cursor: progress; }
.stack { display: grid; gap: 18px; }
.panel { padding: 22px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.panel h2 { margin: 0 0 15px; font-size: 20px; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.status-pill, .urgent-badge {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.status-pill--received { background: var(--section-bg); color: var(--blue); }
.status-pill--queued { background: color-mix(in srgb, var(--gold) 38%, white); color: var(--midnight); }
.status-pill--in_progress { background: color-mix(in srgb, var(--blue) 15%, white); color: var(--blue); }
.status-pill--done { background: var(--ok-bg); color: var(--ok-fg); }
.status-pill--cancelled, .status-pill--closed, .urgent-badge { background: var(--danger-bg); color: var(--danger-fg); }
.thread { display: grid; gap: 12px; }
.bubble { max-width: 82%; padding: 12px 14px; border-radius: 14px; }
.bubble strong, .bubble time { display: block; font-size: 13px; }
.bubble time { margin-top: 5px; color: var(--muted); }
.bubble--in { justify-self: start; background: var(--section-bg); border-bottom-left-radius: 3px; }
.bubble--out { justify-self: end; background: color-mix(in srgb, var(--gold) 35%, white); border-bottom-right-radius: 3px; }
.composer { display: grid; gap: 10px; margin-top: 18px; }
.composer textarea { width: 100%; min-height: 110px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.attachment-card { padding: 10px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.attachment-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.timeline { margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--border); }
.timeline-item { position: relative; padding: 0 0 18px 14px; }
.timeline-item::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); }
.timeline-item time { display: block; color: var(--muted); font-size: 14px; }
.danger-button { border-color: var(--danger-fg); color: var(--danger-fg); }
.portal-footer { padding: 22px 0; text-align: center; color: var(--muted); font-size: 14px; }
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(20,27,79,.55); }
.dialog { width: min(100%, 440px); padding: 24px; background: var(--surface); border-radius: 14px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .page { width: min(100% - 16px, 860px); padding-top: 8px; }
  .card { border-radius: 12px; }
  .grid-2 { grid-template-columns: 1fr; gap: 0; }
  .content { padding: 20px; }
  .topband { padding: 22px 20px; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; }
  .chip { border-radius: 9px; }
  .bubble { max-width: 92%; }
}

/* Embedded mode: inside a host-site iframe (html.is-embedded, set in
   index.html <head>). The host page provides the surrounding chrome, so drop
   the page background and padding and let the card fill the frame. The host
   site is also expected to show emergency contact info, so the banner is
   hidden to keep the embed focused on the form. */
html.is-embedded, html.is-embedded body { background: none; }
html.is-embedded .page { width: 100%; padding: 0; }
html.is-embedded .card { box-shadow: none; }
html.is-embedded .emergency { display: none; }