/* Shivraj Singh V2 — the commission sheet, in black and white

   The counter is a sheet now, after the Mercedes-Benz India pages on a
   telephone: it rises from the foot of the window with a grab handle and
   rounded top corners, the paths are a white pill switch pinned under its
   header, the form is set in the plain sans on white with light-grey tiles,
   the commission is summed up in words on a black card at the end of the
   form, and the one action, Send on WhatsApp, sits in a bar held at the foot
   of the sheet while the form scrolls. On a wider window the same sheet
   stands as a panel in the middle, over a dimmed page.

   Everything is written under dialog.csheet, so the page's own form rules
   (base.css, components.css, v2.css) are refined here without being touched,
   and nothing here reaches outside the sheet. The lead's tokens are used,
   each with its value as a fallback. */

/* While the sheet is open the page behind it stays where it is, to the pixel.
   The site reserves the scrollbar's gutter (base.css) and the gutter is left
   reserved here: given up, the page behind grows wider by a scrollbar, and
   round a panel that does not cover it the page is seen to reflow and shift,
   its round buttons with it. */
html.csheet-lock {
  overflow: hidden;
}

/* The backdrop cannot reach into the gutter, so where a browser draws
   classic scrollbars (a desktop, with a mouse) the page's white ground would
   stand there undimmed. It is given the grey that white shows through the
   backdrop (black at 0.6) instead, and the dimmed page runs to the edge. */
