/* Today: the daily round on home (today.js). Calm dark card with a paper ticket strip. Nov 3 2026 */

.welcome-back.t3-host { --paper:#f4ead3; --ink:#2a2433; --red:#c8423a; --card:rgba(20,21,44,.92); --line:rgba(255,255,255,.08); --mut:#a9a6c4; --gold:#ffcb05; container-type:inline-size; padding:0; background:none; border:0; box-shadow:none; }
.t3 { --paper:#f4ead3; --ink:#2a2433; --red:#c8423a; --card:rgba(20,21,44,.92); --line:rgba(255,255,255,.08); --mut:#a9a6c4; --gold:#ffcb05;
  text-align:left; color:#f1effa; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 34px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.t3-strip { position:relative; display:flex; align-items:center; gap:10px; padding:9px 14px 10px; color:var(--ink);
  background:linear-gradient(180deg,#f8f0dc,#efe3c6); }
.t3-strip::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:6px;   /* perforated edge */
  background:radial-gradient(circle at 5px 0, transparent 2.6px, #efe3c6 3px) 0 0/10px 6px repeat-x; }
.t3-k { font-family:var(--pixel, monospace); font-size:12px; letter-spacing:.04em; color:var(--red); padding-top:2px; }
.t3-date { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7b6e58; }
.t3-prog { margin-left:auto; display:flex; align-items:center; gap:8px; }
.t3-prog em { font-style:normal; font-size:11.5px; font-weight:800; color:#7b6e58; font-variant-numeric:tabular-nums; }
.t3-holes { display:flex; gap:5px; }
.t3-holes i { width:11px; height:11px; border-radius:50%; background:rgba(42,36,51,.08); box-shadow:inset 0 0 0 1.5px rgba(42,36,51,.28); }
.t3-holes i.on { background:#14152c; box-shadow:inset 0 2px 3px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.75); }
.t3-stamp { margin-left:auto; font-size:11px; font-weight:900; letter-spacing:.2em; color:var(--red); border:2px solid var(--red); border-radius:5px; padding:4px 8px 3px;
  transform:rotate(-5deg); opacity:.9; }
.t3-body { padding:14px 14px 8px; }
.t3-hi { font-size:15.5px; font-weight:800; margin-bottom:6px; }
.t3-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"tok t btn" "tok s btn"; align-items:center; column-gap:12px; row-gap:1px; padding:9px 0; border-top:1px solid var(--line); }
.t3-row > .t3-tok { grid-area:tok; } .t3-t { grid-area:t; align-self:end; } .t3-s { grid-area:s; align-self:start; } .t3-row > .t3-btn, .t3-row > .t3-ok { grid-area:btn; }
.t3-s .sm { display:none; }
.t3-row:first-child { border-top:0; }
.t3-tok { width:40px; height:40px; display:grid; place-items:center; position:relative; }
.t3-dust { border-radius:10px; background:radial-gradient(circle at 35% 30%, rgba(255,214,90,.35), rgba(255,203,5,.08)); box-shadow:inset 0 0 0 1px rgba(255,203,5,.35);
  display:flex; flex-direction:column; gap:0; line-height:1; }
.t3-dust b { color:var(--gold); font-size:15px; } .t3-dust small { font-size:10.5px; font-weight:800; color:#ffe58a; }
.t3-pack img { height:40px; width:auto; border-radius:3px; box-shadow:0 3px 8px rgba(0,0,0,.5); transform:rotate(-6deg); }
.t3-q { border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); background:rgba(255,255,255,.04); }
.t3-q b { font-family:var(--pixel, monospace); font-size:13px; } .t3-q small { position:absolute; right:5px; bottom:4px; font-size:9.5px; color:var(--mut); font-weight:800; }
.t3-ksd img { position:absolute; width:20px; border-radius:2px; box-shadow:0 2px 5px rgba(0,0,0,.55), 0 0 0 1.5px #e9ecf3;
  left:calc(4px + var(--i) * 8px); top:calc(6px - var(--i) * 1px); transform:rotate(calc(-10deg + var(--i) * 10deg)); }
.t3-slab img { width:26px; border-radius:2px; box-shadow:0 0 0 2.5px #e9ecf3, 0 0 0 3.5px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.5); }
.t3-t { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.t3-s { font-size:12.5px; color:var(--mut); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t3-btn { font:inherit; font-size:13px; font-weight:800; padding:7px 15px; border-radius:999px; cursor:pointer; color:#f1effa; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); }
.t3-row.next .t3-btn { background:var(--gold); color:#1b1600; border-color:transparent; box-shadow:0 4px 14px rgba(255,203,5,.25); }
.t3-row.done .t3-tok { filter:grayscale(.9) brightness(.7); opacity:.6; }
.t3-row.done .t3-t { color:var(--mut); font-weight:700; } .t3-row.done .t3-s { color:#7f7c9a; }
.t3-ok { width:26px; height:26px; margin-right:6px; } .t3-ok svg { width:100%; height:100%; fill:none; stroke:#5fd38d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.t3-ok circle { stroke-opacity:.5; } .t3-ok path { stroke-width:2.4; stroke-dasharray:16; }
.t3-fine { margin:6px 0 0; font-size:13px; color:var(--mut); }
.t3-also { display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mut); }
.t3-also b { color:#f1effa; } .t3-also .wb-cd { white-space:nowrap; } .t3-al { max-width:100%; overflow-wrap:anywhere; }
.t3-min { display:block; margin:6px auto 0; font:inherit; font-size:12px; color:var(--mut); background:none; border:0; cursor:pointer; }
.t3.all .t3-body { padding-top:12px; }
.t3-stub { display:flex; align-items:center; gap:12px; width:100%; padding:0 14px 0 0; border-radius:12px; overflow:hidden; cursor:pointer; font:inherit; text-align:left;
  color:#f1effa; background:rgba(20,21,44,.92); border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 24px rgba(0,0,0,.4); }
.t3-stub .t3-strip { padding:11px 14px; } .t3-stub .t3-strip::after { display:none; }
.t3-stub-t { flex:1; font-weight:800; font-size:14px; } .t3-stub-c { font-size:12.5px; font-weight:800; color:var(--gold); }
@container (max-width:300px) {
  .t3-stub { flex-wrap:wrap; row-gap:0; padding:0 0 9px; } .t3-stub .t3-strip { width:100%; box-sizing:border-box; } .t3-stub-t { padding-left:14px; } .t3-stub-c { padding-right:14px; }
  .t3-strip { flex-wrap:wrap; row-gap:6px; padding:9px 12px 10px; } .t3-prog, .t3-stamp { margin-left:0; } .t3-body { padding:12px 12px 8px; }
  .t3-row { grid-template-columns:34px minmax(0,1fr) auto; grid-template-areas:"tok t t" "tok s btn"; column-gap:10px; row-gap:4px; padding:10px 0; }
  .t3-tok { width:34px; height:34px; } .t3-pack img { height:34px; } .t3-row > .t3-tok { align-self:center; }
  .t3-t { font-size:14px; } .t3-s { font-size:12px; align-self:center; } .t3-s .lg { display:none; } .t3-s .sm { display:inline; }
  .t3-btn { padding:4px 12px; font-size:12px; } .t3-ok { width:22px; height:22px; margin-right:0; }
  .t3-also { font-size:12px; gap:4px; } .t3-hi { font-size:14.5px; }
  .t3-ksd img { width:16px; left:calc(2px + var(--i) * 6px); top:calc(8px - var(--i) * 1px); }
}

.t3-holes i { position:relative; } .t3-holes u { display:none; }
@media (prefers-reduced-motion:no-preference) {
  /* the hole gets punched: a press, then the chad drops out */
  .t3-holes i.just { animation:t3punch .42s cubic-bezier(.3,1.5,.5,1) both; }
  @keyframes t3punch { 0% { transform:scale(1.5); background:#f4ead3; } 45% { transform:scale(.82); } 100% { transform:scale(1); } }
  .t3-holes i.just u { display:block; position:absolute; inset:0; border-radius:50%; background:#efe3c6; box-shadow:0 1px 1px rgba(0,0,0,.3); animation:t3chad .7s ease-in .12s both; }
  @keyframes t3chad { to { transform:translate(5px, 26px) rotate(160deg) scale(.7); opacity:0; } }
  /* the tick draws itself, the row settles */
  .t3-row.just .t3-ok path { animation:t3tick .45s ease-out .15s both; }
  .t3-row.just .t3-ok circle { animation:t3ring .4s ease-out both; }
  @keyframes t3tick { from { stroke-dashoffset:16; } to { stroke-dashoffset:0; } }
  @keyframes t3ring { from { transform:scale(.4); transform-origin:center; opacity:0; } }
  .t3-row.just .t3-tok, .t3-row.just .t3-t, .t3-row.just .t3-s { transition:none; animation:t3fade .6s ease both; }
  @keyframes t3fade { from { filter:none; opacity:1; color:#f1effa; } }
  /* the next button lights up */
  .t3-row.next .t3-btn { animation:t3glow 1.1s ease .2s both; }
  @keyframes t3glow { 0% { box-shadow:0 0 0 0 rgba(255,203,5,.7); } 100% { box-shadow:0 0 0 12px rgba(255,203,5,0), 0 4px 14px rgba(255,203,5,.25); } }
  /* COMPLETE: the stamp comes down hard, the card takes the hit */
  .t3.landed .t3-stamp { animation:t3stamp .5s cubic-bezier(.2,1.5,.35,1) .1s both; }
  @keyframes t3stamp { 0% { transform:rotate(-14deg) scale(2.6); opacity:0; } 55% { transform:rotate(-4deg) scale(.92); opacity:1; } 100% { transform:rotate(-5deg) scale(1); opacity:.9; } }
  .t3.landed { animation:t3thud .32s ease-out .32s both; }
  @keyframes t3thud { 0% { transform:translateY(0); } 35% { transform:translateY(3px) scale(.995); } 100% { transform:none; } }
  .t3.landed .t3-strip::before { content:""; position:absolute; right:40px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%;
    box-shadow:0 0 0 0 rgba(200,66,58,.45); animation:t3ink .6s ease-out .33s both; pointer-events:none; }
  @keyframes t3ink { to { box-shadow:0 0 0 40px rgba(200,66,58,0); } }
}

.t3-intro { margin:0 0 6px; font-size:12.5px; color:#ffe58a; }
.t3-al { font:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:2px 0; text-align:left; cursor:pointer; }
.t3-al u { color:var(--gold); text-decoration:none; font-weight:800; } .t3-al:hover u { text-decoration:underline; }
.t3-al .wb-cd { color:#f1effa; }
.t3-alw { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.t3-al-x { font:inherit; font-size:11.5px; color:var(--mut); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline dotted; }
.t3-slab-x::before { content:""; width:26px; height:36px; border-radius:2px; box-shadow:0 0 0 2.5px #e9ecf3; background:rgba(255,255,255,.08); }
.t3-btn:focus-visible, .t3-al:focus-visible, .t3-min:focus-visible, .t3-stub:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.t3-stub .t3-holes i { width:10px; height:10px; }
/* Desktop rail (Nov 3 2026): the rail is as tall as the screen, so Recent pulls fills whatever Today leaves.
   Folding Today grows the list; opening it shrinks it back (it keeps its 400px minimum, and the rail scrolls if needed). */
@media (min-width:1120px) { .left-rail { height:calc(100vh - var(--rail-top, 86px) - 14px); } }

/* grading desk token: a tiny slab in the player's grading-service color */
.t3-desk { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; overflow:hidden; background:#e9edf5; border:2px solid var(--gs-col, #7ab4ff); border-radius:7px; }
.t3-desk span { width:100%; text-align:center; font-size:8px; font-weight:900; letter-spacing:.06em; color:#fff; background:var(--gs-col, #7ab4ff); padding:1px 0; }
.t3-desk b { font-family:var(--pixel, monospace); font-size:13px; color:#2a2433; margin-top:3px; }