/* The look of Denka Approvals since October 2026: a slim icon menu, a search-led header, round shapes, one
   violet for everything you press and a berry for where you are and what needs you.

   Everything here hangs off <html data-ui="rail"> (set in index.html) and only overrides styles.css — tokens
   first, then the pieces that move. Take the attribute away and the previous look is back untouched, which is
   what ?ui=classic does for one device (see app.js). */

@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/rubik-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* app.js draws the Menu button for every look; only this one shows it, and only on a phone */
.nav-more { display: none }

/* ---------- tokens ---------- */
html[data-ui="rail"] {
  font-size: 17px;
  --font-geist-sans: 'Rubik';
  --bg: #f8f5fb; --surface: #ffffff; --surface-subtle: #faf6fc; --text: #1c1736; --secondary: #6c6787; --tertiary: #a9a3c0; --border: #eee8f5; --border-strong: #dcd3ea;
  --brand: #6a45ff; --brand-hover: #5631ea; --brand-subtle: #efeaff; --here: #e5387f; --here-glow: rgba(229, 56, 127, .30);
  --success: #0a8f5b; --success-bg: #e2f8ee; --warning: #b85c00; --warning-bg: #fff2da; --danger: #d92d3a; --danger-bg: #ffe8e8;
  --shadow-xs: 0 1px 3px rgba(60, 20, 90, .07); --shadow-sm: 0 8px 26px rgba(60, 20, 90, .08);
  --tile-1: linear-gradient(135deg, #e5387f, #ff6f61); --tile-2: #ffffff; --tile-3: #ffffff; --tile-4: #ffffff;
  --tone-1: #ffffff; --tone-2: #7a4bff; --tone-3: #f08c1c; --tone-4: #0a9b62;
  --radius-sm: 10px; --radius: 15px; --radius-lg: 18px; --radius-xl: 24px;
}

/* ---------- surfaces, buttons, the page header ---------- */
html[data-ui="rail"] .topbar { border-bottom: 0; padding-bottom: 8px }
html[data-ui="rail"] .logo { border-bottom: 0 }
html[data-ui="rail"] .app-nav nav a { border-left: 0; font-weight: 500 }
html[data-ui="rail"] .status { font-weight: 600 }
html[data-ui="rail"] .create-button, html[data-ui="rail"] .primary-btn { font-weight: 600 }
html[data-ui="rail"] .panel, html[data-ui="rail"] .tm-card, html[data-ui="rail"] .tm-kpi, html[data-ui="rail"] .wf-row { border-color: transparent; box-shadow: var(--shadow-sm) }
html[data-ui="rail"] :is(.status, .badge, .search-button, .create-button, .primary-btn, .overview-intro .primary, .oc-btn, .tm-btn) { border-radius: 999px }
html[data-ui="rail"] .topbar h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1 }
html[data-ui="rail"] .crumb { display: none }
html[data-ui="rail"] .search-button { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-xs); padding-inline: 16px 20px; min-width: 220px; justify-content: flex-start; gap: 9px }
html[data-ui="rail"] .search-button::before { content: ''; flex: 0 0 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat }
html[data-ui="rail"] .bell-btn { border-color: transparent; box-shadow: var(--shadow-xs) }
html[data-ui="rail"] .create-button, html[data-ui="rail"] .primary-btn { padding-inline: 20px; border: 0 }
/* one way in to a new request: the main button. The copy on the overview and the menu entry step aside */
html[data-ui="rail"] .overview-intro > a.primary, html[data-ui="rail"] .app-nav nav a[href="/requests/new"] { display: none }
html[data-ui="rail"] .overview-intro h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em }
/* overview numbers: separate tiles, each with its own tone and a small icon */
html[data-ui="rail"] .metric-grid { border: 0; background: none; gap: 14px; overflow: visible }
html[data-ui="rail"] .metric { position: relative; border: 0; border-radius: var(--radius-xl); min-height: 132px; padding: 22px; background: var(--tile, var(--surface)); box-shadow: var(--shadow-sm) }
html[data-ui="rail"] .metric small { font-weight: 500; padding-right: 48px }
html[data-ui="rail"] .metric b { font-size: 2.15rem; font-weight: 700; line-height: 1.1; margin: 12px 0 6px; letter-spacing: -.03em }
html[data-ui="rail"] .metric p { color: var(--secondary); font-size: .78rem }
html[data-ui="rail"] .metric::before { content: ''; position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 13px; background: var(--chip, #fff); box-shadow: var(--shadow-xs) }
html[data-ui="rail"] .metric::after { content: ''; position: absolute; top: 27px; right: 27px; width: 18px; height: 18px; background: var(--tone, var(--brand)); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat }
html[data-ui="rail"] .metric:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); --tile: var(--tile-1); --tone: var(--tone-1); --i: 0 }
html[data-ui="rail"] .metric:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); --tile: var(--tile-2); --tone: var(--tone-2); --i: 1 }
html[data-ui="rail"] .metric:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); --tile: var(--tile-3); --tone: var(--tone-3); --i: 2 }
html[data-ui="rail"] .metric:nth-child(4) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); --tile: var(--tile-4); --tone: var(--tone-4); --i: 3 }
/* the approve bar floats above the page (and above the journey markers, which carry their own stacking) */
html[data-ui="rail"] .sticky-decision { z-index: 20; border: 0; border-radius: 22px; padding: 14px 16px 14px 22px; box-shadow: 0 18px 44px rgba(30, 20, 80, .20) }
html[data-ui="rail"] .sticky-decision button { border-radius: 999px; padding-inline: 18px; min-height: 42px }
/* notifications: rows divided by a line. They sit inside .top-actions, whose rule for links would box each one */
html[data-ui="rail"] .notif-pop .notif-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; justify-content: flex-start; min-height: 0; padding: 11px 16px }
html[data-ui="rail"] .notif-pop .notif-item:hover { background: var(--surface-subtle) }
html[data-ui="rail"] .notif-pop .notif-item:last-child { border-bottom: 0 }
html[data-ui="rail"] .notif-pop .notif-foot { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--surface-subtle); min-height: 0; padding: 12px }

