/*
 * Orb Link — generic adapter. Blocks of orb articles in any theme.
 * Fonts, text colour and widths come from the theme; blocks only add soft frames and tints.
 * Colours are tuned so that they read on light and on dark themes alike.
 * A theme can restyle everything through the --orb-* variables.
 */
.orb-block {
  --orb-radius: 10px;
  --orb-gap: 1.4em;
  --orb-border: rgba(127, 127, 127, .28);
  --orb-tint: rgba(127, 127, 127, .07);
  --orb-info: #2271b1;
  --orb-warning: #b26200;
  --orb-danger: #c62828;
  --orb-success: #1f8a3b;
  --orb-takeaway: #6a3fb5;
  margin: var(--orb-gap) 0;
}
.orb-block > :first-child { margin-top: 0; }
.orb-block > :last-child { margin-bottom: 0; }

/* Lead paragraph and badge (hero-subtitle, hero-label) */
.orb-lead { font-size: 1.18em; line-height: 1.55; opacity: .85; margin-top: 0; }
.orb-label { margin: 0 0 .8em; }
.orb-label span {
  display: inline-block; font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .3em .8em; border-radius: 999px; background: var(--orb-tint); border: 1px solid var(--orb-border);
}

/* Callouts */
.orb-callout {
  --orb-accent: var(--orb-info);
  position: relative; padding: 1em 1.2em 1em 1.35em; border-radius: var(--orb-radius);
  background: color-mix(in srgb, var(--orb-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--orb-accent) 28%, transparent);
  border-left: 4px solid var(--orb-accent);
}
.orb-callout--warning { --orb-accent: var(--orb-warning); }
.orb-callout--danger { --orb-accent: var(--orb-danger); }
.orb-callout--success { --orb-accent: var(--orb-success); }
.orb-callout--takeaway { --orb-accent: var(--orb-takeaway); }
.orb-callout--term, .orb-callout--example { --orb-accent: rgba(127, 127, 127, .9); }
.orb-callout__title { font-weight: 700; margin: 0 0 .35em; color: var(--orb-accent); }
.orb-callout__body > :first-child { margin-top: 0; }
.orb-callout__body > :last-child { margin-bottom: 0; }
.orb-callout__body ul { margin-bottom: 0; }

/* Details and FAQ */
.orb-details, .orb-faq__item {
  border: 1px solid var(--orb-border); border-radius: var(--orb-radius); background: transparent;
}
.orb-details > summary, .orb-faq__item > summary {
  cursor: pointer; list-style: none; padding: .85em 2.6em .85em 1.1em; font-weight: 600; position: relative;
}
.orb-details > summary::-webkit-details-marker, .orb-faq__item > summary::-webkit-details-marker { display: none; }
.orb-details > summary::after, .orb-faq__item > summary::after {
  content: ""; position: absolute; right: 1.1em; top: 50%; width: .5em; height: .5em; margin-top: -.35em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  opacity: .55; transition: transform .2s;
}
.orb-details[open] > summary::after, .orb-faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: -.1em; }
.orb-details__body, .orb-faq__answer { padding: 0 1.1em 1em; }
.orb-details__body > :first-child, .orb-faq__answer p:first-child { margin-top: 0; }
.orb-details__body > :last-child, .orb-faq__answer p:last-child { margin-bottom: 0; }
.orb-faq { display: grid; gap: .6em; }
.orb-faq__item { margin: 0; }

/* At a glance */
.orb-glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
  border: 1px solid var(--orb-border); border-radius: var(--orb-radius); overflow: hidden; background: var(--orb-border);
}
.orb-glance__row { padding: .9em 1.1em; margin: 0; background: var(--orb-surface, Canvas); }
.orb-glance dt { font-size: .78em; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin: 0 0 .25em; }
.orb-glance dd { margin: 0; font-weight: 600; }

/* Cards */
.orb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1em; }
.orb-card { padding: 1.1em 1.2em; border: 1px solid var(--orb-border); border-radius: var(--orb-radius); background: var(--orb-tint); }
.orb-card__title { font-weight: 700; margin: 0 0 .4em; }
.orb-card > :last-child { margin-bottom: 0; }

/* Dos and don'ts */
.orb-dosdonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1em; }
.orb-dosdonts__col { padding: 1em 1.2em; border-radius: var(--orb-radius); border: 1px solid var(--orb-border); }
.orb-dosdonts__col--do { background: color-mix(in srgb, var(--orb-success) 7%, transparent); }
.orb-dosdonts__col--dont { background: color-mix(in srgb, var(--orb-danger) 6%, transparent); }
.orb-dosdonts__title { font-weight: 700; margin: 0 0 .5em; }
.orb-dosdonts__col--do .orb-dosdonts__title { color: var(--orb-success); }
.orb-dosdonts__col--dont .orb-dosdonts__title { color: var(--orb-danger); }
.orb-dosdonts ul { margin: 0; padding-left: 1.2em; }
.orb-dosdonts li + li { margin-top: .35em; }

/* Checklist */
.orb-checklist { padding: 1em 1.2em; border: 1px solid var(--orb-border); border-radius: var(--orb-radius); }
.orb-checklist__title { font-weight: 700; margin: 0 0 .6em; }
.orb-checklist ul { list-style: none; margin: 0; padding: 0; }
.orb-checklist li { position: relative; padding-left: 1.9em; margin: .45em 0; }
.orb-checklist li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.05em; height: 1.05em;
  border: 2px solid currentColor; border-radius: 4px; opacity: .45;
}

/* Worked example */
.orb-steps { padding: 1.1em 1.2em; border: 1px solid var(--orb-border); border-radius: var(--orb-radius); background: var(--orb-tint); }
.orb-steps__heading { font-weight: 700; margin: 0 0 .8em; }
.orb-steps ol { list-style: none; counter-reset: orb-step; margin: 0; padding: 0; }
.orb-steps li { counter-increment: orb-step; position: relative; padding-left: 2.6em; margin: 0 0 1em; }
.orb-steps li:last-child { margin-bottom: 0; }
.orb-steps li::before {
  content: counter(orb-step); position: absolute; left: 0; top: 0; width: 1.8em; height: 1.8em; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .9em;
  border: 1px solid var(--orb-border); background: var(--orb-surface, Canvas);
}
.orb-steps__title { font-weight: 600; margin: 0 0 .25em; }
.orb-steps li > :last-child { margin-bottom: 0; }