@media (hover: hover) and (pointer: fine) {
  html.csheet-lock { background: #666; }
}

/* ---------- the sheet itself ---------- */

dialog.csheet {
  --cs-ink: var(--ink, #000);
  --cs-paper: var(--paper, #fff);
  --cs-g50: var(--g50, #f8f8f8);
  --cs-g100: var(--g100, #f4f4f4);
  --cs-g150: var(--g150, #ececec);
  --cs-g200: var(--g200, #e0e0e0);
  --cs-g300: var(--g300, #c8c8c8);
  --cs-g500: var(--g500, #767676);
  --cs-g600: var(--g600, #5c5c5c);
  --cs-g700: var(--g700, #3c3c3c);
  --cs-g800: var(--g800, #262626);
  --cs-err: var(--err, #c62828);
  --cs-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  --cs-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --cs-deva: var(--f-deva, "Tiro Devanagari Hindi", "Nirmala UI", sans-serif);
  --cs-tile: var(--r-tile, 8px);
  --cs-card: var(--r-card, 12px);
  --cs-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  --cs-pad: 20px;
  --cs-top: 70px;      /* the pinned switch, allowed for when a field is brought into view */
  --cs-foot: 84px;     /* the action bar, likewise */

  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  height: 92vh;
  height: 92svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: var(--cs-paper);
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.42s var(--cs-ease);
  -webkit-font-smoothing: antialiased;
}

dialog.csheet[open] {
  display: flex;
  flex-direction: column;
}

dialog.csheet.is-in { transform: none; }

/* While a finger holds the handle the sheet follows it exactly. */
dialog.csheet.is-dragging { transition: none; }

dialog.csheet::backdrop {
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.32s ease;
}

dialog.csheet.is-in::backdrop { opacity: 1; }

/* ---------- handle and header ---------- */

dialog.csheet .csheet__grab {
  flex: none;
  display: grid;
  place-items: center;
  height: 24px;
  cursor: grab;
  touch-action: none;
}

dialog.csheet .csheet__grab::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--cs-g300);
}

dialog.csheet .csheet__head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  padding: 0 var(--cs-pad) 10px;
  touch-action: none;
}

/* The kicker says the path and the kind of work ("From a photograph · Oil
   painting") in small, spaced capitals in grey. It is set in two pieces: the
   longest ("From a photograph · Large composition") is wider than a
   telephone, and breaks between the two rather than inside either.

   The point between them stands at the head of the second piece, in a box
   as wide as the kicker reaches out to the left of its column, and the
   kicker is cut off at the column's edge. On one line the point sits
   between the two pieces; when the second piece begins a line of its own
   the point falls in the part cut off, and the two lines begin together. */
dialog.csheet .csheet__k {
  grid-column: 1;
  margin: 6px 0 6px -1.1em;
  clip-path: inset(0 0 0 1.1em);
  font-family: var(--cs-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-g600);
}

dialog.csheet .csheet__k > span {
  display: inline-block;
  white-space: nowrap;
}

dialog.csheet .csheet__k > span:first-child { margin-left: 1.1em; }

dialog.csheet .csheet__dot {
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

@media (max-width: 380px) {
  dialog.csheet .csheet__k { font-size: 11px; letter-spacing: 0.06em; }
}

dialog.csheet .csheet__head h2 {
  grid-column: 1;
  margin: 0;
  font-family: var(--cs-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--cs-ink);
}

dialog.csheet .csheet__head h2:focus { outline: none; }

dialog.csheet .csheet__x {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--cs-g100);
  color: var(--cs-ink);
  cursor: pointer;
  transition: background-color 0.16s ease;
}

dialog.csheet .csheet__x svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

dialog.csheet .csheet__x:hover { background: var(--cs-g200); color: var(--cs-ink); }
dialog.csheet .csheet__x:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 2px; }

/* ---------- the scrolling body ---------- */

dialog.csheet .csheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--cs-pad);
  scroll-padding-top: var(--cs-top);
  scroll-padding-bottom: var(--cs-foot);
}

/* Neither the scroller nor the panes keep any room at the foot: the action
   bar is the last thing in a pane, carries its own, and so comes to rest on
   the sheet's lower edge exactly where it was held while the form scrolled. */
dialog.csheet .csheet__body > [role="tabpanel"] {
  padding-bottom: 0;
}

/* The two paths: a white pill switch, the chosen one black, pinned at the
   top of the body as the Mercedes switch is pinned at the top of the page. */
dialog.csheet .csheet__switch {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 calc(-1 * var(--cs-pad));
  padding: 6px var(--cs-pad) 14px;
  background: var(--cs-paper);
}

/* A hairline under the switch once the form has moved beneath it. */
dialog.csheet .csheet__switch::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--cs-g200);
  opacity: 0;
  transition: opacity 0.2s ease;
}

dialog.csheet.is-scrolled .csheet__switch::after { opacity: 1; }

dialog.csheet .csheet__switch .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--cs-g300);
  border-radius: 999px;
  background: var(--cs-paper);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: visible;
  flex-wrap: nowrap;
}

dialog.csheet .csheet__switch .tabs button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

dialog.csheet .csheet__switch .tabs button::after { display: none; }
dialog.csheet .csheet__switch .tabs button:hover { background: var(--cs-g100); color: var(--cs-ink); }

dialog.csheet .csheet__switch .tabs button[aria-selected="true"] {
  background: var(--cs-ink);
  color: #fff;
}

dialog.csheet .csheet__switch .tabs button:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

dialog.csheet .tabs__t {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On the narrowest telephones "From a photograph" is wider than its half of
   the switch: there the names break on to two lines rather than be cut
   short, and the pill keeps its height. */
@media (max-width: 340px) {
  dialog.csheet .csheet__switch .tabs button {
    padding: 6px 8px;
    line-height: 1.15;
    white-space: normal;
  }

  dialog.csheet .tabs__t {
    overflow: visible;
    text-overflow: clip;
  }
}

/* "Path A —" and the Hindi name are kept for a screen reader; the telephone
   shows the plain name only, so each half stays on one line. */
dialog.csheet .csheet__switch .tabs__path,
dialog.csheet .csheet__switch .tabs .hi {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- the panes ----------
   A pane reads in one column: the note of where its settings came from,
   step one while it stands, the form, the summary of what has been asked
   for, the word about money, and the action. In the markup the summary
   comes after the form and its action, and the two share a box below the
   note and step one; both boxes are therefore dissolved, so that the pane
   itself sets its parts in the order they are read. The action bar is then
   held at the foot of the whole pane, step one included, and is never met
   half way into view at the foot of the sheet. */

dialog.csheet .csheet__body > [role="tabpanel"]:not(.hidden) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

dialog.csheet .withrail,
dialog.csheet .formcard {
  display: contents;
}

/* The switch already names the path; the pane's own heading is kept for a
   screen reader and as the place the focus lands when the path changes. */
dialog.csheet .formcard > h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

dialog.csheet .formcard > .lede {
  max-width: 62ch;
  margin: 2px 0 22px;
  font-family: var(--cs-sans);
  font-size: 15px;
  font-style: normal;
  line-height: 1.55;
  color: var(--cs-g700);
}

dialog.csheet .formcard > .lede::first-letter {
  font: inherit;
  color: inherit;
  float: none;
  margin: 0;
  padding: 0;
}

dialog.csheet fieldset {
  min-width: 0;
  margin: 0 0 6px;
  padding: 24px 0 14px;
  border: 0;
  border-top: 1px solid var(--cs-g200);
}

/* The legend is floated so it sits inside the section like any heading,
   rather than across the rule above it. */
dialog.csheet legend {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--cs-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-ink);
}

dialog.csheet legend + * { clear: both; }

dialog.csheet legend .hi {
  margin-left: 6px;
  font-family: var(--cs-deva);
  font-size: 15px;
  font-weight: 400;
  color: var(--cs-g500);
}

dialog.csheet legend .hint {
  font-size: 14px;
  font-weight: 400;
  color: var(--cs-g500);
}

dialog.csheet .formgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

dialog.csheet .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
}

dialog.csheet .field > label {
  font-family: var(--cs-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-ink);
}

dialog.csheet .field > label .hi {
  margin-left: 4px;
  font-family: var(--cs-deva);
  font-weight: 400;
  color: var(--cs-g500);
}

dialog.csheet .field > label .hint { font-size: 13px; font-weight: 400; color: var(--cs-g500); }

/* Broken so that no word is left on a line of its own. */
dialog.csheet .hint {
  font-family: var(--cs-sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cs-g600);
  text-wrap: pretty;
}

dialog.csheet .hint:empty { display: none; }

/* ---------- inputs ---------- */

dialog.csheet input[type="text"],
dialog.csheet input[type="tel"],
dialog.csheet input[type="email"],
dialog.csheet select,
dialog.csheet textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 14px;
  font-family: var(--cs-sans);
  font-size: 16px;          /* sixteen pixels, so a telephone does not zoom in */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--cs-ink);
  background: #fff;
  border: 1px solid var(--cs-g300);
  border-radius: var(--cs-tile);
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

dialog.csheet select {
  padding-right: 46px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  cursor: pointer;
}

/* The longest medium ("Oil on canvas — large composition") is given the few
   pixels it wants on the narrowest telephones. */
@media (max-width: 380px) {
  dialog.csheet select { padding-right: 38px; background-position: right 12px center; }
}

dialog.csheet textarea {
  min-height: 116px;
  resize: vertical;
  line-height: 1.5;
}

dialog.csheet input::placeholder,
dialog.csheet textarea::placeholder { color: var(--cs-g500); opacity: 1; }

dialog.csheet input[type="text"]:hover,
dialog.csheet input[type="tel"]:hover,
dialog.csheet input[type="email"]:hover,
dialog.csheet select:hover,
dialog.csheet textarea:hover { border-color: var(--cs-g500); }

dialog.csheet input[type="text"]:focus,
dialog.csheet input[type="tel"]:focus,
dialog.csheet input[type="email"]:focus,
dialog.csheet select:focus,
dialog.csheet textarea:focus {
  border-color: var(--cs-ink);
  box-shadow: 0 0 0 1px var(--cs-ink);
  outline: 0;
}

dialog.csheet input[aria-invalid="true"],
dialog.csheet select[aria-invalid="true"],
dialog.csheet textarea[aria-invalid="true"] {
  border-color: var(--cs-err);
  box-shadow: 0 0 0 1px var(--cs-err);
  background: #fff;
}

/* A field marked wanting still shows where the keyboard is: the black edge of
   any focused field, with the red kept outside it. */
dialog.csheet input[aria-invalid="true"]:focus,
dialog.csheet select[aria-invalid="true"]:focus,
dialog.csheet textarea[aria-invalid="true"]:focus {
  border-color: var(--cs-ink);
  box-shadow: 0 0 0 1px var(--cs-ink), 0 0 0 3px var(--cs-err);
}

dialog.csheet .err {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 2px 0 0;
  font-family: var(--cs-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cs-err);
}

dialog.csheet .err::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--cs-err);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

dialog.csheet .err:empty { display: none; }

/* ---------- the tick boxes ---------- */

dialog.csheet .check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 52px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cs-g200);
  border-radius: var(--cs-tile);
  background: #fff;
  font-family: var(--cs-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--cs-ink);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

