/* the web door: choosing the folder, or opening it again */
.webdoor{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 700px at 20% 0%,color-mix(in srgb,var(--teal) 16%,transparent),transparent 60%),radial-gradient(900px 600px at 100% 100%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 60%),var(--bg);color:var(--ink);overflow:auto}
.wdcard{max-width:520px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:36px 32px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);animation:wdIn .5s var(--spring,ease) both}
.wdcard h1{font-family:'Lora',serif;font-weight:500;font-size:40px;margin:14px 0 4px;letter-spacing:-.01em}
.wdlead{font-family:'Lora',serif;font-style:italic;color:var(--ink2);font-size:18px;margin:0 0 18px}
.wdcard p{line-height:1.6;color:var(--ink2);margin:0 0 14px}
.wdcard b{color:var(--ink);font-weight:600}
.wdmark{width:52px;height:52px;color:var(--ink)}.wdmark svg{width:100%;height:100%;display:block}
.wdbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:var(--tint);color:#06121f;font-weight:600;padding:12px 22px;border-radius:999px;margin:8px 10px 6px 0;transition:transform .15s}
.wdbtn:hover{transform:translateY(-1px)}
.wdbtn:focus-visible,.wdlink:focus-visible{outline:2px solid var(--tint);outline-offset:3px}
.wdlink{all:unset;cursor:pointer;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;margin-left:6px}
.wdsmall{font-size:13px;color:var(--ink3)!important;margin-top:18px!important}
@keyframes wdIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wdcard{animation:none}}
@media (max-width:520px){.wdcard{padding:26px 20px}.wdcard h1{font-size:32px}}
/* no desktop window chrome on the web */
html .winbtns,html #winCtl{display:none!important}
/* first run: a folder for each authority */
.wdcard.wide{max-width:600px}
.wdrows{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.wdrows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.wdf{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wdf::before{content:"";display:inline-block;width:16px;height:12px;margin-right:8px;border-radius:2px 2px 3px 3px;background:var(--fc,var(--tint));vertical-align:-1px}
.wdrows li{border-left:4px solid var(--fc,var(--line))}
.wdcols{grid-column:1 / -1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wdcl{font-size:12px;color:var(--ink3);margin-right:2px}
.wdsw{all:unset;cursor:pointer;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);position:relative}
.wdsw[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.wdsw:focus-visible{outline:2px solid var(--tint);outline-offset:4px}
.wdrows label,.wdname{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink3)}
.wdrows input,.wdname input{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--ink);font:inherit;font-size:14px}
.wdrows input:focus,.wdname input:focus{outline:none;border-color:var(--tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 22%,transparent)}
.wdname{margin:6px 0 4px}
.wdx{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--ink3);font-size:18px}
.wdx:hover{background:var(--line);color:var(--ink)}
.wdbtn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
@media (max-width:520px){.wdrows li{grid-template-columns:1fr auto}.wdrows label{grid-column:1 / -1;grid-row:2}.wdcols{grid-row:3}}
/* how to say yes to Chrome, step by step, with a picture of the box */
.wdsteps{margin:4px 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink2);line-height:1.5}
.wdmock{margin:14px 0 16px;max-width:430px;cursor:pointer}
.wdmock figcaption{font-size:13px;color:var(--ink2);margin:0 0 8px;line-height:1.45}
.wdm-pic{border:1px dashed var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;font-size:12px;opacity:.72;transform:scale(.94);transform-origin:left top;pointer-events:none}
.wdm-h{display:flex;gap:8px;align-items:center;color:var(--ink);margin-bottom:10px}
.wdm-i{width:14px;height:11px;border-radius:2px;background:var(--ink3);flex:none}
.wdm-b{display:flex;gap:6px;flex-wrap:wrap}
.wdm-btn{padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)}
.wdm-btn.hi{border:2px solid var(--tint);color:var(--ink);font-weight:600;box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 20%,transparent)}
.wdthemes{justify-content:flex-start;margin:0 0 14px}
.wdh2{font-family:'Lora',serif;font-weight:500;font-size:22px;margin:4px 0 8px}
.wdfold{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.wdfold li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.wdfold small{color:var(--ink3);font-size:12.5px}
.wdst{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink3)}
.wdfold li.ok .wdst{background:#2fa565;border-color:#2fa565}.wdfold li.ok small{color:#2fa565}
.wdfold li.no .wdst{border-color:#d9503c}.wdfold li.no small{color:#d9503c}
.webdoor .wdinstall{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wdflag{display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 6px 6px 10px;border-radius:10px;background:rgba(127,127,127,.12);width:fit-content;max-width:100%}
.wdflag code{font-family:var(--mono,ui-monospace,monospace);font-size:13px;color:var(--ink);word-break:break-all;user-select:all}
.wdcopy{appearance:none;border:1px solid rgba(127,127,127,.35);background:transparent;color:var(--ink);border-radius:8px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.wdcopy:hover{background:rgba(127,127,127,.15)}