/* H.E. Engagements portal. Page styles only; the QF chrome lives in qf-*.css.
   Colours come from the QF tokens so the dark theme works without extra rules. */

.portal {
    --p-accent: var(--qf-ink);          /* solid QF-gray plates (the ink token), not green */
    --p-on-accent: var(--surface-page); /* text on an accent plate is the paper colour, flips in dark */
    --p-gray: #6b7280;
    --p-blue: #2563eb;
    --p-amber: #d97706;
    --p-red: #c0392b;
    --p-ok: #15803d;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--qf-ink);
    max-width: 62rem;
    margin-inline: 0; /* .qf-main already centres and pads; auto here inset the column from the lockup */
}
.portal h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; color: var(--text-heading); }
.portal h2 { font-size: 1.375rem; line-height: 1.3; margin: 0 0 .75rem; color: var(--text-heading); }
.portal p { margin: 0 0 1rem; }
.portal .muted { color: var(--text-muted); }
.portal .small { font-size: .95rem; }
.portal a:not(.p-btn) { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: .15em; transition: color .15s ease-out, text-decoration-color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out; }
.portal a:not(.p-btn):hover { color: var(--text-heading); text-decoration-thickness: 2px; }
.portal-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }

/* ---- Cards and layout ---- */
.p-card {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 0;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.p-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); margin-bottom: 1.5rem; }
.p-two { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .p-two { grid-template-columns: 2fr 1fr; align-items: start; } }

