/* The community pages on top of grd.css: brand line, forum tables, store cards, shoutbox lines, roles. */

/* role colours: admin the accent, moderator blue, premium gold, registered plain. */
.role-admin { color: var(--accent); }
.role-moderator { color: #4aa3ff; }
.role-premium { color: #e8c547; }
/* .fx-sparkle: faint glints inside the name's own box and BEHIND its glyphs (z-index -1 in the name's stacking
   context); not .tx, so neither the #px filter nor snapText touches them. Each pseudo-element holds two marks
   (1px dots, now and then a 3px plus) that twinkle once per short cycle and hop to new spots while invisible, so a
   name shows at most four at a time. The plus is a 3x1 and a 1x3 layer; a mark parked at -9px is off the box.
   Two cycle lengths out of phase keep it from pulsing in step. Off for reduced motion. */
.fx-sparkle { position: relative; isolation: isolate; font-weight: 700; --fx: var(--accent); --fx-hi: var(--accent-hi); }
.fx-sparkle::before, .fx-sparkle::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(var(--fx-hi), var(--fx-hi)), linear-gradient(#fff, #fff), linear-gradient(var(--fx), var(--fx)), linear-gradient(var(--fx), var(--fx));
  background-repeat: no-repeat; background-size: 1px 1px, 1px 1px, 3px 1px, 1px 3px;
  background-position: left 3px top 4px, right 5px top 10px, -9px -9px, -9px -9px;
  animation: fx-twinkle .9s ease-in-out infinite, fx-hop-a 2.7s step-end infinite; will-change: opacity, transform; }
.fx-sparkle::after { background-position: left 9px top 2px, -9px -9px, left 2px top 10px, left 3px top 9px;
  animation: fx-twinkle 1.1s ease-in-out -.45s infinite, fx-hop-b 3.3s step-end -.45s infinite; }
@keyframes fx-twinkle {
  /* the clip moves against the drift, so the marks stay on the name's box */
  0% { opacity: 0; transform: translateY(1px); clip-path: inset(-1px 0 1px 0); }
  45% { opacity: .55; }
  100% { opacity: 0; transform: translateY(-1px); clip-path: inset(1px 0 -1px 0); }
}
@keyframes fx-hop-a {
  0% { background-position: left 3px top 4px, right 5px top 10px, -9px -9px, -9px -9px; }
  33.333% { background-position: left 11px top 12px, -9px -9px, right 6px top 5px, right 7px top 4px; }
  66.667% { background-position: left 7px top 8px, right 2px top 3px, -9px -9px, -9px -9px; }
}
@keyframes fx-hop-b {
  0% { background-position: left 9px top 2px, -9px -9px, left 2px top 10px, left 3px top 9px; }
  33.333% { background-position: left 1px top 7px, right 10px top 4px, -9px -9px, -9px -9px; }
  66.667% { background-position: left 15px top 13px, right 3px top 7px, -9px -9px, -9px -9px; }
}
@media (prefers-reduced-motion: reduce) { .fx-sparkle::before, .fx-sparkle::after { animation: none; opacity: .4; } }
.role-registered { color: var(--text); }

/* login.cpp header(): "elysian" in the title face on a 26px row */
.brand { display: flex; align-items: flex-start; height: 26px; white-space: nowrap; }
.brand .name { margin-top: 6px; font: 11px/14px grd-px11, grd-body, monospace; color: var(--text-hi); }
.brand-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.brand-row > .f-sm { margin-top: 6px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* forum: a grd table whose rows hold two lines (name / description, title / by) */
.ftable .frow { min-height: 38px; padding-top: 3px; padding-bottom: 3px; }
.ftable .frow:focus-visible { outline: 0; box-shadow: inset 2px 0 0 var(--accent); }
.ftable .td { white-space: normal; overflow: hidden; }
.ftable .l1, .ftable .l2 { display: flex; align-items: flex-start; height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftable .l1 { font: 12px/16px grd-body, Consolas, monospace; color: var(--text-hi); }
.ftable .l1.f-sm, .ftable .l2 { font: 11px/16px grd-body-sm, Consolas, monospace; }
.ftable .td.grow .l2 { padding-left: 17px; }
.ftable .l1 > .ic { margin: 2px 5px 0 0; }
.ftable .fname { flex: none; }
.ftable .counts { margin-left: auto; padding-left: 8px; font: 11px/16px grd-body-sm, Consolas, monospace; }

.online-box, .box { padding: 5px 8px 3px; overflow: visible; }
.online-box .tl, .box .tl { margin-bottom: 2px; }
.online-box .tl > .ic, .box .tl > .ic { margin-top: 2px; }

/* the desktop footer (app.js boot): full width so its centred text is snapped by snapText like any other line;
   only the links take the pointer, so the backdrop around them stays the desktop */
.site-foot { position: fixed; left: 0; right: 0; bottom: 4px; height: 12px; text-align: center; pointer-events: none;
  font: 9px/12px grd-px9, grd-body-sm, monospace; color: var(--text-off); }
.site-foot a { pointer-events: auto; }
@media (max-width: 720px), (max-height: 480px) { .site-foot { position: static; order: 99; } }
.site-foot a { color: var(--text-dim); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }

/* store cards: sunk boxes, the price in the title face at 2x */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.card { padding: 8px; background: var(--sunk); box-shadow: inset -1px -1px 0 var(--edge-hi), inset 1px 1px 0 var(--outline); }
.card.stack > * { margin-bottom: 8px; }
.card.stack > :last-child { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card .cname { font: 12px/18px grd-body, Consolas, monospace; color: var(--text-hi); }
.card .tl { min-height: 32px; }
.price { display: flex; align-items: flex-start; height: 28px; }
.price .amount { font: 22px/28px grd-px11, grd-body, monospace; color: var(--text-hi); }
.price .per { margin: 14px 0 0 8px; font: 9px/12px grd-px9, grd-body-sm, monospace; color: var(--text-off); }

/* changelog */
.up.stack > * { margin-bottom: 3px; }
.up.stack > .btn { margin-top: 6px; }
.up-head { font: 12px/16px grd-body, Consolas, monospace; }

/* shoutbox (win_chat): icon, HH:MM in the warn tone, "name: text" wrapping under the name */
.pane.col { display: flex; flex-direction: column; }
.pane.col > .shout-log { flex: 1; min-height: 140px; margin-bottom: 6px; }
.shout-head { font: 11px/16px grd-body-sm, Consolas, monospace; color: var(--text-dim); }
.shout-head .grow { color: var(--text); }
.shout-log { padding: 3px 1px; }
.shout-day { height: 18px; text-align: center; font: 11px/18px grd-body-sm, Consolas, monospace; color: var(--text-off); }
.msg { position: relative; display: flex; align-items: flex-start; min-height: 18px; padding: 0 8px; font: 11px/18px grd-body-sm, Consolas, monospace; color: var(--text); }
.msg > .ic { margin: 3px 5px 0 0; }
.msg .time { flex: none; margin-right: 6px; color: var(--text-hi); }
.msg .body { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg:hover { background: var(--idle); }
.msg.mention { box-shadow: inset 2px 0 0 var(--accent); }
.msg.mention .text { color: var(--warn); }
.msg-x { display: none; right: 2px; top: 2px; }
.msg:hover .msg-x { display: block; }
.msg:hover .body { padding-right: 16px; }

/* admin tables */
.tr.dimmed .td { color: var(--text-off); }
.tr.dimmed .who { opacity: .6; }
.cell-name { display: flex; align-items: flex-start; min-width: 0; overflow: hidden; }
.cell-name > .ic { margin: 3px 5px 0 0; }
.acts { display: flex; gap: 2px; }
.badge.inline { position: static; display: inline-block; flex: none; vertical-align: top; margin: 3px 0 0 6px; color: var(--warn); text-shadow: none; letter-spacing: 0; }
.code { font: 11px/18px grd-body-sm, Consolas, monospace; }
.table.fill .tbody { overflow: visible; }

/* ---- v2 ---- */
/* in-app links: no underline, the accent on hover (role colours keep theirs until then) */
a.lnk { color: inherit; text-decoration: none; }
a.lnk:hover, a.lnk:hover .who { color: var(--accent); }
a.lnk.ext { color: var(--accent); }
a.lnk.ext:hover { color: var(--accent-hi); }
.selectable a { cursor: var(--cur-hand); }
.crumbs a.lnk { color: var(--text); }
.crumbs a.lnk:hover { color: var(--accent); }
/* Back: a flat button at the head of the path line */
.crumbs a.back { flex: none; display: flex; align-items: flex-start; height: 16px; margin-right: 8px; padding: 0 6px 0 2px; color: var(--text-dim);
  box-shadow: inset -1px -1px 0 var(--outline), inset 1px 1px 0 var(--edge-dim); background: var(--idle); }
.crumbs a.back > .ic { margin: 2px 2px 0 0; }
.crumbs a.back:hover { color: var(--text-hi); background: var(--raise); box-shadow: inset -1px -1px 0 var(--outline), inset 1px 1px 0 var(--edge-hi); }
.ic.inl { margin: 2px 3px 0 0; }
.tl .grow > .ic.inl, .stats > .ic.inl { vertical-align: top; }

/* topic and ticket thread: the posts scroll, the composer is docked under them */
.pane.docked { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pane.docked > * { margin-bottom: 0 !important; }
.docked > .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; }
.docked > .scroll > :last-child { margin-bottom: 0 !important; }
.docked > .dock { flex: none; padding: 8px 12px; background: var(--chrome); box-shadow: inset 0 1px 0 var(--outline), inset 0 2px 0 var(--edge-hi); }
.dock .stack > * { margin-bottom: 6px; }
.dock .stack > :last-child { margin-bottom: 0; }
.dock textarea.field { height: 64px; min-height: 64px; resize: none; }
.dock .tl { margin-bottom: 0; }
.topic-title { display: flex; align-items: flex-start; gap: 8px; }
.topic-title > .grow { flex: 1; min-width: 0; padding-top: 4px; }
.topic-title .btn { height: 22px; }

.win-status.stale { cursor: var(--cur-hand); }
.win-status.stale .l { color: var(--warn); }

/* avatars: a fixed 1:1 well, empty when there is none; small images scale up in whole steps */
.avatar { flex: none; padding: 1px; background: var(--well); box-shadow: inset -1px -1px 0 var(--edge-hi), inset 1px 1px 0 var(--outline); margin: 4px 0 6px; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.profile-top { display: flex; align-items: flex-start; gap: 12px; }
.profile-top > .avatar { margin: 0; }
.profile-top > .grow { flex: 1; min-width: 0; margin: 0; }
.av-edit { display: flex; align-items: flex-start; gap: 12px; }
.av-edit > .avatar { margin: 0; }

/* feeds (index side panels, profile posts): a 24 px avatar beside its lines, rows split by a 1px rule. 24 is not a
   whole step of the 32 px default or a 128 px upload, so these few are smoothed rather than dropping pixels. */
.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 8px; align-items: start; }
.widgets > div { min-width: 0; }
.feed-row { position: relative; display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; }
.feed-row + .feed-row, .bar + .feed-list > .feed-row:first-child { box-shadow: inset 0 1px 0 var(--idle); }
.feed-row > .avatar { margin: 0; }
.feed-row > .avatar img { image-rendering: auto; }
.feed-main { flex: 1; min-width: 0; }
.feed-main .one .grow { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.feed-main .one > .c-off { flex: none; margin-left: 6px; }
.feed-body { font: 11px/16px grd-body-sm, Consolas, monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-body .smi { margin-top: 1px; }
.feed-x { display: none; right: 0; top: 4px; }
.feed-row:hover .feed-x { display: block; }
.feed-row:hover .feed-main .one { padding-right: 16px; }

/* pager(): < page X of Y > */
.pager { display: flex; align-items: flex-start; gap: 6px; height: 22px; }
.pager .pg { font: 11px/22px grd-body-sm, Consolas, monospace; color: var(--text-dim); }
.bar { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.bar > .grow { flex: 1; min-width: 0; }
.bar .combo { width: 120px; }

/* topic list markers */
.ftable .l1 .mark { margin: 2px 0 0 6px; }
.ftable .l1.unread .fname { color: var(--text-hi); }
.ftable .l1.read .fname { color: var(--text); }
.ftable .stats { font: 11px/16px grd-body-sm, Consolas, monospace; color: var(--text-dim); }

/* a post: author column left, head / body / signature / actions right */
.post { display: flex; padding: 1px; background: var(--sunk); box-shadow: inset -1px -1px 0 var(--edge-hi), inset 1px 1px 0 var(--outline); }
.post-side { flex: none; width: 132px; padding: 6px 8px; background: var(--panel); box-shadow: inset -1px 0 0 var(--outline); }
.post-side .tl { margin-bottom: 2px; }
.post-side .name { font: 12px/16px grd-body, Consolas, monospace; white-space: nowrap; overflow: hidden; }
.post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-head { display: flex; height: 18px; padding: 0 8px; background: var(--idle); box-shadow: inset -1px -1px 0 var(--outline), inset 1px 1px 0 var(--edge-dim);
  font: 11px/18px grd-body-sm, Consolas, monospace; color: var(--text-dim); white-space: nowrap; }
.post-head .grow { flex: 1; min-width: 0; overflow: hidden; }
.post-body { flex: 1; padding: 6px 8px 8px; font: 12px/16px grd-body, Consolas, monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.post-sig { margin: 0 8px; padding: 4px 0 6px; box-shadow: inset 0 1px 0 var(--idle); font: 11px/16px grd-body-sm, Consolas, monospace; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.post-foot { display: flex; justify-content: flex-end; gap: 2px; padding: 0 6px 6px; }
.post-edit { padding: 6px 8px; }
.post-edit > * { margin-bottom: 6px; }
.post-foot .btn, .bar.sm .btn { height: 18px; padding: 0 8px; font: 11px/18px grd-body-sm, Consolas, monospace; }
.post-foot .btn:not(:disabled):active, .bar.sm .btn:not(:disabled):active { padding: 1px 7px 0 9px; }
.post-foot .btn > .ic, .bar.sm .btn > .ic { margin-top: 3px; }
.post-foot .btn.on, .topic-title .btn.on { color: var(--warn); }

/* markup: [b] in the bright text tone (no faux bold, see .role-admin), [i] in the light accent (the pixel faces have
   no italic), quotes and code on the well */
.mk-b { color: var(--text-hi); }
.mk-i { color: var(--accent-hi); }
.mk-quote { margin: 2px 0 4px; padding: 3px 8px 4px; background: var(--well); box-shadow: inset 2px 0 0 var(--edge-dim), inset -1px -1px 0 var(--edge-dim), inset 1px 1px 0 var(--outline); white-space: pre-wrap; }
.mk-by { display: flex; align-items: flex-start; font: 11px/16px grd-body-sm, Consolas, monospace; color: var(--text-dim); }
.mk-by > .ic { margin: 2px 5px 0 0; }
.mk-code { display: block; margin: 2px 0 4px; padding: 3px 8px; background: var(--well); box-shadow: inset -1px -1px 0 var(--edge-dim), inset 1px 1px 0 var(--outline);
  font: 11px/16px grd-body-sm, Consolas, monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* smilies in running text: 15 px on a 16 px line */
.post-body .smi, .post-sig .smi, .mk-quote .smi, .bio .smi { margin-top: 1px; }
.msg .smi { margin-top: 1px; }
.popup.smi-pick { display: grid; grid-template-columns: repeat(10, 19px); grid-auto-rows: 19px; overflow-y: auto; }
.smi-cell { width: 19px; height: 19px; padding: 2px; border: 0; background: none; }
.smi-cell:hover { background: var(--idle); box-shadow: inset -1px -1px 0 var(--outline), inset 1px 1px 0 var(--edge-dim); }
.popup .opt > .smi { margin: 1px 6px 0 -1px; }
.btn.icon.smi-btn > .smi { margin: 3px 0 0; }
.row .smi-btn { margin-left: 2px; }

/* the license key: selectable, a code face on the well */
.keybox { display: flex; align-items: flex-start; gap: 2px; }
.keybox .key { flex: 1; min-width: 0; height: 22px; padding: 0 6px; background: var(--well); box-shadow: inset -1px -1px 0 var(--edge-hi), inset 1px 1px 0 var(--outline);
  font: 11px/22px grd-body-sm, Consolas, monospace; color: var(--text-hi); white-space: nowrap; overflow: hidden; }

/* kv rows in fixed-width columns (whole pixels at any pane width) */
.kvgrid { display: grid; grid-template-columns: repeat(auto-fill, 268px); column-gap: 16px; }
.kvgrid > .kv { margin-bottom: 2px; }
.kvgrid > .heading { grid-column: 1 / -1; margin: 6px 0; }

/* bar chart (dashboard signups): sunk well, accent bars with a lit top pixel, px8 labels, all integer sizes */
.chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 0 8px; background: var(--sunk);
  box-shadow: inset -1px -1px 0 var(--edge-hi), inset 1px 1px 0 var(--outline); overflow: hidden; }
.chart .col { flex: none; width: 22px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart .n { height: 10px; font: 8px/10px grd-px8, grd-body-sm, monospace; color: var(--text-dim); }
.chart .b { flex: none; background: linear-gradient(var(--accent-hi) 1px, var(--accent) 1px); box-shadow: inset -1px 0 0 var(--outline); }
.chart .b.zero { background: var(--edge-dim); box-shadow: none; }
.chart .d { height: 14px; margin-top: 2px; font: 8px/14px grd-px8, grd-body-sm, monospace; color: var(--text-off); }
.chart .col.today .d { color: var(--accent); }

/* ticket thread lines */
.tmsg { padding: 4px 8px 5px; }
.tmsg + .tmsg { box-shadow: inset 0 1px 0 var(--idle); }
.tmsg.staff { box-shadow: inset 2px 0 0 var(--ok); }
.tmsg + .tmsg.staff { box-shadow: inset 2px 0 0 var(--ok), inset 0 1px 0 var(--idle); }
.tmsg .tl { margin-bottom: 2px; }
.tmsg .body { font: 12px/16px grd-body, Consolas, monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

.bio { font: 12px/16px grd-body, Consolas, monospace; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.temp-pass { display: flex; gap: 6px; }

/* captcha (sign in / register): the picture in a 1 px sunk frame, the refresh button beside it */
.captcha { flex: none; width: 152px; height: 50px; padding: 1px; background: var(--well); box-shadow: inset -1px -1px 0 var(--edge-hi), inset 1px 1px 0 var(--outline); }
.captcha img { display: block; width: 150px; height: 48px; image-rendering: pixelated; }
.row > .ctrl.cap { min-width: 180px; }