/* ==========================================================================
   Slot cards — AIM's card language (adopted 2026-09-24, design language §21)
   --------------------------------------------------------------------------
   Replaces coloured rails and heavy alert borders with a curved slot, the
   shape taken from the O in INSCOPE. Two forms:
     - corner : a wave in a card's top-right corner (standard / hero sizes)
     - mini   : a tab on the LEFT edge of a row (the wave mirrored)
   Colour means state, and nothing else:
     blue = information / active · green = done / compliant
     amber = needs attention     · red = a real hazard or block
   A neutral card or row gets NO slot: --slot-c stays unset and the slot
   paints transparent.

   Every selector starts with body[data-cards="slot"]. _Layout.cshtml sets
   that attribute unconditionally; it is kept (rather than dropped from the
   selectors) because it lifts these rules above the [b-xxxx] attribute on
   scoped .razor.css rules. Pages on the other layouts (_LayoutModular,
   _LayoutEmbedded, _DigitalTwinLayout, _AimStateLayout) do not get it yet.

   New surfaces: add the class to the corner or mini list below and set
   --slot-c by state. Do not add a new border-left rail (§21).
   ========================================================================== */

/* The two shapes live on :root (not only the body attribute) so a component's own
   scoped stylesheet can draw a slot with them directly — the rail sweep of
   2026-09-25 converts most rails in place, in the component's file, using the
   recipe at the foot of this file. */
:root,
body[data-cards="slot"] {
    --slot-mask-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 0H100V100C84 100 72 90 66 70C58 42 46 6 10 0Z'/%3E%3C/svg%3E");
    --slot-mask-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0H0V100C0 72 14 52 42 36C72 20 100 16 100 0Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Corner slot (standard + hero). Sits inside the card's padding box and
   rounds its own top-right corner, so the host needs no overflow change —
   that matters for cards that host dropdowns (the BCS editor).
   -------------------------------------------------------------------------- */
body[data-cards="slot"] .ep-card::after,
body[data-cards="slot"] .wf-milestone-item::after,
body[data-cards="slot"] .rpt-kpi-card::after,
body[data-cards="slot"] .mwb-meter::after,
body[data-cards="slot"] .sm-card[data-id="SITE_INTEL_ACCESS_CARD"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: var(--slot-w, 104px);
    height: var(--slot-h, 54px);
    pointer-events: none;
    border-top-right-radius: var(--radius-md);
    background: linear-gradient(200deg,
        var(--slot-c, transparent) 0%,
        color-mix(in srgb, var(--slot-c, transparent) 50%, var(--raised)) 100%);
    -webkit-mask: var(--slot-mask-corner) no-repeat 100% 0 / 100% 100%;
    mask: var(--slot-mask-corner) no-repeat 100% 0 / 100% 100%;
}

/* --------------------------------------------------------------------------
   Mini slot (left tab) for rows that have no stripe element of their own.
   -------------------------------------------------------------------------- */
body[data-cards="slot"] .sds-row-head::before,
body[data-cards="slot"] .mwb-attn-row::before,
body[data-cards="slot"] .safety-asbestos-alert::before,
body[data-cards="slot"] .safety-detail-callout::before,
body[data-cards="slot"] .safety-asbpos::before,
body[data-cards="slot"] .ppm-q::before,
body[data-cards="slot"] .ppm-asset::before,
body[data-cards="slot"] .wf-review-note::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14px;
    pointer-events: none;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    background: linear-gradient(200deg,
        var(--slot-c, transparent) 0%,
        color-mix(in srgb, var(--slot-c, transparent) 55%, var(--raised)) 100%);
    -webkit-mask: var(--slot-mask-left) no-repeat 0 0 / 100% 100%;
    mask: var(--slot-mask-left) no-repeat 0 0 / 100% 100%;
}

/* ==========================================================================
   1a. /Estates — estate cards (estate-portfolio.css)
   THE ONE IDENTITY EXCEPTION to "colour is state" (James, 2026-09-25). The
   slot is the estate's own brand: primary fading to secondary, both set on
   Estate Settings ▸ General. It used to follow the health chip, which painted
   nearly every card red (any overdue item = red), so the corner said the same
   thing on every card and told you nothing about which estate it was. The
   state still shows in the footer chip ("3,190 overdue").
   ========================================================================== */
body[data-cards="slot"] .ep-card::before { display: none; }
body[data-cards="slot"] .ep-card__head { padding-right: 72px; }
body[data-cards="slot"] .ep-card::after {
    background: linear-gradient(200deg, var(--ep-accent) 0%, var(--ep-accent-2) 100%);
}

/* ==========================================================================
   1b. My day work drawer (WorkDrawer.razor.css)
   The 3px stripe span becomes the mini tab: the column widens and the span
   takes the mirrored shape. Its colour classes are unchanged.
   ========================================================================== */
body[data-cards="slot"] .wd-row { grid-template-columns: 14px auto 1fr auto; }
body[data-cards="slot"] .wd-row:not(.wd-row--check) { grid-template-columns: 14px 1fr auto; }
body[data-cards="slot"] .wd-stripe {
    -webkit-mask: var(--slot-mask-left) no-repeat 0 0 / 100% 100%;
    mask: var(--slot-mask-left) no-repeat 0 0 / 100% 100%;
}

/* ==========================================================================
   2. Site Details workflow — stage card + deliverable rows
   ========================================================================== */
/* Stage card: a small slot for the stages that are saying something — in
   progress, at risk, blocked. Done and not-started stages stay neutral. */
body[data-cards="slot"] .wf-milestone-item {
    position: relative;
    --slot-w: 72px;
    --slot-h: 36px;
}
body[data-cards="slot"] .wf-milestone-item > .accordion-header { padding-right: 40px; }
body[data-cards="slot"] .wf-milestone-item:has(> .accordion-header .wf-status-pill--info)    { --slot-c: var(--action); }
body[data-cards="slot"] .wf-milestone-item:has(> .accordion-header .wf-status-pill--warning) { --slot-c: var(--warn); }
body[data-cards="slot"] .wf-milestone-item:has(> .accordion-header .wf-status-pill--danger)  { --slot-c: var(--bad); }
/* A Cancelled stage reads red at the card's corner (2026-10-06, Michael: "Cancelled should have the red
   flair", as On Hold has amber). The pill itself stays neutral - Cancelled is not a hazard on a step row,
   and recolouring the shared vocabulary would turn every cancelled step red too. */
body[data-cards="slot"] .wf-milestone-item:has(> .accordion-header .wf-status-pill--cancelled) { --slot-c: var(--bad); }

/* The reviewer's note on a returned / at-risk stage (2026-10-06): red = returned, amber = at risk. */
body[data-cards="slot"] .wf-review-note--bad  { --slot-c: var(--bad); }
body[data-cards="slot"] .wf-review-note--warn { --slot-c: var(--warn); }

/* Deliverables: mini tab, no rail. Outstanding = amber, delivered and
   awaiting acceptance = blue, accepted = green, rejected = red.
   2026-10-06: drawn on .sds-row-head (the summary), not the whole .sds-row.
   On the whole row the 14px tab stretched down the full height of the open
   form and read as exactly the thick amber rail it replaced. The component's
   own stylesheet now owns the head's position and the 22px left inset, and
   the colour keys on the row's state class rather than :has() on the chip. */
body[data-cards="slot"] .sds-row--outstanding { --slot-c: var(--warn); }
body[data-cards="slot"] .sds-row--delivered   { --slot-c: var(--action); }
body[data-cards="slot"] .sds-row--accepted    { --slot-c: var(--ok); }
body[data-cards="slot"] .sds-row--rejected    { --slot-c: var(--bad); }

/* ==========================================================================
   3. /my-work — list rows, calendar side list, brief
   ========================================================================== */
/* List rows: the stage-coloured mini tab is drawn on .mw-row::before in
   MyWorkPage.razor.css (2026-09-25). The .mw-bar rule that used to sit here
   targeted an element no markup renders, which is why the row's own thin inset
   rail was still what showed. */

/* Calendar side list entries (.mw-entry) carry the same mini slot as the rows, drawn in
   MyWorkPage.razor.css: the stage hue, red when overdue (2026-09-26, James). It lives there, not
   here, because --mw-stage is defined only in that file. */

/* Brief attention rows: rail off, mini tab coloured by severity. */
body[data-cards="slot"] .mwb-attn-row {
    position: relative;
    border-left: 1px solid var(--line);
    padding-left: 20px;
}
body[data-cards="slot"] .mwb-attn-row--info { --slot-c: var(--action); }
body[data-cards="slot"] .mwb-attn-row--warn { --slot-c: var(--warn); }
body[data-cards="slot"] .mwb-attn-row--bad  { --slot-c: var(--bad); }

/* Brief meter card: the left border becomes a standard corner slot. */
body[data-cards="slot"] .mwb-meter {
    position: relative;
    border-left: 1px solid var(--line);
    --slot-c: var(--ok);
}
body[data-cards="slot"] .mwb-meter--warn { --slot-c: var(--warn); }

/* ==========================================================================
   5. Report KPI cards (aim-reports.css .rpt-kpi-card) — every report strip,
   e.g. the Lease dashboard. The 3px status border-left becomes a small corner
   slot; --neutral cards get none.
   ========================================================================== */
body[data-cards="slot"] .rpt-kpi-card {
    position: relative;
    border-left-width: 1px;
    border-left-color: var(--line);
    --slot-w: 64px;
    --slot-h: 30px;
}
body[data-cards="slot"] .rpt-kpi-card--success { --slot-c: var(--ok); }
body[data-cards="slot"] .rpt-kpi-card--warning { --slot-c: var(--warn); }
body[data-cards="slot"] .rpt-kpi-card--danger  { --slot-c: var(--bad); }
body[data-cards="slot"] .rpt-kpi-card--info    { --slot-c: var(--action); }

/* ==========================================================================
   4. Site Details — BCS & Safety
   ========================================================================== */
