/* Guide page. Lives outside /static/, which production caches as immutable. */
.guide-hero {
  min-height: 700px;
  height: auto;
  background-image: url("/images/guide.webp");
  background-position: 50% center;
}

.guide-hero .hero-content {
  margin: 150px auto 180px;
}

/* On wide screens the dark hillside sits under the text and the sunlit valley beside it. */
@media (min-width: 1200px) {
  .guide-hero {
    background-position: left center;
  }

  .guide-hero::before {
    background:
      linear-gradient(180deg, rgba(8, 15, 10, 0.5) 0%, transparent 14%),
      linear-gradient(90deg, rgba(8, 15, 10, 0.85) 0%, rgba(8, 15, 10, 0.55) 34%, transparent 62%),
      linear-gradient(0deg, rgba(10, 18, 12, 0.7) 0%, transparent 30%);
  }
}

.guide-hero h1 {
  font-size: clamp(3.4rem, 6.6vw, 6.4rem);
}

/* The chapters share the whole width of the window evenly, under one line edge to edge. */
.guide-chapters {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--white-line);
}

.guide-chapters a {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 22px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid var(--white-line);
  transition: background-color 180ms ease;
}

.guide-chapters a:last-child {
  border-right: 0;
}

.guide-chapters a:hover {
  background: rgba(255, 255, 255, 0.07);
}

.guide-chapters span {
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
}

.guide-chapters strong {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.guide-light {
  background:
    radial-gradient(circle at 88% 6%, rgba(221, 177, 92, 0.18), transparent 24%),
    var(--paper);
}

.guide-dark,
.guide-ink {
  color: #fff;
  background: var(--forest);
}

.guide-ink {
  background: var(--ink);
}

.guide-cream {
  background: var(--cream);
}

.guide-dark .section-heading > p:last-child,
.guide-ink .section-heading > p:last-child {
  color: rgba(255, 255, 255, 0.68);
}

.guide-subheading {
  margin: 96px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.guide-note {
  max-width: 760px;
  margin: 18px 0 0;
  color: #5d675f;
  font-size: 0.92rem;
}

.guide-note a,
.guide-steps a {
  color: #6e531e;
  font-weight: 750;
}

.guide-note-dark {
  margin-top: 36px;
  color: rgba(255, 255, 255, 0.62);
}

.guide-note-dark a {
  color: var(--gold-light);
}

.guide-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 56px 0 0;
  border-block: 1px solid var(--line);
}

.guide-facts div {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}

.guide-facts div:first-child {
  padding-left: 0;
}

.guide-facts div:last-child {
  border-right: 0;
}

.guide-facts dt,
.guide-card-kicker {
  color: #8a652b;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.guide-facts dd {
  margin: 6px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.25;
}

.guide-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

.guide-steps-4 {
  grid-template-columns: repeat(4, 1fr);
}

.guide-steps li {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: #ece8dc;
  border-radius: 18px;
}

.guide-step-number {
  color: #8a652b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
}

.guide-steps h3 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
}

.guide-steps p {
  margin: 0;
  color: #536158;
  font-size: 0.95rem;
}

.guide-dark .guide-steps li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--white-line);
}

.guide-dark .guide-step-number {
  color: var(--gold-light);
}

.guide-dark .guide-steps p {
  color: rgba(255, 255, 255, 0.7);
}

.guide-cards {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.guide-cards-2 {
  grid-template-columns: repeat(2, 1fr);
}

.guide-cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.guide-card {
  padding: 30px;
  background: #fff;
  border: 1px solid rgba(16, 24, 19, 0.08);
  border-radius: 18px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.guide-card-kicker {
  margin: 0;
}

.guide-card h4 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
}

.guide-card h4 a {
  text-decoration-color: rgba(138, 101, 43, 0.45);
  text-underline-offset: 5px;
}

.guide-card h4 a:hover,
.guide-links a:hover {
  color: #6e531e;
}

.guide-card > p:last-of-type {
  margin: 10px 0 0;
  color: #536158;
}

.guide-card-warning {
  background: #f6ecd5;
  border-color: rgba(138, 101, 43, 0.35);
}

.guide-card-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 12px;
}

