/* ARCIDEX app: what the compiled reference sheet (css/app.css) lacks. Same tokens, same utility names where a
   Tailwind class is missing, plus the parts that are new here: the recipient row, the order drawer, the desk
   console, the globe badge and the loading states. Loaded after app.css. */

/* ---- missing utilities (Tailwind v4 names, values from the theme vars in app.css) ---- */
.bottom-3 { bottom: calc(var(--spacing) * 3); }
.right-0 { right: 0; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.flex-none { flex: none; }
.divide-y > :not(:last-child) { border-bottom: 1px solid var(--border); }
.border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; }
.border-dashed { --tw-border-style: dashed; border-style: dashed; }
.w-2 { width: calc(var(--spacing) * 2); }
.h-2 { height: calc(var(--spacing) * 2); }
.w-1\.5 { width: calc(var(--spacing) * 1.5); }
.h-1\.5 { height: calc(var(--spacing) * 1.5); }
.h-px { height: 1px; }
.h-11 { height: calc(var(--spacing) * 11); }
.w-24 { width: calc(var(--spacing) * 24); }
.w-40 { width: calc(var(--spacing) * 40); }
.max-w-xs { max-width: 20rem; }
.max-w-md { max-width: 28rem; }
.min-w-\[10rem\] { min-width: 10rem; }
.h-\[200px\] { height: 200px; }
.max-h-96 { max-height: calc(var(--spacing) * 96); }
.max-h-\[60vh\] { max-height: 60vh; }
.mt-1 { margin-top: calc(var(--spacing) * 1); }
.mt-3 { margin-top: calc(var(--spacing) * 3); }
.mt-6 { margin-top: calc(var(--spacing) * 6); }
.mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.pl-3 { padding-left: calc(var(--spacing) * 3); }
.pr-2 { padding-right: calc(var(--spacing) * 2); }
.p-2 { padding: calc(var(--spacing) * 2); }
.pb-2 { padding-bottom: calc(var(--spacing) * 2); }
.px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); }
.leading-none { --tw-leading: 1; line-height: 1; }
.leading-snug { --tw-leading: 1.375; line-height: 1.375; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words { overflow-wrap: break-word; }
.bg-accent-buy\/15 { background-color: color-mix(in oklab, var(--accent-buy) 15%, transparent); }
.bg-accent\/15 { background-color: color-mix(in oklab, var(--accent) 15%, transparent); }
.border-accent-buy\/40 { border-color: color-mix(in oklab, var(--accent-buy) 40%, transparent); }
.text-foreground\/70 { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.rounded-t-2xl { border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); }
.translate-y-0 { --tw-translate-y: 0; translate: var(--tw-translate-x) var(--tw-translate-y); }
.duration-200 { --tw-duration: 200ms; transition-duration: 200ms; }
.rotate-180 { rotate: 180deg; }
.\[font-variant-ligatures\:none\] { font-variant-ligatures: none; }
.hover\:border-muted-fg\/70:hover { border-color: color-mix(in oklab, var(--muted-fg) 70%, transparent); }
.hover\:bg-foreground\/\[0\.12\]:hover { background-color: color-mix(in oklab, var(--foreground) 12%, transparent); }
@media (min-width: 40rem) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:w-\[420px\] { width: 420px; }
  .sm\:max-w-\[420px\] { max-width: 420px; }
  .sm\:rounded-xl { border-radius: var(--radius-xl); }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the currencies and desks tables come back at 64rem, where the row is no longer a touch target */
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
}

/* ---- the reference uses the number-flow web component for animated digits; ours is a plain span ---- */
.nf { display: inline-block; font-variant-numeric: tabular-nums; transition: opacity .15s ease; }
.nf[data-pending="1"] { opacity: .55; }

/* ---- touch screens: a 40 px hit area for the header row ----
   The reference sheet sizes the header controls for a mouse (36 px, and a 32 px logo). Up to 64rem the house
   rule asks for 40 px, so the shared header (and the phone page nav, whose classes js/app/shell.js rewrites on
   every wallet change) is grown here instead of in the markup. From 64rem up nothing changes, so the 1440 px
   header stays pixel for pixel the reference's. See docs/requests/tables-to-app.md. */
@media (max-width: 63.999rem) {
  header .h-9 { height: calc(var(--spacing) * 10); }
  header .w-9 { width: calc(var(--spacing) * 10); }
  header a[aria-label="ARCIDEX"] { height: calc(var(--spacing) * 10); width: calc(var(--spacing) * 10); justify-content: center; }
}
nav[data-phone-nav] a { height: calc(var(--spacing) * 10); flex: none; }

/* ---- header: the connected account button and its popover ---- */
.acct-popover { z-index: 50; width: calc(var(--spacing) * 48); border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--background); padding: calc(var(--spacing) * 1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }

/* ---- footer token controls (the site builder's shell-token.js draws the pair; this keeps the row one line) ---- */
footer .tk-controls { margin-left: calc(var(--spacing) * 3); }
@media (max-width: 24rem) { footer .tk-btn { padding: 0 8px; } }

/* ---- swap card: recipient row ---- */
.recipient-input { min-width: 0; flex: 1; background: transparent; outline: none; color: var(--foreground); font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.recipient-input::placeholder { color: var(--muted-fg); }
.recipient-input[aria-invalid="true"] { color: var(--accent-sell); }

/* ---- order drawer: bottom sheet on phones, right panel from 40rem ---- */
.od-overlay { position: fixed; inset: 0; z-index: 60; background: color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.od-panel { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: min(92vh, 100dvh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--background); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .3); }
@media (min-width: 40rem) {
  .od-panel { left: auto; top: 0; bottom: 0; width: min(420px, calc(100vw - 2rem)); max-height: none; border-bottom: 1px solid var(--border); border-right: 0; border-radius: var(--radius-2xl) 0 0 var(--radius-2xl); }
}
.od-body { flex: 1; min-height: 0; overflow-y: auto; }
.od-step { position: relative; padding-left: calc(var(--spacing) * 7); }
.od-step::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: -6px; width: 2px; background: var(--border); }
.od-step:last-child::before { display: none; }
.od-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--border); background: var(--background); }
.od-step[data-state="done"] .od-dot { border-color: var(--accent-buy); background: var(--accent-buy); }
.od-step[data-state="active"] .od-dot { border-color: var(--accent-buy); }
.od-step[data-state="warn"] .od-dot { border-color: var(--accent-sell); }
.od-step[data-state="done"]::before { background: var(--accent-buy); }

/* ---- status pills shared by orders and desks ---- */
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); padding: 2px 6px; font-size: 10px; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: .025em; white-space: nowrap; }
.pill-muted { background: var(--muted); color: var(--muted-fg); }
.pill-buy { background: color-mix(in oklab, var(--accent-buy) 15%, transparent); color: var(--accent-buy); }
.pill-sell { background: color-mix(in oklab, var(--accent-sell) 15%, transparent); color: var(--accent-sell); }
.pill-accent { background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--accent); }
.pill-amber { background: color-mix(in oklab, var(--color-amber-400) 15%, transparent); color: var(--color-amber-400); }

/* ---- desk console ---- */
.dk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dk-label { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--muted-fg); }
.dk-input, .dk-select { width: 100%; min-width: 0; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); padding: 0 10px; font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: var(--text-sm); outline: none; }
.dk-select { font-family: var(--font-geist-sans), system-ui, sans-serif; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 30px; }
.dk-input:focus, .dk-select:focus { border-color: var(--accent); }
.dk-input[aria-invalid="true"] { border-color: var(--accent-sell); }
.dk-input::placeholder { color: var(--muted-fg); }
.dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: color .15s, border-color .15s, background-color .15s; }
.dk-btn:hover { border-color: var(--accent); color: var(--accent); }
.dk-btn-buy { border-color: var(--accent-buy); background: var(--accent-buy); color: var(--background); }
.dk-btn-buy:hover { border-color: var(--accent-buy-hover); background: var(--accent-buy-hover); color: var(--background); }
.dk-btn-sell { border-color: color-mix(in oklab, var(--accent-sell) 40%, transparent); color: var(--accent-sell); }
.dk-btn-sell:hover { border-color: var(--accent-sell); color: var(--accent-sell); }
.dk-btn:disabled, .dk-btn[aria-disabled="true"] { cursor: not-allowed; border-color: var(--border); background: var(--muted); color: var(--muted-fg); }
.dk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.dk-row:last-child { border-bottom: 0; }
.dk-row > :last-child { text-align: right; }

/* ---- globe panel extras ---- */
.globe-badge { position: absolute; left: calc(var(--spacing) * 3); bottom: calc(var(--spacing) * 3); z-index: 20; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--muted-fg); font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.globe-host { position: relative; width: 100%; }
.globe-host canvas { display: block; touch-action: none; }
.globe-fallback { display: flex; height: 320px; width: 100%; align-items: center; justify-content: center; padding: 16px; text-align: center; color: var(--muted-fg); font-size: var(--text-sm); }

/* ---- loading and empty states ---- */
.skel { display: inline-block; min-width: 3ch; border-radius: 4px; background: var(--muted); color: transparent; animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .skel, .spin { animation: none; } }

/* ---- long addresses never push a row wider than the viewport ---- */
.addr { font-family: var(--font-geist-mono), ui-monospace, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---- the reference's copy tooltip: a small "Copied" tag next to the icon ---- */
[data-copied]::after { content: "Copied"; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); font-size: 10px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.copy-anchor { position: relative; }