/* ==========================================================================
   MGT2E DATAPAD — Comms and the group manager
   Comms (code/comms.js): incoming-comm notifications, the message window, the composer, the Communications lists.
   The group manager (code/group.js): the Referee's window for the group's accounts.
   The message window and the composer reuse the sign-in card's terminal look (login.css); the lists reuse the
   activity log's box (components.css).
   Layers, bottom to top: rulebook reader (701) · activity log, Trash, group manager (800) · comm windows (810) ·
   comm notifications (820) · sign-in (900) · on-screen keyboard (960).
   ========================================================================== */

@layer components {

  /* ---------- Unread count: operator button and its menu ---------- */
  .operator-btn__unread,
  .user-menu__count {
    display: inline-block;
    min-width: 1.6em;
    margin-left: 8px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    line-height: 1.3;
    text-align: center;
    color: var(--c-void);
    background: var(--c-orange);
    box-shadow: var(--glow-orange);
  }

  .user-menu__count {
    float: right;
  }

  /* ---------- Notifications ---------- */
  /* Top right, under the top bar. Each is a button that opens its message. */
  .comm-notes {
    position: fixed;
    top: calc(var(--topbar-h) + var(--safe-top) + 12px);
    right: calc(var(--safe-right) + 12px);
    z-index: 820;
    width: min(340px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* The Communications list shows the same unread comms, so the notifications make way for it. Over the activity log,
     the Trash and the group manager they sit under the box's header bar, leaving its close button free. */
  body:has(.comm-list) .comm-notes {
    display: none;
  }

  body:has(> .activity) .comm-notes {
    top: calc(50vh - min(360px, 50vh - var(--pad)) + var(--bar-h) + 8px);
  }

  .comm-note {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    text-align: left;
    font: inherit;
    color: var(--c-text);
    background: var(--surface-raised);
    border: 1px solid var(--c-orange);
    box-shadow: var(--shadow-drop), var(--glow-orange), inset 2px 0 0 var(--c-orange);
    cursor: pointer;
    animation: comm-note-in 0.3s var(--ease) both;
  }

  .comm-note:hover,
  .comm-note:focus-visible {
    background: var(--surface-solid);
    outline: 1px solid var(--c-ice);
    outline-offset: 2px;
  }

  /* Corner tick, as on the sign-in card */
  .comm-note::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border: 0 solid var(--c-ice);
    border-width: 2px 2px 0 0;
  }

  .comm-note__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-orange);
  }

  .comm-note__from {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .comm-note__subject {
    font-size: var(--fs-md);
    color: var(--c-ice-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .comm-note--more {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-orange);
    box-shadow: var(--shadow-drop), inset 2px 0 0 var(--c-orange);
  }

  .comm-note--more::after {
    display: none;
  }

  @keyframes comm-note-in {
    from { opacity: 0; transform: translateX(24px); }
  }

  /* ---------- Windows ---------- */
  .comm-overlay {
    position: fixed;
    inset: 0;
    z-index: 810;
    display: grid;
    place-items: center;
    padding: var(--pad);
    background: var(--scrim);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    overflow-y: auto;
  }

  /* Touch screens: sits higher, leaving room for the on-screen keyboard (as the sign-in does) */
  @media (pointer: coarse) {
    .comm-overlay:has(.comm-compose) {
      place-items: start center;
    }
  }

  /* The message window and the composer: the sign-in card's look, wider */
  .comm-card {
    position: relative;         /* holds its confirmation and the folder picker */
    width: min(620px, 100%);
    max-height: 100%;
    min-height: min(440px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 24px 20px;
    background: var(--surface-raised);
    border-color: var(--glass-border-hi);
    box-shadow: var(--shadow-drop), inset 2px 0 0 var(--c-orange);
  }

  .comm-card::before,
  .comm-card::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0 solid var(--c-ice);
    pointer-events: none;
  }

  .comm-card::before { top: -1px;    right: -1px; border-width: 2px 2px 0 0; }
  .comm-card::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

  .comm-card__brand {
    min-width: 0;
  }

  .comm-card__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--c-ice-bright);
    overflow-wrap: anywhere;
  }

  .comm-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--c-ice-dim);
    overflow-wrap: anywhere;
  }

  .comm-card__meta span:first-child {
    color: var(--c-ice-bright);
  }

  /* The message itself: plain text, line breaks kept */
  .comm-card__body {
    flex: 1;
    min-height: 96px;
    padding: 12px 14px;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--well);
    border: 1px solid var(--glass-border);
    user-select: text;
  }

  .comm-card__body:focus-visible {
    outline: 1px solid var(--c-ice);
  }

  .comm-card__status {
    min-height: 1.2em;
  }

  .comm-card__actions {
    display: flex;
    gap: 8px;
  }

  .comm-card__actions .btn {
    flex: 1;
    height: 42px;
  }

  /* Share: the folder-with-arrow icon, always with its words */
  .comm-card__share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .comm-card__share svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Who has read a sent comm */
  .comm-card__readers {
    max-height: 132px;
    overflow-y: auto;
    list-style: none;
    font-size: var(--fs-sm);
    border-top: 1px solid var(--glass-border);
  }

  .comm-card__readers li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--line-faint);
    color: var(--c-text-muted);
  }

  .comm-card__readers .mono {
    font-size: var(--fs-xs);
  }

  .comm-card__readers li.is-read {
    color: var(--c-text);
  }

  .comm-card__readers li.is-read .mono {
    color: var(--c-green);
  }

  /* ---------- Folder picker (Share to Database) ---------- */
  .comm-pick .row {
    list-style: none;
  }

  .comm-pick__fold {
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 30px;
    color: var(--c-text-muted);
    background: none;
    border: none;
  }

  .comm-pick__fold svg,
  .comm-pick__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur) var(--ease);
  }

  .comm-pick__fold.is-closed svg {
    transform: rotate(-90deg);
  }

  .comm-pick__icon {
    display: grid;
    color: var(--c-ice-dim);
  }

  .comm-pick__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--glass-border);
  }

  .comm-pick__foot .status {
    flex: 1;
    min-width: 0;
  }

  .comm-pick__foot .btn {
    flex: 0 0 auto;
    height: 42px;
    border-color: var(--c-orange);
    color: var(--c-orange);
  }

  /* ---------- Composer ---------- */
  .comm-compose {
    width: min(680px, 100%);
  }

  .comm-compose .login__field .input {
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
  }

  .comm-compose .login__field .input::placeholder {
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .comm-compose__text {
    flex: 1;
    min-height: 0;
  }

  .comm-compose textarea.input {
    flex: 1;
    height: auto;
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: none;
  }

  .comm-to {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 8px 12px 10px;
    border: 1px solid var(--glass-border);
  }

  .comm-to legend {
    padding: 0 6px;
  }

  .comm-to__players {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    max-height: 96px;
    overflow-y: auto;
  }

  .comm-to__opt,
  .group__check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
  }

  .comm-to__opt input,
  .group__check input {
    width: 16px;
    height: 16px;
    accent-color: var(--c-orange);
  }

  .comm-to__opt:has(input:disabled) {
    color: var(--c-text-muted);
    cursor: default;
  }

  /* ---------- Communications lists ---------- */
  .comm-list {
    position: relative;         /* holds its confirmation */
  }

  .activity__head.comm-row,
  .activity__row.comm-row {
    grid-template-columns: 128px 150px minmax(0, 1fr) 170px 72px;
    align-items: center;
  }

  /* A player's list: unread mark, received, from, subject, remove */
  .comm-list:not(:has(.comm-tabs)) .comm-row {
    grid-template-columns: 14px 128px 170px minmax(0, 1fr) auto;
  }

  .activity__row.comm-row {
    min-height: 44px;
    cursor: pointer;
  }

  .activity__row.comm-row:hover,
  .activity__row.comm-row:focus-visible {
    background: var(--wash-hover);
    outline: none;
  }

  .activity__row.comm-row:focus-visible {
    box-shadow: inset 0 0 0 1px var(--c-ice);
  }

  .comm-row.is-unread .activity__item,
  .comm-row.is-unread .activity__who {
    color: var(--c-ice-bright);
    font-weight: 600;
  }

  .comm-row__mark {
    display: grid;
    place-items: center;
  }

  .comm-tabs {
    display: flex;
    gap: 6px;
  }

  .comm-tabs .btn,
  .comm-list__new {
    flex: 0 0 auto;
  }

  .comm-list__new {
    border-color: var(--c-orange);
    color: var(--c-orange);
  }

  /* ---------- Group manager ---------- */
  .group__title,
  .group__add {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
  }

  .group__title-name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-md);
    letter-spacing: 0.08em;
    color: var(--c-ice-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .group__title .btn,
  .group__add .btn {
    flex: 0 0 auto;
    height: var(--control-h);
  }

  .group__add .input {
    flex: 1;
    height: var(--control-h);
  }

  .group__add .caps {
    flex: 0 0 auto;
  }

  .activity__head.group__row,
  .activity__row.group__row {
    grid-template-columns: minmax(0, 1fr) 150px 96px 440px;   /* a fixed last column, so the heads sit over the rows */
    align-items: center;
  }

  .group__row .trash__actions {
    justify-content: flex-end;
    min-width: 0;
  }

  .group__row .trash__actions .input {
    width: 170px;
    height: var(--control-h);
  }

  .group__row .trash__actions .btn {
    height: var(--control-h);
  }

  .group__name {
    display: flex;
    min-width: 0;
  }

  @media (max-width: 900px) {
    /* The activity log hides its fourth column here; these lists keep theirs. */
    .activity__head.comm-row > :nth-child(4),
    .activity__head.group__row > :nth-child(4) {
      display: block;
    }
    .activity__head.comm-row,
    .activity__row.comm-row {
      grid-template-columns: 112px minmax(0, 1fr) 110px 56px;
    }
    .comm-list:has(.comm-tabs) .comm-row > :nth-child(2) {
      display: none;
    }
    .comm-list:not(:has(.comm-tabs)) .comm-row {
      grid-template-columns: 14px 112px 110px minmax(0, 1fr) auto;
    }
    .group__add {
      flex-wrap: wrap;
    }
    .activity__head.group__row,
    .activity__row.group__row {
      grid-template-columns: minmax(0, 1fr) 96px;
    }
    .group__row > :nth-child(2) {
      display: none;
    }
    .group__row .trash__actions {
      grid-column: 1 / -1;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-top: 6px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .comm-note { animation: none; }
  }
}