/* ============================================================
   JOURNAL COMMENTS — isolated stylesheet
   Inherits the journal's visual language (Arial/Helvetica, 13px,
   dashed separators, no modern card UI). Scoped with `jc-` so
   nothing collides with existing journal styles.
   ============================================================ */

.jc-mount{
    margin-top:20px;
    padding-top:14px;
    border-top:1px dashed rgba(0,0,0,.12);
}

/* ---- read comments toggle ---- */
.jc-toggle{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#666;
    cursor:pointer;
    user-select:none;
    display:inline-block;
    margin-bottom:10px;
    letter-spacing:.2px;
}
.jc-toggle:hover{ color:#333; text-decoration:underline; }

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

/* ---- single comment ---- */
.jc-comment{
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#444;
    line-height:1.7;
    padding:10px 0;
    border-bottom:1px dashed rgba(0,0,0,.10);
}
.jc-comment:last-of-type{ border-bottom:none; }

.jc-comment-head{
    margin-bottom:4px;
}
.jc-comment-name{
    font-weight:bold;
    color:#333;
    font-size:13px;
    letter-spacing:.2px;
}
.jc-comment-name a{
    color:#214a91;
    text-decoration:none;
}
.jc-comment-name a:hover{ text-decoration:underline; }

.jc-comment-text{
    color:#444;
    line-height:1.9;
    white-space:pre-wrap;
    word-break:break-word;
    margin-bottom:6px;
}

.jc-comment-date{
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#999;
    letter-spacing:.3px;
}

/* Sara's comments — subtle star, same neutral style */
.jc-comment.jc-comment-sara .jc-comment-name{
    color:#214a91;
}
.jc-comment.jc-comment-sara .jc-comment-name::after{
    content:" \2605";
    color:#d4a017;
    font-size:11px;
}

/* ---- empty state ---- */
.jc-empty{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#999;
    padding:6px 0 10px;
    font-style:italic;
}

/* ---- leave a comment toggle ---- */
.jc-leave-toggle{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#666;
    cursor:pointer;
    user-select:none;
    display:inline-block;
    margin-top:6px;
    letter-spacing:.2px;
}
.jc-leave-toggle:hover{ color:#333; text-decoration:underline; }

/* ---- comment form ---- */
.jc-form{
    display:none;
    margin-top:12px;
    padding:12px 0 4px;
    border-top:1px dashed rgba(0,0,0,.10);
}
.jc-form.jc-form-open{ display:block; }

.jc-field{
    margin-bottom:8px;
}
.jc-field label{
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#666;
    margin-bottom:3px;
    letter-spacing:.2px;
}
.jc-req{ color:#c0392b; }
.jc-opt{ font-size:10px; color:#999; }

.jc-field input,
.jc-field textarea{
    width:100%;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#222;
    border:1px solid #b0b0b0;
    background:#fdfbf6;
    padding:6px 8px;
    border-radius:3px;
}
.jc-field textarea{
    min-height:64px;
    resize:vertical;
    line-height:1.6;
}
.jc-field input:focus,
.jc-field textarea:focus{
    outline:none;
    border-color:#214a91;
}

.jc-submit{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    padding:6px 16px;
    background:#214a91;
    color:#fff;
    border:1px solid #163a6e;
    border-radius:3px;
    cursor:pointer;
    margin-top:4px;
    letter-spacing:.2px;
}
.jc-submit:hover{ background:#163a6e; }
.jc-submit:disabled{ opacity:.6; cursor:default; }

.jc-form-msg{
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#2a8a2a;
    margin-top:6px;
    display:none;
}
.jc-form-msg.jc-form-msg-show{ display:block; }
.jc-form-err{
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#c0392b;
    margin-top:6px;
    display:none;
}
.jc-form-err.jc-form-err-show{ display:block; }

/* ---- responsive — match journal mobile behavior ---- */
@media (max-width:640px){
    .jc-field input,
    .jc-field textarea{ font-size:12px; }
}