/*******************************
          Variables
*******************************/

:root {
  --page-width: 900px;

  --code-bg: var(--ui-background-emphasis);
  --code-purple: #6F42C1;
  --code-default: #54595E;
  --code-blue: #005CC5;
  --code-red: #D73A49;
  --code-comment: #6A737D;
  --code-grey: #24292E;
  --table-hover: var(--primary-5);
}

html.dark {
  --code-purple: #D2A8FF;
  --code-default: #C9D1D9;
  --code-blue: var(--primary-text-color);
  --code-red: #F97583;
  --code-comment: #6A737D;
  --code-grey: #8B949E;
}

/*******************************
           Layout
*******************************/

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--gutter-l) var(--gutter-l) 0;
}

.container {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter-l) var(--margin-xl);
  font-size: var(--text-l);
}

/*******************************
           Header
*******************************/

.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-bottom: var(--margin-xs);

  h1 {
    letter-spacing: -0.01em;
    color: var(--header-color);
    margin: 0;
    font-size: var(--text-2xl);
  }

  .links {
    font-size: var(--text-s);
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    a {
      color: var(--muted-text-color);
      text-decoration: none;
      transition: color 0.12s;

      &:hover { color: var(--primary-text-color); }
    }

    .sep { color: var(--border-color); }

    .updated {
      color: var(--light-text-color);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .theme-toggle {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 16px;
      height: 16px;
      background-color: var(--muted-text-color);
      mask-image: var(--icon-moon);
      mask-size: contain;
      mask-repeat: no-repeat;
      transition: background-color 0.15s;

      &:hover { background-color: var(--header-color); }
    }
  }
}

html.light .header .links .theme-toggle { mask-image: var(--icon-sun); }

/*******************************
        Navigation
*******************************/

.navigation {
  display: inline-flex;
  border: var(--border);
  box-shadow: var(--subtle-shadow);
  border-radius: var(--border-radius-xl);
  padding: var(--padding-3xs);
  margin: var(--vertically-spaced);
  gap: var(--gap-xs);

  a {
    padding: var(--padding-s) var(--padding);
    font-size: var(--text-s);
    font-weight: var(--bold);
    border-radius: 8px;
    text-decoration: none;
    color: var(--standard-20);
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;

    &:hover { color: var(--standard-80); }

    &.active {
      color: var(--standard-100);
      background: var(--blue-10);
    }
  }
}

/*******************************
           Icons
*******************************/

h2 .icon, h3 .icon {
  opacity: 0.4;
  margin-right: var(--gap-xs);
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  flex-shrink: 0;
}

/*******************************
          Sections
*******************************/

h2 {
  margin: var(--gap-xl) 0 var(--gap);
  border-bottom: var(--border);
  padding-bottom: var(--padding-3xs);
  &:first-child { margin-top: 0; }
}

h3 {
  margin: var(--gap-xl) 0 var(--gap-2xs);
  padding-top: 0.5rem;
}

h3 + p, h3 + .hint { margin-top: 0; }

/* a heading arrived at by link should not sit flush against the viewport */
h2, h3 { scroll-margin-top: var(--margin); }

.anchor {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.45em;
  vertical-align: baseline;
  background-color: var(--standard-40);
  mask-image: var(--icon-link);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: 0;
  transition: opacity 0.12s;
}

h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { background-color: var(--primary-color); }

.intro {
  color: var(--muted-text-color);
  line-height: 1.65;
  margin-bottom: var(--margin);
}

.hint {
  color: var(--light-text-color);
  font-size: var(--text-s);

  a {
    color: var(--primary-text-color);
    text-decoration: none;
    &:hover { text-decoration: underline; }
  }
}

.category {
  font-size: var(--text-2xs);
  font-weight: var(--bold);
  color: var(--muted-text-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--margin-l) 0 var(--margin-xs);
}

hr.sep {
  border: none;
  border-top: var(--border);
  margin: var(--margin-l) 0;
}

/*******************************
          Callout
*******************************/

