/* ============================================================
   Screen layouts. Each block owns one screen and is written
   mobile-first: single column by default, richer grids added
   at wider breakpoints.
   ============================================================ */

/* ============================================================
   1 · Report data
   ============================================================ */
.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.report-grid .field-icon {
  display: none;
} /* decorative — hidden on phones */
/* The native <input type="date"> paints its own value in whatever locale and
   format the device is set to (Hebrew, US MM/DD, translated Safari, ...) and
   its internal shadow-DOM value can even force the box wider than its own
   width:100% (worst on iOS, invisible in desktop DevTools emulation because
   that still renders the control with the desktop engine). Rather than fight
   the native rendering per-platform, the native input is made fully
   transparent and .date-display draws a single consistent DD/MM/YYYY + icon
   on top; clicks pass through (pointer-events:none) to the real input below,
   which still opens the normal native date picker on tap/click. */
.date-wrap {
  position: relative;
}
.date-wrap .field-input {
  padding-right: 74px;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* The date control's shadow DOM carries its own padding and min-height, which
   a text input does not have — left alone it makes this field taller than the
   others in the grid. Its contents are invisible anyway (see above), so they
   are collapsed and the box is left to padding + line-height, exactly like
   every other field. */
.date-wrap .field-input::-webkit-datetime-edit,
.date-wrap .field-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
  line-height: inherit;
}
.date-wrap .field-input::-webkit-date-and-time-value {
  margin: 0;
  min-height: 0;
  line-height: inherit;
}
.date-wrap .field-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
@supports (-webkit-touch-callout: none) {
  .date-wrap .field-input {
    width: -webkit-fill-available;
    max-width: 100%;
    min-width: 0;
  }
  .date-wrap .field-input::-webkit-date-and-time-value {
    min-width: 0;
    width: 100%;
    text-align: left;
  }
}
.date-display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 74px 0 var(--space-3);
  pointer-events: none;
  font-size: 16px;
  color: var(--color-text);
}
.date-display__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-display__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  flex: none;
}
.period-badge {
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-brand);
  background: #eef1f6;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

@media (min-width: 768px) {
  .report-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-5);
  }
  .date-display {
    font-size: var(--fs-md);
  }
}
@media (min-width: 1024px) {
  .report-grid {
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
  }
  .report-grid .field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 240px;
    margin-top: var(--space-2);
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
  }
  .report-grid .field-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
  }
}

/* ============================================================
   2 · Select device
   ============================================================ */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  align-content: start;
}
.model-card {
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.model-card:hover {
  border-color: var(--color-muted);
}
.model-card.selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18) inset;
}
.model-card__photo {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.model-card__photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.model-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  margin-top: var(--space-2);
}
.model-card__badge {
  width: 100%;
  margin-top: var(--space-2);
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: #eef1f6;
  color: var(--color-brand);
  text-align: center;
}

@media (min-width: 768px) {
  .model-grid {
    grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
    gap: 15px;
  }
  .model-card {
    height: 260px;
    padding: 16px 0 0;
  }
  .model-card__photo {
    width: 120px;
    height: 120px;
  }
  .model-card__name {
    font-size: 16px;
    margin-top: 12px;
  }
  .model-card__badge {
    width: 162px;
    height: 26px;
    margin-top: 14px;
    font-size: var(--fs-md);
  }
}
@media (min-width: 1240px) {
  .model-grid {
    grid-template-columns: repeat(6, 182px);
    justify-content: center;
  }
  .model-card {
    width: 182px;
  }
}

/* ============================================================
   3 · Device identification
   ============================================================ */
.id-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
.id-render {
  width: 100%;
  max-width: 334px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fbfdff, #f4f7fb);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.id-render img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
.id-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.id-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.id-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.id-sub {
  font-size: var(--fs-md);
  color: var(--color-muted);
  margin-top: 2px;
}
.id-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0;
}
.id-specs {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: var(--space-1);
}
.id-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: var(--fs-md);
  border-bottom: 1px dashed var(--color-border-light);
}
.id-spec .k {
  color: var(--color-muted);
}
.id-spec .v {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  text-align: right;
}
.id-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Links to the manufacturer's own page and datasheet for this model.
   Tap targets are full height so they are usable with gloves on. */
.id-docs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-light);
}
.id-docs__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  width: 100%;
}
.id-docs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  background: #eef1f6;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.id-docs__link:hover {
  background: var(--color-brand);
  color: #fff;
}
/* external-link arrow, so it is clear the tap leaves the wizard */
.id-docs__link::after {
  content: "↗";
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* warranty card */
.id-warranty {
  width: 100%;
}
.warranty-card {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  width: 100%;
  max-width: 326px;
}
.warranty-card .wi {
  flex: none;
  display: flex;
}
.warranty-card .wseal {
  width: 44px;
  height: 44px;
}
.warranty-card .wt {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}
.warranty-card .wd {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  margin-top: 2px;
}
.warranty-card.valid {
  border-color: #bfe3c1;
  background: var(--color-success-soft);
}
.warranty-card.valid .wi,
.warranty-card.valid .wt {
  color: var(--color-success);
}
.warranty-card.expired {
  border-color: #f3c9c4;
  background: var(--color-accent-soft);
}
.warranty-card.expired .wi,
.warranty-card.expired .wt {
  color: var(--color-accent);
}
.warranty-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-muted);
  padding: 14px 0;
}

@media (min-width: 768px) {
  .id-specs {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-6);
  }
  .id-fields {
    grid-template-columns: 1fr 1fr;
  }
  .warranty-card {
    height: 91px;
  }
  .warranty-card .wseal {
    width: 53px;
    height: 53px;
  }
}
@media (min-width: 1024px) {
  .id-grid {
    grid-template-columns: 334px 1fr;
    gap: var(--space-6);
  }
  .id-render {
    width: 334px;
    height: 334px;
    margin: 0;
    padding: var(--space-5);
  }
  .id-info {
    min-height: 334px;
  }
  .id-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
  .id-warranty {
    width: 326px;
    flex: none;
    align-self: center;
  }
  .id-fields {
    margin-top: auto;
    padding-top: var(--space-4);
  }
}

/* ============================================================
   4 · Diagnostics plan
   ============================================================ */
.diag-plan {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.stage-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4);
}
.stage-card.n1 {
  border-color: var(--color-accent);
}
.stage-card.n2 {
  border-color: var(--color-brand);
}
.stage-card.n3 {
  border-color: var(--color-stage-3);
}
.stage-card__head {
  display: flex;
  align-items: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}
.stage-card__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  flex: none;
}
.stage-card__num.n1 {
  background: var(--color-accent);
}
.stage-card__num.n2 {
  background: var(--color-brand);
}
.stage-card__num.n3 {
  background: var(--color-stage-3);
}
.stage-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: var(--space-3);
}
.stage-card__checks {
  list-style: none;
}
.stage-card__checks li {
  position: relative;
  font-size: var(--fs-md);
  color: var(--color-text-2);
  padding: 6px 0 6px 16px;
}
.stage-card__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border);
}

@media (min-width: 900px) {
  .diag-plan {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .stage-card {
    padding: var(--space-5);
  }
  .stage-card__head {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .stage-card__title {
    margin-left: var(--space-4);
  }
}

/* ============================================================
   5 · Visual Inspection (also 6 · Electrical Troubleshooting and
   7 · Functionality Check — same photo + toggle-checklist layout,
   see screens/stage-checklist.js)
   ============================================================ */
.visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}
.visual__photo {
  /* phone: full width, matching the checklist card below it */
  width: 100%;
  max-width: none;
  height: 200px;
  margin: 0;
  flex: none;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.visual__photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.visual__card {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}
.check-list {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}
.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  border-bottom: 1px dashed var(--color-border-light);
}
.check-row__label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  color: var(--color-text);
}
.parts {
  flex: none;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* Acceptance values for the selected model, shown under the checklist on
   stages 6 and 7 so the technician is not looking up a datasheet on a
   phone while holding a multimeter. */
.stage-ref {
  flex: none;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.stage-ref__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.stage-ref__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 3px 0;
  font-size: var(--fs-sm);
}
.stage-ref__k {
  color: var(--color-muted);
}
.stage-ref__v {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  text-align: right;
}
.stage-ref__note {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-warning);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 6px 10px;
}
.parts__note {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.parts__row {
  display: grid;
  grid-template-columns: 1fr;
}
.parts__row .check-row {
  border-bottom: 1px dashed var(--color-border-light);
}

@media (min-width: 768px) {
  .visual {
    flex-direction: row;
    gap: var(--space-5);
  }
  /* The photo keeps a true square: its height is whatever the body offers and
     its width follows, so the checklist card simply takes the rest of the row. */
  .visual__photo {
    flex: none;
    width: auto;
    max-width: none;
    height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: var(--space-5);
  }
  .visual__card {
    padding: var(--space-5);
  }
  .check-list {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, 1fr);
    grid-auto-flow: column;
    column-gap: var(--space-6);
    align-content: stretch;
  }
  .check-row {
    min-height: 0;
  }
  .parts__row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .parts__row .check-row {
    border-bottom: none;
  }
}

/* ============================================================
   Evidence popup content
   ============================================================ */
.evidence-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  flex: none;
}
.photo-slot {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  transition: border-color var(--dur-fast) var(--ease);
}
.photo-slot:not(.filled):hover {
  border-color: var(--color-accent);
}
.photo-slot.filled {
  border-style: solid;
  cursor: default;
}
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-slot__add {
  font-size: 28px;
  color: var(--color-border);
}
.photo-slot__label {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}
.photo-slot__del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 16, 26, 0.6);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 1;
}
.photo-slot__del:hover {
  background: var(--color-accent);
}
.evidence-desc {
  flex: 1;
  min-height: 96px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  resize: none;
  outline: none;
  transition:
    border-color var(--dur-base),
    box-shadow var(--dur-base);
}
.evidence-desc:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
}
.evidence-desc.hint-blink {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

@media (min-width: 768px) {
  .evidence-photos {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .evidence-desc {
    font-size: var(--fs-md);
  }
}