/* horseracingapi.co.uk documentation: two columns, the menu then the page. */
.docs{display:grid;grid-template-columns:270px minmax(0,1fr);gap:36px;padding-top:24px;padding-bottom:80px}
.docs,.docs *{scrollbar-color:var(--green3) transparent}
.docs ::-webkit-scrollbar-thumb{background:var(--green3)}
.dmenu{position:sticky;top:82px;align-self:start;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
.dsearch{position:relative;margin-bottom:12px}
.dsearch input{width:100%;height:40px;border:1px solid var(--rule);border-radius:var(--r);padding:0 34px;font:400 14px var(--sans);background:#fff;color:var(--ink)}
.dsearch input:focus{outline:2px solid var(--champ2);border-color:var(--champ)}
.dsearch svg{position:absolute;left:11px;top:13px}
.dsearch kbd{position:absolute;right:10px;top:10px;font:400 11px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.dres{position:absolute;top:44px;left:0;width:360px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 40px -18px rgba(15,59,46,.4);z-index:20;display:none;max-height:420px;overflow:auto}
.dres.on{display:block}
.dres .rg{font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 12px 6px}
.dres a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);text-decoration:none;font-size:13px;color:var(--ink)}
.dres a .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dres a .w{color:var(--muted);font-size:11px;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.dres a.sel,.dres a:hover{background:var(--mist)}
.dres mark{background:var(--champ2);color:inherit;border-radius:3px}
.dres .none{padding:12px;font-size:13px;color:var(--ink2)}
.dfilter{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:4px;margin-bottom:10px}
.dfilter button{height:28px;border:0;border-radius:7px;background:none;font-size:12px;color:var(--ink2);cursor:pointer}
.dfilter button.on{background:var(--green);color:#fff}
.dlist{overflow:auto;padding:0 4px 8px 0;mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.dlist.free a:not([data-free]),.dlist.free .dg.nofree{display:none}
.dg{font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px 10px}
.dlist a{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;text-decoration:none;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlist a:hover{background:var(--mist)}
.dlist a.on{background:#fff;color:var(--green);box-shadow:inset 3px 0 0 var(--champ)}
.dot2{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.p-free{background:#9AA59F}.p-live{background:var(--live)}.p-complete{background:var(--complete)}
.dpage{min-width:0}
.dpage h1{font:300 40px/1.1 var(--disp);margin:6px 0 12px}
.dpage .crumbs{font-size:12px;color:var(--muted)}
.dpage .crumbs a{color:var(--muted);text-decoration:none}
.dpage .lead{color:var(--ink2);font-size:16px;max-width:780px}
.dpage h2{font:400 22px/1.2 var(--disp);margin:40px 0 12px}
.dpage h3{font:400 17px/1.3 var(--disp);margin:24px 0 8px}
.dpage h3.sub{margin-top:28px}
.dpage p{max-width:780px}
.dpage code{font:400 12.5px var(--mono);color:var(--green)}
.dpage .code code,.dpage pre code{color:inherit}
.dpage a{color:var(--green3)}
.guide ul,.guide ol{color:var(--ink2);max-width:780px;padding-left:20px}
.guide li{margin:6px 0}
.guide pre.code{margin:12px 0;height:auto}
.hchips{display:flex;gap:6px;flex-wrap:wrap}
.hchips a.chip{text-decoration:none}
.callbar{display:flex;align-items:center;gap:10px;background:#0B2F25;color:#D7E3DD;border-radius:var(--r);padding:12px 14px;font:400 14px var(--mono);margin:18px 0}
.callbar .m{background:var(--champ);color:#1d1708;border-radius:6px;padding:3px 8px;font-size:12px}
.callbar .u{flex:1;min-width:0;overflow-wrap:anywhere}
.callbar button{height:30px;width:72px;border:1px solid #2f6553;border-radius:8px;background:none;color:#D7E3DD;font-size:12px;cursor:pointer;flex:none}
.try{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:12px}
.try .th{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font:400 15px var(--disp)}
.try .tn{font:400 12px var(--sans);color:var(--muted)}
.try .tb{padding:14px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fld input,.fld select{width:100%;height:38px;border:1px solid var(--rule);border-radius:var(--r);padding:0 10px;font:400 14px var(--sans);background:#fff;color:var(--ink)}
.fld input:invalid{border-color:var(--rose)}
.keyf{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) repeat(2,84px) 150px;gap:8px;align-items:end}
.keyf .btn{height:38px;font-size:12px;width:100%}
.tf{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line);background:var(--paper);gap:12px}
.tf .u{font:400 12px var(--mono);color:var(--ink2);overflow-wrap:anywhere;min-width:0}
.tf .btn{width:120px;flex:none}
.ans{margin-top:12px}
.ans .ah{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:8px;flex-wrap:wrap}
.ans .ah a{color:var(--green3)}
.ans pre.code{max-height:520px;overflow:auto;height:auto}
.ok200,.pend,.bad4{border-radius:6px;padding:2px 8px;white-space:nowrap}
.ok200{background:#E6F2EC;color:var(--ok)}
.pend{background:var(--paper);color:var(--ink2);border:1px solid var(--line)}
.bad4{background:#F6E6E3;color:var(--rose-ink)}
.cbar{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:6px;margin:16px 0 8px}
.cbar .btn{width:100%;height:30px;font-size:12px}
.cbar .codetabs{margin:0}
#code{height:auto}
.ptbl td code{font:400 12.5px var(--mono);color:var(--green)}
.ptbl td{background:#fff;white-space:nowrap}
.ptbl td.wr{white-space:normal;color:var(--ink2);min-width:220px}
.ptbl tbody tr:hover td{background:var(--mist)}
.guide .tbl{margin:12px 0}
.guide .ptbl td{white-space:normal}
.vals{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.vals span{font:400 11px var(--mono);background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink2)}
.pn2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:44px}
.pn2 a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;min-width:0}
.pn2 a .pl{display:block;font-size:12px;color:var(--muted)}
.pn2 a .pt{display:block;font:400 15px var(--disp);color:var(--ink);overflow-wrap:anywhere}
.pn2 a:last-child{text-align:right}
.steps3,.lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:16px}
.stp,.lcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.stp .n{font:300 28px/1 var(--disp);color:var(--champ)}
.stp .t,.lcard .t{font:400 17px/1.2 var(--disp)}
.stp p,.lcard p{margin:0;font-size:13px;color:var(--ink2);flex:1}
.stp .btn{width:100%}
.lcard ul{list-style:none;padding:0;margin:4px 0 0;font:400 12px var(--mono);display:flex;flex-direction:column;gap:5px}
.lcard ul a{text-decoration:none;color:var(--green);overflow-wrap:anywhere}
.lcard .go{font-size:13px;color:var(--green3);text-decoration:none}
.egroup{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-top:12px;overflow:hidden}
.egroup .eh{display:flex;gap:12px;align-items:baseline;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line);flex-wrap:wrap}
.egroup .eh .t{font:400 16px var(--disp)}
.egroup .eh .p{font-size:13px;color:var(--ink2)}
.erow{display:grid;grid-template-columns:10px minmax(0,300px) minmax(0,1fr);gap:10px;align-items:center;padding:9px 16px;border-top:1px solid var(--line);text-decoration:none;font-size:13px;color:var(--ink2)}
.erow:first-of-type{border-top:0}
.erow:hover{background:var(--mist)}
.erow code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend2{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.legend2 span{display:inline-flex;align-items:center;gap:6px}
.agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:16px}
.ag{background:var(--green);color:var(--bone);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.ag .t{font:400 16px var(--disp)}
.ag p{margin:0;font-size:12.5px;color:#CFDAD4;flex:1}
.ag code{font:400 11px var(--mono);color:var(--champ);overflow-wrap:anywhere}
.ag .agb{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ag .agb a,.ag .agb button{height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #3a6f5d;border-radius:8px;background:none;color:#E6EEEA;font:400 12px var(--sans);text-decoration:none;cursor:pointer}
.news{list-style:none;padding:0;margin:0;max-width:780px}
.news li{padding:10px 0;border-top:1px solid var(--line);color:var(--ink2);font-size:14px}
.news li span{display:inline-block;width:110px;color:var(--muted);font:400 12px var(--mono)}
.rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.rest>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.rest .t{font:400 16px var(--disp)}
.rest .t a{color:var(--ink);text-decoration:none}
.rest p{margin:6px 0 0;font-size:13px;color:var(--ink2)}
.faqd{max-width:780px}
@media (max-width:1060px){
  .docs{grid-template-columns:minmax(0,1fr);gap:20px}
  .dmenu{position:static;max-height:none}
  .dlist{max-height:300px}
  .dres{width:100%}
  .dpage h1{font-size:30px}
  .steps3,.lg,.rest{grid-template-columns:minmax(0,1fr)}
  .agents{grid-template-columns:repeat(2,minmax(0,1fr))}
  .try .tb{grid-template-columns:minmax(0,1fr)}
  .keyf{grid-template-columns:1fr 1fr}
  .keyf .fld{grid-column:1/-1}
  .keyf .btn.sec{grid-column:1/-1}
  .erow{grid-template-columns:10px minmax(0,1fr)}
  .erow span{grid-column:2}
  .pn2{grid-template-columns:minmax(0,1fr)}
  .ptbl{display:block;overflow-x:auto}
}
@media (max-width:600px){.agents{grid-template-columns:minmax(0,1fr)}.tf{flex-wrap:wrap}.tf .btn{width:100%}}
