/* نبض | Pulse Tools — shared styles */
:root{
  --deep:#0B3B3C; --emer:#0E8C74; --mint:#5FD3B0; --amber:#F2A93B;
  --sand:#F6F3EC; --ink:#16292A; --mist:#E3ECEA; --white:#fff;
  --muted:#5C6F6E; --card:#FBFAF6; --prio:#FCEBCD; --prio-ink:#5A3B00;
  --radius:14px; --shadow:0 8px 28px rgba(11,59,60,.08);
  --font-ar:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-en:'IBM Plex Sans',system-ui,sans-serif;
  --max:820px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}
body{
  font-family:var(--font-en); color:var(--ink); background:var(--sand);
  line-height:1.55; min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
  width:100%;
  position:relative;
}
html[lang="ar"] body, body.rtl{font-family:var(--font-ar); direction:rtl}
body.ltr{font-family:var(--font-en); direction:ltr}
a{color:var(--emer); text-underline-offset:3px}
a:hover{color:var(--deep)}
img{max-width:100%; height:auto; display:block}
button,input,select{font:inherit}

/* Header */
.site-header{
  background:var(--deep); color:var(--sand);
  padding:.85rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  width:100%;
  max-width:100%;
}
.site-header .brand{
  display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit;
  min-width:0; max-width:100%;
}
.site-header .brand img{height:36px; width:auto; max-width:min(180px, 45vw)}
.site-header .brand .tag{
  font-size:.78rem; font-weight:500; color:var(--mint); opacity:.95;
  border-inline-start:1px solid rgba(95,211,176,.35); padding-inline-start:.75rem;
}
.header-actions{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.lang-toggle{
  appearance:none; border:1.5px solid var(--mint); background:transparent; color:var(--sand);
  border-radius:999px; padding:.35rem .9rem; font-size:.85rem; font-weight:600; cursor:pointer;
}
.lang-toggle:hover,.lang-toggle:focus-visible{background:rgba(95,211,176,.15); outline:2px solid var(--mint); outline-offset:2px}
.nav-link{color:var(--sand); text-decoration:none; font-size:.88rem; font-weight:500; opacity:.9}
.nav-link:hover{color:var(--mint); opacity:1}

main{
  flex:1; width:100%; max-width:var(--max);
  margin-inline:auto; padding:1.5rem 1.25rem 3rem;
  min-width:0;
}
main.wide{max-width:min(960px, 100%)}

/* Footer */
.site-footer{
  background:var(--deep); color:rgba(246,243,236,.75); font-size:.8rem;
  padding:1.4rem 1.25rem; text-align:center; line-height:1.6;
  width:100%; max-width:100%;
}
.site-footer a{color:var(--mint)}
.site-footer .disc{margin-top:.6rem; max-width:640px; margin-inline:auto; font-size:.72rem; opacity:.85}

/* Hub */
.hub-hero{text-align:center; margin-bottom:2rem}
.hub-hero .eyebrow{
  display:inline-block; background:var(--amber); color:var(--deep);
  font-weight:700; font-size:.78rem; padding:.3rem .85rem; border-radius:999px; margin-bottom:.9rem;
}
.hub-hero h1{font-size:clamp(1.6rem,4vw,2.15rem); color:var(--deep); line-height:1.25; margin-bottom:.5rem}
.hub-hero p{color:var(--muted); max-width:36rem; margin-inline:auto; font-size:1.02rem}
.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap:1rem;
  width:100%;
  max-width:100%;
}
.tool-card{
  background:var(--white); border:1px solid var(--mist); border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.55rem;
  transition:transform .15s, border-color .15s;
  min-width:0; /* prevent grid blowout */
  max-width:100%;
}
.tool-card:hover{transform:translateY(-2px); border-color:var(--mint)}
.tool-card .badge{
  align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.2rem .55rem; border-radius:6px;
}
.tool-card .badge.live{background:var(--emer); color:#fff}
.tool-card .badge.soon{background:var(--mist); color:var(--muted)}
.tool-card .badge.ext{background:transparent; color:var(--muted); border:1.5px solid var(--mist); letter-spacing:.02em}
.tool-card.external{border-style:dashed; background:var(--card)}
.tool-card.external:hover{border-color:var(--emer); border-style:solid}
.tool-card .site-hint{font-size:.75rem; color:var(--muted); font-weight:500}
.tool-card h2{font-size:1.1rem; color:var(--deep); line-height:1.35}
.tool-card h2 .ar-title{display:block; font-size:1.05rem; color:var(--emer); margin-top:.15rem}
html[lang="en"] .tool-card h2 .ar-title{font-size:.95rem; font-weight:600}
.tool-card p{font-size:.9rem; color:var(--muted); flex:1}
.tool-card .cta{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.4rem;
  font-weight:700; font-size:.92rem; text-decoration:none; color:var(--deep);
}
.tool-card.live .cta{color:var(--emer)}
.tool-card.soon{opacity:.88}
.tool-card.soon:hover{transform:none; border-color:var(--mist)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:0; border-radius:10px; padding:.7rem 1.2rem; font-weight:700; font-size:.95rem;
  cursor:pointer; text-decoration:none; transition:background .15s, transform .1s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--emer); color:#fff}
.btn-primary:hover{background:#0a7a65; color:#fff}
.btn-deep{background:var(--deep); color:var(--sand)}
.btn-deep:hover{background:#083032; color:var(--sand)}
.btn-ghost{background:transparent; color:var(--deep); border:1.5px solid var(--mist)}
.btn-ghost:hover{border-color:var(--emer); color:var(--emer)}
.btn-amber{background:var(--amber); color:var(--deep)}
.btn-amber:hover{filter:brightness(.95); color:var(--deep)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem}

/* Tool screens */
.screen{display:none}
.screen.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.progress-wrap{margin-bottom:1.25rem}
.progress-meta{display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--muted); margin-bottom:.4rem; font-weight:600}
.progress-bar{height:8px; background:var(--mist); border-radius:999px; overflow:hidden}
.progress-bar > i{display:block; height:100%; background:linear-gradient(to inline-end,var(--emer),var(--mint)); border-radius:999px; width:0; transition:width .3s ease}

.panel{
  background:var(--white); border:1px solid var(--mist); border-radius:var(--radius);
  padding:1.4rem 1.35rem; box-shadow:var(--shadow);
}
.panel h1{font-size:clamp(1.35rem,3.5vw,1.75rem); color:var(--deep); line-height:1.3; margin-bottom:.5rem}
.panel .lead{color:var(--muted); margin-bottom:1rem}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 1.2rem}
.chip{
  font-size:.75rem; font-weight:700; padding:.28rem .7rem; border-radius:999px;
  background:var(--mist); color:var(--deep);
}
.chip.amber{background:var(--amber)}
.chip.mint{background:rgba(95,211,176,.25); color:var(--deep)}

.area-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--deep); color:var(--sand); font-size:.78rem; font-weight:700;
  padding:.3rem .7rem; border-radius:8px; margin-bottom:.85rem;
}
.area-pill span{color:var(--mint); font-weight:500}
.q-num{font-size:.8rem; font-weight:700; color:var(--emer); margin-bottom:.35rem}
.q-text{font-size:1.12rem; font-weight:600; color:var(--deep); line-height:1.45; margin-bottom:1.1rem}

