/* ============================================================
   XC_MoneyGuide_v1.css — MoneyGuide/Index and MoneyGuide/Detail

   Additive, in the manner of XC_Auth_v1.css, XC_Tracker_v1.css,
   XC_Travel_v1.css and XC_Inspiration_v1.css: it redefines no design
   token and no .btn. Load order is XC_Home_v4.css first, this second.

   THESIS. This is the reference, not the edited selection. TravelTips
   writes up twenty-four destinations worth visiting; this covers every
   currency we hold a guide for, and the visitor arrives already knowing
   which one they want.

   FORM. So the index is a directory, not a gallery: ruled rows that
   name the currency, price it and get out of the way. Two photo-led
   indexes already exist on this site — a third would say nothing new,
   and forty-one photographs is a wall rather than a choice. The
   photography belongs on the guide itself, where there is room to look
   at it.

   COLOUR LOGIC. Blue is structure. Amber is spent on the rate figure
   and nothing else, as a wash under the number rather than as ink:
   amber is never body text on light.
   ============================================================ */

/* ------------------------------------------------------------
   PAGE HEAD
   ------------------------------------------------------------ */
.mg-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
  padding-bottom: 2.25rem;
}
.mg-head h1 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 16ch;
}
.mg-lede {
  margin-top: 1.15rem;
  max-width: 54ch;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.62;
  color: var(--body);
}

.mg-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
}
.mg-facts dt {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  /* --muted measures 3.92:1 on --ground; label voice steps up to --body */
  color: var(--body);
}
.mg-facts dd {
  margin: .3rem 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* ------------------------------------------------------------
   THE FILTER
   Progressive enhancement: xc-moneyguide_v1.js narrows a list that
   is already fully rendered. Not sticky -- a bar over a page whose
   whole body is one list would obscure the row it filtered to.
   ------------------------------------------------------------ */
.mg-filter {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-strong);
}
.mg-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 24rem;
  min-width: 0;
}
.mg-search-icn {
  position: absolute;
  left: .7rem;
  width: 15px;
  height: 15px;
  color: var(--body);
  pointer-events: none;
}
.mg-search input {
  width: 100%;
  padding: .62rem .7rem .62rem 2.1rem;
  font-family: var(--f-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mg-search input::placeholder { color: var(--body); }
.mg-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--glass-out);
}
.mg-search input::-webkit-search-cancel-button { display: none; }
.mg-search-clear {
  position: absolute;
  right: .45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--body);
  cursor: pointer;
}
.mg-search-clear:hover { color: var(--ink); background: var(--surface-2); }
.mg-search-clear svg { width: 13px; height: 13px; }

.mg-count { margin-left: auto; font-size: 12.5px; color: var(--body); }

/* ------------------------------------------------------------
   THE DIRECTORY
   Two columns of ruled rows: forty-one entries in one column is a
   scroll, and in three the rate column stops lining up with anything.
   ------------------------------------------------------------ */
/* Columns, not a two-column grid. A grid flows left to right, which puts
   Brazil beside Canada and asks an alphabetical reader to zig-zag; columns
   run the list down one side and then down the other, which is how every
   directory has been read since the phone book. */
.mg-dir {
  columns: 2;
  column-gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mg-item { break-inside: avoid; }
.mg-item.is-out { display: none; }

.mg-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto 13px;
  align-items: center;
  gap: .9rem;
  padding: .85rem .55rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease;
}
.mg-row:hover { background: var(--surface); }

.mg-flag { display: block; width: 28px; height: 20px; }
.mg-flag img {
  display: block;
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}

.mg-name { min-width: 0; }
.mg-name b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--ink);
  transition: color .16s ease;
}
.mg-cur {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-row:hover .mg-name b { color: var(--brand); }

.mg-code {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--body);
}

.mg-rate { font-size: 13.5px; color: var(--body); white-space: nowrap; text-align: right; }
.mg-rate-from { font-size: 11.5px; }
.mg-rate b {
  font-weight: 600;
  color: var(--ink);
  /* amber as a wash under the figure, never as ink on light */
  box-shadow: inset 0 -.34em 0 var(--accent-wash);
}
.mg-rate-none { font-size: 12px; color: var(--body); }

