/* The font URL below is a token substituted by the consumer's staging step
   (tools/stage.sh; see README, "Fonts and staging"). Left unsubstituted it is
   not a working URL, and staging fails rather than ship it — a font that
   silently renders in a fallback face is what this token makes loud. */
@font-face {
    font-family: 'Inter-Alia';
    src: url('/fonts/InterAlia-VF.otf') format('opentype');
    font-weight: 100 900;
}

/* --- Surface palette ---------------------------------------------------
   The keyboard itself is dark in every theme (see .shaw-keys below):
   it is a floating instrument, not a page surface. Its SETTINGS surfaces are
   not — the picker (keyboard-settings.html) and the editor (layout-editor.css)
   are injected into the host document and read as part of the host's page, so
   they must follow the host's theme or they land light-on-dark.

   Both host mechanisms are honoured because a host has three states, not two:
   an explicit [data-theme] on an ancestor, or none at all, in which case the
   OS preference decides. A media query alone misses an explicit choice that
   contradicts the OS; a [data-theme] rule alone misses the unset case.

   Values are defined here and not asked of the host: the library has five
   consumers and cannot require any of them to supply a custom property. The
   dark values are the keyboard's own #2a2a2a/#3d3d3d/#e0e0e0, so a themed
   settings surface and the keyboard it configures read as one instrument. */

/* --- Layering -----------------------------------------------------------
   --sk-overlay-z is the floor the library's own overlays stack from; each
   adds a small offset to it, so their relative order (keyboard < palette <
   base picker) is fixed here and cannot be got wrong by a host.

   Only the floor is a host's business, and it has to be, because the number
   that clears one host's modals sits under another's. A library cannot know
   a host's stacking, and a value picked to beat today's loses to tomorrow's
   — so the host that has modals of its own raises the floor above them, the
   same way it may override the palette.

   The default of 2000 is written as a var() fallback at each point of use and
   deliberately NOT declared on :root here. A :root declaration would be
   same-specificity with the host's, so this stylesheet loading after the
   host's — the order the README's <link> snippet gives — would silently beat
   the host's override and the token would be a lie. As a fallback the host's
   value wins whenever it sets one, at any link order. 2000 clears an unstyled
   page and the keyboard's own 1000 without reaching for a nine-digit number
   nothing can ever stack above. */

/* The keyboard's own fill, dark in EVERY theme — it is the instrument, not a
   page surface, so this pair sits outside the themed palette below and is
   never redefined per theme. Named because the editor's keyboard panel and the
   layer tab joined to it must agree. */
:root {
    --sk-keyboard-fill: #2a2a2a;
    --sk-keyboard-text: #fff;

    --sk-surface: #fff;
    --sk-surface-raised: #fafafa;
    --sk-surface-hover: #f3f3f3;
    --sk-surface-tint: #f8f9fa;
    --sk-surface-sunken: #ececec;
    --sk-text: #444;
    --sk-text-muted: #777;
    --sk-text-detail: #555;
    --sk-text-meta: #666;
    --sk-text-hint: #888;
    --sk-dirty: #b06a1a;
    --sk-border: #e0e0e0;
    --sk-border-mid: #ddd;
    --sk-border-soft: #d5d5d5;
    --sk-border-strong: #d0d0d0;
    --sk-border-control: #ccc;
    --sk-accent: #007bff;
    --sk-accent-fill: #e7f3ff;
    --sk-accent-border: #cfe3ff;
    --sk-accent-surface: #f4f9ff;
    --sk-chip-text: #6b57c8;
    --sk-chip-fill: #efeaff;
    --sk-chip-border: #d9cffb;
    /* The picker's badge and the editor's coverage line were authored with
       different greens/ambers. Kept apart so light rendering is untouched;
       they converge on one pair in dark, where the light shades are too dark
       to read. */
    --sk-badge-ok: #1a7f37;
    --sk-coverage-ok: #28a745;
    --sk-badge-warn: #b35900;
    --sk-coverage-warn: #d9822b;
    --sk-danger: #c0392b;
    --sk-danger-border: #e8c4c0;
}

