:root{--bg:#130407;--panel:#23080d;--panel2:#320c13;--line:#6b2030;--text:#fff3f5;--muted:#d8aab3;--accent:#8f1d2c;--good:#38d996;--warn:#ffce5c;--bad:#ff6b6b}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(145deg,#100306,#2a0710);color:var(--text)}
.hidden{display:none!important}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 20px 80px #0008}.login-card h1{margin:0 0 8px}.muted,.hint{color:var(--muted)}.hint{font-size:12px}.error{color:var(--bad);margin-top:12px;min-height:20px}
label{display:block;color:var(--muted);font-size:13px;margin:10px 0 6px}input,select,textarea{width:100%;background:#170509;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px;outline:none}textarea{min-height:80px}button{background:var(--accent);border:0;color:#fff3f5;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}button.warn{background:var(--warn)}button.bad{background:var(--bad);color:white}button.small{padding:6px 9px;font-size:12px}.topbar{height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 22px;border-bottom:1px solid var(--line);background:#170509cc;position:sticky;top:0;z-index:2;backdrop-filter:blur(8px)}.brand{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px}.py-logo,.login-logo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#8f1d2c;border:1px solid #b94a5c;color:white;font-weight:950;letter-spacing:-1px}.login-logo{margin-bottom:14px;width:54px;height:54px;border-radius:14px;font-size:20px}.login-logo span{display:block}.brand span{color:var(--accent)}.userline{font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:6px;overflow:auto;padding:12px 16px;background:#170509}.tab{white-space:nowrap;background:var(--panel);border:1px solid var(--line);color:var(--muted);padding:9px 12px;border-radius:999px}.tab.active{color:white;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.view{padding:20px;max-width:1600px;margin:0 auto}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:16px}.panel h2,.panel h3{margin:0 0 12px}.grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px}.grid.two{grid-template-columns:repeat(2,minmax(220px,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(200px,1fr))}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.subtabs button.active{background:#b12a3b;color:#fff}.kpis{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}.kpi .num{font-size:26px;font-weight:900}.kpi .lbl{color:var(--muted);font-size:12px}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:top}th{position:sticky;top:0;background:#2b0910;color:#f5cbd3;z-index:1}.right{text-align:right}.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#43101a;color:#ffd9df;font-size:12px}.ok{color:var(--good)}.due{color:var(--warn)}.over{color:var(--bad)}
.modal-backdrop{position:fixed;inset:0;background:#0009;z-index:10;display:grid;place-items:center;padding:18px}.modal{width:min(960px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 20px 80px #000}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.modal-head h3{margin:0}.formrow{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px}.line-row{display:grid;grid-template-columns:1fr 100px 80px;gap:8px;margin-bottom:8px;align-items:end}.compat-list{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px;max-height:360px;overflow:auto}.checkline{display:flex;gap:8px;align-items:center;background:#170509;border:1px solid var(--line);border-radius:10px;padding:8px}.checkline input{width:auto}@media(max-width:900px){.grid,.grid.two,.grid.three,.kpis,.formrow{grid-template-columns:1fr}.line-row{grid-template-columns:1fr}.view{padding:12px}}

/* Python FOAM v2.7 polish */
.app{min-height:100vh;display:flex;flex-direction:column}.view{flex:1}.app-footer{border-top:1px solid var(--line);background:#170509cc;color:var(--muted);font-size:12px;padding:12px 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.export-range-panel{background:linear-gradient(180deg,#3a0d16,#22070c);border:2px solid #b94a5c;box-shadow:0 0 0 3px rgba(143,29,44,.18),0 18px 50px rgba(0,0,0,.25)}.export-range-panel h3{font-size:20px}.date-range-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;align-items:end}.date-range-grid label{font-size:14px;color:#ffd5dc}.date-range-grid input,.date-range-grid select{font-size:17px;padding:13px;border-color:#b94a5c;background:#120407}.date-range-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.status-note{color:#ffd5dc;font-weight:700}.py-logo{box-shadow:0 0 0 2px rgba(255,255,255,.06) inset}
@media(max-width:900px){.date-range-grid{grid-template-columns:1fr}.app-footer{display:block}.app-footer div+div{margin-top:6px}}

/* Python FOAM v2.8 Data date picker cleanup */
.data-counts{margin-top:16px;margin-bottom:16px}.calendar-field{display:grid;grid-template-columns:1fr 58px;gap:8px;align-items:center}.calendar-field input{height:52px}.calendar-btn{height:52px;font-size:22px;padding:0;border:1px solid #d06a7a;background:#8f1d2c;box-shadow:0 0 0 2px rgba(255,255,255,.06) inset}.calendar-btn:hover{background:#b12a3b}.export-range-panel{margin-top:0}.export-range-panel .date-range-grid{margin-top:10px}

/* Python FOAM v2.9 Operations Dashboard integration */
.foam-ops-dashboard .ops-kpis{grid-template-columns:repeat(6,minmax(150px,1fr));margin-bottom:16px}.op-bar-chart{height:180px;display:flex;align-items:flex-end;gap:9px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 8px 0;overflow:auto}.op-bar-wrap{min-width:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}.op-bar{width:100%;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#d34b61,#8f1d2c);box-shadow:0 0 16px rgba(211,75,97,.22)}.op-bar-label{font-size:10px;color:var(--muted);writing-mode:vertical-rl;max-height:48px}.mini-kpi-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:#170509}.mini-kpi-row span{color:var(--muted)}.mini-kpi-row b{font-size:20px}@media(max-width:1200px){.foam-ops-dashboard .ops-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.foam-ops-dashboard .ops-kpis{grid-template-columns:1fr}}

.brand-logo{width:42px;height:42px;border-radius:10px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(177,42,59,.32))}.brand-name{color:var(--text)!important}.login-logo{background:transparent!important;border:0!important;width:70px!important;height:54px!important}.login-logo img{width:70px;height:54px;object-fit:contain}
.csv-import-panel{border:2px solid #b94a5c;background:linear-gradient(180deg,#330b13,#21070c)}.import-file-label{padding:10px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#170509;color:var(--text);display:inline-flex;align-items:center;gap:8px}.import-file-label input{display:none}.import-help{font-size:12px;color:var(--muted);line-height:1.45;margin-top:8px}

/* Python FOAM v4.1 context-sensitive module navigation */
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;overflow:visible;position:sticky;top:72px;z-index:1;border-bottom:1px solid var(--line)}
.main-tab{order:1}.context-subnav{order:2;flex-basis:100%;display:flex;gap:8px;flex-wrap:wrap;padding:10px 0 2px;border-top:1px solid rgba(107,32,48,.55)}
.context-subnav button{border:1px solid var(--line);background:#23080d;color:var(--muted);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800}.context-subnav button.active{background:#b12a3b;color:#fff;border-color:#d06a7a;box-shadow:0 0 0 1px rgba(208,106,122,.35) inset}.context-settings{order:3;padding-top:4px;border-top:0}.context-settings button{background:#170509;font-size:12px}.module-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.module-title p{margin:0;font-weight:800;color:#ffd5dc}
@media(max-width:900px){.tabs{top:72px}.context-subnav{overflow:auto;flex-wrap:nowrap}.context-subnav button{white-space:nowrap}}

/* Python FOAM v4.9 Sub-Asset health */
.chip{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:800;background:#43101a;color:#ffd9df}.chip.good{color:var(--good);border-color:rgba(56,217,150,.45);background:rgba(56,217,150,.10)}.chip.warn{color:var(--warn);border-color:rgba(255,206,92,.45);background:rgba(255,206,92,.10)}.chip.bad{color:var(--bad);border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.10)}

/* v5.3 Operations crew rotation dashboard strip */
.crew-status-panel{margin-bottom:14px;}
.crew-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px;}
.crew-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.035);box-shadow:0 8px 18px rgba(0,0,0,.18);}
.crew-card.days{border-color:rgba(50,209,124,.45);}
.crew-card.nights{border-color:rgba(98,168,255,.45);}
.crew-card.off{border-color:rgba(255,179,71,.45);opacity:.92;}
.crew-fleet{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:900;}
.crew-name{font-size:18px;font-weight:950;margin-top:6px;}
.crew-status{display:inline-flex;margin-top:10px;padding:6px 10px;border-radius:999px;background:rgba(128,12,31,.22);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
/* v6.2 PM schedule status colors */
.chip.good{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.45);color:#86efac;}
.chip.warn{background:rgba(234,179,8,.14);border-color:rgba(234,179,8,.5);color:#fde68a;}
.chip.bad{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.55);color:#fecaca;}


/* Python FOAM v6.5 mobile responsive layout */
.topbar-actions{display:flex;align-items:center;gap:8px}.mobile-menu-btn{display:none}.mobile-only{display:none}
@media(max-width:760px){
  body{background:#100306;}
  .topbar{height:auto;min-height:64px;padding:10px 12px;gap:10px;align-items:flex-start;position:sticky;top:0;z-index:30}
  .brand{font-size:17px;line-height:1.15;gap:8px;flex-wrap:wrap}.brand span:last-child{font-size:12px;color:var(--muted)}
  .brand-logo{width:34px;height:34px}.userline{font-size:11px;margin-top:3px}
  .topbar-actions{margin-left:auto}.mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px}.topbar-actions #logoutBtn{min-height:40px}
  .tabs{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);z-index:40;display:block;overflow:auto;padding:72px 14px 18px;background:linear-gradient(180deg,#23080d,#100306);border-right:1px solid var(--line);border-bottom:0;transform:translateX(-105%);transition:transform .18s ease;box-shadow:20px 0 60px rgba(0,0,0,.55)}
  body.mobile-nav-open .tabs{transform:translateX(0)}
  body.mobile-nav-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:35}
  .tab,.context-subnav button{display:block;width:100%;text-align:left;margin:0 0 8px;border-radius:12px;padding:12px 14px;white-space:normal}
  .context-subnav{display:block;border-top:1px solid var(--line);padding:10px 0 2px;margin:8px 0 12px}
  .context-settings{margin-top:0;padding-top:2px}
  .view{padding:10px;max-width:none}
  .panel{border-radius:14px;padding:12px;margin-bottom:12px}
  .module-title{display:block}.module-title h2{margin-bottom:6px}
  .grid,.grid.two,.grid.three,.kpis,.foam-ops-dashboard .ops-kpis,.shift-kpi-grid,.crew-card-grid,.date-range-grid{grid-template-columns:1fr!important;gap:10px}
  .actions,.subtabs{display:grid;grid-template-columns:1fr;gap:8px}.actions button,.subtabs button{width:100%;min-height:44px}
  input,select,textarea,button{font-size:16px;min-height:44px;padding:11px 12px}
  label{font-size:13px}.formrow{grid-template-columns:1fr!important;gap:10px}.line-row{grid-template-columns:1fr!important}
  .modal-backdrop{align-items:stretch;padding:0}.modal{width:100%;height:100vh;max-height:100vh;border-radius:0;border-left:0;border-right:0;padding:14px 12px 82px}.modal-head{position:sticky;top:0;background:var(--panel);z-index:2;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .modal .actions:last-child{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(35,8,13,.85),#23080d);padding:10px 0;border-top:1px solid var(--line)}
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}table{min-width:760px}th,td{padding:10px 8px;font-size:12px}
  .app-footer{font-size:11px;padding:10px 12px;margin-bottom:0}
  .compat-list{grid-template-columns:1fr;max-height:300px}
}
@media(min-width:761px){body.mobile-nav-open .tabs{transform:none}}

/* v6.12 light/dark mode */
body.light-mode{--bg:#f4f1f2;--panel:#ffffff;--panel2:#f8eef0;--line:#caa9b0;--text:#2b1116;--muted:#72545a;--accent:#8f1d2c;--good:#168a57;--warn:#9a6b00;--bad:#b4232d;background:#f4f1f2;color:var(--text)}
body.light-mode .topbar,body.light-mode .tabs,body.light-mode .app-footer{background:#fff8f9e8} body.light-mode input,body.light-mode select,body.light-mode textarea,body.light-mode .checkline{background:#fff;color:#2b1116} body.light-mode th{background:#f2dfe3;color:#50131f} body.light-mode .tab,body.light-mode .context-subnav button{background:#fff;color:#72545a} body.light-mode .panel{box-shadow:0 8px 24px rgba(70,20,30,.08)}
.location-planner table{min-width:1200px}

/* v6.13 Light Mode consistency — remap remaining hard-coded dark surfaces/text so nothing stays dark in Light Mode */
body.light-mode .pill{background:#f2dfe3;color:#7a1524}
body.light-mode .chip{background:#f2dfe3;color:#7a1524;border-color:#caa9b0}
body.light-mode .chip.good{background:rgba(22,138,87,.12);border-color:rgba(22,138,87,.40);color:#0f6b41}
body.light-mode .chip.warn{background:rgba(154,107,0,.14);border-color:rgba(154,107,0,.40);color:#7a5500}
body.light-mode .chip.bad{background:rgba(180,35,45,.12);border-color:rgba(180,35,45,.40);color:#9a1c25}
body.light-mode .mini-kpi-row{background:#f8eef0}
body.light-mode .import-file-label{background:#f8eef0;color:#2b1116}
body.light-mode .context-settings button{background:#f8eef0;color:#72545a}
body.light-mode .export-range-panel{background:linear-gradient(180deg,#ffffff,#f8eef0);border-color:#caa9b0;box-shadow:0 0 0 3px rgba(143,29,44,.10),0 12px 30px rgba(70,20,30,.10)}
body.light-mode .csv-import-panel{background:linear-gradient(180deg,#ffffff,#f8eef0);border-color:#caa9b0}
body.light-mode .date-range-grid label,body.light-mode .status-note,body.light-mode .module-title p{color:#8f1d2c}
body.light-mode .date-range-grid input,body.light-mode .date-range-grid select{background:#fff;border-color:#caa9b0}
body.light-mode .tab.active{background:#fbe9ec;color:#8f1d2c;border-color:#8f1d2c}
body.light-mode .crew-card{background:#ffffff}
body.light-mode .crew-status{background:rgba(143,29,44,.10);border-color:#caa9b0;color:#7a1524}
body.light-mode .modal .actions:last-child{background:linear-gradient(180deg,rgba(255,255,255,.85),#ffffff)}

/* v6.13 read-only accounts (View Only role): hide destructive controls. Writes are also blocked in save() and server-side.
   Scope to buttons only — data indicators (e.g. the red "chip bad" Swap/Down value in the Stage Log) also use .bad and must stay visible for read-only users. */
body.readonly-user button.bad{display:none !important}
body.readonly-user #saveUser,body.readonly-user #clearUser{display:none !important}


/* =====================================================================
   Python FOAM v6.14 — Phone & Tablet UX layer
   Goals: (1) never let the page exceed the screen width (was zooming out
   on phones), (2) compact header, (3) tables become tap-friendly cards on
   phones, (4) tighter vertical rhythm, (5) installable-app safe areas.
   Purely additive — overrides only where needed; desktop is unchanged.
   ===================================================================== */

/* 0) Global overflow guard. The root cause of the mobile cut-off was that
   form controls (a <select>'s longest option) and wide tables took an
   intrinsic min-width that stretched the layout past device-width, so the
   browser zoomed out. Allow shrinking + clamp the page. */
html,body{overflow-x:hidden;max-width:100%}
img{max-width:100%;height:auto}
input,select,textarea{min-width:0;max-width:100%}
.grid,.grid.two,.grid.three,.kpis,.formrow,.actions,.subtabs,.line-row,
.date-range-grid,.compat-list,.crew-card-grid,.ops-kpis{min-width:0}
/* Structural containers must be allowed to shrink at every width so a wide
   table (min-width) scrolls inside its own .tablewrap instead of stretching
   the flex column and pushing the page wider than the screen. */
.app,.view,.panel,.tablewrap,.module-title,.foam-ops-dashboard{min-width:0}
/* .view is a column-flex item: without an explicit width it stretches to its
   min-content (a wide min-width table), so overflow:auto never clips. An
   explicit width overrides that stretch -> wide tables scroll inside .tablewrap. */
.view{width:100%}
.tablewrap{max-width:100%;overflow-x:auto}

@media(max-width:760px){
  .app,.view,.panel,.foam-ops-dashboard,.module-title{max-width:100%;min-width:0}
  .view>*{min-width:0}
  .view{padding:10px 10px 24px}

  /* ---- Compact header: single row, reclaim vertical space ---- */
  .topbar{min-height:56px;padding:8px 10px;gap:6px;align-items:center;flex-wrap:wrap}
  .topbar>div:first-child{min-width:0;flex:1 1 auto}
  .brand{font-size:15px;gap:6px;line-height:1.1;flex-wrap:nowrap}
  .brand-logo{width:28px;height:28px}
  .brand span:last-child{display:none}           /* hide version no. in the header on phones */
  .userline{font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:70vw}
  .topbar-actions{gap:6px;margin-left:auto;flex:0 0 auto}
  .topbar-actions button{white-space:nowrap;font-size:11px;font-weight:700;
    padding:7px 8px;min-height:38px;line-height:1}
  .mobile-menu-btn{padding:7px 9px}

  /* ---- Tighter vertical rhythm ---- */
  label{margin:8px 0 4px}
  .panel{padding:12px;margin-bottom:10px;border-radius:14px}
  .panel h2{font-size:20px;margin-bottom:8px}
  .grid,.grid.two,.grid.three,.kpis,.formrow{gap:8px}
  input,select,textarea{padding:10px 11px}

  /* ---- Tables -> stacked cards.  mobile-6.14.js adds .pf-cards to the
     .tablewrap and data-label / helper classes to each <td>. ---- */
  .tablewrap.pf-cards{overflow:visible;border:0;border-radius:0;background:transparent}
  .tablewrap.pf-cards table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
  .tablewrap.pf-cards thead{display:none}   /* header row hidden; labels come from data-label */
  .tablewrap.pf-cards tbody{display:block}
  .tablewrap.pf-cards tbody tr{display:block;border:1px solid var(--line);border-radius:14px;
    background:var(--panel2);padding:6px 12px;margin-bottom:10px;box-shadow:0 6px 16px rgba(0,0,0,.16)}
  .tablewrap.pf-cards td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border:0;border-bottom:1px solid rgba(107,32,48,.35);padding:9px 0;font-size:13px;min-width:0}
  .tablewrap.pf-cards td:last-child{border-bottom:0}
  .tablewrap.pf-cards td>*{min-width:0}
  .tablewrap.pf-cards td::before{content:attr(data-label);flex:0 0 40%;color:var(--muted);
    font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:left}
  .tablewrap.pf-cards td[data-label='']::before{display:none}
  .tablewrap.pf-cards td.pf-empty{display:none}                          /* blank cell -> hide */
  .tablewrap.pf-cards td.pf-title{font-size:16px;font-weight:900;color:var(--text);
    border-bottom:1px solid var(--line);padding-top:2px}
  .tablewrap.pf-cards td.pf-title::before{align-self:center;color:var(--muted)}
  .tablewrap.pf-cards td.pf-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
    border-bottom:0;padding-top:10px}
  .tablewrap.pf-cards td.pf-actions::before{display:none}
  .tablewrap.pf-cards td.pf-actions button{min-height:40px;flex:1 1 auto}
  .tablewrap.pf-cards td.pf-full{display:block;text-align:center;color:var(--muted);border-bottom:0}
  .tablewrap.pf-cards td.pf-full::before{display:none}

  /* light-mode card surfaces */
  body.light-mode .tablewrap.pf-cards tbody tr{background:#ffffff}
}

/* ---- Tablet (portrait-ish): two columns where phones use one; tables stay tables ---- */
@media(min-width:761px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formrow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Installed-app safe areas (iOS notch / home indicator) ---- */
@supports(padding:max(0px)){
  @media(max-width:760px){
    .topbar{padding-left:max(10px,env(safe-area-inset-left));
      padding-right:max(10px,env(safe-area-inset-right))}
    .app-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  }
}