/* RCUK RMA Desk styles - RCUK brand.
   Colours: only the approved RCUK palette. Backgrounds and lines use lighter tints of those
   same colours (color-mix with white), never substitute shades.
   Font: Gilroy (brand font) when installed; otherwise the bundled Plus Jakarta Sans
   (SIL Open Font Licence, vendor/fonts/OFL.txt), the closest open geometric match. */
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  /* RCUK primary palette */
  --rich-blue:#2a206f; --mobile-pink:#e93e8a; --services-yellow:#fdc537; --telecoms-green:#bfd161; --connectivity-blue:#82cee6; --pink:#f386a1; --white:#ffffff; --grey:#9b9b9b;
  /* RCUK secondary palette */
  --lime:#e3dd50; --mauve:#b075a5; --ice:#bee3ed; --mint:#86c8ab; --orange:#f49744; --coral:#ec6665; --plum:#a23482;
  /* Tints of the palette (same colours, lightened with white) */
  --rb-03:color-mix(in srgb,var(--rich-blue) 3%,#fff); --rb-06:color-mix(in srgb,var(--rich-blue) 6%,#fff); --rb-10:color-mix(in srgb,var(--rich-blue) 10%,#fff);
  --rb-16:color-mix(in srgb,var(--rich-blue) 16%,#fff); --rb-26:color-mix(in srgb,var(--rich-blue) 26%,#fff); --rb-muted:color-mix(in srgb,var(--rich-blue) 82%,#fff);
  --pink-10:color-mix(in srgb,var(--mobile-pink) 10%,#fff); --pink-25:color-mix(in srgb,var(--mobile-pink) 25%,#fff);
  --yellow-25:color-mix(in srgb,var(--services-yellow) 25%,#fff); --green-30:color-mix(in srgb,var(--telecoms-green) 30%,#fff);
  --blue-25:color-mix(in srgb,var(--connectivity-blue) 25%,#fff); --coral-15:color-mix(in srgb,var(--coral) 15%,#fff);
  /* Roles in the interface */
  --text:var(--rich-blue); --muted:var(--rb-muted); --line:var(--rb-10); --line-2:var(--rb-16); --bg:var(--rb-03);
  --cta:var(--mobile-pink); --cta-hover:var(--plum);
  --radius:14px; --radius-sm:6px; --radius-md:10px; --radius-lg:20px;
  /* control edges: 3:1 against white (WCAG non-text contrast) */
  --field-border:color-mix(in srgb,var(--rich-blue) 55%,#fff);
  /* stacking order, lowest to highest */
  --z-sticky:5; --z-topbar:20; --z-scrim:25; --z-sidebar:30; --z-menu:50; --z-modal:100; --z-lightbox:150; --z-toast:200;
  --topbar-h:72px;  /* set from the real header height by app.js */
  --shadow:0 1px 2px color-mix(in srgb,var(--rich-blue) 6%,transparent),0 6px 22px color-mix(in srgb,var(--rich-blue) 7%,transparent);
  --shadow-lg:0 18px 50px color-mix(in srgb,var(--rich-blue) 25%,transparent);
  --font:Gilroy,"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --sidebar:252px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--rich-blue)}
img{max-width:100%}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.i-sm{width:16px;height:16px}.i-lg{width:26px;height:26px}
:focus-visible{outline:3px solid var(--mobile-pink);outline-offset:2px}

/* ---- buttons (flat, rectangular; Mobile Pink is the call to action) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--radius-sm);border:2px solid var(--rich-blue);background:var(--white);color:var(--rich-blue);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none}
.btn:hover{background:var(--rb-06)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--cta);border-color:var(--cta);color:var(--white)}.btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.btn-purple{background:var(--rich-blue);border-color:var(--rich-blue);color:var(--white)}.btn-purple:hover{background:var(--plum);border-color:var(--plum)}
.btn-danger{color:var(--rich-blue);border-color:var(--coral)}.btn-danger:hover{background:var(--coral-15)}
.btn-danger-solid{background:var(--coral);border-color:var(--coral);color:var(--rich-blue)}
.btn-ghost{border-color:transparent;background:transparent}.btn-ghost:hover{background:var(--rb-06);border-color:transparent}
.btn-sm{min-height:36px;padding:6px 12px;font-size:14px}
.btn-lg{min-height:54px;padding:14px 26px;font-size:18px}
.btn-block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:grid;gap:6px;margin-bottom:16px;min-width:0}
.field>label,.label{font-weight:700;font-size:15px;color:var(--rich-blue)}
.req{color:var(--mobile-pink)}
/* :where() keeps this rule light, so the focus and read-only rules below can win */
.input,.field input:where(:not([type=checkbox],[type=radio],[type=file])),.field select,.field textarea,select.input{width:100%;min-height:48px;padding:11px 14px;border:2px solid var(--field-border);border-radius:var(--radius-sm);background:var(--white);font-size:16px;color:var(--rich-blue);outline:none}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.input:focus,.field input:focus,.field input[type=date]:focus-within,.field select:focus,.field textarea:focus,.scan input:focus,.composer textarea:focus{border-color:var(--mobile-pink);box-shadow:0 0 0 3px var(--pink-25);outline:2px solid var(--mobile-pink);outline-offset:1px}
.field input[readonly],.input[readonly],.field select:disabled{background:var(--rb-06);color:var(--muted)}
.hint{font-size:14px;color:var(--muted);line-height:1.45}
.form-error{background:var(--coral-15);color:var(--rich-blue);border:2px solid var(--coral);border-radius:var(--radius-sm);padding:10px 14px;font-size:15px;font-weight:700;margin:10px 0}
.form-ok{background:var(--green-30);color:var(--rich-blue);border:2px solid var(--telecoms-green);border-radius:var(--radius-sm);padding:10px 14px;font-size:15px;font-weight:700;margin:10px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}
.span-2{grid-column:1/-1}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;cursor:pointer;line-height:1.4}
.check input{width:22px;height:22px;flex:none;accent-color:var(--mobile-pink);margin-top:1px}
.choice-chips{display:flex;flex-wrap:wrap;gap:8px}
.choice-chip{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 16px;border:2px solid var(--field-border);border-radius:999px;background:var(--white);font-weight:700;font-size:15px;color:var(--rich-blue);cursor:pointer;user-select:none}
.choice-chip input{position:absolute;opacity:0;pointer-events:none}
.choice-chip.on,.choice-chip:has(input:checked){background:var(--rich-blue);border-color:var(--rich-blue);color:var(--white)}
.choice-chip:focus-within{outline:3px solid var(--mobile-pink)}
/* radio groups: fieldset + legend that look exactly like the other fields */
fieldset.field,.fs{border:0;padding:0;margin-left:0;margin-right:0;min-width:0}
.fs{margin:0;display:grid}
.fs-gap{gap:6px}
fieldset.field>legend,.fs>legend{float:left;width:100%;padding:0}

/* ---- login: Rich Blue with the soft circles of the RCUK artwork ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--rich-blue);position:relative;overflow:hidden}
.login:before,.login:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.login:before{width:520px;height:520px;right:-140px;top:-160px;background:color-mix(in srgb,var(--mauve) 35%,var(--rich-blue))}
.login:after{width:300px;height:300px;left:-90px;bottom:-110px;background:var(--mobile-pink);opacity:.9}
.login-card{position:relative;z-index:1;width:min(440px,100%);background:var(--white);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg)}
.login-card img{width:190px;display:block;margin:26px auto 30px}  /* clear space of at least half the logo height */
.login-card h1{margin:0 0 6px;color:var(--mobile-pink);font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.login-card p{margin:0 0 22px;color:var(--muted)}

/* ---- app shell ---- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--rich-blue);color:var(--white);display:flex;flex-direction:column;padding:16px 14px 20px;overflow-y:auto;z-index:var(--z-sidebar)}
/* White RCUK logo straight on the rich-blue menu (no panel or outline) */
.brand{background:transparent;padding:12px 8px;margin:0 0 22px}
.brand img{display:block;width:100%;height:auto}
.nav{display:grid;gap:4px}
.nav-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);padding:6px 12px;font-weight:800}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);color:var(--white);text-decoration:none;font-weight:600;font-size:16px}
.nav a:hover{background:color-mix(in srgb,var(--white) 10%,var(--rich-blue))}
.nav a.active{background:var(--white);color:var(--rich-blue)}
.nav a.active .i{color:var(--mobile-pink)}
.nav .count{margin-left:auto;background:var(--pink);color:var(--rich-blue);border-radius:999px;font-size:13px;font-weight:800;min-width:24px;height:24px;display:grid;place-items:center;padding:0 7px}
.side-foot{margin-top:auto;padding:14px 8px 0;border-top:1px solid color-mix(in srgb,var(--white) 20%,var(--rich-blue));font-size:13px;color:var(--ice)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 28px;background:var(--white);border-bottom:2px solid var(--line)}
.top-logo{display:none;height:26px;width:auto;margin:0 13px}  /* mobile only; clear space half its height */
.scan{flex:1;max-width:520px;position:relative}
.scan .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.scan input{width:100%;min-height:46px;border:2px solid var(--field-border);border-radius:var(--radius-sm);padding:10px 14px 10px 44px;font-size:16px;background:var(--white);outline:none;color:var(--rich-blue)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.icon-btn{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid var(--line-2);background:var(--white);color:var(--rich-blue)}
.icon-btn:hover{background:var(--rb-06)}
.icon-btn .dot{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--mobile-pink);color:var(--white);font-size:13px;font-weight:800;display:grid;place-items:center;border:2px solid var(--white)}
.icon-btn.menu-btn{display:none}
.user-chip{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:2px solid var(--line-2);border-radius:999px;background:var(--white);color:var(--rich-blue)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--mobile-pink);color:var(--white);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.user-chip b{display:block;font-size:14px;line-height:1.2;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip small{display:block;font-size:13px;color:var(--muted);line-height:1.2}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--white);border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:220px;padding:6px;z-index:var(--z-menu)}
.menu-pop button{display:flex;gap:10px;align-items:center;width:100%;padding:12px;border:0;background:none;border-radius:var(--radius-sm);font-weight:700;color:var(--rich-blue);text-align:left}
.menu-pop button:hover{background:var(--rb-06)}

/* Admin "View as": Services Yellow so it is never missed */
.view-as{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:var(--radius-sm);background:var(--services-yellow);border:2px solid var(--rich-blue);color:var(--rich-blue);min-width:0;max-width:100%}
.view-as .va-title{display:flex;align-items:center;gap:6px;white-space:nowrap}
.view-as b{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.view-as select{min-height:36px;border:2px solid var(--rich-blue);border-radius:var(--radius-sm);padding:4px 8px;background:var(--white);font-weight:700;font-size:14px;color:var(--rich-blue);max-width:220px;min-width:0;text-overflow:ellipsis}
.view-as .va-search{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--rich-blue);border-radius:var(--radius-sm);background:var(--white);color:var(--rich-blue);flex:none}
.view-as .va-open{display:none;min-height:44px;border:2px solid var(--rich-blue);border-radius:var(--radius-sm);background:var(--white);color:var(--rich-blue);font-weight:800;font-size:15px;padding:6px 12px;white-space:nowrap}
.banner-preview .va-note{font-weight:500}
.menu-note{margin:4px 6px 8px;padding:8px 10px;font-size:13px;line-height:1.4;color:var(--muted);border-bottom:1px solid var(--line)}
.va-list{max-height:min(46vh,420px);overflow:auto;margin:0 -4px;padding:0 4px}
.va-group h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 0 6px}
.va-person{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;min-height:48px;padding:8px 12px;margin:0 0 6px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--white);color:var(--rich-blue);text-align:left}
.va-person:hover,.va-person.on{border-color:var(--rich-blue);background:var(--rb-06)}
.va-person small{color:var(--muted);font-size:13px}
.va-pair{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:8px;align-items:center;margin:0 0 8px}
.va-pair label{font-weight:700;white-space:nowrap}
.va-pair select{min-width:0;min-height:44px}
.va-pair .btn{min-height:44px}
.banner{display:flex;align-items:center;gap:12px;padding:12px 28px;font-weight:700;font-size:15px;flex-wrap:wrap}
.banner .btn{margin-left:auto}
.banner-preview{background:var(--yellow-25);border-bottom:3px solid var(--services-yellow);color:var(--rich-blue)}
.banner-version{background:var(--rich-blue);color:var(--white);border-bottom:4px solid var(--coral)}
.banner-version>.i{color:var(--services-yellow)}
.banner-version code{background:color-mix(in srgb,var(--white) 15%,var(--rich-blue));padding:2px 6px;border-radius:var(--radius-sm)}
.content{width:100%;max-width:1480px;margin:0 auto;padding:28px 28px 60px;min-width:0}

/* ---- page structure ---- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mobile-pink);margin-bottom:4px}
h1{font-size:32px;line-height:1.15;color:var(--rich-blue);margin:0;letter-spacing:-.01em;font-weight:800}
h2{font-size:21px;color:var(--rich-blue);margin:0;font-weight:800}
h3{font-size:17px;color:var(--rich-blue);margin:0}
.sub{color:var(--muted);font-size:16px;margin-top:6px}
.card{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px;min-width:0}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-head .grow{flex:1;min-width:0}
.card-head p{margin:2px 0 0;color:var(--muted);font-size:15px}
/* RCUK circular icons: line icon on a solid palette circle */
.ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--rich-blue);color:var(--white)}
.ico.pink{background:var(--mobile-pink);color:var(--white)}
.ico.yellow{background:var(--services-yellow);color:var(--rich-blue)}
.ico.green{background:var(--telecoms-green);color:var(--rich-blue)}
.ico.blue{background:var(--connectivity-blue);color:var(--rich-blue)}
.ico.red{background:var(--coral);color:var(--rich-blue)}
.empty{padding:34px 16px;text-align:center;color:var(--muted)}
.empty .i{width:40px;height:40px;color:var(--rb-26);margin-bottom:6px}
/* message-only pages: the message is the page's h1 but looks like the other empty states */
.empty h1,.notice h1{font:inherit;font-weight:700;color:inherit;letter-spacing:normal;margin:0}
.muted{color:var(--muted)}
.small{font-size:14px}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em;direction:ltr;unicode-bidi:isolate}
bdi{unicode-bidi:isolate}
.divider{height:2px;background:var(--line);margin:18px 0}

