/* Tracium website: the demo request. One box, drawn on the demo page (Demo.dc.html, /demo/); on every other page
   site.js takes the same box from /demo/ and opens it as a dialog. The parts the design system does not have yet
   (fields, choice chips, the dialog) are composed from its roles and the site's web scale: no new colour, no new type
   size, no shadow on layout. The tangerine tick marks a field that needs the visitor, as it marks a page that needs
   a person. Sizes are in px: the dialog sits outside the page's scaled frame.

   The box reads headline, form, steps. Wide, the headline and the steps share a charcoal side on the left (.dm-bg
   behind them) and the form fills the right; narrow, the form comes first and the steps follow on charcoal. The box
   measures the room it is given (container queries on the page and on the dialog), not the window. */

/* ------------------------------------------------------------ the box */
.dm-box { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: auto 1fr; width: 100%; max-width: 1080px; overflow: hidden; border-radius: var(--tr-radius-md); background: var(--tr-color-ground); color: var(--tr-color-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left; }
.dm-box *, .dm-box *::before, .dm-box *::after { box-sizing: border-box; }
.dm-bg { position: relative; grid-column: 1; grid-row: 1 / 3; overflow: hidden; background: var(--tr-color-ground); }
.dm-top { position: relative; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 40px; padding: 40px 40px 0; color: var(--tr-color-text); }
.dm-next { position: relative; grid-column: 1; grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: 16px; padding: 48px 40px 40px; color: var(--tr-color-text); }
.dm-main { position: relative; grid-column: 2; grid-row: 1 / 3; min-width: 0; display: flex; flex-direction: column; padding: 40px 48px; }

/* Type: the site's web scale. */
.dm-h { margin: 0; font-size: 40px; line-height: 44px; letter-spacing: -0.03em; font-weight: 400; color: var(--tr-color-text); }
.dm-lead { margin: 0; font-size: 20px; line-height: 28px; color: var(--tr-color-text-2); }
.dm-sm { margin: 0; font-size: 15px; line-height: 20px; color: var(--tr-color-meta); }
.dm-kick { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 20px; line-height: 28px; font-weight: 400; color: var(--tr-color-text); }
.dm-kick .tr-tick, .dm-n .tr-tick { flex: none; }
.dm-lnk { font-size: 15px; line-height: 20px; }
.dm-mail { margin-top: 16px; }

/* The head of the form: the kicker when the box is narrow, the close button in the dialog. On a wide page it has
   nothing to show, and the form starts at the top. */
.dm-head { display: none; align-items: center; justify-content: flex-end; gap: 24px; min-height: 44px; margin-bottom: 24px; }
.dm-modal .dm-head { display: flex; }
.dm-narrow { display: none; }
.dm-x { display: none; align-items: center; gap: 12px; height: 44px; margin: 0; padding: 0 16px 0 18px; border: 0; border-radius: var(--tr-radius-pill); background: var(--tr-color-ground); color: var(--tr-color-text); box-shadow: inset 0 0 0 var(--tr-stroke-hairline) var(--tr-color-hairline); font: inherit; font-size: 15px; line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow var(--hv); }
.dm-modal .dm-x { display: inline-flex; }
.dm-x:hover { box-shadow: inset 0 0 0 var(--tr-stroke-hairline) var(--tr-color-mark-quiet); }
.dm-x:focus-visible { outline: 2px solid var(--tr-color-accent); outline-offset: 2px; }
.dm-xi { position: relative; display: block; width: 16px; height: 16px; }
.dm-xi::before, .dm-xi::after { content: ''; position: absolute; left: 0; top: 7.25px; width: 16px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.dm-xi::after { transform: rotate(-45deg); }

/* ------------------------------------------------------------ the form: a label over its field, 8 apart; fields 20 apart */
.dm-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.dm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dm-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dm-l { display: flex; justify-content: space-between; gap: 16px; padding: 0; font-size: 15px; line-height: 20px; color: var(--tr-color-text); }
.dm-o { color: var(--tr-color-meta); }
/* A quiet surface at rest; typing, it turns to the ground with the accent ring. 16 px type, so a phone does not zoom. */
.dm-i { display: block; width: 100%; height: 48px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--tr-radius-md); background: var(--tr-color-fill); color: var(--tr-color-text); font: inherit; font-size: 16px; line-height: 20px; outline: none; box-shadow: inset 0 0 0 var(--tr-stroke-ring) transparent; -webkit-appearance: none; appearance: none; transition: background-color var(--hv), box-shadow var(--hv); }
textarea.dm-i { height: 96px; padding: 14px 16px; line-height: 22px; resize: none; }
.dm-i::placeholder { color: var(--tr-color-meta); opacity: 1; }
.dm-i:hover { box-shadow: inset 0 0 0 var(--tr-stroke-hairline) var(--tr-color-mark-quiet); }
.dm-i:focus { background: var(--tr-color-ground); box-shadow: inset 0 0 0 var(--tr-stroke-ring) var(--tr-color-accent); }
.dm-i[aria-invalid="true"] { background: var(--tr-color-ground); box-shadow: inset 0 0 0 var(--tr-stroke-ring) var(--tr-color-review); }
.dm-err { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 20px; color: var(--tr-color-text); }
.dm-err[hidden] { display: none; }
.dm-err .tr-tick { flex: none; margin-top: 3px; }

/* Choice chips: radio buttons, one answer, solid indigo with white text once picked. 44 high, a finger's target. */
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dm-c { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: var(--tr-radius-pill); background: transparent; color: var(--tr-color-text); box-shadow: inset 0 0 0 var(--tr-stroke-hairline) var(--tr-color-mark-quiet); font-size: 15px; line-height: 20px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--hv), color var(--hv), box-shadow var(--hv); }
.dm-c:hover { background: var(--tr-color-fill); }
.dm-r:checked + .dm-c { background: var(--tr-color-accent-fill); color: var(--tr-color-on-accent); box-shadow: none; }
.dm-r:focus-visible + .dm-c { outline: 2px solid var(--tr-color-accent); outline-offset: 2px; }

