@layer word-work {
  /* a soft blue accent for interactive and key elements, and a hue for each
     kind of characteristic (see the ww-len… classes) to tint its chips */
  body.light-theme .word-work {
    --ww-accent: #3d6fb8;
    --ww-accent-soft: #c9d9ef;
    --ww-accent-tint: #eef4fb;
    --ww-cat-fg: 40% 42%;
    --ww-cat-bg: 60% 95%;
  }

  body.dark-theme .word-work {
    --ww-accent: #7fa8e0;
    --ww-accent-soft: #2d4466;
    --ww-accent-tint: #121b28;
    --ww-cat-fg: 45% 66%;
    --ww-cat-bg: 30% 14%;
  }

  .ww-len { --ww-hue: 210; }
  .ww-let { --ww-hue: 265; }
  .ww-pos { --ww-hue: 35; }
  .ww-ord { --ww-hue: 170; }
  .ww-clu { --ww-hue: 330; }

  .word-work .tool-nav .tool-title a:last-child {
    color: var(--ww-accent);

    &:hover {
      color: var(--page-link-title-fg-hover);
    }
  }

  .word-work {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .ww-page {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.5rem 1rem 2rem;
  }

  .ww-query {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;

    label {
      color: var(--page-subdued);
    }

    input[type=text] {
      flex-grow: 1;
      min-width: 0;
      background: var(--page-bg);
      color: var(--page-hl);
      border: 0.0625rem solid var(--ww-accent-soft);
      font-family: "Ubuntu Sans Mono", monospace;
      font-size: 1.1rem;
      letter-spacing: 0.1rem;
      padding: 0.25rem 0.5rem;
      text-transform: uppercase;
    }
  }

  .ww-query button, .ww-button, .ww-filter-form button, .ww-compare-form button {
    color: var(--ww-accent);
    background: var(--ww-accent-tint);
    border: 0.0625rem solid var(--ww-accent-soft);
    padding: 0 0.75rem;
    min-height: 1.9rem;
    font: inherit;
    cursor: pointer;

    &:hover, &:focus-visible {
      color: var(--page-hl);
      border-color: var(--ww-accent);
    }
  }

  .word-work input[type=text]:focus {
    outline: 0.0625rem solid var(--ww-accent);
    border-color: var(--ww-accent);
  }

  .ww-intro {
    color: var(--page-fg);

    em {
      color: var(--page-hl);
    }
  }

  .ww-tools {
    padding-left: 1.25rem;

    a {
      color: var(--ww-accent);
    }

    li::marker {
      color: var(--ww-accent-soft);
    }

    /* the example's words, not the "and" between two of them */
    a.ww-example:not(:has(span)), a.ww-example span {
      font-family: "Ubuntu Sans Mono", monospace;
    }
  }

  /* words to rank, in place of an empty page below the introduction */
  .ww-suggestions {
    margin-top: 1.5rem;

    ul {
      list-style: none;
      margin: 0.5rem 0 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    a.ww-suggestion {
      display: inline-block;
      padding: 0.15rem 0.6rem;
      /* tinted by --word-hue, see word_cloud_controller */
      border: 0.0625rem solid oklch(var(--tint-border) var(--word-hue, 0));
      background: oklch(var(--tint-bg) var(--word-hue, 0));
      color: var(--page-hl);
      font-family: "Ubuntu Sans Mono", monospace;
      letter-spacing: 0.05rem;
      text-decoration: none;

      &:hover, &:focus-visible {
        border-color: oklch(var(--tint-border-hover) var(--word-hue, 0));
        background: oklch(var(--tint-bg-hover) var(--word-hue, 0));
      }
    }
  }

  .ww-error {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-left: 0.1875rem solid var(--accent-letter-color);
    background: var(--page-link-bg);
  }

  .ww-note, .ww-count {
    color: var(--page-subdued);
    font-size: 0.85rem;
  }

  a.ww-word {
    color: var(--page-hl);
    font-family: "Ubuntu Sans Mono", monospace;
    text-decoration: none;

    &:hover, &:focus-visible {
      color: var(--ww-accent);
      text-decoration: underline;
    }
  }

  .ww-profile-word {
    margin: 0 0 0.75rem;
    color: var(--page-hl);
    font-family: "Ubuntu Sans Mono", monospace;
    font-size: 1.6rem;
    letter-spacing: 0.15rem;
    text-decoration: underline 0.1875rem var(--ww-accent-soft);
    text-underline-offset: 0.35rem;
  }

  /* a profile's characteristics, one row per tag */
  .ww-traits {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    margin: 0;

    dt {
      color: hsl(var(--ww-hue, 0) var(--ww-cat-fg));
      font-family: "Ubuntu Sans Mono", monospace;
      padding-top: 0.1rem;
    }

    dd {
      margin: 0;
      padding-bottom: 0.5rem;
      border-bottom: 0.0625rem solid var(--page-link-bg);
    }
  }

  .ww-trait-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .ww-trait {
    display: inline-block;
    padding: 0 0.35rem;
    background: var(--page-link-bg);
    color: var(--page-hl);
    font-family: "Ubuntu Sans Mono", monospace;

    small {
      color: var(--page-subdued);
      margin-left: 0.15rem;
    }
  }

  /* chips tinted by their kind of characteristic, below hovered, checked,
     and shared chips */
  :where(.ww-traits dd[class]) .ww-trait:not(.ww-shared) {
    background: hsl(var(--ww-hue) var(--ww-cat-bg));
  }

  .ww-orders {
    margin-bottom: 0.25rem;

    summary {
      color: var(--page-fg);
      cursor: pointer;

      &::marker {
        color: hsl(var(--ww-hue, 0) var(--ww-cat-fg));
      }
    }

    .ww-trait-row {
      margin: 0.25rem 0 0.5rem;
    }
  }

  /* profile characteristics double as checkboxes for building a filter */
  .ww-check {
    cursor: pointer;
    user-select: none;

    input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    &:hover {
      background: var(--page-link-bg-hover);
      outline: 0.0625rem solid hsl(var(--ww-hue, 0) var(--ww-cat-fg));
    }

    &:has(input:checked) {
      background: var(--match-bg);
      outline: 0.0625rem solid var(--page-link-border-hover);
    }

    &:has(input:focus-visible) {
      outline: 0.125rem solid var(--accent-letter-color);
    }
  }

  .ww-profile-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    border-top: 0.0625rem solid var(--ww-accent-soft);
    background: var(--page-bg);
  }

  .ww-filter {
    h1 {
      font-size: 1.2rem;
      color: var(--page-hl);
      margin: 0 0 0.75rem;
    }
  }

  .ww-filter-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

    input[type=text] {
      flex-grow: 1;
      min-width: 0;
      background: var(--page-bg);
      color: var(--page-hl);
      border: 0.0625rem solid var(--ww-accent-soft);
      font-family: "Ubuntu Sans Mono", monospace;
      font-size: 1rem;
      padding: 0.25rem 0.5rem;
    }

  }

  .ww-syntax {
    margin-bottom: 1rem;
    color: var(--page-fg);

    summary {
      cursor: pointer;
      color: var(--page-subdued);
    }

    dl {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 0.15rem 1rem;
      margin: 0.5rem 0;
    }

    dt {
      font-family: "Ubuntu Sans Mono", monospace;
      color: var(--page-hl);
    }

    dd {
      margin: 0;
    }
  }

  .ww-results-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    color: var(--page-subdued);
    margin-bottom: 0.5rem;

    .ww-match-count {
      color: var(--page-hl);
    }

    code {
      color: var(--page-fg);
    }
  }

  .ww-words {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.15rem 1rem;

    li {
      border-bottom: 0.0625rem solid var(--page-link-bg);
    }
  }

  .ww-empty {
    color: var(--page-subdued);
  }

  .ww-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;

    h1 {
      margin: 0;
    }
  }

  a.ww-button {
    display: inline-block;
    min-height: auto;
    padding: 0.1rem 0.6rem;
    font-size: 0.9rem;
    text-decoration: none;
  }

  .ww-small-link {
    color: var(--page-subdued);
    font-size: 0.75rem;
    text-decoration: none;

    &:hover, &:focus-visible {
      color: var(--ww-accent);
      text-decoration: underline;
    }
  }

  /* ranked words, shaded by score, see ww_rarity_shade */
  .ww-matches {
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.15rem 1rem;

    li {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      padding: 0 0.25rem;
      border-bottom: 0.0625rem solid var(--page-link-bg);
      background: hsl(var(--match-hue, 0) 75% 50% / var(--match-strength, 0));
    }

    .ww-word {
      flex-grow: 1;
    }

    .ww-score {
      color: var(--page-subdued);
      font-size: 0.85rem;
      font-family: "Ubuntu Sans Mono", monospace;
    }
  }

  .ww-comparison, .ww-profile, .ww-ranking {
    h2 {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.75rem;
      margin: 1.25rem 0 0.5rem;
      padding-left: 0.5rem;
      border-left: 0.1875rem solid var(--ww-accent-soft);
      font-size: 1.1rem;
      color: var(--page-hl);
    }
  }

  .ww-compare-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;

    input[type=text] {
      flex: 1 1 8rem;
      min-width: 0;
      background: var(--page-bg);
      color: var(--page-hl);
      border: 0.0625rem solid var(--ww-accent-soft);
      font-family: "Ubuntu Sans Mono", monospace;
      font-size: 1.1rem;
      letter-spacing: 0.1rem;
      padding: 0.25rem 0.5rem;
      text-transform: uppercase;
    }

  }

  .ww-inline-compare input[type=text] {
    width: 10rem;
    background: var(--page-bg);
    color: var(--page-hl);
    border: 0.0625rem solid var(--ww-accent-soft);
    font-family: "Ubuntu Sans Mono", monospace;
    font-size: 0.9rem;
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
  }

  .ww-score-line {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .ww-big-score {
    color: var(--page-hl);
    font-family: "Ubuntu Sans Mono", monospace;
    font-size: 2.5rem;
    line-height: 1;
  }

  .ww-trait.ww-shared {
    background: var(--match-bg);
    color: var(--match-fg);
  }

  .ww-side-by-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;

    h3 {
      margin: 0 0 0.35rem;
      font-size: 1rem;
    }
  }

  .ww-words li.ww-pair-word .ww-word {
    font-weight: 700;
  }
}