/* outcome: the consequence, the third act of a clip (see outcome.js for how a clip calls it). Drawn in the clip's canvas, in
   design pixels, so it scales with the frame. Black and white by the clip's ground (.day is black on white); the only colour is
   the grade's tag and, if the clip asks, the filling line (--oline, a product colour). Needs ../base/base.css (fonts) and
   ../clips/clips.css (the canvas). */
.oc{position:absolute;z-index:30;display:flex;align-items:center;justify-content:center;
  --oi:oklch(100% 0 0);--oi2:oklch(100% 0 0/.74);--oi3:oklch(100% 0 0/.5);--or:oklch(100% 0 0/.16);--u:1;
  color:var(--oi);font-family:var(--font)}
.oc.day{--oi:oklch(0% 0 0);--oi2:oklch(0% 0 0/.72);--oi3:oklch(0% 0 0/.5);--or:oklch(0% 0 0/.14)}
.oc-g{position:absolute;inset:0;background:var(--g)}
.oc.boxed .oc-g{border-radius:26px;box-shadow:inset 0 0 0 1px var(--or)}
.oc-in{position:relative;display:flex;flex-direction:column;gap:26px}

.oc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:-4px}
.oc-head b{font-weight:500;font-size:calc(19px * var(--u));letter-spacing:-.01em;color:var(--oi2)}
.oc-foot{margin:2px 0 0;font-size:calc(17px * var(--u));line-height:1.35;color:var(--oi3)}

/* a row: its label and its grade, the before and the big after, the line */
.oc-row{display:flex;flex-direction:column;gap:9px}
.oc-row+.oc-row{padding-top:22px;border-top:1px solid var(--or)}
.oc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:calc(26px * var(--u))}
.oc-l{font-size:calc(21px * var(--u));font-weight:400;letter-spacing:-.012em;color:var(--oi2)}
.oc-n{display:flex;align-items:baseline;gap:calc(var(--fs) * .2);white-space:nowrap}
.oc-to{font-family:var(--serif);font-weight:300;font-size:var(--fs);line-height:.98;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--oi)}
.oc-to i{font-style:normal;font-size:.5em;letter-spacing:-.02em;margin-left:.07em;color:var(--oi2)}
.oc-from{position:relative;font-family:var(--serif);font-weight:300;font-size:max(19px,calc(var(--fs) * .38));line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--oi3)}
.oc-strike{position:absolute;left:-3%;right:-3%;top:56%;height:2px;border-radius:2px;background:var(--oi3);transform-origin:0 50%}
.oc-arrow{display:block;align-self:center;width:calc(var(--fs) * .3);min-width:20px;height:calc(var(--fs) * .3);min-height:20px;color:var(--oi3)}
.oc-arrow svg{display:block;width:100%;height:100%;stroke-width:1.8}

/* the thin line that fills with the number; a notch where it began */
.oc-bar{position:relative;height:3px;border-radius:3px;background:var(--or);margin-top:4px}
.oc-bar u{position:absolute;inset:0;border-radius:3px;background:var(--oline,var(--oi));transform-origin:0 50%}
.oc-bar s{position:absolute;top:-4px;width:2px;height:11px;margin-left:-1px;border-radius:1px;background:var(--oi3)}

/* the quality that has no number: a check that lands, what it is, and its grade under it */
.oc-row.chk{flex-direction:row;align-items:flex-start;gap:calc(var(--fs) * .5)}
.oc-ck{flex:none;display:block;width:calc(var(--fs) * 1.1);height:calc(var(--fs) * 1.1);margin-top:calc(var(--fs) * .03);color:var(--oi)}
.oc-ck svg{display:block;width:100%;height:100%;stroke-width:1.6}
.oc-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.oc-row.chk .oc-txt{font-size:var(--fs);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.oc-note{margin:0;font-size:calc(19px * var(--u));line-height:1.35;color:var(--oi3)}

/* the grade, as the page's own tag (chapter.css) in design pixels: a pale pill and a dot, the only colour; no hue is neutral */
.oc-tag{--th:260;--tn:0;display:inline-flex;align-items:center;gap:7px;flex:none;height:calc(26px * var(--u));padding:0 12px 0 10px;border-radius:999px;background:oklch(76% calc(.14 * var(--tn)) var(--th)/.17);color:oklch(86% calc(.1 * var(--tn)) var(--th));font-family:var(--font);font-size:calc(13.5px * var(--u));font-weight:500;line-height:1;letter-spacing:-.003em;white-space:nowrap}
.oc-tag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:oklch(74% calc(.17 * var(--tn)) var(--th))}
.oc-tag:not([data-grade="ours"]):not([data-grade="target"]):not([data-grade="claim"]):not([data-grade="observed"]):not([data-grade="pending"]){background:oklch(100% 0 0/.1);color:var(--oi2)}
.oc-tag:not([data-grade="ours"]):not([data-grade="target"]):not([data-grade="claim"]):not([data-grade="observed"]):not([data-grade="pending"])::before{background:var(--oi3)}
.oc-tag[data-grade="ours"]{--th:155;--tn:1}
.oc-tag[data-grade="target"]{--th:250;--tn:1}
.oc-tag[data-grade="claim"]{--th:305;--tn:1}
.oc-tag[data-grade="observed"]{--th:215;--tn:1}
.oc-tag[data-grade="pending"]{--th:70;--tn:1}
.oc.day .oc-tag[data-grade]{background:oklch(60% calc(.14 * var(--tn)) var(--th)/.15);color:oklch(36% calc(.12 * var(--tn)) var(--th))}
.oc.day .oc-tag:not([data-grade="ours"]):not([data-grade="target"]):not([data-grade="claim"]):not([data-grade="observed"]):not([data-grade="pending"]){background:oklch(0% 0 0/.07)}