/* IESDesk composition. Uses kit variables. Does not restyle kit classes. */

/* Kit classes set display. The hidden attribute must still win. */
[hidden] {
  display: none !important;
}

/* The "shared/lockup" partial's own classes. Every layout loads this file. */
.agustos-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--lockup-color, var(--brand));
  text-decoration: none;
}
a.agustos-lockup:hover,
a.agustos-lockup:focus,
a.agustos-lockup:active { text-decoration: none; }
a.agustos-lockup:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.agustos-lockup__symbol {
  width: 0.98em;
  height: 0.98em;
  color: inherit;
  transform: translateY(0.08em);
}
.agustos-lockup__name {
  color: inherit;
  font-family: var(--display);
  font-size: var(--agustos-lockup-size, 24px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
}
/* The lockup and the "Beta" label side by side: the "shared/brand" partial. */
.iesdesk-brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-xs);
}

.iesdesk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
/* A prose card spaces its lines with the card gap alone. */
.iesdesk-card--prose > p { margin: 0; }
.iesdesk-card--prose > .pq-card__title { margin: 0; }
/* Upload limits use the kit hint color so they stay readable. */
.iesdesk-upload-hint {
  color: var(--ink-soft);
}
/* Retention and valid-file notes sit after the form. They are not live. */
.iesdesk-task-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.iesdesk-task-notes > p { margin: 0; }
/* The kit ships no legend class (checked vendor/agustos-ui/UI-KIT.md and
   agustos.css: neither defines one). A legend is a section caption inside a
   fieldset, so it pairs a heading class with a margin-reset compose, the
   same convention as pq-card__title. Shared by the diagram theme editor and
   the diagram job form: one class, not one copy for each feature. */
.iesdesk-legend {
  padding: 0;
  margin: 0 0 var(--space-md);
}
.iesdesk-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.iesdesk-split {
  display: grid;
  gap: var(--space-2xl);
}
@media (min-width: 860px) {
  .iesdesk-split { grid-template-columns: 1.05fr 0.95fr; }
}

.iesdesk-dropzone {
  margin-top: var(--space-xs);
  padding: var(--space-xl);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-align: center;
}
.iesdesk-dropzone--active {
  border-color: var(--ink);
  background: var(--surface);
}
.iesdesk-file {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  color: var(--ink-soft);
  font-size: var(--size-footnote);
}
.iesdesk-file-summary {
  margin-top: var(--space-sm);
  font-weight: 600;
}
/* The upload script shows the folder button under the file picker, on the same edge. */
.iesdesk-folder-picker {
  margin-top: var(--space-sm);
  text-align: start;
}
/* Above the file cap the upload button starts nothing (MEMORY 2026-09-29 folder-upload). */
.iesdesk-upload-blocked {
  opacity: 0.5;
  cursor: not-allowed;
}
.iesdesk-upload-warning {
  margin-top: var(--space-sm);
}
/* The upload progress panel sits between the file list and the submit button. */
.iesdesk-upload-progress {
  margin-block: var(--space-lg);
}
.iesdesk-file-list {
  max-height: 14rem;
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  overflow: auto;
  border: 1px solid var(--rule);
}

.iesdesk-meta-list {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.iesdesk-meta-list__head {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
/* The metadata panel head: title and one line of text side by side. */
.iesdesk-meta-list__head--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-xs);
}
.iesdesk-meta-list__head--inline p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--size-footnote);
}

/* View pages: one line for each field (name, value, help). Below 640px the
   help moves under the name and the value. */
.iesdesk-meta-table { margin: 0; }
.iesdesk-meta-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  align-items: baseline;
  padding: var(--space-2xs) var(--space-md);
  border-bottom: 1px solid var(--rule);
  font-size: var(--size-body-compact);
}
.iesdesk-meta-table__row:last-child { border-bottom: 0; }
.iesdesk-meta-table__row dt { font-weight: 400; }
.iesdesk-meta-table__row dd { color: var(--ink); }
.iesdesk-meta-table__row .iesdesk-meta-table__help {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--size-footnote);
}
@media (min-width: 640px) {
  .iesdesk-meta-table__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
  .iesdesk-meta-table__row .iesdesk-meta-table__help { grid-column: auto; }
}
.iesdesk-meta-table__empty {
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--size-footnote);
}

.iesdesk-quiet {
  color: var(--ink-faint);
  font-size: var(--size-footnote);
}
.iesdesk-danger-action {
  color: var(--state-danger);
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  margin-inline-start: var(--space-sm);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  cursor: pointer;
}
.iesdesk-danger-action:hover { color: var(--state-danger); text-decoration-thickness: 2px; }

/* For a long unbroken string inside a notice (the local-development
   verification link). Lets it wrap instead of forcing horizontal scroll. */
.iesdesk-breakable {
  overflow-wrap: anywhere;
}
.iesdesk-danger-action:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.iesdesk-viewer {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 1100px) {
  .iesdesk-viewer { grid-template-columns: minmax(0, 1fr) 22rem; }
}
/* The bar sits on paper, so the kit heading and buttons keep their own
   colors in both themes. Only the viewport is dark. */
.iesdesk-viewer__stage {
  min-height: 24rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.iesdesk-viewer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--rule);
}
.iesdesk-viewer__viewport {
  position: relative;
  width: 100%;
  min-height: 26rem;
  height: min(68vh, 620px);
  background: var(--ink);
  touch-action: none;
}
.iesdesk-viewer__legend,
.iesdesk-viewer__note {
  position: absolute;
  z-index: 10;
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  color: var(--paper);
  font-size: var(--size-footnote);
  pointer-events: none;
}
.iesdesk-viewer__legend { left: var(--space-md); bottom: var(--space-md); width: 13rem; }
.iesdesk-viewer__note { right: var(--space-md); top: var(--space-md); }
.iesdesk-viewer__scale {
  height: 8px;
  margin-top: var(--space-xs);
  background: var(--surface);
}

.iesdesk-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs) var(--space-md);
  font-size: var(--size-body-compact);
}
.iesdesk-dl dt { color: var(--ink-faint); }
.iesdesk-dl dd { margin: 0; font-weight: 600; text-align: right; }

.iesdesk-grid textarea,
.iesdesk-dialog textarea,
.iesdesk-dialog input[type="text"],
.iesdesk-dialog select {
  width: 100%;
  min-height: var(--control-min);
  padding: 0.5em 0.75em;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.iesdesk-dialog textarea { min-height: 8rem; font-family: var(--mono); }
.iesdesk-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.iesdesk-disclosure > summary {
  cursor: pointer;
  font-weight: 600;
}

.iesdesk-site {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
}
.iesdesk-site__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}
.iesdesk-site__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}
/* A top bar link keeps the 44px target of the kit. Its text sits in the
   middle of the target, level with the text of the button next to it. The
   kit keeps 2px of space and a 2px line under the text for the underline.
   The same space and a clear line above the text keep the text centred. */
.iesdesk-site__nav > .agustos-chrome-link {
  display: inline-flex;
  align-items: center;
  padding-top: 2px;
  border-top: 2px solid transparent;
}
/* On a phone the marketing top bar keeps one row down to 360px: the lockup
   name uses the 16px size of the compact bar, the gaps are smaller, and
   Learn moves to the footer. The lockup link sets --agustos-lockup-size
   inline, so the rule sets the variable on the name, which reads it. The
   hide rule sits below the chrome-link rule above, which it must win. */
@media (max-width: 639px) {
  .iesdesk-site__header,
  .iesdesk-site__nav {
    gap: var(--space-sm);
  }
  .iesdesk-site__header .agustos-lockup__name {
    --agustos-lockup-size: 16px;
  }
  .iesdesk-site__nav > .iesdesk-site__nav-wide {
    display: none;
  }
}
.iesdesk-site__main {
  flex: 1 1 auto;
}
.iesdesk-site__notice {
  padding-block: var(--space-lg) 0;
}
.iesdesk-hero {
  padding-bottom: var(--space-3xl);
}
.iesdesk-section-title {
  margin: 0;
}
.iesdesk-subscribe {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 36rem;
  margin-top: var(--space-xl);
}
.iesdesk-subscribe__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
}
.iesdesk-subscribe__field {
  flex: 1 1 16rem;
  margin-bottom: 0;
}
/* The news form of the home page spaces its lines with the form gap alone. */
.iesdesk-subscribe > p {
  margin: 0;
}
/* The note under the line of the home page. The deck above has no margin. */
.iesdesk-home__note {
  margin: var(--space-lg) 0 0;
}
/* The opening of the home page: the text, then the diagram. Two columns from
   860px, the width where this file splits the entry pages. */
.iesdesk-home__split {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 860px) {
  .iesdesk-home__split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-4xl);
  }
}
.iesdesk-home__figure {
  margin: 0;
}
.iesdesk-home__figure svg {
  display: block;
  width: 100%;
  height: auto;
}
/* The two cards of "Free, with or without an account". The card gap spaces
   the lines. The button of the Free account card sits at the card end. */
.iesdesk-home__plan {
  gap: var(--space-md);
}
.iesdesk-home__plan > .pq-card__title,
.iesdesk-home__plan > p,
.iesdesk-home__plan > ul {
  margin: 0;
}
.iesdesk-home__lead {
  color: var(--ink-soft);
}
/* A tool link in a list keeps the 44px target and the text baseline. */
.iesdesk-home__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
}
.iesdesk-home__plan-action {
  align-self: flex-start;
  margin-top: auto;
}

/* The bot trap of the news form: off the screen, not display: none, which
   some bots skip. */
.launch-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.iesdesk-site__footer {
  background: var(--footer-paper);
  color: var(--footer-ink);
  padding-block: var(--space-xl);
}
.iesdesk-site__footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.iesdesk-site__footer-inner > p {
  margin: 0;
}
.iesdesk-site__footer-note {
  color: var(--footer-ink);
}

/* Learn pages. Long-form content in the product shell. The shell scroller sets the outer padding. */
.iesdesk-learn {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
/* The topic menu: one row for each group, the group name in a fixed column,
   inside a hairline panel. On a phone the panel folds into one line. */
.iesdesk-learn__fold {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.iesdesk-learn__fold-toggle {
  line-height: var(--control-min);
  padding-inline: var(--space-md);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
}
.iesdesk-learn__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-xl);
  padding: 0 var(--space-md) var(--space-sm);
}
.iesdesk-learn__group-label {
  margin: var(--space-sm) 0 0;
}
.iesdesk-learn__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.iesdesk-learn__group li {
  display: flex;
}
@media (min-width: 640px) {
  .iesdesk-learn__groups {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    padding: var(--space-2xs) var(--space-lg);
  }
  .iesdesk-learn__group-label {
    margin: 0;
  }
}
/* A browser that cannot style the fold keeps it closed on every width. */
@supports selector(::details-content) {
  @media (min-width: 640px) {
    .iesdesk-learn__fold-toggle { display: none; }
    .iesdesk-learn__fold::details-content { content-visibility: visible; }
  }
}
.iesdesk-learn__anatomy {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 860px) {
  .iesdesk-learn__anatomy { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.iesdesk-learn__anatomy pre {
  margin: 0;
}
.iesdesk-learn__notes {
  margin: 0;
}
.iesdesk-learn__figure {
  margin: 0;
}
.iesdesk-learn__figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.iesdesk-learn__figure--single {
  max-width: 560px;
}
/* One diagram in the four gallery themes: one, two, then four columns. */
.iesdesk-learn__themes {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 480px) {
  .iesdesk-learn__themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .iesdesk-learn__themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A wide table scrolls inside its own box on a narrow screen. The page does not. */
.iesdesk-learn__table-scroll {
  overflow-x: auto;
}
/* Two variants of one diagram, side by side. */
.iesdesk-learn__pair {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 480px) {
  .iesdesk-learn__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
}
.iesdesk-learn__term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}
.iesdesk-learn__term code {
  font-family: var(--mono);
}
.iesdesk-learn dd + dt {
  margin-top: var(--space-lg);
}
/* The value line under a Learn field: kind, example, and tag. */
.iesdesk-learn__value {
  display: block;
  margin-top: var(--space-xs);
  color: var(--ink-soft);
}
.iesdesk-learn__steps {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 860px) {
  .iesdesk-learn__steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
/* The contents list of a long Learn page: columns on a wide screen. */
.iesdesk-learn__contents {
  columns: 1;
}
@media (min-width: 860px) {
  .iesdesk-learn__contents { columns: 3; }
}
/* The luminaire cards on the dimensions page: one column at every width, so
   the drawings keep a readable label size. */
.iesdesk-learn__cards {
  display: grid;
  gap: var(--space-lg);
}
/* The views of one luminaire: side by side when the card is wide, stacked on
   a phone. Each drawing stops at 340px, so its labels do not grow large. */
.iesdesk-learn__views {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: var(--space-lg);
}
.iesdesk-learn__views svg {
  max-width: 340px;
}
/* A number in a card table stays on one line. The table scrolls instead. */
.iesdesk-learn__number {
  white-space: nowrap;
}
/* A small shape drawing in a table cell. */
.iesdesk-learn__shape-icon {
  display: block;
  width: 40px;
  height: 40px;
}

/* Diagrams panel on the IES and LDT view pages: four figures, two to a row.
   The panel reuses .iesdesk-meta-list for its card and head. */
.iesdesk-diagrams__grid {
  display: grid;
  padding: var(--space-md);
  gap: var(--space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The redraw form: label, number, unit, button on one line; the error below. */
.iesdesk-diagrams__redraw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.iesdesk-diagrams__redraw .agustos-input {
  width: 6rem;
}

.iesdesk-diagrams__redraw .agustos-select {
  width: auto;
}

.iesdesk-diagrams__redraw .agustos-hint,
.iesdesk-diagrams__redraw .agustos-error {
  flex-basis: 100%;
  margin: 0;
}

.iesdesk-diagrams__figure {
  margin: 0;
}

.iesdesk-diagrams__figure svg {
  width: 100%;
  height: auto;
}

.iesdesk-diagrams__reason {
  color: var(--ink-soft);
}

@media (max-width: 48rem) {
  .iesdesk-diagrams__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Diagram preview page (Decision 56, Plan 1). */
.iesdesk-preview {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
}

.iesdesk-preview__form {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

/* The "Customise this theme" link (Decision 56, Plan 2), spaced below the
   theme select. */
.iesdesk-preview__customise {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-size: var(--size-footnote);
}

.iesdesk-preview__result svg {
  width: 100%;
  height: auto;
  max-width: 48rem;
}

.iesdesk-preview__message {
  color: var(--ink-soft);
}

.iesdesk-preview__note {
  margin-top: var(--space-2xs);
  font-size: var(--size-footnote);
  color: var(--ink-soft);
}

@media (max-width: 48rem) {
  .iesdesk-preview {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Diagram theme editor (Decision 56, Plan 2). Two columns: the form, and a
   sticky column Task 8 fills with the live preview. */
.iesdesk-theme-editor {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 860px) {
  .iesdesk-theme-editor {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
  }
  .iesdesk-theme-editor__preview {
    position: sticky;
    top: var(--space-xl);
  }
}
/* A responsive row grid, shared by the theme editor's field rows and the
   diagram job form's two checkbox fieldsets (Decision 56, Plans 2 and 3). */
.iesdesk-form-row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
/* The live preview's error list (Task 8): one sentence per line, the kit's
   own error type style, no bullet. */
.iesdesk-theme-editor__preview-errors {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Theme editor explanations (MEMORY 2026-09-29 theme-editor-live-preview).
   The number before a field label matches a marker in the key drawing. */
.iesdesk-key-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-inline-end: var(--space-2xs);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--size-footnote);
  vertical-align: middle;
}
.iesdesk-theme-group__title {
  margin: var(--space-md) 0 var(--space-xs);
}
/* The diagram tabs of the theme editor (spec 2026-09-29
   theme-editor-per-diagram). Radio inputs in the kit tab look: the checked
   tab takes the same tokens as .agustos-tab[aria-selected="true"]. */
.iesdesk-theme-tabs {
  min-width: 0;
  margin: 0 0 var(--space-xl);
  padding: 0;
  border: 0;
}
.iesdesk-theme-tab {
  cursor: pointer;
}
input:checked + .iesdesk-theme-tab {
  border-bottom-color: var(--signal);
  color: var(--ink);
}
input:focus-visible + .iesdesk-theme-tab {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
/* Hidden on screen, read by a screen reader, reachable by the keyboard. */
.iesdesk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* One diagram at a time. Each rule only hides, so a browser without :has()
   shows every field and every hint sentence, with its kind label. */
.iesdesk-theme-editor:has(input[name="preview_kind"][value="polar"]:checked) [data-kinds]:not([data-kinds~="polar"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cartesian"]:checked) [data-kinds]:not([data-kinds~="cartesian"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cone"]:checked) [data-kinds]:not([data-kinds~="cone"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="isolux"]:checked) [data-kinds]:not([data-kinds~="isolux"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="polar"]:checked) .iesdesk-theme-hint__kind:not([data-kind="polar"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cartesian"]:checked) .iesdesk-theme-hint__kind:not([data-kind="cartesian"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cone"]:checked) .iesdesk-theme-hint__kind:not([data-kind="cone"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="isolux"]:checked) .iesdesk-theme-hint__kind:not([data-kind="isolux"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="polar"]:checked) .iesdesk-theme-also__kind[data-kind="polar"],
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cartesian"]:checked) .iesdesk-theme-also__kind[data-kind="cartesian"],
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cone"]:checked) .iesdesk-theme-also__kind[data-kind="cone"],
.iesdesk-theme-editor:has(input[name="preview_kind"][value="isolux"]:checked) .iesdesk-theme-also__kind[data-kind="isolux"],
.iesdesk-theme-editor:has(input[name="preview_kind"]:checked) .iesdesk-theme-hint__label {
  display: none;
}
.iesdesk-theme-also {
  display: block;
  margin-top: var(--space-2xs);
}
.iesdesk-theme-also__kind {
  margin-inline-start: var(--space-2xs);
}
.iesdesk-theme-errors {
  margin: 0 0 var(--space-md);
  padding-inline-start: var(--space-md);
}
/* Theme editor key drawings. Kit tokens only: the key shows where a part
   sits; the preview below it shows the theme colours. No brand red. */
.iesdesk-theme-key {
  margin: 0 0 var(--space-md);
}
/* The key and the preview controls share one row: the key on the left, the
   controls stacked on the right, so the diagram below keeps more height
   (MEMORY 2026-09-29 theme-key-beside-select). A narrow phone stacks them. */
.iesdesk-theme-editor__head {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  grid-template-areas: "key controls";
  gap: var(--space-md);
  align-items: start;
  margin: 0 0 var(--space-md);
}
.iesdesk-theme-editor__head .iesdesk-theme-key {
  grid-area: key;
  margin: 0;
}
.iesdesk-theme-editor__controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.iesdesk-theme-editor__controls .agustos-field {
  margin-bottom: 0;
}
@media (max-width: 30rem) {
  .iesdesk-theme-editor__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "controls" "key";
  }
}
.iesdesk-theme-key__kind {
  margin: 0;
}
.iesdesk-theme-key__kind svg {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: auto;
}
.iesdesk-theme-key__paper { fill: var(--paper); stroke: var(--rule); }
.iesdesk-theme-key__grid { fill: none; stroke: var(--ink-faint); stroke-width: 0.75; }
.iesdesk-theme-key__leader { stroke-dasharray: 2 3; }
.iesdesk-theme-key__axis { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; }
.iesdesk-theme-key__centre { stroke-dasharray: 6 4; }
.iesdesk-theme-key__curve-1 { fill: var(--ink); fill-opacity: 0.12; stroke: var(--ink); stroke-width: 2; }
.iesdesk-theme-key__line-1 { fill: none; stroke: var(--ink); stroke-width: 2; }
.iesdesk-theme-key__curve-2 { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 5 4; }
.iesdesk-theme-key__text { fill: var(--ink-soft); font-size: 12px; }
.iesdesk-theme-key__label { fill: var(--ink-soft); font-size: 10px; }
.iesdesk-theme-key__label--end { text-anchor: end; }
.iesdesk-theme-key__label--middle { text-anchor: middle; }
.iesdesk-theme-key__pointer { stroke: var(--ink); stroke-width: 1; }
.iesdesk-theme-key__marker circle { fill: var(--ink); }
.iesdesk-theme-key__marker text {
  fill: var(--paper);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}
/* On a wide screen the sticky preview column holds the controls, the key
   and the diagram. The shell scrolls inside .pq-scroll, so the column takes
   its height from that scroller (a size container on this page only).
   100cqh is the scroller's content height; its top and bottom padding
   (product.css) give the visible height; three sticky offsets leave room
   above and below the column. The diagram shrinks to fit the rest, so the
   whole diagram stays in view on a laptop screen. */
@media (min-width: 860px) {
  .pq-scroll:has(.iesdesk-theme-editor) {
    container-type: size;
  }
  .iesdesk-theme-editor__preview {
    display: flex;
    flex-direction: column;
    height: calc(100cqh + var(--space-2xl) + var(--space-5xl) - 3 * var(--space-xl));
  }
  .iesdesk-theme-editor__preview > * {
    flex-shrink: 0;
  }
  .iesdesk-theme-editor__preview > turbo-frame {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  .iesdesk-theme-editor__preview .iesdesk-preview__result {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }
  .iesdesk-theme-editor__preview .iesdesk-preview__result svg {
    flex: 0 1 auto;
    min-height: 0;
  }
}
/* Hide, never show: a browser without :has() ignores these rules and keeps
   all four keys visible. */
.iesdesk-theme-editor:has(input[name="preview_kind"][value="polar"]:checked) .iesdesk-theme-key__kind:not([data-kind="polar"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cartesian"]:checked) .iesdesk-theme-key__kind:not([data-kind="cartesian"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="cone"]:checked) .iesdesk-theme-key__kind:not([data-kind="cone"]),
.iesdesk-theme-editor:has(input[name="preview_kind"][value="isolux"]:checked) .iesdesk-theme-key__kind:not([data-kind="isolux"]) {
  display: none;
}

/* Diagram theme list (Decision 56, Plan 2). */
.iesdesk-theme-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.iesdesk-theme-list__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.iesdesk-theme-list__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.iesdesk-theme-list__thumb svg {
  display: block;
  width: 100%;
  height: auto;
}

/* BUG Rating single-file page (Decision 60, Task 6). The rating pairs a
   hero-scale heading class with a margin-reset compose, the same
   convention as pq-card__title. */
.iesdesk-bug-rating__rating {
  margin: 0;
}
/* The ten-zone table scrolls inside its own box on a narrow screen, the
   same idea as iesdesk-learn__table-scroll. */
.iesdesk-bug-rating__table-scroll {
  overflow-x: auto;
}
/* ULOR single-file page. The main value pairs a hero-scale heading class
   with a margin reset, the same convention as iesdesk-bug-rating__rating. */
.iesdesk-ulor__value {
  margin: 0;
}
/* The results table of a ULOR job scrolls inside its own box on a narrow
   screen. */
.iesdesk-ulor__table-scroll {
  overflow-x: auto;
}
/* The Contact page: the address block reads as body text, not italic. */
.iesdesk-contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
/* The About page: the author photo sits beside the opening line, and the
   text keeps a reading width. */
.iesdesk-about__intro {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.iesdesk-about__intro .type-hero-deck {
  margin: 0;
}
.iesdesk-about__photo {
  flex-shrink: 0;
  width: 7.5rem;
  height: auto;
  border-radius: var(--radius-lg);
}
.iesdesk-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 65ch;
}
.iesdesk-about__text > p {
  margin: 0;
}

/* The privacy notice and the beta terms (soft launch Part 2): the text of
   each section keeps a reading measure on the left edge of the page frame. */
.iesdesk-legal-text {
  max-width: var(--measure-body);
}