/* Recipe UI ownership: Utilities. Responsive rules stay with this owner. */

.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.recipe-page { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

.recipe-hero { padding: 1.5rem 1.75rem; }

.eyebrow { font-size: var(--recipe-font-compact); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-4); }

.recipe-hero h1 {
  margin: 0.35rem 0 0.4rem;
  font-size: var(--recipe-font-display);
}

.heading-accent::after {
  content: "";
  display: block;
  width: 32px; 
  height: 2px;
  background: var(--paint-2);
  opacity: 0.45;
  margin-top: 6px;
  border-radius: var(--recipe-radius-small);
}

.recipe-hero .lead { margin: 0; color: var(--gray-4); max-width: 48rem; line-height: 1.5; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--recipe-radius-status);
  background: transparent;
  border: 1.5px solid var(--line-strong);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--recipe-font-working);
}

.pill.muted { background: var(--gray-1); border-color: var(--line); color: var(--gray-4); }

.pill.link {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--recipe-surface);
  text-decoration: none;
  box-shadow: var(--recipe-shadow-overlay);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.pill.link:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
}

.recipe-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }

.meta-block { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--recipe-radius-large); background: var(--paper); }

.meta-label { font-size: var(--recipe-font-compact); color: var(--gray-4); text-transform: uppercase; letter-spacing: 0.04em; }

.meta-value { font-weight: 700; margin-top: 0.2rem; }

.meta-block.span-2 { grid-column: span 2; }

.meta-block.span-4 { grid-column: span 4; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }

.recipe-body .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }

.json-block { background: var(--recipe-information); color: var(--recipe-information-wash); padding: 0.75rem 0.9rem; border-radius: var(--recipe-radius-large); border: 1px solid var(--recipe-information); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: var(--recipe-font-control); overflow-x: auto; }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }

.export-card { padding: 1rem 1.25rem; }

.export-bar { display: flex; flex-direction: column; gap: 0.35rem; }

.export-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.export-actions.secondary { margin-top: 0.35rem; }

.export-helper { margin: 0; font-size: var(--recipe-font-working); color: var(--gray-4); }

.flex-center-gap { display: flex; align-items: center; gap: 0.75rem; }

.flex-center-gap-sm { display: flex; align-items: center; gap: 0.5rem; }

.mb-0 { margin-bottom: 0; }

.mt-0 { margin-top: 0; }

.mb-1 { margin-bottom: 1rem; }

.mb-2 { margin-bottom: 0.5rem; }

.mb-3 { margin-bottom: 1.5rem; }

.mt-0 { margin-top: 0; }

.mt-05 { margin-top: 0.35rem; }

.p-1 { padding: 1rem; }

.p-02-05 { padding: 0.2rem 0.5rem; }

.text-right { text-align: right; }

.text-danger { color: var(--recipe-danger); }

.text-xs { font-size: var(--recipe-font-control); }

.hidden { display: none; }

.display-block { display: block; }

.flex-1 { flex: 1; }

.flex-grow-1 { flex-grow: 1; }

.flex-column { display: flex; flex-direction: column; }

.overflow-auto { overflow: auto; }

.overflow-y-auto { overflow-y: auto; }

.max-w-200 { max-width: 200px; }

.max-w-800 { max-width: 800px; }

.max-w-900 { max-width: 900px; }

.max-w-95vw { max-width: 95vw; }

.h-auto { height: auto; }

.h-90vh { height: 90vh; }

.max-h-90vh { max-height: 90vh; }

.border-radius-8 { border-radius: var(--recipe-radius-medium); }

.border-sage-2 { border: 2px solid var(--sage-green); }

.color-sage-green { color: var(--sage-green); }

.mr-05 { margin-right: 0.5rem; }

.kg-container { border: 1px solid var(--line); background: var(--recipe-surface); }

.border-bottom-2 { border-bottom: 2px solid var(--recipe-line); }

.pb-05 { padding-bottom: 0.5rem; }

.export-details { border: 1px solid var(--line); border-radius: var(--recipe-radius-large); padding: 0.75rem 0.9rem; background: var(--recipe-surface); box-shadow: var(--recipe-shadow-surface); }

