/* "Comece por aqui" no Meu dia (app/comece.js) */
.tzcm { margin-bottom: 16px; padding: 16px 18px; border: 1px solid #b6cdf5; border-radius: var(--tz-r-md); background: linear-gradient(135deg, var(--blue2), var(--surface)); }
.tzcm header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tzcm h3 { margin: 0 0 3px; font-size: 16px; }
.tzcm p { margin: 0; color: var(--muted); font-size: 12.5px; }
.tzcm-x { border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tzcm-x:hover { color: var(--ink); }
.tzcm-bar { height: 6px; margin: 12px 0; border-radius: 999px; background: #ffffff99; overflow: hidden; }
.tzcm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue); transition: width .3s; }
.tzcm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 8px; }
.tzcm-step { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--surface); }
.tzcm-step > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tzcm-step b { font-size: 13px; }
.tzcm-step small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.tzcm-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--blue2); color: var(--blue); font-size: 12px; font-weight: 800; }
.tzcm-step.ok { opacity: .65; }
.tzcm-step.ok .tzcm-n { background: #16a34a; color: #fff; }
.tzcm-step.ok b { text-decoration: line-through; }
body[data-theme="graphite"] .tzcm { border-color: #34486a; background: linear-gradient(135deg, #1b2740, var(--surface)); }
body[data-theme="graphite"] .tzcm-bar { background: #ffffff1c; }
@media (max-width: 760px) { .tzcm-steps { grid-template-columns: 1fr; } .tzcm-step small { display: none; } }

.tzcm-fold { padding: 9px 18px; }
.tzcm-fold p, .tzcm-fold .tzcm-bar, .tzcm-fold .tzcm-steps { display: none; }
.tzcm-fold h3 { margin: 0; font-size: 14px; }
.tzcm-next { display: none; margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--muted); }
.tzcm-fold .tzcm-next { display: inline; }
.tzcm header > div:last-child, .tzcm header { align-items: center; }

.tzcm-toggle { margin-left: auto; }
@media (max-width: 760px) { .tzcm-fold .tzcm-next { display: block; margin: 2px 0 0; } }