/* The column explainers page. The page itself (background, header, hero,
   panels, buttons and type sizes) comes from styles.css, exactly as on the
   About page. The map sections look like About's explainers, and the column
   popup matches About's use-case popups. */

.column-directory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  align-items: end;
  gap: 12px 24px;
}

.column-search { display: grid; gap: 4px; }

.column-search span {
  color: #617067;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.column-search input {
  width: 100%;
  min-height: 40px;
  padding: 6px 16px;
  border: 1px solid rgb(60 91 74 / 26%);
  border-radius: 100px;
  color: #263d31;
  background: rgb(255 254 247 / 75%);
  box-shadow: 0 6px 18px rgb(38 66 52 / 7%);
  font-size: var(--text-md);
}

.column-search input::placeholder { color: #7a887f; }
.column-search input:focus-visible {
  border-color: #315c48;
  outline: none;
  box-shadow: 0 0 0 3px rgb(49 92 72 / 18%), 0 6px 18px rgb(38 66 52 / 7%);
}

.column-search-status {
  display: block;
  min-height: 22px;
  margin: 8px 0;
  color: #596a60;
  font-size: var(--text-sm);
}

.column-map-sections {
  display: grid;
  gap: 10px;
}

.column-map-section {
  overflow: hidden;
  border: 1px solid rgb(60 92 74 / 18%);
  border-radius: 12px;
  background: rgb(255 255 250 / 75%);
  scroll-margin-top: calc(var(--site-header-height, 110px) + 20px);
}

.column-map-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  color: #263d31;
  background: transparent;
  text-align: left;
}

.column-map-toggle:hover { background: rgb(48 89 68 / 5%); }
.column-map-section.is-open .column-map-toggle { background: rgb(229 237 216 / 60%); }

.column-map-toggle-copy,
.column-map-toggle-meta {
  display: grid;
  min-width: 0;
}

.column-map-layer {
  color: #52705f;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.column-map-title {
  margin-top: 2px;
  color: #263d31;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
}

.column-map-description {
  margin-top: 2px;
  color: #67766d;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.column-map-toggle-meta {
  grid-template-columns: auto auto 20px;
  align-items: center;
  gap: 12px;
  color: #617067;
  font-size: var(--text-sm);
}

.column-map-count {
  padding: 4px 10px;
  border: 1px solid var(--button-border);
  border-radius: 100px;
  color: var(--button-ink);
  background: linear-gradient(135deg, var(--button-start), var(--button-end));
  font-weight: 650;
  white-space: nowrap;
}

.column-map-question { text-align: right; }
.column-map-chevron { color: #476653; font-size: var(--text-lg); text-align: center; transition: transform 160ms ease; }
.column-map-section.is-open .column-map-chevron { transform: rotate(180deg); }

.column-map-panel {
  padding: 10px 14px 14px;
  border-top: 1px solid rgb(62 94 76 / 12%);
}

.column-map-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 3px solid #7a9a4a;
  border-radius: 0 12px 12px 0;
  color: #3c4e44;
  background: rgb(122 154 74 / 10%);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.column-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

/* Column buttons are quiet cards until pointed at, then take the button gradient. */
.column-reference-button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgb(72 102 85 / 18%);
  border-radius: 10px;
  color: #33483d;
  background: #fffef8;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease;
}

.column-reference-button:hover {
  border-color: var(--button-border);
  color: var(--button-ink);
  background: linear-gradient(135deg, var(--button-start), var(--button-end));
  transform: translateY(-1px);
}

/* The column popup. */
html.column-modal-open,
body.column-modal-open { overflow: hidden; }
html.column-modal-open { scrollbar-gutter: stable; }

