/* Randen gaan via --border-hair (3.8:1); rgba(...,.35) haalde maar 2.2:1 en
     dat is te weinig voor de omtrek van een bedieningselement (WCAG 1.4.11).
     Alle knoppen en swatches zijn minstens --tap (44px) groot. */
  .tool { padding: var(--sp-7) 0 var(--section-y); }
  .tool .sec-head { margin-bottom: var(--sp-2); }

  /* De gereedschapsbalk droeg eerst tien kopjes ("Opstelling", "Acties", ...)
     die samen meer dan een halve regel opslokten. Die zijn vervangen door
     haarlijnen: ze doen hetzelfde groeperingswerk voor nul ruimte, waardoor
     het bord een stuk hoger op de pagina komt te staan. */
  .toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2) 10px; align-items: center; margin: 26px 0 var(--sp-3); }
  .tdiv { width: 1px; align-self: stretch; min-height: 28px; background: var(--border-hair); opacity: .5; margin: 0 6px; }
  .tspacer { flex: 1 1 0; min-width: 0; }
  .tbreak { flex-basis: 100%; height: 0; }
  .tgroup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .tgroup .tl {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase;
    color: var(--text-muted); margin-right: var(--sp-1);
  }
  #frame-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .tbtn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); font-family: var(--font-ui); font-size: var(--fs-label);
    font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; padding: 0 var(--sp-3); background: var(--surface-raised);
    border: var(--bw-hair) solid var(--border-hair); color: var(--text-strong); cursor: pointer;
    /* De exportknop telt live op ("Opnemen 7%" → "100%") en de fase-knoppen
       lopen door naar dubbele cijfers. Met evenwijdige cijfers springt de
       knopbreedte daar niet meer van heen en weer. */
    font-variant-numeric: tabular-nums;
    transition-property: background-color, border-color, color, scale;
    transition-duration: .14s;
    transition-timing-function: ease-out;
  }
  /* `display: inline-flex` hierboven wint van de [hidden]-regel uit de
     browserstijl, waardoor "Zoom reset" altijd zichtbaar bleef. */
  .tbtn[hidden], .tgroup[hidden] { display: none; }
  .tbtn:hover { border-color: var(--ht-navy); }
  .tbtn:active { scale: .96; }
  .tbtn.on { background: var(--ht-navy); color: #fff; border-color: var(--ht-navy); }
  .tbtn.play { background: var(--accent); border-color: var(--accent); color: var(--ht-navy); }
  .tbtn.play:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .swatch {
    width: var(--tap); height: var(--tap);
    border: var(--bw-hair) solid var(--border-hair); cursor: pointer; padding: 0;
    transition-property: scale; transition-duration: .14s; transition-timing-function: ease-out;
  }
  .swatch:active { scale: .96; }
  .swatch.on { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
  @media (prefers-reduced-motion: reduce) {
    .tbtn, .swatch { transition: none; }
    .tbtn:active, .swatch:active { scale: 1; }
  }
  /* De toolbar is verder helemaal uppercase, maar de seconde-aanduiding niet:
     "0,3S" leest als een letter in plaats van als een eenheid. */
  #hold-group .tbtn { text-transform: none; }
  /* Bord en bedieningsbalk vormen één blok: geen tussenruimte, gedeelde rand.
     Dat vertelt zonder woorden dat die knoppen over dít bord gaan. */
  .board-wrap { border: var(--bw) solid var(--border-strong); border-bottom: 0; background: var(--surface-raised); }
  #board { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
  #board.select { cursor: default; }
  .boardbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 18px;
    padding: 10px var(--sp-3); background: var(--surface-raised);
    border: var(--bw) solid var(--border-strong);
  }

  /* Verschijnt bij een selectie. Kort en klein: je ziet hem tientallen keren
     per oefening, dus hij mag opvallen maar niet vertragen. */
  .inspector {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 18px;
    padding: 10px var(--sp-3); margin-top: 6px;
    /* oranje alleen als randje aan de zijkant: een volledig oranje kader leest
       als een waarschuwing, en dit is gewoon context bij je selectie */
    border: var(--bw-hair) solid var(--border-hair);
    border-left: 4px solid var(--accent-text);
    background: var(--surface-raised);
    opacity: 0; transform: translateY(-4px);
    transition-property: opacity, transform;
    transition-duration: .14s;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
  }
  .inspector.show { opacity: 1; transform: none; }
  .inspector .insp-what {
    font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 700;
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-text);
  }
  #stroke-speed-group .tbtn { text-transform: none; }

  /* Sjablonen en opslaan zijn begin- en eindpunt, geen tekengereedschap.
     Ze staan onderaan, met lucht ervoor in plaats van zwakkere knoppen:
     hiërarchie via ruimte, zodat het contrast van de randen intact blijft. */
  .footbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) 22px;
    margin-top: var(--sp-6); padding-top: var(--sp-4);
    border-top: var(--bw-hair) solid var(--border-hair);
  }
  .hintline { font-size: var(--fs-meta); color: var(--text-muted); margin-top: var(--sp-3); line-height: var(--lh-body); }
  .meta-box { margin-top: 18px; border: var(--bw-hair) solid var(--border-hair); background: var(--surface-raised); }
  .meta-box summary {
    display: flex; align-items: center; min-height: var(--tap);
    cursor: pointer; padding: 0 var(--sp-4); font-family: var(--font-ui); font-weight: 700;
    font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--text-strong);
  }
  .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-1) var(--sp-4) var(--sp-4); }
  .meta-grid .mfull { grid-column: 1 / -1; }
  .meta-grid label { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
  .meta-grid input, .meta-grid textarea {
    width: 100%; font-family: inherit;
    font-size: var(--fs-body); /* 16px: anders zoomt iOS Safari in bij focus */
    color: var(--text-strong); background: #fff; min-height: var(--tap);
    border: var(--bw-hair) solid var(--border-hair); padding: 10px var(--sp-3); resize: vertical;
  }
  .meta-grid input:focus, .meta-grid textarea:focus { border-color: var(--accent-text); outline: none; box-shadow: inset 0 0 0 1px var(--accent-text); }
  .tpl-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  @media (max-width: 700px) {
    .tbtn { padding: 0 var(--sp-3); font-size: var(--fs-meta); }
    .meta-grid { grid-template-columns: 1fr; }
    /* op smal scherm hebben de scheidingsstreepjes geen functie meer: alles
       staat toch al onder elkaar te wrappen */
    .tdiv, .tspacer { display: none; }
    .toolbar { gap: var(--sp-2) 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .inspector { transition: none; }
  }