/*
 * Duty schedule calendar.
 *
 * Written as plain CSS rather than Tailwind utilities because the CMS image has no Node step:
 * this file is published by `php artisan filament:assets`, which the Docker entrypoint already
 * runs on boot. Every class is prefixed so it can load beside Filament's own stylesheet in
 * either panel without touching anything else.
 *
 * Filament sets `dark` on <html>, so each block carries its dark counterpart next to it rather
 * than in a separate section far away.
 */

:root {
    --psc-cal-line: #E4E1EE;
    --psc-cal-surface: #FFFFFF;
    --psc-cal-muted: #6A6386;
    --psc-cal-ink: #362B68;
    --psc-cal-accent: #5B4AA6;
    --psc-cal-gold: #C8A348;
    --psc-cal-outside: #FAFAFC;
}

.dark {
    --psc-cal-line: rgba(255, 255, 255, 0.12);
    --psc-cal-surface: rgba(255, 255, 255, 0.02);
    --psc-cal-muted: rgba(255, 255, 255, 0.55);
    --psc-cal-ink: rgba(255, 255, 255, 0.92);
    --psc-cal-accent: #8C7BD8;
    --psc-cal-outside: rgba(255, 255, 255, 0.015);
}

/* ---------------------------------------------------------------- top bar */

.psc-cal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.psc-cal-who {
    min-width: 0;
}

.psc-cal-select {
    width: min(100%, 420px);
    padding: 9px 14px;
    border: 1px solid var(--psc-cal-line);
    border-radius: 10px;
    background: var(--psc-cal-surface);
    color: var(--psc-cal-ink);
    font-size: 14px;
    font-weight: 600;
}

.psc-cal-who-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--psc-cal-muted);
}

.psc-cal-pill,
.psc-cal-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--psc-cal-gold);
    color: #362B68;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.psc-cal-tag {
    background: color-mix(in srgb, var(--psc-cal-accent) 16%, transparent);
    color: var(--psc-cal-accent);
}

.psc-cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.psc-cal-step,
.psc-cal-today {
    border: 1px solid var(--psc-cal-line);
    border-radius: 9px;
    background: var(--psc-cal-surface);
    color: var(--psc-cal-ink);
    font-size: 13px;
    font-weight: 600;
    /* 2.5.8 asks for 24px; 36 is comfortable for a control people tap through a month. */
    min-width: 36px;
    min-height: 36px;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.psc-cal-step:hover,
.psc-cal-today:hover {
    border-color: var(--psc-cal-accent);
}

.psc-cal-month {
    min-width: 165px;
    text-align: center;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--psc-cal-ink);
}

/* ---------------------------------------------------------------- the grid */

.psc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--psc-cal-line);
    border: 1px solid var(--psc-cal-line);
    /* Matches the radius and elevation the rest of the panel's cards carry. */
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(36, 28, 74, 0.04), 0 14px 30px -14px rgba(36, 28, 74, 0.16);
    overflow: hidden;
}

.psc-cal-weekday {
    padding: 9px 10px;
    background: var(--psc-cal-surface);
    color: var(--psc-cal-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.psc-cal-day {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 112px;
    padding: 7px 8px;
    border: 0;
    background: var(--psc-cal-surface);
    text-align: left;
    cursor: pointer;
    transition: background .18s ease;
}

.psc-cal-day:hover {
    background: color-mix(in srgb, var(--psc-cal-accent) 7%, var(--psc-cal-surface));
}

.psc-cal-day.is-outside {
    background: var(--psc-cal-outside);
}

.psc-cal-day.is-outside .psc-cal-daynum {
    opacity: 0.4;
}

.psc-cal-day.is-selected {
    box-shadow: inset 0 0 0 2px var(--psc-cal-accent);
}

.psc-cal-day:focus-visible {
    outline: 2px solid var(--psc-cal-accent);
    outline-offset: -2px;
}

.psc-cal-daynum {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--psc-cal-ink);
}

.psc-cal-day.is-today .psc-cal-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 99px;
    background: var(--psc-cal-accent);
    color: #FFFFFF;
}

.psc-cal-chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.psc-cal-chip {
    display: block;
    padding: 3px 6px;
    border-left: 2px solid var(--psc-cal-accent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--psc-cal-accent) 10%, transparent);
    color: var(--psc-cal-ink);
    font-size: 11px;
    line-height: 1.35;
    /* The day cell must not grow to fit a long title; the detail panel shows it in full. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psc-cal-chip-time {
    font-weight: 700;
    margin-right: 4px;
}

.psc-cal-more {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--psc-cal-muted);
}

/* ---------------------------------------------------------------- day panel */

.psc-cal-detail {
    margin-top: 20px;
    border: 1px solid var(--psc-cal-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(36, 28, 74, 0.04), 0 14px 30px -14px rgba(36, 28, 74, 0.16);
    background: var(--psc-cal-surface);
    padding: 16px 18px 6px;
}

.psc-cal-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--psc-cal-ink);
}

.psc-cal-item {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid var(--psc-cal-line);
}

.psc-cal-item-when {
    flex: 0 0 150px;
    font-size: 13px;
    font-weight: 700;
    color: var(--psc-cal-accent);
}

.psc-cal-item-body {
    flex: 1 1 260px;
    min-width: 0;
}

.psc-cal-item-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--psc-cal-ink);
}

.psc-cal-item-meta,
.psc-cal-item-note,
.psc-cal-item-reminder {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--psc-cal-muted);
}

.psc-cal-item-reminder {
    color: var(--psc-cal-gold);
    font-weight: 600;
}

.psc-cal-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}


/* ---------------------------------------------------------------- phones */

@media (max-width: 860px) {
    /* Seven columns of appointments do not fit a phone. The grid keeps the shape of a month
       so the date is still findable, but the titles drop away and the day panel below — which
       is a list, and reads fine narrow — becomes the way you actually read the schedule. */
    .psc-cal-day {
        min-height: 62px;
        align-items: center;
        padding: 6px 2px;
    }

    .psc-cal-chip,
    .psc-cal-more {
        display: none;
    }

    /* A dot stands in for the hidden titles. Keyed off the class the template sets, because
       Blade leaves whitespace inside the element and :empty would never match. */
    .psc-cal-chips.has-entries::after {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 99px;
        background: var(--psc-cal-accent);
    }

    .psc-cal-item-when {
        flex-basis: 100%;
    }
}

/* ===================================================================================
   Staff panel skin
   -----------------------------------------------------------------------------------
   The CMS is a deep purple content admin; this is a light, quiet calendar that officers
   open to answer one question. Giving them different skins is not decoration — someone
   who holds both accounts can tell at a glance which system they are looking at.

   Everything here hangs off `.fi-panel-staff`, the class Filament already puts on <body>
   per panel, so no second stylesheet, asset registration or build step is involved. The
   file loads in both panels and this half simply never matches in the CMS.
   =================================================================================== */

.fi-panel-staff {
    /*
     * The display face. --psc-display was already referenced by the stat numerals and had
     * never been defined, so it fell through to inherit.
     *
     * The panel asks for Plus Jakarta Sans by name; everything after it is what the page
     * falls back to if Google Fonts cannot be reached, which is the same exposure Manrope
     * carried before it.
     */
    --psc-display: "Sora", ui-sans-serif, system-ui, sans-serif;
    --s-canvas: #F4F3F9;
    --s-surface: #FFFFFF;
    --s-ink: #16141F;
    --s-muted: #6E6A7E;
    --s-line: #ECEAF4;
    --s-accent: #6C60C8;
    --s-accent-soft: #C9C3F0;
    --s-accent-wash: #EFECFC;
    /* The near-black the reference uses for the one active thing on screen. */
    --s-dark: #191726;
    --s-shadow: 0 1px 2px rgba(25, 23, 38, 0.04), 0 10px 26px -14px rgba(25, 23, 38, 0.18);
}

/* ---------------------------------------------------------------- canvas */

.fi-panel-staff.fi-body {
    /* What the sticky topbar copies. --s-canvas is already per-theme, so one line covers
       day and night both. */
    --psc-bar: var(--s-canvas);
    /* The CMS warms its canvas with gold; this one stays cool and almost colourless. */
    --psc-glow: radial-gradient(80% 55% at 100% 0%, rgba(108, 96, 200, 0.07), transparent 60%);
    background-color: var(--s-canvas);
    background-image: var(--psc-glow);
}

.fi-panel-staff .fi-header-heading,
.fi-panel-staff .fi-section-header-heading,
.fi-panel-staff .fi-modal-heading {
    color: var(--s-ink);
}

/* ---------------------------------------------------------------- the rail */

/*
 * White instead of deep purple, which is the change that does most of the work. It keeps
 * the floating geometry from the CMS skin — same inset, same radius — so the two panels
 * are recognisably the same family, just in different registers.
 */
.fi-panel-staff .fi-sidebar,
.fi-panel-staff .fi-sidebar-header {
    background: var(--s-surface);
    border: 0;
    box-shadow: none;
}

.fi-panel-staff .fi-sidebar {
    box-shadow: var(--s-shadow);
}

.fi-panel-staff .fi-sidebar .fi-sidebar-group-label {
    color: var(--s-muted);
}

.fi-panel-staff .fi-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-panel-staff .fi-sidebar .fi-sidebar-group-collapse-btn {
    color: var(--s-muted);
}

.fi-panel-staff .fi-sidebar .fi-sidebar-item-label {
    color: #3A3651;
    font-weight: 600;
}

.fi-panel-staff .fi-sidebar .fi-sidebar-item-btn .fi-icon {
    color: var(--s-muted);
}

.fi-panel-staff .fi-sidebar .fi-sidebar-item-btn:hover {
    background-color: var(--s-accent-wash);
}

.fi-panel-staff .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-panel-staff .fi-sidebar .fi-sidebar-item-btn:hover .fi-icon {
    color: var(--s-accent);
}

/* One dark element on the screen, and it is where you are. */
.fi-panel-staff .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--s-dark);
    border: 0;
    box-shadow: none;
}

.fi-panel-staff .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-panel-staff .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #FFFFFF;
}

.fi-panel-staff .fi-topbar-close-collapse-sidebar-btn,
.fi-panel-staff .fi-topbar-open-collapse-sidebar-btn {
    color: var(--s-muted);
}

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

.fi-panel-staff .fi-section-content-ctn,
.fi-panel-staff .fi-wi-chart,
.fi-panel-staff .fi-ta-ctn {
    border-radius: 22px;
    box-shadow: var(--s-shadow);
}

/* ---------------------------------------------------------------- actions */

/*
 * Solid lavender rather than the CMS's purple gradient. The reference keeps nearly every
 * control light and lets one accent carry the page; a second gradient would compete with
 * the dark active rail item.
 */
.fi-panel-staff .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) {
    background: var(--s-accent);
    color: #FFFFFF;
    box-shadow: 0 8px 18px -10px rgba(108, 96, 200, 0.7);
}

.fi-panel-staff .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover {
    background: #5D52B8;
}

/* ---------------------------------------------------------------- calendar */

/* The calendar's own tokens, retuned. Its structure is unchanged. */
.fi-panel-staff {
    --psc-cal-line: var(--s-line);
    --psc-cal-surface: var(--s-surface);
    --psc-cal-muted: var(--s-muted);
    --psc-cal-ink: var(--s-ink);
    --psc-cal-accent: var(--s-accent);
}

.fi-panel-staff .psc-cal-grid,
.fi-panel-staff .psc-cal-detail {
    border-radius: 22px;
    box-shadow: var(--s-shadow);
}

.fi-panel-staff .psc-cal-pill {
    background: var(--s-dark);
    color: #FFFFFF;
}

.fi-panel-staff .psc-cal-day.is-today .psc-cal-daynum {
    background: var(--s-dark);
}

.fi-panel-staff .psc-cal-day.is-selected {
    box-shadow: inset 0 0 0 2px var(--s-accent);
}

.fi-panel-staff .psc-cal-chip {
    background: var(--s-accent-wash);
    border-left-color: var(--s-accent-soft);
}

/* ---------------------------------------------------------------- summary tiles */

.psc-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.psc-stat {
    position: relative;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 10px 26px -14px rgba(25, 23, 38, 0.18));
    overflow: hidden;
}

.psc-stat-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-muted, #6E6A7E);
}

.psc-stat-value {
    margin: 0;
    font-family: var(--psc-display, inherit);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--s-ink, #16141F);
}

