/*
 * Credentials (docs/PHASE2.md §18.4): Admin A-34 Types, A-35 New/Edit dialog, A-36 Requirements,
 * A-37 Status across Sites; Director D-29 Home card, D-31 record tab, D-32 upload dialog, D-33
 * tracker, D-34 requirements; Employee E-13 My Credentials.
 *   .cred-tabs        Status · All Sites | Types N | Requirements (A-34…A-37)
 *   .cred-tiles       A-37 Expired · Expiring · Missing · % Up to date
 *   .cred-list        tracker rows (A-37 with Site, D-33 without)   .cred-types   A-34 rows
 *   .cred-mine        D-31 / E-13 credential rows                  .cred-matrix  A-36 / D-34 matrix
 *   .cred-card        the surface cards around a matrix and "For specific people"
 *   .cred-dialog      A-35 and D-32 bodies   .cred-team   D-29 "Team credentials"
 */
@layer pages {
  /* --- Shared ---------------------------------------------------------------------------------- */
  .cred-page { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
  .cred-toolbar > *, .cred-toolbar__selects { min-width: 0; max-width: 100%; }

  .cred-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--color-divider);
  }
  .cred-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1.5px;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .cred-tabs__tab:hover { color: var(--color-text); }
  .cred-tabs__tab.is-active {
    border-bottom-color: var(--color-blue);
    color: var(--color-text);
    font-weight: 700;
  }

  .cred-icon {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
  }
  .cred-icon--certificate { background: var(--petal-lic-bg); color: var(--petal-lic-fg); }
  .cred-icon--license { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
  .cred-icon--lg { width: 42px; height: 42px; border-radius: 14px; font-size: 20px; }
  .cred-icon--sm { width: 34px; height: 34px; font-size: 16px; }

  .cred-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .cred-person .avatar { width: 34px; height: 34px; font-size: 12.5px; }
  .cred-person__text { display: flex; flex-direction: column; min-width: 0; }
  .cred-person__name,
  .cred-person__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cred-person__name { font-weight: 700; color: inherit; text-decoration: none; }
  a.cred-person__name:hover { color: inherit; text-decoration: underline; }
  .cred-person__meta { font-size: 12.5px; color: var(--color-neutral-700); }

  .cred-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .cred-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; width: 100%; }
  .cred-actions .btn--ghost { height: 38px; }
  .cred-actions .button-to { display: inline-flex; }

  .cred-note { font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-700); }
  .cred-eyebrow { display: flex; }

  .cred-file {
    color: var(--color-blue-deep);
    font-weight: 700;
    text-decoration: none;
  }
  .cred-file:hover { color: var(--color-blue-deep); text-decoration: underline; }

  /* --- A-37 tiles and D-33 / A-37 toolbar ------------------------------------------------------ */
  .cred-tiles { display: flex; gap: 12px; }
  .cred-tile {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border-radius: 24px;
    background: var(--color-surface);
  }
  .cred-tile__value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .cred-tile__value--err { color: var(--color-err-text); }
  .cred-tile__value--warn { color: var(--color-warn-text); }
  .cred-tile__value--ok { color: var(--color-accent-2-800); }
  .cred-tile__label { font-size: 13.5px; font-weight: 700; }

  .cred-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .cred-toolbar__spacer { flex: 1; }
  .cred-toolbar__selects { display: flex; flex-wrap: wrap; gap: 8px; }

  /* --- Tracker rows ---------------------------------------------------------------------------- */
  /* Actions: Upload, Remind and Edit dates (or Add expiry date and Upload). */
  .cred-list { --list-cols: minmax(0, 1.4fr) minmax(0, 1.3fr) 130px 190px 270px; }
  .cred-list--sites { --list-cols: minmax(0, 1.4fr) 120px minmax(0, 1.3fr) 120px 180px 220px; }
  .cred-list .list-row { min-height: 62px; }
  /* One to three actions per row, from the start of the column so Upload lines up. */
  .cred-list .cred-actions { flex-wrap: wrap; justify-content: flex-start; }
  .cred-list__site,
  .cred-list__type,
  .cred-list__date { min-width: 0; }
  .cred-list__type-text { display: flex; flex-direction: column; min-width: 0; }
  .cred-list__file {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- A-34 types ------------------------------------------------------------------------------ */
  .cred-types { --list-cols: minmax(0, 1.6fr) 120px 130px 170px minmax(0, 1.3fr) 40px; }
  .cred-types .list-row { min-height: 70px; }
  .cred-types__name { display: flex; flex-direction: column; min-width: 0; }
  .cred-types__name b { font-weight: 700; }
  .cred-types__counts { font-size: 12px; color: var(--color-neutral-700); }
  .cred-types__muted { color: var(--color-neutral-700); }
  .cred-types .list-row--archived .cred-icon { opacity: 0.75; }
  .cred-types__menu { display: flex; justify-content: flex-end; }
  .cred-types__menu .icon-btn { width: 34px; height: 34px; background: transparent; }
  .cred-types__menu .icon-btn:hover { background: var(--color-bg); }

  /* --- D-31 / E-13 a person's credentials ------------------------------------------------------- */
  .cred-mine { --list-cols: minmax(0, 1.6fr) 150px 150px 200px 150px; }
  .cred-mine .list-row { min-height: 74px; }
  .cred-mine__name { display: flex; flex-direction: column; min-width: 0; }
  .cred-mine__name b { font-weight: 700; }
  .cred-mine__meta { font-size: 12px; color: var(--color-neutral-700); overflow-wrap: anywhere; }
  .cred-mine__chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .cred-mine__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; }
  /* D-31 and the Admin person page: the upload and Edit dates side by side. */
  .cred-mine--manage { --list-cols: minmax(0, 1.6fr) 130px 130px 200px 250px; }

  /* History: the superseded credentials (D-31, the Admin person page). */
  .cred-history { display: flex; flex-direction: column; gap: 12px; }
  .cred-history__list { --list-cols: minmax(0, 1.5fr) 120px 120px minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr); }
  .cred-history__list .list-row { min-height: 62px; }
  .cred-history__number,
  .cred-history__uploaded { overflow-wrap: anywhere; }
  .cred-history__file { min-width: 0; }
  .cred-history__file .cred-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* The Admin person page's head: avatar, Credentials › name, the access level, job role and Site. */
  .cred-person-head { align-items: center; gap: 18px; }
  .cred-person-head__avatar { flex: none; font-size: 15px; }
  .cred-person-head__text { flex: 1; gap: 8px; }
  .cred-person-head__text > .crumbs { font-weight: 600; }
  .cred-person-head__text > .crumbs a { color: var(--color-blue); }
  /* The requirements naming the person, on the page background rather than in a card. */
  .cred-people--page .cred-person-row { background: var(--color-surface); }
  .cred-person-head__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

  .cred-requirements-head { display: flex; align-items: center; gap: 12px; }
  .cred-requirements-head__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .cred-requirements-head__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

  /* --- A-36 / D-34 matrix ---------------------------------------------------------------------- */
  .cred-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .cred-card__head { display: flex; align-items: center; gap: 12px; }
  .cred-card__title { flex: 1; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

  .cred-matrix { display: flex; flex-direction: column; gap: 4px; }
  /* The credential column, then one 110px column per role (Admins add job roles). */
  .cred-matrix .list-header,
  .cred-matrix .list-row {
    grid-template-columns: minmax(0, 1.5fr);
    grid-auto-columns: 110px;
    grid-auto-flow: column;
  }
  .cred-matrix .list-row {
    min-height: 56px;
    border-radius: 20px;
    background: var(--color-bg);
  }
  .cred-matrix .list-header { align-items: start; }
  .cred-matrix .list-header span { line-height: 1.55; }
  .cred-matrix [role="cell"],
  .cred-matrix .button-to { display: flex; align-items: center; }

  .cred-box {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--color-neutral-400);
    color: #fff;
    font-size: 16px;
  }
  button.cred-box { cursor: pointer; }
  button.cred-box:hover { box-shadow: inset 0 0 0 2px var(--color-neutral-600); }
  button.cred-box:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
  .cred-box.is-on,
  button.cred-box.is-on:hover { background: var(--color-blue); box-shadow: none; }
  .cred-box--locked {
    background: var(--color-neutral-300);
    box-shadow: none;
    color: var(--color-neutral-800);
    font-size: 14px;
  }
  button.cred-box:disabled { cursor: not-allowed; opacity: 0.7; }

  .cred-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--color-neutral-800); }
  .cred-legend__item { display: flex; align-items: center; gap: 6px; }
  .cred-legend__item .icon { font-size: 13px; }
  .cred-legend__swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--color-blue); }

  .cred-extras { display: flex; flex-direction: column; gap: 6px; }
  .cred-extras__title { font-size: 13px; font-weight: 700; }

  .cred-people { display: flex; flex-direction: column; gap: 10px; }
  .cred-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 20px;
    background: var(--color-bg);
  }
  .cred-person-row .avatar { width: 34px; height: 34px; font-size: 12.5px; }
  .cred-person-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .cred-person-row__title { font-size: 14px; font-weight: 700; }
  .cred-person-row__meta { font-size: 12.5px; color: var(--color-neutral-700); }
  .cred-people__empty { font-size: 13.5px; color: var(--color-neutral-700); }

  /* --- A-35 / D-32 dialogs --------------------------------------------------------------------- */
  .cred-form { display: flex; flex-direction: column; gap: 20px; }
  .cred-expires {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--color-surface);
  }
  .cred-expires .switch:has(input:checked) { background: var(--color-accent-2-600); }
  .cred-expires .switch-row__title { font-size: 14px; }
  .cred-expires .switch-row__hint { font-size: 12.5px; }
  .cred-expires__fields[hidden] { display: none; }

  .cred-reminders {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .cred-reminders legend { padding: 0; margin-bottom: 8px; }
  .cred-reminders .field__help { margin-top: 2px; }

  /* A-35 "Required for": the design's surface tokens in a 48px field. */
  .cred-form .token-field { min-height: 48px; padding: 7px 10px; border-radius: 24px; }
  .cred-form .token { padding: 0 6px 0 12px; background: var(--color-surface); color: var(--color-text); font-size: 13.5px; }

  .cred-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .cred-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
  }
  .cred-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .cred-chip .icon { display: none; font-size: 13px; }
  .cred-chip:has(input:checked) { background: var(--color-blue); box-shadow: none; color: #fff; }
  .cred-chip:has(input:checked) .icon { display: flex; }
  .cred-chip:has(input:focus-visible) { outline: 2px solid var(--color-blue); outline-offset: 2px; }
  .cred-chip:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

  .cred-kind { align-self: flex-start; }

  .cred-file-card .file-card__icon { border-radius: 14px; }
  .cred-file-card .file-card__icon.cred-icon--certificate { background: var(--petal-lic-bg); color: var(--petal-lic-fg); }
  .cred-file-card .file-card__icon.cred-icon--license { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
  .cred-upload__drop[hidden],
  .cred-upload__picked[hidden] { display: none; }

  /* The native date field with the design's "Oct 1, 2026" laid over it until it is focused. */
  .cred-date { position: relative; }
  .cred-date__value {
    position: absolute;
    inset: 3px 12px 3px 34px;
    display: flex;
    align-items: center;
    padding-left: 11.5px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-size: 14.5px;
    line-height: 1.5;
    pointer-events: none;
  }
  .cred-date__value.is-empty { color: var(--color-neutral-700); }
  .cred-date .input:focus + .cred-date__value { display: none; }
  .cred-date .input { cursor: pointer; }
  .cred-date .input.is-prefilled { border: 2px solid var(--color-blue); padding-left: 43.5px; }
  .field--error .cred-date .input { padding-left: 43.5px; }

  .cred-preview .notice__title { font-weight: 700; }

  /* --- D-29 Team credentials ------------------------------------------------------------------- */
  .cred-team {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .cred-team__head { display: flex; align-items: center; gap: 10px; }
  .cred-team__bell {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-err-soft);
    color: var(--color-err-text);
    font-size: 18px;
  }
  .cred-team__title { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
  .cred-team__list { display: flex; flex-direction: column; gap: 6px; }
  .cred-team__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
  }
  a.cred-team__item:hover { color: var(--color-text); box-shadow: 0 0 0 2px var(--color-divider); }
  .cred-team__item .avatar { width: 32px; height: 32px; font-size: 12.5px; }
  .cred-team__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .cred-team__name { font-size: 13.5px; font-weight: 700; }
  .cred-team__meta { font-size: 12px; color: var(--color-neutral-700); }
  .home-columns__main { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
  .home-hero__summary { font-size: 16px; color: var(--color-neutral-800); }

  /* --- Laptops and tablets --------------------------------------------------------------------- */
  @media (max-width: 1199px) {
    .cred-list { --list-cols: minmax(0, 1.3fr) minmax(0, 1.1fr) 110px 180px 210px; }
    .cred-list--sites { --list-cols: minmax(0, 1.3fr) 100px minmax(0, 1.1fr) 110px 170px 200px; }
    .cred-list .cred-actions .btn .icon { display: none; }
    .cred-types { --list-cols: minmax(0, 1.5fr) 110px 100px 150px minmax(0, 1fr) 40px; }
    .cred-mine { --list-cols: minmax(0, 1.4fr) 120px 120px 190px 140px; }
    .cred-mine--manage { --list-cols: minmax(0, 1.3fr) 110px 110px 180px 220px; }
    .cred-history__list { --list-cols: minmax(0, 1.4fr) 104px 104px minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr); }
    .cred-matrix .list-header,
    .cred-matrix .list-row { grid-template-columns: minmax(0, 1.3fr); grid-auto-columns: 84px; }
    .cred-tiles { flex-wrap: wrap; }
    .cred-tile { flex: 1 1 calc(50% - 6px); }
  }

  @media (max-width: 1023px) {
    .cred-list--sites { --list-cols: minmax(0, 1.3fr) minmax(0, 1fr) 104px 160px 190px; }
    .cred-list--sites .cred-list__site,
    .cred-list--sites .list-header > :nth-child(2) { display: none; }
    .cred-types { --list-cols: minmax(0, 1.5fr) 100px 100px minmax(0, 1fr) 40px; }
    .cred-mine { --list-cols: minmax(0, 1.4fr) 104px 104px 170px 130px; }
    .cred-mine--manage { --list-cols: minmax(0, 1.2fr) 100px 100px 160px 190px; }
    .cred-list { --list-cols: minmax(0, 1.2fr) minmax(0, 1fr) 104px 160px 190px; }
    .cred-history__list { --list-cols: minmax(0, 1.3fr) 96px 96px minmax(0, 1.1fr) minmax(0, 1fr); }
    .cred-history__number,
    .cred-history__list .list-header > :nth-child(4) { display: none; }
    .cred-types .cred-types__issuer,
    .cred-types .list-header > :nth-child(5) { display: none; }
    .cred-matrix { overflow-x: auto; }
    .cred-matrix .list-header,
    .cred-matrix .list-row { min-width: 640px; }
  }

  /* --- Phones ---------------------------------------------------------------------------------- */
  @media (max-width: 767px) {
    .cred-page { gap: 16px; }
    .cred-tiles { gap: 8px; }
    .cred-tile { padding: 14px 16px; border-radius: 20px; }
    .cred-tile__value { font-size: 26px; }
    .cred-toolbar { flex-direction: column; align-items: stretch; }
    .cred-toolbar__spacer { display: none; }
    .cred-tabs { overflow-x: auto; scrollbar-width: none; }

    .cred-list .list-row,
    .cred-list--sites .list-row,
    .cred-mine .list-row,
    .cred-history__list .list-row,
    .cred-types .list-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      padding: 12px 14px;
    }
    .cred-list .cred-person,
    .cred-mine .cred-mine__lead,
    .cred-types .cred-types__lead { flex: 1 1 100%; }
    .cred-list .cred-list__site { display: none; }
    .cred-list .cred-list__type { flex: 1 1 100%; font-weight: 600; }
    .cred-list .cred-list__date:has(.text-muted) { display: none; }
    .cred-list .cred-list__date::before,
    .cred-mine .cred-mine__date::before { content: attr(data-label) " "; color: var(--color-neutral-700); }
    .cred-list .cred-actions,
    .cred-mine .cred-mine__end { width: auto; margin-left: auto; }
    .cred-mine .cred-mine__date:has(.text-muted) { display: none; }
    .cred-history__list .cred-mine__lead { flex: 1 1 100%; }
    .cred-history__list .cred-mine__date::before,
    .cred-history__number::before { content: attr(data-label) " "; color: var(--color-neutral-700); }
    .cred-history__list .cred-mine__date:has(.text-muted),
    .cred-history__number:has(.text-muted) { display: none; }
    .cred-history__number { display: flex; }
    .cred-history__uploaded { flex: 1 1 100%; font-size: 12.5px; color: var(--color-neutral-700); }
    .cred-history__uploaded::before { content: "Uploaded\00a0"; }
    .cred-person-head { flex-direction: column; align-items: flex-start; }
    .cred-types .cred-types__menu { position: absolute; top: 10px; right: 8px; }
    .cred-types .cred-types__lead { padding-right: 40px; }
    .cred-types .cred-types__issuer { display: none; }

    .cred-card { padding: 18px 16px; border-radius: 24px; }
    /* The matrix keeps its column heads and scrolls sideways inside its card. */
    .cred-matrix .list-header { display: grid; }
    .cred-person-row { flex-wrap: wrap; }
    .cred-requirements-head { flex-direction: column; align-items: flex-start; }
    .cred-team { padding: 18px 16px; }
    .cred-team__title { font-size: 18px; }
  }
}