/* Lessen shared pages (/share, /clinic). Same material as the site: warm
   paper lit from the top left, see-through glass cards with a bright top
   and left rim and a soft warm cast shadow, a serif for the numbers and a
   sans for everything else. Color only ever says what state someone is in. */
:root{--paper:#1F1A15;--ink:#F2EEE7;--sec:#A8A29A;--muted:#9D9588;--sage:#83A78C;--clay:#C4915F;--terracotta:#C07A6E;--well:rgba(255,248,236,.072);--hair:rgba(255,248,236,.117);--bone:#131211}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper)}
body{min-height:100vh;color:var(--ink);font-family:'Inter',-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;padding:22px 16px 70px;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(255,248,236,.085), rgba(255,248,236,.03) 60%),
    radial-gradient(700px 520px at 100% 110%, rgba(0,0,0,.272), rgba(0,0,0,0) 60%),
    var(--paper);
  background-attachment:fixed}
.wrap{max-width:620px;margin:0 auto}
.serif{font-family:'Newsreader',Georgia,serif;letter-spacing:-.02em;font-weight:400}
h1{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:32px;line-height:1.1;letter-spacing:-.02em}
.card{position:relative;margin-top:16px;padding:22px 22px 20px;border-radius:26px;
  background:linear-gradient(152deg,rgba(255,248,236,.072) 0%,rgba(255,248,236,.05) 48%,rgba(255,248,236,.041) 100%);
  border:0.5px solid rgba(255,248,236,.068);border-top-color:rgba(255,248,236,.122);border-left-color:rgba(255,248,236,.098);
  box-shadow:0 1px 0 rgba(255,248,236,.088) inset, 0 -1px 0 rgba(255,248,236,.065) inset, 0 20px 44px -22px rgba(0,0,0,.544)}
.center{text-align:center;padding:48px 24px}
.label{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sub{color:var(--sec);font-size:13.5px;line-height:1.6;margin-top:8px}
.small{font-size:12px}
.banner{font-size:12.5px;color:var(--sec);text-align:center;margin:16px 8px 4px}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:6px}
.who{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:34px;letter-spacing:-.02em;line-height:1.05}
.fresh{font-size:12.5px;color:var(--sec);margin-top:6px}
button{font-family:inherit;cursor:pointer}
button.refresh{border:0.5px solid rgba(255,248,236,.286);background:transparent;color:var(--ink);border-radius:999px;padding:0 18px;min-height:42px;font-size:13.5px;white-space:nowrap}
button.refresh:hover{background:rgba(255,248,236,.065)}
button.refresh:disabled{opacity:.55;cursor:default}
.cov{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:var(--sec);font-size:12.5px;padding:8px 4px 0;text-align:left}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sage);flex:none}
.dot.gray{background:var(--muted)}
.q{margin-left:auto;width:18px;height:18px;border-radius:50%;border:0.5px solid rgba(255,248,236,.325);font-size:11px;display:inline-flex;align-items:center;justify-content:center;color:var(--sec)}
.covwhy{display:none;font-size:12.5px;color:var(--sec);padding:8px 4px 0;line-height:1.55}
.covwhy.open{display:block}
.big{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:56px;line-height:1;letter-spacing:-.025em;margin:4px 0 6px;font-variant-numeric:tabular-nums}
.sage{color:var(--sage)}.clay{color:var(--clay)}.terracotta{color:var(--terracotta)}.mutedc{color:var(--muted)}
.rowline{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--hair);font-size:14px;line-height:1.45}
.rowline:first-of-type{border-top:0}
.rowline span:last-child{white-space:nowrap;text-align:right}
.rowline span:first-child{flex:1}
.rowline span:only-child{text-align:left}
.grid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:10px}
.cell{aspect-ratio:1;border-radius:3px;background:var(--well);cursor:pointer}
.cell.sel{outline:1.5px solid var(--ink);outline-offset:1px}
input{width:100%;min-height:54px;padding:0 18px;border-radius:14px;margin:12px 0 0;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(255,248,236,.09);border:0.5px solid rgba(255,248,236,.208);box-shadow:inset 0 1px 3px rgba(255,248,236,.091)}
input:focus{outline:0;border-color:var(--sec);box-shadow:inset 0 1px 3px rgba(255,248,236,.156)}
input::placeholder{color:var(--muted)}
button:not(.refresh):not(.link):not(.quiet):not(.cov):not(.vbtn):not(.google-sign-in){display:block;width:100%;min-height:54px;margin-top:12px;border:0;border-radius:999px;background:var(--ink);color:var(--bone);font-size:15px;font-weight:500;
  box-shadow:0 14px 30px -16px rgba(255,248,236,.715)}
button.quiet{display:block;width:100%;margin-top:10px;border:0;background:none;color:var(--sec);font-size:13.5px;padding:8px}
button.link{background:none;border:0;color:var(--sec);font-size:13px;padding:6px 0}
.err{color:var(--terracotta);font-size:13px;margin-top:10px;min-height:1em}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--well);font-size:12px;margin:4px 6px 0 0}
.foot{text-align:center;font-size:12px;color:var(--muted);margin-top:34px;line-height:1.6}
.vrow{display:flex;flex-wrap:wrap;gap:8px}
dialog{color:var(--ink);background:#1F1A15;border:0;border-radius:16px;padding:24px;width:min(520px,calc(100% - 32px));max-height:80vh;box-sizing:border-box;box-shadow:inset 1.5px 1.5px 0 rgba(255,248,236,.125),inset -1.2px -1.2px 0 rgba(110,95,72,.2),0 7px 16px -5px rgba(255,248,236,.115),0 20px 34px rgba(105,90,66,.2)}
dialog::backdrop{background:rgba(19,18,17,.35)}
.history-list{display:flex;flex-direction:column;gap:8px;max-height:45vh;overflow-y:auto;padding:4px}
.history-list .vbtn{white-space:normal;text-align:left}
.vbtn{border:0.5px solid rgba(255,248,236,.234);background:transparent;color:var(--ink);border-radius:999px;padding:7px 13px;font-size:12.5px}
.vbtn.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.old{margin-top:16px;padding:14px 18px;border-radius:18px;background:var(--well);font-size:13px;color:var(--sec);line-height:1.5}
@media (max-width:480px){.who{font-size:28px}.big{font-size:46px}.card{padding:18px 16px 16px;border-radius:22px}}
.rowline.chg span{flex:1;text-align:left;white-space:normal}
.hrow{display:flex;align-items:center;gap:8px;margin-top:6px}.hrow .track{flex:1;height:6px;border-radius:3px;background:var(--well);overflow:hidden;display:block}.hrow .fill{display:block;height:6px;border-radius:3px;background:var(--ink);opacity:.55}.wchart{width:100%;height:auto;display:block;margin-top:6px}.wchart rect{cursor:pointer}.wchart rect.sel{stroke:var(--ink);stroke-width:1.5}
