/* ============================================
   ПСИХОПАТОЛОГИЧЕСКИЙ ПРОТОКОЛ (PPB)
   ============================================ */

#ppb{
 --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

 /* Base colours */
 --bg-page:#f7f9fc; /* light page background */
 --bg-card:#ffffff; /* cards remain white for contrast */
 --bg-muted:#eaf3fb; /* subtle blue tint for muted areas */

 /* Text colours */
 --text:#1f2937; /* slightly softer dark text */
 --text-mut:#64748b; /* muted text, cooler grey */
 --text-dim:#475569; /* dim text for secondary headings */

 /* Borders */
 --border:#dbe2ea; /* lighter borders */
 --border-2:#c7d2da; /* secondary border colour */

 /* Primary brand colour */
 --brand:#0f74aa; /* deep blue tone inspired by Befundomat */
 --brand-50:#dceffd; /* very light blue for header backgrounds */
 --ring:#5e88c5; /* ring colour for focus state */

 /* Shadows & radius */
 --shadow:0 4px 12px rgba(0,0,0,.06); /* softer shadow */
 --radius:14px;

 /* Status colours */
 --ok:#059669; 
 --warn:#d97706; 
 --danger:#dc2626;

 color-scheme: light dark; /* для корректных системных контролов */
}
html[data-theme="dark"] #ppb{
 --bg-page:#0b0e14; 
 --bg-card:#121826; 
 --bg-muted:#101521;

 --text:#e5e7eb; 
 --text-mut:#98a2b3; 
 --text-dim:#cbd5e1;

 --border:#1f2433; 
 --border-2:#2a3245;

 --brand:#60a5fa; 
 --brand-50:#0b1220; 
 --ring:#a78bfa;

 --shadow:0 8px 28px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
 html:not([data-theme="light"]) #ppb{
 --bg-page:#0b0e14; 
 --bg-card:#121826; 
 --bg-muted:#101521;

 --text:#e5e7eb; 
 --text-mut:#98a2b3; 
 --text-dim:#cbd5e1;

 --border:#1f2433; 
 --border-2:#2a3245;

 --brand:#60a5fa; 
 --brand-50:#0b1220; 
 --ring:#a78bfa;

 --shadow:0 8px 28px rgba(0,0,0,.45);
 }
}
#ppb{
 font:14px/1.5 var(--font-sans);
 color:var(--text);
 background:transparent; /* не лезем в фон страницы */
}
#ppb a{ color:var(--brand); text-decoration: none; }
#ppb a:hover{ text-decoration: underline; }
#ppb .ppb-container{ max-width:1320px; margin:22px auto; padding-inline:14px; }
#ppb .appbar{
}
html[data-theme="dark"] #ppb .appbar{ 
 background:linear-gradient(180deg, rgba(18,24,38,.85), rgba(18,24,38,.55));
}
#ppb .appbar-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
#ppb .app-title{ font-weight:800; color:var(--text); }
#ppb .app-actions{ display:flex; gap:8px; flex-wrap:wrap; }

