/* fabrica.css · the factory line module. Everything is scoped under .fb, classes are prefixed fb- */
.fb {
  --fb-ink: #1F2328;
  --fb-paper: #F5F1E9;
  --fb-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative;
  display: block;
  color: var(--fb-ink);
  font-family: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
.fb *, .fb *::before, .fb *::after { box-sizing: border-box; }
.fb [hidden] { display: none !important; }
:where(.fb) p { margin: 0; }
:where(.fb) i { font-style: normal; }
:where(.fb) button { font-family: inherit; color: inherit; margin: 0; -webkit-tap-highlight-color: transparent; }
.fb-nw { white-space: nowrap; }
.fb button:focus-visible, .fb a:focus-visible { outline: 3px solid var(--fb-ink); outline-offset: 3px; }
.fb .fb-exh:focus { outline: none; }
.fb-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.fb-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--fb-ink); border-radius: 8px; background: transparent; color: var(--fb-ink);
  font-size: 17px; font-weight: 800; line-height: 1.05; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.fb-btn:hover { background: var(--fb-ink); color: var(--fb-paper); }
.fb-btn.fb-all { background: var(--fb-ink); color: #FFD23F; }
.fb-btn.fb-all:hover { background: #000; }
.fb-btn.fb-all[aria-disabled="true"] { background: rgba(31,35,40,.18); border-color: rgba(31,35,40,.18); color: rgba(31,35,40,.5); cursor: default; }
.fb-btn.fb-tog { min-height: 40px; padding: 0 14px; background: var(--fb-paper); }
.fb-btn.fb-tog.fb-tog-on { background: #FFC21A; color: var(--fb-ink); }
.fb-btn.fb-tog:hover { background: var(--fb-ink); color: var(--fb-paper); }
.fb-btn-dark { border-color: #5A5F66; color: var(--fb-paper); }
.fb-btn-dark:hover { background: var(--fb-paper); color: var(--fb-ink); }
.fb-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 26px;
  border-radius: 10px; background: #FFC21A; color: var(--fb-ink); text-decoration: none;
  font-size: 22px; font-weight: 800; white-space: nowrap; box-shadow: 0 5px 0 #B8860B;
  transition: filter .15s ease, transform .15s ease;
}
.fb-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.fb .fb-cta:focus-visible, .fb .fb-btn-dark:focus-visible { outline-color: #FFC21A; }
.fb-note { font-family: var(--fb-mono); font-size: 11px; line-height: 1.3; color: #5A5F66; }

/* ---------- desktop stage ---------- */
.fb-wrap { position: relative; width: 100%; }
.fb-stage {
  position: absolute; left: 0; top: 0; width: 1240px; height: 640px; transform-origin: 0 0; overflow: hidden;
  border-radius: 20px; background-color: #DBD4C6;
  background-image: linear-gradient(rgba(31,35,40,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,35,40,.05) 1px, transparent 1px);
  background-size: 40px 40px; box-shadow: inset 0 0 0 2px rgba(31,35,40,.10);
  -webkit-user-select: none; user-select: none;
}
.fb-stage > * { position: absolute; }
.fb-stage > .fb-machs, .fb-stage > .fb-items, .fb-stage > .fb-pilebox { position: static; }

.fb-cnt {
  height: 44px; padding: 0 14px 0 16px; display: flex; align-items: center; gap: 14px; z-index: 12;
  border-radius: 10px; background: var(--fb-paper); border: 2px solid var(--fb-ink);
}
.fb-cnt-l { font-family: var(--fb-mono); font-size: 12px; font-weight: 500; white-space: nowrap; }
.fb-cnt-n {
  display: inline-block; min-width: 44px; font-family: var(--fb-mono); font-size: 24px; font-weight: 700; line-height: 1;
  text-align: right; color: #0F7D63; font-variant-numeric: tabular-nums;
}
.fb-cnt-pile .fb-cnt-n { color: #C2410C; }
.fb-cnt-pile.fb-hi .fb-cnt-n { color: #B42318; }
.fb-cnt-pile.fb-zero .fb-cnt-n { color: #0F7D63; }
.fb-bump { animation: fb-bump .36s cubic-bezier(.3,1.6,.5,1); }
.fb-topmid { left: 420px; top: 16px; width: 400px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 12; }
.fb-topmid .fb-note { max-width: 150px; }
.fb-stage .fb-hint { left: 24px; top: 70px; width: 1000px; z-index: 12; font-size: 22px; font-weight: 800; line-height: 1.12; text-wrap: balance; }
.fb-h2 { color: #5A5F66; font-weight: 700; }
.fb-h2:not(:empty)::before { content: '\00B7'; margin: 0 .4em; color: #8C8473; }

.fb-rail { left: 138px; top: 128px; width: 990px; height: 10px; z-index: 2; border-radius: 4px; background: #3A3F47; box-shadow: 0 3px 0 rgba(31,35,40,.16); transition: background-color .2s ease; }
.fb-hot .fb-rail { background: #FFC21A; }
.fb-sock {
  top: 142px; width: 114px; height: 96px; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: 0 8px; text-align: center; border: 2.5px dashed rgba(31,35,40,.24); border-radius: 12px;
  color: rgba(31,35,40,.42); font-size: 15px; font-weight: 800; line-height: 1.05; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.fb-sock:hover { background: rgba(255,255,255,.35); border-color: var(--mc); color: var(--fb-ink); }
.fb-sock.fb-tgt { border-color: var(--mc); background: var(--mt); color: var(--fb-ink); }
.fb-sock.fb-tgt.fb-hot { background: var(--mh); transform: scale(1.04); }
.fb-sock.fb-filled { visibility: hidden; }

.fb-belt { left: 14px; top: 328px; width: 1200px; height: 28px; z-index: 2; border-radius: 14px; background: #2B2E33; overflow: hidden; box-shadow: 0 6px 0 rgba(31,35,40,.14); }
.fb-tread {
  position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background-image: repeating-linear-gradient(90deg, #4A4F57 0 18px, #30343A 18px 30px); background-size: 30px 100%;
  animation: fb-tread .3333s linear infinite;
}
.fb-belt-line { position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: #3A3F47; }
.fb-leg { top: 356px; width: 10px; height: 20px; z-index: 1; background: #3A3F47; }
.fb-paused .fb-tread, .fb-paused .fb-gear svg, .fb-paused .fb-leds i { animation-play-state: paused !important; }

.fb-hopper { left: 14px; top: 140px; width: 122px; height: 196px; z-index: 8; overflow: hidden; border-radius: 12px 12px 6px 6px; background: #3A3F47; border: 2.5px solid var(--fb-ink); }
.fb-hopper > span { position: absolute; display: block; }
.fb-hop-stripe { left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(-45deg, #FFC21A 0 9px, var(--fb-ink) 9px 18px); }
.fb-hop-l { left: 0; right: 0; top: 28px; text-align: center; color: var(--fb-paper); font-size: 24px; font-weight: 800; line-height: 1.12; }
.fb-hop-slot { left: 14px; right: 14px; top: 70px; height: 6px; border-radius: 3px; background: var(--fb-ink); }
.fb-hop-p1 { left: 22px; top: 86px; width: 30px; height: 38px; border-radius: 3px; background: var(--fb-paper); transform: rotate(-6deg); }
.fb-hop-p2 { left: 50px; top: 84px; width: 30px; height: 38px; border-radius: 3px; background: #fff; transform: rotate(4deg); }
.fb-hop-side { right: 0; bottom: 0; width: 12px; height: 92px; background: #23262B; }

.fb-exit { left: 1124px; top: 214px; width: 102px; height: 146px; z-index: 8; border-radius: 12px 12px 6px 6px; background: #3A3F47; border: 2.5px solid var(--fb-ink); overflow: hidden; }
.fb-exit > span { position: absolute; display: block; }
.fb-exit-top { left: 0; right: 0; top: 0; height: 40px; background: #0F7D63; color: #fff; font-size: 21px; font-weight: 800; line-height: 40px; text-align: center; }
.fb-exit-mouth { left: 10px; right: 10px; top: 52px; bottom: 30px; border-radius: 6px; background: #16191D; display: flex; gap: 3px; padding: 0 0 0 3px; }
.fb-exit-mouth i { display: block; width: 9px; height: 100%; background: #2B2E33; border-radius: 0 0 3px 3px; }
.fb-exit-led { right: 12px; bottom: 9px; width: 12px; height: 12px; border-radius: 50%; background: #1B4D3F; box-shadow: inset 0 0 0 2px var(--fb-ink); }
.fb-exit-led.fb-flash { animation: fb-flash .5s ease-out; }

.fb-tray { left: 24px; top: 380px; width: 276px; height: 56px; z-index: 1; border-radius: 6px 6px 12px 12px; background: #EADFD3; border: 2.5px solid #B42318; transition: background-color .2s ease; }
.fb-has-exc .fb-tray { background: #F8D9D3; }
.fb-tray-lip {
  left: 24px; top: 428px; width: 276px; height: 22px; z-index: 8; pointer-events: none;
  border: 2.5px solid #B42318; border-top: 0; border-radius: 0 0 12px 12px; background: #F1E4DA; color: #B42318;
  font-size: 15px; font-weight: 800; line-height: 19px; text-align: center; transition: background-color .2s ease;
}
.fb-has-exc .fb-tray-lip { background: #E23A3A; color: #fff; }
.fb-exh { left: 316px; top: 380px; width: 296px; height: 70px; z-index: 12; display: flex; align-items: center; font-size: 17px; font-weight: 800; line-height: 1.12; color: #6B6458; }
.fb-exh.fb-on { color: #B42318; }
.fb-ctl { left: 626px; top: 384px; width: 400px; z-index: 12; display: flex; gap: 10px; justify-content: flex-end; }
.fb-stage .fb-tip { left: 626px; top: 434px; width: 400px; z-index: 12; text-align: right; font-family: var(--fb-mono); font-size: 11px; line-height: 1.3; color: #5A5F66; }

.fb-shelf { left: 20px; top: 458px; width: 1006px; height: 170px; z-index: 1; border-radius: 16px; background: #CEC6B6; box-shadow: inset 0 3px 0 rgba(31,35,40,.10); }
.fb-shelf-l { position: absolute; left: 16px; top: 8px; font-size: 16px; font-weight: 800; }
.fb-shelf-h { position: absolute; left: 76px; top: 11px; font-family: var(--fb-mono); font-size: 11px; color: #5A5F66; }
.fb-slot { top: 490px; width: 114px; height: 96px; z-index: 2; border: 2px dashed rgba(31,35,40,.25); border-radius: 12px; }

.fb-desk-top { left: 1042px; top: 500px; width: 184px; height: 16px; z-index: 3; border-radius: 4px; background: #B98B5B; border-bottom: 5px solid #8E6640; }
.fb-desk-leg { top: 516px; width: 11px; height: 112px; z-index: 3; background: #8E6640; }
.fb-desk-plq { left: 1080px; top: 536px; width: 110px; height: 30px; z-index: 3; border-radius: 6px; background: var(--fb-paper); border: 2px solid var(--fb-ink); font-size: 17px; font-weight: 800; line-height: 26px; text-align: center; white-space: nowrap; }
.fb-mug { left: 1194px; top: 474px; width: 20px; height: 26px; z-index: 3; border-radius: 3px 3px 6px 6px; background: var(--fb-paper); border: 2px solid var(--fb-ink); }
.fb-mug i { position: absolute; left: 16px; top: 5px; width: 8px; height: 10px; border: 2px solid var(--fb-ink); border-left: 0; border-radius: 0 5px 5px 0; }
.fb-pt { position: absolute; left: 0; top: 0; width: 52px; height: 38px; z-index: 4; opacity: 0; pointer-events: none; }
.fb-pt.fb-show { opacity: 1; }
.fb-pt.fb-ptfly { z-index: 25; }
.fb-pt-in {
  position: absolute; inset: 0; border-radius: 5px; background: #fff; border: 2px solid var(--fb-ink); box-shadow: 0 2px 0 rgba(31,35,40,.2);
  background-image: linear-gradient(var(--c), var(--c)), linear-gradient(#C9C2B4, #C9C2B4), linear-gradient(#C9C2B4, #C9C2B4);
  background-size: 15px 7px, 34px 3px, 24px 3px; background-position: 4px 4px, 4px 16px, 4px 24px; background-repeat: no-repeat;
}
.fb-pt-in.fb-land { animation: fb-land .32s ease-out; }

/* ---------- machines ---------- */
.fb-m { position: absolute; left: 0; top: 0; width: 114px; height: 124px; z-index: 10; transition: transform .46s cubic-bezier(.3,1.42,.5,1); }
.fb-m.fb-drag { transition: none; z-index: 40; }
.fb-mb {
  position: absolute; left: 0; top: 0; width: 114px; height: 124px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; text-align: left; cursor: grab; touch-action: none;
}
.fb-on .fb-mb { cursor: pointer; }
.fb-drag .fb-mb { cursor: grabbing; }
.fb-mtilt, .fb-mthud { position: absolute; left: 0; top: 0; width: 114px; height: 124px; display: block; }
.fb-mtilt { transform-origin: 57px 0; transition: transform .14s ease-out; }
.fb-mthud { transform-origin: 50% 0; }
.fb-mthud.fb-thud { animation: fb-thud .5s cubic-bezier(.3,1.3,.5,1) both; }
.fb-wob .fb-mthud { animation: fb-wob 2.6s ease-in-out infinite; }
.fb-nub { position: absolute; left: 39px; top: 0; width: 36px; height: 12px; border-radius: 3px; background: #2B2E33; }
.fb-mbody {
  position: absolute; left: 0; top: 8px; width: 114px; height: 96px; display: block; border-radius: 12px;
  background: var(--mc); border: 2.5px solid var(--fb-ink); box-shadow: 0 4px 0 rgba(31,35,40,.22); transition: box-shadow .18s ease;
}
.fb-mb:hover .fb-mbody { box-shadow: 0 7px 0 rgba(31,35,40,.26); }
.fb-drag .fb-mbody { box-shadow: 0 26px 30px -10px rgba(31,35,40,.45); }
.fb-mname { position: absolute; left: 8px; top: 6px; right: 28px; font-size: 14.5px; font-weight: 800; line-height: 1.08; color: var(--mf); }
.fb-gear { position: absolute; right: 5px; top: 5px; width: 21px; height: 21px; border-radius: 50%; background: var(--fb-ink); display: flex; align-items: center; justify-content: center; }
.fb-gear svg { width: 15px; height: 15px; display: block; }
.fb-on .fb-gear svg { animation: fb-spin 1.8s linear infinite; }
.fb-lcd { display: block; background: #16191D; color: #BDB6A8; font-family: var(--fb-mono); font-weight: 500; border-radius: 5px; overflow: hidden; }
.fb-mbody .fb-lcd { position: absolute; left: 5px; right: 5px; top: 40px; height: 32px; padding: 3px 5px; font-size: 9px; line-height: 13px; }
.fb-on .fb-lcd { color: #7CF2B4; }
.fb .fb-lcd.fb-lcd-err { color: #FF9C8A; }
.fb-leds { position: absolute; left: 8px; top: 78px; display: flex; gap: 4px; }
.fb-leds i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(31,35,40,.28); }
.fb-on .fb-leds i { background: #34D399; }
.fb-on .fb-leds i:nth-child(2) { background: #FBBF24; }
.fb-work .fb-leds i { animation: fb-led .24s steps(1,end) infinite; }
.fb-work .fb-leds i:nth-child(2) { animation-delay: -.12s; }
.fb-vents { position: absolute; right: 8px; top: 76px; display: flex; flex-direction: column; gap: 3px; }
.fb-vents i { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: rgba(31,35,40,.35); }
.fb-on .fb-vents { display: none; }
.fb-head { position: absolute; left: 33px; top: 102px; width: 48px; height: 22px; overflow: visible; }
.fb-beam { fill: var(--mc); opacity: .35; transition: opacity .1s; }
.fb-work .fb-beam { opacity: 1; }
.fb-cone { position: absolute; left: 31px; top: 121px; width: 52px; height: 12px; border-radius: 0 0 8px 8px; background: linear-gradient(var(--mc), transparent); opacity: 0; transition: opacity .1s; }
.fb-work .fb-cone { opacity: .75; }
.fb-out {
  position: absolute; right: 6px; top: 83px; z-index: 2; height: 18px; display: inline-flex; align-items: center; gap: 3px;
  padding: 0 6px 0 5px; border: 0; border-radius: 999px; background: var(--fb-ink); color: var(--fb-paper);
  font-family: var(--fb-mono); font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
}
.fb-out:hover { background: #B42318; }
.fb-drag .fb-out { visibility: hidden; }

/* ---------- documents ---------- */
.fb-it {
  position: absolute; left: 0; top: 0; width: 66px; height: 70px; z-index: 5; padding: 0; border: 0;
  background: transparent; pointer-events: none; transform-origin: 50% 50%;
}
.fb-it.fb-fly { z-index: 20; }
.fb-it.fb-intray { z-index: 6; }
.fb-it:enabled { pointer-events: auto; cursor: pointer; }
.fb-it-in { position: absolute; left: 0; top: 0; width: 66px; height: 70px; display: block; transform-origin: 50% 50%; }
.fb-tile {
  position: absolute; left: 0; top: 0; width: 66px; height: 70px; display: block; overflow: hidden; border-radius: 9px;
  border: 2.5px solid var(--fb-ink); background: #fff; box-shadow: 0 3px 0 rgba(31,35,40,.25); transition: transform .15s ease, background-color .2s ease;
}
.fb-tile .fb-ic { position: absolute; left: 10px; top: 4px; width: 41px; height: 34px; display: block; }
.fb-read .fb-tile { background: #EEEAFE; }
.fb-read .fb-ic-doc { display: none; }
.fb-it:not(.fb-read) .fb-ic-data, .fb-pit:not(.fb-read) .fb-ic-data { display: none; }
.fb-it-l { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; color: var(--fb-ink); }
.fb-pips { position: absolute; left: 0; right: 0; top: 54px; display: flex; justify-content: center; gap: 4px; }
.fb-pips i { display: block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--pc); background: #fff; }
.fb-pips i.fb-pd { background: var(--pc); }
.fb-tile.fb-pop { animation: fb-ipop .4s cubic-bezier(.3,1.7,.5,1); }
.fb-bdg { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; display: none; align-items: center; justify-content: center; border-radius: 50%; border: 2.5px solid var(--fb-ink); }
.fb-bdg-ok { background: #16A34A; }
.fb-bdg-x { background: #E23A3A; color: #fff; font-family: var(--fb-mono); font-size: 14px; font-weight: 700; line-height: 1; }
.fb-done .fb-bdg-ok, .fb-fixed .fb-bdg-ok { display: flex; }
.fb-exc .fb-bdg-x { display: flex; }
.fb-exc .fb-bdg-ok { display: none; }
.fb-exc .fb-tile { border-color: #E23A3A; }
.fb-intray.fb-exc .fb-tile { animation: fb-excp 1.1s ease-in-out 5; }
.fb-fixed .fb-tile { border-color: #16A34A; }
.fb-it:enabled:hover .fb-tile { transform: scale(1.07); }
.fb-it:focus-visible { outline-offset: 4px; border-radius: 10px; }

/* ---------- win banner + confetti ---------- */
.fb-banner {
  left: 20px; top: 458px; width: 1206px; height: 170px; z-index: 30; padding: 0 30px 0 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; border-radius: 16px;
  background: var(--fb-ink); color: var(--fb-paper); box-shadow: 0 18px 40px -18px rgba(31,35,40,.7);
  animation: fb-pop .5s cubic-bezier(.3,1.5,.5,1) both;
}
.fb-banner-t { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fb-win-title { display: flex; flex-direction: column; font-size: 38px; font-weight: 800; line-height: 1.04; letter-spacing: -.005em; }
.fb-win-sub { max-width: 640px; font-family: var(--fb-mono); font-size: 13px; line-height: 1.55; color: #CFC8BA; }
.fb-banner-a { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.fb-cf { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.fb-cfx { position: absolute; width: 0; height: 0; animation: fb-cfx var(--d) cubic-bezier(.1,.8,.35,1) var(--dl) both; }
.fb-cfy { display: block; animation: fb-cfy var(--d) linear var(--dl) both; }
.fb-cff { display: block; margin: -6px 0 0 -5px; animation: fb-cff .7s linear infinite; }

/* ---------- phone layout: a vertical line, the machines are stations on the belt ---------- */
.fb-p {
  --bw: 46px; --bgap: 12px;
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 14px;
  border-radius: 18px; background-color: #DBD4C6;
  background-image: linear-gradient(rgba(31,35,40,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,35,40,.05) 1px, transparent 1px);
  background-size: 32px 32px; box-shadow: inset 0 0 0 2px rgba(31,35,40,.10);
}
/* the score stays in view while you work down the line (72px site header + 8px) */
.fb-p-bar {
  position: -webkit-sticky; position: sticky; top: 80px; z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 5px;
  border-radius: 12px; background: var(--fb-paper); border: 2px solid var(--fb-ink); box-shadow: 0 4px 0 rgba(31,35,40,.16);
}
.fb-p-cnt { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 42px; padding: 2px 6px; }
.fb-p-cnt + .fb-p-cnt { padding-left: 10px; border-left: 2px solid rgba(31,35,40,.12); }
.fb-p-cnt .fb-cnt-n { flex: 0 0 auto; min-width: 0; font-size: 24px; text-align: left; }
.fb-p-cnt .fb-cnt-l { min-width: 0; font-size: 10.5px; line-height: 1.2; white-space: normal; }
.fb-p-pile { position: relative; flex: 0 0 auto; width: 19px; height: 26px; }
.fb-p-pile i { position: absolute; left: 0; display: none; width: 17px; height: 11px; border-radius: 2px; background: #fff; border: 1.5px solid var(--fb-ink); box-shadow: inset 0 3px 0 #FF7A3D; }
.fb-p-pile i:nth-child(1) { bottom: 0; }
.fb-p-pile i:nth-child(2) { bottom: 5px; left: 2px; box-shadow: inset 0 3px 0 #3B82F6; }
.fb-p-pile i:nth-child(3) { bottom: 10px; left: 0; box-shadow: inset 0 3px 0 #E23A3A; }
.fb-p-pile i:nth-child(4) { bottom: 15px; left: 2px; box-shadow: inset 0 3px 0 #16A34A; }
.fb-p-pile i.fb-show { display: block; }
.fb-p-xbtn {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px;
  border-radius: 9px; border: 2px solid #E23A3A; background: #FFF4F1; text-align: left; cursor: pointer;
}
.fb-p-xb { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #E23A3A; color: #fff; border: 2px solid var(--fb-ink); font-family: var(--fb-mono); font-size: 14px; font-weight: 700; line-height: 1; }
.fb-p-xt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fb-p-xd { font-size: 14px; font-weight: 800; line-height: 1.2; }
.fb-p-xa { font-family: var(--fb-mono); font-size: 11px; line-height: 1.3; color: #B42318; }
.fb-p-xa:empty { display: none; }
.fb-p-xn { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #E23A3A; color: #fff; font-family: var(--fb-mono); font-size: 12px; font-weight: 700; line-height: 1; }
.fb-p-xn:empty { display: none; }
.fb-p-xbtn.fb-ok { border-color: #16A34A; background: #EAF7EE; cursor: default; }
.fb-p-xbtn.fb-ok .fb-p-xb { background: #16A34A; }
.fb-p-xbtn.fb-new { animation: fb-xnew 1.1s ease-out 2; }
.fb-p-hint { font-size: 16.5px; font-weight: 800; line-height: 1.22; }
.fb-p-hint:focus { outline: none; }
.fb-p-hint .fb-h2 { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.3; }
.fb-p-hint .fb-h2::before { content: none; }
.fb-p-hint .fb-h2:empty { display: none; }
.fb-p-acts { display: flex; gap: 8px; }
.fb-p-acts .fb-all { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 12px; font-size: 17px; white-space: normal; text-align: center; }
.fb-btn.fb-p-ib { flex: 0 0 auto; width: 52px; min-height: 52px; padding: 0; background: var(--fb-paper); }
.fb-btn.fb-p-ib:hover { background: var(--fb-ink); color: var(--fb-paper); }
.fb-p-ib svg { display: block; width: 20px; height: 20px; }
.fb-p-ib .fb-i-play, .fb-p-ib.fb-tog-on .fb-i-pause { display: none; }
.fb-p-ib.fb-tog-on .fb-i-play { display: block; }
.fb-btn.fb-p-ib.fb-tog-on { background: #FFC21A; color: var(--fb-ink); }
.fb-p-tip { margin-bottom: -2px; font-family: var(--fb-mono); font-size: 12px; line-height: 1.35; color: #4C5158; }
.fb-p-note { margin-top: -2px; }

.fb-p-line { position: relative; padding: 50px 0 54px; }
.fb-p-belt {
  position: absolute; left: 0; top: 16px; bottom: 16px; width: var(--bw); overflow: hidden; border-radius: 10px;
  background: #2B2E33; box-shadow: inset 4px 0 0 #3A3F47, inset -4px 0 0 #3A3F47, 0 4px 0 rgba(31,35,40,.16);
}
.fb-p-tread {
  position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; opacity: .7;
  background-image: repeating-linear-gradient(180deg, #4A4F57 0 14px, #30343A 14px 26px); background-size: 100% 26px;
  animation: fb-ptread .57s linear infinite;
}
.fb-paused .fb-p-tread, .fb-paused .fb-ps-gear svg { animation-play-state: paused !important; }
.fb-p-end { position: absolute; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: var(--bgap); pointer-events: none; }
.fb-p-in { top: 0; height: 42px; }
.fb-p-out { bottom: 0; height: 46px; }
.fb-p-hop, .fb-p-exit { position: relative; flex: 0 0 auto; width: var(--bw); height: 100%; border: 2.5px solid var(--fb-ink); overflow: hidden; }
.fb-p-hop { border-radius: 10px 10px 5px 5px; background: #3A3F47; }
.fb-p-hop::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: repeating-linear-gradient(-45deg, #FFC21A 0 6px, var(--fb-ink) 6px 12px); }
.fb-p-hop::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 6px; border-radius: 3px; background: var(--fb-ink); }
.fb-p-exit { border-radius: 5px 5px 10px 10px; background: #0F7D63; }
.fb-p-exit::before { content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 6px; border-radius: 3px; background: #16191D; }
.fb-p-exit i { position: absolute; left: 50%; bottom: 7px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #1B4D3F; box-shadow: inset 0 0 0 2px var(--fb-ink); }
.fb-p-exit i.fb-flash { animation: fb-flash .5s ease-out; }
.fb-p-lbl { font-size: 15px; font-weight: 800; line-height: 1; }
.fb-p-out .fb-p-lbl { color: #0F7D63; }

.fb-p-sts { display: grid; grid-auto-rows: 1fr; gap: 8px; margin-left: calc(var(--bw) + var(--bgap)); }
.fb-ps { position: relative; min-width: 0; }
.fb-ps-plate {
  position: absolute; z-index: 1; top: 50%; left: calc(4px - var(--bgap) - var(--bw)); width: calc(var(--bw) - 8px); height: 40px; margin-top: -20px;
  border-radius: 8px; border: 2px dashed rgba(245,241,233,.4); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fb-ps-plate::after {
  content: ''; position: absolute; left: calc(100% + 2px); top: 50%; width: calc(var(--bgap) + 4px); height: 0; margin-top: -1px;
  border-top: 2px dotted rgba(31,35,40,.35);
}
.fb-ps.fb-on .fb-ps-plate { border: 2px solid var(--fb-ink); background: var(--mc); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.fb-ps.fb-on .fb-ps-plate::after { height: 8px; margin-top: -6px; border-top: 2px solid var(--fb-ink); border-bottom: 2px solid var(--fb-ink); background: var(--mc); }
.fb-ps.fb-work .fb-ps-plate { box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 0 0 5px var(--mh); }
.fb-ps-b {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 58px; padding: 8px 10px;
  border-radius: 12px; border: 2px dashed rgba(31,35,40,.4); background: rgba(245,241,233,.78); text-align: left; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.fb-ps.fb-on .fb-ps-b { padding-right: 48px; border: 2px solid var(--fb-ink); background: var(--mc); color: var(--mf); box-shadow: 0 3px 0 rgba(31,35,40,.3); }
.fb-ps-ic { position: relative; flex: 0 0 auto; width: 28px; height: 28px; }
.fb-ps-plus { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--fb-ink); background: #fff; box-shadow: 0 2px 0 rgba(31,35,40,.2); }
.fb-ps-plus::before, .fb-ps-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; margin: -1.25px 0 0 -6px; border-radius: 2px; background: var(--fb-ink); }
.fb-ps-plus::after { transform: rotate(90deg); }
.fb-ps-gear { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--fb-ink); }
.fb-ps-gear svg { display: block; width: 18px; height: 18px; }
.fb-ps.fb-on .fb-ps-plus { display: none; }
.fb-ps.fb-on .fb-ps-gear { display: flex; }
.fb-ps.fb-on .fb-ps-gear svg { animation: fb-spin 1.8s linear infinite; }
.fb-ps-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fb-ps-name { font-size: 16px; font-weight: 800; line-height: 1.1; }
.fb-ps-fn { font-size: 12.5px; font-weight: 500; line-height: 1.25; color: #4C5158; }
.fb-ps.fb-on .fb-ps-fn { display: none; }
.fb-ps-lcd { display: none; max-width: 100%; padding: 3px 5px; font-size: 10.5px; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }
.fb-ps.fb-on .fb-ps-lcd { display: block; }
.fb-ps-x {
  position: absolute; right: 4px; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.16); color: var(--mf); cursor: pointer;
}
.fb-ps-x svg { width: 13px; height: 13px; }
.fb-ps-x:hover { background: rgba(0,0,0,.28); }
.fb-ps.fb-wob .fb-ps-plus { animation: fb-pwob 1.6s ease-in-out infinite; }
.fb-ps.fb-miss .fb-ps-b { animation: fb-miss .75s ease-out; }
.fb-ps.fb-miss .fb-ps-plate { animation: fb-missp .75s ease-out; }
.fb-ps.fb-pin .fb-ps-b { animation: fb-pin .5s cubic-bezier(.3,1.5,.5,1); }

.fb-p-items { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.fb-pit { position: absolute; left: 0; top: 0; width: 30px; height: 32px; border-radius: 6px; background: #fff; border: 2px solid var(--fb-ink); box-shadow: 0 2px 0 rgba(31,35,40,.3); }
.fb-pit::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 3px 3px 0 0; background: var(--c); }
.fb-pit .fb-ic { position: absolute; left: 1px; top: 6px; width: 24px; height: 20px; display: block; }
.fb-pit.fb-read { background: #EEEAFE; }
.fb-pit.fb-read .fb-ic-doc { display: none; }
.fb-pit-ok { position: absolute; right: -8px; top: -8px; width: 17px; height: 17px; display: none; align-items: center; justify-content: center; border-radius: 50%; background: #16A34A; border: 1.5px solid var(--fb-ink); }
.fb-pit-ok svg { display: block; width: 9px; height: 9px; }
.fb-pit.fb-done { border-color: #0F7D63; }
.fb-pit.fb-done .fb-pit-ok { display: flex; }
.fb-pit.fb-ppop { animation: fb-ppop .38s cubic-bezier(.3,1.7,.5,1); }
.fb-pit.fb-pdrop { opacity: 0; transition: transform .6s cubic-bezier(.5,0,.8,.6), opacity .5s ease-in .1s; }
.fb-pit.fb-pkick { opacity: 0; border-color: #E23A3A; transition: transform .5s cubic-bezier(.3,.7,.4,1), opacity .45s ease-in .05s; }
.fb-pit.fb-gone { opacity: 0; }

.fb-p-win { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 16px; border-radius: 14px; background: var(--fb-ink); color: var(--fb-paper); animation: fb-pop .5s cubic-bezier(.3,1.5,.5,1) both; }
.fb-p-win .fb-win-title { font-size: 24px; }
.fb-p-win .fb-win-sub { font-size: 12.5px; }
.fb-p-win .fb-cta { min-height: 54px; font-size: 19px; white-space: normal; text-align: center; }

/* ---------- keyframes ---------- */
@keyframes fb-tread { from { background-position: 0 0; } to { background-position: 30px 0; } }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@keyframes fb-led { 0% { opacity: 1; } 50% { opacity: .18; } }
@keyframes fb-bump { 0% { transform: scale(1.4); } 100% { transform: none; } }
@keyframes fb-thud { 0% { transform: translateY(-6px); } 30% { transform: translateY(5px) scale(1.05,.9); } 60% { transform: translateY(-2px) scale(.985,1.02); } 100% { transform: none; } }
@keyframes fb-wob { 0%, 56%, 100% { transform: none; } 64% { transform: translateY(-8px) rotate(-2.5deg); } 72% { transform: translateY(-2px) rotate(2deg); } 80% { transform: translateY(-5px) rotate(-1deg); } 88% { transform: none; } }
@keyframes fb-ipop { 0% { transform: scale(.82); } 100% { transform: none; } }
@keyframes fb-land { 0% { transform: translateY(-9px) scale(1.08,.86); } 100% { transform: none; } }
@keyframes fb-flash { 0% { background: #5EE0B5; box-shadow: inset 0 0 0 2px #1F2328, 0 0 0 6px rgba(94,224,181,.5); } 100% { background: #1B4D3F; box-shadow: inset 0 0 0 2px #1F2328, 0 0 0 0 rgba(94,224,181,0); } }
@keyframes fb-excp { 0%, 100% { box-shadow: 0 3px 0 rgba(31,35,40,.25), 0 0 0 0 rgba(226,58,58,0); } 50% { box-shadow: 0 3px 0 rgba(31,35,40,.25), 0 0 0 8px rgba(226,58,58,.3); } }
@keyframes fb-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fb-cfx { 0% { transform: translateX(0); opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(var(--dx)); opacity: 0; } }
@keyframes fb-cfy { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.15,.75,.4,1); } 30% { transform: translateY(calc(var(--up) * -1)); animation-timing-function: cubic-bezier(.5,0,.85,.65); } 100% { transform: translateY(var(--fall)); } }
@keyframes fb-cff { to { transform: rotate3d(1,.35,.15,360deg); } }
@keyframes fb-ptread { from { background-position: 0 0; } to { background-position: 0 26px; } }
@keyframes fb-ppop { 0% { scale: 1.3; } 100% { scale: 1; } }
@keyframes fb-pin { 0% { transform: translateX(14px); } 100% { transform: none; } }
@keyframes fb-pwob { 0%, 55%, 100% { transform: none; } 65% { transform: scale(1.18); } 75% { transform: scale(.94); } 85% { transform: scale(1.06); } }
@keyframes fb-miss { 0% { border-color: #E23A3A; border-style: solid; background-color: #FFE3DC; transform: translateX(-5px); } 25% { transform: translateX(4px); } 50% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes fb-missp { 0% { border-color: #FF8A73; background-color: rgba(226,58,58,.45); } }
@keyframes fb-xnew { 0% { box-shadow: 0 0 0 0 rgba(226,58,58,.55); } 100% { box-shadow: 0 0 0 10px rgba(226,58,58,0); } }

/* ---------- reduced motion: no tilt, no confetti, no animation; the belt steps (fabrica.js) ---------- */
.fb-rm *, .fb-rm *::before, .fb-rm *::after { animation: none !important; transition: none !important; }
.fb-rm .fb-cf { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fb *, .fb *::before, .fb *::after { animation: none !important; transition: none !important; }
  .fb .fb-cf { display: none !important; }
}


/* ---------- review fixes (10.10.2026) ---------- */
/* exceptions are "attention" (dark amber), not alarms; red stays for real errors only */
.fb { --fb-warn: #B45309; --fb-warn-ink: #92400E; --fb-warn-bg: #FFF7E6; }
.fb-tray, .fb-tray-lip { border-color: var(--fb-warn); }
.fb-has-exc .fb-tray { background: var(--fb-warn-bg); }
.fb-tray-lip { color: var(--fb-warn-ink); }
.fb-has-exc .fb-tray-lip { background: var(--fb-warn); color: #fff; }
.fb-exh { color: #4A4F57; }
.fb-exh.fb-on { color: var(--fb-warn-ink); }
.fb-bdg-x, .fb-p-xb, .fb-p-xn { background: var(--fb-warn); }
.fb-exc .fb-tile, .fb-pit.fb-pkick { border-color: var(--fb-warn); }
.fb-p-xbtn { border-color: var(--fb-warn); background: var(--fb-warn-bg); }
.fb-p-xa { color: var(--fb-warn-ink); }
@keyframes fb-excp { 0%, 100% { box-shadow: 0 3px 0 rgba(31,35,40,.25), 0 0 0 0 rgba(180,83,9,0); } 50% { box-shadow: 0 3px 0 rgba(31,35,40,.25), 0 0 0 8px rgba(180,83,9,.3); } }
@keyframes fb-miss { 0% { border-color: #B45309; border-style: solid; background-color: #FFF7E6; transform: translateX(-5px); } 25% { transform: translateX(4px); } 50% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes fb-missp { 0% { border-color: #B45309; background-color: rgba(180,83,9,.25); } }
@keyframes fb-xnew { 0% { box-shadow: 0 0 0 0 rgba(180,83,9,.5); } 100% { box-shadow: 0 0 0 10px rgba(180,83,9,0); } }
/* the desk count is information, not a score: ink, no bump */
.fb-cnt-pile .fb-cnt-n, .fb-cnt-pile.fb-hi .fb-cnt-n { color: #1F2328; }
.fb-cnt-pile .fb-cnt-n.fb-bump { animation: none; }
/* phones: the bar sits at the bottom, in thumb reach, and is the only sticky element besides the site header */
.fb-p-note { order: 19; }
.fb-p-bar { order: 20; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 18px -8px rgba(31,35,40,.35), 0 4px 0 rgba(31,35,40,.16); }
.fb-p-cnt { flex-wrap: wrap; row-gap: 2px; align-items: flex-end; align-content: center; }
.fb-p-cnt .fb-cnt-l { flex: 0 0 100%; font-size: 12px; line-height: 1.2; white-space: normal; }
.fb-p-cnt .fb-cnt-n { font-size: 22px; }
.fb-p:has(.fb-p-win:not([hidden])) .fb-all { display: none; }
.fb-p-hint { text-wrap: pretty; }
/* legibility and targets */
.fb-note, .fb-stage .fb-tip, .fb-shelf-h { font-size: 12px; color: #4A4F57; }
.fb-sock { color: rgba(31,35,40,.75); }
.fb-p-out .fb-p-lbl { color: #1F5A38; }
.fb-out { height: 24px; font-size: 11px; }
/* motion that stops on its own */
.fb-wob .fb-mthud { animation-iteration-count: 2; }
.fb-ps.fb-wob .fb-ps-plus { animation-iteration-count: 3; }
.fb-work .fb-leds i { animation-duration: 1s; }
/* the win: readable text, the site's pill CTA */
.fb-win-sub { font-family: inherit; font-size: 15px; line-height: 1.45; }
.fb-p-win .fb-win-sub { font-size: 14px; }
.fb-cta { border-radius: 999px; box-shadow: none; border: 2px solid var(--fb-ink); background: #F9A800; }
/* installed stations on phones: white card, colour band and gear (the colour stays on the belt plate) */
.fb-ps.fb-on .fb-ps-b { background: #FFFFFF; color: #1F2328; box-shadow: inset 8px 0 0 var(--mc), 0 3px 0 rgba(31,35,40,.3); padding-left: 18px; }
.fb-ps.fb-on .fb-ps-x { color: #1F2328; background: rgba(31,35,40,.08); }
.fb-ps.fb-on .fb-ps-gear { background: var(--mc); }

/* ==== round-2 UI/UX review (10.10.2026) ==== */
/* R2-13 the shelf label and hint clear the machine nubs */
.fb-shelf-l { top: 3px; }
.fb-shelf-h { top: 6px; }
/* R2-14 desktop, line finished: no second "Ia-o de la capăt" and no dead button above the banner */
.fb-stage:has(.fb-banner:not([hidden])) .fb-ctl, .fb-stage:has(.fb-banner:not([hidden])) .fb-tip { visibility: hidden; }
/* R2-15 exception text on the LCD in amber, like every other exception (it was salmon) */
.fb .fb-lcd.fb-lcd-err { color: #FDBA74; }
/* R2-21 the machine LCD is the only description before install: readable (was 9px mono) */
.fb-mbody .fb-lcd { font: 600 11px/13px 'Host Grotesk', Arial, sans-serif; }
/* P3: buttons are pills like every other button on the site; one yellow; the phone pile in ink */
.fb-btn { border-radius: 999px; }
.fb-btn.fb-all { color: var(--ye, #F9A800); }
.fb-btn.fb-tog.fb-tog-on, .fb-btn.fb-p-ib.fb-tog-on { background: var(--ye, #F9A800); }
.fb-p-pile i, .fb-p-pile i:nth-child(2), .fb-p-pile i:nth-child(3), .fb-p-pile i:nth-child(4) { box-shadow: inset 0 3px 0 #1F2328; }
/* phone stations: the display uses the same readable face as the desktop machines (R2-21); under 375 px the station
   gives its text a little more room, so the longest message ("raport trimis la 9:00") fits down to 320 px */
.fb-ps-lcd { font: 600 11px/14px 'Host Grotesk', Arial, sans-serif; }
@media (max-width: 374px) {
  .fb-ps-lcd { font-size: 10.5px; padding: 3px 4px; }
  .fb-ps.fb-on .fb-ps-b { padding-left: 14px; padding-right: 44px; gap: 6px; }
  .fb-ps-x { width: 38px; height: 38px; margin-top: -19px; right: 3px; }
}
@media (max-width: 339px) { .fb-ps-lcd { font-size: 10px; } }

/* ==== round-3 design review (11.10.2026): the site's own objects, refined; tested together at 1920-320px, RO and EN ==== */
/* ---------- F1 [fabrica] the "Excepții" tray is neutral until an exception lands ----------
   At rest it wore the exception amber (border, label): the warning colour with nothing to warn about, next to the
   ink "Optimizează-mi biroul" button. Neutral at rest, amber the moment a document is held back. */
.fb-tray, .fb-tray-lip { border-color: rgba(31,35,40,.32); }
.fb-tray { background: rgba(255,255,255,.28); }
.fb-tray-lip { background: #E6DFD3; color: #4A4F57; }
.fb-has-exc .fb-tray, .fb-has-exc .fb-tray-lip { border-color: var(--fb-warn); }
.fb-has-exc .fb-tray { background: var(--fb-warn-bg); }
.fb-has-exc .fb-tray-lip { background: var(--fb-warn); color: #fff; }