/* ---- status chips and flags (palette colour + Rich Blue text) ---- */
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-weight:800;font-size:14px;line-height:1.2;background:var(--rb-10);color:var(--rich-blue)}
.chip .i{width:16px;height:16px}
.chip-dispatch{background:var(--rich-blue);color:var(--white)}
.chip-supplier{background:var(--connectivity-blue);color:var(--rich-blue)}
.chip-charge{background:var(--services-yellow);color:var(--rich-blue)}
.chip-store{background:var(--telecoms-green);color:var(--rich-blue)}
.chip-closed{background:var(--white);color:var(--rich-blue);box-shadow:inset 0 0 0 2px var(--field-border)}
.chip-cancelled{background:var(--coral-15);color:var(--rich-blue);box-shadow:inset 0 0 0 2px var(--coral)}
.chip-good{background:var(--telecoms-green);color:var(--rich-blue)}
.chip-bad{background:var(--coral-15);color:var(--rich-blue);box-shadow:inset 0 0 0 2px var(--coral)}
.chip-bad .i{color:var(--coral)}
.chip-warn{background:var(--services-yellow);color:var(--rich-blue)}
.chip-neutral{background:var(--rb-10);color:var(--rich-blue)}
.flag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-sm);font-size:13px;font-weight:800;color:var(--rich-blue)}
.flag-overdue{background:var(--coral-15);box-shadow:inset 0 0 0 2px var(--coral)}
.flag-overdue .i{color:var(--coral)}
.flag-manual{background:var(--yellow-25);box-shadow:inset 0 0 0 2px var(--services-yellow)}
.flag-oow{background:var(--coral-15);box-shadow:inset 0 0 0 2px var(--coral)}
.flag-unread{background:var(--pink);color:var(--rich-blue)}
.flags{display:flex;flex-wrap:wrap;gap:6px}
.flag-urgent{background:var(--mobile-pink);color:var(--white)}
.flag-hold{background:var(--yellow-25);box-shadow:inset 0 0 0 2px var(--services-yellow)}
.sec-list{display:grid;gap:6px;margin-top:4px}
.sec-item{padding:10px 12px;border:2px solid var(--line-2);border-radius:var(--radius-sm);background:var(--white);min-height:48px;align-items:center}
.sec-item:has(input:checked){border-color:var(--telecoms-green);background:var(--green-30)}
.tick{color:var(--rich-blue);background:var(--telecoms-green);border-radius:50%;display:inline-grid;place-items:center;width:22px;height:22px;font-size:13px;font-weight:800}
.cross{color:var(--white);background:var(--coral);border-radius:50%;display:inline-grid;place-items:center;width:22px;height:22px;font-size:13px;font-weight:800}
.passcode{background:var(--yellow-25);padding:2px 8px;border-radius:var(--radius-sm);font-weight:800;letter-spacing:.05em}
.pattern-svg{display:block}
.pattern-svg polyline{fill:none;stroke:var(--mobile-pink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pattern-svg circle{fill:var(--rb-26)}.pattern-svg circle.on{fill:var(--rich-blue)}
.pattern-svg text{font-size:13px;font-weight:800;fill:var(--mobile-pink);font-family:var(--font)}
.pattern-pad{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pad-wrap{position:relative;width:240px;height:240px;background:var(--rb-06);border-radius:var(--radius);border:2px solid var(--line-2)}
.pad-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.pad-dot{background:transparent;border:0;border-radius:50%;cursor:pointer}
.pad-dot:focus-visible{outline:3px solid var(--mobile-pink)}
.more-actions{border-top:2px solid var(--line);margin-top:14px;padding-top:14px;display:grid;gap:8px}

/* ---- home / dashboard ---- */
.queue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.queue{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--radius);background:var(--white);border:2px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--rich-blue);border-top:6px solid var(--rich-blue);min-width:0}
.queue:hover{border-color:var(--rb-26)}
.queue .q-top{display:flex;align-items:center;justify-content:space-between}
.queue b{font-size:40px;line-height:1;color:var(--rich-blue)}
.queue span{font-weight:800;font-size:16px}
.queue .ico{width:42px;height:42px}
.queue.q-dispatch{border-top-color:var(--rich-blue)}.queue.q-supplier{border-top-color:var(--connectivity-blue)}.queue.q-charge{border-top-color:var(--services-yellow)}.queue.q-store{border-top-color:var(--telecoms-green)}
.alert-strip{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.alert-pill{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--white);border:2px solid var(--line-2);font-weight:800;text-decoration:none;color:var(--rich-blue)}
.alert-pill b{font-size:20px}
.alert-pill.red{border-color:var(--coral);background:var(--coral-15)}
.alert-pill.red .i{color:var(--coral)}
.alert-pill.amber{border-color:var(--services-yellow);background:var(--yellow-25)}
.case-list{display:grid;gap:10px}
.case-list>*,.case-row{min-width:0}
.case-row{display:flex;gap:14px;align-items:center;padding:14px 16px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--white);text-decoration:none;color:var(--rich-blue)}
.case-row:hover{border-color:var(--mobile-pink)}
.case-row .grow{flex:1;min-width:0}
.case-row b{color:var(--rich-blue)}
.case-row .meta{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case-row .ico{width:40px;height:40px}
.case-row.unread{border-color:var(--mobile-pink);background:var(--pink-10)}

/* ---- RMA list ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.seg{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 16px;border-radius:999px;border:2px solid var(--field-border);background:var(--white);font-weight:700;font-size:15px;color:var(--rich-blue);text-decoration:none}
.seg .n{background:var(--rb-10);color:var(--rich-blue);border-radius:999px;padding:1px 8px;font-size:13px}
.seg.active{background:var(--rich-blue);border-color:var(--rich-blue);color:var(--white)}
.seg.active .n{background:var(--pink);color:var(--rich-blue)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .input{width:auto;min-width:180px;flex:0 1 auto}
.toolbar .search{flex:1;min-width:220px}
.table-wrap{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow)}
table.table{width:100%;border-collapse:collapse;min-width:880px}
.table th{text-align:left;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--rich-blue);background:var(--rb-06);padding:14px 16px;border-bottom:2px solid var(--line);white-space:nowrap}
.table td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.table td b{white-space:nowrap}
.table tbody tr{cursor:pointer}
.table tbody tr:hover td{background:var(--pink-10)}
.table tr:last-child td{border-bottom:0}
.table .rn{font-weight:800;color:var(--rich-blue);white-space:nowrap}
.table .rn a{color:inherit;text-decoration:none}
.table .rn a:hover{text-decoration:underline}
/* keyboard-reachable edit control inside a clickable row, drawn like the plain content it wraps */
.row-btn{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;display:inline-flex;align-items:center;cursor:pointer}
.table .sm{font-size:14px;color:var(--muted)}
.table.static tbody tr{cursor:default}
.table.static tbody tr:hover td{background:none}
.cards-mobile{display:none}

/* ---- wizard ---- */
.steps{display:flex;align-items:center;gap:10px;max-width:980px;margin:0 auto 20px}
.step{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700;min-width:0}
.step .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--rb-10);color:var(--rich-blue);font-weight:800;flex:none}
.step.now{color:var(--rich-blue)}.step.now .n{background:var(--mobile-pink);color:var(--white);box-shadow:0 0 0 5px var(--pink-25)}
.step.done{color:var(--rich-blue)}.step.done .n{background:var(--telecoms-green);color:var(--rich-blue)}
.step-line{flex:1;height:3px;background:var(--line-2);min-width:12px;border-radius:999px}
.wizard{max-width:980px;margin:0 auto}
.wizard .card{padding:28px}
.wiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:2px solid var(--line);flex-wrap:wrap}
.imei-box{background:var(--rb-03);border:2px solid var(--line);border-radius:var(--radius);padding:20px}
.imei-row{display:flex;gap:10px}
/* the two barcode boxes (New RMA IMEI, Scan in / Send to Dispatch) share one look and one focus style */
.imei-row input,.scan-row input{flex:1;min-width:0;min-height:56px;font-size:20px;letter-spacing:.04em;border:2px solid var(--field-border);border-radius:var(--radius-sm);padding:8px 14px;outline:none;font-family:inherit;font-variant-numeric:tabular-nums;color:var(--rich-blue);background:var(--white)}
.imei-row input:focus,.scan-row input:focus{border-color:var(--mobile-pink);box-shadow:0 0 0 3px var(--pink-25);outline:3px solid var(--rich-blue);outline-offset:2px}
.device{margin-top:18px;border:2px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.device-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:20px 22px;background:var(--rb-06)}
.device-head h3{font-size:23px;color:var(--rich-blue);line-height:1.25;font-weight:800}
.device-head .code{color:var(--muted);font-size:15px;margin-top:4px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--line)}
.fact{padding:14px 20px;border-bottom:1px solid var(--line);min-width:0}
.fact label{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.fact b{display:block;font-size:16px;color:var(--rich-blue);overflow-wrap:anywhere;font-weight:700}
.warranty-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 20px;background:var(--rb-03)}
/* Warranty: Telecoms Green = in warranty, Coral (RCUK red) = expired, Services Yellow = not set */
.wcard{border-radius:var(--radius);padding:16px;background:var(--white);color:var(--rich-blue);border:2px solid var(--line-2)}
.wcard label{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.wcard b{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800}
.wcard.in{background:var(--telecoms-green);border-color:var(--telecoms-green)}
.wcard.expired{background:var(--coral);border-color:var(--coral);color:var(--white)}
.wcard.missing,.wcard.unknown{background:var(--services-yellow);border-color:var(--services-yellow)}
.wcard .hint{color:inherit}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-sm);font-size:15px;line-height:1.5;margin:14px 0;color:var(--rich-blue);border:2px solid}
.notice .i{margin-top:2px}
.notice b{display:block}
.notice-warn{background:var(--yellow-25);border-color:var(--services-yellow)}
.notice-bad{background:var(--coral-15);border-color:var(--coral)}.notice-bad>.i{color:var(--coral)}
.notice-info{background:var(--ice);border-color:var(--connectivity-blue)}
.notice-ok{background:var(--green-30);border-color:var(--telecoms-green)}
.pick-list{display:grid;gap:8px;max-height:420px;overflow:auto;margin-top:12px}
.pick{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--white);text-align:left;width:100%;color:var(--rich-blue)}
.pick:hover{border-color:var(--mobile-pink)}
.pick b{display:block;color:var(--rich-blue)}
.pick small{display:block;color:var(--muted);font-size:14px}
.type-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.type-card{display:block;cursor:pointer;border:2px solid var(--field-border);border-radius:var(--radius);padding:18px;background:var(--white);position:relative}
.type-card input{position:absolute;opacity:0}
.type-card:has(input:checked){border-color:var(--mobile-pink);box-shadow:0 0 0 4px var(--pink-25)}
.type-card:focus-within{outline:3px solid var(--mobile-pink);outline-offset:2px}
.type-card .t{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--rich-blue);margin-bottom:8px}
.photo-grid>p{grid-column:1/-1}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.thumb{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--line);background:var(--rb-06);aspect-ratio:1;display:grid;place-items:center;text-align:center;font-size:13px;color:var(--muted);padding:0}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb .rm{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:0;background:var(--rich-blue);color:var(--white);display:grid;place-items:center}
.capture-row{display:flex;gap:10px;flex-wrap:wrap}
.capture-row label{cursor:pointer;position:relative}
/* file pickers stay in the Tab order (hidden visually, not removed); the button around them shows the focus */
.capture-row input[type=file],.composer .tool input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.capture-row label:focus-within,.composer .tool:focus-within{outline:3px solid var(--mobile-pink);outline-offset:2px}
.review{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 16px;background:var(--rb-06);border-radius:var(--radius);padding:18px;font-size:15px}
.review dt{font-weight:700;color:var(--muted)}
.review dd{margin:0;color:var(--rich-blue);overflow-wrap:anywhere}
.success{text-align:center;padding:30px 10px}
.success .big{width:80px;height:80px;border-radius:50%;background:var(--telecoms-green);color:var(--rich-blue);display:grid;place-items:center;margin:0 auto 14px}
.success .big .i{width:40px;height:40px}
.success h1{font-size:28px;line-height:1.55;letter-spacing:normal;color:var(--mobile-pink);text-transform:uppercase}
.success .rma{display:inline-block;font-size:34px;font-weight:800;color:var(--white);background:var(--rich-blue);border-radius:999px;padding:6px 26px;margin:10px 0 8px;letter-spacing:.02em}