dialog.csheet .check:hover { border-color: var(--cs-g500); }
dialog.csheet .check:has(input:checked) { border-color: var(--cs-ink); }
dialog.csheet .check:has(input[aria-invalid="true"]) { border-color: var(--cs-err); box-shadow: 0 0 0 1px var(--cs-err); }

dialog.csheet .check input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  border: 1.5px solid var(--cs-ink);
  border-radius: 4px;
  background: #fff center / 16px 16px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

dialog.csheet .check input[type="checkbox"]:checked {
  background-color: var(--cs-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

dialog.csheet .check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

dialog.csheet .check input[aria-invalid="true"] { border-color: var(--cs-err); }

dialog.csheet .check .hi { font-family: var(--cs-deva); color: var(--cs-g500); }

/* ---------- pictures ---------- */

/* The drop is a Mercedes service tile: light grey, an icon at its centre, a
   bold line and a grey one under it. */
dialog.csheet .drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 16px 20px;
  border: 1px dashed var(--cs-g300);
  border-radius: var(--cs-card);
  background: var(--cs-g100);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

dialog.csheet .drop::before {
  content: "";
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21.5V5.5M11 11.5l6-6 6 6'/%3E%3Cpath d='M5 19.5v6a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3v-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

dialog.csheet .drop strong {
  display: block;
  margin: 0;
  font-family: var(--cs-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cs-ink);
}

/* Balanced, so the last word of the line does not fall on its own. */
dialog.csheet .drop .hint { font-size: 14px; color: var(--cs-g600); text-wrap: balance; }

dialog.csheet .drop:hover { border-color: var(--cs-g500); background: var(--cs-g150); }

dialog.csheet .drop.over {
  border: 1px solid var(--cs-ink);
  background: var(--cs-g150);
}

dialog.csheet .drop:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

dialog.csheet .thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px 12px;
  margin: 14px 0 0;
}

dialog.csheet .thumbs:empty { display: none; }

dialog.csheet .thumb {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

dialog.csheet .thumb__pic {
  position: relative;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
}

dialog.csheet .thumb__pic img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
}

/* A file the browser cannot draw (an HEIC photograph, a damaged one) keeps
   its tile and its name, and says so in place of the broken-picture mark. */
dialog.csheet .thumb__pic.is-plain img { visibility: hidden; }

dialog.csheet .thumb__pic.is-plain::before {
  content: "No preview";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--cs-sans);
  font-size: 12px;
  color: var(--cs-g600);
}

dialog.csheet .thumb.is-hero .thumb__pic {
  outline: 2px solid var(--cs-ink);
  outline-offset: 2px;
}

dialog.csheet .herobadge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  top: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--cs-ink);
  color: #fff;
  font-family: var(--cs-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
}

dialog.csheet .thumb__x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cs-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

/* A larger target round the small cross, for a thumb. */
dialog.csheet .thumb__x::after {
  content: "";
  position: absolute;
  inset: -6px;
}

dialog.csheet .thumb__x svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

dialog.csheet .thumb__x:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 2px; }

dialog.csheet .thumb__name {
  margin: 7px 0 0;
  font-family: var(--cs-sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--cs-g600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

dialog.csheet .thumb__bar {
  display: flex;
  margin: 6px 0 0;
}

dialog.csheet .thumb__bar button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--cs-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

dialog.csheet .thumb__bar button:hover { background: var(--cs-g100); color: var(--cs-ink); border-color: var(--cs-ink); }
dialog.csheet .thumb__bar button.on,
dialog.csheet .thumb__bar button.on:hover { background: var(--cs-ink); color: #fff; }
dialog.csheet .thumb__bar button:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }

/* ---------- notices ---------- */

dialog.csheet .notice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 8px 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cs-g700);
  text-wrap: balance;
}

dialog.csheet .notice::before {
  content: "";
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M10 9v5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.3' r='.4' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The words keep to their own column beside the mark, whether the markup
   sets them bare or in a paragraph. */
dialog.csheet .notice > * { grid-column: 2; }
dialog.csheet .notice p { margin: 0; }

/* The word about money stands between the summary and the action. Its
   margins are set here whatever the markup gives it inline. */
dialog.csheet .formcard > .notice {
  order: 2;
  margin: 12px 0 0 !important;
}

/* ---------- the action, held at the foot of the sheet ----------
   Send on WhatsApp is the one thing a path ends in. It stays in the bar
   while the form scrolls past, and is still there at the end of it. */

dialog.csheet .formcard > .btnrow {
  order: 3;
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 20px calc(-1 * var(--cs-pad)) 0;
  padding: 12px var(--cs-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cs-paper);
  box-shadow: 0 -1px 0 var(--cs-g200);
}

dialog.csheet .formcard > .btnrow .btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--cs-ink);
  border-radius: 999px;
  font-family: var(--cs-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

dialog.csheet .formcard > .btnrow .btn--wa {
  background: var(--cs-ink);
  color: #fff;
}

dialog.csheet .formcard > .btnrow .btn--wa:hover {
  background: var(--cs-g800);
  border-color: var(--cs-g800);
  color: #fff;
}

/* The WhatsApp mark, drawn in the button's own colour. */
dialog.csheet .formcard > .btnrow .btn--wa::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.9-.92 1.08-.15.18-.3.2-.57.07-.27-.15-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.34-1.7-.15-.28-.02-.43.12-.58.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.68-1.63-.93-2.22-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37-.27.3-1.02 1-1.02 2.42s1.04 2.8 1.19 3c.15.2 2.05 3.13 4.96 4.27 2.42.95 2.91.76 3.44.71.53-.05 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.27-.2-.57-.35zM12.04 21.5h-.01a9.4 9.4 0 0 1-4.79-1.31l-.34-.2-3.56.93.95-3.47-.22-.36a9.38 9.38 0 0 1-1.44-5.01c0-5.18 4.22-9.4 9.42-9.4a9.34 9.34 0 0 1 6.65 2.76 9.32 9.32 0 0 1 2.76 6.65c0 5.19-4.23 9.41-9.42 9.41zM20.46 3.49A11.2 11.2 0 0 0 12.04 0C5.82 0 .76 5.06.76 11.28c0 1.99.52 3.93 1.5 5.64L.66 24l7.25-1.9a11.25 11.25 0 0 0 4.13.99h.01c6.22 0 11.28-5.06 11.28-11.28 0-3.01-1.17-5.85-3.3-7.98z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.9-.92 1.08-.15.18-.3.2-.57.07-.27-.15-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.34-1.7-.15-.28-.02-.43.12-.58.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.68-1.63-.93-2.22-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37-.27.3-1.02 1-1.02 2.42s1.04 2.8 1.19 3c.15.2 2.05 3.13 4.96 4.27 2.42.95 2.91.76 3.44.71.53-.05 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.27-.2-.57-.35zM12.04 21.5h-.01a9.4 9.4 0 0 1-4.79-1.31l-.34-.2-3.56.93.95-3.47-.22-.36a9.38 9.38 0 0 1-1.44-5.01c0-5.18 4.22-9.4 9.42-9.4a9.34 9.34 0 0 1 6.65 2.76 9.32 9.32 0 0 1 2.76 6.65c0 5.19-4.23 9.41-9.42 9.41zM20.46 3.49A11.2 11.2 0 0 0 12.04 0C5.82 0 .76 5.06.76 11.28c0 1.99.52 3.93 1.5 5.64L.66 24l7.25-1.9a11.25 11.25 0 0 0 4.13.99h.01c6.22 0 11.28-5.06 11.28-11.28 0-3.01-1.17-5.85-3.3-7.98z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* While step one stands unanswered it is the one thing asked for: its own
   button is the black one, and Send on WhatsApp waits in white. */
dialog.csheet [role="tabpanel"]:has(.idstep:not(.hidden)) .formcard > .btnrow .btn--wa {
  background: var(--cs-paper);
  color: var(--cs-ink);
}

dialog.csheet [role="tabpanel"]:has(.idstep:not(.hidden)) .formcard > .btnrow .btn--wa:hover {
  background: var(--cs-g100);
  border-color: var(--cs-ink);
  color: var(--cs-ink);
}

dialog.csheet .formcard > .btnrow .btn:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

/* In the narrow bar the Hindi word gives way; it is still read out. */
dialog.csheet .formcard > .btnrow .btn__hi {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- step one: who is commissioning ---------- */

dialog.csheet .idstep {
  margin: 0 0 24px;
  scroll-margin-top: var(--cs-top);
}

dialog.csheet .idcard {
  position: relative;
  padding: 20px 18px 18px;
  border: 0;
  border-radius: var(--cs-card);
  background: var(--cs-g100);
}

dialog.csheet .idcard__k {
  margin: 0 0 8px;
  font-family: var(--cs-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-g600);
}

dialog.csheet .idcard__h {
  margin: 0 0 8px;
  font-family: var(--cs-serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.08;
  color: var(--cs-ink);
  text-wrap: balance;
}

/* On the card's grey ground the Hindi words take the darker of the two
   greys; the lighter one is kept for white. */
dialog.csheet .idcard__h .hi {
  display: block;
  margin-top: 6px;
  font-family: var(--cs-deva);
  font-size: 15px;
  color: var(--cs-g600);
}

dialog.csheet .idcard .field > label .hi { color: var(--cs-g600); }

dialog.csheet .idcard__lede {
  max-width: none;
  margin: 0 0 18px;
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cs-g700);
}

dialog.csheet .idstep .idcard > .field,
dialog.csheet .idstep .idcard > .check,
dialog.csheet .idstep .idcard__lede,
dialog.csheet .idstep .idcard__privacy,
dialog.csheet .idstep .idcard__done { max-width: none; }

dialog.csheet .idcard .check { margin-top: 2px; }

dialog.csheet .idcard__foot { margin: 16px 0 0; padding: 0; background: none; border: 0; }

dialog.csheet .idcard__privacy {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-family: var(--cs-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cs-g600);
}

dialog.csheet .idcard .btnrow { display: flex; margin: 0; }

dialog.csheet .idcard .btnrow .btn {
  flex: 1 1 auto;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid var(--cs-ink);
  border-radius: 999px;
  background: var(--cs-ink);
  color: #fff;
  font-family: var(--cs-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

dialog.csheet .idcard .btnrow .btn:hover { background: var(--cs-g800); border-color: var(--cs-g800); color: #fff; }
dialog.csheet .idcard .btnrow .btn:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }
dialog.csheet .idcard .btnrow .btn__hi { font-family: var(--cs-deva); font-weight: 400; opacity: 0.75; }

dialog.csheet .idcard__done {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--cs-ink);
  border-radius: var(--cs-tile);
  background: #fff;
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cs-ink);
}

/* Said when the actions are pressed before step one is answered. */
dialog.csheet .csheet__ask {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--cs-tile);
  background: var(--cs-ink);
  color: #fff;
  font-family: var(--cs-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

/* The card is ringed once as it is asked for: a line round it that widens
   and fades. */
dialog.csheet .idstep.is-asking .idcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: csheet-ask 1.1s ease 1;
}

@keyframes csheet-ask {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); }
}