#ppb .btn{
 padding:8px 12px;
 border-radius:8px;
 border:1px solid var(--border);
 background:var(--brand-50);
 color:var(--brand);
 cursor:pointer;
 transition:background-color .15s ease, box-shadow .15s ease;
}
#ppb .btn:hover{
 background:color-mix(in srgb,var(--brand) 20%, var(--brand-50));
 color:var(--brand);
}
#ppb .btn:focus-visible{
 outline:0;
 box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 60%, transparent);
}
#ppb .btn-primary{
 border-color:var(--brand);
 background:var(--brand);
 color:#ffffff;
}
#ppb .btn-danger{
 border-color:var(--danger);
 background:var(--danger);
 color:#ffffff;
}
#ppb input[type=file]{ display:none; }
#ppb .module{
 background:var(--bg-card);
 border:1px solid var(--border);
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 overflow:hidden; margin:18px 0;
}
#ppb .module-header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:12px 14px;
 border-bottom:1px solid var(--border);
 /* Tinted header background for better separation */
 background:var(--brand-50);
}
#ppb .module-title{ display:flex; align-items:center; gap:10px; }
#ppb .module-title h2{ margin:0; font-size:18px; color:var(--text); }
#ppb .normal-button{
 padding:6px 12px;
 border:1px solid var(--brand);
 border-radius:10px;
 /* Use a semi-solid background with white text for clear CTA */
 background:var(--brand);
 color:#ffffff;
 cursor:pointer;
}
/* Hover state becomes slightly lighter */
#ppb .normal-button:hover{
 background:color-mix(in srgb,var(--brand) 90%, #ffffff);
}
#ppb .module-body{ padding:14px; }
#ppb .grid-2, 
#ppb .grid-3, 
#ppb .grid-4{ display:grid; gap:16px; }
#ppb .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#ppb .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
#ppb .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1200px){ #ppb .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ 
 #ppb .grid-4, #ppb .grid-3, #ppb .grid-2{ grid-template-columns:1fr; }
}
#ppb .group{ border:1px dashed var(--border); border-radius:12px; padding:10px; }
#ppb .group-title{ margin:0 0 8px; font-weight:700; color:var(--text-dim); }
#ppb .option{ display:flex; gap:10px; align-items:flex-start; padding:5px 0; color:var(--text); }
#ppb input[type=checkbox],
#ppb input[type=radio]{
 appearance:none; -webkit-appearance:none;
 display:inline-grid; place-items:center; margin:0; cursor:pointer; flex:0 0 auto;
}
#ppb input[type=checkbox]{
 inline-size:18px; block-size:18px; border-radius:6px; border:1.5px solid var(--border-2); background:var(--bg-card);
}
#ppb input[type=checkbox]:checked{
 border-color:var(--brand);
 background:linear-gradient(180deg,var(--brand),#5b8df7);
 box-shadow:inset 0 0 0 2px var(--bg-card);
}
#ppb input[type=radio]{
 inline-size:18px; block-size:18px; border-radius:999px; border:1.5px solid var(--border-2); background:var(--bg-card);
}
#ppb input[type=radio]:checked{
 border-color:var(--brand);
 box-shadow:inset 0 0 0 4.5px var(--brand);
}
#ppb input:focus-visible{
 outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 40%, transparent);
}
#ppb .custom-text{
 width:100%; min-height:36px; padding:8px 10px;
 border-radius:10px; border:1px solid var(--border-2); background:var(--bg-card); color:var(--text);
}
#ppb .custom-text::placeholder{ color:var(--text-mut); }
#ppb .legend{ margin:10px 14px 0; color:var(--text-mut); }
#ppb .severity{ display:flex; gap:6px; flex-wrap:wrap; }
#ppb .severity label{
 display:flex; gap:6px; align-items:center;
 padding:3px 8px; border-radius:999px;
 background:#eef2f7; border:1px solid var(--border);
 font-family:var(--font-mono); cursor:pointer; color:var(--text);
}
html[data-theme="dark"] #ppb .severity label{ background:#1b2335; }
#ppb .severity label:has(input:checked){
 background:color-mix(in srgb,var(--brand) 18%, #eef2f7); border-color:var(--brand);
}
#ppb #resultBar{
 position:fixed; inset-inline:0; bottom:0;
 background:var(--bg-card);
 border-top:1px solid var(--border);
 box-shadow:0 -8px 24px rgba(0,0,0,.06);
 padding:10px; z-index:6;
}
#ppb #FertigerBefund{
 width:100%; min-height:120px;
 border:1px solid var(--border-2); border-radius:10px;
 padding:8px 10px; background:var(--bg-page); color:var(--text);
}
#ppb .result-row{ display:grid; gap:10px; grid-template-columns: 1fr 240px; }
#ppb .result-actions{ display:grid; gap:8px; }
@media (max-width:760px){ #ppb .result-row{ grid-template-columns:1fr; } }
#ppb .collapsed .module-body{ display:none; }
@media print{
 #ppb{ color-scheme: light; }
 #ppb .appbar, 
 #ppb #resultBar,
 #ppb .btn,
 #ppb .normal-button{ display:none !important; }
 #ppb .module{ break-inside:avoid; box-shadow:none; border-color:#ddd; }
 #ppb .module-header{ background:#fff; }
 #ppb .custom-text{ border-color:#ddd; }
}