@layer site {

:root {
  --font-size-base: 13px;
  --gutter: var(--pad-sm);
}

.icon-link { display: inline-flex; }

header nav :any-link { padding-inline: var(--pad-xs); }
header nav :any-link.icon-link { padding-inline: 0; }
header nav :any-link:last-child { padding-inline-end: 0; }
header nav :any-link svg { transform: translateY(3px); }

#page-header {
  display: flex;
  border-block-end: var(--border);
  align-items: baseline;
  justify-content: space-between;
  padding-inline: var(--gutter);
  padding-block: calc(var(--pad-xs) + 2px) var(--pad-xs);
}

#page-header h2 > :not(:last-child) { font-weight: normal; }
#page-header h2 .divider {
  color: var(--line);
  padding-inline: var(--pad-2xs);
}

#page-header nav {
  display: flex;
  align-items: center;
  gap: var(--pad);
}

#page-header nav > * {
  font-size: var(--font-sm);
  text-transform: uppercase;
}

header :any-link,
footer :any-link,
#page-header :any-link,
tr :any-link { text-decoration-color: transparent; }

header:hover :any-link,
footer:hover :any-link,
#page-header:hover :any-link,
tr:hover :any-link { text-decoration-color: var(--line); }

header:hover :any-link:hover,
footer:hover :any-link:hover,
#page-header:hover :any-link:hover,
tr:hover :any-link:hover { text-decoration-color: var(--ink); }

h3 { margin-block-end: var(--pad-xs); }

tr { border-block-end: var(--border-muted); }
thead tr { border-block-end: var(--border); }
tbody tr:hover { background-color: var(--paper); }

th, td {
  padding: var(--pad-xs) var(--pad-sm) var(--pad-2xs);
  text-align: center;
}
.textual { text-align: start; }

dl {
  display: flex;
  gap: var(--pad-lg);
}
dt { font-weight: var(--bold); }
dd { overflow-wrap: anywhere; }

@media (width <= 760px) { /* tablet */
  dl {
    flex-wrap: wrap;
    gap: var(--pad-sm) var(--pad);
  }
}

body:is(.sessions, .passwords) section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  margin-block-start: -20%;
  gap: var(--pad);
}

}