/* fw · the shared floating-window component for every demo on the home page.
   Modeled on the real ProBuilt window chrome: white card, hamburger + title bar, grey window controls,
   outlined fields with floating labels, navy tabs and buttons, status chips, list grids.
   Sizing is in em and scales with the window width: .fw is a size container, .fw-in sets font-size from it.
   Usage:
   <div class="fw"><div class="fw-in">
     <div class="fw-bar"><span class="fw-burger"></span><span class="fw-title">Order 1048</span><span class="fw-ctl"><i class="min"></i><i class="max"></i><i class="x"></i></span></div>
     <div class="fw-body"> ...fields / grid / chips... </div>
   </div></div> */
.fw{position:relative;container-type:inline-size;background:#fff;color:#1d2433;border-radius:8px;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.25);overflow:hidden;font-family:"Segoe UI","Open Sans","Helvetica Neue",Arial,sans-serif;text-align:left}
.fw-in{font-size:calc(100cqw / 34);line-height:1.35}
.fw-bar{display:flex;align-items:center;gap:.7em;height:2.6em;padding:0 .9em;border-bottom:1px solid #e3e8f0;background:#fff;color:#2b3445;font-weight:600;font-size:1em;white-space:nowrap}
.fw-bar.navy{background:#2a4c86;color:#fff;border-bottom-color:#2a4c86}
.fw-burger{width:1.05em;height:.8em;flex:none;background:linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat;opacity:.8}
.fw-title{overflow:hidden;text-overflow:ellipsis;min-width:0}
.fw-ctl{margin-left:auto;display:flex;gap:.85em;align-items:center;opacity:.6}
.fw-ctl i{display:block;width:.75em;height:.75em;position:relative}
.fw-ctl .min::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:2px;background:currentColor}
.fw-ctl .max{border:2px solid currentColor;border-radius:1px;width:.7em;height:.7em}
.fw-ctl .x::before,.fw-ctl .x::after{content:"";position:absolute;left:50%;top:50%;width:1em;height:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.fw-ctl .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.fw-body{padding:.9em .9em 1em}
.fw-tabs{display:flex;gap:1.6em;padding:0 .9em;border-bottom:1px solid #e3e8f0;font-size:.92em;color:#3b4456;white-space:nowrap;overflow:hidden}
.fw-tabs span{padding:.55em 0}
.fw-tabs .on{color:#0b3b8c;border-bottom:2px solid #0b3b8c}
.fw-row{display:grid;grid-template-columns:repeat(var(--c,2),minmax(0,1fr));gap:.6em;margin-bottom:.6em}
.fw-f{position:relative;border:1px solid #c7cfdb;border-radius:4px;height:2.3em;padding:.85em .55em 0;font-size:.95em;color:#1d2433;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff}
.fw-f b{position:absolute;left:.45em;top:-.15em;font-weight:400;font-size:.68em;color:#5a6478;background:#fff;padding:0 .2em;line-height:1.2}
.fw-f.sel::after{content:"";position:absolute;right:.6em;top:50%;border:.28em solid transparent;border-top:.36em solid #3b4456;transform:translateY(-15%)}
.fw-f.focus{border-color:#19A5FF;box-shadow:0 0 0 2px rgba(25,165,255,.18)}
.fw-h{color:#1f6fa8;font-size:1.15em;margin:.3em 0 .45em}
.fw-link{color:#1f6fa8}
.fw-btn{display:inline-flex;align-items:center;justify-content:center;height:2.2em;padding:0 1.1em;border-radius:4px;background:#1565c0;color:#fff;font-weight:600;font-size:.85em;letter-spacing:.03em}
.fw-btn.ghost{background:#fff;color:#8a94a6;border:1px solid #c7cfdb}
.fw-grid{width:100%;border-collapse:collapse;font-size:.85em;table-layout:fixed}
.fw-grid th{text-align:left;font-weight:600;color:#3b4456;background:#f4f6fa;padding:.45em .5em;border-bottom:1px solid #e3e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-grid td{padding:.42em .5em;border-bottom:1px solid #eef1f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-grid tr.sel td{background:#0d4ea6;color:#fff}
.fw-grid td.num,.fw-grid th.num{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-block;padding:.12em .55em;border-radius:3px;font-size:.82em;font-weight:600;color:#fff;background:#3cb98a}
.chip.new{background:#3cb98a}.chip.billed{background:#2e9e5b}.chip.warm{background:#e8892c}.chip.tepid{background:#e6c13a;color:#3b2f00}.chip.cancel{background:#8b1d1d}.chip.blue{background:#1565c0}.chip.grey{background:#8a94a6}
.fw-foot{display:flex;align-items:center;gap:.6em;padding:.6em .9em;border-top:1px solid #e3e8f0;font-size:.82em;color:#5a6478}
.fw-foot .fw-btn{margin-left:auto}
.fw-hl{animation:fwflash 1.2s ease-out}
@keyframes fwflash{0%{background:rgba(25,165,255,.35)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.fw-hl{animation:none}}