/* ============================================================
   WordBlocks — Hex Slot Picker Widget
   Design: Swiss/International style, AAC POS color system
   Geometry: pointy-top hexagons, R=52px satellites, R=60px center
   Container: 340×340px, center at 170,170
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES
   Extends :root tokens from main.css and grid-system.css
   ============================================================ */

:root {
    /* --- Hex geometry --- */
    --hex-R: 52px;                      /* satellite circumradius (center-to-vertex) */
    --hex-R-center: 60px;               /* center (ACTION) circumradius */
    --hex-orbit: 112px;                 /* center → satellite center distance */
    --hex-width: 90.07px;               /* sqrt(3) × --hex-R  (pointy-top bbox width) */
    --hex-height: 104px;                /* 2 × --hex-R        (pointy-top bbox height) */
    --hex-width-center: 103.92px;       /* sqrt(3) × --hex-R-center */
    --hex-height-center: 120px;         /* 2 × --hex-R-center */
    --hex-container-size: 340px;        /* overall cluster bounding square */
    --hex-gap: 15px;                    /* visual gap between adjacent hex edges */

    /* --- Overlay --- */
    --hex-overlay-bg: rgba(15, 23, 42, 0.55);
    --hex-overlay-blur: 3px;
    --hex-panel-bg: #ffffff;
    --hex-panel-radius: 20px;
    --hex-panel-padding: 20px;
    --hex-panel-shadow:
        0 24px 48px rgba(0, 0, 0, 0.22),
        0 8px 16px rgba(0, 0, 0, 0.12);

    /* --- State fill opacities (applied via JS as CSS var or inline alpha) --- */
    --hex-fill-empty-alpha: 0.08;
    --hex-fill-hover-alpha: 0.15;
    --hex-fill-filled-alpha: 0.18;
    --hex-fill-active-alpha: 0.28;

    /* --- Transitions --- */
    --hex-transition-fast: 120ms ease-in;
    --hex-transition-base: 160ms ease-out;
    --hex-transition-spring: 240ms cubic-bezier(0.34, 1.30, 0.64, 1);

    /* --- Suggestion panel --- */
    --hex-suggest-width: 200px;
    --hex-suggest-max-height: 280px;
    --hex-suggest-radius: 12px;
    --hex-suggest-item-min-height: 44px;
    --hex-suggest-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.10);

    /* --- Typography inside hexes --- */
    --hex-font-label: 11px;
    --hex-font-symbol: 24px;
    --hex-font-word: 15px;
    --hex-font-label-center: 12px;
    --hex-font-symbol-center: 30px;
    --hex-font-word-center: 17px;
}


/* ============================================================
   OVERLAY BACKDROP
   ============================================================ */

.hex-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--hex-overlay-bg);
    backdrop-filter: blur(var(--hex-overlay-blur));
    -webkit-backdrop-filter: blur(var(--hex-overlay-blur));
    display: flex;
    align-items: center;
    justify-content: center;

    /* Entrance animation */
    animation: hexOverlayIn 200ms ease-out both;
}

.hex-picker-overlay.is-closing {
    animation: hexOverlayOut 160ms ease-in forwards;
}

@keyframes hexOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hexOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}


/* ============================================================
   PICKER PANEL (white card containing the hex cluster)
   ============================================================ */

.hex-picker-panel {
    position: relative;
    background: var(--hex-panel-bg);
    border-radius: var(--hex-panel-radius);
    padding: var(--hex-panel-padding);
    box-shadow: var(--hex-panel-shadow);

    /* Entrance animation */
    animation: hexPanelIn var(--hex-transition-spring) both;
}

.hex-picker-panel.is-closing {
    animation: hexPanelOut 140ms ease-in forwards;
}

@keyframes hexPanelIn {
    from {
        opacity: 0;
        transform: scale(0.90) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes hexPanelOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }
}

/* Close button (top-right corner of panel) */
.hex-picker-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hex-transition-base), color var(--hex-transition-base);
    z-index: 10;
}

.hex-picker-close:hover {
    background: var(--error, #ef4444);
    color: #ffffff;
}

.hex-picker-close:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 2px;
}


/* ============================================================
   HEX CLUSTER CONTAINER
   340×340px positioning space.
   All hex nodes are position:absolute within this.
   ============================================================ */

.hex-cluster {
    position: relative;
    width: var(--hex-container-size);
    height: var(--hex-container-size);
    /* Cluster is purely a positioning context — no background */
}


/* ============================================================
   HEX NODE BASE STYLES
   Applies to all 7 hexagons (center + 6 satellites)
   ============================================================ */

.hex-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    /* Pointy-top hexagon clip */
    clip-path: polygon(
        50%    0%,
        100%  25%,
        100%  75%,
        50%  100%,
        0%    75%,
        0%    25%
    );

    /* Base sizing for satellites */
    width:  var(--hex-width);       /* 90.07px */
    height: var(--hex-height);      /* 104px   */

    /* Interaction */
    cursor: pointer;
    border: none;                   /* button reset */
    padding: 0;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;

    /* Transition */
    transition:
        transform var(--hex-transition-base),
        background-color var(--hex-transition-base),
        box-shadow var(--hex-transition-base);

    /* Border is faked via outline (clip-path clips real borders) */
    /* We use a box-shadow inset trick or a wrapper element for the border */
    outline: none;
}

/*
 * NOTE ON HEX BORDERS:
 * clip-path clips CSS borders, making them invisible.
 * The border effect is achieved by a ::before pseudo-element
 * sized 100%×100% with its own clip-path and background = POS color.
 * The inner hex node sits on top at a 2px inset scale.
 */

.hex-node-wrapper {
    position: absolute;
    /* Wrapper provides the "border" background layer */
}

/* The outer border layer */
.hex-node-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(
        50%    0%,
        100%  25%,
        100%  75%,
        50%  100%,
        0%    75%,
        0%    25%
    );
    /* background set by state modifier classes below */
    z-index: 0;
    transition: background-color var(--hex-transition-base);
}

/* The inner fill layer sits on top of the border layer */
/* Achieved by the .hex-node itself being inset ~2.5% each side */
.hex-node-wrapper .hex-node {
    top: 2.5%;
    left: 2.5%;
    width: 95%;
    height: 95%;
    position: absolute;
    z-index: 1;
}


/* ============================================================
   SATELLITE HEX POSITIONS
   Container 340×340, center at 170,170.
   Orbit radius = 112px.
   Pointy-top hex: width=90.07, height=104.
   top  = cy - R      = cy - 52
   left = cx - width/2 = cx - 45.035
   ============================================================ */

/* WHO — top (90°): cx=170, cy=58 */
.hex-node-wrapper[data-slot="who"] {
    top:  6px;      /* cy - R = 58 - 52 */
    left: 125px;    /* cx - W/2 = 170 - 45.035 ≈ 125 */
    width:  var(--hex-width);
    height: var(--hex-height);
}

/* WHAT — top-right (30°): cx=267, cy=114 */
.hex-node-wrapper[data-slot="what"] {
    top:  62px;     /* 114 - 52 */
    left: 222px;    /* 267 - 45 */
    width:  var(--hex-width);
    height: var(--hex-height);
}

/* WHERE — bottom-right (-30°): cx=267, cy=226 */
.hex-node-wrapper[data-slot="where"] {
    top:  174px;    /* 226 - 52 */
    left: 222px;
    width:  var(--hex-width);
    height: var(--hex-height);
}

/* WHEN — bottom (-90°): cx=170, cy=282 */
.hex-node-wrapper[data-slot="when"] {
    top:  230px;    /* 282 - 52 */
    left: 125px;
    width:  var(--hex-width);
    height: var(--hex-height);
}

