/* ===================================================================
   /keyboard-checker

   --u is one key unit in pixels, set by keyboard-checker.js from the
   available width. The board is a grid of quarter-unit columns and
   half-unit rows; every key is an explicit placement, so legends and
   shapes never depend on line breaks in markup.
   Scoped under .kb.
   =================================================================== */

.kb {
    --kb-accent: #3d8bff;
    --kb-ok: #22c55e;
    --kb-ink: #10162b;
    --kb-muted: #5b6275;
    --kb-line: #e4e7ef;

    margin: 18px auto 24px;
    padding: 0;
    max-width: 1320px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--kb-line);
    box-shadow: 0 30px 60px -34px rgb(16 22 43 / 45%);
    overflow: hidden;
    text-align: left;
    color: var(--kb-ink);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb button { font: inherit; }
.kb svg { display: block; }
.kb :where(p, ol, dl, dd) { margin: 0; }

.kb-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- toolbar ---------- */

.kb-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
    padding: 14px 20px; border-bottom: 1px solid var(--kb-line); background: #fafbfd;
}
.kb-layouts { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: #eef1f7; }
.kb-layouts button {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--kb-muted); font-size: .88rem; font-weight: 600; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.kb-layouts button svg { width: 16px; height: 16px; }
.kb-layouts button:hover { color: var(--kb-ink); }
.kb-layouts button[aria-checked="true"] { background: #fff; color: var(--kb-ink); box-shadow: 0 1px 2px rgb(16 22 43 / 10%), 0 6px 14px -8px rgb(16 22 43 / 35%); }
.kb-layouts button:focus-visible, .kb-btn:focus-visible { outline: 3px solid var(--kb-accent); outline-offset: 2px; }
.kb-detected { font-size: .85rem; color: var(--kb-muted); }

/* ---------- stage ---------- */

.kb-stage {
    position: relative;
    padding: clamp(18px, 3vw, 36px) clamp(10px, 2.5vw, 32px);
    background: radial-gradient(80% 90% at 50% 0%, #f4f7ff 0%, #e8edf7 100%);
}
.kb-scroll { overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px; scrollbar-width: thin; }
.kb-is-scrolling .kb-scroll { mask-image: linear-gradient(90deg, #000 92%, transparent); }

.kb-board {
    --u: 44px;
    --gap: max(2px, calc(var(--u) * .07));
    display: grid;
    grid-template-columns: repeat(var(--cols), calc(var(--u) / 4));
    grid-template-rows: repeat(var(--rows), calc(var(--u) / 2));
    width: max-content;
    margin: 0 auto;
    padding: calc(var(--u) * .28);
    border-radius: calc(var(--u) * .34);
    background: linear-gradient(180deg, #2b303f, #1b1f2b);
    box-shadow: 0 2px 0 #3a4052 inset, 0 24px 40px -18px rgb(16 22 43 / 60%), 0 2px 6px rgb(16 22 43 / 25%);
    user-select: none;
}

/* ---------- keys (Windows look by default) ---------- */

.kb-key {
    position: relative;
    margin: calc(var(--gap) / 2);
    border-radius: calc(var(--u) * .14);
    background: #3b4152;
    box-shadow: 0 calc(var(--u) * .07) 0 #14171f, 0 calc(var(--u) * .09) calc(var(--u) * .12) rgb(0 0 0 / 35%);
    transition: transform .06s ease, box-shadow .06s ease, background-color .12s ease;
}
.kb-cap {
    position: absolute; inset: calc(var(--u) * .045) calc(var(--u) * .07) calc(var(--u) * .1);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border-radius: calc(var(--u) * .1);
    background: linear-gradient(180deg, #4a5166, #3f4558);
    color: #e7ebf7;
    font-size: calc(var(--u) * .26);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
}
.kb-key--letter .kb-cap { font-size: calc(var(--u) * .34); }
.kb-key--mod .kb-cap { font-size: calc(var(--u) * .2); font-weight: 500; color: #c7cde0; }
.kb-key--fn .kb-cap { font-size: calc(var(--u) * .21); color: #c7cde0; }
.kb-key--arrow .kb-cap { font-size: calc(var(--u) * .2); }
.kb-key--short .kb-cap { font-size: calc(var(--u) * .18); inset: calc(var(--u) * .03) calc(var(--u) * .06) calc(var(--u) * .06); }

.kb-cap--dual { justify-content: space-between; padding: calc(var(--u) * .08) 0; }
.kb-legend-top { font-size: .78em; opacity: .75; }
.kb-legend-main { font-size: 1em; }
.kb-winlogo svg { width: calc(var(--u) * .3); height: calc(var(--u) * .3); }

/* Mac-style legends: symbol top right, word bottom left */
.kb-legend-sym, .kb-legend-word { display: block; }

/* pressed: the key sinks and lights */
.kb-key.is-down {
    transform: translateY(calc(var(--u) * .06));
    box-shadow: 0 calc(var(--u) * .01) 0 #14171f, 0 0 0 2px var(--kb-accent), 0 0 calc(var(--u) * .5) rgb(61 139 255 / 70%);
}
.kb-key.is-down .kb-cap { background: linear-gradient(180deg, #6aa9ff, var(--kb-accent)); color: #fff; }

/* tested: stays marked */
.kb-key.is-tested .kb-cap { background: linear-gradient(180deg, #2f6a4a, #245a3c); color: #dcfce7; }
.kb-key.is-tested::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: calc(var(--u) * .12);
    height: max(2px, calc(var(--u) * .045)); border-radius: 99px; background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
}
.kb-key.is-tested.is-down .kb-cap { background: linear-gradient(180deg, #6aa9ff, var(--kb-accent)); color: #fff; }
.kb-key.is-pop { animation: kb-pop .28s ease; }
@keyframes kb-pop { 40% { filter: brightness(1.35); } }

.kb-key.is-untestable { opacity: .55; }
.kb-key.is-untestable .kb-cap { background: repeating-linear-gradient(135deg, #3f4558 0 6px, #393f51 6px 12px); }

.kb-touchid {
    width: 58%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, #1b1f2b 55%, #6b7280 57%, #1b1f2b 62%);
}

/* ---------- Mac: aluminium base, white keys, lowercase legends ---------- */

.kb-board[data-layout^="mac"] {
    background: linear-gradient(180deg, #e9ebef, #cfd3da);
    box-shadow: 0 1px 0 #fff inset, 0 -1px 0 #b9bec7 inset, 0 24px 40px -20px rgb(16 22 43 / 45%), 0 2px 6px rgb(16 22 43 / 18%);
    border-radius: calc(var(--u) * .45);
}
.kb-board[data-layout^="mac"] .kb-key {
    background: #c9cdd4;
    border-radius: calc(var(--u) * .12);
    box-shadow: 0 calc(var(--u) * .04) 0 #aab0ba, 0 calc(var(--u) * .06) calc(var(--u) * .1) rgb(16 22 43 / 18%);
}
.kb-board[data-layout^="mac"] .kb-cap {
    inset: 0 0 calc(var(--u) * .05);
    background: linear-gradient(180deg, #ffffff, #f3f4f6);
    color: #1f2937;
    font-family: -apple-system, "SF Pro Text", "Helvetica Neue", "Poppins", sans-serif;
    font-weight: 400;
}
.kb-board[data-layout^="mac"] .kb-key--letter .kb-cap { font-size: calc(var(--u) * .3); }
.kb-board[data-layout^="mac"] .kb-key--mod .kb-cap {
    display: grid; grid-template-rows: 1fr 1fr; align-items: stretch; justify-items: stretch;
    padding: calc(var(--u) * .07) calc(var(--u) * .1);
    font-size: calc(var(--u) * .165); color: #374151;
}
.kb-board[data-layout^="mac"] .kb-key--mod .kb-legend-sym { text-align: right; font-size: 1.2em; }
.kb-board[data-layout^="mac"] .kb-key--mod .kb-legend-word { align-self: end; text-align: left; }
/* Enter/escape/right-side keys: word on the right, as Apple prints them */
.kb-board[data-layout^="mac"] [data-code="Enter"] .kb-legend-word,
.kb-board[data-layout^="mac"] [data-code="Backspace"] .kb-legend-word,
.kb-board[data-layout^="mac"] [data-code="ShiftRight"] .kb-legend-word,
.kb-board[data-layout^="mac"] [data-code="MetaRight"] .kb-legend-word,
.kb-board[data-layout^="mac"] [data-code="AltRight"] .kb-legend-word,
.kb-board[data-layout^="mac"] [data-code="ControlRight"] .kb-legend-word { text-align: right; }
.kb-board[data-layout^="mac"] [data-code="Escape"] .kb-legend-main { align-self: flex-start; }
.kb-board[data-layout^="mac"] .kb-key--short .kb-cap { font-size: calc(var(--u) * .15); inset: 0 0 calc(var(--u) * .03); }
.kb-board[data-layout^="mac"] .kb-key.is-down {
    box-shadow: 0 0 0 2px var(--kb-accent), 0 0 calc(var(--u) * .45) rgb(61 139 255 / 55%);
}
.kb-board[data-layout^="mac"] .kb-key.is-down .kb-cap { background: linear-gradient(180deg, #6aa9ff, var(--kb-accent)); color: #fff; }
.kb-board[data-layout^="mac"] .kb-key.is-tested .kb-cap { background: linear-gradient(180deg, #e8fbef, #d3f5df); color: #14532d; }
.kb-board[data-layout^="mac"] .kb-key.is-tested::after { background: var(--kb-ok); box-shadow: none; bottom: calc(var(--u) * .1); }
/* Mac modifiers print a word along the bottom edge; mark them with a corner dot instead of an underline through it. */
.kb-board[data-layout^="mac"] .kb-key--mod.is-tested::after { left: calc(var(--u) * .1); right: auto; top: calc(var(--u) * .1); bottom: auto; width: calc(var(--u) * .1); height: calc(var(--u) * .1); }
.kb-board[data-layout^="mac"] .kb-key.is-tested.is-down .kb-cap { background: linear-gradient(180deg, #6aa9ff, var(--kb-accent)); color: #fff; }
.kb-board[data-layout^="mac"] .kb-key.is-untestable .kb-cap { background: repeating-linear-gradient(135deg, #f3f4f6 0 6px, #e5e7eb 6px 12px); }
.kb-board[data-layout^="mac"] .kb-touchid { background: radial-gradient(circle, #d1d5db 55%, #9ca3af 57%, #e5e7eb 62%); }

/* ---------- start hint ---------- */

.kb-focus-hint {
    position: absolute; left: 50%; bottom: clamp(10px, 2vw, 20px); transform: translateX(-50%);
    padding: 8px 16px; border-radius: 999px;
    background: rgb(16 22 43 / 85%); color: #fff; font-size: .88rem; font-weight: 600; white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgb(16 22 43 / 60%);
    animation: kb-breathe 2.2s ease-in-out infinite;
    pointer-events: none;
    transition: opacity .3s ease;
}
.kb-has-input .kb-focus-hint { opacity: 0; animation: none; }
@keyframes kb-breathe { 50% { transform: translateX(-50%) translateY(-3px); } }

/* ---------- panel ---------- */

.kb-panel {
    display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(280px, 1fr) auto; gap: 18px 26px; align-items: center;
    padding: 22px clamp(16px, 3vw, 32px) 10px;
}

.kb-last { display: flex; align-items: center; gap: 18px; min-width: 0; }
.kb-last-cap {
    flex: none; display: grid; place-items: center;
    min-width: 88px; height: 88px; padding: 0 14px;
    border-radius: 18px; background: linear-gradient(180deg, #ffffff, #eef1f7);
    border: 1px solid var(--kb-line);
    box-shadow: 0 6px 0 #d7dbe6, 0 14px 22px -12px rgb(16 22 43 / 35%);
    font-size: 1.9rem; font-weight: 800; color: var(--kb-ink); white-space: nowrap;
}
.kb-last-cap.is-pop { animation: kb-press .22s ease; }
@keyframes kb-press { 35% { transform: translateY(5px); box-shadow: 0 1px 0 #d7dbe6, 0 6px 12px -8px rgb(16 22 43 / 35%); } }

.kb-last-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; min-width: 0; font-size: .9rem; }
.kb-last-info div { min-width: 0; }
.kb-last-info dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kb-muted); }
.kb-last-info dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kb-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.kb-stat { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #f6f8fc; border: 1px solid var(--kb-line); }
.kb-stat strong { display: block; font-size: 1rem; }
.kb-stat span { display: block; font-size: .78rem; color: var(--kb-muted); }
.kb-stat-big { display: grid !important; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--kb-line); font-size: 1.35rem !important; font-weight: 800; color: var(--kb-ink) !important; }

.kb-progress { position: relative; width: 52px; height: 52px; flex: none; }
.kb-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kb-progress circle { fill: none; stroke-width: 3.4; }
.kb-progress-track { stroke: #e3e7f1; }
.kb-progress-bar { stroke: var(--kb-ok); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset .3s ease; }
.kb-progress span { position: absolute; inset: 0; display: grid !important; place-items: center; font-size: .75rem !important; font-weight: 700; color: var(--kb-ink) !important; }
.kb-is-complete .kb-progress-bar { stroke: #16a34a; }

.kb-actions { display: flex; gap: 8px; }
.kb-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 42px; padding: 0 16px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--kb-line); background: #fff; color: var(--kb-ink); font-weight: 600; font-size: .9rem;
    box-shadow: 0 4px 10px -8px rgb(16 22 43 / 45%);
    transition: background-color .15s ease, transform .1s ease;
}
.kb-btn:hover { background: #f4f7ff; }
.kb-btn:active { transform: translateY(1px); }
.kb-btn svg { width: 18px; height: 18px; }
#kbSound[aria-pressed="false"] { color: var(--kb-muted); }
#kbSound[aria-pressed="false"] .kb-sound-waves { opacity: 0; }

.kb-history-wrap { display: flex; align-items: center; gap: 12px; padding: 10px clamp(16px, 3vw, 32px); min-height: 52px; }
.kb-history-label { flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kb-muted); }
.kb-history { display: flex; gap: 6px; padding: 0; list-style: none; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.kb-chip {
    flex: none; padding: 4px 10px; border-radius: 8px;
    background: #fff; border: 1px solid var(--kb-line); box-shadow: 0 2px 0 #e3e7f1;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; font-weight: 600;
    animation: kb-chip-in .18s ease;
}
.kb-chip:first-child { border-color: var(--kb-accent); color: #1d4ed8; }
@keyframes kb-chip-in { from { transform: translateX(-8px); opacity: 0; } }

.kb-note { padding: 4px clamp(16px, 3vw, 32px) 22px; font-size: .88rem; color: var(--kb-muted); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .kb-panel { grid-template-columns: 1fr 1fr; }
    .kb-actions { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .kb { border-radius: 20px; }
    .kb-toolbar { padding: 12px; }
    .kb-layouts { width: 100%; }
    .kb-layouts button { flex: 1 1 45%; justify-content: center; padding: 0 8px; }
    .kb-panel { grid-template-columns: 1fr; }
    .kb-last-cap { min-width: 70px; height: 70px; font-size: 1.5rem; }
    .kb-focus-hint { white-space: normal; text-align: center; width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
    .kb *, .kb *::before, .kb *::after { animation: none !important; transition: none !important; }
}