/* =====================================================================
 * app.css: salmonela claim form
 * ITCSS order per the RENOMIA design system guide; every value from a --rn-* token
 * (vendor/design-system/design-tokens.css, @renomia/design-system v3.0.0).
 * ===================================================================== */

/* 01 Settings: local aliases built from tokens -------------------------- */
:root {
  --brand: var(--rn-color-neutral-400);       /* #003865, BRS primary blue */
  --brand-accent: var(--rn-color-cyan-400);   /* #71C5E8, header line, info boxes */
  --info-bg: var(--rn-color-cyan-100);
  --page-bg: var(--rn-color-gray-100);
  --surface: var(--rn-color-white);
  --text: var(--rn-color-black);
  --text-muted: var(--rn-color-gray-600);
  --border: var(--rn-color-gray-300);
  --error: var(--rn-color-red-500);
  --error-bg: var(--rn-color-red-50);
  --warning-bg: var(--rn-color-orange-100);
  --focus: var(--rn-color-blue-400);
  --content-max: 720px;
}

/* Fonts: self-hosted from the design-system bundle */
@font-face { font-family: "Noto Sans"; font-weight: 400; font-display: swap; src: url("vendor/design-system/fonts/NotoSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 500; font-display: swap; src: url("vendor/design-system/fonts/NotoSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-display: swap; src: url("vendor/design-system/fonts/NotoSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Material Symbols Outlined"; font-weight: 400; font-display: block; src: url("vendor/design-system/fonts/material-symbols-outlined.woff2") format("woff2"); }

/* 03 Generic ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* 04 Elements ----------------------------------------------------------- */
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--rn-typography-font-family-sans);
  font-size: var(--rn-typography-font-size-16);
  line-height: var(--rn-typography-line-height-150);
}
a { color: var(--brand); }
h1, h2 { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 05 Objects ------------------------------------------------------------ */
.Page { min-height: 100vh; display: flex; flex-direction: column; }
.Main { flex: 1; width: 100%; max-width: calc(var(--content-max) + 2 * var(--rn-spacing-4)); margin: 0 auto; padding: var(--rn-spacing-6) var(--rn-spacing-4) var(--rn-spacing-12); }
.Grid { display: grid; gap: 0 var(--rn-spacing-4); }
@media (min-width: 600px) { .Grid { grid-template-columns: 1fr 1fr; } }

/* 06 Components --------------------------------------------------------- */

/* Header / footer */
.TestBanner { background: var(--rn-color-orange-400); color: var(--text); text-align: center; font-size: var(--rn-typography-font-size-14); font-weight: var(--rn-typography-font-weight-600); padding: var(--rn-spacing-1) var(--rn-spacing-4); }
.Header { background: var(--surface); border-bottom: 4px solid var(--brand-accent); }
.Header__inner { max-width: calc(var(--content-max) + 2 * var(--rn-spacing-4)); margin: 0 auto; padding: var(--rn-spacing-4); display: flex; align-items: center; justify-content: space-between; gap: var(--rn-spacing-4); }
.Header__logo img { display: block; height: 40px; width: auto; }
.Header__title { color: var(--text-muted); font-size: var(--rn-typography-font-size-18); }
.Footer { background: var(--brand); color: var(--surface); text-align: center; padding: var(--rn-spacing-4); font-size: var(--rn-typography-font-size-14); }
.Footer a { color: inherit; }

/* Progress */
.Progress { margin-bottom: var(--rn-spacing-4); }
.Progress__label { margin: 0 0 var(--rn-spacing-2); color: var(--text-muted); font-size: var(--rn-typography-font-size-14); }
.Progress__bar { height: 8px; background: var(--rn-color-gray-200); border-radius: var(--rn-radius-9999); overflow: hidden; }
.Progress__fill { height: 100%; width: 16.6%; background: var(--brand); border-radius: inherit; transition: width var(--rn-motion-duration-300); }
.Wizard:not(.is-enhanced) .Progress { display: none; }

/* Steps: without JS all are shown; with JS only the current one */
.Step { margin-bottom: var(--rn-spacing-10); }
.Wizard.is-enhanced .Step { display: none; margin-bottom: var(--rn-spacing-6); }
.Wizard.is-enhanced .Step.is-current { display: block; }
.Wizard:not(.is-enhanced) .Nav { display: none; }
.Step__title { color: var(--brand); font-size: var(--rn-typography-font-size-24); font-weight: var(--rn-typography-font-weight-600); line-height: var(--rn-typography-line-height-120); margin-bottom: var(--rn-spacing-4); }
.Text { margin: 0 0 var(--rn-spacing-4); }
.Text--muted { color: var(--text-muted); }
.List { margin: var(--rn-spacing-2) 0; padding-left: var(--rn-spacing-5); }

/* Alerts */
.Alert { border-radius: var(--rn-radius-12); padding: var(--rn-spacing-4); margin: 0 0 var(--rn-spacing-4); border: 1px solid; }
.Alert p { margin: 0 0 var(--rn-spacing-2); }
.Alert p:last-child { margin-bottom: 0; }
.Alert--info { background: var(--info-bg); border-color: var(--brand-accent); color: var(--brand); }
.Alert--error { background: var(--error-bg); border-color: var(--error); color: var(--error); font-weight: var(--rn-typography-font-weight-500); }
.Alert--warning { background: var(--warning-bg); border-color: var(--rn-color-orange-400); }

/* Fields */
.Field { margin-bottom: var(--rn-spacing-4); }
.Field__label { display: block; margin: 0 0 var(--rn-spacing-1); font-size: var(--rn-typography-font-size-14); font-weight: var(--rn-typography-font-weight-500); }
.Field__req { color: var(--error); }
.Field--optional .Field__req { display: none; }
.Field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--rn-spacing-3);
  border: 1px solid var(--border);
  border-radius: var(--rn-radius-8);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.Field__input--area { min-height: 140px; resize: vertical; }
