/* Reaction Optimizer: greys and one accent, the family's olive slot (palette olive-bright: light #656900, dark #B9BF5F). Both themes by html[data-theme]. */
:root{
  --paper:#F4F5F3; --card:#FFFFFF; --ink:#1B1E1C; --ink2:#555B57; --edge:#D5D9D6;
  --accent:#656900; --on-accent:#FFFFFF; --tint:#EEF0D4; --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --site-hub-h:30px; --site-reset-gap:0; --bad:#9B2C3F; --on-bad:#FFF6F7;      /* red means "are you sure" and nothing else (rule 27) */
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#151716; --card:#1E211F; --ink:#D4D8D5; --ink2:#9AA09C; --edge:#343936;
  --accent:#B9BF5F; --on-accent:#101006; --tint:#2B2D17; --bad:#F0A0AF; --on-bad:#2B0F16; color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --paper:#151716; --card:#1E211F; --ink:#D4D8D5; --ink2:#9AA09C; --edge:#343936;
    --accent:#B9BF5F; --on-accent:#101006; --tint:#2B2D17; --bad:#F0A0AF; --on-bad:#2B0F16; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{background:var(--paper); color:var(--ink); font:15px/1.5 var(--sans)}
body{margin:0; padding:0 16px 40px; max-width:980px; margin-inline:auto}
.top{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 0}
.title{margin:0 0 0 8px; font-size:20px; font-weight:600; letter-spacing:.01em}
.title .acc{color:var(--accent)}
#theme{margin-left:auto}
main{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}      /* minmax(0,1fr): a wide table inside a card must not widen the whole page */
.card{background:var(--card); border:1px solid var(--edge); border-radius:10px; padding:14px 16px; min-width:0}
h2{margin:0 0 10px; font-size:15px; font-weight:600}
.vars{display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-bottom:10px}
.vrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) 38px; gap:8px}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px}
.row:first-child{margin-top:0}
input,select,button{font:inherit; color:var(--ink); min-height:38px}
input,select{background:var(--paper); border:1px solid var(--edge); border-radius:7px; padding:0 10px; min-width:0}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
input:disabled,select:disabled{opacity:.6}
input[aria-invalid="true"]{border-color:var(--ink); outline:2px dashed var(--ink2)}
button{cursor:pointer; border-radius:7px; border:1px solid var(--edge); background:transparent; padding:0 14px}
button:disabled{opacity:.5; cursor:default}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
button.ghost:hover:not(:disabled){background:color-mix(in srgb, currentColor 8%, transparent)}
button.sure,button.sure:hover:not(:disabled){background:var(--bad); border-color:var(--bad); color:var(--on-bad)}
input.num-in{width:8.5em}
.note:empty{display:none}
textarea{font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--edge); border-radius:7px; padding:8px 10px; width:100%; min-height:84px; resize:vertical}
textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}button.small{min-height:30px; padding:0 10px; font-size:13px}
button.x{padding:0; font-size:18px; line-height:1}
.num{display:inline-flex; align-items:center; gap:8px; color:var(--ink2)}
.num input{width:5.2em; text-align:right}
.count{color:var(--ink2)}
.note{color:var(--ink2); font-weight:600}
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:6px 8px 6px 0; border-bottom:1px solid var(--edge); white-space:nowrap}
th{color:var(--ink2); font-weight:600; font-size:13px; white-space:normal; vertical-align:bottom}
input.res{width:5.6em}
input.res.done{border-color:transparent; background:transparent}
input.res.done:hover,input.res.done:focus{border-color:var(--edge); background:var(--paper)}
.own select{max-width:16em}
.row.own{padding-top:10px; border-top:1px dashed var(--edge)}
tr.best td{background:var(--tint); color:var(--ink); font-weight:600}
tr.best td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.bestline-text{margin:0 0 8px; color:var(--ink2)}
.chartbox{position:relative; margin:4px 0 6px}
.chart{display:block}
.chart .axis{stroke:var(--edge); stroke-width:1}
.chart .tick{fill:var(--ink2); font:11px var(--sans)}
.chart .tick.faint{opacity:.55}
.chart .dot{fill:var(--dot, var(--ink2)); stroke:transparent; stroke-width:10; cursor:default}      /* the transparent stroke makes the dot easy to hit */
.chart .dot:hover{fill:var(--accent)}
.chart .dot.hit,.chart .dot.hit:hover{fill:transparent}      /* a random run: the dot is only the hit area, the dashed circle is drawn over it */
.ring{fill:none; stroke:var(--ink2); stroke-width:1.6; stroke-dasharray:3 2.4; pointer-events:none}
.chart .dot.hit:hover + .ring{stroke:var(--accent)}
.legend{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; justify-content:center; margin:2px 0 0; font-size:13px; color:var(--ink2)}
.legend .key{display:inline-flex; align-items:center; gap:6px}
.keydot{fill:var(--dot, var(--ink2))}
.chart .dlabel{fill:var(--ink2); font:10px var(--sans); pointer-events:none}
.tail{margin-top:26px; color:var(--ink2); max-width:78ch}
.tail h2{color:var(--ink)}
.tail details{margin:6px 0}
.tail summary{cursor:pointer; color:var(--ink); padding:6px 0}
.tail p{margin:6px 0}
.foot{margin-top:18px; font-size:13px}
@media (max-width:560px){
  .card{padding:12px}
  .vrow{grid-template-columns:minmax(0,1fr) 38px}
  .vrow input:nth-child(2){grid-column:1 / 2; grid-row:2}
  .vrow .x{grid-column:2; grid-row:1 / span 2}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}

