/* The agent dashboard's Pig Pen tab, on top of dashboard.css (the shell: tabs, banner, header chips, the lead card), and the
   phone app's Pig Pen screen. Settled on the Pig Pen board (auction cards, 3 rounds, 2026-10-24). */

/* the banner is a short title strip here; the date card shows the date and time only, with Change States under the switch */
.banner.short{min-height:132px}
.datecard .avatar .tt{left:auto;right:calc(100% + 16px);top:50%;transform:translateY(-50%)}
.datecard .avatar .tt::after{left:auto;right:-10px;top:50%;margin:-4px 0 0;box-shadow:3px 0 0 #fff}
/* a button's insides never take the pointer, so the hand shows over its whole face */
.main button *,.rail .tab *,.appv button *{pointer-events:none}
:is(.fhead,.sortb button,.term,.claim,.upg):focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.term{all:unset;cursor:pointer;text-decoration:underline dotted 2px;text-underline-offset:3px;text-decoration-color:#c9347d}
.term:focus-visible{outline:3px dashed var(--pink);outline-offset:2px}
.tdef{position:absolute;z-index:60;padding:12px 14px;background:#222;color:#fff;font:600 15px/1.5 var(--pxf);box-shadow:0 0 0 3px #fff,0 0 0 6px #222}
.tdef b{display:block;margin-bottom:4px;font:700 13px/1.2 var(--tiny);text-transform:uppercase;letter-spacing:.05em;color:var(--coin)}
.tdef[hidden]{display:none}

/* ---------- the pieces of the tab ---------- */
.cnt{font:700 13px/1 var(--tiny);text-transform:uppercase;color:var(--muted)}
.filters .cnt{margin-left:auto;align-self:center}
/* why a listing is in the pen */
.why{display:inline-block;padding:4px 6px 3px;font:400 8px/1.38 var(--ps);text-transform:uppercase;white-space:nowrap;color:#fff}
.why.ask{background:var(--plum);box-shadow:2px 2px 0 #3d0f25}
.why.window{background:#b8571a;box-shadow:2px 2px 0 #5e2a08}
.why.none{background:var(--teal-2);box-shadow:2px 2px 0 var(--teal-dark)}
/* why it is in the pen, on one line at the card's foot */
.whyl{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font:600 15px/1.4 var(--pxf);color:var(--teal-dark)}
.whyl canvas{width:22px;height:22px;flex:none;margin-top:1px}
.whyl b{color:#7a1f4a}
.ppl>.whyl{grid-column:1/-1;margin:0;padding-top:7px;border-top:3px dashed var(--line)}
/* the header: In the pen on the left, the sort across from it */
.pph{gap:10px 12px}
.pph .sortb{margin-left:auto;align-items:center}
.sortl{margin-right:2px;font:700 13px/1 var(--tiny);text-transform:uppercase;color:var(--muted)}
.sortb{display:inline-flex;flex-wrap:wrap;gap:6px}
.sortb button{all:unset;cursor:pointer;padding:6px 8px 5px;font:700 13px/1 var(--tiny);text-transform:uppercase;color:var(--teal);background:#fff;box-shadow:0 0 0 2px var(--teal)}
.sortb button[aria-pressed="true"]{background:var(--teal);color:var(--coin)}
/* the price ladder: eleven steps from twice a new lead's price down to the floor, all grey but the one the price is on,
   hot pink, or green at the floor */
.lad{display:flex;align-items:flex-end;gap:2px;height:28px;padding:3px;background:var(--line);box-shadow:0 0 0 2px var(--teal-dark)}
.lad i{flex:1;background:#bdb8ac}
.lad i.now{background:var(--pink);box-shadow:inset 0 -3px 0 #c9347d}
.lad i.now.fl{background:var(--lime);box-shadow:inset 0 -3px 0 #127a34}
.lrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:600 14px/1.2 var(--pxf);color:var(--muted)}
.lrow span{white-space:nowrap}
.lrow b{font:400 13px/1 var(--ps);color:var(--teal-dark)}
.lrow .fl b{color:#127a34}
/* no !important on a Pixelify font shorthand: it resets the ligatures off, and Pixelify's "fl" reads as "A" */
.lrow b.atfloor{font:700 15px/1.2 var(--pxf);color:#127a34}
/* the last 5 seconds before a drop: the countdown and the price turn red, the red New Leads uses */
.buy.low .pr b,.buy.low [data-next]{color:var(--red)}
.ppl .ltop>*{flex:none}
.flash{animation:ppflash .9s steps(3)}
@keyframes ppflash{0%,60%{background:#ffe1ef;box-shadow:0 0 0 3px var(--pink)}}
.ppl .claim:disabled{filter:none;opacity:1;background:#cfc6b1;color:#5a625c;text-shadow:none;box-shadow:0 -4px 0 0 #8a8270,0 4px 0 0 #8a8270,-4px 0 0 0 #8a8270,4px 0 0 0 #8a8270,0 8px 0 0 #8a8270}
.won{display:none;padding:10px 12px;background:#effaf1;box-shadow:0 0 0 3px #127a34}
.won .who{font:700 18px/1.2 var(--pxf);color:var(--teal-dark)}
.won .tel{display:block;margin:6px 0 8px;font:400 13px/1 var(--ps);color:var(--teal-dark)}
.won small{display:block;font:600 14px/1.3 var(--pxf);color:#127a34}
.pcall{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:8px 12px;font:700 13px/1 var(--tiny);text-transform:uppercase;background:var(--teal);color:var(--coin);box-shadow:0 0 0 3px var(--teal-dark),0 5px 0 3px var(--teal-dark)}
.pcall:focus-visible{outline:3px dashed var(--pink);outline-offset:6px}
.ppl.claimed .won{display:block}
.ppl.claimed :is(.lad,.lrow,.claim),.ppl.taken :is(.lad,.lrow,.claim){display:none}
.ppl.taken .stamp{display:block}
.ppl .stamp{display:none}
.ppl.taken{background:#f3efe4}
.ppl.taken :is(.facts,.ltop,.whyl,.pr){opacity:.45}
.ppl.fresh{animation:ppin .6s steps(4)}
@keyframes ppin{from{transform:translateY(-10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ppl.fresh,.flash{animation:none}}
.ppl{grid-template-columns:minmax(0,1fr) 236px;padding:11px 16px 10px;gap:8px 16px}
.ppl .ltop{gap:5px;margin:0 0 7px}
.ppl .ltop .tag,.ppl .ltop .why{padding:3px 6px 2px}
.ppl .facts{gap:4px 14px}
.ppl .facts.big{margin-bottom:5px}
.ppl .facts small{margin-bottom:1px}
.ppl .buy{gap:6px}
.ppl .claim{min-height:40px}

/* ---------- the side column ---------- */
/* boxes that fold down to their title: an arrow at the top right */
.fhead{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.ftl{font:700 13px/1.2 var(--tiny);letter-spacing:.04em;text-transform:uppercase;color:var(--teal-dark)}
.farr{position:relative;flex:none;width:28px;height:28px;background:#fff;box-shadow:0 0 0 2px var(--teal-dark)}
.farr::after{content:'';position:absolute;left:7px;top:9px;width:14px;height:9px;background:var(--teal-dark);clip-path:polygon(50% 0,100% 100%,0 100%)}
.fold.shut .farr::after{transform:rotate(180deg)}
.fhead:hover .farr{background:#fff6c8}
.fbody[hidden]{display:none}
.fallbox{padding:14px 16px}
.fallbox canvas.candles{display:block;width:100%;height:auto;margin:10px 0 6px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--teal-dark)}
.cax{display:flex;justify-content:space-between;gap:8px;margin:0 0 10px;font:700 13px/1.2 var(--tiny);text-transform:uppercase;color:var(--plum)}
.cax .g{color:#127a34}
.fallbox ol{margin:0;padding-left:20px;font:600 14px/1.4 var(--pxf);color:var(--text)}
.fallbox li{margin:3px 0}
.sign{position:relative;padding:14px 16px;background:#c98f55;box-shadow:0 0 0 3px #6b4226,inset 0 -4px 0 #a8713f,inset 0 4px 0 #e0ad78,5px 7px 0 0 rgba(8,60,54,.14)}
.sign::before,.sign::after{content:'';position:absolute;bottom:8px;width:6px;height:6px;background:#6b4226}
.sign::before{left:8px}.sign::after{right:8px}
.sign .ftl{color:#3a2410;letter-spacing:.06em}
.sign .farr{background:#e0ad78;box-shadow:0 0 0 2px #6b4226}
.sign .farr::after{background:#3a2410}
.sign .fhead:hover .farr{background:#f0c896}
.sign .rh{margin:12px 0 6px;font:700 13px/1.2 var(--tiny);text-transform:uppercase;letter-spacing:.04em;color:#5e2a08}
.sign ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sign li{position:relative;padding-left:16px;font:700 15px/1.3 var(--pxf);color:#2a1a0a}
.sign li::before{content:'';position:absolute;left:0;top:5px;width:8px;height:8px;background:#2a1a0a}
.sign .term{text-decoration-color:#7a1f4a}
.side .tip .bub{font-size:15px}

/* empty, locked and paused */
.ppempty{display:grid;justify-items:center;gap:10px;padding:34px 18px 30px;text-align:center}
.ppempty canvas.pen0{width:240px;max-width:100%;height:auto;aspect-ratio:5/2;box-shadow:0 0 0 3px var(--teal-dark)}
.ppempty b{font:700 22px/1.2 var(--pxf);color:var(--teal-dark)}
.ppempty p{max-width:52ch;margin:0;font:600 15px/1.45 var(--pxf);color:var(--muted)}
.pplocked{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center;padding:26px 28px}
.pplocked .lk{width:42px;height:48px;margin-bottom:10px}
.pplocked h2{margin:0 0 8px;font:700 26px/1.2 var(--pxf);color:var(--teal-dark)}
.pplocked p{margin:0 0 8px;font:600 16px/1.45 var(--pxf)}
.pplocked ul{margin:0 0 16px;padding-left:20px;font:600 15px/1.45 var(--pxf)}
.pplocked .claim{display:inline-flex;padding:0 26px;text-decoration:none}
.pplocked canvas.pen0{width:100%;height:auto;box-shadow:0 0 0 3px var(--teal-dark);filter:saturate(.7)}
.pause{display:flex;gap:14px;align-items:center;margin:0 0 20px;padding:14px 18px;background:#fff1f0;box-shadow:0 -3px 0 0 #8f1d16,0 3px 0 0 #8f1d16,-3px 0 0 0 #8f1d16,3px 0 0 0 #8f1d16}
.pause canvas{width:30px;height:30px;flex:none}
.pause b{display:block;font:700 18px/1.25 var(--pxf);color:#8f1d16}
.pause span{font:600 15px/1.4 var(--pxf)}

/* ---------- narrower desktops and laptops ---------- */
@media (max-width:980px){
  .ppl,.pplocked{grid-template-columns:minmax(0,1fr)}
  .ppl .buy{padding:10px 0 0;border-left:0;border-top:3px dashed var(--line)}
  .ppl .facts.big{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- the phone app's Pig Pen screen (a phone, or ?phone=1) ---------- */
.appv{display:none}
html.phone body{background:var(--cream)}
html.phone .dash,html.phone .gate,html.phone .motion-toggle{display:none!important}
html.phone .appv{position:relative;display:flex;flex-direction:column;height:100vh;overflow:hidden}
.aptop{flex:none;display:flex;align-items:center;gap:10px;height:58px;padding:0 12px;background:var(--teal-dark)}
.aptop canvas.wm{width:128px;height:auto}
.aptop .pplan{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 2px;font:400 10px/1 var(--ps);text-transform:uppercase;background:#173f8c;color:#fff;box-shadow:0 0 0 2px #6fb6ff}
body[data-plan="max"] .aptop .pplan{background:#2a0f2e;color:var(--coin);box-shadow:0 0 0 2px var(--coin)}
body[data-plan="starter"] .aptop .pplan{background:#fff;color:var(--teal-dark);box-shadow:0 0 0 2px #9fd1c8}
.aptop .pplan canvas{width:26px;height:21px}
.aptop .rt{margin-left:auto;display:flex;align-items:center;gap:12px}
.aptop .bell{width:36px;height:36px}
.aptop .bell canvas{width:22px;height:22px}
.aptop .bell em{right:-9px;top:-9px;min-width:20px;padding:3px 4px 2px;font-size:11px}
.aptop .avatar{width:40px;height:38px}
.aptop .avatar canvas{width:34px;height:27px}
.apbody{flex:1;overflow:auto;padding:14px 14px 22px;-webkit-overflow-scrolling:touch}
.apbar{flex:none;display:flex;justify-content:space-between;gap:4px;padding:8px 10px 14px;background:var(--teal-dark);box-shadow:0 -3px 0 0 #2c6b62}
.apbar .tab{width:34px;height:36px}
.apbar .tab *{pointer-events:none}
.apbar .tab canvas{width:22px;height:22px}
.pt{margin:2px 0 12px;font:700 26px/1.1 var(--pxf);color:var(--teal-dark);text-shadow:3px 3px 0 #fff6c8}
.pstarter h2{margin:4px 0 8px;font:700 22px/1.15 var(--pxf);color:var(--teal-dark)}
.pstarter>p{margin:0 0 16px;font:600 15px/1.45 var(--pxf)}
/* slots and wait on one line, the two folding boxes, then the pen */
.pslot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 14px;padding:10px 12px;background:var(--paper);box-shadow:var(--rim)}
.pslot .coins i{width:20px;height:20px}
.pslot b{font:400 13px/1 var(--ps);color:var(--teal-dark)}
.pslot .pw{margin-left:auto;font:600 14px/1.2 var(--pxf);color:var(--muted)}
.pslot.full{background:#fff1f0;box-shadow:0 -3px 0 0 #8f1d16,0 3px 0 0 #8f1d16,-3px 0 0 0 #8f1d16,3px 0 0 0 #8f1d16}
.pfull{margin:-4px 0 14px;font:600 14px/1.35 var(--pxf);color:#8f1d16}
.pfolds{display:grid;gap:14px;margin:0 0 18px}
.pfeed .pph h2{font-size:22px}
.appv .pph .sortb{margin-left:0;width:100%;flex-wrap:nowrap}
.appv .sortl{display:none}
.appv .sortb{align-items:stretch}
.appv .sortb button{flex:1 1 auto;display:flex;align-items:center;justify-content:center;white-space:nowrap;text-align:center;padding:8px 4px 7px;font-size:12px}
.appv .pph .cnt{margin-left:auto}
/* the four filters fold into one dropdown, "Lead filters" */
.pfilt{margin:0 0 14px;padding:9px 12px;background:#fff;box-shadow:0 0 0 3px var(--teal)}
.pfilt .fhead{justify-content:flex-start}
.pfilt .ftl{color:var(--teal)}
.pfilt .fon{margin-left:auto;font:600 14px/1 var(--pxf);color:var(--muted)}
.pfilt .farr{width:26px;height:26px}
.pfilt .farr::after{left:6px;top:8px}
.pfilt .fbody.filters{margin:12px 0 4px;gap:10px 12px}
.appv .lead{grid-template-columns:minmax(0,1fr);padding:12px 14px}
.appv .ppl .buy{padding:10px 0 0;border-left:0;border-top:3px dashed var(--line)}
.appv .facts.big{grid-template-columns:repeat(2,minmax(0,1fr))}
.appv .facts.big span{font-size:19px}
.appv .pause{flex-direction:column;align-items:flex-start;gap:8px}
.appv .chip-ph{margin:18px 0 0;font:600 13px/1.4 var(--pxf);color:var(--muted)}
html.phone .toast{left:12px;right:12px;top:66px;max-width:none}
html.phone .tdef{max-width:calc(100vw - 24px)}