/* =========================================================
   Notebook typing sounds (typing-sounds.js): the Settings group
   (switch, four sound tiles always in view, volume, Preview) and the
   focus dock's switch row with its four sound chips.
   ========================================================= */
.nb-set-group + .nb-set-group { border-top: 0; }
.nbk-more { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nbk-more[hidden] { display: none; }

/* Four tiles: two by two, or one row of four where there is room. */
.nbk { container-type: inline-size; }
.nbk-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
@container (min-width: 30rem) { .nbk-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nbk-pack { position: relative; display: flex; min-width: 0; }
.nbk-pack input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nbk-tile {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 92px;
  padding: 12px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease, transform 160ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}
.nbk-tile:hover { border-color: var(--border-hover); }
.nbk-tile:active { transform: scale(0.97); }
.nbk-pic { display: inline-flex; color: var(--text-dim); }
.nbk-pic svg { width: 28px; height: 28px; }
.nbk-pack[data-pack="typewriter"] .nbk-pic { color: var(--warm); }
.nbk-pack[data-pack="clicky"] .nbk-pic { color: var(--blue); }
.nbk-pack[data-pack="thocky"] .nbk-pic { color: var(--purple); }
.nbk-pack[data-pack="soft"] .nbk-pic { color: var(--teal); }
.nbk-name { margin-top: 2px; font: 600 0.82rem/1.2 var(--font-heading); color: var(--text); }
.nbk-sub { font-size: 0.7rem; line-height: 1.3; color: var(--text-muted); }
.nbk-pack input:checked + .nbk-tile {
  border-color: color-mix(in srgb, var(--teal) 70%, transparent);
  background: color-mix(in srgb, var(--teal) 10%, var(--bg-card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 45%, transparent);
}
.nbk-pack input:focus-visible + .nbk-tile { outline: 2px solid color-mix(in srgb, var(--purple) 65%, transparent); outline-offset: 2px; }
/* Off: the sounds stay in view, dimmed; a tap on one turns them on. */
.nbk.is-off .nbk-tile { opacity: 0.55; }
.nbk.is-off .nbk-pack input:checked + .nbk-tile { box-shadow: none; }
.nbk.is-off .nbk-pack input:focus-visible + .nbk-tile { opacity: 0.9; }
@media (hover: hover) { .nbk.is-off .nbk-tile:hover { opacity: 0.9; } }
.nbk-hint { margin: -4px 2px 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-dim); }
.nbk-hint[hidden] { display: none; }

/* While a tile or Preview plays: three small bars. */
.nbk-bars { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.nbk-bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--teal); animation: nbk-bar 0.62s ease-in-out infinite alternate; }
.nbk-bars i:nth-child(2) { animation-delay: -0.21s; }
.nbk-bars i:nth-child(3) { animation-delay: -0.42s; }
@keyframes nbk-bar { from { height: 3px; } to { height: 12px; } }
.nbk-tile .nbk-bars { position: absolute; top: 8px; right: 8px; }
.nbk-playing .nbk-bars { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .nbk-bars i { animation: none; height: 8px; } }

/* Volume: a label, the slider, the number. */
.nbk-vol { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.2em; align-items: center; gap: 12px; padding: 0 2px; }
.nbk-vol-t { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.nbk-vol-n { font: 400 0.76rem/1 var(--font-mono); color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.nbk-range { --v: 70%; -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 30px; margin: 0; background: transparent; cursor: pointer; }
.nbk-range:focus-visible { outline: 2px solid color-mix(in srgb, var(--purple) 65%, transparent); outline-offset: 2px; border-radius: 6px; }
.nbk-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--teal) var(--v), color-mix(in srgb, var(--text-muted) 35%, transparent) var(--v)); }
.nbk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.nbk-range::-moz-range-track { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 35%, transparent); }
.nbk-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--teal); }
.nbk-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }

.nbk-preview { display: inline-flex; align-items: center; gap: 8px; }
.nbk-preview svg { width: 14px; height: 14px; color: var(--teal); }
.nbk-preview .nbk-bars { height: 10px; }

@media (pointer: coarse) {
  .nbk-range { height: 44px; }
  .nbk-range::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -11px; }
  .nbk-range::-moz-range-thumb { width: 26px; height: 26px; }
}
@media (max-width: 380px) {
  .nbk-tile { min-height: 86px; padding: 10px 4px 9px; }
  .nbk-sub { font-size: 0.66rem; }
}

/* The focus dock's ⋯ menu: a full-width row under the tiles (the icon,
   "Typing sounds · Typewriter", a small switch), then the chips. */
.nb-block-sheet-panel .nb-sheet-tiles button.nbk-ft { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 6px 12px; text-align: left; }
.nb-block-sheet-panel .nb-sheet-tiles button.nbk-ft > .nbk-ft-t { flex: 1; min-width: 0; display: block; line-height: 1.25; }
.nbk-ft-dot, .nbk-ft-p { color: var(--text-muted); }
.nbk-ft.on .nbk-ft-p { color: var(--teal); }
.nb-block-sheet-panel .nb-sheet-tiles button.nbk-ft > span.nbk-sw {
  position: relative; flex: none; display: inline-block; overflow: visible; width: 30px; height: 18px; max-width: none;
  border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 45%, transparent); transition: background 180ms ease;
}
.nbk-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.nb-block-sheet-panel .nb-sheet-tiles button.nbk-ft.on > span.nbk-sw { background: var(--teal); }
.nbk-ft.on .nbk-sw::after { transform: translateX(12px); }
.nb-block-sheet-panel .nb-sheet-tiles button.nbk-ft .nb-sheet-ic svg { color: var(--text-muted); }
.nb-block-sheet-panel .nb-sheet-tiles button.nbk-ft.on .nb-sheet-ic svg { color: var(--teal); }
.nb-block-sheet-panel .nb-sheet-tiles button.nbk-ft.on { border-color: var(--border); background: var(--bg-card); }
@media (prefers-reduced-motion: reduce) { .nbk-sw, .nbk-sw::after { transition: none; } }

/* The four sounds as chips under the row (only while on). One row; with
   big text each keeps its whole name and the row wraps instead. */
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips[hidden] { display: none; }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip {
  flex: 1 1 0; min-width: max-content; width: auto; min-height: 50px; padding: 6px 7px 5px; gap: 3px;
  flex-direction: column; justify-content: center; align-items: center;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text-dim);
  font: 500 0.7rem/1.1 var(--font-heading); text-align: center;
}
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip > span.nbk-chip-n { display: block; max-width: none; overflow: visible; white-space: nowrap; -webkit-line-clamp: unset; }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip span.nbk-chip-ic { display: inline-flex; width: auto; color: var(--text-muted); }
.nbk-chip-ic svg { width: 18px; height: 18px; }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip[data-pack="typewriter"] span.nbk-chip-ic { color: var(--warm); }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip[data-pack="clicky"] span.nbk-chip-ic { color: var(--blue); }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip[data-pack="thocky"] span.nbk-chip-ic { color: var(--purple); }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip[data-pack="soft"] span.nbk-chip-ic { color: var(--teal); }
.nb-block-sheet-panel .nb-sheet-tiles .nbk-chips button.nbk-chip[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--teal) 70%, transparent);
  background: color-mix(in srgb, var(--teal) 12%, var(--bg-card));
  color: var(--text);
}