/* Powell Classes theme (powell-theme.css supplies the tokens and IBM Plex).
   The badge, its lanyard and the avatar blob keep their shape: they draw a
   physical conference badge. The interface around them is squared. */

:root {
  --bg: var(--color-background);
  --fg: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border-strong);
  --link: var(--color-primary);
  --link-fg: var(--color-text-on-primary);
  --badge-bg: #ffffff;
  --badge-fg: var(--gray-950);
  --badge-muted: var(--gray-700);
  --marker: var(--gold-300);
  --code-bg: var(--color-surface-raised);
  --code-fg: var(--color-text);
  --bar-net: light-dark(var(--navy-800), var(--navy-300));
  --bar-dl: light-dark(var(--navy-300), var(--navy-500));
  --bar-cpu: var(--gold-500);

  --serif: var(--font-sans);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  --gutter: clamp(1rem, 4vw, 3rem);
  color-scheme: light dark;
}

/* Everything else applies inside the page's <main> only, so the tool's
   element rules (h1, a, button, pre, footer) never touch the site chrome. */
@scope (main) {
* { box-sizing: border-box; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- visitor controls (under the page header) ---------- */
.controls {
  margin-block-end: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem 1.5rem;
}
.mix { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mix legend { font-size: .875rem; color: var(--muted); margin-block-end: .4rem; padding: 0; }
.mix label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .5rem;
  align-items: baseline;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s, 2px);
  padding: .55rem .85rem;
  cursor: pointer;
  max-inline-size: 17rem;
}
.mix label:has(:checked) { border-color: var(--fg); }
.mix input { accent-color: var(--link); margin: 0; }
.mix small { grid-column: 2; color: var(--muted); font-size: .8125rem; line-height: 1.35; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }
button {
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-s, 2px);
  padding: .8rem 1.3rem;
  min-block-size: 2.75rem;
  cursor: pointer;
  border: 1.5px solid var(--fg);
  background: transparent;
  color: var(--fg);
}
button.primary { background: var(--link); border-color: var(--link); color: var(--link-fg); font-size: 1.125rem; }
button:hover { filter: brightness(1.08); }

/* ---------- visitor ---------- */
.visitor {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: 1.5rem 3rem;
}
.visitor:focus { outline: none; }
.lanyard { position: relative; padding-block-start: 2.75rem; }
.lanyard::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 1.1rem;
  block-size: 3.6rem;
  background: var(--link);
  border-radius: 0 0 .25rem .25rem;
}
.badge {
  position: relative;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: 1.25rem;
  padding: 2.4rem 1.5rem 1.25rem;
  rotate: -1.5deg;
  transform-origin: 50% -2.75rem;
  box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 22px 40px -22px rgb(18 26 44 / .55);
}
.badge::before {
  content: "";
  position: absolute;
  inset-block-start: .95rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 3.4rem;
  block-size: .7rem;
  border-radius: 1rem;
  background: var(--bg);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .3);
}
.avatar {
  background: var(--marker);
  border-radius: 52% 48% 46% 54% / 55% 47% 53% 45%;
  aspect-ratio: 1;
  overflow: hidden;
  margin-block-end: 1.1rem;
}
.avatar svg { display: block; inline-size: 100%; block-size: 100%; }
.badge-name { font: 600 1.85rem/1.1 var(--serif); margin: 0; }
.badge-native { font-size: 1.3rem; line-height: 1.6; margin: .15rem 0 0; }
.badge-where { margin: .4rem 0 .9rem; color: var(--badge-muted); }
.tags { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tags li {
  font-size: .8125rem;
  line-height: 1.3;
  border: 1.5px solid var(--badge-fg);
  border-radius: var(--radius-s, 2px);
  padding: .2rem .5rem;
}
.badge-foot {
  display: flex; justify-content: space-between; gap: 1rem;
  border-block-start: 1.5px dashed #c5cdd9;
  padding-block-start: .75rem;
  font-size: .8125rem;
  color: var(--badge-muted);
}

.story { font: 1.3rem/1.5 var(--serif); max-inline-size: 36em; margin: 0 0 1.75rem; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.1rem 2rem;
  margin: 0;
}
.facts div { border-block-start: 1.5px solid var(--line); padding-block-start: .55rem; }
.facts dt { font-size: .8125rem; color: var(--muted); }
.facts dd { margin: .1rem 0 0; }

/* ---------- needs ---------- */
.needs-head {
  border-block-start: 3px solid var(--fg);
  padding-block-start: 1.5rem;
  display: grid;
  gap: 1rem;
}
h2 { font: 600 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--serif); margin: 0; }
.needs-intro { margin: 0; max-inline-size: 42em; color: var(--muted); }
.ladder-nav ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.ladder-nav a {
  display: inline-flex; gap: .45rem; align-items: baseline;
  padding: .35rem .7rem;
  border-radius: var(--radius-s, 2px);
  border: 1.5px solid var(--line);
  text-decoration: none;
  color: var(--fg);
  font-size: .9375rem;
}
.ladder-nav a:hover { border-color: var(--fg); }
.ladder-nav .n { font-weight: 700; color: var(--link); }
.ladder-nav .count { color: var(--muted); font-size: .8125rem; }

