/*
 * #coda — screen-only styles (S07/S08/S14).
 * Shared chrome/forms/buttons/panels live in css/ui.css + css/shell.css.
 * Do not redeclare .g-panel / .g-btn / .g-title here — that fought the shell.
 */

/* Tre controlli, non uno: il cap a 16rem li impilava anche su desktop. La griglia di
   `.g-form--filters` (ui.css) fa il resto. */
.g-coda-filters {
  margin: var(--s3) 0 0;
  max-width: 34rem;
}

/* La casella allinea il suo piede a quello dei due select, che portano un'etichetta sopra. */
.g-coda-filters .g-check {
  align-self: end;
}

/* Detail — .g-linkback lives in ui.css */
.g-detail__head {
  margin-bottom: var(--s4);
}

.g-detail__head .g-badge {
  margin-bottom: var(--s2);
}

.g-detail__head .g-title {
  margin-bottom: var(--s2);
}

/* B69: scoped — the shell owns the global .g-meta; this is coda's tighter variant. */
.g-coda .g-meta {
  margin: 0;
  font-size: var(--fs-12);
}

.g-queue__level,
.g-detail__autonomy {
  margin-top: var(--s1);
  color: var(--verde);
  font-size: var(--fs-13);
  font-weight: 600;
}

.g-draft {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-card);
  padding: var(--s4);
  margin: var(--s4) 0 0;
}

/* The detail is readable in three layers: decision, provenance, audit. */
.g-coda-block {
  margin-top: var(--s5);
}

.g-coda-block--decisione {
  margin-top: var(--s4);
}

.g-coda-block--provenienza,
.g-coda-block--audit {
  padding-top: var(--s4);
  border-top: 1px solid var(--bordo);
}

.g-coda-block > .g-section {
  margin-top: 0;
}

.g-coda-block--provenienza .g-citazioni {
  margin-top: var(--s3);
}

.g-draft .g-section {
  margin-top: 0;
}

/* L'altra metà di ciò che la firma autorizza (ADR-0055): l'impegno prima della prosa, con
   un bordo che lo stacca dalla mail senza fargli reclamare più attenzione di quella. Nessun
   colore di stato: non è un esito, è un fatto. */
.g-evento {
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--bordo);
  border-radius: var(--r-card);
  background: var(--foglio-2);
}

.g-evento .g-section {
  margin-top: 0;
}

.g-allegati {
  margin-top: var(--s4);
}

.g-allegati-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.g-allegato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--foglio);
  border: 1px solid var(--bordo);
  border-radius: var(--r-control);
  font-size: var(--fs-13);
}

.g-allegato-meta {
  flex: 1 1 12rem;
  min-width: 0;
  word-break: break-word;
}

.g-corpo {
  white-space: pre-wrap;
  /* Long unbroken tokens (hashes, refs) must not blow the width, at any width: a 700px
     column overflows on a 90-character IBAN as surely as a phone does. */
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: var(--fs-15);
  line-height: 1.5;
  background: var(--foglio);
  border: 1px solid var(--bordo);
  border-radius: var(--r-control);
  padding: var(--s3) var(--s4);
  margin: 0;
}

.g-origine:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s3) 0 0;
}

.g-origine .g-linkback {
  margin: 0;
}

.g-controlli {
  margin-top: var(--s5);
}

.g-controlli ul,
#detail-controlli {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--ink);
  font-size: var(--fs-13);
}

.g-controlli li {
  margin-bottom: var(--s1);
}

/* Empty queue must occupy the column — a short S14 looked like a blank page. */
.g-coda #queue-empty:not([hidden]) {
  min-height: 14rem;
}

/* Signing actions: sticky foot on phone so the pen stays under the thumb */
.g-coda .g-actions {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--bordo);
}

/* S08 dialog extras */
.g-dialog__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s1) var(--s3);
}

.g-dialog__summary dt {
  grid-column: 1;
}

.g-dialog__summary dd {
  grid-column: 2;
}

/* .g-badge--firma full tint and .g-btn--esci live in ui.css (shared chrome). */

/* —— Phone / 375px signing surface (S13 · A-17) —— */
@media (max-width: 640px) {
  .g-draft {
    padding: var(--s3);
  }

  .g-corpo {
    padding: var(--s3);
  }

  /* S08 in one column: at 375px the mono uppercase labels took the width and left the values
     about 100px. Same terms, same order, same words (ADR-0040/0058) — only the layout. */
  .g-dialog__summary {
    grid-template-columns: 1fr;
  }

  .g-dialog__summary dd {
    grid-column: 1;
  }


  /*
   * Signing actions stay reachable above the home indicator while reading the draft.
   * Sticky only on the detail panel so the queue list is not cluttered.
   */
  .g-coda .g-actions {
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: calc(-1 * var(--s4));
    padding: var(--s3) 0;
    padding-bottom: max(var(--s3), env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--foglio) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--bordo);
    z-index: 5;
    /* Firma is the act and takes its row; the secondary acts share the next one. Stacked
       one per row they made a 173px bar over the draft being signed. */
    flex-direction: row;
    flex-wrap: wrap;
  }

  .g-allegato .g-btn,
  .g-corpo,
  .g-draft {
    scroll-margin-bottom: 6rem;
  }

  .g-coda .g-actions .g-btn {
    flex: 1 1 calc(50% - var(--s1));
  }

  .g-coda .g-actions .g-btn--timbro {
    flex-basis: 100%;
  }
}

/* —— In ingresso (ADR-0059) —— */
.g-ingresso {
  margin-bottom: var(--s5);
}

/* Wrap, never squeeze: without it the three buttons shared one line and broke their labels
   over three lines each — «Processa e aggiungi in rubrica» at 92px tall. */
.g-ingresso__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Why nothing is being drafted yet (ADR-0062 Am. 1 §4): a fact under the meta line,
   like triage, never a control. */
.g-ingresso__attesa {
  margin-top: var(--s1);
}

/* Triage labels (ADR-0060): advice under the meta line, never a control. */
.g-ingresso__triage {
  margin-top: var(--s1);
}

.g-ingresso__sintesi {
  font-style: italic;
}

@media (max-width: 640px) {
  /* The generic rule hides the third column ("Apri" hint); here it holds the
     decision buttons, which are the whole point of the row. */
  .g-queue__item.g-ingresso__item > :nth-child(3) {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* On the phone the decision buttons stack full width, like every other action group. */
  .g-ingresso__actions {
    flex-direction: column;
    align-items: stretch;
  }
}