/* app.css — view transitions, modal, scan log, result cards, role pickers */

.view {
  animation: view-enter 420ms var(--ease-out) both;
}
@keyframes view-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-show-desktop] {
  display: inline-flex !important;
}
@media (max-width: 720px) {
  [data-show-desktop] { display: none !important; }
}

/* ---- Scan log ---- */
#scan-log li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  animation: log-in 320ms var(--ease-out) both;
}
#scan-log li .tick {
  color: var(--color-teal);
  flex: 0 0 auto;
}
@keyframes log-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Result cards ---- */
.result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.result-card .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.result-card .value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-top: var(--space-2);
  color: var(--color-text);
}
.result-card .sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.result-card .approx-tag {
  display:inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-teal);
}

/* ---- Role / app tiles ---- */
.role-tile {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    background var(--transition-interactive);
}
.role-tile:hover {
  border-color: oklch(from var(--color-primary) l c h / 0.5);
  box-shadow: var(--shadow-sm);
}
.role-tile.locked {
  cursor: not-allowed;
  background: var(--color-surface-2);
}
.role-tile input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--color-primary);
}
.role-tile .role-title {
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.role-tile .role-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.role-tile .lock-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-teal);
  border: 1px solid oklch(from var(--color-teal) l c h / 0.4);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  text-transform: uppercase;
}

.app-tile {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    border-color var(--transition-interactive),
    background var(--transition-interactive),
    transform var(--transition-interactive);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.app-tile:hover { transform: translateY(-2px); border-color: oklch(from var(--color-teal) l c h / 0.5); }
.app-tile.selected {
  border-color: var(--color-teal);
  background: var(--color-teal-highlight);
}
.app-tile .app-icon { color: var(--color-teal); }
.app-tile .app-name { font-weight: 600; font-size: var(--text-sm); }
.app-tile .app-desc { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Login modal ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0.1 0.02 280 / 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 90;
}
.modal-backdrop[hidden] {
  display: none;
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.modal-backdrop[data-closing] .modal-panel {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in);
}
.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}
.modal-close:hover { color: var(--color-text); background: var(--color-surface-2); }

/* spinner for submitting state */
.spin {
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }