/* Access pages: layout only, tokens only. OWNER: foundation-auth; shell-design may restyle. */
@layer module {
  .acc-login { inline-size: min(100%, 26rem); display: grid; gap: .8rem; }
  .acc-login.acc-setup { inline-size: min(100%, 38rem); }
  .acc-brand { display: grid; gap: .3rem; }
  .acc-logo { max-block-size: 2.5rem; inline-size: auto; }
  .acc-wide { inline-size: 100%; justify-content: center; }
  .acc-sso { display: grid; gap: .5rem; }
  .acc-dev { border-block-start: 1px solid var(--line); padding-block-start: .8rem; }
  .acc-foot { font-size: .9em; }
  .acc-small { font-size: .9em; }
  .acc-head { display: grid; gap: .4rem; margin-block-end: 1rem; }
  .acc-back { margin: 0; }
  .acc-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
  .acc-block { margin-block-end: 1rem; }
  .acc-grid { display: grid; gap: .2rem 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  /* screentest B: permissions in aligned columns (were one ragged flowing line) */
  .acc-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-2) var(--space-5); }
  .acc-checks > label, .acc-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); line-height: 1.25rem; }
  .acc-checks .check, .acc-check .check { margin-block-start: 0.125rem; flex: none; }
  .acc-check { margin-block: var(--space-2); }
  .acc-inline { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
  /* screentest B: tables use the kit .table in .table-wrap; inside a card the wrap needs no second frame */
  .acc-tablewrap { overflow-x: auto; max-inline-size: 100%; }
  .acc-tablewrap > .table { inline-size: 100%; }
  /* screentest R5: same scroll affordance as the kit .table-wrap (edge shadow where columns are
     hidden) and readable columns on phones (the roles and people tables squeezed to one word per line) */
  .acc-tablewrap {
    --wrap-bg: var(--surface-raised);
    --edge-shadow: light-dark(oklch(0.3 0.02 260 / 0.16), oklch(0 0 0 / 0.55));
    background:
      linear-gradient(to right, var(--wrap-bg) 40%, transparent) left / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--wrap-bg) 40%, transparent) right / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--edge-shadow), transparent) left / 0.875rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--edge-shadow), transparent) right / 0.875rem 100% no-repeat scroll;
  }
  @media (width < 48rem) { .acc-tablewrap > .table:not([data-cards]):has(> thead > tr > :nth-child(4)) { min-inline-size: max(100%, 34rem); } }
  .acc-list { display: grid; gap: .3rem; padding-inline-start: 1.1rem; }
  .acc-perms { border: 0; border-block-start: 1px solid var(--line-soft); border-radius: 0; padding: var(--space-4) 0 var(--space-2); margin: 0; }
  .acc-perms > legend { float: left; inline-size: 100%; padding: 0; margin-block-end: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
  .acc-perms > legend + * { clear: both; }
  .acc-sensitive { font-weight: var(--weight-medium); }
  .acc-totp { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
  /* screentest R2: setup page as two clear steps; QR code on a white tile next to the text */
  .acc-totp > div { flex: 1 1 14rem; min-inline-size: 0; display: grid; gap: var(--space-2); }
  .acc-totp > div > p { margin: 0; text-align: start; }
  .acc-totp > img { flex: none; background: #fff; padding: .5rem; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); }
  .acc-setup fieldset { border: 0; margin: 0; padding: var(--space-4) 0 0; border-block-start: 1px solid var(--line); display: grid; gap: var(--space-3); min-inline-size: 0; }
  .acc-setup fieldset > legend { float: left; inline-size: 100%; padding: 0; font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
  .acc-setup fieldset > legend + * { clear: both; }
  .acc-setup .hint { margin: 0; }
  .acc-secret { word-break: break-all; }
  .acc-code code { font-size: 1.4em; letter-spacing: .08em; user-select: all; }
  /* screentest R2: the one-time code as a quiet tile; the done button at its natural width */
  .acc-once { max-inline-size: 44rem; }
  .acc-once .acc-code { margin: 0; justify-self: start; align-self: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
  .acc-once > .btn { justify-self: start; align-self: flex-start; inline-size: auto; }
  .acc-codes { columns: 2; font-size: 1.05em; }
  .acc-codes code { user-select: all; }
  .acc-avatar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .acc-avatar img, .acc-initial { inline-size: 6rem; block-size: 6rem; border-radius: 50%; }
  .acc-initial { display: grid; place-items: center; background: var(--surface-2); font-size: 2.2rem; font-weight: 600; }
  .acc-msg:empty { display: none; }
  /* a refused create keeps the form; the reason sits above it (screentest R3) */
  .acc-refused { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--crit, #c0392b); background: color-mix(in srgb, var(--crit, #c0392b) 10%, transparent); }
  .acc-ip { inline-size: min(100%, 16rem); }
}