/* A field for bots only: off screen, out of the tab order, ignored by screen readers. */
.dm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* The send row: the button, and what happens to the details beside it. */
.dm-acts { display: flex; align-items: center; gap: 24px; margin-top: 12px; }
.dm-acts .tr-button { flex: none; }
.dm-acts .tr-button[aria-busy="true"] { filter: none; opacity: 0.6; cursor: progress; }
.dm-fail { margin-top: -4px; }

/* ------------------------------------------------------------ what happens next: three steps */
.dm-steps { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 24px 0 0; list-style: none; border-top: var(--tr-stroke-hairline) solid var(--tr-color-hairline); }
.dm-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; transition: opacity var(--hv); }
.dm-n { display: flex; align-items: center; height: 28px; font-family: var(--font-mono); font-size: 15px; line-height: 20px; color: var(--tr-color-meta); }
.dm-st { font-size: 20px; line-height: 28px; color: var(--tr-color-text); }
.dm-n-t { display: none; }

/* ------------------------------------------------------------ sent: the request becomes one validated page; step 01 is
   done, the tick moves to 02 */
.dm-done { display: none; flex-direction: column; align-items: flex-start; gap: 32px; margin: auto 0; padding-bottom: 44px; }
.dm-done .tr-written { position: relative; flex: none; }
.dm-done-t { display: flex; flex-direction: column; gap: 16px; }
.dm-done .dm-h:focus { outline: none; }
.dm-box.is-sent .dm-form { display: none; }
.dm-box.is-sent .dm-done { display: flex; }
.dm-box.is-sent .dm-step-1 { opacity: 0.5; }
.dm-box.is-sent .dm-step-2 .dm-n-x { display: none; }
.dm-box.is-sent .dm-step-2 .dm-n-t { display: flex; }

/* ------------------------------------------------------------ the demo page */
.dm-page { container: dm-page / inline-size; margin-top: calc(64 * var(--u)); }
.dm-page .dm-box { max-width: 720px; overflow: visible; border-radius: 0; }
.dm-page .dm-bg { border-radius: var(--tr-radius-md); }
/* Wide, the page lays the box on the site's grid: the charcoal side on columns 1 to 5, the form on 7 to 12. */
@container dm-page (min-width: 1100px) {
  .dm-page .dm-box { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); max-width: none; }
  .dm-page .dm-bg, .dm-page .dm-top, .dm-page .dm-next { grid-column: 1 / span 5; }
  .dm-page .dm-main { grid-column: 7 / span 6; padding: 40px 0; }
}

