/* ============================================================
   XC_Tracker_v1.css — Rate/Tracker and Rate/ConfirmSubmit

   Additive, like XC_Auth_v1.css: it redefines no token and no
   .btn. It sits on top of

       XC_Home_v4.css   tokens, .btn, .section, masthead, footer
       XC_Auth_v1.css   the field system -- .afield, .arow, .ahint,
                        .acheck, .btn-wide, .btn.is-busy, and the
                        styled jquery.validate class contract

   and adds only the one thing neither of those has: the watchlist.

   THESIS. A rate tracker is not a form you fill in, it is a
   standing instruction you leave behind. So the currencies being
   watched are a ruled ledger of instructions -- numbered, hairline
   separated, each one restating itself in a plain English sentence
   underneath -- rather than the three floating cards the legacy
   page drew. No cards as a structural device; that rule is the
   house's, and a card per field was the old page's worst habit.

   COLOUR LOGIC. Blue is structure and brand. Amber is the value
   the customer sets -- the target, and only the target, carries it,
   because that is the single number this page exists to capture.
   Green and red are reserved for the distance between today's rate
   and that target, which is the one place on the page where up and
   down mean something.
   ============================================================ */

/* ============================================================
   PAGE SHELL
   ============================================================ */

/* The page is a reading column, not a full-bleed sheet. 74ch is the
   auth surface's measure; the watchlist needs more room than that, so
   the column is wider but still bounded -- a 1240px-wide row of four
   fields reads as a spreadsheet.

   The measure belongs to the section rather than to the form. Bounding
   only the form left the head rule running the full 1240px grid above a
   980px form parked against the left edge, with the difference banked as
   dead space on the right. Now the rule, the panels and the receipt share
   one width and the whole column is centred. */
.tracker-page.wrap { width: min(980px, 100% - 3rem); }
.tracker-form { max-width: none; }

/* ============================================================
   THE TWO PANELS

   Same construction as .chart-panel on the home page -- surface
   sheet, hairline border, one radius, a head band ruled off the
   body -- so the tracker reads as the same family of object rather
   than a page that invented its own. The house rule against cards
   is about not floating a card per field, which is exactly what the
   legacy page did; two panels for the page's two asks is the
   opposite move, and it is the pattern already in the system.

   The lift is a hairline, not a drop shadow: on the #F1F2F9 ground
   a white sheet already stands off the page, and a real shadow at
   this size reads as a widget rather than a document.
   ============================================================ */
.tk-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(0, 10, 77, .045);
}
.tk-block + .tk-block { margin-top: 1.6rem; }

/* ---- the head band ----------------------------------------
   Tinted, so the panel has a top to it and the eye finds the two
   steps at a glance from anywhere on the page. */
.tk-block-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 1.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
.tk-block-head h2 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

/* the panel mark. An eye for what we are watching, an envelope for
   where the alert goes -- not 01 and 02, because the row gutter already
   numbers the currencies and two counters in one panel is one too many.
   A white chip on the tinted band, so it reads as a tab on the panel
   rather than a button someone forgot to wire up. */
.tk-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--r) - 1px);
  color: var(--brand);
}
.tk-ico svg { width: 16px; height: 16px; }

.tk-block-note {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---- the body ---------------------------------------------
   Block 02's fields are inset from the panel edge. Block 01's rows
   are not: a ledger's rules run the full width of the page they are
   ruled on, and stopping them short would turn each row back into
   the card this design is arguing against. */
.tk-body { padding: 1.6rem 1.5rem; }

/* ---- the footer strip -------------------------------------
   Both panels end in a strip on the ground tone: the watchlist's
   is where another currency gets added, block 02's is where the
   terms are accepted. Same shelf, same job -- the last thing in the
   panel before you move on. */
.tk-block > .wl-add,
.tk-block > .tk-terms {
  padding: 1rem 1.5rem;
  background: var(--ground);
  border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);
}

