/* czech-keyboard.css — interactive Czech keyboard helper on
   /blog/install-czech-keyboard (desktop + mobile templates; markup in the
   two article partials, behaviour in javascripts/czech-keyboard.js).

   Visual language is the blog's ba-* system (pages/blog-article.css):
   2px black borders, hard offset shadows in cyan/yellow, Roboto Mono
   uppercase labels, Inter uppercase headings, #f8f8f8 panels.

   style.css has legacy bare-element rules that would otherwise win over
   inheritance here (button: black fill + 10px 70px padding + nowrap;
   span: 12pt Roboto; label: 16pt; p: 16pt Roboto; li: 16pt/30px Roboto
   500; ul: padding-inline-start; h2: 26pt grey Roboto; input[type=text]:
   min-width 200px; mobile input: 5px padding + align-self). Every element
   type used below sets those properties explicitly. */

.ckb {
    border: 2px solid var(--as-black);
    background: #fff;
    box-shadow: 6px 6px 0 0 var(--as-cyan);
    padding: 2rem;
    margin: 1rem 6px 3rem 0;
    font-family: 'Inter', sans-serif;
    color: var(--as-black);
    text-align: left;
    box-sizing: border-box;
}

.ckb *,
.ckb *::before,
.ckb *::after { box-sizing: border-box; }

/* ---- Heading ---- */
.ckb-eyebrow {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--as-grey);
    margin: 0;
}

.ckb-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.7rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--as-black);
    border-bottom: 2px solid var(--as-black);
    padding-bottom: 0.75rem;
    margin: 0.5rem 0 0 0;
}

.ckb .ckb-intro {
    font-family: 'Inter', sans-serif;
    font-weight: 380;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.7;
    color: var(--as-black);
    margin: 0.75rem 0 0 0;
}

/* ---- Two-column area: keyboard diagram (narrower) | result/instructions ---- */
.ckb-board-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.ckb-controls {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: end;
    margin-top: 1.5rem;
}

.ckb-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ckb-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.2;
    color: var(--as-grey);
    margin: 0;
}

.ckb .ckb-input,
.ckb .ckb-select {
    width: 100%;
    min-width: 0;
    height: 3.25rem;
    margin: 0;
    border: 2px solid var(--as-black);
    border-radius: 0;
    background-color: #fff;
    color: var(--as-black);
    align-self: stretch;
}

.ckb .ckb-input {
    padding: 0 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    text-align: center;
}

.ckb .ckb-input::placeholder { color: #c4c4c4; }

.ckb .ckb-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 2.25rem 0 0.75rem;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--as-black) 50%),
        linear-gradient(135deg, var(--as-black) 50%, transparent 50%);
    background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.ckb .ckb-input:focus,
.ckb .ckb-select:focus {
    outline: none;
    border-color: var(--as-black);
    box-shadow: 4px 4px 0 0 var(--as-yellow);
}

/* ---- Character picker ---- */
.ckb-picker {
    margin-top: 1.5rem;
}

.ckb-picker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.ckb-picker-chars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.ckb .ckb-char {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    margin: 0;
    border: 2px solid var(--as-black);
    border-radius: 0;
    background-color: #fff;
    color: var(--as-black);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    white-space: normal;
    box-shadow: 3px 3px 0 0 var(--as-black);
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}

.ckb .ckb-char:hover { background-color: var(--as-yellow); }

.ckb .ckb-char[aria-pressed="true"] {
    background-color: var(--as-cyan);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--as-black);
}

.ckb .ckb-char:focus-visible,
.ckb .ckb-caps:focus-visible,
.ckb .ckb-tab:focus-visible,
.ckb .ckb-link-btn:focus-visible {
    outline: 2px solid var(--as-black);
    outline-offset: 3px;
}

/* Method tabs mirror .ba-tag. */
.ckb .ckb-tab {
    padding: 0.4rem 0.75rem;
    margin: 0;
    border: 2px solid var(--as-black);
    border-radius: 0;
    background-color: #fff;
    color: var(--as-black);
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
}

