:root {
  color-scheme: light;
  --brand-blue: #204485;
  --brand-blue-hover: #1a366a;
  --brand-blue-dark: #132950;
  --brand-green: #9ce85b;
  --green-tint: #b7ef86;
  --light-blue: #eaf7fe;
  --light-blue-strong: #89d0f5;
  --accent-lime-light: #b7ef86;
  --page-bg: #fcfdfe;
  --light-bg: #f7f8fb;
  --border: #e4e8f0;
  --control-border: #c9d2e2;
  --muted: #617292;
  --body-text: #49566d;
  --heading-text: #303949;
  --near-black: #0c0e12;
  --danger: #9e2929;
  --danger-bg: #fff2f0;
  --warning: #765000;
  --warning-bg: #fff4d6;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  color: var(--body-text);
  background: var(--page-bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
header { background: var(--brand-blue); border-bottom: 4px solid var(--brand-green); color: white; padding: 1.3rem max(1.5rem, calc((100vw - 76rem) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: 1.5rem; text-decoration: none; color: white; }
.brand-logo { display: block; width: 14rem; height: auto; }
.brand span { font-family: "Montserrat", "Segoe UI", sans-serif; font-size: 1.15rem; font-weight: 600; padding-left: 1.5rem; border-left: 1px solid #90a2c2; white-space: nowrap; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .85rem; }
nav a { color: white; text-decoration: none; font-weight: 500; }
nav a:hover { color: var(--accent-lime-light); }
main { max-width: 79rem; margin: auto; padding: 2.5rem 1.5rem 4rem; }
footer { max-width: 79rem; margin: auto; padding: 1.5rem 1.5rem 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .8rem; }
h1, h2, h3 { font-family: "Montserrat", "Segoe UI", sans-serif; color: var(--heading-text); font-weight: 600; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.025em; margin: .3rem 0 1rem; color: var(--brand-blue); }
h2 { font-size: 1.3rem; margin: 0 0 1rem; }
h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
p { line-height: 1.65; }
a { color: var(--brand-blue); overflow-wrap: anywhere; text-underline-offset: .2em; }
a:hover { color: var(--brand-blue-hover); }
.brand:hover { color: white; }
.intro { color: var(--body-text); font-size: 1rem; max-width: 56rem; margin-bottom: 2rem; }
.eyebrow { text-transform: uppercase; font-size: .73rem; font-weight: 600; letter-spacing: .12em; color: var(--brand-blue); }
.muted { color: var(--muted); font-size: .85rem; }
.panel { padding: 1.6rem; border: 1px solid var(--border); border-radius: .6rem; background: white; margin-bottom: 1.25rem; box-shadow: 0 4px 18px #13295005; }
.layout { display: grid; grid-template-columns: minmax(18rem, 26rem) 1fr; gap: 2rem; }
.record { background: white; border: 1px solid var(--border); border-radius: .5rem; padding: 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: inherit; margin-bottom: .8rem; }
.record:hover { border-color: var(--brand-blue); background: var(--light-bg); }
.record p { font-size: .8rem; color: var(--muted); margin: 0; }
.badge { background: var(--green-tint); color: var(--brand-blue); padding: .35rem .65rem; border-radius: .35rem; white-space: nowrap; font-size: .75rem; font-weight: 600; }
label { display: block; font-size: .87rem; font-weight: 600; line-height: 1.55; margin-bottom: .45rem; color: var(--heading-text); }
input, textarea, select { width: 100%; border: 1px solid var(--control-border); border-radius: .35rem; padding: .7rem; font: inherit; font-size: .9rem; color: var(--near-black); background: white; }
textarea { resize: vertical; }
input[type=checkbox] { width: auto; accent-color: var(--brand-blue); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand-blue); outline-offset: 2px; box-shadow: 0 0 0 5px var(--light-blue); }
button, .button-link { background: var(--brand-blue); color: white; border: 1px solid var(--brand-blue); border-radius: .35rem; padding: .75rem 1rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
button:hover, .button-link:hover { background: var(--brand-blue-hover); border-color: var(--brand-blue-hover); color: white; }
button:active, .button-link:active { background: var(--brand-blue-dark); }
button:focus-visible, a:focus-visible, summary:focus-visible, .register-scroll:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; box-shadow: 0 0 0 5px var(--accent-lime-light); }
header a:focus-visible, header button:focus-visible { outline-color: white; }
.secondary { background: var(--light-bg); color: var(--brand-blue); border-color: var(--control-border); }
.secondary:hover { background: var(--light-blue); color: var(--brand-blue-hover); border-color: var(--light-blue-strong); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.2rem; }
.metadata { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 0; }
.metadata dt { font-size: .75rem; color: var(--muted); margin-bottom: .5rem; }
.metadata dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--heading-text); overflow-wrap: anywhere; }
.entry { max-width: 36rem; margin: 3rem auto; }
.code-panel { border-color: var(--light-blue-strong); background: var(--light-blue); }
code { display: block; color: var(--brand-blue-dark); font-size: clamp(.8rem, 2vw, 1.3rem); font-weight: 700; letter-spacing: .05em; padding: 1rem; background: white; overflow-wrap: anywhere; border-radius: .3rem; }
.respond-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; }
.section-nav { align-self: start; position: sticky; top: 1rem; background: var(--light-bg); border-top: 3px solid var(--brand-green); }
.section-nav a { display: block; font-size: .82rem; line-height: 1.5; padding: .5rem 0; text-decoration: none; }
.section-nav a:hover { text-decoration: underline; }
.field { margin-top: 1.5rem; }
.check { display: flex; align-items: flex-start; gap: .65rem; }
.check input { margin-top: .4rem; }
.responses dt { font-weight: 600; font-size: .85rem; margin-top: 1.4rem; color: var(--heading-text); }
.responses dd { margin: .4rem 0; color: var(--body-text); white-space: normal; overflow-wrap: anywhere; }
.files { padding-left: 1.2rem; }
.files li { margin-bottom: .7rem; }
.notice { padding: 1rem; border-radius: .35rem; background: var(--green-tint); color: var(--brand-blue); border: 1px solid var(--brand-green); margin-bottom: 1rem; font-size: .9rem; }
.notice.error, .errorlist { color: var(--danger); background: var(--danger-bg); padding: 1rem; border-radius: .35rem; }
.errorlist { list-style: none; font-size: .85rem; }
.errorlist li+li { margin-top: .5rem; }
.field-documents { margin: 1rem 0 1.75rem; padding: 1rem 1.2rem; background: var(--light-bg); border-left: 3px solid var(--brand-green); border-radius: .35rem; }
.field-documents>p { margin-top: 0; font-size: .85rem; }
[id^="field-"] { scroll-margin-top: 1.5rem; }
.attachment-checklist li { margin: .65rem 0; font-size: .85rem; }
.checklist-uploaded { color: var(--brand-blue); font-weight: 600; }
.checklist-uploaded span { margin-left: .5rem; font-size: .75rem; }
.delete-link { color: var(--danger); }
.danger-button { background: var(--danger); border-color: var(--danger); }
.danger-button:hover { background: #7c2020; border-color: #7c2020; }
.register-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.register-toolbar form { max-width: 35rem; flex: 1; }
.register-toolbar .actions { margin-top: 0; flex-wrap: nowrap; }
.button-link { display: inline-block; text-decoration: none; }
.register-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: .5rem; background: white; }
.supplier-register { border-collapse: separate; border-spacing: 0; min-width: 2600px; width: 100%; font-size: .8rem; }
.supplier-register th, .supplier-register td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 120px; }
.supplier-register thead th { position: sticky; top: 0; z-index: 3; background: var(--brand-blue); color: white; font-weight: 600; }
.supplier-register tbody th { font-weight: 600; background: white; min-width: 250px; max-width: 340px; }
.supplier-register tr:nth-child(even) td, .supplier-register tr:nth-child(even) th { background: var(--light-bg); }
.supplier-register th:nth-child(2) { position: sticky; left: 0; z-index: 1; box-shadow: 3px 0 6px #13295012; }
.supplier-register thead th:nth-child(2) { z-index: 4; }
.cell-actions { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .72rem; margin: .6rem 0; }
.row-documents { font-weight: 400; font-size: .75rem; }
.row-documents summary { cursor: pointer; color: var(--brand-blue); }
.row-documents ul { padding-left: 1rem; max-width: 300px; }
.row-documents li { margin: .6rem 0; }
.row-documents small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.certificate-link { display: block; font-size: .72rem; margin-top: .6rem; overflow-wrap: anywhere; max-width: 180px; }
.register-status { display: inline-block; padding: .3rem .5rem; background: var(--light-blue); color: var(--brand-blue-dark); border-radius: .3rem; white-space: nowrap; }
.register-status.danger { background: var(--danger-bg); color: var(--danger); }
.register-status.warning { background: var(--warning-bg); color: var(--warning); }
.notes-cell { min-width: 240px!important; max-width: 400px; overflow-wrap: anywhere; }
.supplier-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width: 1000px) { header { align-items: flex-start; flex-direction: column; } }
@media(max-width: 850px) {
  .layout, .respond-layout { grid-template-columns: 1fr; }
  .section-nav { position: static; }
  .metadata, .supplier-edit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 480px) {
  main { padding: 1.5rem 1rem; }
  .panel { padding: 1.1rem; }
  .record { align-items: flex-start; flex-direction: column; }
  .metadata, .supplier-edit-grid { grid-template-columns: 1fr; }
  .brand { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .brand-logo { width: 12rem; }
  .brand span { border-left: 0; padding-left: 0; }
  .entry { margin: 1rem auto; }
  .register-toolbar { align-items: stretch; flex-direction: column; }
}