/* The BCS card carries the one large slot, coloured by the overall verdict.
   It rises from the BOTTOM-right corner (the wave flipped vertically), not the
   top: the card's header band holds Edit flags / Scoring rules / Open at its
   right end, and a top slot sat over them and faded to white against the
   header tint (first browser look, 2026-09-24). The bottom-right of the body
   is the one corner of this card with nothing in it. */
body[data-cards="slot"] .sm-card[data-id="SITE_INTEL_ACCESS_CARD"] {
    position: relative;
    --slot-w: 120px;
    --slot-h: 48px;
}
/* The status column (.bci-evidence) is the right-hand column, so its last line
   ("Updated 2 months ago") sat under the slot (James, 2026-09-25). Keep the
   column's foot clear of it; the rail's own 0.75rem bottom padding covers the rest. */
body[data-cards="slot"] .sm-card[data-id="SITE_INTEL_ACCESS_CARD"] .bci-evidence {
    padding-bottom: calc(var(--slot-h) - 0.75rem);
}
body[data-cards="slot"] .sm-card[data-id="SITE_INTEL_ACCESS_CARD"]::after {
    top: auto;
    bottom: 0;
    transform: scaleY(-1);   /* the rounded top-right corner lands bottom-right */
}
body[data-cards="slot"] .sm-card[data-id="SITE_INTEL_ACCESS_CARD"]:has(.bci-rag--green) { --slot-c: var(--ok); }
body[data-cards="slot"] .sm-card[data-id="SITE_INTEL_ACCESS_CARD"]:has(.bci-rag--amber) { --slot-c: var(--warn); }
body[data-cards="slot"] .sm-card[data-id="SITE_INTEL_ACCESS_CARD"]:has(.bci-rag--red)   { --slot-c: var(--bad); }

/* Condition chips are no longer styled here: colour-by-severity moved into
   BcsIntelligencePanel.razor.css for everyone (2026-09-24). A blanket amber
   rule at this specificity would override it. */

/* Asbestos alert: red border, red fill and red text go. One red signal is
   left — the slot. */
body[data-cards="slot"] .safety-asbestos-alert {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem 0.5rem 22px;
    background: color-mix(in srgb, var(--bad) 5%, var(--raised));
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    --slot-c: var(--bad);
}

/* PPE / MEWP callouts: rail off, mini tab on. PPE is information (blue);
   the stronger callout is attention (amber), not a hazard. */
body[data-cards="slot"] .safety-detail-callout {
    position: relative;
    padding-left: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--raised);
}
body[data-cards="slot"] .safety-detail-callout--warning { --slot-c: var(--action); }
body[data-cards="slot"] .safety-detail-callout--danger  { --slot-c: var(--warn); }

/* Asbestos position block: amber tab; pending / unclassified stay neutral. */
body[data-cards="slot"] .safety-asbpos {
    position: relative;
    padding-left: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--raised);
    --slot-c: var(--warn);
}
body[data-cards="slot"] .safety-asbpos--pending,
body[data-cards="slot"] .safety-asbpos--unclassified { --slot-c: transparent; }

/* ==========================================================================
   PPM form (ADR-0132, ppm.css): a fault answer and an asset that needs a look
   get the mini tab. An unanswered question does NOT — 200 amber tabs on a
   fresh form is wallpaper; the rail's counts carry "still to answer".
   ========================================================================== */
body[data-cards="slot"] .ppm-q--fault          { --slot-c: var(--warn); }
body[data-cards="slot"] .ppm-asset--pending    { --slot-c: var(--warn); }
body[data-cards="slot"] .ppm-asset--changed    { --slot-c: var(--warn); }
body[data-cards="slot"] .ppm-asset--missing    { --slot-c: var(--bad); }

/* ==========================================================================
   RECIPE — converting a rail in a component's own stylesheet (2026-09-25 sweep)
   --------------------------------------------------------------------------
   Row / list item / callout  → mini slot on the LEFT:
       .x          { position: relative; padding-left: <old + ~12px>; }   rail removed
       .x::before  { content: ""; position: absolute; top: 0; bottom: 0; left: 0;
                     width: 14px; pointer-events: none;
                     border-top-left-radius: inherit; border-bottom-left-radius: inherit;
                     background: linear-gradient(200deg, var(--slot-c, transparent) 0%,
                         color-mix(in srgb, var(--slot-c, transparent) 55%, var(--raised)) 100%);
                     -webkit-mask: var(--slot-mask-left) no-repeat 0 0 / 100% 100%;
                             mask: var(--slot-mask-left) no-repeat 0 0 / 100% 100%; }
       .x--warn    { --slot-c: var(--warn); }          one line per state
   Standalone card / KPI tile → corner slot, top-right (::after, 64×30 small,
   104×54 standard), same gradient with --slot-mask-corner at 100% 0.
   Kept as rails on purpose: navigation "you are here" markers in nav chrome,
   and identity hues that are not a state (.mw-entry's stage colour).
   ========================================================================== */