/* How to Find Angles tab: numbered steps, her examples in tinted boxes, the 28 angle types as cards. */
.ag{display:grid;gap:22px}
.ag-intro{display:grid;gap:14px;padding:18px 20px}
.ag-intro b{font:700 16px/1.3 var(--head)}
.ag-intro p{margin:4px 0 0;max-width:72ch;font-size:13.5px}
.ag-jump{display:flex;flex-wrap:wrap;gap:8px}
.ag-jump button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 13px 6px 6px;font:600 13px/1 var(--body);cursor:pointer;color:var(--ink)}
.ag-jump button span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font:700 11.5px/1 var(--head)}
.ag-jump button:hover{background:var(--tint)}

.ag-step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px 20px;scroll-margin-top:12px;min-width:0}
.ag-step-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin-bottom:16px}
.ag-num{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ink);color:#fff;font:800 17px/1 var(--head)}
.ag-step-h h2{font-size:20px;line-height:1.2;margin:2px 0 0;text-wrap:balance}
.ag-lead{margin:6px 0 0;color:var(--muted);font-size:14.5px;max-width:70ch}
.ag-body{display:grid;gap:14px;min-width:0}
.ag-body p{margin:0}
.ag-sub{font:700 11.5px/1.2 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 -4px}
.ag-ul,.ag-ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;line-height:1.55;max-width:78ch}
.ag-ol{padding-left:0;list-style:none;counter-reset:ag}
.ag-ol li{counter-increment:ag;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.ag-ol li::before{content:counter(ag);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tint-2);color:var(--ink);font:700 12px/1 var(--head);margin-top:1px}
.ag-src{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:18px 0 0;font-size:12px;color:var(--muted)}
.ag-src span{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 9px}

.ag-ex-l{display:block;font:700 10.5px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.ag-ex{background:var(--tint);border-radius:12px;padding:12px 16px;max-width:78ch}
.ag-ex p{font-size:14px;line-height:1.55}
.ag-rule{background:var(--amber-soft);border-left:3px solid var(--amber);border-radius:0 12px 12px 0;padding:11px 16px;max-width:78ch}
.ag-rule b{font:700 13px/1.3 var(--body);color:var(--amber)}
.ag-rule p{font-size:14px;line-height:1.55;margin-top:3px}
.ag-note{font-size:13.5px;color:var(--muted);margin-top:10px !important}

.ag-pairs{display:grid;gap:6px;max-width:900px}
.ag-pair{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr);gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:14px;line-height:1.45}
.ag-arrow{color:var(--ink-3);font-weight:700}
.ag-pair b{color:var(--ink-3)}

/* tables that turn into stacked cards on phones */
.ag-grid{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13.5px;line-height:1.5}
.ag-gr{display:grid;gap:14px;padding:10px 14px;border-top:1px solid var(--line)}
.ag-gr:first-child{border-top:0}
.ag-g3 .ag-gr{grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr) minmax(0,1.5fr)}
.ag-g4 .ag-gr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.1fr)}
.ag-gh{background:var(--bg);font:700 10.5px/1.3 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ag-gr:not(.ag-gh) span:nth-child(2){color:var(--ink-3);font-weight:600}
.ag-gr:not(.ag-gh) span:first-child{font-weight:500}
.ag-gdiv{display:block !important;background:var(--tint);font-weight:600;color:var(--ink-2)}

.ag-walk{border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.ag-walk>summary{list-style:none;cursor:pointer;padding:12px 16px;background:var(--tint);display:grid;gap:2px}
.ag-walk>summary::-webkit-details-marker{display:none}
.ag-walk>summary b{font:700 15px/1.3 var(--head)}
.ag-walk>summary::after{content:"Hide";justify-self:start;font-size:12px;color:var(--ink-3);text-decoration:underline;margin-top:2px}
.ag-walk:not([open])>summary::after{content:"Show her walkthrough"}
.ag-walk-b{padding:14px 16px 16px;display:grid;gap:12px}

.ag-hooks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ag-hook{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:4px;align-content:start}
.ag-hook>b{font-size:14.5px;line-height:1.4;margin-bottom:6px}
.ag-hook .ag-ul{font-size:13.5px;gap:5px}

.ag-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.ag-case{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ag-case-n{font:700 15px/1.3 var(--head)}
.ag-case-c{font-size:13px;color:var(--muted);margin:3px 0 8px !important}
.ag-case-r{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ag-case-r li{display:grid;gap:1px;font-size:13.5px;line-height:1.45;padding-left:10px;border-left:2px solid var(--tint-2)}
.ag-case-r li b{color:var(--ink-3);font-weight:600}

/* the 28 angle types */
.ag-tf{display:flex;flex-wrap:wrap;gap:8px}
.ag-tf button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:7px 12px;font:600 13px/1 var(--body);cursor:pointer;color:var(--ink)}
.ag-tf button[data-g]:not([data-g="all"])::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gc)}
.ag-tf button span{color:var(--muted);font-weight:500}
.ag-tf button[aria-pressed="true"]{background:var(--gc,var(--ink));border-color:var(--gc,var(--ink));color:#fff}
.ag-tf button[aria-pressed="true"] span{color:rgba(255,255,255,.8)}
.ag-tf button[aria-pressed="true"]::before{background:#fff !important}
.ag-tgroup{display:grid;gap:10px}
.ag-tg-h{font:700 12px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--gc);margin:6px 0 0}
.ag-tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ag-tcard{border:1px solid var(--line);border-top:3px solid var(--gc);border-radius:12px;padding:12px 14px;display:grid;gap:7px;align-content:start;font-size:13.5px;line-height:1.5}
.ag-tcard h4{font:700 15px/1.25 var(--head);margin:0}
.ag-tcard p{margin:0}
.ag-tk b,.ag-tex b{display:block;font:700 10.5px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.ag-tex{background:color-mix(in srgb,var(--gc) 8%,#fff);border-radius:8px;padding:7px 10px}
.ag-tex b{color:var(--gc)}

@media (max-width:760px){
  .ag-step{padding:18px 16px}
  .ag-gh{display:none !important}
  .ag-gr{grid-template-columns:1fr !important;gap:6px;padding:12px 14px}
  .ag-gr:nth-child(2){border-top:0}
  .ag-gr span[data-h]::before{content:attr(data-h);display:block;font:700 10px/1.3 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
  .ag-pair{grid-template-columns:1fr;gap:2px}
  .ag-arrow{display:none}
  .ag-pair b::before{content:"→ "}
}
.ag-tgroup[hidden]{display:none}