:root{
  --paper:#f6f3ec;
  --card:#fbfaf5;
  --ink:#2b2a26;
  --ink-soft:#6f6b61;
  --fill:#e4e0d6;
  --fill-2:#ede9df;
  --line:#2b2a26;
  --rough: 255px 12px 225px 14px/14px 225px 13px 255px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Tajawal",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
/* faint grid paper */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--fill) 1px,transparent 1px),linear-gradient(90deg,var(--fill) 1px,transparent 1px);
  background-size:26px 26px;opacity:.35;
}
[data-fills="off"] body::before{opacity:.15}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:26px 22px 90px}

/* ---------- header ---------- */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:54px;height:54px;border:3px solid var(--ink);border-radius:var(--rough);
  display:grid;place-items:center;background:var(--accent);font-family:"Lalezar";font-size:30px;line-height:1;
  transform:rotate(-3deg);
}
[data-line="straight"] .logo{border-radius:14px}
.brand h1{font-family:"Lalezar";font-weight:400;font-size:40px;margin:0;line-height:.9;letter-spacing:.5px}
.brand .sub{color:var(--ink-soft);font-size:15px;margin-top:2px}
.stamp{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);
  border:1.5px dashed var(--ink-soft);border-radius:8px;padding:6px 10px;transform:rotate(2deg);
  text-align:center;letter-spacing:.4px;
}
.stamp b{color:var(--ink);font-family:"Tajawal";font-weight:800}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 26px;border-bottom:2.5px solid var(--ink);padding-bottom:14px}
.tab{
  font-family:"Tajawal";font-weight:700;font-size:16px;color:var(--ink);
  background:var(--card);border:2.5px solid var(--ink);border-radius:var(--rough);
  padding:9px 16px;cursor:pointer;transform:rotate(-1deg);transition:transform .1s;
}
.tab:nth-child(even){transform:rotate(1deg)}
[data-line="straight"] .tab{border-radius:12px;transform:none}
.tab:hover{transform:translateY(-2px) rotate(0deg)}
.tab[aria-selected="true"]{background:var(--accent);box-shadow:3px 3px 0 var(--ink)}
.tab .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);margin-inline-start:6px}
.tab[aria-selected="true"] .n{color:var(--ink)}

/* ---------- sections ---------- */
.panel{display:none;animation:fade .25s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel-head{margin-bottom:18px;max-width:760px}
.panel-head h2{font-family:"Lalezar";font-weight:400;font-size:30px;margin:0 0 4px}
.panel-head p{margin:0;color:var(--ink-soft);font-size:16px}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:2px;color:var(--ink-soft);text-transform:uppercase}

/* ---------- flow of screens ---------- */
.flow{display:flex;flex-wrap:wrap;gap:30px 26px;align-items:flex-start}
.screenwrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:300px}
.steplabel{display:flex;align-items:center;gap:8px;align-self:flex-start}
.stepnum{
  font-family:"Lalezar";font-size:18px;background:var(--ink);color:var(--paper);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
}
.steptxt{font-weight:800;font-size:15px}

/* phone frame */
.phone{
  width:300px;background:var(--card);border:3px solid var(--ink);border-radius:30px;
  padding:14px 12px 16px;box-shadow:6px 7px 0 rgba(43,42,38,.16);position:relative;
}
.phone .notch{width:90px;height:7px;background:var(--fill);border-radius:6px;margin:2px auto 12px}
.screen{display:flex;flex-direction:column;gap:11px;min-height:430px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-soft);font-size:13px}
.topbar .t-title{font-weight:800;color:var(--ink);font-size:15px}
.iconbtn{width:26px;height:26px;border:2px solid var(--ink);border-radius:8px;display:grid;place-items:center;font-size:14px}

/* wire primitives */
.wl{height:10px;background:var(--fill);border-radius:6px;width:100%}
.wl.s{width:38%}
.wl.m{width:64%}
.wl.l{width:86%}
.wl.dark{background:var(--ink-soft);opacity:.55}
[data-fills="off"] .wl{background:transparent;border:1.4px solid var(--fill);height:11px}
.lbl{font-weight:800;font-size:14px}
.muted{color:var(--ink-soft);font-size:13px}
.hint{font-size:12px;color:var(--ink-soft);font-family:"Cairo","Tajawal",system-ui,sans-serif}

