/* Below-the-fold styles, loaded non-blockingly from index.html.
   Everything here styles elements that don't exist (or aren't visible)
   at first paint: the generated results, row actions, and footer. */

/* ---------- Results ---------- */
#results { margin-top: var(--space-3xl); }
#results:empty { display: none; }
.results-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
  border-top: 3px solid var(--ink);
  padding-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.results-head h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  flex: 1;
}
.results-summary {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin: 0;
}
.results-summary b { color: var(--accent-deep); }

details.group { border-top: 1px solid var(--line-strong); position: relative; }
details.group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 56px;
  padding-block: var(--space-sm);
  padding-right: 120px;
  cursor: pointer;
}
.act.group-copy {
  position: absolute;
  top: 14px;
  right: 0;
}
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: rotate(-45deg);
  transition: transform 0.15s ease-out;
  flex: none;
}
details.group[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.group-title { font-weight: 700; font-size: var(--text-base); }
.group-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  flex: 1;
}

.subhead {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  margin: var(--space-lg) 0 var(--space-xs);
  padding-left: var(--space-lg);
}
.rows { margin: 0 0 var(--space-xl); padding: 0; list-style: none; }
.row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-top: 1px solid var(--line);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
}
.qtext {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}
.row-actions { display: flex; gap: var(--space-xs); flex: none; }
.done-check { cursor: pointer; }
.row.done .qtext {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: var(--ink-3);
}
.done-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}
.act {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--text-xs) var(--font-ui);
  letter-spacing: 0.03em;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 36px;
  min-width: 56px;
  padding: 4px 12px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.act::before { content: ""; position: absolute; inset: -5px; }
.act:hover { border-color: var(--line-strong); color: var(--ink); }
.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.act.copied { color: var(--ok); border-color: var(--ok); }
.act-open { color: var(--accent-deep); }
.act-open:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

@media (max-width: 560px) {
  .row { flex-wrap: wrap; padding-left: var(--space-sm); }
  .row-actions { width: 100%; justify-content: flex-end; }
  .act { min-height: 44px; min-width: 72px; }
  .subhead { padding-left: var(--space-sm); }
}
@media (pointer: coarse) {
  .act { min-height: 44px; min-width: 72px; }
}

/* ---------- Lucky row highlight ---------- */
.row.lucky { background: var(--accent-tint); }
.row.lucky .qtext::after {
  content: "↗ opened";
  font: 700 var(--text-xs) var(--font-ui);
  color: var(--accent-deep);
  margin-left: var(--space-sm);
  white-space: nowrap;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  details.group {
    animation: rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
  }
  .row.lucky { animation: lucky-pulse 1.4s ease-out; }
  @keyframes lucky-pulse {
    0%, 30% { background: oklch(0.9 0.07 27); }
  }
  .sec.flash { animation: sec-flash 1.6s ease-out; }
  @keyframes sec-flash {
    0%, 25% { background: var(--accent-tint); }
  }
}

footer {
  margin-top: var(--space-3xl);
  border-top: 1px solid var(--line);
  padding-top: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--ink-3);
}