/* ============================================================
   THE WATCHLIST
   One standing instruction per row.
   ============================================================ */
.wl { display: grid; }

.wl-row {
  display: grid;
  /* currency | today | target | until — the reading order of the
     sentence the row restates underneath */
  grid-template-columns:
    minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.15rem;
  align-items: start;
  position: relative;
  padding: 1.5rem 3.2rem 1.5rem 3.6rem;
  border-top: 1px solid var(--line);
}
.wl-row:first-of-type { border-top: 0; }

/* the row index, set in the gutter so it never competes with a label */
.wl-no {
  position: absolute;
  top: 1.95rem;
  left: 1.5rem;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--line-strong);
}

/* ---- today's rate, read-only ------------------------------
   Not a field: nothing here is editable, so it must not wear a
   field's recess. It is a printed figure with a rule under it,
   sitting at the same height as the inputs beside it. */
.wl-live { display: grid; align-content: start; gap: .45rem; min-width: 0; }
.wl-live-val {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .82rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wl-live-val .wl-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 0 0 1px var(--line);
  flex: 0 0 auto;
}
.wl-live-val .wl-code { color: var(--muted); font-weight: 500; }

/* the target field is the one amber thing in the row */
.wl-target input[type="number"] {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-color: color-mix(in srgb, var(--accent-fill) 62%, var(--line-strong));
  background:
    linear-gradient(var(--accent-wash), var(--accent-wash)),
    var(--surface);
}
.wl-target input[type="number"]:hover:not(:focus) {
  border-color: var(--accent-fill);
}
.wl-target input[type="number"]:focus {
  border-color: var(--accent-fill);
  box-shadow:
    0 0 0 3.5px color-mix(in srgb, var(--accent-fill) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
.wl-target:focus-within > label { color: var(--accent); }

/* the spinners belong to no design system, and the field is already
   the widest thing it needs to be */
.wl-target input[type="number"]::-webkit-outer-spin-button,
.wl-target input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wl-target input[type="number"] { -moz-appearance: textfield; }

/* ============================================================
   THE CURRENCY PICKER
   A searchable list with a flag against every currency, built
   over the row's real <select>. select2 drew this before; these
   rules are what it looked like, in this system's tokens.

   The button wears exactly the field recess XC_Auth_v1.css gives
   an <input>, because it is the same kind of control and must not
   read as a different one.
   ============================================================ */
.wl-select.is-enhanced {
  /* still posts, still holds the value, no longer drawn or reachable */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.xcombo { position: relative; }

/* the label lights up with the control it belongs to, as .afield does */
.wl-cur:focus-within > label,
.wl-cur:has(.xcombo.is-open) > label { color: var(--brand); }

.xcombo-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: .7rem .85rem;
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  /* the same recess a field has at rest, because it is a field */
  box-shadow: inset 0 1px 2px rgba(0, 10, 77, .045);
  transition: border-color .16s ease, box-shadow .18s ease, background-color .16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.xcombo-btn:hover {
  border-color: var(--muted);
  box-shadow: inset 0 1px 2px rgba(0, 10, 77, .06);
}

/* the same three signals .afield input:focus gets, so the picker and the
   fields beside it cannot look like different kinds of control */
.xcombo-btn:focus-visible,
.xcombo.is-open .xcombo-btn {
  outline: none;
  border-color: var(--brand);
  box-shadow:
    0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent),
    0 2px 8px -3px color-mix(in srgb, var(--brand) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}

.xcombo-val {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.xcombo-caret {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform .16s ease;
}
.xcombo.is-open .xcombo-caret { transform: rotate(180deg); }

.xcombo-flag {
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 0 0 1px var(--line);
}

.xcombo-code {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
}

/* the name is the part that gives way when the column is narrow: the
   code is the identifier, the name is the gloss on it */
.xcombo-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--body);
  font-size: 14px;
}

/* ---- the popup ------------------------------------------- */
.xcombo-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(5, 10, 51, .06), 0 12px 28px -8px rgba(5, 10, 51, .22);
  overflow: hidden;
}
.xcombo-pop[hidden] { display: none; }

.xcombo-find {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--line);
}
.xcombo-find svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.xcombo-q {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: .2rem 0;
  font-family: var(--f-ui);
  font-size: 14.5px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.xcombo-q::placeholder { color: var(--muted); }

.xcombo-list {
  max-height: 264px;
  margin: 0;
  padding: .3rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.xcombo-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .8rem;
  cursor: pointer;
}
.xcombo-list li.is-active { background: var(--surface-2); }

/* the one already chosen, marked in the amber this page reserves for
   the customer's own choices -- and by a rule, not by colour alone */
.xcombo-list li[aria-selected="true"] {
  background: var(--accent-wash);
  box-shadow: inset 2px 0 0 var(--accent-fill);
}
.xcombo-list li[aria-selected="true"] .xcombo-name { color: var(--ink); }

.xcombo-none {
  margin: 0;
  padding: .9rem .8rem 1rem;
  font-size: 14px;
  color: var(--muted);
}

/* ---- remove ------------------------------------------------
   Icon-only, so it carries an aria-label, and it is never the only
   way to correct a mistake. 40px square clears WCAG 2.2 AA's 24px
   pointer minimum with room to spare; on a touch pointer it goes to
   44 rather than trusting a mouse-sized target to a thumb. */
.wl-del {
  position: absolute;
  /* tucked into the row's top-right corner, clear of the fields and of
     the panel edge: it is the row's own control, not the panel's */
  top: .7rem;
  right: .55rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.wl-del:hover {
  color: var(--down);
  background: var(--down-wash);
  border-color: color-mix(in srgb, var(--down) 34%, transparent);
}
.wl-del svg { width: 16px; height: 16px; }

.wl-del:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
/* the first row cannot be removed: an empty watchlist is not a state
   this form can submit, and a disabled control that explains itself
   beats an error after the fact */
.wl-del[disabled] { opacity: .3; cursor: not-allowed; }
.wl-del[disabled]:hover {
  color: var(--muted);
  background: none;
  border-color: transparent;
}

/* ---- the restatement --------------------------------------
   The row in words. Every figure in it is one the customer set or
   the server priced; when either is unknown the sentence says so
   rather than printing a zero.
   --------------------------------------------------------- */
.wl-say {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem .7rem;
  margin-top: .2rem;
  padding: .7rem .85rem;
  background: var(--surface-2);
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
.wl-say b {
  font-family: var(--f-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wl-say .wl-say-txt { min-width: 0; }

/* distance from today's rate — the only up/down on the page */
.wl-gap {
  flex: 0 0 auto;
  margin-left: auto;
  padding: .2rem .5rem;
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
.wl-gap.is-up   { color: var(--up);    background: var(--up-wash); }
.wl-gap.is-down { color: var(--down);  background: var(--down-wash); }
.wl-gap.is-flat { color: var(--muted); background: var(--surface-3); }

/* ---- add another ------------------------------------------ */
.wl-add {
  /* laid out as the strip it now is: hint left, action right */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding-top: 1.25rem;
}
.wl-add .ahint { margin-right: auto; }

/* the icon inside the ghost button */
.wl-add .btn svg { width: 13px; height: 13px; }

/* a row arriving or leaving. Height is not animated -- the row is
   laid out first and only then faded in, so nothing below it jumps
   while the browser is measuring. */
.wl-row.is-new { animation: wl-in .34s ease both; }
@keyframes wl-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.wl-row.is-going {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s ease, transform .22s ease;
}

/* the terms row. Its own block rather than an .afield: that rule set
   turns every direct label child into a mono uppercase field label, and
   this label is a sentence the customer has to read. */
.tk-terms { display: grid; gap: .3rem; }
.tk-terms .acheck a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* ============================================================
   FEEDBACK
   ============================================================ */

/* a row-level or form-level problem, in the flow rather than in a
   toast: an error that floats above the page cannot be re-read, and
   the legacy page raised every one of these as a toast */
.tk-alert {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: 1.5rem;
  padding: .9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--down) 42%, var(--line));
  border-radius: var(--r);
  background: var(--down-wash);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--down);
}
.tk-alert:empty { display: none; }
.tk-alert svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .1em; }
.tk-alert a { color: inherit; text-decoration: underline; }

/* the action rail */
.tk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
/* the primary action is the last thing on the page and the only one
   that commits anything: it gets the auth surface's 52px, not the
   masthead .btn's default height */
.tk-actions .btn {
  min-width: 210px;
  min-height: 52px;
  padding-block: .95rem;
  font-size: 15px;
}
.tk-actions .ahint { margin-left: auto; max-width: 42ch; text-align: right; }

.tracker-form .btn:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}

/* ============================================================
   CONFIRMATION — Rate/ConfirmSubmit
   The receipt for the instruction just left behind.
   ============================================================ */
/* narrower than the form -- it is a paragraph of confirmation, not a
   set of fields -- and centred in the column rather than left against it */
.tk-receipt { max-width: 660px; margin-inline: auto; }

.tk-seal {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--up) 34%, transparent);
  border-radius: 2px;
  background: var(--up-wash);
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--up);
}
.tk-seal svg { width: 13px; height: 13px; }

