MediaWiki:Gadget-DiagnosticTree.css: Difference between revisions

From Painwiki
Jump to navigation Jump to search
Newer edit →
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
Line 1: Line 1:
/**
/**
  * DiagnosticTree.css
  * DiagnosticTree.css — v2
  * Copy to: MediaWiki:Gadget-DiagnosticTree.css
  * Copy to: MediaWiki:Gadget-DiagnosticTree.css
  */
  */


/* ── Shell & layout ───────────────────────────────────────────────────────── */
/* ── Variables ────────────────────────────────────────────────────────────── */
.dt-shell {
.dt-shell {
font-family: 'Georgia', serif;
  --emergency:        #b91c1c;
max-width: 680px;
  --emergency-bg:    #fef2f2;
margin: 1.5em auto;
  --emergency-border: #fca5a5;
color: #1a1a2e;
  --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;
 
  max-width: 780px;
  margin: 1.5em auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
}
 
/* ── 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-header {
.dt-flag-column.urgent {
display: flex;
  border-color: var(--urgent-border);
align-items: center;
  background: var(--urgent-bg);
justify-content: space-between;
margin-bottom: 0.6em;
}
}


.dt-region {
.dt-flag-column.all-cleared {
font-size: 0.78em;
  border-color: var(--cleared-border);
font-weight: 700;
  background: var(--cleared-bg);
letter-spacing: 0.12em;
text-transform: uppercase;
color: #555;
}
}


.dt-controls {
.dt-flag-col-header {
display: flex;
  display: flex;
gap: 0.4em;
  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;
}
}


/* ── Progress bar ─────────────────────────────────────────────────────────── */
.dt-flag-column.urgent    .dt-flag-col-header { background: var(--urgent);  }
.dt-progress-wrap {
.dt-flag-column.all-cleared .dt-flag-col-header { background: var(--cleared); }
height: 5px;
 
background: #e8e8e8;
.dt-flag-items { padding: 0.5rem 0; }
border-radius: 3px;
 
overflow: hidden;
/* ── Flag item ────────────────────────────────────────────────────────────── */
margin-bottom: 0.3em;
.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-progress-bar {
.dt-flag-item-body { flex: 1; min-width: 0; }
height: 100%;
 
background: linear-gradient( 90deg, #2980b9, #27ae60 );
.dt-flag-label {
border-radius: 3px;
  font-size: 0.8rem;
transition: width 0.4s ease;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  transition: color 0.2s;
}
}


.dt-step-label {
.dt-flag-item.cleared .dt-flag-label {
font-size: 0.72em;
  color: var(--ink-faint);
color: #888;
  text-decoration: line-through;
text-align: right;
margin-bottom: 1em;
font-family: 'Courier New', monospace;
}
}


/* ── Card ─────────────────────────────────────────────────────────────────── */
.dt-flag-question {
.dt-card {
  font-size: 0.74rem;
border: 2px solid #ccc;
  color: var(--ink-soft);
border-radius: 10px;
  line-height: 1.45;
padding: 1.4em 1.6em;
  margin-top: 0.35rem;
background: #fafafa;
  padding: 0.4rem 0.55rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  background: rgba(0,0,0,0.04);
animation: dt-fadein 0.25s ease;
  border-radius: 5px;
  border-left: 2px solid var(--emergency);
  display: none;
}
}


@keyframes dt-fadein {
.dt-flag-column.urgent .dt-flag-question { border-left-color: var(--urgent); }
from { opacity: 0; transform: translateY(6px); }
.dt-flag-item.expanded .dt-flag-question { display: block; }
to   { opacity: 1; transform: translateY(0); }
 
.dt-flag-rationale {
  font-size: 0.7rem;
  color: var(--ink-soft);
   font-style: italic;
  margin-top: 0.3rem;
  line-height: 1.4;
  display: none;
}
}


/* ── Type badge ───────────────────────────────────────────────────────────── */
.dt-flag-item.expanded .dt-flag-rationale { display: block; }
.dt-type-badge {
 
display: inline-block;
.dt-flag-actions {
color: #fff;
  display: none;
font-size: 0.72em;
  gap: 0.4rem;
font-weight: 700;
  margin-top: 0.45rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25em 0.75em;
border-radius: 20px;
margin-bottom: 0.9em;
font-family: 'Helvetica Neue', sans-serif;
}
}


/* ── Question text ────────────────────────────────────────────────────────── */
.dt-flag-item.expanded .dt-flag-actions { display: flex; }
.dt-question {
 
font-size: 1.08em;
.dt-flag-btn {
line-height: 1.55;
  font-size: 0.7rem;
font-weight: 600;
  font-weight: 700;
color: #1a1a2e;
  padding: 0.25em 0.65em;
margin-bottom: 0.9em;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  transition: all 0.15s;
}
}


/* ── Tags row ─────────────────────────────────────────────────────────────── */
.dt-flag-btn.present {
.dt-tags {
  background: var(--emergency);
display: flex;
  color: #fff;
flex-wrap: wrap;
  border-color: var(--emergency);
gap: 0.4em;
margin-bottom: 0.7em;
}
}


.dt-tag {
.dt-flag-btn.present:hover { filter: brightness(0.9); }
font-size: 0.73em;
 
padding: 0.2em 0.65em;
.dt-flag-btn.absent {
border-radius: 4px;
  background: #fff;
font-family: 'Helvetica Neue', sans-serif;
  color: var(--ink-soft);
font-weight: 600;
  border-color: var(--rule);
}
}


.dt-tag-blue  { background: #dbeeff; color: #1a5276; }
.dt-flag-btn.absent:hover { background: var(--paper-2); }
.dt-tag-purple { background: #f0e6ff; color: #5b2d8e; }
.dt-tag-green  { background: #d5f5e3; color: #1d6a3a; }


/* ── Supporting info ──────────────────────────────────────────────────────── */
.dt-flag-column.urgent .dt-flag-btn.present {
.dt-rationale {
  background: var(--urgent);
font-size: 0.82em;
  border-color: var(--urgent);
color: #555;
font-style: italic;
margin-bottom: 0.6em;
line-height: 1.45;
}
}


.dt-landmark {
/* Referral inline card */
font-size: 0.82em;
.dt-flag-referral {
color: #444;
  margin: 0 0.85rem 0.6rem;
background: #f0ede8;
  padding: 0.6rem 0.75rem;
border-left: 3px solid #a0956e;
  border-radius: 6px;
padding: 0.35em 0.7em;
  background: var(--emergency);
margin-bottom: 0.6em;
  color: #fff;
border-radius: 0 4px 4px 0;
  font-size: 0.75rem;
  line-height: 1.5;
  display: none;
}
}


.dt-positive {
.dt-flag-referral.urgent-ref { background: var(--urgent); }
font-size: 0.82em;
.dt-flag-referral.visible    { display: block; }
color: #1d6a3a;
 
background: #eafaf1;
.dt-flag-referral strong {
border-left: 3px solid #27ae60;
  display: block;
padding: 0.35em 0.7em;
  font-size: 0.78rem;
margin-bottom: 0.6em;
  margin-bottom: 0.25rem;
border-radius: 0 4px 4px 0;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}
}


.dt-muscle-hint {
/* Column cleared message */
font-size: 0.78em;
.dt-panel-cleared-msg {
padding: 0.25em 0.6em;
  display: none;
border-radius: 4px;
  text-align: center;
margin-bottom: 0.35em;
  padding: 0.5rem;
font-family: 'Helvetica Neue', sans-serif;
  font-size: 0.75rem;
  color: var(--cleared);
  font-weight: 600;
}
}


.dt-implicated { background: #eafaf1; color: #1d6a3a; }
.dt-flag-column.all-cleared .dt-panel-cleared-msg { display: block; }
.dt-excluded  { background: #fdf2f2; color: #922b21; }


/* ── Answer buttons ───────────────────────────────────────────────────────── */
/* ── Divider ──────────────────────────────────────────────────────────────── */
.dt-answers {
.dt-divider {
display: flex;
  display: flex;
gap: 0.75em;
  align-items: center;
margin-top: 1.2em;
  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);
}
}


.dt-answer {
/* ── Tree section lock ────────────────────────────────────────────────────── */
flex: 1;
.dt-tree-section {
padding: 0.65em 1em;
  opacity: 0.4;
font-size: 0.95em;
  pointer-events: none;
font-weight: 700;
  transition: opacity 0.4s ease;
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 {
.dt-tree-section.unlocked {
background: #eafaf1;
  opacity: 1;
color: #1d6a3a;
  pointer-events: all;
border-color: #27ae60;
}
}


.dt-answer-yes:hover {
.dt-tree-locked-msg {
background: #27ae60;
  text-align: center;
color: #fff;
  padding: 1.5rem;
transform: translateY(-1px);
  background: var(--paper-2);
box-shadow: 0 3px 8px rgba(39,174,96,0.3);
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-family: 'Courier New', monospace;
}
}


.dt-answer-no {
/* ── Tree header ──────────────────────────────────────────────────────────── */
background: #fdf2f2;
.dt-tree-header {
color: #922b21;
  display: flex;
border-color: #e74c3c;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
}


.dt-answer-no:hover {
.dt-region-label {
background: #e74c3c;
  font-family: 'Courier New', monospace;
color: #fff;
  font-size: 0.65rem;
transform: translateY(-1px);
  letter-spacing: 0.12em;
box-shadow: 0 3px 8px rgba(231,76,60,0.3);
  text-transform: uppercase;
  color: var(--ink-faint);
}
}


/* ── Navigation buttons ───────────────────────────────────────────────────── */
.dt-controls { display: flex; gap: 0.4rem; }
 
.dt-btn {
.dt-btn {
font-size: 0.78em;
  font-size: 0.72rem;
padding: 0.3em 0.75em;
  padding: 0.3em 0.7em;
border-radius: 5px;
  border-radius: 5px;
border: 1px solid #ccc;
  border: 1.5px solid var(--rule);
background: #fff;
  background: #fff;
cursor: pointer;
  cursor: pointer;
color: #444;
  color: var(--ink-soft);
font-family: 'Helvetica Neue', sans-serif;
  font-family: Helvetica, Arial, sans-serif;
transition: background 0.15s;
  font-weight: 500;
  transition: all 0.15s;
}
}


.dt-btn:hover { background: #f0f0f0; }
.dt-btn:hover     { background: var(--paper-2); }
.dt-btn-back      { border-color: #93c5fd; color: var(--blue); }


.dt-btn-back  { border-color: #2980b9; color: #2980b9; }
/* ── Progress ─────────────────────────────────────────────────────────────── */
.dt-btn-reset { border-color: #999; }
.dt-progress-wrap {
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}


/* ── Result card ──────────────────────────────────────────────────────────── */
.dt-progress-bar {
.dt-card-result {
  height: 100%;
border-color: #27ae60;
  background: linear-gradient(90deg, var(--blue), var(--teal));
background: #f2faf4;
  border-radius: 2px;
  transition: width 0.4s ease;
}
}


.dt-result-name {
.dt-step-label {
font-size: 1.25em;
  font-family: 'Courier New', monospace;
font-weight: 700;
  font-size: 0.65rem;
color: #1a5276;
  color: var(--ink-faint);
margin-bottom: 0.4em;
  text-align: right;
  margin-bottom: 0.85rem;
}
}


.dt-confidence {
/* ── Question card ────────────────────────────────────────────────────────── */
font-size: 0.8em;
.dt-card {
font-weight: 700;
  border: 1.5px solid var(--rule);
text-transform: uppercase;
  border-radius: 10px;
letter-spacing: 0.08em;
  padding: 1.25rem 1.4rem;
margin-bottom: 0.6em;
  background: #fff;
font-family: 'Helvetica Neue', sans-serif;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  animation: dt-fadein 0.22s ease;
}
}


.dt-notes {
@keyframes dt-fadein {
font-size: 0.85em;
  from { opacity: 0; transform: translateY(5px); }
color: #444;
  to  { opacity: 1; transform: translateY(0); }
margin-bottom: 0.5em;
font-style: italic;
}
}


.dt-treatment {
.dt-type-badge {
font-size: 0.83em;
  display: inline-flex;
background: #d5f5e3;
  align-items: center;
border-left: 3px solid #1d8348;
  gap: 0.3rem;
padding: 0.35em 0.7em;
  font-size: 0.65rem;
margin-bottom: 0.5em;
  font-weight: 700;
border-radius: 0 4px 4px 0;
  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-chapter {
.dt-question {
font-size: 0.78em;
  font-size: 1.05rem;
color: #666;
  line-height: 1.55;
margin-bottom: 0.7em;
  font-weight: 600;
font-family: 'Helvetica Neue', sans-serif;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
}


.dt-also {
.dt-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
font-size: 0.8em;
 
color: #555;
.dt-tag {
margin-bottom: 0.8em;
  font-size: 0.68rem;
font-style: italic;
  padding: 0.18em 0.6em;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}
}


.dt-wiki-link {
.dt-tag-blue  { background: #dbeafe; color: #1e40af; }
display: inline-block;
.dt-tag-purple { background: #ede9fe; color: #5b21b6; }
margin-top: 0.5em;
.dt-tag-green  { background: #dcfce7; color: #166534; }
padding: 0.55em 1.1em;
 
background: #1a5276;
.dt-rationale {
color: #fff;
  font-size: 0.78rem;
border: none;
  color: var(--ink-soft);
border-radius: 6px;
  font-style: italic;
font-size: 0.88em;
  margin-bottom: 0.55rem;
font-weight: 700;
  line-height: 1.5;
cursor: pointer;
font-family: 'Helvetica Neue', sans-serif;
transition: background 0.15s;
}
}


.dt-wiki-link:hover { background: #154360; }
.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;
}


/* ── Referral card ────────────────────────────────────────────────────────── */
.dt-positive {
.dt-referral-text {
  font-size: 0.76rem;
font-size: 1.05em;
  color: #166534;
font-weight: 600;
  background: #f0fdf4;
margin-bottom: 0.5em;
  border-left: 2.5px solid var(--green);
  padding: 0.35em 0.65em;
  margin-bottom: 0.55rem;
  border-radius: 0 4px 4px 0;
}
}


.dt-referral-action {
.dt-muscle-hint {
font-size: 0.9em;
  font-size: 0.72rem;
font-weight: 700;
  padding: 0.22em 0.55em;
padding: 0.5em 0.8em;
  border-radius: 4px;
background: rgba(0,0,0,0.07);
  margin-bottom: 0.3rem;
border-radius: 5px;
  font-family: 'Courier New', monospace;
margin-bottom: 0.4em;
}
}


.dt-flag-label {
.dt-implicated { background: #f0fdf4; color: #166534; }
font-size: 0.82em;
.dt-excluded  { background: #fef2f2; color: #991b1b; }
color: #666;
 
font-style: italic;
/* ── Answer buttons ───────────────────────────────────────────────────────── */
.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: Helvetica, Arial, sans-serif;
}
}


/* ── Overlap card ─────────────────────────────────────────────────────────── */
.dt-answer-yes { background: #f0fdf4; color: #166534; border-color: #86efac; }
.dt-card-overlap { border-color: #95a5a6; }
.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-size: 1.2rem;
  font-weight: 700;
  color: #14532d;
  margin-bottom: 0.35rem;
}


.dt-overlap-text {
.dt-confidence {
font-size: 0.95em;
  font-family: 'Courier New', monospace;
margin-bottom: 0.7em;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.55rem;
}
}


.dt-screen-list {
.dt-notes    { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.5rem; font-style: italic; line-height: 1.5; }
font-size: 0.85em;
.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; }
color: #444;
.dt-chapter  { font-family: 'Courier New', monospace; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.65rem; }
padding-left: 1.2em;
.dt-also      { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; margin-bottom: 0.75rem; }
margin-bottom: 0.7em;
 
.dt-wiki-link {
  display: inline-block;
  padding: 0.5em 1em;
  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;
}
}


/* ── Error state ──────────────────────────────────────────────────────────── */
.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; }
 
/* ── Error ────────────────────────────────────────────────────────────────── */
.dt-error {
.dt-error {
background: #fdf2f2;
  background: #fef2f2;
border: 1px solid #e74c3c;
  border: 1px solid #fca5a5;
border-radius: 6px;
  border-radius: 6px;
padding: 1em;
  padding: 1em;
color: #922b21;
  color: #991b1b;
font-size: 0.9em;
  font-size: 0.85rem;
font-family: monospace;
  font-family: 'Courier New', 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-answers         { flex-direction: column; }
  .dt-card            { padding: 1rem 1.1rem; }
}
}

Revision as of 22:04, 11 April 2026

/**
 * DiagnosticTree.css — v2
 * Copy to: MediaWiki:Gadget-DiagnosticTree.css
 */

/* ── Variables ────────────────────────────────────────────────────────────── */
.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;

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

/* ── 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: '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-items { padding: 0.5rem 0; }

/* ── Flag item ────────────────────────────────────────────────────────────── */
.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: 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.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);
}

/* 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.visible    { display: block; }

.dt-flag-referral strong {
  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; }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.dt-divider {
  display: flex;
  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 {
  font-family: 'Courier New', 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: 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-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-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-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-excluded   { background: #fef2f2; color: #991b1b; }

/* ── Answer buttons ───────────────────────────────────────────────────────── */
.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: 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-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-size: 1.2rem;
  font-weight: 700;
  color: #14532d;
  margin-bottom: 0.35rem;
}

.dt-confidence {
  font-family: 'Courier New', 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: 'Courier New', 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-block;
  padding: 0.5em 1em;
  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; }

/* ── 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-answers          { flex-direction: column; }
  .dt-card             { padding: 1rem 1.1rem; }
}
Retrieved from "https://painwiki.com/wiki/index.php?title=MediaWiki:Gadget-DiagnosticTree.css&oldid=27"