/* How Fibric works (board S-how). Desktop: a 900px stage with the world (canvas,
   or the static poster) behind the step list and the panels. Narrow: poster, list,
   panels in flow. Without JS every panel shows; .js stacks them by state. */
.hw-band{background:#2450e8;color:#fff}
.hw-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end;padding-top:88px;padding-bottom:64px}
.hw-hero .sub{padding-bottom:8px}

.hw{position:relative;min-height:900px;overflow:hidden;background:#eef1f7}
.hw-stage{position:absolute;inset:0}
.hw-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 600ms ease}
.hw.gl .hw-stage canvas{opacity:1}
.hw-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;transition:opacity 600ms ease}
.hw.gl .hw-poster{opacity:0}
.hw-fade{position:absolute;left:0;top:0;bottom:0;width:760px;pointer-events:none;background:linear-gradient(90deg,rgba(238,241,247,.97) 0%,rgba(238,241,247,.9) 50%,rgba(238,241,247,0) 100%)}
.hw-grid{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding-top:64px;padding-bottom:48px}
.hw-left{flex:0 1 400px;min-width:0}
.hw-panels{flex:0 1 400px;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:16px}

/* the step list */
.hw-steps{list-style:none;margin:0;padding:0;border-top:1px solid #dfe3ec}
.hw-steps li{border-bottom:1px solid #dfe3ec}
.hw-step{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;text-align:left;width:100%;padding:12px 0;color:#5a606a}
.hw-n{width:28px;height:28px;border-radius:50%;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;background:#e3e7ef;color:#131417;transition:background-color 200ms ease,color 200ms ease}
.hw-t{display:block;font-size:19px;line-height:1.25;letter-spacing:-0.02em;transition:color 200ms ease}
.hw-d{display:block;margin-top:4px;font-size:14.5px;line-height:1.45}
.hw-bar{display:block;height:2px;margin-top:10px;border-radius:2px;background:rgba(19,20,23,.1);overflow:hidden}
.hw-fill{display:block;height:100%;width:0;background:#2450e8}
.hw-step.done .hw-fill{width:100%}
.hw-step.on{color:#4a4f58}
.hw-step.on .hw-t{color:#131417}
.hw-step.on .hw-n{background:#131417;color:#fff}
.hw-step.on[data-step="3"] .hw-n{background:#fff252;color:#131417;box-shadow:0 0 0 2px #131417}
@media (hover:hover) and (pointer:fine){.hw-step:not(.on):hover .hw-t{color:#2450e8}}
.hw-ctl{margin-top:16px;display:flex;gap:14px;align-items:center}
.hw-pause{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #dfe3ec;display:flex;align-items:center;justify-content:center;flex:none}
.hw-pause[hidden]{display:none}
.hw-tag{font-size:12.5px;color:#4a4f58}

/* panels */
.hw-src,.hw-card{background:#fff;border-radius:14px;box-shadow:0 2px 6px rgba(19,20,23,.08),0 30px 70px rgba(19,20,23,.16)}
.hw-src{width:340px;max-width:100%;box-sizing:border-box;padding:14px 18px 6px}
.hw-src-h{font-size:13px;font-weight:700;color:#4a4f58}
.hw-src-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 0;border-top:1px solid #eef0f4;font-size:14px;margin-top:10px}
.hw-src-row + .hw-src-row{margin-top:0}
.hw-src-k{display:block;font-size:12.5px;color:#5a606a}
.hw-card{width:400px;max-width:100%;box-shadow:0 2px 6px rgba(19,20,23,.08),0 30px 70px rgba(19,20,23,.18)}
.hw-card-h{display:flex;align-items:center;gap:10px;padding:16px 18px 0;flex-wrap:wrap}
.hw-card-h b{font-size:14.5px}
.hw-reads{font-size:12.5px;color:#5a606a}
.hw-ctag{margin-left:auto;font-size:11.5px;font-weight:700;color:#4a4f58;background:#eef0f4;border-radius:5px;padding:3px 7px}
.hw-opdot,.hw-sdot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;background:#2450e8;transition:background-color 200ms ease}
.hw-ctitle{padding:10px 18px 0;font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-0.025em}
.hw-cwhy{padding:12px 18px 0;font-size:14px;line-height:1.45;color:#2b2f36}
.hw-checks{list-style:none;margin:14px 18px 0;padding:12px 0 0;border-top:1px solid #dfe3ec;display:flex;flex-direction:column;gap:7px}
.hw-checks[hidden]{display:none}
.hw-chk{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;font-size:13.5px;color:#5a606a;transition:color 300ms ease}
.hw-chk circle{stroke:#c9cfdb;transition:stroke 300ms ease}
.hw-chk path{stroke:transparent;transition:stroke 300ms ease}
.hw-chk.ok{color:#131417}
.hw-chk.ok circle,.hw-chk.ok path{stroke:#1e7a46}
.hw-cfoot{margin-top:14px;padding:12px 18px 16px;border-top:1px solid #dfe3ec;display:flex;align-items:center;gap:12px;min-height:40px}
.hw-status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#131417}
.hw-card.wait .hw-opdot,.hw-card.wait .hw-sdot{background:#fff252;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #131417}
.hw-card.ran .hw-opdot,.hw-card.ran .hw-sdot{background:#1e7a46}
.hw-card.ran .hw-status{color:#1e7a46}
.hw-approve{margin-left:auto;height:38px;padding:0 18px;font-size:13.5px}
.hw-approve[hidden]{display:none}
.hw-approve.press{transform:scale(.95);background:#f5e600}
.hw-rec{width:400px;max-width:100%;background:#fff;border:1px solid #dfe3ec;border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(19,20,23,.08)}
.hw-rec-h{padding:12px 16px;display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.hw-rec-h span{color:#5a606a}
.hw-rec-row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 16px 12px;border-top:1px solid #eef0f4;font-size:13px}
.hw-rec-row b{font-weight:650}
.hw-rec-time{color:#5a606a}
.hw-rec-who{color:#4a4f58}
.hw-undo{font-weight:700;text-decoration:underline;text-underline-offset:3px;align-self:start;min-height:24px}
.hw-undo[aria-disabled="true"]{text-decoration:none;color:#1e7a46;cursor:default}
.hw-rec-foot{padding:0 16px 12px;font-size:12.5px;color:#4a4f58}

/* with JS: the source panel and the card share one slot; panels fade by state */
.hw.js .hw-panels{display:grid;justify-items:end;align-content:start;align-items:start}
.hw.js .hw-card,.hw.js .hw-src{height:auto;align-self:start}
.hw.js .hw-src,.hw.js .hw-card{grid-area:1/1}
.hw.js .hw-rec{grid-area:2/1}
.hw.js [data-panel]{transition:opacity 420ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1),visibility 0s linear 0s}
.hw.js [data-panel].off{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none;transition:opacity 420ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1),visibility 0s linear 520ms}

@media (max-width:900px){
  .hw-hero{padding-top:64px;padding-bottom:48px}
  .hw{min-height:0;overflow:visible}
  .hw-stage{position:relative;aspect-ratio:16/10;overflow:hidden}
  .hw-fade{display:none}
  .hw-grid{display:block;padding-top:24px;padding-bottom:8px}
  .hw-panels{margin-top:28px;align-items:stretch}
  .hw.js .hw-panels{justify-items:stretch}
  .hw-src,.hw-card,.hw-rec{width:auto}
  .hw.js [data-panel].off{display:none}
}
@media (prefers-reduced-motion: reduce){.hw.js [data-panel],.hw.js [data-panel].off{transition:none}}