/* MTGCardsmith native card comments - dark theme to match screen.css
   (body #151a1f, text #e1e1e1, green accent #89c196). Spacing scale 4/8/12/16/24. */

.smith-comments {
    margin-top: 24px;
    max-width: 760px;
    color: #e1e1e1;
    font-family: "Crimson Text", Georgia, serif;
    text-align: left; /* the view.php column has Foundation's .center; force comments left */
}
.smith-comments h3, .smith-comments p, .smith-comments div, .smith-comments li { text-align: left; }
.smith-comments * { box-sizing: border-box; }

.smith-comments-title {
    margin: 0 0 16px;
    color: #f4f1e9;
    font-size: 22px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding-bottom: 8px;
}
.smith-comments .smith-cmt-count {
    display: inline-block; min-width: 22px; padding: 0 8px; margin-left: 4px;
    font-family: Arial, sans-serif; font-size: 12px; line-height: 22px; font-weight: 700;
    text-align: center; color: #cfe6d5; background: rgba(137,193,150,.16);
    border-radius: 11px; vertical-align: middle;
}

/* ---------- avatars ---------- */
.cmt-avatar, .smith-cmt-myavatar {
    flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-family: Arial, sans-serif; font-weight: 700; font-size: 16px;
    text-transform: uppercase; user-select: none;
}

/* ---------- composer ---------- */
.smith-cmt-form { display: flex; gap: 12px; margin-bottom: 24px; align-items: flex-start; }
.smith-cmt-form .smith-cmt-box { flex: 1 1 auto; min-width: 0; }
.smith-cmt-box,
.smith-cmt-reply-box,
.smith-cmt-edit-box {
    background: #1b2129;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 8px;
}
.smith-cmt-box:focus-within,
.smith-cmt-reply-box:focus-within,
.smith-cmt-edit-box:focus-within { border-color: rgba(137,193,150,.55); }

