/* The agent dashboard's Build Referrals tab, on top of dashboard.css (the shell: tabs, banner, header chips).
   Settled on the Build Referrals design board (the ticket booth, with its app screen; rounds 1-2, 2026-10-23). */

/* 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 *,.app button *{pointer-events:none}
.credchip .here{display:block;font:400 8px/1.79 var(--ps);text-transform:uppercase;color:#127a34}

/* ---------- buttons ---------- */
.btn1,.btn2,.cpy,.x{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font:700 13px/1 var(--tiny);text-transform:uppercase}
.btn1 canvas,.btn2 canvas,.cpy canvas{width:20px;height:20px}
.btn1{padding:10px 14px;background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);box-shadow:0 0 0 3px var(--plum),0 5px 0 3px var(--plum)}
.btn1:hover{filter:brightness(1.08)}
.btn2{padding:9px 12px;background:#fff;color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark),0 4px 0 3px var(--teal-dark)}
.btn2:hover{background:#fff6c8}
.x{justify-content:center;width:32px;height:32px;font:400 13px/1 var(--ps);background:#fff;color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark)}
.cpy{justify-content:center;flex:none;min-width:128px;padding:9px 12px;background:var(--teal);color:var(--coin);box-shadow:0 0 0 3px var(--teal-dark),0 5px 0 3px var(--teal-dark)}
.cpy:hover{background:var(--teal-2)}
.cpy.done{background:#127a34;color:#fff}
.cpy.sm{min-width:112px;padding:8px 10px;font-size:12px}
.shr{justify-content:center}
:is(.btn1,.btn2,.cpy,.x,.tbd,.pnl):focus-visible{outline:3px dashed var(--pink);outline-offset:4px}
.law{display:inline-block;padding:4px 6px 3px;font:400 8px/1.25 var(--ps);text-transform:uppercase;color:#fff;background:#4a2a8f;transform:rotate(-3deg);box-shadow:2px 2px 0 #241452}

/* the placeholder: purple like the lawyer tags, so it can't be mistaken for a real number */
.tbd{all:unset;box-sizing:border-box;cursor:pointer;display:inline-block;padding:2px 6px 1px;font:700 .82em/1.2 var(--tiny);letter-spacing:.02em;color:#4a2a8f;background:#efe7ff;box-shadow:0 0 0 2px #4a2a8f;white-space:nowrap;vertical-align:1px}
.tbd:hover{background:#e0d2ff}

.rwd{margin:6px 0 0;font:600 20px/1.45 var(--pxf);color:var(--text)}
.rwd b{color:var(--teal-dark)}
.rwd .tbd{line-height:1}
.rwd.sm{font-size:17px;margin:0}
.fine{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font:600 14px/1.45 var(--pxf);color:var(--muted)}
.fine>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.fine canvas{flex:none;width:24px;height:24px;margin-top:-2px}

/* link, code, copy */
.lrow{display:flex;align-items:stretch;gap:10px;min-width:0}
.lbox,.cbox{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.lbox canvas{flex:none;width:24px;height:24px}
.lbox .lt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 16px/1.2 var(--pxf);color:var(--teal-dark)}
.cbox{flex:none}
.cbox small{font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.cbox b{font:400 17px/1 var(--ps);letter-spacing:.08em;color:var(--teal-dark)}

/* the message Email it (or Share) starts with */
.msg{margin-top:14px;padding:12px 14px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.mh2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 12px/1.2 var(--tiny);text-transform:uppercase;color:var(--teal)}
.mh2 canvas{flex:none;width:24px;height:24px}
.mh2 .x{margin-left:auto;flex:none}
.msg .ms{margin:0 0 6px;font:700 14px/1.3 var(--pxf);color:var(--text)}
.msg .ms small{display:inline-block;margin-right:8px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.msg .mb{margin:0;padding:8px 10px;font:600 14px/1.5 var(--pxf);background:#f7f2e4;box-shadow:inset 3px 0 0 #d9c9a4;overflow-wrap:anywhere}
.msg mark{background:#fff1a8;padding:0 2px}
.msg .mn{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;font:600 13px/1.4 var(--pxf);color:var(--muted)}
.msg.sm .mb{font-size:13px}

/* ---------- the ticket booth ---------- */
.ref{display:grid;gap:0}
.ref .sub4{margin:22px 0 10px;font:700 18px/1.2 var(--pxf);color:var(--teal-dark)}
.r1top{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:stretch}
.ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:0;background:#fff6c8}
.tkl{display:flex;align-items:center;gap:18px;min-width:0;padding:16px 22px 14px}
.tkl canvas{flex:none;width:108px;height:87px}
.tkh h3{margin:0;font:700 30px/1.1 var(--pxf);color:var(--teal-dark)}
/* the ticket's punched line: link, code and Email it sit on the stub below it */
.tkr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:stretch;min-width:0;padding:16px 22px 20px;border-top:3px dashed #d9b85a}
.tkr .msg,.tkr>.lrow:first-child{grid-column:1/-1}
.tkr .msg{margin-top:0}
.tka{display:flex;gap:12px;flex-wrap:wrap}
.wallet{padding:18px 20px;background:var(--paper)}
.wallet h4,.empty b{margin:0}
.wallet h4{font:400 8px/1.51 var(--ps);text-transform:uppercase;color:var(--muted)}
.wbig{display:flex;align-items:center;gap:12px;margin-top:10px}
.wbig canvas{flex:none;width:42px;height:42px}
.wbig b{font:400 40px/1 var(--ps);color:var(--teal-dark)}
.wbig span{font:700 18px/1.2 var(--pxf);color:var(--teal-dark)}
.wbig small{display:block;margin-top:4px;font:600 15px/1.2 var(--pxf);color:var(--muted)}
.each{margin:10px 0 0;font:600 15px/1.3 var(--pxf);color:var(--muted)}
.wst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0}
.wst div{padding:8px 10px;background:#fff;box-shadow:0 0 0 2px #e6dcc4}
.wst dt{font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.wst dd{margin:4px 0 0;font:400 18px/1 var(--ps);color:var(--teal-dark)}
.wn{margin:14px 0 0;font:600 14px/1.45 var(--pxf);color:var(--text)}

.pens3{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch}
.pens3 .arr{display:grid;place-items:center;font:400 26px/1 var(--ps);color:var(--teal-dark)}
.pen3{display:flex;flex-direction:column;background:#d6a372;padding:10px;box-shadow:0 -4px 0 0 #8a5a33,0 4px 0 0 #8a5a33,-4px 0 0 0 #8a5a33,4px 0 0 0 #8a5a33,6px 9px 0 0 rgba(8,60,54,.16);
  background-image:repeating-linear-gradient(0deg,transparent 0 14px,rgba(138,90,51,.25) 14px 16px)}
.pnh{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);box-shadow:0 0 0 3px #8a5a33}
.pnn{display:grid;place-items:center;flex:none;width:34px;height:34px;font:400 15px/1 var(--ps);background:var(--coin);color:var(--teal-dark);box-shadow:0 0 0 3px #8a5a00}
.pnh b{display:block;font:700 18px/1.15 var(--pxf);color:var(--teal-dark)}
.pnh small{display:block;font:600 13px/1.3 var(--pxf);color:var(--muted)}
.pnh em{margin-left:auto;font:400 16px/1 var(--ps);font-style:normal;color:var(--teal-dark)}
.p3 .pnh{background:#fff6c8}
/* a pen never grows past four agents: the rest scroll inside it */
.pnl{list-style:none;margin:10px 0 0;padding:3px 4px 3px 2px;display:grid;gap:8px;align-content:start;max-height:262px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8a5a33 rgba(251,246,234,.5)}
.pnl li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;box-shadow:0 0 0 2px #8a5a33}
.pnl li canvas{flex:none;width:24px;height:24px}
.pnl li b{display:block;font:700 16px/1.2 var(--pxf);color:var(--text)}
.pnl li small{display:block;font:600 13px/1.3 var(--pxf);color:var(--muted)}
.pnl li.none{justify-content:center;padding:14px;font:700 12px/1 var(--tiny);text-transform:uppercase;color:#8a5a33;background:rgba(251,246,234,.7);box-shadow:none}
.pen3 .more{margin:8px 0 0;text-align:center;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 #6b4226}
.plus{margin-left:auto;padding:4px 6px 3px;font:400 8px/1.38 var(--ps);font-style:normal;text-transform:uppercase;white-space:nowrap;background:#e3f7e6;color:#127a34;box-shadow:0 0 0 2px #7fd08c}

.empty{display:flex;align-items:center;gap:16px;margin:18px 0 0;padding:14px 18px;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.empty canvas{flex:none}
.empty b{display:block;font:700 20px/1.2 var(--pxf);color:var(--teal-dark)}
.empty p{margin:4px 0 0;font:600 15px/1.45 var(--pxf)}

/* ---------- narrower desktops and laptops ---------- */
@media (max-width:1180px){
  .r1top{grid-template-columns:minmax(0,1fr)}
  .tkl{padding:14px 18px 12px}
}
@media (max-width:900px){
  .main{padding:18px 18px 26px}
  .tkr{grid-template-columns:minmax(0,1fr);padding:14px 18px 18px}
  .tkh h3{font-size:24px}
  .pens3{grid-template-columns:minmax(0,1fr);gap:0}
  .pens3 .arr{transform:rotate(90deg);height:22px}
}

/* ---------- phones: the app screen ---------- */
.app{display:none}
@media (max-width:700px){
  .dash,.motion-toggle{display:none}
  body{background:var(--cream)}
  .app{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh}
}
.ptop{display:flex;align-items:center;gap:10px;height:58px;padding:0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));background:var(--teal-dark)}
.ptop canvas.wm{width:142px;height:22px}
.ptop .rt{margin-left:auto;display:flex;align-items:center;gap:12px}
.ptop .bell{width:38px;height:38px}
.ptop .bell canvas{width:26px;height:26px}
.ptop .avatar{width:44px;height:40px}
.ptop .avatar canvas{width:34px;height:28px}
.app .scroll{overflow-y:auto;padding:12px 12px 18px;display:grid;gap:12px;align-content:start}
.ptitle{display:flex;align-items:center;gap:8px}
.ptitle canvas{width:24px;height:24px}
.ptitle h2{font:700 22px/1.1 var(--pxf);color:var(--teal-dark)}
.app .ref{gap:12px}
.app .ref .sub4{margin:6px 0 0}
.app .tkh h3{font-size:20px}
.app .tkl{padding:12px 14px 10px}
.app .tkr{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 14px 14px}
.app .tka .shr{flex:1}
.app .lbox .lt{font-size:14px}
.app .cbox b{font-size:14px}
.app .fine{margin:0;font-size:12.5px}
.app .wallet{padding:12px 14px}
.app .wbig b{font-size:28px}
.app .wst{margin-top:10px}
.app .wst dd{font-size:15px}
.app .wn{margin-top:10px;font-size:13px}
.app .pens3{grid-template-columns:minmax(0,1fr);gap:0}
.app .pens3 .arr{transform:rotate(90deg);height:22px}
.app .pen3{padding:8px}
.app .pnh{padding:8px 10px}
.app .pnh b{font-size:16px}
.app .pnl{max-height:252px}
.app .msg{margin-top:4px}
.app .empty{gap:10px;padding:10px 12px;margin:0}
.app .empty b{font-size:17px}
.app .empty p{font-size:13px}
.tbar{display:flex;align-items:center;padding:8px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));background:var(--teal-dark);box-shadow:0 -3px 0 0 #2c6b62}
.tbar .tabs{flex-direction:row;gap:4px;width:100%;justify-content:space-between}
.tbar .tab{width:min(35px,9.4vw);height:36px}
.tbar .tab canvas{width:24px;height:24px}
.tbar .tab.on{box-shadow:0 -3px 0 0 #6b3f00,0 3px 0 0 #6b3f00,-3px 0 0 0 #6b3f00,3px 0 0 0 #6b3f00}
.tbar .tab .lock{width:12px;height:14px}