/*
 * MacGeorge LMS — Brand Styles
 * Matches www.macgeorge.co.nz (Ghost Source theme)
 * Applied to all custom Jinja pages (login, error pages, etc.)
 */

/* ── Fonts ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ── Design tokens (matching Ghost Source theme exactly) ─────────────────── */

:root {
    --color-white: #fff;
    --color-black: #000;
    --color-darker-gray: #15171a;
    --color-dark-gray: #444;
    --color-mid-gray: #ccc;
    --color-light-gray: #e6e6e6;
    --color-lighter-gray: rgba(0, 0, 0, .05);
    --color-primary-text: var(--color-darker-gray);
    --color-secondary-text: rgba(0, 0, 0, .55);
    --color-border: rgba(0, 0, 0, .08);
    --color-dark-border: rgba(0, 0, 0, .55);
    --color-brand: #0050a3;

    --container-width: 1320px;
    --container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'EB Garamond', Georgia, Times, serif;
    --font-mono: 'JetBrains Mono', Menlo, Consolas, Monaco, monospace;
}

/* ── Base reset ──────────────────────────────────────────────────────────── */

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

html {
    font-size: 62.5%;
}

body.mg-page {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--color-primary-text);
    background: var(--color-white);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* ── Layout container ────────────────────────────────────────────────────── */

.mg-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-gap);
}

/* ── Site header ─────────────────────────────────────────────────────────── */

.mg-header {
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
}

.mg-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mg-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-primary-text);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -0.02em;
}

.mg-logo img {
    height: 32px;
    width: auto;
}

/* ── Site footer ─────────────────────────────────────────────────────────── */

.mg-footer {
    border-top: 1px solid var(--color-border);
    padding: 32px 0;
    margin-top: auto;
    color: var(--color-secondary-text);
    font-size: 1.4rem;
}

.mg-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mg-footer a {
    color: var(--color-secondary-text);
    text-decoration: none;
}

.mg-footer a:hover {
    color: var(--color-primary-text);
}

/* ── Page wrapper (header + content + footer) ────────────────────────────── */

.mg-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mg-page-content {
    flex: 1;
    padding: 64px 0;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

.mg-page h1, .mg-page h2, .mg-page h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary-text);
    letter-spacing: -0.02em;
}

.mg-page h1 { font-size: clamp(3.2rem, 4vw, 4.8rem); }
.mg-page h2 { font-size: clamp(2.4rem, 3vw, 3.2rem); }
.mg-page h3 { font-size: 2rem; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.mg-form-group {
    margin-bottom: 24px;
}

.mg-label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-primary-text);
    margin-bottom: 8px;
}

.mg-input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    color: var(--color-primary-text);
    background: var(--color-white);
    border: 1px solid var(--color-dark-border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

.mg-input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(0, 80, 163, 0.12);
}

.mg-input::placeholder {
    color: var(--color-mid-gray);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.mg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, background 0.2s;
    width: 100%;
}

.mg-btn-primary {
    background: var(--color-brand);
    color: var(--color-white);
}

.mg-btn-primary:hover {
    opacity: 0.88;
}

.mg-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Alerts / messages ───────────────────────────────────────────────────── */

.mg-alert {
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.mg-alert-success {
    background: #f0f9f0;
    color: #1a6e1a;
    border: 1px solid #b7dfb7;
}

.mg-alert-error {
    background: #fdf2f2;
    color: #9b1c1c;
    border: 1px solid #f5c6c6;
}

/* ── Centered card layout (used by login page) ───────────────────────────── */

.mg-card-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px var(--container-gap);
}

.mg-card {
    width: 100%;
    max-width: 480px;
}

.mg-card-header {
    text-align: center;
    margin-bottom: 40px;
}

.mg-card-header h1 {
    font-size: 2.8rem;
    margin: 16px 0 8px;
}

.mg-card-header p {
    color: var(--color-secondary-text);
    font-size: 1.6rem;
    margin: 0;
}

/* ── Demo mode popup ─────────────────────────────────────────────────── */
#demo-mode-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#demo-mode-modal.dm-open {
    display: flex;
}

#demo-mode-modal .dm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

#demo-mode-modal .dm-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    padding: 32px 32px 24px;
    max-width: 480px;
    width: calc(100% - 32px);
    animation: dm-pop 0.18s ease-out;
}

