/* ===================================================================
   WAYBACK — search page for reading AO3 through the Wayback Machine
   =================================================================== */

.wb-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.wb-input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.wb-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.wb-submit {
  flex-shrink: 0;
  padding: 0.75rem 1.6rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.wb-submit:hover {
  background: var(--accent-light);
}

[data-theme="dark"] .wb-submit {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wb-submit {
    color: #211d19;
  }
}

.wb-hint {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.wb-result {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.wb-result h2 {
  font-size: 1.25rem;
  margin: 0 0 var(--space-xs);
  outline: none;
}

.wb-note {
  margin: 0 0 var(--space-xs);
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.6;
}

.wb-link {
  display: block;
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.wb-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

.wb-link strong {
  display: block;
  color: var(--accent);
  font-weight: 600;
}

.wb-link span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.5;
}

.wb-link-primary {
  background: var(--accent-pale);
  border-color: var(--accent-pale2);
}

@media (max-width: 640px) {
  .wb-form {
    flex-direction: column;
  }
}

/* First chapter vs whole work: a colored edge and a badge tell them apart */

.wb-link-first,
.wb-link-full {
  border-left-width: 4px;
}

.wb-link-first {
  border-left-color: var(--text-faint);
}

.wb-link-full {
  border-left-color: var(--accent);
  background: var(--accent-pale);
}

.wb-badge {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
}

.wb-link-first .wb-badge {
  background: var(--bg-alt);
  color: var(--text-mid);
  border: 1px solid var(--border);
}

.wb-link-full .wb-badge {
  background: var(--accent);
  color: #fff;
}

[data-theme="dark"] .wb-link-full .wb-badge {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wb-link-full .wb-badge {
    color: #211d19;
  }
}

/* Room between a section heading and its first paragraph */
main .section .container > h2 {
  margin-bottom: var(--space-md);
}

/* Language menu: a dropdown instead of a row of buttons, there are 12 */
.lang-menu {
  position: relative;
}

.nav .lang-menu summary {
  list-style: none;
  cursor: pointer;
  background: #fffdf8;
  color: var(--band);
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary::after {
  content: "";
  display: inline-block;
  margin-left: 0.4rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: 0.15em;
}

.lang-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 11rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.lang-menu-list a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
}

.lang-menu-list a:hover {
  color: var(--accent);
  background: var(--accent-pale);
}

.lang-menu-list a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* Pointer to the Chrome extension at the bottom of the search block */
.guide-hero .wb-extension {
  margin-top: var(--space-lg);
  max-width: 62ch;
  color: var(--text-mid);
}

.wb-extension a {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* display: grid above would otherwise override the hidden attribute */
.wb-result[hidden] {
  display: none;
}

/* Title found on archive.today, under the "Work 12345" heading */
.wb-found {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}

.wb-sites {
  margin: 0 0 var(--space-xs);
  font-size: 0.95rem;
  color: var(--text-mid);
}

.wb-sites a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* Results grouped by where to look, in the order worth trying.
   The step and source sit in a left column; on a phone they stack. */
.wb-step {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  gap: var(--space-md) var(--space-lg);
  padding-top: var(--space-lg);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.wb-step-head {
  padding-top: 0.15rem;
}

.wb-step-label {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.wb-step-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.wb-step-links {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

@media (max-width: 640px) {
  .wb-step {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* One subheading per place in "How does it work?" */
.wb-sub {
  margin: var(--space-lg) 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

/* Source names in "How does it work?" link to the sites themselves */
.wb-sub a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wb-sub a:hover {
  color: var(--accent);
}

/* The hint under the field links down to "Where can I find the link?" */
.wb-hint a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wb-hint a:hover {
  color: var(--accent);
}

/* Keep the heading clear of the sticky nav after the jump */
#where {
  scroll-margin-top: 5.5rem;
}

/* Short how-to list in "Where can I find the link?" */
.wb-howto {
  margin: var(--space-sm) 0 0;
  padding-left: 1.25rem;
  max-width: 66ch;
}

.wb-howto li + li {
  margin-top: 0.35rem;
}

.wb-howto {
  list-style: disc;
}

.section > .container > .wb-howto + p {
  margin-top: var(--space-md);
}

/* The AO3 / Archive Learning hug above the title: black ink on white.
   On light paper "multiply" drops the white. On dark paper the drawing sits
   on its own light card, the way the home page puts the logo on a light disc.
   The card is white like the drawing, then both are toned to the same cream. */
.wb-hug {
  display: block;
  width: min(260px, 70%);
  height: auto;
  margin: 0 0 var(--space-md);
  mix-blend-mode: multiply;
}

[data-theme="dark"] .wb-hug {
  mix-blend-mode: normal;
  background: #fff;
  filter: sepia(0.12) brightness(0.965);
  padding: 10px 12px;
  border-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wb-hug {
    mix-blend-mode: normal;
    background: #fff;
    filter: sepia(0.12) brightness(0.965);
    padding: 10px 12px;
    border-radius: 10px;
  }
}

/* "Know another place? Tell us": set in the display face so it stands out */
.section > .container > p.wb-tellus {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.wb-tellus a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* "No link? Here's where to find it": jumps down to the how-to */
.guide-hero p.wb-nolink {
  margin-top: var(--space-sm);
  font-size: 1rem;
  font-weight: 600;
}

.wb-nolink a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.wb-nolink a:hover {
  color: var(--accent-light);
}