/* مِغرفة · الصفحة تذكرة مطبخ تخرج من الطابعة
   ثلاثة أوضاع: بلا JS وحركة مخفّضة (.still) تدفق طبيعي من أعلى لأسفل،
   و.feed الشريط ينزل من الفتحة والتمرير هو تغذية الورق */
:root{
  --ink:#0B0B0B;--paper:#F5F5F2;--pi:#141414;--acc:#C8321E;
  --slot:58px;--band:130px;--w:min(720px,100vw);
  --ar:'Readex Pro',sans-serif;--hd:'Alexandria','Readex Pro',sans-serif;--lat:'Manrope','Readex Pro',sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
  --noise:repeating-linear-gradient(0deg,rgba(245,245,242,.06) 0 1px,transparent 1px 3px);
}
@media (max-width:1100px){:root{--w:min(640px,100vw)}}
@media (max-width:680px){:root{--w:100vw}}
*{box-sizing:border-box}
html{background:var(--ink);overflow-anchor:none;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--pi);font-family:'Readex Pro',sans-serif;font-size:16px;font-weight:400;line-height:1.7;overflow-x:clip}
h1,h2{font-family:'Alexandria','Readex Pro',sans-serif}
p,h1,h2,h3{margin:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
.num{font-family:var(--lat);font-style:normal;font-variant-numeric:tabular-nums}
.defs{position:absolute}

/* الطابعة */
.printer{position:sticky;top:0;z-index:8;height:var(--slot);background:var(--ink);border-block-end:1px solid #2B2B2B;color:#fff}
.printer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:38px;padding-inline:16px;font-size:12px;line-height:1.4}
.printer-name{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px}
.led{display:block;width:8px;height:8px;background:#3A3A3A;transition:background-color 120ms linear}
.led.on{background:var(--acc)}
.credit{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4);white-space:nowrap}
.mouth{position:relative;width:calc(var(--w) + 10px);max-width:100vw;margin-inline:auto;height:20px;background:#000;border:1px solid #333;border-block-end:0;overflow:hidden}
.head{position:absolute;inset-block-start:4px;inset-inline-start:0;width:34px;height:8px;background:#fff;will-change:transform}
.lip,.stub,.band,.torn{display:none}

/* الشريط */
.strip{container-type:inline-size;width:var(--w);margin-inline:auto;display:flex;flex-direction:column}
.paper{position:relative;isolation:isolate;background:var(--paper);padding:28px clamp(18px,6cqw,44px)}
/* تقليل الورق الحراري: طبقة تأكل الحبر ولا تُرى على الورق */
.paper::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:lighten;background-image:var(--noise-img,none),var(--noise)}

/* حواف متعرجة */
.teeth-t::before{content:'';position:absolute;inset-inline:0;inset-block-start:-8px;height:8px;background:conic-gradient(from 135deg at 50% 0,var(--paper) 90deg,transparent 0) 0 0/16px 8px repeat-x}
.teeth-b{margin-block-end:30px}
.zb{position:absolute;inset-inline:0;inset-block-end:-8px;height:8px;background:conic-gradient(from -45deg at 50% 100%,var(--paper) 90deg,transparent 0) 0 0/16px 8px repeat-x}
.kv{display:flex;flex-direction:column;gap:2px;padding-block-end:12px;border-block-end:2px dashed var(--pi)}
.kv p{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:1.6}
.kv span{font-weight:400}.kv b{font-weight:600}
.kv-2{flex-direction:row;justify-content:space-between;gap:20px}
.kv-2 p{gap:10px}

/* الرأس */
.head-s{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:min(78svh,720px)}
.logo{font:700 clamp(84px,25cqw,176px)/1.3 var(--hd);text-align:center;padding-block:.02em}
.head-low{display:flex;flex-direction:column;gap:14px}
.lead{font-size:clamp(17px,3.1cqw,22px);line-height:1.65;font-weight:500;text-wrap:balance}
.sec-l,.tail-t,.note-big{text-wrap:balance}
.head-s .lead{font-size:clamp(20px,4cqw,30px);line-height:1.5;font-family:var(--hd);font-weight:600}
.hint{font-size:14px;padding-block-start:12px;border-block-start:2px dashed var(--pi)}
.hint-still{display:none}.still .hint-feed,html:not(.js) .hint-feed{display:none}.still .hint-still,html:not(.js) .hint-still{display:inline}

/* العلامات */
.brand{display:flex;flex-direction:column;gap:16px;padding-block:24px 26px;overflow:visible}
.brand-n{font:700 clamp(50px,13.4cqw,94px)/1.3 var(--hd)}
.tags{font-size:14px;font-weight:500}
.stamp{position:absolute;display:grid;place-items:center;color:var(--acc);font:700 var(--s,24px)/1.3 var(--hd);border:3px solid currentColor;z-index:2}
.stamp-round{--s:clamp(18px,3.8cqw,26px);width:clamp(76px,18cqw,120px);aspect-ratio:1;border-radius:50%;inset-inline-end:clamp(14px,5cqw,40px);inset-block-end:18px;rotate:-13deg;outline:1.5px solid currentColor;outline-offset:3px}
.b1{padding-block-end:32px}.b1 .lead,.b1 .tags{padding-inline-end:clamp(92px,22cqw,150px)}
.b2-frame{position:relative;border:3px solid var(--pi);outline:1px solid var(--pi);outline-offset:3px;padding:6px clamp(14px,3.6cqw,26px) 14px}
.b2 .brand-n{font-size:clamp(66px,20.5cqw,146px);line-height:1.25}
.stamp-rect{--s:clamp(15px,3cqw,21px);inset-inline-end:clamp(10px,3cqw,24px);inset-block-end:18px;padding:6px 12px;rotate:7deg}
.b3-inv{background:var(--pi);color:var(--paper);padding:18px clamp(14px,4cqw,28px) 22px;display:flex;flex-direction:column;gap:14px}
.b3-inv .kv{border-color:var(--paper)}
.b3 .tags{padding-inline-end:110px;min-height:50px}
.stamp-hex{position:absolute;inset-inline-end:clamp(16px,5cqw,40px);inset-block-end:12px;width:clamp(76px,16cqw,104px);rotate:-6deg;z-index:2;fill:none;stroke:var(--acc);stroke-width:4}
.stamp-hex text{fill:var(--acc);stroke:none;font:700 27px var(--hd)}
.brand+.brand{margin-block-start:0}
@media (min-width:681px){.b1{rotate:-.5deg}.b2{rotate:.4deg;width:97%;margin-inline-start:2%}.b3{rotate:-.3deg}}

/* عناوين أقسام الأصناف */
.sec-t{font:700 clamp(38px,9.6cqw,70px)/1.3 var(--hd)}
.sec-l{font-size:clamp(15px,2.6cqw,18px);line-height:1.65}

/* الأصناف */
.menu{display:flex;flex-direction:column;gap:9px;padding-block:18px 12px}
.menu-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.note-box{display:flex;flex-direction:column;gap:6px}
.note-box label{font-size:14px;font-weight:600}
.note-in{width:100%;height:40px;background:transparent;border:0;border-block-end:2px solid var(--pi);border-radius:0;padding-inline:0;font-size:18px;font-weight:500;color:var(--acc);outline:0;caret-color:var(--acc)}
.note-in::placeholder{color:#6A6A66;font-weight:400}
.note-in:focus-visible{border-block-end-width:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips[hidden]{display:none}
.chip{background:none;border:1.5px dashed var(--pi);padding:3px 10px;min-height:32px;font-size:13px;cursor:pointer;touch-action:manipulation;transition:background-color 120ms linear,color 120ms linear}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--pi)}
.tabs[hidden]{display:none}
.tab{min-height:44px;background:none;border:0;border-inline-start:2px solid var(--pi);padding:6px 4px;font-size:clamp(13px,2.4cqw,15px);font-weight:600;line-height:1.3;cursor:pointer;touch-action:manipulation;transition:background-color 120ms linear,color 120ms linear}
.tab:first-child{border-inline-start:0}
.tab[aria-pressed=true]{background:var(--pi);color:var(--paper)}
.panel-t{font:600 15px/1.5 var(--ar);padding-block:8px 2px}
.js .panel-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.panel[hidden]{display:none}
.it{display:flex;align-items:center;gap:12px;width:100%;min-height:47px;padding-block:4px;background:none;border:0;border-block-end:2px dashed var(--pi);text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color 120ms linear,color 120ms linear}
.it-n{font:600 clamp(18px,3.4cqw,23px)/1.3 var(--hd);flex:1}
.it-s{font-size:13px}
.it i{display:grid;place-items:center;width:32px;height:32px;border:2px solid currentColor;font-weight:700;font-size:20px;line-height:1;transition:transform 160ms var(--out)}
.it:active i{transform:scale(.9)}
.menu-h .sec-t{flex:none}
.said{flex:1;font-size:13.5px;line-height:1.5;font-weight:500;color:var(--acc);text-align:end;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.js) .it i{display:none}
@media (hover:hover) and (pointer:fine){
  .it:hover{background:var(--pi);color:var(--paper)}
  .chip:hover{background:var(--pi);color:var(--paper)}
  .tab:hover:not([aria-pressed=true]){background:var(--pi);color:var(--paper)}
  .st:not(:disabled):hover{background:var(--pi);color:var(--paper)}
}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* تذكرتك */
.order{display:flex;flex-direction:column;gap:6px;padding-block:8px 6px;border-block-start:2px dashed var(--pi)}
.order-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.order-label .sec-t{font-size:clamp(26px,6cqw,44px)}
.order-hint{font-size:13px;text-align:end;line-height:1.4}
.entries{display:flex;flex-direction:column}
.entry{padding-block:7px;border-block-end:1px solid var(--pi);position:relative}
.feed .entry{border-block-end:0;border-block-start:1px solid var(--pi)}
.ln{line-height:1.6;min-height:1.6em}
.ln-main{display:flex;align-items:center;gap:10px;font:600 clamp(20px,3.8cqw,26px)/1.45 var(--hd)}
.ln-main b{font-weight:700;font-size:.9em}
.ln-main span{flex:1}
.ln-note{color:var(--acc);font-weight:600;font-size:16px}
.ln-meta{font-size:13.5px}
.void{background:none;border:0;padding:0;min-height:30px;font:400 13px/1.3 var(--ar);text-decoration:underline;text-underline-offset:3px;cursor:pointer;touch-action:manipulation}
.entry.voided .ln-main span,.entry.voided .ln-note{text-decoration:line-through;text-decoration-thickness:2px}
.entry.voided .ln-main b{text-decoration:line-through}
.feed .order{flex-direction:column-reverse}
.feed .entries{flex-direction:column-reverse}

/* الملاحظات */
.notes{display:flex;flex-direction:column;gap:10px;padding-block:16px 22px;border-block-start:2px dashed var(--pi)}
.note-big{font:700 clamp(30px,7.6cqw,56px)/1.35 var(--hd)}
.note-big em{font-style:normal;color:var(--acc)}
.note-ln{font-size:clamp(15px,2.6cqw,18px);line-height:1.6;padding-block-start:8px;border-block-start:1px solid var(--pi)}

/* المحطة */
.station{display:flex;flex-direction:column;gap:10px;padding-block:16px 22px;border-block-start:2px dashed var(--pi)}
.st-list{display:flex;flex-direction:column;border:2px solid var(--pi)}
.st{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:54px;padding:6px 14px;background:none;border:0;border-block-end:2px solid var(--pi);text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color 120ms linear,color 120ms linear}
.st:last-child{border-block-end:0}
.st:disabled{cursor:default;color:var(--pi)}
.st-n{font:600 clamp(19px,3.4cqw,24px)/1.3 var(--hd)}
.st-v{font-size:14px;font-weight:500}
html:not(.js) .st-tip{display:none}

/* الذيل */
.tail{display:flex;flex-direction:column;gap:12px;padding-block:24px 30px;border-block-start:0;margin-block-start:0}
.tail-k{font-size:14px;font-weight:600;padding-block-end:8px;border-block-end:2px dashed var(--pi)}
.tail-t{font:700 clamp(46px,12.6cqw,90px)/1.3 var(--hd)}
.cta{display:flex;align-items:center;justify-content:center;min-height:68px;margin-block-start:6px;background:var(--pi);color:var(--paper);font:700 clamp(21px,4cqw,28px)/1.3 var(--hd);text-decoration:none;position:relative;z-index:4;transition:transform 160ms var(--out)}
.cta:active{transform:scale(.97)}
.bars{height:38px;margin-block-start:4px;background:repeating-linear-gradient(90deg,var(--pi) 0 2px,transparent 2px 5px,var(--pi) 5px 9px,transparent 9px 11px,var(--pi) 11px 12px,transparent 12px 17px,var(--pi) 17px 20px,transparent 20px 23px)}

/* الأقسام والمقياس على الجوانب */
.log,.meter{display:none}
@media (min-width:1180px){
  .feed .log,.feed .meter{display:block;position:fixed;z-index:6;inset-block-start:calc(var(--slot) + 36px);color:#fff}
  .feed .log{inset-inline-start:32px;width:max-content}
  .log-t,.meter-t{font-size:13px;margin-block-end:10px;color:#BDBDBD}
  .log a{display:block;font-size:14px;line-height:1.3;padding-block:6px;text-decoration:none;color:#BDBDBD;transition:color 120ms linear}
  .log a[aria-current=true]{color:#fff;font-weight:600}
  .log a:hover{color:#fff}
  .feed .meter{inset-inline-end:32px;text-align:end}
  .meter-v{font:700 44px/1.2 var(--lat)}
  .meter-v small{font:400 14px var(--ar);color:#BDBDBD}
}

/* وضع التغذية */
.feed,.feed body{overscroll-behavior-y:none}
.feed .printer{position:fixed;inset-inline:0;top:0}
.feed .stage{position:fixed;inset:0;overflow:hidden;z-index:1}
.feed .strip{position:absolute;inset-block-start:0;inset-inline:0;flex-direction:column-reverse;transform-origin:50% 0;will-change:transform}
.feed .head-s{min-height:min(calc(100svh - var(--slot) - 8px),900px);margin-block-end:8px}
.feed .menu{margin-block-end:30px}
.still .tail,html:not(.js) .tail{margin-block-start:30px}
.feed .tail .zb,.feed .station .zb{display:none}
.feed .menu .zb,.feed .head-s>.zt{display:block}
.zt{display:none;position:absolute;inset-inline:0;inset-block-start:-8px;height:8px;background:conic-gradient(from 135deg at 50% 0,var(--paper) 90deg,transparent 0) 0 0/16px 8px repeat-x}
.still .menu .zb,html:not(.js) .menu .zb{display:none}
.feed .band{display:flex;justify-content:center;position:fixed;inset-inline:0;inset-block-start:var(--slot);height:var(--band);overflow:hidden;background:var(--ink);z-index:3;pointer-events:none}
.band-f{position:relative;flex:none;height:calc(100% + 8px);overflow:hidden}
.band-f .strip{position:absolute;inset-block-start:0;inset-inline:20px;width:var(--w);margin:0;flex-direction:column-reverse;transform-origin:50% 0}
.band.noF .band-f .strip{inset-inline:0}
.feed .lip{display:block;position:fixed;z-index:5;inset-block-start:var(--slot);inset-inline:0;margin-inline:auto;width:var(--w);height:6px;background:linear-gradient(#000 0 2px,rgba(0,0,0,.42) 2px 4px,rgba(0,0,0,.16) 4px 6px);pointer-events:none}
.feed .stub{display:block;position:fixed;z-index:4;inset-block-start:var(--slot);inset-inline:0;margin-inline:auto;width:var(--w);height:8px;opacity:0;background:conic-gradient(from -45deg at 50% 100%,var(--paper) 90deg,transparent 0) 0 0/16px 8px repeat-x;pointer-events:none}
.feed .torn{display:block;position:fixed;z-index:5;inset-block-start:calc(var(--slot) + 22px);inset-inline:12px;margin:0;text-align:center;color:#fff;font-size:clamp(13px,1.6vw,15px);line-height:1.5;opacity:0;pointer-events:none}

/* التذكرة الحية: تخرج من الفتحة فوق الصفحة، والضغطات تمر من خلالها */
.live{display:none}
.js .live{display:block;position:fixed;z-index:4;inset-block-start:var(--slot);inset-inline:0;margin-inline:auto;width:calc(var(--w) - 28px);height:220px;overflow:hidden;pointer-events:none;visibility:hidden;container-type:inline-size;color:var(--pi)}
.js .live.on{visibility:visible}
.live-f{position:relative;isolation:isolate;height:124px;background:var(--paper);border-inline:2px solid var(--pi);transform:translate3d(0,-124px,0);will-change:transform}
.live-f::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:lighten;background-image:var(--noise-img,none),var(--noise)}
.live-f::after{content:'';position:absolute;inset-inline:-2px;inset-block-end:-11px;height:8px;z-index:-1;background:conic-gradient(from -45deg at 50% 100%,var(--pi) 90deg,transparent 0) 0 0/16px 8px repeat-x}
.live-f .zb{inset-inline:-2px}
.live-f::before,.live-c{border-radius:0}
.live-c{height:100%;overflow:hidden}
.live-l{padding:9px 14px 5px}
.live-l .ln-main{font-size:clamp(18px,3.4cqw,23px)}
.still .live.on{opacity:1}

/* تلميح اتجاه التمرير */
.hint-float{display:none}
.feed .hint{visibility:hidden}
.feed .hint-float{display:block;position:fixed;z-index:6;inset-block-end:max(18px,env(safe-area-inset-bottom));inset-inline:0;margin-inline:auto;width:fit-content;max-width:calc(100vw - 32px);padding:7px 14px;background:var(--pi);color:var(--paper);border:1px solid var(--paper);font-size:14px;line-height:1.5;font-weight:500;pointer-events:none;opacity:0;transition:opacity 200ms linear}
.feed .hint-float.on{opacity:1}

/* الوضع الساكن: تذكرة كاملة في تدفق طبيعي */
.still .stage,html:not(.js) .stage{position:static}
.still .brand+.brand,html:not(.js) .brand+.brand{margin-block-start:0}
@media (prefers-reduced-motion:reduce){.b1,.b2,.b3{rotate:0deg}}

@media (max-width:680px){
  :root{--band:96px}
  .paper{padding-inline:18px}
  .credit{font-size:11px}
  .mouth{width:100vw;border-inline:0}
}