@keyframes dm-pop {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

#demo-mode-modal .dm-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: 0;
    font-size: 2.6rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
}

#demo-mode-modal .dm-close:hover { color: #475569; }

#demo-mode-modal .dm-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}

#demo-mode-modal .dm-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
}

#demo-mode-modal .dm-body {
    font-size: 1.5rem;
    line-height: 1.55;
    color: #334155;
    margin-bottom: 22px;
}

#demo-mode-modal .dm-body p { margin: 0 0 10px; }
#demo-mode-modal .dm-body p:last-child { margin-bottom: 0; }

#demo-mode-modal .dm-actions {
    display: flex;
    justify-content: flex-end;
}

#demo-mode-modal .dm-got-it {
    background: #0f172a;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 26px;
    font-size: 1.45rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

#demo-mode-modal .dm-got-it:hover { background: #1e293b; }
#demo-mode-modal .dm-got-it:focus { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Subtle ring on demo-wrapped elements */
.dm-wrapped { position: relative; }
.dm-wrapped::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px dashed rgba(245, 158, 11, 0.45);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.dm-wrapped:hover::after { opacity: 1; }

/* ── Portal shell ────────────────────────────────────────────────────────── */
/* The Knowledge Sharing System header and tab bar, shared by every page in the
   portal family. Rendered from templates/includes/portal_header.html — a page
   that needs this furniture calls that macro rather than copying the markup,
   so the logo, the tagline and the tab rule can only ever move together. */

.pb-header {
    /* The logo's height, published so header furniture that has to match it —
       the portal's profile circle — cannot drift out of step at a breakpoint. */
    --pb-logo-size: 72px;
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
    margin-bottom: 32px;
}
.pb-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--container-gap);
}
/* The header lines up with the column beneath it, whatever width that page runs at */
.pb-header-inner--narrow { max-width: 680px; }
.pb-header-inner--wide   { max-width: 1040px; }

.pb-header-left  { display: flex; align-items: center; gap: 14px; }
.pb-header-tools { display: flex; align-items: center; gap: 16px; }
.pb-logo { display: block; line-height: 0; text-decoration: none; }
.pb-logo-img { height: var(--pb-logo-size); width: auto; display: block; }
.pb-logo-tagline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.92rem;
    color: var(--color-primary-text);
    line-height: 1.2;
}
.pb-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-top: 4px;
}
.pb-header-right-title { font-size: 1.6rem; font-weight: 700; color: var(--color-primary-text); line-height: 1.2; }
.pb-header-right-sub   { font-size: 1.1rem; color: var(--color-secondary-text); margin-top: 2px; }

@media (max-width: 640px) {
    .pb-header { --pb-logo-size: 52px; }
    .pb-logo-tagline { font-size: 1.3rem; }
    .pb-header-right { align-items: flex-start; text-align: left; }
}

/* ── Portal tabs ─────────────────────────────────────────────────────────── */
/* Underline tabs. `button` for a panel on this page, `a.sp-tab-link` for a tab
   that leaves it — the two read the same, which is the point. */

