/*
  BASE components. Every colour, font, size, spacing and motion value comes
  from theme.css; nothing is hard coded here. The only literal numbers are
  the breakpoints in @media lines (640px, 940px), because CSS does not allow
  custom properties there; they match --breakpoint-phone and
  --breakpoint-tablet.
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--ink);
  background: var(--paper);
}

a { color: var(--medium-blue); transition: color var(--motion-quick); }

:focus-visible {
  outline: var(--focus-ring) solid var(--medium-blue);
  outline-offset: var(--outline);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Header bar ---------- */
.site-header {
  background: var(--white);
  border-bottom: var(--rule-header) solid var(--navy);
}
.site-header-inner {
  max-width: var(--width-staff);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-header .brand { display: inline-flex; min-height: var(--touch-target); align-items: center; }
.site-header .brand img { height: var(--logo-header-height); width: auto; display: block; }
.site-header nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); }
.site-header nav a { color: var(--navy); font-weight: var(--weight-semibold); text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.who { text-align: right; line-height: var(--line-height-heading); }
.who-name { color: var(--navy); font-weight: var(--weight-semibold); }
.who-profiles { font-size: var(--size-small); font-weight: var(--weight-medium); color: var(--ink); }

main {
  max-width: var(--width-staff);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}
[data-surface="portal"] main { max-width: var(--width-portal); }

/* ---------- Headings ---------- */
.eyebrow {
  display: block;
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-letter-spacing);
  color: var(--medium-blue);
  margin: 0 0 var(--space-1);
}
h1 {
  font-size: var(--size-page-heading);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-5);
}
h2 {
  font-size: var(--size-section-heading);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--rule-section) solid var(--navy);
}
.card-title {
  font-size: var(--size-card-title);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  line-height: var(--line-height-heading);
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.card.narrow { max-width: var(--width-signin); margin: var(--space-7) auto; text-align: center; }

.muted { color: var(--ink); font-size: var(--size-small); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  text-decoration: none;
  cursor: pointer;
  background: var(--cyan);
  color: var(--navy);
  border: var(--outline) solid var(--cyan);
  box-shadow: var(--shadow-card);
  transition: background-color var(--motion-quick), border-color var(--motion-quick);
}
.button.secondary { background: var(--white); color: var(--navy); border-color: var(--navy); box-shadow: none; }
.button.return { background: var(--white); color: var(--state-returned); border-color: var(--state-returned); box-shadow: none; }
.button.small { min-height: var(--touch-target); padding: var(--space-2) var(--space-4); font-size: var(--size-small); }
.link {
  display: inline-flex; align-items: baseline;
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: var(--weight-semibold);
  color: var(--navy); cursor: pointer; text-decoration: none;
}
.link:hover { text-decoration: underline; }
.inline { display: inline; }
.heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.heading-row h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Notices: content block accent ---------- */
.notice {
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--bar-accent) solid var(--medium-blue);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  color: var(--navy);
}
.notice.error { border-left-color: var(--state-returned); }
.notice.success { border-left-color: var(--state-received); }
.state-returned-text { color: var(--state-returned); font-weight: var(--weight-semibold); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: var(--space-2); border-bottom: var(--hairline) solid var(--line); vertical-align: top; }
.table th { color: var(--navy); font-weight: var(--weight-semibold); }

/* ---------- Forms ---------- */
.form .field { margin-bottom: var(--space-4); }
.form label { display: block; font-weight: var(--weight-semibold); color: var(--navy); margin-bottom: var(--space-1); }
.form input[type=text], .form input[type=email], .form input[type=number], .form select, .form textarea,
.input {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--navy);
  background: var(--white);
  border: var(--hairline) solid var(--ink-soft);
  border-radius: var(--radius-input);
}
.field.classes div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.field.classes label { font-weight: var(--weight-regular); color: var(--ink); display: inline; }
.field-error { color: var(--state-returned); margin: var(--space-1) 0 0; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.facts dt { color: var(--ink); }
.facts dd { margin: 0; color: var(--navy); }
.plain { padding-left: var(--space-5); }

.log { list-style: none; padding: 0; font-size: var(--size-small); }
.log li { padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); }
.log .when { color: var(--ink); font-weight: var(--weight-medium); }

details summary {
  cursor: pointer; color: var(--medium-blue); font-weight: var(--weight-medium);
  min-height: var(--touch-target); display: flex; align-items: center;
}

