/* ============================================================================
   Native Capabilities test page (/dev/native-capabilities) — mw-nc-*
   "Hardware lab console": annotated capability cards for the MitWare.Mobile
   bridge diagnostics. Theme-aware — every tone derives from the MudBlazor
   palette variables via color-mix, with one fixed accent hue per capability.
   Fonts (Geist + JetBrains Mono) are loaded globally by artist-buro-fonts.css.
   ========================================================================== */

.mw-nc-page {
    --nc-ink: var(--mud-palette-text-primary);
    --nc-ink-dim: var(--mud-palette-text-secondary);
    --nc-surface: var(--mud-palette-surface);
    --nc-line: var(--mud-palette-lines-default);

    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: 34px 26px 90px;
    font-family: 'Geist', 'Roboto', sans-serif;
    color: var(--nc-ink);
}

/* NOTE: Blueprint grid backdrop that fades out below the hero. Lives on a
   ::before layer so the fade mask can't clip the cards themselves. */
.mw-nc-page::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--nc-ink) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--nc-ink) 5%, transparent) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(to bottom, black 0, black 160px, transparent 520px);
    mask-image: linear-gradient(to bottom, black 0, black 160px, transparent 520px);
}

/* ---------------------------------------------------------------- tooltips */

.mw-nc-page [data-tip] {
    position: relative;
}

.mw-nc-page [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 300px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--nc-ink) 18%, transparent);
    background: var(--nc-surface);
    color: var(--nc-ink);
    font-family: 'Geist', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 40;
}

.mw-nc-page [data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background: var(--nc-surface);
    border-right: 1px solid color-mix(in srgb, var(--nc-ink) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--nc-ink) 18%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 41;
}

.mw-nc-page [data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mw-nc-page [data-tip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Terms inside prose: dashed underline + help cursor. */
.mw-nc-term {
    border-bottom: 1px dashed color-mix(in srgb, var(--nc-accent, var(--nc-ink)) 65%, transparent);
    cursor: help;
    font-weight: 500;
}

/* --------------------------------------------------------------------- hero */

.mw-nc-hero {
    position: relative;
    margin-bottom: 40px;
    animation: mw-nc-rise 0.55s ease backwards;
}

.mw-nc-hero-overline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--nc-ink) 55%, transparent);
    margin-bottom: 10px;
}

.mw-nc-hero-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.mw-nc-hero-title {
    font-family: 'Geist', sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
}

.mw-nc-hero-lede {
    max-width: 74ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--nc-ink-dim);
    margin: 0 0 22px;
}

/* Shell-state pill next to the title. */
.mw-nc-shellpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--nc-line);
    color: var(--nc-ink-dim);
    background: color-mix(in srgb, var(--nc-ink) 4%, transparent);
}

.mw-nc-shellpill--on {
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
}

.mw-nc-shellpill--off {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    color: var(--mud-palette-warning);
}

/* Bridge pipeline strip: page → ts module → prelude → service → platform. */
.mw-nc-pipe {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.mw-nc-pipe-node {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--nc-line);
    background: var(--nc-surface);
    color: var(--nc-ink-dim);
    cursor: help;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.mw-nc-pipe-node:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    color: var(--nc-ink);
    transform: translateY(-1px);
}

.mw-nc-pipe-arrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--nc-ink) 35%, transparent);
    user-select: none;
}

.mw-nc-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ------------------------------------------------------------ shared atoms */

/* Inline code chip. */
.mw-nc-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    padding: 1.5px 6px;
    border-radius: 6px;
    border: 1px solid var(--nc-line);
    background: color-mix(in srgb, var(--nc-ink) 6%, transparent);
    color: var(--nc-ink);
    white-space: nowrap;
}

/* Highlighted key phrase inside prose (accent-tinted mark). */
.mw-nc-hl {
    background: color-mix(in srgb, var(--nc-accent, var(--mud-palette-primary)) 16%, transparent);
    color: var(--nc-ink);
    padding: 1px 5px;
    border-radius: 5px;
    font-weight: 500;
}

/* External doc link pill. */
.mw-nc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--nc-line);
    color: var(--nc-ink-dim);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mw-nc-link::after {
    content: '↗';
    font-size: 0.75rem;
    opacity: 0.7;
}

.mw-nc-link:hover {
    border-color: color-mix(in srgb, var(--nc-accent, var(--mud-palette-primary)) 60%, transparent);
    background: color-mix(in srgb, var(--nc-accent, var(--mud-palette-primary)) 9%, transparent);
    color: var(--nc-ink);
    text-decoration: none;
}

