body { font-family: -apple-system, Helvetica, Arial, sans-serif; margin: 0; background: #f5f5f7; color: #1a1a1a; }
.banner { background: #7a1f1f; color: #fff; padding: 12px 20px; font-size: 13px; line-height: 1.5; }
.banner code { background: rgba(255,255,255,0.15); padding: 1px 5px; border-radius: 3px; }
main { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
.journey { grid-column: 1; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 16px; align-self: start; }
.journey ol { padding-left: 20px; font-size: 13px; line-height: 1.6; }
.panels { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 14px; }
.panel h3 { margin-top: 0; font-size: 14px; }
.panel form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.panel input, .panel select { flex: 1 1 auto; min-width: 90px; padding: 5px 7px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; }
.panel button { padding: 5px 10px; border: none; background: #2a5d34; color: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; }
.records { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; }
.record { padding: 5px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; cursor: pointer; background: #fafafa; }
.record:hover { background: #eef4ee; }
.badge { float: right; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #ddd; }
.empty { font-size: 12px; color: #888; padding: 6px; }
.inspector, .log { grid-column: 1 / -1; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 14px; margin-top: 6px; }
.inspector pre { background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 12px; max-height: 300px; }
.hint { font-size: 12px; color: #666; }
#activity-log { max-height: 180px; overflow-y: auto; font-family: monospace; font-size: 12px; }
.log-ok { color: #1a6b1a; }
.log-error { color: #b02020; }

/* Milestone 219L (ADR-0022): real per-user session bar, replacing the
   old self-declared actorRole model's lack of any identity display. */
.auth-bar { background: #fff; border-bottom: 1px solid #ddd; padding: 8px 20px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.auth-bar button { padding: 4px 10px; border: none; background: #2a5d34; color: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; }
.auth-form { display: flex; align-items: center; gap: 6px; }
.auth-form input { padding: 4px 7px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; }

/* Mobile-responsive pass: these admin/engineering pages predate the
   terracore.css shell and use their own simple two-column grid (main /
   .panels). Additive-only media query -- collapses to a single column and
   makes touch targets/tables usable below 900px; nothing above the
   breakpoint changes. */
@media (max-width: 900px) {
    main { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
    .journey, .panels { grid-column: 1; }
    .panels { grid-template-columns: 1fr; }
    .inspector, .log { grid-column: 1; }
    .panel form { gap: 8px; }
    .panel input, .panel select { padding: 9px 10px; font-size: 16px; min-width: 0; flex: 1 1 100%; }
    .panel button { padding: 10px 14px; font-size: 13px; }
    .auth-bar { flex-wrap: wrap; padding: 8px 12px; }
    .auth-form { flex-wrap: wrap; }
    .banner { font-size: 12.5px; padding: 10px 14px; }
}