/* ---------- a plate's settings, carried over ---------- */

dialog.csheet .prefill-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 10px 4px 10px 10px;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.45;
}

/* The plate is shown whole, small, on black: a framed oil floats there and
   a drawing reads as its own white sheet. */
dialog.csheet .prefill-note img {
  flex: none;
  width: 48px;
  height: 60px;
  padding: 4px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--cs-ink);
}

/* Where the settings came from stands on a line of its own, over what they
   are; the lines under it are broken so that no word is left alone. */
dialog.csheet .prefill-note span { min-width: 0; text-wrap: pretty; }
dialog.csheet .prefill-note strong { display: block; color: var(--cs-ink); font-weight: 700; }

/* "Change anything you like below." keeps together: where the caption's
   line has no room for it, it begins the next. */
dialog.csheet .prefill-note span > span { display: inline-block; }

dialog.csheet .prefill-note button {
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--cs-ink);
  cursor: pointer;
}

dialog.csheet .prefill-note button:hover { background: var(--cs-g200); }
dialog.csheet .prefill-note button:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 0; }

dialog.csheet .prefill-note button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ---------- the summary: a black card at the end of the form ----------
   What has been asked for, in words: the medium, the size, the people and
   the pictures. It names no amount; the line under its heading says who
   does. */

dialog.csheet .rail {
  order: 1;
  position: static;
  top: auto;
  margin: 22px 0 0;
  padding: 22px 20px 10px;
  border: 0;
  border-radius: var(--cs-card);
  background: #000;
  color: #fff;
  box-shadow: none;
}

