/* Coordinated Motion design system: tokens and the primitives every surface shares (the website,
   the dashboard, the catalogue studio and the designer). Served by Django at /static/ui/cm.css for
   its own pages and bundled into the app by apps/web/frontend/src/styles.css, which imports it.
   Compact density, soft corners, forest-green accent, Inter for text and JetBrains Mono for numbers;
   the live colour (Live Sessions, running states) is a cyan kept apart from the accent.
   Colours come from the brand ramp and neutrals in the MKB (projects/coordinated-motion-business-setup/
   brand-identity.md); the hex is the brand's, the comments name the step.
   Light by default; dark follows the system unless <html data-theme="light|dark"> says otherwise.
   Ported from design/prototype/src/shared/shared.css, which is no longer the source of truth. */
:root{
  --font-ui:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #F3F8F4;                       /* neutral 50 */
  --panel: #FFFFFF;
  --panel-2: #EBF0EC;                  /* neutral 100 */
  --line: #DAE0DB;                     /* neutral 200 */
  --line-2: #EBF0EC;                   /* neutral 100 */
  --fg: #161916;                       /* neutral 900 */
  --muted: #585C59;                    /* neutral 600 */
  --canvas: #EBF0EC;
  --grid1: #C0C6C1;                    /* neutral 300 */
  --grid2: #DAE0DB;
  --accent: #1F6B3A;                   /* brand 600 */
  --accent-2: #155C2F;                 /* hover: brand 700 */
  --accent-3: #174F31;                 /* pressed: brand 800 */
  --accent-soft: #D8F6DE;              /* brand 100 */
  --accent-3d: #50B066;                /* 3D highlight on the light stage, both themes: brand 400 */
  --link: #1F6B3A;
  --on-accent: #FFFFFF;
  --live: oklch(0.48 0.09 215);
  --live-soft: oklch(0.48 0.09 215 / 0.10);
  --warn: oklch(0.50 0.11 65);
  --warn-soft: oklch(0.80 0.12 80 / 0.24);
  --err: oklch(0.52 0.19 27);
  --err-soft: oklch(0.6 0.19 27 / 0.12);
  --scrim: oklch(0.2 0.012 150 / 0.3);
  --shadow: 0 1px 2px oklch(0.2 0.012 150 / 0.08), 0 8px 24px oklch(0.2 0.012 150 / 0.12);
  --shadow-sm: 0 1px 2px oklch(0.2 0.012 150 / 0.08);


  --fs:12.5px; --row:30px; --pad:12px; --ctl:28px; --r:7px; --r2:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0B0E0C;                     /* neutral 950 */
    --panel: #161916;                  /* neutral 900 */
    --panel-2: #1F221F;                /* between 900 and 800 */
    --line: #3F4440;                   /* neutral 700 */
    --line-2: #292C29;                 /* neutral 800 */
    --fg: #EBF0EC;                     /* neutral 100 */
    --muted: #9BA09C;                  /* neutral 400 */
    --canvas: #0B0E0C;
    --grid1: #3F4440;
    --grid2: #292C29;
    --accent: #50B066;                 /* brand 400 */
    --accent-2: #87D29A;               /* hover: brand 300 */
    --accent-3: #3E8E41;               /* pressed: brand 500 */
    --accent-soft: rgb(80 176 102 / 0.18);
    --accent-3d: #50B066;              /* 3D highlight on the light stage, both themes: brand 400 */
    --link: #87D29A;                   /* brand 300 */
    --on-accent: #0B0E0C;
    --live: oklch(0.78 0.11 215);
    --live-soft: oklch(0.78 0.11 215 / 0.16);
    --warn: oklch(0.82 0.13 80);
    --warn-soft: oklch(0.82 0.13 80 / 0.16);
    --err: oklch(0.72 0.17 27);
    --err-soft: oklch(0.72 0.17 27 / 0.16);
    --scrim: oklch(0.1 0.012 150 / 0.55);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 28px oklch(0 0 0 / 0.4);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #0B0E0C;                     /* neutral 950 */
  --panel: #161916;                  /* neutral 900 */
  --panel-2: #1F221F;                /* between 900 and 800 */
  --line: #3F4440;                   /* neutral 700 */
  --line-2: #292C29;                 /* neutral 800 */
  --fg: #EBF0EC;                     /* neutral 100 */
  --muted: #9BA09C;                  /* neutral 400 */
  --canvas: #0B0E0C;
  --grid1: #3F4440;
  --grid2: #292C29;
  --accent: #50B066;                 /* brand 400 */
  --accent-2: #87D29A;               /* hover: brand 300 */
  --accent-3: #3E8E41;               /* pressed: brand 500 */
  --accent-soft: rgb(80 176 102 / 0.18);
  --accent-3d: #50B066;              /* 3D highlight on the light stage, both themes: brand 400 */
  --link: #87D29A;                   /* brand 300 */
  --on-accent: #0B0E0C;
  --live: oklch(0.78 0.11 215);
  --live-soft: oklch(0.78 0.11 215 / 0.16);
  --warn: oklch(0.82 0.13 80);
  --warn-soft: oklch(0.82 0.13 80 / 0.16);
  --err: oklch(0.72 0.17 27);
  --err-soft: oklch(0.72 0.17 27 / 0.16);
  --scrim: oklch(0.1 0.012 150 / 0.55);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 28px oklch(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-ui); font-size:var(--fs); line-height:1.4}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