.wbox{
  background:repeating-linear-gradient(45deg,var(--fill),var(--fill) 7px,var(--fill-2) 7px,var(--fill-2) 14px);
  border:2px dashed var(--ink-soft);border-radius:10px;display:grid;place-items:center;
  color:var(--ink-soft);font-family:"Cairo","Tajawal",system-ui,sans-serif;font-size:11px;text-align:center;padding:6px;
}
[data-fills="off"] .wbox{background:transparent}
[data-line="straight"] .wbox{border-style:solid}

.winput{border:2px solid var(--ink);border-radius:10px;padding:9px 11px;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;background:var(--card)}
[data-line="sketchy"] .winput{border-radius:18px 6px 16px 8px/8px 16px 7px 18px}

.wbtn{
  border:2.5px solid var(--ink);border-radius:12px;padding:11px;text-align:center;font-weight:800;font-size:15px;
  background:var(--card);cursor:default;
}
.wbtn.primary{background:var(--ink);color:var(--paper)}
.wbtn.accent{background:var(--accent)}
[data-line="sketchy"] .wbtn{border-radius:var(--rough);box-shadow:3px 3px 0 rgba(43,42,38,.18)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:2px solid var(--ink);border-radius:20px;padding:6px 11px;font-size:13px;font-weight:600;background:var(--card)}
.chip.on{background:var(--accent)}
[data-line="sketchy"] .chip{border-radius:16px 9px 18px 8px/9px 18px 8px 16px}

.optrow{display:flex;gap:9px}
.opt{flex:1;border:2px solid var(--ink);border-radius:12px;padding:9px;text-align:center;background:var(--card)}
.opt.on{background:var(--accent);box-shadow:3px 3px 0 var(--ink)}
.opt .big{font-family:"Lalezar";font-size:22px;line-height:1}
.opt .sm{font-size:11px;color:var(--ink-soft)}
[data-line="sketchy"] .opt{border-radius:16px 8px 14px 8px/8px 14px 8px 16px}

.card-row{display:flex;gap:9px;border:2px solid var(--ink);border-radius:12px;padding:10px;align-items:center;background:var(--card)}
.card-row.on{box-shadow:3px 3px 0 var(--accent);border-color:var(--ink)}
[data-line="sketchy"] .card-row{border-radius:18px 8px 16px 8px/8px 16px 8px 18px}

.sumline{display:flex;justify-content:space-between;font-size:14px}
.sumline.total{font-weight:800;font-size:18px;border-top:2px dashed var(--ink-soft);padding-top:8px;margin-top:2px}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border:2px solid var(--ink);border-radius:20px;padding:4px 10px;background:var(--card)}
.pill.live{background:var(--accent)}

/* annotation notes */
.note{
  font-family:"Lalezar";font-weight:400;color:var(--ink);background:transparent;
  font-size:15px;line-height:1.35;position:relative;padding-inline-start:18px;
}
.note::before{content:"✎";position:absolute;inset-inline-start:0;top:1px;color:var(--ink-soft);font-family:"Tajawal"}
.callout{
  width:240px;border:2px dashed var(--ink-soft);border-radius:12px;background:#fffdf3;
  padding:10px 12px;transform:rotate(-1.4deg);box-shadow:3px 4px 0 rgba(43,42,38,.08);
}
.callout .note{font-size:15px}
[data-notes="off"] .note,[data-notes="off"] .callout,[data-notes="off"] .annot{display:none !important}
.annot{align-self:flex-start;max-width:280px}

