/*
 * SayIntentions.AI design system and views.
 *
 * Shared by the toolbar and EFB. Host stylesheets only size the container.
 *
 * Coherent GT is roughly Chrome 49:
 *   - no CSS grid            -> flexbox
 *   - no flexbox `gap`       -> margins on children
 *   - no clamp()             -> @media breakpoints
 *   - no :is() / :where()
 * Custom properties are fine.
 *
 * SiComLink.js sets data-si-orientation and data-si-compact on .si-app
 * from the host box. Fill 100% of that box. Zoom scales glyphs only —
 * never the layout width.
 */

/*
 * Palette matches the Windows desktop client.
 */
.si-app {
    /* Surfaces, darkest to lightest */
    --si-glass: #000000;
    --si-chrome: #151515;
    --si-drawer: #15171A;
    --si-panel: #1B1B1B;
    --si-rail: #202020;
    --si-card: #212122;

    /* Lines */
    --si-border: #2D2D30;
    --si-hairline: #252932;
    --si-divider: #262628;

    /* Text */
    --si-text: #ECEEF0;
    --si-text-strong: #E0E0E0;
    --si-muted: #8E9398;
    --si-dim: #5A5D62;

    /* Accents */
    --si-gold: #D4A830;
    --si-gold-light: #F4CE68;
    --si-gold-dark: #B88F22;
    --si-blue: #54A8D6;

    /* Status. Functional rather than brand, used sparingly so gold stays the
       accent. The COM green is the desktop client's live-frequency colour. */
    --si-ok: #40BE69;
    --si-warn: #D4A830;
    --si-bad: #E8685A;
    --si-com-live: #3BD200;
    --si-com-dim: #2DAA00;
    --si-com-chip: #E0E0E0;

    /* Control tracks */
    --si-track: #121417;
    --si-toggle-off: #0B1111;
    --si-toggle-on: #3A6161;

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    background-color: var(--si-panel);
    color: var(--si-text);
    /* The desktop client is Segoe UI throughout. */
    font-family: "Segoe UI", "Segoe UI Semibold", Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    -coherent-font-sdf: off;
}

.si-app *,
.si-app *::before,
.si-app *::after {
    box-sizing: border-box;
    -coherent-font-sdf: off;
}

/* This UI is text-only. Hide any media node that lands in the tree. */
.si-app audio,
.si-app video {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===================================================================== type */

.si-h1 { font-size: 28px; font-weight: 700; color: var(--si-text); margin: 0; }
.si-h2 { font-size: 22px; font-weight: 700; color: var(--si-text); margin: 0; }
.si-h3 { font-size: 13px; font-weight: 700; color: var(--si-text); margin: 0; }

@media (min-width: 900px) { .si-h1 { font-size: 36px; } }
@media (min-width: 1400px) { .si-h1 { font-size: 44px; } }

/* Eyebrow / label */
.si-eyebrow {
    font-size: 11px;
    font-weight: 600;
    color: var(--si-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Body / blurb */
.si-body { font-size: 15px; font-weight: 400; color: var(--si-muted); margin: 0; }
/* Card meta */
.si-meta { font-size: 12px; font-weight: 400; color: var(--si-muted); }
/* Card title */
.si-card-title { font-size: 14px; font-weight: 600; color: var(--si-text); }

.si-mono {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.02em;
}

/* =================================================================== header */

.si-header {
    position: relative;
    z-index: 16;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    height: auto;
    padding: 10px 10px 6px 10px;
    background-color: var(--si-chrome);
    border-bottom: 1px solid var(--si-divider);
    overflow: hidden;
}

.si-header__content-shell {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 30px;
    overflow: hidden;
}

.si-header__content-shell::-webkit-scrollbar { height: 3px; }

.si-header__content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    transform-origin: center top;
}

.si-header__meta {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    margin: 0 0 4px 0;
    min-width: 0;
}

.si-header__comms {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
}

.si-header__comms-label {
    margin-right: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--si-muted);
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}

.si-header__meta .si-seat {
    flex: 0 0 auto;
    margin: 0;
}

.si-header__meta .si-seat .si-seg__opt {
    height: 14px;
    padding: 0 6px;
    font-size: 7px;
}

.si-app[data-si-header-inline="1"] .si-header__content {
    align-items: center;
}

.si-app[data-si-header-inline="1"] .si-header {
    min-height: 36px;
    padding-top: 10px;
    padding-bottom: 4px;
}

.si-app[data-si-header-inline="1"] .si-header__meta {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    margin: 0;
    pointer-events: none;
}

.si-app[data-si-header-inline="1"] .si-status,
.si-app[data-si-header-inline="1"] .si-header__comms {
    pointer-events: auto;
}

.si-app[data-si-header-inline="1"] .si-com {
    max-width: 560px;
    margin: 0 auto;
}

/*
 * Server-driven status bubble. Hidden until there is a label. Long text
 * wraps; a href makes the strip a full-width link.
 */
.si-status-bubble {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 22px;
    padding: 5px 10px;
    background-color: #b49233;
    color: #ffffff;
    border-bottom: 1px solid #000000;
    text-align: center;
}

.si-status-bubble[data-open="1"] { display: flex; }

.si-status-bubble__text,
.si-status-bubble__link {
    display: block;
    width: 100%;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-decoration: none;
    word-wrap: break-word;
}

.si-status-bubble[data-href="1"] { cursor: pointer; }
.si-status-bubble__link:hover { text-decoration: underline; }

/*
 * Desktop glass bar: COM1 / COM2 / XPDR sit in one row, chip beside the
 * readout.
 */
.si-com {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 26px;
    margin: 0 auto;
    padding: 0 4px;
    background-color: #000000;
    background-image: linear-gradient(to bottom, #1A1B1E 0%, #000000 100%);
    border: 1px solid rgba(120, 135, 150, 0.45);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(210, 225, 235, 0.35);
    overflow: hidden;
}

.si-com__slot {
    display: flex;
    flex: 1 1 0%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 2px 8px;
    background-color: transparent;
    color: inherit;
    border: 0;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}

.si-com__slot:hover .si-com__label {
    border-color: rgba(180, 195, 210, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.si-com__slot:focus { outline: 1px solid var(--si-gold); outline-offset: -2px; }

.si-com__label {
    flex: 0 0 auto;
    margin: 0 6px 0 0;
    padding: 1px 5px;
    background-color: rgba(255, 255, 255, 0.06);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.28) 100%);
    border: 1px solid rgba(120, 135, 150, 0.5);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 9px;
    font-weight: 700;
    color: var(--si-com-chip);
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
}

.si-com__value {
    flex: 0 0 auto;
    overflow: visible;
    font-family: "Segoe UI", "Segoe UI Semibold", Tahoma, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--si-com-dim);
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
}

/* TX-selected radio: chip and digits both go bright green, like desktop. */
.si-com__slot[data-live="1"] .si-com__label {
    color: var(--si-com-live);
    border-color: rgba(59, 210, 0, 0.45);
}

.si-com__slot[data-live="1"] .si-com__value { color: var(--si-com-live); }

/* Powered down, speaker off, or XPDR not ON/ALT. */
.si-com__slot[data-off="1"] .si-com__label,
.si-com__slot[data-off="1"] .si-com__value { color: #A9A9A9; }

.si-com__slot[data-off="1"] .si-com__label {
    border-color: rgba(120, 135, 150, 0.28);
    box-shadow: none;
}

/* =========================================================== radio editor */

.si-radio-modal {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
}

.si-radio-modal[data-open="1"] { display: block; }

.si-radio-modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.62);
    border: 0;
}

.si-radio-editor {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 380px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #16181B;
    border: 1px solid #373B42;
    border-radius: 7px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.58);
    transform: translateX(-50%);
}

.si-radio-editor__head {
    display: flex;
    align-items: center;
    height: 30px;
    margin-bottom: 10px;
    color: var(--si-text-strong);
}

