/* DOCKET — a ruled run of four dates with one struck out and a break before
   the live one. Compact band: stamp, not hero. */

.dk{display:grid;gap:1rem}

.dk__head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
.dk__hint{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-right:auto}
.dk__stamp{
  font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-4);border:1px solid var(--line);border-radius:2px;padding:.22rem .5rem;
}

.dk__run{
  display:grid;align-items:start;gap:.4rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 5.6rem minmax(0,1fr);
}

/* ------------------------------------------------------------- an entry */
.dk__e{
  position:relative;display:grid;align-content:start;
  border:1px solid transparent;border-top-color:var(--line-2);
  border-radius:0 0 var(--radius) var(--radius);
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.dk__e.is-sel{background:var(--surface-2);border-color:var(--line-2);border-top-color:var(--text-3)}
.dk__e.is-struck{border-top-color:var(--red-deep)}
.dk__e.is-struck.is-sel{border-color:var(--red-deep);border-top-color:var(--red)}
.dk__e.is-pending{border:1px dashed var(--line-2);border-top:1px solid var(--yellow)}
.dk__e.is-pending.is-sel{border-color:var(--yellow);border-top-color:var(--yellow);background:var(--surface-2)}

.dk__btn{
  display:grid;width:100%;text-align:left;gap:.34rem .6rem;padding:.9rem .8rem .5rem;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"date tag" "title title";
  align-items:start;
}
.dk__btn:focus-visible{border-radius:var(--radius)}

.dk__node{
  position:absolute;top:-5px;left:.8rem;width:9px;height:9px;border-radius:1px;
  background:var(--text-3);
}
.dk__e.is-struck .dk__node{background:var(--red)}
.dk__e.is-pending .dk__node{background:var(--bg);border:1.5px solid var(--yellow);box-shadow:0 0 10px var(--yellow-glow)}

.dk__date{grid-area:date;position:relative;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.dk__day{font-size:clamp(1.55rem,3.2vw,2.05rem);font-weight:500;line-height:1;color:var(--text)}
.dk__my{font-size:.62rem;font-weight:500;letter-spacing:.13em;color:var(--text-3)}

.dk__e.is-struck .dk__day{
  color:var(--text-3);
  text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;
}
.dk__e.is-struck .dk__my{color:var(--text-4)}
.dk__e.is-pending .dk__day{color:var(--yellow)}
.dk__e.is-pending .dk__my{color:var(--yellow-2)}

/* the cross is drawn, not typed */
.dk__strike{position:absolute;top:-.18rem;left:-.3rem;width:calc(100% + .6rem);height:calc(100% + .36rem);overflow:visible;pointer-events:none}
.dk__strike path{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round}
.dk__strike-2{opacity:.4}

.dk__t{grid-area:title;font-size:.88rem;line-height:1.3;color:var(--text-2)}
.dk__e.is-sel .dk__t{color:var(--text)}
.dk__e.is-struck .dk__t{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--red)}
.dk__e.is-pending .dk__t{color:var(--text)}

.dk__tag{
  grid-area:tag;font-size:.53rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-4);border:1px solid var(--line);border-radius:2px;padding:.14rem .34rem;
  white-space:nowrap;margin-top:.15rem;
}
.dk__e.is-struck .dk__tag{color:var(--red);border-color:var(--red-deep)}
.dk__e.is-pending .dk__tag{color:var(--yellow);border-color:var(--yellow);border-style:dashed}

/* detail: space is reserved at desktop so nothing shifts as you move across */
.dk__det{
  padding:0 .8rem .8rem;min-height:3.5rem;
  opacity:0;transform:translateY(-3px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.dk__e.is-sel .dk__det{opacity:1;transform:none}
.dk__det-b{font-size:.78rem;line-height:1.5;color:var(--text-3)}
.dk__e.is-pending .dk__det-b{color:var(--text-2)}

/* --------------------------------------------- the break in the run */
.dk__gap{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:.55rem}
.dk__arw{width:100%;height:auto;overflow:visible}
.dk__arw path{fill:none;stroke:var(--yellow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dk__arw-line{stroke-dasharray:3 3.6}
.dk__gap-lab{font-size:.55rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}

/* ------------------- narrow: the run stacks, the break turns ------------- */
@media (max-width:760px){
  .dk__run{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .dk__btn{
    grid-template-columns:6.4rem minmax(0,1fr) auto;
    grid-template-areas:"date title tag";
    align-items:center;padding:.7rem .75rem;min-height:3.1rem;
  }
  .dk__date{align-items:baseline;flex-wrap:nowrap;white-space:nowrap}
  .dk__day{font-size:1.5rem}
  .dk__t{font-size:.86rem}
  .dk__tag{margin-top:0}
  .dk__det{
    min-height:0;max-height:0;padding-bottom:0;overflow:hidden;transform:none;
    transition:max-height var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease),padding var(--dur-2) var(--ease);
  }
  .dk__e.is-sel .dk__det{max-height:9rem;padding-bottom:.8rem}
  .dk__gap{flex-direction:column;gap:0;padding:.15rem 0}
  .dk__arw{width:3.2rem;transform:rotate(90deg);margin:1.25rem 0 1.35rem}
}
@media (max-width:420px){
  .dk__btn{grid-template-columns:5.9rem minmax(0,1fr) auto;gap:.3rem .45rem;padding:.7rem .65rem}
  .dk__day{font-size:1.35rem}
  .dk__my{font-size:.58rem;letter-spacing:.1em}
  .dk__t{font-size:.82rem}
  .dk__det-b{font-size:.76rem}
}