/* A small starting view, exact reader choices, and readable worked examples. */
.example-catalog{padding-block:55px 72px}
.example-catalog-intro h2{font-size:var(--companion-type-subheading)}
.example-catalog-intro>p{margin-block-start:12px;color:var(--muted);font-size:.96rem}
.example-controls{display:flex;flex-wrap:wrap;align-items:end;gap:20px;margin-block-start:30px;padding-block:25px;padding-inline:28px;background:#f7f4fa;border:1px solid #e7deed;border-radius:12px}
.example-controls[hidden],.example-card[hidden],.example-empty[hidden],.example-reset[hidden],button[data-example-more][hidden]{display:none!important}
.example-controls>div{flex:1 1 14.375rem;min-inline-size:0}
.example-controls label{display:block;font-weight:700;font-size:.8rem;margin-block-end:8px}
.example-controls select,.example-controls input{display:block;inline-size:100%;min-inline-size:0;min-block-size:48px;padding-block:11px;padding-inline:13px;border:1px solid #bcb0c7;border-radius:5px;background:#fff;color:var(--ink);font:inherit;font-size:max(1rem,16px)}
.example-controls select{padding-inline-end:30px}
.example-controls input::placeholder{color:#766c80}
.example-reset{flex:0 0 auto;border:0;background:transparent;color:var(--purple);text-decoration:underline;text-underline-offset:4px;min-block-size:48px;padding-block:10px;padding-inline:4px;font-size:.8rem}
.example-result-count{margin-block:28px 17px;margin-inline:0;color:var(--muted);font-size:.79rem;min-block-size:21px}
.example-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18.5rem),1fr));gap:22px}
.example-card{position:relative;display:flex;flex-direction:column;gap:17px;min-inline-size:0;overflow-wrap:anywhere;padding-block:27px 23px;padding-inline:26px;border:1px solid #dfd5e7;border-radius:10px;background:#fff}
@media (prefers-reduced-motion:no-preference){
.example-card{transition:border-color .15s,box-shadow .15s}}
@media (hover:hover) and (pointer:fine){
.example-card:hover{border-color:#b391ca;box-shadow:0 5px 20px #3714480b}}
.example-card-role{color:#754b90;font-size:.73rem;font-weight:700;line-height:1.5;margin-block:0;margin-inline:0}
.example-card h3{font-size:var(--companion-type-card);line-height:1.27;letter-spacing:-.025em}
.example-card h3 a{text-decoration:none}
.example-card h3 a::after{content:"";position:absolute;inset:0;border-radius:10px}
.example-card h3 a:focus-visible::after{outline:3px solid #ad6ce0;outline-offset:3px}
.example-card-summary{font-size:.85rem;line-height:1.65;color:var(--muted);margin-block:0;margin-inline:0}
.example-card-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 15px;align-items:center;font-size:.68rem;line-height:1.5;margin-block-start:auto;padding-block-start:17px;border-block-start:1px solid #eee7f3;color:var(--muted)}
.example-read{font-size:.75rem;font-weight:700;color:var(--purple)}
.example-more-wrap{display:flex;justify-content:center;margin-block-start:29px}
.example-more-wrap:has(button[hidden]){display:none}
.example-empty{padding-block:35px;padding-inline:28px;border:1px dashed #c7b4d6;border-radius:8px;background:#faf7fc}
.example-empty h3{font-size:1.25rem}
.example-empty p{margin-block-start:12px;color:var(--muted);font-size:.9rem}
.example-complete{margin-block-start:46px;border-block-start:1px solid var(--line);border-block-end:1px solid var(--line);padding-block:19px}
.example-complete>summary{font-size:.88rem;cursor:pointer;color:var(--purple);font-weight:700}
.example-complete>summary>span{font-size:.74rem;font-weight:400;color:var(--muted);margin-inline-start:15px;white-space:nowrap}
.example-complete-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18.5rem),1fr));gap:35px;padding-block:28px 10px}
.example-complete-grid h3{font-size:1.04rem;line-height:1.4}
.example-role-index{margin-block-start:23px}
.example-role-index h4{font-size:.8rem;line-height:1.5;letter-spacing:0;color:var(--muted)}
.example-role-index ul{padding-inline-start:18px;margin-block:8px 0;font-size:.82rem;line-height:1.7}
.example-role-index li+li{margin-block-start:6px}
.example-editorial-note{font-size:.76rem;line-height:1.7;color:var(--muted);margin-block-start:24px;max-inline-size:800px}
.example-neighbour-links{display:flex;flex-wrap:wrap;gap:14px 35px;margin-block-start:25px;font-size:.8rem}
.example-neighbour-links a{color:var(--purple)}
.example-story{padding-block:32px 75px}
.example-story-inner{max-inline-size:900px}
.example-story-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 25px;margin-block-end:43px;font-size:.73rem;color:var(--muted)}
.example-story-meta>a{color:var(--purple);text-decoration:none;font-weight:700}
.example-story h2{font-size:var(--companion-type-subheading);line-height:1.2;letter-spacing:-.03em}
.example-situation>.eyebrow{margin-block-end:14px}
.example-situation>p:not(.eyebrow){font-size:1.05rem;line-height:1.85;margin-block-start:20px}
.example-premises{border-block:1px solid var(--line);padding-block:18px;margin-block-start:27px}
.example-premises summary{cursor:pointer;font-size:.88rem;font-weight:700;color:var(--purple)}
.example-premises dl{margin-block-end:0}
.example-premises dl>div{display:flex;flex-wrap:wrap;gap:7px 20px;margin-block-start:20px;font-size:.9rem}
.example-premises dt{flex:1 1 11.25rem}
.example-premises dd{flex:999 1 0;min-inline-size:min(100%,55%)}
.example-premises dt{font-weight:700}
.example-premises dd{margin-block:0;margin-inline:0;color:var(--muted)}
.example-reasoning{padding-block:44px 16px}
.example-reasoning>ol{counter-reset:reason;list-style:none;padding-block:0;padding-inline:0;margin-block-start:29px}
.example-reasoning li{counter-increment:reason;position:relative;padding-block:0 27px;padding-inline:49px 0;margin-block:0;margin-inline:0}
.example-reasoning li::before{content:counter(reason,decimal-leading-zero);position:absolute;inset-inline-start:0;inset-block-start:0;color:#9876b2;font-size:.85rem;font-weight:700;line-height:1.9}
.example-reasoning h3{font-size:1.19rem;line-height:1.4;letter-spacing:-.02em}
.example-reasoning p{margin-block-start:12px;line-height:1.8;color:var(--muted);font-size:.95rem}
.example-takeaway{padding-block:33px;padding-inline:37px;background:#f1f8f5;border:1px solid #c4dfd2;border-inline-start:4px solid #43c8a0;border-radius:8px}
.example-takeaway .eyebrow{color:#23624c;margin-block-end:14px}
.example-takeaway h2{font-size:1.7rem}
.example-takeaway>p:not(.eyebrow){margin-block-start:18px;font-size:.93rem;line-height:1.8}
.example-takeaway ul{padding-inline-start:20px;font-size:.93rem;line-height:1.8;margin-block-start:19px}
.example-takeaway .example-output-note{font-size:.72rem!important;color:#4c6a5e;line-height:1.65!important;padding-block-start:15px;border-block-start:1px solid #d0e3d8}
.example-boundary{font-size:.78rem;line-height:1.8;color:var(--muted);margin-block-start:21px}
.example-next{border-block-start:1px solid var(--line);padding-block-start:34px;margin-block-start:38px}
.example-next h2{font-size:1.4rem}
.example-next p{font-size:.9rem;color:var(--muted);margin-block-start:12px}
.example-next .button-row{margin-block-start:22px}
.example-related{border-block-start:1px solid var(--line);padding-block-start:24px;margin-block-start:36px}
.example-related h2{font-size:1.05rem;margin-block-end:14px}
.example-related a{display:block;font-size:.91rem;color:var(--purple);margin-block-start:10px}
.example-bottom-link{font-size:.8rem;margin-block-start:29px;color:var(--purple)}
@media(max-width:1000px){.example-controls{gap:16px;padding-block:22px;padding-inline:22px}}
@media(max-width:650px){.example-catalog{padding-block:35px 48px}.example-controls{padding-block:20px;padding-inline:20px;margin-block-start:24px;gap:17px}.example-reset{align-self:flex-end;min-block-size:44px;padding-block:0;padding-inline:3px}.example-result-count{margin-block-start:22px}.example-results{gap:17px}.example-card{padding-block:23px;padding-inline:23px}.example-complete{margin-block-start:32px}.example-complete-grid{gap:28px}.example-complete>summary>span{display:block;margin-block:6px 0;margin-inline:17px 0}.example-neighbour-links{display:block}.example-neighbour-links a{display:block;margin-block-start:18px}.example-story{padding-block:25px 48px}.example-story-meta{margin-block-end:33px}.example-situation>p:not(.eyebrow){font-size:.97rem}.example-reasoning li{padding-inline-start:37px}.example-takeaway{padding-block:26px;padding-inline:23px}.example-takeaway h2{font-size:1.5rem}.example-next .button-row{align-items:stretch;flex-direction:column}.example-next .button{inline-size:100%}}
@supports(grid-template-rows:subgrid){.example-card{display:grid;grid-row:span 4;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:17px}.example-card-foot{margin-block-start:8px;align-self:end}}
@media print{.example-controls,.example-more-wrap,.example-story-meta,.example-next,.example-related,.example-bottom-link,.example-neighbour-links,.example-complete{display:none!important}.example-card[hidden]{display:flex!important}.example-results{display:block}.example-card{display:flex;break-inside:avoid;margin-block-end:20px}.example-card h3 a::after{display:none}.example-story,.example-catalog{padding-block:20px;padding-inline:0}.example-story-inner{max-inline-size:none}.example-premises>*{display:block!important}.example-reasoning li{break-inside:avoid}.example-takeaway{background:#f7faf8;break-inside:avoid}}