@import url("theme.css");

[data-tone="paid"] {
  --lane-border: #8c580d;
  --lane-fill: #ffefc7;
  --lane-tint: #fff1cc;
  --lane-rule: #ecd093;
  --lane-header: #ffc64d;
  --lane-ink: #382005;
  --lane-stripe: #b8780d26;
}

:root[data-theme="dark"] [data-tone="paid"] {
  --lane-border: #deb058;
  --lane-fill: #392b1b;
  --lane-tint: #49351b;
  --lane-rule: #6c4f2a;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
h1, h2, p, ol, ul { margin: 0; }
ol, ul { padding: 0; }
:focus-visible { outline: 3px solid #1b70e3; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link { position: absolute; z-index: 10; top: 8px; left: 8px; padding: 8px 12px; background: var(--surface); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.search-form { display: flex; height: 38px; margin-bottom: 14px; overflow: hidden; border: 3px solid var(--ink); border-radius: 9px; background: var(--surface); box-shadow: 2px 3px var(--ink); }
.search-form:focus-within { outline: 2px solid var(--link-hover); outline-offset: 2px; }
.search-form input { flex: 1; min-width: 0; padding: 3px 10px 3px 13px; border: 0; background: transparent; outline: none; color: var(--text); font-size: 14px; }
.search-form input::placeholder { color: var(--placeholder); }
.search-form button { display: grid; place-items: center; width: 45px; border: 0; border-left: 3px solid var(--ink); background: var(--yellow); color: var(--ink); }
.search-form button:hover { background: #ffef9e; }
.search-form button .icon { width: 22px; height: 22px; }
.header-tools { position: relative; z-index: 4; display: flex; align-items: center; gap: 8px; }
.edition { color: #f6faff; font-size: 11px; font-weight: 750; white-space: nowrap; }
.tool-buttons { display: flex; gap: 7px; }
.tool-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #f6fbff;
  color: var(--ink);
  box-shadow: 2px 3px var(--ink);
  list-style: none;
}
.tool-button::-webkit-details-marker { display: none; }
.tool-button:hover, .category-menu[open] .tool-button { background: var(--yellow); }
.tool-button .icon { width: 21px; height: 21px; }
.theme-toggle { background: #b1e3ff; }
:root[data-theme="dark"] .theme-toggle { background: var(--yellow); }
.mobile-menu-icon, .mobile-theme-toggle { display: none; }
.category-menu { position: relative; }
.menu-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: min(282px, 82vw);
  max-height: min(470px, 63vh);
  overflow: auto;
  padding: 5px;
  border: 3px solid var(--outline);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 4px 5px var(--ink);
}
.category-menu:not([open]) .menu-panel { display: none; }
.menu-panel a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 5px; font-size: 13px; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--surface-soft); }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.search-tag { min-height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; background: var(--surface-soft); color: var(--text); font-size: 12px; white-space: nowrap; }
.search-tag span { margin-right: 2px; color: var(--muted); }
.search-tag:hover { border-color: var(--outline); }
.search-tag[aria-pressed="true"] { border-color: var(--ink); background: var(--yellow); color: var(--ink); box-shadow: inset 0 -2px #b98022; }
.search-tag[aria-pressed="true"] span { color: #304373; }

.main-content { min-height: 48vh; padding-bottom: 34px; }
.directory-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 3px solid var(--outline); }
.directory-heading h1 { font-size: clamp(20px, 3vw, 30px); font-weight: 900; line-height: 1.2; }
.directory-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 2px solid var(--outline);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
}
.directory-intro p { color: var(--muted); line-height: 1.55; }
.guide-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 4px 8px;
  border: 2px solid var(--outline);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--link-hover);
  font-weight: 800;
}
.guide-link:hover { text-decoration: underline; }
.genre-count { padding: 5px 10px; border: 2px solid var(--outline); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 800; white-space: nowrap; }
.genre-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.genre-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 8px;
  border: 3px solid var(--lane-border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}