.tk-receipt-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}
.tk-receipt-lede strong { color: var(--ink); font-weight: 600; }
.tk-receipt-lede + .tk-receipt-lede { margin-top: .8rem; }

/* the instructions, as a ruled list matching the watchlist above */
.tk-targets {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.tk-targets li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--body);
}
.tk-targets .tk-t-name { font-weight: 600; color: var(--ink); }
.tk-targets .tk-t-code {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
}
.tk-targets .tk-t-rate {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tk-receipt-fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ============================================================
   RESPONSIVE
   Mobile first would mean writing the stack first; this file is
   an override on a desktop-shaped base, so the stack is here.
   ============================================================ */
@media (max-width: 940px) {
  .wl-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* the bin sits in this gutter: 40px button + its .55rem offset, and
       44px on a coarse pointer, so nothing can run under it */
    padding-right: 3.6rem;
  }
  /* the currency and its live rate stay paired at the top */
  .wl-row > .wl-cur { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  /* one column: the list can use the whole row */
  .xcombo-pop { min-width: 0; }
  .tk-block-head { padding: .95rem 1.1rem; }
  .tk-body { padding: 1.25rem 1.1rem; }
  .tk-block > .wl-add,
  .tk-block > .tk-terms { padding: .9rem 1.1rem; }
  .wl-no { left: 1.1rem; }
  .wl-del { top: .55rem; right: .35rem; }

  .wl-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.4rem 3.2rem 1.4rem 2.4rem;
  }
  .wl-no { top: 1.75rem; }
  .wl-say { margin-top: .35rem; }
  .wl-gap { margin-left: 0; }
  .tk-block-head { flex-wrap: wrap; }
  .tk-block-note { margin-left: 0; width: 100%; }
  .tk-actions .btn { width: 100%; min-width: 0; }
  .tk-actions .ahint { margin-left: 0; text-align: left; }
}

/* a thumb is not a mouse pointer: the one icon-only control on the
   page grows to the platform touch floor rather than staying at the
   size a cursor can hit */
@media (pointer: coarse) {
  .wl-del { width: 44px; height: 44px; top: .5rem; }
  /* a wider button needs a wider gutter */
  .wl-row { padding-right: 3.8rem; }
  .xcombo-list li { padding: .72rem .8rem; }
  .xcombo-list { max-height: 60vh; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wl-row.is-new { animation: none; }
  .xcombo-caret, .xcombo-btn { transition: none; }
  .wl-row.is-going { transition: none; }
}