/* ---------------------------------------------------------------------------
The shell both products wear.
---------------------------------------------------------------------------
Daniel: "maybe there is a way to keep navigation and experience better so it
doesn't feel like you're going into different pages?"
The two halves of HRtool.ai grew their own chrome. /app has a 240px dark rail
on the left; Learn & Engage has a light bar across the top. Clicking between
them moved the navigation from one side of the screen to the other and
changed its colour, which is what makes it read as two websites rather than
two sections.
This file is the /app rail, lifted out so a Learn & Engage page can wear the
same one. It is deliberately a COPY OF THE SAME VALUES rather than a new
design: if the rail paints in the same place, in the same colours, at the
same width on both sides, then a full page load looks like only the right
half changed. That is the whole trick, and it does not need the two apps
merged to work.
Nothing here is imported by /app yet. It is a proof on one page first —
swapping the chrome on seventeen pages at once is how a class collision
takes down a whole product, which is a mistake already made once in this
codebase this week.
--------------------------------------------------------------------------- */
:root {
/* The same values app.html uses. Named here so a Learn page does not have
to know them, and so the two cannot drift apart quietly. */
--hrt-sidebar: #0c1425;
--hrt-sidebar-hover: #162038;
--hrt-brand: #2563eb;
--hrt-rail: 240px;
}
.hrt-layout { display: flex; min-height: 100vh; }
/* Who you are, under the logo.
Moved out of the footer, where it sat beside Sign out — the last place you
look, and an odd neighbour. Under the brand it reads as "this is whose
account you are in", which is what it is for. */
.hrt-sidebar .hrt-me {
display: flex; align-items: center; gap: 10px;
margin: 10px 8px 2px; padding: 8px 10px; border-radius: 9px;
text-decoration: none; color: #cbd5e1; font-size: 13.5px; font-weight: 600;
background: rgba(255, 255, 255, .04);
}
.hrt-sidebar .hrt-me:hover { background: var(--hrt-sidebar-hover); color: #fff; }
.hrt-sidebar .hrt-me .av {
flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
background: var(--hrt-brand); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
/* min-width:0 is what lets a long name ellipsis instead of pushing the avatar
out of the rail — a flex child will not shrink below its content without it. */
.hrt-sidebar .hrt-me .nm {
min-width: 0; flex: 1 1 auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── The notification bell ────────────────────────────────────────────────
Fixed top right on every page of both products. */
.hrt-bell {
position: fixed; top: 14px; right: 16px; z-index: 130;
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid #e2e8f0; background: #fff; color: #334155;
display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
/* In a page's own header the bell is a normal control in the flow, not a
floating one — otherwise it covers whatever that header already had in the
top-right corner. Same size and shape, so it still reads as the same thing. */
.hrt-bell--inline {
position: static; flex: none; margin-left: 8px;
width: 36px; height: 36px; box-shadow: none;
}
/* margin-left:auto pushes the bell to the right end; anything after it (Sign
out) must not then claim the same trick and split them apart. */
/* The bell is appended LAST so it sits to the right of everything already in
the bar and covers none of it. It therefore needs no auto margin of its own —
the bar's existing spacer does the pushing, and a second one would open a gap
in the middle of the group. */
.hrt-bell:hover { background: #f8fafc; color: #0f172a; }
.hrt-bell.on { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.hrt-bell svg { width: 19px; height: 19px; }
.hrt-bell .n {
position: absolute; top: -3px; right: -3px;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: #dc2626; color: #fff; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
}
.hrt-bell:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.hrt-notif {
position: fixed; top: 62px; right: 16px; z-index: 129;
width: 380px; max-width: calc(100vw - 32px); max-height: 70vh;
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
display: none; flex-direction: column; overflow: hidden;
}
.hrt-notif.open { display: flex; }
.hrt-notif .h {
display: flex; align-items: center; gap: 10px; flex: none;
padding: 12px 14px; border-bottom: 1px solid #e2e8f0;
}
.hrt-notif .h strong { font-size: 14px; margin-right: auto; }
.hrt-notif .mk {
border: 0; background: none; color: #2563eb; font-size: 12.5px; cursor: pointer;
padding: 4px 6px; border-radius: 6px;
}
.hrt-notif .mk:hover { background: #eff6ff; }
.hrt-notif .x {
border: 0; background: none; font-size: 21px; line-height: 1; color: #64748b;
cursor: pointer; padding: 0 2px;
}
.hrt-notif .b { overflow-y: auto; padding: 6px; }
.hrt-notif .e { padding: 22px 14px; text-align: center; color: #64748b; font-size: 13.5px; }
.hrt-notif .r {
display: block; padding: 10px 11px; border-radius: 9px;
text-decoration: none; color: inherit;
}
.hrt-notif a.r:hover { background: #f1f5f9; }
/* Unread is a rail down the left rather than a bold row — it survives being
next to a long title, and reads at a glance without shouting. */
.hrt-notif .r.unread { background: #f8fbff; box-shadow: inset 2px 0 0 #2563eb; }
.hrt-notif .r .t { display: block; font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1.35; }
.hrt-notif .r .d { display: block; font-size: 12.5px; color: #475569; margin-top: 2px; line-height: 1.4; }
.hrt-notif .r .w { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
/* Things waiting on a decision, above the news.
------------------------------------------------------------------------
Set apart from the notification rows on purpose: everything else in this
panel is something that HAPPENED, and these have not happened yet and will
not until somebody presses a button. Same type scale, a tinted ground and a
rule underneath, so it reads as a different kind of thing without becoming
an alert — none of these is an emergency. */
.hrt-notif-ask {
background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
padding: 4px; margin: 0 0 8px;
}
.hrt-notif-ask .hd {
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #92400e; padding: 6px 8px 4px;
}
.hrt-notif-ask .r { display: block; padding: 8px; border-radius: 8px; }
.hrt-notif-ask .r + .r { border-top: 1px solid #fde68a; }
.hrt-notif-ask .r .t { display: block; font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1.35; }
.hrt-notif-ask .r .d { display: block; font-size: 12px; color: #78716c; margin-top: 2px; }
.hrt-notif-ask .r .a {
display: flex; gap: 8px; margin-top: 8px; align-items: center;
font-size: 12.5px; color: #78716c;
}
.hrt-notif-ask button {
font: inherit; font-size: 12.5px; cursor: pointer;
padding: 5px 11px; border-radius: 7px; border: 1px solid transparent;
}
.hrt-notif-ask .go { background: #0f172a; color: #fff; }
.hrt-notif-ask .go:hover { background: #1e293b; }
/* Declining is a normal answer, so it is a real button and not an X — but a
quiet one, because it is not the thing being asked. */
.hrt-notif-ask .no { background: #fff; color: #44403c; border-color: #d6d3d1; }
.hrt-notif-ask .no:hover { background: #f5f5f4; }
.hrt-notif-ask button[disabled] { opacity: .5; cursor: default; }
/* On a phone it comes up from the bottom at full width. A dropdown pinned to
the right edge of a 360px screen ends up half off it. */
@media (max-width: 640px) {
.hrt-bell { top: 10px; right: 10px; width: 38px; height: 38px; }
/* The floating rules above do not reach a bell sitting in a page header —
it needs to stay a normal, thumb-sized control in the flow, and not grow
a margin that pushes the row wider than the screen. */
.hrt-bell--inline { top: auto; right: auto; width: 38px; height: 38px; flex: none; }
.hrt-notif {
top: auto; bottom: 0; right: 0; left: 0;
width: auto; max-width: none; max-height: 78vh;
border-radius: 16px 16px 0 0; border-bottom: 0;
}
}
.hrt-sidebar {
width: var(--hrt-rail);
background: var(--hrt-sidebar);
color: #e2e8f0;
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: 100;
}
.hrt-sidebar .logo {
padding: 20px 18px;
font-size: 17px; font-weight: 700; color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, .08);
display: flex; align-items: center; gap: 10px;
}
/* A company that uploaded a WIDE logo gets it on a band; one with only the
square mark gets the mark beside its name. Same rule as /app, because the
rail is meant to be indistinguishable. */
.hrt-sidebar .logo.branded {
background: #fff; border-bottom-color: rgba(15, 23, 42, .10);
justify-content: center; padding: 12px 14px;
}
.hrt-sidebar .logo.lockup { justify-content: flex-start; gap: 10px; padding: 14px; }
.hrt-sidebar .logo .brand-mark {
width: 34px; height: 34px; flex: 0 0 34px;
border-radius: 8px; object-fit: contain; background: #fff; padding: 3px;
}
.hrt-sidebar .logo .brand-name {
font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* min-height:0 + overflow-y are load-bearing, exactly as in /app: a flex item
will not shrink below its content, so without them a long nav pushes Sign
out past the bottom of a fixed rail with no way to scroll it back. With both
products' items in one list that nav is now longer, so this matters more
here than it did there. */
.hrt-sidebar nav {
flex: 1; min-height: 0; overflow-y: auto;
/* Extra room at the bottom so the LAST item can always scroll fully clear.
Without it the rail overflowed by about twenty pixels and cut the final
row in half — a half-drawn, half-faded menu entry reads as broken rather
than as "scroll for more", which is what it actually is. */
padding: 12px 8px 28px; display: flex; flex-direction: column; gap: 2px;
/* The rail is #0c1425 and the platform scrollbar is not. Left alone it
paints a light strip down the inside edge that reads as the page
cutting into the navigation — which is exactly how it was reported.
Firefox and the rest take these; WebKit needs its own rules below. */
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, .28) transparent;
/* Scrolling the menu should not then start scrolling the page behind it
once it reaches the end. That hand-off is most of what makes a
sidebar feel unfinished. */
overscroll-behavior: contain;
}
/* WebKit and Blink. Transparent track so there is no visible channel, and a
thumb that only shows once there is something to scroll. */
.hrt-sidebar nav::-webkit-scrollbar { width: 8px; }
.hrt-sidebar nav::-webkit-scrollbar-track { background: transparent; }
.hrt-sidebar nav::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, .22);
border-radius: 999px;
/* Inset with a transparent border so the thumb sits off the very edge
rather than butting against the content. */
border: 2px solid transparent;
background-clip: content-box;
}
.hrt-sidebar:hover nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .40); background-clip: content-box; }
.hrt-sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(203, 213, 225, .60); background-clip: content-box; }
.hrt-sidebar nav::-webkit-scrollbar-corner { background: transparent; }
/* A scrollable list that simply stops mid-item reads as the page cutting
into the menu — reported as "doesn't look fluid". Fading the edge that
has more beyond it says "there is more here" instead of ending on a
sliced row. Only the edge that can actually scroll is faded, so a list
scrolled to the bottom does not have its last item dimmed. */
.hrt-sidebar nav.can-scroll-down {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.hrt-sidebar nav.can-scroll-up {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}
.hrt-sidebar nav.can-scroll-up.can-scroll-down {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
/* The footer is fixed height and the nav gets what is left, so every pixel
here is one the menu does not have. Trimmed from the /app original,
which had a whole dashboard to itself rather than 26 nav items above. */
.hrt-sidebar .nav-footer { flex-shrink: 0; padding: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.hrt-sidebar .nav-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; border-radius: 8px;
cursor: pointer; color: #94a3b8; font-size: 14px; font-weight: 500;
text-decoration: none; transition: background .15s ease, color .15s ease;
}
.hrt-sidebar .nav-item:hover { background: var(--hrt-sidebar-hover); color: #e2e8f0; }
.hrt-sidebar .nav-item.active { background: var(--hrt-brand); color: #fff; }
.hrt-sidebar .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.hrt-sidebar .nav-item:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }
/* A long name ran out of the sidebar and sat over the page. The label is the
only part that may shrink — the icon keeps its width, so the row stays
aligned with every other item instead of the glyph sliding about. min-width:0
is what actually permits the shrink: a flex child will not go below its
content width without it, whatever overflow says. */
.hrt-sidebar .nav-label {
min-width: 0; flex: 1 1 auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The heading above each product's items. This is what replaces the black
"Assessments →" pill and the bordered "Learn & Engage" row: the two products
become two labelled groups in one list, instead of a link out of one place
and into another. */
.hrt-sidebar .nav-group {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #64748b; padding: 14px 14px 6px;
}
.hrt-sidebar .nav-group:first-child { padding-top: 4px; }
.hrt-main { margin-left: var(--hrt-rail); flex: 1; min-width: 0; min-height: 100vh; }
.hrt-menu-btn {
display: none; align-items: center; justify-content: center;
width: 40px; height: 40px; border: 0; border-radius: 10px;
background: var(--hrt-brand); color: #fff; font-size: 20px; cursor: pointer;
position: fixed; top: 12px; left: 12px; z-index: 1998;
box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}
.hrt-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1999; }
.hrt-overlay.open { display: block; }
/* ---------------------------------------------------------------------------
THE RAIL, NARROWED ON PURPOSE.
---------------------------------------------------------------------------
Daniel: "remember how user shrinks or expands navigation so it stays the same
based on last time they used it."
ONE VARIABLE DOES BOTH JOBS. The rail's width and the page's left margin are
already the same custom property, so a body class that changes --hrt-rail
moves both together and there is no second number to keep in step.
Only above the tablet breakpoint. Below it the rail is ALREADY icons-only,
and below that again it is an off-canvas overlay — a stored preference
applied there would be a third mode nobody asked for, fighting two that
already work.
--------------------------------------------------------------------------- */
@media (min-width: 769px) {
body.hrt-rail-mini { --hrt-rail: 68px; }
body.hrt-rail-mini .hrt-sidebar .nav-label,
body.hrt-rail-mini .hrt-sidebar .nav-group,
body.hrt-rail-mini .hrt-sidebar .nav-group-btn,
body.hrt-rail-mini .hrt-sidebar .logo .brand-name,
body.hrt-rail-mini .hrt-sidebar .hrt-me .nm,
body.hrt-rail-mini .hrt-sidebar .hrt-credits { display: none; }
body.hrt-rail-mini .hrt-sidebar .logo { padding: 16px 8px; justify-content: center; }
body.hrt-rail-mini .hrt-sidebar nav { padding: 12px 8px; align-items: center; }
body.hrt-rail-mini .hrt-sidebar .nav-item {
justify-content: center; padding: 0;
min-height: 40px; min-width: 40px;
}
/* THE ACCOUNT ROW SURVIVES, as the avatar alone. It is how you check whose
account you are in, which matters most while impersonating somebody — a
collapse that hides that is worse than no collapse. */
body.hrt-rail-mini .hrt-sidebar .hrt-me { justify-content: center; padding: 8px; }
.hrt-rail-toggle {
display: flex; align-items: center; justify-content: center;
width: 100%; margin: 0; padding: 10px 0;
background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .08);
color: #94a3b8; cursor: pointer; font-size: 15px; line-height: 1;
}
.hrt-rail-toggle:hover { color: #e2e8f0; }
}
/* The toggle is a desktop control. Below the breakpoint the burger and the
tablet rail already decide the width, so offering it would promise something
that does nothing. */
@media (max-width: 768px) { .hrt-rail-toggle { display: none; } }
/* Tablet: icons only, same as /app. */
@media (max-width: 768px) {
.hrt-sidebar { width: 60px; }
.hrt-sidebar .nav-label,
.hrt-sidebar .nav-group,
.hrt-sidebar .logo .brand-name { display: none; }
.hrt-sidebar .logo { padding: 16px; justify-content: center; }
/* 44px is the smallest thing a finger reliably hits. Squeezed into the
icon strip these were measuring 29x38, which is a miss waiting to
happen on the one layout most likely to be used on a touchscreen. */
.hrt-sidebar .nav-item {
justify-content: center; padding: 0;
min-height: 44px; min-width: 44px;
}
.hrt-sidebar nav { padding: 12px 8px; align-items: center; }
.hrt-main { margin-left: 60px; }
}
/* Phone: off-canvas behind the ☰ button. */
@media (max-width: 480px) {
.hrt-sidebar { position: fixed; left: -70px; transition: left .2s ease; z-index: 2000; height: 100vh; }
.hrt-sidebar.open { left: 0; width: 240px; }
.hrt-sidebar.open .nav-label,
.hrt-sidebar.open .nav-group,
.hrt-sidebar.open .logo .brand-name { display: block; }
.hrt-sidebar.open .nav-item { justify-content: flex-start; padding: 10px 14px; }
.hrt-menu-btn { display: flex; }
/* The menu button is position:fixed and the rail is gone, so the page
starts underneath it — the first heading rendered as "Learning"
because the button sat on "My ". The rail owns the button, so the
rail has to clear the fixed menu button rather than every page
remembering to. */
.hrt-main { margin-left: 0; }
.hrt-layout { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
.hrt-sidebar, .hrt-sidebar .nav-item { transition: none; }
}
/* ---------------------------------------------------------------------------
Collapsible groups (optional — set collapsible:true on mount).
With both products the rail carries 26 items, which is more than fits a
laptop without scrolling. Folding a group you never open is the cheapest
way to shorten it without hiding anything permanently.
--------------------------------------------------------------------------- */
.hrt-sidebar .nav-group-btn {
display: flex; align-items: center; gap: 6px; width: 100%;
background: none; border: 0; text-align: left; cursor: pointer;
font-family: inherit;
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #64748b; padding: 14px 14px 6px;
}
.hrt-sidebar .nav-group-btn:hover { color: #94a3b8; }
.hrt-sidebar .nav-group-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; border-radius: 6px; }
.hrt-sidebar .nav-group-btn .chev {
width: 13px; height: 13px; flex: 0 0 13px;
transition: transform .15s ease;
}
.hrt-sidebar .nav-group-btn.folded .chev { transform: rotate(-90deg); }
/* How many items are hidden. A fold with no count is a menu that has silently
lost things; the number says they are still there. */
.hrt-sidebar .nav-group-btn .cnt {
margin-left: auto; font-size: 10px; font-weight: 700;
background: #1e293b; color: #94a3b8;
padding: 1px 6px; border-radius: 999px; letter-spacing: 0;
}
.hrt-sidebar .nav-items { display: flex; flex-direction: column; gap: 2px; }
.hrt-sidebar .nav-items.hidden { display: none; }
/* Collapsed to icons, a group heading is meaningless and the fold control has
nothing to label — so the rail always shows every item at that width. */
@media (max-width: 768px) {
.hrt-sidebar .nav-group-btn { display: none; }
.hrt-sidebar .nav-items.hidden { display: flex; }
}
@media (max-width: 480px) {
.hrt-sidebar.open .nav-group-btn { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
.hrt-sidebar .nav-group-btn .chev { transition: none; }
}
/* ---------------------------------------------------------------------------
Credit balances. Copied from /app's footer widgets, because they are not
decoration — they are where a customer BUYS. A rail without them would have
quietly removed a purchase surface.
--------------------------------------------------------------------------- */
.hrt-sidebar .hrt-credits { display: flex; flex-direction: column; gap: 5px; padding: 0 4px 8px; }
.hrt-sidebar .hrt-credits .cred {
display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 8px;
text-decoration: none;
background: rgba(37, 99, 235, .15); border-radius: 8px; padding: 7px 11px;
}
.hrt-sidebar .hrt-credits .cred:hover { background: rgba(37, 99, 235, .26); }
.hrt-sidebar .hrt-credits .k {
grid-column: 1; grid-row: 1;
font-size: 10px; font-weight: 700; color: #94a3b8;
text-transform: uppercase; letter-spacing: .05em; line-height: 1.3;
}
.hrt-sidebar .hrt-credits .v {
grid-column: 2; grid-row: 1 / span 2; align-self: center;
font-size: 19px; font-weight: 700; color: #fff;
font-variant-numeric: tabular-nums; line-height: 1.15;
}
.hrt-sidebar .hrt-credits .buy {
grid-column: 1; grid-row: 2;
font-size: 10.5px; font-weight: 600; color: #60a5fa;
}
/* Collapsed to icons there is no room for a balance, and a number with no
label is worse than nothing. */
@media (max-width: 768px) { .hrt-sidebar .hrt-credits { display: none; } }
@media (max-width: 480px) { .hrt-sidebar.open .hrt-credits { display: flex; } }
/* ---------------------------------------------------------------------------
"You are looking at somebody else's company."
A master admin who impersonates lands on /app and, before this, was told
nothing — the only banner lived in the console they had just left. Every
write from that point goes into the customer's account while looking exactly
like your own. Amber rather than red: this is a state to notice, not an
error, and a red bar on every page teaches people to ignore red bars.
--------------------------------------------------------------------------- */
.hrt-impersonating {
position: fixed; top: 0; left: 0; right: 0; z-index: 2100;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: #b45309; color: #fff;
padding: 8px 14px; font-size: 13px; line-height: 1.4;
box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.hrt-impersonating .w { font-weight: 700; }
.hrt-impersonating .d { color: #fde68a; }
.hrt-impersonating button {
margin-left: auto; font-family: inherit; font-size: 12.5px; font-weight: 700;
background: #fff; color: #b45309; border: 0; border-radius: 7px;
padding: 5px 13px; cursor: pointer;
}
.hrt-impersonating button:hover { background: #fef3c7; }
/* The banner is fixed, so everything else has to move down or it hides the top
of the rail — including the logo, which is how you would know whose company
you are in. */
body.hrt-has-banner .hrt-sidebar { top: 38px; }
body.hrt-has-banner .hrt-main { padding-top: 38px; }
body.hrt-has-banner .hrt-menu-btn { top: 46px; }
@media (max-width: 480px) {
.hrt-impersonating .d { display: none; } /* the warning still reads without it */
}
/* ---------------------------------------------------------------------------
The rail owns Sign out, so a page's own one is a duplicate.
Done in CSS rather than by removing the button: a page reveals it
asynchronously with `out.style.display = 'inline-block'` and does not
null-check, so deleting the element throws — and hiding it from script would
race that reveal. !important because it is competing with an inline style.
--------------------------------------------------------------------------- */
body.hrt-shelled #logout { display: none !important; }
/* ── Paper ──────────────────────────────────────────────────────────────
Nobody wants the navigation on a printout, and the rail is a dark 240px
column that would otherwise be inked onto every page. The content box
gives back the margin the rail was holding. */
@media print {
.hrt-sidebar, .hrt-menu-btn, .hrt-impersonating { display: none !important; }
.hrt-main { margin-left: 0 !important; min-height: 0 !important; }
.hrt-layout { display: block !important; }
}
/* ── Running low ────────────────────────────────────────────────────────
app.html tinted these amber at five and red at zero. It is the only
warning anybody gets before a top-up is needed, so it survives the move
to the rail — as a class rather than the inline styles it used to be. */
.hrt-sidebar .cred.is-low { background: rgba(217, 119, 6, .22); }
.hrt-sidebar .cred.is-out { background: rgba(220, 38, 38, .22); }
/* ── Crossing between pages ─────────────────────────────────────────────
Learn & Engage is seventeen separate documents, so every menu click is a
real navigation and the browser paints white in between. With the rail
drawn instantly from cache that white flash is the only thing left that
makes a click feel like the whole page reloading.
A cross-document view transition replaces it with a fade, and naming the
rail holds it STILL across the change — so the left side stays put and
only the right side moves, which is the whole point of the shared menu.
Progressive: browsers without it navigate exactly as before, and anyone
who has asked for less motion gets none. */
@view-transition { navigation: auto; }
.hrt-sidebar { view-transition-name: hrt-rail; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* ---- Ask HRtool -----------------------------------------------------------
A launcher and a side PANEL. Not a modal: you keep reading the page you were
on while you ask about it, and a modal would make somebody choose between the
answer and the thing the answer is about.
Every colour is stated for both schemes. This file is loaded into eighteen
pages with their own palettes, so inheriting is how a panel ends up with dark
text on a dark ground on one page and not another. */
.hrt-ask-btn {
/* Below the mobile menu button (1998) so that stays reachable, and in the
opposite corner from it. The PANEL sits above everything, including the
menu button and its overlay — otherwise on a phone the blue burger floats
on top of the conversation you are reading. */
position: fixed; right: 20px; bottom: 20px; z-index: 1997;
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 16px; border: 0; border-radius: 999px;
background: #2563eb; color: #fff; font: 600 14px/1 inherit; font-family: inherit;
box-shadow: 0 6px 20px rgba(15, 23, 42, .22); cursor: pointer;
}
.hrt-ask-btn:hover { background: #1d4ed8; }
.hrt-ask-btn span[aria-hidden] { font-size: 16px; }
@media (max-width: 720px) {
.hrt-ask-btn { right: 14px; bottom: 14px; padding: 12px; }
.hrt-ask-btn .lbl { display: none; }
}
.hrt-ask {
position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100%);
z-index: 2001; display: flex; flex-direction: column;
background: #fff; color: #0f172a; border-left: 1px solid #e2e8f0;
box-shadow: -8px 0 28px rgba(15, 23, 42, .16);
transform: translateX(100%); transition: transform .18s ease;
}
.hrt-ask.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .hrt-ask { transition: none; } }
/* Two rows, not one. The note used to sit beside the title with margin-left:auto
and ellipsis, which was fine until history and new-chat buttons joined it in a
380px header — then "Your included questions are used up — each one now costs
1 credit" got cut to a stub that looked like it was trying to say more.
Wrapping it onto its own full-width line lets it say the whole thing. */
.hrt-ask-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
padding: 12px 16px; border-bottom: 1px solid #e2e8f0; flex: none;
}
.hrt-ask-head strong { font-size: 15px; margin-right: auto; }
.hrt-ask-note {
/* Full width on its own row, wrapping rather than truncating. */
flex: 1 0 100%; order: 10;
font-size: 12px; line-height: 1.4; color: #64748b;
}
.hrt-ask-note:empty { display: none; }
.hrt-ask-x {
border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer;
color: #64748b; padding: 0 2px; flex: none;
}
/* Icon buttons in the head: history and a fresh start. Sized to the same
target as the close control so the row reads as one set. */
.hrt-ask-i {
border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1;
color: #64748b; padding: 5px 6px; border-radius: 7px; flex: none;
}
.hrt-ask-i:hover { background: #f1f5f9; color: #0f172a; }
.hrt-ask-i.on { background: #eff6ff; color: #2563eb; }
/* The chat list drops over the top of the log rather than beside it — the
panel is 380px wide and a sidebar inside it would leave neither usable. */
.hrt-ask-convs {
flex: none; max-height: 46%; overflow-y: auto;
padding: 8px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
}
.hrt-ask-convs .sec {
font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #64748b; margin: 6px 6px 4px;
}
.hrt-ask-convs .empty { font-size: 13px; color: #64748b; padding: 10px 6px; }
.hrt-ask-crow { display: flex; align-items: flex-start; gap: 2px; }
.hrt-ask-crow .c {
flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: none;
padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 13px;
line-height: 1.35; color: #0f172a;
}
.hrt-ask-crow .c:hover { background: #eef2f7; }
.hrt-ask-crow .c.on { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.hrt-ask-crow .c .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrt-ask-crow .c .w { display: block; font-size: 11px; color: #64748b; margin-top: 2px; font-weight: 400; }
.hrt-ask-crow .p {
flex: none; border: 0; background: none; cursor: pointer; padding: 8px 5px;
border-radius: 7px; font-size: 12px; line-height: 1; color: #94a3b8; opacity: 0;
}
/* Hidden until hover keeps the list quiet, but a pin that is ON is state, not
a control, so it stays visible. Focus shows it for keyboard users. */
.hrt-ask-crow:hover .p, .hrt-ask-crow .p:focus-visible, .hrt-ask-crow .p.on { opacity: 1; }
.hrt-ask-crow .p.on { color: #2563eb; }
.hrt-ask-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.hrt-ask-msg { font-size: 14px; line-height: 1.55; max-width: 100%; }
/* pre-wrap WOULD double every break now that answers are real markup: the
renderer emits
and , and preserving the source newlines as well
leaves a blank line between every bullet. */
.hrt-ask-msg .b { word-wrap: break-word; overflow-wrap: anywhere; }
.hrt-ask-msg.me .b { white-space: pre-wrap; }
.hrt-ask-msg .b ul, .hrt-ask-msg .b ol { margin: 6px 0; padding-left: 20px; }
.hrt-ask-msg .b li { margin: 2px 0; }
.hrt-ask-msg .b code {
background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
}
.hrt-ask-msg .b a { color: #2563eb; text-decoration: underline; }
.hrt-ask-msg .b strong { font-weight: 650; }
.hrt-ask-msg.me { align-self: flex-end; max-width: 85%; }
.hrt-ask-msg.me .b {
background: #eff6ff; color: #1e3a5f; padding: 9px 12px; border-radius: 12px 12px 2px 12px;
}
.hrt-ask-msg.bot .b { color: #0f172a; }
/* Where an answer came from, always shown. An answer about somebody's sick pay
that cannot be traced to the document it came from is not actionable. */
.hrt-ask-msg .src { font-size: 11.5px; color: #64748b; margin-top: 5px; line-height: 1.45; }
/* The confirm card. Deliberately looks like a thing to decide rather than
another message: bordered, tinted, with the cost above the button so the
price is never discovered afterwards. */
.hrt-ask-card {
border: 1px solid #bfdbfe; background: #f8fbff; border-radius: 12px;
padding: 12px 14px; font-size: 13.5px; line-height: 1.5;
}
.hrt-ask-card .h { font-weight: 650; color: #0f172a; margin-bottom: 4px; }
.hrt-ask-card .s { color: #334155; }
.hrt-ask-card .c { color: #64748b; font-size: 12px; margin-top: 6px; }
.hrt-ask-card .a { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.hrt-ask-card .go {
background: #2563eb; color: #fff; border: 0; border-radius: 8px;
padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
text-decoration: none; display: inline-block;
}
.hrt-ask-card .go:hover { background: #1d4ed8; }
.hrt-ask-card .no {
background: none; border: 1px solid #cbd5e1; color: #475569; border-radius: 8px;
padding: 8px 12px; font-size: 13px; cursor: pointer;
}
.hrt-ask-card .no:hover { background: #eef2f7; }
.hrt-ask-card button:disabled { opacity: .55; cursor: default; }
/* A report drawn in the conversation.
------------------------------------------------------------------------
Deliberately NOT tinted like the confirm card above it. That one is blue
because it is asking for a decision; this one is finished work, and giving
the two the same colour would teach people to skim the one that needs an
answer. Figures are a grid so they stay readable at panel width. */
.hrt-ask-report {
border: 1px solid #e2e8f0; background: #fff; border-radius: 12px;
padding: 12px 14px; font-size: 13.5px; line-height: 1.5;
}
.hrt-ask-report .h { font-weight: 650; color: #0f172a; }
.hrt-ask-report .s { color: #64748b; font-size: 12.5px; margin-top: 2px; }
.hrt-ask-report .c { color: #94a3b8; font-size: 11.5px; margin-top: 8px; }
.hrt-ask-report .figs {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.hrt-ask-report .f {
border: 1px solid #eef2f7; border-radius: 9px; padding: 8px 10px;
display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.hrt-ask-report .f .v { font-size: 18px; font-weight: 750; color: #0f172a; font-variant-numeric: tabular-nums; }
.hrt-ask-report .f .l { font-size: 11.5px; color: #64748b; }
/* The detail line carries "▼ 12% on Q2 2026" — it wraps rather than
truncating, because a comparison cut in half is worse than a taller card. */
.hrt-ask-report .f .d { font-size: 11px; color: #94a3b8; line-height: 1.35; }
/* Tone comes from the server, which knows what each figure means. */
.hrt-ask-report .f.good .v { color: #047857; }
.hrt-ask-report .f.warn .v { color: #b45309; }
.hrt-ask-report .a { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.hrt-ask-report .go {
background: #0f172a; color: #fff; border-radius: 8px; padding: 8px 14px;
font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block;
}
.hrt-ask-report .go:hover { background: #1e293b; }
.hrt-ask-report .no {
border: 1px solid #cbd5e1; color: #475569; border-radius: 8px; padding: 8px 12px;
font-size: 13px; text-decoration: none; display: inline-block;
}
.hrt-ask-report .no:hover { background: #f1f5f9; }
.hrt-ask-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #e2e8f0; flex: none; }
.hrt-ask-foot { align-items: flex-end; }
.hrt-ask-foot textarea {
flex: 1; min-width: 0; padding: 10px 12px; font: 14px inherit; font-family: inherit;
border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a;
/* Grows with what is typed, up to a point, then scrolls. resize is off
because the handle fights the automatic sizing. */
resize: none; overflow-y: auto; max-height: 132px; line-height: 1.45;
}
.hrt-ask-foot textarea:focus { outline: 2px solid #2563eb; outline-offset: -1px; }
.hrt-ask-foot button {
border: 0; border-radius: 10px; padding: 10px 15px; background: #2563eb; color: #fff;
font: 600 14px inherit; font-family: inherit; cursor: pointer; flex: none;
}
.hrt-ask-foot button:disabled { opacity: .55; cursor: default; }
@media (prefers-color-scheme: dark) {
.hrt-ask { background: #0f172a; color: #e5edf7; border-left-color: #1e293b; }
.hrt-ask-head, .hrt-ask-foot { border-color: #1e293b; }
.hrt-ask-note, .hrt-ask-x, .hrt-ask-msg .src { color: #93a4bd; }
.hrt-ask-msg.bot .b { color: #e5edf7; }
.hrt-ask-msg.me .b { background: #172554; color: #dbeafe; }
.hrt-ask-foot textarea { background: #0b1120; border-color: #1e293b; color: #e5edf7; }
.hrt-ask-i { color: #93a4bd; }
.hrt-ask-i:hover { background: #1e293b; color: #e5edf7; }
.hrt-ask-i.on { background: #172554; color: #93c5fd; }
.hrt-ask-convs { background: #0b1120; border-color: #1e293b; }
.hrt-ask-convs .sec, .hrt-ask-convs .empty, .hrt-ask-crow .c .w { color: #93a4bd; }
.hrt-ask-crow .c { color: #e5edf7; }
.hrt-ask-crow .c:hover { background: #172033; }
.hrt-ask-crow .c.on { background: #172554; color: #bfdbfe; }
.hrt-ask-msg .b code { background: #172033; }
.hrt-ask-msg .b a { color: #93c5fd; }
.hrt-bell { background: #0f172a; border-color: #1e293b; color: #cbd5e1; }
.hrt-bell:hover { background: #172033; color: #e5edf7; }
.hrt-bell.on { background: #172554; border-color: #1e3a5f; color: #93c5fd; }
.hrt-notif { background: #0f172a; border-color: #1e293b; color: #e5edf7; }
.hrt-notif .h { border-color: #1e293b; }
.hrt-notif .x, .hrt-notif .e, .hrt-notif .r .w { color: #93a4bd; }
.hrt-notif .r .t { color: #e5edf7; }
.hrt-notif .r .d { color: #cbd5e1; }
.hrt-notif a.r:hover { background: #172033; }
.hrt-notif .r.unread { background: #0f1b33; box-shadow: inset 2px 0 0 #3b82f6; }
.hrt-notif .mk:hover { background: #172554; }
.hrt-ask-card { background: #0f1b33; border-color: #1e3a5f; }
.hrt-ask-card .h { color: #e5edf7; }
.hrt-ask-card .s { color: #cbd5e1; }
.hrt-ask-card .c { color: #93a4bd; }
.hrt-ask-card .no { border-color: #334155; color: #cbd5e1; }
.hrt-ask-card .no:hover { background: #172033; }
}
/* The name and Sign out that each page keeps in its own corner.
------------------------------------------------------------------------
The rail shows both now, directly under the logo, so the corner repeating
them puts the same name on screen twice and crowds the bell.
!important because the pages set `style.display` from their own auth code
AFTER the shell has booted — an inline hide is simply overwritten a moment
later, and the result is a stray Sign out sitting alone in the corner. */
.hrt-dupe-hidden { display: none !important; }