/* ==========================================================================
   Student Portal — 2026 redesign
   Mobile-first. Loaded LAST so it overrides the legacy office*.css rules.

   Design language deliberately matches the public site (web/index.php):
   Poppins + the ug-blue / ug-dark / ug-light palette, so signing in no
   longer drops the student into a different-looking product.
   ========================================================================== */

:root {
    --ug-blue: #2483e2;
    --ug-blue-dark: #1b6cbd;
    --ug-dark: #1a365d;
    --ug-light: #e6f3ff;

    --ink: #14202e;
    --ink-2: #46586e;
    --ink-3: #7a8798;

    --surface: #ffffff;
    --canvas: #f4f7fb;
    --line: #e3e9f0;

    --ok: #12805c;
    --ok-bg: #e7f7f0;
    --warn: #9a5b00;
    --warn-bg: #fff4e0;
    --bad: #c02626;
    --bad-bg: #fdecec;

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;

    --shadow: 0 1px 2px rgba(16, 33, 54, .05), 0 6px 20px rgba(16, 33, 54, .06);
    --shadow-lg: 0 10px 40px rgba(16, 33, 54, .12);

    --header-h: 60px;
    --sidebar-w: 252px;
}

/* ---------- reset / base ------------------------------------------------ */

body.portal {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

.portal a { color: var(--ug-blue); text-decoration: none; }
.portal a:hover { text-decoration: underline; }

.portal h1, .portal h2, .portal h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

/* Accessible focus ring — the old portal had none at all. */
.portal a:focus-visible,
.portal button:focus-visible,
.portal input:focus-visible,
.portal select:focus-visible,
.portal textarea:focus-visible {
    outline: 2px solid var(--ug-blue);
    outline-offset: 2px;
}

/* ---------- legacy JS hooks --------------------------------------------
   These class names are toggled imperatively by workarea.ctrl / booking.ctrl
   (jQuery .show()/.hide()/.slideDown()). They used to be defined in
   common.css, which the redesign no longer loads, so they are redeclared
   here. Renaming them would mean rewriting the controllers, which is out of
   scope for a visual redesign. */

.hide { display: none; }

/* .ng-view starts empty before the first route resolves; give it a floor so
   the footer/scrim do not jump */
.ng-view { min-height: 60vh; }
/* ---------- app shell --------------------------------------------------- */

.pt-shell { min-height: 100vh; }

.pt-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    z-index: 60;
}

.pt-logo { display: flex; align-items: center; }
.pt-logo img { height: 34px; width: auto; display: block; }

.pt-header-spacer { flex: 1 1 auto; }

/* Hamburger — visible only on small screens */
.pt-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px minimum touch target */
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    flex: 0 0 auto;
}
.pt-burger:hover { background: var(--ug-light); }

/* Identity chip in the header */
.pt-who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    max-width: 62vw;
}
.pt-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ug-light);
    color: var(--ug-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    flex: 0 0 auto;
    overflow: hidden;
}
.pt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-who-text { min-width: 0; line-height: 1.2; }
.pt-who-name {
    font-size: 13px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-who-id { font-size: 11px; color: var(--ink-3); }

/* ---------- sidebar ----------------------------------------------------- */

.pt-sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    padding: 14px 12px 24px;
    overflow-y: auto;
    z-index: 55;
    transform: translateX(-100%);
    transition: transform .22s ease;
    -webkit-overflow-scrolling: touch;
}
.pt-sidebar.is-open { transform: translateX(0); }

.pt-scrim {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(16, 33, 54, .45);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.pt-scrim.is-open { opacity: 1; pointer-events: auto; }

.pt-nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-3);
    font-weight: 600;
    padding: 10px 12px 6px;
}

.pt-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: 2px;
    /* 44px min touch target */
    min-height: 44px;
}
.pt-nav a:hover { background: var(--ug-light); color: var(--ug-dark); text-decoration: none; }
.pt-nav a.active { background: var(--ug-light); color: var(--ug-blue); font-weight: 600; }
.pt-nav a i { width: 18px; text-align: center; font-size: 15px; flex: 0 0 auto; }

.pt-nav a.is-danger { color: var(--bad); }
.pt-nav a.is-danger:hover { background: var(--bad-bg); color: var(--bad); }

.pt-nav-sep { height: 1px; background: var(--line); margin: 10px 12px; }

/* ---------- work area --------------------------------------------------- */

.pt-main {
    padding-top: var(--header-h);
    min-height: 100vh;
}
.pt-work {
    padding: 18px 14px 56px;
    max-width: 1180px;
    margin: 0 auto;
}

