/* The Send Farms district panels (js/screens/farms-panels.js + js/screens/farms/).
   House rules: every font-size is max(var(--text-floor), …); controls keep the
   kit's near-black-on-light fills; nothing here may cause sideways scroll at 375 px. */

.fx-small { font-size: max(var(--text-floor), 0.82rem); }
.fx-sub { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; color: var(--gold); font-size: max(var(--text-floor), 1.05rem); margin: 0.6rem 0 0.1rem; }
.fx-result:empty { display: none; }
.fx-result { margin-top: 0.6rem; overflow-wrap: anywhere; }
.fx-chips { gap: 0.35rem; }
.fx-check { font-weight: 700; color: var(--text-dim); font-size: max(var(--text-floor), 0.88rem); cursor: pointer; }
.fx-check input { width: 22px; min-height: 22px; height: 22px; accent-color: var(--green); }

/* key/value lines */
.fx-kv { display: grid; gap: 0.25rem; }
.fx-kv > div { display: flex; justify-content: space-between; gap: 0.8rem; border-bottom: 1px dashed var(--ink-4); padding: 0.15rem 0; font-size: max(var(--text-floor), 0.9rem); }
.fx-kv span { color: var(--text-dim); }
.fx-kv b { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }

/* swap quote */
.fx-quote { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; border-radius: var(--r-3); background: var(--glass-well); border: 1px solid var(--g-edge); }
.fx-qbig { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.fx-qbig span { color: var(--text-dim); font-weight: 700; }
.fx-qbig b { font-family: var(--font-disp); font-weight: 400; color: var(--green-bright); font-size: max(var(--text-floor), 1.5rem); letter-spacing: 0.02em; overflow-wrap: anywhere; }

/* the x·y=k curve */
.fx-kcurve { width: 100%; max-width: 340px; height: auto; display: block; margin: 0.4rem auto 0; }
.fx-kline { fill: none; stroke: var(--green); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--glow-g)); }
.fx-know { fill: var(--green-bright); stroke: var(--ink-1); stroke-width: 2; }
.fx-kafter { fill: var(--gold); stroke: var(--ink-1); stroke-width: 2; opacity: 0.9; }
.fx-kaxes { fill: none; stroke: var(--ink-5); stroke-width: 1.5; }
.fx-kmove { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; }
.fx-kfig { display: grid; gap: 0.3rem; justify-items: center; margin: 0; }
.fx-kfig .legend { justify-content: center; }
.chip.fx-chip { white-space: normal; text-align: left; max-width: 100%; }

/* oracle ring */
.fx-ring { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 420px; }
.fx-slot { aspect-ratio: 1; border-radius: 5px; background: var(--ink-3); border: 1px solid var(--ink-5); }
.fx-slot.on { background: var(--green); border-color: var(--green-bright); box-shadow: 0 0 6px var(--glow-g); }
.fx-slot.bypass { background: var(--gold-deep); border-color: var(--gold); }
.fx-slot.newest { animation: fx-pulse 1.6s ease-in-out infinite; }
@keyframes fx-pulse { 50% { transform: scale(1.18); } }
.fx-obs { display: grid; gap: 0.25rem; font-size: max(var(--text-floor), 0.88rem); }

/* fee split */
.fx-split { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--ink-4); border: 1px solid var(--hair); }
.fx-split i { display: block; height: 100%; }
.fx-split .s1, .fx-l1 { background: var(--green-bright); }
.fx-split .s2, .fx-l2 { background: var(--diamond); }
.fx-split .s3, .fx-l3 { background: var(--gold); }

/* big progress (sale curve, quorum, pots) */
.fx-progress { display: grid; gap: 0.3rem; }
.fx-progress .bar { height: 16px; }
.fx-progress .row { font-size: max(var(--text-floor), 0.88rem); }

/* list rows (proposals, bounties, sales, loans) */
.fx-list { display: grid; gap: 0.6rem; }
.fx-item { padding: 0.8rem 0.9rem; border-radius: var(--r-3); background: var(--glass-well); border: 1px solid var(--hair); display: grid; gap: 0.5rem; min-width: 0; }
.fx-item.sel { border-color: var(--g-lit); box-shadow: 0 0 0 1px var(--g-edge), 0 0 18px var(--g-tint); }
.fx-item h4 { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.02em; font-size: max(var(--text-floor), 1.08rem); color: var(--text); overflow-wrap: anywhere; }
.fx-item p { overflow-wrap: anywhere; }
.fx-votes { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem; align-items: center; font-size: max(var(--text-floor), 0.85rem); }

/* referral web */
.fx-web { display: grid; gap: 0.6rem; }
.fx-branch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.55rem 0.7rem; border-radius: var(--r-2); background: var(--glass-well); border: 1px solid var(--hair); }
.fx-branch .arrow { color: var(--green-bright); font-weight: 900; }

