/*
 * DHM Exchange on Darkroom, the DigitalHeMan design system.
 *
 * darkroom.css (https://digitalheman.com/ds/darkroom/v1/darkroom.css, linked
 * before this file) defines every token and the dr- components. This file is
 * unlayered, so anything here beats Darkroom: it must NEVER set a token
 * Darkroom defines (--color-*, --font-*, --text-*, --space-*, --dr-* …), or
 * it overrides the family system for good. Layout and app-only pieces only.
 * The light theme, which Darkroom does not have yet, is styles/light.css.
 */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--dr-void);
  color: var(--dr-ink);
  font-family: var(--dr-font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Layout ---- */
.wrap { width: 100%; max-width: 48rem; margin-inline: auto; padding-inline: var(--space-2); }
@media (min-width: 48rem) { .wrap { padding-inline: var(--space-6); } }
.page { padding-block: var(--space-4) 0; }
.page > * + * { margin-top: var(--space-3); }
.grid { display: grid; gap: var(--space-3); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Masthead: wordmark left, home currency right ---- */
.masthead { position: sticky; top: 0; z-index: 10; background: var(--dr-void); border-bottom: 1px solid var(--dr-line); }
.masthead__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding-block: var(--space-2); }
.masthead__wordmark { white-space: nowrap; font-size: var(--text-xl); }

/* ---- Headings ---- */
.page-head { display: grid; gap: var(--space-1); }
.page-head__title { padding-top: var(--space-1); }

/* ---- Cards ---- */
.dr-card { min-width: 0; }
.panel, .rate { padding: var(--space-3); }
@media (min-width: 48rem) { .panel, .rate { padding: var(--space-4); } }
.panel > * + *, .rate > * + * { margin-top: var(--space-2); }

.figure { font-family: var(--dr-font-display); font-size: var(--text-3xl); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.figure--secondary { font-size: var(--text-2xl); color: var(--dr-ink-muted); }
.figure .eq { color: var(--dr-ink-faint); }

/* ---- Forms ---- */
label { display: block; font-size: var(--text-sm); color: var(--dr-ink-muted); margin-bottom: 0.25rem; }
.dr-input { width: 100%; }
.dr-input:focus { outline: 2px solid var(--dr-safelight); outline-offset: 0; }
.hint { font-size: var(--text-xs); color: var(--dr-ink-faint); margin-top: 0.25rem; }
.fields { display: grid; gap: var(--space-2); }
@media (min-width: 40rem) { .fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.code { margin-left: 0.3em; color: var(--dr-ink-faint); }

/* ---- Calculator ---- */
.calc__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-items: end; }
@media (min-width: 40rem) { .calc__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.calc .dr-input { font-family: var(--dr-font-display); font-size: var(--text-2xl); min-height: 3.5rem; font-variant-numeric: tabular-nums; }
.calc__clear { min-height: 3.5rem; }
@media (max-width: 39.99rem) { .calc__clear { order: 3; justify-self: start; min-height: 2.75rem; } }

/* Quick amounts: Darkroom buttons, compact, figures in mono so they line up. */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--space-1); }
.chip { min-height: 2.75rem; padding-inline: 0.5rem; font-family: var(--dr-font-mono); font-size: var(--text-sm); font-weight: 400; font-variant-numeric: tabular-nums; }

.settings__actions { display: flex; align-items: center; }
@media (min-width: 40rem) { .settings__actions { padding-top: 1.6rem; align-items: flex-start; } }

/* ---- Notices. Only an error takes the safelight (rule: errors are
   actionable); the others use Darkroom's status colours or a plain line. ---- */
.notice { border: 1px solid var(--dr-line-strong); border-left-width: 3px; padding: var(--space-2); font-size: var(--text-sm); background: var(--dr-ground); }
.notice--ok { border-left-color: var(--dr-positive); }
.notice--warning { border-left-color: var(--dr-warning); background: var(--color-warning-dim); }
.notice--error { border-left-color: var(--dr-danger); background: var(--color-danger-dim); }
.notice--info { border-left-color: var(--dr-ink-muted); }
.footnote { max-width: var(--measure); font-size: var(--text-sm); color: var(--dr-ink-muted); }

/* ---- Home currency, top right of the masthead. The label stays for screen
   readers on a phone, where only the select fits beside the wordmark. ---- */
.home-pick { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.home-pick label { margin: 0; white-space: nowrap; }
.home-pick .dr-input { width: auto; max-width: 15rem; min-height: 2.25rem; padding-inline: 0.5rem; font-size: var(--text-sm); }
@media (max-width: 29.99rem) {
  .home-pick label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ---- Next frame: the page ends somewhere to go ---- */
.dr-next { margin-top: var(--space-8); }