/* 1inear — style.css
   nvALT aesthetic: dark, minimal, keyboard-first
   Three-pane: [search+list] | [editor]
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #1c1c1e;
  --bg-list:   #232325;
  --bg-hover:  #2c2c2e;
  --bg-sel:    #3a3a3c;
  --bg-editor: #1c1c1e;
  --border:    #3a3a3c;
  --text:      #e5e5ea;
  --text-dim:  #8e8e93;
  --accent:    #0a84ff;
  --danger:    #ff453a;
  --font-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Menlo', monospace;
  --search-h:  38px;
  --list-w:    260px;
}

html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; }

/* ── PIN screen ────────────────────────────────────────────────────────────── */
#pin-screen {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; z-index: 100;
}
#pin-screen h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: var(--text); }
#pin-screen p  { font-size: 13px; color: var(--text-dim); }
#pin-input {
  width: 200px; padding: 10px 14px; background: var(--bg-list);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 18px; letter-spacing: 4px; text-align: center;
  outline: none;
}
#pin-input:focus { border-color: var(--accent); }
#pin-error { color: var(--danger); font-size: 13px; min-height: 18px; }
#pin-btn {
  padding: 9px 28px; background: var(--accent); border: none; border-radius: 8px;
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
#pin-btn:hover { opacity: 0.85; }
#pin-screen.hidden { display: none; }

/* ── App shell ─────────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100%; }
#app.hidden { display: none; }

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
#toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--bg-list);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#search {
  flex: 1; height: var(--search-h); padding: 0 12px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 14px; outline: none;
}
#search::placeholder { color: var(--text-dim); }
#search:focus { border-color: var(--accent); }
#btn-new, #btn-lock {
  height: var(--search-h); padding: 0 12px; border: none; border-radius: 6px;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
#btn-new  { background: var(--accent); color: #fff; }
#btn-new:hover  { opacity: 0.85; }
#btn-lock { background: var(--bg-hover); color: var(--text-dim); }
#btn-lock:hover { color: var(--text); background: var(--bg-sel); }

/* ── Main area ─────────────────────────────────────────────────────────────── */
#main { display: flex; flex: 1; overflow: hidden; }

/* ── Note list ─────────────────────────────────────────────────────────────── */
#note-list {
  width: var(--list-w); min-width: 160px; max-width: 380px;
  background: var(--bg-list); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  resize: horizontal; /* browser allows drag-resize */
}
#note-list-inner { overflow-y: auto; flex: 1; }
.note-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
  user-select: none;
}
.note-item:hover   { background: var(--bg-hover); }
.note-item.active  { background: var(--bg-sel); }
.note-item .ni-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-item .ni-date {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
}
#list-empty {
  padding: 20px 14px; color: var(--text-dim); font-size: 13px; text-align: center;
}

/* ── Editor pane ───────────────────────────────────────────────────────────── */
#editor-pane {
  flex: 1; display: flex; flex-direction: column; background: var(--bg-editor); overflow: hidden;
}
#editor-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px;
}
#editor-inner { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#note-title {
  width: 100%; padding: 14px 20px 8px;
  background: transparent; border: none; outline: none;
  font-size: 18px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#note-title::placeholder { color: var(--text-dim); }
#note-body {
  flex: 1; width: 100%; padding: 14px 20px;
  background: transparent; border: none; outline: none; resize: none;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.65;
  color: var(--text); overflow-y: auto;
}
#note-body::placeholder { color: var(--text-dim); }

/* ── Status bar ────────────────────────────────────────────────────────────── */
#status-bar {
  padding: 4px 14px; font-size: 11px; color: var(--text-dim);
  background: var(--bg-list); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-shrink: 0;
}

/* ── Editor toolbar ────────────────────────────────────────────────────────── */
#editor-toolbar {
  display: flex; gap: 8px; padding: 8px 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#btn-save {
  padding: 5px 16px; border-radius: 6px; border: none;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
#btn-save.btn-dirty  { background: var(--accent); color: #fff; }
#btn-save.btn-saving { background: var(--bg-hover); color: var(--text-dim); cursor: default; }
#btn-save.btn-saved  { background: var(--bg-hover); color: var(--text-dim); cursor: default; }
#btn-delete {
  padding: 5px 16px; border-radius: 6px; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--danger); border: 1px solid var(--border);
}
#btn-delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ── Scrollbars ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Status state indicators ───────────────────────────────────────────────── */
.unsaved { color: #ff9f0a !important; }
.error   { color: var(--danger) !important; }