h1,h2,h3,h4{text-wrap:balance; margin:0}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:.95em}
.muted{color:var(--muted)}
svg.i{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--ctl); padding:0 11px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); color:var(--fg); white-space:nowrap; text-decoration:none}
.btn:hover{background:var(--panel-2); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.btn.primary:hover{background:var(--accent-2)}
.btn.primary:active{background:var(--accent-3)}
.btn.ghost{border-color:transparent; background:transparent}
.btn.ghost:hover{background:var(--panel-2)}
.btn.lg{height:38px; padding:0 16px; font-size:1.05em}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.ib{width:var(--ctl); height:var(--ctl); display:inline-grid; place-items:center; border:0; border-radius:var(--r); background:transparent; color:var(--muted); flex:none}
.ib:hover{background:var(--panel-2); color:var(--fg)}
.ib[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent)}
kbd.k{font-family:var(--font-num); font-size:10.5px; border:1px solid var(--line); border-radius:4px; padding:0 4px; color:var(--muted)}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:0 8px; font-size:.92em; height:20px; white-space:nowrap; background:var(--panel-2); color:var(--muted); border:1px solid var(--line-2)}
.pill.ok{background:var(--live-soft); color:var(--live); border-color:transparent}
.pill.warn{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.pill.err{background:var(--err-soft); color:var(--err); border-color:transparent}
.pill.acc{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.pill .d{width:6px; height:6px; border-radius:50%; background:currentColor}

.field{display:flex; align-items:center; gap:6px; height:var(--ctl); border:1px solid var(--line); border-radius:var(--r); padding:0 8px; background:var(--panel); color:var(--muted); min-width:0}
.field input{border:0; background:transparent; outline:none; flex:1; min-width:0; color:var(--fg)}
.field:focus-within{border-color:var(--accent)}
.inbox{height:var(--ctl); border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:0 8px; display:flex; align-items:center; gap:6px; min-width:0}
.inbox input,.inbox select{border:0; background:transparent; outline:none; width:100%; min-width:0}
.inbox i{font-style:normal; color:var(--muted); font-size:.9em}
.inbox:focus-within{border-color:var(--accent)}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel)}
.seg button{border:0; background:transparent; padding:0 10px; height:calc(var(--ctl) - 2px); color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto}
.tabs button{border:0; background:transparent; padding:8px 12px 9px; color:var(--muted); border-bottom:2px solid transparent; display:inline-flex; gap:6px; align-items:center; white-space:nowrap}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-pressed="true"]{color:var(--fg); border-bottom-color:var(--accent); font-weight:600}
.tabs .count{font-size:.85em; color:var(--muted); background:var(--panel-2); border-radius:999px; padding:0 6px}
.tabs .count.warn{background:var(--warn-soft); color:var(--warn)}

.tbl-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel)}
table.tbl{width:100%; border-collapse:collapse; white-space:nowrap; font-variant-numeric:tabular-nums}
table.tbl th{position:sticky; top:0; z-index:1; background:var(--panel); text-align:left; font-weight:500; color:var(--muted); padding:8px 12px; border-bottom:1px solid var(--line)}
table.tbl td{padding:0 12px; height:var(--row); border-bottom:1px solid var(--line-2)}
table.tbl tr:last-child td{border-bottom:0}
table.tbl .r{text-align:right}
table.tbl tbody tr.click{cursor:pointer}
table.tbl tbody tr.click:hover td{background:var(--panel-2)}
table.tbl tbody tr[aria-selected="true"] td{background:var(--accent-soft)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r2)}
.kv{display:grid; grid-template-columns:minmax(96px, 40%) 1fr; gap:6px 12px; margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0; min-width:0}

