/* panel.css — L2 panel. Owns: .panel, .eyebrow, .person__*, .pill, .actions/.action, .tools/.tool, .spec, .band.
   Values come from tokens.css only. Mobile-first (390px), split at 760px. Pure CSS3, no JS. */

/* ------------------------------------------------------------------ panel */
.panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-24), 5vw, var(--s-32));
  padding: clamp(var(--s-16), 4vw, var(--s-48));
  border: var(--hairline);
  border-radius: var(--r-panel);
  background: var(--c-surface);
  color: var(--c-ink);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel {
    background: rgba(19, 38, 54, .7); /* = --c-surface @ 70% (fallback for no color-mix) */
    background: color-mix(in srgb, var(--c-surface) 70%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.panel__media {
  inline-size: 100%;
  max-inline-size: 440px;
  min-inline-size: 0;
  justify-self: center;
}

.panel__body {
  container: body / inline-size;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 760px) {
  .panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(var(--s-48), 5vw, var(--s-64));
    align-items: center;
  }
  .panel__media { justify-self: stretch; }
}

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  margin: 0 0 var(--s-16);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink);
}
.eyebrow__sq {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  background: var(--c-ink);
}

/* ----------------------------------------------------------------- person */
.person__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h1);
  color: var(--c-ink);
  text-wrap: balance;
}
.person__honorific {
  display: block;
  margin-block-end: .14em;
  font-size: .5em;
  font-weight: var(--fw-regular);
  letter-spacing: -0.015em;
  color: var(--c-ink-2);
}

.person__role {
  margin: var(--s-16) 0 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-ink-2);
}

.person__lede {
  max-inline-size: 46ch;
  margin: var(--s-12) 0 var(--s-32);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ pills */
.pill {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-block-size: 52px;
  padding-block: var(--s-8);
  padding-inline: 22px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: .9688rem; /* 15.5px: between the 15–16px spec */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--t-mid) var(--ease-out);
}

.pill__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1;
  transition: transform var(--t-mid) var(--ease-out);
}
.pill__icon svg { display: block; }

.pill--primary {
  background: var(--c-ink);
  color: var(--c-on-ink);
}
.pill--primary .pill__icon {
  background: var(--c-signal);
  color: var(--c-ink);
}

.pill--ghost {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-ink);
}
.pill--ghost .pill__icon {
  background: var(--c-ink);
  color: var(--c-on-ink);
}

.pill--block {
  display: flex;
  inline-size: 100%;
}

/* hero save button: full width on phones, intrinsic from the split up */
.panel__body > .pill--primary {
  inline-size: 100%;
}
@media (min-width: 760px) {
  .panel__body > .pill--primary {
    inline-size: auto;
    min-inline-size: 260px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover { transform: translateY(-1px); }
  .pill--primary:hover .pill__icon { transform: translateY(2px); }           /* download arrow dips */
  .pill--ghost:hover .pill__icon { transform: translateX(3px) rotate(-45deg); } /* call-back arrow points out */
}
.pill:active { transform: scale(.98); }

.pill:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- actions */
.actions {
  list-style: none;
  inline-size: 100%;
  margin: var(--s-32) 0 0;
  padding: 0;
}
.actions > li { margin: 0; padding: 0; }
.actions > li:first-child > .action { border-block-start: var(--hairline-soft); }

.action {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-12);
  min-block-size: 52px;
  padding-block: var(--s-8);
  border-block-end: var(--hairline-soft);
  color: var(--c-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.action__k {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  color: var(--c-ink-2);
}
.action__v {
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  overflow-wrap: anywhere;
}
.action__arrow {
  font-size: var(--fs-16);
  line-height: 1;
  color: var(--c-ink-2);
  transition: transform var(--t-mid) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .action:hover .action__arrow { transform: translateX(3px); color: var(--c-ink); }
  .action:hover .action__v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
.action:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-ctl);
}
.action:focus-visible .action__arrow { transform: translateX(3px); color: var(--c-ink); }

/* very narrow body column (e.g. 320px phones): tighter key column */
@container body (max-width: 330px) {
  .action { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: var(--s-8); }
}

/* ------------------------------------------------------------------ tools */
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  inline-size: 100%; /* body is align-items:flex-start; stretch so phone chips share the full row */
  margin-block-start: var(--s-24);
}

.tool {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--tap);
  padding-inline: var(--s-16);
  border: var(--hairline-soft);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--c-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--t-fast) var(--ease-out);
}
.tool[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tool:hover {
    background: rgba(233, 241, 247, .04);
    background: color-mix(in srgb, var(--c-ink) 4%, transparent);
    border-color: var(--c-line);
  }
}
.tool:active { transform: scale(.98); }
.tool:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

/* phones: let the tool chips share the row evenly */
@media (max-width: 759.98px) {
  .tool { flex: 1 1 auto; }
}

/* ---------------------------------------- section labels "[ 02 ] Fokus" */
.spec__h .label,
.band__h .label {
  margin-inline-end: var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-label);
  vertical-align: .3em;
  color: var(--c-ink-2);
}

/* ------------------------------------------------------------------- spec */
.spec {
  margin-block-start: clamp(var(--s-48), 7vw, var(--s-96));
  padding-inline: clamp(0px, 2vw, var(--s-16));
}

.spec__h {
  margin: 0 0 var(--s-24);
  font-size: clamp(var(--fs-20), 1rem + 1vw, var(--fs-28));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.spec__grid {
  margin: 0;
  border-block-start: var(--hairline);
}

.spec__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-4);
  padding-block: var(--s-16);
  border-block-end: var(--hairline-soft);
}
/* engineering tick marks: a 1px x 6px scale tick at both ends of every separator */
.spec__row::before,
.spec__row::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inline-size: 1px;
  block-size: 6px;
  background: var(--c-ink-3);
  pointer-events: none;
}
.spec__row::before { inset-inline-start: 0; }
.spec__row::after { inset-inline-end: 0; }

.spec__row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-snug);
  color: var(--c-ink-2);
}
.spec__row dd {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-ink);
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .spec__row {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: var(--s-24);
    align-items: baseline;
    padding-block: var(--s-24);
  }
}

/* ------------------------------------------------------------------- band */
.band {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-24);
  margin-block-start: clamp(var(--s-48), 6vw, var(--s-64));
  padding: clamp(var(--s-24), 4vw, var(--s-48));
  border: var(--hairline);
  border-radius: var(--r-panel);
  background: var(--c-surface);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .band {
    background: rgba(19, 38, 54, .55);
    background: color-mix(in srgb, var(--c-surface) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.band__text { min-inline-size: 0; }
.band__h {
  margin: 0;
  font-size: clamp(var(--fs-20), 1rem + 1vw, var(--fs-28));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
}
.band__text p {
  margin: var(--s-8) 0 0;
  max-inline-size: 52ch;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

@media (min-width: 760px) {
  .band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-48);
  }
  .band .pill { flex: none; }
}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pill,
  .pill__icon,
  .action__arrow,
  .tool { transition: none; }
  .pill:hover,
  .pill:hover .pill__icon,
  .pill:active,
  .tool:active { transform: none; }
}

/* ---------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .pill, .tool, .panel, .band { border: 1px solid CanvasText; }
  .eyebrow__sq, .spec__row::before, .spec__row::after { background: CanvasText; }
}

/* [orchestrator merge] L11 single-column panel variant */
@media (min-width: 760px) {
  .panel--solo { grid-template-columns: minmax(0, 1fr); max-inline-size: 720px; }
}