/* ---- Buttons ---- */
.p-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: .6rem 1.4rem;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    border-radius: 0; border: 2px solid var(--p-btn-fill);
    background: var(--p-btn-fill); color: var(--p-btn-ink);
}
/* Solid buttons are pure black on light paper; in dark mode they keep the pale ink plate so they stay visible. */
.portal { --p-btn-fill: #000; --p-btn-ink: #fff; }
/* Dark: Sidra Green buttons with white text (10.8:1), matching the current nav tab */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portal { --p-btn-fill: var(--qf-sidra-green); --p-btn-ink: #fff; } }
:root[data-theme="dark"] .portal { --p-btn-fill: var(--qf-sidra-green); --p-btn-ink: #fff; }
.p-btn { transition: box-shadow .18s ease-out, filter .18s ease-out, background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out; }
.p-btn:hover { background: color-mix(in srgb, var(--p-btn-fill) 82%, #fff); border-color: color-mix(in srgb, var(--p-btn-fill) 82%, #fff); box-shadow: 0 4px 14px color-mix(in srgb, var(--p-btn-fill) 28%, transparent); }
.p-btn:active { filter: brightness(.95); box-shadow: none; }
.p-btn:focus-visible { outline: 3px solid var(--focus-ring, #00BCE7); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .p-btn { transition: none; } }
.p-btn--big { min-height: 56px; font-size: 1.25rem; padding-inline: 2rem; }
.p-btn--ghost { background: transparent; color: var(--qf-ink); border-color: var(--border-strong); }
.p-btn--ghost:hover { background: var(--surface-tint); filter: none; box-shadow: none; border-color: var(--qf-ink); }
.p-btn--danger { background: transparent; color: var(--p-red); border-color: var(--p-red); }
.p-btn--danger:hover { background: var(--p-red); border-color: var(--p-red); color: #fff; filter: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--p-red) 28%, transparent); }
.portal a.p-btn { color: var(--p-btn-ink); }
.portal a.p-btn--ghost { color: var(--qf-ink); }
.portal a.p-btn--danger { color: var(--p-red); }
.portal a.p-btn--danger:hover { color: #fff; }
/* Dark: #c0392b on the dark page is 3.2:1; lift the red and put dark ink on the hover fill */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portal { --p-red: #f2796c; } :root:not([data-theme="light"]) .portal .p-btn--danger:hover { color: #160a08; } }
:root[data-theme="dark"] .portal { --p-red: #f2796c; }
:root[data-theme="dark"] .portal .p-btn--danger:hover, :root[data-theme="dark"] .portal a.p-btn--danger:hover { color: #160a08; }
.p-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Flash messages ---- */
.p-flash { padding: 1rem 1.25rem; border-radius: 0; margin-bottom: 1.5rem; border: 1px solid; font-weight: 500; }
.p-flash--success { border-color: var(--p-ok); background: color-mix(in srgb, var(--p-ok) 14%, transparent); }
.p-flash--error { border-color: var(--p-red); background: color-mix(in srgb, var(--p-red) 14%, transparent); }

/* ---- Status badges and pills ---- */
.p-badge {
    --tone: var(--p-gray);
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .2rem .75rem; border-radius: 0; font-size: .95rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--tone);
    background: color-mix(in srgb, var(--tone) 15%, transparent);
    color: var(--qf-ink);
}
.p-badge::before { content: ""; flex: 0 0 .6rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tone); }
.p-badge--green { --tone: var(--p-ok); }
.p-badge--blue { --tone: var(--p-blue); }
.p-badge--amber { --tone: var(--p-amber); }
.p-badge--red { --tone: var(--p-red); }
.p-pill {
    display: inline-block; padding: .1rem .7rem; border-radius: 0; font-size: .9rem; font-weight: 600;
    border: 1px solid var(--border-strong); color: var(--qf-ink);
}
.p-pill--theme { color: #fff; border-color: transparent; }
.p-pills { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---- Home ---- */
.p-hero { text-align: center; padding: 2rem 1rem; }
.p-stat {
    display: block; text-decoration: none; padding: 1rem; border-radius: 0;
    border: 1px solid var(--border-default); background: var(--surface-card); color: var(--qf-ink);
}
.portal a.p-stat { color: var(--qf-ink); }
.p-stat { transition: border-color .18s ease-out, box-shadow .18s ease-out; }
.p-stat:hover { border-color: var(--p-accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--qf-ink) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .p-stat { transition: none; } }
.p-stat strong { display: block; font-size: 2.25rem; line-height: 1.1; color: var(--text-heading); }
.p-stat .p-badge { font-size: .85rem; }
.p-steps { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.p-steps li { counter-increment: step; padding: .75rem 1rem; border-left: 4px solid var(--p-accent); background: var(--surface-tint); }
.p-steps li::before { content: counter(step) ". "; font-weight: 700; }

/* ---- Lists ---- */
.p-list { list-style: none; padding: 0; margin: 0; }
.p-list > li { padding: 1rem 0; border-bottom: 1px solid var(--border-default); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.p-list > li:last-child { border-bottom: 0; }
.p-list .p-title { font-weight: 600; font-size: 1.2rem; text-decoration: none; }
.p-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.p-filters a { padding: .35rem .9rem; border-radius: 0; border: 1px solid var(--border-strong); text-decoration: none; font-size: .95rem; }
.p-filters a:hover { background: var(--surface-tint); border-color: var(--qf-ink); text-decoration: none; }
.portal .p-filters a[aria-current="true"] { background: var(--p-btn-fill); color: var(--p-btn-ink); border-color: var(--p-btn-fill); }
.p-search { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.p-search input { flex: 1 1 14rem; }
.p-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; align-items: center; }
.p-inline { display: inline; margin: 0; }

/* ---- Forms ---- */
.p-field { margin-bottom: 1.5rem; }
.p-field > label, .p-field > legend, fieldset.p-field > legend { display: block; font-weight: 600; margin-bottom: .4rem; padding: 0; }
fieldset.p-field { border: 0; padding: 0; margin-inline: 0; }
.p-input, .portal input[type=text], .portal input[type=email], .portal input[type=password], .portal input[type=date], .portal input[type=month], .portal input[type=url], .portal input[type=search], .portal input[type=file], .portal select, .portal textarea {
    width: 100%; font: inherit; padding: .65rem .8rem; min-height: 48px;
    border: 2px solid var(--border-strong); border-radius: 0;
    background: var(--surface-card); color: var(--qf-ink);
}
.portal textarea { min-height: 7rem; }
.portal input:focus, .portal select:focus, .portal textarea:focus { outline: 3px solid var(--focus-ring, #50e2c3); outline-offset: 1px; }
.p-choices { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.p-choices label { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; font-weight: 500; }
.portal input[type=radio] { width: 1.4rem; height: 1.4rem; accent-color: var(--p-accent); }
.p-help { color: var(--text-muted); font-size: .95rem; margin: .3rem 0 0; }
.p-error { color: var(--p-red); font-weight: 600; margin: .4rem 0 0; }
.p-field--error input, .p-field--error select, .p-field--error textarea { border-color: var(--p-red); }
.p-datefields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: 1rem; }
[hidden] { display: none !important; }

/* ---- Timeline ---- */
.p-timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--border-default); }
.p-timeline li { position: relative; padding: 0 0 1.25rem 1rem; }
.p-timeline li::before { content: ""; position: absolute; left: -2.05rem; top: .45rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--p-accent); border: 3px solid var(--surface-card); }
.p-timeline .p-reason { margin: .35rem 0 0; padding: .5rem .8rem; background: var(--surface-tint); border-radius: 0; }

/* ---- Facts ---- */
.p-facts { display: grid; gap: .5rem 1.5rem; grid-template-columns: max-content 1fr; margin: 0 0 1rem; }
.p-facts dt { font-weight: 600; }
.p-facts dd { margin: 0; }
.p-sentence { font-size: 1.3rem; font-weight: 600; margin: .75rem 0 0; }

/* ---- Planned flags (deck flags) ---- */
.p-dots { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; font-size: 1em; color: var(--qf-ink); }
.p-dot { display: flex; align-items: baseline; gap: .6rem; }
.p-dot i { flex: none; width: 1.2em; text-align: center; font-style: normal; font-weight: 700; color: var(--p-ok); }
.p-dot--yes i::before { content: "\2713"; }
.p-dot--tbc i::before { content: "\25F7"; color: var(--p-amber); }
.p-dot--no i::before { content: "\2715"; color: var(--text-muted); }
.p-notplanned { margin: .25rem 0 0; }

/* ---- Touch targets ---- */
.portal a.p-tap { display: inline-block; padding-block: .6rem; min-height: 44px; box-sizing: border-box; }
.p-list .p-title.p-tap { display: inline-flex; align-items: center; }
@media (max-width: 40rem) {
    .p-choices label { min-height: 44px; padding-block: .4rem; }
    .portal input[type=radio] { min-width: 1.4rem; min-height: 1.4rem; }
}

/* ---- Calendar table ---- */
.p-month { margin-bottom: 1.5rem; border: 1px solid var(--border-default); border-radius: 0; overflow: hidden; background: var(--surface-card); }
.p-month h2 { margin: 0; padding: .75rem 1.25rem; background: var(--p-accent); color: var(--p-on-accent); }
.p-month table { width: 100%; border-collapse: collapse; }
.p-month th, .p-month td { text-align: left; padding: .7rem 1rem; vertical-align: top; border-bottom: 1px solid var(--border-default); }
.p-month th { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--surface-tint); }
.p-month tr.p-tbc td { background: var(--surface-tint); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.p-month td.nowrap { white-space: nowrap; font-weight: 600; }
@media (max-width: 40rem) {
    .p-month thead { display: none; }
    .p-month tr:not(.p-tbc) { display: block; border-bottom: 1px solid var(--border-default); padding: .5rem 0; }
    .p-month td { display: block; border: 0; padding: .15rem 1rem; }
    .p-month tr.p-tbc td { display: block; }
}
.p-monthnav { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

.p-empty { text-align: center; padding: 2rem 1rem; color: var(--text-muted); }

/* ---- Sign-in ----
   Square corners throughout: the QF system ships no radius above 4px.
   A two-panel stage on wide screens: Sidra-green brand panel with the tree as a
   watermark, the form card beside it. Stacks on phones. Everything is token-driven
   so the dark theme needs no extra rules; the brand panel is green in both. */
.portal--signin { max-width: 68rem; }
/* Portal pages: tighter page rhythm than the PUE shell's 56/96px + 80px footer gap, so short pages fit one screen. */
body:has(.portal) .qf-main { padding-block: 1.5rem 2rem; }
body:has(.portal) .qf-footer, body:has(.portal) .pue-footer { margin-top: 1.5rem; }
.p-signin {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
    margin-block: .5rem 2rem;
    animation: p-signin-in .42s cubic-bezier(.2,.7,.2,1) both;
}
@media (min-width: 52rem) {
    /* Stage fills the viewport left between header and footer (~220px of chrome) so the page
       doesn't scroll; the row still grows if the form needs more room. */
    .p-signin { grid-template-columns: 5fr 6fr; grid-template-rows: 1fr; gap: 2rem; align-items: stretch;
        min-height: min(calc(100dvh - 220px), 56rem); margin-block: 0; }
}
@keyframes p-signin-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .p-signin { animation: none; } }

.p-signin-brand {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
    min-height: 14rem; padding: 2rem;
    border-radius: 0; color: #fff;
    background: var(--p-accent);
}
@media (min-width: 52rem) { .p-signin-brand { min-height: 100%; padding: 2.5rem; } }
/* qf.org.qa pixel grid: hairline squares over the panel, a QF Yellow square and a
   white one snapped to the grid in the lower-right. Flat fills, no gradient, no radius. */
.p-signin-brand-grid {
    position: absolute; inset: 0; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23ffffff' stroke-opacity='.16'/%3E%3C/svg%3E");
    background-size: 40px 40px; background-position: right bottom;
}
.p-signin-brand-grid::before, .p-signin-brand-grid::after {
    content: ""; position: absolute; width: 40px; height: 40px;
}
.p-signin-brand-grid::before { right: 40px; bottom: 80px; background: var(--qf-yellow); }
.p-signin-brand-grid::after  { right: 120px; bottom: 40px; background: var(--p-on-accent); opacity: .28; }
@media (min-width: 52rem) {
    .p-signin-brand-grid::before { right: 80px; bottom: 160px; }
    .p-signin-brand-grid::after  { right: 40px; bottom: 80px; }
}
.p-signin-brand .p-signin-eyebrow { color: color-mix(in srgb, var(--p-on-accent) 72%, transparent); }
.p-signin-display {
    font-family: var(--font-serif-display, Georgia, serif); font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.08; letter-spacing: -.01em;
    margin: 0; color: #fff;
}

.p-signin-card { padding: 2rem; margin: 0; border-radius: 0; box-shadow: var(--shadow-card); }
@media (min-width: 52rem) { .p-signin-card { padding: 2.75rem; display: flex; flex-direction: column; justify-content: center; } }
.p-signin-eyebrow {
    margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted);
}
.p-signin-title {
    font-family: var(--font-serif-display, Georgia, serif); font-weight: 400;
    font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 1.5rem;
}
.p-signin-lead { color: var(--text-muted); margin-bottom: 1.75rem; }

/* Buttons on this page: full width, a touch of lift on hover, settle on press. */
.p-btn--block { width: 100%; }
.p-signin .p-btn, .p-signin .p-flash, .p-signin input, .p-signin .p-card { border-radius: 0; }

.p-signin-or {
    display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0;
    color: var(--text-muted); font-size: .95rem;
}
.p-signin-or::before, .p-signin-or::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }

.p-signin-form .p-field { margin-bottom: 1.25rem; }
.p-signin .p-input, .p-signin input[type=email], .p-signin input[type=password], .p-signin input[type=text] {
    border-radius: 0; transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.p-signin input:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring, #00BCE7) 35%, transparent); }

.p-signin-password { position: relative; }
.p-signin-password input { padding-right: 3.25rem; }
.p-signin-reveal {
    position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
    width: 44px; height: 44px; display: inline-grid; place-items: center;
    border: 0; border-radius: 0; background: transparent; color: var(--text-muted); cursor: pointer;
}
.p-signin-reveal:hover { color: var(--text-heading); background: var(--surface-tint); }
.p-signin-reveal:focus-visible { outline: 3px solid var(--focus-ring, #00BCE7); outline-offset: 1px; }
.p-signin-reveal .p-signin-eye-off { display: none; }
.p-signin-reveal.is-on .p-signin-eye { display: none; }
.p-signin-reveal.is-on .p-signin-eye-off { display: block; }

.p-signin-remember { display: flex; align-items: center; gap: .75rem; min-height: 44px; margin: 0 0 1.5rem; cursor: pointer; font-weight: 500; }
.p-signin-remember input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--p-accent); }

.p-signin-local { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px dashed var(--border-default); }
.p-signin-local-label { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.p-signin-local-label { display: block; }
.p-signin-local-row { display: flex; gap: .5rem; }
.p-signin-local-row select { flex: 1 1 auto; min-width: 0; }
.p-signin-local .p-btn { flex: 0 0 auto; min-height: 48px; font-size: 1rem; }
.p-signin-local .p-signin-local-row select { padding-right: 2.75rem; background-position: right .85rem center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2353565A' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }

/* ---- Request form ----
   Same stage as the sign-in page: square corners, serif display title, one card
   cut into numbered sections, tile choices instead of bare radios, and a green
   side rail that says what happens after Send. Token-driven, so the dark theme
   needs no extra rules. */
.portal--form { max-width: 72rem; }
.p-eyebrow { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.p-display {
    font-family: var(--font-serif-display, Georgia, serif); font-weight: 400;
    font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 .5rem; color: var(--text-heading);
}
.p-lead { color: var(--text-muted); margin: 0 0 1.5rem; }
.p-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.p-form-layout {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-block: .5rem 2rem;
    animation: p-signin-in .42s cubic-bezier(.2,.7,.2,1) both;
}
@media (min-width: 60rem) {
    .p-form-layout { grid-template-columns: minmax(0, 7fr) minmax(16rem, 3fr); gap: 2.5rem; align-items: start; margin-block: 1.5rem 3rem; }
}
@media (prefers-reduced-motion: reduce) { .p-form-layout { animation: none; } }
.p-form-head { grid-column: 1 / -1; margin-bottom: 0; }

/* Doubled class beats the typed `.portal input[type=…]` 8px rule above. */
.portal.portal--form .p-card, .portal.portal--form .p-flash, .portal.portal--form .p-btn,
.portal.portal--form input[type], .portal.portal--form input, .portal.portal--form select, .portal.portal--form textarea { border-radius: 0; }

.p-form { padding: 0; margin: 0; box-shadow: var(--shadow-card); }
.p-form-section { padding: 1.75rem 1.5rem; border-bottom: 1px solid var(--border-default); }
@media (min-width: 52rem) { .p-form-section { padding: 2.25rem 2.5rem; } }
.p-form-section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.p-form-num { flex: none; font-family: var(--font-serif-display, Georgia, serif); font-size: 1.5rem; line-height: 1; color: var(--p-accent); }
.p-form-section-title { font-family: var(--font-serif-display, Georgia, serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; margin: 0; }
.p-form-section-hint { margin: .35rem 0 0; color: var(--text-muted); font-size: 1rem; }
.p-form .p-field:last-child { margin-bottom: 0; }

/* Inputs: same focus treatment as the sign-in page, and a proper chevron on selects. */
.p-form input, .p-form select, .p-form textarea { transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.p-form input:focus, .p-form select:focus, .p-form textarea:focus {
    outline: none; border-color: var(--p-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring, #00BCE7) 35%, transparent);
}
.p-form select, .p-signin-local select {
    appearance: none; cursor: pointer; padding-right: 3rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 1rem center;
}

/* Tile choices: a native radio inside a bordered tile, so keyboard and screen
   readers get the plain control and everyone else gets a target they can hit. */
.p-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.p-tile {
    position: relative; display: flex; flex-direction: column; gap: .15rem;
    min-height: 56px; padding: .9rem 1rem .9rem 3rem;
    border: 2px solid var(--border-strong); background: var(--surface-card);
    cursor: pointer; font-weight: 600; line-height: 1.35;
    transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.p-tile input { position: absolute; left: 1rem; top: 1rem; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--p-accent); }
.p-tile span { font-weight: 400; color: var(--text-muted); font-size: .95rem; }
.p-tile:hover { border-color: var(--p-accent); }
.p-tile:has(input:checked) { border-color: var(--p-accent); background: color-mix(in srgb, var(--p-accent) 8%, var(--surface-card)); box-shadow: inset 0 0 0 1px var(--p-accent); }
.p-tile:has(input:focus-visible) { outline: 3px solid var(--focus-ring, #00BCE7); outline-offset: 2px; }
.p-field--error .p-tile { border-color: var(--p-red); }

.p-form .p-datefields { margin-top: 1.25rem; padding: 1.25rem; background: var(--surface-tint); }
.p-form .p-datefields:not(:has(> div:not([hidden]))) { display: none; }

.p-files { padding: 1.25rem; border: 2px dashed var(--border-strong); background: var(--surface-tint); transition: border-color .15s ease-out; }
.p-files:hover, .p-files:has(input:focus-visible) { border-color: var(--p-accent); }
.p-files input[type=file] { background: var(--surface-card); }
.p-files .p-help { margin-top: .6rem; }

.p-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: 1.5rem; background: var(--surface-tint); }
@media (min-width: 52rem) { .p-form-actions { padding: 1.5rem 2.5rem; } }
@media (max-width: 40rem) { .p-form-actions .p-btn { width: 100%; } }

/* Side rail: the sign-in brand panel, reused as "what happens next". */
@media (min-width: 60rem) { .p-form-aside { position: sticky; top: 1.5rem; } }
.p-form-aside-panel {
    position: relative; overflow: hidden; isolation: isolate; padding: 1.75rem; color: var(--p-on-accent);
    background: var(--p-accent);
}
/* Form aside: the squares sat bottom-right on top of the last step ("Delivered").
   Anchor the grid and both squares to the empty top-right corner instead. */
.p-form-aside-panel .p-signin-brand-grid { background-position: right top; }
.p-form-aside-panel .p-signin-brand-grid::before,
.p-form-aside-panel .p-signin-brand-grid::after { bottom: auto; }
.p-form-aside-panel .p-signin-brand-grid::before { top: 0; right: 40px; }
.p-form-aside-panel .p-signin-brand-grid::after  { top: 40px; right: 0; }
.p-form-aside-panel .p-eyebrow { color: color-mix(in srgb, var(--p-on-accent) 72%, transparent); margin-bottom: 1rem; }
.p-form-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1.1rem; }
.p-form-steps li { counter-increment: s; position: relative; padding-left: 2.6rem; }
.p-form-steps li::before {
    content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .05rem;
    font-family: var(--font-serif-display, Georgia, serif); font-size: 1.25rem; line-height: 1.3; color: var(--p-on-accent);
}
.p-form-steps strong { display: block; font-weight: 600; }
.p-form-steps span { display: block; font-size: .95rem; line-height: 1.5; color: color-mix(in srgb, var(--p-on-accent) 82%, transparent); }
.p-form-aside-note { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--p-on-accent) 25%, transparent); font-size: .95rem; color: color-mix(in srgb, var(--p-on-accent) 84%, transparent); }
.portal .p-form-aside-note a { color: var(--p-on-accent); }

/* ---- Calendar ---- */
.portal.portal--calendar { max-width: 72rem; --p-ink: var(--qf-ink); --p-line: var(--border-default); }
.portal.portal--calendar *, .portal.portal--calendar .p-btn { border-radius: 0; }
.portal--calendar a { text-decoration: none; }
.portal--calendar i { font-style: normal; }

.p-cal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.p-cal-head .p-lead { margin-bottom: 0; }
.p-cal-nav, .p-cal-years { display: flex; align-items: center; gap: .5rem; }
.p-cal-step {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid var(--border-default); background: var(--surface-card); color: var(--qf-ink);
    transition: background-color .12s, color .12s, border-color .12s;
}
a.p-cal-step:hover { background: var(--surface-tint); }
.p-cal-step.is-disabled { opacity: .35; cursor: default; }
.p-cal-today {
    display: inline-flex; align-items: center; padding: 7px 14px; font-size: .875rem; font-weight: 500;
    background: transparent; border: 1px solid var(--border-strong); color: var(--qf-ink);
    transition: background-color .12s, color .12s;
}
.p-cal-today:hover { background: var(--qf-ink); color: var(--surface-card); }
.p-cal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.p-cal-year { min-width: 5rem; text-align: center; font-family: var(--font-serif-display, Georgia, serif); font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--qf-ink); }
.p-cal-tabs { display: inline-flex; border: 1px solid var(--border-default); }
.p-cal-tabs a { padding: .5rem 1rem; font-size: .875rem; font-weight: 500; color: var(--text-muted); transition: background-color .12s, color .12s; }
.p-cal-tabs a:hover { color: var(--qf-ink); }
.p-cal-tabs a.is-active, .p-cal-tabs a.is-active:hover { background: var(--p-btn-fill); color: var(--p-btn-ink); }

.p-cal-strip { display: flex; gap: 2px; margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border-default); }
.p-cal-strip a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .25rem; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.p-cal-strip a.is-shown { border-bottom-color: var(--p-accent); }
.p-cal-strip-bar { display: flex; align-items: flex-end; height: 2.5rem; }
.p-cal-strip-bar i { display: block; width: 100%; background: var(--qf-ink-50, #767676); transition: background-color .12s; }
.p-cal-strip a:hover .p-cal-strip-bar i { background: var(--p-accent); }
.p-cal-strip a.is-empty .p-cal-strip-bar i { background: var(--border-default); }
.p-cal-strip a.is-shown .p-cal-strip-bar i { background: var(--p-accent); }
.p-cal-strip-label { text-align: center; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.p-cal-strip a.is-shown .p-cal-strip-label { color: var(--qf-ink); }

.p-cal-grid { border: 1px solid var(--border-default); background: var(--surface-card); margin-bottom: 1.25rem; }
.p-cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border-default); background: var(--surface-tint); }
.p-cal-weekdays > div { padding: .5rem 0; text-align: center; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.p-cal-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border-default); }
.p-cal-week:last-child { border-bottom: 0; }
.p-cal-day {
    position: relative; display: flex; flex-direction: column; min-height: 3rem; min-width: 0;
    padding: .375rem .375rem 0; color: var(--qf-ink); background: var(--surface-card);
    transition: background-color .12s;
}
.p-cal-day + .p-cal-day { border-inline-start: 1px solid var(--border-default); }
.p-cal-day.is-weekend { background: color-mix(in srgb, var(--surface-tint) 40%, transparent); }
.p-cal-day.is-outside { background: color-mix(in srgb, var(--surface-tint) 60%, transparent); }
.p-cal-day:hover { background: var(--surface-tint); }
.p-cal-daytop { display: flex; align-items: center; gap: .375rem; }
.p-cal-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--qf-ink); }
.p-cal-day.is-outside .p-cal-num { color: var(--text-subtle); }
.p-cal-day.is-today .p-cal-num { background: var(--p-accent); color: var(--p-on-accent); font-weight: 500; }
.p-cal-dots { display: inline-flex; gap: 3px; }
.p-cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-accent); }
.p-cal-selected { position: absolute; inset: 0; border: 2px solid var(--p-accent); pointer-events: none; }
.p-cal-bars { display: none; }

@media (min-width: 640px) {
    .p-cal-day { min-height: var(--p-cell); }
    .p-cal-dots { display: none; }
    .p-cal-bars {
        position: absolute; top: 2.25rem; inset-inline: 0; display: grid; pointer-events: none;
        grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 1px; row-gap: .1875rem;
    }
}
.p-cal-bar-wrap { min-width: 0; pointer-events: auto; }
.p-cal-bar {
    display: flex; align-items: center; gap: .25rem; height: 1.25rem; overflow: hidden; padding: 0 .375rem;
    font-size: 11px; line-height: 1; background: var(--p-accent); color: var(--p-on-accent);
    transition: filter .12s, background-color .12s;
}
.p-cal-bar:hover { filter: brightness(1.15); }
.p-cal-bar.is-ended { border: 1px solid var(--border-default); background: var(--surface-tint); color: var(--text-muted); }
.p-cal-bar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-cal-bar-more { margin-inline-start: auto; }
.p-cal-more { grid-column: 1 / span 7; padding: 0 .375rem; font-size: 11px; color: var(--text-subtle); pointer-events: none; }

.p-cal-empty { margin-bottom: 1.25rem; padding: 2rem; text-align: center; border: 1px solid var(--border-default); background: var(--surface-tint); }
.p-cal-empty p { margin: 0 0 .25rem; font-size: 1.125rem; color: var(--qf-ink); }
.p-cal-empty span { font-size: .875rem; color: var(--text-muted); }

.p-cal-panel { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; padding: 1.25rem; border: 1px solid var(--border-default); background: var(--surface-tint); }
.p-cal-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.p-cal-panel h2, .p-cal-tbc h2 { margin: 0; font-family: var(--font-serif-display, Georgia, serif); font-size: 1.25rem; font-weight: 400; color: var(--qf-ink); }
.p-cal-panel-side { display: flex; align-items: center; gap: 1rem; font-size: .875rem; color: var(--text-muted); }
.p-cal-close { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-muted); transition: color .12s; }
.p-cal-close:hover { color: var(--qf-ink); }

.p-cal-row-item {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: .75rem 1rem;
    border: 1px solid var(--border-default); background: var(--surface-card); color: var(--qf-ink);
    transition: border-color .12s;
}
.p-cal-row-item:hover { border-color: var(--border-strong); }
.p-cal-row-mark { align-self: center; width: 4px; height: 12px; background: var(--p-accent); }
.p-cal-row-mark.is-ended { background: var(--qf-ink-50, #767676); }
.p-cal-row-date { font-size: .875rem; font-weight: 500; color: var(--p-accent); }
.p-cal-row-date.is-ended { color: var(--text-muted); }
.p-cal-row-title { font-size: 1rem; color: var(--qf-ink); }
.p-cal-row-meta { font-size: .875rem; color: var(--text-muted); }
.p-cal-row-arrow { align-self: center; margin-inline-start: auto; color: var(--text-muted); }

.p-cal-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.5rem; font-size: .875rem; color: var(--text-muted); }
.p-cal-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.p-cal-sw { display: inline-block; width: 10px; height: 24px; background: var(--p-accent); }
.p-cal-sw.is-ended { border: 1px solid var(--border-default); background: var(--surface-tint); }
.p-cal-tbc { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border-default); }
.p-cal-tbc p { margin: -.5rem 0 0; font-size: .875rem; color: var(--text-muted); }

.p-cal-year-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .p-cal-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .p-cal-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .p-cal-year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-cal-mini { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border: 1px solid var(--border-default); background: var(--surface-card); transition: border-color .12s; }
.p-cal-mini:hover { border-color: var(--border-strong); }
.p-cal-mini.is-shown, .p-cal-mini.is-shown:hover { border-color: var(--p-accent); }
.p-cal-mini-title { display: flex; align-items: baseline; justify-content: space-between; }
.p-cal-mini-title span { font-family: var(--font-serif-display, Georgia, serif); font-size: 1rem; line-height: 1; color: var(--qf-ink); }
.p-cal-mini-title small { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.p-cal-mini-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.p-cal-mini-spacer { height: 1.5rem; }
.p-cal-mini-day {
    display: flex; align-items: center; justify-content: center; height: 1.5rem; font-size: 10px;
    font-variant-numeric: tabular-nums; color: var(--text-subtle); border: 1px solid transparent;
    transition: background-color .12s;
}
.p-cal-mini-day:hover { background: var(--surface-tint); }
.p-cal-mini-day.d1 { background: color-mix(in srgb, var(--p-accent) 20%, transparent); color: var(--qf-ink); }
.p-cal-mini-day.d2 { background: color-mix(in srgb, var(--p-accent) 50%, transparent); color: var(--qf-ink); }
.p-cal-mini-day.d3 { background: var(--p-accent); color: var(--p-on-accent); font-weight: 500; }
.p-cal-mini-day.is-today { border-color: var(--qf-ink); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
    .p-cal-week { animation: p-cal-rise .32s cubic-bezier(0, 0, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
    .p-cal-bar-wrap { animation: p-cal-bar .3s cubic-bezier(0, 0, .2, 1) both; animation-delay: calc(60ms + var(--lane, 0) * 50ms); transform-origin: left; }
    .p-cal-mini { animation: p-cal-rise-lg .3s cubic-bezier(0, 0, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
    .p-cal-panel { animation: p-cal-fade .3s cubic-bezier(0, 0, .2, 1) both; }
}
@keyframes p-cal-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes p-cal-rise-lg { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes p-cal-bar { from { opacity: 0; transform: scaleX(.86); } to { opacity: 1; transform: none; } }
@keyframes p-cal-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Header identity: name · lane · today ---- */
.qf-whoami { gap: 8px; }
.qf-whoami-name { color: var(--qf-ink); font-weight: 600; }
.qf-whoami-role { color: var(--text-brand); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; }
.qf-today { font-variant-numeric: tabular-nums; }
.qf-today::before { content: ""; display: inline-block; width: 1px; height: 14px; background: var(--border-default); margin-right: 14px; }
@media (max-width: 560px) { .qf-today::before { display: none; } }

/* ---- QF brand guide + qf.org.qa touches ----
   Brand: QF Font only, bold headlines, regular body, tracking 0, leading >= 1.3,
   nothing under 13px, white + a Set A colour (Yellow / Cool Gray) always present,
   Set B is Sidra Green. qf.org.qa: serif display at 600, 600-weight nav, square
   1px-bordered header buttons, hairlines instead of shadows, a flat highlighter
   swipe on the key word, light grey footer band with a white legal strip. */
.portal h1, .portal h2, .portal h3, .portal h4 { font-weight: var(--weight-bold); letter-spacing: 0; }
.portal h1 { line-height: 1.3; }
.portal p, .portal li, .portal td, .portal th, .portal label { letter-spacing: 0; }
.p-display, .p-signin-title { font-weight: var(--weight-semibold); letter-spacing: 0; line-height: 1.2; }
.p-signin-display { letter-spacing: 0; line-height: 1.2; }
.p-eyebrow, .p-signin-eyebrow, .p-signin-local-label { letter-spacing: .04em; }
.p-month th, .p-month tr.p-tbc td { letter-spacing: .04em; }

/* Minimum type size */
.p-cal-strip-label, .p-cal-weekdays > div, .p-cal-more, .p-cal-mini-title small,
.p-cal-bar, .p-cal-mini-day { font-size: 13px; }
.p-cal-strip-label, .p-cal-weekdays > div { letter-spacing: .04em; }

/* Highlighter swipe: flat QF Yellow box behind the key word, no padding, no radius */
.qf-hl { background: var(--qf-yellow); color: var(--text-on-yellow); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Header nav: tab plates. Hover = tint plate + rule growing from the centre;
   current = Sidra Green plate with white text (10.5:1), same rule. Fixed
   padding and transform-only motion, so no state shifts the layout. */
.qf-page .qf-header-bar .qf-nav { gap: var(--space-1); }
.qf-page .qf-nav a {
  position: relative; padding: 9px 14px 11px; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: var(--weight-semibold); color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard), background-color 180ms var(--ease-standard);
}
.qf-page .qf-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--text-heading);
  transform: scaleX(0); transition: transform 220ms var(--ease-standard);
}
.qf-page .qf-nav a:hover { color: var(--text-heading); background: var(--surface-tint); }
.qf-page .qf-nav a:hover::after { transform: scaleX(.55); }
.qf-page .qf-nav a[aria-current="page"] { font-weight: var(--weight-semibold); color: #fff; background: var(--qf-sidra-green); }
.qf-page .qf-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--qf-sidra-green); }
.qf-page .qf-nav a[aria-current="page"]:hover { color: #fff; background: var(--qf-sidra-green-80); }
.qf-page .qf-nav a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
@media (max-width: 700px) { .qf-page .qf-header-bar .qf-nav { gap: var(--space-1); } .qf-page .qf-nav a { padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .qf-page .qf-nav a, .qf-page .qf-nav a::after { transition: none; } }
.qf-page .qf-header-actions .qf-btn { font-size: 15px; font-weight: var(--weight-semibold); padding: 5px 14px; min-height: 32px; }

/* Footer: light band, ink text, white legal strip, hairline divider (tokens flip in dark) */
.qf-page .pue-footer.pue-footer { background: var(--surface-tint); color: var(--qf-ink); }
.qf-page .pue-footer-link, .qf-page .pue-footer-socials a { color: var(--qf-ink); }
.qf-page .pue-footer-link:hover { color: var(--qf-ink); border-bottom-color: var(--qf-yellow); }
.qf-page .pue-footer-socials a:hover { color: var(--text-brand); }
.qf-page .pue-footer-legal { background: var(--surface-page); border-top: 1px solid var(--border-default); }
.qf-page .pue-footer-legal .qf-shell, .qf-page .pue-footer-legal a { color: var(--text-muted); }

/* Dark: QF Yellow focus ring (Sidra Green vanishes on dark), muted text back to the dark ink scale */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --focus-ring: var(--qf-yellow); --text-muted: var(--qf-ink-70); } }
:root[data-theme="dark"] { --focus-ring: var(--qf-yellow); --text-muted: var(--qf-ink-70); }

/* Sign-in brand panel sits on Sidra Green: its display heading stays white in both themes
   (.portal h2 would otherwise paint it ink). */
.p-signin-brand .p-signin-display { color: var(--p-on-accent); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .p-signin-brand-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23000000' stroke-opacity='.16'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .p-signin-brand-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23000000' stroke-opacity='.16'/%3E%3C/svg%3E"); }
.qf-page .pue-footer-system { font-weight: var(--weight-semibold); color: var(--qf-ink); }

/* ---- Home intro (portal.partials.intro) ---- */
.p-intro {
    position: fixed; inset: 0; z-index: 1000; pointer-events: none;
    display: grid; place-items: center; overflow: hidden;
    background: var(--surface-page);
    clip-path: inset(0 0 0 0);
    animation: p-intro-lift 760ms cubic-bezier(0.76, 0, 0.24, 1) 1600ms both;
}
.p-intro-seen .p-intro { display: none; }
/* Local dev only: hold the finished lockup a beat longer so it can be looked at */
.p-intro--hold, .p-intro--hold .p-intro-mark { animation-delay: 2000ms; }
/* A faint halo behind the mark, so the surface is not dead flat. */
.p-intro::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(42rem 42rem at 50% 50%, color-mix(in srgb, var(--qf-sidra-green) 9%, transparent), transparent 60%);
    animation: p-intro-halo 1100ms ease-out both;
}
/* Stacked lockup, composed from the tree artwork and the horizontal lockup
   cropped to its wordmark (x 0-64.8% of the tight viewBox). The tree fades
   in alone at the centre of the screen, then the stack glides up while the
   wordmark slides down from behind the tree. Each stage animates its own
   box so transforms never fight. */
.p-intro-mark {
    /* vertical lockup: viewBox 130.51 x 106.76; tree occupies the top 55%, the
       tree's own centre sits 15.1% above the lockup's centre */
    --p-intro-w: min(12rem, 58vw);
    --p-intro-h: calc(var(--p-intro-w) * 106.76 / 130.51);
    --p-intro-split: 55%;
    position: relative;
    animation: p-intro-rise 760ms cubic-bezier(0.76, 0, 0.24, 1) 1600ms both;
}
.p-intro-focus { animation: p-intro-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both; }
.p-intro-logo {
    position: relative; width: var(--p-intro-w); height: var(--p-intro-h);
    transform: translateY(15.1%);
    animation: p-intro-glide 820ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both;
}
.p-intro-tree {
    position: absolute; inset: 0; z-index: 1;
    clip-path: inset(0 0 calc(100% - var(--p-intro-split)) 0);
}
.p-intro-word {
    position: absolute; inset: var(--p-intro-split) 0 0 0; overflow: hidden;
}
.p-intro-img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: var(--p-intro-h); max-width: none; }
.p-intro-word .p-intro-img {
    top: calc(var(--p-intro-h) * -0.55);
    transform: translateY(-35%); opacity: 0;
    animation: p-intro-reveal 820ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both;
}
.p-intro-img--dark { display: none; }
:root[data-theme="dark"] .p-intro-img--light { display: none; }
:root[data-theme="dark"] .p-intro-img--dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .p-intro-img--light { display: none; }
    :root:not([data-theme="light"]) .p-intro-img--dark { display: block; }
}
@keyframes p-intro-in {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes p-intro-glide { to { transform: translateY(0); } }
@keyframes p-intro-reveal { to { transform: translateY(0); opacity: 1; } }
@keyframes p-intro-halo { from { opacity: 0; } to { opacity: 1; } }
@keyframes p-intro-rise { to { transform: translateY(-2.5rem); opacity: 0; } }
@keyframes p-intro-lift { to { clip-path: inset(0 0 100% 0); } }
@media (prefers-reduced-motion: reduce) { .p-intro { display: none; } }

/* ---- Sign-in hero video ----
   Kept low key: muted colour, a semi-transparent black wash so the white display
   text stays readable over bright frames, and a fine dot screen on top that gives
   texture and hides compression blocking without blurring the footage. */
.p-signin-brand-video {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.75);
}
.p-signin-brand--video::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    /* Fixed black, not --p-accent: that is the ink token and turns pale in dark
       mode, which washed the footage out. The panel looks the same in both themes. */
    background: rgb(0 0 0 / .45);
}
.p-signin-brand--video::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgb(0 0 0 / .5) 1px, transparent 1.3px);
    background-size: 3px 3px;
}
.p-signin-brand--video .p-signin-display { color: #fff; }
.p-signin-brand--video .p-signin-eyebrow { color: rgb(255 255 255 / .78); }
/* No grid pattern over the footage. */
.p-signin-brand--video .p-signin-brand-grid { display: none; }
/* Brand lockup: yellow tick, eyebrow, two-line display with the highlighted word. */
.p-signin-lockup { display: grid; gap: .5rem; max-width: 24rem; }
.p-signin-rule { width: 2.5rem; height: 4px; background: var(--qf-yellow); margin-bottom: .5rem; }
.p-signin-lockup .p-signin-eyebrow { margin: 0; }
.p-signin-lockup .p-signin-display { font-size: clamp(2.25rem, 4.4vw, 3.25rem); line-height: 1.05; }
.p-signin-lockup .p-signin-display mark { display: inline-block; margin-top: .12em; }
.p-signin-brand--video .p-signin-brand--video .p-signin-lockup { transition: opacity .25s ease-out; }
@media (hover: hover) { .p-signin-brand--video:hover .p-signin-lockup { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .p-signin-brand--video .p-signin-lockup { transition: none; } }
/* Hover clears the wash, dots and text so the footage shows plainly. */
.p-signin-brand--video { background: #000; }
.p-signin-brand--video::before, .p-signin-brand--video::after,
.p-signin-brand--video .p-signin-eyebrow, .p-signin-brand--video .p-signin-display { transition: opacity .25s ease-out; }
.p-signin-brand-video { transition: filter .25s ease-out; }
@media (hover: hover) {
    .p-signin-brand--video:hover::before, .p-signin-brand--video:hover::after,
    .p-signin-brand--video:hover .p-signin-eyebrow, .p-signin-brand--video:hover .p-signin-display { opacity: 0; }
    .p-signin-brand--video:hover .p-signin-brand-video { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .p-signin-brand--video::before, .p-signin-brand--video::after, .p-signin-brand-video,
    .p-signin-brand--video .p-signin-eyebrow, .p-signin-brand--video .p-signin-display { transition: none; }
}

/* Short laptop screens: tighten the sign-in card so the page fits without scrolling. */
@media (min-width: 52rem) and (max-height: 860px) {
    .p-signin-card { padding-block: 1.75rem; }
    .p-signin-local { margin-top: 1.25rem; padding-top: 1rem; }
}

/* Calendar: a past event reads as done (tick + muted), not as a blocked slot */
.p-cal-done { flex: 0 0 auto; }
.p-cal-bar.is-ended { border-style: dashed; }
.p-cal-sw { width: 26px; height: 16px; }
.p-cal-sw.is-ended { display: inline-flex; align-items: center; justify-content: center; border-style: dashed; border-color: var(--border-strong); color: var(--text-muted); }
/* Bars are links, so the generic .portal a colour won; pin the readable pair */
.portal a.p-cal-bar { color: var(--p-on-accent); }
.portal a.p-cal-bar.is-ended { color: var(--text-muted); border-color: var(--border-strong); }
.p-cal-bar-text { line-height: 1.25; }
.portal a.p-cal-bar:not(.p-btn):hover { color: var(--p-on-accent); }
.portal a.p-cal-bar.is-ended:not(.p-btn):hover { color: var(--text-heading); }
/* Test-only autofill: say plainly what the extra button does */
.p-dev-note { flex-basis: 100%; margin: 0; font-size: .875rem; color: var(--text-muted); }