/* Our own mods share one picture: the same little island, with Heroic Map's spruce or an oak in
   ColorfulLeaves' autumn colours, so they read as one family. */
.guide-card-island {
  display: block;
  width: 96px;
  height: 96px;
  margin: -6px 0 10px -6px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25));
}

.guide-card-own {
  display: flex;
  flex-direction: column;
  color: #fff;
  background: var(--forest-light);
  border-color: transparent;
}

.guide-card-own .guide-card-kicker {
  color: var(--gold-light);
}

.guide-card-own > p:last-of-type {
  color: rgba(255, 255, 255, 0.8);
}

.guide-card-own h4 a {
  text-decoration-color: rgba(241, 213, 141, 0.6);
}

.guide-card-own h4 a:hover {
  color: var(--gold-light);
}

/* Our own mods: the newest version straight from this site (the same jar as in the modpack,
   copied by modpack/build.py, which also writes its version here) and the source on GitHub. At
   the bottom of the card, so both cards' buttons line up. */
.mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

.mod-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.mod-button:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

.mod-button-download {
  color: var(--ink);
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.mod-button-download:hover {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

.mod-button small {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.7;
}

/* Our own texture pack: a strip of its fish, pixel for pixel, and the command to turn it on. */
.pack-fish {
  display: block;
  width: 100%;
  max-width: 424px;
  height: auto;
  margin-bottom: 18px;
  image-rendering: pixelated;
}

/* The fish pack stands alone in its row: the strip on the left, the text beside it. */
.pack-feature {
  display: grid;
  grid-template-columns: minmax(0, 424px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 44px;
}

.pack-feature .pack-fish {
  grid-row: 1 / -1;
  align-self: center;
  margin-bottom: 0;
}

.guide-card code {
  padding: 1px 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.86em;
  overflow-wrap: anywhere;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 5px;
}

.guide-tiles + .guide-tiles {
  margin-top: 18px;
}

.modpack-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  margin: 28px 0 0;
  padding: clamp(28px, 4vw, 44px);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(221, 177, 92, 0.16), transparent 55%),
    var(--forest);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.modpack-panel .guide-card-kicker {
  color: var(--gold-light);
}

.modpack-panel h4 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
}

.modpack-panel p:last-child {
  max-width: 620px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.76);
}

/* The credits: one card per category, closed at first so the section stays short. Native
   <details>, so it opens by mouse, keyboard and without script. Wider than the text column:
   four cards on wide screens, fewer below. A grid, not columns, so opening one card never
   moves the others. */
.credits-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  align-items: start;
  width: min(calc(100vw - 48px), 1600px);
  margin: 28px 0 0 50%;
  translate: -50% 0;
}

.credits-group summary {
  position: relative;
  padding-right: 36px;
  cursor: pointer;
  list-style: none;
}

.credits-group summary::-webkit-details-marker {
  display: none;
}

.credits-group .guide-card-kicker {
  display: block;
}

/* The arrow: down while closed, up while open, like the menu's. */
.credits-group summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #8a652b;
  border-bottom: 2px solid #8a652b;
  rotate: 45deg;
  translate: 0 -75%;
  transition: rotate 160ms ease, translate 160ms ease;
}

.credits-group[open] summary::after {
  rotate: -135deg;
  translate: 0 -25%;
}

/* Side by side, every closed card keeps room for a two-line title, so a row stays even. */
.credits-group h4 {
  min-height: 2.4em;
}