:root[data-theme="dark"] {
    --sk-surface: #2a2a2a;
    --sk-surface-raised: #3d3d3d;
    --sk-surface-hover: #4a4a4a;
    --sk-surface-tint: #333;
    --sk-surface-sunken: #353535;
    --sk-text: #e0e0e0;
    --sk-text-muted: #aaa;
    --sk-text-detail: #bbb;
    --sk-text-meta: #b0b0b0;
    --sk-text-hint: #9a9a9a;
    --sk-dirty: #e0a35c;
    --sk-border: #4a4a4a;
    --sk-border-mid: #454545;
    --sk-border-soft: #4f4f4f;
    --sk-border-strong: #5a5a5a;
    --sk-border-control: #5a5a5a;
    --sk-accent: #4a9eff;
    --sk-accent-fill: #24384d;
    --sk-accent-border: #3a6285;
    --sk-accent-surface: #24303d;
    --sk-chip-text: #b9a9f5;
    --sk-chip-fill: #332d4a;
    --sk-chip-border: #4c4370;
    --sk-badge-ok: #5fd18a;
    --sk-coverage-ok: #5fd18a;
    --sk-badge-warn: #e0a35c;
    --sk-coverage-warn: #e0a35c;
    --sk-danger: #f08a7d;
    --sk-danger-border: #7a4038;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sk-surface: #2a2a2a;
        --sk-surface-raised: #3d3d3d;
        --sk-surface-hover: #4a4a4a;
        --sk-surface-tint: #333;
        --sk-surface-sunken: #353535;
        --sk-text: #e0e0e0;
        --sk-text-muted: #aaa;
        --sk-text-detail: #bbb;
        --sk-text-meta: #b0b0b0;
        --sk-text-hint: #9a9a9a;
        --sk-dirty: #e0a35c;
        --sk-border: #4a4a4a;
        --sk-border-mid: #454545;
        --sk-border-soft: #4f4f4f;
        --sk-border-strong: #5a5a5a;
        --sk-border-control: #5a5a5a;
        --sk-accent: #4a9eff;
        --sk-accent-fill: #24384d;
        --sk-accent-border: #3a6285;
        --sk-accent-surface: #24303d;
        --sk-chip-text: #b9a9f5;
        --sk-chip-fill: #332d4a;
        --sk-chip-border: #4c4370;
        --sk-badge-ok: #5fd18a;
        --sk-coverage-ok: #5fd18a;
        --sk-badge-warn: #e0a35c;
        --sk-coverage-warn: #e0a35c;
        --sk-danger: #f08a7d;
        --sk-danger-border: #7a4038;
    }
}

/* --- Settings dialog shell ----------------------------------------------
   The two-view settings <dialog> built by openShawKeysSettings. Its
   APPEARANCE lives here rather than in that function's inline styles: the
   shell is a settings surface, so it follows the host's theme like the
   picker and editor it contains, and only a stylesheet can read the --sk-*
   tokens across all three theme states. JS keeps the geometry it must own
   (see the centring note in openShawKeysSettings). */
#sk-settings-dialog {
    background: var(--sk-surface);
    color: var(--sk-text);
}

#sk-settings-dialog .sk-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--sk-border-mid);
}

#sk-dialog-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
    text-align: center;
}

#sk-dialog-back {
    border: none;
    background: none;
    font-size: 15px;
    cursor: pointer;
    color: var(--sk-accent);
}

#sk-settings-dialog .sk-dialog-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 14px;
    background-color: var(--sk-surface-sunken);
    color: var(--sk-text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sk-settings-container {
    padding: 16px;
}

/* Shaw Keys Floating Window */
.shaw-keys {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    cursor: move;
    user-select: none;
    font-family: 'Inter-Alia';
    font-size: 100%;
}

/* Ensure consistent box model for all keyboard elements */
.shaw-keys,
.shaw-keys * {
    box-sizing: border-box;
}


.keyboard-header {
    background: #353535;
    color: #aaa;
    padding: 6px 10px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}

.keyboard-title {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.8;
}

.keyboard-close {
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.5;
    color: #999;
}

.keyboard-close:hover {
    opacity: 1;
    color: #fff;
}

.keyboard-body {
    padding: 10px;
    background: #2a2a2a;
    border-radius: 0 0 12px 12px;
}

.keyboard-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    justify-content: center;
}

.keyboard-row:last-child {
    margin-bottom: 0;
}

.key {
    background: #3d3d3d;
    border: 1px solid #4a4a4a;
    border-radius: 5px;
    padding: 7px;
    min-width: 34px;
    height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
    position: relative;
    overflow: hidden;
}

.key:hover {
    background: #4a4a4a;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.key:active,
.key.active {
    background: #555;
    color: white;
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    border-color: #666;
}

/* Dual-legend key structure */
.key-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.key-shift {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-150%);
    opacity: 0.4;
    font-size: 0.85em;
    transition: transform 0.15s ease, opacity 0.15s ease;
    pointer-events: none;
}

/* Armed state: this key would complete a ligature; its main legend previews
   the result glyph. Tinted so the preview reads as provisional, not typed. */
.key.armed {
    background: #2f4858;
    border-color: #4a7a99;
}

.key.armed .key-main {
    color: #7fd4ff;
}

/* Slide-down state: shift legend slides down to replace main */
.key.slide-down .key-main {
    transform: translate(-50%, -50%) translateY(150%);
    opacity: 0;
}

