/* Set by Another Clock. A core store: each date a drilled core laid in a tray, read from the
   top of the hole (left) to where the drill stops (right). Light is the store's paper labels;
   dark is the store with the lights down. */
:root {
  --ground:#ece7dd; --ground-2:#e2dccf; --panel:#f5f1e9; --ink:#1d1a16; --ink-soft:#5b554b; --rule:#cbc3b3; --rule-strong:#a89f8d;
  --read:#7b746a; --zero:#b07a1e; --rate:#2f64a3; --count:#a8482c; --match:#3f7d3a; --anchor:#6f4c9c;
  --written:#2a231b; --written-ink:#f4efe6; --sky:#26357a; --sky-ink:#eef0fb; --stops:#8a8172;
  --link:#2f5f95; --focus:#a8482c; --mark:#f3e3b8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#121316; --ground-2:#1a1b20; --panel:#1f2026; --ink:#ebe6db; --ink-soft:#a9a294; --rule:#2e2f37; --rule-strong:#4a4a55;
    --read:#a39b8d; --zero:#e2ab4f; --rate:#7eaee6; --count:#e88d6d; --match:#8ec986; --anchor:#bb9be6;
    --written:#efe7d8; --written-ink:#1b1712; --sky:#5a6fd0; --sky-ink:#0e1126; --stops:#8c8577;
    --link:#9cc0ec; --focus:#e88d6d; --mark:#3e3418;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:#121316; --ground-2:#1a1b20; --panel:#1f2026; --ink:#ebe6db; --ink-soft:#a9a294; --rule:#2e2f37; --rule-strong:#4a4a55;
  --read:#a39b8d; --zero:#e2ab4f; --rate:#7eaee6; --count:#e88d6d; --match:#8ec986; --anchor:#bb9be6;
  --written:#efe7d8; --written-ink:#1b1712; --sky:#5a6fd0; --sky-ink:#0e1126; --stops:#8c8577;
  --link:#9cc0ec; --focus:#e88d6d; --mark:#3e3418;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:"Fraunces",Georgia,serif; line-height:1.62; font-size:1.06rem; }
main { max-width:46rem; margin:0 auto; padding:4.6rem 16px 3rem; }
a { color:var(--link); text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
p { margin:0 0 1rem; }
.kicker, .note, button, .readout, .legend, .cap, .from, .pair, code, .mono { font-family:"Martian Mono",ui-monospace,monospace; }
.kicker { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .9rem; }
h1 { font-size:clamp(2.6rem,10vw,4.6rem); line-height:.96; margin:0 0 1rem; letter-spacing:-.02em; font-weight:600; }
.dek { font-size:1.12rem; margin:0 0 2rem; }
h2 { font-size:1.6rem; line-height:1.2; margin:3.4rem 0 1rem; font-weight:600; letter-spacing:-.01em; }
h3 { font-size:1.04rem; margin:0 0 .4rem; }
q { quotes:"\201C" "\201D" "\2018" "\2019"; }
.v { font-variant-numeric:lining-nums tabular-nums; }
.note { font-size:.76rem; line-height:1.65; color:var(--ink-soft); }
code { font-size:.86em; word-break:break-all; }
#data-error { background:var(--mark); padding:.6rem .8rem; border-radius:4px; font-size:.9rem; }

/* ---------------------------------------------------------------- the tray */
.instrument { margin:1.6rem -16px 2.4rem; padding:1.1rem 16px 1.2rem; background:var(--ground-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (min-width:900px) { .instrument { margin-left:calc(-1 * min(14rem, (100vw - 46rem) / 2 - 16px)); margin-right:calc(-1 * min(14rem, (100vw - 46rem) / 2 - 16px)); padding-left:1.4rem; padding-right:1.4rem; border:1px solid var(--rule); border-radius:6px; } }
.instrument h2 { margin-top:0; font-size:1.25rem; }
.lede { font-size:.98rem; }
.cuts { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.4rem 0 .6rem; }
.cuts-l { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-family:"Martian Mono",ui-monospace,monospace; }
.cut { font-size:.74rem; padding:.42rem .7rem; border-radius:999px; border:1px solid var(--rule-strong); background:var(--panel); color:var(--ink); cursor:pointer; }
.cut[aria-pressed="true"] { background:var(--ink); color:var(--ground); border-color:var(--ink); }
.cut:disabled { opacity:.5; cursor:default; }
.readout { font-size:.78rem; line-height:1.6; min-height:2.6em; margin:0 0 .6rem; color:var(--ink); }
.legend { display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin:0 0 1rem; font-size:.62rem; }
.lg { padding:.12rem .45rem; border-radius:3px; border-left:4px solid var(--c, var(--read)); background:var(--panel); }
.lg.root { border-left:0; }

.tray { list-style:none; margin:0; padding:0; }
.core { display:grid; grid-template-columns:12.5rem 1fr; gap:.3rem .8rem; padding:.7rem 0; border-top:1px solid var(--rule); }
.core:first-child { border-top:0; }
@media (max-width:720px) { .core { grid-template-columns:1fr; } }
.cap { font-size:.72rem; line-height:1.45; }
.cap .thing { display:block; font-family:"Fraunces",Georgia,serif; font-size:.95rem; font-weight:600; line-height:1.3; }
.cap .when { display:block; color:var(--ink-soft); margin-top:.15rem; }
.cap .when::before { content:"arrives at: "; opacity:.8; }
.run { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.fork { display:flex; flex-direction:column; gap:.3rem; flex:1 1 14rem; min-width:0; }
.tail { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; padding-left:.5rem; border-left:2px solid var(--rule-strong); }
.tail.single { display:contents; }
.seg { position:relative; display:inline-flex; align-items:center; text-align:left; font-size:.68rem; line-height:1.3; padding:.32rem .5rem .32rem .55rem; border-radius:3px;
  border:1px solid transparent; border-left:4px solid var(--c, var(--read)); background:var(--panel); color:var(--ink); cursor:pointer; max-width:15rem; }
.seg:hover { border-color:var(--rule-strong); border-left-color:var(--c, var(--read)); }
.seg[aria-expanded="true"] { background:var(--mark); }
.seg.join::before { content:""; position:absolute; left:-.42rem; top:50%; width:.5rem; height:.5rem; margin-top:-.25rem; transform:rotate(45deg); background:var(--ink); border-radius:1px; }
.seg.source { border-style:dashed; border-left-style:solid; }
.mv-read { --c:var(--read); } .mv-zero { --c:var(--zero); } .mv-rate { --c:var(--rate); }
.mv-count { --c:var(--count); } .mv-match { --c:var(--match); } .mv-anchor { --c:var(--anchor); }
.end { display:inline-flex; align-items:center; font-family:"Martian Mono",ui-monospace,monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.32rem .55rem; border-radius:3px; white-space:nowrap; }
.root-written { background:var(--written); color:var(--written-ink); }
.root-sky { background:var(--sky); color:var(--sky-ink); }
.root-nothing { background:transparent; color:var(--ink); border:1px dashed var(--ink); }
.root-stops { color:var(--ink); background:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--stops) 35%, transparent) 5px 7px); border:1px solid var(--stops); }

/* a cut: broken lines and floating dates */
.tail.broken .seg, .tail.broken .end, .core.floats .run > .seg { opacity:.32; }
.tail.broken .end { text-decoration:line-through; }
.core .state { display:none; }
.core.floats .state, .core.unknown .state, .core.partly .state, .core.held.cutting .state { display:block; font-family:"Martian Mono",ui-monospace,monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; margin-top:.3rem; }
.core.floats .cap .thing { text-decoration:line-through; text-decoration-thickness:1px; }
.core.floats .state { color:var(--count); }

.detail { grid-column:1 / -1; margin:.35rem 0 .2rem; padding:.75rem .9rem; background:var(--panel); border:1px solid var(--rule); border-left:4px solid var(--c, var(--read)); border-radius:3px; font-size:.92rem; }
.detail .mvname { font-family:"Martian Mono",ui-monospace,monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.detail blockquote { margin:.4rem 0 .5rem; padding:0; font-size:1rem; }
.detail .found { font-size:.86rem; }
.detail .found b { font-family:"Martian Mono",ui-monospace,monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.detail .joinnote { font-size:.8rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------- the circles */
.circles { list-style:none; padding:0; margin:1rem 0 1.4rem; display:grid; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:.7rem; }
.circles li { background:var(--panel); border:1px solid var(--rule); border-radius:4px; padding:.75rem .85rem; font-size:.92rem; line-height:1.5; }
.circles .pair { display:block; font-size:.66rem; line-height:1.5; margin-bottom:.35rem; color:var(--ink-soft); }
.circles .pair b { color:var(--ink); font-weight:600; }
.circles .from { display:block; font-size:.66rem; margin-top:.35rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------- lists */
.limits { padding-left:1.1rem; }
.limits li { margin:0 0 .7rem; }
.chainlist { padding-left:1.2rem; font-size:.92rem; }
.chainlist > li { margin:0 0 1.4rem; }
.chainlist ol, .chainlist ul { padding-left:1.1rem; }
.chainlist li li { margin:0 0 .35rem; }
.chainlist .date { margin:0 0 .4rem; }
.chainlist .from, .chainlist .found { font-size:.8em; color:var(--ink-soft); }
.chainlist .roots { list-style:none; padding-left:0; }
.chainlist .roots > li { margin-top:.4rem; }
.members { padding-left:1.1rem; font-size:.92rem; }
.members li { margin:0 0 .5rem; }
.checkbox { margin:3rem 0 0; padding:1rem 1.1rem; border:1px solid var(--rule); border-left:4px solid var(--match); border-radius:4px; background:var(--panel); }
.checkbox h2 { margin-top:0; font-size:1.2rem; }
.checkbox h3 { font-size:.95rem; margin-top:1rem; }
.sources { padding-left:1.1rem; font-size:.86rem; }
.sources li { margin:0 0 .5rem; }
@media (prefers-reduced-motion:no-preference) { .seg, .cut { transition:background .15s, opacity .2s; } }