.pt-page-title {
    font-size: 21px;
    font-weight: 600;
    color: var(--ug-dark);
    margin: 2px 0 4px;
}
.pt-page-sub {
    font-size: 13.5px;
    color: var(--ink-3);
    margin-bottom: 18px;
}

/* ---------- cards ------------------------------------------------------- */

.pt-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.pt-card-head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pt-card-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.pt-card-note { font-size: 13px; color: var(--ink-3); width: 100%; }
.pt-card-body { padding: 18px; }
.pt-card-body > *:last-child { margin-bottom: 0; }

/* gap spaces the cards INSIDE the grid, but the grid itself is a plain block
   with no bottom margin - so a grid of cards sat flush against whatever card
   followed it (the dashboard's "Next steps" grid against "Quick actions").
   Matches .pt-card's own 16px so the rhythm is the same whether a card is in
   a grid or standing alone. */
.pt-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
.pt-grid:last-child { margin-bottom: 0; }
@media (min-width: 860px) { .pt-grid.cols-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- status / callouts ------------------------------------------- */

.pt-callout {
    display: flex;
    gap: 13px;
    padding: 16px 18px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface);
    margin-bottom: 16px;
}
.pt-callout i { font-size: 19px; flex: 0 0 auto; margin-top: 2px; }
.pt-callout-title { font-weight: 600; margin-bottom: 3px; }
.pt-callout-text { font-size: 14px; color: var(--ink-2); }
.pt-callout-text p { margin: 0 0 8px; }
.pt-callout-text > *:last-child { margin-bottom: 0; }

