/* Sinn from the keyboard (keyboard.js): one focus ring everywhere, the free time on the schedule, the "?" card */
/* the ring: Sinn's blue, two pixels, just outside the control; only when the keyboard moved there (never on a click) */
:is(button, a[href], [role=button], [role=tab], [role=menuitem], [role=option], [tabindex], summary):focus-visible { outline: 2px solid var(--c1); outline-offset: 2px }
/* inside something that clips (a list row, the visit grid, a menu) the ring sits on the inside edge so it is seen whole */
.menu [role=menuitem]:focus-visible, .sr-res .sr-hit:focus-visible, .bk-res button:focus-visible, .nav2 a:focus-visible { outline-offset: -2px }
.grid .ev:focus-visible { outline: 2px solid var(--c1); outline-offset: 1px; z-index: 4 }
/* a search box shows it has the cursor (its input has no border of its own) */
.search:focus-within { box-shadow: 0 0 0 2px var(--c1) }
.mgrid button:focus-visible { outline-offset: 0 }

/* the free time the arrow keys are on: a dashed box in the chair, with what Enter does */
.kb-slot { position: absolute; z-index: 3; inset-inline-start: 3px; inset-inline-end: 4px; border: 1.5px dashed var(--c1); border-radius: 7px; background: var(--c1b); color: var(--c1t); display: flex; flex-direction: column; gap: 1px; padding: 3px 8px; overflow: hidden; font-size: var(--fs-12); cursor: pointer }
.kb-slot span { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap }
.kb-slot small { font-size: var(--fs-12); opacity: .8; white-space: nowrap }
.kb-slot:focus-visible { outline: 2px solid var(--c1); outline-offset: 1px }
/* a short free time (10–20 min) keeps to its own height: just the time, on one line */
.kb-slot.kb-short { padding: 0 8px; justify-content: center; font-size: var(--fs-12) }
.kb-slot.kb-short small { display: none }

/* "?" : the keys */
.kb-sheet { width: 460px; max-height: calc(100vh - 40px); overflow: auto; gap: 14px }
.kb-part { display: flex; flex-direction: column; gap: 6px }
.kb-row { display: grid; grid-template-columns: 132px 1fr; gap: 10px; align-items: baseline; font-size: var(--fs-13) }
.kb-keys { display: flex; flex-wrap: wrap; gap: 3px; align-items: center }
.kb-keys i { font-style: normal; color: var(--ink3); font-size: var(--fs-12); margin: 0 2px }
.kb-key { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--sep); border-bottom-width: 2px; border-radius: 6px; background: #f6f6f7; font: 600 11.5px/18px var(--f); text-align: center; color: var(--ink) }
@media (max-width: 560px) { .kb-sheet { width: calc(100vw - 24px) } .kb-row { grid-template-columns: 110px 1fr } }