/* Recent-activity toast (see activity-toast.js). Uses the page's colour tokens, so it follows light / dark and the
   marquee look. Bottom-right on wide screens; on phones a full-width strip at the bottom. */
.atoast{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;width:350px;max-width:calc(100vw - 32px);
  background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18);
  font:13px/1.35 var(--sans);opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease}
.atoast.in{opacity:1;transform:none}
.atoast.swap > *:not(.at-x){opacity:0;transition:opacity .18s ease}
.atoast[hidden]{display:none}
html.atoast-on body{padding-bottom:104px}   /* the end of the page can always scroll clear of it */
.atoast button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
.atoast img,.atoast .at-noimg{width:40px;height:52px;object-fit:cover;border-radius:4px;background:var(--line);flex:none;display:block}
.at-x{position:absolute;top:2px;right:2px;width:32px;height:32px;border-radius:6px!important;font-size:20px!important;line-height:1;color:var(--muted)!important;text-align:center!important}
.at-x:hover{color:var(--fg)!important;background:var(--raised)!important}
.at-main{display:flex;gap:10px;align-items:center;width:100%;padding:10px 40px 4px 10px;border-radius:10px 10px 0 0}
.at-main:hover .at-t{text-decoration:underline}
.at-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.at-tl{display:flex;align-items:baseline;gap:6px;min-width:0}
.at-t{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-width:0}
.at-what{color:var(--fg)}
.at-what b{font-family:var(--mono)}
.at-scw{white-space:nowrap}
.at-kick{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--kc,var(--c-shelf))}
.at-sc{white-space:nowrap;font:600 11px var(--mono);padding:0 4px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.at-sys{display:flex;flex-direction:column;gap:2px;padding:10px 40px 4px 12px}
.at-sys + .at-foot{padding-left:12px}
.at-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 10px 9px 60px;font-size:12px;color:var(--muted)}
.at-all{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap;padding:4px 0}
.at-all:hover{text-decoration:underline}
/* platform chip: the same console-family colours as the map's chips (map-emit.js) */
.atoast{--pf-text:#fff;--pf-ps5:#0047bb;--pf-ps4:#2d5ea6;--pf-pso:#5b6b86;--pf-xsx:#0b7a0b;--pf-xb1:#3a7239;--pf-xo:#5b6e5a;--pf-ns2:#d0021b;--pf-ns:#b8323e;--pf-no:#8a5a5e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .atoast{--pf-text:#111;--pf-ps5:#5b95ff;--pf-ps4:#86a8dd;--pf-pso:#9ca7ba;--pf-xsx:#3fd33a;--pf-xb1:#86c283;--pf-xo:#a2b3a1;--pf-ns2:#ff5a68;--pf-ns:#ef8a92;--pf-no:#c8a5a8}}
:root[data-theme="dark"] .atoast,[data-scheme="marquee"] .atoast{--pf-text:#111;--pf-ps5:#5b95ff;--pf-ps4:#86a8dd;--pf-pso:#9ca7ba;--pf-xsx:#3fd33a;--pf-xb1:#86c283;--pf-xo:#a2b3a1;--pf-ns2:#ff5a68;--pf-ns:#ef8a92;--pf-no:#c8a5a8}
.at-pf{flex:none;padding:0 4px;border:1px solid var(--pc,var(--line));border-radius:3px;background:var(--pc,var(--surface));color:var(--pt,var(--fg));
  font:700 10px/14px system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;align-self:center}
.at-pf[data-pf]:not([data-pf=""]){--pt:var(--pf-text)}
.at-pf[data-pf="ps5"]{--pc:var(--pf-ps5)}.at-pf[data-pf="ps4"]{--pc:var(--pf-ps4)}.at-pf[data-pf="pso"]{--pc:var(--pf-pso)}
.at-pf[data-pf="xsx"]{--pc:var(--pf-xsx)}.at-pf[data-pf="xb1"]{--pc:var(--pf-xb1)}.at-pf[data-pf="xo"]{--pc:var(--pf-xo)}
.at-pf[data-pf="ns2"]{--pc:var(--pf-ns2)}.at-pf[data-pf="ns"]{--pc:var(--pf-ns)}.at-pf[data-pf="no"]{--pc:var(--pf-no)}
@media (max-width:599px){
  .atoast{left:12px;right:12px;width:auto;max-width:none;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .at-main{padding:8px 40px 2px 8px}
  .atoast img,.atoast .at-noimg{width:34px;height:44px}
  .at-foot{padding:0 10px 7px 52px}
  .at-t{-webkit-line-clamp:1}
}
@media (max-height:440px){   /* landscape phone: one line of title */
  .at-t{-webkit-line-clamp:1}
  .atoast img,.atoast .at-noimg{width:30px;height:38px}
  html.atoast-on body{padding-bottom:80px}
}
/* compact: one line, for short screens where the full card would reach the sticky filters and replay clock */
.at-ctime{display:none;color:var(--muted)}
.atoast.compact{width:min(640px,calc(100vw - 32px))}
.atoast.compact .at-main,.atoast.compact .at-sys{padding:6px 40px 6px 10px;border-radius:10px}
.atoast.compact .at-txt,.atoast.compact .at-sys{flex-direction:row;gap:6px;align-items:baseline;white-space:nowrap;overflow:hidden}
.atoast.compact .at-tl{flex:0 1 auto;min-width:6em}
.atoast.compact .at-t{display:block;-webkit-line-clamp:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atoast.compact .at-what{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.atoast.compact .at-ctime{display:inline;flex:none}
.atoast.compact .at-ctime::before{content:"· "}
.atoast.compact .at-foot,.atoast.compact .at-scw,.atoast.compact img,.atoast.compact .at-noimg{display:none}
.atoast.compact .at-x{top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.atoast,.atoast.swap > *{transition:none!important;transform:none}}
/* marquee look */
[data-scheme="marquee"] .atoast{background:#000;border-color:var(--accent);box-shadow:0 0 0 1px #000,0 0 18px #ffb30044}
[data-scheme="marquee"] .at-t{font-family:var(--title);font-weight:400;font-size:18px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05;color:var(--accent)}
[data-scheme="marquee"] .at-pf{font:400 12px/14px var(--title);letter-spacing:.06em}
.at-links{display:flex;gap:12px;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto}
.at-foot:has(.at-links){padding-left:12px}
.at-map{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap;padding:4px 0}
.at-map:hover{text-decoration:underline}
