/* Helpdesk Panic brand (v0.9.35, direction B "SLA clock"): an SLA ring that is almost used up with an exclamation
   mark, and the wordmark "Helpdesk" + PANIC as an orange status label. Shared by the Desk, the Main Menu and the Shift
   Dashboard. The top bars are dark in both themes; .hdp-logo-hero sits on the page and follows the theme. */
:root{--brand-orange:#FF8A1F;--brand-red:#FF4D3D;--brand-ink:#14100A}
.hdp-brandline{display:flex;align-items:center;gap:10px;min-width:0}
.hdp-brandline>div{min-width:0}
.hdp-mark{width:34px;height:34px;flex:none;display:block}
.hdp-mark .m-trk{stroke:rgba(255,255,255,.16)}
.hdp-mark .m-ring{stroke:var(--brand-orange)}
.hdp-mark .m-dot{fill:var(--brand-red)}
.hdp-mark .m-ex{fill:currentColor}
.hdp-word{display:inline-flex;align-items:center;gap:.42em;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.hdp-panic{font-size:.76em;font-weight:800;letter-spacing:.12em;padding:.22em .42em;border-radius:.24em;background:var(--brand-orange);color:var(--brand-ink)}
header .hdp-brandline h1{margin:4px 0 0;font-size:.82rem;font-weight:600;letter-spacing:.02em;opacity:.72;line-height:1.1}
/* Big logo on the start screens (join, sign in, new shift). */
.hdp-logo-hero{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 2px}
.hdp-logo-hero .hdp-mark{width:68px;height:68px}
.hdp-logo-hero .hdp-word{font-size:26px}
.hdp-logo-hero.left{align-items:flex-start}
html.theme-light .hdp-logo-hero .m-trk{stroke:#D6DCE5}
@media(max-width:620px){.hdp-mark{width:30px;height:30px}.hdp-word{font-size:15px}.hdp-logo-hero .hdp-mark{width:56px;height:56px}.hdp-logo-hero .hdp-word{font-size:22px}}
/* The brand stripe under the top bar is the brand orange (blue stays the colour of actions). */
html.hdp-v2 header.brandbar,html.hdp-v2 .topbar{border-bottom-color:var(--brand-orange)!important}
/* The Shift Dashboard is read from across the room: a larger logo. */
.dashboard-shell .topbar .hdp-mark{width:46px;height:46px}
.dashboard-shell .topbar .hdp-word{font-size:22px}
.dashboard-shell .topbar .hdp-brandline h1{font-size:.95rem}
/* Top bars are dark in both themes, so the logo text there is always light. */
header.brandbar .hdp-brandline,.topbar .hdp-brandline{color:var(--v2-headtext,#E6EAF0)}
/* 0.9.38: "?" in every top bar opens the guide "How it works". */
.help-link{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:var(--v2-headtext,#E6EAF0)!important;font-weight:800;font-size:15px;line-height:1;text-decoration:none!important;background:transparent}
.help-link:hover,.help-link:focus-visible{border-color:var(--brand-orange);color:var(--brand-orange)!important}