/* ---- RMA detail ---- */
.detail-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:16px}
.detail-head h1{font-size:28px}
/* "What happens next": solid Rich Blue panel, Pink caps label, icon circle in the colour of who it waits for */
.next{display:flex;gap:16px;align-items:center;padding:20px 22px;border-radius:var(--radius);margin-bottom:16px;background:var(--rich-blue);color:var(--white);flex-wrap:wrap}
.next .ico{width:54px;height:54px}
.next .ico .i{width:28px;height:28px}
.next.dispatch .ico{background:var(--mobile-pink);color:var(--white)}
.next.supplier .ico{background:var(--connectivity-blue);color:var(--rich-blue)}
.next.charge .ico{background:var(--services-yellow);color:var(--rich-blue)}
.next.store .ico{background:var(--telecoms-green);color:var(--rich-blue)}
.next.closed .ico{background:var(--white);color:var(--rich-blue)}
.next.cancelled .ico{background:var(--coral);color:var(--rich-blue)}
.next .grow{flex:1;min-width:220px}
.next .w{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.next .t{font-size:20px;font-weight:800;color:var(--white);margin-top:2px;line-height:1.35}
.next .o{font-size:15px;color:var(--ice);margin-top:4px}
.next .o b{color:var(--white)}
.next .timer{text-align:right;font-size:15px;color:var(--ice)}
.next .timer b{display:block;font-size:22px;color:var(--white)}
.next .flag-overdue{background:var(--coral);box-shadow:none;color:var(--rich-blue)}
.next .flag-overdue .i{color:var(--rich-blue)}
.tracker{display:flex;margin:0 0 18px;overflow-x:auto;padding-bottom:4px}
.tk{flex:1;min-width:120px;position:relative;text-align:center;font-size:14px;font-weight:700;color:var(--muted);padding-top:36px}
.tk:before{content:"";position:absolute;top:14px;left:-50%;right:50%;height:4px;background:var(--line-2)}
.tk:first-child:before{display:none}
.tk .dot{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--rb-16);border:3px solid var(--white);display:grid;place-items:center;color:var(--rich-blue);z-index:1}
.tk.done{color:var(--rich-blue)}.tk.done .dot{background:var(--telecoms-green)}.tk.done:before{background:var(--telecoms-green)}
.tk.now{color:var(--rich-blue);font-weight:800}.tk.now .dot{background:var(--mobile-pink);box-shadow:0 0 0 5px var(--pink-25)}.tk.now:before{background:var(--telecoms-green)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:18px;align-items:start}
.detail-side{position:sticky;top:90px;display:grid;gap:18px;min-width:0}
.detail-side .card{margin:0}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.kv>div{min-width:0}
.kv label{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.kv .v{font-size:16px;font-weight:600;color:var(--rich-blue);overflow-wrap:anywhere}
.kv .wide{grid-column:1/-1}
.kv .v.text{font-weight:500;white-space:pre-wrap}
.section-title{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mobile-pink);margin:20px 0 12px}
.action{border:2px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;background:var(--white)}
.action:last-child{margin-bottom:0}
.action h3{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:18px;color:var(--rich-blue);font-weight:800}
.action h3 .i{color:var(--mobile-pink)}
.action>p{margin:0 0 14px;color:var(--muted);font-size:15px}
.action.highlight{border-color:var(--mobile-pink);box-shadow:0 0 0 4px var(--pink-10)}
.action.done{background:var(--green-30);border-color:var(--telecoms-green)}
.action.done h3 .i{color:var(--rich-blue);background:var(--telecoms-green);border-radius:50%;padding:3px;width:26px;height:26px}
.action.done details.more .action{margin:0;border:0;padding:0;background:none;box-shadow:none}
.action.lock{background:var(--yellow-25);border-color:var(--services-yellow)}
.action.lock h3 .i{color:var(--rich-blue)}
/* supplier: one decision panel */
.sup-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:6px}
.sup-choice{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border:2px solid var(--line-2);border-radius:var(--radius);background:var(--white);color:var(--rich-blue)}
.sup-choice:hover{border-color:var(--mobile-pink)}
.sup-choice.on{border-color:var(--mobile-pink);background:var(--pink-10);box-shadow:0 0 0 3px var(--pink-25)}
.sup-choice b{display:block;font-size:16px;font-weight:800;line-height:1.3}
.sup-choice small{display:block;font-size:14px;color:var(--muted);margin-top:3px;line-height:1.4}
.sup-choice .ico{width:40px;height:40px}
.sup-panel [data-sup-form] .action{margin:14px 0 0;box-shadow:none;border-color:var(--line-2)}
.sup-panel details.more .action{margin:0;border:0;padding:0}
details.more{border:2px dashed var(--line-2);border-radius:var(--radius);padding:12px 16px;margin-top:14px}
details.more summary{cursor:pointer;font-weight:800;color:var(--rich-blue);list-style:none;display:flex;align-items:center;gap:8px}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary{margin-bottom:12px}
.timeline{position:relative;padding-left:26px}
.timeline:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;background:var(--line)}
.ev{position:relative;padding-bottom:16px}
.ev:before{content:"";position:absolute;left:-23px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--mobile-pink);border:3px solid var(--white)}
.ev.internal:before{background:var(--rich-blue)}
.ev b{display:block;font-size:15px;color:var(--rich-blue);font-weight:600;overflow-wrap:anywhere}
.ev small{font-size:14px;color:var(--muted)}
.quote{border:2px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px}
.quote .top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.quote .amt{font-size:24px;font-weight:800;color:var(--rich-blue)}
.hand{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.hand:last-child{border-bottom:0}
.hand .ico{width:38px;height:38px;background:var(--connectivity-blue);color:var(--rich-blue)}

/* ---- conversations ---- */
.chat{display:flex;flex-direction:column;padding:0;overflow:hidden;height:min(760px,calc(100vh - 120px))}
.chat-tabs{display:flex;border-bottom:2px solid var(--line);background:var(--rb-03)}
.chat-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;border:0;background:none;font-weight:800;font-size:15px;color:var(--muted);border-bottom:4px solid transparent}
.chat-tab.on{color:var(--rich-blue);border-bottom-color:var(--mobile-pink);background:var(--white)}
.chat-tab .badge{background:var(--pink);color:var(--rich-blue);border-radius:999px;font-size:12px;padding:1px 8px}
.chat-info{padding:10px 16px;font-size:14px;color:var(--muted);background:var(--white);border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:flex-start}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--rb-03);min-height:200px}
.msg{max-width:88%;align-self:flex-start;display:flex;flex-direction:column;gap:4px}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg .who{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:0 6px}
.msg .who b{color:var(--rich-blue);font-size:14px}
.role{display:inline-block;font-weight:800;padding:1px 8px;border-radius:999px;font-size:12px;color:var(--rich-blue)}
.role-rcuk{background:var(--rich-blue);color:var(--white)}.role-retail{background:var(--telecoms-green)}.role-dispatch{background:var(--rich-blue);color:var(--white)}.role-supplier{background:var(--connectivity-blue)}.role-admin{background:var(--pink)}
.bubble{background:var(--white);border:2px solid var(--line);border-radius:18px 18px 18px 6px;padding:11px 15px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--rich-blue)}
.msg.mine .bubble{border-radius:18px 18px 6px 18px}  /* colours come from the .col-* rules below */
.msg-files{display:grid;grid-template-columns:repeat(2,minmax(0,160px));gap:6px}
.msg.mine .msg-files{justify-content:end}
.msg-files .media{border-radius:var(--radius-md);overflow:hidden;border:2px solid var(--line);background:var(--white);padding:0;display:block}
.msg-files img{display:block;width:100%;height:140px;object-fit:cover}
.msg-files video{display:block;width:100%;max-height:220px;background:var(--rich-blue);grid-column:1/-1;border-radius:var(--radius-md)}
.file-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);background:var(--white);border:2px solid var(--line);text-decoration:none;color:var(--rich-blue);font-size:14px;font-weight:700;grid-column:1/-1;max-width:320px}
.file-card .ico{width:36px;height:36px;background:var(--coral);color:var(--rich-blue)}
.file-card span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer{border-top:2px solid var(--line);background:var(--white);padding:10px 12px}
.composer-row{display:flex;align-items:flex-end;gap:8px}
.composer textarea{flex:1;min-width:0;min-height:46px;max-height:140px;resize:none;border:2px solid var(--field-border);border-radius:var(--radius-sm);padding:11px 14px;font-size:16px;outline:none;line-height:1.4;color:var(--rich-blue)}
.composer .tool{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid var(--line-2);background:var(--white);color:var(--rich-blue);display:grid;place-items:center;flex:none;cursor:pointer}
.composer .tool:hover{background:var(--rb-06)}
.composer .send{width:50px;height:46px;border-radius:var(--radius-sm);border:0;background:var(--cta);color:var(--white);display:grid;place-items:center;flex:none}
.composer .send:hover{background:var(--cta-hover)}
.composer .send[disabled]{opacity:.5}
.pending{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pending .thumb{width:72px;height:72px;aspect-ratio:auto;font-size:11px}
.pending .thumb .rm{width:24px;height:24px;top:3px;right:3px}
.composer .hint{margin-top:6px;font-size:13px}
.readonly{padding:14px 16px;background:var(--rb-03);border-top:2px solid var(--line);color:var(--muted);font-size:15px;display:flex;gap:10px;align-items:flex-start}
.readonly .btn{margin-left:auto;flex:none;align-self:center}
@media (max-width:700px){
  .composer-row{flex-wrap:wrap}
  .composer textarea{flex:1 1 100%;order:-1}
  .composer .send{margin-left:auto}
  .readonly{flex-wrap:wrap}
  .readonly .btn{margin-left:0}
}
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.file-tile{border:2px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--white);display:flex;flex-direction:column;min-width:0}
.file-tile .prev{height:110px;background:var(--rb-06);display:grid;place-items:center;color:var(--muted);padding:0;border:0;width:100%}
.file-tile .prev img,.file-tile .prev video{width:100%;height:110px;object-fit:cover;display:block}
.file-tile .cap{padding:8px 10px;font-size:13px;line-height:1.35;color:var(--rich-blue)}
.file-tile .cap b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-tile .share-btn{display:flex;width:100%;margin-top:8px;font-size:13px;padding:6px 8px;white-space:normal;line-height:1.2}
.vis{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:800;color:var(--rich-blue)}
.vis.shared{background:var(--connectivity-blue)}.vis.internal{background:var(--rb-10)}
/* the holder is what sticks (the bar alone fills its holder, so it could never stick); it stays just below the real header height */
#updateBar{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:var(--z-sticky)}
.update-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--rich-blue);color:var(--white);margin-bottom:14px;font-weight:700;border-left:6px solid var(--mobile-pink)}
.update-bar .btn{margin-left:auto}

/* ---- reports ---- */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.kpi label{display:block;font-size:14px;font-weight:800;color:var(--muted)}
.kpi b{display:block;font-size:30px;color:var(--rich-blue);margin-top:4px;line-height:1.1}
.kpi small{color:var(--muted);font-size:13px}
.kpi.alert{border-color:var(--coral);background:var(--coral-15)}
.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) 48px;gap:12px;align-items:center;font-size:15px}
.bar-row .track{height:14px;background:var(--rb-10);border-radius:999px;overflow:hidden}
.bar-row .fill{height:100%;background:var(--mobile-pink);border-radius:999px}
.bar-row b{text-align:right}
.fill.dispatch{background:var(--rich-blue)}.fill.supplier{background:var(--connectivity-blue)}.fill.charge{background:var(--services-yellow)}.fill.store{background:var(--telecoms-green)}
.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* ---- setup control panel ---- */
.control-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:28px;border-radius:var(--radius);background:var(--rich-blue);color:var(--white);margin-bottom:22px}
.control-hero:after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:color-mix(in srgb,var(--mauve) 35%,var(--rich-blue))}
.control-hero>*{position:relative;z-index:1}
.control-hero h1{color:var(--white)}
.control-hero .eyebrow{color:var(--pink)}
.control-hero p{margin:6px 0 0;color:var(--ice)}
.control-hero>.ico{width:58px;height:58px;background:var(--mobile-pink)}
.control-hero>.ico .i{width:28px;height:28px}
.control-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tile{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--radius);background:var(--white);border:2px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--rich-blue);min-height:150px}
.tile:hover{border-color:var(--mobile-pink)}
.tile .ico{width:56px;height:56px}
.tile .ico .i{width:28px;height:28px}
.tile b{display:block;font-size:19px;color:var(--rich-blue);font-weight:800}
.tile p{margin:4px 0 8px;color:var(--muted);font-size:15px}
.tile em{font-style:normal;font-weight:800;font-size:14px;color:var(--rich-blue);background:var(--rb-06);border-radius:999px;padding:3px 10px}
.setup-head{display:flex;gap:14px;align-items:center}
.setup-head .ico{width:52px;height:52px}
.setup-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}
.setup-nav{position:sticky;top:92px;display:grid;gap:4px;background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow)}
.setup-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);text-decoration:none;color:var(--rich-blue);font-weight:700;font-size:15px}
.setup-nav a:hover{background:var(--rb-06)}
.setup-nav a.active{background:var(--rich-blue);color:var(--white)}
.setup-nav a.active .i{color:var(--pink)}
.perm-group{border:2px solid var(--line);border-radius:var(--radius);padding:6px 16px;margin-bottom:12px}
.perm-group h4{margin:10px 0 4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--mobile-pink)}
.perm{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.perm:last-child{border-bottom:0}
.perm .t{font-weight:700;font-size:15px;color:var(--rich-blue)}
.perm .s{font-size:13px;color:var(--muted)}
.switch{position:relative;width:54px;height:32px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--rb-26);box-shadow:inset 0 0 0 2px var(--field-border);cursor:pointer}
.switch span:before{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--white);transition:transform .15s}
.switch input:checked+span{background:var(--mobile-pink);box-shadow:none}
.switch input:checked+span:before{transform:translateX(22px)}
.switch input:focus-visible+span{outline:3px solid var(--rich-blue)}
.wrow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 110px 110px auto;gap:12px;align-items:center;padding:14px 16px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--white);margin-bottom:8px}
.wrow b{color:var(--rich-blue);display:block;line-height:1.3}
.wrow small{display:block;color:var(--muted);font-size:13px}
.wrow input{width:100%;min-height:42px;border:2px solid var(--field-border);border-radius:var(--radius-sm);padding:6px 10px;font-size:16px;color:var(--rich-blue)}
.wrow .lbl{display:none}
.map-table td,.map-table th{padding:10px 12px}
.map-table select{min-height:40px;border:2px solid var(--line-2);border-radius:var(--radius-sm);padding:4px 8px;font-size:15px;max-width:100%;color:var(--rich-blue)}
.sum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:14px 0}
.sum{border-radius:var(--radius-sm);padding:14px;border:2px solid var(--line);background:var(--white);color:var(--rich-blue)}
.sum b{display:block;font-size:24px}
.sum span{font-size:14px;color:var(--muted);font-weight:700}
.sum.good{background:var(--green-30);border-color:var(--telecoms-green)}
.sum.warn{background:var(--yellow-25);border-color:var(--services-yellow)}
.sum.bad{background:var(--coral-15);border-color:var(--coral)}
details.detail-list{border:2px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:10px;background:var(--white)}
details.detail-list summary{cursor:pointer;font-weight:800;color:var(--rich-blue)}
details.detail-list .scroll{max-height:300px;overflow:auto;margin-top:10px;font-size:14px}

/* ---- phone photos by QR code ---- */
.phone-qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-bottom:12px}
.qr-box{background:var(--white);border:3px solid var(--rich-blue);border-radius:var(--radius);padding:8px;line-height:0;max-width:100%}
.qr-box svg{width:min(230px,100%);height:auto;aspect-ratio:1;display:block}
.qr-steps{margin:0;padding-left:22px;font-size:17px;font-weight:600;display:grid;gap:10px}
.qr-steps li::marker{color:var(--mobile-pink);font-weight:800}
.phone-tag{position:absolute;left:6px;bottom:6px;padding:2px 8px;font-size:12px}
@media (max-width:700px){.phone-qr{grid-template-columns:1fr;justify-items:center}}

/* ---- modal, toast, lightbox ---- */
.modal-bg{position:fixed;inset:0;background:color-mix(in srgb,var(--rich-blue) 70%,transparent);z-index:var(--z-modal);display:grid;place-items:center;padding:16px}
.modal{width:min(760px,100%);max-height:92vh;overflow:auto;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:26px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-toast);background:var(--rich-blue);color:var(--white);padding:14px 20px;border-radius:var(--radius-sm);font-weight:700;box-shadow:var(--shadow-lg);max-width:min(560px,calc(100vw - 32px));display:flex;gap:10px;align-items:center;border-left:6px solid var(--mobile-pink)}
.toast.ok{border-left-color:var(--telecoms-green)}.toast.ok .i{color:var(--telecoms-green)}
.toast.err{border-left-color:var(--coral)}.toast.err .i{color:var(--coral)}
/* while a pop-up is open the toast moves to the top so it never covers the pop-up's buttons */
body:has(#modalRoot:not(:empty)) .toast{top:calc(16px + env(safe-area-inset-top,0px));bottom:auto}
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);background:color-mix(in srgb,var(--rich-blue) 92%,transparent);display:grid;place-items:center;padding:20px}
.lightbox img,.lightbox iframe{max-width:100%;max-height:86vh;border-radius:var(--radius-md);background:var(--white)}
.lightbox iframe{width:min(900px,100%);height:86vh;border:0}
.lightbox .close{position:absolute;top:16px;right:16px}
.spinner{width:22px;height:22px;border:3px solid color-mix(in srgb,var(--white) 35%,transparent);border-top-color:var(--white);border-radius:50%;animation:spin .8s linear infinite}
.spinner.dark{border-color:var(--rb-16);border-top-color:var(--mobile-pink)}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;gap:12px;align-items:center;justify-content:center;padding:40px;color:var(--muted)}

