/* The theme page (/theme), on top of /sheet.css: the same board as a theme's
   page in the gallery. Colours of the 見本 come from the theme, set by
   theme.js through the CSSOM (no inline style attributes). */

.meta {
  margin: 0;
  padding: 13px var(--pad);
  border-bottom: 1px solid var(--rule);
  font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

#author {
  color: var(--ink);
}

#license::before {
  content: "/";
  margin: 0 12px;
  opacity: 0.5;
}

/* The colour key: the 16 colours, normal down the left and bright down the
   right, each with its number and value. Last on a phone, beside the 見本 on
   a wide screen. */

.board {
  grid-template-rows: auto auto auto auto 1fr;
}

/* The colours are in the key, not under the screen. */
#sample {
  grid-template-rows: auto;
}

.aside {
  display: flex;
  flex-direction: column;
}

.legend {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(8, minmax(18px, 1fr));
  grid-auto-flow: column;
  gap: 6px var(--pad);
  padding: 18px var(--pad) 22px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.04em;
}

.entry {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.legend .swatch {
  flex: none;
  width: 34px;
  height: 18px;
}

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

#desktop {
  padding: 18px var(--pad);
  border-top: 1px solid var(--rule);
}

@media (min-width: 960px) {
  .board {
    grid-template-rows: 1fr auto auto;
  }

  .legend {
    flex: 0 1 auto;
    grid-template-rows: repeat(8, auto);
    gap: 12px 20px;
    padding: 40px var(--pad);
    font-size: 12px;
  }

  .legend .swatch {
    width: 44px;
    height: 26px;
  }

  #desktop {
    margin-top: auto;
    padding: 24px var(--pad) 28px;
    font-size: 17px;
    line-height: 1.4;
  }

  .cells {
    display: flex;
  }

  .cells .meta {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 18px var(--pad);
    border-bottom: 0;
    font-size: 12px;
  }

  .cells .meta + .meta {
    border-left: 1px solid var(--rule);
  }
}

#trouble {
  padding: 26px var(--pad) 30px;
  border-top: 1px solid var(--rule);
  margin-top: -1px;
}

#trouble h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

#trouble ul {
  margin: 0 0 26px;
  padding-left: 1.2em;
  color: var(--muted);
}

#stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border: 1px solid var(--rule);
}

.store {
  display: grid;
  place-items: center;
  min-height: 52px;
  font: 600 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.store + .store {
  border-left: 1px solid var(--rule);
}