/* ==========================================================================
   lint.css — de balken om een document heen

   Dit stond in `word.css` en is eruit gehaald toen het werkblad erbij kwam.
   Het is één ding, geen twee: de titelbalk, de tabbalk, het lint, de knoppen
   erin en de menu's eronder zien er in de tekstverwerker en in het werkblad
   precies hetzelfde uit, en dat is niet toevallig — het ontwerp tekent ze als
   dezelfde onderdelen.

   Een tweede stel regels met dezelfde maten zou eerst kloppen en daarna
   uiteenlopen: iemand verzet de focusring op het lint van de tekstverwerker en
   niet op dat van het werkblad, en dan zijn het twee linten die op elkaar
   lijken. `docs/architectuur.md` noemt dat één eigenaar per ding.

   De `wp-` in de namen komt uit de tekstverwerker, waar deze regels vandaan
   komen. Ze zijn niet hernoemd: de naam veranderen kost een verandering in
   vier bestanden en ruim duizend regels test, en levert niets op wat dit
   bestand hierboven niet al zegt.

   Wat hier NIET in hoort: alles wat maar één van de twee heeft. De
   stijlgalerij en de ontwerptegels staan daarom nog in `word.css`, de
   formulebalk en de bladtabs in `werkblad.css`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Titelbalk
   -------------------------------------------------------------------------- */

.wp-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 60px;
  flex-shrink: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.wp-title__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.wp-title__back:hover { background: var(--surface-hover); color: var(--text-primary); }
.wp-title__back svg { width: 17px; height: 17px; }

.wp-title__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--chart-1-soft);
  color: var(--chart-1);
}

.wp-title__mark svg { width: 17px; height: 17px; }

.wp-title__name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wp-title__field {
  width: 22ch;
  max-width: 46ch;
  height: 22px;
  padding: 0 6px;
  margin-left: -6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  text-overflow: ellipsis;
}

.wp-title__field:hover:not(:disabled) { border-color: var(--border-subtle); }
.wp-title__field:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.wp-title__field:disabled { color: var(--text-secondary); }

.wp-title__save {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.wp-title__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--text-faint);
}

.wp-title__save[data-state="bezig"] .wp-title__dot { background: var(--status-warning); }
.wp-title__save[data-state="klaar"] .wp-title__dot { background: var(--status-good); }

.wp-title__spacer { flex: 1; }

.wp-title__faces { display: flex; align-items: center; }
.wp-face {
  border: 2px solid var(--surface-raised);
  cursor: pointer;
}
.wp-face + .wp-face { margin-left: -9px; }
.wp-face:hover { transform: translateY(-1px); }
.wp-face:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wp-title__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Het ronde knopje dat overal in dit karkas terugkomt
   -------------------------------------------------------------------------- */

.wp-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.wp-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wp-icon:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.wp-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wp-icon:disabled { color: var(--text-faint); cursor: not-allowed; }

.wp-icon--on {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
  color: var(--accent-soft-ink);
}

a.wp-icon { text-decoration: none; }

/* --------------------------------------------------------------------------
   Tabbalk
   -------------------------------------------------------------------------- */

