/* What is left of the license download page after the account page absorbed it, so the three
   parts here are drawn on other pages now: the edition tab strip and the demo-access notes on the
   account page (licenses/_account_download_item and website_sessions/show), and the section hero
   on the legal pages (legal/show). The download rows themselves are the c-download component. */

/* A section hero reuses the overview page's intro block (.p-overview__intro) and sits tighter and
   a step smaller than that page's h1, a section heading being below a page title. */
.p-license__section {
  padding-block: clamp(var(--space-lg), 5vw, 3rem) var(--space-xs);
}
.p-license__section .p-overview__title {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  max-width: 20ch;
}

.p-license__notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.p-license__notes li {
  color: var(--text-muted);
  display: flex;
  gap: 1ch;
}
.p-license__notes li::before {
  content: "\2022";           /* • */
  color: var(--accent);
}

/* The strip is c-tabs' shape with a second line per tab for the who-it's-for subtitle, and it is
   driven by the same tabs_controller.js: the controller moves is-current and hides every panel but
   one, so without JavaScript the tabs are inert and all the editions stack, visible. */
.p-license__edition-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  border-bottom: var(--bw) solid var(--line);
}
/* The negative bottom margin pulls the tab over the strip's own rule, so the current tab, which
   draws its sides and no bottom border, reads as joined to the panel under it. */
.p-license__edition-tab {
  appearance: none;
  background: none;
  border: var(--bw) solid transparent;
  border-bottom: none;
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: calc(-1 * var(--bw));
  cursor: pointer;
}
.p-license__edition-tab:hover { color: var(--text); }
.p-license__edition-tab.is-current {
  color: var(--accent);
  border-color: var(--line);
  background: var(--surface-raised);
}
.p-license__edition-tab[hidden] { display: none; }
.p-license__edition-name {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.p-license__edition-tab.is-current .p-license__edition-name::before {
  content: "\25B8\00a0";       /* ▸ + nbsp */
}
.p-license__edition-sub {
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.p-license__edition-panel { padding-block: var(--space-md); }
.p-license__edition-panel[hidden] { display: none; }