/* ============================================================
   Going further · proposed collapsible family (mockup)
   One family color (indigo = "optional depth", as today).
   The KIND is carried by the icon badge and the eyebrow label.
   ============================================================ */

div.callout.gf {
  --gf-accent:   var(--indigo);
  --gf-tint:     #f3f5fd;
  --gf-line:     #d9def0;
  --gf-badge-bg: #e6eafa;
  --gf-badge-fg: var(--indigo);
  border: 1px solid var(--gf-line) !important;
  border-left: 4px solid var(--gf-accent) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(28, 36, 51, .04);
  margin: 1.6rem 0 !important;
  overflow: hidden;
  transition: box-shadow .18s ease;
}
div.callout.gf:hover { box-shadow: var(--shadow-sm); }

/* Header row: badge | eyebrow over title | reading time | chevron */
div.callout.gf > .callout-header {
  background: transparent !important;
  padding: .7rem .9rem .7rem .85rem !important;
  align-items: center !important;
  cursor: pointer;
  border: 0 !important;
  transition: background-color .18s ease;
}
div.callout.gf > .callout-header:hover,
div.callout.gf > .callout-header[aria-expanded=true] { background: var(--gf-tint) !important; }
div.callout.gf > .callout-header[aria-expanded=true] { border-bottom: 1px solid var(--gf-line) !important; }

div.callout.gf .callout-title-container {
  display: grid !important;
  grid-template-columns: 2.2rem 1fr auto;
  column-gap: .85rem;
  row-gap: .05rem;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 400 !important;
  color: var(--ink) !important;
}
div.callout.gf .callout-title-container::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gf-badge-bg);
  color: var(--gf-badge-fg);
  font-family: "bootstrap-icons";
  font-size: 1.02rem;
  line-height: 1;
}
div.callout.gf-why     .callout-title-container::before { content: "\f1e0"; } /* bi-calculator */
div.callout.gf-code    .callout-title-container::before { content: "\f2c6"; } /* bi-code-slash */
div.callout.gf-methods .callout-title-container::before { content: "\f2ec"; } /* bi-diagram-2  */

.gf-kind {
  grid-column: 2; grid-row: 1;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gf-accent);
  line-height: 1.3;
}
.gf-title {
  grid-column: 2; grid-row: 2;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.gf-time {
  grid-column: 3; grid-row: 1 / span 2;
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-mid);
  background: var(--sand);
  border-radius: 999px;
  padding: .18rem .62rem;
  white-space: nowrap;
}
.gf-time::before {
  content: "\f293";               /* bi-clock */
  font-family: "bootstrap-icons";
  margin-right: .32rem;
  vertical-align: -.08em;
}

/* Chevron: Quarto rotates it -90deg when folded; give it a soft hit area */
div.callout.gf .callout-btn-toggle { display: flex !important; align-items: center; margin-left: .5rem; }
div.callout.gf .callout-toggle::before {
  background-image: none !important;
  content: "\f282" !important;     /* bi-chevron-down */
  font-family: "bootstrap-icons";
  width: 1.8rem !important;
  height: 1.8rem !important;
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gf-accent);
  font-size: .82rem;
  transition: transform .2s ease, background-color .18s ease;
}
div.callout.gf > .callout-header:hover .callout-toggle::before { background-color: var(--gf-badge-bg); }

div.callout.gf .callout-body-container {
  padding: 1rem 1.4rem 1.15rem 1.4rem !important;
  font-size: .97rem;
}
div.callout.gf .callout-body-container > :last-child { margin-bottom: 0; }

/* Variant B: a color for each kind (shown for comparison) */
div.callout.gf.gf-b.gf-code {
  --gf-accent: #3B4252; --gf-tint: #f2f3f6; --gf-line: #d7dbe3;
  --gf-badge-bg: #2E3440; --gf-badge-fg: #88C0D0;   /* the dark Nord of the code blocks */
}
div.callout.gf.gf-b.gf-methods {
  --gf-accent: var(--spruce); --gf-tint: #f1f7f3; --gf-line: #d3e5d9;
  --gf-badge-bg: #dcece2; --gf-badge-fg: var(--spruce);
}

/* ── The legend, for a Module's "How to use this page" box ── */
.gf-legend { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(52, 140, 158, .25); }
.gf-legend-lead { margin-bottom: .7rem; }
.gf-legend-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.gf-chip {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--gf-line, #d9def0);
  border-left: 3px solid var(--indigo);
  border-radius: 8px;
  padding: .55rem .7rem;
  font-family: var(--font-sans);
  line-height: 1.3;
}
.gf-chip .gf-dot {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e6eafa; color: var(--indigo); font-size: .85rem;
}
.gf-chip b { display: block; font-size: .8rem; color: var(--indigo); letter-spacing: .02em; }
.gf-chip span.gf-desc { display: block; font-size: .8rem; color: var(--ink-mid); margin-top: .1rem; }
@media (max-width: 720px) { .gf-legend-row { grid-template-columns: 1fr; } }

/* Mockup-only scaffolding */
.mock-note { font-family: var(--font-sans); font-size: .82rem; color: var(--muted); border-left: 3px solid var(--parchment); padding-left: .7rem; margin: .4rem 0 1rem; }

/* Phones: the reading-time chip drops under the title so the title keeps the width */
@media (max-width: 576px) {
  div.callout.gf > .callout-header { padding: .65rem .55rem .65rem .7rem !important; }
  div.callout.gf .callout-title-container { grid-template-columns: 1.95rem 1fr; column-gap: .7rem; }
  div.callout.gf .callout-title-container::before {
    width: 1.95rem; height: 1.95rem; font-size: .92rem;
    grid-row: 1 / span 3; align-self: start; margin-top: .1rem;
  }
  .gf-time { grid-column: 2; grid-row: 3; justify-self: start; margin-top: .35rem; }
}