/* cricketdatabase.com: the API documentation (/api). Layout approved as cricketdatabase-api-docs-preview-45.html. */

/* ---------- API documentation ---------- */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #6F7C76; margin-bottom: 18px; }
.crumbs a { color: var(--stone); } .crumbs a:hover { color: var(--willow); }
.crumbs span[aria-hidden] { color: #4E5C56; }
.docs-page .page-head { max-width: 820px; }
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr) 360px; gap: 28px; margin-top: 40px; align-items: start; }
@media (max-width: 1240px) { .docs { grid-template-columns: 200px minmax(0, 1fr); } .tryit { grid-column: 1 / -1; position: static !important; order: -1; } }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } .dnav { display: none; } }
.docs > * { min-width: 0; }
.dnav { position: sticky; top: calc(var(--bar-h) + 16px); max-height: calc(100vh - var(--bar-h) - 32px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.dn-g { margin-bottom: 14px; }
.dnav a { display: block; padding: 3px 0 3px 10px; border-left: 1px solid var(--hair); font-size: 12.5px; color: #6F7C76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dnav a span { font-family: var(--code); font-size: 11.5px; }
.dnav a.dn-h { padding-left: 0; border: 0; font-size: 13px; font-weight: 500; color: var(--willow); margin-bottom: 4px; }
.dnav a:hover { color: var(--willow); } .dnav a.on { color: var(--gilt); border-left-color: var(--gilt); }
.dsec, .dgroup { scroll-margin-top: calc(var(--bar-h) + 16px); }
.dsec { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--hair); }
.dsec h2, .dgroup > h2 { margin: 0 0 12px; font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.dsec p { color: var(--stone); font-size: 15px; line-height: 1.7; max-width: 72ch; margin: 0 0 12px; }
.dsec code, .ded code, .ptab code { font: 400 12.5px var(--code); color: var(--willow); }
.dgroup { margin-bottom: 36px; }
.dep { border: 1px solid var(--hair); border-radius: var(--r); background: rgba(20, 33, 29, .45); padding: 16px 18px; margin-bottom: 12px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.dep > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dep-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dep .dm, .ti-req .dm { flex: none; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(169, 210, 230, .45); color: var(--glint); font: 500 11px/1.4 var(--code); }
.dep .dp { font: 500 14px var(--code); color: var(--willow); overflow-wrap: anywhere; }
.dep .dp i { font-style: normal; color: var(--gilt); }
.dpbs { display: flex; gap: 5px; flex-wrap: wrap; }
.dpb { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r); font-size: 11.5px; font-weight: 500; white-space: nowrap; border: 1px solid var(--hair-2); color: var(--stone); }
.dpb.b-free { border-color: rgba(159, 203, 168, .45); color: #9FCBA8; }
.dpb.b-sample { border-color: rgba(212, 183, 122, .35); color: #C9B284; border-style: dashed; }
.dpb.b-mw { border-color: rgba(169, 210, 230, .45); color: var(--glint); }
.dpb.b-arc { border-color: rgba(233, 228, 216, .4); color: var(--willow); }
.dpb.b-plus { border-color: rgba(212, 183, 122, .6); color: var(--ink); background: var(--gilt); }
.ded { margin: 10px 0 12px; color: var(--stone); font-size: 14.5px; line-height: 1.6; }
table.ptab { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 12px; min-width: 460px; }
table.ptab th, table.ptab td { text-align: left; padding: 7px 10px; border-top: 1px solid var(--hair); vertical-align: top; }
table.ptab thead th { border-top: 0; font-size: 11.5px; font-weight: 500; color: #6F7C76; background: rgba(10, 17, 15, .35); }
table.ptab td { color: var(--stone); }
.codebox { border-radius: var(--r); border: 1px solid var(--hair-2); background: rgba(10, 17, 15, .6); overflow: hidden; margin-bottom: 10px; }
.codebox.solo { margin: 4px 0 14px; }
.ctabs2 { display: flex; align-items: center; gap: 2px; padding: 5px; border-bottom: 1px solid var(--hair); }
.ctabs2 button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--stone); font: 500 12px var(--font); cursor: pointer; }
.ctabs2 button[aria-selected="true"] { background: var(--ink-3); color: var(--willow); }
.ctabs2 .grow { flex: 1; }
.ctabs2 .try { border: 1px solid rgba(212, 183, 122, .5); color: var(--gilt); }
.ctabs2 .cp { border: 1px solid var(--hair-2); font-family: var(--code); }
pre.cl { margin: 0; padding: 10px 12px; font: 400 12px/1.6 var(--code); color: var(--willow); white-space: pre; overflow-x: auto; }
details.resp summary { cursor: pointer; font-size: 13px; color: var(--stone); padding: 6px 0; }
details.resp summary:hover { color: var(--willow); }
pre.rj { margin: 6px 0 0; padding: 12px; border-radius: var(--r); background: rgba(10, 17, 15, .6); border: 1px solid var(--hair); font: 400 11.5px/1.6 var(--code); color: var(--stone); white-space: pre; overflow-x: auto; max-height: 420px; }
pre.rj .k { color: var(--stone); } pre.rj .s { color: var(--willow); } pre.rj .n { color: var(--gilt); } pre.rj .c { color: var(--glint); }
.tryit { position: sticky; top: calc(var(--bar-h) + 16px); border: 1px solid var(--hair-2); border-radius: var(--r); background: rgba(20, 33, 29, .7); padding: 16px; display: grid; gap: 10px; }
.ti-h { display: flex; justify-content: space-between; align-items: baseline; } .ti-h b { font-size: 15px; font-weight: 500; } .ti-h span { font-size: 12px; color: #6F7C76; }
.ti-f { display: grid; gap: 5px; font-size: 12.5px; color: var(--stone); }
.ti-f input { height: 38px; border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--ink); color: var(--willow); padding: 0 10px; font: 400 12.5px var(--code); width: 100%; }
.ti-f input:focus { outline: none; border-color: var(--gilt); }
.ti-req { display: flex; align-items: center; gap: 8px; } .ti-req input { flex: 1; min-width: 0; }
.ti-meta { font-size: 12.5px; color: var(--stone); } .ti-meta b.ok { color: #9FCBA8; } .ti-meta b.bad { color: #E6A0A0; }
.ti-out { margin: 0; min-height: 120px; max-height: 52vh; overflow: auto; padding: 10px; border-radius: var(--r); background: rgba(10, 17, 15, .7); border: 1px solid var(--hair); font: 400 11.5px/1.55 var(--code); color: var(--stone); white-space: pre; }


/* ---------- API documentation, one page per endpoint ---------- */
.docs2 { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; margin-top: 8px; align-items: start; }
@media (max-width: 860px) { .docs2 { grid-template-columns: 1fr; } .dnav2 { position: static !important; max-height: none !important; display: flex; flex-wrap: wrap; gap: 4px 10px; } .dnav2 .dn-g { display: contents; } .dnav2 .dn-t { display: none; } }
.docs2 > * { min-width: 0; }
.dnav2 { position: sticky; top: calc(var(--bar-h) + 16px); max-height: calc(100vh - var(--bar-h) - 32px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.dnav2 .dn-g { margin: 12px 0 0; }
.dnav2 .dn-t { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #6F7C76; margin-bottom: 4px; }
.dnav2 a { display: block; padding: 3px 0 3px 10px; border-left: 1px solid var(--hair); font-size: 13px; color: var(--stone); }
.dnav2 a.dn-h { border: 0; padding-left: 0; font-weight: 500; color: var(--willow); }
.dnav2 a:hover { color: var(--willow); } .dnav2 a.on { color: var(--gilt); border-left-color: var(--gilt); }
.eph { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.eph h1 { margin: 0 0 12px; font-size: clamp(34px, 4vw, 52px); font-weight: 400; font-stretch: 88%; letter-spacing: -.03em; line-height: 1.04; }
.dep-l.big .dp { font-size: 16px; }
.lead-d { margin: 16px 0 24px; max-width: 72ch; color: var(--stone); font-size: 16px; line-height: 1.65; }
.dsec2 { margin: 0 0 28px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.dsec2 h2 { margin: 0 0 12px; font-size: 20px; font-weight: 500; }
.dsec2 p { color: var(--stone); font-size: 15px; line-height: 1.7; max-width: 76ch; margin: 0 0 12px; }
.dsec2 code { font: 400 12.5px var(--code); color: var(--willow); }
.tryin { border: 1px solid rgba(212, 183, 122, .35); border-radius: var(--r); background: rgba(20, 33, 29, .6); padding: 16px 18px; margin-bottom: 30px; }
.ti-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ti-top b { font-size: 16px; font-weight: 500; }
.keysel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.keysel select { height: 34px; min-width: 240px; border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--ink); color: var(--willow); padding: 0 10px; font: 400 12.5px var(--code); }
.btn-sm { height: 34px; padding: 0 12px; border-radius: var(--r); border: 1px solid rgba(212, 183, 122, .5); background: transparent; color: var(--gilt); font: 500 13px var(--font); cursor: pointer; }
.btn-sm.ghost { border-color: var(--hair-2); color: var(--stone); }
.k-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: end; padding: 12px; border-radius: var(--r); border: 1px dashed var(--hair-2); margin-bottom: 12px; }
@media (max-width: 700px) { .k-form { grid-template-columns: 1fr; } }
.k-form[hidden] { display: none; }
.k-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: #6F7C76; }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tf { display: grid; gap: 5px; font-size: 12.5px; color: var(--stone); }
.tf em { font-style: normal; color: #6F7C76; }
.tf input { height: 36px; border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--ink); color: var(--willow); padding: 0 10px; font: 400 12.5px var(--code); width: 100%; }
.tf input:focus, .keysel select:focus { outline: none; border-color: var(--gilt); }
.ti-run { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.ti-url { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r); background: rgba(10, 17, 15, .6); border: 1px solid var(--hair); font: 400 12.5px var(--code); color: var(--willow); overflow-x: auto; white-space: nowrap; }
.ti-meta { margin-top: 10px; font-size: 13px; color: var(--stone); } .ti-meta b.ok { color: #9FCBA8; } .ti-meta b.bad { color: #E6A0A0; }
.ti-out { margin: 10px 0 0; max-height: 480px; overflow: auto; padding: 12px; border-radius: var(--r); background: rgba(10, 17, 15, .7); border: 1px solid var(--hair); font: 400 12px/1.55 var(--code); color: var(--stone); white-space: pre; }
.ti-out[hidden] { display: none; }
.pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hair); }
.pn a { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--hair); min-width: 200px; color: var(--willow); font-size: 15px; }
.pn a small { font-size: 12px; color: #6F7C76; } .pn a.nx { text-align: right; } .pn a:hover { border-color: rgba(212, 183, 122, .5); }
.ogrp { margin: 32px 0 0; } .ogrp h2 { margin: 0 0 12px; font-size: 20px; font-weight: 500; }
.ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
a.ocard { display: grid; gap: 7px; align-content: start; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--hair); background: rgba(20, 33, 29, .45); transition: border-color .15s, background .15s; }
a.ocard:hover { border-color: rgba(212, 183, 122, .5); background: rgba(20, 33, 29, .7); }
a.ocard b { font-size: 16px; font-weight: 500; color: var(--willow); }
a.ocard code { font: 400 12px var(--code); color: var(--stone); overflow-wrap: anywhere; }
a.ocard small { font-size: 13px; color: var(--stone); line-height: 1.45; }
.dpage .dsec2:first-of-type { margin-top: 36px; }
.dep-l .dm { flex: none; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(169, 210, 230, .45); color: var(--glint); font: 500 11px/1.4 var(--code); }
.dep-l .dp { font: 500 14px var(--code); color: var(--willow); overflow-wrap: anywhere; } .dep-l .dp i { font-style: normal; color: var(--gilt); }


/* ---------- docs in the greyhoundapi.com pattern ---------- */
.docs-menu { position: sticky; top: calc(var(--bar-h) + 16px); max-height: calc(100vh - var(--bar-h) - 32px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; font-size: 13px; }
.menu-filter { display: flex; gap: 2px; padding: 3px; border-radius: var(--r); border: 1px solid var(--hair-2); background: rgba(10, 17, 15, .5); margin-bottom: 14px; }
.menu-filter button { flex: 1; border: 0; background: none; border-radius: 7px; padding: 6px 2px; color: var(--stone); font: 500 11.5px var(--font); cursor: pointer; }
.menu-filter button.on { background: var(--willow); color: var(--ink); }
.docs-menu .dm-top { display: block; padding: 3px 0; color: var(--willow); font-weight: 500; }
.docs-menu .dm-top.on { color: var(--gilt); }
.dm-h { margin: 14px 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #6F7C76; }
.dm-h[hidden], .dm-eps[hidden], .dm-eps li[hidden] { display: none; }
.dm-eps { list-style: none; margin: 0; padding: 0; }
.dm-eps a { display: block; padding: 3px 0 3px 10px; border-left: 1px solid var(--hair); color: var(--stone); }
.dm-eps a:hover { color: var(--willow); } .dm-eps a.on { color: var(--gilt); border-left-color: var(--gilt); }
.dm-plus { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--gilt); color: var(--ink); font: 600 9.5px var(--code); vertical-align: 1px; }
.dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
@media (max-width: 620px) { .dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dstat { padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--hair); background: rgba(20, 33, 29, .45); }
.dstat b { display: block; font-size: 32px; font-weight: 400; font-stretch: 82%; line-height: 1; }
.dstat span { font-size: 12.5px; color: #6F7C76; } .dstat.f b { color: #9FCBA8; } .dstat.p b { color: var(--gilt); }
.keynote { font-size: 13.5px; color: var(--stone); margin: 0 0 28px; } .keynote a { color: var(--willow); border-bottom: 1px solid var(--hair-2); }
.dsec2 a { color: var(--willow); border-bottom: 1px solid var(--hair-2); }
.dxs-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 30px 0 12px; }
.dxs-h h2 { margin: 0; font-size: 20px; font-weight: 500; }
.dxs-n { font: 500 12px var(--code); color: #6F7C76; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--hair); }
.dxs-h p { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--stone); }
.glabel { margin: 16px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--willow); } .glabel span { margin-left: 8px; color: #6F7C76; font-weight: 400; }
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
a.gcard { display: grid; gap: 5px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--hair); background: rgba(20, 33, 29, .45); transition: border-color .15s; }
a.gcard:hover { border-color: rgba(212, 183, 122, .5); }
.gnum { font: 500 11px var(--code); color: #6F7C76; } .gt { font-size: 15px; font-weight: 500; color: var(--willow); } .gd { font-size: 12.5px; color: var(--stone); line-height: 1.45; } .ggo { font-size: 12.5px; color: var(--gilt); }
a.chg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px dashed rgba(212, 183, 122, .45); }
.chg-l { font: 600 12px var(--code); color: var(--gilt); } .chg-m b { display: block; font-weight: 500; } .chg-m em { font-style: normal; font-size: 12.5px; color: #6F7C76; } .chg-go { font-size: 13px; color: var(--gilt); }
.dbar { position: sticky; top: var(--bar-h); z-index: 5; margin: 34px 0 0; padding: 12px 0 10px; background: linear-gradient(var(--ink) 80%, rgba(16,26,23,0)); }
.dbar-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dfilter { flex: 1 1 280px; position: relative; } .dfilter input { width: 100%; height: 40px; border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--ink-2); color: var(--willow); padding: 0 38px 0 12px; font: 400 14px var(--font); }
.dfilter input:focus { outline: none; border-color: var(--gilt); } .dfilter kbd { position: absolute; right: 10px; top: 10px; font: 500 11px var(--code); color: #6F7C76; border: 1px solid var(--hair-2); border-radius: 5px; padding: 1px 6px; }
.planpick { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: var(--r); border: 1px solid var(--hair-2); }
.pp-l { font-size: 12px; color: #6F7C76; padding: 0 6px; }
.planpick button { border: 0; background: none; border-radius: 7px; padding: 7px 10px; color: var(--stone); font: 500 12.5px var(--font); cursor: pointer; }
.planpick button[aria-pressed="true"] { background: var(--gilt); color: var(--ink); }
.dcount { font-size: 12.5px; color: var(--stone); white-space: nowrap; }
.jchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .jchip { font-size: 12px; color: var(--stone); padding: 3px 9px; border-radius: 6px; border: 1px solid var(--hair); } .jchip b { color: #6F7C76; font-weight: 500; }
.dxs[hidden], .dxc[hidden] { display: none !important; }
.dxg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
a.dxc { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--hair); background: rgba(20, 33, 29, .45); transition: border-color .15s, opacity .15s; }
a.dxc:hover { border-color: rgba(212, 183, 122, .5); }
.dxc-top { display: flex; gap: 8px; align-items: center; min-width: 0; } .dxc-top code { font: 400 11.5px var(--code); color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxc .dm, .dep-l .dm { flex: none; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(169, 210, 230, .45); color: var(--glint); font: 500 10.5px/1.4 var(--code); }
.dxc-t { font-size: 15px; font-weight: 500; color: var(--willow); } .dxc-s { margin: 0; font-size: 12.5px; color: var(--stone); line-height: 1.45; }
.dxc-b { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .dpb.b-pg { border-color: var(--hair-2); color: #6F7C76; }
.lockon { display: none; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gilt); } .lockon .lk { width: 11px; height: 11px; }
a.dxc.is-locked { opacity: .5; border-style: dashed; } a.dxc.is-locked .lockon { display: inline-flex; } a.dxc.is-locked:hover { opacity: .85; }
a.dxc.is-part { border-color: rgba(212, 183, 122, .3); }
.eph1 { margin: 6px 0 12px; font-size: clamp(34px, 4vw, 50px); font-weight: 400; font-stretch: 88%; letter-spacing: -.03em; line-height: 1.04; }
.avail { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }
.av-l { font-size: 12.5px; color: #6F7C76; margin-right: 4px; }
.avp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--hair-2); font-size: 12.5px; color: var(--stone); }
.avp b { font-weight: 500; color: var(--willow); } .avp .lk { width: 11px; height: 11px; }
.avp.s-full { border-color: rgba(159, 203, 168, .5); } .avp.s-full b { color: #9FCBA8; }
.avp.s-window30, .avp.s-window7, .avp.s-toyesterday, .avp.s-sample { border-color: rgba(212, 183, 122, .45); border-style: dashed; }
.avp.s-none { opacity: .55; }
.authsw { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); border: 1px solid var(--hair-2); margin-bottom: 10px; }
.authsw button { border: 0; background: none; border-radius: 7px; padding: 6px 10px; color: var(--stone); font: 500 12px var(--code); cursor: pointer; } .authsw button.on { background: var(--ink-3); color: var(--willow); }
.codebox[hidden] { display: none; }
.tierbadge { font: 600 11px var(--code); padding: 3px 8px; border-radius: 999px; } .tierbadge:empty { display: none; }
.tierbadge.t-free { background: rgba(159, 203, 168, .2); color: #9FCBA8; } .tierbadge.t-plus { background: var(--gilt); color: var(--ink); } .tierbadge.t-archive, .tierbadge.t-match-week { background: var(--ink-3); color: var(--willow); }
.related ul { list-style: none; margin: 0; padding: 0; } .related li { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--hair); } .related li code { font: 400 12px var(--code); color: #6F7C76; }
.related a, .guide-body a { color: var(--willow); border-bottom: 1px solid var(--hair-2); }
.guide-body { max-width: 74ch; } .guide-body h2 { margin: 28px 0 10px; font-size: 20px; font-weight: 500; }
.guide-body p { color: var(--stone); font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; } .guide-body code { font: 400 13px var(--code); color: var(--willow); }
.tblwrap { overflow-x: auto; margin: 0 0 14px; }
.chlog { list-style: none; margin: 10px 0 0; padding: 0; border-left: 1px solid var(--hair-2); }
.chlog li { position: relative; padding: 0 0 26px 22px; } .chlog li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gilt); }
.chlog time { font: 500 12px var(--code); color: #6F7C76; } .chlog h2 { margin: 4px 0 6px; font-size: 18px; font-weight: 500; } .chlog p { margin: 0; color: var(--stone); font-size: 14.5px; line-height: 1.65; max-width: 72ch; }


/* ---------- docs layout, rebuilt: a docs sub-bar, a two-section menu, one column on phones ---------- */
.subbar { position: sticky; top: var(--bar-h); z-index: 40; margin-top: var(--bar-h); background: rgba(16, 26, 23, .96); border-bottom: 1px solid var(--hair); backdrop-filter: blur(8px); }
.sb-in { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.sb-tabs { display: flex; gap: 2px; flex: none; }
.sb-tabs a { padding: 8px 12px; border-radius: var(--r); font-size: 14px; color: var(--stone); white-space: nowrap; }
.sb-tabs a:hover { color: var(--willow); }
.sb-tabs a[aria-current="page"] { color: var(--willow); background: var(--ink-3); }
.sb-search { flex: 1 1 180px; min-width: 0; }
.sb-search input { width: 100%; max-width: 320px; height: 36px; border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--ink-2); color: var(--willow); padding: 0 12px; font: 400 13.5px var(--font); }
.sb-search input:focus { outline: none; border-color: var(--gilt); }
.sb-plan { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r); border: 1px solid var(--hair-2); flex: none; margin-left: auto; }
.sb-plan > span { font-size: 12px; color: #6F7C76; padding: 0 8px 0 6px; }
.sb-plan button { border: 0; background: none; border-radius: 7px; padding: 6px 10px; color: var(--stone); font: 500 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.sb-plan button[aria-pressed="true"] { background: var(--willow); color: var(--ink); }
.dmain { padding: 28px 0 80px; }
.dlay { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; align-items: start; }
.dlay > * { min-width: 0; }
.dside { position: sticky; top: calc(var(--bar-h) + 52px + 20px); }
.dside-m > summary { display: none; }
.smenu { max-height: calc(100vh - var(--bar-h) - 52px - 40px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; font-size: 13.5px; }
.smenu a { color: var(--stone); }
.smenu a:hover { color: var(--willow); }
.smenu a.on { color: var(--gilt); }
.sm-top { display: block; padding: 7px 0; font-weight: 500; color: var(--willow) !important; }
.sm-top.on { color: var(--gilt) !important; }
.sm-sec { border-top: 1px solid var(--hair); padding: 4px 0 10px; }
.sm-sec:last-of-type { border-bottom: 1px solid var(--hair); }
.sm-sh { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0; font-weight: 500; color: var(--willow); }
.sm-sh span { margin-left: auto; font: 400 11.5px var(--code); color: #6F7C76; }
.sm-all { display: block; padding: 3px 0 3px 19px; }
.sm-h { margin: 10px 0 3px 19px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6F7C76; }
.sm-h[hidden], .sm-list[hidden], .sm-list li[hidden] { display: none; }
.sm-list { list-style: none; margin: 0 0 0 19px; padding: 0; border-left: 1px solid var(--hair); }
.sm-list a { display: block; padding: 3px 0 3px 11px; margin-left: -1px; border-left: 1px solid transparent; }
.sm-list a.on { border-left-color: var(--gilt); }
.sm-plus { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--gilt); color: var(--ink); font: 600 9.5px var(--code); vertical-align: 1px; }
/* the overview: a short head, three ways in, then guides and endpoints as their own sections */
.ohead h1 { margin: 0 0 8px; font-size: clamp(32px, 4vw, 46px); font-weight: 400; font-stretch: 88%; letter-spacing: -.03em; line-height: 1.05; }
.ohead p { margin: 0; color: var(--stone); font-size: 16px; max-width: 60ch; }
.starts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 8px; }
a.st { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--r); border: 1px solid var(--hair); background: rgba(20, 33, 29, .45); min-width: 0; }
a.st:hover { border-color: rgba(212, 183, 122, .5); }
a.st b { font-size: 16px; font-weight: 500; color: var(--willow); }
a.st span { font-size: 13px; color: var(--stone); line-height: 1.5; }
a.st code { font: 400 11px var(--code); color: #6F7C76; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.st em { font-style: normal; font-size: 12px; color: var(--gilt); }
.osec { margin-top: 40px; }
.osec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.osec-h h2 { margin: 0; font-size: 22px; font-weight: 500; }
.osec-h a { font-size: 13px; color: var(--gilt); }
.gcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gcol .glabel { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6F7C76; }
a.glink { display: block; padding: 5px 0; font-size: 14px; color: var(--willow); border-bottom: 1px solid var(--hair); }
a.glink:hover { color: var(--gilt); }
.ofacts { margin: 0 0 18px; font-size: 13.5px; color: var(--stone); }
.ohead + .guide-body { margin-top: 18px; }
@media (max-width: 640px) { .pn a { min-width: 0; flex: 1; } }
.ofacts b { color: var(--willow); font-weight: 500; margin-left: 10px; } .ofacts b:first-child { margin-left: 0; }
.ofacts a { color: var(--willow); border-bottom: 1px solid var(--hair-2); }
.dxs { margin: 0 0 22px; }
.dxs-t { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--willow); } .dxs-t span { margin-left: 8px; font: 400 12px var(--code); color: #6F7C76; }
.dxg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
a.dxc { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--hair); background: rgba(20, 33, 29, .45); min-width: 0; }
a.dxc code { font: 400 11.5px var(--code); color: #6F7C76; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxc-t { font-size: 14.5px; font-weight: 500; color: var(--willow); }
.dxc-b { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
a.chg { margin-top: 36px; }
.eph1 { margin: 4px 0 10px; }
.dcontent .crumbs { margin-bottom: 10px; }
/* ---- phones and small tablets ---- */
@media (max-width: 1000px) {
  .dlay { grid-template-columns: 1fr; gap: 18px; }
  .dside { position: static; }
  .dside-m { border: 1px solid var(--hair-2); border-radius: var(--r); background: rgba(20, 33, 29, .6); }
  .dside-m > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; font-weight: 500; list-style: none; }
  .dside-m > summary::-webkit-details-marker { display: none; }
  .dside-m > summary::after { content: "+"; font: 400 18px var(--code); color: var(--gilt); }
  .dside-m[open] > summary::after { content: "\2212"; }
  .dside-m .smenu { max-height: 60vh; padding: 0 14px 10px; }
  .gcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sb-in { flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 10px; }
  .sb-tabs { order: 1; width: 100%; overflow-x: auto; scrollbar-width: none; } .sb-tabs::-webkit-scrollbar { display: none; }
  .sb-search { order: 2; flex: 1 1 100%; } .sb-search input { max-width: none; }
  .sb-plan { order: 3; margin-left: 0; width: 100%; overflow-x: auto; }
  .sb-plan button { flex: 1; padding: 6px 4px; }
  .subbar { position: static; }
  .dside { top: auto; }
  .starts { grid-template-columns: 1fr; }
  .gcols { grid-template-columns: 1fr; gap: 12px; }
  .dxg { grid-template-columns: 1fr; }
  .avail { gap: 4px; } .avp { height: auto; padding: 5px 8px; flex-wrap: wrap; }
  .ti-top { flex-direction: column; align-items: stretch; } .keysel select { min-width: 0; flex: 1; }
  .ti-run { flex-direction: column; align-items: stretch; }
  .tf-grid { grid-template-columns: 1fr; }
  .eph1 { font-size: 34px; }
  pre.rj, .ti-out { font-size: 11px; }
  a.chg { grid-template-columns: 1fr; gap: 6px; }
  }

/* ---- navigation, second pass: a visible panel with the plan at its head ---- */
.sb-menu { display: none; }
.dside { background: rgba(233, 228, 216, .045); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 14px 14px 10px; }
.dside-top { display: none; }
.smenu { max-height: calc(100vh - var(--bar-h) - 52px - 60px); padding-right: 4px; }
.smenu a { color: #C9CFCB; }
.sm-top { color: var(--willow) !important; }
.sm-sh { color: var(--willow); font-size: 14px; }
.sm-h { color: #8C9892; }
.sm-list { border-left-color: var(--hair-2); }
.sm-plan { padding: 0 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--hair-2); }
.sm-plan-l { margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gilt); }
.sm-plan-b { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 9px; background: rgba(10, 17, 15, .55); border: 1px solid var(--hair-2); }
.sm-plan-b button { border: 0; background: none; border-radius: 6px; padding: 7px 0; color: #C9CFCB; font: 500 12px var(--font); cursor: pointer; }
.sm-plan-b button:hover { color: var(--willow); }
.sm-plan-b button[aria-pressed="true"] { background: var(--gilt); color: var(--ink); }
.sm-plan-n { margin: 7px 0 0; font-size: 12px; color: #8C9892; line-height: 1.4; }
@media (max-width: 1000px) { .dlay { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } .dside { position: sticky; } }
@media (max-width: 760px) {
  .dlay { grid-template-columns: 1fr; }
  .sb-menu { display: inline-flex; order: 0; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r); border: 1px solid rgba(212, 183, 122, .6); background: rgba(212, 183, 122, .1); color: var(--willow); font: 500 14px var(--font); cursor: pointer; }
  .sb-menu em { font-style: normal; font-size: 12px; color: var(--gilt); } .sb-menu em:empty { display: none; }
  .sb-burger { width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; } .sb-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
  .sb-tabs { order: 2; } .sb-search { order: 1; flex: 1 1 0; }
  .subbar { position: sticky; top: var(--bar-h); }
  .dside { position: fixed; z-index: 90; top: 0; bottom: 0; left: 0; width: min(330px, 86vw); border-radius: 0 var(--r) var(--r) 0; background: #14211D; transform: translateX(-102%); transition: transform .2s; padding: 14px; display: flex; flex-direction: column; }
  body.dside-open .dside { transform: none; }
  .dside-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 12px; }
  .dside-x { border: 1px solid var(--hair-2); background: none; color: var(--willow); border-radius: var(--r); padding: 6px 12px; font: 500 13px var(--font); }
  .smenu { max-height: none; flex: 1; overflow-y: auto; }
  .dscrim { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, .5); }
}

/* ---- navigation, third pass: no inner scrollbar, a plan control that fits ---- */
.dlay { grid-template-columns: 264px minmax(0, 1fr); }
.dside { padding: 14px 12px 6px 14px; }
/* the menu scrolls on its own when it is taller than the window, with its scroll bar always shown */
.smenu { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgba(212, 183, 122, .55) rgba(255, 255, 255, .04); padding-right: 6px; padding-bottom: 12px; }
.smenu::-webkit-scrollbar { width: 8px; }
.smenu::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 10px; }
.smenu::-webkit-scrollbar-thumb { background: rgba(212, 183, 122, .55); border-radius: 10px; }
.smenu::-webkit-scrollbar-thumb:hover { background: rgba(212, 183, 122, .8); }
.sm-plan-b { display: flex; flex-wrap: wrap; gap: 2px; }
.sm-plan-b button { flex: 1 1 auto; padding: 6px 7px; font-size: 12px; white-space: nowrap; }
.smenu a { line-height: 1.35; }
@media (max-width: 1000px) { .dlay { grid-template-columns: 236px minmax(0, 1fr); } }
@media (max-width: 760px) { .dlay { grid-template-columns: 1fr; } }

/* ---- the plan control as one piece: the tabs, and beneath them inside the same frame, the count ---- */
.sm-plan-b { display: grid; grid-template-columns: repeat(5, auto); gap: 2px; padding: 3px 3px 0; overflow: hidden; }
.sm-plan-b button { padding: 6px 4px; }
.sm-plan-n { grid-column: 1 / -1; margin: 3px -3px 0; padding: 6px 8px 7px; text-align: center; font-size: 11.5px; color: #8C9892; border-top: 1px solid var(--hair-2); background: rgba(233, 228, 216, .03); letter-spacing: .01em; }
.sm-plan-n b { color: var(--gilt); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .sm-plan-b button { padding: 6px 2px; font-size: 11.5px; } }
@media (max-width: 760px) { .sm-plan-b { grid-template-columns: repeat(5, 1fr); } }

/* search results */
.dresults { list-style: none; margin: 10px 0 0; padding: 0; }
.dresults li a { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hair); }
.dresults .dr-kind { font: 500 11px var(--code); color: var(--gilt); } .dresults b { font-weight: 500; color: var(--willow); font-size: 16px; }
.dresults code { font: 400 12px var(--code); color: #6F7C76; } .dresults span:last-child { font-size: 13.5px; color: var(--stone); }
.plans-t td.s-full { color: #9FCBA8; } .plans-t td.s-none { color: #6F7C76; } .plans-t td.s-sample, .plans-t td.s-window30, .plans-t td.s-window7, .plans-t td.s-toyesterday { color: var(--gilt); }
.plans-t td:first-child a { color: var(--willow); }
.dcontent .guide-body pre.rj { margin: 0 0 16px; }
.k-note a { color: var(--willow); border-bottom: 1px solid var(--hair-2); }
.sb-search { margin: 0; } .sb-search label { display: block; }
body { padding-top: 0; }

/* five plans: six buttons (All and the five) on one row */
.sm-plan-b { grid-template-columns: repeat(6, auto); }
.sm-plan-b button { padding: 6px 2px; font-size: 11.5px; }
@media (max-width: 1000px) { .sm-plan-b button { padding: 6px 1px; font-size: 11px; } }
@media (max-width: 760px) { .sm-plan-b { grid-template-columns: repeat(6, 1fr); } .sm-plan-b button { font-size: 12px; } }