.callout {
  border: var(--border);
  border-left: 3px solid var(--primary-color);
  border-radius: var(--border-radius);
  background-image: var(--very-subtle-gradient);
  padding: var(--padding) var(--padding-l);
  margin: var(--vertically-spaced);
  font-size: var(--text-s);

  p:first-child { margin-top: 0; }
  p:last-child { margin-bottom: 0; }

  &.warning { border-left-color: var(--orange-80); }
}

/*******************************
         Code Blocks
*******************************/

.code-block {
  position: relative;
  background: var(--code-bg);
  border: var(--border);
  border-radius: var(--border-radius);
  margin: var(--vertically-spaced);

  .copy {
    position: absolute;
    top: var(--gap-s);
    right: var(--gap-s);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    width: 16px;
    height: 16px;
    background-color: var(--standard-50);
    mask-image: var(--icon-copy);
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  &:hover .copy { opacity: 0.6; }
  .copy:hover { background-color: var(--standard-80); opacity: 1; }
  .copy.done { background-color: var(--positive-color); mask-image: var(--icon-check); opacity: 1; }

  pre {
    margin: 0;
    background: none;
    border: none;
    padding: var(--padding) var(--padding-l);
    font-family: var(--code-font);
    font-size: var(--text-s);
    line-height: 1.8;
    color: var(--code-default);
    overflow-x: auto;
  }
}

code { font-family: var(--code-font); font-size: var(--text-s); }

p code, li code, td code {
  background: var(--subtle-angled-gradient);
  padding: 5px 4px;
  margin: -3px 2px;
  border: var(--subtle-border);
  border-radius: var(--border-radius);
  color: var(--standard-90);
  font-size: var(--text-s);
}

.kw { color: var(--code-red); }
.st { color: var(--code-blue); }
.at { color: var(--code-blue); }
.tg { color: var(--code-purple); }
.fn { color: var(--code-purple); }
.cm { color: var(--code-comment); }
.el { color: var(--code-grey); }

/*******************************
           Tables
*******************************/

.table-wrap { overflow-x: auto; }

table {
  margin: var(--margin-l) 0 var(--margin);
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);

  th {
    text-align: left;
    font-weight: var(--bold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blue-80);
    padding: var(--padding-xs);
    border-bottom: var(--internal-border);
    white-space: nowrap;
  }

  td {
    padding: var(--padding-xs);
    border-bottom: var(--internal-border);
    vertical-align: top;

    &.secondary { color: var(--muted-text-color); }
    &.mono { font-family: var(--code-font); font-size: var(--text-xs); }

    .hint { margin-top: var(--margin-3xs); font-size: var(--text-xs); }

    &.date {
      color: var(--light-text-color);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    /* a source with no fixed date is a weaker signal than a dated one, so it
       reads quieter rather than competing with the dates around it */
    &.date.none { color: var(--standard-30); }
  }

  tr:hover td { background: var(--table-hover); }
}

/* Reference tables hold one shape across the page, so a reader scanning down
   finds the source, the description and the date in the same places every time. */
table.refs {
  table-layout: fixed;

  th:nth-child(1), td:nth-child(1) { width: 30%; }
  th:nth-child(3), td:nth-child(3) { width: 7rem; }
}

@media (max-width: 640px) {
  table.refs {
    th:nth-child(1), td:nth-child(1) { width: 38%; }
    th:nth-child(3), td:nth-child(3) { width: 6rem; }
  }
}

/* Two-column tables pin their label column to one width, so a page made mostly
   of them keeps a single left edge as it scrolls rather than reflowing per
   table. Selected by shape, so a table gains this by being two columns wide
   and not by remembering to add a class. */
table:has(> tbody > tr > td:nth-child(2):last-child) {
  table-layout: fixed;

  th:first-child, td:first-child { width: 34%; }
}

@media (max-width: 640px) {
  table:has(> tbody > tr > td:nth-child(2):last-child) {
    th:first-child, td:first-child { width: 42%; }
  }
}

/*******************************
           Chips
*******************************/

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--code-font);
  font-size: var(--text-xs);
  font-weight: var(--bold);
  padding: 0.25em 0.6em;
  border-radius: var(--border-radius);
  white-space: nowrap;
  background: var(--standard-5);
  color: var(--muted-text-color);
}

