/* ============================================================================
   Hub — application shell
   ----------------------------------------------------------------------------
   digitalBricks.css carries the brand: colours, typography, buttons, and the
   whole `.dbks-login__*` block. It has no navigation bar, no page frame and no
   footer, because the gestionnaire gets those from Bootstrap and Hub does not
   use Bootstrap. Only that gap is filled here, and only with the design tokens.
   ========================================================================== */

/* ── Reboot ─────────────────────────────────────────────────────────────────
   The defaults browsers have carried since the nineties, put back to something
   a page can be built on. The gestionnaire gets this layer from Bootstrap;
   Hub ships no framework, so the fifteen lines that matter are written here.

   Each one was, or would have been, a bug: the body margin framed the dark bar
   in white, content-box widths made the engine table and the picker run past
   the right edge of a phone, and an image wider than its card would do the same
   the day a client is shown one.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* Never wider than what holds it, and never stretched: the height follows. */
img,
svg,
video,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* A control takes the font of the operating system unless it is told otherwise,
   which is how a select ends up in a different typeface from the page. */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Two pixels between cells, invisible until a row is given a background. */
table {
    border-collapse: collapse;
}

/* The margins of a text flow, which every card then cancels by hand. Said once:
   what needs air asks for it, and nothing arrives with air it did not ask for. */
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

/* ── How the client area reflows ───────────────────────────────────────────
   Two rules, and no width of the window anywhere.

   A row of interchangeable things is laid out with `auto-fit`: as many columns
   as the minimum width allows, and no threshold to maintain.

   A section whose number of columns is part of its meaning — the three steps of
   the journey, the four pillars of the method — declares it once, as `--hub-cols`
   on the section. The cards and the definitions above them both read it, so the
   two grids cannot drift apart, and a @container rule on .hub-page is the only
   place a number is written.
   ========================================================================== */

/* A page shorter than the window would otherwise leave the footer floating in the middle of the
   screen, under a wide band of background. The frame takes the height of the window at least, and
   what is between the bar and the footer takes what is left. The sign-in screens replace this
   frame with their own, and are not concerned. */
.hub-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    /* The ground of the client area, carried by the frame itself: a page has nothing to declare
       to be on it, and the sign-in screens, which replace this frame, keep their own white. */
    background: var(--dbks-bg);
}

.hub-shell main {
    flex: 1 0 auto;
}

/* digitalBricks.css gives .dbks-btn its brand — colour, radius, weight — but no box: in the
   gestionnaire the padding and the link reset come from Bootstrap. Hub ships no framework,
   so the box is defined here rather than by inventing a second button. */
.dbks-brand .dbks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.dbks-brand .dbks-btn:hover,
.dbks-brand .dbks-btn:focus {
    text-decoration: none;
}

.dbks-brand .dbks-btn--dark:hover,
.dbks-brand .dbks-btn--dark:focus {
    background: var(--dbks-qn-3);
    color: #fff;
}

/* The secondary button of the reference mockup, which the design system does not carry: white,
   a fine border, and the weight left to the action beside it. Written here for now; it belongs
   in digitalBricks.css the day the gestionnaire needs one too. */
.dbks-brand .hub-btn--soft {
    background: #fff;
    color: var(--dbks-text);
    border: 1.5px solid var(--dbks-border);
    font-weight: 600;
}

.dbks-brand .hub-btn--soft:hover,
.dbks-brand .hub-btn--soft:focus {
    background: var(--dbks-bg);
    border-color: var(--dbks-qn);
    color: var(--dbks-text);
}

.hub-nav {
    background: var(--dbks-qn);
    color: var(--dbks-on-dark);
    border-bottom: 1px solid var(--dbks-on-dark-border);
}

.hub-nav__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* The Digital Bricks mark, drawn as on the sign-in panel: the bar is dark too, so the light
   bricks and the signal one carry over without a second palette. */
