/* ==========================================================================
   Access — entry surface
   ========================================================================== */

.access { display: flex; flex: 1; }

.access__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  gap: var(--s7);
  align-items: center;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding: var(--s9) var(--s6);
}

.access__aside { display: flex; flex-direction: column; gap: var(--s6); max-width: 620px; }

.access__board { overflow: hidden; }

.access__panel { position: relative; }

.access__form { position: relative; }

.access__message {
  padding: 9px var(--s3);
  font-size: var(--t-small);
  color: var(--ink-800);
  background: color-mix(in oklab, var(--sig-cool) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-cool) 26%, transparent);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.access__message--error {
  color: var(--sig-loss);
  background: var(--loss-dim);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-loss) 30%, transparent);
}

.access__cred {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  width: 100%;
  padding: 6px 9px;
  text-align: left;
  color: var(--ink-700);
  background: color-mix(in oklab, var(--ink-100) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--plate-line) 60%, transparent);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: background var(--m-quick) var(--ease-out), color var(--m-quick) var(--ease-out);
}

.access__cred:hover { background: color-mix(in oklab, var(--sig-brand) 12%, transparent); color: var(--ink-999); }
.access__cred .t-micro { margin-left: auto; }

.access__plan {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 9px var(--s3);
  background: color-mix(in oklab, var(--ink-100) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--plate-line);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

@media (max-width: 1080px) {
  .access__layout { grid-template-columns: 1fr; padding: var(--s7) var(--s4); gap: var(--s6); }
  .access__aside { order: 2; }
}