/* ProtoPep. One stylesheet, no inline styles, so the content security
   policy can forbid anything injected. Phone first. */

@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-display:swap;src:url("fonts/instrument-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}

:root{
  --bg:#F3F6F5;--surface:#FFFFFF;--sunk:#E8EEEC;--ink:#0F1F1B;--muted:#4C5B56;--line:#CFD8D4;
  --accent:#0A6558;--on-accent:#FFFFFF;--link:#0A6558;--flag:#9A4A06;--flag-bg:#FBEBD9;
  --d1:#1B57B0;--d1-soft:#D5E2F6;--bad:#A3261B;--bad-bg:#FBE4E1;--ok-bg:#DDF0EA;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1412;--surface:#16201D;--sunk:#1D2A26;--ink:#E6EEEB;--muted:#A3B5AE;--line:#2C3B36;
    --accent:#56D3B8;--on-accent:#06231D;--link:#56D3B8;--flag:#F4AB66;--flag-bg:#3A2610;
    --d1:#7FB0F5;--d1-soft:#1C3050;--bad:#FF9D92;--bad-bg:#3D1613;--ok-bg:#12332B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1412;--surface:#16201D;--sunk:#1D2A26;--ink:#E6EEEB;--muted:#A3B5AE;--line:#2C3B36;
  --accent:#56D3B8;--on-accent:#06231D;--link:#56D3B8;--flag:#F4AB66;--flag-bg:#3A2610;
  --d1:#7FB0F5;--d1-soft:#1C3050;--bad:#FF9D92;--bad-bg:#3D1613;--ok-bg:#12332B;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;line-height:1.45}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding-left:20px;display:flex;flex-direction:column;gap:6px}
a{color:var(--link)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-size:28px;line-height:1.12;letter-spacing:-0.02em}
h2{font-size:18px;line-height:1.25}
h3{font-size:16px}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.muted{color:var(--muted)}
.small{font-size:14px}
.tiny{font-size:13px}
.big{font-size:22px;font-weight:600;letter-spacing:-0.01em}
.huge{font-size:28px;font-weight:600;letter-spacing:-0.02em;overflow-wrap:anywhere}
.strong{font-weight:600}
.break{overflow-wrap:anywhere}

.strip{font-size:12px;padding:6px 16px;text-align:center;background:var(--flag-bg);color:var(--flag)}
.strip.acting{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-size:14px;padding:10px 16px}
.wrap{max-width:492px;margin:0 auto;padding:0 16px 32px;display:flex;flex-direction:column;gap:20px}
.wrap.wide{max-width:1240px}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-m{display:flex;flex-direction:column;gap:12px}
.stack-s{display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row.top-align{align-items:flex-start}
.wraps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.start{align-self:flex-start}
.pad-top{padding-top:8px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;flex-wrap:wrap}
.brand{font-weight:700;font-size:20px;letter-spacing:-0.01em;min-height:44px;display:flex;align-items:center;color:var(--ink);text-decoration:none}
.top-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none}
.chip.mono{font-size:14px;font-weight:500}
.plain-link{min-height:44px;display:inline-flex;align-items:center}

.btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;text-decoration:none;width:100%;text-align:center}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.btn.fit{width:auto}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-s{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;flex:none}

.field{width:100%;min-height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px}
.field.code-in{font-size:22px;letter-spacing:.3em;min-height:56px}
.field.narrow{width:120px;flex:none}
.field.pick{font-size:15px;padding:0 12px;text-overflow:ellipsis}
.lab{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.lab .unit{font-weight:400;color:var(--muted)}
.lab-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
.lab-row:last-child{border-bottom:0}
.lab-row .unit{display:block;font-weight:400;font-size:12px;color:var(--muted)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card.flat{padding:0;overflow:hidden;gap:0}
.card.tight{padding:4px 16px;gap:0}
.card.sunk{background:var(--sunk)}
.note{padding:16px;border-radius:12px;background:var(--sunk);display:flex;flex-direction:column;gap:6px}
.warn{padding:14px 16px;border-radius:12px;background:var(--flag-bg);color:var(--flag);display:flex;flex-direction:column;gap:4px;font-size:14px}
.warn strong{font-size:15px}
a.warn{text-decoration:none}
.change{flex:none;font-size:17px;font-weight:600}
.alert{padding:12px 14px;border-radius:10px;background:var(--bad-bg);color:var(--bad);font-weight:600;display:flex;flex-direction:column;gap:4px}
.saved{padding:12px 14px;border-radius:10px;background:var(--ok-bg);font-weight:600}
.code{display:inline-flex;align-items:center;font-size:13px;font-weight:500;padding:4px 8px;border-radius:6px;background:var(--sunk);color:var(--ink)}
.code.roomy{padding:6px 10px}
.tag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;font-size:13px;font-weight:600;background:var(--flag-bg);color:var(--flag)}
.tag.plain{background:var(--sunk);color:var(--ink)}
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.totals>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.totals dt{font-size:13px;color:var(--muted)}
.totals dd{margin:0;font-size:24px;font-weight:600;line-height:1.2}
.gap{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;padding:2px 6px;border-radius:6px;background:var(--flag-bg);color:var(--flag)}

.tick{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;font-size:16px}
.tick input,.effect>input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.tick .sub{display:block;font-size:14px;color:var(--muted)}

/* A number with its unit, on the log page */
.num-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
.num-row:last-child{border-bottom:0}
.num-row>label{min-width:0;flex:1}
.unit-in{display:flex;align-items:center;gap:6px;flex:none}
.unit-in>input{width:96px;padding:0 10px}
.unit-pick{width:auto;min-width:86px;padding:0 6px;font-size:13px}
.unit-fixed{min-width:86px;font-size:13px;font-weight:400;color:var(--muted)}
.group-title{padding:10px 0 4px;font-size:14px;color:var(--muted);font-weight:600}
.card.tight>details>summary{margin:0}
.log-grid{display:flex;flex-direction:column;gap:12px}

/* Rows that are links or list entries */
.rows>*{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.rows>*:last-child{border-bottom:0}
.rows .two{display:flex;flex-direction:column;gap:2px;min-width:0}
.rows .name{font-weight:600;font-size:17px}
.entry{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.entry:last-child{border-bottom:0}

/* Pills and segments. They are links, or labels around hidden radio inputs. */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill,.pills label>span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px;text-decoration:none}
.pill.on,.pills input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.pills label{position:relative;display:inline-flex}
.pills input,.segs input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pills input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.segs{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.segs>a,.segs label{flex:1;position:relative;display:flex;color:var(--ink);text-decoration:none}
.segs>a,.segs label>span{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:0;padding:0 4px;font-size:14px;border-left:1px solid var(--line);text-align:center}
.segs>a:first-child,.segs label:first-child>span{border-left:0}
.segs>a.dim{color:var(--muted)}
.badge{display:inline-flex;align-items:center;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:600;background:var(--ink);color:var(--bg);font-family:"Instrument Sans",system-ui,sans-serif}
.badge.soft{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.segs>a.on,.segs input:checked+span{background:var(--ink);color:var(--bg);font-weight:600}
.segs>a:focus-visible,.segs input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-3px}

.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:64px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none}
.opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--sunk)}
.opt.dashed{border-style:dashed;background:transparent}
.opt .code-big{font-size:16px;font-weight:600;overflow-wrap:anywhere}
label.opt{flex-direction:row;gap:12px;min-height:96px;font-size:16px;cursor:pointer}
label.opt input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);flex:none}

