/* Round 2 — additions drawn in Eden's own UI (his tokens: --surface, --border, --ink, --ink-2, --ink-3, --accent, --accent-2,
   --track …, Geist). Everything here is new; Eden's page itself is his live page, frozen (eden/body.js + eden/eden.css). */
.ex-new { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--brand-lime); color: #0b0b0b; font: 600 9.5px/1.5 var(--font-geist-mono), monospace; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.ex-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ex-card > .ex-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ex-h h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ex-h h2 em { font-style: normal; color: var(--accent-2); font-weight: 500; margin-left: 4px; }
.ex-h p, .ex-sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.ex-body { padding: 14px 16px; }
.ex-mono { font-family: var(--font-geist-mono), monospace; }
.ex-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface); font-size: 12px; }
.ex-seg button { padding: 4px 10px; border-radius: 6px; color: var(--ink-2); border: 0; background: none; font: inherit; cursor: pointer; }
.ex-seg button.on { background: var(--accent-2-soft); color: var(--accent-2); font-weight: 500; }
.ex-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 500 13px var(--font-geist-sans), system-ui; cursor: pointer; white-space: nowrap; }
.ex-btn:hover { border-color: var(--ink-3); }
.ex-btn.lime { background: var(--brand-lime); border-color: var(--brand-lime); color: #0b0b0b; font-weight: 600; }
.ex-btn.ghost { border-color: transparent; color: var(--ink-2); }
.ex-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.ex-pill.ok { background: #e7f5df; color: #2f7a12; }
.ex-pill.tight { background: #fdf0d2; color: var(--warning-ink); }
.ex-pill.late { background: #fbe4e4; color: var(--critical); }
.ex-pill.done { background: var(--accent-2-soft); color: var(--accent-2); }
.ex-pill.none { background: var(--surface-2); color: var(--ink-3); }
.ex-tag { font: 500 10px var(--font-geist-mono), monospace; letter-spacing: .04em; color: var(--ink-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.ex-eg { font-size: 10.5px; color: var(--warning-ink); background: #fdf0d2; border-radius: 4px; padding: 0 5px; margin-left: 6px; font-weight: 500; }
.ex-muted { color: var(--ink-3); }
.ex-note { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }
.ex-note b { color: var(--ink); }
.ex-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.ex-scroll { overflow-x: auto; max-width: 100%; }

/* progress of a batch: in the console · produced · in progress · not started */
.ex-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--track); min-width: 120px; gap: 2px; }
.ex-bar i { display: block; height: 100%; }
.ex-bar .c { background: var(--accent-2); } .ex-bar .p { background: var(--accent); } .ex-bar .w { background: #c9df9f; }
.ex-key { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.ex-key span { display: inline-flex; align-items: center; gap: 5px; }
.ex-key i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ex-key .c { background: var(--accent-2); } .ex-key .p { background: var(--accent); } .ex-key .w { background: #c9df9f; } .ex-key .n { background: var(--track); }
.ex-key .d { width: 16px; height: 0; border-top: 2px dashed var(--ink-3); border-radius: 0; }

/* per-course strip, FR and EN, 8 steps */
.ex-strip { display: grid; grid-template-columns: 18px repeat(8, 12px); gap: 2px; align-items: center; font: 9px var(--font-geist-mono), monospace; color: var(--ink-3); }
.ex-strip i { height: 6px; border-radius: 2px; background: var(--track); display: block; }
.ex-strip i.y { background: var(--accent); } .ex-strip i.h { background: #c9df9f; }

/* the batch list */
.ex-lots { width: 100%; border-collapse: collapse; font-size: 13px; }
.ex-lots th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink-3); padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ex-lots td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ex-lots tr.sel td { background: var(--accent-2-soft); }
.ex-lots tr:last-child td { border-bottom: 0; }
.ex-lots .nm b { font-weight: 600; color: var(--ink); display: block; }
.ex-lots .nm small { font-size: 11.5px; color: var(--ink-3); }
.ex-lots .num { font-family: var(--font-geist-mono), monospace; font-size: 12px; white-space: nowrap; }
.ex-lots .grip { color: var(--pending); cursor: grab; width: 14px; font-size: 13px; }
.ex-lots .cnt { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; white-space: nowrap; }
.ex-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* the climb chart */
.ex-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ex-svg .g { stroke: var(--border); }
.ex-svg .ax { font: 10.5px var(--font-geist-mono), monospace; fill: var(--ink-3); }
.ex-svg .lab { font: 600 11px var(--font-geist-mono), monospace; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.ex-svg .goal { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ex-svg .goaltx { font: 600 11px var(--font-geist-mono), monospace; fill: var(--ink); }
.ex-svg .due { stroke: var(--critical); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ex-svg .duetx { font: 600 10.5px var(--font-geist-mono), monospace; fill: var(--critical); }
.ex-svg .now { stroke: var(--ink-3); stroke-dasharray: 2 3; }
.ex-svg .zone { fill: var(--accent-2-soft); opacity: .6; }

/* B · the queue with deadline dividers */
.ex-q { width: 100%; border-collapse: collapse; font-size: 13px; }
.ex-q td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ex-q tr.div td { background: var(--surface-2); padding: 9px 12px; border-top: 1px solid var(--border); }
.ex-q tr.div .dv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-q tr.div b { font-size: 13px; }
.ex-q tr.div .grip { cursor: ns-resize; }
.ex-q .grip { color: var(--pending); width: 14px; }
.ex-q .t b { font-weight: 500; }
.ex-q .t small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ex-q .num { font-family: var(--font-geist-mono), monospace; font-size: 12px; white-space: nowrap; text-align: right; }
.ex-q tr.more td { color: var(--accent-2); font-size: 12.5px; }

/* C · the timeline */
.ex-tl { position: relative; }
.ex-tl-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--border); min-height: 54px; }
.ex-tl-row:last-child { border-bottom: 0; }
.ex-tl-row .l { padding: 8px 12px; font-size: 13px; }
.ex-tl-row .l b { display: block; font-weight: 600; }
.ex-tl-row .l small { font-size: 11.5px; color: var(--ink-3); }
.ex-tl-row .r { position: relative; height: 54px; }
.ex-tl-head { display: grid; grid-template-columns: 230px minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.ex-tl-head .r { position: relative; height: 26px; }
.ex-tl-head .m { position: absolute; top: 6px; font: 10.5px var(--font-geist-mono), monospace; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; }
.ex-tl .vl { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--border); }
.ex-tl .vl.now { border-left: 1.5px solid var(--ink-3); }
.ex-tl .bar { position: absolute; top: 15px; height: 24px; border-radius: 6px; background: var(--accent); display: flex; align-items: center; padding: 0 8px; font: 600 11px var(--font-geist-sans), system-ui; color: #fff; white-space: nowrap; overflow: hidden; }
.ex-tl .bar.late { background: var(--critical); }
.ex-tl .bar.tight { background: var(--warning); color: #0b0b0b; }
.ex-tl .bar.done { background: var(--accent-2); }
.ex-tl .tail { position: absolute; top: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 7px); }
.ex-tl .dia { position: absolute; top: 19px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: var(--surface); border: 2px solid var(--ink); border-radius: 2px; }
.ex-tl .dia.late { border-color: var(--critical); }
.ex-step { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ex-step:last-child { border-bottom: 0; }
.ex-step small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ex-stp { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ex-stp button { width: 28px; height: 28px; border: 0; background: var(--surface); font-size: 15px; cursor: pointer; color: var(--ink); }
.ex-stp span { min-width: 28px; text-align: center; font: 600 13px var(--font-geist-mono), monospace; }
.ex-stp.up { border-color: var(--accent); }

/* the « new batch » panel */
.ex-new-lot { border: 1px dashed var(--ink-3); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; background: var(--surface); }
.ex-cap { font: 500 10.5px var(--font-geist-mono), monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.ex-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); margin-bottom: 10px; }
.ex-f span.in { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--ink); background: var(--bg); }
.ex-pick { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.ex-pick li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.ex-pick li:last-child { border-bottom: 0; }
.ex-pick li.dis { color: var(--ink-3); }
.ex-pick .ck { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--ink-3); display: grid; place-items: center; font-size: 10px; color: #fff; }
.ex-pick .ck.on { background: var(--accent-2); border-color: var(--accent-2); }
.ex-pick small { font-size: 11px; color: var(--ink-3); }
.ex-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ex-chips button { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.ex-chips button.on { background: var(--accent-2-soft); border-color: var(--accent-2-soft); color: var(--accent-2); font-weight: 500; }

/* « today » (01 C) inside Eden's UI */
.ex-heat { display: flex; flex-direction: column; gap: 3px; min-width: 680px; }
.ex-hr { display: grid; grid-template-columns: 150px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.ex-hr .n { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-hr.head em { font: 10px var(--font-geist-mono), monospace; font-style: normal; color: var(--ink-3); }
.ex-hc { height: 20px; border-radius: 3px; background: var(--surface-2); font: 600 10px var(--font-geist-mono), monospace; display: grid; place-items: center; color: var(--ink); }
.ex-hc.l1 { background: #dcefc0; } .ex-hc.l2 { background: #bcdc8c; } .ex-hc.l3 { background: #8fbf4f; color: #fff; } .ex-hc.l4 { background: var(--accent); color: #fff; }
.ex-hc.fut { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--border) 4px 5px); }
.ex-who { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ex-who td { padding: 6px 0; border-bottom: 1px solid var(--border); }
.ex-who tr:last-child td { border-bottom: 0; }
.ex-who .num { text-align: right; font-family: var(--font-geist-mono), monospace; font-size: 11.5px; color: var(--ink-3); }
.ex-delta { font: 600 11px var(--font-geist-mono), monospace; padding: 0 6px; border-radius: 999px; background: #e7f5df; color: #2f7a12; }

/* tabs in Eden's style (his client tabs) */
.ex-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ex-tabs a { padding: 8px 12px; font-size: 14px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.ex-tabs a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--accent-2); }
.ex-tabs a b { font: 500 11px var(--font-geist-mono), monospace; color: var(--accent-2); }
.ex-sel { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--ink); white-space: nowrap; }
.ex-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.ex-links a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; cursor: pointer; }

/* C · the drawer on a tile */
.ex-dim { position: fixed; inset: 0; background: rgba(11, 11, 11, .28); z-index: 40; }
.ex-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--border); z-index: 41; overflow: auto; box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .25); }
.ex-drawer > .hd { position: sticky; top: 0; background: var(--surface); padding: 16px 20px 0; border-bottom: 1px solid var(--border); z-index: 1; }
.ex-drawer .hd h2 { margin: 2px 0 2px; font-size: 18px; font-weight: 600; }
.ex-drawer .sec { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.ex-drawer .sec h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.ex-as { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ex-as:last-child { border-bottom: 0; }
.ex-as small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ex-tilesel { box-shadow: 0 0 0 2px var(--accent-2) !important; }

/* ── the platform switch (picked B): the platform's name is the button, under / beside the logo, same on all three ── */
.sw { position: relative; display: inline-block; }
.sw-box { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; }
.sw-box .k { font: 700 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #D5F098; color: #201A21; }
.sw-box .nm { flex: 1; font-family: Figtree, 'Geist', system-ui, sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-box .cv { font-size: 11px; opacity: .7; }
/* on a dark side menu (Video production, Admin console) */
.sw.dark { display: block; align-self: stretch; width: auto; margin: 0; }
.sw.dark .sw-box { background: #2B242C; border: 1px solid #3A323B; color: #fff; }
.sw.dark .sw-box:hover { border-color: #4A4150; }
/* on Eden's light header (Control Tower) */
.sw.light .sw-box { background: var(--surface); border: 1px solid var(--border); color: var(--ink); padding: 6px 10px; }
.sw.light .sw-box .nm { font-size: 13px; }
.sw-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 360px; padding: 10px; border-radius: 14px; background: #fff; color: #201A21; border: 1px solid #E6E3E7; box-shadow: 0 16px 44px -12px rgba(32, 26, 33, .38), 0 2px 8px rgba(32, 26, 33, .08); font-family: Figtree, 'Geist', system-ui, sans-serif; }
.sw-menu .t { font: 500 10.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #6D5F6F; padding: 2px 8px 8px; }
.sw-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 4px 12px; align-items: center; padding: 9px 8px; border-radius: 10px; color: inherit; text-decoration: none; cursor: pointer; }
.sw-row:hover { background: #F6F6F6; }
.sw-row.cur { background: #F7FBEE; box-shadow: inset 0 0 0 1px #BFE1A0; }
.sw-row .ic { width: 34px; height: 34px; display: block; }
.sw-row .ic svg { display: block; width: 34px; height: 34px; }
.sw-row b { display: block; font-size: 14px; font-weight: 600; }
.sw-row small { display: block; font-size: 12px; color: #6D5F6F; line-height: 1.35; }
.sw-row u { display: block; text-decoration: none; font: 10.5px 'JetBrains Mono', ui-monospace, monospace; color: #A39BA4; margin-top: 2px; }
.sw-row em { font-style: normal; color: #3A7D2C; font-weight: 700; text-align: center; }
.sw-row svg { color: #6D5F6F; }
.sw-foot { margin: 8px 8px 2px; padding-top: 8px; border-top: 1px solid #E6E3E7; font-size: 11.5px; color: #6D5F6F; }
.sw-why { position: fixed; right: 18px; bottom: 18px; z-index: 70; max-width: 300px; font: 12.5px/1.45 Figtree, system-ui, sans-serif; background: #201A21; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.sw-why b { color: #D5F098; }

@media (max-width: 1100px) { .ex-grid2 { grid-template-columns: minmax(0, 1fr); } .ex-new-lot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ex-tl-row, .ex-tl-head { grid-template-columns: 120px minmax(0, 1fr); }
  .ex-drawer { width: 100vw; }
  .sw-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .ex-lots .hide-s, .ex-q .hide-s { display: none; }
  .sw-why { left: 12px; right: 12px; max-width: none; }
}
.ex-btn.ink { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.ex-a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 500; }
@media (max-width: 760px) { body.sw-page .side { transform: none !important; position: fixed; z-index: 46; } }
.ex-strips { display: flex; flex-direction: column; gap: 3px; }
.ex-tl .blab { position: absolute; top: 19px; font: 500 11px var(--font-geist-mono), monospace; color: var(--ink-2); white-space: nowrap; }

/* 02 revised · the batch filter row, priorities, the switch page, the icon pages */
.ex-bchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -14px; }
.ex-bchips .lbl { font: 500 10.5px var(--font-geist-mono), monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.ex-bchips button { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.ex-bchips button b { font: 500 11px var(--font-geist-mono), monospace; color: var(--accent-2); }
.ex-bchips button.on { background: var(--accent-2-soft); border-color: var(--accent-2); color: var(--ink); font-weight: 500; }
.ex-bchips .ex-dot { margin-right: 2px; }
.ex-bchips .hint { font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
.ex-lots2 td.pri { white-space: nowrap; width: 72px; }
.ex-lots2 td.pri .mv { display: inline-flex; gap: 2px; margin-left: 8px; }
.ex-lots2 td.pri button { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 12px; cursor: pointer; color: var(--ink-2); }
.ex-lots2 td.pri button:disabled { opacity: .3; cursor: default; }
.ex-lots2 tr[data-b] { cursor: pointer; }
.ex-lots2 tr[data-b]:hover td { background: var(--surface-2); }
.ex-lots2 tr.sel td { background: var(--accent-2-soft) !important; }
.ex-lots2 td.ed { width: 70px; text-align: right; }
.ex-drawer .hd button[data-close] { margin-top: -4px; }
.btabs { display: flex; align-items: flex-end; gap: 2px; padding: 8px 10px 0; background: #DEE1E6; border-radius: 10px 10px 0 0; margin-bottom: 10px; font: 12.5px system-ui, sans-serif; overflow-x: auto; }
.btabs .bt { display: inline-flex; align-items: center; gap: 8px; min-width: 200px; max-width: 240px; padding: 8px 12px; border-radius: 8px 8px 0 0; color: #3c4043; white-space: nowrap; }
.btabs .bt span { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.btabs .bt svg { flex: none; }
.btabs .bt i { font-style: normal; color: #5f6368; }
.btabs .bt.on { background: #fff; color: #202124; }
.btabs .plus { padding: 8px 10px; color: #5f6368; }
.btabs.dk { background: #202124; } .btabs.dk .bt { color: #bdc1c6; } .btabs.dk .bt.on { background: #35363a; color: #fff; }
.s3w, .iw { max-width: 1280px; margin: 0 auto; padding: 32px 24px 60px; font-family: Figtree, 'Geist', system-ui, sans-serif; color: #201A21; }
.s3w h1, .iw h1 { font-family: Newsreader, Georgia, serif; font-weight: 600; font-size: 30px; margin: 0 0 6px; }
.s3w .ex-sub, .iw .ex-sub { font-size: 13px; color: #6D5F6F; max-width: 900px; }
.s3w .ex-cap, .iw .ex-cap { color: #6D5F6F; margin-top: 22px; }
.s3 .s3f { border: 1px solid #E6E3E7; border-radius: 12px; overflow: hidden; height: 540px; }
.s3 iframe { width: 100%; height: 100%; border: 0; display: block; }
.ihero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.ihero p { font-size: 15px; max-width: 640px; margin: 4px 0; }
.isz { display: flex; align-items: flex-end; gap: 22px; padding: 16px 20px; border-radius: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.isz span { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.isz small { font: 10px 'JetBrains Mono', monospace; color: #A39BA4; }
.isz .sep { width: 1px; height: 32px; background: #CFC9D1; }
.isz.w { background: #fff; border: 1px solid #E6E3E7; } .isz.g { background: #F1F1F1; } .isz.d { background: #201A21; } .isz.d .sep { background: #4A4150; }
.i2 { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; }
.iall { display: flex; gap: 14px; flex-wrap: wrap; }
.iall span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid transparent; width: 120px; text-align: center; }
.iall span.on { border-color: #201A21; background: #F7FBEE; }
.iall small { font-size: 12px; color: #6D5F6F; }
@media (max-width: 760px) { .i2 { grid-template-columns: minmax(0, 1fr); } .s3 .s3f { height: 460px; } .btabs .bt { min-width: 150px; } .iw .sw-menu { width: 100% !important; } }
.ex-as .ex-pill { justify-self: end; }

/* Dashboard · the sorting bar (where Eden's client tabs were) */
.eden-fbar { margin-top: -6px; }
.ex-fbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ex-fbar .lbl { font: 500 10.5px var(--font-geist-mono), monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ex-fsel { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font: 600 13.5px var(--font-geist-sans), system-ui; color: var(--ink); cursor: pointer; }
.ex-fsel:hover { border-color: var(--ink-3); }
.ex-fsel .k { font: 500 10.5px var(--font-geist-mono), monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ex-fsel i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ex-fsum { font-size: 12.5px; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ── Dashboard after the grandma test (gx2.js dashPage): the next step under the tiles, Do next | Needs attention, folds ── */
.gx-out, .gx-hid { display: none !important; }
.gx-next { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 14px; }
.gx-next .ex-btn { height: 36px; padding: 0 16px; font-size: 13.5px; }
.gx-row { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.gx-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1100px) { .gx-row { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 640px) { .gx-row section > ol > li.grid { grid-template-columns: 2rem 7.5rem minmax(0, 1.5fr) minmax(0, 1.2fr) 5.5rem 5.5rem; } }
@media (max-width: 639px) { ul.sm\:hidden .flex-wrap > span.whitespace-nowrap { white-space: normal; } }
.gx-ph { padding: 8px 16px 4px; font-size: 12px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.gx-ph span { font: 400 11px var(--font-geist-mono), monospace; color: var(--ink-3); margin-left: 4px; }
.gx-ph.gx-none { font-weight: 400; color: var(--ink-3); background: none; padding: 12px 16px; }
.gx-fold > summary { list-style: none; cursor: pointer; }
.gx-fold > summary::-webkit-details-marker { display: none; }
.gx-chev { display: inline-block; width: 12px; margin-left: 6px; color: var(--ink-3); font-size: 11px; font-weight: 400; }
.gx-chev::before { content: '▸'; }
.gx-fold[open] > summary .gx-chev::before, .gx-chev.on::before { content: '▾'; }
.gx-fold > summary p { margin: 0; }
.gx-fold[open] > ol { margin-top: 8px; }
.gx-card > summary h2 > span:first-of-type { margin-left: auto; }
.gx-donerow { cursor: pointer; }
.gx-donerow:hover td, li.gx-donerow:hover { background: var(--surface-2); }
/* Today: one grid — the hours (6 → 21) and, after each step's name, what moved since 8:00 */
.ex-grid2.gx-today { grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; }
@media (max-width: 1100px) { .ex-grid2.gx-today { grid-template-columns: minmax(0, 1fr); } }
.gx-today .ex-heat { min-width: 560px; }
.gx-today .ex-hr { grid-template-columns: 184px 68px repeat(16, minmax(0, 1fr)); }
.gx-today .ex-hr .n { white-space: normal; line-height: 1.25; }
.gx-d { text-align: center; font: 500 11.5px var(--font-geist-mono), monospace; color: var(--ink-3); }
.gx-dh { white-space: nowrap; text-align: center; font: 10px/1.2 var(--font-geist-mono), monospace; color: var(--ink-3); align-self: end; }
.gx-feed { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.gx-feed > summary .ex-cap, .gx-pace > summary .ex-cap { display: inline; margin: 0; }
.gx-feed[open] > table { margin-top: 6px; }
/* The climb: Eden's forecast details, folded */
.gx-pace { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.gx-pacebody { max-width: 340px; padding-top: 8px; }
@media (max-width: 640px) {
  .gx-today .ex-hr { grid-template-columns: 112px 66px repeat(16, minmax(0, 1fr)); }
  .gx-today .ex-heat { min-width: 470px; }
}

/* ── the Batches card (gBatches): one table, forecast + status in one column, the climb and ✎ Edit folded under it ── */
.bx-card > .ex-body.bx-body { display: flex; flex-direction: column; gap: 12px; }
#lotsbox > .bx-card > .ex-body.bx-body { padding: 2px 6px 8px; }
.bx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.bx-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bx-lab { display: none; }
.bx-fc .ex-pill { margin-left: 8px; }
.bx-lots .cnt.bx-ns { color: var(--ink-3); }
.bx-note { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.bx-note > span { flex: 1 1 420px; min-width: 0; }
.bx-note > .ex-btn { flex: none; }
.ex-btn.bx-second { height: 28px; border: 1.5px solid var(--brand-lime); font-weight: 600; }
.bx-fold { border-top: 1px solid var(--border); padding-top: 10px; }
.bx-fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.bx-fold > summary::-webkit-details-marker { display: none; }
.bx-fold > summary::before { content: '▸'; color: var(--ink-3); }
.bx-fold[open] > summary::before { content: '▾'; }
.bx-fold > summary b { font-weight: 600; color: var(--ink); }
.bx-fold .bx-in { margin-top: 10px; }
.bx-edit > summary { align-items: flex-start; }
.bx-hint { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) {
  .bx-lots, .bx-lots tbody { display: block; width: 100%; }
  .bx-lots thead { display: none; }
  .bx-lots tr { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .bx-lots tr:last-child { border-bottom: 0; }
  .bx-lots td { padding: 0; border: 0; }
  .bx-lots td.pri { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .ex-lots2.bx-lots td.pri .mv { margin: 0; }
  .bx-lots td.nm { grid-column: 2 / 4; grid-row: 1; }
  .bx-lots td.ed { grid-column: 4; grid-row: 1; width: auto; }
  .bx-lots td.bx-prog { grid-column: 2 / 5; grid-row: 2; }
  .bx-lots td.bx-due { grid-column: 2; grid-row: 3; align-self: start; line-height: 1.9; }
  .bx-lots td.bx-fc { grid-column: 3 / 5; grid-row: 3; align-self: start; white-space: normal; line-height: 1.9; }
  .bx-lots td.bx-fc .ex-pill { margin-left: 0; }
  .bx-lots td.bx-fc .num { margin-right: 8px; }
  .bx-lots .ex-bar { min-width: 0; }
  .bx-lab { display: inline; color: var(--ink-3); font-family: var(--font-geist-sans); font-size: 12px; margin-right: 2px; }
  .bx-hint { white-space: normal; }
}

/* ── Step history (Alex, Oct 21): click a step's tile → done each day, under the tiles (same pattern as the Costs tab) ── */
:root { --gx-fr: #6F4787; --gx-en: #8DB53C; }
@media (prefers-color-scheme: dark) { :root { --gx-fr: #8A62AE; --gx-en: #70A02F; } }
button[aria-controls="stage-panel"].gx-on { outline: 2px solid var(--accent-2); outline-offset: 2px; }
#gx-hist:empty { display: none; }
.gx-hist { margin-top: 16px; }
.gx-hist .ex-key { margin-bottom: 2px; }
.gx-hist .ex-h p { max-width: 640px; }
.gx-hact { display: flex; gap: 6px; align-items: center; }
.gx-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.gx-hchart { padding: 12px 16px 14px; min-width: 0; }
.gx-hside { border-left: 1px solid var(--border); padding: 14px 16px; }
.gx-hcv { margin-top: 6px; min-height: 250px; }
.gx-hleg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); }
.gx-hleg span { display: inline-flex; align-items: center; gap: 6px; }
.gx-hleg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gx-hleg i.dash { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--ink-3); }
.gx-hsvg { display: block; overflow: visible; }
.gx-hsvg text { font: 11px var(--font-geist-sans), system-ui, sans-serif; fill: var(--ink-3); }
.gx-hsvg .ya { text-anchor: end; font-variant-numeric: tabular-nums; }
.gx-hsvg .xa { text-anchor: middle; fill: var(--ink-2); }
.gx-hsvg .xa.xb { fill: var(--ink-3); font-size: 10.5px; }
.gx-hsvg .xa.we { fill: var(--ink-3); }
.gx-hsvg .xa.td { font-weight: 600; fill: var(--ink); }
.gx-hsvg .tv { text-anchor: middle; font-weight: 600; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.gx-hsvg .gl { stroke: var(--border); stroke-width: 1; }
.gx-hsvg .gl.base { stroke: var(--ink-3); opacity: .5; }
.gx-hsvg .avg { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }
.gx-hsvg .hit { fill: transparent; cursor: pointer; }
.gx-hsvg .hit:hover, .gx-hsvg .hit.on { fill: var(--accent-2-soft); }
.gx-hsvg path, .gx-hsvg rect:not(.hit) { pointer-events: none; }
.gx-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink-2); }
.gx-kv > div:last-child { border-bottom: 0; }
.gx-kv > div > span { min-width: 0; }
.gx-kv small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.gx-kv b { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-hdays { margin-top: 10px; }
.gx-hdays table { font-size: 12.5px; min-width: 460px; }
.gx-hdays th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.gx-hdays td { padding: 6px 8px; vertical-align: top; }
.gx-hdays .num { text-align: right; font-variant-numeric: tabular-nums; }
.gx-htip { position: fixed; z-index: 60; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); }
.gx-htip p { margin: 3px 0 0; }
.gx-htip ul { margin: 6px 0 0; padding: 0; list-style: none; max-height: 220px; overflow: hidden; }
.gx-htip li { padding: 2px 0; color: var(--ink-2); }
.gx-htip .ex-mono { color: var(--ink-3); margin-right: 4px; }
@media (max-width: 860px) { .gx-hgrid { grid-template-columns: 1fr; } .gx-hside { border-left: 0; border-top: 1px solid var(--border); } }
@media (max-width: 560px) { .gx-hist .ex-h { padding: 12px; } .gx-hchart { padding: 10px 12px 12px; } .gx-hside { padding: 12px; } .gx-hact .ex-btn:first-child { font-size: 12.5px; padding: 0 10px; } }

/* ── Every step, day by day: one row per step, one column per day (Alex: « LA plus utile ») ── */
:root { --hm1: #F3EEF5; --hm2: #E2D4EA; --hm3: #C4A8D6; --hm4: #8A62AE; --hm5: #6F4787; --hm-ink4: #fff; --hm-ink5: #fff; }
@media (prefers-color-scheme: dark) { :root { --hm1: #2A2230; --hm2: #3D2F49; --hm3: #5A4270; --hm4: #7F5BA3; --hm5: #B08ED2; --hm-ink4: #fff; --hm-ink5: #0b0b0b; } }
.gx-hmw { padding: 12px 16px 14px; }
.gx-hmt { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 640px; font-size: 13px; }
.gx-hmt th { font-weight: 500; color: var(--ink-3); font-size: 11.5px; text-align: center; padding: 2px 2px 6px; white-space: nowrap; }
.gx-hmt th.d span { display: block; color: var(--ink-2); font-size: 12px; }
.gx-hmt th.d small { display: block; font-size: 10.5px; }
.gx-hmt th.d.we span { color: var(--ink-3); }
.gx-hmt th.d.td span { color: var(--ink); font-weight: 600; }
.gx-hmt th.st { text-align: left; width: 210px; padding: 0 6px 0 0; }
.gx-hmt tbody th.st button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink); white-space: normal; line-height: 1.25; }
.gx-hmt tbody th.st button:hover, .gx-hmt tbody th.st button:focus-visible { background: var(--accent-2-soft); }
.gx-hmt tbody th.st button:focus-visible { outline: 2px solid var(--accent-2); }
.gx-hmt tbody th.st .ex-mono { color: var(--accent-2); font-size: 11px; }
.gx-hmt tbody th.st i { margin-left: auto; font-style: normal; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.gx-hmt tbody th.st button:hover i { opacity: 1; }
.gx-hmt td.c { height: 34px; min-width: 38px; text-align: center; border-radius: 6px; background: var(--surface-2); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); cursor: default; }
.gx-hmt td.c.b1 { background: var(--hm1); } .gx-hmt td.c.b2 { background: var(--hm2); } .gx-hmt td.c.b3 { background: var(--hm3); }
.gx-hmt td.c.b4 { background: var(--hm4); color: var(--hm-ink4); } .gx-hmt td.c.b5 { background: var(--hm5); color: var(--hm-ink5); }
.gx-hmt td.c.td:not([class*=" b"]) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.gx-hmt td.c.on, .gx-hmt td.c:hover { box-shadow: inset 0 0 0 2px var(--accent-2); }
.gx-hmt td.tot, .gx-hmt th.tot { text-align: right; padding: 0 4px 0 10px; font-variant-numeric: tabular-nums; color: var(--ink); width: 56px; }
.gx-hmkey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.gx-hmkey span { display: inline-flex; align-items: center; gap: 6px; }
.gx-hmkey i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.gx-hmkey i.b1 { background: var(--hm1); } .gx-hmkey i.b2 { background: var(--hm2); } .gx-hmkey i.b3 { background: var(--hm3); } .gx-hmkey i.b4 { background: var(--hm4); } .gx-hmkey i.b5 { background: var(--hm5); }
@media (max-width: 560px) { .gx-hmw { padding: 10px 12px 12px; } .gx-hmt th.st { width: 150px; } .gx-hmt tbody th.st button { font-size: 12.5px; padding: 6px 4px; } .gx-hmt tbody th.st { position: sticky; left: 0; background: var(--surface); z-index: 1; } }

/* ── The batch form, for real (Alex, Oct 21: « I want to see and edit batches ») ── */
.bx-saved { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.bx-form { border: 1.5px solid var(--accent-2); border-radius: 12px; background: var(--surface); padding: 14px 16px 16px; }
.bx-fh { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bx-fh h3 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.bx-fh .ex-sub { margin: 0; }
.bx-fh > button { margin-left: auto; }
.bx-dirty { color: var(--warning-ink); font-weight: 600; }
.bx-fg { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.bx-fg .ex-f .gn-in { width: 100%; height: 36px; box-sizing: border-box; }
.bx-fg select.gn-in { appearance: auto; }
.bx-cols { display: flex; gap: 6px; flex-wrap: wrap; }
.bx-cols button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.bx-cols button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.bx-pri { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.bx-pri b { font-size: 15px; color: var(--ink); }
.bx-pri .ex-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.bx-acts2 { display: flex; gap: 8px; margin: 12px 0 10px; }
.ex-btn.bx-save { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; height: 36px; padding: 0 18px; }
.ex-btn.bx-save:disabled { opacity: .35; cursor: default; }
.bx-dellink { all: unset; cursor: pointer; font-size: 13px; color: var(--critical); text-decoration: underline; text-underline-offset: 3px; }
.bx-delno { margin: 0; }
.bx-del { border: 1px solid var(--critical); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); }
.bx-del b { color: var(--ink); }
.bx-del span { display: flex; gap: 8px; margin-top: 8px; }
.ex-btn.bx-danger { background: var(--critical); border-color: var(--critical); color: #fff; font-weight: 600; }
.bx-ch { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: var(--ink); }
.bx-ch > button { margin-left: auto; }
.bx-cl { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; max-height: 460px; overflow: auto; }
.bx-cl > li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 170px 30px; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink); }
.bx-cl > li:last-child { border-bottom: 0; }
.bx-cl > li.ex-muted { display: block; color: var(--ink-3); }
.bx-cl .t small { display: block; font-size: 11.5px; color: var(--ink-3); }
.bx-cl .bx-new { color: var(--accent-2); font-weight: 600; }
.bx-cd { width: 9px; height: 9px; border-radius: 50%; background: var(--pending); }
.bx-cd.c { background: var(--accent-2); } .bx-cd.p { background: var(--accent); } .bx-cd.w { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.bx-cs { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.bx-mv { height: 30px; font-size: 12.5px; padding: 0 6px; width: 100%; }
.bx-x { height: 28px; width: 28px; padding: 0; justify-content: center; font-size: 16px; }
.bx-pick { border: 1px dashed var(--ink-3); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.bx-pick .gn-in { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.bx-pick .ex-cap { margin: 8px 0 4px; }
.bx-pl { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; }
.bx-pl li button { all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); }
.bx-pl li button:hover, .bx-pl li button:focus-visible { background: var(--accent-2-soft); }
.bx-pl li small { display: block; font-size: 11.5px; color: var(--ink-3); }
.bx-pl .pl { color: var(--accent-2); font-weight: 700; }
.bx-pl li.ex-muted { padding: 4px 8px; font-size: 12.5px; }
.bxw { max-width: 1240px; margin: 0 auto; padding: 26px 24px 80px; }
.bxw h1 { font: 600 26px/1.2 Figtree, system-ui, sans-serif; letter-spacing: -.01em; margin: 0 0 4px; color: #201A21; }
.bxw > p { margin: 0 0 16px; color: #6D5F6F; font-size: 14px; }
@media (max-width: 900px) { .bx-fg { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .bxw { padding: 18px 12px 60px; } .bx-cl > li { grid-template-columns: 10px minmax(0, 1fr) 30px; } .bx-cl .bx-cs { display: none; } .bx-cl .bx-mv { grid-column: 2 / 3; } .bx-form { padding: 12px; } }
/* the batch view: what is in it at a glance, and the order inside (Alex, Oct 21) */
.bx-lots tbody tr[data-b] { cursor: pointer; }
.bx-lots tbody tr[data-b]:hover { background: var(--accent-2-soft); }
.bx-glance { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); }
.bx-glance > span { display: inline-flex; align-items: center; gap: 5px; }
.bx-glance b { color: var(--ink); }
.bx-cl > li { grid-template-columns: 64px minmax(0, 1fr) 150px 170px 30px; }
.bx-pos { display: flex; align-items: center; gap: 4px; }
.bx-pos .ex-mono { width: 18px; text-align: right; color: var(--ink-3); font-size: 11.5px; }
.bx-ord { display: inline-flex; flex-direction: column; gap: 1px; }
.bx-ord { flex-direction: row; }
.bx-ord button { all: unset; cursor: pointer; width: 13px; text-align: center; font-size: 12px; color: var(--ink-2); border-radius: 3px; line-height: 18px; }
.bx-ord button:hover:not(:disabled) { background: var(--accent-2-soft); color: var(--accent-2); }
.bx-ord button:disabled { opacity: .25; cursor: default; }
.bx-cl .ex-strips { min-width: 0; }
@media (max-width: 560px) { .bx-cl > li { grid-template-columns: 64px minmax(0, 1fr) 30px; } .bx-cl .bx-mv { grid-column: 2 / 3; } }

/* ── Courses as bars (Alex, Oct 21: like the cost-per-course chart, open a course to see its languages) ── */
:root { --gx-busy: #b8d98a; }
@media (prefers-color-scheme: dark) { :root { --gx-busy: #5e7f33; } }
.gx-cvh { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
section.gx-cv-bars > div:not(.gx-cvh):not(.gx-cbars) { display: none !important; }
.gx-cbars { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 12px 12px; }
.gx-cbh { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 2px 4px 8px; }
.gx-cbh .ex-sub { margin: 0; max-width: 560px; }
.gx-cbr { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 210px; gap: 14px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.gx-cbr:hover, .gx-cbr:focus-visible { background: var(--surface-2); }
.gx-cbr:focus-visible { outline: 2px solid var(--accent-2); }
.gx-cbr.sub { cursor: default; background: var(--surface-2); border-radius: 0; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.gx-cbr.sub:last-of-type { border-radius: 0 0 8px 8px; }
.gx-cbr.open { background: var(--accent-2-soft); border-radius: 8px 8px 0 0; }
.gx-cbl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gx-chv { width: 10px; flex: none; color: var(--ink-3); font-size: 14px; line-height: 1; transition: transform .15s; display: inline-block; }
.gx-cbr.open .gx-chv { transform: rotate(90deg); }
.gx-cbn { color: var(--ink-3); font-size: 11.5px; flex: none; }
.gx-cbname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-cbname small { display: block; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.gx-cbr.sub .gx-cbname { padding-left: 18px; color: var(--ink-2); }
.gx-cblg { margin-left: auto; flex: none; font-size: 10.5px; color: var(--accent-2); }
.gx-cbt { position: relative; display: block; height: 16px; border-radius: 5px; background: var(--track); overflow: hidden; }
.gx-cbf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.gx-cbt i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface); opacity: .9; }
.gx-cbv { display: flex; flex-direction: column; min-width: 0; }
.gx-cbv b { font-weight: 600; font-variant-numeric: tabular-nums; }
.gx-cbv small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-cbdone { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.gx-cbdone:hover { background: var(--surface-2); }
.gx-cbkey { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; font-size: 12px; color: var(--ink-2); }
.gx-cbkey span { display: inline-flex; align-items: center; gap: 6px; }
.gx-cbkey i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) { .gx-cbr { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 4px; } .gx-cbr .gx-cbl { grid-column: 1 / -1; } .gx-cbv small { display: none; } }

/* ── Batches after the grandma review (Oct 21) ── */
.bx-cbar { display: inline-block; width: 4px; height: 16px; border-radius: 2px; flex: none; vertical-align: -3px; margin-right: 2px; }
.bx-lots td.nm b { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bx-lots td.nm small .show-s { display: none; }
.bx-lots tbody tr.open { background: var(--accent-2-soft); box-shadow: inset 4px 0 0 var(--bc, var(--accent-2)); }
.bx-lots tbody tr.bx-xrow:hover { background: none; }
.bx-lots tbody tr.bx-xrow > td { padding: 0 0 14px !important; border-bottom: 1px solid var(--border); }
.bx-xrow .bx-form { border-width: 1.5px; border-color: var(--bc, var(--accent-2)); border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: inset 4px 0 0 var(--bc, var(--accent-2)); padding-bottom: 0; }
.bx-key b { font-weight: 600; color: var(--ink-2); margin-right: 2px; }
.ex-key i.w, .bx-key i.w { background: var(--accent-soft); }
.bx-sortnote { margin: 0 4px; }
.bx-fh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.bx-fh h3 { grid-column: 1; }
.bx-fh .bx-close { grid-column: 2; grid-row: 1; margin: 0; }
.bx-fh .bx-glance { grid-column: 1 / -1; }
.bx-long { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.bx-delw { margin-top: 14px; }
.bx-dellink:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.bx-delno { margin: 4px 0 0; }
.bx-ch { align-items: baseline; }
.bx-ch .bx-sh { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.bx-ch > button { margin-left: 12px; }
.bx-cl { max-height: none; overflow: visible; }
.bx-cl > li { grid-template-columns: 136px minmax(0, 1fr) 150px 170px 72px; }
.bx-ord { gap: 2px; }
.bx-ord button { width: 28px; height: 28px; line-height: 28px; font-size: 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); text-align: center; }
.bx-ord button.tx { width: auto; padding: 0 7px; font-size: 11.5px; }
.bx-x { width: auto; height: 30px; padding: 0 8px; font-size: 12.5px; }
.ex-strip em { font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.bx-cs0 { font-size: 12px; color: var(--ink-3); }
.bx-pick { border: 1px solid var(--border); border-style: solid; background: var(--surface-2); }
.bx-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.bx-pt { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bx-pl { max-height: 220px; }
.bx-flash { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 12.5px; color: var(--ink); }
.bx-leave { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--warning); border-radius: 10px; background: color-mix(in oklab, var(--warning) 12%, var(--surface)); font-size: 13px; color: var(--ink-2); }
.bx-leave b { color: var(--ink); }
.bx-leave span { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bx-sbar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 14px -16px 0; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .25); }
.bx-st { font-size: 13px; color: var(--ink-2); }
.bx-st small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.bx-sb { display: flex; gap: 8px; }
.ex-btn.bx-save { background: var(--brand-lime); border-color: var(--brand-lime); color: #0b0b0b; font-weight: 600; height: 36px; padding: 0 20px; }
.ex-btn.bx-save:disabled { opacity: .4; }
.bx-climb > summary { list-style: none; }
.bx-climb > summary::before { content: none !important; }
.bx-climb > summary .ex-btn { height: 30px; font-size: 12.5px; }
@media (max-width: 900px) { .bx-cl > li { grid-template-columns: 136px minmax(0, 1fr) 72px; } .bx-cl .bx-cs { grid-column: 2 / 3; } .bx-cl .bx-mv { grid-column: 2 / 3; } }
@media (max-width: 560px) {
  .bx-lots td.nm small .show-s { display: inline; }
  .bx-lots .mv button { width: 36px; height: 36px; }
  .bx-cl > li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; }
  .bx-cl .bx-pos { grid-column: 1 / -1; }
  .bx-ord button { width: 36px; height: 36px; line-height: 36px; }
  .bx-cl .bx-cs { display: block; grid-column: 1 / -1; }
  .bx-cl .bx-mv { grid-column: 1 / 2; }
  .bx-sbar { margin: 14px -12px 0; padding: 10px 12px; }
  .bx-xrow .bx-form { padding: 12px 12px 0; }
}
.bx-card .ex-scroll { overflow: visible; }   /* the open batch's save bar sticks to the bottom of the screen */
.bx-lots td.nm b { display: flex; }
.bx-lots td.nm small { display: block; }
.bx-cl > li { grid-template-columns: 136px minmax(0, 1fr) 196px 170px 72px; }
.bx-cl .ex-strip { white-space: nowrap; }
.bx-lots .bx-prog .cnt { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) { .bx-cl > li { grid-template-columns: 136px minmax(0, 1fr) 72px; } }
@media (max-width: 560px) { .bx-cl > li { grid-template-columns: minmax(0, 1fr) auto; } }
.bx-cl .ex-strip { grid-template-columns: 18px repeat(8, 12px) auto; }
/* inline « + New client » / « + New batch » (Oct 21) */
.bx-inl { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.bx-inl .gn-in { flex: 1 1 160px; height: 32px; }
.bx-inl .ex-btn { height: 32px; }
.bx-cl > li .bx-nb { grid-column: 2 / -1; margin: 4px 0 0; }
.gn-newc { display: flex; gap: 6px; padding: 4px; }
.gn-newc .gn-in { flex: 1; min-width: 180px; }

/* ── The open batch as an accordion (Alex, Oct 21: « comme un pli… même design que » the cost table's language rows) ── */
.bx-lots tbody tr.bx-sub > td { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 9px 10px; font-size: 13px; vertical-align: middle; }
.bx-lots tbody tr.bx-sub:hover > td { background: var(--surface-2); }
.bx-lots tbody tr.bx-sub > td:first-child { box-shadow: inset 4px 0 0 var(--bc, var(--accent-2)); }
.bx-lots tbody tr.open + tr.bx-xrow ~ tr.bx-sub > td:first-child { box-shadow: none; }
.bx-lots tr.bx-subh > td { font-size: 12px; color: var(--ink-3); padding-top: 10px; padding-bottom: 8px; }
.bx-lots tr.bx-subh b { color: var(--ink); font-size: 13px; margin-right: 12px; }
.bx-lots tr.bx-subh .bx-glance { display: inline-flex; font-size: 12px; }
.bx-lots tr.bx-subh td.r { text-align: right; }
.bx-lots tr.bx-crow td.pri { white-space: nowrap; }
.bx-lots tr.bx-crow td.pri .ex-mono { display: inline-block; width: 20px; text-align: right; color: var(--ink-3); margin-right: 6px; font-size: 11.5px; }
.bx-lots tr.bx-crow .bx-ord { display: inline-flex; vertical-align: middle; }
.bx-lots tr.bx-crow td.nm { padding-left: 22px; }
.bx-lots tr.bx-crow td.nm .t { font-weight: 500; color: var(--ink); }
.bx-lots tr.bx-crow td.nm small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.bx-lots tr.bx-crow td.bx-nx { color: var(--ink-2); font-size: 12.5px; }
.bx-lots tr.bx-crow td.act { white-space: nowrap; text-align: right; }
.bx-lots tr.bx-crow td.act .bx-mv { width: 150px; height: 30px; display: inline-block; vertical-align: middle; }
.bx-lots tr.bx-crow td.act .bx-x { margin-left: 4px; }
.bx-lots tr.bx-set > td { background: var(--surface); }
.bx-setg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; align-items: start; padding: 4px 12px; }
.bx-setg .ex-f .gn-in { width: 100%; height: 34px; box-sizing: border-box; }
.bx-setg .ex-f label { display: flex; flex-direction: column; gap: 4px; }
.bx-setg .bx-delw { grid-column: 1 / -1; margin-top: 2px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bx-lots tr.bx-addr > td { padding-bottom: 14px; }
.bx-lots tr.bx-addr .bx-fnote { margin-left: 14px; font-size: 12.5px; color: var(--ink-2); }
.bx-lots tr.bx-addr .bx-pick { margin-bottom: 8px; }
.bx-fbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(920px, calc(100vw - 24px)); z-index: 45; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .35); padding: 10px 14px; }
.bx-fbin { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.bx-fbin .bx-st { flex: 1 1 260px; font-size: 13px; color: var(--ink-2); }
.bx-fbin .bx-st small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.bx-fbn { color: var(--ink); }
.bx-fbar .bx-leave { margin: 0 0 10px; }
.bx-card { padding-bottom: 84px; }
@media (max-width: 1100px) { .bx-lots tr.bx-crow td.act .bx-mv { width: 120px; } .bx-setg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bx-lots tr.bx-sub { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 8px; background: var(--surface-2); box-shadow: inset 4px 0 0 var(--bc, var(--accent-2)); }
  .bx-lots tbody tr.bx-sub > td { background: none; border: 0; padding: 0; box-shadow: none !important; }
  .bx-lots tr.bx-sub > td { grid-column: 1 / -1; }
  .bx-lots tr.bx-sub .hide-m { display: none; }
  .bx-lots tr.bx-crow td.nm { padding-left: 0; }
  .bx-lots tr.bx-crow td.act { text-align: left; display: flex; gap: 6px; }
  .bx-lots tr.bx-crow td.act .bx-mv { flex: 1; width: auto; }
  .bx-lots tr.bx-subh td.r { text-align: left; }
  .bx-setg { grid-template-columns: minmax(0, 1fr); padding: 4px 0; }
  .bx-lots tr.bx-addr .bx-fnote { display: block; margin: 8px 0 0; }
}
/* fixes after the first look (Oct 21) */
button[aria-controls="stage-panel"] { min-width: 0; }
button[aria-controls="stage-panel"] > * { min-width: 0; max-width: 100%; }
button[aria-controls="stage-panel"] .truncate { display: block; max-width: 100%; }
.bx-lots td.nm b { flex-wrap: nowrap; align-items: flex-start; }
.bx-lots td.nm b > span:not(.bx-cbar) { min-width: 0; }
.bx-lots td.nm b .bx-cbar { margin-top: 2px; }
.bx-lots td.nm b .ex-eg { flex: none; }
.bx-lots tr.bx-subh .bx-glance { display: inline; }
.bx-lots tr.bx-subh .bx-glance > span { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.bx-lots tr.bx-crow td.bx-cs { min-width: 176px; }
.bx-lots tr.bx-crow .ex-strip { grid-template-columns: 16px repeat(8, 10px) auto; }
@media (max-width: 760px) {
  .bx-lots tr.bx-sub td.pri { grid-row: auto; flex-direction: row; justify-content: flex-start; align-items: center; }
  .bx-lots tr.bx-crow td.bx-cs { min-width: 0; }
}
.bx-lots tr.bx-subh b { margin-right: 0; }
.bx-lots tr.bx-subh td > b:first-child { margin-right: 12px; }
@media (max-width: 760px) { .bx-lots tr.bx-sub td.nm { grid-row: auto; } }