/* ═══════════════════════════════════════════════════════════
   THE STUDENT HUB  [igop_student_hub]

   One page. A fixed navy rail on the left, a white bar across the
   top, and the four screens the student used to visit separately —
   overview, CV, documents, course finder — sitting in panels that
   the rail switches between. Nothing is fetched when they switch:
   every panel is already in the page, so a tab change is instant
   and the browser's find-in-page still works across the lot.

   The look is taken from the JoinIn Campus console the office
   already uses, measured rather than guessed: navy #0E1D3E at 280px,
   Public Sans, 8px corners on cards and controls, a 10px pill for
   the active rail item with a 3px white edge, and #1A73E8 for the
   one button on each screen that matters.

   Everything is scoped under .ighub. The four screens keep their own
   stylesheets; this file frames them and lifts their shared pieces
   (headings, cards, buttons) onto the same scale.
   ═══════════════════════════════════════════════════════════ */

.ighub,
.ighub-signin {
    --hub-navy:#0E1D3E;
    --hub-navy-soft:#16294f;
    --hub-blue:#1A73E8;
    --hub-blue-dark:#1557b0;
    --hub-ink:#101828;
    --hub-body:#475467;
    --hub-muted:#72777C;
    --hub-line:#DADCE0;
    --hub-line-soft:#EDEFF2;
    --hub-canvas:#F6F7F9;
    --hub-card:#FFFFFF;
    --hub-ok:#15803d;
    --hub-ok-bg:#E7F6EC;
    --hub-warn:#B54708;
    --hub-warn-bg:#FEF0C7;
    --hub-danger:#B42318;
    --hub-danger-bg:#FEE4E2;
    --hub-rail:280px;

    font-family:'Public Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:15px;
    line-height:1.55;
    color:var(--hub-ink);
    background:var(--hub-canvas);
    display:flex;
    align-items:stretch;
    min-height:100vh;
    border-radius:0;
    border:0;
    position:relative;

    /* Out of whatever column the theme puts the shortcode in, and across the
       whole window. A dashboard with a page margin around it reads as a widget;
       this one is the application. */
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    -webkit-font-smoothing:antialiased;
}
.ighub *, .ighub *::before, .ighub *::after { box-sizing:border-box; }

/* ─────────────────────────────────────────────
   THE RAIL
   ───────────────────────────────────────────── */

.ighub-rail {
    flex:0 0 var(--hub-rail); width:var(--hub-rail);
    background:var(--hub-navy); color:#fff;
    display:flex; flex-direction:column; gap:4px;
    padding:18px 12px 14px;
    position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.ighub-brand { display:flex; align-items:center; gap:10px; padding:2px 10px 14px; }
.ighub-brand-mark {
    flex:0 0 36px; height:36px; border-radius:9px; background:linear-gradient(135deg,#1A73E8,#4f9bff);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff;
    letter-spacing:.02em;
}
.ighub-brand-name { display:block; font-weight:800; font-size:15px; letter-spacing:.01em; line-height:1.2; }
.ighub-brand-sub { display:block; font-size:11px; color:rgba(255,255,255,.55); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.ighub-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--hub-blue); color:#fff; border:1px solid rgba(255,255,255,.28);
    border-radius:8px; padding:11px 14px; margin:0 2px 14px;
    font-size:14px; font-weight:700; cursor:pointer; text-decoration:none;
    box-shadow:0 8px 20px rgba(0,0,0,.35); font-family:inherit;
}
.ighub-cta:hover { background:var(--hub-blue-dark); color:#fff; }

.ighub-navlabel {
    font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.42); padding:10px 12px 5px;
}

.ighub-nav { display:flex; flex-direction:column; gap:2px; }
.ighub-navitem {
    display:flex; align-items:center; gap:11px; width:100%;
    padding:9px 12px; border-radius:10px; border:0; background:none;
    color:rgba(255,255,255,.76); font-family:inherit; font-size:14.5px; font-weight:600;
    text-align:left; cursor:pointer; text-decoration:none; line-height:1.4;
}
.ighub-navitem svg { flex:0 0 19px; width:19px; height:19px; stroke:currentColor; fill:none;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.ighub-navitem:hover { background:rgba(255,255,255,.08); color:#fff; }
.ighub-navitem.is-on {
    background:rgba(255,255,255,.16); color:#fff;
    box-shadow:inset 3px 0 0 0 #fff;
}
.ighub-navitem.is-on svg { opacity:1; }
.ighub-badge {
    margin-left:auto; background:#fff; color:var(--hub-navy);
    border-radius:20px; min-width:21px; padding:1px 7px;
    font-size:11px; font-weight:800; text-align:center;
}
.ighub-badge.is-warn { background:#FDB022; color:#1f2937; }

.ighub-rail-foot { margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); }
.ighub-rail-foot .ighub-navitem { font-weight:500; color:rgba(255,255,255,.6); font-size:13.5px; }

/* ─────────────────────────────────────────────
   TOP BAR
   ───────────────────────────────────────────── */

.ighub-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.ighub-top {
    display:flex; align-items:center; gap:14px;
    background:#fff; border-bottom:1px solid var(--hub-line);
    padding:14px 22px; position:sticky; top:0; z-index:20;
}
.ighub-burger {
    display:none; background:none; border:0; cursor:pointer; padding:6px; border-radius:8px;
    color:var(--hub-ink);
}
.ighub-burger svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }
.ighub-burger:hover { background:var(--hub-line-soft); }

.ighub-title { font-size:24px; font-weight:700; color:#000; margin:0; line-height:1.2; letter-spacing:-.01em; }
.ighub-sub { font-size:13px; color:var(--hub-muted); margin:1px 0 0; }

.ighub-who { margin-left:auto; display:flex; align-items:center; gap:11px; }
.ighub-avatar {
    width:38px; height:38px; border-radius:50%; background:var(--hub-navy); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.ighub-who-name { font-size:14px; font-weight:700; line-height:1.25; color:var(--hub-ink); }
.ighub-who-role { font-size:12px; color:var(--hub-muted); }

/* ─────────────────────────────────────────────
   PANELS
   ───────────────────────────────────────────── */

.ighub-body { flex:1 1 auto; padding:20px 22px 30px; background:var(--hub-canvas); }
.ighub-panel { display:none; }
.ighub-panel.is-on { display:block; animation:ighub-in .18s ease-out; }
@keyframes ighub-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* The four screens arrive with their own page frames. Inside the hub they are
   content, not pages: the padding, the rounded card and the big top margin all
   come off so they sit flush in the panel. */
.ighub-panel > .igop {
    background:transparent; padding:0; border-radius:0; max-width:none; font-size:15px;
}
.ighub-panel > .igop > .igop-header:first-child { display:none; }

/* ─────────────────────────────────────────────
   SHARED PIECES, ON ONE SCALE
   ───────────────────────────────────────────── */

.ighub .igop-card,
.ighub .igop-panel,
.ighub .igop-box {
    border-radius:10px; border:1px solid var(--hub-line); box-shadow:none;
}
.ighub .igop-btn { border-radius:8px; font-size:14px; }
.ighub .igop-btn-primary { background:var(--hub-blue); border-color:var(--hub-blue); }
.ighub .igop-btn-primary:hover { background:var(--hub-blue-dark); border-color:var(--hub-blue-dark); }
.ighub .igop-input, .ighub .igop-select, .ighub select, .ighub input[type=text],
.ighub input[type=search], .ighub input[type=email], .ighub input[type=tel] {
    border-radius:8px; font-size:14px;
}

/* ─────────────────────────────────────────────
   SMALL SCREENS
   The rail slides over the content rather than squeezing it.
   ───────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   THE RAIL STAYS PUT

   Sticky was not enough: inside a theme's own scrolling column the
   rail scrolled away with the page, which is the one thing a rail
   must never do. Fixed to the window instead, with the content
   given the same width as a margin so nothing hides behind it.

   --ighub-top is set by the script from the height of the WordPress
   admin bar, which is only there for logged-in staff. Without it the
   rail's first item sits under that black bar.
   ═══════════════════════════════════════════════════════════ */

@media (min-width:1025px) {
    /* The navy is painted by the hub, not only by the rail: if a theme puts a
       transform on an ancestor, a fixed element stops filling the window, and
       the column under the menu would end in mid-air. This way it never can. */
    .ighub { background:linear-gradient(to right, var(--hub-navy) 0 var(--hub-rail), var(--hub-canvas) var(--hub-rail)); }

    .ighub-rail {
        position:fixed; left:0; top:var(--ighub-top, 0px); bottom:0;
        height:auto; max-height:none; width:var(--hub-rail);
        z-index:900;
    }
    .ighub-main { margin-left:var(--hub-rail); }
    .ighub-top { top:var(--ighub-top, 0px); }
}

/* ═══════════════════════════════════════════════════════════
   THE BOOT SCREEN

   A page of this size arrives before its stylesheet does, and for a
   moment the student sees raw icons and unstyled headings — which is
   what the screenshots caught. The markup for this overlay carries its
   own styles inline, so it is painted on the very first frame and
   covers that moment with something of ours.

   It removes itself on window load, and on a six-second timer in case
   something never finishes loading. Hiding the dashboard behind a
   spinner that can get stuck would be worse than the flash it fixes.
   ═══════════════════════════════════════════════════════════ */

.ighub-boot {
    position:fixed; inset:0; z-index:99998;
    background:#0E1D3E;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    transition:opacity .45s ease, visibility .45s ease;
}
.ighub-boot.is-gone { opacity:0; visibility:hidden; pointer-events:none; }

/* The mark, with a ring drawing itself around it. */
.ighub-boot-mark {
    position:relative; width:76px; height:76px;
    display:flex; align-items:center; justify-content:center;
}
.ighub-boot-mark span {
    width:52px; height:52px; border-radius:14px;
    background:linear-gradient(135deg,#1A73E8,#4f9bff);
    display:flex; align-items:center; justify-content:center;
    font:800 19px/1 'Public Sans','Segoe UI',system-ui,sans-serif; color:#fff; letter-spacing:.02em;
    box-shadow:0 10px 30px rgba(26,115,232,.45);
}
.ighub-boot-ring {
    position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(255,255,255,.14);
    border-top-color:#4f9bff; border-right-color:#4f9bff;
    animation:ighub-spin 1s linear infinite;
}
@keyframes ighub-spin { to { transform:rotate(360deg); } }

.ighub-boot-name {
    font:700 16px/1.2 'Public Sans','Segoe UI',system-ui,sans-serif;
    color:#fff; letter-spacing:.01em;
}
.ighub-boot-sub {
    font:600 11px/1.2 'Public Sans','Segoe UI',system-ui,sans-serif;
    color:rgba(255,255,255,.55); letter-spacing:.14em; text-transform:uppercase;
}

/* A thread of light under the wordmark — the Delhi-to-Berlin line the
   brand uses, reduced to the one gesture that still reads at this size. */
.ighub-boot-line {
    width:168px; height:2px; border-radius:2px; overflow:hidden;
    background:rgba(255,255,255,.14);
}
.ighub-boot-line i {
    display:block; width:40%; height:100%; border-radius:2px;
    background:linear-gradient(90deg,#1A73E8,#8ab4f8);
    animation:ighub-sweep 1.15s ease-in-out infinite;
}
@keyframes ighub-sweep {
    0%   { transform:translateX(-110%); }
    100% { transform:translateX(320%); }
}

@media (prefers-reduced-motion:reduce) {
    .ighub-boot-ring, .ighub-boot-line i { animation:none; }
    .ighub-boot-line i { width:100%; }
}

@media (max-width:1024px) {
    .ighub { border-radius:12px; }
    .ighub-burger { display:inline-flex; }
    .ighub-rail {
        position:fixed; left:0; top:0; bottom:0; z-index:1200; max-height:none;
        transform:translateX(-102%); transition:transform .22s ease; box-shadow:0 0 60px rgba(0,0,0,.4);
    }
    .ighub.is-open .ighub-rail { transform:none; }
    .ighub-scrim {
        position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1100;
        opacity:0; pointer-events:none; transition:opacity .22s ease;
    }
    .ighub.is-open .ighub-scrim { opacity:1; pointer-events:auto; }
    .ighub-title { font-size:20px; }
}

@media (max-width:640px) {
    .ighub { border-radius:10px; min-height:0; }
    .ighub-top { padding:11px 14px; }
    .ighub-body { padding:14px 14px 22px; }
    .ighub-who-name, .ighub-who-role { display:none; }
}


/* ═══════════════════════════════════════════════════════════
   THE SKIN

   The three screens inside the hub — overview, CV, documents —
   were each built to be a page of their own, with their own
   headings, spacing and colours. Framed together they read as
   three different products.

   Nothing below changes their markup. It puts their existing
   blocks onto the one scale the rail and the programme cards
   already use: a white card with a 1px #DADCE0 edge and 10px
   corners, a 12px grey label over a 14px dark value, #1A73E8 for
   the single action that matters, and the same quiet dividers
   everywhere. Scoped to .ighub, so each screen still looks exactly
   as it did if it is opened on its own.
   ═══════════════════════════════════════════════════════════ */

/* ── Cards, headings, dividers ── */
.ighub .igop-card,
.ighub .igop-track-card,
.ighub .igop-next-card,
.ighub .igop-slcard,
.ighub .igop-mycred,
.ighub .igop-stage,
.ighub .igop-level-picker,
.ighub .igop-sdoc-group,
.ighub .igop-rail-inner {
    background:#fff; border:1px solid var(--hub-line); border-radius:10px;
    box-shadow:none; margin-bottom:14px;
}
.ighub .igop-card, .ighub .igop-stage, .ighub .igop-level-picker { padding:16px 18px; }

.ighub .igop-card-title,
.ighub .igop-section-title,
.ighub .igop-stage-title,
.ighub .igop-sub-h {
    font-size:15px; font-weight:700; color:var(--hub-ink); letter-spacing:-.01em;
    margin:0 0 3px; line-height:1.3;
}
.ighub .igop-section-title { margin:22px 0 10px; font-size:13px; text-transform:uppercase;
    letter-spacing:.07em; color:var(--hub-muted); font-weight:700; }
.ighub .igop-stage-sub, .ighub .igop-sub-note { color:var(--hub-body); font-size:13.5px; margin:0 0 14px; }
.ighub .igop-sub-h { margin-top:22px; padding-top:16px; border-top:1px solid var(--hub-line-soft); }
.ighub .igop-sub-h + .igop-sub-note { margin-top:3px; }
.ighub .igop-muted { color:var(--hub-muted); }
.ighub .igop-small { font-size:13px; }
.ighub .igop-tiny { font-size:11.5px; }

/* ── Buttons ── */
.ighub .igop-btn {
    border-radius:8px; font-size:14px; font-weight:600; padding:9px 15px;
    border:1px solid var(--hub-line); background:#fff; color:var(--hub-ink);
}
.ighub .igop-btn:hover { border-color:#c3c8cf; background:#fbfcfd; }
.ighub .igop-btn-primary {
    background:var(--hub-blue); border-color:var(--hub-blue); color:#fff; font-weight:700;
}
.ighub .igop-btn-primary:hover { background:var(--hub-blue-dark); border-color:var(--hub-blue-dark); color:#fff; }
.ighub .igop-btn-sm { padding:7px 12px; font-size:13px; }
.ighub .igop-link { color:var(--hub-blue); font-weight:600; }
.ighub .igop-link:hover { color:var(--hub-blue-dark); }

/* ── Pills ── */
/* Not .igop-status — that is the journey card's own class, and treating it
   as a pill shrink-wrapped the card and left half the row empty. */
.ighub .igop-pill, .ighub .igop-sapp-status, .ighub .igop-multi-pill {
    border-radius:20px; padding:3px 11px; font-size:11.5px; font-weight:700; letter-spacing:.01em;
    background:#F1F3F5; color:#3c4043; display:inline-block;
}
.ighub .igop-pill-ok, .ighub .igop-ok { background:var(--hub-ok-bg); color:var(--hub-ok); }
.ighub .igop-pill-danger { background:var(--hub-danger-bg); color:var(--hub-danger); }
.ighub .igop-pill-soft { background:#EEF2FF; color:#3730A3; }
.ighub .igop-warn { color:var(--hub-warn); }

/* ═══════════ OVERVIEW ═══════════ */

/* The four numbers at the top, in the same shape as a programme card's facts. */
.ighub .igop-status-facts {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px;
    margin-top:14px;
}
.ighub .igop-fact {
    display:block; background:#FCFCFD; border:1px solid var(--hub-line-soft); border-radius:10px;
    padding:12px 14px; text-decoration:none; transition:border-color .15s, background .15s;
}
.ighub .igop-fact:hover { border-color:var(--hub-blue); background:#fff; }
.ighub .igop-fact strong {
    display:block; font-size:22px; font-weight:700; color:var(--hub-ink); line-height:1.15;
}
.ighub .igop-fact strong.is-ok { color:var(--hub-ok); }
.ighub .igop-fact span { display:block; margin-top:2px; font-size:12px; color:var(--hub-muted); font-weight:500; }

/* The stage line. */
.ighub .igop-track { margin:18px 0 4px; }
.ighub .igop-track-line { background:var(--hub-line); }
.ighub .igop-track-line i { background:var(--hub-blue); }
.ighub .igop-track-dot { background:var(--hub-line); color:#5f6368; }
.ighub .igop-track-step.done .igop-track-dot { background:var(--hub-blue); color:#fff; }
.ighub .igop-track-step.current .igop-track-dot {
    background:#fff; color:var(--hub-blue); box-shadow:0 0 0 2px var(--hub-blue) inset;
}
.ighub .igop-track-label { font-size:11.5px; color:var(--hub-muted); font-weight:600; }
.ighub .igop-track-step.done .igop-track-label,
.ighub .igop-track-step.current .igop-track-label { color:var(--hub-ink); }

/* What to do next: a list of rows, each one a target. */
.ighub .igop-next-list { display:grid; gap:8px; margin-top:12px; }
.ighub .igop-next-item {
    display:flex; align-items:center; gap:12px; text-decoration:none;
    background:#fff; border:1px solid var(--hub-line); border-left:3px solid var(--hub-blue);
    border-radius:9px; padding:11px 14px; transition:box-shadow .15s, border-color .15s;
}
.ighub .igop-next-item:hover { box-shadow:0 2px 10px rgba(16,24,40,.07); }
.ighub .igop-next-text strong { display:block; font-size:14px; font-weight:650; color:var(--hub-ink); }
.ighub .igop-next-text span { font-size:12.5px; color:var(--hub-muted); }
.ighub .igop-next-go { margin-left:auto; color:var(--hub-blue); font-size:17px; font-weight:700; }
.ighub .igop-all-done { text-align:center; padding:22px 14px; color:var(--hub-ok); font-weight:600; }

/* Applications. */
.ighub .igop-sapp {
    background:#fff; border:1px solid var(--hub-line); border-radius:10px;
    padding:14px 16px; margin-bottom:10px;
}
.ighub .igop-sapp-head { display:flex; align-items:flex-start; gap:10px; justify-content:space-between; }
.ighub .igop-sapp-note { font-size:13px; color:var(--hub-body); margin-top:6px; }
.ighub .igop-sapp-evidence { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ighub .igop-evi-item {
    background:#F6F7F9; border:1px solid var(--hub-line-soft); border-radius:7px;
    padding:5px 10px; font-size:12px;
}
.ighub .igop-sapp-foot { margin-top:10px; padding-top:9px; border-top:1px solid var(--hub-line-soft);
    display:flex; gap:12px; align-items:center; font-size:12.5px; }
.ighub .igop-verify { margin-top:11px; padding:11px 13px; border-radius:9px;
    background:#FFFBEB; border:1px solid #FDE68A; }
.ighub .igop-verify-ask { font-size:13px; color:#7c4a06; font-weight:600; }
.ighub .igop-verify-btns { display:flex; gap:8px; margin-top:9px; }

/* My login details. */
.ighub .igop-mycred { padding:4px 16px; }
.ighub .igop-mycred-row {
    display:flex; align-items:center; gap:12px; padding:11px 0;
    border-bottom:1px solid var(--hub-line-soft);
}
.ighub .igop-mycred-row:last-child { border-bottom:0; }
.ighub .igop-mycred-lbl { font-size:12px; color:var(--hub-muted); font-weight:600; min-width:116px; }
.ighub .igop-mycred-val { font-size:14px; font-weight:600; color:var(--hub-ink); word-break:break-all; }
.ighub .igop-mycred-acts { margin-left:auto; display:flex; gap:6px; }

/* The updates drawer tab. */
.ighub .igop-updates-tab {
    background:var(--hub-navy); color:#fff; border-radius:10px 0 0 10px;
    box-shadow:0 8px 24px rgba(14,29,62,.35);
}
.ighub .igop-updates-count { background:#FDB022; color:#1f2937; font-weight:800; }
.ighub .igop-utab.is-active { color:var(--hub-blue); border-bottom-color:var(--hub-blue); font-weight:700; }


/* ═══════════════════════════════════════════════════════════
   UPDATES, AS A SECTION

   On its own page this is a drawer that slides in from the right.
   In the hub it is a section of the rail like any other, so the
   sliding, the fixed position and the shadow are undone and the
   contents are laid out as cards on the canvas. The tabs inside —
   updates, shortlist, logins — keep their own elements, so the
   script that switches between them did not change.
   ═══════════════════════════════════════════════════════════ */

.ighub .igop-updates-panel {
    position:static; width:auto; max-width:none; height:auto;
    transform:none; box-shadow:none; background:transparent;
    z-index:auto; overflow:visible; padding:0;
}
.ighub .igop-updates-tab,
.ighub .igop-updates-backdrop,
.ighub .igop-updates-close { display:none !important; }

/* The top bar already says which section this is, so the drawer's own
   header would be the same sentence twice on the same screen. */
.ighub .igop-updates-head { display:none; }

/* The three tabs, as pills rather than a strip of underlines. */
.ighub .igop-updates-tabs {
    display:flex; flex-wrap:wrap; gap:7px; border:0; margin-bottom:14px;
    background:#fff; border:1px solid var(--hub-line); border-radius:10px; padding:7px;
}
.ighub .igop-utab {
    border:0; background:transparent; border-radius:8px; padding:8px 14px;
    font-family:inherit; font-size:13.5px; font-weight:600; color:var(--hub-body); cursor:pointer;
    display:inline-flex; align-items:center; gap:7px;
}
.ighub .igop-utab:hover { background:#F3F5F8; }
.ighub .igop-utab.is-active { background:#E8F0FE; color:var(--hub-blue); }
.ighub .igop-utab span {
    background:var(--hub-line); color:#3c4043; border-radius:20px;
    padding:1px 7px; font-size:11px; font-weight:800;
}
.ighub .igop-utab.is-active span { background:var(--hub-blue); color:#fff; }

.ighub .igop-updates-body { padding:0; overflow:visible; }
.ighub .igop-updates-body:not(.is-active) { display:none; }

/* ── One update ── */
.ighub .igop-feed-head {
    display:flex; align-items:center; gap:10px; margin-bottom:7px;
}
.ighub .igop-feed-avatar {
    width:30px; height:30px; border-radius:50%; background:var(--hub-navy); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex:0 0 30px;
}
.ighub .igop-feed-when { font-size:12px; color:var(--hub-muted); margin-left:auto; white-space:nowrap; }
.ighub .igop-feed-new {
    background:var(--hub-blue); color:#fff; border-radius:20px; padding:1px 8px;
    font-size:10.5px; font-weight:800; letter-spacing:.03em;
}
.ighub .igop-feed-text { font-size:14px; color:#1f2937; line-height:1.55; }
.ighub .igop-feed-shots { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.ighub .igop-feed-shot {
    border:1px solid var(--hub-line); border-radius:8px; overflow:hidden; background:#fff;
}
.ighub .igop-feed-shot img { display:block; max-height:96px; width:auto; }
.ighub .igop-feed-files { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:12.5px; }

/* Each update is a card on the canvas. */
.ighub .igop-updates-body[data-upanel="updates"] > * {
    background:#fff; border:1px solid var(--hub-line); border-radius:10px;
    padding:14px 16px; margin-bottom:10px;
}
.ighub .igop-updates-body[data-upanel="updates"] > .igop-empty { text-align:center; padding:26px 16px; }

/* ── Shortlist ── */
.ighub .igop-sltally { font-size:13px; color:var(--hub-muted); margin-bottom:10px; }
.ighub .igop-slcard {
    background:#fff; border:1px solid var(--hub-line); border-radius:10px;
    padding:14px 16px; margin-bottom:10px;
}
.ighub .igop-slcard-top { display:flex; align-items:flex-start; gap:10px; justify-content:space-between; }
.ighub .igop-slcard-uni { font-size:13px; color:var(--hub-muted); margin-top:2px; }
.ighub .igop-slcard-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; font-size:12.5px; }
.ighub .igop-slcard-meta > * {
    background:#F6F7F9; border:1px solid var(--hub-line-soft); border-radius:7px; padding:4px 9px;
}
.ighub .igop-slcard-files { margin-top:9px; font-size:12.5px; }

/* ── Logins ── */
.ighub .igop-updates-body[data-upanel="logins"] .igop-mycred {
    background:#fff; border:1px solid var(--hub-line); border-radius:10px; padding:4px 16px;
    margin-bottom:10px;
}
.ighub .igop-mycred-note { font-size:12.5px; color:var(--hub-muted); padding:0 0 12px; }
.ighub .igop-mycred-secret { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ═══════════ MY CV ═══════════ */

/* The stepper across the top. */
.ighub .igop-steps-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.ighub .igop-steps-count { font-size:12px; color:var(--hub-muted); font-weight:600; }
.ighub .igop-steps {
    display:flex; flex-wrap:wrap; gap:6px; background:#fff; border:1px solid var(--hub-line);
    border-radius:10px; padding:10px; margin-bottom:16px;
}
.ighub .igop-steps > .igop-step {
    display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:8px;
    font-size:13px; font-weight:600; color:var(--hub-body); background:transparent; border:0;
    cursor:pointer; font-family:inherit;
}
.ighub .igop-steps > .igop-step:hover { background:#F3F5F8; }
.ighub .igop-steps > .igop-step.is-active { background:#E8F0FE; color:var(--hub-blue); }
.ighub .igop-step-n {
    width:21px; height:21px; border-radius:50%; background:var(--hub-line); color:#3c4043;
    font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 21px;
}
.ighub .igop-steps > .igop-step.is-active .igop-step-n,
.ighub .igop-steps > .igop-step.is-done .igop-step-n { background:var(--hub-blue); color:#fff; }

/* Form fields. */
.ighub .igop-field-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.ighub .igop-field { min-width:0; margin-bottom:2px; }
.ighub .igop-label {
    display:block; font-size:12.5px; font-weight:650; color:#3c4043; margin-bottom:5px; letter-spacing:.005em;
}
.ighub .igop-req-star { color:var(--hub-danger); }
.ighub .igop-input, .ighub .igop-input-sm,
.ighub input[type=text], .ighub input[type=email], .ighub input[type=tel],
.ighub input[type=date], .ighub input[type=number], .ighub input[type=url],
.ighub select, .ighub textarea {
    width:100%; border:1px solid #CED4DA; border-radius:8px; padding:9px 11px;
    font-family:inherit; font-size:14px; color:var(--hub-ink); background:#fff;
}
.ighub .igop-input:focus, .ighub input:focus, .ighub select:focus, .ighub textarea:focus {
    outline:3px solid rgba(26,115,232,.18); outline-offset:0; border-color:var(--hub-blue);
}
.ighub .igop-input-sm { padding:7px 10px; font-size:13px; }

/* Repeating entries — a job, a degree, a test score. */
.ighub .igop-rows { display:grid; gap:10px; }
.ighub .igop-row {
    background:#FCFCFD; border:1px solid var(--hub-line); border-radius:10px; padding:13px 15px;
}
.ighub .igop-row-head {
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
    padding-bottom:9px; border-bottom:1px solid var(--hub-line-soft);
}
.ighub .igop-row-n { font-size:12px; font-weight:700; color:var(--hub-muted); letter-spacing:.06em; text-transform:uppercase; }
.ighub .igop-row-x { margin-left:auto; }
.ighub .igop-row-add { margin-top:10px; }
.ighub .igop-checkbox { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--hub-body); }

/* The bar at the foot of each stage. */
.ighub .igop-cv-foot {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--hub-line); border-radius:10px;
    padding:12px 16px; margin-top:16px; position:sticky; bottom:12px;
    box-shadow:0 6px 20px rgba(16,24,40,.08);
}
.ighub .igop-cv-state { font-size:12.5px; color:var(--hub-muted); }
.ighub .igop-cv-next { margin-left:auto; }

/* ═══════════ DOCUMENTS ═══════════ */

.ighub .igop-header-stats { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--hub-body); }
.ighub .igop-doc-summary-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ighub .igop-prog-bar {
    background:var(--hub-line); border-radius:20px; overflow:hidden; height:8px; margin:10px 0 4px;
}
.ighub .igop-prog-bar > i { background:var(--hub-blue); height:100%; display:block; border-radius:20px; }
.ighub .igop-prog-bar > i.is-ok { background:var(--hub-ok); }
.ighub .igop-prog-lg { height:10px; }

.ighub .igop-sdoc-group { padding:0; overflow:hidden; }
.ighub .igop-sdoc-group-head {
    display:flex; align-items:center; gap:10px; padding:11px 16px;
    background:#FBFCFD; border-bottom:1px solid var(--hub-line-soft);
    font-size:13px; font-weight:700; color:var(--hub-ink);
}
.ighub .igop-sdoc-icon {
    flex:0 0 26px; height:26px; border-radius:50%; background:#F1F3F5; color:#5f6368;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px;
}
/* The glyph alone carried the state. A class on the circle lets the colour
   carry it too, which is what makes a long checklist readable at a glance. */
.ighub .igop-sdoc-icon.is-uploaded { background:var(--hub-ok-bg); color:var(--hub-ok); }
.ighub .igop-sdoc-icon.is-required { background:var(--hub-danger-bg); color:var(--hub-danger); }
.ighub .igop-sdoc-icon.is-optional { background:#fff; color:#9aa0a6; box-shadow:0 0 0 1px var(--hub-line) inset; }
.ighub .igop-sdoc-icon.is-na { background:#F1F3F5; color:#9aa0a6; }
.ighub .igop-sdoc-text strong { font-size:14px; font-weight:650; color:var(--hub-ink); }
.ighub .igop-sdoc-text .igop-tiny { color:var(--hub-muted); }
.ighub .igop-filelist { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; padding:0; list-style:none; }
.ighub .igop-filelist li {
    background:#F6F7F9; border:1px solid var(--hub-line-soft); border-radius:7px;
    padding:5px 10px; font-size:12.5px; display:flex; align-items:center; gap:8px;
}
.ighub .igop-sdoc-input { font-size:13px; }
.ighub .igop-doccheck-detail {
    background:#FFFBEB; border:1px solid #FDE68A; border-radius:9px; padding:11px 13px;
    margin:0 16px 13px; font-size:13px; color:#7c4a06;
}
.ighub .igop-doccheck-acts { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.ighub .igop-format-note { font-size:12.5px; color:var(--hub-muted); margin-top:8px; }


/* ═══════════════════════════════════════════════════════════
   DOCUMENT ROWS, ON ONE LINE

   Each document was a block four lines tall: the name, then the
   status under it, then the file chip under that, with the button
   stranded on the far right and a hand's width of empty page between
   them. A checklist of twenty reads better as twenty lines than as
   twenty paragraphs, so the name, the status, the file and the
   action now sit across the row and use the space that was empty.

   Anything that genuinely needs its own line — a failed automatic
   check, a long "not needed" reason — still takes one, by claiming
   the full width of the row rather than by stacking everything.
   ═══════════════════════════════════════════════════════════ */

.ighub .igop-sdoc {
    display:flex; align-items:center; gap:12px;
    padding:9px 16px; border-bottom:1px solid var(--hub-line-soft);
}
.ighub .igop-sdoc:last-child { border-bottom:0; }
.ighub .igop-sdoc:hover { background:#FCFCFD; }

.ighub .igop-sdoc-info {
    flex:1 1 auto; min-width:0; padding:0;
    display:flex; align-items:center; gap:11px;
}
.ighub .igop-sdoc-icon {
    width:24px; height:24px; flex:0 0 24px; font-size:12px; margin:0;
}

.ighub .igop-sdoc-text {
    display:flex; flex-direction:row; justify-content:flex-start;
    align-items:center; flex-wrap:wrap; gap:4px 14px;
    min-width:0; flex:1 1 auto;
}
.ighub .igop-sdoc-text > strong {
    display:inline-block; margin:0; font-size:13.5px; font-weight:650; line-height:1.4;
    min-width:0; overflow-wrap:anywhere;
}
.ighub .igop-sdoc-text > span { font-size:11.5px; line-height:1.4; }

/* The file sits at the end of the line, next to the button that replaces it. */
.ighub .igop-filelist { margin:0; margin-left:auto; flex:0 0 auto; }
.ighub .igop-filelist li { padding:3px 9px; font-size:11.5px; gap:7px; }

.ighub .igop-sdoc-actions { padding:0; flex:0 0 auto; display:flex; gap:8px; align-items:center; }

/* These take the whole width, under the line they belong to. */
.ighub .igop-doccheck,
.ighub .igop-doccheck-detail { flex:1 1 100%; margin:6px 0 0; }
.ighub .igop-doccheck-detail { margin-left:0; margin-right:0; }

@media (max-width:760px) {
    .ighub .igop-sdoc { flex-wrap:wrap; }
    .ighub .igop-filelist { margin-left:35px; }
    .ighub .igop-sdoc-actions { margin-left:auto; }
}

/* ── The rail's own scrollbar ──
   On a short window the menu scrolls, and the browser's default bar is a pale
   strip down the inside edge of the navy — which reads as a seam in the panel.
   ── */
.ighub-rail { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
.ighub-rail::-webkit-scrollbar { width:6px; }
.ighub-rail::-webkit-scrollbar-track { background:transparent; }
.ighub-rail::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:6px; }

/* ── Alerts, everywhere ── */
.ighub .igop-alert { border-radius:9px; padding:11px 14px; font-size:13.5px; border:1px solid; }
.ighub .igop-alert-info { background:#E8F0FE; border-color:#C6DAFC; color:#174EA6; }
.ighub .igop-alert-warn { background:#FFFBEB; border-color:#FDE68A; color:#7c4a06; }

/* ── The back links at the foot of each screen are the rail's job now ── */
.ighub .igop-back-link { display:none; }

@media (max-width:640px) {
    .ighub .igop-status-facts { grid-template-columns:1fr 1fr; }
    .ighub .igop-cv-foot { position:static; }
    .ighub .igop-mycred-row { flex-wrap:wrap; }
    .ighub .igop-mycred-acts { margin-left:0; }
}

@media print {
    .ighub-rail, .ighub-top, .ighub-scrim { display:none !important; }
    .ighub { border:0; background:#fff; }
    .ighub-panel { display:block !important; }
}

/* ═══════════════════════════════════════════════════════════
   SIGNING IN

   The same navy the loading screen uses, so arriving at the
   dashboard logged out looks like part of the product rather
   than an error page. One card: who we are on the left, the
   form on the right, and on a phone the two stack with the
   brand half shrinking to its lockup and headline.
   ═══════════════════════════════════════════════════════════ */

.ighub-signin {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:40px 20px;
    background:radial-gradient(1100px 620px at 18% 8%, #1b3366 0%, #0E1D3E 58%);
    /* .igop gives every screen a grey panel with rounded corners. This one is
       the whole window, so both come off. */
    border-radius:0; border:0;
    font-family:'Public Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:15px; line-height:1.55; color:var(--hub-ink);

    /* Out of the theme's column, like the dashboard itself. */
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    -webkit-font-smoothing:antialiased;
}
.ighub-signin *, .ighub-signin *::before, .ighub-signin *::after { box-sizing:border-box; }

.ighub-signin-card {
    display:grid; grid-template-columns:1.05fr 1fr;
    width:100%; max-width:940px; background:#fff;
    border-radius:18px; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}

/* ── Who we are ── */
.ighub-signin-brand {
    background:linear-gradient(160deg,#16294f 0%,#0E1D3E 100%);
    color:#fff; padding:38px 36px; display:flex; flex-direction:column; gap:20px;
}
.ighub-signin-lockup { display:flex; align-items:center; gap:11px; }
.ighub-signin-mark {
    flex:0 0 40px; height:40px; border-radius:11px;
    background:linear-gradient(135deg,#1A73E8,#4f9bff);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:15px; color:#fff; letter-spacing:.02em;
}
.ighub-signin-name { display:block; font-weight:800; font-size:15px; line-height:1.2; }
.ighub-signin-sub {
    display:block; font-size:10.5px; font-weight:700; letter-spacing:.11em;
    text-transform:uppercase; color:rgba(255,255,255,.55);
}
.ighub-signin-brand h1 {
    margin:0; font-size:27px; line-height:1.25; font-weight:700; color:#fff; letter-spacing:-.01em;
}
.ighub-signin-points { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ighub-signin-points li {
    position:relative; padding-left:28px; font-size:14px; line-height:1.5;
    color:rgba(255,255,255,.82);
}
.ighub-signin-points li::before {
    content:'\2713'; position:absolute; left:0; top:1px;
    width:19px; height:19px; border-radius:50%;
    background:rgba(26,115,232,.25); color:#8ab4f8;
    font-size:11px; font-weight:800; text-align:center; line-height:19px;
}
.ighub-signin-foot {
    margin:auto 0 0; font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.5;
}

/* ── The form ── */
.ighub-signin-form {
    padding:38px 36px; display:flex; flex-direction:column; justify-content:center;
}
.ighub-signin-form h2 {
    margin:0 0 4px; font-size:22px; font-weight:700; color:var(--hub-ink); letter-spacing:-.01em;
}
.ighub-signin-form .igop-muted { color:var(--hub-muted); margin:0 0 20px; }
.ighub-signin-form .igop-label {
    display:block; font-size:12.5px; font-weight:650; color:#3c4043; margin:0 0 6px;
}
.ighub-signin-form .igop-input {
    width:100%; border:1px solid #CED4DA; border-radius:9px; padding:11px 13px;
    font-family:inherit; font-size:14.5px; color:var(--hub-ink); background:#fff; margin-bottom:16px;
}
.ighub-signin-form .igop-input:focus {
    outline:3px solid rgba(26,115,232,.18); border-color:var(--hub-blue);
}
.ighub-signin-row {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:-4px 0 20px; font-size:13px; flex-wrap:wrap;
}
.ighub-signin-row .igop-check { display:inline-flex; align-items:center; gap:8px; color:var(--hub-body); }
.ighub-signin-row .igop-check input { accent-color:var(--hub-blue); width:15px; height:15px; margin:0; }
.ighub-signin-row .igop-link { color:var(--hub-blue); font-weight:600; font-size:13px; }

.ighub-signin .ighub-signin-go {
    width:100%; justify-content:center; text-align:center;
    background:var(--hub-blue); border:1px solid var(--hub-blue); color:#fff;
    border-radius:9px; padding:12px 16px; font-size:15px; font-weight:700;
    font-family:inherit; cursor:pointer;
}
.ighub-signin .ighub-signin-go:hover { background:var(--hub-blue-dark); border-color:var(--hub-blue-dark); }
.ighub-signin .ighub-signin-go[disabled] { opacity:.7; cursor:progress; }

.ighub-signin-new {
    margin:20px 0 0; text-align:center; font-size:13.5px; color:var(--hub-muted);
    border-top:1px solid var(--hub-line-soft); padding-top:18px;
}
.ighub-signin-new a { color:var(--hub-blue); font-weight:700; text-decoration:none; }
.ighub-signin-new a:hover { text-decoration:underline; }

@media (max-width:820px) {
    .ighub-signin { padding:24px 14px; align-items:flex-start; }
    .ighub-signin-card { grid-template-columns:1fr; max-width:460px; }
    .ighub-signin-brand { padding:26px 24px 24px; gap:16px; }
    .ighub-signin-brand h1 { font-size:22px; }
    .ighub-signin-points { display:none; }      /* the headline carries it on a phone */
    .ighub-signin-foot { display:none; }
    .ighub-signin-form { padding:26px 24px 28px; }
}

/* ── the profile header, on the hub ──
   The top bar above already says "My CV" and why it matters, so the screen's
   own heading repeated it one line below. The row itself stays — the
   completeness chip and the CV download live in it — it just stops saying the
   same thing twice. On the stand-alone profile page there is no top bar, so
   the heading is still needed there and is left alone. */
.ighub .igop-cv-top-head { display:none; }
.ighub .igop-cv-top { justify-content:flex-end; align-items:center; margin-bottom:14px; }