/* 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 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);
}
.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);
}
.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 under the marketing layout. */
.iesdesk-learn {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding-bottom: var(--space-4xl);
}
/* 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__switch {
  padding-top: var(--space-lg);
}
.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);
}