/* ==========================================================================
   Port of Belize — HSE Incident Reporting
   Shared design system: tokens, base typography, layout primitives, components.
   Palette drawn from the Port of Belize mark: ink black, harbour navy (globe),
   copper (tagline), on warm paper.
   ========================================================================== */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-italic.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --ink: #0e1116;
  --ink-2: #1b2029;
  --ink-3: #2a313c;
  --harbour: #14304f;
  --harbour-2: #1d416a;
  --steel: #2e5e8c;
  --steel-soft: #dfe7f0;
  --copper: #b8642a;          /* UI accents, large text, focus */
  --copper-ink: #9a4f1c;      /* copper for body-size text (AA on paper) */
  --copper-soft: #f3e4d6;

  /* Neutrals */
  --paper: #f7f4ef;
  --paper-2: #efebe3;
  --surface: #fffdfa;
  --rule: #e3ded5;
  --rule-strong: #cfc8bb;
  --muted: #5d6470;            /* secondary text, 5.6:1 on paper */
  --faint: #8a909a;

  /* Semantic */
  --ok: #2f6b4f;
  --ok-soft: #e1eee6;
  --warn: #8a5a00;
  --warn-soft: #f6ead0;
  --danger: #a3302a;
  --danger-soft: #f6e0dd;

  /* Status chips */
  --st-new: var(--copper-ink);
  --st-new-bg: var(--copper-soft);
  --st-review: var(--harbour);
  --st-review-bg: var(--steel-soft);
  --st-action: var(--warn);
  --st-action-bg: var(--warn-soft);
  --st-closed: var(--ok);
  --st-closed-bg: var(--ok-soft);

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.75rem);
  --fs-3xl: clamp(2.6rem, 1.8rem + 4vw, 5rem);

  /* Space & shape */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --radius: 3px;
  --radius-sm: 2px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --maxw: 76rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.35s;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }
::selection { background: var(--copper); color: #fff; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* Bodoni Moda is a variable font with an optical-size axis. At large sizes the browser would
   pick the "display" cut, whose hairlines are very thin and hard to read on screens and phones.
   Pin the sturdier small-size cut everywhere the display face is used. */
.display, .who__avatar, .section-title, .kpi__value, .empty strong, .summary-strip dd,
.poster__title, .poster__location-name, .next-steps__n, .step__n, .thanks__ref-value {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11;
}
.section-title, .empty strong, .poster__title, .poster__location-name { font-weight: 600; }
.kpi__value, .summary-strip dd, .thanks__ref-value, .next-steps__n, .step__n { font-weight: 500; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Focus: always visible for keyboard users, copper ring with offset. */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -3rem;
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--copper);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* Links: underline draws in from the left on hover. */
a { color: var(--harbour); }
.link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease-out), color var(--dur);
  padding-bottom: 1px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.link--static { background-size: 100% 1px; }
.link--static:hover { color: var(--copper-ink); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur), border-color var(--dur), color var(--dur);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--primary:hover { --btn-bg: var(--harbour); --btn-border: var(--harbour); }
.btn--copper { --btn-bg: var(--copper); --btn-border: var(--copper); --btn-fg: #fff; }
.btn--copper:hover { --btn-bg: var(--copper-ink); --btn-border: var(--copper-ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--rule-strong); }
.btn--ghost:hover { --btn-border: var(--ink); }
.btn--danger { --btn-bg: transparent; --btn-fg: var(--danger); --btn-border: #e3b7b2; }
.btn--danger:hover { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: var(--danger); }
.btn--sm { min-height: 2.25rem; padding: 0.4rem 0.8rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); }
.field + .field { margin-top: var(--s-5); }
.label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.label .opt { font-weight: 400; color: var(--muted); }
.hint { font-size: var(--fs-sm); color: var(--muted); }
.input, .select, .textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem; /* 16px stops iOS zooming into inputs */
  transition: border-color var(--dur), box-shadow var(--dur);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--harbour);
  box-shadow: 0 0 0 3px rgba(46, 94, 140, 0.18);
}
.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230e1116' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.select[multiple] { background-image: none; padding-right: 0.85rem; min-height: 8rem; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.error-text { font-size: var(--fs-sm); color: var(--danger); font-weight: 500; }
.counter { justify-self: end; font-size: var(--fs-xs); color: var(--faint); }

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--harbour); }

/* Segmented yes/no control built on radio inputs. */
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  min-width: 5.5rem;
  padding: 0.7rem 1rem;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur), color var(--dur);
}
.segmented label:not(:first-of-type) { border-left: 1px solid var(--rule-strong); }
.segmented input:checked + label { background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + label { outline: 2px solid var(--copper); outline-offset: -4px; }

/* --------------------------------------------------------------------------
   Alerts / flash messages
   -------------------------------------------------------------------------- */
.alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-4);
  border-left: 3px solid var(--steel);
  background: var(--steel-soft);
  font-size: var(--fs-sm);
}
.alert--error { border-color: var(--danger); background: var(--danger-soft); }
.alert--success { border-color: var(--ok); background: var(--ok-soft); }
.alert--warn { border-color: var(--warn); background: var(--warn-soft); }
.alert ul { padding-left: 1.1rem; }
.alert svg { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   Chips & badges
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--new { color: var(--st-new); background: var(--st-new-bg); }
.chip--under_review { color: var(--st-review); background: var(--st-review-bg); }
.chip--action_taken { color: var(--st-action); background: var(--st-action-bg); }
.chip--closed { color: var(--st-closed); background: var(--st-closed-bg); }
.chip--plain { color: var(--muted); background: var(--paper-2); }
.chip--plain::before { display: none; }
.chip--injury { color: var(--danger); background: var(--danger-soft); }

.sev {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sev i { display: inline-grid; grid-auto-flow: column; gap: 2px; }
.sev i b { width: 4px; height: 10px; background: var(--rule-strong); }
.sev--low i b:nth-child(-n+1),
.sev--medium i b:nth-child(-n+2),
.sev--high i b:nth-child(-n+3),
.sev--critical i b:nth-child(-n+4) { background: currentColor; }
.sev--low { color: var(--ok); }
.sev--medium { color: var(--warn); }
.sev--high { color: var(--copper-ink); }
.sev--critical { color: var(--danger); }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.rule-top { border-top: 1px solid var(--rule); }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon--sm { width: 1rem; height: 1rem; }

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

/* --------------------------------------------------------------------------
   Motion hooks. motion-init.js adds .motion to <html> only when the visitor has
   not asked for reduced motion; motion.js then reveals these elements.
   If the animation library fails to load, .motion is removed and content shows.
   -------------------------------------------------------------------------- */
.motion [data-reveal] { visibility: hidden; }
.motion [data-reveal="lines"] { font-kerning: none; }
.split-line { display: block; }
/* Give masked lines room for descenders and Bodoni hairlines. */
.split-line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* Two-column field rows (stack on phones) */
.grid-2 { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2 > .field + .field { margin-top: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--s-2); }
.btn--ghost[aria-current] { border-color: var(--ink); background: var(--paper-2); }