/* =========================================================================
   Seniors' leave sheet.

   The colours are the workbook's own, lifted out of Duty Roster_Seniors.xlsx
   rather than picked to look like it, so a senior reading the page and a
   senior reading the spreadsheet are reading the same thing:

       #eaf1dd  light green   Saturday
       #fde9d9  orange        Sunday
       #ff0000  red           working holiday - special Sat, or a PH opened on
       #e5b8b7  light red     everyone off, department closed
       #dbe5f1  light blue    late shift
       #ffffcc  light yellow  important leave - please do not move

   The rest of the page borrows style.css, so it sits with the other sheets.
   ========================================================================= */

:root {
    --sr-sat:     #eaf1dd;
    --sr-sun:     #fde9d9;
    --sr-holiday: #ff0000;
    --sr-closed:  #e5b8b7;
    --sr-late:    #dbe5f1;
    --sr-imp:     #ffffcc;
    --sr-line:    #d7dbe3;
    --sr-cell:    30px;
}

/* --------------------------------------------------------------- month bar */

.sr-bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.sr-bar-spacer { margin-left: auto; }

.sr-monthnav { display: flex; align-items: center; gap: 6px; }

.sr-monthpick {
    padding: 7px 12px; font-size: 14px; font-weight: 600;
    border: 1px solid #d1d5db; border-radius: 8px;
    background: #fff; color: #1f2937; min-width: 180px;
}

/* ------------------------------------------------------------------ legend */

