/* augh yahh! -- the Profile tab's front, screens, bag, and the Home members
   grid (round five, 2026-08-18 night). Loaded on profile and home. */

.small-mark { font-size: 1.3rem; margin-bottom: .2rem; }
.pscreen { width: 100%; display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }
.back { align-self: flex-start; font-family: var(--sans); font-size: .8rem; letter-spacing: .06em; color: var(--cyan); text-decoration: none; padding: .2rem 0; }
.back .p-count { margin-left: .4rem; }

/* top card */
/* Round twelve (2026-08-20): the top card is centred, the way Martin's
   reference picture has it, instead of a photo on the left with the name
   beside it. */
.topcard {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1rem 1.1rem; background: #1C1C20;
  position: relative; text-align: center;
}
.topcard .p-face { margin: 0 0 .7rem; width: 6.4rem; height: 6.4rem; display: flex; align-items: center; justify-content: center; }
.topcard .badge.lg { width: 5.8rem; height: 5.8rem; font-size: 2.3rem; }
/* The frame is drawn a touch bigger than its slot so the ring sits around the
   picture and never over it. */
.topcard .badge.lg.framed { width: 7.6rem; height: 7.6rem; margin: -.6rem; }
.topcard .badge.lg.framed .face { font-size: 1.7rem; }
.topcard .badge.lg .bsparkle { font-size: 1.2rem; right: 6%; top: 4%; }
.topcard .profile-name { font-size: 1.5rem; text-shadow: none; }
.tc-at { margin: .05rem 0 0; font-size: .85rem; color: var(--text-2); }
/* Martin's call 2026-08-21: the id right below the username. Quiet, because it
   is a reference number and not the thing the card is for, but the same size
   as the handle above it so the two read as one block. */
.tc-id { margin: .15rem 0 0; font-size: .78rem; color: var(--text-3); letter-spacing: .01em; }
.tc-line { margin: .4rem 0 0; font-size: .88rem; color: var(--text-2); overflow-wrap: anywhere; max-width: 22rem; }

/* the three numbers */
.tc-stats { display: flex; align-items: stretch; gap: 0; margin: 1rem 0 .9rem; }
.tc-stats a {
  padding: 0 1.15rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
}
.tc-stats a + a { border-left: 1px solid var(--line); }
.tc-stats b { font-family: var(--round); font-weight: 800; font-size: 1.35rem; line-height: 1.1; color: #FFFFFF; }
.tc-stats small { font-size: .72rem; color: var(--text-2); }

/* one full-width Edit profile, the picture's shape */
.topcard .tc-edit { max-width: 15rem; }
.tc-since { margin: .8rem 0 0; font-size: .7rem; color: var(--text-3); }

/* the two tiles */
.tiles2 { display: flex; gap: .55rem; }
.tile2 { flex: 1; border-radius: var(--r); padding: .8rem .85rem; display: flex; flex-direction: column; gap: .15rem; text-decoration: none; min-width: 0; }
.tile2 small { font-family: var(--sans); font-size: .56rem; letter-spacing: .01em; }
.tile2 b { font-family: var(--round); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.tile2 span { font-family: var(--sans); font-size: .62rem; opacity: .85; }
.tile2.gold { background: linear-gradient(135deg, rgba(255,215,0,.28), rgba(255,154,60,.16)); border: 1px solid rgba(255,215,0,.45); color: #FFD700; box-shadow: 0 0 22px -10px rgba(255,215,0,.7); }
.tile2.violet { background: linear-gradient(135deg, rgba(138,43,226,.32), rgba(91,141,239,.16)); border: 1px solid rgba(138,43,226,.5); color: #FFFFFF; box-shadow: 0 0 22px -10px rgba(138,43,226,.7); }
.tile2 .bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: .3rem 0 .15rem; }
.tile2 .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-mid), var(--brand-2)); transition: width .5s ease; }

