/* ===================================================================
   WRITING GUIDES — tutorial components folded into /writing/toolkit
   These style the .wgd-* content that 22-writing-guides.js injects as
   .wtk-sec blocks inside the Toolkit page. Section chrome (hero, shell,
   sub-nav, facts, reveal) is owned by 26-writing-toolkit.css.
   =================================================================== */

.wgd-body{ min-width:0; }

@keyframes wgdPop{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none;} }

/* =========================== METHOD STEPS =========================== */
.wgd-steps{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.wgd-step{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:18px 20px; border-radius:18px; border:1px solid var(--card-border);
  background:var(--card-bg-soft); backdrop-filter:blur(6px); position:relative; overflow:hidden;
  animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 60ms);
}
.wgd-step::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--cyan), var(--violet)); }
.wgd-step-num{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex-shrink:0;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:18px; color:var(--on-lime);
  background:linear-gradient(135deg, var(--cyan), var(--violet)); box-shadow:0 6px 16px -8px var(--ring-cyan);
}
.wgd-step-body h3{ font-size:16.5px; font-weight:800; margin-bottom:6px; letter-spacing:-.01em; }
.wgd-step-body p{ font-size:14px; color:var(--muted); line-height:1.6; }
.wgd-step-tip{
  margin-top:10px; font-size:13px; line-height:1.5; color:var(--text); display:flex; gap:7px;
  padding:9px 12px; border-radius:11px; background:color-mix(in srgb, var(--lime) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--lime) 24%, transparent);
}
.wgd-step-tip span{ flex-shrink:0; }

/* =========================== WORKED EXAMPLE =========================== */
.wgd-prompt{
  padding:16px 18px; border-radius:16px; margin-bottom:18px;
  border:1px solid var(--card-border); border-left:3px solid var(--violet);
  background:color-mix(in srgb, var(--violet) 7%, var(--card-bg-soft));
}
.wgd-prompt-tag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--violet); margin-bottom:7px; }
.wgd-prompt-q{ font-size:15.5px; font-weight:700; color:var(--text); line-height:1.55; }
.wgd-prompt-note{ margin-top:9px; font-size:12.5px; color:var(--muted); line-height:1.5; display:flex; gap:6px; }
.wgd-prompt-note span{ flex-shrink:0; }

/* the visual (chart / anatomy) sits between the prompt and the model */
.wgd-visual{
  margin:0 0 18px; padding:18px 18px 14px; border-radius:18px;
  border:1px solid var(--card-border); background:var(--card-bg-soft); backdrop-filter:blur(6px);
}
.wgd-visual figcaption{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:10px; font-style:italic; }

/* ---- animated grouped bar chart ---- */
.wgd-chart{ width:100%; max-width:560px; height:auto; display:block; margin:0 auto; }
.wgd-grid{ stroke:var(--hairline); stroke-width:1; }
.wgd-axisline{ stroke:var(--card-border); stroke-width:1.5; }
.wgd-axis, .wgd-cat, .wgd-legtx{ fill:var(--muted); font-size:11px; font-weight:600; font-family:'Hanken Grotesk', 'Native Emoji', sans-serif; }
.wgd-cat{ font-weight:700; }
.wgd-bval{ fill:var(--text); font-size:11px; font-weight:800; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; }
.wgd-bar-a, .wgd-sw-a{ fill:color-mix(in srgb, var(--violet) 70%, transparent); }
.wgd-bar-b, .wgd-sw-b{ fill:var(--cyan); }
.wgd-bar{ transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); }
.wgd-bval{ opacity:0; }
.wtk-sec.wtk-in .wgd-bar{ animation:wgdBarGrow .8s cubic-bezier(.2,.85,.3,1) forwards; animation-delay:var(--d,0ms); }
.wtk-sec.wtk-in .wgd-bval{ animation:wgdValIn .45s ease forwards; animation-delay:var(--d,0ms); }
@keyframes wgdBarGrow{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
@keyframes wgdValIn{ from{ opacity:0;} to{ opacity:1;} }

/* ---- essay-anatomy diagram ---- */
.wgd-anat{ display:flex; flex-direction:column; gap:10px; }
.wgd-anat-block{
  position:relative; border:1px solid var(--card-border); border-left:3px solid var(--tone);
  border-radius:14px; padding:12px 15px; background:var(--card-bg-soft);
}
.wtk-sec.wtk-in .wgd-anat-block{ animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 100ms); }
.wgd-anat-block:not(:last-child)::after{
  content:''; position:absolute; left:26px; bottom:-10px; width:2px; height:10px; background:var(--tone); opacity:.5;
}
.wgd-anat-tag{ font-weight:800; font-size:13.5px; color:var(--tone); margin-bottom:8px; }
.wgd-anat-parts{ display:flex; flex-wrap:wrap; gap:7px; }
.wgd-anat-chip{
  font-size:12px; font-weight:600; color:var(--text); padding:5px 11px; border-radius:99px;
  background:color-mix(in srgb, var(--tone) 12%, transparent); border:1px solid color-mix(in srgb, var(--tone) 26%, transparent);
}

