.task-access-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.task-access-state .task-state { padding: 0; border: 0; color: var(--amber); font-size: 10px; }
.restore-access-button { display: inline-flex; align-items: center; gap: 12px; min-height: 34px; padding: 7px 12px; border: 1px solid var(--amber); border-radius: 4px; background: var(--amber); color: var(--base); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.restore-access-button:hover { background: #ffca72; border-color: #ffca72; }
.restore-access-button::after { content: "→"; }
.access-recovery { margin: 0; padding: 24px 26px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--amber); background: #102534; }
.access-recovery:focus { outline: none; }
.access-recovery:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.access-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.access-eyebrow { color: var(--amber); font: 10px "IBM Plex Mono", monospace; letter-spacing: .12em; }
.access-heading h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.access-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.access-host { max-width: 40%; padding-top: 3px; color: var(--muted); font: 11px "IBM Plex Mono", monospace; overflow-wrap: anywhere; }
.access-steps { counter-reset: access-step; display: grid; grid-template-columns: .85fr 1.25fr .9fr; gap: 28px; margin: 24px 0; padding: 0; list-style: none; }
.access-steps li { position: relative; padding-left: 33px; counter-increment: access-step; }
.access-steps li::before { content: counter(access-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--cyan); font: 11px "IBM Plex Mono", monospace; }
.access-steps strong { display: block; margin: 2px 0 7px; font-size: 12px; font-weight: 600; }
.access-steps p { margin: 0; color: #a2b6c3; font-size: 12px; line-height: 1.7; }
.access-footer { padding-top: 18px; border-top: 1px solid var(--line); }
.access-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.access-actions a, .access-actions button { display: inline-flex; justify-content: center; align-items: center; min-height: 38px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--text); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; }
.access-actions .access-primary { background: var(--cyan); border-color: var(--cyan); color: var(--base); font-weight: 600; }
.access-actions a:hover, .access-actions button:hover { border-color: var(--cyan); }
.access-actions button:disabled { opacity: .6; cursor: wait; }
.access-actions :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.access-feedback { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
@media (max-width: 1100px) { .access-steps { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 620px) {
  .access-recovery { padding: 22px 18px; }
  .access-heading { flex-direction: column; gap: 10px; }
  .access-host { max-width: 100%; }
  .access-actions { align-items: stretch; flex-direction: column; }
}