/* Muster — app screens. The manual system lives in manual.css; this file only
   does layout, the tab bar, the sheet, and screen-specific pieces. */



.wrap { max-width: none; margin: 0; padding: 0; }

/* ── Auth ─────────────────────────────────────────────────────────────────*/
.auth-wrap { max-width: 27rem; margin: 0 auto; }
.auth-blurb {
  margin: 1.1rem 0 1.4rem; text-align: center;
  font-family: var(--mono); font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
}
.auth-sheet { margin-bottom: 2rem; }
.auth-sheet .section-head { margin-top: 0; }
.auth-swap { margin: 1rem 0 0; text-align: center; font-size: 0.8rem; color: var(--ink-soft); }
.social-row { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.social-row:empty { display: none; }
.form-error {
  min-height: 1.2rem; margin: 0 0 0.6rem;
  font-size: 0.75rem; color: var(--stamp); letter-spacing: 0.04em;
}

/* ── Head + tabs ──────────────────────────────────────────────────────────*/
.app-head { display: none; }
.app-head .wrap { padding-block: 0.5rem; }
.app-head .runhead { border-bottom: 0; padding-bottom: 0; }
.app-main { padding-bottom: 2rem; }
.tab-note { font-family: var(--mono); font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 0.9rem; }




/* ── Empty states: an invitation to act, in the manual's voice ────────────*/
.empty { text-align: center; padding: 2.2rem 1rem; }
.empty-fig { width: 5.5rem; height: 5.5rem; margin: 0 auto 0.8rem; opacity: 0.55; }
.empty-fig * { stroke-width: 2 !important; }
.empty-fig .thin { stroke-width: 1.3 !important; }
.empty-body { font-family: var(--mono); font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin: 0 auto 1.1rem; max-width: 26rem; }

/* ── A sheet is a full screen in the guide (coin details, forms). The tab
   bar stays beneath it. ───────────────────────────────────────────────── */
.sheet-overlay { position: fixed; inset: calc(env(safe-area-inset-top) + 3.4rem) 0 0 0; z-index: 25; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* The lifted edge: ink rule, the app's 7px box corners doubled for a sheet,
     and a shadow cast UPWARD onto the screen underneath. */
  border-top: 1.5px solid var(--ink); border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 26px -14px rgba(0, 0, 0, 0.45);
  /* the same organic paper as the body — a flat fill here made every sheet
     (tip page, coin details, add coin) lose the texture */
  background-color: var(--paper);
  background-image: url('/assets/paper-tile.jpg');
  background-size: 512px 512px; }
/* The grab bar. Not draggable — it is the affordance that reads "this pulled
   up from the bottom". Sticky, so it holds the top edge while the panel
   scrolls under it, with a fade so content does not collide with the pill.
   A real element rather than a pseudo: ::after on the scroller positions
   against the VIEWPORT, which put it off-screen entirely. */
.sheet-grip { position: sticky; top: 0; z-index: 5; height: 1.6rem;
  margin-bottom: -0.55rem; pointer-events: none;
  background: linear-gradient(var(--paper) 58%, rgba(241, 231, 202, 0)); }
.sheet-grip::after { content: ''; position: absolute; left: 50%; top: 0.5rem;
  transform: translateX(-50%); width: 2.7rem; height: 0.3rem; border-radius: 999px;
  background: var(--ink); opacity: 0.26; }
/* The slide itself. transform only — animating `inset` or `top` would relayout
   every frame and stutter on a phone. */
.sheet-overlay { transform: translateY(0); transition: transform 240ms cubic-bezier(.32,.72,0,1); will-change: transform; }
.sheet-overlay.sheet-down { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) {
  .sheet-overlay { transition: none; }
}
.sheet-panel { max-width: 30rem; margin: 0 auto; padding: 0.6rem 1.1rem 2rem; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.sheet-actions .btn { flex: 1 1 8rem; }

/* The detail plate: bigger discs than the grid, side by side. */
.detail-faces { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
.detail-faces .face { width: 7.5rem; height: 7.5rem; cursor: pointer; }

/* Two-up rows in the edit form, so short fields do not each eat a line. */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.7rem; }
@media (max-width: 24rem) { .row2 { grid-template-columns: 1fr; } }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(5.4rem + env(safe-area-inset-bottom));
  padding: 0.6rem 1rem;
  background: var(--ink); color: var(--paper-hi);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius);
  max-width: 90vw;
}