/* the Dragon Tiger line (round eight): one gold line, the whole thing a link */
.dtline { display: flex; justify-content: space-between; align-items: center; gap: .6rem; border: 1px solid rgba(255,211,107,.4); border-radius: var(--r); padding: .55rem .7rem; background: rgba(255,215,0,.05); font-family: var(--sans); font-size: .68rem; letter-spacing: .03em; color: #FFD700; text-decoration: none; min-height: 2.75rem; text-shadow: 0 0 8px rgba(255,215,0,.35); }
.dtline span { white-space: nowrap; }
.dtline .dt-left { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dtline .dt-left small { font-size: .62rem; color: var(--text-2); letter-spacing: .02em; text-shadow: none; }
.dtline > span:last-child { flex: 0 0 auto; color: var(--gold); }

/* the icon row: five across (Bag, Shop, Top 10, Points, Tasks), never wrapping */
/* six since 2026-08-19: Friends joined the row */
/* Six across for everybody. The boss has a seventh (People, round eleven) and
   it was landing alone on a second row, which looks unfinished; for him the
   row becomes four and four instead (tester, 2026-08-20). */
.icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.icons.boss { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icons a { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .1rem .55rem; text-align: center; font-family: var(--sans); font-size: .58rem; letter-spacing: .04em; color: var(--text-2); background: #151518; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icons a i { display: block; font-style: normal; font-size: 1.5rem; margin-bottom: .25rem; }

/* the shop strip */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--round); font-size: .62rem; letter-spacing: .01em; color: var(--text-3); }
.strip-head a { color: var(--cyan); text-decoration: none; letter-spacing: .06em; text-transform: none; }
.strip { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .2rem; }
.strip .item { flex: 0 0 31%; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .3rem; text-align: center; background: #151518; text-decoration: none; font-weight: 700; font-size: 1rem; color: var(--text); }
.strip .item small { display: block; font-family: var(--sans); font-size: .56rem; color: var(--text-3); font-weight: 400; margin-top: .3rem; letter-spacing: .04em; }

/* the bag */
.k2 { margin: .2rem 0 0; font-family: var(--round); font-size: .62rem; letter-spacing: .01em; color: var(--text-3); text-align: left; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.grid3 > * { min-width: 0; }
.own { border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .25rem .5rem; text-align: center; font: inherit; font-size: .74rem; color: var(--text); background: #151518; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer; }
.own small { font-family: var(--sans); font-size: .56rem; color: var(--text-3); letter-spacing: .04em; }
.own.on { border-color: rgba(46,204,113,.6); box-shadow: 0 0 12px -4px rgba(46,204,113,.7); }
.own.on small { color: var(--green); }
.own.dim { opacity: .5; }
.own .badge.md.framed { margin: -.4rem 0; }

/* edit */
.ecard { border: 1px solid var(--line); border-radius: var(--r); padding: .8rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; background: #1C1C20; }
.p-face-sm { display: flex; justify-content: center; }
.pscreen .p-more, .pscreen .btn, .pscreen .p-photo-row, .pscreen .p-about { width: 100%; }
.pscreen .p-about .btn { width: auto; flex: 0 0 auto; }
.pscreen .p-about .field { flex: 1 1 auto; min-width: 0; }

/* Home: the members grid */
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; width: 100%; min-width: 0; }
.mgrid > * { min-width: 0; }
@media (min-width: 700px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mcard { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; position: relative; border: 1px solid var(--g, var(--line)); background: #151518; box-shadow: 0 0 16px -6px var(--g, transparent); cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; }
.mcard .mph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 3rem; color: #000000; }
.mcard .mph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard .mfx { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -52%); pointer-events: none; }
.mcard .mfx .mfr { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px var(--g, transparent)); }
.mcard .mfx .mface { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); width: calc(100% * var(--hole, .55)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 2.2rem; color: #000000; }
.mcard .mfx .mface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard .mfoot { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .55rem .5rem; background: linear-gradient(transparent, rgba(0,0,0,.92)); display: flex; align-items: center; gap: .3rem; font-size: .92rem; font-weight: 700; color: #FFFFFF; }
.mcard .mfoot .mn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.home-line { font-size: .78rem; color: var(--text-3); text-align: center; margin: 0; }

/* the tiles wait for the real numbers, so nobody sees 0 / Lv.1 for a beat */
.tiles2.waiting, .dtline.waiting { visibility: hidden; }

/* The Profile page starts at the top, not centred halfway down (Martin's
   phone 2026-08-18: "the profile tab is only half the page"; the centring
   was for the log-in box alone). */
main.login-stage { justify-content: flex-start; padding-top: .6rem; }
main.login-stage .card { margin-top: 0; }

/* How points work: cards, not a table (Martin's phone 2026-08-18: "messy") */
.rules2 { display: flex; flex-direction: column; gap: .45rem; }
.rule { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .75rem; background: #151518; text-align: left; }
.rule > i { flex: 0 0 auto; font-style: normal; font-size: 1.3rem; width: 2rem; text-align: center; }
.rule > i.lv { width: auto; font-size: .56rem; }
.rule > img { flex: 0 0 auto; width: 2rem; height: 2rem; }
.rule > div { flex: 1; min-width: 0; }
.rule b { display: block; font-size: .92rem; font-weight: 600; color: var(--text); }
.rule small { display: block; font-family: var(--sans); font-size: .58rem; letter-spacing: .04em; color: var(--text-3); margin-top: .1rem; }
.rule > span { flex: 0 0 auto; font-family: var(--sans); font-size: 1.05rem; font-weight: 800; color: var(--lime); text-shadow: 0 0 8px rgba(198,255,61,.5); text-align: right; }
.rule > span em { display: block; font-style: normal; font-size: .5rem; font-weight: 400; letter-spacing: .01em; color: var(--text-3); text-shadow: none; }
.rule.lvl > span { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,.5); }
.k2.soft { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .78rem; color: var(--text-3); text-align: center; }

/* the online dot, top right of a member card: green online, grey not */
.mcard .mdot { position: absolute; right: .5rem; top: .5rem; width: .8rem; height: .8rem; border-radius: 50%; background: #75757D; border: 2px solid rgba(0,0,0,.85); z-index: 3; }
.mcard .mdot.on { background: #2ECC71; box-shadow: 0 0 8px #2ECC71; }

/* ---- round eight (2026-08-19) ---- */
/* Top 10: Today next to This week, a cyan segmented control (mockup 8) */
.seg { display: flex; border: 1px solid rgba(240,41,108,.45); border-radius: 999px; overflow: hidden; width: 100%; }
.seg-b { flex: 1; min-height: 2.6rem; font: inherit; font-family: var(--round); font-size: .66rem; letter-spacing: .01em; color: var(--text-3); background: none; border: 0; cursor: pointer; padding: .6rem 0; }
.seg-b.on { color: var(--brand); background: rgba(240,41,108,.15); text-shadow: 0 0 10px rgba(240,41,108,.5); }
.seg-note { margin: -.25rem 0 0; font-family: var(--sans); font-size: .6rem; letter-spacing: .06em; color: var(--text-3); text-align: left; }

/* Sign up: the 18+ tick (mockup 7). Amber border on the box; the whole label
   is the tap target, 44 px tall. */
.tick { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .3rem .1rem; font-size: .86rem; color: var(--text-2); text-align: left; cursor: pointer; line-height: 1.35; }
.tick input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: 0; border: 1px solid rgba(255,154,60,.75); border-radius: var(--r-sm); background: rgba(255,154,60,.06); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tick input:checked { background: rgba(255,154,60,.22); box-shadow: 0 0 10px -2px rgba(255,154,60,.7); }
.tick input:checked::after { content: '\2713'; color: var(--amber); font-size: .95rem; font-weight: 700; line-height: 1; }
.tick a { color: var(--violet); text-decoration: none; border-bottom: 1px solid rgba(138,43,226,.45); }

/* Delete my account: irreversible, so amber like the boss buttons and the
   log out (house style). Still asks once. */
.p-more.gone { border-color: rgba(255,154,60,.45); }
.p-more.gone summary { color: var(--amber); }
.btn.gone { border-color: rgba(255,154,60,.55); color: var(--amber); background: rgba(255,154,60,.06); box-shadow: 0 0 16px -6px rgba(255,154,60,.6); text-shadow: 0 0 10px rgba(255,154,60,.5); }

/* ============ round eight build B (2026-08-19): friends, messages, tasks, the invite code ============ */

/* The back line's grey tail ("· today · new at 4 in the morning", "· Dre · online"):
   one line, never wrapped; a long name shortens with dots. */
.back { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back .back-sub { font-size: .64rem; letter-spacing: .03em; color: var(--text-3); }
.back .back-sub .dm-nick { display: inline-block; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--text-2); }

/* Friends (mockup 10): a row per person, the badge, the name in their look and
   the LVL tag, a grey line under it; on the right the online dot, the pink
   unread bubble and the button. The same row draws a request (Accept / Not
   now) and, on Tasks, who joined with your code. */
.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fr-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .1rem; border-bottom: 1px solid var(--line); min-height: 3rem; text-align: left; }
.fr-list li:last-child { border-bottom: 0; }
.fr-list .fr-b { flex: 0 0 2.6rem; width: 2.6rem; display: flex; align-items: center; justify-content: center; }
.fr-list .fr-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.fr-list .fr-nm { display: flex; align-items: center; gap: 0; min-width: 0; font-weight: 700; font-size: .95rem; color: var(--text); }
.fr-list .fr-nm .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-list .fr-nm .lv { flex: 0 0 auto; margin-left: .3rem; }
.fr-list .fr-sub { font-family: var(--sans); font-size: .6rem; letter-spacing: .03em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-list .fr-r { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; }
.fr-list .fr-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #2A2A30; flex: 0 0 auto; }
.fr-list .fr-dot.on { background: var(--green); box-shadow: 0 0 8px rgba(46,204,113,.9); }
.fr-list .fr-un { background: var(--brand); color: #FFFFFF; font-family: var(--sans); font-size: .62rem; font-weight: 800; border-radius: 999px; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 10px -2px rgba(240,41,108,.9); }
/* the small buttons on a row: Message and Accept green, Not now grey; 44 px tall */
.sb { font: inherit; font-family: var(--round); font-size: .62rem; letter-spacing: .08em; color: var(--green); background: rgba(46,204,113,.05); border: 1px solid rgba(46,204,113,.5); border-radius: var(--r); min-height: 2.6rem; padding: .4rem .6rem; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.sb:active { transform: translateY(1px); }
.sb:disabled { opacity: .5; cursor: default; }
.sb.g { color: var(--text-3); border-color: var(--line); background: none; }
/* the empty state (mockup 10): the box says what to do first */
.emptyb { border: 1px dashed rgba(198,255,61,.45); border-radius: var(--r); padding: .9rem .8rem; background: rgba(198,255,61,.04); font-size: .88rem; line-height: 1.45; color: var(--text-2); text-align: center; }
.emptyb b { display: block; font-family: var(--sans); font-size: .66rem; letter-spacing: .01em; color: var(--lime); text-shadow: 0 0 10px rgba(198,255,61,.5); margin-bottom: .3rem; }

/* Tasks (mockup 12): four rows with a bar and "n of goal"; done rows green;
   the Invite row lime. The coins on the right are gold, like every coin. */
.tasks { display: flex; flex-direction: column; gap: .45rem; }
.task { border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .75rem .55rem; background: #151518; display: flex; flex-direction: column; gap: .3rem; text-align: left; }
.task .t { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.task .t span { font-size: .92rem; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task .t b { flex: 0 0 auto; font-family: var(--sans); font-size: .8rem; font-weight: 800; color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,.5); white-space: nowrap; }
.task .bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.task .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; }
.task small { font-family: var(--sans); font-size: .6rem; letter-spacing: .03em; color: var(--text-3); line-height: 1.4; }
.task.done { border-color: rgba(46,204,113,.5); box-shadow: 0 0 14px -6px rgba(46,204,113,.5); }
.task.done .bar i { background: var(--green); }
.task.done small, .task.done .t b { color: var(--green); text-shadow: 0 0 8px rgba(46,204,113,.5); }
.task.inv { border-color: rgba(198,255,61,.5); box-shadow: 0 0 14px -6px rgba(198,255,61,.5); }
.task.inv.done { border-color: rgba(46,204,113,.5); box-shadow: 0 0 14px -6px rgba(46,204,113,.5); }
/* the code, big, and the link under it */
.code { border: 1px dashed rgba(198,255,61,.6); border-radius: var(--r); padding: .7rem .6rem .6rem; text-align: center; font-family: var(--sans); display: flex; flex-direction: column; gap: .15rem; background: rgba(198,255,61,.04); min-width: 0; }
.code .h { font-size: .58rem; letter-spacing: .01em; color: var(--text-3); }
.code b { font-size: 1.9rem; font-weight: 800; letter-spacing: .01em; color: var(--lime); text-shadow: 0 0 14px rgba(198,255,61,.6); line-height: 1.2; padding-left: .2em; }
.code small { font-size: .66rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* two buttons side by side, 44 px tall: Share the link (lime), Copy the code (cyan) */
.btns2 { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.btn2 { font: inherit; font-family: var(--round); font-size: .68rem; letter-spacing: .08em; font-weight: 700; color: var(--brand); background: rgba(240,41,108,.05); border: 1px solid rgba(240,41,108,.5); border-radius: var(--r); min-height: 2.75rem; padding: .5rem .3rem; cursor: pointer; white-space: nowrap; text-shadow: 0 0 8px rgba(240,41,108,.4); }
.btn2:active { transform: translateY(1px); }
.btn2:disabled { opacity: .5; cursor: default; }
.btn2.lime { color: var(--lime); border-color: rgba(198,255,61,.55); background: rgba(198,255,61,.05); text-shadow: 0 0 8px rgba(198,255,61,.45); }
.btn2.done { color: var(--green); border-color: rgba(46,204,113,.55); background: rgba(46,204,113,.06); text-shadow: 0 0 8px rgba(46,204,113,.5); }
/* the toast sits over the message screen (z 25) and the report box (z 40) */
#toast { z-index: 50; }
/* the brand pink dot on the TASKS icon while any of the four is not done */
.icons a { position: relative; }
.icons a .idot { position: absolute; right: .45rem; top: .45rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px rgba(240,41,108,.9); }

/* Sign up (mockup 7): the optional invite code box under the secret answer,
   its tag at the right end, and the line under it: "Invited by <nick>" in
   lime, "That code does not exist" in grey (sign up still allowed). */
.inv-row { position: relative; width: 100%; }
.inv-row .field { padding-right: 9.5rem; letter-spacing: .01em; }
.inv-row .inv-opt { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: .58rem; letter-spacing: .06em; color: var(--text-3); pointer-events: none; white-space: nowrap; }
.inv-note { margin: -.2rem 0 0; font-family: var(--sans); font-size: .66rem; letter-spacing: .04em; color: var(--text-3); text-align: left; }
.inv-note.ok { color: var(--lime); text-shadow: 0 0 8px rgba(198,255,61,.5); }
.inv-row.ok .field { border-color: rgba(198,255,61,.5); }

/* The message screen (mockup 11): pinned to the screen like the Chat page,
   the tab bar under it, the lines in the middle and the send box at the
   bottom. The pills are the chat's (lobby.css .lines .line). With the phone's
   keyboard up (profile.js sets html.kb and the two measures, as fixed.js does
   on Chat) it fits the visible part exactly and the tab bar steps aside. */
.dm { position: fixed; left: 0; right: 0; top: 0; bottom: calc(3.1rem + env(safe-area-inset-bottom)); z-index: 25; display: flex; flex-direction: column; gap: .5rem; padding: .7rem .7rem .4rem; background: var(--void); max-width: 42rem; margin: 0 auto; }
html.kb .dm { top: var(--vvt, 0px); height: var(--vvh, 100dvh); bottom: auto; }
.dm .dm-top { flex: 0 0 auto; display: flex; align-items: center; min-height: 2.2rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.dm .back { padding: .3rem 0; }
.dm .lines { flex: 1 1 auto; min-height: 0; }
.dm .say { flex: 0 0 auto; }
.dm .lines .line.note-line.dm-first { color: var(--text-3); }
.dm .lines .line.note-line.dm-off { color: var(--text-2); font-family: var(--sans); font-size: .9rem; letter-spacing: 0; text-transform: none; padding: .6rem 0; }
/* refused (not friends, hidden, not logged in): the one line sits at the top, not the bottom */
.dm .lines.off > li:first-child { margin-top: 0; }

/* ---- round nine: the logo on the logged-out door ---- */
.door-logo {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
  margin: .1rem auto .35rem;
  /* The picture carries its own see-through ground (tools/make-logo.py), so
     it sits on the card with no black box round it. Blending was tried first
     and did nothing: the card's blur puts it in a group of its own. */
}
/* the text mark above the card would say the name a second time */
.card:has(#p-out-forms:not(.hidden)) .small-mark { display: none; }

/* Log out on the Profile front (Martin's ask, 2026-08-19). It used to sit on
   the Edit screen under six folded sections and he could not find it. Bottom
   of the front, full width, thumb sized, and clear of the shop strip. */
.p-logout { margin-top: 1.6rem; min-height: 44px; }

/* Round twelve (2026-08-20): .hrow, .chip2 and .chip-badge are gone. Home's
   top row of four chips became the feed's bar, so nothing in the markup used
   them any more. Round nine left two dead .danger rules behind and a whole
   plan was written off them; this is the same mistake, caught this time by
   grepping the markup for every class before saying the round was done.
   The Friends count lives on as .fdot in the feed's bar. */

/* ==========================================================================
   Round twelve (2026-08-20): Home as a feed.
   The old top row (the mark and four chips) is gone. In its place a bar, two
   tabs, the mark as a sign on the door, then Live now and the members.
   Martin's spec and reference pictures:
   businesses/chat-app/sources/look spec 2026-08-20.md
   ========================================================================== */

/* ---- the bar ---- */
.feedbar { display: flex; align-items: center; gap: .5rem; width: 100%; }

/* The LIVE pill. Solid brand pink and pulsing while somebody is up; flat and
   grey while nobody is, so the pill is never a lie. 44px tall for a thumb. */
.livepill {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2.2rem; padding: .4rem .8rem;
  border-radius: 999px; text-decoration: none;
  background: var(--brand); color: #FFFFFF;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  box-shadow: 0 0 18px -4px var(--brand);
}
.livepill .lp-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #FFFFFF; }
.livepill:not(.off) .lp-dot { animation: lp-beat 1.4s ease-in-out infinite; }
.livepill.off { background: #1C1C20; color: var(--text-2); box-shadow: none; }
.livepill.off .lp-dot { background: var(--text-3); }
@keyframes lp-beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .livepill .lp-dot { animation: none; } }

.feedicons { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
@media (min-width: 700px) {
  .lcard { width: 9rem; }
}

/* Round twelve (2026-08-20): the icon row is drawn line icons, the same kind
   the feed, the tray and the slot machine use. It was eight emoji, which look
   like a different app and are a different shape on every phone. */
.icons a i {
  display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; font-style: normal;
}
.icons a i svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.icons a { color: var(--text); }
.icons a span, .icons a { }

/* Round seventeen: a Top 10 row opens the person's card on a tap. */
#p-board li.who-tap { cursor: pointer; }

/* Report by id (2026-08-21). The found person, drawn before anything happens.
   Same badge and name treatment as a chat line, so it is recognisably the
   same person you would have held down. */
.bi-found {
  margin: .6rem 0 0;
  display: grid;
  gap: .55rem;
  /* The same red-edged surface the chat's report box has (.report in
     lobby.css). Without it the two report buttons read as loose text: the
     app's .btn.report-go sets a border COLOUR on a border that was never
     switched on, so they have no outline of their own anywhere. */
  border: 1px solid rgba(225,45,45,.45);
  border-radius: var(--r);
  background: var(--panel-2);
  box-shadow: 0 0 22px -6px rgba(225,45,45,.5);
  padding: .9rem;
}
.bi-who { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bi-name { font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; }
.bi-id { font-size: .78rem; color: var(--text-3); }