:root {
  --ink: #17171a;
  --ink-soft: #5f5f6b;
  --ink-faint: #8b8b98;

  --line: #e4e4ea;
  --line-strong: #d0d0da;

  --paper: #ffffff;
  --ground: #f7f7f9;
  --hover: #f2f2f6;

  --accent: #1f5fd0;
  --accent-soft: #edf3fd;
  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --ok: #1a6b40;
  --ok-soft: #eaf5ee;

  --radius: 10px;
  --radius-sm: 6px;
  --ring: 0 0 0 3px rgba(31, 95, 208, 0.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

a:hover { color: #17479c; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Header ------------------------------------------------------------------ */

.app-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
  height: 3.5rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.app-header__brand {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.app-header__brand:hover { color: var(--ink); }

.app-header__nav {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
}

.app-header__nav a {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 500;
}

.app-header__nav a:hover {
  background: var(--hover);
  color: var(--ink);
}

.app-header__nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.app-header__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-faint);
  font-size: 0.875rem;
}

/* Layout ------------------------------------------------------------------ */

.app-main {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

h1 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1 { margin: 0; }

.section-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 2.5rem 0 0.25rem;
}

.section-intro {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* Flashes ----------------------------------------------------------------- */

.flashes {
  max-width: 56rem;
  margin: 1.25rem auto -0.75rem;
  padding: 0 1.5rem;
}

.flash {
  margin: 0 0 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.flash--notice { background: var(--ok-soft);     color: var(--ok); }
.flash--alert  { background: var(--danger-soft); color: var(--danger); }

/* Buttons ----------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.button:hover {
  background: var(--hover);
  border-color: var(--ink-faint);
  color: var(--ink);
}

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.button--primary:hover {
  background: #17479c;
  border-color: #17479c;
  color: #fff;
}

/* Quiet actions in a table row. No border until you point at them, so a row
   with three actions does not read as a row of buttons. */
.button--plain {
  padding: 0.35rem 0.6rem;
  border-color: transparent;
  background: none;
  color: var(--ink-soft);
}

.button--plain:hover {
  background: var(--hover);
  border-color: transparent;
  color: var(--ink);
}

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

/* Table ------------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.table td {
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.table tr:first-child td { border-top: 0; }
.table tr:hover td { background: #fafafc; }

.table__main {
  font-weight: 500;
  width: 100%;
}

/* Only as wide as the icon: the name beside it keeps the whole row. */
.table__icon {
  width: 1px;
  padding-right: 0;
  vertical-align: top;
}

/* A favicon, or the tool's initial when the web has none — which is every
   system of our own. Both take the same square, so a list stays a column.
   Inline, so that next to a heading it stands on the same line the letters do
   rather than hanging above it. */
.tool-icon {
  display: inline-block;
  vertical-align: baseline;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  object-fit: contain;
}

/* A solid square needs more air against a heading than a logo with its own
   white space around it does. */
h1 .tool-icon { margin-right: 0.2rem; }

/* overflow: hidden is what makes this sit on the baseline like the image does.
   Without it the letter inside would be the baseline, and the square would hang
   below the line. */
.tool-icon--monogram {
  overflow: hidden;
  text-align: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25rem;
}


/* A plain table cell, not a flex container: a flex td does not stretch to the
   height of its row, which leaves a strip of the table background showing
   whenever the row next to it is taller. */
.table__actions {
  text-align: right;
  white-space: nowrap;
}

.table__actions form { display: inline-flex; margin: 0; }

/* Chips in a row, unlike the actions next to them, do wrap: somebody can hold
   several rights for several reasons and the row has to grow for that. They
   start at the same place in every row rather than ending at the same place,
   because a ragged left edge is harder to read down a column. */
.table__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: 100%;
  padding-left: 1.5rem;
}

/* The name takes only the width it needs, so the chips get the rest. */
.table--people .table__main {
  width: 1%;
  white-space: nowrap;
}

/* A quiet glyph in a row: no chrome until you point at it, so a table of ten
   rows does not read as a wall of buttons. */
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-faint);
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}

.icon-action:hover { background: var(--hover); color: var(--ink); }
.icon-action--danger:hover { background: var(--danger-soft); color: var(--danger); }

/* Forms ------------------------------------------------------------------- */

.form {
  max-width: 26rem;
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form__field { margin-bottom: 1.25rem; }

.form__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.form__field input[type="text"],
.form__field input[type="email"],
.form__field input[type="url"],
.form__field input[type="date"],
.form__field textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  transition: border-color 0.12s;
}

/* A textarea comes with a width in columns and a grab handle of its own. The
   width is the field's, and it grows downwards or not at all — sideways it
   would step out of the form. */
.form__field textarea {
  display: block;
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.45;
}

.form__field input:disabled {
  background: var(--ground);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.form__errors {
  margin-bottom: 1.25rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.9375rem;
}

.form__errors p { margin: 0.15rem 0; }

.form__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Empty state and sign-in ------------------------------------------------- */

.placeholder {
  padding: 2rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
}

.sign-in {
  max-width: 22rem;
  margin: 5rem auto;
  padding: 2.25rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.sign-in h1 { margin-bottom: 0.5rem; }

.sign-in__intro {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* One sentence about a thing, wherever it stands: under the name, quieter than
   it, and never stretched the full width of a page. */
/* One sentence about a thing, under its name and quieter than it. */
.page-header__about,
.tile__about {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* A whole row of the header, so it runs under the buttons instead of being
   squeezed into the column beside them. */
.page-header__about { flex-basis: 100%; }

.tile__about { margin-bottom: 0.75rem; }

.table__links {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
}

.table__links a { color: var(--ink-soft); }
.table__links a:hover { color: var(--accent); }

.external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.external-link svg { opacity: 0.65; }
.external-link:hover svg { opacity: 1; }

.form__hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.breadcrumb {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
}

.breadcrumb a { color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--accent); }

.page-header__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.notice-box {
  margin: 0 0 1.5rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.table__links { align-items: baseline; }

.access {
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
}

/* The name of the right, with the two actions that belong to it. */
.access__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.access__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.access__actions {
  display: flex;
  flex: none;
  gap: 0.15rem;
}

.access__actions form { display: contents; }

.access__row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

/* The gap above is within a row. Two rows need room of their own, all the more
   when the chips in the first one wrap. */
.access__row + .access__row {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.access__label {
  flex: 0 0 4.5rem;
  padding-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.access__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 18rem;
}

.access__empty {
  padding-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem 0.3rem 0.15rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.875rem;
  white-space: nowrap;
}

.chip form { display: inline-flex; margin: 0; }

.chip__remove {
  border: 0;
  background: none;
  padding: 0 0.25rem;
  color: var(--ink-faint);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
}

.chip__remove:hover { color: var(--danger); background: var(--danger-soft); }

/* A date input carries its own idea of how tall it should be, and it is not the
   same as a select's. Letting the row set the height keeps the three of them
   siblings. */
.access__add {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.access__add select,
.access__add input[type="date"],
.access__add input[type="submit"] {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.access__add input[type="submit"] {
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}

.access__add input[type="submit"]:hover {
  background: var(--hover);
  border-color: var(--ink-faint);
}



/* The form that button_to wraps around a button is what sits in the flex row,
   so it has to stretch and the button has to fill it. That keeps an icon button
   exactly as tall as a text button without pinning a height anywhere. */
.page-header__actions { align-items: stretch; }

/* The form a button_to wraps its button in takes no part in the layout, so the
   buttons themselves are the items the row spaces and stretches. Wrapped, a
   square button grew wider than the form shrink-wrapped to and stuck out of its
   own item, leaving 6px of gap on one side against 9px on the other. */
.page-header__actions form { display: contents; }

/* Square, and the same height as the text buttons beside it. Not aspect-ratio:
   in a flex row the width comes from the content, so the ratio never gets to
   decide anything. There is a test on this. */
.button--icon {
  justify-content: center;
  width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  line-height: 0;
}

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

.button--danger-outline:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.muted { color: var(--ink-faint); font-size: 0.8125rem; }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 0.25rem;
}

.section-header .section-heading { margin: 0; }

/* An action that belongs to a section, not to the page. A filled button here
   would outweigh everything it sits above. */
.section-action {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.section-action span { font-weight: 400; }

/* "Mijn toegang": one tile per tool, as many across as fit. Narrower than the
   full-width rows elsewhere, because the point here is to see at a glance which
   systems you get into rather than to read a table. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.tile {
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tile__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.tile__rights {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

/* The reason stands next to the right, not under it: together they are one
   sentence — Editor via Management. */
.tile__reason {
  color: var(--ink-faint);
  font-size: 0.8125rem;
}

.tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink-soft);
  font-size: 0.75rem;
  vertical-align: middle;
}

/* Confidential is the one level that asks something of the reader, so it is
   the one that stands out. The other two keep the quiet tag. */
.tag--confidential {
  background: var(--danger-soft);
  color: var(--danger);
}

.form__choices {
  border: 0;
  padding: 0;
  margin-bottom: 1.25rem;
}

.form__choices legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Deliberately not inside .form__field: that would make ".form__field label"
   win on specificity and lay the radio out above its own text. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.choice:hover { background: var(--hover); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.choice input {
  flex: none;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}

.choice > span { display: block; }
.choice strong { font-weight: 600; }

.choice__hint {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* Many yes-or-no choices in one list. Rows, not cards: fifteen cards would be
   a page of their own, and each row is one name and one level. */
.form__checklist {
  display: grid;
  gap: 0.15rem;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.35;
  cursor: pointer;
}

.checklist__item:hover { background: var(--hover); }
.checklist__item input { flex: none; margin: 0.2rem 0 0; accent-color: var(--accent); }

/* The level follows the name rather than being pushed to the far edge: in a
   form this narrow, a column of its own squeezes long names into three lines. */
.checklist__item .tag { flex: none; margin-top: 0.15rem; }

.form__check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.form__check input {
  flex: none;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}
.form__check label { font-weight: 500; }

.chip--planned { border-style: dashed; }

.chip__note {
  margin-left: 0.2rem;
  color: var(--ink-faint);
  font-size: 0.8125rem;
}