/* ------------------------------------------------------------------- cards */

.mw-nc-card {
    --nc-accent: hsl(215 65% 56%);

    position: relative;
    border: 1px solid color-mix(in srgb, var(--nc-accent) 22%, var(--nc-line));
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--nc-accent) 5%, transparent), transparent 150px),
        var(--nc-surface);
    padding: 26px 30px 24px;
    margin-bottom: 28px;
    animation: mw-nc-rise 0.55s ease backwards;
}

.mw-nc-card:nth-of-type(1) { animation-delay: 0.05s; }
.mw-nc-card:nth-of-type(2) { animation-delay: 0.1s; }
.mw-nc-card:nth-of-type(3) { animation-delay: 0.15s; }
.mw-nc-card:nth-of-type(4) { animation-delay: 0.2s; }
.mw-nc-card:nth-of-type(5) { animation-delay: 0.25s; }
.mw-nc-card:nth-of-type(6) { animation-delay: 0.3s; }

/* Accent rail on the left edge. */
.mw-nc-card::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 22px;
    bottom: 22px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(
        180deg,
        var(--nc-accent),
        color-mix(in srgb, var(--nc-accent) 25%, transparent)
    );
}

/* Per-capability accent hues. */
.mw-nc-card--env      { --nc-accent: hsl(215 65% 56%); }
.mw-nc-card--nfc      { --nc-accent: hsl(190 75% 42%); }
.mw-nc-card--location { --nc-accent: hsl(150 55% 42%); }
.mw-nc-card--notify   { --nc-accent: hsl(36 90% 48%); }
.mw-nc-card--device   { --nc-accent: hsl(262 60% 60%); }
.mw-nc-card--identity { --nc-accent: hsl(350 65% 55%); }

/* Card header: icon tile | kicker + title | platform badges. */
.mw-nc-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.mw-nc-card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--nc-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--nc-accent) 30%, transparent);
    color: var(--nc-accent);
}

.mw-nc-card-icon .mud-icon-root {
    width: 26px;
    height: 26px;
    font-size: 26px;
}

.mw-nc-card-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nc-accent);
    margin-bottom: 3px;
}

.mw-nc-card-title {
    font-family: 'Geist', sans-serif;
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
}

/* Platform support badges. */
.mw-nc-plats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-self: end;
}

.mw-nc-plat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--nc-line);
    color: var(--nc-ink-dim);
    cursor: help;
}

.mw-nc-plat::before {
    font-size: 0.72rem;
    line-height: 1;
}

.mw-nc-plat--yes {
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    color: var(--mud-palette-success);
}

.mw-nc-plat--yes::before { content: '✓'; }

.mw-nc-plat--untested {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    color: var(--mud-palette-warning);
}

.mw-nc-plat--untested::before { content: '?'; }

.mw-nc-plat--no {
    opacity: 0.65;
}

.mw-nc-plat--no::before { content: '✗'; }

/* ------------------------------------------------------------ card content */

.mw-nc-explain {
    max-width: 78ch;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--nc-ink-dim);
    margin: 0 0 14px;
}

.mw-nc-explain strong {
    color: var(--nc-ink);
    font-weight: 600;
}

/* "Relevant in MitWare" context row. */
.mw-nc-usedin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.mw-nc-usedin-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--nc-ink) 45%, transparent);
    margin-right: 3px;
}

.mw-nc-ctx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--nc-accent) 28%, var(--nc-line));
    background: color-mix(in srgb, var(--nc-accent) 7%, transparent);
    color: var(--nc-ink);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.mw-nc-ctx::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nc-accent);
}

a.mw-nc-ctx:hover {
    background: color-mix(in srgb, var(--nc-accent) 15%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--nc-ink);
}

/* Characteristics / restrictions fact list. */
.mw-nc-facts {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
}

.mw-nc-fact {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 9px;
    align-items: baseline;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--nc-ink-dim);
    max-width: 84ch;
}

.mw-nc-fact-ic {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    transform: translateY(2px);
}

.mw-nc-fact-ic--info {
    background: color-mix(in srgb, var(--nc-accent) 14%, transparent);
    color: var(--nc-accent);
}

.mw-nc-fact-ic--info::before { content: 'i'; }

.mw-nc-fact-ic--warn {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: var(--mud-palette-warning);
}

.mw-nc-fact-ic--warn::before { content: '!'; }

.mw-nc-fact-ic--perm {
    background: color-mix(in srgb, var(--mud-palette-error) 13%, transparent);
    color: var(--mud-palette-error);
}

.mw-nc-fact-ic--perm::before { content: '✱'; }

