/* IJMTIP Author Workflow v2.0 */

/* -------- Draft wizard step strip: no horizontal scrolling -------- */
.wizard-steps{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
    overflow-x:visible !important;
    gap:6px !important;
    padding:6px !important;
    border:1px solid #b7cccf !important;
    border-radius:14px !important;
    background:#eaf3f3 !important;
    box-sizing:border-box !important;
}
.wizard-steps::-webkit-scrollbar{display:none}
.wizard-steps>*,
.wizard-steps>.wizard-step{
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    padding:11px 9px !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#526778 !important;
    white-space:normal !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}
.wizard-steps>* strong,
.wizard-steps>* span:last-child{
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}
.wizard-steps>*.done{
    background:#dcefeb !important;
    color:#145f60 !important;
}
.wizard-steps>*.active,
.wizard-steps>*.current{
    background:#137f80 !important;
    color:#fff !important;
    box-shadow:0 4px 12px rgba(19,127,128,.18) !important;
}
.wizard-steps>*.active span,
.wizard-steps>*.current span,
.wizard-steps>*.active strong,
.wizard-steps>*.current strong{
    color:#fff !important;
}
.wizard-steps>*.active::after,
.wizard-steps>*.current::after{
    display:none !important;
}

/* Draft action needs stronger visual priority. */
.my-submission-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
    min-width:150px;
}
.draft-continue-button{
    background:#137f80 !important;
    border-color:#137f80 !important;
    color:#fff !important;
    box-shadow:0 4px 12px rgba(19,127,128,.18);
}
.revision-direct-button{
    background:#9a6915 !important;
    border-color:#9a6915 !important;
    color:#fff !important;
    box-shadow:0 4px 12px rgba(154,105,21,.16);
}

/* -------- Revision: explain exactly what the author has to do -------- */
.revision-howto{
    margin:-4px 0 18px;
    padding:14px 16px;
    border:1px solid #c6dedd;
    border-left:4px solid #137f80;
    border-radius:10px;
    background:#f3f9f8;
}
.revision-howto>strong{display:block;font-size:13px;color:var(--navy)}
.revision-howto>p{margin:4px 0 10px;color:var(--ink-2);font-size:11px;line-height:1.5}
.revision-howto>div{display:flex;gap:8px;flex-wrap:wrap}
.revision-howto>div>span{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 9px;border-radius:8px;background:#fff;
    border:1px solid var(--line);font-size:10px;font-weight:700
}
.revision-howto b{
    display:inline-flex;align-items:center;justify-content:center;
    width:19px;height:19px;border-radius:999px;
    background:#137f80;color:#fff;font-size:9px
}

/* -------- Author submission process / timeline -------- */
.submission-process-page{max-width:1120px}
.process-heading{align-items:flex-start}
.revision-process-callout{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:22px;
    margin-bottom:18px;
    padding:18px 20px;
    border:1px solid #dfc17e;
    border-left:5px solid #9a6915;
    border-radius:13px;
    background:#fffbf1;
}
.revision-process-callout h2{margin:5px 0;font-size:20px}
.revision-process-callout p{margin:0;color:var(--ink-2);font-size:11px;line-height:1.55}
.revision-requirement-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.revision-requirement-chips span{
    padding:6px 8px;border:1px solid #ead9ad;border-radius:999px;
    background:#fff;font-size:9px;font-weight:750;color:#765018
}
.revision-process-button{
    background:#9a6915 !important;border-color:#9a6915 !important;color:#fff !important;
    white-space:nowrap
}

.process-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:18px;
}
.process-summary-grid>div{
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    min-width:0
}
.process-summary-grid span{
    display:block;margin-bottom:4px;font-size:9px;color:var(--muted);
    font-weight:800;text-transform:uppercase;letter-spacing:.05em
}
.process-summary-grid strong{font-size:12px;overflow-wrap:anywhere}

.process-timeline-card{padding:22px !important}
.process-card-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:16px;margin-bottom:18px
}
.process-card-head h2{margin:4px 0;font-size:21px}
.process-card-head p{margin:0;color:var(--muted);font-size:11px}

.submission-timeline{position:relative;display:grid}
.timeline-event{
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:12px;
    min-width:0
}
.timeline-marker{
    position:relative;
    display:flex;
    justify-content:center;
}
.timeline-marker::after{
    content:"";
    position:absolute;
    top:20px;
    bottom:-4px;
    width:2px;
    background:#d6e0e3;
}
.timeline-event:last-child .timeline-marker::after{display:none}
.timeline-marker span{
    position:relative;
    z-index:2;
    display:block;
    width:14px;height:14px;
    margin-top:5px;
    border:3px solid #fff;
    border-radius:999px;
    background:#66808d;
    box-shadow:0 0 0 2px #c9d7db;
}
.timeline-review .timeline-marker span,
.timeline-round .timeline-marker span,
.timeline-reviewer .timeline-marker span{background:#137f80;box-shadow:0 0 0 2px #9fc9c8}
.timeline-reviewer_done .timeline-marker span,
.timeline-revision_done .timeline-marker span{background:#2f7c54;box-shadow:0 0 0 2px #add2bc}
.timeline-revision .timeline-marker span{background:#a16a14;box-shadow:0 0 0 2px #e0c489}
.timeline-decision .timeline-marker span{background:#163f5b;box-shadow:0 0 0 2px #a8bcc9}
.timeline-decision_accept .timeline-marker span{
    background:#2f7c54;
    box-shadow:0 0 0 2px #add2bc;
}
.timeline-decision_accept .timeline-content{
    position:relative;
    margin:-7px 0 12px;
    padding:12px 14px 13px 42px;
    border:1px solid #b7d9c3;
    border-radius:12px;
    background:#f3faf5;
}
.timeline-decision_accept .timeline-content::before{
    content:"✓";
    position:absolute;
    left:14px;
    top:11px;
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    border-radius:999px;
    background:#2f7c54;
    color:#fff;
    font-size:12px;
    font-weight:900;
    line-height:1;
}
.timeline-decision_accept .timeline-event-head strong{
    color:#1f6946;
    font-size:13.5px;
    font-weight:900;
}
.timeline-decision_accept .timeline-content p{
    color:#315c45;
}

.timeline-content{
    padding:0 0 18px;
    min-width:0
}
.timeline-event-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
}
.timeline-event-head strong{font-size:12px;color:var(--navy)}
.timeline-event-head time{
    flex:0 0 auto;
    color:var(--muted);
    font-size:10px;
    font-variant-numeric:tabular-nums;
}
.timeline-content p{
    margin:4px 0 0;
    max-width:760px;
    color:var(--ink-2);
    font-size:10.5px;
    line-height:1.5
}
.process-bottom-actions{
    display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px
}

@media(max-width:980px){
    .wizard-steps{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
    .revision-process-callout{grid-template-columns:1fr}
    .revision-process-button{width:100%;text-align:center}
}
@media(max-width:720px){
    .wizard-steps{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .process-summary-grid{grid-template-columns:1fr}
    .process-card-head{display:grid}
    .timeline-event-head{display:grid;gap:3px}
    .my-submission-actions{align-items:stretch;width:100%;min-width:0}
}
