:root {
  --color-link: #0969da;
  --width-layout-wide: 1200px;
}

body {
  padding: 0 50px;
  font-family: "Roboto Flex", sans-serif;
  font-size: 16px;
  color: #333;
}

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


.skin.single>.image,
.skin.single>.image img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  margin-bottom: 1em;
}

.skin.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

h4 {
  margin: 0;
}

h2 {
  margin-bottom: 0.5em;
  margin-top: 0;
}

section {
  margin-bottom: 1em;
}

h3 {
  margin-bottom: 0.5em;
}

section {

  >h2,
  >h3,
  >h4 {
    &:first-child {
      margin-top: 0;
    }
  }
}

.skin.item {
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px;
  position: relative;
}

.skin.list.roles {
  .item {
    display: grid;
    grid-template-areas:
      "event event"
      "credit venue";
    grid-template-columns: 1fr max-content;
    gap: 4px 10px;

    .event {
      grid-area: event;
    }

    .venue {
      grid-area: venue;
      text-align: right;
    }

    .credit {
      grid-area: credit;
    }
  }
}

mark {
  background: inherit;
  font-weight: 500;
  color: red;
}

.skin.credits {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px;

  .person a {
    display: block;
  }
  .credit {
    max-width: 120px;
  }
}

.skin.layout {
  max-width: var(--width-layout-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr min(400px, 50%);
  grid-template-areas: "header header" "main aside";
  gap: 20px;

  >header {
    grid-area: header;
  }

  >main {
    grid-area: main;
  }

  >aside {
    grid-area: aside;
  }
}


.skin.top {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
  max-width: var(--width-layout-wide);
  margin: 0 auto;
  margin-bottom: 20px;
}

.skin.menu {
  display: flex;
  gap: 20px;
  border-bottom: #00B7FF 1px solid;
  z-index: 100;
  background: #fff;

  >* {
    line-height: 2em;
  }
}

.skin.submenu {
  &:empty {
    display: none;
  }

  display:flex;
  gap: 20px;
  padding:0 8px;

  z-index: 100;
  background: #fff;

  a {
    xcolor: white;
    text-decoration: none;
  }

  line-height:2em;

  >a:not(.action)::before {
    content: "#";
    margin-right: 2px;
  }

  a.action {
    color: #0550ae;
    border: 1px solid #0550ae;
    font-weight:500;
    background: linear-gradient(#fff, #fff);
    padding: 2px 8px 0;
    line-height:18px;
    font-size:13px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    align-self: center;
    order:-1;
  }
}

.skin.item>.image,
.skin.item>.image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.skin.list.media>.skin.item {
  display: grid;
  grid-template-areas: "image header" "image content";
  grid-template-rows: max-content 1fr;
  grid-template-columns: max-content 1fr;


  >.image {
    grid-area: image;
  }

  >.header {
    grid-area: header;
    display: block;
    position: relative;
    overflow: hidden;

    h4 {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      margin: 0 auto;
      display: block;
      white-space: nowrap;
    }
  }

  .source,
  .date {
    font-size: 14px;
    font-weight: 600;
  }

  >.content {
    font-size: 14px;

    grid-area: content;
    word-break: break-word;
  }

  gap: 6px 12px;
}

summary {
  cursor: pointer;
}

[x-data-template] {
  --template: attr(data-template);
  anchor-name: attr(--anchor-name);

  &:hover {
    &::before {
      content: attr(data-template);
      position: absolute;
      z-index: 100;

      background: #ffd;
      color: #333;
      border: 1px solid #333;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      pointer-events: none;
      top: anchor(bottom);
      left: anchor(left);
    }


  }
}

h2,
h3,
h4 {
  &:not(:has(~ :not([hidden]))) {
    display: none;
  }
}


/* dev-inspector.css - inject once when ?inspect=1 or in /dev routes */
noxt-node {

  display: block;
  border: 1px solid #ccd;
  border-radius: 4px;
  margin: 4px 0;
  padding: 4px 6px;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  background: #f8f9fa;
  position: relative;

  noxt-name {
    [type="component"]>& {

      color: red;
    }

    font-weight: 600;
    color: #0969da;
    margin-right: 0.5em;
  }



  noxt-props {
    display: grid;
    grid-template-columns: max-content 1fr;

    gap: 2px;
  }

  noxt-prop {
    display: contents;
  }

  noxt-key {
    grid-column: 1;
    color: #0550ae;
    margin-left: 1em;

    &:after {
      content: ' = ';
    }
  }

  noxt-value {
    grid-column: 2;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    summary {
      cursor: pointer;
    }
  }

  noxt-children {
    display: block;
    margin-left: 12px;
    border-left: 2px solid #d0d7de;
    padding-left: 8px;
    margin-top: 4px;
  }

  /* raw html preview */
  noxt-node pre {
    margin: 2px 0;
    background: #fffae6;
    border: 1px solid #eac54f;
    padding: 2px 4px;
    white-space: pre-wrap;
    font-size: 0.75rem;
    max-height: 120px;
    overflow-y: auto;
  }
}

noxt-error {
  display: block;
  margin: 2px 0;
  background: #fffae6;
  border: 1px solid #eac54f;
  padding: 2px 4px;
  white-space: pre-wrap;
  font-size: 0.75rem;
  max-height: 120px;
  overflow-y: auto;
}

::highlight(search-results) {
  background: #ffeb3b;
  color: #000;
}

.skin.filter-box {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .skin.filter {
    background: #fff;
    position: sticky;
    z-index: 100;
    top: 0;
    padding-bottom: 12px;
    display: flex;
    flex-direction: row;
    gap: 6px;

    input {
      flex-grow: 1;
      font-size: 16px;
      padding: 8px 16px;
      border-radius: 100px;
    }
  }
}

[hidden] {
  display: none !important;
}

.skin.list.chips {

  flex-flow: row wrap;

  h2,
  h3 {
    width: 100%;
  }

  .skin.item {
    display: inline-block;

  }
}

.skin.links {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

section {
  scroll-margin-top: 70px;
}

.skin.messages {
  max-width: var(--width-layout-wide);
  margin: 0 auto;
  padding: 12px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  max-height: 140px;
  overflow-y: auto;
}