/* =========================================================================
   SafeRemit Borderless — web-native layer
   -------------------------------------------------------------------------
   app.css describes the product as a phone: one 480px column, a fixed bottom
   tab bar, screens that fill the viewport. That is right on a phone and wrong
   on a desk, where the same information should sit in a persistent workspace.

   This file is that workspace. It only ever adds — every rule here lives
   inside a min-width query, so the phone layout in app.css is untouched, and
   so are the device mockups on the marketing site (which render app.css at
   360px inside body.site and never load this file).

   Layout by shell, keyed off the body class set in each base template:
     .app--tabs   dashboard    sidebar rail + content workspace   (>=1024px)
     .app--auth   sign-in      brand panel + centred form         (>=900px)
     .app--sheet  flows        centred modal card                 (>=900px)
   ========================================================================= */

/* The sidebar is desktop-only; the bottom tab bar is phone-only. Exactly one
   of the two is in the layout at any width, never both. */
.side { display: none; }

/* =========================================================== workspace == */
@media (min-width: 1024px) {

  .app--tabs {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--warm-200);
  }

  .app--tabs .sr-app {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    grid-template-areas:
      "rail head"
      "rail main";
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* ------------------------------------------------------------- rail -- */

  .app--tabs .bottom-nav { display: none; }

  /* An ink panel floating on the paper, the way Trade's rail does, rather than
     a pale column divided off by a rule. It is the one dark surface on the
     screen, which is what makes everything to the right of it read as content. */
  .side {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    position: sticky;
    top: 0;
    height: calc(100vh - var(--s3) * 2);
    height: calc(100dvh - var(--s3) * 2);
    margin: var(--s3) 0 var(--s3) var(--s3);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s5) var(--s4) var(--s4);
    background: var(--navy-800);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
  }
  .side::-webkit-scrollbar { width: 5px; }
  .side::-webkit-scrollbar-thumb { border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.18); }

  .side__brand {
    display: block;
    padding: var(--s2) var(--s3) var(--s5);
    margin-bottom: var(--s2);
    border-bottom: 1px solid var(--border-inverse);
    text-decoration: none;
  }
  /* The lockup is drawn for a pale ground: ink wordmark, navy logo tile. On
     the dark rail both disappear, so both are restated here. */
  .side__brand .sr-logo { background: rgba(255, 255, 255, 0.08); }
  .side__brand .sr-wordmark { color: var(--text-inverse); }
  .side__brand .sr-wordmark .suffix { color: var(--navy-300); }

  .side__nav { display: flex; flex-direction: column; gap: 2px; }

  .side__group {
    margin: var(--s4) var(--s3) var(--s1);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
  }
  .side__group:first-child { margin-top: 0; }

  .side__link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: 44px;
    padding: 0 var(--s3);
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--dur-normal) var(--ease-standard),
                color var(--dur-normal) var(--ease-standard),
                transform var(--dur-normal) var(--ease-standard);
  }
  .side__link svg { flex: none; }
  .side__link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-inverse);
    transform: translateX(2px);
  }
  .side__link:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: -2px;
  }

  .side__link--on {
    background: var(--surface-card);
    color: var(--navy-800);
    box-shadow: var(--shadow-md);
  }
  .side__link-tag {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.09);
    color: var(--navy-200);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .side__link--on .side__link-tag { background: var(--gold-100); color: var(--gold-700); }
  .side__link--on svg { color: var(--gold-700); stroke-width: 2.2; }
  .side__link--on:hover { background: var(--surface-card); color: var(--navy-800); transform: none; }

  /* Verification nudge, pinned above the user block. */
  .side__nudge {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    margin-top: auto;
    padding: var(--s4);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-inverse);
    text-decoration: none;
    transition: border-color var(--dur-normal) var(--ease-standard);
  }
  .side__nudge:hover { border-color: var(--gold); }
  .side__nudge-icon {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: var(--r-xs);
    background: var(--gold);
    color: var(--navy-800);
  }
  .side__nudge-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-inverse);
  }
  .side__nudge-body {
    display: block;
    font-size: 12px;
    color: var(--navy-300);
    line-height: 1.45;
  }

  .side__user {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s3);
    padding-top: var(--s4);
    border-top: 1px solid var(--border-inverse);
  }
  /* Without `auto` here the user block only sits at the bottom when the
     nudge above it is absent. */
  .side__nav ~ .side__user { margin-top: auto; }
  .side__avatar { width: 36px; height: 36px; font-size: 13px; }
  .side__user-text { min-width: 0; flex: 1; }
  .side__user-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-inverse);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .side__user-mail {
    display: block;
    font-size: 12px;
    color: var(--navy-300);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .side__user .icon-btn {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border-inverse);
    color: var(--navy-200);
  }
  .side__user .icon-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--border-inverse); }

  /* ---------------------------------------------------------- content -- */

  /* No rule under the header and no second background behind the content: the
     rail is the only edge on the page, and the workspace is one sheet of
     paper from the top of the header to the bottom of the list. */
  .app--tabs .app-header {
    grid-area: head;
    padding: var(--s6) var(--s6) var(--s4);
    background: transparent;
  }

  .app--tabs .sr-scroll {
    grid-area: main;
    overflow: visible;          /* the page scrolls, not an inner box */
    padding: 0 var(--s6) var(--s8);
    background: transparent;
  }

  /* Content stays readable instead of stretching across a 27" display. */
  .app--tabs .sr-scroll > * { max-width: 1180px; }

  /* Cards earn a hover state now that there is a pointer. */
  .app--tabs a.txn-row:hover { background: var(--surface-card); }
}

