/* The before-and-after pictures (pictures.js): TODAY in grey, then the colour comes in for WITH VIRGE. */
.pc{--pg:#ecebe8;--pgInk:#77736c;--pgLine:#d9d6d0;--pcut:#d92d20;--pgreen:#1a7f4b;--pgreenSoft:#e3f4ea;--pember:#ff6a3d;--pdeep:#c4381d;--pline:#ebe5db;
  --cap:30px;--body:15px;width:100%;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;font-family:Inter,system-ui,sans-serif;color:#15171c}
.pc-side{position:relative;isolation:isolate;border-radius:26px;padding:22px 26px 0;display:flex;flex-direction:column;min-height:450px;overflow:hidden}
.pc-lab{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.pc h3{font:700 var(--cap)/1.14 Inter,sans-serif;letter-spacing:-.02em;margin:12px 0 0}
.pc-scene{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px 0 14px}
.pc-ground{position:relative;height:80px;display:flex;align-items:flex-end;justify-content:center;gap:26px;overflow:hidden;margin:0 -26px;padding:0 26px}
.pc-ground::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:3px;background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 8px)}
.pc canvas{display:block}
.pc-today{background:var(--pg);color:var(--pgInk)}
.pc-today .pc-lab i{width:9px;height:9px;border-radius:50%;background:#b2aea6}
.pc-today h3{color:#5f5b55}
.pc-today .pc-ground{color:#b9b5ad}
.pc-virge{background:var(--pg);box-shadow:inset 0 0 0 3px transparent;transition:background .9s,box-shadow .9s,opacity .7s}
.pc-virge .pc-lab{color:#a9a59d;transition:color .9s}
.pc-virge .pc-lab svg{filter:grayscale(1);opacity:.5;transition:filter .9s,opacity .9s}
.pc-virge h3{opacity:0;transform:translateY(8px);transition:opacity .6s .2s,transform .6s .2s}
.pc-virge .pc-ground{color:#c9c5bd;transition:color .9s}
.pc.lit .pc-virge{background:#fbfaf7;box-shadow:inset 0 0 0 3px var(--pember)}
.pc.lit .pc-virge .pc-lab{color:var(--pdeep)}
.pc.lit .pc-virge .pc-lab svg{filter:none;opacity:1}
.pc.lit .pc-virge h3{opacity:1;transform:none}
.pc.lit .pc-virge .pc-ground{color:#15171c}
.pc-vg{transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1) .15s}
.pc.lit .pc-vg{transform:none}

/* the result under both halves */
.pc-result{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 22px;border-radius:20px;background:#fff;border:1.5px solid var(--pline)}
.pc-result .from{font:400 38px/1 'Instrument Serif',serif;color:#a9a59d;text-decoration:line-through;text-decoration-thickness:2px}
.pc-result .arr{font-size:24px;color:#c9c5bd}
.pc-result .to{font:400 44px/1 'Instrument Serif',serif;color:var(--pdeep)}
.pc-result .lbl{font-size:15px;color:#474b54;max-width:300px;line-height:1.35}
.pc-result .tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2b67a8;background:#e8eef8;padding:3px 8px;border-radius:99px}


/* every piece comes in at its own moment (data-pt, seconds) */
.pc [data-pt]{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.pc [data-pt].on{opacity:1;transform:none}
.pc-pile{position:relative}
.pc-pile .pc-mail{position:absolute;left:0;right:0}
.pc-pile [data-pt]{transform:translateY(-14px) rotate(var(--r,0deg))}
.pc-pile [data-pt].on{transform:rotate(var(--r,0deg))}

/* the pieces */
.pc-card{background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(21,23,28,.08);padding:14px 16px;font-size:var(--body);list-style:none}
.pc-today .pc-card{background:#f6f5f2;box-shadow:0 2px 0 var(--pgLine);color:#5f5b55}
.pc-card .hd{display:flex;align-items:baseline;gap:10px;font-weight:700;font-size:calc(var(--body) + 1px)}
.pc-card .hd span{margin-left:auto;font-weight:500;font-size:calc(var(--body) - 2px);color:#80858d}
.pc-card .row{display:flex;align-items:baseline;gap:12px;padding:8px 0 0;margin-top:8px;border-top:1.5px solid var(--pline)}
.pc-today .pc-card .row{border-color:var(--pgLine)}
.pc-card .row b{font-weight:600}
.pc-card .row span{margin-left:auto;color:#474b54;white-space:nowrap}
.pc-card .row.den b,.pc-card .row.den span{color:var(--pcut);font-weight:700}
.pc-card .row.tot b{font-weight:700}.pc-card .row.tot span{font-size:calc(var(--body) + 7px);font-weight:700;color:#15171c}
.pc-card .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0}
.pc-card .kv dt{color:#80858d;font-weight:500}.pc-card .kv dd{font-weight:600;margin:0}

.pc-mail{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:11px 14px;box-shadow:0 4px 14px rgba(21,23,28,.07);font-size:var(--body)}
.pc-today .pc-mail{background:#f6f5f2;box-shadow:0 2px 0 var(--pgLine);color:#5f5b55}
.pc-mail .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:#efe9df;color:#474b54}
.pc-today .pc-mail .av{background:#e2dfd9;color:var(--pgInk)}
.pc-mail .tx{min-width:0;flex:1}
.pc-mail .tx b{display:block;font-weight:700;font-size:calc(var(--body) - 1px)}
.pc-mail .tx span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-mail time{flex:none;font-size:calc(var(--body) - 2px);font-weight:600;color:#80858d}
.pc-mail.unread .tx b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#9d9991;margin-right:7px;vertical-align:1px}
.pc-mail.sent{box-shadow:inset 0 0 0 2px var(--pgreen),0 4px 14px rgba(21,23,28,.07)}
.pc-mail.sent .av{background:var(--pgreenSoft);color:var(--pgreen)}
.pc-mail.sent time{color:var(--pgreen)}
.pc-mail.one{padding:9px 14px}.pc-mail.one .av{width:28px;height:28px;font-size:11px}
.pc-mail.one .tx b{display:inline;margin-right:8px}

.pc-bub{max-width:88%;padding:11px 15px;border-radius:18px;font-size:var(--body);line-height:1.4}
.pc-bub small{display:block;font-size:calc(var(--body) - 3px);font-weight:600;margin-bottom:3px;opacity:.75}
.pc-bub.them{align-self:flex-start;background:#fff;box-shadow:0 3px 12px rgba(21,23,28,.07);border-bottom-left-radius:6px}
.pc-today .pc-bub.them{background:#f6f5f2;box-shadow:0 2px 0 var(--pgLine)}
.pc-bub.us{align-self:flex-end;background:#2f7cf6;color:#fff;border-bottom-right-radius:6px}

.pc-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font-size:var(--body);font-weight:700}
.pc-chip.loss{background:#fbe4e1;color:var(--pcut)}
.pc-chip.win{background:var(--pgreenSoft);color:var(--pgreen)}
.pc-chip.calm{background:#fff;color:#474b54;box-shadow:0 2px 8px rgba(21,23,28,.06)}
.pc-chip.wait{background:#e2dfd9;color:#6d6963}
.pc-chip svg{width:17px;height:17px;flex:none}

.pc-ask{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 6px 20px rgba(21,23,28,.08);font-size:var(--body)}
.pc-ask canvas{flex:none}
.pc-ask .tx{flex:1;line-height:1.35}.pc-ask .tx b{display:block}.pc-ask .tx span{color:#474b54}
.pc-ask .ok{position:relative;flex:none;padding:8px 16px;border-radius:10px;background:#d6461f;color:#fff;font-weight:700}
.pc-ask .ok::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:rgba(21,23,28,.55);opacity:0}
.pc-ask .ok.tap::after{animation:pc-tap .7s ease-out}
@keyframes pc-tap{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}

.pc-check{margin:8px 0 0;padding:0}
.pc-check li{list-style:none;display:flex;align-items:center;gap:11px;padding:7px 0;border-top:1.5px solid var(--pline)}
.pc-check li:first-child{border-top:0}
.pc-check .bx{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--pgreenSoft);color:var(--pgreen)}
.pc-check .bx svg{width:15px;height:15px}
.pc-check li.miss .bx{background:#fbe4e1;color:var(--pcut)}
.pc-check li.miss b{color:var(--pcut)}
.pc-check li.miss.fixed .bx{background:var(--pgreenSoft);color:var(--pgreen)}
.pc-check li.miss.fixed b{color:#15171c}
.pc-check li.fixline{border:0;padding:0 0 4px 33px;font-size:calc(var(--body) - 1.5px);color:var(--pdeep);font-weight:600}

.pc-tl{padding:16px 16px 4px;margin:0}
.pc-tl li{list-style:none;display:grid;grid-template-columns:76px 18px 1fr;align-items:start;gap:10px;padding-bottom:12px;position:relative}
.pc-tl time{font-weight:700;color:#80858d;font-size:calc(var(--body) - 1px);padding-top:1px;text-align:right}
.pc-tl i{width:14px;height:14px;border-radius:50%;background:var(--pember);margin-top:3px;box-shadow:0 0 0 4px #fdebe3}
.pc-tl li:not(:last-child)::after{content:"";position:absolute;left:94px;top:20px;bottom:-2px;width:2px;background:var(--pline)}
.pc-tl b{display:block;font-weight:700}
.pc-tl span{display:block;color:#474b54;font-size:calc(var(--body) - 1px)}

.pc-days{display:flex;align-items:baseline;gap:10px}
.pc-days b{font:400 64px/1 'Instrument Serif',serif;color:#5f5b55}
.pc-days span{font-size:var(--body);font-weight:600}

/* a work order: asked for in the chat, the sheet filling in, then Save & send to everyone on it */
.pc-chatmsg{align-self:flex-end;max-width:86%;background:#15171c;color:#fff;border-radius:16px 16px 6px 16px;padding:9px 14px;font-size:var(--body);line-height:1.35}
.pc-chatmsg small{display:block;font-size:calc(var(--body) - 3px);font-weight:600;opacity:.65;margin-bottom:2px}
.pc-wo{position:relative;background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(21,23,28,.08);padding:11px 16px 9px;font-size:calc(var(--body) - 1px)}
.pc-wo .co{display:flex;justify-content:space-between;gap:10px;font:600 10.5px/1.2 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#80858d;border-bottom:1.5px solid #15171c;padding-bottom:5px}
.pc-wo .tt{font-weight:700;font-size:calc(var(--body) + 2px);margin:6px 0 3px}
.pc-wo .r{display:grid;grid-template-columns:42% 1fr;gap:10px;padding:3px 0;border-top:1px solid var(--pline)}
.pc-wo .r span{color:#80858d}.pc-wo .r b{font-weight:600}
.pc .pc-wo .stamp{position:absolute;right:12px;top:28px;border:2.5px solid var(--pgreen);color:var(--pgreen);background:rgba(255,255,255,.85);font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:7px;opacity:0;transform:rotate(-8deg) scale(1.7);transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.pc .pc-wo .stamp.on{opacity:1;transform:rotate(-8deg) scale(1)}
.pc-send{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(21,23,28,.08);padding:10px 12px;font-size:var(--body)}
.pc-send .lbl{flex:1;font-weight:600;font-size:calc(var(--body) - 1px);color:#474b54}
.pc-send .post,.pc-send.sent .pre{display:none}.pc-send.sent .post{display:inline}.pc-send.sent .lbl .post{color:var(--pgreen);font-weight:700}
.pc-send .ok{position:relative;flex:none;padding:7px 14px;border-radius:10px;background:#d6461f;color:#fff;font-weight:700;transition:background .3s}
.pc-send.sent .ok{background:var(--pgreen)}
.pc-send .ok::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:rgba(21,23,28,.55);opacity:0}
.pc-send .ok.tap::after{animation:pc-tap .7s ease-out}
.pc-send .to{width:100%;display:flex;flex-wrap:wrap;gap:5px}
.pc-to{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 2px;border-radius:99px;background:var(--pgreenSoft);color:#15171c;font-weight:600;font-size:calc(var(--body) - 2px)}
.pc-to i{width:20px;height:20px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:700;color:var(--pgreen)}
.pc-to small{font-size:calc(var(--body) - 3.5px);color:#4d7a5f;font-weight:500}
/* the quick form: the field being answered lights up; a typed answer shows its caret, a picked one its choices, and the
   one picked settles into the field like the rest. The clock in the corner counts the real time it takes. */
.pc-form .r{grid-template-columns:36% 1fr;align-items:center;min-height:29px;border-radius:3px;transition:background .3s,box-shadow .3s}
.pc .pc-form .r[data-pt]{opacity:1;transform:none}   /* the form shows all its fields, empty, and they fill in one by one */
.pc-form .r:not(.on) b::before{content:"";width:58%;height:9px;border-radius:5px;background:#f1ede6}
.pc-form .r.pick:not(.on) .o{display:none}
.pc-form .r.cur{background:#fff3ec;box-shadow:0 0 0 5px #fff3ec}
.pc-form .r b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;min-height:1.3em}
.pc-form i{font-style:normal}
.pc-form .caret{display:none;width:2px;height:1.15em;margin-left:1px;background:var(--pember);animation:pc-blink .9s steps(2) infinite}
.pc-form .r.type.cur .caret{display:inline-block}
@keyframes pc-blink{50%{opacity:0}}
.pc-form .o{position:relative;overflow:hidden;white-space:nowrap;max-width:220px;margin-right:5px;padding:2px 10px;border:1.5px solid var(--pline);border-radius:99px;background:#fff;font-weight:600;color:#474b54;transition:max-width .4s,padding .4s,margin .4s,border-color .3s,background .3s,color .3s,opacity .3s}
.pc-form .o.on{border-color:var(--pember);background:#fff1ea;color:var(--pdeep)}
.pc-form .r.pick:not(.cur) .o.on{border-color:transparent;background:none;padding:2px 0;margin-left:-1.5px;color:#15171c}
.pc-form .o.gone{max-width:0;padding:2px 0;margin-right:0;border-width:0;opacity:0}
.pc-form .o::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:rgba(21,23,28,.45);opacity:0}
.pc-form .o.tap::after{animation:pc-tap .7s ease-out}
.pc-clock{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:99px;background:#fff;box-shadow:0 2px 8px rgba(21,23,28,.08);color:#474b54;letter-spacing:0;text-transform:none;font-size:13.5px;opacity:0;transition:opacity .6s,background .3s,color .3s}
.pc-clock svg{width:15px;height:15px}.pc-clock b{font-variant-numeric:tabular-nums}
.pc.lit .pc-clock{opacity:1}
.pc-clock.done{background:var(--pgreenSoft);color:var(--pgreen)}

/* the Today | With Virge tabs (and Play again) only show when it's one at a time */
.pc-flip{display:none}
/* One at a time (a phone, or a page that asks for it): Today plays, then With Virge wipes in over it, left to right,
   and the colour comes with it. The tabs wipe back and forth. */
.pc.narrow{--cap:24px;--body:14px;grid-template-columns:1fr;gap:10px}
.pc.narrow .pc-flip{display:flex;align-items:center;gap:6px}
.pc .pc-flip .pc-again{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border-color:transparent;background:none;color:#80858d}
.pc-again svg{width:14px;height:14px}
.pc .pc-flip .pc-again:hover{color:#15171c}
.pc-flip button{padding:6px 13px;border-radius:99px;font:700 12.5px Inter,sans-serif;color:#80858d;background:#fff;border:1.5px solid var(--pline);cursor:pointer;transition:all .4s}
.pc-flip button.on{color:#fff;background:#8b8a84;border-color:#8b8a84}
.pc-flip button.on.v{background:var(--pember);border-color:var(--pember)}
.pc.narrow .pc-side{grid-area:2/1;min-height:0;border-radius:20px;padding:16px 16px 0}
.pc.narrow .pc-virge{clip-path:inset(0 100% 0 0 round 20px);pointer-events:none;transition:clip-path 1.1s cubic-bezier(.65,0,.35,1),background .9s,box-shadow .9s}
.pc.narrow.lit .pc-virge{clip-path:inset(0 0 0 0 round 20px);pointer-events:auto}
.pc.narrow.lit.back .pc-virge{clip-path:inset(0 100% 0 0 round 20px);pointer-events:none}
.pc.narrow .pc-scene{gap:8px;padding:12px 0 10px;min-height:300px}
.pc.narrow .pc-ground{height:56px;margin:0 -16px;padding:0 16px;gap:16px}
.pc.narrow .pc-ground::after{left:16px;right:16px}
.pc.narrow .pc-result{grid-row:3;flex-wrap:wrap;gap:6px 12px;padding:12px 14px}
.pc.narrow .pc-result .from{font-size:28px}.pc.narrow .pc-result .to{font-size:32px}
.pc.narrow .pc-result .lbl{flex-basis:100%;text-align:center;font-size:13px;max-width:none}

.pc.narrow .pc-days b{font-size:48px}
.pc.narrow .pc-tl li{grid-template-columns:58px 16px 1fr;gap:8px;padding-bottom:9px}
.pc.narrow .pc-tl li:not(:last-child)::after{left:72px}
.pc.narrow .pc-mail:not(.one) .tx span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* One at a time on a computer: the same, a little bigger */
.pc.narrow.big{--cap:28px;--body:15px;gap:12px}
.pc.narrow.big .pc-side{padding:20px 26px 0;border-radius:24px}
.pc.narrow.big .pc-scene{gap:10px;padding:16px 0 12px;min-height:340px}
.pc.narrow.big .pc-ground{height:68px;margin:0 -26px;padding:0 26px}
.pc.narrow.big .pc-ground::after{left:26px;right:26px}
.pc.narrow.big .pc-virge,.pc.narrow.big.lit .pc-virge{border-radius:24px}
.pc.narrow.big .pc-flip button{font-size:13.5px;padding:7px 15px}

/* A laptop screen (800 px tall or so): the same picture, tighter, so it and its number fit on one screen */
@media (max-height:880px){
  .pc:not(.narrow){--cap:25px;--body:14px}
  .pc:not(.narrow) .pc-side{min-height:0;padding:18px 22px 0}
  .pc:not(.narrow) .pc-scene{padding:10px 0}
  .pc:not(.narrow) .pc-ground{height:58px;margin:0 -22px;padding:0 22px}
  .pc:not(.narrow) .pc-result{padding:8px 18px}
  .pc:not(.narrow) .pc-result .to{font-size:36px}.pc:not(.narrow) .pc-result .from{font-size:30px}
}
@media (prefers-reduced-motion:reduce){ .pc [data-pt],.pc-vg,.pc-virge,.pc-virge *{transition:none!important} }