/* ---------- concept board ---------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.sticky{
  background:var(--card);border:2.5px solid var(--ink);border-radius:var(--rough);
  padding:14px 16px;box-shadow:4px 5px 0 rgba(43,42,38,.14);
}
[data-line="straight"] .sticky{border-radius:12px}
.sticky:nth-child(3n+1){transform:rotate(-1deg)}
.sticky:nth-child(3n+2){transform:rotate(.8deg)}
.sticky:nth-child(3n){transform:rotate(-.4deg)}
.sticky h3{margin:0 0 8px;font-family:"Lalezar";font-weight:400;font-size:21px;display:flex;align-items:center;gap:8px}
.sticky h3 .tagn{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);background:var(--fill-2);border-radius:6px;padding:2px 6px}
.sticky ul{margin:0;padding-inline-start:18px}
.sticky li{font-size:14.5px;margin-bottom:5px}
.sticky li b{background:linear-gradient(transparent 60%,var(--accent) 60%);padding:0 2px}
.sticky.hot{background:#fffdf0;border-style:solid;box-shadow:5px 6px 0 var(--accent)}
.sticky.wide{grid-column:1 / -1}

/* canonical pipeline strip */
.pipe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pstep{display:flex;align-items:center;gap:8px}
.pdot{
  border:2.5px solid var(--ink);background:var(--card);border-radius:20px;padding:7px 12px;
  font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px;
}
[data-line="sketchy"] .pdot{border-radius:16px 8px 16px 8px/8px 16px 8px 16px}
.pdot .num{font-family:"Lalezar";font-size:15px;background:var(--ink);color:var(--paper);width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.pdot.acc{background:var(--accent)}
.parrow{color:var(--ink-soft);font-size:18px;font-weight:800;align-self:center}

/* legend / footer */
.legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:8px;color:var(--ink-soft);font-size:13px;font-family:"IBM Plex Mono",monospace}
.legend span{display:inline-flex;align-items:center;gap:7px}
.swatch{width:16px;height:16px;border:2px solid var(--ink);border-radius:5px}

/* tracking approach grid */
.approaches{display:flex;flex-wrap:wrap;gap:34px 26px;align-items:flex-start}
.appcol{display:flex;flex-direction:column;gap:12px;width:300px}
.apphead{border:2.5px solid var(--ink);border-radius:var(--rough);background:var(--card);padding:10px 14px;box-shadow:4px 4px 0 var(--accent)}
[data-line="straight"] .apphead{border-radius:12px}
.apphead .t{font-family:"Lalezar";font-size:21px}
.apphead .d{font-size:13px;color:var(--ink-soft)}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-inline-start:6px}
.tlrow{display:flex;gap:11px;align-items:flex-start;padding-bottom:14px;position:relative}
.tlrow:not(:last-child)::before{content:"";position:absolute;inset-inline-start:11px;top:24px;bottom:0;width:2.5px;background:var(--fill)}
.tlrow.done:not(:last-child)::before{background:var(--ink)}
.tldot{width:24px;height:24px;border:2.5px solid var(--ink);border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:12px;flex:none;z-index:1}
.tlrow.done .tldot{background:var(--ink);color:var(--paper)}
.tlrow.now .tldot{background:var(--accent);box-shadow:0 0 0 4px rgba(255,216,77,.4)}
.tlmain .tt{font-weight:800;font-size:14px}
.tlmain .ts{font-size:12px;color:var(--ink-soft)}
.tlmain .vnote{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);margin-top:3px;border-inline-start:2px solid var(--accent);padding-inline-start:6px}

/* map mock */
.mapmock{
  height:200px;border:2.5px solid var(--ink);border-radius:14px;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(0,0,0,.05) 28px,rgba(0,0,0,.05) 30px),
    repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(0,0,0,.05) 28px,rgba(0,0,0,.05) 30px),
    var(--fill-2);
}
.mapmock .road{position:absolute;background:var(--card)}
.mapmock .r1{top:60px;left:0;right:0;height:16px;border-block:2px solid var(--ink)}
.mapmock .r2{top:0;bottom:0;right:120px;width:16px;border-inline:2px solid var(--ink)}
.mapmock .truck{position:absolute;top:52px;right:60px;font-size:22px;transform:rotate(0)}
.mapmock .home{position:absolute;bottom:26px;right:30px;font-size:20px}
.mapmock .route{position:absolute;top:68px;right:46px;width:80px;height:60px;border:2.5px dashed var(--ink);border-bottom:none;border-inline-start:none;border-radius:0 30px 0 0}
.mapcard{border:2.5px solid var(--ink);border-radius:14px;background:var(--card);padding:11px 13px;margin-top:-26px;position:relative;z-index:2;box-shadow:4px 4px 0 rgba(43,42,38,.14)}
[data-line="sketchy"] .mapcard{border-radius:18px 8px 16px 8px/8px 16px 8px 18px}