.ckb .ckb-tab:hover { background-color: var(--as-yellow); }

.ckb .ckb-tab[aria-selected="true"] {
    background-color: var(--as-black);
    color: #fff;
}

/* Capitals toggle mirrors .ba-back-to-top: solid black, cyan on hover/active. */
.ckb .ckb-caps {
    flex: 0 0 auto;
    padding: 0.4rem 0.9rem;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: var(--as-black);
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
}

.ckb .ckb-caps:hover,
.ckb .ckb-caps[aria-pressed="true"] {
    background-color: var(--as-cyan);
    color: var(--as-black);
}

/* ---- Result panel ---- */
.ckb-result-box {
    border: 2px solid var(--as-black);
    background: #f8f8f8;
    padding: 1.5rem;
    min-height: 100%;
}

.ckb .ckb-result-intro {
    font-family: 'Inter', sans-serif;
    font-weight: 380;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: var(--as-grey);
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #ddd;
}

.ckb-result {
    min-height: 0;
}

.ckb-result-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Black tile + cyan Inter 900 glyph + yellow shadow, like .ba-hero-panel. */
.ckb-glyph {
    flex: 0 0 auto;
    width: 5.25rem;
    height: 5.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--as-black);
    color: var(--as-cyan);
    border: 2px solid var(--as-black);
    box-shadow: 4px 4px 0 0 var(--as-yellow);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 3.25rem;
    line-height: 1;
}

.ckb-result-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
}

.ckb .ckb-result-eyebrow,
.ckb .ckb-method-label {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.2;
    color: var(--as-grey);
}

.ckb .ckb-result-name {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--as-black);
}

/* Link-styled buttons: bold black text, thick yellow underline (= .ba-article a). */
.ckb .ckb-pair,
.ckb .ckb-link-btn {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--as-black);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--as-yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ckb .ckb-pair:hover,
.ckb .ckb-link-btn:hover { color: var(--as-grey); }

.ckb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.ckb .ckb-method-label { margin-top: 1.25rem; }

.ckb .ckb-summary {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--as-black);
    margin: 0.9rem 0 0 0;
}

.ckb-steps {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
    padding-inline-start: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 0.4rem;
}

.ckb .ckb-step {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--as-black);
}

.ckb .ckb-step + .ckb-step::before {
    content: "→";
    color: var(--as-grey);
    margin-right: 0.15rem;
}

.ckb .ckb-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--as-black);
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.ckb-kbd {
    display: inline-block;
    min-width: 1.9rem;
    padding: 0.4rem 0.5rem;
    border: 2px solid var(--as-black);
    border-radius: 0;
    background: var(--as-cyan);
    color: var(--as-black);
    box-shadow: 2px 2px 0 0 var(--as-black);
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.ckb-kbd-hold { background: var(--as-yellow); }

.ckb-kbd-dead {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 12px;
}

.ckb .ckb-plus,
.ckb .ckb-step-note {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    color: var(--as-grey);
    line-height: 1;
}

.ckb .ckb-plus { font-size: 12px; }

.ckb .ckb-step-note {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Callouts inside the result panel: red edge = "this won't work as-is",
   yellow edge = "needs a one-time setup" (same 4px edge as .ba-example-quote). */
.ckb-alert,
.ckb-requires {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-left: 4px solid var(--as-red);
}

.ckb-requires { border-left-color: var(--as-yellow); }

.ckb-alert p,
.ckb-requires p {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--as-black);
    margin: 0;
}

.ckb-alert .ckb-link-btn { margin-top: 0.5rem; }

.ckb-notes {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ckb .ckb-notes li {
    position: relative;
    padding-left: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--as-grey);
}

.ckb .ckb-notes li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--as-black);
}