.psc-stat-note {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--s-muted, #6E6A7E);
}

/* The one tile that is about to matter gets the dark treatment. */
.psc-stat.is-next {
    background: var(--s-dark, #191726);
}

.psc-stat.is-next .psc-stat-label {
    color: rgba(255, 255, 255, 0.55);
}

.psc-stat.is-next .psc-stat-value {
    color: #FFFFFF;
    font-size: 19px;
    /* A title can be long; the time below it is the part that must never wrap away. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psc-stat.is-next .psc-stat-note {
    color: var(--s-accent-soft, #C9C3F0);
    font-weight: 600;
}

/* ---------------------------------------------------------------- today at the college */

.psc-day-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.psc-day-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--s-ink, #16141F);
}

.psc-day-sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--s-muted, #6E6A7E);
}

.psc-duty {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 18px 22px;
    margin-bottom: 12px;
    border-radius: 20px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 10px 26px -14px rgba(25, 23, 38, 0.18));
}

.psc-duty-who {
    flex: 0 0 240px;
}

.psc-duty-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-duty-meta {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--s-muted, #6E6A7E);
}

.psc-duty-list {
    flex: 1 1 300px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-duty-item {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 7px 0;
}

.psc-duty-item + .psc-duty-item {
    border-top: 1px solid var(--s-line, #ECEAF4);
}

.psc-duty-time {
    flex: 0 0 148px;
    font-size: 13px;
    font-weight: 700;
    color: var(--s-accent, #6C60C8);
}

.psc-duty-what {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 14px;
    color: var(--s-ink, #16141F);
}

/* The place reads as a quieter second line, not as part of the title. */
.psc-duty-where {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--s-muted, #6E6A7E);
}


/* Who is free is worth a line, not a card each. */
.psc-duty-clear {
    display: block;
    background: transparent;
    box-shadow: none;
    padding: 4px 2px 0;
}

.psc-duty-clear-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-muted, #6E6A7E);
}

.psc-duty-clear-names {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--s-muted, #6E6A7E);
}

@media (max-width: 720px) {
    .psc-duty-who { flex-basis: 100%; }
    .psc-duty-time { flex-basis: 100%; }
}

/* ===================================================================================
   Staff panel, second pass
   -----------------------------------------------------------------------------------
   The first pass got the colours right and the shapes wrong. Held next to the reference
   the differences were all in the same direction — too much furniture, not enough air:
   a wide labelled rail where the reference has a narrow strip of icons, cards outlined
   by their own shadows, a modest heading, and a calendar drawn like a spreadsheet.

   This pass takes weight out rather than adding more.
   =================================================================================== */

.fi-panel-staff {
    /* Hairlines instead of elevation. Separation now comes from whitespace, which is what
       makes the reference read as calm rather than busy. */
    --s-shadow: 0 0 0 1px rgba(25, 23, 38, 0.05);
    --s-line: #F0EEF7;
}

/* ---------------------------------------------------------------- the rail */

/* Narrower, so the collapsed rail reads as a strip of icons rather than a shrunken menu. */
@media (min-width: 1024px) {
    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) {
        width: 74px;
    }

    .fi-panel-staff .fi-sidebar .fi-sidebar-item-btn {
        border-radius: 14px;
    }

    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        /* A square target, icon centred, like the reference's rail buttons. */
        width: 46px;
        height: 46px;
        margin-inline: auto;
        padding: 0;
        justify-content: center;
    }

    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        gap: 10px;
        padding-inline: 0;
    }
}

/* ---------------------------------------------------------------- headings */

