/* =============================================================
   JHS Advice — RAMS Generator v5
   Scoped entirely to .jhs-wrap so it never affects other pages.
   All sizes in px — not rem/em — so theme root size is irrelevant.
   All rules use !important to defeat theme overrides.
   Full-width layout, mobile-first responsive.
   ============================================================= */

/* ── Scope reset ─────────────────────────────────────────────── */
.jhs-wrap,
.jhs-wrap *,
.jhs-wrap *::before,
.jhs-wrap *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ── Wrapper — full width of its container ───────────────────── */
.jhs-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Oxygen, Ubuntu, Cantarell, sans-serif !important;
    font-size:   16px !important;
    line-height: 1.6 !important;
    color:       #1a2333 !important;
    width:       100% !important;
    max-width:   100% !important;
    margin:      0 0 2rem 0 !important;
    padding:     0 !important;
    background:  #ffffff !important;
    border:      1px solid #d1dbe8 !important;
    border-radius: 12px !important;
    box-shadow:  0 2px 16px rgba(3,90,131,.08) !important;
    overflow:    hidden !important;
    display:     block !important;
}

/* ── Header ──────────────────────────────────────────────────── */
.jhs-wrap .jhs-header {
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    padding:     20px 24px !important;
    background:  #035A83 !important;
    color:       #ffffff !important;
    font-size:   20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin:      0 !important;
    border-radius: 0 !important;
}

.jhs-wrap .jhs-header svg {
    flex-shrink: 0 !important;
    width:       28px !important;
    height:      28px !important;
    opacity:     0.92 !important;
}

/* ── Body ────────────────────────────────────────────────────── */
.jhs-wrap .jhs-body {
    padding: 24px 28px !important;
    margin:  0 !important;
}

/* ── Tip banner ──────────────────────────────────────────────── */
.jhs-wrap .jhs-tip {
    font-size:     16px !important;
    color:         #3d4e63 !important;
    margin:        0 0 24px 0 !important;
    padding:       14px 18px !important;
    background:    #f0f7fb !important;
    border-left:   3px solid #035A83 !important;
    border-radius: 0 6px 6px 0 !important;
    line-height:   1.6 !important;
    display:       block !important;
}

/* ── Section headings ────────────────────────────────────────── */
.jhs-wrap .jhs-section-heading {
    font-size:   17px !important;
    font-weight: 600 !important;
    color:       #1a2333 !important;
    margin:      0 0 14px 0 !important;
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
}

.jhs-wrap .jhs-step-badge {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           26px !important;
    height:          26px !important;
    background:      #035A83 !important;
    color:           #ffffff !important;
    border-radius:   50% !important;
    font-size:       12px !important;
    font-weight:     700 !important;
    flex-shrink:     0 !important;
    line-height:     1 !important;
}

.jhs-wrap .jhs-optional {
    font-size:   14px !important;
    font-weight: 400 !important;
    color:       #6b7c94 !important;
}

/* ── Upload zone ─────────────────────────────────────────────── */
.jhs-wrap .jhs-upload-zone {
    position:       relative !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            10px !important;
    padding:        32px 20px !important;
    background:     #f5f8fb !important;
    border:         2px dashed #c8d8e8 !important;
    border-radius:  8px !important;
    cursor:         pointer !important;
    text-align:     center !important;
    color:          #6b7c94 !important;
    transition:     border-color .15s, background .15s !important;
    margin-bottom:  12px !important;
}

.jhs-wrap .jhs-upload-zone:hover,
.jhs-wrap .jhs-upload-zone.drag-over {
    border-color: #035A83 !important;
    background:   #e8f3f9 !important;
    color:        #035A83 !important;
}

.jhs-wrap .jhs-upload-zone svg {
    width:  40px !important;
    height: 40px !important;
    opacity: 0.5 !important;
}

.jhs-wrap .jhs-upload-main {
    margin:      0 !important;
    font-size:   16px !important;
    color:       #3d4e63 !important;
    font-weight: 400 !important;
}

.jhs-wrap .jhs-upload-link {
    color:           #035A83 !important;
    text-decoration: underline !important;
    cursor:          pointer !important;
    font-weight:     500 !important;
}

.jhs-wrap .jhs-upload-hint {
    margin:     0 !important;
    font-size:  14px !important;
    color:      #6b7c94 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
}

.jhs-wrap .jhs-file-input {
    position: absolute !important;
    inset:    0 !important;
    width:    100% !important;
    height:   100% !important;
    opacity:  0 !important;
    cursor:   pointer !important;
    font-size: 1px !important;
}

/* ── File list ───────────────────────────────────────────────── */
.jhs-wrap .jhs-file-list { margin-bottom: 4px !important; }

.jhs-wrap .jhs-file-item {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         8px 12px !important;
    margin-top:      6px !important;
    background:      #f5f8fb !important;
    border:          1px solid #d1dbe8 !important;
    border-radius:   6px !important;
    font-size:       15px !important;
}

