/* the friend's page (public.html): its own, none of the kit. Solarized, following the system's
   light or dark; JetBrains Mono from this same host. Phone first: a time is a whole-width tap. */
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(public-400.woff2) format("woff2")}
:root{--bg:#fdf6e3;--fg:#073642;--dim:#93a1a1;--head:#946c00;--link:#1a6fa9;--rule:#e4ddc8;--on:#2aa198;--px:1.25px}
@media (prefers-color-scheme:dark){:root{--bg:#002b36;--fg:#93a1a1;--dim:#586e75;--head:#b58900;--link:#2aa198;--rule:#0a3c48;--on:#2aa198}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--fg);font:calc(15*var(--px))/1.5 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-ligatures:none;-webkit-text-size-adjust:100%}
@media (min-width:700px){html{font-size:calc(16*var(--px))}}
body{margin:0;overflow-wrap:anywhere}
main{max-width:34em;margin:0 auto;padding:.5em calc(14*var(--px)) 6em}
h1{color:var(--head);font-size:1.15em;margin:1em 0 .1em}
h2{color:var(--head);font-size:.95em;margin:1.3em 0 .4em}
p{margin:.3em 0}
a{color:var(--link)}
.dim{color:var(--dim)}
button,input{font:inherit;color:var(--fg);background:var(--bg);border:calc(1*var(--px)) solid var(--dim);border-radius:calc(3*var(--px))}
#name{width:100%;padding:.55em .6em;margin:.8em 0 .2em;font-size:1.05em}
.zone{font-size:.85em}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(9em,1fr));gap:.4em}
.slot{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:.5em .6em;min-height:3.2em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.slot b{font-weight:400}
.slot small{color:var(--dim);font-size:.75em;line-height:1.3}
.slot.best{border-color:var(--link)}
.slot[aria-pressed=true]{background:var(--on);border-color:var(--on);color:var(--bg)}
.slot[aria-pressed=true] small{color:var(--bg)}
.save{position:sticky;bottom:0;background:var(--bg);padding:.7em 0;margin-top:1em;border-top:calc(1*var(--px)) solid var(--rule)}
#save,.btn{padding:.55em 1.6em;font-size:1.05em;background:var(--link);border-color:var(--link);color:var(--bg);cursor:pointer;text-decoration:none;display:inline-block}
#msg{color:var(--dim);margin-left:.6em}
#msg.bad{color:#dc322f}
.when{font-size:1.1em;margin-top:1em}
.where{margin:.6em 0 1.2em}