/* ==========================================================================
   ACCOUNT DETAIL — the job page (design kit A)
   Self-contained page styles for js/account-detail.js, mounted into
   #account-detail-root. Loads after css/a-kit.css and reuses its tokens/
   components only — same reasoning as css/pages/account.css's header
   comment (no raw hex; danger/off-track semantics derive from --accent via
   color-mix() since the kit has no red).

   Desktop layout (>=1000px): the panel's body becomes content + a sticky
   side summary (status + booking facts) instead of one centered column —
   see .acd-body/.acd-main/.acd-side. Phone keeps the full-screen "page"
   takeover (platform.md: detail view of an entity = full page on touch).
   ========================================================================== */

#account-detail-root[hidden] { display: none !important; }

#account-detail-root {
    position: fixed;
    inset: 0;
    z-index: 45;
}

.acd-panel {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    background: var(--paper);
    overflow: hidden;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.acd-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    min-height: var(--hdr-h);
    padding: 0 12px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.acd-back-btn {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--d-ui) ease;
}

@media (hover: hover) and (pointer: fine) { .acd-back-btn:hover { background: var(--tint); } }
.acd-back-btn .acd-icon { width: 20px; height: 20px; }

/* Brand mark (message C, follow-up): this panel is a full-screen takeover
   with no site header behind it at any width, so this is the only
   confirmation of who sent the job link the customer is looking at. Small
   on phones by design — the back button and booking title are still the
   primary content of a tight 375px header. */
.acd-header-brand { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; min-height: 44px; padding: 4px 0 4px 8px; }
.acd-header-brand img { display: block; height: 20px; width: auto; }
@media (min-width: 1000px) { .acd-header-brand img { height: 24px; } }

.acd-header-titles { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.acd-header-eyebrow {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--t-16);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acd-header-jobno { color: var(--ink-3); font-size: var(--t-12); }

/* ─── Body / scaffolding ─────────────────────────────────────────────────── */
.acd-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    padding: 16px 12px 32px;
}

.acd-main, .acd-side { display: flex; flex-direction: column; min-width: 0; }
/* Mobile: status + facts (side) read first, same order as before this file
   split them into two columns for desktop — see the >=1000px override. */
.acd-side { order: -1; }

.acd-section { box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto 16px; }
.acd-main .acd-section:last-child, .acd-side .acd-section:last-child { margin-bottom: 0; }

.acd-section-title {
    margin: 0 4px 10px;
    color: var(--ink);
    font-size: var(--t-16);
    font-weight: 700;
}

/* Generic icon wrapper used across the panel */
.acd-icon { display: inline-flex; flex-shrink: 0; }
.acd-icon svg { display: block; width: 100%; height: 100%; }

@media (min-width: 1000px) {
    .acd-header { padding: 0 24px; }
    .acd-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
        gap: 32px;
        max-width: 1200px;
        margin-inline: auto;
        padding: 32px 20px 56px;
    }
    .acd-side { order: 0; position: sticky; top: 24px; }
    .acd-section { max-width: none; margin: 0 0 20px; }
}

/* ─── Stage stepper ──────────────────────────────────────────────────────── */
.acd-stepper {
    box-sizing: border-box;
    margin: 0;
    padding: 18px 18px 18px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
    list-style: none;
}

.acd-step {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 20px;
    padding-left: 2px;
}

.acd-step:last-child { padding-bottom: 0; }

/* Connector line between steps */
.acd-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 13px;
    width: 2px;
    height: calc(100% - 6px);
    background: var(--line-2);
}

.acd-step--complete:not(:last-child)::before { background: var(--brand); }

.acd-step-icon {
    display: grid;
    z-index: 1;
    flex-shrink: 0;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-3);
}

.acd-step-icon svg { width: 14px; height: 14px; }

.acd-step--complete .acd-step-icon { background: var(--brand); color: var(--on-night); }
.acd-step--current .acd-step-icon {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
}
.acd-step--upcoming .acd-step-icon { background: var(--card); border: 2px solid var(--line-2); color: var(--ink-3); }

.acd-step-text { display: flex; flex-direction: column; padding-top: 3px; }

.acd-step-label {
    color: var(--ink-2);
    font-size: var(--t-14);
    font-weight: 500;
}

.acd-step--complete .acd-step-label { color: var(--ink-2); font-weight: 600; }
.acd-step--current .acd-step-label { color: var(--ink); font-size: var(--t-16); font-weight: 800; }
.acd-step--upcoming .acd-step-label { color: var(--ink-3); font-weight: 500; }

.acd-step-next {
    margin-top: 3px;
    color: var(--ink-2);
    font-size: var(--t-13);
    line-height: 1.5;
}

/* ─── Off-track panel (cancelled / on_hold / parts_pending / rescheduled / unknown) ───
   Icon chip carries the semantic wash; the glyph itself stays ink so it never
   needs a hue the kit doesn't provide a text-safe shade for. */
.acd-offtrack {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.acd-offtrack-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--ink-2);
}

.acd-offtrack-icon svg { width: 18px; height: 18px; }

.acd-offtrack--danger .acd-offtrack-icon { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.acd-offtrack--warning .acd-offtrack-icon { background: color-mix(in srgb, var(--warning) 22%, var(--card)); }
.acd-offtrack--neutral .acd-offtrack-icon { background: var(--paper); }

.acd-offtrack-body { display: flex; flex-direction: column; padding-top: 4px; }
.acd-offtrack-label { margin: 0; color: var(--ink); font-size: var(--t-16); font-weight: 700; }
.acd-offtrack-next { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }

/* ─── Technician card ────────────────────────────────────────────────────── */
.acd-tech-card {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.acd-tech-avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--brand-deep);
}

.acd-tech-avatar svg { width: 22px; height: 22px; }

.acd-tech-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.acd-tech-name { color: var(--ink); font-size: var(--t-16); font-weight: 700; }

.acd-tech-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    color: var(--ink-2);
    font-size: var(--t-12);
    font-weight: 600;
}

.acd-tech-rating-icon { width: 12px; height: 12px; color: var(--warning); }

.acd-tech-call { flex-shrink: 0; }
.acd-tech-call .acd-icon { width: 16px; height: 16px; }

.acd-tech-pending {
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-xl);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--t-14);
    line-height: 1.5;
}

/* ─── Booking facts panel ────────────────────────────────────────────────── */
.acd-fact-list {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.acd-fact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.acd-fact-row:last-child { border-bottom: none; }

.acd-fact-icon { width: 17px; height: 17px; margin-top: 2px; color: var(--ink-3); }

.acd-fact-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.acd-fact-label { color: var(--ink-3); font-size: var(--t-12); }
.acd-fact-value {
    overflow-wrap: break-word;
    word-break: break-word;
    color: var(--ink);
    font-size: var(--t-14);
    font-weight: 600;
    line-height: 1.4;
}
.acd-fact-sub { color: var(--ink-2); font-size: var(--t-13); line-height: 1.4; }

/* ─── Founder line (owner rulings R70/R71) — the kit's own .fline/.door
   (css/a-kit.css) supply the look; this wrapper only matches the vertical
   rhythm of the other sections around it. ───────────────────────────────── */
.acd-fline-section .fline { margin-top: 0; }
.acd-fline-section .door .row { display: flex; }
.acd-fline-section .door .btn { flex: 1; }

/* ─── Complaint section ──────────────────────────────────────────────────── */
.acd-complaint-section { display: flex; flex-direction: column; }

.acd-complaint-open {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--tint);
    color: var(--brand-deep);
    font-size: var(--t-14);
    line-height: 1.5;
}

.acd-complaint-open-icon { width: 16px; height: 16px; }

.acd-complaint-fallback {
    margin: 8px 0 0;
    color: var(--accent-dark);
    font-size: var(--t-12);
    line-height: 1.5;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.acd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    font: 700 var(--t-14)/1 var(--sans);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--d-press) var(--ease-out), background-color var(--d-ui) ease, border-color var(--d-ui) ease, color var(--d-ui) ease;
}
.acd-btn:active { transform: scale(.97); }

.acd-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.acd-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .acd-btn-primary:hover { background: var(--accent-dark); }
    .acd-btn-outline:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--tint); }
}

.acd-btn-outline {
    border-color: var(--line-2);
    background: var(--card);
    color: var(--ink);
}

/* Ghost, dark-teal — a bordered (not filled) button with brand-deep as its
   own base color, not only on hover. Used where an action is meaningful
   enough to want some color beyond .acd-btn-outline's neutral ink/gray, but
   must not compete with the one filled orange the kit rule allows per
   viewport (e.g. "Send report" beside "Submit rating"). */
.acd-btn-brand {
    border-color: var(--brand);
    background: var(--card);
    color: var(--brand-deep);
}
@media (hover: hover) and (pointer: fine) { .acd-btn-brand:hover { background: var(--tint); border-color: var(--brand-deep); } }

/* Full-width only where the button is the sole item in its own section
   (raise-complaint) — NOT on .acd-btn-outline generally, since the compact
   technician-card "Call" button shares that class and must stay pill-sized.
   At >=1000px main is a wide grid column rather than a 640px-capped
   section, so a pill button stretched edge to edge there reads oddly —
   desktop gets a sized, left-aligned button instead of a full-width one. */
.acd-complaint-btn { width: 100%; }
/* .acd-complaint-section is a flex column, whose default align-items:stretch
   is what actually stretches this button full-width on mobile — width:auto
   alone would not undo that, hence align-self here. */
@media (min-width: 1000px) { .acd-complaint-btn { width: auto; align-self: flex-start; min-width: 280px; } }

/* ─── Skeleton loading ───────────────────────────────────────────────────── */
.acd-skeleton-wrap { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; max-width: 640px; margin: 0 auto; }

.acd-skeleton-block {
    height: 84px;
    border-radius: var(--radius-xl);
    background: linear-gradient(90deg, var(--line) 25%, var(--paper) 37%, var(--line) 63%);
    background-size: 400% 100%;
    animation: acd-shimmer 1.4s ease infinite;
}

.acd-skeleton-block--tall { height: 168px; }
.rm .acd-skeleton-block { animation-duration: 2.2s; }

@keyframes acd-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ─── Error state ────────────────────────────────────────────────────────── */
.acd-error-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    max-width: 320px;
    margin: 12vh auto 0;
    padding: 0 16px;
    text-align: center;
}

.acd-error-icon { width: 32px; height: 32px; color: var(--ink-3); }
.acd-error-text { margin: 0; color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }

/* ─── Rating (Phase A5, ADR 0137 — link view only) ───────────────────────── */
.acd-star-row { display: flex; gap: 6px; margin-bottom: 14px; }
.acd-star-row--static { margin-bottom: 8px; }

.acd-star-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--d-ui) ease;
}
@media (hover: hover) and (pointer: fine) { .acd-star-btn:hover { background: var(--paper); } }

/* Never animate the rating itself once chosen (design canon) — only the
   idle/hover chrome above transitions; is-filled swaps instantly. */
.acd-star-icon { width: 26px; height: 26px; color: var(--line-2); }
.acd-star-icon.is-filled { color: var(--warning); }
.acd-star-row--static .acd-star-icon { width: 20px; height: 20px; }

.acd-rating-readview,
.acd-rating-submitted,
.acd-rating-form {
    box-sizing: border-box;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.acd-rating-feedback { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }
.acd-rating-date { margin: 6px 0 0; color: var(--ink-3); font-size: var(--t-12); }
.acd-rating-edit-btn { margin-top: 12px; }
.acd-rating-thanks { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }

.acd-review-ask { margin-top: 8px; }
.acd-review-ask-title { margin: 0; color: var(--ink); font-size: var(--t-14); font-weight: 700; }
.acd-review-ask-sub { margin: 2px 0 12px; color: var(--ink-2); font-size: var(--t-12); }

.acd-action-row { display: flex; gap: 10px; margin-top: 4px; }
.acd-action-row .acd-btn { flex: 1; }

.acd-btn-block { width: 100%; }

/* ─── Amount block — never animate a figure the customer must trust ──────── */
.acd-amount-stats { display: flex; gap: 10px; margin-bottom: 12px; }

.acd-amount-stat {
    flex: 1;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.acd-amount-stat-label { display: block; color: var(--ink-3); font-size: var(--t-12); }
.acd-amount-stat-value {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-size: var(--t-18);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.acd-amount-prompt { margin: 0 0 10px; color: var(--ink); font-size: var(--t-14); font-weight: 600; line-height: 1.5; }

.acd-amount-message {
    box-sizing: border-box;
    margin: 0;
    padding: 13px 14px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--t-14);
    line-height: 1.5;
}

.acd-amount-dispute-form { margin-top: 4px; }
.acd-amount-dispute-form .mb-error { margin-top: 0; }

/* ─── Payment record ──────────────────────────────────────────────────────── */
.acd-payment-list {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.acd-payment-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.acd-payment-row:last-child { border-bottom: none; }

.acd-payment-amount { color: var(--ink); font-size: var(--t-14); font-weight: 700; font-variant-numeric: tabular-nums; }
.acd-payment-meta { flex-shrink: 0; color: var(--ink-3); font-size: var(--t-12); white-space: nowrap; }

.acd-payment-empty {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 13px 14px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-xl);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--t-14);
}

.acd-payment-note { margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }

/* ─── Trust strip (§7b) ───────────────────────────────────────────────────── */
.acd-tech-verified {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.acd-tech-verified-icon { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--brand-deep); }
.acd-tech-verified-text { display: flex; flex-direction: column; gap: 1px; }
.acd-tech-verified-label { color: var(--ink); font-size: var(--t-12); font-weight: 700; }
.acd-tech-verified-sub { color: var(--ink-3); font-size: var(--t-12); }

.acd-trust-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    padding: 13px 14px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.acd-trust-banner-icon { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; color: var(--ink-3); }
.acd-trust-banner-text { margin: 0; color: var(--ink-2); font-size: var(--t-12); line-height: 1.5; }

.acd-report-block { margin-bottom: 20px; }
.acd-report-sub { margin: -4px 0 12px 4px; color: var(--ink-2); font-size: var(--t-12); line-height: 1.5; }
.acd-report-thanks {
    box-sizing: border-box;
    margin: 0;
    padding: 13px 14px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--t-14);
}

.acd-why-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
}
.acd-why-row { display: flex; align-items: flex-start; gap: 10px; }
.acd-why-icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--brand); }
.acd-why-text { color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }
.acd-why-link { color: var(--brand-deep); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .acd-why-link:hover { text-decoration: underline; } }

.acd-book-again { margin-top: 20px; }