/* Live controls zone (inset panel). */
.mw-nc-controls {
    border: 1px solid var(--nc-line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--nc-ink) 3.5%, transparent);
    padding: 16px 18px;
    display: grid;
    gap: 14px;
}

.mw-nc-controls-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--nc-ink) 45%, transparent);
}

.mw-nc-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Status pill (telemetry readout). */
.mw-nc-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--nc-line);
    background: var(--nc-surface);
    color: var(--nc-ink-dim);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.mw-nc-stat b {
    font-weight: 600;
    color: color-mix(in srgb, var(--nc-ink) 55%, transparent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.62rem;
}

.mw-nc-stat i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nc-ink) 25%, transparent);
    font-style: normal;
}

.mw-nc-stat--on {
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
    color: var(--nc-ink);
}

.mw-nc-stat--on i {
    background: var(--mud-palette-success);
    box-shadow: 0 0 7px color-mix(in srgb, var(--mud-palette-success) 70%, transparent);
}

.mw-nc-stat--warn {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    color: var(--nc-ink);
}

.mw-nc-stat--warn i { background: var(--mud-palette-warning); }

.mw-nc-stat--err {
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
    color: var(--nc-ink);
}

.mw-nc-stat--err i { background: var(--mud-palette-error); }

.mw-nc-stat--live i {
    background: var(--mud-palette-success);
    animation: mw-nc-blink 1.1s ease-in-out infinite;
}

/* Telemetry log (scanned tags / streamed fixes). */
.mw-nc-log {
    display: grid;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.mw-nc-log-row {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 12px;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid var(--nc-line);
    border-left: 3px solid color-mix(in srgb, var(--nc-accent) 60%, transparent);
    background: var(--nc-surface);
    animation: mw-nc-log-in 0.3s ease backwards;
    overflow-wrap: anywhere;
}

.mw-nc-log-time {
    color: color-mix(in srgb, var(--nc-ink) 45%, transparent);
    font-size: 0.68rem;
}

.mw-nc-log-main { color: var(--nc-ink); }

.mw-nc-log-sub {
    color: var(--nc-ink-dim);
    font-size: 0.68rem;
    margin-top: 2px;
}

/* Affordance tile grid (device panel). */
.mw-nc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.mw-nc-tile {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid var(--nc-line);
    border-radius: 14px;
    background: var(--nc-surface);
    padding: 15px 16px 13px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.mw-nc-tile:hover {
    border-color: color-mix(in srgb, var(--nc-accent) 40%, var(--nc-line));
    transform: translateY(-2px);
}

.mw-nc-tile-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mw-nc-tile-head .mud-icon-root {
    width: 19px;
    height: 19px;
    font-size: 19px;
    color: var(--nc-accent);
}

.mw-nc-tile-name {
    font-family: 'Geist', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.mw-nc-tile-desc {
    font-size: 0.79rem;
    line-height: 1.55;
    color: var(--nc-ink-dim);
    margin: 0;
    flex: 1;
}

.mw-nc-tile-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mw-nc-tile-fact {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--nc-ink) 48%, transparent);
    border-top: 1px dashed var(--nc-line);
    padding-top: 8px;
}

.mw-nc-tile-fact::before {
    content: '▸';
    color: var(--nc-accent);
    flex: none;
}

/* Docs footer per card. */
.mw-nc-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--nc-line);
}

/* Subsection heading inside a card (e.g. push vs local notifications). */
.mw-nc-subhead {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nc-accent);
    margin: 4px 0 0;
}

.mw-nc-subhead::after {
    content: '';
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--nc-accent) 25%, transparent);
}

/* Compact input width fixes inside control zones. */
.mw-nc-controls .mud-input-control {
    margin-top: 0;
}

/* ------------------------------------------------------------- animations */

@keyframes mw-nc-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mw-nc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@keyframes mw-nc-log-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* NFC scanning pulse ring around the card icon. */
.mw-nc-card-icon--scanning {
    position: relative;
}

.mw-nc-card-icon--scanning::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    border: 2px solid var(--nc-accent);
    animation: mw-nc-pulse 1.6s ease-out infinite;
}

@keyframes mw-nc-pulse {
    0% {
        opacity: 0.85;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 640px) {
    .mw-nc-page {
        padding: 22px 14px 70px;
    }

    .mw-nc-card {
        padding: 20px 18px 18px;
    }

    .mw-nc-card-head {
        grid-template-columns: auto 1fr;
    }

    .mw-nc-plats {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .mw-nc-page [data-tip]::after {
        max-width: 220px;
    }
}