.mg-arw {
  width: 13px;
  height: 13px;
  color: var(--muted);
  transition: transform .24s cubic-bezier(.22, .61, .36, 1), color .16s ease;
}
.mg-row:hover .mg-arw { transform: translateX(3px); color: var(--brand); }

.mg-row:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: -2px;
  border-radius: var(--r);
}

.mg-foot {
  margin-top: 1.5rem;
  max-width: 74ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--body);
}

/* ------------------------------------------------------------
   EMPTY STATE
   ------------------------------------------------------------ */
.mg-empty {
  margin-top: 1.5rem;
  padding: 2.4rem 1.75rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.mg-empty-h { font-size: 18px; font-weight: 600; color: var(--ink); }
.mg-empty-h b { font-weight: 600; color: var(--brand); }
.mg-empty-p {
  margin: .6rem auto 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}
.mg-empty-act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.35rem;
}

/* ============================================================
   ============================================================
   MoneyGuide/Detail — one currency
   ============================================================ */

/* ------------------------------------------------------------
   OPENER
   ------------------------------------------------------------ */
.mg-crumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--body);
}
.mg-crumb svg { width: 11px; height: 11px; color: var(--muted); flex: none; }
.mg-crumb a {
  text-decoration: none;
  color: var(--body);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
.mg-crumb a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.mg-crumb [aria-current] { color: var(--ink); }

.mg-open-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: 1.5rem;
}
.mg-open h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.35rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.mg-rate-block {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-strong);
}
.mg-rate-fig {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: clamp(1.4rem, 2.9vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--body);
}
.mg-rate-fig .mg-rate-from { font-size: .5em; font-weight: 500; }
.mg-rate-fig b {
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 -.3em 0 var(--accent-wash);
}
.mg-rate-code { font-size: .52em; font-weight: 500; letter-spacing: .04em; }
.mg-rate-none { color: var(--body); }
.mg-rate-note {
  margin-top: .65rem;
  max-width: 48ch;
  font-size: 12px;
  line-height: 1.55;
  color: var(--body);
}
.mg-rate-act { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }

.mg-shot { position: relative; margin: 0; }
/* the stamp flag is also a descendant img; scope the plate rule to the
   direct child or it inherits the plate's full width */
