.btn{background:#0c0f15;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer}
.title-input{flex:0 1 360px;max-width:42vw;background:#0c0f15;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;font-weight:600}
.spacer {flex: 1;}




@media (max-width: 900px) {
  .actions button span {display: none;}
  button [class^="light-icon-"], button [class*=" light-icon-"] {font-size: 12px;}
}


.actions button.btn {
  display: inline-flex;         /* use flex layout */
  align-items: center;          /* vertical align */
  gap: 6px;                     /* spacing between icon and text */
  padding: 8px 12px;            /* adjust as needed */
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
}

.actions button.btn i {
  display: inline-block;        /* ensures the icon behaves as a box */
  font-size: 1em;               /* keep consistent with text */
  line-height: 1;               /* no extra vertical space */
}
button [class^="light-icon-"], button [class*=" light-icon-"] {font-size: 14px;}

/* SCROLL*/
.doc-meta {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; font-size:12px; color:var(--muted);
}
.actions {
  display:flex; gap:10px;
}
/* READ MODE */
body.read-mode .toolbar,body.read-mode #qlToolbar { display: none; /* hide toolbars */}
body.read-mode #editor{ height: calc(100dvh - 56px) }         /* header only */
body.read-mode #editor .ql-editor{ caret-color:transparent }  /* hide caret */
body.read-mode #editor .ql-editor p {
    margin: 0 0 2rem;
    font-size: 24px;
    line-height: 36px;
}
body.read-mode #editor .ql-editor h2,
body.read-mode #editor .ql-editor h3,
body.read-mode #editor .ql-editor h4{ scroll-margin-top:70px } /* smaller offset */
/* Optional: soften background slightly */
body.read-mode {
  background: #0e0f13; /* darker, less contrast than edit mode */
}
/* Floating exit button in Read Mode */
body.read-mode #exitReadBtn {
  display:block;
  position:fixed;
  top:20px; right:20px;
  z-index:100;
  background:#121826;
  color:#e9eef7;
  border:1px solid #2a3448;
  border-radius:50%;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
#exitReadBtn { display:none; } /* hidden by default */



.doc-stats {
  position: relative;
  display: inline-block;
}
.doc-stats button {
  background: #0c0f15;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.doc-stats .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  font-size: 14px;
  z-index: 100;
  min-width: 270px;
}
.doc-stats .dropdown.hidden {
  display: none;
}
.doc-stats .dropdown div {
  margin: 4px 0;
  color: var(--muted);
}
.doc-stats .dropdown strong {
  color: var(--text);
}




/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.lightbox.hidden {
  display: none;
}

.lightbox-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 320px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  text-align: center;
}

.lightbox-content h2 {
  margin-top: 0;
  color: var(--text);
}

.lightbox-content p {
  color: var(--muted);
  margin: 12px 0 20px;
}

.lightbox-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.lightbox-actions .primary {
  flex: 1;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.lightbox-actions .secondary {
  flex: 1;
  background: #0c0f15;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}


.save-status {
  font-size: 13px;
  margin-left: 12px;
}
.save-status.saved {
  color: green;
}
.save-status.dirty {
  color: orange;
}
.save-status.saving {
  color: var(--muted);
}
.save-status::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: currentColor;
  animation: spin 1s linear infinite;
  visibility: hidden;
}
.save-status.saving::before {
  visibility: visible;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.save-status.failed {
  color: red;
}
.save-status.failed::before {
  visibility: hidden; /* no spinner */
}