/* ==========================================================================
   rill — the wallet map (/wallet → wallet/index.html, js/walletmap.js).
   loaded after styles.css (tokens, font, buttons, tags, circles, toast) and
   trail.css (the top bar, the map / panel grid, zoom + walk controls, the
   route list, the about line and footer every rill page shares). every
   rule here is scoped to body.walletpage or a .wm- class.
   ========================================================================== */

.wm { width: 100%; }

/* ---------- no address yet ---------- */
.wm-start {
  flex: 1 0 auto; width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px 64px;
  padding: clamp(40px, 9vh, 110px) var(--gutter) clamp(56px, 10vh, 120px);
}
.wm-start__text { min-width: 0; max-width: 720px; }
.wm-start__title {
  margin-top: 16px;
  font-size: clamp(38px, 5.4vw, 76px); font-weight: 300; line-height: 1.02; letter-spacing: .005em;
  text-wrap: balance;
}
.wm-start__title:focus { outline: none; }
.wm-start__lede { margin-top: 22px; max-width: 60ch; font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.7; text-wrap: pretty; }

.wm-form { margin-top: 34px; max-width: 640px; }
.wm-form__label { display: block; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.wm-form__row { display: flex; margin-top: 10px; }
.wm-form__input {
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px;
  border: 1px solid var(--ink); border-right: 0; border-radius: 0; background: var(--paper);
  font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.wm-form__input::placeholder { color: var(--ink-2); opacity: 1; }
.wm-form__input:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; border-color: var(--accent); }
.wm-form__input[aria-invalid] { border-color: var(--accent); }
.wm-form__go { min-height: 50px; padding: 0 22px; flex: none; }
.wm-form__error { margin-top: 10px; font-size: 12.5px; line-height: 1.55; letter-spacing: .03em; color: var(--accent); }
.wm-form__use { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.wm-form__or { font-size: 12px; letter-spacing: .08em; color: var(--ink-2); }
.wm-use { min-height: 40px; }
.wm-use[aria-busy="true"] { opacity: .6; cursor: progress; }
.wm-privacy {
  margin-top: 30px; max-width: 64ch; padding-top: 14px; border-top: 1px solid var(--hair);
  font-size: 12px; line-height: 1.65; letter-spacing: .03em; color: var(--ink-2);
}
.wm-noscript { margin-top: 14px; font-size: 13px; }

/* the little plate beside the form */
.wm-start__art { width: 100%; max-width: 560px; height: auto; justify-self: center; overflow: visible; }
.wm-start__art .art-ink path { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .55; }
.wm-start__art .art-dots circle { fill: var(--ink); }
.wm-start__art .art-route { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; }
.wm-start__art .art-route--echo { stroke-width: .8; stroke-dasharray: 2 5; opacity: .6; transform: translate(4px, 5px); }
.wm-start__art .art-hubs circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.wm-start__art .art-hubs text { font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-anchor: middle; fill: var(--ink); }
.wm-start__art .art-badges circle { fill: none; stroke: var(--accent); stroke-width: 1; }
@media (min-width: 1024px) {
  .wm-start { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: calc(100svh - var(--nav-h) - 120px); }
}
@media (max-width: 1023px) {
  .wm-start__art { max-width: 420px; order: -1; justify-self: start; margin-bottom: -8px; }
}
@media (max-width: 720px) {
  .wm-start__art { display: none; }
  .wm-form__row { flex-direction: column; }
  .wm-form__input { border-right: 1px solid var(--ink); height: 48px; font-size: 13px; }
  .wm-form__go { margin-top: 8px; min-height: 46px; }
}

/* ---------- the map view: header ---------- */
.wm-title { font-size: clamp(26px, 2.8vw, 40px); font-weight: 300; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.wm-title:focus { outline: none; }
.wm-addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 8px; }
.wm-addr__full { min-width: 0; font-size: 12px; line-height: 1.6; letter-spacing: .02em; color: var(--ink-2); word-break: break-all; font-variant-numeric: tabular-nums; }
.wm-addr__acts { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
.wm-addr__acts .link-btn { border-bottom-color: var(--ink); }
.wm-addr__acts .link-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }
.wm-addr__acts i { font-style: normal; color: var(--ink-3); }
.wm-status { margin-top: 10px; max-width: 62ch; font-size: 12.5px; line-height: 1.55; letter-spacing: .03em; color: var(--ink-2); }
.wm-status:empty { display: none; }
.wm-status.is-accent { color: var(--accent); }
.wm-status__retry { color: inherit; border-bottom-color: currentColor; }

/* ---------- the map: the canvas, loading, messages ---------- */
#wm-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
#wm-canvas:active { cursor: grabbing; }
#wm-canvas:focus { outline: none; }
#wm-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wm-loading { flex-wrap: wrap; justify-content: center; row-gap: 8px; min-width: 250px; padding: 10px 16px; }
.wm-loading__bar { display: none; flex: 1 0 100%; height: 1px; background: var(--hair); overflow: hidden; }
.wm-loading.has-bar .wm-loading__bar { display: block; }
.wm-loading__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform .3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .wm-loading__bar i { transition: none; } }
.wm-grid.is-loading .tp-zoom, .wm-grid.is-loading .tp-walk, .wm-grid.has-msg .tp-zoom, .wm-grid.has-msg .tp-walk { display: none; }
.wm-msg {
  position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px)); padding: 22px 24px 24px;
  background: var(--paper); border: 1px solid var(--ink);
}
.wm-msg__title { font-size: 17px; line-height: 1.35; letter-spacing: .02em; }
.wm-msg__title:focus { outline: none; }
.wm-msg__detail { margin-top: 10px; font-size: 12.5px; line-height: 1.65; letter-spacing: .03em; color: var(--ink-2); }
.wm-msg__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wm-msg__acts .btn { min-height: 38px; }
.wm-grid.no-map #wm-canvas { visibility: hidden; }

