/*
    This file contains the styles that apply globally, and aren't tied to any particular component.

    The design tokens themselves are in OxfordGreen.BuildFlow.Web.UI/Styles/tokens.less, because
    the Public tier uses the same ones.
*/
h1 {
  font-size: larger;
}
/* ── Master programme page ── */
.programme-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  overflow: hidden;
}
.programme-toggle__option {
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  color: var(--mid);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.programme-toggle__option--active {
  background: var(--mint);
  color: var(--on-mint);
  font-weight: 600;
}
.programme-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  background: var(--og-panel);
  color: var(--og-text);
  font-size: var(--text-sm);
}
button.programme-link,
.programme-link {
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--mint-dark);
  font-size: var(--text-sm);
  cursor: pointer;
}
button.programme-link:hover,
.programme-link:hover {
  text-decoration: underline;
}
.programme-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--blue);
  background: var(--blue-light);
  font-size: var(--text-sm);
}
.programme-error {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--red);
  background: var(--red-light);
  font-size: var(--text-sm);
}
/* ── Programme layout: chart beside the task panel ── */
.programme-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.programme-chart {
  flex: 1;
  min-width: 0;
}
/* ── Task panel ── */
.task-panel {
  flex: none;
  width: 340px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--og-panel);
  font-size: var(--text-sm);
}
.task-panel__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.task-panel__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}
.task-panel__sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--mid);
}
.task-panel .task-panel__close {
  margin-left: auto;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--mid);
  cursor: pointer;
}
.task-panel__section {
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.task-panel__section h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid);
}
.task-panel__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.task-panel__grid input {
  width: 150px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--micro-radius);
  background: var(--background-colour);
  color: var(--text-colour);
}
.task-panel__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--mid);
}
.task-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.task-panel .task-panel__btn {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  background: none;
  box-shadow: none;
  color: var(--text-colour);
  font-size: var(--text-xs);
  cursor: pointer;
}
.task-panel .task-panel__btn:hover:not(:disabled) {
  background: var(--background-highlight-colour);
}
.task-panel .task-panel__btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.task-panel .task-panel__btn--primary,
.task-panel .task-panel__btn--on {
  background: var(--primary-colour);
  border-color: var(--primary-colour);
  color: var(--on-mint);
  font-weight: 600;
}
.task-panel__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
}
.task-panel__facts dt {
  color: var(--mid);
}
.task-panel__facts dd {
  margin: 0;
}
.task-panel__late {
  color: var(--amber);
  font-weight: 600;
}
.task-panel__ontime {
  color: var(--green);
}
.task-panel__hold {
  padding: var(--space-3);
  margin-top: var(--space-3);
  border-left: 3px solid var(--purple);
  background: var(--purple-light);
  font-size: var(--text-xs);
}
.task-panel__passed {
  color: var(--green);
}
.task-panel__message {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--blue);
  background: var(--blue-light);
  font-size: var(--text-xs);
}
.task-panel__note,
.task-panel__empty {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--mid);
}
.task-panel__slot {
  margin-bottom: var(--space-3);
}
.task-panel__slot-type {
  margin-bottom: 2px;
  font-size: var(--text-xs);
  color: var(--mid);
}
.task-panel__slot select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--micro-radius);
  background: var(--background-colour);
  color: var(--text-colour);
  font-size: var(--text-xs);
}
.task-panel__qty {
  margin-left: var(--space-1);
}
.task-panel__clash {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--amber);
}
.task-panel__links {
  margin-bottom: var(--space-2);
}
.task-panel__links-label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-xs);
  color: var(--mid);
}
.task-panel .task-panel__link {
  display: block;
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--mint-dark);
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}
.task-panel .task-panel__link span {
  margin-left: var(--space-2);
  color: var(--mid);
}
/* ── Build tracker ── */
/* .build-stats / .build-stat* live in Common.Web.UI's detail-fold.less now — DetailFoldLayout uses them too. */
.build-empty {
  color: var(--mid);
  font-size: var(--text-sm);
}
.build-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.build-table th {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
  text-align: left;
}
.build-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.build-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.build-row:hover {
  background: var(--background-highlight-colour);
}
.build-row__lot {
  font-weight: 600;
  color: var(--mint-dark);
}
.build-progress {
  display: inline-block;
  width: 120px;
  height: 8px;
  border-radius: var(--micro-radius);
  background: var(--gantt-track);
  overflow: hidden;
  vertical-align: middle;
}
.build-progress__fill {
  height: 100%;
  background: var(--mint);
}
.build-progress__fill--behind {
  background: var(--amber);
}
.build-progress__fill--blocked {
  background: var(--red);
}
.build-row__pct {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--mid);
}
.build-row__late {
  color: var(--amber);
  font-weight: 600;
}
.build-row__early {
  color: var(--green);
}
.build-row__none {
  color: var(--muted);
}
.build-row__hold-date {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--mid);
}
/* ── Build detail ── */
/* .build-head* / .build-tabs / .build-tab* live in Common.Web.UI's detail-fold.less now. */
.build-attention {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--og-panel);
}
.build-attention h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}
.build-attention__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}
.build-attention .build-attention__name,
.build-table .build-attention__name {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--mint-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.build-attention__why {
  font-size: var(--text-xs);
  color: var(--mid);
}
.build-attention__when {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--mid);
  white-space: nowrap;
}
/* ── Subcontractors ── */
.subbie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
}
.subbie-card {
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--og-panel);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.subbie-card:hover {
  border-color: var(--primary-colour);
}
.subbie-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.subbie-card__head h2 {
  margin: 0;
  font-size: var(--text-base);
}
.subbie-status {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--pill-radius);
  background: var(--gray-100);
  font-size: var(--text-xs);
  color: var(--mid);
  white-space: nowrap;
}
.subbie-status--ok {
  background: var(--green-light);
  color: var(--green);
}
.subbie-status--pending {
  background: var(--amber-light);
  color: var(--amber);
}
.subbie-card__contact {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--mid);
}
.subbie-card__codes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.subbie-chip {
  padding: 1px 6px;
  border-radius: var(--micro-radius);
  background: var(--gray-100);
  font-size: var(--text-xs);
  color: var(--gray-700);
}
.subbie-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--mid);
}
.subbie-card__paper {
  color: var(--blue);
}
.subbie-card__warnings {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
  font-size: var(--text-xs);
  color: var(--amber);
}
/* ── House designs ── */
.design-card__blurb {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.design-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--mid);
}
.design-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
}
.design-facts dt {
  color: var(--mid);
}
.design-facts dd {
  margin: 0;
}
.design-missing {
  color: var(--amber);
}
.design-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--mid);
}
.design-group-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
}
.design-group-title:first-child {
  margin-top: 0;
}
/* ── Dashboard ── */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.dashboard-panel {
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--og-panel);
}
.dashboard-panel__head {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.dashboard-panel__head h2 {
  margin: 0;
  font-size: var(--text-base);
}
.dashboard-panel__head a {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--mint-dark);
}
/* A panel head that carries an action — the button goes to the far right of the heading. */
.dashboard-panel__head button {
  margin-left: auto;
}
.alert-card {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--rule);
  border-radius: var(--micro-radius);
  background: var(--gray-50);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.alert-card:hover {
  background: var(--background-highlight-colour);
}
.alert-card--red {
  border-left-color: var(--red);
  background: var(--red-light);
}
.alert-card--amber {
  border-left-color: var(--amber);
  background: var(--amber-light);
}
.alert-card--blue {
  border-left-color: var(--blue);
  background: var(--blue-light);
}
.alert-card__where {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--mid);
}
.alert-card__what {
  font-size: var(--text-sm);
}
.alert-card__cta {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--mint-dark);
}
/* ── Orders pipeline ── */
.pipeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: start;
  overflow-x: auto;
}
.pipeline__column {
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--gray-50);
  min-width: 160px;
}
.pipeline__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.pipeline__stage {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
}
.pipeline__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--mid);
}
.pipeline__empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}
.order-card {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--micro-radius);
  background: var(--og-panel);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.order-card:hover {
  border-color: var(--primary-colour);
}
.order-card__lot {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mint-dark);
}
.order-card__client {
  font-size: var(--text-xs);
  color: var(--mid);
}
.order-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}
.order-card__sale {
  color: var(--muted);
}
.order-card__sale--dev {
  color: var(--blue);
}
.order-card__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.order-flag {
  padding: 0 5px;
  border-radius: var(--micro-radius);
  background: var(--amber-light);
  font-size: 10px;
  color: var(--amber);
}
/* ── Setup index ── */
.setup-intro,
.setup-group__why {
  font-size: var(--text-sm);
  color: var(--mid);
}
.setup-group {
  margin-top: var(--space-5);
}
.setup-group h2 {
  margin: 0;
  font-size: var(--text-base);
}
.setup-group__why {
  margin: 2px 0 var(--space-3);
}
.setup-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
}
.setup-link {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--og-panel);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}
.setup-link:hover {
  border-color: var(--primary-colour);
}
.setup-link__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mint-dark);
}
.setup-link__note {
  display: block;
  font-size: var(--text-xs);
  color: var(--mid);
}
.og-primary {
  margin-left: auto;
}
/* ── Projects (estates) ── */
.project-developer {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--mid);
}
.lot-row__address,
.lot-row__area {
  font-size: var(--text-xs);
  color: var(--mid);
}
.lot-row__easement {
  font-size: var(--text-xs);
  color: var(--amber);
}
/* ── Order detail ── */
.order-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.order-head__name {
  font-size: var(--text-base);
  font-weight: 600;
}
.order-head__sub {
  font-size: var(--text-sm);
  color: var(--mid);
}
.order-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.order-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.order-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
}
.order-facts dt {
  color: var(--mid);
}
.order-facts dd {
  margin: 0;
}
.order-facts .order-facts__link {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--mint-dark);
  font-size: inherit;
  cursor: pointer;
}
/* ── Lot actions and buyers ── */
.lot-row__actions {
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
}
.client-row--inactive {
  opacity: 0.55;
}
.invite-form {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.invite-form h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid);
}
.invite-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.invite-form__row input {
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--micro-radius);
  background: var(--background-colour);
  color: var(--text-colour);
  font-size: var(--text-sm);
}
.subbie-status--bad {
  background: var(--red-light);
  color: var(--red);
}
/* The cascade switch, sitting in the filter strip beside the dropdowns. */
.programme-check {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--mid);
  cursor: pointer;
}
.gantt-legend__swatch--overloaded {
  background: var(--gantt-track);
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
/* Shared capacity: where the whole programme wants more of something than exists. */
.capacity {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.capacity__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.capacity__head h2 {
  margin: 0;
  font-size: var(--text-base);
}
.capacity__note {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--mid);
}
.capacity-lane {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}
.capacity-lane__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.capacity-lane__name {
  font-weight: 600;
}
.capacity-lane__limit {
  font-size: var(--text-xs);
  color: var(--mid);
}
.capacity-window {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--red);
}
.capacity-window__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.capacity-window__over {
  font-size: var(--text-xs);
  color: var(--red);
  font-weight: 600;
}
.capacity-window__tasks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
.capacity-window__tasks button.capacity-chip {
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--pill-radius);
  background: var(--background-colour);
  color: var(--text-colour);
  font-size: var(--text-xs);
  cursor: pointer;
}
.capacity-window__tasks button.capacity-chip:hover {
  border-color: var(--mint);
}
.capacity-window__tasks button.capacity-chip strong {
  margin-right: 4px;
  color: var(--mint-dark);
}
/* Weekly load under a capacity lane: one column per week, tallest is the lane's own worst week. */
.capacity-load {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  margin-top: var(--space-2);
}
.capacity-load__week {
  width: 6px;
  border-radius: 1px 1px 0 0;
  background: var(--mint);
}
.capacity-load__week--full {
  background: var(--amber);
}
.capacity-load__week--over {
  background: var(--red);
}
.capacity-lane__tight {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--amber);
}
/* Picking what somebody can do — used both on an existing member and on an invitation. */
.role-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.role-picker__role {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  cursor: pointer;
}
.role-picker__count {
  padding: 0 6px;
  border-radius: var(--pill-radius);
  background: var(--gray-100);
  font-size: var(--text-xs);
  color: var(--mid);
}
.invite-form__wide {
  flex: 1;
  min-width: 260px;
}
/* The site records under a build: register, diary, issues. */
.records h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
}
.records h2:first-child {
  margin-top: var(--space-3);
}
.diary-day {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.diary-day:hover {
  background: var(--background-highlight-colour);
}
.diary-day__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.diary-day__head h3 {
  margin: 0;
  font-size: var(--text-sm);
}
.diary-day__author,
.diary-day__weather {
  font-size: var(--text-xs);
  color: var(--mid);
}
.diary-day__work {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}
.diary-day__delay {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--amber);
}
.diary-day__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.diary-day__label {
  margin-right: var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid);
}
.diary-day__notes {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--mid);
}
.build-row--urgent td:first-child {
  box-shadow: inset 2px 0 0 var(--red);
}
.build-row--done {
  opacity: 0.65;
}
/* The status chip pushes itself right on a card head; in a sentence it should sit in the sentence. */
.diary-day__delay .subbie-status {
  margin-left: 0;
}
/* A step whose dates are fixed because it is finished. */
.task-panel__locked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--green);
  background: var(--green-light);
  font-size: var(--text-xs);
  color: var(--text-colour);
}
.task-panel__locked i {
  color: var(--green);
}
/* Where an order is up to, and the one step either side it can move to. */
.stage-track {
  margin-bottom: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stage-track__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.stage-track .stage-step {
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--pill-radius);
  background: var(--background-colour);
  box-shadow: none;
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: default;
}
/* A move that is on offer. Anything else keeps its reason in the tooltip rather than going quiet. */
.stage-track .stage-step--open {
  border-color: var(--mint);
  color: var(--mint-dark);
  cursor: pointer;
}
.stage-track .stage-step--open:hover {
  background: var(--background-highlight-colour);
}
.stage-track .stage-step--current {
  border-color: var(--mint);
  background: var(--mint);
  color: var(--on-mint);
  font-weight: var(--fw-semibold);
}
.stage-track__program {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.stage-track__note {
  font-size: var(--text-xs);
  color: var(--mid);
}
.stage-track__blocked {
  font-size: var(--text-xs);
  color: var(--amber);
}
/* ── Folder structure (Setup) ── */
.folder-rules {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.folder-rules li {
  margin-bottom: var(--space-2);
}
.folder-panel {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--og-panel);
}
.folder-panel__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.folder-panel__head h2 {
  margin: 0;
  font-size: var(--text-base);
}
.folder-panel__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mid);
}
.folder-panel__note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--mid);
}
.folder-tree {
  margin-bottom: var(--space-4);
}
.folder-row {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}
.folder-row__main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* The number is the folder's position, so it reads as a fact rather than a field. */
.folder-row__number {
  min-width: 58px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mid);
}
body .folder-row__name {
  max-width: 260px;
  flex: 1 1 180px;
}
body .folder-row__how {
  max-width: 210px;
}
body .folder-row__sources {
  font-size: var(--text-xs);
  white-space: nowrap;
}
.folder-row__actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}
body .folder-row__icon {
  width: 26px;
  padding: 0;
  line-height: 24px;
  font-size: var(--text-xs);
}
.folder-row__content,
.folder-row__repeat,
.folder-row__source-list {
  margin: var(--space-2) 0 0 58px;
  padding: var(--space-3);
  border-radius: var(--btn-radius);
  background: var(--gray-50);
}
.folder-row__content {
  font-size: var(--text-xs);
  color: var(--mid);
}
.folder-row__key {
  font-family: var(--font-mono);
  color: var(--gray-700);
}
.folder-row__repeat-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.folder-row__repeat-line + .folder-row__repeat-line {
  margin-top: var(--space-2);
}
.folder-row__label {
  font-size: var(--text-xs);
  color: var(--mid);
  flex-shrink: 0;
}
body .folder-row__pattern {
  max-width: 300px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.folder-row__arrow {
  color: var(--mid);
}
/* What the folder will actually be called, from live data. */
.folder-row__preview {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--mint-dark);
}
.folder-row__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--mid);
}
body .folder-row__token {
  padding: 2px 10px;
  border-radius: var(--pill-radius);
  font-size: var(--text-xs);
  font-weight: 400;
}
.folder-row__source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  font-size: var(--text-sm);
}
.folder-row__source-type {
  font-size: var(--text-xs);
  color: var(--mid);
}
/* A drawing category holds several files, listed on its card. */
.drawing-list {
  margin: var(--space-2) 0 var(--space-3);
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}
.drawing-list li {
  margin-bottom: 2px;
}
body .drawing-list .programme-link {
  padding: 0;
  font-size: var(--text-sm);
}