/* =============================================================================
   areas/messages.css: Viesti asukkaille, Tarkista viesti and Lähetetyt viestit
   (spec E15, WP7). Also the mail preview card used on the fault pages.
   ========================================================================== */
@layer areas {

/* ---------------------------------------------------------------- mail preview */
.msg-mail {
  border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  background: var(--color-surface); padding: var(--space-4); max-width: 40rem;
}
.msg-mail--large { padding: var(--space-5); box-shadow: var(--shadow-card); }
.msg-mail__to { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.msg-mail__subject { margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); font-weight: var(--weight-bold); font-size: var(--text-md); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.msg-mail__body { line-height: var(--leading-body); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- compose */
.msg-recipients { margin-bottom: var(--space-5); }
.msg-recipients .choices__list { max-width: 40rem; }
.msg-recipients__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 0; color: var(--color-text-muted); }
.msg-recipients__note .icon { margin-top: .15em; }

.msg-apartments { border: 0; padding: 0; margin: var(--space-4) 0 0; min-width: 0; }
.msg-apartments__legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.msg-apartments__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-2); }
.msg-apt {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); padding: var(--space-2) var(--space-3);
  border: var(--border-w-control) solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface); cursor: pointer;
}
.msg-apt input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; accent-color: var(--color-action); }
.msg-apt:has(input:checked) { border: 2px solid var(--color-action); padding: calc(var(--space-2) - .5px) calc(var(--space-3) - .5px); background: var(--color-surface-selected); }
.msg-apt:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.msg-apt__num { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.msg-apt__names { font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.msg-apt--none { cursor: default; border-style: dashed; background: var(--color-surface-sunken); }
/* The list is shown for "Tietyille huoneistoille"; browsers without :has() always show it. */
.msg-apartments { display: none; }
.msg-recipients:has(input[name="recipients"][value="some"]:checked) .msg-apartments { display: block; }
.msg-recipients:has(.msg-apartments .field__error) .msg-apartments { display: block; }
@supports not selector(:has(a)) { .msg-apartments { display: block; } }

.msg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.msg-chips__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.msg-chips__chip { font-size: var(--text-sm); }
.msg-chips__chip .icon { width: 1rem; height: 1rem; }
.msg-compose textarea { min-height: 14rem; }
.msg-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); max-width: var(--measure); }
.msg-note .icon { margin-top: .2em; }

/* ---------------------------------------------------------------- review */
.msg-who > summary { cursor: pointer; min-height: var(--control-h-min); display: inline-flex; align-items: center; font-weight: var(--weight-semibold); color: var(--color-link); text-decoration: underline; text-underline-offset: .18em; }
.msg-who__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); max-width: 40rem; }
.msg-who__list li { overflow-wrap: anywhere; }
.msg-who__num { display: inline-block; min-width: 3.5rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.msg-send { margin-top: var(--space-6); display: grid; gap: var(--space-4); justify-items: start; }
.msg-send__secondary { margin-top: 0; }
.msg-send__secondary form { display: contents; }

/* ---------------------------------------------------------------- history */
.msg-history__warn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.msg-history__search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0 0 var(--space-5); }
.msg-history__search .field { margin: 0; flex: 1 1 16rem; }
.msg-history__kind { display: block; font-weight: var(--weight-semibold); }
.msg-history__subject { display: block; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.msg-history__email { display: block; font-size: var(--text-sm); overflow-wrap: break-word; }
.msg-history__pages { margin-top: var(--space-4); }
.msg-history .pill { white-space: nowrap; }
/* Phone cards: everything a cell holds sits in the value column, so the
   subject and the address never land in the narrow label column. */
@container table (max-width: 40rem) {
  .msg-history td[data-label] > * { grid-column: 2; min-width: 0; justify-self: start; }
}

}