/* 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-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 band
   band--cream to the stage. Since kit v7.7.0 the band follows the dark
   theme. 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 (shared/_diagram_kinds): one column on a phone, two above.
   The compact gallery of the Diagram page is a small reminder: two, then four in a row. */
.iesdesk-diagram-kinds {
  display: grid;
  gap: var(--space-lg);
}
.iesdesk-diagram-kinds--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 480px) {
  .iesdesk-diagram-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iesdesk-diagram-kinds--compact { grid-template-columns: repeat(4, 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-diagram-kinds svg {
  aspect-ratio: 4 / 3;
}
/* The three sample sheets between the sheet type label and its select (spec
   2026-10-04 sheet-type-choice, section 2). Three columns at every width: on
   a phone the pictures get smaller. A sheet is white paper in both themes, so
   the rule keeps its edge visible on the dark page. */
.iesdesk-sheet-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin: var(--space-xs) 0;
  padding: 0;
  list-style: none;
}
/* On a phone a long type name takes two lines. The middle row takes the
   free space, so the three "Sample PDF" lines stay level. */
.iesdesk-sheet-samples > li {
  display: grid;
}
.iesdesk-sheet-samples__link {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-2xs);
}
.iesdesk-sheet-samples__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--rule);
}
/* 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;
  }
  /* The page column takes the two columns of the editor, and the editor box
     steps aside (display: contents), so the preview starts beside the trail
     and the title and the whole diagram is in view from the top of the
     page. The other blocks take the first column. Six rows hold the trail,
     the opening, the two notices, the form and the feedback card; with no
     row gap an empty row takes no space. The Stimulus events of the editor
     still bubble through its element. */
  .iesdesk-page-column:has(> .iesdesk-theme-editor) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    grid-template-rows: repeat(6, auto);
    column-gap: var(--space-xl);
    align-items: start;
  }
  .iesdesk-page-column:has(> .iesdesk-theme-editor) > * { grid-column: 1; }
  .iesdesk-page-column > .iesdesk-theme-editor { display: contents; }
  .iesdesk-page-column > .iesdesk-theme-editor > .iesdesk-theme-editor__form { grid-column: 1; }
  /* The editor box has no margin of its own now, so the form keeps the
     break under a notice. */
  .iesdesk-page-column > :not(nav, .iesdesk-page-head) + .iesdesk-theme-editor > .iesdesk-theme-editor__form {
    margin-block-start: var(--space-2xl);
  }
  .iesdesk-page-column > .iesdesk-theme-editor > .iesdesk-theme-editor__preview {
    grid-column: 2;
    grid-row: 1 / -1;
  }
  .iesdesk-theme-editor__preview {
    position: sticky;
    top: calc(var(--site-header-height) + 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 page scrolls under the sticky top menu, so the column
   takes the height of the window less the menu and one break above and below
   it. The diagram shrinks to fit the rest, so the whole diagram stays in view
   on a laptop screen. */
@media (min-width: 860px) {
  .iesdesk-theme-editor__preview {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--site-header-height) - 2 * 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;
}
/* The cell holds the hidden "(reference room)" text. As its containing
   block, the cell keeps that text inside the table-scroll box, so the text
   cannot widen the page on a phone. */
.iesdesk-ugr__reference {
  position: relative;
  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;
}

/* The top menu drawer below 1024px (MEMORY 2026-10-03 one-top-bar, spec 2.4).
   Your files comes first, and the account list keeps one theme switch: the
   drawer already shows the switch of the bar as a line with its word, so the
   copy in the account list hides. Wide screens keep the order of the markup. */
@media (max-width: 1023px) {
  .iesdesk-menu-files { order: -1; }
  .iesdesk-account-theme { display: none; }
}

/* The opening of a product page (shared/page_head): the title and the deck on
   the left, the page actions on the right, wrapping on a narrow column. The
   title pairs a kit heading class with a margin reset, as pq-card__title does;
   the deck keeps the kit title break above it. */
.iesdesk-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  margin-block-end: var(--space-2xl);
}
.iesdesk-page-head__lead { min-width: 0; }
/* A file name without spaces breaks rather than pushing the actions off-screen. */
.iesdesk-page-head__title { margin: 0; overflow-wrap: anywhere; }
.iesdesk-page-head__description { margin: var(--space-after-title) 0 0; }
/* The compact opening sits in the flex column of the editing grid, whose gap
   already gives the small break under it. */
.iesdesk-page-head--compact { align-items: center; margin-block-end: 0; }
/* The compact opening of the editing grid puts the trail and the title in one
   row, so the grid keeps the height of the trail row and of the 24px break
   under it. In one row the trail needs no break. */
.iesdesk-page-head--compact > .iesdesk-page-head__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-md);
}
.iesdesk-page-head__trail > nav { margin-block-end: 0; }

/* The column of a product page in the frame or on the reading line. Its
   blocks stand exactly 32px apart, as in the old product scroller. The trail
   and the page opening keep their own kit breaks, so the rule starts after
   the first block of the page content. A flex column never collapses
   margins, so a block keeps no bottom margin: a kit bottom margin (a
   fieldset, a paragraph) would add to the 32px break. The last block also
   keeps no bottom margin, so the column keeps the 64px break of the old
   scroller above the footer. The full page width (.iesdesk-full) never takes
   this class. */
.iesdesk-page-column {
  display: flex;
  flex-direction: column;
  padding-block-end: var(--space-5xl);
}
.iesdesk-page-column > :not(nav, .iesdesk-page-head) {
  margin-block-end: 0;
}
.iesdesk-page-column > :not(nav, .iesdesk-page-head) + * {
  margin-block-start: var(--space-2xl);
}