/*
 * A-29 / D-24 Assign training (shared by the Admin console and the Director's Site training):
 * "Who gets this training" card — the Sites, Job roles and Specific people groups, each with a
 * switch and a token picker (a Site-owned training shows its Site locked; the console's Sites add
 * "Who at these Sites", whose "Directors only" turns Job roles off) — the due date and
 * version, and the Preview card (live count, avatars, a line per group, skipped people,
 * "Assign to N people", and the list of people behind each of them, §13.3).
 */
@layer pages {
  .tcms-assign {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;
    align-items: start;
  }

  .tcms-assign__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  /* Groups ------------------------------------------------------------------------------------ */
  .tcms-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: var(--radius-row);
    background: var(--color-bg);
  }

  .tcms-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  /* The design's 22px checkbox: blue with a white tick when the group is on. */
  .tcms-group__check {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    border: 2px solid var(--color-neutral-500);
    border-radius: 7px;
    background: transparent center / 14px 14px no-repeat;
    appearance: none;
    cursor: pointer;
  }
  .tcms-group__check:checked {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
  .tcms-group__check:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-blue); }

  .tcms-group__text { display: flex; flex-direction: column; gap: 2px; }
  .tcms-group__title { font-size: 15px; font-weight: 700; }
  .tcms-group__hint { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.45; }

  .tcms-group__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tcms-group__body[hidden] { display: none; }
  .tcms-group.is-off .tcms-group__title { color: var(--color-neutral-700); }

  /* The Job roles group is a fieldset: "Directors only" disables it (as a disabled radio card). */
  fieldset.tcms-group { min-inline-size: 0; margin: 0; border: 0; }
  .tcms-group:disabled .tcms-group__head { cursor: not-allowed; }
  .tcms-group__check:disabled { opacity: 0.6; cursor: not-allowed; }

  /* Who at these Sites (Capstone's training): the A-07 radio cards under the Sites picker. Three
     choices (change request 3) stack, each title with its hint on one line where it fits. */
  .tcms-audience {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .tcms-audience .choices { flex-direction: column; gap: 8px; }
  .tcms-audience .choice { padding: 13px 18px; }
  .tcms-audience .choice__text {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
  }

  /* Token pickers inside a group: 48px field, tokens on the surface tone (A-29). */
  .tcms-assign .token-field {
    min-height: 48px;
    padding: 6.5px 10px;
    border-radius: 24px;
  }
  .tcms-assign .token {
    padding: 0 6px 0 12px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13.5px;
  }
  .tcms-assign .token__remove { color: var(--color-neutral-700); font-size: 14px; }
  .tcms-assign .token__remove:hover { background: var(--color-btn-hover); color: var(--color-text); }
  .tcms-assign .token-input { padding: 0 6px; }

  /* The people list: 320px, a heading ("All Sites" / the Site) and a person icon per option;
     40px options 2px apart. */
  .tcms-people .token-options {
    right: auto;
    left: 0;
    width: min(320px, 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tcms-people .token-options[data-heading]::before {
    content: attr(data-heading);
    display: block;
    padding: 8px 12px 4px;
    color: var(--color-neutral-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .tcms-people .token-option { flex: none; min-height: 40px; }
  /* The app's "user" icon (app/assets/icons/hub-icons.json), drawn as a mask in the text color. */
  .tcms-people .token-option::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Due date and version ---------------------------------------------------------------------- */
  .tcms-assign__when { margin-top: 4px; }

  /* Due date: "Oct 30, 2026" over the native field, which shows while it has focus. */
  .tcms-date__value {
    position: absolute;
    left: 45.5px;
    right: 18px;
    overflow: hidden;
    color: var(--color-text);
    font-size: 14.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }
  .tcms-date__value.is-empty { color: var(--color-neutral-700); }
  .tcms-date:not(:focus-within) .tcms-date__input::-webkit-datetime-edit { opacity: 0; }
  .tcms-date:focus-within .tcms-date__value { display: none; }
  .tcms-date__input { cursor: pointer; }
  .tcms-date .input-wrap__icon { color: var(--color-text); font-size: 17px; }

  /* Preview ----------------------------------------------------------------------------------- */
  .tcms-assign__preview { display: block; min-width: 0; }

  .tcms-overline {
    margin: 0;
    color: var(--color-neutral-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .tcms-preview-card__count {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .tcms-preview-card__number {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.55;
  }
  .tcms-preview-card__unit { font-size: 15px; font-weight: 700; }
  .tcms-preview-card .avatar { width: 30px; height: 30px; font-size: 12.5px; }
  .tcms-preview-card__empty { color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }
  .tcms-preview-card .kv__label { min-width: 0; }
  .tcms-preview-card .kv__value { flex: none; }

  /*
   * While the preview frame reloads, its numbers are stale: dim the card and the phone sheet, and
   * keep the stale "Assign to N people" buttons (aria-disabled by m7-assign) gold but inert.
   */
  .tcms-assign__preview[aria-busy="true"] .tcms-preview-card,
  .app:has(.tcms-assign__preview[aria-busy="true"]) .tcms-assign-sheet {
    opacity: 0.6;
    transition: opacity 120ms ease;
  }
  .tcms-assign .btn--primary.is-stale[aria-disabled="true"],
  .tcms-assign-sheet .btn--primary.is-stale[aria-disabled="true"] {
    background: var(--color-primary);
    color: var(--color-on-primary);
    pointer-events: none;
  }

  .tcms-assign-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /*
   * Who each Preview number counts (change request 3, §13.3). The total (count and avatars), each
   * line that counts someone and the skipped notice's title are buttons for a list of those people:
   * a popover with the menu panel's look (bg, radius 22px, --shadow-lg, 8px padding, the menu-in
   * entrance) and the people picker's rows (avatar, name, a secondary line). m7-who places it
   * beside the Preview card, level with its line (under or over the line in one column;
   * data-placement) through --tcms-who-top / --tcms-who-left and caps its height with
   * --tcms-who-room; a long list scrolls. On phones the popover fills the screen as the scrim and
   * its panel is a bottom sheet with a close button.
   */
  .tcms-who-lines {
    padding: 0;
    list-style: none;
  }
  .tcms-who-lines__item { border-top: 1px solid var(--color-hairline); }
  .tcms-who-lines .kv__row { border-top: 0; }

  /* A line: the kv row's height, with a rounded highlight a little wider than the row. */
  .tcms-who__line {
    width: calc(100% + 20px);
    margin: 3px -10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: inherit;
    text-align: left;
    transition: background-color var(--motion-fast) var(--ease-standard);
  }
  .tcms-who__line:hover,
  .tcms-who__line[aria-expanded="true"] { background: var(--color-btn-hover); }
  .tcms-who__line:hover .kv__label,
  .tcms-who__line[aria-expanded="true"] .kv__label { color: var(--color-text); }
  .tcms-who__line:focus-visible { outline-offset: 0; }

  /* The total: "26 people will be assigned" and the avatars. */
  .tcms-who__total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: calc(100% + 20px);
    margin: -6px -10px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-row);
    background: none;
    color: inherit;
    text-align: left;
    transition: background-color var(--motion-fast) var(--ease-standard);
  }
  .tcms-who__total:hover,
  .tcms-who__total[aria-expanded="true"] {
    --tcms-who-ring: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
    background: var(--tcms-who-ring);
  }
  .tcms-who__total:is(:hover, [aria-expanded="true"]) .avatar-stack .avatar { box-shadow: 0 0 0 2.5px var(--tcms-who-ring); }

  /* The skipped notice's title, and the phone sheet's count: text with a dotted underline. */
  .tcms-who__link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: underline dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }
  .tcms-who__link:hover,
  .tcms-who__link[aria-expanded="true"] { text-decoration-style: solid; }
  /* A 44px tap target that keeps the sheet's line height. */
  .tcms-who__link--sheet {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }

  /* The list: hidden until it opens (and where the browser has no popovers). */
  .tcms-who__pop {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    overflow: visible;
  }
  .tcms-who__pop:popover-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: auto;
    top: var(--tcms-who-top, 50%);
    left: var(--tcms-who-left, 50%);
    width: min(320px, calc(100vw - 24px));
    max-height: min(420px, var(--tcms-who-room, 420px));
    animation: menu-in var(--motion-base) var(--ease-standard);
  }
  .tcms-who__pop[data-placement="above"]:popover-open { animation-name: menu-up-in; }

  .tcms-who__panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: var(--radius-row);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
  }

  .tcms-who__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 4px;
  }
  .tcms-who__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--color-neutral-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .tcms-who__count {
    flex: none;
    color: var(--color-neutral-700);
    font-size: 12.5px;
    font-weight: 700;
  }
  .tcms-who__close { display: none; }

  .tcms-who__list {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 344px; /* seven rows and half of the next, which shows that it scrolls */
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px;
  }
  .tcms-who__list:focus-visible { outline-offset: -2px; }

  .tcms-who__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 12px;
    font-size: 14px;
  }
  .tcms-who__person .avatar { width: 32px; height: 32px; font-size: 11.5px; }
  .tcms-who__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .tcms-who__name { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
  .tcms-who__meta { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.35; }
  .tcms-who__more {
    margin: 0;
    padding: 6px 12px 4px;
    color: var(--color-neutral-700);
    font-size: 12.5px;
  }

  /* 1024–1199: a 320px preview column; the due date and the version each take the card's width. */
  @media (min-width: 1024px) and (max-width: 1199px) {
    .tcms-assign { grid-template-columns: minmax(0, 1fr) 320px; }
    .tcms-assign .form-grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 1023px) {
    .tcms-assign { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 767px) {
    .tcms-assign__main.card--lg { padding: 20px 16px; }
    .tcms-group { padding: 16px; }
    .tcms-group__head { min-height: 44px; }

    /* The list as a bottom sheet: the popover is the scrim (a tap on it closes the list, and
       reaches nothing under it); its panel rises from the bottom edge. */
    .tcms-who__pop:popover-open {
      inset: 0;
      width: 100%;
      height: 100%;
      max-height: none;
      justify-content: flex-end;
      background: var(--scrim);
      animation: backdrop-in var(--motion-base) var(--ease-standard);
    }
    .tcms-who__pop:popover-open .tcms-who__panel {
      flex: 0 1 auto;
      max-height: 85dvh;
      padding: 14px 10px max(22px, env(safe-area-inset-bottom));
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      box-shadow: var(--shadow-sheet);
      animation: dialog-sheet-in var(--motion-base) var(--ease-standard);
    }
    .tcms-who__head { padding: 0 4px 8px 12px; }
    .tcms-who__title {
      color: var(--color-text);
      font-size: 16px;
      letter-spacing: 0;
      text-transform: none;
    }
    .tcms-who__close { display: grid; }
    .tcms-who__list { flex: 1 1 auto; max-height: none; }
  }
}