.guide-links {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

/* Each mod with its icon from Modrinth (images/mods/, copied so visitors never contact
   Modrinth) beside name, purpose and author. */
.guide-links li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.guide-links li > * {
  grid-column: 2;
}

.guide-links li > img {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 9px;
}

.guide-links li > a {
  justify-self: start;
}

.guide-links li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.guide-links a {
  font-weight: 800;
  text-decoration-color: rgba(138, 101, 43, 0.45);
  text-underline-offset: 4px;
}

.guide-links span {
  display: block;
  color: #536158;
  font-size: 0.92rem;
}

.guide-links .guide-credit {
  margin-top: 2px;
  color: #8a652b;
  font-size: 0.78rem;
  font-weight: 700;
}

.profession-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.profession-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--white-line);
  border-radius: 18px;
  transition: background-color 180ms ease, border-color 180ms ease;
}

/* The tenth profession is still a secret: across the row, with a dashed outline. */
.profession-card-secret {
  grid-column: 1 / -1;
  border-style: dashed;
}

.profession-card:hover {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(241, 213, 141, 0.45);
}

.profession-number {
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
}

.profession-card h3 {
  margin: 16px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
}

.profession-card > p {
  flex: 1;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.profession-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--white-line);
  font-size: 0.9rem;
}

.profession-card dt {
  padding-top: 3px;
  color: var(--gold-light);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profession-card dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.realm-list {
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.realm-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.realm-label {
  width: fit-content;
  height: fit-content;
  padding: 7px 12px;
  color: var(--ink);
  background: var(--gold-light);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.realm-item h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}

.realm-item p {
  max-width: 720px;
  margin: 10px 0 0;
  color: #536158;
}

.castle-panel {
  margin: 56px 0 0;
  padding: clamp(34px, 5vw, 60px);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(221, 177, 92, 0.16), transparent 55%),
    var(--forest);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
}

.castle-panel h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.castle-panel > p:last-child {
  max-width: 720px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.style-intro {
  max-width: 760px;
}

.style-intro > p {
  margin: 16px 0 0;
  color: #536158;
  font-size: 1.05rem;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tip;
}

.style-tip {
  padding: 28px;
  background: var(--paper);
  border: 1px solid rgba(16, 24, 19, 0.08);
  border-radius: 18px;
  counter-increment: tip;
}

.style-tip::before {
  content: counter(tip, decimal-leading-zero);
  color: #8a652b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
}

.style-tip h4 {
  margin: 12px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
}

.style-tip p {
  margin: 8px 0 0;
  color: #536158;
  font-size: 0.95rem;
}

.war-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 56px 0 0;
}

.war-card {
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--white-line);
  border-radius: 18px;
}

.war-card-holy {
  background: linear-gradient(160deg, rgba(221, 177, 92, 0.16), rgba(221, 177, 92, 0.03));
  border-color: rgba(221, 177, 92, 0.45);
}

.war-card h3 {
  margin: 26px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
}

.war-card p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.war-card ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.war-card li {
  position: relative;
  padding: 6px 0 6px 22px;
  color: rgba(255, 255, 255, 0.82);
}

.war-card li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
}

