/* The subscribe field, on the front of the site.

   The field and the button are one line, which is the whole shape of this
   element - so they are a flex row and the field takes the room the button does
   not. At a phone width they stack, because a 90px email box is not a field
   anybody can type in. */
.dsm-subscribe{ width:100% }

.dsm-row{ display:flex; gap:10px; align-items:stretch; width:100%;
  max-width:var(--dsm-width,520px) }

.dsm-align-center .dsm-row{ margin-inline:auto }
.dsm-align-right  .dsm-row{ margin-inline:auto 0 }
.dsm-align-center{ text-align:center }
.dsm-align-right { text-align:right }

.dsm-email{ flex:1 1 auto }

/* The shape the site chose, laid out by name.
 *
 * This used to read which fields were present and guess from that, which
 * meant two arrangements that hold the same fields could not be told apart.
 * The chosen shape is written onto the form, so each one is stated. */
.dsm-row{ flex-wrap:wrap }
.dsm-row .dsm-named{ flex:1 1 0 }

/* Fields grow from nothing rather than claiming a share of the row.
 *
 * They used to be given percentages - a name at thirty, an address at forty -
 * and the button took whatever it needed after that. That holds until a theme
 * gives the button wide padding and letter spacing, at which point the three
 * come to more than the row and the button drops onto a line of its own. The
 * selector in the admin promised one line and the form delivered two.
 *
 * From a basis of nothing the button is measured first and the fields divide
 * what is left, so the button is never the thing that does not fit. They keep
 * a floor, so in a column too narrow to hold all three the button wraps -
 * which is the right answer there, and better than a name field squeezed to
 * fifty pixels to keep everything on one line. */
.dsm-row .dsm-named, .dsm-row .dsm-email, .dsm-row .dsm-field{ min-width:8rem }

/* One field and a button, side by side. */
.dsm-form-email .dsm-email{ flex:1 1 0 }
.dsm-form-email .dsm-go{ flex:0 0 auto }

/* A first name, an address and the button, all on one line. */
.dsm-form-first .dsm-named{ flex:1 1 0 }
.dsm-form-first .dsm-email{ flex:2 1 0 }
.dsm-form-first .dsm-go{ flex:0 0 auto }

/* Both names sharing a line, then the address with the button beside it.
   The two names come to the whole row between them, which is what puts the
   address on the next line; from there it grows from zero so the button
   keeps its place beside it. */
.dsm-form-named .dsm-named{ flex:1 1 calc(50% - 5px) }
.dsm-form-named .dsm-email{ flex:1 1 0 }
.dsm-form-named .dsm-go{ flex:0 0 auto }

/* The same, with the button on a line of its own across the whole form. */
.dsm-form-block .dsm-named{ flex:1 1 calc(50% - 5px) }
.dsm-form-block .dsm-email{ flex:1 1 100% }
.dsm-form-block .dsm-go{ flex:1 1 100% }

/* Everything on its own line, full width, one under the next. A column
   rather than a wrapped row: a row that happens to wrap after every item
   still leaves the last line short if one of them will not fill it. */
.dsm-form-tower, .dsm-form-onecol{ flex-direction:column; align-items:stretch }
.dsm-form-tower > *, .dsm-form-onecol > *{ flex:0 0 auto; width:100% }
.dsm-form-tower .dsm-go, .dsm-form-onecol .dsm-go{ align-self:stretch }

/* The button keeps its own size. flex:0 0 auto so a long label is never
   squeezed into two lines while the field takes the room. */
.dsm-go{ flex:0 0 auto }

/* The small print takes the color of whatever it is standing in.

   It was faded to seven tenths, which on a footer set to white reads as a
   gray nobody chose and cannot change - the color was right and the opacity
   was quietly undoing it. A note that wants to sit back can be given a
   color that sits back. */
.dsm-note{ margin:8px 0 0; font-size:.85em; color:var(--ds-note-ink, inherit) }

/* The field only a script fills in.
 *
 * Moved off the page rather than hidden outright - plenty of scripts skip
 * anything the browser would not paint, and the ones that do not are the ones
 * this catches. It stays out of the tab order and out of the accessibility tree
 * through the attributes on it, so nobody using a keyboard or a screen reader
 * ever meets it. */
.dsm-hp{
  position:absolute !important;
  left:-9999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

/* What came back from the last attempt. Above the field rather than below it:
   somebody who has just been told "that is not an email address" is looking at
   the box, not under the button. */
.dsm-said{ margin:0 0 10px; font-size:.9em }
.dsm-said.is-ok { color:var(--ds-heading,inherit) }
.dsm-said.is-bad{ color:#d62828 }

/* A 90px email box is not a field anybody can type in, so below this they
   stack whatever the arrangement asked for. */
@media (max-width:520px){
  .dsm-row{ flex-direction:column }
  .dsm-go{ width:100% }
  .dsm-row .dsm-named, .dsm-row .dsm-email, .dsm-row .dsm-field{ min-width:0 }
}

/* The subscriber's own page. */
.dsm-portal{ max-width:var(--ds-read,60ch) }
.dsm-who{ font-weight:600; margin:0 0 .2em }
.dsm-state{ margin:0 0 1.2em; opacity:.8 }

/* ---- with labels ----
 *
 * A label above each field rather than a placeholder inside it. The wrapper is
 * the flex item and carries the layout class, so every arrangement above works
 * unchanged - the difference is only what each item contains. */
.dsm-field{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.dsm-label{ font-size:13px; line-height:1.3 }
.dsm-field .dsm-in{ width:100% }

/* The button has no label above it, so it would sit level with the labels
   rather than with the fields. Pushed down by the height of one. */
.dsm-row:has(.dsm-field) .dsm-go{ align-self:flex-end }