/* 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(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--cyan); text-decoration: none; padding: .2rem 0; }
.back .p-count { margin-left: .4rem; }

/* top card */
.topcard { display: flex; align-items: center; gap: 1.35rem; border: 1px solid var(--line); border-radius: 12px; padding: 1rem .9rem; background: #0D1420; position: relative; text-align: left; }
.topcard .p-face { margin: 0; flex: 0 0 5.2rem; width: 5.2rem; height: 5.2rem; display: flex; align-items: center; justify-content: center; }
.topcard .badge.lg { width: 4.6rem; height: 4.6rem; font-size: 1.9rem; }
/* The frame is drawn a touch bigger than its slot so the ring sits around the
   picture, but it stays inside the card (round eight, A11: it used to spill
   past the card's edge). The slot is 5.2rem, the frame 6.4rem, so it reaches
   .6rem into the card's 1rem of top and bottom padding and .6rem into the
   .9rem at the left: never past the border, for every frame, King included. */
.topcard .badge.lg.framed { width: 6.4rem; height: 6.4rem; margin: -.6rem; }
.topcard .badge.lg.framed .face { font-size: 1.4rem; }
.topcard .badge.lg .bsparkle { font-size: 1.1rem; right: 6%; top: 4%; }
.tc-r { min-width: 0; flex: 1; position: relative; z-index: 4; }
.topcard .profile-name { font-size: 1.35rem; text-shadow: none; }
.tc-line { margin: .15rem 0 0; font-size: .85rem; color: var(--text-2); overflow-wrap: anywhere; }
.tc-since { margin: .3rem 0 0; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--text-3); }
.tc-edit { position: absolute; right: .8rem; top: .7rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); border: 1px solid rgba(248,8,120,.5); border-radius: 6px; padding: .25rem .55rem; text-decoration: none; }