/* Side effect rows in the log: the rating appears once the box is ticked */
.effect{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;row-gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
.effect:last-child{border-bottom:0}
.effect>label{min-height:32px;display:flex;align-items:center;font-size:16px}
.effect>.segs{grid-column:1/-1;display:none}
.effect>input:checked~.segs{display:flex}

details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--link)}
details[open]>summary{margin-bottom:8px}

/* Charts */
.chart{display:flex;gap:8px;align-items:stretch}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;font-size:12px;color:var(--muted);text-align:right;min-width:36px}
.chart-plot{flex:1;min-width:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.chart-plot svg{display:block;width:100%;height:auto}
.chart-x{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-left:44px}
.chart-axis{font-size:13px;color:var(--muted);text-align:center}
.c-band{fill:var(--d1-soft);stroke:none}
.c-line{fill:none;stroke:var(--d1);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.c-dots{fill:var(--d1);stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
.c-flag{fill:var(--flag);stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
.c-range{fill:none;stroke:var(--flag);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.c-zero{fill:none;stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.c-bound{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.legend{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.legend>span{display:flex;align-items:center;gap:8px}
.sw{flex:none;width:20px}
.sw.line{height:3px;background:var(--d1)}
.sw.band{height:10px;background:var(--d1-soft)}
.sw.range{height:0;border-top:2px dashed var(--flag)}
.sw.zero{height:0;border-top:1px solid var(--muted)}
.sw.bound{width:0;height:14px;border-left:2px solid var(--ink);margin:0 9px}
progress{width:100%;height:8px;accent-color:var(--d1)}
.bar{display:flex;flex-direction:column;gap:4px;font-size:15px}

.steps>div{display:flex;gap:12px;align-items:flex-start}
.num{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--sunk);font-size:14px;font-weight:600;flex:none}
.admin-nav{display:flex;flex-direction:column;gap:12px}
.admin-nav>div{display:flex;flex-direction:column;gap:6px}
.pager{display:flex;justify-content:space-between;gap:8px}
.divide{border-top:1px solid var(--line)}

.foot{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.theme{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.theme button{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:transparent;font-size:14px;color:var(--ink)}
.theme button.on{background:var(--sunk);font-weight:600}

/* The compound page. On a phone the order is protocols, chart, filters,
   then the rest. On a wide screen protocols and filters sit in a side column. */
.cols{display:flex;flex-direction:column;gap:20px}
.cols>.side,.cols>.main{display:contents}
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}
@media (min-width:900px){
  .cols{flex-direction:row;gap:32px;align-items:flex-start}
  .cols>.side{display:flex;flex-direction:column;gap:20px;flex:0 0 340px;min-width:0}
  .cols>.main{display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}
  .cols .o1,.cols .o2,.cols .o3,.cols .o4{order:0}
}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:start}
.inline-form{display:flex;gap:8px;align-items:flex-end}
.inline-form>.lab{flex:1;min-width:0}
.actions{display:flex;flex-direction:column;gap:10px}
.title-row{display:flex;flex-direction:column;gap:12px}
@media (min-width:900px){
  .wrap.wide{padding:0 32px 40px}
  .wrap.wide h1{font-size:36px}
  .title-row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .title-row .actions{flex-direction:row}
  .title-row .btn{width:auto}
}

/* The reminder shown once after each sign in. Closed by its own button, no script. */
dialog.remind[open]{position:fixed;inset:0;z-index:10;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:rgba(8,16,14,.72);color:var(--ink);display:flex;align-items:center;justify-content:center;overflow:auto}
.remind-card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px}
.remind-card h2{font-size:22px}

fieldset.plain-set{border:0;padding:0;margin:0;min-width:0}
fieldset.plain-set>legend{padding:0;margin-bottom:8px}
.pill.off{color:var(--muted);border-style:dashed;text-decoration:line-through}
button.pill{cursor:pointer}
fieldset.plain-card{margin:0;min-width:0}
fieldset.plain-card>legend{padding:0 6px}
.stack-title{font-size:22px}
@media (min-width:900px){.wrap.wide h1.stack-title{font-size:28px}}

/* ------------------------------------------------------------- desktop view
   Everything above is the phone layout. From 900px the pages that mark
   themselves wide spread out: a site menu in the header, lists in columns,
   and side by side panels. Pages that are a single short form stay narrow
   and centred, because a form does not get better by being wider. */
.site-nav{display:none}
.grid-rows>a{min-width:0}
.masonry{display:flex;flex-direction:column;gap:20px}
.rate-grid{display:flex;flex-direction:column;gap:12px}
.effect-grid{display:block}
.narrow-col{display:flex;flex-direction:column;gap:20px}
@media (min-width:900px){
  .wrap{max-width:560px}
  .wrap.wide{max-width:1240px}
  .site-nav{display:flex;gap:4px;margin-right:auto;margin-left:24px}
  .site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
  .site-nav a:hover{background:var(--sunk)}
  .wide .inline-form[role="search"]{max-width:640px}
  .wide nav.segs{max-width:640px}
  .wide .totals{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wide .pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wide .pair>:only-child{grid-column:1/-1}
  /* Lists become a grid of separate cards */
  .wide .card.flat.rows.grid-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;background:transparent;border:0;border-radius:0;overflow:visible}
  .wide .grid-rows>a{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .wide .grid-rows>a:hover{border-color:var(--ink)}
  .wide .grid-rows>p{grid-column:1/-1}
  /* Cards of uneven height flow into two columns */
  .wide .masonry{display:block;columns:2;column-gap:20px}
  .wide .masonry>*{break-inside:avoid;margin-bottom:20px}
  .wide .log-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));align-items:start}
  .wide .rate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px 24px}
  .wide .effect-grid{columns:3;column-gap:32px}
  .wide .effect-grid>.effect{break-inside:avoid}
  .wide .narrow-col{max-width:640px}
  .wide .btn.fit-wide{width:auto;align-self:flex-start;min-width:240px}
  .wide .button-row{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap}
  .wide .button-row>.btn,.wide .button-row>form>.btn{width:auto;min-width:200px}
  .wide .admin-nav{flex-direction:row;flex-wrap:wrap;gap:12px 32px}
  dialog.remind[open] .remind-card{max-width:520px}
}
@media (min-width:1200px){
  .wide .log-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.button-row{display:flex;flex-direction:column;gap:6px}
@media (min-width:900px){
  .wide .entry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .wide .entry-grid>.entry{border-bottom:1px solid var(--line)}
  .wide form.card,.wide .narrow-col{max-width:640px}
  .wide .masonry form.card,.wide .cols form.card{max-width:none}
  .wide details>.stack-m{max-width:none}
}
textarea.field.area.short{min-height:110px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px}
textarea.field.area{min-height:180px;padding:12px 14px;line-height:1.45;resize:vertical;font:inherit;font-size:16px}
.statement{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 14px;border-radius:10px;background:var(--sunk);font-size:15px}