/* App-specific additions on top of the prototype styles. */
.flash { margin: 14px 0 0; padding: 12px 18px; border-radius: 14px; font-weight: 600; }
.flash-ok { background: #E3F7EA; color: #17603A; }
.flash-error { background: #FFE3EC; color: #C0186A; }
.flash-info { background: #BDE6FF; color: #1B6699; }
form.inline { display: inline-block; margin: 0 0 0 6px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.errors { background: #FFE3EC; color: #8d1250; border-radius: 14px; padding: 10px 16px; margin: 0 0 14px; }
.errors ul { margin: 4px 0 0; padding-left: 18px; }
.price-chart { width: 100%; height: auto; display: block; }

/* ---------- currency toggle ---------- */
.currency-toggle{display:inline-flex;border:2px solid var(--pink-soft);border-radius:999px;overflow:hidden;background:#fff;margin:0}
.cur-btn{border:0;background:transparent;color:var(--ink-2);font:600 .78rem/1 var(--sans);padding:7px 10px;cursor:pointer;min-height:32px}
.cur-btn[aria-pressed="true"]{background:var(--pink);color:var(--ink)}
.cur-btn:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}

/* ---------- coming soon ---------- */
.soon{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--pink-grad)}
.soon-card{background:#fff;border-radius:28px;padding:40px 32px;max-width:560px;width:100%;text-align:center;box-shadow:0 18px 50px rgba(43,30,79,.18)}
.soon-card h1{font:700 clamp(2.2rem,6vw,3.4rem)/1.05 var(--serif);margin:14px 0 10px}
.soon-card form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.soon-card input{padding:10px 14px;border:2px solid var(--line-2);border-radius:999px;font:inherit;min-width:200px}

/* ---------- mobile: everything fits the screen width, scroll is vertical only ---------- */
/* Grid "1fr" tracks default to min-width:auto, so one long URL could stretch a column (and the page) sideways. */
.hero-grid > *, .word-layout > *, .wotw-card > *, .grid-2 > *, .asset-cols > *, .form-grid > *, .footer-inner > *,
.stats > *, .steps > *, .tiles > *, .kv > *, .past-wotw > *, .leaderboard li > *,
.header-inner > *, .deed-owner > *, .asset-head > *, .field, .link-fields > *, .lt-btn > *, .toolbar > *, .exact > * { min-width: 0; }
input, select, textarea, button, table, img, svg, video, iframe, .table-wrap, .money-input { max-width: 100%; }
.field > input, .field > select, .field > textarea { width: 100%; }
.money-input input { min-width: 0; }
/* Long words and URLs wrap instead of pushing the layout wider. */
.bio, .lt-btn, .lt-label, .owner-name, .deed p, .asset p, .hint, .muted, .tiny, .small, td, th, .note, .prose, .faq,
.sales-list li, .switch span, .flash, label, dd, dt, h1, h2, h3, .deed-word, .asset-word { overflow-wrap: anywhere; }
td { word-break: normal; }
.badge, .btn, .nav-badge, .num, .cur-btn { overflow-wrap: normal; }
/* Tables scroll inside their own box rather than the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  .hero-grid, .word-layout, .wotw-card, .grid-2, .asset-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 14px; }
  .section { padding: 32px 0; }
  .form-grid, .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Header: don't pin a three-row header over the content; tidy rows that wrap neatly. */
  .site-header { position: static; }
  .header-inner { gap: 8px 10px; min-height: 0; }
  .main-nav { width: 100%; gap: 2px 4px; margin: 0 -4px; }
  .main-nav a { padding: 6px 9px; font-size: .9rem; }
  .account-area { width: 100%; gap: 6px; flex-wrap: nowrap; }
  .account-area > * { flex: none; }
  .account-area > .account-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-area form.inline { margin: 0; }
  .btn { white-space: normal; text-align: center; }
  .btn-sm { white-space: nowrap; }
  .deed-owner { gap: 12px; }
  .lt-btn { border-radius: 22px; }
  .switch { align-items: flex-start; }
  .switch input { flex: none; }
  /* /my: the links / bids tables stack into cards on a phone. */
  .table-wrap.stack-sm { overflow: visible; border: 0; background: transparent; }
  .stack-sm table, .stack-sm tbody, .stack-sm tr, .stack-sm td { display: block; width: 100%; }
  .stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-sm tr { border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); padding: 10px 14px; margin-bottom: 10px; }
  .stack-sm td { border: 0; padding: 4px 0; text-align: left; }
  .stack-sm td[data-label]::before { content: attr(data-label) ": "; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
}
/* Safety net only: real causes are fixed above. */
html, body { overflow-x: clip; }

/* ---------- confirmation pop-up (e.g. bid placed) ---------- */
dialog.popup{width:min(440px,calc(100vw - 28px));max-width:none;padding:30px 26px 24px;border:2px solid var(--pink-soft);border-radius:28px;
  background:linear-gradient(180deg,#FFF7FB 0,#fff 45%);text-align:center;position:fixed;inset:0;margin:auto;
  box-shadow:6px 6px 0 var(--blue-soft),0 30px 60px -20px rgba(43,30,79,.45);overflow-wrap:anywhere;max-height:calc(100vh - 28px);overflow:auto}
dialog.popup:focus{outline:none}
dialog.popup[open]{animation:popup-in .22s ease-out}
@keyframes popup-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.popup-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:99px;display:grid;place-items:center;background:var(--pink-grad);color:var(--ink);font:700 1.9rem/1 var(--serif);box-shadow:3px 3px 0 var(--blue)}
.popup-title{font:700 1.9rem/1.1 var(--serif);margin:0 0 10px;color:var(--ink)}
dialog.popup p{margin:0 0 10px;color:var(--ink-2)}
.popup-actions{margin-top:16px}
.popup-actions .btn{min-width:160px}
.popup-x-form{position:absolute;top:10px;right:10px;margin:0}
.popup-x{width:36px;height:36px;border-radius:99px;border:1.5px solid var(--blue-soft);background:#fff;color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer}
.popup-x:hover{background:var(--blue-wash)}
.popup-x:focus-visible,.popup-actions .btn:focus-visible{outline:3px solid var(--blue-deep);outline-offset:2px}
@media (max-width:560px){dialog.popup{padding:26px 18px 20px}.popup-title{font-size:1.6rem}.popup-actions .btn{width:100%}}

/* "Open to bids" switch: auto-save confirmation */
.bid-saved:empty { display: none; }
.bid-saved { margin: 8px 0 0; font-weight: 600; }
.bid-saved-ok { color: var(--green); background: var(--green-wash); border-radius: 10px; padding: 6px 10px; display: inline-block; }
.bid-saved-ok::before { content: "✓ "; }
.bid-saved-error { color: var(--red); background: var(--red-wash); border-radius: 10px; padding: 6px 10px; display: inline-block; }
/* ---------- "Get the app" install bar (shown by client.js only when installable) ---------- */
.install-bar{background:var(--blue-wash);border-bottom:1.5px solid var(--blue-soft)}
.install-bar[hidden]{display:none}
.install-inner{display:flex;align-items:center;gap:10px;padding-top:8px;padding-bottom:8px;min-width:0}
.install-icon{width:36px;height:36px;border-radius:10px;flex:0 0 auto;box-shadow:2px 2px 0 var(--pink-soft)}
.install-text{margin:0;font-size:.9rem;line-height:1.35;flex:1 1 auto;min-width:0;color:var(--ink)}
.install-text[hidden],.install-go[hidden]{display:none}
.share-glyph{vertical-align:-3px;color:var(--blue-deep)}
.install-go{flex:0 0 auto;white-space:nowrap}
.install-x{flex:0 0 auto;width:32px;height:32px;border-radius:99px;border:1.5px solid var(--blue);background:var(--white);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.install-x:hover{background:var(--pink-wash);border-color:var(--pink)}
@media (max-width:480px){.install-go{padding-left:12px;padding-right:12px;font-size:.82rem}}
@media (display-mode:standalone){.install-bar{display:none!important}}