.jhs-wrap .jhs-file-name { color: #3d4e63 !important; font-size: 15px !important; }
.jhs-wrap .jhs-file-size { color: #6b7c94 !important; font-size: 13px !important; margin-left: 8px !important; }

.jhs-wrap .jhs-file-remove {
    background:  none !important;
    border:      none !important;
    color:       #6b7c94 !important;
    cursor:      pointer !important;
    font-size:   20px !important;
    line-height: 1 !important;
    padding:     0 4px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition:  color .15s !important;
}

.jhs-wrap .jhs-file-remove:hover { color: #c0392b !important; }

/* ── Analyse bar ─────────────────────────────────────────────── */
.jhs-wrap .jhs-analyse-bar {
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    margin-top:  10px !important;
    flex-wrap:   wrap !important;
}

.jhs-wrap .jhs-btn-analyse {
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           8px !important;
    padding:       10px 20px !important;
    font-family:   inherit !important;
    font-size:     15px !important;
    font-weight:   500 !important;
    color:         #035A83 !important;
    background:    #e8f3f9 !important;
    border:        2px solid #b8d8ea !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    line-height:   1.2 !important;
}

.jhs-wrap .jhs-btn-analyse:hover {
    background:   #035A83 !important;
    color:        #ffffff !important;
    border-color: #035A83 !important;
}

.jhs-wrap .jhs-btn-analyse:disabled {
    opacity: .55 !important;
    cursor:  not-allowed !important;
}

.jhs-wrap .jhs-btn-analyse svg {
    width:  16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.jhs-wrap .jhs-analyse-status {
    font-size:   15px !important;
    color:       #3d4e63 !important;
    line-height: 1.5 !important;
    flex:        1 !important;
}

/* ── Form groups & labels ────────────────────────────────────── */
.jhs-wrap .jhs-group {
    margin-bottom: 28px !important;
}

.jhs-wrap .jhs-group:last-child {
    margin-bottom: 0 !important;
}

.jhs-wrap .jhs-label {
    display:       block !important;
    font-size:     16px !important;
    font-weight:   600 !important;
    color:         #1a2333 !important;
    margin-bottom: 10px !important;
    line-height:   1.45 !important;
}

.jhs-wrap .jhs-req {
    color:       #c0392b !important;
    margin-left: 3px !important;
    font-weight: 700 !important;
}

/* ── Textareas ───────────────────────────────────────────────── */
.jhs-wrap .jhs-textarea {
    display:       block !important;
    width:         100% !important;
    padding:       12px 14px !important;
    font-family:   inherit !important;
    font-size:     16px !important;
    color:         #1a2333 !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    resize:        vertical !important;
    line-height:   1.55 !important;
    transition:    border-color .15s, box-shadow .15s !important;
    box-sizing:    border-box !important;
    min-height:    64px !important;
    margin:        0 !important;
    max-width:     100% !important;
    appearance:    none !important;
    -webkit-appearance: none !important;
}

.jhs-wrap .jhs-textarea:focus {
    outline:      none !important;
    border-color: #035A83 !important;
    box-shadow:   0 0 0 3px rgba(3,90,131,.12) !important;
}

.jhs-wrap .jhs-textarea::placeholder {
    color:      #8a9bb0 !important;
    font-size:  15px !important;
    font-style: italic !important;
}

.jhs-wrap .jhs-followup {
    margin-top: 12px !important;
}

.jhs-wrap .jhs-other-input {
    display:       block !important;
    width:         100% !important;
    margin-top:    12px !important;
    padding:       11px 14px !important;
    font-family:   inherit !important;
    font-size:     16px !important;
    color:         #1a2333 !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    transition:    border-color .15s, box-shadow .15s !important;
    box-sizing:    border-box !important;
    max-width:     100% !important;
}

.jhs-wrap .jhs-other-input:focus {
    outline:      none !important;
    border-color: #035A83 !important;
    box-shadow:   0 0 0 3px rgba(3,90,131,.12) !important;
}

/* ── Pills ───────────────────────────────────────────────────── */
.jhs-wrap .jhs-pills {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       10px !important;
    margin-top: 8px !important;
}

.jhs-wrap .jhs-pill {
    display:       inline-block !important;
    padding:       10px 20px !important;
    font-family:   inherit !important;
    font-size:     15px !important;
    font-weight:   500 !important;
    color:         #3d4e63 !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 100px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    user-select:   none !important;
    line-height:   1.2 !important;
    text-align:    center !important;
}

.jhs-wrap .jhs-pill:hover {
    border-color: #035A83 !important;
    color:        #035A83 !important;
    background:   #e8f3f9 !important;
}

.jhs-wrap .jhs-pill--on {
    border-color: #035A83 !important;
    background:   #035A83 !important;
    color:        #ffffff !important;
}

.jhs-wrap .jhs-pill--on:hover {
    background:   #024769 !important;
    border-color: #024769 !important;
    color:        #ffffff !important;
}

/* ── Work type cards — CSS-only checkbox cards ───────────────── */
.jhs-wrap .jhs-cards {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   12px !important;
    margin-top:            8px !important;
}

/* Hide the real checkbox but keep it accessible */
.jhs-wrap .jhs-card-cb {
    position:   absolute !important;
    opacity:    0 !important;
    width:      1px !important;
    height:     1px !important;
    overflow:   hidden !important;
    clip:       rect(0,0,0,0) !important;
    margin:     -1px !important;
}

/* The visible card — styled as a label */
.jhs-wrap .jhs-card-lbl {
    display:       flex !important;
    align-items:   flex-start !important;
    gap:           10px !important;
    padding:       14px !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 10px !important;
    cursor:        pointer !important;
    transition:    border-color .15s, background .15s !important;
    user-select:   none !important;
    width:         100% !important;
    box-sizing:    border-box !important;
    min-height:    64px !important;
}

.jhs-wrap .jhs-card-lbl:hover {
    border-color: #035A83 !important;
    background:   #e8f3f9 !important;
}

/* When checkbox is checked, style the label as selected */
.jhs-wrap .jhs-card-cb:checked + .jhs-card-lbl {
    border-color: #035A83 !important;
    background:   #e8f3f9 !important;
    box-shadow:   0 0 0 1px #035A83 !important;
}

/* Focus ring for keyboard accessibility */
.jhs-wrap .jhs-card-cb:focus + .jhs-card-lbl {
    outline:        2px solid #035A83 !important;
    outline-offset: 2px !important;
}

.jhs-wrap .jhs-card-text {
    display:        flex !important;
    flex-direction: column !important;
    gap:            3px !important;
}

.jhs-wrap .jhs-card-label {
    font-size:   15px !important;
    font-weight: 600 !important;
    color:       #1a2333 !important;
    line-height: 1.3 !important;
    display:     block !important;
}

.jhs-wrap .jhs-card-sub {
    font-size:   13px !important;
    color:       #6b7c94 !important;
    line-height: 1.3 !important;
    display:     block !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.jhs-wrap .jhs-footer {
    display:         flex !important;
    justify-content: space-between !important;
    align-items:     center !important;
    padding:         18px 28px !important;
    background:      #f5f8fb !important;
    border-top:      1px solid #d1dbe8 !important;
    margin:          0 !important;
    gap:             10px !important;
    flex-wrap:       wrap !important;
}

.jhs-wrap .jhs-btn-copy {
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           6px !important;
    padding:       10px 16px !important;
    font-family:   inherit !important;
    font-size:     15px !important;
    font-weight:   500 !important;
    color:         #3d4e63 !important;
    background:    transparent !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    line-height:   1.2 !important;
}

.jhs-wrap .jhs-btn-copy:hover      { border-color: #035A83 !important; color: #035A83 !important; }
.jhs-wrap .jhs-btn-copy.jhs-copied { border-color: #2a7a2a !important; color: #2a7a2a !important; }

.jhs-wrap .jhs-btn-copy svg,
.jhs-wrap .jhs-btn-skip svg,
.jhs-wrap .jhs-btn-generate svg {
    width:  16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.jhs-wrap .jhs-btn-skip {
    padding:       10px 20px !important;
    font-family:   inherit !important;
    font-size:     16px !important;
    color:         #3d4e63 !important;
    background:    transparent !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    line-height:   1.2 !important;
}

.jhs-wrap .jhs-btn-skip:hover { border-color: #3d4e63 !important; color: #1a2333 !important; }

.jhs-wrap .jhs-btn-generate {
    padding:        13px 32px !important;
    font-family:    inherit !important;
    font-size:      17px !important;
    font-weight:    700 !important;
    color:          #ffffff !important;
    background:     #035A83 !important;
    border:         none !important;
    border-radius:  8px !important;
    cursor:         pointer !important;
    letter-spacing: .01em !important;
    transition:     all .15s !important;
    line-height:    1.2 !important;
    margin-left:    auto !important;
}

.jhs-wrap .jhs-btn-generate:hover {
    background:  #024769 !important;
    box-shadow:  0 4px 14px rgba(3,90,131,.30) !important;
    transform:   translateY(-1px) !important;
}

.jhs-wrap .jhs-btn-generate:disabled {
    opacity:    .55 !important;
    cursor:     not-allowed !important;
    transform:  none !important;
    box-shadow: none !important;
}

/* ── Progress panel ──────────────────────────────────────────── */
.jhs-wrap .jhs-progress {
    padding:    52px 28px !important;
    text-align: center !important;
}

.jhs-wrap .jhs-progress-bar-wrap {
  width: 100%;
  max-width: 380px;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  margin: 12px auto 4px;
  overflow: hidden;
}
.jhs-progress-bar {
  height: 100%;
  width: 0%;
  background: #035A83;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.jhs-spinner {
    width:         52px !important;
    height:        52px !important;
    margin:        0 auto 20px !important;
    border:        4px solid #b8d8ea !important;
    border-top:    4px solid #035A83 !important;
    border-radius: 50% !important;
    animation:     jhs-spin .85s linear infinite !important;
}

@keyframes jhs-spin { to { transform: rotate(360deg); } }

.jhs-wrap .jhs-progress-msg {
    font-size:   17px !important;
    color:       #3d4e63 !important;
    margin:      0 0 8px !important;
    font-weight: 500 !important;
}

.jhs-wrap .jhs-progress-sub {
    font-size: 14px !important;
    color:     #6b7c94 !important;
    margin:    0 !important;
}

/* ── Download panel ──────────────────────────────────────────── */
.jhs-wrap .jhs-downloads {
    padding:    40px 28px !important;
    text-align: center !important;
    border-top: 4px solid #035A83 !important;
}

.jhs-wrap .jhs-dl-tick { margin-bottom: 16px !important; }
.jhs-wrap .jhs-dl-tick svg { width: 52px !important; height: 52px !important; }

.jhs-wrap .jhs-dl-title {
    font-size:   26px !important;
    font-weight: 700 !important;
    color:       #1a2333 !important;
    margin:      0 0 10px !important;
}

.jhs-wrap .jhs-dl-sub {
    font-size: 16px !important;
    color:     #3d4e63 !important;
    margin:    0 0 28px !important;
}

.jhs-wrap .jhs-dl-grid {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   16px !important;
    margin-bottom:         24px !important;
    width:                 100% !important;
    max-width:             560px !important;
    margin-left:           auto !important;
    margin-right:          auto !important;
}

.jhs-wrap .jhs-dl-card {
    background:    #f5f8fb !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    padding:       18px !important;
    text-align:    left !important;
}

.jhs-wrap .jhs-dl-card-title {
    font-size:   16px !important;
    font-weight: 600 !important;
    margin:      0 0 12px !important;
    color:       #1a2333 !important;
}

.jhs-wrap .jhs-dl-buttons {
    display:        flex !important;
    flex-direction: column !important;
    gap:            8px !important;
}

.jhs-wrap .jhs-dl-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    padding:         10px 16px !important;
    font-family:     inherit !important;
    font-size:       15px !important;
    font-weight:     600 !important;
    color:           #ffffff !important;
    background:      #035A83 !important;
    border:          none !important;
    border-radius:   8px !important;
    text-decoration: none !important;
    cursor:          pointer !important;
    transition:      all .15s !important;
    line-height:     1.2 !important;
}

.jhs-wrap .jhs-dl-btn:hover {
    background:      #024769 !important;
    color:           #ffffff !important;
    text-decoration: none !important;
    transform:       translateY(-1px) !important;
    box-shadow:      0 3px 10px rgba(3,90,131,.28) !important;
}

.jhs-wrap .jhs-dl-btn--outline {
    background: #ffffff !important;
    color:      #035A83 !important;
    border:     2px solid #035A83 !important;
}

.jhs-wrap .jhs-dl-btn--outline:hover {
    background: #e8f3f9 !important;
    color:      #024769 !important;
}

.jhs-wrap .jhs-dl-btn svg {
    width:  18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.jhs-wrap .jhs-dl-note {
    font-size:  14px !important;
    color:      #6b7c94 !important;
    margin:     0 0 20px !important;
    font-style: italic !important;
}

.jhs-wrap .jhs-btn-another {
    padding:       10px 20px !important;
    font-family:   inherit !important;
    font-size:     15px !important;
    color:         #3d4e63 !important;
    background:    transparent !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    line-height:   1.2 !important;
}

.jhs-wrap .jhs-btn-another:hover {
    color:        #035A83 !important;
    border-color: #b8d8ea !important;
}

/* ── Error panel ─────────────────────────────────────────────── */
.jhs-wrap .jhs-error {
    margin:        0 28px 28px !important;
    padding:       16px 18px !important;
    background:    #fff5f5 !important;
    border:        2px solid #feb2b2 !important;
    border-radius: 8px !important;
    text-align:    center !important;
}

.jhs-wrap .jhs-error-msg {
    font-size:   16px !important;
    color:       #c0392b !important;
    margin:      0 0 14px !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
}

.jhs-wrap .jhs-btn-retry {
    padding:       9px 22px !important;
    font-family:   inherit !important;
    font-size:     15px !important;
    font-weight:   600 !important;
    color:         #c0392b !important;
    background:    transparent !important;
    border:        2px solid #c0392b !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    line-height:   1.2 !important;
}

.jhs-wrap .jhs-btn-retry:hover { background: #c0392b !important; color: #ffffff !important; }

/* ── Validation ──────────────────────────────────────────────── */
.jhs-wrap .jhs-textarea.jhs-invalid {
    border-color: #e53e3e !important;
    box-shadow:   0 0 0 3px rgba(229,62,62,.12) !important;
}

.jhs-wrap .jhs-field-err {
    display:     block !important;
    font-size:   14px !important;
    color:       #c0392b !important;
    margin-top:  5px !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (max 900px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .jhs-wrap .jhs-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile (max 640px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .jhs-wrap .jhs-body {
        padding: 18px 16px !important;
    }

    .jhs-wrap .jhs-footer {
        padding:        14px 16px !important;
        flex-direction: column !important;
        align-items:    stretch !important;
        gap:            10px !important;
    }

    .jhs-wrap .jhs-btn-generate {
        width:        100% !important;
        justify-content: center !important;
        margin-left:  0 !important;
        text-align:   center !important;
        order:        -1 !important;
    }

    .jhs-wrap .jhs-btn-skip,
    .jhs-wrap .jhs-btn-copy {
        width:           100% !important;
        justify-content: center !important;
        text-align:      center !important;
    }

    .jhs-wrap .jhs-cards {
        grid-template-columns: 1fr 1fr !important;
    }

    .jhs-wrap .jhs-dl-grid {
        grid-template-columns: 1fr !important;
    }

    .jhs-wrap .jhs-dl-card {
        text-align: center !important;
    }

    .jhs-wrap .jhs-dl-buttons {
        align-items: stretch !important;
    }

    .jhs-wrap .jhs-dl-btn {
        justify-content: center !important;
    }

    .jhs-wrap .jhs-pills {
        gap: 8px !important;
    }

    .jhs-wrap .jhs-pill {
        font-size: 14px !important;
        padding:   8px 16px !important;
    }

    .jhs-wrap .jhs-header {
        padding:   16px 18px !important;
        font-size: 18px !important;
    }

    .jhs-wrap .jhs-analyse-bar {
        flex-direction: column !important;
        align-items:    stretch !important;
    }

    .jhs-wrap .jhs-btn-analyse {
        justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — small mobile (max 420px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .jhs-wrap .jhs-cards {
        grid-template-columns: 1fr !important;
    }

    .jhs-wrap .jhs-label {
        font-size: 15px !important;
    }

    .jhs-wrap .jhs-textarea {
        font-size: 15px !important;
    }
}

/* ── Progress dots (animated while polling) ───────────────────── */
.jhs-wrap .jhs-progress-dots {
    display:     flex !important;
    gap:         8px !important;
    justify-content: center !important;
    margin-top:  20px !important;
}

.jhs-wrap .jhs-progress-dots span {
    display:       inline-block !important;
    width:         10px !important;
    height:        10px !important;
    border-radius: 50% !important;
    background:    #b8d8ea !important;
    animation:     jhs-dot-pulse 1.4s ease-in-out infinite !important;
}

.jhs-wrap .jhs-progress-dots span:nth-child(2) {
    animation-delay: 0.2s !important;
}

.jhs-wrap .jhs-progress-dots span:nth-child(3) {
    animation-delay: 0.4s !important;
}

@keyframes jhs-dot-pulse {
    0%, 80%, 100% { background: #b8d8ea !important; transform: scale(0.8) !important; }
    40%           { background: #035A83 !important; transform: scale(1.2) !important; }
}

/* ── Screen reader only (accessibility) ──────────────────────── */
.jhs-wrap .sr-only {
    position: absolute !important;
    width:     1px !important;
    height:    1px !important;
    padding:   0 !important;
    margin:    -1px !important;
    overflow:  hidden !important;
    clip:      rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border:    0 !important;
}

/* Sub-question groups */
.jhs-wrap .jhs-subgroup {
    margin-top: 0.75rem;
}
.jhs-wrap .jhs-sublabel {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.3rem;
}
.jhs-wrap .jhs-hint {
    font-size: 0.82em;
    color: var(--color-text-tertiary);
    margin: -0.25rem 0 0.5rem;
}
.jhs-wrap .jhs-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-sm);
    font-size: 0.9em;
    font-family: inherit;
    background: var(--color-background-primary);
    color: var(--color-text-primary);
}

/* Sub-question groups (Q15, Q16) */
.jhs-wrap .jhs-subgroup { margin-top: 0.75rem; }
.jhs-wrap .jhs-sublabel { display:block; font-size:0.85em; font-weight:600; color:#555; margin-bottom:0.3rem; }
.jhs-wrap .jhs-hint { font-size:0.82em; color:#777; margin:-0.25rem 0 0.5rem; }
.jhs-wrap .jhs-input { width:100%; box-sizing:border-box; padding:0.5rem 0.75rem; border:1px solid #ccc; border-radius:4px; font-size:0.9em; font-family:inherit; }

/* Disclaimer banner */
.jhs-wrap .jhs-disclaimer {
    background: #fff8e1;
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875em;
    color: #78350f;
    line-height: 1.5;
}

/* Progress bar track */
.jhs-wrap .jhs-progress-track {
    width: 100%;
    height: 6px;
    background: var(--color-border-primary, #e0e0e0);
    border-radius: 3px;
    margin: 0.75rem 0 0.5rem;
    overflow: hidden;
}
.jhs-wrap .jhs-progress-bar {
    height: 100%;
    background: #035A83;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Download expiry notice */
.jhs-wrap .jhs-dl-expiry {
    font-size: 0.82em;
    color: var(--color-text-secondary, #666);
    margin: 0.25rem 0 1rem;
}

/* ═══════════════════════════════════════════════════════
   TRANSLATION PANEL
═══════════════════════════════════════════════════════ */

/* Section toggle tabs */
.jhs-wrap .jhs-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #035A83;
    margin-bottom: 1.5rem;
}
.jhs-wrap .jhs-tab {
    padding: 0.6rem 1.4rem;
    font-size: 0.95em;
    font-weight: 600;
    color: #035A83;
    background: transparent;
    border: 1px solid #035A83;
    border-bottom: none;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    margin-right: 4px;
    transition: background 0.15s, color 0.15s;
}
.jhs-wrap .jhs-tab.active {
    background: #035A83;
    color: #fff;
}
.jhs-wrap .jhs-tab:hover:not(.active) {
    background: #e8f0f6;
}

/* Upload area */
.jhs-wrap .jhs-upload-area {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}
.jhs-wrap .jhs-upload-area:hover,
.jhs-wrap .jhs-upload-area.drag-over {
    border-color: #035A83;
    background: #f0f7fc;
}
.jhs-wrap .jhs-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.jhs-wrap .jhs-upload-hint {
    color: #666;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    pointer-events: none;
}

/* Language pills grid */
.jhs-wrap .jhs-tl-lang-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 0.75rem;
}
.jhs-wrap .jhs-tl-lang-actions button {
    font-size: 0.8em;
    padding: 3px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: #555;
}
.jhs-wrap .jhs-tl-lang-actions button:hover { background: #f5f5f5; }

.jhs-wrap .jhs-tl-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.75rem;
}
.jhs-wrap .jhs-tl-lang {
    font-size: 0.8em;
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    color: #333;
    transition: all 0.15s;
    white-space: nowrap;
}
.jhs-wrap .jhs-tl-lang.selected,
.jhs-wrap .jhs-tl-lang[aria-pressed="true"] {
    background: #035A83;
    color: #fff;
    border-color: #035A83;
}

/* Translation download grid */
.jhs-wrap .jhs-dl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1rem 0;
}
.jhs-wrap .jhs-dl-grid a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #035A83;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    transition: background 0.15s;
}
.jhs-wrap .jhs-dl-grid a:hover { background: #024a6e; }

/* ═══════════════════════════════════════════════════════
   CHOICE SCREEN
═══════════════════════════════════════════════════════ */
.jhs-wrap .jhs-choice-heading {
    font-size: 1.25em;
    font-weight: 700;
    color: #035A83;
    text-align: center;
    margin: 2rem 0 1.25rem;
}
.jhs-wrap .jhs-choice-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
/* Translate button spans wider on desktop (5-button layout: 2+2+1). */
.jhs-wrap .jhs-choice-btn--wide {
    width: 100% !important;
    max-width: 520px !important;
}
.jhs-wrap .jhs-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 240px;
    padding: 2rem 1.5rem;
    border: 2px solid #035A83;
    border-radius: 10px;
    background: #fff;
    color: #035A83;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    text-align: center;
}
.jhs-wrap .jhs-choice-btn:hover {
    background: #035A83;
    color: #fff;
    box-shadow: 0 4px 16px rgba(3,90,131,0.18);
}
.jhs-wrap .jhs-choice-btn svg {
    flex-shrink: 0;
}
.jhs-wrap .jhs-choice-label {
    font-size: 1.1em;
    font-weight: 700;
}
.jhs-wrap .jhs-choice-sub {
    font-size: 0.82em;
    opacity: 0.85;
    line-height: 1.4;
}

/* Back link */
.jhs-wrap .jhs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #035A83;
    font-size: 0.88em;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.25rem;
    text-decoration: underline;
}
.jhs-wrap .jhs-back-link:hover { color: #024a6e; }

/* ── Translation warning ──────────────────────────────────── */
.jhs-wrap .jhs-tl-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem !important;
    background: #fff8e1 !important;
    border: 1px solid #f59e0b !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    color: #78350f !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.5 !important;
}
.jhs-wrap .jhs-tl-warning svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #f59e0b;
}

/* ══════════════════════════════════════════════════════
   PROJECT LIBRARY
   ══════════════════════════════════════════════════════ */

/* ── Load project bar ──────────────────────────────── */
.jhs-wrap .jhs-project-load-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem !important;
    margin-bottom: 2rem !important;
}
.jhs-wrap .jhs-btn-load-project {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    color: #035A83;
    border: 1.5px solid #035A83;
    border-radius: 6px;
    font-size: 16px !important;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.jhs-wrap .jhs-btn-load-project:hover {
    background: #035A83;
    color: #fff;
}

/* ── Load panel ────────────────────────────────────── */
.jhs-wrap .jhs-project-panel {
    border: 1.5px solid #035A83;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.jhs-wrap .jhs-project-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: #035A83;
    color: #fff;
    font-size: 16px !important;
    font-weight: 700;
}
.jhs-wrap .jhs-project-panel-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px !important;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    padding: 0;
}
.jhs-wrap .jhs-project-panel-close:hover { opacity: 1; }
.jhs-wrap .jhs-project-panel-body {
    padding: 0.75rem 1rem;
    background: #f8fbfd;
    min-height: 60px;
}
.jhs-wrap .jhs-project-loading,
.jhs-wrap .jhs-project-empty {
    color: #666;
    font-size: 16px !important;
    margin: 0;
    padding: 0.5rem 0;
}
.jhs-wrap .jhs-project-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.jhs-wrap .jhs-project-list li {
    border-bottom: 1px solid #e2ecf3;
}
.jhs-wrap .jhs-project-list li:last-child { border-bottom: none; }
.jhs-wrap .jhs-project-load-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem 0.5rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
}
.jhs-wrap .jhs-project-load-item:hover { background: #e8f1f8; }
.jhs-wrap .jhs-project-item-name {
    font-size: 16px !important;
    font-weight: 600;
    color: #035A83;
}
.jhs-wrap .jhs-project-item-date {
    font-size: 15px !important;
    color: #888;
    white-space: nowrap;
    margin-left: 1rem;
}

/* ── Document checklist ────────────────────────────── */
.jhs-wrap .jhs-doc-checklist {
    border: 1.5px solid #d1dbe8;
    border-radius: 8px;
    overflow: hidden;
    margin: 2rem 0 1rem;
}
.jhs-wrap .jhs-doc-checklist-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #035A83;
    color: #fff;
    font-size: 16px !important;
    font-weight: 700;
}
.jhs-wrap .jhs-doc-checklist-sub {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 16px !important;
    color: #555;
    background: #f8fbfd;
    border-bottom: 1px solid #e2ecf3;
}
.jhs-wrap .jhs-doc-list {
    padding: 0.5rem 0;
    background: #fff;
}
.jhs-wrap .jhs-doc-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid #f0f4f8;
}
.jhs-wrap .jhs-doc-item:last-child { border-bottom: none; }
.jhs-wrap .jhs-doc-item:hover:not(.jhs-doc-item--soon) { background: #f0f7fc; }
.jhs-wrap .jhs-doc-item--soon {
    opacity: 0.55;
    cursor: not-allowed;
}
.jhs-wrap .jhs-doc-item input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: #035A83;
    width: 16px;
    height: 16px;
}
.jhs-wrap .jhs-doc-item-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.jhs-wrap .jhs-doc-item-label {
    font-size: 16px !important;
    font-weight: 600;
    color: #1a1a1a;
}
.jhs-wrap .jhs-doc-item-desc {
    font-size: 15px !important;
    color: #666;
    margin-top: 0.1rem;
}
.jhs-wrap .jhs-doc-soon-badge {
    font-size: 14px !important;
    font-weight: 700;
    color: #fff;
    background: #94a3b8;
    border-radius: 3px;
    padding: 0.15rem 0.45rem;
    align-self: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── GDPR notice ───────────────────────────────────── */
.jhs-wrap .jhs-gdpr-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: #f8fbfd;
    border: 1px solid #d1dbe8;
    border-radius: 6px;
    font-size: 16px !important;
    color: #555;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.5;
}
.jhs-wrap .jhs-gdpr-notice svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #035A83;
}
.jhs-wrap .jhs-gdpr-notice a {
    color: #035A83;
    text-decoration: underline;
}

/* ── Save project bar ──────────────────────────────── */
.jhs-wrap .jhs-project-save-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0 !important;
    margin-top: 1.5rem !important;
}
.jhs-wrap .jhs-btn-save-project {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    color: #035A83;
    border: 1.5px solid #035A83;
    border-radius: 6px;
    font-size: 16px !important;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.jhs-wrap .jhs-btn-save-project:hover {
    background: #035A83;
    color: #fff;
}
.jhs-wrap .jhs-project-saved-msg {
    font-size: 14px !important;
    font-weight: 600;
    transition: color 0.2s;
}

/* ── Close project area (in download panel) ────────── */
.jhs-wrap .jhs-project-close-area {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2ecf3;
    text-align: center;
}
.jhs-wrap .jhs-btn-close-project {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #b91c1c;
    border: 1.5px solid #b91c1c;
    border-radius: 6px;
    font-size: 14px !important;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.jhs-wrap .jhs-btn-close-project:hover {
    background: #b91c1c;
    color: #fff;
}
.jhs-wrap .jhs-project-close-note {
    margin: 0.5rem 0 0;
    font-size: 15px !important;
    color: #888;
}

/* ── Project closed confirmation ───────────────────── */
.jhs-wrap .jhs-project-closed {
    text-align: center;
    padding: 3rem 2rem;
}
.jhs-wrap .jhs-project-closed h3 {
    font-size: 20px !important;
    color: #035A83;
    margin: 1rem 0 0.5rem;
    font-weight: 700;
}
.jhs-wrap .jhs-project-closed p {
    color: #333;
    font-size: 16px !important;
    margin: 0.4rem 0;
}
.jhs-wrap .jhs-project-closed-sub {
    color: #666 !important;
    font-size: 16px !important;
    margin-top: 0.75rem !important;
}
.jhs-wrap .jhs-btn-new-project {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.6rem 1.4rem;
    background: #035A83;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px !important;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.jhs-wrap .jhs-btn-new-project:hover { background: #024a70; }

/* ══════════════════════════════════════════════════════
   HOW TO USE — INLINE ACCORDION
   ══════════════════════════════════════════════════════ */

.jhs-wrap .jhs-help-accordion {
    margin-bottom: 1.25rem;
    border: 1.5px solid #d1dbe8;
    border-radius: 8px;
    overflow: hidden;
}

.jhs-wrap .jhs-help-acc-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #035A83;
    color: #fff;
    border: none;
    font-size: 16px !important;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.jhs-wrap .jhs-help-acc-toggle:hover { background: #024a70; }

.jhs-wrap .jhs-help-acc-arrow {
    margin-left: auto;
    font-size: 12px !important;
    transition: transform 0.2s;
}
.jhs-wrap .jhs-help-acc-toggle[aria-expanded="true"] .jhs-help-acc-arrow {
    transform: rotate(180deg);
}

.jhs-wrap .jhs-help-acc-body {
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
    font-size: 16px !important;
    color: #333;
    line-height: 1.6;
}

.jhs-wrap .jhs-help-acc-notice {
    background: #fff8e1;
    border-left: 4px solid #f59e0b;
    padding: 0.6rem 0.85rem;
    border-radius: 0 4px 4px 0;
    margin-bottom: 1rem;
    color: #78350f;
    font-size: 16px !important;
}

.jhs-wrap .jhs-help-acc-h {
    font-size: 16px !important;
    font-weight: 700;
    color: #035A83;
    margin: 1rem 0 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid #e8f1f8;
}

.jhs-wrap .jhs-help-acc-steps,
.jhs-wrap .jhs-help-acc-list {
    margin: 0 0 0.5rem 0;
    padding-left: 1.4rem;
}
.jhs-wrap .jhs-help-acc-steps li,
.jhs-wrap .jhs-help-acc-list li {
    margin-bottom: 0.55rem;
    font-size: 16px !important;
}

/* ══════════════════════════════════════════════════════
   REVIEW & UPDATE
   ══════════════════════════════════════════════════════ */

/* Upload zones */
.jhs-wrap .jhs-review-upload-zone {
    position: relative !important;   /* contain the absolutely-positioned file input */
    overflow: hidden !important;     /* ensure the invisible input cannot bleed out */
    border: 2px dashed #a0b8cc !important;
    border-radius: 8px !important;
    padding: 1.25rem 1rem !important;
    text-align: center !important;
    cursor: pointer !important;
    background: #f8fbfd !important;
    margin-bottom: 0.75rem !important;
    transition: border-color 0.15s, background 0.15s !important;
}
.jhs-wrap .jhs-review-upload-zone:hover,
.jhs-wrap .jhs-review-upload-zone.drag-over {
    border-color: #035A83 !important;
    background: #e8f1f8 !important;
}
.jhs-wrap .jhs-review-sds-suggest {
    margin-top: 1rem !important;
    padding: 0.75rem 0.75rem 0 !important;
    background: #f0f7fc !important;
    border-radius: 6px !important;
    border: 1px solid #d1dbe8 !important;
}

/* Yes/No sub-question buttons */
.jhs-wrap .jhs-review-sub-question {
    margin: 1.25rem 0 0.75rem !important;
}
.jhs-wrap .jhs-review-btns {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}
.jhs-wrap .jhs-review-yn {
    padding: 0.4rem 1.2rem !important;
    border: 1.5px solid #a0b8cc !important;
    border-radius: 4px !important;
    background: #fff !important;
    font-size: 16px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    color: #333 !important;
    transition: border-color 0.15s, background 0.15s !important;
}
.jhs-wrap .jhs-review-yn--active,
.jhs-wrap .jhs-review-yn:hover {
    border-color: #035A83 !important;
    background: #035A83 !important;
    color: #fff !important;
}

/* Edit textarea */
.jhs-wrap .jhs-review-edit-textarea {
    font-family: monospace !important;
    font-size: 14px !important;
    min-height: 280px !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
}

/* Legislation update notice */
.jhs-wrap .jhs-review-leg-notice {
    background: #fff8e1 !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    font-size: 16px !important;
    color: #78350f !important;
}
.jhs-wrap .jhs-review-leg-notice ul {
    margin: 0.5rem 0 0.5rem 1.25rem !important;
    padding: 0 !important;
}
.jhs-wrap .jhs-review-leg-notice li {
    margin-bottom: 0.4rem !important;
}
.jhs-wrap .jhs-review-leg-note {
    font-size: 0.85rem !important;
    color: #92400e !important;
    margin: 0.5rem 0 0 !important;
    font-style: italic !important;
}

/* Confirm/copy button row */
.jhs-wrap .jhs-review-confirm {
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e2ecf3 !important;
}

/* Review edit intro and helper text */
.jhs-wrap .jhs-review-edit-intro {
    margin: 0 0 0.5rem !important;
    font-weight: 600 !important;
    color: #035A83 !important;
}
.jhs-wrap .jhs-review-edit-helper {
    margin: 0.4rem 0 0 !important;
    font-style: italic !important;
}
.jhs-wrap .jhs-review-confirm-intro {
    margin: 0 0 0.75rem !important;
    font-weight: 600 !important;
    color: #035A83 !important;
}

/* ── Review edit toolbar: undo / redo / save edit ───────────────── */
.jhs-wrap .jhs-edit-toolbar {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}
.jhs-wrap .jhs-edit-btn {
    padding: 6px 14px !important;
    border-radius: 4px !important;
    border: 1px solid #035A83 !important;
    background: #fff !important;
    color: #035A83 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: Arial, sans-serif !important;
}
.jhs-wrap .jhs-edit-btn:hover:not(:disabled) {
    background: #f0f7ff !important;
}
.jhs-wrap .jhs-edit-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}
.jhs-wrap .jhs-edit-btn-save {
    background: #035A83 !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.jhs-wrap .jhs-edit-btn-save:hover {
    background: #024a6e !important;
}
.jhs-wrap .jhs-edit-saved {
    color: #385623 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ── Download panel actions + Refresh / Back to home page button ─ */
.jhs-wrap .jhs-dl-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 14px !important;
}
.jhs-wrap .jhs-btn-home {
    padding: 10px 18px !important;
    border-radius: 4px !important;
    border: 2px solid #035A83 !important;
    background: #fff !important;
    color: #035A83 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: Arial, sans-serif !important;
}
.jhs-wrap .jhs-btn-home:hover {
    background: #035A83 !important;
    color: #fff !important;
}

/* ── Suggested-changes UI (approve / decline review flow) ──────── */
.jhs-wrap .jhs-review-changes-bulk {
    display: flex !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    flex-wrap: wrap !important;
}
.jhs-wrap #jhs-review-changes-list { margin-top: 8px !important; }
.jhs-wrap .jhs-change-card {
    border: 1px solid #cdd9e2 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
}
.jhs-wrap .jhs-change-card--approved {
    border-color: #385623 !important;
    background: #f3f9ec !important;
}
.jhs-wrap .jhs-change-head {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}
.jhs-wrap .jhs-change-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
.jhs-wrap .jhs-change-badge--type {
    background: #e2ecf3 !important;
    color: #035A83 !important;
}
.jhs-wrap .jhs-change-badge--pending {
    background: #fff3cd !important;
    color: #856404 !important;
}
.jhs-wrap .jhs-change-badge--approved {
    background: #385623 !important;
    color: #fff !important;
}
.jhs-wrap .jhs-change-row {
    margin: 4px 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
}
.jhs-wrap .jhs-change-row--old {
    color: #6e3a3a !important;
}
.jhs-wrap .jhs-change-row--new {
    color: #1f4d1f !important;
}
.jhs-wrap .jhs-change-label {
    display: inline-block !important;
    min-width: 80px !important;
    font-weight: 600 !important;
    color: #444 !important;
}
.jhs-wrap .jhs-change-reason {
    margin-top: 4px !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: #555 !important;
}
.jhs-wrap .jhs-change-actions {
    margin-top: 10px !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.jhs-wrap .jhs-change-btn {
    padding: 6px 14px !important;
    border-radius: 4px !important;
    border: 1px solid #035A83 !important;
    background: #fff !important;
    color: #035A83 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
}
.jhs-wrap .jhs-change-btn--approve {
    background: #385623 !important;
    color: #fff !important;
    border-color: #385623 !important;
}
.jhs-wrap .jhs-change-btn--approve:hover { background: #2c4419 !important; }
.jhs-wrap .jhs-change-btn--decline {
    background: #fff !important;
    color: #a13b3b !important;
    border-color: #a13b3b !important;
}
.jhs-wrap .jhs-change-btn--decline:hover {
    background: #fbecec !important;
}
.jhs-wrap .jhs-change-btn--undo {
    background: #fff !important;
    color: #555 !important;
    border-color: #999 !important;
}
.jhs-wrap .jhs-change-btn--undo:hover {
    background: #f0f0f0 !important;
}

/* Read-only document preview */
.jhs-wrap .jhs-review-doc-display {
    margin-top: 8px !important;
    padding: 14px 16px !important;
    background: #fafbfc !important;
    border: 1px solid #cdd9e2 !important;
    border-radius: 6px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #222 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}
.jhs-wrap .jhs-doc-applied {
    background: #f3f9ec !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    border: 1px solid #b9d49a !important;
}
.jhs-wrap .jhs-doc-applied del {
    color: #8b3a3a !important;
    text-decoration: line-through !important;
}
.jhs-wrap .jhs-doc-applied ins {
    color: #1f4d1f !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* ── Review-confirm: two-button row (Copy to form + Generate RAMS) ─── */
.jhs-wrap .jhs-review-confirm-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
}
.jhs-wrap .jhs-review-confirm-actions .jhs-btn-generate {
    margin: 0 !important;
}
/* "Copy to form" is a secondary action — render with an outline rather than
   a solid blue fill so "Generate RAMS" reads as the primary button. */
.jhs-wrap .jhs-btn-generate--secondary {
    background:   #ffffff !important;
    color:        #035A83 !important;
    border:       1.5px solid #035A83 !important;
}
.jhs-wrap .jhs-btn-generate--secondary:hover {
    background:   #e8f3f9 !important;
    color:        #035A83 !important;
}

/* ── Work-type cards: clearer selected state with visible tick ──────── */
/* Tick mark in the top-right of selected cards */
.jhs-wrap .jhs-card-lbl {
    position: relative !important;
    padding-right: 36px !important;  /* room for the tick */
}
.jhs-wrap .jhs-card-cb:checked + .jhs-card-lbl {
    background:   #d6eaf5 !important;
    border-color: #035A83 !important;
    box-shadow:   inset 0 0 0 1px #035A83 !important;
}
.jhs-wrap .jhs-card-cb:checked + .jhs-card-lbl::after {
    content: '\2713' !important;     /* ✓ */
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    background: #035A83 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: bold !important;
}
/* Make it obvious clicking again will deselect (clearer hover when selected) */
.jhs-wrap .jhs-card-cb:checked + .jhs-card-lbl:hover {
    background: #c6def0 !important;
}

/* ── Click to Start Review — solid blue (item 1) ─────────────────── */
.jhs-wrap #jhs-btn-review-analyse {
    background:   #035A83 !important;
    color:        #ffffff !important;
    border-color: #035A83 !important;
}
.jhs-wrap #jhs-btn-review-analyse:hover {
    background:   #024a6e !important;
    border-color: #024a6e !important;
}

/* ── Two-up row for RAMS number + title (item 4) ─────────────────── */
.jhs-wrap .jhs-review-twoup {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.jhs-wrap .jhs-review-twoup #jhs-review-rams-number {
    flex: 0 0 140px !important;
    min-width: 0 !important;
}
.jhs-wrap .jhs-review-twoup #jhs-review-rams-title {
    flex: 1 1 240px !important;
    min-width: 0 !important;
}

/* ── Edit suggestion button + inline edit area (item 2) ──────────── */
.jhs-wrap .jhs-change-btn--edit {
    background: #ffffff !important;
    color:      #035A83 !important;
    border-color: #035A83 !important;
}
.jhs-wrap .jhs-change-btn--edit:hover {
    background: #e8f3f9 !important;
}
.jhs-wrap .jhs-change-edit-area {
    margin-top: 10px !important;
    padding: 10px !important;
    background: #fafbfc !important;
    border: 1px dashed #035A83 !important;
    border-radius: 6px !important;
}
.jhs-wrap .jhs-change-edit-area label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin-bottom: 4px !important;
}
.jhs-wrap .jhs-change-edit-area textarea {
    width: 100% !important;
    min-height: 80px !important;
    padding: 8px !important;
    border: 1px solid #cdd9e2 !important;
    border-radius: 4px !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
}
.jhs-wrap .jhs-change-edit-actions {
    margin-top: 8px !important;
    display: flex !important;
    gap: 8px !important;
}

/* ── Generate buttons within the review-confirm-actions row no longer
       need the secondary variant since "Copy to form" is gone ──────── */

/* ── Utility: defeat the many display:<x> !important rules so JS can hide
    elements reliably. Apply this class via JS instead of relying on .hide(). */
.jhs-wrap .jhs-hidden,
.jhs-wrap .jhs-hidden.jhs-footer,
.jhs-wrap .jhs-hidden.jhs-body,
.jhs-wrap .jhs-hidden.jhs-header,
.jhs-wrap .jhs-hidden.jhs-analyse-bar {
    display: none !important;
}

/* ── AI instructions — visible in both Create flow (above analyse button)
   and Review flow (above "Click to Start review"). Subtle highlight so
   users notice it but it does not visually dominate the page. */
.jhs-wrap .jhs-ai-instructions {
    margin:        18px 0 22px 0 !important;
    padding:       14px 16px !important;
    background:    #f5f8fb !important;
    border:        1px solid #d1dbe8 !important;
    border-left:   4px solid #035A83 !important;
    border-radius: 6px !important;
}
.jhs-wrap .jhs-ai-instructions .jhs-label {
    margin:      0 0 4px 0 !important;
    font-weight: 600 !important;
}
.jhs-wrap .jhs-ai-instructions .jhs-hint {
    margin:    0 0 10px 0 !important;
    color:     #5a6470 !important;
    font-size: 13px !important;
}
.jhs-wrap .jhs-ai-instructions .jhs-textarea {
    min-height: 90px !important;
    width:      100% !important;
}

/* ══════════════════════════════════════════════════════════════════════
   OUTPUT SELECTOR — v136
   Sits between the intake form and the footer in ra_create / ra_only modes.
   ══════════════════════════════════════════════════════════════════════ */
.jhs-wrap .jhs-output-selector {
    display: none;
    background: #f5f7f9 !important;
    border: 0.5px solid #d4dde3 !important;
    border-left: 3px solid #035A83 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0 0 0 !important;
}
.jhs-wrap .jhs-output-selector .jhs-label {
    margin: 0 0 6px !important;
    color: #035A83 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.jhs-wrap .jhs-output-selector .jhs-hint {
    margin: 0 0 14px !important;
    color: #555 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.jhs-wrap .jhs-output-selector-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.jhs-wrap .jhs-btn-generate-secondary {
    background: #fff !important;
    color: #035A83 !important;
    border: 1.5px solid #035A83 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background 0.15s ease !important;
}
.jhs-wrap .jhs-btn-generate-secondary:hover {
    background: #f0f6fa !important;
}

/* ══════════════════════════════════════════════════════════════════════
   POST-GENERATION ACTIONS — v136
   Edit Documents + Clear Stored Data buttons after downloads
   ══════════════════════════════════════════════════════════════════════ */
.jhs-wrap .jhs-dl-post-intro {
    margin: 1.25rem 0 0.75rem !important;
    color: #555 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}
.jhs-wrap .jhs-dl-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 0 0 0.5rem !important;
}
.jhs-wrap .jhs-btn-edit-docs,
.jhs-wrap .jhs-btn-clear-data {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    background: #fff !important;
    font-family: inherit !important;
    transition: background 0.15s ease !important;
}
.jhs-wrap .jhs-btn-edit-docs {
    color: #035A83 !important;
    border: 1.5px solid #035A83 !important;
}
.jhs-wrap .jhs-btn-edit-docs:hover {
    background: #f0f6fa !important;
}
.jhs-wrap .jhs-btn-clear-data {
    color: #a02c2c !important;
    border: 1.5px solid #a02c2c !important;
}
.jhs-wrap .jhs-btn-clear-data:hover {
    background: #fbeeee !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CONFIRMATION MODAL — v136 (v138 fix)
   Modal is hidden BY DEFAULT via `display: none !important`. The
   `.jhs-modal-open` class switches display to flex. Never rely on the
   inline `style="display:none"` alone — a CSS `display: flex !important`
   rule overrides it and forces the modal open on every page load.
   ══════════════════════════════════════════════════════════════════════ */
.jhs-wrap .jhs-modal-overlay,
body .jhs-modal-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 100000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.jhs-wrap .jhs-modal-overlay.jhs-modal-open,
body .jhs-modal-overlay.jhs-modal-open {
    display: flex !important;
}
.jhs-wrap .jhs-modal,
body .jhs-modal {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    max-width: 440px !important;
    width: 100% !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    font-family: inherit !important;
}
.jhs-wrap .jhs-modal-header,
body .jhs-modal-header {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin: 0 0 18px !important;
}
.jhs-wrap .jhs-modal-icon,
body .jhs-modal-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fbeeee !important;
    color: #a02c2c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.jhs-wrap .jhs-modal-title,
body .jhs-modal-title {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #222 !important;
}
.jhs-wrap .jhs-modal-body,
body .jhs-modal-body {
    margin: 0 !important;
    font-size: 13px !important;
    color: #555 !important;
    line-height: 1.5 !important;
}
.jhs-wrap .jhs-modal-actions,
body .jhs-modal-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}
.jhs-wrap .jhs-modal-btn,
body .jhs-modal-btn {
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.15s ease !important;
}
.jhs-wrap .jhs-modal-btn-cancel,
body .jhs-modal-btn-cancel {
    background: #fff !important;
    color: #222 !important;
    border: 1px solid #d0d0d0 !important;
}
.jhs-wrap .jhs-modal-btn-cancel:hover,
body .jhs-modal-btn-cancel:hover {
    background: #f5f5f5 !important;
}
.jhs-wrap .jhs-modal-btn-delete,
body .jhs-modal-btn-delete {
    background: #a02c2c !important;
    color: #fff !important;
    border: 1px solid #a02c2c !important;
}
.jhs-wrap .jhs-modal-btn-delete:hover,
body .jhs-modal-btn-delete:hover {
    background: #8a2424 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   START AGAIN BUTTON — v140
   Grey-outlined, refresh-icon; sits alongside primary/secondary generates.
   ══════════════════════════════════════════════════════════════════════ */
.jhs-wrap .jhs-btn-start-again {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    background: #fff !important;
    color: #666 !important;
    border: 1.5px solid #999 !important;
    font-family: inherit !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.jhs-wrap .jhs-btn-start-again:hover {
    background: #f5f5f5 !important;
    border-color: #666 !important;
    color: #333 !important;
}

/* Amber warning modal variant — Start Again is warning, not destructive. */
.jhs-wrap .jhs-modal-icon-warning,
body .jhs-modal-icon-warning {
    background: #fdf3d8 !important;
    color: #a26f00 !important;
}
.jhs-wrap .jhs-modal-btn-warning,
body .jhs-modal-btn-warning {
    background: #d4930a !important;
    color: #fff !important;
    border: 1px solid #d4930a !important;
}
.jhs-wrap .jhs-modal-btn-warning:hover,
body .jhs-modal-btn-warning:hover {
    background: #b57e08 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CREATE-MS EMERGENCY QUESTION GROUPS — v140
   Show under the review confirm fields when mode = ms_create.
   Blue left-border card matching the output-selector treatment.
   ══════════════════════════════════════════════════════════════════════ */
.jhs-wrap #jhs-ms-create-emergency-fields {
    margin: 20px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.jhs-wrap .jhs-emergency-group {
    background: #f5f7f9 !important;
    border: 0.5px solid #d4dde3 !important;
    border-left: 3px solid #035A83 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 14px 16px !important;
}
.jhs-wrap .jhs-emergency-group .jhs-emergency-group-title {
    margin: 0 0 4px !important;
    color: #035A83 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.jhs-wrap .jhs-emergency-group .jhs-emergency-group-hint {
    margin: 0 0 10px !important;
    color: #555 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}
.jhs-wrap .jhs-emergency-group .jhs-group {
    margin: 0 0 10px !important;
}
.jhs-wrap .jhs-emergency-group .jhs-group:last-child {
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TRANSLATE SUBMIT GROUP — v140
   Flex layout so Start Again sits alongside Translate.
   ══════════════════════════════════════════════════════════════════════ */
.jhs-wrap .jhs-tl-submit-group-wrap {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}