/* ============================================================================
   Repair diagnosis — the two ways of choosing.

   Rewritten for the Customer portal rather than copied from Repairs. The Repairs
   version carries 100 hard-coded hex colours, which would have looked correct in
   the default theme and then stayed stubbornly navy under Kāinga Ora, Peabody, LQ
   and Clarion. Every colour here resolves through a --brand-* token instead, so
   all five brands and dark mode carry through the diagram, the icon grid and the
   list alike.

   Two modes: Pictures (the icon grid, which shows a drawing where one exists for
   that level) and List. Both share one selection contract -- anything selectable
   carries data-node-id and data-is-leaf -- which is what lets a tenant switch
   without losing their place, and keeps the script down to fetch-and-swap.
   ========================================================================== */

/* ---- mode toggle --------------------------------------------------------- */

.diag-mode-toggle {
    display: inline-flex;
    gap: .15rem;
    padding: .15rem;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
}

.diag-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--brand-text-muted);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.diag-mode-btn:hover { color: var(--brand-text); }
.diag-mode-btn.is-active {
    background: var(--brand-primary);
    color: var(--brand-text-inverse);
    font-weight: 600;
}

/* The label is dropped on very small screens; the icon still distinguishes them. */
@media (max-width: 420px) {
    .diag-mode-btn span { display: none; }
    .diag-mode-btn { padding: .35rem .6rem; }
}

/* ---- trail --------------------------------------------------------------- */

.diag-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-bottom: .9rem;
    font-size: 12.5px;
}

.diag-trail-step {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    background: var(--brand-surface);
    color: var(--brand-accent);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.diag-trail-step:hover { background: var(--brand-surface-alt); }
.diag-trail-sep { color: var(--brand-text-muted); }

/* ---- pane + loading ------------------------------------------------------ */

.diag-pane { min-height: 8rem; }
.diag-pane[aria-busy="true"] { opacity: .55; }

.diag-loading {
    margin: .5rem 0 0;
    color: var(--brand-text-muted);
    font-size: 13px;
}

.diag-diagram-empty {
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--brand-border);
    border-radius: var(--brand-radius);
    color: var(--brand-text-muted);
    text-align: center;
}

/* The generated schematic that used to live here has been removed. It drew one box
   per child in SVG — the same information as the icon grid, but with text that
   scaled with the viewBox and so rendered around twice the size of the grid's
   labels. The icon grid is now the fallback whenever a level has no drawing. */

/* ---- drawn illustrations ------------------------------------------------- */

/*
 * The drawings are a FLAT, NEUTRAL line drawing on every theme. That is
 * deliberate: they are a diagram to read, not a branded surface, and tinting the
 * pipework Kāinga Ora green or Peabody navy made them harder to parse, not more
 * on-brand. Colour is reserved for the one thing that is interactive — the
 * hotspot.
 *
 * Two rules earn their keep here:
 *   1. `.diag-illus` sets fill:none / stroke:grey as the DEFAULT for everything
 *      inside. Without it every unstyled shape falls back to SVG's own default of
 *      solid black, which is what turned the house into a silhouette.
 *   2. `.diag-hot` is a <g>, so anything set on it INHERITS onto every child.
 *      Fill and stroke therefore go on the hit rect inside it, never on the group.
 *
 * Greys come from --brand-text-muted / --brand-surface-alt rather than literals so
 * the drawing still inverts correctly in dark mode.
 */

.diag-illus {
    display: block;
    width: 100%;
    height: auto;

    /* The default for every shape in the drawing. */
    fill: none;
    stroke: var(--brand-text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Structure: the building itself sits back so the fittings read in front of it. */
.diag-illus .di-shell { fill: var(--brand-surface-alt); stroke: var(--brand-text-muted); stroke-width: 2; }
.diag-illus .di-roofline { stroke-width: 2.5; }
.diag-illus .di-floor { stroke-width: 1.5; opacity: .55; }
.diag-illus .di-floor--faint,
.diag-illus .di-floor-line { opacity: .35; stroke-width: 1; }

/* Solid parts — appliances, fixtures, tanks — get a light fill so they read as
   objects rather than wireframe. */
.diag-illus .di-appliance,
.diag-illus .di-fixture,
.diag-illus .di-panel,
.diag-illus .di-panel-large,
.diag-illus .di-tank,
.diag-illus .di-cylinder,
.diag-illus .di-rad,
.diag-illus .di-board,
.diag-illus .di-worktop,
.diag-illus .di-tile,
.diag-illus .di-seat,
.diag-illus .di-seat-inner,
.diag-illus .di-valve-body,
.diag-illus .di-trv-head,
.diag-illus .di-gauge,
.diag-illus .di-dial,
.diag-illus .di-exchanger,
.diag-illus .di-burner,
.diag-illus .di-syphon,
.diag-illus .di-pipe-box,
.diag-illus .di-float,
.diag-illus .di-washer,
.diag-illus .di-lockshield,
.diag-illus .di-bracket,
.diag-illus .di-fixing,
.diag-illus .di-joint,
.diag-illus .di-chip,
.diag-illus .di-sticker,
.diag-illus .di-tap,
.diag-illus .di-hose,
.diag-illus .di-reset,
.diag-illus .di-seal,
.diag-illus .di-grate { fill: var(--brand-surface); }

/* Pipes read slightly heavier than trim so the runs are followable. */
.diag-illus .di-pipe { stroke-width: 2.5; }
.diag-illus .di-pipe--main { stroke-width: 3; }
.diag-illus .di-pipe--cold,
.diag-illus .di-pipe--hot,
.diag-illus .di-pipe--gas,
.diag-illus .di-pipe--flow,
.diag-illus .di-pipe--return { stroke-width: 2.5; }

/* Fine detail sits back. */
.diag-illus .di-rad-fin,
.diag-illus .di-rad-fins,
.diag-illus .di-panel-groove,
.diag-illus .di-gauge-band,
.diag-illus .di-needle,
.diag-illus .di-trv-mark,
.diag-illus .di-tap-arc,
.diag-illus .di-valve,
.diag-illus .di-cold-ring,
.diag-illus .di-temp,
.diag-illus .di-snow,
.diag-illus .di-flame,
.diag-illus .di-bleed,
.diag-illus .di-reset-arrow,
.diag-illus .di-trace { stroke-width: 1.5; opacity: .8; }

.diag-illus .di-reset-arrow-head { fill: var(--brand-text-muted); stroke: none; }

/* Water, drips and blockages — the thing that is actually wrong — get a touch of
   fill so they are findable without becoming decorative. */
.diag-illus .di-water,
.diag-illus .di-drip,
.diag-illus .di-drip--2,
.diag-illus .di-spray,
.diag-illus .di-air,
.diag-illus .di-noise,
.diag-illus .di-backup { fill: var(--brand-text-muted); fill-opacity: .18; stroke-width: 1.5; }

.diag-illus .di-blockage,
.diag-illus .di-drain-dark { fill: var(--brand-text-muted); fill-opacity: .35; stroke: none; }

/* Labels are text, not strokes — stroking them is what made them look emboldened
   and smeared. */
.diag-illus .di-label {
    fill: var(--brand-text);
    stroke: none;
    font-family: var(--brand-font);
    font-size: 13px;
    font-weight: 600;
    paint-order: stroke;
}

/* ---- hotspots ------------------------------------------------------------ */

/* The group carries behaviour only. Nothing visual, or it inherits onto the
   drawing inside it. */
.diag-hot { cursor: pointer; }
.diag-hot:focus { outline: none; }

/* The invisible hit target IS the highlight. */
.diag-hot .di-hit {
    fill: var(--brand-accent);
    fill-opacity: 0;
    stroke: none;
    transition: fill-opacity .12s ease-in-out;
}
.diag-hot:hover .di-hit { fill-opacity: .12; }
.diag-hot:focus-visible .di-hit {
    fill-opacity: .16;
    stroke: var(--brand-accent);
    stroke-width: 2;
}

/* Unbound: no matching child in this tree. Must not look clickable — it is the
   visible signal that a drawing and the seeded tree have drifted apart. */
.diag-hot--unbound { cursor: default; pointer-events: none; }
.diag-hot--unbound .di-hit { fill-opacity: 0; }
.diag-hot--unbound .di-label { opacity: .45; }

.diag-illus-hint {
    margin: .6rem 0 0;
    color: var(--brand-text-muted);
    font-size: 12.5px;
}
.diag-illus-list-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-accent);
    font: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
}

.diag-illus-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

.diag-region-chip {
    padding: .35rem .7rem;
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    background: var(--brand-surface);
    color: var(--brand-text);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.diag-region-chip:hover { border-color: var(--brand-accent); background: var(--brand-surface-alt); }

/* ---- icon grid ----------------------------------------------------------- */

.diag-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .6rem;
}

.diag-icon-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    padding: .8rem;
    min-height: 6.5rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    background: var(--brand-surface);
    color: var(--brand-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.diag-icon-card:hover { border-color: var(--brand-accent); background: var(--brand-surface-alt); }
.diag-icon-card:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.diag-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem; height: 2.3rem;
    border-radius: var(--brand-radius);
    background: var(--tone-bg, var(--brand-surface-alt));
    color: var(--tone-fg, var(--brand-accent));
    font-size: 1.05rem;
}

/*
 * Category tints, matching the staff portal.
 *
 * These are the ONE place in this stylesheet with literal colours, and that is
 * deliberate: a category tint is information — it is what lets someone find
 * "Electrical" by colour rather than reading every tile — so it must stay the same
 * hue under every client brand, exactly like the flat grey of the drawings. Tinting
 * them with --brand-accent instead gave a wall of identical blue tiles, which is
 * what made this look bland.
 *
 * Each pair is a pale ground with a saturated glyph; the dark-mode block below
 * swaps to a translucent ground so the same hues stay legible without glowing.
 */
.diag-icon-badge--plumbing   { --tone-bg: #dbeafe; --tone-fg: #2563eb; }
.diag-icon-badge--heating    { --tone-bg: #fee2e2; --tone-fg: #dc2626; }
.diag-icon-badge--damp       { --tone-bg: #cffafe; --tone-fg: #0891b2; }
.diag-icon-badge--electrical { --tone-bg: #fef3c7; --tone-fg: #d97706; }
.diag-icon-badge--doors      { --tone-bg: #e0e7ff; --tone-fg: #4f46e5; }
.diag-icon-badge--exterior   { --tone-bg: #dcfce7; --tone-fg: #16a34a; }
.diag-icon-badge--pest       { --tone-bg: #ede9fe; --tone-fg: #7c3aed; }
.diag-icon-badge--grounds    { --tone-bg: #d1fae5; --tone-fg: #059669; }
.diag-icon-badge--communal   { --tone-bg: #e0e7ff; --tone-fg: #4338ca; }
.diag-icon-badge--bathroom   { --tone-bg: #dbeafe; --tone-fg: #0284c7; }
.diag-icon-badge--kitchen    { --tone-bg: #fef3c7; --tone-fg: #b45309; }
.diag-icon-badge--drainage   { --tone-bg: #e2e8f0; --tone-fg: #475569; }
.diag-icon-badge--structural { --tone-bg: #f3f4f6; --tone-fg: #374151; }
.diag-icon-badge--default    { --tone-bg: #f3f4f6; --tone-fg: #6b7280; }

/* Dark mode: keep the hue, lose the pale ground. A 15% wash of the glyph colour
   reads as the same category without shining out of a dark card. */
[data-mode="dark"] .diag-icon-badge { background: color-mix(in srgb, var(--tone-fg) 22%, transparent); }
[data-mode="dark"] .diag-icon-badge--plumbing   { --tone-fg: #60a5fa; }
[data-mode="dark"] .diag-icon-badge--heating    { --tone-fg: #f87171; }
[data-mode="dark"] .diag-icon-badge--damp       { --tone-fg: #22d3ee; }
[data-mode="dark"] .diag-icon-badge--electrical { --tone-fg: #fbbf24; }
[data-mode="dark"] .diag-icon-badge--doors      { --tone-fg: #818cf8; }
[data-mode="dark"] .diag-icon-badge--exterior   { --tone-fg: #4ade80; }
[data-mode="dark"] .diag-icon-badge--pest       { --tone-fg: #a78bfa; }
[data-mode="dark"] .diag-icon-badge--grounds    { --tone-fg: #34d399; }
[data-mode="dark"] .diag-icon-badge--communal   { --tone-fg: #818cf8; }
[data-mode="dark"] .diag-icon-badge--bathroom   { --tone-fg: #38bdf8; }
[data-mode="dark"] .diag-icon-badge--kitchen    { --tone-fg: #fbbf24; }
[data-mode="dark"] .diag-icon-badge--drainage   { --tone-fg: #94a3b8; }
[data-mode="dark"] .diag-icon-badge--structural { --tone-fg: #d1d5db; }
[data-mode="dark"] .diag-icon-badge--default    { --tone-fg: #9ca3af; }

/* A leaf keeps its category colour — overriding it to green said "this one is
   different" when the only difference is that it ends the journey. The Choose cue
   below the label carries that instead. */

.diag-icon-label { font-size: 13px; font-weight: 600; line-height: 1.3; }

.diag-icon-cue {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-success);
    font-weight: 700;
}
.diag-icon-chevron {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    font-size: 11px;
    color: var(--brand-text-muted);
}

/* ---- text list ----------------------------------------------------------- */

.diag-text-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    overflow: hidden;
}
.diag-text-list li + li { border-top: 1px solid var(--brand-border); }

.diag-text-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .75rem .9rem;
    border: 0;
    background: var(--brand-surface);
    color: var(--brand-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.diag-text-item:hover { background: var(--brand-surface-alt); }
.diag-text-item:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }

.diag-text-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.diag-text-name { font-size: 13.5px; font-weight: 600; }
.diag-text-desc { font-size: 12px; color: var(--brand-text-muted); }

.diag-text-cue {
    flex: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-success);
    font-weight: 700;
}
.diag-text-chevron { flex: none; font-size: 11px; color: var(--brand-text-muted); }

/* ---- chosen / summary / duplicates / photo / done ------------------------ */

.diag-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    background: var(--brand-surface-alt);
    border-radius: var(--brand-radius);
}
.diag-chosen-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-text-muted);
}
.diag-chosen-value { font-weight: 700; }

.diag-summary { margin: 0; }
.diag-summary-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--brand-border);
}
.diag-summary-row:last-child { border-bottom: 0; }
.diag-summary dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand-text-muted);
}
.diag-summary dd { margin: 0; font-size: 13.5px; }

.diag-dup-list { margin: .4rem 0 .2rem; padding-left: 1.1rem; font-size: 12.5px; }
.diag-dup-status, .diag-dup-when { color: var(--brand-text-muted); font-size: 12px; }

.diag-photo-intro { margin-top: 0; }
.diag-photo-preview { margin: .8rem 0 0; }
.diag-photo-preview img {
    display: block;
    max-width: 100%;
    max-height: 16rem;
    border-radius: var(--brand-radius);
    border: 1px solid var(--brand-border);
}

.diag-done { text-align: center; padding: 2rem 1rem; }
.diag-done-mark { font-size: 2.6rem; color: var(--brand-success); line-height: 1; }
.diag-done-title { margin: .6rem 0 .4rem; font-size: 1.25rem; }
.diag-done-actions { justify-content: center; }

@media (min-width: 640px) {
    .diag-summary-row { grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
}