/* ---- Keyboard diagram ---- */
.ckb-board-wrap {
    margin-top: 0;
    border: 2px solid var(--as-black);
    background: #f8f8f8;
    box-shadow: 6px 6px 0 0 var(--as-yellow);
    padding: 1rem 1.25rem 1.25rem;
}

.ckb-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.9rem;
}

.ckb .ckb-caption {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.2;
    color: var(--as-grey);
}

.ckb-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
}

.ckb .ckb-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--as-black);
}

.ckb .ckb-swatch {
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid var(--as-black);
}

.ckb .ckb-swatch-press { background: var(--as-cyan); }
.ckb .ckb-swatch-hold { background: var(--as-yellow); }

.ckb .ckb-swatch-num {
    width: auto;
    min-width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--as-black);
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.ckb-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ckb-svg {
    display: block;
    width: 100%;
    height: auto;
}

.ckb-board-wrap.has-scroll .ckb-scroll-hint { display: block; }

.ckb .ckb-scroll-hint {
    display: none;
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--as-grey);
    margin: 0.75rem 0 0 0;
}

.ckb-key-depth { fill: var(--as-black); }

.ckb-key-cap {
    fill: #fff;
    stroke: var(--as-black);
    stroke-width: 2;
    transition: fill .12s ease;
}

.ckb-key.is-press .ckb-key-cap { fill: var(--as-cyan); }
.ckb-key.is-hold .ckb-key-cap { fill: var(--as-yellow); }
.ckb-key.is-live:not(.is-press):not(.is-hold) .ckb-key-cap { fill: #e5e5e5; }
.ckb-key.is-live .ckb-key-cap { transform: translate(2px, 2px); }

.ckb-t-main {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 17px;
    fill: var(--as-black);
}

.ckb-t-leg {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    fill: var(--as-black);
}

.ckb-t-mod {
    font-family: 'Roboto Mono', monospace;
    font-weight: 500;
    font-size: 11px;
    fill: var(--as-black);
}

.ckb-t-mod-sm { font-size: 9.5px; }

/* Dead-key accents (´ ˇ ° ¨) are spacing modifier glyphs that render tiny
   at legend size — draw them larger in Inter so they're recognisable. */
.ckb-t-dead {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
}

.ckb-t-altgr {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    fill: var(--as-grey);
}

.ckb-key.is-press .ckb-t-altgr,
.ckb-key.is-hold .ckb-t-altgr { fill: var(--as-black); }

.ckb-badge { fill: var(--as-black); }

.ckb-badge-t {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    fill: #fff;
}

.ckb .ckb-noscript {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 1rem 0 0 0;
}

/* ---- Narrow screens ---- */
@media (max-width: 1000px) {
    .ckb { padding: 1.5rem; }
    .ckb-board-row { grid-template-columns: minmax(0, 1fr); }
}

/* Phones (the mobile template, bacm-*): keep the keyboard full-size and let
   it scroll sideways instead of squashing 60+ keys into 350px. Shadows drop
   to 4px and panels to #f4f4f4 like the rest of blog-article-mobile.css. */
@media (max-width: 640px) {
    .ckb {
        padding: 1.1rem;
        box-shadow: 4px 4px 0 0 var(--as-cyan);
        margin: 0 4px 0 0;
    }
    .ckb-title { font-size: 1.25rem; }
    .ckb-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ckb-field-char { grid-column: 1 / -1; }
    .ckb-result-box { padding: 1.1rem; }
    .ckb-glyph { width: 4.25rem; height: 4.25rem; font-size: 2.6rem; }
    .ckb-board-wrap {
        box-shadow: 4px 4px 0 0 var(--as-yellow);
        padding: 0.9rem;
        margin-right: 4px;
    }
    .ckb-svg { width: 640px; max-width: none; }
    .ckb .ckb-scroll-hint { display: block; }
}

.bacm-wrap .ckb-result-box,
.bacm-wrap .ckb-board-wrap { background: #f4f4f4; }