MediaWiki:Gadget-DiagnosticTree.css: Difference between revisions

From Painwiki
Jump to navigation Jump to search
Yatreyu (talk | contribs)
Bureaucrats, Interface administrators, Administrators
232 edits
Created page with "→* * DiagnosticTree.css * Copy to: MediaWiki:Gadget-DiagnosticTree.css: →── Shell & layout ─────────────────────────────────────────────────────────: .dt-shell { font-family: 'Georgia', serif; max-width: 680px; margin: 1.5em auto; color: #1a1a2e; } .dt-header { display: flex; align-items: center; justify-content: space-between; margin-..."
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/**
/**
  * DiagnosticTree.css
  * DiagnosticTree.css — v6
  * Copy to: MediaWiki:Gadget-DiagnosticTree.css
  * Copy entire contents to: MediaWiki:Gadget-DiagnosticTree.css
*
* Also add this to MediaWiki:Common.css to load the fonts:
*  @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
  */
  */


/* ── Shell & layout ───────────────────────────────────────────────────────── */
.dt-shell {
.dt-shell {
font-family: 'Georgia', serif;
  --emergency: #b91c1c; --emergency-bg: #fef2f2; --emergency-border: #fca5a5;
max-width: 680px;
  --urgent: #b45309; --urgent-bg: #fffbeb; --urgent-border: #fcd34d;
margin: 1.5em auto;
  --cleared: #15803d; --cleared-bg: #f0fdf4; --cleared-border: #86efac;
color: #1a1a2e;
  --ink: #1c1917; --ink-soft: #57534e; --ink-faint: #a8a29e;
}
  --paper: #fafaf9; --paper-2: #f5f5f4; --rule: #e7e5e4;
 
  --blue: #1d4ed8; --green: #15803d; --teal: #0f766e; --purple: #6d28d9;
.dt-header {
  --slate: #334155; --slate-bg: #f8fafc; --slate-border: #cbd5e1;
display: flex;
  --rare-color: #7c3aed; --rare-bg: #f5f3ff;
align-items: center;
  --uncommon-color: #0369a1; --uncommon-bg: #f0f9ff;
justify-content: space-between;
  --atypical-color: #0f766e; --atypical-bg: #f0fdfa;
margin-bottom: 0.6em;
  --algo-header: #0c4a6e; --algo-header-border: #7dd3fc;
}
  --nerve-header: #4c1d95; --nerve-header-border: #c4b5fd;


.dt-region {
  max-width: 780px; margin: 1.5em auto;
font-size: 0.78em;
  display: flex; flex-direction: column; gap: 1rem;
font-weight: 700;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
letter-spacing: 0.12em;
  color: var(--ink);
text-transform: uppercase;
color: #555;
}
}


