/* ═══════════════════════════════════════════════════════════════════════════
   RivCut account screen — mobile port of the app's Account profile
   Loaded on account.html only, AFTER css/rc-app.css.

   Ports the prototype's `isAccount` screen (RivCut Mobile App.dc.html:1250-1349)
   to the website at ≤1023px. Desktop ≥1024px is untouched: every rule below is
   inside a max-width query, and the .rc-acct-* blocks js/rc-account.js injects
   are display:none above the breakpoint.

   Cascade: see css/rc-shell.css. Overrides of existing classes are
   `body.rc-app .x { ... !important }` (0,2,1). New .rc-acct-* classes are plain.

   Half-pixel sizes from the prototype (15.5 / 13.5 / 12.5 / 11.5 / 10.5) are
   rounded, matching what the rest of this port already does.
   ═══════════════════════════════════════════════════════════════════════ */

/* The injected app blocks exist in the DOM at all widths so that a resize
   needs no JS; CSS alone decides which face of the page is showing.
   Everything injected is wrapped in a .rc-acct, including the Settings tail
   that has to sit after the original cards. The disclosure caret is the one
   injected node that CANNOT be wrapped, because it belongs inside an existing
   .card-header, so it is hidden explicitly. */
.rc-acct { display: none; }
.rc-acct-disclose { display: none; }
/* The header is NOT inside a .rc-acct wrapper: position:sticky is scoped to
   the parent box, so wrapping it would unstick it as soon as that wrapper
   scrolled past. It is a direct child of .page-wrap instead, and therefore
   needs its own desktop hide. */
.rc-acct-head { display: none; }

