/* report_issue.css */

/* Colours this sheet alone uses, named so none of them is a bare hex.

   The two chip INKS that were here are gone. Both chips paint on a
   translucent tint of --warning / --danger, which composites onto the
   card and flips with it, while the literals did not: 2.59:1 and 2.25:1
   in dark. They take the -fg of the bucket each tint is made from. */
:root {
  --wizard-paywall-banner-ink       : #D85A30;
  --wizard-priority-chip-urgent-line: #D4A017;
}

/* ===================================================================
   Wizard header
   =================================================================== */
.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 12px;
}

.wizard-back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0;
  flex-shrink: 0;
}
.wizard-back-btn:hover { background: var(--mist); }
.wizard-back-btn .ti { font-size: 20px; }

.wizard-header-spacer {
  width: 32px;
  flex-shrink: 0;
}

.wizard-chat-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.wizard-chat-btn:hover { background: var(--mist); }

/* Progress dots */
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wizard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mist);
  transition: background 0.2s, width 0.2s;
}

.wizard-dot--done   { background: var(--teal); }
.wizard-dot--active {
  background: var(--teal);
  width: 18px;
  border-radius: 3px;
}

/* ===================================================================
   Title area
   =================================================================== */
.wizard-title-wrap {
  margin-bottom: 20px;
}

.wizard-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.2;
}

.wizard-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ===================================================================
   Shared list (property cards & issue items)
   =================================================================== */
.wizard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===================================================================
   Property cards
   =================================================================== */
.wizard-property-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: start;
  transition: box-shadow 0.15s;
}
.wizard-property-card:active { box-shadow: var(--shadow-card-lifted); }

.wizard-property-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.wizard-property-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wizard-property-line1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-property-city {
  font-size: 12px;
  color: var(--text-secondary);
}

.wizard-chevron {
  color: var(--text-secondary);
  font-size: 16px;
  flex-shrink: 0;
}

.wizard-property-card--locked {
  cursor: not-allowed;
  opacity: 0.55;
}
.wizard-property-card--locked:active { box-shadow: var(--shadow-card); }


.wizard-paywall-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: rgba(216, 90, 48, 0.08);
  color: var(--text-secondary);
  font-size: 12.5px;
}
.wizard-paywall-banner i { color: var(--wizard-paywall-banner-ink); font-size: 15px; flex-shrink: 0; }
.wizard-paywall-banner span { flex: 1; }
.wizard-paywall-banner a { color: var(--teal-deep); font-weight: 600; text-decoration: none; }

/* ===================================================================
   "From your action plan" banner

   The colour and the box are `.alert .alert-info` from
   common/_components.css — this only lays the two lines out and gives it
   the same bottom margin as the paywall banner above, so the two never
   sit at different distances from the first step.
   =================================================================== */
.wizard-remedy-banner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.wizard-remedy-line { margin: 0; }
.wizard-remedy-line i { margin-inline-end: 4px; }
/* Underlined, not just bolder. The banner sets its own text colour, so this
   link inherits it — leaving weight as the only thing separating a link from
   the sentence beside it, which is not something everyone can see. */
.wizard-remedy-banner a {
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
}

/* ===================================================================
   Category grid — 2 × N
   =================================================================== */
.wizard-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wizard-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: 18px 12px 16px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 88px;
}
.wizard-cat-card:active { background: color-mix(in srgb, var(--teal) 5%, transparent); }
.wizard-cat-card--selected {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 6%, transparent);
}

.wizard-cat-icon {
  font-size: 28px;
  color: var(--teal-deep);
}

.wizard-cat-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
}

/* Inspection card — subscription-benefit highlight */
.wizard-cat-card--inspection {
  border-color: color-mix(in srgb, var(--teal) 30%, transparent);
  background: color-mix(in srgb, var(--teal) 4%, transparent);
}
.wizard-cat-card--inspection .wizard-cat-icon { color: var(--teal); }

/* ===================================================================
   Issue list items
   =================================================================== */
.wizard-issue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 14px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: start;
  gap: 10px;
  transition: background 0.12s;
}
.wizard-issue-item:active { background: color-mix(in srgb, var(--teal) 6%, transparent); }

.wizard-issue-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

