/* Ported from kes-app App.js */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
.hbm { --ink:#101C18; --paper:#EFF2ED; --panel:#FFFFFF; --green:#0E6B4A; --deep:#08402D;
  --gold:#B8862B; --clay:#9E3B2E; --steel:#3C6E8F; --line:#D6DCD4; --muted:#5F6C64;
  font-family:'IBM Plex Sans', system-ui, sans-serif; color:var(--ink); background:var(--paper);
  min-height:100vh; font-size:14px; line-height:1.45 }
.hbm *{box-sizing:border-box}
.hbm h1,.hbm h2,.hbm h3{font-family:'IBM Plex Serif', Georgia, serif; font-weight:600; margin:0}
.hbm .mono{font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums}
.hbm button{font-family:inherit; font-size:13px; cursor:pointer; border-radius:2px; transition:background .12s, border-color .12s}
.hbm button:focus-visible, .hbm input:focus-visible, .hbm select:focus-visible, .hbm textarea:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.hbm .btn{display:inline-flex; align-items:center; justify-content:center; gap:4px; background:var(--green); color:#fff; border:1px solid var(--green); padding:7px 14px; font-weight:500; text-decoration:none; white-space:nowrap; line-height:1.2; border-radius:2px; font-size:13px; cursor:pointer}
.hbm .btn:hover{background:var(--deep); border-color:var(--deep)}
.hbm .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.hbm .btn.ghost:hover{border-color:var(--green); color:var(--green)}
.hbm .btn.warn{background:transparent; color:var(--clay); border:1px solid var(--clay)}
.hbm .btn.warn:hover{background:var(--clay); color:#fff}
.hbm .btn.sm{padding:4px 9px; font-size:12px}
.hbm .btn:disabled{opacity:.4; cursor:not-allowed}
.hbm input, .hbm select, .hbm textarea{font-family:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--line);
  background:#fff; border-radius:2px; width:100%; color:var(--ink)}
.hbm input[type=number]{font-family:'IBM Plex Mono', monospace; text-align:right}
.hbm .top{background:var(--deep); color:#EAF0EA; display:flex; align-items:center; gap:14px; padding:12px 20px; flex-wrap:wrap}
.hbm .brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.hbm .brand h1{font-size:16px; color:#fff; letter-spacing:.2px}
.hbm .brand p{margin:1px 0 0; font-size:11px; color:#9FBBAC; letter-spacing:.3px; text-transform:uppercase}
.hbm .chip{border:1px solid rgba(255,255,255,.25); padding:4px 10px; font-size:12px; border-radius:2px}
.hbm .top button{background:transparent; border:1px solid rgba(255,255,255,.3); color:#EAF0EA; padding:5px 10px}
.hbm .top button:hover{background:rgba(255,255,255,.1)}
.hbm .body{display:flex; align-items:stretch; min-height:calc(100vh - 58px)}
.hbm .nav{width:230px; flex:0 0 230px; background:#E5EAE3; border-right:1px solid var(--line); padding:14px 0}
.hbm .nav a{display:block; text-decoration:none}
.hbm .nav button{display:block; width:100%; text-align:left; background:transparent; border:0; border-left:3px solid transparent;
  padding:9px 18px; color:var(--ink); font-size:13.5px}
.hbm .nav button:hover{background:#DBE2D8}
.hbm .nav button.on{background:#fff; border-left-color:var(--gold); font-weight:600}
.hbm .tabs a{text-decoration:none}
.hbm .top a{text-decoration:none}
.hbm .nav .grp{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:14px 18px 6px}
.hbm .main{flex:1; padding:22px 26px 60px; min-width:0}
.hbm .page-h{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.hbm .page-h h2{font-size:21px}
.hbm .page-h span{color:var(--muted); font-size:12.5px}
.hbm .card{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:16px 18px; margin-bottom:16px}
.hbm .card > h3{font-size:14px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.hbm .grid{display:grid; gap:14px}
.hbm .grid > *{min-width:0}
.hbm .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hbm .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hbm .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hbm .kpi{background:var(--panel); border:1px solid var(--line); padding:14px 16px; border-radius:3px}
.hbm .kpi .lab{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}
.hbm .kpi .val{font-family:'IBM Plex Mono', monospace; font-size:25px; font-weight:600; margin-top:6px; letter-spacing:-.5px}
.hbm table{width:100%; border-collapse:collapse; font-size:13px}
.hbm th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted);
  border-bottom:1px solid var(--line); padding:8px 10px; font-weight:600; white-space:nowrap}
.hbm td{padding:8px 10px; border-bottom:1px solid #EDF0EC; vertical-align:middle}
.hbm tr.click:hover td{background:#F5F8F4; cursor:pointer}
.hbm td.num, .hbm th.num{text-align:right; font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums}
.hbm td.num.low{color:var(--clay)}
.hbm .tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:2px; border:1px solid; white-space:nowrap}
.hbm .t-muted{color:var(--muted); border-color:var(--line); background:#F3F5F2}
.hbm .t-steel{color:var(--steel); border-color:#BBD0DE; background:#EEF5F9}
.hbm .t-gold{color:#7A5A15; border-color:#E1CB93; background:#FBF4E4}
.hbm .t-clay{color:var(--clay); border-color:#E2BDB7; background:#FBEFED}
.hbm .t-green{color:var(--green); border-color:#B4D6C6; background:#EDF6F1}
.hbm .t-deep{color:#fff; border-color:var(--deep); background:var(--deep)}
.hbm .field{display:block; margin-bottom:10px}
.hbm .field span{display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px}
.hbm .hint{font-size:11.5px; color:var(--muted); margin-top:4px}
.hbm .chain{position:relative; padding:6px 0 2px; --c1:186px; --c3:70px}
.hbm .chain-row{display:grid; grid-template-columns:var(--c1) 1fr var(--c3); align-items:center; gap:10px; margin-bottom:7px}
.hbm .chain-row .lb{font-size:12px; color:var(--muted); text-align:right}
.hbm .bar{height:18px; background:#EDF0EC; position:relative; border-radius:1px}
.hbm .bar i{display:block; height:100%; background:#C9D4CC; border-radius:1px}
.hbm .chain-row.bind .bar i{background:var(--gold)}
.hbm .chain-row.bind .lb{color:var(--ink); font-weight:600}
.hbm .chain-row .vl{font-family:'IBM Plex Mono', monospace; font-size:12.5px; text-align:right}
.hbm .cut{position:absolute; top:0; bottom:16px; border-left:2px dashed var(--clay)}
.hbm .cut b{position:absolute; bottom:-15px; left:-1px; font-size:10.5px; color:var(--clay); white-space:nowrap;
  font-family:'IBM Plex Mono', monospace; font-weight:500}
.hbm .checkline{display:flex; gap:9px; align-items:flex-start; padding:5px 0; font-size:12.5px}
.hbm .dot{width:9px; height:9px; border-radius:50%; margin-top:5px; flex:0 0 9px}
.hbm .ok{background:var(--green)} .hbm .bad{background:var(--clay)}
.hbm .signin{max-width:560px; margin:6vh auto; padding:0 20px}
.hbm .note{background:#FBF4E4; border:1px solid #E1CB93; padding:10px 13px; font-size:12.5px; border-radius:2px; margin-bottom:14px}
.hbm .toast{position:fixed; bottom:20px; right:20px; background:var(--deep); color:#fff; padding:10px 16px; border-radius:2px; font-size:13px; z-index:50}
.hbm .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.hbm .actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.hbm .actions form{display:contents}
.hbm .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border-radius:3px}
.hbm .table-wrap > table{min-width:760px}
.hbm th.actions-cell, .hbm td.actions-cell{
  position:sticky; right:0; z-index:3; background:var(--panel);
  width:1%; white-space:nowrap; vertical-align:middle; text-align:right;
  padding-right:12px; box-shadow:-10px 0 12px -10px rgba(16,28,24,.14)
}
.hbm tr.click:hover td.actions-cell{background:#F5F8F4}
.hbm thead th.actions-cell{z-index:4}

/* Compact row action control */
.hbm .actbar{display:inline-flex; align-items:center; gap:6px; justify-content:flex-end}
.hbm .icon-btn{
  width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:3px; cursor:pointer;
  font-size:16px; line-height:1; transition:background .12s, border-color .12s, color .12s
}
.hbm .icon-btn:hover, .hbm .icon-btn[aria-expanded="true"]{
  border-color:var(--green); color:var(--green); background:#EDF6F1
}
.hbm .actbar .btn.sm{padding:6px 10px}

/* Floating action menu (fixed — avoids table overflow clipping) */
.hbm-menu{
  position:fixed; z-index:1000; min-width:200px; max-width:260px;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 10px 28px rgba(16,28,24,.14), 0 2px 6px rgba(16,28,24,.06);
  padding:6px
}
.hbm-menu[hidden]{display:none !important}
.hbm-menu.open{display:block}
.hbm-menu a, .hbm-menu button{
  display:flex; width:100%; align-items:center; gap:10px; text-align:left;
  background:transparent; border:0; border-radius:3px; padding:9px 10px;
  color:var(--ink); font:inherit; font-size:13px; text-decoration:none; cursor:pointer
}
.hbm-menu a:hover, .hbm-menu button:hover{background:#F3F6F2}
.hbm-menu .mi{width:18px; text-align:center; color:var(--muted); font-size:12px; flex:0 0 18px}
.hbm-menu .danger{color:var(--clay)}
.hbm-menu .danger .mi{color:var(--clay)}
.hbm-menu .danger:hover{background:#FBEFED}
.hbm-menu .sep{height:1px; background:var(--line); margin:5px 4px}
.hbm-menu form{margin:0}
.hbm .scroll{max-height:70vh; overflow:auto}
@media (max-width:900px){
  .hbm .body{display:block}
  .hbm .nav{width:100%; flex:none; display:flex; overflow-x:auto; padding:0; border-right:0; border-bottom:1px solid var(--line)}
  .hbm .nav .grp{display:none}
  .hbm .nav button{width:auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; padding:11px 14px}
  .hbm .nav button.on{border-left:0; border-bottom-color:var(--gold)}
  .hbm .g2,.hbm .g3,.hbm .g4{grid-template-columns:1fr}
  .hbm .chain{--c1:106px; --c3:54px}
  .hbm .main{padding:16px 14px 50px}
  .hbm .table-wrap > table{min-width:640px}
  .hbm th.actions-cell, .hbm td.actions-cell{box-shadow:-8px 0 10px -8px rgba(16,28,24,.18)}
}
@media (prefers-reduced-motion:reduce){ .hbm *{transition:none !important} }

.hbm .help{display:inline-block; width:15px; height:15px; line-height:15px; text-align:center; border-radius:50%;
  border:1px solid var(--line); color:var(--muted); font-size:10px; cursor:help; margin-left:5px; background:#fff}
.hbm .helpbox{background:#F6F8F5; border-left:3px solid var(--gold); padding:8px 11px; font-size:12px; margin:4px 0 10px}
.hbm .duty{background:#EDF6F1; border:1px solid #B4D6C6; padding:12px 14px; margin-bottom:14px; font-size:13px}
.hbm .steps{counter-reset:s; list-style:none; padding:0; margin:0}
.hbm .steps li{counter-increment:s; position:relative; padding:8px 0 8px 34px; border-bottom:1px solid #EDF0EC; font-size:13px}
.hbm .steps li:before{content:counter(s); position:absolute; left:0; top:8px; width:22px; height:22px; border-radius:50%;
  background:var(--deep); color:#fff; font-size:11px; text-align:center; line-height:22px; font-family:'IBM Plex Mono',monospace}
.hbm .yr{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.hbm .yr label{font-size:11px; color:var(--muted); text-align:center; display:block}
.hbm .chips{display:flex; flex-wrap:wrap; gap:6px}
.hbm .chip2{border:1px solid var(--line); background:#fff; padding:5px 11px; font-size:12.5px; border-radius:2px; cursor:pointer; display:inline-flex; align-items:center; user-select:none; color:inherit; font:inherit; font-weight:400}
.hbm .chip2 input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.hbm .chip2.on,.hbm .chip2:has(input:checked){border-color:var(--green); background:#EDF6F1; color:var(--green); font-weight:600}
.hbm .tabs{display:flex; border-bottom:1px solid var(--line); margin-bottom:14px; flex-wrap:wrap}
.hbm .tabs button{background:transparent; border:0; border-bottom:3px solid transparent; padding:9px 13px; font-size:13px; color:var(--muted)}
.hbm .tabs button.on{border-bottom-color:var(--gold); color:var(--ink); font-weight:600}
.hbm .src{font-size:12.5px; padding:7px 0; border-bottom:1px solid #EDF0EC}
.hbm .flow{display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:11.5px}
.hbm .flow span{border:1px solid var(--line); padding:3px 8px; border-radius:2px; background:#fff; color:var(--muted)}
.hbm .flow span.on{background:var(--deep); color:#fff; border-color:var(--deep); font-weight:600}
.hbm .flow span.done{background:#EDF6F1; color:var(--green); border-color:#B4D6C6}

/* KES demand lines — full-width card above the 2-col grid */
.hbm .kes-q-card{overflow:hidden}
.hbm .kes-q-card .table-wrap{margin:0 -2px; border:1px solid var(--line); border-radius:3px}
.hbm .kes-q-card .table-wrap > table{min-width:640px}
.hbm table.kes-lines th, .hbm table.kes-lines td{padding:8px 10px; vertical-align:middle}
.hbm table.kes-lines tr.is-frozen{opacity:.72}
.hbm table.kes-lines .kes-in{
  width:4.5rem; max-width:100%; padding:5px 6px; text-align:right;
  font:inherit; font-family:'IBM Plex Mono',monospace; font-size:13px
}
.hbm table.kes-lines .kes-note{
  width:100%; min-width:0; max-width:14rem; padding:5px 8px; font:inherit; font-size:12.5px
}

.hbm .timeline{position:relative; margin-top:4px}
.hbm .tl-item{display:grid; grid-template-columns:16px 1fr; gap:12px; padding:0 0 16px; position:relative}
.hbm .tl-item:last-child{padding-bottom:0}
.hbm .tl-item:not(:last-child):before{
  content:""; position:absolute; left:7px; top:16px; bottom:0; width:2px; background:var(--line)
}
.hbm .tl-dot{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--steel); background:#fff;
  margin-top:2px; z-index:1
}
.hbm .tl-return .tl-dot{border-color:var(--clay); background:#FBEFED}
.hbm .tl-item:has(.tag.t-green) .tl-dot,
.hbm .tl-body .tag{vertical-align:middle}
.hbm .tl-top{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:2px}
.hbm .tl-comment{
  margin-top:8px; padding:8px 11px; background:#F6F8F5; border-left:3px solid var(--gold);
  font-size:13px; border-radius:0 2px 2px 0
}
.hbm .tl-comment-return{background:#FBEFED; border-left-color:var(--clay); color:var(--ink)}
.hbm .tl-diff{margin-top:10px; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.hbm .tl-diff table{margin:0; font-size:12.5px}
.hbm .tl-diff th{padding:6px 8px; background:#F6F8F5}
.hbm .tl-diff td{padding:6px 8px; vertical-align:top; word-break:break-word}
.hbm .tl-old{color:var(--clay); text-decoration:line-through; text-decoration-thickness:1px}
.hbm .tl-new{color:var(--green); font-weight:500}