.si-radio-editor__head strong {
    flex: 1 1 auto;
    color: var(--si-gold);
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.si-radio-editor__close {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: transparent;
    color: var(--si-muted);
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 20px;
    line-height: 24px;
    cursor: pointer;
}

.si-radio-editor__close .si-icon { width: 16px; height: 16px; }

.si-radio-editor__close:hover { color: var(--si-text-strong); border-color: var(--si-border); }

.si-radio-displays {
    display: flex;
    align-items: stretch;
    margin-bottom: 9px;
}

.si-radio-display {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    height: 55px;
    padding: 7px 9px;
    background-color: #050709;
    border: 1px solid #252A30;
    border-radius: 4px;
}

.si-radio-display span,
.si-xpdr-display span {
    margin-bottom: 3px;
    color: var(--si-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.si-radio-display b,
.si-radio-display input,
.si-xpdr-display input {
    min-width: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    outline: 0;
    font-family: Consolas, "Lucida Console", monospace;
    font-size: 18px;
    font-weight: 700;
}

.si-radio-display[data-kind="active"] b { color: var(--si-radio-live); }
.si-radio-display[data-kind="standby"] input { color: #63D8EC; }

.si-radio-xfer {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    background-color: #0F1014;
    color: var(--si-gold);
    border: 1px solid #303337;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;
}

.si-radio-xfer:hover { border-color: var(--si-gold); }
.si-radio-xfer .si-icon { width: 20px; height: 20px; }

.si-radio-keypad {
    display: flex;
    flex-wrap: wrap;
    margin: -3px;
}

.si-radio-key {
    display: flex;
    flex: 1 1 28%;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 3px;
    padding: 0;
    background-color: #0F1014;
    color: var(--si-text-strong);
    border: 1px solid #2F3337;
    border-radius: 5px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.si-radio-key:hover { color: var(--si-gold); border-color: var(--si-gold); }
.si-radio-key:disabled { color: #303337; border-color: #1E2225; cursor: default; }
.si-radio-key--utility { color: var(--si-muted); font-size: 11px; }
.si-radio-key--utility .si-icon { width: 17px; height: 17px; margin: 0 auto; }

.si-radio-editor__actions {
    display: flex;
    flex-wrap: wrap;
    margin: 9px -3px -3px -3px;
}

.si-radio-editor__actions .si-btn {
    flex: 1 1 auto;
    margin: 3px;
}

.si-radio-editor__actions .si-btn[data-active="1"] {
    background-color: rgba(63, 205, 82, 0.13);
    color: var(--si-radio-live);
    border-color: var(--si-radio-live);
}

.si-xpdr-display {
    display: flex;
    flex-direction: column;
    width: 150px;
    height: 58px;
    margin: 0 auto 8px auto;
    padding: 7px 10px;
    background-color: #050709;
    border: 1px solid #252A30;
    border-radius: 4px;
}

.si-xpdr-display input {
    color: #63D8EC;
    font-size: 22px;
    letter-spacing: 0.12em;
    text-align: center;
}

.si-radio-editor__status {
    min-height: 16px;
    margin-top: 8px;
    color: var(--si-radio-live);
    font-size: 11px;
    text-align: center;
}

.si-radio-editor__status[data-tone="bad"] { color: var(--si-bad); }

.si-radio-editor__unavailable {
    padding: 18px 8px;
    color: var(--si-muted);
    font-size: 12px;
    text-align: center;
}

.si-chip {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 22px;
    margin-right: 6px;
    padding: 0 9px;
    background-color: var(--si-card);
    border: 1px solid var(--si-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--si-text-strong);
    white-space: nowrap;
}

.si-chip__key {
    margin-right: 6px;
    font-weight: 700;
    color: var(--si-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.si-chip--accent { border-color: var(--si-gold); color: var(--si-gold); }

.si-seg {
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #101114;
    border: 1px solid #292C32;
    border-radius: 3px;
}

.si-seg__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 0 6px;
    background-color: transparent;
    color: var(--si-muted);
    border: 0;
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.si-seg__opt + .si-seg__opt { border-left: 1px solid #23262B; }
.si-seg__opt:hover { color: var(--si-gold); background-color: #1B1C1F; }
.si-seg__opt[data-active="1"] {
    color: var(--si-gold);
    background-color: #1B1C1F;
}

.si-status {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.si-dot {
    width: 7px;
    height: 7px;
    margin: 0 6px 0 0;
    border-radius: 50%;
    background-color: var(--si-muted);
}

.si-dot[data-state="online"] { background-color: var(--si-ok); }
.si-dot[data-state="loading"] { background-color: var(--si-gold-light); }
.si-dot[data-state="error"] { background-color: var(--si-bad); }

.si-status__text {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--si-muted);
    letter-spacing: 0.02em;
    text-align: left;
    white-space: nowrap;
}

/* =============================================================== workspace */

.si-workspace-shell {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--si-panel);
}

/* Flex-fill the shell. height: 100% fails on the EFB when the parent is a
   flex item, so the rail and comms log collapsed to content height and
   left a blank band under the composer. */
.si-workspace {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.si-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/*
 * Coherent GT-safe icon rail. Icons are inline SVG paths, not an icon font or
 * external web component, so their availability does not depend on anything
 * installed by the simulator.
 */
/* 50px rail, slightly lighter than the workspace. */
.si-side-nav {
    position: relative;
    z-index: 35;
    display: flex;
    flex: 0 0 50px;
    flex-direction: column;
    align-self: stretch;
    align-items: stretch;
    width: 50px;
    min-height: 0;
    padding: 0;
    background-color: var(--si-rail);
    border-right: 1px solid var(--si-hairline);
}

.si-side-nav__main {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 6px;
    /* Visible so hover labels can paint over the workspace. overflow-y:
       auto would force overflow-x to auto as well and clip those labels. */
    overflow: visible;
}

.si-side-nav__main::-webkit-scrollbar { width: 0; }

.si-side-nav__group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 40px pitch, idle ink #E0E0E0, gold on hover - the rail's own behaviour. */
.si-side-nav__button {
    position: relative;
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    margin-bottom: 4px;
    padding: 0;
    background-color: transparent;
    color: var(--si-text-strong);
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    cursor: pointer;
}

.si-side-nav__button:hover {
    background-color: var(--si-panel);
    color: var(--si-gold);
    border-color: var(--si-hairline);
}

.si-side-nav__button[data-active="1"] {
    background-color: var(--si-panel);
    color: var(--si-gold);
    border-color: transparent;
}

/* Desktop links use the same slot rhythm but slightly smaller, cooler ink. */
.si-side-nav__button--link {
    color: #C8CCD4;
}

.si-side-nav__button--link .si-icon {
    width: 18px;
    height: 18px;
}

.si-icon {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.si-icon--collapse { display: none; }

/* The desktop rail replaces an open drawer's glyph with a gold collapse arrow.
   That communicates both state and the direction a second click will move it. */
.si-side-nav__button[data-active="1"] > .si-icon:not(.si-icon--collapse) { display: none; }
.si-side-nav__button[data-active="1"] > .si-icon--collapse { display: block; }

/* Visible on hover as well as available through the native title tooltip. */
.si-side-nav__label {
    display: none;
    position: absolute;
    z-index: 20;
    left: 42px;
    top: 7px;
    padding: 3px 7px;
    background-color: var(--si-card);
    color: var(--si-text);
    border: 1px solid var(--si-border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    pointer-events: none;
}

.si-side-nav__button:hover .si-side-nav__label { display: block; }

.si-zoom {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    margin-top: auto;
    padding: 4px 0 6px 0;
    background-color: transparent;
    border: 0;
    border-top: 1px solid var(--si-hairline);
}

.si-app .si-zoom button.si-zoom__in,
.si-app .si-zoom button.si-zoom__out,
.si-zoom button {
    display: flex !important;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    overflow: visible !important;
    background-color: transparent;
    color: #E0E0E0 !important;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer;
}

.si-zoom button:hover {
    color: var(--si-gold);
    background-color: var(--si-panel);
    border-color: var(--si-hairline);
}

.si-zoom button:disabled { color: #6A6E74; cursor: default; }
.si-zoom button:disabled:hover {
    color: #6A6E74;
    background-color: transparent;
    border-color: transparent;
}
.si-zoom button .si-icon { display: none !important; }
.si-app .si-zoom .si-zoom__mark,
.si-zoom__mark {
    display: block !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: inherit !important;
}

.si-app .si-zoom button.si-zoom__value,
.si-app[data-si-compact="1"] .si-zoom button.si-zoom__value,
.si-app[data-si-orientation="portrait"] .si-zoom button.si-zoom__value,
.si-app[data-si-orientation="portrait"][data-si-compact="1"] .si-zoom button.si-zoom__value {
    display: flex;
    flex: 0 0 18px;
    width: 40px;
    min-width: 0;
    height: 18px;
    overflow: hidden;
    color: #A4A9B0;
    border: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.si-app .si-zoom button.si-zoom__value:hover { color: var(--si-gold); }

/*
 * Foreground drawer. transform and opacity transitions are supported by the
 * Chromium generation used by Coherent GT. The closed panel is translated
 * completely behind the rail; no display toggle means the opening transition
 * can actually animate.
 */
.si-drawer-backdrop {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50px;
    display: block;
    padding: 0;
    background-color: rgba(5, 7, 12, 0.68);
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
}

.si-drawer-backdrop[data-open="1"] {
    opacity: 1;
    pointer-events: auto;
}

/* The desktop drawers are 320px on their own darker surface, edged with a
   hairline and a soft shadow rather than a bright border. */
.si-drawer {
    position: absolute;
    z-index: 12;
    top: 0;
    bottom: 0;
    left: 50px;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 78%;
    min-width: 260px;
    overflow: hidden;
    background-color: var(--si-drawer);
    border-right: 1px solid var(--si-hairline);
    box-shadow: 10px 0 24px rgba(0, 0, 0, 0.5);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 220ms ease-out, visibility 0s linear 220ms;
}

.si-drawer[data-open="1"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 220ms ease-out;
}

.si-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 56px;
    padding: 10px 18px;
    background-color: var(--si-drawer);
    border-bottom: 1px solid var(--si-hairline);
}

.si-drawer__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.si-drawer__heading .si-eyebrow {
    display: block;
    margin-bottom: 2px;
}

.si-drawer__close {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 10px;
    padding: 0;
    background-color: transparent;
    color: var(--si-muted);
    border: 1px solid var(--si-border);
    border-radius: 4px;
    cursor: pointer;
}

.si-drawer__close:hover {
    color: var(--si-gold);
    border-color: var(--si-gold);
}

.si-drawer__close .si-icon { width: 17px; height: 17px; }

.si-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px;
    overflow-x: hidden;
    overflow-y: auto;
}

.si-drawer[data-view="account"] { width: 380px; }
.si-drawer[data-view="controls"] { width: 400px; }
.si-drawer[data-view="mixer"] { width: 320px; }

.si-panel-section { margin-bottom: 16px; }

.si-panel-section__head {
    display: flex;
    align-items: center;
    height: 20px;
    color: var(--si-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.si-panel-section__head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 8px;
    background-color: var(--si-hairline);
}

.si-panel-section__body { min-width: 0; }

.si-panel-row {
    display: flex;
    align-items: center;
    min-height: 54px;
    margin-bottom: 4px;
    padding: 8px 9px;
    background-color: #1B1D21;
    border: 1px solid #24282D;
    border-radius: 5px;
}

.si-panel-row__icon {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    color: var(--si-muted);
}

.si-panel-row__icon .si-icon { width: 17px; height: 17px; }

.si-panel-row__copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.si-panel-row__copy strong { color: var(--si-text-strong); font-size: 12px; }
.si-panel-row__copy small { margin-top: 2px; color: var(--si-muted); font-size: 9px; line-height: 1.3; }

.si-panel-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 25px;
    margin-left: 8px;
    padding: 0 9px;
    background-color: #14171B;
    color: var(--si-text);
    border: 1px solid #30333B;
    border-radius: 4px;
    font-family: inherit;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
}

.si-panel-button:hover { color: var(--si-gold); border-color: var(--si-gold); }
.si-panel-button[disabled] { color: #6A7078; cursor: default; }
.si-panel-button[data-busy="1"] {
    background-color: #8B1E1E;
    color: #ffffff;
    border-color: #C03939;
}

.si-panel-empty {
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
    color: var(--si-muted);
    text-align: center;
}

.si-panel-empty strong { margin-bottom: 5px; color: var(--si-text); font-size: 12px; }
.si-panel-empty span { font-size: 10px; line-height: 1.4; }
.si-panel-empty--feature { align-items: center; padding-top: 36px; }
.si-panel-empty__icon { margin-bottom: 12px; color: var(--si-gold); }
.si-panel-empty__icon .si-icon { width: 28px; height: 28px; }

.si-panel-loading { padding: 28px 12px; color: var(--si-muted); font-size: 11px; text-align: center; }

.si-link-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 16px;
    text-align: center;
}

.si-link-panel__icon { margin-bottom: 12px; color: var(--si-gold); }
.si-link-panel__icon .si-icon { width: 32px; height: 32px; }
.si-link-panel strong { color: var(--si-text-strong); font-size: 14px; }
.si-link-panel p { margin: 7px 0 15px 0; color: var(--si-muted); font-size: 10px; }

.si-panel-note {
    padding: 9px 10px;
    color: var(--si-muted);
    background-color: #17191C;
    border-left: 2px solid #393E45;
    font-size: 9px;
    line-height: 1.45;
}

.si-crew-identity {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 11px;
    background-color: #1B1D21;
    border: 1px solid #272B31;
    border-radius: 6px;
}

.si-crew-identity > span,
.si-crew-identity__photo {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    color: var(--si-gold);
    background-color: #101114;
    border-radius: 50%;
}

.si-crew-identity__photo {
    object-fit: cover;
    border: 0;
}

.si-crew-identity .si-icon { width: 21px; height: 21px; }
.si-crew-identity > div { display: flex; flex-direction: column; }
.si-crew-identity strong { color: var(--si-text-strong); font-size: 12px; }
.si-crew-identity small { margin-top: 3px; color: var(--si-muted); font-size: 9px; }

.si-announce-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    margin: 0 0 4px 0;
    padding: 7px 8px;
    background-color: #1B1D21;
    color: inherit;
    border: 1px solid #25292F;
    border-radius: 4px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.si-announce-row:hover { border-color: var(--si-gold); }
.si-announce-row[disabled] {
    opacity: 0.45;
    cursor: default;
}
.si-announce-row[disabled]:hover { border-color: #25292F; }

.si-announce-row__icon {
    display: flex;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-right: 8px;
    color: #609894;
}

.si-announce-row__icon .si-icon { width: 16px; height: 16px; }
.si-announce-row__copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.si-announce-row__copy strong { color: var(--si-text); font-size: 10px; }
.si-announce-row__copy small { margin-top: 2px; color: var(--si-muted); font-size: 8px; }
.si-announce-row > b { margin-left: 7px; color: #609894; font-size: 7px; letter-spacing: 0.08em; }
.si-announce-row__done {
    display: flex;
    flex: 0 0 16px;
    align-items: center;
    color: #609894;
}
.si-announce-row__done .si-icon { width: 14px; height: 14px; }

.si-back-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 12px 0;
    padding: 0;
    background: transparent;
    color: var(--si-gold);
    border: 0;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.si-back-row .si-icon { width: 14px; height: 14px; margin-right: 6px; }
.si-back-row:hover { color: #f0c14b; }

.si-print-row {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 3px;
    padding: 4px 6px;
    background-color: #1B1D21;
    border: 1px solid #25292F;
    border-radius: 4px;
}

.si-print-row[data-off="1"] { opacity: 0.45; }
.si-print-row[data-sent="1"] { border-color: #2F6A45; }
.si-print-row__copy {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--si-text);
    font-size: 11px;
}
.si-print-row__actions { display: flex; flex: 0 0 auto; }
.si-print-row__actions .si-panel-button { min-width: 44px; height: 22px; }
.si-print-row[data-sent="1"] .si-panel-button[data-si-print-mode="print"] {
    color: var(--si-ok);
    border-color: var(--si-ok);
}

.si-print-status {
    margin-top: 10px;
    color: var(--si-muted);
    font-size: 10px;
    line-height: 1.35;
}

.si-print-status[data-error="1"] { color: #C66058; }

.si-print-doc { margin-top: 8px; }
.si-print-doc__title {
    display: block;
    margin-bottom: 10px;
    color: var(--si-text-strong);
    font-size: 12px;
}
.si-print-doc__paper {
    padding: 8px;
    background-color: #0B0C10;
    border: 1px solid #24282D;
    border-radius: 4px;
}
.si-print-doc__paper img {
    display: block;
    width: 100%;
    height: auto;
    background-color: #fff;
}

.si-drawer[data-view="printer"] { width: 360px; }

.si-operation-summary {
    display: flex;
    margin: 0 0 14px -4px;
    padding: 8px;
    background-color: #16171B;
    border: 1px solid #24282D;
    border-radius: 5px;
}

.si-operation-summary .si-fact { flex: 1 1 0; min-width: 0; margin-left: 4px; }
.si-operation-summary .si-fact__value { overflow: hidden; white-space: nowrap; }

.si-operation-row {
    display: flex;
    align-items: center;
    min-height: 62px;
    margin-bottom: 4px;
    padding: 9px 10px;
    background-color: #1B1D21;
    border: 1px solid #25292F;
    border-radius: 5px;
}

.si-operation-row__copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.si-operation-row strong { color: var(--si-text-strong); font-size: 11px; }
.si-operation-row small { max-width: 235px; margin-top: 3px; color: var(--si-muted); font-size: 8px; line-height: 1.35; }

.si-operation-check {
    cursor: pointer;
}

.si-operation-check__toggle {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    padding: 0;
    background-color: #171A1E;
    border: 1px solid #4A4F56;
    border-radius: 3px;
    cursor: pointer;
}

.si-operation-check__toggle::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    display: block;
    width: 5px;
    height: 10px;
    box-sizing: border-box;
    border-right: 2px solid #1A1D22;
    border-bottom: 2px solid #1A1D22;
    transform: rotate(40deg);
    opacity: 0;
}

.si-operation-check[data-on="1"] .si-operation-check__toggle {
    background-color: var(--si-gold);
    border-color: #E2BE5A;
}

.si-operation-check[data-on="1"] .si-operation-check__toggle::after { opacity: 1; }

.si-toggle {
    position: relative;
    flex: 0 0 39px;
    width: 39px;
    height: 22px;
    margin-left: 9px;
    padding: 0;
    background-color: #25292F;
    border: 1px solid #33383E;
    border-radius: 11px;
    cursor: pointer;
}

.si-toggle i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background-color: #696D73;
    border-radius: 50%;
    transition: left 150ms ease-out;
}

.si-toggle[data-on="1"] { background-color: #334E39; border-color: #5C8865; }
.si-toggle[data-on="1"] i { left: 20px; background-color: #85C68F; }
.si-toggle[disabled] { opacity: 0.65; cursor: default; }

.si-state-badge {
    margin-left: 7px;
    color: var(--si-gold);
    font-size: 8px;
    font-weight: 700;
}

.si-state-badge--live { color: #83C68E; }

/* Setup wizard: an app-contained modal preview of the desktop onboarding flow. */
.si-wizard-modal {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background-color: rgba(5, 7, 10, 0.9);
}

.si-wizard-modal[data-open="1"] { display: flex; }

.si-wizard {
    display: flex;
    width: 820px;
    max-width: 100%;
    height: 530px;
    max-height: 100%;
    overflow: hidden;
    background-color: #15171A;
    border: 1px solid #2A2E36;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7);
}

.si-wizard__rail {
    display: flex;
    flex: 0 0 190px;
    flex-direction: column;
    padding: 20px 16px;
    background-color: #101014;
    border-right: 1px solid #22252B;
}

.si-wizard__brand {
    display: flex;
    align-items: center;
    margin-bottom: 19px;
    color: var(--si-text-strong);
}

.si-wizard__brand > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    color: #090B0D;
    background-color: var(--si-gold);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.si-wizard__brand strong { font-size: 11px; letter-spacing: 0.12em; }
.si-wizard__steps { flex: 1 1 auto; min-height: 0; }

.si-wizard-step {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    color: #7A8088;
}

.si-wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    bottom: -8px;
    left: 10px;
    width: 1px;
    background-color: #23262C;
}

.si-wizard-step__mark {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 21px;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    margin-right: 9px;
    background-color: #16171B;
    border: 1px solid #2C3036;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 700;
}

.si-wizard-step__mark .si-icon { width: 11px; height: 11px; }
.si-wizard-step__label { overflow: hidden; font-size: 9px; white-space: nowrap; }
.si-wizard-step[data-state="active"] { color: var(--si-text-strong); }
.si-wizard-step[data-state="active"] .si-wizard-step__mark { color: #0F1013; background-color: var(--si-gold); border-color: var(--si-gold); }
.si-wizard-step[data-state="done"] { color: #6B6F75; }
.si-wizard-step[data-state="done"] .si-wizard-step__mark { color: #81C68D; border-color: #54835D; }
.si-wizard-step[data-state="done"]::after { background-color: #54835D; }

.si-wizard__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.si-wizard__top {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    height: 44px;
    padding: 0 13px 0 19px;
    color: var(--si-dim);
    border-bottom: 1px solid #22252B;
    font-size: 9px;
    text-transform: uppercase;
}

.si-wizard__top > span { flex: 1 1 auto; }

.si-wizard__top > b {
    margin-right: 11px;
    padding: 3px 6px;
    color: var(--si-gold);
    border: 1px solid #665124;
    border-radius: 3px;
    font-size: 8px;
    letter-spacing: 0.08em;
}

.si-wizard__top button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    color: var(--si-muted);
    border: 1px solid #292C33;
    border-radius: 4px;
    cursor: pointer;
}

.si-wizard__top button .si-icon { width: 14px; height: 14px; }
.si-wizard__top button:hover { color: var(--si-gold); border-color: var(--si-gold); }

.si-wizard__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 30px 42px 22px 42px;
    overflow-x: hidden;
    overflow-y: auto;
}

.si-wizard__footer {
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    height: 58px;
    padding: 0 21px;
    border-top: 1px solid #22252B;
}

.si-wizard__footer > span { flex: 1 1 auto; }
.si-wizard__footer .si-btn { min-width: 95px; }

.si-wizard-link {
    margin-right: 10px;
    padding: 7px 5px;
    background-color: transparent;
    color: var(--si-muted);
    border: none;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
}

.si-wizard-link:hover { color: var(--si-gold); }
.si-wizard-link[disabled] { visibility: hidden; }

.si-wizard-content__header { margin-bottom: 24px; }
.si-wizard-content__header .si-eyebrow { display: block; margin-bottom: 7px; }
.si-wizard-content__header h2,
.si-wizard-hero h2 {
    margin: 0;
    color: var(--si-text-strong);
    font-size: 25px;
    line-height: 1.2;
}

.si-wizard-content__header p,
.si-wizard-hero > p {
    max-width: 520px;
    margin: 8px 0 0 0;
    color: var(--si-muted);
    font-size: 12px;
    line-height: 1.5;
}

.si-wizard-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    justify-content: center;
    text-align: center;
}

.si-wizard-hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 17px;
    color: #0A0C0F;
    background-color: var(--si-gold);
    border: 4px solid #5A4823;
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(201, 150, 42, 0.08);
    font-size: 23px;
    font-weight: 800;
}

.si-wizard-preview-note {
    display: flex;
    align-items: center;
    max-width: 470px;
    margin-top: 25px;
    padding: 10px 13px;
    background-color: #1B1D21;
    border: 1px solid #292D34;
    border-radius: 5px;
    text-align: left;
}

.si-wizard-preview-note strong { flex: 0 0 auto; margin-right: 10px; color: var(--si-gold); font-size: 8px; }
.si-wizard-preview-note span { color: var(--si-muted); font-size: 9px; line-height: 1.4; }

.si-wizard-account {
    display: flex;
    align-items: center;
    padding: 17px;
    background-color: #1B1D21;
    border: 1px solid #292D34;
    border-radius: 6px;
}

.si-wizard-account__avatar {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-right: 13px;
    color: var(--si-gold);
    background-color: #101014;
    border: 1px solid #624E22;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
}

.si-wizard-account > span:last-child { display: flex; flex-direction: column; }
.si-wizard-account strong { color: var(--si-text-strong); font-size: 13px; }
.si-wizard-account small { margin-top: 2px; color: var(--si-muted); font-size: 10px; }
.si-wizard-account b { margin-top: 7px; color: #82C68D; font-size: 9px; }
.si-wizard-account b i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background-color: #66BE78; border-radius: 50%; }

.si-wizard-callout {
    margin-top: 14px;
    padding: 9px 11px;
    color: var(--si-muted);
    background-color: #17191C;
    border-left: 2px solid #3B4249;
    font-size: 9px;
    line-height: 1.45;
}

.si-wizard-field { display: flex; flex-direction: column; margin-bottom: 13px; }
.si-wizard-field > span { margin-bottom: 5px; color: var(--si-dim); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; }
.si-wizard-field select {
    height: 36px;
    padding: 0 10px;
    background-color: #0F1013;
    color: var(--si-text);
    border: 1px solid #2C3138;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
}

.si-wizard-device-test {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    background-color: #1B1D21;
    color: var(--si-text);
    border: 1px solid #292D34;
    border-radius: 5px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.si-wizard-device-test:hover { border-color: var(--si-gold); }
.si-wizard-device-test .si-icon { width: 25px; height: 25px; margin-right: 11px; color: var(--si-gold); }
.si-wizard-device-test > span { display: flex; flex-direction: column; }
.si-wizard-device-test strong { font-size: 11px; }
.si-wizard-device-test small { margin-top: 2px; color: var(--si-muted); font-size: 9px; }

.si-wizard-mic {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #1B1D21;
    border: 1px solid #292D34;
    border-radius: 5px;
}

.si-wizard-mic__icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: 13px;
    color: var(--si-gold);
    background-color: #101214;
    border-radius: 50%;
}

.si-wizard-mic__icon .si-icon { width: 21px; height: 21px; }
.si-wizard-mic > div:last-child { flex: 1 1 auto; min-width: 0; }
.si-wizard-mic strong { color: var(--si-text-strong); font-size: 10px; }
.si-wizard-mic small { color: var(--si-muted); font-size: 8px; }

.si-wizard-meter {
    display: flex;
    align-items: flex-end;
    height: 24px;
    margin: 5px 0;
}

.si-wizard-meter i {
    flex: 1 1 auto;
    height: 8px;
    margin-right: 2px;
    background-color: #2C333D;
    border-radius: 1px;
}

.si-wizard-meter i:nth-child(3n) { height: 15px; background-color: #688A70; }
.si-wizard-meter i:nth-child(4n) { height: 21px; background-color: #81B08A; }
.si-wizard-meter i:nth-child(n+14) { height: 5px; background-color: #262A30; }

.si-wizard-ptt {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px;
    background-color: #1B1D21;
    border: 1px solid #292D34;
    border-radius: 6px;
    text-align: center;
}

.si-wizard-ptt__portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 9px;
    color: var(--si-gold);
    background-color: #101014;
    border: 2px solid #665124;
    border-radius: 50%;
}

.si-wizard-ptt__portrait .si-icon { width: 28px; height: 28px; }
.si-wizard-ptt__role { color: var(--si-gold); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; }
.si-wizard-ptt > strong { margin-top: 5px; color: var(--si-text-strong); font-size: 12px; }

.si-wizard-listening {
    display: flex;
    align-items: center;
    margin-top: 13px;
    padding: 7px 10px;
    color: #9AA0A8;
    background-color: #121417;
    border: 1px solid #2C3037;
    border-radius: 4px;
    font-size: 9px;
}

.si-wizard-listening i {
    width: 7px;
    height: 7px;
    margin-right: 6px;
    background-color: var(--si-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(201, 150, 42, 0.1);
}

.si-wizard-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 132px;
    margin-bottom: 17px;
    color: var(--si-gold);
    background-color: #0B0C10;
    border: 4px solid #282C32;
    border-radius: 13px;
    box-shadow: 12px 12px 25px rgba(0, 0, 0, 0.35);
}

.si-wizard-phone .si-icon { width: 31px; height: 31px; margin-bottom: 9px; }
.si-wizard-phone span { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; }
.si-wizard-feature-list { display: flex; margin-top: 20px; }
.si-wizard-feature-list span { margin: 0 4px; padding: 6px 9px; color: var(--si-text); background-color: #1B1D21; border: 1px solid #292D34; border-radius: 4px; font-size: 9px; }

.si-wizard-checklist > div {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    padding: 10px;
    background-color: #1B1D21;
    border: 1px solid #292D34;
    border-radius: 5px;
}

.si-wizard-checklist > div > span {
    display: flex;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-right: 10px;
    color: #7FC28A;
    background-color: #1D2A20;
    border-radius: 50%;
}

.si-wizard-checklist .si-icon { width: 15px; height: 15px; }
.si-wizard-checklist p { display: flex; flex-direction: column; margin: 0; }
.si-wizard-checklist strong { color: var(--si-text-strong); font-size: 10px; }
.si-wizard-checklist small { margin-top: 2px; color: var(--si-muted); font-size: 9px; }

.si-wizard-finish-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 17px;
    color: #91D29B;
    background-color: #1B2B20;
    border: 2px solid #54835D;
    border-radius: 50%;
}

.si-wizard-finish-mark .si-icon { width: 34px; height: 34px; }

.si-app[data-si-orientation="portrait"] .si-wizard-modal { padding: 8px; }
.si-app[data-si-orientation="portrait"] .si-wizard { height: 100%; }
.si-app[data-si-orientation="portrait"] .si-wizard__rail { display: none; }
.si-app[data-si-orientation="portrait"] .si-wizard__body { padding: 24px 22px 18px 22px; }
.si-app[data-si-orientation="portrait"] .si-wizard-feature-list { flex-wrap: wrap; justify-content: center; }
.si-app[data-si-orientation="portrait"] .si-wizard-feature-list span { margin-bottom: 6px; }

.si-drawer__lead {
    margin-bottom: 14px;
    color: var(--si-text);
}

.si-drawer__cards {
    display: flex;
    flex-wrap: wrap;
    margin: -4px;
}

.si-drawer__card {
    flex: 1 1 180px;
    min-width: 160px;
    margin: 4px;
    padding: 12px;
    background-color: var(--si-card);
    border: 1px solid var(--si-border);
    border-radius: 6px;
}

.si-drawer__card .si-card-title {
    margin: 5px 0 6px 0;
}

.si-drawer__section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--si-border);
}

.si-drawer__section .si-body {
    margin-top: 7px;
    font-size: 13px;
}

/* ===================================================================== tabs */

.si-tabs {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    height: 26px;
    padding: 0 6px;
    background-color: var(--si-panel);
    border-bottom: 1px solid var(--si-border);
    overflow: visible;
    flex-wrap: nowrap;
    position: relative;
    z-index: 6;
}

.si-tabs::-webkit-scrollbar { height: 0; }

.si-tab {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 100%;
    margin-right: 2px;
    padding: 0 8px;
    background: transparent;
    border: none;
    /* The active marker is an inset shadow rather than a border so the tab does
       not change height when it is selected. */
    box-shadow: inset 0 -2px 0 transparent;
    color: var(--si-muted);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.si-tab:hover { color: var(--si-text); }

.si-tab[data-active="1"] {
    color: var(--si-gold);
    box-shadow: inset 0 -2px 0 var(--si-gold);
}

.si-tab[data-overflow="1"] { display: none; }

.si-tab-more {
    display: none;
    position: relative;
    flex: 0 0 auto;
    height: 100%;
}

.si-tabs[data-overflow="1"] .si-tab-more { display: flex; }

.si-tab--more {
    width: 28px;
    padding: 0;
    justify-content: center;
}

.si-tab--more .si-icon {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.si-tab-more[data-active="1"] .si-tab--more {
    color: var(--si-gold);
    box-shadow: inset 0 -2px 0 var(--si-gold);
}

.si-tab-more__list {
    display: none;
    position: absolute;
    z-index: 12;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 140px;
    margin-top: 2px;
    padding: 4px 0;
    background-color: #1B1B1B;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.si-tab-more[data-open="1"] .si-tab-more__list { display: block; }

.si-app[data-tab-more="1"] .si-main,
.si-app[data-tab-more="1"] .si-workspace {
    overflow: visible;
}

.si-app[data-tab-more="1"] .si-tabs { z-index: 20; }

.si-tab-more__item {
    display: block;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    color: #e0e0e0;
    border: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.si-tab-more__item:hover { background-color: #252525; }

.si-tab-more__item[data-active="1"] { color: var(--si-gold); }

/* ==================================================================== views */

.si-views {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.si-view {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.si-view[data-active="1"] { display: flex; }

.si-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}

.si-page__banner {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--si-gold);
    border-radius: 8px;
    background: #1B1B1B;
    color: var(--si-text);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.si-page__banner--skyops {
    border-color: #3a6fa4;
    background: #2a3a4a;
    color: #ffffff;
}

.si-page__note {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    color: var(--si-muted);
    font-size: 12px;
    text-align: center;
}

.si-page__note a { color: var(--si-gold); text-decoration: none; }

.si-skyops-section {
    margin-bottom: 8px;
    border: 1px solid #303030;
    border-radius: 8px;
    overflow: hidden;
}

.si-skyops-section__title {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background-color: #252525;
    border: none;
    color: var(--si-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.si-skyops-section[data-kind="request"] .si-skyops-section__title { color: #8a8ab8; box-shadow: inset 4px 0 0 #8a8ab8; }
.si-skyops-section[data-kind="types"] .si-skyops-section__title { color: #4e5862; box-shadow: inset 4px 0 0 #4e5862; }
.si-skyops-section[data-kind="overview"] .si-skyops-section__title { color: #5a9fd4; box-shadow: inset 4px 0 0 #5a9fd4; }
.si-skyops-section[data-kind="details"] .si-skyops-section__title { color: #cc7a00; box-shadow: inset 4px 0 0 #cc7a00; }
.si-skyops-section[data-kind="navigation"] .si-skyops-section__title { color: #4a9b9b; box-shadow: inset 4px 0 0 #4a9b9b; }

.si-skyops-section__body {
    display: none;
    padding: 10px;
    background-color: #1B1B1B;
}

.si-skyops-section[data-open="1"] .si-skyops-section__body { display: block; }

.si-news-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #5A5A5A;
    border-left: 5px solid #d9bb00;
    border-radius: 8px;
    background-color: #1B1B1B;
}

.si-news-item[data-kind="announcement"] { border-left-color: #00d900; }

.si-news-item__head { margin-bottom: 8px; }

.si-news__chip {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: #252525;
    color: #c7ac00;
    font-size: 11px;
    font-weight: 700;
}

.si-news-item[data-kind="announcement"] .si-news__chip { color: #47b047; }

.si-news-item__meta {
    display: inline-block;
    margin-left: 4px;
    color: #8A8A8A;
    font-size: 11px;
}

.si-news-item__body {
    margin: 0;
    color: var(--si-text);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.si-news-item__update {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(142, 142, 142, 0.3);
    color: #8A8A8A;
    font-size: 12px;
}

.si-news-item__update strong { color: rgb(60, 199, 160); }

.si-news-item__link {
    display: inline-block;
    margin-top: 8px;
    color: var(--si-gold);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

/* Grey rather than gold: the desktop client's scrollbars are chrome, not
   accent, and a gold bar down the side of the transcript reads as a highlight. */
.si-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.si-app ::-webkit-scrollbar-track { background: var(--si-panel); }

.si-app ::-webkit-scrollbar-thumb {
    background: #303032;
    border: 2px solid var(--si-panel);
    border-radius: 6px;
}

.si-app ::-webkit-scrollbar-thumb:hover { background: #3C3C3F; }

/* ================================================================ controls */

/* 6px corners throughout. */
.si-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 14px;
    background-color: var(--si-card);
    color: var(--si-text);
    border: 1px solid var(--si-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.si-btn:hover {
    background-color: #29292C;
    color: var(--si-text);
    border-color: #3A3A3C;
}

/* Gold fill with dark text, then the darker gold on hover - the wizard's
   primary call to action. */
.si-btn--primary {
    background-color: var(--si-gold);
    color: var(--si-chrome);
    border-color: var(--si-gold);
    font-weight: 700;
}

.si-btn--primary:hover {
    background-color: var(--si-gold-dark);
    color: var(--si-chrome);
    border-color: var(--si-gold-dark);
}

.si-btn--quiet {
    background-color: transparent;
    color: var(--si-muted);
    border-color: var(--si-border);
}

.si-btn--quiet:hover {
    background-color: var(--si-card);
    color: var(--si-text);
    border-color: var(--si-border);
}

.si-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

.si-btn[disabled]:hover {
    background-color: transparent;
    color: var(--si-gold);
    border-color: var(--si-gold);
}

.si-input,
.si-select {
    height: 26px;
    padding: 0 9px;
    background-color: var(--si-card);
    color: var(--si-text);
    border: 1px solid var(--si-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
}

.si-input:focus,
.si-select:focus {
    border-color: var(--si-gold);
    outline: none;
}

.si-input::-webkit-input-placeholder { color: var(--si-muted); }

/* ==================================================================== cards */

.si-card {
    margin-bottom: 10px;
    padding: 12px;
    background-color: var(--si-card);
    border: 1px solid var(--si-border);
    border-radius: 6px;
}

.si-card__head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--si-border);
}

.si-card__head .si-eyebrow { flex: 1 1 auto; }

.si-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Definition-list pairs used across the airport and flight cards. */
.si-facts {
    display: flex;
    flex-wrap: wrap;
    margin: -4px;
}

.si-fact {
    flex: 1 1 110px;
    min-width: 100px;
    margin: 4px;
    padding: 8px 10px;
    background-color: var(--si-panel);
    border: 1px solid var(--si-border);
    border-radius: 6px;
}

.si-fact__key {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--si-gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.si-fact__value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--si-text);
    word-break: break-word;
}

.si-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    text-align: center;
}

.si-empty .si-body { max-width: 420px; margin-top: 8px; }

.si-empty--checklists .si-body { max-width: 560px; }

.si-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

.si-empty__actions .si-btn { margin: 4px; }

/* ============================================================== connection */

.si-gate {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    text-align: center;
}

.si-gate__mark {
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--si-gold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.si-gate__title { margin-bottom: 10px; }

.si-gate__body {
    max-width: 460px;
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--si-muted);
}

.si-gate__steps {
    max-width: 460px;
    margin: 12px 0 18px 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.si-gate__steps li {
    position: relative;
    margin-bottom: 7px;
    padding-left: 20px;
    font-size: 13px;
    color: var(--si-muted);
}

.si-gate__steps li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 6px;
    height: 6px;
    background-color: var(--si-gold);
}

.si-gate__detail {
    margin-top: 14px;
    font-size: 11px;
    color: var(--si-muted);
    opacity: 0.75;
}

.si-gate__help {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    font-size: 12px;
    color: var(--si-gold);
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto;
}

.si-app a[href][target="_blank"] {
    cursor: pointer;
    pointer-events: auto;
}

.si-spinner {
    width: 24px;
    height: 24px;
    margin-bottom: 14px;
    border: 2px solid var(--si-border);
    border-top-color: var(--si-gold);
    border-radius: 50%;
    animation: si-spin 900ms linear infinite;
}

@keyframes si-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ====================================================================== ATC */

/* Transcript-first: the log takes every pixel that the docked strips above and
   below it do not need. Each strip can fold to a header so a short EFB panel
   can give that space back. */
.si-atc {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.si-broadcast {
    display: none;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    margin: 8px 10px 0 10px;
    padding: 7px 8px 7px 10px;
    background-color: #1B1B1B;
    color: var(--si-text);
    border: 1px solid #E0B833;
    border-radius: 8px;
}

.si-broadcast[data-open="1"] { display: flex; }

.si-broadcast__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.si-broadcast__title {
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #E0B833;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.si-broadcast__message {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.si-broadcast__dismiss {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    background-color: transparent;
    color: inherit;
    border: 0;
    cursor: pointer;
}

.si-broadcast__dismiss .si-icon { width: 12px; height: 12px; }
.si-broadcast__dismiss:hover { color: #E0B833; }

.si-atc > [data-si-atc-info] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 0;
}

.si-fold {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin: 8px 10px 0 10px;
    background-color: #1B1B1B;
    border: 1px solid #282828;
    border-radius: 3px;
}

/* Keep Click-to-Talk dropdown menus above lower ATC folds. */
.si-fold[data-si-fold="actions"] { z-index: 22; }
.si-fold[data-si-fold="actions"][data-open="1"] { z-index: 30; }
/* Side drawers are true foreground overlays and should remain on top. */
.si-app[data-drawer-open="1"] .si-fold[data-si-fold="actions"] { z-index: 1; }

.si-fold--fill {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 8px;
}

.si-fold--fill[data-open="0"] {
    flex: 0 0 auto;
}

.si-fold__head {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
}

.si-fold__toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    background: transparent;
    color: var(--si-text);
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.si-fold[data-open="1"] .si-fold__head {
    border-bottom: 1px solid #2C2C2C;
}

.si-fold[data-open="0"] .si-log-tools { display: none; }

.si-log-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0 8px 0 0;
}

.si-log-filter {
    margin: 0;
}

.si-net-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 28px;
    margin: 0 8px 0 0;
}

.si-net-status:empty { display: none; }

.si-net-status__icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    cursor: default;
}

.si-net-status__icon:first-child { margin-left: 0; }

.si-net-status__icon .si-icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.6;
}

.si-net-status__icon:hover::after {
    content: attr(title);
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    min-width: 120px;
    max-width: 220px;
    padding: 5px 7px;
    margin-top: 2px;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    color: #f0f0f0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    pointer-events: none;
    -coherent-font-sdf: off;
}

.si-fold__toggle:hover { color: var(--si-gold); }

.si-fold__title {
    flex: 0 0 auto;
    color: var(--si-text-strong);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.si-fold__hint {
    flex: 0 1 auto;
    min-width: 64px;
    margin-left: 8px;
    overflow: hidden;
    color: var(--si-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.si-fold__hint:empty { display: none; }

.si-taxituned {
    display: block;
    flex: 0 0 auto;
    height: 28px;
    margin: 0 0 0 6px;
    color: #d8ffec;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 28px;
    white-space: nowrap;
    -coherent-font-sdf: off;
}

.si-taxituned[hidden] { display: none; }

.si-taxituned__tm {
    display: inline;
    margin-left: 1px;
    font-size: 7px;
    font-weight: 700;
    vertical-align: super;
}

.si-fold__mark {
    display: block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    color: var(--si-dim);
    transform: rotate(-90deg);
}

.si-fold[data-open="1"] .si-fold__mark { transform: rotate(0deg); }

.si-fold__mark .si-icon { width: 12px; height: 12px; }

.si-fold[data-open="0"] .si-fold__body { display: none; }

.si-fold--fill[data-open="1"] .si-fold__body,
.si-fold--fill[data-open="1"] .si-log {
    flex: 1 1 auto;
    min-height: 0;
}

.si-atc-info__airport { padding: 6px 10px 7px 10px; }

.si-atc-info__title {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    color: var(--si-text);
    font-size: 12px;
}

.si-atc-info__title strong {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.si-atc-info__title span {
    flex: 0 0 auto;
    margin-left: 12px;
    color: var(--si-muted);
}

.si-atc-frequency-grid {
    display: flex;
    flex-wrap: wrap;
}

.si-atc-frequency {
    display: flex;
    flex: 0 0 25%;
    align-items: baseline;
    width: 25%;
    min-width: 70px;
    height: 18px;
    padding: 0 3px;
    overflow: hidden;
    background-color: transparent;
    color: var(--si-muted);
    border: 0;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.si-atc-frequency:hover,
.si-atc-frequency[data-active="1"] {
    background-color: rgba(63, 205, 82, 0.11);
    color: var(--si-radio-live);
    box-shadow: inset 2px 0 0 var(--si-radio-live);
}

.si-atc-frequency[data-active="1"] .si-atc-frequency__station,
.si-atc-frequency[data-active="1"] .si-atc-frequency__value {
    color: var(--si-radio-live);
}

.si-atc-frequency__station {
    min-width: 0;
    margin-right: 4px;
    overflow: hidden;
    color: var(--si-text-strong);
    font-size: 9px;
    font-weight: 700;
}

.si-atc-frequency__value {
    flex: 0 0 auto;
    font-family: Consolas, "Lucida Console", monospace;
    font-size: 10px;
}

.si-atc-info__empty { color: var(--si-dim); font-size: 11px; }

.si-atc-facts {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 6px 6px 6px;
}

.si-atc-facts[data-si-fact-cols="4"] .si-atc-fact {
    flex-basis: 25%;
    width: 25%;
}

.si-atc-facts[data-si-fact-cols="2"] .si-atc-fact {
    flex-basis: 50%;
    width: 50%;
    height: auto;
    min-height: 18px;
    white-space: normal;
}

.si-atc-fact-probe {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    display: block;
    width: auto;
    height: auto;
    padding: 0 4px;
    overflow: visible;
    white-space: nowrap;
    font-size: 10px;
    pointer-events: none;
}

.si-atc-fact {
    display: flex;
    flex: 0 0 33.333%;
    align-items: baseline;
    width: 33.333%;
    min-width: 0;
    height: 18px;
    padding: 0 4px;
    overflow: hidden;
    color: var(--si-muted);
    font-size: 10px;
    white-space: nowrap;
}

.si-atc-fact__key {
    flex: 0 0 auto;
    margin-right: 4px;
    color: var(--si-text-strong);
    font-size: 9px;
    font-weight: 700;
}

.si-atc-fact__value {
    flex: 0 0 auto;
}

.si-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 6px 8px 2px 8px;
}

.si-actions__phase {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 102px;
    height: 30px;
    margin: -2px 12px 4px 0;
    padding: 0 0 0 9px;
    color: var(--si-text);
    border-left: 2px solid var(--si-gold);
    white-space: nowrap;
}

.si-actions__phase small {
    color: var(--si-dim);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 10px;
    text-transform: uppercase;
}

.si-actions__phase strong {
    color: var(--si-gold);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
}

.si-action {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 20px;
    margin: 0 4px 4px 0;
    padding: 0 8px;
    background-color: #325060;
    color: #D8E4EC;
    border: 1px solid #5B88A4;
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.si-action:hover {
    color: #F0F6FA;
    background-color: #3C6278;
    border-color: #6A9DB8;
}

.si-action[data-busy="1"] { opacity: 0.5; cursor: default; }

.si-action-menu {
    position: relative;
    display: flex;
    align-items: center;
    height: 20px;
    margin: 0 4px 4px 0;
}

.si-action-menu .si-action { margin: 0; }

.si-action__caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 4px solid #8AADC4;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    vertical-align: middle;
}

.si-action-menu__list {
    display: none;
    position: absolute;
    z-index: 40;
    top: 100%;
    left: 0;
    min-width: 150px;
    margin-top: 2px;
    padding: 2px 0;
    background-color: #1B1B1B;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.si-action-menu[data-open="1"] .si-action-menu__list { display: block; }

.si-action-menu__item {
    display: block;
    width: 100%;
    padding: 5px 10px;
    background: transparent;
    color: #e0e0e0;
    border: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.si-action-menu__item:hover { background-color: #3A5466; }

/* Transcript */

.si-log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
}

.si-msg {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    margin-bottom: 6px;
    overflow: hidden;
    background-color: transparent;
    border: none;
    border-left: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 12px;
}

.si-msg:last-child { margin-bottom: 0; }

.si-msg__source {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    max-width: 46%;
    min-width: 0;
    padding: 5px 6px;
    overflow: hidden;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.si-msg__source-inner {
    display: block;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

.si-msg__freq {
    display: inline;
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    border: none;
    font-family: Consolas, "Lucida Console", monospace;
    font-size: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.si-msg__freq--label {
    font-family: inherit;
    text-decoration: none;
    cursor: default;
}

.si-msg__freq:hover,
.si-inline-freq:hover { text-decoration: underline; }

.si-inline-freq {
    display: inline;
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.si-msg__station {
    display: inline;
    white-space: normal;
    word-wrap: break-word;
}

.si-msg__freq + .si-msg__station::before { content: " : "; }

.si-msg__text {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 8px;
    padding: 6px 10px;
    background-color: #2E2F33;
    border: 1px solid #3A3B40;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.35;
    word-wrap: break-word;
}

.si-msg--atis .si-msg__text { white-space: pre-wrap; }
.si-msg__direction { font-weight: 700; }

/* Composer */

/* Bottom command bar: destination chip, text field, transmit. */
.si-composer {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    min-height: 50px;
    height: auto;
    margin: 0;
    padding: 0 12px;
    background-color: var(--si-panel);
    border: none;
    border-top: 1px solid var(--si-divider);
}

/* Native <select> does not open in Coherent GT. Chip + custom menu. */
.si-dest {
    position: relative;
    flex: 0 0 auto;
    margin-right: 8px;
}

.si-dest__chip {
    display: flex;
    align-items: center;
    min-width: 92px;
    height: 26px;
    padding: 0 8px;
    background-color: #292929;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.si-dest__chip:hover,
.si-dest[data-open="1"] .si-dest__chip { background-color: #303030; }

.si-dest__caret {
    display: block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #C8CCD4;
}

.si-dest[data-open="1"] .si-dest__caret {
    border-top: none;
    border-bottom: 5px solid #C8CCD4;
}

.si-dest__menu {
    display: none;
    position: absolute;
    left: 0;
    bottom: 30px;
    z-index: 20;
    min-width: 220px;
    padding: 4px 0;
    background-color: #181A1E;
    border: 1px solid #25292F;
    border-radius: 4px;
}

.si-dest[data-open="1"] .si-dest__menu { display: block; }

.si-dest__rule {
    height: 1px;
    margin: 4px 8px;
    background-color: #25292F;
}

.si-dest__item {
    display: block;
    position: relative;
    width: 100%;
    padding: 6px 12px 6px 28px;
    background: transparent;
    color: #E2E5EB;
    border: none;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.si-dest__item:hover { background-color: #202225; }

.si-dest__item[data-disabled="1"] {
    color: #44464C;
    cursor: default;
}

.si-dest__item[data-disabled="1"]:hover { background-color: transparent; }

.si-dest__item[data-active="1"] {
    color: var(--si-gold);
}

.si-dest__item[data-active="1"]::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--si-gold);
    border-bottom: 2px solid var(--si-gold);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Custom menu: Coherent GT does not give a reliable native context menu. */
.si-tune-menu {
    display: none;
    position: absolute;
    z-index: 50;
    min-width: 168px;
    padding: 4px 0;
    background-color: #181A1E;
    border: 1px solid #25292F;
    border-radius: 4px;
    -webkit-user-select: none;
    user-select: none;
}

.si-tune-menu[data-open="1"] { display: block; }

.si-tune-menu__item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    color: #E2E5EB;
    border: none;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.si-tune-menu__item:hover { background-color: #202225; }

.si-composer .si-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    margin-right: 8px;
    background-color: var(--si-glass);
    color: #FFEBCD;
    border-color: var(--si-hairline);
    font-weight: 600;
}

.si-composer .si-input::-webkit-input-placeholder { color: #453E37; }

.si-composer .si-btn--transmit {
    flex: 0 0 42px;
    width: 42px;
    padding: 0;
}

.si-btn--transmit .si-icon { width: 17px; height: 17px; }

/* On-screen keyboard */

.si-kb-toggle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 26px;
    margin-right: 8px;
    padding: 0;
    background-color: #292929;
    color: #C8CCD4;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.si-kb-toggle:hover { background-color: #303030; color: #ffffff; }

.si-kb-toggle[data-active="1"] {
    background-color: #303030;
    color: var(--si-gold);
    border-color: var(--si-gold);
}

.si-kb-toggle .si-icon { width: 18px; height: 18px; }

.si-airport__kb { display: none; height: 28px; background-color: #252525; border-color: #303030; border-radius: 4px; }
.si-airport__kb[data-show="1"] { display: flex; }

/* Docked under the workspace rather than floating over it, so the field
   being typed into and the newest comms stay in view. */
.si-kb {
    display: none;
    flex: 0 0 auto;
    padding: 6px 4px 7px 4px;
    background-color: var(--si-chrome);
    border-top: 1px solid var(--si-divider);
    -webkit-user-select: none;
    user-select: none;
}

.si-kb[data-open="1"] { display: block; }

.si-kb__bar {
    display: flex;
    align-items: center;
    height: 26px;
    margin: 0 2px 6px 2px;
    padding: 0 9px;
    background-color: var(--si-glass);
    border: 1px solid var(--si-hairline);
    border-radius: 6px;
}

.si-kb__target {
    flex: 0 0 auto;
    margin-right: 9px;
    color: var(--si-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.si-kb__preview {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    overflow: hidden;
    color: #FFEBCD;
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
    white-space: pre;
}

.si-kb__placeholder { color: #5A5047; }
.si-kb__sel { background-color: rgba(212, 168, 48, 0.35); }

@-webkit-keyframes si-kb-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes si-kb-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

.si-kb__caret {
    display: inline-block;
    width: 2px;
    height: 15px;
    margin: 0 -1px;
    vertical-align: middle;
    background-color: var(--si-gold);
    -webkit-animation: si-kb-blink 1s steps(1) infinite;
    animation: si-kb-blink 1s steps(1) infinite;
}

.si-kb__count {
    flex: 0 0 auto;
    margin-left: 9px;
    color: var(--si-muted);
    font-size: 10px;
}

.si-kb__row { display: flex; margin-bottom: 4px; }
.si-kb__row:last-child { margin-bottom: 0; }

.si-kb__key {
    display: flex;
    flex: 1 1 0px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 30px;
    margin: 0 2px;
    padding: 0 2px;
    overflow: hidden;
    background-color: #292929;
    color: var(--si-text);
    border: 1px solid #333336;
    border-radius: 5px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.si-kb__key:hover { background-color: #333336; border-color: #3E3E42; }

.si-kb__key--cmd {
    background-color: #1F1F21;
    color: #C8CCD4;
    font-size: 11px;
}

.si-kb__key--w15 { flex-grow: 1.5; }
.si-kb__key--w175 { flex-grow: 1.75; }
.si-kb__key--w2 { flex-grow: 2; }
.si-kb__key--w225 { flex-grow: 2.25; }
.si-kb__key--w3 { flex-grow: 3; }
.si-kb__key--w6 { flex-grow: 6; }

.si-kb__key--space { color: var(--si-dim); }

.si-kb__key[data-on="1"] {
    color: var(--si-gold);
    border-color: var(--si-gold);
}

.si-kb__key[data-disabled="1"] { opacity: 0.45; }

.si-kb__key--apply {
    background-color: var(--si-gold);
    color: var(--si-chrome);
    border-color: var(--si-gold);
    font-weight: 700;
}

.si-kb__key--apply:hover {
    background-color: var(--si-gold-dark);
    border-color: var(--si-gold-dark);
}

.si-kb__key:active,
.si-kb__key[data-down="1"] {
    background-color: var(--si-gold-dark);
    color: var(--si-chrome);
    border-color: var(--si-gold);
}

.si-kb__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.si-kb__text--iconed { margin-left: 5px; }
.si-kb__text--short { display: none; }

/* Radios */

.si-radios { display: flex; flex-wrap: wrap; margin: -3px; }

.si-freq {
    display: flex;
    flex: 1 1 150px;
    align-items: center;
    min-width: 140px;
    margin: 3px;
    padding: 7px 9px;
    background-color: var(--si-panel);
    border: 1px solid var(--si-border);
    border-radius: 6px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.si-freq:hover { border-color: var(--si-gold); }

.si-freq[data-active="1"] { border-color: var(--si-gold); background-color: var(--si-chrome); }

.si-freq__body { flex: 1 1 auto; min-width: 0; }

.si-freq__station {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--si-gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.si-freq__name {
    display: block;
    font-size: 12px;
    color: var(--si-muted);
    white-space: nowrap;
    overflow: hidden;
}

.si-freq__value {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--si-text);
}

/* =============================================================== checklists */

/* Two panes in landscape. Portrait checklists use a bottom sheet instead. */
.si-split { display: flex; flex: 1 1 auto; min-height: 0; }

.si-split__side {
    flex: 0 0 232px;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    border-right: 1px solid var(--si-border);
}

.si-split__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.si-check-sheet__scroll {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
}

.si-check-sheet__chrome,
.si-check-sheet__backdrop { display: none; }

.si-list-btn {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    padding: 8px 10px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: var(--si-muted);
    cursor: pointer;
}

.si-list-btn:hover { background-color: var(--si-card); color: var(--si-text); }

.si-list-btn[data-active="1"] {
    background-color: var(--si-card);
    border-color: var(--si-gold);
    color: var(--si-text);
    font-weight: 600;
}

.si-list-btn__meta { display: block; margin-top: 2px; font-size: 11px; color: var(--si-muted); }

.si-list-btn[data-running="1"] { color: #b6ffce; }
.si-list-btn[data-running="1"] .si-list-btn__meta { color: #7dcea0; }
.si-list-btn[data-complete="1"] { color: #8DD198; }

.si-checklists {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.si-checklists__bar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--si-border);
}

.si-checklists__modes {
    display: flex;
    flex: 0 0 auto;
    margin-right: 12px;
}

.si-checklists__mode {
    padding: 4px 10px;
    background-color: var(--si-card);
    color: var(--si-muted);
    border: 1px solid var(--si-border);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.si-checklists__mode:first-child { border-radius: 4px 0 0 4px; }
.si-checklists__mode:last-child { border-radius: 0 4px 4px 0; border-left: none; }

.si-checklists__mode[data-active="1"] {
    color: #0B0B0B;
    background-color: #5a9e6a;
    border-color: #5a9e6a;
}

.si-checklists__legend {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.si-checklists__legend-item {
    display: flex;
    align-items: center;
    margin: 0 12px 0 0;
    color: var(--si-muted);
    font-size: 10px;
    white-space: nowrap;
}

.si-checklists__legend-dot {
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
}

.si-checklists__legend-info {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    padding: 0;
    background-color: transparent;
    color: var(--si-gold);
    border: none;
    cursor: pointer;
}

.si-checklists__legend-info .si-icon { width: 15px; height: 15px; }

.si-checklists__legend-info:hover { color: var(--si-text-strong); }

.si-checklists__status {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    color: var(--si-muted);
    font-size: 11px;
}

.si-check-stop {
    background-color: #b85555;
    color: #ffffff;
    border-color: #b85555;
}

.si-check-stop:hover { background-color: #c96a6a; }

.si-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--si-border);
    font-family: inherit;
    text-align: left;
    cursor: default;
}

button.si-item { cursor: pointer; }

.si-item:last-child { border-bottom: none; }

.si-item[data-current="1"] {
    background-color: #2a5434;
    box-shadow: inset 4px 0 0 #4CAF50;
    -webkit-animation: si-check-current 2s infinite;
    animation: si-check-current 2s infinite;
}

@-webkit-keyframes si-check-current {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes si-check-current {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

.si-item[data-done="1"],
.si-item[data-manual="1"] { opacity: 0.72; }

.si-item[data-done="1"] .si-item__text,
.si-item[data-manual="1"] .si-item__text { color: #8DD198; }

.si-item__dot,
.si-item__box {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin: 4px 8px 0 0;
    border-radius: 50%;
}

.si-item__box {
    position: relative;
    border: 1px solid #44464C;
    border-radius: 2px;
    background-color: transparent;
}

.si-item[data-manual="1"] .si-item__box {
    border-color: #00e676;
    background-color: #00e676;
}

.si-item[data-manual="1"] .si-item__box:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 0;
    width: 3px;
    height: 6px;
    border-right: 2px solid #0B0B0B;
    border-bottom: 2px solid #0B0B0B;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.si-item__index {
    flex: 0 0 26px;
    font-size: 11px;
    font-weight: 600;
    color: var(--si-muted);
}

.si-item[data-current="1"] .si-item__index { color: #b6ffce; }

.si-item__body {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
}

.si-item__text { flex: 0 1 auto; font-size: 13px; color: var(--si-text); }

.si-item[data-current="1"] .si-item__text,
.si-item[data-current="1"] .si-item__reply {
    color: #b6ffce;
    font-weight: 700;
}

.si-item__reply {
    flex: 1 1 auto;
    margin-left: 8px;
    color: var(--si-muted);
    font-size: 12px;
    text-align: right;
}

.si-item__type { flex: 0 0 auto; margin-left: 8px; font-size: 11px; color: var(--si-muted); }

.si-app[data-si-orientation="portrait"] .si-checklists__bar,
.si-app[data-si-compact="1"] .si-checklists__bar { flex-wrap: wrap; }

.si-app[data-si-orientation="portrait"] .si-checklists__legend,
.si-app[data-si-compact="1"] .si-checklists__legend,
.si-app[data-si-orientation="portrait"] .si-checklists__status,
.si-app[data-si-compact="1"] .si-checklists__status {
    width: 100%;
    margin-top: 6px;
    margin-left: 0;
}

/* Portrait: list only, with the selected checklist in a bottom sheet. */
.si-app[data-si-orientation="portrait"] .si-checklists .si-split {
    position: relative;
}

.si-app[data-si-orientation="portrait"] .si-checklists .si-split__side {
    flex: 1 1 auto;
    max-height: none;
    border-bottom: none;
}

.si-app[data-si-orientation="portrait"] .si-checklists .si-check-sheet__backdrop {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 0;
    background-color: rgba(5, 7, 12, 0.55);
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
}

.si-app[data-si-orientation="portrait"] .si-checklists[data-sheet="1"] .si-check-sheet__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.si-app[data-si-orientation="portrait"] .si-checklists .si-split__main {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    background-color: var(--si-panel);
    border: none;
    box-shadow: none;
    transform: translateY(110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms ease-out, visibility 0s linear 220ms;
}

.si-app[data-si-orientation="portrait"] .si-checklists[data-sheet="1"] .si-split__main {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 220ms ease-out;
}

.si-app[data-si-orientation="portrait"] .si-check-sheet__chrome {
    display: block;
    flex: 0 0 auto;
}

.si-check-sheet__close {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 8px 0 2px 0;
    background-color: transparent;
    border: none;
    color: var(--si-muted);
    cursor: pointer;
}

.si-check-sheet__close:hover { color: var(--si-text); }

.si-check-sheet__grip {
    width: 36px;
    height: 4px;
    margin-bottom: 2px;
    border-radius: 2px;
    background-color: #3a3b40;
}

.si-check-sheet__close .si-icon {
    width: 22px;
    height: 22px;
}

.si-check-info {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
}

.si-check-info[data-open="1"] { display: block; }

.si-check-info__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.62);
    border: 0;
}

.si-check-info__panel {
    position: absolute;
    top: 8%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: 92%;
    max-height: 84%;
    overflow: hidden;
    background-color: #16181B;
    border: 1px solid #373B42;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.58);
    transform: translateX(-50%);
}

.si-check-info__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--si-border);
}

.si-check-info__head strong {
    flex: 1 1 auto;
    color: var(--si-gold);
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.si-check-info__close {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: transparent;
    color: var(--si-muted);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.si-check-info__close .si-icon { width: 16px; height: 16px; }

.si-check-info__close:hover { color: var(--si-text-strong); border-color: var(--si-border); }

.si-check-info__body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 16px 16px 16px;
}

.si-check-info__section { margin-bottom: 16px; }

.si-check-info__section:last-child { margin-bottom: 0; }

.si-check-info__heading {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    color: var(--si-text-strong);
    font-size: 14px;
}

.si-check-info__dot {
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
}

.si-check-info__sub {
    margin-bottom: 6px;
    color: var(--si-gold);
    font-size: 12px;
    font-weight: 600;
}

.si-check-info__p {
    margin: 0 0 8px 0;
    color: var(--si-text);
    font-size: 12px;
    line-height: 1.45;
}

.si-check-info__example {
    margin: 2px 0 4px 0;
    color: var(--si-muted);
    font-size: 11px;
    font-weight: 700;
}

.si-check-info__line {
    color: var(--si-muted);
    font-size: 12px;
    line-height: 1.4;
}

.si-app[data-si-orientation="portrait"] .si-check-info__panel,
.si-app[data-si-compact="1"] .si-check-info__panel {
    top: 6%;
    width: 94%;
    max-height: 88%;
}

/* =========================================================== quick settings */

.si-quick-settings {
    padding: 20px;
    background-color: #141617;
}

.si-quick-settings__section {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    background-color: #1B1D21;
    border: 1px solid #2E3238;
    border-radius: 8px;
}

.si-quick-settings__header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    color: var(--si-text-strong);
    border-bottom: 1px solid #2E3238;
    font-size: 13px;
    font-weight: 700;
}

.si-quick-settings__row {
    display: flex;
    align-items: center;
}

.si-quick-settings__modes {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-right: 20px;
}

.si-qs-mode {
    display: flex;
    align-items: center;
    margin-right: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--si-text);
    font-family: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.si-qs-mode__dot {
    position: relative;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    border: 2px solid #585C62;
    border-radius: 50%;
    box-sizing: border-box;
}

.si-qs-mode[data-active="1"] .si-qs-mode__dot { border-color: #60c7a0; }

.si-qs-mode[data-active="1"] .si-qs-mode__dot:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 5px;
    height: 5px;
    background-color: #60c7a0;
    border-radius: 50%;
}

.si-quick-settings__picker {
    display: flex;
    flex: 1 1 auto;
    min-width: 180px;
}

.si-quick-settings__picker[data-active="0"] { display: none; }

.si-icao {
    position: relative;
    flex: 1 1 auto;
    min-width: 150px;
}

.si-icao__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 10px;
    background-color: #101010;
    color: #7f7f7f;
    border: 1px solid #303030;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.si-icao__chip:hover,
.si-icao[data-open="1"] .si-icao__chip { border-color: #60c7a0; }

.si-icao__caret {
    display: block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #C8CCD4;
}

.si-icao[data-open="1"] .si-icao__caret {
    border-top: none;
    border-bottom: 5px solid #C8CCD4;
}

.si-icao__menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    max-height: 180px;
    margin-top: 2px;
    padding: 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #101010;
    border: 1px solid #303030;
    border-radius: 4px;
}

.si-icao[data-open="1"] .si-icao__menu { display: block; }

.si-icao__item {
    display: block;
    position: relative;
    width: 100%;
    padding: 6px 12px 6px 28px;
    background: transparent;
    color: #7f7f7f;
    border: none;
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.si-icao__item:hover { background-color: #181A1E; }

.si-icao__item[data-active="1"] { color: #60c7a0; }

.si-icao__item[data-active="1"]:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #60c7a0;
    border-bottom: 2px solid #60c7a0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.si-quick-settings__warning {
    display: none;
    margin-top: 15px;
    padding: 10px;
    color: #E6B94D;
    background-color: rgba(212, 168, 48, 0.1);
    border: 1px solid #6B5727;
    border-radius: 4px;
    font-size: 9px;
    line-height: 1.45;
}

.si-quick-settings__warning[data-active="1"] { display: flex; }
.si-quick-settings__warning strong { flex: 0 0 auto; margin-right: 8px; }

.si-quick-settings__status {
    display: none;
    margin-top: 15px;
    padding: 9px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.si-quick-settings__status[data-active="1"] { display: block; }
.si-quick-settings__status[data-tone="ok"] { color: #8DD198; background-color: #213226; border: 1px solid #4D7657; }
.si-quick-settings__status[data-tone="bad"] { color: #F08A7E; background-color: #382421; border: 1px solid #7B443D; }

.si-app[data-si-orientation="portrait"] .si-quick-settings__row,
.si-app[data-si-compact="1"] .si-quick-settings__row {
    align-items: stretch;
    flex-direction: column;
}

.si-app[data-si-orientation="portrait"] .si-quick-settings__modes,
.si-app[data-si-compact="1"] .si-quick-settings__modes {
    align-items: flex-start;
    flex-direction: column;
    margin: 0 0 10px 0;
}

.si-app[data-si-orientation="portrait"] .si-qs-mode,
.si-app[data-si-compact="1"] .si-qs-mode { margin: 0 0 8px 0; }

.si-app[data-si-orientation="portrait"] .si-quick-settings__picker,
.si-app[data-si-compact="1"] .si-quick-settings__picker { flex-direction: column; }

/* =========================================================== airport lookup */

.si-airport {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background-color: #141414;
    color: #7f7f7f;
}

.si-airport__header {
    flex: 0 0 auto;
    margin: 10px;
    padding: 8px 12px;
    background-color: #2a4a6a;
    border: 1px solid #4a7fa4;
    border-radius: 8px;
}

.si-airport__title {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.si-airport__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.si-airport__spin {
    display: none;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #1B1B1B;
    border-top: 2px solid #7f7f7f;
    border-radius: 50%;
}

.si-airport__spin[data-active="1"] { display: block; }

.si-ap-pick {
    position: relative;
    margin-right: 8px;
}

.si-ap-pick__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 100px;
    padding: 6px 10px;
    background-color: #252525;
    color: #7f7f7f;
    border: 1px solid #303030;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.si-ap-pick__chip:hover,
.si-ap-pick[data-open="1"] .si-ap-pick__chip { border-color: #6a9fc4; }

.si-ap-pick__caret {
    display: block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #575757;
}

.si-ap-pick[data-open="1"] .si-ap-pick__caret {
    border-top: none;
    border-bottom: 5px solid #575757;
}

.si-ap-pick__menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    min-width: 100%;
    max-height: 180px;
    margin-top: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #252525;
    border: 1px solid #303030;
    border-radius: 4px;
}

.si-ap-pick[data-open="1"] .si-ap-pick__menu { display: block; }

.si-ap-pick__item {
    display: block;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    color: #7f7f7f;
    border: none;
    border-bottom: 1px solid #303030;
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.si-ap-pick__item:last-child { border-bottom: none; }
.si-ap-pick__item:hover { background-color: #303030; }
.si-ap-pick__item[data-active="1"] { background-color: #2a5a7a; color: #ffffff; }

.si-airport__icao {
    display: none;
    width: 100px;
    margin-right: 8px;
    text-transform: uppercase;
}

.si-airport__icao[data-active="1"] { display: block; }

.si-airport__search-btn {
    padding: 6px 12px;
    background-color: #5a8fb4;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.si-airport__search-btn:hover { background-color: #6a9fc4; }

.si-airport__body {
    flex: 1 1 auto;
    min-height: 0;
}

.si-airport__empty {
    padding: 28px 16px;
    color: #6c6c6c;
    font-style: italic;
    text-align: center;
}

.si-airport-section {
    margin: 0 10px 10px 10px;
    padding: 10px;
    background-color: #1B1B1B;
    border: 1px solid #303030;
    border-radius: 8px;
}

.si-airport-section__title {
    margin-bottom: 10px;
    padding-bottom: 5px;
    color: #4a7fa4;
    border-bottom: 1px solid #303030;
    font-size: 11px;
    font-weight: 700;
}

.si-airport-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.si-airport-details__item {
    display: flex;
    align-items: center;
    margin: 0 16px 4px 0;
    font-size: 11px;
}

.si-airport-details__key {
    margin-right: 6px;
    color: #838383;
    font-weight: 700;
}

.si-airport-details__value { color: #7f7f7f; }

.si-airport-freqs {
    display: flex;
    flex-wrap: wrap;
}

.si-airport-freq {
    display: flex;
    align-items: center;
    width: 25%;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.si-airport-freq__type {
    min-width: 36px;
    margin-right: 6px;
    color: #838383;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.si-airport-freq__value {
    padding: 0;
    background: transparent;
    color: #6a9fc4;
    border: none;
    font-family: inherit;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

.si-airport-freq__value:hover { color: #8ec4e4; }

.si-airport-rwy {
    margin: 5px 0;
    background-color: #252525;
    border: 1px solid #303030;
    border-radius: 4px;
    overflow: hidden;
}

.si-airport-rwy__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 8px;
    background: transparent;
    color: inherit;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.si-airport-rwy[data-open="1"] .si-airport-rwy__head {
    background-color: #2A2A2A;
    border-bottom: 1px solid #303030;
}

.si-airport-rwy__caret {
    width: 0;
    height: 0;
    margin-right: 6px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #7a9fc4;
}

.si-airport-rwy[data-open="1"] .si-airport-rwy__caret {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #7a9fc4;
    border-bottom: none;
}

.si-airport-rwy__name {
    min-width: 110px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 700;
}

.si-airport-rwy__name span[data-active="1"] { color: #66ffaa; }
.si-airport-rwy__name span[data-active="0"] { color: #7f7f7f; }

.si-airport-rwy__usage {
    min-width: 70px;
    margin-right: 10px;
    color: #7a9fc4;
    font-size: 10px;
    font-weight: 700;
}

.si-airport-rwy__app {
    min-width: 70px;
    margin-right: 10px;
    color: #626262;
    font-size: 10px;
}

.si-airport-rwy__hdg {
    display: flex;
    align-items: center;
    min-width: 90px;
    margin-right: 10px;
    color: #6c6c6c;
    font-size: 10px;
}

.si-airport-rwy__needle {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border: 1px solid #6a9fc4;
    border-radius: 50%;
}

.si-airport-rwy__line {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    height: 7px;
    margin-left: -1px;
    background-color: #6a9fc4;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

.si-airport-rwy__len {
    margin-left: auto;
    color: #6c6c6c;
    font-size: 11px;
}

.si-airport-rwy__proc {
    display: none;
    padding: 8px;
    background-color: #1B1B1B;
}

.si-airport-rwy[data-open="1"] .si-airport-rwy__proc { display: block; }

.si-airport-proc {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
}

.si-airport-proc:last-child { margin-bottom: 0; }

.si-airport-proc__label {
    flex: 0 0 52px;
    margin-right: 8px;
    padding-top: 4px;
    color: #575757;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: right;
    text-transform: uppercase;
}

.si-airport-proc__label[data-kind="sid"] { color: #9d7fc7; }
.si-airport-proc__label[data-kind="star"] { color: #6a9fc4; }

.si-airport-proc__bubbles {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.si-airport-proc__bubble {
    margin: 0 6px 6px 0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.si-airport-proc__bubble[data-kind="sid"] {
    color: #e8e0f5;
    background-color: #6b4c9a;
    border: 1px solid #8566b8;
}

.si-airport-proc__bubble[data-kind="star"] {
    color: #e0eff8;
    background-color: #4a7fa4;
    border: 1px solid #6a9fc4;
}

.si-airport-proc__none {
    color: #575757;
    font-size: 11px;
    font-style: italic;
}

.si-airport-wx { margin-bottom: 10px; }
.si-airport-wx:last-child { margin-bottom: 0; }

.si-airport-wx__label {
    margin-bottom: 5px;
    color: #4a7fa4;
    font-size: 11px;
    font-weight: 700;
}

.si-airport-wx__body {
    padding: 8px;
    background-color: #252525;
    border-radius: 4px;
    color: #7f7f7f;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.si-app[data-si-orientation="portrait"] .si-airport__search,
.si-app[data-si-compact="1"] .si-airport__search { flex-wrap: wrap; }

.si-app[data-si-orientation="portrait"] .si-airport-freq,
.si-app[data-si-compact="1"] .si-airport-freq { width: 50%; }

.si-app[data-si-orientation="portrait"] .si-airport-rwy__len,
.si-app[data-si-compact="1"] .si-airport-rwy__len {
    margin-left: 0;
    width: 100%;
    margin-top: 4px;
}

/* ==================================================================== embed */

.si-embed-wrap {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.si-embed {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    background-color: var(--si-panel);
}

.si-embed-loading {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--si-panel);
    color: var(--si-muted);
}

.si-embed-loading strong { margin-left: 9px; font-size: 11px; font-weight: 600; }

.si-embed-loading__spinner {
    width: 17px;
    height: 17px;
    border: 2px solid #303338;
    border-top-color: var(--si-gold);
    border-radius: 50%;
    animation: si-embed-spin 900ms linear infinite;
}

@keyframes si-embed-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ================================================================== toasts */

.si-toast {
    position: absolute;
    left: 50%;
    bottom: 14px;
    max-width: 80%;
    margin-left: -40%;
    padding: 8px 14px;
    background-color: var(--si-chrome);
    border: 1px solid var(--si-gold);
    border-radius: 6px;
    font-size: 12px;
    color: var(--si-text);
    text-align: center;
}

.si-toast[data-tone="bad"] { border-color: var(--si-bad); }

/* ============================================================== responsive */

/* Portrait: the header's flight chips and the checklist sidebar are the first
   things to go, since both are wider than they are useful. */
.si-app[data-si-orientation="portrait"] .si-split { flex-direction: column; }

.si-app[data-si-orientation="portrait"] .si-split__side {
    flex: 0 0 auto;
    max-height: 168px;
    border-right: none;
    border-bottom: 1px solid var(--si-border);
}

.si-app[data-si-orientation="portrait"] .si-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: 26px;
    overflow: visible;
}

.si-app[data-si-orientation="portrait"] .si-tab {
    height: 24px;
    margin-right: 1px;
    margin-left: 1px;
}

/* Four equal columns: the 70px floor is what was wrapping this to three
   on a portrait EFB. Shrink the type and drop the floor so TWR/118.300 fits. */
.si-app[data-si-orientation="portrait"] .si-atc-frequency {
    flex-basis: 25%;
    width: 25%;
    min-width: 0;
}

.si-app[data-si-orientation="portrait"] .si-msg { margin-bottom: 6px; padding: 0; }
.si-app[data-si-orientation="portrait"] .si-msg__source { font-size: 9px; }
.si-app[data-si-orientation="portrait"] .si-msg__text { font-size: 11px; }

.si-app[data-si-compact="1"] .si-seg__opt { padding: 0 6px; }
.si-app[data-si-compact="1"] .si-header__meta .si-seat .si-seg__opt {
    height: 13px;
    padding: 0 4px;
    font-size: 7px;
}

.si-app[data-si-compact="1"] .si-header { min-height: 44px; height: auto; padding: 10px 8px 4px 8px; }
.si-app[data-si-compact="1"] .si-header__meta { margin-bottom: 3px; }
.si-app[data-si-compact="1"] .si-header__comms-label { font-size: 9px; margin-right: 4px; }
.si-app[data-si-compact="1"] .si-status__text { font-size: 10px; }
.si-app[data-si-compact="1"] .si-status-bubble { min-height: 18px; padding: 4px 8px; }
.si-app[data-si-compact="1"] .si-status-bubble__text,
.si-app[data-si-compact="1"] .si-status-bubble__link { font-size: 9px; }
.si-app[data-si-orientation="portrait"][data-si-compact="1"] .si-header { min-height: 44px; }
.si-app[data-si-compact="1"] .si-com { min-height: 22px; padding: 0 2px; }
.si-app[data-si-compact="1"] .si-com__slot { min-width: 0; padding: 1px 6px; }
.si-app[data-si-compact="1"] .si-com__label { margin-right: 4px; padding: 0 4px; font-size: 8px; }
.si-app[data-si-compact="1"] .si-com__value { font-size: 13px; }
.si-app[data-si-compact="1"] .si-composer { min-height: 42px; height: auto; }
.si-app[data-si-compact="1"] .si-tabs { height: 24px; padding: 0 4px; }
.si-app[data-si-compact="1"] .si-tab { padding: 0 6px; font-size: 10px; }
.si-app[data-si-orientation="portrait"][data-si-compact="1"] .si-tabs { height: 24px; }
.si-app[data-si-orientation="portrait"][data-si-compact="1"] .si-tab { height: 24px; }
.si-app[data-si-compact="1"] .si-scroll { padding: 8px; }
.si-app[data-si-compact="1"] .si-log { padding: 6px; }
.si-app[data-si-compact="1"] .si-msg { margin-bottom: 6px; padding: 0; }
.si-app[data-si-compact="1"] .si-msg__source { font-size: 9px; }
.si-app[data-si-compact="1"] .si-msg__text { font-size: 11px; }
.si-app[data-si-compact="1"] .si-fold { margin: 6px 8px 0 8px; }
.si-app[data-si-compact="1"] .si-fold--fill { margin-bottom: 6px; }
.si-app[data-si-compact="1"] .si-atc-info__airport { padding: 6px 8px; }
.si-app[data-si-compact="1"] .si-atc-facts { padding: 5px 8px; }
.si-app[data-si-compact="1"] .si-card { padding: 9px; }
.si-app[data-si-compact="1"] .si-composer { padding: 6px; }
.si-app[data-si-compact="1"] .si-dest__chip { min-width: 84px; height: 24px; font-size: 11px; }
.si-app[data-si-compact="1"] .si-kb-toggle { width: 28px; height: 24px; margin-right: 6px; }
.si-app[data-si-compact="1"] .si-kb { padding: 4px 2px 5px 2px; }
.si-app[data-si-compact="1"] .si-kb__bar { height: 22px; margin-bottom: 4px; }
.si-app[data-si-compact="1"] .si-kb__preview { height: 20px; font-size: 12px; line-height: 20px; }
.si-app[data-si-compact="1"] .si-kb__row { margin-bottom: 3px; }
.si-app[data-si-compact="1"] .si-kb__key { height: 26px; margin: 0 1px; font-size: 12px; }
.si-app[data-si-compact="1"] .si-kb__key--cmd { font-size: 10px; }
.si-app[data-si-compact="1"] .si-kb__text--iconed,
.si-app[data-si-compact="1"] .si-kb__text--long { display: none; }
.si-app[data-si-compact="1"] .si-kb__text--short { display: block; }
.si-app[data-si-compact="1"] .si-kb__text--short.si-kb__text { margin-left: 4px; }
.si-app[data-si-compact="1"] .si-side-nav {
    flex-basis: 42px;
    width: 42px;
}
.si-app[data-si-compact="1"] .si-side-nav__button {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}
.si-app[data-si-compact="1"] .si-zoom button { width: 32px; height: 26px; }
.si-app[data-si-compact="1"] .si-zoom button.si-zoom__value,
.si-app[data-si-orientation="portrait"][data-si-compact="1"] .si-zoom button.si-zoom__value {
    width: 32px;
}
.si-app[data-si-compact="1"] .si-side-nav__label { left: 37px; }
.si-app[data-si-compact="1"] .si-drawer-backdrop,
.si-app[data-si-compact="1"] .si-drawer { left: 42px; }
.si-app[data-si-compact="1"] .si-drawer {
    width: calc(100% - 42px);
    min-width: 0;
}
.si-app[data-si-compact="1"] .si-drawer__header {
    min-height: 56px;
    padding: 8px 10px;
}
.si-app[data-si-compact="1"] .si-drawer__body { padding: 10px; }

.si-app[data-si-compact="1"] .si-broadcast { margin: 6px 8px 0 8px; padding: 6px 6px 6px 8px; }
.si-app[data-si-compact="1"] .si-broadcast__title { font-size: 9px; }
.si-app[data-si-compact="1"] .si-broadcast__message { font-size: 10px; }

.si-app[data-si-compact="1"] .si-actions {
    flex-wrap: wrap;
    padding: 6px 8px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.si-app[data-si-compact="1"] .si-actions::-webkit-scrollbar { height: 0; }
.si-app[data-si-compact="1"] .si-action,
.si-app[data-si-compact="1"] .si-actions__phase { margin-bottom: 0; }