.chip.ready    { background: var(--green-10);  color: var(--green-80); }
.chip.refused  { background: var(--red-10);    color: var(--red-80); }
.chip.error    { background: var(--orange-10); color: var(--orange-80); }
.chip.running  { background: var(--standard-5); color: var(--muted-text-color); }

.chip .icon { width: 0.9em; height: 0.9em; }

/*******************************
        Endpoint board
*******************************/

.board { margin: var(--margin-l) 0 var(--margin); }

.endpoint {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  flex-wrap: wrap;
  padding: var(--padding-s) var(--padding-xs);
  border-bottom: var(--internal-border);

  &:hover { background: var(--table-hover); }

  .who {
    flex: 1 1 20rem;
    min-width: 0;
  }

  .url {
    font-family: var(--code-font);
    font-size: var(--text-s);
    color: var(--standard-90);
    word-break: break-all;
  }

  .what {
    font-size: var(--text-xs);
    color: var(--light-text-color);
    margin-top: 2px;
  }

  button { flex-shrink: 0; }
  .chip { flex-shrink: 0; min-width: 6.5rem; justify-content: center; }
}

/*******************************
           Controls
*******************************/

button.action {
  font-family: var(--page-font);
  font-size: var(--text-s);
  font-weight: var(--bold);
  min-height: 40px;
  padding: var(--padding-xs) var(--padding);
  border: var(--border);
  border-radius: var(--border-radius);
  background: var(--standard-5);
  color: var(--standard-90);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;

  &:hover:not(:disabled) { background: var(--standard-10); }
  &:disabled { opacity: 0.45; cursor: default; }

  &.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
  }
  &.primary:hover:not(:disabled) { filter: brightness(1.08); }
}

.dialer {
  border: var(--border);
  border-radius: var(--border-radius);
  background-image: var(--very-subtle-gradient);
  padding: var(--padding-l);
  margin: var(--vertically-spaced);

  label:not(.switch) {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--bold);
    color: var(--muted-text-color);
    margin: var(--margin-s) 0 var(--margin-3xs);
  }

  details {
    margin-top: var(--margin);
    border-top: var(--internal-border);
    padding-top: var(--padding-xs);
  }

  summary { cursor: pointer; padding: var(--padding-3xs) 0; }

  input[type=text] {
    width: 100%;
    font-family: var(--code-font);
    font-size: var(--text-s);
    min-height: 40px;
    padding: var(--padding-xs) var(--padding-s);
    border: var(--border);
    border-radius: var(--border-radius);
    background: var(--page-background);
    color: var(--standard-100);

    &:focus { outline: none; box-shadow: var(--focused-ring-shadow); border-color: var(--primary-color); }
    &:disabled { opacity: 0.6; }
  }

  .row {
    display: flex;
    gap: var(--gap-s);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--margin-s);
  }

  .grow { flex: 1 1 12rem; }
}

.switch {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xs);
  font-size: var(--text-s);
  color: var(--muted-text-color);
  margin-top: var(--margin-s);
  cursor: pointer;

  a { color: var(--primary-text-color); }

  /* the native control keeps its semantics and keyboard behaviour; only the
     painting is ours, so the tick is the same Lucide mask the rest of the page
     uses rather than a platform glyph in a platform colour */
  input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    width: 1.15em;
    height: 1.15em;
    margin: 0.05em 0 0;
    flex-shrink: 0;
    border: var(--border);
    border-radius: 0.3em;
    background: var(--page-background);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;

    &::before {
      content: "";
      width: 0.72em;
      height: 0.72em;
      background-color: var(--white);
      mask-image: var(--icon-check);
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      transform: scale(0);
      transition: transform 0.12s ease-out;
    }

    &:checked {
      background: var(--primary-color);
      border-color: var(--primary-color);
    }
    &:checked::before { transform: scale(1); }

    &:focus-visible { outline: none; box-shadow: var(--focused-ring-shadow); }
    &:disabled { opacity: 0.45; cursor: default; }
  }

  &:hover input[type=checkbox]:not(:checked):not(:disabled) { border-color: var(--standard-40); }
}

/*******************************
        Code examples
*******************************/

