/* ==========================================================================
   Page · D08 Service & spare parts
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */

.service-hero__inner {
  padding-block: clamp(40px, 6vw, 88px);
}

.service-hero__grid {
  align-items: center;
}

.live-status {
  display: flex;
  gap: 8px;
  align-items: center;
}

.live-status::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--sig-green);
}

.service-hero__title {
  margin: 0 0 24px;
  font: 800 clamp(64px, 10vw, 168px)/.84 var(--f-display);
  text-transform: uppercase;
}

/* serial number input + "Find parts" */
.serial-lookup {
  display: flex;
  flex-wrap: wrap;
  max-width: 620px;
}

.serial-lookup__field {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  border: 2px solid var(--ink);
  border-right: 0;
  background: var(--canvas);
}

.serial-lookup__label {
  font: 500 11px/1.4 var(--f-mono);
  color: var(--muted);
  letter-spacing: .06em;
}

.serial-lookup__input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 24px/1.3 var(--f-mono);
  outline: none;
}

.serial-lookup__submit {
  min-height: 72px;
  padding: 0 28px;
  border: 0;
  background: var(--action);
  color: var(--action-ink);
  font: 600 16px var(--f-text);
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}

.service-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
  font-size: 15px;
}

/* button that looks like a link */
.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.service-hero__link,
.service-hero__link:hover {
  color: var(--ink);
}

/* ---- Nameplate guide ---------------------------------------------------- */

/* fixed colors: the plate is a physical aluminium label in both themes */
.nameplate-caption {
  margin-bottom: 8px;
  font: 500 11px var(--f-mono);
  color: var(--ink-2);
  letter-spacing: .06em;
}

.nameplate {
  position: relative;
  padding: 22px;
  background: #C9CCC6;
  color: #0B0C0D;
  clip-path: var(--chamfer-m);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.nameplate__screw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8F948E;
}

.nameplate__screw--tl { top: 10px; left: 10px; }
.nameplate__screw--tr { top: 10px; right: 10px; }
.nameplate__screw--bl { bottom: 10px; left: 10px; }
.nameplate__screw--br { bottom: 10px; right: 10px; }

.nameplate__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #0B0C0D;
}

.nameplate__brand {
  font: 800 24px/1 var(--f-display);
  letter-spacing: .14em;
}

.nameplate__mark {
  font: 500 11px var(--f-mono);
}

.nameplate__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin: 0;
  font: 500 13px/1.3 var(--f-mono);
}

/* key sits inline on the value's line height, value on the next line */
.nameplate__data dt {
  display: inline;
  font-size: 10px;
  color: #373D42;
}

.nameplate__data dd {
  margin: 0;
}

.nameplate--guide .nameplate__serial {
  outline: 3px solid #0F4C9A;
  outline-offset: 4px;
  background: rgba(15, 76, 154, .12);
}

.nameplate__pointer {
  display: none;
  position: absolute;
  right: -4px;
  top: 58px;
  padding: 6px 8px;
  background: #0F4C9A;
  color: #fff;
  font: 500 11px var(--f-mono);
}

.nameplate--guide .nameplate__pointer {
  display: block;
}

.nameplate-note {
  margin-top: 8px;
  font: 400 12px var(--f-mono);
  color: var(--muted);
}

/* ---- ST 010 · Lookup result -------------------------------------------- */

.result-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 28px;
}

.result-head__title {
  margin-bottom: 8px;
}

.result-head__meta {
  font: 400 14px var(--f-mono);
  color: var(--ink-2);
}

.result-head__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.outline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target);
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font: 600 13px var(--f-text);
  text-transform: uppercase;
}

.outline-link:hover {
  color: var(--ink);
}

.part-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.part-card {
  padding: 6px;
  background: var(--surface);
  clip-path: var(--chamfer-m);
}

.part-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line-strong);
}

.part-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* position number from the exploded view */
.part-card__pos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font: 500 12px var(--f-mono);
}

.part-card__art {
  font: 500 11px var(--f-mono);
  color: var(--ink-2);
}

.part-card__name {
  font: 700 22px/1.05 var(--f-display);
  text-transform: uppercase;
}

