/* MTWAFIQ v20.43 · Anti-Office Politics, the interactive guide (office-politics.html, EN + AR) */
.aop-wrap{padding:28px 0 56px}
.aop-intro .lead{max-width:880px}
.aop-prog{font:600 .86rem var(--f-body);color:var(--muted);margin:8px 0}
.aop-before{border:1px solid var(--border);border-radius:14px;padding:12px 16px;background:var(--surface);margin:14px 0 22px}
.aop-before summary{font-weight:700;cursor:pointer;color:var(--heading)}
.aop-before ul{margin:10px 0 0;padding-inline-start:20px;display:grid;gap:6px}
.aop-way{margin:26px 0}.aop-way h2{font-size:1.25rem;margin:0 0 12px}
.aop-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.aop-aud{border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--surface)}
.aop-aud h3{margin:0 0 6px;font-size:1.05rem}.aop-aud p{margin:0 0 10px}
.aop-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.aop-path a{display:grid;gap:4px;border:1px solid var(--border);border-radius:14px;padding:14px;text-decoration:none;color:inherit;background:var(--surface);height:100%}
.aop-path a:hover,.aop-tile:hover,.aop-card:hover{border-color:#1FB5B2}
.aop-path b{color:var(--heading)}.aop-path small{color:var(--muted)}
.aop-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.aop-tile{display:grid;gap:4px;border:1px solid var(--border);border-radius:14px;padding:14px;text-decoration:none;color:inherit;background:var(--surface)}
.aop-tile>span:first-child{font-size:1.4rem}.aop-tile b{color:var(--heading)}.aop-tile small{color:var(--muted)}
.aop-crumbs{margin:0 0 12px;font-size:.88rem}
.aop-lh h2{margin:0 0 6px}.aop-lh p{margin:0 0 8px}
.aop-flt{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:12px 0 16px}
.aop-flt label{display:grid;gap:3px;font:600 .76rem var(--f-body);color:var(--muted)}
.aop-flt select{font:500 .86rem var(--f-body);padding:6px 8px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);max-width:220px}
.aop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.aop-card{display:grid;gap:6px;border:1px solid var(--border);border-radius:14px;padding:14px;text-decoration:none;color:inherit;background:var(--surface)}
.aop-card.done{border-inline-start:4px solid #4CAE3F}
.aop-ck{font:600 .74rem var(--f-body);color:var(--muted)}.aop-card b{color:var(--heading)}.aop-meta{font-size:.78rem;color:var(--muted)}
.aop-case{border:1px solid var(--border);border-radius:18px;padding:20px;background:var(--surface);max-width:960px}
.aop-case h2{margin:4px 0 12px}.aop-case h3{margin:20px 0 8px;font-size:1.02rem}.aop-case h4{margin:14px 0 6px;font-size:.95rem}
.aop-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}.aop-chips span{font:600 .74rem var(--f-body);border-radius:99px;padding:2px 10px;background:var(--chip,rgba(31,181,178,.12))}
.aop-id{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.aop-you{font-weight:600}
.aop-var{border-inline-start:3px solid #F5B301;padding:4px 12px;margin:10px 0;background:color-mix(in srgb,#F5B301 8%,transparent);border-radius:8px}
.aop-who{display:grid;gap:8px;margin:0}.aop-who div{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:10px;border-bottom:1px solid var(--border);padding:6px 0}
.aop-who dt{font-weight:700;color:var(--heading)}.aop-who dd{margin:0}
.aop-opts{display:grid;gap:8px}
.aop-opt{display:flex;gap:10px;align-items:flex-start;text-align:start;font:500 .95rem var(--f-body);border:1px solid var(--border-2);border-radius:12px;padding:10px 12px;background:var(--bg,#fff);color:var(--text);cursor:pointer}
.aop-opt:hover,.aop-opt:focus-visible{border-color:#1FB5B2;outline:none;box-shadow:0 0 0 3px color-mix(in srgb,#1FB5B2 30%,transparent)}
.aop-opt.on{border-color:#1FB5B2;background:color-mix(in srgb,#1FB5B2 10%,transparent)}
.aop-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 .78rem var(--f-body);background:var(--chip,rgba(31,181,178,.15))}
.aop-hint{font-size:.82rem}
.aop-then{margin:12px 0 0;outline:none}.aop-then:not(:empty){border:1px dashed var(--border-2);border-radius:12px;padding:10px 14px}
.aop-kind{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:baseline;border-radius:99px;padding:3px 12px;background:color-mix(in srgb,var(--kc) 16%,transparent);border:1px solid var(--kc)}
.aop-kind b{color:var(--heading)}.aop-kind small{color:var(--muted)}
.aop-k-harm{background:#0B1020;border-color:#0B1020}.aop-k-harm b,.aop-k-harm small{color:#F2F5FF}
[data-theme=dark] .aop-k-harm{outline:2px solid #F2F5FF;outline-offset:1px}
.aop-cmp ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}.aop-cmp li{border:1px solid var(--border);border-radius:12px;padding:10px}
.aop-cmp p{margin:6px 0 0}.aop-cmp summary{cursor:pointer;font-weight:700}
.aop-lens{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.aop-q{border:1px solid var(--border);border-top:4px solid var(--qc);border-radius:12px;padding:10px 12px}
.aop-q.on{box-shadow:0 0 0 2px var(--qc)}.aop-q h4{margin:0 0 6px}.aop-q em{font-style:normal;font-size:.72rem;border-radius:99px;padding:1px 8px;background:var(--qc);color:#fff}
.aop-qk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--qc);color:#fff;font-weight:800;font-size:.8rem}
.aop-duty{display:flex;gap:8px;align-items:center;font-size:.85rem}.aop-duty img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--qc)}
.aop-dc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}.aop-dclink{font-size:.76rem;color:var(--muted);direction:ltr}
.aop-ref{width:100%;font:500 .92rem var(--f-body);border-radius:10px;border:1px solid var(--border-2);padding:8px;background:var(--bg,#fff);color:var(--text)}
.aop-lesson{font-weight:700;color:var(--heading)}
.aop-rel{margin:0;padding-inline-start:20px}
.aop-pn{display:flex;justify-content:space-between;gap:10px;margin:22px 0 6px}
.aop-formal{font-size:.84rem;border-inline-start:3px solid #EC6C25;padding:6px 12px;margin:18px 0 0;background:color-mix(in srgb,#EC6C25 7%,transparent);border-radius:8px}
@media (max-width:640px){.aop-case{padding:14px}.aop-who div{grid-template-columns:1fr}.aop-flt select{max-width:100%}.aop-flt label{flex:1 1 140px}}
/* v20.43 · the sections inside the guide are not page sections (the site gives every <section> the page padding) */
.aop-way{padding:22px 0 6px}.aop-way:first-of-type{padding-top:10px}.aop-case section{padding:0}