.snippets {
  border: var(--border);
  border-radius: var(--border-radius);
  background-image: var(--very-subtle-gradient);
  padding: var(--padding-s) var(--padding-l);
  margin: var(--vertically-spaced);

  summary {
    cursor: pointer;
    font-size: var(--text-s);
    font-weight: var(--bold);
    color: var(--muted-text-color);
    padding: var(--padding-3xs) 0;

    &:hover { color: var(--header-color); }
  }

  &[open] summary { margin-bottom: var(--margin-xs); }

  .tabs { margin-top: var(--margin); }
  .code-block { margin: 0 0 var(--margin-s); }
  .hint { margin-top: 0; margin-bottom: 0; }
}

.tabs {
  .bar {
    display: flex;
    position: relative;
    gap: 0;
    border-bottom: 3px solid var(--standard-10);
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
  }

  /* positioned from JS, because a tab's width is only knowable once the
     surrounding details element has been opened and laid out */
  .tab-slider {
    position: absolute;
    bottom: -3px;
    left: 0;
    height: 3px;
    background: var(--primary-color);
    border-radius: 1px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .tab {
    padding: var(--padding-xs) var(--padding) var(--padding-2xs);
    font-family: var(--page-font);
    font-size: var(--text-s);
    font-weight: var(--bold);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    color: var(--light-text-color);
    transition: color 0.15s;

    &:hover { color: var(--muted-text-color); }
    &.active { color: var(--header-color); }
  }

  > .content { display: none; padding-top: var(--padding-s); }
  > .content.active { display: block; }
}

.budget { margin-top: var(--margin-s); }

/*******************************
             Log
*******************************/

.log {
  font-family: var(--code-font);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--code-bg);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: var(--padding-s) var(--padding);
  margin-top: var(--margin-s);
  max-height: 20em;
  overflow-y: auto;

  &:empty { display: none; }

  .ok  { color: var(--positive-color); }
  .bad { color: var(--negative-color); }
  .dim { color: var(--light-text-color); }
}

/*******************************
      Server observation
*******************************/

.timeline {
  margin: var(--margin-s) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-s);

  li {
    display: flex;
    gap: var(--gap-s);
    align-items: baseline;
    padding: var(--padding-3xs) 0;
    border-bottom: var(--internal-border);

    &:last-child { border-bottom: none; }
  }

  .at {
    font-family: var(--code-font);
    font-size: var(--text-xs);
    color: var(--light-text-color);
    flex-shrink: 0;
    min-width: 5.5rem;
  }

  .what { flex: 1; }
  .detail { display: block; font-size: var(--text-xs); color: var(--muted-text-color); font-family: var(--code-font); word-break: break-all; }

  li.bad .what { color: var(--negative-color); }
  li.good .what { color: var(--positive-color); }
}

.verdict {
  margin-top: var(--margin-s);
  padding: var(--padding-s) var(--padding);
  border-radius: var(--border-radius);
  font-size: var(--text-s);
  background: var(--standard-5);

  &.bad { background: var(--red-10); color: var(--red-80); }
  &.good { background: var(--green-10); color: var(--green-80); }
}

/*******************************
          Footer
*******************************/

.footer {
  margin: var(--margin-xl) 0 var(--margin-2xl);
  padding-top: var(--margin-s);
  border-top: var(--border);
  color: var(--light-text-color);
  font-size: var(--text-xs);

  .footer-nav {
    display: flex;
    gap: var(--gap-s);
    flex-wrap: wrap;
  }

  .colophon {
    margin: var(--margin-s) 0 0;
    padding-top: var(--margin-xs);
    border-top: var(--internal-border);

    .sep { color: var(--border-color); margin: 0 0.15em; }
  }

  a {
    color: var(--muted-text-color);
    text-decoration: none;
    &:hover { color: var(--primary-text-color); }
  }
}

/*******************************
          Responsive
*******************************/

@media (max-width: 640px) {
  .page, .container { padding-left: var(--gutter); padding-right: var(--gutter); }
  .header { flex-direction: column; align-items: flex-start; gap: var(--gap-2xs); }
  .endpoint .chip { min-width: 0; }
}