.sr-legend {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 16px; margin-bottom: 12px; font-size: 12px;
}
.sr-legend-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sr-legend-title {
    font-weight: 700; color: #6b7280; text-transform: uppercase;
    letter-spacing: .04em; font-size: 11px; min-width: 44px;
}
.sr-legend-item { display: inline-flex; align-items: center; gap: 6px; color: #4b5563; }

.sr-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 20px; padding: 0 6px;
    border: 1px solid var(--sr-line); border-radius: 4px;
    font-size: 11px; font-weight: 700; background: #fff; color: #1f2937;
}
.sr-swatch {
    width: 20px; height: 20px; border-radius: 4px;
    border: 1px solid var(--sr-line); display: inline-block;
}
.sr-swatch.sr-day-sat     { background: var(--sr-sat); }
.sr-swatch.sr-day-sun     { background: var(--sr-sun); }
.sr-swatch.sr-day-holiday { background: var(--sr-holiday); }
.sr-swatch.sr-day-closed  { background: var(--sr-closed); }
.sr-swatch-imp            { background: var(--sr-imp); box-shadow: inset 0 0 0 2px #eab308; }

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

.sr-card { padding: 0; overflow: hidden; }

/* The grid is wider than any screen, so it scrolls inside its own card rather
   than pushing the page sideways - the side rail and the month bar stay put. */
.sr-scroll { overflow: auto; max-height: calc(100dvh - 300px); }

.sr-grid {
    border-collapse: separate; border-spacing: 0;
    font-size: 12px; white-space: nowrap;
}

.sr-grid th, .sr-grid td {
    border-right: 1px solid var(--sr-line);
    border-bottom: 1px solid var(--sr-line);
    padding: 0; text-align: center; vertical-align: middle;
}

/* Two sticky headers and one sticky first column. The name column has to sit
   above the day headers where they cross, hence the third z-index. */
.sr-grid thead th {
    position: sticky; background: #f8fafc; z-index: 2;
    font-weight: 700; color: #374151;
}
.sr-row-dow th { top: 0; height: 22px; font-size: 10px; color: #6b7280; }
.sr-row-num th { top: 22px; height: 22px; font-size: 11px; }

.sr-name, .sr-name-head {
    position: sticky; left: 0; z-index: 3;
    background: #f8fafc; text-align: left;
    padding: 0 12px; min-width: 96px;
    border-right: 2px solid #cbd5e1;
    font-weight: 600; color: #1f2937;
}
.sr-name-head { z-index: 4; }

.sr-day { width: var(--sr-cell); min-width: var(--sr-cell); }

/* The day's colour, on the header and on every cell in the column alike. */
.sr-day-sat     { background: var(--sr-sat); }
.sr-day-sun     { background: var(--sr-sun); }
.sr-day-holiday { background: var(--sr-holiday); color: #fff; }
.sr-day-closed  { background: var(--sr-closed); }

/* The header keeps the day colour even though thead sets its own background. */
.sr-grid thead th.sr-day-sat     { background: var(--sr-sat); }
.sr-grid thead th.sr-day-sun     { background: var(--sr-sun); }
.sr-grid thead th.sr-day-holiday { background: var(--sr-holiday); color: #fff; }
.sr-grid thead th.sr-day-closed  { background: var(--sr-closed); }

/* ------------------------------------------------------------------- cells */

.sr-cell {
    height: var(--sr-cell); width: var(--sr-cell); min-width: var(--sr-cell);
    font-size: 10px; font-weight: 700; color: #1f2937;
    cursor: default; user-select: none; -webkit-user-select: none;
    position: relative;
}
body.is-editable .sr-cell:not(.sr-locked) { cursor: pointer; }
.sr-cell:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

/* A closed day takes no mark at all, so it does not offer to. */
.sr-locked { cursor: not-allowed; }

/* The marks that carry a colour, and the two that deliberately do not.
   
   **AL and CL are left plain.** They are most of what is on the sheet - 243
   and 99 days of 2026 between them - and colouring them painted over the day
   colours underneath, which are the ones that have to be read: which Saturday,
   which holiday, which closure. Leave is legible from the letters. The one
   time leave takes a colour is when somebody has marked it important, and that
   yellow means something precisely because nothing around it is coloured. */
.sr-code-trip { background: #fae8ff; font-size: 9px; }
.sr-code-p    { background: var(--sr-late); }
.sr-code-od   { background: #dcfce7; }
.sr-code-x    { background: #e5e7eb; color: #6b7280; }
.sr-code-al, .sr-code-cl { color: #374151; }

/* A mark on a coloured day keeps the mark's colour - what somebody is doing
   matters more than which day it is, and the column header still says the day.
   OD on a red holiday is the exception: it is the whole point of the red. */
.sr-cell.sr-day-holiday          { color: #fff; }
.sr-cell.sr-day-holiday.sr-code-od {
    background: var(--sr-holiday); color: #fff;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--sr-holiday);
}

/* Important: the workbook's yellow, ringed so it survives being laid over a
   Saturday's green - the ring is the part that says "do not move this". */
.sr-imp {
    background: var(--sr-imp) !important;
    box-shadow: inset 0 0 0 2px #eab308;
    color: #713f12;
}
.sr-imp::after {
    content: ''; position: absolute; top: 1px; right: 1px;
    width: 0; height: 0;
    border-top: 5px solid #ca8a04; border-left: 5px solid transparent;
}

/* Selected, while a run is being painted. */
.sr-sel {
    box-shadow: inset 0 0 0 2px #2563eb;
    background-image: linear-gradient(rgba(37, 99, 235, .12), rgba(37, 99, 235, .12));
}

/* ------------------------------------------------------------------ counts */

.sr-count-head {
    border-left: 2px solid #cbd5e1;
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; padding: 0 6px;
}
.sr-count-sub { font-size: 10px; color: #9ca3af; font-weight: 600; width: 34px; }

/* Each block's head wears the colour its figures are written in, so the three
   totals read as three things - duties, late shifts, leave taken - rather than
   six grey columns that all say Mth and Yr. Grey was the old head, and the
   feedback was that it did not stand apart from the days beside it. */
.sr-grid thead th.sr-count-head-od,   .sr-grid thead th.sr-count-sub-od   { background: #dcfce7; color: #166534; }
.sr-grid thead th.sr-count-head-late, .sr-grid thead th.sr-count-sub-late { background: #dbeafe; color: #1d4ed8; }
.sr-grid thead th.sr-count-head-cl,   .sr-grid thead th.sr-count-sub-cl   { background: #fef3c7; color: #92400e; }
.sr-grid thead th.sr-count-sub-od, .sr-grid thead th.sr-count-sub-late,
.sr-grid thead th.sr-count-sub-cl { opacity: .85; }

.sr-count {
    width: 34px; min-width: 34px; height: var(--sr-cell);
    font-weight: 700; font-size: 12px; background: #f8fafc; color: #374151;
}
.sr-count-od   { color: #166534; }
.sr-count-late { color: #1d4ed8; }
.sr-count-cl   { color: #92400e; }
.sr-count-ytd  { background: #eef2f7; }
/* The month column of each pair carries the divider, so the three totals read
   as three blocks rather than six loose columns. */
td.sr-count-od:not(.sr-count-ytd),
td.sr-count-late:not(.sr-count-ytd),
td.sr-count-cl:not(.sr-count-ytd) { border-left: 2px solid #cbd5e1; }

/* On a wide screen the grid is narrower than its card, which left a bare strip
   down the right that read as a column somebody had forgotten to fill. This
   column takes the slack instead, so every real column keeps its own width and
   the table still finishes at the card's edge. */
.sr-fill { width: 100%; border-right: 0 !important; background: #fff; }
.sr-grid thead th.sr-fill { background: #f8fafc; }

.sr-help { padding: 10px 16px; border-top: 1px solid #eef1f5; }
.sr-help kbd {
    display: inline-block; padding: 1px 5px; border-radius: 4px;
    border: 1px solid #d1d5db; border-bottom-width: 2px;
    background: #fff; font-family: inherit; font-size: 11px; font-weight: 700;
    color: #374151;
}

/* ------------------------------------------------------- floating palette */

/* `display: flex` on a class beats the browser's own [hidden] rule, so the
   hidden state has to be said again here or the palette sits on the page from
   the moment it loads, offering to mark a cell nobody has picked. */
.sr-palette[hidden] { display: none; }

.sr-palette {
    position: fixed; z-index: 40;
    display: flex; align-items: center; gap: 4px;
    padding: 6px; border-radius: 10px;
    background: #fff; border: 1px solid #d1d5db;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
.sr-palette-count {
    font-size: 11px; font-weight: 700; color: #6b7280;
    padding: 0 6px 0 4px; border-right: 1px solid #e5e7eb; align-self: stretch;
    display: flex; align-items: center;
}
.sr-palette-btn {
    min-width: 34px; height: 28px; padding: 0 7px;
    border: 1px solid var(--sr-line); border-radius: 6px;
    background: #fff; color: #1f2937;
    font-size: 11px; font-weight: 700; cursor: pointer;
}
.sr-palette-btn:hover { filter: brightness(.94); }
/* Full / AM / PM, as one segmented control with the H key on its corner. */
.sr-palette-half {
    position: relative; display: inline-flex; align-items: center;
    margin: 0 2px; padding: 0 12px 0 0;
    border-left: 1px solid #e5e7eb; padding-left: 6px;
}
.sr-palette-halfbtn {
    min-width: 30px; padding: 0 6px; border-radius: 0; margin-left: -1px;
    font-size: 10px; color: #6b7280; background: #fff;
}
.sr-palette-halfbtn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.sr-palette-halfbtn:nth-last-child(2) { border-radius: 0 6px 6px 0; }
.sr-palette-halfbtn.is-on {
    background: #1e40af; border-color: #1e40af; color: #fff; position: relative; z-index: 1;
}
.sr-key-half { right: 2px; top: 1px; }
.sr-palette-imp   { background: var(--sr-imp); color: #a16207; border-color: #eab308; }
.sr-palette-clear { background: #f3f4f6; color: #6b7280; font-size: 15px; }

/* -------------------------------------------------------------- batch modal */

.sr-modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sr-modal[hidden] { display: none; }

.sr-modal-box {
    background: #fff; border-radius: 12px; width: 100%; max-width: 560px;
    max-height: 90dvh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
}
.sr-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #eef1f5;
}
.sr-modal-x {
    border: 0; background: none; font-size: 24px; line-height: 1;
    color: #9ca3af; cursor: pointer; padding: 0 4px;
}
.sr-modal-body { padding: 16px 20px; overflow: auto; }
.sr-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid #eef1f5;
}

.sr-field { margin-bottom: 14px; }
.sr-field-label {
    display: block; font-size: 12px; font-weight: 700; color: #374151;
    margin-bottom: 6px;
}
.sr-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sr-field-row .sr-field { flex: 1 1 180px; }
.sr-field-check { display: flex; align-items: flex-end; padding-bottom: 8px; }

.sr-field input[type="date"], .sr-field select {
    width: 100%; padding: 7px 10px; font-size: 14px;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #1f2937;
}

.sr-people {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 132px; overflow: auto;
    padding: 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafbfc;
}
.sr-person, .sr-dow, .sr-check {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: #374151; cursor: pointer;
}
.sr-person { padding: 3px 8px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; }
.sr-person:has(input:checked) { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

.sr-people-actions { display: flex; gap: 6px; margin-top: 6px; }
.sr-dows { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }

.sr-batch-preview { margin-top: 8px; min-height: 18px; }
.sr-batch-error { margin: 10px 0 0; }

/* ------------------------------------------------------------------- toast */

.sr-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 80; padding: 10px 18px; border-radius: 999px;
    background: #111827; color: #fff; font-size: 13px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .3);
}
.sr-toast[hidden] { display: none; }
.sr-toast.sr-toast-bad { background: #b91c1c; }

/* ------------------------------------------------------------------- print */

@media print {
    .no-print { display: none !important; }
    body { padding: 0; background: #fff; }
    .sr-card { border: 0; box-shadow: none; }
    .sr-scroll { overflow: visible; max-height: none; }
    .sr-grid { font-size: 9px; }
    /* Backgrounds are the whole meaning of this sheet, so they are printed. */
    .sr-grid th, .sr-grid td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* Narrow screens: the cells shrink rather than the grid growing a second
   scrollbar, and the name column gives up some of its width. */
@media (max-width: 700px) {
    :root { --sr-cell: 26px; }
    .sr-name, .sr-name-head { min-width: 76px; padding: 0 8px; font-size: 11px; }
    .sr-scroll { max-height: calc(100dvh - 260px); }
}

/* =========================================================================
   Year view - the workbook's own shape, twelve blocks down the page - with a
   year-to-date table over the top of them.
   ========================================================================= */

/* The source line under the title: where the sheet came from and when. */
.sr-source { margin-top: 3px; }
.sr-source b { color: #4b5563; font-weight: 600; }

/* Month / Year, as two tabs rather than a dropdown. */
.sr-viewtabs {
    display: inline-flex; padding: 3px; gap: 2px;
    background: #e9edf3; border-radius: 9px;
}
.sr-viewtab {
    padding: 5px 14px; border-radius: 7px;
    font-size: 13px; font-weight: 600; color: #4b5563;
    text-decoration: none; line-height: 1.4;
}
.sr-viewtab:hover  { color: #1f2937; }
.sr-viewtab.active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(15,23,42,.12); }

/* ------------------------------------------------------------ YTD table */

.sr-ytd { padding: 0; margin-bottom: 12px; overflow: hidden; }
.sr-ytd-head {
    padding: 14px 16px 10px;
    display: flex; flex-direction: column; gap: 3px;
}
.sr-ytd-scroll { overflow-x: auto; }

.sr-ytd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sr-ytd-table th, .sr-ytd-table td {
    padding: 7px 10px; text-align: center; border-top: 1px solid #eef1f5;
}
.sr-ytd-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; background: #f8fafc; border-top: 0;
    position: sticky; top: 0;
}
.sr-ytd-name { text-align: left !important; font-weight: 600; color: #1f2937; white-space: nowrap; }
.sr-ytd-table tbody tr:hover { background: #f8fafc; }

/* The two columns worth comparing get a bar behind the number, so who is
   carrying the Saturdays is a glance rather than a read down the column. */
.sr-ytd-od, .sr-ytd-late { position: relative; min-width: 74px; }
.sr-ytd-od b, .sr-ytd-late b { position: relative; }
.sr-ytd-bar {
    position: absolute; left: 8px; right: 8px; bottom: 4px; height: 4px;
    border-radius: 2px; background: #e5e7eb; overflow: hidden;
}
.sr-ytd-bar::before {
    content: ''; position: absolute; inset: 0 auto 0 0;
    width: var(--w, 0%); border-radius: 2px;
}
.sr-ytd-od   .sr-ytd-bar::before { background: #16a34a; }
.sr-ytd-late .sr-ytd-bar::before { background: #2563eb; }
.sr-ytd-od   b { color: #166534; }
.sr-ytd-late b { color: #1d4ed8; }
.sr-ytd-cl   b { color: #92400e; }

/* ------------------------------------------------------- the month blocks */

.sr-monthblock { margin-bottom: 12px; }
.sr-monthblock-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 10px 16px 8px;
}
.sr-monthblock-head h2 { font-size: 15px; color: #1f2937; }

/* In year view each block sizes to its own content - twelve nested scrollers
   all claiming most of the screen would leave nothing to scroll the page by. */
.sr-monthblock .sr-scroll { max-height: none; }

@media print {
    .sr-viewtabs, .sr-monthblock-head .link { display: none !important; }
    .sr-monthblock { break-inside: avoid; page-break-inside: avoid; }
    .sr-ytd { break-after: page; page-break-after: always; }
}

/* =========================================================================
   The lock, the save, and the day's remark.
   ========================================================================= */

.sr-mark { display: block; line-height: 1; }

/* Half a day of leave: "am" or "pm" in small under the mark, and a light
   diagonal across the cell so a morning off can be told from a whole day at
   the distance a month is read from. Empty and invisible on a whole day. */
.sr-half-tag {
    display: block; line-height: 1; margin-top: 1px;
    font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #6b7280;
}
.sr-half-tag:empty { display: none; }
.sr-cell.sr-half {
    background-image: linear-gradient(135deg, transparent 49%, rgba(107, 114, 128, .28) 49%,
                                      rgba(107, 114, 128, .28) 51%, transparent 51%);
}
.sr-cell.sr-half.sr-imp { color: #713f12; }
.sr-cell.sr-half.sr-imp .sr-half-tag { color: #a16207; }
.sr-chip.sr-half { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.sr-chip.sr-half .sr-half-tag { margin-top: 1px; }

/* A dog-ear in the bottom-left corner says this day carries a note, whichever
   way the week column is set - the top-right corner is the important flag's. */
.sr-has-note::before {
    content: ''; position: absolute; left: 1px; bottom: 1px;
    width: 0; height: 0;
    border-bottom: 5px solid #6366f1; border-right: 5px solid transparent;
}

/* ------------------------------------------------- the week remark column */

/* One column at the end of every week, holding that senior's notes for it.
   Written on the day, read here - see refreshWeek() in seniors.js.

   Shut, it is a 16px strip: enough to keep the week boundary visible and to
   fly a flag on the weeks that have something in them, so a hidden remark is
   never a lost one. Open, it takes the width of the words. */
.sr-wk-head, .sr-wk {
    border-left: 2px solid #cbd5e1;
    width: 16px; min-width: 16px; max-width: 16px;
    overflow: hidden; padding: 0;
    transition: width .12s ease, min-width .12s ease, max-width .12s ease;
}
.sr-wk-head { background: #f1f5f9 !important; }
.sr-wk      { background: #fbfcfe; }

.sr-wk-label, .sr-wk-text { display: none; }
.sr-wk-mini {
    display: block; font-size: 9px; color: #94a3b8; font-weight: 700;
    writing-mode: vertical-rl; line-height: 16px;
}

/* The flag on a shut column: a week with notes in it. */
.sr-wk-flag { display: none; }
.sr-wk.has-note .sr-wk-flag {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: #6366f1; margin: 0 auto;
}

/* Open. */
body.sr-remarks-on .sr-wk-head,
body.sr-remarks-on .sr-wk {
    width: 168px; min-width: 168px; max-width: 168px;
    padding: 3px 7px; white-space: normal;
}
body.sr-remarks-on .sr-wk-mini { display: none; }
/* Written to out-specify `.sr-wk.has-note .sr-wk-flag` above, which would
   otherwise keep the dot lit next to the words it stands in for. */
body.sr-remarks-on .sr-wk.has-note .sr-wk-flag,
body.sr-remarks-on .sr-wk-flag { display: none; }
body.sr-remarks-on .sr-wk-label {
    display: block; font-size: 10px; color: #64748b; letter-spacing: .02em;
    line-height: 1.3; text-transform: none; font-weight: 700;
}
body.sr-remarks-on .sr-wk-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-align: left;
    font-size: 9px; font-weight: 500; line-height: 1.25; color: #4b5563;
}
body.sr-remarks-on .sr-wk.has-note { background: #f5f3ff; }
body.sr-remarks-on .sr-cell { height: 34px; }

/* The switch beside Batch set. */
.sr-switch {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #374151; cursor: pointer; user-select: none;
}

/* ------------------------------------------------- unsaved, and read-only */

/* A cell changed but not yet saved. The corner tick is small on purpose: the
   point is to be able to find them, not to make the grid shout. */
.sr-dirty { box-shadow: inset 0 0 0 2px #f59e0b; }
.sr-dirty.sr-sel { box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #fcd34d; }

/* The counts are the server's arithmetic. While anything is unsaved they are
   no longer true, so they say so rather than sitting there looking official. */
body.sr-counts-stale .sr-count { opacity: .45; font-style: italic; }

/* Without the lock the sheet is drawn exactly the same and simply does not
   take a click - the padlock beside Save is where the explanation lives. */
body.sheet-readonly .sr-cell { cursor: default !important; }
body.sheet-readonly .sr-palette { display: none !important; }

/* ------------------------------------------------------ lock + save state */
/* Lifted from planning.css so this page carries its own copy rather than
   pulling in a 37KB stylesheet for forty lines of it. Kept visually identical:
   the padlock means the same thing on both sheets and should look it. */

.lock-slot { display: inline-flex; align-items: center; gap: 8px; }

.lock-btn {
    background: #fff; color: #1d4ed8; border: 1px solid #bfdbfe;
    display: inline-flex; align-items: center; gap: 6px;
}
.lock-btn:hover:not(:disabled) { background: #eff6ff; border-color: #60a5fa; }
.lock-btn.is-mine   { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.lock-btn.is-mine:hover:not(:disabled) { background: #d1fae5; border-color: #34d399; }
.lock-btn.is-force  { background: #fff; color: #b91c1c; border-color: #fecaca; }
.lock-btn.is-force:hover:not(:disabled) { background: #fef2f2; border-color: #fca5a5; }
.lock-ico { width: 15px; height: 15px; }

.lock-note {
    font-size: 12px; color: #6b7280;
    display: inline-flex; align-items: center; gap: 5px;
}
.lock-note.is-mine   { color: #065f46; }
.lock-note.is-theirs { color: #b91c1c; }
.lock-slot.is-nudge .lock-btn.is-mine { animation: sr-nudge 1s ease-in-out 3; }

@keyframes sr-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .lock-slot.is-nudge .lock-btn.is-mine { animation: none; outline: 2px solid #34d399; }
}

.save-state {
    font-size: 12px; color: #6b7280;
    display: inline-flex; align-items: center; gap: 6px;
}
.save-state::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #9ca3af; flex: none;
}
.save-state[data-status="lock-open"]   { color: #065f46; }
.save-state[data-status="lock-open"]::before   { background: #059669; }
.save-state[data-status="lock-held"]   { color: #1d4ed8; }
.save-state[data-status="lock-held"]::before   { background: #3b82f6; }
.save-state[data-status="lock-denied"] { color: #b91c1c; }
.save-state[data-status="lock-denied"]::before { background: #ef4444; }
.save-state[data-status="lock-warn"]   { color: #b45309; }
.save-state[data-status="lock-warn"]::before   { background: #f59e0b; }

.grid-save .cnt { font-variant-numeric: tabular-nums; }

.sr-palette-note { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

/* The shortcut letter on each palette button, so the button and the hint line
   under the grid read as one thing rather than two lists. */
.sr-palette-btn { position: relative; padding-right: 15px; }
.sr-key {
    position: absolute; right: 2px; top: 1px;
    font: 700 8px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #9ca3af; background: none; border: 0; padding: 0;
}
.sr-palette-clear .sr-key { right: 1px; font-size: 7px; }
.sr-help-sep { color: #d1d5db; margin: 0 2px; }

/* ------------------------------------------------------- the remark editor */
/* A box of the page's own. It replaced window.prompt(), which Chrome lets a
   viewer switch off permanently - see applyRemark() in seniors.js. */

.sr-note-pop {
    position: fixed; z-index: 70; width: 300px;
    background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .22);
    padding: 10px;
}
.sr-note-pop[hidden] { display: none; }

.sr-note-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
    font-size: 11px; font-weight: 700; color: #374151;
}
.sr-note-count { font-weight: 500; color: #9ca3af; font-variant-numeric: tabular-nums; }

.sr-note-pop textarea {
    width: 100%; resize: vertical; min-height: 54px;
    padding: 7px 9px; font: inherit; font-size: 13px; line-height: 1.4;
    border: 1px solid #d1d5db; border-radius: 7px;
    color: #1f2937; background: #fff;
}
.sr-note-pop textarea:focus {
    outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
}
.sr-note-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.sr-note-foot .btn-primary { margin-left: 0; }