/* Het framework van de toolbox: de stylesheet van repos.bramluiken.org zonder
   wat alleen over git gaat, met de kale elementen opgemaakt, zodat de eigen
   HTML van een tool er zonder klassen uitziet als de rest. proef.html laat
   alles zien. */

@import url("tokens.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

code,
kbd,
samp,
pre {
  font-family: var(--mono);
  font-size: 0.875em;
}

code,
kbd {
  background: var(--code-bg);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

pre {
  background: var(--code-bg);
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.muted {
  color: var(--muted);
}

.narrow {
  max-width: 26rem;
}

/* De kop, over de hele breedte */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.site-header .brand {
  font-weight: 600;
  color: var(--text);
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* De chrome: een pagina die de lijst van tools draagt, heeft de kop bovenaan,
   de lijst links en de tool ernaast. */

body:has(> .toolbox-nav) {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

body:has(> .toolbox-nav) > .site-header {
  grid-column: 1 / -1;
}

/* In een rooster krimpt een element met automatische marges tot zijn inhoud. */
body:has(> .toolbox-nav) > main {
  width: 100%;
}

.toolbox-nav {
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 1rem 0.75rem;
}

.toolbox-nav ul {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toolbox-nav a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  color: var(--text);
}

.toolbox-nav a:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

.toolbox-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* Kaarten, zoals de lijst van repositories */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.25rem;
}

.card-name {
  font-size: 1.05rem;
  font-weight: 600;
}

.card-about {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--accent-soft);
}

.notice,
.error {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.error {
  color: var(--danger);
  border-color: var(--danger);
}

/* Invoer */

.inline {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.inline.wrap {
  flex-wrap: wrap;
}

.stack {
  display: grid;
  gap: 0.5rem;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]),
textarea,
select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

input[readonly],
textarea[readonly] {
  background: var(--code-bg);
  font-family: var(--mono);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--accent);
}

button {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

button.linkish {
  border: none;
  background: none;
  color: var(--accent);
  padding: 0;
}

button.danger {
  color: var(--danger);
  border-color: var(--danger);
}

button.toggle-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Tabellen, zoals die in het beheer van repos */

table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.4rem 0.5rem;
}

td {
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

/* Op een telefoon komt de lijst van tools als een rij boven de tool. */

@media (max-width: 40rem) {
  body:has(> .toolbox-nav) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }

  .toolbox-nav {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1rem;
    overflow-x: auto;
  }

  .toolbox-nav ul {
    position: static;
    display: flex;
    gap: 0.25rem;
  }

  .toolbox-nav a {
    white-space: nowrap;
  }
}