/* ============================================================
   Prompt Engineering deck: chat mock-ups and slide layouts.
   Engine, theme, mascot and shared layouts live in assets/css
   (course.css holds the cards, notes, tables, quiz and howto styles).
   ============================================================ */

/* ---------- chat mock-up (always light, like a screenshot) ---------- */
.chat{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:#f4f4f6;border:1px solid #dcdce3;border-radius:16px;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:400;font-size:15px;line-height:1.4;color:#1f1f27;box-shadow:0 10px 30px rgba(29,39,66,.12);text-align:left}
.chat.sm{font-size:14px;gap:8px;padding:12px 14px}
.chat.xs{font-size:13px;gap:6px;padding:10px 12px;line-height:1.3}
.chat.xs .msg .b{padding:6px 10px}
.chat.xs .msg .av{width:26px;height:26px;font-size:10px}
.chat-top{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b6b78;border-bottom:1px solid #e3e3e9;padding-bottom:8px;margin-bottom:2px}
.chat-top i{width:9px;height:9px;border-radius:50%;background:#ff5f57;box-shadow:14px 0 0 #febc2e,28px 0 0 #28c840;margin-right:28px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg.user{flex-direction:row-reverse}
.msg .av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:#8b7cff}
.msg.user .av{background:#009aff}
.msg .b{max-width:88%;padding:9px 13px;border-radius:14px;background:#fff;border:1px solid #e4e4ea}
.msg.user .b{background:#e6f2ff;border-color:#c9e2ff;border-radius:14px 14px 4px 14px;font-family:ui-monospace,Consolas,"Cascadia Code",Menlo,monospace;font-size:.93em}
.msg.ai .b{border-radius:14px 14px 14px 4px}
.msg .b p{margin:0;color:#1f1f27}
.msg .b p + p{margin-top:6px}
.msg .b b{color:#1f1f27}
.msg .b ul,.msg .b ol{margin:4px 0 0 18px;padding:0}
.msg .b li{margin:2px 0}
.msg .b h4{font-size:1em;margin:6px 0 2px;color:#1f1f27}
.msg .b table{border-collapse:collapse;margin-top:4px;font-size:.92em}
.msg .b th,.msg .b td{border:1px solid #d9d9e0;padding:3px 8px;text-align:left}
.msg .b th{background:#f0f0f5}
.msg .b .q{display:block;padding:2px 0 2px 10px;border-left:3px solid #8b7cff;margin:3px 0}
.typing{display:inline-flex;gap:4px;padding:6px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:#9a9aa8;animation:ty 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes ty{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat .ghost{opacity:.45}
/* coloured parts of a prompt */
.k{border-radius:5px;padding:0 4px;font-weight:700}
.k-role{background:#ffe1c9;color:#9a3c00} .k-task{background:#d6ebff;color:#004c8c} .k-ctx{background:#e8e3ff;color:#4b36c4}
.k-fmt{background:#d7f5ec;color:#0b6b52} .k-con{background:#ffd9e1;color:#a4123a} .k-ex{background:#fff1b8;color:#7a5a00} .k-it{background:#e3e3ea;color:#3a3a48}
.klegend{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:10px;font-family:var(--display);font-weight:700;font-size:14px}
.klegend .k{font-size:13px}

/* ---------- layouts ---------- */
.pe-demo{flex:1;min-height:0;display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:start;margin-top:14px}
.pe-demo .chat,.pe-two .chat,.vs .chat{max-height:440px;overflow:hidden}
.pe-demo.w{grid-template-columns:1fr 480px} .pe-demo.n{grid-template-columns:1fr 360px}
.pe-demo.rev{grid-template-columns:420px 1fr}
.pe-two{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:14px}
.pe-two .chat{height:100%}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px;align-items:start}
.vs h3{font-size:22px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.vs h3 .tag{display:inline-block;font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:2px 10px;border-radius:var(--r-pill);background:var(--coral)}
.vs h3 .tag.good{background:var(--mint)}

/* prompt structure strip */
.structure{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:ui-monospace,Consolas,Menlo,monospace;font-weight:700;font-size:19px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:10px 16px;margin-top:10px}
.structure .slot{color:var(--muted);font-weight:600}
.structure .fixed{color:var(--cta-deep)} [data-theme="dark"] .structure .fixed{color:var(--cta)}
.structure.sm{font-size:16px;padding:8px 12px}

/* the seven building blocks */
.blocks{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:20px}
.blk{--c:var(--brand);position:relative;background:var(--surface);border:2px solid var(--line);border-top:6px solid var(--c);border-radius:16px;padding:22px 10px 12px;text-align:center}
.blk i{position:absolute;top:-16px;left:50%;margin-left:-14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:800;font-size:14px;color:#fff;background:var(--c)}
.blk b{display:block;font-family:var(--display);font-size:16px;line-height:1.15}
.blk span{display:block;font-size:12.5px;color:var(--muted);font-weight:700;line-height:1.25;margin-top:4px}
.blk.c1{--c:var(--brand)} .blk.c2{--c:var(--violet)} .blk.c3{--c:var(--mint)} .blk.c4{--c:var(--coral)} .blk.c5{--c:var(--cta)} .blk.c6{--c:var(--sun)} .blk.c7{--c:var(--xg)}

/* assembling a prompt piece by piece */
.assemble{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:baseline;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:19px;line-height:1.5;background:#e6f2ff;border:1px solid #c9e2ff;border-radius:16px;padding:16px 20px;min-height:150px;color:#1f1f27;font-weight:500}
.assemble .k{font-weight:700}
.assemble [data-step]:not(.is-shown){display:none}

/* roadmap for three parts */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.parts div{--c:var(--brand);position:relative;background:var(--surface);border:2px solid var(--line);border-top:7px solid var(--c);border-radius:20px;padding:26px 18px 16px}
.parts div:nth-child(2){--c:var(--violet)} .parts div:nth-child(3){--c:var(--cta)}
.parts i{position:absolute;top:-20px;left:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:800;font-size:18px;color:#fff;background:var(--c)}
.parts b{display:block;font-family:var(--display);font-size:24px}
.parts ul{list-style:none;margin-top:8px}
.parts li{position:relative;padding:3px 0 3px 18px;font-size:15.5px;color:var(--ink-soft);line-height:1.3}
.parts li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--c)}

/* practice slide */
.ex-list{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:16px}
.exc{--c:var(--brand);position:relative;display:flex;flex-direction:column;gap:6px;padding:26px 14px 14px;border-top:6px solid var(--c)}
.exc.c2{--c:var(--violet)} .exc.c3{--c:var(--mint)} .exc.c4{--c:var(--cta)} .exc.c5{--c:var(--coral)}
.exc .n{position:absolute;top:-20px;left:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-family:var(--display);font-weight:800;font-size:19px;box-shadow:var(--shadow-sm)}
.exc h3{font-size:19px;line-height:1.15}
.exc p{font-size:14.5px;line-height:1.3}
.exc .use{margin-top:auto;font-size:12.5px;font-weight:800;color:var(--muted)}
.exc .use b{color:var(--c)}
.dl-row{display:flex;gap:12px;align-items:center;margin-top:14px}

/* title / end */
.title-art .chat{position:absolute;left:0;top:60px;width:330px;transform:rotate(-5deg);z-index:2}
.title-art .mavi-xl{z-index:3;margin-left:200px;margin-top:120px}
.author{margin-top:12px;font-size:17px;color:var(--ink-soft)}
.author b{color:var(--ink)}
.author a{color:var(--brand);font-weight:800;text-decoration:none}
.end-contact{margin-top:12px;font-size:18px;line-height:1.5}
.end-contact a{color:var(--brand);font-weight:800;text-decoration:none}
.cheat .tbl td:nth-child(2){font-family:ui-monospace,Consolas,Menlo,monospace;font-size:14px}

/* typing dots vanish when the answer arrives */
.slide.at-2 .ty[data-step="1"],.slide.at-3 .ty[data-step="2"],.slide.at-4 .ty[data-step="3"],.slide.at-5 .ty[data-step="4"],.slide.at-6 .ty[data-step="5"],.slide.at-7 .ty[data-step="6"],.slide.at-8 .ty[data-step="7"],.slide.at-9 .ty[data-step="8"],.slide.at-10 .ty[data-step="9"],.slide.at-11 .ty[data-step="10"],.slide.at-12 .ty[data-step="11"],.slide.at-13 .ty[data-step="12"]{display:none}