/* 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. Base rules live here, not in
   product.css, because the partial also renders on the marketing layout
   (coming_soon.html.erb), which loads this file but not product.css. */
.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;
}

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

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

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

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

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

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

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

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

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

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

.iesdesk-site {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
}
.iesdesk-site__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}
.iesdesk-site__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}
/* A top bar link keeps the 44px target of the kit. Its text sits in the
   middle of the target, level with the text of the button next to it. The
   kit keeps 2px of space and a 2px line under the text for the underline.
   The same space and a clear line above the text keep the text centred. */
.iesdesk-site__nav > .agustos-chrome-link {
  display: inline-flex;
  align-items: center;
  padding-top: 2px;
  border-top: 2px solid transparent;
}
.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,
.iesdesk-card-title {
  margin: 0;
}
.iesdesk-cta {
  background: var(--cream);
  padding-block: var(--space-4xl);
  border-top: 1px solid var(--rule);
}
.iesdesk-cta .iesdesk-section-title {
  margin-bottom: var(--space-sm);
}
.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;
}

/* Coming-soon page. Matches the retired Astro apex page. */
.launch-frame {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-4xl) var(--space-xl);
}
.launch-content {
  width: 100%;
  max-width: var(--measure-text);
  text-align: center;
}
/* The one place the app shows its name before sign-in: same lowercase
   mark-plus-wordmark as the signed-in shell, not a standalone heading. */
.launch-lockup {
  margin: 0 0 0.5em;
}
.launch-signup {
  margin-top: var(--space-4xl);
}
.launch-label {
  text-align: start;
  margin-bottom: var(--space-xs);
}
.launch-controls {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.launch-controls > input {
  flex: 1 1 20ch;
  min-width: 0;
}
.launch-controls > input[type="submit"],
.launch-controls > button {
  flex: 1 0 auto;
}
.launch-promise {
  margin-top: var(--space-md);
}
/* 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;
}
.launch-form .type-footnote[role="alert"],
.launch-form .type-footnote[role="status"],
.launch-signup > .type-footnote {
  margin-block: var(--space-sm);
}

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

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

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

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

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

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

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

.iesdesk-diagrams__figure {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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