MediaWiki:Gadget-DiagnosticTree.css: Difference between revisions

From Painwiki
Jump to navigation Jump to search
← Older edit
Yatreyu (talk | contribs)
Bureaucrats, Interface administrators, Administrators
232 edits
No edit summary
No edit summary
 
Line 1: Line 1:
/**
/**
  * DiagnosticTree.css — v2
  * 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');
  */
  */


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


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


/* ── Red flag panel ───────────────────────────────────────────────────────── */
/* ── Key toggle ── */
.dt-redflag-panel {
.dt-key-toggle { display: flex; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--rule); background: var(--paper-2); }
   display: grid;
.dt-key-tab {
   grid-template-columns: 1fr 1fr;
   flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
   gap: 0.75rem;
  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; }


.dt-flag-column {
/* ── Red flag panel ── */
  border-radius: 10px;
.dt-redflag-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  overflow: hidden;
.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; }
  border: 1.5px solid var(--emergency-border);
.dt-flag-column.urgent     { border-color: var(--urgent-border); background: var(--urgent-bg); }
  background: var(--emergency-bg);
.dt-flag-column.all-cleared { border-color: var(--cleared-border); background: var(--cleared-bg); }
  transition: border-color 0.3s, background 0.3s;
.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.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: 'Courier New', 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-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-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); }
/* ── Flag item ────────────────────────────────────────────────────────────── */
.dt-flag-item:last-child { border-bottom: none; }
.dt-flag-item {
.dt-flag-item:hover   { background: rgba(0,0,0,0.04); }
  display: flex;
.dt-flag-item.expanded { background: rgba(0,0,0,0.03); }
  align-items: flex-start;
.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; }
  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-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 {
.dt-flag-item.cleared .dt-flag-checkbox::after { content: '✓'; color: #fff; font-size: 0.65rem; font-weight: 700; }
  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-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-label {
.dt-flag-item.cleared .dt-flag-label { color: var(--ink-faint); text-decoration: line-through; }
  font-size: 0.8rem;
.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; }
  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-column.urgent .dt-flag-question { border-left-color: var(--urgent); }
.dt-flag-item.expanded .dt-flag-question { display: block; }
.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-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-item.expanded .dt-flag-rationale { display: block; }
 
.dt-flag-actions { display: none; gap: 0.4rem; margin-top: 0.45rem; }
.dt-flag-actions {
  display: none;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
 
.dt-flag-item.expanded .dt-flag-actions { display: flex; }
.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 {
.dt-flag-btn.present { background: var(--emergency); color: #fff; border-color: var(--emergency); }
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25em 0.65em;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: Helvetica, Arial, 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.present:hover { filter: brightness(0.9); }
 
.dt-flag-btn.absent { background: #fff; color: var(--ink-soft); border-color: var(--rule); }
.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-btn.absent:hover { background: var(--paper-2); }
 
.dt-flag-column.urgent .dt-flag-btn.present { background: var(--urgent); border-color: var(--urgent); }
.dt-flag-column.urgent .dt-flag-btn.present {
.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; }
  background: var(--urgent);
  border-color: var(--urgent);
}
 
/* Referral inline card */
.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.urgent-ref { background: var(--urgent); }
.dt-flag-referral.visible    { display: block; }
.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-flag-referral strong {
.dt-panel-cleared-msg { display: none; text-align: center; padding: 0.5rem; font-size: 0.75rem; color: var(--cleared); font-weight: 600; }
  display: block;
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}
 
/* Column cleared message */
.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-flag-column.all-cleared .dt-panel-cleared-msg { display: block; }


/* ── Divider ──────────────────────────────────────────────────────────────── */
/* ── Divider ── */
.dt-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; }
  display: flex;
.dt-divider::before, .dt-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
 
.dt-divider::before,
.dt-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
 
/* ── Tree section lock ────────────────────────────────────────────────────── */
.dt-tree-section {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
 
.dt-tree-section.unlocked {
  opacity: 1;
  pointer-events: all;
}
 
.dt-tree-locked-msg {
  text-align: center;
  padding: 1.5rem;
  background: var(--paper-2);
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-family: 'Courier New', monospace;
}
 
/* ── Tree header ──────────────────────────────────────────────────────────── */
.dt-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}


.dt-region-label {
/* ── Algorithm section ── */
  font-family: 'Courier New', monospace;
.dt-algo-section { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--algo-header-border); transition: border-color 0.3s; }
  font-size: 0.65rem;
.dt-algo-section.locked { border-color: var(--rule); }
  letter-spacing: 0.12em;
.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; }
  text-transform: uppercase;
.dt-algo-section.locked .dt-algo-header { background: #78716c; }
  color: var(--ink-faint);
.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-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; }


.dt-btn {
/* ── Question cards ── */
  font-size: 0.72rem;
.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; }
  padding: 0.3em 0.7em;
@keyframes dt-fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
  border-radius: 5px;
.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; }
  border: 1.5px solid var(--rule);
.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; }
  background: #fff;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  transition: all 0.15s;
}
 
.dt-btn:hover      { background: var(--paper-2); }
.dt-btn-back      { border-color: #93c5fd; color: var(--blue); }
 
/* ── Progress ─────────────────────────────────────────────────────────────── */
.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: 'Courier New', monospace;
  font-size: 0.65rem;
  color: var(--ink-faint);
  text-align: right;
  margin-bottom: 0.85rem;
}
 
