/* DESIGN ROLL — Field Guide Help (Appily-onehundredthirteen)
   Composition: search-first · accordion stack · topic cards · crystal topic chips
   Palette: --fg-* herb/lavender/kraft tokens
   Signature: searchable FAQ with crystal topic chips
   Not a cousin of: Fixer Bath chemical tray · Punchcard FAQ · Rolodex tabs */

.page-a113-fieldhelp {
  --fh-herb: var(--fg-herb);
  --fh-lavender: var(--fg-lavender);
  --fh-kraft: var(--fg-kraft);
  --fh-bark: var(--fg-bark);
}

.fh-main { padding-bottom: var(--a113-space-5); }

.fh-mast {
  padding: var(--a113-space-4) 0 var(--a113-space-3);
  text-align: center;
}
.fh-mast h1 {
  margin: 0.15em 0 0.35em;
  font-family: var(--fg-font-logo);
  font-size: var(--a113-type-display);
  font-weight: 400;
  line-height: 1.08;
  color: var(--fh-bark);
}
.fh-mast p {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--fg-mute);
}

.fh-lab {
  display: flex;
  flex-direction: column;
  gap: var(--a113-space-3);
}

/* Search-first band */
.fh-search-band {
  padding: var(--a113-space-3);
  background: var(--fg-wheat);
  border: 2px solid rgba(74, 103, 65, 0.25);
  border-radius: var(--a113-radius-lg);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.fh-search-band.is-hot {
  border-color: var(--fh-lavender);
  box-shadow: 0 0 0 4px rgba(125, 91, 166, 0.18);
}
.fh-search-field span {
  display: block;
  margin-bottom: 0.45em;
  font-family: var(--fg-font-tab);
  font-size: var(--a113-type-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fh-bark);
}
.fh-search-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.5em 0.35em 0.85em;
  background: #fff;
  border: 2px solid rgba(61, 41, 20, 0.12);
  border-radius: var(--a113-radius-md);
}
.fh-search-row:focus-within {
  border-color: var(--fh-herb);
  box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.2);
}
.fh-search-row svg { color: var(--fg-mute); flex-shrink: 0; }
.fh-search-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--fg-ink);
}
.fh-search-row input:focus { outline: none; }
.fh-search-clear {
  min-height: 44px;
  padding: 0 0.85em;
  border: 0;
  border-radius: var(--a113-radius-sm);
  background: var(--fh-kraft);
  font-family: var(--fg-font-tab);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--fh-bark);
}

.fh-empty {
  margin: 0;
  padding: var(--a113-space-2);
  text-align: center;
  color: var(--fg-mute);
  background: var(--fg-kraft);
  border-radius: var(--a113-radius-md);
}

/* Crystal topic chips */
.fh-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--a113-space-2);
}
.fh-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25em;
  padding: var(--a113-space-2) var(--a113-space-2) var(--a113-space-2) 2.5em;
  border: 2px solid rgba(61, 41, 20, 0.12);
  border-radius: var(--a113-radius-md);
  background: var(--a113-surface);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s var(--a113-ease), border-color 0.2s, box-shadow 0.2s;
}
.fh-topic:hover { transform: translateY(-3px); box-shadow: var(--a113-shadow-soft); }
.fh-topic.is-active {
  border-color: var(--fh-lavender);
  box-shadow: 0 0 0 3px rgba(125, 91, 166, 0.2);
}
.fh-topic.is-dim { opacity: 0.45; }
.fh-topic-crystal {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, var(--fh-lavender) 0%, var(--fg-sun) 100%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transition: transform 0.25s;
}
.fh-topic.is-active .fh-topic-crystal { transform: rotate(18deg) scale(1.1); }
.fh-topic-stage {
  font-family: var(--fg-font-tab);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--fh-herb);
}
.fh-topic strong {
  font-family: var(--fg-font-tab);
  font-size: var(--a113-type-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fh-bark);
}
.fh-topic-blurb {
  font-size: var(--a113-type-xs);
  color: var(--fg-mute);
  line-height: 1.4;
}

/* Accordion stack */
.fh-stack { display: flex; flex-direction: column; gap: var(--a113-space-3); }
.fh-panel[hidden] { display: none !important; }
.fh-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a113-space-2);
  margin-bottom: var(--a113-space-2);
  padding-bottom: var(--a113-space-2);
  border-bottom: 2px solid var(--fh-kraft);
}
.fh-panel-head h2 {
  margin: 0;
  font-family: var(--fg-font-logo);
  font-size: var(--a113-type-lg);
  font-weight: 400;
  color: var(--fh-bark);
}
.fh-panel-head p {
  margin: 0.35em 0 0;
  font-size: var(--a113-type-sm);
  color: var(--fg-mute);
}
.fh-panel-badge {
  padding: 0.35em 0.75em;
  border-radius: var(--a113-radius-pill);
  background: var(--fh-herb);
  color: var(--fg-on-herb);
  font-family: var(--fg-font-tab);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fh-accordions {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.fh-accordion {
  border: 1px solid rgba(61, 41, 20, 0.12);
  border-radius: var(--a113-radius-md);
  background: var(--a113-surface);
  overflow: hidden;
  transition: border-color 0.2s;
}
.fh-accordion[open] { border-color: var(--fh-herb); }
.fh-accordion[hidden] { display: none !important; }
.fh-accordion summary {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: var(--a113-space-2);
  cursor: pointer;
  list-style: none;
}
.fh-accordion summary::-webkit-details-marker { display: none; }
.fh-acc-num {
  flex-shrink: 0;
  font-family: var(--fg-font-tab);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--fh-lavender-deep);
}
.fh-acc-q {
  flex: 1;
  font-weight: 600;
  color: var(--fg-ink);
}
.fh-acc-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fh-herb);
  border-bottom: 2px solid var(--fh-herb);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.fh-accordion[open] .fh-acc-chevron { transform: rotate(-135deg); }
.fh-acc-body {
  padding: 0 var(--a113-space-2) var(--a113-space-2);
  font-size: var(--a113-type-sm);
  color: var(--fg-mute);
  line-height: 1.55;
}
.fh-acc-body a { color: var(--fh-lavender-deep); }

/* Topic cards aside */
.fh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--a113-space-2);
}
.fh-card {
  padding: var(--a113-space-3);
  border-radius: var(--a113-radius-lg);
  background: var(--fg-wheat);
  border: 1px solid rgba(61, 41, 20, 0.1);
}
.fh-card--lavender {
  background: linear-gradient(145deg, rgba(125, 91, 166, 0.12), var(--a113-surface));
  border-color: rgba(125, 91, 166, 0.25);
}
.fh-card--kraft {
  background: var(--fh-kraft);
}
.fh-card h3, .fh-card h4 {
  margin: 0 0 0.5em;
  font-family: var(--fg-font-tab);
  font-size: var(--a113-type-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fh-bark);
}
.fh-card p { margin: 0 0 0.65em; font-size: var(--a113-type-sm); color: var(--fg-mute); }
.fh-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: var(--a113-space-2);
}
.fh-card-meta {
  margin: 0.25em 0 0;
  font-size: var(--a113-type-xs);
  color: var(--fg-mute);
}
.fh-card-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.fh-card-nav a {
  font-size: var(--a113-type-sm);
  font-weight: 600;
  color: var(--fh-herb-deep);
  text-decoration: none;
}
.fh-card-nav a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .fh-topics { grid-template-columns: 1fr; }
}