.hub-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hub-nav__brand svg {
    display: block;
}

.hub-nav__brand span {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
}

.hub-nav__brand em {
    color: var(--dbks-signal-med);
    font-style: normal;
}

.hub-nav__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hub-nav__client {
    font-size: 13px;
    color: var(--dbks-on-dark-2);
}

/* The page is what the sections measure themselves against, rather than the window: a grid needs
   to know the width it was given, and that stops being the width of the screen the day a page
   carries anything beside it. The widths named in the @container rules of the client area are
   therefore widths of this box, not of the viewport. */
.hub-page {
    container-type: inline-size;
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 32px 80px;
}

.hub-page h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    font-size: clamp(28px, 3vw, 38px);
    margin: 10px 0 12px;
}

.hub-page p {
    color: var(--dbks-text-2);
}

.hub-foot {
    border-top: 1px solid var(--dbks-border);
    background: #fff;
}

.hub-foot__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 32px;
    font-size: 12.5px;
    color: var(--dbks-text-2);
}

.hub-page__client {
    color: var(--dbks-text-2);
    font-size: 14px;
}

.hub-score {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hub-score small {
    font-size: 13px;
    font-weight: 600;
    color: var(--dbks-text-2);
}

.hub-delta {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.hub-delta--base {
    background: var(--dbks-divider);
    color: var(--dbks-text-2);
}

.hub-delta--pos {
    background: var(--dbks-positive-pale);
    color: var(--dbks-positive);
}

/* Amber and not the signal colour: the signal belongs to the brand, and a score that went down
   was being read as an accent. The same reading on every screen of the client area. */
.hub-delta--neg {
    background: var(--dbks-amber-pale);
    color: var(--dbks-amber-dark);
}

/* The sentence that explains a session sent back to the sign-in screen: informative, not a
   failure, so it wears the amber of the design system rather than the signal colour. */
.hub-notice {
    margin: 0 0 18px;
    padding: 10px 12px;
    background: var(--dbks-amber-pale);
    border-left: 3px solid var(--dbks-amber);
    border-radius: var(--dbks-radius-sm);
    font-size: 13px;
    color: var(--dbks-amber-dark);
}

/* Error pages: the same page frame as the rest of Hub, so a client who lands on one is still
   in the client area, with the navigation bar and a way out, rather than on a bare page. */
.hub-message__text {
    font-size: 15px;
    line-height: 1.6;
}

.hub-message__actions {
    margin-top: 26px;
}

/* A page that says one sentence — an error, an audit that cannot be read — holds it in a card on
   the grey ground, like every other screen of the client area, rather than leaving it alone in
   the top corner of an empty window. */
.hub-centered main {
    display: flex;
}

.hub-centered .hub-message {
    margin: auto;
    padding: 48px 24px;
}

.hub-message__card {
    max-width: 560px;
    background: #fff;
    border: 1px solid var(--dbks-border);
    border-radius: var(--dbks-radius);
    padding: 40px 36px;
    text-align: center;
}

.hub-message__card h1 {
    margin: 14px 0 10px;
    font-size: clamp(24px, 3vw, 30px);
}

/* An impersonated session, said loudly: the point is that nobody mistakes it for a client
   signing in, so it takes the full width above the page rather than a word in the bar. */
/* Ref #48059: said once, at the top of every page. In signal: the quasi-noir it used to wear
   melted into the dark header right underneath it. The impersonation band wears the same colour
   but sits below the navigation bar, so the two never touch. */
.hub-beta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 12px 32px;
    background: var(--dbks-signal);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.hub-beta__tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--dbks-signal-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hub-impersonation {
    margin: 0;
    padding: 12px 32px;
    background: var(--dbks-signal);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.hub-impersonation a {
    color: #fff;
    margin-left: 10px;
    text-decoration: underline;
}

/* The deployed revision, for administrators only. */
.hub-foot__commit {
    margin-left: 10px;
    opacity: 0.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}