/* ── Social sign-in (fleet spec, CONVENTIONS.md) ──────────────────────────
   Two full-width 44px buttons, Google first, Apple second, then an "or use
   email" hairline divider. Google's button is rendered by GIS itself (brand
   compliance); Apple's is ours, black with the white glyph. */
[hidden] { display: none !important; }   /* flex/grid elements ignore the attribute otherwise */
#socialwrap { display: grid; gap: 10px; margin-bottom: 18px; }
.gbtn-wrap { display: flex; justify-content: center; min-height: 44px; }
.gbtn-wrap > div { width: 100%; }
.socbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; border-radius: 8px; border: none; cursor: pointer;
  background: #000; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.socbtn-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.orline { text-align: center; color: var(--ink-faint); font-size: 13px; position: relative; margin: 4px 0; font-family: var(--mono); }
.orline::before, .orline::after { content: ""; position: absolute; top: 50%; width: 34%; height: 1px; background: var(--rule); }
.orline::before { left: 0; } .orline::after { right: 0; }

/* ── Rack toolbar ─────────────────────────────────────────────────────────*/
.toolbar { display: grid; grid-template-columns: 1fr; gap: 0 0.6rem; margin: 0.6rem 0 0.2rem; }
.toolbar .field { margin-bottom: 0.6rem; }
@media (min-width: 30rem) { .toolbar { grid-template-columns: 2fr 1fr 1fr; } }
.statline .stamp-btn { margin-left: auto; cursor: pointer; font-size: 0.58rem; padding: 0.15rem 0.45rem; border-width: 2px; }
.nudge { color: var(--stamp); opacity: 0.75; font-style: italic; }
.rack-photo { width: 100%; border: 1.5px solid var(--ink); display: block; margin: 0.4rem 0 0.9rem; }

/* ── The coin check ───────────────────────────────────────────────────────*/
.check { text-align: center; }
.check-face { display: flex; justify-content: center; margin: 1.2rem 0 0.8rem; cursor: pointer; }
.check-disc { width: min(72vw, 18rem); height: min(72vw, 18rem); }
.check-name {
  font-family: var(--cond); font-weight: 800; font-stretch: condensed;
  font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.4rem 0 0.1rem;
}
.check-hint { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0.6rem 0 0; }

/* ── Quick add ────────────────────────────────────────────────────────────*/
.quick-disc-wrap { display: flex; justify-content: center; margin: 0.4rem 0 0.6rem; }
.quick-disc { width: 9rem; height: 9rem; cursor: pointer; }
.quick-disc img { width: 100%; height: 100%; object-fit: cover; }
.quick-status { font-size: 0.72rem; text-align: center; min-height: 1.1rem; margin: 0 0 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Tip jar ──────────────────────────────────────────────────────────────*/


/* ── Safe areas: the web owns them so the shell can run contentInset:never */

/* ── The cover: sign-in is the front of the logbook ──────────────────────*/
.cover-page { text-align: center; padding-top: 1.4rem; }
.cover-page .cover-h {
  font-family: var(--head); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0.2rem 0 0.1rem;
}
.cover-page .cover-s { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.2rem; }
.emblem { width: 7.5rem; height: 7.5rem; margin: 0.4rem auto 1.2rem; display: block; }
.belongs { text-align: left; border: 1.5px solid var(--ink); padding: 0.9rem 1rem 1rem; background: var(--paper-hi); position: relative; }
.belongs .stencil-sm { margin-bottom: 0.7rem; }
.belongs .section-head { display: none; }
.handle { margin-top: 1.6rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); }
.app-head .runhead { font-family: var(--mono); }
.sheet-panel > .coffee-ring { right: -1.4rem; bottom: 2.5rem; }
.detail-wrap { position: relative; padding-top: 1.3rem; }