/* NFT cards */
.fx-nfts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 0.6rem; }
.fx-nft { display: grid; gap: 0.35rem; padding: 0.5rem; border-radius: var(--r-3); background: var(--glass-well); border: 1px solid var(--hair); min-width: 0; }
.fx-nft .name { font-weight: 800; font-size: max(var(--text-floor), 0.85rem); overflow-wrap: anywhere; }
.fx-nftimg { width: 100%; aspect-ratio: 400 / 560; object-fit: cover; border-radius: var(--r-2); background: var(--ink-2); display: block; }
.fx-nftph { width: 100%; aspect-ratio: 400 / 560; border-radius: var(--r-2); background: radial-gradient(60% 50% at 50% 40%, var(--g-tint), transparent 70%), var(--ink-2); display: grid; place-items: center; font-size: max(var(--text-floor), 2.6rem); }
.fx-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 0.5rem; }
.fx-pickitem { display: grid; gap: 0.25rem; padding: 0.4rem; border-radius: var(--r-2); background: var(--ink-2); border: 1.5px solid var(--ink-5); cursor: pointer; position: relative; }
.fx-pickitem:has(input:checked) { border-color: var(--green-bright); box-shadow: 0 0 12px var(--g-tint); }
.fx-pickitem input { position: absolute; top: 0.5rem; left: 0.5rem; width: 22px; height: 22px; min-height: 22px; accent-color: var(--green); }
.fx-pickimg { width: 100%; aspect-ratio: 400 / 560; object-fit: cover; border-radius: 8px; display: block; }
.fx-pickname { font-size: max(var(--text-floor), 0.78rem); font-weight: 700; overflow-wrap: anywhere; }

/* NFT pool price ladder */
.fx-steps { display: grid; gap: 0.3rem; }
.fx-step { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.5rem; align-items: center; font-size: max(var(--text-floor), 0.85rem); }
.fx-step .bar { height: 12px; }
.fx-step.spot { font-weight: 900; color: var(--gold); }

/* lock ladder rungs */
.fx-rungs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)); gap: 0.4rem; }
.fx-rung { display: grid; gap: 0.1rem; justify-items: center; padding: 0.5rem 0.3rem; border-radius: var(--r-2); background: var(--ctl-fill-lo); color: var(--ctl-ink); border: 1.5px solid var(--ctl-fill-lo); cursor: pointer; font-weight: 800; font-size: max(var(--text-floor), 0.85rem); min-height: 44px; }
.fx-rung b { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 1.1rem); }
.fx-rung[aria-pressed="true"] { background: var(--green-bright); border-color: var(--green-bright); box-shadow: 0 0 14px var(--glow-g); }

/* premium day calendar */
.fx-cal { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 420px; }
.fx-day { aspect-ratio: 1; border-radius: 5px; background: var(--ink-3); border: 1px solid var(--ink-5); }
.fx-day.on { background: var(--gold); border-color: var(--gold-deep); box-shadow: 0 0 6px var(--glow-o); }
.fx-day.today { outline: 2px solid var(--green-bright); outline-offset: 1px; }

/* token card binder (uri) */
.fx-binder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 0.7rem; }
.fx-binder button.fx-nft { cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.fx-binder button.fx-nft:hover { border-color: var(--g-lit); }
.fx-cardview { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 640px) { .fx-cardview { grid-template-columns: 1fr; } }
.fx-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 0.4rem; }
.fx-attr { padding: 0.4rem 0.55rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--ink-4); min-width: 0; }
.fx-attr .k { color: var(--text-mute); font-size: max(var(--text-floor), 0.7rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.fx-attr .v { font-weight: 800; overflow-wrap: anywhere; font-size: max(var(--text-floor), 0.9rem); }
.fx-raw { font-family: var(--mono); font-size: max(var(--text-floor), 0.75rem); background: var(--ink-1); border: 1px solid var(--ink-4); border-radius: 10px; padding: 0.5rem; max-height: 180px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }

/* milestones builder */
.fx-ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.4rem; align-items: end; }
@media (max-width: 520px) { .fx-ms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* allowlist builder */
.fx-allow { display: grid; gap: 0.35rem; }
.fx-allow label { display: grid; grid-template-columns: auto 1fr 5rem; gap: 0.5rem; align-items: center; font-weight: 700; }
.fx-allow input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; accent-color: var(--green); }

textarea.fx-text { min-height: 84px; resize: vertical; }
.fx-nft.sel { border-color: var(--green-bright); box-shadow: 0 0 0 1px var(--g-edge), 0 0 18px var(--g-tint); }
.fx-break { overflow-wrap: anywhere; }