.dt-controls {
/* ── Key toggle ── */
display: flex;
.dt-key-toggle { display: flex; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--rule); background: var(--paper-2); }
gap: 0.4em;
.dt-key-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.65rem 1rem; font-family: 'DM Mono','Courier New',monospace;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border: none; background: transparent; color: var(--ink-faint); transition: all 0.2s ease;
}
}
.dt-key-tab + .dt-key-tab { border-left: 1.5px solid var(--rule); }
.dt-key-tab:hover:not(.active):not(.coming-soon) { background: #fff; color: var(--ink-soft); }
.dt-key-tab.active.pain-key  { background: var(--algo-header);  color: #fff; }
.dt-key-tab.active.nerve-key { background: var(--nerve-header); color: #fff; }
.dt-key-tab.coming-soon { cursor: default; opacity: 0.55; }
.dt-key-tab .tab-icon { font-size: 0.9rem; }
.dt-key-tab .tab-soon { font-size: 0.55rem; font-weight: 500; background: rgba(0,0,0,0.12); padding: 0.1em 0.4em; border-radius: 3px; margin-left: 0.3rem; }


/* ── Progress bar ─────────────────────────────────────────────────────────── */
/* ── Red flag panel ── */
.dt-progress-wrap {
.dt-redflag-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
height: 5px;
.dt-flag-column { border-radius: 10px; overflow: hidden; border: 1.5px solid var(--emergency-border); background: var(--emergency-bg); transition: border-color 0.3s, background 0.3s; }
background: #e8e8e8;
.dt-flag-column.urgent      { border-color: var(--urgent-border);  background: var(--urgent-bg);  }
border-radius: 3px;
.dt-flag-column.all-cleared { border-color: var(--cleared-border); background: var(--cleared-bg); }
overflow: hidden;
.dt-flag-col-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'DM Mono',monospace; background: var(--emergency); color: #fff; }
margin-bottom: 0.3em;
.dt-flag-column.urgent      .dt-flag-col-header { background: var(--urgent);  }
}
.dt-flag-column.all-cleared .dt-flag-col-header { background: var(--cleared); }
.dt-flag-col-header .header-icon { font-size: 0.9rem; }
.dt-flag-items { padding: 0.5rem 0; }
.dt-flag-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.85rem; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid rgba(0,0,0,0.05); }
.dt-flag-item:last-child { border-bottom: none; }
.dt-flag-item:hover    { background: rgba(0,0,0,0.04); }
.dt-flag-item.expanded { background: rgba(0,0,0,0.03); }
.dt-flag-checkbox { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--emergency); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: #fff; }
.dt-flag-column.urgent .dt-flag-checkbox { border-color: var(--urgent); }
.dt-flag-item.cleared .dt-flag-checkbox { background: var(--cleared); border-color: var(--cleared); }
.dt-flag-item.cleared .dt-flag-checkbox::after { content: '✓'; color: #fff; font-size: 0.65rem; font-weight: 700; }
.dt-flag-item-body { flex: 1; min-width: 0; }
.dt-flag-label { font-size: 0.8rem; font-weight: 600; color: var(--ink); line-height: 1.35; transition: color 0.2s; }
.dt-flag-item.cleared .dt-flag-label { color: var(--ink-faint); text-decoration: line-through; }
.dt-flag-question { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.35rem; padding: 0.4rem 0.55rem; background: rgba(0,0,0,0.04); border-radius: 5px; border-left: 2px solid var(--emergency); display: none; }
.dt-flag-column.urgent .dt-flag-question { border-left-color: var(--urgent); }
.dt-flag-item.expanded .dt-flag-question { display: block; }
.dt-flag-rationale { font-size: 0.7rem; color: var(--ink-soft); font-style: italic; margin-top: 0.3rem; line-height: 1.4; display: none; }
.dt-flag-item.expanded .dt-flag-rationale { display: block; }
.dt-flag-actions { display: none; gap: 0.4rem; margin-top: 0.45rem; }
.dt-flag-item.expanded .dt-flag-actions { display: flex; }
.dt-flag-btn { font-size: 0.7rem; font-weight: 700; padding: 0.25em 0.65em; border-radius: 4px; border: 1.5px solid transparent; cursor: pointer; font-family: 'DM Sans',sans-serif; transition: all 0.15s; }
.dt-flag-btn.present { background: var(--emergency); color: #fff; border-color: var(--emergency); }
.dt-flag-btn.present:hover { filter: brightness(0.9); }
.dt-flag-btn.absent  { background: #fff; color: var(--ink-soft); border-color: var(--rule); }
.dt-flag-btn.absent:hover { background: var(--paper-2); }
.dt-flag-column.urgent .dt-flag-btn.present { background: var(--urgent); border-color: var(--urgent); }
.dt-flag-referral { margin: 0 0.85rem 0.6rem; padding: 0.6rem 0.75rem; border-radius: 6px; background: var(--emergency); color: #fff; font-size: 0.75rem; line-height: 1.5; display: none; }
.dt-flag-referral.urgent-ref { background: var(--urgent); }
.dt-flag-referral.visible    { display: block; }
.dt-flag-referral strong { display: block; font-size: 0.78rem; margin-bottom: 0.25rem; font-family: 'DM Mono',monospace; letter-spacing: 0.05em; }
.dt-panel-cleared-msg { display: none; text-align: center; padding: 0.5rem; font-size: 0.75rem; color: var(--cleared); font-weight: 600; }
.dt-flag-column.all-cleared .dt-panel-cleared-msg { display: block; }


.dt-progress-bar {
/* ── Divider ── */
height: 100%;
.dt-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-faint); font-size: 0.7rem; font-family: 'DM Mono',monospace; letter-spacing: 0.1em; text-transform: uppercase; }
background: linear-gradient( 90deg, #2980b9, #27ae60 );
.dt-divider::before, .dt-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
border-radius: 3px;
transition: width 0.4s ease;
}


.dt-step-label {
/* ── Algorithm section ── */
font-size: 0.72em;
.dt-algo-section { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--algo-header-border); transition: border-color 0.3s; }
color: #888;
.dt-algo-section.locked { border-color: var(--rule); }
text-align: right;
.dt-algo-header { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem; background: var(--algo-header); color: #fff; transition: background 0.3s; }
margin-bottom: 1em;
.dt-algo-section.locked .dt-algo-header { background: #78716c; }
font-family: 'Courier New', monospace;
.dt-algo-header-left { display: flex; align-items: center; gap: 0.5rem; font-family: 'DM Mono',monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
}
.dt-algo-header-right { font-family: 'DM Mono',monospace; font-size: 0.62rem; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; }
.dt-algo-section.unlocked .dt-algo-header-right { display: none; }
.dt-algo-body { padding: 1rem; background: #fff; }
.dt-algo-section.locked .dt-algo-body { background: var(--paper-2); }
.dt-tree-locked-msg { text-align: center; padding: 1.25rem; font-size: 0.8rem; color: var(--ink-faint); font-family: 'DM Mono',monospace; line-height: 1.6; }


/* ── Card ─────────────────────────────────────────────────────────────────── */
/* ── Tree header + progress ── */
.dt-card {
.dt-tree-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
border: 2px solid #ccc;
.dt-region-label { font-family: 'DM Mono',monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
border-radius: 10px;
.dt-controls { display: flex; gap: 0.4rem; }
padding: 1.4em 1.6em;
.dt-btn { font-size: 0.72rem; padding: 0.3em 0.7em; border-radius: 5px; border: 1.5px solid var(--rule); background: #fff; cursor: pointer; color: var(--ink-soft); font-family: 'DM Sans',sans-serif; font-weight: 500; transition: all 0.15s; }
background: #fafafa;
.dt-btn:hover { background: var(--paper-2); border-color: #ccc; }
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
.dt-btn-back  { border-color: #93c5fd; color: var(--blue); }
animation: dt-fadein 0.25s ease;
.dt-progress-wrap { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-bottom: 0.25rem; }
}
.dt-progress-bar  { height: 100%; background: linear-gradient(90deg, var(--blue), var(--teal)); border-radius: 2px; transition: width 0.4s ease; }
.dt-step-label    { font-family: 'DM Mono',monospace; font-size: 0.65rem; color: var(--ink-faint); text-align: right; margin-bottom: 0.85rem; }


@keyframes dt-fadein {
/* ── Question cards ── */
from { opacity: 0; transform: translateY(6px); }
.dt-card { border: 1.5px solid var(--rule); border-radius: 10px; padding: 1.25rem 1.4rem; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.06); animation: dt-fadein 0.22s ease; }
to   { opacity: 1; transform: translateY(0); }
@keyframes dt-fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
}
.dt-type-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'DM Mono',monospace; padding: 0.2em 0.65em; border-radius: 20px; margin-bottom: 0.8rem; color: #fff; }
.dt-question { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.1rem; line-height: 1.5; color: var(--ink); margin-bottom: 0.85rem; font-weight: 400; }
.dt-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
.dt-tag { font-size: 0.68rem; padding: 0.18em 0.6em; border-radius: 4px; font-weight: 600; font-family: 'DM Mono',monospace; }
.dt-tag-blue  { background: #dbeafe; color: #1e40af; }
.dt-tag-purple { background: #ede9fe; color: #5b21b6; }
.dt-tag-green  { background: #dcfce7; color: #166534; }
.dt-rationale { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; margin-bottom: 0.55rem; line-height: 1.5; }
.dt-landmark { font-size: 0.76rem; color: var(--ink); background: #faf5eb; border-left: 2.5px solid #a0956e; padding: 0.35em 0.65em; margin-bottom: 0.55rem; border-radius: 0 4px 4px 0; line-height: 1.45; }
.dt-positive { font-size: 0.76rem; color: #166534; background: #f0fdf4; border-left: 2.5px solid var(--green); padding: 0.35em 0.65em; margin-bottom: 0.55rem; border-radius: 0 4px 4px 0; }
.dt-negative { font-size: 0.76rem; color: #991b1b; background: #fef2f2; border-left: 2.5px solid var(--emergency); padding: 0.35em 0.65em; margin-bottom: 0.55rem; border-radius: 0 4px 4px 0; }
.dt-muscle-hint { font-size: 0.72rem; padding: 0.22em 0.55em; border-radius: 4px; margin-bottom: 0.3rem; font-family: 'DM Mono',monospace; }
.dt-implicated { background: #f0fdf4; color: #166534; }
.dt-excluded   { background: #fef2f2; color: #991b1b; }
.dt-answers { display: flex; gap: 0.65rem; margin-top: 1.1rem; }
.dt-answer { flex: 1; padding: 0.6em 1em; font-size: 0.88rem; font-weight: 600; border: 1.5px solid transparent; border-radius: 7px; cursor: pointer; transition: all 0.15s ease; font-family: 'DM Sans',sans-serif; }
.dt-answer-yes { background: #f0fdf4; color: #166634; border-color: #86efac; }
.dt-answer-yes:hover { background: var(--green); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(21,128,61,0.25); }
.dt-answer-no  { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.dt-answer-no:hover { background: var(--emergency); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(185,28,28,0.2); }


/* ── Type badge ───────────────────────────────────────────────────────────── */
/* ── Result card ── */
.dt-type-badge {
.dt-card-result { border-color: #86efac; background: #f0fdf4; }
display: inline-block;
.dt-result-name { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.3rem; color: #14532d; margin-bottom: 0.35rem; font-weight: 400; }
color: #fff;
.dt-confidence  { font-family: 'DM Mono',monospace; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.55rem; }
font-size: 0.72em;
.dt-notes    { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.5rem; font-style: italic; line-height: 1.5; }
font-weight: 700;
.dt-treatment { font-size: 0.78rem; background: #dcfce7; border-left: 2.5px solid #16a34a; padding: 0.35em 0.65em; margin-bottom: 0.45rem; border-radius: 0 4px 4px 0; }
letter-spacing: 0.08em;
.dt-chapter  { font-family: 'DM Mono',monospace; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.65rem; }
text-transform: uppercase;
.dt-also      { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; margin-bottom: 0.75rem; }
padding: 0.25em 0.75em;
.dt-wiki-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5em 1em; background: #1e3a5f; color: #fff; border: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: 'DM Sans',sans-serif; transition: background 0.15s; margin-top: 0.25rem; margin-right: 0.4rem; }
border-radius: 20px;
.dt-wiki-link:hover          { background: #162d4a; }
margin-bottom: 0.9em;
.dt-wiki-link.satellite      { background: #4338ca; }
font-family: 'Helvetica Neue', sans-serif;
.dt-wiki-link.satellite:hover { background: #3730a3; }
}


/* ── Question text ────────────────────────────────────────────────────────── */
/* Division tabs */
.dt-question {
.dt-division-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; margin-top: 0.2rem; flex-wrap: wrap; }
font-size: 1.08em;
.dt-division-tab  { font-size: 0.72rem; font-weight: 600; padding: 0.3em 0.75em; border-radius: 5px; border: 1.5px solid #86efac; background: #fff; cursor: pointer; font-family: 'DM Sans',sans-serif; color: #14532d; transition: all 0.15s; }
line-height: 1.55;
.dt-division-tab.active { background: #14532d; color: #fff; border-color: #14532d; }
font-weight: 600;
.dt-division-panel { display: none; animation: dt-fadein 0.18s ease; }
color: #1a1a2e;
.dt-division-panel.active { display: block; }
margin-bottom: 0.9em;
.dt-division-content { font-size: 0.8rem; line-height: 1.65; color: var(--ink-soft); background: rgba(255,255,255,0.6); border-radius: 6px; padding: 0.65rem 0.8rem; margin-bottom: 0.5rem; }
}
.dt-division-content ul { padding-left: 1.1em; margin-top: 0.3rem; }
.dt-division-content li { margin-bottom: 0.2rem; }


/* ── Tags row ─────────────────────────────────────────────────────────────── */
/* Confirmatory checklist */
.dt-tags {
.dt-confirmatory { margin-top: 0.75rem; border: 1.5px solid #86efac; border-radius: 8px; overflow: hidden; }
display: flex;
.dt-confirmatory-header { background: #15803d; color: #fff; font-family: 'DM Mono',monospace; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.8rem; }
flex-wrap: wrap;
.dt-confirmatory-items  { background: #f0fdf4; padding: 0.5rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
gap: 0.4em;
.dt-confirmatory-item  { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.76rem; color: var(--ink-soft); line-height: 1.45; }
margin-bottom: 0.7em;
.dt-confirmatory-dot    { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #16a34a; flex-shrink: 0; margin-top: 1px; background: #fff; }
}


.dt-tag {
/* Horner confirmation */
font-size: 0.73em;
.dt-confirm-panel  { margin-top: 0.75rem; border: 1.5px solid #c7d2fe; border-radius: 8px; background: #eef2ff; overflow: hidden; }
padding: 0.2em 0.65em;
.dt-confirm-header { font-family: 'DM Mono',monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3730a3; padding: 0.4rem 0.75rem; background: #e0e7ff; }
border-radius: 4px;
.dt-confirm-items  { padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; }
font-family: 'Helvetica Neue', sans-serif;
.dt-confirm-item  { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.77rem; line-height: 1.45; color: var(--ink-soft); }
font-weight: 600;
.dt-confirm-dot    { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; flex-shrink: 0; margin-top: 4px; }
}


.dt-tag-blue  { background: #dbeeff; color: #1a5276; }
/* Satellite TrPs */
.dt-tag-purple { background: #f0e6ff; color: #5b2d8e; }
.dt-satellite-section { margin-top: 0.75rem; }
.dt-tag-green  { background: #d5f5e3; color: #1d6a3a; }
.dt-satellite-header  { font-family: 'DM Mono',monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.45rem; }
.dt-satellite-grid    { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dt-satellite-tag     { font-size: 0.72rem; font-weight: 600; padding: 0.25em 0.65em; border-radius: 4px; background: #f0fdf4; border: 1px solid #86efac; color: #14532d; font-family: 'DM Sans',sans-serif; }


/* ── Supporting info ──────────────────────────────────────────────────────── */
/* Landing page signpost */
.dt-rationale {
.dt-landing-panel  { margin-top: 0.85rem; border: 1.5px solid #c7d2fe; border-radius: 8px; overflow: hidden; }
font-size: 0.82em;
.dt-landing-header { background: #4338ca; color: #fff; font-family: 'DM Mono',monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.8rem; }
color: #555;
.dt-landing-body  { background: #eef2ff; padding: 0.65rem 0.8rem; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.55; }
font-style: italic;
.dt-landing-list  { margin-top: 0.45rem; padding-left: 1.1em; color: #3730a3; }
margin-bottom: 0.6em;
.dt-landing-list li { margin-bottom: 0.2rem; font-size: 0.76rem; }
line-height: 1.45;
}


.dt-landmark {
/* Broad differential reminder */
font-size: 0.82em;
.dt-broad-reminder { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 1rem; padding: 0.6rem 0.8rem; background: #f8fafc; border: 1.5px solid var(--slate-border); border-radius: 7px; font-size: 0.76rem; color: var(--slate); line-height: 1.5; }
color: #444;
.dt-broad-reminder-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
background: #f0ede8;
.dt-broad-reminder strong { display: block; font-family: 'DM Mono',monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 0.2rem; }
border-left: 3px solid #a0956e;
padding: 0.35em 0.7em;
margin-bottom: 0.6em;
border-radius: 0 4px 4px 0;
}


.dt-positive {
/* Neuro referral */
font-size: 0.82em;
.dt-neuro-title { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.15rem; color: var(--emergency); margin-bottom: 0.4rem; font-weight: 400; }
color: #1d6a3a;
.dt-neuro-body  { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.65rem; }
background: #eafaf1;
border-left: 3px solid #27ae60;
padding: 0.35em 0.7em;
margin-bottom: 0.6em;
border-radius: 0 4px 4px 0;
}


.dt-muscle-hint {
/* Overlap card */
font-size: 0.78em;
.dt-card-overlap { border-color: #d6d3d1; }
padding: 0.25em 0.6em;
.dt-overlap-text { font-size: 0.9rem; margin-bottom: 0.65rem; line-height: 1.5; }
border-radius: 4px;
.dt-screen-list  { font-size: 0.8rem; color: var(--ink-soft); padding-left: 1.1em; margin-bottom: 0.65rem; line-height: 1.8; }
margin-bottom: 0.35em;
font-family: 'Helvetica Neue', sans-serif;
}


.dt-implicated { background: #eafaf1; color: #1d6a3a; }
/* ── Broad differential panel ── */
.dt-excluded   { background: #fdf2f2; color: #922b21; }
.dt-broad-panel { border: 1.5px solid var(--slate-border); border-radius: 12px; overflow: hidden; background: var(--slate-bg); }
.dt-broad-header { background: var(--slate); padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dt-broad-header-top { display: flex; align-items: center; justify-content: space-between; }
.dt-broad-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'DM Mono',monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #cbd5e1; }
.dt-broad-toggle { font-family: 'DM Mono',monospace; font-size: 0.62rem; color: #94a3b8; background: none; border: 1px solid #475569; border-radius: 3px; padding: 0.15em 0.55em; cursor: pointer; transition: all 0.15s; }
.dt-broad-toggle:hover { background: #475569; color: #e2e8f0; }
.dt-epigraph { font-family: 'DM Serif Display',Georgia,serif; font-style: italic; font-size: 0.82rem; color: #94a3b8; line-height: 1.5; }
.dt-epigraph cite { font-style: normal; font-family: 'DM Mono',monospace; font-size: 0.65rem; color: #64748b; }
.dt-broad-locked-msg { padding: 1rem 1.1rem; font-family: 'DM Mono',monospace; font-size: 0.72rem; color: #64748b; text-align: center; border-top: 1px solid #475569; }
.dt-broad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.85rem; border-top: 1px solid #e2e8f0; }
.dt-broad-grid.hidden { display: none; }
.dt-diff-item { background: #fff; border: 1.5px solid var(--slate-border); border-radius: 8px; padding: 0.85rem 0.9rem; cursor: pointer; transition: all 0.18s ease; }
.dt-diff-item:hover { border-color: #94a3b8; box-shadow: 0 2px 10px rgba(0,0,0,0.07); transform: translateY(-1px); }
.dt-diff-item.open  { border-color: #94a3b8; box-shadow: 0 2px 12px rgba(0,0,0,0.09); }
.dt-diff-confidence { display: inline-block; font-family: 'DM Mono',monospace; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12em 0.5em; border-radius: 3px; margin-bottom: 0.5rem; }
.dt-diff-confidence.rare    { background: var(--rare-bg);    color: var(--rare-color);    }
.dt-diff-confidence.uncommon { background: var(--uncommon-bg); color: var(--uncommon-color); }
.dt-diff-confidence.atypical { background: var(--atypical-bg); color: var(--atypical-color); }
.dt-diff-name   { font-size: 0.88rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 0.3rem; }
.dt-diff-mimics { font-size: 0.74rem; color: var(--ink-soft); font-style: italic; line-height: 1.4; }
.dt-diff-detail { display: none; margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid var(--rule); }
.dt-diff-item.open .dt-diff-detail { display: block; }
.dt-diff-distinguisher { font-size: 0.76rem; color: var(--ink); line-height: 1.5; margin-bottom: 0.5rem; padding: 0.35em 0.6em; background: #f8fafc; border-left: 2.5px solid var(--slate); border-radius: 0 4px 4px 0; }
.dt-diff-distinguisher strong { display: block; font-size: 0.65rem; font-family: 'DM Mono',monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.2rem; }
.dt-diff-action { font-size: 0.73rem; color: var(--slate); background: #f1f5f9; border-radius: 4px; padding: 0.3em 0.6em; line-height: 1.45; }
.dt-diff-action strong { font-family: 'DM Mono',monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); display: block; margin-bottom: 0.15rem; }


/* ── Answer buttons ───────────────────────────────────────────────────────── */
/* ── Error ── */
.dt-answers {
.dt-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px; padding: 1em; color: #991b1b; font-size: 0.85rem; font-family: 'Courier New',monospace; }
display: flex;
gap: 0.75em;
margin-top: 1.2em;
}
 
.dt-answer {
flex: 1;
padding: 0.65em 1em;
font-size: 0.95em;
font-weight: 700;
border: 2px solid transparent;
border-radius: 7px;
cursor: pointer;
transition: all 0.15s ease;
font-family: 'Helvetica Neue', sans-serif;
letter-spacing: 0.04em;
}
 
.dt-answer-yes {
background: #eafaf1;
color: #1d6a3a;
border-color: #27ae60;
}
 
.dt-answer-yes:hover {
background: #27ae60;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(39,174,96,0.3);
}
 
.dt-answer-no {
background: #fdf2f2;
color: #922b21;
border-color: #e74c3c;
}
 
.dt-answer-no:hover {
background: #e74c3c;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(231,76,60,0.3);
}
 
/* ── Navigation buttons ───────────────────────────────────────────────────── */
.dt-btn {
font-size: 0.78em;
padding: 0.3em 0.75em;
border-radius: 5px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
color: #444;
font-family: 'Helvetica Neue', sans-serif;
transition: background 0.15s;
}
 
.dt-btn:hover { background: #f0f0f0; }
 
.dt-btn-back  { border-color: #2980b9; color: #2980b9; }
.dt-btn-reset { border-color: #999; }
 
/* ── Result card ──────────────────────────────────────────────────────────── */
.dt-card-result {
border-color: #27ae60;
background: #f2faf4;
}
 
.dt-result-name {
font-size: 1.25em;
font-weight: 700;
color: #1a5276;
margin-bottom: 0.4em;
}
 
.dt-confidence {
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.6em;
font-family: 'Helvetica Neue', sans-serif;
}
 
.dt-notes {
font-size: 0.85em;
color: #444;
margin-bottom: 0.5em;
font-style: italic;
}
 
.dt-treatment {
font-size: 0.83em;
background: #d5f5e3;
border-left: 3px solid #1d8348;
padding: 0.35em 0.7em;
margin-bottom: 0.5em;
border-radius: 0 4px 4px 0;
}
 
.dt-chapter {
font-size: 0.78em;
color: #666;
margin-bottom: 0.7em;
font-family: 'Helvetica Neue', sans-serif;
}
 
.dt-also {
font-size: 0.8em;
color: #555;
margin-bottom: 0.8em;
font-style: italic;
}
 
.dt-wiki-link {
display: inline-block;
margin-top: 0.5em;
padding: 0.55em 1.1em;
background: #1a5276;
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.88em;
font-weight: 700;
cursor: pointer;
font-family: 'Helvetica Neue', sans-serif;
transition: background 0.15s;
}
 
.dt-wiki-link:hover { background: #154360; }
 
/* ── Referral card ────────────────────────────────────────────────────────── */
.dt-referral-text {
font-size: 1.05em;
font-weight: 600;
margin-bottom: 0.5em;
}
 
.dt-referral-action {
font-size: 0.9em;
font-weight: 700;
padding: 0.5em 0.8em;
background: rgba(0,0,0,0.07);
border-radius: 5px;
margin-bottom: 0.4em;
}
 
.dt-flag-label {
font-size: 0.82em;
color: #666;
font-style: italic;
}
 
/* ── Overlap card ─────────────────────────────────────────────────────────── */
.dt-card-overlap { border-color: #95a5a6; }
 
.dt-overlap-text {
font-size: 0.95em;
margin-bottom: 0.7em;
}
 
.dt-screen-list {
font-size: 0.85em;
color: #444;
padding-left: 1.2em;
margin-bottom: 0.7em;
}
 
/* ── Error state ──────────────────────────────────────────────────────────── */
.dt-error {
background: #fdf2f2;
border: 1px solid #e74c3c;
border-radius: 6px;
padding: 1em;
color: #922b21;
font-size: 0.9em;
font-family: monospace;
}


/* ── Responsive ───────────────────────────────────────────────────────────── */
/* ── Responsive ── */
@media ( max-width: 520px ) {
@media (max-width: 560px) {
.dt-card { padding: 1em 1.1em; }
  .dt-redflag-panel { grid-template-columns: 1fr; }
.dt-answers { flex-direction: column; }
  .dt-broad-grid    { grid-template-columns: 1fr; }
  .dt-answers       { flex-direction: column; }
  .dt-card          { padding: 1rem 1.1rem; }
}
}

Latest revision as of 01:02, 12 April 2026

/**
 * DiagnosticTree.css — v6
 * Copy entire contents to: MediaWiki:Gadget-DiagnosticTree.css
 *
 * Also add this to MediaWiki:Common.css to load the fonts:
 *   @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
 */

.dt-shell {
  --emergency: #b91c1c; --emergency-bg: #fef2f2; --emergency-border: #fca5a5;
  --urgent: #b45309; --urgent-bg: #fffbeb; --urgent-border: #fcd34d;
  --cleared: #15803d; --cleared-bg: #f0fdf4; --cleared-border: #86efac;
  --ink: #1c1917; --ink-soft: #57534e; --ink-faint: #a8a29e;
  --paper: #fafaf9; --paper-2: #f5f5f4; --rule: #e7e5e4;
  --blue: #1d4ed8; --green: #15803d; --teal: #0f766e; --purple: #6d28d9;
  --slate: #334155; --slate-bg: #f8fafc; --slate-border: #cbd5e1;
  --rare-color: #7c3aed; --rare-bg: #f5f3ff;
  --uncommon-color: #0369a1; --uncommon-bg: #f0f9ff;
  --atypical-color: #0f766e; --atypical-bg: #f0fdfa;
  --algo-header: #0c4a6e; --algo-header-border: #7dd3fc;
  --nerve-header: #4c1d95; --nerve-header-border: #c4b5fd;

  max-width: 780px; margin: 1.5em auto;
  display: flex; flex-direction: column; gap: 1rem;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  color: var(--ink);
}

/* ── Key toggle ── */
.dt-key-toggle { display: flex; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--rule); background: var(--paper-2); }
.dt-key-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.65rem 1rem; font-family: 'DM Mono','Courier New',monospace;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border: none; background: transparent; color: var(--ink-faint); transition: all 0.2s ease;
}
.dt-key-tab + .dt-key-tab { border-left: 1.5px solid var(--rule); }
.dt-key-tab:hover:not(.active):not(.coming-soon) { background: #fff; color: var(--ink-soft); }
.dt-key-tab.active.pain-key  { background: var(--algo-header);  color: #fff; }
.dt-key-tab.active.nerve-key { background: var(--nerve-header); color: #fff; }
.dt-key-tab.coming-soon { cursor: default; opacity: 0.55; }
.dt-key-tab .tab-icon { font-size: 0.9rem; }
.dt-key-tab .tab-soon { font-size: 0.55rem; font-weight: 500; background: rgba(0,0,0,0.12); padding: 0.1em 0.4em; border-radius: 3px; margin-left: 0.3rem; }

/* ── Red flag panel ── */
.dt-redflag-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dt-flag-column { border-radius: 10px; overflow: hidden; border: 1.5px solid var(--emergency-border); background: var(--emergency-bg); transition: border-color 0.3s, background 0.3s; }
.dt-flag-column.urgent      { border-color: var(--urgent-border);  background: var(--urgent-bg);  }
.dt-flag-column.all-cleared { border-color: var(--cleared-border); background: var(--cleared-bg); }
.dt-flag-col-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'DM Mono',monospace; background: var(--emergency); color: #fff; }
.dt-flag-column.urgent      .dt-flag-col-header { background: var(--urgent);  }
.dt-flag-column.all-cleared .dt-flag-col-header { background: var(--cleared); }
.dt-flag-col-header .header-icon { font-size: 0.9rem; }
.dt-flag-items { padding: 0.5rem 0; }
.dt-flag-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.85rem; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid rgba(0,0,0,0.05); }
.dt-flag-item:last-child { border-bottom: none; }
.dt-flag-item:hover    { background: rgba(0,0,0,0.04); }
.dt-flag-item.expanded { background: rgba(0,0,0,0.03); }
.dt-flag-checkbox { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--emergency); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: #fff; }
.dt-flag-column.urgent .dt-flag-checkbox { border-color: var(--urgent); }
.dt-flag-item.cleared .dt-flag-checkbox { background: var(--cleared); border-color: var(--cleared); }
.dt-flag-item.cleared .dt-flag-checkbox::after { content: '✓'; color: #fff; font-size: 0.65rem; font-weight: 700; }
.dt-flag-item-body { flex: 1; min-width: 0; }
.dt-flag-label { font-size: 0.8rem; font-weight: 600; color: var(--ink); line-height: 1.35; transition: color 0.2s; }
.dt-flag-item.cleared .dt-flag-label { color: var(--ink-faint); text-decoration: line-through; }
.dt-flag-question { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.35rem; padding: 0.4rem 0.55rem; background: rgba(0,0,0,0.04); border-radius: 5px; border-left: 2px solid var(--emergency); display: none; }
.dt-flag-column.urgent .dt-flag-question { border-left-color: var(--urgent); }
.dt-flag-item.expanded .dt-flag-question { display: block; }
.dt-flag-rationale { font-size: 0.7rem; color: var(--ink-soft); font-style: italic; margin-top: 0.3rem; line-height: 1.4; display: none; }
.dt-flag-item.expanded .dt-flag-rationale { display: block; }
.dt-flag-actions { display: none; gap: 0.4rem; margin-top: 0.45rem; }
.dt-flag-item.expanded .dt-flag-actions { display: flex; }
.dt-flag-btn { font-size: 0.7rem; font-weight: 700; padding: 0.25em 0.65em; border-radius: 4px; border: 1.5px solid transparent; cursor: pointer; font-family: 'DM Sans',sans-serif; transition: all 0.15s; }
.dt-flag-btn.present { background: var(--emergency); color: #fff; border-color: var(--emergency); }
.dt-flag-btn.present:hover { filter: brightness(0.9); }
.dt-flag-btn.absent  { background: #fff; color: var(--ink-soft); border-color: var(--rule); }
.dt-flag-btn.absent:hover { background: var(--paper-2); }
.dt-flag-column.urgent .dt-flag-btn.present { background: var(--urgent); border-color: var(--urgent); }
.dt-flag-referral { margin: 0 0.85rem 0.6rem; padding: 0.6rem 0.75rem; border-radius: 6px; background: var(--emergency); color: #fff; font-size: 0.75rem; line-height: 1.5; display: none; }
.dt-flag-referral.urgent-ref { background: var(--urgent); }
.dt-flag-referral.visible    { display: block; }
.dt-flag-referral strong { display: block; font-size: 0.78rem; margin-bottom: 0.25rem; font-family: 'DM Mono',monospace; letter-spacing: 0.05em; }
.dt-panel-cleared-msg { display: none; text-align: center; padding: 0.5rem; font-size: 0.75rem; color: var(--cleared); font-weight: 600; }
.dt-flag-column.all-cleared .dt-panel-cleared-msg { display: block; }

/* ── Divider ── */
.dt-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-faint); font-size: 0.7rem; font-family: 'DM Mono',monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.dt-divider::before, .dt-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* ── Algorithm section ── */
.dt-algo-section { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--algo-header-border); transition: border-color 0.3s; }
.dt-algo-section.locked { border-color: var(--rule); }
.dt-algo-header { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem; background: var(--algo-header); color: #fff; transition: background 0.3s; }
.dt-algo-section.locked .dt-algo-header { background: #78716c; }
.dt-algo-header-left { display: flex; align-items: center; gap: 0.5rem; font-family: 'DM Mono',monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.dt-algo-header-right { font-family: 'DM Mono',monospace; font-size: 0.62rem; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; }
.dt-algo-section.unlocked .dt-algo-header-right { display: none; }
.dt-algo-body { padding: 1rem; background: #fff; }
.dt-algo-section.locked .dt-algo-body { background: var(--paper-2); }
.dt-tree-locked-msg { text-align: center; padding: 1.25rem; font-size: 0.8rem; color: var(--ink-faint); font-family: 'DM Mono',monospace; line-height: 1.6; }

/* ── Tree header + progress ── */
.dt-tree-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.dt-region-label { font-family: 'DM Mono',monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.dt-controls { display: flex; gap: 0.4rem; }
.dt-btn { font-size: 0.72rem; padding: 0.3em 0.7em; border-radius: 5px; border: 1.5px solid var(--rule); background: #fff; cursor: pointer; color: var(--ink-soft); font-family: 'DM Sans',sans-serif; font-weight: 500; transition: all 0.15s; }
.dt-btn:hover { background: var(--paper-2); border-color: #ccc; }
.dt-btn-back  { border-color: #93c5fd; color: var(--blue); }
.dt-progress-wrap { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-bottom: 0.25rem; }
.dt-progress-bar  { height: 100%; background: linear-gradient(90deg, var(--blue), var(--teal)); border-radius: 2px; transition: width 0.4s ease; }
.dt-step-label    { font-family: 'DM Mono',monospace; font-size: 0.65rem; color: var(--ink-faint); text-align: right; margin-bottom: 0.85rem; }

/* ── Question cards ── */
.dt-card { border: 1.5px solid var(--rule); border-radius: 10px; padding: 1.25rem 1.4rem; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.06); animation: dt-fadein 0.22s ease; }
@keyframes dt-fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.dt-type-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'DM Mono',monospace; padding: 0.2em 0.65em; border-radius: 20px; margin-bottom: 0.8rem; color: #fff; }
.dt-question { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.1rem; line-height: 1.5; color: var(--ink); margin-bottom: 0.85rem; font-weight: 400; }
.dt-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
.dt-tag { font-size: 0.68rem; padding: 0.18em 0.6em; border-radius: 4px; font-weight: 600; font-family: 'DM Mono',monospace; }
.dt-tag-blue   { background: #dbeafe; color: #1e40af; }
.dt-tag-purple { background: #ede9fe; color: #5b21b6; }
.dt-tag-green  { background: #dcfce7; color: #166534; }
.dt-rationale { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; margin-bottom: 0.55rem; line-height: 1.5; }
.dt-landmark { font-size: 0.76rem; color: var(--ink); background: #faf5eb; border-left: 2.5px solid #a0956e; padding: 0.35em 0.65em; margin-bottom: 0.55rem; border-radius: 0 4px 4px 0; line-height: 1.45; }
.dt-positive { font-size: 0.76rem; color: #166534; background: #f0fdf4; border-left: 2.5px solid var(--green); padding: 0.35em 0.65em; margin-bottom: 0.55rem; border-radius: 0 4px 4px 0; }
.dt-negative { font-size: 0.76rem; color: #991b1b; background: #fef2f2; border-left: 2.5px solid var(--emergency); padding: 0.35em 0.65em; margin-bottom: 0.55rem; border-radius: 0 4px 4px 0; }
.dt-muscle-hint { font-size: 0.72rem; padding: 0.22em 0.55em; border-radius: 4px; margin-bottom: 0.3rem; font-family: 'DM Mono',monospace; }
.dt-implicated { background: #f0fdf4; color: #166534; }
.dt-excluded   { background: #fef2f2; color: #991b1b; }
.dt-answers { display: flex; gap: 0.65rem; margin-top: 1.1rem; }
.dt-answer { flex: 1; padding: 0.6em 1em; font-size: 0.88rem; font-weight: 600; border: 1.5px solid transparent; border-radius: 7px; cursor: pointer; transition: all 0.15s ease; font-family: 'DM Sans',sans-serif; }
.dt-answer-yes { background: #f0fdf4; color: #166634; border-color: #86efac; }
.dt-answer-yes:hover { background: var(--green); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(21,128,61,0.25); }
.dt-answer-no  { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.dt-answer-no:hover { background: var(--emergency); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(185,28,28,0.2); }

/* ── Result card ── */
.dt-card-result { border-color: #86efac; background: #f0fdf4; }
.dt-result-name { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.3rem; color: #14532d; margin-bottom: 0.35rem; font-weight: 400; }
.dt-confidence  { font-family: 'DM Mono',monospace; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.55rem; }
.dt-notes     { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.5rem; font-style: italic; line-height: 1.5; }
.dt-treatment { font-size: 0.78rem; background: #dcfce7; border-left: 2.5px solid #16a34a; padding: 0.35em 0.65em; margin-bottom: 0.45rem; border-radius: 0 4px 4px 0; }
.dt-chapter   { font-family: 'DM Mono',monospace; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.65rem; }
.dt-also      { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; margin-bottom: 0.75rem; }
.dt-wiki-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5em 1em; background: #1e3a5f; color: #fff; border: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: 'DM Sans',sans-serif; transition: background 0.15s; margin-top: 0.25rem; margin-right: 0.4rem; }
.dt-wiki-link:hover           { background: #162d4a; }
.dt-wiki-link.satellite       { background: #4338ca; }
.dt-wiki-link.satellite:hover { background: #3730a3; }

/* Division tabs */
.dt-division-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; margin-top: 0.2rem; flex-wrap: wrap; }
.dt-division-tab  { font-size: 0.72rem; font-weight: 600; padding: 0.3em 0.75em; border-radius: 5px; border: 1.5px solid #86efac; background: #fff; cursor: pointer; font-family: 'DM Sans',sans-serif; color: #14532d; transition: all 0.15s; }
.dt-division-tab.active { background: #14532d; color: #fff; border-color: #14532d; }
.dt-division-panel { display: none; animation: dt-fadein 0.18s ease; }
.dt-division-panel.active { display: block; }
.dt-division-content { font-size: 0.8rem; line-height: 1.65; color: var(--ink-soft); background: rgba(255,255,255,0.6); border-radius: 6px; padding: 0.65rem 0.8rem; margin-bottom: 0.5rem; }
.dt-division-content ul { padding-left: 1.1em; margin-top: 0.3rem; }
.dt-division-content li { margin-bottom: 0.2rem; }

/* Confirmatory checklist */
.dt-confirmatory { margin-top: 0.75rem; border: 1.5px solid #86efac; border-radius: 8px; overflow: hidden; }
.dt-confirmatory-header { background: #15803d; color: #fff; font-family: 'DM Mono',monospace; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.8rem; }
.dt-confirmatory-items  { background: #f0fdf4; padding: 0.5rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.dt-confirmatory-item   { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.76rem; color: var(--ink-soft); line-height: 1.45; }
.dt-confirmatory-dot    { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #16a34a; flex-shrink: 0; margin-top: 1px; background: #fff; }

/* Horner confirmation */
.dt-confirm-panel  { margin-top: 0.75rem; border: 1.5px solid #c7d2fe; border-radius: 8px; background: #eef2ff; overflow: hidden; }
.dt-confirm-header { font-family: 'DM Mono',monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3730a3; padding: 0.4rem 0.75rem; background: #e0e7ff; }
.dt-confirm-items  { padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dt-confirm-item   { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.77rem; line-height: 1.45; color: var(--ink-soft); }
.dt-confirm-dot    { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; flex-shrink: 0; margin-top: 4px; }

/* Satellite TrPs */
.dt-satellite-section { margin-top: 0.75rem; }
.dt-satellite-header  { font-family: 'DM Mono',monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.45rem; }
.dt-satellite-grid    { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dt-satellite-tag     { font-size: 0.72rem; font-weight: 600; padding: 0.25em 0.65em; border-radius: 4px; background: #f0fdf4; border: 1px solid #86efac; color: #14532d; font-family: 'DM Sans',sans-serif; }

/* Landing page signpost */
.dt-landing-panel  { margin-top: 0.85rem; border: 1.5px solid #c7d2fe; border-radius: 8px; overflow: hidden; }
.dt-landing-header { background: #4338ca; color: #fff; font-family: 'DM Mono',monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.8rem; }
.dt-landing-body   { background: #eef2ff; padding: 0.65rem 0.8rem; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.55; }
.dt-landing-list   { margin-top: 0.45rem; padding-left: 1.1em; color: #3730a3; }
.dt-landing-list li { margin-bottom: 0.2rem; font-size: 0.76rem; }

/* Broad differential reminder */
.dt-broad-reminder { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 1rem; padding: 0.6rem 0.8rem; background: #f8fafc; border: 1.5px solid var(--slate-border); border-radius: 7px; font-size: 0.76rem; color: var(--slate); line-height: 1.5; }
.dt-broad-reminder-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.dt-broad-reminder strong { display: block; font-family: 'DM Mono',monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 0.2rem; }

/* Neuro referral */
.dt-neuro-title { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.15rem; color: var(--emergency); margin-bottom: 0.4rem; font-weight: 400; }
.dt-neuro-body  { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.65rem; }

/* Overlap card */
.dt-card-overlap { border-color: #d6d3d1; }
.dt-overlap-text { font-size: 0.9rem; margin-bottom: 0.65rem; line-height: 1.5; }
.dt-screen-list  { font-size: 0.8rem; color: var(--ink-soft); padding-left: 1.1em; margin-bottom: 0.65rem; line-height: 1.8; }

/* ── Broad differential panel ── */
.dt-broad-panel { border: 1.5px solid var(--slate-border); border-radius: 12px; overflow: hidden; background: var(--slate-bg); }
.dt-broad-header { background: var(--slate); padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dt-broad-header-top { display: flex; align-items: center; justify-content: space-between; }
.dt-broad-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'DM Mono',monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #cbd5e1; }
.dt-broad-toggle { font-family: 'DM Mono',monospace; font-size: 0.62rem; color: #94a3b8; background: none; border: 1px solid #475569; border-radius: 3px; padding: 0.15em 0.55em; cursor: pointer; transition: all 0.15s; }
.dt-broad-toggle:hover { background: #475569; color: #e2e8f0; }
.dt-epigraph { font-family: 'DM Serif Display',Georgia,serif; font-style: italic; font-size: 0.82rem; color: #94a3b8; line-height: 1.5; }
.dt-epigraph cite { font-style: normal; font-family: 'DM Mono',monospace; font-size: 0.65rem; color: #64748b; }
.dt-broad-locked-msg { padding: 1rem 1.1rem; font-family: 'DM Mono',monospace; font-size: 0.72rem; color: #64748b; text-align: center; border-top: 1px solid #475569; }
.dt-broad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.85rem; border-top: 1px solid #e2e8f0; }
.dt-broad-grid.hidden { display: none; }
.dt-diff-item { background: #fff; border: 1.5px solid var(--slate-border); border-radius: 8px; padding: 0.85rem 0.9rem; cursor: pointer; transition: all 0.18s ease; }
.dt-diff-item:hover { border-color: #94a3b8; box-shadow: 0 2px 10px rgba(0,0,0,0.07); transform: translateY(-1px); }
.dt-diff-item.open  { border-color: #94a3b8; box-shadow: 0 2px 12px rgba(0,0,0,0.09); }
.dt-diff-confidence { display: inline-block; font-family: 'DM Mono',monospace; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12em 0.5em; border-radius: 3px; margin-bottom: 0.5rem; }
.dt-diff-confidence.rare     { background: var(--rare-bg);     color: var(--rare-color);     }
.dt-diff-confidence.uncommon { background: var(--uncommon-bg); color: var(--uncommon-color); }
.dt-diff-confidence.atypical { background: var(--atypical-bg); color: var(--atypical-color); }
.dt-diff-name   { font-size: 0.88rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 0.3rem; }
.dt-diff-mimics { font-size: 0.74rem; color: var(--ink-soft); font-style: italic; line-height: 1.4; }
.dt-diff-detail { display: none; margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid var(--rule); }
.dt-diff-item.open .dt-diff-detail { display: block; }
.dt-diff-distinguisher { font-size: 0.76rem; color: var(--ink); line-height: 1.5; margin-bottom: 0.5rem; padding: 0.35em 0.6em; background: #f8fafc; border-left: 2.5px solid var(--slate); border-radius: 0 4px 4px 0; }
.dt-diff-distinguisher strong { display: block; font-size: 0.65rem; font-family: 'DM Mono',monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.2rem; }
.dt-diff-action { font-size: 0.73rem; color: var(--slate); background: #f1f5f9; border-radius: 4px; padding: 0.3em 0.6em; line-height: 1.45; }
.dt-diff-action strong { font-family: 'DM Mono',monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); display: block; margin-bottom: 0.15rem; }

/* ── Error ── */
.dt-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px; padding: 1em; color: #991b1b; font-size: 0.85rem; font-family: 'Courier New',monospace; }

/* ── Responsive ── */
@media (max-width: 560px) {
  .dt-redflag-panel { grid-template-columns: 1fr; }
  .dt-broad-grid    { grid-template-columns: 1fr; }
  .dt-answers       { flex-direction: column; }
  .dt-card          { padding: 1rem 1.1rem; }
}
Retrieved from "https://painwiki.com/wiki/index.php?title=MediaWiki:Gadget-DiagnosticTree.css&oldid=130"