/* ── Question card ────────────────────────────────────────────────────────── */
.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: 'Courier New', monospace;
  padding: 0.2em 0.65em;
  border-radius: 20px;
  margin-bottom: 0.8rem;
  color: #fff;
}
 
.dt-question {
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
 
.dt-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
.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 {
  font-size: 0.68rem;
  padding: 0.18em 0.6em;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}
 
.dt-tag-blue  { background: #dbeafe; color: #1e40af; }
.dt-tag-blue  { background: #dbeafe; color: #1e40af; }
.dt-tag-purple { background: #ede9fe; color: #5b21b6; }
.dt-tag-purple { background: #ede9fe; color: #5b21b6; }
.dt-tag-green  { background: #dcfce7; color: #166534; }
.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-rationale {
.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; }
  font-size: 0.78rem;
.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; }
  color: var(--ink-soft);
.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; }
  font-style: italic;
.dt-muscle-hint { font-size: 0.72rem; padding: 0.22em 0.55em; border-radius: 4px; margin-bottom: 0.3rem; font-family: 'DM Mono',monospace; }
  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-muscle-hint {
  font-size: 0.72rem;
  padding: 0.22em 0.55em;
  border-radius: 4px;
  margin-bottom: 0.3rem;
  font-family: 'Courier New', monospace;
}
 
.dt-implicated { background: #f0fdf4; color: #166534; }
.dt-implicated { background: #f0fdf4; color: #166534; }
.dt-excluded  { background: #fef2f2; color: #991b1b; }
.dt-excluded  { background: #fef2f2; color: #991b1b; }
/* ── Answer buttons ───────────────────────────────────────────────────────── */
.dt-answers { display: flex; gap: 0.65rem; margin-top: 1.1rem; }
.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 {
.dt-answer-yes { background: #f0fdf4; color: #166634; border-color: #86efac; }
  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: Helvetica, Arial, sans-serif;
}
 
.dt-answer-yes { background: #f0fdf4; color: #166534; 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-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  { 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); }
.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 ──────────────────────────────────────────────────────────── */
/* ── Result card ── */
.dt-card-result { border-color: #86efac; background: #f0fdf4; }
.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; }


.dt-result-name {
/* Satellite TrPs */
  font-size: 1.2rem;
.dt-satellite-section { margin-top: 0.75rem; }
  font-weight: 700;
.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; }
  color: #14532d;
.dt-satellite-grid    { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  margin-bottom: 0.35rem;
.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; }
}


.dt-confidence {
/* Landing page signpost */
  font-family: 'Courier New', monospace;
.dt-landing-panel  { margin-top: 0.85rem; border: 1.5px solid #c7d2fe; border-radius: 8px; overflow: hidden; }
  font-size: 0.68rem;
.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; }
  font-weight: 700;
.dt-landing-body   { background: #eef2ff; padding: 0.65rem 0.8rem; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.55; }
  text-transform: uppercase;
.dt-landing-list  { margin-top: 0.45rem; padding-left: 1.1em; color: #3730a3; }
   letter-spacing: 0.1em;
.dt-landing-list li { margin-bottom: 0.2rem; font-size: 0.76rem; }
  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; }
/* Broad differential reminder */
.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-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-chapter  { font-family: 'Courier New', monospace; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.65rem; }
.dt-broad-reminder-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.dt-also      { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; margin-bottom: 0.75rem; }
.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; }


.dt-wiki-link {
/* Neuro referral */
  display: inline-block;
.dt-neuro-title { font-family: 'DM Serif Display',Georgia,serif; font-size: 1.15rem; color: var(--emergency); margin-bottom: 0.4rem; font-weight: 400; }
  padding: 0.5em 1em;
.dt-neuro-body  { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.65rem; }
  background: #1e3a5f;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  transition: background 0.15s;
  margin-top: 0.25rem;
}


.dt-wiki-link:hover { background: #162d4a; }
/* 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; }


/* ── Overlap card ─────────────────────────────────────────────────────────── */
/* ── Broad differential panel ── */
.dt-card-overlap  { border-color: #d6d3d1; }
.dt-broad-panel { border: 1.5px solid var(--slate-border); border-radius: 12px; overflow: hidden; background: var(--slate-bg); }
.dt-overlap-text  { font-size: 0.9rem; margin-bottom: 0.65rem; line-height: 1.5; }
.dt-broad-header { background: var(--slate); padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dt-screen-list  { font-size: 0.8rem; color: var(--ink-soft); padding-left: 1.1em; margin-bottom: 0.65rem; line-height: 1.8; }
.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 ────────────────────────────────────────────────────────────────── */
/* ── Error ── */
.dt-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; }
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 1em;
  color: #991b1b;
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
}


/* ── Responsive ───────────────────────────────────────────────────────────── */
/* ── Responsive ── */
@media (max-width: 560px) {
@media (max-width: 560px) {
   .dt-redflag-panel    { grid-template-columns: 1fr; }
   .dt-redflag-panel { grid-template-columns: 1fr; }
   .dt-answers         { flex-direction: column; }
  .dt-broad-grid   { grid-template-columns: 1fr; }
   .dt-card             { padding: 1rem 1.1rem; }
   .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"