/* Tidemaker's own pieces: the tide clock, the almanac line, the tide table, the log, and the almanac-page layout.
   base.css holds the structure; this file makes it this project. Tokens only, no new colours. */

/* ---------- shell ---------- */
body { background: var(--bg); }
#top { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.top-bar { gap: 22px; }
.brand { gap: 9px; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; border: 0; border-radius: 0; flex: none; }
.brand-mark svg, .brand-word svg { width: 100%; height: 100%; }
.brand-word { display: block; width: 108px; height: 23px; }
.nav a { border-radius: var(--r-sm); font-size: 14.5px; padding: 8px 10px; }
.nav a:hover { background: transparent; color: var(--ink); }
.nav a[aria-current] { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.demo-strip { background: var(--ink); color: color-mix(in srgb, var(--bg) 82%, transparent); }
.demo-strip b { color: #f2b38f; }
.btn { border-radius: var(--r-sm); }
.btn.primary { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn.danger:hover { border-color: var(--bad); }
.chip { border-radius: var(--r-sm); background: transparent; border-color: var(--line-2); }
.chip.paused { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip.live { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.seg { border-radius: var(--r-sm); background: var(--bg-2); }
.seg button, .chips button { border-radius: 4px; }
.chips button { border-radius: var(--r-sm); }
.kicker { color: var(--ink-2); }
.kicker-dot { border-radius: 50%; background: var(--accent); }
h1, h2, .display { font-variation-settings: "opsz" 120; }
.card { border-radius: var(--r); }
.card > p + p, .card > dl + p, .card > h2 + p { margin-top: 10px; }
.link-arrow { font-size: 15px; }

/* ---------- the tide clock ---------- */
.tide-clock { display: inline-block; flex: none; line-height: 0; }
.tide-clock svg { width: 100%; height: 100%; overflow: visible; }
.tc-rim { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.tc-tick { stroke: var(--ink-2); stroke-width: 1; opacity: 0.55; }
.tc-tick.major { stroke: var(--ink); stroke-width: 2.2; opacity: 1; }
.tc-word { font: 500 8.5px var(--font-mono); letter-spacing: 0.14em; fill: var(--ink-2); text-anchor: middle; }
.tc-side { font: italic 400 10px var(--font-mono); fill: var(--muted); text-anchor: middle; }
.tc-wave { fill: var(--water); }
.tc-hand line { stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.tc-tip { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.tc-hub { fill: var(--ink); }
.tc-hand, .tc-water { transform-origin: 100px 100px; transform-box: view-box; }
.tide-clock.ready .tc-hand, .tide-clock.ready .tc-water { transition: transform var(--t-tide) var(--ease); }
.tide-clock.live .tc-wave { animation: drift 9s linear infinite; }
@keyframes drift { to { transform: translateX(-100px); } }
.tide-clock.slack .tc-hand { display: none; }
.tide-clock.slack .tc-wave { opacity: 0.55; }
/* small cut: no words, heavier lines so it reads at 32 to 48 px */
.tide-clock.small .tc-rim { stroke-width: 11; }
.tide-clock.small .tc-tick { stroke: var(--ink); stroke-width: 8; opacity: 1; }
.tide-clock.small .tc-hand line { stroke-width: 13; }
.tide-clock.small .tc-tip { stroke-width: 0; }

/* ---------- home: the hero ---------- */
.hero { display: block; position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 56px); }
.hero-chart { position: absolute; inset: 0; color: var(--water-ink); opacity: 0.22; pointer-events: none; }
.hero-chart svg { width: 100%; height: 100%; }
.hero-in { position: relative; display: grid; justify-items: center; text-align: center; }
.hero-kicker { margin-bottom: 18px; }
.hero-stage { display: grid; grid-template-columns: 1fr minmax(240px, 300px) 1fr; width: 100%; column-gap: clamp(16px, 3vw, 40px); }
.hero-title { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; font-size: clamp(40px, 5.4vw, 80px); line-height: 0.98; margin: 0; }
.hero-title .beat { display: block; text-wrap: balance; }
.hero-title .low { grid-column: 1; align-self: end; text-align: right; padding-bottom: 58px; }
.hero-title .high { grid-column: 3; align-self: start; text-align: left; padding-top: 6px; }
.hero-dial { grid-column: 2; grid-row: 1; display: grid; justify-items: center; gap: 12px; }
.hero-dial .tide-clock { width: min(300px, 100%) !important; height: auto !important; aspect-ratio: 1; }
.hero-caption { display: grid; gap: 1px; font-size: 13.5px; color: var(--ink-2); min-height: 58px; }
.hero-caption .mono { color: var(--ink); font-size: 13px; }
.hero-caption:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.hero-lede { margin-top: 22px; max-width: 40em; }
.hero-lede b { color: var(--ink); font-weight: 600; }
.ctas { justify-content: center; }

/* ---------- the almanac line ---------- */
.almanac { display: grid; grid-template-columns: repeat(6, 1fr); border-block: 3px double var(--line-3); }
.almanac .stat { padding: 14px 16px; border-left: var(--border); }
.almanac .stat:first-child { border-left: 0; }
.almanac .stat-value { font-size: 21px; }
.almanac .stat.up .stat-value { color: var(--good); }
.almanac .stat.down .stat-value { color: var(--bad); }

/* ---------- the tide table ---------- */
.tide-table { border-top: 2px solid var(--ink); }
.tt-row { display: grid; grid-template-columns: 48px minmax(170px, 1.5fr) minmax(170px, 1.35fr) repeat(4, minmax(76px, 0.7fr)) 48px; gap: 12px; align-items: center; padding: 11px 8px; border-bottom: var(--border); }
.tt-row > .num { text-align: right; font-size: 14.5px; }
.tt-row > .num:last-child { font-size: 13px; }
.tt-head { padding-block: 9px; border-bottom: 1px solid var(--line-2); }
.tt-head .label:nth-child(n+4) { text-align: right; }
a.tt-row { transition: background var(--t-fast) var(--ease); }
a.tt-row:hover { background: var(--surface); }
a.tt-row:hover .tt-name { text-decoration: underline; text-underline-offset: 3px; }
.tt-clock { display: grid; place-items: center; }
.tt-coin { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tt-id { display: grid; min-width: 0; }
.tt-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-sym { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.tt-sym .chip { height: 20px; padding: 0 6px; font-size: 11px; }
.tt-tide { display: grid; font-size: 14.5px; }
.tt-sub { font-size: 12.5px; }
/* one row on its own (the launch preview): the clock, the coin with its starting SOL, then the tide underneath */
.tide-table.one { border-top-width: 1px; }
.tide-table.one .tt-row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 6px; border-bottom: 0; }
.tide-table.one .tt-row > .num { display: none; }
.tide-table.one .tt-clock { grid-row: 1 / span 2; }
.tide-table.one .tt-coin { grid-column: 2; grid-row: 1; }
.tide-table.one .tt-row > .num:nth-child(5) { display: block; grid-column: 3; grid-row: 1; }
.tide-table.one .tt-tide { grid-column: 2 / -1; grid-row: 2; font-size: 13.5px; }
.coin-art { border-radius: 7px; }
.coin-art.flag { display: inline-block; line-height: 0; }
.coin-art.flag svg { display: block; }
.skeleton .sk { border-radius: 4px; background: linear-gradient(90deg, var(--bg-2), var(--surface), var(--bg-2)); background-size: 200% 100%; animation: shimmer 1.6s infinite linear; height: 14px; }
.skeleton .sk-dot { width: 36px; height: 36px; border-radius: 50%; }
.tt-row.skeleton { grid-template-columns: 48px 1.5fr 1.35fr 1fr; }

/* ---------- the log ---------- */
.log { border-top: 2px solid var(--ink); }
.log-row { display: grid; grid-template-columns: 112px 74px 1fr auto 78px 46px; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: var(--border); font-size: 14.5px; }
.log-kind { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.log-kind b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--ink); }
.k-buy .log-kind b { background: var(--water); border-color: transparent; }
.k-sell .log-kind b { background: var(--ink); color: var(--bg); border-color: transparent; }
.k-stop .log-kind b { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.k-payout .log-kind b, .k-claim .log-kind b { border-style: dashed; }
.log-sym { font-size: 13px; color: var(--ink-2); }
.log-sym:hover { color: var(--ink); text-decoration: underline; }
.log-text { color: var(--ink); min-width: 0; }
.log-amt { text-align: right; font-size: 13.5px; white-space: nowrap; }
.log-time { font-size: 12.5px; text-align: right; }
.log-row .tx { font-size: 12px; }
.card .log { border-top: 1px solid var(--line-2); }
.card .log-row { grid-template-columns: 104px 1fr auto 46px; }
.card .log-row .tx { display: none; }
.empty-line { padding: 24px 0; }

/* ---------- home: steps, the house band ---------- */
.steps { grid-template-columns: repeat(4, 1fr); counter-reset: none; }
.step { background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 18px 2px 0; gap: 10px; }
.step-n { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }
.step-art { display: grid; gap: 8px; min-height: 92px; align-content: center; padding: 12px; border: var(--border); border-radius: var(--r); background: var(--surface); }
.step-art.dial { grid-template-columns: auto 1fr; align-items: center; }
.step-art .log-row.mini { grid-template-columns: auto 1fr; border: 0; padding: 0; font-size: 13px; }
.step-art .log-row.mini .mono.muted { grid-column: 2; font-size: 11.5px; }
.step-more { margin-top: 22px; }
.split { border-radius: 4px; border: 1px solid var(--line-2); }
.split span { background: var(--water); color: var(--ink); white-space: nowrap; overflow: hidden; padding: 0 8px; }
.split span.site { background: var(--bg-2); color: var(--ink-2); }
.house { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.house-copy { display: grid; gap: 12px; align-content: start; justify-items: start; }
.house-copy .ca { margin-top: 8px; }
.house-cta { display: grid; gap: 22px; align-content: center; justify-items: start; }
.house-line { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; }

/* ---------- forms: presets, numbers ---------- */
.form-sub { margin-top: 18px; font-size: 15px; }
.presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.preset { display: grid; gap: 8px; text-align: left; padding: 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.preset:hover { border-color: var(--ink-2); }
.preset[aria-checked="true"] { border-color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink); }
.preset-head { display: flex; align-items: center; gap: 10px; }
.preset-head b { font-size: 16px; margin-right: 6px; }
.preset-head .chip { height: 20px; font-size: 11px; padding: 0 6px; }
.preset-text { font-size: 13.5px; color: var(--ink-2); }
.preset-nums { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 2px 8px; font-size: 12.5px; }
.preset-nums dt { color: var(--muted); }
details.custom { margin-top: 14px; }
details.custom summary, details.links summary { cursor: pointer; color: var(--ink-2); font-weight: 500; }
.nums-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.check { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 14.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.preview-box .tt-row { padding: 10px 12px; background: var(--surface); border: var(--border); border-radius: var(--r); }
.preview-box .tide-table { border-top: 0; }
.open-head { margin-top: 18px; }
.open-coins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.open-coin { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; font-size: 14px; }
.open-coin:hover { border-color: var(--ink-2); }
.picked-coin { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: var(--r); background: var(--bg); border: var(--border); }

/* ---------- a maker's page ---------- */
.coin-head { padding-top: 34px; }
.coin-title h1 { font-size: clamp(30px, 4vw, 50px); }
.coin-title .sym { font-size: 0.42em; letter-spacing: 0; vertical-align: middle; font-family: var(--font-mono); font-weight: 400; }
.coin-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; align-items: stretch; }
.dial-card { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.dial-words { display: grid; gap: 8px; align-content: center; }
.big-word { font: var(--display-weight) clamp(28px, 3vw, 38px)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.coin-stats { margin-top: 0; grid-template-columns: repeat(2, 1fr); align-content: stretch; }
.coin-stats .stat { background: var(--surface); }
.coin-stats .stat.up .stat-value { color: var(--good); }
.coin-stats .stat.down .stat-value { color: var(--bad); }
.owner-box:not(:empty) { margin-top: 18px; }
.card.owner { border-color: var(--ink); }
.coin-grid { grid-template-columns: minmax(0, 1fr) 400px; }
.coin-side { display: grid; gap: 18px; }
.chart-line { stroke: var(--ink); stroke-width: 1.6; }
.chart-area { fill: var(--water); opacity: 0.6; }
.mk-buy { fill: var(--water-ink); }
.mk-sell { fill: var(--ink); }
.mk-stop { stroke: var(--bad); stroke-width: 2; fill: none; }
.chart-key { font-size: 12px; color: var(--muted); margin-top: 8px; white-space: pre-wrap; }
.k-buy { color: var(--water-ink); } .k-sell { color: var(--ink); } .k-stop { color: var(--bad); }
.wallet-table { display: grid; font-size: 13.5px; }
.wt-row { display: grid; grid-template-columns: 92px 1fr 64px 84px 62px; gap: 8px; padding: 8px 0; border-bottom: var(--border); align-items: center; }
.wt-row .num { text-align: right; }
.wt-head .label:nth-child(n+3) { text-align: right; }
.wallet-table + .fine { margin-top: 10px; }

/* ---------- how it works ---------- */
.cycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 26px 0 8px; border-block: 3px double var(--line-3); }
.cycle li { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 14px; }
.cycle-note { margin-top: 14px; max-width: 46em; }
.flow-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 24px; }
.flow-node { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); align-self: stretch; }
.flow-node b { font-size: 17px; }
.flow-node p { font-size: 14px; }
.flow-arrows { display: grid; gap: 8px; font-size: 12px; color: var(--ink-2); text-align: center; }
.table-scroll { overflow-x: auto; margin-top: 22px; }
.presets-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); min-width: 640px; }
.presets-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); font-weight: 400; }
.presets-table td { padding: 14px 12px; border-bottom: var(--border); vertical-align: top; }
.presets-table td .chip { margin-left: 8px; height: 20px; font-size: 11px; padding: 0 6px; }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.rules li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); }
.risks { display: grid; gap: 10px; margin: 18px 0; padding-left: 20px; list-style: square; max-width: 48em; }
.faq details { background: transparent; border-radius: 0; border: 0; border-bottom: var(--border); padding: 14px 2px; }
.faq { gap: 0; border-top: 2px solid var(--ink); }
.list-title { margin-bottom: 14px; }
.empty .tide-clock { margin-bottom: 6px; }
.lost { min-height: 52vh; align-content: center; }

/* ---------- footer ---------- */
.foot { grid-template-columns: 1.1fr 1.4fr; gap: 32px; }
.foot-logo { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.foot-logo .brand-mark { width: 34px; height: 34px; }
.foot-logo .brand-word { width: 124px; height: 27px; }
.foot-brand p { max-width: 34em; margin-top: 12px; }
.foot-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.foot-col { display: grid; gap: 8px; align-content: start; font-size: 14.5px; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .top-actions .ca { display: none; }
  .almanac { grid-template-columns: repeat(3, 1fr); }
  .almanac .stat:nth-child(4) { border-left: 0; }
  .almanac .stat:nth-child(n+4) { border-top: var(--border); }
  .tt-row { grid-template-columns: 48px minmax(150px, 1.4fr) minmax(150px, 1.3fr) repeat(3, minmax(70px, 0.7fr)) 44px; }
  .tt-row > :nth-child(5) { display: none; }
  .tide-table.one .tt-row > .num:nth-child(5) { display: block; }
  .coin-grid { grid-template-columns: 1fr; }
  .coin-side { grid-template-columns: 1fr 1fr; align-items: start; }
  .rules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .house { grid-template-columns: 1fr; }
  .coin-top { grid-template-columns: 1fr; }
  .flow-map { grid-template-columns: 1fr; }
  .flow-arrows { grid-auto-flow: column; justify-content: center; gap: 18px; }
  .coin-side { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .tt-row, .tt-row.skeleton { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 2px; }
  .tt-head { display: none; }
  .tt-row > .num { display: none; }
  .tt-row > .num:nth-child(6) { display: block; grid-column: 3; grid-row: 1; }
  .tt-tide { grid-column: 2 / -1; font-size: 13.5px; }
  .tt-clock { grid-row: span 2; }
  .log-row { grid-template-columns: 28px 64px 1fr auto; row-gap: 2px; }
  .log-kind span { display: none; }
  .log-row .tx, .log-time { display: none; }
  .card .log-row { grid-template-columns: 28px 1fr auto; }
  .foot { grid-template-columns: 1fr; }
  #foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .cycle { grid-template-columns: repeat(5, minmax(84px, 1fr)); overflow-x: auto; }
}
@media (max-width: 760px) {
  .hero-stage { grid-template-columns: 1fr; }
  .hero-title { grid-template-columns: 1fr; font-size: clamp(38px, 11vw, 56px); }
  .hero-title .low, .hero-title .high { grid-column: 1; text-align: center; padding: 0; }
  .hero-dial { grid-column: 1; grid-row: 2; margin-top: 18px; }
  .hero-dial .tide-clock { width: min(230px, 70vw) !important; }
  .presets, .nums-grid { grid-template-columns: 1fr; }
  .dial-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .dial-card .tide-clock { width: min(220px, 70vw) !important; height: auto !important; aspect-ratio: 1; }
  .dial-card .facts { text-align: left; }
  .wt-row { grid-template-columns: 1fr 1fr 64px; }
  .wt-row > :nth-child(4), .wt-row > :nth-child(5) { display: none; }
}
@media (max-width: 560px) {
  .section-head { flex-direction: column; align-items: start; gap: 6px; }
  .log-text { font-size: 13.5px; }
  .almanac { grid-template-columns: repeat(2, 1fr); }
  .almanac .stat:nth-child(odd) { border-left: 0; }
  .almanac .stat:nth-child(4) { border-left: var(--border); }
  .almanac .stat:nth-child(n+3) { border-top: var(--border); }
  .steps, .rules { grid-template-columns: 1fr; }
  .foot-links { grid-template-columns: 1fr 1fr; }
  .coin-stats { grid-template-columns: 1fr 1fr; }
  .coin-head { grid-template-columns: auto 1fr; }
  .coin-actions .btn { flex: 1; }
}