/* FILE: /css/modal.css */

/* SECTION 01: MODAL BACKDROP */
.modal{position:fixed;inset:0;width:100%;height:100%;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;z-index:40;}

/* SECTION 02: MODAL CONTENT WRAPPER */
.modal .modal-content{position:relative;background:rgba(12,14,28,0.94);border-radius:14px;box-shadow:0 0 26px rgba(0,0,0,0.85);width:640px;max-width:92vw;max-height:86vh;padding:16px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,0.14);}

/* SECTION 03: MODAL CONTENT NARROW */
.modal.narrow .modal-content{width:420px;max-width:92vw;padding:14px;}

/* SECTION 04: MODAL HEADER */
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px;}
.modal-title{font-size:18px;font-weight:900;letter-spacing:0.2px;}
.modal-header-right{display:flex;align-items:center;gap:8px;}

/* SECTION 05: MODAL BODY */
.modal-body{flex:1;overflow:auto;padding:10px 6px;}

/* SECTION 06: MODAL SECTIONS */
.modal-section{display:flex;flex-direction:column;gap:8px;}
.modal-h{font-size:15px;font-weight:800;opacity:0.9;}

/* SECTION 07: MODAL LISTS */
.modal-list{padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.modal-list li{line-height:1.35;font-size:14px;opacity:0.9;}

/* SECTION 08: WORD LOG COLUMNS WRAPPER */
.word-log-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:start;}

/* SECTION 09: WORD LOG COLUMN */
.word-log-col{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,0.12);border-radius:10px;overflow:hidden;background:rgba(0,0,0,0.15);}
.word-log-col-h{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-size:13px;font-weight:800;background:rgba(255,255,255,0.06);}
.word-log-col-list{max-height:240px;overflow:auto;padding:6px 8px;display:flex;flex-direction:column;gap:4px;}
.word-log-col-list div{font-size:13px;opacity:0.9;}

/* SECTION 10: LEGACY WORD LOG LIST */
.word-log-list{display:flex;flex-direction:column;gap:6px;}
.log-item{display:flex;justify-content:space-between;gap:8px;font-size:13px;}
.log-word{font-weight:800;}
.log-meta{opacity:0.6;font-size:11px;}
.log-item.is-seven .log-word{color:#ffd86b;}

/* SECTION 11: MODAL BUTTON OVERRIDES */
.modal .btn{font-size:14px;}
.modal .btn.ghost{opacity:0.8;}

/* SECTION 12: SCROLLBAR TUNING */
.modal-body::-webkit-scrollbar,.word-log-col-list::-webkit-scrollbar{width:8px;}
.modal-body::-webkit-scrollbar-thumb,.word-log-col-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:8px;}