/* Scene 5: Robo gets a job. Loaded after scene.css; reuses the badge-card, checks-list
   and logbook patterns from the other scenes. */

.scene-head q { font-style: italic; }
.small { font-size: .9rem; color: var(--muted); margin: 8px 0 0; }

/* Act 1 */
.badge-card { margin-top: 16px; border: 2px solid var(--green); border-radius: 14px; padding: 14px 16px; background: var(--surface); animation: rise .35s ease-out; }
.badge-card.bad { border-color: var(--accent); }
.badge-head { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.checks-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks-list li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.checks-list small { display: block; color: var(--muted); font-size: .82rem; }
.mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.bad .mark { background: var(--accent-soft); color: var(--accent); }
.agent-card { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.agent-face { font-size: 2rem; }
.agent-card div { display: grid; gap: 2px; }
.agent-card span { font-size: .88rem; color: var(--muted); }
.agent-card code { justify-self: start; font-size: .72rem; }

/* Act 2: consent screen and vault */
.consent { max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.08); display: grid; gap: 8px; }
.consent-head { font-weight: 800; font-size: 1.05rem; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.consent p { margin: 0; }
.consent .build-row .btn-small { margin-top: 4px; }
.vault { margin-top: 16px; background: var(--screen); color: #e8eef5; border-radius: 14px; padding: 14px 16px; animation: rise .35s ease-out; }
.vault-title { font-weight: 700; margin: 0 0 10px; }
.vault-title code, .vault code { background: rgba(255,255,255,.12); color: inherit; }
.vault-row { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; font-size: .9rem; }
.v-k { color: #9fb2c6; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.v-off { color: #ffb4a3; }
.vault .small { color: #b8c6d4; }

/* Act 4: activity log (same look as the locked-box logbook) */
.logbook { margin-top: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.logbook-title { font-weight: 700; font-size: .85rem; margin: 0 0 6px; }
.logbook ol { list-style: none; margin: 0; padding: 0; font: .8rem ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 160px; overflow-y: auto; }
.logbook li { display: grid; grid-template-columns: 70px 150px 1fr; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--border); animation: rise .3s ease-out; }
@media (max-width: 560px) { .logbook li { grid-template-columns: 1fr; gap: 0; } }
.logbook li.ok span:last-child { color: var(--green); }
.logbook li.bad span:last-child { color: var(--accent); }
.logbook li.empty { display: block; color: var(--muted); border: 0; font-family: inherit; }

/* Go a level deeper: Robo's homes and the neighbors at the front desk */
.home-facts { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: .9rem; animation: rise .35s ease-out; }
.home-facts th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 8px; width: 40%; border-bottom: 1px dashed var(--border); vertical-align: top; }
.home-facts td { padding: 6px 8px; border-bottom: 1px dashed var(--border); }
.threat { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.threat p { margin: 0 0 6px; }
.threat .verdict { margin-top: 10px; }
.threat-title { font-weight: 700; }
.where { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-left: 6px; }
.note-card { margin: 14px 0 10px; background: var(--screen); color: #e8eef5; border-radius: 14px; padding: 14px 16px; animation: rise .35s ease-out; }
.note-head { font-weight: 700; margin: 0 0 10px; }
.note-card code { background: rgba(255,255,255,.12); color: inherit; }
.note-row { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: .9rem; }
.note-row .v-k code { font-size: .7rem; text-transform: none; letter-spacing: 0; }
.step-label { font-weight: 700; margin: 16px 0 8px; }
@media (max-width: 420px) { .note-row { grid-template-columns: 96px 1fr; } }