.genre-tabs button:hover { background: var(--lane-tint); }
.genre-tabs button[aria-selected="true"] { background: var(--lane-header); color: var(--lane-ink); box-shadow: 0 3px var(--lane-border); }
.genre-tabs span { font-size: 11px; font-weight: 800; white-space: nowrap; }
.directory-tags {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 9px 11px;
  border: 2px solid var(--outline);
  border-radius: 7px;
  background: var(--surface);
}
.directory-tags h2 { font-size: 13px; font-weight: 900; }
.tag-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
.tag-heading p { color: var(--muted); font-size: 11px; }
.clear-tags { margin-left: auto; color: var(--link-hover); font-size: 12px; text-decoration: underline; }
.genre-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.genre-column {
  --outline: var(--lane-border);
  --surface-soft: var(--lane-tint);
  --border: var(--lane-rule);
  min-width: 0;
  padding: 10px;
  border: 3px solid var(--lane-border);
  border-radius: 14px;
  background: var(--lane-fill);
  box-shadow: 0 4px var(--lane-border);
  scroll-margin-top: 14px;
}
.genre-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -10px -10px 10px;
  padding: 7px 13px;
  border-bottom: 3px solid var(--lane-border);
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(135deg, transparent 0 12px, #ffffff1c 12px 14px), var(--lane-header);
  color: var(--lane-ink);
}
.genre-group-header h2 { font-size: 20px; font-weight: 900; }
.genre-group-header span { font-size: 12px; font-weight: 800; }
.category-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 10px; }
.category-card {
  --accent: var(--category-accent);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 3px solid var(--outline);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 4px var(--outline);
}
.genre-column[data-tone="paid"] .category-card { --accent: #b88022; }
.category-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 49px;
  margin: 0;
  padding: 6px 10px;
  border-bottom: 3px solid var(--outline);
  border-radius: 10px 10px 0 0;
  scroll-margin-top: 14px;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  background:
    repeating-linear-gradient(135deg, transparent 0 16px, var(--lane-stripe) 16px 18px),
    var(--surface-soft);
}

.category-title > span:last-child { min-width: 0; overflow-wrap: anywhere; }

.category-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  --emblem-edge: color-mix(in srgb, var(--accent) 68%, #202636);
}
.category-emblem::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid var(--emblem-edge);
  border-radius: 9px;
  background: linear-gradient(148deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--emblem-edge));
  box-shadow: 0 1px 1px #151b2833, inset 0 1px #ffffff66;
  transform: rotate(-8deg);
}
.category-emblem::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 5px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff91;
  transform: rotate(-16deg);
}
.category-emblem .icon {
  position: relative;
  width: 17px;
  height: 17px;
  color: #fff;
  filter: drop-shadow(0 1px 1px #161c3660);
}
.rank-list { padding: 6px 8px 8px; list-style: none; }
.rank-item { display: flex; min-width: 0; align-items: stretch; }
.rank-item + .rank-item { border-top: 1px solid var(--border); }
.rank-item[value="1"], .rank-item:hover, .rank-item:focus-within { background: var(--surface-soft); }
.rank-item[value="1"] { border-radius: 6px; }
.rank-link { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; min-height: 29px; padding: 3px; font-size: 13px; font-weight: 700; }
.rank-link:hover { color: var(--link-hover); }
.rank-link:focus-visible { outline-offset: -3px; }
.rank-item[value="1"] .rank-link { min-height: 34px; font-weight: 900; }
.rank-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 21px;
  flex: 0 0 auto;
  border: 2px solid var(--outline);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--text);
  font: 900 italic 12px/1 Arial, sans-serif;
}
.rank-item[value="1"] .rank-number { height: 24px; background: #ffe072; color: #233763; box-shadow: 0 2px var(--outline); }
.rank-item[value="2"] .rank-number { background: #d5e6ff; color: #233763; }
.rank-item[value="3"] .rank-number { background: #ffcb9a; color: #233763; }

.site-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(145deg, oklch(52% .12 var(--mark-hue)), oklch(37% .085 var(--mark-hue)));
  box-shadow: inset 0 0 0 1px #161c362e, inset 0 1px #ffffff38;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px #0003;
}
.site-favicon { display: none; }
.site-icons-ready .site-favicon {
  position: absolute;
  inset: 0;
  display: block;
  background: #fff url("assets/site-icons.webp") no-repeat var(--icon-x) var(--icon-y) / var(--site-icons-size);
}
.site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll-next {
  position: fixed;
  z-index: 2;
  right: clamp(9px, calc((100vw - 1150px) / 2 - 65px), 38px);
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 2px 3px var(--ink);
}
.scroll-next:hover { background: #ffef9e; }
.scroll-next .icon { width: 24px; height: 24px; transform: rotate(90deg); }

.filter-status, .empty-state {
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 2px solid var(--outline);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.filter-status a { margin-left: 6px; color: var(--link-hover); text-decoration: underline; }
.empty-state a { color: var(--link-hover); text-decoration: underline; }
.genre-column .empty-state { margin-bottom: 0; }

.site-footer { padding: 14px 0 16px; border-top: 4px solid var(--outline); background: var(--surface-soft); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 6px 15px; color: var(--muted); font-size: 11px; }
.footer-bottom a { text-decoration: underline; }
.footer-bottom a:first-of-type { margin-left: auto; }

@media (min-width: 1080px), (min-width: 571px) and (max-width: 730px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@supports (grid-template-rows: subgrid) {
  .genre-columns[data-aligned] .genre-column {
    display: grid;
    grid-row: 1 / span var(--genre-rows);
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
  }
  .genre-columns[data-aligned] .genre-column[data-tone="free"] { grid-column: 1; }
  .genre-columns[data-aligned] .genre-column[data-tone="paid"] { grid-column: 2; }
  .genre-columns[data-aligned] .genre-group-header { grid-area: 1 / 1 / 2 / -1; }
  .genre-columns[data-aligned] .category-grid { display: contents; }
  .genre-columns[data-aligned] .category-card { grid-row: var(--genre-row); }
  .genre-columns[data-aligned] .empty-state { grid-area: 2 / 1 / 3 / -1; align-self: start; }

  @media (min-width: 1080px) {
    .genre-columns[data-aligned] .genre-column {
      grid-row-end: span var(--genre-rows-wide);
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 10px;
    }
    .genre-columns[data-aligned] .category-card {
      grid-row: var(--genre-row-wide);
      grid-column: var(--genre-column-wide);
    }
  }
}

.genre-columns[data-fixed-ranks] .rank-list {
  min-height: calc(34px + (var(--rank-limit) - 1) * 30px + 14px);
}

@media (max-width: 730px) {
  .genre-columns { grid-template-columns: minmax(0, 1fr); }
  .genre-column { padding: 7px; }
  .edition, .theme-toggle, .desktop-menu-icon { display: none; }
  .category-menu .tool-button { width: 36px; height: 36px; border-width: 2px; border-radius: 7px; }
  .mobile-menu-icon { display: block; }
  .category-menu .mobile-menu-icon { width: 17px; height: 17px; }
  .mobile-theme-toggle { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 5px; background: var(--surface-soft); text-align: left; font-size: 13px; }
  .mobile-theme-toggle[aria-pressed="true"] { color: var(--link-hover); }
  .search-form { margin-bottom: 8px; }
  .search-form input { font-size: 16px; }
  .directory-heading { gap: 6px; margin-bottom: 7px; padding-bottom: 6px; }
  .directory-tags { gap: 4px; margin-bottom: 7px; padding: 5px 6px; }
  .tag-heading { gap: 2px 6px; }
  .tag-list { gap: 3px; }
  .search-tag { min-height: 26px; padding: 2px 5px; font-size: 11px; line-height: 1.2; }
  .search-tag span { margin-right: 1px; }
  .filter-status { margin-bottom: 7px; padding: 5px 7px; }
  .genre-tabs { margin-bottom: 7px; }
  .scroll-next { right: 8px; bottom: 10px; width: 36px; height: 36px; border-width: 2px; }
  .scroll-next .icon { width: 21px; height: 21px; }
}

@media (max-width: 570px) {
  .directory-heading h1 { font-size: clamp(17px, 4.7vw, 22px); }
  .genre-count { padding: 3px 5px; font-size: 10px; }
  .category-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .category-title { min-height: 44px; font-size: 14px; }
  .rank-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  .rank-item { border-top: 1px solid var(--border); }
  .rank-item:is([value="1"], [value="2"], [value="3"]) { grid-column: 1 / -1; }
  .rank-link { gap: 3px; font-size: 12px; }
  .rank-number { width: 20px; }
  .site-mark { width: 16px; height: 16px; }
}

.category-grid.static-directory { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.static-directory .rank-list { display: block; }
.static-directory .rank-link { padding-inline: 5px; }