@media screen and (max-width: 1023px) {

/* ── page shell ──────────────────────────────────────────────────────────
   Prototype screen padding is 4px 18px 26px on a #F4F6F8 background. This
   page's own body background is #F8F9FB (account.html:61), so align it. */
  body.rc-app.rc-acct-on { background: #F4F6F8 !important; }

  body.rc-app.rc-acct-on .page-wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: calc(26px + var(--rc-tabbar-h, 0px)) !important;
  }

  /* The prototype's own screen title replaces the desktop <h1>. */
  body.rc-app.rc-acct-on .page-title { display: none !important; }

  .rc-acct { display: block; }

  /* Prototype screens enter with `animation: rc-in .28s cubic-bezier(.2,.8,.2,1)`
     (its .rc-screen class). rc-in is already defined in css/rc-shell.css. */
  @media (prefers-reduced-motion: no-preference) {
    .rc-acct-head, .rc-acct { animation: rc-in .28s var(--rc-ease, ease); }
  }

/* ── sticky header (prototype :1252-1269) ────────────────────────────────
   The site nav already occupies the prototype header's top row (logo left,
   menu right), so this renders only the part the nav lacks: the company
   eyebrow and the screen title. Bleeds edge-to-edge with negative margins
   while the content keeps its 18px gutters, exactly as the prototype does. */
  .rc-acct-head {
    display: block;
    position: sticky;
    /* --rc-nav-h is measured by js/rc-account.js. The site nav is 64px here,
       not the 56px the rest of this port assumes, and a hardcoded value hid
       the company line behind it. */
    top: calc(var(--rc-promo-h, 0px) + var(--rc-nav-h, 64px));
    z-index: 15;
    background: #F4F6F8;
    margin: 0 -18px 18px;
    padding: 10px 18px 12px;
    /* Static, not scroll-triggered. The prototype's `syncSticky` is bound via
       hdrRef, which appears only once, on the order-detail screen (prototype
       line 704). The Account header carries no ref and its
       box-shadow is a plain inline style that is on at scroll 0. */
    box-shadow: 0 8px 14px -12px rgba(11, 31, 59, .3);
  }
  .rc-acct-company {
    font-size: 11px;
    color: #8A9099;
    line-height: 1.3;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rc-acct-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.7px;
    color: var(--dark, #0B1F3B);
  }

/* ── profile card (prototype :1270-1273) ─────────────────────────────── */
  .rc-acct-profile {
    background: #fff;
    border: 1px solid var(--rc-line, #DFE3E8);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 13px;
    align-items: center;
    margin-bottom: 14px;
  }
  .rc-acct-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #E5EDF8;
    color: var(--blue, #0d4fb4);
    display: flex; align-items: center; justify-content: center;
    font: 800 16px 'Geist', system-ui, sans-serif;
    flex: none;
  }
  .rc-acct-who { flex: 1; min-width: 0; }
  .rc-acct-name {
    font: 700 15px 'Geist', system-ui, sans-serif;
    color: var(--dark, #0B1F3B);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rc-acct-sub {
    font-size: 12px;
    color: #8A9099;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

/* ── credit card ─────────────────────────────────────────────────────────
   Four states, not the prototype's three: the website also has
   'info-requested', which is actionable (the customer must reply) and is
   already rendered on desktop at account.html:706. Dropping it would strand
   someone who owes us information. */

  /* (a) no application yet — prototype :1276-1291 */
  .rc-acct-credit-pitch {
    background: var(--dark, #0B1F3B);
    border-radius: 18px;
    padding: 20px;
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 12px 30px rgba(11, 31, 59, .18);
  }
  .rc-acct-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(76, 141, 255, .18);
    color: #93C5FD;
    border-radius: 20px;
    padding: 5px 11px;
    font: 700 11px 'Geist', system-ui, sans-serif;
    letter-spacing: .3px;
    text-transform: uppercase;
  }
  .rc-acct-pitch-h {
    font: 800 21px/1.2 'Geist', system-ui, sans-serif;
    letter-spacing: -.5px;
    margin: 13px 0 8px;
  }
  .rc-acct-pitch-p { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.6; }
  .rc-acct-why { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 18px; }
  .rc-acct-why-row { display: flex; gap: 9px; align-items: flex-start; }
  .rc-acct-why-tick {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(76, 141, 255, .22);
    display: flex; align-items: center; justify-content: center;
    flex: none; margin-top: 1px;
  }
  .rc-acct-why-row span { font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.5; }
  .rc-acct-cta {
    display: block; width: 100%;
    background: #fff;
    color: var(--blue, #0d4fb4);
    border: 0; border-radius: 13px;
    padding: 14px;
    text-align: center;
    font: 700 14px 'Geist', system-ui, sans-serif;
    cursor: pointer;
    text-decoration: none;
  }
  .rc-acct-foot { text-align: center; font-size: 11px; color: rgba(255,255,255,.42); margin-top: 11px; }

  /* (b) pending / info-requested — prototype :1295-1303 */
  .rc-acct-credit-note {
    background: #fff;
    border: 1px solid var(--rc-line, #DFE3E8);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 14px;
    display: flex; gap: 13px; align-items: flex-start;
  }
  .rc-acct-note-icon {
    width: 38px; height: 38px; border-radius: 12px;
    background: #FDECC4;
    display: flex; align-items: center; justify-content: center;
    flex: none;
  }
  .rc-acct-note-icon.is-info { background: #DBEAFE; }
  .rc-acct-note-icon.is-declined { background: #FEE2E2; }
  .rc-acct-note-h { font: 700 15px 'Geist', system-ui, sans-serif; color: var(--dark, #0B1F3B); }
  .rc-acct-note-p { font-size: 13px; color: #6E7580; line-height: 1.6; margin-top: 5px; }
  .rc-acct-note-s { font-size: 12px; color: #8A9099; margin-top: 9px; }

  /* (c) approved — prototype :1307-1312 */
  .rc-acct-credit-open {
    background: var(--dark, #0B1F3B);
    border-radius: 18px;
    padding: 20px;
    color: #fff;
    margin-bottom: 14px;
  }
  .rc-acct-eyebrow {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    letter-spacing: .4px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .rc-acct-amount { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; }
  .rc-acct-amount b {
    font: 800 28px 'Geist', system-ui, sans-serif;
    letter-spacing: -.8px;
  }
  .rc-acct-amount span { font-size: 13px; color: rgba(255,255,255,.5); }
  .rc-acct-track {
    height: 7px; border-radius: 6px;
    background: rgba(255,255,255,.14);
    overflow: hidden;
  }
  .rc-acct-fill { height: 100%; border-radius: 6px; background: #4C8DFF; }
  .rc-acct-open-note { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; }

/* ── section headings (prototype :1315, :1337) ───────────────────────── */
  .rc-acct-h {
    font: 700 15px 'Geist', system-ui, sans-serif;
    color: var(--dark, #0B1F3B);
    margin: 20px 0 11px;
  }

/* ── grouped list card, used by invoices and settings ────────────────── */
  .rc-acct-group {
    background: #fff;
    border: 1px solid var(--rc-line, #DFE3E8);
    border-radius: 16px;
    overflow: hidden;
  }
  .rc-acct-row {
    width: 100%;
    padding: 14px 16px;
    border-bottom: 1px solid #F0F2F5;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    background: none;
    border-left: 0; border-right: 0; border-top: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
  }
  .rc-acct-row:last-child { border-bottom: none; }
  .rc-acct-row:active { background: #F7F9FC; }
  .rc-acct-row-label { flex: 1; min-width: 0; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; }
  .rc-acct-row-value { font-size: 13px; color: #8A9099; flex: none; }
  .rc-acct-chev { flex: none; color: #C8CDD4; }

  /* Empty state — prototype :1317-1320 */
  .rc-acct-empty { padding: 24px; text-align: center; }
  .rc-acct-empty-h { font: 600 14px 'IBM Plex Sans', system-ui, sans-serif; color: #6E7580; margin-bottom: 4px; }
  .rc-acct-empty-p { font-size: 12px; color: #A8AEB7; line-height: 1.55; }

  /* Toggle — prototype :1342-1343 */
  .rc-acct-switch {
    width: 44px; height: 26px;
    box-sizing: border-box;
    border-radius: 20px;
    flex: none;
    padding: 3px;
    display: flex; align-items: center;
    background: var(--rc-line, #DFE3E8);
    border: 0;
    cursor: pointer;
    transition: background .2s var(--rc-ease, ease);
  }
  .rc-acct-switch[aria-checked='true'] { background: var(--blue, #0d4fb4); }
  .rc-acct-knob {
    width: 20px; height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s var(--rc-ease, ease);
  }
  .rc-acct-switch[aria-checked='true'] .rc-acct-knob { transform: translateX(18px); }

/* ── footer line (prototype :1348) ───────────────────────────────────── */
  .rc-acct-sig { text-align: center; margin-top: 22px; font-size: 12px; color: #A8AEB7; }

/* ── the existing desktop sections, restyled as app disclosure cards ─────
   PARITY: nothing is removed. Every original .account-card stays in the DOM
   and keeps its markup, handlers and data. On mobile each becomes a collapsed
   grouped-list card that expands in place when its header row is tapped, which
   is the app's own list-row idiom rather than a wall of desktop panels. */
  body.rc-app.rc-acct-on .account-card {
    background: #fff !important;
    border: 1px solid var(--rc-line, #DFE3E8) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  body.rc-app.rc-acct-on .account-card .card-header {
    padding: 14px 16px !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 52px !important;
    cursor: pointer !important;
  }
  body.rc-app.rc-acct-on .account-card .card-header h2 {
    flex: 1 !important;
    font: 500 14px 'IBM Plex Sans', system-ui, sans-serif !important;
    color: var(--dark, #0B1F3B) !important;
    margin: 0 !important;
  }
  /* Two body classes exist: .card-body on the first three cards and
     .card-body-flush on Billing Information and Payment Methods. Both must
     collapse, or those two render permanently expanded while the rest are shut. */
  body.rc-app.rc-acct-on .account-card .card-body,
  body.rc-app.rc-acct-on .account-card .card-body-flush {
    padding: 4px 16px 18px !important;
    border-top: 1px solid #F0F2F5 !important;
  }
  /* Collapsed by default; .rc-open reveals. */
  body.rc-app.rc-acct-on .account-card:not(.rc-open) .card-body,
  body.rc-app.rc-acct-on .account-card:not(.rc-open) .card-body-flush { display: none !important; }

  /* A secondary control can sit in the header (Payment Methods has an
     "Add a Payment Method" link-btn there). Keep it tappable and readable
     next to the caret rather than letting it stretch. */
  body.rc-app.rc-acct-on .account-card .card-header .link-btn {
    flex: none !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }

  /* The standalone Sign Out button at the foot of the page duplicates the
     Settings row. One is enough on a phone; the capability is unchanged. */
  body.rc-app.rc-acct-on .page-wrap > div[style*="text-align:center"]:has(> button[onclick*="logout"]) {
    display: none !important;
  }
  .rc-acct-disclose {
    display: block;
    flex: none;
    color: #C8CDD4;
    transition: transform .2s var(--rc-ease, ease);
  }
  .account-card.rc-open .rc-acct-disclose { transform: rotate(180deg); }

  /* Tighten the desktop internals so they read as app content. */
  body.rc-app.rc-acct-on .subsection-header h3 { font-size: 14px !important; }
  body.rc-app.rc-acct-on .detail-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #F0F2F5 !important;
  }
  body.rc-app.rc-acct-on .detail-label { font-size: 13px !important; color: #8A9099 !important; margin: 0 !important; }
  body.rc-app.rc-acct-on .detail-value { font-size: 14px !important; text-align: right !important; }
  body.rc-app.rc-acct-on .verify-banner { border-radius: 14px !important; }

/* Keep the email-verification banner above the app blocks; it is a real,
   server-backed state (users.email_verified) and must not be buried. */
  body.rc-app.rc-acct-on .verify-banner { margin-bottom: 14px !important; }

} /* end ≤1023px */