/* ---- DYMO 30256 label (4in x 2 5/16in). Thermal printers print black only. ---- */
#printArea{display:none}
.dymo{width:4in;height:2.3125in;padding:.1in .14in .06in;box-sizing:border-box;overflow:hidden;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column}
.dymo .l-top{display:flex;justify-content:space-between;align-items:center;gap:.16in}
.dymo .l-logo{height:.32in;width:auto;display:block}
.dymo .l-rma{text-align:right;line-height:1.05}
.dymo .l-rma b{display:block;font-size:17pt;font-weight:800;letter-spacing:.01in}
.dymo .l-rma span{font-size:7.5pt}
.dymo .l-rule{height:1.5pt;background:#000;margin:.05in 0 .05in}
.dymo .l-model{font-size:10.5pt;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dymo .l-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:.02in .12in;margin-top:.04in;font-size:8pt;line-height:1.2}
.dymo .l-grid div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dymo .l-grid em{font-style:normal;font-weight:700;font-size:6.5pt;text-transform:uppercase;letter-spacing:.02in;margin-right:.03in}
.dymo .l-issue{margin-top:.03in;font-size:8pt;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dymo .l-issue em{font-style:normal;font-weight:700;font-size:6.5pt;text-transform:uppercase;letter-spacing:.02in;margin-right:.03in}
.dymo .l-code{margin-top:auto;text-align:center}
.dymo .l-code svg{display:block;width:3.55in;height:.44in;margin:0 auto}
.dymo .l-imei{font-size:9.5pt;font-weight:700;letter-spacing:.02in;margin-top:.01in}
/* 3.4.6 (UI2-01, UI2-10): ordinary pages, Help and sheets print on A4; the 4 x 2.3125 in label page is used only for a
   label in the print area (named page 'label'). Only what is in the print area prints, and only when it holds something. */
@page{size:A4 portrait;margin:12mm}
@page label{size:4in 2.3125in;margin:0}
@page sheet{size:A4 portrait;margin:12mm}
@media print{
  html:has(#printArea .dymo),html:has(#printArea .dymo) body{width:4in;height:2.3125in;margin:0!important;padding:0!important;background:#fff!important;overflow:hidden}
  html.print-a4,html.print-a4 body{margin:0!important;padding:0!important;background:#fff!important}
  html:has(#printArea:not(:empty)) body>*:not(#printArea){display:none!important}
  html:has(#printArea:not(:empty)) #printArea{display:block!important}
  .dymo{page:label;page-break-after:avoid;break-after:avoid;height:2.3in}
}
/* ---- A4 supplier collection sheet ---- */
.sheet{page:sheet;width:186mm;color:#000;font:10pt/1.35 Arial,Helvetica,sans-serif}
.sheet-head{display:flex;align-items:center;gap:8mm;border-bottom:2pt solid #000;padding-bottom:4mm;margin-bottom:5mm}
.sheet-head img{height:12mm}
.sheet h1{font-size:15pt;margin:0 0 1mm}
.sheet p{margin:0}
.sheet table{width:100%;border-collapse:collapse}
.sheet th,.sheet td{border:.75pt solid #000;padding:1.6mm 2mm;text-align:left;vertical-align:top}
.sheet th{font-size:8pt;text-transform:uppercase;background:#eee}
.sheet tr{break-inside:avoid}
.sheet td.box{width:14mm}
.sheet .mono{font-family:Consolas,monospace;font-size:9pt}
.sheet .sign{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin-top:10mm;break-inside:avoid}
.sheet .sign div{display:flex;flex-direction:column;gap:1.5mm;font-size:9pt}
.sheet .sign i{display:block;height:14mm;border-bottom:.75pt solid #000}
.sheet-foot{margin-top:6mm!important;font-size:8.5pt}

/* ---- responsive ---- */
@media (max-width:1280px){
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .detail-side{position:static}
  .chat{height:min(620px,calc(100dvh - 150px));min-height:420px}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-grid{grid-template-columns:minmax(0,1fr)}
  .setup-layout{grid-template-columns:minmax(0,1fr)}
  .setup-nav{position:static;display:flex;overflow-x:auto}
  .setup-nav a{white-space:nowrap}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  /* closed menu: off screen and out of the Tab order (visibility waits for the slide to finish) */
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(290px,86vw);transform:translateX(-105%);visibility:hidden;transition:transform .2s,visibility 0s linear .2s;box-shadow:var(--shadow-lg)}
  .shell.nav-open .sidebar{transform:none;visibility:visible;transition:transform .2s,visibility 0s}
  .shell.nav-open:after{content:"";position:fixed;inset:0;background:color-mix(in srgb,var(--rich-blue) 45%,transparent);z-index:var(--z-scrim)}
  .icon-btn.menu-btn{display:grid}
  .top-logo{display:block}
  .topbar{padding:10px 16px;gap:8px;flex-wrap:wrap}
  .content{padding:20px 16px 50px}
  .banner{padding:10px 16px}
  .user-chip .who{display:none}
  .user-chip{padding:4px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrow{grid-template-columns:1fr 1fr}
  .wrow>div:first-child{grid-column:1/-1}
  .wrow .lbl{display:block;font-size:13px;font-weight:700;color:var(--muted)}
  .wrow .btn{grid-column:1/-1}
  /* phones and tablets: every control is at least 44px tall for thumbs */
  .btn-sm,.btn-ghost,.view-as select,.view-as .va-search,.choice-chip,.seg,.wrow input,.map-table select{min-height:44px}
  .btn-sm{font-size:15px;padding:8px 14px}
  .wrow .lbl,.chat-tab .badge,.role,.vis,.flag{font-size:13px}
  .composer .tool,.composer .send{width:48px;height:48px}
}
@media (max-width:700px){
  h1{font-size:26px}
  .detail-head h1{font-size:23px}
  .scan{order:5;flex-basis:100%;max-width:none}
  .top-logo{margin-right:auto}
  /* phones: the View as bar folds into one button that opens the same choices */
  .view-as{padding:4px;border-width:2px}
  .view-as .va-title,.view-as select,.view-as .va-search{display:none}
  .view-as .va-open{display:block}
  .va-pair{grid-template-columns:minmax(0,1fr) auto}
  .va-pair label{grid-column:1/-1}
  .grid-2,.grid-3,.kv{grid-template-columns:minmax(0,1fr)}
  .queue-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .queue{padding:14px}.queue b{font-size:32px}.queue span{font-size:15px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .warranty-pair,.type-cards{grid-template-columns:minmax(0,1fr)}
  .review{grid-template-columns:minmax(0,1fr)}
  .review dt{margin-top:6px}
  .steps .step .txt{display:none}
  .wizard .card,.card{padding:18px}
  .wiz-actions .btn{flex:1}
  .next .timer{text-align:left}
  .bar-row{grid-template-columns:minmax(0,1fr) 40px}
  .bar-row .track{grid-column:1/-1;grid-row:2}
  .control-hero{padding:20px}
  .msg{max-width:96%}
  .modal{padding:20px}
  .case-row{flex-wrap:wrap;gap:8px}
  .case-row>div:last-child{text-align:left!important;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .case-row>div:last-child .small{margin-top:0!important}
}

/* ---- Phase 2/3: scan in, collections, report range, email rules, login extras ---- */
.forgot{display:block;text-align:center;margin-top:14px;font-weight:700;color:var(--rich-blue)}
.scan-in .label{display:block;font-weight:800;margin-bottom:6px}
.scan-row{display:flex;gap:10px}
.case-row.scan-ok{border-left:5px solid var(--telecoms-green)}
.case-row.scan-bad{border-left:5px solid var(--coral)}
.case-row.scan-info{border-left:5px solid var(--connectivity-blue)}
.pack-scan{margin-bottom:6px}
.pack-scan input{flex:1;min-width:0}
.ship-track{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;margin-top:12px}
@media (max-width:560px){.ship-track{grid-template-columns:minmax(0,1fr)}}
.coll-list{display:flex;flex-direction:column;gap:6px}
.coll-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--line);border-radius:var(--radius-sm);cursor:pointer}
.coll-row input{width:20px;height:20px;flex:none}
.coll-row .meta{display:block;font-size:14px;opacity:.8}
.report-range{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.range-fields{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.range-fields .field{margin:0}
.table.rules td,.table.rules th{text-align:center}
.table.rules td:first-child,.table.rules th:first-child{text-align:left}
.table.rules input{width:20px;height:20px}
.table.rules th{white-space:normal;line-height:1.25;vertical-align:bottom}
.text-bad{color:var(--coral)}
@media (max-width:900px){
  .scan-row .btn{min-height:52px}
  .report-range{flex-direction:column;align-items:stretch}
  .range-fields .field{flex:1}
  .coll-row{min-height:44px}
}

.my-rmas{border-top:4px solid var(--mobile-pink)}

/* ---- 2.5: filed-by tag, folded case details, webcam ---- */
.staff-tag{display:inline-flex;align-items:center;gap:4px;margin:6px 6px 0 0;padding:2px 9px;border-radius:999px;font-size:13px;font-weight:700;background:color-mix(in srgb,var(--ice) 55%,#fff);color:var(--rich-blue);vertical-align:middle}
.staff-tag .i{width:13px;height:13px}
.flags .staff-tag{margin:0}
details.fold>summary{list-style:none;cursor:pointer;margin-bottom:0}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.fold[open]>summary{margin-bottom:14px}
details.fold .fold-hint{transition:transform .15s;transform:rotate(90deg);display:inline-flex}
details.fold[open] .fold-hint{transform:rotate(-90deg)}
details.fold:not([open]){opacity:.92}
.cam-box{background:#000;border-radius:var(--radius-md);overflow:hidden;margin-bottom:10px}
.cam-box video{display:block;width:100%;max-height:60vh;object-fit:contain;transition:opacity .15s}
.cam-box video.flash{opacity:.2}
.next-step{text-align:left;margin:16px 0 4px;padding:16px 18px;border-radius:var(--radius-md);border:3px solid var(--services-yellow);background:color-mix(in srgb,var(--services-yellow) 18%,#fff)}
.next-step .ns-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;margin-bottom:6px}
.next-step p{margin:0 0 12px}
.ns-form{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ns-form input{flex:1;min-width:200px;min-height:48px;border:2px solid var(--rich-blue);border-radius:var(--radius-sm);padding:8px 12px;font:inherit;color:var(--rich-blue)}

/* chat: right side is your team, each person has their own colour, you are always rich blue */
.msg.col-me .bubble{background:var(--rich-blue);border-color:var(--rich-blue);color:var(--white)}
.msg.col-c0 .bubble{background:color-mix(in srgb,var(--ice) 70%,#fff);border-color:var(--ice);color:var(--rich-blue)}
.msg.col-c1 .bubble{background:color-mix(in srgb,var(--pink) 30%,#fff);border-color:var(--pink);color:var(--rich-blue)}
.msg.col-c2 .bubble{background:color-mix(in srgb,var(--services-yellow) 35%,#fff);border-color:var(--services-yellow);color:var(--rich-blue)}
.msg.col-c3 .bubble{background:color-mix(in srgb,var(--telecoms-green) 40%,#fff);border-color:var(--telecoms-green);color:var(--rich-blue)}
.msg.col-c4 .bubble{background:color-mix(in srgb,var(--plum) 18%,#fff);border-color:var(--plum);color:var(--rich-blue)}
.msg.col-c5 .bubble{background:color-mix(in srgb,var(--coral) 22%,#fff);border-color:var(--coral);color:var(--rich-blue)}
.notif-prompt{align-items:center}
.notif-prompt>div{flex:1}
.flag-legacy{background:color-mix(in srgb,var(--services-yellow) 30%,#fff);color:var(--rich-blue);box-shadow:inset 0 0 0 2px var(--services-yellow)}
.legacy-card{border-top:4px solid var(--services-yellow)}

/* ---- 2.7: stock devices, DOA, customer charges ---- */
.stock-switch{margin:0 0 16px;padding:12px 14px;border:2px dashed color-mix(in srgb,var(--rich-blue) 35%,#fff);border-radius:var(--radius-md)}
.notice.rule{margin-top:8px}
.flag-stock{background:color-mix(in srgb,var(--ice) 60%,#fff);color:var(--rich-blue)}
.flag-doa{background:color-mix(in srgb,var(--coral) 25%,#fff);color:var(--rich-blue);box-shadow:inset 0 0 0 2px var(--coral)}
.flag-pay{background:var(--services-yellow);color:var(--rich-blue);font-weight:800}
.charge-box{margin-top:6px;padding:14px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--services-yellow) 14%,#fff);border:2px solid color-mix(in srgb,var(--services-yellow) 70%,#fff)}
.charge-box .grid-2{margin-top:10px}
.pay-notice{display:flex;gap:14px;align-items:center;margin:14px 0;padding:16px 18px;border-radius:var(--radius-md);background:var(--services-yellow);color:var(--rich-blue);font-size:17px}
.pay-notice b{display:block;font-size:22px;font-weight:800}
.pay-notice .i{width:34px;height:34px;flex:none}
.pay-tick{margin:0 0 14px;padding:12px 14px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--services-yellow) 30%,#fff);border:2px solid var(--services-yellow)}
.no-exchange{margin:14px 0 4px;padding:14px;border-radius:var(--radius-md);border:2px solid var(--coral);background:color-mix(in srgb,var(--coral) 10%,#fff)}

/* ---- camera barcode scanner (phones and tablets only) ---- */
.cam-scan{display:none;flex:none;min-width:52px;justify-content:center;padding:0 12px}
@media (pointer:coarse){.cam-scan{display:inline-flex}}
.scan .cam-top{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-height:44px;min-width:44px;border:0;background:transparent;color:var(--rich-blue)}
@media (pointer:coarse){.scan input{padding-right:52px}}
.scan-box{position:relative}
.scan-guide{position:absolute;left:10%;right:10%;top:38%;bottom:38%;border:3px solid var(--mobile-pink);border-radius:var(--radius-md);box-shadow:0 0 0 999px rgba(0,0,0,.25);pointer-events:none}

/* ---- 2.9.1: less clutter on phones ---- */
.m-only{display:none}
.toolbar-extra{display:contents}
details.more-actions>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
details.more-actions>summary::-webkit-details-marker{display:none}
details.more-actions:not([open])>summary:after{content:"Show";margin-left:auto;font-size:13px;font-weight:700;color:var(--mobile-pink)}
@media (max-width:900px){
  .d-only{display:none!important}
  .m-only{display:block}
  .m-show{margin-bottom:12px}
  .m-show label{display:block;font-weight:800;font-size:14px;margin-bottom:4px}
  .m-show select{width:100%;min-height:48px}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .input,.toolbar .search{width:100%;min-width:0}
  .toolbar .list-more{display:inline-flex;justify-content:center}
  .toolbar-extra{display:none;flex-direction:column;gap:8px}
  .toolbar-extra.open{display:flex}
  /* scan boxes: the box on its own row, buttons side by side underneath */
  .scan-row,.imei-row{flex-wrap:wrap}
  .scan-row input,.imei-row input{flex:1 1 100%}
  .scan-row .btn,.imei-row .btn{flex:1 1 auto;width:auto}
  .scan-row .cam-scan,.imei-row .cam-scan{flex:0 0 64px}
  .range-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .range-fields .btn{grid-column:1/-1}
  .range-fields input{width:100%;min-width:0}
  .banner-preview{font-size:14px;gap:8px}
  .banner-preview .btn{min-height:44px;padding:6px 12px}
}
@media (max-width:700px){
  .page-head .sub,.setup-head .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---- 2.9.2: calmer desktop ---- */
.case-row{flex-wrap:wrap;row-gap:8px}
.case-row .grow{flex:1 1 260px}
.case-side{margin-left:auto;text-align:right}
.row-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.row-tags .staff-tag,.row-tags .flags{margin:0}
.flag-more{background:var(--rb-06);color:var(--rich-blue);cursor:help}
.flag-oow.soft{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coral) 60%,#fff);font-weight:700}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rma-table td.dev-cell{min-width:210px;max-width:320px;overflow-wrap:anywhere}
.rma-table td.cust-cell{max-width:280px;overflow-wrap:anywhere}
.rma-table th,.rma-table td{padding-left:12px;padding-right:12px}
.rma-table td{padding-top:12px;padding-bottom:12px}

/* ---- 2.9.2 round two: one column home, readable small text ---- */
.home-stack{display:grid;gap:18px}

@media (max-width:1150px){.table-wrap.rma-table{display:none}.cards-mobile{display:grid;gap:10px}}

/* ---- 3.0: notifications ---- */
.working-as{display:flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--line-2);border-radius:var(--radius-sm);background:var(--white);font-weight:800;font-size:14px}
.working-as select{border:0;font:inherit;color:var(--rich-blue);background:transparent;min-height:34px;max-width:200px;text-overflow:ellipsis}
.menu-link{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--rich-blue);text-decoration:none;font-weight:700}
.menu-link:hover{background:var(--rb-06)}
.note-day h2{margin:0 0 10px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.note-row{align-items:flex-start}
.note-row .dot-new{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px;background:transparent}
.note-row.unread .dot-new{background:var(--mobile-pink)}
.note-row:not(.unread){background:var(--white);border-color:var(--line)}
.note-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.note-body{font-size:15px;margin-top:2px}
.notif-table td,.notif-table th{text-align:center}
.notif-table td:first-child,.notif-table th:first-child{text-align:left}
.notif-table tr.sec td,.rules tr.sec td{background:var(--rb-06);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;text-align:left}
.notif-table tr.off{opacity:.55}
.notif-table input[type=checkbox]{width:20px;height:20px}
.device-push{display:flex;align-items:center;gap:14px}
.device-push>.i{width:26px;height:26px;color:var(--mobile-pink)}
@media (max-width:700px){.working-as .wa-label{display:none}.working-as select{max-width:140px}}
.avatar{position:relative}
.avatar .role-dot{position:absolute;right:-5px;bottom:-5px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;background:var(--rich-blue);color:var(--white);border:2px solid var(--white);font-size:11px;font-weight:800;line-height:15px;text-align:center}
.wa-menu{display:none;gap:6px;padding:8px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.wa-menu label{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--rich-blue)}
.wa-menu select{width:100%;min-height:44px;border:2px solid var(--field-border);border-radius:var(--radius-sm);padding:6px 10px;font:inherit;font-size:16px;color:var(--rich-blue);background:var(--white)}
@media (max-width:700px){.top-right .working-as{display:none}.wa-menu{display:grid}.menu-pop{min-width:260px;max-width:calc(100vw - 32px)}}
.note-row.unread{background:var(--white);border-color:var(--line);box-shadow:inset 4px 0 0 var(--mobile-pink)}
.note-row.unread b{font-weight:800}
.note-row:not(.unread) b{font-weight:600}

.msg-row{align-items:flex-start}
.msg-row.unread{background:var(--white);border-color:var(--line);box-shadow:inset 4px 0 0 var(--mobile-pink)}
.msg-kind{font-size:14px;color:var(--muted);font-weight:700}
.msg-count{flex:none;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--mobile-pink);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;align-self:center}

/* ---- 3.3: save-as-app banner ---- */
.banner-install{background:color-mix(in srgb,var(--ice) 55%,#fff);color:var(--rich-blue);border-bottom:2px solid var(--ice);font-weight:600;flex-wrap:nowrap}
.banner-install .ib-icon{width:40px;height:40px;border-radius:var(--radius-md);flex:none}
.banner-install .ib-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:15px}
.banner-install .ib-text b{font-size:16px;font-weight:800}
.banner-install .ib-text .i-sm{width:16px;height:16px;vertical-align:-3px}
.banner-install .btn{margin-left:0;flex:none}
.banner-install .ib-close{min-width:44px;justify-content:center}
@media (max-width:700px){.banner-install{align-items:flex-start;padding:10px 12px}.banner-install .ib-icon{width:34px;height:34px}}
.label-preview{background:#f3f2f8;border-radius:var(--radius-md);padding:12px;display:flex;justify-content:center;overflow:hidden}
.label-preview .dymo{box-shadow:0 2px 8px rgba(0,0,0,.15);zoom:.85}

/* ---- tick-box tables on phones: each row becomes a card with labelled boxes ---- */
@media (max-width:700px){
  table.rtable{min-width:0!important}
  .rtable thead{display:none}
  .rtable tbody,.rtable tr{display:block}
  .rtable tr{padding:12px 4px;border-bottom:1px solid var(--line)}
  .rtable tr.sec{padding:8px 4px;border-bottom:0}
  .rtable td{display:inline-flex;align-items:center;gap:8px;border:0!important;padding:6px 14px 6px 0!important;text-align:left!important}
  .rtable td:first-child{display:block;padding:0 0 6px!important}
  .rtable tr.sec td{display:block}
  .rtable td.empty{display:none}
  .rtable td[data-label]::before{content:attr(data-label);font-weight:700;font-size:14px;color:var(--rich-blue)}
  .rtable td[data-label] input[type=checkbox]{order:-1;width:24px;height:24px}
}
@media (max-width:700px){.rtable td b{white-space:normal}.rtable td{max-width:100%}.rtable td:first-child{width:100%}}

/* ---- 3.3.4: nothing may spill out of its box on phones ---- */
.btn{max-width:100%;white-space:normal;text-align:center}
.flag,.staff-tag,.chip{max-width:100%;white-space:normal}
.coll-row{flex-wrap:wrap;row-gap:6px}
.coll-row .grow{flex:1 1 200px;min-width:0}
.coll-tags{flex-basis:100%;padding-left:32px;margin-top:0}
.case-row .grow,.coll-row .grow,.note-body,.meta,.kv .v,.ev b{overflow-wrap:anywhere}
.card-head h2{overflow-wrap:anywhere}
@media (max-width:700px){
  .card-head{flex-wrap:wrap}
  .card-head>.chip,.card-head>.btn{margin-left:auto}
  .case-side{margin-left:0;text-align:left;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .btn-row>.btn{flex:1 1 auto}
  .modal{max-width:calc(100vw - 20px)}
}

/* ---- 3.4: accessibility and phone safety ---- */
/* iPhone notch and home bar (env() is 0 everywhere else, so nothing moves on other devices) */
.topbar{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.sidebar{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));padding-left:max(14px,env(safe-area-inset-left,0px))}
@media (max-width:900px){.topbar{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
/* touch screens: small controls get a 44px target */
@media (pointer:coarse){
  .forgot{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px}
  details.more summary,details.more-actions>summary,details.detail-list summary{min-height:44px}
  .kv .v a{display:inline-flex;align-items:center;min-height:44px}
  .working-as select{min-height:44px}
  .thumb .rm::after{content:"";position:absolute;inset:-6px}
  .pending .thumb .rm::after{inset:-10px}
  .row-btn{min-height:44px;min-width:44px}
}
/* "reduce motion" in the operating system: no slides or smooth scrolling (the loading spinner keeps turning) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ---- 3.4: Protect (same palette; the Protect logo replaces RCUK for Protect users and repair-only companies) ---- */
.nav-label-sub{margin-top:14px;border-top:1px solid color-mix(in srgb,var(--white) 18%,var(--rich-blue));padding-top:14px}
.protect-brand .brand{background:transparent;padding:10px 8px;border:0;box-shadow:none}
.protect-brand .top-logo{height:30px}
.queue.q-p-pink{border-top-color:var(--mobile-pink)}.queue.q-p-blue{border-top-color:var(--connectivity-blue)}
.queue.q-p-yellow{border-top-color:var(--services-yellow)}.queue.q-p-green{border-top-color:var(--telecoms-green)}
.role-protect{background:var(--mobile-pink);color:var(--white)}
.chip-pink{background:var(--mobile-pink);color:var(--white)}
.p-compare tr.best td{background:var(--green-30)}
.p-compare td{vertical-align:middle}
.p-decide{border:2px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-bottom:12px}
.p-decide:last-child{margin-bottom:0}
.p-decide-head{margin-bottom:10px;overflow-wrap:anywhere}
.p-decide-head .meta{display:block;font-size:14px;color:var(--muted)}
.inline-form{margin:0}
.inline-form .form-error{margin:0 0 6px}
.coll-row.off{opacity:.6;cursor:not-allowed}
.dmg-chips{display:flex;flex-wrap:wrap;gap:6px}
.p-thread-pick{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--white);flex-wrap:wrap}
.p-thread-pick label{font-weight:800;font-size:14px}
.p-thread-pick select{flex:1 1 180px;min-width:0;min-height:44px}
.p-round-grid .coll-list{max-height:420px;overflow:auto}
.p-quote .photo-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.p-quote .thumb{cursor:zoom-in}
.report-split{display:flex;align-items:center;gap:10px;margin:26px 0 14px;font-size:22px}
.report-split .i{color:var(--mobile-pink)}
.p-dymo .l-logo{height:.3in}
.hand .grow{min-width:0}
@media (max-width:700px){
  .p-compare .inline-form .btn{width:100%}
  .p-decide{padding:10px}
}
.dmg-group{margin:0 0 12px}
.dmg-group-name{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.p-lines{display:grid;gap:8px}
.p-line{display:grid;grid-template-columns:minmax(0,2fr) minmax(90px,1fr) minmax(0,2fr) auto;gap:8px;align-items:center}
.p-line .input{min-height:44px}
.p-lines-foot{justify-content:space-between;margin-top:8px}
.p-total{font-size:16px}.p-total b{font-size:20px}
.pii-ok{margin:10px 0;padding:12px 14px;border-radius:var(--radius-md);border:2px solid var(--services-yellow);background:var(--yellow-25)}
.pool-check .sec-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 14px}
@media (max-width:700px){.p-line{grid-template-columns:minmax(0,1fr) auto}.p-line [data-line=item]{grid-column:1/-1}.p-line [data-line=note]{grid-column:1/-1;order:3}}
@media (max-width:900px),(pointer:coarse){.p-decide-head>a,.rtable td>a[href^="#/protect/d/"]{display:inline-flex;align-items:center;min-height:44px;padding-right:8px}}

/* ---- 3.4: Help guide (#/help; words in help.js, pictures in help/) ---- */
.help-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-12px 0 -12px 10px;padding:0 8px;border-radius:var(--radius-sm);color:var(--rich-blue);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;text-decoration:underline;text-decoration-color:var(--rb-26);text-underline-offset:3px;vertical-align:middle}
.help-link:hover{background:var(--rb-06);text-decoration-color:currentColor}
.control-hero .help-link{color:var(--white);text-decoration-color:color-mix(in srgb,var(--white) 50%,var(--rich-blue))}
.control-hero .help-link:hover{background:color-mix(in srgb,var(--white) 12%,var(--rich-blue))}
.help-brand{display:flex;align-items:center;gap:10px}
.help-chev{height:16px;width:auto;flex:none}
.help-plogo{height:28px;width:auto;flex:none}
.help-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px}
.help-tools .field{flex:1 1 300px;margin:0;min-width:0}
.help-tools .input{width:100%}
.help-tools .hint{flex-basis:100%;margin:0}
.help-all{min-height:44px;align-items:center;margin:0}
.help-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
.help-toc{position:sticky;top:calc(var(--topbar-h) + 12px);max-height:calc(100vh - var(--topbar-h) - 24px);overflow:auto;padding:12px 14px}
.help-toc summary{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:800;cursor:pointer}
.help-toc h2{margin:12px 0 4px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.help-toc ul{list-style:none;margin:0;padding:0}
.help-toc a{display:flex;align-items:center;min-height:44px;padding:4px 8px;border-radius:var(--radius-sm);color:var(--rich-blue);text-decoration:none;font-weight:600;font-size:15px;line-height:1.3}
.help-toc a:hover,.help-toc a[aria-current]{background:var(--rb-06)}
.help-toc a[aria-current]{font-weight:800}
.help-sec{scroll-margin-top:calc(var(--topbar-h) + 12px)}
.help-sec h2{margin:0 0 2px;font-size:22px;line-height:1.25}
.help-sec h2[tabindex="-1"]:focus{outline:none}
.help-for{margin:0 0 12px;color:var(--muted);font-size:14px;font-weight:700}
.help-intro{margin:0 0 14px}
.help-split{margin-top:26px}
.help-steps{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:20px}
.help-steps>li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.help-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--rich-blue);color:var(--white);font-weight:800;font-size:15px}
.protect-brand .help-n{background:var(--mobile-pink)}
.help-step{min-width:0}
.help-step p{margin:4px 0 0}
.help-shot{display:block;max-width:100%;margin-top:10px;padding:0;border:2px solid var(--line);border-radius:var(--radius-md);background:var(--white);overflow:hidden;cursor:zoom-in}
.help-shot:hover{border-color:var(--rb-26)}
.help-shot img{display:block;max-width:100%;height:auto}
.help-terms{display:grid;grid-template-columns:minmax(150px,260px) minmax(0,1fr);gap:10px 18px;margin:0}
.help-terms dt{font-weight:800}
.help-terms dd{margin:0}
.help-tips{margin:16px 0 0}
.help-tips ul{margin:6px 0 0;padding-left:20px}
.help-tips li+li{margin-top:4px}
mark.help-hit{background:var(--yellow-25);color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:900px){.help-layout{grid-template-columns:minmax(0,1fr)}.help-toc{position:static;max-height:none}}
@media (max-width:560px){
  .help-steps>li{grid-template-columns:26px minmax(0,1fr);gap:10px}
  .help-n{width:26px;height:26px;font-size:14px}
  .help-shot{margin-left:-36px;max-width:calc(100% + 36px)}
  .help-terms{grid-template-columns:minmax(0,1fr);gap:2px}
  .help-terms dd{margin-bottom:10px}
  .help-sec h2{font-size:20px}
}
@media print{
  html.print-help,html.print-help body{width:auto!important;height:auto!important;overflow:visible!important;background:#fff!important}
  html.print-help body>#shell{display:block!important}
  html.print-help .sidebar,html.print-help .topbar,html.print-help .banner,html.print-help .help-tools,html.print-help .help-toc,html.print-help .help-head .btn-row,html.print-help #toastRoot,html.print-help #modalRoot{display:none!important}
  html.print-help .content{padding:0;max-width:none}
  html.print-help .help-layout{display:block}
  html.print-help .card{box-shadow:none;border-color:#ccc}
  html.print-help .help-steps>li,html.print-help .help-terms dt,html.print-help .help-tips{break-inside:avoid}
  html.print-help .help-sec h2{break-after:avoid}
  html.print-help .help-shot img{max-height:110mm;width:auto}
}

/* long damage / fault chip labels wrap inside narrow cards (320px) */
.choice-chip{max-width:100%;overflow-wrap:anywhere}

/* clicking outside a form window does not close it: a small nudge shows the window is still open */
.modal.nudge{animation:modal-nudge .25s ease}
@keyframes modal-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.modal.nudge{animation:none}}

/* 3.4.4 (b2): triage table, supplier collections, list views, delivery / claim sheets */
.triage-table .table{min-width:760px}
.triage-table td{vertical-align:top}
.tri-chips{flex-wrap:nowrap;gap:6px}
.tri-chips .choice-chip{min-height:40px;padding:6px 10px;font-size:14px;white-space:nowrap}
.triage-table tr.tri-set{background:var(--rb-03)}
.triage-table tr.tri-locked{opacity:.75}
.coll-row.done{opacity:.6;cursor:default}
.step-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.step-pills a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:2px solid var(--line-2);border-radius:999px;color:var(--rich-blue);font-size:14px;font-weight:700;text-decoration:none}
.step-pills a b{font-variant-numeric:tabular-nums}
.list-views{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.list-views .view-chip{display:inline-flex;align-items:center;border:2px solid var(--line-2);border-radius:999px;background:var(--white);overflow:hidden}
.list-views .view-chip button{border:0;background:none;color:var(--rich-blue);font:inherit;font-size:14px;font-weight:700;min-height:36px;padding:4px 12px;cursor:pointer}
.list-views .view-chip button+button{padding:4px 10px;border-left:2px solid var(--line)}
.list-views .view-chip.active{border-color:var(--rich-blue);background:var(--rb-06)}
.list-extra{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.list-extra .check{min-height:44px}
.sheet-code{margin-left:auto;text-align:center;font:9pt Consolas,monospace}
.sheet-code svg{display:block;width:46mm;height:12mm}
.sheet h2{font-size:11pt;margin:5mm 0 2mm}
.sheet .kvt th{width:48mm}
.sheet .claim-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm}
.sheet .claim-photos figure{margin:0;break-inside:avoid}
.sheet .claim-photos img{width:100%;height:45mm;object-fit:contain;border:.75pt solid #000}
.sheet .claim-photos figcaption{font-size:7.5pt;overflow-wrap:anywhere}
@media (max-width:420px){.tri-chips{flex-wrap:wrap}}

/* Staff chat: Send as Dispatch or Retail (admins and people with both roles) */
.send-as{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.send-as .label{font-size:13px;font-weight:700;margin-right:4px}

/* ---- 3.4.4 PH-03: Setup on phones. Users are cards (name, roles, store, permissions), and page subtitles wrap ---- */
@media (max-width:700px){
  .users-table td.row-go{display:none}
  .users-table tr{cursor:pointer}
  .users-table td[data-label]{flex-wrap:wrap}
  .setup-head .sub{display:block;-webkit-line-clamp:unset;overflow:visible}
}
/* ---- 3.4.4: Admin Home business overview (NEW-10) ---- */
.overview .ov-h{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mobile-pink);margin:16px 0 10px}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ov-tile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 14px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--white);color:var(--rich-blue);text-decoration:none}
.ov-tile:hover,.ov-tile:focus-visible{border-color:var(--rich-blue)}
.ov-tile b{font-size:26px;line-height:1.15;overflow-wrap:anywhere}
.ov-tile span{font-weight:800;font-size:15px}
.ov-tile small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.ov-tile.alert{border-color:var(--coral);background:var(--coral-15)}
.ov-tile.warn{border-color:var(--services-yellow);background:var(--yellow-25)}
.ov-lates{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.ov-late h3{font-size:15px;margin:0 0 6px}
.ov-late a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--rich-blue);font-weight:700;text-decoration:none}
.ov-late a span{color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap}
@media (max-width:700px){.ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-tile b{font-size:22px}.ov-late a{flex-wrap:wrap}.ov-late a span{white-space:normal}}
/* 3.4.5: Move back a step window, Track parcel, Dispatch Home Protect card */
.move-back .mb-route{font-size:17px;margin:4px 0 12px;overflow-wrap:anywhere}
.move-back .mb-list{margin:0 0 12px;padding-left:20px;display:grid;gap:4px;overflow-wrap:anywhere}
.move-back .notice{margin:12px 0}
.move-back textarea{min-height:80px}
.parcel-action .btn-row{margin-top:8px}
a.track-parcel{text-decoration:none}
.pdh-row a{color:var(--rich-blue);text-decoration:none}
.pdh-row .meta a{text-decoration:underline}
.pdh-row .grow{min-width:0;overflow-wrap:anywhere}
.pdh-ship{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:14px}
.pdh-ship>span{flex:1 1 200px;min-width:0}
.pdh-empty{display:flex;align-items:center;gap:6px;margin:12px 0 0}
@media (max-width:560px){.move-back .btn-lg{width:100%}.parcel-action .btn,.pdh-ship .btn{width:100%;justify-content:center}}

/* ==================================================================== 3.5 preview: phones and tablets as an app
   Everything below is inside one @media (max-width:1024px) block, so the PC layout (wider than 1024 px) is unchanged.
   Brand colours are the :root tokens; only the text that sits on them is chosen for contrast. */
.tabbar,.m-lead,.m-title,.m-grab,.m-ptr,.m-ghost{display:none}
@media (max-width:1024px){
  :root{--m-bar:52px;--m-top:calc(var(--m-bar) + env(safe-area-inset-top,0px));--m-tabh:calc(58px + env(safe-area-inset-bottom,0px));--m-bg:var(--rb-06);--m-gutter:max(16px,env(safe-area-inset-left,0px))}
  html{overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--m-top) + 8px);scroll-padding-bottom:calc(var(--m-tabh) + 8px)}
  body{background:var(--m-bg)}
  a,button,summary,label{touch-action:manipulation}
  .shell{grid-template-columns:minmax(0,1fr);overflow-x:clip}  /* a page sliding in never makes the page scroll sideways */
  .shell .sidebar,.shell.nav-open:after{display:none!important}
  .main{min-height:100vh}

  /* -- top bar: back / logo | title | notifications + account -- */
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;min-height:0;height:var(--m-top);padding:env(safe-area-inset-top,0px) max(6px,env(safe-area-inset-right,0px)) 0 max(6px,env(safe-area-inset-left,0px));
    background:var(--white);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid transparent;flex-wrap:nowrap;transition:border-color .2s}
  .m-scrolled .topbar,.m-pushed .topbar{border-bottom-color:var(--line-2)}
  .topbar>.menu-btn,.topbar>.top-logo,.topbar>.scan{display:none!important}
  .m-lead{grid-column:1;display:flex;align-items:center;min-width:0;width:100%;overflow:hidden}
  .m-logo{height:22px;width:auto;margin-left:10px;display:block}
  .m-protect .m-logo{height:26px}
  .m-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;min-width:44px;max-width:100%;padding:0 8px 0 2px;border:0;background:none;color:var(--rich-blue);font:600 17px/1.2 var(--font);border-radius:var(--radius-sm)}
  .m-back[hidden],.m-logo[hidden]{display:none}
  .m-back .i{width:26px;height:26px;color:var(--mobile-pink);stroke-width:2.6;flex:none}
  .m-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-title{display:block;grid-column:2;max-width:min(52vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:17px;color:var(--rich-blue);opacity:0;transition:opacity .2s}
  .m-pushed .m-title,.m-title-on .m-title{opacity:1}
  .top-right{grid-column:3;justify-self:end;flex-wrap:nowrap;gap:4px;margin:0}
  .top-right .working-as,.top-right .view-as{display:none!important}
  .topbar .icon-btn{width:44px;height:44px;border:0;background:transparent}
  .topbar .icon-btn .i{width:24px;height:24px}
  .topbar .icon-btn .dot{top:0;right:0;min-width:20px;height:20px;font-size:13px;padding:0 5px;background:var(--pink);color:var(--rich-blue)}
  .user-chip{padding:2px;border:0;background:transparent}
  .user-chip .who{display:none}
  .user-chip .avatar{width:34px;height:34px;font-size:13px}
  .avatar .role-dot{font-size:13px;min-width:20px;height:20px;line-height:16px}
  .menu-pop{position:fixed;top:calc(var(--m-top) + 6px);right:max(8px,env(safe-area-inset-right,0px));min-width:260px;max-width:calc(100vw - 16px);border-radius:14px}
  .wa-menu{display:grid}
  .banner{padding:10px var(--m-gutter)}

  /* -- page area -- */
  .content{padding:6px var(--m-gutter) calc(var(--m-tabh) + 28px) max(16px,env(safe-area-inset-right,0px));position:relative;z-index:1;background:var(--m-bg);min-height:calc(100vh - var(--m-top))}
  .content:focus{outline:0}
  .m-ghost{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--m-bg)}
  .m-ghost.pop{z-index:2;box-shadow:-10px 0 30px color-mix(in srgb,var(--rich-blue) 18%,transparent)}
  .d-only{display:none!important}
  .m-only{display:block}

  /* large titles on tab pages, a smaller heading on pages opened from them */
  .page-head{margin:2px 0 14px;gap:12px;align-items:flex-end}
  .page-head h1{font-size:32px;line-height:1.12;letter-spacing:-.02em}
  .m-pushed .page-head h1{font-size:26px}
  .page-head .sub{font-size:15px;margin-top:4px}
  .page-head .btn-row{width:100%}
  .page-head .btn-row>.btn{min-height:44px;padding:8px 12px;font-size:15px;border-radius:12px}
  .m-page-rmas .page-head .sub,.m-page-more .page-head .sub{display:none}
  .eyebrow{font-size:13px;margin-bottom:2px}
  .m-tab-new .page-head .btn-primary[href="#/new"],.m-tab-new .page-head .btn-primary[href="#/protect/new"]{display:none}
  h2{font-size:19px}

  /* cards are inset grouped sections */
  .card{border:0;border-radius:16px;box-shadow:none;padding:16px;margin-bottom:14px}
  .card-head{gap:10px;margin-bottom:12px}
  .card-head h2{font-size:18px}
  .card-head p{font-size:14px}
  .card-head .ico,.ico{width:36px;height:36px}
  .card-head .ico .i{width:19px;height:19px}
  .home-stack{gap:14px}
  .home-stack>.card{margin:0}

  /* lists: full-width rows, separators, status chips and a chevron */
  .case-list{gap:0}
  .card>.case-list,.card>.cards-mobile{margin:0 -16px}
  .case-row{position:relative;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:12px 40px 12px 16px;gap:6px 10px;min-height:60px;background:var(--white)}
  .case-list>.case-row:last-child,.cards-mobile>.case-row:last-child{border-bottom:0}
  .case-row:after,.m-chev{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;border-top:2.5px solid var(--rb-26);border-right:2.5px solid var(--rb-26);transform:translateY(-50%) rotate(45deg)}
  .case-row>svg.i:last-child{display:none}
  .case-row:active,.m-row:active,.m-act-row:active,.m-chat-entry:active{background:var(--rb-06)}
  .case-row .grow{flex:1 1 100%}
  .case-row .grow>div:first-child{font-size:16px;line-height:1.35}
  .case-row .meta{font-size:14px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .case-side{margin:0;text-align:left;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .case-side .small{margin:0!important;font-size:13px}
  .row-tags:empty{display:none}
  .row-tags{margin-top:4px}
  .chip{font-size:13px;padding:4px 10px;gap:5px}
  .chip .i{width:14px;height:14px}
  .flag,.staff-tag{font-size:13px}
  .cards-mobile{display:block;background:var(--white);border-radius:16px;overflow:hidden}
  #listBody>.cards-mobile,#pListBody>.cards-mobile{margin:0 calc(-1 * var(--m-gutter));border-radius:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .table-wrap.rma-table{display:none}
  .note-row.unread,.msg-row.unread{box-shadow:inset 4px 0 0 var(--mobile-pink)}
  .msg-row .msg-count{margin-right:-22px}

  /* empty states carry the RCUK chevrons (never recoloured) */
  .empty{padding:26px 12px}
  .empty:before{content:"";display:block;width:70px;height:28px;margin:0 auto 12px;background:url(/icons/rcuk-chevrons.svg) center/contain no-repeat}
  .empty .i{width:30px;height:30px}

  /* -- Home -- */
  #view>.scan{display:block;position:relative;max-width:none;margin:0 0 14px}
  #view>.scan input{min-height:48px;border-radius:12px;background:var(--white)}
  .queue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
  .queue{padding:12px 14px;border:0;border-top:5px solid var(--rich-blue);border-radius:14px;box-shadow:none;gap:4px;min-height:96px}
  .queue b{font-size:30px}
  .queue span{font-size:14px;line-height:1.3}
  .queue .ico{width:34px;height:34px}
  .queue .ico .i{width:18px;height:18px}
  .queue-scope{margin:-4px 0 14px}
  .alert-strip,.step-pills{flex-wrap:wrap;margin:0 0 14px;gap:8px}
  .alert-pill,.step-pills a{min-height:44px;padding:8px 14px;font-size:14px;background:var(--white);max-width:100%}
  .alert-pill b{font-size:17px}
  .card .step-pills{margin:0 0 12px}
  .notif-prompt{flex-wrap:wrap}
  .notif-prompt>div{flex:1 1 calc(100% - 40px)}
  .notif-prompt>.btn{flex:1 1 auto}
  .overview .ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* -- lists: sticky search, Filters button, the active filter -- */
  .m-search{position:sticky;top:var(--m-top);z-index:var(--z-sticky);display:flex;gap:8px;align-items:center;margin:0 calc(-1 * var(--m-gutter)) 8px;padding:8px var(--m-gutter);background:color-mix(in srgb,var(--m-bg) 92%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .m-search .search{flex:1;min-width:0;min-height:46px;border-radius:12px;padding-left:14px;background:var(--white)}
  .m-search+[hidden]+.m-active,.m-active{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:14px;color:var(--muted)}
  .m-active b{color:var(--rich-blue)}
  .m-clear{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--rich-blue)}
  .m-filter-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 14px;border:2px solid var(--field-border);border-radius:12px;background:var(--white);color:var(--rich-blue);font-weight:700;font-size:15px}
  .m-filter-btn .m-count{position:absolute;top:-8px;right:-8px}
  .toolbar{margin-bottom:6px}
  .toolbar .list-more{display:none!important}
  .m-filter-body .branch-scope,.m-filter-body .m-show{margin:0 0 14px}
  .m-filter-body .toolbar-extra{display:flex!important;flex-direction:column;gap:10px}
  .m-filter-body .toolbar-extra .input{width:100%}
  .m-filter-body .list-extra{display:flex;gap:18px;padding:6px 0}
  .m-filter-body .list-views{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
  .m-filter-body #pListRep{width:100%}
  .m-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--pink);color:var(--rich-blue);font-size:13px;font-weight:800;line-height:1}
  .m-count[hidden]{display:none}

  /* -- RMA and Protect pages -- */
  #updateBar+a.btn-ghost{display:none}
  .detail-head{margin-bottom:12px;gap:10px}
  .detail-head h1{font-size:24px;line-height:1.2}
  .detail-head>.btn-row{width:100%}
  .detail-head>.btn-row:empty{display:none}
  .detail-head>.btn-row .btn{flex:1 1 0;min-height:44px;font-size:15px;padding:8px 10px;border-width:2px;border-radius:12px}
  .m-protect .detail-head .eyebrow:before{content:"";display:inline-block;width:64px;height:16px;margin-right:8px;vertical-align:-3px;background:url(/icons/protect-logo.svg) left center/contain no-repeat}
  .next{padding:14px 16px;gap:12px;border-radius:16px;margin-bottom:12px}
  .next .ico{width:44px;height:44px}
  .next .ico .i{width:24px;height:24px}
  .next .grow{min-width:0;flex:1 1 200px}
  .next .t{font-size:17px}
  .next .o{font-size:14px}
  .next .timer{flex-basis:100%;text-align:left;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--white) 18%,var(--rich-blue))}
  .next .timer b{display:inline;font-size:17px}
  .tracker{margin:0 calc(-1 * var(--m-gutter)) 12px;padding:0 var(--m-gutter) 4px;scrollbar-width:none}
  .m-steps{display:none}
  .tracker::-webkit-scrollbar{display:none}
  .tk{min-width:96px;font-size:13px}
  .m-chat-entry,.m-act-row,.m-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 42px 10px 14px;border:0;background:var(--white);color:var(--rich-blue);text-align:left;font:inherit;text-decoration:none}
  .m-chat-entry{border-radius:16px;margin:0 0 14px}
  .m-chat-entry .grow,.m-act-row .grow,.m-row .grow{flex:1;min-width:0}
  .m-chat-entry b,.m-act-row b{display:block;font-size:16px;font-weight:800;line-height:1.3}
  .m-chat-entry small,.m-act-row small{display:block;font-size:14px;color:var(--muted);line-height:1.35;margin-top:2px}
  .m-list{list-style:none;margin:0;padding:0;background:var(--white);border-radius:14px;overflow:hidden}
  .m-list>li+li>*{border-top:1px solid var(--line)}
  .m-acts{margin:0 -16px 4px;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .m-acts>li>.m-act-row.hl{background:var(--pink-10);box-shadow:inset 4px 0 0 var(--mobile-pink)}
  .actions-card form.action.m-sheeted{display:none}
  .actions-card>.action:not(.m-sheeted){margin-top:12px}
  .actions-card .card-head{margin-bottom:10px}
  details.more-actions{margin:12px -16px -16px;padding:0;border-top:1px solid var(--line);gap:0}
  details.more-actions>summary{min-height:52px;padding:0 16px;font-weight:800}
  details.more-actions>.btn-row{display:grid;gap:0}
  details.more-actions>.btn-row>.btn{justify-content:flex-start;width:100%;min-height:52px;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--white);font-size:16px;font-weight:600;padding:10px 16px;text-align:left}
  details.more-actions>.btn-row>.btn .i{color:var(--mobile-pink)}
  details.more-actions>.btn-row>.btn-danger .i{color:var(--coral)}
  details.more-actions>.btn-row>.btn-primary{color:var(--rich-blue)}
  .detail-grid{gap:0}
  .detail-side{gap:14px}
  .chat{height:calc(100dvh - var(--m-top) - var(--m-tabh) - 16px);min-height:380px;border-radius:16px}
  .kv{gap:12px 16px}
  .kv label{font-size:13px}

  /* -- More -- */
  .m-profile{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:16px;padding:14px 16px;margin-bottom:18px}
  .m-profile .avatar{width:52px;height:52px;font-size:18px}
  .m-profile b{display:block;font-size:18px}
  .m-profile small{display:block;font-size:14px;color:var(--muted)}
  .m-group{margin-bottom:18px}
  .m-group-h{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 16px}
  .m-row{font-size:16px;font-weight:600;border-radius:0}
  .m-row .ico{width:32px;height:32px;border-radius:9px}
  .m-row .ico .i{width:18px;height:18px}
  .m-row[role=radio]{padding-right:14px}
  .m-tick{color:var(--mobile-pink);display:grid}
  .m-row .m-count{margin-right:4px}
  .m-foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px 0 6px;font-size:13px;color:var(--muted)}

  /* -- tab bar -- */
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-topbar);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
    background:var(--white);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-top:1px solid var(--line-2)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:58px;min-width:0;padding:6px 1px 5px;color:var(--rb-muted);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:-.015em}
  .tab-ic{position:relative;display:grid}
  .tab .i{width:26px;height:26px;stroke-width:1.8}
  .tab .i-more{stroke-width:3.4}
  .tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab[aria-current=page]{color:var(--rich-blue);font-weight:800}
  .tab[aria-current=page] .i{color:var(--mobile-pink);stroke-width:2.3}
  .tab-badge{position:absolute;top:-5px;left:17px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--pink);color:var(--rich-blue);font-size:13px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--white)}
  .tab-badge[hidden]{display:none}
  .tab:focus-visible{outline-offset:-4px}

  /* -- pull to refresh -- */
  .m-ptr{display:grid;place-items:center;position:fixed;left:50%;top:calc(var(--m-top) + 8px);width:38px;height:38px;margin-left:-19px;border-radius:50%;background:var(--white);box-shadow:var(--shadow);z-index:var(--z-sticky);opacity:0;transform:translateY(-60px);pointer-events:none}
  .m-ptr .spinner{width:20px;height:20px;animation-play-state:paused}
  .m-ptr.spin .spinner{animation-play-state:running}
  .m-ptr.ready{box-shadow:0 0 0 3px var(--pink-25),var(--shadow)}

  /* -- windows are bottom sheets: drag handle, swipe or tap outside to close, main button pinned at the bottom -- */
  .modal-bg{place-items:end center;padding:calc(env(safe-area-inset-top,0px) + 10px) 0 var(--m-kb,0px);overscroll-behavior:contain;animation:m-fade .25s ease-out}
  .modal{width:100%;max-width:none!important;max-height:100%;border-radius:18px 18px 0 0;padding:0 18px calc(18px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain;animation:m-sheet .34s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px color-mix(in srgb,var(--rich-blue) 25%,transparent)}
  .m-grab{display:block;position:sticky;top:0;z-index:3;height:22px;margin:0 -18px;background:var(--white)}
  .m-grab:before{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--rb-26)}
  .modal-head{position:sticky;top:22px;z-index:3;background:var(--white);margin:0 -18px 14px;padding:0 10px 10px 18px;border-bottom:1px solid var(--line)}
  .modal-head h2{font-size:19px}
  .modal-head .btn-ghost{min-width:44px;min-height:44px;border-radius:50%;background:var(--rb-06)}
  .m-sheet-foot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));z-index:3;display:grid;gap:10px;margin:16px -18px calc(-18px - env(safe-area-inset-bottom,0px));padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--line)}
  .m-sheet-foot>.btn{width:100%;min-height:52px;font-size:17px;border-radius:12px}
  .m-sheet-body form.action{border:0;padding:0;margin:0;box-shadow:none;background:none}
  .m-sheet-body form.action>h3{display:none}
  .m-sheet-body form.action>p{color:var(--rich-blue);font-size:15px}
  .modal .field input,.modal .field select,.modal .field textarea{font-size:16px}
  @keyframes m-sheet{from{transform:translateY(100%)}}
  @keyframes m-fade{from{background:transparent}}
  .toast{bottom:calc(var(--m-tabh) + 14px)}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
}
/* tablets: the same parts, wider: four tiles, the chat beside the RMA, centred sheets, icon and label side by side in the tabs */
@media (min-width:700px) and (max-width:1024px){
  :root{--m-gutter:max(24px,env(safe-area-inset-left,0px))}
  .content{padding-left:var(--m-gutter);padding-right:var(--m-gutter)}
  .queue-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .overview .ov-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid{grid-template-columns:minmax(0,1fr) minmax(300px,38%);gap:16px}
  .detail-side{position:sticky;top:calc(var(--m-top) + 12px)}
  .m-chat-entry{display:none}
  .chat{height:calc(100dvh - var(--m-top) - var(--m-tabh) - 40px)}
  .tab{flex-direction:row;gap:8px;font-size:14px}
  .tab-badge{left:14px;top:-11px}
  .modal{width:min(640px,100%);border-radius:18px 18px 0 0}
  .home-stack{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .home-stack>.card:only-child{grid-column:1/-1}
  .m-more-wrap,.m-profile,.m-group{max-width:640px}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .modal,.modal-bg{animation:none}
  .topbar,.m-title{transition:none}
}

/* ---- preview round 2: phones under 700 px ---- */
@media (max-width:699px){
  /* Home: a normal-size title, the greeting kept to one or two lines */
  .m-page-home .page-head h1{font-size:26px;line-height:1.15}
  .m-page-home .page-head .sub{display:none}
  .queue-scope{font-size:13px}
}
@media (max-width:1024px){
  /* cards on Home: icon and title on one line, the card's button full width at the bottom */
  .m-page-home .card-head{flex-wrap:nowrap;align-items:flex-start}
  .m-page-home .card-head .grow{flex:1 1 0;min-width:0}
  .m-page-home .card-head p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .m-card-foot{display:flex;width:100%;margin-top:12px;min-height:48px;border-radius:12px}
  /* Dispatch's Protect card: full-width rows with a chevron; the whole row opens its part of Protect sending */
  .pdh-row{padding-right:40px;align-items:flex-start}
  .pdh-row .grow{flex:1 1 0;min-width:0}
  .pdh-row .ico{width:34px;height:34px;margin-top:2px}
  .pdh-row .grow>a{color:var(--rich-blue);text-decoration:none}
  .pdh-row .grow>a:after{content:"";position:absolute;inset:0}
  .pdh-row .meta a,.pdh-row .btn,.pdh-ship{position:relative;z-index:1}
  .pdh-row .meta{-webkit-line-clamp:3}
  .pdh-ship{display:grid;gap:8px;margin-top:8px;font-size:14px}
  .pdh-ship .btn{width:100%}
}
@media (max-width:699px){
  /* progress: one line and a segmented bar; tap for every step */
  .m-steps{display:grid;gap:8px;width:100%;margin:0 0 12px;padding:12px 14px;border:0;border-radius:16px;background:var(--white);color:var(--rich-blue);text-align:left;font:inherit;font-size:15px}
  .m-steps-t{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
  .m-steps-more{margin-left:auto;font-size:14px;font-weight:700;color:var(--rich-blue);text-decoration:underline;text-underline-offset:3px}
  .m-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
  .m-seg i{height:6px;border-radius:3px;background:var(--rb-16)}
  .m-seg i.done{background:var(--telecoms-green)}
  .m-seg i.now{background:var(--mobile-pink)}
  .m-steps+.tracker{display:none}
  .m-steps[aria-expanded=true]+.tracker{display:grid;gap:2px;margin:-6px 0 12px;padding:6px 14px 10px;background:var(--white);border-radius:0 0 16px 16px;overflow:visible}
  .m-steps[aria-expanded=true]{border-radius:16px 16px 0 0;margin-bottom:0}
  .m-steps+.tracker .tk{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 0;text-align:left;font-size:14px}
  .m-steps+.tracker .tk:before{display:none}
  .m-steps+.tracker .tk .dot{position:static;transform:none;width:24px;height:24px;flex:none}
}

/* ==================================================================== 3.5: every screen as an app (phones and tablets)
   Still only at 1024 px and below (plus two touch-screen rules for wider tablets), so the PC layout is unchanged. */
.choice-chip{position:relative}  /* UI2-02: the hidden radio stays inside its chip (Triage no longer scrolls sideways) */
.triage-table td input[data-k=note]{min-width:180px}  /* UI2-02: the Triage note box is wide enough to read */
.m-splash,.m-help{display:none}
@media (pointer:coarse){  /* UI2-03: every touch screen, including iPads wider than 1024 px */
  .btn-sm,.seg,.step-pills a,.view-chip button,.choice-chip,label.check,.list-views .btn{min-height:44px}
  .view-chip button{min-width:44px}
}
@media (max-width:1024px){
  /* -- app feel: chrome is not selectable text, taps feel like taps -- */
  .topbar,.tabbar,.btn,.seg,.tab,.m-row,.m-act-row,.m-chat-entry,.m-steps,.modal-head,.m-filter-btn,.chip,.flag,.queue,.case-side,.eyebrow,.section-title,.card-head,.m-group-h,summary,.choice-chip,.tile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .btn,.seg,.tab,.m-row,.m-act-row,.m-chat-entry,.m-steps,.case-row,.queue,.tile,.choice-chip,.alert-pill,.step-pills a,.m-filter-btn,.icon-btn,.user-chip,.m-back,summary,.coll-row,.pick,.sup-choice,.type-card{transition:transform .12s ease-out,opacity .12s ease-out,background-color .12s}
  .btn:active,.seg:active,.tab:active,.m-row:active,.m-act-row:active,.m-chat-entry:active,.m-steps:active,.case-row:active,.queue:active,.tile:active,.choice-chip:active,.alert-pill:active,.step-pills a:active,.m-filter-btn:active,.icon-btn:active,.user-chip:active,.m-back:active,.coll-row:active,.pick:active,.sup-choice:active,.type-card:active{transform:scale(.97);opacity:.82}
  .btn:active{transform:scale(.97)}
  /* focus: a soft brand ring, not a browser outline (still always visible for keyboards) */
  :focus-visible{outline:0;box-shadow:0 0 0 2px var(--white),0 0 0 5px var(--mobile-pink);border-radius:10px}
  .input:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-radius:12px}
  /* links read as app text, not web links */
  #view a:not(.btn):not(.case-row):not(.queue):not(.tile):not(.seg):not(.m-row):not(.alert-pill):not(.ov-tile){text-decoration:none;font-weight:700;color:var(--rich-blue);border-bottom:2px solid var(--pink-25)}
  #view .case-row a,#view .rn a,#view .note-top a{border-bottom:0}
  /* every control a thumb can hit: 44 px (UI2-03 / UI2-04) */
  .btn,.btn-sm,.btn-ghost,.seg,.choice-chip,.step-pills a,.alert-pill,.view-chip button,label.check,.coll-row,.pick{min-height:44px}
  label.check{align-items:center}
  .view-chip button{min-width:44px}
  .btn-sm{font-size:15px;padding:8px 14px}
  /* the Help page link moves to the "?" button in the top bar */
  #view .help-link{display:none}
  .m-help{display:grid}
  .m-help[hidden]{display:none}
  .topbar{grid-template-columns:minmax(0,1fr) minmax(0,max-content) minmax(max-content,1fr)}
  /* skeletons instead of "Loading…" */
  .loading{display:grid;gap:12px;padding:8px 0;color:transparent;font-size:0;justify-content:stretch}
  .loading .spinner{display:none}
  .loading:before,.loading:after{content:"";display:block;border-radius:16px;background:linear-gradient(90deg,var(--white) 0,var(--rb-03) 40%,var(--white) 80%) 0 0/300% 100%;animation:m-shimmer 1.2s linear infinite}
  .loading:before{height:120px}
  .loading:after{height:260px}
  #setupBody>.loading:after{display:none}
  @keyframes m-shimmer{from{background-position:100% 0}to{background-position:0 0}}
  /* the install hint is a card above the tab bar, not a banner across the page */
  .banner-install{position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:var(--z-toast);border-radius:16px;border:0;box-shadow:var(--shadow-lg);padding:12px 12px 12px 14px}
  body:has(#shell:not(.hidden)) .banner-install{bottom:calc(var(--m-tabh) + 10px)}
  body:has(#modalRoot:not(:empty)) .banner-install{display:none}
  html.m-app:not(.m-page-home) body:has(#shell:not(.hidden)) .banner-install{display:none}  /* the install hint shows on Home only, never over a page's buttons */
  .user-chip{min-width:44px;min-height:44px;justify-content:center}
  .filters:has(>.seg:nth-child(2):last-child)>.seg,.filters:has(>.seg:nth-child(3):last-child)>.seg,.branch-scope>.seg{min-height:44px!important}
  .wrow input,.wrow select{min-height:44px}
  .tri-chips .choice-chip{min-height:44px}
  .banner-preview{position:sticky;top:var(--m-top);z-index:calc(var(--z-topbar) - 1);padding:8px var(--m-gutter);font-size:14px}
  .banner-preview .va-note{display:none}
  /* toasts sit above the tab bar, like an app's */
  .toast{border-radius:14px;left:16px;right:16px;transform:none;max-width:none;animation:m-toast .25s ease-out}
  @keyframes m-toast{from{transform:translateY(16px);opacity:0}}

  /* -- segmented controls (two or three choices) -- */
  .filters:has(>.seg:nth-child(2):last-child),.filters:has(>.seg:nth-child(3):last-child),.branch-scope{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;border-radius:12px;background:var(--rb-10);margin-bottom:14px}
  .filters:has(>.seg:nth-child(2):last-child)>.seg,.filters:has(>.seg:nth-child(3):last-child)>.seg,.branch-scope>.seg{justify-content:center;border:0;border-radius:9px;background:transparent;min-height:40px;padding:6px 8px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .filters:has(>.seg:nth-child(2):last-child)>.seg.active,.filters:has(>.seg:nth-child(3):last-child)>.seg.active,.branch-scope>.seg.active{background:var(--white);color:var(--rich-blue);box-shadow:0 1px 4px color-mix(in srgb,var(--rich-blue) 18%,transparent)}
  .filters:has(>.seg:nth-child(2):last-child)>.seg.active .n,.filters:has(>.seg:nth-child(3):last-child)>.seg.active .n{background:var(--pink)}
  /* longer chip rows (report periods, warranty filters) wrap */
  .filters{gap:8px}

  /* -- disclosure rows instead of "Show / Hide" text -- */
  details.more-actions:not([open])>summary:after,details.more>summary:after,details.fold>summary:after{content:"";margin-left:auto;width:9px;height:9px;border-right:2.5px solid var(--rb-26);border-bottom:2.5px solid var(--rb-26);transform:rotate(45deg);transition:transform .2s}
  details[open].more-actions>summary:after,details[open].more>summary:after{content:"";margin-left:auto;width:9px;height:9px;border-right:2.5px solid var(--rb-26);border-bottom:2.5px solid var(--rb-26);transform:rotate(-135deg)}
  details.fold>summary:after{display:none}
  details.more{border:0;border-radius:14px;background:var(--rb-03);padding:0 14px}
  details.more>summary{min-height:50px}
  details.more[open]{padding-bottom:14px}

  /* -- forms: grouped sections, rounded fields, labels above -- */
  .input,.field input:where(:not([type=checkbox],[type=radio],[type=file])),.field select,.field textarea,select.input,.scan-row input,.imei-row input,.ns-form input{border-radius:12px}
  .field>label,.label{font-size:15px}
  .section-title{font-size:13px;letter-spacing:.06em;margin:22px 0 8px}
  .card form>button.btn:last-child,.card form>.btn-row:last-child>.btn,.card>.btn-row:last-child>.btn{flex:1 1 auto}
  select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--rich-blue) 50%),linear-gradient(135deg,var(--rich-blue) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px!important}
  .working-as select{font-size:16px}  /* UI2-11 */
  input[type=file]::file-selector-button{border:2px solid var(--rich-blue);border-radius:10px;background:var(--white);color:var(--rich-blue);font:inherit;font-weight:700;padding:6px 12px;margin-right:10px}

  /* -- tables become cards on phones (see mTables) -- */
  table.m-cards{min-width:0!important;border-collapse:separate}
  table.m-cards thead{display:none}
  table.m-cards tbody,table.m-cards tr,table.m-cards td{display:block}
  table.m-cards tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  table.m-cards tr:last-child{border-bottom:0}
  table.m-cards td{border:0!important;padding:3px 0!important;white-space:normal!important;min-width:0!important;max-width:none!important;text-align:left!important}
  table.m-cards td[data-label]:not(:first-child):before{content:attr(data-label);display:block;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}
  table.m-cards td:first-child{font-size:16px}
  table.m-cards td:empty{display:none}
  .table-wrap:has(table.m-cards){overflow:visible;border:0;box-shadow:none;background:transparent}
  .card .table-wrap:has(table.m-cards){margin:0 -16px}
  .triage-table table.m-cards td .input{width:100%}
  .tri-chips{flex-wrap:wrap}

  /* -- Setup: a list of sections; each section opens on its own page -- */
  #view>a.btn-ghost[href="#/setup"],.setup-nav{display:none}
  .setup-layout{display:block}
  .control-hero{padding:20px;border-radius:16px;margin-bottom:16px}
  .control-hero h1{font-size:28px}
  .control-hero:before{content:"";position:absolute;left:20px;bottom:14px;width:56px;height:22px;background:url(/icons/rcuk-chevrons.svg) left center/contain no-repeat;opacity:.95;z-index:1}
  .control-hero>div{padding-bottom:26px}
  .control-grid{display:block;background:var(--white);border-radius:16px;overflow:hidden}
  .tile{min-height:0;border:0;border-radius:0;box-shadow:none;padding:14px 40px 14px 14px;gap:12px;position:relative;align-items:center}
  .tile+.tile{border-top:1px solid var(--line)}
  .tile:after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;border-top:2.5px solid var(--rb-26);border-right:2.5px solid var(--rb-26);transform:translateY(-50%) rotate(45deg)}
  .tile .ico{width:36px;height:36px;border-radius:10px}
  .tile p{display:none}
  .tile b{font-size:16px}
  .tile em{font-size:13px;font-style:normal;color:var(--muted)}
  .setup-head .ico{width:40px;height:40px}
  .setup-head h1{font-size:26px!important}

  /* -- Reports -- */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi,.kpis>*{border:0;border-radius:14px;box-shadow:none}
  .report-grid{gap:14px}

  /* -- Scan in, Send, Receive, Collections: big scan box, pinned main button -- */
  .scan-row input,.imei-row input{min-height:56px}
  .coll-row{border:0;border-radius:0;border-bottom:1px solid var(--line);padding:12px 4px;min-height:56px}
  .coll-row:last-child{border-bottom:0}
  .coll-row input[type=checkbox],.check input,.sec-item input{width:24px;height:24px}
  .card-head>label.check{min-height:44px;padding:0 4px}

  /* -- Notifications -- */
  .note-day h2{font-size:13px;margin:0 0 6px}
  .note-day{padding-bottom:4px}
  .rtable td.m-cell-wrap>label.m-cell{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;cursor:pointer}

  /* -- Help -- */
  .help-layout{display:block}
  .help-toc{position:static;max-height:none;border-radius:16px}

  /* -- New RMA and Protect Book in: full-screen steps, the tab bar steps aside, Next / Back pinned at the bottom -- */
  .m-flow .tabbar{display:none}
  .m-flow .content{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px)}
  .m-flow .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
  .m-flow .steps{display:none}
  .m-flow .page-head .sub{display:none}
  .m-flow .page-head{margin-bottom:10px}
  .m-wizbar{display:grid;gap:8px;margin:0 0 12px;padding:12px 14px;border-radius:16px;background:var(--white)}
  .m-wizbar .m-steps-t{font-size:15px}
  .wizard .card{padding:16px}
  .wiz-actions{position:sticky;bottom:0;z-index:4;display:flex;flex-wrap:nowrap;gap:10px;margin:18px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--line);border-radius:0 0 16px 16px}
  .wiz-actions .btn{flex:0 0 auto;min-height:52px;border-radius:12px}  /* UI2-05: Back keeps its size */
  .wiz-actions .btn-primary{flex:1 1 auto;min-width:0;font-size:17px;padding:10px 14px}
  .wiz-actions:has(>:only-child)>.btn{flex:1}

  /* -- sign-in, code and set-password: the brand screen, card at the bottom like an app (UI2-08) -- */
  .login{min-height:100vh;min-height:100dvh;padding:calc(env(safe-area-inset-top,0px) + 16px) max(14px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 14px) max(14px,env(safe-area-inset-left,0px));align-content:end;place-items:end center}
  .login-card{width:min(480px,100%);border-radius:24px;padding:22px 20px 18px}
  .login-card img{width:150px;margin:6px auto 14px}
  .login-card h1{font-size:22px;text-align:center}
  .login-card p{text-align:center;margin-bottom:16px}
  .login-card:before{content:"";display:block;width:64px;height:26px;margin:0 auto 4px;background:url(/icons/rcuk-chevrons.svg) center/contain no-repeat}
  .login-card .btn-lg{min-height:52px;border-radius:12px}
  .forgot{min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--rich-blue)}
  /* on the sign-in screen the install hint sits above the card, never over the Sign in button */
  body:has(#login:not(.hidden)){display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
  body:has(#login:not(.hidden)) .banner-install{position:static;margin:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;box-shadow:none;font-size:14px}
  body:has(#login:not(.hidden)) .banner-install~.login{flex:1;min-height:0}

  /* -- the launch screen: RCUK logo and chevrons on Rich Blue while the app starts -- */
  .m-splash{display:grid;place-items:center;align-content:center;gap:22px;position:fixed;inset:0;z-index:300;background:var(--rich-blue);pointer-events:none;transition:opacity .35s ease-out}
  .m-splash img{width:170px;height:auto}
  .m-splash img+img{width:76px}
  .m-splash.gone{opacity:0}

  /* -- pull to refresh shows the chevrons -- */
  .m-ptr{width:48px;height:48px;margin-left:-24px}
  .m-ptr .spinner{display:none}
  .m-ptr:before{content:"";width:34px;height:14px;background:url(/icons/rcuk-chevrons.svg) center/contain no-repeat}
  .m-ptr.spin:before{animation:m-pulse .8s ease-in-out infinite}
  @keyframes m-pulse{50%{opacity:.35;transform:translateX(3px)}}

  /* -- More: the chevrons in the header -- */
  .m-profile{position:relative;overflow:hidden}
  .m-profile:after{content:"";position:absolute;right:14px;top:50%;width:52px;height:20px;transform:translateY(-50%);background:url(/icons/rcuk-chevrons.svg) right center/contain no-repeat;opacity:.9}
  .m-profile .grow{padding-right:60px}
}
@media (max-width:1024px) and (max-height:700px){
  .login-card:before{display:none}
  .login-card img{width:120px;margin:2px auto 8px}
  .login-card p{display:none}
  .login-card .field{margin-bottom:10px}
  .banner-install .ib-icon{display:none}
}
@media (max-width:699px){
  /* a card's own button sits full width at its foot on phones */
  .card-head{flex-wrap:nowrap;align-items:flex-start}
  .card-head .grow{flex:1 1 0;min-width:0}
  .card-head>.chip{flex:none}
  .kv{grid-template-columns:minmax(0,1fr)}
  .range-fields{grid-template-columns:1fr 1fr}
  .page-head>.btn-row,.page-head>.btn{width:100%}
  .page-head>.btn-row>.btn,.page-head>.btn{flex:1 1 auto}
  .ship-track{grid-template-columns:minmax(0,1fr)}
  /* a form's main button runs the full width, like an app's */
  .card form .btn-row>.btn-primary,.card form .btn-row>.btn-danger-solid{flex:1 1 auto}
  .card form>.btn-primary,.card form>.btn-danger-solid{width:100%}
  .filters:has(>.seg:nth-child(3):last-child)>.seg{font-size:14px;padding:6px 4px}
  .filters:has(>.seg:nth-child(3):last-child)>.seg .i{display:none}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .btn:active,.seg:active,.tab:active,.m-row:active,.m-act-row:active,.m-chat-entry:active,.m-steps:active,.case-row:active,.queue:active,.tile:active,.choice-chip:active,.alert-pill:active,.step-pills a:active,.m-filter-btn:active,.icon-btn:active,.user-chip:active,.m-back:active,.coll-row:active,.pick:active,.sup-choice:active,.type-card:active{transform:none}
  .loading:before,.loading:after,.m-ptr.spin:before,.toast{animation:none}
  .m-splash{transition:none}
}

/* 3.5.1 notifications pop-up */
.notif-ask{display:flex;gap:14px;align-items:flex-start;padding:4px 0 8px}
.notif-ask svg{flex:none;width:28px;height:28px;color:var(--mobile-pink)}