/* RangeReady app shell — unified component CSS recovered from the DesignCode
   exports (the non-font <style> block each page shipped). One file, used by
   every authenticated app page so the look matches the mockups exactly. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{background:#f2efe6}
::selection{background:#f15a24;color:#f2efe6}
a{color:inherit}

/* animations */
@keyframes rr-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes rr-modal-in{from{opacity:0;transform:translateY(10px) scale(0.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes rr-step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* scrollbars */
.rr-canvas::-webkit-scrollbar{width:10px}
.rr-canvas::-webkit-scrollbar-thumb{background:#d8d3c4}
.rr-phonescroll::-webkit-scrollbar{display:none}

/* form fields (widest padding/size variant wins where pages differed slightly) */
.rr-field input,.rr-field select,.rr-field textarea{width:100%;border:1px solid #d8d3c4;background:#fff;padding:11px 13px;font-family:'Archivo',sans-serif;font-size:14px;color:#0d100f;outline:none}
.rr-field input:focus,.rr-field select:focus,.rr-field textarea:focus{border-color:#15191a}
.rr-field input::placeholder,.rr-field textarea::placeholder{color:#b0b5ae}

/* hover states that the originals expressed as CSS classes */
.rr-row:hover{background:#f7f4ec !important}
.rr-prevrow:hover{background:#f7f4ec}
.rr-classcard:hover{border-color:#cfc9b8 !important}
.rr-hist:hover{background:#1a1f20 !important}
.rr-chip:hover{border-color:#15191a !important;color:#15191a !important}
.rr-opt:hover{border-color:#15191a !important}
.rr-act:hover{border-color:#15191a !important;background:#faf8f1 !important}
.rr-date:hover{border-color:#15191a !important}

/* landing hover classes (kept here too so the landing renders standalone) */
.rr-cta-primary:hover{background:#ff6b35 !important}
.rr-cta-dark:hover{background:#283133 !important}
.rr-cta-ghost:hover{border-color:#15191a !important;background:#faf8f1 !important}
.rr-navlink:hover{color:#f2efe6 !important}
.rr-feat:hover{border-color:#cfc9b8 !important}
.rr-faq:hover{background:#faf8f1 !important}
.rr-footlink:hover{color:#f2efe6 !important}

/* hidden form helper */
.rr-hidden{display:none !important}

/* the static iPhone frame used on the public renewal page (replaces the
   DesignCode <x-import component="IOSDevice"> runtime component) */
.rr-phone{width:402px;height:812px;max-width:100%;background:#15191a;border-radius:46px;padding:11px;box-shadow:0 30px 70px rgba(13,16,15,0.35);flex:none}
.rr-phone-screen{width:100%;height:100%;border-radius:36px;overflow:hidden;position:relative;background:#faf8f1}

/* image placeholder (replaces DesignCode <image-slot>) */
.rr-imgslot{display:flex;align-items:center;justify-content:center;background:#e6e2d6;color:#9a958a;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.06em;text-align:center;padding:8px}

/* ============================================================
   RESPONSIVE LAYER
   The app pages were exported from desktop mockups as fixed-width
   inline styles (no stylesheet to override). These class hooks plus
   !important media queries adapt the shell and the multi-column
   blocks for tablet and phone widths. Each template tags its
   structural containers with the matching class:
     rr-shell    outer 100vh flex row  -> stacks, scrolls
     rr-sidebar  236px dark sidebar     -> horizontal top nav bar
     rr-topbar   62px header            -> wraps
     rr-side     fixed-width sub-panel  -> full width
     rr-stack    multi-column block     -> single column (stretch)
     rr-stack-c  multi-column block     -> single column (centered)
     rr-stack-2  stat grid              -> two columns, then one
     rr-rowhead  table column header    -> hidden on phone
     rr-row/.rr-prevrow grid data rows  -> stacked card
     rr-scrollx  wide inline strip      -> horizontal scroll
   ============================================================ */
@media (max-width:900px){
  /* app shell: release the locked 100vh row so the page can flow & scroll */
  .rr-shell{flex-direction:column !important;height:auto !important;min-height:100vh;overflow:visible !important}

  /* the dark sidebar becomes a horizontal, scrollable top nav bar */
  .rr-sidebar{width:100% !important;flex-direction:row !important;align-items:center;overflow-x:auto;
              border-right:none !important;border-bottom:1px solid #2c3537}
  .rr-sidebar>div:first-child{border-bottom:none !important;padding:13px 16px !important;flex:none}
  .rr-sidebar>nav{flex-direction:row !important;flex:1 1 auto;gap:0 !important;padding:0 4px !important;
                  align-items:stretch;overflow-x:auto}
  .rr-sidebar>nav>div:first-child{display:none}                 /* "WORKSPACE" caption */
  .rr-sidebar>nav a,.rr-sidebar>nav>div{border-left:none !important;white-space:nowrap;padding:19px 13px !important}
  .rr-sidebar>div:last-child{display:none !important}           /* signed-in user footer */

  /* the dark wizard welcome rail just goes full width and stays stacked on top */
  .rr-wizrail{width:100% !important;flex:none;padding:22px 20px !important}

  /* top bar wraps instead of overflowing */
  .rr-topbar{height:auto !important;min-height:62px;flex-wrap:wrap;gap:9px 14px;padding:11px 16px !important}

  /* generic column collapse */
  .rr-stack{grid-template-columns:1fr !important;flex-direction:column !important;align-items:stretch !important}
  .rr-stack-c{grid-template-columns:1fr !important;flex-direction:column !important;align-items:center !important}
  .rr-stack-2{grid-template-columns:1fr 1fr !important}
  /* let stacked grid/flex children shrink below their min-content (no blow-out) */
  .rr-stack>*,.rr-stack-c>*,.rr-stack-2>*{min-width:0;max-width:100%}
  .rr-side{width:100% !important;flex:none}
  .rr-scrollx{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .rr-renew-explain{position:static !important}

  /* landing nav: drop the in-page section links early so the CTA never clips */
  .rr-lnav{gap:16px !important}
  .rr-lnav-hide{display:none !important}

  /* roomy canvases tighten up */
  .rr-canvas{padding-left:18px !important;padding-right:18px !important}

  /* data tables: hide the column header, turn each grid row into a stacked card */
  .rr-rowhead{display:none !important}
  .rr-row,.rr-prevrow{display:flex !important;flex-direction:column;align-items:flex-start !important;
              gap:9px;padding:15px 16px !important}
  .rr-row>div,.rr-prevrow>div{width:100%;padding-right:0 !important}
}

@media (max-width:560px){
  .rr-canvas{padding-top:18px !important}
  .rr-pad{padding-left:16px !important;padding-right:16px !important}
  .rr-sec{padding-top:48px !important;padding-bottom:48px !important}
  .rr-stack-2{grid-template-columns:1fr !important}
  /* small phones: hide the wordmark too, leaving just the logo mark */
  .rr-brandword{display:none !important}
}