/* The office's Units area (plan 4, task 8). Linked from index.html;
   only this area's own rules go here. */
.u-subject { margin: 0 0 1.25rem; }
.u-subject h3 { margin: 1rem 0 .6rem; color: var(--muted); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }
.u-set { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.u-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; }
.u-head h4 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.u-live, .u-muted { color: var(--muted); font-size: .9rem; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.u-nights { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.u-night {
  display: flex; flex-direction: column; min-width: 7.5rem; padding: .45rem .7rem;
  border: 1px solid var(--line); border-radius: 8px; font-variant-numeric: tabular-nums;
}
.u-night-name { font-weight: 600; }
.u-night-count { color: var(--muted); font-size: .9rem; }
.u-night.u-done { border-color: #5BBF6A; }
.u-night.u-done .u-night-name::after { content: " ✓"; color: #5BBF6A; }
.u-nights-none, .u-none { margin: 0; color: var(--muted); }

.u-date { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.u-label { color: var(--muted); font-size: .9rem; min-width: 2.5rem; }
.u-date-form, .u-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.u-date input, .u-suggest-form input { min-height: 44px; padding: .45rem .6rem; color-scheme: dark; }
.u-when { font-weight: 600; }
.u-set button { min-height: 44px; padding: .5rem .9rem; }
.u-set button:disabled { opacity: .6; cursor: default; }
.u-quiet { background: transparent; color: var(--chalk); border: 2px solid var(--line); }
.u-danger { background: #B8483A; color: var(--chalk); }
.u-link { background: none; border: 0; padding: 0 .2rem; min-height: 44px; color: var(--gold); text-decoration: underline; font-weight: 600; }

.u-suggest-form { flex: 1 1 100%; display: grid; gap: .35rem; max-width: 28rem; }
.u-suggest-form textarea {
  font: inherit; padding: .5rem .6rem; border-radius: 8px; border: 1px solid #555;
  background: #141613; color: var(--chalk); resize: vertical; max-width: 100%;
}
.u-suggested { margin: 0; color: var(--muted); font-size: .9rem; }

.u-waiting { border-top: 1px solid var(--line); padding-top: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.u-waiting-head { margin: 0; }
.u-waiting-head strong { color: var(--gold); }
.u-try { margin: 0; color: var(--muted); font-size: .9rem; }
.u-confirm { border: 2px solid var(--warn); border-radius: 8px; padding: .6rem .8rem; }
.u-confirm p { margin: 0 0 .5rem; }
.u-msg { margin: 0; min-height: 0; }
.u-msg:empty { display: none; }
.u-msg:not(.o-error) { color: #8FD39A; }

.u-preview { display: flex; flex-direction: column; gap: .5rem; }
.u-preview-count { margin: 0; color: var(--muted); }
.u-group { border: 1px solid var(--line); border-radius: 8px; padding: .2rem .7rem; }
.u-group summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: .3rem; }
.u-qs { margin: 0 0 .5rem; padding-left: 1.4rem; }
.u-q { padding: .5rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.u-q:first-child { border-top: 0; }
.u-q-prompt { font-weight: 600; }
.u-q-meta { color: var(--muted); font-size: .8rem; }
.u-answer { color: #8FD39A; font-weight: 600; }
.u-q-wrong { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.u-says, .u-q-can { color: var(--muted); }
.u-q-can { margin: .2rem 0 0; font-size: .9rem; }

@media (max-width: 639px) {
  .u-date-form { flex: 1 1 100%; }
  .u-date-form input { flex: 1 1 10rem; min-width: 0; }
  .u-qs { padding-left: 1.1rem; }
}