/*
 * psy-app.css: what the app pages need on top of css/app.css (the source's compiled sheet, left as it is).
 * Everything is drawn from the source's own tokens (--text-brand, --solid-white-card-2, --border-light-line-1 ...),
 * so the light and dark themes follow without a second set of rules.
 */

/* ---- wordmark, skip link, small controls ---- */
.psy-word {
  font-family: var(--font-geist-sans, Geist), Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.psy-skip { position: absolute; left: 8px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--button-brand); color: var(--text-white, #fff); font-size: 12px; font-weight: 600; transition: top 0.15s ease; }
.psy-skip:focus { top: 8px; }
.psy-icon-btn { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 0.5rem; border: 1px solid var(--border-light-line-1); transition: border-color 0.15s ease; }
.psy-icon-btn:hover { border-color: var(--border-brand, var(--button-brand)); }
[hidden] { display: none !important; }
button:not(:disabled), [role='checkbox'], summary { cursor: pointer; }

/* ---- veils, the notice, the wallet chooser, the menu sheet ---- */
.psy-veil, [data-notice-veil] { opacity: 0; transition: opacity 0.2s ease; }
.psy-veil[data-state='open'], [data-notice-veil][data-state='open'] { opacity: 1; }
/* the source centres its dialog with the translate property (Tailwind 4), so only opacity and scale move here */
[data-notice], .psy-dialog { opacity: 0; scale: 0.95; transition: opacity 0.2s ease, scale 0.2s ease; }
[data-notice][data-state='open'], .psy-dialog[data-state='open'] { opacity: 1; scale: 1; }
.psy-dialog { gap: 1.25rem; }
.psy-sheet { top: 0; right: 0; bottom: 0; width: 82%; max-width: 22rem; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: -16px 0 40px rgba(0, 0, 0, 0.12); }
.psy-sheet[data-state='open'] { transform: none; }
.psy-sheet [aria-current='page'] { color: var(--text-brand); background: var(--solid-hint); }
@media (min-width: 1024px) { .psy-sheet, [data-menu-veil] { display: none !important; } }
html.psy-locked, html.psy-locked body { overflow: hidden; }

.psy-wallet-row { display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; border: 1px solid var(--border-light-line-1); background: var(--solid-white-card-2); color: var(--text-black); font-size: 14px; font-weight: 600; line-height: 1rem; text-align: left; transition: border-color 0.15s ease, transform 0.15s ease; }
.psy-wallet-row:hover { border-color: var(--border-brand, var(--button-brand)); transform: translateY(-1px); }
.psy-wallet-row img, .psy-wallet-row .psy-wallet-ph { width: 2rem; height: 2rem; border-radius: 0.5rem; flex-shrink: 0; }
.psy-wallet-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--solid-hint); color: var(--text-brand); }
.psy-wallet-row small { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-main-body); }

/* account popover under the wallet button */
.psy-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 13rem; padding: 0.375rem; border-radius: 0.75rem; border: 1px solid var(--border-light-line-1); background: var(--solid-white-card-2); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); }
.psy-pop button, .psy-pop a { display: flex; width: 100%; align-items: center; height: 2.25rem; padding: 0 0.625rem; border-radius: 0.5rem; font-size: 12px; font-weight: 600; color: var(--text-black); text-align: left; }
.psy-pop button:hover, .psy-pop a:hover { background: var(--solid-hint); }
.psy-pop p { padding: 0.375rem 0.625rem 0.5rem; font-size: 11px; line-height: 1rem; color: var(--text-main-body); }

