/* =========================================================================
   Duty Station Assignment
   Visual language borrowed from shrtdutymanagement.com/2026AL:
   #f4f6fa page, white 10px cards with a hairline shadow, #2563eb primary,
   pill badges, 6-8px radii, system font stack.
   ========================================================================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f4f6fa;
    color: #1f2937;
    margin: 0;
    /* The safe-area insets are zero on everything that is not a notched phone,
       so this is the ordinary 24px everywhere else. They stop being zero the
       moment `viewport-fit=cover` lets the page paint under the Dynamic Island
       and the home indicator - which is what makes a full-bleed grid possible
       on an iPhone without the first column disappearing into the corner. */
    padding: 24px;
    padding-left:   calc(24px + env(safe-area-inset-left, 0px));
    padding-right:  calc(24px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    line-height: 1.5;

    /* dvh follows the address bar as it collapses; vh does not, and on iOS a
       100vh page is a screenful plus the toolbar, which is a scrollbar nobody
       asked for. The vh line stays as the fallback for older browsers. */
    min-height: 100vh;
    min-height: 100dvh;
}

/* iOS zooms the whole page in when a focused field is under 16px, and then
   leaves it zoomed. Every text field on this site is small by design, so the
   size is lifted on touch screens only - where the zoom would happen. */
@media (max-width: 860px) {
    input[type="text"], input[type="search"], input[type="password"],
    input[type="date"], input[type="number"], select, textarea {
        font-size: 16px;
    }
}

.container { width: 100%; max-width: 880px; margin: 0 auto; }
.container.narrow { max-width: 420px; }
.container.wide { max-width: 1500px; }

h1 { margin: 0 0 4px; font-size: 26px; }
h2 { margin: 0; font-size: 18px; }
h3 { margin: 0 0 4px; font-size: 18px; }

.muted { color: #6b7280; }
.small { font-size: 12px; }
.link { color: #2563eb; text-decoration: none; font-size: 14px; }
.link:hover { text-decoration: underline; }

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.page-head .right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.card {
    background: #fff; border-radius: 10px; padding: 20px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    margin-bottom: 16px;
}

/* ---- forms ------------------------------------------------------------ */
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.field input[type=text],
.field input[type=password] {
    width: 100%; padding: 9px 11px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 14px; font-family: inherit; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- buttons ---------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 6px; border: 1px solid transparent;
    font-size: 14px; font-weight: 500; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: filter .12s, transform .05s;
}
.btn:hover { filter: brightness(.95); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primary   { background: #2563eb; color: #fff; }
.btn-secondary { background: #fff; color: #1f2937; border-color: #d1d5db; }
.btn-success   { background: #10b981; color: #fff; }
.btn-danger    { background: #ef4444; color: #fff; }
.btn-warning   { background: #fde68a; color: #78350f; border-color: #fcd34d; }
/* Light grey twin of .btn-warning, matching the unreviewed card colours. */
.btn-neutral   { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
.btn-sm        { padding: 6px 12px; font-size: 13px; }

/* ---- icon action buttons ----------------------------------------------
   A request's actions are shown as their icon alone. The button keeps its
   colour (.btn-success / .btn-danger / .btn-warning / .btn-neutral /
   .btn-secondary) and the label becomes a tooltip on hover or keyboard
   focus. The icon sits on a small white chip so the colourful status icons
   stay legible on the saturated green and red buttons. Touch screens have no
   hover, so on phones the label is shown inline instead - see the media
   query in swap.css. */
.ico-btn {
    position: relative; padding: 5px; line-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.ico-btn-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: #fff; border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}
.ico-btn-img { width: 30px; height: 30px; object-fit: contain; display: block; }
.ico-btn-text {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #111827; color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
    padding: 6px 9px; border-radius: 6px;
    opacity: 0; pointer-events: none; z-index: 30;
    transition: opacity .14s ease, transform .14s ease;
}
.ico-btn-text::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #111827;
}
.ico-btn:hover .ico-btn-text,
.ico-btn:focus-visible .ico-btn-text {
    opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ---- flashes ---------------------------------------------------------- */
.flash {
    padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px;
}
.flash-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.flash-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.flash-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---- toolbar ---------------------------------------------------------- */
.toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    position: sticky; top: 0; z-index: 40;
}
.toolbar .spacer { margin-left: auto; }
.toolbar .search {
    padding: 8px 11px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 14px; font-family: inherit; min-width: 220px;
}
.toolbar .search:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.save-state {
    font-size: 13px; font-weight: 600; color: #6b7280;
    display: inline-flex; align-items: center; gap: 6px;
}
.save-state::before {
    content: ""; width: 8px; height: 8px; border-radius: 999px; background: #9ca3af;
}
.save-state[data-status="dirty"]  { color: #b45309; }
.save-state[data-status="dirty"]::before  { background: #f59e0b; }
.save-state[data-status="saving"] { color: #1d4ed8; }
.save-state[data-status="saving"]::before { background: #3b82f6; }
.save-state[data-status="saved"]  { color: #047857; }
.save-state[data-status="saved"]::before  { background: #10b981; }
.save-state[data-status="error"]  { color: #b91c1b; }
.save-state[data-status="error"]::before  { background: #ef4444; }

/* ---- center rows ------------------------------------------------------ */
.center-row {
    background: #fff; border-radius: 10px; margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    border-top: 3px solid var(--accent);
    overflow: hidden;
}
.center-row[data-center="HV"]  { --accent: #2563eb; --accent-soft: #eff6ff; }
.center-row[data-center="AKN"] { --accent: #0891b2; --accent-soft: #ecfeff; }
.center-row[data-center="PT"]  { --accent: #7c3aed; --accent-soft: #f5f3ff; }

.center-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid #e5e7eb; background: var(--accent-soft);
}
.center-tag {
    background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
    letter-spacing: .04em; padding: 4px 12px; border-radius: 999px;
}
.center-head h2 { font-size: 17px; }
.center-head .count {
    margin-left: auto; font-size: 13px; font-weight: 600; color: #4b5563;
}

.seniors-bar {
    display: flex; gap: 28px; flex-wrap: wrap;
    padding: 10px 18px; border-bottom: 1px solid #e5e7eb;
    font-size: 13px; color: #4b5563; background: #fbfcfe;
}
.seniors-bar b { color: #374151; font-weight: 600; }

.center-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 18px;
}
.side-col { min-width: 0; }
.side-title {
    font-size: 12px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.station-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }

/* ---- station ---------------------------------------------------------- */
.station {
    border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb;
    display: flex; flex-direction: column;
}
.station-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid #e5e7eb;
    background: #fff; border-radius: 8px 8px 0 0;
}
.station-title { font-size: 14px; font-weight: 700; color: #111827; }
.station-meta {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
}
.pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: rgba(0,0,0,.06); color: #4b5563; white-space: nowrap;
}
.pill-warn { background: #fef3c7; color: #92400e; }
/* Who is signed in. Coloured by how far the role reaches, so the badge is read
   at a glance rather than by the word. */
.pill-staff  { background: #e0f2fe; color: #075985; }
.pill-senior { background: #ede9fe; color: #5b21b6; }
/* The deputy admin holds exactly what a senior holds, so the badge sits beside
   the senior's rather than up with the admin's - a deeper indigo, near enough
   to say "the same rights" and far enough to say "a different person". */
.pill-depadm { background: #e0e7ff; color: #3730a3; }
.pill-admin  { background: #dcfce7; color: #166534; }
.pill-dev    { background: #fee2e2; color: #991b1b; }

.dropzone {
    padding: 8px; display: flex; flex-direction: column; gap: 6px;
    min-height: 54px; border-radius: 0 0 8px 8px;
    transition: background .12s, box-shadow .12s;
}
.dropzone.empty::after {
    content: "Drop staff here";
    display: block; text-align: center; color: #9ca3af; font-size: 12px;
    padding: 10px 0; border: 1px dashed #d1d5db; border-radius: 6px;
}
.dropzone.drag-over {
    background: #eff6ff; box-shadow: inset 0 0 0 2px #93c5fd;
}

/* station that expects an i/c but has none */
.station.needs-ic { border-color: #fcd34d; }
.station.needs-ic .station-head { background: #fffbeb; }

/* the two senior bays lead each side column */
.station.is-senior { border-color: var(--accent); }
.station.is-senior .station-head {
    background: var(--accent-soft); border-bottom-color: var(--accent);
}
.station.is-senior .station-title::before {
    content: "\2605"; margin-right: 5px; color: var(--accent);
}
.station.has-rank-issue { border-color: #fcd34d; }

/* "+ Add" sits with the station's pills, admin only */
.add-btn {
    border: 1px solid #d1d5db; background: #fff; color: #374151;
    border-radius: 999px; padding: 1px 9px; cursor: pointer;
    font-size: 11px; font-weight: 700; font-family: inherit; line-height: 1.6;
}
.add-btn:hover { background: #eef2f7; color: #111827; border-color: #9ca3af; }

/* the per-center parking bay */
.pool { margin: 0 18px 16px; }
.pool .dropzone { flex-direction: row; flex-wrap: wrap; }
.pool .staff { flex: 0 1 260px; }

/* ---- staff card ------------------------------------------------------- */
.staff {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 6px 8px; font-size: 13px;
    box-shadow: 0 1px 1px rgba(15,23,42,.03);
}
.is-admin .staff { cursor: grab; touch-action: none; }
.is-admin .staff:active { cursor: grabbing; }
.staff:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

.staff-main { min-width: 0; flex: 1; }
.staff-name {
    font-weight: 600; color: #111827; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.staff-sub { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 1px; }

.rank {
    padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700;
    letter-spacing: .02em; background: #e5e7eb; color: #374151; white-space: nowrap;
}
.rank[data-rank="SDos"], .rank[data-rank="SRT"], .rank[data-rank="Acting SRT"] {
    background: #fef3c7; color: #92400e;
}
.rank[data-rank="Dos"]   { background: #ede9fe; color: #5b21b6; }
.rank[data-rank="RT I"]  { background: #dbeafe; color: #1e40af; }
.rank[data-rank="RT II"] { background: #f1f5f9; color: #475569; }

.note-tag { font-size: 10px; color: #0e7490; background: #ecfeff; padding: 0 6px; border-radius: 999px; }

.role-flag {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    white-space: nowrap;
}
.role-flag.ic     { background: #10b981; color: #fff; }
.role-flag.deputy { background: #93c5fd; color: #10305f; }

.staff.from-other {
    border-left: 3px solid #f59e0b;
    background: #fffdf5;
}

/* rank sitting in the wrong kind of station - advisory, never blocking */
.rank-warn {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: #fef3c7; color: #92400e; white-space: nowrap; cursor: help;
}
.staff.rank-bad { border-left: 3px solid #d97706; background: #fffbeb; }
.staff.rank-bad.from-other { border-left-color: #d97706; }
.staff.hit { box-shadow: 0 0 0 2px #fbbf24; }
.staff.dim { opacity: .3; }

/* role buttons live on the card, admin only */
.role-btns { display: none; gap: 3px; }
.is-admin .role-btns { display: inline-flex; }
.role-btn {
    border: 1px solid #d1d5db; background: #fff; color: #6b7280;
    font-size: 10px; font-weight: 700; font-family: inherit;
    border-radius: 4px; padding: 2px 6px; cursor: pointer; line-height: 1.4;
}
.role-btn:hover { background: #f3f4f6; color: #111827; }
.role-btn[aria-pressed="true"] { background: #10b981; border-color: #059669; color: #fff; }
.role-btn.dep[aria-pressed="true"] { background: #3b82f6; border-color: #2563eb; color: #fff; }
.move-btn {
    border: 1px solid #d1d5db; background: #fff; color: #6b7280;
    border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 12px;
    line-height: 1.4; font-family: inherit;
}
.move-btn:hover { background: #f3f4f6; color: #111827; }

/* ---- dragging --------------------------------------------------------- */
.staff.dragging { opacity: .35; }
.drag-ghost {
    position: fixed; z-index: 200; pointer-events: none;
    box-shadow: 0 10px 24px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.12);
    transform: rotate(-1.2deg); border-color: #93c5fd;
}
.drop-marker {
    height: 2px; background: #2563eb; border-radius: 2px; margin: 1px 0;
}
body.dragging-active { user-select: none; -webkit-user-select: none; }

/* ---- the sign-in page's role summary ---------------------------------- */
.role-table {
    width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 13px;
}
.role-table th {
    text-align: left; padding: 6px 8px; border-bottom: 1px solid #e5e7eb;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #6b7280;
}
.role-table td {
    padding: 8px; border-bottom: 1px solid #f3f4f6;
    vertical-align: top; line-height: 1.45; color: #374151;
}
.role-table td:first-child { white-space: nowrap; width: 1%; }
.role-table tr:last-child td { border-bottom: none; }

/* ---- move dialog ------------------------------------------------------ */
dialog.move-dialog {
    border: none; border-radius: 10px; padding: 0; max-width: 460px; width: 92vw;
    box-shadow: 0 20px 50px rgba(15,23,42,.25);
}
dialog.move-dialog::backdrop { background: rgba(15,23,42,.35); }
.move-dialog-head {
    padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; gap: 10px;
}
.move-dialog-body { padding: 10px; max-height: 60vh; overflow-y: auto; }
.move-group {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #6b7280; padding: 10px 8px 4px;
}
.move-opt {
    display: flex; width: 100%; align-items: center; gap: 8px; text-align: left;
    padding: 8px 10px; border: none; background: none; border-radius: 6px;
    font-size: 14px; font-family: inherit; color: #111827; cursor: pointer;
}
.move-opt:hover { background: #eef2f7; }
.move-opt[disabled] { color: #9ca3af; cursor: default; }
.move-opt .pill { margin-left: auto; }
.move-opt.off-rank { background: #fffbeb; }
.move-opt.off-rank:hover { background: #fef3c7; }

/* the add-staff picker reuses the move dialog's chrome */
.move-dialog-search { padding: 10px 12px 0; }
.move-dialog-search .search {
    width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
    border: 1px solid #d1d5db; border-radius: 6px;
}
.move-dialog-search .search:focus { outline: 2px solid #2563eb; outline-offset: -1px; }
.move-from {
    margin-left: auto; font-size: 11px; color: #6b7280; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}

/* ---- legend ----------------------------------------------------------- */
.legend {
    display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #4b5563;
    align-items: center;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
    .center-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    body { padding: 12px; }
    .toolbar { position: static; }
    .toolbar .search { min-width: 0; flex: 1 1 100%; }
    .center-body { padding: 12px; }
    .pool { margin: 0 12px 12px; }
}

/* ---- change password --------------------------------------------------
   The card leads with a face, because the one thing this form must not get
   wrong is whose password is being changed. */
.pw-card { padding-top: 0; }

.pw-who {
    display: flex; align-items: center; gap: 14px;
    margin: 0 -16px 18px; padding: 18px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 10px 10px 0 0;
}
.pw-avatar {
    flex: 0 0 auto;
    width: 68px; height: 68px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid #d1d5db;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pw-avatar img {
    width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px;
    transition: opacity .12s ease;
}
/* Nobody chosen yet: the same ring, greyed, so the empty state is the picture
   waiting rather than a hole where one goes. */
.pw-who[data-empty="1"] .pw-avatar { border-style: dashed; background: #f8fafc; }
.pw-who[data-empty="1"] .pw-avatar img { opacity: .55; }
.pw-who[data-empty="0"] .pw-avatar {
    border-color: #93c5fd;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .18);
}

/* ---- the account picker ----------------------------------------------
   The browser's own select is a grey lozenge that looks nothing like the
   fields under it, and this is the first thing the form asks. Appearance is
   stripped and the chevron drawn as a background, which is the one way to get
   a consistent control across Safari, Chrome and Firefox. */
.pw-card select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 100%;
    padding: 11px 40px 11px 13px;
    font: inherit; font-size: 15px; color: #111827;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' \
fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' \
stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.pw-card select:hover { border-color: #9ca3af; }
.pw-card select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
/* A choice made reads as a choice made, not as a placeholder. */
.pw-card select:valid { font-weight: 600; }
.pw-card select:invalid { color: #6b7280; font-weight: 400; }

/* The password boxes, matched to it so the form reads as one set of controls. */
.pw-card input[type="password"] {
    width: 100%;
    padding: 11px 13px;
    font: inherit; font-size: 15px;
    border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.pw-card input[type="password"]:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.pw-card .field { margin-bottom: 16px; }
.pw-card .field > label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 700; color: #374151;
}
.pw-card .field .muted { margin-top: 6px; line-height: 1.5; }
.pw-who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-who-text b { font-size: 17px; color: #111827; }
.pw-who-text span { overflow: hidden; text-overflow: ellipsis; }

/* The admin account changes two sites at once, and says so before the
   password is typed rather than after it is changed. */
.pw-warn {
    margin-top: 10px; padding: 9px 11px; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    font-size: 12px; line-height: 1.5;
}
.pw-nowrap { white-space: nowrap; }

@media (max-width: 860px) {
    .pw-avatar { width: 56px; height: 56px; }
    .pw-who-text b { font-size: 16px; }
}

/* ---- print ------------------------------------------------------------ */
@media print {
    body { background: #fff; padding: 0; }
    .toolbar, .no-print, .role-btns, .move-btn { display: none !important; }
    .center-row { break-inside: avoid; box-shadow: none; border: 1px solid #9ca3af; }
    .staff { break-inside: avoid; }
}

/* A label only a screen reader reads.
   Lives here rather than in one page's stylesheet: it is a utility, and a page
   that used it without loading that stylesheet simply showed the text - which
   is what happened to the Saturday page's ACHS remark. */
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}