/* ------------------------------------------------------------ the dialog on every other page */
.dm-modal { container: dm-modal / inline-size; box-sizing: border-box; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; overflow-y: auto; overscroll-behavior: contain; }
.dm-modal[open] { display: flex; align-items: flex-start; }
/* Its top stays put while the box grows (an error line) or shrinks (sent): placed as if it were 640 high. */
.dm-modal > .dm-box { margin: max(0px, calc(50dvh - 344px)) auto 0; }
/* The menu's dim (--tr-alpha-black-30); written out, since a backdrop does not see the page's variables everywhere. */
.dm-modal::backdrop { background: rgb(0 0 0 / 0.3); }
:root:has(.dm-modal[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .dm-modal > .dm-box { transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1), translate 0.6s cubic-bezier(0.32, 0.72, 0, 1); }
  .dm-modal::backdrop { transition: opacity 0.35s cubic-bezier(0.45, 0, 0.55, 1); }
  @starting-style {
    .dm-modal[open] > .dm-box { opacity: 0; translate: 0 24px; }
    .dm-modal[open]::backdrop { opacity: 0; }
  }
}
/* A phone: the dialog fills the screen. */
@media (max-width: 639px) {
  .dm-modal { padding: 0; }
  .dm-modal > .dm-box { min-height: 100%; margin: 0; border-radius: 0; }
}

/* ------------------------------------------------------------ narrow: the form first, the steps after. Side by side, the
   form needs 1080 px of dialog to give each half-width field 260 px; the page has it only on its 12-column grid, from
   1100 px. */
@container dm-modal (max-width: 1079px) {
  .dm-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .dm-main { grid-column: 1; grid-row: 1; padding: 32px; }
  .dm-bg, .dm-next { grid-column: 1; grid-row: 2; }
  .dm-next { align-self: stretch; padding: 40px 32px 48px; }
  .dm-wide { display: none; }
  .dm-narrow { display: flex; }
  h1.dm-narrow, h2.dm-narrow { display: block; margin-top: 8px; margin-bottom: 32px; }
  .dm-head { display: flex; justify-content: space-between; }
  .dm-done { margin: 16px 0 24px; padding-bottom: 0; }
  .dm-box.is-sent .dm-h.dm-narrow { display: none; }
  /* On the page the form needs no inner margin: it stands on the page's own; the steps follow 48 below. */
  .dm-page .dm-main { padding: 0 0 48px; }
  .dm-modal > .dm-box { margin-top: 0; margin-bottom: auto; }
}
@container dm-modal (max-width: 1079px) {
  .dm-modal > .dm-box { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@container dm-page (max-width: 1099px) {
  .dm-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .dm-main { grid-column: 1; grid-row: 1; padding: 32px; }
  .dm-bg, .dm-next { grid-column: 1; grid-row: 2; }
  .dm-next { align-self: stretch; padding: 40px 32px 48px; }
  .dm-wide { display: none; }
  .dm-narrow { display: flex; }
  h1.dm-narrow, h2.dm-narrow { display: block; margin-top: 8px; margin-bottom: 32px; }
  .dm-head { display: flex; justify-content: space-between; }
  .dm-done { margin: 16px 0 24px; padding-bottom: 0; }
  .dm-box.is-sent .dm-h.dm-narrow { display: none; }
  /* On the page the form needs no inner margin: it stands on the page's own; the steps follow 48 below. */
  .dm-page .dm-main { padding: 0 0 48px; }
  .dm-modal > .dm-box { margin-top: 0; margin-bottom: auto; }
}
@container (max-width: 599px) {
  .dm-main { padding: 24px; }
  .dm-next { padding: 40px 24px 48px; }
  .dm-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dm-acts { flex-direction: column; align-items: stretch; gap: 16px; }
  .dm-acts .tr-button { justify-content: center; width: 100%; }
  .dm-done .tr-written { scale: 0.85; transform-origin: 0 0; margin-bottom: -33px; }
}