.sp-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 28px;
}
.sp-tab {
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 10px 22px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-secondary-text);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sp-tab:hover { color: var(--color-primary-text); }
.sp-tab.active {
    color: var(--color-brand, #2490ef);
    border-bottom-color: var(--color-brand, #2490ef);
}
.sp-tab-link { text-decoration: none; display: inline-block; }
/* Tabs only staff and the client team see sit after a rule, in plum, so
   nobody mistakes them for something participants can see too. */
.sp-tab-divider {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 2rem;
    margin: 0 10px;
    background: #9ca3af;
}
.sp-tab.sp-tab-delivery { color: #7c3aed; }
.sp-tab.sp-tab-delivery:hover { color: #5b21b6; }
.sp-tab.sp-tab-delivery.active { color: #7c3aed; border-bottom-color: #7c3aed; }

/* ── "Which view am I in" strip ──────────────────────────────────────────── */
/* The amber says the same thing everywhere: you are standing somewhere other
   than your own default. Shared by the portal and the Compact Creator, so the
   toggle cannot look like two different controls on two pages. Anchors and
   buttons are both accepted — the portal rewrites the URL in JS, the Compact
   Creator just links. */

.sp-preview-banner {
    background: #fff8e1;
    border: 2px solid #f59e0b;
    border-radius: 6px;
    margin-bottom: 24px;
    padding: 10px 16px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: #92400e;
}
.sp-staff-strip { display: flex; align-items: center; gap: 16px; text-align: left; }
.sp-strip-text { flex: 1; }
.sp-view-toggle {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid #d9a441;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.sp-view-toggle button, .sp-view-toggle a {
    font-family: inherit; font-size: 1.2rem; font-weight: 700; padding: 6px 16px;
    border: 0; background: transparent; color: #92400e; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.sp-view-toggle button:hover, .sp-view-toggle a:hover { background: #fdf1d6; }
.sp-view-toggle button.active, .sp-view-toggle a.active { background: #92400e; color: #fff; cursor: default; }

/* ── Responsive: phone, tablet, laptop; portrait and landscape ───────────── */
/*
   Which device someone is on is inferred from what the browser can actually
   see, never from the User-Agent. A UA string cannot tell a tablet held
   sideways from one held upright, cannot see a phone in split screen, and
   cannot see a desktop window dragged narrow — all three of which happen in a
   room of 35 people, and all three of which these queries handle.

     <= 480px   small phone, portrait
     <= 640px   phone portrait — where rows become cards
     <= 900px   phone landscape and tablet portrait — two columns, not four
     <= 1200px  tablet landscape and small laptops — desktop layout, tightened

   Two of the questions are not about width at all:

     (orientation: landscape) and (max-height: 560px)
        a phone on its side: plenty of width, almost no height. Vertical
        furniture — header, tab rule, section gaps — has to give way, or the
        content it frames is left with nothing.

     (pointer: coarse)
        a finger, not a mouse. 44px targets, which is the one thing a hover
        design gets wrong that a person actually feels.

   Page-specific layout keeps its own breakpoints, in the page. What lives here
   is only what every portal page shares: the header, the tab bar and the view
   strip. */

/* Nothing may push the page sideways — one overflowing table used to take the
   whole document with it. */
body.mg-page { overflow-x: hidden; }

/* The tab bar scrolls rather than wraps: a wrapped second row of tabs reads as
   a second navigation, and the row silently changes height as tabs come and go.
   The container's rule becomes an inset shadow so the active tab's underline
   can sit on it without overflowing a scroll box that would clip it. */
@media (max-width: 900px) {
    .sp-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 0;
        box-shadow: inset 0 -2px 0 var(--color-border);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
    }
    .sp-tabs::-webkit-scrollbar { display: none; }
    .sp-tab {
        flex: 0 0 auto;
        padding: 10px 14px;
        margin-bottom: 0;
    }
}

/* Header: the title stops hugging the right edge once it sits under the logo
   rather than beside it, because a right-aligned line with nothing to its
   right just reads as broken. */
@media (max-width: 640px) {
    .pb-header { padding: 14px 0; margin-bottom: 20px; }
    .pb-header-inner { gap: 10px; }
    .pb-header-tools { width: 100%; justify-content: space-between; }
    .pb-header-right-title { font-size: 1.45rem; }
    .sp-staff-strip { flex-wrap: wrap; gap: 10px; }
    .sp-view-toggle { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .pb-header { --pb-logo-size: 44px; }
    .pb-logo-tagline { font-size: 1.15rem; }
    .sp-preview-banner { font-size: 1.2rem; padding: 8px 12px; }
    .sp-view-toggle button, .sp-view-toggle a { padding: 8px 12px; font-size: 1.15rem; }
}

/* A phone on its side. Height is the scarce resource, so the header gives up
   most of its own and the logo shrinks to a mark rather than a banner. */
@media (orientation: landscape) and (max-height: 560px) {
    .pb-header { padding: 8px 0; margin-bottom: 14px; --pb-logo-size: 36px; }
    .pb-logo-tagline { font-size: 1.2rem; }
    .sp-tabs { margin-bottom: 14px; }
    .sp-tab { padding: 8px 14px; }
    .sp-preview-banner { margin-bottom: 12px; padding: 6px 12px; }
}

/* Touch. Anything a finger has to hit gets a 44px box, whatever the width of
   the screen it is on — a tablet in landscape is still touched, not clicked. */
@media (pointer: coarse) {
    .sp-tab { min-height: 44px; }
    .sp-view-toggle button, .sp-view-toggle a { min-height: 40px; display: inline-flex; align-items: center; }
}