.part-card__note {
  font: 400 12px var(--f-mono);
  color: var(--ink-2);
}

.part-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}

.part-card__add {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: var(--ink);
  color: var(--canvas);
  font: 600 12px var(--f-text);
  text-transform: uppercase;
  cursor: pointer;
}

.part-card__add:active {
  transform: scale(.96);
}

/* stock indicator: .signal-mark (shape + color) + text */
.stock {
  --mark-size: 9px;
  display: flex;
  gap: 6px;
  align-items: center;
  font: 500 12px var(--f-mono);
}

.result-note {
  margin: 16px 0 0;
  font: 400 12px var(--f-mono);
  color: var(--muted);
}

/* ---- ST 020 · Service request ------------------------------------------ */

.request__title {
  margin-bottom: 16px;
}

.request__intro {
  margin: 0 0 24px;
  color: var(--ink-2);
  max-width: 44ch;
}

.urgency-group {
  display: grid;
  gap: 8px;
}

.urgency {
  --urgency-color: var(--sig-red);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 16px;
  border: 2px solid var(--line-strong);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.urgency--degraded {
  --urgency-color: var(--sig-yellow);
}

.urgency--planned {
  --urgency-color: var(--sig-green);
}

.urgency[aria-checked="true"] {
  border-color: var(--urgency-color);
}

.urgency__title {
  display: block;
  font: 700 22px/1 var(--f-display);
  text-transform: uppercase;
}

.urgency__text {
  font-size: 14px;
  color: var(--ink-2);
}

.urgency__sla {
  font: 500 12px var(--f-mono);
  white-space: nowrap;
}

/* .stack-light--housed, one lit lamp per urgency level */
.urgency__lamps {
  --lamp-width: 18px;
  --lamp-height: 10px;
}

.request-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1.5px solid var(--ink);
}

/* the fields take part in the form's flex column directly */
.request-form__fields {
  display: contents;
}

.request-form__ticket {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.request-form__ticket-state {
  display: flex;
  gap: 8px;
  align-items: center;
  font: 600 13px var(--f-mono);
  color: var(--sig-green);
}

.request-form__ticket-no {
  font: 800 44px/1 var(--f-display);
  text-transform: uppercase;
}

.request-form__ticket-msg {
  font-size: 16px;
}

.request-form__ticket-line {
  font: 400 13px var(--f-mono);
  color: var(--ink-2);
}

.photo-upload {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1.5px dashed var(--ink-2);
  background: var(--surface);
  cursor: pointer;
}

.photo-upload__hint {
  font: 400 12px var(--f-mono);
  color: var(--muted);
}

/* visually hidden, the whole label opens the file dialog */
.photo-upload__input {
  position: absolute;
  width: 1px;
  opacity: 0;
}

.request-form__contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---- ST 030 · Contracts ------------------------------------------------- */

.contract-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.contract {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  background: var(--canvas);
}

.contract--featured {
  border-top: 4px solid var(--accent);
}

.contract__kicker {
  font: 500 11px var(--f-mono);
  color: var(--muted);
}

.contract__name {
  font: 800 32px/1 var(--f-display);
  text-transform: uppercase;
}

.contract__text {
  font-size: 15px;
  color: var(--ink-2);
}

.contract__link {
  margin-top: auto;
  font: 600 14px var(--f-text);
  text-transform: uppercase;
}

/* ---- ST 040 · Documentation center ------------------------------------- */

.doc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.doc-search {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target);
  padding: 0 12px;
  border: 1.5px solid var(--ink);
}

.doc-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 16px var(--f-text);
  outline: none;
}

.doc-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.doc-lang {
  min-height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--line-strong);
  background: var(--canvas);
  color: var(--ink);
  font: 500 13px var(--f-mono);
}

.doc-count {
  margin-bottom: 8px;
  font: 500 12px var(--f-mono);
  color: var(--muted);
}

.doc-list {
  border-top: 1.5px solid var(--ink);
}

.doc-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
}

.doc-row:hover {
  background: var(--surface);
  color: var(--ink);
}

.doc-row__title {
  display: block;
  font-weight: 600;
}

.doc-row__meta {
  font: 400 12px var(--f-mono);
  color: var(--muted);
}