.wizard-issue-item--other .wizard-issue-name {
  color: var(--text-secondary);
  font-style: italic;
}

.wizard-issue-item .ti-chevron-right {
  color: var(--text-secondary);
  font-size: 16px;
  flex-shrink: 0;
}

/* ===================================================================
   Describe form
   =================================================================== */
.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}

/* Priority picker */
.wizard-priority-group {
  display: flex;
  gap: 8px;
}

.wizard-priority-option {
  flex: 1;
  cursor: pointer;
}
.wizard-priority-option input[type="radio"] { display: none; }

.wizard-priority-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 6px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--paper);
  color: var(--text-secondary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
  user-select: none;
}
.wizard-priority-chip .ti { font-size: 14px; }

/* The org's response-time promise, when it publishes one, on its own line
   under the label. flex-basis rather than restructuring the chip into a
   column: a chip with no promise then lays out exactly as it always did,
   and only the ones actually carrying one grow a second row. */
.wizard-priority-promise {
  flex-basis: 100%;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.85;
}

.wizard-priority-option input:checked + .wizard-priority-chip--normal {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border-color: var(--teal);
  color: var(--teal-deep);
}
.wizard-priority-option input:checked + .wizard-priority-chip--urgent {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-color: var(--wizard-priority-chip-urgent-line);
  color: var(--status-wait-fg);
}
.wizard-priority-option input:checked + .wizard-priority-chip--emergency {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger);
  color: var(--status-bad-fg);
}

/* Photo upload */
.wizard-photo-label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1.5px dashed var(--mist);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.wizard-photo-label:hover {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 5%, transparent);
}
.wizard-photo-label .ti { font-size: 20px; color: var(--teal); }
.wizard-photo-label--has-file { border-style: solid; border-color: var(--teal); }

.wizard-next-btn {
  width: 100%;
  margin-top: 4px;
}

/* ===================================================================
   Review step
   =================================================================== */
.wizard-review-card {
  margin-bottom: 12px;
}

.wizard-review-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wizard-review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mist);
}
.wizard-review-row:last-child { border-bottom: none; }
/* A class selector otherwise outranks the browser's own
   `[hidden] { display: none }`, so the row would keep its `display: flex`
   and stay on the page with the attribute set — the same note
   `common/_panels.css` and `common/_shell.css` carry. */
.wizard-review-row[hidden] { display: none; }

.wizard-review-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.wizard-review-label .ti { font-size: 12px; }

.wizard-review-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-align: end;
  word-break: break-word;
}

.wizard-rates-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--teal-deep);
  line-height: 1.4;
}
.wizard-rates-callout .ti { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.wizard-rates-callout a { color: var(--teal-deep); font-weight: 600; }
.wizard-rates-text { display: flex; flex-direction: column; gap: 2px; }
.wizard-rates-headline { font-size: 14px; font-weight: 700; }
.wizard-rates-detail:empty { display: none; }
.wizard-rates-callout a { align-self: flex-start; }

.wizard-submit-btn {
  width: 100%;
}

.wizard-submit-note {
  font-size: 11.5px;
  color: var(--text-secondary);
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ===================================================================
   Empty states
   =================================================================== */
.wizard-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 16px;
  gap: 6px;
}

.wizard-empty-icon {
  font-size: 44px;
  color: var(--mist);
  margin-bottom: 8px;
}

.wizard-empty-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}

.wizard-empty-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  max-width: 240px;
  line-height: 1.4;
}

/* Scanned-QR banner — shown when the tenant reached this form by scanning
   the sticker on a specific appliance, so the form can say "we already
   know which boiler" instead of asking them to describe it. */
.scanned-asset-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 4px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line, var(--paper-sand-line));
  border-inline-start: 3px solid var(--accent, var(--ember));
  border-radius: 8px;
  background: var(--paper);
}

.scanned-asset-banner__icon {
  font-size: 20px;
  color: var(--accent, var(--ember));
  flex-shrink: 0;
  margin-top: 1px;
}

.scanned-asset-banner__meta {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* One step of the report-an-issue wizard. Only one is visible at a time
   (the rest carry [hidden]); this is the panel the visible one fills. */
.wizard-step { display: block; }
.wizard-step[hidden] { display: none; }