/* Maverick – Tone Analysis "Finding details" drawer (v1). All selectors are namespaced .mvtd-* and only exist when
   /ui-override/tone-drawer.js injects them on the Tone Analysis results table / drawer. Safe to remove (see TONE-DRAWER.md). */

/* ---- row arrow button ---- */
.mvtd-vcell { white-space: nowrap; }
.mvtd-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 8px; padding: 0;
  vertical-align: middle; cursor: pointer; border: 1px solid hsl(214 24% 80%); background: #fff; color: hsl(224 72% 13%);
  border-radius: 3px; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.mvtd-btn:hover { background: hsl(224 72% 13%); border-color: hsl(224 72% 13%); color: #fff; transform: translateX(1px); }
.mvtd-btn:focus-visible { outline: 2px solid hsl(224 80% 45%); outline-offset: 2px; }
html.dark .mvtd-btn { background: transparent; border-color: #475569; color: #cbd5e1; }
html.dark .mvtd-btn:hover { background: #e2e8f0; color: #0f172a; border-color: #e2e8f0; }

/* when the results table scrolls horizontally (narrow widths) keep the Verdict + arrow column pinned to the right edge */
.mvtd-sticky .mvtd-vcell { position: sticky; right: 0; z-index: 2; background: hsl(var(--card, 0 0% 100%)); box-shadow: -8px 0 8px -8px rgba(15,23,42,.35); }
.mvtd-sticky tbody tr:hover > .mvtd-vcell { background: #f6f8fb; }
html.dark .mvtd-sticky tbody tr:hover > .mvtd-vcell { background: #1a2640; }

/* ---- drawer shell ---- */
.mvtd-root, .mvtd-root * { box-sizing: border-box; }
.mvtd-root {
  position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; transition: visibility 0s linear .26s;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #0f172a;
}
.mvtd-root[data-open] { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mvtd-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); opacity: 0; transition: opacity .22s ease; }
.mvtd-root[data-open] .mvtd-backdrop { opacity: 1; }
.mvtd-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); display: flex; flex-direction: column;
  background: #f1f5f9; box-shadow: -16px 0 40px rgba(15, 23, 42, .22); transform: translateX(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); outline: none;
}
.mvtd-root[data-open] .mvtd-panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .mvtd-panel, .mvtd-backdrop, .mvtd-root, .mvtd-btn { transition: none !important; } }

/* header (dark navy, same family as the suite sidebar) */
.mvtd-head { flex: none; padding: 14px 20px 16px; background: hsl(224 72% 13%); color: #fff; border-bottom: 3px solid hsl(217 91% 60%); }
.mvtd-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mvtd-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #93a4c8; font-weight: 600; }
.mvtd-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; border-radius: 3px; cursor: pointer; }
.mvtd-close:hover { background: rgba(255,255,255,.14); }
.mvtd-close:focus-visible, .mvtd-navbtn:focus-visible, .mvtd-copy:focus-visible, .mvtd-link:focus-visible { outline: 2px solid hsl(217 91% 60%); outline-offset: 2px; }
.mvtd-title { margin: 8px 0 10px; font-size: 18px; line-height: 1.3; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.mvtd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mvtd-chip { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,.28); border-radius: 2px; color: #e2e8f0; background: rgba(255,255,255,.08); }
.mvtd-chip-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mvtd-sev.s-crit { background: #7f1d1d; border-color: #fca5a5; color: #fee2e2; }
.mvtd-sev.s-high { background: #9a3412; border-color: #fdba74; color: #ffedd5; }
.mvtd-sev.s-med  { background: #854d0e; border-color: #fde047; color: #fef9c3; }
.mvtd-sev.s-low  { background: #14532d; border-color: #86efac; color: #dcfce7; }

/* jump tabs */
.mvtd-jump { position: sticky; top: 0; z-index: 3; margin: -16px -20px 0; padding: 8px 20px; display: flex; gap: 6px; background: #f1f5f9; border-bottom: 1px solid hsl(214 24% 86%); }
.mvtd-jumpbtn { padding: 3px 12px; font: inherit; font-size: 12px; font-weight: 600; color: hsl(224 72% 13%); background: #fff; border: 1px solid hsl(214 24% 78%); border-radius: 999px; cursor: pointer; }
.mvtd-jumpbtn:hover { background: hsl(224 72% 13%); color: #fff; } .mvtd-jumpbtn:focus-visible { outline: 2px solid hsl(217 91% 60%); outline-offset: 2px; }
html.dark .mvtd-jump { background: #0b1220; border-color: #26324d; } html.dark .mvtd-jumpbtn { background: #111a2e; color: #e2e8f0; border-color: #334155; }
@media (max-width: 640px) { .mvtd-jump { margin: -12px -12px 0; padding: 8px 12px; } }

/* body */
.mvtd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.mvtd-card { background: #fff; border: 1px solid hsl(214 24% 86%); border-radius: 4px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.mvtd-h { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #475569; }
.mvtd-tone { border-left: 3px solid hsl(224 72% 13%); }
.mvtd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.mvtd-grid-sub { margin-top: 12px; padding-top: 12px; border-top: 1px dashed hsl(214 24% 86%); }
.mvtd-kv { min-width: 0; } .mvtd-kv.mvtd-wide { grid-column: 1 / -1; }
.mvtd-kv dt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.mvtd-kv dd { margin: 2px 0 0; color: #0f172a; overflow-wrap: anywhere; }
.mvtd-muted { color: #64748b; margin: 0; } .mvtd-small { font-size: 12px; }
.mvtd-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border: 2px solid #cbd5e1; border-top-color: hsl(224 72% 13%); border-radius: 50%; animation: mvtd-spin .8s linear infinite; }
@keyframes mvtd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mvtd-loading::before { animation: none; } }

.mvtd-badge { display: inline-flex; align-items: center; padding: 1px 8px; font-size: 12px; font-weight: 600; border: 1px solid; border-radius: 2px; }
.mvtd-badge.status { background: #e0e7ff; border-color: #a5b4fc; color: #312e81; }
.mvtd-badge.sev.s-crit { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.mvtd-badge.sev.s-high { background: #ffedd5; border-color: #fdba74; color: #9a3412; }
.mvtd-badge.sev.s-med  { background: #fef9c3; border-color: #fde047; color: #854d0e; }
.mvtd-badge.sev.s-low  { background: #dcfce7; border-color: #86efac; color: #166534; }
.mvtd-badge.sev.s-na { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }

/* rich text */
.mvtd-rich p, .mvtd-para { margin: 0 0 8px; } .mvtd-rich p:last-child { margin-bottom: 0; }
.mvtd-rich ul, .mvtd-rich ol, .mvtd-text ul { margin: 4px 0 8px; padding-left: 20px; } .mvtd-rich ul, .mvtd-text ul { list-style: disc; } .mvtd-rich ol { list-style: decimal; }
.mvtd-rich table { border-collapse: collapse; width: 100%; font-size: 13px; } .mvtd-rich td, .mvtd-rich th { border: 1px solid #e2e8f0; padding: 3px 6px; }
.mvtd-rich { overflow-wrap: anywhere; }
.mvtd-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: #334155; } .mvtd-sub:first-of-type { margin-top: 0; }

/* tone */
.mvtd-tone-top { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.mvtd-score { flex: none; width: 96px; padding: 10px 6px; text-align: center; border: 2px solid; border-radius: 4px; background: #fff; }
.mvtd-score b { display: block; font-size: 34px; line-height: 1.05; font-weight: 700; } .mvtd-score small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin-top: 2px; }
.mvtd-tone-verdict { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.mvtd-verdict { display: inline-flex; padding: 2px 10px; font-weight: 600; border: 1px solid; border-radius: 2px; font-size: 13px; }
.t-good { color: #166534; } .t-ok { color: #92400e; } .t-warn { color: #c2410c; } .t-bad { color: #b91c1c; } .t-na { color: #64748b; }
.mvtd-score.t-good { border-color: #86efac; background: #f0fdf4; } .mvtd-score.t-ok { border-color: #fcd34d; background: #fffbeb; }
.mvtd-score.t-warn { border-color: #fdba74; background: #fff7ed; } .mvtd-score.t-bad { border-color: #fca5a5; background: #fef2f2; } .mvtd-score.t-na { border-color: #cbd5e1; }
.mvtd-verdict.t-good { background: #dcfce7; border-color: #86efac; } .mvtd-verdict.t-ok { background: #fef3c7; border-color: #fcd34d; }
.mvtd-verdict.t-warn { background: #ffedd5; border-color: #fdba74; } .mvtd-verdict.t-bad { background: #fee2e2; border-color: #fca5a5; } .mvtd-verdict.t-na { background: #f1f5f9; border-color: #cbd5e1; }
.mvtd-metrics { display: flex; flex-direction: column; gap: 7px; }
.mvtd-metric { display: grid; grid-template-columns: 128px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.mvtd-metric-l { color: #334155; } .mvtd-metric-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mvtd-bar { height: 8px; background: #e2e8f0; border-radius: 1px; overflow: hidden; } .mvtd-bar i { display: block; height: 100%; background: currentColor; }
.mvtd-bar.t-good { color: #16a34a; } .mvtd-bar.t-ok { color: #d97706; } .mvtd-bar.t-warn { color: #ea580c; } .mvtd-bar.t-bad { color: #dc2626; } .mvtd-bar.t-na { color: #94a3b8; }
.mvtd-kws { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mvtd-kws li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 10px; border: 1px solid; border-left-width: 3px; border-radius: 2px; background: #fff; }
.mvtd-kws li.s-high { border-color: #fecaca; border-left-color: #dc2626; background: #fef2f2; } .mvtd-kws li.s-med, .mvtd-kws li.s-crit { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; }
.mvtd-kws li.s-crit { border-left-color: #991b1b; } .mvtd-kws li.s-low, .mvtd-kws li.s-na { border-color: #e2e8f0; border-left-color: #64748b; background: #f8fafc; }
.mvtd-kw { font-weight: 700; } .mvtd-kw-meta { font-size: 12px; color: #64748b; } .mvtd-kw-rep { font-size: 12px; color: #334155; flex-basis: 100%; } .mvtd-kw-rep em { font-style: normal; font-weight: 600; }
.mvtd-rewrite { padding: 10px 12px; border: 1px solid #86efac; border-left-width: 3px; background: #f0fdf4; border-radius: 2px; color: #14532d; }
.mvtd-rewrite p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; } .mvtd-rewrite p:last-child { margin: 0; }
.mvtd-copy { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; color: hsl(224 72% 13%); background: #fff; border: 1px solid hsl(214 24% 78%); border-radius: 3px; cursor: pointer; }
.mvtd-copy:hover { background: #f1f5f9; }

/* footer */
.mvtd-foot { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 20px; background: #fff; border-top: 1px solid hsl(214 24% 84%); }
.mvtd-nav { display: inline-flex; align-items: center; gap: 8px; }
.mvtd-navbtn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font: inherit; font-size: 13px; font-weight: 600; color: hsl(224 72% 13%); background: #fff; border: 1px solid hsl(214 24% 78%); border-radius: 3px; cursor: pointer; }
.mvtd-navbtn:hover:not(:disabled) { background: #f1f5f9; } .mvtd-navbtn:disabled { opacity: .4; cursor: default; }
.mvtd-pos { font-size: 12px; color: #64748b; min-width: 48px; text-align: center; }
.mvtd-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; text-decoration: none; color: #fff; background: hsl(224 72% 13%); border: 1px solid hsl(224 72% 13%); border-radius: 3px; }
.mvtd-link[hidden] { display: none; } .mvtd-link:hover { background: hsl(224 72% 22%); color: #fff; }

/* narrow screens */
@media (max-width: 640px) {
  .mvtd-panel { width: 100vw; }
  .mvtd-head { padding: 12px 14px 14px; } .mvtd-body { padding: 12px 12px 24px; } .mvtd-foot { padding: 8px 12px; }
  .mvtd-grid { grid-template-columns: minmax(0, 1fr); }
  .mvtd-metric { grid-template-columns: 104px 1fr 30px; gap: 8px; }
  .mvtd-score { width: 82px; } .mvtd-score b { font-size: 28px; }
  .mvtd-link { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 380px) { .mvtd-navbtn span { display: none; } .mvtd-title { font-size: 16px; } }

/* dark theme */
html.dark .mvtd-panel { background: #0b1220; color: #e2e8f0; } html.dark .mvtd-root { color: #e2e8f0; }
html.dark .mvtd-card, html.dark .mvtd-foot { background: #111a2e; border-color: #26324d; } html.dark .mvtd-h, html.dark .mvtd-kv dt, html.dark .mvtd-muted, html.dark .mvtd-pos { color: #94a3b8; }
html.dark .mvtd-kv dd, html.dark .mvtd-metric-l, html.dark .mvtd-sub { color: #e2e8f0; } html.dark .mvtd-bar { background: #26324d; }
html.dark .mvtd-navbtn, html.dark .mvtd-copy { background: #111a2e; color: #e2e8f0; border-color: #334155; }
html.dark .mvtd-kws li { background: #111a2e; border-color: #26324d; color: #e2e8f0; } html.dark .mvtd-kw-rep { color: #cbd5e1; }
html.dark .mvtd-rewrite { background: #052e16; border-color: #166534; color: #bbf7d0; }
html.dark .mvtd-score { background: #111a2e; } html.dark .mvtd-score small { color: #94a3b8; }
html.dark .mvtd-link { background: #e2e8f0; color: #0f172a; border-color: #e2e8f0; }