/* The cover's two typed lines in the belongs box, reference-style. */
.belongs .field > span { font-size: 0.62rem; }
.cover-page .cover-h { font-size: 1.35rem; }
.page-bar.hidden { display: none; }
.book.cover .tabs-edge, .book.cover .page-bar { display: none; }
.book.cover .page { padding-bottom: 1.2rem; }
.log-date { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-soft); }
.coin-hero { display: flex; justify-content: center; margin: 0.6rem 0 0.4rem; }
.coin-hero .face { width: 9.5rem; height: 9.5rem; cursor: pointer; }
.coin-hero .face + .face { margin-left: 0.8rem; }
.coin-hero .face { width: 7.6rem; height: 7.6rem; }


/* paperclip on the right edge, lower, like the reference; stamp clear of the back link */
/* A blank coin is a transparent PNG; no paper disc behind it, no inset ring. */
.face-blank { background: none; border: 0; box-shadow: none; }
.face-blank img { object-fit: contain; }

.auth-swap { margin: 0.8rem 0 0; }
.form-error { margin: 0 0 0.4rem; }
.property .field > span { font-size: 0.6rem; }
.sheet-panel .ph { margin-top: 0.4rem; }
.hero-face { width: 100%; height: 100%; cursor: pointer; }
.hero .face { background: none; border: 0; box-shadow: none; }
.hero .face img { object-fit: contain; }
.hero .face-empty { border: 1.5px dashed var(--ink-faint); border-radius: 50%; width: 100%; height: 100%; display: grid; place-items: center; }
.check-disc { width: min(72vw, 18rem); height: min(72vw, 18rem); }
.logrow .th .face { width: 100%; height: 100%; }
.logrow .th .face-blank img { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }

body.sheet-open .fab { display: none; }
.hero .face-blank { position: relative; }
.face-hint { text-align: center; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: -0.7rem 0 0.9rem; }

body.no-bar { padding-bottom: env(safe-area-inset-bottom); }
.fg-wrap { padding: 0.6rem 1.1rem 1.4rem; }

/* Details is a full screen: the tab bar yields to the action bar */
body.sheet-open .tabbar { display: none; }
/* A sheet stops short of the top edge so the screen it came from stays
   visible behind it — that gap is what says "this is a task on top of where
   you were", not a new place. */
.sheet-overlay { inset: calc(env(safe-area-inset-top) + 3.4rem) 0 0 0; }
.sheet-panel { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.detail-wrap .stamp { font-size: 0.6rem; }

/* ── ADD COIN frame ───────────────────────────────────────────────────────*/
.sec-label { font-family: var(--mono); font-size: 1.12rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--label); margin: 0.6rem 0 0.7rem; padding-bottom: 0.6rem; border-bottom: 1.5px dotted var(--ink-faint); }
.photoboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 1.3rem 0 2rem; }
.photobox { position: relative; aspect-ratio: 1.2 / 1; border: 2px dashed #5F6A50; border-radius: 8px; background: transparent;
  display: grid; place-items: center; align-content: center; gap: 0.9rem; cursor: pointer; overflow: hidden; }
