/* ============ leeKY — page voice, scoped to body.wall ============
   Syne throughout, aqua hyperlink-style actions, ghost buttons.
   Everything below stays inside body.wall. */

body.wall {
  font-family: 'Syne', 'Noto Sans', sans-serif;
  color: #fff;
  background-color: var(--bg);
  background-image: url(../bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* full-height column: on a short wall the endline pins to the bottom of the
     screen instead of drifting up with the content */
  min-height: 100vh;
  display: flex; flex-direction: column;
}
body.wall a { color: var(--aqua); }
body.wall a:visited { color: var(--aqua); }

/* ---- header — left aligned, big title, link nav ---- */
body.wall .masthead{ margin: 0 0 24px; text-align: left; padding: 64px 48px 48px; background: rgba(10, 20, 26, .4); border-radius: 0; }
/* ---- scroll banner: takes over once the intro leaves the screen ---- */
.topbanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  margin: 0; border-radius: 0;
  text-align: left; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.4rem; color: #fff;
  padding: 18px 16px 18px 48px; background: rgba(10, 20, 26, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.topbanner.show { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 640px) {
  .topbanner { font-size: 1.1rem; padding: 21px 12px 21px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbanner { transition: none; transform: none; }
}
/* Android-style unread dot: on the account link while its menu is closed,
   on the notifications item once the menu opens. */
body.wall .notif-dot {
  display: inline-block; width: 8px; height: 8px; margin-left: 6px;
  border-radius: 50%; background: var(--coral);
  vertical-align: super; line-height: 0; text-decoration: none;
  box-shadow: 0 0 0 2px rgba(10, 20, 26, .5);
}
body.wall .notif-dot[hidden] { display: none; }
/* the account link wraps as one unit, so the dot never drops onto its
   own line on narrow screens */
body.wall #acctBtn { display: inline-block; }
body.wall #acctBtn[hidden] { display: none; }
body.wall h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 1.1;
  letter-spacing: 0; color: #fff; margin: 0 0 10px;
}
body.wall .tagline {
  font-family: 'Syne', 'Noto Sans', sans-serif;
  font-style: normal; font-size: 1.2rem; line-height: 1.35; color: #fff;
  max-width: 62ch; margin: 0 0 12px;
}
body.wall .sitenav { font-weight: 700; font-size: 1.2rem; margin: 0 0 26px; }
body.wall .sitenav a { margin-right: 36px; text-decoration: underline; color: var(--aqua); }
body.wall .sitenav a:visited { color: var(--aqua); }
body.wall .sitenav a:hover { color: #bbdef0; }
/* account dropdown: banner frost, site radius, hyperlink buttons.
   Lives at body level (never nested in the frosted masthead — nested
   backdrop-filters flatten on mobile GPUs, killing the blur). */
.acctmenu {
  position: absolute; z-index: 85;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  margin: 10px 0 0; padding: 16px 18px; border-radius: 12px;
  background: rgba(10, 20, 26, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.acctmenu[hidden] { display: none; }
.acctmenu .btn {
  background: none; border: none; text-decoration: underline;
  color: var(--aqua); text-transform: none; letter-spacing: 0;
  font-family: inherit; cursor: pointer; text-align: left;
}
.acctmenu .btn:hover:not(:disabled) { color: #bbdef0; background: none; box-shadow: none; transform: none; }

/* notification dropdown: the account menu's frost, wider because cards
   and replies need a readable line. Items keep the site's underlined
   aqua button voice; the metadata beneath stays quiet. */
.notifmenu {
  position: absolute; z-index: 85;
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 520px); overflow-y: auto;
  margin: 0; padding: 16px 18px; border-radius: 12px;
  background: rgba(10, 20, 26, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.notifmenu[hidden] { display: none; }
.notifgroup { display: flex; flex-direction: column; gap: 12px; }
.notif-label {
  font-family: 'Syne', 'Noto Sans', sans-serif; font-size: .75rem; font-weight: 600;
  color: rgba(255, 255, 255, .6);
}
.notifitem {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: none; text-align: left; cursor: pointer;
  font-family: 'Syne', 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400;
  line-height: 1.35; color: var(--aqua);
}
.notifitem:hover .notif-text { color: #bbdef0; }
.notifitem .notif-text { text-decoration: underline; overflow-wrap: anywhere; }
.notifitem .notif-meta {
  display: block; margin-top: 3px; color: rgba(255, 255, 255, .65);
  font-size: .82rem; text-decoration: none; overflow-wrap: anywhere;
}
.notif-empty {
  font-family: 'Syne', 'Noto Sans', sans-serif; font-size: .9rem;
  color: rgba(255, 255, 255, .65); margin: 0;
}

/* ---- buttons as ghosts (page only — the desk keeps .btn):
   faint off-white at rest, aqua underline on hover ---- */
body.wall .card [data-act] {
  font-family: 'Syne', 'Noto Sans', sans-serif;
  font-size: 1rem; text-transform: none; letter-spacing: 0;
  color: #bbdef0; text-decoration: underline;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
}
/* no button on the wall carries padding, and every button shares one text
   size (the terms page is outside body.wall and keeps its own look) */
body.wall button, body.wall .btn, body.wall .pill, body.wall .copy-btn { padding: 0; font-size: 1rem; font-weight: 700; }
/* ---- feedlabel — plain and small ---- */
body.wall .feedlabel {
  margin: 0; padding: 0 40px 12px;
  font-family: 'Syne', 'Noto Sans', sans-serif;
  font-size: 1rem; color: #fff; border: none;
}
body.wall .feedlabel b { color: #fff; font-weight: 400; }

/* ---- the cards — plain boxes, generous gaps (only startup cards keep a border) ---- */
body.wall .cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 1px; grid-auto-flow: row dense; gap: 12px; align-items: start;
  margin: 0; padding: 0;
}
body.wall .card {
  border: none; border-radius: 12px; margin: 0;
  padding: 18px 20px 20px; background: rgba(10, 20, 26, .25);
}
body.wall .card:hover{ background: rgba(10, 20, 26, .25); }
/* edge cards meet the viewport with a straight side */
#feed .card.edge-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#feed .card.edge-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* gold-bordered cards drop the border where they meet the viewport */
#feed .card.edge-l.startup, #feed .card.edge-l.pend, #feed .card.edge-l.shold { border-left-width: 0; }
#feed .card.edge-r.startup, #feed .card.edge-r.pend, #feed .card.edge-r.shold { border-right-width: 0; }
body.wall .c-text {
  font-family: 'Syne', 'Noto Sans', sans-serif;
  font-style: normal; font-weight: 400; font-size: 1.05rem; line-height: 1.3; color: #fff;
  overflow-wrap: anywhere; margin-bottom: 14px;
}
body.wall .c-meta{ display: inline; font-family: 'Syne', 'Noto Sans', sans-serif; font-size: 1rem; line-height: 1.4; color: #fff; }
body.wall .c-meta .who { display: inline; font-size: 1.4rem; font-weight: 700; color: #fff; margin-right: 18px; }
body.wall .c-meta > span:not(.who):not(.stag):not(.mile-tag) { display: none; }
body.wall .c-meta .stag, body.wall .c-meta .mile-tag{ font-size: 1rem; letter-spacing: .02em; }
body.wall .card.mine { position: relative; }
body.wall .card.mine::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  background: rgba(255, 255, 255, .5);
}
body.wall .c-meta .you { color: #fff; font-weight: 700; text-decoration: none; }
#reply .rp-meta .you { color: #fff; font-weight: 700; text-decoration: none; }
body.wall .c-acts { display: inline; margin: 0 0 0 18px; font-size: 1.25rem; }
/* bottom row: engraver name left, actions right, same baseline */
body.wall .c-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; }
body.wall .c-foot .who { font-size: 1.4rem; font-weight: 700; color: #fff; }
body.wall .c-foot .c-acts { margin: 0; }
/* pending cards: status chip sits centered above its button */
body.wall .card.pend .c-foot { align-items: flex-end; }
body.wall .card.pend .c-acts { display: flex; flex-direction: column; gap: 8px; }
body.wall .card.pend .c-acts .c-chip { align-self: center; margin-right: 0; }
body.wall .card.pend .c-acts [data-act] { align-self: flex-end; white-space: nowrap; }
body.wall .c-acts .c-meta { display: inline; }
body.wall .endline {
  text-align: left; margin: 0; padding: 64px 48px 48px;
  margin-top: auto; /* pinned to the page bottom on a short wall — fixed size, never stretches */
  font-family: 'Syne', 'Noto Sans', sans-serif;
  font-size: 1rem; letter-spacing: normal; color: #fff;
  /* the masthead's frost, verbatim: same veil, same full-bleed bar */
  background: rgba(10, 20, 26, .4); border-radius: 0;
}
/* JS drops a 1px infinite-scroll sentinel right after the endline; tuck it
   into the frost so the document ends flush with the bar, never 1px past it */
body.wall #scrollSentinel { margin-top: -1px; }
body.wall footer {
  border: none; text-align: left; margin: 0;
  font-family: 'Syne', 'Noto Sans', sans-serif;
  font-size: 1.1rem; color: #fff; padding: 10px 40px 60px;
}
body.wall .card [data-act]:hover {
  background: none; border: none; box-shadow: none; transform: none;
  color: var(--aqua); text-decoration: underline;
}
@media (max-width: 640px) {
body.wall .feedlabel, body.wall footer{ padding-left: 20px; padding-right: 20px; }
  body.wall .cards { padding-left: 0; padding-right: 0; }
  body.wall .sitenav a { margin-right: 24px; }
}
/* ---- startup separators: plain block bands between masonry sections.
   Natural height — no spans, nothing to measure, nothing to go stale.
   Fixed 4 slots (2 on phones); holes stay holes via placeholders. ---- */
body.wall .goldband { padding: 0; margin: 12px 0; }
body.wall .goldband .goldrow{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
body.wall .card.startup {
  grid-column: auto;
  background:
    linear-gradient(135deg, rgba(216, 192, 138, .16), rgba(216, 192, 138, .05) 55%, rgba(232, 149, 109, .12)), rgba(24, 20, 12, .8);
  border-style: solid;
  border-width: 2px;
  border-color: rgba(216, 192, 138, .55);
}
body.wall .card.startup.fullrow { padding: 28px 22px 24px; }
/* pending fullrow at the top spans like the real thing */
body.wall .cards > .card.startup.fullrow { grid-column: 1 / -1; }
body.wall .card.startup.fullrow .c-text{ font-size: clamp(1.3rem, 3vw, 2rem); }
body.wall .card.shold {
  border: 1px dashed rgba(255, 255, 255, .25); background: transparent;
  color: rgba(255, 255, 255, .35); min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', 'Noto Sans', sans-serif; font-size: 1rem;
}
.card.pend{ border-style: dashed; border-width: 1px; border-color: rgba(216, 192, 138, .45); }
.card.pend.rej{ border-color: rgba(232, 149, 109, .5); }
.c-chip { display: inline-block; font-family: 'Syne', 'Noto Sans', sans-serif; font-weight: 600; font-size: 8px; letter-spacing: .18em; border: 1px solid currentColor; padding: 3px 8px; margin-right: 8px; }
.chip-awa { color: var(--sand); } .chip-rev { color: var(--coral); } .chip-rej { color: var(--coral); }
.c-acts { margin-top: 10px; }
@keyframes newcard { 0% { background: var(--aqua-dim); } 100% { background: transparent; } }
.card.flash { animation: newcard 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .card.flash { animation: none !important; }
}

/* ---- toasts ---- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  position: relative;
  background: rgba(10, 20, 26, .25); border: 1px solid var(--line2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--fg); font-family: 'Syne', 'Noto Sans', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.7; letter-spacing: .06em;
  padding: 11px 16px 11px 22px; max-width: min(420px, 90vw); border-radius: 12px;
  animation: tin .3s cubic-bezier(.2, 1.2, .3, 1);
}
.toast::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  background: var(--aqua);
}
@keyframes tin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .35s; }

/* ---- engraving desk (modal) ---- */
.modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 18px; }
.modal.show { display: flex; }
/* an open menu pins the page behind it */
body.locked { overflow: hidden; }
.backdrop2{ position: absolute; inset: 0; background: rgba(4, 10, 13, .78); }
.modal-card {
  position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: rgba(10, 20, 26, .72); border: none; padding: clamp(24px, 4vw, 38px);
  scrollbar-width: none;
}
.modal-card::-webkit-scrollbar { display: none; }
/* frosted glass: slight blur so the animated backdrop reads through */
body.wall .masthead, body.wall .card, .modal-card, .backdrop2, body.wall .endline {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* desktop: frost stays full-screen, but the menu content sits centered */
@media (min-width: 641px) {
  #desk .m-step, #acct .m-step, #reply .m-step { max-width: 620px; width: 100%; margin: 0 auto; }
}
#desk, #acct, #reply { padding: 0; }
#desk .modal-card, #acct .modal-card, #reply .modal-card { width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; }
#desk .modal-card, #acct .modal-card, #reply .modal-card { padding: clamp(40px, 7vw, 76px); }
/* no dim veil behind engrave/account — the frosted card floats on the live wall */
#desk .backdrop2, #acct .backdrop2, #reply .backdrop2 { display: none; }
/* engrave/account wear the banner's frost, not the old dim card */
#desk .modal-card, #acct .modal-card, #reply .modal-card { background: rgba(10, 20, 26, .4); }
.m-step { display: none; }
.modal[data-state="compose"] .st-compose { display: block; }
.modal[data-state="invoice"] .st-invoice { display: block; }
.modal[data-state="review"]  .st-review { display: block; }
.modal[data-state="done"]    .st-done { display: block; }
.modal[data-state="account"] .st-account { display: block; }
.modal[data-state="replies"] .st-replies { display: block; }
.modal[data-state="confirm"] .st-confirm { display: block; }
/* confirm dialog: fullscreen frost like the menus, but lighter (.25 vs .4),
   content wider than the account column, title oversized vs native dialogs */
#confirm .modal-card { background: rgba(10, 20, 26, .4); padding: clamp(40px, 7vw, 76px); }
/* confirm veil: frosted like everything, but lighter than the dialog itself
   so the panel never melts into its own backdrop */
#confirm .backdrop2 { background: rgba(10, 20, 26, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#confirm .confirm-big { font: 750 clamp(1.8rem, 4vw, 2.6rem)/1.2 'Syne', 'Noto Sans', sans-serif; }
#confirmGo { color: #B23A48; }
#confirmGo:hover:not(:disabled) { color: #D46979; background: none; box-shadow: none; transform: none; }
.m-tag { font: 600 9px 'Syne', 'Noto Sans', sans-serif; letter-spacing: .26em; color: #fff; margin-bottom: 14px; }
.m-title{ font: 750 clamp(1.3rem, 3vw, 1.7rem)/1.25 'Syne', 'Noto Sans', sans-serif; margin-bottom: 20px; color: #fff; }
.m-rows { font: 400 13px 'Syne', 'Noto Sans', sans-serif; border-top: 1px solid var(--line2); }
.m-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.m-row .k { font-size: 12px; letter-spacing: .1em; color: #fff; padding-top: 2px; white-space: nowrap; }
.m-row .v { text-align: right; letter-spacing: .02em; color: #fff; }
.m-row .v b { color: #fff; font-weight: 600; }
.f-label { font: 600 14px 'Syne', 'Noto Sans', sans-serif; letter-spacing: normal; color: #fff; margin: 18px 0 8px; }
.inp {
  width: 100%; background: rgba(217, 230, 225, .045); border: 1px solid var(--line);
  color: #fff; font-size: 15px; padding: 11px 12px; letter-spacing: .02em;
}
.inp:focus { outline: none; border-color: var(--aqua); }
.inp::placeholder, textarea.inp::placeholder { color: rgba(217, 230, 225, .6); opacity: 1; }
textarea.inp { resize: vertical; min-height: 88px; line-height: 1.6; font-family: var(--serif); font-style: italic; font-size: 16px; }
.cnt { font: 400 11px 'Syne', 'Noto Sans', sans-serif; letter-spacing: .16em; color: #fff; text-align: right; margin-top: 6px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { font-family: 'Syne', 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; line-height: normal;
  color: var(--aqua); background: none;
  border: none; padding: 0; cursor: pointer;
  text-decoration: underline; transition: all .15s; }
.pill.on { color: #bbdef0; background: none; }
.pill:hover { color: #bbdef0; background: none; box-shadow: none; transform: none; }
.insp { font: 700 12px/1.8 'Syne', 'Noto Sans', sans-serif; letter-spacing: .08em; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line); color: #fff; }
.insp.ok { color: var(--sea); border-color: var(--sea); }
.insp.bad { color: var(--coral); border-color: var(--coral); }
.m-fine { font: 400 14px/1.9 'Syne', 'Noto Sans', sans-serif; letter-spacing: normal; color: #fff; margin: 16px 0 18px; }
.m-fine b { color: #fff; font-weight: 600; }
.tosbox{ display: flex; gap: 12px; align-items: flex-start; font-family: 'Syne', 'Noto Sans', sans-serif; font-weight: 700; font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: #fff; border: 1px dashed var(--line2); padding: 12px 14px; margin: 0 0 16px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.tosbox:hover{ border-color: var(--aqua); background: rgba(127, 205, 184, .04); }
.tosbox a { font-family: inherit; color: #fff; }
body.wall .tosbox a, body.wall .tosbox a:visited { color: #fff; }
.tosbox input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--line2); background: transparent; cursor: pointer; display: grid; place-content: center; transition: all .15s; }
.tosbox input:hover { border-color: var(--aqua); }
.tosbox input:checked { border-color: var(--aqua); background: var(--aqua-dim); }
.tosbox input:checked::before{ content: "✓"; font-family: 'Syne', 'Noto Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; line-height: 1; }
.tosbox input:focus-visible { outline: 1px solid var(--aqua); outline-offset: 2px; }
.tosbox span { white-space: nowrap; }
.m-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.m-actions[hidden] { display: none; }
.m-actions .ghost { align-self: center; }
.addr {
  font-size: 13px; word-break: break-all; background: rgba(217, 230, 225, .05);
  border: 1px dashed var(--line2); padding: 11px; display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.copy-btn { font-family: 'Syne', 'Noto Sans', sans-serif; background: none; border: none; white-space: nowrap; color: var(--aqua); text-decoration: underline; cursor: pointer; }
.copy-btn:hover { color: #bbdef0; }
/* hash field: the input lives unboxed inside the dashed jar-style row */
.addr .inp { flex: 1; min-width: 0; background: none; border: none; padding: 0; }
.addr .inp:focus { outline: none; border: none; }
.addr:focus-within { border-color: var(--aqua); }
/* destructive action reads burgundy-red, not hyperlink aqua */
#invDelete { color: #B23A48; }
#invDelete:hover:not(:disabled) { color: #D46979; }
.hint { font: 400 11.5px/1.8 'Syne', 'Noto Sans', sans-serif; letter-spacing: .08em; margin-top: 8px; color: #fff; }
.hint.ok { color: #fff; } .hint.bad { color: #fff; }
.chk { display: flex; gap: 14px; align-items: baseline; padding: 10px 2px; border-bottom: 1px solid var(--line); font: 400 13px 'Syne', 'Noto Sans', sans-serif; color: #fff; }
.chk-mk { width: 52px; color: #fff; flex: none; }
.chk[data-s="ok"] .chk-mk { color: #fff; }
.chk[data-s="fail"] .chk-mk { color: #fff; }
.chk[data-s="run"] .chk-mk { color: #fff; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.chk-k { letter-spacing: .1em; }
.chk-d { margin-left: auto; color: #fff; font-size: 11.5px; letter-spacing: .06em; text-align: right; }
.verdict { border: 1px solid var(--coral); padding: 16px; margin-top: 18px; margin-bottom: 18px; font: 700 12.5px/1.9 'Syne', 'Noto Sans', sans-serif; letter-spacing: .05em; color: #fff; }
.dn-card { border: 1px solid var(--line2); padding: 22px 18px; text-align: center; margin: 4px 0 18px; }
.dn-card .d-text{ font: 400 clamp(1.15rem, 2.6vw, 1.5rem)/1.55 'Syne', 'Noto Sans', sans-serif; overflow-wrap: anywhere; color: #fff; }
.dn-card .d-meta { font: 400 11px/2.1 'Syne', 'Noto Sans', sans-serif; letter-spacing: .14em; color: #fff; margin-top: 14px; }
.dn-card .d-meta b { color: #fff; font-weight: 600; }
#verdict, #vdActions{ display: none; }
.modal-card .stamp {
  position: absolute; top: 24px; right: 24px;
  font: 600 10px 'Syne', 'Noto Sans', sans-serif; letter-spacing: .2em; color: #fff;
  border: 2px solid var(--coral); padding: 6px 12px;
  transform: rotate(-4deg); user-select: none;
}

/* ---- modals (desk + account): shared-class voice lives here ---- */
.modal { font-family: 'Syne', 'Noto Sans', sans-serif; color: #fff; }
.modal * { letter-spacing: normal; border-radius: 12px; }
.modal .tosbox input, .modal .modal-card .stamp,
.modal .m-rows, .modal .m-rows .m-row { border-radius: 0; }
.modal .btn {
  font-family: 'Syne', 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; line-height: normal;
  color: var(--aqua); background: none;
  border: none; padding: 0; cursor: pointer;
  text-decoration: underline;
}
.modal .btn:hover:not(:disabled) { color: #bbdef0; background: none; box-shadow: none; transform: none; }
.modal .btn:disabled { opacity: .35; cursor: not-allowed; }
.modal textarea.inp:disabled { opacity: .55; cursor: not-allowed; }
.modal .inp { font-family: 'Syne', 'Noto Sans', sans-serif; color: #fff; }
.m-static { color: #bbdef0; text-decoration: none; margin: 0 0 18px; }
.modal textarea.inp { font-style: normal; }
.modal .hint { font-family: 'Syne', 'Noto Sans', sans-serif; color: #fff; }
#tabLogin .m-actions { margin-top: 18px; }
/* ---- replies thread ---- */
#rpCard { margin-bottom: 6px; }
#rpCard .card { margin: 0; }
#rpComposer { margin-top: 12px; }
#rpList { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 12px; }
.rp-kids { position: relative; margin: 10px 0 0 14px; padding-left: 12px; display: flex; flex-direction: column; gap: 12px; }
.rp-kids::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line2); }
.rp { padding: 10px 12px; }
.rp-text { overflow-wrap: anywhere; margin-bottom: 6px; }
.rp-meta { display: flex; align-items: baseline; gap: 12px; }
#rpToLine { margin-top: 14px; }
.rp.flash { animation: newcard 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .rp.flash { animation: none !important; }
}

/* ---- mobile QA ---- */
@supports (height: 92dvh) { .modal-card { max-height: 92dvh; } }
.backdrop2 { position: fixed; }               /* backdrop survives modal scroll on tall content */
.modal { overflow-y: auto; }
.modal-card { margin: auto; }                 /* stays centered; scrolls from top when taller than screen */
@media (pointer: coarse) {
  /* single size holds on touch too — no per-button overrides here */
  body.wall button, body.wall .btn, body.wall .pill, body.wall .copy-btn { font-size: 1rem; }
}
@media (max-width: 640px) {
body.wall .feedlabel{ padding-left: 14px; padding-right: 14px; }
  body.wall .masthead { margin: 0 0 12px; padding: 32px 24px; }
  body.wall .endline { padding: 32px 24px; }
  .notifmenu { padding: 14px 16px; gap: 12px; }
  body.wall h1 { font-size: 3rem; }
  body.wall .tagline { font-size: .85rem; }
  body.wall .sitenav { font-size: 1rem; }
  body.wall .sitenav a { margin-right: 20px; }
body.wall .cards{ grid-template-columns: repeat(2, 1fr); padding-left: 0; padding-right: 0; gap: 6px; }
  body.wall .goldband { padding-left: 0; padding-right: 0; margin: 6px 0; }
body.wall .goldband .goldrow{ grid-template-columns: repeat(2, 1fr); gap: 6px; }
  body.wall .card { padding: 14px 16px 16px; }
  body.wall .c-text { font-size: .75rem; margin-bottom: 10px; }
body.wall .c-meta .who, body.wall .c-foot .who{ font-size: .9rem; margin-right: 10px; }
  body.wall .c-acts { margin-left: 10px; font-size: .85rem; }
  body.wall .feedlabel { font-size: .85rem; }
}
@media (max-width: 640px) {
.inp, textarea.inp{ font-size: 16px; }       /* stops iOS focus-zoom */
  .toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .masthead { padding-top: 48px; }
  .buyzone .btn { width: 100%; max-width: 360px; }
  .tosbox { font-size: 11px; letter-spacing: .02em; }   /* keep the accept line on one row */
}