/* RiverBase – shared styles */
/* the font is part of the site (no Google server: faster, works offline, no visitor data to Google) – Public Sans, SIL Open Font License */
@font-face{font-family:'Public Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url(font-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}
@font-face{font-family:'Public Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url(font-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#F4F8FC; --surface:#FFFFFF; --ink:#12304D; --muted:#5B7089; --line:#D8E4F0; --line-soft:#E8EFF6;
  --blue:#1F5C99; --blue-dark:#184D82; --blue-soft:#E3EFFA; --blue-mid:#9CC2E8; --hover:#F0F6FD;
  --green:#2E8756; --green-soft:#E3F3EA; --amber:#B97800; --amber-soft:#FBF0D9; --red:#C23B31; --red-soft:#FBE6E4;
  --r-sm:6px; --r-md:10px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
[hidden]{display:none!important}
h1{font-size:22px;margin:0;letter-spacing:-.015em}
h2{font-size:16px;margin:0}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* top bar */
.top{background:var(--blue);color:#fff}
.top-in{max-width:1400px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:baseline;gap:8px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:5px 12px;line-height:1.2}
.brand b{font-size:17px}
.brand small{font-size:13px;opacity:.85;font-weight:500}
.brand:hover,.brand:focus-visible{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7)}
.brand.cur{background:rgba(255,255,255,.14)}
.crumb{opacity:.6;font-size:18px;margin:0 -2px}
.pgname{font-size:16px;font-weight:600;white-space:nowrap}
.who{display:flex;align-items:center;gap:10px;font-size:13px}
.who .r{background:rgba(255,255,255,.18);padding:2px 8px;border-radius:4px;font-weight:600}
.who .em{opacity:.85}
.top .btn{background:transparent;border-color:transparent;color:#fff;padding:6px 10px;font-size:14px}
.top .btn:hover,.top .btn[aria-expanded=true]{background:rgba(255,255,255,.14)}
.top .btn.ico{width:36px;height:36px;padding:0;justify-content:center;font-size:16px}
#rbBack.ico{font-size:24px;line-height:1;padding-bottom:3px}
.top .btn.me{font-weight:600;opacity:.95}
.rbdrop.me{left:auto;right:0;min-width:220px}
.rbme-h{padding:8px 12px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;color:var(--ink)}
.rbme-h b{display:block}
.rbme-h small{color:var(--muted)}
button.rbdi{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
main{max-width:1400px;margin:0 auto;padding:18px 16px 60px}

/* buttons & inputs */
.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:7px 14px;font-weight:600;font-size:14px;text-decoration:none;color:var(--ink);display:inline-block}
.btn:hover{border-color:var(--blue-mid)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-dark)}
.btn.danger{color:var(--red)}
.btn.small{padding:4px 10px;font-size:13px}
.btn.icon{padding:7px 11px}
.push{margin-left:auto}
.sel,.inp{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;background:var(--surface)}
.sel{font-weight:600}
.check{display:flex;align-items:center;gap:7px;color:var(--muted);cursor:pointer;user-select:none}
.check input{width:16px;height:16px;accent-color:var(--blue)}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tabs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:6px 14px;border-radius:4px;font-weight:600;color:var(--muted)}
.tabs button.on{background:var(--blue);color:#fff}
.sub-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.sub-tabs button{border:0;background:none;padding:9px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.sub-tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}

/* tags */
.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap}
.tag.ok,.tag.confirmed{background:var(--green-soft);color:#1F6340}
.tag.bad{background:var(--red-soft);color:var(--red)}
.tag.warn,.tag.requested{background:var(--amber-soft);color:#7A5200}
.tag.info{background:var(--blue-soft);color:var(--blue)}
.tag.grey{background:var(--line-soft);color:var(--muted)}

/* panels & tables */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:18px}
.panel-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.grid-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:auto}
table{border-collapse:collapse;width:100%}
th{position:sticky;top:0;z-index:2;background:#F7FAFD;text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--hover)}
td.num,th.num{text-align:right}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}

/* dialog */
dialog{border:0;border-radius:var(--r-md);padding:0;width:min(580px,calc(100% - 20px));max-height:calc(100dvh - 30px);color:var(--ink)}
dialog::backdrop{background:rgba(18,48,77,.35)}
.m-body{padding:18px 20px;display:grid;gap:12px}
.m-body h2{font-size:18px}
.m-body h3{margin:8px 0 0;font-size:14px;display:flex;gap:8px;align-items:center}
.m-body h3 .lock{font-weight:400;color:var(--muted);font-size:12.5px}
.hint{margin:-6px 0 0;color:var(--muted);font-size:13.5px}
.err{color:var(--red);font-size:13.5px;margin:0}
.m-foot{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px 18px;position:sticky;bottom:0;background:var(--surface)}
.m-foot .primary{margin-left:auto}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
label.f{font-size:13px;color:var(--muted);display:block}
label.f input,label.f textarea,label.f select{display:block;width:100%;min-width:0;max-width:100%;margin-top:4px;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px;background:var(--surface);font-size:15px}
label.f input:disabled,label.f textarea:disabled,label.f select:disabled{background:var(--bg);color:var(--ink);border-color:var(--line-soft)}
fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-top:4px}
.seg label{flex:1;text-align:center;padding:8px 4px;cursor:pointer;color:var(--ink);font-size:14px}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--blue);color:#fff;font-weight:600}
.seg label.req:has(input:checked){background:var(--amber-soft);color:#7A5200}
.seg label.conf:has(input:checked){background:var(--green-soft);color:#1F6340}
.seg label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:-2px}
fieldset:disabled .seg label{cursor:default}

/* switch */
.switch{position:relative;width:40px;height:23px;flex:none;display:inline-block}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:#C9D6E3;border-radius:23px;transition:background .15s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked+span{background:var(--blue)}
.switch input:checked+span::after{transform:translateX(17px)}
.switch input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.switch input:disabled+span{opacity:.45}

/* login – deep water with slowly drifting waves */
.login{position:fixed;inset:0;z-index:40;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 16px calc(24px + env(safe-area-inset-bottom,0px));overflow-x:hidden;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 70% at 50% -10%,#2A6AA6 0%,rgba(42,106,166,0) 60%),linear-gradient(180deg,#123E69 0%,#0C2C4C 55%,#081E36 100%)}
.login .sea{position:fixed;inset:0;pointer-events:none;z-index:0}
.login .rays{position:absolute;inset:-20% -10% 30%;background:repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 40px,rgba(255,255,255,0) 40px 120px);filter:blur(18px);transform-origin:50% 0;
  animation:rbRays 22s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%);mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}
.login .wave{position:fixed;left:0;bottom:0;width:200%;height:var(--h);background-repeat:repeat-x;background-size:50% 100%;animation:rbDrift var(--t) linear infinite}
.login .w1{--h:46vh;--t:48s;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201440%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C320%20L0%2C70.0%20L24%2C75.4%20L48%2C80.6%20L72%2C85.3%20L96%2C89.3%20L120%2C92.5%20L144%2C94.7%20L168%2C95.9%20L192%2C95.9%20L216%2C94.7%20L240%2C92.5%20L264%2C89.3%20L288%2C85.3%20L312%2C80.6%20L336%2C75.4%20L360%2C70.0%20L384%2C64.6%20L408%2C59.4%20L432%2C54.7%20L456%2C50.7%20L480%2C47.5%20L504%2C45.3%20L528%2C44.1%20L552%2C44.1%20L576%2C45.3%20L600%2C47.5%20L624%2C50.7%20L648%2C54.7%20L672%2C59.4%20L696%2C64.6%20L720%2C70.0%20L744%2C75.4%20L768%2C80.6%20L792%2C85.3%20L816%2C89.3%20L840%2C92.5%20L864%2C94.7%20L888%2C95.9%20L912%2C95.9%20L936%2C94.7%20L960%2C92.5%20L984%2C89.3%20L1008%2C85.3%20L1032%2C80.6%20L1056%2C75.4%20L1080%2C70.0%20L1104%2C64.6%20L1128%2C59.4%20L1152%2C54.7%20L1176%2C50.7%20L1200%2C47.5%20L1224%2C45.3%20L1248%2C44.1%20L1272%2C44.1%20L1296%2C45.3%20L1320%2C47.5%20L1344%2C50.7%20L1368%2C54.7%20L1392%2C59.4%20L1416%2C64.6%20L1440%2C70.0%20L1440%2C320%20Z%27%20fill%3D%27%234F8FCB%27/%3E%3C/svg%3E")}
.login .w2{--h:34vh;--t:36s;opacity:.15;animation-direction:reverse;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201440%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C320%20L0%2C110.0%20L24%2C115.6%20L48%2C120.6%20L72%2C124.6%20L96%2C127.1%20L120%2C128.0%20L144%2C127.1%20L168%2C124.6%20L192%2C120.6%20L216%2C115.6%20L240%2C110.0%20L264%2C104.4%20L288%2C99.4%20L312%2C95.4%20L336%2C92.9%20L360%2C92.0%20L384%2C92.9%20L408%2C95.4%20L432%2C99.4%20L456%2C104.4%20L480%2C110.0%20L504%2C115.6%20L528%2C120.6%20L552%2C124.6%20L576%2C127.1%20L600%2C128.0%20L624%2C127.1%20L648%2C124.6%20L672%2C120.6%20L696%2C115.6%20L720%2C110.0%20L744%2C104.4%20L768%2C99.4%20L792%2C95.4%20L816%2C92.9%20L840%2C92.0%20L864%2C92.9%20L888%2C95.4%20L912%2C99.4%20L936%2C104.4%20L960%2C110.0%20L984%2C115.6%20L1008%2C120.6%20L1032%2C124.6%20L1056%2C127.1%20L1080%2C128.0%20L1104%2C127.1%20L1128%2C124.6%20L1152%2C120.6%20L1176%2C115.6%20L1200%2C110.0%20L1224%2C104.4%20L1248%2C99.4%20L1272%2C95.4%20L1296%2C92.9%20L1320%2C92.0%20L1344%2C92.9%20L1368%2C95.4%20L1392%2C99.4%20L1416%2C104.4%20L1440%2C110.0%20L1440%2C320%20Z%27%20fill%3D%27%233B7AB8%27/%3E%3C/svg%3E")}
.login .w3{--h:22vh;--t:26s;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201440%20320%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C320%20L0%2C150.0%20L24%2C154.9%20L48%2C158.9%20L72%2C161.4%20L96%2C161.9%20L120%2C160.4%20L144%2C157.1%20L168%2C152.5%20L192%2C147.5%20L216%2C142.9%20L240%2C139.6%20L264%2C138.1%20L288%2C138.6%20L312%2C141.1%20L336%2C145.1%20L360%2C150.0%20L384%2C154.9%20L408%2C158.9%20L432%2C161.4%20L456%2C161.9%20L480%2C160.4%20L504%2C157.1%20L528%2C152.5%20L552%2C147.5%20L576%2C142.9%20L600%2C139.6%20L624%2C138.1%20L648%2C138.6%20L672%2C141.1%20L696%2C145.1%20L720%2C150.0%20L744%2C154.9%20L768%2C158.9%20L792%2C161.4%20L816%2C161.9%20L840%2C160.4%20L864%2C157.1%20L888%2C152.5%20L912%2C147.5%20L936%2C142.9%20L960%2C139.6%20L984%2C138.1%20L1008%2C138.6%20L1032%2C141.1%20L1056%2C145.1%20L1080%2C150.0%20L1104%2C154.9%20L1128%2C158.9%20L1152%2C161.4%20L1176%2C161.9%20L1200%2C160.4%20L1224%2C157.1%20L1248%2C152.5%20L1272%2C147.5%20L1296%2C142.9%20L1320%2C139.6%20L1344%2C138.1%20L1368%2C138.6%20L1392%2C141.1%20L1416%2C145.1%20L1440%2C150.0%20L1440%2C320%20Z%27%20fill%3D%27%235C9AD3%27/%3E%3C/svg%3E")}
@keyframes rbDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rbRays{from{transform:skewX(-4deg) translateX(-2%)}to{transform:skewX(4deg) translateX(2%)}}
@media (prefers-reduced-motion:reduce){.login .wave,.login .rays{animation:none}}
.login-card{position:relative;z-index:1;margin-top:auto;flex:none;background:var(--surface);border-radius:14px;width:min(400px,100%);padding:28px 26px 22px;box-shadow:0 24px 60px rgba(3,18,36,.45),0 2px 6px rgba(3,18,36,.2)}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login-logo svg{width:46px;height:46px;flex:none;border-radius:10px}
.login-logo b{display:block;font-size:21px;letter-spacing:-.02em;color:var(--blue)}
.login-logo small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.login-card h1{font-size:20px;margin-bottom:2px}
.login-card p.sub{color:var(--muted);margin:0 0 18px}
.login-card form{display:grid;gap:12px}
.login-card .btn.primary{padding:11px 14px;font-size:15px;justify-content:center}
.login-foot{position:relative;z-index:1;margin:0 0 auto;text-align:center;color:rgba(255,255,255,.62);font-size:12.5px}
.login-foot a{color:rgba(255,255,255,.85)}
.demo{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.demo button{display:block;width:100%;text-align:left;border:1px solid var(--line-soft);background:var(--bg);border-radius:var(--r-sm);padding:6px 10px;margin-top:5px;font-size:13px}
.demo button b{color:var(--ink)}
.sent{background:var(--green-soft);color:#1F6340;border-radius:var(--r-sm);padding:12px;font-size:14px}
.noaccess{max-width:520px;margin:60px auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;text-align:center}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);opacity:0;transition:.2s;z-index:50;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  main{padding:12px 8px 60px}
  .two{grid-template-columns:minmax(0,1fr)}
  .who .em{display:none} .top .btn.me::before{content:'👤'}
  .push{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* install banner */
.install{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--surface);border:1px solid var(--blue-mid);box-shadow:0 8px 28px rgba(18,48,77,.25);border-radius:var(--r-md);padding:14px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:560px;margin:0 auto}
.install div{flex:1;min-width:200px}
.install span{color:var(--muted);font-size:14px}
.install .shareico{display:inline-flex;vertical-align:-3px;color:var(--blue)}
body.has-rbbar .install{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.hrow{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px}
.hrow small{color:var(--muted)}

/* import assistant */
dialog.wide{width:min(1060px,calc(100% - 20px));max-width:calc(100% - 20px)}
.imp-top{display:flex;gap:10px;flex-wrap:wrap}
.imp-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:8px;background:var(--bg);border-radius:var(--r-md);padding:10px}
.imp-map select{font-size:13.5px}
.imp-prev{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.imp-prev table{font-size:13px}
.imp-prev td,.imp-prev th{padding:4px 8px;white-space:nowrap}
.imp-sum{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}

.rbfoot{max-width:1200px;margin:28px auto 18px;padding:0 16px;color:var(--muted);font-size:13px;text-align:center}
.rbfoot a{color:var(--blue)}

/* ---------------- navigation: Modules menu (pc), bar at the bottom + Menu (phone) ---------------- */
.rbmods{position:relative}
.rbdrop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 30px rgba(18,48,77,.2);min-width:250px;padding:6px}
.rbdi{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-weight:500}
.rbdi:hover{background:var(--hover)}
.rbdi.cur{background:var(--blue-soft);font-weight:700}
.rbb{background:var(--red);color:#fff;border-radius:10px;font-size:11px;font-weight:700;padding:0 6px;line-height:18px;min-width:18px;text-align:center}
.rbbar{display:none}
dialog.rbsheet{margin:auto auto 0;width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:88dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
.rbs-in{padding:10px 14px 16px}
.rbs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rbs-head b{font-size:17px}
.rbs-me{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.rbsi{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.rbsi.cur{background:var(--blue-soft)}
.rbsi small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.rbsi.big{border:1px solid var(--line);margin-bottom:8px}
.rbs-acts{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}

/* one style for the main tabs of every page: cards with a short line and a number */
/* the tabs of every module: one row of equal tiles on a computer, two columns on a phone – the same everywhere */
.nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-bottom:16px}
.nav button{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 10px;text-align:left;min-height:64px;color:var(--ink)}
.nav button b{display:block;font-size:16px}
.nav button small{color:var(--muted);font-size:13px;font-weight:400}
.nav button.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue);background:#FAFCFF}
.nav .num{float:right;font-weight:700;border-radius:12px;padding:0 9px;font-size:14px;line-height:24px}
.num.red{background:var(--red);color:#fff}.num.amber{background:var(--amber-soft);color:#7A5200}


/* search + help in the top bar */
.rbtools{display:flex;gap:2px;align-items:center;margin-left:auto}
#rbHelp{font-weight:700;min-width:34px}
dialog.rbsearch{margin:6vh auto auto;width:min(640px,calc(100% - 16px))}
.rbq-in{padding:12px}
.rbq-top{display:flex;gap:8px}
.rbq-top input{flex:1;min-width:0;border:1px solid var(--blue-mid);border-radius:var(--r-sm);padding:10px 12px;font-size:16px}
.rbq-res{max-height:65dvh;overflow:auto;margin-top:8px}
.rbq-res h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 10px 4px}
.rbq-res .rbsi{font-size:14px;padding:9px 10px}
.rbq-res .rbsi:hover,.rbq-res .rbsi:focus{background:var(--hover)}
.rbq-res p{margin:10px}
.rbhelp p{margin:0 0 10px;line-height:1.55}
@media (max-width:760px){
  body.has-rbbar #rbBack, body.has-rbbar .top .btn.home[href], body.has-rbbar .rbmods, body.has-rbbar .top .who > :not(#rbSaving), body.has-rbbar .hide-phone{display:none!important}   /* all of these are in the phone Menu */
  .top-in{padding:8px 12px}
  body.has-rbbar .top-in{flex-wrap:nowrap}
  body.has-rbbar .brand{flex:none;padding:4px 9px}
  body.has-rbbar .brand small{display:none}
  body.has-rbbar .pgname{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .rbtools{margin-left:auto;flex:none}
  .rbtools .lbl{display:none}
  dialog.rbsearch{margin:0 auto auto;width:100%;max-width:100%;border-radius:0 0 14px 14px}
  .rbbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 14px rgba(18,48,77,.08)}
  .rbbar a,.rbbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11.5px;font-weight:600;color:var(--muted);text-decoration:none;position:relative;padding:2px 0}
  .rbbar i{font-style:normal;font-size:20px;line-height:24px}
  .rbbar .on{color:var(--blue)}
  .rbbar .warn{color:var(--red)}
  .rbbar .rbb{position:absolute;top:-2px;left:calc(50% + 6px)}
  body.has-rbbar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body.has-rbbar .fab, body.has-rbbar .ffab{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important}
  body.has-rbbar .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  body.has-rbbar .install{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .nav{grid-auto-flow:row;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .nav button{min-height:54px;padding:10px} .nav button small{font-size:12px}
  .sub-tabs{flex-wrap:wrap;overflow:visible}
  .sel{max-width:100%;min-width:0;text-overflow:ellipsis}              /* long ship · company names */
  .bar>*{max-width:100%}
  .bar .push{flex-wrap:wrap}
  .bar .push>.btn{flex:1 1 auto}          /* second row of tabs: wrap instead of sliding out of view */
}
@media print{ .rbbar,.rbdrop{display:none!important} }

/* client check (cruise reports, voyage planning) */
.pick{display:grid;gap:8px;margin-top:10px}
.pick .btn{text-align:left;padding:11px 14px}
dialog#rbAsk{width:min(460px,calc(100% - 20px))}

/* sync status light (top bar): green online, orange offline, blue waiting */
.top .rbnet.ok{color:#fff}
.top .rbnet.ok .dot{color:#6EE7A0}
.top .rbnet.wait .dot{color:var(--blue)}
.top .rbnet{font-size:13px;padding:5px 10px;white-space:nowrap}
.top .rbnet.off{background:#FBF0D9;color:#7A5200;border-color:#EBCF94}
.top .rbnet.wait{background:#fff;color:var(--blue);border-color:#fff}
.top .rbnet.sync{background:rgba(255,255,255,.2)}
@media (max-width:760px){ .top .rbnet{font-size:12px;padding:5px 8px} .top .rbnet .lbl{display:none}
  body.has-rbbar:has(.fab:not([hidden])) .toast{bottom:calc(146px + env(safe-area-inset-bottom,0px))} }   /* messages above the red report button */
/* spelling (English): hint under a text field, and the spell check of a page */
.spellhint{font-size:13px;color:#7A5200;background:var(--amber-soft);border-radius:6px;padding:5px 8px;margin-top:4px;line-height:1.9}
.spellhint .sw{white-space:nowrap;margin-right:8px}
.spellhint s{color:var(--red)}
.spellhint button{border:1px solid #E5C77F;background:#fff;color:var(--blue);border-radius:5px;padding:1px 7px;font-weight:600;font-size:13px;cursor:pointer}
.spellhint button.ghost{border-color:transparent;background:none;color:#7A5200;font-weight:400;text-decoration:underline}
.spellrow{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding:10px 0}
.spellrow .sw1{flex:1 1 260px;min-width:0}
.spellrow .sw1>b{color:var(--red);font-size:16px}
.spellrow .sctx{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.spellrow .sw2{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.spellrow .sw2 .inp{width:120px;padding:5px 8px}
/* toolbar above a list – the same in every module: search / filters on the left, buttons on the right, "+ Add …" (blue) always last */
.tbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.tbar .push{margin-left:auto}
.tbar .grow{flex:1 1 220px;min-width:0}
.tbar .info{color:var(--muted)}
.tbar .allgood{margin:0;flex:1 1 220px}
@media (max-width:760px){ .tbar .push{margin-left:0} .tbar>.btn,.tbar .push .btn{flex:1 1 auto} .tbar .push{display:flex;gap:8px;flex-wrap:wrap;width:100%} }
/* filters inside a tab: the thin sub-tabs, with a count – the same in every module */
.sub-tabs .c{display:inline-block;min-width:20px;border-radius:10px;padding:0 6px;margin-left:5px;font-size:12px;line-height:19px;background:var(--soft);color:var(--muted);text-align:center}
.sub-tabs .c.red{background:var(--red);color:#fff}.sub-tabs .c.amber{background:var(--amber-soft);color:#7A5200}
/* one blue button per screen: in a toolbar the other buttons are behind "More" (the same in every module, phone and pc) */
.tbar .tmore{display:none}
.tbar .push.hasmore .btn:not(.primary):not(.tmore){display:none}
.tbar .push.hasmore.open .btn:not(.primary):not(.tmore){display:inline-flex;justify-content:center}
.tbar .push.hasmore .tmore{display:inline-flex;justify-content:center;flex:0 0 auto}
.tbar .push.hasmore{display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* crew work lists: crew card documents, day sheet, hours (rb-crew.js) */
.docrow{display:grid;grid-template-columns:1.5fr minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.docrow:last-child{border-bottom:0}
.docrow input,.docrow select{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 8px;font-size:14px}
.docrow .st{font-size:12px}
.dsheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.dhead,.drow{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(260px,2.4fr) 110px 110px 56px;gap:10px;align-items:center;padding:8px 12px}
.dhead{background:#F7FAFD;font-size:12.5px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.drow{border-bottom:1px solid var(--line-soft)}
.drow:last-child{border-bottom:0}
.drow.off{background:var(--bg)}
.drow.warn{background:#FFFAF0}
.drow .who b{display:block}
.drow .who small{color:var(--muted);display:block}
.blocks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.blk{display:flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line-soft);border-radius:8px;padding:4px 6px}
.blk input{border:1px solid var(--line);border-radius:6px;padding:6px 4px;font-size:15px;width:96px}
.blk input:disabled{color:var(--muted)}
.blk .x{border:0;background:none;color:var(--red);font-size:18px;padding:0 4px;cursor:pointer}
.addb{border:1px dashed var(--blue-mid);background:none;color:var(--blue);border-radius:8px;padding:6px 10px;font-weight:600;cursor:pointer}
.drow .wk b,.drow .rs b{font-size:16px;display:block}
.drow .rs small{color:var(--muted);font-size:11.5px}
.drow .wmsg{display:block;color:#8A5A00;font-size:11.5px;font-weight:600}
.drow .offbox{display:flex;align-items:center;justify-content:center}
.drow .offbox input{width:22px;height:22px;accent-color:var(--blue)}
.drow .lbl{display:none}
.hsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.hsum div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px}
.hsum b{display:block;font-size:20px}
.hsum small{color:var(--muted)}
@media (max-width:760px){
  .docrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dhead{display:none}
  .drow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:6px}
  .drow .who,.drow .blocks{grid-column:1/-1}
  .drow .lbl{display:block;font-size:12px;color:var(--muted)}
  .drow .offbox{justify-content:flex-start;gap:8px}
  .hsum{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.linkbtn{border:0;background:none;color:var(--blue);font-weight:600;padding:0;cursor:pointer;font:inherit;font-weight:600}

/* copy ship: which parts go along */
.cparts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px;margin:6px 0 4px}
.cpart{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;color:var(--ink)}
.cpart input{margin-top:3px}
.cpart b{display:block;font-size:14px}.cpart small{color:var(--muted);font-size:12.5px}
.cpart:has(input:checked){background:var(--blue-soft);border-color:var(--blue-mid)}
.cpart.off{opacity:.55}

/* folding list headings (Do now, Soon …) */
.rb-fold-h{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.rb-fold-h:is(h2), .rb-fold-h > h2{display:flex;align-items:center;gap:8px}
.rb-fold-h:is(h2)::after, .rb-fold-h > h2::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);margin-left:4px;transition:transform .15s;flex:none}
.rb-fold-h.folded:is(h2)::after, .rb-fold-h.folded > h2::after{transform:rotate(-45deg)}
.rb-fold-h:hover:is(h2), .rb-fold-h:hover > h2{color:var(--blue)}
.rb-folded{display:none!important}
.group:has(> .rb-fold-h.folded){margin-bottom:8px}

/* new ship wizard + "get the ship ready" list */
.wz-steps{display:flex;gap:6px;margin:-4px 0 14px;font-size:12.5px;font-weight:700;color:var(--muted)}
.wz-steps span{flex:1;border-top:3px solid var(--line);padding-top:6px}
.wz-steps span.on{border-color:var(--blue);color:var(--blue)}
.wz-opts{display:grid;gap:8px;margin-bottom:12px}
.wz-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px;cursor:pointer}
.wz-opt:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.wz-opt input{margin-top:3px;accent-color:var(--blue)}
.wz-opt b{display:block}.wz-opt small{display:block;color:var(--muted);font-size:13px}
ol.ready{margin:0;padding:0;list-style:none;display:grid;gap:6px;counter-reset:r}
ol.ready li{counter-increment:r;display:flex;gap:10px;align-items:baseline}
ol.ready li:before{content:counter(r);flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:12.5px;font-weight:700;display:inline-grid;place-items:center}
ol.ready li.done:before{content:"✓";background:var(--green-soft);color:var(--green)}
ol.ready li.done span{color:var(--muted);text-decoration:line-through}

/* visitor demo: choose a role, and the band under the top bar */
.login-card.wide{width:min(560px,100%)}
.vroles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px}
.vroles button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:11px 13px;cursor:pointer;font:inherit;color:var(--ink)}
.vroles button:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.vroles b{display:block;font-size:15px}.vroles small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.35}
.trydemo{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);display:grid;gap:8px;text-align:center}
.trydemo span{color:var(--muted);font-size:13px}
.trydemo .btn{justify-content:center;padding:10px 14px}
.demobar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:#FFF6E0;border-bottom:1px solid #EBCF94;color:#5C4400;padding:7px 16px;font-size:13.5px}
.demobar .dbtn{margin-left:auto;display:flex;gap:6px}
.demobar button{border:1px solid #D9B865;background:#fff;color:#5C4400;border-radius:6px;padding:4px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:760px){ .demobar{padding:6px 12px;font-size:12.5px} .demobar .dbtn{margin-left:0} }

/* share RiverBase */
.shcard{display:block;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);margin-bottom:14px}
.shcard img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover}
.shcard div{padding:10px 12px;background:#F3F6F9;display:grid;gap:2px}
.shcard small{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.shcard b{font-size:15px}.shcard span{font-size:13px;color:var(--muted)}
.shbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.shb{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:10px 12px;font:inherit;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.shb:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.shb i{width:12px;height:12px;border-radius:50%;flex:none}
.trydemo .linkbtn{justify-self:center;font-size:13px}

.toggle-row{display:flex;align-items:center;gap:12px;padding:10px 0}

/* start point banner (maintenance, safety checklist) */
.startbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--amber-soft,#FBF0D9);border:1px solid #EBCF94;border-radius:12px;padding:12px 14px;margin:0 0 12px}
.startbar>div{flex:1 1 280px;display:flex;flex-direction:column;gap:2px}

/* ---------- one look on every page: deep-water header, a quiet sea at the bottom, panels lifted off it ---------- */
.top{background:linear-gradient(100deg,#123E69 0%,#1A4F86 55%,#1F5C99 100%)}
body:has(> header.top){background:linear-gradient(180deg,#EAF2FA 0,#F4F8FC 220px) no-repeat,var(--bg)}
body:has(> header.top)::after{content:"";position:fixed;left:0;right:0;bottom:0;height:min(26vh,230px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,320 L0,70.0 L24,75.4 L48,80.6 L72,85.3 L96,89.3 L120,92.5 L144,94.7 L168,95.9 L192,95.9 L216,94.7 L240,92.5 L264,89.3 L288,85.3 L312,80.6 L336,75.4 L360,70.0 L384,64.6 L408,59.4 L432,54.7 L456,50.7 L480,47.5 L504,45.3 L528,44.1 L552,44.1 L576,45.3 L600,47.5 L624,50.7 L648,54.7 L672,59.4 L696,64.6 L720,70.0 L744,75.4 L768,80.6 L792,85.3 L816,89.3 L840,92.5 L864,94.7 L888,95.9 L912,95.9 L936,94.7 L960,92.5 L984,89.3 L1008,85.3 L1032,80.6 L1056,75.4 L1080,70.0 L1104,64.6 L1128,59.4 L1152,54.7 L1176,50.7 L1200,47.5 L1224,45.3 L1248,44.1 L1272,44.1 L1296,45.3 L1320,47.5 L1344,50.7 L1368,54.7 L1392,59.4 L1416,64.6 L1440,70.0 L1440,320 Z' fill='%23DCE9F6'/%3E%3Cpath d='M0,320 L0,110.0 L24,115.6 L48,120.6 L72,124.6 L96,127.1 L120,128.0 L144,127.1 L168,124.6 L192,120.6 L216,115.6 L240,110.0 L264,104.4 L288,99.4 L312,95.4 L336,92.9 L360,92.0 L384,92.9 L408,95.4 L432,99.4 L456,104.4 L480,110.0 L504,115.6 L528,120.6 L552,124.6 L576,127.1 L600,128.0 L624,127.1 L648,124.6 L672,120.6 L696,115.6 L720,110.0 L744,104.4 L768,99.4 L792,95.4 L816,92.9 L840,92.0 L864,92.9 L888,95.4 L912,99.4 L936,104.4 L960,110.0 L984,115.6 L1008,120.6 L1032,124.6 L1056,127.1 L1080,128.0 L1104,127.1 L1128,124.6 L1152,120.6 L1176,115.6 L1200,110.0 L1224,104.4 L1248,99.4 L1272,95.4 L1296,92.9 L1320,92.0 L1344,92.9 L1368,95.4 L1392,99.4 L1416,104.4 L1440,110.0 L1440,320 Z' fill='%23D0E1F2' opacity='.8'/%3E%3Cpath d='M0,320 L0,150.0 L24,154.9 L48,158.9 L72,161.4 L96,161.9 L120,160.4 L144,157.1 L168,152.5 L192,147.5 L216,142.9 L240,139.6 L264,138.1 L288,138.6 L312,141.1 L336,145.1 L360,150.0 L384,154.9 L408,158.9 L432,161.4 L456,161.9 L480,160.4 L504,157.1 L528,152.5 L552,147.5 L576,142.9 L600,139.6 L624,138.1 L648,138.6 L672,141.1 L696,145.1 L720,150.0 L744,154.9 L768,158.9 L792,161.4 L816,161.9 L840,160.4 L864,157.1 L888,152.5 L912,147.5 L936,142.9 L960,139.6 L984,138.1 L1008,138.6 L1032,141.1 L1056,145.1 L1080,150.0 L1104,154.9 L1128,158.9 L1152,161.4 L1176,161.9 L1200,160.4 L1224,157.1 L1248,152.5 L1272,147.5 L1296,142.9 L1320,139.6 L1344,138.1 L1368,138.6 L1392,141.1 L1416,145.1 L1440,150.0 L1440,320 Z' fill='%23C3D8EE' opacity='.6'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;pointer-events:none;z-index:0}
body:has(> header.top) > main,body:has(> header.top) > footer,body:has(> header.top) > .rbfoot{position:relative;z-index:1}
@media print{ body::after{display:none!important} .top{background:var(--blue)} }
/* panels: the same white surface, line and soft lift everywhere */
.nav button,.card,.grid-wrap,.panel,.summary,.dsheet,.hsum div,.shcard,.mt,.area,.tabs,.cards>details,.readycard{box-shadow:0 1px 2px rgba(18,48,77,.05),0 2px 8px rgba(18,48,77,.04)}
.nav button.on{box-shadow:0 0 0 2px var(--blue)}
/* page title row: the same in every module (title, ship, then buttons on the right) */
main > .head, main > .bar:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;min-height:40px}
main > .head h1, main > .bar:first-child h1{display:flex;align-items:center;gap:10px}
.h1ico{display:inline-flex;width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue);align-items:center;justify-content:center;flex:none}
.h1ico svg{width:20px;height:20px}
/* module tiles under a page title: always the same size, also when a module has only two */
@media (min-width:761px){ .nav{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))} .nav:has(> :nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:760px){ .nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .h1ico{width:30px;height:30px} .h1ico svg{width:18px;height:18px} }
.rbdi .mi,.rbsi .mi{display:inline-flex;width:18px;height:18px;margin-right:8px;color:var(--blue);vertical-align:-3px}
.rbdi .mi svg,.rbsi .mi svg{width:18px;height:18px}

/* line icons in buttons and the phone bar (no emoji) */
.btn.ico svg{width:18px;height:18px;display:block}
.rbbar i{display:flex;justify-content:center}
.rbbar i svg{width:22px;height:22px}
.allgood::before{content:"";display:inline-block;width:18px;height:18px;margin:0 8px -3px 0;background:currentColor;-webkit-mask:var(--ok-ico) center/contain no-repeat;mask:var(--ok-ico) center/contain no-repeat}
:root{--ok-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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.btn.small svg{width:16px;height:16px;display:block}
.yn2 svg{width:22px;height:22px;display:block;margin:auto}
/* footer: always at the bottom of the page, readable on the sea */
body:has(> header.top){min-height:100dvh;display:flex;flex-direction:column}
body:has(> header.top) > main{flex:1 0 auto;width:100%;box-sizing:border-box}
body:has(> header.top) > .rbfoot{display:table;margin:24px auto calc(22px + env(safe-area-inset-bottom,0px));padding:6px 16px;border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 1px 3px rgba(18,48,77,.06)}
@media (max-width:760px){ body:has(> header.top) > .rbfoot{margin-bottom:14px} }

/* phone: the Report button in the bottom bar replaces the floating red button (it covered buttons and text) */
@media (max-width:760px){ body.has-rbbar .fab{display:none!important} }

/* crew lists on a phone: one card per person – name and status, function, then the documents (the table was cut off) */
@media (max-width:760px){
  table.crewt{min-width:0!important;width:100%}
  table.crewt thead{display:none}
  table.crewt tbody{display:block}
  table.crewt tr.click{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 12px;border-bottom:1px solid var(--line)}
  table.crewt tr.click td{display:block;padding:0;border:0;min-width:0}
  table.crewt td.nm{grid-column:1;grid-row:1}
  table.crewt td.stc{grid-column:2;grid-row:1;text-align:right}
  table.crewt td.fnc{grid-column:1/span 2;grid-row:2;color:var(--muted);font-size:13px}
  table.crewt td.dc{grid-column:1/span 2;grid-row:3;margin-top:4px}
  table.crewt td.dc .docs,table.crewt td.dc>div{display:flex;flex-wrap:wrap;gap:4px}
  table.crewt td.hide-m{display:none}
  table.crewt tbody tr:last-child{border-bottom:0}
}
main h1:has(.h1ico){display:flex;align-items:center;gap:10px}
@media (max-width:760px){ .hm2{display:none} }

/* crew cabins (crew page and hotel › crew): soft colour per section, nautical blue, restaurant team marked */
.cclegend{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.cclegend span{background:var(--bg);color:var(--c);border:1px solid var(--c);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600}
.cclegend span.mark,.ocp.mark{border-width:2px;border-style:solid}
.ccgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ccab{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(18,48,77,.05)}
.ccab.over{border-color:var(--red)}
.cch{display:flex;align-items:baseline;gap:8px;justify-content:space-between}.cch b{font-size:16px}.cch small{color:var(--muted);font-size:12px}
.ocp{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--bg);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);border-left:4px solid var(--c);border-radius:8px;padding:6px 9px;font:inherit;color:var(--ink);cursor:pointer;width:100%}
.ocp b{font-size:14px;font-weight:600}.ocp small{font-size:12px;color:var(--muted)}
.ocp:disabled{cursor:default}
.ofree{display:block;border:1px dashed var(--line);border-radius:8px;padding:7px 9px;font-size:13px;color:var(--muted);background:none;text-align:left;font-family:inherit;width:100%}
button.ofree{cursor:pointer;color:var(--blue)}button.ofree:hover{border-color:var(--blue)}
.cch3{font-size:15px;margin:16px 0 8px}
.cchome{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.cclist{display:grid;gap:6px}.ccl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ccl b{min-width:70px}.ccl input{width:60px;padding:4px 6px;border:1px solid var(--line);border-radius:6px}

/* Crew Daily: the programme of the day, like the printed sheet */
.dnav2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.dnav2 b{min-width:180px}.dnav2 .push{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.daily{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;max-width:760px;box-shadow:0 1px 2px rgba(18,48,77,.05),0 2px 8px rgba(18,48,77,.04)}
.daily h2{font-size:22px;margin:0}.daily .dd{font-weight:600;margin:2px 0 8px}.daily p{margin:2px 0}
.daily .dl{margin:14px 0 10px;display:grid;gap:0}
.daily .dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.daily .dl div:last-child{border-bottom:0}.daily .dl span{color:var(--muted);font-variant-numeric:tabular-nums}.daily .dl b{font-weight:500}
.daily .dl div.hl b{font-weight:700;color:var(--blue)}
.daily .dnote{background:var(--blue-soft);border-radius:8px;padding:8px 10px;margin:8px 0}
.dform td{padding:4px 5px}.dform input:not([type=checkbox]),.dform select{width:100%;min-width:70px;border:1px solid var(--line);border-radius:6px;padding:6px 7px;font-size:14px;background:var(--surface)}
.dform td:nth-child(2) input,.dform td:first-child input[data-k]{min-width:200px}
.dform input[type=time]{min-width:96px}.dform .ck{width:30px;text-align:center}.dform .nd{white-space:nowrap}
.dform tr.dim td{opacity:.45}
.dform tr.off td:not(.ck){opacity:.45}.dform tr.off input:not([type=checkbox]){text-decoration:line-through}
@media (max-width:760px){
  .daily{padding:14px}.daily .dl div{grid-template-columns:96px minmax(0,1fr);font-size:14.5px}
  .dform thead{display:none}.dform,.dform tbody{display:block}
  .dform tr{display:grid;grid-template-columns:30px 1fr 1fr;gap:6px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
  .dform td{padding:0!important;border:0!important}
  .dform td:nth-child(2){grid-column:2/-1}.dform td.nd{grid-column:2/-1}
  .dform td:nth-child(2) input,.dform td:first-child input[data-k]{min-width:0}
}
.dsetup td{padding:4px 5px}.dsetup input,.dsetup select{width:100%;min-width:70px;border:1px solid var(--line);border-radius:6px;padding:6px 7px;font-size:14px;background:var(--surface)}
.dsetup td:first-child input{min-width:220px}.dsetup input[type=time]{min-width:96px}.dsetup input:disabled{opacity:.5}
.daily{position:relative}
.daily .dlogo{position:absolute;top:16px;right:18px;max-height:46px;max-width:150px;object-fit:contain}
.daily .maplink{margin-left:6px;font-weight:600;white-space:nowrap}
.daily .dinfo{margin:10px 0 8px;border-top:2px solid var(--red);padding-top:8px}
.daily .dinfo p{color:var(--red);font-weight:700;margin:3px 0;font-size:15px}
.dinfoset{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px 10px;margin:0}
.dinfoset legend{font-weight:600;font-size:13.5px;color:var(--red);padding:0 4px}
.dchips{display:flex;gap:6px 14px;flex-wrap:wrap;margin-bottom:8px}
@media (max-width:760px){ .daily .dlogo{position:static;display:block;margin:0 0 8px auto;max-height:38px} }

/* in-port manning */
.ipmbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}.ipmbar .push{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.seg2 button{border:0;background:var(--surface);padding:7px 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg2 button.on{background:var(--blue);color:#fff}
.ipmask{background:#FFF4D6;border:1px solid #F2B400;border-left:6px solid #F2B400;border-radius:var(--r-md);padding:10px 14px;margin:0 0 12px}
table.ipm th,table.ipm td{vertical-align:top}
table.ipm td.pos{min-width:220px}table.ipm td.pos input{width:100%;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit}
table.ipm .tday{background:#FFFBEF}
.ipn{display:inline-block;background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:2px 8px;font-size:12.5px;font-weight:600;margin:1px 3px 1px 0;white-space:nowrap}
.ipn.me{background:#F2B400;color:#3D2A00}.ipn.gone{background:#FBE6E4;color:#9B2C22;text-decoration:line-through}
.ipadd{display:block;margin-top:3px;border:1px dashed var(--line);background:none;border-radius:6px;padding:3px 7px;font:inherit;font-size:12px;color:var(--blue);cursor:pointer}
.ippick{display:grid;gap:6px;max-height:55vh;overflow:auto}
@media (max-width:760px){
  table.ipm thead{display:none}table.ipm,table.ipm tbody{display:block}
  table.ipm tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
  table.ipm td{padding:0!important;border:0!important}table.ipm td.pos{grid-column:1/-1;min-width:0}
  table.ipm td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--muted)}
}
.qt{display:inline-block;font-size:10px;font-weight:700;border-radius:4px;padding:0 4px;margin-left:4px;background:#E3F3EA;color:#1F6340;vertical-align:1px}
.qt.soon{background:#FBF0D9;color:#7A5200}.qt.expired{background:#FBE6E4;color:#9B2C22;text-decoration:line-through}
table.ipm td.qmiss{box-shadow:inset 0 0 0 2px #E8A09A}
.qwarn{display:block;color:var(--red);font-size:11.5px;font-weight:600;margin-top:2px}
.ipmh{font-size:16px;margin:18px 0 8px}
.qtab td small{display:block;font-size:12px;color:var(--muted)}
.qtab td.qc{white-space:nowrap}.qtab td.qc input[type=date]{margin-left:8px;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;font-size:14px}
.qtab td.qc.expired small{color:var(--red);font-weight:600}.qtab td.qc.soon small{color:#7A5200;font-weight:600}
.qtab td.qc.expired input[type=date]{border-color:var(--red)}
@media (max-width:760px){
  .qtab thead{display:none}.qtab,.qtab tbody{display:block}
  .qtab tr{display:grid;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
  .qtab td{padding:0!important;border:0!important;white-space:normal}
  .qtab td.qc::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--muted)}
}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:600px){ .three{grid-template-columns:minmax(0,1fr)} }
.cdep{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.cdep.nautical{background:#E3EEFA;color:#1F5C99}.cdep.hotel{background:#F3EAF8;color:#64459E}
.ccab.nautical{border-top:4px solid #1F5C99}.ccab.hotel{border-top:4px solid #8E6CC4}
.cbed{color:var(--muted);font-size:12.5px;margin-top:-4px}
.cchomebox{background:#FFF4D6;border:1px solid #F2B400;border-radius:var(--r-md);padding:10px 12px;margin:0 0 12px}
.cchomebox .cchome{margin-top:8px}
.ccl select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;font-size:13.5px}

/* the crew list (Crew and Hotel › Crew): same layout on both pages */
table.crewt{min-width:760px}
.crewt .docs{display:flex;gap:4px;flex-wrap:wrap}
.printhead{display:none}
@media print{
  .top,.bar,.tbar,.sub-tabs,.counters,.noprint,.nav,.rbbar{display:none!important}
  body{background:#fff} main{padding:0} .grid-wrap{border:0}
  .printhead{display:block;margin-bottom:10px}
  tr{break-inside:avoid}
}

/* iPhone / iPad: how to put RiverBase on the home screen (Apple has no automatic install) */
.iosg{position:fixed;inset:0;z-index:80;background:rgba(8,30,54,.55);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:16px 12px calc(70px + env(safe-area-inset-bottom,0px))}
.iosg.top{justify-content:flex-start;padding-top:calc(70px + env(safe-area-inset-top,0px))}
.iosg-card{background:var(--surface);border-radius:16px;padding:18px 18px 14px;width:min(420px,100%);box-shadow:0 18px 50px rgba(3,18,36,.4)}
.iosg-card .t{font-size:18px;display:block;margin-bottom:4px}.iosg-card p{margin:0 0 10px;color:var(--muted)}
.iosg-card ol{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.iosg-card li{display:grid;grid-template-columns:26px 30px 1fr;align-items:center;gap:8px;font-size:15.5px}
.iosg-card .n{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.iosg-card .ico{color:var(--blue);display:flex;justify-content:center}
.iosg-acts{display:flex;gap:8px;justify-content:flex-end}
.iosg-arrow{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(6px + env(safe-area-inset-bottom,0px));color:#fff;animation:iosBob 1.1s ease-in-out infinite}
.iosg.top .iosg-arrow{bottom:auto;top:calc(8px + env(safe-area-inset-top,0px));left:auto;right:14px;transform:rotate(180deg)}
@keyframes iosBob{0%,100%{margin-bottom:0}50%{margin-bottom:10px}}
.iosg.top .iosg-arrow{animation:none}
@media (prefers-reduced-motion:reduce){.iosg-arrow{animation:none}}
body.iosg-open .rbbar{display:none}
.iosg{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
.iosg.top{padding-bottom:16px}

/* short tour (first time per role) */
.rbtour-hl{position:fixed;z-index:9000;border-radius:12px;box-shadow:0 0 0 3px var(--blue,#1F5FA8),0 0 0 9999px rgba(12,30,58,.38);pointer-events:none;transition:all .2s}
.rbtour{position:fixed;z-index:9001;background:var(--surface,#fff);color:var(--ink);border-radius:14px;padding:14px 16px 12px;box-shadow:0 10px 30px rgba(12,30,58,.3);font-size:14.5px}
.rbtour small{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.rbtour>b{display:block;font-size:16px;margin:3px 0 4px}
.rbtour p{margin:0 0 12px;line-height:1.45}
.rbtour .tb{display:flex;gap:8px;justify-content:flex-end}
/* Crew Daily: the coming days and the approval */
.dweek{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;padding-bottom:2px}
.dweek button{flex:0 0 auto;min-width:78px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;background:var(--surface);padding:6px 9px;font:inherit;color:inherit;cursor:pointer;text-align:left}
.dweek button b{font-size:13.5px}.dweek button small{font-size:12px;color:var(--muted)}.dweek button i{font-style:normal;font-size:11.5px;color:var(--muted)}
.dweek button.approved{border-left-color:var(--green)}.dweek button.approved i{color:#1F6340}
.dweek button.waiting,.dweek button.changed{border-left-color:var(--amber)}.dweek button.waiting i,.dweek button.changed i{color:#7A5200}
.dweek button.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.dstat{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;border-radius:10px;padding:9px 12px;margin:0 0 10px;font-size:14px;background:var(--amber-soft)}
.dstat.approved{background:var(--green-soft)}
.dstat .btn{margin-left:auto}
.dapprove{margin-top:10px;font-weight:600}
/* password: the eye to show what you typed */
.pwwrap{position:relative;display:block}
.pwwrap input{width:100%;padding-right:46px!important}
.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px}
.pweye:hover,.pweye:focus-visible{color:var(--blue);background:var(--blue-soft)}
.login .remember{margin:-2px 0 2px}
/* in-port manning: the reminder on My work and on the start page */
.ipmnote{display:flex;flex-direction:column;gap:2px;background:#FFF4D6;border:1px solid #F2B400;border-left:6px solid #F2B400;border-radius:var(--r-md);padding:12px 16px;margin:0 0 14px}
.ipmnote b{font-size:16px;color:#6B4A00}.ipmnote span{color:#6B4A00}.ipmnote.soft{background:#FFFBEF}
a.ipmnote{text-decoration:none;color:inherit}
/* language */
.langs{display:grid;gap:8px}
.langs .btn{justify-content:center;min-height:46px;font-size:16px}
.langlinks{display:flex;justify-content:center;gap:16px;margin:14px 0 0;position:relative;z-index:1}
.langlinks .linkbtn{color:#fff;opacity:.8;font-size:14px}.langlinks .linkbtn.on{opacity:1;font-weight:700;text-decoration:underline}
/* passenger cabin used by crew (by exception) */
.ccab.guest{border-top:4px solid #2E8B7A}.cdep.guest{background:#E2F3EF;color:#1E6B5C}
.cab.crewuse{background:#E2F3EF!important;border-color:#7CC3B3!important;color:#1E6B5C!important}
.crewuse-box{border-top:1px solid var(--line-soft);padding-top:10px;margin-top:4px}
/* a crew cabin opened: who sleeps here – move / take out / add */
.ccab .cch[data-cabopen]{cursor:pointer;border-radius:6px}.ccab .cch[data-cabopen]:hover b{color:var(--blue)}
.cco{color:var(--muted);font-weight:400}
.ccpl{display:grid;gap:8px}
.ccpr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.ccpr small{display:block;color:var(--muted)}.ccpr select{max-width:220px;border:1px solid var(--line);border-radius:8px;padding:7px 8px;font:inherit;background:var(--surface)}
@media (max-width:560px){ .ccpr{grid-template-columns:1fr 1fr} .ccpr>div{grid-column:1/-1} .ccpr select{max-width:none} }
/* day sheet: tick people and put an hours template on them */
.dsheet.selectable .drow .who{position:relative;padding-left:30px}
.dsheet.selectable .drow .who .dsel{position:absolute;left:2px;top:2px;width:20px;height:20px;margin:0;accent-color:var(--blue)}
.shbar{background:var(--blue-soft);border-radius:var(--r-md);padding:8px 10px}
/* roster: who is shown – a list per department / section with tick boxes */
.rwrap{display:grid;gap:12px}
@media (min-width:900px){ .rwrap{grid-template-columns:250px minmax(0,1fr);align-items:start} .rwho{position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto} }
.rwho{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 12px 8px}
.rwho>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.rwho>summary::-webkit-details-marker{display:none}.rwho>summary::after{content:'›';margin-left:auto;color:var(--muted);transition:transform .15s}.rwho[open]>summary::after{transform:rotate(90deg)}
.rwq{display:flex;gap:14px;margin:0 0 6px}
.rwg{border-top:1px solid var(--line-soft);padding:6px 0}
.rwgh{display:flex;align-items:center;gap:6px;color:var(--c);font-size:13.5px;cursor:pointer;padding:4px 0}
.rwp{display:flex;align-items:center;gap:6px}
.rwp label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer;padding:5px 0}
.rwp .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}.rwp .nm small{display:block;color:var(--muted);font-size:12px}
.rwp .dot{flex:0 0 auto}
.rwonly{border:0;background:none;color:var(--blue);font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:6px;opacity:.75}.rwonly:hover{opacity:1;background:var(--blue-soft)}
.rwho input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);flex:0 0 auto}
/* the company picture on the start page (wide, e.g. the ship from the side): faint, below the work, just above the waves */
.dashpic{margin:26px auto 0;max-width:1100px;pointer-events:none;user-select:none}
.dashpic img{display:block;width:100%;height:auto;opacity:.32;mix-blend-mode:multiply;filter:saturate(.75);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 92%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 92%,transparent);mask-composite:intersect}
@media (max-width:760px){ .dashpic{margin-top:18px} .dashpic img{opacity:.28} }
.dashprev{border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff;margin-bottom:8px}.dashprev img{width:100%;height:auto;display:block}

/* ---------- departments: Hotel · Nautical · Technical · Ship & crew – one colour each ---------- */
body[data-dept=hotel]{--dept:#7A4E9E} body[data-dept=nautical]{--dept:#1F5C99} body[data-dept=technical]{--dept:#B8620F} body[data-dept=shared]{--dept:#2C7A6B}
body[data-dept] .top{box-shadow:inset 0 -4px 0 var(--dept)}
.dchip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--dept,#5D6D7E);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;margin-right:8px;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.rbdh{display:flex;align-items:center;gap:7px;margin:10px 10px 2px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--dept)}
.rbdh::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--dept)}
.rbver{padding:8px 12px 4px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:4px}
@media (max-width:760px){ .dchip{font-size:11px;padding:1px 7px;margin-right:0} .dchip + .pgname{display:none} }
/* role explanation in the person window */
.roletext .rt{margin:0;padding:9px 12px;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--ink);font-size:14px}
.roletext .rtl{margin-top:6px;font-size:13px}.roletext .rtl summary{cursor:pointer;color:var(--blue);font-weight:600}.roletext .rtl ul{margin:6px 0 0;padding-left:18px;color:var(--muted)}
.quickx:not(:empty){display:grid;gap:2px}
details.advrights>summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:14px;padding:4px 0}
/* one settings screen per company: a block per department */
.sethub{margin:0 0 14px;border:1px solid var(--line);border-top:4px solid var(--dept);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.sethub h3{margin:0;padding:10px 14px 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--dept)}
.sethub .seti{display:grid;grid-template-columns:1fr auto;grid-template-areas:"b i" "s i";gap:1px 10px;width:100%;text-align:left;padding:11px 14px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;min-height:48px}
.sethub .seti:hover{background:color-mix(in srgb,var(--dept) 6%,var(--surface))}
.sethub .seti b{grid-area:b;font-size:15px}.sethub .seti span{grid-area:s;color:var(--muted);font-size:13px}.sethub .seti i{grid-area:i;align-self:center;font-style:normal;color:var(--muted);font-size:20px}
/* one Report button (computer: in the top bar; phone: in the bar at the bottom) */
.top .rbrepb{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:700;min-height:36px;padding:0 12px;margin-right:4px}
.top .rbrepb svg{width:17px;height:17px}.top .rbrepb:hover{background:rgba(255,255,255,.22)}
@media (max-width:760px){ body.has-rbbar .top .rbrepb{display:none} }
.rbsi.rpick{border-left:5px solid var(--dept);align-items:center;gap:10px}
.rbsi.rpick .dchip{background:var(--dept);flex:none}
/* Help & contact */
.rbcontact{display:flex;flex-wrap:wrap;gap:8px}
.rbcontact .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.rbcontact .btn svg{width:18px;height:18px;flex:none}
.rbsteps{margin:0;padding-left:22px;display:grid;gap:12px}.rbsteps li{line-height:1.45}.rbsteps .btn{margin:6px 0 4px}
@media (max-width:760px){ .rbcontact .rbremote{display:none} }
.vmore{margin-top:10px}.vmore>summary{cursor:pointer;color:var(--blue);font-weight:600;padding:6px 0}.vmore .vroles{margin-top:6px}
/* wall tablet: a page opened from the wall – no menus, one big way back */
body.kiosk .rbmods,body.kiosk #rbMe,body.kiosk .who,body.kiosk .rbbar,body.kiosk #rbBack,body.kiosk .brand{pointer-events:none}
body.kiosk .rbmods,body.kiosk .who,body.kiosk .rbbar,body.kiosk #rbBack,body.kiosk #rbRepTop,body.kiosk #rbSearch{display:none!important}
body.kiosk.has-rbbar main{padding-bottom:110px}
body.kiosk main{padding-bottom:110px}
.wallbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:14px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:#0C2C4C;color:#fff;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.wallbar b{font-size:18px}.wallbar small{color:#BFD8F0;margin-left:6px}
.wallbar .wt{margin-left:auto;color:#F3C969;font-weight:700}
.wallbar .btn{min-height:56px;font-size:18px;padding:0 22px}
body.kiosk #hSet,body.kiosk [data-kiosk-hide]{display:none!important}   /* settings are not for the wall tablet */
/* fleet management customers: their own name and logo in the top bar */
.brand.road{align-items:center;max-width:min(46vw,320px)}
.brand.road b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand .brlogo{height:26px;max-width:120px;object-fit:contain;background:#fff;border-radius:4px;padding:2px;flex:none}
.login-logo .fl-ico{display:inline-flex;width:44px;height:44px;border-radius:10px;background:#4F6B2A;color:#fff;align-items:center;justify-content:center}
.login-logo .fl-ico svg{width:28px;height:28px}
/* licence: shown to the company owner when it ends within 30 days */
.licbar{border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:14px;line-height:1.45;border:1px solid}
.licbar.amber{background:var(--amber-soft);border-color:#E9C77A;color:#5E4300}
.licbar.red{background:var(--red-soft);border-color:#EBA7A1;color:#7D1F18}
.licbar .muted{color:inherit;opacity:.8}
.licbox{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line,#E3EAF2);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.licbox b{font-size:15px}.licbox .tag{margin-left:auto}
/* week agenda (Road fleet and Maintenance) */
.wagenda{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin:0 0 16px}
.wabar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}.wabar b{font-size:16px}.wabar .wan{margin-left:auto;color:var(--muted);font-size:13px}
.wagrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wad{border:1px solid var(--line-soft);border-radius:8px;min-height:120px;display:flex;flex-direction:column;background:var(--bg)}
.wad.wknd{background:color-mix(in srgb,var(--bg) 70%,var(--line-soft))}
.wad.today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.wah{display:flex;gap:6px;align-items:baseline;padding:6px 8px;border-bottom:1px solid var(--line-soft)}.wah small{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted)}.wah b{font-size:16px}
.wah i{font-style:normal;font-size:11px;font-weight:700;color:var(--blue);margin-left:auto}
.wai{display:grid;gap:4px;padding:6px;align-content:start;flex:1}
.wae{display:grid;text-align:left;border:0;border-left:3px solid var(--blue);background:var(--blue-soft);color:var(--ink);border-radius:6px;padding:5px 7px;font:inherit;font-size:12.5px;cursor:pointer;min-width:0}
.wae b{font-size:12.5px;overflow-wrap:anywhere}.wae small{color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
.wae.past{border-left-color:var(--red);background:var(--red-soft)}.wae.done{border-left-color:var(--green);background:var(--green-soft);opacity:.75}.wae .wdone{color:var(--green);font-weight:700}
.waplus{border:1px dashed var(--line);background:none;color:var(--muted);border-radius:6px;padding:2px;font-size:16px;line-height:1.2;cursor:pointer;margin-top:auto}
.waplus:hover{color:var(--blue);border-color:var(--blue)}
@media (max-width:760px){
  .wagrid{grid-template-columns:1fr;gap:4px}
  .wad{min-height:0;flex-direction:row;align-items:stretch}.wad.wempty .wai{padding:4px 6px}
  .wah{flex-direction:column;align-items:center;justify-content:center;gap:0;border-bottom:0;border-right:1px solid var(--line-soft);min-width:58px}.wah i{margin:0}
  .wai{grid-template-columns:1fr;flex:1}.waplus{margin-top:0;justify-self:start;padding:2px 12px}
}
/* week agenda on the phone: only the days with appointments */
.wacompact{display:grid;gap:4px}
.wacd{display:flex;border:1px solid var(--line-soft);border-radius:8px;background:var(--bg)}.wacd.today{border-color:var(--blue)}
.wacd .wah{flex-direction:column;align-items:center;justify-content:center;gap:0;border-bottom:0;border-right:1px solid var(--line-soft);min-width:52px}
.wacd .wai{flex:1}.wacd .waplus{margin-top:0;justify-self:start;padding:2px 12px}
.wafull{justify-self:start;font-size:13px;margin:4px 0 0}