/* ==========================================================================
   Personal notes — directory + spring-out editor panel
   ========================================================================== */
.page--notes { overflow: hidden; }
.notes { height: 100%; display: grid; grid-template-columns: 340px minmax(0, 1fr); }

.notes__dir {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0;
  padding: 22px 18px 14px;
  background: var(--paper);
  border-right: var(--bw) solid var(--ink);
  box-shadow: 6px 0 0 rgba(11, 11, 11, .06);
}
.dir__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dir__head h1 { font-size: 46px; }
.dir__folders { display: flex; flex-wrap: wrap; gap: 6px; }
.dir__list { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 8px; margin: 0 -8px; padding: 2px 8px 8px; }
.note-item {
  display: grid; gap: 5px;
  padding: 12px 14px;
  border-radius: 16px;
  border: var(--bw) solid var(--line);
  background: var(--paper);
  transition: border-color .2s, transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s;
}
.note-item:hover { border-color: var(--ink); transform: translateX(3px); }
.note-item.is-active { border-color: var(--ink); background: var(--lime); box-shadow: 4px 4px 0 var(--ink); transform: translateX(6px); }
.note-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-item__top b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item__pin { flex: none; }
.note-item__snippet { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item.is-active .note-item__snippet { color: var(--ink); }
.note-item__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); }
.note-item.is-active .note-item__meta { color: var(--ink); }
.dir__empty { display: grid; justify-items: center; gap: 8px; padding: 30px 10px; color: var(--text-2); font-size: 14px; text-align: center; }
.dir__foot { font-size: 11px; color: var(--text-2); border-top: 1.5px dashed var(--line-strong); padding-top: 12px; }

.notes__stage {
  position: relative; z-index: 1;
  min-width: 0; min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2.4vw, 32px);
  background-color: var(--paper-2);
  background-image: var(--bricks-paper);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
.notes__empty { margin: auto; max-width: 400px; }
.notes__empty .btn { margin-top: 6px; }

.note-panel {
  position: relative; z-index: 1;
  grid-area: 1 / 1;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: 10px 10px 0 var(--ink);
  transform-origin: left center;
  overflow: hidden;
  will-change: transform;
}
.note-panel--underlay { z-index: 0; pointer-events: none; will-change: auto; }
.note-panel--underlay, .note-panel--underlay * { animation: none !important; transition: none !important; }
.note-panel__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 10px;
  border-bottom: var(--bw) solid var(--ink);
  background: var(--paper);
}
.note-folder { width: auto; height: 38px; padding: 0 34px 0 12px; font-size: 13.5px; font-weight: 700; border-radius: var(--r-pill); background-position: right 10px center; }
.note-folder:focus { transform: none; box-shadow: 3px 3px 0 var(--ink); }

.save-status {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 6px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  font: 600 12px var(--font-mono);
  color: var(--text-2);
  transition: background-color .3s, border-color .3s, color .3s;
}
.save-status__icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.save-status__icon .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); display: block; animation: live-ping-dot 1.4s ease-in-out infinite; }
@keyframes live-ping-dot { 50% { transform: scale(.6); opacity: .5; } }
.save-status[data-state="saved"] { border-color: var(--ink); color: var(--ink); }
.save-status[data-state="saved"] .save-status__icon { background: var(--lime); border: 1.5px solid var(--ink); }
.save-status[data-state="dirty"] { color: var(--ink); border-style: dashed; border-color: var(--ink); }
.save-status[data-state="saving"] { color: var(--ink); background: var(--paper-2); }
.save-status .roll { min-width: 10ch; }
.note-delete:hover { background: var(--ink) !important; color: var(--lime); }

.note-paper {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  padding: 28px clamp(20px, 4vw, 56px) 40px clamp(56px, 7vw, 96px);
  --line-h: 32px;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--line-h) - 1px), rgba(11, 11, 11, .08) calc(var(--line-h) - 1px) var(--line-h));
  background-position: 0 14px;
  background-attachment: local;
}
.note-paper::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: clamp(36px, 5vw, 70px);
  width: 2px; background: var(--lime);
  box-shadow: 4px 0 0 rgba(200, 255, 61, .45);
}
.note-title {
  border: 0; background: none;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(38px, 4.4vw, 64px); line-height: .95;
  padding: 0; width: 100%;
}
.note-title::placeholder { color: var(--paper-3); }
.note-meta { margin: 10px 0 14px; font-size: 11.5px; color: var(--text-2); letter-spacing: .04em; }
.note-body {
  flex: 1; min-height: 360px;
  border: 0; background: transparent;
  font-size: 17px; line-height: var(--line-h);
  padding: 0;
}
.note-body::placeholder { color: var(--text-3); }

@media (max-width: 860px) {
  .notes { grid-template-columns: 100%; }
  .notes__stage { position: absolute; inset: 0; z-index: 5; padding: 10px; background-color: transparent; background-image: none; pointer-events: none; }
  .notes.is-open .notes__stage { pointer-events: auto; background-color: rgba(11, 11, 11, .35); }
  .notes__empty { display: none; }
  .note-panel { box-shadow: 6px 6px 0 var(--ink); border-radius: var(--r-lg); }
  .note-panel__bar { flex-wrap: wrap; row-gap: 8px; }
  .note-folder { max-width: 130px; }
  .note-paper { padding: 20px 18px 30px 46px; }
  .note-paper::before { left: 28px; }
  .save-status .roll { min-width: 0; }
}
@media (max-width: 480px) {
  .note-panel__bar [data-save] { display: none; }
}

/* Long titles wrap instead of clipping — editor and directory */
.note-title {
  flex: none; /* never let the column flexbox squash (and clip) a long title */
  display: block; resize: none; overflow: hidden;
  min-height: 1em;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  line-height: .98;
}
.note-item__top { align-items: flex-start; }
.note-item__top b {
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.note-item__pin { margin-top: 3px; }