/* Rich Print Solutions — global styles, keyframes, and responsive layout */
:root{
  /* Display typeface — swap this one line to restyle every headline, number and price. */
  --font-display:'Playfair Display';
}
html{overflow:hidden}
body{overflow:hidden}
html,body{margin:0;padding:0;background:#F7F4EF;color:#17130F;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#0E6E82;text-decoration:none}
a:hover{color:#1595AE}
input,textarea,button{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(14,110,130,.7);outline-offset:3px}
::selection{background:rgba(14,110,130,.3)}
textarea::placeholder,input::placeholder{color:#7C7468}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#CEC5B5;border-radius:9px}::-webkit-scrollbar-thumb:hover{background:#94A3B8}
[hidden]{display:none!important}
@keyframes riseIn{from{opacity:0;transform:translateY(28px) scale(.985);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes riseSoft{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes riseTight{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes auroraShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floatA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-5%,0) scale(1.09)}}
@keyframes floatB{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-5%,4%,0) scale(.96)}}
@keyframes floatC{0%,100%{transform:translate3d(0,0,0) scale(.98)}33%{transform:translate3d(-3%,-3%,0) scale(1.06)}66%{transform:translate3d(3%,2%,0) scale(1.02)}}
@keyframes drift{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:var(--o,.5)}88%{opacity:var(--o,.5)}100%{transform:translate3d(var(--dx,10px),-130px,0);opacity:0}}
@keyframes sheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes spinConic{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popIn{0%{opacity:0;transform:scale(.35) rotate(-14deg)}62%{transform:scale(1.14) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes pulseRing{0%{transform:scale(.7);opacity:.6}100%{transform:scale(2.2);opacity:0}}
@keyframes drawStroke{to{stroke-dashoffset:0}}
@keyframes confettiFall{0%{transform:translate3d(0,-14vh,0) rotate(0deg);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--dx,0px),112vh,0) rotate(920deg);opacity:.85}}
@keyframes breathe{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes bellSwing{0%,58%,100%{transform:rotate(0)}64%{transform:rotate(13deg)}70%{transform:rotate(-11deg)}76%{transform:rotate(8deg)}82%{transform:rotate(-5deg)}88%{transform:rotate(2deg)}}
@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes scanLine{0%{transform:translateY(-100%)}100%{transform:translateY(1100%)}}
@keyframes ticker{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes rippleOut{0%{transform:scale(0);opacity:.55}100%{transform:scale(1);opacity:0}}
@keyframes toastIn{0%{opacity:0;transform:translateY(26px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes zoomIn{0%{opacity:0;transform:scale(.9) translateY(24px)}100%{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rayTurn{to{transform:rotate(360deg)}}
@keyframes shimmerText{0%{background-position:-160% 0}100%{background-position:260% 0}}
@keyframes inkPrint{to{transform:scaleX(1)}}
@keyframes squeegee{0%{transform:translateX(-140%)}55%,100%{transform:translateX(620%)}}

/* ==========================================================================
   LOGIN NAVBAR  +  CMYK PRESS STRIP   (signature print-shop identity)
   A hairline strip of the four process inks "prints in" across the very top,
   then a squeegee highlight sweeps it periodically. The navbar echoes the
   ink chips beside the wordmark. Boldness lives here; the rest stays quiet.
   ========================================================================== */
.cmyk-strip{position:absolute;top:0;left:0;right:0;height:3px;display:flex;z-index:5;overflow:hidden}
.cmyk-strip i{flex:1;transform:scaleX(0);transform-origin:left center;animation:inkPrint .8s cubic-bezier(.16,1,.3,1) forwards}
.cmyk-strip i:nth-child(1){background:#1595AE}
.cmyk-strip i:nth-child(2){background:#B5316B;animation-delay:.12s}
.cmyk-strip i:nth-child(3){background:#EFC33F;animation-delay:.24s}
.cmyk-strip i:nth-child(4){background:#17130F;animation-delay:.36s}
.cmyk-strip::after{content:"";position:absolute;top:0;bottom:0;width:20%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:squeegee 6s ease-in-out 1.3s infinite}

.rnav{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:24px;flex:none;padding:10px 0 0;animation:riseSoft .8s .04s cubic-bezier(.16,1,.3,1) both}
.rnav-brand{display:flex;align-items:center;gap:13px;min-width:0}
.rnav-logo{position:relative;flex:none;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#1595AE,#0A5261);box-shadow:0 10px 28px rgba(14,110,130,.45),inset 0 1px 0 rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.rnav-logo:hover{transform:rotate(-8deg) scale(1.07)}
.rnav-logo>span{width:11px;height:11px;border-radius:3px;background:rgba(255,255,255,.75)}
.rnav-word{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:#17130F}
.rnav-cmyk{display:flex;gap:3px;margin-left:5px}
.rnav-cmyk i{display:block;width:15px;height:5px;border-radius:2px;transform:scaleX(0);transform-origin:left center;animation:inkPrint .7s cubic-bezier(.16,1,.3,1) both}
.rnav-cmyk i:nth-child(1){background:#1595AE;animation-delay:.42s}
.rnav-cmyk i:nth-child(2){background:#B5316B;animation-delay:.52s}
.rnav-cmyk i:nth-child(3){background:#EFC33F;animation-delay:.62s}
.rnav-cmyk i:nth-child(4){background:#17130F;animation-delay:.72s}

.rnav-links{display:flex;align-items:center;gap:4px}
.rnav-link{position:relative;padding:9px 15px;font-size:13px;font-weight:500;color:#7C7468;border-radius:10px;white-space:nowrap;transition:color .4s ease}
.rnav-link::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1.5px;border-radius:2px;background:#0E6E82;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.rnav-link:hover{color:#17130F}
.rnav-link:hover::after{transform:scaleX(1)}
.rnav-link:focus-visible::after{transform:scaleX(1)}

.rnav-right{display:flex;align-items:center;gap:14px}
.rnav-status{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:30px;background:rgba(255,255,255,.9);border:1px solid #E6E0D5;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);white-space:nowrap}
.rnav-status span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,19,15,.7)}
.rnav-status i{width:7px;height:7px;border-radius:50%;background:#2F7D57;box-shadow:0 0 12px rgba(47,125,87,.9);animation:breathe 2.4s ease-in-out infinite}
.rnav-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:none;border-radius:13px;cursor:pointer;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(145deg,#1595AE,#0E6E82 46%,#0A5261);box-shadow:0 18px 40px -16px rgba(14,110,130,.85),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;white-space:nowrap}
.rnav-cta:hover{transform:translateY(-2px);box-shadow:0 26px 54px -16px rgba(14,110,130,.95),inset 0 1px 0 rgba(255,255,255,.7)}
.rnav-cta>svg{position:relative;z-index:2;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.rnav-cta:hover>svg{transform:translateX(3px)}
.rnav-cta::after{content:"";position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:sheen 3.6s ease-in-out infinite}

.rnav-body{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:clamp(40px,5vw,88px);align-items:center}

/* ==========================================================================
   RESPONSIVE  —  tablet & mobile
   Desktop (> 1024px) is untouched: the fixed one-screen, no-scroll layout and
   every animation stay exactly as designed. At/below 1024px the app turns into
   a normal vertically-scrolling, stacked page (a phone can't hold this much
   content in one screen without scrolling).
   ========================================================================== */
@media (max-width: 1024px) {
  html, body { overflow: hidden auto; }
  .app { height: auto !important; min-height: 100vh; overflow: visible !important; }

  #screen-login,
  #screen-success { height: auto !important; min-height: 100vh; overflow: visible !important; }

  /* ---------- dashboard / approval ---------- */
  #screen-dashboard {
    height: auto !important; min-height: 100vh;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
  }
  .side  { display: none !important; }                 /* hide the wide desktop rail on small screens */
  .dmain { height: auto !important; overflow: visible !important; }
  .dcontent {
    height: auto !important; min-height: 0 !important;
    gap: 16px !important;
    padding: 16px clamp(14px, 3vw, 26px) 40px !important;
  }

  /* two posters side by side, notes/submit rail spans full width below */
  .dbody {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    /* the entry animation leaves an identity transform, which would make
       .dbody the containing block for the fixed release sheet — drop it so
       the sheet anchors to the viewport (bottom:0) instead. */
    animation: none !important;
  }
  .dbody > div:last-child { grid-column: 1 / -1 !important; }

  /* posters take their natural 3:4 height when they no longer fill the screen */
  #lift1, #lift2 { height: auto !important; }
  .pcard        { height: auto !important; }
  #zoom1, #zoom2 { flex: 0 0 auto !important; aspect-ratio: 3 / 4 !important; }

  /* notes: natural height with a comfortable typing area */
  #notesWrap { flex: none !important; }
  #notes     { flex: none !important; min-height: 120px !important; }

  /* timeline scrolls sideways instead of crushing 5 steps into a phone */
  .dtl > div:last-child {
    overflow-x: auto; padding-bottom: 4px;
    grid-template-columns: repeat(5, minmax(116px, 1fr)) !important;
  }

  /* zoom modal fits narrow screens (poster on top, inspector below) */
  #zoomModal { padding: 18px !important; overflow-y: auto !important; align-items: flex-start !important; }
  #zoomModal > div { gap: 18px !important; width: 100%; }
  #zoomFrame { height: auto !important; width: 100% !important; max-width: 360px !important; aspect-ratio: 3 / 4 !important; margin: 0 auto; }
  #zoomModal > div > div:last-child { width: 100% !important; max-width: 360px !important; }

  /* trim topbar + collapse the login navbar so nothing clips at the edge */
  .dsearch { display: none !important; }
  .rnav-links, .rnav-status { display: none !important; }   /* keep logo + quote CTA */

  /* LOGIN: put the sign-in card first (content-priority) — a phone user should
     land on the form, with the marketing hero as a supporting scroll below. */
  .rnav-body {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 30px;
    margin-top: 20px;          /* breathing room between the navbar and the card */
  }
  #pxE { order: -1; justify-content: center !important; }
  #pxE > div { max-width: 100% !important; }
  #pxD { max-width: 100% !important; }
  #pxD > h1 { font-size: clamp(34px, 8vw, 46px) !important; }   /* calmer hero as secondary content */

  /* LOGIN CARD: trim the height so the form isn't overly tall on a phone */
  #pxE > div > div:last-child { padding: 26px 24px 22px !important; }
  #pxE > div > div:last-child > div:nth-of-type(2) { margin-bottom: 20px !important; } /* header */
  #pxE > div > div:last-child > div:nth-of-type(3) { gap: 13px !important; }           /* fields */
  #pxE > div > div:last-child > div:nth-of-type(4) { margin: 14px 0 20px !important; } /* keep-signed / forgot */
  #pxE > div > div:last-child > div:nth-of-type(5) { margin: 16px 0 !important; }      /* or-divider */
  #pxE > div > div:last-child > div:nth-of-type(6) { margin-top: 18px !important; }    /* footer meta */

  /* reserve room so scroll content clears the fixed bottom nav */
  .dcontent { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ==========================================================================
   SHORT DESKTOP VIEWPORTS  (wide but not tall — e.g. laptops)
   Keep the fixed one-screen, no-scroll design, but compress the generous
   vertical rhythm so the whole hero + login card fit inside the visible
   height instead of clipping below the fold. Tall monitors (> 960px high)
   keep the original spacing untouched.
   #pxD children: 1 brand row · 2 season badge · h1 · p · 5 stats · 6 testimonial
   #pxE card children (div:nth-of-type): 2 header · 3 fields · 4 options · 5 divider · 6 footer
   ========================================================================== */
@media (min-width: 1025px) and (max-height: 960px) {
  #screen-login { padding-top: clamp(14px,2vh,26px) !important; padding-bottom: clamp(20px,3vh,44px) !important; }

  /* hero (left column) — trim the big gaps and headline.
     #pxD children now: 1 season badge · h1 · p · stats · testimonial */
  #pxD > div:first-child { margin-bottom: 24px !important; }                 /* season badge */
  #pxD > h1 { font-size: clamp(38px,4.4vw,58px) !important; margin-bottom: 20px !important; }
  #pxD > p  { margin-bottom: 30px !important; }
  #pxD > div:last-child { margin-top: 30px !important; padding-top: 20px !important; }  /* testimonial */

  /* login card (right column) — tighten its inner rhythm */
  #pxE > div > div:last-child { padding: 32px 36px 28px !important; }
  #pxE > div > div:last-child > div:nth-of-type(2) { margin-bottom: 24px !important; } /* header */
  #pxE > div > div:last-child > div:nth-of-type(3) { gap: 14px !important; }           /* fields */
  #pxE > div > div:last-child > div:nth-of-type(4) { margin: 16px 0 22px !important; } /* keep-signed / forgot */
  #pxE > div > div:last-child > div:nth-of-type(5) { margin: 18px 0 !important; }      /* or-divider */
  #pxE > div > div:last-child > div:nth-of-type(6) { margin-top: 20px !important; }    /* footer */
}

/* very short screens — go a step further */
@media (min-width: 1025px) and (max-height: 800px) {
  #pxD > div:first-child { margin-bottom: 18px !important; }
  #pxD > h1 { font-size: clamp(34px,3.8vw,50px) !important; margin-bottom: 16px !important; }
  #pxD > p  { margin-bottom: 22px !important; font-size: 15px !important; }
  #pxD > div:last-child { margin-top: 22px !important; padding-top: 16px !important; }

  #pxE > div > div:last-child { padding: 26px 32px 24px !important; }
  #pxE > div > div:last-child > div:nth-of-type(2) { margin-bottom: 18px !important; }
  #pxE > div > div:last-child > div:nth-of-type(4) { margin: 14px 0 18px !important; }
  #pxE > div > div:last-child > div:nth-of-type(5) { margin: 14px 0 !important; }
  #pxE > div > div:last-child > div:nth-of-type(6) { margin-top: 16px !important; }
}

/* respect reduced-motion for the new navbar flourishes */
@media (prefers-reduced-motion: reduce) {
  .cmyk-strip::after { animation: none; display: none; }
  .cmyk-strip i, .rnav-cmyk i { animation: none; transform: none; }
  .rnav-cta::after { animation: none; }
}

/* ---------- phones ---------- */
@media (max-width: 680px) {
  .dbody { grid-template-columns: 1fr !important; }   /* stack the two posters */
  .dbody > div:last-child { grid-column: auto !important; }
  #screen-success { padding-left: 20px !important; padding-right: 20px !important; }
  #pxF > div:last-child { flex-wrap: wrap !important; justify-content: center !important; }

  /* navbar: drop the ink-chip flourish, KEEP the company name (allow it to
     wrap to two lines), and compact the CTA so all three fit on one row. */
  .rnav { gap: 10px; }
  .rnav-cmyk { display: none; }
  .rnav-word { font-size: 11.5px; letter-spacing: .14em; white-space: normal; line-height: 1.2; }
  .rnav-cta { padding: 10px 14px; font-size: 12px; }

  /* login card: drop the decorative footer line to save vertical space */
  #pxE > div > div:last-child > div:nth-of-type(6) { display: none !important; }
}

/* very small phones: shrink the wordmark + CTA further so both stay visible */
@media (max-width: 420px) {
  .rnav-word { font-size: 10.5px; letter-spacing: .08em; }
  .rnav-cta { padding: 9px 12px; font-size: 11.5px; gap: 6px; }
  .rnav-cta > svg { width: 13px; height: 13px; }
}

/* ==========================================================================
   MOBILE DASHBOARD  —  bottom navigation bar + bottom sheet
   The wide desktop rail is hidden on phones; navigation moves to a fixed
   bottom tab bar (5 targets max, icon + label, safe-area aware). A "Menu"
   tab opens a bottom sheet that surfaces the overflow nav, press capacity,
   the account, and Log out. Both are inside #screen-dashboard, so they only
   exist while the dashboard is on screen; they stay hidden on desktop.
   ========================================================================== */
.mnav { display: none; }
.msheet, .msheet-scrim { display: none; }

@media (max-width: 1024px) {
  /* ---- bottom navigation bar ---- */
  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: stretch; justify-content: space-around; gap: 2px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.9);
    border-top: 1px solid #E6E0D5;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
  }
  .mnav-item {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 52px; padding: 4px 2px;
    border: none; background: none; cursor: pointer; font-family: inherit;
    font-size: 10px; font-weight: 600; letter-spacing: .01em; color: #7C7468;
    -webkit-tap-highlight-color: transparent; transition: color .3s ease;
  }
  .mnav-ico {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 28px; border-radius: 20px;
    transition: background .35s cubic-bezier(.16,1,.3,1);
  }
  .mnav-ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-item:active .mnav-ico { background: rgba(23,19,15,.06); }
  .mnav-item.is-active { color: #0A5261; }
  .mnav-item.is-active .mnav-ico { background: rgba(14,110,130,.14); }
  .mnav-badge {
    position: absolute; top: 2px; left: calc(50% + 8px);
    min-width: 15px; height: 15px; padding: 0 4px; border-radius: 20px;
    background: #C4321F; color: #fff; font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(255,255,255,.95);
  }

  /* ---- bottom sheet + scrim ---- */
  .msheet-scrim {
    position: fixed; inset: 0; z-index: 70; display: block;
    background: rgba(23,19,15,.5);
    opacity: 0; pointer-events: none; transition: opacity .38s ease;
  }
  .msheet-scrim.is-open { opacity: 1; pointer-events: auto; }
  .msheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: block;
    transform: translateY(100%);
    transition: transform .44s cubic-bezier(.16,1,.3,1);
    background: linear-gradient(180deg,#FFFFFF,#F7F4EF);
    border-radius: 26px 26px 0 0; border-top: 1px solid #E6E0D5;
    box-shadow: 0 -30px 90px -34px rgba(23,19,15,.35);
    max-height: 86vh; overflow-y: auto; will-change: transform;
    padding: 0 16px calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .msheet.is-open { transform: translateY(0); }
  .msheet-grip { position: sticky; top: 0; padding: 12px 0 8px; display: flex; justify-content: center; background: linear-gradient(180deg,#FFFFFF,rgba(255,255,255,.9)); cursor: grab; }
  .msheet-grip::before { content: ""; width: 42px; height: 5px; border-radius: 6px; background: #CEC5B5; }
  .msheet-title { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px; }
  .msheet-title span { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  .msheet-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E6E0D5; background: rgba(255,255,255,.94); color: #7C7468; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .msheet-row {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 14px 14px; margin-bottom: 6px; border-radius: 15px;
    border: 1px solid #E6E0D5; background: rgba(255,255,255,.94);
    font-family: inherit; font-size: 14px; font-weight: 500; color: #17130F;
    text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  }
  .msheet-row:active { transform: scale(.985); background: #F2EDE4; }
  .msheet-row svg { width: 20px; height: 20px; stroke: #0A5261; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .msheet-row .msheet-count { margin-left: auto; font-family: 'JetBrains Mono',monospace; font-size: 11px; color: #7C7468; }
  .msheet-danger { color: #B23A2A; justify-content: center; font-weight: 600; margin-top: 6px; }
  .msheet-danger svg { stroke: #B23A2A; }
  .msheet-cap { padding: 15px 16px; margin: 4px 0 10px; border-radius: 16px; border: 1px solid #E6E0D5; background: rgba(255,255,255,.94); }
  .msheet-cap-bar { height: 6px; border-radius: 6px; background: #E6E0D5; overflow: hidden; margin-top: 10px; }
  .msheet-cap-bar > i { display: block; height: 100%; width: 78%; border-radius: 6px; background: linear-gradient(90deg,#0E6E82,#7FC4D2); }
  .msheet-user { display: flex; align-items: center; gap: 12px; padding: 6px 4px 14px; }
  .msheet-user .msheet-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: linear-gradient(145deg,#1595AE,#0A5261); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
  .msheet-label { font-family: 'JetBrains Mono',monospace; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #7C7468; padding: 12px 4px 8px; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .msheet { transition: none; }
  .msheet-scrim { transition: none; }
}

/* ==========================================================================
   MOBILE "APPROVE & RELEASE" SHEET
   On a phone, approving a proof slides the notes + release panel up as a
   focused bottom sheet, instead of leaving it stacked far down the page.
   Driven by body.release-open, which app.js keeps in sync with the selection.
   ========================================================================== */
.rsheet-grip { display: none; }
.rsheet-scrim { display: none; }

@media (max-width: 1024px) {
  .rsheet-scrim {
    position: fixed; inset: 0; z-index: 70; display: block;
    background: rgba(23,19,15,.5);
    opacity: 0; pointer-events: none; transition: opacity .38s ease;
  }
  body.release-open .rsheet-scrim { opacity: 1; pointer-events: auto; }

  #releaseSheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    transform: translateY(105%);
    transition: transform .44s cubic-bezier(.16,1,.3,1);
    background: linear-gradient(180deg,#FFFFFF,#F7F4EF);
    border-radius: 26px 26px 0 0; border-top: 1px solid #E6E0D5;
    box-shadow: 0 -30px 90px -34px rgba(23,19,15,.35);
    max-height: 88vh; overflow-y: auto;
    gap: 12px !important;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    animation: none !important;          /* cancel the desktop rise-in so transform sticks */
  }
  body.release-open #releaseSheet { transform: translateY(0); }
  body.release-open .mnav { transform: translateY(100%); }   /* clear the tab bar for the focused release task */
  .mnav { transition: transform .3s cubic-bezier(.16,1,.3,1); }

  .rsheet-grip {
    display: flex; justify-content: center;
    position: sticky; top: 0; z-index: 3;
    padding: 12px 0 8px;
    background: linear-gradient(180deg,#FFFFFF,rgba(255,255,255,.85));
    cursor: grab;
  }
  .rsheet-grip::before { content: ""; width: 42px; height: 5px; border-radius: 6px; background: #CEC5B5; }

  #releaseSheet #notesWrap { box-shadow: none !important; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  #releaseSheet { transition: none; }
  .rsheet-scrim { transition: none; }
}