dialog.csheet .rail h3 {
  margin: 0;
  font-family: var(--cs-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.04;
  color: #fff;
}

/* "The studio quotes each commission in person." */
dialog.csheet .rail__note {
  margin: 6px 0 0;
  font-family: var(--cs-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #bdbdbd;
  text-wrap: balance;
}

dialog.csheet .rail dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 16px 0 0;
  border-top: 1px solid #333;
}

dialog.csheet .rail dt,
dialog.csheet .rail dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid #333;
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

dialog.csheet .rail dt { padding-right: 16px; font-weight: 400; color: #bdbdbd; }
dialog.csheet .rail dd { font-weight: 600; color: #fff; text-align: right; text-wrap: balance; }

/* The last row closes the card without a rule under it. */
dialog.csheet .rail dt:last-of-type,
dialog.csheet .rail dd:last-of-type { border-bottom: 0; }

/* ---------- a short window: a telephone on its side ----------
   The sheet stays a sheet, and its head gives up some height to the form. */

@media (max-height: 559.98px) {
  dialog.csheet { height: 94vh; height: 94svh; }
  dialog.csheet .csheet__grab { height: 16px; }
  dialog.csheet .csheet__head { padding-bottom: 6px; }
  dialog.csheet .csheet__k { margin-top: 0; margin-bottom: 0; font-size: 12px; }
  dialog.csheet .csheet__head h2 { font-size: 24px; }
  dialog.csheet .csheet__x { width: 40px; height: 40px; grid-row: 1 / span 2; }
  dialog.csheet .csheet__switch { padding: 2px var(--cs-pad) 8px; }
  dialog.csheet .csheet__switch .tabs { max-width: 520px; }
  dialog.csheet .csheet__switch .tabs button { min-height: 40px; }
  dialog.csheet .formcard > .btnrow { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  dialog.csheet .formcard > .btnrow .btn { min-height: 44px; }
}

/* ---------- a wider window: a panel in the middle ---------- */

@media (min-width: 720px) and (min-height: 560px) {
  dialog.csheet {
    --cs-pad: 40px;
    --cs-top: 80px;
    --cs-foot: 90px;
    inset: 0;
    margin: auto;
    width: min(760px, calc(100% - 48px));
    height: min(900px, calc(100vh - 64px));
    height: min(900px, calc(100dvh - 64px));
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    transition: transform 0.38s var(--cs-ease), opacity 0.24s ease;
  }

  dialog.csheet.is-in { opacity: 1; transform: none; }

  dialog.csheet .csheet__grab { display: none; }

  dialog.csheet .csheet__head {
    padding: 32px var(--cs-pad) 14px;
    touch-action: auto;
  }

  dialog.csheet .csheet__k { font-size: 12.5px; }
  dialog.csheet .csheet__head h2 { font-size: 46px; }

  dialog.csheet .csheet__switch { padding: 6px var(--cs-pad) 18px; }

  dialog.csheet .csheet__switch .tabs {
    display: inline-grid;
    width: auto;
    grid-template-columns: auto auto;
  }

  dialog.csheet .csheet__switch .tabs button { padding: 8px 22px; font-size: 15px; }

  /* There is room for the Hindi name beside the English one. */
  dialog.csheet .csheet__switch .tabs .hi {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-family: var(--cs-deva);
    font-size: 14px;
    opacity: 0.7;
  }

  dialog.csheet .formgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  /* Where a set holds three fields (the kind of work, its size, its people)
     the first takes the whole row and the other two stand side by side
     under it, so that none is left alone beside an empty half. */
  dialog.csheet .formgrid > .field:first-child:nth-last-child(3) { grid-column: 1 / -1; }

  dialog.csheet .thumbs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

  dialog.csheet .formcard > .btnrow { justify-content: flex-end; }
  dialog.csheet .formcard > .btnrow .btn { flex: 0 1 auto; min-width: 240px; }

  dialog.csheet .formcard > .btnrow .btn__hi {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-family: var(--cs-deva);
    font-weight: 400;
    opacity: 0.75;
  }

  /* Step one in the panel is set as the kind of work is: the name on a row
     of its own, the mobile and the email side by side under it. The card
     then ends, button and all, above the foot of the panel. */
  dialog.csheet .idcard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    padding: 26px 28px 24px;
  }

  dialog.csheet .idcard > * { grid-column: 1 / -1; }
  dialog.csheet .idcard > .field ~ .field { grid-column: auto; }
  dialog.csheet .idcard .btnrow .btn { flex: 0 1 auto; }

  /* Two pairs to a row, in two equal halves, with air between them. */
  dialog.csheet .rail { padding: 28px 28px 14px; }
  dialog.csheet .rail dl { grid-template-columns: repeat(2, minmax(max-content, 1fr) minmax(0, 2fr)); column-gap: 0; }
  dialog.csheet .rail dl dd { padding-right: 32px; }
  dialog.csheet .rail dl dd:nth-of-type(2n) { padding-right: 0; }
  dialog.csheet .rail dt:nth-last-of-type(2),
  dialog.csheet .rail dd:nth-last-of-type(2) { border-bottom: 0; }
}

/* ---------- less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  dialog.csheet,
  dialog.csheet::backdrop,
  dialog.csheet *,
  dialog.csheet *::before,
  dialog.csheet *::after {
    transition: none !important;
    animation: none !important;
  }
}