/* ============================================================
   MUSIC JOURNAL COMMENTS — isolated stylesheet
   Inherits the music_diary.log visual language (Courier New
   monospace, dashed separators, no modern card UI).
   Scoped with `mjc-` so nothing collides with existing styles.
   ============================================================ */

.mjc-mount{
    margin-top:18px;
    padding-top:12px;
    border-top:1px dashed #c8c8c8;
}

/* ---- read comments toggle ---- */
.mjc-toggle{
    font-family:"Courier New", monospace;
    font-size:13px;
    color:#666;
    cursor:pointer;
    user-select:none;
    display:inline-block;
    margin-bottom:8px;
    line-height:1.5;
}
.mjc-toggle:hover{ color:#4068b8; }

/* ---- comments area (collapsible) ---- */
.mjc-area{
    display:none;
    margin-bottom:8px;
}
.mjc-area.mjc-area-open{ display:block; }

/* ---- single comment ---- */
.mjc-comment{
    font-family:"Courier New", monospace;
    font-size:12px;
    color:#222;
    line-height:1.6;
    padding:8px 0;
    border-bottom:1px dashed #d8d8d8;
}
.mjc-comment:last-of-type{ border-bottom:none; }

.mjc-comment-head{
    margin-bottom:3px;
}
.mjc-comment-name{
    font-weight:bold;
    color:#000;
    font-size:13px;
}
.mjc-comment-name a{
    color:#4068b8;
    text-decoration:none;
}
.mjc-comment-name a:hover{ text-decoration:underline; }

.mjc-comment-text{
    color:#222;
    line-height:1.7;
    white-space:pre-wrap;
    word-break:break-word;
    margin-bottom:4px;
}

.mjc-comment-date{
    font-family:"Courier New", monospace;
    font-size:10px;
    color:#999;
}

/* Sara's comments — subtle star, blue name */
.mjc-comment.mjc-comment-sara .mjc-comment-name{
    color:#4068b8;
}
.mjc-comment.mjc-comment-sara .mjc-comment-name::after{
    content:" \2605";
    color:#d4a017;
    font-size:10px;
}

/* ---- empty state ---- */
.mjc-empty{
    font-family:"Courier New", monospace;
    font-size:11px;
    color:#999;
    padding:4px 0 8px;
    font-style:italic;
}

/* ---- leave a comment toggle ---- */
.mjc-leave-toggle{
    font-family:"Courier New", monospace;
    font-size:12px;
    color:#666;
    cursor:pointer;
    user-select:none;
    display:inline-block;
    margin-top:4px;
    line-height:1.5;
}
.mjc-leave-toggle:hover{ color:#4068b8; }

/* ---- comment form ---- */
.mjc-form{
    display:none;
    margin-top:10px;
    padding:10px 0 4px;
    border-top:1px dashed #d8d8d8;
}
.mjc-form.mjc-form-open{ display:block; }

.mjc-field{
    margin-bottom:8px;
}
.mjc-field label{
    display:block;
    font-family:"Courier New", monospace;
    font-size:10px;
    color:#666;
    margin-bottom:2px;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.mjc-req{ color:#c0392b; }
.mjc-opt{ font-size:9px; color:#999; text-transform:none; letter-spacing:0; }

.mjc-field input,
.mjc-field textarea{
    width:100%;
    box-sizing:border-box;
    font-family:"Courier New", monospace;
    font-size:12px;
    color:#222;
    border:1px solid #888;
    background:#fff;
    padding:5px 7px;
    border-radius:3px;
}
.mjc-field textarea{
    min-height:56px;
    resize:vertical;
    line-height:1.6;
}
.mjc-field input:focus,
.mjc-field textarea:focus{
    outline:none;
    border-color:#4068b8;
}

.mjc-submit{
    font-family:"Courier New", monospace;
    font-size:11px;
    font-weight:bold;
    padding:5px 14px;
    background:linear-gradient(to bottom,#5a82c8,#385898);
    color:#fff;
    border:1px solid #1a2a55;
    border-radius:3px;
    cursor:pointer;
    margin-top:2px;
    text-shadow:0 1px 1px rgba(0,0,0,.4);
    letter-spacing:.5px;
}
.mjc-submit:hover{ background:linear-gradient(to bottom,#7098d8,#4868a8); }
.mjc-submit:disabled{ opacity:.6; cursor:default; }

.mjc-form-msg{
    font-family:"Courier New", monospace;
    font-size:11px;
    color:#2a8a2a;
    margin-top:5px;
    display:none;
}
.mjc-form-msg.mjc-form-msg-show{ display:block; }
.mjc-form-err{
    font-family:"Courier New", monospace;
    font-size:11px;
    color:#c0392b;
    margin-top:5px;
    display:none;
}
.mjc-form-err.mjc-form-err-show{ display:block; }

/* ---- responsive ---- */
@media (max-width:640px){
    .mjc-field input,
    .mjc-field textarea{ font-size:11px; }
}