/* Kelplock — line-art on a dark ground. Thin glowing strokes, one accent, figures in the grotesk. */
:root {
  --ground: #061014; --ink: #DCEFEA; --dim: #6F8A85; --faint: #2A4541; --glow: #6EF2C9; --glowdim: #3FA98A;
  --surface: clamp(284px, 38vh, 400px);          /* where the surface pill rides: the bottom of the claim block */
  --pillh: 60px; --seabedh: 54px;
  --display: 'Megrim', 'Karla', system-ui, sans-serif; --body: 'Karla', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.45;
  height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; }

/* ---------- the claim block (above the surface) ---------- */
.lay { height: var(--surface); flex: none; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.holdfast { display: flex; align-items: center; gap: 10px; height: 34px; }
.holdfast img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 14px rgba(110,242,201,.35); }
.holdname { font-family: var(--display); font-size: 26px; letter-spacing: .06em; color: var(--glow); text-shadow: 0 0 12px rgba(110,242,201,.45); line-height: 1; }
.holdnote { margin-left: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tidewatch { font-size: 12px; color: var(--dim); letter-spacing: .02em; min-height: 18px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tidewatch b { color: var(--ink); font-weight: 500; }
.reachlabel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
.reach { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; border: 1px solid var(--faint); border-radius: 8px; overflow: hidden; height: 50px; background: rgba(110,242,201,.03); }
.reachfield { min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ink); font-family: var(--body); font-size: 24px; font-weight: 500; padding: 0 12px; font-variant-numeric: tabular-nums; }
.reachfield:focus { background: rgba(110,242,201,.06); }
.reachunit { align-self: center; font-size: 11px; letter-spacing: .1em; color: var(--dim); padding-right: 10px; white-space: nowrap; }
.reachgo { border: 0; border-left: 1px solid var(--faint); background: rgba(110,242,201,.10); color: var(--glow); padding: 0 18px; font-weight: 700; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.reachgo:hover { background: rgba(110,242,201,.18); }
.reachgo[disabled] { color: var(--dim); cursor: default; background: transparent; }
.soundings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.sounding { border-top: 1px solid var(--faint); padding-top: 6px; min-width: 0; }
.sounding i { display: block; font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sounding b { display: block; font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.sounding b.lit { color: var(--glow); text-shadow: 0 0 10px rgba(110,242,201,.35); }
.sounding b.cut { color: #F0A38B; }
.sounding small { display: block; font-size: 11px; color: var(--dim); line-height: 1.3; }

/* ---------- the bed (beneath the surface) ---------- */
.below { flex: 1 1 auto; min-height: 0; overflow: auto; padding: calc(var(--pillh) / 2 + 10px) 16px 16px; -webkit-overflow-scrolling: touch; }
.stalks { width: 100%; height: auto; display: block; }
.stalks text { font-family: var(--body); }
.bedcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.bedcaption b { color: var(--ink); font-weight: 500; }
.bedcaption span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* lists (tides / my claims / how) */
.drift { display: flex; flex-direction: column; gap: 10px; }
.drifthead { font-family: var(--display); font-size: 22px; letter-spacing: .05em; color: var(--glow); margin: 4px 0 2px; }
.tiderow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--faint); text-decoration: none; }
.tiderow:hover { background: rgba(110,242,201,.04); }
.tiderow .num { font-size: 20px; font-weight: 500; color: var(--glow); font-variant-numeric: tabular-nums; }
.tiderow .what { min-width: 0; font-size: 13px; color: var(--dim); }
.tiderow .what b { color: var(--ink); font-weight: 500; }
.tiderow .when { font-size: 11px; color: var(--dim); white-space: nowrap; }
.ledgerline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--faint); font-size: 13px; }
.ledgerline .who { font-family: var(--mono); font-size: 12px; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledgerline .who.me { color: var(--glow); }
.ledgerline .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledgerline .amt.lit { color: var(--glow); }
.ledgerline .amt.cut { color: #F0A38B; }
.ledgerline .tag { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.haulbtn { border: 1px solid var(--glowdim); background: transparent; color: var(--glow); border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.haulbtn[disabled] { opacity: .5; cursor: default; }
.howtext p { margin: 0 0 12px; color: var(--ink); font-size: 14.5px; max-width: 60ch; }
.howtext h3 { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .05em; color: var(--glow); margin: 18px 0 6px; }
.howtext h3:first-child { margin-top: 0; }
.quiet { color: var(--dim); font-size: 13px; padding: 12px 0; }
.foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--faint); font-size: 11.5px; color: var(--dim); display: flex; flex-direction: column; gap: 6px; }
.foot code { font-family: var(--mono); font-size: 11px; word-break: break-all; color: var(--ink); }
.foot a { color: var(--dim); }

/* the ledger column: on the phone it lives inside the bed region's bed view (rendered there); the aside is desktop-only */
.quay { display: none; }
.quaypane { display: flex; flex-direction: column; gap: 12px; }
.quaytitle { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--faint); padding-bottom: 6px; }
.stat { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.stat b { font-weight: 500; font-variant-numeric: tabular-nums; }
.tapeline { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--faint); }
.tapeline .kind { color: var(--glow); letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; align-self: center; }
.tapeline .who { font-family: var(--mono); font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tapeline .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.primer { border: 1px dashed var(--faint); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--dim); }
.primer b { color: var(--ink); font-weight: 500; }

/* ---------- the seabed strip (routes + wallet), in flow at the very bottom ---------- */
.seabedbar { flex: none; height: var(--seabedh); display: flex; align-items: center; gap: 4px; padding: 0 10px calc(env(safe-area-inset-bottom) / 2); border-top: 1px solid var(--faint); background: var(--ground); }
.route { text-decoration: none; font-size: 12.5px; letter-spacing: .06em; color: var(--dim); padding: 8px 8px; border-radius: 6px; white-space: nowrap; }
.route.on { color: var(--glow); text-shadow: 0 0 10px rgba(110,242,201,.35); }
.route.off { display: none; }
.route.tiny { font-size: 11px; padding: 8px 6px; }
.seabedgap { flex: 1; }
.holderbtn { border: 1px solid var(--faint); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.holderbtn[data-on="1"] { border-color: var(--glowdim); color: var(--glow); font-family: var(--mono); font-size: 11.5px; }

/* ---------- the surface pill: fixed, mid-screen, riding the line between claim and bed ---------- */
.surfacepill {
  position: fixed; left: 12px; right: 12px; top: calc(var(--surface) - var(--pillh) / 2); height: var(--pillh); z-index: 20;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 0 8px 0 12px;
  border: 1px solid var(--glowdim); border-radius: 999px; background: rgba(6,16,20,.92); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(110,242,201,.10), 0 0 22px rgba(110,242,201,.22), 0 10px 30px rgba(0,0,0,.5);
}
.surfacepill::before { content: ""; position: absolute; left: -12px; right: -12px; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--glow) 12%, var(--glow) 88%, transparent); opacity: .5; z-index: -1; }
.pillcoin { font-size: 11px; letter-spacing: .12em; color: var(--glow); white-space: nowrap; }
.calong { font-family: var(--mono); font-size: 11.5px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; line-height: 1.2; max-height: 44px; overflow: hidden; user-select: all; }
.calong.wait { color: var(--dim); font-family: var(--body); font-size: 12px; }
.snip { border: 1px solid var(--glowdim); background: rgba(110,242,201,.10); color: var(--glow); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.snip[disabled] { opacity: .45; cursor: default; }
.snip.done { background: var(--glow); color: var(--ground); }
.gmgnlink { font-size: 11px; color: var(--dim); text-decoration: none; white-space: nowrap; padding-right: 4px; }
.gmgnlink:hover { color: var(--glow); }

/* ---------- veil (wallet chooser / dialogs) ---------- */
.veil { position: fixed; inset: 0; z-index: 40; background: rgba(2,8,10,.72); display: flex; align-items: flex-end; justify-content: center; }
.veil.off { display: none; }
.veilpane { width: min(100%, 520px); background: var(--ground); border: 1px solid var(--faint); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 14px 16px 24px; max-height: 80vh; overflow: auto; }
.veilhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#veilTitle { font-family: var(--display); font-size: 20px; letter-spacing: .05em; color: var(--glow); }
.veilshut { border: 0; background: transparent; color: var(--dim); font-size: 22px; cursor: pointer; }
.pickwallet { display: flex; flex-direction: column; gap: 8px; }
.pickwallet button { display: flex; align-items: center; gap: 10px; border: 1px solid var(--faint); background: transparent; border-radius: 8px; padding: 10px 12px; cursor: pointer; text-align: left; }
.pickwallet img { width: 22px; height: 22px; border-radius: 6px; }
.bubble { position: fixed; left: 50%; bottom: calc(var(--seabedh) + 14px); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--ground); padding: 8px 14px; border-radius: 999px; font-size: 13px; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* ---------- wider phones / tablets: a wider measure, larger type, still one column ---------- */
@media (min-width: 640px) {
  body { font-size: 16px; }
  .lay { padding: 18px 28px 0; gap: 10px; }
  .holdname { font-size: 30px; }
  .reachfield { font-size: 28px; }
  .sounding b { font-size: 22px; }
  .below { padding-left: 28px; padding-right: 28px; }
  .surfacepill { left: 24px; right: 24px; }
  .calong { font-size: 13px; }
  .seabedbar { padding: 0 20px; }
}

/* ---------- desktop: the page recomposes — the instrument on the left, the ledger as a column on the right ---------- */
@media (min-width: 1000px) {
  :root { --quay: 380px; --wrap: 1180px; --gutter: 28px; }
  body {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--quay); grid-template-rows: var(--surface) minmax(0, 1fr) var(--seabedh);
    grid-template-areas: "lay quay" "below quay" "seabed seabed"; column-gap: var(--gutter);
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  }
  .lay { grid-area: lay; padding: 22px 0 0; gap: 12px; }
  .holdname { font-size: 34px; }
  .reach { height: 58px; }
  .reachfield { font-size: 32px; }
  .sounding b { font-size: 26px; }
  .sounding i { font-size: 11px; }
  .below { grid-area: below; padding-left: 0; padding-right: 0; }
  .stalks { max-height: min(46vh, 430px); }
  .quay { grid-area: quay; display: block; overflow: auto; padding: 22px 0 16px 0; border-left: 1px solid var(--faint); padding-left: var(--gutter); }
  .seabedbar { grid-area: seabed; padding: 0; }
  .surfacepill {
    left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); right: auto;
    width: calc(min(100vw, var(--wrap)) - var(--gutter) * 3 - var(--quay));
  }
  .calong { font-size: 13.5px; }
  .howtext p { font-size: 15.5px; }
}