/* =====================================================================================
   "Gesundheitsprofil" — Hub-Widget für alle eingeloggten Mitglieder (18.09.2026)
   ---------------------------------------------------------------------------------------
   Docking: viertes ".cpanel" im bestehenden ".cockpit"-Bereich von hub.html, direkt nach
   #diaryPanel. Bewusst DIESELBE ruhige/vertrauliche Design-Sprache wie das Tagebuch
   (siehe assets/css/diary.css Kopf-Kommentar) — kein neuer Stil, nur ein neues Klassen-
   Präfix ".health-", damit beide Panels sichtbar zur selben "persönliches Heft"-Familie
   gehören (warme Pergament-Töne, Buchrücken-Streifen, gleiche Marken-Tokens).

   Klassen-Präfix .health- , additiv, eigene Datei. Marken-Tokens mit Hex-Fallback.
   Bewusst Flexbox statt CSS-Grid (siehe PAXAN_BRAIN.md §1, Baumeister-Regel). */

.health-panel{
  flex:1 1 100%;
  position:relative;
  background:linear-gradient(155deg,#FBF8F1,#F3EEDD);
  border:1px solid rgba(138,110,27,.22);
  border-radius:14px;
  padding:24px 26px 24px 32px;
  overflow:hidden;
}
.health-panel::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:8px;
  background:linear-gradient(180deg,var(--gold-deep,#8A6E1B),#5b4b12);
  border-radius:14px 0 0 14px;
}
.health-panel-inner{position:relative}

.health-h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim,#6A655C);margin:0 0 6px;
}
.health-intro{
  margin:0 0 4px;font-family:var(--f-s,'Instrument Serif',Georgia,serif);font-style:italic;
  font-size:1.05rem;color:#4a4437;
}
.health-disclaimer{
  margin:0 0 18px;font-size:.76rem;color:var(--dim,#6A655C);font-style:italic;
}

/* ruhige, ernste Randnotiz nach "flagged" -- KEIN Alarm-Rot, gleiche Amber-Sprache wie
   .diary-modal-warning (dort: "wichtig", nicht "gefährlich") */
.health-followup{
  background:#F6ECC9;border:1px solid #b99a3f;border-radius:10px;padding:.9rem 1rem;
  margin:0 0 18px;
}
.health-followup p{margin:0 0 .8rem;font-size:.86rem;line-height:1.55;color:#3c3106}
.health-followup button{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid #5b4b12;background:#fff;color:#5b4b12;
  border-radius:20px;padding:.5rem 1rem;min-height:38px;cursor:pointer;
}
.health-followup button:hover{background:#5b4b12;color:#fff}

.health-label{
  display:block;font-family:var(--f-b,'Archivo',sans-serif);font-weight:600;font-size:.85rem;
  color:var(--ink,#0A0A0A);margin-bottom:14px;
}
.health-textarea{
  width:100%;min-height:70px;margin-top:.4rem;border:1px solid rgba(138,110,27,.25);border-radius:10px;
  padding:.7rem .8rem;font-family:var(--f-b,'Archivo',sans-serif);font-size:.9rem;font-weight:400;
  background:#FFFEFA;color:var(--ink,#0A0A0A);resize:vertical;line-height:1.5;
}
.health-textarea:focus{outline:none;border-color:var(--gold-deep,#8A6E1B)}

.health-tags-label{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim,#6A655C);margin:4px 0 10px;
}
.health-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:18px}
.health-chip-row button{
  min-height:44px;padding:.55rem 1rem;border-radius:20px;border:1px solid rgba(138,110,27,.3);
  background:#fff;font-family:var(--f-b,'Archivo',sans-serif);font-size:.85rem;color:var(--ink,#0A0A0A);
  cursor:pointer;transition:.15s;
}
.health-chip-row button:hover{border-color:var(--gold-deep,#8A6E1B)}
.health-chip-row button.sel{background:var(--gold-deep,#8A6E1B);color:#fff;border-color:var(--gold-deep,#8A6E1B)}

.health-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.health-save{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;border:none;border-radius:20px;padding:.6rem 1.1rem;min-height:40px;
  background:var(--ink,#0A0A0A);color:var(--paper,#F5F3EE);cursor:pointer;
}
.health-save:hover:not(:disabled){background:var(--gold-deep,#8A6E1B)}
.health-save:disabled{opacity:.5;cursor:not-allowed}
.health-msg{font-size:.78rem;color:var(--dim,#6A655C)}
.health-msg.ok{color:var(--ok,#3F7A4B)}
.health-msg.err{color:#8a1f1f}

@media(prefers-reduced-motion:reduce){
  .health-chip-row button,.health-save{transition:none}
}
@media(max-width:480px){
  .health-panel{padding:20px 18px 20px 24px}
}