, the same shape social.css and profile.css use, because the brass rail is a sibling above

, and an offset on

alone leaves the rail hidden behind the header it is meant to sit under. */ body.mine-page{ padding:calc(var(--header-h) + 8px) 0 calc(var(--tabbar-h) + 28px); } .mn-main{ max-width:760px; margin:0 auto; padding:10px 16px 0; } /* ── THE HEAD ────────────────────────────────────────────────────────────── */ .mn-head{ margin:2px 0 20px } .mn-title{ font-family:var(--font-display); font-size:clamp(26px,6vw,34px); font-weight:700; line-height:1.15; color:var(--text); margin:0 0 4px; } .mn-sub{ font-size:14px; color:var(--text-3); margin:0; } /* ── SECTIONS ────────────────────────────────────────────────────────────── */ .mn-sec{ margin:0 0 26px } .mn-sec-title{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-3); margin:0 0 10px; } /* The count sits in the heading rather than after each list, because the question this page answers first is "how much of this is mine". */ .mn-sec-n{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--brand-ghost); color:var(--accent); font-size:11px; font-weight:800; letter-spacing:0; } .mn-note{ font-size:13.5px; line-height:1.55; color:var(--text-3); background:var(--panel); border:1px dashed var(--border); border-radius:12px; padding:12px 14px; margin:0 0 10px; } .mn-note a{ color:var(--accent); text-decoration:underline } /* ── A CARD ──────────────────────────────────────────────────────────────── */ .mn-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; margin:0 0 10px; box-shadow:var(--shadow-1); } /* Something that has already happened is still yours and still on the map, so it is dimmed rather than hidden, enough to sort past from upcoming at a glance, not enough to make the Delete button hard to read. */ .mn-card.is-past{ opacity:.72 } .mn-card.is-past:hover, .mn-card.is-past:focus-within{ opacity:1 } /* A crawl that never left this phone reads as a draft. The brass edge is the app's "yours, not published" mark. */ .mn-card-local{ border-left:3px solid var(--ornament) } .mn-card-head{ display:flex; align-items:flex-start; gap:12px; } .mn-ico{ font-size:22px; line-height:1.2; flex-shrink:0; width:38px;height:38px; display:flex;align-items:center;justify-content:center; background:var(--panel-2); border-radius:10px; } .mn-card-text{ min-width:0; flex:1 } .mn-card-title{ font-size:16px; font-weight:700; color:var(--text); margin:0 0 3px; /* A pub name is not a paragraph. Two lines, then it stops, three-line titles pushed the action row off every card in the list. */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; overflow:hidden; } .mn-card-line{ font-size:13.5px; color:var(--text-2); margin:0; } .mn-card-rep{ font-size:12.5px; color:var(--accent); margin:3px 0 0; font-weight:600; } /* The share code, in the shape it is sent in. Monospace because this is a thing people read out across a table. */ .mn-card-code{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-3); margin:5px 0 0; word-break:break-all; } .mn-card-code strong{ color:var(--text); letter-spacing:.6px } /* ── TAGS ────────────────────────────────────────────────────────────────── */ .mn-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0; } .mn-tag{ font-size:11.5px; font-weight:600; color:var(--text-2); background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:3px 9px; white-space:nowrap; } .mn-tag-lock{ color:var(--warn); border-color:var(--warn-soft); background:var(--warn-soft) } .mn-tag-live{ color:var(--accent); border-color:var(--brand-ring); background:var(--brand-ghost) } /* ── ACTIONS ─────────────────────────────────────────────────────────────── */ .mn-acts{ display:flex; flex-wrap:wrap; gap:8px; margin:13px 0 0; padding:12px 0 0; border-top:1px solid var(--border); } .mn-btn{ appearance:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:9px; /* 38px tall with the padding below, which is the floor for something a thumb has to hit beside a Delete button. */ padding:9px 14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; transition:background .15s,border-color .15s,color .15s; } .mn-btn:hover{ background:var(--hover); border-color:var(--border-strong) } .mn-btn:disabled{ opacity:.5; cursor:default } .mn-btn-go{ background:var(--accent-solid); border-color:var(--accent-solid); color:var(--on-accent); } .mn-btn-go:hover{ background:var(--brand-500); border-color:var(--brand-500) } /* The only coloured control on a card. It is not filled: a red block beside four grey ones is the brightest thing on a screen full of your own work, and the thing you press least. */ .mn-btn-danger{ color:var(--danger); border-color:var(--danger-soft); } .mn-btn-danger:hover{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); } /* Delete last and away from the rest, so the press that cannot be undone is never the one nearest your thumb after pressing Edit. */ .mn-acts .mn-btn-danger{ margin-left:auto } /* ── EMPTY AND SIGNED OUT ────────────────────────────────────────────────── */ .mn-empty{ text-align:center; padding:52px 20px; background:var(--panel); border:1px solid var(--border); border-radius:16px; } .mn-empty-glyph{ font-size:42px; margin:0 0 12px } .mn-empty-title{ font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--text); margin:0 0 8px; } .mn-empty-text{ font-size:14.5px; line-height:1.6; color:var(--text-2); max-width:38ch; margin:0 auto 18px; } /* ── THE CONFIRM ─────────────────────────────────────────────────────────── */ .mn-confirm{ position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:20px; } .mn-confirm[hidden]{ display:none } .mn-confirm-card{ width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border-strong); border-radius:16px; padding:22px; box-shadow:var(--shadow-3); } .mn-confirm-title{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text); margin:0 0 10px; } .mn-confirm-text{ font-size:14.5px; line-height:1.6; color:var(--text-2); margin:0 0 20px; } .mn-confirm-acts{ display:flex; gap:10px; } .mn-confirm-acts .mn-btn{ flex:1; justify-content:center } /* Filled here, unlike on the card. On a card it is one of five things you could do; in this box it is the whole question, and the answer to "which of these two buttons does the thing" should never need reading twice. */ .mn-confirm-acts .mn-btn-danger{ margin-left:0; background:var(--danger); border-color:var(--danger); color:var(--on-accent); } .mn-confirm-acts .mn-btn-danger:hover{ background:var(--danger); border-color:var(--danger); color:var(--on-accent); filter:brightness(1.08); } @media (prefers-reduced-motion:reduce){ .mn-btn{ transition:none } } /* ── PHONES ──────────────────────────────────────────────────────────────── */ @media (max-width:520px){ .mn-main{ padding-left:12px; padding-right:12px } /* Full-width rows rather than a wrapped grid of half-buttons: four controls across 340px is four 74px targets, and Delete would land under a thumb reaching for Rename. */ .mn-acts{ gap:6px } .mn-btn{ padding:9px 12px; font-size:13px } .mn-acts .mn-btn-danger{ margin-left:auto } }