.bar{height:6px; border-radius:6px; background:var(--panel-2); overflow:hidden; border:1px solid var(--line-2)}
.bar > i{display:block; height:100%; background:var(--accent); border-radius:6px}
.bar.ok > i{background:var(--live)}
.bar.warn > i{background:var(--warn)}

/* menus */
.menu{position:absolute; z-index:40; min-width:220px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow); padding:6px}
.menu .mh{padding:6px 8px; color:var(--muted); font-size:.92em}
.menu button.mi{display:flex; width:100%; align-items:center; gap:8px; border:0; background:transparent; padding:6px 8px; border-radius:var(--r); text-align:left}
.menu button.mi:hover{background:var(--panel-2)}
.menu .sep{height:1px; background:var(--line); margin:6px 0}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90; background:var(--fg); color:var(--bg); padding:8px 14px; border-radius:var(--r); box-shadow:var(--shadow); max-width:calc(100% - 32px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* modal */
.modal{position:fixed; inset:0; z-index:70; background:var(--scrim); display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px 16px; overflow:auto}
.modal > .dlg{width:min(560px, 100%); background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow); overflow:hidden}
.dlg-h{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line)}
.dlg-h h3{font-size:1.15em; font-weight:600}
.dlg-b{padding:16px; display:flex; flex-direction:column; gap:12px}
.dlg-f{display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line)}

/* global bar: same skeleton on the website, dashboard, catalogue studio and designer */
.gbar{position:sticky; top:env(safe-area-inset-top, 0px); z-index:30; display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; background:var(--bg); border-bottom:1px solid var(--line); min-width:0}
.gbar-site{height:60px}
.gb-mark{width:28px; height:28px; border-radius:8px; background:var(--fg); color:var(--bg); display:grid; place-items:center; font-weight:700; font-size:11px; letter-spacing:.02em; flex:none; border:0; text-decoration:none; cursor:pointer}
a.gb-mark:hover{text-decoration:none; opacity:.85}
.gb-home{display:flex; align-items:center; gap:9px; border:0; background:transparent; padding:0; color:var(--fg); font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap}
.gb-org{display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; padding:5px 8px; border-radius:var(--r); font-weight:600; white-space:nowrap; color:var(--fg); max-width:220px}
.gb-org:hover{background:var(--panel-2)}
.gb-orgname{overflow:hidden; text-overflow:ellipsis}
.gb-org svg.i{width:14px; height:14px; color:var(--muted)}
.gb-tabs{display:flex; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none}
.gb-tabs::-webkit-scrollbar{display:none}
.gb-tabs > *{border:0; background:transparent; height:32px; padding:0 10px; border-radius:var(--r); color:var(--muted); font-weight:500; white-space:nowrap; display:inline-flex; gap:6px; align-items:center; text-decoration:none}
.gb-tabs > *:hover{color:var(--fg); background:var(--panel-2); text-decoration:none}
.gb-tabs > *[aria-current="true"]{color:var(--fg); background:var(--panel-2); font-weight:600}
.gb-tabs .gb-n{font-size:.85em; color:var(--muted); font-weight:500}
.gb-tabs .gb-n.live{color:var(--live)}
.gb-tabs svg.gb-ext{width:12px; height:12px; color:var(--muted)}
.gb-crumbs{display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap}
.gb-sp{flex:1}
.gb-search{width:240px; flex:none}
.gb-avatar{width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:600; font-size:11px; border:0; flex:none}
.gb-burger{display:none}
@media (max-width:900px){ .gb-search{display:none} .gb-word{display:none} }
@media (max-width:600px){ .gb-org{max-width:150px} .gb-bell{display:none} .gbar:not(.gbar-site) .gb-tabs{display:none} .gbar .gb-burger{display:inline-grid} .gbar:not(.gbar-site) .btn.primary .gb-lbl{display:none} }

