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

/* The "shared/lockup" partial's own classes for the product shell. The marketing
   top bar and footer use the kit "site-lockup" instead (UI kit v7). The kit does
   not style "agustos-lockup", so these rules do not override the kit. */
.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);
}

/* View pages: the Summary card (spec 2026-10-03-view-summary-card-design.md).
   The figures and the shape stack below 640px and sit side by side above it. */
.iesdesk-summary__product {
  overflow-wrap: anywhere;
}
.iesdesk-summary__body {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-md);
}
@media (min-width: 640px) {
  .iesdesk-summary__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.iesdesk-summary__figures p { margin: 0; }
.iesdesk-summary__list { margin: 0; }
.iesdesk-summary__list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--rule);
}
.iesdesk-summary__list > div:last-child { border-bottom: 0; }
.iesdesk-summary__list dd { margin: 0; text-align: right; }
.iesdesk-summary__list--small { font-size: var(--size-body-compact); }
.iesdesk-summary__shape-name { margin: var(--space-xs) 0 0; font-weight: 600; }
.iesdesk-summary__subhead { margin-top: var(--space-md); }

/* The drawing of the light-emitting area. Colours come from kit variables,
   so the drawing follows the light and dark themes. */
.iesdesk-sketch {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}
.iesdesk-sketch__face,
.iesdesk-sketch__body,
.iesdesk-sketch__line {
  stroke: var(--ink-soft);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.iesdesk-sketch__face { fill: var(--cream); }
.iesdesk-sketch__body { fill: var(--surface); }
.iesdesk-sketch__line { fill: none; }

.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;
}

/* The 3D view (spec docs/superpowers/specs/2026-10-01-3d-view-design.md).
   --iesdesk-scene is a data colour (DESIGN.md, 3D view): the Real light
   stage and its floor base. In False colour, the script adds the kit light
   island band--cream to the stage, so the stage stays light in the dark
   theme too. The Viridis stops live in light_view/scene.js. */
.iesdesk-light-view { --iesdesk-scene: #12110f; }
.iesdesk-light-view__body { display: grid; gap: var(--space-sm); padding: var(--space-md); }
.iesdesk-light-view__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}
.iesdesk-light-view__group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); }
.iesdesk-light-view__stage {
  position: relative;
  height: 30rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.iesdesk-light-view__stage[data-view="real"] { background: var(--iesdesk-scene); }
.iesdesk-light-view__canvas { position: absolute; inset: 0; }
.iesdesk-light-view__canvas canvas { display: block; width: 100%; height: 100%; }
.iesdesk-light-view__canvas:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.iesdesk-light-view__labels { position: absolute; inset: 0; pointer-events: none; }
.iesdesk-light-view__labels span {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: var(--size-footnote);
  white-space: nowrap;
}
.iesdesk-light-view__panel {
  position: absolute;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--size-footnote);
}
.iesdesk-light-view__panel--meta { top: var(--space-md); right: var(--space-md); text-align: right; font-family: var(--mono); }
.iesdesk-light-view__panel--key,
.iesdesk-light-view__panel--legend { left: var(--space-md); bottom: var(--space-md); max-width: 18rem; }
/* White text on the dark Real light stage is a data colour too (DESIGN.md). */
.iesdesk-light-view__stage[data-view="real"] .iesdesk-light-view__panel {
  background: color-mix(in srgb, var(--iesdesk-scene) 70%, transparent);
  color: color-mix(in srgb, white 85%, transparent);
}
.iesdesk-light-view__stage[data-view="real"] .iesdesk-light-view__labels span { color: color-mix(in srgb, white 50%, transparent); }
.iesdesk-light-view__stage[data-view="false-colour"] .iesdesk-light-view__panel {
  background: color-mix(in srgb, var(--paper-white) 80%, transparent);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.iesdesk-light-view__stage[data-view="false-colour"] .iesdesk-light-view__labels span { color: var(--ink-faint); }
.iesdesk-light-view__legend-title { margin: 0 0 var(--space-2xs); }
.iesdesk-light-view__ramp { height: 8px; border-radius: var(--radius-sm); }
.iesdesk-light-view__ticks {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  margin: var(--space-2xs) 0 0;
  font-family: var(--mono);
}
.iesdesk-light-view__readout {
  position: absolute;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--paper-white);
  font-family: var(--mono);
  font-size: var(--size-footnote);
  white-space: nowrap;
  pointer-events: none;
}

.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__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;
}

/* Learn pages. Long-form content in the kit reading column of the public frame.
   A Learn page is one article, so its chapters are not kit sections: the kit section padding
   is a marketing band space. The gap below is the only break between two chapters.
   The top margin is the same H2 break under the page opening. */
.iesdesk-learn {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
  container: learn / inline-size;
}
/* A chapter is a flex item, so the last margin of its content would add to the gap. */
.iesdesk-learn__chapter > :last-child {
  margin-bottom: 0;
}
.iesdesk-learn__anatomy {
  display: grid;
  gap: var(--space-xl);
}
.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 column, then two in the Learn column. */
.iesdesk-learn__themes {
  display: grid;
  gap: var(--space-lg);
}
@container learn (min-width: 480px) {
  .iesdesk-learn__themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The four diagram kinds on the Features page: one column on a phone, two above. */
.iesdesk-features__gallery {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 480px) {
  .iesdesk-features__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* One frame for the four shapes, so the rows and the captions line up.
   The diagram scales to fit its frame and keeps its own proportions. */
.iesdesk-features__gallery svg {
  aspect-ratio: 4 / 3;
}
/* A wide table scrolls inside its own box on a narrow screen. The page does not. */
.iesdesk-learn__table-scroll {
  overflow-x: auto;
}
/* The comparison table is wider than the reading column. A group name spans
   every column, and the kit puts the last cell of a row on the right, so the
   name starts on the left to stay in view. */
.iesdesk-learn__compare th[scope="rowgroup"] {
  text-align: start;
}
/* Two variants of one diagram, side by side. */
.iesdesk-learn__pair {
  display: grid;
  gap: var(--space-lg);
}
@container learn (min-width: 480px) {
  .iesdesk-learn__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.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);
}
/* The jump list of the ten luminaire cards: three columns once the Learn column has room. */
.iesdesk-learn__contents {
  columns: 1;
}
@container learn (min-width: 600px) {
  .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;
}
/* UGR Table page. The kit table-scroll box scrolls the 11 columns sideways
   on a phone; nowrap keeps each value on one line. The reference room
   (4H x 8H, 70/50/20) has an ink frame and weight 600, so it stands out
   without colour (spec section 3.7). */
.iesdesk-ugr__table {
  white-space: nowrap;
}
.iesdesk-ugr__reference {
  font-weight: 600;
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
/* The kit right-aligns the last cell of a row only. Here every value and
   reflectance header aligns right, and each group header centres over its
   five columns. iesdesk.css loads after the kit, so the group rule wins
   the tie with the kit :last-child rule. The Room column stays left. */
.iesdesk-ugr__table .iesdesk-ugr__value {
  text-align: right;
}
.iesdesk-ugr__table th.iesdesk-ugr__group {
  text-align: center;
}
/* 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. The kit
   reading column (container--reading) sets the text 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);
}
/* The text of About and Features: the gap alone spaces the paragraphs. */
.iesdesk-about__text,
.iesdesk-features__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.iesdesk-about__text > p,
.iesdesk-features__text > p {
  margin: 0;
}