/* ---------- the panel ---------- */
.wm-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border-top: 1px solid var(--ink);
}
.wm-stat { min-width: 0; padding: 14px 16px 15px 0; border-bottom: 1px solid var(--hair); }
.wm-stat:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--hair); }
.wm-stat--dates { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
.wm-stat dt { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.wm-stat dd { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.wm-stat__n { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wm-stat__n--sm { font-size: clamp(15px, 1.25vw, 18px); font-weight: 400; letter-spacing: .02em; white-space: normal; }
.wm-stat__sub { font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2); }
.wm-grid.is-loading .wm-stat__n { color: var(--ink-3); }
.wm-rill {
  display: flex; align-items: center; gap: 10px; padding: 14px 0 16px; border-bottom: 1px solid var(--ink);
  font-size: 13.5px; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.wm-rill__mark { width: 9px; height: 9px; border-radius: 50%; border: 1.2px solid var(--ink-3); flex: none; }
.wm-rill.is-holder { color: var(--accent); }
.wm-rill.is-holder .wm-rill__mark { background: var(--accent); border-color: var(--accent); }
.wm-rill .tag { margin-left: 6px; vertical-align: 1px; }

.wm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.wm-actions .btn { min-height: 42px; padding: 0 12px; }
.wm-actions .btn--ink:hover { color: #fff; }
.wm-actions [aria-busy="true"] { opacity: .6; cursor: progress; }
.wm-fine { margin-top: 10px; }

.wm-block { margin-top: 34px; }
.wm-prots { border-top: 1px solid var(--ink); }
.wm-prot {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--hair);
}
.wm-prot__name { min-width: 0; font-size: 13.5px; letter-spacing: .03em; overflow-wrap: anywhere; }
.wm-prot.is-core .wm-prot__name, .wm-prot.is-tokens .wm-prot__name { color: var(--ink-2); }
.wm-prot__count { font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.wm-prot.is-tokens .wm-prot__n { border-color: var(--accent); color: var(--accent); }

.wm-moves .tp-stop { padding: 13px 0 14px; }
.wm-moves .tp-stop:not(:last-child)::after { top: 43px; bottom: -14px; }
.wm-moves .tp-stop__coll { font-variant-numeric: tabular-nums; }

.wm-again { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hair); }
.wm-again .arrow-link { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.wm-again .arrow-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.wm-again .tp-fine { margin-top: 12px; }

/* nothing read yet (loading, no activity, could not read): only the counts */
.wm-grid.is-empty .wm-actions, .wm-grid.is-empty .wm-fine, .wm-grid.is-empty .wm-block { display: none; }

/* ---------- desktop: the map is the page (a narrower column than a trail's) ---------- */
@media (min-width: 1024px) {
  .wm-grid { grid-template-columns: minmax(0, 1fr) clamp(380px, 36%, 560px); }
  body.walletpage.has-map .toast {
    left: calc(100% - clamp(380px, 36%, 560px) / 2);
    max-width: calc(clamp(380px, 36%, 560px) - 48px);
  }
  .wm-head { padding-bottom: 22px; }
  .wm-panel { padding-top: 0; }
}

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .wm-head { padding-bottom: 14px; }
  .wm-title { font-size: 26px; }
  .wm-addr__full { font-size: 11px; letter-spacing: 0; }
  .wm-stat__n { font-size: 24px; }
  .wm-stat__n--sm { font-size: 16px; }
  .wm-actions .btn { min-height: 44px; font-size: 12px; letter-spacing: .03em; }
  .wm-msg { padding: 18px 18px 20px; }
  .wm-loading { min-width: 0; width: calc(100% - 32px); white-space: normal; }
  /* a wallet's plate is wide (8 hubs): less empty paper above and below it than a trail's map */
  .wm-map { height: min(56svh, 84vw); min-height: 300px; }
  /* phones: 44px targets for the map's controls, touch screen or not */
  .wm-map .tp-zoom button, .wm-map .tp-walk button { width: 40px; height: 44px; }
  .wm-map .tp-walk__step { min-width: 8.5ch; padding: 0 8px; }
}
@media (pointer: coarse) {
  .wm-addr__acts .link-btn { position: relative; }
  .wm-addr__acts .link-btn::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
}

@media print {
  .wm-map, .wm-actions, .walletpage .toast { display: none !important; }
}