/* ==========================================================================
   SETTINGS — the office's settings, the platform's settings, notifications
   --------------------------------------------------------------------------
   Prefix: .set-
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Contents
     1  Page            section switcher, error lists
     2  Generated form  a setting, where its value comes from, a set of ticks
     3  Rows            crossings and services: a name, chips, one action
     4  Channels        the matrix of ticks, the test form, small headings
     5  Delivery log    filters, the table that becomes cards, the row that opens
     6  Template editor pickers, the box and its counter, variables, preview
   ========================================================================== */

/* ==========================================================================
   1 · PAGE
   ========================================================================== */

/* Pills wrap rather than scroll: six short words never need a scrolling strip. */
.set-tabs {
  flex-wrap: wrap;
  overflow: visible;
}

.set-errors {
  margin: 0;
  padding-inline-start: var(--space-4);
}

/* ==========================================================================
   2 · GENERATED FORM
   A grid of settings that wraps by itself: two or three to a row when there is room, one on a
   phone. Each setting is its control and, beneath it, where its value comes from.
   ========================================================================== */

.set-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-5) var(--space-6);
}

.set-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.set-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.set-state__restore {
  padding-inline: var(--space-1);
}

/* A set of ticks: a legend, its help, and the choices side by side, wrapping. */
.set-ticks {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.set-ticks__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-block-start: var(--space-2);
}

/* ==========================================================================
   3 · ROWS
   A list of things an office switches on and off: a name, a few chips, one action. The action
   drops under the text when there is no room beside it.
   ========================================================================== */

.set-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.set-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.set-row:first-child {
  border-block-start: 0;
}

/* Something the office does not serve recedes; its chip still says so in words. */
.set-row--off .set-row__title {
  color: var(--color-text-muted);
}

.set-row__main {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.set-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.set-row__meta {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.set-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}

.set-row__actions {
  flex: 0 0 auto;
}

.set-code {
  padding-inline: var(--space-1);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}

/* ==========================================================================
   4 · CHANNELS
   A row for each message: its name and where its channel comes from on one side, a tick for each
   installed channel on the other. On a phone the ticks drop under the name.
   ========================================================================== */

.set-matrix {
  margin: 0;
  padding: 0;
  list-style: none;
}

.set-matrix__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.set-matrix__row:first-child {
  border-block-start: 0;
}

.set-matrix__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.set-matrix__name {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.set-matrix__help {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.set-matrix__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.set-matrix__error {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 40rem) {
  .set-matrix__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.set-matrix__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.set-unavailable {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.set-unavailable li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* A small heading inside a card or beside the editor. */
.set-side-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

/* "Send me a test": two choices and a button that sits level with them. */
.set-test {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: end;
  gap: var(--space-4);
}

.set-test__action {
  display: flex;
}

/* ==========================================================================
   5 · DELIVERY LOG
   One table that is a list of cards on a phone: seven columns do not fit, and a sideways scroll
   hides the two that matter (what became of it, and the way to open it). The same rows restack, each
   value labelled by its own column name since the header row is gone. A container query, not a
   media query: the log sits beside whatever the layout puts there.
   ========================================================================== */

.set-results {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.set-log {
  container-type: inline-size;
  container-name: set-log;
}

.set-td {
  vertical-align: top;
}

.set-when {
  display: flex;
  flex-direction: column;
}

.set-when__date {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.set-when__time {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.set-event {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.set-to {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.set-to__address {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.set-status {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.set-status__reason {
  max-inline-size: 18rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.set-log__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* A row that is open is joined to its details: tinted, with the details directly beneath. */
.set-log__row.is-open > td {
  background: var(--color-primary-soft);
}

.set-log__detail > td {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
}

.set-detail {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-5) var(--space-6);
}

.set-detail__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.set-detail__label {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.set-detail__subject {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.set-detail__none {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* The message exactly as written: its own line breaks kept, however long a word. */
.set-bubble {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  line-height: var(--line-height-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.set-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  min-inline-size: 0;
}

.set-facts__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.set-facts__item dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.set-facts__item dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  overflow-wrap: anywhere;
}

.set-facts__error {
  flex-basis: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@container set-log (max-width: 52rem) {
  .set-log__table thead {
    position: absolute;
    display: block;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .set-log__table,
  .set-log__table tbody {
    display: block;
  }

  .set-log__table tbody tr.set-log__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'event status'
      'when when'
      'channel to'
      'actions actions';
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }

  .set-log__table tbody tr.set-log__row.is-open {
    background: var(--color-primary-soft);
    border-block-end: 0;
  }

  .set-log__table tbody tr.set-log__detail {
    display: block;
    border-block-end: 1px solid var(--color-hairline);
  }

  .set-log__table tbody tr:last-child {
    border-block-end: 0;
  }

  .set-log__table td {
    display: block;
    min-inline-size: 0;
    padding: 0;
    overflow-wrap: anywhere;
    border: 0;
  }

  .set-log__row.is-open > td {
    background: transparent;
  }

  .set-log__table tbody tr.set-log__detail > td {
    padding: var(--space-4);
  }

  .set-td--event { grid-area: event; font-size: var(--font-size-md); }
  .set-td--status { grid-area: status; justify-self: end; }
  .set-td--when { grid-area: when; }
  .set-td--channel { grid-area: channel; }
  .set-td--to { grid-area: to; }
  .set-td--actions { grid-area: actions; }

  /* app.css gives the action cell a 1% width so it hugs its buttons in a table; a card wants it full. */
  .set-log__table td.set-td--actions {
    inline-size: auto;
    white-space: normal;
    text-align: start;
  }

  .set-td--actions .set-log__buttons {
    justify-content: flex-start;
  }

  .set-td--actions .btn {
    flex: 1 1 auto;
  }

  .set-td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-subtle);
  }

  .set-td[data-label].set-td--event::before { display: none; }

  .set-when {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
  }

  .set-status {
    align-items: flex-end;
    text-align: end;
  }

  .set-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   6 · TEMPLATE EDITOR
   The pickers across the top, then the words beside what helps with them: the variables to copy and
   the message as a citizen will read it. One column when there is no room for both.
   ========================================================================== */

.set-pickers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
}

.set-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.set-editor {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-6);
}

@media (max-width: 64rem) {
  .set-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}

.set-editor__form,
.set-editor__side {
  min-inline-size: 0;
}

.set-editor__body {
  min-block-size: 9rem;
  line-height: var(--line-height-base);
  resize: vertical;
}

.set-counter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.set-unknown {
  display: block;
  unicode-bidi: plaintext;
  font-family: var(--font-family-mono);
  overflow-wrap: anywhere;
}

.set-palette,
.set-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.set-palette__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The example of an optional part: code in the middle of a sentence, never broken or reordered. */
.set-example {
  padding-inline: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* A variable is a button that copies it. Idle shows the word "copy"; the handler in dashboard.js sets
   data-copied or data-copy-failed for a couple of seconds, and each is an icon AND a mark, not a colour. */
.set-copy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font: inherit;
  color: var(--color-text);
  text-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.set-copy:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

.set-copy:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.set-copy__icon {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--color-text-muted);
}

.set-copy__icon--done,
.set-copy__icon--fail {
  display: none;
}

.set-copy__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
}

.set-copy__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.set-copy__token {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.set-copy__state {
  flex: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.set-copy__done,
.set-copy__fail {
  display: none;
}

.set-copy[data-copied] {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
}

.set-copy[data-copied] .set-copy__icon--idle,
.set-copy[data-copy-failed] .set-copy__icon--idle {
  display: none;
}

.set-copy[data-copied] .set-copy__icon--done,
.set-copy[data-copy-failed] .set-copy__icon--fail {
  display: inline-block;
}

.set-copy[data-copied] .set-copy__icon--done {
  color: var(--color-success-fg);
}

.set-copy[data-copy-failed] {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
}

.set-copy[data-copy-failed] .set-copy__icon--fail {
  color: var(--color-danger-fg);
}

.set-copy[data-copied] .set-copy__idle,
.set-copy[data-copy-failed] .set-copy__idle {
  display: none;
}

.set-copy[data-copied] .set-copy__done,
.set-copy[data-copy-failed] .set-copy__fail {
  display: inline;
}