/* ---------- Pills: state pills, label tags, status pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-heading);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--hairline) solid currentColor;
  background: var(--white);
  white-space: nowrap;
}
.pill svg { width: 1em; height: 1em; flex: none; }
/* State pills: filled in the state colour, white text, label and icon. */
.pill.state { color: var(--white); border-color: transparent; }
.pill.state-outstanding { background: var(--state-outstanding); }
.pill.state-submitted { background: var(--state-submitted); }
.pill.state-returned { background: var(--state-returned); }
.pill.state-received { background: var(--state-received); }
/* Label tags (staff only). Small coloured text stays on white. */
.pill.label-mandatory { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pill.label-conditional { color: var(--medium-blue); }
.pill.label-advisory { color: var(--navy); }
.pill.label-on_request { color: var(--ink); }
/* Inclusion pills (staff only). */
.pill.not-applicable { color: var(--ink); border-color: var(--ink-soft); }
.pill.available { color: var(--medium-blue); }

/* ---------- Checklist: summary bar, sections, item cards ---------- */
.summary-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.summary-bar .count { color: var(--navy); font-weight: var(--weight-semibold); }

.section { margin-bottom: var(--space-6); }
.section-title { display: flex; gap: var(--space-3); align-items: baseline; }
.section-title .number { color: var(--medium-blue); }

/* Item card: white card with a 5px left bar in the item's state colour. */
.item-card {
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--bar-accent) solid var(--state-outstanding);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}
.item-card.bar-outstanding { border-left-color: var(--state-outstanding); }
.item-card.bar-submitted { border-left-color: var(--state-submitted); }
.item-card.bar-returned { border-left-color: var(--state-returned); }
.item-card.bar-received { border-left-color: var(--state-received); }
/* Not applicable and available items carry a neutral bar: they have no state for the client. */
.item-card.bar-neutral { border-left-color: var(--line); box-shadow: none; }

.item-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; }
.item-head .number { font-weight: var(--weight-bold); color: var(--navy); min-width: 3em; }
.item-head .title { font-weight: var(--weight-semibold); color: var(--navy); flex: 1 1 calc(var(--space-8) * 4); font-size: var(--size-card-title); line-height: var(--line-height-heading); }
.item-head .pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.item-card p { margin: var(--space-2) 0; }
.item-card .requirement { color: var(--ink); }

/* Not applicable: title struck through in full strength Ink, never faded. */
.item-card.is-not-applicable .title { color: var(--ink); text-decoration: line-through; text-decoration-thickness: var(--hairline); }
.reason {
  border-left: var(--bar-accent) solid var(--navy);
  padding: var(--space-1) var(--space-3);
  margin: var(--space-2) 0;
  color: var(--navy);
}
.reason .label { font-weight: var(--weight-semibold); }

.advisory-note { color: var(--navy); font-size: var(--size-small); font-weight: var(--weight-medium); }

.item-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-3); }
.item-tools form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; flex: 1 1 calc(var(--space-8) * 5); }
.item-tools form .input { flex: 1 1 calc(var(--space-8) * 3.5); width: auto; }

.guidance dt { font-weight: var(--weight-semibold); color: var(--navy); margin-top: var(--space-2); }
.guidance dd { margin: 0; }

/* ---------- Sign-in page ---------- */
.signin-logo { width: var(--logo-signin-width); height: auto; display: block; margin: 0 auto var(--space-5); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .item-head .pills { margin-left: 0; }
}
@media (max-width: 640px) {
  .site-header .brand img { height: var(--logo-header-height-phone); }
  .facts { grid-template-columns: 1fr; }
  .facts dt { margin-top: var(--space-2); }
  .who { text-align: left; }
  .card, .item-card { padding: var(--space-4); }
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: var(--hairline); height: var(--hairline);
  margin: calc(var(--hairline) * -1); padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.input::placeholder, .form input::placeholder, .form textarea::placeholder { color: var(--ink); opacity: 1; }
.tool-panel { flex: 1 1 100%; }
.tool-panel form { margin-top: var(--space-2); }

/* ---------- Client portal ---------- */
.portal-header { gap: var(--space-4); }
.portal-project { flex: 1 1 calc(var(--space-8) * 3); display: flex; flex-direction: column; line-height: var(--line-height-heading); }
.portal-project-address { color: var(--navy); font-weight: var(--weight-semibold); }
.portal-project-number { color: var(--ink); font-size: var(--size-small); }

/* Stage tabs: gateway cards with a Navy bar, Medium Blue corner brackets and a progress bar. */
.stage-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.stage-tab, .gateway-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-1);
  flex: 1 1 calc(var(--space-8) * 2.5);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--bar-accent) solid var(--navy);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--navy);
  text-decoration: none;
  transition: border-color var(--motion-quick);
}
.stage-tab::before, .stage-tab::after, .gateway-card::before, .gateway-card::after {
  content: ""; position: absolute; width: var(--space-3); height: var(--space-3);
  border-color: var(--medium-blue); border-style: solid; border-width: 0;
}
.stage-tab::before, .gateway-card::before { top: var(--space-2); right: var(--space-2); border-top-width: var(--outline); border-right-width: var(--outline); }
.stage-tab::after, .gateway-card::after { bottom: var(--space-2); right: var(--space-2); border-bottom-width: var(--outline); border-right-width: var(--outline); }
.stage-tab.is-current { border-color: var(--navy); border-left-color: var(--navy); outline: var(--outline) solid var(--navy); }
.stage-tab-name { font-weight: var(--weight-bold); font-size: var(--size-card-title); }
.stage-tab-count { color: var(--ink); font-size: var(--size-small); }
.gateway-list { display: grid; gap: var(--space-3); }

.progress { display: block; height: var(--space-2); background: var(--mist); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--state-received); }