/* iOS Safari draws type=date as a native control that ignores width:100% (it overflowed the screen)
   and centres the value. Drop the native look, let it shrink, align the value left. */
.Field__input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; text-align: left; }
.Field__input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.Field__input:focus { border-color: var(--brand); outline: 2px solid var(--brand-accent); outline-offset: 0; }
.Field__hint { margin: var(--rn-spacing-1) 0 0; color: var(--text-muted); font-size: var(--rn-typography-font-size-13); }
.Field__error { margin: var(--rn-spacing-1) 0 0; color: var(--error); font-size: var(--rn-typography-font-size-14); font-weight: var(--rn-typography-font-weight-500); }
.Field--invalid .Field__input { border-color: var(--error); border-width: 2px; }
.Fieldset { border: 0; margin: 0 0 var(--rn-spacing-4); padding: 0; }
.Fieldset__legend { font-weight: var(--rn-typography-font-weight-600); margin-bottom: var(--rn-spacing-2); padding: 0; }

/* Role cards (radio) */
.Choice { display: flex; align-items: center; gap: var(--rn-spacing-3); min-height: 56px; padding: var(--rn-spacing-3) var(--rn-spacing-4); margin-bottom: var(--rn-spacing-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--rn-radius-12); cursor: pointer; }
.Choice:has(.Choice__input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: var(--rn-typography-font-weight-600); }
.Choice__input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }

/* Checkbox */
.Check { display: flex; gap: var(--rn-spacing-3); align-items: flex-start; margin: var(--rn-spacing-2) 0 var(--rn-spacing-4); cursor: pointer; }
.Check__input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--brand); }
.Field--invalid .Check__input { outline: 2px solid var(--error); outline-offset: 1px; }

