/* ─── Notes App Specific Styles ────────────────────────────────────────── */

/* ─── Input section ────────────────────────────────────────────────────────── */
.input-section {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

textarea {
  width:       100%;
  min-height:  96px;
  background:  var(--surface);
  border:      1px solid var(--border);
  border-radius: var(--radius);
  color:       var(--text);
  font-family: var(--font-sans);
  font-size:   0.95rem;
  line-height: 1.55;
  padding:     12px 14px;
  resize:      vertical;
  outline:     none;
  transition:  border-color var(--transition);
}

textarea::placeholder { color: var(--muted); }
textarea:focus        { border-color: var(--accent); }

/* ─── Button row ───────────────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  gap:     8px;
}

/* ─── Items list ───────────────────────────────────────────────────────────── */
.items-section {
  margin-top: 2.5rem;
}

.items-section h2 {
  font-family:   var(--font-mono);
  font-size:     0.72rem;
  font-weight:   600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:         var(--muted);
  margin-bottom: 14px;
}

#items-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  list-style:     none;
}

.item-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
  display:       grid;
  grid-template-columns: 1fr auto;
  gap:           6px 12px;
  align-items:   start;
  animation:     slideIn 200ms ease both;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.item-value {
  font-size:   0.9rem;
  line-height: 1.5;
  word-break:  break-word;
  grid-column: 1;
  grid-row:    1;
}

.item-time {
  font-family: var(--font-mono);
  font-size:   0.65rem;
  color:       var(--muted);
  grid-column: 1;
  grid-row:    2;
}

.btn-delete {
  grid-column:   2;
  grid-row:      1 / 3;
  background:    transparent;
  color:         var(--muted);
  padding:       2px 6px;
  font-size:     0.85rem;
  align-self:    center;
  border-radius: 4px;
}

.btn-delete:hover:not(:disabled) {
  background: rgba(255, 77, 77, 0.12);
  color:      var(--danger);
}

.empty-state {
  text-align:  center;
  color:       var(--muted);
  font-family: var(--font-mono);
  font-size:   0.8rem;
  padding:     40px 0;
  border:      1px dashed var(--border);
  border-radius: var(--radius);
}