/* 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 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);
}

.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__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 product shell. The shell scroller sets the outer padding.
   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. */
.iesdesk-learn {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
/* 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;
}
/* 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. 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);
}
.iesdesk-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.iesdesk-about__text > p {
  margin: 0;
}