/* ==========================================================================
   ARKENSTONE REGISTRY — EXTENDED FEATURES
   Risk Radar, Project Templates, Stage Sign-off, Change History, Scope Doc
   ========================================================================== */

/* ── RISK RADAR WIDGET (Dashboard) ─────────────────────────────────────── */
.risk-radar-widget {
    margin-top: 24px;
}
.risk-radar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.risk-radar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-ink-primary);
}
.risk-radar-title i { font-size: 18px; color: #e67e22; }

.risk-list { display: flex; flex-direction: column; gap: 8px; }

.risk-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border-rule);
    background: var(--color-surface-card);
    cursor: pointer;
    transition: box-shadow 0.12s;
}
.risk-item:hover { box-shadow: var(--shadow-hover); }
.risk-item.risk-high   { border-left: 4px solid #c0392b; }
.risk-item.risk-medium { border-left: 4px solid #e67e22; }
.risk-item.risk-low    { border-left: 4px solid #f1c40f; }

.risk-level-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.risk-high   .risk-level-dot { background: #c0392b; }
.risk-medium .risk-level-dot { background: #e67e22; }
.risk-low    .risk-level-dot { background: #f1c40f; }

.risk-item-body { flex: 1; min-width: 0; }
.risk-project-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-ink-primary);
    margin-bottom: 3px;
}
.risk-reasons {
    font-size: 11.5px;
    color: var(--color-ink-muted);
    line-height: 1.5;
}
/* Prioritized-triage rank chip + recommended action */
.risk-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--gold);
    color: #1a0f00;
    font-size: 9.5px;
    font-weight: 700;
    vertical-align: middle;
}
.risk-action {
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-ink-primary);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.risk-action i { color: var(--gold); margin-top: 1px; flex-shrink: 0; }
.risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.risk-badge.high   { background: #fdecea; color: #c0392b; }
.risk-badge.medium { background: #fef4e8; color: #e67e22; }
.risk-badge.low    { background: #fefde8; color: #b8860b; }

.risk-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-ink-muted);
}
.risk-empty i { display: block; font-size: 28px; opacity: 0.25; margin-bottom: 8px; }

/* ── STAGE SIGN-OFF ─────────────────────────────────────────────────────── */
.stage-signoff {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.signoff-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.signoff-badge.none       { background: var(--color-canvas-secondary); color: var(--color-ink-muted); }
.signoff-badge.requested  { background: #fff8e1; color: #e67e22; border: 1px solid #fde68a; }
.signoff-badge.approved   { background: #e8f5ef; color: #1D5C38; border: 1px solid #c5e8d4; }
.signoff-badge.rejected   { background: #fdecea; color: #c0392b; border: 1px solid #fca5a5; }

.btn-signoff {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    border: 1px solid var(--color-border-rule);
    background: none;
    color: var(--color-ink-muted);
}
.btn-signoff:hover  { background: var(--gold-faint); border-color: var(--gold-pale); color: var(--gold); }
.btn-signoff.approve { border-color: #c5e8d4; color: #1D5C38; }
.btn-signoff.approve:hover { background: #e8f5ef; }
.btn-signoff.reject  { border-color: #fca5a5; color: #c0392b; }
.btn-signoff.reject:hover  { background: #fdecea; }

/* AI readiness inline result */
.stage-readiness-result {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-pale);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-ink-primary);
    white-space: pre-wrap;
}
/* Structured handoff-checklist variant (overrides prose whitespace) */
.stage-readiness-result.is-structured { white-space: normal; }
.readiness-verdict {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 6px;
}
.readiness-verdict i { font-size: 15px; }
.readiness-verdict.ready     { color: #1D5C38; }
.readiness-verdict.not-ready { color: #c0392b; }
.readiness-summary {
    font-size: 11.5px;
    color: var(--color-ink-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}
.readiness-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.readiness-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.45;
}
.readiness-checklist li i { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.readiness-checklist li.rc-done    { color: var(--color-ink-primary); }
.readiness-checklist li.rc-done i  { color: #1D5C38; }
.readiness-checklist li.rc-pending { color: var(--color-ink-muted); }
.readiness-checklist li.rc-pending i { color: var(--color-ink-muted); }
.readiness-checklist li.rc-blocked { color: #c0392b; }
.readiness-checklist li.rc-blocked i { color: #c0392b; }

/* ── PROJECT TEMPLATES ──────────────────────────────────────────────────── */
.template-selector-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--color-canvas-secondary);
    border: 1px solid var(--color-border-rule);
    border-radius: 8px;
}
.template-selector-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.template-selector-row select { flex: 1; font-size: 12px; }

.template-list { display: flex; flex-direction: column; gap: 8px; }
.template-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border-rule);
    background: var(--color-surface-card);
    transition: box-shadow 0.1s;
}
.template-item:hover { box-shadow: var(--shadow-hover); }
.template-item-info { flex: 1; min-width: 0; }
.template-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink-primary);
}
.template-item-meta {
    font-size: 11px;
    color: var(--color-ink-muted);
    margin-top: 2px;
}
.btn-template-delete {
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 14px;
    transition: color 0.1s;
}
.btn-template-delete:hover { color: #c0392b; }

.template-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-ink-muted);
}

/* ── CHANGE HISTORY DRAWER SECTION ─────────────────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: 0; }
.history-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--color-border-rule);
}
.history-item:last-child { border-bottom: none; }

.history-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    margin-top: 5px;
}
.history-body { flex: 1; min-width: 0; }
.history-action {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink-primary);
    line-height: 1.4;
}
.history-meta {
    font-size: 10.5px;
    color: var(--color-ink-muted);
    margin-top: 1px;
}
.history-detail {
    font-size: 11px;
    color: var(--color-ink-muted);
    margin-top: 2px;
    font-style: italic;
}
.history-empty {
    padding: 16px 0;
    font-size: 12px;
    color: var(--color-ink-muted);
    text-align: center;
}

/* ── SCOPE DOCUMENT OUTPUT ──────────────────────────────────────────────── */
.scope-doc-panel {
    margin-top: 12px;
}
.scope-doc-panel .ai-response-body {
    max-height: 480px;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
}
/* Rendered (formatted) scope document — overrides the raw pre-wrap streaming view */
.scope-rendered { white-space: normal; }
.scope-rendered .chat-mdh {
    font-weight: 700;
    color: var(--color-ink-primary);
    margin: 16px 0 6px;
    letter-spacing: 0.01em;
    line-height: 1.35;
}
.scope-rendered .chat-mdh:first-child { margin-top: 0; }
.scope-rendered h2.chat-mdh { font-size: 15px; border-bottom: 1px solid var(--gold-pale); padding-bottom: 4px; }
.scope-rendered h3.chat-mdh { font-size: 13.5px; }
.scope-rendered h4.chat-mdh { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.scope-rendered .chat-p { margin: 0 0 10px; }
.scope-rendered .chat-ul, .scope-rendered .chat-ol { margin: 0 0 10px; padding-left: 20px; }
.scope-rendered .chat-ul li, .scope-rendered .chat-ol li { margin-bottom: 3px; }
.scope-rendered .chat-hr { border: none; border-top: 1px solid var(--color-border-rule); margin: 14px 0; }
.scope-rendered strong { font-weight: 700; color: var(--color-ink-primary); }

/* ── SETTINGS: TEMPLATE MANAGER ─────────────────────────────────────────── */
#settingsTemplateBlock { margin-top: 24px; }
.settings-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
    margin-bottom: 10px;
}