/* the menu: an icon on every entry, quieter section labels, a proper sign-out icon */
html[data-ui="rail"] .app-nav nav a > span:first-child { display: none }
html[data-ui="rail"] .app-nav nav a { gap: 11px; position: relative }
html[data-ui="rail"] .app-nav nav a::before { content: ''; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat }
html[data-ui="rail"] .app-nav nav a[href="/overview"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/approvals"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/team"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/requests"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/products"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/events"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/kols"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/activity"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/archive"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/verify"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E") }
html[data-ui="rail"] .app-nav nav a[href="/settings"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") }
html[data-ui="rail"] .nav-section { text-transform: lowercase; letter-spacing: 0; font-size: .74rem }
html[data-ui="rail"] .nav-section::first-letter { text-transform: uppercase }
html[data-ui="rail"] .user-signout { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 34px; min-height: 34px; padding: 0; border-radius: 999px; font-size: 0 }
html[data-ui="rail"] .user-signout::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center / contain no-repeat }
/* ---------- movement: quick, soft, and only where something is touched or arrives ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="rail"] :is(.app-nav nav a, .create-button, .primary-btn, .search-button, .bell-btn, .metric, .tm-kpi, .user-signout, a.simple-tr > span:last-child) { transition: background-color .18s ease, color .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease }
  html[data-ui="rail"] :is(.create-button, .primary-btn):hover { transform: translateY(-2px) }
  html[data-ui="rail"] :is(.create-button, .primary-btn, .bell-btn, .search-button):active { transform: scale(.96) }
  html[data-ui="rail"] :is(.metric, .tm-kpi):hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(30, 20, 80, .14) }
  html[data-ui="rail"] .app-nav nav a:not(.active):hover { transform: translateX(3px) }
  html[data-ui="rail"] a.simple-tr:hover > span:last-child { transform: translateX(5px); color: var(--brand) }
  html[data-ui="rail"] .bell-btn:hover svg { animation: look-ring .55s ease }
  /* a page settles into place as its content arrives. app.js marks <html data-nav> at that moment and keeps
     --nav-elapsed current, so a re-draw in the middle carries on from where it was instead of starting over */
  html[data-ui="rail"][data-nav] .app-main > :not(.topbar) { animation: look-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(0ms - var(--nav-elapsed, 0ms)) }
  html[data-ui="rail"][data-nav] .metric { animation: look-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 60ms - var(--nav-elapsed, 0ms)) }
}
@keyframes look-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes look-ring { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(14deg) } 60% { transform: rotate(-10deg) } }
html[data-ui="rail"] .metric:nth-child(1) { --chip: rgba(255, 255, 255, .22); box-shadow: 0 16px 36px rgba(229, 56, 127, .34) }
html[data-ui="rail"] .metric:nth-child(1) :is(small, b, p) { color: #fff }
html[data-ui="rail"] .metric:nth-child(1)::before { box-shadow: none }
html[data-ui="rail"] .metric:nth-child(2) { --chip: #f0eaff }
html[data-ui="rail"] .metric:nth-child(3) { --chip: #fff1dc }
html[data-ui="rail"] .metric:nth-child(4) { --chip: #e2f8ee }
html[data-ui="rail"] .metric:nth-child(n+2)::before { box-shadow: none }
html[data-ui="rail"] .app-nav nav a { border-radius: 14px; color: #57526f; min-height: 46px }
html[data-ui="rail"] .app-nav nav a.active { background: var(--here); color: #fff; box-shadow: 0 10px 22px var(--here-glow) }
html[data-ui="rail"] .app-nav nav a em { background: #6a45ff; color: #fff; font-weight: 700 }
html[data-ui="rail"] .app-nav nav a.active em { background: #fff; color: var(--here) }
html[data-ui="rail"] .user-avatar { background: var(--here); color: #fff }
html[data-ui="rail"] .create-button { background: linear-gradient(120deg, #6a45ff, #8f5bff); box-shadow: 0 12px 26px rgba(106, 69, 255, .36); font-weight: 600 }
html[data-ui="rail"] .sticky-decision .approve { background: linear-gradient(120deg, #6a45ff, #8f5bff); border-color: transparent }
html[data-ui="rail"] .create-button::before { content: '+'; font-size: 1.3rem; line-height: 1; margin-right: 8px; font-weight: 400 }
html[data-ui="rail"] .panel-head h3 { font-weight: 600 }
/* ---------- a computer: search-led header, slim menu ---------- */
@media (min-width: 761px) {
  /* one bar across the top: search stretches from the left, the bell and the main button sit at the right */
  html[data-ui="rail"] .topbar { flex-direction: column-reverse; align-items: stretch; gap: 26px }
  html[data-ui="rail"] .top-actions { gap: 10px }
  html[data-ui="rail"] .search-button { flex: 1 1 auto; max-width: 540px; min-height: 50px; margin-right: auto; padding-inline: 20px 24px; font-size: .88rem }
  html[data-ui="rail"] .bell-btn { width: 50px; height: 50px }
  html[data-ui="rail"] .create-button { min-height: 50px; padding-inline: 22px 26px }
}
@media (min-width: 761px) and (hover: hover) {
  html[data-ui="rail"] .app-nav { width: 78px; padding: 18px 14px; overflow: hidden auto; scrollbar-width: none; white-space: nowrap; border-right: 0; box-shadow: 1px 0 0 var(--border); transition: width .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease }
  /* open while the pointer is over it. app.js keeps .rail-open on <html>: the menu is redrawn with every page, so
     plain :hover would snap it shut and open it again on each re-draw */
  html[data-ui="rail"].rail-open .app-nav, html[data-ui="rail"] .app-nav:focus-within { width: 256px; box-shadow: 0 24px 64px rgba(28, 23, 54, .20) }
  html[data-ui="rail"] .app-main { margin-left: 78px; width: calc(100% - 78px); padding: 26px 44px 96px }
  html[data-ui="rail"] .app-nav .logo { padding-left: 8px; gap: 14px }
  html[data-ui="rail"] .app-nav nav { justify-items: start }
  html[data-ui="rail"] .app-nav nav a { width: 50px; padding: 0 16px; gap: 18px; overflow: hidden; transition: width .28s cubic-bezier(.2, .8, .2, 1), background-color .18s ease, color .18s ease }
  html[data-ui="rail"].rail-open .app-nav nav a, html[data-ui="rail"] .app-nav:focus-within nav a { width: 228px }
  html[data-ui="rail"] .user-card { padding-inline: 8px }
  /* closed: only the icons read; the words and the account details fade in as it opens */
  html[data-ui="rail"] .app-nav :is(.logo div, .nav-section, .user-meta, .user-actions) { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s }
  html[data-ui="rail"].rail-open .app-nav :is(.logo div, .nav-section, .user-meta, .user-actions), html[data-ui="rail"] .app-nav:focus-within :is(.logo div, .nav-section, .user-meta, .user-actions) { opacity: 1; visibility: visible; transition-delay: 0s }
  html[data-ui="rail"]:not(.rail-open) .app-nav:not(:focus-within) nav a em { position: absolute; left: 29px; top: 5px; min-width: 17px; padding: 0 4px; font-size: .58rem; line-height: 17px; margin: 0; box-shadow: 0 0 0 2px var(--surface) }
  html[data-ui="rail"]:not(.rail-open) .app-nav:not(:focus-within) nav a:hover { transform: none }
}
@media (min-width: 761px) and (hover: hover) and (max-height: 860px) {
  html[data-ui="rail"] .app-nav nav a { min-height: 40px }
  html[data-ui="rail"] .nav-section { margin: 10px 10px 4px }
}
/* ---------- a phone (760px and under) ----------
   The menu used to be hidden at this width with nothing in its place. Now a bar sits at the bottom of the
   screen within reach of the thumb, and Menu opens everything else as a full-screen list. */
@media (max-width: 760px) {
  /* the brand row and the page header */
  html[data-ui="rail"] .app-nav { display: block; padding: 12px 16px 0; border: 0; background: none }
  html[data-ui="rail"] .app-nav .logo { padding: 0; min-height: 40px; gap: 9px }
  html[data-ui="rail"] .app-nav .logo img { width: 30px; height: 30px }
  html[data-ui="rail"] .app-nav .logo small { display: none }
  html[data-ui="rail"] .app-main { padding: 10px 16px calc(136px + env(safe-area-inset-bottom, 0px)) }
  html[data-ui="rail"] .topbar { align-items: center; gap: 12px; margin-bottom: 20px }
  html[data-ui="rail"] .topbar h1 { font-size: 1.95rem }
  html[data-ui="rail"] .topbar p { max-width: none; font-size: .85rem }
  /* the bar: three places, the main button and Menu */
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 0; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface) }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a { display: none }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type :is(a[href="/overview"], a[href="/approvals"], a[href="/requests"], .nav-more) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; grid-row: 1; min-height: 52px; padding: 0; border: 0; border-radius: 16px; background: none; box-shadow: none; font: inherit; font-size: .62rem; font-weight: 600; color: var(--secondary); transform: none }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a[href="/overview"] { grid-column: 1 }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a[href="/approvals"] { grid-column: 2 }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a[href="/requests"] { grid-column: 4 }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type .nav-more { grid-column: 5 }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a::before, html[data-ui="rail"]:not(.menu-open) .nav-more::before { content: ''; flex: 0 0 22px; width: 22px; height: 22px; background: currentColor }
  html[data-ui="rail"]:not(.menu-open) .nav-more::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center / contain no-repeat }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a em { position: absolute; top: 3px; left: calc(50% + 5px); margin: 0; min-width: 17px; padding: 0 4px; font-size: .58rem; line-height: 17px; box-shadow: 0 0 0 2px var(--surface) }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a.active { color: var(--here) }
  /* the main button joins the bar as a round + */
  html[data-ui="rail"] .create-button { position: fixed; z-index: 51; left: calc(50% - 29px); bottom: calc(9px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; display: flex; align-items: center; justify-content: center }
  html[data-ui="rail"] .create-button::before { content: ''; margin: 0; width: 26px; height: 26px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat }
  html[data-ui="rail"] .app-main:has(.sticky-decision:not(.waiting)) .create-button, html[data-ui="rail"].menu-open .create-button { display: none }
  /* Menu: everything, full screen */
  html[data-ui="rail"].menu-open body { overflow: hidden }
  html[data-ui="rail"].menu-open .app-nav { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: 14px 18px calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--bg); animation: look-sheet .3s cubic-bezier(.2, .8, .2, 1) }
  html[data-ui="rail"].menu-open .nav-section { display: block; margin: 20px 6px 8px }
  html[data-ui="rail"].menu-open .app-nav nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; position: static; padding: 0; background: none; box-shadow: none }
  html[data-ui="rail"].menu-open .app-nav nav a { min-height: 54px; padding: 0 16px; gap: 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); color: var(--text); font-size: 1rem; font-weight: 600; transform: none }
  html[data-ui="rail"].menu-open .app-nav nav a::before { flex-basis: 20px; width: 20px; height: 20px; background: var(--brand) }
  html[data-ui="rail"].menu-open .app-nav nav a.active { background: var(--here); color: #fff; box-shadow: var(--shadow-sm) }
  html[data-ui="rail"].menu-open .app-nav nav a.active::before { background: #fff }
  html[data-ui="rail"].menu-open .app-nav nav a em { margin-left: auto }
  html[data-ui="rail"].menu-open .user-card { display: flex; margin-top: 22px; padding: 16px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-xs) }
  html[data-ui="rail"].menu-open .nav-more { display: grid; place-items: center; position: fixed; z-index: 61; top: 12px; right: 16px; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); font-size: 0 }
  html[data-ui="rail"].menu-open .nav-more::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat }
  /* things that pop up stay clear of the bar */
  html[data-ui="rail"] .notif-pop { z-index: 55 }
  html[data-ui="rail"] .toast { left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); text-align: center }

  /* numbers two by two */
  html[data-ui="rail"] .metric-grid { grid-template-columns: 1fr 1fr; gap: 12px }
  html[data-ui="rail"] .metric { min-height: 0; padding: 16px }
  html[data-ui="rail"] .metric small { display: block; min-height: 2.5em; padding-right: 38px; font-size: .76rem; line-height: 1.25 }
  html[data-ui="rail"] .metric b { font-size: clamp(1.3rem, 6.6vw, 1.75rem); margin: 8px 0 4px }
  html[data-ui="rail"] .metric p { font-size: .7rem }
  html[data-ui="rail"] .metric::before { top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 11px }
  html[data-ui="rail"] .metric::after { top: 20px; right: 20px; width: 16px; height: 16px }
  /* a request is a card, not a table row that runs off the side */
  html[data-ui="rail"] .simple-table { overflow: visible }
  html[data-ui="rail"] .simple-tr.head { display: none }
  html[data-ui="rail"] a.simple-tr { min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 5px 12px; padding: 14px 16px }
  html[data-ui="rail"] a.simple-tr > span:nth-child(1) { grid-area: 1 / 1 }
  html[data-ui="rail"] a.simple-tr > span:nth-child(6) { grid-area: 1 / 2; justify-self: end }
  html[data-ui="rail"] a.simple-tr > span:nth-child(3) { grid-area: 2 / 1; color: var(--secondary) }
  html[data-ui="rail"] a.simple-tr > span:nth-child(4) { grid-area: 2 / 2; justify-self: end; font-weight: 700 }
  html[data-ui="rail"] a.simple-tr > span:nth-child(5) { grid-area: 3 / 1 / 4 / 3; color: var(--tertiary); font-size: .74rem }
  html[data-ui="rail"] a.simple-tr > span:nth-child(5)::before { content: 'Stage · ' }
  html[data-ui="rail"] a.simple-tr > span:nth-child(2), html[data-ui="rail"] a.simple-tr > span:nth-child(7) { display: none }
  html[data-ui="rail"] a.simple-tr b { font-size: .92rem }
  /* ...and the same for the full register on the All requests page */
  html[data-ui="rail"] .request-table { overflow: visible }
  html[data-ui="rail"] .request-table .tr.th, html[data-ui="rail"] a.tr:has(> .request-cell) > .arrow { display: none }
  html[data-ui="rail"] a.tr:has(> .request-cell) { min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 12px; padding: 14px 16px }
  html[data-ui="rail"] a.tr > .request-cell { grid-area: 1 / 1; align-items: flex-start; min-width: 0 }
  html[data-ui="rail"] a.tr > .request-cell small { display: block; margin-top: 3px; color: var(--tertiary); font-size: .74rem }
  html[data-ui="rail"] a.tr > .request-cell b { font-size: .92rem }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(5) { grid-area: 1 / 2; justify-self: end }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(2) { grid-area: 2 / 1; padding-left: 44px; color: var(--secondary) }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(2) > :is(b, small) { display: inline; margin: 0; font-size: .8rem; font-weight: 500; color: inherit }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(2) > small::before { content: ' · ' }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(3) { grid-area: 2 / 2; justify-self: end }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(3) > b { font-weight: 700 }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(4) { grid-area: 3 / 1 / 4 / 3; padding-left: 44px; color: var(--tertiary) }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(4) > b { font-size: .74rem; font-weight: 500 }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(4) > b::before { content: 'Stage · ' }
  html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(3) > small, html[data-ui="rail"] a.tr:has(> .request-cell) > span:nth-child(4) > small { display: none }
  /* the approve bar stays in reach instead of waiting at the foot of a long page */
  html[data-ui="rail"] .sticky-decision:not(.waiting) { position: sticky; z-index: 40; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; gap: 6px; padding: 8px; border-radius: 999px }
  html[data-ui="rail"] .sticky-decision:not(.waiting) > div { display: none }
  html[data-ui="rail"] .sticky-decision button { flex: 0 0 auto; min-height: 46px; padding-inline: 12px; font-size: .8rem; white-space: nowrap }
  html[data-ui="rail"] .sticky-decision .approve { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700 }
  /* three buttons on one line: the middle one shows the short label it carries */
  html[data-ui="rail"] .sticky-decision .revise { font-size: 0 }
  html[data-ui="rail"] .sticky-decision .revise::before { content: attr(data-short); font-size: .8rem }
  html[data-ui="rail"] .sticky-decision.waiting { border-radius: 20px; padding: 14px 18px }
  /* search leads the page, the bar sits flush with a marker over the current place, the + is part of the bar */
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type { padding-top: 8px; box-shadow: 0 -1px 0 var(--border), 0 -10px 28px rgba(60, 20, 90, .05) }
  html[data-ui="rail"]:not(.menu-open) .app-nav nav:first-of-type a.active::after { content: ''; position: absolute; top: -8px; left: calc(50% - 15px); width: 30px; height: 3px; border-radius: 0 0 4px 4px; background: var(--here) }
  html[data-ui="rail"] .create-button { left: calc(50% - 28px); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 48px; border-radius: 17px }
  html[data-ui="rail"] .topbar { flex-direction: column-reverse; align-items: stretch; gap: 16px }
  html[data-ui="rail"] .top-actions { gap: 10px }
  html[data-ui="rail"] .top-actions .search-button { display: flex; flex: 1 1 auto; min-width: 0; min-height: 48px }
  html[data-ui="rail"] .bell-btn { width: 48px; height: 48px }
  html[data-ui="rail"] .sticky-decision:not(.waiting) { bottom: calc(82px + env(safe-area-inset-bottom, 0px)) }
}
@keyframes look-sheet { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }