/* Rapple Logistics OS: brand layer (Leon, 24-28 Oct 2026: "more modern and techy ... custom made").
 * Pass 1: design tokens, shell, cards, chips, tables, forms, focus, motion and the sign-in page. Loaded AFTER os.css / app.css / portal.css / tracker.css, so it only
 * overrides values; no markup, wording or function changes. Navy #0B2A55, gold #D8B46A, blue #1F5EFF, 4px spacing, layered shadows, fast subtle motion.
 * Dark mode keeps its own tokens (the overrides below are skipped when data-theme="dark"). */

:root:not([data-theme="dark"]):not(.rla):not(.rlb):not(.rlc):not(.rld):not(.rle){   /* extra :not()s only raise specificity above os.css's per-brand token blocks */
  --rl-navy:#0B2A55; --rl-navy-2:#081F40; --rl-navy-3:#13386F; --rl-gold:#D8B46A; --rl-gold-2:#EBD6A4; --rl-blue:#1F5EFF; --rl-blue-bg:#E8EFFF;
  --rl-canvas:#F2F5FA; --rl-line:#DCE3EE; --rl-line-soft:#E8EDF5; --rl-ink:#0B1B33; --rl-ink-2:#4A5B76; --rl-ink-3:#55657F;
  --rl-sh1:0 1px 2px rgba(11,42,85,.06); --rl-sh2:0 1px 2px rgba(11,42,85,.06),0 4px 14px rgba(11,42,85,.07); --rl-sh3:0 2px 4px rgba(11,42,85,.08),0 12px 32px rgba(11,42,85,.14);
  --rl-ease:cubic-bezier(.23,1,.32,1);
  /* staff shell (os.css names) */
  --ink:var(--rl-ink); --ink-2:#1B2F4F; --gold:var(--rl-gold); --gold-lt:var(--rl-gold-2); --gold-ink:#1F5EFF; --cream:#F8FAFE;
  --canvas:var(--rl-canvas); --sunken:#EBF0F7; --line:var(--rl-line); --line-strong:#C6D0E0; --text:var(--rl-ink); --text-2:var(--rl-ink-2); --text-3:var(--rl-ink-3);
  --side-bg:var(--rl-navy-2); --side-text:#C7D3E8; --side-muted:#7F93B3; --side-hover:#0E2A52; --side-active:#13386F;
  --ok:#1E7B48; --ok-bg:#E3F4EA; --warn:#9A5B00; --warn-bg:#FFF1D6; --bad:#B3261E; --bad-bg:#FCE6E4; --info:#1F5EFF; --info-bg:#E8EFFF; --idle:#4A5B76; --idle-bg:#EAEFF6;
  --r:10px; --r-lg:14px; --r-sheet:18px;
  --head:#F7F9FD; --line-soft:var(--rl-line-soft); --hover:#F5F8FD; --sel:#EAF0FF; --tab-hover:#E4EBF6; --gold-bg:#FBF3E0; --top-bg:rgba(255,255,255,.88);
  --primary:var(--rl-navy); --primary-2:var(--rl-navy-3); --on-primary:#fff; --chart:#C9D6EC; --chart-cur:var(--rl-navy); --err-bg:#FFFBFA;
  --shadow-pop:var(--rl-sh3);
  /* client portal (app.css names) */
  --steel:var(--rl-navy); --link:var(--rl-blue); --mist:#7F93B3; --silver:#C6D0E0; --bg:var(--rl-canvas); --paper:#fff; --sunk:#F5F8FD; --line2:var(--rl-line-soft); --field:#7F93B3; --mute:var(--rl-ink-2); --mute2:var(--rl-ink-3);
  --btn:var(--rl-navy); --btn-fg:#fff; --btn-hover:var(--rl-navy-3); --top:var(--rl-navy-2); --top-2:var(--rl-navy); --top-text:#DCE5F4; --top-muted:#8EA2C2; --accent:var(--rl-navy-3); --accent-bg:#EAF0FF;
  --moving:var(--rl-blue); --moving-bg:#E8EFFF; --wait:#4A5B76; --wait-bg:#EAEFF6; --hold:#B3261E; --hold-bg:#FCE6E4; --needs:#9A5B00; --needs-bg:#FFF1D6; --needs-line:#D8A02C;
  --done:var(--rl-navy); --done-bg:#E4EBF7; --muted:#4A5B76; --muted-bg:#EDF2F8; --bubble-me:#E8EFFF; --bubble-me-line:#CFDDFA; --shadow:var(--rl-sh1);
}

:root:not([data-theme="dark"]) body{background:var(--rl-canvas);color:var(--rl-ink)}
:root:not([data-theme="dark"]) a{color:var(--rl-blue)}
:root:not([data-theme="dark"]) .side .brand small{color:var(--rl-gold)}

/* focus: one clear ring everywhere */
:focus-visible{outline:2px solid var(--rl-blue,#1F5EFF);outline-offset:2px;border-radius:6px}

/* cards and panels */
:root:not([data-theme="dark"]) .panel,:root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .tile{border-color:var(--rl-line);box-shadow:var(--rl-sh1);background:#fff}
.panel>header,.panel>.hd{border-bottom:1px solid var(--rl-line-soft)}
.panel>header h3,.panel>.hd h3{letter-spacing:-.005em}
@media (hover:hover){.panel a.card:hover,.rltiles a:hover,.dash-card:hover{box-shadow:var(--rl-sh2);transform:translateY(-1px)}}
.rltiles a,.dash-card{transition:box-shadow 160ms var(--rl-ease),transform 160ms var(--rl-ease),border-color 160ms ease}

/* buttons */
:root:not([data-theme="dark"]) .btn.primary,:root:not([data-theme="dark"]) .btn.pri{background:linear-gradient(180deg,#123A73,#0B2A55);border-color:#0B2A55;color:#fff;box-shadow:0 1px 2px rgba(11,42,85,.25),inset 0 1px 0 rgba(255,255,255,.12)}
:root:not([data-theme="dark"]) .btn.primary:hover{background:linear-gradient(180deg,#17468A,#0F3469)}
.btn{transition:transform 120ms var(--rl-ease),box-shadow 160ms ease,background-color 160ms ease,border-color 160ms ease}
.btn:active{transform:scale(.98)}

/* status chips: a soft tint with a dot */
.chip{letter-spacing:.01em}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;flex:none}
.chip.paid,.chip.ok,.chip.delivered{background:var(--ok-bg);color:var(--ok)}
.chip.waiting,.chip.warm{background:var(--warn-bg);color:var(--warn)}
.chip.expired,.chip.bad,.chip.hot{background:var(--bad-bg);color:var(--bad)}
.chip.quote,.chip.info{background:var(--info-bg);color:var(--info)}

/* dense tables: tinted sticky header, calm rows, tabular figures */
:root:not([data-theme="dark"]) table thead th{background:var(--head);color:var(--rl-ink-2);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
table.tbl thead th,.os table thead th{position:sticky;top:var(--top-h,56px);z-index:2;box-shadow:0 1px 0 var(--rl-line)}
table tbody tr{transition:background-color 120ms ease}
table tbody tr:hover{background:var(--hover)}
td.num,th.num,.num{font-variant-numeric:tabular-nums}

/* forms */
.field input,.field select,.field textarea,input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],select,textarea{transition:border-color 140ms ease,box-shadow 140ms ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rl-blue);box-shadow:0 0 0 3px rgba(31,94,255,.16);outline:none}

/* top bar: frosted */
.top,.topbar,.mtop{backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}

/* empty states: a quiet outlined box, not a lone sentence */
.empty,.os-empty{border:1px dashed var(--rl-line);border-radius:var(--r-lg);background:linear-gradient(180deg,#fff,#F7F9FD)}

/* motion: content arrives, fast and once */
@keyframes rl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
main .panel,main .rltiles,main .gpanel,.rcw>*{animation:rl-in 200ms var(--rl-ease) both}
main .panel:nth-child(2){animation-delay:30ms}main .panel:nth-child(3){animation-delay:60ms}main .panel:nth-child(n+4){animation-delay:90ms}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- sign-in page ---------- */
body.signpage{background:var(--rl-navy-2)}
.signpage .signwrap{background:
  radial-gradient(900px 480px at 18% -10%,rgba(31,94,255,.35),transparent 60%),
  linear-gradient(160deg,#0E1B30 0%,#14305A 100%);
  position:relative}
.signpage .signwrap>*{position:relative}
.signpage .signlogo{justify-self:start;margin-bottom:6px}
.signpage .signlogo img{width:230px}
.signcard{border-radius:18px;padding:30px 26px;box-shadow:0 2px 4px rgba(0,0,0,.18),0 24px 60px rgba(4,12,30,.45);border:1px solid rgba(255,255,255,.08);animation:rl-in 260ms var(--rl-ease) both}
.signcard h1{color:var(--rl-ink)}
.signcard .btn.primary{background:linear-gradient(180deg,#123A73,#0B2A55);color:#fff}
.signcard .or{margin:2px 0}
.signalt{border-top:1px solid var(--rl-line)}
.signalt .btn{background:var(--rl-blue-bg,#E8EFFF);border-color:#CFDDFA;color:#0B2A55}
.signalt a:not(.btn){color:var(--rl-blue)}
.signfoot,.signfoot .bysl{color:#9FB2D2}
/* the staff-password disclosure: a drawn chevron instead of the browser's marker (it showed as a broken glyph) */
.staffpw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600;color:var(--rl-ink);padding:6px 0}
.staffpw summary::-webkit-details-marker{display:none}
.staffpw summary::before{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5EFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform 160ms var(--rl-ease)}
.staffpw[open] summary::before{transform:rotate(90deg)}
.signcard .tick{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--rl-ink-2)}
.signcard .tick input{width:18px;height:18px;accent-color:#0B2A55}
.signopen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--rl-line);padding-top:14px;font-size:14px;color:var(--rl-ink-2)}
.signopen a.open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;background:linear-gradient(180deg,#123A73,#0B2A55);color:#fff;font-weight:700;text-decoration:none}
.signopen small{flex:1 1 100%;color:var(--rl-ink-3);font-size:13px}
.signopen small a{color:inherit;font-weight:600}

/* critic round 1 (28 Oct 2026): phone tap targets, readable small text, no clipped labels */
:root:not([data-theme="dark"]) small{color:var(--rl-ink-3)}
@media (max-width:760px){
  .btn.sm,.rlfil .btn,.rlfil a{min-height:44px}
  main a>small{white-space:normal!important;text-overflow:clip!important;overflow:visible!important}
  .mlogo{display:inline-flex;align-items:center;min-height:44px;max-width:120px}
  input[type=search]{min-height:44px}
  .newmenu>summary,details.osdetails>summary{min-height:44px;display:flex;align-items:center}
  .rcgrid .mh{font-size:12px}
}

/* Request card step bar (29 Oct 2026, Leon: "why is there a black bar"): the current step was dark text on a dark pill in the RL skin. Light text on the navy pill, white number disc,
   readable in dark mode too; the finished steps keep their green tick. */
html:root .rvsteps li.on{background:#0B2A55 !important;color:#fff !important;box-shadow:inset 0 -3px 0 #D8B46A}
html:root .rvsteps li.on .w{color:#fff !important}
html:root .rvsteps li.on .n{background:#fff !important;color:#0B2A55 !important;border-color:#fff !important}
html:root .rvsteps li.on.lost{background:#5b6773 !important}
html:root .rvsteps li.done .n{background:#2E6B3A !important;border-color:#2E6B3A !important;color:#fff !important}
html:root[data-theme="dark"] .rvsteps li{background:#1b2230;color:#aab3c0}
html:root[data-theme="dark"] .rvsteps li.on{background:#1F5EFF !important}
.side .grp>a.grpbtn .gchev{padding:9px;box-sizing:content-box;margin-block:-9px;margin-inline-end:-6px;cursor:pointer}

/* Home on laptop widths (29 Oct 2026, Leon: Needs you cut off at the right, buttons in odd places, panels side by side with no stacking). Panels stack under 1180px, a Needs-you row may
   shrink and wrap (text breaks inside the card, the action buttons wrap under it) and the page never scrolls sideways. */
.os .app,.os .main,.os .dh,.os .dk{min-width:0;max-width:100%}
.os .main{overflow-x:clip}
@media (max-width:1180px){.os .dh-row.r2,.os .dh-row.r3,.os .dh-row.r3b{grid-template-columns:minmax(0,1fr)}.os .dh-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.os .hrow{min-width:0}
.os .hrow .hr-main,.os .hrow .hr-main small,.os .hrow .hr-main b{min-width:0;overflow-wrap:anywhere}
.os .hrow .hr-main small{white-space:normal}
.os .hrow .hr-acts{flex-wrap:wrap;justify-content:flex-end;min-width:0}
@media (max-width:1180px){.os .todo7.hrow{grid-template-columns:auto minmax(0,1fr)}.os .todo7.hrow .hr-acts{grid-column:1/-1;justify-content:flex-start}}
.os .app:not(.collapsed){grid-template-columns:var(--side-w) minmax(0,1fr)}   /* a long line in the page can no longer widen the whole page past the screen */
.os .top{min-width:0}.os .top .acts,.os .top .user{flex-wrap:nowrap;min-width:0}
@media (max-width:1100px){.os .top #osfind{min-width:0;flex:1 1 120px}.os .top .btn.primary{padding-inline:10px}}

/* Box rows of the chargeable weight (29 Oct 2026): one row per box, same grid for the header and the rows, wraps on a phone. */
.os .bxhead,.os .bxrow{display:grid;grid-template-columns:56px repeat(5,minmax(0,1fr)) 34px;gap:6px;align-items:center}
.os .bxhead{font:600 11px var(--f-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:6px 0 2px}
.os .bxrow{margin:0 0 6px}.os .bxrow input{height:36px;min-width:0;border:1px solid var(--line-strong);border-radius:8px;padding:0 8px;font:400 13.5px var(--f-ui);text-align:end;font-variant-numeric:tabular-nums;background:var(--surface);color:var(--text)}
.os .bxn{font:600 13px var(--f-ui);color:var(--text-2)}.os .bxdel{height:36px;width:34px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);cursor:pointer;font-size:18px;line-height:1;color:var(--text-2)}
@media (max-width:640px){.os .bxhead{display:none}.os .bxrow{grid-template-columns:repeat(5,minmax(0,1fr)) 34px}.os .bxn{grid-column:1/-1}}

/* the totals stay in view above the Save bar */
.os .osform .qtotal{position:sticky;bottom:58px;z-index:5;background:var(--surface);box-shadow:0 -6px 12px -10px rgba(11,42,85,.35)}
/* Expand: the editor uses the whole screen (right-hand tools hidden, menu narrowed); remembered on this device */
body.qfull .recgrid{grid-template-columns:minmax(0,1fr)}
body.qfull .recgrid>aside{display:none}
body.qfull .main,body.qfull .os .main{max-width:none}

/* Quote editor charges (29 Oct 2026): one long line per charge when the form is wide (1001px and up, e.g. with Expand), two compact rows when it is narrower. One definition per width, no overlap.
   Wide:   drag handle | description + note | kind | qty | currency + price | VAT | buy (staff) | rand | up down remove. 13px type, 32px rows. */
.os .osform{container:qform / inline-size}
.os .qline input,.os .qline select{height:32px;font-size:13px;padding:0 6px}
.os .qline{gap:6px;padding:4px 0}
.os .qline .ql-price{gap:4px}
.os .qline .linetot{font-size:13px;white-space:nowrap}
.os .qdrag{cursor:grab;color:var(--text-3);text-align:center;user-select:none;letter-spacing:-2px;font-size:14px}
.os .qline.qdragging{opacity:.4}.os .qline.qover{box-shadow:0 -2px 0 #1F5EFF}
.os .qact{display:flex;gap:2px;justify-content:flex-end}.os .qact button{height:28px;width:24px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-3);cursor:pointer;font-size:11px;padding:0}
.os .qact button:hover,.os .qact button:focus-visible{background:var(--hover);color:var(--text);border-color:var(--line-strong)}.os .qact [data-qdel]{font-size:16px}
.os .qline.qgone{display:none}
@container qform (min-width: 1001px){
  html .os .qlhead:has(span:nth-child(9)),.os .qline:has(.ql-buy){grid-template-columns:18px minmax(200px,1fr) 104px 56px 168px 70px 150px 92px 76px}
  html .os .qlhead:not(:has(span:nth-child(9))),.os .qline:not(:has(.ql-buy)){grid-template-columns:18px minmax(220px,1fr) 104px 56px 168px 70px 92px 76px}
  html .os .qlhead{gap:6px;font-size:11px}
  html .os .qlhead span:first-child{display:block}
  .os .qline .ql-what{grid-column:auto;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .os .qline .ql-price,.os .qline .linetot{grid-column:auto}
  .os .qline .ql-price{grid-template-columns:60px minmax(0,1fr)}
  .os .qline{row-gap:0}
  .os .qlhead{display:grid}
}
@container qform (max-width: 1000px){
  .os .qlhead{display:none}
  .os .qline,.os .qline:has(.ql-buy),.os .qline:not(:has(.ql-buy)){grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .os .qline .qdrag{display:none}
  .os .qline .ql-what{grid-column:1/-1;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .os .qline .ql-what>input{min-width:0;width:100%}
  .os .qline .ql-price{grid-column:span 2;grid-template-columns:64px minmax(0,1fr)}
  .os .qline .linetot{text-align:start}
  .os .qline .qact{justify-self:end}
}
.os .osform .savebar{position:sticky;bottom:0;z-index:6}