/* 1999.LOC - the swap desk's face.
 *
 * A DEALING TERMINAL. Not a Windows program: the amber-on-black screens that
 * quotes arrived on, and the one thing on this site where a number is a price
 * that expires. Rates set in a fixed pitch so the digits line up column to
 * column, which is the entire reason financial screens were monospaced.
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="swap"] .app-window > .tick-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  /* Stated rather than inherited: this sits outside the panels, so it would
     otherwise come out in the page's serif. */
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #000000;
}
[data-app="swap"] .app-window > .tick-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  /* A thumb needs a target. */
  min-height: 26px;
}
[data-app="swap"] .client-title { background: linear-gradient(90deg,#1a1200 0%,#3a2600 60%,#7a5410 100%); color: #ffffff; }

/* ---- the toolbar: the terminal's function keys -------------------- */
[data-app="swap"] .app-window > .tick-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 7px;
  background: #1a1710;
  border-bottom: 1px solid #7a5410;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
[data-app="swap"] .tick-tb {
  min-height: 26px;
  padding: 3px 12px;
  border: 1px solid #7a5410;
  border-radius: 3px;
  background: #2a2214;
  color: #ffcf7a;
  cursor: pointer;
}
[data-app="swap"] .tick-tb:hover:not(:disabled) { background: #362b18; }
[data-app="swap"] .tick-tb:active:not(:disabled) { background: #221b0f; }
[data-app="swap"] .tick-tb:disabled { opacity: 0.4; cursor: default; }
[data-app="swap"] .tick-tb-go { background: #ff9d1c; border-color: #a5650c; color: #201400; font-weight: bold; }
[data-app="swap"] .tick-tb-go:hover:not(:disabled) { background: #ffb347; }
[data-app="swap"] .tick-tb-sep { width: 0; height: 20px; border-left: 1px solid #4a3a1a; margin: 0 2px; }
[data-app="swap"] .tick-tb-spacer { flex: 1 1 auto; }

/* ---- the body ------------------------------------------------------ */
[data-app="swap"] .app-body {
  background: #101010;
  color: #d8d8d8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
/* The gutter, and why it is stated this far down the selector.
 *
 * The shell sets `padding: 0` on an application's body, for the programs that
 * lay themselves out in bands and bring their own spacing. This one does not:
 * it is a form and a board of prose, and with no gutter every line started two
 * pixels off the tube's left edge, which is a wall of text you read with your
 * nose against the glass.
 *
 * A plainer `[data-app="swap"] .app-body` loses to that shell rule, which
 * carries an element plus two classes, and it is why the 8px this used to ask
 * for never appeared. Naming the desk the window actually sits on wins on
 * class count without reaching outside the app, which is the rule this
 * stylesheet is held to. */
[data-app="swap"] .desk-shell .app-window > .app-body {
  padding: 12px 16px 16px 16px;
}
[data-app="swap"] .app-body h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #ff9d1c;
  margin: 12px 0 6px 0;
}
[data-app="swap"] .app-body p,
[data-app="swap"] .app-body label,
[data-app="swap"] .app-body li,
[data-app="swap"] .app-body legend {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #d8d8d8;
}
[data-app="swap"] .app-body .note { color: #8f8f8f; }
[data-app="swap"] .app-body > p,
[data-app="swap"] .app-body > div > p { max-width: 620px; }

/* What to do on this screen. */
[data-app="swap"] .app-body .tick-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px 0;
  padding: 6px 9px;
  background: #ffffe1;
  border: 1px solid #808080;
  color: #000000;
  font-size: 11.5px;
  line-height: 1.45;
  max-width: 820px;
}
[data-app="swap"] .app-body .tick-hint,
[data-app="swap"] .app-body .tick-hint * { color: #000000; }
[data-app="swap"] .app-body .tick-hint > .tick-hint-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff9d1c;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* ---- controls ------------------------------------------------------ */
[data-app="swap"] button:not(.notice-x):not(.menu-title):not(.win-min) {
  border: 2px outset #d4d0c8;
  background: #d4d0c8;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 12px;
  cursor: pointer;
}
[data-app="swap"] button:not(.notice-x):active { border-style: inset; }
[data-app="swap"] select,
[data-app="swap"] input[type="text"],
[data-app="swap"] input[type="number"],
[data-app="swap"] textarea {
  border: 2px inset #d4d0c8;
  background: #0a0a0a;
  color: #000000;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
[data-app="swap"] .dropzone {
  background: #0a0a0a;
  border: 2px inset #d4d0c8;
  color: #000000;
}
[data-app="swap"] fieldset {
  border: 2px groove #ffffff;
  background: #d4d0c8;
  color: #000000;
  margin: 0 0 10px 0;
  padding: 8px 10px;
  max-width: 620px;
}
/* A fieldset is a light tray, even in a program whose chrome is dark, so
   everything inside it goes back to black. Said with .app-body in the
   selector on purpose: the body rule above sets a light ink for the dark
   chrome and is an attribute plus a class plus an element, so a plainer
   `fieldset label` loses to it and the tray comes out grey on grey. */
[data-app="swap"] .app-body fieldset p,
[data-app="swap"] .app-body fieldset label,
[data-app="swap"] .app-body fieldset legend,
[data-app="swap"] .app-body fieldset span,
[data-app="swap"] .app-body fieldset li,
[data-app="swap"] .app-body fieldset .note { color: #000000; }

/* The boxes the tool draws into. */
[data-app="swap"] .notice-box,
[data-app="swap"] .app-body details {
  background: #ffffe1;
  border: 1px solid #808080;
  max-width: 820px;
}
[data-app="swap"] .notice-box *,
[data-app="swap"] .app-body details * { color: #000000; }

/* ---- THE BOARD -----------------------------------------------------
   Amber on black, and every number in a fixed pitch so the digits line
   up down the column. That is not nostalgia: a rate you are comparing
   against another rate has to be readable at a glance, and proportional
   digits make that harder. */
[data-app="swap"] .app-body h3 { letter-spacing: 1px; text-transform: uppercase; font-weight: normal; }
[data-app="swap"] #quotes,
[data-app="swap"] #order-block,
[data-app="swap"] #order-meta {
  background: #0a0a0a;
  border: 1px solid #3a2a10;
  padding: 8px;
  max-width: 820px;
}
[data-app="swap"] #quotes table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  border: 1px solid #3a2a10;
}
[data-app="swap"] #quotes th {
  background: #1a1408;
  color: #ff9d1c;
  border: 1px solid #3a2a10;
  text-align: left;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
}
[data-app="swap"] #quotes td {
  background: #0a0a0a;
  color: #e8e8e8;
  border: 1px solid #241a0a;
  font-family: "Courier New", Courier, monospace;
}
[data-app="swap"] #quotes td.n,
[data-app="swap"] #quotes td.rate { text-align: right; color: #ff9d1c; }
[data-app="swap"] input[type="text"],
[data-app="swap"] select {
  background: #0a0a0a;
  color: #ff9d1c;
  border: 1px solid #3a2a10;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
}
[data-app="swap"] button:not(.notice-x):not(.menu-title):not(.win-min) {
  border: 1px solid #5a4420;
  background: #241a0a;
  color: #ffce7a;
}
[data-app="swap"] button:not(.notice-x):hover:not(:disabled) { background: #322408; }
[data-app="swap"] code { font-family: "Courier New", Courier, monospace; color: #ff9d1c; }
[data-app="swap"] .status { color: #7ad07a; }
[data-app="swap"] .error { color: #ff8a5a; }
[data-app="swap"] a { color: #ffce7a; }

/* ---- THE TICKET ----------------------------------------------------
   What you send and what you get back, as two halves of one trade with
   the direction switch between them, rather than two pickers and an
   amount box that happen to be near each other. */
[data-app="swap"] .tick-ticket { max-width: 620px; margin: 0 0 10px 0; }
[data-app="swap"] .tick-side {
  border: 1px solid #3a2a10;
  background: #0a0a0a;
  padding: 8px 10px 9px 10px;
}
[data-app="swap"] .tick-side-head {
  margin: 0 0 5px 0;
  color: #ff9d1c;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10.5px;
}
[data-app="swap"] .tick-side-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
[data-app="swap"] .tick-side-main input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  padding: 2px 6px;
}
[data-app="swap"] .tick-side-main select { flex: 0 0 auto; min-height: 30px; }
/* The estimate sits where the amount sits on the other half, so the eye
   reads one number against the other. */
[data-app="swap"] .tick-est {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  color: #ff9d1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app="swap"] .app-body .tick-side-foot { margin: 5px 0 0 0; font-size: 10.5px; }
[data-app="swap"] .tick-dest-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0 0;
}
[data-app="swap"] .tick-dest-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
[data-app="swap"] .tick-paste { flex: 0 0 auto; min-height: 28px; }
/* The direction switch, on the seam between the two halves. */
[data-app="swap"] .tick-flip-row { margin: 0; text-align: center; }
[data-app="swap"] .tick-flip-row #flip {
  min-width: 34px;
  min-height: 26px;
  margin: -1px 0;
  position: relative;
  z-index: 1;
  font-size: 14px;
}

/* ---- THE DEPOSIT SCREEN --------------------------------------------
   The one screen where getting it wrong costs money, so the address is
   drawn twice: as a code a phone can scan, and as text in groups the eye
   can check. */
[data-app="swap"] .tick-pay {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 10px 0;
}
[data-app="swap"] .tick-qr {
  flex: 0 0 auto;
  background: #ffffff;
  padding: 6px;
  border: 1px solid #3a2a10;
  line-height: 0;
}
[data-app="swap"] .tick-qr svg { display: block; width: 168px; height: 168px; }
[data-app="swap"] .tick-pay-side { flex: 1 1 260px; min-width: 0; }
[data-app="swap"] .app-body .tick-pay-cap { margin: 0 0 5px 0; }
/* Groups of four, every other one dimmed. Selectable as one run, because
   the text nodes carry no separator: what you copy is the address. */
[data-app="swap"] .tick-addr {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.7;
  color: #ffcf7a;
  word-break: break-all;
  margin: 0 0 8px 0;
  cursor: pointer;
}
[data-app="swap"] .tick-addr .tick-g { padding: 0 1px; }
[data-app="swap"] .tick-addr .tick-g-alt { color: #b98a3e; }
[data-app="swap"] .tick-pay-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
[data-app="swap"] .app-body .tick-warn {
  border-left: 3px solid #ff9d1c;
  padding-left: 9px;
  max-width: 620px;
}

/* ---- THE BLOTTER ---------------------------------------------------
   Every swap started in this tab, the way a desk keeps the day's trades:
   one line each, state first, so a glance answers "did that one land".  */
[data-app="swap"] #swap-list {
  border: 1px solid #3a2a10;
  background: #0a0a0a;
  max-width: 820px;
  margin: 0 0 8px 0;
}
[data-app="swap"] .tick-swap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid #241a0a;
  background: none;
  color: #d8d8d8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  cursor: pointer;
}
[data-app="swap"] .tick-swap:last-child { border-bottom: 0; }
[data-app="swap"] .tick-swap:hover { background: #17120a; }
[data-app="swap"] .tick-swap.is-open { background: #1f1708; }
[data-app="swap"] .tick-swap-pair {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: #ff9d1c;
  flex: 0 0 auto;
}
[data-app="swap"] .tick-swap-amt {
  font-family: "Courier New", Courier, monospace;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app="swap"] .tick-swap-meta { flex: 0 0 auto; color: #8f8f8f; }

/* The state, as a lamp: one word and a dot, the three outcomes coloured
   the way a terminal colours them. */
[data-app="swap"] .tick-stage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 74px;
  padding: 2px 8px;
  border: 1px solid #3a2a10;
  border-radius: 9px;
  background: #140f06;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
[data-app="swap"] .tick-stage::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
[data-app="swap"] .tick-stage.is-live { color: #ffb347; }
[data-app="swap"] .tick-stage.is-done { color: #7ad07a; }
[data-app="swap"] .tick-stage.is-bad { color: #ff8a5a; }
[data-app="swap"] .tick-stage-row { margin: 0 0 8px 0; }

/* ---- THE DETAILS ---------------------------------------------------
   The facts of one trade as a list of pairs rather than a paragraph, so
   the order id is somewhere the eye can land on it. */
[data-app="swap"] #order-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 820px;
}
[data-app="swap"] .tick-fact { display: flex; gap: 10px; align-items: baseline; }
[data-app="swap"] .tick-fact-k {
  flex: 0 0 66px;
  color: #8f8f8f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}
[data-app="swap"] .tick-fact-v { min-width: 0; word-break: break-all; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 700px) {
  /* Same weight as the rule above, or the phone keeps the desktop gutter and
     loses a tenth of a narrow screen to it. */
  [data-app="swap"] .desk-shell .app-window > .app-body { padding: 10px 11px 12px 11px; }
  [data-app="swap"] .app-window > .tick-menu span { padding: 2px 5px; }
}