/* ---- toasts ---- */
.psy-toasts { position: fixed; z-index: 70; right: 16px; bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.psy-toast { pointer-events: auto; max-width: 24rem; padding: 0.75rem 0.875rem; border-radius: 0.75rem; border: 1px solid var(--border-light-line-1); background: var(--solid-white-card-2); color: var(--text-black); font-size: 12px; line-height: 1.125rem; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14); animation: psy-toast-in 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.psy-toast[data-kind='ok'] { border-color: var(--button-brand); }
.psy-toast[data-kind='bad'] { border-color: #d9534f; }
.psy-toast a { text-decoration: underline; text-underline-offset: 2px; }
.psy-toast b { display: block; font-weight: 600; margin-bottom: 2px; }
@keyframes psy-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- market cards: depth bars behind the logo ---- */
.psy-cover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 0 14% 0; opacity: 0.9; }
.psy-cover i { flex: 1; min-width: 3px; max-width: 12px; height: var(--h, 4%); border-radius: 4px 4px 0 0; background: var(--border-light-line-1); transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; }
.psy-cover i[data-on] { background: var(--button-brand); opacity: 0.55; }
.psy-cover-logo { position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 9999px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 6px var(--solid-white-card-2); }
@media (min-width: 768px) { .psy-cover-logo { width: 104px; height: 104px; } }
[data-f='pill'][data-tone='live'] { border-color: var(--text-brand); color: var(--text-brand); background: color-mix(in srgb, var(--text-brand) 10%, transparent); }
[data-f='pill'][data-tone='live'] [data-f='pill-dot'] { background: var(--text-brand); }

/* ---- stock hero art ---- */
.psy-art { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .psy-art { width: 340px; height: 340px; } }
.psy-ring { position: absolute; border-radius: 9999px; border: 1px solid var(--border-light-line-2, var(--border-light-line-1)); }
.psy-ring-1 { inset: 22%; border-color: var(--button-brand); opacity: 0.55; }
.psy-ring-2 { inset: 11%; border-style: dashed; animation: psy-spin 60s linear infinite; }
.psy-ring-3 { inset: 0; opacity: 0.6; }
.psy-art-logo { position: relative; width: 42%; height: 42%; border-radius: 9999px; object-fit: cover; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16), 0 0 0 8px var(--solid-white-card-2); }
@keyframes psy-spin { to { transform: rotate(360deg); } }

/* ---- the liquidity book ---- */
.psy-depth { position: relative; display: flex; align-items: center; height: 28px; border-radius: 6px; background: var(--solid-hint); overflow: hidden; }
.psy-depth-bar { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: color-mix(in srgb, var(--button-brand) 38%, transparent); border-radius: 6px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.psy-depth-text { position: relative; padding: 0 8px; font-variant-numeric: tabular-nums; }
[data-row][data-best] [data-b='level'] { color: var(--text-brand); }
[data-row][data-hit] .psy-depth-bar { background: color-mix(in srgb, var(--button-brand) 70%, transparent); }
[data-k], [data-q], [data-o], [data-p], [data-f='mark'], [data-b], [data-r] { font-variant-numeric: tabular-nums; }

/* ---- FAQ ---- */
.psy-faq-sign { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.psy-faq-sign::before, .psy-faq-sign::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease; }
.psy-faq-sign::after { transform: rotate(90deg); }
[aria-expanded='true'] > .psy-faq-sign::after { transform: rotate(0deg); }
.no-js .psy-faq-panel[hidden] { display: block !important; }

/* ---- sell: coin glyph, range, picker ---- */
.psy-coin { display: inline-flex; align-items: center; justify-content: center; background: #0d1614; color: #e7c75c; }
.psy-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.psy-range::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(to right, var(--button-brand) var(--fill, 20%), var(--solid-hint) var(--fill, 20%)); }
.psy-range::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--solid-hint); }
.psy-range::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--button-brand); }
.psy-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 9999px; background: var(--solid-white-card-2); border: 2px solid var(--button-brand); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.psy-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 9999px; background: var(--solid-white-card-2); border: 2px solid var(--button-brand); }
.psy-range:focus-visible { outline: 2px solid var(--button-brand); outline-offset: 4px; border-radius: 8px; }
.psy-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border-light-line-1); background: var(--button-white, var(--solid-white-card-2)); color: var(--text-black); font-size: 12px; line-height: 1rem; transition: border-color 0.15s ease; }
.psy-chip:hover, .psy-chip[aria-pressed='true'] { border-color: var(--border-brand, var(--button-brand)); color: var(--text-brand); }
.psy-list { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: 16rem; max-height: 19rem; overflow-y: auto; padding: 0.375rem; border-radius: 0.75rem; border: 1px solid var(--border-light-line-1); background: var(--solid-white-card-2); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14); }
.psy-list button { display: flex; width: 100%; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 0.5rem; border-radius: 0.5rem; font-size: 13px; color: var(--text-black); text-align: left; }
.psy-list button:hover, .psy-list button[aria-selected='true'] { background: var(--solid-hint); }
.psy-list img { width: 1.75rem; height: 1.75rem; border-radius: 9999px; }
.psy-list small { margin-left: auto; font-size: 11px; color: var(--text-main-body); font-variant-numeric: tabular-nums; }

/* ---- portfolio rows ---- */
.psy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-light-line-1); font-size: 12px; line-height: 1rem; color: var(--text-black); }
.psy-row:last-child { border-bottom: 0; }
.psy-row .psy-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.psy-row .psy-cell[data-label]::before { content: attr(data-label); width: 84px; flex-shrink: 0; color: var(--text-main-body); }
.psy-row .psy-cell:first-child { grid-column: 1 / -1; font-weight: 600; }
.psy-row .psy-cell:first-child::before { display: none; }
.psy-row .psy-cell img { width: 28px; height: 28px; border-radius: 9999px; }
.psy-row .psy-cell[data-act] { grid-column: 1 / -1; justify-content: flex-end; }
.psy-row .psy-cell[data-act]::before { display: none; }
@media (min-width: 640px) {
  .psy-row { display: flex; justify-content: space-between; gap: 0; padding: 12px 16px; }
  .psy-row .psy-cell[data-label]::before { display: none; }
  .psy-row .psy-cell[data-act] { justify-content: flex-end; }
}
.psy-linkbtn { color: var(--text-brand); font-weight: 600; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.psy-linkbtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- checkbox state, busy buttons ---- */
[data-check] svg .psy-tick { opacity: 0; transition: opacity 0.12s ease; }
[data-check][aria-checked='true'] svg .psy-tick { opacity: 1; }
[data-check][aria-checked='true'] svg path:first-child { fill: var(--button-brand); stroke: var(--button-brand); }
[data-check] { color: var(--text-main-body); border-radius: 4px; }
[data-check]:focus-visible { outline: 2px solid var(--button-brand); outline-offset: 2px; }
[data-busy='true'] { position: relative; color: transparent !important; pointer-events: none; }
[data-busy='true']::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 9999px; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; animation: psy-spin 0.7s linear infinite; }
.psy-warn { color: #b3261e; }
.dark .psy-warn { color: #ff8a80; }

@media (prefers-reduced-motion: reduce) {
  .psy-ring-2, [data-busy='true']::after { animation: none; }
  .psy-sheet, .psy-veil, [data-notice], .psy-dialog, .psy-depth-bar, .psy-cover i { transition: none; }
}

/* ---- utilities the compiled sheet does not carry (the source never used them) ---- */
.ml-3 { margin-left: 0.75rem; }
.w-9 { width: 2.25rem; }
.w-\[64px\] { width: 64px; }
.w-\[72px\] { width: 72px; }
.w-\[88px\] { width: 88px; }
.w-\[96px\] { width: 96px; }
.max-w-\[900px\] { max-width: 900px; }
.tracking-\[1px\] { letter-spacing: 1px; }
.first\:border-t-0:first-child { border-top-width: 0; }
.first\:pt-0:first-child { padding-top: 0; }
.hover\:bg-solid-hint:hover { background-color: var(--solid-hint); }
@media (min-width: 768px) { .md\:ml-5 { margin-left: 1.25rem; } }

/* ---- tablet: the source's 380 px hero art and 400 px panel leave the text column too little room at 768 to 1023 ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-s='art'] { width: 250px !important; height: 250px !important; }
  .psy-art { width: 230px; height: 230px; }
  [data-buy] { width: 340px !important; }
  h1:has([data-s='symbol']) > span { font-size: 50px; }
  section:has(> div > [data-s='art']) > div { gap: 1.5rem; }
}

/* ======================================================================================================================
 * Contrast. The source writes gold on near-white (1.5:1) and white on gold (1.65:1). Here text always clears 4.5:1:
 *   light  gold text #7d620c (5.4:1 on the page), body #41675a (5.9:1), both still read as the brand's gold and green
 *   dark   gold text #e7c75c (9.5:1) and body #c0d6ce (10:1) are the source's own and already pass
 *   fills  a gold button carries near-black text (11:1) in both themes
 * and every card, field and pill gets a hairline so it has an edge against the page in either theme.
 * ==================================================================================================================== */
.light {
  --text-brand: #7d620c;
  --border-brand: #a8861a;
  --icon-brand: #7d620c;
  --text-main-body: #41675a;
  --icon-grey: #41675a;
  --psy-outline: #cfdeda;
  --psy-outline-strong: #a9c2bb;
}
.dark {
  --border-light-line-1: #2f6152;
  --psy-outline: #2f6152;
  --psy-outline-strong: #3f7a68;
}
/* gold fills: near-black text instead of white */
.bg-button-brand, .bg-button-brand.text-text-white, .bg-button-brand .text-text-white,
.bg-solid-brand, .bg-solid-brand.text-text-white, .psy-skip { color: #0d1614 !important; }
.bg-button-brand:disabled { color: rgba(13, 22, 20, 0.72) !important; }
[data-busy='true']::after { border-color: rgba(13, 22, 20, 0.35); border-top-color: #0d1614; }
.psy-linkbtn[data-busy='true']::after { border-color: color-mix(in srgb, var(--text-brand) 35%, transparent); border-top-color: var(--text-brand); }

/* edges: cards, the header, fields, pills */
main [class*='bg-solid-white-card-2'][class*='rounded'],
main [class*='bg-solid-market-open-card'],
.psy-dialog, [data-notice] { outline: 1px solid var(--psy-outline); outline-offset: -1px; }
main [class*='bg-solid-hint'][class*='rounded'] { outline: 1px solid var(--psy-outline); outline-offset: -1px; }
header.sticky { border-bottom-color: var(--psy-outline); }
.bg-solid-input-box, [class*='group/input-group'] { border-color: var(--psy-outline-strong) !important; }
.bg-solid-input-box:focus-within, [class*='group/input-group']:focus-within { border-color: var(--border-brand) !important; }
.psy-depth { outline: 1px solid var(--psy-outline); outline-offset: -1px; }
.psy-cover-logo, .psy-art-logo { outline: 1px solid var(--psy-outline-strong); outline-offset: 0; }
.psy-chip, .psy-icon-btn, .psy-wallet-row, .psy-pop, .psy-list, .psy-toast { border-color: var(--psy-outline-strong); }
.psy-row { border-bottom-color: var(--psy-outline); }
/* the notice mark sat gold on a pale disc: near-black behind it */
[data-notice] .bg-secondary-4 { background-color: #0d1614; }
/* keyboard focus is an outline too, and it has to win over the hairlines above */
main a:focus-visible, main button:focus-visible, header a:focus-visible, header button:focus-visible,
.psy-sheet a:focus-visible, .psy-sheet button:focus-visible, .psy-dialog button:focus-visible {
  outline: 2px solid var(--border-brand) !important; outline-offset: 2px !important; border-radius: 8px;
}
/* display gold: a hair of darker gold around the big words keeps their edges crisp on either ground */
h1 .text-text-brand { -webkit-text-stroke: 0.5px color-mix(in srgb, var(--text-brand) 70%, #000); paint-order: stroke fill; }