/* ==========================================================================
   COMPONENT: notebook
   --------------------------------------------------------------------------
   The "crossed-out draft" notebook visual — handwritten phrases on lined
   paper, each progressively struck-through to show evolution. Used by the
   RejectionLearning section and any "what we were going to say but didn't"
   moment.

   Markup contract:
     <div class="e-notebook">
         <h3  class="e-notebook__header">Header text</h3>
         <ol  class="e-notebook__lines">
             <li class="e-notebook__phrase"><span class="e-notebook__text">...</span></li>
         </ol>
         <p   class="e-notebook__margin-note">Margin note</p>
     </div>
   ========================================================================== */

.e-notebook {
    background-color: var(--e-color-background);
    background-image: repeating-linear-gradient(transparent, transparent 31px, var(--e-color-border) 31px, var(--e-color-border) 32px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(28, 145, 228, 0.08);
    border-radius: var(--e-radius-xl);
    padding: var(--e-space-sm) var(--e-space-md) var(--e-space-lg) var(--e-space-lg);
    position: relative;
    transform: rotate(-0.5deg);
    box-shadow: 0 4px 24px rgba(28, 145, 228, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.e-notebook::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 70px;
    width: 1px;
    background: rgba(28, 145, 228, 0.15);
}


/* HEADER */

.e-notebook__header {
    font-family: var(--e-font-handwriting);
    font-size: var(--e-font-size-3xl);
    color: var(--e-color-primary);
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0 0 var(--e-space-sm);
}

.e-notebook__header span {
    color: var(--e-color-accent);
}


/* PHRASE LINES */

.e-notebook__lines {
    list-style: none;
    padding: 0;
    margin: var(--e-space-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-space-sm);
}

.e-notebook__phrase {
    position: relative;
    font-family: var(--e-font-handwriting);
    color: var(--e-color-muted);
    line-height: 1.4;
}

.e-notebook__text {
    position: relative;
    display: inline;
    font-size: var(--e-font-size-2xl);
}

.e-notebook__text::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 2px;
    background: var(--e-color-accent);
    transform: scaleX(0) rotate(-1deg);
    transform-origin: left center;
    transition: transform 1.2s ease 0.3s;
}

.e-notebook__phrase--visible .e-notebook__text::after {
    transform: scaleX(1) rotate(-1deg);
}


/* MARGIN NOTE — handwritten note in margin (e.g. "this is the one"). */

.e-notebook__margin-note {
    position: absolute;
    right: -10px;
    bottom: var(--e-space-sm);
    font-family: var(--e-font-handwriting);
    color: var(--e-color-accent);
    transform: rotate(2deg);
    max-width: 200px;
    text-align: right;
    margin: 0;
}