/* Guides: the index and the article pages. Loaded after styles.css, which owns
   the tokens, the header, the buttons and the footer. Styles the posts' existing
   body markup (.tablewrap/.specs, .callout, .cta, .faq, footer.art) as it is. */

.site-head .head-cta{display:inline-flex;min-height:44px;padding:0 16px;font-size:.9375rem;gap:8px}
.site-head .head-cta .icon{width:18px;height:18px}
.cta-short,.lang-short{display:none}
.lang-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--r1);text-decoration:none;font-size:.9375rem;color:var(--ink-2)}
.lang-link:hover{border-color:var(--rule-2);color:var(--ink)}
.lang-link .icon{width:18px;height:18px;color:var(--ink-3)}
/* Phones: the check button stays visible; the language link and the button use
   short labels, and the theme follows the system setting. */
@media (max-width:560px){
  .site-head .wrap{gap:6px}
  .site-head .head-tools{gap:6px}
  .cta-full,.lang-full,.site-head #themeBtn{display:none}
  .cta-short,.lang-short{display:inline}
  .site-head .head-cta{padding:0 10px;gap:6px}
  .lang-link{padding:0 8px;gap:5px}
}
@media (max-width:380px){.site-head .brand span{display:none}}

/* ---------- Index ---------- */
.gi-head{padding-block:clamp(40px,7vw,96px) clamp(32px,5vw,56px)}
.gi-head h1{font-size:clamp(2.125rem,1.4rem + 2.6vw,3.5rem);line-height:1.05;letter-spacing:-.03em;font-weight:670;font-variation-settings:"SHRP" 30;max-width:18ch}
.gi-head p{margin-top:var(--s5);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--ink-2);max-width:58ch}
.gi-head .btn{margin-top:var(--s6)}
.posts{list-style:none;border-top:1px solid var(--ink)}
.post{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:var(--s3) var(--s6);padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--rule);text-decoration:none}
@media (min-width:900px){.post{grid-template-columns:200px minmax(0,1fr) 28px}}
.post-meta{font-size:.875rem;color:var(--ink-3);line-height:1.5}
.post-meta b{display:block;color:var(--guide-ink);font-weight:600}
@media (max-width:899px){.post-meta{grid-column:1 / -1}.post-meta b{display:inline}.post-meta b::after{content:" · ";color:var(--ink-3);font-weight:400}}
.post h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);line-height:1.2;letter-spacing:-.015em;font-weight:630}
.post p{margin-top:var(--s2);color:var(--ink-2);max-width:66ch}
.post .icon{align-self:center;color:var(--ink-3);width:24px;height:24px;transition:transform .25s var(--ease),color .2s var(--ease)}
.post:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.post:hover .icon{color:var(--ink);transform:translateX(4px)}
[dir="rtl"] .post:hover .icon{transform:scaleX(-1) translateX(4px)}

/* ---------- Article ---------- */
.gp{padding-block:clamp(28px,5vw,64px) clamp(56px,8vw,112px)}
.gp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
@media (min-width:1100px){.gp-grid{grid-template-columns:minmax(0,1fr) 260px;column-gap:clamp(48px,6vw,96px)}}
.crumbs{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--ink-3);margin-bottom:var(--s5)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .icon{width:14px;height:14px}

.prose{max-width:70ch;font-size:1.0625rem;line-height:1.68}
.prose > * + *{margin-top:1.05em}
.prose h1{font-size:clamp(2rem,1.35rem + 2.4vw,3.125rem);line-height:1.06;letter-spacing:-.03em;font-weight:670;font-variation-settings:"SHRP" 30}
.prose .standfirst{margin-top:var(--s5);font-size:clamp(1.125rem,1.05rem + .4vw,1.3125rem);line-height:1.5;color:var(--ink-2)}
.prose .meta{margin-top:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--rule);font-size:.875rem;color:var(--ink-3)}
.prose .meta .cat{color:var(--guide-ink);font-weight:600}
.prose h2{margin-top:2.6em;font-size:clamp(1.5rem,1.25rem + .9vw,1.875rem);line-height:1.15;letter-spacing:-.02em;font-weight:650;font-variation-settings:"SHRP" 24;scroll-margin-top:88px}
.prose h3{margin-top:1.8em;font-size:1.1875rem;line-height:1.3;font-weight:630}
.prose h2 + *,.prose h3 + *{margin-top:.6em}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--ink-3)}
.prose ol{list-style:none;padding:0;counter-reset:step}
.prose ol > li{counter-increment:step;position:relative;padding:12px 0;padding-inline-start:2.2em;border-bottom:1px solid var(--rule)}
.prose ol > li + li{margin-top:0}
.prose ol > li::before{content:counter(step);position:absolute;inset-inline-start:0;top:12px;font-family:var(--font-measure);font-stretch:87.5%;color:var(--guide-ink);font-weight:500}
.prose a{text-decoration-color:var(--guide-ink);text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:620;color:var(--ink)}
.prose em{font-style:italic}
.prose blockquote{margin-inline:0;padding:var(--s5) 0 var(--s5) 2.4em;position:relative;font-size:1.25rem;line-height:1.45;color:var(--ink);border-block:1px solid var(--rule)}
[dir="rtl"] .prose blockquote{padding:var(--s5) 2.4em var(--s5) 0}
.prose blockquote::before{content:"“";position:absolute;inset-inline-start:0;top:.1em;font-size:3.2em;line-height:1;color:var(--guide-ink)}
.prose blockquote p + p{margin-top:.6em}

.tablewrap{overflow-x:auto;margin-inline:-2px;padding-inline:2px}
.specs{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.45;font-variant-numeric:tabular-nums}
.specs th{text-align:start;font-size:.8125rem;font-weight:500;color:var(--ink-3);padding:0 14px 10px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.specs td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
[dir="rtl"] .specs th,[dir="rtl"] .specs td{padding-left:14px;padding-right:0}
.specs td:first-child{font-weight:560;color:var(--ink)}
.specs td + td{color:var(--ink-2)}
.specs td.v{color:var(--ink)}
@media (max-width:620px){.specs{min-width:520px}}

.callout{position:relative;padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 32px);border-radius:var(--r2);background:var(--paper-2);border:1px solid var(--rule)}
[dir="rtl"] .callout{padding:var(--s5) calc(var(--s5) + 32px) var(--s5) var(--s5)}
.callout::before{content:"";position:absolute;inset-inline-start:var(--s5);top:calc(var(--s5) + 3px);width:20px;height:20px;background:var(--guide-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E") center/contain no-repeat}
.callout h3{margin:0;font-size:1.0625rem;font-weight:640}
.callout p{margin-top:6px;color:var(--ink-2);font-size:1rem}
.callout.good{background:var(--pass-wash);border-color:var(--pass-edge)}
.callout.good::before{background:var(--pass);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.2 12.3l2.6 2.6 5-5.4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.2 12.3l2.6 2.6 5-5.4'/%3E%3C/svg%3E")}
.callout.bad{background:var(--fail-wash);border-color:var(--fail-edge)}
.callout.bad::before{background:var(--fail);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6'/%3E%3C/svg%3E")}

/* The call to action: a small proof card, the same world as the checker. */
.cta{position:relative;margin-block:2.4em;padding:clamp(24px,3vw,36px);border-radius:var(--r2);background:var(--stage);color:var(--on-stage)}
.cta::before,.cta::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--on-stage-2);opacity:.8}
.cta::before{top:12px;inset-inline-start:12px;border-top-width:1px;border-inline-start-width:1px}
.cta::after{bottom:12px;inset-inline-end:12px;border-bottom-width:1px;border-inline-end-width:1px}
.cta h3{margin:0;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.2;font-weight:650;color:var(--on-stage)}
.cta p{margin-top:var(--s3);color:var(--on-stage-2);max-width:62ch;font-size:1rem}
.cta .btn{margin-top:var(--s5);background:var(--on-stage);color:oklch(0.22 0.018 255);min-height:52px;padding:0 24px;text-decoration:none}
.cta .btn:hover{background:oklch(1 0 0)}
.cta .btn::before{content:"";width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5 12 4l4.5 4.5M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5 12 4l4.5 4.5M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E") center/contain no-repeat}

.prose .faq{margin-top:var(--s4);border-top:1px solid var(--ink)}
.prose .faq details{border-bottom:1px solid var(--rule);margin:0}
.prose .faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 14px;gap:var(--s4);align-items:center;padding:16px 0;font-weight:580;min-height:52px}
.prose .faq summary::-webkit-details-marker{display:none}
.prose .faq summary::after{content:"";width:14px;height:14px;background:linear-gradient(var(--ink-2),var(--ink-2)) center/100% 1.5px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) center/1.5px 100% no-repeat}
.prose .faq details[open] summary::after{background:linear-gradient(var(--ink-2),var(--ink-2)) center/100% 1.5px no-repeat}
.prose .faq details p{padding:0 0 18px;color:var(--ink-2);margin:0}

.prose footer.art{margin-top:3em;padding-top:var(--s5);border-top:1px solid var(--rule);font-size:.9375rem;color:var(--ink-2)}
.prose footer.art h3{margin:0;font-size:1rem}
.prose footer.art ul{margin-top:var(--s2)}
.prose footer.art p{margin-top:var(--s4);font-size:.875rem;color:var(--ink-3)}

/* On this page: a sticky list on wide screens, a fold on narrow ones. */
.toc{font-size:.9375rem}
.toc-side{display:none}
@media (min-width:1100px){.toc-side{display:block;position:sticky;top:96px;align-self:start}.toc-fold{display:none}}
.toc h2,.toc summary{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin:0 0 var(--s3)}
.toc ol{list-style:none;padding:0;margin:0;border-inline-start:1px solid var(--rule)}
.toc li{margin:0}
.toc a{display:block;padding:7px 0 7px 14px;margin-inline-start:-1px;border-inline-start:1px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35}
[dir="rtl"] .toc a{padding:7px 14px 7px 0}
.toc a:hover{color:var(--ink);border-inline-start-color:var(--ink-3)}
.toc a[aria-current="true"]{color:var(--ink);border-inline-start-color:var(--guide-ink);font-weight:560}
.toc-side .toc-check{display:flex;gap:var(--s3);margin-top:var(--s6);padding:var(--s4);border-radius:var(--r2);background:var(--stage);color:var(--on-stage);text-decoration:none;font-weight:560;font-size:.9375rem;line-height:1.35}
.toc-side .toc-check .icon{color:var(--guide);flex:none}
.toc-side .toc-check:hover{background:var(--stage-2)}
.prose .toc-fold{border:1px solid var(--rule);border-radius:var(--r2);padding:0 var(--s4)}
.prose .toc-fold summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:48px;margin:0;font-size:.9375rem;color:var(--ink)}
.prose .toc-fold summary::-webkit-details-marker{display:none}
.prose .toc-fold ol{margin-bottom:var(--s4)}
.prose .toc-fold li{display:block;padding:0;border:0;counter-increment:none}
.prose .toc-fold li::before{content:none}

.related{border-top:1px solid var(--rule);padding-block:clamp(48px,7vw,96px)}
.related h2{font-size:clamp(1.5rem,1.25rem + .9vw,1.875rem);letter-spacing:-.02em;font-weight:650;margin-bottom:var(--s5)}