.photobox .pb-ico { width: 3.6rem; height: 3.6rem; }
.photobox .pb-ico * { stroke: #4B5340; stroke-width: 3.2; }
.photobox .pb-label { font-family: var(--mono); font-size: 1.02rem; letter-spacing: 0.02em; text-transform: uppercase; color: #4B5340; }
.photobox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.photobox img + .pb-label { position: absolute; bottom: 0.45rem; left: 0; right: 0; text-align: center; font-size: 0.7rem; }
.ff { padding: 0.9rem 0 0.7rem; border-bottom: 1.5px dotted var(--ink-faint); }
.ff label { display: block; }
.ff .ff-l { display: block; font-family: var(--mono); font-size: 1.12rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--label); margin-bottom: 0.55rem; }
.ff input, .ff textarea, .ff select { width: 100%; border: 0; background: transparent; padding: 0; border-radius: 0; height: auto;
  font-family: var(--mono); font-size: 17px; color: var(--ink); appearance: none; -webkit-appearance: none; line-height: 1.5; }
.ff input::placeholder, .ff textarea::placeholder { color: var(--label); opacity: 0.75; }
.ff textarea { min-height: 2.2rem; resize: vertical; }
.ff select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 0.9rem center, right 0.55rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2rem; }
.ff input:focus-visible, .ff textarea:focus-visible, .ff select:focus-visible { outline: none; box-shadow: 0 2px 0 var(--label); }
.more { margin-top: 1.2rem; }
.more summary { font-family: var(--mono); font-size: 1.02rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--label); cursor: pointer; padding: 0.8rem 0; list-style: none; }
.more summary::before { content: "+ "; }
.more[open] summary::before { content: "\2013 "; }
.checkrow { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 1rem; padding: 0.9rem 0; }
.addform .btn-olive { margin-top: 2rem; }
.link-swap.danger { color: var(--stamp); }
.quick-status { font-family: var(--mono); font-size: 0.85rem; color: var(--label); min-height: 1.1rem; margin: -1.2rem 0 1rem; }

/* ── WISHLIST frame: a checklist ──────────────────────────────────────────*/
.wishrows { border: 1.5px solid var(--ink); border-radius: 7px; background: var(--paper); overflow: hidden; }
.wishrow { display: grid; grid-template-columns: 2.4rem 1fr 5.4rem; gap: 0 1.4rem; align-items: center; padding: 1.3rem 1.3rem; min-height: 7.6rem; border-bottom: 1.5px dotted var(--ink-faint); }
.wishrow:last-child { border-bottom: 0; }
.wish-check { width: 2rem; height: 2rem; border: 2px solid var(--ink); border-radius: 4px; background: transparent; cursor: pointer; padding: 0; }
.wish-body { appearance: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.wishrow .t { font-family: var(--head); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.25; }
.wishrow .p { font-family: var(--mono); font-size: 1.02rem; color: var(--label); margin-top: 0.45rem; }
.wishrow .th { width: 5.4rem; height: 5.4rem; display: grid; place-items: center; }
.wishrow .th .face { width: 100%; height: 100%; }
.wishrow .th img { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); }