.fi-panel-staff .fi-header-heading {
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.fi-panel-staff .fi-page {
    /* The reference separates its blocks by a clear band of empty canvas. */
    gap: 26px;
}

/* ---------------------------------------------------------------- stat tiles */

.fi-panel-staff .psc-stat-row {
    gap: 18px;
    margin-bottom: 8px;
}

.fi-panel-staff .psc-stat {
    padding: 24px 26px;
    border-radius: 24px;
}

.fi-panel-staff .psc-stat-value {
    font-size: 40px;
    letter-spacing: -0.03em;
}

.fi-panel-staff .psc-stat.is-next {
    /* The dark tile is the one thing allowed to carry a shadow, because it is the one
       thing meant to be read first. */
    box-shadow: 0 18px 38px -18px rgba(25, 23, 38, 0.55);
}

.fi-panel-staff .psc-stat.is-next .psc-stat-value {
    font-size: 23px;
    letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------- calendar */

/*
 * The grid was drawn with a 1px gap over a coloured backing, which turns every cell edge
 * into a visible rule — a spreadsheet. Transparent gaps and a hairline on two sides of
 * each cell leave the dates floating on white, which is what makes a calendar look like
 * part of an application rather than a table pasted into one.
 */
.fi-panel-staff .psc-cal-grid {
    gap: 0;
    background: var(--s-surface, #FFFFFF);
    border: 0;
    border-radius: 24px;
    box-shadow: var(--s-shadow);
    overflow: hidden;
}

.fi-panel-staff .psc-cal-weekday {
    padding: 14px 10px;
    font-size: 10.5px;
    color: #9B96AC;
    border-bottom: 1px solid var(--s-line);
}

.fi-panel-staff .psc-cal-day {
    min-height: 124px;
    padding: 10px 11px;
    border-top: 1px solid var(--s-line);
    border-inline-start: 1px solid var(--s-line);
}

/* No rule down the left edge of the first column, or across the row under the headings. */
.fi-panel-staff .psc-cal-day:nth-child(7n + 1) {
    border-inline-start: 0;
}

.fi-panel-staff .psc-cal-day:nth-child(-n + 14) {
    border-top: 0;
}

.fi-panel-staff .psc-cal-day.is-outside {
    background: transparent;
}

.fi-panel-staff .psc-cal-day.is-outside .psc-cal-daynum {
    opacity: 0.32;
}

.fi-panel-staff .psc-cal-day.is-selected {
    background: #FAF9FE;
    box-shadow: inset 0 0 0 1.5px var(--s-accent, #6C60C8);
}

.fi-panel-staff .psc-cal-daynum {
    font-size: 13px;
}

.fi-panel-staff .psc-cal-chip {
    padding: 4px 8px;
    border-left: 0;
    border-radius: 8px;
    font-size: 11.5px;
}

.fi-panel-staff .psc-cal-detail {
    border-radius: 24px;
    padding: 22px 26px 10px;
}

/* ---------------------------------------------------------------- filters */

.psc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 20px;
}

.psc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.psc-field > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s-muted, #6E6A7E);
}

.psc-field .psc-cal-select {
    width: min(100%, 260px);
}

.psc-filters-action {
    margin-inline-start: auto;
}

/* ---------------------------------------------------------------- away badges */

.psc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Amber for leave, blue for a tour — the two read differently at a glance, which is the
   whole point of a badge on a list somebody scans. */
.psc-badge.is-leave {
    background: #FCF1DC;
    color: #8A5B10;
}

.psc-badge.is-tour {
    background: #E2EDFC;
    color: #1C4E8F;
}

.psc-away-span {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-away-back {
    margin-inline-start: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--s-accent, #6C60C8);
}

.psc-away-cover {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--s-ink, #16141F);
}

.psc-duty-clear-note {
    margin: 8px 0 0;
    font-size: 12px;
    font-style: italic;
    color: #9B96AC;
}

/* ---------------------------------------------------------------- coming up */

.psc-upcoming {
    margin-top: 10px;
    padding: 20px 24px;
    border-radius: 22px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05));
}

.psc-upcoming-head {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-upcoming-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-upcoming-item {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 0;
}

.psc-upcoming-item + .psc-upcoming-item {
    border-top: 1px solid var(--s-line, #F0EEF7);
}

.psc-upcoming-when {
    flex: 0 0 120px;
    font-size: 13px;
    font-weight: 700;
    color: var(--s-accent, #6C60C8);
}

.psc-upcoming-who {
    flex: 1 1 240px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--s-ink, #16141F);
}

@media (max-width: 720px) {
    .psc-filters-action { margin-inline-start: 0; }
    .psc-field .psc-cal-select { width: 100%; }
    .psc-upcoming-when { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- avatars */

.psc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 99px;
    overflow: hidden;
    background: var(--s-accent-wash, #EFECFC);
    color: var(--s-accent, #6C60C8);
    font-weight: 700;
    letter-spacing: 0.02em;
    /* A hairline keeps a pale photograph from bleeding into a white card. */
    box-shadow: inset 0 0 0 1px rgba(25, 23, 38, 0.07);
}

.psc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------- dashboard */

.psc-dash-date {
    margin: -10px 0 0;
    font-size: 14px;
    color: var(--s-muted, #6E6A7E);
}

/* The Rector's day leads every dashboard, so it gets the dark treatment the brief's
   mock-up gives it — one block that cannot be mistaken for the cards below. */
.psc-lead {
    padding: 24px 26px;
    border-radius: 24px;
    background: var(--s-dark, #191726);
    color: #FFFFFF;
    box-shadow: 0 18px 40px -20px rgba(25, 23, 38, 0.55);
}

.psc-lead-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.psc-lead .psc-avatar {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.psc-lead-who { min-width: 0; }

.psc-lead-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #FFFFFF;
}

.psc-lead-meta {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

.psc-lead-chip {
    margin-inline-start: auto;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 600;
}


.psc-lead-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-lead-item {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.psc-lead-time {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--s-accent-soft, #C9C3F0);
}

.psc-lead-what {
    display: block;
    margin-top: 5px;
    font-size: 14.5px;
    font-weight: 600;
    color: #FFFFFF;
}

.psc-lead-where {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
}

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

.psc-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.psc-dash-main,
.psc-dash-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.psc-card {
    padding: 20px 24px;
    border-radius: 22px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05));
}

.psc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.psc-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-card-head .psc-card-title { margin-bottom: 0; }

.psc-card-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--s-accent, #6C60C8);
    text-decoration: none;
    white-space: nowrap;
}

.psc-card-link:hover { text-decoration: underline; }


/* ---------------------------------------------------------------- rows */

.psc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.psc-row + .psc-row {
    border-top: 1px solid var(--s-line, #F0EEF7);
}

.psc-row-time {
    flex: 0 0 150px;
    font-size: 13px;
    font-weight: 700;
    color: var(--s-accent, #6C60C8);
}

.psc-row-what {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--s-ink, #16141F);
}

.psc-row-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--s-muted, #6E6A7E);
}

/* On a person row the time belongs on the right, where the eye lands after the name. */
.psc-row-right {
    flex: 0 0 auto;
    max-width: 50%;
    text-align: right;
}

.psc-row-right .psc-row-time {
    flex: none;
    display: block;
}

.psc-row-person .psc-row-what { flex: 1 1 120px; }

/* ---------------------------------------------------------------- quick entry */

.psc-quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.psc-quick-link {
    display: block;
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--s-accent-wash, #EFECFC);
    color: var(--s-accent, #6C60C8);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease;
}

.psc-quick-link:hover { background: #E4DFFA; }

@media (max-width: 1100px) {
    .psc-dash-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .psc-row-time { flex-basis: 100%; }
    .psc-row-right { max-width: 100%; text-align: left; }
}

/* The duty and availability rows put the face above the name on a narrow column, so the
   block has to stop being a plain paragraph stack. */
.psc-duty-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.psc-duty-face { align-self: flex-start; }

.psc-duty-who .psc-duty-name,
.psc-duty-who .psc-duty-meta {
    flex-basis: calc(100% - 52px);
    min-width: 0;
}

.psc-duty-who .psc-duty-meta { margin-inline-start: 52px; margin-top: 0; }

/* ---------------------------------------------------------------- tabs */

.psc-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: #E8E5F3;
}

.psc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--s-muted, #6E6A7E);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.psc-tab:hover { color: var(--s-ink, #16141F); }

.psc-tab.is-on {
    background: var(--s-surface, #FFFFFF);
    color: var(--s-ink, #16141F);
    box-shadow: 0 1px 2px rgba(25, 23, 38, 0.1);
}

.psc-tab-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 99px;
    background: rgba(25, 23, 38, 0.08);
    font-size: 11px;
    font-weight: 700;
}

.psc-tab.is-on .psc-tab-count {
    background: var(--s-accent-wash, #EFECFC);
    color: var(--s-accent, #6C60C8);
}

.psc-field-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.psc-field-inline .psc-cal-select { width: 170px; }

/* ---------------------------------------------------------------- tasks */

.psc-overdue-note {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-radius: 14px;
    background: #FDECEC;
    color: #A32B2B;
    font-size: 13px;
    font-weight: 600;
}

.psc-task {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    margin-bottom: 12px;
    border-radius: 20px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05));
}

/* A red edge rather than a red card: the row still has to be readable. */
.psc-task.is-overdue {
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05)), inset 3px 0 0 #D64545;
}

.psc-task-body { flex: 1 1 300px; min-width: 0; }

.psc-task-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-task-note {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--s-muted, #6E6A7E);
}

.psc-task-meta {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--s-muted, #6E6A7E);
}

.psc-task-due {
    font-weight: 700;
    color: var(--s-accent, #6C60C8);
}

.psc-task.is-overdue .psc-task-due { color: #D64545; }

.psc-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.psc-chip.is-high { background: #FDECEC; color: #A32B2B; }
.psc-chip.is-normal { background: #EFECFC; color: #5D52B8; }
.psc-chip.is-low { background: #EDEFF3; color: #5A6273; }
.psc-chip.is-status { background: #E9F3EC; color: #2C6B45; }
.psc-chip.is-overdue { background: #D64545; color: #FFFFFF; }

@media (max-width: 720px) {
    .psc-tabs { width: 100%; }
    .psc-tab { flex: 1; justify-content: center; padding: 0 10px; }
}

/* ---------------------------------------------------------------- notice board */

.psc-notice-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.psc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--s-muted, #6E6A7E);
    cursor: pointer;
}

.psc-toggle input { accent-color: var(--s-accent, #6C60C8); width: 16px; height: 16px; }

.psc-notice {
    padding: 20px 24px;
    margin-bottom: 12px;
    border-radius: 20px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05));
}

/* An unread notice earns an accent edge; an important one earns a warmer edge that wins,
   because "important" is the louder of the two states. */
.psc-notice.is-unread {
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05)), inset 3px 0 0 var(--s-accent, #6C60C8);
}

.psc-notice.is-important {
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05)), inset 3px 0 0 #D08A12;
}

.psc-notice-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.psc-notice-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-notice-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--s-accent, #6C60C8);
    flex: none;
}

.psc-notice-meta {
    margin: 7px 0 0;
    font-size: 12.5px;
    color: var(--s-muted, #6E6A7E);
}

.psc-notice-audience { font-weight: 600; }

.psc-notice-body {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #3A3651;
    /* Notices are typed as plain text; keep the author's line breaks. */
    white-space: pre-line;
}

.psc-notice-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.psc-notice-files a {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 12px;
    background: var(--s-accent-wash, #EFECFC);
    color: var(--s-accent, #6C60C8);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.psc-notice-files a:hover { background: #E4DFFA; }

.psc-notice-read {
    margin-top: 14px;
    padding: 7px 14px;
    border: 1px solid var(--s-line, #F0EEF7);
    border-radius: 12px;
    background: transparent;
    color: var(--s-muted, #6E6A7E);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.psc-notice-read:hover {
    border-color: var(--s-accent, #6C60C8);
    color: var(--s-accent, #6C60C8);
}

/* ---------------------------------------------------------------- directory */

.psc-dir-count {
    margin: 0 0 4px auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--s-muted, #6E6A7E);
}

.psc-dir-group { margin-bottom: 26px; }

.psc-dir-dept {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-muted, #6E6A7E);
}

.psc-dir-dept-count {
    padding: 1px 8px;
    border-radius: 99px;
    background: rgba(25, 23, 38, 0.07);
    font-size: 11px;
    letter-spacing: 0;
}

.psc-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 14px;
}

.psc-dir-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
    border-radius: 20px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05));
}

.psc-dir-head {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.psc-dir-who { min-width: 0; }

.psc-dir-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-dir-rank {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--s-muted, #6E6A7E);
}

.psc-dir-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 12.5px;
}

.psc-dir-back { color: var(--s-muted, #6E6A7E); font-weight: 600; }

/* A definition list, so a screen reader reads "Phone: …" rather than two loose values. */
.psc-dir-contact {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--s-line, #F0EEF7);
}

.psc-dir-contact > div {
    display: flex;
    gap: 10px;
    font-size: 12.5px;
    min-width: 0;
}

.psc-dir-contact dt {
    flex: 0 0 52px;
    font-weight: 700;
    color: #9B96AC;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
    padding-top: 1px;
}

.psc-dir-contact dd {
    margin: 0;
    min-width: 0;
    color: var(--s-ink, #16141F);
    /* Long addresses must not push the card wider than its column. */
    overflow-wrap: anywhere;
}

.psc-dir-contact a {
    color: var(--s-accent, #6C60C8);
    text-decoration: none;
}

.psc-dir-contact a:hover { text-decoration: underline; }

.psc-dir-foot { margin-top: auto; }

/* ---------------------------------------------------------------- week panel */

.psc-week-meta {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--s-muted, #6E6A7E);
}

.psc-week-away {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #FAF9FE;
    font-size: 12.5px;
    color: var(--s-ink, #16141F);
}

.psc-week-day + .psc-week-day { margin-top: 16px; }

.psc-week-date {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-week-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-week-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--s-ink, #16141F);
}

.psc-week-list li + li { border-top: 1px solid var(--s-line, #F0EEF7); }

.psc-week-time {
    flex: 0 0 140px;
    font-weight: 700;
    color: var(--s-accent, #6C60C8);
}

@media (max-width: 720px) {
    .psc-dir-count { margin-inline-start: 0; }
    .psc-week-time { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- calendar: views */

.psc-tabs-sm .psc-tab { min-height: 32px; padding: 0 13px; font-size: 12.5px; }

.psc-cal-dept { width: min(100%, 200px); margin-bottom: 8px; }

/* The week: seven columns of a working week, each a column of its own entries. */
.psc-weekgrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.psc-weekcol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    padding: 14px 12px;
    border: 0;
    border-radius: 18px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05));
    text-align: left;
    cursor: pointer;
    transition: box-shadow .18s ease;
}

.psc-weekcol.is-selected {
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05)), inset 0 0 0 2px var(--s-accent, #6C60C8);
}

.psc-weekcol-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.psc-weekcol-dow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9B96AC;
}

.psc-weekcol-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--s-ink, #16141F);
}

.psc-weekcol.is-today .psc-weekcol-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    border-radius: 99px;
    background: var(--s-dark, #191726);
    color: #FFFFFF;
    font-size: 13px;
}

.psc-weekcol-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.psc-weekcol-none { color: #C9C5D6; font-size: 13px; }

/* ---------------------------------------------------------------- participants */

.psc-cal-item-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--psc-cal-muted, #6E6A7E);
}

.psc-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border-radius: 99px;
    background: var(--s-accent-wash, #EFECFC);
    color: var(--s-ink, #16141F);
    font-weight: 600;
}

@media (max-width: 960px) {
    /* Seven columns on a phone would be seven slivers; stack them instead. */
    .psc-weekgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
    .psc-weekcol { min-height: auto; }
}

/* ---------------------------------------------------------------- notes */

.psc-notegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
    align-items: start;
}

.psc-note {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--s-surface, #FFFFFF);
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05));
}

.psc-note.is-pinned {
    box-shadow: var(--s-shadow, 0 0 0 1px rgba(25, 23, 38, 0.05)), inset 3px 0 0 #D08A12;
}

.psc-note-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.psc-note-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--s-ink, #16141F);
}

.psc-note-pin { color: #D08A12; font-size: 13px; }

.psc-note-body {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #3A3651;
    /* Notes are typed as plain text; keep the author's line breaks. */
    white-space: pre-line;
    /* A long note must not make its card taller than the row it sits in. */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.psc-note-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--s-line, #F0EEF7);
    font-size: 12px;
    color: var(--s-muted, #6E6A7E);
}

.psc-note-vis.is-shared { color: var(--s-accent, #6C60C8); font-weight: 600; }

.psc-note-remind {
    font-weight: 700;
    color: var(--s-accent, #6C60C8);
}

.psc-note-remind.is-past { color: #9B96AC; font-weight: 600; }

.psc-note-from { font-style: italic; }

/* A long title must push the icons along, not wrap them underneath. */
.psc-note-head .psc-cal-item-actions {
    flex: none;
    flex-wrap: nowrap;
}

/* ===================================================================================
   Night
   -----------------------------------------------------------------------------------
   The staff skin was written for daylight: a near-white canvas, white cards, and one
   near-black marker on wherever you are. At night that inverts — the canvas goes dark,
   cards become a shade lighter than it, and the marker has to become the accent, because
   near-black on dark marks nothing.

   Most of it falls out of the tokens. What follows them are the few components that named
   a colour outright: badges, chips and tabs, which carry meaning in their tint and so
   cannot simply be told to use the surface.
   =================================================================================== */

.dark .fi-panel-staff {
    --s-canvas: #110D22;
    --s-surface: #1B1733;
    --s-ink: #F2F0F8;
    --s-muted: #A49FB8;
    --s-line: rgba(255, 255, 255, 0.09);
    --s-accent: #A99BF0;
    --s-accent-soft: #6F63CF;
    --s-accent-wash: rgba(169, 155, 240, 0.14);
    /* Not near-black any more: at night the active item is the accent. */
    --s-dark: #6C60C8;
    --s-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.dark .fi-panel-staff.fi-body {
    --psc-glow: radial-gradient(80% 55% at 100% 0%, rgba(140, 123, 216, 0.14), transparent 60%);
    background-image: var(--psc-glow);
}

/* The rail is a surface like the cards, not a slab of its own colour. */
.dark .fi-panel-staff .fi-sidebar,
.dark .fi-panel-staff .fi-sidebar-header {
    background: var(--s-surface);
}

.dark .fi-panel-staff .fi-sidebar .fi-sidebar-item-label {
    color: #D9D5E8;
}

/* ---------------------------------------------------------------- tabs */

.dark .fi-panel-staff .psc-tabs {
    background: rgba(255, 255, 255, 0.06);
}

.dark .fi-panel-staff .psc-tab-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--s-ink);
}

/* ---------------------------------------------------------------- chips and badges */

/*
 * Softened, not inverted. A chip's tint is what it means — amber for leave, blue for a tour,
 * red for late — so each keeps its hue and trades the pale fill for a translucent one that
 * sits on a dark card without glowing.
 */
.dark .fi-panel-staff .psc-badge.is-leave { background: rgba(208, 138, 18, 0.2); color: #F0C274; }
.dark .fi-panel-staff .psc-badge.is-tour { background: rgba(70, 136, 221, 0.2); color: #93BDF2; }

.dark .fi-panel-staff .psc-chip.is-high { background: rgba(214, 69, 69, 0.2); color: #F3A3A3; }
.dark .fi-panel-staff .psc-chip.is-normal { background: rgba(169, 155, 240, 0.18); color: #C3B8F7; }
.dark .fi-panel-staff .psc-chip.is-low { background: rgba(255, 255, 255, 0.08); color: #B6BAC6; }
.dark .fi-panel-staff .psc-chip.is-status { background: rgba(62, 160, 104, 0.2); color: #8FD4AC; }
.dark .fi-panel-staff .psc-chip.is-overdue { background: #B93A3A; color: #FFFFFF; }

.dark .fi-panel-staff .psc-overdue-note {
    background: rgba(214, 69, 69, 0.14);
    color: #F3A3A3;
}

/* ---------------------------------------------------------------- body copy */

.dark .fi-panel-staff .psc-note-body,
.dark .fi-panel-staff .psc-notice-body {
    color: #CFCADF;
}

.dark .fi-panel-staff .psc-cal-weekday,
.dark .fi-panel-staff .psc-weekcol-dow,
.dark .fi-panel-staff .psc-dir-contact dt {
    color: #8B86A0;
}

.dark .fi-panel-staff .psc-weekcol-none { color: #4F4A66; }

.dark .fi-panel-staff .psc-dir-dept-count {
    background: rgba(255, 255, 255, 0.09);
}

/* ---------------------------------------------------------------- tinted panels */

.dark .fi-panel-staff .psc-cal-day.is-selected,
.dark .fi-panel-staff .psc-week-away {
    background: rgba(169, 155, 240, 0.08);
}

.dark .fi-panel-staff .psc-quick-link:hover,
.dark .fi-panel-staff .psc-notice-files a:hover {
    background: rgba(169, 155, 240, 0.22);
}

/* The dark "up next" tile and the Rector's block were already dark; at night they would
   vanish into the canvas, so they take the accent instead. */
.dark .fi-panel-staff .psc-stat.is-next,
.dark .fi-panel-staff .psc-lead {
    background: linear-gradient(135deg, #3B3270 0%, #534796 100%);
    box-shadow: 0 18px 38px -20px rgba(0, 0, 0, 0.8);
}

.dark .fi-panel-staff .psc-cal-day.is-today .psc-cal-daynum,
.dark .fi-panel-staff .psc-weekcol.is-today .psc-weekcol-num,
.dark .fi-panel-staff .psc-cal-pill {
    background: var(--s-accent);
    color: #1B1733;
}

/* ---------------------------------------------------------------- the toggle */

/*
 * Sits at the foot of the rail, which is where the reference design puts it and where a
 * setting belongs — out of the way of the things people came to do.
 *
 * The rail has two widths, so the button has two shapes: a square of icon when it is a strip,
 * and a labelled row when it is open. The label is removed rather than hidden from assistive
 * software, because the button's aria-label already says what it does in both states.
 */
.psc-theme-toggle {
    padding: 10px;
    border-top: 1px solid var(--s-line, rgba(25, 23, 38, 0.08));
}

.psc-theme-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--s-muted, #6E6A7E);
    font-size: 13.5px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.psc-theme-btn:hover {
    background: var(--s-accent-wash, rgba(25, 23, 38, 0.06));
    color: var(--s-accent, #16141F);
}

.psc-theme-btn:focus-visible {
    outline: 2px solid var(--s-accent, #6C60C8);
    outline-offset: 2px;
}

/* Collapsed: a square, centred under the icons above it. */
.fi-sidebar:not(.fi-sidebar-open) .psc-theme-btn {
    width: 46px;
    padding: 0;
    margin-inline: auto;
    justify-content: center;
}

.fi-sidebar:not(.fi-sidebar-open) .psc-theme-label {
    display: none;
}

/* The CMS rail is dark at every width, so the button follows it rather than the page. */
.fi-panel-admin .psc-theme-toggle {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.fi-panel-admin .psc-theme-btn {
    color: rgba(255, 255, 255, 0.6);
}

.fi-panel-admin .psc-theme-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--psc-gold, #C8A348);
}

/* x-cloak keeps both icons from flashing before Alpine decides which one belongs. */
[x-cloak] { display: none !important; }

/* The crest is a full-colour mark with dark elements in it; on a night topbar it reads as a
   smudge. Same answer as the sign-in screen: a light plate rather than a recoloured mark. */
.dark .fi-topbar .fi-logo {
    padding: 3px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.93);
    box-sizing: content-box;
}

/* ---------------------------------------------------------------- rail toggle */

/*
 * Filament's own expand control sits in the topbar; on this panel the rail carries it.
 *
 * The container goes, not just the two buttons inside it: it is a 36px block that kept its
 * width once they were hidden, and that width pushed the crest off the rail's icon column.
 * Without it the crest's centre lands at 46px, which is exactly where the rail centres its
 * own icons.
 *
 * This is the desktop control only. The phone's menu button is a separate element outside
 * this container and still works, which matters because there the rail is an off-screen
 * overlay with no visible toggle of its own.
 */
.fi-panel-staff .fi-topbar-collapse-sidebar-btn-ctn {
    display: none;
}

.psc-rail-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 46px;
    min-height: 38px;
    margin: 0 auto 10px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--s-muted, #6E6A7E);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    transition: background .18s ease, color .18s ease;
}

.psc-rail-toggle:hover {
    background: var(--s-accent-wash, #EFECFC);
    color: var(--s-accent, #6C60C8);
}

.psc-rail-toggle:focus-visible {
    outline: 2px solid var(--s-accent, #6C60C8);
    outline-offset: 2px;
}

/* Open: a labelled row aligned with the items below it, not a lone arrow. */
.fi-sidebar.fi-sidebar-open .psc-rail-toggle {
    width: 100%;
    margin-inline: 0;
    padding: 0 12px;
    justify-content: flex-start;
}

/* ===================================================================================
   Staff panel, third pass: the empty day, and everything that moves
   -----------------------------------------------------------------------------------
   Two things were missing rather than wrong.

   The first was the empty day. Most officers open this panel on a morning with nothing
   booked, and every list answered that with one grey sentence in a blank white box — a
   page that looks like it failed to load. An empty state is the most-seen screen here,
   so it is now the most designed one.

   The second was any sense that the thing responds. Nothing moved, nothing lit up under
   the pointer, and the only focus ring was the browser's. Motion here is small and fast
   on purpose: this is a duty roster, not a landing page.
   =================================================================================== */

.fi-panel-staff {
    /* One curve and two durations for the whole panel, so nothing moves to its own beat. */
    --s-ease: cubic-bezier(0.22, 0.68, 0.3, 1);
    --s-fast: 130ms;
    --s-slow: 260ms;
}

/* ---------------------------------------------------------------- the empty day */

.fi-panel-staff .psc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 20px 30px;
}

.fi-panel-staff .psc-empty-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    border-radius: 17px;
    background: var(--s-accent-wash);
    color: var(--s-accent);
    /* Arrives a beat after the card it sits in, which is what stops a blank panel from
       feeling like a loading failure. */
    animation: psc-empty-in 520ms var(--s-ease) both;
}

.fi-panel-staff .psc-empty-mark svg {
    width: 23px;
    height: 23px;
}

.fi-panel-staff .psc-empty-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--s-ink);
}

.fi-panel-staff .psc-empty-hint {
    /* Capped in characters, not pixels: the line stays readable at any card width. */
    max-width: 42ch;
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--s-muted);
}

.fi-panel-staff .psc-empty-action {
    margin-top: 17px;
}

.fi-panel-staff .psc-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border-radius: 12px;
    background: var(--s-dark);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform var(--s-fast) var(--s-ease),
        box-shadow var(--s-slow) var(--s-ease),
        filter var(--s-fast) var(--s-ease);
}

.fi-panel-staff .psc-empty-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(25, 23, 38, 0.7);
    filter: brightness(1.12);
}

.fi-panel-staff .psc-empty-btn:active {
    transform: translateY(0);
}

/* A good empty — nothing outstanding, nobody away — is not the same news as an empty
   schedule, and should not look like a shrug. */
.fi-panel-staff .psc-empty[data-tone="done"] .psc-empty-mark {
    background: rgba(17, 150, 105, 0.12);
    color: #0E8F63;
}

.dark .fi-panel-staff .psc-empty[data-tone="done"] .psc-empty-mark {
    background: rgba(52, 199, 143, 0.16);
    color: #4FD4A4;
}

/* Inside the dashboard's stacked cards the full-height version would push the column
   twice as long, so it tightens up. */
.fi-panel-staff .psc-card .psc-empty {
    padding: 22px 14px 14px;
}

.fi-panel-staff .psc-card .psc-empty-mark {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 14px;
}

.fi-panel-staff .psc-card .psc-empty-mark svg {
    width: 20px;
    height: 20px;
}

.fi-panel-staff .psc-card .psc-empty-title {
    font-size: 13.5px;
}

/* On the dark lead panel the mark has to come off the near-black rather than the canvas. */
.fi-panel-staff .psc-lead .psc-empty-mark {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.fi-panel-staff .psc-lead .psc-empty-title {
    color: #FFFFFF;
}

.fi-panel-staff .psc-lead .psc-empty-hint {
    color: rgba(255, 255, 255, 0.62);
}

@keyframes psc-empty-in {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- hover and press */

/*
 * Pointer only. On a touch screen :hover sticks after a tap, which would leave a row lit
 * up long after the finger has gone.
 */
@media (hover: hover) {
    .fi-panel-staff .psc-card,
    .fi-panel-staff .psc-duty,
    .fi-panel-staff .psc-task {
        transition:
            transform var(--s-slow) var(--s-ease),
            box-shadow var(--s-slow) var(--s-ease);
    }

    .fi-panel-staff .psc-card:hover,
    .fi-panel-staff .psc-duty:hover,
    .fi-panel-staff .psc-task:hover {
        transform: translateY(-2px);
        box-shadow:
            0 0 0 1px rgba(25, 23, 38, 0.06),
            0 16px 32px -22px rgba(25, 23, 38, 0.5);
    }

    .dark .fi-panel-staff .psc-card:hover,
    .dark .fi-panel-staff .psc-duty:hover,
    .dark .fi-panel-staff .psc-task:hover {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.12),
            0 16px 32px -22px rgba(0, 0, 0, 0.8);
    }

    /* The wash bleeds past the card's padding so a hovered row reads as a full-width band
       rather than a floating rectangle. */
    .fi-panel-staff .psc-row {
        margin-inline: -12px;
        padding-inline: 12px;
        border-radius: 13px;
        transition: background-color var(--s-fast) var(--s-ease);
    }

    .fi-panel-staff .psc-row:hover {
        background-color: var(--s-accent-wash);
    }

    .fi-panel-staff .psc-lead-item {
        margin-inline: -10px;
        padding-inline: 10px;
        border-radius: 11px;
        transition: background-color var(--s-fast) var(--s-ease);
    }

    .fi-panel-staff .psc-lead-item:hover {
        background-color: rgba(255, 255, 255, 0.07);
    }
}

/* A link that leads somewhere should say so before it is clicked. */
.fi-panel-staff .psc-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--s-fast) var(--s-ease), color var(--s-fast) var(--s-ease);
}

.fi-panel-staff .psc-card-link::after {
    content: "→";
    font-size: 12px;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--s-fast) var(--s-ease),
        transform var(--s-fast) var(--s-ease);
}

.fi-panel-staff .psc-card-link:hover {
    text-decoration: none;
}

.fi-panel-staff .psc-card-link:hover::after {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------- focus */

/*
 * One ring for the whole panel. Filament rings some of its own controls and nothing else,
 * so keyboard users lost the cursor the moment they left a form.
 */
.fi-panel-staff a:focus-visible,
.fi-panel-staff button:focus-visible,
.fi-panel-staff select:focus-visible,
.fi-panel-staff [tabindex]:focus-visible {
    outline: 2px solid var(--s-accent);
    outline-offset: 2px;
    border-radius: 10px;
}

/* ---------------------------------------------------------------- arrival */

/*
 * The page settles in once, top-down, so the eye is led from the heading to the cards
 * instead of meeting all of it at once. Six steps is enough for every screen here; past
 * that the delay would be noticed as slowness rather than order.
 */
/* .psc-arrive is set for the first nine hundred milliseconds after a page load and never
   again, so a Livewire round trip cannot replay the rise as a flicker. */
.psc-arrive.fi-panel-staff .fi-page > * {
    animation: psc-rise 420ms var(--s-ease) both;
}

.psc-arrive.fi-panel-staff .fi-page > :nth-child(2) { animation-delay: 40ms; }
.psc-arrive.fi-panel-staff .fi-page > :nth-child(3) { animation-delay: 80ms; }
.psc-arrive.fi-panel-staff .fi-page > :nth-child(4) { animation-delay: 120ms; }
.psc-arrive.fi-panel-staff .fi-page > :nth-child(5) { animation-delay: 160ms; }
.psc-arrive.fi-panel-staff .fi-page > :nth-child(n + 6) { animation-delay: 200ms; }

@keyframes psc-rise {
    from {
        opacity: 0;
        transform: translateY(9px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/*
 * Everything above is decoration. Asked for less motion, the panel keeps the colour
 * changes and drops the movement entirely rather than merely shortening it.
 */
@media (prefers-reduced-motion: reduce) {
    .psc-arrive.fi-panel-staff .fi-page > *,
    .fi-panel-staff .psc-empty-mark {
        animation: none;
    }

    .fi-panel-staff *,
    .fi-panel-staff *::before,
    .fi-panel-staff *::after {
        transition-duration: 1ms !important;
    }

    .fi-panel-staff .psc-card:hover,
    .fi-panel-staff .psc-duty:hover,
    .fi-panel-staff .psc-task:hover,
    .fi-panel-staff .psc-empty-btn:hover {
        transform: none;
    }
}

/*
 * Container adjustments. The empty state is one component, but a dark lead slab, a
 * standalone card and the calendar's day list each give it a different amount of room.
 */

/* The lead slab is already a block of colour; a full-height empty inside it would double
   the height of the one thing on the page that is meant to be scanned in a second. */
.fi-panel-staff .psc-lead .psc-empty {
    padding: 6px 0 2px;
    align-items: flex-start;
    text-align: start;
}

.fi-panel-staff .psc-lead .psc-empty-mark {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 14px;
}

/* Under the calendar the day list is already inside a bordered panel. */
.fi-panel-staff .psc-cal-detail .psc-empty {
    padding: 26px 16px 22px;
    border-top: 1px solid var(--psc-cal-line);
}

/* An empty state is not a thing you can click, so it does not rise to meet the pointer
   the way the cards full of rows do. */
@media (hover: hover) {
    .fi-panel-staff .psc-duty.psc-empty:hover {
        transform: none;
        box-shadow: var(--s-shadow);
    }
}

/* ---------------------------------------------------------------- list density */

/*
 * Every list on this panel put its cards straight into .fi-page, which spaces its children
 * by 26px — a band meant to separate blocks, not to sit between consecutive rows of the
 * same list. With each card's own 12px margin on top of it, four tasks spread over a
 * screen and a half. The wrapper gives the list one gap of its own.
 */
.fi-panel-staff .psc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fi-panel-staff .psc-list > .psc-task,
.fi-panel-staff .psc-list > .psc-duty,
.fi-panel-staff .psc-list > .psc-notice {
    margin-bottom: 0;
}

/* The empty state is the one child that should keep the page's own breathing room. */
.fi-panel-staff .psc-list > .psc-empty {
    margin-block: 6px;
}

/* ---------------------------------------------------------------- empty, corrected */

/*
 * .psc-duty is a flex row with a 20px gap; the empty state turns it into a column, and
 * that gap then stacked on top of every margin inside it.
 */
.fi-panel-staff .psc-empty {
    gap: 0;
}

/*
 * On the Rector's slab the empty reads across rather than down: the dark block is the one
 * thing on the dashboard meant to be taken in at a glance, and a centred column doubled
 * its height to say nothing.
 */
.fi-panel-staff .psc-lead .psc-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "mark title"
        "mark hint";
    align-items: center;
    column-gap: 15px;
    padding: 2px 0 0;
    text-align: start;
}

.fi-panel-staff .psc-lead .psc-empty-mark {
    grid-area: mark;
    margin-bottom: 0;
}

.fi-panel-staff .psc-lead .psc-empty-title {
    grid-area: title;
    align-self: end;
}

.fi-panel-staff .psc-lead .psc-empty-hint {
    grid-area: hint;
    align-self: start;
    max-width: 70ch;
    margin-top: 3px;
}

/* ---------------------------------------------------------------- tasks */

/*
 * Three saturated icons — green, purple, red — sat at full strength beside every task,
 * so the row's loudest thing was its furniture rather than its deadline. They fade back
 * until the pointer or the keyboard reaches the card.
 */
@media (hover: hover) {
    .fi-panel-staff .psc-task .psc-cal-item-actions {
        opacity: 0.4;
        transition: opacity var(--s-fast) var(--s-ease);
    }

    .fi-panel-staff .psc-task:hover .psc-cal-item-actions,
    .fi-panel-staff .psc-task:focus-within .psc-cal-item-actions {
        opacity: 1;
    }
}

/* A line of pink with small grey-red text read as a decorative band rather than a count
   of things already late. */
.fi-panel-staff .psc-overdue-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 16px;
    box-shadow: inset 3px 0 0 #D64545;
    font-size: 13.5px;
    font-weight: 650;
}

.fi-panel-staff .psc-overdue-note::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: #D64545;
    /* A slow pulse, not a blink: it should register in peripheral vision without
       demanding the eye come back to it. */
    animation: psc-pulse 2.4s var(--s-ease) infinite;
}

@keyframes psc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-staff .psc-overdue-note::before {
        animation: none;
    }
}

/* ---------------------------------------------------------------- calendar */

/*
 * The day cell is a column flex container, so its children stretch across it. The today
 * marker was already shaped as a 22px circle and was being pulled into a full-width bar
 * — a day that read as selected rather than as today. min-width cannot hold it; only
 * taking it out of the stretch can.
 */
.fi-panel-staff .psc-cal-day.is-today .psc-cal-daynum {
    align-self: flex-start;
    width: 22px;
    padding: 0;
}

/* A month grid you can point at. The cell lifts a shade before it is clicked, and the
   today ring stays legible under it. */
@media (hover: hover) {
    .fi-panel-staff .psc-cal-day {
        transition:
            background-color var(--s-fast) var(--s-ease),
            box-shadow var(--s-fast) var(--s-ease);
    }

    .fi-panel-staff .psc-cal-day:hover {
        background-color: var(--s-accent-wash);
    }

    .fi-panel-staff .psc-cal-chip {
        transition: transform var(--s-fast) var(--s-ease);
    }

    .fi-panel-staff .psc-cal-chip:hover {
        transform: translateX(2px);
    }
}

/* ---------------------------------------------------------------- calendar toolbar */

/*
 * Four groups in a space-between row left a gulf between the filters and the view switch,
 * and hung the officer's chip off the bottom of a block that nothing else lined up with.
 *
 * On a wide screen it becomes the two-row toolbar the layout was always implying: who you
 * are looking at and the way to add to it on top, how you are looking at it and when
 * underneath. Below that width the row simply wraps, which is what it did before.
 */
@media (min-width: 1100px) {
    .fi-panel-staff .psc-cal-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "who  add"
            "tabs nav";
        align-items: center;
        row-gap: 14px;
        column-gap: 18px;
    }

    .fi-panel-staff .psc-cal-bar > .psc-cal-who { grid-area: who; }
    .fi-panel-staff .psc-cal-bar > .psc-cal-add { grid-area: add; justify-self: end; }
    .fi-panel-staff .psc-cal-bar > .psc-tabs { grid-area: tabs; justify-self: start; }
    .fi-panel-staff .psc-cal-bar > .psc-cal-nav { grid-area: nav; justify-self: end; }

    /* The department, the officer and who that officer is belong on one line: they are one
       question — whose day is this? */
    .fi-panel-staff .psc-cal-who {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .fi-panel-staff .psc-cal-who .psc-cal-select {
        width: auto;
        /* Wide enough for "Name — Rank — Department" without an ellipsis. */
        max-width: 420px;
    }

    .fi-panel-staff .psc-cal-who .psc-cal-dept {
        min-width: 165px;
    }

    .fi-panel-staff .psc-cal-who-meta {
        margin: 0;
    }
}

/* ---------------------------------------------------------------- wordmark */

/*
 * Shown beside the crest only while the rail is open. See
 * resources/views/filament/brand/staff-wordmark.blade.php for why.
 */
.fi-panel-staff .psc-wordmark {
    /* The crest's own box ends at 46px, the rail's icon column; the name begins after the
       gap that column leaves, so the two read as one lock-up rather than as a logo with
       something stuck to it. */
    margin-inline-start: 12px;
    /*
     * Not the panel's face. Sora is what the interface is set in and it is solid by
     * design; a name beside a crest wants the opposite — thin, open and a little spaced,
     * so it reads as a mark rather than as the first of the labels below it.
     *
     * Sized against the crest rather than the nav: at 15px it sat under a 40px mark and
     * read as a caption. Light type needs a touch more, so 21px.
     */
    font-family: "Jost", var(--psc-display);
    font-size: 21px;
    font-weight: 300;
    letter-spacing: 0.045em;
    white-space: nowrap;
    color: var(--s-ink);
}

/* Below the rail's own breakpoint it is an overlay, not a column of labels, and the
   wordmark would appear behind it. */
@media (max-width: 1023px) {
    .fi-panel-staff .psc-wordmark {
        display: none !important;
    }
}

.psc-wordmark-enter {
    animation: psc-wordmark-in 220ms var(--s-ease) both;
}

@keyframes psc-wordmark-in {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .psc-wordmark-enter {
        animation: none;
    }
}

/* ---------------------------------------------------------------- the display face */

/*
 * psc-admin.css sets Manrope on the heading classes without scoping it to a panel, so it
 * reached this one too and the page titles stayed in the CMS's face while everything
 * around them changed. These are the same selectors, scoped.
 */
.fi-panel-staff .fi-header-heading,
.fi-panel-staff .fi-simple-header-heading,
.fi-panel-staff .fi-section-header-heading,
.fi-panel-staff .fi-wi-stats-overview-stat-value,
.fi-panel-staff .fi-modal-heading,
.fi-panel-staff .fi-sidebar-group-label {
    font-family: var(--psc-display);
}

/* The pieces this panel draws itself, which inherited from .fi-body and so followed the
   panel font already — named here so the face is declared in one place.

   The wordmark is deliberately not in this list: it has a face of its own, and listing it
   here once meant this rule quietly overriding it from further down the file. */
.fi-panel-staff .psc-lead-title,
.fi-panel-staff .psc-card-title,
.fi-panel-staff .psc-empty-title {
    font-family: var(--psc-display);
}

/* ===================================================================================
   The open rail
   -----------------------------------------------------------------------------------
   Eight identical rows, then a third of the column left blank, then one line reading
   "Night mode". It was a list of links in a white box rather than a place with parts.

   Three things changed: the rows are grouped under headings, the two that carry a
   number now show it, and the blank foot became the panel's one piece of identity.
   =================================================================================== */

/* ---------------------------------------------------------------- group headings */

.fi-panel-staff .fi-sidebar.fi-sidebar-open .fi-sidebar-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--s-muted);
    opacity: 0.75;
}

/*
 * The air before each heading, set in one place.
 *
 * Filament already spaces the groups: .fi-sidebar-nav-groups is a flex column with a 28px
 * gap. Adding a margin on top of that — which is what this rule used to do — put better
 * than 50px between the last row of one group and the next group's label, once the group
 * button's own padding is counted. The gap is the only thing that should decide it.
 */
.fi-panel-staff .fi-sidebar.fi-sidebar-open .fi-sidebar-nav-groups {
    gap: 12px;
}

/* The label row is a button with 8px of padding all round; it needs the height for the
   touch target but not above and below a line of 11px capitals. */
.fi-panel-staff .fi-sidebar.fi-sidebar-open .fi-sidebar-group-btn {
    padding-block: 2px;
}

/*
 * Collapsed, the rail is a strip of icons and a heading has nothing to head — Filament
 * keeps rendering the label, which would stack three lines of tiny capitals between the
 * icons. The gap between groups stays, so the strip still reads in three parts.
 */
.fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label,
.fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
    display: none;
}

/* Collapsed there are no labels, so this gap is the only thing holding the strip in three
   parts — wider than the open rail's, where a heading does that work. */
.fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
    gap: 20px;
}

/* ---------------------------------------------------------------- badges */

.fi-panel-staff .fi-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    min-width: 21px;
    height: 21px;
    padding-inline: 7px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
}

/* On the one dark row the badge has to come off the near-black, not the canvas. */
.fi-panel-staff .fi-sidebar .fi-sidebar-item.fi-active .fi-badge {
    background-color: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
}

/*
 * Collapsed, there is no room beside a 46px icon, so the count becomes a dot on its
 * shoulder: enough to say something is waiting, and the tooltip still names the page.
 */
@media (min-width: 1024px) {
    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item {
        position: relative;
    }

    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn {
        /* x-show hides this with an inline style when the rail closes, and an inline style
           beats a stylesheet. !important is the only way back, and it is confined to the
           collapsed rail, where Alpine has nothing else to say about this element. */
        display: block !important;
        position: absolute;
        top: 4px;
        right: 10px;
        pointer-events: none;
    }

    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn .fi-badge {
        /* The number itself would be unreadable at this size; the dot is the signal. */
        min-width: 9px;
        width: 9px;
        height: 9px;
        padding: 0;
        font-size: 0;
        box-shadow: 0 0 0 2px var(--s-surface);
    }
}

/* ---------------------------------------------------------------- the foot */

.fi-panel-staff .psc-rail-foot {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fi-panel-staff .psc-rail-me {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 6px;
    border-radius: 14px;
    text-decoration: none;
    transition: background-color var(--s-fast) var(--s-ease);
}

.fi-panel-staff .psc-rail-me:hover {
    background-color: var(--s-accent-wash);
}

.fi-panel-staff .psc-rail-me .psc-avatar {
    flex: none;
}

.fi-panel-staff .psc-rail-me-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fi-panel-staff .psc-rail-me-name,
.fi-panel-staff .psc-rail-me-rank {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-panel-staff .psc-rail-me-name {
    font-size: 13px;
    font-weight: 650;
    color: var(--s-ink);
}

.fi-panel-staff .psc-rail-me-rank {
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--s-muted);
}

/*
 * Collapsed, the foot is the icon column again: the face above the switch, both centred,
 * and the name and rank gone. The avatar is still the link to the profile.
 */
@media (min-width: 1024px) {
    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .psc-rail-foot {
        flex-direction: column;
        gap: 6px;
    }

    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .psc-rail-me {
        flex: none;
        justify-content: center;
        padding: 5px;
    }

    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .psc-rail-me-who {
        display: none;
    }
}

/* Below that width the rail is an overlay and always shows its labels. */
@media (max-width: 1023px) {
    .fi-panel-staff .psc-rail-foot {
        flex-direction: row;
    }
}

/* ---------------------------------------------------------------- the foot, cont. */

/*
 * The toggle was built as the whole footer — its own padding, and a rule above it. Beside
 * the identity row it is one of two things, so the separator moves to the row and the
 * button becomes a square of icon. Its aria-label already says what it does, which is why
 * the written label can go.
 *
 * Scoped to .psc-rail-foot, which only this panel has: the CMS still uses the toggle on
 * its own and keeps its own border.
 */
.fi-panel-staff .psc-rail-foot {
    padding: 10px;
    border-top: 1px solid var(--s-line);
}

.fi-panel-staff .psc-rail-foot .psc-theme-toggle {
    flex: none;
    padding: 0;
    border-top: 0;
}

.fi-panel-staff .psc-rail-foot .psc-theme-label {
    display: none;
}

.fi-panel-staff .fi-sidebar.fi-sidebar-open .psc-rail-foot .psc-theme-btn {
    width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
}

/* Collapsed, it matches the 46px icon squares stacked above it. */
.fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .psc-rail-foot .psc-theme-btn {
    width: 46px;
    padding: 0;
    margin-inline: auto;
    justify-content: center;
}


/*
 * The collapsed dot needs to be a dot, not a tint. Filament's badge is a pale wash behind
 * dark text — right for a number in a row, invisible once it is 9px across and the text is
 * gone — so the colour it was given comes forward as the fill.
 */
@media (min-width: 1024px) {
    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn .fi-badge {
        background-color: var(--s-accent);
    }

    .fi-panel-staff .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn .fi-badge.fi-color-danger {
        background-color: #D64545;
    }
}

/* ===================================================================================
   The dashboard, given something to look at
   -----------------------------------------------------------------------------------
   It opened on a paragraph of date, a dark slab and six white cards of text, with
   nothing to catch the eye and no number anywhere. The calendar page had the stat
   tiles; the page people actually land on did not.

   Three additions: the day in four numbers, the week ahead as a shape, and a mark
   against every card heading so the column reads as a set of things rather than a run
   of paragraphs.
   =================================================================================== */

/* ---------------------------------------------------------------- the mark */

.fi-panel-staff .psc-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
}

/*
 * In a card heading it is a tinted chip, not a loose glyph: the colour is what makes
 * seven headings scan as seven headings down a column.
 */
.fi-panel-staff .psc-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fi-panel-staff .psc-card-title .psc-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--s-accent-wash);
    color: var(--s-accent);
}

.fi-panel-staff .psc-card-title .psc-mark svg {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------- stat tiles */

/* The dashboard's row sits directly under the date, above everything else. */
.fi-panel-staff .psc-dash-date + .psc-stat-row {
    margin-top: 2px;
}

/* One tile turns when there is something late in it. The red is the same red the task
   list and the rail's badge use, so it means one thing across the panel. */
.fi-panel-staff .psc-stat.is-alert {
    box-shadow: var(--s-shadow), inset 3px 0 0 #D64545;
}

.fi-panel-staff .psc-stat.is-alert .psc-stat-note {
    color: #D64545;
    font-weight: 650;
}

/* ---------------------------------------------------------------- the week ahead */

/*
 * The box is .psc-card's now — padding, radius, surface, shadow, the lot — so that this
 * card folds, carries a tinted mark and keeps a rule under its heading like the other
 * seven. Only the chart below the heading is still its own.
 */
.fi-panel-staff .psc-week {
    /* A little more room at the foot than a list card: the day labels sit under the bars
       and would otherwise touch the edge. */
    padding-bottom: 16px;
}

.fi-panel-staff .psc-week-bars {
    display: grid;
    /*
     * Seven columns of a fixed width, spread across whatever the card is, rather than
     * seven equal fractions of it. On a wide screen a fraction was 185px, which left a
     * 34px bar adrift in the middle of it and made the ring around today three times
     * wider than anything it contained.
     */
    grid-template-columns: repeat(7, 96px);
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fi-panel-staff .psc-week-day {
    display: grid;
    /* count / bar / label / date — the bar row is the only one that stretches. */
    grid-template-rows: 18px minmax(70px, 1fr) auto auto;
    align-items: end;
    justify-items: center;
    gap: 6px;
    /* The bar row has to be the tall one. At 132px the labels, the count and the padding
       took all but about 40px of it and the bars read as chips rather than as a chart. */
    min-height: 176px;
    padding: 10px 4px 12px;
    border-radius: 16px;
    transition: background-color var(--s-fast) var(--s-ease);
}

@media (hover: hover) {
    .fi-panel-staff .psc-week-day:hover {
        background-color: var(--s-accent-wash);
    }
}

.fi-panel-staff .psc-week-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--s-accent);
}

/*
 * The bar is a full-height track with a fill grown from the bottom, so an empty day is
 * still a visible column rather than a gap in the row. --fill is set per day in the
 * template, as a percentage of the busiest day that week.
 */
.fi-panel-staff .psc-week-bar {
    position: relative;
    width: 100%;
    max-width: 56px;
    align-self: stretch;
    border-radius: 10px;
    /* A shade darker than the hairline: the empty track is half the chart, and at
       --s-line it disappeared into the card behind it. */
    background: color-mix(in srgb, var(--s-muted) 11%, transparent);
    overflow: hidden;
}

.fi-panel-staff .psc-week-bar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--fill, 0%);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--s-accent), var(--s-accent-soft));
    /* Grows once, on arrival, with the rest of the page. */
    animation: psc-week-grow 620ms var(--s-ease) both;
}

.fi-panel-staff .psc-week-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s-muted);
}

.fi-panel-staff .psc-week-date {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--s-ink);
}

/*
 * Today is marked, not filled. A solid block the height of the cell outweighed every bar
 * in the row and read as a selection rather than as the current day.
 */
.fi-panel-staff .psc-week-day.is-today {
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--s-accent-soft);
}

.fi-panel-staff .psc-week-day.is-today .psc-week-label,
.fi-panel-staff .psc-week-day.is-today .psc-week-date {
    color: var(--s-accent);
}

.fi-panel-staff .psc-week-day.is-clear .psc-week-bar {
    /* Nothing booked: the track alone, drawn lighter so the busy days carry the row. */
    background: color-mix(in srgb, var(--s-muted) 6%, transparent);
}

@keyframes psc-week-grow {
    from { height: 0; }
    to { height: var(--fill, 0%); }
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-staff .psc-week-bar::after {
        animation: none;
    }
}

/* On a phone seven 34px bars and their labels will not fit side by side; the row
   becomes a scrollable strip rather than seven slivers. */
@media (max-width: 560px) {
    .fi-panel-staff .psc-week-bars {
        grid-template-columns: repeat(7, 54px);
        justify-content: start;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/*
 * At night the "up next" tile is a violet gradient, and the note under it was drawn in
 * --s-accent-soft — a violet of almost the same value, so the date and the countdown, the
 * only facts on the tile, were the hardest thing on the page to read. White at 0.8 clears
 * 5:1 against the lighter end of that gradient.
 */
.dark .fi-panel-staff .psc-stat.is-next .psc-stat-note {
    color: rgba(255, 255, 255, 0.8);
}

.dark .fi-panel-staff .psc-stat.is-next .psc-stat-label {
    color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------- stat tones */

/*
 * A wash of colour on the tiles, so the row reads as four things rather than four boxes.
 *
 * It is a gradient off one corner and nothing else: the surface colour still sits
 * underneath it, so the tiles stay a set with the cards below them, and the numerals keep
 * the contrast they had against plain white. The tone is named in the template rather than
 * taken from :nth-child, because the calendar's row and the dashboard's hold different
 * things in the same positions.
 */
.fi-panel-staff .psc-stat[data-tone] {
    background-image: linear-gradient(135deg, var(--tone-a) 0%, var(--tone-b) 55%, transparent 100%);
    background-color: var(--s-surface);
}

.fi-panel-staff .psc-stat[data-tone="violet"] {
    --tone-a: rgba(108, 96, 200, 0.14);
    --tone-b: rgba(108, 96, 200, 0.04);
}

.fi-panel-staff .psc-stat[data-tone="blue"] {
    --tone-a: rgba(64, 124, 206, 0.13);
    --tone-b: rgba(64, 124, 206, 0.03);
}

.fi-panel-staff .psc-stat[data-tone="amber"] {
    --tone-a: rgba(200, 163, 72, 0.18);
    --tone-b: rgba(200, 163, 72, 0.04);
}

/* The one that means something: the tile turns warm-to-red when a deadline has passed,
   and keeps the red edge it already had. */
.fi-panel-staff .psc-stat[data-tone="rose"] {
    --tone-a: rgba(214, 69, 69, 0.14);
    --tone-b: rgba(214, 69, 69, 0.03);
}

/*
 * At night the same washes would be invisible against a dark surface, so they are lifted
 * rather than tinted: a little more light in the corner, in the tile's own hue.
 */
.dark .fi-panel-staff .psc-stat[data-tone="violet"] {
    --tone-a: rgba(169, 155, 240, 0.2);
    --tone-b: rgba(169, 155, 240, 0.05);
}

.dark .fi-panel-staff .psc-stat[data-tone="blue"] {
    --tone-a: rgba(122, 171, 240, 0.18);
    --tone-b: rgba(122, 171, 240, 0.04);
}

.dark .fi-panel-staff .psc-stat[data-tone="amber"] {
    --tone-a: rgba(226, 192, 110, 0.2);
    --tone-b: rgba(226, 192, 110, 0.04);
}

.dark .fi-panel-staff .psc-stat[data-tone="rose"] {
    --tone-a: rgba(240, 120, 120, 0.2);
    --tone-b: rgba(240, 120, 120, 0.04);
}

/* The dark tile already carries a gradient of its own; give it a little more depth so it
   still leads the row now that the others are no longer flat. */
.fi-panel-staff .psc-stat.is-next {
    background: linear-gradient(135deg, #272141 0%, var(--s-dark) 58%, #0F0D18 100%);
}

/* ---------------------------------------------------------------- the Rector's block */

/*
 * The college behind the Rector's day.
 *
 * The photograph is a white building under a bright sky, and the block carries white text,
 * so the scrim is doing the real work: near-opaque where the name and the schedule sit,
 * thinning towards the right so the building is still legible as a building. Measured at
 * the text, the darkest pixel the wash leaves is still above 7:1 against white.
 *
 * Two layers in one declaration, scrim first — CSS paints background-image layers front to
 * back, so the gradient has to be written before the photograph.
 */
.fi-panel-staff .psc-lead {
    background-image:
        linear-gradient(
            100deg,
            rgba(13, 11, 22, 0.95) 0%,
            rgba(13, 11, 22, 0.92) 38%,
            rgba(13, 11, 22, 0.72) 72%,
            rgba(13, 11, 22, 0.5) 100%
        ),
        url('/images/psc-building.webp');
    background-size: cover, cover;
    /* 38% down the photograph is the building itself; centred it would be mostly lawn. */
    background-position: center, center 38%;
    background-repeat: no-repeat;
}

/*
 * At night the block was a violet gradient rather than near-black. It keeps that hue, laid
 * over the same photograph, so the two themes are the same room at different hours.
 */
.dark .fi-panel-staff .psc-lead {
    background-image:
        linear-gradient(
            100deg,
            rgba(44, 36, 86, 0.95) 0%,
            rgba(55, 46, 110, 0.9) 38%,
            rgba(66, 55, 134, 0.72) 72%,
            rgba(76, 64, 150, 0.52) 100%
        ),
        url('/images/psc-building.webp');
    background-size: cover, cover;
    background-position: center, center 38%;
    background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- the greeting */

/*
 * The masthead. Filament's own page heading is suppressed for this page — see
 * Dashboard::getHeading() — so this is the first thing on the screen, which is exactly
 * why it is worth the room.
 */
.fi-panel-staff .psc-hello {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Pulls up into the space the suppressed page header used to take. */
    margin: -4px 0 2px;
}

.fi-panel-staff .psc-hello-mark {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    /* The hour of the day, in the one place on the page that is about the hour. */
    background: linear-gradient(140deg, var(--s-accent), var(--s-accent-soft));
    color: #FFFFFF;
    box-shadow: 0 10px 22px -12px var(--s-accent);
}

.fi-panel-staff .psc-hello-words {
    min-width: 0;
}

.fi-panel-staff .psc-hello-title {
    margin: 0;
    font-family: var(--psc-display);
    /* The same scale the page heading had, so nothing jumped when it moved here. */
    font-size: clamp(27px, 2.8vw, 38px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--s-ink);
}

.fi-panel-staff .psc-hello-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 7px 0 0;
    font-size: 13.5px;
    color: var(--s-muted);
}

/* The separator is drawn rather than typed, so it never ends up orphaned on its own line
   when the two halves wrap on a narrow screen. */
.fi-panel-staff .psc-hello-flag::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-inline-end: 9px;
    border-radius: 99px;
    background: currentColor;
    vertical-align: middle;
    opacity: 0.55;
}

.fi-panel-staff .psc-hello-flag {
    font-weight: 600;
    color: var(--s-accent);
}

.fi-panel-staff .psc-hello-flag.is-late {
    color: #D64545;
}

@media (max-width: 560px) {
    .fi-panel-staff .psc-hello {
        gap: 13px;
    }

    .fi-panel-staff .psc-hello-mark {
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }
}

/* ---------------------------------------------------------------- stat tiles, under the pointer */

/*
 * The tiles were the one block on the dashboard that did not answer the pointer.
 *
 * Three things move together, none of them far: the tile lifts, its wash deepens as
 * though more light had fallen on that corner, and the numeral grows a hair from its own
 * baseline so the figure — the only thing on the tile anybody is reading — is what the
 * eye registers. No sheen and nothing sliding across; the motion is in the type and the
 * light.
 */
@media (hover: hover) {
    .fi-panel-staff .psc-stat {
        transition:
            transform var(--s-slow) var(--s-ease),
            box-shadow var(--s-slow) var(--s-ease),
            background-size var(--s-slow) var(--s-ease);
    }

    .fi-panel-staff .psc-stat-value {
        /* From the bottom-left, so the numeral grows into the tile's empty space rather
           than off its own baseline. */
        transform-origin: left bottom;
        transition: transform var(--s-slow) var(--s-ease);
        will-change: transform;
    }

    .fi-panel-staff .psc-stat:hover {
        transform: translateY(-3px);
        box-shadow:
            0 0 0 1px rgba(25, 23, 38, 0.07),
            0 20px 38px -24px rgba(25, 23, 38, 0.55);
    }

    .fi-panel-staff .psc-stat:hover .psc-stat-value {
        transform: scale(1.035);
    }

    /* The wash is a gradient, so there is nothing to fade — it is scaled instead, which
       drags the strong end of it further across the tile. */
    .fi-panel-staff .psc-stat[data-tone] {
        background-size: 185% 185%;
        background-position: 0% 0%;
    }

    .fi-panel-staff .psc-stat[data-tone]:hover {
        background-size: 125% 125%;
    }

    .dark .fi-panel-staff .psc-stat:hover {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.13),
            0 20px 38px -24px rgba(0, 0, 0, 0.85);
    }

    /* The dark tile has no wash to deepen, so it leans into its own shadow instead. */
    .fi-panel-staff .psc-stat.is-next:hover {
        box-shadow: 0 24px 44px -22px rgba(25, 23, 38, 0.75);
    }

    .dark .fi-panel-staff .psc-stat.is-next:hover {
        box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.9);
    }

    /* The red edge on an overdue tile survives the hover shadow that would replace it. */
    .fi-panel-staff .psc-stat.is-alert:hover {
        box-shadow:
            0 0 0 1px rgba(25, 23, 38, 0.07),
            0 20px 38px -24px rgba(214, 69, 69, 0.5),
            inset 3px 0 0 #D64545;
    }

    .fi-panel-staff .psc-stat:active {
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-staff .psc-stat:hover,
    .fi-panel-staff .psc-stat:hover .psc-stat-value,
    .fi-panel-staff .psc-stat:active {
        transform: none;
    }

    .fi-panel-staff .psc-stat[data-tone],
    .fi-panel-staff .psc-stat[data-tone]:hover {
        background-size: 125% 125%;
    }
}

/* ---------------------------------------------------------------- the "up next" tile */

/*
 * The college auditorium behind what is coming next.
 *
 * Copied into public/images rather than referenced in the gallery it came from: gallery
 * files are written by the content import, so a path into them is a path that is empty on
 * a fresh deploy and can be replaced the next time the gallery is edited. This one is
 * committed and served straight from public/.
 *
 * The tile is a third the width of the Rector's block and carries three lines rather than
 * two, so the scrim is heavier and clears later — the photograph is texture here, not a
 * picture of anything.
 */
.fi-panel-staff .psc-stat.is-next {
    background-image:
        linear-gradient(
            100deg,
            rgba(13, 11, 22, 0.96) 0%,
            rgba(13, 11, 22, 0.93) 46%,
            rgba(13, 11, 22, 0.78) 78%,
            rgba(13, 11, 22, 0.62) 100%
        ),
        url('/images/psc-auditorium.webp');
    background-size: cover, cover;
    /* The stage and the first rows; centred it would be mostly ceiling. */
    background-position: center, center 62%;
    background-repeat: no-repeat;
}

.dark .fi-panel-staff .psc-stat.is-next {
    background-image:
        linear-gradient(
            100deg,
            rgba(44, 36, 86, 0.96) 0%,
            rgba(55, 46, 110, 0.92) 46%,
            rgba(66, 55, 134, 0.78) 78%,
            rgba(76, 64, 150, 0.6) 100%
        ),
        url('/images/psc-auditorium.webp');
    background-size: cover, cover;
    background-position: center, center 62%;
    background-repeat: no-repeat;
}

/*
 * Scaling the background on hover is what the other tiles do, and it works there because
 * their background is a gradient. Here it would scale the photograph too and the tile
 * would breathe in and out, so this one keeps still and leans on its shadow instead.
 */
@media (hover: hover) {
    .fi-panel-staff .psc-stat.is-next,
    .fi-panel-staff .psc-stat.is-next:hover {
        background-size: cover, cover;
    }
}

/* ===================================================================================
   The dashboard cards: folding, and a little colour
   =================================================================================== */

/* ---------------------------------------------------------------- folding */

/*
 * A card body animating to and from its own height, with no JavaScript measuring it and
 * no plugin: a one-row grid going from 1fr to 0fr. The row collapses, the inner element
 * clips, and the height is whatever the content is — which is the whole reason not to
 * animate max-height and guess a number that will be wrong for somebody.
 *
 * @alpinejs/collapse would do this too, but Filament does not bundle it; $persist, which
 * keeps the choice, it does.
 */
.fi-panel-staff .psc-card-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--s-slow) var(--s-ease);
}

.fi-panel-staff .psc-card-inner {
    /* A grid row cannot clip on its own; this is the element that does. */
    min-height: 0;
    overflow: hidden;
}

.fi-panel-staff .psc-card.is-shut .psc-card-body {
    grid-template-rows: 0fr;
}

/* Folded, the header is the whole card, so the rule beneath it would be a line to
   nowhere. */
.fi-panel-staff .psc-card.is-shut .psc-card-head {
    margin-bottom: 0;
    border-bottom-color: transparent;
    padding-bottom: 0;
}

.fi-panel-staff .psc-card-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.fi-panel-staff .psc-card-fold {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--s-muted);
    cursor: pointer;
    transition:
        background-color var(--s-fast) var(--s-ease),
        color var(--s-fast) var(--s-ease),
        transform var(--s-slow) var(--s-ease);
}

.fi-panel-staff .psc-card-fold svg {
    width: 15px;
    height: 15px;
}

.fi-panel-staff .psc-card-fold:hover {
    background: var(--s-accent-wash);
    color: var(--s-accent);
}

/* The chevron turns rather than being swapped for a second icon, so the direction it
   points is the direction the card is about to move. */
.fi-panel-staff .psc-card.is-shut .psc-card-fold {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-staff .psc-card-body {
        transition: none;
    }
}

/* ---------------------------------------------------------------- the cards themselves */

/*
 * Seven white rectangles with a hairline each. The header now sits above a rule of its
 * own, and the card carries the faintest wash off its top edge — enough that the surface
 * reads as a surface rather than as a hole cut in the canvas.
 */
.fi-panel-staff .psc-card {
    background-image: linear-gradient(180deg, rgba(108, 96, 200, 0.035) 0%, transparent 92px);
}

.dark .fi-panel-staff .psc-card {
    background-image: linear-gradient(180deg, rgba(169, 155, 240, 0.06) 0%, transparent 92px);
}

.fi-panel-staff .psc-card-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--s-line);
    transition:
        margin var(--s-slow) var(--s-ease),
        padding var(--s-slow) var(--s-ease),
        border-color var(--s-slow) var(--s-ease);
}

/* The mark takes the card's tone, so the column reads as a set of different things
   rather than seven of the same thing. */
.fi-panel-staff .psc-card[data-tone="violet"] .psc-card-title .psc-mark {
    background: rgba(108, 96, 200, 0.13);
    color: #6C60C8;
}

.fi-panel-staff .psc-card[data-tone="blue"] .psc-card-title .psc-mark {
    background: rgba(64, 124, 206, 0.14);
    color: #3C78C6;
}

.fi-panel-staff .psc-card[data-tone="amber"] .psc-card-title .psc-mark {
    background: rgba(183, 142, 44, 0.16);
    color: #9A7726;
}

.fi-panel-staff .psc-card[data-tone="rose"] .psc-card-title .psc-mark {
    background: rgba(214, 69, 69, 0.13);
    color: #C14141;
}

/* At night the tints are lifted rather than laid on, and the glyph brightens with them. */
.dark .fi-panel-staff .psc-card[data-tone="violet"] .psc-card-title .psc-mark {
    background: rgba(169, 155, 240, 0.18);
    color: #B6A9F5;
}

.dark .fi-panel-staff .psc-card[data-tone="blue"] .psc-card-title .psc-mark {
    background: rgba(122, 171, 240, 0.18);
    color: #8FBCF5;
}

.dark .fi-panel-staff .psc-card[data-tone="amber"] .psc-card-title .psc-mark {
    background: rgba(226, 192, 110, 0.18);
    color: #E6C97E;
}

.dark .fi-panel-staff .psc-card[data-tone="rose"] .psc-card-title .psc-mark {
    background: rgba(240, 120, 120, 0.18);
    color: #F08C8C;
}

/* The link sat against the card's edge; now it has the fold button beside it, so it
   stops stretching and the pair stay together. */
.fi-panel-staff .psc-card-head .psc-card-link {
    flex: none;
}

/* ===================================================================================
   Filament's own components, in this panel's voice
   -----------------------------------------------------------------------------------
   Everything the panel draws itself had been styled; everything Filament draws had
   not. So a dashboard of 22px cards and hairlines opened modals with square corners,
   forms with default inputs, and sections that belonged to a different design.

   All of it is scoped .fi-panel-staff.fi-body — three classes — because this sheet is
   loaded before Filament's, and at equal weight the later sheet wins.
   =================================================================================== */

/* ---------------------------------------------------------------- modals */

.fi-panel-staff.fi-body .fi-modal-window {
    border-radius: 26px;
    background-color: var(--s-surface);
    box-shadow:
        0 0 0 1px rgba(25, 23, 38, 0.06),
        0 40px 80px -30px rgba(25, 23, 38, 0.45);
}

.dark .fi-panel-staff.fi-body .fi-modal-window {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 40px 80px -30px rgba(0, 0, 0, 0.9);
}

/* The heading sits above a rule, the way every card on this panel does. */
.fi-panel-staff.fi-body .fi-modal-header {
    padding: 26px 28px 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--s-line);
}

.fi-panel-staff.fi-body .fi-modal-heading {
    font-family: var(--psc-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--s-ink);
}

.fi-panel-staff.fi-body .fi-modal-description {
    margin-top: 4px;
    font-size: 13px;
    color: var(--s-muted);
}

.fi-panel-staff.fi-body .fi-modal-content {
    padding-inline: 28px;
    gap: 18px;
}

/*
 * The buttons were loose at the bottom of the form with nothing between them and the
 * last field, and sat on the left where nothing else on this panel puts them.
 */
.fi-panel-staff.fi-body .fi-modal-footer {
    padding: 18px 28px 24px;
    margin-top: 22px;
    border-top: 1px solid var(--s-line);
}

/*
 * Filament puts the primary action first, which reads correctly against a left edge.
 * Pushed to the right it does not: the eye lands on the last button, and the last button
 * was Cancel. Reversing the row leaves the markup order alone — so the keyboard still
 * reaches the primary action first — while putting it where the eye finishes.
 */
.fi-panel-staff.fi-body .fi-modal-footer-actions {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.fi-panel-staff.fi-body .fi-modal-close-btn {
    border-radius: 10px;
    color: var(--s-muted);
    transition:
        background-color var(--s-fast) var(--s-ease),
        color var(--s-fast) var(--s-ease);
}

.fi-panel-staff.fi-body .fi-modal-close-btn:hover {
    background-color: var(--s-accent-wash);
    color: var(--s-accent);
}

/* ---------------------------------------------------------------- inputs */

.fi-panel-staff.fi-body .fi-input-wrp {
    border-radius: 12px;
    background-color: var(--s-surface);
    box-shadow: 0 0 0 1px var(--s-line);
    transition: box-shadow var(--s-fast) var(--s-ease);
}

.fi-panel-staff.fi-body .fi-input-wrp:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-accent) 35%, var(--s-line));
}

/* One focus ring for the whole panel; Filament's own is a different weight and hue. */
.fi-panel-staff.fi-body .fi-input-wrp:has(:focus),
.fi-panel-staff.fi-body .fi-input-wrp:has(:focus-visible) {
    box-shadow:
        0 0 0 1px var(--s-accent),
        0 0 0 4px var(--s-accent-wash);
}

.fi-panel-staff.fi-body .fi-input {
    font-size: 14px;
    color: var(--s-ink);
}

.fi-panel-staff.fi-body .fi-input::placeholder {
    color: color-mix(in srgb, var(--s-muted) 75%, transparent);
}

.fi-panel-staff.fi-body .fi-fo-field-label-content {
    font-size: 13px;
    font-weight: 650;
    color: var(--s-ink);
}

/* The asterisk was a red tick crowding the last letter of the label. */
.fi-panel-staff.fi-body .fi-fo-field-label-required-mark {
    margin-inline-start: 3px;
    color: color-mix(in srgb, #D64545 80%, transparent);
}

/* ---------------------------------------------------------------- sections */

.fi-panel-staff.fi-body .fi-section {
    border-radius: 22px;
    background-color: var(--s-surface);
    box-shadow: var(--s-shadow);
    background-image: linear-gradient(180deg, rgba(108, 96, 200, 0.035) 0%, transparent 92px);
}

.dark .fi-panel-staff.fi-body .fi-section {
    background-image: linear-gradient(180deg, rgba(169, 155, 240, 0.06) 0%, transparent 92px);
}

.fi-panel-staff.fi-body .fi-section-header {
    padding: 20px 24px 16px;
}

.fi-panel-staff.fi-body .fi-section-header-heading {
    font-family: var(--psc-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--s-ink);
}

.fi-panel-staff.fi-body .fi-section-header-description {
    font-size: 12.5px;
    color: var(--s-muted);
}

.fi-panel-staff.fi-body .fi-section-content {
    padding: 20px 24px 22px;
}

.fi-panel-staff.fi-body .fi-section-content-ctn {
    border-top-color: var(--s-line);
}

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

.fi-panel-staff.fi-body .fi-btn {
    border-radius: 12px;
    font-weight: 600;
    transition:
        transform var(--s-fast) var(--s-ease),
        filter var(--s-fast) var(--s-ease),
        box-shadow var(--s-slow) var(--s-ease);
}

@media (hover: hover) {
    .fi-panel-staff.fi-body .fi-btn:hover {
        transform: translateY(-1px);
    }

    .fi-panel-staff.fi-body .fi-btn:active {
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------------- dropdowns */

.fi-panel-staff.fi-body .fi-dropdown-panel {
    border-radius: 16px;
    background-color: var(--s-surface);
    box-shadow:
        0 0 0 1px rgba(25, 23, 38, 0.06),
        0 24px 48px -22px rgba(25, 23, 38, 0.45);
}

.dark .fi-panel-staff.fi-body .fi-dropdown-panel {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 24px 48px -22px rgba(0, 0, 0, 0.85);
}

.fi-panel-staff.fi-body .fi-dropdown-list-item {
    border-radius: 10px;
    font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-staff.fi-body .fi-btn:hover,
    .fi-panel-staff.fi-body .fi-btn:active {
        transform: none;
    }
}

/* ===================================================================================
   The directory
   -----------------------------------------------------------------------------------
   A roll of officers drawn as plain white boxes with a label-and-value list inside.
   Everything on it was legible and none of it invited a second look.
   =================================================================================== */

/* The cards were sized for a long roll; on a short one a lone card sat marooned in a
   third of a row. A wider track makes a department of one read as a card rather than a
   fragment. */
.fi-panel-staff .psc-dir-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 332px), 1fr));
    gap: 16px;
}

.fi-panel-staff .psc-dir-card {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-image: linear-gradient(180deg, var(--dir-wash, rgba(108, 96, 200, 0.1)) 0%, transparent 108px);
    transition:
        transform var(--s-slow) var(--s-ease),
        box-shadow var(--s-slow) var(--s-ease);
}

/* The Rector's card is the one the page opens on, so it is the one that is marked. */
.fi-panel-staff .psc-dir-card:has(.psc-cal-pill) {
    --dir-wash: rgba(200, 163, 72, 0.18);
    box-shadow: var(--s-shadow), inset 0 2px 0 var(--psc-gold, #C8A348);
}

@media (hover: hover) {
    .fi-panel-staff .psc-dir-card:hover {
        transform: translateY(-3px);
        box-shadow:
            0 0 0 1px rgba(25, 23, 38, 0.07),
            0 22px 40px -24px rgba(25, 23, 38, 0.5);
    }

    .fi-panel-staff .psc-dir-card:has(.psc-cal-pill):hover {
        box-shadow:
            0 0 0 1px rgba(200, 163, 72, 0.3),
            0 22px 40px -24px rgba(25, 23, 38, 0.5),
            inset 0 2px 0 var(--psc-gold, #C8A348);
    }
}

.fi-panel-staff .psc-dir-head {
    align-items: center;
    gap: 14px;
    padding: 20px 22px 16px;
}

.fi-panel-staff .psc-dir-head .psc-avatar {
    /* A ring in the card's own wash, so the face sits on the tint rather than in it. */
    box-shadow: 0 0 0 3px var(--s-surface), 0 0 0 4px var(--s-line);
}

.fi-panel-staff .psc-dir-name {
    font-family: var(--psc-display);
    font-size: 15.5px;
}

.fi-panel-staff .psc-dir-status {
    padding: 0 22px 14px;
    margin: 0;
}

/*
 * The contact block was a definition list read as a table: four-letter labels in one
 * column, the values in another. The labels are marks now and the values are the row, so
 * the eye goes down the numbers rather than down the word "Phone".
 */
.fi-panel-staff .psc-dir-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 14px 14px 10px;
    border-top: 1px solid var(--s-line);
}

.fi-panel-staff .psc-dir-contact > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 11px;
    transition: background-color var(--s-fast) var(--s-ease);
}

.fi-panel-staff .psc-dir-contact > div:hover {
    background-color: var(--s-accent-wash);
}

.fi-panel-staff .psc-dir-contact dt {
    flex: none;
    width: 46px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-muted);
}

.fi-panel-staff .psc-dir-contact dd {
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--s-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-panel-staff .psc-dir-contact dd a {
    color: inherit;
    text-decoration: none;
    transition: color var(--s-fast) var(--s-ease);
}

.fi-panel-staff .psc-dir-contact > div:hover dd a {
    color: var(--s-accent);
}

.fi-panel-staff .psc-dir-foot {
    padding: 4px 22px 18px;
}

/* ---------------------------------------------------------------- department headings */

/*
 * The heading was four small grey capitals and a count, with nothing tying it to the
 * cards under it. A rule carries it across the page, which is what makes a long roll
 * scannable by department rather than by card.
 */
.fi-panel-staff .psc-dir-dept {
    gap: 12px;
    margin-bottom: 14px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    color: var(--s-muted);
}

.fi-panel-staff .psc-dir-dept::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--s-line);
}

.fi-panel-staff .psc-dir-dept-count {
    flex: none;
    order: -1;
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding-inline: 6px;
    border-radius: 99px;
    background: var(--s-accent-wash);
    color: var(--s-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

/* The Rector's pill takes the gold the card is already marked with, rather than the
   near-black it wears elsewhere on a surface that is not tinted. */
.fi-panel-staff .psc-dir-card .psc-cal-pill {
    background: var(--psc-gold, #C8A348);
    color: #2A2208;
}

.dark .fi-panel-staff .psc-dir-card .psc-cal-pill {
    background: rgba(226, 192, 110, 0.9);
    color: #231B06;
}

/* ===================================================================================
   Notes
   -----------------------------------------------------------------------------------
   The same complaint as the directory: legible, and nothing inviting a second look.
   A pinned note was marked by a 3px edge nobody would notice, the three action icons
   shouted at full strength beside every title, and a lone note sat in a third of a row.
   =================================================================================== */

.fi-panel-staff .psc-notegrid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 348px), 1fr));
    gap: 16px;
}

.fi-panel-staff .psc-note {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-image: linear-gradient(180deg, var(--note-wash, rgba(108, 96, 200, 0.07)) 0%, transparent 86px);
    transition:
        transform var(--s-slow) var(--s-ease),
        box-shadow var(--s-slow) var(--s-ease);
}