.wp-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  height: 35px;
  flex-shrink: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.wp-tabs__strip {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.wp-tabs__strip::-webkit-scrollbar { display: none; }
.wp-tabs__spacer { flex: 1; }

.wp-tab {
  flex-shrink: 0;
  height: 34px;
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.wp-tab:hover { color: var(--text-primary); }
.wp-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wp-tab--on {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.wp-tabs__fold {
  align-self: center;
  width: 30px;
  height: 30px;
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Lint

   Vaste hoogte, en hij schuift horizontaal als het venster smaller is dan wat
   erop staat. Dat is de plek waar het ontwerp de hele pagina liet schuiven —
   hier blijft de rest van het karkas staan.
   -------------------------------------------------------------------------- */

.wp-ribbon {
  display: flex;
  align-items: stretch;
  height: 96px;
  flex-shrink: 0;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  overflow-y: hidden;
}

.wp-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-2) 3px;
}

.wp-group + .wp-group { border-left: 1px solid var(--surface-hover); }

.wp-group__body {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
}

/* De stijlgalerij schuift in zijn eigen groep. Zo doet Word het ook — daar
   staan er pijltjes bij — en zo houdt de groep de 319 pixels uit het ontwerp
   in plaats van de groep Bewerken van het lint te duwen. */
.wp-group--gallerij .wp-group__body {
  max-width: 286px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.wp-group__label {
  /* Het ontwerp zet dit kopje op 9px in het lichtste grijs dat er is. Gemeten
     is dat 3,09:1 en de eis is 4,5 — dus een tint donkerder en een pixel
     groter. Een groepsnaam die je moet raden is geen groepsnaam. */
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  white-space: nowrap;
}

.wp-col { display: flex; flex-direction: column; gap: 3px; }
.wp-col--tall { justify-content: flex-start; }
.wp-row { display: flex; align-items: center; gap: 3px; }

/* ---- de knoppen op het lint ---------------------------------------------- */

.wp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.wp-btn__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wp-btn__caret {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-faint);
}

.wp-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.wp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Een knop die uitstaat blijft leesbaar. Hier stond `--text-faint`, en dat
   meet 3,09:1 — onder de streep die `CLAUDE.md` zichzelf oplegt. Het viel niet
   op omdat er in de contrastmeting nooit een uitgezette lintknop stond; sinds
   "vorige bladzijde" en A+ zichzelf uitzetten wel.

   En het is meer dan een getal: waaróm een knop uitstaat staat in zijn opschrift
   en zijn `title`, en een reden die je moet raden is geen reden. Een tint
   donkerder haalt 5,47:1 en blijft duidelijk lichter dan een knop die het wel
   doet. */
.wp-btn:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.wp-btn--on {
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
  color: var(--accent-soft-ink);
}

.wp-btn--groot {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 54px;
  height: 49px;
  padding: 0 2px;
}

.wp-btn--groot .wp-btn__icon { width: 20px; height: 20px; }
.wp-btn--groot .wp-btn__label { font-size: 10.5px; }

.wp-btn--split {
  justify-content: center;
  width: 54px;
  height: 16px;
  padding: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.wp-btn--split .wp-btn__caret { width: 12px; height: 12px; }

/* Een knop met een breed opschrift: de lettertypenaam. */
.wp-btn--wide { width: 146px; }
.wp-btn--wide .wp-btn__value { flex: 1; min-width: 0; text-align: left; }

.wp-btn__value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A+ en A-: geen pictogram maar twee tekens, want elk plaatje ervoor zegt
   minder dan de letters zelf. */
.wp-btn__type {
  min-width: 17px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}
/* Het getal dat het lint alleen maar toont — de zoomstand. */
.wp-read {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 5px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* ---- het menu onder een lintknop ------------------------------------------ */

.wp-menu {
  position: fixed;
  z-index: 40;
  min-width: 190px;
  max-height: 60vh;
  padding: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}

.wp-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 30px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.wp-menu__item:hover:not(:disabled) { background: var(--surface-hover); }
.wp-menu__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wp-menu__item:disabled { color: var(--text-faint); cursor: not-allowed; }

.wp-menu__icon,
.wp-menu__tick {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wp-menu__icon { color: var(--text-muted); }
.wp-menu__tick { margin-left: auto; color: var(--accent); }
.wp-menu__text { flex: 1; min-width: 0; }

.wp-menu__rule {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--border-subtle);
}

/* ---- een rooster van kleurvakjes ------------------------------------------ */

.wp-menu--grid {
  display: grid;
  grid-template-columns: repeat(6, 20px);
  gap: 5px;
  min-width: 0;
  padding: var(--space-2);
}

.wp-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.wp-swatch:hover { border-color: var(--accent); }
.wp-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Geen kleur. Een leeg vakje is niet te onderscheiden van wit papier, dus er
   staat een streep doorheen — hetzelfde teken dat elke tekenapplicatie
   gebruikt voor "niets". */
.wp-swatch--none {
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 1px), var(--critical-ink) calc(50% - 1px),
      var(--critical-ink) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--surface-raised);
}

/* Welk vakje nu geldt. Een vinkje erin zou de kleur wegnemen die je wilt
   beoordelen, dus het staat eromheen: een donkere rand met een witte ring
   ertussen, zodat hij ook op een donker vakje te zien is. Hij staat ná
   `:hover`, want anders wint de muis van de stand.

   Het ontwerp doet dit nergens — alle zes vakjes hebben er dezelfde rand,
   terwijl het margemenu op dezelfde tab een vinkje zet. */
.wp-swatch--on {
  border-color: var(--text-primary);
  box-shadow: inset 0 0 0 2px var(--surface-raised);
}

/* Een tekstregel of een streep in een kleurenrooster loopt over de volle
   breedte; hij hoort niet in een kolom van twintig pixels geperst te worden.
   `nowrap` erbij, want anders breekt het rooster de regel af op zes vakjes
   breed en staat er "Van het / ontwerp" onder elkaar. */
.wp-menu--grid .wp-menu__item,
.wp-menu--grid .wp-menu__rule { grid-column: 1 / -1; }
.wp-menu--grid .wp-menu__item { white-space: nowrap; }
/* Het vinkje staat normaal op `margin-left: auto` en drijft naar rechts. In
   een rooster is de regel precies zo breed als zijn inhoud, en dan is dat
   niets: het vinkje plakt tegen het laatste woord aan. */
.wp-menu--grid .wp-menu__tick { margin-left: var(--space-3); }