/* ===================================================== dashboard grid == */
@media (min-width: 1200px) {
  /* Two columns: money on the left, the ledger on the right. */
  .dash {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "balance ledger"
      "actions ledger"
      "wallets ledger";
    align-content: start;
    gap: var(--s5) var(--s6);
  }
  .dash__balance { grid-area: balance; }
  .dash__actions { grid-area: actions; }
  .dash__wallets { grid-area: wallets; }
  .dash__ledger  { grid-area: ledger; }
  .dash__nudge   { grid-column: 1 / -1; order: -1; }

  /* The balance card was sized for a phone; give it room to breathe. */
  .dash .balance-card { padding: var(--s6); }
  .dash .balance-card__amount { font-size: 44px; }
}

/* ========================================================= auth split == */
@media (min-width: 900px) {

  .app--auth {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--navy-800);
  }

  .app--auth .sr-app {
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Left: brand panel. Backgrounds are drawn in CSS so no asset is required;
     the content itself lives in web/partials/auth_aside.html, because an empty
     gradient column is just a wide blank space next to the form. */
  .app--auth .auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s7);
    padding: clamp(var(--s6), 4.5vw, 64px);
    overflow: hidden;
    color: var(--text-inverse);
    background:
      radial-gradient(760px 460px at 18% 12%, rgba(244, 189, 63, 0.16), transparent 62%),
      radial-gradient(680px 520px at 88% 88%, rgba(75, 176, 216, 0.18), transparent 60%),
      var(--grad-navy);
    border-right: 1px solid var(--border-inverse);
  }

  /* The same faint 52px ruling the marketing hero stands on, fading out
     before it reaches the copy. */
  .app--auth .auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
    mask-image: linear-gradient(to bottom, black, transparent 88%);
  }
  .app--auth .auth-aside > * { position: relative; }

  .auth-aside__brand { align-self: flex-start; text-decoration: none; }
  .auth-aside__brand .sr-logo { background: rgba(255, 255, 255, 0.08); }
  .auth-aside__brand .sr-wordmark { color: var(--text-inverse); }
  .auth-aside__brand .sr-wordmark .suffix { color: var(--navy-300); }

  /* Small caps behind a short rule — the eyebrow the marketing site uses. */
  .auth-aside__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--gold-400);
  }
  .auth-aside__eyebrow::before { content: ""; width: 1.7rem; height: 1px; background: currentColor; flex: none; }
  .auth-aside__title {
    margin-top: var(--s4);
    font-family: var(--font-display);
    font-size: clamp(32px, 3.3vw, 46px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.02;
  }

  /* app.css gives every h1-h4 the dark ink colour. That is a rule on the
     element, so it beats the pale ink this panel passes down by inheritance, and a
     heading comes out near-black on navy. Matched at element level the way
     site.css does it for .section--ink, so this holds for any heading added
     here later rather than only the one that exists today. */
  .auth-aside h1,
  .auth-aside h2,
  .auth-aside h3 { color: var(--text-inverse); }
  .auth-aside__sub {
    margin-top: var(--s4);
    max-width: 38ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--navy-200);
  }

  .auth-aside__list {
    margin-top: clamp(var(--s6), 4vh, 44px);
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    list-style: none;
  }
  .auth-aside__item { display: flex; align-items: flex-start; gap: var(--s3); }
  .auth-aside__item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-inverse);
  }
  .auth-aside__item > span:last-child {
    font-size: 13px;
    line-height: 1.55;
    color: var(--navy-300);
  }
  .auth-aside__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    color: var(--gold-300);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--border-inverse);
  }

  .auth-aside__foot {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--navy-400);
  }
  .auth-aside__foot svg { flex: none; color: var(--gold-300); }

  /* The panel fades up a line at a time while the form on the right is already
     usable, so nothing the visitor came to do is waiting on it. The global
     prefers-reduced-motion rule in app.css cancels all of this. */
  @keyframes sr-auth-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .auth-aside__brand,
  .auth-aside__eyebrow,
  .auth-aside__title,
  .auth-aside__sub,
  .auth-aside__item,
  .auth-aside__foot {
    animation: sr-auth-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .auth-aside__eyebrow { animation-delay: 90ms; }
  .auth-aside__title   { animation-delay: 160ms; }
  .auth-aside__sub     { animation-delay: 230ms; }
  .auth-aside__item:nth-child(1) { animation-delay: 320ms; }
  .auth-aside__item:nth-child(2) { animation-delay: 400ms; }
  .auth-aside__item:nth-child(3) { animation-delay: 480ms; }
  .auth-aside__foot    { animation-delay: 570ms; }

  /* /welcome/ makes the same three promises as the panel. On the split screen
     that is the same copy twice, so the page keeps only its two buttons. */
  .welcome-pitch { display: none; }

  /* Right: the form, centred on a warm page. */
  .app--auth .sr-scroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding: var(--s8) clamp(var(--s6), 7vw, 88px);
    background: var(--surface-page);
  }
  .app--auth .sr-scroll > * { width: 100%; max-width: 420px; margin: 0 auto; }
}

@media (min-width: 1280px) {
  /* Past this width an even split leaves the form floating in whitespace. */
  .app--auth .sr-app { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ======================================================== flow  cards == */
@media (min-width: 900px) {

  /* The paper has to reach the bottom of the window: the body only grows to
     the height of the card, and below it the html background showed through
     as a second, paler ground. */
  .app--sheet {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--warm-200);
    padding: var(--s6) var(--s5);
  }

  .app--sheet .sr-app {
    max-width: 640px;
    min-height: 0;
    margin: 0 auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .app--sheet .sheet-page { min-height: 0; }
  .app--sheet .sheet-page__body { padding-bottom: var(--s7); }
}