/* layer-rise-assembly showpiece, dressed in the Decimals kit: sand-cream page washed with blush, one warm
   brown-black ink, a tight book serif for the headline, plain Arial for the rest. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #ede8e1;
  background-image: radial-gradient(ellipse 70% 55% at 50% 58%, rgba(244, 201, 190, .62), rgba(244, 201, 190, 0) 70%);
  color: #4d4638;
  font: 14px/1.45 Arial, Helvetica, sans-serif;
}
.frame { position: absolute; left: 50%; top: 50%; width: 1050px; height: 1200px; transform: translate(-50%, -50%); }

.head { position: absolute; left: 0; right: 0; top: 118px; text-align: center; }
.head h1 {
  margin: 0; font: 400 58px/1.02 "Newsreader", Georgia, serif; font-optical-sizing: auto;
  letter-spacing: -2.4px; color: #4d4638;
}
.head h1 em { font-style: italic; }
.head p { margin: 18px 0 0; font-size: 19px; line-height: 1.5; color: rgba(77, 70, 56, .8); }

/* the mock is drawn once at 460px and set as one picture, 2x */
.mock-wrap { position: absolute; left: 50%; top: 236px; width: 460px; transform: translateX(-50%) scale(2); transform-origin: 50% 0; }
.lra { --lra-ink: #4d4638; --lra-tint: #fffdf8; --lra-shadow: 0 32px 32px rgba(78, 70, 55, .14), 0 5px 2.5px rgba(78, 70, 55, .04); }

.win {
  background: #fffdf8; border-radius: 10px;
  box-shadow: 0 0 0 1px #ddd5c9, 0 0 0 5px rgba(255, 253, 248, .7), 0 0 0 6px #e3dbd0, 0 22px 50px -24px rgba(78, 70, 55, .35);
}
.bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid #efe9e0; }
.bar i { width: 9px; height: 9px; border-radius: 50%; background: #e6ded3; }
.bar span { margin-left: 9px; font-size: 11.5px; color: rgba(77, 70, 56, .58); }
.main { position: relative; padding: 16px 16px 74px; }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.top h2 { margin: 0; font: 500 22px/1 "Newsreader", Georgia, serif; letter-spacing: -.5px; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid #e3dcd1; border-radius: 999px; font-size: 11.5px; color: rgba(77, 70, 56, .85); white-space: nowrap; background: #fffdf8; }
.chip b { width: 6px; height: 6px; border-radius: 50%; background: #a9a092; }
.chip.booked b { background: #6f9a6a; } .chip.call b { background: #d39a5a; } .chip.new b { background: #d9786e; }

.table { border: 1px solid #efe9e0; border-radius: 8px; }
.th, .row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.3fr) 78px; align-items: center; gap: 9px; padding: 0 12px; }
.th { height: 32px; font-size: 11px; color: rgba(77, 70, 56, .55); border-bottom: 1px solid #efe9e0; background: #f8f4ee; border-radius: 8px 8px 0 0; }
.row { height: 52px; border-bottom: 1px solid #efe9e0; background: #fffdf8; font-size: 13px; }
.row:last-child { border-bottom: 0; border-radius: 0 0 8px 8px; }
.who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fffdf8; letter-spacing: .02em; }
.nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job { color: rgba(77, 70, 56, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm { display: none; }
.cell { display: flex; align-items: center; }
.lra-check { border-color: #d8d0c4; background: #fffdf8; }

.row.lra-hot { border-bottom-color: transparent; }
.row .lra-lift { inset: -1px -6px; border-radius: 8px; }
.row .lra-cursor { left: 24px; top: 30px; }
.lra-tag { background: #4d4638; font-family: Arial, Helvetica, sans-serif; }

/* the hot row's status turns to Booked as the tick lands (rides the part's clock: .is-live) */
.swap { display: grid; justify-items: start; }
.swap .chip { grid-area: 1 / 1; }
.swap .now { opacity: 0; }
.lra.is-live .swap .was { animation: chip-out .2s ease 1.75s both; }
.lra.is-live .swap .now { animation: chip-in .4s cubic-bezier(.34, 1.36, .64, 1) 1.85s both; }
@keyframes chip-out { to { opacity: 0; transform: scale(.85); } }
@keyframes chip-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

.toast { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 12px; background: #4d4638; color: #f6f1ea; font-size: 13px; box-shadow: 0 14px 30px -12px rgba(60, 52, 40, .5); }
.toast i { width: 24px; height: 24px; border-radius: 50%; background: #6f9a6a; display: grid; place-items: center; }
.toast small { display: block; opacity: .7; font-size: 11.5px; }

/* the quiet reset between plays */
.mock { transition: opacity .42s ease; }
.mock.is-out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .swap .was { opacity: 0; } .swap .now { opacity: 1; animation: none !important; }
  .mock { transition: none; }
}