/* ===== حياة — Swiss editorial broadsheet ===== */
:root{
  --paper:#FAFAF7;
  --ink:#111111;
  --rule:#D8D6D0;
  --grey1:#EDEBE5;
  --grey2:#F5F3EE;
  --grey3:#8A857C;
  --red:#E63329;
  --r:2px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
button{font-family:inherit;cursor:pointer;user-select:none}
input,select,textarea{font-family:inherit}
.num{font-variant-numeric:tabular-nums}

.app{max-width:1180px;margin:0 auto;padding:0 16px 210px}

/* ---------- masthead ---------- */
.masthead{padding-top:14px}
.row-top{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:var(--grey3)}
.kicker{font-size:10px;color:var(--grey3)}
.issue{font-size:10px;color:var(--grey3);font-variant-numeric:tabular-nums}
.mh-main{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:2px}
.title{
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-size:40px;line-height:.95;font-weight:700;letter-spacing:-.01em;
}
.clockwrap{display:flex;align-items:center;gap:10px}
.daynum{font-size:38px;font-weight:600;line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.clockcol{display:flex;flex-direction:column;line-height:1.15}
.clock{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cdate{font-size:10px;color:var(--grey3);font-variant-numeric:tabular-nums}
.dial{width:32px;height:32px;flex:none;opacity:.95}
.identity{
  font-size:11.5px;color:var(--grey3);padding:8px 0 10px;
  border-bottom:1px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;
}
.identity .sep{color:var(--rule)}
.identity .money{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- needs ---------- */
.needs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px;
  padding:12px 0 14px;border-bottom:1px solid var(--rule);
}
.need .top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.need .lbl{font-size:10px;color:var(--grey3);white-space:nowrap}
.need .val{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.need .bar{height:2px;background:var(--rule);margin-top:5px;position:relative;overflow:hidden}
.need .fill{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--ink);transition:width .35s ease}
.need.is-danger .fill{background:var(--red)}
.need.is-danger .val,.need.is-danger .lbl{color:var(--red)}

/* ---------- tabs ---------- */
.tabs{
  display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--paper);z-index:20;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:none;border:0;padding:11px 13px;font-size:13px;color:var(--grey3);
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:44px;
}
.tab.is-active{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* ---------- layout ---------- */
.main{padding-top:4px;min-height:52vh}
.panel{display:none}
.panel.is-active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.grid12{display:grid;grid-template-columns:1fr;gap:0 24px}
@media(min-width:900px){
  .grid12{grid-template-columns:repeat(12,1fr)}
  .col-8{grid-column:span 8}
  .col-4{grid-column:span 4}
  .title{font-size:52px}
  .daynum{font-size:52px}
}
.col-4{margin-top:8px}

/* ---------- sections ---------- */
.sec{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--ink);padding-bottom:4px;margin:22px 0 12px;gap:8px;
}
.sec h2{font-size:16px;font-weight:600;letter-spacing:0}
.sec span{font-size:10px;color:var(--grey3)}
@media(min-width:900px){.sec h2{font-size:19px}}

/* ---------- now card ---------- */
.nowcard{border:1px solid var(--rule);padding:14px 16px;background:var(--grey2)}
.nowplace{font-size:22px;font-weight:600;line-height:1.2}
.nowstatus{font-size:11px;color:var(--grey3);margin-top:2px}
.nowstatus.open{color:var(--ink)}
.nowstatus.closed{color:var(--red)}
.nowhint{font-size:13.5px;color:#4A4741;margin-top:8px;line-height:1.65}
.quickrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:9px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:var(--r);font-size:13px;font-weight:500;transition:background .15s,color .15s,transform .1s;
}
.btn:hover{background:var(--grey1)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:#cf2b22;border-color:#cf2b22;color:#fff}
.btn-ghost{border-color:var(--rule);background:var(--grey2)}
.btn-sm{min-height:36px;padding:6px 10px;font-size:12px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.wide{width:100%;margin-top:8px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}

/* ---------- log ---------- */
.log{display:block}
.entry{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px}
.entry .t{font-size:9px;color:var(--grey3);font-variant-numeric:tabular-nums;padding-top:4px;line-height:1.35}
.entry .x{line-height:1.6}
.entry.bad .x{color:var(--red)}
.entry.good .x{font-weight:500}
.entry.event .x{color:#5A564E}
.entry.muted .x{color:var(--grey3)}
.entry.input .x{color:var(--grey3);font-style:normal}
.entry.input .x::before{content:"» ";color:var(--rule)}

/* ---------- key/value rows ---------- */
.kv{border-top:1px solid var(--rule)}
.row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.row .k{color:var(--grey3);flex:none}
.row .v{text-align:end;font-weight:500;font-variant-numeric:tabular-nums}
.row .v.danger{color:var(--red)}

/* ---------- map ---------- */
.mapwrap{border:1px solid var(--rule);background:var(--grey2);position:relative}
.map{display:block;width:100%;height:auto;touch-action:manipulation}
.maplabel{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:6px;fill:var(--grey3)}
.placelabel{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:6.2px;fill:var(--ink)}
.placelabel.sel{fill:var(--red);font-weight:700}
.mark{cursor:pointer}

.place-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.place-row .pname{font-size:13.5px;font-weight:500;flex:1}
.place-row .pmeta{font-size:10.5px;color:var(--grey3);font-variant-numeric:tabular-nums;white-space:nowrap}
.place-row .pstate{font-size:10px;color:var(--grey3);white-space:nowrap}
.place-row .pstate.closed{color:var(--red)}

/* ---------- people ---------- */
.person{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.face{width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;background:var(--grey1);border:1px solid var(--rule)}
.face svg{display:block;width:100%;height:100%}
.face.me{border-color:var(--red)}
.pinfo{flex:1;min-width:0}
.pname{font-size:13.5px;font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ptype{font-size:9.5px;color:var(--grey3);border:1px solid var(--rule);padding:0 5px;border-radius:999px;line-height:1.6}
.pmeta{font-size:10.5px;color:var(--grey3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.close-bar{height:2px;background:var(--rule);margin-top:5px;position:relative}
.close-bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--ink);display:block}
.pacts{display:flex;gap:6px;flex:none}

/* ---------- lists ---------- */
.item{border:1px solid var(--rule);padding:12px;margin-bottom:10px;background:#fff}
.item .itop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.item .ititle{font-size:14px;font-weight:600}
.item .isub{font-size:11px;color:var(--grey3);margin-top:2px}
.item .isalary{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .iact{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

.news{border-bottom:1px solid var(--rule);padding:8px 0;font-size:12.5px;color:#3d3a35}
.news time{color:var(--grey3);font-size:10px;font-variant-numeric:tabular-nums;margin-inline-end:6px}

.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.stat{border:1px solid var(--rule);padding:10px}
.stat b{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:10px;color:var(--grey3)}

/* ---------- composer ---------- */
.composer{
  position:fixed;inset-inline:0;bottom:0;background:var(--paper);
  border-top:1px solid var(--ink);padding:8px 0 10px;z-index:40;
}
.composer .wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.suggests{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.suggests::-webkit-scrollbar{display:none}
.chip{
  white-space:nowrap;border:1px solid var(--rule);background:var(--grey2);color:var(--ink);
  border-radius:999px;padding:6px 12px;font-size:12px;min-height:32px;flex:none;
}
.chip:active{background:var(--grey1)}
.chip:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.cmd{display:flex;gap:6px;align-items:center;border:1px solid var(--ink);background:#fff;border-radius:var(--r);padding:4px}
.cmd input{
  flex:1;min-width:0;border:0;outline:none;font-size:16px;padding:8px 10px;background:transparent;color:var(--ink);
}
.cmd input:focus-visible{outline:none}
.send{width:44px;height:44px;background:var(--red);border:0;border-radius:var(--r);display:grid;place-items:center;flex:none}
.send:active{background:#cf2b22}
.send:disabled{opacity:.4}
.aibanner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--red);background:#fff;padding:8px 10px;margin-bottom:8px;font-size:12px;
}
.aibanner button{background:var(--red);color:#fff;border:0;border-radius:2px;padding:7px 10px;font-size:12px;font-weight:600;min-height:36px}
.aibanner .x{color:var(--grey3)}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(17,17,17,.55);z-index:80;
  display:grid;place-items:center;padding:18px;overflow-y:auto;
}
.overlay.hidden{display:none}
.sheet{
  background:var(--paper);color:var(--ink);max-width:520px;width:100%;
  padding:22px;border:1px solid var(--ink);border-radius:var(--r);max-height:92vh;overflow-y:auto;
}
.sheet-title{font-size:26px;font-weight:700;margin:6px 0 8px;line-height:1.25}
.lead{font-size:13.5px;color:#4A4741;line-height:1.7;margin-bottom:14px}
.flabel{display:block;font-size:10px;color:var(--grey3);margin:12px 0 4px}
.finput{
  width:100%;border:1px solid var(--rule);background:#fff;color:var(--ink);
  padding:11px 12px;font-size:16px;border-radius:var(--r);min-height:46px;
}
.finput:focus{outline:2px solid var(--ink);outline-offset:-1px}
.seg{display:flex;gap:8px}
.segbtn{flex:1;min-height:44px;border:1px solid var(--rule);background:var(--grey2);color:var(--ink);border-radius:var(--r);font-size:13px}
.segbtn.is-active{border-color:var(--ink);background:var(--ink);color:var(--paper);font-weight:600}
.paths{display:grid;gap:8px}
.path{
  text-align:start;border:1px solid var(--rule);background:var(--grey2);color:var(--ink);
  padding:11px 12px;border-radius:var(--r);display:flex;flex-direction:column;gap:2px;min-height:56px;
}
.path strong{font-size:13.5px;font-weight:600}
.path span{font-size:11px;color:var(--grey3)}
.path.is-active{border-color:var(--ink);background:#fff;box-shadow:inset 3px 0 0 var(--red)}

.hidden{display:none!important}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media(max-width:430px){
  .app{padding:0 12px 200px}
  .composer .wrap{padding:0 12px}
  .pacts .btn{min-height:36px;padding:5px 8px;font-size:11.5px}
  .entry{grid-template-columns:42px 1fr;font-size:13.5px}
}
</style>