/* app left nav (full or collapsed to a rail) */
.side{display:flex; flex-direction:column; gap:2px; width:232px; padding:10px 8px; border-right:1px solid var(--line); background:var(--bg); min-height:0; overflow:auto}
.side[data-collapsed="true"]{width:56px; padding:10px 8px; align-items:center}
.side .new{margin:2px 0 10px; width:100%}
.side[data-collapsed="true"] .new{width:36px; padding:0}
.side[data-collapsed="true"] .new .lbl{display:none}
.nav-i{display:flex; align-items:center; gap:9px; height:30px; padding:0 8px; border-radius:var(--r); border:0; background:transparent; color:var(--fg); width:100%; text-align:left; text-decoration:none; flex:none}
a.nav-i:hover{text-decoration:none}
.nav-i:hover{background:var(--panel-2)}
.nav-i[aria-current="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.nav-i.child{padding-left:33px; height:28px}
.nav-i .lbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav-i .n{margin-left:auto; color:var(--muted); font-size:.9em; font-weight:400}
.nav-i .n.live{color:var(--live)}
.nav-i .n.warn{color:var(--warn)}
.side[data-collapsed="true"] .nav-i{width:36px; height:34px; padding:0; justify-content:center; position:relative}
.side[data-collapsed="true"] .nav-i .lbl, .side[data-collapsed="true"] .nav-i .n{display:none}
.side[data-collapsed="true"] .nav-i[aria-current="true"]::before{content:""; position:absolute; left:-8px; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--accent)}
.side h4{font-size:.92em; font-weight:500; color:var(--muted); padding:12px 8px 4px; margin:0}
.nav-rule{display:block; width:22px; height:1px; background:var(--line); margin:8px 0}
.side .sp{flex:1}
.side .foot{border-top:1px solid var(--line); padding-top:8px; margin-top:8px; display:flex; flex-direction:column; gap:2px; width:100%; align-items:inherit}
@media (max-width:900px){ .side{display:none !important} .gbar .gb-burger{display:inline-grid} }

/* breadcrumbs in the bar (dashboard, catalogue studio, designer) */
.gb-crumbs{display:flex; align-items:center; gap:2px; min-width:0; overflow:hidden; margin-left:4px}
.gb-slash{color:var(--muted); opacity:.6; padding:0 2px; flex:none}
.gb-crumb{border:0; background:transparent; color:var(--muted); padding:4px 6px; border-radius:var(--r); white-space:nowrap; flex:none}
.gb-crumb:hover{background:var(--panel-2); color:var(--fg)}
.gb-here{font-weight:600; padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.gb-ver{color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:0 7px; font-size:.9em; flex:none}
@media (max-width:600px){ .gb-crumb, .gb-slash{display:none} }

/* website and account pages (Django templates): a centred column under the site bar */
.site{min-height:100%; display:flex; flex-direction:column}
.site-main{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:32px 16px 48px}
.site-main.narrow{max-width:26rem}
.site-foot{border-top:1px solid var(--line); color:var(--muted); padding:16px; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; font-size:.95em}
.prose{font-size:15px; line-height:1.55}
.prose h1{font-size:28px; font-weight:600; letter-spacing:-.01em; margin:0 0 12px}
.prose h2{font-size:1.25em; font-weight:600; margin:24px 0 8px}
.prose p{margin:0 0 12px; color:var(--fg)}
.prose p.lead{font-size:18px; color:var(--muted)}
.logo{display:block; height:40px; width:auto}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-light{display:none} :root:not([data-theme="light"]) .logo-dark{display:block} }
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
/* the account pages (sign in, invitation, password): plain Django forms inside .acct */
.acct h1{font-size:20px; margin:0 0 16px}
.acct form{display:grid; gap:14px; margin-top:16px}
.acct .field{display:grid; gap:4px; height:auto; border:0; padding:0; background:transparent; color:inherit}
.acct label{font-size:.95em; font-weight:600; color:var(--muted)}
.acct input[type=text], .acct input[type=email], .acct input[type=password]{height:34px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); color:var(--fg); font-size:14px}
.acct input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.acct button, .acct .button{font:inherit; font-weight:600; height:36px; padding:0 14px; border:0; border-radius:var(--r); cursor:pointer; background:var(--accent); color:var(--on-accent); text-decoration:none; text-align:center}
.acct button:hover, .acct .button:hover{background:var(--accent-2); text-decoration:none}
.acct button:active, .acct .button:active{background:var(--accent-3)}
.acct button.link{background:none; color:var(--link); padding:0; height:auto; font-weight:400}
.acct button.secondary{background:transparent; color:var(--fg); border:1px solid var(--line)}
.acct button.secondary:hover{background:var(--accent-soft)}
.acct .scopes{display:grid; gap:8px; margin:0; padding:0; border:0}
.acct .scopes legend{padding:0; margin-bottom:8px; font-weight:600; color:var(--muted)}
.acct .scopes label{display:flex; gap:8px; align-items:baseline; font-weight:400; color:var(--fg)}
.acct .actions{display:flex; gap:10px}
.errorlist{margin:0; padding:0; list-style:none; color:var(--err); font-size:.95em}
.notice{padding:10px 12px; border-radius:var(--r); background:var(--accent-soft)}
.help{font-size:.95em; color:var(--muted)}
.help ul{margin:4px 0 0; padding-left:18px}
.links{margin-top:20px; font-size:14px; color:var(--muted)}