/* ── CAMERA frame ─────────────────────────────────────────────────────────*/
.camera { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; color: #E8E2CC;
  background: #14170F; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); font-family: var(--mono); }
.cam-head { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; padding: 1.2rem 1.4rem 1rem; }
.cam-title { text-align: center; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase; }
.cam-x, .cam-help { appearance: none; background: none; border: 0; color: #E8E2CC; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0; }
.cam-help { width: 1.9rem; height: 1.9rem; border: 2px solid #E8E2CC; border-radius: 50%; font-size: 1.05rem; font-weight: 700; justify-self: end; }
.cam-view { position: relative; margin: 0.4rem 1.3rem 0; aspect-ratio: 0.86; background: #2A3121 radial-gradient(ellipse at 50% 45%, #3A4230, #242A1B 70%); border-radius: 4px; overflow: hidden; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-side { position: absolute; top: 1.3rem; left: 0; right: 0; text-align: center; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: #E8E2CC; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.cb { position: absolute; width: 2.6rem; height: 2.6rem; border: 2.5px solid #E8E2CC; }
.cb.tl { top: 1.4rem; left: 1.4rem; border-right: 0; border-bottom: 0; }
.cb.tr { top: 1.4rem; right: 1.4rem; border-left: 0; border-bottom: 0; }
.cb.bl { bottom: 1.4rem; left: 1.4rem; border-right: 0; border-top: 0; }
.cb.br { bottom: 1.4rem; right: 1.4rem; border-left: 0; border-top: 0; }
.cam-modes { display: flex; justify-content: center; gap: 3rem; margin: 1.6rem 0 1.4rem; }
.cam-mode { appearance: none; background: none; border: 0; color: #E8E2CC; font-family: var(--mono); font-size: 1.02rem; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; padding: 0; }
.cam-mode.on { color: #FFFFFF; font-weight: 700; }
.cam-mode.dim { color: #8B9A5B; }
.cam-ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 2.4rem; }
.cam-gal { width: 3.6rem; height: 3.6rem; border: 1.5px solid #8A8F7C; border-radius: 10px; background: rgba(255,255,255,0.04); cursor: pointer; display: grid; place-items: center; padding: 0.6rem; justify-self: start; }
.cam-gal .linework * { stroke: #E8E2CC; stroke-width: 4.7; }
.cam-flash .linework * { stroke: #E8E2CC; stroke-width: 6.2; }
.cam-tips .linework * { stroke: #E8E2CC; stroke-width: 3.8; }
.cam-shutter { width: 5.3rem; height: 5.3rem; border-radius: 50%; background: #FFFFFF; border: 0; box-shadow: 0 0 0 4px #14170F, 0 0 0 6px #FFFFFF; cursor: pointer; }
.cam-flash { display: grid; justify-items: center; gap: 0.4rem; justify-self: end; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cam-flash-ring { width: 2.8rem; height: 2.8rem; border: 1.5px solid #8A8F7C; border-radius: 50%; display: grid; place-items: center; padding: 0.5rem; }
.cam-tips { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; align-items: center; margin: 2rem 1.6rem 1rem; padding: 1.2rem 1.4rem; border-radius: 8px; background: rgba(255,255,255,0.06);
  font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.55; color: #E8E2CC; }
.cam-tips .linework { width: 3rem; height: 3rem; }

/* ── PROFILE frame ────────────────────────────────────────────────────────*/
.avatar { display: grid; place-items: center; width: 9rem; height: 10rem; margin: 1rem 0 2.4rem; border: 1.5px solid var(--ink); border-radius: 10px; background: #E7DCC0; overflow: hidden; padding: 0; cursor: pointer; }
.avatar .linework { width: 8rem; height: 8rem; margin-top: 1.6rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.pstats { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; margin: 0 0 2.6rem; }
.pstats > div { padding: 0.6rem 0; border-right: 1.5px solid var(--ink-faint); }
.pstats > div:last-child { border-right: 0; }
.pstats .n { font-family: var(--head); font-weight: 700; font-size: 2.7rem; line-height: 1; }
.pstats .l { font-family: var(--mono); font-size: 1.1rem; margin-top: 0.7rem; color: var(--ink); }
.since { padding-bottom: 1.2rem; border-bottom: 1.5px solid rgba(30,30,27,0.25); margin-bottom: 2.4rem; }
.since .sl { display: flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--label); }
.since .sl::after { content: ""; flex: 1; height: 1.5px; background: rgba(30,30,27,0.22); }
.since .sv { font-family: var(--mono); font-size: 1.35rem; margin-top: 0.9rem; }
.btn-outline { display: block; width: 100%; padding: 1.3rem; font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--label); background: transparent; border: 1.5px solid var(--label); border-radius: 8px; cursor: pointer; }
.btn-outline.danger { color: var(--stamp); border-color: var(--stamp); }
.sheet-actions .btn-outline { flex: 1 1 10rem; padding: 1rem; font-size: 1.05rem; }

/* ── SETTINGS frame ───────────────────────────────────────────────────────*/
.settings { border-top: 1.5px solid rgba(30,30,27,0.2); }
.srow { display: grid; grid-template-columns: 2.6rem 1fr 1.6rem; gap: 1.6rem; align-items: center; width: 100%; appearance: none; background: none; border: 0; border-bottom: 1.5px solid rgba(30,30,27,0.2);
  padding: 1.9rem 0.3rem; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.srow .linework { width: 2.6rem; height: 2.6rem; }
.srow .linework * { stroke: var(--label); stroke-width: 4.4; }
.srow .linework:last-child * { stroke-width: 7; }   /* the chevron is 26px */
.srow .linework:last-child { width: 1.6rem; height: 1.6rem; }
.srow .st { font-family: var(--mono); font-size: 1.45rem; }
.sp { font-family: var(--mono); font-size: 1.02rem; line-height: 1.6; color: var(--ink); margin: 0 0 1.1rem; }
.sp.small { font-size: 0.9rem; color: var(--label); }
.linkbox { display: block; font-family: var(--mono); font-size: 0.92rem; padding: 0.9rem; border: 1.5px dotted var(--ink-faint); border-radius: 6px; word-break: break-all; margin-bottom: 0.8rem; }

/* ── SEARCH frame ─────────────────────────────────────────────────────────*/
.searchpage .searchbar input { padding-right: 3.2rem; }
.results { border-top: 1.5px dotted var(--ink-faint); }
.result { display: grid; grid-template-columns: 5.6rem 1fr; gap: 1.6rem; align-items: center; width: 100%; appearance: none; background: none; border: 0; border-bottom: 1.5px dashed var(--ink-faint);
  padding: 1.3rem 0; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.result .th { width: 5.6rem; height: 5.6rem; display: grid; place-items: center; }
.result .th .face { width: 100%; height: 100%; }
.result .th img { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); }
.result .t { font-family: var(--head); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.3; }
.result .p { font-family: var(--mono); font-size: 1.05rem; color: var(--label); margin-top: 0.5rem; }
/* the search field keeps our × only, and the ink focus ring */
.searchbar input::-webkit-search-cancel-button, .searchbar input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.searchbar input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.srow.danger .st { color: var(--stamp); }
.srow.danger .linework * { stroke: var(--stamp); }
#profile-panel .settings { border-top: 1.5px solid rgba(30,30,27,0.2); }
/* An uploaded coin photo is a photo OF a disc, usually on a table. Render it
   as the disc: circular crop, cover. The camera's square capture centers the
   coin, so the crop shows the coin and hides the table. Blank placeholder
   PNGs are transparent and keep their own silhouette. */
.face:not(.face-blank) img { border-radius: 50%; object-fit: cover; width: 100%; height: 100%; }
.property .stampbox { display: grid; grid-template-columns: 1fr 1fr; place-items: start center; padding-top: 0.3rem; }
.property .stampbox .sb-d { line-height: 1; }
.tm-foot { margin-bottom: 0.9rem; }
.fg-logo { width: 10.5rem; max-width: 55%; display: block; margin: 0.4rem auto 0.8rem; }
#screen-auth .fg-logo { margin: 0.3rem auto 0.7rem; }
#tab-home .fg-sub { margin-bottom: 1.6rem; text-align: center; }
#screen-auth .fg-sub { text-align: center; }

/* Tip page: centered, composed, the coin as the ask */
.tip-page { text-align: center; }
.tip-page .ph { text-align: left; }
.tip-coin { width: 7.5rem; margin: 1.4rem auto 1.6rem; display: block; }
.tip-pitch { font-size: 1.12rem; max-width: 26ch; margin: 0 auto 0.6rem; }
.tip-links { display: grid; gap: 0.9rem; max-width: 22rem; margin: 1.8rem auto 0; }
.tip-btn { text-decoration: none; display: block; }
.tip-thanks { margin-top: 1.6rem; color: var(--label); }

/* The cover's email/password fields follow the rest of the app: transparent
   with a single ink rule, not boxes. */
.belongs .field input, .belongs .field select {
  background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  padding-left: 0; padding-right: 0;
}
.belongs .field input:focus-visible { outline: none; border-bottom-width: 2.5px; }