/* the rounds: one after the other. A finished round folds to a line; the round being run has a coloured edge. */
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.round.current{border-left:4px solid var(--accent)}
.roundhead{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:6px}
.roundhead h2{margin:0}
details.round summary, details.setup summary{cursor:pointer; list-style-position:inside}
details.round{padding:10px 16px}
details.round[open] summary{margin-bottom:8px}
.vline{margin:2px 0; color:var(--ink2)}
.card.next{border-style:dashed}
.chart .roundline{stroke:var(--edge); stroke-width:1; stroke-dasharray:3 3}
/* the chart: the dot's conditions on hover, and a switch per variable to label the dots */
.dottip{position:absolute; z-index:3; pointer-events:none; background:var(--card); color:var(--ink); border:1px solid var(--edge); border-radius:8px; padding:6px 10px; font-size:13px; line-height:1.45; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.2)}
.dottip[hidden]{display:none}
.dottip .tiphead{font-weight:600; margin-bottom:2px}
.chips{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 2px}
button.chip[aria-pressed="true"]{background:var(--tint); border-color:var(--accent); color:var(--ink); font-weight:600}
.bestline-text:empty{display:none}
/* the Progress card's views (0.19.0): Wide makes the card as wide as the window, Full screen makes it fill the window. --page-w is set by the page: the window's width without its scroll bar */
.cardhead{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:10px}
.cardhead h2{margin:0}
.views{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.card.wide{width:calc(var(--page-w, 100vw) - 32px); margin-left:calc((100% - var(--page-w, 100vw) + 32px) / 2)}
.card.full{position:fixed; inset:0; z-index:1000; width:auto; margin:0; border:0; border-radius:0; overflow:auto}
html.fullview{overflow:hidden}
/* what a proposed condition is for (0.20.0): explore, best guess, near best, repeat. Four hues of one validated categorical palette, stepped for each card: on any pair of them
   (dots sit anywhere in a scatter) the light set passes colour-blind separation (worst 13.0) and normal vision (24.6), the amber alone under 3:1 on white (2.17); the dark set passes
   normal vision (19.3) and contrast, its green and amber at 6.9 for protan readers. Both leave colour never alone: the word is beside the swatch in the table, in the hover and in the legend. */
:root{--why-e:#2a78d6; --why-g:#008300; --why-n:#eda100; --why-r:#d55181}
:root[data-theme="dark"]{--why-e:#3987e5; --why-g:#008300; --why-n:#c98500; --why-r:#d55181}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){--why-e:#3987e5; --why-g:#008300; --why-n:#c98500; --why-r:#d55181}
}
.why-e{--dot:var(--why-e)} .why-g{--dot:var(--why-g)} .why-n{--dot:var(--why-n)} .why-r{--dot:var(--why-r)}
td .key{display:inline-flex; align-items:center; gap:4px; vertical-align:middle}
td.mu{color:var(--ink2)}

/* public site only: the names the kit's footer (site-footer.css) borrows from the page */
:root{--body:var(--ink2); --rule:var(--edge)}