/* tutorial.css — extra rules on top of the product's own app.css (copied
   verbatim from app/admin_web/assets/app.css) so the guide feels like the
   same product without touching the original stylesheet. */

.tut-topbar{height:70px;background:linear-gradient(90deg,var(--purple-950),var(--purple-800));
  display:flex;align-items:center;gap:18px;padding:0 26px;color:#fff;position:sticky;top:0;
  z-index:50;box-shadow:0 2px 12px rgba(22,12,58,.2)}
.tut-topbar .brand{background:#fff;border-radius:14px;padding:6px 14px;display:flex;
  align-items:center;min-width:170px;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.tut-topbar .brand img{height:40px;max-width:160px;object-fit:contain}
.tut-topbar .tut-title{font-weight:800;font-size:16px;color:#f2edff}
.tut-topbar .tut-title small{display:block;font-weight:400;color:#d9d1ee;font-size:12px}
.tut-topbar .tut-home{margin-inline-start:auto}

.tut-crumbs{color:var(--muted);font-size:13.5px;margin:0 0 6px}
.tut-crumbs a{color:var(--purple-700);font-weight:700}
.tut-crumbs a:hover{text-decoration:underline}

.tut-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tut-hero .page-symbol{width:64px;height:64px;font-size:30px}
.tut-hero h1{margin:0 0 6px}
.tut-hero p{margin:0;color:var(--muted);max-width:60ch}

/* step list — a numbered flow, reuses the product's circular-number look
   from the lesson-activity tile (.activity .num) at a task level instead */
.step-list{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.step{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--purple-700);color:#fff;
  display:grid;place-items:center;font-weight:800;flex:none}
.step h3{margin:2px 0 6px;font-size:17px}
.step p{margin:0 0 6px;color:#31344b}
.step .hint{color:var(--muted);font-size:13px;margin:4px 0 0}

/* "coming soon" callout — a real, plainly-flagged gap, not a fiction */
.tut-soon{border:1px solid #f1d9a6;background:#fffaf0;border-radius:14px;padding:14px 16px;
  margin:10px 0}
.tut-soon .tut-soon-tag{display:inline-flex;align-items:center;gap:6px;background:#fff4d9;
  color:#9a650e;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;
  margin-bottom:6px}
.tut-soon p{margin:6px 0 0}

/* critical-order callout — the two "do this BEFORE that" rules that
   silently produce an empty year if broken (calendar before sessions,
   holidays before sessions). Deliberately louder than .tut-behind. */
.tut-key{border:1px solid #b7f1ce;background:#f2fdf6;border-radius:14px;padding:14px 16px;
  margin:10px 0;border-inline-start:5px solid var(--green-500)}
.tut-key .tut-key-tag{display:inline-flex;align-items:center;gap:6px;background:var(--green-100);
  color:var(--green-700);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;
  margin-bottom:6px}
.tut-key p{margin:6px 0 0}

/* prerequisite checklist */
.tut-check{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.tut-check li{display:flex;gap:9px;align-items:flex-start;font-size:14px}
.tut-check li:before{content:"☐";color:var(--purple-700);font-weight:800;font-size:16px;
  line-height:1.2}

/* behind-the-scenes aside — reuses .summary-box's look, labeled */
.tut-behind{margin:10px 0}
.tut-behind h4{margin:0 0 6px;color:var(--purple-800);font-size:13px}

/* screen-label chip: shows the exact real button/screen name being described */
.tut-screen{display:inline-flex;align-items:center;gap:6px;background:var(--purple-100);
  color:var(--purple-800);border-radius:8px;padding:3px 9px;font-size:12.5px;font-weight:700;
  font-family:inherit}

.flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.flow-card{padding:18px;border:1px solid #e0e4ed;background:#fff;border-radius:15px;
  box-shadow:0 6px 20px rgba(34,25,90,.06);display:flex;flex-direction:column;gap:8px}
.flow-card:hover{border-color:#ad96da;transform:translateY(-2px)}
.flow-card .flow-num{width:34px;height:34px;border-radius:10px;background:var(--green-100);
  color:var(--green-700);display:grid;place-items:center;font-weight:800}
.flow-card.featured{grid-column:span 2;background:linear-gradient(135deg,#faf7ff,#fff)}
.flow-card h3{margin:0;font-size:17px}
.flow-card p{margin:0;color:var(--muted);font-size:13.5px}

.tut-pagenav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}

.role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.role-card h3{margin:0 0 8px;display:flex;align-items:center;gap:8px}
.role-card ul{margin:0;padding-inline-start:18px;font-size:13.5px;color:#31344b}
.role-card li{margin:4px 0}
.role-card .no{color:var(--danger);font-weight:700}
.role-card .yes{color:var(--green-700);font-weight:700}

footer.tut-footer{max-width:1600px;margin:30px auto 10px;padding:0 28px 20px;color:var(--muted);
  font-size:12.5px;text-align:center}

@media(max-width:1100px){.flow-grid{grid-template-columns:repeat(2,1fr)}
  .flow-card.featured{grid-column:span 2}.role-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.flow-grid{grid-template-columns:1fr}.flow-card.featured{grid-column:span 1}
  .role-grid{grid-template-columns:1fr}.tut-topbar{padding:0 12px}.step{grid-template-columns:32px 1fr}}
@media print{.tut-topbar,.tut-pagenav,.no-print{display:none!important}}