.smith-comments textarea {
    width: 100%; box-sizing: border-box; display: block;
    background: transparent; border: 0; outline: none; resize: vertical;
    font-family: "Crimson Text", Georgia, serif; font-size: 16px; line-height: 1.5;
    color: #ececec; min-height: 56px; padding: 4px;
}
.smith-comments textarea::placeholder { color: #7e8893; }

.smith-cmt-toolbar, .smith-cmt-reply-actions, .smith-cmt-edit-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.smith-cmt-toolbar { justify-content: space-between; }
.smith-cmt-reply-actions, .smith-cmt-edit-actions { justify-content: flex-end; }
.smith-cmt-reply-actions .smith-emoji-btn, .smith-cmt-edit-actions .smith-emoji-btn { margin-right: auto; }

/* buttons */
.smith-cmt-submit, .smith-cmt-reply-send, .smith-cmt-edit-save {
    background: #3e7d52; color: #fff; border: 0; border-radius: 6px;
    padding: 8px 16px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s ease;
}
.smith-cmt-submit:hover, .smith-cmt-reply-send:hover, .smith-cmt-edit-save:hover { background: #4a945f; color: #fff; }
.smith-cmt-submit:disabled { opacity: .5; cursor: default; }
.smith-cmt-reply-cancel, .smith-cmt-edit-cancel {
    background: none; border: 0; color: #9aa3ad; font-family: Arial, sans-serif;
    font-size: 13px; cursor: pointer; padding: 8px;
}
.smith-cmt-reply-cancel:hover, .smith-cmt-edit-cancel:hover { color: #cfd5db; }

/* emoji */
.smith-emoji-btn {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px; font-size: 18px; line-height: 1; padding: 5px 9px; cursor: pointer;
}
.smith-emoji-btn:hover { background: rgba(255,255,255,.10); }
.smith-emoji-panel {
    position: absolute; z-index: 9999; width: 264px; max-width: calc(100vw - 16px);
    max-height: 252px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
    background: #232a33; border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.55); padding: 8px;
    display: none; grid-template-columns: repeat(8, 1fr); gap: 4px;
}
.smith-emoji-panel.open { display: grid; }
.smith-emoji-panel span {
    font-size: 20px; line-height: 1; text-align: center; cursor: pointer;
    border-radius: 6px; padding: 4px 0;
}
.smith-emoji-panel span:hover { background: rgba(255,255,255,.12); }
/* MTG mana symbols in the picker (image instead of a text glyph) */
.smith-emoji-panel span.smith-emoji-mana { display: flex; align-items: center; justify-content: center; }
.smith-emoji-panel span.smith-emoji-mana img { width: 21px; height: 21px; display: block; }
/* MTG mana symbols rendered inline inside a posted comment */
img.cmt-mana { width: 17px; height: 17px; vertical-align: -3px; margin: 0 1px; }

/* ---------- thread ---------- */
.smith-cmt-thread { margin-top: 8px; }
.cmt-list, .cmt-replies { list-style: none; margin: 0; padding: 0; }
.cmt { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); }
.cmt-list > .cmt:first-child { border-top: 0; padding-top: 8px; }

.cmt-row { display: flex; gap: 12px; align-items: flex-start; }
.cmt-main { flex: 1 1 auto; min-width: 0; }

.cmt-head { font-size: 14px; margin-bottom: 4px; line-height: 1.3; }
.cmt-author {
    font-family: Arial, sans-serif; font-weight: 700; font-size: 14px;
    color: #9ed3a9 !important; text-decoration: none;
}
.cmt-author:hover { color: #bfe5c7 !important; text-decoration: underline; }
/* Premium badge after the name. Mirrors the home2 kit's ux-pill--premium so it
   looks identical on home2 (where the kit also styles it) and on the legacy
   /view/ page (where the kit CSS isn't loaded). Links to the subscribe page. */
.cmt-premium {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
    margin-left: 8px; border-radius: 999px; vertical-align: middle; line-height: 1;
    font-family: Arial, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
    text-decoration: none; cursor: pointer;
    color: #f3ad33; background: rgba(243,173,51,.14); border: 1px solid rgba(243,173,51,.42);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cmt-premium::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.cmt-premium:hover { color: #ffd98a; background: rgba(243,173,51,.24); border-color: rgba(243,173,51,.6); text-decoration: none; }
.cmt-time { color: #828c96; font-size: 12px; margin-left: 8px; font-family: Arial, sans-serif; }
.cmt-edited { color: #6f7882; font-size: 12px; margin-left: 4px; font-family: Arial, sans-serif; }

.cmt-body {
    font-size: 16px; line-height: 1.55; color: #dde1e6;
    word-wrap: break-word; overflow-wrap: anywhere; white-space: normal;
}
.cmt-body a { color: #9ed3a9; text-decoration: underline; }
.cmt-body a:hover { color: #bfe5c7; }

.cmt-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.cmt-actions .cmt-act {
    color: #8b949e !important; font-family: Arial, sans-serif; font-size: 13px;
    text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.cmt-actions .cmt-act:hover { color: #9ed3a9 !important; }
.cmt-actions .cmt-act i { font-size: 12px; }
.cmt-actions .cmt-delete:hover, .cmt-actions .cmt-ban:hover { color: #e08585 !important; }

/* replies (one level) */
.cmt-replies:not(:empty) { margin: 12px 0 0 0; padding-left: 16px; border-left: 2px solid rgba(137,193,150,.25); }
.cmt-replies .cmt { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.cmt-replies .cmt:first-child { border-top: 0; padding-top: 0; }
.cmt-replies .cmt-avatar { width: 30px; height: 30px; font-size: 14px; }

/* inline reply / edit boxes */
.smith-cmt-reply-box, .smith-cmt-edit-box { margin-top: 12px; }

/* ---------- notices ---------- */
.smith-cmt-notice {
    padding: 12px 16px; border-radius: 8px; font-size: 15px; margin-bottom: 24px; font-family: Arial, sans-serif;
    background: rgba(224,133,133,.10); border: 1px solid rgba(224,133,133,.30); color: #e9bcbc;
}
/* Guest invitation, styled like the home2 ux-empty block. */
.smith-cmt-signin {
    text-align: center; padding: 30px 20px; margin-bottom: 24px; border-radius: 9px;
    border: 1px dashed rgba(151,214,202,.32); background: rgba(2,28,34,.4); font-family: Arial, sans-serif;
}
.smith-cmt-signin__icon { font-size: 38px; line-height: 1; opacity: .75; }
.smith-cmt-signin h4 { margin: 10px 0 5px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 21px; color: #f3eee0; }
.smith-cmt-signin p { margin: 0 0 16px; color: #b9d2cb; font-size: 15px; }
.smith-cmt-signin__actions { display: inline-flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Scoped under .smith-cmt-signin so the colours beat the home2 theme's
   `.mtgcs-home2 a { color: gold }` rule (which otherwise made the gold button
   gold-on-gold). */
.smith-cmt-signin .smith-cmt-signin__btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px; border-radius: 999px;
    font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.smith-cmt-signin .smith-cmt-signin__btn--primary { background: #f3ad33; color: #06303a !important; }
.smith-cmt-signin .smith-cmt-signin__btn--primary:hover { background: #ffc352; color: #06303a !important; }
.smith-cmt-signin .smith-cmt-signin__btn--ghost { background: rgba(4,28,34,.5); border-color: rgba(151,214,202,.4); color: #d7eae3 !important; }
.smith-cmt-signin .smith-cmt-signin__btn--ghost:hover { border-color: #65d6ca; color: #fff !important; }
/* When the invitation is used inline as a guest reply box, drop the reply-box chrome. */
.smith-cmt-reply-box--signin { padding: 0 !important; background: none !important; border: none !important; }
.smith-cmt-reply-box--signin .smith-cmt-signin { margin: 8px 0 0; padding: 22px 16px; }
.smith-cmt-empty { color: #828c96; font-size: 15px; padding: 8px 0; font-family: Arial, sans-serif; }

.smith-cmt-msg { font-family: Arial, sans-serif; font-size: 13px; }
.smith-cmt-msg:empty { display: none; } /* no dead space under the buttons until there's a message */
.smith-cmt-form > .smith-cmt-box > .smith-cmt-msg:not(:empty) { margin-top: 8px; }
.smith-cmt-msg.error { color: #e08585; }
.smith-cmt-msg.ok { color: #8fd29c; }

@media (max-width: 767px) {
    .smith-comments { max-width: 100%; }
    .cmt-replies:not(:empty) { padding-left: 12px; }
}