.likert{display:grid; gap:.55rem}
.likert label{
  display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start;
  background:var(--card); border:2px solid var(--mist); border-radius:12px;
  padding:.85rem 1rem; cursor:pointer; transition:border-color .15s, background .15s;
}
.likert label:hover{border-color:var(--mint)}
.likert label:has(input:checked),.likert label.selected{
  border-color:var(--emer); background:rgba(14,140,116,.08);
}
.likert input{position:absolute; opacity:0; pointer-events:none}
.likert .radio{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--emer);
  margin-top:2px; flex:none; position:relative;
}
.likert label.selected .radio::after,
.likert label:has(input:checked) .radio::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--emer);
}
.likert .opt-title{font-weight:700; color:var(--deep); font-size:.98rem}
.likert .opt-desc{font-size:.82rem; color:var(--muted); margin-top:.15rem}

/* Results */
.score-hero{
  display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1.25rem;
}
@media(min-width:560px){
  .score-hero{grid-template-columns:auto 1fr; align-items:center}
}
.score-ring{
  width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--emer) calc(var(--pct)*1%), var(--mist) 0);
  display:grid; place-items:center; margin-inline:auto;
}
.score-ring > div{
  width:92px; height:92px; border-radius:50%; background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-ring .big{font-size:1.6rem; font-weight:800; color:var(--deep); line-height:1}
.score-ring .of{font-size:.72rem; color:var(--muted); font-weight:600}
.band-badge{
  display:inline-block; font-weight:800; font-size:1.05rem; padding:.4rem .9rem;
  border-radius:10px; color:#fff; margin-bottom:.4rem;
}
.band-badge.emerging{background:var(--amber); color:var(--deep)}
.band-badge.developing{background:var(--emer)}
.band-badge.established{background:var(--deep)}
.band-hook{font-weight:700; color:var(--deep); margin-bottom:.35rem}
.band-next{color:var(--muted); font-size:.95rem}

.bars{display:grid; gap:.75rem; margin:1.25rem 0}
.bar-row{display:grid; gap:.3rem}
.bar-label{display:flex; justify-content:space-between; font-size:.88rem; font-weight:700; color:var(--deep)}
.bar-label .prio-tag{
  font-size:.7rem; background:var(--prio); color:var(--prio-ink);
  padding:.15rem .45rem; border-radius:5px; font-weight:700;
}
.bar-track{height:12px; background:var(--mist); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; border-radius:999px; background:var(--emer); transition:width .5s ease}
.bar-fill.weak{background:var(--amber)}

.tips-block{margin-top:1.4rem}
.tips-block h2{font-size:1.1rem; color:var(--deep); margin-bottom:.75rem}
.tip-card{
  background:var(--card); border:1px solid var(--mist); border-radius:12px;
  padding:1rem 1.1rem; margin-bottom:.7rem;
}
.tip-card h3{font-size:.95rem; color:var(--emer); margin-bottom:.5rem}
.tip-card ol{padding-inline-start:1.2rem; color:var(--ink); font-size:.9rem}
.tip-card li{margin-bottom:.35rem}
.tip-note{
  background:var(--prio); color:var(--prio-ink); border-radius:10px;
  padding:.75rem 1rem; font-size:.88rem; font-weight:600; margin:1rem 0;
}

.cta-box{
  background:var(--deep); color:var(--sand); border-radius:var(--radius);
  padding:1.25rem 1.3rem; margin-top:1.5rem;
}
.cta-box h2{font-size:1.05rem; margin-bottom:.4rem; color:var(--sand)}
.cta-box p{font-size:.9rem; opacity:.9; margin-bottom:1rem; color:rgba(246,243,236,.88)}
.cta-box .btn-row .btn{flex:1; min-width:140px}
.cta-box a.btn-primary{background:var(--amber); color:var(--deep)}
.cta-box a.btn-primary:hover{filter:brightness(.96); color:var(--deep)}
.cta-box a.btn-ghost{border-color:rgba(246,243,236,.35); color:var(--sand)}
.cta-box a.btn-ghost:hover{border-color:var(--mint); color:var(--mint)}

.disclaimer{font-size:.75rem; color:var(--muted); margin-top:1.25rem; line-height:1.5}

@media print{
  .site-header .header-actions, .no-print, .lang-toggle, .nav-link{display:none!important}
  body{background:#fff}
  .panel,.tip-card,.cta-box{box-shadow:none; break-inside:avoid}
  .cta-box{border:1px solid #ccc; color:#000; background:#fff}
  .cta-box h2,.cta-box p{color:#000}
  .site-footer{color:#333; background:#fff; border-top:1px solid #ddd}
}

@media(max-width:480px){
  main{padding:1.1rem 1rem 2.5rem}
  .panel{padding:1.1rem 1rem}
  .likert label{padding:.7rem .8rem}
}

/* ---- Shared form & builder styles ---- */
.field{display:grid; gap:.35rem; margin-bottom:.85rem}
.field label{font-size:.82rem; font-weight:700; color:var(--deep)}
.field .hint{font-size:.75rem; color:var(--muted); font-weight:500}
.field input,.field textarea,.field select{
  width:100%; max-width:100%; border:1.5px solid var(--mist); border-radius:10px;
  padding:.65rem .8rem; background:var(--white); color:var(--ink); font:inherit;
}
.field textarea{min-height:72px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--mint); outline-offset:1px; border-color:var(--emer);
}
.field-row{display:grid; gap:.75rem}
@media(min-width:640px){
  .field-row.cols-2{grid-template-columns:1fr 1fr}
  .field-row.cols-3{grid-template-columns:1fr 1fr 1fr}
}
.option-card{
  border:1px solid var(--mist); border-radius:12px; padding:1rem; background:var(--card); margin-bottom:.75rem;
}
.option-card .opt-head{display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap}
.option-card h3{font-size:.95rem; color:var(--deep); margin:0}
.warn-box{
  background:#FCEBCD; color:#5A3B00; border-radius:10px; padding:.7rem .9rem;
  font-size:.85rem; font-weight:600; margin:.6rem 0;
}
.ok-box{
  background:#D6F3E9; color:#0A6B58; border-radius:10px; padding:.7rem .9rem;
  font-size:.85rem; font-weight:600; margin:.6rem 0;
}
.tool-nav{
  display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0 0; font-size:.82rem;
}
.tool-nav a{
  color:var(--mint); text-decoration:none; border:1px solid rgba(95,211,176,.35);
  padding:.25rem .55rem; border-radius:999px;
}
.tool-nav a:hover{background:rgba(95,211,176,.12); color:var(--sand)}
.cta-box .tool-nav a{color:var(--mint)}

/* Maturity 1-5 */
.band-badge.m1{background:#C45C26}
.band-badge.m2{background:var(--amber); color:var(--deep)}
.band-badge.m3{background:#2F7D4F}
.band-badge.m4{background:var(--emer)}
.band-badge.m5{background:var(--deep)}

/* RACI matrix */
.matrix-wrap{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; margin:1rem 0}
.raci-table{border-collapse:collapse; width:100%; min-width:480px; background:var(--white)}
.raci-table th,.raci-table td{
  border:1px solid var(--mist); padding:.35rem; text-align:center; vertical-align:middle;
  font-size:.82rem;
}
.raci-table th{background:var(--deep); color:var(--sand); font-weight:700}
.raci-table th.row-head,.raci-table td.row-head{
  text-align:start; min-width:140px; max-width:220px; background:var(--card); color:var(--ink); font-weight:600;
}
.raci-table input.cell-label{
  width:100%; border:0; background:transparent; font:inherit; font-weight:600; color:var(--ink); padding:.25rem;
}
.raci-cell{
  width:48px; height:40px; border:0; border-radius:8px; cursor:pointer; font-weight:800;
  background:var(--sand); color:var(--deep); font-size:.9rem;
}
.raci-cell[data-v="R"]{background:#0E8C74; color:#fff}
.raci-cell[data-v="A"]{background:#0B3B3C; color:#5FD3B0}
.raci-cell[data-v="C"]{background:#F2A93B; color:#0B3B3C}
.raci-cell[data-v="I"]{background:#E3ECEA; color:#16292A}
.raci-cell.warn{outline:2px solid #C45C26; outline-offset:1px}

/* Decision card print preview */
.print-card{
  border:1px solid var(--mist); border-radius:12px; background:#fff; padding:1.1rem 1.2rem; margin-top:1rem;
}
.print-card h2{font-size:1.15rem; color:var(--deep); margin-bottom:.35rem}
.print-card .meta{font-size:.8rem; color:var(--muted); margin-bottom:.8rem}
.print-card h3{font-size:.88rem; color:var(--emer); margin:0.8rem 0 .3rem; text-transform:none}
.print-card p,.print-card li{font-size:.9rem; line-height:1.45}
.print-card ul{padding-inline-start:1.2rem; margin:.2rem 0}

/* OKR tree */
.okr-tree{display:grid; gap:.75rem}
.okr-node{
  border:1px solid var(--mist); border-radius:12px; background:var(--white); padding:.9rem 1rem;
  border-inline-start:4px solid var(--emer);
}
.okr-node.goal{border-inline-start-color:var(--amber); background:var(--card)}
.okr-node.obj{border-inline-start-color:var(--deep); margin-inline-start:.5rem}
.okr-node.kr{border-inline-start-color:var(--mint); margin-inline-start:1rem}
.okr-node.init{border-inline-start-color:#8AABB0; margin-inline-start:1.5rem}
.okr-node .node-type{font-size:.7rem; font-weight:800; letter-spacing:.04em; color:var(--emer); text-transform:uppercase}
.okr-children{display:grid; gap:.6rem; margin-top:.65rem}
.mini-btns{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem}
.btn-sm{padding:.35rem .65rem; font-size:.78rem; border-radius:8px}

.toolbar{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; align-items:center}
.level-pills{display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 1rem}
.level-pills span{
  font-size:.72rem; font-weight:700; padding:.25rem .55rem; border-radius:999px; color:#fff;
}
.level-pills .l1{background:#C45C26}.level-pills .l2{background:var(--amber); color:var(--deep)}
.level-pills .l3{background:#2F7D4F}.level-pills .l4{background:var(--emer)}.level-pills .l5{background:var(--deep)}

@media print{
  .toolbar,.mini-btns,.field input,.field textarea,.no-print{display:none!important}
  .print-only{display:block!important}
  .raci-table{min-width:0}
  .okr-node{break-inside:avoid}
}