/* Upload */
.Upload { display: flex; flex-direction: column; align-items: center; gap: var(--rn-spacing-1); padding: var(--rn-spacing-6) var(--rn-spacing-4); border: 2px dashed var(--border); border-radius: var(--rn-radius-12); background: var(--surface); text-align: center; cursor: pointer; }
.Upload:hover { border-color: var(--brand); }
.Upload__icon { font-family: var(--rn-typography-font-family-icons); font-size: 32px; color: var(--brand); line-height: 1; }
.Upload__text { font-weight: var(--rn-typography-font-weight-600); color: var(--brand); }
.Upload__hint { font-size: var(--rn-typography-font-size-13); color: var(--text-muted); }
.Upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.Upload__input:focus-visible + .Upload__list, .Upload:focus-within { outline: 2px solid var(--focus); }
.Upload__list { list-style: none; margin: var(--rn-spacing-2) 0 0; padding: 0; }
.Upload__item { display: flex; justify-content: space-between; gap: var(--rn-spacing-2); padding: var(--rn-spacing-2) 0; border-bottom: 1px solid var(--rn-color-gray-150); font-size: var(--rn-typography-font-size-14); word-break: break-all; }
.Wizard:not(.is-enhanced) .Upload__input { position: static; width: auto; height: auto; opacity: 1; margin-top: var(--rn-spacing-2); }

/* Summary */
.Summary { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: var(--rn-spacing-2) var(--rn-spacing-4); margin: 0 0 var(--rn-spacing-4); padding: var(--rn-spacing-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--rn-radius-12); }
.Summary:empty { display: none; }
.Summary dt { color: var(--text-muted); }
.Summary dd { margin: 0; font-weight: var(--rn-typography-font-weight-600); overflow-wrap: anywhere; }
.Summary__edit { margin-left: var(--rn-spacing-2); font-weight: var(--rn-typography-font-weight-500); }

/* Signature */
.Signature { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rn-radius-8); }
.Field--invalid .Signature { border-color: var(--error); border-width: 2px; }
.Signature__pad { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.Signature__clear { position: absolute; top: var(--rn-spacing-1); right: var(--rn-spacing-1); }

/* Buttons and links */
.Button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--rn-spacing-3) var(--rn-spacing-6); border: 2px solid transparent; border-radius: var(--rn-radius-12); font: inherit; font-weight: var(--rn-typography-font-weight-600); text-decoration: none; cursor: pointer; }
.Button--primary { background: var(--brand); color: var(--surface); }
.Button--primary:disabled, .Button--primary.is-disabled { background: var(--rn-color-gray-300); cursor: not-allowed; }
.Button--secondary { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.Button--ghost { min-height: 36px; padding: var(--rn-spacing-1) var(--rn-spacing-3); background: transparent; color: var(--brand); font-size: var(--rn-typography-font-size-14); }
.Button--block { display: flex; width: 100%; margin-bottom: var(--rn-spacing-3); }
.Link { padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-weight: var(--rn-typography-font-weight-600); text-decoration: underline; cursor: pointer; }

/* Modal */
.Modal { width: min(640px, calc(100vw - 2 * var(--rn-spacing-4))); max-height: calc(100vh - 2 * var(--rn-spacing-8)); border: 0; border-radius: var(--rn-radius-16); padding: var(--rn-spacing-6); box-shadow: var(--rn-elevation-1000); }
.Modal::backdrop { background: rgb(0 6 10 / 50%); }
.Modal__title { color: var(--brand); font-size: var(--rn-typography-font-size-20); margin-bottom: var(--rn-spacing-4); }
.Modal__body { font-size: var(--rn-typography-font-size-14); line-height: var(--rn-typography-line-height-160); }
.Modal__body ul { padding-left: var(--rn-spacing-5); }
.Modal__body li { margin-bottom: var(--rn-spacing-2); }

/* Done page */
.Done { text-align: left; }
.Done__icon { font-family: var(--rn-typography-font-family-icons); font-size: 48px; color: var(--rn-color-green-500); line-height: 1; display: block; margin-bottom: var(--rn-spacing-2); }
.Done__id { font-size: var(--rn-typography-font-size-20); margin: 0 0 var(--rn-spacing-4); }

/* 07 Utilities ---------------------------------------------------------- */
.Honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }