/* =====================================================================
   WO-50: design tokens. The portal styles itself from these variables;
   the values below are the standalone fallback palette (used verbatim
   on templates without UIkit theming, e.g. Cassiopeia). On UIkit /
   YOOtheme templates, portal.js probes the template's compiled theme
   (uk-button-primary/secondary, uk-alert-warning/danger/success) and
   overrides the base tokens at runtime, so the portal adopts the site
   palette automatically. The AI accent is deliberately NOT adopted —
   UIkit has no AI colour. WO-67 recoloured it from violet to the brand
   steel: AI surfaces are marked by the sparkle icon and a hairline
   accent rule, never by being a different colour family.
   ===================================================================== */
:root {
    /* Brand core. The runtime probe (portal.js) may re-derive primary /
       action / warn from the active template; everything below is ours. */
    --extcap-primary:        #0f3a52;
    --extcap-primary-strong: #17516f;
    /* WO-67: the steel blue from the site's footer overlay,
       rgba(76,117,160,.9) — the bridge colour between portal and site. */
    --extcap-steel:          #4c75a0;
    --extcap-steel-deep:     #2f5170;

    /* WO-67 neutral ramp. Was Tailwind's default gray scale (#6b7280,
       #e5e7eb, #9ca3af…), which is THE tell of generated UI and reads
       cold-neutral against a blue site. These are the blue-tinted
       neutrals the print report was already hand-tuned to — promoted
       here so portal, report and PDF share one ramp. */
    --extcap-ink:            #1a2630;
    --extcap-ink-soft:       #2c3f4c;
    --extcap-muted:          #5b6b75;
    --extcap-muted-soft:     #93a7b3;
    --extcap-line:           #d6e4ec;
    --extcap-line-soft:      #e6edf2;
    --extcap-line-strong:    #c8d6df;
    --extcap-surface:        #f1f5f8;
    --extcap-surface-2:      #f8fafc;

    --extcap-action:         #2563eb;
    --extcap-action-deep:    #1e40af;
    --extcap-action-tint:    #eff6ff;
    --extcap-danger:         #dc2626;
    --extcap-danger-deep:    #991b1b;
    --extcap-danger-mid:     #fca5a5;
    --extcap-danger-soft:    #fecaca;
    --extcap-danger-tint:    #fee2e2;
    --extcap-warn:           #f59e0b;
    --extcap-warn-strong:    #b45309;
    --extcap-warn-deep:      #78350f;
    --extcap-warn-mid:       #fde68a;
    --extcap-warn-tint:      #fffbeb;
    --extcap-success:        #059669;
    --extcap-success-deep:   #065f46;
    --extcap-success-tint:   #ecfdf5;

    /* WO-67: the AI accent was violet (#7c3aed) — a colour that appears
       nowhere in the Extenti brand and read as the loudest "generated"
       cue in the product. Same token names (call sites unchanged), now
       the brand steel. AI panels are distinguished by the sparkle icon
       and a hairline rule, not by being purple. */
    --extcap-ai:             #4c75a0;
    --extcap-ai-deep:        #2f5170;
    --extcap-ai-tint:        #eef3f8;
    --extcap-ai-border:      #cddced;
}

/* WO-16: base look-and-feel defers to the site template (YOOtheme /
   UIkit). This file keeps only what UIkit does not provide: layout
   grids, semantic color chips, the next-action banner, and the survey
   bar. extcap-* classes remain as JS/markup hooks even where their
   rules are gone. Overrides of uk-* looks use two-class selectors so
   they win regardless of stylesheet order. */

/* WO-67: editorial rhythm. The site separates ideas with whitespace and
   leads each section with a confident title; the portal was uniformly
   dense, every block the same weight, which is what made it read as
   generated. Section headings get room and a hairline rule — the same
   device the print report already used, so screen and paper match. */
.extcap-main h3.mt-3 {
    margin-top: 2.25rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--extcap-line);
    letter-spacing: .005em;
}
.extcap-main h3.mt-3 + .extcap-meta { margin-top: .4rem; }

/* WO-68: control language taken from extentigroup.com. The site's CTAs
   are outline PILLS — thin border, no fill, dark label, icon on the
   left — not the solid rectangles a dashboard template ships with.
   Scoped to our container so nothing else on the site is touched, and
   expressed on the uk-button base so UIkit keeps owning sizing and
   spacing. Title case, not uppercase, exactly as the site renders. */
.extcap-portal .uk-button {
    border-radius: 999px;
    border: 1px solid var(--extcap-line-strong);
    background: #fff;
    color: var(--extcap-primary);
    text-transform: none;
    font-weight: 600;
}
.extcap-portal .uk-button:hover,
.extcap-portal .uk-button:focus {
    background: var(--extcap-surface);
    border-color: var(--extcap-primary);
    color: var(--extcap-primary);
}
.extcap-portal .uk-button.uk-button-primary,
.extcap-portal .uk-button.extcap-btn-primary {
    background: var(--extcap-primary);
    border-color: var(--extcap-primary);
    color: #fff;
}
.extcap-portal .uk-button.uk-button-primary:hover,
.extcap-portal .uk-button.extcap-btn-primary:hover {
    background: var(--extcap-primary-strong);
    border-color: var(--extcap-primary-strong);
    color: #fff;
}
.extcap-btn-danger { border-radius: 999px; }

/* Layout primitives */
.extcap-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.extcap-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .extcap-grid-2 { grid-template-columns: 1fr; } }
.extcap-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.text-end { text-align: right; }

/* List-card internals (card chrome itself is uk-card) */
.extcap-card-title { font-weight: 600; margin-bottom: .15rem; }
.extcap-card-sub, .extcap-od-sub { font-size: .85rem; color: var(--extcap-muted); }
.extcap-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .75rem 0 0; padding: 0; }
.extcap-card-stats > div { background: rgba(0,0,0,.04); padding: .35rem; border-radius: 4px; text-align: center; }
.extcap-card-stats dt { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.extcap-card-stats dd { margin: 0; font-weight: 600; font-size: .95rem; }

/* Semantic chips — priority (on uk-label) and condition score */
.uk-label.extcap-pri-critical { background: var(--extcap-danger-tint); color: var(--extcap-danger-deep); }
.uk-label.extcap-pri-high { background: var(--extcap-warn-mid); color: var(--extcap-warn-deep); }
.uk-label.extcap-pri-medium { background: var(--extcap-warn-mid); color: var(--extcap-warn-deep); }
.uk-label.extcap-pri-low { background: var(--extcap-success-tint); color: var(--extcap-success-deep); }
.extcap-score { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .8rem; font-weight: 600; }
.extcap-score-1 { background: var(--extcap-danger-tint); color: var(--extcap-danger-deep); }
.extcap-score-2 { background: var(--extcap-warn-mid); color: var(--extcap-warn-deep); }
.extcap-score-3 { background: var(--extcap-warn-tint); color: var(--extcap-warn-deep); }
.extcap-score-4 { background: var(--extcap-success-tint); color: var(--extcap-success-deep); }
.extcap-score-5 { background: var(--extcap-action-tint); color: var(--extcap-action-deep); }
.extcap-score-unset { background: var(--extcap-surface); color: var(--extcap-muted); }

/* Form layout (control look is uk-input / uk-select / uk-textarea) */
.extcap-form label { display: block; margin-bottom: .65rem; }
.extcap-form .extcap-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .65rem; }
.extcap-form .extcap-checkbox { display: flex; align-items: center; gap: .5rem; }
.extcap-form .extcap-checkbox input { width: auto; }

/* Assessment history + AI summary accent */
.extcap-history { list-style: none; padding: 0; margin: 0; }
.extcap-history li { padding: .65rem 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.extcap-history-head { display: flex; align-items: center; gap: .5rem; }
.extcap-history .extcap-meta { font-size: .8rem; }
.extcap-ai-summary { margin: .35rem 0; padding: .5rem; background: var(--extcap-action-tint); border: 1px solid var(--extcap-line); border-radius: 2px; font-size: .9rem; }
.extcap-meta { color: var(--extcap-muted); font-size: .9rem; }
.extcap-ajax-waiting { font-style: italic; }
.extcap-notes { margin: .25rem 0; font-size: .9rem; }
.extcap-action { margin: .25rem 0; font-size: .85rem; }
.extcap-details summary { cursor: pointer; padding: .35rem 0; font-weight: 600; }

/* Next-action banner — shared owner + technician. Branded accent kept. */
.extcap-next-action {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.15rem;
    margin: 0 0 1.25rem 0;
    border-radius: 2px;
    border: 1px solid var(--extcap-line-strong);
    background: var(--extcap-action-tint);
    color: var(--extcap-action-deep);
    text-decoration: none;
}
.extcap-next-action:hover { text-decoration: none; }
.extcap-next-action-body { flex: 1; min-width: 0; }
.extcap-next-action-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: .15rem; }
.extcap-next-action-label { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.extcap-next-action-detail { font-size: .85rem; opacity: .8; margin-top: .15rem; }
.extcap-next-action-arrow { font-size: 1.75rem; line-height: 1; opacity: .55; }
.extcap-next-action-attn { border-color: var(--extcap-warn-mid); background: var(--extcap-warn-tint); color: var(--extcap-warn-deep); }
.extcap-next-action-ok   { border-color: var(--extcap-success); background: var(--extcap-success-tint); color: var(--extcap-success-deep); }
.extcap-next-action-info { border-color: var(--extcap-line-strong); background: var(--extcap-action-tint); color: var(--extcap-action-deep); }

/* Surveyor-flagged maintenance row highlight */
.extcap-row-flag td { background: var(--extcap-warn-tint); }
.extcap-row-flag > td { background: var(--extcap-warn-tint); }

/* Survey mode bar — persistent owner-in-technician-chrome banner */
.extcap-survey-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--extcap-primary); color: #fff;
    padding: .55rem .9rem; font-size: .88rem;
    position: sticky; top: 0; z-index: 50;
}
.extcap-survey-bar form { margin: 0; }
.extcap-survey-bar button {
    background: #fff; color: var(--extcap-primary); border: 0; border-radius: 999px;
    padding: .35rem .9rem; font-weight: 700; cursor: pointer; font-size: .82rem;
}

/* TODO-LEGAL placeholder wording stays conspicuous until approved text lands
   (billing banners; report has its own print-scoped copy) */
.todo-legal-badge {
    display: inline-block; background: var(--extcap-danger); color: #fff;
    font-weight: 700; font-size: .72rem; letter-spacing: .06em;
    padding: .15rem .5rem; border-radius: 3px; margin-right: .35rem;
}

/* WO-60: delete controls. Quiet until hovered — destructive actions
   should be findable, not inviting. */
.extcap-btn-del {
    color: var(--extcap-danger) !important;
    border-color: var(--extcap-danger-tint) !important;
    background: transparent !important;
}
.extcap-btn-del:hover {
    background: var(--extcap-danger-tint) !important;
    border-color: var(--extcap-danger) !important;
}
.extcap-danger-zone {
    margin-top: 2rem; padding: 1rem 1.25rem;
    border: 1px solid var(--extcap-danger); border-radius: 2px;
    background: var(--extcap-danger-tint);
}
.extcap-danger-zone h3 { margin: 0 0 .5rem; color: var(--extcap-danger-deep); }
.extcap-btn-danger {
    background: var(--extcap-danger) !important; color: #fff !important;
    border: 0; border-radius: 6px; padding: .45rem 1rem; font-weight: 700; cursor: pointer;
}
.extcap-btn-danger:hover { background: var(--extcap-danger-deep) !important; }
.extcap-btn-danger[disabled] { opacity: .45; cursor: not-allowed; }

/* Billing banner on the owner dashboard (WO-27) */
.extcap-billing-banner { border-left-width: 4px; }

/* WO-47: building-list filter (renders only past the Multi allowance) */
.extcap-list-filter { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; }
.extcap-list-filter input {
    flex: 0 1 340px; min-height: 40px; padding: .45rem .7rem;
    border: 1px solid var(--extcap-line); border-radius: 8px; font: inherit; background: #fff;
}
.extcap-list-filter input:focus { outline: 2px solid var(--extcap-primary); outline-offset: 1px; }

/* WO-48: inline SVG icons (Bootstrap Icons) — align with surrounding text */
.extcap-ico { vertical-align: -0.125em; }

/* WO-54: native checkbox/radio metrics everywhere in the portal.
   Template "custom checkbox" styling (appearance:none + background
   images sized off theme variables) collapsed our checkboxes to
   slivers inside flex rows. Forcing native rendering at a fixed size
   is readable on every template and can't crunch. */
.extcap-portal input[type="checkbox"],
.extcap-portal input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto;
    margin: 0 .1rem 0 0;
    accent-color: var(--extcap-primary);
    background: none !important;
}

/* ---------------------------------------------------------------------
   WO-72: printing the deliverables.

   The three printable artifacts (building report, portfolio summary,
   scoping brief) each carried their own `body > *:not(.extcap-report)`
   print rule. That selector can never match: every portal layout renders
   inside <div class="extcap-portal">, which itself sits inside the site
   template's markup, so the artifact is never a direct child of <body>.
   The rule therefore hid every body child and kept nothing — Print /
   Save as PDF produced a blank page on all three.

   The fix has to be depth-independent, because we don't control how the
   site template nests component output. Keep the artifact, its
   descendants and its ancestor chain; hide everything else; flatten the
   ancestors so inherited layout (grids, sidebars, max-widths, cards)
   can't reposition or clip the page.
   --------------------------------------------------------------------- */
@media print {
    @page { margin: 0.6in; }

    /* Ancestors: kept, but collapsed to plain blocks that contribute
       nothing of their own. */
    body :has(.extcap-printable) {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        position: static !important;
        float: none !important;
        overflow: visible !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* Everything that is neither the artifact, inside it, nor an
       ancestor of it. */
    body *:not(:has(.extcap-printable)):not(.extcap-printable):not(.extcap-printable *) {
        display: none !important;
    }

    .extcap-printable {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* Screen-only controls anywhere in the artifact. */
    .no-print { display: none !important; }

    /* Print the ink, not the browser's colour-saving guesses. */
    .extcap-printable { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Fallback for browsers without :has(). Prints the artifact wherever it
   sits rather than hiding the chrome outright — less tidy, never blank. */
@supports not (selector(:has(*))) {
    @media print {
        body * { visibility: hidden !important; }
        .extcap-printable, .extcap-printable * { visibility: visible !important; }
        .extcap-printable { position: absolute !important; left: 0; top: 0; width: 100%; }
    }
}

/* WO-73: quiet destructive affordance — a muted icon link that only
   commits to danger colour on hover, so it reads as available without
   competing with the row's real actions. */
.extcap-portal .extcap-btn-quiet {
    color: var(--extcap-muted-soft);
    padding: .25rem .4rem;
    border: 0;
    background: none;
    line-height: 1;
    min-height: 0;
}
.extcap-portal .extcap-btn-quiet:hover,
.extcap-portal .extcap-btn-quiet:focus-visible {
    color: var(--extcap-danger);
    background: var(--extcap-danger-tint);
    border-radius: 4px;
}