/* ring tracker */
.ringwrap{display:grid;place-items:center;padding:8px}
.ring{width:220px;height:220px;border-radius:50%;position:relative;
  background:conic-gradient(var(--accent) 0 62%, var(--fill) 62% 100%);
  border:3px solid var(--ink);display:grid;place-items:center}
.ring .hole{width:150px;height:150px;background:var(--card);border:2.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;text-align:center}
.ring .hole .big{font-family:"Lalezar";font-size:26px;line-height:.95}
.ring .hole .sm{font-size:12px;color:var(--ink-soft)}
.ring .node{position:absolute;width:30px;height:30px;border:2.5px solid var(--ink);border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:12px;font-weight:800}
.ring .node.done{background:var(--ink);color:var(--paper)}
.ring .node.now{background:var(--accent);box-shadow:0 0 0 4px rgba(255,216,77,.45)}

/* vendor status mapper */
.maprow{display:flex;align-items:center;gap:8px;font-size:13px;border:2px solid var(--ink);border-radius:10px;padding:8px 10px;background:var(--card)}
[data-line="sketchy"] .maprow{border-radius:14px 7px 14px 7px/7px 14px 7px 14px}
.maprow .vend{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);flex:1}
.maprow .arrow{font-weight:800;color:var(--ink-soft)}
.maprow .canon{font-weight:800;background:var(--accent);border-radius:8px;padding:2px 7px;font-size:12px}

.timerbar{height:10px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--card)}
.timerbar i{display:block;height:100%;width:62%;background:var(--accent)}

.footer{margin-top:46px;border-top:2.5px dashed var(--ink-soft);padding-top:16px;color:var(--ink-soft);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* tweaks mount kept LTR */
#tweaks-root{direction:ltr}
@media (max-width:520px){.brand h1{font-size:32px}.wrap{padding:18px 14px 80px}}

/* ───────────────── Tweaks panel (vanilla) ───────────────── */
#tweaks-root{direction:ltr}
.twk-fab{
  position:fixed;right:16px;bottom:16px;z-index:2147483645;
  appearance:none;border:.5px solid rgba(0,0,0,.12);border-radius:12px;
  background:rgba(250,249,247,.82);color:#29261b;cursor:pointer;
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 28px rgba(0,0,0,.16);
  font:600 12px/1 ui-sans-serif,system-ui,-apple-system,sans-serif;
  padding:10px 14px;display:flex;align-items:center;gap:7px;
}
.twk-fab:hover{background:rgba(250,249,247,.95)}
.twk-fab svg{width:14px;height:14px}
.twk-fab[hidden]{display:none}

.twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
  max-height:calc(100vh - 32px);display:flex;flex-direction:column;
  background:rgba(250,249,247,.78);color:#29261b;
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border:.5px solid rgba(255,255,255,.6);border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
  font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
.twk-panel[hidden]{display:none}
.twk-hd{display:flex;align-items:center;justify-content:space-between;
  padding:10px 8px 10px 14px;user-select:none}
.twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
.twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
  width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1}
.twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
.twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;overflow-x:hidden;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
.twk-body::-webkit-scrollbar{width:8px}
.twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
.twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
  border:2px solid transparent;background-clip:content-box}
.twk-row{display:flex;flex-direction:column;gap:5px}
.twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.twk-lbl{display:flex;justify-content:space-between;align-items:baseline;color:rgba(41,38,27,.72)}
.twk-lbl>span:first-child{font-weight:500}

.twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(41,38,27,.45);padding:10px 0 0}
.twk-sect:first-child{padding-top:0}

.twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
  background:rgba(0,0,0,.06);user-select:none}
.twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
  background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
.twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
  background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
  border-radius:6px;cursor:pointer;padding:4px 6px;line-height:1.2;overflow-wrap:anywhere}

.twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
  background:rgba(0,0,0,.15);transition:background .15s;cursor:pointer;padding:0}
.twk-toggle[data-on="1"]{background:#34c759}
.twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.twk-toggle[data-on="1"] i{transform:translateX(14px)}

.twk-chips{display:flex;gap:6px}
.twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;
  padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
  transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
.twk-chip:hover{transform:translateY(-1px);box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}
.twk-chip[data-on="1"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.15)}
.twk-chip svg{position:absolute;top:6px;left:6px;width:13px;height:13px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}