/* ============================================================================
   css/notices.css — STAFF_NOTICES_V1 (2026-11-02, roadmap 297-staff-notices-proposal-20261102.md)
   Banner (every tab), the notice pinned on Tasks, and the Schedule sub-tab. js/notices.js writes all of it.
   HIDDEN AS THE CSS DEFAULT (Rocket Loader runs scripts after first paint): the banner shows only once the
   script adds .nt-on, the Schedule tab only once it adds html.nt-manage from the server's answer.
   Amber = today (--warning-bg / --warning-fg, the readable pair per STATUS_FG_V1); blue = coming soon.
   ============================================================================ */

/* ── 1. banner ── */
#notice-banner { display: none; }
#notice-banner.nt-on { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.nt-strip { border-radius: 12px; padding: 4px 14px; border: 1px solid; }
.nt-strip-today { background: var(--warning-bg); border-color: #f6d58a; color: var(--warning-fg); }
.nt-strip-soon  { background: var(--info-bg);    border-color: #bfd3f7; color: var(--info-fg); }
.nt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; }
.nt-row + .nt-row { border-top: 1px solid rgba(0,0,0,.08); }
.nt-ico, .nt-sico {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: var(--white);
  border: 1px solid currentColor; display: flex; align-items: center; justify-content: center;
}
.nt-strip .nt-ico { border-color: rgba(0,0,0,.12); }
.nt-main { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nt-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; }
.nt-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 6px; padding: 2px 8px; color: var(--white); background: var(--warning-fg); white-space: nowrap;
}
.nt-strip-soon .nt-pill { background: var(--info-fg); }
.nt-when { font-weight: 700; }
.nt-prop {
  font-size: 12px; font-weight: 700; background: var(--white); border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
.nt-title { font-size: 14.5px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.nt-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.nt-x {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); background: transparent;
  color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.nt-x:hover { background: rgba(255,255,255,.6); }

/* ── shared bits ── */
.nt-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray-700); background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 8px; padding: 0 12px; min-height: 36px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nt-btn:hover { border-color: var(--gray-400); }
.nt-btn-primary { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); font-weight: 700; }
.nt-btn-primary:hover { background: var(--navy-900); }
.nt-btn-primary:disabled { opacity: .6; cursor: default; }
.nt-btn-danger { color: var(--error-fg); border-color: #fecaca; }
.nt-link { font: inherit; font-size: 12px; background: none; border: 0; color: var(--gray-500); text-decoration: underline; cursor: pointer; padding: 4px; }
.nt-chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 1px solid; white-space: nowrap; }
.nt-chip-due { color: var(--warning-fg); background: var(--warning-bg); border-color: #f6d58a; }
.nt-chip-ok  { color: var(--success-fg); background: var(--success-bg); border-color: #a7f3d0; }
.nt-chip-rep { color: var(--navy-800); background: #e8eef8; border-color: #d3dff2; margin-right: 6px; }
.nt-meta { font-size: 12px; color: #556070; }
.nt-details { font-size: 13px; line-height: 1.55; word-break: break-word; }
.nt-guests { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.nt-told { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }   /* STAFF_TOLD_V1: keeps a chip beside its own button when the row wraps */

/* ── 2. pinned on top of Tasks ── */
.nt-pin {
  display: flex; gap: 12px; padding: 12px; border-radius: 8px; margin-bottom: 8px;
  background: var(--warning-bg); border: 1px solid #f6d58a; color: #5a3502;
}
.nt-pin-ico {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: var(--warning-fg); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.nt-pin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nt-pin .nt-meta { color: #6b4a14; }
.nt-foot { font-size: 12px; color: #6b4a14; }
.nt-pin-open { align-self: flex-start; }

/* ── 3. Schedule sub-tab (management only) ── */
.fu-subtab[data-fsub="schedule"] { display: none; }
html.nt-manage .fu-subtab[data-fsub="schedule"] { display: block; }
#fu-pane-schedule { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 16px; }
.nt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.nt-toolbar .fu-filter { margin: 0; }
.nt-spacer { flex: 1 1 0; }
.nt-btn-new { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.nt-slist { display: flex; flex-direction: column; gap: 8px; }
.nt-dayhead { margin: 10px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #556070; }
.nt-dayhead-today { color: var(--warning-fg); }
.nt-srow {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 12px 14px;
  border-radius: 12px; background: var(--gray-50); border: 1px solid var(--gray-200);
}
.nt-srow-today { background: var(--warning-bg); border-color: #f6d58a; color: #5a3502; }
.nt-srow-past { opacity: .7; }
.nt-stime { flex: 0 0 104px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--navy-800); }
.nt-srow-today .nt-stime { color: inherit; }
.nt-stime span { font-size: 12px; }
.nt-stime .nt-pill { align-self: flex-start; }
.nt-sico { width: 38px; height: 38px; color: var(--navy-800); border-color: var(--gray-200); }
.nt-srow-today .nt-sico { color: var(--warning-fg); border-color: #f6d58a; }
.nt-smain { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nt-smain .nt-title { font-size: 14.5px; }
.nt-sact { display: flex; flex-wrap: wrap; gap: 6px; }

/* the form */
.nt-form {
  display: flex; flex-direction: column; gap: 14px; padding: 16px; margin-bottom: 16px;
  border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-50);
}
.nt-form-title { margin: 0; font-size: 16px; color: var(--navy-800); }
.nt-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nt-kinds legend { padding: 0; margin-bottom: 8px; }
.nt-kind {
  font-family: inherit; font-size: 13px; color: var(--gray-700); background: var(--white);
  border: 1px solid #cbd5e1; border-radius: 999px; padding: 0 14px; min-height: 40px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.nt-kind.active { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); font-weight: 700; }
.nt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nt-flabel { font-size: 13px; font-weight: 700; color: var(--gray-700); }
.nt-field input, .nt-field select, .nt-field textarea {
  font-family: inherit; font-size: 14px; color: #1f2937; background: var(--white);
  border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 12px; min-height: 44px; box-sizing: border-box; width: 100%;
}
.nt-field textarea { padding: 10px 12px; min-height: 76px; resize: vertical; line-height: 1.5; }
.nt-help { font-size: 12px; color: #556070; line-height: 1.5; font-weight: 400; }
.nt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nt-check {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--gray-200); background: var(--white); cursor: pointer;
}
.nt-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy-800); flex: 0 0 auto; }
.nt-check > span { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.nt-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.nt-form-actions .nt-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }

@media (max-width: 560px) {
  .nt-grid3, .nt-grid2 { grid-template-columns: minmax(0, 1fr); }
  .nt-side { margin-left: 0; }
  .nt-stime { flex-basis: 100%; flex-direction: row; align-items: center; gap: 8px; }
}