/* Canvas map: region plates, semantic zoom, spotlight.
   Plates are decorative siblings of the cards (aria-hidden), placed in world
   units by layout.js. They never take a transform or opacity, so the summary
   inside them can rise above the cards at far zoom without a stacking context
   trapping it. */

/* Each plate wears its region's hue (data-tone, base.css): a coloured top
   edge like a tabbed folder, a wash that fades down so the cards stay the
   brightest thing on it, and a large italic ghost number. */
.canvas-region {
    position: absolute;
    border-radius: 30px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--hue-wash) 82%, transparent) 0,
            color-mix(in srgb, var(--hue-wash) 36%, transparent) 220px,
            color-mix(in srgb, var(--hue-wash) 20%, transparent) 100%),
        var(--region-fill);
    border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
    border-top: 5px solid var(--hue);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 30px 60px -44px color-mix(in srgb, var(--hue) 55%, rgba(60, 40, 30, 0.4));
    pointer-events: none;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body[data-theme='dark'] .canvas-region {
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 230, 0.04),
        0 30px 60px -40px rgba(0, 0, 0, 0.6);
}

/* Selected work is the front door: the brand's wine hairline stripe runs
   under its heading and stops before the cards. */
.canvas-region-selected {
    background:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--hue) 9%, transparent) 0 1px, transparent 1px 13px) top / 100% 190px no-repeat,
        linear-gradient(180deg,
            color-mix(in srgb, var(--hue-wash) 82%, transparent) 0,
            color-mix(in srgb, var(--hue-wash) 30%, transparent) 260px,
            color-mix(in srgb, var(--hue-wash) 18%, transparent) 100%),
        var(--region-fill);
}

.region-ghost {
    position: absolute;
    top: -30px;
    right: 28px;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 200px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: color-mix(in srgb, var(--hue) 13%, transparent);
    pointer-events: none;
}

/* Region head: index, glyph, title and caption, card count. */
.region-head {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 24px 30px 0;
}

.region-index {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--hue-ink);
}

.region-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: var(--hue-ink);
    background: var(--hue-wash);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 24%, transparent);
}

.region-glyph svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.region-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.region-head .region-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--text);
}

.region-head .region-caption {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.region-count {
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--hue) 26%, transparent);
    background: var(--hue-wash);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--hue-ink);
}

/* Far zoom label. Hidden until the camera pulls back far enough that the
   cards stop being readable; then the map names its own regions. Below the
   scale it is drawn for, --label-scale (set by pan-zoom.js) grows it so it
   keeps its screen size, the way a map keeps its place names legible. */
.region-summary {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 720px;
    padding: 30px 52px 38px;
    border-radius: 32px;
    border: 1px solid color-mix(in srgb, var(--hue) 30%, var(--hairline));
    border-top: 7px solid var(--hue);
    background: var(--surface-solid);
    box-shadow: var(--elev-3), 0 24px 60px -30px color-mix(in srgb, var(--hue) 60%, transparent);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(calc(var(--label-scale, 1) * 0.94));
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s;
}

.region-summary .region-index {
    font-size: 34px;
}

.region-summary .region-title {
    font-family: var(--font-serif);
    font-size: 68px;
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.02;
    white-space: nowrap;
    color: var(--text);
}

.region-summary .region-caption {
    font-size: 24px;
    line-height: 1.4;
    color: var(--text-secondary);
}

#canvas-app.has-compact-labels .region-summary {
    padding: 14px 28px 16px;
    border-radius: 20px;
}

#canvas-app.has-compact-labels .region-summary .region-index,
#canvas-app.has-compact-labels .region-summary .region-caption {
    display: none;
}

/* ---- Semantic zoom ----------------------------------------------------- */

#canvas-app[data-zoom='far'] .region-summary {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: zoom-in;
    transform: translate(-50%, -50%) scale(var(--label-scale, 1));
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

#canvas-app[data-zoom='far'] .region-summary:hover {
    border-color: var(--hue);
}

#canvas-app[data-zoom='far'] .card {
    opacity: 0.34;
}

#canvas-app[data-zoom='far'] .card:hover {
    transform: none;
}

#canvas-app[data-zoom='far'] .region-head,
#canvas-app[data-zoom='far'] svg.connections {
    opacity: 0;
}

.region-head,
svg.connections {
    transition: opacity 0.28s ease;
}

/* Mid zoom keeps the cards but quiets the wiring between them. */
#canvas-app[data-zoom='mid'] svg.connections {
    opacity: 0.55;
}

/* The "Open" affordance only makes sense once a card is readable. */
#canvas-app:not([data-zoom='near']) .card[role='button']::after {
    display: none;
}

/* ---- Spotlight --------------------------------------------------------- */

.card.is-dimmed,
#canvas-app[data-zoom='far'] .card.is-dimmed {
    opacity: 0.18;
    filter: saturate(0.3);
}

.card.is-dimmed:hover {
    opacity: 0.6;
    filter: none;
}

#canvas-app[data-spotlight] .canvas-region:not(.is-spotlit) {
    background: transparent;
    border-color: color-mix(in srgb, var(--hue) 10%, transparent);
    border-top-color: color-mix(in srgb, var(--hue) 30%, transparent);
    box-shadow: none;
}

.canvas-region.is-spotlit {
    border-color: color-mix(in srgb, var(--hue) 50%, transparent);
    border-top-color: var(--hue);
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--hue) 14%, transparent),
        0 36px 72px -40px color-mix(in srgb, var(--hue) 70%, transparent);
}

.canvas-region.is-spotlit .region-glyph {
    color: var(--on-brand);
    background: var(--hue);
}

svg.connections path.is-dimmed {
    opacity: 0.05;
}

/* Phone plates are one card wide with a 10px margin (layout.js), so the
   head tightens to line up with the cards. */
@media (max-width: 767px) {
    .region-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        padding: 18px 12px 0;
    }

    .region-head .region-index {
        display: none;
    }

    .region-head .region-title {
        font-size: 24px;
    }

    .region-ghost {
        top: -18px;
        right: 12px;
        font-size: 150px;
    }

    /* In one column every relationship line runs straight down through the
       region heads; the phone map reads better without them. */
    svg.connections {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .canvas-region,
    .region-summary,
    .region-head,
    svg.connections {
        transition: none;
    }
}