@media (max-width: 960px) {
  .guide-chapters,
  .guide-steps-4,
  .guide-cards-3,
  .profession-grid,
  .style-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pack-feature {
    display: flex;
  }

  .pack-feature .pack-fish {
    align-self: flex-start;
    margin-bottom: 18px;
  }

  .guide-chapters a:nth-child(2n) {
    border-right: 0;
  }

  .guide-chapters a:nth-child(-n + 4) {
    border-bottom: 1px solid var(--white-line);
  }

  /* Five chapters in two columns: the last one takes the whole row. */
  .guide-chapters a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .guide-hero .hero-content {
    margin-bottom: 330px;
  }

  .guide-facts,
  .guide-steps,
  .war-grid,
  .realm-item {
    grid-template-columns: 1fr;
  }

  .guide-facts div {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .guide-facts div:last-child {
    border-bottom: 0;
  }

  .realm-item {
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .credits-group h4 {
    min-height: 0;
  }

  .guide-hero {
    min-height: 0;
    padding: 130px 0 0;
  }

  .guide-hero h1 {
    font-size: clamp(3rem, 14vw, 4.6rem);
  }

  .guide-hero .hero-content {
    margin: 0 auto;
  }

  .guide-chapters {
    position: static;
    margin-top: 48px;
  }

  .guide-chapters a {
    min-height: 72px;
    padding: 14px 12px;
  }

  .guide-cards-2,
  .guide-cards-3,
  .guide-steps-4,
  .profession-grid,
  .style-grid,
  .modpack-panel {
    grid-template-columns: 1fr;
  }

  .guide-card,
  .profession-card,
  .war-card,
  .style-tip {
    padding: 24px;
  }
}

/* Beside chapter one, decoration only: T0biiiii flies with his wand through the free space right
   of the heading (from 1200px, where it fits above the facts row), Sidix brews and recites a
   ritual in the left margin (from 1600px, like the figures beside the homepage's guide panel;
   0.71 is his width-to-height ratio). Renders: images/figures/render_figures.py. */
.chapter-figure {
  display: none;
}

@media (min-width: 1200px) {
  .guide-section {
    position: relative;
  }

  .chapter-figure-tobi {
    display: block;
    position: absolute;
    top: clamp(90px, 11vw, 150px);
    right: max(24px, calc((100% - var(--max-width)) / 2 - 150px));
    width: auto;
    height: clamp(220px, 18vw, 330px);
    pointer-events: none;
  }
}

@media (min-width: 1600px) {
  .chapter-figure-sidix {
    display: block;
    position: absolute;
    top: clamp(90px, 11vw, 150px);
    right: calc(50% + 630px);
    width: auto;
    height: min(360px, calc((50vw - 654px) / 0.71));
    pointer-events: none;
  }
}

/* Chapter "Karte": the live map in the browser and Heroic Map in the game side by side, two
   pictures from the mod's own docs, the keys from the mod's docs and language files. */
.map-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 48px 0 0;
}

.map-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16, 24, 19, 0.08);
  border-radius: 18px;
}

.map-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.map-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 30px 30px;
}

.map-card h3 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
}

.map-points {
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  color: #536158;
}

.map-points li + li {
  margin-top: 6px;
}

.map-points strong {
  color: var(--ink);
}

.map-action {
  margin: auto 0 0;
  padding-top: 22px;
}

.map-shots {
  display: grid;
  grid-template-columns: 560fr 272fr 560fr;
  gap: 18px;
  margin: 18px 0 0;
}

.map-shots figure {
  margin: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(16, 24, 19, 0.08);
  border-radius: 18px;
}

.map-shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.map-shots figcaption {
  margin: 10px 2px 0;
  color: #536158;
  font-size: 0.86rem;
}

.map-keys {
  margin: 20px 0 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(16, 24, 19, 0.08);
  border-radius: 18px;
}

.map-keys table {
  width: 100%;
  border-collapse: collapse;
}

.map-keys th,
.map-keys td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.map-keys tr:last-child td {
  border-bottom: 0;
}

.map-keys th {
  color: #8a652b;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-keys td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: 800;
}

.map-keys td {
  color: #536158;
}

.map-keys kbd,
.map-keys code {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 7px;
  color: var(--ink);
  text-align: center;
  background: #f4efe2;
  border: 1px solid rgba(16, 24, 19, 0.18);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.86rem;
}

.map-leaves {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: 28px 0 0;
  color: #536158;
}

.map-leaves img {
  flex: none;
}

@media (max-width: 960px) {
  .map-grid,
  .map-shots {
    grid-template-columns: 1fr;
  }
}

/* Phones: each row stacks, the input above what it does. */
@media (max-width: 760px) {
  .map-keys thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .map-keys table,
  .map-keys tbody,
  .map-keys tr,
  .map-keys td {
    display: block;
  }

  .map-keys tr {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
  }

  .map-keys tr:last-child {
    border-bottom: 0;
  }

  .map-keys td {
    padding: 0;
    border-bottom: 0;
  }

  .map-keys td:first-child {
    width: auto;
    margin-bottom: 6px;
    white-space: normal;
  }

  .map-card > div {
    padding: 22px;
  }
}