/* Colour deviations from the Rodin palette, made for WCAG AA contrast.
   Do not "correct" these back to the raw palette values.
   #608D3D on white is 3.9:1, which passes for large text only, so it is used
   for headings at 24px and above and nowhere else.
   #4C7130 replaces #608D3D wherever small text is involved (5.7:1).
   #5C5C5C replaces #808080 for text below 18.66px (6.7:1 against 3.9:1).
   #B9C2CE replaces #959FB1 on the dark band (6.0:1 against 4.0:1).
   #808080 is reserved for borders and dividers only. */

@font-face {
  /* Roboto ships as a variable font, so one file covers the whole weight range and there is
     no separate 500 file to fetch. An earlier draft of this plan declared two faces pointing
     at two downloads, which produced two byte-identical files under misleading names.
     Corrected 31 July 2026 after the duplicate was caught by checksum. */
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/merriweather.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --green: #608D3D;
  --green-text: #4C7130;
  --navy: #2F3F53;
  --body: #1D2637;
  --muted: #5C5C5C;
  --rule: #808080;
  --band-muted: #B9C2CE;
  --panel: #F4F6F3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: #FFFFFF;
}

.band {
  background: var(--navy);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Logo judged against the #2F3F53 band: the wordmark is set in a dark navy
   that sits too close to the band colour to read, leaving only the small
   green icon mark visible. Placed on a white chip instead, per the brief's
   fallback option, so the full logo stays legible. box-sizing is reset to
   content-box here so the 8px padding does not eat into the 34px logo height. */
.logo {
  height: 34px;
  width: auto;
  display: block;
  box-sizing: content-box;
  background: #FFFFFF;
  padding: 8px;
  border-radius: 6px;
}
.tagline { margin: 0; color: var(--band-muted); font-size: 13px; }

main { max-width: 680px; margin: 0 auto; padding: 28px 24px 48px; }

h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 26px;
  line-height: 1.3;
  color: var(--green);
  margin: 0 0 8px;
}

.intro { margin: 0 0 24px; max-width: 56ch; }

.result {
  background: var(--panel);
  border-left: 4px solid var(--green);
  padding: 16px 18px;
  margin: 0 0 20px;
}

.result-label { margin: 0 0 6px; font-size: 13px; color: var(--muted); }

.result-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.result-value {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 28px;
  overflow-wrap: anywhere;
}

#copy-button {
  background: var(--green-text);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
#copy-button:hover { background: #3F5E27; }
#copy-button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.copy-status { margin: 8px 0 0; font-size: 13px; color: var(--muted); min-height: 1.3em; }

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: #D8D8D8;
  border: 1px solid #D8D8D8;
  margin: 0 0 20px;
}
.detail { background: #FFFFFF; padding: 12px 14px; }
.details dt { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.details dd { margin: 0; font-size: 15px; }
.qualifier { font-size: 12px; color: var(--muted); }

.local {
  border: 1px solid #D8D8D8;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 20px;
}
#local-address { margin: 0; font-size: 14px; color: var(--muted); }

.notice {
  background: #FDF7DF;
  border-left: 4px solid #EECE1A;
  padding: 12px 14px;
  margin: 0 0 20px;
  font-size: 15px;
}

footer { border-top: 1px solid var(--rule); padding-top: 16px; }
.privacy { margin: 0 0 8px; font-size: 13px; color: var(--muted); max-width: 60ch; }
footer a { color: var(--green-text); font-size: 13px; }