.rung {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 1.25rem;
  padding-block: 2.25rem 1rem;
  border-block-end: 1.5px solid var(--line);
  scroll-margin-block-start: 1rem;
}
.rung-num {
  font: 600 3.4rem/0.9 var(--serif);
  color: var(--link);
  text-align: end;
}
.rung h3 { font: 600 1.5rem/1.2 var(--serif); margin: 0; }
.rung-q { margin: .2rem 0 1rem; color: var(--muted); }
.rung-body { min-inline-size: 0; }
.need-list { list-style: none; margin: 0; padding: 0; }
.need {
  padding-block: 1rem;
  border-block-start: 1px solid var(--line);
  max-inline-size: 48rem;
}
.need h4 { font-size: 1.0625rem; margin: 0 0 .2rem; }
.because { margin: 0 0 .35rem; font-size: .9375rem; color: var(--muted); }
.because strong { color: var(--fg); font-weight: 600; }
.need p { margin: 0 0 .4rem; }
.need details { margin-block-start: .25rem; }
.need summary { cursor: pointer; color: var(--link); font-size: .9375rem; inline-size: fit-content; }
pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--radius-s, 2px);
  padding: .85rem 1rem;
  overflow-x: auto;
  font: .875rem/1.5 var(--mono);
  margin: .5rem 0 0;
  tab-size: 2;
}
.none-yet { color: var(--muted); font-style: italic; }

/* estimator */
.estimator {
  border: 1.5px solid var(--fg);
  border-radius: var(--radius-s, 2px);
  padding: 1.1rem 1.25rem 1.25rem;
  margin-block-end: 1rem;
  max-inline-size: 48rem;
}
.estimator h4 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem 1.5rem; }
.sliders label { display: grid; gap: .2rem; font-size: .9375rem; }
.sliders input { inline-size: 100%; accent-color: var(--link); }
.sliders output { font-weight: 600; }
.est-total { font: 600 2rem/1.1 var(--serif); margin: 1rem 0 .5rem; }
.est-bar {
  display: flex; block-size: .9rem; border-radius: var(--radius-s, 2px); overflow: hidden;
  background: var(--line); position: relative;
}
.est-bar span { display: block; block-size: 100%; }
.est-legend { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-size: .875rem; }
.est-legend li::before {
  content: ""; display: inline-block; inline-size: .7rem; block-size: .7rem;
  border-radius: .2rem; margin-inline-end: .35rem; background: var(--c);
}
.est-note { font-size: .875rem; color: var(--muted); margin: .6rem 0 0; }

/* i18n live formats */
.formats { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .75rem 0 0; font-size: .9375rem; }
.formats dt { color: var(--muted); }
.formats dd { margin: 0; font-size: 1.0625rem; }

/* verification */
.checks { list-style: none; margin: 0; padding: 0; max-inline-size: 48rem; }
.checks li { border-block-start: 1px solid var(--line); padding-block: .6rem; }
.checks label { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: baseline; cursor: pointer; }
.checks input { accent-color: var(--link); inline-size: 1.1rem; block-size: 1.1rem; }
.checks label:has(:checked) span { text-decoration: line-through; color: var(--muted); }

footer {
  max-inline-size: 78rem; margin-inline: auto;
  padding: 1.5rem var(--gutter) 3rem;
  font-size: .875rem; color: var(--muted);
}
footer p { max-inline-size: 48em; margin: 0 0 .5rem; }


