/* ==========================================================================
   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::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 {
    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); }

/* Deliverables: rail off, mini tab on. Outstanding = amber, delivered and
   awaiting acceptance = blue, accepted = green, rejected = red. */
body[data-cards="slot"] .sds-row {
    position: relative;
    padding-left: 22px;
}
body[data-cards="slot"] .sds-row--outstanding {
    border-left: 1px solid var(--line);
    padding-left: 22px;
    --slot-c: var(--warn);
}
body[data-cards="slot"] .sds-row:has(.sds-chip--delivered) { --slot-c: var(--action); }
body[data-cards="slot"] .sds-row:has(.sds-chip--accepted)  { --slot-c: var(--ok); }
body[data-cards="slot"] .sds-row:has(.sds-chip--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) are deliberately NOT here: their rail is the
   stage's identity hue (--mw-stage), not a state, so §21 leaves it alone. (It was converted
   briefly on 2026-09-24 and removed the same day; it also made this file depend on a token
   defined only in MyWorkPage.razor.css.) */

/* 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).
   ========================================================================== */