.key.slide-down .key-shift {
    transform: translate(-50%, -50%) translateY(0);
    opacity: 1;
    font-size: 1em;
}


/* Key size variations */
.key-wide {
    min-width: 50px;
}

.key-wider {
    min-width: 62px;
}

.key-widest {
    min-width: 82px;
}

.key-space {
    min-width: 312px;
}

/* Desktop-only keys (hidden on mobile) */
.key.mobile-only {
    display: none !important;
}

/* Spacers for mobile alignment */
.spacer {
    display: none;
}

.spacer.mobile-only {
    display: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .shaw-keys {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        /* Safe area insets for notched devices and iOS home indicator */
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .keyboard-body {
        padding: 3px;
    }

    /* The keyboard-body carries a structure-imperial class when the active
       layout's structural family is imperial (see updateKeyboardLabels in
       shaw-keys.js, which derives it from
       ShawKeys.structuralFamilyOf). That resolver maps both the imperial
       and igc built-ins — and any custom layout cloned from them via
       layout.base — to the imperial number-row geometry. The mobile structural
       rules below gate on this family class, not on the layout name, so a
       custom clone of imperial renders with its number row intact. */

    /* Hide number row and certain keys for non-imperial layouts on mobile */
    .keyboard-body:not(.structure-imperial) .hide-mobile-non-imperial {
        display: none !important;
    }

    /* Show spacers with hide-mobile-non-imperial on imperial layouts */
    .keyboard-body.structure-imperial .spacer.hide-mobile-non-imperial {
        display: block !important;
    }

    /* Show keys/spacers only for non-imperial layouts on mobile */
    .show-mobile-non-imperial {
        display: none !important;
    }

    .keyboard-body:not(.structure-imperial) .show-mobile-non-imperial {
        display: block !important;
    }

    .keyboard-row {
        justify-content: space-between;
        width: 100%;
    }

    .key {
        flex: 1;
        min-width: 0;
        height: 38px;
        padding: 4px;
        font-size: 12px;
    }

    .key-wide {
        flex: 1.5;
    }

    .key-wider {
        flex: 1.75;
    }

    .key-widest {
        flex: 2;
    }

    .key-space {
        flex: 6;
    }

    /* 1.5x width key for mobile shift keys */
    .key-wide-half {
        flex: 1.5;
    }

    /* Show/hide keys based on mobile/desktop */
    .key.desktop-only {
        display: none !important;
    }

    .key.mobile-only {
        display: flex !important;
    }

    /* Show spacers on mobile (unless they should be hidden for imperial layouts) */
    .spacer.mobile-only:not(.show-mobile-non-imperial) {
        display: block !important;
    }

    .keyboard-body:not(.structure-imperial) .spacer.mobile-only.show-mobile-non-imperial {
        display: block !important;
    }

    /* Space row layout on mobile */
    .keyboard-row:last-child {
        display: flex;
        justify-content: flex-start;
        gap: 4px;
    }

    /* Row indentation removed - keys fill full width */
    .keyboard-body .keyboard-row:nth-child(1),
    .keyboard-body .keyboard-row:nth-child(2),
    .keyboard-body .keyboard-row:nth-child(3),
    .keyboard-body .keyboard-row:nth-child(4),
    .keyboard-body .keyboard-row:nth-child(5) {
        padding-left: 0;
    }

    /* --- Preview keyboard: FIXED intrinsic proportions ---
       The docked keyboard uses flex:1 keys that fill the viewport width, which is
       correct when the body IS the viewport. But a preview body sits in a narrower
       host, so flex:1 + fixed height stretches keys to the wrong aspect. Here we
       restore the DESKTOP fixed key sizing (the square-key reference) so the body
       sizes to its natural content width and rows don't reflow; the uniform
       transform: scale() in scalePreviewToWidth then fits it to the host WITHOUT
       distorting the ratio. Structure gating (which keys show) is untouched — only
       sizing is pinned. The editor pins the same way in layout-editor.css. */
    .sk-preview-body.keyboard-body {
        width: max-content;
    }

    .sk-preview-body .keyboard-row {
        justify-content: center;
        width: auto;
    }

    .sk-preview-body .key {
        flex: 0 0 auto;
        min-width: 34px;
        height: 34px;
    }

    .sk-preview-body .key-wide      { flex: 0 0 auto; min-width: 50px; }
    .sk-preview-body .key-wider     { flex: 0 0 auto; min-width: 62px; }
    .sk-preview-body .key-widest    { flex: 0 0 auto; min-width: 82px; }
    .sk-preview-body .key-wide-half { flex: 0 0 auto; min-width: 42px; }
    .sk-preview-body .key-space     { flex: 0 0 auto; min-width: 200px; }
}