.pt-callout.is-ok { background: var(--ok-bg); border-color: #bfe6d5; }
.pt-callout.is-ok i, .pt-callout.is-ok .pt-callout-title { color: var(--ok); }
.pt-callout.is-warn { background: var(--warn-bg); border-color: #f3ddb0; }
.pt-callout.is-warn i, .pt-callout.is-warn .pt-callout-title { color: var(--warn); }
.pt-callout.is-info { background: var(--ug-light); border-color: #c4e0f8; }
.pt-callout.is-info i, .pt-callout.is-info .pt-callout-title { color: var(--ug-dark); }

/* Status pills — replaces the bare numbers/words in tables */
.pt-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: #eef2f7;
    color: var(--ink-2);
}
.pt-pill.ok { background: var(--ok-bg); color: var(--ok); }
.pt-pill.warn { background: var(--warn-bg); color: var(--warn); }
.pt-pill.bad { background: var(--bad-bg); color: var(--bad); }
.pt-pill.info { background: var(--ug-light); color: var(--ug-dark); }

/* ---------- key/value + stats ------------------------------------------- */

.pt-kv { display: grid; gap: 2px 20px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pt-kv { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .pt-kv { grid-template-columns: 1fr 1fr 1fr; } }

.pt-kv-item { padding: 11px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pt-kv-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.pt-kv-v { font-size: 14.5px; color: var(--ink); word-break: break-word; }
.pt-kv-v:empty::after { content: '—'; color: var(--ink-3); }

.pt-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.pt-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ug-light);
    color: var(--ug-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}
.pt-stat-n { font-size: 22px; font-weight: 700; color: var(--ug-dark); line-height: 1.15; }
.pt-stat-l { font-size: 12.5px; color: var(--ink-3); }

/* ---------- room summary ------------------------------------------------ */

.pt-room {
    background: linear-gradient(135deg, var(--ug-dark), #24507f);
    color: #fff;
    border-radius: var(--r);
    padding: 20px;
    /* content sits at the top; the card may be stretched taller than its
       content by the grid when the neighbouring card is longer */
    align-self: start;
}
.pt-room-no { font-size: 30px; font-weight: 700; line-height: 1.1; }
.pt-room-sub { font-size: 13.5px; opacity: .85; margin-bottom: 16px; }
.pt-room-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pt-room-k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.pt-room-v { font-size: 14.5px; font-weight: 600; }

/* ---------- buttons ----------------------------------------------------- */

.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--ug-blue);
    color: #fff;
    transition: background .15s ease, opacity .15s ease;
    text-align: center;
}
/* `.portal a` above sets link blue, and it has the same specificity as
   `.pt-btn` while appearing earlier - so an <a class="pt-btn"> lost its white
   text and rendered blue-on-green, about 1.3:1 contrast and effectively
   unreadable ("Select my bed" on the dashboard). Naming the element here
   raises specificity above the bare `.portal a` rule for every anchor styled
   as a button, present and future. */
a.pt-btn,
a.pt-btn:hover,
a.pt-btn:focus { color: #fff; text-decoration: none; }
.pt-btn:hover { background: var(--ug-blue-dark); color: #fff; text-decoration: none; }
.pt-btn:disabled { opacity: .55; cursor: not-allowed; }

/* the secondary variant is deliberately dark text on a light ground, so it
   must opt out of the white above */
a.pt-btn.secondary,
a.pt-btn.secondary:hover,
a.pt-btn.secondary:focus { color: var(--ink); }

.pt-btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pt-btn.secondary:hover { background: var(--canvas); color: var(--ink); }
.pt-btn.success { background: var(--ok); }
.pt-btn.success:hover { background: #0d6a4c; }
.pt-btn.small { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
.pt-btn.block { width: 100%; }

/* Quick-action tiles on the dashboard */
.pt-actions { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .pt-actions { grid-template-columns: 1fr 1fr; } }

.pt-action {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    min-height: 44px;
}
.pt-action:hover { border-color: var(--ug-blue); background: var(--ug-light); text-decoration: none; color: var(--ink); }
.pt-action i { color: var(--ug-blue); font-size: 17px; width: 22px; text-align: center; flex: 0 0 auto; }
.pt-action-t { font-size: 14.5px; font-weight: 600; }
.pt-action-d { font-size: 12.5px; color: var(--ink-3); }

/* ---------- forms ------------------------------------------------------- */

.pt-form { max-width: 620px; }
.pt-field { margin-bottom: 17px; }
.pt-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.pt-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

.pt-input,
.pt-select,
.pt-textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #cfd8e3;
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    /* 16px prevents iOS Safari zooming the page on focus */
    font-size: 16px;
    line-height: 1.45;
    appearance: none;
    -webkit-appearance: none;
}
.pt-textarea { min-height: 110px; resize: vertical; }
.pt-input:focus,
.pt-select:focus,
.pt-textarea:focus { border-color: var(--ug-blue); box-shadow: 0 0 0 3px rgba(36, 131, 226, .15); }

.pt-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2346586e'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 17px;
    padding-right: 36px;
}

/* Filter bar: stacks on mobile, inline from tablet up */
.pt-filters { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 720px) { .pt-filters.c3 { grid-template-columns: 1fr 1fr 1fr auto; } }
@media (min-width: 720px) { .pt-filters.c2 { grid-template-columns: 1fr 1fr auto; } }
.pt-filters .pt-field { margin-bottom: 0; }

/* ---------- feedback messages ------------------------------------------- */

.pt-msg { padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; }
.pt-msg.success { background: var(--ok-bg); color: var(--ok); border-color: #bfe6d5; }
.pt-msg.failed { background: var(--bad-bg); color: var(--bad); border-color: #f5c9c9; }

/* Inline busy state for forms */
.pt-busy {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border-radius: var(--r);
    z-index: 5;
    font-size: 13.5px;
    color: var(--ink-2);
}
.pt-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--ug-light);
    border-top-color: var(--ug-blue);
    border-radius: 50%;
    animation: pt-spin .7s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pt-spinner { animation: none; }
    .pt-sidebar, .pt-scrim { transition: none; }
}

/* ---------- data: cards on mobile, table on desktop --------------------- */

/* The legacy .responsive-table put overflow-x on the <table> element, where
   it has no effect — that is why every table blew past the viewport on a
   phone. Below 720px we render each row as a stacked card instead, so there
   is no horizontal scrolling at all. */

.pt-rows { display: grid; gap: 12px; }

.pt-row {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 15px 16px;
}
.pt-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    flex-wrap: wrap;
}
.pt-row-title { font-size: 16px; font-weight: 600; color: var(--ug-dark); }
.pt-row-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin-bottom: 13px; }
.pt-row-k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
/* the "incl. JCR dues" hint under a price - room fees are always quoted with
   the mandatory JCR dues already added, so the breakdown is shown here */
.pt-row-note { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pt-row-v { font-size: 14px; color: var(--ink); word-break: break-word; }

.pt-empty { text-align: center; padding: 34px 18px; color: var(--ink-3); }
.pt-empty i { font-size: 30px; color: #c6d2e0; display: block; margin-bottom: 11px; }
.pt-empty-t { font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.pt-empty-d { font-size: 13.5px; }

/* Desktop table */
.pt-table-wrap { display: none; overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pt-table th {
    text-align: left;
    padding: 11px 13px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.pt-table td { padding: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pt-table tbody tr:last-child td { border-bottom: 0; }
.pt-table tbody tr:hover { background: #fafcfe; }

@media (min-width: 720px) {
    .pt-table-wrap { display: block; }
    .pt-rows { display: none; }
}

/* Long result lists scroll with the page rather than inside a nested box.
   A fixed-height inner scroller traps touch scrolling on mobile and hides
   how many results there are, so it is only applied from tablet up. */
.pt-scroll { -webkit-overflow-scrolling: touch; }
@media (min-width: 1024px) {
    .pt-scroll { max-height: 620px; overflow-y: auto; }
}

/* ---------- profile ----------------------------------------------------- */

/* Two per row on a phone, fixed width once there is space */
.pt-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 620px) {
    .pt-photos { display: flex; flex-wrap: wrap; }
    .pt-photo { width: 168px; }
}
.pt-photo {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--canvas);
}
.pt-photo img { width: 100%; height: 158px; object-fit: cover; display: block; }
.pt-photo-c { padding: 7px 10px; font-size: 11.5px; color: var(--ink-3); text-align: center; }

/* ---------- prose (instructions pages) ---------------------------------- */

.pt-prose { font-size: 14.5px; color: var(--ink-2); }
.pt-prose p { margin: 0 0 13px; }
.pt-prose ol { margin: 0; padding-left: 20px; }
.pt-prose ol li { margin-bottom: 13px; padding-left: 4px; }
.pt-prose strong { color: var(--ink); font-weight: 600; }

.pt-paybox {
    background: var(--ug-light);
    border: 1px solid #c4e0f8;
    border-radius: var(--r);
    padding: 16px 18px;
    margin: 16px 0;
}
.pt-paybox-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ug-dark); font-weight: 600; }
.pt-paybox-v { font-size: 18px; font-weight: 700; color: var(--ug-dark); word-break: break-all; }
.pt-paybox-d { font-size: 12.5px; color: var(--ink-2); }
.pt-paybox-row + .pt-paybox-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid #c4e0f8; }

/* ---------- desktop: permanent sidebar ---------------------------------- */

@media (min-width: 1024px) {
    .pt-burger { display: none; }
    /* position:fixed with top/bottom already pins it to the viewport for the
       full scroll, so it never stops short on a long page */
    .pt-sidebar { transform: translateX(0); }
    .pt-scrim { display: none; }
    .pt-main { padding-left: var(--sidebar-w); }
    .pt-work { padding: 26px 30px 60px; }
    .pt-page-title { font-size: 25px; }
}

/* ---------- third-party overrides --------------------------------------- */

/* Dropify inside the new form styling */
.portal .dropify-wrapper { border-radius: var(--r-sm); border-color: #cfd8e3; font-family: inherit; }

/* angular-confirm modal — keep it readable and inside the viewport */
.portal .ng-confirm .ng-confirm-box { border-radius: var(--r); font-family: inherit; }
.c-small { width: min(430px, 94vw); margin-left: auto; margin-right: auto; }

/* Loading bar colour */
#loading-bar .bar { background: var(--ug-blue); }

/* ---------- staff impersonation banner ----------------------------------
   Shown only while a staff member is signed in as a student. It is deliberately
   loud and cannot be dismissed: the whole feature depends on staff never
   forgetting whose account they are acting in.

   The bar is fixed above the header, and the body class shifts everything else
   that is pinned to the top down by its height, so nothing is overlapped. */
:root { --imp-h: 44px; }

.pt-imp {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--imp-h);
    z-index: 80;                       /* header 60, sidebar 55, scrim 50 */
    background: #b3261e;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.pt-imp-text { flex: 1 1 auto; line-height: 1.35; }
.pt-imp-end {
    flex: 0 0 auto;
    background: #fff;
    color: #b3261e;
    border: 0;
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.pt-imp-end:hover { background: #f3f3f3; }

body.is-impersonating .pt-header  { top: var(--imp-h); }
body.is-impersonating .pt-sidebar { top: calc(var(--header-h) + var(--imp-h)); }
body.is-impersonating .pt-scrim   { inset: calc(var(--header-h) + var(--imp-h)) 0 0 0; }
body.is-impersonating .pt-main    { padding-top: calc(var(--header-h) + var(--imp-h)); }

/* On a narrow screen the bar wraps rather than squashing the button off-screen */
@media (max-width: 560px) {
    :root { --imp-h: 62px; }
    .pt-imp { flex-wrap: wrap; gap: 6px; padding: 6px 12px; align-content: center; }
    .pt-imp-text { flex: 1 1 100%; font-size: 12px; }
    .pt-imp-end { padding: 5px 10px; font-size: 12px; }
}

/* A printed page must never look like the student produced it themselves */
@media print {
    .pt-imp { position: static; display: flex !important; }
}