/* ---- the annotated model sentences ---- */
.wgd-worked{ display:flex; flex-direction:column; gap:14px; }
.wgd-wpart{
  border:1px solid var(--card-border); border-radius:16px; overflow:hidden;
  background:var(--card-bg-soft); backdrop-filter:blur(6px);
  animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 70ms);
}
.wgd-wpart-label{
  padding:9px 16px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cyan); background:color-mix(in srgb, var(--cyan) 9%, transparent); border-bottom:1px solid var(--hairline);
}
.wgd-wmodel{ position:relative; padding:15px 16px; }
.wgd-wmodel p{ font-size:15px; line-height:1.65; color:var(--text); padding-right:34px; }
.wgd-copy{
  position:absolute; top:12px; right:12px; appearance:none; cursor:pointer;
  width:28px; height:28px; border-radius:8px; border:1px solid var(--card-border); background:var(--chip-bg);
  color:var(--muted); font-size:13px; display:grid; place-items:center; transition:.15s;
}
.wgd-copy:hover{ color:var(--text); background:var(--chip-bg-hover); transform:translateY(-1px); }
.wgd-copy.wgd-copy-ok{ color:#34d399; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.12); }
.wgd-why{ padding:11px 16px 14px; font-size:13px; color:var(--muted); line-height:1.55; border-top:1px dashed var(--hairline); }
.wgd-why-tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--lime); margin-right:6px; }

/* =========================== CARD GRIDS (playbook / decode / ideas) =========================== */
.wgd-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.wgd-cards-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:760px){ .wgd-cards-2{ grid-template-columns:1fr; } }
.wgd-card{
  padding:16px 17px; border-radius:16px; border:1px solid var(--card-border);
  background:var(--card-bg-soft); backdrop-filter:blur(6px); border-top:2px solid var(--tone,var(--violet));
  animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 45ms);
}
.wgd-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.wgd-card-ic{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px; flex-shrink:0;
  background:color-mix(in srgb, var(--tone) 20%, transparent); border:1px solid color-mix(in srgb, var(--tone) 38%, transparent);
}
.wgd-glyph{ color:var(--tone); }
.wgd-glyph svg{ width:20px; height:20px; display:block; }
.wgd-card-head h3{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; }
.wgd-card-note{ margin-top:11px; font-size:12.5px; color:var(--muted); line-height:1.5; display:flex; gap:6px; padding-top:10px; border-top:1px solid var(--hairline); }
.wgd-card-note span{ flex-shrink:0; }

.wgd-play-dl, .wgd-decode-dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; }
.wgd-play-dl dt, .wgd-decode-dl dt{
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--tone,var(--violet));
  padding-top:2px; white-space:nowrap;
}
.wgd-play-dl dd, .wgd-decode-dl dd{ font-size:13px; color:var(--text); opacity:.92; line-height:1.5; }