@media (hover: hover) {
    .fi-panel-staff .psc-note:hover {
        transform: translateY(-3px);
        box-shadow:
            0 0 0 1px rgba(25, 23, 38, 0.07),
            0 22px 40px -24px rgba(25, 23, 38, 0.5);
    }
}

/*
 * A pinned note is the one you meant to come back to, so it is marked the way the
 * Rector's card is: a rule along the top edge and a wash in the same amber, instead of
 * three pixels down the left side that read as a rendering artefact.
 */
.fi-panel-staff .psc-note.is-pinned {
    --note-wash: rgba(208, 138, 18, 0.16);
    box-shadow: var(--s-shadow), inset 0 2px 0 #D08A12;
}

@media (hover: hover) {
    .fi-panel-staff .psc-note.is-pinned:hover {
        box-shadow:
            0 0 0 1px rgba(208, 138, 18, 0.3),
            0 22px 40px -24px rgba(25, 23, 38, 0.5),
            inset 0 2px 0 #D08A12;
    }
}

.fi-panel-staff .psc-note-head {
    align-items: center;
    padding: 17px 20px 12px;
}

.fi-panel-staff .psc-note-title {
    font-family: var(--psc-display);
    font-size: 15px;
    letter-spacing: -0.015em;
}

.fi-panel-staff .psc-note-pin {
    font-size: 15px;
    /* The star is the pin; it should look lit rather than printed. */
    text-shadow: 0 1px 6px rgba(208, 138, 18, 0.55);
}

.fi-panel-staff .psc-note-body {
    padding: 0 20px;
    /* Four lines rather than eight: a card people scan, not read. The note opens in full
       when it is edited. */
    -webkit-line-clamp: 4;
}

.fi-panel-staff .psc-note-foot {
    margin-top: auto;
    padding: 12px 20px 15px;
}

/*
 * Pin, edit and delete at full strength beside every title made the furniture louder
 * than the note. They come forward for the pointer and for the keyboard.
 */
@media (hover: hover) {
    .fi-panel-staff .psc-note .psc-cal-item-actions {
        opacity: 0.38;
        transition: opacity var(--s-fast) var(--s-ease);
    }

    .fi-panel-staff .psc-note:hover .psc-cal-item-actions,
    .fi-panel-staff .psc-note:focus-within .psc-cal-item-actions {
        opacity: 1;
    }

    /* Except on a pinned note, where the star is also the state: dimming it would hide
       which of the two the card is. */
    .fi-panel-staff .psc-note.is-pinned .psc-cal-item-actions {
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-staff .psc-note:hover {
        transform: none;
    }
}