.export-details[open] { border-color: var(--recipe-information-wash); box-shadow: var(--recipe-shadow-overlay); }

.export-summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  margin: 0 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
  font-size: var(--recipe-font-heading);
}

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

.export-summary::before {
  content: ">";
  font-size: var(--recipe-font-compact);
  transform: rotate(90deg);
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--ink);
}

.top-switcher {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.top-summaries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.75rem;
}

.top-summary {
  border: 1px solid var(--line);
  border-radius: var(--recipe-radius-large);
  padding: 0.75rem 0.9rem;
  background: var(--recipe-surface);
  width: 100%;
  text-align: left;
  appearance: none;
  color: var(--charcoal);
  box-shadow: var(--recipe-shadow-surface);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.top-summary:hover {
  border-color: var(--line-strong);
  box-shadow: var(--recipe-shadow-overlay);
  transform: translateY(-1px);
}

.top-summary.active {
  border-color: var(--ink);
  box-shadow: var(--recipe-shadow-overlay);
}

.top-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.top-panels {
  border: 1.5px solid var(--line);
  border-radius: var(--recipe-radius-large);
  box-shadow: var(--recipe-shadow-surface);
  padding: 0.5rem;
  background: var(--recipe-surface);
}

.top-panel { display: none; }

.top-panel.active { display: block; }

.export-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.export-group {
  border: 1px solid var(--line);
  border-radius: var(--recipe-radius-large);
  padding: 0.6rem;
  background: var(--recipe-surface);
  box-shadow: var(--recipe-shadow-surface);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.export-group-title {
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--charcoal);
}

.summary-hint {
  font-size: var(--recipe-font-compact);
  font-weight: 400;
  color: var(--gray-4);
}

.summary-quick-actions {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin-left: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.summary-quick-actions.inline-summary {
  margin-left: 0;
  padding-top: 0.1rem;
}

.summary-label {
  font-size: var(--recipe-font-compact);
  color: var(--gray-4);
  line-height: 1.2;
}

.summary-value {
  font-weight: 700;
  font-size: var(--recipe-font-body);
  color: var(--charcoal);
}

.action-title { font-family: var(--font-serif); font-weight: 700; color: var(--charcoal); }

.action-status { font-weight: 600; font-size: var(--recipe-font-working); color: var(--gray-4); }

.action-status[data-tone="success"] { color: var(--recipe-success); }

.action-status[data-tone="error"] { color: var(--recipe-danger); }

.action-status[data-tone="info"] { color: var(--recipe-information); }

.top-tabs-card {
  border: 1.5px solid var(--line);
  border-radius: var(--recipe-radius-large);
  background: var(--recipe-surface);
  box-shadow: var(--recipe-shadow-overlay);
  padding: 0.85rem 1rem 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.top-tablist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tab-hint {
  font-size: var(--recipe-font-control);
  color: var(--gray-4);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.tab-right {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.tab-chevron {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../../favicon.3b670e850f47.svg") center center / contain no-repeat;
  transition: transform 160ms ease;
}

.top-tab-summaries {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.top-tab-panels {
  border: 1.5px solid var(--line);
  border-radius: var(--recipe-radius-large);
  box-shadow: var(--recipe-shadow-surface);
  padding: 0.75rem 0.85rem;
  background: var(--recipe-surface);
  overflow: visible;
  margin-top: 0.15rem;
}

.top-tab-panels.is-hidden {
  display: none;
}

.tab-panel { display: none; }

.tab-panel.active { display: block; }

.builder-toolbar {
  border: 1.5px solid var(--line);
  border-radius: var(--recipe-radius-large);
  background: var(--recipe-surface);
  box-shadow: var(--recipe-shadow-overlay);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.75rem;
  position: sticky;
  top: 0.5rem;
  z-index: 24;
  backdrop-filter: blur(6px);
}

.toolbar-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.toolbar-label {
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--charcoal);
  font-size: var(--recipe-font-body);
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.flex-center-gap > h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.search-form-max-900 {
  max-width: 900px;
}