/* Jumra prototype additions on top of Simple UI. Keep small: anything every project needs belongs in ui.css. */
.brand-mark.logo{background:#fff;border:1px solid var(--line);overflow:hidden}
.brand-mark.logo img{width:26px;height:26px;object-fit:contain}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table th.num{text-align:right}
.table tr.total td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
.table tr.left td{background:var(--sunk)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.tiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile .value.sm{font-size:20px}
.answer{font-size:15px;color:var(--ink-2);max-width:80ch}
.answer b{color:var(--ink)}
.sure{font-size:12px;color:var(--ink-3)}
.slot{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--s4) var(--s5);display:grid;gap:var(--s2)}
.slot.done{border-style:solid;border-color:var(--line);background:var(--surface)}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.check-list li{display:grid;grid-template-columns:20px 1fr;gap:var(--s2);font-size:13.5px;color:var(--ink-2)}
.check-list li::before{content:"✓";color:var(--ok);font-weight:700}
.check-list li.no::before{content:"✕";color:var(--attn)}
.check-list li b{color:var(--ink)}
.break{background:var(--attn-bg);border-radius:var(--r);padding:var(--s3) var(--s4);font-size:13px;color:var(--ink);display:grid;gap:4px}
.inbox{display:grid;grid-template-columns:380px minmax(0,1fr);gap:var(--s5);align-items:start}
.inbox-list{display:grid;gap:0;padding:0}
.inbox-item{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.inbox-item:last-child{border-bottom:0}
.inbox-item.on{background:var(--brand-soft)}
.inbox-item .meta{font-size:12px;color:var(--ink-3);grid-column:1/-1}
.filters{display:flex;gap:var(--s2);flex-wrap:wrap}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.actions{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.state-line{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.flag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650;color:var(--attn)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.match-line td{font-size:13px}
.group-row td{background:var(--sunk);font-size:12.5px;color:var(--ink-2)}
textarea.input{height:72px;padding:var(--s2) var(--s3);align-items:flex-start;font:inherit;resize:none;width:100%}
.input.area{height:72px;align-items:flex-start;padding-top:var(--s2)}
/* Excel renderings of the workbooks (what the downloaded file looks like) */
/* File preview in a Workbook pane: a small picture of the downloaded Excel sheet in its improved design
   (docs/02-ux-direction.md, "The downloaded workbook"). Only the file looks like Excel; the screens around it are app screens. */
.xlp{margin:0;background:#fff;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;font:11.5px/1.35 Arial,Helvetica,sans-serif;color:#1a1a1a;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.xlp-band{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:3px solid var(--brand)}
.xlp-band img{width:30px;height:25px;object-fit:contain;flex:none}
.xlp-band span{flex:1;min-width:0}
.xlp-band b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xlp-band small{color:#555;font-size:10.5px}
.xlp-band em{font-style:normal;font-weight:700;font-size:10px;letter-spacing:.08em;color:var(--attn);background:var(--attn-bg);border:1px solid currentColor;border-radius:3px;padding:1px 6px}
.xlp-t{width:100%;border-collapse:collapse}
.xlp-t th{background:var(--brand);color:#fff;text-align:left;font-weight:700;padding:4px 8px;font-size:11px}
.xlp-t td{padding:3px 8px;border-bottom:1px solid #ececec;white-space:nowrap}
.xlp-t .num{text-align:right;font-variant-numeric:tabular-nums}
.xlp-t tr.tot td{font-weight:700;border-top:1.5px solid #1a1a1a;border-bottom:0;background:#f6f6f6}
.xlp-t tr.sect td{background:#eef1ef;font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#444}
.xlp-t tr.more td{color:#777;font-style:italic}
.xlp-t tr:is(.k1,.k2,.k3,.k4,.k5,.k6) td:first-child{box-shadow:inset 3px 0 var(--k)}
.xlp-t tr:is(.k1,.k2,.k3,.k4,.k5,.k6) td{background:color-mix(in srgb,var(--k) 7%,#fff)}
.xlp-t td.ok{color:var(--ok);font-weight:700}
.xlp-t td.dr{color:var(--attn);font-weight:700}
.xlp-tabs{display:flex;gap:2px;background:#eef0ee;padding:4px 6px 0;border-top:1px solid var(--line-2)}
.xlp-tabs span{padding:2px 9px;font-size:10px;background:#f8f8f8;border:1px solid var(--line-2);border-bottom:0;border-radius:3px 3px 0 0;color:#444}
.xlp-tabs span.on{background:#fff;font-weight:700;color:#000;box-shadow:inset 0 2px var(--brand)}
.xlp + .hint{margin-top:6px}
/* Shell with the adaptive layer (as the Companion's prototype): the shell is the grid, the menu shows from the expanded class. */
.app{display:block}
@container app (min-width: 64.0625em){ .app > .shell{--side:var(--sidebar)} }
@container app (max-width: 64em){ .shell > .sidebar{display:none} }
.shell > .sidebar{grid-column:1/2}
.topbar{height:auto;min-height:var(--topbar)}
@container page (max-width: 1000px){ .inbox{grid-template-columns:minmax(0,1fr)} }