/* Layout: one narrow column, RTL; sadu-weave band on top, tabs per trip, list grouped by category */
:root{
  --bg:#F5F2EC; --surface:#FFFFFF; --ink:#241C18; --muted:#776A61; --line:#E3DAD0;
  --accent:#A3322A; --accent-ink:#FFFFFF; --gold:#B97E14; --ok:#4F7A50; --soft:#F0E8DE;
  --f-display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15100D; --surface:#201915; --ink:#F1E9E0; --muted:#A69789; --line:#3A2F28;
  --accent:#D9574C; --accent-ink:#1A0F0C; --gold:#E0A63A; --ok:#86B386; --soft:#2A211C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15100D; --surface:#201915; --ink:#F1E9E0; --muted:#A69789; --line:#3A2F28;
  --accent:#D9574C; --accent-ink:#1A0F0C; --gold:#E0A63A; --ok:#86B386; --soft:#2A211C; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
.wrap{max-width:620px;margin:0 auto;padding-block:0 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sadu{height:14px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
  background:
   linear-gradient(135deg,var(--accent) 25%,transparent 25%) -7px 0/14px 14px,
   linear-gradient(225deg,var(--accent) 25%,transparent 25%) -7px 0/14px 14px,
   linear-gradient(315deg,var(--gold) 25%,transparent 25%) 0 0/14px 14px,
   linear-gradient(45deg,var(--gold) 25%,transparent 25%) 0 0/14px 14px,var(--ink)}
header{padding-block:20px 8px}
h1{font-family:var(--f-display);font-weight:700;font-size:2rem;margin:0;line-height:1.2;text-wrap:balance}
.sub{color:var(--muted);margin:4px 0 0;font-size:.92rem}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-block:14px 6px;scrollbar-width:none}
.tab{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:500;
  padding:8px 14px;border-radius:999px;cursor:pointer}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab.new{border-style:dashed;color:var(--accent);border-color:var(--accent)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px;margin-block:8px}
.panel label{font-size:.85rem;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>*{min-width:0}
input,select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
input{flex:1 1 160px}
select{flex:0 1 auto}
.btn{font:inherit;font-weight:600;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.small{padding:6px 12px;font-size:.88rem}
.btn:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.summary{display:grid;gap:8px;padding-block:14px 4px}
.trip-name{font-family:var(--f-display);font-size:1.4rem;margin:0}
.count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.95rem}
.count b{color:var(--ink)}
.bar{height:8px;background:var(--soft);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .3s}
.tools{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:flex;background:var(--soft);border-radius:10px;padding:3px}
.seg button{font:inherit;font-size:.9rem;border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:8px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600}
.links{display:flex;gap:4px}
.link{font:inherit;font-size:.85rem;background:none;border:0;color:var(--muted);cursor:pointer;padding:6px 8px;text-decoration:underline;text-underline-offset:3px}
.link.danger{color:var(--accent)}
.confirm{background:var(--soft);border-radius:10px;padding:10px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.92rem}
.confirm span{flex:1 1 180px}
section.cat{margin-top:22px}
.cat h2{font-family:var(--f-display);font-weight:500;font-size:1.05rem;margin:0 0 6px;display:flex;gap:8px;align-items:baseline}
.cat h2 small{font-family:var(--f-body);color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
ul{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
li:first-child{border-top:0}
.chk{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:transparent;cursor:pointer;display:grid;place-items:center;padding:0;color:transparent}
.chk svg{width:14px;height:14px}
li.done .chk{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.name{flex:1;min-width:0;overflow-wrap:anywhere;cursor:pointer}
li.done .name{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted)}
.del{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.2rem;line-height:1;padding:4px 6px;opacity:.6}
.del:hover{opacity:1;color:var(--accent)}
.sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.sugs em{font-style:normal;font-size:.8rem;color:var(--muted)}
.chip{font:inherit;font-size:.85rem;border:1px dashed var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:4px 10px;cursor:pointer}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.empty,.note{color:var(--muted);text-align:center;padding:28px 12px;font-size:.95rem}
.note.warn{color:var(--accent);padding:10px}
.crew{display:grid;gap:8px;padding-block:14px 0}
.crew h3{font-family:var(--f-display);font-weight:500;font-size:1rem;margin:0}
.people{display:flex;flex-wrap:wrap;gap:6px}
.person{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.9rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 6px 5px 12px;cursor:pointer}
.person b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem}
.person[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.person.me::after{content:"أنت";font-size:.7rem;background:var(--gold);color:var(--surface);border-radius:99px;padding:0 6px}
.person .x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 4px}
.crewnote{font-size:.85rem;color:var(--muted)}
#personForm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
#personForm label{font-size:.85rem;color:var(--muted)}
li{flex-wrap:wrap}
.who{flex:none;font:inherit;font-size:.8rem;border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:3px 10px;cursor:pointer;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who.set{border-style:solid;color:var(--ink);background:var(--soft)}
.who.mine{border-color:var(--gold);color:var(--gold);background:transparent;font-weight:600}
.who:disabled{cursor:default}
.pick{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;padding:4px 36px 2px 0}
.pick button{font:inherit;font-size:.85rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:4px 12px;cursor:pointer}
.pick button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pick span{font-size:.85rem;color:var(--muted)}
.extras{display:grid;gap:10px;padding-block:14px 0}
details.box{background:var(--surface);border:1px solid var(--line);border-radius:12px}
details.box>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 14px}
details.box>summary::-webkit-details-marker{display:none}
.sum-t{font-family:var(--f-display);font-weight:500;font-size:1.02rem;flex:none}
.sum-v{margin-inline-start:auto;color:var(--muted);font-size:.85rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.box>summary::after{content:"";flex:none;width:7px;height:7px;border-left:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-top:-4px;transition:transform .2s}
details.box[open]>summary::after{transform:rotate(135deg);margin-top:4px}
.box-in{padding:0 14px 14px;display:grid;gap:12px}
.place{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.place b{font-size:1.05rem}
.place span{color:var(--muted);font-size:.9rem}
.sky{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:520px){.sky{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat.start{background:transparent;border:1px solid var(--gold)}
.fld{display:grid;gap:6px;flex:1 1 140px}
.fld input{flex:none;width:100%}
.stat{background:var(--soft);border-radius:10px;padding:10px;display:grid;gap:2px;align-content:start}
.stat small{color:var(--muted);font-size:.78rem}
.stat b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.stat em{font-style:normal;font-size:.75rem;color:var(--muted)}
.season,.wxnote{font-size:.9rem;border-inline-start:3px solid var(--gold);padding:2px 10px}
.wxnote small{display:block;color:var(--muted);font-size:.78rem}
.outlinks{display:flex;flex-wrap:wrap;gap:8px}
.outlinks a{font-size:.9rem;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.outlinks a:hover{border-color:var(--gold);color:var(--gold)}
.locform{display:grid;gap:6px}
.locform label,.calc-in label{font-size:.85rem;color:var(--muted)}
.hint{margin:0;font-size:.82rem;color:var(--muted)}
.hint.err{color:var(--accent)}
.calc-in{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{font:inherit;font-size:1.1rem;width:40px;height:40px;border:0;background:var(--soft);color:var(--ink);cursor:pointer}
.stepper button:disabled{cursor:default;opacity:.5}
.stepper input{flex:none;width:56px;text-align:center;border:0;border-radius:0;background:var(--surface);padding:8px 4px;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.calc-in .ov{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:.92rem;cursor:pointer}
.ov input{flex:none;width:18px;height:18px;padding:0;accent-color:var(--accent)}
.ctable{overflow-x:auto}
.ctable table{width:100%;border-collapse:collapse;font-size:.92rem}
.ctable td{padding:7px 4px;border-top:1px solid var(--line)}
.ctable tr:first-child td{border-top:0}
.ctable td.q{font-variant-numeric:tabular-nums;font-weight:600}
.ctable td.s{text-align:left;white-space:nowrap}
.inl{color:var(--ok);font-size:.82rem}
.qty{flex:none;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sharebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--soft);border-radius:12px;padding:10px 12px;margin-top:16px}
.sharebar span{flex:1 1 160px;font-weight:600}
.btn.wa{background:var(--ok);color:var(--surface);text-decoration:none;display:inline-block}
.toast{position:fixed;inset-inline:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin:auto;width:max-content;max-width:calc(100% - 32px);
  background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}

[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{background:var(--bg)}
.brandrow{display:flex;align-items:center;gap:8px}
.brand{font-family:var(--f-display);color:var(--muted);text-decoration:none;font-size:.9rem}
.tag{font-size:.7rem;background:var(--soft);color:var(--muted);border-radius:99px;padding:1px 8px}
.mebar{background:var(--surface);border:1px solid var(--gold);border-radius:14px;padding:14px;display:grid;gap:8px;margin-block:10px}
.trips{display:grid;gap:10px;margin-top:10px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:8px}
.tcard h2{font-family:var(--f-display);font-weight:500;font-size:1.2rem;margin:0}
.tcard h2 a{color:var(--ink);text-decoration:none}
.tmeta{color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums}
.tact{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wxrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:520px){.wxrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wxsum{font-size:.92rem}
a.btn{text-decoration:none;display:inline-block}
.sum-t,.cat h2,.trip-name,.crew h3,.tcard h2{line-height:1.6}
h1{line-height:1.35;padding-top:.1em}