/* ---------- audience and cohorts ---------- */
.badge-cohort {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .15rem .55rem;
  border-radius: var(--radius-s, 2px);
  background: var(--marker);
  font-size: .875rem;
  font-weight: 600;
}
.audience {
  border-block-start: 3px solid var(--fg);
  padding-block: 1.5rem 2.5rem;
}
.aud-intro { margin: .75rem 0 1.5rem; max-inline-size: 44em; color: var(--muted); }
.aud-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.cohorts { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.cohorts legend, .glance h3 { font: 600 1.25rem/1.2 var(--serif); padding: 0; margin: 0 0 .75rem; }
.cohort {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  padding: .6rem .75rem;
  margin-inline: -.75rem;
  border-radius: var(--radius-s, 2px);
  border-block-start: 1px solid var(--line);
}
.cohort.is-current { background: color-mix(in srgb, var(--marker) 38%, transparent); }
.cohort label { font-weight: 600; }
.cohort .share { font-variant-numeric: tabular-nums; font-weight: 600; text-align: end; }
.cohort p { grid-column: 1 / -1; margin: .1rem 0 .35rem; font-size: .875rem; color: var(--muted); }
.cohort input { grid-column: 1 / -1; inline-size: 100%; accent-color: var(--link); }
.cohort-actions { margin-block-start: .9rem; }
.glance { min-inline-size: 0; display: grid; gap: 1.75rem; }
.glance table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; }
.glance caption { text-align: start; font: 600 1.25rem/1.2 var(--serif); margin-block-end: .6rem; }
.glance th, .glance td { text-align: start; padding: .45rem .5rem .45rem 0; border-block-start: 1px solid var(--line); vertical-align: top; }
.glance thead th { font-weight: 500; font-size: .8125rem; color: var(--muted); border: 0; }
.glance td.num { inline-size: 7.5rem; }
.pct { display: grid; gap: .2rem; font-variant-numeric: tabular-nums; }
.pct-track { block-size: .35rem; border-radius: .2rem; background: var(--line); overflow: hidden; }
.pct-track span { display: block; block-size: 100%; background: var(--link); }
.web .pct-track span { background: var(--muted); }
.ranked { margin: 0; padding-inline-start: 1.4rem; }
.ranked li { padding-block: .3rem; border-block-start: 1px solid var(--line); }
.ranked .share { color: var(--muted); font-variant-numeric: tabular-nums; }
.glance-note { font-size: .875rem; color: var(--muted); margin: 0; }
.designer { margin-block-start: 2rem; border: 1.5px solid var(--fg); border-radius: var(--radius-s, 2px); padding: 1rem 1.25rem; }
.designer summary { cursor: pointer; font: 600 1.2rem/1.3 var(--serif); }
.designer p { max-inline-size: 48em; }
.designer textarea {
  inline-size: 100%;
  min-block-size: 22rem;
  font: .875rem/1.5 var(--mono);
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s, 2px);
  padding: .75rem;
  resize: vertical;
  tab-size: 2;
}
.designer .button-row { margin-block: .75rem; align-items: center; }
.designer output { display: block; font-size: .9375rem; }
.designer output.bad { color: #b3261e; }
@media (prefers-color-scheme: dark) { .designer output.bad { color: #ffb4ab; } }
.ref { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; font-size: .875rem; margin: 1rem 0 0; }
.ref dt { font-weight: 600; }
.ref dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
@media (max-width: 60rem) { .aud-grid { grid-template-columns: 1fr; } }
@media print { .audience .designer, .cohort input { display: none; } }

@media (max-width: 46rem) {
  .visitor { grid-template-columns: 1fr; }
  .lanyard { max-inline-size: 21rem; margin-inline: auto; inline-size: 100%; }
  .rung { grid-template-columns: 1fr; }
  .rung-num { text-align: start; font-size: 2.4rem; margin-block-end: .25rem; }
}
@media (forced-colors: active) {
  .avatar { background: Canvas; border: 1px solid CanvasText; }
  .badge { border: 1px solid CanvasText; }
  .est-bar span { forced-color-adjust: none; }
}
@media print {
  .controls, .ladder-nav, footer { display: none; }
  body { background: #fff; color: #000; }
  .badge { rotate: 0deg; box-shadow: none; border: 1px solid #000; }
  .lanyard::before { display: none; }
  .need details { display: none; }
  .rung { break-inside: avoid; }
}
}