/* Skrzynka (0.60): list of cases on the left, the case with its proposal on the right.
   Full screen (1440): list 340 px; half screen (1050, menu collapsed to 56 px): list 300 px; below 900: one column. */
.ib { container: ib / inline-size; display: flex; flex-direction: column; height: calc(100vh - 48px); min-width: 0; }
.ib.busy .ib-panel, .ib.busy .ib-items { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* kind colours: --k text, --kb soft background */
.ib-k-stopped { --k: var(--bad); --kb: var(--bad-soft); }
.ib-k-silent { --k: var(--warn); --kb: var(--warn-soft); }
.ib-k-phantom { --k: var(--ink-2); --kb: var(--line-2); }
.ib-k-drift { --k: var(--blue); --kb: #E9F0FA; }
.ib-k-peak { --k: #6B4FB3; --kb: #F0ECFA; }
.ib-k-anom { --k: #13807A; --kb: #E5F4F3; }
.ib-k-x { --k: var(--ink-2); --kb: var(--line-2); }

/* header: one line */
.ib-head { flex: none; display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line); min-width: 0; }
.ib-cyc { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; flex: none; }
.ib-cyc b { color: var(--navy-3); font-size: 15px; }
.ib-cyc-sub { font-size: 12px; color: var(--ink-3); }
.ib-prog { flex: 1; min-width: 120px; }
.ib-prog-t { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-bar { margin-top: 6px; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.ib-bar i { display: block; height: 100%; background: var(--orange); border-radius: 3px; transition: width .3s; }
.ib-auto { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid #CDE8D8; background: var(--ok-soft); color: var(--ok); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: default; }
.ib-head .btn { flex: none; }
.ib-note-wrap:empty { display: none; }
.ib-note { display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: var(--warn-soft); color: #6E4D05; font-size: 13px; border-bottom: 1px solid #F1E2BC; }
.ib-note svg { flex: none; }

/* body */
.ib-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.ib-list { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; background: #fff; border-right: 1px solid var(--line); }
.ib-list-h { border-bottom: 1px solid var(--line); }
/* 0.72: the shared filter (scope.js): bar on top, the count of cases in the filter, the note on a case */
.ib-scope { flex: none; }
.ib-fline { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 0; font-size: 12.5px; color: var(--orange-d); }
.ib-fline .ib-link-btn { font-size: 12px; }
.ib-fnote { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: var(--orange-soft); color: var(--ink-2); font-size: 12.5px; }
.ib-fnote svg { flex: none; margin-top: 1px; color: var(--orange-d); }
.ib-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px 2px; }
.ib-chip { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 2px 9px; font: 600 11.5px var(--font); color: var(--k, var(--ink-2)); cursor: pointer; white-space: nowrap; }
.ib-chip:hover { border-color: #C9D2E3; }
.ib-chip.on { background: var(--kb, var(--navy-soft)); border-color: transparent; color: var(--k, var(--navy-3)); }
.ib-list-cap { display: flex; justify-content: space-between; padding: 8px 14px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ib-items { overflow-y: auto; overflow-x: hidden; min-height: 0; }
.ib-item { padding: 10px 14px 10px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; display: grid; gap: 3px; }
.ib-item:hover { background: #FAFBFD; }
.ib-item.on { background: #FFF7F0; box-shadow: inset 3px 0 0 var(--orange); }
.ib-it-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ib-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--k); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-imp { margin-left: auto; font-weight: 700; color: var(--navy-3); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ib-first { background: var(--navy); color: #fff; border-radius: 4px; padding: 0 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ib-it-title { font-weight: 600; color: var(--navy-3); line-height: 1.35; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ib-it-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-subj { font-weight: 700; }
.ib-foot { border-top: 1px solid var(--line); padding: 8px 14px; font-size: 11.5px; color: var(--ink-3); display: grid; gap: 6px; }
.ib-foot .kbd { font-size: 10.5px; padding: 0 5px; }
.ib-keys { line-height: 1.9; }
.ib-anom { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.ib-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: ib-pulse 1.2s ease-in-out infinite; flex: none; }
@keyframes ib-pulse { 50% { opacity: .25; } }

/* the case */
.ib-panel { overflow-y: auto; overflow-x: hidden; min-width: 0; min-height: 0; background: #fff; }
.ib-p { padding: 16px 24px 40px; max-width: 1080px; }
.ib-p-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ib-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 12px; background: var(--kb); color: var(--k); white-space: nowrap; }
.ib-p-imp { font-weight: 700; color: var(--navy-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.ib-p-pos { font-size: 12px; }
.ib-nav { width: 26px; height: 24px; border: 1px solid var(--line); background: #fff; border-radius: 6px; color: var(--ink-2); cursor: pointer; font: 600 12px var(--mono); }
.ib-nav:hover:not([disabled]) { border-color: #C9D2E3; background: #FAFBFD; }
.ib-nav[disabled] { opacity: .4; cursor: default; }
.ib-p-title { margin: 10px 0 8px; font-size: 20px; line-height: 1.3; color: var(--navy-3); overflow-wrap: anywhere; }
.ib-why { margin: 0 0 14px; padding: 0; list-style: none; }
.ib-why li { position: relative; padding-left: 16px; margin: 3px 0; color: var(--ink-2); font-size: 13.5px; }
.ib-why li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.ib-chart { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 8px; margin-bottom: 14px; min-width: 0; }
.ib-chart-t { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; font-weight: 600; }
.ib-chart-t > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy-3); }
.ib-chart .chart { display: block; width: 100%; }
.ib-chart .legend { margin-top: 4px; font-size: 12px; gap: 12px; }

/* proposal */
.ib-prop { border: 1.5px solid #F8B48A; background: var(--orange-soft); border-radius: 12px; padding: 12px 16px 14px; margin-bottom: 14px; }
.ib-prop.keep { border-color: var(--line); background: #FAFBFD; }
.ib-prop-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-d); margin-bottom: 8px; }
.ib-prop.keep .ib-prop-l { color: var(--ink-2); }
.ib-accept { width: 100%; height: auto; min-height: 44px; padding: 9px 16px; font-size: 14.5px; justify-content: space-between; text-align: left; white-space: normal; }
.ib-effect { margin-top: 8px; font-size: 13px; color: var(--ink); }
.ib-effect:empty { display: none; }
.ib-alts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ib-alt { height: auto; min-height: 32px; padding: 5px 10px; font-size: 12.5px; white-space: normal; text-align: left; }
.ib-alt .kbd { font-size: 11px; }
.ib-minor { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.ib-link-btn { border: 0; background: none; padding: 2px 0; font: 600 12.5px var(--font); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ib-link-btn:hover { color: var(--navy-3); }
.ib-link-btn .kbd { font-size: 11px; }
.ib-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 6px; }
.ib-form label { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); }
.ib-form select, .ib-form input { height: 36px; font-size: 13.5px; }
.ib-reason { flex: 1 1 260px; min-width: 0; }
.ib-num { width: 110px; }

/* items of the case */
.ib-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ib-rows-h { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); background: #FAFBFD; border-bottom: 1px solid var(--line); }
.ib-rows-h b { color: var(--navy-3); }
.ib-rows-scroll { overflow-x: auto; }
.ib-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ib-tbl th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11.5px; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ib-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ib-tbl tr:last-child td { border-bottom: 0; }
.ib-tbl .n { text-align: right; }
.ib-tbl td.ib-nm { white-space: normal; min-width: 180px; }
.ib-nm a { color: var(--navy-3); font-weight: 600; text-decoration: none; }
.ib-nm a:hover { color: var(--orange-d); text-decoration: underline; }
.ib-rows-more { padding: 6px 12px 8px; font-size: 12px; border-top: 1px solid var(--line-2); }

/* cards: no data, no forecast, approved, empty inbox */
.ib-center { display: grid; place-items: center; min-height: calc(100vh - 160px); padding: 30px 20px; }
.ib-card { max-width: 560px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px 32px; box-shadow: var(--shadow); }
.ib-card h2 { font-size: 22px; margin-bottom: 6px; }
.ib-card p { margin: 4px 0; }
.ib-card-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; margin: 0 auto 16px; }
.ib-card-ico.ok { background: var(--ok-soft); color: var(--ok); }
.ib-card-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.ib-panel .ib-center { min-height: 100%; }

/* half screen (1050 px window, content about 994 px) */
@container ib (max-width: 1180px) {
  .ib-body { grid-template-columns: 300px minmax(0, 1fr); }
  .ib-head { gap: 14px; padding: 9px 16px; }
  .ib-cyc-sub { display: none; }
  .ib-p { padding: 14px 18px 32px; }
  .ib-p-title { font-size: 18px; }
}
@container ib (max-width: 760px) {
  .ib-auto { display: none; }
}
/* narrow window: list above the case, the page scrolls */
@media (max-width: 900px) {
  .ib { height: auto; }
  .ib-body { grid-template-columns: minmax(0, 1fr); }
  .ib-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ib-items { max-height: 300px; }
  .ib-panel { overflow: visible; }
}