:root { color-scheme: light; font: 16px/1.5 system-ui,sans-serif; color: #272333; background: #f7f5f3; }
* { box-sizing: border-box; } body { margin: 0; } main, [data-staff-locked] { max-width: 880px; padding: 20px; margin: auto; }
header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #ded8d2; } h1 { font-size: clamp(1.4rem,5vw,2rem); } h2 { font-size: 1.15rem; margin: 0 0 8px; overflow-wrap: anywhere; } p { margin: 8px 0; }
article, section { padding: 16px; border: 1px solid #ded8d2; border-radius: 12px; background: #fff; margin: 12px 0; }
a { color: #66394e; text-decoration: none; } a:hover { text-decoration: underline; } button,.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 8px; background: #66394e; color: #fff; font: inherit; cursor: pointer; gap: 8px; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 10px 0; } label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } input,select { font: inherit; min-height: 44px; max-width: 100%; border: 1px solid #827583; border-radius: 6px; padding: 6px 10px; background: white; color: inherit; } input[type=checkbox] { min-width: 22px; min-height: 22px; } summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
:focus-visible { outline: 3px solid #08789e; outline-offset: 3px; } [hidden] { display: none !important; } button:disabled { opacity: .65; cursor: wait; } .notice { padding: 12px; background: #e3f1e9; border-radius: 8px; }
[aria-busy=true] button:disabled:before { content: ''; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rnl-spin 1s linear infinite; }
@keyframes rnl-spin { to { transform: rotate(360deg); } } @media(prefers-reduced-motion:reduce) { [aria-busy=true] button:disabled:before { animation: none; } }
/* UX-01A: a short row per person; detailed tools remain progressively enhanced. */
header{flex-wrap:wrap}.rnl-staff-table{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff;margin:16px 0}.rnl-staff-table th,.rnl-staff-table td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid #ded8d2;overflow-wrap:anywhere}.rnl-staff-table th:first-child{width:52%}.rnl-staff-table th:last-child{width:76px}.rnl-staff-table tbody th{font-weight:400}.rnl-staff-table small{display:block;font-size:.85rem}.rnl-staff-table form{margin:6px 0 0}.rnl-staff-details>details>summary{display:flex;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:0;list-style:none;color:#66394e;font-size:1.5rem;border:1px solid #ded8d2;border-radius:8px}.rnl-staff-details>details>summary::-webkit-details-marker{display:none}.rnl-staff-details>details{position:relative}.rnl-staff-details>details[open]>[data-detail-content]{position:absolute;right:0;z-index:2;width:min(520px,calc(100vw - 48px));max-height:70vh;overflow:auto;padding:16px;background:#fff;border:1px solid #ded8d2;border-radius:8px;box-shadow:0 4px 16px #27233325}.rnl-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[data-staff-dialog]{width:min(560px,calc(100% - 24px));max-height:85dvh;border:1px solid #ded8d2;border-radius:12px;padding:20px;color:inherit;background:#fff;overflow:auto}[data-staff-dialog]::backdrop{background:#27233399}[data-staff-dialog] h2{max-width:calc(100% - 90px)}[data-staff-dialog] header{align-items:start}.rnl-staff-help{position:relative;display:inline-block}.rnl-staff-help>summary{display:flex;align-items:center;gap:8px;color:#66394e}.rnl-staff-help[open]>div{position:absolute;z-index:2;background:#fff;box-shadow:0 4px 16px #27233325;padding:16px;border:1px solid #ded8d2;border-radius:8px;width:min(360px,calc(100vw - 48px))}[data-staff-queue]{position:sticky;top:8px;z-index:1;border:1px solid #bfb0a9;border-radius:8px;background:#fff8e8;padding:10px 12px;margin:12px 0;box-shadow:0 2px 8px #27233312}[data-staff-queue] button{margin:4px 8px 0 0}[data-row-feedback]{color:#66394e}[data-queued] .rnl-staff-mark{background:#fff8e8}[data-person][aria-busy=true] [data-row-feedback]:before{content:'';display:inline-block;width:.8em;height:.8em;margin-right:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rnl-spin 1s linear infinite}
@media(max-width:600px){.rnl-staff-table,.rnl-staff-table tbody{display:block}.rnl-staff-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.rnl-staff-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(88px,.55fr) 44px;gap:6px;border-bottom:1px solid #ded8d2;padding:10px 0}.rnl-staff-table th,.rnl-staff-table td{border:0;padding:2px;width:auto!important}main{padding:16px}.rnl-staff-mark button{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){[data-person][aria-busy=true] [data-row-feedback]:before{animation:none}}