/* =========================
   Notebook CSS (no variables)
   Values:
   line = 35px
   top gap = 52px
   text nudge = 9px
   ========================= */

/* עטיפה כללית */
.nb-wrap{
  max-width: 820px;
  margin: 40px auto;
  font-family: system-ui, Arial, sans-serif;
}

/* גוף המחברת */
.nb-page{
  position: relative;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  min-height: 900px;
}

/* קווים: מתחילים רק אחרי 52px (הקו הראשון נמוך יותר) */
.nb-page::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;            /* top gap */
  bottom: 0;
  pointer-events: none;

  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(35px - 1px),
    #d6d6d6 calc(35px - 1px),
    #d6d6d6 35px
  );
}

/* הספירלה */
.nb-spiral{
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(120,120,120,.6) 0px,
      rgba(120,120,120,.6) 6px,
      transparent 6px,
      transparent 44px
    );
  opacity: .45;
  pointer-events: none;
}

/* אזור הכתיבה */
.nb-editor{
  position: relative;
  z-index: 1;

  direction: rtl;
  text-align: right;

  line-height: 35px;
  font-size: 18px;

  padding-top: 52px;      /* top gap */
  padding-right: 64px;    /* מרחק מהספירלה */
  padding-left: 24px;

  outline: none;
}

/* בלוקים */
.nb-editor p,
.nb-editor h1,
.nb-editor h2{
  margin: 0;
  line-height: 35px;
  position: relative;
  top: 9px;               /* text nudge */
}

/* כותרות */
.nb-editor h1{
  font-size: 32px;
  font-weight: 700;
  top: 3px;               /* 9px + (-6px) */
}

.nb-editor h2{
  font-size: 24px;
  font-weight: 700;
  top: 6px;               /* 9px + (-3px) */
}

/* שורה ריקה לא קורסת */
.nb-editor p:empty::before,
.nb-editor h1:empty::before,
.nb-editor h2:empty::before{
  content: "\00a0";
}

/* =========================
   Floating minimal toolbar (3 circles)
   ========================= */

.nb-toolbar{
  position: fixed;
  right: 24px;
  top: 45%;
  transform: translateY(-50%);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 12px;

  background: none;
  padding: 0;
  box-shadow: none;
}

/* כפתור עגול */
.nb-toolbar button{
  width: 44px;
  height: 44px;
  border-radius: 50%;

  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  color: #555;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}

/* Hover */
.nb-toolbar button:hover{
  background: #f4f4f4;
}

/* Active = מצב כתיבה נוכחי */
.nb-toolbar button.is-active{
  background: #e9e9e9;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
  border-color: #aaa;
}

/* לחיצה פיזית */
.nb-toolbar button:active{
  transform: scale(.96);
}

/* מובייל – קצת יותר קטן */
@media (max-width: 900px){
  .nb-toolbar{
    right: 12px;
  }
  .nb-toolbar button{
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
}

/* =========================
   Pages stack + Add page button
   ========================= */

.nb-pages{
  display: grid;
  gap: 22px;
}

.nb-add-wrap{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.nb-add-btn{
  padding: 10px 16px;
  border: 1px solid #cfcfcf;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.nb-add-btn:active{
  transform: translateY(1px);
}