/* Topjar — a tip jar on drafting film. Light sheet, navy ink, one redline. */
:root{
  --film:#E9EFF6; --ink:#0E2A57; --red:#EB4B2F;
  --ink-2:rgba(14,42,87,.66); --ink-3:rgba(14,42,87,.36); --ink-4:rgba(14,42,87,.14); --ink-5:rgba(14,42,87,.07);
  --red-2:rgba(235,75,47,.2); --sheet:rgba(255,255,255,.62);
  --disp:'Antonio','Arial Narrow',sans-serif; --body:'Public Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--film);-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--film);color:var(--ink);font:15px/1.5 var(--body);
  background-image:linear-gradient(var(--ink-5) 1px,transparent 1px),linear-gradient(90deg,var(--ink-5) 1px,transparent 1px);
  background-size:24px 24px;min-height:100vh;overflow-x:hidden}
a{color:inherit}
[hidden]{display:none !important}
button{font:inherit;cursor:pointer}

/* the CA bar: pinned to the top edge of the sheet */
.jr-cabar{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--film);padding:7px 14px 8px;
  border-bottom:3px solid var(--red)}
.jr-carow{display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto}
.jr-cakey{font:600 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.8;flex:1;min-width:0}
.jr-gmgn{font:400 11px/1 var(--mono);opacity:.7;text-decoration:underline;text-underline-offset:2px}
.jr-copy{background:var(--red);color:#fff;border:0;border-radius:3px;padding:5px 12px;font:700 12px/1.1 var(--mono);letter-spacing:.04em}
.jr-copy:disabled{background:transparent;color:var(--film);opacity:.45;outline:1px dashed currentColor}
.jr-copy.is-done{background:var(--film);color:var(--ink)}
.jr-addr{display:block;max-width:1180px;margin:4px auto 0;font:600 clamp(11.5px,3.1vw,16px)/1.25 var(--mono);
  word-break:break-all;user-select:all;letter-spacing:.01em}
.jr-addr.is-pending{font-weight:400;opacity:.7;user-select:none}

/* the live sentence, set as the drawing's title */
.jr-says{font:700 clamp(32px,7.4vw,58px)/1.03 var(--disp);letter-spacing:.005em;margin:18px auto 8px;max-width:1180px;padding:0 16px;
  text-wrap:balance}
.jr-aside{max-width:1180px;margin:0 auto 18px;padding:0 16px;color:var(--ink-2);font-size:15px}

.jr-sheetgrid{max-width:1180px;margin:0 auto;padding:0 16px;display:grid;gap:18px}

/* the sheet with the jar on it */
.jr-draft{border:1.5px solid var(--ink);background:var(--sheet);padding:0 0 14px;position:relative}
.jr-titleblock{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;border-bottom:1.5px solid var(--ink);
  font:400 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.jr-titleblock>span{padding:8px 10px;display:flex;align-items:center;gap:6px}
.jr-titleblock>span+span{border-left:1px solid var(--ink-3)}
.jr-tbname{font:700 15px/1 var(--disp);letter-spacing:.08em}
.jr-tbname img{border-radius:3px}
.jr-tbclock{flex-direction:column;align-items:flex-end !important;justify-content:center;gap:2px !important}
.jr-tbclock i{font-style:normal;opacity:.6;font-size:9.5px}
.jr-tbclock b{font:700 22px/1 var(--disp);letter-spacing:.04em}
.jr-tbclock.is-late b{color:var(--red)}
.jr-figure{padding:6px 6px 0}
.jr-svg{display:block;width:100%;height:auto;max-height:62vh;margin:0 auto}
.jr-rule{height:8px;margin:4px 14px 0;border:1.5px solid var(--ink);background:transparent;position:relative}
.jr-rulefill{position:absolute;inset:0 auto 0 0;width:100%;background:var(--ink);transition:width 1s linear}
.jr-rulefill.is-late{background:var(--red)}
.jr-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 14px 0;padding:0;font:400 11px/1.3 var(--mono);color:var(--ink-2)}
.jr-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.lg-in{background:var(--ink)}
.lg-owe{border:1.5px dashed var(--red)}
.lg-out{background:var(--ink-4);box-shadow:inset 0 0 0 1px var(--ink-3)}
.lg-open{border:1px dashed var(--ink-3)}
.jr-act{display:flex;gap:10px;margin:14px 14px 0}
.jr-top{flex:1;min-height:54px;border:0;background:var(--red);color:#fff;font:700 21px/1.05 var(--disp);letter-spacing:.04em;
  text-transform:uppercase;padding:10px 14px;border-radius:2px;box-shadow:4px 4px 0 var(--ink)}
.jr-top:disabled{background:transparent;color:var(--ink);border:1.5px dashed var(--ink-3);box-shadow:none;cursor:default}
.jr-plug{border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 12px/1.1 var(--mono);padding:8px 10px;border-radius:2px;max-width:42%}
.jr-need{margin:8px 14px 0;font:400 12px/1.4 var(--mono);color:var(--ink-2)}
.jr-owed{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 14px 0;padding:10px 12px;border:1.5px solid var(--red);background:var(--red-2);font-size:14px}
.jr-owed button{border:0;background:var(--ink);color:var(--film);padding:7px 14px;font:700 13px/1 var(--mono)}

/* svg drawing */
.cl{stroke:var(--ink-4);stroke-dasharray:10 4 2 4;stroke-width:1}
.glass{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.thin{stroke:var(--ink-3);stroke-width:1.2;fill:none}
.held{fill:var(--ink-4)}
.kept{fill:var(--red-2)}
.hatchline{stroke:var(--red);stroke-width:1.3;opacity:.55}
.keptline{stroke:var(--red);stroke-width:2.2}
.dim{stroke:var(--ink);stroke-width:1}
.dim.red{stroke:var(--red);stroke-width:1.6}
.kv{font:700 34px var(--disp);fill:var(--ink);text-anchor:middle}
.kk{font:400 10px var(--mono);fill:var(--ink-2);text-anchor:middle;text-transform:uppercase;letter-spacing:.06em}
.lead{stroke:var(--ink);stroke-width:1}
.lead.faint{stroke:var(--ink-3);stroke-dasharray:2 3}
.lead.owe{stroke:var(--red);stroke-dasharray:4 3}
.lead.drop{stroke:var(--ink-3);stroke-dasharray:1 3}
.lead.drop.is-fresh{stroke:var(--red);stroke-dasharray:none}
.bal{stroke-width:1.6}
.bal.in{fill:var(--ink);stroke:var(--ink)}
.bal.owe{fill:var(--film);stroke:var(--red);stroke-dasharray:4 2.5;stroke-width:2;animation:owe 1.4s ease-in-out infinite}
.bal.out{fill:var(--ink-4);stroke:var(--ink-3)}
.bal.open{fill:none;stroke:var(--ink-3);stroke-dasharray:2 3}
.bal.next{fill:var(--film);stroke:var(--red);stroke-width:2.4;animation:owe 1.4s ease-in-out infinite}
.bal.won{fill:var(--red);stroke:var(--ink);stroke-width:2.4}
.bal.me{stroke-width:3.2}
.bn{font:600 11px var(--mono);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.bal.in~.bn,.bal.won~.bn{fill:var(--film)}
.bal.out~.bn{fill:var(--ink-3)}
.bal.open~.bn{fill:var(--ink-3)}
.strike{stroke:var(--red);stroke-width:2}
.drip{fill:var(--red)}
.call{font:600 10px var(--mono);fill:var(--red);text-transform:uppercase;letter-spacing:.06em}
.call.l{text-anchor:start}
.call.r{text-anchor:end}
@keyframes owe{50%{opacity:.35}}

/* the tape */
.jr-tapecol{border:1.5px solid var(--ink);background:var(--sheet);display:flex;flex-direction:column;min-width:0}
.jr-tapehead{display:flex;align-items:baseline;justify-content:space-between;padding:9px 12px;border-bottom:1.5px solid var(--ink)}
.jr-tapehead h2{margin:0;font:700 20px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase}
.jr-tapehead span{font:400 11px var(--mono);color:var(--ink-2)}
.jr-handshead{border-top:1.5px solid var(--ink)}
.jr-tape{list-style:none;margin:0;padding:4px 0;font:400 12.5px/1.4 var(--mono);max-height:420px;overflow:auto}
.jr-tape li{display:grid;grid-template-columns:42px 16px 1fr;gap:4px;padding:6px 12px;border-bottom:1px dashed var(--ink-4)}
.jr-tape time{color:var(--ink-3)}
.jr-tape i{font-style:normal;font-weight:600;color:var(--ink)}
.jr-tape span{min-width:0;overflow-wrap:anywhere}
.jr-tape .tp-drop i,.jr-tape .tp-drop span{color:var(--red)}
.jr-tape .tp-take{background:var(--ink);color:var(--film)}
.jr-tape .tp-take i,.jr-tape .tp-take time{color:var(--film)}
.jr-tape .tp-round span{font-weight:600}
.jr-tape .tp-first{background:var(--red-2);font-weight:600}
.jr-tape .tp-first i{color:var(--red)}
.jr-tape .tp-ghost{color:var(--ink-3)}
.jr-tape .tp-new{animation:print .7s steps(14,end)}
@keyframes print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.jr-hands{list-style:none;margin:0;padding:2px 0;font-size:13px}
.jr-hands li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px dashed var(--ink-4)}
.hd-n{font:600 12px var(--mono);width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--film);display:grid;place-items:center}
.hd-owe .hd-n{background:transparent;color:var(--red);border:1.5px dashed var(--red)}
.hd-out .hd-n{background:var(--ink-4);color:var(--ink-3)}
.hd-out .hd-w a{text-decoration:line-through;text-decoration-color:var(--red)}
.hd-w{min-width:0}
.hd-w a{display:block;font:400 11px/1.3 var(--mono);word-break:break-all;text-decoration:none}
.hd-w small{color:var(--ink-2);font-size:11.5px}
.hd-v{font:700 16px var(--disp)}
.hd-empty{display:block !important;color:var(--ink-2);font-style:italic}

/* rules as drawing notes */
.jr-notes{max-width:1180px;margin:26px auto 0;padding:0 16px}
.jr-notes h2{font:700 30px/1 var(--disp);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.jr-notelist{margin:0;padding-left:22px;display:grid;gap:6px}
.jr-notelist li::marker{font:600 13px var(--mono);color:var(--red)}
.jr-worked{margin:18px 0 0;border:1.5px solid var(--ink);background:var(--sheet);padding:12px 14px}
.jr-worked h3{margin:0 0 8px;font:700 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.06em}
.jr-wtab{width:100%;border-collapse:collapse;font:400 12.5px var(--mono)}
.jr-wtab th{text-align:left;font-weight:600;border-bottom:1.5px solid var(--ink);padding:5px 4px;font-size:11px;text-transform:uppercase}
.jr-wtab td{padding:5px 4px;border-bottom:1px dashed var(--ink-4)}
.jr-wtab td:last-child{color:var(--red);font-weight:600}
.jr-worked p{margin:10px 0 0;font-size:14px}
.jr-past{margin:16px 0 0;padding-left:20px;font:400 12px/1.6 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.jr-links{display:flex;gap:16px;margin:14px 0 0;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.05em}

.jr-foot{max-width:1180px;margin:30px auto 0;padding:16px 16px 40px;border-top:1.5px solid var(--ink);display:grid;gap:8px;font:400 11.5px/1.4 var(--mono)}
.jr-foot div{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.jr-foot span{text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.jr-foot code{word-break:break-all}
.jr-foot p{margin:6px 0 0;color:var(--ink-2)}

.jr-pick{position:fixed;inset:0;z-index:50;background:rgba(14,42,87,.45);display:grid;place-items:center;padding:16px}
.jr-pickbox{background:var(--film);border:1.5px solid var(--ink);padding:16px;min-width:260px;display:grid;gap:8px}
.jr-pickbox button{display:flex;align-items:center;gap:8px;border:1px solid var(--ink-3);background:transparent;padding:9px 10px;color:var(--ink)}
.jr-pickbox img{width:22px;height:22px}
.jr-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--film);padding:9px 16px;font:600 12.5px var(--mono);max-width:92vw}

/* tablet: one column, a wider measure and a bigger drawing */
@media (min-width:720px){
  .jr-aside{font-size:17px;max-width:860px;margin-left:auto;margin-right:auto}
  .jr-says{padding:0 24px}
  .jr-sheetgrid,.jr-notes{padding:0 24px}
  .jr-figure{padding:10px 40px 0}
  .jr-notelist{grid-template-columns:1fr 1fr;column-gap:30px}
  .jr-cabar{padding:8px 24px 9px}
}
/* desktop: the sheet and the tape side by side, the tape pinned beside the jar */
@media (min-width:1000px){
  .jr-says{margin-top:28px}
  .jr-aside{max-width:1180px;padding:0 24px}
  .jr-sheetgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start;gap:24px}
  .jr-figure{padding:12px 30px 0}
  .jr-svg{max-height:min(430px,calc(100vh - 470px));min-height:300px}
  .jr-tapecol{position:sticky;top:84px;max-height:calc(100vh - 100px)}
  .jr-tape{max-height:none;flex:1 1 auto;min-height:220px}
  .jr-hands{max-height:260px;overflow:auto}
  .jr-notelist{grid-template-columns:1fr 1fr 1fr}
  .jr-foot{grid-template-columns:1fr 1fr;padding:18px 24px 48px}
  .jr-foot p{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}