.column-modal {
  /* The margin around the popup, widened for a phone's notch and home indicator. */
  --modal-top: max(24px, env(safe-area-inset-top, 0px));
  --modal-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--modal-top) max(24px, env(safe-area-inset-right, 0px)) var(--modal-bottom) max(24px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  background: rgb(23 40 31 / 45%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.column-modal-dialog {
  display: flex;
  flex-direction: column;
  width: min(860px, 100%);
  max-height: calc(100vh - var(--modal-top) - var(--modal-bottom));
  max-height: calc(100svh - var(--modal-top) - var(--modal-bottom));
  overflow: hidden;
  border: 1px solid rgb(255 255 244 / 80%);
  border-radius: 18px;
  color: #24322b;
  background: rgb(250 251 243 / 97%);
  box-shadow: 0 30px 100px rgb(12 28 19 / 28%);
}

.column-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgb(62 94 76 / 14%);
}

.column-modal-header h2 {
  margin: 4px 0 0;
  color: #1f3027;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
}

.column-modal-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

/* These unframed emblems belong to lore cards whose subjects can be drawn
   across the viewport. */
.column-moth-trigger,
.column-duck-trigger,
.column-dogcow-trigger {
  display: grid;
  place-items: center;
  width: 68px;
  height: 34px;
  padding: 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.column-moth-trigger[hidden],
.column-duck-trigger[hidden],
.column-dogcow-trigger[hidden] { display: none; }

.column-moth-trigger svg,
.column-duck-trigger svg,
.column-dogcow-trigger svg {
  display: block;
  width: 58px;
  height: 32px;
  overflow: visible;
  color: #101613;
  fill: currentColor;
  opacity: .86;
  transition: opacity 180ms ease, transform 180ms ease;
}

.column-duck-trigger svg,
.column-dogcow-trigger svg {
  color: #000;
  opacity: 1;
}

.column-moth-trigger .column-moth-antennae {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.column-moth-trigger:hover svg,
.column-duck-trigger:hover svg,
.column-dogcow-trigger:hover svg {
  opacity: 1;
  transform: scale(1.06);
}

/* Round, in the same gradient as every other button. */
.column-modal-icon-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1px solid var(--button-border);
  border-radius: 50%;
  color: var(--button-ink);
  background: linear-gradient(135deg, var(--button-start), var(--button-end));
  font-size: 22px;
  line-height: 1;
}

.column-modal-icon-button:hover { background: linear-gradient(135deg, var(--button-start-hover), var(--button-end-hover)); }

.column-modal-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 14px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.column-detail-card {
  padding: 10px 12px;
  border: 1px solid rgb(62 94 76 / 14%);
  border-radius: 16px;
  background: rgb(229 237 216 / 75%);
}

.column-detail-label {
  color: #2b4939;
  font-size: var(--text-md);
  font-weight: 700;
}

.column-detail-copy {
  margin: 6px 0 0;
  color: #506158;
  font-size: var(--text-md);
  line-height: 1.65;
}

.column-detail-copy p { margin: 0; }

.column-lore-card {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-color: rgb(142 116 51 / 24%);
  background: linear-gradient(135deg, rgb(247 238 200 / 78%), rgb(238 242 218 / 82%));
}

.column-lore-heading {
  margin-bottom: 5px !important;
  color: #4a452a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
}

.column-lore-story code {
  padding: .05em .28em;
  border-radius: 4px;
  color: #39483f;
  background: rgb(255 255 248 / 70%);
  font-size: .92em;
}

.column-lore-story p + p {
  margin-top: .8em;
}

.column-lore-sources {
  margin-top: 10px !important;
  padding-top: 8px;
  border-top: 1px solid rgb(108 101 56 / 18%);
  color: #607065;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.column-lore-sources a {
  color: #315c48;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.column-lore-sources a:hover { color: #203f30; }

/* A column with two stories shows each as a pane that starts collapsed. The
   caption stays visible; the story heading is the control, with the same
   plus and minus marks the Help Center uses. */
.column-lore-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px -8px 0;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}

.column-lore-summary::-webkit-details-marker { display: none; }

.column-lore-summary::after {
  content: "+";
  flex: none;
  color: #4a452a;
  font-size: 1.35em;
  font-weight: 500;
  line-height: 1;
}

.column-lore-pane[open] > .column-lore-summary::after { content: "−"; }
.column-lore-pane[open] > .column-lore-summary { margin-bottom: 5px; }
.column-lore-summary:hover { background: rgb(108 101 56 / 8%); }

.column-lore-summary:focus-visible {
  outline: 2px solid #315c48;
  outline-offset: 2px;
}

.column-lore-summary .column-lore-heading { margin-bottom: 0 !important; }

.column-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid rgb(62 94 76 / 14%);
}

/* Independent traced marks grow along their own paths in a loosely clockwise,
   nautical-chart sequence before one uncropped PNG layer fades in. The
   viewport remains the dismiss target, without another title or caption. */
.moth-overlay {
  position: fixed;
  z-index: 2000;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 560ms ease, visibility 0s linear 560ms;
}

.moth-overlay.is-visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.moth-overlay-dismiss {
  display: grid;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  border: 0;
  place-items: center;
  background: rgb(244 247 233 / 38%);
  cursor: zoom-out;
}

body.moth-overlay-open .column-modal {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.moth-overlay-art {
  --art-ratio: 1.93251;
  display: block;
  position: relative;
  width: min(96vw, calc(92vh * var(--art-ratio)), 1800px);
  width: min(96vw, calc(92svh * var(--art-ratio)), 1800px);
  max-width: 100%;
  aspect-ratio: var(--art-ratio);
  contain: paint;
  pointer-events: none;
  user-select: none;
}

.duck-overlay .moth-overlay-art {
  --art-ratio: 1.17284;
}

.dogcow-overlay .moth-overlay-art {
  --art-ratio: 1.24854;
}

.moth-linework-preview,
.moth-overlay-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.moth-linework-preview {
  opacity: 1;
  transform: translateZ(0);
  will-change: opacity;
}

.moth-overlay.is-visible.is-drawing .moth-linework-preview {
  animation: moth-linework-settle 4400ms linear forwards;
}

.moth-overlay-image {
  object-fit: contain;
  opacity: 0;
}

.moth-overlay.is-visible.is-drawing .moth-overlay-image {
  animation: moth-final-settle 4400ms ease-out forwards;
}

@keyframes moth-linework-settle {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes moth-final-settle {
  0%, 66% { opacity: 0; }
  100% { opacity: .88; }
}


@media (max-width: 900px) {
  .column-directory-heading { grid-template-columns: 1fr; }
  .column-map-toggle { align-items: start; grid-template-columns: 1fr; gap: 8px; }
  .column-map-toggle-meta { grid-template-columns: auto 1fr 20px; }
  .column-map-question { text-align: left; }
}

@media (max-width: 700px) {
  .column-map-toggle { padding: 10px 12px; }
  .column-map-panel { padding: 10px 12px 12px; }
  /* Two buttons per row from about 360px wide, one on the smallest phones. */
  .column-button-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .column-modal { --modal-top: max(8px, env(safe-area-inset-top, 0px)); --modal-bottom: max(8px, env(safe-area-inset-bottom, 0px)); place-items: stretch; padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
  .column-modal-dialog { width: 100%; margin: auto 0; border-radius: 16px; }
  .column-modal-header { padding: 14px 14px 10px; }
  .column-modal-details { grid-template-columns: 1fr; padding: 12px 14px 14px; }
  .column-modal-footer { padding: 10px 14px; }
  .column-modal-footer .button-link { flex: 1 1 auto; }
}

/* Short screens, such as a phone held sideways: the whole popup scrolls as one
   page under its pinned title bar, as About's popups do. */
@media (max-height: 500px) {
  .column-modal { --modal-top: max(8px, env(safe-area-inset-top, 0px)); --modal-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .column-modal-dialog { overflow-y: auto; overscroll-behavior: contain; }
  .column-modal-details { flex: none; overflow: visible; }
  .column-modal-header {
    position: sticky;
    z-index: 1;
    top: 0;
    align-items: center;
    padding: 8px 14px 6px;
    background: rgb(250 251 243 / 97%);
  }
  .column-modal-header > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .column-modal-header h2 { margin: 0; }
}

/* Touch screens: controls sized for a fingertip. */
@media (pointer: coarse) {
  .column-search input,
  .column-reference-button { min-height: 44px; }
  .column-modal-icon-button { width: 40px; height: 40px; }
  .column-moth-trigger,
  .column-duck-trigger,
  .column-dogcow-trigger { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .column-map-chevron,
  .column-reference-button,
  .column-moth-trigger svg,
  .column-duck-trigger svg,
  .column-dogcow-trigger svg,
  .moth-overlay,
  .moth-overlay-art { transition: none; }

  .moth-overlay.is-visible .moth-linework-preview,
  .moth-overlay.is-visible .moth-overlay-image { animation: none; }

  .moth-overlay.is-visible .moth-linework-preview { display: none; }
  .moth-overlay.is-visible .moth-overlay-image {
    opacity: .88;
  }
}