/* HOW — bottom-left (-150°): cx=73, cy=226 */
.hex-node-wrapper[data-slot="how"] {
    top:  174px;
    left: 28px;     /* 73 - 45 */
    width:  var(--hex-width);
    height: var(--hex-height);
}

/* WHY — top-left (150°): cx=73, cy=114 */
.hex-node-wrapper[data-slot="why"] {
    top:  62px;
    left: 28px;
    width:  var(--hex-width);
    height: var(--hex-height);
}

/* CENTER (ACTION/verb) — centered: cx=170, cy=170 */
/* R-center=60, W-center=103.92, H-center=120       */
.hex-node-wrapper[data-slot="action"] {
    top:  110px;    /* 170 - 60 */
    left: 118px;    /* 170 - 51.96 ≈ 118 */
    width:  var(--hex-width-center);
    height: var(--hex-height-center);
}


/* ============================================================
   POS COLOR ASSIGNMENTS
   Each slot gets a --hex-color custom property.
   States use color-mix() or rgba() with that variable.
   ============================================================ */

.hex-node-wrapper[data-slot="action"] { --hex-color: var(--color-verb, #FF6B9D); }
.hex-node-wrapper[data-slot="who"]    { --hex-color: var(--color-pronoun, #FFD700); }
.hex-node-wrapper[data-slot="what"]   { --hex-color: var(--color-noun, #FFA500); }
.hex-node-wrapper[data-slot="where"]  { --hex-color: var(--color-noun, #FFA500); }
.hex-node-wrapper[data-slot="when"]   { --hex-color: var(--color-adverb, #32CD32); }
.hex-node-wrapper[data-slot="how"]    { --hex-color: var(--color-adverb, #32CD32); }
.hex-node-wrapper[data-slot="why"]    { --hex-color: var(--color-preposition, #9370DB); }


/* ============================================================
   HEX STATES

   State classes are placed on the .hex-node-wrapper:
     .is-empty    (default)
     .is-filled
     .is-hovered  (JS-managed or :hover — duplicated for pointer devices)
     .is-active   (suggestion list open)

   The ::before pseudo sets the outer border color.
   The .hex-node itself gets the fill background.
   ============================================================ */

/* --- EMPTY STATE --- */
.hex-node-wrapper.is-empty::before {
    background-color: color-mix(in srgb, var(--hex-color) 40%, transparent);
}

.hex-node-wrapper.is-empty .hex-node {
    background-color: color-mix(in srgb, var(--hex-color) 8%, white);
}

/* Border dashed effect: not achievable with clip-path.
   Workaround: lower opacity on the ::before, no second color layer.
   For a dashed appearance, use SVG background-image or a radial gradient
   hack (see note at end of file). Simple solid at 40% is used here. */

/* --- HOVER STATE (empty) --- */
.hex-node-wrapper.is-empty:hover::before,
.hex-node-wrapper.is-empty.is-hovered::before {
    background-color: color-mix(in srgb, var(--hex-color) 70%, transparent);
}

.hex-node-wrapper.is-empty:hover .hex-node,
.hex-node-wrapper.is-empty.is-hovered .hex-node {
    background-color: color-mix(in srgb, var(--hex-color) 15%, white);
}

.hex-node-wrapper.is-empty:hover,
.hex-node-wrapper.is-empty.is-hovered {
    transform: scale(1.06);
}

/* --- FILLED STATE --- */
.hex-node-wrapper.is-filled::before {
    background-color: var(--hex-color);
}

.hex-node-wrapper.is-filled .hex-node {
    background-color: color-mix(in srgb, var(--hex-color) 18%, white);
}

/* Lift shadow on filled (applied to wrapper — clip clips it but
   filter:drop-shadow works through clip-path) */
.hex-node-wrapper.is-filled {
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--hex-color) 35%, transparent));
}

/* --- HOVER STATE (filled) --- */
.hex-node-wrapper.is-filled:hover::before,
.hex-node-wrapper.is-filled.is-hovered::before {
    background-color: color-mix(in srgb, var(--hex-color) 90%, white);
}

.hex-node-wrapper.is-filled:hover .hex-node,
.hex-node-wrapper.is-filled.is-hovered .hex-node {
    background-color: color-mix(in srgb, var(--hex-color) 22%, white);
}

.hex-node-wrapper.is-filled:hover,
.hex-node-wrapper.is-filled.is-hovered {
    transform: scale(1.04);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--hex-color) 45%, transparent));
}

/* --- ACTIVE STATE (suggestion list open) --- */
.hex-node-wrapper.is-active::before {
    background-color: var(--hex-color);
}

.hex-node-wrapper.is-active .hex-node {
    background-color: color-mix(in srgb, var(--hex-color) 28%, white);
}

.hex-node-wrapper.is-active {
    transform: scale(1.08);
    filter:
        drop-shadow(0 0 0 4px color-mix(in srgb, var(--hex-color) 25%, transparent))
        drop-shadow(0 4px 16px color-mix(in srgb, var(--hex-color) 30%, transparent));
    animation: hexActivePulse 300ms ease-out both;
}

@keyframes hexActivePulse {
    0%   { transform: scale(1.00); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1.08); }
}

/* --- CENTER (ACTION) SPECIAL STATES --- */

/* Empty center: dashed feel via lower opacity */
.hex-node-wrapper[data-slot="action"].is-empty::before {
    background-color: color-mix(in srgb, var(--hex-color) 30%, transparent);
}
.hex-node-wrapper[data-slot="action"].is-empty .hex-node {
    background-color: color-mix(in srgb, var(--hex-color) 10%, white);
}

/* Filled center: solid brand color, white text */
.hex-node-wrapper[data-slot="action"].is-filled::before {
    background-color: var(--hex-color);
}
.hex-node-wrapper[data-slot="action"].is-filled .hex-node {
    background-color: var(--hex-color);
}
/* Text color for filled action center handled in .hex-word-center below */


/* ============================================================
   HEX CONTENT TYPOGRAPHY
   ============================================================ */

/* Slot label (top of hex: "WHO", "WHAT", etc.) */
.hex-label {
    font-size: var(--hex-font-label);    /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--text-primary, #1e293b);
    opacity: 0.55;
    pointer-events: none;
}

/* On filled state, label uses POS color */
.hex-node-wrapper.is-filled .hex-label {
    color: color-mix(in srgb, var(--hex-color) 80%, #1e293b);
    opacity: 1;
}

/* Symbol / emoji */
.hex-symbol {
    font-size: var(--hex-font-symbol);   /* 24px */
    line-height: 1;
    pointer-events: none;
    /* Prevent emoji from being clipped at hex edges */
    max-width: 26px;
    overflow: hidden;
}

/* Word text */
.hex-word {
    font-size: var(--hex-font-word);     /* 15px */
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary, #1e293b);
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

/* Plus glyph for empty state (replaces symbol slot) */
.hex-plus {
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: var(--hex-color);
    opacity: 0.30;
    pointer-events: none;
    transition: opacity var(--hex-transition-base);
}

.hex-node-wrapper:hover .hex-plus,
.hex-node-wrapper.is-hovered .hex-plus {
    opacity: 0.65;
}

/* CENTER hex typography overrides */
.hex-node-wrapper[data-slot="action"] .hex-label {
    font-size: var(--hex-font-label-center);   /* 12px */
}

.hex-node-wrapper[data-slot="action"] .hex-symbol {
    font-size: var(--hex-font-symbol-center);  /* 30px */
    max-width: 32px;
}

.hex-node-wrapper[data-slot="action"] .hex-word {
    font-size: var(--hex-font-word-center);    /* 17px */
    max-width: 90px;
}

/* White text on solid-filled center */
.hex-node-wrapper[data-slot="action"].is-filled .hex-label,
.hex-node-wrapper[data-slot="action"].is-filled .hex-word {
    color: #ffffff;
    opacity: 1;
}

.hex-node-wrapper[data-slot="action"].is-filled .hex-symbol {
    /* emoji stays as-is — it has its own color */
}


/* ============================================================
   FOCUS STYLES (keyboard navigation)
   clip-path clips outline, so we use filter:drop-shadow
   ============================================================ */

.hex-node-wrapper:focus-visible,
.hex-node-wrapper .hex-node:focus-visible {
    outline: none;
    filter:
        drop-shadow(0 0 0 3px var(--hex-panel-bg))
        drop-shadow(0 0 0 5px var(--accent, #3b82f6));
}


/* ============================================================
   WORD SUGGESTION PANEL
   Appears adjacent to the tapped hex.
   Positioned by JS relative to hex bounds.
   ============================================================ */

.hex-suggest-panel {
    position: fixed;    /* JS sets top/left based on hex position */
    z-index: 200;
    width: var(--hex-suggest-width);          /* 200px */
    max-height: var(--hex-suggest-max-height);/* 280px */
    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;
    border-radius: var(--hex-suggest-radius); /* 12px */
    box-shadow: var(--hex-suggest-shadow);

    /* Border matches POS color of the active slot */
    border: 1.5px solid color-mix(in srgb, var(--hex-color, #888) 60%, transparent);

    /* Entrance */
    animation: hexSuggestIn 180ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hex-suggest-panel.is-closing {
    animation: hexSuggestOut 120ms ease-in forwards;
}

@keyframes hexSuggestIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes hexSuggestOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.92) translateY(-4px);
    }
}

/* Panel header */
.hex-suggest-header {
    padding: 10px 14px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: color-mix(in srgb, var(--hex-color, #888) 80%, #1e293b);
    border-bottom: 1px solid color-mix(in srgb, var(--hex-color, #888) 20%, transparent);
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
}

/* Suggestion list (semantic list element) */
.hex-suggest-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

/* Individual suggestion item */
.hex-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    min-height: var(--hex-suggest-item-min-height);  /* 44px — touch target */
    cursor: pointer;
    transition: background-color var(--hex-transition-base);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.hex-suggest-item:hover,
.hex-suggest-item.is-hovered {
    background-color: color-mix(in srgb, var(--hex-color, #888) 10%, transparent);
}

.hex-suggest-item.is-selected,
.hex-suggest-item[aria-selected="true"] {
    background-color: color-mix(in srgb, var(--hex-color, #888) 20%, transparent);
}

/* Divider between items */
.hex-suggest-item + .hex-suggest-item {
    border-top: 1px solid #e2e8f0;
}

/* Item emoji */
.hex-suggest-emoji {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* Item text block */
.hex-suggest-text {
    flex: 1;
    min-width: 0;
}

.hex-suggest-word {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hex-suggest-pos {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    font-weight: 400;
    margin-top: 1px;
}

/* Checkmark for selected item */
.hex-suggest-check {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--hex-color, #888);
    opacity: 0;
    transition: opacity var(--hex-transition-base);
}

.hex-suggest-item.is-selected .hex-suggest-check,
.hex-suggest-item[aria-selected="true"] .hex-suggest-check {
    opacity: 1;
}

/* Scrollbar styling (webkit) */
.hex-suggest-panel::-webkit-scrollbar {
    width: 4px;
}

.hex-suggest-panel::-webkit-scrollbar-track {
    background: transparent;
}

.hex-suggest-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--hex-color, #888) 40%, transparent);
    border-radius: 2px;
}

/* Loading state */
.hex-suggest-loading {
    padding: 16px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    font-style: italic;
}

/* Empty suggestions */
.hex-suggest-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}


/* ============================================================
   CONNECTOR LINES (optional decorative spokes)
   SVG overlay drawn inside .hex-cluster connecting
   center to each satellite. Purely decorative.
   ============================================================ */

.hex-cluster-svg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;  /* below hex nodes */
}

.hex-connector {
    stroke: var(--border-color, #e2e8f0);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.5;
}

/* Connectors brighten when their satellite is filled */
.hex-connector.is-filled {
    stroke: color-mix(in srgb, var(--hex-color, #888) 50%, #e2e8f0);
    stroke-dasharray: none;
    opacity: 0.7;
}


/* ============================================================
   RESPONSIVE ADJUSTMENTS
   Below 400px viewport width: scale the entire cluster down.
   ============================================================ */

@media (max-width: 400px) {
    .hex-picker-panel {
        padding: 12px;
    }

    .hex-cluster {
        /* Scale to 85% to fit small screens */
        transform: scale(0.85);
        transform-origin: top center;
        width: var(--hex-container-size);
        height: var(--hex-container-size);
        /* Compensate height for the scale */
        margin-bottom: calc(var(--hex-container-size) * -0.15);
    }
}

@media (max-width: 360px) {
    .hex-cluster {
        transform: scale(0.75);
        margin-bottom: calc(var(--hex-container-size) * -0.25);
    }
}


/* ============================================================
   REDUCED MOTION
   Collapse all animations to simple opacity fades.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .hex-picker-overlay,
    .hex-picker-overlay.is-closing,
    .hex-picker-panel,
    .hex-picker-panel.is-closing,
    .hex-suggest-panel,
    .hex-suggest-panel.is-closing,
    .hex-node-wrapper.is-active {
        animation: none;
    }

    .hex-node-wrapper {
        transition: none;
    }

    .hex-node-wrapper:hover,
    .hex-node-wrapper.is-hovered,
    .hex-node-wrapper.is-active {
        transform: none;
    }

    .hex-picker-overlay.is-closing {
        opacity: 0;
    }
}


/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */

@media (prefers-contrast: high) {
    .hex-node-wrapper.is-empty::before {
        background-color: color-mix(in srgb, var(--hex-color) 70%, transparent);
    }

    .hex-label {
        opacity: 1;
        font-size: 12px;
    }

    .hex-word {
        font-weight: 900;
    }

    .hex-suggest-item + .hex-suggest-item {
        border-top-color: #888;
    }
}


/* ============================================================
   DARK MODE
   The app currently has no dark mode, but these tokens
   provide a clean foundation for when it is added.
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --hex-panel-bg: #1e293b;
        --hex-overlay-bg: rgba(0, 0, 0, 0.70);
    }

    .hex-suggest-header,
    .hex-suggest-panel {
        background: #1e293b;
    }

    .hex-suggest-word {
        color: #f1f5f9;
    }

    .hex-node-wrapper.is-empty .hex-node {
        background-color: color-mix(in srgb, var(--hex-color) 12%, #1e293b);
    }

    .hex-node-wrapper.is-filled .hex-node {
        background-color: color-mix(in srgb, var(--hex-color) 25%, #1e293b);
    }

    .hex-node-wrapper.is-active .hex-node {
        background-color: color-mix(in srgb, var(--hex-color) 35%, #1e293b);
    }
}


/* ============================================================
   NOTE: DASHED HEX BORDER TECHNIQUE
   clip-path makes CSS border-style:dashed impossible.
   For true dashed borders on empty hexes, two approaches:
   A) SVG: place an <svg> behind the hex using the same
      polygon points with stroke-dasharray set.
   B) Background hack: use a conic-gradient or repeating-linear-
      gradient to simulate dashes within the outer ::before layer
      (complex, inconsistent cross-browser).
   Recommended: use a per-slot SVG element positioned identically
   to the wrapper, rendered at z-index:-1, with a <polygon>
   stroke-dasharray="6 4" and fill="none". Toggle visibility
   via JS on empty/filled state change.
   ============================================================ */