/* the two tiles */
.tiles2 { display: flex; gap: .55rem; }
.tile2 { flex: 1; border-radius: 12px; padding: .8rem .85rem; display: flex; flex-direction: column; gap: .15rem; text-decoration: none; min-width: 0; }
.tile2 small { font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; }
.tile2 b { font-family: var(--mono); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.tile2 span { font-family: var(--mono); font-size: .62rem; opacity: .85; }
.tile2.gold { background: linear-gradient(135deg, rgba(255,228,92,.28), rgba(255,154,60,.16)); border: 1px solid rgba(255,228,92,.45); color: #FFE45C; box-shadow: 0 0 22px -10px rgba(255,228,92,.7); }
.tile2.violet { background: linear-gradient(135deg, rgba(157,107,255,.32), rgba(91,141,239,.16)); border: 1px solid rgba(157,107,255,.5); color: #E4D9FF; box-shadow: 0 0 22px -10px rgba(157,107,255,.7); }
.tile2 .bar { height: 5px; border-radius: 99px; 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: 10px; padding: .55rem .7rem; background: rgba(255,228,92,.05); font-family: var(--mono); font-size: .68rem; letter-spacing: .03em; color: #FFE45C; text-decoration: none; min-height: 2.75rem; text-shadow: 0 0 8px rgba(255,228,92,.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: #FFE9A8; letter-spacing: .02em; text-shadow: none; }
.dtline > span:last-child { flex: 0 0 auto; color: #FFE9A8; }

/* the icon row: five across (Bag, Shop, Top 10, Points, Tasks), never wrapping */
/* six since 2026-08-19: Friends joined the row */
.icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.icons a { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .1rem .55rem; text-align: center; font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); background: #0A0F17; 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(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; 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: 10px; padding: .8rem .3rem; text-align: center; background: #0A0F17; text-decoration: none; font-weight: 700; font-size: 1rem; color: var(--text); }
.strip .item small { display: block; font-family: var(--mono); 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(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; 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: 10px; padding: .6rem .25rem .5rem; text-align: center; font: inherit; font-size: .74rem; color: var(--text); background: #0A0F17; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer; }
.own small { font-family: var(--mono); font-size: .56rem; color: var(--text-3); letter-spacing: .04em; }
.own.on { border-color: rgba(59,255,158,.6); box-shadow: 0 0 12px -4px rgba(59,255,158,.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: 12px; padding: .8rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; background: #0D1420; }
.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 */
.hrow { display: flex; align-items: center; gap: .4rem; width: 100%; min-width: 0; }
.hrow .mark { min-width: 0; overflow: hidden; }
.hrow .mark { margin: 0 auto 0 0; font-size: 1.4rem; }
.chip2 { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: .32rem .7rem; border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.chip2.lime { color: var(--lime); border-color: rgba(198,255,61,.5); text-shadow: 0 0 8px rgba(198,255,61,.5); }
.chip2.pink { color: var(--brand); border-color: rgba(248,8,120,.55); text-shadow: 0 0 8px rgba(248,8,120,.5); }
.chip2.vio { color: var(--violet); border-color: rgba(157,107,255,.5); text-shadow: 0 0 8px rgba(157,107,255,.5); }
.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: 12px; overflow: hidden; position: relative; border: 1px solid var(--g, var(--line)); background: #0A0F17; 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: #05070C; }
.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: #05070C; }
.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(5,7,12,.92)); display: flex; align-items: center; gap: .3rem; font-size: .92rem; font-weight: 700; color: #F2FAFF; }
.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: 10px; padding: .6rem .75rem; background: #0A0F17; 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(--mono); font-size: .58rem; letter-spacing: .04em; color: var(--text-3); margin-top: .1rem; }
.rule > span { flex: 0 0 auto; font-family: var(--mono); 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: .12em; text-transform: uppercase; color: var(--text-3); text-shadow: none; }
.rule.lvl > span { color: #FFE45C; text-shadow: 0 0 8px rgba(255,228,92,.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: #5A6B82; border: 2px solid rgba(5,7,12,.85); z-index: 3; }
.mcard .mdot.on { background: #3BFF9E; box-shadow: 0 0 8px #3BFF9E; }

/* ---- 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(248,8,120,.45); border-radius: 999px; overflow: hidden; width: 100%; }
.seg-b { flex: 1; min-height: 2.6rem; font: inherit; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: none; border: 0; cursor: pointer; padding: .6rem 0; }
.seg-b.on { color: var(--brand); background: rgba(248,8,120,.15); text-shadow: 0 0 10px rgba(248,8,120,.5); }
.seg-note { margin: -.25rem 0 0; font-family: var(--mono); 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: 4px; 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(157,107,255,.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(--mono); 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: #3A4558; flex: 0 0 auto; }
.fr-list .fr-dot.on { background: var(--green); box-shadow: 0 0 8px rgba(59,255,158,.9); }
.fr-list .fr-un { background: var(--brand); color: #1A0010; font-family: var(--mono); 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(248,8,120,.9); }
/* the small buttons on a row: Message and Accept green, Not now grey; 44 px tall */
.sb { font: inherit; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: rgba(59,255,158,.05); border: 1px solid rgba(59,255,158,.5); border-radius: 6px; 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: 10px; 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(--mono); font-size: .66rem; letter-spacing: .18em; 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: 10px; padding: .6rem .75rem .55rem; background: #0A0F17; 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(--mono); font-size: .8rem; font-weight: 800; color: #FFE45C; text-shadow: 0 0 8px rgba(255,228,92,.5); white-space: nowrap; }
.task .bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.task .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFC531, #FF6A00); transition: width .5s ease; }
.task small { font-family: var(--mono); font-size: .6rem; letter-spacing: .03em; color: var(--text-3); line-height: 1.4; }
.task.done { border-color: rgba(59,255,158,.5); box-shadow: 0 0 14px -6px rgba(59,255,158,.5); }
.task.done .bar i { background: var(--green); }
.task.done small, .task.done .t b { color: var(--green); text-shadow: 0 0 8px rgba(59,255,158,.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(59,255,158,.5); box-shadow: 0 0 14px -6px rgba(59,255,158,.5); }
/* the code, big, and the link under it */
.code { border: 1px dashed rgba(198,255,61,.6); border-radius: 10px; padding: .7rem .6rem .6rem; text-align: center; font-family: var(--mono); display: flex; flex-direction: column; gap: .15rem; background: rgba(198,255,61,.04); min-width: 0; }
.code .h { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.code b { font-size: 1.9rem; font-weight: 800; letter-spacing: .2em; 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(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--brand); background: rgba(248,8,120,.05); border: 1px solid rgba(248,8,120,.5); border-radius: 6px; min-height: 2.75rem; padding: .5rem .3rem; cursor: pointer; white-space: nowrap; text-shadow: 0 0 8px rgba(248,8,120,.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(59,255,158,.55); background: rgba(59,255,158,.06); text-shadow: 0 0 8px rgba(59,255,158,.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(248,8,120,.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; text-transform: uppercase; letter-spacing: .12em; }
.inv-row .inv-opt { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); 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(--mono); 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; }