.wgd-decode-rec{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:12px; display:flex; gap:6px; padding:8px 11px; border-radius:10px; background:var(--chip-bg); }
.wgd-decode-rec span{ flex-shrink:0; }
.wgd-decode-trap{
  margin-top:12px; font-size:12.5px; color:var(--text); opacity:.95; line-height:1.5; padding:9px 12px; border-radius:11px;
  background:color-mix(in srgb, #f87171 10%, transparent); border:1px solid color-mix(in srgb, #f87171 26%, transparent);
}
.wgd-trap-tag{ display:block; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#f87171; margin-bottom:3px; }

.wgd-idea-how{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.wgd-idea-ex{
  margin-top:11px; font-size:13px; color:var(--text); line-height:1.55; font-style:italic; padding:9px 12px; border-radius:11px;
  background:var(--chip-bg); border-left:2px solid color-mix(in srgb, var(--tone) 55%, transparent);
}
.wgd-ex-tag{ font-style:normal; font-weight:800; color:var(--tone,var(--violet)); margin-right:5px; font-size:12px; }

/* =========================== PEEL ENGINE =========================== */
.wgd-peel{ display:flex; flex-direction:column; gap:10px; }
.wgd-peel-row{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:stretch;
  padding:14px 16px; border-radius:16px; border:1px solid var(--card-border); background:var(--card-bg-soft);
  animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 60ms);
}
.wgd-peel-key{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex-shrink:0;
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:20px; color:var(--on-lime);
  background:linear-gradient(135deg, var(--lime), var(--cyan));
}
.wgd-peel-top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.wgd-peel-top h3{ font-size:15px; font-weight:800; }
.wgd-peel-top span{ font-size:12.5px; color:var(--muted); }
.wgd-peel-ex{ font-size:14px; color:var(--text); line-height:1.55; font-style:italic; }
.wgd-peel-note{ margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.55; }

/* =========================== TIMELINE =========================== */
.wgd-timeline{ position:relative; display:flex; flex-direction:column; gap:2px; padding-left:4px; }
.wgd-tl-item{
  display:grid; grid-template-columns:64px 24px 1fr; align-items:start; gap:8px; padding:10px 0;
  animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 55ms);
}
.wgd-tl-time{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:16px; color:var(--text); text-align:right; line-height:1.15; }
.wgd-tl-time small{ display:block; font-size:10px; font-weight:700; color:var(--muted); }
.wgd-tl-dot{ position:relative; width:24px; display:flex; justify-content:center; }
.wgd-tl-dot::before{ content:''; width:12px; height:12px; border-radius:50%; margin-top:4px; background:var(--cyan); box-shadow:0 0 0 4px color-mix(in srgb, var(--cyan) 22%, transparent); }
.wgd-tl-dot::after{ content:''; position:absolute; top:18px; bottom:-14px; width:2px; background:var(--hairline); }
.wgd-tl-item:last-child .wgd-tl-dot::after{ display:none; }
.wgd-tl-body h3{ font-size:14.5px; font-weight:800; }
.wgd-tl-body p{ font-size:13px; color:var(--muted); line-height:1.5; margin-top:2px; }

/* =========================== MISTAKES =========================== */
.wgd-mistakes{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:760px){ .wgd-mistakes{ grid-template-columns:1fr; } }
.wgd-mistake{
  border:1px solid var(--card-border); border-radius:16px; overflow:hidden; background:var(--card-bg-soft);
  animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 45ms);
}
.wgd-mis-x, .wgd-mis-f{ padding:13px 15px; font-size:13.5px; line-height:1.5; color:var(--text); }
.wgd-mis-x{ background:color-mix(in srgb, #f87171 8%, transparent); border-bottom:1px solid var(--hairline); }
.wgd-mis-f{ color:var(--muted); }
.wgd-mis-tag{ display:block; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px; }
.wgd-mis-bad{ color:#f87171; }
.wgd-mis-fix{ color:#34d399; }

/* =========================== BAND LADDER =========================== */
.wgd-ladder{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:680px){ .wgd-ladder{ grid-template-columns:1fr; } }
.wgd-rung{
  padding:18px 18px 16px; border-radius:16px; border:1px solid var(--card-border); background:var(--card-bg-soft);
  animation:wgdPop .5s both cubic-bezier(.2,.8,.3,1); animation-delay:calc(var(--i) * 70ms);
}
.wgd-rung-jump{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.wgd-rung-from, .wgd-rung-to{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:16px;
}
.wgd-rung-from{ color:var(--muted); background:var(--chip-bg); border:1px solid var(--card-border); }
.wgd-rung-to{ color:var(--on-lime); background:linear-gradient(135deg, var(--lime), var(--cyan)); }
.wgd-rung-arrow{ color:var(--muted); font-weight:800; font-size:16px; }
.wgd-rung p{ font-size:13.5px; color:var(--text); opacity:.92; line-height:1.55; }

/* =========================== FAQ / TIPS ACCORDION =========================== */
.wgd-faq{ display:flex; flex-direction:column; gap:10px; }
.wgd-faq-item{ border:1px solid var(--card-border); border-radius:14px; overflow:hidden; background:var(--card-bg-soft); }
.wgd-faq-q{
  width:100%; appearance:none; cursor:pointer; border:0; background:transparent; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font:inherit; font-weight:700; font-size:14.5px; color:var(--text); padding:15px 17px;
}
.wgd-faq-q:hover{ color:var(--cyan); }
.wgd-faq-caret{ font-size:18px; color:var(--muted); flex-shrink:0; transition:transform .25s, color .2s; line-height:1; }
.wgd-faq-item.open .wgd-faq-caret{ transform:rotate(45deg); color:var(--cyan); }
.wgd-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.wgd-faq-item.open .wgd-faq-a{ max-height:340px; }
.wgd-faq-a p{ padding:0 17px 16px; font-size:13.5px; color:var(--muted); line-height:1.6; }

/* =========================== RESPONSIVE + MOTION =========================== */
@media (max-width:560px){
  .wgd-step{ grid-template-columns:1fr; gap:10px; }
  .wgd-cards{ grid-template-columns:1fr; }
}
/* `auto 1fr` + `white-space:nowrap` turns the term column into a hard ~100px
   ("EXAMINER WANTS"), which is a third of a 316px phone-width card — the
   definition, which is the actual content, was left ~200px. Stack the term
   over its definition below 480. */
@media (max-width:480px){
  .wgd-play-dl, .wgd-decode-dl{ grid-template-columns:1fr; gap:3px; }
  .wgd-play-dl dt, .wgd-decode-dl dt{ padding-top:0; }
  .wgd-play-dl dt:not(:first-child),
  .wgd-decode-dl dt:not(:first-child){ margin-top:9px; }
}
/* The shared touch layer (31-responsive-global.css) grows .wgd-copy from 28px
   to 38px, which pulls its left edge to exactly where the model sentence ends
   — the text and the button touch with 0px between them. Widen the gutter the
   paragraph reserves for it by the same 10px. */
@media (pointer:coarse), (max-width:900px){
  .wgd-wmodel p{ padding-right:46px; }
}
@media (prefers-reduced-motion: reduce){
  .wgd-step, .wgd-card, .wgd-wpart, .wgd-tl-item, .wgd-mistake, .wgd-rung, .wgd-peel-row,
  .wtk-sec.wtk-in .wgd-anat-block{ animation:none !important; }
  .wgd-bar{ transform:none; }
  .wgd-bval{ opacity:1; }
  .wtk-sec.wtk-in .wgd-bar, .wtk-sec.wtk-in .wgd-bval{ animation:none; }
}

/* light-mode nudges */
:root[data-theme="light"] .wgd-wpart-label{ background:#e0f5fa; }
:root[data-theme="light"] .wgd-decode-rec{ background:rgba(15,23,42,.05); }