body {
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  user-select: none;
  vertical-align: middle;
}

.theme-transition {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.editorial-block {
  border-left: 2px solid rgba(112, 121, 123, 0.2);
  padding-left: 16px;
  transition: border-color 0.2s ease;
}
.editorial-block:focus-within {
  border-left-color: #03535e;
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

input:focus, textarea:focus, select:focus {
  outline: none;
}

/* chip buttons (POS, subregion) */
.chip {
  padding: 6px 14px;
  border: 1px solid #70797b;
  color: #3f484a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.chip.active {
  border-color: #03535e;
  background-color: #03535e;
  color: #ffffff;
}

/* line clamp for card snippets */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-btn.active {
  color: #03535e;
  border-top: 2px solid #03535e;
}
.nav-btn {
  border-top: 2px solid transparent;
}

.status-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
}
.status-draft { background: #edeeef; color: #3f484a; }
.status-needs_work { background: #ffdcc4; color: #683c16; }
.status-proofread { background: #d7e1ec; color: #004e5a; }

#toast.show {
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.spinner {
  border: 2px solid rgba(3, 83, 94, 0.2);
  border-top-color: #03535e;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}