/* ─── FBO Dashboard — Daily Notes feed ──────────────────────────────────────── */

/* ─── Dashboard sub-tabs (To-Dos | Notes) ────────────────────────────────────── */
.dash-tabs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.dash-tab-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dash-tab {
  position: relative;
  background: transparent;
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius-full, 9999px);
  padding: 9px 20px;
  font-family: var(--font-body, sans-serif);
  font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
  color: var(--fg-muted, #575760);
  cursor: pointer;
  transition: all 0.15s ease-out;
}
.dash-tab:hover { border-color: var(--gold, #B79B58); color: var(--gold-dark, #9A8145); }
.dash-tab.active {
  background: var(--gold, #B79B58); border-color: var(--gold, #B79B58); color: #fff;
}
.dash-panel.hidden { display: none; }

/* ─── Tab alert badges (due-today / past-due nag) ────────────────────────────── */
/* A red count bubble in the pill's top-right corner, with the pill flashing red
   so below-the-fold work (Inventory, PMCS, etc.) gets noticed. The active pill
   shows the badge but doesn't flash. */
.dash-tab-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #C13434; color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0;
  border-radius: var(--radius-full, 9999px);
  border: 2px solid var(--bg, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  animation: dash-badge-pop 0.25s var(--ease-out, ease);
}
@keyframes dash-badge-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.dash-tab-alert:not(.active) {
  border-color: #C13434;
  color: #C13434;
  animation: dash-tab-flash 1.3s ease-in-out infinite;
}
.dash-tab-alert:not(.active):hover {
  border-color: #C13434;
  color: #C13434;
}
@keyframes dash-tab-flash {
  0%, 100% { background: transparent; box-shadow: 0 0 0 0 rgba(193,52,52,0); }
  50%      { background: rgba(193,52,52,0.10); box-shadow: 0 0 0 4px rgba(193,52,52,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-tab-alert:not(.active) { animation: none; background: rgba(193,52,52,0.08); }
  .dash-tab-badge { animation: none; }
}

/* ─── Nav-bar alert badges (Line Board / Night Stacking) ─────────────────────── */
/* Same red count bubble + flash as the tab pills, on the menu-bar buttons. */
.nav-alertable { position: relative; }
.nav-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #C13434; color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 10px; font-weight: 800; line-height: 1;
  border-radius: var(--radius-full, 9999px);
  border: 2px solid var(--bg, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  animation: dash-badge-pop 0.25s var(--ease-out, ease);
}
.btn.nav-alert {
  border-color: #C13434 !important;
  color: #C13434 !important;
  animation: nav-alert-flash 1.3s ease-in-out infinite;
}
@keyframes nav-alert-flash {
  0%, 100% { background: transparent; box-shadow: 0 0 0 0 rgba(193,52,52,0); }
  50%      { background: rgba(193,52,52,0.12); box-shadow: 0 0 0 4px rgba(193,52,52,0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.nav-alert { animation: none; background: rgba(193,52,52,0.10); }
  .nav-badge { animation: none; }
}

/* ─── Quick links (team shortcuts under the tab pills) ───────────────────────── */
.quick-links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 16px;
  margin: -4px 0 24px;
}
.ql-label {
  font-family: var(--font-body, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint, #888);
}
.ql-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ql-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--bg, #fff);
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-body, sans-serif);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--fg-strong, #0A0A0A);
  text-decoration: none; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ql-btn:hover {
  border-color: var(--gold, #B79B58);
  color: var(--gold-dark, #9A8145);
  background: var(--gold-subtle, rgba(183,155,88,0.08));
  box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.06));
}
.ql-btn-ext { font-size: 12px; opacity: 0.65; }

.notes-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}

/* Search button (left side of the toolbar) */
.search-btn {
  display: inline-flex; align-items: center; gap: 8px;
}
.search-btn-icon { font-size: 15px; line-height: 1; }
.search-kbd {
  font-family: var(--font-body, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.18));
  color: var(--fg-muted, #575760);
  background: var(--bg-soft, rgba(0,0,0,0.03));
}
.search-btn:hover .search-kbd { color: #fff; border-color: rgba(255,255,255,0.5); }
@media (max-width: 520px) { .search-kbd { display: none; } }

/* ─── Search palette ─────────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease-out, ease);
}
.search-overlay.show { opacity: 1; pointer-events: auto; }
.search-panel {
  width: 100%; max-width: 600px;
  background: var(--bg, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-elevated, 0 12px 48px rgba(0,0,0,0.18));
  overflow: hidden;
  transform: translateY(-8px) scale(0.99);
  transition: transform 0.22s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.search-overlay.show .search-panel { transform: translateY(0) scale(1); }

.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.search-input-icon { font-size: 18px; color: var(--fg-faint, #888); line-height: 1; }
.search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body, sans-serif);
  font-size: 17px; color: var(--fg-strong, #0A0A0A);
}
.search-input::placeholder { color: var(--fg-faint, #888); }
.search-esc {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 6px;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.15));
  color: var(--fg-faint, #888);
}

.search-results {
  list-style: none; margin: 0; padding: 6px;
  max-height: 56vh; overflow-y: auto;
}
.search-result {
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.search-result.active, .search-result:hover {
  background: var(--gold-subtle, rgba(183,155,88,0.08));
  border-left-color: var(--gold, #B79B58);
}
.search-result-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
.search-result-date {
  font-family: var(--font-display, Georgia, serif);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-strong, #0A0A0A);
}
.search-result-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.search-result-snippet {
  font-size: 14px; line-height: 1.45;
  color: var(--fg, #1A1A1A);
}
.search-type {
  display: inline-block;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; margin-right: 6px;
  background: var(--gold, #B79B58); color: #fff;
  vertical-align: middle;
}
.search-type.note { background: var(--mid-gray, #575760); }
.search-type.item { background: #2E7D5B; }
.search-result-snippet mark {
  background: var(--gold-glow, rgba(183,155,88,0.3));
  color: inherit; padding: 0 1px; border-radius: 3px;
}
.search-result-from {
  margin-top: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--fg-muted, #575760);
}
.search-hint {
  padding: 22px 18px;
  text-align: center;
  font-size: 13px; font-weight: 500;
  color: var(--fg-faint, #888);
}

.notes-feed {
  display: flex; flex-direction: column;
  gap: 14px;
}

/* ─── Date grouping (Pinned · Upcoming · Today · Earlier) ─────────────────────── */
.notes-group {
  display: flex; flex-direction: column;
  gap: 14px;
}
/* Extra breathing room between groups beyond the feed's own gap. */
.notes-group + .notes-group { margin-top: 14px; }

.notes-group-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 2px;
}
/* A hairline rule trailing the label, so each section reads as a divider. */
.notes-group-head::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border, rgba(0,0,0,0.08));
}
.notes-group-label {
  font-family: var(--font-display, Georgia, serif);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted, #667085);
}
.notes-group-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  font-size: 11px; font-weight: 700;
  color: var(--fg-muted, #667085);
}

/* Today is the anchor — make it the most prominent group. */
.notes-group-today .notes-group-label { color: var(--gold-dark, #9A8145); }
.notes-group-today .notes-group-head::after { background: var(--gold, #B79B58); opacity: 0.4; }
.notes-group-today .notes-group-count {
  background: var(--gold-subtle, rgba(183,155,88,0.12));
  color: var(--gold-dark, #9A8145);
}

/* Pinned shares the gold treatment; past notes stay quietly muted. */
.notes-group-pinned .notes-group-label { color: var(--gold-dark, #9A8145); }
.notes-group-earlier .notes-group-label { opacity: 0.8; }

/* ─── Note card ──────────────────────────────────────────────────────────────── */
.note-card {
  position: relative;
  background: var(--bg, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-left: 4px solid var(--gray, #888);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.06));
  padding: 20px 22px;
  transition: box-shadow 0.2s var(--ease-out, ease), transform 0.2s var(--ease-out, ease);
}
.note-card:hover {
  box-shadow: var(--shadow-elevated, 0 12px 48px rgba(0,0,0,0.12));
  transform: translateY(-1px);
}
.note-card.is-pinned {
  background: var(--gold-subtle, rgba(183,155,88,0.08));
}

.pin-flag {
  position: absolute; top: 14px; right: 18px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark, #9A8145);
}

.note-top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.note-date {
  font-family: var(--font-display, Georgia, serif);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-strong, #0A0A0A);
  text-transform: uppercase;
}
.note-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.note-body {
  font-family: var(--font-body, sans-serif);
  font-size: 16px; line-height: 1.55;
  color: var(--fg, #1A1A1A);
  margin: 0 0 16px;
  white-space: normal;
  word-break: break-word;
}

.note-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
  padding-top: 12px;
}
.note-from {
  font-size: 12px; font-weight: 500;
  color: var(--fg-muted, #575760);
}
.note-edited { color: var(--fg-faint, #888); font-weight: 400; }

.note-actions { display: inline-flex; gap: 4px; }
.note-act {
  background: transparent; border: none;
  font-family: var(--font-body, sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted, #575760);
  padding: 5px 10px; border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.note-act:hover { background: var(--gold-subtle, rgba(183,155,88,0.1)); color: var(--gold-dark, #9A8145); }
.note-act.danger:hover { background: rgba(193,52,52,0.1); color: #C13434; }

/* ─── Category badges + card accents ─────────────────────────────────────────── */
/* Each category gets a hue; --c is the badge text/accent color, --cbg its tint.
   A card's left border + pinned tint follow its highest-priority category. */
.cat-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-full, 9999px);
  color: var(--c, #575760);
  background: var(--cbg, rgba(0,0,0,0.05));
  white-space: nowrap;
}

.cat-priority { --c: #B42318; --cbg: rgba(217,45,32,0.12); }
.cat-gse      { --c: #B54708; --cbg: rgba(220,104,3,0.12); }
.cat-admin    { --c: #475467; --cbg: rgba(71,84,103,0.12); }
.cat-customer { --c: #026AA2; --cbg: rgba(2,106,162,0.12); }
.cat-elliott  { --c: #6941C6; --cbg: rgba(105,65,198,0.12); }
.cat-rental   { --c: #C11574; --cbg: rgba(193,21,116,0.12); }
.cat-inflight { --c: #5925DC; --cbg: rgba(89,37,220,0.12); }
.cat-school   { --c: #027A48; --cbg: rgba(2,122,72,0.12); }
.cat-fuel     { --c: #354EB6; --cbg: rgba(53,78,182,0.12); }
.cat-qcc      { --c: #93370D; --cbg: rgba(147,55,13,0.12); }

.note-card.accent-priority { border-left-color: #D92D20; }
.note-card.accent-gse      { border-left-color: #DC6803; }
.note-card.accent-admin    { border-left-color: #98A2B3; }
.note-card.accent-customer { border-left-color: #0BA5EC; }
.note-card.accent-elliott  { border-left-color: #7A5AF8; }
.note-card.accent-rental   { border-left-color: #EE46BC; }
.note-card.accent-inflight { border-left-color: #875BF7; }
.note-card.accent-school   { border-left-color: #12B76A; }
.note-card.accent-fuel     { border-left-color: #4E5BA6; }
.note-card.accent-qcc      { border-left-color: #B54708; }
.note-card.accent-none     { border-left-color: var(--gold, #B79B58); }

/* PRIORITY notes read as an alert regardless of pin state. */
.note-card.accent-priority { background: rgba(217,45,32,0.04); }
.note-card.accent-priority.is-pinned { background: rgba(217,45,32,0.07); }

/* ─── Attachments on a note card ─────────────────────────────────────────────── */
.note-attachments {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 16px;
}
.att { text-decoration: none; display: inline-flex; }
.att-img {
  width: 96px; height: 96px;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  background: var(--bg-soft, #f5f4f1);
}
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-img:hover { border-color: var(--gold, #B79B58); }
.att-file {
  align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  background: var(--bg-soft, #f5f4f1);
  color: var(--fg-strong, #0A0A0A);
  max-width: 240px;
}
.att-file:hover { border-color: var(--gold, #B79B58); }
.att-file-icon {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: #fff; background: #C13434;
  padding: 4px 6px; border-radius: 5px; flex-shrink: 0;
}
.att-file-name {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Attachment picker (in the modal) ───────────────────────────────────────── */
.attach-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.attach-list:empty { margin-bottom: 0; }
.attach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: var(--radius-md, 12px);
  background: var(--bg-soft, #f5f4f1);
}
.attach-thumb {
  width: 38px; height: 38px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0;
}
.attach-file-icon {
  font-size: 10px; font-weight: 800; color: #fff; background: #C13434;
  padding: 5px 7px; border-radius: 5px; flex-shrink: 0;
}
.attach-name {
  flex: 1; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg-strong, #0A0A0A);
}
.attach-remove {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--fg-faint, #888);
  padding: 2px 6px; border-radius: var(--radius-full, 9999px);
}
.attach-remove:hover { background: rgba(193,52,52,0.1); color: #C13434; }
.attach-add { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.attach-add-btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1.5px dashed var(--border-strong, rgba(0,0,0,0.2));
  border-radius: var(--radius-md, 12px);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--fg-muted, #575760);
}
.attach-add:hover .attach-add-btn { border-color: var(--gold, #B79B58); color: var(--gold-dark, #9A8145); }
.attach-status { font-size: 12px; color: var(--fg-faint, #888); }

/* ─── Comments ───────────────────────────────────────────────────────────────── */
.note-comments {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}
.comments-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint, #888);
  margin-bottom: 10px;
}
.comment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.comment-list:empty { margin-bottom: 0; }

.comment {
  background: var(--bg-soft, rgba(0,0,0,0.02));
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: var(--radius-md, 12px);
  padding: 10px 12px;
}
.comment-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--fg-strong, #0A0A0A); }
.comment-time { font-size: 11px; color: var(--fg-faint, #888); }
.comment-delete {
  margin-left: auto;
  background: transparent; border: none; cursor: pointer;
  color: var(--fg-faint, #888);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-full, 9999px);
}
.comment-delete:hover { background: rgba(193,52,52,0.1); color: #C13434; }
.comment-body {
  font-size: 14px; line-height: 1.5;
  color: var(--fg, #1A1A1A); word-break: break-word;
}
.mention {
  color: var(--gold-dark, #9A8145);
  font-weight: 600;
  background: var(--gold-subtle, rgba(183,155,88,0.12));
  padding: 0 3px; border-radius: 4px;
}

.comment-composer { display: flex; gap: 8px; align-items: flex-end; }
.comment-input {
  flex: 1;
  resize: none; overflow-y: auto;
  min-height: 38px; max-height: 160px;
  padding: 9px 12px;
  border-radius: var(--radius-md, 12px);
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  font-family: var(--font-body, sans-serif);
  font-size: 14px; line-height: 1.4;
  color: var(--fg-strong, #0A0A0A);
  background: var(--bg, #fff);
}
.comment-input:focus { outline: none; border-color: var(--gold, #B79B58); }
.btn-sm.comment-post { padding: 9px 16px; font-size: 12px; white-space: nowrap; }

/* @-mention suggestion dropdown (single shared element, fixed-positioned) */
.mention-dd {
  position: fixed; z-index: 400;
  list-style: none; margin: 0; padding: 4px;
  max-height: 240px; overflow-y: auto;
  background: var(--bg, #fff);
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-elevated, 0 12px 48px rgba(0,0,0,0.18));
}
.mention-opt {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px; border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}
.mention-opt.active, .mention-opt:hover {
  background: var(--gold-subtle, rgba(183,155,88,0.1));
}
.mention-opt-name { font-size: 14px; font-weight: 600; color: var(--fg-strong, #0A0A0A); }
.mention-opt-email { font-size: 11px; color: var(--fg-faint, #888); }

/* ─── See more ───────────────────────────────────────────────────────────────── */
.see-more-wrap {
  display: flex; justify-content: center; align-items: center;
  margin-top: 26px;
}
.see-more-done {
  font-size: 12px; font-weight: 500;
  color: var(--fg-faint, #888); letter-spacing: 0.02em;
}

.notes-feed .empty-row {
  text-align: center; padding: 48px 16px;
  color: var(--fg-faint, #888);
  font-size: 14px; font-weight: 500;
}

/* ─── Add / edit modal ───────────────────────────────────────────────────────── */
.note-modal { max-width: 560px; text-align: left; }
.note-modal .modal-actions { margin-top: 8px; }

.field { margin-bottom: 18px; }
.field-label {
  display: block;
  font-family: var(--font-body, sans-serif);
  font-weight: 600; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted, #575760);
  margin-bottom: 8px;
}
.field-hint {
  font-weight: 500; letter-spacing: 0.06em;
  color: var(--fg-faint, #888); text-transform: none;
  margin-left: 6px;
}
.field-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
  color: var(--fg-strong, #0A0A0A);
  background: var(--bg, #fff);
  transition: border-color 0.15s ease-out;
}
.field-input:focus { outline: none; border-color: var(--gold, #B79B58); }
.field-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-check {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 12px);
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  background: var(--bg, #fff);
  cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg-strong, #0A0A0A);
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none;
}
.cat-check:hover { border-color: var(--c, var(--gold, #B79B58)); }
.cat-check input { accent-color: var(--c, var(--gold, #B79B58)); width: 15px; height: 15px; }
.cat-check:has(input:checked) {
  border-color: var(--c, var(--gold, #B79B58));
  background: var(--cbg, var(--gold-subtle, rgba(183,155,88,0.08)));
}

/* ─── "Submitted by" combobox ────────────────────────────────────────────────── */
.combo { position: relative; }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 10;
  margin: 0; padding: 4px;
  list-style: none;
  max-height: 200px; overflow-y: auto;
  background: var(--bg, #fff);
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-elevated, 0 12px 48px rgba(0,0,0,0.12));
}
.combo-option {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  font-family: var(--font-body, sans-serif);
  cursor: pointer;
}
.combo-name { font-size: 14px; font-weight: 600; color: var(--fg-strong, #0A0A0A); }
.combo-email { font-size: 11px; font-weight: 400; color: var(--fg-faint, #888); }
.combo-option.active .combo-email,
.combo-option:hover .combo-email { color: var(--gold-dark, #9A8145); }
.combo-option.active,
.combo-option:hover {
  background: var(--gold-subtle, rgba(183,155,88,0.1));
  color: var(--gold-dark, #9A8145);
}
.combo-empty {
  padding: 9px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--fg-faint, #888);
}

.pin-toggle {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-strong, #0A0A0A);
  margin: 4px 0 22px;
  cursor: pointer;
}
.pin-toggle input { accent-color: var(--gold, #B79B58); width: 16px; height: 16px; }