/* The live app screen (copied from v5; v6: the superset tag is aqua, no purple on the site).
   Drawn at the app's own size (390 × 844) and scaled into its slot. v5: the aurora in the
   chosen accent replaces the old round glows, and every accent tint comes from --acc. */
.phone { --s: 1; --acc: #FFD60A; --acc-tile: #fff1b8; --acc-pill: #fff5c8; position: relative; width: calc(390px * var(--s)); height: calc(844px * var(--s)); flex: none; }
.phone > .scr { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--s)); transform-origin: 0 0;
  border-radius: 56px; overflow: hidden; background: #f2efe9; color: #17130f; font: 400 15px/1.35 'DM Sans', system-ui, sans-serif;
  box-shadow: 0 0 0 10px #17130f, 0 0 0 11px #4a4239, 0 60px 120px -40px rgba(0,0,0,.8), 0 0 80px -10px color-mix(in srgb, var(--acc) 35%, transparent); }

.scr-aurora { z-index: 0; }

.scr-bar { position: relative; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px 0 44px; font: 600 16px 'DM Sans', sans-serif; }
.scr-isl { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #17130f; }
.scr-sys { display: flex; gap: 4px; } .scr-sys i { width: 6px; height: 11px; border-radius: 2px; background: #17130f; } .scr-sys i:last-child { width: 22px; border-radius: 4px; }

.scr-head { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 8px 20px 0; }
.scr-back { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #17130f; display: grid; place-items: center; font-size: 19px; }
.scr-pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(23,19,15,.55); font-size: 15px; background: rgba(242,239,233,.6); transition: background .4s, border-color .4s; white-space: nowrap; }
.scr-pill b { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); }
.is-adj .scr-pill { background: var(--acc-pill); border-color: #17130f; }
.is-adj .scr-pill b { animation: p-ping 1.2s ease-out 1; }
@keyframes p-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 70%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }

.scr-kicker { position: relative; padding: 22px 20px 6px; font-size: 13px; color: #5b544a; }
.scr-ex { color: #17130f; font-weight: 600; }
.scr-title { position: relative; padding: 0 20px; font: 700 37px/1.02 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
.scr-title em { font-style: italic; font-weight: 500; color: #5b544a; }
.scr-meta { position: relative; padding: 10px 0 14px; margin: 0 20px; font-size: 15px; color: #5b544a; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(23,19,15,.14); }
.m-min { color: #17130f; font-weight: 600; }

.scr-list { position: relative; list-style: none; margin: 0; padding: 0 20px; }
.row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; padding: 13px 0; border-bottom: 1px solid rgba(23,19,15,.1); transition: opacity .17s ease, transform .17s ease; }
.row.is-out { opacity: 0; transform: translateY(4px); }
.row-i { color: #8a8175; font-size: 14px; padding-top: 2px; }
.row-b { min-width: 0; }
.row-n { font-size: 16px; font-weight: 500; margin-right: 6px; }
.row-t { display: inline-block; vertical-align: 1px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.row-t:empty { display: none; }
.tag-reduced, .tag-shortened { background: #dcefdf; color: #1f6b33; }
.tag-easier { background: #dde5f3; color: #2647a3; }
.tag-superset { background: #d6f1fb; color: #0d5a73; }
.tag-skipped { background: #f6e3c8; color: #8a4b0b; }
.tag-machine, .tag-nomachine { background: #dde5f3; color: #2647a3; }
.row-m { display: block; font-size: 13px; color: #6f675c; margin-top: 3px; }
.row-r { text-align: right; }
.row-s { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; }
.row-w { display: block; font-size: 13px; color: #6f675c; margin-top: 3px; }
.row.is-skip .row-n, .row.is-skip .row-s { text-decoration: line-through; color: #9b9285; font-weight: 400; }
.row.is-skip .row-w { color: #b0a89c; }

/* the check-in sheet */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 20px 30px; background: #f5f2ec; border-radius: 30px 30px 0 0;
  box-shadow: 0 -20px 50px -20px rgba(23,19,15,.35); transform: translateY(105%); transition: transform .55s cubic-bezier(.32,.72,0,1); }
.scr::after { content: ''; position: absolute; inset: 0; background: rgba(23,19,15,.28); opacity: 0; transition: opacity .45s; pointer-events: none; }
.is-sheet .scr::after { opacity: 1; }
.is-sheet .sheet { transform: none; z-index: 2; }
.sheet-grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: #c9c2b7; margin: 0 auto 14px; }
.sheet-h { font: 700 30px/1.1 'Fraunces', Georgia, serif; margin-bottom: 14px; }
.sheet-l { font: 500 12px 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6f675c; margin: 10px 0 7px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tile { padding: 13px 14px; border-radius: 18px; border: 1px solid rgba(23,19,15,.16); background: #fbf8f3; transition: background .3s, border-color .3s, transform .3s cubic-bezier(.32,.72,0,1); }
.tile b { display: block; font-weight: 500; font-size: 16px; }
.tile small { display: block; font-size: 13px; color: #6f675c; margin-top: 2px; }
.tile.on { background: var(--acc-tile); border-color: #17130f; transform: scale(1.02); }
.sheet-sum { margin-top: 14px; padding: 13px 14px; border-radius: 16px; background: #e9e4dc; font-size: 14px; }
.sheet-sum b { display: block; font-weight: 600; } .sheet-sum span { color: #5b544a; }
.sheet-go { display: block; margin-top: 14px; height: 54px; border-radius: 999px; background: #17130f; color: #f5f1ea; font: 500 17px/54px 'DM Sans', sans-serif; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .row, .sheet, .tile, .scr::after { transition-duration: .01s; }
}

/* v7: a still of a real app screen (Phone.shot). The capture has its own content from the top, so the status bar floats over it. */
.phone--shot .scr-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: translateY(5%); transition: opacity .45s ease, transform .6s cubic-bezier(.32,.72,0,1); }
.phone--shot .scr-shot.is-above { transform: translateY(-5%); }
.phone--shot .scr-shot.is-on { opacity: 1; transform: none; }
.scr-tag { position: absolute; z-index: 3; left: -10px; top: 18px; transform: rotate(-6deg); padding: 4px 10px; border-radius: 9999px; background: #FBF8F3; border: 1px solid rgba(23,19,15,.18); box-shadow: 0 8px 16px -8px rgba(23,19,15,.45); font: 500 11px/14px 'DM Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #5b544a; }
.phone--shot .scr-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(242,239,233,.96) 62%, rgba(242,239,233,0)); }