/* DIAR-UI-4-R1 — Functional Clarity & Explainability Redesign */
:root{
    --diar4-ink:#143d49;
    --diar4-muted:#667f88;
    --diar4-line:#d7e5e8;
    --diar4-soft:#f4f9fa;
    --diar4-teal:#17766f;
    --diar4-teal-dark:#0d4551;
    --diar4-blue:#276f9b;
    --diar4-amber:#a96f12;
    --diar4-purple:#6c4ba8;
    --diar4-danger:#a63746;
}
.diar-functional-page{min-width:0;font-size:16px;line-height:1.6;color:var(--diar4-ink)}
[dir="rtl"] .diar-functional-page{font-size:17px}
.diar-functional-page *{box-sizing:border-box}
.diar-functional-page p{max-width:82ch}

/* One understandable five-step workflow across every DIAR page. */
.diar-workflow-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(170px,1fr));gap:8px!important;padding:8px!important;border:1px solid var(--diar4-line)!important;background:#fff!important;border-radius:18px!important;box-shadow:0 8px 25px rgba(27,67,81,.055)!important;overflow-x:auto}
.diar-workflow-tabs a{display:grid!important;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;align-items:center!important;justify-content:stretch!important;column-gap:9px!important;min-height:62px!important;padding:9px 11px!important;border-radius:13px!important;color:#355965!important;text-align:start!important}
.diar-workflow-tabs a:hover{background:#eef7f7!important;color:#155f59!important}
.diar-workflow-tabs a.active{background:linear-gradient(135deg,#146e68,#0f5660)!important;color:#fff!important;box-shadow:0 7px 18px rgba(17,92,91,.2)}
.workflow-tab-step{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e6f1f2;color:#2d6870;font-size:14px}
.diar-workflow-tabs a.active .workflow-tab-step{background:rgba(255,255,255,.2);color:#fff}
.diar-workflow-tabs a>span{font-size:14px;font-weight:900;line-height:1.25;white-space:normal!important}
.diar-workflow-tabs .tab-meta{justify-self:start;font-size:10px;line-height:1.2;padding:2px 7px;background:#eef3f5;color:#667b83}
.diar-workflow-tabs a.active .tab-meta{background:rgba(255,255,255,.16);color:#fff}

.clarity-hero{background:linear-gradient(135deg,#0a3542 0%,#125b65 62%,#17766f 100%)!important}
.methodology-boundary{border-color:rgba(255,255,255,.3)!important;background:rgba(255,255,255,.1)!important}
.section-kicker{display:block;margin-bottom:5px;color:var(--diar4-teal);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

.method-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.method-steps article{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:17px;border:1px solid var(--diar4-line);border-radius:17px;background:linear-gradient(180deg,#fff,#f7fbfb)}
.method-no,.comparison-flow article>b,.investigation-guide article>b{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#dff1ef;color:#155f59;font-size:16px;font-weight:900}
.method-steps article div,.comparison-flow article div,.investigation-guide article div{display:grid;gap:4px;min-width:0}
.method-steps strong,.comparison-flow strong,.investigation-guide strong{font-size:17px;line-height:1.3;color:#143d49}
.method-steps p,.comparison-flow span,.investigation-guide span{margin:0;color:#667e86;font-size:14px;line-height:1.55}

.grain-explainer{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px;align-items:stretch}
.grain-explainer>div{display:grid;gap:4px;min-width:0;padding:13px;border:1px solid #d9e7e9;border-radius:14px;background:#f7fbfb;text-align:center}
.grain-explainer span{font-size:12px;color:#6b8088}
.grain-explainer strong{font-size:13px;overflow-wrap:anywhere;color:#164954}
.plain-example,.clarity-note,.policy-example{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:15px 17px;border:1px solid #cce2df;border-radius:15px;background:#edf8f6}
.plain-example>span,.clarity-note strong,.policy-example b{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:#d5eeea;color:#155f59;font-size:12px;font-weight:900}
.plain-example p,.clarity-note span,.policy-example span{margin:0;color:#355f67;line-height:1.6}

.overview-kpis article:nth-child(1){border-top:4px solid var(--diar4-blue)}
.overview-kpis article:nth-child(2){border-top:4px solid var(--diar4-teal)}
.overview-kpis article:nth-child(3){border-top:4px solid var(--diar4-purple)}
.overview-kpis article:nth-child(4){border-top:4px solid var(--diar4-amber)}
.workflow-status-section .pipeline-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.technical-tools-panel{padding:0!important;overflow:hidden}
.technical-tools-panel>summary{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 21px;cursor:pointer;list-style:none;background:#f7fbfb}
.technical-tools-panel>summary::-webkit-details-marker{display:none}
.technical-tools-panel>summary span{display:grid;gap:3px}.technical-tools-panel>summary small{color:#6a8188;font-weight:500}.technical-tools-panel>summary b{font-size:22px}
.technical-tools-panel[open]>summary{border-bottom:1px solid var(--diar4-line)}
.technical-tools-panel>.quick-link-grid,.technical-tools-panel>.binding-list,.technical-tools-panel>.grain-flow{margin:18px}

/* Statistical baseline education. */
.metric-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.metric-guide-grid article{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 10px;padding:16px;border:1px solid var(--diar4-line);border-radius:16px;background:#fbfdfd}
.metric-guide-grid article>span{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:#e7f3f2;color:#176a64;font-weight:900}
.metric-guide-grid strong{font-size:17px}.metric-guide-grid p{margin:0;color:#6a8088;font-size:14px}
.baseline-explainer .clarity-note{margin-bottom:0}

/* Candidate comparison explanation. */
.comparison-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.comparison-flow article{display:flex;gap:11px;padding:16px;border:1px solid var(--diar4-line);border-radius:16px;background:#fbfdfd}
.signal-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.signal-guide-grid article{display:grid;gap:6px;min-width:0;padding:16px;border:1px solid var(--diar4-line);border-radius:16px;background:#fff}
.signal-guide-grid article>span{font-size:10px;font-weight:900;letter-spacing:.05em;color:#6a8188;overflow-wrap:anywhere}
.signal-guide-grid strong{font-size:18px;color:#143d49}.signal-guide-grid p{margin:0;color:#677e86;font-size:14px}
.candidate-columns-preview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:12px}
.candidate-columns-preview span{padding:11px;border-radius:11px;background:#eef5f6;color:#42636c;font-size:13px;font-weight:900;text-align:center}

/* Investigation clarity. */
.diar-investigations-page{display:grid;gap:20px}
.investigation-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.investigation-guide article{display:flex;gap:11px;padding:16px;border:1px solid var(--diar4-line);border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(33,73,89,.045)}
.investigation-boundary{margin:0;background:#fff8e7;border-color:#ead9a6}
.investigation-boundary strong{background:#f5e7b9;color:#705813}
.investigation-empty{padding:30px!important}

/* Detection policy: clearly separate learned baseline from governance settings. */
.policy-explainer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.9fr);gap:14px;padding:20px;border:1px solid var(--diar4-line);border-radius:19px;background:#fff;box-shadow:0 9px 25px rgba(38,67,78,.05)}
.policy-principle{min-width:0;padding:4px 3px}.policy-principle h3{margin:4px 0 7px;color:#143d49;font-size:24px;line-height:1.25}.policy-principle p{margin:0;color:#637b84;font-size:16px}
.policy-do-dont{display:grid;grid-template-columns:1fr;gap:9px}.policy-do-dont article{display:grid;gap:5px;padding:13px 15px;border-radius:14px}.policy-do{background:#ecf8f4;border:1px solid #c9e7dc}.policy-dont{background:#fff4ea;border:1px solid #ead5bd}.policy-do-dont strong{font-size:15px}.policy-do-dont span{font-size:13px;line-height:1.5;color:#536c75}
.policy-example{grid-column:1/-1;margin:0;background:#eef5fb;border-color:#cfdeeb}.policy-example b{background:#dceaf5;color:#315e80}
.diar4a-page>.diar-workflow-tabs{margin-bottom:0}

/* Readability and responsive behaviour. */
@media(max-width:1450px){
    .diar-workflow-tabs{grid-template-columns:repeat(5,minmax(155px,1fr))}
    .grain-explainer{grid-template-columns:repeat(4,minmax(0,1fr))}
    .workflow-status-section .pipeline-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1150px){
    .method-steps,.comparison-flow,.metric-guide-grid,.investigation-guide{grid-template-columns:repeat(2,minmax(0,1fr))}
    .signal-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .policy-explainer{grid-template-columns:1fr}
    .policy-example{grid-column:auto}
    .candidate-columns-preview{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
    .diar-workflow-tabs{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory}
    .diar-workflow-tabs a{flex:0 0 210px;scroll-snap-align:start}
    .grain-explainer{grid-template-columns:repeat(2,minmax(0,1fr))}
    .workflow-status-section .pipeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .plain-example,.clarity-note,.policy-example{flex-direction:column}
}
@media(max-width:700px){
    .clarity-hero h1{font-size:30px!important;line-height:1.08}
    .method-steps,.comparison-flow,.metric-guide-grid,.investigation-guide,.signal-guide-grid,.workflow-status-section .pipeline-grid,.candidate-columns-preview{grid-template-columns:1fr}
    .grain-explainer{grid-template-columns:1fr 1fr}
    .diar-workflow-tabs a{flex-basis:184px;min-height:58px!important}
    .diar-workflow-tabs .tab-meta{display:block!important}
    .policy-explainer{padding:16px}.policy-principle h3{font-size:21px}
}
@media(max-width:430px){
    .grain-explainer{grid-template-columns:1fr}
    .method-steps article,.comparison-flow article,.investigation-guide article{padding:14px}
    .workflow-tab-step{width:30px;height:30px}
}