/* Legend: the four state pills with what each means for the client. */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--white); border: var(--hairline) solid var(--line); border-radius: var(--radius-card); }
.legend-entry { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-meaning { font-size: var(--size-small); color: var(--ink); }

.status-panel {
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--bar-accent) solid var(--navy);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.status-panel p { margin: 0 0 var(--space-2); }
.status-with_client { border-left-color: var(--state-outstanding); }
.status-awaiting_payment, .status-under_review { border-left-color: var(--state-submitted); }
.status-complete { border-left-color: var(--state-received); }
.payment { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; }
.payment dt { color: var(--ink); }
.payment dd { margin: 0; color: var(--navy); font-weight: var(--weight-semibold); }

.advise-panel { margin-bottom: var(--space-5); }
.advise-panel .button[disabled] { background: var(--white); color: var(--ink); border-color: var(--ink-soft); box-shadow: none; cursor: not-allowed; }
.advise-why { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--navy); }

.upload-box, .comment-box {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-3);
  border: var(--outline) dashed var(--ink-soft);
  border-radius: var(--radius-input);
  margin: var(--space-2) 0;
}
.upload-box label, .comment-box label { flex: 1 1 100%; font-weight: var(--weight-semibold); color: var(--navy); }
.upload-progress { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; font-size: var(--size-small); }
.upload-progress progress { flex: 1 1 100%; accent-color: var(--state-submitted); }
.comment-box { border-style: solid; border-width: var(--hairline); border-color: var(--line); }
.item-actions { margin-top: var(--space-3); }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.inline-form .input { width: auto; flex: 1 1 calc(var(--space-8) * 3); }
.unassigned-list { list-style: none; padding: 0; }
.unassigned-list li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); }
.file-name { font-weight: var(--weight-semibold); color: var(--navy); flex: 1 1 100%; }

.history-list { list-style: none; padding: 0; margin: var(--space-2) 0; font-size: var(--size-small); }
.history-list li { padding: var(--space-1) 0; border-bottom: var(--hairline) solid var(--line); }
.history-list .when { color: var(--ink); font-weight: var(--weight-medium); margin-right: var(--space-1); }
.history-list .is-superseded a { text-decoration: line-through; }
.history-list .comment-return { border-left: var(--bar-accent) solid var(--state-returned); padding-left: var(--space-2); color: var(--navy); }
.item-choice { border: 0; padding: 0; display: grid; gap: var(--space-1); }
.item-choice legend { font-weight: var(--weight-semibold); color: var(--navy); margin-bottom: var(--space-1); }
.item-choice label { font-weight: var(--weight-regular); color: var(--ink); }

/* ---------- Staff review ---------- */
.review-panel { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.review-panel .guidance-box { border-left: var(--bar-accent) solid var(--navy); padding: var(--space-2) var(--space-3); background: var(--white); }
.review-panel form { display: grid; gap: var(--space-2); }
.draft-note { border-left: var(--bar-accent) solid var(--medium-blue); padding: var(--space-2) var(--space-3); color: var(--navy); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-8) * 2.5), 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.stat-tile { background: var(--navy); color: var(--white); border-radius: var(--radius-card); padding: var(--space-4); text-decoration: none; }
.stat-tile .eyebrow { color: var(--cyan); }
.stat-tile .stat-number { display: block; font-size: var(--size-stat); font-weight: var(--weight-bold); line-height: var(--line-height-heading); }

/* ---------- Staff checklist: compact cards and folding sections ---------- */
.view-options { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; margin: 0 0 var(--space-5); font-size: var(--size-small); }
.view-options .link { font-weight: var(--weight-medium); color: var(--medium-blue); }
details.section > summary { list-style: none; cursor: pointer; min-height: 0; display: block; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary h2 { display: flex; align-items: baseline; gap: var(--space-3); }
details.section > summary h2::before { content: "\25BE"; color: var(--medium-blue); font-size: var(--size-small); transition: transform var(--motion-quick); }
details.section:not([open]) > summary h2::before { transform: rotate(-90deg); }
details.section:not([open]) { margin-bottom: var(--space-3); }
.section-count { margin-left: auto; font-size: var(--size-small); font-weight: var(--weight-medium); color: var(--ink); }
[data-surface="staff"] .item-card { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
[data-surface="staff"] .item-card p { margin: var(--space-1) 0; }
.item-foot { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); align-items: flex-start; margin-top: var(--space-1); }
.item-foot > form { margin-top: var(--space-1); }
.foot-panel > summary { min-height: 0; padding: var(--space-1) 0; font-size: var(--size-small); }
.foot-panel[open] { flex-basis: 100%; order: 1; }
.foot-panel form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.foot-panel form .input { flex: 1 1 calc(var(--space-8) * 4); width: auto; }

.section-tools { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); align-items: flex-start; margin: 0 0 var(--space-3); }

/* Invoices on the project page */
.invoice { border-top: var(--hairline) solid var(--line); padding-top: var(--space-4); margin-top: var(--space-4); }
.invoice:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.invoice h3 { margin: 0; }