/* Deskly R87 + R88 wide-canvas fix / Design 03: public self-service portal. UI ONLY.
   Isolated to .support-public-body: technician console, routes and app logic unchanged. */
:root{color-scheme:light}
.support-public-body{
  --r87-blue:#275df3;--r87-navy:#101e40;--r87-muted:#596984;
  --r87-line:#dce5f6;--r87-shadow:0 12px 32px rgba(35,77,149,.08),0 2px 5px rgba(35,77,149,.04);
  background:linear-gradient(165deg,#eef4ff 0%,#f8fbff 38%,#f5f8ff 78%,#f8faff 100%);
  color:var(--r87-navy);min-height:100vh;font-size:15px;
}
.support-public-body,.support-public-body *{box-sizing:border-box}
.support-public-body :focus-visible{outline:3px solid #83aaff;outline-offset:3px}
.support-public-body .hidden{display:none!important}
.support-public-body .support-public-header{
  position:sticky;top:0;z-index:50;min-height:68px;height:auto;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:12px max(26px,calc((100vw - 1520px)/2 + 24px));
  background:rgba(255,255,255,.96);border-bottom:1px solid #e5eaf6;
  box-shadow:0 1px 8px rgba(31,55,102,.035);
}
.support-public-body .r87-header-brand{display:flex;align-items:center;gap:21px;min-width:0}
.support-public-body .r87-header-brand .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#17254b;font-size:19px;white-space:nowrap}
.support-public-body .r87-header-brand .brand-mark{width:36px;height:36px;border-radius:11px;font-size:19px;box-shadow:0 5px 12px rgba(38,89,239,.18)}
.support-public-body .r87-header-divider{width:1px;height:26px;background:#d5deee}
.support-public-body .r87-header-label{font-size:13px;color:#667895;white-space:nowrap;font-weight:600}
.support-public-body .support-header-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
.support-public-body .support-header-actions .btn{height:39px;min-height:39px;padding:0 16px;border-radius:10px;font-size:12px;font-weight:750;white-space:nowrap;box-shadow:none}
.support-public-body .btn.primary{background:linear-gradient(180deg,#3773ff,#1e51e5);border:1px solid #2458ec;color:#fff;box-shadow:0 4px 10px rgba(41,89,227,.13)}
.support-public-body .btn.primary:hover{background:linear-gradient(180deg,#2865f7,#1949d0)}
.support-public-body .btn.secondary{border:1px solid #ccd8ed;color:#29416e;background:#fff}
.support-public-body .btn.secondary:hover{border-color:#95b0ef;background:#f4f8ff}
.support-public-body .support-public-main{width:100%;max-width:1520px;margin:0 auto;padding:0 22px 55px}
.support-public-body .support-hero{
  isolation:isolate;position:relative;min-height:176px;display:flex;align-items:center;
  max-width:none;margin:0 -22px 20px;padding:26px 64px 21px;text-align:left;overflow:hidden;
  background:linear-gradient(110deg,#f6f9ff 6%,#e4efff 58%,#dce9ff 100%);
}
.support-public-body .support-hero::before{content:"";position:absolute;z-index:-1;left:-8%;bottom:-150px;width:85%;height:240px;border-radius:50%;transform:rotate(-8deg);background:rgba(255,255,255,.52)}
.support-public-body .support-hero::after{content:"";position:absolute;z-index:-1;right:-10%;top:-200px;width:62%;height:320px;border-radius:50%;transform:rotate(-18deg);background:rgba(117,162,245,.17)}
.support-public-body .r87-hero-copy{position:relative;z-index:2;max-width:680px;width:66%}
.support-public-body .support-eyebrow{font-size:10px;letter-spacing:.17em;line-height:1.4;color:#1d59e5;font-weight:850;margin-bottom:14px}
.support-public-body .support-hero h1{font-size:clamp(31px,3.1vw,42px);font-weight:850;line-height:1.13;letter-spacing:-.045em;color:#101c3a;margin:0 0 11px}
.support-public-body .support-hero p{max-width:560px;font-size:14px;font-weight:500;line-height:1.65;color:#485e7e;margin:0}
.support-public-body .r87-hero-art{display:block;position:absolute;z-index:1;width:min(37%,380px);height:176px;object-fit:contain;right:35px;bottom:-3px;filter:drop-shadow(0 6px 9px rgba(54,90,154,.09));pointer-events:none}
.support-public-body .support-public-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(330px,1fr);gap:19px;align-items:stretch}
.support-public-body .support-form-card,.support-public-body .support-side-stack,.support-public-body .customer-tickets-card,.support-public-body .support-tracking-card{
  border:1px solid #dce5f7;border-radius:18px;background:#fff;box-shadow:var(--r87-shadow);
}
.support-public-body .support-form-card{padding:24px 26px 22px;min-width:0}
.support-public-body .support-card-title{display:flex;gap:15px;align-items:center;margin-bottom:21px}
.support-public-body .support-card-title div{gap:4px}
.support-public-body .support-step{width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:linear-gradient(145deg,#2564ff,#2e60ee);color:#fff;box-shadow:0 5px 13px rgba(29,87,230,.18);font-size:17px;font-weight:850}
.support-public-body .support-card-title h2{font-size:21px;letter-spacing:-.03em;color:#142340;font-weight:800;line-height:1.25}
.support-public-body .support-card-title p{font-size:12px;color:#63738e;line-height:1.45}
.support-public-body #supportRequestForm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 14px}
.support-public-body #supportRequestForm>.two-field{grid-column:1/-1}
.support-public-body #supportRequestForm>label:nth-of-type(n+3),.support-public-body #supportRequestForm>.diagnostic-consent,.support-public-body #supportRequestForm>button,.support-public-body #supportRequestForm>.form-error{grid-column:1/-1}
.support-public-body #supportRequestForm .two-field{gap:14px}
.support-public-body #supportRequestForm label{min-width:0;display:grid;align-content:start;gap:7px;font-size:12px;font-weight:750;color:#233556}
.support-public-body #supportRequestForm label>span{font-size:12px;font-weight:750;color:#233556}
.support-public-body #supportRequestForm input:not([type=file]),.support-public-body #supportRequestForm select,.support-public-body #supportRequestForm textarea,
.support-public-body .tracking-form input,.support-public-body .customer-ticket-email-form input,.support-public-body .customer-ticket-verify input,.support-public-body .customer-ticket-toolbar input,.support-public-body .customer-ticket-toolbar select{
  width:100%;min-width:0;border:1px solid #ccd8eb;border-radius:9px;background:#fff;color:#243b63;
  min-height:42px;height:auto;font-size:13px;font-weight:500;padding:10px 12px;box-shadow:0 1px 2px rgba(20,43,95,.025);line-height:1.35;
}
.support-public-body #supportRequestForm input:not([type=file]):focus,.support-public-body #supportRequestForm select:focus,.support-public-body #supportRequestForm textarea:focus,
.support-public-body .tracking-form input:focus,.support-public-body .customer-ticket-email-form input:focus,.support-public-body .customer-ticket-verify input:focus{border-color:#6998ff;outline:3px solid #dce9ff;outline-offset:0}
.support-public-body #supportRequestForm .two-field small{font-size:11px;font-weight:500;line-height:1.4;color:#5f7290}
.support-public-body #supportRequestForm input::placeholder,.support-public-body .tracking-form input::placeholder{color:#8395b2}
.support-public-body #supportRequestForm textarea{min-height:98px;resize:vertical;line-height:1.5}
.support-public-body #supportRequestForm input[type=file]{width:100%;height:auto;min-height:42px;max-width:100%;padding:8px;border:1px solid #d1dcf0;border-radius:9px;font-size:12px;font-weight:500;color:#4f6481;background:#fbfdff}
.support-public-body #supportRequestForm input[type=file]::file-selector-button{border:0;background:#eaf1ff;color:#1853d1;font-weight:800;border-radius:7px;padding:6px 10px;margin-right:11px;cursor:pointer}
.support-public-body #supportRequestForm label small{font-size:10px;line-height:1.4;color:#6f809b}
.support-public-body .diagnostic-consent{align-items:center;gap:10px;margin:0;border:1px solid #dae8ff;border-radius:9px;padding:10px 12px;background:#f1f6ff}
.support-public-body .diagnostic-consent>span{width:22px;height:22px;flex:0 0 22px;font-size:12px;background:#e1ecff;color:#1f5fe5}
.support-public-body .diagnostic-consent p{font-size:11px;font-weight:500;line-height:1.5;color:#557095}
.support-public-body #supportRequestForm>button{margin-top:0;height:47px;min-height:47px;border-radius:9px;font-size:14px;font-weight:800}
.support-public-body .support-side-stack{display:block;align-self:stretch;overflow:hidden}
.support-public-body .diagnostic-card,.support-public-body .self-service-card{border:none!important;box-shadow:none!important;border-radius:0!important;padding:22px!important;background:transparent!important}
.support-public-body .diagnostic-card{border-bottom:1px solid #e5ebf5!important}
.support-public-body .support-side-stack .support-card-title{margin-bottom:10px;gap:11px}
.support-public-body .support-side-stack .support-step{width:35px;height:35px;flex-basis:35px;font-size:13px;border-radius:11px;background:#e7efff;color:#2c5de8;box-shadow:none}
.support-public-body .support-side-stack h2{font-size:17px}
.support-public-body .support-side-stack .support-card-title p{font-size:11px}
.support-public-body .diagnostic-list{margin:7px 0 13px}
.support-public-body .diagnostic-row{min-height:42px;gap:11px;border-bottom:1px solid #eef1f7;padding:5px 2px}
.support-public-body .diagnostic-row div{gap:2px}
.support-public-body .diagnostic-row strong{font-size:12px;font-weight:750;color:#2d4263}
.support-public-body .diagnostic-row small{font-size:10px;color:#6d819e;line-height:1.3}
.support-public-body .diag-dot{width:10px;height:10px;flex:0 0 10px;background:#c8d2e3;box-shadow:0 0 0 3px #f0f3f8}
.support-public-body .diag-dot.good{background:#25bc64;box-shadow:0 0 0 3px #dcf9e7}
.support-public-body .diagnostic-card .btn{min-height:41px;border-radius:9px;font-size:12px;font-weight:800}
.support-public-body .self-service-card{padding-top:19px!important}
.support-public-body .self-check-list{gap:7px}
.support-public-body .self-check-list button,.support-public-body .self-check-list a{position:relative;display:grid;grid-template-columns:36px 1fr;gap:10px;min-height:56px;padding:9px 27px 9px 10px;border:1px solid #e0e8f5;border-radius:10px;background:#f9fbff;color:#243956;cursor:pointer;text-decoration:none}
.support-public-body .self-check-list button::after,.support-public-body .self-check-list a::after{content:'›';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:22px;color:#6f81a0}
.support-public-body .self-check-list button:hover,.support-public-body .self-check-list a:hover{border-color:#a9c2fa;background:#edf4ff}
.support-public-body .self-check-list>*>span{height:34px;width:34px;font-size:17px;border-radius:9px;color:#2a65ed;background:#e6efff}
.support-public-body .self-check-list strong{font-size:12px;color:#21365a;font-weight:750}
.support-public-body .self-check-list small{font-size:10px;color:#72829a;line-height:1.35}
.support-public-body .customer-tickets-card,.support-public-body .support-tracking-card{margin-top:18px;padding:23px 27px;background:#fff}
.support-public-body .tracking-heading{margin-bottom:17px;align-items:center;gap:12px}
.support-public-body .tracking-heading h2{font-size:21px;color:#142540;letter-spacing:-.035em;margin:0 0 5px;font-weight:800}
.support-public-body .tracking-heading p{font-size:12px;color:#61738c;line-height:1.5}
.support-public-body .customer-tickets-card .support-eyebrow,.support-public-body .support-tracking-card .support-eyebrow{font-size:9px;margin-bottom:5px}
.support-public-body .tracking-private{background:#eaf1ff;color:#2259d8;font-weight:750;padding:7px 11px;font-size:10px;border-radius:9px}
.support-public-body .customer-ticket-email-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px;align-items:end}
.support-public-body .customer-ticket-email-form label,.support-public-body .tracking-form label,.support-public-body .customer-ticket-verify label,.support-public-body .customer-ticket-toolbar label{font-size:12px;font-weight:750;gap:7px;min-width:0;color:#293a5b}
.support-public-body .customer-ticket-email-form .btn,.support-public-body .tracking-form .btn{height:43px;border-radius:9px;font-size:12px;font-weight:800;padding:0 18px;white-space:nowrap}
.support-public-body .tracking-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:13px;align-items:end}
.support-public-body .tracking-help{font-size:11px;color:#7789a3;line-height:1.55;margin-top:10px}
.support-public-body .tracking-error{font-size:12px;line-height:1.5}
.support-public-body .support-success{border-radius:12px;padding:18px;align-items:flex-start}
.support-public-body .support-success strong{font-size:15px}
.support-public-body .support-success p{font-size:12px}
.support-public-body .support-success .btn{font-size:12px}
.support-public-body .tracking-result{margin-top:20px}
.support-public-body .tracking-current strong{font-size:20px}
.support-public-body .tracking-meta strong{font-size:12px}
.support-public-body .customer-ticket-board{margin-top:12px}
.support-public-body .customer-ticket-item,.support-public-body .customer-ticket-list{max-width:100%}
.support-public-body .customer-ticket-toolbar{gap:12px}
.support-public-body .support-public-footer{font-size:11px;line-height:1.4;color:#8392ad;padding:5px 24px 25px}
.support-public-body #myTickets,.support-public-body #trackRequest{scroll-margin-top:93px}
@media(max-width:1060px){
  .support-public-body .support-public-main{padding-left:20px;padding-right:20px}
  .support-public-body .support-hero{padding-left:30px;padding-right:24px;margin-left:-20px;margin-right:-20px}
  .support-public-body .support-public-grid{grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr)}
  .support-public-body .r87-hero-copy{width:64%}
  .support-public-body .r87-hero-art{width:30%;right:8px}
  .support-public-body .support-form-card{padding:22px}
  .support-public-body .diagnostic-card,.support-public-body .self-service-card{padding:18px!important}
}
@media(max-width:800px){
  .support-public-body .r87-header-label,.support-public-body .r87-header-divider{display:none}
  .support-public-body .support-hero{min-height:168px;padding:24px 28px}
  .support-public-body .r87-hero-copy{width:62%}
  .support-public-body .r87-hero-art{width:33%;right:6px;height:140px}
  .support-public-body .support-public-grid{grid-template-columns:minmax(0,1fr)}
  .support-public-body .support-side-stack{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .support-public-body .diagnostic-card{border-bottom:0!important;border-right:1px solid #e5ebf5!important}
  .support-public-body .tracking-form{grid-template-columns:1fr 1fr}
  .support-public-body .tracking-form>.btn{grid-column:1/-1}
}
@media(max-width:610px){
  .support-public-body .support-public-header{padding:10px 15px;gap:9px;flex-wrap:wrap}
  .support-public-body .r87-header-brand{width:100%}
  .support-public-body .support-header-actions{width:100%;justify-content:space-between;gap:7px}
  .support-public-body .support-header-actions .btn{flex:1;padding:0 8px;height:37px;min-height:37px;font-size:11px;text-align:center}
  .support-public-body .support-public-main{padding:0 14px 32px}
  .support-public-body .support-hero{min-height:180px;margin:0 -14px 15px;padding:25px 20px;text-align:left}
  .support-public-body .r87-hero-copy{width:100%;max-width:100%}
  .support-public-body .r87-hero-art{display:none}
  .support-public-body .support-hero h1{font-size:31px;max-width:350px}
  .support-public-body .support-hero p{max-width:360px;font-size:12px}
  .support-public-body .support-form-card,.support-public-body .customer-tickets-card,.support-public-body .support-tracking-card{padding:19px}
  .support-public-body .support-card-title h2{font-size:20px}
  .support-public-body .support-side-stack{display:block}
  .support-public-body .diagnostic-card{border-right:none!important;border-bottom:1px solid #e5ebf5!important}
  .support-public-body #supportRequestForm{grid-template-columns:minmax(0,1fr)}
  .support-public-body #supportRequestForm>.two-field,.support-public-body #supportRequestForm>label,.support-public-body #supportRequestForm>.diagnostic-consent,.support-public-body #supportRequestForm>button,.support-public-body #supportRequestForm>.form-error{grid-column:1/-1!important}
  .support-public-body #supportRequestForm>.two-field{grid-template-columns:1fr}
  .support-public-body .tracking-heading{align-items:flex-start}
  .support-public-body .tracking-private{font-size:9px;padding:5px 8px}
  .support-public-body .customer-ticket-email-form,.support-public-body .tracking-form{grid-template-columns:minmax(0,1fr)}
  .support-public-body .customer-ticket-email-form .btn,.support-public-body .tracking-form>.btn{grid-column:1;width:100%}
  .support-public-body .tracking-meta,.support-public-body .tracking-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-public-body #myTickets,.support-public-body #trackRequest{scroll-margin-top:140px}
}
@media(prefers-reduced-motion:reduce){.support-public-body *{scroll-behavior:auto!important;transition:none!important}}