.mg-shot > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* the one authored moment: the place settles in once, on arrival */
  animation: mg-settle .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes mg-settle {
  from { transform: scale(1.045); opacity: .001; }
  to   { transform: none;         opacity: 1; }
}
/* the ink over a photograph is hard-coded: no token knows what is under it */
.mg-stamp {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .55rem;
  background: rgba(255, 255, 255, .93);
  color: #05082A;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.mg-stamp-flag { display: block; width: 20px; height: 14px; object-fit: cover; border-radius: 1px; }

/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */
.mg-money,
.mg-costs,
.mg-calc { border-top: 1px solid var(--line); }

.mg-sec-head { max-width: 64ch; margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem); }
.mg-sec-head h2 {
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.mg-sec-head p {
  margin-top: .8rem;
  font-size: 15px;
  line-height: 1.62;
  color: var(--body);
}

.mg-money-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.mg-mfacts { margin: 0; }
.mg-mfacts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.mg-mfacts > div:first-child { border-top: 1px solid var(--line-strong); }
.mg-mfacts dt { font-size: 12.5px; font-weight: 500; color: var(--body); }
.mg-mfacts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

.mg-dens h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--body); }
.mg-den-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .75rem 0 1.6rem;
}
.mg-den-list li {
  padding: .42rem .72rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
/* coins are context, not stock: the same object, unfilled */
.mg-den-coins li { background: none; border-color: var(--line); color: var(--body); }
.mg-den-note { max-width: 48ch; font-size: 13px; line-height: 1.6; color: var(--body); }

/* ------------------------------------------------------------
   WHAT IT COSTS
   ------------------------------------------------------------ */
.mg-cost { width: 100%; border-collapse: collapse; }
.mg-cost th,
.mg-cost td {
  text-align: left;
  padding: .95rem .9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.mg-cost th:first-child, .mg-cost td:first-child { padding-left: 0; }
.mg-cost th:last-child,  .mg-cost td:last-child  { padding-right: 0; }
.mg-cost thead th {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  padding-block: .55rem;
  border-bottom: 1px solid var(--line-strong);
}
.mg-cost tbody th.mg-cost-what {
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}
/* the icon and the label share an inner flex line rather than turning the
   cell into a flex container: a th that stops being a table-cell stops
   sharing the row height, and each cell then rules at its own baseline */
.mg-cost-line { display: flex; align-items: center; gap: .8rem; }
.mg-cost-icn { width: 20px; height: 20px; flex: none; color: var(--brand); }

.mg-cost .mg-cost-local,
.mg-cost .mg-cost-aud { text-align: right; white-space: nowrap; }
.mg-cost .mg-cost-local { width: 17%; color: var(--body); font-size: 14.5px; }
.mg-cost .mg-cost-aud { width: 19%; }
.mg-cost-aud b {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  box-shadow: inset 0 -.32em 0 var(--accent-wash);
}
.mg-cost-none { color: var(--body); }
.mg-cost-lbl { display: none; }
.mg-cost tbody tr { transition: background-color .16s ease; }
.mg-cost tbody tr:hover th,
.mg-cost tbody tr:hover td { background: var(--surface); }

.mg-cost-foot {
  margin-top: 1.15rem;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.62;
  color: var(--body);
}

/* ------------------------------------------------------------
   THE CLOSE
   The same construction the other redesigned surfaces end on: no
   fill of its own, a hairline and the house radius, so the page's
   last object sits on the ground and the footer's #000 reads as a
   deliberate close rather than a seam.
   ------------------------------------------------------------ */
.mg-band { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem); }
.mg-band .wrap { width: min(880px, 100% - 3rem); }
.mg-band-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding: clamp(1.35rem, 2.1vw, 1.75rem) clamp(1.75rem, 3vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}
.mg-band-in h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
}
.mg-band-in p {
  margin-top: .7rem;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
}
.mg-band-act { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .mg-dir { columns: 1; }
}

@media (max-width: 1000px) {
  .mg-head { grid-template-columns: 1fr; gap: 1.9rem; align-items: start; }
  .mg-open-in { grid-template-columns: 1fr; gap: 1.9rem; }
  /* the place first at this width: the photograph is the fastest way to
     confirm you are on the right guide */
  .mg-shot { order: -1; }
  .mg-shot > img { aspect-ratio: 16 / 9; }
  .mg-money-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .mg-filter { flex-wrap: wrap; gap: .7rem; }
  .mg-search { flex: 1 1 100%; }
  .mg-count { margin-left: 0; }
  .mg-band-in { grid-template-columns: 1fr; padding: clamp(1.4rem, 5vw, 1.9rem); }
}

@media (max-width: 620px) {
  /* the row drops its currency name and the table stacks: each cost keeps
     its label on one line and puts the two figures underneath, each
     carrying its own column name */
  .mg-row { grid-template-columns: 28px minmax(0, 1fr) auto 13px; gap: .7rem; }
  .mg-code { display: none; }

  .mg-cost, .mg-cost tbody, .mg-cost tr, .mg-cost th, .mg-cost td { display: block; }
  .mg-cost thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mg-cost tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    row-gap: .55rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line);
  }
  .mg-cost tbody tr:first-child { border-top: 1px solid var(--line-strong); }
  .mg-cost th, .mg-cost td { padding: 0; border: 0; }
  .mg-cost tbody th.mg-cost-what { grid-column: 1 / -1; }
  .mg-cost .mg-cost-local { width: auto; text-align: left; }
  .mg-cost .mg-cost-aud { width: auto; text-align: right; }
  .mg-cost-lbl {
    display: inline;
    margin-right: .4rem;
    font-size: 11px;
    color: var(--body);
  }
  .mg-cost tbody tr:hover th,
  .mg-cost tbody tr:hover td { background: none; }

  .mg-facts { grid-template-columns: 1fr; row-gap: 1.05rem; }
  .mg-band-act .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mg-shot > img { animation: none; }
  .mg-row, .mg-arw, .mg-crumb a, .mg-search input, .mg-cost tbody tr { transition-duration: .01ms; }
  .mg-row:hover .mg-arw { transform: none; }
}