/* About section: credentials orbit, career timeline, role cards, panels; modal; phone booking bar */
@layer components {
  .lede { color: var(--muted); font-size: var(--fs-2); margin-top: calc(var(--s-6) * -0.5); margin-bottom: var(--s-7); max-width: 60ch; }
  .subhead { font-family: var(--font-head); font-size: var(--fs-2); font-weight: 600; margin-top: var(--s-8); }
  .hint { color: var(--muted); font-size: var(--fs-0); margin-top: var(--s-1); }
  .muted { color: var(--muted); }

  /* ---------- Credentials orbit ---------- */
  .orbit {
    container-type: inline-size;
    position: relative; width: min(100%, 600px); aspect-ratio: 1; margin: var(--s-6) auto 0;
  }
  .orbit__center {
    position: absolute; inset: 29%; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--line); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .orbit__center img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
  .orbit__caption {
    position: absolute; left: 50%; bottom: 22%; translate: -50% 0; width: 46%; min-height: 2.6em;
    text-align: center; font-size: var(--fs-0); color: var(--text); line-height: 1.3; pointer-events: none;
  }
  .orbit__ring { position: absolute; inset: 0; animation: orbit-spin var(--orbit-period) linear infinite; }
  .orbit__item {
    position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px;
    transform: rotate(var(--angle)) translateY(calc(-50cqi + 40px)) rotate(calc(-1 * var(--angle)));
  }
  .orbit__badge {
    width: 100%; height: 100%; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; padding: 0;
    background: var(--surface); color: var(--text); border: 2px solid var(--badge, var(--line));
    animation: orbit-spin var(--orbit-period) linear infinite reverse; /* counter-rotation keeps badges upright */
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .orbit__badge:hover, .orbit__badge:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--badge, var(--accent)) 35%, transparent); }
  .orbit__badge[aria-disabled="true"] { cursor: default; border-style: dashed; opacity: 0.75; }
  .orbit__abbr { font-family: var(--font-num); font-size: 1.1rem; }
  .orbit__name, .orbit__year { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Pause while a badge is hovered/focused — scoped to the ring, not the whole orbit, so focus left on
     the Resume button doesn't keep it paused (I-026) */
  .orbit.is-paused .orbit__ring, .orbit.is-paused .orbit__badge,
  .orbit__ring:has(.orbit__badge:hover), .orbit__ring:has(.orbit__badge:hover) .orbit__badge,
  .orbit__ring:focus-within, .orbit__ring:focus-within .orbit__badge { animation-play-state: paused; }
  .orbit__toggle {
    position: absolute; right: 0; bottom: 0; min-height: 44px; padding-inline: var(--s-4);
    border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; font-size: var(--fs-0);
  }
  .orbit__badge--HS { --badge: #ff7a59; }
  .orbit__badge--OU { --badge: #4f8fe8; }
  .orbit__badge--PH { --badge: #8b7cf6; }
  .orbit__badge--DA { --badge: #8bc34a; }
  .orbit__badge--MOS { --badge: #e8743b; }
  .orbit__badge--CI { --badge: #49b6c9; }
  .orbit__badge--CV { --badge: var(--accent); }

  /* Phones and reduced motion: same markup as a static grid (no moving targets) */
  @media (max-width: 767px), (prefers-reduced-motion: reduce) {
    .orbit { aspect-ratio: auto; container-type: normal; width: 100%; }
    .orbit__center { position: static; width: 160px; height: 160px; margin: 0 auto var(--s-5); }
    .orbit__caption, .orbit__toggle { display: none; }
    .orbit__ring { position: static; animation: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
    .orbit__item { position: static; width: auto; height: auto; margin: 0; transform: none; }
    .orbit__badge {
      animation: none; border-radius: var(--radius); place-items: start; text-align: left;
      padding: var(--s-3); gap: var(--s-1); min-height: 44px; border-width: 1px; border-left: 4px solid var(--badge, var(--line));
    }
    .orbit__name, .orbit__year { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
    .orbit__name { font-size: var(--fs-0); font-weight: 500; line-height: 1.3; }
    .orbit__year { font-size: 0.8rem; color: var(--muted); }
    .orbit__abbr { font-size: 0.8rem; color: var(--muted); }
  }

  /* ---------- Career timeline (two-lane Gantt) ---------- */
  .tl__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--fs-0); color: var(--muted); }
  .tl__legend-item, .tl__lane-title, .roles__heading { display: inline-flex; align-items: center; gap: var(--s-2); }
  .tl__swatch { width: 14px; height: 8px; border-radius: 4px; background: var(--lane); flex: none; }
  .tl__swatch--overlap { height: 14px; border-radius: 3px; background: var(--overlap); border: 1px solid var(--line); }
  .tl__lane--operations { --lane: var(--lane-ops); }
  .tl__lane--growth { --lane: var(--lane-growth); }

  .tl { position: relative; margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .tl__lane + .tl__lane { margin-top: var(--s-4); }
  .tl__lane-title { font-size: var(--fs-0); font-weight: 500; color: var(--text); margin-bottom: var(--s-1); }
  .tl__row, .tl__axis { display: grid; grid-template-columns: minmax(0, 38%) 1fr; align-items: center; column-gap: var(--s-4); }
  .tl__label { font-size: var(--fs-0); color: var(--text); line-height: 1.25; padding-block: var(--s-1); }
  .tl__org { display: block; color: var(--muted); font-size: 0.8rem; }
  .tl__track { position: relative; height: 36px; border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent); }
  .tl__overlap { position: absolute; top: 0; bottom: -1px; background: var(--overlap); pointer-events: none; }
  .tl__bar {
    position: absolute; top: 12px; height: 12px; min-width: 6px; border-radius: 4px; background: var(--lane);
    box-shadow: 0 0 0 2px var(--surface); /* 2px surface ring between marks */
  }
  .tl__bar::before { content: ""; position: absolute; inset: -12px -6px; } /* hit target larger than the mark */
  .tl__bar:hover, .tl__bar:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
  .tl__axis { margin-top: var(--s-2); }
  .tl__ticks { position: relative; height: 1.4em; }
  .tl__tick { position: absolute; translate: -50% 0; font-family: var(--font-num); font-size: 0.75rem; color: var(--muted); }
  .tl__tip {
    position: absolute; z-index: 5; translate: -50% calc(-100% - 8px); max-width: 240px; pointer-events: none;
    padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface-2); color: var(--text); font-size: 0.8rem; line-height: 1.35; box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
  }
  @media (max-width: 767px) {
    .tl { padding: var(--s-3); }
    .tl__row, .tl__axis { grid-template-columns: 1fr; }
    .tl__axis > .tl__label { display: none; }
    .tl__tick:nth-child(even) { visibility: hidden; } /* avoid colliding year labels on narrow screens */
  }
  .tl__table { margin-top: var(--s-3); font-size: var(--fs-0); }
  .tl__table summary { cursor: pointer; color: var(--accent); min-height: 44px; display: flex; align-items: center; }
  .tl__table table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); display: block; overflow-x: auto; }
  .tl__table th, .tl__table td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--line); vertical-align: top; }
  .tl__table th { color: var(--muted); font-weight: 500; }

  /* ---------- Overlap callout + role cards ---------- */
  .overlap-callout {
    margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border: 1px dashed var(--accent); border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  }
  .overlap-callout__period { font-family: var(--font-num); color: var(--accent); font-size: var(--fs-0); }
  .roles { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
  @media (min-width: 1024px) { .roles { grid-template-columns: 1fr 1fr; align-items: start; } }
  .roles__col { display: grid; gap: var(--s-4); }
  .roles__heading { font-family: var(--font-head); font-weight: 600; }
  .role {
    padding: var(--s-5); border: 1px solid var(--line); border-left: 4px solid var(--lane, var(--line)); border-radius: var(--radius);
    background: var(--surface); scroll-margin-top: calc(var(--header-h) + var(--s-4));
  }
  .role--operations { --lane: var(--lane-ops); }
  .role--growth { --lane: var(--lane-growth); }
  .role:target { box-shadow: 0 0 0 2px var(--accent); }
  .role__title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; }
  .role__current {
    font-family: var(--font-num); font-size: 0.7rem; font-weight: 500; vertical-align: middle; color: var(--accent);
    border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 1px 8px; margin-left: var(--s-1);
  }
  .role__org { color: var(--text); font-size: var(--fs-0); margin-top: var(--s-1); }
  .role__dates { color: var(--muted); font-family: var(--font-num); font-size: 0.8rem; }
  .roe { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; margin: var(--s-4) 0; padding: var(--s-3); border-radius: 8px; background: var(--bg); }
  .roe dt { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .roe dd { margin: 0; font-size: var(--fs-0); line-height: 1.35; }
  .roe__cell--out dd { font-weight: 500; color: var(--text); }
  .roe__arrow { color: var(--accent); font-size: 1.25rem; }
  @media (max-width: 479px) { .roe { grid-template-columns: 1fr; } .roe__arrow { rotate: 90deg; justify-self: start; } }
  .role__list { display: grid; gap: var(--s-2); padding-left: 1.1em; list-style: disc; font-size: var(--fs-0); color: var(--text); }
  .role__list li::marker { color: var(--lane); }
  .role__more { margin-top: var(--s-2); }
  .role__more summary { cursor: pointer; color: var(--accent); font-size: var(--fs-0); min-height: 44px; display: flex; align-items: center; }
  .role__photos { margin-top: var(--s-4); }
  .role__photos-title { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
  .role__photos-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-2); }
  .role__photo { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--bg); }
  .role__photo:hover, .role__photo:focus-visible { border-color: var(--accent); }
  .role__thumb { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: scale var(--dur-med) var(--ease-out); }
  .role__photo:hover .role__thumb { scale: 1.05; }
  .role__note { margin-top: var(--s-3); font-size: var(--fs-0); color: var(--muted); font-style: italic; }

  /* ---------- Panels (awards, education, languages, skills) ---------- */
  .panels { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--s-8); }
  .panel { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .panels + .panel { margin-top: var(--s-4); }
  .panel__title { font-family: var(--font-head); font-size: 1rem; font-weight: 600; margin-bottom: var(--s-3); }
  .panel__list { display: grid; gap: var(--s-2); font-size: var(--fs-0); }
  .chips { margin-top: var(--s-3); }
  .chips__label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
  .chips__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .chip { font-size: 0.8rem; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); }

  /* ---------- Modal ---------- */
  .modal { padding: 0; width: min(92vw, 880px); }
  .modal__body { padding: var(--s-6) var(--s-5) var(--s-5); }
  .modal__body h3 { font-family: var(--font-head); font-size: var(--fs-2); padding-right: 48px; }
  .modal__meta { color: var(--muted); font-size: var(--fs-0); margin: var(--s-2) 0 var(--s-4); }
  .modal__figure { margin: 0; display: grid; gap: var(--s-3); }
  .modal__photo { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 8px; }
  .modal__figure figcaption { font-size: var(--fs-0); padding-right: 48px; }
  .modal__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .modal__img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; background: #fff; }
  .modal__close {
    position: absolute; top: var(--s-2); right: var(--s-2); width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font-size: 1.5rem; line-height: 1;
  }

  /* ---------- Phone booking bar ---------- */
  .bookbar {
    position: fixed; inset: auto 0 0; z-index: 60; display: flex; gap: var(--s-2);
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  }
  .bookbar[hidden] { display: none; }
  .bookbar__book { flex: 1; }
  body.has-bookbar { padding-bottom: 80px; }
  @media (min-width: 768px) { .bookbar { display: none !important; } }
  /* ---------- Ventures ---------- */
  .ventures { display: grid; gap: var(--s-5); }
  @media (min-width: 1024px) { .ventures { grid-template-columns: 7fr 5fr; align-items: start; } }
  .venture { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .venture__art { display: block; width: 100%; margin-bottom: var(--s-2); }
  .venture__art img { width: 100%; height: auto; border-radius: 8px; }
  .venture--main { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 7%, var(--surface)), var(--surface) 60%); }
  .venture__status { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-num); font-size: 0.8rem; color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 50%, transparent); border-radius: var(--radius-pill); padding: 2px 10px; }
  .venture__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: pulse 2s infinite; }
  .venture__name { font-family: var(--font-head); font-size: var(--fs-4); font-weight: 700; line-height: 1; }
  .venture__name--small { font-size: var(--fs-3); line-height: 1.15; }
  .venture__formerly { font-size: var(--fs-0); color: var(--muted); margin-top: calc(var(--s-2) * -1); }
  .venture__tagline { font-size: var(--fs-2); line-height: 1.35; }
  .venture--main .venture__tagline { color: var(--text); }
  .venture__origin, .venture__state { color: var(--muted); }
  .venture__subhead { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); }
  .pricing { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
  .pricing__tier { display: grid; padding: var(--s-3) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-width: 140px; }
  .pricing__name { font-size: var(--fs-0); color: var(--muted); }
  .pricing__amount { font-family: var(--font-num); font-size: var(--fs-3); color: var(--text); line-height: 1.2; }
  .pricing__per { font-size: 0.8rem; color: var(--muted); }
  .venture__outcomes { display: grid; gap: var(--s-2); padding-left: 1.1em; list-style: disc; }
  .venture__outcomes li::marker { color: var(--accent); }
  .venture__evidence { font-size: var(--fs-0); color: var(--muted); padding: var(--s-3); border-radius: 8px; background: var(--bg); margin-bottom: var(--s-2); }
  .venture__evidence-label { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

  /* ---------- Contact ---------- */
  .intents { border: 0; padding: 0; margin: 0 0 var(--s-6); }
  .intents__legend { font-weight: 500; margin-bottom: var(--s-3); padding: 0; }
  .intents__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .chip-radio { position: relative; }
  .chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .chip-radio span {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-5);
    border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .chip-radio input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); }
  .chip-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
  .intents__context { margin-top: var(--s-3); color: var(--muted); min-height: 1.6em; }
  .contact-grid { display: grid; gap: var(--s-5); }
  @media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; align-items: start; } }
  .channels { display: grid; gap: var(--s-4); }
  .channels__group { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .channels__list { display: grid; gap: var(--s-2); }
  .channel {
    display: grid; min-height: 44px; padding: var(--s-2) var(--s-3); border-radius: 8px; text-decoration: none; color: var(--text);
    border: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .channel:hover, .channel:focus-visible { border-color: var(--accent); background: var(--bg); }
  .channel__label { font-size: 0.75rem; color: var(--muted); }
  .channel__value { font-family: var(--font-num); font-size: var(--fs-0); overflow-wrap: anywhere; }
  .form { display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .field { display: grid; gap: var(--s-1); }
  .field label { font-size: var(--fs-0); font-weight: 500; }
  .field input, .field select, .field textarea {
    min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text);
  }
  .field textarea { resize: vertical; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .field [aria-invalid="true"] { border-color: var(--danger); }
  .field__error { color: var(--danger); font-size: var(--fs-0); }
  .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form .btn { justify-self: start; border: 0; cursor: pointer; }
  .form .btn:disabled { opacity: 0.6; cursor: wait; }
  .form__privacy { font-size: 0.8rem; color: var(--muted); }
  .form__status:empty { display: none; }
  .form__status { padding: var(--s-3); border-radius: 8px; font-size: var(--fs-0); }
  .form__status.is-success { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  .form__status.is-error { border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }

  /* ---------- Footer ---------- */
  .footer { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
  @media (min-width: 1024px) { .footer { grid-template-columns: auto 1fr auto auto; place-items: center start; text-align: left; } }
  .footer__nav ul, .footer__social { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); justify-content: center; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
  .footer a:hover, .footer a:focus-visible { color: var(--text); }
  .footer__top { color: var(--accent) !important; }
}

@keyframes orbit-spin { to { rotate: 360deg; } }