/* Exit Clock — second pass.
   Loaded after app.css by /, /token/[id] and /accuracy.
   Holds: the code-built ground, the code-built countdown dial (a range on
   its face, not a date), the flat icon treatment the illustration set asks
   for, the split board, the single-reading strips, the weighted week chart
   and the ledger. */

/* ---------------- ground, built in code ---------------- */
.ground.code .g1,.ground.code .g2,.ground.code .g3{position:absolute;inset:0}
.ground.code .g1{background:
  radial-gradient(62% 50% at 14% 2%,rgba(62,129,128,.36),transparent 62%),
  radial-gradient(56% 44% at 88% 0%,rgba(110,135,222,.28),transparent 64%),
  radial-gradient(84% 60% at 64% 104%,rgba(225,93,29,.15),transparent 62%),
  linear-gradient(180deg,#1B2122 0%,#191D1D 52%,#14181A 100%)}
.ground.code .g2{
  background-image:linear-gradient(rgba(236,234,228,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(236,234,228,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(130% 84% at 50% 0%,#000 0,transparent 72%);
          mask-image:radial-gradient(130% 84% at 50% 0%,#000 0,transparent 72%)}
.ground.code .g3{background:radial-gradient(118% 84% at 58% 22%,rgba(25,29,29,0) 0%,rgba(25,29,29,.46) 56%,rgba(20,24,26,.94) 100%)}
@media (prefers-reduced-motion:no-preference){
  .ground.code .g1{animation:ecdrift 30s ease-in-out infinite alternate}
}
@keyframes ecdrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(0,-1.4%,0)}}

/* ---------------- a section that sits on one of the plates ------------- */
.secbg{position:relative;isolation:isolate;overflow:hidden;border-radius:9px;
  border:1px solid rgba(236,234,228,.11);padding:clamp(20px,2.8vw,40px)}
.secbg>.bgimg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;
  opacity:.34;filter:saturate(1.18) contrast(1.04)}
.secbg>.bgwash{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,24,26,.62) 0%,rgba(20,24,26,.88) 62%,rgba(20,24,26,.95) 100%)}

/* ---------------- illustrated icons, flat like the rest of the set ----
   Same treatment as /method and /graveyard: the artwork on the page, no
   glass, no ring, no frame of its own. */
.ico{display:block;flex:none;width:40px;height:40px;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}

/* ---------------- a risk band is a position, never an instruction ----- */
.chip.early,.chip.middle,.chip.late{color:var(--ink);border-color:rgba(236,234,228,.24)}

/* ---------------- the dial: the countdown drawn in code ---------------
   The interval is the reading. Two digit strips carry the bounds, the arc
   between them carries the same interval on the rim, and the needle marks
   the one central estimate that sits inside it. */
.dial{position:relative;width:min(100%,420px);aspect-ratio:1/1;margin:0 auto;perspective:900px}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out}
.dial .dtrack{fill:none;stroke:rgba(236,234,228,.09);stroke-width:18;stroke-linecap:round}
.dial .dband{fill:none;stroke:rgba(162,180,240,.8);stroke-width:18;stroke-linecap:butt;
  filter:drop-shadow(0 0 14px rgba(110,135,222,.75))}
.dial .dedge{stroke:#C3CEF7;stroke-width:2.6;stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(162,180,240,.85))}
.dial .dtick{stroke:rgba(236,234,228,.18);stroke-width:1.6}
.dial .dtick.on{stroke:#7FC9C6;stroke-width:2.4}
.dial .dglowring{fill:none;stroke:rgba(127,201,198,.16);stroke-width:1}
.dial .dspin{fill:none;stroke:rgba(127,201,198,.26);stroke-width:1;stroke-dasharray:2 12;
  transform-box:view-box;transform-origin:50% 50%}
.dial .dneedle{stroke:#E15D1D;stroke-width:2.2;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(225,93,29,.6));
  transform-box:view-box;transform-origin:50% 50%;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.dial .dhub{fill:#E15D1D;filter:drop-shadow(0 0 7px rgba(225,93,29,.75))}
@media (prefers-reduced-motion:no-preference){
  .dial .dspin{animation:ecspin 46s linear infinite}
}
@keyframes ecspin{to{transform:rotate(360deg)}}
.dialface{position:absolute;inset:19%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;pointer-events:none;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out}
.dialface .dk{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mute);line-height:1.45}
.dorng{display:flex;align-items:flex-end;justify-content:center;gap:7px}
.dorng .odo{font-size:clamp(27px,6.6vw,38px);justify-content:center;gap:2px}
.dorng .dsep{font-family:var(--mono);font-size:clamp(20px,4.8vw,27px);line-height:1;
  color:var(--peri-lit);padding-bottom:.14em}
.dial.norange .dorng .dsep,.dial.norange .dorng .odo.hi{display:none}
.dialface .dctr{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--mute)}
.dialface .dstood{font-family:var(--mono);font-size:11px;color:var(--teal-lit);letter-spacing:.05em}
.dial .dend{position:absolute;bottom:4%;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.dial .dend.l{left:1%}
.dial .dend.r{right:1%}

/* the odometer must land settled on first paint, never mid-flip */
.odo.noanim .strip{transition:none}

/* ---------------- machine body: dial beside its odds ------------------ */
.mbody{display:grid;gap:clamp(18px,2.4vw,30px)}
@media(min-width:1040px){
  .mbody{grid-template-columns:minmax(0,1.3fr) minmax(190px,.7fr);align-items:center}
  .mbody .dial{width:min(100%,460px)}
  .mbody .odds{margin-top:0;padding-top:0;border-top:0}
}

/* the still-standing odds: quiet rows, so the range keeps the eye */
.machine .odds{display:block}
.oddslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.oddslist li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:5px 10px}
.oddslist .ol{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.oddslist .ov{font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.oddslist .ob{grid-column:1/-1;height:5px;border-radius:3px;background:rgba(236,234,228,.1);overflow:hidden}
.oddslist .ob i{display:block;height:100%;width:0;background:rgba(127,201,198,.62);
  transition:width .7s cubic-bezier(.16,1,.3,1)}
.bars button[aria-pressed="true"]::after{box-shadow:0 0 18px rgba(225,93,29,.75)}

/* ---------------- the board: measured left, estimated right ----------- */
.mlisthead{display:none}
table.dt.board .cl{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
table.dt.board .mlbl{display:none}

@media(min-width:1024px){
  table.dt.board td.m,table.dt.board thead th.mh{background:rgba(62,129,128,.1)}
  table.dt.board td.e,table.dt.board thead th.eh{background:rgba(110,135,222,.1)}
  table.dt.board td.e{background-image:repeating-linear-gradient(135deg,rgba(110,135,222,.07) 0 2px,transparent 2px 8px)}
  table.dt.board td.c-rank,table.dt.board th.mstart{border-left:2px solid rgba(127,201,198,.45)}
  table.dt.board td.c-range,table.dt.board th.estart{border-left:2px solid rgba(162,180,240,.5)}
  table.dt.board td.c-file{border-left:1px solid var(--line2)}
  table.dt.board thead tr.grp th{padding:0;background:transparent;border-bottom:0}
  table.dt.board thead tr.grp th.mh,table.dt.board thead tr.grp th.eh{padding:10px 12px}
  table.dt.board thead tr.grp th.mh{border-top:2px solid rgba(127,201,198,.45)}
  table.dt.board thead tr.grp th.eh{border-top:2px solid rgba(162,180,240,.5)}
  table.dt.board thead tr.grp .gt{font-family:var(--mono);font-size:12px;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase}
  table.dt.board thead tr.grp .gs{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    text-transform:none;color:var(--mute);margin-left:10px}
  table.dt.board thead tr.grp th.mh .gt{color:var(--teal-lit)}
  table.dt.board thead tr.grp th.eh .gt{color:var(--peri-lit)}
  table.dt.board thead th{font-size:11px;padding-top:12px;padding-bottom:12px}
  table.dt.board td{padding-top:13px;padding-bottom:13px}
  table.dt.board td.m .v{color:var(--ink);font-size:14.5px}
  table.dt.board td.c-range .v{color:var(--peri-lit);font-size:16px;font-weight:500}
  table.dt.board td.c-left .v{color:var(--peri-lit);font-size:14px}
  table.dt.board .cl{display:none}
}

/* ---- 390px: one line per token, the rest behind Open ----------------
   Fixed tracks, not auto ones, so the ranges line up down the column and
   two tokens can be compared by eye. */
@media(max-width:1023px){
  .tablewrap.board{border:1px solid var(--line);border-radius:6px;
    background:rgba(25,29,29,.42);overflow:visible}
  .mlisthead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:10px;border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
  .mlisthead .mm{color:var(--teal-lit)}
  .mlisthead .me{color:var(--peri-lit)}
  table.dt.board tr{display:grid;grid-template-columns:24px minmax(0,1fr) 88px 44px;
    grid-template-areas:"rank tok range file" "rank tok left file";
    align-items:center;column-gap:10px;row-gap:1px;min-height:56px;
    margin:0;padding:8px 10px;border:0;border-bottom:1px solid var(--line2);
    border-radius:0;background:transparent}
  table.dt.board tbody tr:last-child{margin-bottom:0;border-bottom:0}
  table.dt.board td{display:block;width:auto;padding:0;border:0;background:none}
  table.dt.board td::before{display:none}
  table.dt.board .cl{display:none}
  table.dt.board td.c-tok{grid-area:tok;min-width:0}
  table.dt.board td.c-rank{grid-area:rank;font-family:var(--mono);font-size:11.5px;
    color:var(--dim);text-align:right}
  table.dt.board td.c-rank .mini{display:none}
  table.dt.board td.c-range{grid-area:range;text-align:right;align-self:end}
  table.dt.board td.c-range .v{font-size:13.5px;color:var(--peri-lit)}
  table.dt.board td.c-left{grid-area:left;text-align:right;align-self:start}
  table.dt.board td.c-left .mlbl{display:inline;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-right:5px}
  table.dt.board td.c-left .v{font-size:11px;color:var(--mute)}
  table.dt.board td.c-stood,table.dt.board td.c-vol,table.dt.board td.c-risk{display:none}
  table.dt.board td.c-file{grid-area:file;display:block}
  table.dt.board td.c-file a{display:flex;align-items:center;justify-content:flex-end;
    min-height:44px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--peri)}
  table.dt.board .tsym{gap:7px;min-width:0}
  table.dt.board .tsym .s{font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
  table.dt.board .tsym .n{display:none}
  table.dt.board .tsym img{width:13px;height:13px}
}

/* ---------------- a single reading on a scale ------------------------- */
.rd{display:flex;flex-direction:column;gap:12px}
.rdtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rdv{font-family:var(--mono);font-weight:500;font-size:clamp(28px,3.2vw,42px);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.rdv.t{color:var(--teal-lit)}
.rdv.p{color:var(--peri-lit)}
.rdnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);text-align:right}
.rdtrack{position:relative;height:44px}
.rdtrack .rail2{position:absolute;left:0;right:0;top:21px;height:7px;border-radius:4px;
  background:linear-gradient(90deg,rgba(62,129,128,.75),rgba(110,135,222,.6),rgba(225,93,29,.7))}
.rdtrack .gr{position:absolute;top:15px;width:1px;height:19px;background:rgba(236,234,228,.16)}
.rdtrack .pin{position:absolute;top:7px;width:2px;height:35px;background:var(--ember);
  box-shadow:0 0 13px rgba(225,93,29,.85);transform:translateX(-1px)}
.rdtrack .pin::before{content:'';position:absolute;top:-9px;left:-5px;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--ember)}
.rdends{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}

/* ---------------- token file: big odds, integrated art ---------------- */
.twocol2{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.twocol2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.clockside{display:flex;flex-direction:column;gap:18px;min-width:0}
.clockside .sideart{width:100%;max-width:230px;height:auto;align-self:center;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(62,129,128,.4))}
.clockside .sidecap{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);text-align:center}
.oddspanel{display:grid;gap:clamp(18px,2.6vw,34px);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:900px){.oddspanel{grid-template-columns:minmax(0,1fr) minmax(160px,230px)}}
.oddspanel .oddsart{width:100%;max-width:230px;height:auto;justify-self:center;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(110,135,222,.4))}
.oddsbig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:clamp(16px,2vw,26px)}
.gaugeb{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.gaugeb svg{width:clamp(108px,13vw,140px);height:clamp(108px,13vw,140px);transform:rotate(-90deg)}
.gaugeb .trk{fill:none;stroke:rgba(236,234,228,.11);stroke-width:10}
.gaugeb .val{fill:none;stroke:#7FC9C6;stroke-width:10;stroke-linecap:butt}
.gaugeb .val.g-t{stroke:#7FC9C6;filter:drop-shadow(0 0 9px rgba(127,201,198,.8))}
.gaugeb .val.g-p{stroke:#A2B4F0;filter:drop-shadow(0 0 9px rgba(162,180,240,.8))}
.gaugeb .val.g-e{stroke:#F1874A;filter:drop-shadow(0 0 9px rgba(241,135,74,.8))}
.gaugeb .gv{font-family:var(--mono);font-weight:500;font-size:clamp(24px,2.6vw,30px);line-height:1;color:var(--ink)}
.gaugeb .gk{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}

/* ---------------- accuracy: week chart with weight -------------------- */
.wk2{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.wk2 li{display:grid;grid-template-columns:minmax(58px,auto) minmax(0,1fr) minmax(54px,auto);
  align-items:center;gap:12px}
.wk2 .wl{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.wk2 .wb{position:relative;height:18px;display:flex;align-items:center}
.wk2 .wb i{display:block;height:var(--bh,9px);width:var(--w,0%);border-radius:2px;
  background:var(--c,#3E8180);opacity:var(--o,.55);transition:width .6s cubic-bezier(.16,1,.3,1)}
.wk2 .wb .ref{position:absolute;top:1px;bottom:1px;width:0;border-left:1px dashed rgba(236,234,228,.42)}
.wk2 .wv{font-family:var(--mono);font-size:11.5px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.wk2 li.none .wb i{height:2px;width:100%;background:rgba(236,234,228,.14);opacity:1}
.wk2 li.none .wv{color:var(--dim);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase}
.wk2 li.peak .wl,.wk2 li.peak .wv{color:var(--ember-lit)}
.wkfoot{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.wkfoot span{display:inline-flex;align-items:center;gap:7px}
.wkfoot i{width:14px;height:8px;border-radius:2px;display:inline-block;flex:none}
.wkfoot i.dash{width:14px;height:0;border-top:1px dashed rgba(236,234,228,.5);border-radius:0}

/* ---------------- accuracy: the ledger --------------------------------
   The two figures worth reading are the miss and whether the range held,
   so those carry the weight; a call still standing says so in one cell
   instead of three empty ones. */
table.dt.ledger{font-size:14px}
table.dt.ledger .cid{display:block;font-family:var(--mono);font-size:12px;color:var(--mute)}
table.dt.ledger .sid{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:3px}
table.dt.ledger .pr{display:block;font-family:var(--mono);font-size:14px;color:var(--peri-lit);
  font-variant-numeric:tabular-nums}
table.dt.ledger .pc{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin-top:3px}
table.dt.ledger td.miss2{font-size:16px;font-weight:500;color:var(--ink)}
table.dt.ledger td.waitcell{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
table.dt.ledger tbody tr.pend .tsym .s{color:var(--mute)}
@media(min-width:1024px){
  table.dt.ledger th,table.dt.ledger td{padding-top:13px;padding-bottom:13px}
}